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

package/dist/types/index.d.ts

@@ -1,7 +1,20 @@
-import type { ElementType } from 'react';
-export type TwintagFormContext = {
-    variant?: 'default' | 'beta';
-    components: Map<string, ElementType>;
+import { ElementType } from 'react';
+
+export type ComponentConfig = {
+    defaultValue?: unknown;
+    component: ElementType;
+};
+export type ParsedJsonComponent = Props & {
+    id: string;
+    type: string;
+    subtype?: string;
+    comp?: ElementType;
+};
+export type RawJsonComponent = RawProps & Record<string, unknown> & {
+    type: string;
+    children?: RawJsonComponent[];
+} & {
+    props?: RawProps;
 };
 type RawProps = Partial<{
     bind: string;
@@ -15,20 +28,16 @@ type RawProps = Partial<{
         optionalField: boolean;
     }>;
 }>;
-export type RawJsonComponent = RawProps & Record<string, unknown> & {
-    type: string;
-    children?: RawJsonComponent[];
-} & {
-    props?: RawProps;
-};
-export type ParsedJsonComponent = Props & {
-    id: string;
-    type: string;
-    subtype?: string;
-    comp?: ElementType;
-};
 export type Props = Omit<RawProps, 'subtype'> & {
     bind: string;
     items?: ParsedJsonComponent[];
 };
+export type TwintagFormContext = {
+    variant?: 'default' | 'beta';
+    size?: 'base' | 'sm';
+    inputs: Map<string, ComponentConfig>;
+    components: Map<string, ElementType>;
+    config: ParsedJsonComponent[] | ParsedJsonComponent;
+    resetValues: Record<string, unknown>;
+};
 export {};

package/dist/utils/data.d.ts

@@ -1,2 +1,3 @@
-import type { Props } from '../types';
+import { Props } from '../types';
+
 export declare const getBindSetFromItems: (items: Props[]) => Set<string>;

package/dist/utils/style.d.ts

@@ -1,2 +1,3 @@
-import type { ClassValue } from 'clsx';
+import { ClassValue } from 'clsx';
+
 export declare function cn(...inputs: ClassValue[]): string;

package/index.html

@@ -8,9 +8,11 @@
   <body>
     <div
       style="
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        padding: 2rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2rem;
+        padding: 1rem;
       "
     >
       <div>

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/slider.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+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',
+    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',
+  },
+});
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { root, track, range, thumb } = sliderVariants();
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={root({
+        className,
+      })}
+      {...props}
+    >
+      <SliderPrimitive.Track className={track()}>
+        <SliderPrimitive.Range className={range()} />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className={thumb()} />
+    </SliderPrimitive.Root>
+  );
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

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/config.tsx

@@ -1,25 +1,54 @@
 import type { ElementType, FC } from 'react';
+import type { ComponentConfig } from '../types';
 
 import { Accordion } from './containers/accordion';
 import { Category } from './containers/category';
-import { Checkbox } from './fields/checkbox';
-import { DatePicker } from './fields/date-picker';
-import { File } from './fields/file';
-import { Input as InputField } from './fields/input';
-import { RadioGroup } from './fields/radiogroup';
+import { Checkbox, DEFAULT_CHECKBOX_VALUE } from './fields/checkbox';
+import { DatePicker, DEFAULT_DATE_PICKER_VALUE } from './fields/date-picker';
+import { DEFAULT_FILE_VALUE, File } from './fields/file';
+import { DEFAULT_INPUT_VALUE, Input as InputField } from './fields/input';
+import { DEFAULT_RADIOGROUP_VALUE, RadioGroup } from './fields/radiogroup';
 import { Submit } from './fields/submit';
-import { Textarea } from './fields/textarea';
-import { Toggle } from './fields/toggle';
+import { DEFAULT_TEXTAREA_VALUE, Textarea } from './fields/textarea';
+import { DEFAULT_TOGGLE_VALUE, Toggle } from './fields/toggle';
+import { DEFAULT_TRI_TOGGLE_VALUE, TriToggle } from './fields/tri-toggle';
 
-export const Inputs = new Map<string, ElementType>()
-  .set('simple', InputField)
-  .set('textarea', Textarea)
-  .set('toggle', Toggle)
-  .set('file', File)
-  .set('submit', Submit)
-  .set('checkbox', Checkbox)
-  .set('radiogroup', RadioGroup)
-  .set('datepicker', DatePicker);
+export const Inputs = new Map<string, ComponentConfig>()
+  .set('simple', {
+    defaultValue: DEFAULT_INPUT_VALUE,
+    component: InputField,
+  })
+  .set('textarea', {
+    defaultValue: DEFAULT_TEXTAREA_VALUE,
+    component: Textarea,
+  })
+  .set('toggle', {
+    defaultValue: DEFAULT_TOGGLE_VALUE,
+    component: Toggle,
+  })
+  .set('file', {
+    defaultValue: DEFAULT_FILE_VALUE,
+    component: File,
+  })
+  .set('submit', {
+    component: Submit,
+  })
+  .set('checkbox', {
+    defaultValue: DEFAULT_CHECKBOX_VALUE,
+    component: Checkbox,
+  })
+  .set('radiogroup', {
+    defaultValue: DEFAULT_RADIOGROUP_VALUE,
+    component: RadioGroup,
+  })
+  .set('datepicker', {
+    defaultValue: DEFAULT_DATE_PICKER_VALUE,
+    component: DatePicker,
+  })
+  .set('tri-toggle', {
+    defaultValue: DEFAULT_TRI_TOGGLE_VALUE,
+    component: TriToggle,
+  });
 
 type InputProps = {
   subtype?: string;
@@ -27,7 +56,7 @@ type InputProps = {
   bind?: string;
 };
 const Input: FC<InputProps> = ({ subtype = 'simple', ...rest }) => {
-  const Comp = Inputs.get(subtype);
+  const Comp = Inputs.get(subtype)?.component;
 
   if (!Comp) return <></>;
 

package/lib/components/containers/accordion.tsx

@@ -11,7 +11,7 @@ import {
   AccordionTrigger,
 } from '@twintag/twintag-form/common/accordion';
 import { Icon } from '@twintag/twintag-form/common/icon';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 import { camelize } from '@twintag/twintag-form/utils/string';
 
 type AccordionRootProps = {
@@ -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>