feat(Form): new component (#4)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/theme/input.ts

@@ -0,0 +1,66 @@
+export default (config: { colors: string[] }) => {
+  return {
+    slots: {
+      root: 'relative',
+      base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500',
+      icon: '',
+      leading: '',
+      trailing: ''
+    },
+    variants: {
+      size: {
+        '2xs': {
+          base: 'text-xs gap-x-1 px-2 py-1',
+          icon: 'h-4 w-4'
+        },
+        xs: {
+          base: 'text-sm gap-x-1.5 px-2.5 py-1.5',
+          icon: 'size-4'
+        },
+        sm: {
+          base: 'text-sm gap-x-1.5 px-2.5 py-1.5',
+          icon: 'size-5'
+        },
+        md: {
+          base: 'text-sm gap-x-1.5 px-3 py-2',
+          icon: 'size-5'
+        },
+        lg: {
+          base: 'text-sm gap-x-2.5 px-3.5 py-2.5',
+          icon: 'size-5'
+        },
+        xl: {
+          base: 'text-base gap-x-2.5 px-3.5 py-2.5',
+          icon: 'size-6'
+        }
+      },
+      variant: {
+        outline: '',
+        none: 'bg-transparent focus:ring-0 focus:shadow-none'
+      },
+      color: {
+        ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
+        white: '',
+        gray: ''
+      }
+    },
+    compoundVariants: [...config.colors.map((color: string) => ({
+      color,
+      variant: 'outline',
+      class: `shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-${color}-500 dark:ring-${color}-400 focus:ring-2 focus:ring-${color}-500 dark:focus:ring-${color}-400`
+    })), {
+      color: 'white',
+      variant: 'outline',
+      class: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
+    }, {
+      color: 'gray',
+      variant: 'outline',
+      class: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
+    }],
+    defaultVariants: {
+      size: 'sm',
+      color: 'white',
+      variant: 'outline'
+    }
+  }
+}