@karakuri-ui/react 0.2.3 → 0.3.0

package/dist/components/ui/navigation-menu.mjs

@@ -0,0 +1,478 @@
+"use client";
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/utils";
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ React.createElement("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }));
+}
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ React.createElement("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }));
+}
+const contentRadiusMap = {
+  sm: "rounded",
+  // 4px
+  md: "rounded-md",
+  // 6px
+  lg: "rounded-lg",
+  // 8px
+  xl: "rounded-xl"
+  // 12px
+};
+const itemRadiusMap = {
+  sm: "rounded-sm",
+  // 2px
+  md: "rounded",
+  // 4px
+  lg: "rounded-md",
+  // 6px
+  xl: "rounded-lg"
+  // 8px
+};
+const NavigationMenuContext = React.createContext({
+  orientation: "horizontal",
+  size: "default",
+  collapsed: false,
+  radius: "lg",
+  fontWeight: "normal"
+});
+const useNavigationMenuContext = () => React.useContext(NavigationMenuContext);
+const ContentLevelContext = React.createContext(false);
+const navigationMenuSizeMap = {
+  sm: {
+    trigger: "h-8 text-sm px-3 gap-2",
+    link: "h-8 text-sm px-3 gap-2",
+    icon: "icon-xs",
+    collapsedSquare: "size-8",
+    collapsedWidth: 56,
+    dropdownLink: "px-3 py-1.5 text-sm gap-2",
+    subLink: "h-8 text-sm pl-8 pr-3 gap-2",
+    groupLabel: "text-2xs px-3 mb-1",
+    groupMargin: "mt-4 first:mt-0"
+  },
+  md: {
+    trigger: "h-9 text-md px-3.5 gap-2",
+    link: "h-9 text-md px-3.5 gap-2",
+    icon: "icon-sm",
+    collapsedSquare: "size-9",
+    collapsedWidth: 60,
+    dropdownLink: "px-3 py-1.5 text-md gap-2",
+    subLink: "h-9 text-md pl-9 pr-3.5 gap-2",
+    groupLabel: "text-xs px-3.5 mb-1",
+    groupMargin: "mt-4 first:mt-0"
+  },
+  default: {
+    trigger: "h-10 text-md px-4 gap-2",
+    link: "h-10 text-md px-4 gap-2",
+    icon: "icon-sm",
+    collapsedSquare: "size-10",
+    collapsedWidth: 64,
+    dropdownLink: "px-3 py-2 text-md gap-2",
+    subLink: "h-10 text-md pl-10 pr-4 gap-2",
+    groupLabel: "text-xs px-4 mb-1.5",
+    groupMargin: "mt-5 first:mt-0"
+  },
+  lg: {
+    trigger: "h-12 text-base px-6 gap-2",
+    link: "h-12 text-base px-6 gap-2",
+    icon: "icon-sm",
+    collapsedSquare: "size-12",
+    collapsedWidth: 72,
+    dropdownLink: "px-3 py-2.5 text-base gap-2",
+    subLink: "h-12 text-base pl-12 pr-6 gap-2",
+    groupLabel: "text-xs px-4 mb-2",
+    groupMargin: "mt-6 first:mt-0"
+  }
+};
+const NavigationMenu = React.forwardRef(
+  ({
+    className,
+    orientation = "horizontal",
+    size = "default",
+    collapsed = false,
+    width,
+    collapsedWidth,
+    radius = "lg",
+    fontWeight = "normal",
+    delayDuration = 200,
+    skipDelayDuration = 300,
+    value,
+    defaultValue,
+    onValueChange,
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const contextValue = React.useMemo(
+      () => ({ orientation, size, collapsed: orientation === "vertical" ? collapsed : false, radius, fontWeight }),
+      [orientation, size, collapsed, radius, fontWeight]
+    );
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ React.createElement(NavigationMenuContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.Root,
+        {
+          ref,
+          className: cn("relative", className),
+          delayDuration,
+          skipDelayDuration,
+          value,
+          defaultValue: defaultValue ?? "",
+          onValueChange
+        },
+        children
+      ));
+    }
+    const resolvedWidth = collapsed ? collapsedWidth ?? navigationMenuSizeMap[size].collapsedWidth : width ?? 256;
+    const widthValue = typeof resolvedWidth === "number" ? `${resolvedWidth}px` : resolvedWidth;
+    return /* @__PURE__ */ React.createElement(NavigationMenuContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
+      "nav",
+      {
+        ref,
+        "aria-label": "navigation",
+        className: cn(
+          "flex flex-col",
+          "transition-[width] duration-normal ease-out",
+          className
+        ),
+        style: { width: widthValue, ...style },
+        ...props
+      },
+      children
+    ));
+  }
+);
+NavigationMenu.displayName = "NavigationMenu";
+const NavigationMenuList = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { orientation } = useNavigationMenuContext();
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.List,
+        {
+          ref,
+          className: cn("flex items-center gap-1", className),
+          ...props
+        },
+        children
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      "ul",
+      {
+        ref,
+        className: cn("flex flex-col gap-0.5", className),
+        ...props
+      },
+      children
+    );
+  }
+);
+NavigationMenuList.displayName = "NavigationMenuList";
+const NavigationMenuItem = React.forwardRef(
+  ({ className, value, defaultOpen = false, children, ...props }, ref) => {
+    const { orientation, collapsed } = useNavigationMenuContext();
+    const [open, setOpen] = React.useState(defaultOpen);
+    React.useEffect(() => {
+      if (collapsed) setOpen(false);
+    }, [collapsed]);
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.Item,
+        {
+          ref,
+          className: cn("relative", className),
+          value,
+          ...props
+        },
+        children
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      CollapsiblePrimitive.Root,
+      {
+        open: collapsed ? false : open,
+        onOpenChange: collapsed ? void 0 : setOpen,
+        asChild: true
+      },
+      /* @__PURE__ */ React.createElement("li", { ref, className: cn("", className), ...props }, children)
+    );
+  }
+);
+NavigationMenuItem.displayName = "NavigationMenuItem";
+const NavigationMenuTrigger = React.forwardRef(
+  ({ className, children, icon, chevronIcon, ...props }, ref) => {
+    const { orientation, size, collapsed, radius, fontWeight: fw } = useNavigationMenuContext();
+    const s = navigationMenuSizeMap[size];
+    const fwClass = fw === "semibold" ? "font-semibold" : "font-normal";
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.Trigger,
+        {
+          ref,
+          className: cn(
+            "group inline-flex items-center justify-center",
+            s.trigger,
+            "gap-0",
+            fwClass,
+            "text-text-muted",
+            "transition-colors duration-fast",
+            "hover:text-foreground",
+            "data-[state=open]:text-foreground",
+            "focus-visible:focus-ring",
+            "disabled:pointer-events-none disabled:opacity-50",
+            className
+          ),
+          ...props
+        },
+        icon && /* @__PURE__ */ React.createElement("span", { className: cn("shrink-0 mr-2", s.icon) }, icon),
+        children,
+        /* @__PURE__ */ React.createElement("span", { className: cn("shrink-0 ml-1 text-text-subtle transition-transform duration-fast group-data-[state=open]:rotate-180", s.icon) }, chevronIcon ?? /* @__PURE__ */ React.createElement(ChevronDownIcon, { className: "size-full" }))
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      CollapsiblePrimitive.Trigger,
+      {
+        ref,
+        className: cn(
+          "group flex items-center cursor-pointer",
+          contentRadiusMap[radius],
+          collapsed ? [s.collapsedSquare, "justify-center mx-auto"] : ["w-full", s.trigger],
+          fwClass,
+          "text-text-muted transition-colors duration-fast",
+          "hover:text-foreground hover:bg-background-muted",
+          !collapsed && "data-[state=open]:text-foreground",
+          "focus-visible:focus-ring",
+          "disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        ...collapsed && typeof children === "string" ? { title: children } : {},
+        ...props
+      },
+      icon && /* @__PURE__ */ React.createElement("span", { className: cn("shrink-0", s.icon) }, icon),
+      !collapsed && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "flex-1 text-left truncate" }, children), /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: cn(
+            "shrink-0 text-text-subtle transition-transform duration-normal",
+            s.icon,
+            "group-data-[state=open]:rotate-90"
+          )
+        },
+        chevronIcon ?? /* @__PURE__ */ React.createElement(ChevronRightIcon, { className: "size-full" })
+      ))
+    );
+  }
+);
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+const NavigationMenuContent = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { orientation, size, collapsed, radius } = useNavigationMenuContext();
+    const s = navigationMenuSizeMap[size];
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ React.createElement(ContentLevelContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.Content,
+        {
+          ref,
+          className: cn(
+            "absolute left-0 top-full z-dropdown pt-1",
+            "data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
+            className
+          ),
+          ...props
+        },
+        /* @__PURE__ */ React.createElement("div", { className: cn("min-w-[180px] border border-border bg-background shadow-lg p-1.5 grid gap-0.5", contentRadiusMap[radius]) }, children)
+      ));
+    }
+    if (collapsed) return null;
+    return /* @__PURE__ */ React.createElement(ContentLevelContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
+      CollapsiblePrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "overflow-hidden",
+          "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up"
+        ),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("div", { className: cn(
+        "flex flex-col gap-0.5 py-1",
+        className
+      ) }, children)
+    ));
+  }
+);
+NavigationMenuContent.displayName = "NavigationMenuContent";
+const NavigationMenuLink = React.forwardRef(
+  ({ className, active, asChild, icon, children, ...props }, ref) => {
+    const { orientation, size, collapsed, radius, fontWeight: fw } = useNavigationMenuContext();
+    const s = navigationMenuSizeMap[size];
+    const fwClass = fw === "semibold" ? "font-semibold" : "font-normal";
+    const inContent = React.useContext(ContentLevelContext);
+    if (orientation === "horizontal") {
+      const { onSelect, ...radixSafeProps } = props;
+      if (inContent) {
+        return /* @__PURE__ */ React.createElement(
+          NavigationMenuPrimitive.Link,
+          {
+            ref,
+            className: cn(
+              "flex items-center w-full",
+              s.dropdownLink,
+              itemRadiusMap[radius],
+              "text-text-muted transition-colors duration-fast",
+              "hover:text-foreground hover:bg-background-muted",
+              active && "text-foreground bg-background-muted font-semibold",
+              "focus-visible:focus-ring",
+              className
+            ),
+            active,
+            asChild,
+            onSelect,
+            ...radixSafeProps
+          },
+          asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, icon && /* @__PURE__ */ React.createElement("span", { className: cn("shrink-0", s.icon) }, icon), children)
+        );
+      }
+      return /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.Link,
+        {
+          ref,
+          className: cn(
+            "inline-flex items-center justify-center",
+            s.link,
+            fwClass,
+            "text-text-muted",
+            "transition-colors duration-fast",
+            "hover:text-foreground",
+            active && "text-foreground font-semibold",
+            "focus-visible:focus-ring",
+            className
+          ),
+          active,
+          asChild,
+          onSelect,
+          ...radixSafeProps
+        },
+        asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, icon && /* @__PURE__ */ React.createElement("span", { className: cn("shrink-0", s.icon) }, icon), children)
+      );
+    }
+    const Comp = asChild ? Slot : "a";
+    if (inContent) {
+      return /* @__PURE__ */ React.createElement(
+        Comp,
+        {
+          ref,
+          className: cn(
+            "flex items-center w-full cursor-pointer",
+            contentRadiusMap[radius],
+            s.subLink,
+            "text-text-muted transition-colors duration-fast",
+            "hover:text-foreground hover:bg-background-muted",
+            active && "text-foreground bg-background-muted font-semibold",
+            "focus-visible:focus-ring",
+            className
+          ),
+          ...active ? { "aria-current": "page" } : {},
+          ...props
+        },
+        icon && /* @__PURE__ */ React.createElement("span", { className: cn("shrink-0", s.icon) }, icon),
+        !collapsed && children
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "relative flex items-center cursor-pointer",
+          contentRadiusMap[radius],
+          collapsed ? [s.collapsedSquare, "justify-center mx-auto"] : ["w-full", s.link],
+          "text-text-muted transition-colors duration-fast",
+          "hover:text-foreground hover:bg-background-muted",
+          active && "text-foreground bg-background-muted font-semibold",
+          "focus-visible:focus-ring",
+          className
+        ),
+        ...active ? { "aria-current": "page" } : {},
+        ...collapsed && typeof children === "string" ? { title: children } : {},
+        ...props
+      },
+      icon && /* @__PURE__ */ React.createElement("span", { className: cn("shrink-0", s.icon) }, icon),
+      !collapsed && /* @__PURE__ */ React.createElement("span", { className: "truncate" }, children)
+    );
+  }
+);
+NavigationMenuLink.displayName = "NavigationMenuLink";
+const NavigationMenuGroup = React.forwardRef(
+  ({ className, label, children, ...props }, ref) => {
+    const { size, collapsed } = useNavigationMenuContext();
+    const s = navigationMenuSizeMap[size];
+    return /* @__PURE__ */ React.createElement("div", { ref, role: "group", className: cn(label && !collapsed && s.groupMargin, className), ...props }, label && !collapsed && /* @__PURE__ */ React.createElement("div", { className: cn(
+      "font-semibold text-text-subtle uppercase tracking-wider select-none",
+      s.groupLabel
+    ) }, label), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-0.5" }, children));
+  }
+);
+NavigationMenuGroup.displayName = "NavigationMenuGroup";
+const NavigationMenuIndicator = React.forwardRef(
+  ({ className, color = "default", ...props }, ref) => {
+    const { orientation } = useNavigationMenuContext();
+    if (orientation === "vertical") return null;
+    return /* @__PURE__ */ React.createElement(
+      NavigationMenuPrimitive.Indicator,
+      {
+        ref,
+        className: cn(
+          "z-10 flex h-[3px] items-end justify-center overflow-hidden",
+          "transition-[width,transform] duration-normal ease-out",
+          "data-[state=visible]:animate-fade-in data-[state=hidden]:animate-fade-out",
+          className
+        ),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("div", { className: cn(
+        "relative h-full w-full rounded-full",
+        color === "default" ? "bg-foreground" : "bg-primary"
+      ) })
+    );
+  }
+);
+NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
+const NavigationMenuViewport = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useNavigationMenuContext();
+    if (orientation === "vertical") return null;
+    return /* @__PURE__ */ React.createElement("div", { className: "absolute left-0 top-full z-dropdown w-auto pt-1" }, /* @__PURE__ */ React.createElement(
+      NavigationMenuPrimitive.Viewport,
+      {
+        ref,
+        className: cn(
+          "relative overflow-hidden",
+          "border border-border bg-background rounded-xl shadow-lg",
+          "h-[var(--radix-navigation-menu-viewport-height)]",
+          "w-[var(--radix-navigation-menu-viewport-width)]",
+          "transition-[width,height] duration-fast ease-out",
+          "data-[state=open]:animate-nav-viewport-enter",
+          "data-[state=closed]:animate-nav-viewport-exit",
+          className
+        ),
+        ...props
+      }
+    ));
+  }
+);
+NavigationMenuViewport.displayName = "NavigationMenuViewport";
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuGroup,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  navigationMenuSizeMap
+};
+//# sourceMappingURL=navigation-menu.mjs.map

package/dist/components/ui/navigation-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/navigation-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '../../lib/utils'\n\n// ─── Built-in Icons ───────────────────────────────────────\n\nfunction ChevronDownIcon({ className }: { className?: string }) {\n  return (\n    <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n    </svg>\n  )\n}\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n  return (\n    <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  )\n}\n\n// ─── Radius Configuration ─────────────────────────────────\n\ntype NavigationMenuRadius = 'sm' | 'md' | 'lg' | 'xl'\n\nconst contentRadiusMap: Record<NavigationMenuRadius, string> = {\n  sm: 'rounded',        // 4px\n  md: 'rounded-md',     // 6px\n  lg: 'rounded-lg',     // 8px\n  xl: 'rounded-xl',     // 12px\n}\n\nconst itemRadiusMap: Record<NavigationMenuRadius, string> = {\n  sm: 'rounded-sm',     // 2px\n  md: 'rounded',        // 4px\n  lg: 'rounded-md',     // 6px\n  xl: 'rounded-lg',     // 8px\n}\n\n// ─── Contexts ─────────────────────────────────────────────\n\ntype NavigationMenuContextValue = {\n  orientation: 'horizontal' | 'vertical'\n  size: 'sm' | 'md' | 'default' | 'lg'\n  collapsed: boolean\n  radius: NavigationMenuRadius\n  fontWeight: 'normal' | 'semibold'\n}\n\nconst NavigationMenuContext = React.createContext<NavigationMenuContextValue>({\n  orientation: 'horizontal',\n  size: 'default',\n  collapsed: false,\n  radius: 'lg',\n  fontWeight: 'normal',\n})\nconst useNavigationMenuContext = () => React.useContext(NavigationMenuContext)\n\n// Whether we're inside NavigationMenuContent (affects link styling)\nconst ContentLevelContext = React.createContext(false)\n\n// ─── Size Configuration ───────────────────────────────────\n\nconst navigationMenuSizeMap = {\n  sm: {\n    trigger: 'h-8 text-sm px-3 gap-2',\n    link: 'h-8 text-sm px-3 gap-2',\n    icon: 'icon-xs',\n    collapsedSquare: 'size-8', collapsedWidth: 56,\n    dropdownLink: 'px-3 py-1.5 text-sm gap-2',\n    subLink: 'h-8 text-sm pl-8 pr-3 gap-2',\n    groupLabel: 'text-2xs px-3 mb-1', groupMargin: 'mt-4 first:mt-0',\n  },\n  md: {\n    trigger: 'h-9 text-md px-3.5 gap-2',\n    link: 'h-9 text-md px-3.5 gap-2',\n    icon: 'icon-sm',\n    collapsedSquare: 'size-9', collapsedWidth: 60,\n    dropdownLink: 'px-3 py-1.5 text-md gap-2',\n    subLink: 'h-9 text-md pl-9 pr-3.5 gap-2',\n    groupLabel: 'text-xs px-3.5 mb-1', groupMargin: 'mt-4 first:mt-0',\n  },\n  default: {\n    trigger: 'h-10 text-md px-4 gap-2',\n    link: 'h-10 text-md px-4 gap-2',\n    icon: 'icon-sm',\n    collapsedSquare: 'size-10', collapsedWidth: 64,\n    dropdownLink: 'px-3 py-2 text-md gap-2',\n    subLink: 'h-10 text-md pl-10 pr-4 gap-2',\n    groupLabel: 'text-xs px-4 mb-1.5', groupMargin: 'mt-5 first:mt-0',\n  },\n  lg: {\n    trigger: 'h-12 text-base px-6 gap-2',\n    link: 'h-12 text-base px-6 gap-2',\n    icon: 'icon-sm',\n    collapsedSquare: 'size-12', collapsedWidth: 72,\n    dropdownLink: 'px-3 py-2.5 text-base gap-2',\n    subLink: 'h-12 text-base pl-12 pr-6 gap-2',\n    groupLabel: 'text-xs px-4 mb-2', groupMargin: 'mt-6 first:mt-0',\n  },\n} as const\n\n// ─── NavigationMenu (Root) ────────────────────────────────\n\nexport interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {\n  /** Layout orientation */\n  orientation?: 'horizontal' | 'vertical'\n  /** Size of the menu items */\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  /** Vertical only: show icons only (collapsed sidebar) */\n  collapsed?: boolean\n  /** Vertical only: sidebar width (default: 256px / 16rem) */\n  width?: number | string\n  /** Vertical only: collapsed sidebar width (default: 64px / 4rem) */\n  collapsedWidth?: number | string\n  /** Border radius for dropdown content and items */\n  radius?: NavigationMenuRadius\n  /** Font weight for menu items (default: normal, active items always use semibold) */\n  fontWeight?: 'normal' | 'semibold'\n  /** Horizontal only: delay before hover opens in ms */\n  delayDuration?: number\n  /** Horizontal only: skip delay when moving between triggers */\n  skipDelayDuration?: number\n  /** Controlled active menu item value */\n  value?: string\n  /** Default active menu item value (uncontrolled) */\n  defaultValue?: string\n  /** Callback when active item changes */\n  onValueChange?: (value: string) => void\n}\n\nconst NavigationMenu = React.forwardRef<HTMLElement, NavigationMenuProps>(\n  ({\n    className,\n    orientation = 'horizontal',\n    size = 'default',\n    collapsed = false,\n    width,\n    collapsedWidth,\n    radius = 'lg',\n    fontWeight = 'normal',\n    delayDuration = 200,\n    skipDelayDuration = 300,\n    value,\n    defaultValue,\n    onValueChange,\n    children,\n    style,\n    ...props\n  }, ref) => {\n    const contextValue = React.useMemo(\n      () => ({ orientation, size, collapsed: orientation === 'vertical' ? collapsed : false, radius, fontWeight }),\n      [orientation, size, collapsed, radius, fontWeight]\n    )\n\n    if (orientation === 'horizontal') {\n      return (\n        <NavigationMenuContext.Provider value={contextValue}>\n          <NavigationMenuPrimitive.Root\n            ref={ref as React.Ref<HTMLDivElement>}\n            className={cn('relative', className)}\n            delayDuration={delayDuration}\n            skipDelayDuration={skipDelayDuration}\n            value={value}\n            defaultValue={defaultValue ?? ''}\n            onValueChange={onValueChange}\n          >\n            {children}\n          </NavigationMenuPrimitive.Root>\n        </NavigationMenuContext.Provider>\n      )\n    }\n\n    // Vertical mode\n    const resolvedWidth = collapsed\n      ? (collapsedWidth ?? navigationMenuSizeMap[size].collapsedWidth)\n      : (width ?? 256)\n    const widthValue = typeof resolvedWidth === 'number' ? `${resolvedWidth}px` : resolvedWidth\n\n    return (\n      <NavigationMenuContext.Provider value={contextValue}>\n        <nav\n          ref={ref}\n          aria-label=\"navigation\"\n          className={cn(\n            'flex flex-col',\n            'transition-[width] duration-normal ease-out',\n            className\n          )}\n          style={{ width: widthValue, ...style }}\n          {...props}\n        >\n          {children}\n        </nav>\n      </NavigationMenuContext.Provider>\n    )\n  }\n)\nNavigationMenu.displayName = 'NavigationMenu'\n\n// ─── NavigationMenuList ───────────────────────────────────\n\nexport interface NavigationMenuListProps extends React.HTMLAttributes<HTMLUListElement> {}\n\nconst NavigationMenuList = React.forwardRef<HTMLUListElement, NavigationMenuListProps>(\n  ({ className, children, ...props }, ref) => {\n    const { orientation } = useNavigationMenuContext()\n\n    if (orientation === 'horizontal') {\n      return (\n        <NavigationMenuPrimitive.List\n          ref={ref}\n          className={cn('flex items-center gap-1', className)}\n          {...props}\n        >\n          {children}\n        </NavigationMenuPrimitive.List>\n      )\n    }\n\n    return (\n      <ul\n        ref={ref}\n        className={cn('flex flex-col gap-0.5', className)}\n        {...props}\n      >\n        {children}\n      </ul>\n    )\n  }\n)\nNavigationMenuList.displayName = 'NavigationMenuList'\n\n// ─── NavigationMenuItem ───────────────────────────────────\n\nexport interface NavigationMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {\n  /** Value identifier for Radix (horizontal mode) */\n  value?: string\n  /** Vertical only: default open state for sub-menu */\n  defaultOpen?: boolean\n}\n\nconst NavigationMenuItem = React.forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n  ({ className, value, defaultOpen = false, children, ...props }, ref) => {\n    const { orientation, collapsed } = useNavigationMenuContext()\n    const [open, setOpen] = React.useState(defaultOpen)\n\n    // Auto-close sub-menus when collapsed\n    React.useEffect(() => {\n      if (collapsed) setOpen(false)\n    }, [collapsed])\n\n    if (orientation === 'horizontal') {\n      return (\n        <NavigationMenuPrimitive.Item\n          ref={ref}\n          className={cn('relative', className)}\n          value={value}\n          {...props}\n        >\n          {children}\n        </NavigationMenuPrimitive.Item>\n      )\n    }\n\n    // Vertical: wrap in Collapsible.Root for sub-menu support\n    return (\n      <CollapsiblePrimitive.Root\n        open={collapsed ? false : open}\n        onOpenChange={collapsed ? undefined : setOpen}\n        asChild\n      >\n        <li ref={ref} className={cn('', className)} {...props}>\n          {children}\n        </li>\n      </CollapsiblePrimitive.Root>\n    )\n  }\n)\nNavigationMenuItem.displayName = 'NavigationMenuItem'\n\n// ─── NavigationMenuTrigger ────────────────────────────────\n\nexport interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Icon displayed before the label */\n  icon?: React.ReactNode\n  /** Custom chevron icon (default: built-in ChevronDown for horizontal, ChevronRight for vertical) */\n  chevronIcon?: React.ReactNode\n}\n\nconst NavigationMenuTrigger = React.forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n  ({ className, children, icon, chevronIcon, ...props }, ref) => {\n    const { orientation, size, collapsed, radius, fontWeight: fw } = useNavigationMenuContext()\n    const s = navigationMenuSizeMap[size]\n    const fwClass = fw === 'semibold' ? 'font-semibold' : 'font-normal'\n\n    if (orientation === 'horizontal') {\n      return (\n        <NavigationMenuPrimitive.Trigger\n          ref={ref}\n          className={cn(\n            'group inline-flex items-center justify-center',\n            s.trigger,\n            'gap-0',\n            fwClass, 'text-text-muted',\n            'transition-colors duration-fast',\n            'hover:text-foreground',\n            'data-[state=open]:text-foreground',\n            'focus-visible:focus-ring',\n            'disabled:pointer-events-none disabled:opacity-50',\n            className\n          )}\n          {...props}\n        >\n          {icon && <span className={cn('shrink-0 mr-2', s.icon)}>{icon}</span>}\n          {children}\n          <span className={cn('shrink-0 ml-1 text-text-subtle transition-transform duration-fast group-data-[state=open]:rotate-180', s.icon)}>\n            {chevronIcon ?? <ChevronDownIcon className=\"size-full\" />}\n          </span>\n        </NavigationMenuPrimitive.Trigger>\n      )\n    }\n\n    // Vertical: Collapsible trigger\n    return (\n      <CollapsiblePrimitive.Trigger\n        ref={ref}\n        className={cn(\n          'group flex items-center cursor-pointer',\n          contentRadiusMap[radius],\n          collapsed\n            ? [s.collapsedSquare, 'justify-center mx-auto']\n            : ['w-full', s.trigger],\n          fwClass, 'text-text-muted transition-colors duration-fast',\n          'hover:text-foreground hover:bg-background-muted',\n          !collapsed && 'data-[state=open]:text-foreground',\n          'focus-visible:focus-ring',\n          'disabled:pointer-events-none disabled:opacity-50',\n          className\n        )}\n        {...(collapsed && typeof children === 'string' ? { title: children } : {})}\n        {...props}\n      >\n        {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n        {!collapsed && (\n          <>\n            <span className=\"flex-1 text-left truncate\">{children}</span>\n            <span\n              className={cn(\n                'shrink-0 text-text-subtle transition-transform duration-normal',\n                s.icon,\n                'group-data-[state=open]:rotate-90'\n              )}\n            >\n              {chevronIcon ?? <ChevronRightIcon className=\"size-full\" />}\n            </span>\n          </>\n        )}\n      </CollapsiblePrimitive.Trigger>\n    )\n  }\n)\nNavigationMenuTrigger.displayName = 'NavigationMenuTrigger'\n\n// ─── NavigationMenuContent ────────────────────────────────\n\nexport interface NavigationMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst NavigationMenuContent = React.forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n  ({ className, children, ...props }, ref) => {\n    const { orientation, size, collapsed, radius } = useNavigationMenuContext()\n    const s = navigationMenuSizeMap[size]\n\n    if (orientation === 'horizontal') {\n      return (\n        <ContentLevelContext.Provider value={true}>\n          <NavigationMenuPrimitive.Content\n            ref={ref}\n            className={cn(\n              'absolute left-0 top-full z-dropdown pt-1',\n              'data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out',\n              className\n            )}\n            {...props}\n          >\n            <div className={cn('min-w-[180px] border border-border bg-background shadow-lg p-1.5 grid gap-0.5', contentRadiusMap[radius])}>\n              {children}\n            </div>\n          </NavigationMenuPrimitive.Content>\n        </ContentLevelContext.Provider>\n      )\n    }\n\n    // Vertical: Collapsible content (hidden when collapsed)\n    if (collapsed) return null\n\n    return (\n      <ContentLevelContext.Provider value={true}>\n        <CollapsiblePrimitive.Content\n          ref={ref}\n          className={cn(\n            'overflow-hidden',\n            'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up',\n          )}\n          {...props}\n        >\n          <div className={cn(\n            'flex flex-col gap-0.5 py-1',\n            className\n          )}>\n            {children}\n          </div>\n        </CollapsiblePrimitive.Content>\n      </ContentLevelContext.Provider>\n    )\n  }\n)\nNavigationMenuContent.displayName = 'NavigationMenuContent'\n\n// ─── NavigationMenuLink ───────────────────────────────────\n\nexport interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Whether the link represents the current page */\n  active?: boolean\n  /** Compose with custom link component (Radix Slot) */\n  asChild?: boolean\n  /** Icon displayed before the label */\n  icon?: React.ReactNode\n}\n\nconst NavigationMenuLink = React.forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n  ({ className, active, asChild, icon, children, ...props }, ref) => {\n    const { orientation, size, collapsed, radius, fontWeight: fw } = useNavigationMenuContext()\n    const s = navigationMenuSizeMap[size]\n    const fwClass = fw === 'semibold' ? 'font-semibold' : 'font-normal'\n    const inContent = React.useContext(ContentLevelContext)\n\n    if (orientation === 'horizontal') {\n      // Exclude onSelect to avoid React vs Radix type conflict\n      const { onSelect, ...radixSafeProps } = props as any\n\n      // Content-level links (inside dropdown): block style with hover bg\n      if (inContent) {\n        return (\n          <NavigationMenuPrimitive.Link\n            ref={ref}\n            className={cn(\n              'flex items-center w-full',\n              s.dropdownLink,\n              itemRadiusMap[radius],\n              'text-text-muted transition-colors duration-fast',\n              'hover:text-foreground hover:bg-background-muted',\n              active && 'text-foreground bg-background-muted font-semibold',\n              'focus-visible:focus-ring',\n              className\n            )}\n            active={active}\n            asChild={asChild}\n            onSelect={onSelect}\n            {...radixSafeProps}\n          >\n            {asChild ? children : (\n              <>\n                {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n                {children}\n              </>\n            )}\n          </NavigationMenuPrimitive.Link>\n        )\n      }\n\n      // Top-level horizontal links: text only, no hover bg\n      return (\n        <NavigationMenuPrimitive.Link\n          ref={ref}\n          className={cn(\n            'inline-flex items-center justify-center',\n            s.link,\n            fwClass, 'text-text-muted',\n            'transition-colors duration-fast',\n            'hover:text-foreground',\n            active && 'text-foreground font-semibold',\n            'focus-visible:focus-ring',\n            className\n          )}\n          active={active}\n          asChild={asChild}\n          onSelect={onSelect}\n          {...radixSafeProps}\n        >\n          {asChild ? children : (\n            <>\n              {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n              {children}\n            </>\n          )}\n        </NavigationMenuPrimitive.Link>\n      )\n    }\n\n    // ── Vertical mode ──\n\n    const Comp = asChild ? Slot : 'a'\n\n    // Content-level links (sub-menu items): compact, indented\n    if (inContent) {\n      return (\n        <Comp\n          ref={ref}\n          className={cn(\n            'flex items-center w-full cursor-pointer',\n            contentRadiusMap[radius],\n            s.subLink,\n            'text-text-muted transition-colors duration-fast',\n            'hover:text-foreground hover:bg-background-muted',\n            active && 'text-foreground bg-background-muted font-semibold',\n            'focus-visible:focus-ring',\n            className\n          )}\n          {...(active ? { 'aria-current': 'page' as const } : {})}\n          {...props}\n        >\n          {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n          {!collapsed && children}\n        </Comp>\n      )\n    }\n\n    // Top-level vertical links\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          'relative flex items-center cursor-pointer',\n          contentRadiusMap[radius],\n          collapsed\n            ? [s.collapsedSquare, 'justify-center mx-auto']\n            : ['w-full', s.link],\n          'text-text-muted transition-colors duration-fast',\n          'hover:text-foreground hover:bg-background-muted',\n          active && 'text-foreground bg-background-muted font-semibold',\n          'focus-visible:focus-ring',\n          className\n        )}\n        {...(active ? { 'aria-current': 'page' as const } : {})}\n        {...(collapsed && typeof children === 'string' ? { title: children } : {})}\n        {...props}\n      >\n        {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n        {!collapsed && <span className=\"truncate\">{children}</span>}\n      </Comp>\n    )\n  }\n)\nNavigationMenuLink.displayName = 'NavigationMenuLink'\n\n// ─── NavigationMenuGroup (vertical only) ──────────────────\n\nexport interface NavigationMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Group header label */\n  label?: string\n}\n\nconst NavigationMenuGroup = React.forwardRef<HTMLDivElement, NavigationMenuGroupProps>(\n  ({ className, label, children, ...props }, ref) => {\n    const { size, collapsed } = useNavigationMenuContext()\n    const s = navigationMenuSizeMap[size]\n\n    return (\n      <div ref={ref} role=\"group\" className={cn(label && !collapsed && s.groupMargin, className)} {...props}>\n        {label && !collapsed && (\n          <div className={cn(\n            'font-semibold text-text-subtle uppercase tracking-wider select-none',\n            s.groupLabel,\n          )}>\n            {label}\n          </div>\n        )}\n        <ul className=\"flex flex-col gap-0.5\">\n          {children}\n        </ul>\n      </div>\n    )\n  }\n)\nNavigationMenuGroup.displayName = 'NavigationMenuGroup'\n\n// ─── NavigationMenuIndicator ──────────────────────────────\n\nexport interface NavigationMenuIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Active indicator dot color (default: dark/foreground, primary: brand color) */\n  color?: 'default' | 'primary'\n}\n\nconst NavigationMenuIndicator = React.forwardRef<HTMLDivElement, NavigationMenuIndicatorProps>(\n  ({ className, color = 'default', ...props }, ref) => {\n    const { orientation } = useNavigationMenuContext()\n\n    // Vertical: active indicator is built into NavigationMenuLink styling\n    if (orientation === 'vertical') return null\n\n    return (\n      <NavigationMenuPrimitive.Indicator\n        ref={ref}\n        className={cn(\n          'z-10 flex h-[3px] items-end justify-center overflow-hidden',\n          'transition-[width,transform] duration-normal ease-out',\n          'data-[state=visible]:animate-fade-in data-[state=hidden]:animate-fade-out',\n          className\n        )}\n        {...props}\n      >\n        <div className={cn(\n          'relative h-full w-full rounded-full',\n          color === 'default' ? 'bg-foreground' : 'bg-primary'\n        )} />\n      </NavigationMenuPrimitive.Indicator>\n    )\n  }\n)\nNavigationMenuIndicator.displayName = 'NavigationMenuIndicator'\n\n// ─── NavigationMenuViewport ───────────────────────────────\n\nexport interface NavigationMenuViewportProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst NavigationMenuViewport = React.forwardRef<HTMLDivElement, NavigationMenuViewportProps>(\n  ({ className, ...props }, ref) => {\n    const { orientation } = useNavigationMenuContext()\n\n    // Vertical mode does not use a viewport\n    if (orientation === 'vertical') return null\n\n    return (\n      <div className=\"absolute left-0 top-full z-dropdown w-auto pt-1\">\n        <NavigationMenuPrimitive.Viewport\n          ref={ref}\n          className={cn(\n            'relative overflow-hidden',\n            'border border-border bg-background rounded-xl shadow-lg',\n            'h-[var(--radix-navigation-menu-viewport-height)]',\n            'w-[var(--radix-navigation-menu-viewport-width)]',\n            'transition-[width,height] duration-fast ease-out',\n            'data-[state=open]:animate-nav-viewport-enter',\n            'data-[state=closed]:animate-nav-viewport-exit',\n            className\n          )}\n          {...props}\n        />\n      </div>\n    )\n  }\n)\nNavigationMenuViewport.displayName = 'NavigationMenuViewport'\n\n// ─── Exports ──────────────────────────────────────────────\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuLink,\n  NavigationMenuGroup,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuSizeMap,\n  type NavigationMenuRadius,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/pagination.d.mts

@@ -0,0 +1,113 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+type PaginationRange = (number | 'dots')[];
+interface UsePaginationProps {
+    /** Total number of pages */
+    total: number;
+    /** Number of siblings on each side of current page */
+    siblings?: number;
+    /** Number of boundary pages at start/end */
+    boundaries?: number;
+    /** Current active page (1-based) */
+    page: number;
+}
+declare function usePagination({ total, siblings, boundaries, page, }: UsePaginationProps): PaginationRange;
+type PaginationSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
+type PaginationVariant = 'default' | 'outline' | 'ghost';
+type PaginationColor = 'default' | 'primary';
+type PaginationRadius = 'sm' | 'base' | 'md' | 'lg' | 'xl' | 'full';
+declare const paginationSizeMap: {
+    readonly xs: {
+        readonly item: "h-7 min-w-7 text-xs";
+        readonly icon: "icon-xs";
+        readonly gap: "gap-1";
+    };
+    readonly sm: {
+        readonly item: "h-8 min-w-8 text-sm";
+        readonly icon: "icon-xs";
+        readonly gap: "gap-1";
+    };
+    readonly default: {
+        readonly item: "h-9 min-w-9 text-md";
+        readonly icon: "icon-sm";
+        readonly gap: "gap-1";
+    };
+    readonly lg: {
+        readonly item: "h-10 min-w-10 text-md";
+        readonly icon: "icon-sm";
+        readonly gap: "gap-1.5";
+    };
+    readonly xl: {
+        readonly item: "h-12 min-w-12 text-base";
+        readonly icon: "icon-sm";
+        readonly gap: "gap-1.5";
+    };
+};
+declare const paginationItemVariants: (props?: ({
+    radius?: "sm" | "lg" | "base" | "md" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'> {
+    /** Total number of pages */
+    total?: number;
+    /** Controlled active page (1-based) */
+    value?: number;
+    /** Initial page for uncontrolled mode */
+    defaultValue?: number;
+    /** Page change callback */
+    onChange?: (page: number) => void;
+    /** Number of siblings on each side of current page */
+    siblings?: number;
+    /** Number of boundary pages at start/end */
+    boundaries?: number;
+    /** Component size */
+    size?: PaginationSize;
+    /** Visual variant */
+    variant?: PaginationVariant;
+    /** Active page color */
+    color?: PaginationColor;
+    /** Border radius */
+    radius?: PaginationRadius;
+    /** Disable all interactions */
+    disabled?: boolean;
+    /** Show previous/next controls */
+    withControls?: boolean;
+    /** Show first/last controls */
+    withEdges?: boolean;
+    /** Loop from last to first and vice versa */
+    loop?: boolean;
+}
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+declare const PaginationContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const PaginationItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+interface PaginationLinkProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Page number this link navigates to */
+    page: number;
+    /** Whether this page is currently active (auto-detected from context if omitted) */
+    isActive?: boolean;
+}
+declare const PaginationLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationPreviousProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationPrevious: React.ForwardRefExoticComponent<PaginationPreviousProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationNextProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationNext: React.ForwardRefExoticComponent<PaginationNextProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationFirstProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationFirst: React.ForwardRefExoticComponent<PaginationFirstProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationLastProps extends React.ComponentPropsWithoutRef<'button'> {
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+declare const PaginationLast: React.ForwardRefExoticComponent<PaginationLastProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PaginationEllipsis: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const PaginationItems: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Pagination, type PaginationColor, PaginationContent, PaginationEllipsis, PaginationFirst, type PaginationFirstProps, PaginationItem, PaginationItems, PaginationLast, type PaginationLastProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, type PaginationRadius, type PaginationRange, type PaginationSize, type PaginationVariant, type UsePaginationProps, paginationItemVariants, paginationSizeMap, usePagination };