feat(input): add xs size variant (#239)

giantnodes · Oct 24, 2024 · 383ac6d · 383ac6d
1 parent b0e937a
commit 383ac6d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/react/src/components/input/Input.stories.tsx b/packages/react/src/components/input/Input.stories.tsx
@@ -12,9 +12,9 @@ const Component: Meta<InputComponentProps> = {
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      options: ['xs', 'sm', 'md', 'lg'],
     },
-    status: {
+    color: {
       control: { type: 'select' },
       options: ['neutral', 'brand', 'success', 'info', 'warning', 'danger'],
     },

diff --git a/packages/theme/src/components/input.ts b/packages/theme/src/components/input.ts
@@ -35,6 +35,10 @@ export const input = tv({
       },
     },
     size: {
+      xs: {
+        group: ['text-xs'],
+        input: ['min-h-6', 'placeholder:text-xs'],
+      },
       sm: {
         group: ['text-sm'],
         input: ['min-h-8', 'placeholder:text-sm'],
@@ -44,8 +48,8 @@ export const input = tv({
         input: ['min-h-10', 'placeholder:text-base'],
       },
       lg: {
-        group: ['min-h-12', 'text-lg'],
-        input: ['placeholder:text-lg'],
+        group: ['text-lg'],
+        input: ['min-h-12', 'placeholder:text-lg'],
       },
     },
     shape: {