@twintag/twintag-form 1.3.0 → 1.4.0-beta.1

package/lib/components/containers/category.tsx

@@ -3,26 +3,35 @@ import type { WithChildren } from 'twintag-types/dom';
 
 import { tv } from 'tailwind-variants';
 
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 const categoryStyle = tv({
   slots: {
-    container: 'relative w-full space-y-4',
+    container: 'relative w-full space-y-3',
     heading: 'font-tf-font text-category',
-    content: 'grid gap-4',
+    content: 'grid gap-3',
   },
   variants: {
     variant: {
       default: {
-        heading: 'text-base font-medium',
+        heading: 'font-medium',
       },
       beta: {
-        heading: 'text-sm font-normal',
+        heading: 'font-normal',
+      },
+    },
+    size: {
+      sm: {
+        heading: 'text-sm',
+      },
+      base: {
+        heading: 'text-base',
       },
     },
   },
   defaultVariants: {
     variant: 'default',
+    size: 'base',
   },
 });
 
@@ -31,9 +40,9 @@ type Props = {
 } & WithChildren;
 
 const Category: FC<Props> = ({ label, children }) => {
-  const { variant } = useTwintagForm();
+  const { variant, size } = useTwintagForm();
 
-  const { container, heading, content } = categoryStyle({ variant });
+  const { container, heading, content } = categoryStyle({ size, variant });
 
   return (
     <section className={container()}>

package/lib/components/fields/checkbox.tsx

@@ -13,22 +13,26 @@ import {
   FormLabel,
   FormMessage,
 } from '@twintag/twintag-form/common/form';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_CHECKBOX_VALUE = false;
 
 export const Checkbox: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
+  const { variant, size } = useTwintagForm();
 
   const isOptional = options?.optionalField;
 
   return (
     <FormField
+      defaultValue={DEFAULT_CHECKBOX_VALUE}
       control={control}
       name={bind}
-      defaultValue={false}
       rules={{
         required: isOptional ? false : options?.error ?? true,
       }}
       render={({ field }) => (
-        <FormItem className='pt-1.5'>
+        <FormItem variant={variant} className='pt-1.5'>
           <div className='flex space-x-2'>
             <FormControl>
               <CommonCheckbox
@@ -39,8 +43,8 @@ export const Checkbox: FC<Props> = ({ label, bind, options }) => {
                 }}
               />
             </FormControl>
-            <div className='grid gap-1.5'>
-              <FormLabel>
+            <div className='grid gap-1'>
+              <FormLabel size={size}>
                 {label}
                 {!isOptional ? (
                   <span className='ml-0.5 inline-block'>
@@ -51,11 +55,13 @@ export const Checkbox: FC<Props> = ({ label, bind, options }) => {
                 )}
               </FormLabel>
               {options?.description ? (
-                <FormDescription>{options.description}</FormDescription>
+                <FormDescription size={size}>
+                  {options.description}
+                </FormDescription>
               ) : (
                 <></>
               )}
-              <FormMessage />
+              <FormMessage size={size} />
             </div>
           </div>
         </FormItem>

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

@@ -21,40 +21,73 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@twintag/twintag-form/common/popover';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
-const triggerVariants = tv({
-  base: 'w-full justify-start text-left font-normal',
+const datePickerTriggerVariants = tv({
+  slots: {
+    button: 'w-full justify-start text-left font-normal',
+    icon: 'ml-auto text-muted-foreground opacity-70',
+  },
   variants: {
     variant: {
-      default: 'px-3',
-      beta: 'rounded-none border-x-transparent border-t-transparent px-1 transition-none hover:bg-white hover:text-muted-foreground',
+      default: {
+        button: 'px-3',
+      },
+      beta: {
+        button:
+          'rounded-none border-x-transparent border-t-transparent px-1 transition-none hover:bg-white hover:text-muted-foreground',
+      },
     },
     withValue: {
-      true: 'text-muted-foreground',
-      false: '',
+      true: {
+        button: 'text-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 DatePicker: React.FC<Props> = ({ label, bind, options }) => {
-  const { variant } = useTwintagForm();
+export const DEFAULT_DATE_PICKER_VALUE = null;
 
+export const DatePicker: React.FC<Props> = ({ 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 className='flex flex-col [&>div[data-radix-popper-content-wrapper]]:!z-50'>
-          <div className='space-y-0.5'>
-            <FormLabel>
+        <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'>
@@ -65,7 +98,9 @@ export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
               )}
             </FormLabel>
             {options?.description ? (
-              <FormDescription>{options.description}</FormDescription>
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
             ) : (
               <></>
             )}
@@ -75,10 +110,10 @@ export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
               <FormControl>
                 <Button
                   variant='outline'
-                  className={triggerVariants({
-                    variant,
+                  size={size}
+                  className={button({
                     withValue: !field.value,
-                    className: 'h-10 gap-3',
+                    className: 'h-10 gap-2',
                   })}
                 >
                   {field.value ? (
@@ -86,7 +121,7 @@ export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
                   ) : (
                     <span>{options?.placeholder ?? 'Select a date'}</span>
                   )}
-                  <CalendarIcon className='ml-auto h-4 w-4 opacity-50' />
+                  <CalendarIcon className={icon()} />
                 </Button>
               </FormControl>
             </PopoverTrigger>
@@ -96,6 +131,7 @@ export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
                 toYear={2050}
                 captionLayout='dropdown-buttons'
                 mode='single'
+                size={size}
                 selected={
                   !isNaN(new Date(field.value as Date).getTime())
                     ? new Date(field.value as Date)
@@ -106,7 +142,7 @@ export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
               />
             </PopoverContent>
           </Popover>
-          <FormMessage className='pt-1' />
+          <FormMessage size={size} className='pt-1' />
         </FormItem>
       )}
     />

package/lib/components/fields/file.tsx

@@ -1,76 +1,83 @@
-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';
-
-export const File: FC<Props> = ({ label, bind, options }) => {
-  const { control } = useFormContext();
-
-  const isOptional = options?.optionalField;
-
-  return (
-    <FormField
-      defaultValue=''
-      control={control}
-      name={bind}
-      rules={{
-        required: isOptional ? false : options?.error ?? true,
-      }}
-      render={({ field, formState }) => (
-        <FormItem>
-          <div className='space-y-0.5'>
-            <FormLabel htmlFor={bind}>
-              {label}
-              {!isOptional ? (
-                <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
-                </span>
-              ) : (
-                <></>
-              )}
-            </FormLabel>
-            {options?.description ? (
-              <FormDescription>{options.description}</FormDescription>
-            ) : (
-              <></>
-            )}
-          </div>
-          <FormControl>
-            <Input
-              ref={(el) => {
-                field.ref(el);
-
-                if (el && formState.isSubmitSuccessful) {
-                  el.value = '';
-                }
-              }}
-              id={bind}
-              type='file'
-              name={field.name}
-              capture='environment'
-              multiple
-              onBlur={field.onBlur}
-              onChange={(e) => {
-                if (e.target.files) {
-                  field.onChange(e.target.files);
-                }
-              }}
-            />
-          </FormControl>
-          <FormMessage 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> = ({ label, bind, options }) => {
+  const { control } = useFormContext();
+  const { variant, size } = 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-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'
+              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

@@ -13,24 +13,29 @@ import {
   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> = ({ label, bind, options }) => {
   const { control } = useFormContext();
 
+  const { variant, size } = useTwintagForm();
+
   const isOptional = options?.optionalField;
 
   return (
     <FormField
-      defaultValue=''
+      defaultValue={DEFAULT_INPUT_VALUE}
       control={control}
       name={bind}
       rules={{
         required: isOptional ? false : options?.error ?? true,
       }}
       render={({ field }) => (
-        <FormItem>
-          <div className='space-y-0.5'>
-            <FormLabel>
+        <FormItem variant={variant}>
+          <div className='space-y-1'>
+            <FormLabel size={size}>
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
@@ -41,7 +46,9 @@ export const Input: FC<Props> = ({ label, bind, options }) => {
               )}
             </FormLabel>
             {options?.description ? (
-              <FormDescription>{options.description}</FormDescription>
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
             ) : (
               <></>
             )}
@@ -49,11 +56,13 @@ export const Input: FC<Props> = ({ label, bind, options }) => {
           <FormControl>
             <InputPrimitive
               type='text'
+              size={size}
+              variant={variant}
               placeholder={options?.placeholder ?? 'Write here...'}
               {...field}
             />
           </FormControl>
-          <FormMessage className='pt-1' />
+          <FormMessage size={size} className='pt-1' />
         </FormItem>
       )}
     />

package/lib/components/fields/radiogroup.tsx

@@ -16,24 +16,28 @@ import {
   RadioGroup as CommonRadioGroup,
   RadioGroupItem,
 } from '@twintag/twintag-form/common/radiogroup';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_RADIOGROUP_VALUE = '';
 
 export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
   const { control } = useFormContext();
+  const { size } = useTwintagForm();
 
   const isOptional = options?.optionalField;
 
   return (
     <FormField
+      defaultValue={DEFAULT_RADIOGROUP_VALUE}
       control={control}
       name={bind}
-      defaultValue=''
       rules={{
         required: isOptional ? false : options?.error ?? true,
       }}
       render={({ field }) => (
         <FormItem className='space-y-3'>
-          <div className='space-y-0.5'>
-            <FormLabel>
+          <div className='space-y-1'>
+            <FormLabel size={size}>
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
@@ -44,7 +48,9 @@ export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
               )}
             </FormLabel>
             {options?.description ? (
-              <FormDescription>{options.description}</FormDescription>
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
             ) : (
               <></>
             )}
@@ -60,12 +66,12 @@ export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
                   return (
                     <FormItem
                       key={item.id}
-                      className='flex items-center space-x-3 space-y-0'
+                      className='flex items-center space-x-2 space-y-0'
                     >
                       <FormControl>
                         <RadioGroupItem value={item.bind} />
                       </FormControl>
-                      <FormLabel className='font-normal'>
+                      <FormLabel size={size} className='font-normal'>
                         {item.label}
                       </FormLabel>
                     </FormItem>
@@ -76,7 +82,7 @@ export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
               })}
             </CommonRadioGroup>
           </FormControl>
-          <FormMessage />
+          <FormMessage size={size} />
         </FormItem>
       )}
     />

package/lib/components/fields/submit.tsx

@@ -2,11 +2,14 @@ import type { FC } from 'react';
 import type { Props } from '@twintag/twintag-form/types';
 
 import { Button } from '@twintag/twintag-form/common/button';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const Submit: FC<Props> = ({ label }) => {
+  const { size } = useTwintagForm();
+
   return (
-    <div className='flex w-full justify-center'>
-      <Button>{label}</Button>
+    <div className='flex w-full justify-center pt-2'>
+      <Button size={size}>{label}</Button>
     </div>
   );
 };

package/lib/components/fields/textarea.tsx

@@ -13,24 +13,28 @@ import {
   FormMessage,
 } from '@twintag/twintag-form/common/form';
 import { Textarea as CommonTextarea } from '@twintag/twintag-form/common/textarea';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_TEXTAREA_VALUE = '';
 
 export const Textarea: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
+  const { variant, size } = useTwintagForm();
 
   const isOptional = options?.optionalField;
 
   return (
     <FormField
-      defaultValue=''
+      defaultValue={DEFAULT_TEXTAREA_VALUE}
       control={control}
       name={bind}
       rules={{
         required: isOptional ? false : options?.error ?? true,
       }}
       render={({ field }) => (
-        <FormItem>
-          <div className='space-y-0.5'>
-            <FormLabel>
+        <FormItem variant={variant}>
+          <div className='space-y-1'>
+            <FormLabel size={size}>
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
@@ -41,7 +45,9 @@ export const Textarea: FC<Props> = ({ label, bind, options }) => {
               )}
             </FormLabel>
             {options?.description ? (
-              <FormDescription>{options.description}</FormDescription>
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
             ) : (
               <></>
             )}
@@ -49,10 +55,12 @@ export const Textarea: FC<Props> = ({ label, bind, options }) => {
           <FormControl>
             <CommonTextarea
               {...field}
+              size={size}
+              variant={variant}
               placeholder={options?.placeholder ?? 'Write here...'}
             />
           </FormControl>
-          <FormMessage className='pt-1' />
+          <FormMessage size={size} className='pt-1' />
         </FormItem>
       )}
     />

package/lib/components/fields/toggle.tsx

@@ -13,25 +13,29 @@ import {
   FormMessage,
 } from '@twintag/twintag-form/common/form';
 import { Switch } from '@twintag/twintag-form/common/switch';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_TOGGLE_VALUE = false;
 
 export const Toggle: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
+  const { variant, size } = useTwintagForm();
 
   const isOptional = options?.optionalField;
 
   return (
     <FormField
+      defaultValue={DEFAULT_TOGGLE_VALUE}
       control={control}
       name={bind}
-      defaultValue={false}
       rules={{
         required: isOptional ? false : options?.error ?? true,
       }}
       render={({ field }) => (
-        <FormItem>
+        <FormItem variant={variant}>
           <div className='flex flex-row items-center justify-between'>
-            <div className='space-y-0.5'>
-              <FormLabel htmlFor={bind}>
+            <div className='space-y-1'>
+              <FormLabel htmlFor={bind} size={size}>
                 {label}
                 {!isOptional ? (
                   <span className='ml-0.5 inline-block'>
@@ -42,7 +46,9 @@ export const Toggle: FC<Props> = ({ label, bind, options }) => {
                 )}
               </FormLabel>
               {options?.description ? (
-                <FormDescription>{options.description}</FormDescription>
+                <FormDescription size={size}>
+                  {options.description}
+                </FormDescription>
               ) : (
                 <></>
               )}
@@ -57,7 +63,7 @@ export const Toggle: FC<Props> = ({ label, bind, options }) => {
               />
             </FormControl>
           </div>
-          <FormMessage />
+          <FormMessage size={size} />
         </FormItem>
       )}
     />