agentic-ds-kit 0.1.0 → 0.2.1

package/dist/ui/AlertDialog/AlertDialog.module.js

@@ -0,0 +1,17 @@
+import "./AlertDialog.kit.css";
+//#region ui/AlertDialog/AlertDialog.module.css
+var e = "_overlay_1cwsx_1", t = "_overlayEnter_1cwsx_1", n = "_dialog_1cwsx_13", r = "_dialogEnter_1cwsx_1", i = "_sm_1cwsx_24", a = "_md_1cwsx_28", o = "_title_1cwsx_32", s = "_description_1cwsx_41", c = "_footer_1cwsx_49", l = {
+	overlay: e,
+	overlayEnter: t,
+	dialog: n,
+	dialogEnter: r,
+	sm: i,
+	md: a,
+	title: o,
+	description: s,
+	footer: c
+};
+//#endregion
+export { l as default, s as description, n as dialog, r as dialogEnter, c as footer, a as md, e as overlay, t as overlayEnter, i as sm, o as title };
+
+//# sourceMappingURL=AlertDialog.module.js.map

package/dist/ui/AlertDialog/AlertDialog.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.module.js","names":[],"sources":["../../../ui/AlertDialog/AlertDialog.module.css"],"sourcesContent":[".overlay {\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-4);\n  background-color: var(--surface-overlay);\n  animation: overlayEnter var(--motion-overlay-duration) var(--motion-overlay-easing);\n}\n\n.dialog {\n  z-index: var(--z-modal);\n  width: 100%;\n  padding: var(--space-6);\n  background-color: var(--surface-elevated);\n  border: var(--border-width-thin) solid var(--border-faint);\n  border-radius: var(--radius-surface-md);\n  box-shadow: var(--shadow-md);\n  animation: dialogEnter var(--motion-modal-duration) var(--motion-modal-easing);\n}\n\n.sm {\n  max-width: 20rem;\n}\n\n.md {\n  max-width: 28rem;\n}\n\n.title {\n  margin: 0;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-heading);\n  font-weight: var(--type-weight-heading);\n  line-height: var(--type-line-heading);\n  color: var(--text-primary);\n}\n\n.description {\n  margin: var(--space-3) 0 0;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-body);\n  line-height: var(--type-line-body);\n  color: var(--text-muted);\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: var(--space-6);\n}\n\n@keyframes overlayEnter {\n  from {\n    opacity: var(--opacity-0);\n  }\n  to {\n    opacity: var(--opacity-full);\n  }\n}\n\n@keyframes dialogEnter {\n  from {\n    opacity: var(--opacity-0);\n  }\n  to {\n    opacity: var(--opacity-full);\n  }\n}\n"],"mappings":""}

package/dist/ui/AlertDialog/AlertDialog.types.d.ts

@@ -0,0 +1,13 @@
+export type AlertDialogSize = "sm" | "md";
+export type AlertDialogActionVariant = "primary" | "danger";
+export interface AlertDialogProps {
+    open: boolean;
+    title: string;
+    description: string;
+    cancelLabel?: string;
+    actionLabel: string;
+    actionVariant?: AlertDialogActionVariant;
+    size?: AlertDialogSize;
+    onCancel: () => void;
+    onAction: () => void;
+}

package/dist/ui/AlertDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { AlertDialog } from './AlertDialog';
+export type { AlertDialogProps, AlertDialogSize, AlertDialogActionVariant, } from './AlertDialog.types';

package/dist/ui/AppHeader/AppHeader.d.ts

@@ -0,0 +1,3 @@
+import { AppHeaderProps } from './AppHeader.types';
+export type { AppHeaderProps, AppHeaderRadius } from './AppHeader.types';
+export declare function AppHeader({ title, mark, logo, search, searchPlaceholder, searchValue, defaultSearchValue, onSearch, searchShortcut, searchId, actions, className, ariaLabel, radius, }: AppHeaderProps): import("react").JSX.Element;

package/dist/ui/AppHeader/AppHeader.js

@@ -0,0 +1,57 @@
+import { Input as e } from "../Input/Input.js";
+import t from "./AppHeader.module.js";
+import { useId as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region ui/AppHeader/AppHeader.tsx
+function a({ title: a, mark: o, logo: s, search: c = !0, searchPlaceholder: l = "Search", searchValue: u, defaultSearchValue: d, onSearch: f, searchShortcut: p, searchId: m, actions: h, className: g = "", ariaLabel: _, radius: v = "none" }) {
+	let y = n(), b = m ?? y, x = (o && o.length > 0 ? o : a?.charAt(0)) || "·", S = _ ?? a ?? "Application";
+	return /* @__PURE__ */ i("header", {
+		className: `${t.header} ${v === "md" ? t.radiusMd : ""} ${g}`.trim(),
+		"aria-label": S,
+		"data-search": c ? void 0 : "false",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: t.start,
+				children: [s ? /* @__PURE__ */ r("div", {
+					className: t.logo,
+					children: s
+				}) : /* @__PURE__ */ r("span", {
+					className: t.mark,
+					"aria-hidden": !0,
+					children: x
+				}), a ? /* @__PURE__ */ r("p", {
+					className: t.title,
+					children: a
+				}) : null]
+			}),
+			c ? /* @__PURE__ */ r("div", {
+				className: t.center,
+				children: /* @__PURE__ */ r("div", {
+					className: t.search,
+					children: /* @__PURE__ */ r(e, {
+						id: b,
+						type: "search",
+						size: "md",
+						placeholder: l,
+						value: u,
+						defaultValue: d,
+						onChange: f,
+						iconStart: "Search",
+						end: p,
+						ariaLabel: l
+					})
+				})
+			}) : null,
+			/* @__PURE__ */ r("div", {
+				className: t.end,
+				role: h ? "group" : void 0,
+				"aria-label": h ? "Actions" : void 0,
+				children: h
+			})
+		]
+	});
+}
+//#endregion
+export { a as AppHeader };
+
+//# sourceMappingURL=AppHeader.js.map

package/dist/ui/AppHeader/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","names":[],"sources":["../../../ui/AppHeader/AppHeader.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport { Input } from \"../Input\";\nimport type { AppHeaderProps } from \"./AppHeader.types\";\nimport styles from \"./AppHeader.module.css\";\n\nexport type { AppHeaderProps, AppHeaderRadius } from \"./AppHeader.types\";\n\nexport function AppHeader({\n  title,\n  mark,\n  logo,\n  search = true,\n  searchPlaceholder = \"Search\",\n  searchValue,\n  defaultSearchValue,\n  onSearch,\n  searchShortcut,\n  searchId,\n  actions,\n  className = \"\",\n  ariaLabel,\n  radius = \"none\",\n}: AppHeaderProps) {\n  const generatedId = useId();\n  const inputId = searchId ?? generatedId;\n  const markLetter = (mark && mark.length > 0 ? mark : title?.charAt(0)) || \"·\";\n  const label = ariaLabel ?? title ?? \"Application\";\n\n  return (\n    <header\n      className={`${styles.header} ${radius === \"md\" ? styles.radiusMd : \"\"} ${className}`.trim()}\n      aria-label={label}\n      data-search={search ? undefined : \"false\"}\n    >\n      <div className={styles.start}>\n        {logo ? (\n          <div className={styles.logo}>{logo}</div>\n        ) : (\n          <span className={styles.mark} aria-hidden>\n            {markLetter}\n          </span>\n        )}\n        {title ? <p className={styles.title}>{title}</p> : null}\n      </div>\n\n      {search ? (\n        <div className={styles.center}>\n          <div className={styles.search}>\n            <Input\n              id={inputId}\n              type=\"search\"\n              size=\"md\"\n              placeholder={searchPlaceholder}\n              value={searchValue}\n              defaultValue={defaultSearchValue}\n              onChange={onSearch}\n              iconStart=\"Search\"\n              end={searchShortcut}\n              ariaLabel={searchPlaceholder}\n            />\n          </div>\n        </div>\n      ) : null}\n\n      <div className={styles.end} role={actions ? \"group\" : undefined} aria-label={actions ? \"Actions\" : undefined}>\n        {actions}\n      </div>\n    </header>\n  );\n}\n"],"mappings":";;;;;AAOA,SAAgB,EAAU,EACxB,UACA,SACA,SACA,YAAS,IACT,uBAAoB,UACpB,gBACA,uBACA,aACA,mBACA,aACA,YACA,eAAY,IACZ,cACA,YAAS,UACQ;CACjB,IAAM,IAAc,EAAM,GACpB,IAAU,KAAY,GACtB,KAAc,KAAQ,EAAK,SAAS,IAAI,IAAO,GAAO,OAAO,CAAC,MAAM,KACpE,IAAQ,KAAa,KAAS;CAEpC,OACE,kBAAC,UAAD;EACE,WAAW,GAAG,EAAO,OAAO,GAAG,MAAW,OAAO,EAAO,WAAW,GAAG,GAAG,IAAY,KAAK;EAC1F,cAAY;EACZ,eAAa,IAAS,KAAA,IAAY;EAHpC,UAAA;GAKE,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAvB,UAAA,CACG,IACC,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO,UAAA;IAAU,CAAA,IAExC,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAM,eAAA;KAC3B,UAAA;IACG,CAAA,GAEP,IAAQ,kBAAC,KAAD;KAAG,WAAW,EAAO;KAAQ,UAAA;IAAS,CAAA,IAAI,IAChD;;GAEJ,IACC,kBAAC,OAAD;IAAK,WAAW,EAAO;IACrB,UAAA,kBAAC,OAAD;KAAK,WAAW,EAAO;KACrB,UAAA,kBAAC,GAAD;MACE,IAAI;MACJ,MAAK;MACL,MAAK;MACL,aAAa;MACb,OAAO;MACP,cAAc;MACd,UAAU;MACV,WAAU;MACV,KAAK;MACL,WAAW;KACZ,CAAA;IACE,CAAA;GACF,CAAA,IACH;GAEJ,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAK,MAAM,IAAU,UAAU,KAAA;IAAW,cAAY,IAAU,YAAY,KAAA;IAChG,UAAA;GACE,CAAA;EACC;;AAEZ"}

package/{ui/AppHeader/AppHeader.module.css → dist/ui/AppHeader/AppHeader.kit.css}

@@ -1,4 +1,4 @@
-.header {
+._header_15krl_1 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, var(--layout-rail)) minmax(0, 1fr);
   align-items: center;
@@ -15,13 +15,13 @@
   color: var(--text-primary);
 }
 
-.radiusMd {
+._radiusMd_15krl_18 {
   border: var(--border-surface) solid var(--border-faint);
   border-radius: var(--radius-surface-md);
   overflow: hidden;
 }
 
-.start {
+._start_15krl_24 {
   display: flex;
   align-items: center;
   gap: var(--space-3);
@@ -29,7 +29,7 @@
   justify-self: start;
 }
 
-.logo {
+._logo_15krl_32 {
   display: flex;
   align-items: center;
   flex-shrink: 0;
@@ -37,7 +37,7 @@
   overflow: hidden;
 }
 
-.mark {
+._mark_15krl_40 {
   display: grid;
   place-items: center;
   flex-shrink: 0;
@@ -53,7 +53,7 @@
   line-height: 1;
 }
 
-.title {
+._title_15krl_56 {
   min-width: 0;
   margin: 0;
   overflow: hidden;
@@ -66,7 +66,7 @@
   color: var(--text-primary);
 }
 
-.center {
+._center_15krl_69 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -74,12 +74,12 @@
   min-width: 0;
 }
 
-.search {
+._search_15krl_77 {
   width: 100%;
   min-width: 0;
 }
 
-.end {
+._end_15krl_82 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -88,12 +88,12 @@
   justify-self: end;
 }
 
-.header[data-search="false"] {
+._header_15krl_1[data-search="false"] {
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
 @media (max-width: 40rem) {
-  .header {
+  ._header_15krl_1 {
     grid-template-columns: minmax(0, 1fr) auto;
     grid-template-areas:
       "start end"
@@ -102,19 +102,19 @@
     padding: var(--space-2) var(--space-4);
   }
 
-  .header[data-search="false"] {
+  ._header_15krl_1[data-search="false"] {
     grid-template-areas: "start end";
   }
 
-  .start {
+  ._start_15krl_24 {
     grid-area: start;
   }
 
-  .center {
+  ._center_15krl_69 {
     grid-area: search;
   }
 
-  .end {
+  ._end_15krl_82 {
     grid-area: end;
   }
 }

package/dist/ui/AppHeader/AppHeader.module.js

@@ -0,0 +1,17 @@
+import "./AppHeader.kit.css";
+//#region ui/AppHeader/AppHeader.module.css
+var e = "_header_15krl_1", t = "_radiusMd_15krl_18", n = "_start_15krl_24", r = "_logo_15krl_32", i = "_mark_15krl_40", a = "_title_15krl_56", o = "_center_15krl_69", s = "_search_15krl_77", c = "_end_15krl_82", l = {
+	header: e,
+	radiusMd: t,
+	start: n,
+	logo: r,
+	mark: i,
+	title: a,
+	center: o,
+	search: s,
+	end: c
+};
+//#endregion
+export { o as center, l as default, c as end, e as header, r as logo, i as mark, t as radiusMd, s as search, n as start, a as title };
+
+//# sourceMappingURL=AppHeader.module.js.map

package/dist/ui/AppHeader/AppHeader.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.module.js","names":[],"sources":["../../../ui/AppHeader/AppHeader.module.css"],"sourcesContent":[".header {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, var(--layout-rail)) minmax(0, 1fr);\n  align-items: center;\n  column-gap: var(--space-4);\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: calc(var(--space-10) + var(--space-2) + var(--space-2));\n  flex-shrink: 0;\n  padding: var(--space-2) var(--space-5);\n  border-bottom: var(--border-divider) solid var(--border-faint);\n  border-radius: var(--radius-0);\n  background: var(--surface-card);\n  color: var(--text-primary);\n}\n\n.radiusMd {\n  border: var(--border-surface) solid var(--border-faint);\n  border-radius: var(--radius-surface-md);\n  overflow: hidden;\n}\n\n.start {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  justify-self: start;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  max-height: var(--space-8);\n  overflow: hidden;\n}\n\n.mark {\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: var(--space-8);\n  height: var(--space-8);\n  margin: 0;\n  border-radius: var(--radius-control-md);\n  background: var(--fill-brand);\n  color: var(--brand-on-brand);\n  font-family: var(--font-sans);\n  font-size: var(--type-size-label);\n  font-weight: var(--type-weight-label);\n  line-height: 1;\n}\n\n.title {\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-heading);\n  font-weight: var(--type-weight-heading);\n  line-height: var(--type-line-heading);\n  color: var(--text-primary);\n}\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  min-width: 0;\n}\n\n.search {\n  width: 100%;\n  min-width: 0;\n}\n\n.end {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-1);\n  min-width: 0;\n  justify-self: end;\n}\n\n.header[data-search=\"false\"] {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n@media (max-width: 40rem) {\n  .header {\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-areas:\n      \"start end\"\n      \"search search\";\n    row-gap: var(--space-2);\n    padding: var(--space-2) var(--space-4);\n  }\n\n  .header[data-search=\"false\"] {\n    grid-template-areas: \"start end\";\n  }\n\n  .start {\n    grid-area: start;\n  }\n\n  .center {\n    grid-area: search;\n  }\n\n  .end {\n    grid-area: end;\n  }\n}\n"],"mappings":""}

package/dist/ui/AppHeader/AppHeader.types.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export type AppHeaderRadius = "md" | "none";
+export interface AppHeaderProps {
+    /** Product name next to the mark. Ignored as a heading — this is chrome, not PageHeader. */
+    title?: string;
+    /** Brand letter. Defaults to the first character of title. Used when logo is omitted. */
+    mark?: string;
+    /** Custom mark or wordmark. Replaces the default letter mark. Pass the consumer’s logo here. */
+    logo?: ReactNode;
+    /** Show the centered kit Input. Default true. */
+    search?: boolean;
+    searchPlaceholder?: string;
+    searchValue?: string;
+    defaultSearchValue?: string;
+    /** Input onChange. */
+    onSearch?: (value: string) => void;
+    /** Decorative shortcut in the Input end slot, e.g. ⌘K. */
+    searchShortcut?: string;
+    searchId?: string;
+    /** Trailing kit Buttons (and optional Avatar). At most one primary. */
+    actions?: ReactNode;
+    className?: string;
+    ariaLabel?: string;
+    /** Bar corners. none is flush; md is radius-surface-md. */
+    radius?: AppHeaderRadius;
+}

package/dist/ui/AppHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { AppHeader } from './AppHeader';
+export type { AppHeaderProps, AppHeaderRadius } from './AppHeader.types';

package/dist/ui/AppNav/AppNav.d.ts

@@ -0,0 +1,3 @@
+import { AppNavProps } from './AppNav.types';
+export type { AppNavProps, AppNavItem, AppNavLeaf, AppNavGroup } from './AppNav.types';
+export declare function AppNav({ title, items, groups }: AppNavProps): import("react").JSX.Element;

package/dist/ui/AppNav/AppNav.js

@@ -0,0 +1,108 @@
+"use client";
+import e from "./AppNav.module.js";
+import { useEffect as t, useState as n } from "react";
+import { ChevronRight as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "next/link";
+//#region ui/AppNav/AppNav.tsx
+function s(e, t) {
+	return `${e.href}::${e.label}::${t}`;
+}
+function c(e) {
+	return e.items.some((e) => e.active || e.items?.some((e) => e.active));
+}
+function l({ href: t, label: n, active: r, nested: a }) {
+	return /* @__PURE__ */ i(o, {
+		href: t,
+		className: `${e.link} ${a ? e.linkNested : ""} ${r ? e.active : ""}`,
+		"aria-current": r ? "page" : void 0,
+		onClick: (e) => {
+			let [n, r] = t.split("#");
+			if (!r) return;
+			let i = window.location.pathname;
+			n && n !== i || (e.preventDefault(), window.location.hash = r, window.dispatchEvent(new HashChangeEvent("hashchange")));
+		},
+		children: n
+	});
+}
+function u({ item: t }) {
+	return t.items && t.items.length > 0 ? /* @__PURE__ */ a("li", {
+		className: e.item,
+		children: [/* @__PURE__ */ i("span", {
+			className: e.subgroupLabel,
+			children: t.label
+		}), /* @__PURE__ */ i("ul", {
+			className: e.subList,
+			children: t.items.map((e, t) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(l, {
+				...e,
+				nested: !0
+			}) }, s(e, t)))
+		})]
+	}) : /* @__PURE__ */ i("li", {
+		className: e.item,
+		children: /* @__PURE__ */ i(l, { ...t })
+	});
+}
+function d({ group: t, open: n, onToggle: o }) {
+	let l = `nav-group-${t.label.replace(/\s+/g, "-").toLowerCase()}`, d = c(t);
+	return /* @__PURE__ */ a("li", {
+		className: `${e.group} ${n ? e.isOpen : ""}`,
+		children: [/* @__PURE__ */ a("button", {
+			type: "button",
+			className: `${e.groupToggle} ${n ? e.groupToggleOpen : ""} ${d ? e.groupToggleActive : ""}`,
+			"aria-expanded": n,
+			"aria-controls": l,
+			onClick: o,
+			children: [/* @__PURE__ */ i("span", {
+				className: e.groupLabel,
+				children: t.label
+			}), /* @__PURE__ */ i(r, {
+				className: `${e.chevron} ${n ? e.chevronOpen : ""}`,
+				size: 14,
+				strokeWidth: 2,
+				"aria-hidden": !0
+			})]
+		}), /* @__PURE__ */ i("div", {
+			className: e.accordion,
+			id: l,
+			"aria-hidden": !n,
+			inert: !n || void 0,
+			children: /* @__PURE__ */ i("div", {
+				className: e.accordionInner,
+				children: /* @__PURE__ */ i("ul", {
+					className: e.list,
+					children: t.items.map((e, t) => /* @__PURE__ */ i(u, { item: e }, s(e, t)))
+				})
+			})
+		})]
+	});
+}
+function f({ title: r, items: o = [], groups: l }) {
+	let f = !!(l && l.length > 0), p = f ? l.find(c)?.label ?? null : null, m = f ? l.find((e) => e.defaultOpen !== !1)?.label ?? l[0].label : null, [h, g] = n(p ?? m);
+	t(() => {
+		p && g(p);
+	}, [p]);
+	let _ = h ?? p ?? m;
+	return /* @__PURE__ */ a("nav", {
+		className: e.nav,
+		"aria-label": "Application",
+		children: [r ? /* @__PURE__ */ i("p", {
+			className: e.title,
+			children: r
+		}) : null, f ? /* @__PURE__ */ i("ul", {
+			className: e.groupList,
+			children: l.map((e) => /* @__PURE__ */ i(d, {
+				group: e,
+				open: _ === e.label,
+				onToggle: () => g((t) => t === e.label ? null : e.label)
+			}, e.label))
+		}) : /* @__PURE__ */ i("ul", {
+			className: e.list,
+			children: o.map((e, t) => /* @__PURE__ */ i(u, { item: e }, s(e, t)))
+		})]
+	});
+}
+//#endregion
+export { f as AppNav };
+
+//# sourceMappingURL=AppNav.js.map

package/dist/ui/AppNav/AppNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppNav.js","names":[],"sources":["../../../ui/AppNav/AppNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport Link from \"next/link\";\nimport { ChevronRight } from \"lucide-react\";\nimport type { AppNavGroup, AppNavItem, AppNavLeaf, AppNavProps } from \"./AppNav.types\";\nimport styles from \"./AppNav.module.css\";\n\nexport type { AppNavProps, AppNavItem, AppNavLeaf, AppNavGroup } from \"./AppNav.types\";\n\nfunction navKey(item: AppNavLeaf, index: number): string {\n  return `${item.href}::${item.label}::${index}`;\n}\n\nfunction groupHasActive(group: AppNavGroup): boolean {\n  return group.items.some((item) => item.active || item.items?.some((child) => child.active));\n}\n\nfunction NavLink({ href, label, active, nested }: AppNavLeaf & { nested?: boolean }) {\n  return (\n    <Link\n      href={href}\n      className={`${styles.link} ${nested ? styles.linkNested : \"\"} ${active ? styles.active : \"\"}`}\n      aria-current={active ? \"page\" : undefined}\n      onClick={(event) => {\n        const [path, fragment] = href.split(\"#\");\n        if (!fragment) return;\n        const here = window.location.pathname;\n        if (path && path !== here) return;\n        event.preventDefault();\n        window.location.hash = fragment;\n        window.dispatchEvent(new HashChangeEvent(\"hashchange\"));\n      }}\n    >\n      {label}\n    </Link>\n  );\n}\n\nfunction NavItem({ item }: { item: AppNavItem }) {\n  if (item.items && item.items.length > 0) {\n    return (\n      <li className={styles.item}>\n        <span className={styles.subgroupLabel}>{item.label}</span>\n        <ul className={styles.subList}>\n          {item.items.map((child, index) => (\n            <li key={navKey(child, index)}>\n              <NavLink {...child} nested />\n            </li>\n          ))}\n        </ul>\n      </li>\n    );\n  }\n\n  return (\n    <li className={styles.item}>\n      <NavLink {...item} />\n    </li>\n  );\n}\n\nfunction NavGroup({\n  group,\n  open,\n  onToggle,\n}: {\n  group: AppNavGroup;\n  open: boolean;\n  onToggle: () => void;\n}) {\n  const groupId = `nav-group-${group.label.replace(/\\s+/g, \"-\").toLowerCase()}`;\n  const hasActive = groupHasActive(group);\n\n  return (\n    <li className={`${styles.group} ${open ? styles.isOpen : \"\"}`}>\n      <button\n        type=\"button\"\n        className={`${styles.groupToggle} ${open ? styles.groupToggleOpen : \"\"} ${hasActive ? styles.groupToggleActive : \"\"}`}\n        aria-expanded={open}\n        aria-controls={groupId}\n        onClick={onToggle}\n      >\n        <span className={styles.groupLabel}>{group.label}</span>\n        <ChevronRight className={`${styles.chevron} ${open ? styles.chevronOpen : \"\"}`} size={14} strokeWidth={2} aria-hidden />\n      </button>\n      <div className={styles.accordion} id={groupId} aria-hidden={!open} inert={open ? undefined : true}>\n        <div className={styles.accordionInner}>\n          <ul className={styles.list}>\n            {group.items.map((item, index) => (\n              <NavItem key={navKey(item, index)} item={item} />\n            ))}\n          </ul>\n        </div>\n      </div>\n    </li>\n  );\n}\n\nexport function AppNav({ title, items = [], groups }: AppNavProps) {\n  const useGroups = Boolean(groups && groups.length > 0);\n  const activeLabel = useGroups ? groups!.find(groupHasActive)?.label ?? null : null;\n  const fallbackLabel = useGroups\n    ? groups!.find((group) => group.defaultOpen !== false)?.label ?? groups![0].label\n    : null;\n  const [openLabel, setOpenLabel] = useState<string | null>(activeLabel ?? fallbackLabel);\n\n  useEffect(() => {\n    if (activeLabel) setOpenLabel(activeLabel);\n  }, [activeLabel]);\n\n  const resolvedOpen = openLabel ?? activeLabel ?? fallbackLabel;\n\n  return (\n    <nav className={styles.nav} aria-label=\"Application\">\n      {title ? <p className={styles.title}>{title}</p> : null}\n      {useGroups ? (\n        <ul className={styles.groupList}>\n          {groups!.map((group) => (\n            <NavGroup\n              key={group.label}\n              group={group}\n              open={resolvedOpen === group.label}\n              onToggle={() => setOpenLabel((current) => (current === group.label ? null : group.label))}\n            />\n          ))}\n        </ul>\n      ) : (\n        <ul className={styles.list}>\n          {items.map((item, index) => (\n            <NavItem key={navKey(item, index)} item={item} />\n          ))}\n        </ul>\n      )}\n    </nav>\n  );\n}\n"],"mappings":"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"}

package/{ui/AppNav/AppNav.module.css → dist/ui/AppNav/AppNav.kit.css}

@@ -1,4 +1,4 @@
-.nav {
+._nav_1yo6n_1 {
   width: 15rem;
   flex-shrink: 0;
   padding: var(--space-4);
@@ -7,7 +7,7 @@
   border-radius: var(--radius-surface-md);
 }
 
-.title {
+._title_1yo6n_10 {
   margin: 0 0 var(--space-4);
   padding: 0 var(--space-2);
   font-family: var(--font-sans);
@@ -16,7 +16,7 @@
   color: var(--text-primary);
 }
 
-.groupList {
+._groupList_1yo6n_19 {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -25,12 +25,12 @@
   gap: var(--space-1);
 }
 
-.group {
+._group_1yo6n_19 {
   display: flex;
   flex-direction: column;
 }
 
-.groupToggle {
+._groupToggle_1yo6n_33 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -46,22 +46,22 @@
   text-align: left;
 }
 
-.groupToggle:hover,
-.groupToggleOpen,
-.groupToggleActive {
+._groupToggle_1yo6n_33:hover,
+._groupToggleOpen_1yo6n_50,
+._groupToggleActive_1yo6n_51 {
   color: var(--text-primary);
 }
 
-.groupToggle:hover {
+._groupToggle_1yo6n_33:hover {
   background: var(--surface-muted);
 }
 
-.groupToggle:focus-visible {
+._groupToggle_1yo6n_33:focus-visible {
   outline: var(--border-focus-width) solid var(--focus-ring);
   outline-offset: var(--space-inset-2xs);
 }
 
-.groupLabel {
+._groupLabel_1yo6n_64 {
   font-family: var(--font-sans);
   font-size: var(--type-size-overline);
   font-weight: var(--type-weight-overline);
@@ -69,40 +69,40 @@
   text-transform: uppercase;
 }
 
-.chevron {
+._chevron_1yo6n_72 {
   flex-shrink: 0;
   color: var(--icon-muted);
   transition: transform var(--motion-expand-duration) var(--motion-ease-out);
 }
 
-.chevronOpen {
+._chevronOpen_1yo6n_78 {
   transform: rotate(90deg);
   color: var(--icon-default);
 }
 
-.accordion {
+._accordion_1yo6n_83 {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows var(--motion-expand-duration) var(--motion-expand-easing);
 }
 
-.isOpen .accordion {
+._isOpen_1yo6n_89 ._accordion_1yo6n_83 {
   grid-template-rows: 1fr;
 }
 
-.accordionInner {
+._accordionInner_1yo6n_93 {
   overflow: hidden;
   min-height: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .accordion,
-  .chevron {
+  ._accordion_1yo6n_83,
+  ._chevron_1yo6n_72 {
     transition: none;
   }
 }
 
-.list {
+._list_1yo6n_105 {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -111,13 +111,13 @@
   gap: var(--space-1);
 }
 
-.item {
+._item_1yo6n_114 {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
 }
 
-.subgroupLabel {
+._subgroupLabel_1yo6n_120 {
   padding: var(--space-2) var(--space-3);
   font-family: var(--font-sans);
   font-size: var(--type-size-body-sm);
@@ -126,7 +126,7 @@
   color: var(--text-primary);
 }
 
-.subList {
+._subList_1yo6n_129 {
   margin: 0;
   padding: 0 0 0 var(--space-2);
   list-style: none;
@@ -135,7 +135,7 @@
   gap: var(--space-1);
 }
 
-.link {
+._link_1yo6n_138 {
   display: block;
   padding: var(--space-2) var(--space-3);
   font-family: var(--font-sans);
@@ -148,21 +148,21 @@
   transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
 }
 
-.linkNested {
+._linkNested_1yo6n_151 {
   padding-left: var(--space-4);
 }
 
-.link:hover {
+._link_1yo6n_138:hover {
   background-color: var(--surface-muted);
   color: var(--text-primary);
 }
 
-.link:focus-visible {
+._link_1yo6n_138:focus-visible {
   outline: var(--border-focus-width) solid var(--focus-ring);
   outline-offset: var(--space-inset-2xs);
 }
 
-.active {
+._active_1yo6n_165 {
   background-color: color-mix(in srgb, var(--action-primary) 10%, var(--surface-card));
   color: var(--action-primary);
 }

package/dist/ui/AppNav/AppNav.module.js

@@ -0,0 +1,28 @@
+import "./AppNav.kit.css";
+//#region ui/AppNav/AppNav.module.css
+var e = "_nav_1yo6n_1", t = "_title_1yo6n_10", n = "_groupList_1yo6n_19", r = "_group_1yo6n_19", i = "_groupToggle_1yo6n_33", a = "_groupToggleOpen_1yo6n_50", o = "_groupToggleActive_1yo6n_51", s = "_groupLabel_1yo6n_64", c = "_chevron_1yo6n_72", l = "_chevronOpen_1yo6n_78", u = "_accordion_1yo6n_83", d = "_isOpen_1yo6n_89", f = "_accordionInner_1yo6n_93", p = "_list_1yo6n_105", m = "_item_1yo6n_114", h = "_subgroupLabel_1yo6n_120", g = "_subList_1yo6n_129", _ = "_link_1yo6n_138", v = "_linkNested_1yo6n_151", y = "_active_1yo6n_165", b = {
+	nav: e,
+	title: t,
+	groupList: n,
+	group: r,
+	groupToggle: i,
+	groupToggleOpen: a,
+	groupToggleActive: o,
+	groupLabel: s,
+	chevron: c,
+	chevronOpen: l,
+	accordion: u,
+	isOpen: d,
+	accordionInner: f,
+	list: p,
+	item: m,
+	subgroupLabel: h,
+	subList: g,
+	link: _,
+	linkNested: v,
+	active: y
+};
+//#endregion
+export { u as accordion, f as accordionInner, y as active, c as chevron, l as chevronOpen, b as default, r as group, s as groupLabel, n as groupList, i as groupToggle, o as groupToggleActive, a as groupToggleOpen, d as isOpen, m as item, _ as link, v as linkNested, p as list, e as nav, g as subList, h as subgroupLabel, t as title };
+
+//# sourceMappingURL=AppNav.module.js.map

package/dist/ui/AppNav/AppNav.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppNav.module.js","names":[],"sources":["../../../ui/AppNav/AppNav.module.css"],"sourcesContent":[".nav {\n  width: 15rem;\n  flex-shrink: 0;\n  padding: var(--space-4);\n  background-color: var(--surface-card);\n  border: var(--border-width-thin) solid var(--border-faint);\n  border-radius: var(--radius-surface-md);\n}\n\n.title {\n  margin: 0 0 var(--space-4);\n  padding: 0 var(--space-2);\n  font-family: var(--font-sans);\n  font-size: var(--type-size-body-sm);\n  font-weight: var(--type-weight-heading);\n  color: var(--text-primary);\n}\n\n.groupList {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n}\n\n.groupToggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  width: 100%;\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  border: 0;\n  border-radius: var(--radius-control-sm);\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  text-align: left;\n}\n\n.groupToggle:hover,\n.groupToggleOpen,\n.groupToggleActive {\n  color: var(--text-primary);\n}\n\n.groupToggle:hover {\n  background: var(--surface-muted);\n}\n\n.groupToggle:focus-visible {\n  outline: var(--border-focus-width) solid var(--focus-ring);\n  outline-offset: var(--space-inset-2xs);\n}\n\n.groupLabel {\n  font-family: var(--font-sans);\n  font-size: var(--type-size-overline);\n  font-weight: var(--type-weight-overline);\n  letter-spacing: var(--type-tracking-overline);\n  text-transform: uppercase;\n}\n\n.chevron {\n  flex-shrink: 0;\n  color: var(--icon-muted);\n  transition: transform var(--motion-expand-duration) var(--motion-ease-out);\n}\n\n.chevronOpen {\n  transform: rotate(90deg);\n  color: var(--icon-default);\n}\n\n.accordion {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--motion-expand-duration) var(--motion-expand-easing);\n}\n\n.isOpen .accordion {\n  grid-template-rows: 1fr;\n}\n\n.accordionInner {\n  overflow: hidden;\n  min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .accordion,\n  .chevron {\n    transition: none;\n  }\n}\n\n.list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n\n.item {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n\n.subgroupLabel {\n  padding: var(--space-2) var(--space-3);\n  font-family: var(--font-sans);\n  font-size: var(--type-size-body-sm);\n  font-weight: var(--type-weight-body);\n  line-height: var(--type-line-body);\n  color: var(--text-primary);\n}\n\n.subList {\n  margin: 0;\n  padding: 0 0 0 var(--space-2);\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n\n.link {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  font-family: var(--font-sans);\n  font-size: var(--type-size-body-sm);\n  font-weight: var(--type-weight-body);\n  line-height: var(--type-line-body);\n  color: var(--text-primary);\n  text-decoration: none;\n  border-radius: var(--radius-control-md);\n  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;\n}\n\n.linkNested {\n  padding-left: var(--space-4);\n}\n\n.link:hover {\n  background-color: var(--surface-muted);\n  color: var(--text-primary);\n}\n\n.link:focus-visible {\n  outline: var(--border-focus-width) solid var(--focus-ring);\n  outline-offset: var(--space-inset-2xs);\n}\n\n.active {\n  background-color: color-mix(in srgb, var(--action-primary) 10%, var(--surface-card));\n  color: var(--action-primary);\n}\n"],"mappings":""}

package/dist/ui/AppNav/AppNav.types.d.ts

@@ -0,0 +1,21 @@
+export interface AppNavLeaf {
+    href: string;
+    label: string;
+    active?: boolean;
+}
+/** A nav link, optionally with one nested subgroup of leaves. */
+export interface AppNavItem extends AppNavLeaf {
+    items?: AppNavLeaf[];
+}
+export interface AppNavGroup {
+    label: string;
+    defaultOpen?: boolean;
+    items: AppNavItem[];
+}
+export interface AppNavProps {
+    title?: string;
+    /** Flat list for simple shells (e.g. list-detail). Ignored when `groups` is provided. */
+    items?: AppNavItem[];
+    /** Grouped catalog nav for docs/playground shells. Takes precedence over `items`. */
+    groups?: AppNavGroup[];
+}

package/{ui/AppNav/index.ts → dist/ui/AppNav/index.d.ts}

@@ -1,2 +1,2 @@
-export { AppNav } from "./AppNav";
-export type { AppNavProps, AppNavItem, AppNavLeaf, AppNavGroup } from "./AppNav.types";
+export { AppNav } from './AppNav';
+export type { AppNavProps, AppNavItem, AppNavLeaf, AppNavGroup } from './AppNav.types';

package/dist/ui/Avatar/Avatar.d.ts

@@ -0,0 +1,3 @@
+import { AvatarProps } from './Avatar.types';
+export type { AvatarProps, AvatarSize } from './Avatar.types';
+export declare function Avatar({ name, src, initials, size }: AvatarProps): import("react").JSX.Element;