@k3-universe/react-kit 0.0.41 → 0.0.42

package/src/stories/shadcn/ui/ContextMenu.stories.tsx

@@ -1,67 +1,67 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubTrigger,
-  ContextMenuSubContent,
-} from '../../../shadcn/ui/context-menu';
-
-const meta: Meta<typeof ContextMenu> = {
-  title: 'Shadcn/UI/ContextMenu',
-  component: ContextMenu,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ContextMenu>;
-
-export const Basic: Story = {
-  render: () => (
-    <ContextMenu>
-      <ContextMenuTrigger asChild>
-        <div className="flex h-40 w-full max-w-md items-center justify-center rounded-md border text-muted-foreground">
-          Right-click here
-        </div>
-      </ContextMenuTrigger>
-      <ContextMenuContent className="w-64">
-        <ContextMenuItem>
-          Back <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuItem disabled>
-          Forward <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuItem>
-          Reload <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuSub>
-          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
-          <ContextMenuSubContent>
-            <ContextMenuItem>Save Page As…</ContextMenuItem>
-            <ContextMenuItem>Create Shortcut…</ContextMenuItem>
-          </ContextMenuSubContent>
-        </ContextMenuSub>
-        <ContextMenuSeparator />
-        <ContextMenuLabel>Appearance</ContextMenuLabel>
-        <ContextMenuCheckboxItem checked>
-          Always Show Bookmarks Bar
-        </ContextMenuCheckboxItem>
-        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-        <ContextMenuSeparator />
-        <ContextMenuLabel>Search Engine</ContextMenuLabel>
-        <ContextMenuRadioGroup value="google">
-          <ContextMenuRadioItem value="google">Google</ContextMenuRadioItem>
-          <ContextMenuRadioItem value="bing">Bing</ContextMenuRadioItem>
-        </ContextMenuRadioGroup>
-      </ContextMenuContent>
-    </ContextMenu>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+} from '../../../shadcn/ui/context-menu';
+
+const meta: Meta<typeof ContextMenu> = {
+  title: 'Shadcn/UI/ContextMenu',
+  component: ContextMenu,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ContextMenu>;
+
+export const Basic: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="flex h-40 w-full max-w-md items-center justify-center rounded-md border text-muted-foreground">
+          Right-click here
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem>
+          Back <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem disabled>
+          Forward <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          Reload <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent>
+            <ContextMenuItem>Save Page As…</ContextMenuItem>
+            <ContextMenuItem>Create Shortcut…</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuLabel>Appearance</ContextMenuLabel>
+        <ContextMenuCheckboxItem checked>
+          Always Show Bookmarks Bar
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuLabel>Search Engine</ContextMenuLabel>
+        <ContextMenuRadioGroup value="google">
+          <ContextMenuRadioItem value="google">Google</ContextMenuRadioItem>
+          <ContextMenuRadioItem value="bing">Bing</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};

package/src/stories/shadcn/ui/Dialog.stories.tsx

@@ -1,45 +1,45 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from '../../../shadcn/ui/dialog';
-import { Button } from '../../../shadcn/ui/button';
-
-const meta: Meta<typeof Dialog> = {
-  title: 'Shadcn/UI/Dialog',
-  component: Dialog,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Dialog>;
-
-export const Basic: Story = {
-  render: () => (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="default">Open dialog</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
-          <DialogDescription>
-            Make changes to your profile here. Click save when you're done.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="py-2 text-sm text-muted-foreground">
-          Dialog body content...
-        </div>
-        <DialogFooter>
-          <Button variant="outline">Cancel</Button>
-          <Button>Save changes</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '../../../shadcn/ui/dialog';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Shadcn/UI/Dialog',
+  component: Dialog,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+export const Basic: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="default">Open dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-2 text-sm text-muted-foreground">
+          Dialog body content...
+        </div>
+        <DialogFooter>
+          <Button variant="outline">Cancel</Button>
+          <Button>Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};

package/src/stories/shadcn/ui/Drawer.stories.tsx

@@ -1,49 +1,49 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  Drawer,
-  DrawerTrigger,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerClose,
-} from '../../../shadcn/ui/drawer';
-import { Button } from '../../../shadcn/ui/button';
-
-const meta: Meta<typeof Drawer> = {
-  title: 'Shadcn/UI/Drawer',
-  component: Drawer,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Drawer>;
-
-export const Basic: Story = {
-  render: () => (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button>Open Drawer</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Edit profile</DrawerTitle>
-          <DrawerDescription>
-            Make changes to your profile here. Click save when you're done.
-          </DrawerDescription>
-        </DrawerHeader>
-        <div className="px-4 pb-4 text-sm text-muted-foreground">
-          This is a bottom sheet drawer powered by <code>vaul</code> with shadcn
-          styles.
-        </div>
-        <DrawerFooter>
-          <Button type="button">Save changes</Button>
-          <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from '../../../shadcn/ui/drawer';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Shadcn/UI/Drawer',
+  component: Drawer,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+export const Basic: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Edit profile</DrawerTitle>
+          <DrawerDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="px-4 pb-4 text-sm text-muted-foreground">
+          This is a bottom sheet drawer powered by <code>vaul</code> with shadcn
+          styles.
+        </div>
+        <DrawerFooter>
+          <Button type="button">Save changes</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};

package/src/stories/shadcn/ui/DropdownMenu.stories.tsx

@@ -1,75 +1,75 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-} from '../../../shadcn/ui/dropdown-menu';
-import { Button } from '../../../shadcn/ui/button';
-
-const meta: Meta<typeof DropdownMenu> = {
-  title: 'Shadcn/UI/DropdownMenu',
-  component: DropdownMenu,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DropdownMenu>;
-
-export const Basic: Story = {
-  render: () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open menu</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Billing <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Settings <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuCheckboxItem checked>
-          Email notifications
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem>SMS notifications</DropdownMenuCheckboxItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuLabel>Team</DropdownMenuLabel>
-        <DropdownMenuRadioGroup value="a">
-          <DropdownMenuRadioItem value="a">Team A</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="b">Team B</DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>
-          <DropdownMenuSubContent>
-            <DropdownMenuItem>Invite user</DropdownMenuItem>
-            <DropdownMenuItem>New project</DropdownMenuItem>
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          Log out <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from '../../../shadcn/ui/dropdown-menu';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'Shadcn/UI/DropdownMenu',
+  component: DropdownMenu,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Basic: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Billing <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Settings <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem checked>
+          Email notifications
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem>SMS notifications</DropdownMenuCheckboxItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Team</DropdownMenuLabel>
+        <DropdownMenuRadioGroup value="a">
+          <DropdownMenuRadioItem value="a">Team A</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="b">Team B</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>Invite user</DropdownMenuItem>
+            <DropdownMenuItem>New project</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          Log out <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};

package/src/stories/shadcn/ui/Form.stories.tsx

@@ -1,93 +1,93 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Form } from '../../../shadcn/ui/form';
-
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import {
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-} from '../../../shadcn/ui/form';
-import { Input } from '../../../shadcn/ui/input';
-import { Button } from '../../../shadcn/ui/button';
-import { toast } from 'sonner';
-
-const meta: Meta<typeof Form> = {
-  title: 'Shadcn/UI/Form',
-  component: Form,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Form>;
-
-function ValidatedFormDemo() {
-  const schema = z.object({
-    email: z.string().email('Please enter a valid email'),
-    password: z.string().min(6, 'Password must be at least 6 characters'),
-  });
-
-  type FormValues = z.infer<typeof schema>;
-
-  const form = useForm<FormValues>({
-    resolver: zodResolver(schema),
-    defaultValues: { email: '', password: '' },
-    mode: 'onTouched',
-  });
-
-  function onSubmit(values: FormValues) {
-    // For demo purposes in Storybook
-    toast.success(`Submitted: ${JSON.stringify(values, null, 2)}`);
-  }
-
-  return (
-    <div className="max-w-md space-y-6">
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Email</FormLabel>
-                <FormControl>
-                  <Input
-                    type="email"
-                    placeholder="you@example.com"
-                    {...field}
-                  />
-                </FormControl>
-                <FormDescription>We’ll never share your email.</FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="password"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Password</FormLabel>
-                <FormControl>
-                  <Input type="password" placeholder="••••••••" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button type="submit" className="w-full">
-            Sign in
-          </Button>
-        </form>
-      </Form>
-    </div>
-  );
-}
-
-export const WithValidation: Story = {
-  render: () => <ValidatedFormDemo />,
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Form } from '../../../shadcn/ui/form';
+
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from '../../../shadcn/ui/form';
+import { Input } from '../../../shadcn/ui/input';
+import { Button } from '../../../shadcn/ui/button';
+import { toast } from 'sonner';
+
+const meta: Meta<typeof Form> = {
+  title: 'Shadcn/UI/Form',
+  component: Form,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Form>;
+
+function ValidatedFormDemo() {
+  const schema = z.object({
+    email: z.string().email('Please enter a valid email'),
+    password: z.string().min(6, 'Password must be at least 6 characters'),
+  });
+
+  type FormValues = z.infer<typeof schema>;
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { email: '', password: '' },
+    mode: 'onTouched',
+  });
+
+  function onSubmit(values: FormValues) {
+    // For demo purposes in Storybook
+    toast.success(`Submitted: ${JSON.stringify(values, null, 2)}`);
+  }
+
+  return (
+    <div className="max-w-md space-y-6">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder="you@example.com"
+                    {...field}
+                  />
+                </FormControl>
+                <FormDescription>We’ll never share your email.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input type="password" placeholder="••••••••" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit" className="w-full">
+            Sign in
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+export const WithValidation: Story = {
+  render: () => <ValidatedFormDemo />,
+};