@neynar/ui 0.1.1

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

@@ -0,0 +1,337 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Bold,
+  Italic,
+  Underline,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  AlignJustify,
+} from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "../toggle-group";
+
+const meta = {
+  title: "Interactive Controls/ToggleGroup",
+  component: ToggleGroup,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A versatile toggle group component for grouping related toggle buttons with single or multiple selection modes. Built on Radix UI primitives with full keyboard navigation, accessibility support, and customizable variants. Perfect for toolbars, formatting controls, and option selection interfaces.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["single", "multiple"],
+      description:
+        "Selection mode: 'single' for radio-like behavior, 'multiple' for checkbox-like behavior",
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["default", "outline"],
+      description:
+        "Visual style variant: 'default' for subtle styling, 'outline' for bordered appearance",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "default", "lg"],
+      description:
+        "Size of toggle group items: 'sm' (compact), 'default' (standard), 'lg' (large)",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description:
+        "Whether the entire toggle group is disabled and non-interactive",
+    },
+    defaultValue: {
+      control: false,
+      description:
+        "Initial selected value(s) - string for single type, array for multiple type",
+    },
+    value: {
+      control: false,
+      description:
+        "Controlled selected value(s) - string for single type, array for multiple type",
+    },
+    onValueChange: {
+      control: false,
+      description: "Callback function called when the selection changes",
+    },
+  },
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground story for testing all ToggleGroup props and variants
+ */
+export const Interactive: Story = {
+  args: {
+    type: "multiple",
+    variant: "outline",
+    size: "default",
+    disabled: false,
+  },
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="size-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="size-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground for testing all ToggleGroup properties. Use the controls panel to experiment with different combinations of type, variant, size, and disabled state.",
+      },
+    },
+  },
+};
+
+/**
+ * Showcase of all available variants and sizes in a systematic layout
+ */
+export const Variants: Story = {
+  args: {
+    type: "single",
+    variant: "default",
+    size: "default",
+    disabled: false,
+  },
+  render: () => (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Variants</h3>
+
+        <div className="space-y-3">
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">
+              Default variant (subtle styling)
+            </p>
+            <ToggleGroup type="single" variant="default" defaultValue="center">
+              <ToggleGroupItem value="left">Left</ToggleGroupItem>
+              <ToggleGroupItem value="center">Center</ToggleGroupItem>
+              <ToggleGroupItem value="right">Right</ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">
+              Outline variant (bordered)
+            </p>
+            <ToggleGroup type="single" variant="outline" defaultValue="center">
+              <ToggleGroupItem value="left">Left</ToggleGroupItem>
+              <ToggleGroupItem value="center">Center</ToggleGroupItem>
+              <ToggleGroupItem value="right">Right</ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Sizes</h3>
+
+        <div className="space-y-3">
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">Small (sm)</p>
+            <ToggleGroup type="single" size="sm" variant="outline">
+              <ToggleGroupItem value="xs">XS</ToggleGroupItem>
+              <ToggleGroupItem value="sm">SM</ToggleGroupItem>
+              <ToggleGroupItem value="md">MD</ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">Default</p>
+            <ToggleGroup type="single" size="default" variant="outline">
+              <ToggleGroupItem value="small">Small</ToggleGroupItem>
+              <ToggleGroupItem value="medium">Medium</ToggleGroupItem>
+              <ToggleGroupItem value="large">Large</ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">Large (lg)</p>
+            <ToggleGroup type="single" size="lg" variant="outline">
+              <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
+              <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
+              <ToggleGroupItem value="option3">Option 3</ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Selection Types</h3>
+
+        <div className="space-y-3">
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">
+              Single selection (radio-like behavior)
+            </p>
+            <ToggleGroup type="single" variant="outline" defaultValue="center">
+              <ToggleGroupItem value="left" aria-label="Align left">
+                <AlignLeft className="size-4" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="center" aria-label="Align center">
+                <AlignCenter className="size-4" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="right" aria-label="Align right">
+                <AlignRight className="size-4" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">
+              Multiple selection (checkbox-like behavior)
+            </p>
+            <ToggleGroup
+              type="multiple"
+              variant="outline"
+              defaultValue={["bold", "italic"]}
+            >
+              <ToggleGroupItem value="bold" aria-label="Toggle bold">
+                <Bold className="size-4" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="italic" aria-label="Toggle italic">
+                <Italic className="size-4" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="underline" aria-label="Toggle underline">
+                <Underline className="size-4" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Comprehensive showcase of all ToggleGroup variants, sizes, and selection types. This demonstrates the component's flexibility and visual appearance across different configurations.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage example showing ToggleGroup in a practical UI context
+ */
+export const InContext: Story = {
+  args: {
+    type: "single",
+    variant: "default",
+    size: "default",
+    disabled: false,
+  },
+  render: () => (
+    <div className="w-full max-w-2xl mx-auto p-6 border rounded-lg bg-card">
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-xl font-semibold mb-2">Document Editor</h2>
+          <p className="text-sm text-muted-foreground mb-4">
+            Use the formatting tools below to style your document.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-medium mb-2 block">
+              Text Formatting
+            </label>
+            <ToggleGroup
+              type="multiple"
+              variant="outline"
+              className="justify-start"
+            >
+              <ToggleGroupItem value="bold" aria-label="Toggle bold">
+                <Bold className="size-4" />
+                <span className="ml-1">Bold</span>
+              </ToggleGroupItem>
+              <ToggleGroupItem value="italic" aria-label="Toggle italic">
+                <Italic className="size-4" />
+                <span className="ml-1">Italic</span>
+              </ToggleGroupItem>
+              <ToggleGroupItem value="underline" aria-label="Toggle underline">
+                <Underline className="size-4" />
+                <span className="ml-1">Underline</span>
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-2 block">
+              Text Alignment
+            </label>
+            <ToggleGroup
+              type="single"
+              variant="outline"
+              defaultValue="left"
+              className="justify-start"
+            >
+              <ToggleGroupItem value="left" aria-label="Align left">
+                <AlignLeft className="size-4" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="center" aria-label="Align center">
+                <AlignCenter className="size-4" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="right" aria-label="Align right">
+                <AlignRight className="size-4" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="justify" aria-label="Justify text">
+                <AlignJustify className="size-4" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-2 block">
+              Document Status
+            </label>
+            <ToggleGroup
+              type="single"
+              variant="default"
+              defaultValue="draft"
+              className="justify-start"
+            >
+              <ToggleGroupItem value="draft">Draft</ToggleGroupItem>
+              <ToggleGroupItem value="review">In Review</ToggleGroupItem>
+              <ToggleGroupItem value="published">Published</ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+        </div>
+
+        <div className="pt-4 border-t">
+          <div className="h-32 bg-muted/30 rounded border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
+            <p className="text-sm text-muted-foreground">
+              Document content area
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world example showing ToggleGroup components in a document editor interface. This demonstrates how toggle groups work together to provide intuitive formatting controls for users.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,325 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Bold, Italic, Underline, Heart, Star, Bookmark } from "lucide-react";
+import { Toggle } from "../toggle";
+import { Label } from "../label";
+import React from "react";
+
+const meta = {
+  title: "Interactive Controls/Toggle",
+  component: Toggle,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A two-state button that can be either on or off. Built on Radix UI Toggle with multiple variants and sizes for text formatting, settings, and binary controls.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "outline"],
+      description: "The visual style variant of the toggle",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "default", "lg"],
+      description: "The size of the toggle",
+    },
+    pressed: {
+      control: { type: "boolean" },
+      description: "The controlled pressed state",
+    },
+    defaultPressed: {
+      control: { type: "boolean" },
+      description: "The default pressed state when uncontrolled",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the toggle is disabled",
+    },
+    children: {
+      control: { type: "text" },
+      description: "The content of the toggle (icons, text, or both)",
+    },
+  },
+  args: {
+    onPressedChange: (pressed: boolean) => console.log("Toggle pressed:", pressed),
+    children: <Bold className="size-4" />,
+    "aria-label": "Toggle bold",
+  },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all toggle props and variants.
+ * Use the controls panel to experiment with different combinations.
+ */
+export const Interactive: Story = {
+  args: {
+    children: <Bold className="size-4" />,
+    "aria-label": "Toggle bold formatting",
+  },
+  render: function InteractiveToggle(args) {
+    const [pressed, setPressed] = React.useState(args.pressed ?? false);
+    
+    return (
+      <div className="space-y-4">
+        <Toggle
+          {...args}
+          pressed={pressed}
+          onPressedChange={setPressed}
+        />
+        <p className="text-sm text-muted-foreground">
+          State: {pressed ? "Pressed" : "Unpressed"}
+        </p>
+      </div>
+    );
+  },
+};
+
+/**
+ * Comprehensive showcase of all toggle variants, sizes, and states.
+ * Displays the complete design system for designers and developers.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      {/* Variants */}
+      <div>
+        <h3 className="mb-3 text-sm font-medium">Variants</h3>
+        <div className="flex gap-2">
+          <Toggle variant="default" aria-label="Default variant">
+            <Bold className="size-4" />
+          </Toggle>
+          <Toggle variant="outline" aria-label="Outline variant">
+            <Bold className="size-4" />
+          </Toggle>
+          <Toggle variant="default" defaultPressed aria-label="Default pressed">
+            <Bold className="size-4" />
+          </Toggle>
+          <Toggle variant="outline" defaultPressed aria-label="Outline pressed">
+            <Bold className="size-4" />
+          </Toggle>
+        </div>
+      </div>
+
+      {/* Sizes */}
+      <div>
+        <h3 className="mb-3 text-sm font-medium">Sizes</h3>
+        <div className="flex items-center gap-2">
+          <Toggle size="sm" aria-label="Small size">
+            <Bold className="size-4" />
+          </Toggle>
+          <Toggle size="default" aria-label="Default size">
+            <Bold className="size-4" />
+          </Toggle>
+          <Toggle size="lg" aria-label="Large size">
+            <Bold className="size-4" />
+          </Toggle>
+        </div>
+      </div>
+
+      {/* States */}
+      <div>
+        <h3 className="mb-3 text-sm font-medium">States</h3>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label className="text-xs">Normal</Label>
+            <Toggle aria-label="Normal state">
+              <Bold className="size-4" />
+            </Toggle>
+          </div>
+          <div className="space-y-2">
+            <Label className="text-xs">Pressed</Label>
+            <Toggle defaultPressed aria-label="Pressed state">
+              <Bold className="size-4" />
+            </Toggle>
+          </div>
+          <div className="space-y-2">
+            <Label className="text-xs">Disabled</Label>
+            <Toggle disabled aria-label="Disabled state">
+              <Bold className="size-4" />
+            </Toggle>
+          </div>
+          <div className="space-y-2">
+            <Label className="text-xs">Disabled + Pressed</Label>
+            <Toggle disabled defaultPressed aria-label="Disabled pressed">
+              <Bold className="size-4" />
+            </Toggle>
+          </div>
+        </div>
+      </div>
+
+      {/* Content Types */}
+      <div>
+        <h3 className="mb-3 text-sm font-medium">Content Types</h3>
+        <div className="flex gap-2">
+          <Toggle aria-label="Icon only">
+            <Bold className="size-4" />
+          </Toggle>
+          <Toggle>Text Only</Toggle>
+          <Toggle>
+            <Italic className="size-4" />
+            With Icon
+          </Toggle>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete overview of all available toggle variants, sizes, states, and content options for design system reference.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage examples showing toggles in practical UI contexts.
+ * Demonstrates common patterns for design and business stakeholders.
+ */
+export const InContext: Story = {
+  render: function ToggleInContext() {
+    const [formatting, setFormatting] = React.useState({
+      bold: false,
+      italic: false,
+      underline: false,
+    });
+
+    const [preferences, setPreferences] = React.useState({
+      notifications: true,
+      autoSave: false,
+    });
+
+    const [actions, setActions] = React.useState({
+      liked: false,
+      starred: false,
+      bookmarked: false,
+    });
+
+    return (
+      <div className="space-y-8">
+        {/* Text Formatting Toolbar */}
+        <div>
+          <h3 className="mb-3 text-sm font-medium">Text Formatting Toolbar</h3>
+          <div className="flex items-center gap-1 rounded-md border p-2">
+            <Toggle
+              pressed={formatting.bold}
+              onPressedChange={(pressed) =>
+                setFormatting({ ...formatting, bold: pressed })
+              }
+              size="sm"
+              aria-label="Toggle bold"
+            >
+              <Bold className="size-4" />
+            </Toggle>
+            <Toggle
+              pressed={formatting.italic}
+              onPressedChange={(pressed) =>
+                setFormatting({ ...formatting, italic: pressed })
+              }
+              size="sm"
+              aria-label="Toggle italic"
+            >
+              <Italic className="size-4" />
+            </Toggle>
+            <Toggle
+              pressed={formatting.underline}
+              onPressedChange={(pressed) =>
+                setFormatting({ ...formatting, underline: pressed })
+              }
+              size="sm"
+              aria-label="Toggle underline"
+            >
+              <Underline className="size-4" />
+            </Toggle>
+          </div>
+        </div>
+
+        {/* Settings Panel */}
+        <div>
+          <h3 className="mb-3 text-sm font-medium">Settings Panel</h3>
+          <div className="space-y-3 rounded-md border p-4">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm">Enable notifications</Label>
+              <Toggle
+                pressed={preferences.notifications}
+                onPressedChange={(pressed) =>
+                  setPreferences({ ...preferences, notifications: pressed })
+                }
+                variant="outline"
+                size="sm"
+                aria-label="Toggle notifications"
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <Label className="text-sm">Auto-save drafts</Label>
+              <Toggle
+                pressed={preferences.autoSave}
+                onPressedChange={(pressed) =>
+                  setPreferences({ ...preferences, autoSave: pressed })
+                }
+                variant="outline"
+                size="sm"
+                aria-label="Toggle auto-save"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Action Bar */}
+        <div>
+          <h3 className="mb-3 text-sm font-medium">Content Actions</h3>
+          <div className="flex items-center gap-2 rounded-md border p-3">
+            <Toggle
+              pressed={actions.liked}
+              onPressedChange={(pressed) =>
+                setActions({ ...actions, liked: pressed })
+              }
+              variant="outline"
+              size="sm"
+              aria-label="Like content"
+            >
+              <Heart className={`size-4 ${actions.liked ? "fill-current text-red-500" : ""}`} />
+            </Toggle>
+            <Toggle
+              pressed={actions.starred}
+              onPressedChange={(pressed) =>
+                setActions({ ...actions, starred: pressed })
+              }
+              variant="outline"
+              size="sm"
+              aria-label="Star content"
+            >
+              <Star className={`size-4 ${actions.starred ? "fill-current text-yellow-500" : ""}`} />
+            </Toggle>
+            <Toggle
+              pressed={actions.bookmarked}
+              onPressedChange={(pressed) =>
+                setActions({ ...actions, bookmarked: pressed })
+              }
+              variant="outline"
+              size="sm"
+              aria-label="Bookmark content"
+            >
+              <Bookmark className={`size-4 ${actions.bookmarked ? "fill-current" : ""}`} />
+            </Toggle>
+          </div>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Practical examples showing how toggles work in real applications: text formatting toolbars, settings panels, and action buttons.",
+      },
+    },
+  },
+};