@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/navigation-menu.d.ts

@@ -0,0 +1,56 @@
+/**
+ * NavigationMenu — top-level nav bar with dropdown panels for grouped links.
+ *
+ * Built on the Radix NavigationMenu primitive. The `viewport` prop opts out
+ * of the shared dropdown viewport (renders each NavigationMenuContent inline
+ * instead); it defaults to on.
+ */
+import * as React from "react";
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
+declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+    viewport?: boolean;
+}): React.JSX.Element;
+declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): React.JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): React.JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): React.JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): React.JSX.Element;
+declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): React.JSX.Element;
+declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): React.JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): React.JSX.Element;
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };
+/**
+ * WHEN TO USE
+ * - Navigating between top-level sections or modules of the app, some of
+ *   which expand into a dropdown of related links
+ *
+ * NOT WHEN
+ * - Switching views within one page — use Tabs
+ * - Persistent side navigation — use Sidebar
+ * - An action menu (not links) — use DropdownMenu
+ *
+ * KEY RULES
+ * - A plain link that should look like a trigger: wrap it in
+ *   NavigationMenuLink asChild with className={navigationMenuTriggerStyle()}
+ * - Wrap real anchors in NavigationMenuLink with asChild
+ * - viewport (default true) controls whether all dropdown panels share one
+ *   animated viewport under the bar; set false to render each inline instead
+ *
+ * USAGE
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <NavigationMenuLink asChild><a href="/button">Button</a></NavigationMenuLink>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+ *         <a href="/docs">Docs</a>
+ *       </NavigationMenuLink>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ */
+//# sourceMappingURL=navigation-menu.d.ts.map

package/dist/components/ui/navigation-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/navigation-menu.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,IAAI,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAKpE,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,QAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,GAAG;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,qBAeA;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,qBAW3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,qBAQ3D;AAED,QAAA,MAAM,0BAA0B,oFAM/B,CAAA;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,OAAO,CAAC,qBAc9D;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,OAAO,CAAC,qBAW9D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,QAAQ,CAAC,qBAiB/D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,qBAW3D;AAED,iBAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,SAAS,CAAC,qBAahE;AAED,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,0BAA0B,GAC3B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG"}

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

@@ -0,0 +1,116 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { NavigationMenu as NavigationMenu$1 } from "radix-ui";
+import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/navigation-menu.tsx
+function NavigationMenu({ className, children, viewport = true, ...props }) {
+	return /* @__PURE__ */ jsxs(NavigationMenu$1.Root, {
+		"data-slot": "navigation-menu",
+		"data-viewport": viewport,
+		className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
+		...props,
+		children: [children, viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})]
+	});
+}
+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-0", className),
+		...props
+	});
+}
+function NavigationMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
+		"data-slot": "navigation-menu-item",
+		className: cn("relative", className),
+		...props
+	});
+}
+var navigationMenuTriggerStyle = cva("group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-muted/50 data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted");
+function NavigationMenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(NavigationMenu$1.Trigger, {
+		"data-slot": "navigation-menu-trigger",
+		className: cn(navigationMenuTriggerStyle(), "group", className),
+		...props,
+		children: [
+			children,
+			" ",
+			/* @__PURE__ */ jsx(ChevronDownIcon, {
+				className: "relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]/navigation-menu-trigger:rotate-180",
+				"aria-hidden": "true"
+			})
+		]
+	});
+}
+function NavigationMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
+		"data-slot": "navigation-menu-content",
+		className: cn("top-0 left-0 w-full p-1 ease-[cubic-bezier(0.22,1,0.36,1)] 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-lg 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:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto 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 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", className),
+		...props
+	});
+}
+function NavigationMenuViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		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-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-[state=open]:animate-in data-[state=open]:zoom-in-90 data-[state=closed]:animate-out data-[state=closed]:zoom-out-90", className),
+			...props
+		})
+	});
+}
+function NavigationMenuLink({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
+		"data-slot": "navigation-menu-link",
+		className: cn("flex items-center gap-2 rounded-lg p-2 text-sm transition-colors outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function NavigationMenuIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Indicator, {
+		"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" })
+	});
+}
+/**
+* WHEN TO USE
+* - Navigating between top-level sections or modules of the app, some of
+*   which expand into a dropdown of related links
+*
+* NOT WHEN
+* - Switching views within one page — use Tabs
+* - Persistent side navigation — use Sidebar
+* - An action menu (not links) — use DropdownMenu
+*
+* KEY RULES
+* - A plain link that should look like a trigger: wrap it in
+*   NavigationMenuLink asChild with className={navigationMenuTriggerStyle()}
+* - Wrap real anchors in NavigationMenuLink with asChild
+* - viewport (default true) controls whether all dropdown panels share one
+*   animated viewport under the bar; set false to render each inline instead
+*
+* USAGE
+* <NavigationMenu>
+*   <NavigationMenuList>
+*     <NavigationMenuItem>
+*       <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+*       <NavigationMenuContent>
+*         <NavigationMenuLink asChild><a href="/button">Button</a></NavigationMenuLink>
+*       </NavigationMenuContent>
+*     </NavigationMenuItem>
+*     <NavigationMenuItem>
+*       <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+*         <a href="/docs">Docs</a>
+*       </NavigationMenuLink>
+*     </NavigationMenuItem>
+*   </NavigationMenuList>
+* </NavigationMenu>
+*/
+//#endregion
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };
+
+//# sourceMappingURL=navigation-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.js","names":[],"sources":["../../../src/components/ui/navigation-menu.tsx"],"sourcesContent":["/**\n * NavigationMenu — top-level nav bar with dropdown panels for grouped links.\n *\n * Built on the Radix NavigationMenu primitive. The `viewport` prop opts out\n * of the shared dropdown viewport (renders each NavigationMenuContent inline\n * instead); it defaults to on.\n */\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\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\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(\n        \"group flex flex-1 list-none items-center justify-center gap-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\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  // Radix sets `data-state=\"open\"|\"closed\"` here (via its own getOpenState\n  // helper) — never a literal `data-popup-open`/`data-open` attribute, so\n  // both bare forms below used to be dead; one correct `data-[state=open]:`\n  // set covers what they were both trying to express.\n  \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-muted/50 data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted\"\n)\n\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]/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\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-1 ease-[cubic-bezier(0.22,1,0.36,1)] 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-lg 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:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto 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 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\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-[state=open]:animate-in data-[state=open]:zoom-in-90 data-[state=closed]:animate-out data-[state=closed]:zoom-out-90\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\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 items-center gap-2 rounded-lg p-2 text-sm transition-colors outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\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\n/**\n * WHEN TO USE\n * - Navigating between top-level sections or modules of the app, some of\n *   which expand into a dropdown of related links\n *\n * NOT WHEN\n * - Switching views within one page — use Tabs\n * - Persistent side navigation — use Sidebar\n * - An action menu (not links) — use DropdownMenu\n *\n * KEY RULES\n * - A plain link that should look like a trigger: wrap it in\n *   NavigationMenuLink asChild with className={navigationMenuTriggerStyle()}\n * - Wrap real anchors in NavigationMenuLink with asChild\n * - viewport (default true) controls whether all dropdown panels share one\n *   animated viewport under the bar; set false to render each inline instead\n *\n * USAGE\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem>\n *       <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <NavigationMenuLink asChild><a href=\"/button\">Button</a></NavigationMenuLink>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem>\n *       <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>\n *         <a href=\"/docs\">Docs</a>\n *       </NavigationMenuLink>\n *     </NavigationMenuItem>\n *   </NavigationMenuList>\n * </NavigationMenu>\n */\n"],"mappings":";;;;;;;AAeA,SAAS,eAAe,EACtB,WACA,UACA,WAAW,MACX,GAAG,SAGF;CACD,OACE,qBAAC,iBAAwB,MAAzB;EACE,aAAU;EACV,iBAAe;EACf,WAAW,GACT,oFACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACA,YAAY,oBAAC,wBAAD,CAAyB,CAAA,CACV;;AAElC;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAAC,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GACT,iEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAAC,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,6BAA6B,IAKjC,oZACF;AAEA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,qBAAC,iBAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAC9D,GAAI;EAHN,UAAA;GAKG;GAAU;GACX,oBAAC,iBAAD;IACE,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;AAEA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,oBAAC,iBAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GACT,y9CACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAAC,OAAD;EACE,WAAW,GACT,2DACF;EAEA,UAAA,oBAAC,iBAAwB,UAAzB;GACE,aAAU;GACV,WAAW,GACT,4WACA,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAAC,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GACT,4VACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAAC,iBAAwB,WAAzB;EACE,aAAU;EACV,WAAW,GACT,8LACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,OAAD,EAAK,WAAU,yEAA0E,CAAA;CACxD,CAAA;AAEvC"}

package/dist/components/ui/page-header.d.ts

@@ -0,0 +1,223 @@
+/**
+ * PageHeader — the single top-of-page banner a page is known by.
+ *
+ * A composite: PageHeaderContent
+ * (title + description) on the left, PageHeaderActions on the right, with a
+ * border-b beneath the whole row. Deliberately has no background color of
+ * its own — it sits on whatever canvas/surface it's placed on, rather than
+ * painting its own tint.
+ *
+ * Responsive via `@container/page-header`, not a prop or a single narrow/wide
+ * switch: it tracks the header's own rendered width continuously, so it
+ * degrades in steps as room shrinks and recovers live if the host regrows it
+ * (a resizable split pane, a sidebar that collapses/expands, a sidecar panel
+ * vs. a full page) — there's no `isNarrow` boolean to compute or thread
+ * through, and no fixed viewport breakpoint that misses "narrow because of
+ * placement, not because of screen size":
+ *   - below `md` (28rem): gap/padding tighten (gap-3, py-3), but the row can
+ *     still wrap Actions to a second line if it doesn't fit
+ *   - below `sm` (24rem): the row stops wrapping altogether and stays on one
+ *     line (gap-2, px-3 — the same compact density Card uses at `size="sm"`),
+ *     with the title truncating instead
+ * This stays a plain layout container the whole way down — safe for the
+ * scoped-CSS build (see Field's `orientation="responsive"` for the same
+ * `@container` idiom).
+ */
+import * as React from "react";
+declare function PageHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PageHeaderContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PageHeaderTitle({ className, ...props }: React.ComponentProps<"h1">): React.JSX.Element;
+declare function PageHeaderDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function PageHeaderActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { PageHeader, PageHeaderContent, PageHeaderTitle, PageHeaderDescription, PageHeaderActions, };
+/**
+ * WHEN TO USE
+ * - Top of a detail view, list page, or full-page flow — the one heading
+ *   the whole page is known by
+ * - Compose a Breadcrumb above PageHeaderTitle for pages nested more than
+ *   one level deep, or a status Badge inline inside PageHeaderTitle
+ *
+ * NOT WHEN
+ * - A row inside a list — use Item
+ * - A card's own heading — use CardHeader/CardTitle
+ * - A section label inside a page — use a plain heading or Item
+ *
+ * KEY RULES
+ * - PageHeaderTitle is always text-xl/font-medium — the one page-identity
+ *   heading size; don't resize or reweight it per page. Size alone (not
+ *   weight) is what separates it from CardTitle/DialogTitle/SheetTitle,
+ *   which are all text-base/font-medium — stacking heavier weight on top
+ *   of the larger size would double up the emphasis
+ * - PageHeaderActions is optional — omit it for a title-only header
+ * - Only one PageHeader per page
+ * - No background of its own — don't add bg-* here; let the page canvas or
+ *   card it sits on show through
+ * - Padding is px-4 py-4 — the same standard surface padding as
+ *   Card/Dialog/AlertDialog/Sheet/Drawer's `p-4`, not a wider page-edge
+ *   gutter. Was px-6 previously; that was an outlier matching no other
+ *   surface in the system
+ * - PageHeaderContent is flex-1 so it fills the row instead of shrinking to
+ *   the title's own width — needed for anything wider than the title placed
+ *   below it (e.g. a composed description row) to have room instead of
+ *   wrapping inside a title-sized column
+ * - Responsive collapsing is automatic and gradual, via `@container/page-header`
+ *   on the root — no prop, no `isNarrow` boolean to thread through. It tracks
+ *   the header's own rendered width live, so it degrades (and recovers) in
+ *   step with wherever it's actually placed — a resizable split pane, a
+ *   collapsing sidebar, a sidecar panel vs. a full page — not just a small
+ *   viewport. Below `md` (28rem) gap/padding tighten but Actions can still
+ *   wrap to a second line; below `sm` (24rem) the row stays on one line and
+ *   the title truncates instead. A title composed with an inline Badge (see
+ *   Level 1's "Default" story) will clip the badge abruptly rather than
+ *   ellipsis it in that collapsed state — a real trade-off of forcing one
+ *   line, not a bug; avoid that composition if the header will commonly
+ *   render in a narrow container.
+ * - Headers come in two buckets: Level 0 (top-level: resource lists/tables —
+ *   no breadcrumb or back button, nowhere higher to go) and Level 1+
+ *   (nested/detail pages — always has a Breadcrumb or back button on the
+ *   left). Both are composition, not a "level" prop.
+ * - Level 1's right side is meta text + collaborator avatars + action
+ *   buttons — not just a bare Edit button like Level 0. Don't wrap those
+ *   buttons in a ButtonGroup: an overflow trigger, a deferral action, and a
+ *   primary CTA are unrelated actions, exactly what ButtonGroup's own docs
+ *   say not to use it for — and mixing an outline button's visible border
+ *   against a borderless primary button inside one leaves a stray
+ *   half-border at the seam. A back button is just an icon-only Button
+ *   placed before PageHeaderContent.
+ * - Those three sections (meta, avatars, actions) are spaced apart by
+ *   PageHeaderActions' own `gap-2` alone — no `•` divider between them; text
+ *   vs. avatars vs. buttons already read as separate groups by shape, so a
+ *   glyph between them would be redundant. The action buttons themselves
+ *   sit inside one `gap-1` wrapper div, tighter than the `gap-2` between
+ *   sections, since they're one related cluster — that div is just a plain
+ *   flex container, not a ButtonGroup (still ruled out for the reason
+ *   above). Level 0's actions are nothing but buttons, so that same
+ *   `gap-1` goes directly on PageHeaderActions itself
+ *   (`className="gap-1"`) instead of needing an inner wrapper — there's
+ *   nothing else in there for it to be scoped apart from.
+ * - Level 1 supports the same two tab treatments as Level 0: a centered nav
+ *   slot in the header row ("With Centered Navigation"), or a below-header
+ *   `line`-variant Tabs row with the border-b moved to an outer wrapper
+ *   ("With Tabs") — see Level 1's own stories for both, composed with
+ *   Breadcrumb/back-button and PageHeaderActions exactly as any other
+ *   Level 1 header.
+ * - Collaborator AvatarGroup in that same right side uses the default Avatar
+ *   size, not "sm" — default is size-8 (32px), matching Button's own default
+ *   height and iconOnly, so avatars and buttons line up in the row.
+ *   "sm" (24px) sits visibly shorter than every button beside it.
+ * - "With Tabs" is NOT Tabs as a sibling below PageHeader — that puts
+ *   PageHeader's own border-b between the title and the tabs. The
+ *   divider belongs at the bottom of the whole block (title row + tabs
+ *   together read as one header, and the border-b sits flush against the
+ *   tabs' own bottom edge — no pb on Tabs). Strip PageHeader's own border
+ *   with border-b-0 and move border-b onto an outer wrapper around both
+ *   rows instead
+ * - The gap between the title and the tabs is PageHeader's own bottom
+ *   padding, overridden down to pb-2 — not an addition on top of it. Adding
+ *   Tabs its own pt-* stacks two independent paddings and reads as a visible
+ *   gap between two blocks, not "one header"
+ *
+ * USAGE
+ *
+ * // Level 0 — top-level entry point, plain actions
+ * <PageHeader>
+ *   <PageHeaderContent>
+ *     <PageHeaderTitle>Care Gaps</PageHeaderTitle>
+ *     <PageHeaderDescription>142 open gaps across your panel</PageHeaderDescription>
+ *   </PageHeaderContent>
+ *   <PageHeaderActions className="gap-1">
+ *     <Button variant="outline">Export</Button>
+ *     <Button>Add Gap</Button>
+ *   </PageHeaderActions>
+ * </PageHeader>
+ *
+ * // Level 0, "With Tabs" — pb-2 replaces PageHeader's own pb-4 rather than
+ * // stacking Tabs' own top padding on top of it; two independent paddings
+ * // between the title and the tabs read as a gap, not "one header"
+ * <div className="border-b border-border">
+ *   <PageHeader className="border-b-0 pb-2">
+ *     <PageHeaderContent>
+ *       <PageHeaderTitle>Care Gaps</PageHeaderTitle>
+ *     </PageHeaderContent>
+ *   </PageHeader>
+ *   <Tabs defaultValue="open">
+ *     <TabsList variant="line" className="px-4">
+ *       <TabsTrigger value="open">Open</TabsTrigger>
+ *       <TabsTrigger value="closed">Closed</TabsTrigger>
+ *     </TabsList>
+ *   </Tabs>
+ * </div>
+ *
+ * // Level 0, "With Navigation" — a centered nav slot. justify-between alone
+ * // won't truly center a middle child against asymmetric siblings, so
+ * // override to a grid
+ * <PageHeader className="grid grid-cols-[1fr_auto_1fr] justify-normal">
+ *   <PageHeaderContent>
+ *     <PageHeaderTitle>Dashboard</PageHeaderTitle>
+ *   </PageHeaderContent>
+ *   <ToggleGroup type="single" defaultValue="visits" spacing={0}>
+ *     <ToggleGroupItem value="visits">Virtual Visits</ToggleGroupItem>
+ *     <ToggleGroupItem value="assessments">Assessments</ToggleGroupItem>
+ *   </ToggleGroup>
+ *   <PageHeaderActions className="justify-self-end gap-1">
+ *     <Button variant="outline">Export</Button>
+ *   </PageHeaderActions>
+ * </PageHeader>
+ *
+ * // Level 1 — Breadcrumb, and the meta+avatars+actions right side
+ * <PageHeader>
+ *   <PageHeaderContent>
+ *     <Breadcrumb>...</Breadcrumb>
+ *     <PageHeaderTitle>James Wilson</PageHeaderTitle>
+ *   </PageHeaderContent>
+ *   <PageHeaderActions>
+ *     <MetaList size="sm">
+ *       <MetaListItem>Few minutes ago</MetaListItem>
+ *     </MetaList>
+ *     <AvatarGroup>
+ *       <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>
+ *       <Avatar><AvatarFallback>SP</AvatarFallback></Avatar>
+ *       <AvatarGroupCount>+2</AvatarGroupCount>
+ *     </AvatarGroup>
+ *     <div className="flex items-center gap-1">
+ *       <Button variant="outline" iconOnly aria-label="More options">
+ *         <EllipsisIcon />
+ *       </Button>
+ *       <Button variant="outline">Finish later</Button>
+ *       <Button>Next</Button>
+ *     </div>
+ *   </PageHeaderActions>
+ * </PageHeader>
+ *
+ * // Level 1 — back button instead of a Breadcrumb, for hierarchies under 3
+ * // levels deep. Same meta+avatars+actions right side as above
+ * <PageHeader>
+ *   <PageHeaderContent className="flex-row items-center gap-3">
+ *     <Button variant="ghost" iconOnly aria-label="Back">
+ *       <ArrowLeftIcon />
+ *     </Button>
+ *     <PageHeaderTitle>James Wilson</PageHeaderTitle>
+ *   </PageHeaderContent>
+ * </PageHeader>
+ *
+ * // Level 1 — a richer description row: an outlined Badge with a colored icon
+ * // for status, plus a dot-separated MetaList for channels, instead of plain
+ * // text. PageHeaderDescription is a <p>, so block-level children replace it
+ * // here rather than nesting inside it
+ * <PageHeader>
+ *   <PageHeaderContent>
+ *     <PageHeaderTitle>Covid-19</PageHeaderTitle>
+ *     <div className="flex items-center gap-3">
+ *       <Badge emphasis="outline">
+ *         <CheckIcon className="text-success" data-icon="inline-start" />
+ *         Ongoing
+ *       </Badge>
+ *       <MetaList size="sm">
+ *         <MetaListItem>Text</MetaListItem>
+ *         <MetaListItem>Email</MetaListItem>
+ *       </MetaList>
+ *     </div>
+ *   </PageHeaderContent>
+ * </PageHeader>
+ */
+//# sourceMappingURL=page-header.d.ts.map

package/dist/components/ui/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/components/ui/page-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW3E;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAW3B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,GAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6LG"}