@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/settings/permission-matrix.d.ts

@@ -0,0 +1,29 @@
+export interface PermissionColumn {
+    id: string;
+    label: string;
+    /** Risky permission (delete, billing): its header is red. */
+    danger?: boolean;
+}
+export interface PermissionRow {
+    id: string;
+    label: string;
+    description?: string;
+}
+/** `'all'` when the row's master switch is on; otherwise the column ids granted. */
+export type PermissionValue = Record<string, 'all' | string[]>;
+export interface PermissionMatrixProps {
+    rows: PermissionRow[];
+    columns: PermissionColumn[];
+    value: PermissionValue;
+    onChange: (value: PermissionValue) => void;
+    caption: string;
+    labels?: {
+        all?: string;
+    };
+    className?: string;
+}
+/**
+ * Roles or people × areas: a master switch per row grants everything (cells show checked and disabled), otherwise
+ * one checkbox per cell. Scrolls sideways on narrow screens with the first column fixed.
+ */
+export declare function PermissionMatrix({ rows, columns, value, onChange, caption, labels, className, }: PermissionMatrixProps): import("react").JSX.Element;

package/dist/settings/permission-matrix.js

@@ -0,0 +1,101 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Glyph as t } from "../lib/glyphs.js";
+import { checkboxBox as n, focusRing as r } from "../lib/control-styles.js";
+import { CellSwitch as i } from "../data-table/cells.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-checkbox";
+//#region src/settings/permission-matrix.tsx
+function c({ rows: c, columns: l, value: u, onChange: d, caption: f, labels: p = {}, className: m }) {
+	let h = p.all ?? "All", g = (e, t) => d({
+		...u,
+		[e]: t
+	});
+	return /* @__PURE__ */ a("div", {
+		className: e("overflow-x-auto rounded-lg border border-border bg-surface font-sans", m),
+		children: /* @__PURE__ */ o("table", {
+			className: "w-full border-collapse text-sm",
+			children: [
+				/* @__PURE__ */ a("caption", {
+					className: "sr-only",
+					children: f
+				}),
+				/* @__PURE__ */ a("thead", {
+					className: "bg-surface-muted",
+					children: /* @__PURE__ */ o("tr", { children: [
+						/* @__PURE__ */ a("th", {
+							scope: "col",
+							className: "sticky left-0 bg-surface-muted px-4 py-3 text-left font-semibold text-fg-muted",
+							children: /* @__PURE__ */ a("span", {
+								className: "sr-only",
+								children: f
+							})
+						}),
+						/* @__PURE__ */ a("th", {
+							scope: "col",
+							className: "px-3 py-3 text-center font-semibold text-fg-muted",
+							children: h
+						}),
+						l.map((t) => /* @__PURE__ */ a("th", {
+							scope: "col",
+							className: e("px-3 py-3 text-center font-semibold whitespace-nowrap", t.danger ? "text-danger-fg" : "text-fg-muted"),
+							children: t.label
+						}, t.id))
+					] })
+				}),
+				/* @__PURE__ */ a("tbody", { children: c.map((c) => {
+					let d = u[c.id] ?? [], f = d === "all";
+					return /* @__PURE__ */ o("tr", {
+						className: "border-t border-border",
+						children: [
+							/* @__PURE__ */ o("th", {
+								scope: "row",
+								className: "sticky left-0 bg-surface px-4 py-3 text-left font-normal",
+								children: [/* @__PURE__ */ a("span", {
+									className: "block font-semibold text-fg",
+									children: c.label
+								}), c.description && /* @__PURE__ */ a("span", {
+									className: "block text-xs text-fg-muted",
+									children: c.description
+								})]
+							}),
+							/* @__PURE__ */ a("td", {
+								className: "px-3 py-3 text-center",
+								children: /* @__PURE__ */ a(i, {
+									checked: f,
+									onCheckedChange: (e) => g(c.id, e ? "all" : []),
+									label: `${c.label}: ${h}`
+								})
+							}),
+							l.map((i) => {
+								let o = f || d.includes(i.id);
+								return /* @__PURE__ */ a("td", {
+									className: "px-3 py-3 text-center",
+									children: /* @__PURE__ */ a(s.Root, {
+										checked: o,
+										disabled: f,
+										onCheckedChange: (e) => {
+											let t = d;
+											g(c.id, e === !0 ? [...t, i.id] : t.filter((e) => e !== i.id));
+										},
+										"aria-label": `${c.label}: ${i.label}`,
+										className: e(n({ tone: i.danger ? "danger" : "primary" }), r, "mx-auto"),
+										children: /* @__PURE__ */ a(s.Indicator, { children: /* @__PURE__ */ a(t, {
+											name: "check",
+											size: 12,
+											strokeWidth: 3
+										}) })
+									})
+								}, i.id);
+							})
+						]
+					}, c.id);
+				}) })
+			]
+		})
+	});
+}
+//#endregion
+export { c as PermissionMatrix };
+
+//# sourceMappingURL=permission-matrix.js.map

package/dist/settings/permission-matrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"permission-matrix.js","names":["RadixCheckbox","PermissionMatrix","allLabel","labels","set","onChange","value","rowId","next","cx","className","caption","columns","c","rows","v","r","all","CellSwitch","on","checked","list","x","checkboxBox","focusRing","Glyph"],"sources":["../../src/settings/permission-matrix.tsx"],"sourcesContent":["'use client';\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { cx } from '../lib/cx';\nimport { checkboxBox, focusRing } from '../lib/control-styles';\nimport { Glyph } from '../lib/glyphs';\nimport { CellSwitch } from '../data-table/cells';\n\n/* ---------------- PermissionMatrix ---------------- */\n\nexport interface PermissionColumn {\n  id: string;\n  label: string;\n  /** Risky permission (delete, billing): its header is red. */\n  danger?: boolean;\n}\n\nexport interface PermissionRow {\n  id: string;\n  label: string;\n  description?: string;\n}\n\n/** `'all'` when the row's master switch is on; otherwise the column ids granted. */\nexport type PermissionValue = Record<string, 'all' | string[]>;\n\nexport interface PermissionMatrixProps {\n  rows: PermissionRow[];\n  columns: PermissionColumn[];\n  value: PermissionValue;\n  onChange: (value: PermissionValue) => void;\n  caption: string;\n  labels?: { all?: string };\n  className?: string;\n}\n\n/**\n * Roles or people × areas: a master switch per row grants everything (cells show checked and disabled), otherwise\n * one checkbox per cell. Scrolls sideways on narrow screens with the first column fixed.\n */\nexport function PermissionMatrix({\n  rows,\n  columns,\n  value,\n  onChange,\n  caption,\n  labels = {},\n  className,\n}: PermissionMatrixProps) {\n  const allLabel = labels.all ?? 'All';\n  const set = (rowId: string, next: 'all' | string[]) => onChange({ ...value, [rowId]: next });\n  return (\n    <div className={cx('overflow-x-auto rounded-lg border border-border bg-surface font-sans', className)}>\n      <table className=\"w-full border-collapse text-sm\">\n        <caption className=\"sr-only\">{caption}</caption>\n        <thead className=\"bg-surface-muted\">\n          <tr>\n            <th scope=\"col\" className=\"sticky left-0 bg-surface-muted px-4 py-3 text-left font-semibold text-fg-muted\">\n              <span className=\"sr-only\">{caption}</span>\n            </th>\n            <th scope=\"col\" className=\"px-3 py-3 text-center font-semibold text-fg-muted\">\n              {allLabel}\n            </th>\n            {columns.map((c) => (\n              <th\n                key={c.id}\n                scope=\"col\"\n                className={cx(\n                  'px-3 py-3 text-center font-semibold whitespace-nowrap',\n                  c.danger ? 'text-danger-fg' : 'text-fg-muted',\n                )}\n              >\n                {c.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((r) => {\n            const v = value[r.id] ?? [];\n            const all = v === 'all';\n            return (\n              <tr key={r.id} className=\"border-t border-border\">\n                <th scope=\"row\" className=\"sticky left-0 bg-surface px-4 py-3 text-left font-normal\">\n                  <span className=\"block font-semibold text-fg\">{r.label}</span>\n                  {r.description && <span className=\"block text-xs text-fg-muted\">{r.description}</span>}\n                </th>\n                <td className=\"px-3 py-3 text-center\">\n                  <CellSwitch\n                    checked={all}\n                    onCheckedChange={(on) => set(r.id, on ? 'all' : [])}\n                    label={`${r.label}: ${allLabel}`}\n                  />\n                </td>\n                {columns.map((c) => {\n                  const checked = all || (v as string[]).includes(c.id);\n                  return (\n                    <td key={c.id} className=\"px-3 py-3 text-center\">\n                      <RadixCheckbox.Root\n                        checked={checked}\n                        disabled={all}\n                        onCheckedChange={(on) => {\n                          const list = v as string[];\n                          set(r.id, on === true ? [...list, c.id] : list.filter((x) => x !== c.id));\n                        }}\n                        aria-label={`${r.label}: ${c.label}`}\n                        // Centered in the cell: the box is a grid, so the cell centers it with mx-auto.\n                        className={cx(checkboxBox({ tone: c.danger ? 'danger' : 'primary' }), focusRing, 'mx-auto')}\n                      >\n                        <RadixCheckbox.Indicator>\n                          <Glyph name=\"check\" size={12} strokeWidth={3} />\n                        </RadixCheckbox.Indicator>\n                      </RadixCheckbox.Root>\n                    </td>\n                  );\n                })}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAuCA,SAAgBC,EAAiB,EAC/B,SACA,YACA,UACA,aACA,YACA,YAAS,CAAC,GACV,gBACwB;CACxB,IAAMC,IAAWC,EAAO,OAAO,OACzBC,KAAO,GAAe,MAA2BC,EAAS;EAAE,GAAGC;GAAQC,IAAQC;CAAK,CAAC;CAC3F,OACE,kBAAC,OAAD;EAAK,WAAWC,EAAG,wEAAwEC,CAAS;EAClG,UAAA,kBAAC,SAAD;GAAO,WAAU;GAAjB,UAAA;IACE,kBAAC,WAAD;KAAS,WAAU;KAAW,UAAAC;IAAiB,CAAA;IAC/C,kBAAC,SAAD;KAAO,WAAU;KACf,UAAA,kBAAC,MAAD,EAAA,UAAA;MACE,kBAAC,MAAD;OAAI,OAAM;OAAM,WAAU;OACxB,UAAA,kBAAC,QAAD;QAAM,WAAU;QAAW,UAAAA;OAAc,CAAA;MACvC,CAAA;MACJ,kBAAC,MAAD;OAAI,OAAM;OAAM,WAAU;OACvB,UAAAT;MACC,CAAA;MACHU,EAAQ,KAAK,MACZ,kBAAC,MAAD;OAEE,OAAM;OACN,WAAWH,EACT,yDACAI,EAAE,SAAS,mBAAmB,eAChC;OAEC,UAAAA,EAAE;MACD,GARGA,EAAE,EAQL,CACL;KACC,EAAA,CAAA;IACC,CAAA;IACP,kBAAC,SAAD,EAAA,UACGC,EAAK,KAAK,MAAM;KACf,IAAMC,IAAIT,EAAMU,EAAE,OAAO,CAAC,GACpBC,IAAMF,MAAM;KAClB,OACE,kBAAC,MAAD;MAAe,WAAU;MAAzB,UAAA;OACE,kBAAC,MAAD;QAAI,OAAM;QAAM,WAAU;QAA1B,UAAA,CACE,kBAAC,QAAD;SAAM,WAAU;SAA+B,UAAAC,EAAE;QAAY,CAAA,GAC5DA,EAAE,eAAe,kBAAC,QAAD;SAAM,WAAU;SAA+B,UAAAA,EAAE;QAAkB,CAAA,CACnF;;OACJ,kBAAC,MAAD;QAAI,WAAU;QACZ,UAAA,kBAACE,GAAD;SACE,SAASD;SACT,kBAAkB,MAAOb,EAAIY,EAAE,IAAIG,IAAK,QAAQ,CAAC,CAAC;SAClD,OAAO,GAAGH,EAAE,MAAM,IAAId;QACvB,CAAA;OACC,CAAA;OACHU,EAAQ,KAAK,MAAM;QAClB,IAAMQ,IAAUH,KAAQF,EAAe,SAASF,EAAE,EAAE;QACpD,OACE,kBAAC,MAAD;SAAe,WAAU;SACvB,UAAA,kBAACb,EAAc,MAAf;UACW;UACT,UAAUiB;UACV,kBAAkB,MAAO;WACvB,IAAMI,IAAON;WACb,EAAIC,EAAE,IAAIG,MAAO,KAAO,CAAC,GAAGE,GAAMR,EAAE,EAAE,IAAIQ,EAAK,QAAQ,MAAMC,MAAMT,EAAE,EAAE,CAAC;UAC1E;UACA,cAAY,GAAGG,EAAE,MAAM,IAAIH,EAAE;UAE7B,WAAWJ,EAAGc,EAAY,EAAE,MAAMV,EAAE,SAAS,WAAW,UAAU,CAAC,GAAGW,GAAW,SAAS;UAE1F,UAAA,kBAACxB,EAAc,WAAf,EAAA,UACE,kBAACyB,GAAD;WAAO,MAAK;WAAQ,MAAM;WAAI,aAAa;UAAI,CAAA,EACxB,CAAA;SACP,CAAA;QAClB,GAhBKZ,EAAE,EAgBP;OAER,CAAC;MACC;KAlCK,GAAAG,EAAE,EAkCP;IAER,CAAC,EACI,CAAA;GACF;;CACJ,CAAA;AAET"}

package/dist/settings/settings-row.d.ts

@@ -0,0 +1,32 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { IconName } from '../icon/icon';
+/** Rows of settings with dividers between them. Put it inside a `CardBody` (or a card with `padding="none"`). */
+export declare function SettingsList({ className, ...rest }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export interface SettingsRowIds {
+    /** Pass to the control as `aria-labelledby`. */
+    labelId: string;
+    /** Pass to the control as `aria-describedby` (only set when there is a description). */
+    descriptionId?: string;
+}
+export interface SettingsRowProps {
+    label: ReactNode;
+    description?: ReactNode;
+    /**
+     * The control on the right: a `Switch`-like toggle, a `SegmentedControl`, a value with a link. As a function it
+     * gets the ids to name the control after the row: `({ labelId, descriptionId }) => <CellSwitch … />`.
+     */
+    control?: ReactNode | ((ids: SettingsRowIds) => ReactNode);
+    icon?: IconName;
+    /** A badge after the label ("Always on", "Part of Recognition"). */
+    badge?: ReactNode;
+    /** Child rows, indented under this one (shown only when relevant, e.g. when the parent is on). */
+    children?: ReactNode;
+    /** A boxed form under the row (e.g. extra fields for this setting). */
+    detail?: ReactNode;
+    className?: string;
+}
+/**
+ * One setting per row: label and description on the left, the control on the right. Stacks on narrow screens
+ * when the control is wide (a segmented control); a toggle stays beside the label.
+ */
+export declare function SettingsRow({ label, description, control, icon, badge, children, detail, className, }: SettingsRowProps): import("react").JSX.Element;

package/dist/settings/settings-row.js

@@ -0,0 +1,63 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { IconTile as t } from "../icon/icon-tile.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useId as i } from "react";
+//#region src/settings/settings-row.tsx
+function a({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("divide-y divide-border font-sans", t),
+		...r
+	});
+}
+function o({ label: a, description: o, control: s, icon: c, badge: l, children: u, detail: d, className: f }) {
+	let p = i(), m = i(), h = {
+		labelId: p,
+		descriptionId: o ? m : void 0
+	};
+	return /* @__PURE__ */ r("div", {
+		className: e("grid gap-3 py-4 first:pt-0 last:pb-0", f),
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "flex flex-wrap items-center justify-between gap-x-6 gap-y-3",
+				children: [/* @__PURE__ */ r("div", {
+					className: "flex min-w-[min(100%,14rem)] flex-1 items-start gap-3",
+					children: [c && /* @__PURE__ */ n(t, {
+						icon: c,
+						size: "sm",
+						tone: "muted"
+					}), /* @__PURE__ */ r("div", {
+						className: "grid min-w-0 gap-0.5",
+						children: [/* @__PURE__ */ r("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [/* @__PURE__ */ n("span", {
+								id: p,
+								className: "text-[15px] font-semibold text-fg",
+								children: a
+							}), l]
+						}), o && /* @__PURE__ */ n("p", {
+							id: m,
+							className: "m-0 text-sm text-pretty text-fg-muted",
+							children: o
+						})]
+					})]
+				}), s !== void 0 && /* @__PURE__ */ n("div", {
+					className: "flex shrink-0 items-center gap-2",
+					children: typeof s == "function" ? s(h) : s
+				})]
+			}),
+			d && /* @__PURE__ */ n("div", {
+				className: "rounded-md bg-surface-muted p-4",
+				children: d
+			}),
+			u && /* @__PURE__ */ n("div", {
+				className: "ml-4 border-l-2 border-border pl-4 sm:ml-6",
+				children: u
+			})
+		]
+	});
+}
+//#endregion
+export { a as SettingsList, o as SettingsRow };
+
+//# sourceMappingURL=settings-row.js.map

package/dist/settings/settings-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-row.js","names":["SettingsList","rest","cx","className","SettingsRow","labelId","useId","descriptionId","ids","description","icon","IconTile","label","badge","control","detail","children"],"sources":["../../src/settings/settings-row.tsx"],"sourcesContent":["'use client';\n\nimport { useId, type HTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { IconTile } from '../icon/icon-tile';\nimport type { IconName } from '../icon/icon';\n\n/** Rows of settings with dividers between them. Put it inside a `CardBody` (or a card with `padding=\"none\"`). */\nexport function SettingsList({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cx('divide-y divide-border font-sans', className)} {...rest} />;\n}\n\nexport interface SettingsRowIds {\n  /** Pass to the control as `aria-labelledby`. */\n  labelId: string;\n  /** Pass to the control as `aria-describedby` (only set when there is a description). */\n  descriptionId?: string;\n}\n\nexport interface SettingsRowProps {\n  label: ReactNode;\n  description?: ReactNode;\n  /**\n   * The control on the right: a `Switch`-like toggle, a `SegmentedControl`, a value with a link. As a function it\n   * gets the ids to name the control after the row: `({ labelId, descriptionId }) => <CellSwitch … />`.\n   */\n  control?: ReactNode | ((ids: SettingsRowIds) => ReactNode);\n  icon?: IconName;\n  /** A badge after the label (\"Always on\", \"Part of Recognition\"). */\n  badge?: ReactNode;\n  /** Child rows, indented under this one (shown only when relevant, e.g. when the parent is on). */\n  children?: ReactNode;\n  /** A boxed form under the row (e.g. extra fields for this setting). */\n  detail?: ReactNode;\n  className?: string;\n}\n\n/**\n * One setting per row: label and description on the left, the control on the right. Stacks on narrow screens\n * when the control is wide (a segmented control); a toggle stays beside the label.\n */\nexport function SettingsRow({\n  label,\n  description,\n  control,\n  icon,\n  badge,\n  children,\n  detail,\n  className,\n}: SettingsRowProps) {\n  const labelId = useId();\n  const descriptionId = useId();\n  const ids = { labelId, descriptionId: description ? descriptionId : undefined };\n  return (\n    <div className={cx('grid gap-3 py-4 first:pt-0 last:pb-0', className)}>\n      <div className=\"flex flex-wrap items-center justify-between gap-x-6 gap-y-3\">\n        <div className=\"flex min-w-[min(100%,14rem)] flex-1 items-start gap-3\">\n          {icon && <IconTile icon={icon} size=\"sm\" tone=\"muted\" />}\n          <div className=\"grid min-w-0 gap-0.5\">\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span id={labelId} className=\"text-[15px] font-semibold text-fg\">\n                {label}\n              </span>\n              {badge}\n            </div>\n            {description && (\n              <p id={descriptionId} className=\"m-0 text-sm text-pretty text-fg-muted\">\n                {description}\n              </p>\n            )}\n          </div>\n        </div>\n        {control !== undefined && (\n          <div className=\"flex shrink-0 items-center gap-2\">\n            {typeof control === 'function' ? control(ids) : control}\n          </div>\n        )}\n      </div>\n      {detail && <div className=\"rounded-md bg-surface-muted p-4\">{detail}</div>}\n      {children && <div className=\"ml-4 border-l-2 border-border pl-4 sm:ml-6\">{children}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAQA,SAAgBA,EAAa,EAAE,cAAW,GAAGC,KAAwC;CACnF,OAAO,kBAAC,OAAD;EAAK,WAAWC,EAAG,oCAAoCC,CAAS;EAAG,GAAIF;CAAO,CAAA;AACvF;AA+BA,SAAgBG,EAAY,EAC1B,UACA,gBACA,YACA,SACA,UACA,aACA,WACA,gBACmB;CACnB,IAAMC,IAAUC,EAAM,GAChBC,IAAgBD,EAAM,GACtBE,IAAM;EAAE;EAAS,eAAeC,IAAcF,IAAgB,KAAA;CAAU;CAC9E,OACE,kBAAC,OAAD;EAAK,WAAWL,EAAG,wCAAwCC,CAAS;EAApE,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACGO,KAAQ,kBAACC,GAAD;MAAgB;MAAM,MAAK;MAAK,MAAK;KAAS,CAAA,GACvD,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,kBAAC,QAAD;QAAM,IAAIN;QAAS,WAAU;QAC1B,UAAAO;OACG,CAAA,GACLC,CACE;MACJ,CAAA,GAAAJ,KACC,kBAAC,KAAD;OAAG,IAAIF;OAAe,WAAU;OAC7B,UAAAE;MACA,CAAA,CAEF;KACF,CAAA,CAAA;IACJ,CAAA,GAAAK,MAAY,KAAA,KACX,kBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,OAAOA,KAAY,aAAaA,EAAQN,CAAG,IAAIM;IAC7C,CAAA,CAEJ;;GACJC,KAAU,kBAAC,OAAD;IAAK,WAAU;IAAmC,UAAAA;GAAY,CAAA;GACxEC,KAAY,kBAAC,OAAD;IAAK,WAAU;IAA8C;GAAc,CAAA;EACrF;;AAET"}

package/dist/side-nav/side-nav.d.ts

@@ -0,0 +1,36 @@
+import type { ElementType, ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+export interface NavItem {
+    label: string;
+    href?: string;
+    icon?: IconName;
+    /** Count or Badge shown at the end (hidden in the collapsed rail; a dot is shown instead). */
+    badge?: ReactNode;
+    /** Marks the current page (`aria-current="page"`). A parent with an active child opens automatically. */
+    active?: boolean;
+    /** `danger` for destructive areas ("Danger zone"): red label, red fill when active. */
+    tone?: 'default' | 'danger';
+    items?: NavItem[];
+}
+export interface NavSection {
+    title?: string;
+    items: NavItem[];
+}
+export interface SideNavProps {
+    sections: NavSection[];
+    /** Link component (e.g. Next.js `Link`). Receives `href`, `className`, `aria-current`, `onClick`, `children`. */
+    linkAs?: ElementType;
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+    /**
+     * `soft` (default): tinted active item, for the main navigation.
+     * `solid`: active item filled with the brand color, for secondary navigation (settings sections).
+     */
+    appearance?: 'soft' | 'solid';
+    className?: string;
+}
+/**
+ * Application navigation: sections, icons, badges and one level of nesting. Inside `AppShell`
+ * it collapses to an icon rail on desktop (labels in tooltips) and lives in a drawer on mobile.
+ */
+export declare function SideNav({ sections, linkAs, label, appearance, className }: SideNavProps): import("react").JSX.Element;

package/dist/side-nav/side-nav.js

@@ -0,0 +1,123 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Tooltip as n } from "../tooltip/tooltip.js";
+import { Glyph as r } from "../lib/glyphs.js";
+import { useAppShell as i } from "../app-shell/app-shell-context.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-collapsible";
+//#region src/side-nav/side-nav.tsx
+var c = (e) => !!e.active || !!e.items?.some(c), l = "flex min-h-10 w-full items-center gap-3 rounded-sm px-3 py-2 font-sans text-sm font-medium no-underline pointer-coarse:min-h-11 focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-focus aria-[current=page]:font-semibold", u = {
+	soft: {
+		default: "text-fg hover:bg-surface-muted aria-[current=page]:bg-surface-muted aria-[current=page]:text-link",
+		danger: "text-danger-fg hover:bg-danger-surface aria-[current=page]:bg-danger-surface"
+	},
+	solid: {
+		default: "text-fg hover:bg-surface-muted aria-[current=page]:bg-primary aria-[current=page]:text-on-primary aria-[current=page]:hover:bg-primary-hover",
+		danger: "text-danger-fg hover:bg-danger-surface aria-[current=page]:bg-danger-solid aria-[current=page]:text-on-danger-solid aria-[current=page]:hover:bg-danger-solid-hover"
+	}
+}, d = (t, n = "default") => e(l, u[t][n]);
+function f({ sections: t, linkAs: n = "a", label: r = "Main", appearance: s = "soft", className: c }) {
+	let { collapsed: l, inDrawer: u } = i(), d = l && !u;
+	return /* @__PURE__ */ a("nav", {
+		"aria-label": r,
+		className: e("flex flex-col gap-4", c),
+		children: t.map((e, t) => /* @__PURE__ */ o("div", {
+			className: "grid gap-0.5",
+			children: [e.title && (d ? t > 0 && /* @__PURE__ */ a("div", {
+				"aria-hidden": "true",
+				className: "mx-3 my-1 h-px bg-border"
+			}) : /* @__PURE__ */ a("p", {
+				className: "m-0 px-3 pt-1 pb-1.5 font-sans text-xs font-semibold tracking-wide text-fg-muted uppercase",
+				children: e.title
+			})), /* @__PURE__ */ a("ul", {
+				className: "m-0 grid list-none gap-0.5 p-0",
+				children: e.items.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(m, {
+					item: e,
+					linkAs: n,
+					rail: d,
+					appearance: s
+				}) }, e.label))
+			})]
+		}, e.title ?? t))
+	});
+}
+function p({ item: r, linkAs: s, rail: c, nested: l, appearance: u }) {
+	let { closeDrawer: f } = i(), p = /* @__PURE__ */ o(s, {
+		href: r.href ?? r.items?.find((e) => e.href)?.href,
+		"aria-current": r.active ? "page" : void 0,
+		"aria-label": c ? r.label : void 0,
+		onClick: f,
+		className: e(d(u, r.tone), c && "relative justify-center px-0", l && "pl-11"),
+		children: [
+			r.icon && /* @__PURE__ */ a(t, {
+				name: r.icon,
+				size: 22,
+				className: "shrink-0"
+			}),
+			!c && /* @__PURE__ */ a("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: r.label
+			}),
+			!c && r.badge,
+			c && r.badge && /* @__PURE__ */ a("span", {
+				"aria-hidden": "true",
+				className: "absolute top-1.5 right-2.5 size-2 rounded-full bg-danger-solid"
+			})
+		]
+	});
+	return c ? /* @__PURE__ */ a(n, {
+		content: r.label,
+		side: "right",
+		children: p
+	}) : p;
+}
+function m({ item: n, linkAs: i, rail: l, appearance: u }) {
+	return !n.items?.length || l ? /* @__PURE__ */ a(p, {
+		item: {
+			...n,
+			active: l ? c(n) : n.active
+		},
+		linkAs: i,
+		rail: l,
+		appearance: u
+	}) : /* @__PURE__ */ o(s.Root, {
+		defaultOpen: c(n),
+		children: [/* @__PURE__ */ o(s.Trigger, {
+			className: e(d("soft", n.tone), "group cursor-pointer border-0 bg-transparent text-left"),
+			children: [
+				n.icon && /* @__PURE__ */ a(t, {
+					name: n.icon,
+					size: 22,
+					className: "shrink-0"
+				}),
+				/* @__PURE__ */ a("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: n.label
+				}),
+				n.badge,
+				/* @__PURE__ */ a(r, {
+					name: "chevron-down",
+					size: 16,
+					className: "shrink-0 text-fg-muted transition-transform duration-200 group-data-[state=open]:rotate-180 motion-reduce:transition-none"
+				})
+			]
+		}), /* @__PURE__ */ a(s.Content, {
+			className: "kf-collapse overflow-hidden",
+			children: /* @__PURE__ */ a("ul", {
+				className: "m-0 grid list-none gap-0.5 p-0 pt-0.5",
+				children: n.items.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(p, {
+					item: e,
+					linkAs: i,
+					rail: !1,
+					nested: !0,
+					appearance: u
+				}) }, e.label))
+			})
+		})]
+	});
+}
+//#endregion
+export { f as SideNav };
+
+//# sourceMappingURL=side-nav.js.map

package/dist/side-nav/side-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.js","names":["RadixCollapsible","hasActive","item","rowBase","ROW_COLORS","rowClass","cx","appearance","tone","SideNav","useAppShell","rail","collapsed","inDrawer","label","className","sections","section","i","NavRow","NavLink","Link","link","c","closeDrawer","nested","Icon","Tooltip","Glyph","child"],"sources":["../../src/side-nav/side-nav.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixCollapsible from '@radix-ui/react-collapsible';\nimport type { ElementType, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Tooltip } from '../tooltip/tooltip';\nimport { useAppShell } from '../app-shell/app-shell-context';\n\nexport interface NavItem {\n  label: string;\n  href?: string;\n  icon?: IconName;\n  /** Count or Badge shown at the end (hidden in the collapsed rail; a dot is shown instead). */\n  badge?: ReactNode;\n  /** Marks the current page (`aria-current=\"page\"`). A parent with an active child opens automatically. */\n  active?: boolean;\n  /** `danger` for destructive areas (\"Danger zone\"): red label, red fill when active. */\n  tone?: 'default' | 'danger';\n  items?: NavItem[];\n}\n\nexport interface NavSection {\n  title?: string;\n  items: NavItem[];\n}\n\nexport interface SideNavProps {\n  sections: NavSection[];\n  /** Link component (e.g. Next.js `Link`). Receives `href`, `className`, `aria-current`, `onClick`, `children`. */\n  linkAs?: ElementType;\n  /** Accessible name of the navigation landmark. */\n  label?: string;\n  /**\n   * `soft` (default): tinted active item, for the main navigation.\n   * `solid`: active item filled with the brand color, for secondary navigation (settings sections).\n   */\n  appearance?: 'soft' | 'solid';\n  className?: string;\n}\n\nconst hasActive = (item: NavItem): boolean => !!item.active || !!item.items?.some(hasActive);\n\nconst rowBase =\n  'flex min-h-10 w-full items-center gap-3 rounded-sm px-3 py-2 font-sans text-sm font-medium no-underline pointer-coarse:min-h-11 ' +\n  'focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-focus aria-[current=page]:font-semibold';\n\n// Colors per appearance and tone: `cx` does not merge classes, so each row gets exactly one set.\nconst ROW_COLORS = {\n  soft: {\n    default: 'text-fg hover:bg-surface-muted aria-[current=page]:bg-surface-muted aria-[current=page]:text-link',\n    danger: 'text-danger-fg hover:bg-danger-surface aria-[current=page]:bg-danger-surface',\n  },\n  solid: {\n    default:\n      'text-fg hover:bg-surface-muted aria-[current=page]:bg-primary aria-[current=page]:text-on-primary aria-[current=page]:hover:bg-primary-hover',\n    danger:\n      'text-danger-fg hover:bg-danger-surface aria-[current=page]:bg-danger-solid aria-[current=page]:text-on-danger-solid aria-[current=page]:hover:bg-danger-solid-hover',\n  },\n} as const;\n\ntype Appearance = keyof typeof ROW_COLORS;\nconst rowClass = (appearance: Appearance, tone: NavItem['tone'] = 'default') => cx(rowBase, ROW_COLORS[appearance][tone]);\n\n/**\n * Application navigation: sections, icons, badges and one level of nesting. Inside `AppShell`\n * it collapses to an icon rail on desktop (labels in tooltips) and lives in a drawer on mobile.\n */\nexport function SideNav({ sections, linkAs = 'a', label = 'Main', appearance = 'soft', className }: SideNavProps) {\n  const { collapsed, inDrawer } = useAppShell();\n  const rail = collapsed && !inDrawer;\n  return (\n    <nav aria-label={label} className={cx('flex flex-col gap-4', className)}>\n      {sections.map((section, i) => (\n        <div key={section.title ?? i} className=\"grid gap-0.5\">\n          {section.title &&\n            (rail ? (\n              i > 0 && <div aria-hidden=\"true\" className=\"mx-3 my-1 h-px bg-border\" />\n            ) : (\n              <p className=\"m-0 px-3 pt-1 pb-1.5 font-sans text-xs font-semibold tracking-wide text-fg-muted uppercase\">\n                {section.title}\n              </p>\n            ))}\n          <ul className=\"m-0 grid list-none gap-0.5 p-0\">\n            {section.items.map((item) => (\n              <li key={item.label}>\n                <NavRow item={item} linkAs={linkAs} rail={rail} appearance={appearance} />\n              </li>\n            ))}\n          </ul>\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction NavLink({\n  item,\n  linkAs: Link,\n  rail,\n  nested,\n  appearance,\n}: {\n  item: NavItem;\n  linkAs: ElementType;\n  rail: boolean;\n  nested?: boolean;\n  appearance: Appearance;\n}) {\n  const { closeDrawer } = useAppShell();\n  const link = (\n    <Link\n      href={item.href ?? item.items?.find((c) => c.href)?.href}\n      aria-current={item.active ? 'page' : undefined}\n      aria-label={rail ? item.label : undefined}\n      onClick={closeDrawer}\n      className={cx(rowClass(appearance, item.tone), rail && 'relative justify-center px-0', nested && 'pl-11')}\n    >\n      {item.icon && <Icon name={item.icon} size={22} className=\"shrink-0\" />}\n      {!rail && <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>}\n      {!rail && item.badge}\n      {rail && item.badge && (\n        <span aria-hidden=\"true\" className=\"absolute top-1.5 right-2.5 size-2 rounded-full bg-danger-solid\" />\n      )}\n    </Link>\n  );\n  return rail ? (\n    <Tooltip content={item.label} side=\"right\">\n      {link}\n    </Tooltip>\n  ) : (\n    link\n  );\n}\n\nfunction NavRow({\n  item,\n  linkAs,\n  rail,\n  appearance,\n}: {\n  item: NavItem;\n  linkAs: ElementType;\n  rail: boolean;\n  appearance: Appearance;\n}) {\n  if (!item.items?.length || rail)\n    return (\n      <NavLink\n        item={{ ...item, active: rail ? hasActive(item) : item.active }}\n        linkAs={linkAs}\n        rail={rail}\n        appearance={appearance}\n      />\n    );\n  return (\n    <RadixCollapsible.Root defaultOpen={hasActive(item)}>\n      <RadixCollapsible.Trigger\n        className={cx(rowClass('soft', item.tone), 'group cursor-pointer border-0 bg-transparent text-left')}\n      >\n        {item.icon && <Icon name={item.icon} size={22} className=\"shrink-0\" />}\n        <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n        {item.badge}\n        <Glyph\n          name=\"chevron-down\"\n          size={16}\n          className=\"shrink-0 text-fg-muted transition-transform duration-200 group-data-[state=open]:rotate-180 motion-reduce:transition-none\"\n        />\n      </RadixCollapsible.Trigger>\n      <RadixCollapsible.Content className=\"kf-collapse overflow-hidden\">\n        <ul className=\"m-0 grid list-none gap-0.5 p-0 pt-0.5\">\n          {item.items.map((child) => (\n            <li key={child.label}>\n              <NavLink item={child} linkAs={linkAs} rail={false} nested appearance={appearance} />\n            </li>\n          ))}\n        </ul>\n      </RadixCollapsible.Content>\n    </RadixCollapsible.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/site-header/site-header.d.ts

@@ -0,0 +1,32 @@
+import { type ElementType, type ReactNode } from 'react';
+export interface SiteLink {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+export interface SiteHeaderProps {
+    /** Logo linked to home, e.g. `<a href="/"><Logo collapse="scroll" /></a>` (the Logo already names the link "Kodffe"). */
+    logo: ReactNode;
+    /** Primary links. Not used by `variant="minimal"`. */
+    links?: SiteLink[];
+    /** Call-to-action area (e.g. "Book a call" Button). Shown at the bottom of the mobile menu too. */
+    actions?: ReactNode;
+    /** Compact call to action kept in the bar below 768px, next to the menu button (e.g. a small "Book a call"). */
+    mobileAction?: ReactNode;
+    linkAs?: ElementType;
+    /** `default`: the page background, translucent. `brand`: a solid brand bar with white text (product sites). */
+    tone?: 'default' | 'brand';
+    /** `full` (default): logo, links and actions. `minimal`: logo and actions only (sign-in, checkout, landing pages). */
+    variant?: 'full' | 'minimal';
+    labels?: {
+        nav?: string;
+        openMenu?: string;
+        menu?: string;
+    };
+    className?: string;
+}
+/**
+ * Marketing header for kodffe.com: logo, primary links, CTA. Sticky with a translucent background.
+ * Below 960px the links move into a right drawer with large tap targets.
+ */
+export declare function SiteHeader({ logo, links, actions, mobileAction, linkAs: Link, tone, variant, labels, className, }: SiteHeaderProps): import("react").JSX.Element;

package/dist/site-header/site-header.js

@@ -0,0 +1,99 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Drawer as t, DrawerContent as n, DrawerTrigger as r } from "../drawer/drawer.js";
+import { Glyph as i } from "../lib/glyphs.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useState as s } from "react";
+//#region src/site-header/site-header.tsx
+function c({ logo: c, links: l = [], actions: u, mobileAction: d, linkAs: f = "a", tone: p = "default", variant: m = "full", labels: h = {}, className: g }) {
+	let { nav: _ = "Main", openMenu: v = "Open menu", menu: y = "Menu" } = h, [b, x] = s(!1), S = p === "brand", C = e("sticky top-0 z-40 font-sans", S ? "bg-primary-strong text-fg" : "border-b border-border bg-bg/85 backdrop-blur-md", g), w = e("shrink-0 text-2xl", S ? "text-fg" : "text-logo");
+	return m === "minimal" ? /* @__PURE__ */ a("header", {
+		...S ? { "data-theme": "dark" } : {},
+		className: C,
+		children: /* @__PURE__ */ o("div", {
+			className: "mx-auto flex h-16 max-w-[75rem] items-center justify-between gap-6 px-gutter",
+			children: [/* @__PURE__ */ a("div", {
+				className: w,
+				children: c
+			}), u && /* @__PURE__ */ a("div", {
+				className: "flex items-center gap-3",
+				children: u
+			})]
+		})
+	}) : /* @__PURE__ */ a("header", {
+		...S ? { "data-theme": "dark" } : {},
+		className: C,
+		children: /* @__PURE__ */ o("div", {
+			className: "mx-auto flex h-16 max-w-[75rem] items-center gap-6 px-gutter md:h-[4.5rem]",
+			children: [
+				/* @__PURE__ */ a("div", {
+					className: w,
+					children: c
+				}),
+				/* @__PURE__ */ a("nav", {
+					"aria-label": _,
+					className: "hidden flex-1 justify-center md:flex",
+					children: /* @__PURE__ */ a("ul", {
+						className: "m-0 flex list-none gap-1 p-0",
+						children: l.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(f, {
+							href: e.href,
+							"aria-current": e.active ? "page" : void 0,
+							className: "rounded-full px-4 py-2 text-[15px] font-medium text-fg-muted no-underline hover:bg-surface-muted hover:text-fg focus-visible:outline-3 focus-visible:outline-focus aria-[current=page]:text-fg aria-[current=page]:font-semibold",
+							children: e.label
+						}) }, e.href))
+					})
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "ml-auto hidden items-center gap-3 md:flex",
+					children: u
+				}),
+				d && /* @__PURE__ */ a("div", {
+					className: "ml-auto md:hidden",
+					children: d
+				}),
+				/* @__PURE__ */ o(t, {
+					open: b,
+					onOpenChange: x,
+					children: [/* @__PURE__ */ a(r, {
+						asChild: !0,
+						children: /* @__PURE__ */ a("button", {
+							type: "button",
+							"aria-label": v,
+							className: e("-mr-2 grid size-11 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-focus md:hidden", !d && "ml-auto"),
+							children: /* @__PURE__ */ a(i, {
+								name: "menu",
+								size: 24
+							})
+						})
+					}), /* @__PURE__ */ o(n, {
+						side: "right",
+						size: "sm",
+						title: y,
+						hideTitle: !0,
+						bodyClassName: "flex flex-col",
+						children: [/* @__PURE__ */ a("nav", {
+							"aria-label": _,
+							children: /* @__PURE__ */ a("ul", {
+								className: "m-0 grid list-none gap-1 p-0",
+								children: l.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(f, {
+									href: e.href,
+									"aria-current": e.active ? "page" : void 0,
+									onClick: () => x(!1),
+									className: "flex min-h-12 items-center rounded-sm px-3 font-display text-xl font-bold text-fg no-underline hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-focus aria-[current=page]:text-link",
+									children: e.label
+								}) }, e.href))
+							})
+						}), u && /* @__PURE__ */ a("div", {
+							className: "mt-auto grid gap-3 pt-8 *:w-full",
+							children: u
+						})]
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { c as SiteHeader };
+
+//# sourceMappingURL=site-header.js.map

package/dist/site-header/site-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"site-header.js","names":["SiteHeader","Link","labels","open","setOpen","useState","brand","tone","shell","cx","className","logoBox","variant","logo","actions","nav","links","l","mobileAction","Drawer","DrawerTrigger","openMenu","Glyph","DrawerContent","menu"],"sources":["../../src/site-header/site-header.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type ElementType, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Drawer, DrawerContent, DrawerTrigger } from '../drawer/drawer';\n\nexport interface SiteLink {\n  label: string;\n  href: string;\n  active?: boolean;\n}\n\nexport interface SiteHeaderProps {\n  /** Logo linked to home, e.g. `<a href=\"/\"><Logo collapse=\"scroll\" /></a>` (the Logo already names the link \"Kodffe\"). */\n  logo: ReactNode;\n  /** Primary links. Not used by `variant=\"minimal\"`. */\n  links?: SiteLink[];\n  /** Call-to-action area (e.g. \"Book a call\" Button). Shown at the bottom of the mobile menu too. */\n  actions?: ReactNode;\n  /** Compact call to action kept in the bar below 768px, next to the menu button (e.g. a small \"Book a call\"). */\n  mobileAction?: ReactNode;\n  linkAs?: ElementType;\n  /** `default`: the page background, translucent. `brand`: a solid brand bar with white text (product sites). */\n  tone?: 'default' | 'brand';\n  /** `full` (default): logo, links and actions. `minimal`: logo and actions only (sign-in, checkout, landing pages). */\n  variant?: 'full' | 'minimal';\n  labels?: { nav?: string; openMenu?: string; menu?: string };\n  className?: string;\n}\n\n/**\n * Marketing header for kodffe.com: logo, primary links, CTA. Sticky with a translucent background.\n * Below 960px the links move into a right drawer with large tap targets.\n */\nexport function SiteHeader({\n  logo,\n  links = [],\n  actions,\n  mobileAction,\n  linkAs: Link = 'a',\n  tone = 'default',\n  variant = 'full',\n  labels = {},\n  className,\n}: SiteHeaderProps) {\n  const { nav = 'Main', openMenu = 'Open menu', menu = 'Menu' } = labels;\n  const [open, setOpen] = useState(false);\n  const brand = tone === 'brand';\n  const shell = cx(\n    'sticky top-0 z-40 font-sans',\n    // The brand bar is dark in both themes: the dark token set keeps text, links and focus rings AA.\n    brand ? 'bg-primary-strong text-fg' : 'border-b border-border bg-bg/85 backdrop-blur-md',\n    className,\n  );\n  const logoBox = cx('shrink-0 text-2xl', brand ? 'text-fg' : 'text-logo');\n  if (variant === 'minimal') {\n    return (\n      <header {...(brand ? { 'data-theme': 'dark' } : {})} className={shell}>\n        <div className=\"mx-auto flex h-16 max-w-[75rem] items-center justify-between gap-6 px-gutter\">\n          <div className={logoBox}>{logo}</div>\n          {actions && <div className=\"flex items-center gap-3\">{actions}</div>}\n        </div>\n      </header>\n    );\n  }\n  return (\n    <header {...(brand ? { 'data-theme': 'dark' } : {})} className={shell}>\n      <div className=\"mx-auto flex h-16 max-w-[75rem] items-center gap-6 px-gutter md:h-[4.5rem]\">\n        <div className={logoBox}>{logo}</div>\n        <nav aria-label={nav} className=\"hidden flex-1 justify-center md:flex\">\n          <ul className=\"m-0 flex list-none gap-1 p-0\">\n            {links.map((l) => (\n              <li key={l.href}>\n                <Link\n                  href={l.href}\n                  aria-current={l.active ? 'page' : undefined}\n                  className=\"rounded-full px-4 py-2 text-[15px] font-medium text-fg-muted no-underline hover:bg-surface-muted hover:text-fg focus-visible:outline-3 focus-visible:outline-focus aria-[current=page]:text-fg aria-[current=page]:font-semibold\"\n                >\n                  {l.label}\n                </Link>\n              </li>\n            ))}\n          </ul>\n        </nav>\n        <div className=\"ml-auto hidden items-center gap-3 md:flex\">{actions}</div>\n        {mobileAction && <div className=\"ml-auto md:hidden\">{mobileAction}</div>}\n        <Drawer open={open} onOpenChange={setOpen}>\n          <DrawerTrigger asChild>\n            <button\n              type=\"button\"\n              aria-label={openMenu}\n              className={cx(\n                '-mr-2 grid size-11 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-focus md:hidden',\n                !mobileAction && 'ml-auto',\n              )}\n            >\n              <Glyph name=\"menu\" size={24} />\n            </button>\n          </DrawerTrigger>\n          <DrawerContent side=\"right\" size=\"sm\" title={menu} hideTitle bodyClassName=\"flex flex-col\">\n            <nav aria-label={nav}>\n              <ul className=\"m-0 grid list-none gap-1 p-0\">\n                {links.map((l) => (\n                  <li key={l.href}>\n                    <Link\n                      href={l.href}\n                      aria-current={l.active ? 'page' : undefined}\n                      onClick={() => setOpen(false)}\n                      className=\"flex min-h-12 items-center rounded-sm px-3 font-display text-xl font-bold text-fg no-underline hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-focus aria-[current=page]:text-link\"\n                    >\n                      {l.label}\n                    </Link>\n                  </li>\n                ))}\n              </ul>\n            </nav>\n            {actions && <div className=\"mt-auto grid gap-3 pt-8 *:w-full\">{actions}</div>}\n          </DrawerContent>\n        </Drawer>\n      </div>\n    </header>\n  );\n}\n"],"mappings":";;;;;;;AAmCA,SAAgBA,EAAW,EACzB,SACA,WAAQ,CAAC,GACT,YACA,iBACA,QAAQC,IAAO,KACf,UAAO,WACP,aAAU,QACV,YAAS,CAAC,GACV,gBACkB;CAClB,IAAM,EAAE,SAAM,QAAQ,cAAW,aAAa,UAAO,WAAWC,GAC1D,CAACC,GAAMC,KAAWC,EAAS,EAAK,GAChCC,IAAQC,MAAS,SACjBC,IAAQC,EACZ,+BAEAH,IAAQ,8BAA8B,oDACtCI,CACF,GACMC,IAAUF,EAAG,qBAAqBH,IAAQ,YAAY,WAAW;CAWvE,OAVIM,MAAY,YAEZ,kBAAC,UAAD;EAAQ,GAAKN,IAAQ,EAAE,cAAc,OAAO,IAAI,CAAC;EAAI,WAAWE;EAC9D,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,OAAD;IAAK,WAAWG;IAAU,UAAAE;GAAU,CAAA,GACnCC,KAAW,kBAAC,OAAD;IAAK,WAAU;IAA2B,UAAAA;GAAa,CAAA,CAChE;;CACC,CAAA,IAIV,kBAAC,UAAD;EAAQ,GAAKR,IAAQ,EAAE,cAAc,OAAO,IAAI,CAAC;EAAI,WAAWE;EAC9D,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAAC,OAAD;KAAK,WAAWG;KAAU,UAAAE;IAAU,CAAA;IACpC,kBAAC,OAAD;KAAK,cAAYE;KAAK,WAAU;KAC9B,UAAA,kBAAC,MAAD;MAAI,WAAU;MACX,UAAAC,EAAM,KAAK,MACV,kBAAC,MAAD,EAAA,UACE,kBAACf,GAAD;OACE,MAAMgB,EAAE;OACR,gBAAcA,EAAE,SAAS,SAAS,KAAA;OAClC,WAAU;OAET,UAAAA,EAAE;MACC,CAAA,EACJ,GARKA,EAAE,IAQP,CACL;KACC,CAAA;IACD,CAAA;IACL,kBAAC,OAAD;KAAK,WAAU;KAA6C,UAAAH;IAAa,CAAA;IACxEI,KAAgB,kBAAC,OAAD;KAAK,WAAU;KAAqB,UAAAA;IAAkB,CAAA;IACvE,kBAACC,GAAD;KAAc;KAAM,cAAcf;KAAlC,UAAA,CACE,kBAACgB,GAAD;MAAe,SAAA;MACb,UAAA,kBAAC,UAAD;OACE,MAAK;OACL,cAAYC;OACZ,WAAWZ,EACT,0LACA,CAACS,KAAgB,SACnB;OAEA,UAAA,kBAACI,GAAD;QAAO,MAAK;QAAO,MAAM;OAAK,CAAA;MACxB,CAAA;KACK,CAAA,GACf,kBAACC,GAAD;MAAe,MAAK;MAAQ,MAAK;MAAK,OAAOC;MAAM,WAAA;MAAU,eAAc;MAA3E,UAAA,CACE,kBAAC,OAAD;OAAK,cAAYT;OACf,UAAA,kBAAC,MAAD;QAAI,WAAU;QACX,UAAAC,EAAM,KAAK,MACV,kBAAC,MAAD,EAAA,UACE,kBAACf,GAAD;SACE,MAAMgB,EAAE;SACR,gBAAcA,EAAE,SAAS,SAAS,KAAA;SAClC,eAAeb,EAAQ,EAAK;SAC5B,WAAU;SAET,UAAAa,EAAE;QACC,CAAA,EACJ,GATKA,EAAE,IASP,CACL;OACC,CAAA;MACD,CAAA,GACJH,KAAW,kBAAC,OAAD;OAAK,WAAU;OAAoC,UAAAA;MAAa,CAAA,CAC/D;KACT,CAAA,CAAA;;GACL;;CACC,CAAA;AAEZ"}

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+export type SkeletonShape = 'text' | 'circle' | 'rect';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    shape?: SkeletonShape;
+    /** For `text`: number of lines; the last one is shorter. */
+    lines?: number;
+    /** Width/height via classes (`w-40 h-24`, `size-10`) or style. */
+    className?: string;
+}
+/**
+ * Placeholder that mirrors the layout of content while it loads, so the page does not jump.
+ * Decorative (`aria-hidden`): give the loading container `role="status"`, `aria-busy="true"` and an
+ * `aria-label` such as "Loading runs", and remove them when the content arrives.
+ * Actions use `Spinner` (small) or `Mascot` (40 px or more); skeletons are for content.
+ */
+export declare function Skeleton({ shape, lines, className, ...rest }: SkeletonProps): import("react").JSX.Element;

package/dist/skeleton/skeleton.js

@@ -0,0 +1,19 @@
+import { cx as e } from "../lib/cx.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/skeleton/skeleton.tsx
+function n({ shape: n = "rect", lines: r = 1, className: i, ...a }) {
+	return n === "text" ? /* @__PURE__ */ t("div", {
+		"aria-hidden": "true",
+		className: e("grid w-full gap-2", i),
+		...a,
+		children: Array.from({ length: r }, (n, i) => /* @__PURE__ */ t("div", { className: e("kf-skeleton h-3.5 rounded-full", i === r - 1 && r > 1 ? "w-3/5" : "w-full") }, i))
+	}) : /* @__PURE__ */ t("div", {
+		"aria-hidden": "true",
+		className: e("kf-skeleton", n === "circle" ? "size-10 rounded-full" : "h-24 w-full rounded-md", i),
+		...a
+	});
+}
+//#endregion
+export { n as Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":["Skeleton","rest","shape","cx","className","lines"],"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cx } from '../lib/cx';\n\nexport type SkeletonShape = 'text' | 'circle' | 'rect';\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  shape?: SkeletonShape;\n  /** For `text`: number of lines; the last one is shorter. */\n  lines?: number;\n  /** Width/height via classes (`w-40 h-24`, `size-10`) or style. */\n  className?: string;\n}\n\n/**\n * Placeholder that mirrors the layout of content while it loads, so the page does not jump.\n * Decorative (`aria-hidden`): give the loading container `role=\"status\"`, `aria-busy=\"true\"` and an\n * `aria-label` such as \"Loading runs\", and remove them when the content arrives.\n * Actions use `Spinner` (small) or `Mascot` (40 px or more); skeletons are for content.\n */\nexport function Skeleton({ shape = 'rect', lines = 1, className, ...rest }: SkeletonProps) {\n  if (shape === 'text') {\n    return (\n      <div aria-hidden=\"true\" className={cx('grid w-full gap-2', className)} {...rest}>\n        {Array.from({ length: lines }, (_, i) => (\n          <div key={i} className={cx('kf-skeleton h-3.5 rounded-full', i === lines - 1 && lines > 1 ? 'w-3/5' : 'w-full')} />\n        ))}\n      </div>\n    );\n  }\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cx('kf-skeleton', shape === 'circle' ? 'size-10 rounded-full' : 'h-24 w-full rounded-md', className)}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;AAmBA,SAAgBA,EAAS,EAAE,WAAQ,QAAQ,WAAQ,GAAG,cAAW,GAAGC,KAAuB;CAUzF,OATIC,MAAU,SAEV,kBAAC,OAAD;EAAK,eAAY;EAAO,WAAWC,EAAG,qBAAqBC,CAAS;EAAG,GAAIH;EACxE,UAAA,MAAM,KAAK,EAAE,QAAQI,EAAM,IAAI,GAAG,MACjC,kBAAC,OAAD,EAAa,WAAWF,EAAG,kCAAkC,MAAME,IAAQ,KAAKA,IAAQ,IAAI,UAAU,QAAQ,EAAI,GAAxG,CAAwG,CACnH;CACE,CAAA,IAIP,kBAAC,OAAD;EACE,eAAY;EACZ,WAAWF,EAAG,eAAeD,MAAU,WAAW,yBAAyB,0BAA0BE,CAAS;EAC9G,GAAIH;CACL,CAAA;AAEL"}