@neynar/ui 0.2.0 → 0.3.0

package/src/components/ui/stories/kbd.stories.tsx

@@ -0,0 +1,462 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Command,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  CornerDownLeft,
+} from "lucide-react";
+import { Kbd, KbdGroup } from "../kbd";
+
+const meta = {
+  title: "Form & Input/Kbd",
+  component: Kbd,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A keyboard key component for displaying keyboard shortcuts and key combinations. Supports single keys and grouped key combinations.",
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+  },
+} satisfies Meta<typeof Kbd>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with kbd properties.
+ */
+export const Interactive: Story = {
+  render: (args) => <Kbd {...args}>⌘K</Kbd>,
+};
+
+/**
+ * Showcase of all available kbd variants and combinations.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-12 w-full max-w-2xl">
+      {/* Single Keys */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Single Keys
+        </h3>
+        <div className="flex flex-wrap gap-2">
+          <Kbd>A</Kbd>
+          <Kbd>B</Kbd>
+          <Kbd>1</Kbd>
+          <Kbd>2</Kbd>
+          <Kbd>Enter</Kbd>
+          <Kbd>Esc</Kbd>
+          <Kbd>Tab</Kbd>
+          <Kbd>Space</Kbd>
+          <Kbd>Del</Kbd>
+        </div>
+      </div>
+
+      {/* Modifier Keys */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Modifier Keys
+        </h3>
+        <div className="flex flex-wrap gap-2">
+          <Kbd>⌘</Kbd>
+          <Kbd>⌥</Kbd>
+          <Kbd>⇧</Kbd>
+          <Kbd>⌃</Kbd>
+          <Kbd>Ctrl</Kbd>
+          <Kbd>Alt</Kbd>
+          <Kbd>Shift</Kbd>
+          <Kbd>Cmd</Kbd>
+        </div>
+      </div>
+
+      {/* With Icons */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Icons
+        </h3>
+        <div className="flex flex-wrap gap-2">
+          <Kbd>
+            <Command className="size-3" />
+          </Kbd>
+          <Kbd>
+            <ArrowUp className="size-3" />
+          </Kbd>
+          <Kbd>
+            <ArrowDown className="size-3" />
+          </Kbd>
+          <Kbd>
+            <ArrowLeft className="size-3" />
+          </Kbd>
+          <Kbd>
+            <ArrowRight className="size-3" />
+          </Kbd>
+          <Kbd>
+            <CornerDownLeft className="size-3" />
+          </Kbd>
+        </div>
+      </div>
+
+      {/* Key Combinations */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Key Combinations
+        </h3>
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Search:</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>K</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Save:</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>S</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Copy:</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>C</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Paste:</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>V</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Undo:</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>Z</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Redo:</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>⇧</Kbd>
+              <Kbd>Z</Kbd>
+            </KbdGroup>
+          </div>
+        </div>
+      </div>
+
+      {/* Windows/Linux Shortcuts */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Windows/Linux Shortcuts
+        </h3>
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Search:</span>
+            <KbdGroup>
+              <Kbd>Ctrl</Kbd>
+              <Kbd>K</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Save:</span>
+            <KbdGroup>
+              <Kbd>Ctrl</Kbd>
+              <Kbd>S</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Select All:</span>
+            <KbdGroup>
+              <Kbd>Ctrl</Kbd>
+              <Kbd>A</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Find:</span>
+            <KbdGroup>
+              <Kbd>Ctrl</Kbd>
+              <Kbd>F</Kbd>
+            </KbdGroup>
+          </div>
+        </div>
+      </div>
+
+      {/* Multiple Keys */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Complex Combinations
+        </h3>
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Force Quit:</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>⌥</Kbd>
+              <Kbd>Esc</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Screenshot:</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>⇧</Kbd>
+              <Kbd>4</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm w-32">Task Manager:</span>
+            <KbdGroup>
+              <Kbd>Ctrl</Kbd>
+              <Kbd>Shift</Kbd>
+              <Kbd>Esc</Kbd>
+            </KbdGroup>
+          </div>
+        </div>
+      </div>
+
+      {/* In Different Contexts */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Different Sizes
+        </h3>
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <span className="text-xs">Small:</span>
+            <Kbd className="h-4 min-w-4 text-[10px]">⌘K</Kbd>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm">Default:</span>
+            <Kbd>⌘K</Kbd>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-base">Large:</span>
+            <Kbd className="h-6 min-w-6 text-sm">⌘K</Kbd>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Complete showcase of keyboard key representations including single keys, modifiers, icons, and combinations.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage examples showing kbd in practical scenarios.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-2xl">
+      {/* Search Bar with Shortcut */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Search</h3>
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Search anything..."
+            className="w-full px-4 py-2 pr-16 border rounded-md"
+          />
+          <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>K</Kbd>
+            </KbdGroup>
+          </div>
+        </div>
+      </div>
+
+      {/* Keyboard Shortcuts Guide */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Keyboard Shortcuts</h3>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between py-2 border-b">
+            <span className="text-sm">Open search</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>K</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center justify-between py-2 border-b">
+            <span className="text-sm">Create new</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>N</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center justify-between py-2 border-b">
+            <span className="text-sm">Save changes</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>S</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center justify-between py-2 border-b">
+            <span className="text-sm">Open settings</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>,</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center justify-between py-2">
+            <span className="text-sm">Show help</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>/</Kbd>
+            </KbdGroup>
+          </div>
+        </div>
+      </div>
+
+      {/* Editor Commands */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Editor Commands</h3>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-3">
+            <h4 className="text-sm font-medium">Text Formatting</h4>
+            <div className="space-y-2 text-sm">
+              <div className="flex items-center justify-between">
+                <span>Bold</span>
+                <KbdGroup>
+                  <Kbd>⌘</Kbd>
+                  <Kbd>B</Kbd>
+                </KbdGroup>
+              </div>
+              <div className="flex items-center justify-between">
+                <span>Italic</span>
+                <KbdGroup>
+                  <Kbd>⌘</Kbd>
+                  <Kbd>I</Kbd>
+                </KbdGroup>
+              </div>
+              <div className="flex items-center justify-between">
+                <span>Underline</span>
+                <KbdGroup>
+                  <Kbd>⌘</Kbd>
+                  <Kbd>U</Kbd>
+                </KbdGroup>
+              </div>
+            </div>
+          </div>
+          <div className="space-y-3">
+            <h4 className="text-sm font-medium">Navigation</h4>
+            <div className="space-y-2 text-sm">
+              <div className="flex items-center justify-between">
+                <span>Move up</span>
+                <Kbd>
+                  <ArrowUp className="size-3" />
+                </Kbd>
+              </div>
+              <div className="flex items-center justify-between">
+                <span>Move down</span>
+                <Kbd>
+                  <ArrowDown className="size-3" />
+                </Kbd>
+              </div>
+              <div className="flex items-center justify-between">
+                <span>Go to start</span>
+                <KbdGroup>
+                  <Kbd>⌘</Kbd>
+                  <Kbd>
+                    <ArrowLeft className="size-3" />
+                  </Kbd>
+                </KbdGroup>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Command Palette */}
+      <div className="space-y-4 p-6 border rounded-lg max-w-md">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold">Command Palette</h3>
+          <KbdGroup>
+            <Kbd>⌘</Kbd>
+            <Kbd>P</Kbd>
+          </KbdGroup>
+        </div>
+        <div className="space-y-1">
+          <div className="flex items-center justify-between p-2 hover:bg-muted rounded-md cursor-pointer">
+            <span className="text-sm">New File</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>N</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center justify-between p-2 hover:bg-muted rounded-md cursor-pointer">
+            <span className="text-sm">Open File</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>O</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center justify-between p-2 hover:bg-muted rounded-md cursor-pointer">
+            <span className="text-sm">Save</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>S</Kbd>
+            </KbdGroup>
+          </div>
+          <div className="flex items-center justify-between p-2 hover:bg-muted rounded-md cursor-pointer">
+            <span className="text-sm">Close Tab</span>
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>W</Kbd>
+            </KbdGroup>
+          </div>
+        </div>
+      </div>
+
+      {/* Inline Documentation */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Getting Started</h3>
+        <div className="space-y-4 text-sm">
+          <p>
+            Press <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup> to open the command palette, or use{" "}
+            <KbdGroup><Kbd>⌘</Kbd><Kbd>P</Kbd></KbdGroup> to quickly search for files.
+          </p>
+          <p>
+            Navigate between tabs using{" "}
+            <KbdGroup><Kbd>⌘</Kbd><Kbd>1</Kbd></KbdGroup> through{" "}
+            <KbdGroup><Kbd>⌘</Kbd><Kbd>9</Kbd></KbdGroup>, or close the current tab with{" "}
+            <KbdGroup><Kbd>⌘</Kbd><Kbd>W</Kbd></KbdGroup>.
+          </p>
+          <p>
+            To save your work, press <KbdGroup><Kbd>⌘</Kbd><Kbd>S</Kbd></KbdGroup>. Need help? Press{" "}
+            <KbdGroup><Kbd>⌘</Kbd><Kbd>/</Kbd></KbdGroup> anytime.
+          </p>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world examples showing kbd in search bars, shortcut guides, editors, command palettes, and documentation.",
+      },
+    },
+  },
+};

package/src/components/ui/stories/label.stories.tsx

@@ -25,7 +25,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     htmlFor: {
       control: { type: "text" },

package/src/components/ui/stories/menubar.stories.tsx

@@ -57,7 +57,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     className: {
       control: "text",

package/src/components/ui/stories/navigation-menu.stories.tsx

@@ -33,7 +33,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     viewport: {
       control: "boolean",

package/src/components/ui/stories/pagination.stories.tsx

@@ -22,7 +22,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
 } satisfies Meta<typeof Pagination>;
 
 export default meta;

package/src/components/ui/stories/popover.stories.tsx

@@ -32,7 +32,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     open: {
       control: "boolean",

package/src/components/ui/stories/progress.stories.tsx

@@ -16,7 +16,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     value: {
       control: { type: "range", min: 0, max: 100, step: 1 },

package/src/components/ui/stories/radio-group.stories.tsx

@@ -16,7 +16,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     defaultValue: {
       control: { type: "text" },

package/src/components/ui/stories/resizable.stories.tsx

@@ -17,7 +17,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     direction: {
       control: { type: "select" },

package/src/components/ui/stories/scroll-area.stories.tsx

@@ -13,7 +13,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     className: {
       control: { type: "text" },

package/src/components/ui/stories/select.stories.tsx

@@ -25,7 +25,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     value: {
       control: "text",

package/src/components/ui/stories/separator.stories.tsx

@@ -13,7 +13,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     orientation: {
       control: { type: "select" },

package/src/components/ui/stories/sheet.stories.tsx

@@ -30,7 +30,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     open: {
       control: "boolean",

package/src/components/ui/stories/sidebar.stories.tsx

@@ -52,7 +52,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     side: {
       control: { type: "select" },

package/src/components/ui/stories/skeleton.stories.tsx

@@ -14,7 +14,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     className: {
       control: { type: "text" },

package/src/components/ui/stories/slider.stories.tsx

@@ -23,7 +23,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     value: {
       control: { type: "object" },

package/src/components/ui/stories/sonner.stories.tsx

@@ -17,7 +17,6 @@ const meta: Meta<typeof Toaster> = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     position: {
       control: "select",