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

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

@@ -1,154 +1,154 @@
-import type * as React from 'react';
-import type { Props } from '@twintag/twintag-form/types';
-
-import { format } from 'date-fns';
-import { AsteriskIcon, Calendar as CalendarIcon } from 'lucide-react';
-import { useFormContext } from 'react-hook-form';
-import { tv } from 'tailwind-variants';
-
-import { Button } from '@twintag/twintag-form/common/button';
-import { Calendar } from '@twintag/twintag-form/common/calendar';
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@twintag/twintag-form/common/form';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@twintag/twintag-form/common/popover';
-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-tf-muted-foreground opacity-70',
-  },
-  variants: {
-    variant: {
-      default: {
-        button: 'px-3',
-      },
-      outline: {
-        button:
-          'rounded-none border-x-transparent border-t-transparent px-1 transition-none hover:bg-white hover:text-tf-muted-foreground',
-      },
-    },
-    withValue: {
-      true: {
-        button: 'text-tf-muted-foreground',
-      },
-      false: {
-        button: '',
-      },
-    },
-    size: {
-      sm: {
-        button: 'text-sm',
-        icon: 'h-4 w-4',
-      },
-      base: {
-        button: 'text-base',
-        icon: 'h-5 w-5',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    size: 'base',
-  },
-});
-
-export const DEFAULT_DATE_PICKER_VALUE = null;
-
-export const DatePicker: React.FC<Props<'input', 'datepicker'>> = ({
-  label,
-  bind,
-  options,
-}) => {
-  const { variant, size } = useTwintagForm();
-  const { control } = useFormContext();
-
-  const { button, icon } = datePickerTriggerVariants({ variant, size });
-
-  const isOptional = options?.optionalField;
-
-  return (
-    <FormField
-      defaultValue={DEFAULT_DATE_PICKER_VALUE}
-      control={control}
-      name={bind}
-      rules={{
-        required: isOptional ? false : (options?.error ?? true),
-      }}
-      render={({ field }) => (
-        <FormItem
-          variant={variant}
-          className='flex flex-col [&>div[data-radix-popper-content-wrapper]]:!z-50'
-        >
-          <div className='space-y-1'>
-            <FormLabel size={size}>
-              {label}
-              {!isOptional ? (
-                <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
-                </span>
-              ) : (
-                <></>
-              )}
-            </FormLabel>
-            {options?.description ? (
-              <FormDescription size={size}>
-                {options.description}
-              </FormDescription>
-            ) : (
-              <></>
-            )}
-          </div>
-          <Popover>
-            <PopoverTrigger asChild>
-              <FormControl>
-                <Button
-                  variant='outline'
-                  size={size}
-                  className={button({
-                    withValue: !field.value,
-                    className: 'h-10 gap-2',
-                  })}
-                >
-                  {field.value ? (
-                    format(field.value, 'PPP')
-                  ) : (
-                    <span>{options?.placeholder ?? 'Select a date'}</span>
-                  )}
-                  <CalendarIcon className={icon()} />
-                </Button>
-              </FormControl>
-            </PopoverTrigger>
-            <PopoverContent className='w-auto p-0' align='start'>
-              <Calendar
-                fromYear={1970}
-                toYear={2050}
-                captionLayout='dropdown-buttons'
-                mode='single'
-                size={size}
-                selected={
-                  !Number.isNaN(new Date(field.value as Date).getTime())
-                    ? new Date(field.value as Date)
-                    : undefined
-                }
-                onSelect={field.onChange}
-                initialFocus
-              />
-            </PopoverContent>
-          </Popover>
-          <FormMessage size={size} className='pt-1' />
-        </FormItem>
-      )}
-    />
-  );
-};
+import type * as React from 'react';
+import type { Props } from '@twintag/twintag-form/types';
+
+import { format } from 'date-fns';
+import { AsteriskIcon, Calendar as CalendarIcon } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
+import { tv } from 'tailwind-variants';
+
+import { Button } from '@twintag/twintag-form/common/button';
+import { Calendar } from '@twintag/twintag-form/common/calendar';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@twintag/twintag-form/common/form';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@twintag/twintag-form/common/popover';
+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-tf-muted-foreground opacity-70',
+  },
+  variants: {
+    variant: {
+      default: {
+        button: 'px-3',
+      },
+      outline: {
+        button:
+          'rounded-none border-x-transparent border-t-transparent px-1 transition-none hover:bg-white hover:text-tf-muted-foreground',
+      },
+    },
+    withValue: {
+      true: {
+        button: 'text-tf-muted-foreground',
+      },
+      false: {
+        button: '',
+      },
+    },
+    size: {
+      sm: {
+        button: 'text-sm',
+        icon: 'h-4 w-4',
+      },
+      base: {
+        button: 'text-base',
+        icon: 'h-5 w-5',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'base',
+  },
+});
+
+export const DEFAULT_DATE_PICKER_VALUE = null;
+
+export const DatePicker: React.FC<Props<'input', 'datepicker'>> = ({
+  label,
+  bind,
+  options,
+}) => {
+  const { variant, size } = useTwintagForm();
+  const { control } = useFormContext();
+
+  const { button, icon } = datePickerTriggerVariants({ variant, size });
+
+  const isOptional = options?.optionalField;
+
+  return (
+    <FormField
+      defaultValue={DEFAULT_DATE_PICKER_VALUE}
+      control={control}
+      name={bind}
+      rules={{
+        required: isOptional ? false : (options?.error ?? true),
+      }}
+      render={({ field }) => (
+        <FormItem
+          variant={variant}
+          className='flex flex-col [&>div[data-radix-popper-content-wrapper]]:!z-50'
+        >
+          <div className='space-y-1'>
+            <FormLabel size={size}>
+              {label}
+              {!isOptional ? (
+                <span className='ml-0.5 inline-block'>
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
+                </span>
+              ) : (
+                <></>
+              )}
+            </FormLabel>
+            {options?.description ? (
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
+            ) : (
+              <></>
+            )}
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <FormControl>
+                <Button
+                  variant='outline'
+                  size={size}
+                  className={button({
+                    withValue: !field.value,
+                    className: 'h-10 gap-2',
+                  })}
+                >
+                  {field.value ? (
+                    format(field.value, 'PPP')
+                  ) : (
+                    <span>{options?.placeholder ?? 'Select a date'}</span>
+                  )}
+                  <CalendarIcon className={icon()} />
+                </Button>
+              </FormControl>
+            </PopoverTrigger>
+            <PopoverContent className='w-auto p-0' align='start'>
+              <Calendar
+                fromYear={1970}
+                toYear={2050}
+                captionLayout='dropdown-buttons'
+                mode='single'
+                size={size}
+                selected={
+                  !Number.isNaN(new Date(field.value as Date).getTime())
+                    ? new Date(field.value as Date)
+                    : undefined
+                }
+                onSelect={field.onChange}
+                initialFocus
+              />
+            </PopoverContent>
+          </Popover>
+          <FormMessage size={size} className='pt-1' />
+        </FormItem>
+      )}
+    />
+  );
+};

package/lib/components/fields/file.tsx

@@ -1,84 +1,84 @@
-import type { FC } from 'react';
-import type { Props } from '@twintag/twintag-form/types';
-
-import { AsteriskIcon } from 'lucide-react';
-import { useFormContext } from 'react-hook-form';
-
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@twintag/twintag-form/common/form';
-import { Input } from '@twintag/twintag-form/common/input';
-import { useTwintagForm } from '@twintag/twintag-form/components/provider';
-
-export const DEFAULT_FILE_VALUE = '';
-
-export const File: FC<Props<'input', 'file'>> = ({ label, bind, options }) => {
-  const { control } = useFormContext();
-  const { variant, size, acceptFileType } = useTwintagForm();
-
-  const isOptional = options?.optionalField;
-
-  return (
-    <FormField
-      defaultValue={DEFAULT_FILE_VALUE}
-      control={control}
-      name={bind}
-      rules={{
-        required: isOptional ? false : (options?.error ?? true),
-      }}
-      render={({ field, formState }) => (
-        <FormItem variant={variant}>
-          <div className='space-y-1'>
-            <FormLabel htmlFor={bind} size={size}>
-              {label}
-              {!isOptional ? (
-                <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
-                </span>
-              ) : (
-                <></>
-              )}
-            </FormLabel>
-            {options?.description ? (
-              <FormDescription size={size}>
-                {options.description}
-              </FormDescription>
-            ) : (
-              <></>
-            )}
-          </div>
-          <FormControl>
-            <Input
-              ref={(el) => {
-                field.ref(el);
-
-                if (el && formState.isSubmitSuccessful) {
-                  el.value = '';
-                }
-              }}
-              id={bind}
-              type='file'
-              accept={options?.accept ?? acceptFileType}
-              name={field.name}
-              size={size}
-              variant={variant}
-              multiple
-              onBlur={field.onBlur}
-              onChange={(e) => {
-                if (e.target.files) {
-                  field.onChange(e.target.files);
-                }
-              }}
-            />
-          </FormControl>
-          <FormMessage size={size} className='pt-1.5' />
-        </FormItem>
-      )}
-    />
-  );
-};
+import type { FC } from 'react';
+import type { Props } from '@twintag/twintag-form/types';
+
+import { AsteriskIcon } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@twintag/twintag-form/common/form';
+import { Input } from '@twintag/twintag-form/common/input';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_FILE_VALUE = '';
+
+export const File: FC<Props<'input', 'file'>> = ({ label, bind, options }) => {
+  const { control } = useFormContext();
+  const { variant, size, acceptFileType } = useTwintagForm();
+
+  const isOptional = options?.optionalField;
+
+  return (
+    <FormField
+      defaultValue={DEFAULT_FILE_VALUE}
+      control={control}
+      name={bind}
+      rules={{
+        required: isOptional ? false : (options?.error ?? true),
+      }}
+      render={({ field, formState }) => (
+        <FormItem variant={variant}>
+          <div className='space-y-1'>
+            <FormLabel htmlFor={bind} size={size}>
+              {label}
+              {!isOptional ? (
+                <span className='ml-0.5 inline-block'>
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
+                </span>
+              ) : (
+                <></>
+              )}
+            </FormLabel>
+            {options?.description ? (
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
+            ) : (
+              <></>
+            )}
+          </div>
+          <FormControl>
+            <Input
+              ref={(el) => {
+                field.ref(el);
+
+                if (el && formState.isSubmitSuccessful) {
+                  el.value = '';
+                }
+              }}
+              id={bind}
+              type='file'
+              accept={options?.accept ?? acceptFileType}
+              name={field.name}
+              size={size}
+              variant={variant}
+              multiple
+              onBlur={field.onBlur}
+              onChange={(e) => {
+                if (e.target.files) {
+                  field.onChange(e.target.files);
+                }
+              }}
+            />
+          </FormControl>
+          <FormMessage size={size} className='pt-1.5' />
+        </FormItem>
+      )}
+    />
+  );
+};

package/lib/components/fields/input.tsx

@@ -1,70 +1,70 @@
-import type { FC } from 'react';
-import type { Props } from '@twintag/twintag-form/types';
-
-import { AsteriskIcon } from 'lucide-react';
-import { useFormContext } from 'react-hook-form';
-
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@twintag/twintag-form/common/form';
-import { Input as InputPrimitive } from '@twintag/twintag-form/common/input';
-import { useTwintagForm } from '@twintag/twintag-form/components/provider';
-
-export const DEFAULT_INPUT_VALUE = '';
-
-export const Input: FC<Props<'input', 'text'>> = ({ label, bind, options }) => {
-  const { control } = useFormContext();
-
-  const { variant, size } = useTwintagForm();
-
-  const isOptional = options?.optionalField;
-
-  return (
-    <FormField
-      defaultValue={DEFAULT_INPUT_VALUE}
-      control={control}
-      name={bind}
-      rules={{
-        required: isOptional ? false : (options?.error ?? true),
-      }}
-      render={({ field }) => (
-        <FormItem variant={variant}>
-          <div className='space-y-1'>
-            <FormLabel size={size}>
-              {label}
-              {!isOptional ? (
-                <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
-                </span>
-              ) : (
-                <></>
-              )}
-            </FormLabel>
-            {options?.description ? (
-              <FormDescription size={size}>
-                {options.description}
-              </FormDescription>
-            ) : (
-              <></>
-            )}
-          </div>
-          <FormControl>
-            <InputPrimitive
-              type='text'
-              size={size}
-              variant={variant}
-              placeholder={options?.placeholder ?? 'Write here...'}
-              {...field}
-            />
-          </FormControl>
-          <FormMessage size={size} className='pt-1' />
-        </FormItem>
-      )}
-    />
-  );
-};
+import type { FC } from 'react';
+import type { Props } from '@twintag/twintag-form/types';
+
+import { AsteriskIcon } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@twintag/twintag-form/common/form';
+import { Input as InputPrimitive } from '@twintag/twintag-form/common/input';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_INPUT_VALUE = '';
+
+export const Input: FC<Props<'input', 'text'>> = ({ label, bind, options }) => {
+  const { control } = useFormContext();
+
+  const { variant, size } = useTwintagForm();
+
+  const isOptional = options?.optionalField;
+
+  return (
+    <FormField
+      defaultValue={DEFAULT_INPUT_VALUE}
+      control={control}
+      name={bind}
+      rules={{
+        required: isOptional ? false : (options?.error ?? true),
+      }}
+      render={({ field }) => (
+        <FormItem variant={variant}>
+          <div className='space-y-1'>
+            <FormLabel size={size}>
+              {label}
+              {!isOptional ? (
+                <span className='ml-0.5 inline-block'>
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
+                </span>
+              ) : (
+                <></>
+              )}
+            </FormLabel>
+            {options?.description ? (
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
+            ) : (
+              <></>
+            )}
+          </div>
+          <FormControl>
+            <InputPrimitive
+              type='text'
+              size={size}
+              variant={variant}
+              placeholder={options?.placeholder ?? 'Write here...'}
+              {...field}
+            />
+          </FormControl>
+          <FormMessage size={size} className='pt-1' />
+        </FormItem>
+      )}
+    />
+  );
+};