@shipfox/react-ui 0.6.0 → 0.8.0

package/dist/components/form/form.stories.js

@@ -0,0 +1,582 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '../../components/button/index.js';
+import { Checkbox, CheckboxLabel, CheckboxLinks } from '../../components/checkbox/index.js';
+import { Input } from '../../components/input/index.js';
+import { Textarea } from '../../components/textarea/index.js';
+import { Code, Header } from '../../components/typography/index.js';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './form.js';
+const meta = {
+    title: 'Components/Form',
+    tags: [
+        'autodocs'
+    ]
+};
+export default meta;
+const basicFormSchema = z.object({
+    username: z.string().min(3, 'Username must be at least 3 characters'),
+    email: z.string().email('Invalid email address')
+});
+function BasicFormExample() {
+    const form = useForm({
+        resolver: zodResolver(basicFormSchema),
+        defaultValues: {
+            username: '',
+            email: ''
+        }
+    });
+    function onSubmit(data) {
+        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
+        console.log(data);
+    }
+    return /*#__PURE__*/ _jsx(Form, {
+        ...form,
+        children: /*#__PURE__*/ _jsxs("form", {
+            onSubmit: form.handleSubmit(onSubmit),
+            className: "space-y-8 w-full max-w-md",
+            children: [
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "username",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormLabel, {
+                                    children: "Username"
+                                }),
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(Input, {
+                                        placeholder: "shadcn",
+                                        ...field
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormDescription, {
+                                    children: "This is your public display name."
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "email",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormLabel, {
+                                    children: "Email"
+                                }),
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(Input, {
+                                        type: "email",
+                                        placeholder: "email@example.com",
+                                        ...field
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormDescription, {
+                                    children: "We'll never share your email."
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    type: "submit",
+                    children: "Submit"
+                })
+            ]
+        })
+    });
+}
+export const Basic = {
+    render: ()=>/*#__PURE__*/ _jsx(BasicFormExample, {})
+};
+const componentsFormSchema = z.object({
+    example: z.string().min(1, 'This field is required'),
+    exampleTextarea: z.string().min(1, 'This field is required')
+});
+function FormComponentsExample() {
+    const form = useForm({
+        resolver: zodResolver(componentsFormSchema),
+        defaultValues: {
+            example: '',
+            exampleTextarea: ''
+        }
+    });
+    return /*#__PURE__*/ _jsx(Form, {
+        ...form,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32 w-full max-w-md",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "Form Components"
+                        }),
+                        /*#__PURE__*/ _jsx(Code, {
+                            variant: "label",
+                            className: "text-foreground-neutral-subtle",
+                            children: "Individual form components work together within FormField"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("form", {
+                    className: "space-y-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(FormField, {
+                            control: form.control,
+                            name: "example",
+                            render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(FormLabel, {
+                                            children: "Form Label"
+                                        }),
+                                        /*#__PURE__*/ _jsx(FormControl, {
+                                            children: /*#__PURE__*/ _jsx(Input, {
+                                                placeholder: "Form Control with Input",
+                                                ...field
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(FormDescription, {
+                                            children: "This is a form description."
+                                        }),
+                                        /*#__PURE__*/ _jsx(FormMessage, {})
+                                    ]
+                                })
+                        }),
+                        /*#__PURE__*/ _jsx(FormField, {
+                            control: form.control,
+                            name: "exampleTextarea",
+                            render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(FormLabel, {
+                                            children: "Form Label"
+                                        }),
+                                        /*#__PURE__*/ _jsx(FormControl, {
+                                            children: /*#__PURE__*/ _jsx(Textarea, {
+                                                placeholder: "Form Control with Textarea",
+                                                ...field
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(FormDescription, {
+                                            children: "This is a form description."
+                                        }),
+                                        /*#__PURE__*/ _jsx(FormMessage, {})
+                                    ]
+                                })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export const Components = {
+    render: ()=>/*#__PURE__*/ _jsx(FormComponentsExample, {})
+};
+const checkboxFormSchema = z.object({
+    username: z.string().min(3, 'Username must be at least 3 characters'),
+    email: z.string().email('Invalid email address'),
+    newsletter: z.boolean(),
+    notifications: z.boolean()
+});
+function FormWithCheckboxExample() {
+    const form = useForm({
+        resolver: zodResolver(checkboxFormSchema),
+        defaultValues: {
+            username: '',
+            email: '',
+            newsletter: false,
+            notifications: false
+        }
+    });
+    function onSubmit(data) {
+        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
+        console.log(data);
+    }
+    return /*#__PURE__*/ _jsx(Form, {
+        ...form,
+        children: /*#__PURE__*/ _jsxs("form", {
+            onSubmit: form.handleSubmit(onSubmit),
+            className: "space-y-8 w-full max-w-md",
+            children: [
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "username",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormLabel, {
+                                    children: "Username"
+                                }),
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(Input, {
+                                        placeholder: "shadcn",
+                                        ...field
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormDescription, {
+                                    children: "This is your public display name."
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "email",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormLabel, {
+                                    children: "Email"
+                                }),
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(Input, {
+                                        type: "email",
+                                        placeholder: "email@example.com",
+                                        ...field
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormDescription, {
+                                    children: "We'll never share your email."
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "newsletter",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            className: "flex flex-row items-center gap-8 pt-4",
+                            children: [
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(Checkbox, {
+                                        checked: field.value,
+                                        onCheckedChange: field.onChange
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormLabel, {
+                                    children: "Subscribe to newsletter"
+                                })
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "notifications",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            className: "flex flex-row items-center gap-8 pt-4 pb-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(Checkbox, {
+                                        checked: field.value,
+                                        onCheckedChange: field.onChange
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormLabel, {
+                                    children: "Enable notifications"
+                                })
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    type: "submit",
+                    children: "Submit"
+                })
+            ]
+        })
+    });
+}
+export const WithCheckbox = {
+    render: ()=>/*#__PURE__*/ _jsx(FormWithCheckboxExample, {})
+};
+const checkboxLabelSchema = z.object({
+    username: z.string().min(1, 'Username is required'),
+    email: z.string().email('Invalid email address'),
+    terms: z.boolean().refine((val)=>val === true, {
+        message: 'You must accept the terms and conditions'
+    }),
+    marketing: z.boolean()
+});
+function FormWithCheckboxLabelExample() {
+    const form = useForm({
+        resolver: zodResolver(checkboxLabelSchema),
+        defaultValues: {
+            username: '',
+            email: '',
+            terms: false,
+            marketing: false
+        }
+    });
+    function onSubmit(data) {
+        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
+        console.log(data);
+    }
+    return /*#__PURE__*/ _jsx(Form, {
+        ...form,
+        children: /*#__PURE__*/ _jsxs("form", {
+            onSubmit: form.handleSubmit(onSubmit),
+            className: "space-y-8 w-full max-w-md",
+            children: [
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "username",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormLabel, {
+                                    children: "Username"
+                                }),
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(Input, {
+                                        placeholder: "shadcn",
+                                        ...field
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "email",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormLabel, {
+                                    children: "Email"
+                                }),
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(Input, {
+                                        type: "email",
+                                        placeholder: "email@example.com",
+                                        ...field
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "terms",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                        label: "I agree to the terms and conditions",
+                                        description: "By checking this box, you agree to our terms of service and privacy policy.",
+                                        checked: field.value,
+                                        onCheckedChange: field.onChange
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "marketing",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                        label: "I want to receive marketing emails",
+                                        description: "Stay updated with our latest products and offers.",
+                                        optional: true,
+                                        checked: field.value,
+                                        onCheckedChange: field.onChange
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    type: "submit",
+                    children: "Submit"
+                })
+            ]
+        })
+    });
+}
+export const WithCheckboxLabel = {
+    render: ()=>/*#__PURE__*/ _jsx(FormWithCheckboxLabelExample, {})
+};
+const checkboxLinksSchema = z.object({
+    username: z.string().min(1, 'Username is required'),
+    email: z.string().email('Invalid email address'),
+    acceptPolicies: z.boolean().refine((val)=>val === true, {
+        message: 'You must accept the policies to continue'
+    })
+});
+function FormWithCheckboxLinksExample() {
+    const form = useForm({
+        resolver: zodResolver(checkboxLinksSchema),
+        defaultValues: {
+            username: '',
+            email: '',
+            acceptPolicies: false
+        }
+    });
+    function onSubmit(data) {
+        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
+        console.log(data);
+    }
+    return /*#__PURE__*/ _jsx(Form, {
+        ...form,
+        children: /*#__PURE__*/ _jsxs("form", {
+            onSubmit: form.handleSubmit(onSubmit),
+            className: "space-y-8 w-full max-w-md",
+            children: [
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "username",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormLabel, {
+                                    children: "Username"
+                                }),
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(Input, {
+                                        placeholder: "shadcn",
+                                        ...field
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "email",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormLabel, {
+                                    children: "Email"
+                                }),
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(Input, {
+                                        type: "email",
+                                        placeholder: "email@example.com",
+                                        ...field
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "acceptPolicies",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(CheckboxLinks, {
+                                        label: "Accept policies",
+                                        links: [
+                                            {
+                                                label: 'Terms of use',
+                                                href: '#'
+                                            },
+                                            {
+                                                label: 'Privacy Policy',
+                                                href: '#'
+                                            }
+                                        ],
+                                        checked: field.value,
+                                        onCheckedChange: field.onChange
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    type: "submit",
+                    children: "Submit"
+                })
+            ]
+        })
+    });
+}
+export const WithCheckboxLinks = {
+    render: ()=>/*#__PURE__*/ _jsx(FormWithCheckboxLinksExample, {})
+};
+const checkboxLabelBorderSchema = z.object({
+    plan: z.string().min(1, 'Plan name is required'),
+    newsletter: z.boolean()
+});
+function FormWithCheckboxLabelBorderExample() {
+    const form = useForm({
+        resolver: zodResolver(checkboxLabelBorderSchema),
+        defaultValues: {
+            plan: '',
+            newsletter: false
+        }
+    });
+    function onSubmit(data) {
+        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
+        console.log(data);
+    }
+    return /*#__PURE__*/ _jsx(Form, {
+        ...form,
+        children: /*#__PURE__*/ _jsxs("form", {
+            onSubmit: form.handleSubmit(onSubmit),
+            className: "space-y-8 w-full max-w-md",
+            children: [
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "plan",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormLabel, {
+                                    children: "Select a plan"
+                                }),
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(Input, {
+                                        placeholder: "Enter plan name",
+                                        ...field
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormDescription, {
+                                    children: "Choose the plan that best fits your needs."
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(FormField, {
+                    control: form.control,
+                    name: "newsletter",
+                    render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormControl, {
+                                    children: /*#__PURE__*/ _jsx(CheckboxLabel, {
+                                        label: "Subscribe to our newsletter",
+                                        description: "Get weekly updates, tips, and exclusive content delivered to your inbox.",
+                                        optional: true,
+                                        showInfoIcon: true,
+                                        border: true,
+                                        checked: field.value,
+                                        onCheckedChange: field.onChange
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(FormMessage, {})
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    type: "submit",
+                    className: "mt-4",
+                    children: "Submit"
+                })
+            ]
+        })
+    });
+}
+export const WithCheckboxLabelBorder = {
+    render: ()=>/*#__PURE__*/ _jsx(FormWithCheckboxLabelBorderExample, {})
+};
+
+//# sourceMappingURL=form.stories.js.map

package/dist/components/form/form.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form/form.stories.tsx"],"sourcesContent":["import {zodResolver} from '@hookform/resolvers/zod';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button';\nimport {Checkbox, CheckboxLabel, CheckboxLinks} from 'components/checkbox';\nimport {Input} from 'components/input';\nimport {Textarea} from 'components/textarea';\nimport {Code, Header} from 'components/typography';\nimport {useForm} from 'react-hook-form';\nimport {z} from 'zod';\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from './form';\n\nconst meta = {\n  title: 'Components/Form',\n  tags: ['autodocs'],\n} satisfies Meta;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst basicFormSchema = z.object({\n  username: z.string().min(3, 'Username must be at least 3 characters'),\n  email: z.string().email('Invalid email address'),\n});\n\ntype BasicFormValues = z.infer<typeof basicFormSchema>;\n\nfunction BasicFormExample() {\n  const form = useForm<BasicFormValues>({\n    resolver: zodResolver(basicFormSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n    },\n  });\n\n  function onSubmit(data: BasicFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>This is your public display name.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormDescription>We'll never share your email.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const Basic: Story = {\n  render: () => <BasicFormExample />,\n};\n\nconst componentsFormSchema = z.object({\n  example: z.string().min(1, 'This field is required'),\n  exampleTextarea: z.string().min(1, 'This field is required'),\n});\n\ntype ComponentsFormValues = z.infer<typeof componentsFormSchema>;\n\nfunction FormComponentsExample() {\n  const form = useForm<ComponentsFormValues>({\n    resolver: zodResolver(componentsFormSchema),\n    defaultValues: {\n      example: '',\n      exampleTextarea: '',\n    },\n  });\n\n  return (\n    <Form {...form}>\n      <div className=\"flex flex-col gap-32 w-full max-w-md\">\n        <div className=\"flex flex-col gap-16\">\n          <Header variant=\"h3\">Form Components</Header>\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Individual form components work together within FormField\n          </Code>\n        </div>\n\n        <form className=\"space-y-8\">\n          <FormField\n            control={form.control}\n            name=\"example\"\n            render={({field}) => (\n              <FormItem>\n                <FormLabel>Form Label</FormLabel>\n                <FormControl>\n                  <Input placeholder=\"Form Control with Input\" {...field} />\n                </FormControl>\n                <FormDescription>This is a form description.</FormDescription>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n\n          <FormField\n            control={form.control}\n            name=\"exampleTextarea\"\n            render={({field}) => (\n              <FormItem>\n                <FormLabel>Form Label</FormLabel>\n                <FormControl>\n                  <Textarea placeholder=\"Form Control with Textarea\" {...field} />\n                </FormControl>\n                <FormDescription>This is a form description.</FormDescription>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n        </form>\n      </div>\n    </Form>\n  );\n}\n\nexport const Components: Story = {\n  render: () => <FormComponentsExample />,\n};\n\nconst checkboxFormSchema = z.object({\n  username: z.string().min(3, 'Username must be at least 3 characters'),\n  email: z.string().email('Invalid email address'),\n  newsletter: z.boolean(),\n  notifications: z.boolean(),\n});\n\ntype CheckboxFormValues = z.infer<typeof checkboxFormSchema>;\n\nfunction FormWithCheckboxExample() {\n  const form = useForm<CheckboxFormValues>({\n    resolver: zodResolver(checkboxFormSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n      newsletter: false,\n      notifications: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>This is your public display name.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormDescription>We'll never share your email.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"newsletter\"\n          render={({field}) => (\n            <FormItem className=\"flex flex-row items-center gap-8 pt-4\">\n              <FormControl>\n                <Checkbox checked={field.value} onCheckedChange={field.onChange} />\n              </FormControl>\n              <FormLabel>Subscribe to newsletter</FormLabel>\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"notifications\"\n          render={({field}) => (\n            <FormItem className=\"flex flex-row items-center gap-8 pt-4 pb-8\">\n              <FormControl>\n                <Checkbox checked={field.value} onCheckedChange={field.onChange} />\n              </FormControl>\n              <FormLabel>Enable notifications</FormLabel>\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckbox: Story = {\n  render: () => <FormWithCheckboxExample />,\n};\n\nconst checkboxLabelSchema = z.object({\n  username: z.string().min(1, 'Username is required'),\n  email: z.string().email('Invalid email address'),\n  terms: z.boolean().refine((val) => val === true, {\n    message: 'You must accept the terms and conditions',\n  }),\n  marketing: z.boolean(),\n});\n\ntype CheckboxLabelFormValues = z.infer<typeof checkboxLabelSchema>;\n\nfunction FormWithCheckboxLabelExample() {\n  const form = useForm<CheckboxLabelFormValues>({\n    resolver: zodResolver(checkboxLabelSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n      terms: false,\n      marketing: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxLabelFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"terms\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLabel\n                  label=\"I agree to the terms and conditions\"\n                  description=\"By checking this box, you agree to our terms of service and privacy policy.\"\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"marketing\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLabel\n                  label=\"I want to receive marketing emails\"\n                  description=\"Stay updated with our latest products and offers.\"\n                  optional\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckboxLabel: Story = {\n  render: () => <FormWithCheckboxLabelExample />,\n};\n\nconst checkboxLinksSchema = z.object({\n  username: z.string().min(1, 'Username is required'),\n  email: z.string().email('Invalid email address'),\n  acceptPolicies: z.boolean().refine((val) => val === true, {\n    message: 'You must accept the policies to continue',\n  }),\n});\n\ntype CheckboxLinksFormValues = z.infer<typeof checkboxLinksSchema>;\n\nfunction FormWithCheckboxLinksExample() {\n  const form = useForm<CheckboxLinksFormValues>({\n    resolver: zodResolver(checkboxLinksSchema),\n    defaultValues: {\n      username: '',\n      email: '',\n      acceptPolicies: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxLinksFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input type=\"email\" placeholder=\"email@example.com\" {...field} />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"acceptPolicies\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLinks\n                  label=\"Accept policies\"\n                  links={[\n                    {label: 'Terms of use', href: '#'},\n                    {label: 'Privacy Policy', href: '#'},\n                  ]}\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckboxLinks: Story = {\n  render: () => <FormWithCheckboxLinksExample />,\n};\n\nconst checkboxLabelBorderSchema = z.object({\n  plan: z.string().min(1, 'Plan name is required'),\n  newsletter: z.boolean(),\n});\n\ntype CheckboxLabelBorderFormValues = z.infer<typeof checkboxLabelBorderSchema>;\n\nfunction FormWithCheckboxLabelBorderExample() {\n  const form = useForm<CheckboxLabelBorderFormValues>({\n    resolver: zodResolver(checkboxLabelBorderSchema),\n    defaultValues: {\n      plan: '',\n      newsletter: false,\n    },\n  });\n\n  function onSubmit(data: CheckboxLabelBorderFormValues) {\n    // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>\n    console.log(data);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8 w-full max-w-md\">\n        <FormField\n          control={form.control}\n          name=\"plan\"\n          render={({field}) => (\n            <FormItem>\n              <FormLabel>Select a plan</FormLabel>\n              <FormControl>\n                <Input placeholder=\"Enter plan name\" {...field} />\n              </FormControl>\n              <FormDescription>Choose the plan that best fits your needs.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name=\"newsletter\"\n          render={({field}) => (\n            <FormItem>\n              <FormControl>\n                <CheckboxLabel\n                  label=\"Subscribe to our newsletter\"\n                  description=\"Get weekly updates, tips, and exclusive content delivered to your inbox.\"\n                  optional\n                  showInfoIcon\n                  border\n                  checked={field.value}\n                  onCheckedChange={field.onChange}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\" className=\"mt-4\">\n          Submit\n        </Button>\n      </form>\n    </Form>\n  );\n}\n\nexport const WithCheckboxLabelBorder: Story = {\n  render: () => <FormWithCheckboxLabelBorderExample />,\n};\n"],"names":["zodResolver","Button","Checkbox","CheckboxLabel","CheckboxLinks","Input","Textarea","Code","Header","useForm","z","Form","FormControl","FormDescription","FormField","FormItem","FormLabel","FormMessage","meta","title","tags","basicFormSchema","object","username","string","min","email","BasicFormExample","form","resolver","defaultValues","onSubmit","data","console","log","handleSubmit","className","control","name","render","field","placeholder","type","Basic","componentsFormSchema","example","exampleTextarea","FormComponentsExample","div","variant","Components","checkboxFormSchema","newsletter","boolean","notifications","FormWithCheckboxExample","checked","value","onCheckedChange","onChange","WithCheckbox","checkboxLabelSchema","terms","refine","val","message","marketing","FormWithCheckboxLabelExample","label","description","optional","WithCheckboxLabel","checkboxLinksSchema","acceptPolicies","FormWithCheckboxLinksExample","links","href","WithCheckboxLinks","checkboxLabelBorderSchema","plan","FormWithCheckboxLabelBorderExample","showInfoIcon","border","WithCheckboxLabelBorder"],"mappings":"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"}

package/dist/components/form/index.d.ts

@@ -0,0 +1,2 @@
+export * from './form';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/components/form/index.js

@@ -0,0 +1,3 @@
+export * from './form.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form/index.ts"],"sourcesContent":["export * from './form';\n"],"names":[],"mappings":"AAAA,cAAc,SAAS"}

package/dist/components/icon/custom/spinner.d.ts

@@ -1,4 +1,4 @@
 import type { RemixiconComponentType } from '@remixicon/react';
 import type { ComponentProps } from 'react';
-export declare function SpinnerIcon(_props: ComponentProps<RemixiconComponentType>): import("react/jsx-runtime").JSX.Element;
+export declare function SpinnerIcon(props: ComponentProps<RemixiconComponentType>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=spinner.d.ts.map