@thangnqdev/ui 0.1.0

package/dist/navigation/index.cjs

@@ -0,0 +1,673 @@
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var classVarianceAuthority = require('class-variance-authority');
+var reactDom = require('react-dom');
+
+// src/navigation/Tabs.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var TabsContext = react.createContext(null);
+function useTabs() {
+  const context = react.useContext(TabsContext);
+  if (!context) throw new Error("Tabs compound components must be used within <Tabs />");
+  return context;
+}
+var Tabs = react.forwardRef(
+  ({ defaultValue = "", value: controlledValue, onValueChange, variant = "pills", className, children, ...props }, ref) => {
+    const [selectedTab, setSelectedTab] = react.useState(defaultValue);
+    const activeTab = controlledValue !== void 0 ? controlledValue : selectedTab;
+    const handleTabChange = (val) => {
+      setSelectedTab(val);
+      onValueChange?.(val);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange, variant }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("w-full flex flex-col space-y-4", className), ...props, children }) });
+  }
+);
+Tabs.displayName = "Tabs";
+var TabsList = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { variant } = useTabs();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        className: cn(
+          "inline-flex items-center",
+          variant === "pills" && "p-1 rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)] gap-1",
+          variant === "line" && "border-b border-[var(--ui-border-default)] gap-6",
+          variant === "enclosed" && "border-b border-[var(--ui-border-default)] gap-1",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = react.forwardRef(
+  ({ className, value, children, ...props }, ref) => {
+    const { activeTab, setActiveTab, variant } = useTabs();
+    const isActive = activeTab === value;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        role: "tab",
+        type: "button",
+        "aria-selected": isActive,
+        onClick: () => setActiveTab(value),
+        className: cn(
+          "inline-flex items-center justify-center font-medium text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer",
+          variant === "pills" && "px-3.5 py-1.5 rounded-[var(--ui-radius-md)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)]",
+          variant === "pills" && isActive && "bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] font-semibold shadow-sm",
+          variant === "line" && "pb-3 pt-2 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] border-b-2 border-transparent -mb-[1px]",
+          variant === "line" && isActive && "border-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold",
+          variant === "enclosed" && "px-4 py-2 rounded-t-[var(--ui-radius-md)] border border-transparent text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] -mb-[1px]",
+          variant === "enclosed" && isActive && "bg-[var(--ui-bg-surface)] border-[var(--ui-border-default)] border-b-transparent text-[var(--ui-text-primary)] font-semibold",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = react.forwardRef(
+  ({ className, value, children, ...props }, ref) => {
+    const { activeTab } = useTabs();
+    if (activeTab !== value) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        tabIndex: 0,
+        className: cn("focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] animate-in fade-in duration-150", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TabsContent.displayName = "TabsContent";
+var Breadcrumb = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("flex items-center text-sm", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-1.5 sm:gap-2", children }) });
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbItem = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: cn("inline-flex items-center gap-1.5", className), ...props, children });
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbLink = react.forwardRef(
+  ({ className, as: Component = "a", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: cn("text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors font-medium", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        role: "link",
+        "aria-disabled": "true",
+        "aria-current": "page",
+        className: cn("font-semibold text-[var(--ui-text-primary)]", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+var BreadcrumbSeparator = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, role: "presentation", "aria-hidden": "true", className: cn("text-[var(--ui-text-muted)] opacity-60", className), ...props, children: children || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3.5 h-3.5" }) });
+  }
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var buttonVariants = classVarianceAuthority.cva(
+  "relative inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--ui-primary)]/30 active:scale-[0.97] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        primary: "bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] text-white shadow-sm hover:shadow-[0_4px_16px_rgba(0,113,227,0.35)] border border-white/20",
+        secondary: "bg-[var(--ui-bg-tertiary)] hover:bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] border border-[var(--ui-border-subtle)] shadow-sm",
+        outline: "border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]/60 backdrop-blur-xl text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] hover:border-[var(--ui-border-strong)] shadow-sm",
+        ghost: "bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]/70",
+        danger: "bg-[var(--ui-error)] hover:bg-[var(--ui-error)]/90 text-white shadow-sm hover:shadow-[0_4px_16px_rgba(255,59,48,0.35)] border border-white/15",
+        link: "bg-transparent text-[var(--ui-primary)] underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal",
+        glass: "bg-white/10 dark:bg-white/10 backdrop-blur-2xl border border-white/20 dark:border-white/15 text-[var(--ui-text-primary)] hover:bg-white/20 dark:hover:bg-white/15 shadow-[0_8px_32px_rgba(0,0,0,0.12)] hover:shadow-[0_8px_32px_rgba(0,113,227,0.25)]"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs rounded-[var(--ui-radius-sm)] gap-1",
+        sm: "h-8.5 px-3.5 text-xs rounded-[var(--ui-radius-md)] gap-1.5",
+        md: "h-10 px-4.5 text-sm rounded-[var(--ui-radius-md)] gap-2 font-semibold",
+        lg: "h-12 px-6 text-base rounded-[var(--ui-radius-lg)] gap-2.5 font-semibold",
+        xl: "h-14 px-8 text-lg rounded-[var(--ui-radius-xl)] gap-3 font-bold"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      fullWidth: false
+    }
+  }
+);
+var Button = react.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    fullWidth,
+    loading = false,
+    loadingText,
+    leftIcon,
+    rightIcon,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        disabled: isDisabled,
+        className: cn(buttonVariants({ variant, size, fullWidth }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/35 to-transparent pointer-events-none"
+            }
+          ),
+          loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText || children })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 inline-flex items-center", children: leftIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+            rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 inline-flex items-center", children: rightIcon })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Pagination = react.forwardRef(
+  ({ className, currentPage, totalPages, onPageChange, siblingCount = 1, ...props }, ref) => {
+    const generatePages = () => {
+      const totalPageNumbers = siblingCount * 2 + 5;
+      if (totalPages <= totalPageNumbers) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+      }
+      const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+      const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+      const shouldShowLeftDots = leftSiblingIndex > 2;
+      const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+      if (!shouldShowLeftDots && shouldShowRightDots) {
+        const leftItemCount = 3 + 2 * siblingCount;
+        const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+        return [...leftRange, "DOTS", totalPages];
+      }
+      if (shouldShowLeftDots && !shouldShowRightDots) {
+        const rightItemCount = 3 + 2 * siblingCount;
+        const rightRange = Array.from(
+          { length: rightItemCount },
+          (_, i) => totalPages - rightItemCount + i + 1
+        );
+        return [1, "DOTS", ...rightRange];
+      }
+      if (shouldShowLeftDots && shouldShowRightDots) {
+        const middleRange = Array.from(
+          { length: rightSiblingIndex - leftSiblingIndex + 1 },
+          (_, i) => leftSiblingIndex + i
+        );
+        return [1, "DOTS", ...middleRange, "DOTS", totalPages];
+      }
+      return [];
+    };
+    const pages = generatePages();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        ref,
+        role: "navigation",
+        "aria-label": "Pagination",
+        className: cn("flex items-center justify-center gap-1.5", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              disabled: currentPage <= 1,
+              onClick: () => onPageChange(currentPage - 1),
+              "aria-label": "Go to previous page",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" })
+            }
+          ),
+          pages.map((p, index) => {
+            if (p === "DOTS") {
+              return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-8 h-8 text-[var(--ui-text-muted)]", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "w-4 h-4" }) }, `dots-${index}`);
+            }
+            const pageNum = Number(p);
+            const isActive = pageNum === currentPage;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: isActive ? "primary" : "ghost",
+                size: "sm",
+                "aria-current": isActive ? "page" : void 0,
+                onClick: () => onPageChange(pageNum),
+                className: "w-8 h-8 p-0 text-xs font-semibold",
+                children: pageNum
+              },
+              pageNum
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              disabled: currentPage >= totalPages,
+              onClick: () => onPageChange(currentPage + 1),
+              "aria-label": "Go to next page",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+var Stepper = react.forwardRef(
+  ({ className, steps, currentStep, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "navigation",
+        "aria-label": "Progress Stepper",
+        className: cn(
+          "flex",
+          orientation === "horizontal" ? "flex-row items-center w-full justify-between" : "flex-col space-y-6",
+          className
+        ),
+        ...props,
+        children: steps.map((step, index) => {
+          const isCompleted = index < currentStep;
+          const isActive = index === currentStep;
+          const isPending = index > currentStep;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center",
+                orientation === "horizontal" ? "flex-1 last:flex-none" : "flex-row items-start"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-colors flex-shrink-0",
+                        isCompleted && "bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]",
+                        isActive && "border-2 border-[var(--ui-primary)] text-[var(--ui-primary)] bg-[var(--ui-bg-surface)] ring-4 ring-[var(--ui-primary)]/20",
+                        isPending && "border border-[var(--ui-border-default)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-tertiary)]"
+                      ),
+                      children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 stroke-[3]" }) : index + 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "text-xs font-semibold",
+                          isActive ? "text-[var(--ui-text-primary)]" : "text-[var(--ui-text-muted)]"
+                        ),
+                        children: step.title
+                      }
+                    ),
+                    step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-[var(--ui-text-muted)] opacity-80", children: step.description })
+                  ] })
+                ] }),
+                orientation === "horizontal" && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex-1 h-0.5 mx-4 transition-colors",
+                      isCompleted ? "bg-[var(--ui-primary)]" : "bg-[var(--ui-border-subtle)]"
+                    )
+                  }
+                )
+              ]
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+function Portal({ children, container }) {
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  if (!mounted) return null;
+  const target = container || (typeof document !== "undefined" ? document.body : null);
+  if (!target) return null;
+  return reactDom.createPortal(children, target);
+}
+var DropdownContext = react.createContext(null);
+function useDropdown() {
+  const context = react.useContext(DropdownContext);
+  if (!context) throw new Error("DropdownMenu components must be used within <DropdownMenu />");
+  return context;
+}
+function DropdownMenu({ children }) {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [triggerRect, setTriggerRect] = react.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: { isOpen, setIsOpen, triggerRect, setTriggerRect }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative inline-block text-left", children }) });
+}
+var DropdownMenuTrigger = react.forwardRef(
+  ({ children, onClick, ...props }, ref) => {
+    const { isOpen, setIsOpen, setTriggerRect } = useDropdown();
+    const triggerRef = react.useRef(null);
+    const handleClick = (e) => {
+      if (triggerRef.current) {
+        setTriggerRect(triggerRef.current.getBoundingClientRect());
+      }
+      setIsOpen(!isOpen);
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleClick, className: "inline-flex cursor-pointer", ...props, children });
+  }
+);
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var DropdownMenuContent = react.forwardRef(
+  ({ className, align = "start", children, ...props }, ref) => {
+    const { isOpen, setIsOpen, triggerRect } = useDropdown();
+    const menuRef = react.useRef(null);
+    react.useEffect(() => {
+      const handleOutside = (e) => {
+        if (menuRef.current && !menuRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("mousedown", handleOutside);
+      }
+      return () => document.removeEventListener("mousedown", handleOutside);
+    }, [isOpen, setIsOpen]);
+    if (!isOpen || !triggerRect) return null;
+    const top = triggerRect.bottom + window.scrollY + 6;
+    const left = align === "end" ? triggerRect.right + window.scrollX : triggerRect.left + window.scrollX;
+    return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: menuRef,
+        style: {
+          position: "absolute",
+          top: `${top}px`,
+          left: `${left}px`
+        },
+        className: cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] p-1 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95",
+          align === "end" && "-translate-x-full",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = react.forwardRef(
+  ({ className, icon, shortcut, destructive = false, children, onClick, ...props }, ref) => {
+    const { setIsOpen } = useDropdown();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: (e) => {
+          onClick?.(e);
+          setIsOpen(false);
+        },
+        className: cn(
+          "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-[var(--ui-radius-sm)] px-2.5 py-1.5 text-xs font-medium outline-none transition-colors hover:bg-[var(--ui-bg-tertiary)] disabled:pointer-events-none disabled:opacity-50 text-left",
+          destructive && "text-[var(--ui-error)] hover:bg-[var(--ui-error-subtle)]",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-current", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children }),
+          shortcut && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-[10px] text-[var(--ui-text-muted)] tracking-widest", children: shortcut })
+        ]
+      }
+    );
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("-mx-1 my-1 h-px bg-[var(--ui-border-subtle)]", className), ...props });
+  }
+);
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuLabel = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("px-2.5 py-1.5 text-[11px] font-semibold text-[var(--ui-text-muted)] uppercase tracking-wider", className), ...props, children });
+  }
+);
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function FocusTrap({ children, active = true }) {
+  const rootRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!active) return;
+    const root = rootRef.current;
+    if (!root) return;
+    const focusable = root.querySelectorAll(FOCUSABLE_SELECTOR);
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (first) {
+      first.focus();
+    }
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last?.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [active]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, className: "contents", children });
+}
+var Kbd = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "kbd",
+      {
+        ref,
+        className: cn(
+          "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-[var(--ui-border-default)] bg-[var(--ui-bg-tertiary)] px-1.5 font-mono text-[10px] font-semibold text-[var(--ui-text-muted)] opacity-100 shadow-sm",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+function CommandPalette({
+  isOpen,
+  onClose,
+  items,
+  placeholder = "Type a command or search..."
+}) {
+  const [query, setQuery] = react.useState("");
+  const [selectedIndex, setSelectedIndex] = react.useState(0);
+  const filteredItems = items.filter(
+    (item) => item.title.toLowerCase().includes(query.toLowerCase()) || item.category?.toLowerCase().includes(query.toLowerCase())
+  );
+  react.useEffect(() => {
+    setSelectedIndex(0);
+  }, [query]);
+  react.useEffect(() => {
+    if (!isOpen) {
+      setQuery("");
+      setSelectedIndex(0);
+      return;
+    }
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((prev) => prev < filteredItems.length - 1 ? prev + 1 : 0);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((prev) => prev > 0 ? prev - 1 : filteredItems.length - 1);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (filteredItems[selectedIndex]) {
+          filteredItems[selectedIndex].onSelect();
+          onClose();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, filteredItems, selectedIndex, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-start justify-center pt-20 p-4 sm:p-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        onClick: onClose,
+        className: "fixed inset-0 bg-[var(--ui-bg-overlay)] backdrop-blur-sm transition-opacity animate-in fade-in duration-200"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-xl rounded-[var(--ui-radius-xl)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-2xl overflow-hidden z-10 animate-in zoom-in-95 duration-150", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center px-4 py-3 border-b border-[var(--ui-border-subtle)] gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "w-5 h-5 text-[var(--ui-text-muted)]" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            autoFocus: true,
+            placeholder,
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            className: "flex-1 bg-transparent text-sm text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] focus:outline-none"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "ESC" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-80 overflow-y-auto p-2", children: filteredItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-8 text-center text-xs text-[var(--ui-text-muted)]", children: [
+        'No commands found matching "',
+        query,
+        '".'
+      ] }) : filteredItems.map((item, idx) => {
+        const isSelected = idx === selectedIndex;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            onClick: () => {
+              item.onSelect();
+              onClose();
+            },
+            onMouseEnter: () => setSelectedIndex(idx),
+            className: cn(
+              "flex items-center gap-3 px-3 py-2.5 rounded-[var(--ui-radius-md)] cursor-pointer text-xs font-medium transition-colors",
+              isSelected ? "bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]" : "text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]"
+            ),
+            children: [
+              item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.title }),
+              item.category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] uppercase font-semibold tracking-wider opacity-70", isSelected ? "text-white" : "text-[var(--ui-text-muted)]"), children: item.category }),
+              item.shortcut && /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: item.shortcut })
+            ]
+          },
+          item.id
+        );
+      }) })
+    ] })
+  ] }) }) });
+}
+
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbItem = BreadcrumbItem;
+exports.BreadcrumbLink = BreadcrumbLink;
+exports.BreadcrumbPage = BreadcrumbPage;
+exports.BreadcrumbSeparator = BreadcrumbSeparator;
+exports.CommandPalette = CommandPalette;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.Pagination = Pagination;
+exports.Stepper = Stepper;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
+exports.useDropdown = useDropdown;
+exports.useTabs = useTabs;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map