@psnext/design-system 1.5.1 → 2.0.0

package/dist/primitives/NavRail/index.js

@@ -1,185 +1,2 @@
-import { t as cn } from "../../cn.js";
-import { Popover as Popover$1, PopoverContent, PopoverTrigger } from "../Popover/index.js";
-import { Tooltip as Tooltip$1, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
-import * as React from "react";
-import { ChevronRightIcon } from "lucide-react";
-import { Slot } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/primitives/NavRail/NavRail.tsx
-const NavRailContext = React.createContext("icon");
-const RAIL_BY_MODE = {
-	icon: "w-14 items-center",
-	text: "w-56 items-stretch",
-	expanded: "w-56 items-stretch",
-	"expand-on-hover": "w-14 items-stretch transition-[width] duration-200 ease-out hover:w-56"
-};
-const ITEM_BASE = "relative flex h-10 cursor-pointer items-center text-foreground outline-none transition-colors hover:bg-foreground/10 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[active=true]:bg-[var(--white)] data-[active=true]:font-medium data-[active=true]:text-[var(--brand-colors-brand-500)] data-[active=true]:hover:bg-[var(--white)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5";
-const ITEM_BY_MODE = {
-	icon: "w-10 justify-center rounded-full",
-	text: "w-full justify-start gap-3 rounded-lg px-2.5",
-	expanded: "w-full justify-start gap-3 rounded-lg px-2.5",
-	"expand-on-hover": "w-full justify-start gap-3 rounded-lg px-2.5"
-};
-const ICON_BY_MODE = {
-	icon: "flex shrink-0 items-center justify-center",
-	text: "hidden",
-	expanded: "flex shrink-0 items-center justify-center",
-	"expand-on-hover": "flex shrink-0 items-center justify-center"
-};
-const LABEL_ROW = "min-w-0 flex-1 truncate text-left text-sm font-medium";
-const LABEL_BY_MODE = {
-	icon: "sr-only",
-	text: LABEL_ROW,
-	expanded: LABEL_ROW,
-	"expand-on-hover": cn(LABEL_ROW, "opacity-0 transition-opacity duration-200 group-hover/nav-rail:opacity-100")
-};
-const CHEVRON_BY_MODE = {
-	icon: "absolute top-1/2 right-[-4px] size-3 -translate-y-1/2 text-muted-foreground",
-	text: "ml-auto size-4 shrink-0 text-muted-foreground",
-	expanded: "ml-auto size-4 shrink-0 text-muted-foreground",
-	"expand-on-hover": "ml-auto size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover/nav-rail:opacity-100"
-};
-/** The vertical navigation rail container; sets the display `mode` for all items via context. */
-function NavRail({ mode = "icon", className, ...props }) {
-	return /* @__PURE__ */ jsx(NavRailContext.Provider, {
-		value: mode,
-		children: /* @__PURE__ */ jsx("nav", {
-			"data-slot": "nav-rail",
-			"data-mode": mode,
-			className: cn("group/nav-rail flex flex-col gap-1 overflow-hidden rounded-2xl bg-[var(--glass-strong)] p-2 backdrop-blur-glass", RAIL_BY_MODE[mode], className),
-			...props
-		})
-	});
-}
-/** A thin divider between groups of rail items. */
-function NavRailSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "nav-rail-separator",
-		role: "separator",
-		className: cn("my-1 h-px w-6 shrink-0 self-center bg-border", className),
-		...props
-	});
-}
-/** A single navigation entry; an icon (as children) plus a `label`, with a tooltip in icon mode. */
-function NavRailItem({ label, active, asChild = false, tooltipSide = "right", className, children, ...props }) {
-	const mode = React.useContext(NavRailContext);
-	const shared = {
-		"data-slot": "nav-rail-item",
-		"data-active": active || void 0,
-		"aria-label": label,
-		"aria-current": active ? "page" : void 0,
-		className: cn(ITEM_BASE, ITEM_BY_MODE[mode], className),
-		...props
-	};
-	const labelEl = /* @__PURE__ */ jsx("span", {
-		"data-slot": "nav-rail-item-label",
-		className: LABEL_BY_MODE[mode],
-		children: label
-	});
-	const el = asChild ? /* @__PURE__ */ jsxs(Slot.Root, {
-		...shared,
-		children: [/* @__PURE__ */ jsx(Slot.Slottable, { children }), labelEl]
-	}) : /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		...shared,
-		children: [/* @__PURE__ */ jsx("span", {
-			"data-slot": "nav-rail-item-icon",
-			className: ICON_BY_MODE[mode],
-			children
-		}), labelEl]
-	});
-	if (mode !== "icon") return el;
-	return /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-		asChild: true,
-		children: el
-	}), /* @__PURE__ */ jsx(TooltipContent, {
-		side: tooltipSide,
-		children: label
-	})] });
-}
-/** The footer slot of the rail showing the signed-in user (avatar + name + email). */
-function NavRailUser({ avatar, name, email, className, ...props }) {
-	const mode = React.useContext(NavRailContext);
-	const detailsHidden = mode === "icon";
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "nav-rail-user",
-		className: cn("mt-auto flex h-12 w-full items-center rounded-lg", className),
-		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			"data-slot": "nav-rail-user-avatar",
-			className: "flex w-10 shrink-0 items-center justify-center",
-			children: avatar
-		}), /* @__PURE__ */ jsxs("div", {
-			"data-slot": "nav-rail-user-details",
-			className: cn("flex min-w-0 flex-1 flex-col justify-center text-left leading-tight", detailsHidden && "sr-only", mode === "expand-on-hover" && "opacity-0 transition-opacity duration-200 group-hover/nav-rail:opacity-100"),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate text-sm font-medium",
-				children: name
-			}), /* @__PURE__ */ jsx("span", {
-				className: "truncate text-xs text-muted-foreground",
-				children: email
-			})]
-		})]
-	});
-}
-/** Root for a rail item that opens a flyout submenu (wraps Popover). */
-function NavRailMenu(props) {
-	return /* @__PURE__ */ jsx(Popover$1, { ...props });
-}
-/** The rail item that opens its flyout submenu; renders a chevron affordance. */
-function NavRailMenuTrigger({ label, active, className, children, ...props }) {
-	const mode = React.useContext(NavRailContext);
-	return /* @__PURE__ */ jsx(PopoverTrigger, {
-		asChild: true,
-		children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"data-slot": "nav-rail-menu-trigger",
-			"data-active": active || void 0,
-			"aria-label": label,
-			className: cn(ITEM_BASE, ITEM_BY_MODE[mode], className),
-			...props,
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					"data-slot": "nav-rail-item-icon",
-					className: ICON_BY_MODE[mode],
-					children
-				}),
-				/* @__PURE__ */ jsx("span", {
-					"data-slot": "nav-rail-item-label",
-					className: LABEL_BY_MODE[mode],
-					children: label
-				}),
-				/* @__PURE__ */ jsx(ChevronRightIcon, {
-					"aria-hidden": true,
-					className: CHEVRON_BY_MODE[mode]
-				})
-			]
-		})
-	});
-}
-/** The glass flyout panel that holds the submenu items (portalled Popover content). */
-function NavRailMenuContent({ className, side = "right", align = "start", sideOffset = 8, ...props }) {
-	return /* @__PURE__ */ jsx(PopoverContent, {
-		"data-slot": "nav-rail-menu-content",
-		side,
-		align,
-		sideOffset,
-		className: cn("flex w-[180px] flex-col gap-0.5 rounded-2xl border border-border bg-[var(--glass-subtle)] p-1.5 text-foreground shadow-sm backdrop-blur-glass", className),
-		...props
-	});
-}
-/** A single entry inside a NavRail flyout submenu. */
-function NavRailMenuItem({ className, active, asChild = false, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
-		"data-slot": "nav-rail-menu-item",
-		"data-active": active || void 0,
-		"aria-current": active ? "page" : void 0,
-		className: cn("flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm text-foreground outline-none transition-colors", "hover:bg-foreground/10 focus-visible:bg-foreground/10", "data-[active=true]:bg-[var(--white)] data-[active=true]:font-medium data-[active=true]:text-[var(--brand-colors-brand-500)] data-[active=true]:hover:bg-[var(--white)]", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
-		...asChild ? {} : { type: "button" },
-		...props
-	});
-}
-//#endregion
+import { NavRail, NavRailItem, NavRailMenu, NavRailMenuContent, NavRailMenuItem, NavRailMenuTrigger, NavRailSeparator, NavRailUser } from "../../patterns/NavRail/index.js";
 export { NavRail, NavRailItem, NavRailMenu, NavRailMenuContent, NavRailMenuItem, NavRailMenuTrigger, NavRailSeparator, NavRailUser };
-
-//# sourceMappingURL=index.js.map

package/dist/primitives/NavigationMenu/index.cjs

@@ -19,7 +19,7 @@ function NavigationMenu({ className, children, viewport = true, ...props }) {
 function NavigationMenuList({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.NavigationMenu.List, {
 		"data-slot": "navigation-menu-list",
-		className: require_cn.cn("group flex flex-1 list-none items-center justify-center gap-1", className),
+		className: require_cn.cn("group flex flex-1 list-none items-center justify-center gap-0", className),
 		...props
 	});
 }
@@ -31,7 +31,7 @@ function NavigationMenuItem({ className, ...props }) {
 		...props
 	});
 }
-const navigationMenuTriggerStyle = (0, class_variance_authority.cva)("group inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent");
+const navigationMenuTriggerStyle = (0, class_variance_authority.cva)("group inline-flex h-9 w-max items-center justify-center gap-2 rounded-8 bg-ghost-bg px-4 py-2 font-heading text-sm leading-6 font-medium text-primary-txt transition-[color,box-shadow] outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-toggle-active-bg");
 /** Button that toggles an item's content panel; renders a rotating chevron. */
 function NavigationMenuTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.NavigationMenu.Trigger, {
@@ -42,7 +42,7 @@ function NavigationMenuTrigger({ className, children, ...props }) {
 			children,
 			" ",
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
-				className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
+				className: "relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
 				"aria-hidden": "true"
 			})
 		]
@@ -52,7 +52,7 @@ function NavigationMenuTrigger({ className, children, ...props }) {
 function NavigationMenuContent({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.NavigationMenu.Content, {
 		"data-slot": "navigation-menu-content",
-		className: require_cn.cn("top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto", "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95", className),
+		className: require_cn.cn("top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto", "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-12 group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-primary-border group-data-[viewport=false]/navigation-menu:bg-glass-none-bg group-data-[viewport=false]/navigation-menu:text-primary-txt group-data-[viewport=false]/navigation-menu:shadow-sm group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95", className),
 		...props
 	});
 }
@@ -62,7 +62,7 @@ function NavigationMenuViewport({ className, ...props }) {
 		className: require_cn.cn("absolute top-full left-0 isolate z-50 flex justify-center"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.NavigationMenu.Viewport, {
 			"data-slot": "navigation-menu-viewport",
-			className: require_cn.cn("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", className),
+			className: require_cn.cn("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg text-primary-txt shadow-sm data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", className),
 			...props
 		})
 	});
@@ -71,7 +71,7 @@ function NavigationMenuViewport({ className, ...props }) {
 function NavigationMenuLink({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.NavigationMenu.Link, {
 		"data-slot": "navigation-menu-link",
-		className: require_cn.cn("flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		className: require_cn.cn("flex flex-col gap-1 rounded-10 px-2 py-1.5 text-sm leading-5 transition-all outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 data-[active=true]:bg-toggle-active-bg [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt", className),
 		...props
 	});
 }
@@ -81,7 +81,7 @@ function NavigationMenuIndicator({ className, ...props }) {
 		"data-slot": "navigation-menu-indicator",
 		className: require_cn.cn("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in", className),
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "relative top-[60%] size-2 rotate-45 rounded-tl-2 bg-primary-border shadow-md" })
 	});
 }
 //#endregion

package/dist/primitives/NavigationMenu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["NavigationMenuPrimitive","cn","ChevronDownIcon"],"sources":["../../../src/primitives/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a horizontal navigation bar; renders a `<nav>` and optionally an animated viewport. */\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  /** When true (default), renders a shared animated viewport that hosts the active item's content. Set false to render content inline beneath each item. */\n  viewport?: boolean;\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/** Horizontal list wrapper for the top-level navigation items. */\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"group flex flex-1 list-none items-center justify-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single top-level entry; holds either a link or a trigger plus its content. */\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\",\n);\n\n/** Button that toggles an item's content panel; renders a rotating chevron. */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/** The panel revealed when an item's trigger is open; holds links or rich content. */\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Shared animated container that the active item's content is portaled into when `viewport` is enabled. */\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div className={cn(\"absolute top-full left-0 isolate z-50 flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A navigable link styled for use as a top-level item or inside content; set `active` to mark the current page. */\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Optional arrow that points from the active trigger to its content panel. */\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,eAAe,EACtB,WACA,UACA,WAAW,MACX,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,MAACA,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,iBAAe;EACf,WAAWC,WAAAA,GACT,oFACA,SACF;EACA,GAAI;YAPN,CASG,UACA,YAAY,iBAAA,GAAA,kBAAA,KAAC,wBAAD,CAAyB,CAAA,CACV;;AAElC;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,YAAY,SAAS;EACnC,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,8BAAA,GAAA,yBAAA,KACJ,8fACF;;AAGA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,MAACD,SAAAA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAC9D,GAAI;YAHN;GAKG;GAAU;GACX,iBAAA,GAAA,kBAAA,KAACC,aAAAA,iBAAD;IACE,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;;AAGA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAACF,SAAAA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,oWACA,6hCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAWA,WAAAA,GAAG,2DAA2D;YAC5E,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,UAAzB;GACE,aAAU;GACV,WAAWC,WAAAA,GACT,sVACA,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,ydACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,WAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,gMACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,yEAA0E,CAAA;CACxD,CAAA;AAEvC"}
+{"version":3,"file":"index.cjs","names":["NavigationMenuPrimitive","cn","ChevronDownIcon"],"sources":["../../../src/primitives/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a horizontal navigation bar; renders a `<nav>` and optionally an animated viewport. */\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  /** When true (default), renders a shared animated viewport that hosts the active item's content. Set false to render content inline beneath each item. */\n  viewport?: boolean;\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/** Horizontal list wrapper for the top-level navigation items. */\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"group flex flex-1 list-none items-center justify-center gap-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single top-level entry; holds either a link or a trigger plus its content. */\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\n/* Figma (288:184487): triggers are the Ghost Button recipe — heading-6 type,\n   36px box, px-4, rounded-8, ghost hover/open tints. */\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center gap-2 rounded-8 bg-ghost-bg px-4 py-2 font-heading text-sm leading-6 font-medium text-primary-txt transition-[color,box-shadow] outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-toggle-active-bg\",\n);\n\n/** Button that toggles an item's content panel; renders a rotating chevron. */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/** The panel revealed when an item's trigger is open; holds links or rich content. */\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-12 group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-primary-border group-data-[viewport=false]/navigation-menu:bg-glass-none-bg group-data-[viewport=false]/navigation-menu:text-primary-txt group-data-[viewport=false]/navigation-menu:shadow-sm group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Shared animated container that the active item's content is portaled into when `viewport` is enabled. */\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div className={cn(\"absolute top-full left-0 isolate z-50 flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg text-primary-txt shadow-sm data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A navigable link styled for use as a top-level item or inside content; set `active` to mark the current page. */\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        // Link tiles: semibold-14 title + muted description on menu-item metrics.\n        \"flex flex-col gap-1 rounded-10 px-2 py-1.5 text-sm leading-5 transition-all outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 data-[active=true]:bg-toggle-active-bg [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Optional arrow that points from the active trigger to its content panel. */\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] size-2 rotate-45 rounded-tl-2 bg-primary-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,eAAe,EACtB,WACA,UACA,WAAW,MACX,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,MAACA,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,iBAAe;EACf,WAAWC,WAAAA,GACT,oFACA,SACF;EACA,GAAI;YAPN,CASG,UACA,YAAY,iBAAA,GAAA,kBAAA,KAAC,wBAAD,CAAyB,CAAA,CACV;;AAElC;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,YAAY,SAAS;EACnC,GAAI;CACL,CAAA;AAEL;AAIA,MAAM,8BAAA,GAAA,yBAAA,KACJ,mZACF;;AAGA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,MAACD,SAAAA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAC9D,GAAI;YAHN;GAKG;GAAU;GACX,iBAAA,GAAA,kBAAA,KAACC,aAAAA,iBAAD;IACE,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;;AAGA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAACF,SAAAA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,oWACA,imCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAWA,WAAAA,GAAG,2DAA2D;YAC5E,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,UAAzB;GACE,aAAU;GACV,WAAWC,WAAAA,GACT,8WACA,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAET,2UACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,WAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,gMACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,+EAAgF,CAAA;CAC9D,CAAA;AAEvC"}

package/dist/primitives/NavigationMenu/index.js

@@ -18,7 +18,7 @@ function NavigationMenu({ className, children, viewport = true, ...props }) {
 function NavigationMenuList({ className, ...props }) {
 	return /* @__PURE__ */ jsx(NavigationMenu$1.List, {
 		"data-slot": "navigation-menu-list",
-		className: cn("group flex flex-1 list-none items-center justify-center gap-1", className),
+		className: cn("group flex flex-1 list-none items-center justify-center gap-0", className),
 		...props
 	});
 }
@@ -30,7 +30,7 @@ function NavigationMenuItem({ className, ...props }) {
 		...props
 	});
 }
-const navigationMenuTriggerStyle = cva("group inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent");
+const navigationMenuTriggerStyle = cva("group inline-flex h-9 w-max items-center justify-center gap-2 rounded-8 bg-ghost-bg px-4 py-2 font-heading text-sm leading-6 font-medium text-primary-txt transition-[color,box-shadow] outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-toggle-active-bg");
 /** Button that toggles an item's content panel; renders a rotating chevron. */
 function NavigationMenuTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(NavigationMenu$1.Trigger, {
@@ -41,7 +41,7 @@ function NavigationMenuTrigger({ className, children, ...props }) {
 			children,
 			" ",
 			/* @__PURE__ */ jsx(ChevronDownIcon, {
-				className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
+				className: "relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
 				"aria-hidden": "true"
 			})
 		]
@@ -51,7 +51,7 @@ function NavigationMenuTrigger({ className, children, ...props }) {
 function NavigationMenuContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
 		"data-slot": "navigation-menu-content",
-		className: cn("top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto", "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95", className),
+		className: cn("top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto", "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-12 group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-primary-border group-data-[viewport=false]/navigation-menu:bg-glass-none-bg group-data-[viewport=false]/navigation-menu:text-primary-txt group-data-[viewport=false]/navigation-menu:shadow-sm group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95", className),
 		...props
 	});
 }
@@ -61,7 +61,7 @@ function NavigationMenuViewport({ className, ...props }) {
 		className: cn("absolute top-full left-0 isolate z-50 flex justify-center"),
 		children: /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, {
 			"data-slot": "navigation-menu-viewport",
-			className: cn("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", className),
+			className: cn("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg text-primary-txt shadow-sm data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", className),
 			...props
 		})
 	});
@@ -70,7 +70,7 @@ function NavigationMenuViewport({ className, ...props }) {
 function NavigationMenuLink({ className, ...props }) {
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
 		"data-slot": "navigation-menu-link",
-		className: cn("flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		className: cn("flex flex-col gap-1 rounded-10 px-2 py-1.5 text-sm leading-5 transition-all outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 data-[active=true]:bg-toggle-active-bg [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt", className),
 		...props
 	});
 }
@@ -80,7 +80,7 @@ function NavigationMenuIndicator({ className, ...props }) {
 		"data-slot": "navigation-menu-indicator",
 		className: cn("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in", className),
 		...props,
-		children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+		children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] size-2 rotate-45 rounded-tl-2 bg-primary-border shadow-md" })
 	});
 }
 //#endregion

package/dist/primitives/NavigationMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["NavigationMenuPrimitive"],"sources":["../../../src/primitives/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a horizontal navigation bar; renders a `<nav>` and optionally an animated viewport. */\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  /** When true (default), renders a shared animated viewport that hosts the active item's content. Set false to render content inline beneath each item. */\n  viewport?: boolean;\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/** Horizontal list wrapper for the top-level navigation items. */\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"group flex flex-1 list-none items-center justify-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single top-level entry; holds either a link or a trigger plus its content. */\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\",\n);\n\n/** Button that toggles an item's content panel; renders a rotating chevron. */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/** The panel revealed when an item's trigger is open; holds links or rich content. */\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Shared animated container that the active item's content is portaled into when `viewport` is enabled. */\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div className={cn(\"absolute top-full left-0 isolate z-50 flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A navigable link styled for use as a top-level item or inside content; set `active` to mark the current page. */\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Optional arrow that points from the active trigger to its content panel. */\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n};\n"],"mappings":";;;;;;;AAQA,SAAS,eAAe,EACtB,WACA,UACA,WAAW,MACX,GAAG,SAIF;CACD,OACE,qBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,iBAAe;EACf,WAAW,GACT,oFACA,SACF;EACA,GAAI;YAPN,CASG,UACA,YAAY,oBAAC,wBAAD,CAAyB,CAAA,CACV;;AAElC;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,6BAA6B,IACjC,8fACF;;AAGA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,qBAACA,iBAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAC9D,GAAI;YAHN;GAKG;GAAU;GACX,oBAAC,iBAAD;IACE,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;;AAGA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,oBAACA,iBAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GACT,oWACA,6hCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,2DAA2D;YAC5E,oBAACA,iBAAwB,UAAzB;GACE,aAAU;GACV,WAAW,GACT,sVACA,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GACT,ydACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,iBAAwB,WAAzB;EACE,aAAU;EACV,WAAW,GACT,gMACA,SACF;EACA,GAAI;YAEJ,oBAAC,OAAD,EAAK,WAAU,yEAA0E,CAAA;CACxD,CAAA;AAEvC"}
+{"version":3,"file":"index.js","names":["NavigationMenuPrimitive"],"sources":["../../../src/primitives/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a horizontal navigation bar; renders a `<nav>` and optionally an animated viewport. */\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  /** When true (default), renders a shared animated viewport that hosts the active item's content. Set false to render content inline beneath each item. */\n  viewport?: boolean;\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/** Horizontal list wrapper for the top-level navigation items. */\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"group flex flex-1 list-none items-center justify-center gap-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single top-level entry; holds either a link or a trigger plus its content. */\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\n/* Figma (288:184487): triggers are the Ghost Button recipe — heading-6 type,\n   36px box, px-4, rounded-8, ghost hover/open tints. */\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center gap-2 rounded-8 bg-ghost-bg px-4 py-2 font-heading text-sm leading-6 font-medium text-primary-txt transition-[color,box-shadow] outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-toggle-active-bg\",\n);\n\n/** Button that toggles an item's content panel; renders a rotating chevron. */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/** The panel revealed when an item's trigger is open; holds links or rich content. */\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-12 group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-primary-border group-data-[viewport=false]/navigation-menu:bg-glass-none-bg group-data-[viewport=false]/navigation-menu:text-primary-txt group-data-[viewport=false]/navigation-menu:shadow-sm group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Shared animated container that the active item's content is portaled into when `viewport` is enabled. */\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div className={cn(\"absolute top-full left-0 isolate z-50 flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg text-primary-txt shadow-sm data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A navigable link styled for use as a top-level item or inside content; set `active` to mark the current page. */\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        // Link tiles: semibold-14 title + muted description on menu-item metrics.\n        \"flex flex-col gap-1 rounded-10 px-2 py-1.5 text-sm leading-5 transition-all outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 data-[active=true]:bg-toggle-active-bg [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Optional arrow that points from the active trigger to its content panel. */\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] size-2 rotate-45 rounded-tl-2 bg-primary-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n};\n"],"mappings":";;;;;;;AAQA,SAAS,eAAe,EACtB,WACA,UACA,WAAW,MACX,GAAG,SAIF;CACD,OACE,qBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,iBAAe;EACf,WAAW,GACT,oFACA,SACF;EACA,GAAI;YAPN,CASG,UACA,YAAY,oBAAC,wBAAD,CAAyB,CAAA,CACV;;AAElC;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;CACL,CAAA;AAEL;AAIA,MAAM,6BAA6B,IACjC,mZACF;;AAGA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,qBAACA,iBAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAC9D,GAAI;YAHN;GAKG;GAAU;GACX,oBAAC,iBAAD;IACE,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;;AAGA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,oBAACA,iBAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GACT,oWACA,imCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,2DAA2D;YAC5E,oBAACA,iBAAwB,UAAzB;GACE,aAAU;GACV,WAAW,GACT,8WACA,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAET,2UACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,iBAAwB,WAAzB;EACE,aAAU;EACV,WAAW,GACT,gMACA,SACF;EACA,GAAI;YAEJ,oBAAC,OAAD,EAAK,WAAU,+EAAgF,CAAA;CAC9D,CAAA;AAEvC"}

package/dist/primitives/Pagination/index.cjs

@@ -38,34 +38,28 @@ function PaginationLink({ className, isActive, size = "icon", ...props }) {
 		className: require_cn.cn(require_primitives_Button_index.buttonVariants({
 			variant: isActive ? "outline" : "ghost",
 			size
-		}), className),
+		}), "rounded-8", className),
 		...props
 	});
 }
 /** "Previous" control: a pagination link with a leading chevron and accessible label. */
 function PaginationPrevious({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PaginationLink, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationLink, {
 		"aria-label": "Go to previous page",
 		size: "default",
-		className: require_cn.cn("gap-1 px-2.5 sm:pl-2.5", className),
+		className: require_cn.cn("px-2.5", className),
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeftIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "hidden sm:block",
-			children: "Previous"
-		})]
+		children: "Previous"
 	});
 }
 /** "Next" control: a pagination link with a trailing chevron and accessible label. */
 function PaginationNext({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PaginationLink, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationLink, {
 		"aria-label": "Go to next page",
 		size: "default",
-		className: require_cn.cn("gap-1 px-2.5 sm:pr-2.5", className),
+		className: require_cn.cn("px-2.5", className),
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "hidden sm:block",
-			children: "Next"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, {})]
+		children: "Next"
 	});
 }
 /** Non-interactive ellipsis indicating skipped page ranges. */

package/dist/primitives/Pagination/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","buttonVariants","ChevronLeftIcon","ChevronRightIcon","MoreHorizontalIcon"],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">Previous</span>\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;;AAOA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAWA,WAAAA,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAWA,WAAAA,GACTC,gCAAAA,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GACD,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWD,WAAAA,GAAG,0BAA0B,SAAS;EACjD,GAAI;YAJN,CAME,iBAAA,GAAA,kBAAA,KAACE,aAAAA,iBAAD,CAAkB,CAAA,GAClB,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAkB;EAAc,CAAA,CAClC;;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWF,WAAAA,GAAG,0BAA0B,SAAS;EACjD,GAAI;YAJN,CAME,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAkB;EAAU,CAAA,GAC5C,iBAAA,GAAA,kBAAA,KAACG,aAAAA,kBAAD,CAAmB,CAAA,CACL;;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAWH,WAAAA,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,iBAAA,GAAA,kBAAA,KAACI,aAAAA,oBAAD,EAAoB,WAAU,SAAU,CAAA,GACxC,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}
+{"version":3,"file":"index.cjs","names":["cn","buttonVariants","MoreHorizontalIcon"],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        // Pagination buttons are 8px-rounded squares (Figma 294:233630), not pills.\n        \"rounded-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Previous\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Next\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;;AAOA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAWA,WAAAA,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAWA,WAAAA,GACTC,gCAAAA,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GAED,aACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWD,WAAAA,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWA,WAAAA,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAWA,WAAAA,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,iBAAA,GAAA,kBAAA,KAACE,aAAAA,oBAAD,EAAoB,WAAU,SAAU,CAAA,GACxC,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}

package/dist/primitives/Pagination/index.d.cts

@@ -1,2 +1,2 @@
-import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../../index44.cjs";
+import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../../index45.cjs";
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/primitives/Pagination/index.d.ts

@@ -1,2 +1,2 @@
-import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../../index44.js";
+import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../../index45.js";
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/primitives/Pagination/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
 import { buttonVariants } from "../Button/index.js";
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { MoreHorizontalIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/Pagination/Pagination.tsx
 /** Accessible pagination navigation landmark that wraps the list of page links. */
@@ -37,34 +37,28 @@ function PaginationLink({ className, isActive, size = "icon", ...props }) {
 		className: cn(buttonVariants({
 			variant: isActive ? "outline" : "ghost",
 			size
-		}), className),
+		}), "rounded-8", className),
 		...props
 	});
 }
 /** "Previous" control: a pagination link with a leading chevron and accessible label. */
 function PaginationPrevious({ className, ...props }) {
-	return /* @__PURE__ */ jsxs(PaginationLink, {
+	return /* @__PURE__ */ jsx(PaginationLink, {
 		"aria-label": "Go to previous page",
 		size: "default",
-		className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+		className: cn("px-2.5", className),
 		...props,
-		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {}), /* @__PURE__ */ jsx("span", {
-			className: "hidden sm:block",
-			children: "Previous"
-		})]
+		children: "Previous"
 	});
 }
 /** "Next" control: a pagination link with a trailing chevron and accessible label. */
 function PaginationNext({ className, ...props }) {
-	return /* @__PURE__ */ jsxs(PaginationLink, {
+	return /* @__PURE__ */ jsx(PaginationLink, {
 		"aria-label": "Go to next page",
 		size: "default",
-		className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+		className: cn("px-2.5", className),
 		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "hidden sm:block",
-			children: "Next"
-		}), /* @__PURE__ */ jsx(ChevronRightIcon, {})]
+		children: "Next"
 	});
 }
 /** Non-interactive ellipsis indicating skipped page ranges. */

package/dist/primitives/Pagination/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">Previous</span>\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;AAOA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,oBAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAW,GACT,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GACD,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,0BAA0B,SAAS;EACjD,GAAI;YAJN,CAME,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,QAAD;GAAM,WAAU;aAAkB;EAAc,CAAA,CAClC;;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,0BAA0B,SAAS;EACjD,GAAI;YAJN,CAME,oBAAC,QAAD;GAAM,WAAU;aAAkB;EAAU,CAAA,GAC5C,oBAAC,kBAAD,CAAmB,CAAA,CACL;;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,qBAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,oBAAC,oBAAD,EAAoB,WAAU,SAAU,CAAA,GACxC,oBAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        // Pagination buttons are 8px-rounded squares (Figma 294:233630), not pills.\n        \"rounded-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Previous\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Next\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;AAOA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,oBAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAW,GACT,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GAED,aACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,oBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,oBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,qBAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,oBAAC,oBAAD,EAAoB,WAAU,SAAU,CAAA,GACxC,oBAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}