aural-ui 4.0.1 → 4.2.0

package/dist/components/slider/Slider.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
 import { Slider } from "."
 
 const meta: Meta<typeof Slider> = {
@@ -8,126 +10,29 @@ const meta: Meta<typeof Slider> = {
   component: Slider,
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
-    },
     docs: {
       description: {
-        component: `
-# Slider Component
-
-A customizable range slider component built with Radix UI primitives and design system integration.
-
-## Features
-
-- **Multiple Variants**: Default, primary, secondary, positive, warning, and info variants
-- **Size Options**: Small (sm), medium (md), and large (lg) sizes  
-- **Orientation Support**: Horizontal and vertical orientations
-- **Range & Single Value**: Support for both single value and range selection
-- **Label Display**: Configurable thumb labels with custom text or values
-- **Align Thumb**: Optional thumb alignment
-- **Accessibility**: Built with Radix UI for keyboard navigation and screen reader support
-- **Custom Styling**: Flexible class override system for complete customization
-- **Touch Support**: Touch-friendly interaction on mobile devices
-- **Design System**: Integrated with FM design tokens
-
-## Anatomy
-
-### Core Components
-- **SliderRoot**: Main container with orientation and interaction handling
-- **SliderTrack**: Background track element
-- **SliderRange**: Active range/progress indicator
-- **SliderThumb**: Interactive handle(s) for value selection with optional labels
-
-## Props Interface
-
-\`\`\`tsx
-interface SliderProps extends React.ComponentProps<typeof SliderPrimitive.Root> {
-  variant?: "default" | "primary" | "secondary" | "positive" | "warning" | "info"
-  size?: "sm" | "md" | "lg"
-  showLabel?: boolean        // Show/hide thumb labels
-  label?: string            // Custom label text (overrides value display)
-  alignThumb?: "bottom" | "top" | "center"   // align thumb alignment
-  classes?: {
-    root?: string    // Override root container styles
-    track?: string   // Override track background styles  
-    range?: string   // Override active range styles
-    thumb?: string   // Override thumb handle styles
-  }
-}
-\`\`\`
-
-## New Features
-
-### Label Display
-- **showLabel**: Toggle thumb label visibility (default: true)
-- **label**: Custom text to display instead of values
-- **Value Display**: Automatic value display when no custom label provided
-
-### Align Thumb
-- **alignThumb**: Optional centered positioning for thumbs
-- **Track Alignment**: Conditional styling for track-thumb alignment
-
-### Enhanced Styling
-- **classes**: Granular style overrides for all sub-components
-- **Variant Support**: Consistent variant styling across track, range, and thumbs
-- **Size Variants**: Responsive sizing for different use cases
-
-## Usage Examples
-
-### Basic with Labels
-\`\`\`tsx
-<Slider 
-  defaultValue={[50]} 
-  showLabel={true}
-  max={100} 
-  min={0}
-/>
-\`\`\`
-
-### Custom Label Text
-\`\`\`tsx
-<Slider 
-  defaultValue={[75]} 
-  label="Volume"
-  showLabel={true}
-/>
-\`\`\`
-
-### Without Labels
-\`\`\`tsx
-<Slider 
-  defaultValue={[30]} 
-  showLabel={false}
-/>
-\`\`\`
-
-### Align Thumb
-\`\`\`tsx
-<Slider 
-  defaultValue={[60]}
-  alignThumb={"top"}
-/>
-\`\`\`
-
-### Custom Styling Classes
-\`\`\`tsx
-<Slider 
-  defaultValue={[45]}
-  classes={{
-    root: "custom-root-class",
-    track: "bg-red-100",
-    range: "bg-red-500", 
-    thumb: "bg-red-600 ring-red-200"
-  }}
-/>
-\`\`\`
-        `,
+        component:
+          "A customizable range slider built on Radix UI primitives. Supports six color variants, three sizes, horizontal/vertical orientations, single and dual-thumb range mode, optional thumb labels, and configurable thumb alignment.",
       },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "6 Color Variants",
+              description: "Default to info",
+            },
+            {
+              title: "Range Mode",
+              description: "Single or dual thumb",
+            },
+            {
+              title: "Thumb Labels",
+              description: "Optional value display",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
@@ -142,34 +47,34 @@ interface SliderProps extends React.ComponentProps<typeof SliderPrimitive.Root>
         "warning",
         "info",
       ],
-      description: "Visual variant of the slider",
+      description: "Color variant applied to the track range and thumb",
     },
     size: {
       control: "select",
       options: ["sm", "md", "lg"],
-      description: "Size of the slider track and thumb",
+      description: "Track thickness and thumb size",
     },
     showLabel: {
       control: "boolean",
-      description: "Show or hide thumb labels",
+      description: "Show or hide the value label on the thumb",
     },
     label: {
       control: "text",
-      description: "Custom label text (overrides value display)",
+      description: "Custom label text — overrides numeric value display",
     },
     alignThumb: {
       control: "select",
-      options: ["bottom", "top", "center"],
-      description: "Thumb alignment",
+      options: ["bottom", "center", "top"],
+      description: "Thumb vertical alignment relative to the track",
     },
     orientation: {
       control: "select",
       options: ["horizontal", "vertical"],
-      description: "Orientation of the slider",
+      description: "Track orientation",
     },
     disabled: {
       control: "boolean",
-      description: "Whether the slider is disabled",
+      description: "Disables interaction",
     },
     min: {
       control: "number",
@@ -181,7 +86,7 @@ interface SliderProps extends React.ComponentProps<typeof SliderPrimitive.Root>
     },
     step: {
       control: "number",
-      description: "Step increment",
+      description: "Step increment between values",
     },
   },
 }
@@ -189,713 +94,431 @@ interface SliderProps extends React.ComponentProps<typeof SliderPrimitive.Root>
 export default meta
 type Story = StoryObj<typeof Slider>
 
-// 1. Default Slider
-export const Default: Story = {
+// ─── 1. Playground ────────────────────────────────────────────────────────────
+
+export const Playground: Story = {
   args: {
     defaultValue: [50],
+    variant: "primary",
+    size: "md",
+    showLabel: true,
+    alignThumb: "bottom",
     min: 0,
     max: 100,
-    showLabel: true,
   },
   render: (args) => (
-    <div className="w-80 p-8">
-      <div className="mb-4">
-        <h3 className="text-fm-primary mb-2 text-lg font-medium">
-          Default Slider
-        </h3>
-        <p className="text-fm-secondary text-sm">
-          Basic slider with default styling and value labels
-        </p>
-      </div>
+    <div className="w-full max-w-sm space-y-4">
       <Slider {...args} />
-    </div>
-  ),
-}
-
-// 2. Label Variants
-export const LabelVariants: Story = {
-  render: () => (
-    <div className="w-80 space-y-6 p-8">
-      <div className="mb-6">
-        <h3 className="text-fm-primary mb-2 text-lg font-medium">
-          Label Options
-        </h3>
-        <p className="text-fm-secondary text-sm">
-          Different ways to display thumb labels
-        </p>
-      </div>
-
-      <div className="space-y-6">
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            With Value Labels (Default)
-          </label>
-          <Slider defaultValue={[60]} variant="primary" showLabel={true} />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Custom Label Text
-          </label>
-          <Slider
-            defaultValue={[75]}
-            variant="positive"
-            showLabel={true}
-            label="High"
-          />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Without Labels
-          </label>
-          <Slider defaultValue={[40]} variant="warning" showLabel={false} />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Range with Custom Labels
-          </label>
-          <Slider
-            defaultValue={[25, 75]}
-            variant="info"
-            showLabel={true}
-            label="Range"
-          />
-        </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-md leading-fm-md"
+          style={{ fontFamily: "var(--font-fm-mono)" }}
+        >
+          {`<Slider variant="${args.variant}" size="${args.size}" showLabel={${args.showLabel}} alignThumb="${args.alignThumb}" />`}
+        </code>
       </div>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use the controls panel in the sidebar to explore variant, size, label, and alignment options.",
+      },
+    },
+  },
 }
 
-// 3. All Variants with Labels
-export const Variants: Story = {
-  render: () => (
-    <div className="w-80 space-y-6 p-8">
-      <div className="mb-6">
-        <h3 className="text-fm-primary mb-2 text-lg font-medium">
-          Slider Variants
-        </h3>
-        <p className="text-fm-secondary text-sm">
-          Different color variants with value labels
-        </p>
-      </div>
+// ─── 2. All Variants ──────────────────────────────────────────────────────────
 
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
       <div className="space-y-4">
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Default
-          </label>
-          <Slider defaultValue={[40]} variant="default" showLabel={true} />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Primary
-          </label>
-          <Slider defaultValue={[60]} variant="primary" showLabel={true} />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Secondary
-          </label>
-          <Slider defaultValue={[35]} variant="secondary" showLabel={true} />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Positive
-          </label>
-          <Slider defaultValue={[80]} variant="positive" showLabel={true} />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Warning
-          </label>
-          <Slider defaultValue={[25]} variant="warning" showLabel={true} />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Info
-          </label>
-          <Slider defaultValue={[70]} variant="info" showLabel={true} />
-        </div>
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Variant × Size
+        </h4>
+        {(
+          [
+            { variant: "default", label: "Default", value: 40 },
+            { variant: "primary", label: "Primary", value: 60 },
+            { variant: "secondary", label: "Secondary", value: 35 },
+            { variant: "positive", label: "Positive", value: 80 },
+            { variant: "warning", label: "Warning", value: 25 },
+            { variant: "info", label: "Info", value: 70 },
+          ] as const
+        ).map(({ variant, label, value }) => (
+          <div key={variant} className="space-y-6">
+            <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+              {label}
+            </h4>
+            <div className="flex flex-wrap items-end gap-8">
+              <div className="min-w-40 space-y-2 text-center">
+                <Slider
+                  defaultValue={[value]}
+                  variant={variant}
+                  size="sm"
+                  showLabel
+                />
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  sm
+                </p>
+              </div>
+              <div className="min-w-40 space-y-2 text-center">
+                <Slider
+                  defaultValue={[value]}
+                  variant={variant}
+                  size="md"
+                  showLabel
+                />
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  md
+                </p>
+              </div>
+              <div className="min-w-40 space-y-2 text-center">
+                <Slider
+                  defaultValue={[value]}
+                  variant={variant}
+                  size="lg"
+                  showLabel
+                />
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  lg
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "All six color variants (default, primary, secondary, positive, warning, info) shown at each size (sm, md, lg).",
+      },
+    },
+  },
 }
 
-// 4. Different Sizes with Labels
-export const Sizes: Story = {
-  render: () => (
-    <div className="w-80 space-y-6 p-8">
-      <div className="mb-6">
-        <h3 className="text-fm-primary mb-2 text-lg font-medium">
-          Slider Sizes
-        </h3>
-        <p className="text-fm-secondary text-sm">
-          Small, medium, and large size options with labels
-        </p>
-      </div>
-
-      <div className="space-y-6">
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Small (sm)
-          </label>
-          <Slider
-            defaultValue={[30]}
-            size="sm"
-            variant="primary"
-            showLabel={true}
-          />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Medium (md) - Default
-          </label>
-          <Slider
-            defaultValue={[50]}
-            size="md"
-            variant="primary"
-            showLabel={true}
-          />
-        </div>
+// ─── 3. Configurations ────────────────────────────────────────────────────────
 
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Large (lg)
-          </label>
-          <Slider
-            defaultValue={[70]}
-            size="lg"
-            variant="primary"
-            showLabel={true}
-          />
-        </div>
-      </div>
-    </div>
-  ),
-}
-
-// 5. Align Thumb
-export const AlignThumb: Story = {
+export const Configurations: Story = {
   render: () => (
-    <div className="w-80 space-y-6 p-8">
-      <div className="mb-6">
-        <h3 className="text-fm-primary mb-2 text-lg font-medium">
-          Align Thumb
-        </h3>
-        <p className="text-fm-secondary text-sm">
-          Compare default, centered and top thumb alignment
-        </p>
-      </div>
-
-      <div className="space-y-6">
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Default alignment
-          </label>
-          <Slider
-            defaultValue={[50]}
-            variant="primary"
-            alignThumb={"bottom"}
-            showLabel={true}
-          />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Centered Thumb
-          </label>
-          <Slider
-            defaultValue={[50]}
-            variant="primary"
-            alignThumb={"center"}
-            showLabel={true}
-          />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-5 block text-sm font-medium">
-            Top Thumbs
-          </label>
-          <Slider
-            defaultValue={[50]}
-            variant="positive"
-            alignThumb={"top"}
-            showLabel={true}
-          />
-        </div>
-      </div>
-    </div>
-  ),
-}
-
-// 6. Custom Labels
-export const CustomLabels: Story = {
-  render: () => {
-    const [volume, setVolume] = React.useState([75])
-    const [quality, setQuality] = React.useState([3])
-    const [temperature, setTemperature] = React.useState([22])
-    const [mode, setMode] = React.useState([2])
-
-    const getQualityLabel = (value: number) => {
-      const labels = ["Low", "Medium", "High", "Ultra", "Max"]
-      return labels[value - 1] || "Unknown"
-    }
-
-    const getModeLabel = (value: number) => {
-      const modes = ["Eco", "Normal", "Performance", "Turbo"]
-      return modes[value - 1] || "Unknown"
-    }
-
-    return (
-      <div className="w-80 space-y-6 p-8">
-        <div className="mb-6">
-          <h3 className="text-fm-primary mb-2 text-lg font-medium">
-            Custom Labels
-          </h3>
-          <p className="text-fm-secondary text-sm">
-            Sliders with custom label text instead of values
-          </p>
-        </div>
-
-        <div className="space-y-6">
-          <div>
-            <label className="text-fm-primary mb-2 block text-sm font-medium">
-              Volume Control
-            </label>
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Thumb Alignment
+        </h4>
+        <div className="flex flex-wrap gap-8">
+          <div className="min-w-48 space-y-2 text-center">
             <Slider
-              value={volume}
-              onValueChange={setVolume}
+              defaultValue={[50]}
               variant="primary"
-              label="Vol"
-              showLabel={true}
+              alignThumb="bottom"
+              showLabel
             />
-            <div className="text-fm-secondary mt-1 text-xs">
-              Current: {volume[0]}%
-            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              bottom (default)
+            </p>
           </div>
-
-          <div>
-            <label className="text-fm-primary mb-2 block text-sm font-medium">
-              Quality Setting
-            </label>
+          <div className="min-w-48 space-y-2 text-center">
             <Slider
-              value={quality}
-              onValueChange={setQuality}
-              variant="info"
-              min={1}
-              max={5}
-              step={1}
-              label={getQualityLabel(quality[0])}
-              showLabel={true}
+              defaultValue={[50]}
+              variant="primary"
+              alignThumb="center"
+              showLabel
             />
-            <div className="text-fm-secondary mt-1 text-xs">
-              Level: {quality[0]}/5
-            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              center
+            </p>
           </div>
-
-          <div>
-            <label className="text-fm-primary mb-2 block text-sm font-medium">
-              Temperature
-            </label>
+          <div className="min-w-48 space-y-2 pt-5 text-center">
             <Slider
-              value={temperature}
-              onValueChange={setTemperature}
-              variant="warning"
-              min={16}
-              max={30}
-              label={`${temperature[0]}°C`}
-              showLabel={true}
+              defaultValue={[50]}
+              variant="primary"
+              alignThumb="top"
+              showLabel
             />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              top
+            </p>
           </div>
+        </div>
+      </div>
 
-          <div>
-            <label className="text-fm-primary mb-2 block text-sm font-medium">
-              Performance Mode
-            </label>
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Range Slider (Dual Thumbs)
+        </h4>
+        <div className="flex flex-wrap gap-8">
+          <div className="min-w-48 space-y-2 text-center">
+            <Slider defaultValue={[20, 80]} variant="primary" showLabel />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              primary range
+            </p>
+          </div>
+          <div className="min-w-48 space-y-2 text-center">
+            <Slider defaultValue={[30, 70]} variant="positive" showLabel />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              positive range
+            </p>
+          </div>
+          <div className="min-w-48 space-y-2 text-center">
             <Slider
-              value={mode}
-              onValueChange={setMode}
-              variant="positive"
-              min={1}
-              max={4}
-              step={1}
-              label={getModeLabel(mode[0])}
-              showLabel={true}
+              defaultValue={[10, 90]}
+              variant="info"
+              showLabel
+              label="Range"
             />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              custom label range
+            </p>
           </div>
         </div>
       </div>
-    )
-  },
-}
-
-// 7. Range Slider with Custom Styling
-export const RangeSlider: Story = {
-  render: () => {
-    const [values, setValues] = React.useState([25, 75])
 
-    return (
-      <div className="w-80 p-8">
-        <div className="mb-6">
-          <h3 className="text-fm-primary mb-2 text-lg font-medium">
-            Range Slider
-          </h3>
-          <p className="text-fm-secondary">
-            Select a range with dual handles and labels
-          </p>
-        </div>
-
-        <div className="space-y-4">
-          <Slider
-            value={values}
-            onValueChange={setValues}
-            variant="primary"
-            min={0}
-            max={100}
-            showLabel={true}
-            classes={{
-              thumb: "rounded-lg",
-            }}
-          />
-
-          <div className="text-fm-secondary flex justify-between text-sm">
-            <span>Min: {values[0]}</span>
-            <span>Max: {values[1]}</span>
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Vertical Orientation
+        </h4>
+        <div className="flex flex-wrap items-end gap-12">
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Slider
+                orientation="vertical"
+                defaultValue={[60]}
+                variant="primary"
+                className="h-48"
+                showLabel
+              />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              primary · vertical
+            </p>
           </div>
-
-          <div className="bg-fm-surface-secondary/20 mt-4 rounded-lg p-3">
-            <p className="text-fm-secondary text-sm">
-              Selected range: {values[0]} - {values[1]} ({values[1] - values[0]}{" "}
-              units)
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Slider
+                orientation="vertical"
+                defaultValue={[80]}
+                variant="positive"
+                className="h-48"
+                showLabel={false}
+              />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              positive · no label
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Slider
+                orientation="vertical"
+                defaultValue={[30, 80]}
+                variant="info"
+                className="h-48"
+                showLabel
+              />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              info · range
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <div className="flex justify-center">
+              <Slider
+                orientation="vertical"
+                defaultValue={[40]}
+                variant="warning"
+                className="h-48"
+                showLabel
+                label="Temp"
+              />
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              warning · custom label
             </p>
           </div>
         </div>
       </div>
-    )
-  },
-}
-
-// 8. Vertical Orientation with Labels
-export const VerticalSlider: Story = {
-  render: () => (
-    <div className="flex items-center justify-center gap-12 p-8">
-      <div className="text-center">
-        <h4 className="text-fm-primary mb-4 text-sm font-medium">
-          With Labels
-        </h4>
-        <Slider
-          orientation="vertical"
-          defaultValue={[60]}
-          variant="primary"
-          className="h-64"
-          showLabel={true}
-        />
-      </div>
 
-      <div className="text-center">
-        <h4 className="text-fm-primary mb-4 text-sm font-medium">
-          Without Labels
-        </h4>
-        <Slider
-          orientation="vertical"
-          defaultValue={[80]}
-          variant="positive"
-          className="h-64"
-          showLabel={false}
-        />
-      </div>
-
-      <div className="text-center">
-        <h4 className="text-fm-primary mb-4 text-sm font-medium">
-          Custom Label
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Label Display
         </h4>
-        <Slider
-          orientation="vertical"
-          defaultValue={[40]}
-          variant="warning"
-          className="h-64"
-          showLabel={true}
-          label="Temp"
-        />
-      </div>
-
-      <div className="text-center">
-        <h4 className="text-fm-primary mb-4 text-sm font-medium">Range</h4>
-        <Slider
-          orientation="vertical"
-          defaultValue={[30, 80]}
-          variant="info"
-          className="h-64"
-          showLabel={true}
-        />
+        <div className="flex flex-wrap gap-8">
+          <div className="min-w-48 space-y-2 text-center">
+            <Slider defaultValue={[60]} variant="primary" showLabel />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              numeric value
+            </p>
+          </div>
+          <div className="min-w-48 space-y-2 text-center">
+            <Slider
+              defaultValue={[75]}
+              variant="positive"
+              showLabel
+              label="High"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              custom text
+            </p>
+          </div>
+          <div className="min-w-48 space-y-2 text-center">
+            <Slider defaultValue={[40]} variant="warning" showLabel={false} />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              no label
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   ),
   parameters: {
-    layout: "fullscreen",
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Configuration axes: thumb alignment (bottom/center/top), range mode with dual thumbs, vertical orientation, and label display options.",
+      },
+    },
   },
 }
 
-// 9. Custom Styling Classes
-export const CustomStyling: Story = {
-  render: () => (
-    <div className="w-80 space-y-6 p-8">
-      <div className="mb-6">
-        <h3 className="text-fm-primary mb-2 text-lg font-medium">
-          Custom Styling
-        </h3>
-        <p className="text-fm-secondary text-sm">
-          Override default styles with custom classes
-        </p>
-      </div>
-
-      <div className="space-y-6">
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Custom Track & Range
-          </label>
-          <Slider
-            defaultValue={[40]}
-            showLabel={true}
-            classes={{
-              track: "bg-purple-900/40 rounded-full",
-              range:
-                "bg-gradient-to-r from-purple-400 to-pink-400 rounded-full",
-            }}
-          />
-        </div>
-
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Custom Thumb Styling
-          </label>
-          <Slider
-            defaultValue={[70]}
-            variant="primary"
-            showLabel={true}
-            classes={{
-              thumb:
-                "bg-white text-gray-900 border-2 border-fm-primary-500 ring-fm-primary-200 rounded-full shadow-lg",
-            }}
-          />
-        </div>
+// ─── 4. Interactive ───────────────────────────────────────────────────────────
 
-        <div>
-          <label className="text-fm-primary mb-2 block text-sm font-medium">
-            Gradient with Custom Root
-          </label>
-          <Slider
-            defaultValue={[55]}
-            showLabel={true}
-            label="Style"
-            classes={{
-              root: "p-2 bg-gray-900/20 rounded-lg",
-              range: "bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full",
-              thumb:
-                "bg-gradient-to-r from-cyan-400 to-blue-500 border-0 shadow-xl",
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  ),
-}
-
-// 10. Complete Interactive Showcase
-export const CompleteShowcase: Story = {
+export const Interactive: Story = {
   render: () => {
-    const [settings, setSettings] = React.useState({
-      volume: [80],
-      brightness: [65],
-      contrast: [50],
-      temperature: [18, 24],
-      quality: [4],
-      mode: [2],
-    })
-
-    const updateSetting = (key: string, value: number[]) => {
-      setSettings((prev) => ({ ...prev, [key]: value }))
-    }
-
-    const getQualityLabel = (value: number) => {
-      const labels = ["Low", "Medium", "High", "Ultra", "Max"]
-      return labels[value - 1] || "Unknown"
+    const [volume, setVolume] = React.useState([72])
+    const [brightness, setBrightness] = React.useState([55])
+
+    const getVolumeIcon = (v: number) => {
+      if (v === 0) return "Muted"
+      if (v < 33) return "Low"
+      if (v < 66) return "Mid"
+      return "High"
     }
 
-    const getModeLabel = (value: number) => {
-      const modes = ["Eco", "Normal", "Turbo"]
-      return modes[value - 1] || "Unknown"
+    const getBrightnessLabel = (v: number) => {
+      if (v < 25) return "Dim"
+      if (v < 50) return "Low"
+      if (v < 75) return "Mid"
+      return "Bright"
     }
 
     return (
-      <div className="w-96 space-y-8 p-8">
-        <div className="mb-8">
-          <h3 className="text-fm-primary mb-2 text-xl font-bold">
-            System Settings
-          </h3>
-          <p className="text-fm-secondary">
-            Comprehensive slider showcase with labels and custom styling
-          </p>
-        </div>
-
-        {/* Audio Settings */}
-        <div className="space-y-4">
-          <h4 className="text-fm-primary font-medium">Audio</h4>
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <label className="text-fm-secondary text-sm">Volume</label>
-              <span className="text-fm-primary text-sm font-medium">
-                {settings.volume[0]}%
-              </span>
-            </div>
-            <Slider
-              value={settings.volume}
-              onValueChange={(value) => updateSetting("volume", value)}
-              variant="primary"
-              size="md"
-              showLabel={true}
-              label="Vol"
-            />
-          </div>
-        </div>
-
-        {/* Display Settings */}
-        <div className="space-y-4">
-          <h4 className="text-fm-primary font-medium">Display</h4>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <label className="text-fm-secondary text-sm">Brightness</label>
-                <span className="text-fm-primary text-sm font-medium">
-                  {settings.brightness[0]}%
-                </span>
+      <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">
+                Presets
+              </p>
+              <div className="space-y-2">
+                {[
+                  { label: "Silent", vol: 0, bright: 20 },
+                  { label: "Quiet", vol: 25, bright: 40 },
+                  { label: "Default", vol: 72, bright: 55 },
+                  { label: "Party", vol: 100, bright: 90 },
+                ].map(({ label, vol, bright }) => (
+                  <button
+                    key={label}
+                    onClick={() => {
+                      setVolume([vol])
+                      setBrightness([bright])
+                    }}
+                    className="border-fm-divider-secondary text-fm-secondary hover:bg-fm-surface-secondary hover:text-fm-primary font-fm-text text-fm-sm leading-fm-sm w-full rounded-lg border px-3 py-2 text-left transition-colors"
+                  >
+                    {label}
+                  </button>
+                ))}
               </div>
-              <Slider
-                value={settings.brightness}
-                onValueChange={(value) => updateSetting("brightness", value)}
-                variant="warning"
-                size="sm"
-                showLabel={false}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <label className="text-fm-secondary text-sm">Contrast</label>
-                <span className="text-fm-primary text-sm font-medium">
-                  {settings.contrast[0]}%
-                </span>
+              <div className="border-fm-divider-secondary border-t pt-4" />
+              <div className="space-y-1">
+                <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm font-semibold tracking-widest uppercase">
+                  Live Values
+                </p>
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  Volume: {volume[0]}% · {getVolumeIcon(volume[0])}
+                </p>
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  Brightness: {brightness[0]}% ·{" "}
+                  {getBrightnessLabel(brightness[0])}
+                </p>
               </div>
-              <Slider
-                value={settings.contrast}
-                onValueChange={(value) => updateSetting("contrast", value)}
-                variant="info"
-                size="sm"
-                showLabel={true}
-              />
             </div>
-          </div>
-        </div>
 
-        {/* Environment Settings */}
-        <div className="space-y-4">
-          <h4 className="text-fm-primary font-medium">Environment</h4>
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <label className="text-fm-secondary text-sm">
-                Temperature Range
-              </label>
-              <span className="text-fm-primary text-sm font-medium">
-                {settings.temperature[0]}° - {settings.temperature[1]}°C
-              </span>
-            </div>
-            <Slider
-              value={settings.temperature}
-              onValueChange={(value) => updateSetting("temperature", value)}
-              variant="positive"
-              min={10}
-              max={30}
-              size="lg"
-              showLabel={true}
-              alignThumb={"center"}
-            />
-          </div>
-        </div>
-
-        {/* Quality Settings */}
-        <div className="space-y-4">
-          <h4 className="text-fm-primary font-medium">Performance</h4>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <label className="text-fm-secondary text-sm">Quality</label>
-                <span className="text-fm-primary text-sm font-medium">
-                  {getQualityLabel(settings.quality[0])}
-                </span>
+            {/* Preview Stage */}
+            <div className="flex flex-col gap-3 lg:col-span-2">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-8 rounded-xl border p-6">
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                      Volume
+                    </span>
+                    <span className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm font-medium">
+                      {volume[0]}%
+                    </span>
+                  </div>
+                  <Slider
+                    value={volume}
+                    onValueChange={setVolume}
+                    variant="primary"
+                    size="md"
+                    showLabel
+                    label="Vol"
+                    min={0}
+                    max={100}
+                  />
+                </div>
+
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                      Brightness
+                    </span>
+                    <span className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm font-medium">
+                      {brightness[0]}%
+                    </span>
+                  </div>
+                  <Slider
+                    value={brightness}
+                    onValueChange={setBrightness}
+                    variant="warning"
+                    size="md"
+                    showLabel
+                    label="Lux"
+                    min={0}
+                    max={100}
+                  />
+                </div>
               </div>
-              <Slider
-                value={settings.quality}
-                onValueChange={(value) => updateSetting("quality", value)}
-                variant="secondary"
-                min={1}
-                max={5}
-                step={1}
-                showLabel={true}
-                label={getQualityLabel(settings.quality[0])}
-              />
-            </div>
 
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <label className="text-fm-secondary text-sm">Mode</label>
-                <span className="text-fm-primary text-sm font-medium">
-                  {getModeLabel(settings.mode[0])}
-                </span>
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+                <code
+                  className="text-fm-secondary text-fm-md leading-fm-md"
+                  style={{ fontFamily: "var(--font-fm-mono)" }}
+                >
+                  {`<Slider value={[${volume[0]}]} variant="primary" showLabel label="Vol" />`}
+                </code>
               </div>
-              <Slider
-                value={settings.mode}
-                onValueChange={(value) => updateSetting("mode", value)}
-                variant="positive"
-                min={1}
-                max={3}
-                step={1}
-                showLabel={true}
-                label={getModeLabel(settings.mode[0])}
-                classes={{
-                  thumb: "rounded-full shadow-lg",
-                }}
-              />
             </div>
           </div>
         </div>
-
-        {/* Settings Summary */}
-        <div className="bg-fm-surface-secondary/20 mt-8 rounded-lg p-4">
-          <h5 className="text-fm-primary mb-2 font-medium">Current Settings</h5>
-          <div className="text-fm-secondary space-y-1 text-sm">
-            <div>Volume: {settings.volume[0]}%</div>
-            <div>Brightness: {settings.brightness[0]}%</div>
-            <div>Contrast: {settings.contrast[0]}%</div>
-            <div>
-              Temperature: {settings.temperature[0]}° -{" "}
-              {settings.temperature[1]}°C
-            </div>
-            <div>Quality: {getQualityLabel(settings.quality[0])}</div>
-            <div>Mode: {getModeLabel(settings.mode[0])}</div>
-          </div>
-        </div>
       </div>
     )
   },
   parameters: {
     layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Live volume and brightness sliders with preset buttons and real-time value display. Demonstrates controlled state and label customization.",
+      },
+    },
   },
 }