@snowcone-app/ui 0.1.43 → 0.2.0

package/src/primitives/stories/Kbd.stories.tsx

@@ -0,0 +1,183 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Kbd } from '../kbd';
+
+const meta: Meta<typeof Kbd> = {
+  title: 'UI/Kbd',
+  component: Kbd,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'minimal', 'outline'],
+      description: 'Visual style of the keyboard key',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the keyboard key',
+    },
+    keys: {
+      control: 'text',
+      description: 'Keyboard key(s) to display. Can be a string like "cmd+K" or an array',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'K',
+  },
+};
+
+export const WithKeys: Story = {
+  args: {
+    keys: 'cmd+K',
+  },
+};
+
+export const KeysArray: Story = {
+  args: {
+    keys: ['cmd', 'shift', 'P'],
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <div className="flex flex-col items-center gap-2">
+        <Kbd variant="default" keys="cmd+K" />
+        <span className="text-xs text-foreground/60">default</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Kbd variant="minimal" keys="cmd+K" />
+        <span className="text-xs text-foreground/60">minimal</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Kbd variant="outline" keys="cmd+K" />
+        <span className="text-xs text-foreground/60">outline</span>
+      </div>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <div className="flex flex-col items-center gap-2">
+        <Kbd size="sm" keys="cmd+K" />
+        <span className="text-xs text-foreground/60">sm</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Kbd size="md" keys="cmd+K" />
+        <span className="text-xs text-foreground/60">md</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Kbd size="lg" keys="cmd+K" />
+        <span className="text-xs text-foreground/60">lg</span>
+      </div>
+    </div>
+  ),
+};
+
+export const SpecialKeys: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Kbd keys="cmd" />
+      <Kbd keys="ctrl" />
+      <Kbd keys="alt" />
+      <Kbd keys="shift" />
+      <Kbd keys="enter" />
+      <Kbd keys="backspace" />
+      <Kbd keys="escape" />
+      <Kbd keys="tab" />
+      <Kbd keys="space" />
+      <Kbd keys="up" />
+      <Kbd keys="down" />
+      <Kbd keys="left" />
+      <Kbd keys="right" />
+    </div>
+  ),
+};
+
+export const CommonShortcuts: Story = {
+  render: () => (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between w-[250px]">
+        <span className="text-sm">Save</span>
+        <Kbd keys="cmd+S" />
+      </div>
+      <div className="flex items-center justify-between w-[250px]">
+        <span className="text-sm">Undo</span>
+        <Kbd keys="cmd+Z" />
+      </div>
+      <div className="flex items-center justify-between w-[250px]">
+        <span className="text-sm">Redo</span>
+        <Kbd keys="cmd+shift+Z" />
+      </div>
+      <div className="flex items-center justify-between w-[250px]">
+        <span className="text-sm">Copy</span>
+        <Kbd keys="cmd+C" />
+      </div>
+      <div className="flex items-center justify-between w-[250px]">
+        <span className="text-sm">Paste</span>
+        <Kbd keys="cmd+V" />
+      </div>
+      <div className="flex items-center justify-between w-[250px]">
+        <span className="text-sm">Select All</span>
+        <Kbd keys="cmd+A" />
+      </div>
+    </div>
+  ),
+};
+
+export const SingleLetters: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Kbd>A</Kbd>
+      <Kbd>B</Kbd>
+      <Kbd>C</Kbd>
+      <Kbd>1</Kbd>
+      <Kbd>2</Kbd>
+      <Kbd>3</Kbd>
+    </div>
+  ),
+};
+
+export const InlineWithText: Story = {
+  render: () => (
+    <p className="text-sm">
+      Press <Kbd variant="minimal" size="sm">cmd</Kbd> + <Kbd variant="minimal" size="sm">K</Kbd> to
+      open the command palette, or <Kbd variant="minimal" size="sm">Esc</Kbd> to close it.
+    </p>
+  ),
+};
+
+export const MenuItemExample: Story = {
+  render: () => (
+    <div className="w-[200px] rounded-lg border border-divider bg-surface p-1">
+      <div className="flex items-center justify-between rounded-md px-3 py-2 hover:bg-muted cursor-pointer">
+        <span className="text-sm">New File</span>
+        <Kbd variant="minimal" size="sm" keys="cmd+N" />
+      </div>
+      <div className="flex items-center justify-between rounded-md px-3 py-2 hover:bg-muted cursor-pointer">
+        <span className="text-sm">Open</span>
+        <Kbd variant="minimal" size="sm" keys="cmd+O" />
+      </div>
+      <div className="flex items-center justify-between rounded-md px-3 py-2 hover:bg-muted cursor-pointer">
+        <span className="text-sm">Save</span>
+        <Kbd variant="minimal" size="sm" keys="cmd+S" />
+      </div>
+      <div className="h-px bg-divider my-1" />
+      <div className="flex items-center justify-between rounded-md px-3 py-2 hover:bg-muted cursor-pointer">
+        <span className="text-sm">Close</span>
+        <Kbd variant="minimal" size="sm" keys="cmd+W" />
+      </div>
+    </div>
+  ),
+};

package/src/primitives/stories/Label.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from '../label';
+
+const meta: Meta<typeof Label> = {
+  title: 'UI/Label',
+  component: Label,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    htmlFor: {
+      control: 'text',
+      description: 'ID of the form element this label is for',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Email Address',
+  },
+};
+
+export const WithInput: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="email">Email</Label>
+      <input
+        type="email"
+        id="email"
+        placeholder="Enter your email"
+        className="flex h-9 w-full rounded-md border border-divider bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus"
+      />
+    </div>
+  ),
+};
+
+export const Required: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="name">
+        Name <span className="text-destructive">*</span>
+      </Label>
+      <input
+        type="text"
+        id="name"
+        placeholder="Enter your name"
+        className="flex h-9 w-full rounded-md border border-divider bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus"
+      />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="disabled" className="peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        Disabled Field
+      </Label>
+      <input
+        type="text"
+        id="disabled"
+        disabled
+        placeholder="Cannot edit"
+        className="peer flex h-9 w-full rounded-md border border-divider bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+      />
+    </div>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="w-full max-w-sm space-y-4">
+      <div className="space-y-1.5">
+        <Label htmlFor="username">Username</Label>
+        <input
+          type="text"
+          id="username"
+          placeholder="johndoe"
+          className="flex h-9 w-full rounded-md border border-divider bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus"
+        />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="password">Password</Label>
+        <input
+          type="password"
+          id="password"
+          placeholder="Enter password"
+          className="flex h-9 w-full rounded-md border border-divider bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus"
+        />
+      </div>
+    </form>
+  ),
+};

package/src/primitives/stories/Link.stories.tsx

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Link } from '../link';
+import { Icon } from '@iconify/react';
+import { Card, CardContent, CardHeader, CardTitle } from '../card';
+
+const meta: Meta<typeof Link> = {
+  title: 'UI/Link',
+  component: Link,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'secondary', 'success', 'warning', 'danger'],
+      description: 'Color variant of the link',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the link text',
+    },
+    underline: {
+      control: 'select',
+      options: ['none', 'hover', 'always'],
+      description: 'Underline behavior',
+    },
+    underlineOffset: {
+      control: 'select',
+      options: [1, 2, 3],
+      description: 'Space between text and underline',
+    },
+    isExternal: {
+      control: 'boolean',
+      description: 'Shows external link icon and opens in new tab',
+    },
+    isBlock: {
+      control: 'boolean',
+      description: 'Full width block style',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    href: '#',
+    children: 'Click me',
+  },
+};
+
+export const Colors: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Link href="#" color="default">Default</Link>
+      <Link href="#" color="primary">Primary</Link>
+      <Link href="#" color="secondary">Secondary</Link>
+      <Link href="#" color="success">Success</Link>
+      <Link href="#" color="warning">Warning</Link>
+      <Link href="#" color="danger">Danger</Link>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Link href="#" size="sm">Small</Link>
+      <Link href="#" size="md">Medium</Link>
+      <Link href="#" size="lg">Large</Link>
+    </div>
+  ),
+};
+
+export const UnderlineVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <span className="w-24 text-sm text-foreground/60">hover:</span>
+        <Link href="#" underline="hover">Underline on hover</Link>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="w-24 text-sm text-foreground/60">always:</span>
+        <Link href="#" underline="always">Always underlined</Link>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="w-24 text-sm text-foreground/60">none:</span>
+        <Link href="#" underline="none">No underline</Link>
+      </div>
+    </div>
+  ),
+};
+
+export const UnderlineOffset: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <span className="w-24 text-sm text-foreground/60">offset 1:</span>
+        <Link href="#" underline="always" underlineOffset={1}>Default offset</Link>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="w-24 text-sm text-foreground/60">offset 2:</span>
+        <Link href="#" underline="always" underlineOffset={2}>Medium offset</Link>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="w-24 text-sm text-foreground/60">offset 3:</span>
+        <Link href="#" underline="always" underlineOffset={3}>Large offset</Link>
+      </div>
+    </div>
+  ),
+};
+
+export const External: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Link href="https://example.com" isExternal>
+        External Link
+      </Link>
+      <Link href="https://github.com" isExternal color="secondary">
+        GitHub
+      </Link>
+      <Link href="https://google.com" isExternal size="lg">
+        Large External Link
+      </Link>
+    </div>
+  ),
+};
+
+export const WithCustomIcon: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Link href="#" className="gap-2">
+        <Icon icon="gravity-ui:envelope" className="size-4" />
+        Email Us
+      </Link>
+      <Link href="#" className="gap-2">
+        <Icon icon="gravity-ui:smartphone" className="size-4" />
+        Call Us
+      </Link>
+      <Link href="#" className="gap-2">
+        Download
+        <Icon icon="gravity-ui:arrow-down-to-line" className="size-4" />
+      </Link>
+    </div>
+  ),
+};
+
+
+export const Block: Story = {
+  render: () => (
+    <div className="w-[250px] space-y-1">
+      <Link href="#" isBlock>Dashboard</Link>
+      <Link href="#" isBlock>Settings</Link>
+      <Link href="#" isBlock>Profile</Link>
+      <Link href="#" isBlock color="danger">Logout</Link>
+    </div>
+  ),
+};
+
+export const InParagraph: Story = {
+  render: () => (
+    <p className="max-w-md text-foreground/80">
+      Learn more about our <Link href="#">privacy policy</Link> and{' '}
+      <Link href="#">terms of service</Link>. For questions, visit our{' '}
+      <Link href="https://example.com" isExternal>help center</Link>.
+    </p>
+  ),
+};
+
+export const Navigation: Story = {
+  render: () => (
+    <nav className="flex items-center gap-6">
+      <Link href="#" underline="none" color="default">Home</Link>
+      <Link href="#" underline="none" color="default">Products</Link>
+      <Link href="#" underline="none" color="default">About</Link>
+      <Link href="#" underline="none" color="default">Contact</Link>
+    </nav>
+  ),
+};
+
+export const Footer: Story = {
+  render: () => (
+    <footer className="flex flex-col gap-4 text-sm">
+      <div className="flex gap-4">
+        <Link href="#" color="default" size="sm">Privacy</Link>
+        <Link href="#" color="default" size="sm">Terms</Link>
+        <Link href="#" color="default" size="sm">Cookies</Link>
+      </div>
+      <div className="flex gap-4">
+        <Link href="https://twitter.com" isExternal color="default" size="sm">Twitter</Link>
+        <Link href="https://github.com" isExternal color="default" size="sm">GitHub</Link>
+        <Link href="https://discord.com" isExternal color="default" size="sm">Discord</Link>
+      </div>
+    </footer>
+  ),
+};
+
+export const OnCard: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Resources</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <Link href="#" isBlock>
+          <Icon icon="gravity-ui:book-open" className="size-4" />
+          Documentation
+        </Link>
+        <Link href="#" isBlock>
+          <Icon icon="gravity-ui:code" className="size-4" />
+          API Reference
+        </Link>
+        <Link href="https://github.com" isExternal isBlock>
+          <Icon icon="gravity-ui:logo-github" className="size-4" />
+          Source Code
+        </Link>
+      </CardContent>
+    </Card>
+  ),
+};
+
+export const AllCombinations: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-sm mb-2 font-label">Colors with Hover Underline</h3>
+        <div className="flex flex-wrap gap-4">
+          <Link href="#" color="default">Default</Link>
+          <Link href="#" color="primary">Primary</Link>
+          <Link href="#" color="secondary">Secondary</Link>
+          <Link href="#" color="success">Success</Link>
+          <Link href="#" color="warning">Warning</Link>
+          <Link href="#" color="danger">Danger</Link>
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm mb-2 font-label">Colors with Always Underline</h3>
+        <div className="flex flex-wrap gap-4">
+          <Link href="#" color="default" underline="always">Default</Link>
+          <Link href="#" color="primary" underline="always">Primary</Link>
+          <Link href="#" color="secondary" underline="always">Secondary</Link>
+          <Link href="#" color="success" underline="always">Success</Link>
+          <Link href="#" color="warning" underline="always">Warning</Link>
+          <Link href="#" color="danger" underline="always">Danger</Link>
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm mb-2 font-label">All Sizes</h3>
+        <div className="flex items-end gap-4">
+          <Link href="#" size="sm">Small</Link>
+          <Link href="#" size="md">Medium</Link>
+          <Link href="#" size="lg">Large</Link>
+        </div>
+      </div>
+    </div>
+  ),
+};