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

package/dev/main.tsx

@@ -1,210 +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,
-  variant: 'beta',
-} 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: {
@@ -8,9 +9,8 @@ declare const buttonVariants: TVReturnType<{
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }, undefined, string[], TVConfig<{
     variant: {
@@ -19,9 +19,8 @@ declare const buttonVariants: TVReturnType<{
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }, {
     variant: {
@@ -30,9 +29,8 @@ declare const buttonVariants: TVReturnType<{
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }>, {
     variant: {
@@ -41,9 +39,8 @@ declare const buttonVariants: TVReturnType<{
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }, undefined, TVReturnType<{
     variant: {
@@ -52,9 +49,8 @@ declare const buttonVariants: TVReturnType<{
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }, undefined, string[], TVConfig<{
     variant: {
@@ -63,9 +59,8 @@ declare const buttonVariants: TVReturnType<{
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }, {
     variant: {
@@ -74,24 +69,22 @@ declare const buttonVariants: TVReturnType<{
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }>, unknown, unknown, undefined>>;
 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;
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }, undefined, string[], TVConfig<{
     variant: {
@@ -100,9 +93,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }, {
     variant: {
@@ -111,9 +103,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }>, {
     variant: {
@@ -122,9 +113,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }, undefined, TVReturnType<{
     variant: {
@@ -133,9 +123,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }, undefined, string[], TVConfig<{
     variant: {
@@ -144,9 +133,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }, {
     variant: {
@@ -155,9 +143,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
         ghost: string;
     };
     size: {
-        default: string;
         sm: string;
-        lg: string;
+        base: string;
     };
 }>, unknown, unknown, undefined>>> & {
     asChild?: boolean | undefined;