@snowcone-app/ui 0.1.43 → 0.2.0

package/src/primitives/stories/Surface.stories.tsx

@@ -0,0 +1,257 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Surface } from '../surface';
+import { Input } from '../input';
+import { Label } from '../label';
+import { Textarea } from '../textarea';
+import { Checkbox } from '../checkbox';
+import { RadioGroup, RadioGroupItem } from '../radio-group';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
+import { Button } from '../button';
+import { Icon } from '@iconify/react';
+
+const meta: Meta<typeof Surface> = {
+  title: 'UI/Surface',
+  component: Surface,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['transparent', 'default', 'secondary'],
+    },
+    asChild: {
+      control: 'boolean',
+    },
+    children: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    className: 'p-6 rounded-lg',
+  },
+  render: (args) => (
+    <Surface {...args}>
+      <div className="space-y-2">
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" placeholder="Enter your email" />
+      </div>
+    </Surface>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <div className="space-y-2">
+        <p className="text-sm text-foreground font-label">Transparent</p>
+        <Surface variant="transparent" className="p-6 rounded-lg w-64">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name-transparent">Name</Label>
+              <Input id="name-transparent" placeholder="Your name" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="country-transparent">Country</Label>
+              <Select>
+                <SelectTrigger id="country-transparent">
+                  <SelectValue placeholder="Select country" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="us">United States</SelectItem>
+                  <SelectItem value="uk">United Kingdom</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <RadioGroup defaultValue="email" className="space-y-2">
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="email" id="contact-email-t" />
+                <Label htmlFor="contact-email-t">Email</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="phone" id="contact-phone-t" />
+                <Label htmlFor="contact-phone-t">Phone</Label>
+              </div>
+            </RadioGroup>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="terms-transparent" />
+              <Label htmlFor="terms-transparent">Accept terms</Label>
+            </div>
+          </div>
+        </Surface>
+      </div>
+
+      <div className="space-y-2">
+        <p className="text-sm text-foreground font-label">Default</p>
+        <Surface variant="default" className="p-6 rounded-lg w-64">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name-default">Name</Label>
+              <Input id="name-default" placeholder="Your name" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="country-default">Country</Label>
+              <Select>
+                <SelectTrigger id="country-default">
+                  <SelectValue placeholder="Select country" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="us">United States</SelectItem>
+                  <SelectItem value="uk">United Kingdom</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <RadioGroup defaultValue="email" className="space-y-2">
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="email" id="contact-email-d" />
+                <Label htmlFor="contact-email-d">Email</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="phone" id="contact-phone-d" />
+                <Label htmlFor="contact-phone-d">Phone</Label>
+              </div>
+            </RadioGroup>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="terms-default" />
+              <Label htmlFor="terms-default">Accept terms</Label>
+            </div>
+          </div>
+        </Surface>
+      </div>
+
+      <div className="space-y-2">
+        <p className="text-sm text-foreground font-label">Secondary</p>
+        <Surface variant="secondary" className="p-6 rounded-lg w-64">
+          <p className="text-sm text-foreground/70">
+            Do not use form fields on this surface.
+            <br />
+            Use for content sections only.
+          </p>
+        </Surface>
+      </div>
+    </div>
+  ),
+};
+
+export const WithForm: Story = {
+  render: () => (
+    <Surface variant="default" className="p-6 rounded-lg w-80">
+      <div className="space-y-4">
+        <h3 className="text-lg text-foreground font-heading">Contact Form</h3>
+
+        <div className="space-y-2">
+          <Label htmlFor="fullname">Full Name</Label>
+          <Input id="fullname" placeholder="John Doe" />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="contact-email">Email Address</Label>
+          <Input id="contact-email" type="email" placeholder="john@example.com" />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="message">Message</Label>
+          <Textarea id="message" placeholder="Your message here..." className="min-h-[100px]" />
+        </div>
+      </div>
+    </Surface>
+  ),
+};
+
+const ButtonShowcase = ({ title }: { title: string }) => (
+  <div className="space-y-4">
+    <p className="text-sm text-foreground font-label">{title}</p>
+
+    {/* All variants */}
+    <div className="space-y-3">
+      <div className="flex flex-wrap gap-2">
+        <Button variant="default">Default</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="field">Field</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="link">Link</Button>
+        <Button variant="destructive">Destructive</Button>
+      </div>
+
+      {/* With icons */}
+      <div className="flex flex-wrap gap-2">
+        <Button variant="default">
+          <Icon icon="gravity-ui:plus" className="size-4" />
+          Add Item
+        </Button>
+        <Button variant="secondary">
+          <Icon icon="gravity-ui:gear" className="size-4" />
+          Settings
+        </Button>
+        <Button variant="field">
+          <Icon icon="gravity-ui:filter" className="size-4" />
+          Filters
+        </Button>
+        <Button variant="outline">
+          <Icon icon="gravity-ui:pencil" className="size-4" />
+          Edit
+        </Button>
+        <Button variant="ghost">
+          <Icon icon="gravity-ui:trash-bin" className="size-4" />
+          Delete
+        </Button>
+      </div>
+
+      {/* Icon only */}
+      <div className="flex flex-wrap gap-2">
+        <Button variant="default" size="icon">
+          <Icon icon="gravity-ui:plus" className="size-4" />
+        </Button>
+        <Button variant="secondary" size="icon">
+          <Icon icon="gravity-ui:gear" className="size-4" />
+        </Button>
+        <Button variant="field" size="icon">
+          <Icon icon="gravity-ui:filter" className="size-4" />
+        </Button>
+        <Button variant="outline" size="icon">
+          <Icon icon="gravity-ui:pencil" className="size-4" />
+        </Button>
+        <Button variant="ghost" size="icon">
+          <Icon icon="gravity-ui:trash-bin" className="size-4" />
+        </Button>
+      </div>
+
+      {/* Sizes */}
+      <div className="flex flex-wrap items-center gap-2">
+        <Button variant="default" size="sm">Small</Button>
+        <Button variant="default" size="default">Default</Button>
+        <Button variant="default" size="lg">Large</Button>
+      </div>
+
+      {/* States */}
+      <div className="flex flex-wrap gap-2">
+        <Button variant="default" disabled>Disabled</Button>
+        <Button variant="secondary" disabled>Disabled</Button>
+        <Button variant="field" disabled>Disabled</Button>
+        <Button variant="outline" disabled>Disabled</Button>
+        <Button variant="ghost" disabled>Disabled</Button>
+      </div>
+    </div>
+  </div>
+);
+
+export const WithButtons: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <Surface variant="transparent" className="p-6 rounded-lg">
+        <ButtonShowcase title="Transparent (Page Background)" />
+      </Surface>
+
+      <Surface variant="default" className="p-6 rounded-lg">
+        <ButtonShowcase title="Default Surface" />
+      </Surface>
+    </div>
+  ),
+};

package/src/primitives/stories/Switch.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Switch } from '../switch';
+import { Label } from '../label';
+
+const meta: Meta<typeof Switch> = {
+  title: 'UI/Switch',
+  component: Switch,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      description: 'Checked state',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the switch',
+    },
+    onCheckedChange: {
+      control: false,
+      description: 'Callback when checked state changes',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Switch id="airplane-mode" />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Switch checked={checked} onCheckedChange={setChecked} id="controlled" />
+          <Label htmlFor="controlled">Notifications</Label>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Notifications are {checked ? 'enabled' : 'disabled'}
+        </p>
+      </div>
+    );
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-2">
+        <Switch disabled id="disabled-off" />
+        <Label htmlFor="disabled-off" className="opacity-50">Disabled (off)</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Switch disabled defaultChecked id="disabled-on" />
+        <Label htmlFor="disabled-on" className="opacity-50">Disabled (on)</Label>
+      </div>
+    </div>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => {
+    const [settings, setSettings] = useState({
+      marketing: false,
+      security: true,
+      updates: true,
+    });
+    return (
+      <div className="w-full max-w-sm space-y-4">
+        <h3 className="text-lg font-heading">Email Preferences</h3>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="marketing">Marketing emails</Label>
+              <p className="text-sm text-muted-foreground">Receive emails about new products</p>
+            </div>
+            <Switch
+              id="marketing"
+              checked={settings.marketing}
+              onCheckedChange={(checked) => setSettings({ ...settings, marketing: checked })}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="security">Security emails</Label>
+              <p className="text-sm text-muted-foreground">Receive emails about security</p>
+            </div>
+            <Switch
+              id="security"
+              checked={settings.security}
+              onCheckedChange={(checked) => setSettings({ ...settings, security: checked })}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="updates">Product updates</Label>
+              <p className="text-sm text-muted-foreground">Receive emails about updates</p>
+            </div>
+            <Switch
+              id="updates"
+              checked={settings.updates}
+              onCheckedChange={(checked) => setSettings({ ...settings, updates: checked })}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/src/primitives/stories/Tabs.stories.tsx

@@ -0,0 +1,275 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Icon } from '@iconify/react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../tabs';
+import { Label } from '../label';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'Active tab value',
+    },
+    defaultValue: {
+      control: 'text',
+      description: 'Default active tab',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <div className="space-y-2 p-4">
+          <h3 className="text-lg text-foreground font-heading">Account</h3>
+          <p className="text-sm text-muted-foreground font-body">
+            Make changes to your account here. Click save when you&apos;re done.
+          </p>
+        </div>
+      </TabsContent>
+      <TabsContent value="password">
+        <div className="space-y-2 p-4">
+          <h3 className="text-lg text-foreground font-heading">Password</h3>
+          <p className="text-sm text-muted-foreground font-body">
+            Change your password here. After saving, you&apos;ll be logged out.
+          </p>
+        </div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('tab1');
+    return (
+      <div className="space-y-4">
+        <Tabs value={value} onValueChange={setValue} className="w-[400px]">
+          <TabsList>
+            <TabsTrigger value="tab1">Overview</TabsTrigger>
+            <TabsTrigger value="tab2">Analytics</TabsTrigger>
+            <TabsTrigger value="tab3">Reports</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">
+            <div className="p-4">Overview content</div>
+          </TabsContent>
+          <TabsContent value="tab2">
+            <div className="p-4">Analytics content</div>
+          </TabsContent>
+          <TabsContent value="tab3">
+            <div className="p-4">Reports content</div>
+          </TabsContent>
+        </Tabs>
+        <p className="text-sm text-muted-foreground">Active tab: {value}</p>
+      </div>
+    );
+  },
+};
+
+export const ControlledWithId: Story = {
+  render: () => {
+    const [value, setValue] = useState('photos');
+    return (
+      <div className="space-y-4">
+        <Tabs
+          value={value}
+          onValueChange={setValue}
+          className="w-[400px]"
+        >
+          <TabsList>
+            <TabsTrigger id="photos">Photos</TabsTrigger>
+            <TabsTrigger id="music">Music</TabsTrigger>
+            <TabsTrigger id="videos">Videos</TabsTrigger>
+          </TabsList>
+          <TabsContent id="photos">
+            <div className="p-4">Your photos collection</div>
+          </TabsContent>
+          <TabsContent id="music">
+            <div className="p-4">Your music library</div>
+          </TabsContent>
+          <TabsContent id="videos">
+            <div className="p-4">Your video collection</div>
+          </TabsContent>
+        </Tabs>
+        <p className="text-sm text-muted-foreground">
+          Active tab: {value}
+        </p>
+      </div>
+    );
+  },
+};
+
+export const WithForms: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <div className="space-y-4 p-4 border border-divider rounded-lg mt-2">
+          <div className="space-y-2">
+            <h3 className="text-lg font-heading">Account</h3>
+            <p className="text-sm text-muted-foreground font-body">
+              Make changes to your account here.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <input
+              id="name"
+              defaultValue="John Doe"
+              className="flex h-9 w-full rounded-md border border-divider bg-transparent px-3 py-1 text-sm"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <input
+              id="username"
+              defaultValue="@johndoe"
+              className="flex h-9 w-full rounded-md border border-divider bg-transparent px-3 py-1 text-sm"
+            />
+          </div>
+        </div>
+      </TabsContent>
+      <TabsContent value="password">
+        <div className="space-y-4 p-4 border border-divider rounded-lg mt-2">
+          <div className="space-y-2">
+            <h3 className="text-lg font-heading">Password</h3>
+            <p className="text-sm text-muted-foreground font-body">Change your password here.</p>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="current">Current password</Label>
+            <input
+              id="current"
+              type="password"
+              className="flex h-9 w-full rounded-md border border-divider bg-transparent px-3 py-1 text-sm"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="new">New password</Label>
+            <input
+              id="new"
+              type="password"
+              className="flex h-9 w-full rounded-md border border-divider bg-transparent px-3 py-1 text-sm"
+            />
+          </div>
+        </div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Tabs defaultValue="active" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="active">Active</TabsTrigger>
+        <TabsTrigger value="disabled" disabled>
+          Disabled
+        </TabsTrigger>
+        <TabsTrigger value="another">Another</TabsTrigger>
+      </TabsList>
+      <TabsContent value="active">
+        <div className="p-4">Active tab content</div>
+      </TabsContent>
+      <TabsContent value="disabled">
+        <div className="p-4">This content is not accessible</div>
+      </TabsContent>
+      <TabsContent value="another">
+        <div className="p-4">Another tab content</div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const WithIcons: Story = {
+  name: 'With Icons (Pill Style)',
+  render: () => (
+    <Tabs defaultValue="chats" className="w-[350px]">
+      <TabsList className="w-full">
+        <TabsTrigger value="chats" className="flex-1">
+          <Icon icon="gravity-ui:comment" className="size-4" />
+          Chats
+        </TabsTrigger>
+        <TabsTrigger value="emails" className="flex-1">
+          <Icon icon="gravity-ui:envelope" className="size-4" />
+          Emails
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="chats">
+        <div className="p-4">Your chat messages</div>
+      </TabsContent>
+      <TabsContent value="emails">
+        <div className="p-4">Your email inbox</div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const PillStyleTextOnly: Story = {
+  name: 'Pill Style (Text Only)',
+  render: () => (
+    <Tabs defaultValue="account" className="w-[300px]">
+      <TabsList className="w-full">
+        <TabsTrigger value="account" className="flex-1">
+          Account
+        </TabsTrigger>
+        <TabsTrigger value="password" className="flex-1">
+          Password
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <div className="p-4">Account settings</div>
+      </TabsContent>
+      <TabsContent value="password">
+        <div className="p-4">Password settings</div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const ThreeTabs: Story = {
+  render: () => (
+    <Tabs defaultValue="inbox" className="w-[450px]">
+      <TabsList className="w-full">
+        <TabsTrigger value="inbox" className="flex-1">
+          <Icon icon="gravity-ui:envelope-open" className="size-4" />
+          Inbox
+        </TabsTrigger>
+        <TabsTrigger value="sent" className="flex-1">
+          <Icon icon="gravity-ui:arrow-up-from-square" className="size-4" />
+          Sent
+        </TabsTrigger>
+        <TabsTrigger value="drafts" className="flex-1">
+          <Icon icon="gravity-ui:file" className="size-4" />
+          Drafts
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="inbox">
+        <div className="p-4">Inbox messages</div>
+      </TabsContent>
+      <TabsContent value="sent">
+        <div className="p-4">Sent messages</div>
+      </TabsContent>
+      <TabsContent value="drafts">
+        <div className="p-4">Draft messages</div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+