@zentauri-ui/zentauri-components 1.8.2 → 1.8.4

package/src/ui/animated-number/variants.ts

@@ -1,14 +1,17 @@
 import { cva } from "class-variance-authority";
 
-import { zuiAnimatedNumberAppearance, zuiAnimatedNumberSize } from "../../design-system/animated-number";
+import {
+  zuiAnimatedNumberAppearance,
+  zuiAnimatedNumberSize,
+} from "../../design-system/animated-number";
 
-export const animatedNumberAppearance = cva("inline-flex",{
+export const animatedNumberAppearance = cva("inline-flex", {
   variants: {
     appearance: zuiAnimatedNumberAppearance,
-    size: zuiAnimatedNumberSize
+    size: zuiAnimatedNumberSize,
   },
   defaultVariants: {
     appearance: "default",
     size: "md",
   },
-});
+});

package/src/ui/checkbox/animated/checkbox-animated.tsx

@@ -53,7 +53,9 @@ export function CheckboxAnimated(props: CheckboxAnimatedProps) {
   const state = resolveCheckboxState(resolvedChecked, indeterminate);
   const labelContent = label ?? children;
   const hasVisibleLabel =
-    labelContent !== undefined && labelContent !== null && labelContent !== false;
+    labelContent !== undefined &&
+    labelContent !== null &&
+    labelContent !== false;
   const motionPreset = checkboxAnimationPresets[animation];
   const svgMotionProps = animation === "spring" ? motionPreset : undefined;
   const pathMotionProps = animation === "draw" ? motionPreset : undefined;

package/src/ui/checkbox/checkbox-base.tsx

@@ -49,7 +49,9 @@ export function CheckboxBase(props: CheckboxProps) {
   const state = resolveCheckboxState(resolvedChecked, indeterminate);
   const labelContent = label ?? children;
   const hasVisibleLabel =
-    labelContent !== undefined && labelContent !== null && labelContent !== false;
+    labelContent !== undefined &&
+    labelContent !== null &&
+    labelContent !== false;
 
   const setChecked = useCallback(
     (next: boolean) => {
@@ -98,11 +100,7 @@ export function CheckboxBase(props: CheckboxProps) {
               indicatorClassName,
             )}
           >
-            <path
-              d="M3.5 8H12.5"
-              strokeWidth="2.4"
-              strokeLinecap="round"
-            />
+            <path d="M3.5 8H12.5" strokeWidth="2.4" strokeLinecap="round" />
           </svg>
         ) : (
           <svg

package/src/ui/checkbox/checkbox.test.tsx

@@ -31,14 +31,14 @@ describe("Checkbox", () => {
       </Checkbox>,
     );
 
-    await user.click(screen.getByRole("checkbox", { name: "Marketing emails" }));
+    await user.click(
+      screen.getByRole("checkbox", { name: "Marketing emails" }),
+    );
     expect(onCheckedChange).toHaveBeenLastCalledWith(true);
   });
 
   it("should expose mixed state when indeterminate", () => {
-    render(
-      <Checkbox indeterminate aria-label="Select partial group" />,
-    );
+    render(<Checkbox indeterminate aria-label="Select partial group" />);
     expect(screen.getByRole("checkbox")).toHaveAttribute(
       "aria-checked",
       "mixed",

package/src/ui/checkbox/types.ts

@@ -9,7 +9,9 @@ import type {
 
 export type CheckboxState = "checked" | "unchecked" | "indeterminate";
 
-export type CheckboxRootVariantProps = VariantProps<typeof checkboxRootVariants>;
+export type CheckboxRootVariantProps = VariantProps<
+  typeof checkboxRootVariants
+>;
 export type CheckboxControlVariantProps = VariantProps<
   typeof checkboxControlVariants
 >;
@@ -21,12 +23,7 @@ export type CheckboxProps = CheckboxRootVariantProps &
   CheckboxControlVariantProps &
   Omit<
     ComponentPropsWithRef<"input">,
-    | "type"
-    | "size"
-    | "checked"
-    | "defaultChecked"
-    | "onChange"
-    | "children"
+    "type" | "size" | "checked" | "defaultChecked" | "onChange" | "children"
   > & {
     checked?: boolean;
     defaultChecked?: boolean;

package/src/ui/command/command-base.tsx

@@ -32,7 +32,7 @@ import type {
   CommandContentVariantProps,
   CommandContentLayerProps,
   CommandContentOverlayRenderProps,
-  CommandContentPanelRenderProps
+  CommandContentPanelRenderProps,
 } from "./types";
 import {
   commandContentVariants,
@@ -45,7 +45,7 @@ import {
   commandListVariants,
   commandOverlayVariants,
   commandSeparatorVariants,
-  commandTriggerVariants
+  commandTriggerVariants,
 } from "./variants";
 
 const CommandContext = createContext<CommandCtx | null>(null);

package/src/ui/command/command.test.tsx

@@ -51,9 +51,7 @@ describe("Command", () => {
     const user = userEvent.setup();
     render(<Palette />);
     await user.click(screen.getByRole("button", { name: "Open palette" }));
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
     expect(screen.getByText("Home")).toBeInTheDocument();
   });
 
@@ -61,23 +59,19 @@ describe("Command", () => {
     const { rerender } = render(<Palette open={false} />);
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
     rerender(<Palette open />);
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
   });
 
   it("should filter items as the user types", async () => {
     const user = userEvent.setup();
     render(<Palette open />);
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
     await user.type(screen.getByRole("combobox"), "settings");
     await waitFor(() => {
       expect(screen.getByText("Settings")).toBeVisible();
-      expect(screen.getByText("Home").closest("[data-slot=command-item]")).toHaveAttribute(
-        "hidden",
-      );
+      expect(
+        screen.getByText("Home").closest("[data-slot=command-item]"),
+      ).toHaveAttribute("hidden");
     });
   });
 
@@ -94,9 +88,7 @@ describe("Command", () => {
     const user = userEvent.setup();
     const onSelectHome = vi.fn();
     render(<Palette open onSelectHome={onSelectHome} />);
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
     const input = screen.getByRole("combobox");
     input.focus();
     await user.keyboard("{Enter}");
@@ -107,20 +99,14 @@ describe("Command", () => {
     const user = userEvent.setup();
     const onOpenChange = vi.fn();
     render(<Palette open onOpenChange={onOpenChange} />);
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
     await user.keyboard("{Escape}");
-    await waitFor(() =>
-      expect(onOpenChange).toHaveBeenLastCalledWith(false),
-    );
+    await waitFor(() => expect(onOpenChange).toHaveBeenLastCalledWith(false));
   });
 
   it("should render group headings and a separator", async () => {
     render(<Palette open />);
-    await waitFor(() =>
-      expect(screen.getByRole("dialog")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
     expect(screen.getByText("Navigation")).toBeInTheDocument();
     expect(screen.getByText("Actions")).toBeInTheDocument();
     expect(

package/src/ui/command/index.ts

@@ -25,7 +25,7 @@ export type {
   CommandSectionProps,
   CommandCtx,
   ItemMeta,
-  RegisteredItem
+  RegisteredItem,
 } from "./types";
 export {
   commandContentVariants,

package/src/ui/command/types.ts

@@ -100,7 +100,6 @@ export type CommandCtx = {
   inputRef: RefObject<HTMLInputElement | null>;
 };
 
-
 export type CommandContentOverlayRenderProps = {
   role: "presentation";
   "data-slot": "command-overlay";
@@ -126,4 +125,4 @@ export type CommandContentLayerProps = CommandContentProps & {
   renderPresence?: (children: ReactNode) => ReactNode;
   renderOverlay?: (props: CommandContentOverlayRenderProps) => ReactNode;
   renderPanel?: (props: CommandContentPanelRenderProps) => ReactNode;
-};
+};

package/src/ui/context-menu/context-menu.test.tsx

@@ -173,4 +173,34 @@ describe("ContextMenu", () => {
 
     expect(screen.getByRole("menuitem", { name: "Archive" })).toBeVisible();
   });
+
+  it("should not invoke onSelect for a disabled item and keep the menu open", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(
+      <ContextMenu defaultOpen>
+        <ContextMenuTrigger>Right-click row</ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem disabled onSelect={onSelect}>
+            Copy
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>,
+    );
+
+    const item = screen.getByRole("menuitem", { name: "Copy" });
+    expect(item).toHaveAttribute("aria-disabled", "true");
+
+    await user.click(item);
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(screen.getByRole("menu")).toBeInTheDocument();
+  });
+
+  it("should mark the submenu trigger with aria-haspopup menu", () => {
+    renderContextMenu();
+    fireEvent.contextMenu(screen.getByTestId("surface"));
+    expect(
+      screen.getByRole("menuitem", { name: "More actions" }),
+    ).toHaveAttribute("aria-haspopup", "menu");
+  });
 });

package/src/ui/copy-button/types.ts

@@ -12,8 +12,10 @@ export type CopyButtonIconRenderer = (state: {
   copiedIcon: ReactNode;
 }) => ReactNode;
 
-export interface CopyButtonBaseProps
-  extends Omit<ComponentPropsWithRef<"button">, "value" | "onCopy"> {
+export interface CopyButtonBaseProps extends Omit<
+  ComponentPropsWithRef<"button">,
+  "value" | "onCopy"
+> {
   /** Text written to the clipboard when the button is pressed. */
   value: string;
   /** Milliseconds the copied state stays active before resetting. `0` keeps it until re-copied. */

package/src/ui/drawer/drawer-base.tsx

@@ -202,10 +202,7 @@ DrawerHeader.displayName = "DrawerHeader";
 
 export function DrawerBody({ className, children }: DrawerSectionProps) {
   return (
-    <div
-      data-slot="drawer-body"
-      className={cn("flex-1 text-sm", className)}
-    >
+    <div data-slot="drawer-body" className={cn("flex-1 text-sm", className)}>
       {children}
     </div>
   );

package/src/ui/dropdown/dropdown.tsx

@@ -146,7 +146,7 @@ export const DropdownContent = ({
       className={cn(
         contentVariants({ placement, spacing }),
         className,
-        divider && "divide-y divide-current"
+        divider && "divide-y divide-current",
       )}
       {...props}
     >

package/src/ui/kbd/animated/kbd-animated.tsx

@@ -8,7 +8,10 @@ import type { KbdBaseProps } from "../types";
 import { kbdAnimationPresets } from "./animations";
 import type { KbdAnimatedProps } from "./types";
 
-export function KbdAnimated({ animation = "none", ...props }: KbdAnimatedProps) {
+export function KbdAnimated({
+  animation = "none",
+  ...props
+}: KbdAnimatedProps) {
   const motionProps = kbdAnimationPresets[animation];
 
   return (

package/src/ui/kbd/kbd-base.tsx

@@ -31,7 +31,10 @@ export function KbdBase({
       {items.map((key, index) => (
         <Fragment key={index}>
           {index > 0 && separator != null ? (
-            <span data-slot="kbd-separator" className={kbdSeparatorVariants({ size })}>
+            <span
+              data-slot="kbd-separator"
+              className={kbdSeparatorVariants({ size })}
+            >
               {separator}
             </span>
           ) : null}

package/src/ui/kbd/kbd.test.tsx

@@ -34,9 +34,7 @@ describe("Kbd", () => {
 
   it("should apply the appearance token", () => {
     render(<Kbd keys={["A"]} appearance="emerald" />);
-    const key = document.querySelector(
-      '[data-slot="kbd-key"]',
-    ) as HTMLElement;
+    const key = document.querySelector('[data-slot="kbd-key"]') as HTMLElement;
     expect(key.className).toMatch(/--zui-kbd-emerald-bg/);
   });
 

package/src/ui/kbd/types.ts

@@ -5,8 +5,10 @@ import type { kbdKeyVariants } from "./variants";
 
 export type KbdVariantProps = VariantProps<typeof kbdKeyVariants>;
 
-export interface KbdBaseProps
-  extends Omit<ComponentPropsWithRef<"span">, "children"> {
+export interface KbdBaseProps extends Omit<
+  ComponentPropsWithRef<"span">,
+  "children"
+> {
   /** Keys to render as individual keycaps, e.g. `["⌘", "K"]`. Takes precedence over `children`. */
   keys?: ReactNode[];
   /** Optional node rendered between keycaps (e.g. "+" or "then"). */

package/src/ui/modal/modal.test.tsx

@@ -166,4 +166,28 @@ describe("Modal", () => {
     );
     expect(trigger).toHaveFocus();
   });
+
+  it("should expose aria-modal and wire labelledby/describedby to its title and description", async () => {
+    render(
+      <Modal defaultOpen>
+        <ModalContent>
+          <ModalTitle>Confirm</ModalTitle>
+          <ModalDescription>Please review</ModalDescription>
+        </ModalContent>
+      </Modal>,
+    );
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toHaveAttribute("aria-modal", "true");
+
+    const labelledby = dialog.getAttribute("aria-labelledby");
+    const describedby = dialog.getAttribute("aria-describedby");
+    expect(labelledby).toBeTruthy();
+    expect(describedby).toBeTruthy();
+    expect(document.getElementById(labelledby as string)).toHaveTextContent(
+      "Confirm",
+    );
+    expect(document.getElementById(describedby as string)).toHaveTextContent(
+      "Please review",
+    );
+  });
 });

package/src/ui/peer-isolation.test.ts

@@ -0,0 +1,81 @@
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Guards the package's optional-peer isolation contract:
+ *
+ * - A component that ships BOTH a static entry and an `animated/` entry must keep
+ *   `framer-motion` out of its static files, so importing the static entry never
+ *   forces the optional `framer-motion` peer onto the consumer. (Components that
+ *   are themselves motion primitives — e.g. `animated-number`, `marquee` — have no
+ *   `animated/` split, so this rule does not apply to them.)
+ * - No file under `src/ui` may import `recharts`; charts live only in `src/charts/*`.
+ */
+
+const uiRoot = dirname(fileURLToPath(import.meta.url));
+
+const componentDirs = readdirSync(uiRoot, { withFileTypes: true })
+  .filter((e) => e.isDirectory())
+  .map((e) => e.name);
+
+/** `.ts`/`.tsx` files directly involved in the static entry (excludes `animated/` and tests). */
+function staticFiles(dir: string): string[] {
+  const out: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name === "animated") continue;
+      out.push(...staticFiles(full));
+    } else if (
+      /\.(tsx?|jsx?)$/.test(entry.name) &&
+      !entry.name.includes(".test.")
+    ) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+const FRAMER = /from\s+["']framer-motion/;
+const RECHARTS = /from\s+["']recharts/;
+
+describe("static UI entries — optional peer isolation", () => {
+  it("scans every UI component directory", () => {
+    expect(componentDirs.length).toBeGreaterThan(40);
+  });
+
+  for (const name of componentDirs) {
+    const dir = join(uiRoot, name);
+    const hasAnimatedEntry = existsSync(join(dir, "animated"));
+    if (!hasAnimatedEntry) continue;
+
+    it(`${name}: static files do not import framer-motion`, () => {
+      const offenders = staticFiles(dir).filter((file) =>
+        FRAMER.test(readFileSync(file, "utf8")),
+      );
+      expect(offenders).toEqual([]);
+    });
+  }
+
+  it("no UI file imports recharts (charts live in src/charts)", () => {
+    const offenders = componentDirs
+      .flatMap((name) => {
+        const all: string[] = [];
+        const dir = join(uiRoot, name);
+        // include animated files here too — recharts must never appear in ui/.
+        const walk = (d: string) => {
+          for (const entry of readdirSync(d, { withFileTypes: true })) {
+            const full = join(d, entry.name);
+            if (entry.isDirectory()) walk(full);
+            else if (/\.(tsx?|jsx?)$/.test(entry.name)) all.push(full);
+          }
+        };
+        walk(dir);
+        return all;
+      })
+      .filter((file) => RECHARTS.test(readFileSync(file, "utf8")));
+    expect(offenders).toEqual([]);
+  });
+});

package/src/ui/popover/popover-base.tsx

@@ -157,9 +157,7 @@ export const Popover = ({
   );
 
   return (
-    <PopoverContext.Provider
-      value={contextValue}
-    >
+    <PopoverContext.Provider value={contextValue}>
       <div className="relative inline-block">{children}</div>
     </PopoverContext.Provider>
   );

package/src/ui/popover/types.ts

@@ -30,9 +30,9 @@ export type PopoverTriggerProps = {
 
 export type PopoverContentProps = ComponentPropsWithRef<"div"> & {
   children: ReactNode;
-  variant?: VariantProps<typeof popoverContentVariants>["variant"]
+  variant?: VariantProps<typeof popoverContentVariants>["variant"];
   size?: VariantProps<typeof popoverContentVariants>["size"];
   width?: VariantProps<typeof popoverContentVariants>["width"];
   side?: PopoverSide;
   align?: PopoverAlign;
-};
+};

package/src/ui/radio-group/animated/index.ts

@@ -1,6 +1,9 @@
 "use client";
 
-export { RadioGroupAnimated, RadioGroupItemAnimated } from "./radio-group-animated";
+export {
+  RadioGroupAnimated,
+  RadioGroupItemAnimated,
+} from "./radio-group-animated";
 export type {
   RadioGroupAnimatedProps,
   RadioGroupAnimation,

package/src/ui/radio-group/animated/radio-group-animated.tsx

@@ -110,7 +110,9 @@ export function RadioGroupItemAnimated(props: RadioGroupItemAnimatedProps) {
   const size = sizeProp ?? context?.size;
   const labelContent = label ?? children;
   const hasVisibleLabel =
-    labelContent !== undefined && labelContent !== null && labelContent !== false;
+    labelContent !== undefined &&
+    labelContent !== null &&
+    labelContent !== false;
   const motionPreset = radioGroupAnimationPresets[animation];
 
   return (

package/src/ui/radio-group/radio-group.test.tsx

@@ -18,7 +18,9 @@ describe("RadioGroup", () => {
       </RadioGroup>,
     );
     expect(document.querySelector('[data-slot="radio-group"]')).toBeTruthy();
-    expect(document.querySelector('[data-slot="radio-group-item"]')).toBeTruthy();
+    expect(
+      document.querySelector('[data-slot="radio-group-item"]'),
+    ).toBeTruthy();
   });
 
   it("should select one value at a time", async () => {

package/src/ui/radio-group/radio-group.tsx

@@ -4,10 +4,7 @@ import { useCallback, useId, useState } from "react";
 
 import { cn } from "../../lib/utils";
 
-import {
-  RadioGroupContext,
-  useRadioGroupContext,
-} from "./radio-group-context";
+import { RadioGroupContext, useRadioGroupContext } from "./radio-group-context";
 import type { RadioGroupItemProps, RadioGroupProps } from "./types";
 import {
   radioGroupControlVariants,
@@ -103,7 +100,9 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
   const size = sizeProp ?? context?.size;
   const labelContent = label ?? children;
   const hasVisibleLabel =
-    labelContent !== undefined && labelContent !== null && labelContent !== false;
+    labelContent !== undefined &&
+    labelContent !== null &&
+    labelContent !== false;
 
   return (
     <label

package/src/ui/select/select.test.tsx

@@ -1,6 +1,6 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 
 import {
   Select,
@@ -126,3 +126,99 @@ describe("Select", () => {
     expect(beta).toHaveAttribute("aria-selected", "false");
   });
 });
+
+describe("Select — keyboard and a11y", () => {
+  it("wires trigger aria attributes to the listbox", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select multiple defaultValue={[]}>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Alpha</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAttribute("aria-haspopup", "listbox");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    const controls = trigger.getAttribute("aria-controls");
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    const listbox = screen.getByRole("listbox");
+    expect(listbox).toHaveAttribute("id", controls);
+    expect(listbox).toHaveAttribute("aria-multiselectable", "true");
+  });
+
+  it("moves focus across enabled options with arrow keys", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select defaultValue={[]}>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Alpha</SelectItem>
+          <SelectItem value="b">Beta</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    await user.click(screen.getByRole("button"));
+    const alpha = await screen.findByRole("option", { name: /alpha/i });
+    const beta = screen.getByRole("option", { name: /beta/i });
+    await waitFor(() => expect(alpha).toHaveFocus());
+
+    await user.keyboard("{ArrowDown}");
+    expect(beta).toHaveFocus();
+    await user.keyboard("{ArrowUp}");
+    expect(alpha).toHaveFocus();
+  });
+
+  it("selects the focused option with the Enter key", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <Select multiple defaultValue={[]} onChange={onChange}>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Alpha</SelectItem>
+          <SelectItem value="b">Beta</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    await user.click(screen.getByRole("button"));
+    const alpha = await screen.findByRole("option", { name: /alpha/i });
+    await waitFor(() => expect(alpha).toHaveFocus());
+
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenCalledWith(["a"]);
+  });
+
+  it("ignores a disabled option for pointer and marks it aria-disabled", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <Select multiple defaultValue={[]} onChange={onChange}>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a" disabled>
+            Alpha
+          </SelectItem>
+          <SelectItem value="b">Beta</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    await user.click(screen.getByRole("button"));
+    const alpha = await screen.findByRole("option", { name: /alpha/i });
+    expect(alpha).toHaveAttribute("aria-disabled", "true");
+
+    await user.click(alpha);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/ui/timeline/animated/index.ts

@@ -8,10 +8,7 @@ export {
   TimelineTitle,
 } from "../timeline-base";
 export { TimelineItem } from "./timeline-item-animated";
-export type {
-  TimelineAnimatedProps,
-  TimelineItemAnimatedProps,
-} from "./types";
+export type { TimelineAnimatedProps, TimelineItemAnimatedProps } from "./types";
 export {
   TIMELINE_DEFAULT_STAGGER,
   timelineItemTransitionPresets,