@mitcsutt/kiln-ui 0.1.0

package/dist/components/inputs/internal/messages.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+export interface LabelContentProps {
+    children: ReactNode;
+    required?: boolean;
+    /** `true` shows "Optional"; a string replaces the word (for other languages). */
+    optional?: boolean | string;
+    /** Shows a small spinner after the label — the field is `validating`. */
+    busy?: boolean;
+}
+/** The inside of a label: text, required mark, optional hint, validating spinner. */
+export declare function LabelContent({ children, required, optional, busy }: LabelContentProps): import("react").JSX.Element;
+export declare function FieldDescription({ id, className, children, }: {
+    id: string;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Non-blocking advice. Never `role="alert"` — it doesn't interrupt like an error does. */
+export declare function FieldWarning({ id, className, children, }: {
+    id: string;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Error text. `live` (default `true`) gives it `role="alert"` so a message that appears
+ * after blur is announced; pass `false` once the form's `ErrorSummary` owns the
+ * announcement (it's still reachable via `aria-describedby` either way).
+ */
+export declare function FieldError({ id, className, live, children, }: {
+    id: string;
+    className?: string;
+    live?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A `maxLength` character counter ("12 / 280"). Politely announced only near the limit. */
+export declare function FieldCount({ id, className, live, children, }: {
+    id: string;
+    className?: string;
+    live?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/inputs/internal/messages.js

@@ -0,0 +1,58 @@
+import { cx as e } from "../../../utils/cx.js";
+import { InfoIcon as t, WarningIcon as n } from "../../../icons/icons.js";
+import { Spinner as r } from "../../feedback/Spinner/Spinner.js";
+import i from "./messages.module.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/inputs/internal/messages.tsx
+function c({ children: e, required: t, optional: n, busy: c }) {
+	return /* @__PURE__ */ s(a, { children: [
+		e,
+		t ? /* @__PURE__ */ o("span", {
+			className: i.required,
+			"aria-hidden": "true",
+			children: "*"
+		}) : n ? /* @__PURE__ */ o("span", {
+			className: i.optional,
+			children: n === !0 ? "Optional" : n
+		}) : null,
+		c ? /* @__PURE__ */ o(r, {
+			size: "sm",
+			label: null,
+			className: i.busy
+		}) : null
+	] });
+}
+function l({ id: t, className: n, children: r }) {
+	return /* @__PURE__ */ o("div", {
+		id: t,
+		className: e(i.description, n),
+		children: r
+	});
+}
+function u({ id: n, className: r, children: a }) {
+	return /* @__PURE__ */ s("div", {
+		id: n,
+		className: e(i.warning, r),
+		children: [/* @__PURE__ */ o(t, { className: i.warningIcon }), /* @__PURE__ */ o("span", { children: a })]
+	});
+}
+function d({ id: t, className: r, live: a = !0, children: c }) {
+	return /* @__PURE__ */ s("div", {
+		id: t,
+		className: e(i.error, r),
+		role: a ? "alert" : void 0,
+		children: [/* @__PURE__ */ o(n, { className: i.errorIcon }), /* @__PURE__ */ o("span", { children: c })]
+	});
+}
+function f({ id: t, className: n, live: r, children: a }) {
+	return /* @__PURE__ */ o("div", {
+		id: t,
+		className: e(i.count, n),
+		"aria-live": r ? "polite" : void 0,
+		children: a
+	});
+}
+//#endregion
+export { f as FieldCount, l as FieldDescription, d as FieldError, u as FieldWarning, c as LabelContent };
+
+//# sourceMappingURL=messages.js.map

package/dist/components/inputs/internal/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","names":["_Fragment","styles","messages_module_default","LabelContent","Fragment","children","required","optional","busy","Spinner","FieldDescription","cx","className","FieldWarning","InfoIcon","FieldError","live","WarningIcon","FieldCount"],"sources":["../../../../src/components/inputs/internal/messages.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { InfoIcon, WarningIcon } from '#icons'\nimport { Spinner } from '#components/feedback/Spinner'\nimport { cx } from '#utils/cx'\nimport styles from './messages.module.css'\n\nexport interface LabelContentProps {\n  children: ReactNode\n  required?: boolean\n  /** `true` shows \"Optional\"; a string replaces the word (for other languages). */\n  optional?: boolean | string\n  /** Shows a small spinner after the label — the field is `validating`. */\n  busy?: boolean\n}\n\n/** The inside of a label: text, required mark, optional hint, validating spinner. */\nexport function LabelContent({ children, required, optional, busy }: LabelContentProps) {\n  return (\n    <>\n      {children}\n      {required ? (\n        <span className={styles.required} aria-hidden=\"true\">\n          *\n        </span>\n      ) : optional ? (\n        <span className={styles.optional}>{optional === true ? 'Optional' : optional}</span>\n      ) : null}\n      {busy ? <Spinner size=\"sm\" label={null} className={styles.busy} /> : null}\n    </>\n  )\n}\n\nexport function FieldDescription({\n  id,\n  className,\n  children,\n}: {\n  id: string\n  className?: string\n  children: ReactNode\n}) {\n  return (\n    <div id={id} className={cx(styles.description, className)}>\n      {children}\n    </div>\n  )\n}\n\n/** Non-blocking advice. Never `role=\"alert\"` — it doesn't interrupt like an error does. */\nexport function FieldWarning({\n  id,\n  className,\n  children,\n}: {\n  id: string\n  className?: string\n  children: ReactNode\n}) {\n  return (\n    <div id={id} className={cx(styles.warning, className)}>\n      <InfoIcon className={styles.warningIcon} />\n      <span>{children}</span>\n    </div>\n  )\n}\n\n/**\n * Error text. `live` (default `true`) gives it `role=\"alert\"` so a message that appears\n * after blur is announced; pass `false` once the form's `ErrorSummary` owns the\n * announcement (it's still reachable via `aria-describedby` either way).\n */\nexport function FieldError({\n  id,\n  className,\n  live = true,\n  children,\n}: {\n  id: string\n  className?: string\n  live?: boolean\n  children: ReactNode\n}) {\n  return (\n    <div id={id} className={cx(styles.error, className)} role={live ? 'alert' : undefined}>\n      <WarningIcon className={styles.errorIcon} />\n      <span>{children}</span>\n    </div>\n  )\n}\n\n/** A `maxLength` character counter (\"12 / 280\"). Politely announced only near the limit. */\nexport function FieldCount({\n  id,\n  className,\n  live,\n  children,\n}: {\n  id: string\n  className?: string\n  live?: boolean\n  children: ReactNode\n}) {\n  return (\n    <div id={id} className={cx(styles.count, className)} aria-live={live ? 'polite' : undefined}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAgBA,SAAgBG,EAAa,EAAE,aAAU,aAAU,aAAU,WAA2B;CACtF,OACE,kBAAAH,GAAA,EAAA,UAAA;EACGK;EACAC,IACC,kBAAC,QAAD;GAAM,WAAWL,EAAO;GAAU,eAAY;GAAO,UAAA;EAE/C,CAAA,IACJM,IACF,kBAAC,QAAD;GAAM,WAAWN,EAAO;GAAW,UAAAM,MAAa,KAAO,aAAaA;EAAe,CAAA,IACjF;EACHC,IAAO,kBAACC,GAAD;GAAS,MAAK;GAAK,OAAO;GAAM,WAAWR,EAAO;EAAO,CAAA,IAAI;CACrE,EAAA,CAAA;AAEN;AAEA,SAAgBS,EAAiB,EAC/B,OACA,cACA,eAKC;CACD,OACE,kBAAC,OAAD;EAAS;EAAI,WAAWC,EAAGV,EAAO,aAAaW,CAAS;EACrD;CACE,CAAA;AAET;AAGA,SAAgBC,EAAa,EAC3B,OACA,cACA,eAKC;CACD,OACE,kBAAC,OAAD;EAAS;EAAI,WAAWF,EAAGV,EAAO,SAASW,CAAS;EAApD,UAAA,CACE,kBAACE,GAAD,EAAU,WAAWb,EAAO,YAAc,CAAA,GAC1C,kBAAC,QAAD,EAAO,YAAe,CAAA,CACnB;;AAET;AAOA,SAAgBc,EAAW,EACzB,OACA,cACA,UAAO,IACP,eAMC;CACD,OACE,kBAAC,OAAD;EAAS;EAAI,WAAWJ,EAAGV,EAAO,OAAOW,CAAS;EAAG,MAAMI,IAAO,UAAU,KAAA;EAA5E,UAAA,CACE,kBAACC,GAAD,EAAa,WAAWhB,EAAO,UAAY,CAAA,GAC3C,kBAAC,QAAD,EAAO,YAAe,CAAA,CACnB;;AAET;AAGA,SAAgBiB,EAAW,EACzB,OACA,cACA,SACA,eAMC;CACD,OACE,kBAAC,OAAD;EAAS;EAAI,WAAWP,EAAGV,EAAO,OAAOW,CAAS;EAAG,aAAWI,IAAO,WAAW,KAAA;EAC/E;CACE,CAAA;AAET"}

package/dist/components/inputs/internal/messages.module.js

@@ -0,0 +1,18 @@
+//#region src/components/inputs/internal/messages.module.css
+var e = "kiln-messages__label", t = "kiln-messages__required", n = "kiln-messages__optional", r = "kiln-messages__description", i = "kiln-messages__error", a = "kiln-messages__errorIcon", o = "kiln-messages__warning", s = "kiln-messages__warningIcon", c = "kiln-messages__busy", l = "kiln-messages__count", u = "kiln-messages__visuallyHidden", d = {
+	label: e,
+	required: t,
+	optional: n,
+	description: r,
+	error: i,
+	errorIcon: a,
+	warning: o,
+	warningIcon: s,
+	busy: c,
+	count: l,
+	visuallyHidden: u
+};
+//#endregion
+export { c as busy, l as count, d as default, r as description, i as error, a as errorIcon, e as label, n as optional, t as required, u as visuallyHidden, o as warning, s as warningIcon };
+
+//# sourceMappingURL=messages.module.js.map

package/dist/components/inputs/internal/messages.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.module.js","names":["label","required","optional","description","error","errorIcon","warning","warningIcon","busy","count","visuallyHidden","messages_module_default"],"sources":["../../../../src/components/inputs/internal/messages.module.css"],"sourcesContent":["/*\n * Shared field text: label, description and error. Used by Field, Fieldset,\n * CheckboxField and RadioGroup items so every label in a form reads the same.\n *\n * Component tokens:\n *   --field-label-size        default var(--text-sm)\n *   --field-description-size  default var(--text-sm)\n */\n.label {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 0.35em;\n  padding: 0;\n  font-family: var(--font-text);\n  font-size: var(--field-label-size, var(--text-sm));\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n}\n\n/* Visual only — the control carries aria-required. Muted ink: required isn't an error. */\n.required {\n  color: var(--color-ink-muted);\n  font-weight: var(--label-weight);\n}\n\n.optional {\n  color: var(--color-ink-subtle);\n  font-weight: normal;\n  letter-spacing: 0;\n  text-transform: none;\n}\n\n.description {\n  max-inline-size: 64ch;\n  font-size: var(--field-description-size, var(--text-sm));\n  line-height: var(--leading-snug);\n  color: var(--color-ink-muted);\n  text-wrap: pretty;\n}\n\n.error {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.4em;\n  max-inline-size: 64ch;\n  font-size: var(--field-description-size, var(--text-sm));\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  color: var(--tone-critical-text);\n  text-wrap: pretty;\n}\n\n/* Glyph sits on the first line's centre, not the block's. */\n.errorIcon {\n  flex: none;\n  block-size: 1lh;\n  inline-size: 1.1em;\n}\n\n/* Non-blocking advice — same shape as .error, caution tone instead of critical. */\n.warning {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.4em;\n  max-inline-size: 64ch;\n  font-size: var(--field-description-size, var(--text-sm));\n  line-height: var(--leading-snug);\n  color: var(--tone-caution-text);\n  text-wrap: pretty;\n}\n\n.warningIcon {\n  flex: none;\n  block-size: 1lh;\n  inline-size: 1.1em;\n}\n\n/* validating spinner after the label text */\n.busy {\n  flex: none;\n  color: var(--color-ink-subtle);\n}\n\n/* maxLength counter under the control */\n.count {\n  font-size: var(--field-description-size, var(--text-sm));\n  color: var(--color-ink-subtle);\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: end;\n}\n\n.visuallyHidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n[data-disabled] > .label,\n[data-disabled] > * > .label,\n.label[data-disabled] {\n  color: var(--color-ink-subtle);\n}\n"],"mappings":""}

package/dist/components/inputs/internal/refs.d.ts

@@ -0,0 +1,7 @@
+import { type Ref, type RefCallback } from 'react';
+/** Point several refs (callback or object) at one node. */
+export declare function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T>;
+/** `mergeRefs`, memoised so the callback (and each ref) stays stable across renders. */
+export declare function useMergedRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T>;
+/** Join id lists for `aria-describedby`, dropping blanks and duplicates. */
+export declare function joinIds(...ids: (string | false | null | undefined)[]): string | undefined;

package/dist/components/inputs/internal/refs.js

@@ -0,0 +1,19 @@
+import { useMemo as e } from "react";
+//#region src/components/inputs/internal/refs.ts
+function t(...e) {
+	return (t) => {
+		for (let n of e) typeof n == "function" ? n(t) : n && (n.current = t);
+	};
+}
+function n(...n) {
+	return e(() => t(...n), n);
+}
+function r(...e) {
+	let t = /* @__PURE__ */ new Set();
+	for (let n of e) if (n) for (let e of n.split(/\s+/)) e && t.add(e);
+	return t.size > 0 ? [...t].join(" ") : void 0;
+}
+//#endregion
+export { r as joinIds, t as mergeRefs, n as useMergedRefs };
+
+//# sourceMappingURL=refs.js.map

package/dist/components/inputs/internal/refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"refs.js","names":["mergeRefs","refs","ref","node","useMergedRefs","useMemo","joinIds","ids","seen","group","id"],"sources":["../../../../src/components/inputs/internal/refs.ts"],"sourcesContent":["import { useMemo, type Ref, type RefCallback } from 'react'\n\n/** Point several refs (callback or object) at one node. */\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as { current: T | null }).current = node\n    }\n  }\n}\n\n/** `mergeRefs`, memoised so the callback (and each ref) stays stable across renders. */\nexport function useMergedRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> {\n  // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo -- the refs themselves are the deps: a changed ref gets a new callback, so React re-attaches the node\n  return useMemo(() => mergeRefs(...refs), refs)\n}\n\n/** Join id lists for `aria-describedby`, dropping blanks and duplicates. */\nexport function joinIds(...ids: (string | false | null | undefined)[]): string | undefined {\n  const seen = new Set<string>()\n  for (const group of ids) {\n    if (!group) continue\n    for (const id of group.split(/\\s+/)) if (id) seen.add(id)\n  }\n  return seen.size > 0 ? [...seen].join(' ') : undefined\n}\n"],"mappings":";;AAGA,SAAgBA,EAAa,GAAGC,GAA8C;CAC5E,QAAQ,MAAS;EACf,KAAK,IAAMC,KAAOD,GAChB,AAAI,OAAOC,KAAQ,aAAYA,EAAIC,CAAI,IAC9BD,MAAK,EAA+B,UAAUC;CAE3D;AACF;AAGA,SAAgBC,EAAiB,GAAGH,GAA8C;CAEhF,OAAOI,QAAcL,EAAU,GAAGC,CAAI,GAAGA,CAAI;AAC/C;AAGA,SAAgBK,EAAQ,GAAGC,GAAgE;CACzF,IAAMC,oBAAO,IAAI,IAAY;CAC7B,KAAK,IAAMC,KAASF,GAClB,IAAKE,GACL,KAAK,IAAMC,KAAMD,EAAM,MAAM,KAAK,GAAG,AAAIC,KAAIF,EAAK,IAAIE,CAAE;CAE1D,OAAOF,EAAK,OAAO,IAAI,CAAC,GAAGA,CAAI,CAAC,CAAC,KAAK,GAAG,IAAI,KAAA;AAC/C"}

package/dist/components/inputs/internal/storyData.d.ts

@@ -0,0 +1,4 @@
+import type { SelectGroup, SelectOption } from '../Select/index.js';
+export declare const taskCategories: SelectGroup[];
+export declare const periods: SelectOption[];
+export declare const countryGroups: SelectGroup[];

package/dist/components/inputs/internal/useLatest.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A ref that always holds the latest `value`, updated after render. Lets a stable callback
+ * call the newest `onChange` without being re-created every render.
+ */
+export declare function useLatest<T>(value: T): {
+    readonly current: T;
+};

package/dist/components/inputs/internal/useLatest.js

@@ -0,0 +1,13 @@
+import { useEffect as e, useLayoutEffect as t, useRef as n } from "react";
+//#region src/components/inputs/internal/useLatest.ts
+var r = typeof document > "u" ? e : t;
+function i(e) {
+	let t = n(e);
+	return r(() => {
+		t.current = e;
+	}), t;
+}
+//#endregion
+export { i as useLatest };
+
+//# sourceMappingURL=useLatest.js.map

package/dist/components/inputs/internal/useLatest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLatest.js","names":["useIsomorphicLayoutEffect","useEffect","useLayoutEffect","useLatest","ref","useRef","value"],"sources":["../../../../src/components/inputs/internal/useLatest.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react'\n\n// Layout effects warn during server rendering; on the server there's nothing to sync anyway.\nconst useIsomorphicLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect\n\n/**\n * A ref that always holds the latest `value`, updated after render. Lets a stable callback\n * call the newest `onChange` without being re-created every render.\n */\nexport function useLatest<T>(value: T): { readonly current: T } {\n  const ref = useRef(value)\n  useIsomorphicLayoutEffect(() => {\n    ref.current = value\n  })\n  return ref\n}\n"],"mappings":";;AAGA,IAAMA,IAA4B,OAAO,WAAa,MAAcC,IAAYC;AAMhF,SAAgBC,EAAa,GAAmC;CAC9D,IAAMC,IAAMC,EAAOC,CAAK;CAIxB,OAHAN,QAAgC;EAC9B,EAAI,UAAUM;CAChB,CAAC,GACMF;AACT"}

package/dist/components/layout/ActionBar/ActionBar.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../../utils/responsive.js';
+import { type Space } from '../../../utils/tokens.js';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type ActionBarElement = 'div' | 'footer';
+export type ActionBarAlign = 'start' | 'end' | 'between';
+export interface ActionBarProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
+    /** Where the actions sit on the row. Default `end`. */
+    align?: ActionBarAlign;
+    /**
+     * Pins the bar to the bottom of its scroll container — a canvas surface above a top
+     * hairline, at `--z-sticky`. Use inside a scrolling form/dialog body so the primary
+     * action stays reachable.
+     */
+    sticky?: boolean;
+    /** Space between actions. Responsive. Default `3`. */
+    gap?: Responsive<Space>;
+    /** Render as `footer` when the bar is the form's own closing landmark. Default `div`. */
+    as?: ActionBarElement;
+}
+/**
+ * A row of form/dialog actions — Cancel, Save, Submit. Composes with `Button`; doesn't
+ * lay out anything else itself.
+ *
+ * <ActionBar sticky>
+ *   <Button variant="ghost">Back</Button>
+ *   <Button>Continue</Button>
+ * </ActionBar>
+ */
+export declare const ActionBar: import("react").ForwardRefExoticComponent<ActionBarProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/layout/ActionBar/ActionBar.js

@@ -0,0 +1,25 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t, responsiveVars as n } from "../../../utils/responsive.js";
+import { space as r } from "../../../utils/tokens.js";
+import { visibilityClass as i } from "../../../utils/visibility.js";
+import a from "./ActionBar.module.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/layout/ActionBar/ActionBar.tsx
+var c = o(function({ align: o = "end", sticky: c = !1, gap: l, as: u = "div", hideBelow: d, hideAbove: f, className: p, style: m, ...h }, g) {
+	return /* @__PURE__ */ s(u, {
+		ref: g,
+		className: e(a.bar, i({
+			hideBelow: d,
+			hideAbove: f
+		}), p),
+		"data-align": o,
+		"data-sticky": c || void 0,
+		style: t(n("action-bar-gap", l, r), m),
+		...h
+	});
+});
+//#endregion
+export { c as ActionBar };
+
+//# sourceMappingURL=ActionBar.js.map

package/dist/components/layout/ActionBar/ActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.js","names":["styles","ActionBar_module_default","ActionBar","forwardRef","Comp","rest","cx","visibilityClass","className","align","sticky","mergeStyles","responsiveVars","gap","space","style"],"sources":["../../../../src/components/layout/ActionBar/ActionBar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\nimport styles from './ActionBar.module.css'\n\nexport type ActionBarElement = 'div' | 'footer'\nexport type ActionBarAlign = 'start' | 'end' | 'between'\n\nexport interface ActionBarProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /** Where the actions sit on the row. Default `end`. */\n  align?: ActionBarAlign\n  /**\n   * Pins the bar to the bottom of its scroll container — a canvas surface above a top\n   * hairline, at `--z-sticky`. Use inside a scrolling form/dialog body so the primary\n   * action stays reachable.\n   */\n  sticky?: boolean\n  /** Space between actions. Responsive. Default `3`. */\n  gap?: Responsive<Space>\n  /** Render as `footer` when the bar is the form's own closing landmark. Default `div`. */\n  as?: ActionBarElement\n}\n\n/**\n * A row of form/dialog actions — Cancel, Save, Submit. Composes with `Button`; doesn't\n * lay out anything else itself.\n *\n * <ActionBar sticky>\n *   <Button variant=\"ghost\">Back</Button>\n *   <Button>Continue</Button>\n * </ActionBar>\n */\nexport const ActionBar = forwardRef<HTMLElement, ActionBarProps>(function ActionBar(\n  {\n    align = 'end',\n    sticky = false,\n    gap,\n    as: Comp = 'div',\n    hideBelow,\n    hideAbove,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.bar, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-align={align}\n      data-sticky={sticky || undefined}\n      style={mergeStyles(responsiveVars('action-bar-gap', gap, space), style)}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AAkCA,IAAaE,IAAYC,EAAwC,SAC/D,EACE,WAAQ,OACR,YAAS,IACT,QACA,IAAIC,IAAO,OACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,KAAKO,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAC9E,cAAYC;EACZ,eAAaC,KAAU,KAAA;EACvB,OAAOC,EAAYC,EAAe,kBAAkBC,GAAKC,CAAK,GAAGC,CAAK;EACtE,GAAIV;CACL,CAAA;AAEL,CAAC"}

package/dist/components/layout/ActionBar/ActionBar.module.js

@@ -0,0 +1,6 @@
+//#region src/components/layout/ActionBar/ActionBar.module.css
+var e = "kiln-ActionBar__bar", t = { bar: e };
+//#endregion
+export { e as bar, t as default };
+
+//# sourceMappingURL=ActionBar.module.js.map

package/dist/components/layout/ActionBar/ActionBar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.module.js","names":["bar","ActionBar_module_default"],"sources":["../../../../src/components/layout/ActionBar/ActionBar.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --action-bar-surface   sticky background, default var(--color-surface)\n *   --action-bar-line      sticky top hairline, default var(--color-line)\n *\n * Responsive prop: gap → --action-bar-gap-{base,sm,md,lg,xl} (registered in\n * tokens/responsive-props.css), same cascade pattern as layout/Inline.\n */\n.bar {\n  --_gap: var(--action-bar-gap-base, var(--space-3));\n\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: var(--_gap);\n  row-gap: var(--space-2);\n  min-inline-size: 0;\n}\n\n.bar[data-align='start'] {\n  justify-content: flex-start;\n}\n.bar[data-align='end'] {\n  justify-content: flex-end;\n}\n.bar[data-align='between'] {\n  justify-content: space-between;\n}\n\n.bar[data-sticky] {\n  position: sticky;\n  inset-block-end: 0;\n  z-index: var(--z-sticky);\n  padding-block: var(--space-3);\n  border-block-start: var(--border-width) solid var(--action-bar-line, var(--color-line));\n  background: var(--action-bar-surface, var(--color-surface));\n}\n\n@media (min-width: 40em) {\n  .bar {\n    --_gap: var(--action-bar-gap-sm, var(--space-3));\n  }\n}\n@media (min-width: 48em) {\n  .bar {\n    --_gap: var(--action-bar-gap-md, var(--space-3));\n  }\n}\n@media (min-width: 64em) {\n  .bar {\n    --_gap: var(--action-bar-gap-lg, var(--space-3));\n  }\n}\n@media (min-width: 80em) {\n  .bar {\n    --_gap: var(--action-bar-gap-xl, var(--space-3));\n  }\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.bar[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/layout/ActionBar/index.d.ts

@@ -0,0 +1,2 @@
+export { ActionBar } from './ActionBar.js';
+export type { ActionBarProps, ActionBarAlign, ActionBarElement } from './ActionBar.js';

package/dist/components/layout/AppShell/AppShell.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes } from 'react';
+export type AppShellNavBreakpoint = 'md' | 'lg';
+export interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+    /** Text of the skip link rendered before everything else. Default "Skip to content". */
+    skipLinkLabel?: string;
+    /**
+     * Where navigation hands over from phone to desktop: from this breakpoint up the
+     * `Sidebar` appears and the `BottomBar` is removed, so there is never a width with
+     * neither. `md` (48em) or `lg` (64em, default). Pair it with the same value on
+     * `BottomNav hideAbove` and header `NavLinks hideBelow`.
+     */
+    navBreakpoint?: AppShellNavBreakpoint;
+    /** Id given to `AppShell.Main` (the skip link target). Generated when omitted. */
+    mainId?: string;
+}
+export interface AppShellHeaderProps extends HTMLAttributes<HTMLElement> {
+    /** Stick to the top of the viewport while scrolling. Default `true`. */
+    sticky?: boolean;
+}
+export type AppShellMainProps = Omit<HTMLAttributes<HTMLElement>, 'id'>;
+export interface AppShellSidebarProps extends HTMLAttributes<HTMLElement> {
+    /** Which side of Main it sits on. Logical, so it follows writing direction. Default `start`. */
+    side?: 'start' | 'end';
+}
+export type AppShellFooterProps = HTMLAttributes<HTMLElement>;
+export type AppShellBottomBarProps = HTMLAttributes<HTMLDivElement>;
+export declare const AppShell: import("react").ForwardRefExoticComponent<AppShellProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Header: import("react").ForwardRefExoticComponent<AppShellHeaderProps & import("react").RefAttributes<HTMLElement>>;
+    Main: import("react").ForwardRefExoticComponent<AppShellMainProps & import("react").RefAttributes<HTMLElement>>;
+    Sidebar: import("react").ForwardRefExoticComponent<AppShellSidebarProps & import("react").RefAttributes<HTMLElement>>;
+    Footer: import("react").ForwardRefExoticComponent<AppShellFooterProps & import("react").RefAttributes<HTMLElement>>;
+    BottomBar: import("react").ForwardRefExoticComponent<AppShellBottomBarProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/layout/AppShell/AppShell.js

@@ -0,0 +1,70 @@
+import { cx as e } from "../../../utils/cx.js";
+import { VisuallyHidden as t } from "../VisuallyHidden/VisuallyHidden.js";
+import n from "./AppShell.module.js";
+import { createContext as r, forwardRef as i, useContext as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/layout/AppShell/AppShell.tsx
+var l = r(null), u = i(function({ skipLinkLabel: r = "Skip to content", mainId: i, navBreakpoint: a = "lg", className: u, children: d, ...f }, p) {
+	let m = `app-main-${o().replace(/[^\w-]/g, "")}`, h = i ?? m;
+	return /* @__PURE__ */ s(l.Provider, {
+		value: { mainId: h },
+		children: /* @__PURE__ */ c("div", {
+			ref: p,
+			className: e(n.shell, u),
+			"data-nav-breakpoint": a,
+			...f,
+			children: [/* @__PURE__ */ s(t, {
+				as: "a",
+				href: `#${h}`,
+				focusable: !0,
+				className: n.skip,
+				children: r
+			}), d]
+		})
+	});
+}), d = i(function({ sticky: t = !0, className: r, ...i }, a) {
+	return /* @__PURE__ */ s("header", {
+		ref: a,
+		className: e(n.header, r),
+		"data-sticky": t || void 0,
+		...i
+	});
+}), f = i(function({ className: t, ...r }, i) {
+	let o = a(l);
+	return /* @__PURE__ */ s("main", {
+		ref: i,
+		id: o?.mainId,
+		tabIndex: -1,
+		className: e(n.main, t),
+		...r
+	});
+}), p = i(function({ side: t = "start", className: r, ...i }, a) {
+	return /* @__PURE__ */ s("aside", {
+		ref: a,
+		className: e(n.sidebar, r),
+		"data-side": t,
+		...i
+	});
+}), m = i(function({ className: t, ...r }, i) {
+	return /* @__PURE__ */ s("footer", {
+		ref: i,
+		className: e(n.footer, t),
+		...r
+	});
+}), h = i(function({ className: t, ...r }, i) {
+	return /* @__PURE__ */ s("div", {
+		ref: i,
+		className: e(n.bottomBar, t),
+		...r
+	});
+}), g = Object.assign(u, {
+	Header: d,
+	Main: f,
+	Sidebar: p,
+	Footer: m,
+	BottomBar: h
+});
+//#endregion
+export { g as AppShell };
+
+//# sourceMappingURL=AppShell.js.map

package/dist/components/layout/AppShell/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","names":["styles","AppShell_module_default","ShellContext","createContext","AppShellRoot","forwardRef","rest","generated","useId","id","mainId","cx","className","navBreakpoint","VisuallyHidden","skipLinkLabel","children","Header","sticky","Main","ctx","useContext","Sidebar","side","Footer","BottomBar","AppShell"],"sources":["../../../../src/components/layout/AppShell/AppShell.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useId, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { VisuallyHidden } from '#components/layout/VisuallyHidden'\nimport styles from './AppShell.module.css'\n\nconst ShellContext = createContext<{ mainId: string } | null>(null)\n\nexport type AppShellNavBreakpoint = 'md' | 'lg'\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** Text of the skip link rendered before everything else. Default \"Skip to content\". */\n  skipLinkLabel?: string\n  /**\n   * Where navigation hands over from phone to desktop: from this breakpoint up the\n   * `Sidebar` appears and the `BottomBar` is removed, so there is never a width with\n   * neither. `md` (48em) or `lg` (64em, default). Pair it with the same value on\n   * `BottomNav hideAbove` and header `NavLinks hideBelow`.\n   */\n  navBreakpoint?: AppShellNavBreakpoint\n  /** Id given to `AppShell.Main` (the skip link target). Generated when omitted. */\n  mainId?: string\n}\n\n/**\n * The frame of an app screen: header, optional sidebar, main, footer, and a\n * mobile-only bottom bar. Slots place themselves; order in JSX doesn't matter,\n * but keep DOM order = reading order (Header, Sidebar, Main, Footer, BottomBar).\n * `navBreakpoint` decides where the bottom bar gives way to the sidebar / header nav.\n *\n * <AppShell navBreakpoint=\"md\">\n *   <AppShell.Header>… <NavLinks hideBelow=\"md\">…</NavLinks></AppShell.Header>\n *   <AppShell.Main>…</AppShell.Main>\n *   <AppShell.BottomBar><BottomNav position=\"static\" hideAbove=\"md\">…</BottomNav></AppShell.BottomBar>\n * </AppShell>\n */\nconst AppShellRoot = forwardRef<HTMLDivElement, AppShellProps>(function AppShell(\n  { skipLinkLabel = 'Skip to content', mainId, navBreakpoint = 'lg', className, children, ...rest },\n  ref,\n) {\n  const generated = `app-main-${useId().replace(/[^\\w-]/g, '')}`\n  const id = mainId ?? generated\n  return (\n    <ShellContext.Provider value={{ mainId: id }}>\n      <div\n        ref={ref}\n        className={cx(styles.shell, className)}\n        data-nav-breakpoint={navBreakpoint}\n        {...rest}\n      >\n        <VisuallyHidden as=\"a\" href={`#${id}`} focusable className={styles.skip}>\n          {skipLinkLabel}\n        </VisuallyHidden>\n        {children}\n      </div>\n    </ShellContext.Provider>\n  )\n})\n\nexport interface AppShellHeaderProps extends HTMLAttributes<HTMLElement> {\n  /** Stick to the top of the viewport while scrolling. Default `true`. */\n  sticky?: boolean\n}\n\n/** The top bar: canvas-coloured, hairline below. Put a `Container` + `Inline` inside. */\nconst Header = forwardRef<HTMLElement, AppShellHeaderProps>(function AppShellHeader(\n  { sticky = true, className, ...rest },\n  ref,\n) {\n  return (\n    <header\n      ref={ref}\n      className={cx(styles.header, className)}\n      data-sticky={sticky || undefined}\n      {...rest}\n    />\n  )\n})\n\nexport type AppShellMainProps = Omit<HTMLAttributes<HTMLElement>, 'id'>\n\n/** The page's `<main>` landmark and the skip link's target. Its id comes from `AppShell`. */\nconst Main = forwardRef<HTMLElement, AppShellMainProps>(function AppShellMain(\n  { className, ...rest },\n  ref,\n) {\n  const ctx = useContext(ShellContext)\n  return (\n    <main\n      ref={ref}\n      id={ctx?.mainId}\n      tabIndex={-1}\n      className={cx(styles.main, className)}\n      {...rest}\n    />\n  )\n})\n\nexport interface AppShellSidebarProps extends HTMLAttributes<HTMLElement> {\n  /** Which side of Main it sits on. Logical, so it follows writing direction. Default `start`. */\n  side?: 'start' | 'end'\n}\n\n/** Navigation or context beside Main. Shown from the shell's `navBreakpoint` up only (default `lg`, 64em). */\nconst Sidebar = forwardRef<HTMLElement, AppShellSidebarProps>(function AppShellSidebar(\n  { side = 'start', className, ...rest },\n  ref,\n) {\n  return <aside ref={ref} className={cx(styles.sidebar, className)} data-side={side} {...rest} />\n})\n\nexport type AppShellFooterProps = HTMLAttributes<HTMLElement>\n\n/** The page footer: a hairline above, quieter ink. */\nconst Footer = forwardRef<HTMLElement, AppShellFooterProps>(function AppShellFooter(\n  { className, ...rest },\n  ref,\n) {\n  return <footer ref={ref} className={cx(styles.footer, className)} {...rest} />\n})\n\nexport type AppShellBottomBarProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * A region pinned to the bottom of the viewport on small screens and removed from the\n * shell's `navBreakpoint` up (default `lg`, 64em). Pads for the home indicator (`safe-area-inset-bottom`). Holds a\n * `BottomNav` or a single primary action.\n */\nconst BottomBar = forwardRef<HTMLDivElement, AppShellBottomBarProps>(function AppShellBottomBar(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.bottomBar, className)} {...rest} />\n})\n\nexport const AppShell = Object.assign(AppShellRoot, { Header, Main, Sidebar, Footer, BottomBar })\n"],"mappings":";;;;;;AAKA,IAAME,IAAeC,EAAyC,IAAI,GA8B5DC,IAAeC,EAA0C,SAC7D,EAAE,mBAAgB,mBAAmB,WAAQ,mBAAgB,MAAM,cAAW,aAAU,GAAGC,KAC3F,GACA;CACA,IAAMC,IAAY,YAAYC,EAAM,CAAC,CAAC,QAAQ,WAAW,EAAE,KACrDC,IAAKC,KAAUH;CACrB,OACE,kBAACL,EAAa,UAAd;EAAuB,OAAO,EAAE,QAAQO,EAAG;EACzC,UAAA,kBAAC,OAAD;GACO;GACL,WAAWE,EAAGX,EAAO,OAAOY,CAAS;GACrC,uBAAqBC;GACrB,GAAIP;GAJN,UAAA,CAME,kBAACQ,GAAD;IAAgB,IAAG;IAAI,MAAM,IAAIL;IAAM,WAAA;IAAU,WAAWT,EAAO;IAChE,UAAAe;GACa,CAAA,GACfC,CACE;;CACgB,CAAA;AAE3B,CAAC,GAQKC,IAASZ,EAA6C,SAC1D,EAAE,YAAS,IAAM,cAAW,GAAGC,KAC/B,GACA;CACA,OACE,kBAAC,UAAD;EACO;EACL,WAAWK,EAAGX,EAAO,QAAQY,CAAS;EACtC,eAAaM,KAAU,KAAA;EACvB,GAAIZ;CACL,CAAA;AAEL,CAAC,GAKKa,IAAOd,EAA2C,SACtD,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,IAAMc,IAAMC,EAAWnB,CAAY;CACnC,OACE,kBAAC,QAAD;EACO;EACL,IAAIkB,GAAK;EACT,UAAU;EACV,WAAWT,EAAGX,EAAO,MAAMY,CAAS;EACpC,GAAIN;CACL,CAAA;AAEL,CAAC,GAQKgB,IAAUjB,EAA8C,SAC5D,EAAE,UAAO,SAAS,cAAW,GAAGC,KAChC,GACA;CACA,OAAO,kBAAC,SAAD;EAAY;EAAK,WAAWK,EAAGX,EAAO,SAASY,CAAS;EAAG,aAAWW;EAAM,GAAIjB;CAAO,CAAA;AAChG,CAAC,GAKKkB,IAASnB,EAA6C,SAC1D,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,UAAD;EAAa;EAAK,WAAWK,EAAGX,EAAO,QAAQY,CAAS;EAAG,GAAIN;CAAO,CAAA;AAC/E,CAAC,GASKmB,IAAYpB,EAAmD,SACnE,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWK,EAAGX,EAAO,WAAWY,CAAS;EAAG,GAAIN;CAAO,CAAA;AAC/E,CAAC,GAEYoB,IAAW,OAAO,OAAOtB,GAAc;CAAE;CAAQ;CAAM;CAAS;CAAQ;AAAU,CAAC"}

package/dist/components/layout/AppShell/AppShell.module.js

@@ -0,0 +1,14 @@
+//#region src/components/layout/AppShell/AppShell.module.css
+var e = "kiln-AppShell__shell", t = "kiln-AppShell__header", n = "kiln-AppShell__skip", r = "kiln-AppShell__main", i = "kiln-AppShell__sidebar", a = "kiln-AppShell__footer", o = "kiln-AppShell__bottomBar", s = {
+	shell: e,
+	header: t,
+	skip: n,
+	main: r,
+	sidebar: i,
+	footer: a,
+	bottomBar: o
+};
+//#endregion
+export { o as bottomBar, s as default, a as footer, t as header, r as main, e as shell, i as sidebar, n as skip };
+
+//# sourceMappingURL=AppShell.module.js.map

package/dist/components/layout/AppShell/AppShell.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.module.js","names":["shell","header","skip","main","sidebar","footer","bottomBar","AppShell_module_default"],"sources":["../../../../src/components/layout/AppShell/AppShell.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --app-shell-header-height   minimum header height, also the sidebar's sticky offset\n *                               (default: control-lg + space-4)\n *   --app-shell-sidebar-width   default 16rem\n *   --app-shell-header-bg       default var(--color-canvas) — opaque, never glass\n *   --app-shell-bar-rule        rule under the header / above the bottom bar\n *                               (default var(--color-line-strong): these are the frame's edges)\n *\n * The bottom bar is `position: sticky` as the grid's last row rather than `fixed`, so\n * nothing needs a magic padding to stop it covering the end of Main.\n */\n.shell {\n  --app-shell-sticky-offset: 0px;\n\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: auto 1fr auto auto;\n  grid-template-areas:\n    'header'\n    'main'\n    'footer'\n    'bottombar';\n  min-block-size: 100dvh;\n}\n\n.shell:has(> .header[data-sticky]) {\n  --app-shell-sticky-offset: var(\n    --app-shell-header-height,\n    calc(var(--control-lg) + var(--space-4))\n  );\n}\n\n/* Skip link: clipped until focused, then a pill in the top corner above everything. */\n.skip {\n  position: absolute;\n  inset-block-start: var(--space-3);\n  inset-inline-start: var(--space-3);\n  z-index: var(--z-toast);\n  padding: var(--space-2) var(--space-4);\n  border: var(--border-width) solid var(--color-line-strong);\n  border-radius: var(--radius-action);\n  background: var(--color-surface-raised);\n  box-shadow: var(--shadow-float);\n  color: var(--color-ink);\n  font-size: var(--text-sm);\n  font-weight: var(--label-weight);\n  text-decoration: none;\n}\n\n.header {\n  grid-area: header;\n  display: flex;\n  align-items: center;\n  min-block-size: var(--app-shell-header-height, calc(var(--control-lg) + var(--space-4)));\n  min-inline-size: 0;\n  padding-block: var(--space-2);\n  border-block-end: var(--border-width) solid var(--app-shell-bar-rule, var(--color-line-strong));\n  background-color: var(--app-shell-header-bg, var(--color-canvas));\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.header > * {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n}\n.header[data-sticky] {\n  position: sticky;\n  inset-block-start: 0;\n  z-index: var(--z-sticky);\n}\n\n.main {\n  grid-area: main;\n  min-inline-size: 0;\n}\n.main:focus {\n  outline: none;\n}\n\n.sidebar {\n  grid-area: sidebar;\n  display: none;\n  min-inline-size: 0;\n}\n\n.footer {\n  grid-area: footer;\n  min-inline-size: 0;\n  padding-block: var(--space-6);\n  border-block-start: var(--border-width) solid var(--color-line);\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n}\n\n.bottomBar {\n  grid-area: bottombar;\n  position: sticky;\n  inset-block-end: 0;\n  z-index: var(--z-sticky);\n  min-inline-size: 0;\n  padding-block-end: env(safe-area-inset-bottom, 0px);\n  border-block-start: var(--border-width) solid var(--app-shell-bar-rule, var(--color-line-strong));\n  background-color: var(--app-shell-header-bg, var(--color-canvas));\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n}\n\n/*\n * Nav hand-over. `data-nav-breakpoint` (md | lg) on the shell decides where the bottom\n * bar goes and the sidebar arrives — one breakpoint for both, so no width has neither.\n */\n.sidebar {\n  position: sticky;\n  inset-block-start: var(--app-shell-sticky-offset);\n  align-self: start;\n  block-size: calc(100dvh - var(--app-shell-sticky-offset));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--space-5) var(--space-4);\n}\n.sidebar[data-side='start'] {\n  border-inline-end: var(--border-width) solid var(--color-line);\n}\n.sidebar[data-side='end'] {\n  border-inline-start: var(--border-width) solid var(--color-line);\n}\n\n@media (min-width: 48em) {\n  .shell[data-nav-breakpoint='md'] > .bottomBar {\n    display: none;\n  }\n  .shell[data-nav-breakpoint='md'] > .sidebar {\n    display: block;\n  }\n  .shell[data-nav-breakpoint='md']:has(> .sidebar) {\n    grid-template-columns: var(--app-shell-sidebar-width, 16rem) minmax(0, 1fr);\n    grid-template-areas:\n      'header header'\n      'sidebar main'\n      'sidebar footer'\n      'bottombar bottombar';\n  }\n  .shell[data-nav-breakpoint='md']:has(> .sidebar[data-side='end']) {\n    grid-template-columns: minmax(0, 1fr) var(--app-shell-sidebar-width, 16rem);\n    grid-template-areas:\n      'header header'\n      'main sidebar'\n      'footer sidebar'\n      'bottombar bottombar';\n  }\n}\n\n@media (min-width: 64em) {\n  .shell[data-nav-breakpoint='lg'] > .bottomBar {\n    display: none;\n  }\n  .shell[data-nav-breakpoint='lg'] > .sidebar {\n    display: block;\n  }\n  .shell[data-nav-breakpoint='lg']:has(> .sidebar) {\n    grid-template-columns: var(--app-shell-sidebar-width, 16rem) minmax(0, 1fr);\n    grid-template-areas:\n      'header header'\n      'sidebar main'\n      'sidebar footer'\n      'bottombar bottombar';\n  }\n  .shell[data-nav-breakpoint='lg']:has(> .sidebar[data-side='end']) {\n    grid-template-columns: minmax(0, 1fr) var(--app-shell-sidebar-width, 16rem);\n    grid-template-areas:\n      'header header'\n      'main sidebar'\n      'footer sidebar'\n      'bottombar bottombar';\n  }\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.shell[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/layout/AppShell/index.d.ts

@@ -0,0 +1,2 @@
+export { AppShell } from './AppShell.js';
+export type { AppShellProps, AppShellHeaderProps, AppShellMainProps, AppShellSidebarProps, AppShellFooterProps, AppShellBottomBarProps, AppShellNavBreakpoint, } from './AppShell.js';

package/dist/components/layout/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes } from 'react';
+export type AspectRatioPreset = '1/1' | '4/3' | '3/2' | '16/9' | '21/9' | '3/4';
+export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    /** Width ÷ height, as a preset or a number (e.g. `1.91`). Default `16/9`. */
+    ratio?: AspectRatioPreset | number;
+}
+/**
+ * A frame that holds its proportions; its child (image, video, iframe, SVG) fills it
+ * and is cropped with `object-fit: cover`. It has no edge or radius of its own —
+ * wrap it (Media, Card) for that.
+ *
+ * <AspectRatio ratio="4/3"><img src="/images/dashboard.png" alt="Revenue dashboard" /></AspectRatio>
+ */
+export declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/layout/AspectRatio/AspectRatio.js

@@ -0,0 +1,18 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t } from "../../../utils/responsive.js";
+import n from "./AspectRatio.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/layout/AspectRatio/AspectRatio.tsx
+var a = (e) => typeof e == "number" ? String(e) : e.replace("/", " / "), o = r(function({ ratio: r = "16/9", className: o, style: s, ...c }, l) {
+	return /* @__PURE__ */ i("div", {
+		ref: l,
+		className: e(n.frame, o),
+		style: t({ "--aspect-ratio": a(r) }, s),
+		...c
+	});
+});
+//#endregion
+export { o as AspectRatio };
+
+//# sourceMappingURL=AspectRatio.js.map

package/dist/components/layout/AspectRatio/AspectRatio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AspectRatio.js","names":["styles","AspectRatio_module_default","toCss","ratio","AspectRatio","forwardRef","rest","cx","className","mergeStyles","style"],"sources":["../../../../src/components/layout/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport styles from './AspectRatio.module.css'\n\nexport type AspectRatioPreset = '1/1' | '4/3' | '3/2' | '16/9' | '21/9' | '3/4'\n\nexport interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {\n  /** Width ÷ height, as a preset or a number (e.g. `1.91`). Default `16/9`. */\n  ratio?: AspectRatioPreset | number\n}\n\nconst toCss = (ratio: AspectRatioPreset | number): string =>\n  typeof ratio === 'number' ? String(ratio) : ratio.replace('/', ' / ')\n\n/**\n * A frame that holds its proportions; its child (image, video, iframe, SVG) fills it\n * and is cropped with `object-fit: cover`. It has no edge or radius of its own —\n * wrap it (Media, Card) for that.\n *\n * <AspectRatio ratio=\"4/3\"><img src=\"/images/dashboard.png\" alt=\"Revenue dashboard\" /></AspectRatio>\n */\nexport const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(function AspectRatio(\n  { ratio = '16/9', className, style, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(styles.frame, className)}\n      style={mergeStyles({ '--aspect-ratio': toCss(ratio) } as CSSProperties, style)}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AAYA,IAAME,KAAS,MACb,OAAOC,KAAU,WAAW,OAAOA,CAAK,IAAIA,EAAM,QAAQ,KAAK,KAAK,GASzDC,IAAcC,EAA6C,SACtE,EAAE,WAAQ,QAAQ,cAAW,UAAO,GAAGC,KACvC,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,WAAWC,EAAGP,EAAO,OAAOQ,CAAS;EACrC,OAAOC,EAAY,EAAE,kBAAkBP,EAAMC,CAAK,EAAE,GAAoBO,CAAK;EAC7E,GAAIJ;CACL,CAAA;AAEL,CAAC"}

package/dist/components/layout/AspectRatio/AspectRatio.module.js

@@ -0,0 +1,6 @@
+//#region src/components/layout/AspectRatio/AspectRatio.module.css
+var e = "kiln-AspectRatio__frame", t = { frame: e };
+//#endregion
+export { t as default, e as frame };
+
+//# sourceMappingURL=AspectRatio.module.js.map

package/dist/components/layout/AspectRatio/AspectRatio.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AspectRatio.module.js","names":["frame","AspectRatio_module_default"],"sources":["../../../../src/components/layout/AspectRatio/AspectRatio.module.css"],"sourcesContent":[".frame {\n  position: relative;\n  inline-size: 100%;\n  aspect-ratio: var(--aspect-ratio, 16 / 9);\n  overflow: hidden;\n}\n\n/* Direct children fill the frame; replaced elements crop rather than distort. */\n.frame > * {\n  position: absolute;\n  inset: 0;\n  inline-size: 100%;\n  block-size: 100%;\n}\n.frame > :is(img, video, picture, canvas, svg) {\n  object-fit: cover;\n}\n.frame > picture > img {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n"],"mappings":""}

package/dist/components/layout/AspectRatio/index.d.ts

@@ -0,0 +1,2 @@
+export { AspectRatio } from './AspectRatio.js';
+export type { AspectRatioProps, AspectRatioPreset } from './AspectRatio.js';

package/dist/components/layout/Box/Box.d.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../../utils/responsive.js';
+import { type Space } from '../../../utils/tokens.js';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type BoxElement = 'div' | 'span' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'li';
+export type BoxSurface = 'none' | 'canvas' | 'surface' | 'sunken' | 'raised' | 'inverse';
+export type BoxRadius = 'none' | 'field' | 'surface' | 'media';
+export interface BoxProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
+    /** Padding on every side. Responsive. */
+    padding?: Responsive<Space>;
+    /** Inline (left/right) padding; overrides `padding` on that axis. Responsive. */
+    paddingX?: Responsive<Space>;
+    /** Block (top/bottom) padding; overrides `padding` on that axis. Responsive. */
+    paddingY?: Responsive<Space>;
+    /** Background fill. `inverse` also re-points ink and line colours for its children. */
+    surface?: BoxSurface;
+    /** Hairline border in `--color-line`. One edge treatment per element — a border *or* a fill. */
+    border?: boolean;
+    /** Corner radius, by role. */
+    radius?: BoxRadius;
+    as?: BoxElement;
+}
+/**
+ * The escape hatch: padding, a surface and an edge — nothing else. Reach for
+ * Stack/Inline/Grid for arrangement and Card for self-contained objects first.
+ *
+ * <Box padding={{ base: 4, md: 5 }} surface="sunken" radius="surface">…</Box>
+ */
+export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/layout/Box/Box.js

@@ -0,0 +1,26 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t, responsiveVars as n } from "../../../utils/responsive.js";
+import { space as r } from "../../../utils/tokens.js";
+import { visibilityClass as i } from "../../../utils/visibility.js";
+import a from "./Box.module.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/layout/Box/Box.tsx
+var c = o(function({ padding: o, paddingX: c, paddingY: l, surface: u = "none", border: d = !1, radius: f = "none", as: p = "div", hideBelow: m, hideAbove: h, className: g, style: _, ...v }, y) {
+	return /* @__PURE__ */ s(p, {
+		ref: y,
+		className: e(a.box, i({
+			hideBelow: m,
+			hideAbove: h
+		}), g),
+		"data-surface": u === "none" ? void 0 : u,
+		"data-border": d || void 0,
+		"data-radius": f === "none" ? void 0 : f,
+		style: t(n("box-p", o, r), n("box-px", c, r), n("box-py", l, r), _),
+		...v
+	});
+});
+//#endregion
+export { c as Box };
+
+//# sourceMappingURL=Box.js.map

package/dist/components/layout/Box/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","names":["styles","Box_module_default","Box","forwardRef","Comp","rest","cx","visibilityClass","className","surface","border","radius","mergeStyles","responsiveVars","padding","space","paddingX","paddingY","style"],"sources":["../../../../src/components/layout/Box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport styles from './Box.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type BoxElement =\n  'div' | 'span' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'li'\nexport type BoxSurface = 'none' | 'canvas' | 'surface' | 'sunken' | 'raised' | 'inverse'\nexport type BoxRadius = 'none' | 'field' | 'surface' | 'media'\n\nexport interface BoxProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /** Padding on every side. Responsive. */\n  padding?: Responsive<Space>\n  /** Inline (left/right) padding; overrides `padding` on that axis. Responsive. */\n  paddingX?: Responsive<Space>\n  /** Block (top/bottom) padding; overrides `padding` on that axis. Responsive. */\n  paddingY?: Responsive<Space>\n  /** Background fill. `inverse` also re-points ink and line colours for its children. */\n  surface?: BoxSurface\n  /** Hairline border in `--color-line`. One edge treatment per element — a border *or* a fill. */\n  border?: boolean\n  /** Corner radius, by role. */\n  radius?: BoxRadius\n  as?: BoxElement\n}\n\n/**\n * The escape hatch: padding, a surface and an edge — nothing else. Reach for\n * Stack/Inline/Grid for arrangement and Card for self-contained objects first.\n *\n * <Box padding={{ base: 4, md: 5 }} surface=\"sunken\" radius=\"surface\">…</Box>\n */\nexport const Box = forwardRef<HTMLElement, BoxProps>(function Box(\n  {\n    padding,\n    paddingX,\n    paddingY,\n    surface = 'none',\n    border = false,\n    radius = 'none',\n    as: Comp = 'div',\n    hideBelow,\n    hideAbove,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.box, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-surface={surface === 'none' ? undefined : surface}\n      data-border={border || undefined}\n      data-radius={radius === 'none' ? undefined : radius}\n      style={mergeStyles(\n        responsiveVars('box-p', padding, space),\n        responsiveVars('box-px', paddingX, space),\n        responsiveVars('box-py', paddingY, space),\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AAkCA,IAAaE,IAAMC,EAAkC,SACnD,EACE,YACA,aACA,aACA,aAAU,QACV,YAAS,IACT,YAAS,QACT,IAAIC,IAAO,OACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,KAAKO,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAC9E,gBAAcC,MAAY,SAAS,KAAA,IAAYA;EAC/C,eAAaC,KAAU,KAAA;EACvB,eAAaC,MAAW,SAAS,KAAA,IAAYA;EAC7C,OAAOC,EACLC,EAAe,SAASC,GAASC,CAAK,GACtCF,EAAe,UAAUG,GAAUD,CAAK,GACxCF,EAAe,UAAUI,GAAUF,CAAK,GACxCG,CACF;EACA,GAAIb;CACL,CAAA;AAEL,CAAC"}

package/dist/components/layout/Box/Box.module.js

@@ -0,0 +1,6 @@
+//#region src/components/layout/Box/Box.module.css
+var e = "kiln-Box__box", t = { box: e };
+//#endregion
+export { e as box, t as default };
+
+//# sourceMappingURL=Box.module.js.map

package/dist/components/layout/Box/Box.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.module.js","names":["box","Box_module_default"],"sources":["../../../../src/components/layout/Box/Box.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css. Axis padding (--box-px/-py)\n * falls back to the all-sides value (--box-p) per breakpoint.\n *\n * --box-fill / --box-on (read-only): the fill and ink of an `inverse` Box.\n */\n.box {\n  --_p: var(--box-p-base, 0px);\n  --_px: var(--box-px-base, var(--_p));\n  --_py: var(--box-py-base, var(--_p));\n\n  display: block;\n  min-inline-size: 0;\n  padding-block: var(--_py);\n  padding-inline: var(--_px);\n}\n\n@media (min-width: 40em) {\n  .box {\n    --_p: var(--box-p-sm, 0px);\n    --_px: var(--box-px-sm, var(--_p));\n    --_py: var(--box-py-sm, var(--_p));\n  }\n}\n@media (min-width: 48em) {\n  .box {\n    --_p: var(--box-p-md, 0px);\n    --_px: var(--box-px-md, var(--_p));\n    --_py: var(--box-py-md, var(--_p));\n  }\n}\n@media (min-width: 64em) {\n  .box {\n    --_p: var(--box-p-lg, 0px);\n    --_px: var(--box-px-lg, var(--_p));\n    --_py: var(--box-py-lg, var(--_p));\n  }\n}\n@media (min-width: 80em) {\n  .box {\n    --_p: var(--box-p-xl, 0px);\n    --_px: var(--box-px-xl, var(--_p));\n    --_py: var(--box-py-xl, var(--_p));\n  }\n}\n\n/* Surfaces */\n.box[data-surface='canvas'] {\n  background-color: var(--color-canvas);\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.box[data-surface='surface'] {\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n}\n.box[data-surface='sunken'] {\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink);\n}\n.box[data-surface='raised'] {\n  background-color: var(--color-surface-raised);\n  color: var(--color-ink);\n}\n/* Inverse re-points the colour roles for descendants — same approach as Section. */\n.box[data-surface='inverse'] {\n  --box-fill: var(--color-surface-inverse);\n  --box-on: var(--color-ink-inverse);\n  --color-ink: var(--box-on);\n  --color-ink-muted: color-mix(in oklab, var(--box-on) 76%, var(--box-fill));\n  --color-ink-subtle: color-mix(in oklab, var(--box-on) 60%, var(--box-fill));\n  --color-line: color-mix(in oklab, var(--box-on) 22%, var(--box-fill));\n  --color-line-strong: color-mix(in oklab, var(--box-on) 45%, var(--box-fill));\n  --color-canvas: var(--box-fill);\n  --color-surface: color-mix(in oklab, var(--box-on) 7%, var(--box-fill));\n  --color-surface-sunken: color-mix(in oklab, var(--box-on) 12%, var(--box-fill));\n  --color-surface-raised: color-mix(in oklab, var(--box-on) 4%, var(--box-fill));\n  --color-focus: var(--box-on);\n  --color-accent-text: var(--box-on);\n  --canvas-image: none;\n\n  background-color: var(--box-fill);\n  color: var(--box-on);\n}\n.box[data-surface='inverse'] > * {\n  --color-surface-inverse: var(--box-on);\n  --color-ink-inverse: var(--box-fill);\n}\n\n.box[data-border] {\n  border: var(--border-width) solid var(--color-line);\n}\n\n.box[data-radius='field'] {\n  border-radius: var(--radius-field);\n}\n.box[data-radius='surface'] {\n  border-radius: var(--radius-surface);\n}\n.box[data-radius='media'] {\n  border-radius: var(--radius-media);\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.box[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/layout/Box/index.d.ts

@@ -0,0 +1,2 @@
+export { Box } from './Box.js';
+export type { BoxProps, BoxElement, BoxSurface, BoxRadius } from './Box.js';