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

package/dev/main.tsx

@@ -1,209 +1,233 @@
-import type { ComponentProps } from 'react';
-import type { Form } from '../lib';
-
-import '../lib/webcomponent';
-import './index.css';
-
-const config = [
-  {
-    type: 'category',
-    props: {
-      label: 'Category 1st',
-    },
-    children: [
-      {
-        type: 'input',
-        props: {
-          subtype: 'datepicker',
-          label: 'Date picker',
-          bind: 'datepicker',
-          options: {
-            description: 'this field is required',
-          },
-        },
-      },
-      {
-        type: 'accordion',
-        children: [
-          {
-            type: 'accordion',
-            props: {
-              subtype: 'item',
-              label: 'Required',
-              icon: 'archive-box-x-mark',
-            },
-            children: [
-              {
-                type: 'input',
-                props: {
-                  subtype: 'toggle',
-                  label: 'Required',
-                  bind: 'required',
-                  options: {
-                    description: 'this field is required',
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    type: 'category',
-    props: {
-      label: 'Category 2nd',
-    },
-    children: [
-      {
-        type: 'input',
-        props: {
-          subtype: 'simple',
-          label: 'Email',
-          bind: 'email',
-          options: {
-            error: 'This field is required',
-            description: 'This field is required',
-          },
-        },
-      },
-      {
-        type: 'input',
-        props: {
-          subtype: 'radiogroup',
-          label: 'Radio Group',
-          bind: 'radiogroup',
-          options: {
-            description: 'This field is required',
-            error: 'This field is required',
-          },
-        },
-        children: [
-          {
-            type: 'item',
-            props: {
-              label: 'Checkbox',
-              bind: 'checkbox',
-              options: {
-                description: 'This field is required',
-                error: 'This field is required',
-              },
-            },
-          },
-          {
-            type: 'item',
-            props: {
-              label: 'Mote',
-              bind: 'mote',
-              options: {
-                description: 'This field is required',
-                error: 'This field is required',
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  {
-    type: 'category',
-    props: {
-      label: 'Category 3rd',
-    },
-    children: [
-      {
-        type: 'input',
-        props: {
-          subtype: 'file',
-          label: 'File',
-          bind: 'file',
-          options: {
-            error: 'This field is required',
-            description: 'This field is required',
-          },
-        },
-      },
-    ],
-  },
-  {
-    type: 'category',
-    props: {
-      label: 'Category 4th',
-    },
-    children: [
-      {
-        type: 'input',
-        props: {
-          subtype: 'textarea',
-          label: 'Textarea',
-          bind: 'textarea',
-          options: {
-            description: 'This field is required',
-            error: 'This field is required',
-          },
-        },
-      },
-      {
-        type: 'input',
-        props: {
-          subtype: 'checkbox',
-          label: 'Checkbox',
-          bind: 'checkbox',
-          options: {
-            description: 'This field is required',
-            error: 'This field is required',
-          },
-        },
-      },
-    ],
-  },
-  {
-    type: 'input',
-    props: {
-      subtype: 'submit',
-      label: 'Submit',
-    },
-  },
-] satisfies React.ComponentProps<typeof Form>['config'];
-
-const options = {
-  defaultValues: {
-    required: 'true',
-    email: 'This should work',
-    radiogroup: 'mote',
-    checkbox: true,
-    textarea: 'This is a textarea',
-  },
-  resetOnSubmit: true,
-} as ComponentProps<typeof Form>['options'];
-
-// the key properties for the defaultValues object are the same as the bind properties
-const form = document.querySelector('twintag-form');
-
-form?.setAttribute('config', JSON.stringify(config));
-form?.setAttribute('options', JSON.stringify(options));
-
-form?.addEventListener('twintag-form-values', (event) => {
-  console.log('form values', (event as CustomEvent).detail);
-});
-form?.addEventListener('twintag-form-valid', (e) => {
-  console.log('form valid', (e as CustomEvent).detail);
-});
-form?.addEventListener('twintag-form-invalid', (e) => {
-  console.log('form invalid', (e as CustomEvent).detail);
-});
-
-const getValues = document.getElementById('get-values');
-getValues?.addEventListener('click', () => {
-  form?.shadowRoot
-    ?.querySelector('form')
-    ?.dispatchEvent(new CustomEvent('twintag-form-get_values'));
-});
-
-const submit = document.getElementById('submit');
-submit?.addEventListener('click', () => {
-  form?.shadowRoot
-    ?.querySelector('form')
-    ?.dispatchEvent(new CustomEvent('twintag-form-validate'));
-});
+import type { ComponentProps } from 'react';
+import type { Form } from '../lib';
+
+import '../lib/webcomponent';
+import './index.css';
+
+const config = [
+  {
+    type: 'category',
+    props: {
+      label: 'Category 1st',
+    },
+    children: [
+      {
+        type: 'input',
+        props: {
+          subtype: 'toggle',
+          label: 'Switch',
+          bind: 'switch',
+          options: {
+            description: 'this field is required',
+          },
+        },
+      },
+      {
+        type: 'input',
+        props: {
+          subtype: 'tri-toggle',
+          label: 'Tri-toggle',
+          bind: 'tri-toggle-bind',
+          options: {
+            description: 'this field is never required',
+          },
+        },
+      },
+      {
+        type: 'input',
+        props: {
+          subtype: 'datepicker',
+          label: 'Date picker',
+          bind: 'datepicker',
+          options: {
+            description: 'this field is required',
+          },
+        },
+      },
+      {
+        type: 'accordion',
+        children: [
+          {
+            type: 'accordion',
+            props: {
+              subtype: 'item',
+              label: 'Required',
+              icon: 'archive-box-x-mark',
+            },
+            children: [
+              {
+                type: 'input',
+                props: {
+                  subtype: 'toggle',
+                  label: 'Required',
+                  bind: 'required',
+                  options: {
+                    description: 'this field is required',
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'category',
+    props: {
+      label: 'Category 2nd',
+    },
+    children: [
+      {
+        type: 'input',
+        props: {
+          subtype: 'simple',
+          label: 'Email',
+          bind: 'email',
+          options: {
+            error: 'This field is required',
+            description: 'This field is required',
+          },
+        },
+      },
+      {
+        type: 'input',
+        props: {
+          subtype: 'radiogroup',
+          label: 'Radio Group',
+          bind: 'radiogroup',
+          options: {
+            description: 'This field is required',
+            error: 'This field is required',
+          },
+        },
+        children: [
+          {
+            type: 'item',
+            props: {
+              label: 'Checkbox',
+              bind: 'checkbox',
+              options: {
+                description: 'This field is required',
+                error: 'This field is required',
+              },
+            },
+          },
+          {
+            type: 'item',
+            props: {
+              label: 'Mote',
+              bind: 'mote',
+              options: {
+                description: 'This field is required',
+                error: 'This field is required',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'category',
+    props: {
+      label: 'Category 3rd',
+    },
+    children: [
+      {
+        type: 'input',
+        props: {
+          subtype: 'file',
+          label: 'File',
+          bind: 'file',
+          options: {
+            error: 'This field is required',
+            description: 'This field is required',
+          },
+        },
+      },
+    ],
+  },
+  {
+    type: 'category',
+    props: {
+      label: 'Category 4th',
+    },
+    children: [
+      {
+        type: 'input',
+        props: {
+          subtype: 'textarea',
+          label: 'Textarea',
+          bind: 'textarea',
+          options: {
+            description: 'This field is required',
+            error: 'This field is required',
+          },
+        },
+      },
+      {
+        type: 'input',
+        props: {
+          subtype: 'checkbox',
+          label: 'Checkbox',
+          bind: 'checkbox',
+          options: {
+            description: 'This field is required',
+            error: 'This field is required',
+          },
+        },
+      },
+    ],
+  },
+  {
+    type: 'input',
+    props: {
+      subtype: 'submit',
+      label: 'Submit',
+    },
+  },
+] satisfies React.ComponentProps<typeof Form>['config'];
+
+const options = {
+  defaultValues: {
+    'tri-toggle-bind': null,
+    required: true,
+    email: 'This should work',
+    radiogroup: 'mote',
+    checkbox: true,
+    textarea: 'This is a textarea',
+  },
+  variant: 'beta',
+  resetOnSubmit: true,
+} as ComponentProps<typeof Form>['options'];
+
+// the key properties for the defaultValues object are the same as the bind properties
+const form = document.querySelector('twintag-form');
+
+form?.setAttribute('config', JSON.stringify(config));
+form?.setAttribute('options', JSON.stringify(options));
+
+form?.addEventListener('twintag-form-values', (event) => {
+  console.log('form values', (event as CustomEvent).detail);
+});
+form?.addEventListener('twintag-form-valid', (e) => {
+  console.log('form valid', (e as CustomEvent).detail);
+});
+form?.addEventListener('twintag-form-invalid', (e) => {
+  console.log('form invalid', (e as CustomEvent).detail);
+});
+
+const getValues = document.getElementById('get-values');
+getValues?.addEventListener('click', () => {
+  form?.shadowRoot
+    ?.querySelector('form')
+    ?.dispatchEvent(new CustomEvent('twintag-form-get_values'));
+});
+
+const submit = document.getElementById('submit');
+submit?.addEventListener('click', () => {
+  form?.shadowRoot
+    ?.querySelector('form')
+    ?.dispatchEvent(new CustomEvent('twintag-form-validate'));
+});

package/dist/common/button.d.ts

@@ -1,5 +1,6 @@
+import { VariantProps, TVReturnType } from 'tailwind-variants';
 import { TVConfig } from 'tailwind-variants/dist/config.js';
-import { TVReturnType, VariantProps } from 'tailwind-variants';
+
 import * as React from 'react';
 declare const buttonVariants: TVReturnType<{
     variant: {
@@ -75,7 +76,7 @@ declare const buttonVariants: TVReturnType<{
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 };
-declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<TVReturnType<{
+declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps< TVReturnType<{
     variant: {
         default: string;
         outline: string;

package/dist/common/calendar.d.ts

@@ -1,8 +1,8 @@
-import { JSX } from 'react/jsx-runtime';
+import { VariantProps, TVReturnType } from 'tailwind-variants';
+import { DayPicker } from 'react-day-picker';
 import { TVConfig } from 'tailwind-variants/dist/config.js';
-import { TVReturnType, VariantProps } from 'tailwind-variants';
+
 import * as React from 'react';
-import { DayPicker } from 'react-day-picker';
 declare const calendarVariants: TVReturnType<{
     variant: {
         dropdown: {
@@ -210,7 +210,7 @@ declare const calendarVariants: TVReturnType<{
     };
 }>, unknown, unknown, undefined>>;
 export type CalendarProps = React.ComponentProps<typeof DayPicker> & VariantProps<typeof calendarVariants>;
-declare function Calendar({ size, className, classNames, showOutsideDays, ...props }: CalendarProps): JSX.Element;
+declare function Calendar({ size, className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Calendar {
     var displayName: string;
 }

package/dist/common/form.d.ts

@@ -1,12 +1,12 @@
-import { SlotProps } from '@radix-ui/react-slot';
-import { LabelProps } from '@radix-ui/react-label';
+import { ControllerProps, FieldPath, FieldValues, FormProviderProps, FieldError } from 'react-hook-form';
+import { VariantProps, TVReturnType } from 'tailwind-variants';
 import { TVConfig } from 'tailwind-variants/dist/config.js';
-import { JSX } from 'react/jsx-runtime';
-import { FormProviderProps, FieldError, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
-import { TVReturnType, VariantProps } from 'tailwind-variants';
+import { LabelProps } from '@radix-ui/react-label';
+import { SlotProps } from '@radix-ui/react-slot';
+
 import * as React from 'react';
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues = TFieldValues>(props: FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
 declare const useFormField: () => {
     invalid: boolean;
     isDirty: boolean;
@@ -18,7 +18,7 @@ declare const useFormField: () => {
     formDescriptionId: string;
     formMessageId: string;
 };
-declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<TVReturnType<{
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps< TVReturnType<{
     variant: {
         default: string;
         beta: string;
@@ -54,7 +54,7 @@ declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
         beta: string;
     };
 }>, unknown, unknown, undefined>>> & React.RefAttributes<HTMLDivElement>>;
-declare const FormLabel: React.ForwardRefExoticComponent<Omit<Omit<LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<TVReturnType<{
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<Omit< LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps< TVReturnType<{
     size: {
         sm: string;
         base: string;
@@ -90,8 +90,8 @@ declare const FormLabel: React.ForwardRefExoticComponent<Omit<Omit<LabelProps &
         base: string;
     };
 }>, unknown, unknown, undefined>>> & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
-declare const FormControl: React.ForwardRefExoticComponent<Omit<SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
-declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & VariantProps<TVReturnType<{
+declare const FormControl: React.ForwardRefExoticComponent<Omit< SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & VariantProps< TVReturnType<{
     size: {
         sm: string;
         base: string;
@@ -127,7 +127,7 @@ declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttribu
         base: string;
     };
 }>, unknown, unknown, undefined>>> & React.RefAttributes<HTMLParagraphElement>>;
-declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & VariantProps<TVReturnType<{
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & VariantProps< TVReturnType<{
     size: {
         sm: string;
         base: string;

package/dist/common/icon.d.ts

@@ -1,4 +1,5 @@
-import type { FC } from 'react';
+import { FC } from 'react';
+
 type Props = {
     name: string;
     className?: string;

package/dist/common/input.d.ts

@@ -1,5 +1,6 @@
+import { VariantProps, TVReturnType } from 'tailwind-variants';
 import { TVConfig } from 'tailwind-variants/dist/config.js';
-import { TVReturnType, VariantProps } from 'tailwind-variants';
+
 import * as React from 'react';
 declare const inputVariants: TVReturnType<{
     variant: {
@@ -138,7 +139,7 @@ declare const inputVariants: TVReturnType<{
     };
 }>, unknown, unknown, undefined>>;
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants>;
-declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<TVReturnType<{
+declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps< TVReturnType<{
     variant: {
         default: {
             input: string;

package/dist/common/label.d.ts

@@ -1,8 +1,9 @@
+import { VariantProps, TVReturnType } from 'tailwind-variants';
 import { TVConfig } from 'tailwind-variants/dist/config.js';
-import { TVReturnType, VariantProps } from 'tailwind-variants';
+
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
-declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<TVReturnType<{
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps< TVReturnType<{
     size: {
         sm: string;
         base: string;

package/dist/common/slider.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Slider };

package/dist/common/textarea.d.ts

@@ -1,7 +1,8 @@
+import { VariantProps, TVReturnType } from 'tailwind-variants';
 import { TVConfig } from 'tailwind-variants/dist/config.js';
-import { TVReturnType, VariantProps } from 'tailwind-variants';
+
 import * as React from 'react';
-declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & VariantProps<TVReturnType<{
+declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & VariantProps< TVReturnType<{
     variant: {
         default: {
             textarea: string;

package/dist/components/config.d.ts

@@ -1,4 +1,6 @@
-import type { ElementType } from 'react';
-export declare const Inputs: Map<string, ElementType>;
+import { ElementType } from 'react';
+import { ComponentConfig } from '../types';
+
+export declare const Inputs: Map<string, ComponentConfig>;
 export declare const Containers: Map<string, ElementType>;
 export declare const components: Map<string, ElementType>;

package/dist/components/containers/accordion.d.ts

@@ -1,5 +1,6 @@
-import type { WithChildren } from 'twintag-types/dom';
-import { type FC } from 'react';
+import { WithChildren } from 'twintag-types/dom';
+import { FC } from 'react';
+
 type AccordionProps = {
     subtype?: 'item' | 'multiple' | 'single';
     label?: string;

package/dist/components/containers/category.d.ts

@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-import type { WithChildren } from 'twintag-types/dom';
+import { FC } from 'react';
+import { WithChildren } from 'twintag-types/dom';
+
 type Props = {
     label?: string;
 } & WithChildren;

package/dist/components/fields/checkbox.d.ts

@@ -1,3 +1,5 @@
-import type { FC } from 'react';
-import type { Props } from '../../types';
+import { FC } from 'react';
+import { Props } from '../../types';
+
+export declare const DEFAULT_CHECKBOX_VALUE = false;
 export declare const Checkbox: FC<Props>;

package/dist/components/fields/date-picker.d.ts

@@ -1,3 +1,5 @@
-import type { Props } from '../../types';
+import { Props } from '../../types';
+
 import * as React from 'react';
+export declare const DEFAULT_DATE_PICKER_VALUE: null;
 export declare const DatePicker: React.FC<Props>;

package/dist/components/fields/file.d.ts

@@ -1,3 +1,5 @@
-import type { FC } from 'react';
-import type { Props } from '../../types';
+import { FC } from 'react';
+import { Props } from '../../types';
+
+export declare const DEFAULT_FILE_VALUE = "";
 export declare const File: FC<Props>;