feat: add input shape variant (#136)

giantnodes · Jun 18, 2024 · 8284918 · 8284918
1 parent 000b99e
commit 8284918
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/packages/react/src/components/input/Input.tsx b/packages/react/src/components/input/Input.tsx
@@ -28,14 +28,15 @@ const Component: ComponentType = React.forwardRef(
     props: ComponentProps<TElement>,
     ref: Polymophic.Ref<TElement>
   ) => {
-    const { as, children, className, color, size, variant, ...rest } = props
+    const { as, children, className, color, size, shape, variant, ...rest } = props
 
     const Element = as || Input
 
     const context = useInputContext()
     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
@@ -27,11 +27,11 @@ const Component: ComponentType = React.forwardRef(
     props: ComponentProps<TElement>,
     ref: Polymophic.Ref<TElement>
   ) => {
-    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<GroupProps>(
       () => ({

diff --git 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<typeof useInput>
 
 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
@@ -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',
   },
 })