@shipfox/react-ui 0.14.0 → 0.15.0

package/dist/components/dashboard/dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dashboard/dashboard.tsx"],"sourcesContent":["import {useMotionValueEvent, useScroll} from 'framer-motion';\nimport {useCallback, useRef, useState} from 'react';\nimport {AnalyticsContent} from './components/analytics-content';\nimport {AnimatedLogo} from './components/animated-logo';\nimport {JobsContent} from './components/jobs-content';\nimport {TopMenu} from './components/top-menu';\nimport {Topbar} from './components/topbar';\n\nconst LOGO_HEIGHT = 48;\nconst TOPBAR_HEIGHT = 41;\n\nexport function Dashboard() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const topbarRef = useRef<HTMLDivElement>(null);\n  const [scrollProgress, setScrollProgress] = useState(0);\n  const [activeTab, setActiveTab] = useState('analytics');\n\n  const {scrollY} = useScroll({\n    container: containerRef,\n  });\n\n  useMotionValueEvent(scrollY, 'change', (latest) => {\n    const progress = Math.min(latest / TOPBAR_HEIGHT, 1);\n    setScrollProgress(progress);\n  });\n\n  const handleTabChange = useCallback((tab: string) => {\n    setActiveTab(tab);\n    if (containerRef.current) {\n      containerRef.current.scrollTo({top: 0, behavior: 'instant'});\n    }\n    setScrollProgress(0);\n  }, []);\n\n  const isTopbarHidden = scrollProgress >= 1;\n\n  return (\n    <div className=\"flex flex-col w-full h-full\">\n      <AnimatedLogo scrollProgress={scrollProgress} />\n\n      <div ref={containerRef} className=\"flex flex-col w-full h-full overflow-auto\">\n        <div ref={topbarRef}>\n          <Topbar hideLogo={isTopbarHidden} />\n        </div>\n\n        <div className=\"sticky top-0 z-40 border-b border-border-neutral-strong bg-background-neutral-base\">\n          <div\n            style={{\n              paddingLeft: `${(1 - (1 - scrollProgress) ** 3) * (LOGO_HEIGHT - 8)}px`,\n            }}\n          >\n            <TopMenu activeTab={activeTab} onTabChange={handleTabChange} />\n          </div>\n        </div>\n\n        {activeTab === 'analytics' && <AnalyticsContent />}\n        {activeTab === 'jobs' && <JobsContent />}\n      </div>\n    </div>\n  );\n}\n"],"names":["useMotionValueEvent","useScroll","useCallback","useRef","useState","AnalyticsContent","AnimatedLogo","JobsContent","TopMenu","Topbar","LOGO_HEIGHT","TOPBAR_HEIGHT","Dashboard","containerRef","topbarRef","scrollProgress","setScrollProgress","activeTab","setActiveTab","scrollY","container","latest","progress","Math","min","handleTabChange","tab","current","scrollTo","top","behavior","isTopbarHidden","div","className","ref","hideLogo","style","paddingLeft","onTabChange"],"mappings":";AAAA,SAAQA,mBAAmB,EAAEC,SAAS,QAAO,gBAAgB;AAC7D,SAAQC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AACpD,SAAQC,gBAAgB,QAAO,iCAAiC;AAChE,SAAQC,YAAY,QAAO,6BAA6B;AACxD,SAAQC,WAAW,QAAO,4BAA4B;AACtD,SAAQC,OAAO,QAAO,wBAAwB;AAC9C,SAAQC,MAAM,QAAO,sBAAsB;AAE3C,MAAMC,cAAc;AACpB,MAAMC,gBAAgB;AAEtB,OAAO,SAASC;IACd,MAAMC,eAAeV,OAAuB;IAC5C,MAAMW,YAAYX,OAAuB;IACzC,MAAM,CAACY,gBAAgBC,kBAAkB,GAAGZ,SAAS;IACrD,MAAM,CAACa,WAAWC,aAAa,GAAGd,SAAS;IAE3C,MAAM,EAACe,OAAO,EAAC,GAAGlB,UAAU;QAC1BmB,WAAWP;IACb;IAEAb,oBAAoBmB,SAAS,UAAU,CAACE;QACtC,MAAMC,WAAWC,KAAKC,GAAG,CAACH,SAASV,eAAe;QAClDK,kBAAkBM;IACpB;IAEA,MAAMG,kBAAkBvB,YAAY,CAACwB;QACnCR,aAAaQ;QACb,IAAIb,aAAac,OAAO,EAAE;YACxBd,aAAac,OAAO,CAACC,QAAQ,CAAC;gBAACC,KAAK;gBAAGC,UAAU;YAAS;QAC5D;QACAd,kBAAkB;IACpB,GAAG,EAAE;IAEL,MAAMe,iBAAiBhB,kBAAkB;IAEzC,qBACE,MAACiB;QAAIC,WAAU;;0BACb,KAAC3B;gBAAaS,gBAAgBA;;0BAE9B,MAACiB;gBAAIE,KAAKrB;gBAAcoB,WAAU;;kCAChC,KAACD;wBAAIE,KAAKpB;kCACR,cAAA,KAACL;4BAAO0B,UAAUJ;;;kCAGpB,KAACC;wBAAIC,WAAU;kCACb,cAAA,KAACD;4BACCI,OAAO;gCACLC,aAAa,GAAG,AAAC,CAAA,IAAI,AAAC,CAAA,IAAItB,cAAa,KAAM,CAAA,IAAML,CAAAA,cAAc,CAAA,EAAG,EAAE,CAAC;4BACzE;sCAEA,cAAA,KAACF;gCAAQS,WAAWA;gCAAWqB,aAAab;;;;oBAI/CR,cAAc,6BAAe,KAACZ;oBAC9BY,cAAc,wBAAU,KAACV;;;;;AAIlC"}

package/dist/components/dashboard/dashboard.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dashboard } from './dashboard.js';
+const meta = {
+    title: 'Dashboard/Example',
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'fullscreen',
+        viewport: {
+            defaultViewport: 'extraLarge'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "h-screen w-full",
+            children: /*#__PURE__*/ _jsx(Dashboard, {})
+        })
+};
+
+//# sourceMappingURL=dashboard.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dashboard/dashboard.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Dashboard} from './dashboard';\n\nconst meta = {\n  title: 'Dashboard/Example',\n  tags: ['autodocs'],\n  parameters: {\n    layout: 'fullscreen',\n    viewport: {\n      defaultViewport: 'extraLarge',\n    },\n  },\n} satisfies Meta;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"h-screen w-full\">\n      <Dashboard />\n    </div>\n  ),\n};\n"],"names":["Dashboard","meta","title","tags","parameters","layout","viewport","defaultViewport","Default","render","div","className"],"mappings":";AACA,SAAQA,SAAS,QAAO,cAAc;AAEtC,MAAMC,OAAO;IACXC,OAAO;IACPC,MAAM;QAAC;KAAW;IAClBC,YAAY;QACVC,QAAQ;QACRC,UAAU;YACRC,iBAAiB;QACnB;IACF;AACF;AAEA,eAAeN,KAAK;AAIpB,OAAO,MAAMO,UAAiB;IAC5BC,QAAQ,kBACN,KAACC;YAAIC,WAAU;sBACb,cAAA,KAACX;;AAGP,EAAE"}

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

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

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

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

package/dist/components/dashboard/index.js

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

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

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

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { argosScreenshot } from '@argos-ci/storybook/vitest';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Button } from '../../components/button/index.js';
 import { Checkbox, CheckboxLabel, CheckboxLinks } from '../../components/checkbox/index.js';
@@ -89,7 +90,11 @@ function BasicFormExample() {
     });
 }
 export const Basic = {
-    render: ()=>/*#__PURE__*/ _jsx(BasicFormExample, {})
+    render: ()=>/*#__PURE__*/ _jsx(BasicFormExample, {}),
+    play: async (context)=>{
+        await new Promise((resolve)=>setTimeout(resolve, 100));
+        await argosScreenshot(context, 'Form Basic');
+    }
 };
 const componentsFormSchema = z.object({
     example: z.string().min(1, 'This field is required'),

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

@@ -1 +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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"}
+{"version":3,"sources":["../../../src/components/form/form.stories.tsx"],"sourcesContent":["import {argosScreenshot} from '@argos-ci/storybook/vitest';\nimport {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  play: async (context) => {\n    await new Promise((resolve) => setTimeout(resolve, 100));\n    await argosScreenshot(context, 'Form Basic');\n  },\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":["argosScreenshot","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","play","context","Promise","resolve","setTimeout","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/index.d.ts

@@ -2,9 +2,11 @@ export * from './alert';
 export * from './avatar';
 export * from './badge';
 export * from './button';
+export * from './button-group';
 export * from './calendar';
 export * from './checkbox';
 export * from './code-block';
+export * from './command';
 export * from './confetti';
 export * from './date-picker';
 export * from './date-time-range-picker';
@@ -16,11 +18,16 @@ export * from './icon';
 export * from './inline-tips';
 export * from './input';
 export * from './item';
+export * from './kbd';
 export * from './label';
 export * from './modal';
 export * from './moving-border';
 export * from './popover';
+export * from './search';
+export * from './select';
 export * from './shiny-text';
+export * from './skeleton';
+export * from './table';
 export * from './tabs';
 export * from './textarea';
 export * from './theme';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/dist/components/index.js

@@ -2,9 +2,11 @@ export * from './alert/index.js';
 export * from './avatar/index.js';
 export * from './badge/index.js';
 export * from './button/index.js';
+export * from './button-group/index.js';
 export * from './calendar/index.js';
 export * from './checkbox/index.js';
 export * from './code-block/index.js';
+export * from './command/index.js';
 export * from './confetti/index.js';
 export * from './date-picker/index.js';
 export * from './date-time-range-picker/index.js';
@@ -16,11 +18,16 @@ export * from './icon/index.js';
 export * from './inline-tips/index.js';
 export * from './input/index.js';
 export * from './item/index.js';
+export * from './kbd/index.js';
 export * from './label/index.js';
 export * from './modal/index.js';
 export * from './moving-border/index.js';
 export * from './popover/index.js';
+export * from './search/index.js';
+export * from './select/index.js';
 export * from './shiny-text/index.js';
+export * from './skeleton/index.js';
+export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './textarea/index.js';
 export * from './theme/index.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './alert';\nexport * from './avatar';\nexport * from './badge';\nexport * from './button';\nexport * from './calendar';\nexport * from './checkbox';\nexport * from './code-block';\nexport * from './confetti';\nexport * from './date-picker';\nexport * from './date-time-range-picker';\nexport * from './dot-grid';\nexport * from './dropdown-menu';\nexport * from './dynamic-item';\nexport * from './form';\nexport * from './icon';\nexport * from './inline-tips';\nexport * from './input';\nexport * from './item';\nexport * from './label';\nexport * from './modal';\nexport * from './moving-border';\nexport * from './popover';\nexport * from './shiny-text';\nexport * from './tabs';\nexport * from './textarea';\nexport * from './theme';\nexport * from './toast';\nexport * from './tooltip';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,aAAa;AAC3B,cAAc,eAAe;AAC7B,cAAc,aAAa;AAC3B,cAAc,gBAAgB;AAC9B,cAAc,2BAA2B;AACzC,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,iBAAiB;AAC/B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,kBAAkB;AAChC,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,eAAe"}
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './alert';\nexport * from './avatar';\nexport * from './badge';\nexport * from './button';\nexport * from './button-group';\nexport * from './calendar';\nexport * from './checkbox';\nexport * from './code-block';\nexport * from './command';\nexport * from './confetti';\nexport * from './date-picker';\nexport * from './date-time-range-picker';\nexport * from './dot-grid';\nexport * from './dropdown-menu';\nexport * from './dynamic-item';\nexport * from './form';\nexport * from './icon';\nexport * from './inline-tips';\nexport * from './input';\nexport * from './item';\nexport * from './kbd';\nexport * from './label';\nexport * from './modal';\nexport * from './moving-border';\nexport * from './popover';\nexport * from './search';\nexport * from './select';\nexport * from './shiny-text';\nexport * from './skeleton';\nexport * from './table';\nexport * from './tabs';\nexport * from './textarea';\nexport * from './theme';\nexport * from './toast';\nexport * from './tooltip';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,aAAa;AAC3B,cAAc,aAAa;AAC3B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,gBAAgB;AAC9B,cAAc,2BAA2B;AACzC,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,iBAAiB;AAC/B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,kBAAkB;AAChC,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,eAAe"}

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

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

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

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

package/dist/components/kbd/index.js

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

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

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

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react';
+type KbdProps = ComponentProps<'kbd'>;
+export declare function Kbd({ className, ...props }: KbdProps): import("react/jsx-runtime").JSX.Element;
+type KbdGroupProps = ComponentProps<'div'>;
+export declare function KbdGroup({ className, ...props }: KbdGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=kbd.d.ts.map

package/dist/components/kbd/kbd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../src/components/kbd/kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,KAAK,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEtC,wBAAgB,GAAG,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,QAAQ,2CAclD;AAED,KAAK,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3C,wBAAgB,QAAQ,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,2CAQ5D"}

package/dist/components/kbd/kbd.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+export function Kbd({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("kbd", {
+        "data-slot": "kbd",
+        className: cn('pointer-events-none inline-flex h-20 w-fit min-w-20 items-center justify-center gap-1 rounded-4 px-4 font-display text-xs font-medium select-none', 'bg-background-components-base text-foreground-neutral-subtle border border-border-neutral-base shadow-button-neutral', '[&_svg:not([class*="size-"])]:size-12', 'in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10', className),
+        ...props
+    });
+}
+export function KbdGroup({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "kbd-group",
+        className: cn('inline-flex items-center gap-4', className),
+        ...props
+    });
+}
+
+//# sourceMappingURL=kbd.js.map

package/dist/components/kbd/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/kbd/kbd.tsx"],"sourcesContent":["import type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\ntype KbdProps = ComponentProps<'kbd'>;\n\nexport function Kbd({className, ...props}: KbdProps) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        'pointer-events-none inline-flex h-20 w-fit min-w-20 items-center justify-center gap-1 rounded-4 px-4 font-display text-xs font-medium select-none',\n        'bg-background-components-base text-foreground-neutral-subtle border border-border-neutral-base shadow-button-neutral',\n        '[&_svg:not([class*=\"size-\"])]:size-12',\n        'in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype KbdGroupProps = ComponentProps<'div'>;\n\nexport function KbdGroup({className, ...props}: KbdGroupProps) {\n  return (\n    <div\n      data-slot=\"kbd-group\"\n      className={cn('inline-flex items-center gap-4', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["cn","Kbd","className","props","kbd","data-slot","KbdGroup","div"],"mappings":";AACA,SAAQA,EAAE,QAAO,WAAW;AAI5B,OAAO,SAASC,IAAI,EAACC,SAAS,EAAE,GAAGC,OAAgB;IACjD,qBACE,KAACC;QACCC,aAAU;QACVH,WAAWF,GACT,qJACA,wHACA,yCACA,uJACAE;QAED,GAAGC,KAAK;;AAGf;AAIA,OAAO,SAASG,SAAS,EAACJ,SAAS,EAAE,GAAGC,OAAqB;IAC3D,qBACE,KAACI;QACCF,aAAU;QACVH,WAAWF,GAAG,kCAAkCE;QAC/C,GAAGC,KAAK;;AAGf"}

package/dist/components/kbd/kbd.stories.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Kbd, KbdGroup } from './kbd.js';
+const meta = {
+    title: 'Components/Kbd',
+    component: Kbd,
+    tags: [
+        'autodocs'
+    ]
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-wrap gap-8",
+            children: [
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "Ctrl"
+                }),
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "Alt"
+                }),
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "Shift"
+                }),
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "⌘"
+                }),
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "⌥"
+                }),
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "⇧"
+                })
+            ]
+        })
+};
+export const KeyCombination = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-wrap items-center gap-12",
+            children: [
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "⌘K"
+                }),
+                /*#__PURE__*/ _jsxs(KbdGroup, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Kbd, {
+                            children: "Ctrl"
+                        }),
+                        /*#__PURE__*/ _jsx(Kbd, {
+                            children: "Shift"
+                        }),
+                        /*#__PURE__*/ _jsx(Kbd, {
+                            children: "P"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(KbdGroup, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Kbd, {
+                            children: "Alt"
+                        }),
+                        /*#__PURE__*/ _jsx(Kbd, {
+                            children: "Enter"
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const InMenu = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "max-w-400 rounded-10 border border-border-neutral-base p-8",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-4",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-sm text-foreground-neutral-subtle",
+                                children: "Copy"
+                            }),
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                children: "⌘C"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-sm text-foreground-neutral-subtle",
+                                children: "Paste"
+                            }),
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                children: "⌘V"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "h-px bg-border-neutral-base my-4"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-sm text-foreground-neutral-subtle",
+                                children: "Command Palette"
+                            }),
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                children: "⌘K"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+};
+
+//# sourceMappingURL=kbd.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/kbd/kbd.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Kbd, KbdGroup} from './kbd';\n\nconst meta = {\n  title: 'Components/Kbd',\n  component: Kbd,\n  tags: ['autodocs'],\n} satisfies Meta<typeof Kbd>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"flex flex-wrap gap-8\">\n      <Kbd>Ctrl</Kbd>\n      <Kbd>Alt</Kbd>\n      <Kbd>Shift</Kbd>\n      <Kbd>⌘</Kbd>\n      <Kbd>⌥</Kbd>\n      <Kbd>⇧</Kbd>\n    </div>\n  ),\n};\n\nexport const KeyCombination: Story = {\n  render: () => (\n    <div className=\"flex flex-wrap items-center gap-12\">\n      <Kbd>⌘K</Kbd>\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n      <KbdGroup>\n        <Kbd>Alt</Kbd>\n        <Kbd>Enter</Kbd>\n      </KbdGroup>\n    </div>\n  ),\n};\n\nexport const InMenu: Story = {\n  render: () => (\n    <div className=\"max-w-400 rounded-10 border border-border-neutral-base p-8\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors\">\n          <span className=\"text-sm text-foreground-neutral-subtle\">Copy</span>\n          <Kbd>⌘C</Kbd>\n        </div>\n        <div className=\"flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors\">\n          <span className=\"text-sm text-foreground-neutral-subtle\">Paste</span>\n          <Kbd>⌘V</Kbd>\n        </div>\n        <div className=\"h-px bg-border-neutral-base my-4\" />\n        <div className=\"flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors\">\n          <span className=\"text-sm text-foreground-neutral-subtle\">Command Palette</span>\n          <Kbd>⌘K</Kbd>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Kbd","KbdGroup","meta","title","component","tags","Default","render","div","className","KeyCombination","InMenu","span"],"mappings":";AACA,SAAQA,GAAG,EAAEC,QAAQ,QAAO,QAAQ;AAEpC,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWJ;IACXK,MAAM;QAAC;KAAW;AACpB;AAEA,eAAeH,KAAK;AAIpB,OAAO,MAAMI,UAAiB;IAC5BC,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACT;8BAAI;;8BACL,KAACA;8BAAI;;8BACL,KAACA;8BAAI;;8BACL,KAACA;8BAAI;;8BACL,KAACA;8BAAI;;8BACL,KAACA;8BAAI;;;;AAGX,EAAE;AAEF,OAAO,MAAMU,iBAAwB;IACnCH,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACT;8BAAI;;8BACL,MAACC;;sCACC,KAACD;sCAAI;;sCACL,KAACA;sCAAI;;sCACL,KAACA;sCAAI;;;;8BAEP,MAACC;;sCACC,KAACD;sCAAI;;sCACL,KAACA;sCAAI;;;;;;AAIb,EAAE;AAEF,OAAO,MAAMW,SAAgB;IAC3BJ,QAAQ,kBACN,KAACC;YAAIC,WAAU;sBACb,cAAA,MAACD;gBAAIC,WAAU;;kCACb,MAACD;wBAAIC,WAAU;;0CACb,KAACG;gCAAKH,WAAU;0CAAyC;;0CACzD,KAACT;0CAAI;;;;kCAEP,MAACQ;wBAAIC,WAAU;;0CACb,KAACG;gCAAKH,WAAU;0CAAyC;;0CACzD,KAACT;0CAAI;;;;kCAEP,KAACQ;wBAAIC,WAAU;;kCACf,MAACD;wBAAIC,WAAU;;0CACb,KAACG;gCAAKH,WAAU;0CAAyC;;0CACzD,KAACT;0CAAI;;;;;;;AAKf,EAAE"}

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

@@ -0,0 +1,7 @@
+export { Search, type SearchProps } from './search';
+export { useSearchContext } from './search-context';
+export { SearchInline, type SearchInlineProps } from './search-inline';
+export { SearchContent, type SearchContentProps, SearchEmpty, type SearchEmptyProps, SearchFooter, type SearchFooterProps, SearchGroup, type SearchGroupProps, SearchInput, type SearchInputProps, SearchItem, type SearchItemProps, SearchList, type SearchListProps, SearchSeparator, type SearchSeparatorProps, } from './search-modal';
+export { SearchTrigger, type SearchTriggerProps } from './search-trigger';
+export { searchDefaultTransition, searchInputVariants, searchTriggerVariants, } from './search-variants';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAC,YAAY,EAAE,KAAK,iBAAiB,EAAC,MAAM,iBAAiB,CAAC;AACrE,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,WAAW,EACX,KAAK,gBAAgB,EACrB,YAAY,EACZ,KAAK,iBAAiB,EACtB,WAAW,EACX,KAAK,gBAAgB,EACrB,WAAW,EACX,KAAK,gBAAgB,EACrB,UAAU,EACV,KAAK,eAAe,EACpB,UAAU,EACV,KAAK,eAAe,EACpB,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAC,aAAa,EAAE,KAAK,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAExE,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC"}

package/dist/components/search/index.js

@@ -0,0 +1,8 @@
+export { Search } from './search.js';
+export { useSearchContext } from './search-context.js';
+export { SearchInline } from './search-inline.js';
+export { SearchContent, SearchEmpty, SearchFooter, SearchGroup, SearchInput, SearchItem, SearchList, SearchSeparator } from './search-modal.js';
+export { SearchTrigger } from './search-trigger.js';
+export { searchDefaultTransition, searchInputVariants, searchTriggerVariants } from './search-variants.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/search/index.ts"],"sourcesContent":["export {Search, type SearchProps} from './search';\nexport {useSearchContext} from './search-context';\nexport {SearchInline, type SearchInlineProps} from './search-inline';\nexport {\n  SearchContent,\n  type SearchContentProps,\n  SearchEmpty,\n  type SearchEmptyProps,\n  SearchFooter,\n  type SearchFooterProps,\n  SearchGroup,\n  type SearchGroupProps,\n  SearchInput,\n  type SearchInputProps,\n  SearchItem,\n  type SearchItemProps,\n  SearchList,\n  type SearchListProps,\n  SearchSeparator,\n  type SearchSeparatorProps,\n} from './search-modal';\nexport {SearchTrigger, type SearchTriggerProps} from './search-trigger';\n\nexport {\n  searchDefaultTransition,\n  searchInputVariants,\n  searchTriggerVariants,\n} from './search-variants';\n"],"names":["Search","useSearchContext","SearchInline","SearchContent","SearchEmpty","SearchFooter","SearchGroup","SearchInput","SearchItem","SearchList","SearchSeparator","SearchTrigger","searchDefaultTransition","searchInputVariants","searchTriggerVariants"],"mappings":"AAAA,SAAQA,MAAM,QAAyB,WAAW;AAClD,SAAQC,gBAAgB,QAAO,mBAAmB;AAClD,SAAQC,YAAY,QAA+B,kBAAkB;AACrE,SACEC,aAAa,EAEbC,WAAW,EAEXC,YAAY,EAEZC,WAAW,EAEXC,WAAW,EAEXC,UAAU,EAEVC,UAAU,EAEVC,eAAe,QAEV,iBAAiB;AACxB,SAAQC,aAAa,QAAgC,mBAAmB;AAExE,SACEC,uBAAuB,EACvBC,mBAAmB,EACnBC,qBAAqB,QAChB,oBAAoB"}

package/dist/components/search/search-context.d.ts

@@ -0,0 +1,11 @@
+export type SearchContextValue = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    searchValue: string;
+    setSearchValue: (value: string) => void;
+};
+export declare const SearchContext: import("react").Context<SearchContextValue | null>;
+export declare function useSearchContext(): SearchContextValue;
+export declare function useControllableState<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (value: T) => void];
+export declare function useKeyboardShortcut(shortcutKey: string | undefined, onTrigger: () => void): void;
+//# sourceMappingURL=search-context.d.ts.map

package/dist/components/search/search-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-context.d.ts","sourceRoot":"","sources":["../../../src/components/search/search-context.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,aAAa,oDAAiD,CAAC;AAE5E,wBAAgB,gBAAgB,uBAM/B;AAED,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,eAAe,EAAE,CAAC,GAAG,SAAS,EAC9B,YAAY,EAAE,CAAC,EACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAC5B,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAgBzB;AAED,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM,IAAI,QAmCzF"}

package/dist/components/search/search-context.js

@@ -0,0 +1,56 @@
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { SHORTCUT_KEY_REGEX } from './search-variants.js';
+export const SearchContext = /*#__PURE__*/ createContext(null);
+export function useSearchContext() {
+    const context = useContext(SearchContext);
+    if (!context) {
+        throw new Error('Search components must be used within a Search component');
+    }
+    return context;
+}
+export function useControllableState(controlledValue, defaultValue, onChange) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    const setValue = useCallback((newValue)=>{
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+    }, [
+        isControlled,
+        onChange
+    ]);
+    return [
+        value,
+        setValue
+    ];
+}
+export function useKeyboardShortcut(shortcutKey, onTrigger) {
+    useEffect(()=>{
+        if (!shortcutKey) return;
+        const handleKeyDown = (e)=>{
+            const key = shortcutKey.toLowerCase();
+            const isMetaKey = key.startsWith('meta+') || key.startsWith('cmd+') || key.startsWith('⌘');
+            const isCtrlKey = key.startsWith('ctrl+');
+            const targetKey = key.replace(SHORTCUT_KEY_REGEX, '');
+            const shouldTrigger = isMetaKey && e.metaKey && e.key.toLowerCase() === targetKey || isCtrlKey && e.ctrlKey && e.key.toLowerCase() === targetKey || !isMetaKey && !isCtrlKey && e.key.toLowerCase() === targetKey && !e.metaKey && !e.ctrlKey;
+            if (!shouldTrigger) return;
+            if (!isMetaKey && !isCtrlKey) {
+                const target = e.target;
+                if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+                    return;
+                }
+            }
+            e.preventDefault();
+            onTrigger();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
+    }, [
+        shortcutKey,
+        onTrigger
+    ]);
+}
+
+//# sourceMappingURL=search-context.js.map

package/dist/components/search/search-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/search/search-context.tsx"],"sourcesContent":["import {createContext, useCallback, useContext, useEffect, useState} from 'react';\nimport {SHORTCUT_KEY_REGEX} from './search-variants';\n\nexport type SearchContextValue = {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  searchValue: string;\n  setSearchValue: (value: string) => void;\n};\n\nexport const SearchContext = createContext<SearchContextValue | null>(null);\n\nexport function useSearchContext() {\n  const context = useContext(SearchContext);\n  if (!context) {\n    throw new Error('Search components must be used within a Search component');\n  }\n  return context;\n}\n\nexport function useControllableState<T>(\n  controlledValue: T | undefined,\n  defaultValue: T,\n  onChange?: (value: T) => void,\n): [T, (value: T) => void] {\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n\n  const setValue = useCallback(\n    (newValue: T) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onChange?.(newValue);\n    },\n    [isControlled, onChange],\n  );\n\n  return [value, setValue];\n}\n\nexport function useKeyboardShortcut(shortcutKey: string | undefined, onTrigger: () => void) {\n  useEffect(() => {\n    if (!shortcutKey) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const key = shortcutKey.toLowerCase();\n      const isMetaKey = key.startsWith('meta+') || key.startsWith('cmd+') || key.startsWith('⌘');\n      const isCtrlKey = key.startsWith('ctrl+');\n      const targetKey = key.replace(SHORTCUT_KEY_REGEX, '');\n\n      const shouldTrigger =\n        (isMetaKey && e.metaKey && e.key.toLowerCase() === targetKey) ||\n        (isCtrlKey && e.ctrlKey && e.key.toLowerCase() === targetKey) ||\n        (!isMetaKey && !isCtrlKey && e.key.toLowerCase() === targetKey && !e.metaKey && !e.ctrlKey);\n\n      if (!shouldTrigger) return;\n\n      if (!isMetaKey && !isCtrlKey) {\n        const target = e.target as HTMLElement;\n        if (\n          target.tagName === 'INPUT' ||\n          target.tagName === 'TEXTAREA' ||\n          target.isContentEditable\n        ) {\n          return;\n        }\n      }\n\n      e.preventDefault();\n      onTrigger();\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [shortcutKey, onTrigger]);\n}\n"],"names":["createContext","useCallback","useContext","useEffect","useState","SHORTCUT_KEY_REGEX","SearchContext","useSearchContext","context","Error","useControllableState","controlledValue","defaultValue","onChange","internalValue","setInternalValue","isControlled","undefined","value","setValue","newValue","useKeyboardShortcut","shortcutKey","onTrigger","handleKeyDown","e","key","toLowerCase","isMetaKey","startsWith","isCtrlKey","targetKey","replace","shouldTrigger","metaKey","ctrlKey","target","tagName","isContentEditable","preventDefault","document","addEventListener","removeEventListener"],"mappings":"AAAA,SAAQA,aAAa,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAClF,SAAQC,kBAAkB,QAAO,oBAAoB;AASrD,OAAO,MAAMC,8BAAgBN,cAAyC,MAAM;AAE5E,OAAO,SAASO;IACd,MAAMC,UAAUN,WAAWI;IAC3B,IAAI,CAACE,SAAS;QACZ,MAAM,IAAIC,MAAM;IAClB;IACA,OAAOD;AACT;AAEA,OAAO,SAASE,qBACdC,eAA8B,EAC9BC,YAAe,EACfC,QAA6B;IAE7B,MAAM,CAACC,eAAeC,iBAAiB,GAAGX,SAASQ;IACnD,MAAMI,eAAeL,oBAAoBM;IACzC,MAAMC,QAAQF,eAAeL,kBAAkBG;IAE/C,MAAMK,WAAWlB,YACf,CAACmB;QACC,IAAI,CAACJ,cAAc;YACjBD,iBAAiBK;QACnB;QACAP,WAAWO;IACb,GACA;QAACJ;QAAcH;KAAS;IAG1B,OAAO;QAACK;QAAOC;KAAS;AAC1B;AAEA,OAAO,SAASE,oBAAoBC,WAA+B,EAAEC,SAAqB;IACxFpB,UAAU;QACR,IAAI,CAACmB,aAAa;QAElB,MAAME,gBAAgB,CAACC;YACrB,MAAMC,MAAMJ,YAAYK,WAAW;YACnC,MAAMC,YAAYF,IAAIG,UAAU,CAAC,YAAYH,IAAIG,UAAU,CAAC,WAAWH,IAAIG,UAAU,CAAC;YACtF,MAAMC,YAAYJ,IAAIG,UAAU,CAAC;YACjC,MAAME,YAAYL,IAAIM,OAAO,CAAC3B,oBAAoB;YAElD,MAAM4B,gBACJ,AAACL,aAAaH,EAAES,OAAO,IAAIT,EAAEC,GAAG,CAACC,WAAW,OAAOI,aAClDD,aAAaL,EAAEU,OAAO,IAAIV,EAAEC,GAAG,CAACC,WAAW,OAAOI,aAClD,CAACH,aAAa,CAACE,aAAaL,EAAEC,GAAG,CAACC,WAAW,OAAOI,aAAa,CAACN,EAAES,OAAO,IAAI,CAACT,EAAEU,OAAO;YAE5F,IAAI,CAACF,eAAe;YAEpB,IAAI,CAACL,aAAa,CAACE,WAAW;gBAC5B,MAAMM,SAASX,EAAEW,MAAM;gBACvB,IACEA,OAAOC,OAAO,KAAK,WACnBD,OAAOC,OAAO,KAAK,cACnBD,OAAOE,iBAAiB,EACxB;oBACA;gBACF;YACF;YAEAb,EAAEc,cAAc;YAChBhB;QACF;QAEAiB,SAASC,gBAAgB,CAAC,WAAWjB;QACrC,OAAO,IAAMgB,SAASE,mBAAmB,CAAC,WAAWlB;IACvD,GAAG;QAACF;QAAaC;KAAU;AAC7B"}

package/dist/components/search/search-inline.d.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+import { searchInputVariants } from './search-variants';
+export type SearchInlineProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof searchInputVariants> & {
+    showClearButton?: boolean;
+    onClear?: () => void;
+};
+export declare function SearchInline({ className, variant, size, radius, value, onChange, onClear, showClearButton, ...props }: SearchInlineProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search-inline.d.ts.map

package/dist/components/search/search-inline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-inline.d.ts","sourceRoot":"","sources":["../../../src/components/search/search-inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAC3D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GACnE,YAAY,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEJ,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAmFnB"}