feat(Form): new component (#4)

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

src/theme/form.ts

@@ -0,0 +1,3 @@
+export default {
+  base: ''
+}

src/theme/formField.ts

@@ -0,0 +1,32 @@
+export default {
+  slots: {
+    root: '',
+    wrapper: '',
+    labelWrapper: 'flex content-center items-center justify-between',
+    label: 'block font-medium text-gray-700 dark:text-gray-200',
+    container: 'mt-1 relative',
+    description: 'text-gray-500 dark:text-gray-400',
+    error: 'mt-2 text-red-500 dark:text-red-400',
+    hint: 'text-gray-500 dark:text-gray-400',
+    help: 'mt-2 text-gray-500 dark:text-gray-400'
+  },
+  variants: {
+    size: {
+      '2xs': { root: 'text-xs' },
+      xs: { root: 'text-xs' },
+      sm: { root: 'text-sm' },
+      md: { root: 'text-sm' },
+      lg: { root: 'text-sm' },
+      xl: { root: 'text-base' }
+    },
+    required: {
+      true: {
+        // eslint-disable-next-line quotes
+        label: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'sm'
+  }
+}

src/theme/index.ts

@@ -5,7 +5,10 @@ export { default as card } from './card'
 export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'
 export { default as container } from './container'
+export { default as form } from './form'
+export { default as formField } from './formField'
 export { default as icons } from './icons'
+export { default as input } from './input'
 export { default as kbd } from './kbd'
 export { default as modal } from './modal'
 export { default as popover } from './popover'

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'
+    }
+  }
+}