asheeui 0.7.0 → 1.1.0

package/dist/components/sidebar/Sidebar.js

@@ -1,149 +1,151 @@
 "use client";
 "use client";
 import { cn as e } from "../../utils/cn.js";
-import { useAsheeConfig as t } from "../../libs/context.js";
-import { RADIUS_CLASS as n } from "../../shared/radius.js";
-import { resolveVariantClass as r } from "../../shared/variant.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { resolveVariantClass as n } from "../../shared/variant.js";
+import { useAsheeConfig as r } from "../../libs/context.js";
 import { resolveCascade as i, resolveClassKey as a, resolveRadiusKey as o } from "../../utils/resolve-token.js";
 import { Button as s } from "../button/Button.js";
-import { ChevronLeftIcon as c } from "../../icons/ChevronLeftIcon.js";
-import { ChevronRightIcon as l } from "../../icons/ChevronRightIcon.js";
-import { ArrowLeftIcon as u } from "../../icons/ArrowLeftIcon.js";
-import { Tooltip as ee } from "../tooltip/Tooltip.js";
+import { ChevronRightIcon as c } from "../../icons/ChevronRightIcon.js";
+import { ChevronLeftIcon as ee } from "../../icons/ChevronLeftIcon.js";
+import { ArrowLeftIcon as l } from "../../icons/ArrowLeftIcon.js";
+import { Tooltip as u } from "../tooltip/Tooltip.js";
 import { FALLBACK_SIDEBAR_CONFIG as d } from "./sidebar-config.js";
-import { SIDEBAR_COLLAPSED_WIDTH_CLASS as te, SIDEBAR_EXPANDED_WIDTH_CLASS as ne, SIDEBAR_HEADER_CLASS as f, SIDEBAR_ITEM_CLASS as re, SIDEBAR_SECTION_LABEL_CLASS as ie, SIDEBAR_VARIANT_CLASS as p } from "./sidebar-styles.js";
-import { useCallback as m, useEffect as ae, useMemo as h, useState as oe } from "react";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { SIDEBAR_COLLAPSED_WIDTH_CLASS as te, SIDEBAR_EXPANDED_WIDTH_CLASS as ne, SIDEBAR_HEADER_CLASS as re, SIDEBAR_ITEM_CLASS as ie, SIDEBAR_SECTION_LABEL_CLASS as ae, SIDEBAR_VARIANT_CLASS as oe } from "./sidebar-styles.js";
+import { useCallback as f, useEffect as p, useMemo as m, useState as se } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/sidebar/Sidebar.tsx
-function y(e) {
+function v(e) {
 	return "items" in e && Array.isArray(e.items);
 }
-function b({ items: b, activeKey: se, onSelect: x, isCollapsed: S, onCollapseChange: C, title: w, onBack: T, backIcon: ce, userRole: E, footer: D, variant: le, size: ue, radius: de, options: O, showCollapseButton: k, collapsible: A, defaultCollapsed: j, tooltip: M, headerClassName: N, bodyClassName: P, sectionLabelClassName: F, footerClassName: I, anchorProps: L, link: R, className: z, style: B, ...V }) {
-	let H = t(), U = H.components?.sidebar, W = i(A, U?.collapsible, void 0, d.collapsible), G = i(k, U?.showCollapseButton, void 0, d.showCollapseButton), fe = i(j, U?.defaultCollapsed, void 0, d.defaultCollapsed), [pe, K] = oe(S ?? fe);
-	ae(() => {
-		S !== void 0 && K(S);
-	}, [S]);
-	let q = S ?? pe, me = m(() => {
-		if (!W) return;
-		let e = !q;
-		C ? C(e) : K(e);
+function y({ items: y, activeKey: ce, onSelect: b, isCollapsed: x, onCollapseChange: S, title: C, onBack: w, backIcon: le, userRole: T, footer: E, variant: ue, size: de, radius: fe, options: D, showCollapseButton: O, collapsible: k, defaultCollapsed: A, tooltip: j, headerClassName: M, bodyClassName: N, sectionLabelClassName: P, footerClassName: F, anchorProps: I, link: L, className: R, style: z, ...B }) {
+	let V = r(), H = V.components?.sidebar, U = i(k, H?.collapsible, void 0, d.collapsible), W = i(O, H?.showCollapseButton, void 0, d.showCollapseButton), pe = i(A, H?.defaultCollapsed, void 0, d.defaultCollapsed), [me, G] = se(x ?? pe);
+	p(() => {
+		x !== void 0 && G(x);
+	}, [x]);
+	let K = x ?? me, he = f(() => {
+		if (!U) return;
+		let e = !K;
+		x === void 0 && G(e), S?.(e);
 	}, [
-		q,
-		C,
-		W
-	]), J = i(ue, U?.size, void 0, d.size), he = i(le, U?.variant, void 0, d.variant), Y = (e) => e === "full" ? "xl" : e, ge = o(Y(de), Y(U?.radius), H.defaultRadius, d.radius), X = o(Y(O?.radius), Y(U?.options?.radius), H.defaultRadius, d.options.radius), Z = i(O?.inactive?.variant, U?.options?.inactive?.variant, H.defaultVariant, d.options.inactive.variant), _e = i(O?.inactive?.color, U?.options?.inactive?.color, void 0, d.options.inactive.color), ve = i(O?.active?.variant, U?.options?.active?.variant, H.defaultVariant, d.options.active.variant), ye = i(O?.active?.color, U?.options?.active?.color, H.defaultColor, d.options.active.color), be = r(ve, ye), xe = r(Z, _e), Se = i(M?.show, U?.tooltip?.show, void 0, d.tooltip.show), Ce = i(M?.placement, U?.tooltip?.placement, void 0, d.tooltip.placement), we = i(M?.variant, U?.tooltip?.variant, void 0, d.tooltip.variant), Te = i(M?.color, U?.tooltip?.color, void 0, d.tooltip.color), Q = b, $ = h(() => {
+		K,
+		x,
+		S,
+		U
+	]), q = i(de, H?.size, void 0, d.size), ge = i(ue, H?.variant, void 0, d.variant), J = (e) => e === "full" ? "xl" : e, _e = o(J(fe), J(H?.radius), V.defaultRadius, d.radius), Y = o(J(D?.radius), J(H?.options?.radius), V.defaultRadius, d.options.radius), X = i(D?.inactive?.variant, H?.options?.inactive?.variant, V.defaultVariant, d.options.inactive.variant), ve = i(D?.inactive?.color, H?.options?.inactive?.color, void 0, d.options.inactive.color), ye = i(D?.active?.variant, H?.options?.active?.variant, V.defaultVariant, d.options.active.variant), be = i(D?.active?.color, H?.options?.active?.color, V.defaultColor, d.options.active.color), xe = n(ye, be), Se = n(X, ve), Ce = i(j?.show, H?.tooltip?.show, void 0, d.tooltip.show), we = i(j?.placement, H?.tooltip?.placement, void 0, d.tooltip.placement), Z = i(j?.variant, H?.tooltip?.variant, void 0, d.tooltip.variant), Te = i(j?.color, H?.tooltip?.color, void 0, d.tooltip.color), Q = y, $ = m(() => {
 		if (!Q) return [];
 		let e = Q[0];
-		return e ? y(e) ? Q : [{
+		return e ? v(e) ? Q : [{
 			id: "__root",
 			label: void 0,
 			items: Q
 		}] : [];
-	}, [Q]), Ee = h(() => $.filter((e) => !e.roles || e.roles.length === 0 ? !0 : E ? e.roles.includes(E) : !1).map((e) => ({
+	}, [Q]), Ee = m(() => $.filter((e) => !e.roles || e.roles.length === 0 ? !0 : T ? e.roles.includes(T) : !1).map((e) => ({
 		...e,
-		items: e.items?.filter((e) => !e.roles || e.roles.length === 0 ? !0 : E ? e.roles.includes(E) : !1)
-	})).filter((e) => e.items && e.items.length > 0), [$, E]), De = m((e, t) => {
+		items: e.items?.filter((e) => !e.roles || e.roles.length === 0 ? !0 : T ? e.roles.includes(T) : !1)
+	})).filter((e) => e.items && e.items.length > 0), [$, T]), De = f((e, t) => {
 		if (t.disabled) {
 			e.preventDefault();
 			return;
 		}
-		x?.(t);
-	}, [x]), Oe = q ? te[J] : ne[J], ke = (t) => {
-		let r = t.id === se, i = e("w-full flex items-center gap-3 transition-all truncate no-underline", re[J], q ? "justify-center px-0" : "justify-start", r && "font-medium", r ? be : xe, t.disabled && "opacity-50 cursor-not-allowed pointer-events-none", a(Z === "underlined" ? "none" : X, n, d.options.radius), O?.itemClassName), o = R?.component || "a", s = {
-			href: t.disabled ? void 0 : t.href,
-			target: t.target,
-			rel: t.rel,
-			onClick: (e) => De(e, t),
+		b?.(t);
+	}, [b]), Oe = K ? te[q] : ne[q], ke = (n) => {
+		let r = n.id === ce, i = e("w-full flex items-center gap-3 transition-all truncate no-underline", ie[q], K ? "justify-center px-0" : "justify-start", r && "font-medium", r ? xe : Se, n.disabled && "opacity-50 cursor-not-allowed pointer-events-none", a(X === "underlined" ? "none" : Y, t, d.options.radius), D?.itemClassName), o = L?.component || "a", s = {
+			href: n.disabled ? void 0 : n.href,
+			target: n.target,
+			rel: n.rel,
+			"aria-current": r ? "page" : void 0,
+			onClick: (e) => De(e, n),
 			className: i,
-			...L,
-			...R?.props ?? {}
-		}, c = /* @__PURE__ */ v(o, {
+			...I,
+			...L?.props ?? {}
+		}, c = /* @__PURE__ */ _(o, {
 			...s,
-			children: [t.icon && /* @__PURE__ */ _("span", {
-				className: e("shrink-0 flex items-center justify-center", q && "w-full"),
-				children: t.icon
-			}), !q && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("span", {
+			children: [n.icon && /* @__PURE__ */ g("span", {
+				className: e("shrink-0 flex items-center justify-center", K && "w-full"),
+				children: n.icon
+			}), !K && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("span", {
 				className: "truncate flex-1 text-left",
-				children: t.label
-			}), t.badge && /* @__PURE__ */ _("span", {
+				children: n.label
+			}), n.badge && /* @__PURE__ */ g("span", {
 				className: "shrink-0",
-				children: t.badge
+				children: n.badge
 			})] })]
-		}, String(t.id));
-		return q && Se ? /* @__PURE__ */ _(ee, {
-			content: t.label,
-			placement: Ce,
-			variant: we,
+		}, String(n.id));
+		return K && Ce ? /* @__PURE__ */ g(u, {
+			content: n.label,
+			placement: we,
+			variant: Z,
 			color: Te,
-			radius: X,
+			radius: Y,
 			children: c
-		}, String(t.id)) : c;
-	}, Ae = (t) => !t.items || t.items.length === 0 ? null : /* @__PURE__ */ v("div", {
+		}, String(n.id)) : c;
+	}, Ae = (t) => !t.items || t.items.length === 0 ? null : /* @__PURE__ */ _("div", {
 		className: "flex flex-col gap-0.5",
-		children: [!q && t.label && /* @__PURE__ */ _("div", {
-			className: e("text-foreground/70 font-medium uppercase tracking-wider truncate", ie[J], F),
+		children: [!K && t.label && /* @__PURE__ */ g("div", {
+			className: e("text-foreground/70 font-medium uppercase tracking-wider truncate", ae[q], P),
 			children: t.label
 		}), t.items.map(ke)]
 	}, String(t.id));
-	return /* @__PURE__ */ v("aside", {
-		className: e("h-full flex flex-col transition-all duration-200 select-none shrink-0", Oe, p[he], a(ge, n, d.radius), z),
-		style: B,
-		...V,
+	return /* @__PURE__ */ _("aside", {
+		className: e("h-full flex flex-col transition-all duration-200 select-none shrink-0", Oe, oe[ge], a(_e, t, d.radius), R),
+		style: z,
+		...B,
 		children: [
-			(T || w) && /* @__PURE__ */ v("div", {
-				className: e("flex items-center gap-3 border-b border-border border-dashed shrink-0", f[J], q && "justify-center px-0", N),
-				children: [T && /* @__PURE__ */ _(s, {
+			(w || C) && /* @__PURE__ */ _("div", {
+				className: e("flex items-center gap-3 border-b border-border border-dashed shrink-0", re[q], K && "justify-center px-0", M),
+				children: [w && /* @__PURE__ */ g(s, {
 					icon: !0,
 					"aria-label": "Go back",
-					variant: Z,
+					variant: X,
 					color: "secondary",
-					size: J,
-					radius: X,
-					onClick: T,
+					size: q,
+					radius: Y,
+					onClick: w,
 					className: "shrink-0",
-					children: /* @__PURE__ */ _("span", {
+					children: /* @__PURE__ */ g("span", {
 						className: e("flex items-center justify-center transition-transform duration-200"),
-						children: ce ?? /* @__PURE__ */ _(u, { className: "size-4" })
+						children: le ?? /* @__PURE__ */ g(l, { className: "size-4" })
 					})
-				}), !q && w && /* @__PURE__ */ _("span", {
+				}), !K && C && /* @__PURE__ */ g("span", {
 					className: "font-semibold text-foreground truncate tracking-tight transition-opacity duration-200",
-					children: w
+					children: C
 				})]
 			}),
-			/* @__PURE__ */ _("nav", {
-				className: e("flex-1 overflow-y-auto py-3 px-2 flex flex-col gap-3 scrollable-hidden", P),
+			/* @__PURE__ */ g("nav", {
+				className: e("flex-1 overflow-y-auto py-3 px-2 flex flex-col gap-3 scrollable-hidden", N),
 				children: Ee.map(Ae)
 			}),
-			G && W && /* @__PURE__ */ v("div", {
-				className: e("border-t border-border shrink-0", q ? "p-2" : "p-3", I),
-				children: [!q && D && /* @__PURE__ */ _("div", {
+			W && U && /* @__PURE__ */ _("div", {
+				className: e("border-t border-border shrink-0", K ? "p-2" : "p-3", F),
+				children: [!K && E && /* @__PURE__ */ g("div", {
 					className: "mb-2",
-					children: D
-				}), /* @__PURE__ */ _(s, {
+					children: E
+				}), /* @__PURE__ */ g(s, {
 					icon: !0,
-					"aria-label": q ? "Expand sidebar" : "Collapse sidebar",
-					variant: Z,
+					"aria-label": K ? "Expand sidebar" : "Collapse sidebar",
+					variant: X,
 					color: "secondary",
-					size: J,
-					radius: X,
-					onClick: me,
-					className: e("w-full", q ? "justify-center px-0" : "justify-start"),
-					children: /* @__PURE__ */ _("span", {
+					size: q,
+					radius: Y,
+					onClick: he,
+					className: e("w-full", K ? "justify-center px-0" : "justify-start"),
+					children: /* @__PURE__ */ g("span", {
 						className: "flex items-center gap-2",
-						children: q ? /* @__PURE__ */ _(l, { className: "size-4" }) : /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(c, { className: "size-4" }), /* @__PURE__ */ _("span", {
+						children: K ? /* @__PURE__ */ g(c, { className: "size-4" }) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(ee, { className: "size-4" }), /* @__PURE__ */ g("span", {
 							className: "text-sm",
 							children: "Collapse"
 						})] })
 					})
 				})]
 			}),
-			!G && D && /* @__PURE__ */ _("div", {
-				className: e("border-t border-border shrink-0 p-3", I),
-				children: D
+			!W && E && /* @__PURE__ */ g("div", {
+				className: e("border-t border-border shrink-0 p-3", F),
+				children: E
 			})
 		]
 	});
 }
-b.displayName = "Sidebar";
+y.displayName = "Sidebar";
 //#endregion
-export { b as Sidebar };
+export { y as Sidebar };

package/dist/components/sidebar-layout/SidebarLayout.d.ts

@@ -0,0 +1,67 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { SidebarLayoutConfig } from './sidebar-layout-config';
+type BaseSidebarLayoutProps = SidebarLayoutConfig & Omit<HTMLAttributes<HTMLDivElement>, "color">;
+/**
+ * Props for the SidebarLayout component.
+ */
+export interface SidebarLayoutProps extends BaseSidebarLayoutProps {
+    /** The navigation column, typically the framework's `Sidebar`. */
+    sidebar: ReactNode;
+    /** Content above both columns, typically the framework's `Navbar`. */
+    header?: ReactNode;
+    /** Content below both columns. */
+    footer?: ReactNode;
+    /**
+     * Name of the navigation landmark the sidebar is rendered in.
+     * A shell usually holds one, so the name distinguishes it from the page's
+     * other navigation regions.
+     *
+     * @default "Sidebar"
+     */
+    sidebarLabel?: string;
+    /**
+     * Element to render the shell as.
+     * Defaults to a `div`.
+     *
+     * @default "div"
+     */
+    as?: ElementType;
+}
+/**
+ * An application shell with a persistent navigation column.
+ *
+ * The shell is a single column on a narrow screen and two columns from the `lg`
+ * breakpoint, with the navigation column sticky and independently scrollable on
+ * a wide screen. It deliberately stacks the navigation above the content on a
+ * narrow screen rather than hiding it behind an off-canvas drawer: the whole page
+ * then stays reachable with the keyboard, with no focus trap to get wrong.
+ *
+ * @param props - SidebarLayout configuration options and element attributes.
+ * @param props.sidebar - The navigation column.
+ * @param props.header - Content above both columns.
+ * @param props.footer - Content below both columns.
+ * @param props.sidebarLabel - Name of the navigation landmark. Defaults to
+ * "Sidebar".
+ * @param props.side - Side the navigation column sits on. Defaults to "start".
+ * @param props.sidebarWidth - Width of the navigation column. Defaults to "md".
+ * @param props.stickySidebar - Keep the column in view. Defaults to true.
+ * @param props.as - Element to render. Defaults to "div".
+ * @returns The rendered shell.
+ *
+ * @example
+ * ```tsx
+ * <SidebarLayout
+ *   header={<Navbar brand="Ashee SMS" links={links} />}
+ *   sidebar={<Sidebar items={items} activeKey="campaigns" />}>
+ *   <PageContent>
+ *     <Typography role="heading-lg">Campaigns</Typography>
+ *   </PageContent>
+ * </SidebarLayout>
+ * ```
+ *
+ * @see Sidebar - The navigation the column usually holds.
+ * @see Page - The single-column shell, for a page without navigation.
+ */
+export declare const SidebarLayout: import('react').ForwardRefExoticComponent<SidebarLayoutProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=SidebarLayout.d.ts.map

package/dist/components/sidebar-layout/SidebarLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarLayout.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar-layout/SidebarLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,yBAAyB,CAAC;AAYjC,KAAK,sBAAsB,GAAG,mBAAmB,GAC/C,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,kEAAkE;IAClE,OAAO,EAAE,SAAS,CAAC;IAEnB,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,kCAAkC;IAClC,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,aAAa,+GAyDzB,CAAC"}

package/dist/components/sidebar-layout/SidebarLayout.js

@@ -0,0 +1,40 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useAsheeConfig as t } from "../../libs/context.js";
+import { resolveConfigCascade as n } from "../../utils/resolve-token.js";
+import { FALLBACK_SIDEBAR_LAYOUT_CONFIG as r } from "./sidebar-layout-config.js";
+import { SIDEBAR_LAYOUT_ASIDE_CLASS as i, SIDEBAR_LAYOUT_ASIDE_END_BORDER_CLASS as a, SIDEBAR_LAYOUT_ASIDE_END_CLASS as o, SIDEBAR_LAYOUT_ASIDE_START_BORDER_CLASS as s, SIDEBAR_LAYOUT_CLASS as c, SIDEBAR_LAYOUT_CONTENT_CLASS as l, SIDEBAR_LAYOUT_WIDTH_CLASS as u } from "./sidebar-layout-styles.js";
+import { forwardRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/sidebar-layout/SidebarLayout.tsx
+var m = d(({ sidebar: d, header: m, footer: h, sidebarLabel: g = "Sidebar", side: _, sidebarWidth: v, stickySidebar: y, as: b, className: x, children: S, ...C }, w) => {
+	let T = t(), E = n({
+		side: _,
+		sidebarWidth: v,
+		stickySidebar: y
+	}, T.components?.sidebarlayout, r), D = E.side === "end";
+	return /* @__PURE__ */ p(b ?? "div", {
+		ref: w,
+		className: e(c, x),
+		...C,
+		children: [
+			m,
+			/* @__PURE__ */ p("div", {
+				className: "flex w-full flex-1 flex-col lg:flex-row",
+				children: [/* @__PURE__ */ f("aside", {
+					"aria-label": g,
+					className: e(i, u[E.sidebarWidth], D ? o : s, D ? a : void 0, E.stickySidebar && "lg:sticky lg:top-0 lg:h-dvh lg:overflow-y-auto"),
+					children: d
+				}), /* @__PURE__ */ f("div", {
+					className: l,
+					children: S
+				})]
+			}),
+			h
+		]
+	});
+});
+m.displayName = "SidebarLayout";
+//#endregion
+export { m as SidebarLayout };

package/dist/components/sidebar-layout/index.d.ts

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

package/dist/components/sidebar-layout/index.d.ts.map

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

package/dist/components/sidebar-layout/index.js

@@ -0,0 +1,3 @@
+export * from "./SidebarLayout.js";
+export * from "./sidebar-layout-config.js";
+export * from "./sidebar-layout-styles.js";

package/dist/components/sidebar-layout/sidebar-layout-config.d.ts

@@ -0,0 +1,49 @@
+/**
+ * SidebarLayout component configuration for AsheeUI.
+ * This file defines the configuration type and defaults for the application
+ * shell that places a navigation column beside a page: side, sidebar width and
+ * stickiness. It registers the default configuration with the component registry
+ * and provides fallback values for the cascade resolution system.
+ */
+/**
+ * Side the navigation column sits on from the `lg` breakpoint upwards.
+ */
+export type SidebarLayoutSide = "start" | "end";
+/**
+ * Width of the navigation column.
+ */
+export type SidebarLayoutWidth = "sm" | "md" | "lg";
+/**
+ * Theme configuration options for the SidebarLayout component.
+ *
+ * Set under `components.sidebarlayout` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface SidebarLayoutConfig {
+    /** Side the navigation column sits on. @default "start" */
+    side?: SidebarLayoutSide;
+    /** Width of the navigation column. @default "md" */
+    sidebarWidth?: SidebarLayoutWidth;
+    /**
+     * Whether the navigation column stays in view while the content scrolls.
+     * Applies from the `lg` breakpoint upwards, where the column sits beside the
+     * content rather than above it.
+     *
+     * @default true
+     */
+    stickySidebar?: boolean;
+}
+/**
+ * Default config values registered for the SidebarLayout component.
+ */
+export declare const defaultSidebarLayoutConfig: SidebarLayoutConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        sidebarlayout: SidebarLayoutConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_SIDEBAR_LAYOUT_CONFIG: Required<SidebarLayoutConfig>;
+//# sourceMappingURL=sidebar-layout-config.d.ts.map

package/dist/components/sidebar-layout/sidebar-layout-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-layout-config.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar-layout/sidebar-layout-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEhD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB,oDAAoD;IACpD,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAElC;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,0BAA0B,EAAE,mBAIxC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,aAAa,EAAE,mBAAmB,CAAC;KACpC;CACF;AAID;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,QAAQ,CAAC,mBAAmB,CAIxE,CAAC"}

package/dist/components/sidebar-layout/sidebar-layout-config.js

@@ -0,0 +1,16 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/sidebar-layout/sidebar-layout-config.ts
+var t = {
+	side: "start",
+	sidebarWidth: "md",
+	stickySidebar: !0
+};
+e("sidebarlayout", t);
+var n = {
+	side: "start",
+	sidebarWidth: "md",
+	stickySidebar: !0
+};
+//#endregion
+export { n as FALLBACK_SIDEBAR_LAYOUT_CONFIG, t as defaultSidebarLayoutConfig };

package/dist/components/sidebar-layout/sidebar-layout-styles.d.ts

@@ -0,0 +1,21 @@
+import { SidebarLayoutWidth } from './sidebar-layout-config';
+/**
+ * The shell: a full-height column that becomes a row from the `lg` breakpoint,
+ * where the navigation column and the content sit beside each other.
+ */
+export declare const SIDEBAR_LAYOUT_CLASS = "flex min-h-dvh w-full flex-col bg-background lg:flex-row";
+/** The navigation column, stacked above the content on a narrow screen. */
+export declare const SIDEBAR_LAYOUT_ASIDE_CLASS = "w-full shrink-0 border-b border-border";
+/** The navigation column when it sits at the trailing edge. */
+export declare const SIDEBAR_LAYOUT_ASIDE_END_CLASS = "lg:order-last";
+/** The separator of the navigation column on the leading edge. */
+export declare const SIDEBAR_LAYOUT_ASIDE_START_BORDER_CLASS = "lg:border-r";
+/** The separator of the navigation column on the trailing edge. */
+export declare const SIDEBAR_LAYOUT_ASIDE_END_BORDER_CLASS = "lg:border-l";
+/** Keeps the navigation column in view while the content scrolls. */
+export declare const SIDEBAR_LAYOUT_ASIDE_STICKY_CLASS = "lg:sticky lg:top-0 lg:h-dvh lg:overflow-y-auto";
+/** The content column. */
+export declare const SIDEBAR_LAYOUT_CONTENT_CLASS = "flex min-w-0 flex-1 flex-col";
+/** Width of the navigation column at each size, from `lg` upwards. */
+export declare const SIDEBAR_LAYOUT_WIDTH_CLASS: Record<SidebarLayoutWidth, string>;
+//# sourceMappingURL=sidebar-layout-styles.d.ts.map

package/dist/components/sidebar-layout/sidebar-layout-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-layout-styles.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar-layout/sidebar-layout-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,6DAC2B,CAAC;AAE7D,2EAA2E;AAC3E,eAAO,MAAM,0BAA0B,2CACG,CAAC;AAE3C,+DAA+D;AAC/D,eAAO,MAAM,8BAA8B,kBAAkB,CAAC;AAE9D,kEAAkE;AAClE,eAAO,MAAM,uCAAuC,gBAAgB,CAAC;AAErE,mEAAmE;AACnE,eAAO,MAAM,qCAAqC,gBAAgB,CAAC;AAEnE,qEAAqE;AACrE,eAAO,MAAM,iCAAiC,mDACI,CAAC;AAEnD,0BAA0B;AAC1B,eAAO,MAAM,4BAA4B,iCAAiC,CAAC;AAE3E,sEAAsE;AACtE,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAIzE,CAAC"}

package/dist/components/sidebar-layout/sidebar-layout-styles.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/components/sidebar-layout/sidebar-layout-styles.ts
+var e = "flex min-h-dvh w-full flex-col bg-background lg:flex-row", t = "w-full shrink-0 border-b border-border", n = "lg:order-last", r = "lg:border-r", i = "lg:border-l", a = "lg:sticky lg:top-0 lg:h-dvh lg:overflow-y-auto", o = "flex min-w-0 flex-1 flex-col", s = {
+	sm: "lg:w-56",
+	md: "lg:w-64",
+	lg: "lg:w-80"
+};
+//#endregion
+export { t as SIDEBAR_LAYOUT_ASIDE_CLASS, i as SIDEBAR_LAYOUT_ASIDE_END_BORDER_CLASS, n as SIDEBAR_LAYOUT_ASIDE_END_CLASS, r as SIDEBAR_LAYOUT_ASIDE_START_BORDER_CLASS, a as SIDEBAR_LAYOUT_ASIDE_STICKY_CLASS, e as SIDEBAR_LAYOUT_CLASS, o as SIDEBAR_LAYOUT_CONTENT_CLASS, s as SIDEBAR_LAYOUT_WIDTH_CLASS };

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,65 @@
+import { HTMLAttributes } from 'react';
+import { SkeletonConfig } from './skeleton-config';
+type BaseSkeletonProps = SkeletonConfig & Omit<HTMLAttributes<HTMLDivElement>, "color" | "children">;
+/**
+ * Configuration options for the Skeleton component.
+ */
+export interface SkeletonProps extends BaseSkeletonProps {
+    /**
+     * Whether the placeholder stands in for a region that is loading rather than
+     * appear as decoration.
+     *
+     * When true the placeholder becomes a labelled busy status, so assistive
+     * technology is told that loading is in progress. When false it is hidden
+     * from assistive technology, because a placeholder carries no information.
+     *
+     * @default false
+     */
+    isBusy?: boolean;
+    /**
+     * Text announced while the placeholder is a busy status.
+     *
+     * @default "Loading"
+     */
+    label?: string;
+}
+/**
+ * A loading placeholder.
+ *
+ * Skeleton renders a neutral surface that stands in for content while it
+ * loads. Size it with the standard layout classes, because it has no size axis
+ * of its own: `className="h-40 w-full"` is the intended usage.
+ *
+ * Two accessibility contracts hold here. A decorative placeholder is hidden
+ * from assistive technology, because it conveys nothing on its own. A
+ * placeholder marked as busy is exposed as a labelled status instead, so a
+ * consumer who needs the state announced gets it. Neither replaces a status
+ * announcement for a wait the consumer knows will be long: use the framework's
+ * notification or a status region for that.
+ *
+ * The shimmer is applied through the reduced-motion-safe variant, so it stops
+ * for a consumer who asked for less motion without any script running.
+ *
+ * @param props - Skeleton configuration options and div attributes.
+ * @param props.isBusy - Expose the placeholder as a labelled busy status. Defaults to false.
+ * @param props.label - Text announced while busy. Defaults to "Loading".
+ * @param props.radius - Corner rounding. Defaults to "sm".
+ * @param props.isAnimated - Whether the placeholder shimmers. Defaults to true.
+ * @param props.className - Extra classes applied last, which is where sizing belongs.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton className="h-4 w-40" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // The region is loading and the state should be announced.
+ * <Skeleton isBusy label="Loading invoices" className="h-4 w-full" />
+ * ```
+ *
+ * @see SkeletonConfig - The configuration type for component defaults.
+ */
+export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAM3B,KAAK,iBAAiB,GAAG,cAAc,GACrC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,QAAQ,0GAsDpB,CAAC"}

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,29 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
+import { resolveCascade as r, resolveClassKey as i } from "../../utils/resolve-token.js";
+import { FALLBACK_SKELETON_CONFIG as a } from "./skeleton-config.js";
+import { SKELETON_BASE_CLASS as o } from "./skeleton-styles.js";
+import { forwardRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/skeleton/Skeleton.tsx
+var l = s(({ radius: s, isAnimated: l, isBusy: u = !1, label: d = "Loading", className: f, ...p }, m) => {
+	let h = n(), g = h.components?.skeleton, _ = r(s, g?.radius, h.defaultRadius, a.radius), v = r(l, g?.isAnimated, void 0, a.isAnimated), y = i(_, t, a.radius);
+	return /* @__PURE__ */ c("div", {
+		ref: m,
+		role: u ? "status" : void 0,
+		"aria-busy": u ? !0 : void 0,
+		"aria-hidden": !u || void 0,
+		className: e(o, v && "motion-safe:animate-pulse", y, f),
+		...p,
+		children: u && /* @__PURE__ */ c("span", {
+			className: "sr-only",
+			children: d
+		})
+	});
+});
+l.displayName = "Skeleton";
+//#endregion
+export { l as Skeleton };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

package/dist/components/skeleton/index.js

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