@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/slider/slider.d.ts

@@ -0,0 +1,15 @@
+import * as RadixSlider from '@radix-ui/react-slider';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof RadixSlider.Root>, 'children'> {
+    /** Formats the visible value and `aria-valuetext` ("40 h / month", "$2,400"). */
+    format?: (value: number) => string;
+    /** Show the value above the track (default) or hide it when shown elsewhere. */
+    showValue?: boolean;
+    /** Labels under the ends of the track. */
+    minLabel?: ReactNode;
+    maxLabel?: ReactNode;
+    /** Accessible names per thumb (required for ranges: ["Minimum price", "Maximum price"]). */
+    thumbLabels?: string[];
+}
+/** Pick a value or range on a scale (ROI calculator, budgets, thresholds). The value is always visible. */
+export declare function Slider({ format, showValue, minLabel, maxLabel, thumbLabels, value, defaultValue, onValueChange, className, ...rest }: SliderProps): import("react").JSX.Element;

package/dist/slider/slider.js

@@ -0,0 +1,48 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { useFieldProps as t } from "../input/input.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useState as i } from "react";
+import * as a from "@radix-ui/react-slider";
+//#region src/slider/slider.tsx
+function o({ format: o = String, showValue: s = !0, minLabel: c, maxLabel: l, thumbLabels: u, value: d, defaultValue: f, onValueChange: p, className: m, ...h }) {
+	let g = t(h), [_, v] = i(f ?? [h.min ?? 0]), y = d ?? _;
+	return /* @__PURE__ */ r("div", {
+		className: e("grid gap-2 font-sans", m),
+		children: [
+			s && /* @__PURE__ */ n("output", {
+				htmlFor: g.id,
+				className: "justify-self-end font-display text-lg font-bold text-fg tabular-nums",
+				children: y.map(o).join(" – ")
+			}),
+			/* @__PURE__ */ r(a.Root, {
+				...h,
+				value: d,
+				defaultValue: f,
+				onValueChange: (e) => {
+					v(e), p?.(e);
+				},
+				className: "relative flex h-6 w-full touch-none items-center select-none data-[disabled]:opacity-50",
+				children: [/* @__PURE__ */ n(a.Track, {
+					className: "relative h-2 grow overflow-hidden rounded-full bg-surface-muted",
+					children: /* @__PURE__ */ n(a.Range, { className: "absolute h-full rounded-full bg-primary" })
+				}), y.map((e, t) => /* @__PURE__ */ n(a.Thumb, {
+					id: t === 0 ? g.id : void 0,
+					"aria-label": u?.[t],
+					"aria-labelledby": !u && g.id ? `${g.id}-label` : void 0,
+					"aria-describedby": g["aria-describedby"],
+					"aria-valuetext": o(e),
+					className: "block size-6 cursor-grab rounded-full border-2 border-primary bg-surface shadow-[0_2px_6px_rgb(0_0_0/0.18)] transition-transform hover:scale-110 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus active:cursor-grabbing pointer-coarse:size-7 motion-reduce:transition-none"
+				}, t))]
+			}),
+			(c || l) && /* @__PURE__ */ r("div", {
+				className: "flex justify-between text-xs text-fg-muted",
+				children: [/* @__PURE__ */ n("span", { children: c }), /* @__PURE__ */ n("span", { children: l })]
+			})
+		]
+	});
+}
+//#endregion
+export { o as Slider };
+
+//# sourceMappingURL=slider.js.map

package/dist/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":["RadixSlider","Slider","rest","field","useFieldProps","internal","setInternal","useState","defaultValue","current","value","cx","className","showValue","format","v","onValueChange","i","thumbLabels","minLabel","maxLabel"],"sources":["../../src/slider/slider.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixSlider from '@radix-ui/react-slider';\nimport { useState, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { useFieldProps } from '../input/input';\n\nexport interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof RadixSlider.Root>, 'children'> {\n  /** Formats the visible value and `aria-valuetext` (\"40 h / month\", \"$2,400\"). */\n  format?: (value: number) => string;\n  /** Show the value above the track (default) or hide it when shown elsewhere. */\n  showValue?: boolean;\n  /** Labels under the ends of the track. */\n  minLabel?: ReactNode;\n  maxLabel?: ReactNode;\n  /** Accessible names per thumb (required for ranges: [\"Minimum price\", \"Maximum price\"]). */\n  thumbLabels?: string[];\n}\n\n/** Pick a value or range on a scale (ROI calculator, budgets, thresholds). The value is always visible. */\nexport function Slider({\n  format = String,\n  showValue = true,\n  minLabel,\n  maxLabel,\n  thumbLabels,\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  ...rest\n}: SliderProps) {\n  const field = useFieldProps(rest);\n  const [internal, setInternal] = useState(defaultValue ?? [rest.min ?? 0]);\n  const current = value ?? internal;\n  return (\n    <div className={cx('grid gap-2 font-sans', className)}>\n      {showValue && (\n        <output htmlFor={field.id} className=\"justify-self-end font-display text-lg font-bold text-fg tabular-nums\">\n          {current.map(format).join(' – ')}\n        </output>\n      )}\n      <RadixSlider.Root\n        {...rest}\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={(v) => {\n          setInternal(v);\n          onValueChange?.(v);\n        }}\n        className=\"relative flex h-6 w-full touch-none items-center select-none data-[disabled]:opacity-50\"\n      >\n        <RadixSlider.Track className=\"relative h-2 grow overflow-hidden rounded-full bg-surface-muted\">\n          <RadixSlider.Range className=\"absolute h-full rounded-full bg-primary\" />\n        </RadixSlider.Track>\n        {current.map((v, i) => (\n          <RadixSlider.Thumb\n            key={i}\n            id={i === 0 ? field.id : undefined}\n            aria-label={thumbLabels?.[i]}\n            aria-labelledby={!thumbLabels && field.id ? `${field.id}-label` : undefined}\n            aria-describedby={field['aria-describedby']}\n            aria-valuetext={format(v)}\n            className=\"block size-6 cursor-grab rounded-full border-2 border-primary bg-surface shadow-[0_2px_6px_rgb(0_0_0/0.18)] transition-transform hover:scale-110 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus active:cursor-grabbing pointer-coarse:size-7 motion-reduce:transition-none\"\n          />\n        ))}\n      </RadixSlider.Root>\n      {(minLabel || maxLabel) && (\n        <div className=\"flex justify-between text-xs text-fg-muted\">\n          <span>{minLabel}</span>\n          <span>{maxLabel}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAoBA,SAAgBC,EAAO,EACrB,YAAS,QACT,eAAY,IACZ,aACA,aACA,gBACA,UACA,iBACA,kBACA,cACA,GAAGC,KACW;CACd,IAAMC,IAAQC,EAAcF,CAAI,GAC1B,CAACG,GAAUC,KAAeC,EAASC,KAAgB,CAACN,EAAK,OAAO,CAAC,CAAC,GAClEO,IAAUC,KAASL;CACzB,OACE,kBAAC,OAAD;EAAK,WAAWM,EAAG,wBAAwBC,CAAS;EAApD,UAAA;GACGC,KACC,kBAAC,UAAD;IAAQ,SAASV,EAAM;IAAI,WAAU;IAClC,UAAAM,EAAQ,IAAIK,CAAM,CAAC,CAAC,KAAK,KAAK;GACzB,CAAA;GAEV,kBAACd,EAAY,MAAb;IACE,GAAIE;IACG;IACO;IACd,gBAAgB,MAAM;KAEpB,AADAI,EAAYS,CAAC,GACbC,IAAgBD,CAAC;IACnB;IACA,WAAU;IARZ,UAAA,CAUE,kBAACf,EAAY,OAAb;KAAmB,WAAU;KAC3B,UAAA,kBAACA,EAAY,OAAb,EAAmB,WAAU,0CAA2C,CAAA;IACvD,CAAA,GAClBS,EAAQ,KAAK,GAAG,MACf,kBAACT,EAAY,OAAb;KAEE,IAAIiB,MAAM,IAAId,EAAM,KAAK,KAAA;KACzB,cAAYe,IAAcD;KAC1B,mBAAiB,CAACC,KAAef,EAAM,KAAK,GAAGA,EAAM,GAAG,UAAU,KAAA;KAClE,oBAAkBA,EAAM;KACxB,kBAAgBW,EAAOC,CAAC;KACxB,WAAU;IACX,GAPME,CAON,CACF,CACe;;IAChBE,KAAYC,MACZ,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD,EAAA,UAAOD,EAAe,CAAA,GACtB,kBAAC,QAAD,EAAA,UAAOC,EAAe,CAAA,CACnB;;EAEJ;;AAET"}

package/dist/spinner/spinner.d.ts

@@ -0,0 +1,15 @@
+import type { SVGProps } from 'react';
+export interface SpinnerProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+    /** Height in px or any CSS length. Defaults to 1em (follows the text). */
+    size?: number | string;
+    /**
+     * Accessible name ("Loading results"). Leave it out when the surrounding control already says it is busy
+     * (`aria-busy` on a button); the spinner is then hidden from screen readers.
+     */
+    label?: string;
+}
+/**
+ * Small progress indicator (ADR-0015): the logo's eye with the pupil going round, no mouth. For buttons, inputs,
+ * toasts and any place under 40 px; use `Mascot state="loading"` for large waiting areas.
+ */
+export declare function Spinner({ size, label, className, style, ...rest }: SpinnerProps): import("react").JSX.Element;

package/dist/spinner/spinner.js

@@ -0,0 +1,42 @@
+import { cx as e } from "../lib/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/spinner/spinner.tsx
+function r({ size: r = "1em", label: i, className: a, style: o, ...s }) {
+	let c = i ? {
+		role: "status",
+		"aria-label": i
+	} : { "aria-hidden": !0 };
+	return /* @__PURE__ */ n("svg", {
+		viewBox: "16 0 68 68",
+		focusable: "false",
+		className: e("kf-spinner inline-block shrink-0", a),
+		style: {
+			height: r,
+			width: "auto",
+			...o
+		},
+		...c,
+		...s,
+		children: [/* @__PURE__ */ t("circle", {
+			cx: "50",
+			cy: "34",
+			r: "25.57",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "11",
+			opacity: "0.3"
+		}), /* @__PURE__ */ t("g", {
+			className: "kf-spinner__pupil",
+			children: /* @__PURE__ */ t("circle", {
+				cx: "58",
+				cy: "34",
+				r: "9.72",
+				fill: "currentColor"
+			})
+		})]
+	});
+}
+//#endregion
+export { r as Spinner };
+
+//# sourceMappingURL=spinner.js.map

package/dist/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":["Spinner","rest","a11y","label","cx","className","size","style"],"sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { cx } from '../lib/cx';\n\nexport interface SpinnerProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {\n  /** Height in px or any CSS length. Defaults to 1em (follows the text). */\n  size?: number | string;\n  /**\n   * Accessible name (\"Loading results\"). Leave it out when the surrounding control already says it is busy\n   * (`aria-busy` on a button); the spinner is then hidden from screen readers.\n   */\n  label?: string;\n}\n\n/**\n * Small progress indicator (ADR-0015): the logo's eye with the pupil going round, no mouth. For buttons, inputs,\n * toasts and any place under 40 px; use `Mascot state=\"loading\"` for large waiting areas.\n */\nexport function Spinner({ size = '1em', label, className, style, ...rest }: SpinnerProps) {\n  const a11y = label ? { role: 'status', 'aria-label': label } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      viewBox=\"16 0 68 68\"\n      focusable=\"false\"\n      className={cx('kf-spinner inline-block shrink-0', className)}\n      style={{ height: size, width: 'auto', ...style }}\n      {...a11y}\n      {...rest}\n    >\n      <circle cx=\"50\" cy=\"34\" r=\"25.57\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"11\" opacity=\"0.3\" />\n      <g className=\"kf-spinner__pupil\">\n        <circle cx=\"58\" cy=\"34\" r=\"9.72\" fill=\"currentColor\" />\n      </g>\n    </svg>\n  );\n}\n"],"mappings":";;;AAiBA,SAAgBA,EAAQ,EAAE,UAAO,OAAO,UAAO,cAAW,UAAO,GAAGC,KAAsB;CACxF,IAAMC,IAAOC,IAAQ;EAAE,MAAM;EAAU,cAAcA;CAAM,IAAI,EAAE,eAAe,GAAc;CAC9F,OACE,kBAAC,OAAD;EACE,SAAQ;EACR,WAAU;EACV,WAAWC,EAAG,oCAAoCC,CAAS;EAC3D,OAAO;GAAE,QAAQC;GAAM,OAAO;GAAQ,GAAGC;EAAM;EAC/C,GAAIL;EACJ,GAAID;EANN,UAAA,CAQE,kBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;GAAQ,MAAK;GAAO,QAAO;GAAe,aAAY;GAAK,SAAQ;EAAO,CAAA,GACpG,kBAAC,KAAD;GAAG,WAAU;GACX,UAAA,kBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAO,MAAK;GAAgB,CAAA;EACrD,CAAA,CACA;;AAET"}

package/dist/stepper/step-dots.d.ts

@@ -0,0 +1,16 @@
+export interface StepDot {
+    label: string;
+    state: 'done' | 'current' | 'upcoming';
+    /** Per-step color for done steps (status palettes). */
+    color?: string;
+}
+/** A row of small dots for process steps; the text alternative lists each step and its state. */
+export declare function StepDots({ steps, labels, className, }: {
+    steps: StepDot[];
+    labels?: {
+        done?: string;
+        current?: string;
+        upcoming?: string;
+    };
+    className?: string;
+}): import("react").JSX.Element;

package/dist/stepper/step-dots.js

@@ -0,0 +1,26 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/stepper/step-dots.tsx
+function r({ steps: r, labels: i = {}, className: a }) {
+	let o = {
+		done: i.done ?? "done",
+		current: i.current ?? "current",
+		upcoming: i.upcoming ?? "upcoming"
+	};
+	return /* @__PURE__ */ n("span", {
+		className: e("inline-flex items-center gap-1", a),
+		children: [r.map((n) => /* @__PURE__ */ t("span", {
+			"aria-hidden": "true",
+			className: e("rounded-full", n.state === "current" ? "h-2 w-4 bg-primary" : "size-2", n.state === "upcoming" && "bg-border", n.state === "done" && !n.color && "bg-success-icon"),
+			style: n.state === "done" && n.color ? { background: n.color } : void 0
+		}, n.label)), /* @__PURE__ */ t("span", {
+			className: "sr-only",
+			children: r.map((e) => `${e.label}: ${o[e.state]}`).join(", ")
+		})]
+	});
+}
+//#endregion
+export { r as StepDots };
+
+//# sourceMappingURL=step-dots.js.map

package/dist/stepper/step-dots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-dots.js","names":["StepDots","state","labels","cx","className","steps","s"],"sources":["../../src/stepper/step-dots.tsx"],"sourcesContent":["'use client';\nimport { cx } from '../lib/cx';\n\n/* ---------------- StepDots ---------------- */\n\nexport interface StepDot {\n  label: string;\n  state: 'done' | 'current' | 'upcoming';\n  /** Per-step color for done steps (status palettes). */\n  color?: string;\n}\n\n/** A row of small dots for process steps; the text alternative lists each step and its state. */\nexport function StepDots({\n  steps,\n  labels = {},\n  className,\n}: {\n  steps: StepDot[];\n  labels?: { done?: string; current?: string; upcoming?: string };\n  className?: string;\n}) {\n  const state = {\n    done: labels.done ?? 'done',\n    current: labels.current ?? 'current',\n    upcoming: labels.upcoming ?? 'upcoming',\n  };\n  return (\n    <span className={cx('inline-flex items-center gap-1', className)}>\n      {steps.map((s) => (\n        <span\n          key={s.label}\n          aria-hidden=\"true\"\n          className={cx(\n            'rounded-full',\n            s.state === 'current' ? 'h-2 w-4 bg-primary' : 'size-2',\n            s.state === 'upcoming' && 'bg-border',\n            s.state === 'done' && !s.color && 'bg-success-icon',\n          )}\n          style={s.state === 'done' && s.color ? { background: s.color } : undefined}\n        />\n      ))}\n      <span className=\"sr-only\">{steps.map((s) => `${s.label}: ${state[s.state]}`).join(', ')}</span>\n    </span>\n  );\n}\n"],"mappings":";;;;AAaA,SAAgBA,EAAS,EACvB,UACA,YAAS,CAAC,GACV,gBAKC;CACD,IAAMC,IAAQ;EACZ,MAAMC,EAAO,QAAQ;EACrB,SAASA,EAAO,WAAW;EAC3B,UAAUA,EAAO,YAAY;CAC/B;CACA,OACE,kBAAC,QAAD;EAAM,WAAWC,EAAG,kCAAkCC,CAAS;EAA/D,UAAA,CACGC,EAAM,KAAK,MACV,kBAAC,QAAD;GAEE,eAAY;GACZ,WAAWF,EACT,gBACAG,EAAE,UAAU,YAAY,uBAAuB,UAC/CA,EAAE,UAAU,cAAc,aAC1BA,EAAE,UAAU,UAAU,CAACA,EAAE,SAAS,iBACpC;GACA,OAAOA,EAAE,UAAU,UAAUA,EAAE,QAAQ,EAAE,YAAYA,EAAE,MAAM,IAAI,KAAA;EAClE,GATMA,EAAE,KASR,CACF,GACD,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAAD,EAAM,KAAK,MAAM,GAAGC,EAAE,MAAM,IAAIL,EAAMK,EAAE,QAAQ,CAAC,CAAC,KAAK,IAAI;EAAQ,CAAA,CAC1F;;AAEV"}

package/dist/stepper/stepper.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface StepperStep {
+    label: ReactNode;
+    description?: ReactNode;
+}
+export interface StepperProps extends HTMLAttributes<HTMLOListElement> {
+    steps: StepperStep[];
+    /** Index of the current step (0-based). Steps before it are complete. */
+    current: number;
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * `default`: numbered steps with labels. `counter`: "Step 2 of 5" with a progress bar (narrow places, wizards).
+     * `dots`: step dots with the current label (onboarding cards, carousels).
+     */
+    variant?: 'default' | 'counter' | 'dots';
+    labels?: {
+        completed?: string;
+        current?: string;
+        stepOf?: string;
+    };
+}
+/**
+ * Progress through a multi-step flow (onboarding, checkout, workflow setup).
+ * Horizontal stepper collapses to "Step 2 of 4 · Connect apps" on mobile.
+ */
+export declare function Stepper({ steps, current, orientation, variant, labels, className, ...rest }: StepperProps): import("react").JSX.Element;

package/dist/stepper/stepper.js

@@ -0,0 +1,113 @@
+import { cx as e } from "../lib/cx.js";
+import { Glyph as t } from "../lib/glyphs.js";
+import { StepDots as n } from "./step-dots.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/stepper/stepper.tsx
+function a({ steps: a, current: o, orientation: s = "horizontal", variant: c = "default", labels: l = {}, className: u, ...d }) {
+	let { completed: f = "Completed", current: p = "Current step", stepOf: m = "Step {n} of {count}" } = l, h = s === "vertical", g = m.replace("{n}", String(o + 1)).replace("{count}", String(a.length));
+	return c === "default" ? /* @__PURE__ */ i("div", {
+		className: e("font-sans", u),
+		children: [!h && /* @__PURE__ */ i("p", {
+			className: "m-0 mb-2 text-sm sm:hidden",
+			children: [/* @__PURE__ */ i("span", {
+				className: "text-fg-muted",
+				children: [
+					m.replace("{n}", String(o + 1)).replace("{count}", String(a.length)),
+					" ·",
+					" "
+				]
+			}), /* @__PURE__ */ r("span", {
+				className: "font-semibold",
+				children: a[o]?.label
+			})]
+		}), /* @__PURE__ */ r("ol", {
+			className: e("m-0 list-none p-0", h ? "grid gap-0" : "hidden gap-2 sm:flex"),
+			...d,
+			children: a.map((n, s) => {
+				let c = s < o ? "complete" : s === o ? "current" : "upcoming";
+				return /* @__PURE__ */ i("li", {
+					"aria-current": c === "current" ? "step" : void 0,
+					className: e("relative flex gap-3", h ? "pb-6 last:pb-0" : "min-w-0 flex-1 items-center"),
+					children: [
+						/* @__PURE__ */ r("span", {
+							className: e("relative z-10 grid size-8 shrink-0 place-items-center rounded-full text-sm font-bold tabular-nums", c === "complete" && "bg-primary text-on-primary", c === "current" && "bg-surface text-link ring-2 ring-primary ring-inset", c === "upcoming" && "bg-surface-muted text-fg-muted"),
+							children: c === "complete" ? /* @__PURE__ */ r(t, {
+								name: "check",
+								size: 16
+							}) : s + 1
+						}),
+						/* @__PURE__ */ i("span", {
+							className: e("min-w-0", !h && "truncate"),
+							children: [/* @__PURE__ */ i("span", {
+								className: e("block text-sm", c === "upcoming" ? "text-fg-muted" : "font-semibold text-fg", !h && "truncate"),
+								children: [
+									n.label,
+									c === "complete" && /* @__PURE__ */ i("span", {
+										className: "sr-only",
+										children: [
+											" (",
+											f,
+											")"
+										]
+									}),
+									c === "current" && /* @__PURE__ */ i("span", {
+										className: "sr-only",
+										children: [
+											" (",
+											p,
+											")"
+										]
+									})
+								]
+							}), n.description && h && /* @__PURE__ */ r("span", {
+								className: "mt-0.5 block text-sm text-fg-muted",
+								children: n.description
+							})]
+						}),
+						s < a.length - 1 && (h ? /* @__PURE__ */ r("span", {
+							"aria-hidden": "true",
+							className: e("absolute top-9 bottom-1 left-[15px] w-0.5 rounded-full", c === "complete" ? "bg-primary" : "bg-border")
+						}) : /* @__PURE__ */ r("span", {
+							"aria-hidden": "true",
+							className: e("h-0.5 min-w-4 flex-1 rounded-full", c === "complete" ? "bg-primary" : "bg-border")
+						}))
+					]
+				}, s);
+			})
+		})]
+	}) : /* @__PURE__ */ i("div", {
+		className: e("grid gap-2 font-sans", u),
+		children: [/* @__PURE__ */ i("p", {
+			className: "m-0 flex flex-wrap items-center gap-x-2 text-sm",
+			children: [
+				/* @__PURE__ */ r("span", {
+					className: "text-fg-muted",
+					children: g
+				}),
+				/* @__PURE__ */ r("span", {
+					"aria-hidden": "true",
+					className: "text-fg-muted",
+					children: "·"
+				}),
+				/* @__PURE__ */ r("span", {
+					className: "font-semibold text-fg",
+					children: a[o]?.label
+				})
+			]
+		}), c === "counter" ? /* @__PURE__ */ r("span", {
+			"aria-hidden": "true",
+			className: "h-1.5 overflow-hidden rounded-full bg-surface-muted",
+			children: /* @__PURE__ */ r("span", {
+				className: "block h-full rounded-full bg-primary",
+				style: { width: `${(o + 1) / a.length * 100}%` }
+			})
+		}) : /* @__PURE__ */ r(n, { steps: a.map((e, t) => ({
+			label: typeof e.label == "string" ? e.label : `${t + 1}`,
+			state: t < o ? "done" : t === o ? "current" : "upcoming"
+		})) })]
+	});
+}
+//#endregion
+export { a as Stepper };
+
+//# sourceMappingURL=stepper.js.map

package/dist/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","names":["Stepper","rest","currentLabel","labels","vertical","orientation","position","stepOf","current","steps","variant","cx","className","state","i","Glyph","step","completed","StepDots","s"],"sources":["../../src/stepper/stepper.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { StepDots } from './step-dots';\n\nexport interface StepperStep {\n  label: ReactNode;\n  description?: ReactNode;\n}\n\nexport interface StepperProps extends HTMLAttributes<HTMLOListElement> {\n  steps: StepperStep[];\n  /** Index of the current step (0-based). Steps before it are complete. */\n  current: number;\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * `default`: numbered steps with labels. `counter`: \"Step 2 of 5\" with a progress bar (narrow places, wizards).\n   * `dots`: step dots with the current label (onboarding cards, carousels).\n   */\n  variant?: 'default' | 'counter' | 'dots';\n  labels?: { completed?: string; current?: string; stepOf?: string };\n}\n\n/**\n * Progress through a multi-step flow (onboarding, checkout, workflow setup).\n * Horizontal stepper collapses to \"Step 2 of 4 · Connect apps\" on mobile.\n */\nexport function Stepper({ steps, current, orientation = 'horizontal', variant = 'default', labels = {}, className, ...rest }: StepperProps) {\n  const { completed = 'Completed', current: currentLabel = 'Current step', stepOf = 'Step {n} of {count}' } = labels;\n  const vertical = orientation === 'vertical';\n  const position = stepOf.replace('{n}', String(current + 1)).replace('{count}', String(steps.length));\n  if (variant !== 'default') {\n    return (\n      <div className={cx('grid gap-2 font-sans', className)}>\n        <p className=\"m-0 flex flex-wrap items-center gap-x-2 text-sm\">\n          <span className=\"text-fg-muted\">{position}</span>\n          <span aria-hidden=\"true\" className=\"text-fg-muted\">\n            ·\n          </span>\n          <span className=\"font-semibold text-fg\">{steps[current]?.label}</span>\n        </p>\n        {variant === 'counter' ? (\n          <span aria-hidden=\"true\" className=\"h-1.5 overflow-hidden rounded-full bg-surface-muted\">\n            <span className=\"block h-full rounded-full bg-primary\" style={{ width: `${((current + 1) / steps.length) * 100}%` }} />\n          </span>\n        ) : (\n          <StepDots\n            steps={steps.map((s, i) => ({\n              label: typeof s.label === 'string' ? s.label : `${i + 1}`,\n              state: i < current ? 'done' : i === current ? 'current' : 'upcoming',\n            }))}\n          />\n        )}\n      </div>\n    );\n  }\n  return (\n    <div className={cx('font-sans', className)}>\n      {!vertical && (\n        <p className=\"m-0 mb-2 text-sm sm:hidden\">\n          <span className=\"text-fg-muted\">\n            {stepOf.replace('{n}', String(current + 1)).replace('{count}', String(steps.length))} ·{' '}\n          </span>\n          <span className=\"font-semibold\">{steps[current]?.label}</span>\n        </p>\n      )}\n      <ol className={cx('m-0 list-none p-0', vertical ? 'grid gap-0' : 'hidden gap-2 sm:flex')} {...rest}>\n        {steps.map((step, i) => {\n          const state = i < current ? 'complete' : i === current ? 'current' : 'upcoming';\n          return (\n            <li\n              key={i}\n              aria-current={state === 'current' ? 'step' : undefined}\n              className={cx('relative flex gap-3', vertical ? 'pb-6 last:pb-0' : 'min-w-0 flex-1 items-center')}\n            >\n              <span\n                className={cx(\n                  'relative z-10 grid size-8 shrink-0 place-items-center rounded-full text-sm font-bold tabular-nums',\n                  state === 'complete' && 'bg-primary text-on-primary',\n                  state === 'current' && 'bg-surface text-link ring-2 ring-primary ring-inset',\n                  state === 'upcoming' && 'bg-surface-muted text-fg-muted',\n                )}\n              >\n                {state === 'complete' ? <Glyph name=\"check\" size={16} /> : i + 1}\n              </span>\n              <span className={cx('min-w-0', !vertical && 'truncate')}>\n                <span\n                  className={cx(\n                    'block text-sm',\n                    state === 'upcoming' ? 'text-fg-muted' : 'font-semibold text-fg',\n                    !vertical && 'truncate',\n                  )}\n                >\n                  {step.label}\n                  {state === 'complete' && <span className=\"sr-only\"> ({completed})</span>}\n                  {state === 'current' && <span className=\"sr-only\"> ({currentLabel})</span>}\n                </span>\n                {step.description && vertical && (\n                  <span className=\"mt-0.5 block text-sm text-fg-muted\">{step.description}</span>\n                )}\n              </span>\n              {i < steps.length - 1 &&\n                (vertical ? (\n                  <span\n                    aria-hidden=\"true\"\n                    className={cx(\n                      'absolute top-9 bottom-1 left-[15px] w-0.5 rounded-full',\n                      state === 'complete' ? 'bg-primary' : 'bg-border',\n                    )}\n                  />\n                ) : (\n                  <span\n                    aria-hidden=\"true\"\n                    className={cx(\n                      'h-0.5 min-w-4 flex-1 rounded-full',\n                      state === 'complete' ? 'bg-primary' : 'bg-border',\n                    )}\n                  />\n                ))}\n            </li>\n          );\n        })}\n      </ol>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tabs/tabs.d.ts

@@ -0,0 +1,31 @@
+import * as RadixTabs from '@radix-ui/react-tabs';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+/**
+ * - `underline`: sections inside the content.
+ * - `pill`: soft switch on a light surface.
+ * - `segmented`: page-level views and period presets; the active option is filled with the brand color.
+ * - `segmented-inverse`: the same inside a brand band (`PageHeader`), with a white active option.
+ */
+export type TabsVariant = 'underline' | 'pill' | 'segmented' | 'segmented-inverse';
+export interface TabsProps extends ComponentPropsWithoutRef<typeof RadixTabs.Root> {
+    variant?: TabsVariant;
+}
+/**
+ * Switches between views of the same context. Arrow keys move between tabs (Radix Tabs).
+ * On narrow screens the list scrolls horizontally; for 6+ tabs on mobile consider a Select.
+ */
+export declare function Tabs({ variant, className, ...rest }: TabsProps): import("react").JSX.Element;
+export interface TabsListProps extends ComponentPropsWithoutRef<typeof RadixTabs.List> {
+    /** Stretch tabs to fill the width (good for 2–3 tabs on mobile). */
+    fullWidth?: boolean;
+}
+export declare function TabsList({ fullWidth, className, ...rest }: TabsListProps): import("react").JSX.Element;
+export interface TabsTriggerProps extends ComponentPropsWithoutRef<typeof RadixTabs.Trigger> {
+    icon?: IconName;
+    /** Count shown after the label (e.g. unread items). */
+    count?: number;
+    children: ReactNode;
+}
+export declare function TabsTrigger({ icon, count, className, children, ...rest }: TabsTriggerProps): import("react").JSX.Element;
+export declare function TabsContent({ className, ...rest }: ComponentPropsWithoutRef<typeof RadixTabs.Content>): import("react").JSX.Element;

package/dist/tabs/tabs.js

@@ -0,0 +1,66 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { SEGMENTED_ITEM as n, SEGMENTED_TRACK as r } from "../lib/segmented-styles.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { createContext as o, useContext as s } from "react";
+import * as c from "@radix-ui/react-tabs";
+//#region src/tabs/tabs.tsx
+var l = {
+	underline: "gap-1",
+	pill: "gap-1 rounded-full bg-surface-muted p-1",
+	segmented: r.default,
+	"segmented-inverse": r.inverse
+}, u = "text-fg-muted hover:text-fg focus-visible:outline-focus", d = {
+	underline: u + " relative h-11 px-3 after:absolute after:inset-x-2 after:-bottom-px after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:text-fg data-[state=active]:after:bg-primary",
+	pill: u + " h-9 rounded-full px-4 data-[state=active]:bg-surface data-[state=active]:text-fg data-[state=active]:shadow-[0_1px_3px_rgb(0_0_0/0.12)]",
+	segmented: "h-8 rounded-xs px-3 " + n.default,
+	"segmented-inverse": "h-8 rounded-xs px-3 " + n.inverse
+}, f = o("underline");
+function p({ variant: t = "underline", className: n, ...r }) {
+	return /* @__PURE__ */ i(f.Provider, {
+		value: t,
+		children: /* @__PURE__ */ i(c.Root, {
+			className: e("font-sans", n),
+			...r
+		})
+	});
+}
+function m({ fullWidth: t, className: n, ...r }) {
+	let a = s(f);
+	return /* @__PURE__ */ i("div", {
+		className: e("relative max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", a === "underline" && "border-b border-border", a.startsWith("segmented") && "w-fit"),
+		children: /* @__PURE__ */ i(c.List, {
+			className: e("flex w-max", !a.startsWith("segmented") && "min-w-full", l[a], t && "*:flex-1", n),
+			...r
+		})
+	});
+}
+function h({ icon: n, count: r, className: o, children: l, ...u }) {
+	let p = s(f);
+	return /* @__PURE__ */ a(c.Trigger, {
+		className: e("group inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 border-0 bg-transparent font-sans text-sm font-semibold whitespace-nowrap", "transition-colors duration-150 disabled:pointer-events-none disabled:opacity-45", "focus-visible:outline-3 focus-visible:-outline-offset-3", d[p], o),
+		...u,
+		children: [
+			n && /* @__PURE__ */ i(t, {
+				name: n,
+				size: 20
+			}),
+			l,
+			r !== void 0 && /* @__PURE__ */ i("span", {
+				className: "min-w-5 rounded-full bg-surface-muted px-1.5 py-0.5 text-center text-xs leading-none tabular-nums group-data-[state=active]:bg-primary group-data-[state=active]:text-on-primary",
+				children: r
+			})
+		]
+	});
+}
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ i(c.Content, {
+		className: e("pt-5 focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-focus", t),
+		...n
+	});
+}
+//#endregion
+export { p as Tabs, g as TabsContent, m as TabsList, h as TabsTrigger };
+
+//# sourceMappingURL=tabs.js.map

package/dist/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["RadixTabs","LIST","SEGMENTED_TRACK","BASE_COLOR","TRIGGER","SEGMENTED_ITEM","VariantContext","createContext","Tabs","rest","variant","cx","className","TabsList","useContext","fullWidth","TabsTrigger","icon","Icon","children","count","TabsContent"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport { createContext, useContext, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { SEGMENTED_ITEM, SEGMENTED_TRACK } from '../lib/segmented-styles';\nimport { Icon, type IconName } from '../icon/icon';\n\n/**\n * - `underline`: sections inside the content.\n * - `pill`: soft switch on a light surface.\n * - `segmented`: page-level views and period presets; the active option is filled with the brand color.\n * - `segmented-inverse`: the same inside a brand band (`PageHeader`), with a white active option.\n */\nexport type TabsVariant = 'underline' | 'pill' | 'segmented' | 'segmented-inverse';\n\nconst LIST: Record<TabsVariant, string> = {\n  underline: 'gap-1',\n  pill: 'gap-1 rounded-full bg-surface-muted p-1',\n  segmented: SEGMENTED_TRACK.default,\n  'segmented-inverse': SEGMENTED_TRACK.inverse,\n};\n\n// Colors live per variant: `cx` joins classes without merging, so two text colors must never meet.\nconst BASE_COLOR = 'text-fg-muted hover:text-fg focus-visible:outline-focus';\nconst TRIGGER: Record<TabsVariant, string> = {\n  underline:\n    BASE_COLOR +\n    ' relative h-11 px-3 after:absolute after:inset-x-2 after:-bottom-px after:h-0.5 after:rounded-full after:bg-transparent data-[state=active]:text-fg data-[state=active]:after:bg-primary',\n  pill:\n    BASE_COLOR +\n    ' h-9 rounded-full px-4 data-[state=active]:bg-surface data-[state=active]:text-fg data-[state=active]:shadow-[0_1px_3px_rgb(0_0_0/0.12)]',\n  segmented: 'h-8 rounded-xs px-3 ' + SEGMENTED_ITEM.default,\n  'segmented-inverse': 'h-8 rounded-xs px-3 ' + SEGMENTED_ITEM.inverse,\n};\n\nconst VariantContext = createContext<TabsVariant>('underline');\n\nexport interface TabsProps extends ComponentPropsWithoutRef<typeof RadixTabs.Root> {\n  variant?: TabsVariant;\n}\n\n/**\n * Switches between views of the same context. Arrow keys move between tabs (Radix Tabs).\n * On narrow screens the list scrolls horizontally; for 6+ tabs on mobile consider a Select.\n */\nexport function Tabs({ variant = 'underline', className, ...rest }: TabsProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <RadixTabs.Root className={cx('font-sans', className)} {...rest} />\n    </VariantContext.Provider>\n  );\n}\n\nexport interface TabsListProps extends ComponentPropsWithoutRef<typeof RadixTabs.List> {\n  /** Stretch tabs to fill the width (good for 2–3 tabs on mobile). */\n  fullWidth?: boolean;\n}\n\nexport function TabsList({ fullWidth, className, ...rest }: TabsListProps) {\n  const variant = useContext(VariantContext);\n  return (\n    <div\n      className={cx(\n        'relative max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n        variant === 'underline' && 'border-b border-border',\n        variant.startsWith('segmented') && 'w-fit',\n      )}\n    >\n      <RadixTabs.List\n        className={cx(\n          'flex w-max',\n          !variant.startsWith('segmented') && 'min-w-full',\n          LIST[variant],\n          fullWidth && '*:flex-1',\n          className,\n        )}\n        {...rest}\n      />\n    </div>\n  );\n}\n\nexport interface TabsTriggerProps extends ComponentPropsWithoutRef<typeof RadixTabs.Trigger> {\n  icon?: IconName;\n  /** Count shown after the label (e.g. unread items). */\n  count?: number;\n  children: ReactNode;\n}\n\nexport function TabsTrigger({ icon, count, className, children, ...rest }: TabsTriggerProps) {\n  const variant = useContext(VariantContext);\n  return (\n    <RadixTabs.Trigger\n      className={cx(\n        'group inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 border-0 bg-transparent font-sans text-sm font-semibold whitespace-nowrap',\n        'transition-colors duration-150 disabled:pointer-events-none disabled:opacity-45',\n        'focus-visible:outline-3 focus-visible:-outline-offset-3',\n        TRIGGER[variant],\n        className,\n      )}\n      {...rest}\n    >\n      {icon && <Icon name={icon} size={20} />}\n      {children}\n      {count !== undefined && (\n        <span className=\"min-w-5 rounded-full bg-surface-muted px-1.5 py-0.5 text-center text-xs leading-none tabular-nums group-data-[state=active]:bg-primary group-data-[state=active]:text-on-primary\">\n          {count}\n        </span>\n      )}\n    </RadixTabs.Trigger>\n  );\n}\n\nexport function TabsContent({ className, ...rest }: ComponentPropsWithoutRef<typeof RadixTabs.Content>) {\n  return (\n    <RadixTabs.Content\n      className={cx(\n        'pt-5 focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-focus',\n        className,\n      )}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAgBA,IAAMC,IAAoC;CACxC,WAAW;CACX,MAAM;CACN,WAAWC,EAAgB;CAC3B,qBAAqBA,EAAgB;AACvC,GAGMC,IAAa,2DACbC,IAAuC;CAC3C,WACED,IACA;CACF,MACEA,IACA;CACF,WAAW,yBAAyBE,EAAe;CACnD,qBAAqB,yBAAyBA,EAAe;AAC/D,GAEMC,IAAiBC,EAA2B,WAAW;AAU7D,SAAgBC,EAAK,EAAE,aAAU,aAAa,cAAW,GAAGC,KAAmB;CAC7E,OACE,kBAACH,EAAe,UAAhB;EAAyB,OAAOI;EAC9B,UAAA,kBAACV,EAAU,MAAX;GAAgB,WAAWW,EAAG,aAAaC,CAAS;GAAG,GAAIH;EAAO,CAAA;CAC3C,CAAA;AAE7B;AAOA,SAAgBI,EAAS,EAAE,cAAW,cAAW,GAAGJ,KAAuB;CACzE,IAAMC,IAAUI,EAAWR,CAAc;CACzC,OACE,kBAAC,OAAD;EACE,WAAWK,EACT,4FACAD,MAAY,eAAe,0BAC3BA,EAAQ,WAAW,WAAW,KAAK,OACrC;EAEA,UAAA,kBAACV,EAAU,MAAX;GACE,WAAWW,EACT,cACA,CAACD,EAAQ,WAAW,WAAW,KAAK,cACpCT,EAAKS,IACLK,KAAa,YACbH,CACF;GACA,GAAIH;EACL,CAAA;CACE,CAAA;AAET;AASA,SAAgBO,EAAY,EAAE,SAAM,UAAO,cAAW,aAAU,GAAGP,KAA0B;CAC3F,IAAMC,IAAUI,EAAWR,CAAc;CACzC,OACE,kBAACN,EAAU,SAAX;EACE,WAAWW,EACT,yJACA,mFACA,2DACAP,EAAQM,IACRE,CACF;EACA,GAAIH;EARN,UAAA;GAUGQ,KAAQ,kBAACC,GAAD;IAAM,MAAMD;IAAM,MAAM;GAAK,CAAA;GACrCE;GACAC,MAAU,KAAA,KACT,kBAAC,QAAD;IAAM,WAAU;IACb,UAAAA;GACG,CAAA;EAES;;AAEvB;AAEA,SAAgBC,EAAY,EAAE,cAAW,GAAGZ,KAA4D;CACtG,OACE,kBAACT,EAAU,SAAX;EACE,WAAWW,EACT,2FACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL"}

package/dist/templates/app-templates.d.ts

@@ -0,0 +1,126 @@
+import type { ReactNode } from 'react';
+export interface AppLayoutProps {
+    /** `ProductLogo` in a link to the dashboard home. */
+    logo: ReactNode;
+    /** The user's role ("Administrator"), shown as a badge in the top bar from 640px. */
+    role?: ReactNode;
+    /** Notifications button (`NotificationCenter`). */
+    notifications?: ReactNode;
+    /** `AccountMenu`. */
+    account: ReactNode;
+    /** `WorkspaceSwitcher` above the navigation. */
+    workspace?: ReactNode;
+    /** `SideNav`. Omit for pages without a sidebar (account settings). */
+    nav?: ReactNode;
+    /** `AppFooter`. */
+    footer?: ReactNode;
+    /** `FloatingActions` (the assistant button). */
+    floating?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * The one dashboard layout for every product: top bar (logo, role, notifications, account), sidebar (workspace +
+ * navigation), content and a slim footer, plus the floating assistant. Built on `AppShell layout="topbar"`.
+ */
+export declare function AppLayout({ logo, role, notifications, account, workspace, nav, footer, floating, children, className, }: AppLayoutProps): import("react").JSX.Element;
+export interface DashboardPageProps {
+    /**
+     * `PageHeader`. With page tabs, render the header (with its `TabsList`) above and this page inside the active
+     * `TabsContent`, without `header`, so each tab controls a real panel.
+     */
+    header?: ReactNode;
+    /** A row of `MetricCard`s. */
+    metrics?: ReactNode;
+    /** The wide column (2/3): charts and lists. */
+    main?: ReactNode;
+    /** The narrow column (1/3): tasks, activity. */
+    aside?: ReactNode;
+    /** Full-width content below the columns. */
+    children?: ReactNode;
+    className?: string;
+}
+/** Overview: header, a row of metrics, then a 2/3 + 1/3 grid of cards and full-width content. */
+export declare function DashboardPage({ header, metrics, main, aside, children, className }: DashboardPageProps): import("react").JSX.Element;
+export interface ListPageProps {
+    header?: ReactNode;
+    /** Underline `Tabs` or a `SectionHeader` above the table. */
+    toolbar?: ReactNode;
+    /** The `DataTable`. */
+    children: ReactNode;
+    className?: string;
+}
+/** A list of records: header, optional section header or tabs, the table. */
+export declare function ListPage({ header, toolbar, children, className }: ListPageProps): import("react").JSX.Element;
+export interface ReportPageProps {
+    header?: ReactNode;
+    /** `FilterBar`. */
+    filters?: ReactNode;
+    metrics?: ReactNode;
+    /** Charts, two per row from 1024px. */
+    children: ReactNode;
+    className?: string;
+}
+/** Reports: header, filters, a row of metrics and charts in a two-column grid. */
+export declare function ReportPage({ header, filters, metrics, children, className }: ReportPageProps): import("react").JSX.Element;
+export interface CalendarPageProps {
+    /** `PageHeader` (with tabs when the calendar is one view of a module). */
+    header?: ReactNode;
+    /** `EventCalendar`, with its side panel in `aside`. */
+    calendar: ReactNode;
+    /** Summary under the calendar: a heading row with period presets (`SectionHeader` + `SegmentedControl`). */
+    summaryHeader?: ReactNode;
+    /** Summary cards (`StatGrid`, `RankedList`, charts), two per row from 1024px. */
+    summary?: ReactNode;
+    className?: string;
+}
+/** Calendar (ADR-0016): header, the calendar with its side panel, and a full-width summary below. */
+export declare function CalendarPage({ header, calendar, summaryHeader, summary, className }: CalendarPageProps): import("react").JSX.Element;
+export interface SettingsPageProps {
+    header?: ReactNode;
+    /** Secondary navigation (`SideNav appearance="solid"`), `--kf-subnav-width` wide. */
+    nav: ReactNode;
+    /** Sub-tabs above the form column (Kudibot's third navigation level). */
+    tabs?: ReactNode;
+    /** Cards with `SettingsRow` / `FormField`, in a column limited to the form width. */
+    children: ReactNode;
+    className?: string;
+}
+/** Settings: header, a secondary navigation and a form column of cards. Below 768px the navigation comes first. */
+export declare function SettingsPage({ header, nav, tabs, children, className }: SettingsPageProps): import("react").JSX.Element;
+export interface MasterDetailPageProps {
+    header?: ReactNode;
+    /** `MasterDetail`. */
+    children: ReactNode;
+    className?: string;
+}
+/** Configuration of grouped records (clients and projects): header and a `MasterDetail`. */
+export declare function MasterDetailPage({ header, children, className }: MasterDetailPageProps): import("react").JSX.Element;
+export interface ProfilePageProps {
+    /** A back link ("‹ People"). */
+    back?: ReactNode;
+    /** `ProfileHeader` (or `EntityHeader` for companies). */
+    profile: ReactNode;
+    /** Underline `Tabs` for the profile's sections. */
+    tabs?: ReactNode;
+    children: ReactNode;
+    /** A side column (about me, contact, teams) from 1024px. */
+    aside?: ReactNode;
+    className?: string;
+}
+/** A person's or a company's page: back link, profile header, tabs, then cards with an optional side column. */
+export declare function ProfilePage({ back, profile, tabs, children, aside, className }: ProfilePageProps): import("react").JSX.Element;
+export interface AccountPageProps {
+    /** `PageHeader` with the user's avatar as `media`. */
+    header: ReactNode;
+    /** Forms (profile, password, notifications). */
+    children: ReactNode;
+    /** A side list (organizations, devices). */
+    aside?: ReactNode;
+    className?: string;
+}
+/**
+ * The user's account across organizations: a narrow container with forms and a side list. Use it inside
+ * `AppLayout` without `nav` (top bar only).
+ */
+export declare function AccountPage({ header, children, aside, className }: AccountPageProps): import("react").JSX.Element;