aural-ui 4.2.5 → 4.4.0

package/dist/components/button/Button.stories.tsx

@@ -2,6 +2,8 @@ import React from "react"
 import {
   CircularPlayIcon,
   HeartIcon,
+  PlusIcon,
+  SearchIcon,
   SettingIcon,
   SkipBackwardIcon,
   SkipForwardIcon,
@@ -21,22 +23,22 @@ const meta: Meta<typeof Button> = {
     docs: {
       description: {
         component:
-          "A versatile button component with six visual variants (primary, secondary, outline, text, chip, chipActive), three sizes, optional noise texture, icon slots, and tooltip support. Built with CVA for composable, type-safe variant management.",
+          "A versatile button component with six visual variants (primary, secondary, outline, text, chip, chipActive), three sizes, left/right icon slots, and optional tooltip support via the withTooltip HOC. Noise texture is applied automatically per variant.",
       },
       page: () => (
         <AuralComponentDocsPage
           features={[
             {
               title: "6 Visual Variants",
-              description: "From primary to chip",
+              description: "Primary to chipActive",
             },
             {
-              title: "Noise Texture",
-              description: "4 levels of grain",
+              title: "Icon Slots",
+              description: "Left and right icons",
             },
             {
-              title: "Icon Slots & Tooltip",
-              description: "Left, right, tooltip",
+              title: "Tooltip Support",
+              description: "Built-in via withTooltip",
             },
           ]}
         />
@@ -44,13 +46,6 @@ const meta: Meta<typeof Button> = {
     },
   },
   tags: ["autodocs"],
-  args: {
-    variant: "primary",
-    size: "md",
-    noise: "medium",
-    isDisabled: false,
-    children: "Click me",
-  },
   argTypes: {
     variant: {
       control: { type: "select" },
@@ -62,25 +57,28 @@ const meta: Meta<typeof Button> = {
         "chip",
         "chipActive",
       ],
+      description: "Visual style of the button",
     },
     size: {
       control: { type: "select" },
       options: ["sm", "md", "lg"],
-    },
-    noise: {
-      control: { type: "select" },
-      options: ["none", "low", "medium", "strong"],
+      description: "Button size",
     },
     isDisabled: {
       control: { type: "boolean" },
+      description: "Disables the button",
     },
-    leftIcon: {
-      control: { type: "boolean" },
-    },
-    rightIcon: {
-      control: { type: "boolean" },
+    children: {
+      control: { type: "text" },
+      description: "Button label",
     },
   },
+  args: {
+    variant: "primary",
+    size: "md",
+    isDisabled: false,
+    children: "Click me",
+  },
 }
 
 export default meta
@@ -89,18 +87,11 @@ type Story = StoryObj<typeof Button>
 // ─── 1. Playground ────────────────────────────────────────────────────────────
 
 export const Playground: Story = {
-  args: {
-    variant: "primary",
-    size: "md",
-    noise: "medium",
-    isDisabled: false,
-    children: "Click me",
-  },
   render: (args) => (
     <div className="flex w-full max-w-sm flex-col items-center space-y-4">
       <Button {...args} />
       <div className="border-fm-divider-secondary bg-fm-surface-secondary w-full rounded-lg border px-4 py-3">
-        <code className="text-fm-secondary text-fm-md leading-fm-md font-(--font-fm-mono)">{`<Button variant="${args.variant}" size="${args.size}" noise="${args.noise}"${args.isDisabled ? " isDisabled" : ""}>${args.children}</Button>`}</code>
+        <code className="text-fm-secondary text-fm-md leading-fm-md font-[var(--font-fm-mono)]">{`<Button variant="${args.variant}" size="${args.size}"${args.isDisabled ? " isDisabled" : ""}>${args.children}</Button>`}</code>
       </div>
     </div>
   ),
@@ -108,7 +99,7 @@ export const Playground: Story = {
     docs: {
       description: {
         story:
-          "Use the controls panel in the sidebar to explore all Button props. The code snippet below the button updates live to reflect the current configuration.",
+          "Use the sidebar controls to explore all Button props. The code snippet below updates live.",
       },
     },
   },
@@ -124,179 +115,22 @@ export const AllVariants: Story = {
           Variants
         </h4>
         <div className="flex flex-wrap items-end gap-4">
-          <div className="space-y-2 text-center">
-            <Button variant="primary" noise="medium">
-              Primary
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Primary
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="secondary">Secondary</Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Secondary
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="outline" noise="none">
-              Outline
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Outline
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="text" noise="none">
-              Text
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Text
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="chip" noise="none">
-              Chip
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Chip
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="chipActive" noise="medium">
-              Chip Active
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Chip Active
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
-          Sizes
-        </h4>
-        <div className="flex flex-wrap items-end gap-4">
-          <div className="space-y-2 text-center">
-            <Button variant="primary" size="sm" noise="medium">
-              Small
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Small (sm)
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="primary" size="md" noise="medium">
-              Medium
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Medium (md)
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="primary" size="lg" noise="medium">
-              Large
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Large (lg)
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
-          Noise Levels (Primary)
-        </h4>
-        <div className="flex flex-wrap items-end gap-4">
-          <div className="space-y-2 text-center">
-            <Button variant="primary" noise="none">
-              None
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              None
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="primary" noise="low">
-              Low
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Low
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="primary" noise="medium">
-              Medium
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Medium
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="primary" noise="strong">
-              Strong
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Strong
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
-          Noise Levels (Secondary)
-        </h4>
-        <div className="flex flex-wrap items-end gap-4">
-          <div className="space-y-2 text-center">
-            <Button variant="secondary" noise="none">
-              None
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              None
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="secondary" noise="low">
-              Low
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Low
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="secondary" noise="medium">
-              Medium
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Medium
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="secondary" noise="strong">
-              Strong
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Strong
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
-          Chip — Noise Levels
-        </h4>
-        <div className="flex flex-wrap items-end gap-4">
-          {(["none", "low", "medium", "strong"] as const).map((noise) => (
-            <div key={noise} className="space-y-2 text-center">
-              <Button variant="chip" noise={noise}>
-                {noise.charAt(0).toUpperCase() + noise.slice(1)}
+          {(
+            [
+              "primary",
+              "secondary",
+              "outline",
+              "text",
+              "chip",
+              "chipActive",
+            ] as const
+          ).map((variant) => (
+            <div key={variant} className="space-y-2 text-center">
+              <Button variant={variant}>
+                {variant.charAt(0).toUpperCase() + variant.slice(1)}
               </Button>
-              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm capitalize">
-                {noise}
+              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                {variant}
               </p>
             </div>
           ))}
@@ -305,16 +139,16 @@ export const AllVariants: Story = {
 
       <div className="space-y-4">
         <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
-          Chip Active — Noise Levels
+          Sizes — Primary
         </h4>
-        <div className="flex flex-wrap items-end gap-4">
-          {(["none", "low", "medium", "strong"] as const).map((noise) => (
-            <div key={noise} className="space-y-2 text-center">
-              <Button variant="chipActive" noise={noise}>
-                {noise.charAt(0).toUpperCase() + noise.slice(1)}
+        <div className="flex flex-wrap items-end gap-6">
+          {(["sm", "md", "lg"] as const).map((size) => (
+            <div key={size} className="space-y-2 text-center">
+              <Button variant="primary" size={size}>
+                Button
               </Button>
-              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm capitalize">
-                {noise}
+              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                {size}
               </p>
             </div>
           ))}
@@ -323,13 +157,13 @@ export const AllVariants: Story = {
 
       <div className="space-y-4">
         <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
-          Chip vs Chip Active — Sizes
+          Chip vs Chip Active — All Sizes
         </h4>
         <div className="flex flex-wrap items-end gap-6">
           {(["sm", "md", "lg"] as const).map((size) => (
-            <div key={size} className="space-y-3">
+            <div key={size} className="flex flex-col items-center gap-3">
               <div className="space-y-2 text-center">
-                <Button variant="chip" size={size} noise="medium">
+                <Button variant="chip" size={size}>
                   Chip
                 </Button>
                 <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
@@ -337,7 +171,7 @@ export const AllVariants: Story = {
                 </p>
               </div>
               <div className="space-y-2 text-center">
-                <Button variant="chipActive" size={size} noise="medium">
+                <Button variant="chipActive" size={size}>
                   Chip Active
                 </Button>
                 <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
@@ -354,7 +188,7 @@ export const AllVariants: Story = {
     docs: {
       description: {
         story:
-          "All six variants, three sizes, all four noise levels on primary and secondary, and a full chip/chipActive noise and size breakdown.",
+          "All six variants at default size, a size comparison for the primary variant, and a chip vs chipActive breakdown across all three sizes.",
       },
     },
   },
@@ -370,125 +204,225 @@ export const States: Story = {
           Disabled — All Variants
         </h4>
         <div className="flex flex-wrap items-end gap-4">
-          <div className="space-y-2 text-center">
-            <Button variant="primary" isDisabled>
-              Primary
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Primary
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="secondary" isDisabled>
-              Secondary
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Secondary
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="outline" isDisabled>
-              Outline
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Outline
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="text" isDisabled>
-              Text
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Text
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="chip" isDisabled>
-              Chip
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Chip
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="chipActive" isDisabled>
-              Chip Active
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Chip Active
-            </p>
-          </div>
+          {(
+            [
+              "primary",
+              "secondary",
+              "outline",
+              "text",
+              "chip",
+              "chipActive",
+            ] as const
+          ).map((variant) => (
+            <div key={variant} className="space-y-2 text-center">
+              <Button variant={variant} isDisabled>
+                {variant.charAt(0).toUpperCase() + variant.slice(1)}
+              </Button>
+              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                {variant}
+              </p>
+            </div>
+          ))}
         </div>
       </div>
 
       <div className="space-y-4">
         <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
-          Disabled with Noise
+          Enabled vs Disabled
         </h4>
-        <div className="flex flex-wrap items-end gap-4">
-          <div className="space-y-2 text-center">
-            <Button variant="primary" noise="strong" isDisabled>
-              Primary
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Primary + strong noise
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="secondary" noise="medium" isDisabled>
-              Secondary
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Secondary + medium noise
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="chipActive" noise="low" isDisabled>
-              Chip Active
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Chip Active + low noise
-            </p>
-          </div>
+        <div className="flex flex-wrap items-end gap-8">
+          {(
+            [
+              "primary",
+              "secondary",
+              "outline",
+              "text",
+              "chip",
+              "chipActive",
+            ] as const
+          ).map((variant) => (
+            <div key={variant} className="flex flex-col items-center gap-3">
+              <div className="space-y-2 text-center">
+                <Button variant={variant}>Enabled</Button>
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  {variant} · enabled
+                </p>
+              </div>
+              <div className="space-y-2 text-center">
+                <Button variant={variant} isDisabled>
+                  Disabled
+                </Button>
+                <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                  {variant} · disabled
+                </p>
+              </div>
+            </div>
+          ))}
         </div>
       </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Disabled state across all six variants, and an enabled/disabled comparison for primary, secondary, and outline.",
+      },
+    },
+  },
+}
 
-      <div className="space-y-4">
-        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
-          Enabled vs Disabled
-        </h4>
-        <div className="flex flex-wrap items-end gap-6">
-          <div className="space-y-2 text-center">
-            <Button variant="primary" noise="medium">
-              Enabled
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Enabled
-            </p>
-          </div>
-          <div className="space-y-2 text-center">
-            <Button variant="primary" noise="medium" isDisabled>
-              Disabled
-            </Button>
-            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
-              Disabled
-            </p>
+// ─── 4. Interactive ───────────────────────────────────────────────────────────
+
+export const Interactive: Story = {
+  render: function InteractiveStory() {
+    const [variant, setVariant] = React.useState<
+      "primary" | "secondary" | "outline" | "text" | "chip" | "chipActive"
+    >("primary")
+    const [size, setSize] = React.useState<"sm" | "md" | "lg">("md")
+    const [showLeftIcon, setShowLeftIcon] = React.useState(false)
+    const [showRightIcon, setShowRightIcon] = React.useState(false)
+    const [isDisabled, setIsDisabled] = React.useState(false)
+
+    const variants = [
+      "primary",
+      "secondary",
+      "outline",
+      "text",
+      "chip",
+      "chipActive",
+    ] as const
+    const sizes = ["sm", "md", "lg"] as const
+
+    const code = `<Button
+  variant="${variant}"
+  size="${size}"${isDisabled ? "\n  isDisabled" : ""}${showLeftIcon ? "\n  leftIcon={<StarIcon />}" : ""}${showRightIcon ? "\n  rightIcon={<PlusIcon />}" : ""}
+>
+  Get Started
+</Button>`
+
+    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">
+            <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">
+                Variant
+              </p>
+              <div className="flex flex-col gap-2">
+                {variants.map((v) => (
+                  <button
+                    key={v}
+                    onClick={() => setVariant(v)}
+                    className={`font-fm-text text-fm-sm leading-fm-sm rounded-lg px-3 py-2 text-left transition-colors ${
+                      variant === v
+                        ? "bg-fm-surface-primary text-fm-primary font-medium"
+                        : "text-fm-secondary hover:text-fm-primary"
+                    }`}
+                  >
+                    {v}
+                  </button>
+                ))}
+              </div>
+
+              <div className="border-fm-divider-secondary border-t pt-4" />
+
+              <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm font-semibold tracking-widest uppercase">
+                Size
+              </p>
+              <div className="flex gap-2">
+                {sizes.map((s) => (
+                  <button
+                    key={s}
+                    onClick={() => setSize(s)}
+                    className={`font-fm-text text-fm-sm leading-fm-sm rounded-lg px-3 py-2 transition-colors ${
+                      size === s
+                        ? "bg-fm-surface-primary text-fm-primary font-medium"
+                        : "text-fm-secondary hover:text-fm-primary"
+                    }`}
+                  >
+                    {s}
+                  </button>
+                ))}
+              </div>
+
+              <div className="border-fm-divider-secondary border-t pt-4" />
+
+              <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm font-semibold tracking-widest uppercase">
+                Options
+              </p>
+              <div className="flex flex-col gap-2">
+                <label className="flex cursor-pointer items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={showLeftIcon}
+                    onChange={(e) => setShowLeftIcon(e.target.checked)}
+                    className="accent-fm-primary"
+                  />
+                  <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    Left icon
+                  </span>
+                </label>
+                <label className="flex cursor-pointer items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={showRightIcon}
+                    onChange={(e) => setShowRightIcon(e.target.checked)}
+                    className="accent-fm-primary"
+                  />
+                  <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    Right icon
+                  </span>
+                </label>
+                <label className="flex cursor-pointer items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={isDisabled}
+                    onChange={(e) => setIsDisabled(e.target.checked)}
+                    className="accent-fm-primary"
+                  />
+                  <span className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                    Disabled
+                  </span>
+                </label>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-6 lg:col-span-2">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary flex min-h-40 items-center justify-center rounded-xl border p-8">
+                <Button
+                  variant={variant}
+                  size={size}
+                  isDisabled={isDisabled}
+                  leftIcon={showLeftIcon ? <StarIcon /> : undefined}
+                  rightIcon={showRightIcon ? <PlusIcon /> : undefined}
+                >
+                  Get Started
+                </Button>
+              </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-lg font-[var(--font-fm-mono)] whitespace-pre">
+                  {code}
+                </code>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  ),
+    )
+  },
   parameters: {
+    layout: "fullscreen",
     docs: {
       description: {
         story:
-          "Disabled state applied across all six variants, with and without noise. Compare enabled and disabled appearances side-by-side.",
+          "Configure variant, size, icon slots, and disabled state in the left panel. The live preview and code snippet update instantly.",
       },
     },
   },
 }
 
-// ─── 4. Use Cases ─────────────────────────────────────────────────────────────
+// ─── 5. Use Cases ─────────────────────────────────────────────────────────────
 
 export const UseCases: Story = {
   render: () => (
@@ -501,12 +435,7 @@ export const UseCases: Story = {
           <Button variant="secondary" size="sm">
             <SkipBackwardIcon className="h-4 w-4" />
           </Button>
-          <Button
-            variant="primary"
-            noise="strong"
-            size="lg"
-            leftIcon={<CircularPlayIcon />}
-          >
+          <Button variant="primary" size="lg" leftIcon={<CircularPlayIcon />}>
             Play Now
           </Button>
           <Button variant="secondary" size="sm">
@@ -523,26 +452,21 @@ export const UseCases: Story = {
           Subscription CTA
         </h4>
         <div className="border-fm-divider-secondary bg-fm-surface-secondary flex flex-col items-center gap-4 rounded-xl border p-6">
-          <p className="text-fm-primary font-fm-text text-fm-lg leading-fm-xl font-semibold">
+          <p className="text-fm-primary font-fm-text text-fm-lg leading-fm-xl font-medium">
             Unlock Premium Audio
           </p>
           <p className="text-fm-secondary font-fm-text text-fm-md leading-fm-xl max-w-xs text-center">
             Get lossless streaming, offline downloads, and exclusive content.
           </p>
           <div className="flex flex-wrap justify-center gap-3">
-            <Button
-              variant="primary"
-              noise="medium"
-              size="lg"
-              leftIcon={<StarIcon />}
-            >
+            <Button variant="primary" size="lg" leftIcon={<StarIcon />}>
               Start Free Trial
             </Button>
-            <Button variant="outline" noise="none" size="lg">
+            <Button variant="outline" size="lg">
               Learn More
             </Button>
           </div>
-          <Button variant="text" noise="none" size="sm">
+          <Button variant="text" size="sm">
             Not now
           </Button>
         </div>
@@ -575,7 +499,7 @@ export const UseCases: Story = {
             <p className="text-fm-primary font-fm-text text-fm-md leading-fm-md">
               Equalizer
             </p>
-            <Button variant="chipActive" size="sm" noise="low">
+            <Button variant="chipActive" size="sm">
               Active
             </Button>
           </div>
@@ -587,27 +511,16 @@ export const UseCases: Story = {
           Genre Filter Chips
         </h4>
         <div className="border-fm-divider-secondary bg-fm-surface-secondary flex flex-wrap gap-2 rounded-xl border p-6">
-          <Button variant="chipActive" size="sm" noise="medium">
+          <Button variant="chipActive" size="sm">
             All
           </Button>
-          <Button variant="chip" size="sm">
-            Hip-Hop
-          </Button>
-          <Button variant="chip" size="sm">
-            Electronic
-          </Button>
-          <Button variant="chip" size="sm">
-            Jazz
-          </Button>
-          <Button variant="chip" size="sm">
-            Classical
-          </Button>
-          <Button variant="chip" size="sm">
-            Rock
-          </Button>
-          <Button variant="chip" size="sm">
-            Pop
-          </Button>
+          {["Hip-Hop", "Electronic", "Jazz", "Classical", "Rock", "Pop"].map(
+            (genre) => (
+              <Button key={genre} variant="chip" size="sm">
+                {genre}
+              </Button>
+            )
+          )}
         </div>
       </div>
 
@@ -617,41 +530,50 @@ export const UseCases: Story = {
         </h4>
         <div className="border-fm-divider-secondary bg-fm-surface-secondary flex flex-wrap items-center justify-center gap-4 rounded-xl border p-6">
           <Button
-            tooltip="Primary — medium noise, tooltip above"
+            tooltip="Play your library"
             tooltipContentProps={{
-              align: "center",
               side: "top",
-              sideOffset: 10,
+              align: "center",
+              sideOffset: 8,
             }}
-            noise="medium"
+            leftIcon={<CircularPlayIcon />}
           >
-            Primary
+            Play
           </Button>
           <Button
             variant="secondary"
-            tooltip="Secondary — tooltip below"
+            tooltip="Add to favourites"
             tooltipContentProps={{
-              align: "center",
               side: "bottom",
-              sideOffset: 10,
+              align: "center",
+              sideOffset: 8,
             }}
+            leftIcon={<HeartIcon />}
           >
-            Secondary
+            Favourite
           </Button>
           <Button
             variant="outline"
-            tooltip="Outline — no noise, tooltip above"
+            tooltip="Search your library"
             tooltipContentProps={{
-              align: "center",
               side: "top",
-              sideOffset: 10,
+              align: "center",
+              sideOffset: 8,
             }}
-            noise="none"
+            leftIcon={<SearchIcon />}
           >
-            Outline
+            Search
           </Button>
-          <Button variant="text" tooltip="Text — tooltip on hover" noise="none">
-            Text
+          <Button
+            variant="text"
+            tooltip="Opens account settings"
+            tooltipContentProps={{
+              side: "top",
+              align: "center",
+              sideOffset: 8,
+            }}
+          >
+            Settings
           </Button>
         </div>
       </div>
@@ -662,7 +584,7 @@ export const UseCases: Story = {
     docs: {
       description: {
         story:
-          "Realistic audio-app scenarios: player playback controls, subscription upgrade CTA, settings panel actions, and genre filter chip row.",
+          "Realistic audio-app scenarios: player controls, subscription CTA, settings panel, genre chip filter, and tooltip integration.",
       },
     },
   },