@elabs-ai/components-ui 4.0.0

package/src/components/skeleton/skeleton.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Skeleton } from "./skeleton";
+
+const meta = {
+  title: "States/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      description:
+        "Width/height and shape utilities applied to the skeleton (e.g. `h-4 w-32 rounded-full`).",
+      control: "text",
+      table: { category: "Styling" },
+    },
+  },
+} satisfies Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Card: Story = {
+  render: () => (
+    <div className="w-64 space-y-3">
+      <Skeleton className="h-32 w-full" />
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-4 w-1/2" />
+    </div>
+  ),
+};

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export type SkeletonProps = HTMLAttributes<HTMLDivElement>;
+
+/** Loading placeholder. Compose with width/height utilities, e.g. `h-4 w-32`. */
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+}

package/src/components/slider/index.ts

@@ -0,0 +1 @@
+export { Slider, type SliderProps, type SliderThumbProps } from "./slider";

package/src/components/slider/slider.stories.tsx

@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { Slider } from "./slider";
+const meta = {
+  title: "Forms/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+  argTypes: {
+    defaultValue: {
+      description: "Uncontrolled initial value(s) as an array.",
+      control: false,
+      table: { category: "State" },
+    },
+    value: {
+      description: "Controlled value(s) as an array.",
+      control: false,
+      table: { category: "State" },
+    },
+    min: {
+      description: "Minimum value of the range.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    max: {
+      description: "Maximum value of the range.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    step: {
+      description: "Increment between selectable values.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    disabled: {
+      description: "Disables the slider.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    orientation: {
+      description: "Layout direction of the slider.",
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+      table: { category: "Appearance" },
+    },
+    onValueChange: {
+      description: "Called when the slider value changes.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the root element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => <Slider defaultValue={[50]} max={100} step={1} className="w-64" />,
+  // Confirms the slider thumb is present and has the expected value attribute.
+  play: async ({ canvas }) => {
+    const thumb = canvas.getByRole("slider");
+    await expect(thumb).toBeInTheDocument();
+    await expect(thumb).toHaveAttribute("aria-valuenow", "50");
+  },
+};
+
+/**
+ * The name has to land on the THUMB — that is the element with `role="slider"`.
+ * `aria-label` (or `aria-labelledby`, for a visible `<Label>`) is routed there.
+ */
+export const Labelled: Story = {
+  render: () => (
+    <Slider aria-label="Decoration level" defaultValue={[4]} max={10} step={1} className="w-64" />
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("slider", { name: "Decoration level" })).toBeInTheDocument();
+  },
+};
+
+/**
+ * A replay scrubber announces "step 3 of 12" instead of the bare numeric
+ * value — `aria-valuetext` on `thumbProps` (or the top-level `aria-valuetext`
+ * shorthand) lands on the thumb, the element that actually carries
+ * `role="slider"`.
+ */
+export const CustomValueText: Story = {
+  render: () => (
+    <Slider
+      aria-label="Replay position"
+      defaultValue={[3]}
+      max={12}
+      step={1}
+      className="w-64"
+      thumbProps={{ "aria-valuetext": "step 3 of 12" }}
+    />
+  ),
+  play: async ({ canvas }) => {
+    const thumb = canvas.getByRole("slider", { name: "Replay position" });
+    await expect(thumb).toHaveAttribute("aria-valuetext", "step 3 of 12");
+  },
+};
+
+/**
+ * A range slider (array `defaultValue`) renders one thumb per value. Passing
+ * an ARRAY to `thumbProps` (#398) gives each thumb its own accessible name
+ * and `aria-valuetext` — a top-level `aria-label`/`aria-valuetext` would
+ * apply identically to both thumbs, which isn't what a min/max range wants.
+ */
+export const Range: Story = {
+  render: () => (
+    <Slider
+      defaultValue={[20, 80]}
+      max={100}
+      step={1}
+      className="w-64"
+      thumbProps={[
+        { "aria-label": "Minimum price", "aria-valuetext": "$20" },
+        { "aria-label": "Maximum price", "aria-valuetext": "$80" },
+      ]}
+    />
+  ),
+  play: async ({ canvas }) => {
+    const thumbs = canvas.getAllByRole("slider");
+    await expect(thumbs).toHaveLength(2);
+    await expect(thumbs[0]).toHaveAccessibleName("Minimum price");
+    await expect(thumbs[0]).toHaveAttribute("aria-valuetext", "$20");
+    await expect(thumbs[1]).toHaveAccessibleName("Maximum price");
+    await expect(thumbs[1]).toHaveAttribute("aria-valuetext", "$80");
+
+    // #398 AC-3 — a real accessibility-tree assertion, not just a DOM
+    // attribute snapshot: the DOM checks above prove the markup is right,
+    // not that a screen reader actually hears two distinctly-named,
+    // distinctly-valued thumbs. This reads Chromium's live AX tree via CDP
+    // (`Accessibility.getFullAXTree`), which is what assistive tech consumes.
+    //
+    // `@vitest/browser/context` is a virtual module that only resolves inside
+    // Vitest's browser-mode test runner (`pnpm --filter @elabs-ai/components-docs test-storybook` /
+    // `vitest --project storybook run`, the same engine CI's blocking
+    // "Storybook interaction + axe" job uses) — importing it anywhere else
+    // throws by the module's own design. The dynamic import + catch lets this
+    // block run there while leaving plain interactive Storybook browsing and
+    // a production `build-storybook` unaffected (they still get every DOM
+    // assertion above).
+    let browserContext: typeof import("@vitest/browser/context") | undefined;
+    try {
+      browserContext = await import("@vitest/browser/context");
+    } catch {
+      browserContext = undefined;
+    }
+    if (!browserContext) return;
+
+    interface AXProperty {
+      name: string;
+      value?: { value?: unknown };
+    }
+    interface AXNode {
+      role?: { value?: string };
+      name?: { value?: string };
+      ignored?: boolean;
+      properties?: AXProperty[];
+    }
+    interface FrameNode {
+      frame: { id: string };
+      childFrames?: FrameNode[];
+    }
+    // The base `CDPSession` type ships empty ("methods are defined by the
+    // provider type augmentation" — @vitest/browser/context.d.ts) and this
+    // file doesn't pull in the playwright provider's ambient augmentation, so
+    // `send` is typed by hand here rather than importing playwright's CDP
+    // protocol types into a story file.
+    interface CdpSession {
+      send: (method: string, params?: Record<string, unknown>) => Promise<unknown>;
+    }
+
+    const session = browserContext.cdp() as unknown as CdpSession;
+    await session.send("Accessibility.enable");
+    await session.send("Page.enable");
+    const { frameTree } = (await session.send("Page.getFrameTree")) as {
+      frameTree: FrameNode;
+    };
+    const frames: { id: string }[] = [];
+    const collectFrames = (node: FrameNode) => {
+      frames.push(node.frame);
+      for (const child of node.childFrames ?? []) collectFrames(child);
+    };
+    collectFrames(frameTree);
+
+    let axNodes: AXNode[] = [];
+    for (const frame of frames) {
+      const result = (await session.send("Accessibility.getFullAXTree", {
+        frameId: frame.id,
+      })) as { nodes: AXNode[] };
+      axNodes = axNodes.concat(result.nodes);
+    }
+
+    const sliderNodes = axNodes.filter((node) => node.role?.value === "slider" && !node.ignored);
+    await expect(sliderNodes).toHaveLength(2);
+
+    const valuetextOf = (node: AXNode) =>
+      node.properties?.find((property) => property.name === "valuetext")?.value?.value;
+    const namedThumbs = sliderNodes
+      .map((node) => ({ name: node.name?.value, valuetext: valuetextOf(node) }))
+      .sort((a, b) => String(a.name).localeCompare(String(b.name)));
+    await expect(namedThumbs).toEqual([
+      { name: "Maximum price", valuetext: "$80" },
+      { name: "Minimum price", valuetext: "$20" },
+    ]);
+  },
+};

package/src/components/slider/slider.test.tsx

@@ -0,0 +1,168 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Slider, type SliderThumbProps } from "./slider";
+
+describe("Slider", () => {
+  it("forwards aria-label to the thumb (role=slider)", () => {
+    render(<Slider aria-label="Volume" defaultValue={[50]} max={100} step={1} />);
+    expect(screen.getByRole("slider", { name: "Volume" })).toBeInTheDocument();
+  });
+
+  it("forwards the top-level aria-valuetext to the thumb", () => {
+    render(
+      <Slider
+        aria-label="Replay position"
+        aria-valuetext="step 3 of 12"
+        defaultValue={[3]}
+        max={12}
+        step={1}
+      />,
+    );
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuetext", "step 3 of 12");
+  });
+
+  it("forwards thumbProps.aria-valuetext to the thumb", () => {
+    render(
+      <Slider
+        aria-label="Replay position"
+        defaultValue={[3]}
+        max={12}
+        step={1}
+        thumbProps={{ "aria-valuetext": "step 3 of 12" }}
+      />,
+    );
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuetext", "step 3 of 12");
+  });
+
+  it("thumbProps wins over the top-level aria-label when both are set", () => {
+    render(
+      <Slider
+        aria-label="Root label"
+        defaultValue={[3]}
+        max={12}
+        step={1}
+        thumbProps={{ "aria-label": "Thumb label" }}
+      />,
+    );
+    expect(screen.getByRole("slider", { name: "Thumb label" })).toBeInTheDocument();
+  });
+
+  it("does not regress existing aria-labelledby forwarding", () => {
+    render(
+      <>
+        <label id="vol-label">Volume</label>
+        <Slider aria-labelledby="vol-label" defaultValue={[50]} max={100} step={1} />
+      </>,
+    );
+    expect(screen.getByRole("slider", { name: "Volume" })).toBeInTheDocument();
+  });
+
+  // Radix spreads consumer thumb props AFTER its own role/value/tabIndex, so
+  // an unfiltered escape hatch lets a consumer destroy the widget.
+  it("ignores thumbProps keys that would break the slider widget", () => {
+    render(
+      <Slider
+        aria-label="Volume"
+        defaultValue={[50]}
+        max={100}
+        step={1}
+        thumbProps={{
+          role: "presentation",
+          "aria-valuenow": 999,
+          "aria-valuemin": 999,
+          "aria-valuemax": 999,
+          "aria-orientation": "vertical",
+          tabIndex: -1,
+          id: "volume-thumb",
+        }}
+      />,
+    );
+    const thumb = screen.getByRole("slider", { name: "Volume" });
+    expect(thumb).toHaveAttribute("aria-valuenow", "50");
+    expect(thumb).toHaveAttribute("aria-valuemin", "0");
+    expect(thumb).toHaveAttribute("aria-valuemax", "100");
+    expect(thumb).toHaveAttribute("aria-orientation", "horizontal");
+    expect(thumb).toHaveAttribute("tabindex", "0");
+    // Non-protected keys still pass through.
+    expect(thumb).toHaveAttribute("id", "volume-thumb");
+  });
+
+  // #398 — a range slider (array value) renders one thumb per value, and a
+  // matching array of thumbProps gives each one its own accessible name.
+  describe("range (multi-thumb) support", () => {
+    it("renders one thumb per value in a range slider", () => {
+      render(<Slider aria-label="Price range" defaultValue={[3, 9]} max={12} step={1} />);
+      expect(screen.getAllByRole("slider")).toHaveLength(2);
+    });
+
+    it("gives each thumb its own aria-valuetext via an array of thumbProps", () => {
+      render(
+        <Slider
+          defaultValue={[3, 9]}
+          max={12}
+          step={1}
+          thumbProps={[
+            { "aria-label": "Minimum price", "aria-valuetext": "$3" },
+            { "aria-label": "Maximum price", "aria-valuetext": "$9" },
+          ]}
+        />,
+      );
+      const [low, high] = screen.getAllByRole("slider");
+      expect(low).toHaveAttribute("aria-valuetext", "$3");
+      expect(low).toHaveAttribute("aria-label", "Minimum price");
+      expect(high).toHaveAttribute("aria-valuetext", "$9");
+      expect(high).toHaveAttribute("aria-label", "Maximum price");
+    });
+
+    it("gives each thumb its own data-* attributes via an array of thumbProps", () => {
+      render(
+        <Slider
+          aria-label="Price range"
+          defaultValue={[3, 9]}
+          max={12}
+          step={1}
+          thumbProps={[
+            { "data-thumb": "min" } as SliderThumbProps,
+            { "data-thumb": "max" } as SliderThumbProps,
+          ]}
+        />,
+      );
+      const [low, high] = screen.getAllByRole("slider");
+      expect(low).toHaveAttribute("data-thumb", "min");
+      expect(high).toHaveAttribute("data-thumb", "max");
+    });
+
+    it("still supports a single-element defaultValue with the existing object thumbProps shape", () => {
+      render(
+        <Slider
+          aria-label="Volume"
+          defaultValue={[50]}
+          max={100}
+          step={1}
+          thumbProps={{ "aria-valuetext": "50%" }}
+        />,
+      );
+      expect(screen.getByRole("slider", { name: "Volume" })).toHaveAttribute(
+        "aria-valuetext",
+        "50%",
+      );
+    });
+
+    it("applies PROTECTED_THUMB_KEYS stripping per-thumb in the array shape", () => {
+      render(
+        <Slider
+          defaultValue={[3, 9]}
+          max={12}
+          step={1}
+          thumbProps={[
+            { "aria-label": "Min", role: "presentation", tabIndex: -1 },
+            { "aria-label": "Max", "aria-valuenow": 999 },
+          ]}
+        />,
+      );
+      const [low, high] = screen.getAllByRole("slider");
+      expect(low).toHaveAttribute("tabindex", "0");
+      expect(high).toHaveAttribute("aria-valuenow", "9");
+    });
+  });
+});

package/src/components/slider/slider.tsx

@@ -0,0 +1,136 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../../lib/cn";
+
+/** Props for a single `SliderPrimitive.Thumb` — see `SliderProps["thumbProps"]`. */
+export type SliderThumbProps = ComponentPropsWithoutRef<typeof SliderPrimitive.Thumb>;
+
+export type SliderProps = ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+  /**
+   * Announced instead of the raw numeric value (e.g. `"step 3 of 12"` for a
+   * replay scrubber). Forwarded to the thumb alongside `aria-label`/
+   * `aria-labelledby` — see the doc comment below for why it has to land
+   * there, not on the root.
+   */
+  "aria-valuetext"?: string;
+  /**
+   * Escape hatch spread onto the thumb LAST — for `data-*`/`style`/etc, or to
+   * deliberately override `aria-label`/`aria-labelledby`/`aria-valuetext`
+   * (an explicit key here always wins over the matching top-level prop).
+   *
+   * The six keys that MAKE the element a slider are ignored on purpose:
+   * `role`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`,
+   * `aria-orientation` and `tabIndex`. Radix derives every one of them from
+   * the slider's live state and spreads consumer props AFTER its own, so
+   * passing them here would silently destroy the widget (a wrong
+   * `aria-valuenow` mis-announces the value; `role`/`tabIndex` make it
+   * unreachable). Change the VALUE (`value`/`min`/`max`/`orientation`/
+   * `disabled`) on `Slider` instead; use `aria-valuetext` to change how the
+   * value is spoken.
+   *
+   * Radix renders one thumb per element of `value`/`defaultValue` — pass a
+   * single object to apply the same props to every thumb (the historical
+   * single-thumb shape, unchanged), or an ARRAY to give each thumb its own
+   * props, indexed positionally against `value`/`defaultValue` (#398). A
+   * missing array slot falls back to no per-thumb override for that thumb.
+   */
+  thumbProps?: SliderThumbProps | SliderThumbProps[];
+};
+
+/**
+ * Attributes Radix computes for the thumb and then lets consumer props
+ * overwrite (`SliderThumbImpl` spreads them before `...thumbProps`). Dropping
+ * them here is what keeps the escape hatch from being a foot-gun.
+ */
+const PROTECTED_THUMB_KEYS = [
+  "role",
+  "aria-valuenow",
+  "aria-valuemin",
+  "aria-valuemax",
+  "aria-orientation",
+  "tabIndex",
+] as const;
+
+function withoutProtectedKeys(
+  thumbProps: SliderThumbProps | undefined,
+): SliderThumbProps | undefined {
+  if (!thumbProps) return thumbProps;
+  let safe = thumbProps;
+  for (const key of PROTECTED_THUMB_KEYS) {
+    if (!(key in safe)) continue;
+    const { [key]: _dropped, ...rest } = safe;
+    safe = rest;
+  }
+  return safe;
+}
+
+/** `thumbProps` for the thumb at `index` — the shared object for every thumb, or that array slot. */
+function getThumbPropsAt(
+  thumbProps: SliderProps["thumbProps"],
+  index: number,
+): SliderThumbProps | undefined {
+  if (!thumbProps) return undefined;
+  return Array.isArray(thumbProps) ? thumbProps[index] : thumbProps;
+}
+
+/**
+ * Range input — a single-thumb value by default, or a multi-thumb range
+ * slider when `value`/`defaultValue` is an array with more than one element
+ * (Radix's own range-slider shape; #398). One `Thumb` is rendered per value.
+ *
+ * `aria-label` / `aria-labelledby` / `aria-valuetext` are routed to the
+ * THUMB(S), not the root: Radix puts `role="slider"` on the thumb, so a name
+ * (or value text) on the root would never reach the widget. Pass `aria-label`
+ * (or `aria-labelledby`, for a visible `<Label>`) — an unnamed slider is an
+ * accessibility failure. For a range slider, pass an ARRAY to `thumbProps` so
+ * each thumb gets its own name/valuetext (e.g. "Minimum price"/"Maximum
+ * price") — the top-level `aria-label`/`aria-valuetext` apply identically to
+ * every thumb, which is rarely what a multi-thumb slider wants.
+ */
+export const Slider = forwardRef<ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
+  function Slider(
+    {
+      className,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-valuetext": ariaValueText,
+      thumbProps,
+      value,
+      defaultValue,
+      ...props
+    },
+    ref,
+  ) {
+    const values = value ?? defaultValue;
+    const thumbCount = Array.isArray(values) ? values.length : 1;
+    return (
+      <SliderPrimitive.Root
+        ref={ref}
+        className={cn("relative flex w-full touch-none select-none items-center", className)}
+        value={value}
+        defaultValue={defaultValue}
+        {...props}
+      >
+        <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted">
+          <SliderPrimitive.Range className="absolute h-full bg-primary" />
+        </SliderPrimitive.Track>
+        {Array.from({ length: thumbCount }, (_, index) => {
+          const safeThumbProps = withoutProtectedKeys(getThumbPropsAt(thumbProps, index));
+          return (
+            <SliderPrimitive.Thumb
+              key={index}
+              aria-label={ariaLabel}
+              aria-labelledby={ariaLabelledby}
+              aria-valuetext={ariaValueText}
+              {...safeThumbProps}
+              className={cn(
+                "block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                safeThumbProps?.className,
+              )}
+            />
+          );
+        })}
+      </SliderPrimitive.Root>
+    );
+  },
+);

package/src/components/slider-number/index.ts

@@ -0,0 +1 @@
+export { SliderNumber, type SliderNumberProps } from "./slider-number";

package/src/components/slider-number/slider-number.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { useState } from "react";
+import { SliderNumber } from "./slider-number";
+
+const meta = {
+  title: "Forms/SliderNumber",
+  component: SliderNumber,
+  tags: ["autodocs"],
+  args: {
+    "aria-label": "Temperature",
+    min: 0,
+    max: 1,
+    step: 0.1,
+  },
+  argTypes: {
+    value: {
+      description: 'Controlled value. Pass `null` for "use the provider default".',
+      control: "number",
+      table: { category: "State" },
+    },
+    defaultValue: {
+      description: "Uncontrolled initial value.",
+      control: "number",
+      table: { category: "State" },
+    },
+    min: {
+      description: "Minimum allowed value.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    max: {
+      description: "Maximum allowed value.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    step: {
+      description: "Step increment for both the slider and the number input.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    precision: {
+      description: "Decimal places to round to (defaults to the decimals in `step`).",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    resetLabel: {
+      description: "Label for the reset-to-provider-default control.",
+      control: "text",
+      table: { category: "Content" },
+    },
+    disabled: {
+      description: "Disables the whole control.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    onValueChange: {
+      description: "Called when the value changes.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the root element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof SliderNumber>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { defaultValue: 0.7 },
+};
+
+/** Starting from "provider default" — the slider thumb renders dimmed/dashed and Reset is disabled. */
+export const ProviderDefault: Story = {
+  args: { defaultValue: null },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("button", { name: "Reset" })).toBeDisabled();
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = useState<number | null>(0.5);
+    return (
+      <div className="flex flex-col gap-2 max-w-md">
+        <SliderNumber
+          aria-label="Top-p"
+          min={0}
+          max={1}
+          step={0.05}
+          value={value}
+          onValueChange={setValue}
+        />
+        <p className="text-body text-muted-foreground">Value: {value ?? "provider default"}</p>
+      </div>
+    );
+  },
+};
+
+/** Dragging (via keyboard) to a value, then resetting back to the provider default. */
+export const DragThenReset: Story = {
+  args: { defaultValue: null },
+  play: async ({ canvas, userEvent }) => {
+    const thumb = canvas.getByRole("slider", { name: "Temperature" });
+    thumb.focus();
+    await userEvent.keyboard("{ArrowRight}{ArrowRight}{ArrowRight}");
+    const numberInput = canvas.getByRole("spinbutton", { name: "Temperature" });
+    await expect(numberInput).toHaveValue(0.3);
+
+    const resetBtn = canvas.getByRole("button", { name: "Reset" });
+    await expect(resetBtn).not.toBeDisabled();
+    await userEvent.click(resetBtn);
+    await expect(resetBtn).toBeDisabled();
+  },
+};
+
+export const Disabled: Story = {
+  args: { defaultValue: 0.4, disabled: true },
+};