[BUG] - DateInput extendVariants not working

[rettimo]

NextUI Version

2.4.3

Describe the bug

An error occurs when using DateInput with extendVariants.

import {
  extendVariants,
  DateInput as NextUiDateInput,
  DateInputProps as NextUiDateInputProps,
} from '@nextui-org/react';

import { ForwardRefRenderFunction, ReactElement } from 'react';

export interface DateInputProps extends NextUiDateInputProps {}

export const DateInput: ForwardRefRenderFunction<ReactElement, DateInputProps> = extendVariants(NextUiDateInput, {});

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use DateInput with extendVariants
2. Get an error

Expected behavior

Ability to use extendVariants as in all other components

Screenshots or Videos

No response

Operating System Version

macOS Sonoma 14.5

Browser

Chrome

[linear]

ENG-1157 [BUG] - DateInput extendVariants not working

[hugo-lovighi]

I have the same issue extending Spinner

[wingkwong]

@hugo-lovighi can you also share your code?

[hugo-lovighi]

Of cource !
I add a new size to nextui spinner according to https://nextui.org/docs/customization/custom-variants documentation.

Spinner.tsx component:

import { Spinner as NextUiSpinner } from '@nextui-org/spinner'
import { SpinnerProps } from '@nextui-org/spinner/dist/spinner'
import { extendVariants } from '@nextui-org/system'

export const ExtendedSpinner = extendVariants(NextUiSpinner, {
    variants: {
        size: {
            xs: {
                wrapper: 'h-4 w-4',
                circle1: 'border-2',
                circle2: 'border-2',
                label: 'text-xs'
            },
        },
    },
})

type ExtendedSpinnerProps = Omit<SpinnerProps, 'size'> & {
    size?: 'xs' | 'sm' | 'md' | 'lg'
}

export const Spinner = (props: ExtendedSpinnerProps) => <ExtendedSpinner {...props} />

package.json after this nextui update:

        "@nextui-org/pagination": "^2.0.33",
        "@nextui-org/progress": "^2.0.31",
        "@nextui-org/radio": "^2.1.2",
        "@nextui-org/skeleton": "^2.0.29",
        "@nextui-org/spinner": "^2.0.30",
        "@nextui-org/switch": "^2.0.31",
        "@nextui-org/system": "^2.2.2",
        "@nextui-org/tabs": "^2.0.32",
        "@nextui-org/theme": "^2.2.6",

to

        "@nextui-org/pagination": "^2.0.34",
        "@nextui-org/progress": "^2.0.32",
        "@nextui-org/radio": "^2.1.3",
        "@nextui-org/skeleton": "^2.0.30",
        "@nextui-org/spinner": "^2.0.31",
        "@nextui-org/switch": "^2.0.32",
        "@nextui-org/system": "^2.2.3",
        "@nextui-org/tabs": "^2.0.33",
        "@nextui-org/theme": "^2.2.7",

I got this error when I try to render the Spinner with the variant size (other sizes working fine)

Example.tsx:

...
<Spinner className="relative" size="xs" />
...

I try to fix this issue but without success.

[wingkwong]

@hugo-lovighi thanks. I got the problem and made the PR already.

[hugo-lovighi]

Thanks a lot ! We downgraded temporarily the dependencies. We are waiting patiently :)

[sethchurch]

I've been running into this issue as well. It seems adding a key of defaultVariants with a empty object value seems to work as a workaround for now.