@k3-universe/react-kit 0.0.41 → 0.0.42

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

@@ -1,43 +1,43 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardContent,
-} from '../../../shadcn/ui/hover-card';
-import { Avatar, AvatarFallback, AvatarImage } from '../../../shadcn/ui/avatar';
-import { Button } from '../../../shadcn/ui/button';
-
-const meta: Meta<typeof HoverCard> = {
-  title: 'Shadcn/UI/HoverCard',
-  component: HoverCard,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof HoverCard>;
-
-export const Basic: Story = {
-  render: () => (
-    <HoverCard>
-      <HoverCardTrigger asChild>
-        <Button variant="link" className="px-0">
-          @shadcn
-        </Button>
-      </HoverCardTrigger>
-      <HoverCardContent className="w-80">
-        <div className="flex space-x-4">
-          <Avatar>
-            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-            <AvatarFallback>SC</AvatarFallback>
-          </Avatar>
-          <div className="space-y-1">
-            <h4 className="text-sm font-semibold">shadcn</h4>
-            <p className="text-sm text-muted-foreground">
-              Creator of shadcn/ui. Building beautiful, accessible components.
-            </p>
-          </div>
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+} from '../../../shadcn/ui/hover-card';
+import { Avatar, AvatarFallback, AvatarImage } from '../../../shadcn/ui/avatar';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof HoverCard> = {
+  title: 'Shadcn/UI/HoverCard',
+  component: HoverCard,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HoverCard>;
+
+export const Basic: Story = {
+  render: () => (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="link" className="px-0">
+          @shadcn
+        </Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex space-x-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>SC</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">shadcn</h4>
+            <p className="text-sm text-muted-foreground">
+              Creator of shadcn/ui. Building beautiful, accessible components.
+            </p>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+};

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

@@ -1,41 +1,41 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Input } from '../../../shadcn/ui/input';
-import { Label } from '../../../shadcn/ui/label';
-
-const meta: Meta<typeof Input> = {
-  title: 'Shadcn/UI/Input',
-  component: Input,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Input>;
-
-export const Basic: Story = {
-  render: () => (
-    <div className="grid w-full max-w-sm items-center gap-2">
-      <Label htmlFor="email">Email</Label>
-      <Input id="email" type="email" placeholder="m@example.com" />
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="grid w-full max-w-sm items-center gap-2">
-      <Label htmlFor="disabled">Disabled</Label>
-      <Input id="disabled" placeholder="Can't type here" disabled />
-    </div>
-  ),
-};
-
-export const WithIcon: Story = {
-  render: () => (
-    <div className="relative w-[280px]">
-      <span className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground">
-        @
-      </span>
-      <Input className="pl-8" placeholder="username" />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from '../../../shadcn/ui/input';
+import { Label } from '../../../shadcn/ui/label';
+
+const meta: Meta<typeof Input> = {
+  title: 'Shadcn/UI/Input',
+  component: Input,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-2">
+      <Label htmlFor="email">Email</Label>
+      <Input id="email" type="email" placeholder="m@example.com" />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-2">
+      <Label htmlFor="disabled">Disabled</Label>
+      <Input id="disabled" placeholder="Can't type here" disabled />
+    </div>
+  ),
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <div className="relative w-[280px]">
+      <span className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground">
+        @
+      </span>
+      <Input className="pl-8" placeholder="username" />
+    </div>
+  ),
+};

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

@@ -1,39 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-  InputOTPSeparator,
-} from '../../../shadcn/ui/input-otp';
-
-const meta: Meta<typeof InputOTP> = {
-  title: 'Shadcn/UI/InputOTP',
-  component: InputOTP,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof InputOTP>;
-
-export const Basic: Story = {
-  render: () => (
-    <div className="space-y-2">
-      <p className="text-sm text-muted-foreground">
-        Enter the 6-digit code we emailed you.
-      </p>
-      <InputOTP maxLength={6} aria-label="One-time password input">
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+} from '../../../shadcn/ui/input-otp';
+
+const meta: Meta<typeof InputOTP> = {
+  title: 'Shadcn/UI/InputOTP',
+  component: InputOTP,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputOTP>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground">
+        Enter the 6-digit code we emailed you.
+      </p>
+      <InputOTP maxLength={6} aria-label="One-time password input">
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </div>
+  ),
+};

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

@@ -1,29 +1,29 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Label } from '../../../shadcn/ui/label';
-import { Input } from '../../../shadcn/ui/input';
-
-const meta: Meta<typeof Label> = {
-  title: 'Shadcn/UI/Label',
-  component: Label,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Label>;
-
-export const Basic: Story = {
-  render: () => (
-    <div className="grid gap-3 w-[320px]">
-      <div className="grid gap-1.5">
-        <Label htmlFor="email">Email</Label>
-        <Input id="email" type="email" placeholder="you@example.com" />
-      </div>
-      <div className="grid gap-1.5">
-        <Label htmlFor="disabled" className="group" data-disabled>
-          Disabled input
-        </Label>
-        <Input id="disabled" placeholder="Disabled" disabled />
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from '../../../shadcn/ui/label';
+import { Input } from '../../../shadcn/ui/input';
+
+const meta: Meta<typeof Label> = {
+  title: 'Shadcn/UI/Label',
+  component: Label,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="grid gap-3 w-[320px]">
+      <div className="grid gap-1.5">
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" placeholder="you@example.com" />
+      </div>
+      <div className="grid gap-1.5">
+        <Label htmlFor="disabled" className="group" data-disabled>
+          Disabled input
+        </Label>
+        <Input id="disabled" placeholder="Disabled" disabled />
+      </div>
+    </div>
+  ),
+};

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

@@ -1,87 +1,87 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarLabel,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-} from '../../../shadcn/ui/menubar';
-
-const meta: Meta<typeof Menubar> = {
-  title: 'Shadcn/UI/Menubar',
-  component: Menubar,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Menubar>;
-
-export const Basic: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            New Window <MenubarShortcut>⌘N</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>Share</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>Email link</MenubarItem>
-              <MenubarItem>Messages</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarSeparator />
-          <MenubarItem>
-            Close Window <MenubarShortcut>⌘W</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Edit</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarCheckboxItem checked>Show Ruler</MenubarCheckboxItem>
-          <MenubarCheckboxItem>Show Toolbar</MenubarCheckboxItem>
-          <MenubarSeparator />
-          <MenubarLabel>Zoom</MenubarLabel>
-          <MenubarRadioGroup value="fit">
-            <MenubarRadioItem value="fit">Fit</MenubarRadioItem>
-            <MenubarRadioItem value="fill">Fill</MenubarRadioItem>
-          </MenubarRadioGroup>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>View</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            Reload <MenubarShortcut>⌘R</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Toggle Full Screen <MenubarShortcut>⌃⌘F</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarLabel,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+} from '../../../shadcn/ui/menubar';
+
+const meta: Meta<typeof Menubar> = {
+  title: 'Shadcn/UI/Menubar',
+  component: Menubar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Menubar>;
+
+export const Basic: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Close Window <MenubarShortcut>⌘W</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarCheckboxItem checked>Show Ruler</MenubarCheckboxItem>
+          <MenubarCheckboxItem>Show Toolbar</MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarLabel>Zoom</MenubarLabel>
+          <MenubarRadioGroup value="fit">
+            <MenubarRadioItem value="fit">Fit</MenubarRadioItem>
+            <MenubarRadioItem value="fill">Fill</MenubarRadioItem>
+          </MenubarRadioGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Toggle Full Screen <MenubarShortcut>⌃⌘F</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+};

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

@@ -1,78 +1,78 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuTrigger,
-  NavigationMenuContent,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-} from '../../../shadcn/ui/navigation-menu';
-
-const meta: Meta<typeof NavigationMenu> = {
-  title: 'Shadcn/UI/NavigationMenu',
-  component: NavigationMenu,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof NavigationMenu>;
-
-export const Basic: Story = {
-  render: () => (
-    <NavigationMenu>
-      <NavigationMenuList>
-        <NavigationMenuItem>
-          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
-          <NavigationMenuContent>
-            <div className="grid w-[400px] gap-3 p-3 md:w-[500px] md:grid-cols-2">
-              <NavigationMenuLink asChild>
-                <a
-                  className="rounded-md border p-3"
-                  href="https://example.com/analytics"
-                >
-                  Analytics
-                </a>
-              </NavigationMenuLink>
-              <NavigationMenuLink asChild>
-                <a
-                  className="rounded-md border p-3"
-                  href="https://example.com/engagement"
-                >
-                  Engagement
-                </a>
-              </NavigationMenuLink>
-              <NavigationMenuLink asChild>
-                <a
-                  className="rounded-md border p-3"
-                  href="https://example.com/security"
-                >
-                  Security
-                </a>
-              </NavigationMenuLink>
-              <NavigationMenuLink asChild>
-                <a
-                  className="rounded-md border p-3"
-                  href="https://example.com/integrations"
-                >
-                  Integrations
-                </a>
-              </NavigationMenuLink>
-            </div>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-        <NavigationMenuItem>
-          <NavigationMenuLink
-            href="https://example.com/pricing"
-            className="rounded-md px-4 py-2"
-          >
-            Pricing
-          </NavigationMenuLink>
-        </NavigationMenuItem>
-      </NavigationMenuList>
-      <NavigationMenuIndicator />
-      <NavigationMenuViewport />
-    </NavigationMenu>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+} from '../../../shadcn/ui/navigation-menu';
+
+const meta: Meta<typeof NavigationMenu> = {
+  title: 'Shadcn/UI/NavigationMenu',
+  component: NavigationMenu,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NavigationMenu>;
+
+export const Basic: Story = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="grid w-[400px] gap-3 p-3 md:w-[500px] md:grid-cols-2">
+              <NavigationMenuLink asChild>
+                <a
+                  className="rounded-md border p-3"
+                  href="https://example.com/analytics"
+                >
+                  Analytics
+                </a>
+              </NavigationMenuLink>
+              <NavigationMenuLink asChild>
+                <a
+                  className="rounded-md border p-3"
+                  href="https://example.com/engagement"
+                >
+                  Engagement
+                </a>
+              </NavigationMenuLink>
+              <NavigationMenuLink asChild>
+                <a
+                  className="rounded-md border p-3"
+                  href="https://example.com/security"
+                >
+                  Security
+                </a>
+              </NavigationMenuLink>
+              <NavigationMenuLink asChild>
+                <a
+                  className="rounded-md border p-3"
+                  href="https://example.com/integrations"
+                >
+                  Integrations
+                </a>
+              </NavigationMenuLink>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink
+            href="https://example.com/pricing"
+            className="rounded-md px-4 py-2"
+          >
+            Pricing
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+      <NavigationMenuIndicator />
+      <NavigationMenuViewport />
+    </NavigationMenu>
+  ),
+};