@snowcone-app/ui 0.1.43 → 0.2.1

package/src/primitives/stories/Separator.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Separator } from '../separator';
+import { Input } from '../input';
+import { Label } from '../label';
+import { Button } from '../button';
+
+const meta: Meta<typeof Separator> = {
+  title: 'UI/Separator',
+  component: Separator,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    decorative: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <div className="space-y-1">
+        <h4 className="text-sm leading-none text-foreground font-label">Radix Primitives</h4>
+        <p className="text-sm text-muted-foreground font-body">An open-source UI component library.</p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-sm text-foreground">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-[200px] items-center">
+      <div className="p-4">
+        <h4 className="text-sm text-foreground font-label">Section 1</h4>
+        <p className="text-sm text-muted-foreground font-body">Content for section one.</p>
+      </div>
+      <Separator orientation="vertical" className="mx-4" />
+      <div className="p-4">
+        <h4 className="text-sm text-foreground font-label">Section 2</h4>
+        <p className="text-sm text-muted-foreground font-body">Content for section two.</p>
+      </div>
+      <Separator orientation="vertical" className="mx-4" />
+      <div className="p-4">
+        <h4 className="text-sm text-foreground font-label">Section 3</h4>
+        <p className="text-sm text-muted-foreground font-body">Content for section three.</p>
+      </div>
+    </div>
+  ),
+};
+
+export const InCard: Story = {
+  render: () => (
+    <div className="w-[350px] rounded-xl border border-divider bg-surface p-6">
+      <h3 className="font-heading text-foreground">Account Settings</h3>
+      <p className="text-sm text-muted-foreground">Manage your account preferences.</p>
+      <Separator className="my-4" />
+      <div className="space-y-4">
+        <div className="flex justify-between">
+          <span className="text-sm text-foreground">Email notifications</span>
+          <span className="text-sm text-muted-foreground">Enabled</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-sm text-foreground">Two-factor auth</span>
+          <span className="text-sm text-muted-foreground">Disabled</span>
+        </div>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex justify-end">
+        <button className="text-sm text-primary hover:underline">Edit settings</button>
+      </div>
+    </div>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <Separator />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const FormDivider: Story = {
+  render: () => (
+    <div className="w-[350px] space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" placeholder="email@example.com" />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="password">Password</Label>
+        <Input id="password" type="password" placeholder="••••••••" />
+      </div>
+      <Button className="w-full">Sign In</Button>
+
+      <div className="relative py-4">
+        <div className="absolute inset-0 flex items-center">
+          <Separator />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-background px-2 text-muted-foreground">Or</span>
+        </div>
+      </div>
+
+      <Button variant="secondary" className="w-full">
+        Continue with Google
+      </Button>
+    </div>
+  ),
+};

package/src/primitives/stories/Slider.stories.tsx

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Slider } from '../slider';
+import { Label } from '../label';
+
+const meta: Meta<typeof Slider> = {
+  title: 'UI/Slider',
+  component: Slider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    min: {
+      control: { type: 'number' },
+      description: 'Minimum value',
+    },
+    max: {
+      control: { type: 'number' },
+      description: 'Maximum value',
+    },
+    step: {
+      control: { type: 'number' },
+      description: 'Step increment',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the slider',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    className: 'w-[200px]',
+  },
+};
+
+export const WithLabel: Story = {
+  render: () => {
+    const [value, setValue] = useState([50]);
+    return (
+      <div className="grid w-full max-w-sm gap-2">
+        <div className="flex justify-between">
+          <Label>Volume</Label>
+          <span className="text-sm text-muted-foreground">{value[0]}%</span>
+        </div>
+        <Slider value={value} onValueChange={setValue} max={100} step={1} />
+      </div>
+    );
+  },
+};
+
+export const Range: Story = {
+  render: () => {
+    const [value, setValue] = useState([25, 75]);
+    return (
+      <div className="grid w-full max-w-sm gap-2">
+        <div className="flex justify-between">
+          <Label>Price Range</Label>
+          <span className="text-sm text-muted-foreground">
+            ${value[0]} - ${value[1]}
+          </span>
+        </div>
+        <Slider value={value} onValueChange={setValue} max={100} step={1} />
+      </div>
+    );
+  },
+};
+
+export const CustomStep: Story = {
+  render: () => {
+    const [value, setValue] = useState([50]);
+    return (
+      <div className="grid w-full max-w-sm gap-2">
+        <div className="flex justify-between">
+          <Label>Step: 10</Label>
+          <span className="text-sm text-muted-foreground">{value[0]}</span>
+        </div>
+        <Slider value={value} onValueChange={setValue} max={100} step={10} />
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    disabled: true,
+    className: 'w-[200px]',
+  },
+};
+
+export const WithOnChangeEnd: Story = {
+  render: () => {
+    const [value, setValue] = useState([50]);
+    const [finalValue, setFinalValue] = useState([50]);
+    return (
+      <div className="grid w-full max-w-sm gap-4">
+        <div className="flex justify-between">
+          <Label>Drag to change</Label>
+          <span className="text-sm text-muted-foreground">Current: {value[0]}</span>
+        </div>
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          onChangeEnd={setFinalValue}
+          max={100}
+          step={1}
+        />
+        <p className="text-sm text-muted-foreground">
+          Final value (on release): {finalValue[0]}
+        </p>
+      </div>
+    );
+  },
+};
+
+/**
+ * Compound Component Pattern
+ *
+ * Use the compound component pattern for full control over slider parts.
+ * Provides Slider.Track, Slider.Fill, and Slider.Thumb sub-components.
+ */
+export const CompoundComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState([50]);
+    return (
+      <div className="grid w-full max-w-sm gap-4">
+        <div className="flex justify-between">
+          <Label>Compound Component Pattern</Label>
+          <span className="text-sm text-muted-foreground">{value[0]}%</span>
+        </div>
+        <Slider value={value} onValueChange={setValue} max={100} step={1}>
+          <Slider.Track>
+            <Slider.Fill />
+            <Slider.Thumb />
+          </Slider.Track>
+        </Slider>
+      </div>
+    );
+  },
+};
+
+/**
+ * Compound Component with Output
+ *
+ * Use Slider.Output for an accessible output element that displays the current value.
+ */
+export const WithOutput: Story = {
+  render: () => {
+    const [value, setValue] = useState([75]);
+    return (
+      <div className="grid w-full max-w-sm gap-4">
+        <div className="flex justify-between items-center">
+          <Label>Volume</Label>
+          <Slider.Output className="min-w-[3ch] text-right">
+            {({ state }) => `${state.values[0]}%`}
+          </Slider.Output>
+        </div>
+        <Slider value={value} onValueChange={setValue} max={100} step={1}>
+          <Slider.Track>
+            <Slider.Fill />
+            <Slider.Thumb />
+          </Slider.Track>
+        </Slider>
+      </div>
+    );
+  },
+};
+
+/**
+ * Custom Styled Compound
+ *
+ * Example of customizing individual slider parts with Tailwind classes.
+ */
+export const CustomStyled: Story = {
+  render: () => {
+    const [value, setValue] = useState([60]);
+    return (
+      <div className="grid w-full max-w-sm gap-4">
+        <div className="flex justify-between">
+          <Label>Custom Styled</Label>
+          <span className="text-sm text-muted-foreground">{value[0]}</span>
+        </div>
+        <Slider value={value} onValueChange={setValue} max={100} step={1}>
+          <Slider.Track className="h-3 bg-muted">
+            <Slider.Fill className="bg-success" />
+            <Slider.Thumb className="h-6 w-6 border-success" />
+          </Slider.Track>
+        </Slider>
+      </div>
+    );
+  },
+};

package/src/primitives/stories/Spinner.stories.tsx

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from '../spinner';
+import { Button } from '../button';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'UI/Spinner',
+  component: Spinner,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'md', 'lg', 'xl'],
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'secondary', 'success', 'warning', 'danger', 'current'],
+    },
+    label: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Spinner {...args} />
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <div className="flex flex-col items-center gap-2">
+        <Spinner size="sm" />
+        <span className="text-xs text-muted-foreground">Small</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Spinner size="md" />
+        <span className="text-xs text-muted-foreground">Medium</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Spinner size="lg" />
+        <span className="text-xs text-muted-foreground">Large</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Spinner size="xl" />
+        <span className="text-xs text-muted-foreground">Extra Large</span>
+      </div>
+    </div>
+  ),
+};
+
+export const AllColors: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <div className="flex flex-col items-center gap-2">
+        <Spinner color="primary" />
+        <span className="text-xs text-muted-foreground">Primary</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Spinner color="current" />
+        <span className="text-xs text-muted-foreground">Current</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Spinner color="success" />
+        <span className="text-xs text-muted-foreground">Success</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Spinner color="warning" />
+        <span className="text-xs text-muted-foreground">Warning</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Spinner color="danger" />
+        <span className="text-xs text-muted-foreground">Danger</span>
+      </div>
+    </div>
+  ),
+};
+
+export const InheritColor: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <div className="flex items-center gap-2 text-primary">
+        <Spinner color="current" size="sm" />
+        <span>Loading primary...</span>
+      </div>
+      <div className="flex items-center gap-2 text-success">
+        <Spinner color="current" size="sm" />
+        <span>Loading success...</span>
+      </div>
+      <div className="flex items-center gap-2 text-danger">
+        <Spinner color="current" size="sm" />
+        <span>Loading danger...</span>
+      </div>
+    </div>
+  ),
+};
+
+export const InButton: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Button disabled>
+        <Spinner size="sm" color="current" />
+        Loading...
+      </Button>
+      <Button variant="secondary" disabled>
+        <Spinner size="sm" color="current" />
+        Processing
+      </Button>
+      <Button variant="destructive" disabled>
+        <Spinner size="sm" color="current" />
+        Deleting
+      </Button>
+    </div>
+  ),
+};
+
+export const FullPage: Story = {
+  render: () => (
+    <div className="flex flex-col items-center justify-center gap-4 min-h-[200px] w-[300px] border border-divider rounded-lg bg-surface">
+      <Spinner size="xl" color="primary" />
+      <span className="text-foreground/70">Loading content...</span>
+    </div>
+  ),
+};
+
+export const Inline: Story = {
+  render: () => (
+    <p className="text-foreground">
+      Please wait while we process your request <Spinner size="sm" color="current" className="inline-block ml-1" />
+    </p>
+  ),
+};