@zentauri-ui/zentauri-components 1.9.2 → 2.0.0

package/dist/ui/combobox.mjs

@@ -0,0 +1,495 @@
+"use client";
+import { zuiComboboxTriggerBase, zuiComboboxSizes, zuiComboboxTriggerVariants, zuiComboboxItemBase, zuiComboboxDisabled, zuiComboboxItemAppearances, zuiComboboxListBase, zuiComboboxListAppearances, zuiComboboxContentBase, zuiComboboxSpacing, zuiComboboxContentAppearances, zuiComboboxSearchRowBase, zuiComboboxSearchIconBase, zuiComboboxSearchInputBase, zuiComboboxEmptyBase } from '../chunk-I42UYWYA.mjs';
+import { cn } from '../chunk-4D54YOL6.mjs';
+import '../chunk-J5LGTIGS.mjs';
+import { createContext, useContext, useId, useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var comboboxTriggerVariants = cva(zuiComboboxTriggerBase, {
+  variants: {
+    variant: zuiComboboxTriggerVariants,
+    size: zuiComboboxSizes
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+var comboboxItemVariants = cva(zuiComboboxItemBase, {
+  variants: {
+    appearance: zuiComboboxItemAppearances,
+    disabled: zuiComboboxDisabled
+  },
+  defaultVariants: {
+    appearance: "default"
+  }
+});
+var comboboxListVariants = cva(zuiComboboxListBase, {
+  variants: {
+    appearance: zuiComboboxListAppearances
+  },
+  defaultVariants: {
+    appearance: "default"
+  }
+});
+var comboboxContentVariants = cva(zuiComboboxContentBase, {
+  variants: {
+    appearance: zuiComboboxContentAppearances,
+    size: zuiComboboxSizes,
+    spacing: zuiComboboxSpacing
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    spacing: "default"
+  }
+});
+var ComboboxContext = createContext(null);
+var ComboboxAppearanceContext = createContext("default");
+var useCombobox = () => {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx) throw new Error("Combobox components must be used inside Combobox");
+  return ctx;
+};
+var Combobox = ({
+  children,
+  value,
+  defaultValue = [],
+  onChange,
+  multiple = false,
+  className
+}) => {
+  const baseId = useId();
+  const triggerId = `${baseId}-trigger`;
+  const listboxId = `${baseId}-listbox`;
+  const [internal, setInternal] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const [options, setOptions] = useState([]);
+  const [query, setQuery] = useState("");
+  const [activeValue, setActiveValue] = useState(null);
+  const rootRef = useRef(null);
+  const searchRef = useRef(null);
+  const triggerRef = useRef(null);
+  const selected = value ?? internal;
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (event) => {
+      const root = rootRef.current;
+      if (!root) return;
+      if (event.target instanceof Node && !root.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setActiveValue(null);
+    }
+  }, [open]);
+  const visibleValues = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) return options.map((o) => o.value);
+    return options.filter((o) => {
+      if (o.disabled) return false;
+      const labelText = typeof o.label === "string" ? o.label.toLowerCase() : "";
+      return o.value.toLowerCase().includes(normalized) || labelText.includes(normalized);
+    }).map((o) => o.value);
+  }, [query, options]);
+  useEffect(() => {
+    if (!open) return;
+    if (!activeValue) return;
+    if (visibleValues.includes(activeValue)) return;
+    setActiveValue(null);
+  }, [open, activeValue, visibleValues]);
+  const setSelected = (vals) => {
+    if (value !== void 0) {
+      onChange?.(vals);
+    } else {
+      setInternal(vals);
+      onChange?.(vals);
+    }
+  };
+  const toggleValue = useCallback(
+    (val) => {
+      if (multiple) {
+        const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];
+        setSelected(next);
+      } else {
+        setSelected([val]);
+        setOpen(false);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [multiple, selected]
+  );
+  const isSelected = useCallback(
+    (val) => selected.includes(val),
+    [selected]
+  );
+  const isVisible = useCallback(
+    (val) => visibleValues.includes(val),
+    [visibleValues]
+  );
+  const registerOption = useCallback((opt) => {
+    setOptions((prev) => {
+      const existing = prev.find((o) => o.value === opt.value);
+      if (existing) {
+        const labelChanged = (typeof opt.label === "string" || typeof opt.label === "number") && existing.label !== opt.label;
+        const disabledChanged = existing.disabled !== opt.disabled;
+        if (labelChanged || disabledChanged) {
+          return prev.map((o) => o.value === opt.value ? opt : o);
+        }
+        return prev;
+      }
+      return [...prev, opt];
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(
+    ComboboxContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        query,
+        setQuery,
+        selected,
+        toggleValue,
+        isSelected,
+        multiple,
+        options,
+        registerOption,
+        visibleValues,
+        isVisible,
+        activeValue,
+        setActiveValue,
+        triggerId,
+        listboxId,
+        searchRef,
+        triggerRef
+      },
+      children: /* @__PURE__ */ jsx("div", { ref: rootRef, className: cn("relative w-full", className), children })
+    }
+  );
+};
+Combobox.displayName = "Combobox";
+var ComboboxTrigger = ({
+  className,
+  variant,
+  size,
+  onClick,
+  ref: refProp,
+  ...props
+}) => {
+  const { open, setOpen, triggerId, listboxId, triggerRef } = useCombobox();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: (node) => {
+        triggerRef.current = node;
+        if (typeof refProp === "function") {
+          refProp(node);
+        } else if (refProp) {
+          refProp.current = node;
+        }
+      },
+      id: triggerId,
+      type: "button",
+      "aria-expanded": open,
+      "aria-haspopup": "listbox",
+      "aria-controls": listboxId,
+      "data-slot": "combobox-trigger",
+      className: cn(comboboxTriggerVariants({ variant, size }), className),
+      ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          setOpen(!open);
+        }
+      }
+    }
+  );
+};
+ComboboxTrigger.displayName = "ComboboxTrigger";
+var ComboboxValue = ({
+  placeholder = "Select...",
+  className,
+  ...props
+}) => {
+  const { selected, options } = useCombobox();
+  const selectedOptions = options.filter((o) => selected.includes(o.value));
+  if (selectedOptions.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "combobox-placeholder",
+        className: cn(
+          "text-[color:var(--zui-combobox-value-placeholder-fg,oklch(55.1%_0.027_264.364))] dark:text-white",
+          className
+        ),
+        ...props,
+        children: placeholder
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { "data-slot": "combobox-value", className: cn(className), ...props, children: selectedOptions.map((option, index) => /* @__PURE__ */ jsxs("span", { children: [
+    index > 0 ? ", " : null,
+    option.label
+  ] }, option.value)) });
+};
+ComboboxValue.displayName = "ComboboxValue";
+var ComboboxContent = ({
+  children,
+  className,
+  appearance = "default",
+  size = "md",
+  spacing = "default",
+  ...props
+}) => {
+  const { open, triggerId, listboxId, searchRef } = useCombobox();
+  useEffect(() => {
+    if (open) {
+      searchRef.current?.focus();
+    }
+  }, [open, searchRef]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(ComboboxAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-labelledby": triggerId,
+      "data-slot": "combobox-content",
+      className: cn(
+        comboboxContentVariants({ appearance, size, spacing }),
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+ComboboxContent.displayName = "ComboboxContent";
+var ComboboxSearch = ({
+  className,
+  placeholder = "Search...",
+  ref: refProp,
+  ...props
+}) => {
+  const {
+    query,
+    setQuery,
+    visibleValues,
+    activeValue,
+    setActiveValue,
+    toggleValue,
+    setOpen,
+    searchRef,
+    listboxId,
+    options,
+    triggerRef
+  } = useCombobox();
+  const optionByValue = useMemo(
+    () => new Map(options.map((option) => [option.value, option])),
+    [options]
+  );
+  const moveActive = (direction) => {
+    if (visibleValues.length === 0) return;
+    const currentIndex = activeValue ? visibleValues.indexOf(activeValue) : -1;
+    let nextIndex = currentIndex;
+    for (let i = 0; i < visibleValues.length; i++) {
+      if (nextIndex === -1) {
+        nextIndex = direction === 1 ? 0 : visibleValues.length - 1;
+      } else {
+        nextIndex = (nextIndex + direction + visibleValues.length) % visibleValues.length;
+      }
+      const candidate = optionByValue.get(visibleValues[nextIndex] ?? "");
+      if (candidate && !candidate.disabled) {
+        setActiveValue(visibleValues[nextIndex] ?? null);
+        return;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "combobox-search-row", className: zuiComboboxSearchRowBase, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": true,
+        viewBox: "0 0 24 24",
+        className: zuiComboboxSearchIconBase,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (node) => {
+          searchRef.current = node;
+          if (typeof refProp === "function") {
+            refProp(node);
+          } else if (refProp) {
+            refProp.current = node;
+          }
+        },
+        type: "text",
+        role: "combobox",
+        "aria-expanded": true,
+        "aria-controls": listboxId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeValue ? `${listboxId}-option-${activeValue}` : void 0,
+        "data-slot": "combobox-search",
+        className: cn(zuiComboboxSearchInputBase, className),
+        placeholder,
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            moveActive(1);
+          } else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            moveActive(-1);
+          } else if (event.key === "Enter") {
+            event.preventDefault();
+            if (activeValue && visibleValues.includes(activeValue)) {
+              const option = optionByValue.get(activeValue);
+              if (option && !option.disabled) {
+                toggleValue(activeValue);
+              }
+            }
+          } else if (event.key === "Escape") {
+            event.preventDefault();
+            setOpen(false);
+            triggerRef.current?.focus();
+          }
+        },
+        ...props
+      }
+    )
+  ] });
+};
+ComboboxSearch.displayName = "ComboboxSearch";
+var ComboboxList = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { listboxId, triggerId } = useCombobox();
+  const appearance = useContext(ComboboxAppearanceContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: listboxId,
+      role: "listbox",
+      "aria-labelledby": triggerId,
+      "data-slot": "combobox-list",
+      className: cn(comboboxListVariants({ appearance }), className),
+      ...props,
+      children
+    }
+  );
+};
+ComboboxList.displayName = "ComboboxList";
+var ComboboxItem = ({
+  value,
+  children,
+  disabled,
+  appearance = "default",
+  className,
+  ...props
+}) => {
+  const {
+    toggleValue,
+    isSelected,
+    registerOption,
+    isVisible,
+    activeValue,
+    setActiveValue,
+    listboxId
+  } = useCombobox();
+  useEffect(() => {
+    registerOption({ label: children, value, disabled });
+  }, [children, disabled, registerOption, value]);
+  const visible = isVisible(value);
+  const isActive = isSelected(value);
+  const isHighlighted = activeValue === value;
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: `${listboxId}-option-${value}`,
+      role: "option",
+      "aria-selected": isActive,
+      "aria-disabled": disabled ? true : void 0,
+      tabIndex: -1,
+      "data-slot": "combobox-item",
+      "data-selected": isActive ? "true" : "false",
+      "data-active": isHighlighted ? "true" : void 0,
+      onMouseEnter: () => !disabled && setActiveValue(value),
+      onClick: () => !disabled && toggleValue(value),
+      onKeyDown: (e) => {
+        if (disabled) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggleValue(value);
+        }
+      },
+      className: cn(
+        comboboxItemVariants({ disabled, appearance }),
+        "flex justify-between",
+        isHighlighted && "bg-[var(--zui-combobox-item-active-bg,oklch(93%_0.006_264.531))] dark:bg-[var(--zui-combobox-item-active-bg-dark,oklch(22%_0.006_264.531))]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        isActive && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": true,
+            viewBox: "0 0 24 24",
+            className: "size-4 shrink-0",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+          }
+        )
+      ]
+    }
+  );
+};
+ComboboxItem.displayName = "ComboboxItem";
+var ComboboxEmpty = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { visibleValues } = useCombobox();
+  if (visibleValues.length > 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "combobox-empty",
+      className: cn(zuiComboboxEmptyBase, className),
+      ...props,
+      children
+    }
+  );
+};
+ComboboxEmpty.displayName = "ComboboxEmpty";
+
+export { Combobox, ComboboxContent, ComboboxContext, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxSearch, ComboboxTrigger, ComboboxValue, comboboxContentVariants, comboboxItemVariants, comboboxListVariants, comboboxTriggerVariants, useCombobox };
+//# sourceMappingURL=combobox.mjs.map
+//# sourceMappingURL=combobox.mjs.map

package/dist/ui/combobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/combobox/variants.ts","../../src/ui/combobox/combobox-base.tsx"],"names":[],"mappings":"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","file":"combobox.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiComboboxContentAppearances,\n  zuiComboboxContentBase,\n  zuiComboboxDisabled,\n  zuiComboboxItemAppearances,\n  zuiComboboxItemBase,\n  zuiComboboxListAppearances,\n  zuiComboboxListBase,\n  zuiComboboxSizes,\n  zuiComboboxSpacing,\n  zuiComboboxTriggerBase,\n  zuiComboboxTriggerVariants,\n} from \"../../design-system/combobox\";\n\nexport const comboboxTriggerVariants = cva(zuiComboboxTriggerBase, {\n  variants: {\n    variant: zuiComboboxTriggerVariants,\n    size: zuiComboboxSizes,\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const comboboxItemVariants = cva(zuiComboboxItemBase, {\n  variants: {\n    appearance: zuiComboboxItemAppearances,\n    disabled: zuiComboboxDisabled,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n  },\n});\n\nexport const comboboxListVariants = cva(zuiComboboxListBase, {\n  variants: {\n    appearance: zuiComboboxListAppearances,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n  },\n});\n\nexport const comboboxContentVariants = cva(zuiComboboxContentBase, {\n  variants: {\n    appearance: zuiComboboxContentAppearances,\n    size: zuiComboboxSizes,\n    spacing: zuiComboboxSpacing,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n    spacing: \"default\",\n  },\n});\n","\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\n\nimport {\n  zuiComboboxEmptyBase,\n  zuiComboboxSearchIconBase,\n  zuiComboboxSearchInputBase,\n  zuiComboboxSearchRowBase,\n} from \"../../design-system/combobox\";\nimport { cn } from \"../../lib/utils\";\nimport type {\n  ComboboxAppearance,\n  ComboboxContentProps,\n  ComboboxContextType,\n  ComboboxEmptyProps,\n  ComboboxItemProps,\n  ComboboxListProps,\n  ComboboxOption,\n  ComboboxProps,\n  ComboboxSearchProps,\n  ComboboxTriggerProps,\n  ComboboxValueProps,\n} from \"./types\";\nimport {\n  comboboxContentVariants,\n  comboboxItemVariants,\n  comboboxListVariants,\n  comboboxTriggerVariants,\n} from \"./variants\";\n\nconst ComboboxContext = createContext<ComboboxContextType | null>(null);\nconst ComboboxAppearanceContext = createContext<ComboboxAppearance>(\"default\");\n\nexport const useCombobox = () => {\n  const ctx = useContext(ComboboxContext);\n  if (!ctx) throw new Error(\"Combobox components must be used inside Combobox\");\n  return ctx;\n};\n\nexport { ComboboxContext };\n\nexport const Combobox = ({\n  children,\n  value,\n  defaultValue = [],\n  onChange,\n  multiple = false,\n  className,\n}: ComboboxProps) => {\n  const baseId = useId();\n  const triggerId = `${baseId}-trigger`;\n  const listboxId = `${baseId}-listbox`;\n\n  const [internal, setInternal] = useState<string[]>(defaultValue);\n  const [open, setOpen] = useState(false);\n  const [options, setOptions] = useState<ComboboxOption[]>([]);\n  const [query, setQuery] = useState(\"\");\n  const [activeValue, setActiveValue] = useState<string | null>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const selected = value ?? internal;\n\n  useEffect(() => {\n    if (!open) return;\n    const handlePointerDown = (event: PointerEvent) => {\n      const root = rootRef.current;\n      if (!root) return;\n      if (event.target instanceof Node && !root.contains(event.target)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"pointerdown\", handlePointerDown);\n    return () => document.removeEventListener(\"pointerdown\", handlePointerDown);\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) {\n      setQuery(\"\");\n      setActiveValue(null);\n    }\n  }, [open]);\n\n  const visibleValues = useMemo(() => {\n    const normalized = query.trim().toLowerCase();\n    if (!normalized) return options.map((o) => o.value);\n    return options\n      .filter((o) => {\n        if (o.disabled) return false;\n        const labelText =\n          typeof o.label === \"string\" ? o.label.toLowerCase() : \"\";\n        return (\n          o.value.toLowerCase().includes(normalized) ||\n          labelText.includes(normalized)\n        );\n      })\n      .map((o) => o.value);\n  }, [query, options]);\n\n  // If the current highlight gets filtered out while typing, clear it.\n  // We do NOT auto-populate on open so ArrowDown always starts from the top.\n  useEffect(() => {\n    if (!open) return;\n    if (!activeValue) return;\n    if (visibleValues.includes(activeValue)) return;\n    setActiveValue(null);\n  }, [open, activeValue, visibleValues]);\n\n  const setSelected = (vals: string[]) => {\n    if (value !== undefined) {\n      onChange?.(vals);\n    } else {\n      setInternal(vals);\n      onChange?.(vals);\n    }\n  };\n\n  const toggleValue = useCallback(\n    (val: string) => {\n      if (multiple) {\n        const next = selected.includes(val)\n          ? selected.filter((v) => v !== val)\n          : [...selected, val];\n        setSelected(next);\n      } else {\n        setSelected([val]);\n        setOpen(false);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [multiple, selected],\n  );\n\n  const isSelected = useCallback(\n    (val: string) => selected.includes(val),\n    [selected],\n  );\n\n  const isVisible = useCallback(\n    (val: string) => visibleValues.includes(val),\n    [visibleValues],\n  );\n\n  const registerOption = useCallback((opt: ComboboxOption) => {\n    setOptions((prev) => {\n      const existing = prev.find((o) => o.value === opt.value);\n      if (existing) {\n        const labelChanged =\n          (typeof opt.label === \"string\" || typeof opt.label === \"number\") &&\n          existing.label !== opt.label;\n        const disabledChanged = existing.disabled !== opt.disabled;\n        if (labelChanged || disabledChanged) {\n          return prev.map((o) => (o.value === opt.value ? opt : o));\n        }\n        return prev;\n      }\n      return [...prev, opt];\n    });\n    // No cleanup on unmount: options must persist across panel open/close so\n    // ComboboxValue can still display the selected label when the panel is closed.\n  }, []);\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        open,\n        setOpen,\n        query,\n        setQuery,\n        selected,\n        toggleValue,\n        isSelected,\n        multiple,\n        options,\n        registerOption,\n        visibleValues,\n        isVisible,\n        activeValue,\n        setActiveValue,\n        triggerId,\n        listboxId,\n        searchRef,\n        triggerRef,\n      }}\n    >\n      <div ref={rootRef} className={cn(\"relative w-full\", className)}>\n        {children}\n      </div>\n    </ComboboxContext.Provider>\n  );\n};\n\nCombobox.displayName = \"Combobox\";\n\nexport const ComboboxTrigger = ({\n  className,\n  variant,\n  size,\n  onClick,\n  ref: refProp,\n  ...props\n}: ComboboxTriggerProps) => {\n  const { open, setOpen, triggerId, listboxId, triggerRef } = useCombobox();\n\n  return (\n    <button\n      ref={(node) => {\n        triggerRef.current = node;\n        if (typeof refProp === \"function\") {\n          refProp(node);\n        } else if (refProp) {\n          (refProp as RefObject<HTMLButtonElement | null>).current = node;\n        }\n      }}\n      id={triggerId}\n      type=\"button\"\n      aria-expanded={open}\n      aria-haspopup=\"listbox\"\n      aria-controls={listboxId}\n      data-slot=\"combobox-trigger\"\n      className={cn(comboboxTriggerVariants({ variant, size }), className)}\n      {...props}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) {\n          setOpen(!open);\n        }\n      }}\n    />\n  );\n};\n\nComboboxTrigger.displayName = \"ComboboxTrigger\";\n\nexport const ComboboxValue = ({\n  placeholder = \"Select...\",\n  className,\n  ...props\n}: ComboboxValueProps) => {\n  const { selected, options } = useCombobox();\n  const selectedOptions = options.filter((o) => selected.includes(o.value));\n\n  if (selectedOptions.length === 0) {\n    return (\n      <span\n        data-slot=\"combobox-placeholder\"\n        className={cn(\n          \"text-[color:var(--zui-combobox-value-placeholder-fg,oklch(55.1%_0.027_264.364))] dark:text-white\",\n          className,\n        )}\n        {...props}\n      >\n        {placeholder}\n      </span>\n    );\n  }\n\n  return (\n    <span data-slot=\"combobox-value\" className={cn(className)} {...props}>\n      {selectedOptions.map((option, index) => (\n        <span key={option.value}>\n          {index > 0 ? \", \" : null}\n          {option.label}\n        </span>\n      ))}\n    </span>\n  );\n};\n\nComboboxValue.displayName = \"ComboboxValue\";\n\nexport const ComboboxContent = ({\n  children,\n  className,\n  appearance = \"default\",\n  size = \"md\",\n  spacing = \"default\",\n  ...props\n}: ComboboxContentProps) => {\n  const { open, triggerId, listboxId, searchRef } = useCombobox();\n\n  useEffect(() => {\n    if (open) {\n      searchRef.current?.focus();\n    }\n  }, [open, searchRef]);\n\n  if (!open) return null;\n\n  return (\n    <ComboboxAppearanceContext.Provider value={appearance}>\n      <div\n        aria-labelledby={triggerId}\n        data-slot=\"combobox-content\"\n        className={cn(\n          comboboxContentVariants({ appearance, size, spacing }),\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </ComboboxAppearanceContext.Provider>\n  );\n};\n\nComboboxContent.displayName = \"ComboboxContent\";\n\nexport const ComboboxSearch = ({\n  className,\n  placeholder = \"Search...\",\n  ref: refProp,\n  ...props\n}: ComboboxSearchProps) => {\n  const {\n    query,\n    setQuery,\n    visibleValues,\n    activeValue,\n    setActiveValue,\n    toggleValue,\n    setOpen,\n    searchRef,\n    listboxId,\n    options,\n    triggerRef,\n  } = useCombobox();\n\n  const optionByValue = useMemo(\n    () => new Map(options.map((option) => [option.value, option])),\n    [options],\n  );\n\n  const moveActive = (direction: 1 | -1) => {\n    if (visibleValues.length === 0) return;\n    const currentIndex = activeValue ? visibleValues.indexOf(activeValue) : -1;\n    let nextIndex = currentIndex;\n    for (let i = 0; i < visibleValues.length; i++) {\n      if (nextIndex === -1) {\n        nextIndex = direction === 1 ? 0 : visibleValues.length - 1;\n      } else {\n        nextIndex =\n          (nextIndex + direction + visibleValues.length) % visibleValues.length;\n      }\n      const candidate = optionByValue.get(visibleValues[nextIndex] ?? \"\");\n      if (candidate && !candidate.disabled) {\n        setActiveValue(visibleValues[nextIndex] ?? null);\n        return;\n      }\n    }\n  };\n\n  return (\n    <div data-slot=\"combobox-search-row\" className={zuiComboboxSearchRowBase}>\n      <svg\n        aria-hidden\n        viewBox=\"0 0 24 24\"\n        className={zuiComboboxSearchIconBase}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"8\" />\n        <path d=\"m21 21-4.3-4.3\" />\n      </svg>\n      <input\n        ref={(node) => {\n          searchRef.current = node;\n          if (typeof refProp === \"function\") {\n            refProp(node);\n          } else if (refProp) {\n            (refProp as RefObject<HTMLInputElement | null>).current = node;\n          }\n        }}\n        type=\"text\"\n        role=\"combobox\"\n        aria-expanded\n        aria-controls={listboxId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={\n          activeValue ? `${listboxId}-option-${activeValue}` : undefined\n        }\n        data-slot=\"combobox-search\"\n        className={cn(zuiComboboxSearchInputBase, className)}\n        placeholder={placeholder}\n        value={query}\n        onChange={(event) => setQuery(event.target.value)}\n        onKeyDown={(event) => {\n          if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            moveActive(1);\n          } else if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            moveActive(-1);\n          } else if (event.key === \"Enter\") {\n            event.preventDefault();\n            if (activeValue && visibleValues.includes(activeValue)) {\n              const option = optionByValue.get(activeValue);\n              if (option && !option.disabled) {\n                toggleValue(activeValue);\n              }\n            }\n          } else if (event.key === \"Escape\") {\n            event.preventDefault();\n            setOpen(false);\n            triggerRef.current?.focus();\n          }\n        }}\n        {...props}\n      />\n    </div>\n  );\n};\n\nComboboxSearch.displayName = \"ComboboxSearch\";\n\nexport const ComboboxList = ({\n  children,\n  className,\n  ...props\n}: ComboboxListProps) => {\n  const { listboxId, triggerId } = useCombobox();\n  const appearance = useContext(ComboboxAppearanceContext);\n\n  return (\n    <div\n      id={listboxId}\n      role=\"listbox\"\n      aria-labelledby={triggerId}\n      data-slot=\"combobox-list\"\n      className={cn(comboboxListVariants({ appearance }), className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nComboboxList.displayName = \"ComboboxList\";\n\nexport const ComboboxItem = ({\n  value,\n  children,\n  disabled,\n  appearance = \"default\",\n  className,\n  ...props\n}: ComboboxItemProps) => {\n  const {\n    toggleValue,\n    isSelected,\n    registerOption,\n    isVisible,\n    activeValue,\n    setActiveValue,\n    listboxId,\n  } = useCombobox();\n\n  useEffect(() => {\n    registerOption({ label: children, value, disabled });\n  }, [children, disabled, registerOption, value]);\n\n  const visible = isVisible(value);\n  const isActive = isSelected(value);\n  const isHighlighted = activeValue === value;\n\n  if (!visible) return null;\n\n  return (\n    <div\n      id={`${listboxId}-option-${value}`}\n      role=\"option\"\n      aria-selected={isActive}\n      aria-disabled={disabled ? true : undefined}\n      tabIndex={-1}\n      data-slot=\"combobox-item\"\n      data-selected={isActive ? \"true\" : \"false\"}\n      data-active={isHighlighted ? \"true\" : undefined}\n      onMouseEnter={() => !disabled && setActiveValue(value)}\n      onClick={() => !disabled && toggleValue(value)}\n      onKeyDown={(e) => {\n        if (disabled) return;\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          toggleValue(value);\n        }\n      }}\n      className={cn(\n        comboboxItemVariants({ disabled, appearance }),\n        \"flex justify-between\",\n        isHighlighted &&\n          \"bg-[var(--zui-combobox-item-active-bg,oklch(93%_0.006_264.531))] dark:bg-[var(--zui-combobox-item-active-bg-dark,oklch(22%_0.006_264.531))]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {isActive && (\n        <svg\n          aria-hidden\n          viewBox=\"0 0 24 24\"\n          className=\"size-4 shrink-0\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      )}\n    </div>\n  );\n};\n\nComboboxItem.displayName = \"ComboboxItem\";\n\nexport const ComboboxEmpty = ({\n  className,\n  children,\n  ...props\n}: ComboboxEmptyProps) => {\n  const { visibleValues } = useCombobox();\n\n  if (visibleValues.length > 0) return null;\n\n  return (\n    <div\n      data-slot=\"combobox-empty\"\n      className={cn(zuiComboboxEmptyBase, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nComboboxEmpty.displayName = \"ComboboxEmpty\";\n"]}

package/dist/ui/dynamic-stepper.js

@@ -3,10 +3,11 @@
 
 var chunkVMCOX3Z2_js = require('../chunk-VMCOX3Z2.js');
 require('../chunk-HPN7H5ZM.js');
-var chunkLQPKZ5ZD_js = require('../chunk-LQPKZ5ZD.js');
-require('../chunk-AQHY4S33.js');
-var chunk5J6QMTES_js = require('../chunk-5J6QMTES.js');
+var chunkLS4GY2ZQ_js = require('../chunk-LS4GY2ZQ.js');
+require('../chunk-FAMHSJTK.js');
+var chunkIKXO5SJ4_js = require('../chunk-IKXO5SJ4.js');
 require('../chunk-USLP5NY6.js');
+require('../chunk-P25NI2HG.js');
 require('../chunk-UU34Q42Q.js');
 require('../chunk-AADGUMYW.js');
 require('../chunk-3MK7CWEX.js');
@@ -17,27 +18,27 @@ require('../chunk-E7BPOL74.js');
 require('../chunk-3Z6L24ZK.js');
 require('../chunk-56DECC6D.js');
 require('../chunk-7M4TUP4I.js');
-require('../chunk-P25NI2HG.js');
+require('../chunk-YN4ZS3R2.js');
 require('../chunk-MCYFKM7T.js');
 require('../chunk-22I54GJW.js');
 require('../chunk-LU6VEI4B.js');
 require('../chunk-FXDHDQTH.js');
 require('../chunk-FNNIH7R2.js');
 require('../chunk-VWHER5XN.js');
+require('../chunk-L6AS5AVO.js');
 require('../chunk-JTMRSRYD.js');
 require('../chunk-I55QC57T.js');
 require('../chunk-7LFRU6AW.js');
 require('../chunk-L67EJJFN.js');
 require('../chunk-F6V74YMW.js');
-require('../chunk-YN4ZS3R2.js');
 require('../chunk-QTFOUK4H.js');
 require('../chunk-ISXAUMRW.js');
+require('../chunk-ZVRGLG35.js');
 require('../chunk-R2256VSD.js');
 require('../chunk-Y4YQSCNL.js');
 require('../chunk-FWY22BZZ.js');
 require('../chunk-OGMIKRLJ.js');
 require('../chunk-Y7NRTCAT.js');
-require('../chunk-L6AS5AVO.js');
 require('../chunk-MUP7DVQR.js');
 require('../chunk-45CGVW7S.js');
 require('../chunk-S4OSJ4ZN.js');
@@ -52,37 +53,37 @@ var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
 function dynamicStepperIndicatorToneClass(state, tone) {
-  return chunk5J6QMTES_js.zuiDynamicStepperIndicatorToneClasses[tone][state];
+  return chunkIKXO5SJ4_js.zuiDynamicStepperIndicatorToneClasses[tone][state];
 }
-var dynamicStepperRootVariants = classVarianceAuthority.cva(chunk5J6QMTES_js.zuiDynamicStepperRootBase, {
+var dynamicStepperRootVariants = classVarianceAuthority.cva(chunkIKXO5SJ4_js.zuiDynamicStepperRootBase, {
   variants: {
-    orientation: chunk5J6QMTES_js.zuiDynamicStepperRootOrientations
+    orientation: chunkIKXO5SJ4_js.zuiDynamicStepperRootOrientations
   },
   defaultVariants: {
     orientation: "horizontal"
   }
 });
-var dynamicStepperMapperVariants = classVarianceAuthority.cva(chunk5J6QMTES_js.zuiDynamicStepperMapperBase, {
+var dynamicStepperMapperVariants = classVarianceAuthority.cva(chunkIKXO5SJ4_js.zuiDynamicStepperMapperBase, {
   variants: {
-    orientation: chunk5J6QMTES_js.zuiDynamicStepperMapperOrientations
+    orientation: chunkIKXO5SJ4_js.zuiDynamicStepperMapperOrientations
   },
   defaultVariants: {
     orientation: "horizontal"
   }
 });
-var dynamicStepperItemVariants = classVarianceAuthority.cva(chunk5J6QMTES_js.zuiDynamicStepperItemBase, {
+var dynamicStepperItemVariants = classVarianceAuthority.cva(chunkIKXO5SJ4_js.zuiDynamicStepperItemBase, {
   variants: {
-    orientation: chunk5J6QMTES_js.zuiDynamicStepperItemOrientations
+    orientation: chunkIKXO5SJ4_js.zuiDynamicStepperItemOrientations
   },
   defaultVariants: {
     orientation: "horizontal"
   }
 });
 var dynamicStepperIndicatorVariants = classVarianceAuthority.cva(
-  chunk5J6QMTES_js.zuiDynamicStepperIndicatorBase,
+  chunkIKXO5SJ4_js.zuiDynamicStepperIndicatorBase,
   {
     variants: {
-      size: chunk5J6QMTES_js.zuiDynamicStepperIndicatorSizes
+      size: chunkIKXO5SJ4_js.zuiDynamicStepperIndicatorSizes
     },
     defaultVariants: {
       size: "md"
@@ -135,7 +136,7 @@ var DynamicStepper = ({
       ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkLQPKZ5ZD_js.Button,
+          chunkLS4GY2ZQ_js.Button,
           {
             id: previousId,
             "data-slot": "dynamic-stepper-previous",
@@ -214,7 +215,7 @@ var DynamicStepper = ({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkLQPKZ5ZD_js.Button,
+          chunkLS4GY2ZQ_js.Button,
           {
             id: nextId,
             "data-slot": "dynamic-stepper-next",