aural-ui 4.0.1 → 4.2.0

package/dist/components/drawer/Drawer.stories.tsx

@@ -4,18 +4,16 @@ import { Button } from "@components/button"
 import { Checkbox } from "@components/checkbox"
 import Input from "@components/input"
 import { Label } from "@components/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@components/select"
-import Textarea from "@components/textarea"
-import { CrossIcon } from "@icons/cross-icon"
-import { EditBigIcon } from "@icons/edit-big-icon"
+import { ChevronRightIcon } from "@icons/chevron-right-icon"
+import { MaintenanceIcon } from "@icons/maintenance-icon"
+import { MusicalNoteIcon } from "@icons/musical-note-icon"
+import { SearchIcon } from "@icons/search-icon"
+import { SiteLogoIcon } from "@icons/site-logo-icon"
+import { TickCircleIcon } from "@icons/tick-circle-icon"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
 import {
   Drawer,
   DrawerClose,
@@ -27,194 +25,50 @@ import {
   DrawerTrigger,
 } from "."
 
-const meta: Meta<typeof DrawerContent> = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const meta: Meta<any> = {
   title: "Components/UI/Drawer",
   component: Drawer,
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
-    },
     docs: {
       description: {
-        component: `
-# Drawer Component
-
-A slide-out drawer component built on Vaul primitives with support for multiple directions, smooth animations, customizable content sections, and enhanced accessibility features.
-
-## Features
-
-- **Multiple Directions**: Top, bottom, left, and right slide directions
-- **Multiple Variants**: Neutral and gradient styles with custom styling
-- **Custom Overlays**: Configurable opacity, glass effect, and noise texture
-- **Smooth Animations**: Fade in/out animations for overlay and content with customizable duration
-- **Accessible**: Full keyboard navigation, screen reader support, and focus management
-- **Flexible Content**: Header, footer, and body sections with custom styling
-- **Portal Rendering**: Renders outside normal DOM hierarchy for proper layering
-- **Focus Management**: Automatic focus trapping and restoration
-- **Responsive Design**: Adapts to different screen sizes with mobile-first approach
-- **Drag Support**: Built-in drag gestures for intuitive interaction
-- **Nested Support**: Support for nested drawers with proper z-index management
-
-## Directions
-
-The drawer can slide from different directions using the \`direction\` prop:
-
-- **Bottom** (default): Slides up from the bottom - ideal for mobile navigation
-- **Top**: Slides down from the top - useful for notifications or quick actions
-- **Left**: Slides in from the left - perfect for navigation menus
-- **Right**: Slides in from the right - great for settings or detail panels
-
-## Usage Examples
-
-### Basic Drawer with Direction Configuration
-\`\`\`tsx
-import { Drawer, DrawerContent, DrawerTrigger } from '@/components/drawer'
-
-// Bottom drawer (default)
-<Drawer>
-  <DrawerTrigger asChild>
-    <Button>Open Bottom Drawer</Button>
-  </DrawerTrigger>
-  <DrawerContent>
-    Content slides up from bottom
-  </DrawerContent>
-</Drawer>
-
-// Top drawer
-<Drawer>
-  <DrawerTrigger asChild>
-    <Button>Open Top Drawer</Button>
-  </DrawerTrigger>
-  <DrawerContent>
-    Content slides down from top
-  </DrawerContent>
-</Drawer>
-
-// Left drawer
-<Drawer>
-  <DrawerTrigger asChild>
-    <Button>Open Left Drawer</Button>
-  </DrawerTrigger>
-  <DrawerContent>
-    Content slides in from left
-  </DrawerContent>
-</Drawer>
-
-// Right drawer
-<Drawer>
-  <DrawerTrigger asChild>
-    <Button>Open Right Drawer</Button>
-  </DrawerTrigger>
-  <DrawerContent>
-    Content slides in from right
-  </DrawerContent>
-</Drawer>
-
-### Drawer with Custom Overlay Effects
-\`\`\`tsx
-<Drawer>
-  <DrawerTrigger asChild>
-    <Button>Open Drawer with Custom Overlay</Button>
-  </DrawerTrigger>
-  <DrawerContent 
-    noise="high"
-    opacity="medium"
-    glass="low"
-  >
-    Content with custom overlay effects
-  </DrawerContent>
-</Drawer>
-\`\`\`
-
-### Overlay Configuration
-
-The drawer supports configurable overlay effects through the \`opacity\`, \`glass\`, and \`noise\` props:
-
-- **opacity**: Controls background dimming level
-  - \`"high"\` - Strong dimming (80%)
-  - \`"medium"\` - Balanced dimming (60%) - default
-  - \`"low"\` - Subtle dimming (40%)
-  - \`"none"\` - No dimming (100% coverage)
-
-- **glass**: Controls backdrop blur effect
-  - \`"high"\` - Strong blur effect
-  - \`"medium"\` - Balanced blur effect
-  - \`"low"\` - Subtle blur effect - default
-  - \`"none"\` - No blur effect
-
-- **noise**: Controls texture overlay
-  - \`"high"\` - Strong texture pattern
-  - \`"medium"\` - Balanced texture pattern
-  - \`"low"\` - Subtle texture pattern - default
-  - \`"none"\` - No texture pattern
-
-### Usage Examples
-
-\`\`\`tsx
-// High opacity with glass effect
-<DrawerContent opacity="high" glass="medium" noise="low">
-  Content with strong background dimming
-</DrawerContent>
-
-// Subtle overlay with texture
-<DrawerContent opacity="low" glass="none" noise="high">
-  Content with subtle dimming and strong texture
-</DrawerContent>
-
-// No overlay effects
-<DrawerContent opacity="none" glass="none" noise="none">
-  Content without any overlay effects
-</DrawerContent>
-\`\`\`
-\`\`\`
-
-### Drawer with Form Elements
-\`\`\`tsx
-<Drawer>
-  <DrawerTrigger asChild>
-    <Button>Open Form Drawer</Button>
-  </DrawerTrigger>
-  <DrawerContent>
-    <DrawerHeader>
-      <DrawerTitle>Contact Form</DrawerTitle>
-      <DrawerDescription>Fill out the form below to get in touch.</DrawerDescription>
-    </DrawerHeader>
-    <div className="space-y-4 p-4">
-      <Input placeholder="Name" />
-      <Input placeholder="Email" type="email" />
-      <Textarea placeholder="Message" rows={4} />
-    </div>
-    <DrawerFooter>
-      <Button>Submit</Button>
-      <DrawerClose asChild>
-        <Button variant="outline">Cancel</Button>
-      </DrawerClose>
-    </DrawerFooter>
-  </DrawerContent>
-</Drawer>
-\`\`\`
-        `,
+        component:
+          "A slide-out drawer built on Vaul primitives. Supports four slide directions, neutral and gradient variants, configurable glass/noise overlays, an optional swipe handle, and an optional backdrop overlay — ideal for mobile navigation, settings panels, and contextual actions.",
       },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "4 Slide Directions",
+              description: "Top, bottom, left, right",
+            },
+            {
+              title: "Glass & Noise Overlay",
+              description: "Blur and grain levels",
+            },
+            {
+              title: "Swipe Handle",
+              description: "Optional pill indicator",
+            },
+          ]}
+        />
+      ),
     },
   },
   argTypes: {
     variant: {
       control: { type: "select" },
       options: ["neutral", "gradient"],
-      description: "Drawer variant for different use cases",
+      description: "Visual style variant",
     },
     showOverlay: {
       control: { type: "boolean" },
-      description: "Whether to show the overlay backdrop",
+      description: "Whether to render the backdrop overlay",
     },
     showSwipeButton: {
       control: { type: "boolean" },
-      description: "Whether to show the swipe indicator button",
+      description: "Show swipe indicator handle (bottom drawers only)",
     },
     opacity: {
       control: { type: "select" },
@@ -224,12 +78,12 @@ The drawer supports configurable overlay effects through the \`opacity\`, \`glas
     glass: {
       control: { type: "select" },
       options: ["high", "medium", "low", "none"],
-      description: "Overlay glass effect level",
+      description: "Overlay glass blur intensity",
     },
     noise: {
       control: { type: "select" },
       options: ["high", "medium", "low", "none"],
-      description: "Overlay noise texture level",
+      description: "Overlay noise texture intensity",
     },
   },
   tags: ["autodocs"],
@@ -238,36 +92,28 @@ The drawer supports configurable overlay effects through the \`opacity\`, \`glas
 export default meta
 type Story = StoryObj<typeof Drawer>
 
-// 1. Direction Examples
-export const DirectionExamples: Story = {
+// ─── Configurations ────────────────────────────────────────────────────────────
+
+export const Configurations: Story = {
   render: () => {
-    const DirectionDrawer = ({ direction, title, description }: any) => {
-      return (
+    const DirDrawer = ({ direction, label, description }: any) => (
+      <div className="space-y-2 text-center">
         <Drawer direction={direction}>
           <DrawerTrigger asChild>
             <Button variant="outline" size="sm">
-              {title}
+              {label}
             </Button>
           </DrawerTrigger>
           <DrawerContent>
             <DrawerHeader>
-              <DrawerTitle>{title}</DrawerTitle>
+              <DrawerTitle>{label} Drawer</DrawerTitle>
               <DrawerDescription>{description}</DrawerDescription>
             </DrawerHeader>
-            <div className="p-2 py-4">
-              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-3">
-                <div className="text-fm-primary/60 space-y-1 text-xs">
-                  <div>
-                    Direction:{" "}
-                    <span className="text-fm-primary">{direction}</span>
-                  </div>
-                  <div>
-                    Content:{" "}
-                    <span className="text-fm-primary">
-                      Slides from {direction}
-                    </span>
-                  </div>
-                </div>
+            <div className="p-4">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+                <code className="text-fm-secondary text-fm-sm leading-fm-sm font-(--font-fm-mono)">
+                  direction="{direction}"
+                </code>
               </div>
             </div>
             <DrawerFooter>
@@ -277,77 +123,202 @@ export const DirectionExamples: Story = {
             </DrawerFooter>
           </DrawerContent>
         </Drawer>
-      )
-    }
+        <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+          {label}
+        </p>
+      </div>
+    )
+
+    const OverlayDrawer = ({ label, opacity, glass, noise }: any) => (
+      <div className="space-y-2 text-center">
+        <Drawer direction="bottom">
+          <DrawerTrigger asChild>
+            <Button variant="outline" size="sm">
+              {label}
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent opacity={opacity} glass={glass} noise={noise}>
+            <DrawerHeader>
+              <DrawerTitle>{label}</DrawerTitle>
+              <DrawerDescription>Overlay configuration demo.</DrawerDescription>
+            </DrawerHeader>
+            <div className="p-4">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+                <code className="text-fm-secondary text-fm-sm leading-fm-sm font-(--font-fm-mono)">
+                  {opacity ? `opacity="${opacity}"` : ""}
+                  {glass ? ` glass="${glass}"` : ""}
+                  {noise ? ` noise="${noise}"` : ""}
+                </code>
+              </div>
+            </div>
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button>Close</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+        <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+          {label}
+        </p>
+      </div>
+    )
 
     return (
       <div className="space-y-8">
-        <div className="text-center">
-          <h3 className="text-fm-primary mb-2 font-medium">
-            Drawer Directions
-          </h3>
-          <p className="text-fm-primary/60 text-sm">
-            Explore different slide directions for various use cases
-          </p>
+        {/* All four directions */}
+        <div className="space-y-3">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Slide Directions
+          </h4>
+          <div className="flex flex-wrap gap-6">
+            <DirDrawer
+              direction="bottom"
+              label="Bottom"
+              description="Slides up from the bottom — default for mobile."
+            />
+            <DirDrawer
+              direction="top"
+              label="Top"
+              description="Slides down from the top — ideal for notifications."
+            />
+            <DirDrawer
+              direction="left"
+              label="Left"
+              description="Slides in from the left — navigation menus."
+            />
+            <DirDrawer
+              direction="right"
+              label="Right"
+              description="Slides in from the right — settings panels."
+            />
+          </div>
         </div>
 
-        <div className="space-y-6">
-          {/* Bottom Direction */}
-          <div className="space-y-4">
-            <h4 className="text-fm-primary/80 text-sm font-medium">
-              Bottom Direction (Default)
-            </h4>
-            <div className="flex flex-wrap gap-2">
-              <DirectionDrawer
-                direction="bottom"
-                title="Bottom Drawer"
-                description="Slides up from the bottom - ideal for mobile navigation"
-              />
+        {/* Variant styles */}
+        <div className="space-y-3">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Variant Styles
+          </h4>
+          <div className="flex flex-wrap gap-6">
+            <div className="space-y-2 text-center">
+              <Drawer direction="bottom">
+                <DrawerTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    Neutral
+                  </Button>
+                </DrawerTrigger>
+                <DrawerContent variant="neutral">
+                  <DrawerHeader>
+                    <DrawerTitle>Neutral Variant</DrawerTitle>
+                    <DrawerDescription>
+                      Frosted glass surface with backdrop blur.
+                    </DrawerDescription>
+                  </DrawerHeader>
+                  <DrawerFooter>
+                    <DrawerClose asChild>
+                      <Button>Close</Button>
+                    </DrawerClose>
+                  </DrawerFooter>
+                </DrawerContent>
+              </Drawer>
+              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                Neutral
+              </p>
             </div>
-          </div>
 
-          {/* Top Direction */}
-          <div className="space-y-4">
-            <h4 className="text-fm-primary/80 text-sm font-medium">
-              Top Direction
-            </h4>
-            <div className="flex flex-wrap gap-2">
-              <DirectionDrawer
-                direction="top"
-                title="Top Drawer"
-                description="Slides down from the top - useful for notifications"
-              />
+            <div className="space-y-2 text-center">
+              <Drawer direction="bottom">
+                <DrawerTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    Gradient
+                  </Button>
+                </DrawerTrigger>
+                <DrawerContent variant="gradient">
+                  <DrawerHeader>
+                    <DrawerTitle>Gradient Variant</DrawerTitle>
+                    <DrawerDescription>
+                      Surface primary with a white gradient overlay.
+                    </DrawerDescription>
+                  </DrawerHeader>
+                  <DrawerFooter>
+                    <DrawerClose asChild>
+                      <Button>Close</Button>
+                    </DrawerClose>
+                  </DrawerFooter>
+                </DrawerContent>
+              </Drawer>
+              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                Gradient
+              </p>
             </div>
-          </div>
 
-          {/* Left Direction */}
-          <div className="space-y-4">
-            <h4 className="text-fm-primary/80 text-sm font-medium">
-              Left Direction
-            </h4>
-            <div className="flex flex-wrap gap-2">
-              <DirectionDrawer
-                direction="left"
-                title="Left Drawer"
-                description="Slides in from the left - perfect for navigation menus"
-              />
+            <div className="space-y-2 text-center">
+              <Drawer direction="bottom">
+                <DrawerTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    Swipe handle
+                  </Button>
+                </DrawerTrigger>
+                <DrawerContent showSwipeButton>
+                  <DrawerHeader>
+                    <DrawerTitle>Swipe Handle</DrawerTitle>
+                    <DrawerDescription>
+                      Pill handle appears at the top of bottom drawers.
+                    </DrawerDescription>
+                  </DrawerHeader>
+                  <DrawerFooter>
+                    <DrawerClose asChild>
+                      <Button>Close</Button>
+                    </DrawerClose>
+                  </DrawerFooter>
+                </DrawerContent>
+              </Drawer>
+              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                Swipe button
+              </p>
             </div>
-          </div>
 
-          {/* Right Direction */}
-          <div className="space-y-4">
-            <h4 className="text-fm-primary/80 text-sm font-medium">
-              Right Direction
-            </h4>
-            <div className="flex flex-wrap gap-2">
-              <DirectionDrawer
-                direction="right"
-                title="Right Drawer"
-                description="Slides in from the right - great for settings panels"
-              />
+            <div className="space-y-2 text-center">
+              <Drawer direction="bottom">
+                <DrawerTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    No overlay
+                  </Button>
+                </DrawerTrigger>
+                <DrawerContent showOverlay={false}>
+                  <DrawerHeader>
+                    <DrawerTitle>No Overlay</DrawerTitle>
+                    <DrawerDescription>
+                      Drawer without the backdrop overlay.
+                    </DrawerDescription>
+                  </DrawerHeader>
+                  <DrawerFooter>
+                    <DrawerClose asChild>
+                      <Button>Close</Button>
+                    </DrawerClose>
+                  </DrawerFooter>
+                </DrawerContent>
+              </Drawer>
+              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                No overlay
+              </p>
             </div>
           </div>
         </div>
+
+        {/* Glass / noise options */}
+        <div className="space-y-3">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Glass &amp; Noise Overlay Options
+          </h4>
+          <div className="flex flex-wrap gap-6">
+            <OverlayDrawer label="Low opacity" opacity="low" />
+            <OverlayDrawer label="High opacity" opacity="high" />
+            <OverlayDrawer label="High glass" glass="high" />
+            <OverlayDrawer label="Noise texture" noise="medium" />
+          </div>
+        </div>
       </div>
     )
   },
@@ -355,614 +326,456 @@ export const DirectionExamples: Story = {
     docs: {
       description: {
         story:
-          "Comprehensive showcase of all drawer direction options with descriptions of their use cases.",
+          "Comparison of all four slide directions, both visual variants, swipe handle, overlay toggle, and glass/noise overlay options.",
       },
     },
   },
 }
 
-// 6. Basic Drawer
-export const Basic: Story = {
-  render: () => (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button>Open Drawer</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Basic Drawer</DrawerTitle>
-          <DrawerDescription>
-            This is a basic drawer example with header, content, and footer.
-          </DrawerDescription>
-        </DrawerHeader>
-        <p className="p-4 text-sm">
-          This is the main content area of the drawer. You can put any content
-          here.
-        </p>
-        <DrawerFooter>
-          <Button>Save Changes</Button>
-          <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Basic drawer example demonstrating the fundamental structure with header, content, and footer sections.",
-      },
-    },
-  },
-}
-// 2. Form Drawer with Select Components
-export const FormDrawer: Story = {
+// ─── Interactive ───────────────────────────────────────────────────────────────
+
+export const Interactive: Story = {
   render: () => {
-    const [formData, setFormData] = useState({
-      name: "",
-      email: "",
-      category: "",
-      priority: "",
-      message: "",
-      newsletter: false,
-    })
+    const InteractiveDemo = () => {
+      const [direction, setDirection] = useState<
+        "top" | "bottom" | "left" | "right"
+      >("bottom")
+      const [variant, setVariant] = useState<"neutral" | "gradient">("neutral")
+      const [opacity, setOpacity] = useState<
+        "high" | "medium" | "low" | "none"
+      >("medium")
+      const [glass, setGlass] = useState<"high" | "medium" | "low" | "none">(
+        "none"
+      )
+      const [noise, setNoise] = useState<"high" | "medium" | "low" | "none">(
+        "none"
+      )
+      const [showSwipeButton, setShowSwipeButton] = useState(false)
+      const [name, setName] = useState("")
+      const [email, setEmail] = useState("")
+      const [submitted, setSubmitted] = useState(false)
+
+      const directions = ["bottom", "top", "left", "right"] as const
+      const variants = ["neutral", "gradient"] as const
+      const levels = ["none", "low", "medium", "high"] as const
+
+      const btnCls = (active: boolean) =>
+        `font-fm-text text-fm-sm leading-fm-sm rounded px-2 py-1 outline-none transition-colors ${
+          active
+            ? "bg-fm-surface-contrast text-fm-contrast"
+            : "bg-fm-surface-secondary text-fm-secondary hover:text-fm-primary"
+        }`
 
-    const handleSubmit = (e: React.FormEvent) => {
-      e.preventDefault()
-      console.log("Form submitted:", formData)
-    }
+      return (
+        <div className="w-full p-8">
+          <div className="mx-auto max-w-3xl space-y-6">
+            <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+              {/* Controls panel */}
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-5 rounded-xl border p-5">
+                <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm font-semibold tracking-widest uppercase">
+                  Configuration
+                </p>
+
+                <div className="space-y-2">
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    Direction
+                  </p>
+                  <div className="flex flex-wrap gap-1">
+                    {directions.map((d) => (
+                      <button
+                        key={d}
+                        onClick={() => setDirection(d)}
+                        className={btnCls(direction === d)}
+                      >
+                        {d}
+                      </button>
+                    ))}
+                  </div>
+                </div>
 
-    return (
-      <Drawer>
-        <DrawerTrigger asChild>
-          <Button className="gap-2">
-            <EditBigIcon className="h-4 w-4" />
-            Contact Form
-          </Button>
-        </DrawerTrigger>
-        <DrawerContent>
-          <DrawerHeader>
-            <DrawerTitle>Contact Form</DrawerTitle>
-            <DrawerDescription>
-              Fill out the form below to get in touch with us.
-            </DrawerDescription>
-          </DrawerHeader>
-          <form onSubmit={handleSubmit} className="space-y-4 overflow-auto p-4">
-            <div className="space-y-2">
-              <Label htmlFor="name">Name</Label>
-              <Input
-                id="name"
-                value={formData.name}
-                onChange={(e) =>
-                  setFormData({ ...formData, name: e.target.value })
-                }
-                placeholder="Enter your name"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                value={formData.email}
-                onChange={(e) =>
-                  setFormData({ ...formData, email: e.target.value })
-                }
-                placeholder="Enter your email"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="category">Category</Label>
-              <Select
-                value={formData.category}
-                onValueChange={(value) =>
-                  setFormData({ ...formData, category: value })
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Select a category" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="general">General Inquiry</SelectItem>
-                  <SelectItem value="support">Technical Support</SelectItem>
-                  <SelectItem value="sales">Sales Question</SelectItem>
-                  <SelectItem value="feedback">Feedback</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="priority">Priority</Label>
-              <Select
-                value={formData.priority}
-                onValueChange={(value) =>
-                  setFormData({ ...formData, priority: value })
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Select priority level" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="low">Low</SelectItem>
-                  <SelectItem value="medium">Medium</SelectItem>
-                  <SelectItem value="high">High</SelectItem>
-                  <SelectItem value="urgent">Urgent</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="message">Message</Label>
-              <Textarea
-                id="message"
-                value={formData.message}
-                onChange={(e) =>
-                  setFormData({ ...formData, message: e.target.value })
-                }
-                placeholder="Enter your message"
-                rows={4}
-              />
-            </div>
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="newsletter"
-                checked={formData.newsletter}
-                onCheckedChange={(checked) =>
-                  setFormData({ ...formData, newsletter: !!checked })
-                }
-              />
-              <Label htmlFor="newsletter" className="text-sm">
-                Subscribe to newsletter
-              </Label>
-            </div>
-          </form>
-          <DrawerFooter>
-            <Button
-              disabled={!formData.name || !formData.email || !formData.message}
-              onClick={handleSubmit}
-            >
-              Submit
-            </Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    )
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Form drawer with select components instead of native select tags, demonstrating proper form handling and validation.",
-      },
-    },
-  },
-}
+                <div className="border-fm-divider-secondary border-t pt-4" />
 
-// 3. Settings Drawer with Select Components
-export const SettingsDrawer: Story = {
-  render: () => {
-    const [settings, setSettings] = useState({
-      theme: "dark",
-      notifications: "important",
-      language: "en",
-      timezone: "utc",
-    })
+                <div className="space-y-2">
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    Variant
+                  </p>
+                  <div className="flex flex-wrap gap-1">
+                    {variants.map((v) => (
+                      <button
+                        key={v}
+                        onClick={() => setVariant(v)}
+                        className={btnCls(variant === v)}
+                      >
+                        {v}
+                      </button>
+                    ))}
+                  </div>
+                </div>
 
-    return (
-      <Drawer>
-        <DrawerTrigger asChild>
-          <Button>Open Settings</Button>
-        </DrawerTrigger>
-        <DrawerContent>
-          <DrawerHeader>
-            <DrawerTitle>Settings</DrawerTitle>
-            <DrawerDescription>
-              Configure your application preferences.
-            </DrawerDescription>
-          </DrawerHeader>
-          <div className="space-y-6 overflow-auto p-4">
-            <div className="space-y-4">
-              <h3 className="text-sm font-medium">Appearance</h3>
-              <div className="space-y-2">
-                <Label htmlFor="theme">Theme</Label>
-                <Select
-                  value={settings.theme}
-                  onValueChange={(value) =>
-                    setSettings({ ...settings, theme: value })
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="light">Light</SelectItem>
-                    <SelectItem value="dark">Dark</SelectItem>
-                    <SelectItem value="system">System</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <div className="space-y-4">
-              <h3 className="text-sm font-medium">Notifications</h3>
-              <div className="space-y-2">
-                <Label htmlFor="notifications">Email Notifications</Label>
-                <Select
-                  value={settings.notifications}
-                  onValueChange={(value) =>
-                    setSettings({ ...settings, notifications: value })
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All notifications</SelectItem>
-                    <SelectItem value="important">Important only</SelectItem>
-                    <SelectItem value="none">None</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <div className="space-y-4">
-              <h3 className="text-sm font-medium">Regional</h3>
-              <div className="space-y-2">
-                <Label htmlFor="language">Language</Label>
-                <Select
-                  value={settings.language}
-                  onValueChange={(value) =>
-                    setSettings({ ...settings, language: value })
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="en">English</SelectItem>
-                    <SelectItem value="es">Spanish</SelectItem>
-                    <SelectItem value="fr">French</SelectItem>
-                    <SelectItem value="de">German</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="timezone">Timezone</Label>
-                <Select
-                  value={settings.timezone}
-                  onValueChange={(value) =>
-                    setSettings({ ...settings, timezone: value })
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="utc">UTC</SelectItem>
-                    <SelectItem value="est">Eastern Time</SelectItem>
-                    <SelectItem value="pst">Pacific Time</SelectItem>
-                    <SelectItem value="gmt">GMT</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </div>
-          <DrawerFooter>
-            <Button onClick={() => console.log("Settings saved:", settings)}>
-              Save Settings
-            </Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    )
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Settings drawer showcasing select components for configuration options with proper state management.",
-      },
-    },
-  },
-}
+                <div className="border-fm-divider-secondary border-t pt-4" />
 
-// 4. Nested Drawers
-export const NestedDrawers: Story = {
-  render: () => {
-    const [isNestedOpen, setIsNestedOpen] = useState(false)
+                <div className="space-y-2">
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    Opacity
+                  </p>
+                  <div className="flex flex-wrap gap-1">
+                    {levels.map((l) => (
+                      <button
+                        key={l}
+                        onClick={() => setOpacity(l)}
+                        className={btnCls(opacity === l)}
+                      >
+                        {l}
+                      </button>
+                    ))}
+                  </div>
+                </div>
 
-    return (
-      <Drawer>
-        <DrawerTrigger asChild>
-          <Button>Open Parent Drawer</Button>
-        </DrawerTrigger>
-        <DrawerContent>
-          <DrawerHeader>
-            <DrawerTitle>Parent Drawer</DrawerTitle>
-            <DrawerDescription>
-              This drawer contains a nested drawer example.
-            </DrawerDescription>
-          </DrawerHeader>
-          <div className="space-y-4 p-4">
-            <p className="text-muted-foreground text-sm">
-              This is the parent drawer content.
-            </p>
-            <Drawer open={isNestedOpen} onOpenChange={setIsNestedOpen}>
-              <DrawerTrigger asChild>
-                <Button variant="outline">Open Nested Drawer</Button>
-              </DrawerTrigger>
-              <DrawerContent>
-                <DrawerHeader>
-                  <DrawerTitle>Nested Drawer</DrawerTitle>
-                  <DrawerDescription>
-                    This is a nested drawer within the parent drawer.
-                  </DrawerDescription>
-                </DrawerHeader>
-                <div className="p-4">
-                  <p className="text-muted-foreground text-sm">
-                    Nested drawer content goes here.
+                <div className="space-y-2">
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    Glass
                   </p>
+                  <div className="flex flex-wrap gap-1">
+                    {levels.map((l) => (
+                      <button
+                        key={l}
+                        onClick={() => setGlass(l)}
+                        className={btnCls(glass === l)}
+                      >
+                        {l}
+                      </button>
+                    ))}
+                  </div>
                 </div>
-                <DrawerFooter>
-                  <Button onClick={() => setIsNestedOpen(false)}>
-                    Close Nested
-                  </Button>
-                  <DrawerClose asChild>
-                    <Button variant="outline">Cancel</Button>
-                  </DrawerClose>
-                </DrawerFooter>
-              </DrawerContent>
-            </Drawer>
-          </div>
-          <DrawerFooter>
-            <Button>Save</Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Close Parent</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    )
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Nested drawer example demonstrating proper modal stacking and z-index management.",
-      },
-    },
-  },
-}
 
-// 5. Custom Close Button
-export const CustomCloseButton: Story = {
-  render: () => (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button>Open Drawer with Custom Close</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <div className="flex items-center justify-between">
-            <div className="flex-1 text-center">
-              <DrawerTitle>Custom Close Button</DrawerTitle>
-              <DrawerDescription>
-                This drawer has a custom close button in the header.
-              </DrawerDescription>
+                <div className="space-y-2">
+                  <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    Noise
+                  </p>
+                  <div className="flex flex-wrap gap-1">
+                    {levels.map((l) => (
+                      <button
+                        key={l}
+                        onClick={() => setNoise(l)}
+                        className={btnCls(noise === l)}
+                      >
+                        {l}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="border-fm-divider-secondary border-t pt-4" />
+
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="swipe-btn"
+                    checked={showSwipeButton}
+                    onCheckedChange={(c) => setShowSwipeButton(!!c)}
+                  />
+                  <Label
+                    htmlFor="swipe-btn"
+                    className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm"
+                  >
+                    Swipe handle
+                  </Label>
+                </div>
+              </div>
+
+              {/* Preview stage */}
+              <div className="flex flex-col gap-3 lg:col-span-2">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary flex min-h-48 flex-col items-center justify-center gap-4 rounded-xl border p-8">
+                  {submitted && (
+                    <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border px-4 py-2">
+                      <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                        Form submitted for{" "}
+                        <span className="text-fm-primary font-medium">
+                          {name}
+                        </span>
+                      </p>
+                    </div>
+                  )}
+
+                  <Drawer direction={direction}>
+                    <DrawerTrigger asChild>
+                      <Button onClick={() => setSubmitted(false)}>
+                        Open Drawer
+                      </Button>
+                    </DrawerTrigger>
+                    <DrawerContent
+                      variant={variant}
+                      opacity={opacity}
+                      glass={glass}
+                      noise={noise}
+                      showSwipeButton={showSwipeButton}
+                    >
+                      <DrawerHeader>
+                        <DrawerTitle>Quick Contact</DrawerTitle>
+                        <DrawerDescription>
+                          Fill out the form to send a message.
+                        </DrawerDescription>
+                      </DrawerHeader>
+
+                      <div className="space-y-4 p-4">
+                        <div className="space-y-2">
+                          <Label htmlFor="drawer-name">Name</Label>
+                          <Input
+                            id="drawer-name"
+                            placeholder="Your name"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="drawer-email">Email</Label>
+                          <Input
+                            id="drawer-email"
+                            type="email"
+                            placeholder="your@email.com"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                          />
+                        </div>
+                      </div>
+
+                      <DrawerFooter>
+                        <DrawerClose asChild>
+                          <Button
+                            disabled={!name || !email}
+                            onClick={() => setSubmitted(true)}
+                          >
+                            Submit
+                          </Button>
+                        </DrawerClose>
+                        <DrawerClose asChild>
+                          <Button variant="outline">Cancel</Button>
+                        </DrawerClose>
+                      </DrawerFooter>
+                    </DrawerContent>
+                  </Drawer>
+                </div>
+
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+                  <code className="text-fm-secondary text-fm-sm leading-fm-sm font-(--font-fm-mono)">
+                    {`<Drawer direction="${direction}"><DrawerContent variant="${variant}" opacity="${opacity}" glass="${glass}" noise="${noise}" showSwipeButton={${showSwipeButton}} />`}
+                  </code>
+                </div>
+              </div>
             </div>
-            <DrawerClose asChild>
-              <Button variant="text" size="sm" className="ml-4">
-                <CrossIcon className="h-4 w-4" />
-              </Button>
-            </DrawerClose>
           </div>
-        </DrawerHeader>
+        </div>
+      )
+    }
 
-        <DrawerFooter>
-          <Button>Confirm</Button>
-          <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  ),
+    return <InteractiveDemo />
+  },
   parameters: {
     docs: {
       description: {
         story:
-          "Drawer with custom close button positioned in the header for enhanced user experience.",
+          "Live configurator — select direction, variant, overlay settings, and swipe handle, then open the drawer and submit the form inside to see state feedback.",
       },
     },
   },
 }
 
-// 6. Accessibility Example
-export const AccessibilityExample: Story = {
-  render: () => {
-    return (
-      <Drawer>
-        <DrawerTrigger asChild>
-          <Button>Accessible Drawer Demo</Button>
-        </DrawerTrigger>
-        <DrawerContent>
-          <DrawerHeader>
-            <DrawerTitle>Accessibility Features</DrawerTitle>
-            <DrawerDescription>
-              This drawer demonstrates proper accessibility implementation.
-            </DrawerDescription>
-          </DrawerHeader>
+// ─── UseCases ─────────────────────────────────────────────────────────────────
 
-          <div className="space-y-4 overflow-auto p-4">
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
-              <h4 className="text-fm-primary mb-2 font-medium">
-                Keyboard Navigation
-              </h4>
-              <ul className="text-fm-primary/80 space-y-1 text-sm">
-                <li>
-                  •{" "}
-                  <kbd className="bg-fm-surface-secondary rounded px-1">
-                    Tab
-                  </kbd>{" "}
-                  - Navigate between elements
-                </li>
-                <li>
-                  •{" "}
-                  <kbd className="bg-fm-surface-secondary rounded px-1">
-                    Escape
-                  </kbd>{" "}
-                  - Close drawer
-                </li>
-                <li>
-                  •{" "}
-                  <kbd className="bg-fm-surface-secondary rounded px-1">
-                    Enter
-                  </kbd>{" "}
-                  - Activate buttons
-                </li>
-                <li>
-                  •{" "}
-                  <kbd className="bg-fm-surface-secondary rounded px-1">
-                    Space
-                  </kbd>{" "}
-                  - Activate buttons
-                </li>
-              </ul>
-            </div>
+export const UseCases: Story = {
+  render: () => {
+    // Track actions bottom drawer
+    const TrackActionsDrawer = () => {
+      const [liked, setLiked] = useState(false)
+      const [queued, setQueued] = useState(false)
 
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
-              <h4 className="text-fm-primary mb-2 font-medium">
-                Focus Management
-              </h4>
-              <ul className="text-fm-primary/80 space-y-1 text-sm">
-                <li>• Automatic focus trapping within drawer</li>
-                <li>• Focus restoration when drawer closes</li>
-                <li>• Proper focus order for all interactive elements</li>
-                <li>• Screen reader announcements for state changes</li>
-              </ul>
-            </div>
+      return (
+        <Drawer direction="bottom">
+          <DrawerTrigger asChild>
+            <Button variant="outline" size="sm">
+              Track actions
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent showSwipeButton>
+            <DrawerHeader>
+              <DrawerTitle>Midnight Drive</DrawerTitle>
+              <DrawerDescription>Lo-fi Chill · 3:42</DrawerDescription>
+            </DrawerHeader>
 
-            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
-              <h4 className="text-fm-primary mb-2 font-medium">Drag Support</h4>
-              <ul className="text-fm-primary/80 space-y-1 text-sm">
-                <li>• Drag to close functionality</li>
-                <li>• Smooth animations during drag</li>
-                <li>• Haptic feedback on mobile devices</li>
-                <li>• Proper gesture recognition</li>
-              </ul>
+            <div className="space-y-1 p-4">
+              {[
+                {
+                  label: liked ? "Remove from Liked" : "Like this track",
+                  icon: TickCircleIcon,
+                  action: () => setLiked((v) => !v),
+                  active: liked,
+                },
+                {
+                  label: queued ? "Remove from queue" : "Add to queue",
+                  icon: MusicalNoteIcon,
+                  action: () => setQueued((v) => !v),
+                  active: queued,
+                },
+                {
+                  label: "Go to artist",
+                  icon: ChevronRightIcon,
+                  action: () => {},
+                  active: false,
+                },
+                {
+                  label: "Share",
+                  icon: SearchIcon,
+                  action: () => {},
+                  active: false,
+                },
+              ].map((item) => (
+                <button
+                  key={item.label}
+                  onClick={item.action}
+                  className={`flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors ${
+                    item.active
+                      ? "bg-fm-surface-positive-sec text-fm-primary"
+                      : "text-fm-primary hover:bg-fm-surface-secondary"
+                  }`}
+                >
+                  <item.icon className="text-fm-secondary h-5 w-5 shrink-0" />
+                  <span className="font-fm-text text-fm-md leading-fm-md">
+                    {item.label}
+                  </span>
+                </button>
+              ))}
             </div>
-          </div>
 
-          <DrawerFooter>
-            <DrawerClose asChild>
-              <Button>Close Drawer</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    )
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Comprehensive accessibility example showcasing keyboard navigation, focus management, and drag support features.",
-      },
-    },
-  },
-}
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button variant="outline">Close</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      )
+    }
 
-// 7. Drawer without Overlay
-export const DrawerWithoutOverlay: Story = {
-  render: () => (
-    <div>
-      <Drawer>
-        <DrawerTrigger asChild>
-          <Button className="relative z-10">Open Drawer (No Overlay)</Button>
-        </DrawerTrigger>
-        <DrawerContent showOverlay={false}>
-          <DrawerHeader>
-            <DrawerTitle>Drawer Without Overlay</DrawerTitle>
-            <DrawerDescription>
-              This drawer opens without a backdrop overlay, allowing background
-              content to remain visible.
-            </DrawerDescription>
-          </DrawerHeader>
-          <DrawerFooter>
-            <Button>Apply Changes</Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Drawer example with `showOverlay={false}` demonstrating how to create non-modal drawer interactions that don't obscure background content.",
-      },
-    },
-  },
-}
+    // Side navigation drawer
+    const NavDrawer = () => {
+      const [active, setActive] = useState("Home")
+      const items = [
+        { label: "Home", icon: SiteLogoIcon },
+        { label: "Search", icon: SearchIcon },
+        { label: "Library", icon: MusicalNoteIcon },
+        { label: "Settings", icon: MaintenanceIcon },
+      ]
 
-// 8. Overlay Variations
-export const OverlayVariations: Story = {
-  render: () => {
-    const OverlayDrawer = ({
-      opacity,
-      glass,
-      noise,
-      title,
-      description,
-    }: any) => {
       return (
-        <Drawer>
+        <Drawer direction="left">
           <DrawerTrigger asChild>
             <Button variant="outline" size="sm">
-              {title}
+              Side navigation
             </Button>
           </DrawerTrigger>
-          <DrawerContent
-            opacity={opacity}
-            glass={glass}
-            noise={noise}
-            variant="neutral"
-          >
+          <DrawerContent>
             <DrawerHeader>
-              <DrawerTitle>{title}</DrawerTitle>
-              <DrawerDescription>{description}</DrawerDescription>
+              <DrawerTitle>Navigation</DrawerTitle>
+              <DrawerDescription>Main app navigation</DrawerDescription>
             </DrawerHeader>
-            <div className="py-4">
-              <div className="text-fm-primary/60 grid grid-cols-2 gap-2 text-xs">
-                <div>
-                  Opacity:{" "}
-                  <span className="text-fm-primary">
-                    {opacity || "default"}
+
+            <nav className="space-y-1 p-4">
+              {items.map((item) => (
+                <button
+                  key={item.label}
+                  onClick={() => setActive(item.label)}
+                  className={`flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors ${
+                    active === item.label
+                      ? "bg-fm-surface-info-sec text-fm-primary"
+                      : "text-fm-primary hover:bg-fm-surface-secondary"
+                  }`}
+                >
+                  <item.icon className="text-fm-secondary h-5 w-5 shrink-0" />
+                  <span className="font-fm-text text-fm-md leading-fm-md">
+                    {item.label}
                   </span>
+                </button>
+              ))}
+            </nav>
+
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button variant="outline">Close</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      )
+    }
+
+    // Settings panel drawer
+    const SettingsDrawer = () => {
+      const [autoplay, setAutoplay] = useState(true)
+      const [notifications, setNotifications] = useState(false)
+      const [hq, setHq] = useState(true)
+
+      return (
+        <Drawer direction="right">
+          <DrawerTrigger asChild>
+            <Button variant="outline" size="sm">
+              Settings panel
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Playback Settings</DrawerTitle>
+              <DrawerDescription>
+                Configure your listening experience
+              </DrawerDescription>
+            </DrawerHeader>
+
+            <div className="space-y-5 p-4">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+                <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm mb-3 font-semibold tracking-widest uppercase">
+                  Playback
+                </p>
+                <div className="space-y-3">
+                  {[
+                    { label: "Autoplay", value: autoplay, set: setAutoplay },
+                    { label: "High quality audio", value: hq, set: setHq },
+                  ].map((s) => (
+                    <div
+                      key={s.label}
+                      className="flex items-center justify-between"
+                    >
+                      <span className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                        {s.label}
+                      </span>
+                      <Checkbox
+                        checked={s.value}
+                        onCheckedChange={(c) => s.set(!!c)}
+                      />
+                    </div>
+                  ))}
                 </div>
-                <div>
-                  Glass:{" "}
-                  <span className="text-fm-primary">{glass || "default"}</span>
-                </div>
-                <div>
-                  Noise:{" "}
-                  <span className="text-fm-primary">{noise || "none"}</span>
-                </div>
-                <div>
-                  Variant: <span className="text-fm-primary">neutral</span>
+              </div>
+
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+                <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm mb-3 font-semibold tracking-widest uppercase">
+                  Notifications
+                </p>
+                <div className="flex items-center justify-between">
+                  <span className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
+                    Push notifications
+                  </span>
+                  <Checkbox
+                    checked={notifications}
+                    onCheckedChange={(c) => setNotifications(!!c)}
+                  />
                 </div>
               </div>
             </div>
+
             <DrawerFooter>
               <DrawerClose asChild>
-                <Button>Close</Button>
+                <Button>Save</Button>
+              </DrawerClose>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
               </DrawerClose>
             </DrawerFooter>
           </DrawerContent>
@@ -971,180 +784,39 @@ export const OverlayVariations: Story = {
     }
 
     return (
-      <div className="space-y-8">
-        <div className="text-center">
-          <h3 className="text-fm-primary mb-2 font-medium">
-            Overlay Variations
-          </h3>
-          <p className="text-fm-primary/60 text-sm">
-            Different overlay effects for various visual styles
+      <div className="mx-auto max-w-3xl space-y-8 p-8">
+        <div className="space-y-3">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Mobile Bottom Drawer — Track Actions
+          </h4>
+          <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-xl">
+            A bottom sheet presenting contextual actions for the currently
+            playing track. Includes a swipe handle and stateful like/queue
+            toggles.
           </p>
+          <TrackActionsDrawer />
         </div>
 
-        <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
-          <OverlayDrawer
-            opacity="low"
-            title="Low Opacity"
-            description="Subtle background dimming (40%)"
-          />
-          <OverlayDrawer
-            opacity="medium"
-            title="Medium Opacity"
-            description="Balanced background dimming (60%)"
-          />
-          <OverlayDrawer
-            opacity="high"
-            title="High Opacity"
-            description="Strong background dimming (80%)"
-          />
-          <OverlayDrawer
-            opacity="none"
-            title="Full Opacity"
-            description="Complete background coverage (100%)"
-          />
-          <OverlayDrawer
-            glass="low"
-            title="Low Glass"
-            description="Subtle backdrop blur effect"
-          />
-          <OverlayDrawer
-            glass="medium"
-            title="Medium Glass"
-            description="Balanced backdrop blur effect"
-          />
-          <OverlayDrawer
-            glass="high"
-            title="High Glass"
-            description="Strong backdrop blur effect"
-          />
-          <OverlayDrawer
-            noise="low"
-            title="Low Noise"
-            description="Subtle texture pattern"
-          />
-          <OverlayDrawer
-            noise="medium"
-            title="Medium Noise"
-            description="Balanced texture pattern"
-          />
-          <OverlayDrawer
-            noise="high"
-            title="High Noise"
-            description="Strong texture pattern"
-          />
-          <OverlayDrawer
-            opacity="medium"
-            glass="medium"
-            noise="medium"
-            title="Balanced"
-            description="All effects at medium level"
-          />
-        </div>
-      </div>
-    )
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Showcase of different overlay configurations demonstrating various opacity, glass, and noise effects.",
-      },
-    },
-  },
-}
-
-// 9. Variant Examples
-export const VariantExamples: Story = {
-  render: () => {
-    return (
-      <div className="space-y-8">
-        <div className="text-center">
-          <h3 className="text-fm-primary mb-2 font-medium">Drawer Variants</h3>
-          <p className="text-fm-primary/60 text-sm">
-            Compare the neutral (default) and gradient variants
+        <div className="space-y-3">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Side Navigation Drawer
+          </h4>
+          <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-xl">
+            A left-side navigation drawer for switching between primary app
+            sections. Active item is highlighted.
           </p>
+          <NavDrawer />
         </div>
 
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-          <div className="space-y-4">
-            <h4 className="text-fm-primary text-center font-medium">
-              Neutral Variant (Default)
-            </h4>
-            <Drawer>
-              <DrawerTrigger asChild>
-                <Button variant="outline" className="w-full">
-                  Open Neutral Drawer
-                </Button>
-              </DrawerTrigger>
-              <DrawerContent variant="neutral">
-                <DrawerHeader>
-                  <DrawerTitle>Neutral Variant</DrawerTitle>
-                  <DrawerDescription>
-                    This is the default neutral variant with frosted glass
-                    background and border.
-                  </DrawerDescription>
-                </DrawerHeader>
-                <div className="py-4">
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
-                    <h5 className="text-fm-primary mb-2 font-medium">
-                      Features:
-                    </h5>
-                    <ul className="text-fm-primary/70 space-y-1 text-sm">
-                      <li>• Frosted glass background</li>
-                      <li>• Subtle border</li>
-                      <li>• Backdrop blur effect</li>
-                      <li>• Semi-transparent appearance</li>
-                    </ul>
-                  </div>
-                </div>
-                <DrawerFooter>
-                  <DrawerClose asChild>
-                    <Button>Close</Button>
-                  </DrawerClose>
-                </DrawerFooter>
-              </DrawerContent>
-            </Drawer>
-          </div>
-
-          <div className="space-y-4">
-            <h4 className="text-fm-primary text-center font-medium">
-              Gradient Variant
-            </h4>
-            <Drawer>
-              <DrawerTrigger asChild>
-                <Button variant="outline" className="w-full">
-                  Open Gradient Drawer
-                </Button>
-              </DrawerTrigger>
-              <DrawerContent variant="gradient">
-                <DrawerHeader>
-                  <DrawerTitle>Gradient Variant</DrawerTitle>
-                  <DrawerDescription>
-                    This is the gradient variant with white gradient background
-                    and no border.
-                  </DrawerDescription>
-                </DrawerHeader>
-                <div className="py-4">
-                  <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
-                    <h5 className="text-fm-primary mb-2 font-medium">
-                      Features:
-                    </h5>
-                    <ul className="text-fm-primary/70 space-y-1 text-sm">
-                      <li>• White gradient background</li>
-                      <li>• No border</li>
-                      <li>• Clean, modern appearance</li>
-                      <li>• Solid background effect</li>
-                    </ul>
-                  </div>
-                </div>
-                <DrawerFooter>
-                  <DrawerClose asChild>
-                    <Button>Close</Button>
-                  </DrawerClose>
-                </DrawerFooter>
-              </DrawerContent>
-            </Drawer>
-          </div>
+        <div className="space-y-3">
+          <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+            Settings Panel Drawer
+          </h4>
+          <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-xl">
+            A right-side settings panel that groups playback and notification
+            preferences with interactive checkboxes.
+          </p>
+          <SettingsDrawer />
         </div>
       </div>
     )
@@ -1153,43 +825,7 @@ export const VariantExamples: Story = {
     docs: {
       description: {
         story:
-          "Simple comparison of the two drawer variants: neutral (default) with frosted glass background and gradient with white gradient background.",
-      },
-    },
-  },
-}
-
-export const DrawerWithSwipeButton: Story = {
-  render: () => (
-    <div>
-      <Drawer>
-        <DrawerTrigger asChild>
-          <Button className="relative z-10">
-            Open Drawer (With Swipe button)
-          </Button>
-        </DrawerTrigger>
-        <DrawerContent showSwipeButton={true}>
-          <DrawerHeader>
-            <DrawerTitle>Drawer with Swipe button</DrawerTitle>
-            <DrawerDescription>
-              This drawer opens with a swipe button.
-            </DrawerDescription>
-          </DrawerHeader>
-          <DrawerFooter>
-            <Button>Apply Changes</Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Drawer example with `showSwipeButton={true}` showing a swipe indicator button",
+          "Three realistic product scenarios: a mobile bottom track-actions sheet, a left-side app navigation drawer, and a right-side settings panel.",
       },
     },
   },