@twintag/twintag-form 1.2.1 → 1.4.0-beta.0

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 import type { ElementType } from 'react';
 export type TwintagFormContext = {
     variant?: 'default' | 'beta';
+    size?: 'base' | 'sm';
     components: Map<string, ElementType>;
 };
 type RawProps = Partial<{

package/lib/common/button.tsx

@@ -6,7 +6,7 @@ import { tv } from 'tailwind-variants';
 
 const buttonVariants = tv({
   base: [
-    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors',
+    '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',
     'disabled:pointer-events-none disabled:opacity-50',
   ],
@@ -19,14 +19,13 @@ const buttonVariants = tv({
       ghost: 'hover:bg-accent hover:text-accent-foreground',
     },
     size: {
-      default: 'h-9 px-4 py-2',
-      sm: 'h-8 rounded-md px-3 text-xs',
-      lg: 'h-10 rounded-md px-8',
+      sm: 'h-9 rounded-md px-3 text-sm',
+      base: 'h-10 px-3 py-2 text-base',
     },
   },
   defaultVariants: {
     variant: 'default',
-    size: 'default',
+    size: 'base',
   },
 });
 

package/lib/common/calendar.tsx

@@ -1,3 +1,5 @@
+import type { VariantProps } from 'tailwind-variants';
+
 import * as React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { DayPicker } from 'react-day-picker';
@@ -5,8 +7,6 @@ import { tv } from 'tailwind-variants';
 
 import { buttonVariants } from '@twintag/twintag-form/common/button';
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
 const calendarVariants = tv({
   slots: {
     picker: 'p-3',
@@ -14,7 +14,7 @@ const calendarVariants = tv({
     month: 'space-y-4',
     caption: 'relative flex items-center justify-center pt-1',
     caption_dropdowns: '',
-    caption_label: 'text-sm font-semibold',
+    caption_label: 'font-semibold',
     nav: 'flex items-center space-x-1',
     nav_button: buttonVariants({
       variant: 'outline',
@@ -26,7 +26,7 @@ const calendarVariants = tv({
     head_row: 'flex',
     head_cell: 'w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground',
     row: 'mt-2 flex w-full',
-    cell: 'relative h-9 w-9 p-0 text-center text-sm 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-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',
     day: buttonVariants({
       variant: 'ghost',
       className: 'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
@@ -49,21 +49,41 @@ 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]:text-sm',
+          '[&>*>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',
         ],
       },
     },
+    size: {
+      sm: {
+        caption_label: 'text-sm',
+        caption_dropdowns: '[&>*>select]:text-sm',
+        cell: 'text-sm',
+      },
+      base: {
+        caption_label: 'text-base',
+        caption_dropdowns: '[&>*>select]:text-base',
+        cell: 'text-base',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'base',
   },
 });
 
+export type CalendarProps = React.ComponentProps<typeof DayPicker> &
+  VariantProps<typeof calendarVariants>;
+
 function Calendar({
+  size,
   className,
   classNames,
   showOutsideDays = true,
   ...props
 }: CalendarProps) {
   const slots = calendarVariants({
+    size,
     variant:
       props.captionLayout === 'dropdown-buttons' ? 'dropdown' : undefined,
   });

package/lib/common/form.tsx

@@ -1,12 +1,11 @@
-import type * as LabelPrimitive from '@radix-ui/react-label';
 import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import type { VariantProps } from 'tailwind-variants';
 
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { Controller, FormProvider, useFormContext } from 'react-hook-form';
 import { tv } from 'tailwind-variants';
 
-import { useTwintagForm } from '../provider';
 import { Label } from './label';
 
 const Form = FormProvider;
@@ -67,22 +66,23 @@ const FormItemContext = React.createContext<FormItemContextValue>(
 );
 
 const formItemVariants = tv({
-  base: 'space-y-2',
+  base: '',
   variants: {
     variant: {
-      default: '',
+      default: 'space-y-2',
       beta: 'space-y-1',
     },
   },
+  defaultVariants: {
+    variant: 'default',
+  },
 });
 const FormItem = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof formItemVariants>
+>(({ variant, className, ...props }, ref) => {
   const id = React.useId();
 
-  const { variant } = useTwintagForm();
-
   return (
     <FormItemContext.Provider value={{ id }}>
       <div
@@ -104,14 +104,15 @@ const formLabelVariants = tv({
   },
 });
 const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
+  React.ElementRef<typeof Label>,
+  React.ComponentPropsWithoutRef<typeof Label>
+>(({ size, className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
   return (
     <Label
       ref={ref}
+      size={size}
       className={formLabelVariants({
         error: !!error,
         className,
@@ -147,19 +148,29 @@ const FormControl = React.forwardRef<
 FormControl.displayName = 'FormControl';
 
 const formDescriptionVariants = tv({
-  base: 'text-[0.8rem] text-muted-foreground',
+  base: 'text-muted-foreground',
+  variants: {
+    size: {
+      sm: 'text-[0.8rem] leading-none',
+      base: 'text-[0.9rem] leading-none',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+  },
 });
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
+  React.HTMLAttributes<HTMLParagraphElement> &
+    VariantProps<typeof formDescriptionVariants>
+>(({ size, className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
 
   return (
     <p
       ref={ref}
       id={formDescriptionId}
-      className={formDescriptionVariants({ className })}
+      className={formDescriptionVariants({ size, className })}
       {...props}
     />
   );
@@ -167,12 +178,22 @@ const FormDescription = React.forwardRef<
 FormDescription.displayName = 'FormDescription';
 
 const formMessageVariants = tv({
-  base: 'text-[0.8rem] font-medium text-destructive',
+  base: 'font-medium text-destructive',
+  variants: {
+    size: {
+      sm: 'text-[0.8rem]',
+      base: 'text-[0.9rem]',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+  },
 });
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
+  React.HTMLAttributes<HTMLParagraphElement> &
+    VariantProps<typeof formMessageVariants>
+>(({ size, className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
 
@@ -184,7 +205,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={formMessageVariants({ className })}
+      className={formMessageVariants({ size, className })}
       {...props}
     >
       {body}

package/lib/common/input.tsx

@@ -1,16 +1,14 @@
+import type { VariantProps } from 'tailwind-variants';
+
 import * as React from 'react';
 import { tv } from 'tailwind-variants';
 
-import { useTwintagForm } from '@twintag/twintag-form/provider';
-
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
-
 const inputVariants = tv({
   slots: {
     root: 'relative',
     input: [
-      'flex h-10 w-full border-input bg-background py-2 text-sm text-primary-foreground placeholder:text-muted-foreground focus-visible:outline-none',
-      'file:border-0 file:bg-transparent file:px-0 file:text-sm file:font-medium file:text-primary-foreground',
+      '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',
       'disabled:cursor-not-allowed disabled:opacity-50',
     ],
   },
@@ -25,17 +23,29 @@ const inputVariants = tv({
         input: 'border-b px-1',
       },
     },
+    size: {
+      sm: {
+        input: 'text-sm file:text-sm',
+      },
+      base: {
+        input: 'text-base file:text-base',
+      },
+    },
   },
   defaultVariants: {
     variant: 'default',
+    size: 'base',
   },
 });
 
+export type InputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'size'
+> &
+  VariantProps<typeof inputVariants>;
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    const { variant } = useTwintagForm();
-
-    const { root, input } = inputVariants({ variant });
+  ({ variant, size, className, type, ...props }, ref) => {
+    const { root, input } = inputVariants({ variant, size });
 
     return (
       <div className={root()}>

package/lib/common/label.tsx

@@ -1,21 +1,34 @@
+import type { VariantProps } from 'tailwind-variants';
+
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { tv } from 'tailwind-variants';
 
 const labelVariants = tv({
   base: [
-    'text-sm leading-none text-label',
+    'text-label',
     'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
   ],
+  variants: {
+    size: {
+      sm: 'text-sm leading-none',
+      base: 'text-base leading-none',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+  },
 });
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ size, className, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
     className={labelVariants({
+      size,
       className,
     })}
     {...props}

package/lib/common/textarea.tsx

@@ -1,15 +1,13 @@
+import type { VariantProps } from 'tailwind-variants';
+
 import * as React from 'react';
 import { tv } from 'tailwind-variants';
 
-import { useTwintagForm } from '@twintag/twintag-form/provider';
-
-type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-
 const textareaVariants = tv({
   slots: {
     root: 'relative',
     textarea: [
-      'flex min-h-[60px] w-full border-input bg-background py-2 text-sm text-primary-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none',
+      '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',
       'disabled:cursor-not-allowed disabled:opacity-50',
     ],
   },
@@ -24,16 +22,26 @@ const textareaVariants = tv({
         textarea: 'border-b px-1',
       },
     },
+    size: {
+      sm: {
+        textarea: 'text-sm',
+      },
+      base: {
+        textarea: 'text-base',
+      },
+    },
   },
   defaultVariants: {
     variant: 'default',
+    size: 'base',
   },
 });
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    const { variant } = useTwintagForm();
 
-    const { root, textarea } = textareaVariants({ variant });
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+  VariantProps<typeof textareaVariants>;
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ variant, size, className, ...props }, ref) => {
+    const { root, textarea } = textareaVariants({ size, variant });
 
     return (
       <div className={root()}>

package/lib/components/containers/accordion.tsx

@@ -51,20 +51,32 @@ const accordionItemVariants = tv({
   slots: {
     item: 'px-5 last:border-none',
     trigger: 'flex flex-1 items-center gap-2.5 font-tf-font',
-    content: 'space-y-4',
+    icon: 'shrink-0',
+    content: 'space-y-3',
   },
   variants: {
     variant: {
       default: {
-        trigger: 'text-base font-medium',
+        trigger: 'font-medium',
       },
       beta: {
-        trigger: 'text-sm',
+        trigger: '',
+      },
+    },
+    size: {
+      sm: {
+        item: 'text-sm',
+        icon: 'h-4 w-4',
+      },
+      base: {
+        item: 'text-base',
+        icon: 'h-5 w-5',
       },
     },
   },
   defaultVariants: {
     variant: 'default',
+    size: 'base',
   },
 });
 
@@ -74,15 +86,20 @@ const AccordionItem: FC<AccordionItemProps> = ({
   icon,
   children,
 }) => {
-  const { variant } = useTwintagForm();
+  const { variant, size } = useTwintagForm();
 
-  const { item, trigger, content } = accordionItemVariants({ variant });
+  const {
+    item,
+    trigger,
+    icon: iconVariants,
+    content,
+  } = accordionItemVariants({ size, variant });
 
   return (
     <AccordionItemPrimitive value={camelize(label)} className={item()}>
       <AccordionTrigger className='text-category'>
         <span className={trigger()}>
-          {icon ? <Icon name={icon} className='shrink-0' /> : <></>}
+          {icon ? <Icon name={icon} className={iconVariants()} /> : <></>}
           {label}
         </span>
       </AccordionTrigger>

package/lib/components/containers/category.tsx

@@ -7,22 +7,31 @@ import { useTwintagForm } from '@twintag/twintag-form/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,9 +13,11 @@ import {
   FormLabel,
   FormMessage,
 } from '@twintag/twintag-form/common/form';
+import { useTwintagForm } from '@twintag/twintag-form/provider';
 
 export const Checkbox: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
+  const { variant, size } = useTwintagForm();
 
   const isOptional = options?.optionalField;
 
@@ -28,7 +30,7 @@ export const Checkbox: FC<Props> = ({ label, bind, options }) => {
         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 +41,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 +53,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

@@ -23,25 +23,52 @@ import {
 } from '@twintag/twintag-form/common/popover';
 import { useTwintagForm } from '@twintag/twintag-form/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();
-
+  const { variant, size } = useTwintagForm();
   const { control } = useFormContext();
 
+  const { button, icon } = datePickerTriggerVariants({ variant, size });
+
   const isOptional = options?.optionalField;
 
   return (
@@ -52,9 +79,12 @@ export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
         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 +95,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 +107,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 +118,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 +128,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 +139,7 @@ export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
               />
             </PopoverContent>
           </Popover>
-          <FormMessage className='pt-1' />
+          <FormMessage size={size} className='pt-1' />
         </FormItem>
       )}
     />