asheeui 0.7.0 → 1.1.0

package/dist/components/multi-select/MultiSelect.js

@@ -1,15 +1,15 @@
 "use client";
 "use client";
 import { cn as e } from "../../utils/cn.js";
-import { useAsheeConfig as t } from "../../libs/context.js";
-import { ChevronDownIcon as n } from "../../icons/ChevronDownIcon.js";
-import { RADIUS_CLASS as ee } from "../../shared/radius.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
+import { ChevronDownIcon as ee } from "../../icons/ChevronDownIcon.js";
 import { resolveCascade as r, resolveClassKey as i, resolveRadiusKey as a } from "../../utils/resolve-token.js";
-import { FieldShell as te } from "../field/FieldShell.js";
-import { Button as ne } from "../button/Button.js";
-import { SelectMenu as o } from "../select-menu/SelectMenu.js";
-import { useSelectFloating as s } from "../select-menu/use-select-floating.js";
-import { CloseIcon as re } from "../../icons/CloseIcon.js";
+import { CloseIcon as te } from "../../icons/CloseIcon.js";
+import { FieldShell as ne } from "../field/FieldShell.js";
+import { Button as o } from "../button/Button.js";
+import { Menu as s } from "../menu/Menu.js";
+import { useMenuFloating as re } from "../menu/use-menu-floating.js";
 import { Chip as ie } from "../chip/Chip.js";
 import { FALLBACK_MULTI_SELECT_CONFIG as c } from "./multi-select-config.js";
 import { MULTI_SELECT_FONT_CLASS as ae, MULTI_SELECT_HEIGHT_CLASS as oe, MULTI_SELECT_PADDING_CLASS as se, STATUS_BORDER_CLASS as ce } from "./multi-select-styles.js";
@@ -17,127 +17,140 @@ import { forwardRef as l, useCallback as u, useId as d, useMemo as f, useState a
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useClick as le, useDismiss as ue, useInteractions as de, useRole as fe } from "@floating-ui/react";
 //#region src/components/multi-select/MultiSelect.tsx
-var _ = l(({ options: l = [], value: _, onChange: v, InputLabel: y = "Select Options...", isSearch: pe = !0, searchPlaceholder: me = "Search...", searchInputName: he = "multiselect-search", belowList: ge, chipOptions: b, handleRemoveChip: x, handleAddChip: S, chipLabel: C, disableChipDisplay: w = !1, variant: T, color: E, size: D, radius: O, status: k, label: A, labelAlign: j, description: M, message: N, required: P, isLoading: F, disabled: I, containerClassName: L, id: _e, className: ve, menu: ye, chip: R, style: be, startContent: xe, endContent: Se }, z) => {
-	let B = t(), V = B.components?.multiSelect, Ce = d(), H = _e ?? Ce, [U, we] = p(!1), [Te, Ee] = p(""), W = r(D, V?.size, void 0, c.size), De = r(T, V?.variant, B.defaultVariant, c.variant), G = r(E, V?.color, B.defaultColor, c.color), K = a(O, V?.radius, B.defaultRadius, c.radius), Oe = R?.className, ke = r(R?.color, V?.chip?.color, G, c.chip.color), Ae = r(R?.size, V?.chip?.size, void 0, c.chip.size), je = a(R?.radius, V?.chip?.radius, K, c.chip.radius), q = k ?? c.status, Me = q === "error" ? "danger" : q === "success" ? "success" : q === "warning" ? "warning" : G, Ne = r(j, V?.labelAlign, void 0, c.labelAlign), Pe = i(W, oe, c.size), Fe = i(W, se, c.size), Ie = i(W, ae, c.size), Le = i(je, ee, c.chip.radius), { refs: J, context: Y, isPositioned: X, floatingStyles: Re } = s({
-		isOpen: U,
-		onOpenChange: we,
-		disabled: I
-	}), ze = le(Y, { enabled: !I }), Be = ue(Y), Ve = fe(Y, { role: "listbox" }), { getReferenceProps: He, getFloatingProps: Ue } = de([
-		ze,
-		Be,
-		Ve
-	]), Z = f(() => b === void 0 ? Array.isArray(_) ? l.filter((e) => _.includes(e.value)) : [] : b, [
+var _ = l(({ options: l = [], value: _, onChange: v, InputLabel: y = "Dropmenu Options...", isSearch: pe = !0, searchPlaceholder: me = "Search...", searchInputName: he = "multiselect-search", belowList: ge, chipOptions: b, handleRemoveChip: x, handleAddChip: S, chipLabel: C, disableChipDisplay: _e = !1, variant: ve, color: ye, size: be, radius: xe, status: Se, label: w, labelAlign: T, description: E, message: D, required: O, isLoading: k, disabled: A, containerClassName: j, id: Ce, className: we, menu: Te, chip: M, style: Ee, startContent: De, endContent: Oe }, N) => {
+	let P = n(), F = P.components?.multiSelect, ke = d(), I = Ce ?? ke, [L, R] = p(!1), [Ae, je] = p(""), [Me, z] = p([]), B = _ !== void 0, V = _ ?? Me, H = r(be, F?.size, void 0, c.size), Ne = r(ve, F?.variant, P.defaultVariant, c.variant), U = r(ye, F?.color, P.defaultColor, c.color), W = a(xe, F?.radius, P.defaultRadius, c.radius), Pe = M?.className, Fe = r(M?.color, F?.chip?.color, U, c.chip.color), Ie = r(M?.size, F?.chip?.size, void 0, c.chip.size), Le = a(M?.radius, F?.chip?.radius, W, c.chip.radius), G = Se ?? c.status, Re = G === "error" ? "danger" : G === "success" ? "success" : G === "warning" ? "warning" : U, ze = r(T, F?.labelAlign, void 0, c.labelAlign), Be = i(H, oe, c.size), Ve = i(H, se, c.size), He = i(H, ae, c.size), Ue = i(Le, t, c.chip.radius), { refs: K, context: q, isPositioned: We, floatingStyles: Ge } = re({
+		isOpen: L,
+		onOpenChange: R,
+		disabled: A
+	}), Ke = le(q, { enabled: !A }), qe = ue(q), Je = fe(q, { role: "listbox" }), { getReferenceProps: Ye, getFloatingProps: J } = de([
+		Ke,
+		qe,
+		Je
+	]), Y = f(() => b === void 0 ? l.filter((e) => V.includes(e.value)) : b, [
 		b,
-		_,
+		V,
 		l
-	]), Q = u((e) => Z.some((t) => t.value === e), [Z]), We = u((e) => {
-		let t = Q(e.value);
-		if (S || x) t ? x?.(e.value) : S?.(e);
-		else if (v) {
-			let n = _ ?? [];
-			v(t ? n.filter((t) => t !== e.value) : [...n, e.value]);
+	]), X = u((e) => Y.some((t) => t.value === e), [Y]), Xe = u((e) => {
+		let t = X(e.value);
+		if (S || x) {
+			t ? x?.(e.value) : S?.(e);
+			return;
 		}
+		let n = t ? V.filter((t) => t !== e.value) : [...V, e.value];
+		B || z(n), v?.(n);
 	}, [
-		Q,
+		X,
 		S,
 		x,
+		B,
 		v,
-		_
-	]), $ = u((e) => {
-		x ? x(e) : v && Array.isArray(_) && v(_.filter((t) => t !== e));
+		V
+	]), Z = u((e) => {
+		if (x) {
+			x(e);
+			return;
+		}
+		let t = V.filter((t) => t !== e);
+		B || z(t), v?.(t);
 	}, [
 		x,
+		B,
 		v,
-		_
-	]), Ge = f(() => Z.map((e) => e.value), [Z]), Ke = f(() => Z.length > 0 ? `${Z.length} selected` : y, [Z.length, y]), qe = He();
-	return /* @__PURE__ */ h(te, {
-		id: H,
-		label: A,
-		labelAlign: Ne,
-		description: M,
-		descriptionId: M ? `${H}-description` : void 0,
-		message: N,
-		messageId: N ? `${H}-message` : void 0,
-		status: q,
-		required: P,
-		isLoading: F,
+		V
+	]), Ze = f(() => Y.map((e) => e.value), [Y]), Qe = f(() => Y.length > 0 ? `${Y.length} selected` : y, [Y.length, y]), Q = E ? `${I}-description` : void 0, $ = D ? `${I}-message` : void 0, $e = [Q, $].filter(Boolean).join(" ") || void 0, et = Ye({ onKeyDown: u((e) => {
+		A || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), R(!0));
+	}, [A]) });
+	return /* @__PURE__ */ h(ne, {
+		id: I,
+		label: w,
+		labelAlign: ze,
+		description: E,
+		descriptionId: Q,
+		message: D,
+		messageId: $,
+		status: G,
+		required: O,
+		isLoading: k,
 		children: /* @__PURE__ */ g("div", {
-			className: e("w-full flex flex-col gap-3", L),
-			style: be,
+			className: e("w-full flex flex-col gap-3", j),
+			style: Ee,
 			children: [/* @__PURE__ */ g("div", {
 				className: "relative w-full",
-				children: [/* @__PURE__ */ h(ne, {
+				children: [/* @__PURE__ */ h(o, {
 					ref: (e) => {
-						J.setReference(e), typeof z == "function" ? z(e) : z && (z.current = e);
+						K.setReference(e), typeof N == "function" ? N(e) : N && (N.current = e);
 					},
 					type: "button",
-					variant: De,
-					color: Me,
-					size: W,
-					radius: K,
-					isDisabled: I,
-					isLoading: F,
+					id: I,
+					variant: Ne,
+					color: Re,
+					size: H,
+					radius: W,
+					isDisabled: A,
+					isLoading: k,
 					fullWidth: !0,
 					animate: !1,
-					"aria-expanded": U,
+					"aria-expanded": L,
 					"aria-haspopup": "listbox",
-					"aria-invalid": q === "error",
-					"aria-describedby": [M ? `${H}-description` : void 0].filter(Boolean).join(" ") || void 0,
-					className: e("font-normal text-left justify-between", ce[q], Pe, Fe, Ie, ve),
-					startContent: xe,
-					endContent: /* @__PURE__ */ g(m, { children: [Se, /* @__PURE__ */ h(n, { className: e("shrink-0 text-foreground/70 transition-transform duration-200", U && "rotate-180") })] }),
-					...qe,
+					"aria-invalid": G === "error",
+					"aria-describedby": $e,
+					className: e("font-normal text-left justify-between", ce[G], Be, Ve, He, we),
+					startContent: De,
+					endContent: /* @__PURE__ */ g(m, { children: [Oe, /* @__PURE__ */ h(ee, { className: e("shrink-0 text-foreground/70 transition-transform duration-200", L && "rotate-180") })] }),
+					...et,
 					children: /* @__PURE__ */ h("span", {
-						className: e("truncate", Z.length > 0 ? "text-foreground" : "text-foreground/70"),
-						children: Ke
+						className: e("truncate", Y.length > 0 ? "text-foreground" : "text-foreground/70"),
+						children: Qe
 					})
-				}), /* @__PURE__ */ h(o, {
-					isOpen: U,
-					floatingStyles: Re,
-					context: Y,
-					getFloatingProps: Ue,
-					setFloatingRef: J.setFloating,
-					isPositioned: X,
+				}), /* @__PURE__ */ h(s, {
+					isOpen: L,
+					floatingStyles: Ge,
+					context: q,
+					getFloatingProps: J,
+					setFloatingRef: K.setFloating,
+					isPositioned: We,
+					isMultiSelectable: !0,
+					returnFocus: !0,
 					options: l,
-					selectedValues: Ge,
-					onSelectMenuOption: We,
+					selectedValues: Ze,
+					onOptionSelect: Xe,
 					isSearch: pe,
 					searchPlaceholder: me,
 					searchInputName: he,
-					searchQuery: Te,
-					onSearchChange: Ee,
+					searchQuery: Ae,
+					onSearchChange: je,
 					belowList: ge,
-					menuProps: ye,
-					menuConfig: V?.menu
+					menuProps: Te,
+					menuConfig: F?.menu
 				})]
-			}), !w && /* @__PURE__ */ g("div", {
+			}), !_e && /* @__PURE__ */ g("div", {
 				className: "flex flex-col gap-1.5",
 				children: [C && /* @__PURE__ */ h("span", {
 					className: "text-xs font-medium text-foreground/70",
 					children: C
 				}), /* @__PURE__ */ h("div", {
 					className: "flex flex-wrap gap-1.5 p-2 min-h-12 bg-secondary/20 border border-dashed border-border rounded-lg items-center",
-					children: Z.length === 0 ? /* @__PURE__ */ h("span", {
+					children: Y.length === 0 ? /* @__PURE__ */ h("span", {
 						className: "text-xs text-foreground/70 px-2 py-1",
 						children: "No selections made"
-					}) : Z.map((t) => /* @__PURE__ */ g(ie, {
+					}) : Y.map((t) => /* @__PURE__ */ g(ie, {
 						variant: "bordered",
-						color: ke,
-						size: Ae,
-						isDisabled: I,
-						className: e("inline-flex items-center gap-1.5 font-medium shadow-xs", Le, Oe),
+						color: Fe,
+						size: Ie,
+						isDisabled: A,
+						className: e("inline-flex items-center gap-1.5 font-medium shadow-xs", Ue, Pe),
 						children: [/* @__PURE__ */ h("span", { children: t.label }), /* @__PURE__ */ h("button", {
 							type: "button",
-							tabIndex: I ? -1 : 0,
+							tabIndex: A ? -1 : 0,
 							onClick: (e) => {
-								e.stopPropagation(), I || $(t.value);
+								e.stopPropagation(), A || Z(t.value);
 							},
 							onKeyDown: (e) => {
-								(e.key === "Enter" || e.key === " ") && !I && (e.stopPropagation(), $(t.value));
+								(e.key === "Enter" || e.key === " ") && !A && (e.stopPropagation(), Z(t.value));
 							},
 							"aria-label": `Remove ${t.label}`,
-							className: "inline-flex items-center justify-center h-3.5 w-3.5 rounded-full hover:bg-black/20 dark:hover:bg-white/20 transition-colors cursor-pointer shrink-0",
-							children: /* @__PURE__ */ h(re, { className: "w-3 h-3" })
+							className: "inline-flex items-center justify-center h-3.5 w-3.5 rounded-full hover:bg-foreground/20 transition-colors cursor-pointer shrink-0",
+							children: /* @__PURE__ */ h(te, { className: "w-3 h-3" })
 						})]
 					}, String(t.value)))
 				})]

package/dist/components/multi-select/multi-select-config.d.ts

@@ -1,6 +1,6 @@
 import { Color, Radius, Size, Variant } from '../../shared';
 import { InputConfig } from '../input';
-import { MenuConfig } from '../select-menu';
+import { MenuConfig } from '../menu';
 /**
  * Configuration for selected value chips.
  * Controls the appearance of chips in the selected values section.

package/dist/components/multi-select/multi-select-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-config.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBAKtC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;CAQ/B,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}
+{"version":3,"file":"multi-select-config.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/multi-select-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBAKtC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;CAQ/B,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}

package/dist/components/navbar/Navbar.d.ts

@@ -0,0 +1,87 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { NavbarConfig } from './navbar-config';
+/**
+ * One destination in the bar.
+ */
+export interface NavbarLinkItem {
+    /** Stable identifier for the link. Defaults to its position in the list. */
+    id?: string | number;
+    /** Visible name of the link. */
+    label: ReactNode;
+    /** Destination of the link. */
+    href?: string;
+    /**
+     * Whether this link leads to the page currently shown.
+     * An active link is marked `aria-current="page"`, which is what tells
+     * assistive technology where the reader is, and is styled with emphasis as
+     * well.
+     */
+    isActive?: boolean;
+    /** Content before the label, typically an icon. */
+    icon?: ReactNode;
+    /** Component that replaces the anchor for this link only. */
+    component?: ElementType;
+    /** Additional props for that component. */
+    componentProps?: Record<string, unknown>;
+}
+/**
+ * Substitution applied to every link in the bar.
+ */
+export interface NavbarLink {
+    /** Component that replaces the anchor, such as a framework router link. */
+    component?: ElementType;
+    /** Additional props for that component. */
+    props?: Record<string, unknown>;
+}
+type BaseNavbarProps = NavbarConfig & Omit<HTMLAttributes<HTMLElement>, "color" | "title">;
+/**
+ * Props for the Navbar component.
+ */
+export interface NavbarProps extends BaseNavbarProps {
+    /** Brand content, typically a logo and a product name. */
+    brand?: ReactNode;
+    /** Destination of the brand. */
+    brandHref?: string;
+    /** The navigation links. */
+    links?: NavbarLinkItem[];
+    /** Actions shown at the trailing edge, typically a sign-in and a signup. */
+    actions?: ReactNode;
+    /** Substitution applied to every link the bar renders. */
+    link?: NavbarLink;
+    /**
+     * Name of the navigation landmark.
+     * Distinguishes this region from any other navigation on the page.
+     *
+     * @default "Main"
+     */
+    label?: string;
+    /**
+     * Accessible name of the control that opens the mobile panel.
+     *
+     * @default "Menu"
+     */
+    mobileLabel?: string;
+    /** Optional second row under the bar, for a search field or a toolbar. */
+    secondary?: ReactNode;
+    /**
+     * Whether the mobile panel is open, for a consumer that owns the state.
+     * Leave it unset to let the bar manage its own panel.
+     */
+    mobileOpen?: boolean;
+    /**
+     * Called when the mobile panel should open or close.
+     * A router-integration consumer uses it to close the panel after a
+     * navigation.
+     */
+    onMobileOpenChange?: (open: boolean) => void;
+    /**
+     * Element to render the bar as.
+     * Defaults to `header`, which is the banner landmark.
+     *
+     * @default "header"
+     */
+    as?: ElementType;
+}
+export declare const Navbar: import('react').ForwardRefExoticComponent<NavbarProps & import('react').RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=Navbar.d.ts.map

package/dist/components/navbar/Navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/Navbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,cAAc,EAEnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AASf,OAAO,EAA0B,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAiB5E;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAErB,gCAAgC;IAChC,KAAK,EAAE,SAAS,CAAC;IAEjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED,KAAK,eAAe,GAAG,YAAY,GACjC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,0DAA0D;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IAEzB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7C;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AA8FD,eAAO,MAAM,MAAM,qGAoJlB,CAAC"}

package/dist/components/navbar/Navbar.js

@@ -0,0 +1,117 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useAsheeConfig as t } from "../../libs/context.js";
+import { ChevronDownIcon as n } from "../../icons/ChevronDownIcon.js";
+import { resolveConfigCascade as r } from "../../utils/resolve-token.js";
+import { Button as i } from "../button/Button.js";
+import { Link as a } from "../link/Link.js";
+import { ChevronUpIcon as o } from "../../icons/ChevronUpIcon.js";
+import { Container as s } from "../container/Container.js";
+import { FALLBACK_NAVBAR_CONFIG as c } from "./navbar-config.js";
+import { NAVBAR_INNER_CLASS as l, NAVBAR_LINKS_CENTER_CLASS as u, NAVBAR_LINKS_CLASS as d, NAVBAR_LINKS_END_CLASS as f, NAVBAR_LINK_CLASS as p, NAVBAR_VARIANT_CLASS as m } from "./navbar-styles.js";
+import { forwardRef as h, useCallback as g, useId as _, useRef as v, useState as ee } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/navbar/Navbar.tsx
+function S({ id: t, links: n, link: r, className: i, onNavigate: o }) {
+	return /* @__PURE__ */ b("ul", {
+		id: t,
+		className: i,
+		children: n.map((t, n) => /* @__PURE__ */ b("li", { children: /* @__PURE__ */ b(a, {
+			href: t.href,
+			startIcon: t.icon,
+			component: t.component ?? r?.component,
+			componentProps: {
+				...r?.props,
+				...t.componentProps
+			},
+			"aria-current": t.isActive ? "page" : void 0,
+			onClick: o,
+			className: e(p, t.isActive && "bg-secondary/60 text-foreground"),
+			children: t.label
+		}) }, t.id ?? n))
+	});
+}
+var C = h(({ brand: p, brandHref: h, links: C, actions: w, link: T, label: E = "Main", mobileLabel: D = "Menu", secondary: O, mobileOpen: k, onMobileOpenChange: A, position: j, variant: M, align: N, contained: P, containerSize: F, as: I, className: L, children: R, ...z }, B) => {
+	let V = t(), H = r({
+		position: j,
+		variant: M,
+		align: N,
+		contained: P,
+		containerSize: F
+	}, V.components?.navbar, c), U = _(), W = v(null), [G, K] = ee(!1), q = k !== void 0, J = q ? k : G, Y = g((e) => {
+		q || K(e), A?.(e);
+	}, [q, A]), X = (e) => {
+		e.key === "Escape" && (Y(!1), W.current?.focus());
+	}, Z = H.align === "center" ? u : H.align === "end" ? f : d, Q = I ?? "header", te = /* @__PURE__ */ x("div", {
+		className: l,
+		children: [
+			p && /* @__PURE__ */ b("div", {
+				className: "flex shrink-0 items-center gap-2 font-semibold text-foreground",
+				children: h ? /* @__PURE__ */ b(a, {
+					href: h,
+					component: T?.component,
+					componentProps: T?.props,
+					className: "flex shrink-0 items-center gap-2 font-semibold text-foreground",
+					children: p
+				}) : p
+			}),
+			C && C.length > 0 && /* @__PURE__ */ b("nav", {
+				"aria-label": E,
+				className: e("min-w-0", Z),
+				children: /* @__PURE__ */ b(S, {
+					links: C,
+					link: T,
+					className: "flex"
+				})
+			}),
+			C && C.length > 0 && /* @__PURE__ */ b(i, {
+				ref: W,
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				icon: !0,
+				className: "ml-auto md:hidden",
+				"aria-label": D,
+				"aria-expanded": J,
+				"aria-controls": U,
+				onClick: () => Y(!J),
+				children: b(J ? o : n, {})
+			}),
+			w && /* @__PURE__ */ b("div", {
+				className: "ml-auto flex shrink-0 items-center gap-2",
+				children: w
+			})
+		]
+	}), ne = J && C && C.length > 0 && /* @__PURE__ */ b("nav", {
+		"aria-label": E,
+		children: /* @__PURE__ */ b(S, {
+			id: U,
+			links: C,
+			link: T,
+			className: "flex flex-col gap-1 border-t border-border pb-3 pt-2 md:hidden",
+			onNavigate: () => Y(!1)
+		})
+	}), $ = /* @__PURE__ */ x(y, { children: [
+		te,
+		ne,
+		O && /* @__PURE__ */ b("div", {
+			className: "w-full border-t border-border py-2",
+			children: O
+		}),
+		R
+	] });
+	return /* @__PURE__ */ b(Q, {
+		ref: B,
+		className: e(m[H.variant], H.position === "sticky" && "sticky top-0 z-20", L),
+		onKeyDown: X,
+		...z,
+		children: H.contained ? /* @__PURE__ */ b(s, {
+			size: H.containerSize,
+			children: $
+		}) : $
+	});
+});
+C.displayName = "Navbar";
+//#endregion
+export { C as Navbar };

package/dist/components/navbar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Navbar';
+export * from './navbar-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC"}

package/dist/components/navbar/index.js

@@ -0,0 +1,3 @@
+export * from "./Navbar.js";
+export * from "./navbar-config.js";
+export * from "./navbar-styles.js";

package/dist/components/navbar/navbar-config.d.ts

@@ -0,0 +1,52 @@
+import { ContainerSize } from '../container/container-config';
+/**
+ * How the bar behaves when the page scrolls.
+ *
+ * - `static`: the bar scrolls away with the page.
+ * - `sticky`: the bar stays at the top of the viewport.
+ */
+export type NavbarPosition = "static" | "sticky";
+/**
+ * Surface treatment of the bar.
+ *
+ * - `solid`: the page background, so the bar reads as part of the page.
+ * - `ghost`: transparent, so the bar sits on a hero without adding a band.
+ * - `bordered`: the page background with a separator below it.
+ */
+export type NavbarVariant = "solid" | "ghost" | "bordered";
+/**
+ * Where the navigation links sit in the bar.
+ */
+export type NavbarAlign = "start" | "center" | "end";
+/**
+ * Theme configuration options for the Navbar component.
+ *
+ * Set under `components.navbar` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface NavbarConfig {
+    /** How the bar behaves when the page scrolls. @default "sticky" */
+    position?: NavbarPosition;
+    /** Surface treatment of the bar. @default "solid" */
+    variant?: NavbarVariant;
+    /** Where the navigation links sit. @default "start" */
+    align?: NavbarAlign;
+    /** Whether the bar wraps its content in a `Container`. @default true */
+    contained?: boolean;
+    /** Maximum content width of the bar. @default "lg" */
+    containerSize?: ContainerSize;
+}
+/**
+ * Default config values registered for the Navbar component.
+ */
+export declare const defaultNavbarConfig: NavbarConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        navbar: NavbarConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_NAVBAR_CONFIG: Required<NavbarConfig>;
+//# sourceMappingURL=navbar-config.d.ts.map

package/dist/components/navbar/navbar-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-config.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/navbar-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAErD;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,qDAAqD;IACrD,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,uDAAuD;IACvD,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sDAAsD;IACtD,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,YAMjC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,MAAM,EAAE,YAAY,CAAC;KACtB;CACF;AAID;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,QAAQ,CAAC,YAAY,CAMzD,CAAC"}

package/dist/components/navbar/navbar-config.js

@@ -0,0 +1,20 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/navbar/navbar-config.ts
+var t = {
+	position: "sticky",
+	variant: "solid",
+	align: "start",
+	contained: !0,
+	containerSize: "lg"
+};
+e("navbar", t);
+var n = {
+	position: "sticky",
+	variant: "solid",
+	align: "start",
+	contained: !0,
+	containerSize: "lg"
+};
+//#endregion
+export { n as FALLBACK_NAVBAR_CONFIG, t as defaultNavbarConfig };

package/dist/components/navbar/navbar-styles.d.ts

@@ -0,0 +1,28 @@
+import { NavbarVariant } from './navbar-config';
+/** Surface treatment classes. */
+export declare const NAVBAR_VARIANT_CLASS: Record<NavbarVariant, string>;
+/** Position classes. */
+export declare const NAVBAR_POSITION_CLASS = "sticky top-0 z-20";
+/** The bar's inner row. */
+export declare const NAVBAR_INNER_CLASS = "flex w-full items-center gap-4 py-3";
+/** The brand region. */
+export declare const NAVBAR_BRAND_CLASS = "flex shrink-0 items-center gap-2 font-semibold text-foreground";
+/** The desktop link list, next to the brand. */
+export declare const NAVBAR_LINKS_CLASS = "hidden items-center gap-1 md:flex";
+/** The desktop link list, centred in the bar. */
+export declare const NAVBAR_LINKS_CENTER_CLASS = "hidden flex-1 items-center justify-center gap-1 md:flex";
+/** The desktop link list, pushed to the trailing edge. */
+export declare const NAVBAR_LINKS_END_CLASS = "hidden flex-1 items-center justify-end gap-1 md:flex";
+/** One navigation link. */
+export declare const NAVBAR_LINK_CLASS = "rounded-xs px-3 py-2 text-sm font-medium text-foreground/70 transition-colors hover:bg-secondary/60 hover:text-foreground";
+/** The navigation link of the current page. */
+export declare const NAVBAR_LINK_ACTIVE_CLASS = "bg-secondary/60 text-foreground";
+/** The action region. */
+export declare const NAVBAR_ACTIONS_CLASS = "ml-auto flex shrink-0 items-center gap-2";
+/** The control that opens the mobile panel. */
+export declare const NAVBAR_TOGGLE_CLASS = "ml-auto md:hidden";
+/** The mobile panel, shown only on a narrow screen. */
+export declare const NAVBAR_MOBILE_PANEL_CLASS = "flex flex-col gap-1 border-t border-border pb-3 pt-2 md:hidden";
+/** The optional second row of the bar. */
+export declare const NAVBAR_SECONDARY_CLASS = "w-full border-t border-border py-2";
+//# sourceMappingURL=navbar-styles.d.ts.map

package/dist/components/navbar/navbar-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-styles.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/navbar-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,iCAAiC;AACjC,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAI9D,CAAC;AAEF,wBAAwB;AACxB,eAAO,MAAM,qBAAqB,sBAAsB,CAAC;AAEzD,2BAA2B;AAC3B,eAAO,MAAM,kBAAkB,wCAAwC,CAAC;AAExE,wBAAwB;AACxB,eAAO,MAAM,kBAAkB,mEACmC,CAAC;AAEnE,gDAAgD;AAChD,eAAO,MAAM,kBAAkB,sCAAsC,CAAC;AAEtE,iDAAiD;AACjD,eAAO,MAAM,yBAAyB,4DACqB,CAAC;AAE5D,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,yDACqB,CAAC;AAEzD,2BAA2B;AAC3B,eAAO,MAAM,iBAAiB,8HAC+F,CAAC;AAE9H,+CAA+C;AAC/C,eAAO,MAAM,wBAAwB,oCAAoC,CAAC;AAE1E,yBAAyB;AACzB,eAAO,MAAM,oBAAoB,6CAA6C,CAAC;AAE/E,+CAA+C;AAC/C,eAAO,MAAM,mBAAmB,sBAAsB,CAAC;AAEvD,uDAAuD;AACvD,eAAO,MAAM,yBAAyB,mEAC4B,CAAC;AAEnE,0CAA0C;AAC1C,eAAO,MAAM,sBAAsB,uCAAuC,CAAC"}

package/dist/components/navbar/navbar-styles.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/components/navbar/navbar-styles.ts
+var e = {
+	solid: "bg-background",
+	ghost: "bg-transparent",
+	bordered: "bg-background border-b border-border"
+}, t = "sticky top-0 z-20", n = "flex w-full items-center gap-4 py-3", r = "flex shrink-0 items-center gap-2 font-semibold text-foreground", i = "hidden items-center gap-1 md:flex", a = "hidden flex-1 items-center justify-center gap-1 md:flex", o = "hidden flex-1 items-center justify-end gap-1 md:flex", s = "rounded-xs px-3 py-2 text-sm font-medium text-foreground/70 transition-colors hover:bg-secondary/60 hover:text-foreground", c = "bg-secondary/60 text-foreground", l = "ml-auto flex shrink-0 items-center gap-2", u = "ml-auto md:hidden", d = "flex flex-col gap-1 border-t border-border pb-3 pt-2 md:hidden", f = "w-full border-t border-border py-2";
+//#endregion
+export { l as NAVBAR_ACTIONS_CLASS, r as NAVBAR_BRAND_CLASS, n as NAVBAR_INNER_CLASS, a as NAVBAR_LINKS_CENTER_CLASS, i as NAVBAR_LINKS_CLASS, o as NAVBAR_LINKS_END_CLASS, c as NAVBAR_LINK_ACTIVE_CLASS, s as NAVBAR_LINK_CLASS, d as NAVBAR_MOBILE_PANEL_CLASS, t as NAVBAR_POSITION_CLASS, f as NAVBAR_SECONDARY_CLASS, u as NAVBAR_TOGGLE_CLASS, e as NAVBAR_VARIANT_CLASS };