@adea-ai/ui 0.60.4 → 0.61.1

package/dist/components/ui/label/label.js

@@ -0,0 +1,33 @@
+import { cn } from "../../../lib/utils.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/ui/label/label.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<label data-slot=label>`);
+/**
+* Label.
+*
+* A plain `<label>` rather than a Kobalte control. Kobalte has no standalone
+* label primitive — its labels are parts of `TextField`, `Checkbox` and
+* friends, and those parts carry the association wiring for *their* control.
+* A free-standing label has to be the real element so the browser's native
+* `for` → control association, click-to-focus, and `aria-labelledby` all keep
+* working.
+*
+* Use the compound controls' own labels (`Switch.Label`, `Checkbox.Label`) when
+* the label belongs to one of them; use this one for an `Input` or `Textarea`,
+* which are plain elements with no wrapper.
+*/
+function Label(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn("flex items-center gap-2 text-sm leading-none font-medium select-none", "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50", local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+export { Label };
+
+//# sourceMappingURL=label.js.map

package/dist/components/ui/label/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","names":["ComponentProps","splitProps","cn","Label","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","_$mergeProps"],"sources":["../../../../src/components/ui/label/label.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Label.\n *\n * A plain `<label>` rather than a Kobalte control. Kobalte has no standalone\n * label primitive — its labels are parts of `TextField`, `Checkbox` and\n * friends, and those parts carry the association wiring for *their* control.\n * A free-standing label has to be the real element so the browser's native\n * `for` → control association, click-to-focus, and `aria-labelledby` all keep\n * working.\n *\n * Use the compound controls' own labels (`Switch.Label`, `Checkbox.Label`) when\n * the label belongs to one of them; use this one for an `Input` or `Textarea`,\n * which are plain elements with no wrapper.\n */\nexport function Label(props: ComponentProps<'label'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <label\n      data-slot=\"label\"\n      class={cn(\n        'flex items-center gap-2 text-sm leading-none font-medium select-none',\n        /* A label inside a disabled group is part of a dead control and must\n           not offer a pointer that does nothing. */\n        'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',\n        'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,SAAgBG,MAAMC,OAAgC;CACpD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GACL,wEAGA,wFACA,6DACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd"}

package/dist/components/ui/menubar/index.d.ts

@@ -0,0 +1,2 @@
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from './menubar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/menubar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/menubar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,mBAAmB,EACnB,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,GACf,MAAM,WAAW,CAAA"}

package/dist/components/ui/menubar/menubar.d.ts

@@ -0,0 +1,38 @@
+import { Menubar as KobalteMenubar } from '@kobalte/core/menubar';
+import type { ComponentProps } from 'solid-js';
+/**
+ * Menubar.
+ *
+ * A persistent row of menus at the top of a surface — the desktop application
+ * pattern. Each trigger opens its own menu, and the arrow keys move *between*
+ * menus once one is open, which is what makes a menubar a single control rather
+ * than five menus that happen to be adjacent.
+ *
+ * This is for a window-level command surface. For actions on one thing, use
+ * DropdownMenu; a menubar on a row would be a menu pretending to be chrome.
+ */
+export declare function Menubar(props: ComponentProps<typeof KobalteMenubar>): import("solid-js").JSX.Element;
+/**
+ * One top-level menu: a trigger and the panel it opens.
+ *
+ * Required, and the reason the component is not just a row of triggers — the
+ * menubar's arrow keys move *between* menus, which only works when each trigger
+ * belongs to a menu the bar knows about. `value` names it.
+ */
+export declare function MenubarMenu(props: ComponentProps<typeof KobalteMenubar.Menu>): import("solid-js").JSX.Element;
+export declare function MenubarTrigger(props: ComponentProps<typeof KobalteMenubar.Trigger>): import("solid-js").JSX.Element;
+export declare function MenubarContent(props: ComponentProps<typeof KobalteMenubar.Content>): import("solid-js").JSX.Element;
+export declare function MenubarItem(props: ComponentProps<typeof KobalteMenubar.Item> & {
+    variant?: 'default' | 'destructive';
+    shortcut?: string;
+}): import("solid-js").JSX.Element;
+export declare function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.CheckboxItem>): import("solid-js").JSX.Element;
+export declare function MenubarRadioGroup(props: ComponentProps<typeof KobalteMenubar.RadioGroup>): import("solid-js").JSX.Element;
+export declare function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.RadioItem>): import("solid-js").JSX.Element;
+export declare function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>): import("solid-js").JSX.Element;
+export declare function MenubarGroup(props: ComponentProps<typeof KobalteMenubar.Group>): import("solid-js").JSX.Element;
+export declare function MenubarSeparator(props: ComponentProps<typeof KobalteMenubar.Separator>): import("solid-js").JSX.Element;
+export declare function MenubarSub(props: ComponentProps<typeof KobalteMenubar.Sub>): import("solid-js").JSX.Element;
+export declare function MenubarSubTrigger(props: ComponentProps<typeof KobalteMenubar.SubTrigger>): import("solid-js").JSX.Element;
+export declare function MenubarSubContent(props: ComponentProps<typeof KobalteMenubar.SubContent>): import("solid-js").JSX.Element;
+//# sourceMappingURL=menubar.d.ts.map

package/dist/components/ui/menubar/menubar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/menubar/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAa9C;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,kCAWnE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,kCAE5E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAelF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAmBlF;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,GAAG;IAClD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,kCAuBF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,YAAY,CAAC,kCAU5F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAExF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAUtF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAGnF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,kCAE9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAGtF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG,CAAC,kCAE1E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAQxF;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAgBxF"}

package/dist/components/ui/menubar/menubar.js

@@ -0,0 +1,138 @@
+import { cn } from "../../../lib/utils.js";
+import { menuItem, menuLabel, menuSeparator, overlayMotion, overlaySurface, popoverArrow } from "../../../lib/overlay.js";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { Check, ChevronRight, Circle } from "lucide-solid";
+import { splitProps } from "solid-js";
+import { Menubar } from "@kobalte/core/menubar";
+//#region src/components/ui/menubar/menubar.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class="text-muted-foreground ms-auto font-mono text-2xs tracking-widest">`);
+/**
+* Menubar.
+*
+* A persistent row of menus at the top of a surface — the desktop application
+* pattern. Each trigger opens its own menu, and the arrow keys move *between*
+* menus once one is open, which is what makes a menubar a single control rather
+* than five menus that happen to be adjacent.
+*
+* This is for a window-level command surface. For actions on one thing, use
+* DropdownMenu; a menubar on a row would be a menu pretending to be chrome.
+*/
+function Menubar$1(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Menubar, mergeProps({ get ["class"]() {
+		return cn("flex items-center gap-0.5 rounded-md border border-border bg-card p-0.5", local.class);
+	} }, rest));
+}
+/**
+* One top-level menu: a trigger and the panel it opens.
+*
+* Required, and the reason the component is not just a row of triggers — the
+* menubar's arrow keys move *between* menus, which only works when each trigger
+* belongs to a menu the bar knows about. `value` names it.
+*/
+function MenubarMenu(props) {
+	return createComponent(Menubar.Menu, props);
+}
+function MenubarTrigger(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Menubar.Trigger, mergeProps({ get ["class"]() {
+		return cn("flex items-center rounded-sm px-2 py-1 text-sm font-medium select-none", "transition-colors ease-out outline-none", "data-[expanded]:bg-surface-active", "data-[highlighted]:bg-surface-hover", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", local.class);
+	} }, rest));
+}
+function MenubarContent(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return createComponent(Menubar.Portal, { get children() {
+		return createComponent(Menubar.Content, mergeProps({ get ["class"]() {
+			return cn(overlaySurface, overlayMotion, "z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden", "p-1", local.class);
+		} }, rest, { get children() {
+			return [createComponent(Menubar.Arrow, {
+				"aria-hidden": "true",
+				"class": popoverArrow
+			}), memo(() => local.children)];
+		} }));
+	} });
+}
+function MenubarItem(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"variant",
+		"shortcut",
+		"children"
+	]);
+	return createComponent(Menubar.Item, mergeProps({ get ["class"]() {
+		return cn(menuItem, { "text-destructive data-[highlighted]:bg-destructive-subtle data-[highlighted]:text-destructive": local.variant === "destructive" }, local.class);
+	} }, rest, { get children() {
+		return [memo(() => local.children), memo(() => memo(() => !!local.shortcut)() ? (() => {
+			var _el$ = _tmpl$();
+			insert(_el$, () => local.shortcut);
+			return _el$;
+		})() : null)];
+	} }));
+}
+function MenubarCheckboxItem(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return createComponent(Menubar.CheckboxItem, mergeProps({ get ["class"]() {
+		return cn(menuItem, "pe-8", local.class);
+	} }, rest, { get children() {
+		return [memo(() => local.children), createComponent(Menubar.ItemIndicator, {
+			"class": "absolute end-2 flex size-4 items-center justify-center",
+			get children() {
+				return createComponent(Check, { "class": "size-4" });
+			}
+		})];
+	} }));
+}
+function MenubarRadioGroup(props) {
+	return createComponent(Menubar.RadioGroup, props);
+}
+function MenubarRadioItem(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return createComponent(Menubar.RadioItem, mergeProps({ get ["class"]() {
+		return cn(menuItem, "pe-8", local.class);
+	} }, rest, { get children() {
+		return [memo(() => local.children), createComponent(Menubar.ItemIndicator, {
+			"class": "absolute end-2 flex size-4 items-center justify-center",
+			get children() {
+				return createComponent(Circle, { "class": "size-2 fill-current" });
+			}
+		})];
+	} }));
+}
+function MenubarLabel(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Menubar.GroupLabel, mergeProps({ get ["class"]() {
+		return cn(menuLabel, local.class);
+	} }, rest));
+}
+function MenubarGroup(props) {
+	return createComponent(Menubar.Group, props);
+}
+function MenubarSeparator(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Menubar.Separator, mergeProps({ get ["class"]() {
+		return cn(menuSeparator, local.class);
+	} }, rest));
+}
+function MenubarSub(props) {
+	return createComponent(Menubar.Sub, props);
+}
+function MenubarSubTrigger(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return createComponent(Menubar.SubTrigger, mergeProps({ get ["class"]() {
+		return cn(menuItem, local.class);
+	} }, rest, { get children() {
+		return [memo(() => local.children), createComponent(ChevronRight, { "class": "ms-auto size-4" })];
+	} }));
+}
+function MenubarSubContent(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(Menubar.Portal, { get children() {
+		return createComponent(Menubar.SubContent, mergeProps({ get ["class"]() {
+			return cn(overlaySurface, overlayMotion, "z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden", "p-1", local.class);
+		} }, rest));
+	} });
+}
+//#endregion
+export { Menubar$1 as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };
+
+//# sourceMappingURL=menubar.js.map

package/dist/components/ui/menubar/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":["Menubar","KobalteMenubar","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","cn","props","local","rest","_$createComponent","_$mergeProps","class","MenubarMenu","Menu","MenubarTrigger","Trigger","MenubarContent","Content","Portal","children","Arrow","_$memo","MenubarItem","Item","variant","shortcut","_el$","_tmpl$","_$insert","MenubarCheckboxItem","CheckboxItem","ItemIndicator","MenubarRadioGroup","RadioGroup","MenubarRadioItem","RadioItem","MenubarLabel","GroupLabel","MenubarGroup","Group","MenubarSeparator","Separator","MenubarSub","Sub","MenubarSubTrigger","SubTrigger","MenubarSubContent","SubContent","Menubar","_$createComponent","KobalteMenubar","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/menubar/menubar.tsx"],"sourcesContent":["import { Menubar as KobalteMenubar } from '@kobalte/core/menubar'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  menuItem,\n  menuLabel,\n  menuSeparator,\n  overlayMotion,\n  overlaySurface,\n  popoverArrow,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Menubar.\n *\n * A persistent row of menus at the top of a surface — the desktop application\n * pattern. Each trigger opens its own menu, and the arrow keys move *between*\n * menus once one is open, which is what makes a menubar a single control rather\n * than five menus that happen to be adjacent.\n *\n * This is for a window-level command surface. For actions on one thing, use\n * DropdownMenu; a menubar on a row would be a menu pretending to be chrome.\n */\nexport function Menubar(props: ComponentProps<typeof KobalteMenubar>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar\n      class={cn(\n        'flex items-center gap-0.5 rounded-md border border-border bg-card p-0.5',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * One top-level menu: a trigger and the panel it opens.\n *\n * Required, and the reason the component is not just a row of triggers — the\n * menubar's arrow keys move *between* menus, which only works when each trigger\n * belongs to a menu the bar knows about. `value` names it.\n */\nexport function MenubarMenu(props: ComponentProps<typeof KobalteMenubar.Menu>) {\n  return <KobalteMenubar.Menu {...props} />\n}\n\nexport function MenubarTrigger(props: ComponentProps<typeof KobalteMenubar.Trigger>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar.Trigger\n      class={cn(\n        'flex items-center rounded-sm px-2 py-1 text-sm font-medium select-none',\n        'transition-colors ease-out outline-none',\n        'data-[expanded]:bg-surface-active',\n        'data-[highlighted]:bg-surface-hover',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function MenubarContent(props: ComponentProps<typeof KobalteMenubar.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.Portal>\n      <KobalteMenubar.Content\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      >\n        <KobalteMenubar.Arrow aria-hidden=\"true\" class={popoverArrow} />\n        {local.children}\n      </KobalteMenubar.Content>\n    </KobalteMenubar.Portal>\n  )\n}\n\nexport function MenubarItem(\n  props: ComponentProps<typeof KobalteMenubar.Item> & {\n    variant?: 'default' | 'destructive'\n    shortcut?: string\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'shortcut', 'children'])\n  return (\n    <KobalteMenubar.Item\n      class={cn(\n        menuItem,\n        {\n          'text-destructive data-[highlighted]:bg-destructive-subtle data-[highlighted]:text-destructive':\n            local.variant === 'destructive',\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\">\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteMenubar.Item>\n  )\n}\n\nexport function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.CheckboxItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Check class=\"size-4\" />\n      </KobalteMenubar.ItemIndicator>\n    </KobalteMenubar.CheckboxItem>\n  )\n}\n\nexport function MenubarRadioGroup(props: ComponentProps<typeof KobalteMenubar.RadioGroup>) {\n  return <KobalteMenubar.RadioGroup {...props} />\n}\n\nexport function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteMenubar.ItemIndicator>\n    </KobalteMenubar.RadioItem>\n  )\n}\n\nexport function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function MenubarGroup(props: ComponentProps<typeof KobalteMenubar.Group>) {\n  return <KobalteMenubar.Group {...props} />\n}\n\nexport function MenubarSeparator(props: ComponentProps<typeof KobalteMenubar.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteMenubar.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function MenubarSub(props: ComponentProps<typeof KobalteMenubar.Sub>) {\n  return <KobalteMenubar.Sub {...props} />\n}\n\nexport function MenubarSubTrigger(props: ComponentProps<typeof KobalteMenubar.SubTrigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteMenubar.SubTrigger>\n  )\n}\n\nexport function MenubarSubContent(props: ComponentProps<typeof KobalteMenubar.SubContent>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar.Portal>\n      <KobalteMenubar.SubContent\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteMenubar.Portal>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/modal-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalDialog, type ModalDialogProps } from './modal-dialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/modal-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/components/ui/modal-dialog/modal-dialog.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentProps, JSX } from 'solid-js';
+import { DialogContent } from '../dialog/dialog';
+/**
+ * ModalDialog.
+ *
+ * A dialog that owns three things `Dialog` leaves to its caller, each of which is a
+ * real defect when it is missed:
+ *
+ *   1. **It unmounts while closed.** An always-mounted dialog that closes as a side
+ *      effect of an async action can leave Kobalte's `aria-hidden` bookkeeping behind,
+ *      which hides the rest of the application from assistive technology. Unmounting
+ *      the whole owner makes cleanup the only way the layer can end.
+ *   2. **It marks the background `inert`.** `inert` keeps the background out of the
+ *      tab order and the accessibility tree without depending on that bookkeeping, and
+ *      it restores exactly the elements that did not already have it — so a nested
+ *      dialog does not un-inert its parent.
+ *   3. **It labels itself explicitly.** The title registers its id for
+ *      `aria-labelledby` in a mount effect; if that registration is ever lost, the
+ *      dialog renders with a heading and no name. Passing the label as well costs
+ *      nothing and removes the race.
+ *
+ * Use `Dialog` directly when you need its composition; use this when you want a
+ * dialog that is correct by default.
+ */
+export type ModalDialogProps = Omit<ComponentProps<typeof DialogContent>, 'children'> & {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    description?: string;
+    /** A mark or icon drawn before the title. */
+    headerLeading?: JSX.Element;
+    children?: JSX.Element;
+};
+export declare function ModalDialog(props: ModalDialogProps): JSX.Element;
+//# sourceMappingURL=modal-dialog.d.ts.map

package/dist/components/ui/modal-dialog/modal-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal-dialog/modal-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAGnD,OAAO,EAEL,aAAa,EAId,MAAM,kBAAkB,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAmDlD"}

package/dist/components/ui/modal-dialog/modal-dialog.js

@@ -0,0 +1,78 @@
+import { cn } from "../../../lib/utils.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog/dialog.js";
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Show, createEffect, createSignal, onCleanup, splitProps } from "solid-js";
+//#region src/components/ui/modal-dialog/modal-dialog.tsx
+function ModalDialog(props) {
+	const [local, rest] = splitProps(props, [
+		"open",
+		"onClose",
+		"title",
+		"description",
+		"headerLeading",
+		"class",
+		"children"
+	]);
+	const [content, setContent] = createSignal();
+	createEffect(() => {
+		if (!local.open) return;
+		const element = content();
+		if (!element) return;
+		const background = [...document.body.children].filter((child) => child instanceof HTMLElement && !child.contains(element));
+		const wasInert = background.map((node) => node.hasAttribute("inert"));
+		for (const node of background) node.setAttribute("inert", "");
+		onCleanup(() => {
+			background.forEach((node, index) => {
+				if (!wasInert[index]) node.removeAttribute("inert");
+			});
+		});
+	});
+	return createComponent(Show, {
+		get when() {
+			return local.open;
+		},
+		get children() {
+			return createComponent(Dialog, {
+				open: true,
+				onOpenChange: (next) => !next && local.onClose(),
+				get children() {
+					return createComponent(DialogContent, mergeProps({
+						ref: setContent,
+						get ["class"]() {
+							return cn("gap-4", local.class);
+						}
+					}, rest, { get children() {
+						return [createComponent(DialogHeader, { get children() {
+							return [createComponent(DialogTitle, {
+								"class": "flex items-center gap-2",
+								get children() {
+									return [createComponent(Show, {
+										get when() {
+											return local.headerLeading;
+										},
+										get children() {
+											return local.headerLeading;
+										}
+									}), memo(() => local.title)];
+								}
+							}), createComponent(Show, {
+								get when() {
+									return local.description;
+								},
+								get children() {
+									return createComponent(DialogDescription, { get children() {
+										return local.description;
+									} });
+								}
+							})];
+						} }), memo(() => local.children)];
+					} }));
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { ModalDialog };
+
+//# sourceMappingURL=modal-dialog.js.map

package/dist/components/ui/modal-dialog/modal-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-dialog.js","names":["ComponentProps","JSX","Show","createEffect","createSignal","onCleanup","splitProps","cn","Dialog","DialogContent","DialogDescription","DialogHeader","DialogTitle","ModalDialogProps","Omit","open","onClose","title","description","headerLeading","Element","children","ModalDialog","props","local","rest","content","setContent","HTMLElement","element","background","document","body","filter","child","contains","wasInert","map","node","hasAttribute","setAttribute","forEach","index","removeAttribute","_$createComponent","when","onOpenChange","next","_$mergeProps","ref","class","_$memo","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/modal-dialog/modal-dialog.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { Show, createEffect, createSignal, onCleanup, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '../dialog/dialog'\n\n/**\n * ModalDialog.\n *\n * A dialog that owns three things `Dialog` leaves to its caller, each of which is a\n * real defect when it is missed:\n *\n *   1. **It unmounts while closed.** An always-mounted dialog that closes as a side\n *      effect of an async action can leave Kobalte's `aria-hidden` bookkeeping behind,\n *      which hides the rest of the application from assistive technology. Unmounting\n *      the whole owner makes cleanup the only way the layer can end.\n *   2. **It marks the background `inert`.** `inert` keeps the background out of the\n *      tab order and the accessibility tree without depending on that bookkeeping, and\n *      it restores exactly the elements that did not already have it — so a nested\n *      dialog does not un-inert its parent.\n *   3. **It labels itself explicitly.** The title registers its id for\n *      `aria-labelledby` in a mount effect; if that registration is ever lost, the\n *      dialog renders with a heading and no name. Passing the label as well costs\n *      nothing and removes the race.\n *\n * Use `Dialog` directly when you need its composition; use this when you want a\n * dialog that is correct by default.\n */\nexport type ModalDialogProps = Omit<ComponentProps<typeof DialogContent>, 'children'> & {\n  open: boolean\n  onClose: () => void\n  title: string\n  description?: string\n  /** A mark or icon drawn before the title. */\n  headerLeading?: JSX.Element\n  children?: JSX.Element\n}\n\nexport function ModalDialog(props: ModalDialogProps) {\n  const [local, rest] = splitProps(props, [\n    'open',\n    'onClose',\n    'title',\n    'description',\n    'headerLeading',\n    'class',\n    'children',\n  ])\n\n  const [content, setContent] = createSignal<HTMLElement>()\n\n  createEffect(() => {\n    if (!local.open) return\n    const element = content()\n    if (!element) return\n\n    const background = [...document.body.children].filter(\n      (child): child is HTMLElement => child instanceof HTMLElement && !child.contains(element)\n    )\n    const wasInert = background.map((node) => node.hasAttribute('inert'))\n    for (const node of background) node.setAttribute('inert', '')\n\n    onCleanup(() => {\n      background.forEach((node, index) => {\n        // Only the elements that were not already inert are restored, so a nested\n        // dialog closing does not undo its parent's containment.\n        if (!wasInert[index]) node.removeAttribute('inert')\n      })\n    })\n  })\n\n  return (\n    <Show when={local.open}>\n      <Dialog open onOpenChange={(next) => !next && local.onClose()}>\n        <DialogContent ref={setContent} class={cn('gap-4', local.class)} {...rest}>\n          <DialogHeader>\n            <DialogTitle class=\"flex items-center gap-2\">\n              <Show when={local.headerLeading}>{local.headerLeading}</Show>\n              {local.title}\n            </DialogTitle>\n            <Show when={local.description}>\n              <DialogDescription>{local.description}</DialogDescription>\n            </Show>\n          </DialogHeader>\n          {local.children}\n        </DialogContent>\n      </Dialog>\n    </Show>\n  )\n}\n"],"mappings":";;;;;AA2CA,SAAgBsB,YAAYC,OAAyB;CACnD,MAAM,CAACC,OAAOC,QAAQnB,WAAWiB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,MAAM,CAACG,SAASC,cAAcvB,aAA0B;CAExDD,mBAAmB;EACjB,IAAI,CAACqB,MAAMT,MAAM;EACjB,MAAMc,UAAUH,QAAQ;EACxB,IAAI,CAACG,SAAS;EAEd,MAAMC,aAAa,CAAC,GAAGC,SAASC,KAAKX,QAAQ,CAAC,CAACY,QAC5CC,UAAgCA,iBAAiBN,eAAe,CAACM,MAAMC,SAASN,OAAO,CAC1F;EACA,MAAMO,WAAWN,WAAWO,KAAKC,SAASA,KAAKC,aAAa,OAAO,CAAC;EACpE,KAAK,MAAMD,QAAQR,YAAYQ,KAAKE,aAAa,SAAS,EAAE;EAE5DnC,gBAAgB;GACdyB,WAAWW,SAASH,MAAMI,UAAU;IAGlC,IAAI,CAACN,SAASM,QAAQJ,KAAKK,gBAAgB,OAAO;GACpD,CAAC;EACH,CAAC;CACH,CAAC;CAED,OAAAC,gBACG1C,MAAI;EAAA,IAAC2C,OAAI;GAAA,OAAErB,MAAMT;EAAI;EAAA,IAAAM,WAAA;GAAA,OAAAuB,gBACnBpC,QAAM;IAACO,MAAI;IAAC+B,eAAeC,SAAS,CAACA,QAAQvB,MAAMR,QAAQ;IAAC,IAAAK,WAAA;KAAA,OAAAuB,gBAC1DnC,eAAauC,WAAA;MAAAC,KAAMtB;MAAU,KAAA,WAAA;OAAA,OAASpB,GAAG,SAASiB,MAAM0B,KAAK;MAAC;KAAA,GAAMzB,MAAI,EAAA,IAAAJ,WAAA;MAAA,OAAA,CAAAuB,gBACtEjC,cAAY,EAAA,IAAAU,WAAA;OAAA,OAAA,CAAAuB,gBACVhC,aAAW;QAAA,SAAA;QAAA,IAAAS,WAAA;SAAA,OAAA,CAAAuB,gBACT1C,MAAI;UAAA,IAAC2C,OAAI;WAAA,OAAErB,MAAML;UAAa;UAAA,IAAAE,WAAA;WAAA,OAAGG,MAAML;UAAa;SAAA,CAAA,GAAAgC,WACpD3B,MAAMP,KAAK,CAAA;QAAA;OAAA,CAAA,GAAA2B,gBAEb1C,MAAI;QAAA,IAAC2C,OAAI;SAAA,OAAErB,MAAMN;QAAW;QAAA,IAAAG,WAAA;SAAA,OAAAuB,gBAC1BlC,mBAAiB,EAAA,IAAAW,WAAA;UAAA,OAAEG,MAAMN;SAAW,EAAA,CAAA;QAAA;OAAA,CAAA,CAAA;MAAA,EAAA,CAAA,GAAAiC,WAGxC3B,MAAMH,QAAQ,CAAA;KAAA,EAAA,CAAA,CAAA;IAAA;GAAA,CAAA;EAAA;CAAA,CAAA;AAKzB"}

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

@@ -0,0 +1,2 @@
+export { NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, type NavigationMenuItemProps, type NavigationMenuProps, } from './navigation-menu';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,GACzB,MAAM,mBAAmB,CAAA"}

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

@@ -0,0 +1,77 @@
+import { type ComponentProps, type JSX } from 'solid-js';
+import * as KobalteNavigationMenu from '@kobalte/core/navigation-menu';
+/**
+ * NavigationMenu.
+ *
+ * A site-style menu bar: top-level triggers that open panels of links. It is the
+ * header pattern — a documentation site, a marketing page, an application with
+ * several top-level destinations — and it is deliberately *not* a `Menubar`.
+ * `Menubar` is a row of application menus (File, Edit, View) whose items are
+ * commands; this is a row of destinations whose panels are links. The two have
+ * different roles, different keyboard models, and different semantics.
+ *
+ * ## Composition
+ *
+ * Kobalte's primitive has an unusual shape, and getting it wrong is why this took
+ * three attempts to port. The structure is:
+ *
+ * ```tsx
+ * <NavigationMenu>
+ *   <NavigationMenuMenu>
+ *     <NavigationMenuTrigger>Destinations</NavigationMenuTrigger>
+ *     <NavigationMenuContent>
+ *       <NavigationMenuItem href="/x">X</NavigationMenuItem>
+ *     </NavigationMenuContent>
+ *   </NavigationMenuMenu>
+ *   <NavigationMenuViewport />
+ * </NavigationMenu>
+ * ```
+ *
+ * Three facts that are not obvious from the prop types:
+ *
+ * - `Menu` renders **nothing**. It is a context provider — one per top-level
+ *   entry, naming it so the bar's arrow keys can move between entries. A menu
+ *   without one cannot be reached by keyboard.
+ * - `Trigger` renders `<li role="presentation"><button>`. It is already the list
+ *   item, so wrapping it in your own `<li>` produces a `<ul>` inside a `<ul>`.
+ * - `Content` must be a direct child of `Menu`, and the `Viewport` is a **sibling
+ *   of the menus** — not inside them. All the panels share one viewport, which is
+ *   what lets the bar animate between them instead of each panel popping in place.
+ *
+ * The wrapper enforces the last of those by rendering the `Viewport` itself, so a
+ * caller cannot forget it and get a menu whose panels never appear.
+ */
+export type NavigationMenuProps = ComponentProps<typeof KobalteNavigationMenu.Root> & {
+    /** The accessible name for the navigation landmark. */
+    label?: string;
+};
+export declare function NavigationMenu(props: NavigationMenuProps): JSX.Element;
+/**
+ * One top-level entry. Renders nothing itself — see the note above — and exists
+ * so a caller cannot build a bar whose entries the keyboard cannot reach.
+ */
+export declare function NavigationMenuMenu(props: ComponentProps<typeof KobalteNavigationMenu.Menu>): JSX.Element;
+export declare function NavigationMenuTrigger(props: ComponentProps<typeof KobalteNavigationMenu.Trigger>): JSX.Element;
+export declare function NavigationMenuContent(props: ComponentProps<typeof KobalteNavigationMenu.Content>): JSX.Element;
+/**
+ * The shared panel surface. One per menu bar, and the wrapper supplies it — but
+ * exported so a caller with an unusual layout can place it themselves.
+ */
+export declare function NavigationMenuViewport(props: ComponentProps<typeof KobalteNavigationMenu.Viewport>): JSX.Element;
+/**
+ * A link inside a panel. `href` is the point of the component, so it is a link
+ * rather than a button — and the accessible name comes from its text, which is
+ * why there is no `aria-label` here.
+ */
+export type NavigationMenuItemProps = ComponentProps<typeof KobalteNavigationMenu.Item> & {
+    /** A one-line description, shown under the label. */
+    description?: string;
+    /** A leading icon. */
+    icon?: JSX.Element;
+};
+export declare function NavigationMenuItem(props: NavigationMenuItemProps): JSX.Element;
+export declare function NavigationMenuSeparator(props: ComponentProps<typeof KobalteNavigationMenu.Separator>): JSX.Element;
+/** A non-interactive caption above a group of items. */
+export declare function NavigationMenuGroupLabel(props: ComponentProps<typeof KobalteNavigationMenu.GroupLabel>): JSX.Element;
+export declare function NavigationMenuGroup(props: ComponentProps<typeof KobalteNavigationMenu.Group>): JSX.Element;
+//# sourceMappingURL=navigation-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation-menu/navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AACpE,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAA;AAKtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;IACpF,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAsBxD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,eAE1F;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,eAuBhG;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,eAkBhG;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,QAAQ,CAAC,eAyB7D;AAED;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;IACxF,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAoBhE;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,SAAS,CAAC,eAS9D;AAED,wDAAwD;AACxD,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,UAAU,CAAC,eAa/D;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,KAAK,CAAC,eAG5F"}

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

@@ -0,0 +1,116 @@
+import { cn } from "../../../lib/utils.js";
+import { menuItem, overlayMotion, overlaySurface } from "../../../lib/overlay.js";
+import { className, createComponent, effect, insert, memo, mergeProps, template } from "solid-js/web";
+import { ChevronDown } from "lucide-solid";
+import { splitProps } from "solid-js";
+import * as KobalteNavigationMenu from "@kobalte/core/navigation-menu";
+//#region src/components/ui/navigation-menu/navigation-menu.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class=font-medium>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span class="col-start-2 text-xs text-muted-foreground">`);
+function NavigationMenu(props) {
+	const [local, rest] = splitProps(props, [
+		"label",
+		"class",
+		"children"
+	]);
+	return createComponent(KobalteNavigationMenu.Root, mergeProps({
+		get ["class"]() {
+			return cn("relative flex max-w-max flex-1 items-center justify-center", "[&>nav>ul]:flex [&>nav>ul]:items-center [&>nav>ul]:gap-1", local.class);
+		},
+		get ["aria-label"]() {
+			return local.label ?? "Main";
+		}
+	}, rest, { get children() {
+		return [memo(() => local.children), createComponent(NavigationMenuViewport, {})];
+	} }));
+}
+/**
+* One top-level entry. Renders nothing itself — see the note above — and exists
+* so a caller cannot build a bar whose entries the keyboard cannot reach.
+*/
+function NavigationMenuMenu(props) {
+	return createComponent(KobalteNavigationMenu.Menu, props);
+}
+function NavigationMenuTrigger(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return createComponent(KobalteNavigationMenu.Trigger, mergeProps({ get ["class"]() {
+		return cn("inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground", "transition-colors ease-out outline-none select-none", "hover:bg-muted hover:text-foreground", "data-[expanded]:bg-muted data-[expanded]:text-foreground", "data-[highlighted]:bg-muted data-[highlighted]:text-foreground", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", local.class);
+	} }, rest, { get children() {
+		return [memo(() => local.children), createComponent(ChevronDown, {
+			"aria-hidden": "true",
+			"class": "size-3.5 transition-transform duration-200 ease-out [[data-expanded]_&]:rotate-180"
+		})];
+	} }));
+}
+function NavigationMenuContent(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	return createComponent(KobalteNavigationMenu.Content, mergeProps({ get ["class"]() {
+		return cn("grid w-max gap-1 p-2", "data-[wide]:grid-cols-2", local.class);
+	} }, rest, { get children() {
+		return local.children;
+	} }));
+}
+/**
+* The shared panel surface. One per menu bar, and the wrapper supplies it — but
+* exported so a caller with an unusual layout can place it themselves.
+*/
+function NavigationMenuViewport(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(KobalteNavigationMenu.Viewport, mergeProps({ get ["class"]() {
+		return cn("absolute top-full left-0 isolate z-(--z-menu) mt-1.5 flex justify-center overflow-hidden", "h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width)", "origin-top transition-[width,height] duration-200 ease-out", local.class);
+	} }, rest, { get children() {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(KobalteNavigationMenu.Content, {}));
+		effect(() => className(_el$, cn(overlaySurface, overlayMotion, "w-full rounded-lg border border-border bg-popover p-1 shadow-lg")));
+		return _el$;
+	} }));
+}
+function NavigationMenuItem(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"description",
+		"icon"
+	]);
+	return createComponent(KobalteNavigationMenu.Item, mergeProps({ get ["class"]() {
+		return cn(menuItem, "grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5", local.description && "grid-rows-[auto_auto] py-2", local.class);
+	} }, rest, { get children() {
+		return [
+			memo(() => local.icon),
+			(() => {
+				var _el$2 = _tmpl$2();
+				insert(_el$2, () => local.children);
+				return _el$2;
+			})(),
+			memo(() => memo(() => !!local.description)() && (() => {
+				var _el$3 = _tmpl$3();
+				insert(_el$3, () => local.description);
+				return _el$3;
+			})())
+		];
+	} }));
+}
+function NavigationMenuSeparator(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(KobalteNavigationMenu.Separator, mergeProps({ get ["class"]() {
+		return cn("-mx-1 my-1 h-px bg-border", local.class);
+	} }, rest));
+}
+/** A non-interactive caption above a group of items. */
+function NavigationMenuGroupLabel(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(KobalteNavigationMenu.GroupLabel, mergeProps({ get ["class"]() {
+		return cn("p-1", "text-2xs font-semibold text-muted-foreground uppercase", local.class);
+	} }, rest));
+}
+function NavigationMenuGroup(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return createComponent(KobalteNavigationMenu.Group, mergeProps({ get ["class"]() {
+		return cn("grid gap-0.5", local.class);
+	} }, rest));
+}
+//#endregion
+export { NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport };
+
+//# sourceMappingURL=navigation-menu.js.map