@zentauri-ui/zentauri-components 1.7.2 → 1.7.4

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

@@ -0,0 +1,130 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Command } from "./command";
+import {
+  CommandContent,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandTrigger,
+} from "./command-base";
+
+function Palette({
+  open,
+  onOpenChange,
+  onSelectHome,
+}: {
+  open?: boolean;
+  onOpenChange?: (next: boolean) => void;
+  onSelectHome?: (value: string) => void;
+} = {}) {
+  return (
+    <Command open={open} onOpenChange={onOpenChange}>
+      <CommandTrigger>Open palette</CommandTrigger>
+      <CommandContent>
+        <CommandInput placeholder="Search…" />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Navigation">
+            <CommandItem value="home" onSelect={onSelectHome}>
+              Home
+            </CommandItem>
+            <CommandItem value="settings">Settings</CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Actions">
+            <CommandItem value="new-project">Create project</CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandContent>
+    </Command>
+  );
+}
+
+describe("Command", () => {
+  it("should open from the trigger and render a dialog", async () => {
+    const user = userEvent.setup();
+    render(<Palette />);
+    await user.click(screen.getByRole("button", { name: "Open palette" }));
+    await waitFor(() =>
+      expect(screen.getByRole("dialog")).toBeInTheDocument(),
+    );
+    expect(screen.getByText("Home")).toBeInTheDocument();
+  });
+
+  it("should respect controlled open state", async () => {
+    const { rerender } = render(<Palette open={false} />);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    rerender(<Palette open />);
+    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 user.type(screen.getByRole("combobox"), "settings");
+    await waitFor(() => {
+      expect(screen.getByText("Settings")).toBeVisible();
+      expect(screen.getByText("Home").closest("[data-slot=command-item]")).toHaveAttribute(
+        "hidden",
+      );
+    });
+  });
+
+  it("should show the empty state when nothing matches", async () => {
+    const user = userEvent.setup();
+    render(<Palette open />);
+    await user.type(screen.getByRole("combobox"), "zzzzzz");
+    await waitFor(() =>
+      expect(screen.getByText("No results found.")).toBeInTheDocument(),
+    );
+  });
+
+  it("should select the active item with arrow keys and Enter", async () => {
+    const user = userEvent.setup();
+    const onSelectHome = vi.fn();
+    render(<Palette open onSelectHome={onSelectHome} />);
+    await waitFor(() =>
+      expect(screen.getByRole("dialog")).toBeInTheDocument(),
+    );
+    const input = screen.getByRole("combobox");
+    input.focus();
+    await user.keyboard("{Enter}");
+    expect(onSelectHome).toHaveBeenCalledWith("home");
+  });
+
+  it("should close when Escape is pressed", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(<Palette open onOpenChange={onOpenChange} />);
+    await waitFor(() =>
+      expect(screen.getByRole("dialog")).toBeInTheDocument(),
+    );
+    await user.keyboard("{Escape}");
+    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(),
+    );
+    expect(screen.getByText("Navigation")).toBeInTheDocument();
+    expect(screen.getByText("Actions")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="command-separator"]'),
+    ).toBeTruthy();
+  });
+});

package/src/ui/command/command.tsx

@@ -0,0 +1,8 @@
+import { Command as CommandBase } from "./command-base";
+import type { CommandProps } from "./types";
+
+export const Command = (props: CommandProps) => {
+  return <CommandBase {...props} />;
+};
+
+Command.displayName = "Command";

package/src/ui/command/index.ts

@@ -0,0 +1,34 @@
+"use client";
+
+export { Command } from "./command";
+export {
+  CommandTrigger,
+  CommandContent,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandEmpty,
+  CommandFooter,
+  useCommandContext,
+} from "./command-base";
+export type {
+  CommandProps,
+  CommandTriggerProps,
+  CommandContentProps,
+  CommandContentVariantProps,
+  CommandInputProps,
+  CommandListProps,
+  CommandGroupProps,
+  CommandItemProps,
+  CommandSectionProps,
+  CommandCtx,
+  ItemMeta,
+  RegisteredItem
+} from "./types";
+export {
+  commandContentVariants,
+  commandOverlayVariants,
+  commandItemVariants,
+} from "./variants";

package/src/ui/command/types.ts

@@ -0,0 +1,129 @@
+import type { VariantProps } from "class-variance-authority";
+import type { CSSProperties, ReactNode, Ref, RefObject } from "react";
+
+import type { commandContentVariants } from "./variants";
+
+export type CommandContentVariantProps = VariantProps<
+  typeof commandContentVariants
+>;
+
+export type CommandProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * When set, binds a global shortcut that toggles the palette: this key plus
+   * meta (⌘) or ctrl. Defaults to "k" when `hotkey` is `true`.
+   */
+  hotkey?: string | boolean;
+  /** Accessible label for the dialog. */
+  label?: string;
+  children?: ReactNode;
+};
+
+export type CommandTriggerProps = {
+  className?: string;
+  children?: ReactNode;
+  ref?: Ref<HTMLButtonElement>;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+export type CommandContentProps = CommandContentVariantProps & {
+  className?: string;
+  children?: ReactNode;
+  ref?: Ref<HTMLDivElement>;
+  id?: string;
+  style?: CSSProperties;
+};
+
+export type CommandInputProps = {
+  className?: string;
+  placeholder?: string;
+  ref?: Ref<HTMLInputElement>;
+};
+
+export type CommandListProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export type CommandGroupProps = {
+  className?: string;
+  heading?: ReactNode;
+  children?: ReactNode;
+};
+
+export type CommandItemProps = {
+  className?: string;
+  /** Stable identifier used for filtering, keyboard nav, and onSelect. */
+  value: string;
+  /** Extra terms used by the filter in addition to the rendered text. */
+  keywords?: string[];
+  disabled?: boolean;
+  onSelect?: (value: string) => void;
+  children?: ReactNode;
+};
+
+export type CommandSectionProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export type ItemMeta = {
+  keywords?: string[];
+  disabled?: boolean;
+  onSelect?: (value: string) => void;
+  searchText?: string;
+};
+
+export type RegisteredItem = {
+  value: string;
+  metaRef: RefObject<ItemMeta>;
+};
+
+export type CommandCtx = {
+  open: boolean;
+  setOpen: (next: boolean) => void;
+  labelId: string;
+  listId: string;
+  query: string;
+  setQuery: (next: string) => void;
+  activeValue: string | null;
+  setActiveValue: (next: string | null) => void;
+  visibleValues: string[];
+  isVisible: (value: string) => boolean;
+  registerItem: (item: RegisteredItem) => () => void;
+  invalidateRegistry: () => void;
+  selectValue: (value: string) => boolean;
+  contentRef: RefObject<HTMLDivElement | null>;
+  triggerRef: RefObject<HTMLElement | null>;
+  inputRef: RefObject<HTMLInputElement | null>;
+};
+
+
+export type CommandContentOverlayRenderProps = {
+  role: "presentation";
+  "data-slot": "command-overlay";
+  className: string;
+  onClick: () => void;
+};
+
+export type CommandContentPanelRenderProps = {
+  ref: (node: HTMLDivElement | null) => void;
+  role: "dialog";
+  "aria-modal": true;
+  "aria-labelledby": string;
+  "data-slot": "command-content";
+  tabIndex: -1;
+  className: string;
+  id?: string;
+  style?: CommandContentProps["style"];
+  children: ReactNode;
+};
+
+export type CommandContentLayerProps = CommandContentProps & {
+  componentName: string;
+  renderPresence?: (children: ReactNode) => ReactNode;
+  renderOverlay?: (props: CommandContentOverlayRenderProps) => ReactNode;
+  renderPanel?: (props: CommandContentPanelRenderProps) => ReactNode;
+};

package/src/ui/command/variants.ts

@@ -0,0 +1,41 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiCommandContentAppearances,
+  zuiCommandContentBase,
+  zuiCommandContentSizes,
+  zuiCommandEmptyBase,
+  zuiCommandFooterBase,
+  zuiCommandGroupHeadingBase,
+  zuiCommandInputBase,
+  zuiCommandInputRowBase,
+  zuiCommandItemBase,
+  zuiCommandListBase,
+  zuiCommandOverlayBase,
+  zuiCommandSeparatorBase,
+  zuiCommandTriggerBase,
+} from "../../design-system/command";
+
+export const commandOverlayVariants = cva(zuiCommandOverlayBase);
+
+export const commandTriggerVariants = cva(zuiCommandTriggerBase);
+
+export const commandContentVariants = cva(zuiCommandContentBase, {
+  variants: {
+    size: zuiCommandContentSizes,
+    appearance: zuiCommandContentAppearances,
+  },
+  defaultVariants: {
+    size: "md",
+    appearance: "default",
+  },
+});
+
+export const commandInputRowVariants = cva(zuiCommandInputRowBase);
+export const commandInputVariants = cva(zuiCommandInputBase);
+export const commandListVariants = cva(zuiCommandListBase);
+export const commandGroupHeadingVariants = cva(zuiCommandGroupHeadingBase);
+export const commandItemVariants = cva(zuiCommandItemBase);
+export const commandSeparatorVariants = cva(zuiCommandSeparatorBase);
+export const commandEmptyVariants = cva(zuiCommandEmptyBase);
+export const commandFooterVariants = cva(zuiCommandFooterBase);

package/src/ui/otp-input/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { OTPInput } from "./otp-input";
+export type {
+  OTPInputAllowedCharacters,
+  OTPInputCellVariantProps,
+  OTPInputProps,
+} from "./types";
+export { otpInputCellVariants } from "./variants";

package/src/ui/otp-input/otp-input.test.tsx

@@ -0,0 +1,99 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { OTPInput } from "./otp-input";
+
+describe("OTPInput", () => {
+  it("should expose displayName", () => {
+    expect(OTPInput.displayName).toBe("OTPInput");
+  });
+
+  it("should stamp data-slot", () => {
+    render(<OTPInput label="Verification code" />);
+    expect(document.querySelector('[data-slot="otp-input"]')).toBeTruthy();
+    expect(
+      document.querySelectorAll('[data-slot="otp-input-cell"]'),
+    ).toHaveLength(6);
+  });
+
+  it("should type numeric values across cells", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<OTPInput label="Code" onValueChange={onValueChange} />);
+
+    await user.type(screen.getByLabelText("Digit 1 of 6"), "123");
+
+    expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("1");
+    expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("2");
+    expect(screen.getByLabelText("Digit 3 of 6")).toHaveValue("3");
+    expect(onValueChange).toHaveBeenLastCalledWith("123");
+  });
+
+  it("should ignore non-numeric characters by default", async () => {
+    const user = userEvent.setup();
+    render(<OTPInput label="Code" />);
+
+    await user.type(screen.getByLabelText("Digit 1 of 6"), "a1b2");
+
+    expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("1");
+    expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("2");
+  });
+
+  it("should support alphanumeric values", async () => {
+    const user = userEvent.setup();
+    render(<OTPInput allowedCharacters="alphanumeric" label="Invite code" />);
+
+    await user.type(screen.getByLabelText("Digit 1 of 6"), "A7Z");
+
+    expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("A");
+    expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("7");
+    expect(screen.getByLabelText("Digit 3 of 6")).toHaveValue("Z");
+  });
+
+  it("should fill cells from paste and call onComplete", async () => {
+    const user = userEvent.setup();
+    const onComplete = vi.fn();
+    render(<OTPInput label="Code" onComplete={onComplete} />);
+
+    await user.click(screen.getByLabelText("Digit 1 of 6"));
+    await user.paste("12-34 56");
+
+    expect(screen.getByLabelText("Digit 6 of 6")).toHaveValue("6");
+    expect(onComplete).toHaveBeenLastCalledWith("123456");
+  });
+
+  it("should clear the previous cell when backspacing from an empty cell", async () => {
+    const user = userEvent.setup();
+    render(<OTPInput defaultValue="12" label="Code" />);
+
+    await user.click(screen.getByLabelText("Digit 3 of 6"));
+    await user.keyboard("{Backspace}");
+
+    expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("");
+  });
+
+  it("should support controlled state", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<OTPInput label="Code" value="98" onValueChange={onValueChange} />);
+
+    await user.type(screen.getByLabelText("Digit 3 of 6"), "7");
+
+    expect(screen.getByLabelText("Digit 1 of 6")).toHaveValue("9");
+    expect(screen.getByLabelText("Digit 2 of 6")).toHaveValue("8");
+    expect(onValueChange).toHaveBeenLastCalledWith("987");
+  });
+
+  it("should forward ref to the root", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<OTPInput ref={ref} label="Code" />);
+    expect(ref.current?.getAttribute("data-slot")).toBe("otp-input");
+  });
+
+  it("should render a hidden input when name is provided", () => {
+    render(<OTPInput defaultValue="123456" label="Code" name="otp" />);
+    expect(document.querySelector('input[name="otp"]')).toHaveValue("123456");
+  });
+});