diff --git a/packages/react/src/components/input/Input.tsx b/packages/react/src/components/input/Input.tsx index 229eaa3..9ae3d2f 100644 --- a/packages/react/src/components/input/Input.tsx +++ b/packages/react/src/components/input/Input.tsx @@ -28,7 +28,7 @@ const Component: ComponentType = React.forwardRef( props: ComponentProps, ref: Polymophic.Ref ) => { - const { as, children, className, color, size, variant, ...rest } = props + const { as, children, className, color, size, shape, variant, ...rest } = props const Element = as || Input @@ -36,6 +36,7 @@ const Component: ComponentType = React.forwardRef( const { slots } = useInput({ color: color ?? context?.color, size: size ?? context?.size, + shape: shape ?? context.shape, variant: variant ?? context?.variant, }) diff --git a/packages/react/src/components/input/InputGroup.tsx b/packages/react/src/components/input/InputGroup.tsx index e9d41db..1dee77b 100644 --- a/packages/react/src/components/input/InputGroup.tsx +++ b/packages/react/src/components/input/InputGroup.tsx @@ -27,11 +27,11 @@ const Component: ComponentType = React.forwardRef( props: ComponentProps, ref: Polymophic.Ref ) => { - const { as, children, className, color, size, variant, ...rest } = props + const { as, children, className, color, size, shape, variant, ...rest } = props const Element = as || Group - const context = useInput({ color, size, variant }) + const context = useInput({ color, size, shape, variant }) const component = React.useMemo( () => ({ diff --git a/packages/react/src/components/input/use-input.hook.tsx b/packages/react/src/components/input/use-input.hook.tsx index a5ea09e..f9fb911 100644 --- a/packages/react/src/components/input/use-input.hook.tsx +++ b/packages/react/src/components/input/use-input.hook.tsx @@ -12,14 +12,15 @@ type UseInputProps = InputVariantProps type UseInputReturn = ReturnType export const useInput = (props: UseInputProps) => { - const { color, size, variant } = props + const { color, size, shape, variant } = props - const slots = React.useMemo(() => input({ color, size, variant }), [color, size, variant]) + const slots = React.useMemo(() => input({ color, size, shape, variant }), [color, size, shape, variant]) return { slots, color, size, + shape, variant, } } diff --git a/packages/theme/src/components/input.ts b/packages/theme/src/components/input.ts index ef4b24c..ac585bb 100644 --- a/packages/theme/src/components/input.ts +++ b/packages/theme/src/components/input.ts @@ -7,7 +7,6 @@ export const input = tv({ group: [ 'flex gap-px', 'bg-foreground', - 'rounded-md', 'overflow-hidden', 'has-[:disabled]:opacity-50', 'focus-within:outline-dashed focus-within:outline-offset-2 focus-within:outline-1', @@ -50,6 +49,14 @@ export const input = tv({ input: ['placeholder:text-lg'], }, }, + shape: { + none: { + group: ['rounded-md'], + }, + pill: { + group: ['rounded-full'], + }, + }, variant: { none: {}, outlined: { @@ -60,6 +67,7 @@ export const input = tv({ defaultVariants: { size: 'md', color: 'neutral', + shape: 'none', variant: 'outlined', }, })