@zentauri-ui/zentauri-components 2.1.7 → 2.1.8

package/src/design-system/split-button.ts

@@ -0,0 +1,38 @@
+export const zuiSplitButtonRoot =
+  "inline-flex align-middle data-[full-width=true]:w-full";
+
+export const zuiSplitButtonFullWidth = "w-full";
+
+export const zuiSplitButtonDropdown =
+  "data-[full-width=true]:block data-[full-width=true]:w-full";
+
+export const zuiSplitButtonGroup =
+  "inline-flex items-stretch data-[full-width=true]:w-full";
+
+export const zuiSplitButtonPrimary =
+  "rounded-r-none data-[full-width=true]:min-w-0 data-[full-width=true]:flex-1";
+
+export const zuiSplitButtonTrigger =
+  "rounded-l-none border-l border-[color:var(--zui-split-button-separator,var(--zui-border,#ffffff33))] dark:border-[color:var(--zui-split-button-separator-dark,var(--zui-border-dark,#00000033))] px-2.5";
+
+export const zuiSplitButtonTriggerSizes = {
+  sm: "min-w-8 px-2",
+  md: "min-w-10 px-2.5",
+  lg: "min-w-11 px-3",
+  xl: "min-w-12 px-3.5",
+  "2xl": "min-w-14 px-4",
+  "3xl": "min-w-16 px-4",
+  "4xl": "min-w-18 px-5",
+  "5xl": "min-w-20 px-5",
+  "6xl": "min-w-22 px-6",
+  "7xl": "min-w-24 px-6",
+  "8xl": "min-w-26 px-7",
+  "9xl": "min-w-28 px-7",
+  "10xl": "min-w-30 px-8",
+  icon: "min-w-10 px-0",
+} as const;
+
+export const zuiSplitButtonContent =
+  "min-w-[var(--zui-split-button-menu-min-width,12rem)]";
+
+export const zuiSplitButtonItemDisabled = "pointer-events-none opacity-50";

package/src/ui/dropdown/dropdown.tsx

@@ -37,10 +37,12 @@ const useDropdown = () => {
 ========================= */
 export const Dropdown = ({
   children,
+  className,
   defaultOpen = false,
   open: controlledOpen,
   onOpenChange,
   multiSelect = false,
+  ...props
 }: DropdownProps) => {
   const menuId = `${useId()}-menu`;
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
@@ -82,7 +84,9 @@ export const Dropdown = ({
         menuId,
       }}
     >
-      <div className="relative inline-block">{children}</div>
+      <div className={cn("relative inline-block", className)} {...props}>
+        {children}
+      </div>
     </DropdownContext.Provider>
   );
 };
@@ -180,10 +184,10 @@ export const DropdownItem = ({
   ...props
 }: DropdownItemProps) => {
   const { toggleSelect, selectedValues } = useDropdown();
-  const isSelected = selectedValues.includes(value);
+  const isSelected = value !== undefined && selectedValues.includes(value);
 
   const handleClick = () => {
-    toggleSelect(value);
+    if (value !== undefined) toggleSelect(value);
     onSelect?.();
   };
 

package/src/ui/dropdown/types.ts

@@ -14,7 +14,7 @@ export type DropdownContextType = {
 
 type Variant = keyof typeof zuiDropdownTriggerVariants;
 
-export type DropdownProps = {
+export type DropdownProps = HTMLAttributes<HTMLDivElement> & {
   children: ReactNode;
   defaultOpen?: boolean;
   open?: boolean;
@@ -37,7 +37,7 @@ export type DropdownContentProps = HTMLAttributes<HTMLDivElement> & {
 
 export type DropdownItemProps = HTMLAttributes<HTMLDivElement> & {
   children: ReactNode;
-  value: string;
+  value?: string;
   onSelect?: () => void;
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;

package/src/ui/split-button/index.ts

@@ -0,0 +1,19 @@
+"use client";
+
+export { SplitButton } from "./split-button";
+export type {
+  SplitButtonAppearance,
+  SplitButtonItem,
+  SplitButtonProps,
+  SplitButtonSize,
+  SplitButtonVariant,
+} from "./types";
+export {
+  splitButtonContentVariants,
+  splitButtonDropdownVariants,
+  splitButtonGroupVariants,
+  splitButtonItemDisabledVariants,
+  splitButtonPrimaryVariants,
+  splitButtonRootVariants,
+  splitButtonTriggerVariants,
+} from "./variants";

package/src/ui/split-button/split-button-base.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { FiChevronDown, FiLoader } from "react-icons/fi";
+
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownTrigger,
+} from "../dropdown";
+import { buttonVariants } from "../buttons";
+import { cn } from "../../lib/utils";
+
+import type {
+  SplitButtonAppearance,
+  SplitButtonProps,
+  SplitButtonVariant,
+} from "./types";
+import {
+  splitButtonContentVariants,
+  splitButtonDropdownVariants,
+  splitButtonGroupVariants,
+  splitButtonItemDisabledVariants,
+  splitButtonPrimaryVariants,
+  splitButtonRootVariants,
+  splitButtonTriggerVariants,
+} from "./variants";
+
+const variantAppearanceMap = {
+  primary: "default",
+  secondary: "secondary",
+  outline: "outline",
+  ghost: "ghost",
+  danger: "destructive",
+  success: "green",
+} as const satisfies Record<SplitButtonVariant, SplitButtonAppearance>;
+
+function resolveAppearance({
+  appearance,
+  variant,
+}: {
+  appearance?: SplitButtonAppearance;
+  variant?: SplitButtonVariant;
+}) {
+  return appearance ?? (variant ? variantAppearanceMap[variant] : "default");
+}
+
+export function SplitButtonBase({
+  label,
+  onClick,
+  items,
+  disabled = false,
+  loading = false,
+  appearance,
+  variant,
+  size = "md",
+  startIcon,
+  fullWidth = false,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  triggerLabel,
+  triggerOn = "click",
+  className,
+  ref,
+  ...rest
+}: SplitButtonProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isUnavailable = disabled || loading;
+  const resolvedAppearance = resolveAppearance({ appearance, variant });
+  const isControlled = controlledOpen !== undefined;
+  const open = isUnavailable
+    ? false
+    : isControlled
+      ? controlledOpen
+      : uncontrolledOpen;
+
+  const setOpen = (nextOpen: boolean) => {
+    if (isUnavailable && nextOpen) {
+      return;
+    }
+    if (!isControlled) {
+      setUncontrolledOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  };
+
+  const fullWidthFlag = fullWidth ? "true" : undefined;
+  const menuLabel = triggerLabel ?? `More ${label} actions`;
+
+  // Shared timeout ref for hover mode: delays close so the cursor can
+  // travel through the mt-2 gap between the button and the menu panel
+  // without dismissing the menu.
+  const hoverCloseRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scheduleClose = () => {
+    cancelClose();
+    hoverCloseRef.current = setTimeout(() => setOpen(false), 120);
+  };
+
+  const cancelClose = () => {
+    if (hoverCloseRef.current !== null) {
+      clearTimeout(hoverCloseRef.current);
+      hoverCloseRef.current = null;
+    }
+  };
+
+  useEffect(() => cancelClose, []);
+
+  useEffect(() => {
+    if (isUnavailable && !isControlled) {
+      setUncontrolledOpen(false);
+      onOpenChange?.(false);
+    }
+  }, [isUnavailable, onOpenChange, isControlled]);
+
+  const dropdownHoverHandlers =
+    triggerOn === "hover"
+      ? {
+          onMouseEnter: () => {
+            cancelClose();
+            setOpen(true);
+          },
+          onMouseLeave: scheduleClose,
+        }
+      : undefined;
+
+  const contentHoverHandlers =
+    triggerOn === "hover"
+      ? { onMouseEnter: cancelClose, onMouseLeave: scheduleClose }
+      : undefined;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="split-button"
+      data-full-width={fullWidthFlag}
+      className={cn(splitButtonRootVariants({ fullWidth }), className)}
+      {...rest}
+    >
+      <Dropdown
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={setOpen}
+        data-full-width={fullWidthFlag}
+        className={splitButtonDropdownVariants({ fullWidth })}
+        {...dropdownHoverHandlers}
+      >
+        <div
+          data-slot="split-button-group"
+          data-full-width={fullWidthFlag}
+          className={splitButtonGroupVariants({ fullWidth })}
+        >
+          <button
+            type="button"
+            data-slot="split-button-primary"
+            data-full-width={fullWidthFlag}
+            disabled={isUnavailable}
+            onClick={onClick}
+            className={cn(
+              buttonVariants({ appearance: resolvedAppearance, size }),
+              splitButtonPrimaryVariants(),
+            )}
+          >
+            {loading ? (
+              <FiLoader
+                aria-hidden
+                className="animate-spin"
+                data-slot="split-button-spinner-icon"
+              />
+            ) : (
+              startIcon
+            )}
+            <span>{label}</span>
+            {loading ? (
+              <span className="sr-only" role="status" aria-label="Loading" />
+            ) : null}
+          </button>
+
+          <DropdownTrigger
+            aria-label={menuLabel}
+            disabled={isUnavailable}
+            className={cn(
+              buttonVariants({ appearance: resolvedAppearance, size }),
+              splitButtonTriggerVariants({ size }),
+            )}
+          >
+            <FiChevronDown aria-hidden />
+          </DropdownTrigger>
+        </div>
+
+        <DropdownContent
+          className={splitButtonContentVariants()}
+          placement="bottom"
+          {...contentHoverHandlers}
+        >
+          {items.map((item) => (
+            <DropdownItem
+              key={item.id}
+              leftIcon={item.icon}
+              aria-disabled={item.disabled ? "true" : undefined}
+              className={
+                item.disabled ? splitButtonItemDisabledVariants() : undefined
+              }
+              onClick={(event) => {
+                if (item.disabled) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                }
+              }}
+              onKeyDown={(event) => {
+                if (item.disabled) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                }
+              }}
+              onSelect={() => {
+                setOpen(false);
+                item.onSelect?.();
+              }}
+            >
+              {item.label}
+            </DropdownItem>
+          ))}
+        </DropdownContent>
+      </Dropdown>
+    </div>
+  );
+}
+
+SplitButtonBase.displayName = "SplitButton";

package/src/ui/split-button/split-button.test.tsx

@@ -0,0 +1,208 @@
+import { createRef } from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { SplitButton } from "./split-button";
+
+const items = [
+  { id: "save-as", label: "Save As", onSelect: vi.fn() },
+  { id: "export", label: "Export", onSelect: vi.fn() },
+];
+
+describe("SplitButton", () => {
+  it("should render the primary label and menu trigger", () => {
+    render(<SplitButton label="Save" items={items} />);
+
+    expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /more save actions/i }),
+    ).toHaveAttribute("aria-haspopup", "menu");
+  });
+
+  it("should call onClick from the primary button", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(<SplitButton label="Save" items={items} onClick={onClick} />);
+
+    await user.click(screen.getByRole("button", { name: "Save" }));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should open the menu and call an item onSelect", async () => {
+    const user = userEvent.setup();
+    const handleExport = vi.fn();
+    render(
+      <SplitButton
+        label="Save"
+        items={[
+          { id: "save-as", label: "Save As" },
+          { id: "export", label: "Export", onSelect: handleExport },
+        ]}
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: /more save actions/i }),
+    );
+    await user.click(await screen.findByRole("menuitem", { name: "Export" }));
+
+    expect(handleExport).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(screen.queryByRole("menuitem", { name: "Export" })).toBeNull();
+    });
+  });
+
+  it("should not open or call actions while disabled", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <SplitButton
+        disabled
+        label="Save"
+        items={[{ id: "export", label: "Export" }]}
+        onClick={onClick}
+      />,
+    );
+
+    const buttons = screen.getAllByRole("button");
+    expect(buttons).toHaveLength(2);
+    const [primary, trigger] = buttons as [HTMLElement, HTMLElement];
+
+    expect(primary).toBeDisabled();
+    expect(trigger).toBeDisabled();
+    await user.click(primary);
+    await user.click(trigger);
+
+    expect(onClick).not.toHaveBeenCalled();
+    expect(screen.queryByRole("menu")).toBeNull();
+  });
+
+  it("should show a spinner and disable both buttons while loading", async () => {
+    const user = userEvent.setup();
+    render(
+      <SplitButton
+        loading
+        label="Saving"
+        items={[{ id: "export", label: "Export" }]}
+      />,
+    );
+
+    expect(
+      screen.getByRole("status", { name: /loading/i }),
+    ).toBeInTheDocument();
+    for (const button of screen.getAllByRole("button")) {
+      expect(button).toBeDisabled();
+    }
+
+    await user.click(
+      screen.getByRole("button", { name: /more saving actions/i }),
+    );
+    expect(screen.queryByRole("menu")).toBeNull();
+  });
+
+  it("should support controlled open state", () => {
+    const onOpenChange = vi.fn();
+    render(
+      <SplitButton
+        open
+        onOpenChange={onOpenChange}
+        label="Save"
+        items={[{ id: "export", label: "Export" }]}
+      />,
+    );
+
+    expect(screen.getByRole("menuitem", { name: "Export" })).toBeVisible();
+    expect(
+      screen.getByRole("button", { name: /more save actions/i }),
+    ).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should render start and item icons", async () => {
+    const user = userEvent.setup();
+    render(
+      <SplitButton
+        label="Save"
+        startIcon={<span data-testid="start-icon" />}
+        items={[
+          {
+            id: "export",
+            label: "Export",
+            icon: <span data-testid="item-icon" />,
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+    await user.click(
+      screen.getByRole("button", { name: /more save actions/i }),
+    );
+    expect(screen.getByTestId("item-icon")).toBeInTheDocument();
+  });
+
+  it("should apply variant aliases and fullWidth layout", () => {
+    render(
+      <SplitButton
+        fullWidth
+        label="Save"
+        variant="danger"
+        items={[{ id: "export", label: "Export" }]}
+      />,
+    );
+
+    expect(document.querySelector('[data-slot="split-button"]')).toHaveClass(
+      "w-full",
+    );
+    expect(screen.getByRole("button", { name: "Save" }).className).toMatch(
+      /destructive/,
+    );
+  });
+
+  it("should forward ref to the root element", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<SplitButton ref={ref} label="Save" items={items} />);
+
+    expect(ref.current?.getAttribute("data-slot")).toBe("split-button");
+  });
+
+  it("should open the menu on hover and close on mouse leave when triggerOn is hover", async () => {
+    const user = userEvent.setup();
+    render(
+      <SplitButton
+        triggerOn="hover"
+        label="Save"
+        items={[{ id: "export", label: "Export" }]}
+      />,
+    );
+
+    const trigger = screen.getByRole("button", { name: /more save actions/i });
+    await user.hover(trigger);
+    expect(
+      await screen.findByRole("menuitem", { name: "Export" }),
+    ).toBeVisible();
+
+    await user.unhover(trigger);
+    await waitFor(() => {
+      expect(screen.queryByRole("menuitem", { name: "Export" })).toBeNull();
+    });
+  });
+
+  it("should not open on hover when disabled with triggerOn hover", async () => {
+    const user = userEvent.setup();
+    render(
+      <SplitButton
+        triggerOn="hover"
+        disabled
+        label="Save"
+        items={[{ id: "export", label: "Export" }]}
+      />,
+    );
+
+    await user.hover(
+      screen.getByRole("button", { name: /more save actions/i }),
+    );
+    expect(screen.queryByRole("menu")).toBeNull();
+  });
+});

package/src/ui/split-button/split-button.tsx

@@ -0,0 +1,9 @@
+// split-button.tsx — default static entry (no framer-motion)
+import { SplitButtonBase } from "./split-button-base";
+import type { SplitButtonProps } from "./types";
+
+export const SplitButton = (props: SplitButtonProps) => {
+  return <SplitButtonBase {...props} />;
+};
+
+SplitButton.displayName = "SplitButton";

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

@@ -0,0 +1,46 @@
+import type {
+  ComponentPropsWithRef,
+  MouseEventHandler,
+  ReactNode,
+} from "react";
+
+import type { ButtonSharedStatic } from "../buttons";
+
+export type SplitButtonAppearance = ButtonSharedStatic["appearance"];
+export type SplitButtonSize = Extract<ButtonSharedStatic["size"], string>;
+export type SplitButtonVariant =
+  | "primary"
+  | "secondary"
+  | "outline"
+  | "ghost"
+  | "danger"
+  | "success";
+
+export interface SplitButtonItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+
+export interface SplitButtonProps extends Omit<
+  ComponentPropsWithRef<"div">,
+  "children" | "onClick"
+> {
+  label: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  items: SplitButtonItem[];
+  disabled?: boolean;
+  loading?: boolean;
+  appearance?: SplitButtonAppearance;
+  variant?: SplitButtonVariant;
+  size?: SplitButtonSize;
+  startIcon?: ReactNode;
+  fullWidth?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  triggerLabel?: string;
+  triggerOn?: "click" | "hover";
+}

package/src/ui/split-button/variants.ts

@@ -0,0 +1,46 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiSplitButtonContent,
+  zuiSplitButtonDropdown,
+  zuiSplitButtonFullWidth,
+  zuiSplitButtonGroup,
+  zuiSplitButtonItemDisabled,
+  zuiSplitButtonPrimary,
+  zuiSplitButtonRoot,
+  zuiSplitButtonTrigger,
+  zuiSplitButtonTriggerSizes,
+} from "../../design-system";
+
+export const splitButtonRootVariants = cva(zuiSplitButtonRoot, {
+  variants: {
+    fullWidth: {
+      true: zuiSplitButtonFullWidth,
+    },
+  },
+});
+export const splitButtonDropdownVariants = cva(zuiSplitButtonDropdown, {
+  variants: {
+    fullWidth: {
+      true: zuiSplitButtonFullWidth,
+    },
+  },
+});
+export const splitButtonGroupVariants = cva(zuiSplitButtonGroup, {
+  variants: {
+    fullWidth: {
+      true: zuiSplitButtonFullWidth,
+    },
+  },
+});
+export const splitButtonPrimaryVariants = cva(zuiSplitButtonPrimary);
+export const splitButtonTriggerVariants = cva(zuiSplitButtonTrigger, {
+  variants: {
+    size: zuiSplitButtonTriggerSizes,
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+export const splitButtonContentVariants = cva(zuiSplitButtonContent);
+export const splitButtonItemDisabledVariants = cva(zuiSplitButtonItemDisabled);

package/dist/chunk-5FU57ZVQ.js

@@ -1,19 +0,0 @@
-'use strict';
-
-var chunkTJ2EWPER_js = require('./chunk-TJ2EWPER.js');
-var classVarianceAuthority = require('class-variance-authority');
-
-var buttonVariants = classVarianceAuthority.cva(chunkTJ2EWPER_js.zuiButtonBase, {
-  variants: {
-    appearance: chunkTJ2EWPER_js.zuiButtonAppearances,
-    size: chunkTJ2EWPER_js.zuiButtonSizes
-  },
-  defaultVariants: {
-    appearance: "default",
-    size: "md"
-  }
-});
-
-exports.buttonVariants = buttonVariants;
-//# sourceMappingURL=chunk-5FU57ZVQ.js.map
-//# sourceMappingURL=chunk-5FU57ZVQ.js.map