@zentauri-ui/zentauri-components 1.7.1 → 1.7.3

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/popover/animated/animations.ts

@@ -0,0 +1,15 @@
+import type { PopoverAnimationPresets } from "./types";
+
+export const popoverAnimationPresets: PopoverAnimationPresets = {
+  none: {},
+  fade: {
+    initial: { opacity: 0, y: -4 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.16, ease: "easeOut" },
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.96 },
+    animate: { opacity: 1, scale: 1 },
+    transition: { duration: 0.16, ease: "easeOut" },
+  },
+};

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

@@ -0,0 +1,10 @@
+"use client";
+
+export { PopoverContentAnimated } from "./popover-content-animated";
+export { popoverAnimationPresets } from "./animations";
+export type {
+  PopoverAnimation,
+  PopoverAnimationPresets,
+  PopoverContentAnimatedProps,
+  PopoverPresetMotionProps,
+} from "./types";

package/src/ui/popover/animated/popover-content-animated.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "../../../lib/utils";
+
+import { popoverAnimationPresets } from "./animations";
+import type { PopoverContentAnimatedProps } from "./types";
+import { sideAlignClass, usePopover } from "../popover-base";
+import { popoverContentVariants } from "../variants";
+
+export const PopoverContentAnimated = ({
+  children,
+  className,
+  variant,
+  size,
+  width,
+  side = "bottom",
+  align = "center",
+  role = "dialog",
+  animation = "none",
+  onDrag: _onDrag,
+  onDragStart: _onDragStart,
+  onDragEnd: _onDragEnd,
+  onAnimationStart: _onAnimationStart,
+  ...props
+}: PopoverContentAnimatedProps) => {
+  const { open, contentId, contentRef } = usePopover();
+
+  if (!open) {
+    return null;
+  }
+
+  const motionProps = popoverAnimationPresets[animation];
+
+  return (
+    <motion.div
+      ref={contentRef}
+      id={contentId}
+      data-open={open}
+      role={role}
+      tabIndex={-1}
+      {...motionProps}
+      className={cn(
+        popoverContentVariants({ variant, size, width }),
+        sideAlignClass(side, align),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+};

package/src/ui/popover/animated/types.ts

@@ -0,0 +1,18 @@
+import type { HTMLMotionProps } from "framer-motion";
+import type { PopoverContentProps } from "../types";
+
+export type PopoverAnimation = "none" | "fade" | "scale";
+
+export type PopoverPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "initial" | "animate" | "style" | "transition"
+>;
+
+export type PopoverAnimationPresets = Record<
+  PopoverAnimation,
+  PopoverPresetMotionProps
+>;
+
+export type PopoverContentAnimatedProps = PopoverContentProps & {
+  animation?: PopoverAnimation;
+};

package/src/ui/popover/index.ts

@@ -0,0 +1,18 @@
+"use client";
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverContext,
+  usePopover,
+} from "./popover";
+export { popoverContentVariants } from "./variants";
+export type {
+  PopoverAlign,
+  PopoverContentProps,
+  PopoverContextType,
+  PopoverProps,
+  PopoverSide,
+  PopoverTriggerProps,
+} from "./types";