@twintag/twintag-form 1.6.0 → 1.6.2-beta.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @twintag/twintag-form
 
+## 1.6.2-beta.0
+
+### Patch Changes
+
+- fix(twintag-form): filter file types using the `accept` attribute
+
+## 1.6.1
+
+### Patch Changes
+
+- [#216](https://github.com/esoptra/twintag-admin/pull/216) [`03eed64`](https://github.com/esoptra/twintag-admin/commit/03eed64d90ce7b0098a509399bdb8ea4b8fb8e6b) Thanks [@leweyse](https://github.com/leweyse)! - fix(twintag-form): use package specific class names for styling
+
 ## 1.6.0
 
 ### Minor Changes

package/README.md

@@ -76,12 +76,13 @@ The `config` object contains the form structure. It is organized by the index of
 
 Twintag Form provides some options to customize the form:
 
-| Option          | Type              | Description                                                               |
-| --------------- | ----------------- | ------------------------------------------------------------------------- |
-| `variant`       | `default  / beta` | Variant of the form.                                                      |
-| `size`          | `base     / sm`   | Default: `base` (font-size set to 16px).                                  |
-| `resetOnSubmit` | `boolean`         | If `true`, the form will be reset after submitting. (`false` per default) |
-| `defaultValues` | `object`          | The properties are the same as the bind values in your config.            |
+| Option           | Type                 | Description                                                                                                       |
+| ---------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `variant`        | `default  / outline` | Variant of the form.                                                                                              |
+| `size`           | `base     / sm`      | Default: `base` (font-size set to 16px).                                                                          |
+| `resetOnSubmit`  | `boolean`            | If `true`, the form will be reset after submitting. (`false` per default)                                         |
+| `defaultValues`  | `object`             | The properties are the same as the bind values in your config.                                                    |
+| `acceptFileType` | `string`             | Accept file type. ([ref](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#accept)) |
 
 ### **Inputs**
 
@@ -89,12 +90,13 @@ Twintag Form provides some options to customize the form:
 
 Each input can be customized with the following optional options:
 
-| Option          | Type      | Description                                                  |
-| --------------- | --------- | ------------------------------------------------------------ |
-| `description`   | `string`  | Description of the input.                                    |
-| `error`         | `string`  | Error message.                                               |
-| `placeholder`   | `string`  | Placeholder of the input.                                    |
-| `optionalField` | `boolean` | If `true`, the field will be optional. (`false` per default) |
+| Option          | Type      | Description                                                                                                       |
+| --------------- | --------- | ----------------------------------------------------------------------------------------------------------------- |
+| `description`   | `string`  | Description of the input.                                                                                         |
+| `error`         | `string`  | Error message.                                                                                                    |
+| `placeholder`   | `string`  | Placeholder of the input.                                                                                         |
+| `optionalField` | `boolean` | If `true`, the field will be optional. (`false` per default)                                                      |
+| `accept`        | `string`  | Accept file type. ([ref](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#accept)) |
 
 ```json
 {
@@ -104,10 +106,7 @@ Each input can be customized with the following optional options:
     "label": "Email",
     "bind": "email",
     "options": {
-      "description": "Please enter you email",
-      "error": "The field is empty."
-      "placeholder": "Write here...",
-      "optionalField": true
+      ...
     }
   }
 }
@@ -123,7 +122,13 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "simple",
     "label": "Email",
-    "bind": "email"
+    "bind": "email",
+    "options": {
+      "description": "Please enter you email",
+      "error": "The field is empty."
+      "placeholder": "Write here...",
+      "optionalField": false
+    }
   }
 }
 ```
@@ -136,7 +141,13 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "textarea",
     "label": "Message",
-    "bind": "message"
+    "bind": "message",
+    "options": {
+      "description": "Please enter you message",
+      "error": "The field is empty."
+      "placeholder": "Write here...",
+      "optionalField": false
+    }
   }
 }
 ```
@@ -149,7 +160,13 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "file",
     "label": "File",
-    "bind": "file"
+    "bind": "file",
+    "options": {
+      "description": "Please upload an image",
+      "error": "The field is empty.",
+      "accept": "image/*",
+      "optionalField": true
+    }
   }
 }
 ```
@@ -162,7 +179,12 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "checkbox",
     "label": "Checkbox",
-    "bind": "checkbox"
+    "bind": "checkbox",
+    "options": {
+      "description": "Please enter you email",
+      "error": "The field is empty."
+      "optionalField": false
+    }
   }
 }
 ```
@@ -175,7 +197,12 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "toggle",
     "label": "Toggle",
-    "bind": "toggle"
+    "bind": "toggle",
+    "options": {
+      "description": "Please enter you email",
+      "error": "The field is empty."
+      "optionalField": false
+    }
   }
 }
 ```
@@ -188,7 +215,12 @@ Each input can be customized with the following optional options:
   "props": {
     "subtype": "tri-toggle",
     "label": "Toggle with 3 states",
-    "bind": "tri-states"
+    "bind": "tri-states",
+    "options": {
+      "description": "Please enter you email",
+      "error": "The field is empty."
+      "optionalField": false
+    }
   }
 }
 ```
@@ -202,6 +234,11 @@ Each input can be customized with the following optional options:
     "subtype": "radiogroup",
     "label": "Radio Group",
     "bind": "radiogroup",
+    "options": {
+      "description": "Please enter you email",
+      "error": "The field is empty."
+      "optionalField": false
+    }
   },
   "children": [
     {

package/dev/index.css

@@ -1,32 +1,32 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --tf-label: 222.2 47.4% 11.2%;
-  --tf-category: 222.2 47.4% 11.2%;
-
-  --tf-background: 0 0% 100%;
-  --tf-foreground: 0 0% 0%;
-
-  --tf-muted: 210 40% 96.1%;
-  --tf-muted-foreground: 215.4 16.3% 46.9%;
-
-  --tf-primary:  210 40% 98%;
-  --tf-primary-foreground:  222.2 47.4% 11.2%;
-
-  --tf-accent: 222.2 47.4% 11.2%;
-  --tf-accent-foreground: 210 40% 96.1%;
-
-  --tf-destructive: 0 100% 50%;
-  --tf-destructive-foreground: 210 40% 98%;
-
-  --tf-input: 214.3 31.8% 91.4%;
-  --tf-ring: 215 20.2% 65.1%;
-
-  --tf-radius: 0.5rem;
-
-  --tf-font: 'Roboto', sans-serif;
-}
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --tf-label: 222.2 47.4% 11.2%;
+  --tf-category: 222.2 47.4% 11.2%;
+
+  --tf-background: 0 0% 100%;
+  --tf-foreground: 0 0% 0%;
+
+  --tf-muted: 210 40% 96.1%;
+  --tf-muted-foreground: 215.4 16.3% 46.9%;
+
+  --tf-primary:  210 40% 98%;
+  --tf-primary-foreground:  222.2 47.4% 11.2%;
+
+  --tf-accent: 222.2 47.4% 11.2%;
+  --tf-accent-foreground: 210 40% 96.1%;
+
+  --tf-destructive: 0 100% 50%;
+  --tf-destructive-foreground: 210 40% 98%;
+
+  --tf-input: 214.3 31.8% 91.4%;
+  --tf-ring: 215 20.2% 65.1%;
+
+  --tf-radius: 0.5rem;
+
+  --tf-font: 'Roboto', sans-serif;
+}

package/dev/main.tsx

@@ -175,6 +175,7 @@ const config = [
           options: {
             error: 'This field is required',
             description: 'This field is required',
+            accept: 'image/*',
           },
         },
       },

package/lib/common/button.tsx

@@ -6,20 +6,20 @@ import { tv } from 'tailwind-variants';
 
 const buttonVariants = tv({
   base: [
-    'inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors',
-    'ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
+    'inline-flex items-center justify-center whitespace-nowrap rounded-tf-md font-medium transition-colors',
+    'ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-tf-ring focus-visible:ring-offset-2',
     'disabled:pointer-events-none disabled:opacity-50',
   ],
   variants: {
     variant: {
       default:
-        'bg-primary-foreground text-primary shadow hover:bg-primary-foreground/90',
+        'bg-tf-primary-foreground text-tf-primary shadow hover:bg-tf-primary-foreground/90',
       outline:
-        'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-      ghost: 'hover:bg-accent hover:text-accent-foreground',
+        'border border-tf-input bg-tf-background hover:bg-tf-accent hover:text-tf-accent-foreground',
+      ghost: 'hover:bg-tf-accent hover:text-tf-accent-foreground',
     },
     size: {
-      sm: 'h-9 rounded-md px-3 text-sm',
+      sm: 'h-9 rounded-tf-md px-3 text-sm',
       base: 'h-10 px-3 py-2 text-base',
     },
   },

package/lib/common/calendar.tsx

@@ -24,22 +24,23 @@ const calendarVariants = tv({
     nav_button_next: 'absolute right-1',
     table: 'w-full border-collapse space-y-1',
     head_row: 'flex',
-    head_cell: 'w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground',
+    head_cell:
+      'w-9 rounded-tf-md text-[0.8rem] font-normal text-tf-muted-foreground',
     row: 'mt-2 flex w-full',
-    cell: 'relative h-9 w-9 p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-transparent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-muted/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
+    cell: 'relative h-9 w-9 p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-transparent first:[&:has([aria-selected])]:rounded-l-tf-md last:[&:has([aria-selected])]:rounded-r-tf-md [&:has([aria-selected].day-outside)]:bg-tf-muted/50 [&:has([aria-selected].day-range-end)]:rounded-r-tf-md',
     day: buttonVariants({
       variant: 'ghost',
       className: 'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
     }),
     day_range_end: 'day-range-end',
     day_selected:
-      'bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-    day_today: 'bg-muted text-muted-foreground',
+      'bg-tf-accent text-tf-accent-foreground hover:bg-tf-accent hover:text-tf-accent-foreground focus:bg-tf-accent focus:text-tf-accent-foreground',
+    day_today: 'bg-tf-muted text-tf-muted-foreground',
     day_outside:
-      'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/30 aria-selected:text-accent-foreground',
-    day_disabled: 'text-muted-foreground opacity-50',
+      'day-outside text-tf-muted-foreground opacity-50 aria-selected:bg-tf-accent/30 aria-selected:text-tf-accent-foreground',
+    day_disabled: 'text-tf-muted-foreground opacity-50',
     day_range_middle:
-      'aria-selected:bg-accent aria-selected:text-accent-foreground',
+      'aria-selected:bg-tf-accent aria-selected:text-tf-accent-foreground',
     day_hidden: 'invisible',
   },
   variants: {
@@ -49,8 +50,8 @@ const calendarVariants = tv({
         caption_dropdowns: [
           'flex w-4/6 justify-center gap-1',
           '[&>*>span]:hidden [&>*]:flex-1 [&>.rdp-vhidden]:hidden ',
-          '[&>*>select]:h-7 [&>*>select]:min-w-[3.6rem] [&>*>select]:rounded-md [&>*>select]:border [&>*>select]:border-input [&>*>select]:bg-background [&>*>select]:px-1',
-          '[&>*>select]:ring-offset-background [&>*>select]:focus-visible:outline-none [&>*>select]:focus-visible:ring-1 [&>*>select]:focus-visible:ring-ring',
+          '[&>*>select]:h-7 [&>*>select]:min-w-[3.6rem] [&>*>select]:rounded-tf-md [&>*>select]:border [&>*>select]:border-tf-input [&>*>select]:bg-tf-background [&>*>select]:px-1',
+          '[&>*>select]:ring-offset-tf-background [&>*>select]:focus-visible:outline-none [&>*>select]:focus-visible:ring-1 [&>*>select]:focus-visible:ring-tf-ring',
         ],
       },
     },

package/lib/common/checkbox.tsx

@@ -6,10 +6,10 @@ import { tv } from 'tailwind-variants';
 const checkboxVariants = tv({
   slots: {
     root: [
-      'peer h-4 w-4 shrink-0 rounded-sm border border-accent shadow',
-      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1',
+      'peer h-4 w-4 shrink-0 rounded-tf-sm border border-tf-accent shadow',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-tf-ring focus-visible:ring-offset-1',
       'disabled:cursor-not-allowed disabled:opacity-50',
-      'data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground',
+      'data-[state=checked]:bg-tf-accent data-[state=checked]:text-tf-accent-foreground',
     ],
     indicator: 'flex items-center justify-center text-current',
     icon: 'h-4 w-4',

package/lib/common/form.tsx

@@ -99,7 +99,7 @@ const formLabelVariants = tv({
   base: '',
   variants: {
     error: {
-      true: 'text-destructive',
+      true: 'text-tf-destructive',
     },
   },
 });
@@ -148,7 +148,7 @@ const FormControl = React.forwardRef<
 FormControl.displayName = 'FormControl';
 
 const formDescriptionVariants = tv({
-  base: 'text-muted-foreground',
+  base: 'text-tf-muted-foreground',
   variants: {
     size: {
       sm: 'text-[0.8rem] leading-none',
@@ -178,7 +178,7 @@ const FormDescription = React.forwardRef<
 FormDescription.displayName = 'FormDescription';
 
 const formMessageVariants = tv({
-  base: 'font-medium text-destructive',
+  base: 'font-medium text-tf-destructive',
   variants: {
     size: {
       sm: 'text-[0.8rem]',

package/lib/common/icon.tsx

@@ -11,7 +11,7 @@ type Props = {
   className?: string;
 };
 const iconVariants = tv({
-  base: 'h-5 w-5',
+  base: 'h-5 w-5 shrink-0',
 });
 export const Icon: FC<Props> = ({ name, className, ...props }) => {
   const camel = useMemo(

package/lib/common/input.tsx

@@ -7,8 +7,8 @@ const inputVariants = tv({
   slots: {
     root: 'relative',
     input: [
-      'flex h-10 w-full border-input bg-background py-2 text-primary-foreground placeholder:text-muted-foreground focus-visible:outline-none',
-      'file:border-0 file:bg-transparent file:px-0 file:font-medium file:text-primary-foreground',
+      'flex h-10 w-full border-tf-input bg-tf-background py-2 text-tf-primary-foreground placeholder:text-tf-muted-foreground focus-visible:outline-none',
+      'file:border-0 file:bg-transparent file:px-0 file:font-medium file:text-tf-primary-foreground',
       'disabled:cursor-not-allowed disabled:opacity-50',
     ],
   },
@@ -16,10 +16,10 @@ const inputVariants = tv({
     variant: {
       default: {
         input:
-          'rounded-md border px-3 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'rounded-tf-md border px-3 ring-offset-tf-background focus-visible:ring-2 focus-visible:ring-tf-ring focus-visible:ring-offset-2',
       },
       outline: {
-        root: 'after:absolute after:left-0 after:top-[calc(100%_+_1px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-ring',
+        root: 'after:absolute after:left-0 after:top-[calc(100%_+_1px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-tf-ring',
         input: 'border-b px-1',
       },
     },

package/lib/common/label.tsx

@@ -6,7 +6,7 @@ import { tv } from 'tailwind-variants';
 
 const labelVariants = tv({
   base: [
-    'text-label',
+    'text-tf-label',
     'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
   ],
   variants: {

package/lib/common/popover.tsx

@@ -7,7 +7,7 @@ const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const popoverContentVariants = tv({
-  base: 'z-50 w-72 rounded-md border bg-background p-4 text-foreground shadow-md outline-none',
+  base: 'z-50 w-72 rounded-tf-md border bg-tf-background p-4 text-tf-foreground shadow-md outline-none',
 });
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,

package/lib/common/radiogroup.tsx

@@ -23,8 +23,8 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const radioGroupItemVariants = tv({
   slots: {
     item: [
-      'aspect-square h-4 w-4 items-center rounded-full border border-accent text-accent ring-offset-background',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'aspect-square h-4 w-4 items-center rounded-full border border-tf-accent text-tf-accent ring-offset-tf-background',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-tf-ring focus-visible:ring-offset-2',
       'disabled:cursor-not-allowed disabled:opacity-50',
     ],
     indicator: 'relative block h-full w-full',

package/lib/common/slider.tsx

@@ -5,10 +5,10 @@ import { tv } from 'tailwind-variants';
 const sliderVariants = tv({
   slots: {
     root: 'relative flex w-full touch-none select-none items-center',
-    track: 'relative h-2 w-full grow overflow-hidden rounded-full bg-muted',
-    range: 'absolute h-full bg-accent',
+    track: 'relative h-2 w-full grow overflow-hidden rounded-full bg-tf-muted',
+    range: 'absolute h-full bg-tf-accent',
     thumb:
-      'block h-5 w-5 rounded-full border-2 border-accent bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      'block h-5 w-5 rounded-full border-2 border-tf-accent bg-tf-background ring-offset-tf-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tf-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   },
 });
 

package/lib/common/switch.tsx

@@ -6,12 +6,12 @@ const switchVariants = tv({
   slots: {
     root: [
       'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tf-ring focus-visible:ring-offset-2 focus-visible:ring-offset-tf-background',
       'disabled:cursor-not-allowed disabled:opacity-50',
-      'data-[state=checked]:bg-accent data-[state=unchecked]:bg-muted',
+      'data-[state=checked]:bg-tf-accent data-[state=unchecked]:bg-tf-muted',
     ],
     thumb: [
-      'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform',
+      'pointer-events-none block h-4 w-4 rounded-full bg-tf-background shadow-lg ring-0 transition-transform',
       'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
     ],
   },

package/lib/common/textarea.tsx

@@ -7,7 +7,7 @@ const textareaVariants = tv({
   slots: {
     root: 'relative',
     textarea: [
-      'flex min-h-[60px] w-full border-input bg-background py-2 text-primary-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none',
+      'flex min-h-[60px] w-full border-tf-input bg-tf-background py-2 text-tf-primary-foreground shadow-sm placeholder:text-tf-muted-foreground focus-visible:outline-none',
       'disabled:cursor-not-allowed disabled:opacity-50',
     ],
   },
@@ -15,10 +15,10 @@ const textareaVariants = tv({
     variant: {
       default: {
         textarea:
-          'rounded-md border px-3 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'rounded-tf-md border px-3 ring-offset-tf-background focus-visible:ring-2 focus-visible:ring-tf-ring focus-visible:ring-offset-2',
       },
       outline: {
-        root: 'after:absolute after:left-0 after:top-[calc(100%_+_1px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-ring',
+        root: 'after:absolute after:left-0 after:top-[calc(100%_+_1px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-tf-ring',
         textarea: 'border-b px-1',
       },
     },

package/lib/components/containers/category.tsx

@@ -8,7 +8,7 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 const categoryStyle = tv({
   slots: {
     container: 'relative w-full space-y-3',
-    heading: 'font-tf-font text-category',
+    heading: 'font-tf-font text-tf-category',
     content: 'grid gap-3',
   },
   variants: {

package/lib/components/fields/checkbox.tsx

@@ -48,7 +48,7 @@ export const Checkbox: FC<Props<'input'>> = ({ label, bind, options }) => {
                 {label}
                 {!isOptional ? (
                   <span className='ml-0.5 inline-block'>
-                    <AsteriskIcon className='h-3 w-3 text-destructive' />
+                    <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                   </span>
                 ) : (
                   <></>

package/lib/components/fields/date-picker.tsx

@@ -26,7 +26,7 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 const datePickerTriggerVariants = tv({
   slots: {
     button: 'w-full justify-start text-left font-normal',
-    icon: 'ml-auto text-muted-foreground opacity-70',
+    icon: 'ml-auto text-tf-muted-foreground opacity-70',
   },
   variants: {
     variant: {
@@ -35,12 +35,12 @@ const datePickerTriggerVariants = tv({
       },
       outline: {
         button:
-          'rounded-none border-x-transparent border-t-transparent px-1 transition-none hover:bg-white hover:text-muted-foreground',
+          'rounded-none border-x-transparent border-t-transparent px-1 transition-none hover:bg-white hover:text-tf-muted-foreground',
       },
     },
     withValue: {
       true: {
-        button: 'text-muted-foreground',
+        button: 'text-tf-muted-foreground',
       },
       false: {
         button: '',
@@ -65,7 +65,7 @@ const datePickerTriggerVariants = tv({
 
 export const DEFAULT_DATE_PICKER_VALUE = null;
 
-export const DatePicker: React.FC<Props<'input'>> = ({
+export const DatePicker: React.FC<Props<'input', 'datepicker'>> = ({
   label,
   bind,
   options,
@@ -95,7 +95,7 @@ export const DatePicker: React.FC<Props<'input'>> = ({
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                 </span>
               ) : (
                 <></>

package/lib/components/fields/file.tsx

@@ -17,9 +17,9 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const DEFAULT_FILE_VALUE = '';
 
-export const File: FC<Props<'input'>> = ({ label, bind, options }) => {
+export const File: FC<Props<'input', 'file'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
-  const { variant, size } = useTwintagForm();
+  const { variant, size, acceptFileType } = useTwintagForm();
 
   const isOptional = options?.optionalField;
 
@@ -38,7 +38,7 @@ export const File: FC<Props<'input'>> = ({ label, bind, options }) => {
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                 </span>
               ) : (
                 <></>
@@ -63,6 +63,7 @@ export const File: FC<Props<'input'>> = ({ label, bind, options }) => {
               }}
               id={bind}
               type='file'
+              accept={options?.accept ?? acceptFileType}
               name={field.name}
               size={size}
               variant={variant}

package/lib/components/fields/input.tsx

@@ -17,7 +17,7 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const DEFAULT_INPUT_VALUE = '';
 
-export const Input: FC<Props<'input'>> = ({ label, bind, options }) => {
+export const Input: FC<Props<'input', 'text'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
 
   const { variant, size } = useTwintagForm();
@@ -39,7 +39,7 @@ export const Input: FC<Props<'input'>> = ({ label, bind, options }) => {
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                 </span>
               ) : (
                 <></>

package/lib/components/fields/radiogroup.tsx

@@ -45,7 +45,7 @@ export const RadioGroup: FC<
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                 </span>
               ) : (
                 <></>

package/lib/components/fields/textarea.tsx

@@ -17,7 +17,11 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const DEFAULT_TEXTAREA_VALUE = '';
 
-export const Textarea: FC<Props<'input'>> = ({ label, bind, options }) => {
+export const Textarea: FC<Props<'input', 'text'>> = ({
+  label,
+  bind,
+  options,
+}) => {
   const { control } = useFormContext();
   const { variant, size } = useTwintagForm();
 
@@ -38,7 +42,7 @@ export const Textarea: FC<Props<'input'>> = ({ label, bind, options }) => {
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                 </span>
               ) : (
                 <></>

package/lib/components/fields/toggle.tsx

@@ -39,7 +39,7 @@ export const Toggle: FC<Props<'input'>> = ({ label, bind, options }) => {
                 {label}
                 {!isOptional ? (
                   <span className='ml-0.5 inline-block'>
-                    <AsteriskIcon className='h-3 w-3 text-destructive' />
+                    <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                   </span>
                 ) : (
                   <></>