@mitcsutt/kiln-ui 0.1.0

package/dist/components/navigation/Stepper/Stepper.js

@@ -0,0 +1,93 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CheckIcon as t, ErrorIcon as n } from "../../../icons/icons.js";
+import { mergeStyles as r } from "../../../utils/responsive.js";
+import { VisuallyHidden as i } from "../../layout/VisuallyHidden/VisuallyHidden.js";
+import a from "./Stepper.module.js";
+import { forwardRef as o, useId as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/navigation/Stepper/Stepper.tsx
+var d = (e, t, n) => /* @__PURE__ */ u(c, { children: [
+	"Step ",
+	e + 1,
+	" of ",
+	t,
+	" · ",
+	n
+] });
+function f(e, t, n) {
+	return e.status ? e.status : n < 0 ? "upcoming" : t === n ? "current" : t < n ? "complete" : "upcoming";
+}
+var p = o(function({ steps: o, value: p, onStepSelect: m, orientation: h = "horizontal", compactBelow: g, formatCompact: _ = d, statusLabels: v, className: y, id: b, style: x, ...S }, C) {
+	let w = s(), T = b ?? w, E = o.length, D = o.findIndex((e) => e.value === p), O = D >= 0 ? o[D] : void 0, k = v?.complete ?? "completed", A = v?.error ?? "has errors";
+	return /* @__PURE__ */ u("div", {
+		className: e(a.root, y),
+		"data-compact-below": g,
+		style: r({ "--_count": E }, x),
+		children: [g ? /* @__PURE__ */ l("p", {
+			className: a.compact,
+			children: _(Math.max(D, 0), E, O?.label ?? "")
+		}) : null, /* @__PURE__ */ l("ol", {
+			ref: C,
+			id: T,
+			className: a.list,
+			"data-orientation": h,
+			...S,
+			children: o.map((e, r) => {
+				let o = f(e, r, D), s = o === "error" || e.invalid === !0, d = `${T}-${e.value}`, p = s ? /* @__PURE__ */ l(n, { size: "sm" }) : o === "complete" ? /* @__PURE__ */ l(t, { size: "sm" }) : /* @__PURE__ */ l("span", {
+					className: a.number,
+					children: r + 1
+				}), h = /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("span", {
+					className: a.markerCol,
+					children: [/* @__PURE__ */ l("span", {
+						className: a.marker,
+						children: p
+					}), r < E - 1 ? /* @__PURE__ */ l("span", {
+						className: a.connector,
+						"data-status": o
+					}) : null]
+				}), /* @__PURE__ */ u("span", {
+					className: a.text,
+					children: [/* @__PURE__ */ u("span", {
+						className: a.label,
+						children: [
+							e.label,
+							o === "complete" && !s ? /* @__PURE__ */ l(i, { children: ` ${k}` }) : null,
+							s ? /* @__PURE__ */ l(i, { children: ` ${A}` }) : null
+						]
+					}), e.description ? /* @__PURE__ */ l("span", {
+						className: a.description,
+						children: e.description
+					}) : null]
+				})] });
+				return /* @__PURE__ */ l("li", {
+					className: a.item,
+					"data-status": o,
+					"data-invalid": s || void 0,
+					children: m ? /* @__PURE__ */ l("button", {
+						type: "button",
+						id: d,
+						className: a.control,
+						"data-status": o,
+						"data-invalid": s || void 0,
+						"aria-current": o === "current" ? "step" : void 0,
+						onClick: () => {
+							m(e.value);
+						},
+						children: h
+					}) : /* @__PURE__ */ l("span", {
+						id: d,
+						className: a.control,
+						"data-status": o,
+						"data-invalid": s || void 0,
+						"aria-current": o === "current" ? "step" : void 0,
+						children: h
+					})
+				}, e.value);
+			})
+		})]
+	});
+});
+//#endregion
+export { p as Stepper };
+
+//# sourceMappingURL=Stepper.js.map

package/dist/components/navigation/Stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","names":["_Fragment","styles","Stepper_module_default","Fragment$1","defaultFormatCompact","index","total","label","resolveStatus","step","currentIndex","Stepper","forwardRef","rest","autoId","useId","baseId","id","steps","value","currentStep","completeSuffix","statusLabels","errorSuffix","cx","className","compactBelow","mergeStyles","style","formatCompact","orientation","status","hasErrors","stepId","marker","ErrorIcon","CheckIcon","inner","VisuallyHidden","onStepSelect"],"sources":["../../../../src/components/navigation/Stepper/Stepper.tsx"],"sourcesContent":["import { forwardRef, useId, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport { CheckIcon, ErrorIcon } from '#icons'\nimport { VisuallyHidden } from '#components/layout/VisuallyHidden'\nimport styles from './Stepper.module.css'\n\nexport type StepperStatus = 'complete' | 'current' | 'upcoming' | 'error'\n\nexport interface StepperStep {\n  /** Stable identifier — matched against `value` and passed to `onStepSelect`. */\n  value: string\n  label: ReactNode\n  description?: ReactNode\n  /** Overrides the status this step would otherwise derive from its position relative to `value`. */\n  status?: StepperStatus\n  /**\n   * The step has errors. Independent of `status` (which keeps describing progress): an invalid\n   * step gets the critical glyph and text, and the hidden error suffix in place of the complete one;\n   * a current invalid step keeps `aria-current=\"step\"`. `status: 'error'` is the same treatment for a step whose progress\n   * you don't report.\n   */\n  invalid?: boolean\n}\n\nexport interface StepperProps extends Omit<HTMLAttributes<HTMLOListElement>, 'onSelect'> {\n  steps: readonly StepperStep[]\n  /** The current step's `value` (`aria-current=\"step\"`). */\n  value: string\n  /** Steps become buttons when set — lets people jump to a visited or upcoming step. */\n  onStepSelect?: (value: string) => void\n  /** Default `horizontal`. */\n  orientation?: 'horizontal' | 'vertical'\n  /** Below this breakpoint, collapse to a single line of text (`formatCompact`). */\n  compactBelow?: 'sm' | 'md'\n  formatCompact?: (index: number, total: number, label: ReactNode) => ReactNode\n  /** Visually-hidden suffixes announced after a step's label. */\n  statusLabels?: { complete?: string; error?: string }\n}\n\nconst defaultFormatCompact = (index: number, total: number, label: ReactNode): ReactNode => (\n  <>\n    Step {index + 1} of {total} · {label}\n  </>\n)\n\nfunction resolveStatus(step: StepperStep, index: number, currentIndex: number): StepperStatus {\n  if (step.status) return step.status\n  if (currentIndex < 0) return 'upcoming'\n  if (index === currentIndex) return 'current'\n  return index < currentIndex ? 'complete' : 'upcoming'\n}\n\n/**\n * A step indicator for a multi-step flow — not a form control. Pair with `ActionBar`\n * for the Back / Next / Submit row and drive both from the same current-step state.\n *\n * <Stepper\n *   steps={[{ value: 'you', label: 'You' }, { value: 'team', label: 'Team' }]}\n *   value={step}\n *   onStepSelect={setStep}\n * />\n */\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(function Stepper(\n  {\n    steps,\n    value,\n    onStepSelect,\n    orientation = 'horizontal',\n    compactBelow,\n    formatCompact = defaultFormatCompact,\n    statusLabels,\n    className,\n    id,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const autoId = useId()\n  const baseId = id ?? autoId\n  const total = steps.length\n  const currentIndex = steps.findIndex((step) => step.value === value)\n  const currentStep = currentIndex >= 0 ? steps[currentIndex] : undefined\n  const completeSuffix = statusLabels?.complete ?? 'completed'\n  const errorSuffix = statusLabels?.error ?? 'has errors'\n\n  return (\n    <div\n      className={cx(styles.root, className)}\n      data-compact-below={compactBelow}\n      style={mergeStyles({ '--_count': total } as CSSProperties, style)}\n    >\n      {compactBelow ? (\n        <p className={styles.compact}>\n          {formatCompact(Math.max(currentIndex, 0), total, currentStep?.label ?? '')}\n        </p>\n      ) : null}\n      <ol ref={ref} id={baseId} className={styles.list} data-orientation={orientation} {...rest}>\n        {steps.map((step, index) => {\n          const status = resolveStatus(step, index, currentIndex)\n          const hasErrors = status === 'error' || step.invalid === true\n          const stepId = `${baseId}-${step.value}`\n          const marker = hasErrors ? (\n            <ErrorIcon size=\"sm\" />\n          ) : status === 'complete' ? (\n            <CheckIcon size=\"sm\" />\n          ) : (\n            <span className={styles.number}>{index + 1}</span>\n          )\n          const inner = (\n            <>\n              <span className={styles.markerCol}>\n                <span className={styles.marker}>{marker}</span>\n                {index < total - 1 ? (\n                  <span className={styles.connector} data-status={status} />\n                ) : null}\n              </span>\n              <span className={styles.text}>\n                <span className={styles.label}>\n                  {step.label}\n                  {status === 'complete' && !hasErrors ? (\n                    <VisuallyHidden>{` ${completeSuffix}`}</VisuallyHidden>\n                  ) : null}\n                  {hasErrors ? <VisuallyHidden>{` ${errorSuffix}`}</VisuallyHidden> : null}\n                </span>\n                {step.description ? (\n                  <span className={styles.description}>{step.description}</span>\n                ) : null}\n              </span>\n            </>\n          )\n          return (\n            <li\n              key={step.value}\n              className={styles.item}\n              data-status={status}\n              data-invalid={hasErrors || undefined}\n            >\n              {onStepSelect ? (\n                <button\n                  type=\"button\"\n                  id={stepId}\n                  className={styles.control}\n                  data-status={status}\n                  data-invalid={hasErrors || undefined}\n                  aria-current={status === 'current' ? 'step' : undefined}\n                  onClick={() => {\n                    onStepSelect(step.value)\n                  }}\n                >\n                  {inner}\n                </button>\n              ) : (\n                <span\n                  id={stepId}\n                  className={styles.control}\n                  data-status={status}\n                  data-invalid={hasErrors || undefined}\n                  aria-current={status === 'current' ? 'step' : undefined}\n                >\n                  {inner}\n                </span>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;AAwCA,IAAMI,KAAwB,GAAe,GAAe,MAC1D,kBAAAJ,GAAA,EAAA,UAAA;CAAE;CACMK,IAAQ;CAAE;CAAKC;CAAM;CAAIC;AAC/B,EAAA,CAAA;AAGJ,SAASC,EAAc,GAAmB,GAAe,GAAqC;CAI5F,OAHIC,EAAK,SAAeA,EAAK,SACzBC,IAAe,IAAU,aACzBL,MAAUK,IAAqB,YAC5BL,IAAQK,IAAe,aAAa;AAC7C;AAYA,IAAaC,IAAUC,EAA2C,SAChE,EACE,UACA,UACA,iBACA,iBAAc,cACd,iBACA,mBAAgBR,GAChB,iBACA,cACA,OACA,UACA,GAAGS,KAEL,GACA;CACA,IAAMC,IAASC,EAAM,GACfC,IAASC,KAAMH,GACfR,IAAQY,EAAM,QACdR,IAAeQ,EAAM,WAAW,MAAST,EAAK,UAAUU,CAAK,GAC7DC,IAAcV,KAAgB,IAAIQ,EAAMR,KAAgB,KAAA,GACxDW,IAAiBC,GAAc,YAAY,aAC3CC,IAAcD,GAAc,SAAS;CAE3C,OACE,kBAAC,OAAD;EACE,WAAWE,EAAGvB,EAAO,MAAMwB,CAAS;EACpC,sBAAoBC;EACpB,OAAOC,EAAY,EAAE,YAAYrB,EAAM,GAAoBsB,CAAK;EAHlE,UAAA,CAKGF,IACC,kBAAC,KAAD;GAAG,WAAWzB,EAAO;GAClB,UAAA4B,EAAc,KAAK,IAAInB,GAAc,CAAC,GAAGJ,GAAOc,GAAa,SAAS,EAAE;EACxE,CAAA,IACD,MACJ,kBAAC,MAAD;GAAS;GAAK,IAAIJ;GAAQ,WAAWf,EAAO;GAAM,oBAAkB6B;GAAa,GAAIjB;GAClF,UAAAK,EAAM,KAAK,GAAM,MAAU;IAC1B,IAAMa,IAASvB,EAAcC,GAAMJ,GAAOK,CAAY,GAChDsB,IAAYD,MAAW,WAAWtB,EAAK,YAAY,IACnDwB,IAAS,GAAGjB,EAAO,GAAGP,EAAK,SAC3ByB,IAASF,IACb,kBAACG,GAAD,EAAW,MAAK,KAAM,CAAA,IACpBJ,MAAW,aACb,kBAACK,GAAD,EAAW,MAAK,KAAM,CAAA,IAEtB,kBAAC,QAAD;KAAM,WAAWnC,EAAO;KAAS,UAAAI,IAAQ;IAAQ,CAAA,GAE7CgC,IACJ,kBAAArC,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWC,EAAO;KAAxB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAWA,EAAO;MAAS,UAAAiC;KAAa,CAAA,GAC7C7B,IAAQC,IAAQ,IACf,kBAAC,QAAD;MAAM,WAAWL,EAAO;MAAW,eAAa8B;KAAS,CAAA,IACvD,IACA;IACN,CAAA,GAAA,kBAAC,QAAD;KAAM,WAAW9B,EAAO;KAAxB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAWA,EAAO;MAAxB,UAAA;OACGQ,EAAK;OACLsB,MAAW,cAAc,CAACC,IACzB,kBAACM,GAAD,EAAA,UAAiB,IAAIjB,IAAiC,CAAA,IACpD;OACHW,IAAY,kBAACM,GAAD,EAAA,UAAiB,IAAIf,IAA8B,CAAA,IAAI;MAChE;KACL,CAAA,GAAAd,EAAK,cACJ,kBAAC,QAAD;MAAM,WAAWR,EAAO;MAAc,UAAAQ,EAAK;KAAkB,CAAA,IAC3D,IACA;IACN,CAAA,CAAA,EAAA,CAAA;IAEJ,OACE,kBAAC,MAAD;KAEE,WAAWR,EAAO;KAClB,eAAa8B;KACb,gBAAcC,KAAa,KAAA;KAE1B,UAAAO,IACC,kBAAC,UAAD;MACE,MAAK;MACL,IAAIN;MACJ,WAAWhC,EAAO;MAClB,eAAa8B;MACb,gBAAcC,KAAa,KAAA;MAC3B,gBAAcD,MAAW,YAAY,SAAS,KAAA;MAC9C,eAAe;OACb,EAAatB,EAAK,KAAK;MACzB;MAEC,UAAA4B;KACK,CAAA,IAER,kBAAC,QAAD;MACE,IAAIJ;MACJ,WAAWhC,EAAO;MAClB,eAAa8B;MACb,gBAAcC,KAAa,KAAA;MAC3B,gBAAcD,MAAW,YAAY,SAAS,KAAA;MAE7C,UAAAM;KACG,CAAA;IAEN,GA9BG5B,EAAK,KA8BR;GAER,CAAC;EACC,CAAA,CACD;;AAET,CAAC"}

package/dist/components/navigation/Stepper/Stepper.module.js

@@ -0,0 +1,19 @@
+//#region src/components/navigation/Stepper/Stepper.module.css
+var e = "kiln-Stepper__root", t = "kiln-Stepper__compact", n = "kiln-Stepper__list", r = "kiln-Stepper__item", i = "kiln-Stepper__control", a = "kiln-Stepper__text", o = "kiln-Stepper__connector", s = "kiln-Stepper__markerCol", c = "kiln-Stepper__marker", l = "kiln-Stepper__number", u = "kiln-Stepper__label", d = "kiln-Stepper__description", f = {
+	root: e,
+	compact: t,
+	list: n,
+	item: r,
+	control: i,
+	text: a,
+	connector: o,
+	markerCol: s,
+	marker: c,
+	number: l,
+	label: u,
+	description: d
+};
+//#endregion
+export { t as compact, o as connector, i as control, f as default, d as description, r as item, u as label, n as list, c as marker, s as markerCol, l as number, e as root, a as text };
+
+//# sourceMappingURL=Stepper.module.js.map

package/dist/components/navigation/Stepper/Stepper.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.module.js","names":["root","compact","list","item","control","text","connector","markerCol","marker","number","label","description","Stepper_module_default"],"sources":["../../../../src/components/navigation/Stepper/Stepper.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --stepper-marker-size    marker diameter, default 1.75rem\n *   --stepper-marker-radius  marker corner radius, default var(--radius-chip)\n *   --stepper-rail           connector line colour, default var(--color-line)\n *\n * --_count is written inline by the component (steps.length) — used to centre the\n * horizontal rail under the first and last markers without measuring the DOM.\n */\n.root {\n  min-inline-size: 0;\n}\n\n.compact {\n  display: none;\n  margin: 0;\n  color: var(--color-ink);\n  font-size: var(--text-sm);\n  font-weight: var(--label-weight);\n}\n.compact :is(b, strong) {\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n@media (max-width: 39.9375em) {\n  .root[data-compact-below='sm'] > .list {\n    display: none;\n  }\n  .root[data-compact-below='sm'] > .compact {\n    display: block;\n  }\n}\n@media (max-width: 47.9375em) {\n  .root[data-compact-below='md'] > .list {\n    display: none;\n  }\n  .root[data-compact-below='md'] > .compact {\n    display: block;\n  }\n}\n\n.list {\n  position: relative;\n  display: flex;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* ── Horizontal (default) ─────────────────────────────────────────────── */\n.list[data-orientation='horizontal'] {\n  align-items: flex-start;\n  gap: var(--space-2);\n}\n.list[data-orientation='horizontal']::before {\n  content: '';\n  position: absolute;\n  inset-inline: calc(50% / var(--_count));\n  inset-block-start: calc(var(--stepper-marker-size, 1.75rem) / 2);\n  block-size: var(--border-width);\n  background: var(--stepper-rail, var(--color-line));\n}\n.list[data-orientation='horizontal'] .item {\n  position: relative;\n  flex: 1 1 0;\n  min-inline-size: 0;\n}\n.list[data-orientation='horizontal'] .control {\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.list[data-orientation='horizontal'] .text {\n  align-items: center;\n}\n.list[data-orientation='horizontal'] .connector {\n  display: none;\n}\n\n/* ── Vertical ─────────────────────────────────────────────────────────── */\n.list[data-orientation='vertical'] {\n  flex-direction: column;\n  gap: 0;\n}\n.list[data-orientation='vertical'] .item {\n  flex: none;\n}\n.list[data-orientation='vertical'] .control {\n  flex-direction: row;\n  align-items: flex-start;\n  text-align: start;\n  padding-block-end: var(--space-3);\n}\n.list[data-orientation='vertical'] .item:last-child .control {\n  padding-block-end: 0;\n}\n.list[data-orientation='vertical'] .markerCol {\n  align-self: stretch;\n}\n.list[data-orientation='vertical'] .connector {\n  display: block;\n  flex: 1;\n  inline-size: var(--border-width);\n  min-block-size: var(--space-3);\n  margin-block: var(--space-1);\n  background: var(--stepper-rail, var(--color-line));\n}\n.list[data-orientation='vertical'] .connector[data-status='complete'] {\n  background: var(--color-accent);\n}\n\n/* ── Item / control ───────────────────────────────────────────────────── */\n.item {\n  min-inline-size: 0;\n}\n\n.control {\n  display: flex;\n  gap: var(--space-2);\n  border: 0;\n  background: none;\n  padding: 0;\n  color: inherit;\n  font: inherit;\n  cursor: default;\n}\nbutton.control {\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\nbutton.control:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n  border-radius: var(--radius-field);\n}\n\n.markerCol {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: none;\n}\n\n.marker {\n  display: grid;\n  place-items: center;\n  flex: none;\n  inline-size: var(--stepper-marker-size, 1.75rem);\n  block-size: var(--stepper-marker-size, 1.75rem);\n  border-radius: var(--stepper-marker-radius, var(--radius-chip));\n  border: var(--border-width) solid var(--color-line-strong);\n  background: var(--color-surface);\n  color: var(--color-ink-muted);\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out);\n}\n.marker svg {\n  inline-size: 62%;\n  block-size: 62%;\n}\n\n.number {\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: var(--text-sm);\n  line-height: 1;\n}\n\n.control[data-status='current'] .marker {\n  border-color: var(--color-accent);\n  background: var(--color-accent);\n  color: var(--color-accent-ink);\n}\n.control[data-status='complete'] .marker {\n  border-color: var(--color-line-strong);\n  background: var(--color-surface-sunken);\n  color: var(--color-ink);\n}\n.control[data-invalid] .marker {\n  border-color: var(--tone-critical);\n  background: var(--tone-critical-soft);\n  color: var(--tone-critical-text);\n}\n/* The current step with errors: filled like current, in the critical tone. */\n.control[data-status='current'][data-invalid] .marker {\n  background: var(--tone-critical);\n  color: var(--tone-critical-ink);\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-block-start: 1px;\n  min-inline-size: 0;\n}\n\n.label {\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  font-weight: var(--label-weight);\n}\n.control[data-status='current'] .label {\n  color: var(--color-ink);\n}\n.control[data-invalid] .label {\n  color: var(--tone-critical-text);\n}\n\n.description {\n  color: var(--color-ink-subtle);\n  font-size: var(--text-xs);\n}\n\n@media (hover: hover) {\n  button.control:hover .marker {\n    border-color: var(--color-ink-muted);\n  }\n  button.control[data-status='current']:hover .marker,\n  button.control[data-status='complete']:hover .marker,\n  button.control[data-invalid]:hover .marker {\n    border-color: currentColor;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .marker {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/navigation/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { Stepper } from './Stepper.js';
+export type { StepperProps, StepperStep, StepperStatus } from './Stepper.js';

package/dist/components/navigation/Tabs/Tabs.d.ts

@@ -0,0 +1,31 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { Tabs as TabsPrimitive } from 'radix-ui';
+export type TabsVariant = 'underline' | 'pill';
+export interface TabsProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+    /**
+     * `underline` (default): triggers sit on a hairline and the current one is marked
+     * with an accent bar — page-level sections. `pill`: compact, filled current tab —
+     * for switching views inside a card or panel.
+     */
+    variant?: TabsVariant;
+}
+export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
+export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;
+export type TabsContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
+/**
+ * Radix Tabs with the library's look. Arrow keys move between triggers (roving focus);
+ * activation follows focus by default (`activationMode="manual"` to require Enter).
+ *
+ * <Tabs defaultValue="tasks">
+ *   <Tabs.List aria-label="Atlas redesign">
+ *     <Tabs.Trigger value="tasks">Tasks</Tabs.Trigger>
+ *     <Tabs.Trigger value="people">People</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="tasks">…</Tabs.Content>
+ * </Tabs>
+ */
+export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>> & {
+    List: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/navigation/Tabs/Tabs.js

@@ -0,0 +1,47 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./Tabs.module.js";
+import { createContext as n, forwardRef as r, useContext as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { Tabs as o } from "radix-ui";
+//#region src/components/navigation/Tabs/Tabs.tsx
+var s = n("underline"), c = r(function({ variant: n = "underline", className: r, ...i }, c) {
+	return /* @__PURE__ */ a(s.Provider, {
+		value: n,
+		children: /* @__PURE__ */ a(o.Root, {
+			ref: c,
+			className: e(t.root, r),
+			"data-variant": n,
+			...i
+		})
+	});
+}), l = r(function({ className: n, ...r }, c) {
+	let l = i(s);
+	return /* @__PURE__ */ a(o.List, {
+		ref: c,
+		className: e(t.list, n),
+		"data-variant": l,
+		...r
+	});
+}), u = r(function({ className: n, ...r }, c) {
+	let l = i(s);
+	return /* @__PURE__ */ a(o.Trigger, {
+		ref: c,
+		className: e(t.trigger, n),
+		"data-variant": l,
+		...r
+	});
+}), d = r(function({ className: n, ...r }, i) {
+	return /* @__PURE__ */ a(o.Content, {
+		ref: i,
+		className: e(t.content, n),
+		...r
+	});
+}), f = Object.assign(c, {
+	List: l,
+	Trigger: u,
+	Content: d
+});
+//#endregion
+export { f as Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/dist/components/navigation/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":["Tabs","TabsPrimitive","styles","Tabs_module_default","VariantContext","createContext","TabsRoot","forwardRef","rest","variant","Tabs","cx","className","TabsList","useContext","TabsTrigger","TabsContent","Tabs$1"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, type ComponentPropsWithoutRef } from 'react'\nimport { Tabs as TabsPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport styles from './Tabs.module.css'\n\nexport type TabsVariant = 'underline' | 'pill'\n\nconst VariantContext = createContext<TabsVariant>('underline')\n\nexport interface TabsProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {\n  /**\n   * `underline` (default): triggers sit on a hairline and the current one is marked\n   * with an accent bar — page-level sections. `pill`: compact, filled current tab —\n   * for switching views inside a card or panel.\n   */\n  variant?: TabsVariant\n}\n\nconst TabsRoot = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { variant = 'underline', className, ...rest },\n  ref,\n) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-variant={variant}\n        {...rest}\n      />\n    </VariantContext.Provider>\n  )\n})\n\nexport type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n\n/** The row of triggers. Scrolls horizontally when it overflows (phones), never wraps. */\nconst TabsList = forwardRef<HTMLDivElement, TabsListProps>(function TabsList(\n  { className, ...rest },\n  ref,\n) {\n  const variant = useContext(VariantContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cx(styles.list, className)}\n      data-variant={variant}\n      {...rest}\n    />\n  )\n})\n\nexport type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n\nconst TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(function TabsTrigger(\n  { className, ...rest },\n  ref,\n) {\n  const variant = useContext(VariantContext)\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cx(styles.trigger, className)}\n      data-variant={variant}\n      {...rest}\n    />\n  )\n})\n\nexport type TabsContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n\nconst TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(function TabsContent(\n  { className, ...rest },\n  ref,\n) {\n  return <TabsPrimitive.Content ref={ref} className={cx(styles.content, className)} {...rest} />\n})\n\n/**\n * Radix Tabs with the library's look. Arrow keys move between triggers (roving focus);\n * activation follows focus by default (`activationMode=\"manual\"` to require Enter).\n *\n * <Tabs defaultValue=\"tasks\">\n *   <Tabs.List aria-label=\"Atlas redesign\">\n *     <Tabs.Trigger value=\"tasks\">Tasks</Tabs.Trigger>\n *     <Tabs.Trigger value=\"people\">People</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"tasks\">…</Tabs.Content>\n * </Tabs>\n */\nexport const Tabs = Object.assign(TabsRoot, {\n  List: TabsList,\n  Trigger: TabsTrigger,\n  Content: TabsContent,\n})\n"],"mappings":";;;;;;AAOA,IAAMI,IAAiBC,EAA2B,WAAW,GAWvDC,IAAWC,EAAsC,SACrD,EAAE,aAAU,aAAa,cAAW,GAAGC,KACvC,GACA;CACA,OACE,kBAACJ,EAAe,UAAhB;EAAyB,OAAOK;EAC9B,UAAA,kBAACR,EAAc,MAAf;GACO;GACL,WAAWU,EAAGT,EAAO,MAAMU,CAAS;GACpC,gBAAcH;GACd,GAAID;EACL,CAAA;CACsB,CAAA;AAE7B,CAAC,GAKKK,IAAWN,EAA0C,SACzD,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,IAAMC,IAAUK,EAAWV,CAAc;CACzC,OACE,kBAACH,EAAc,MAAf;EACO;EACL,WAAWU,EAAGT,EAAO,MAAMU,CAAS;EACpC,gBAAcH;EACd,GAAID;CACL,CAAA;AAEL,CAAC,GAIKO,IAAcR,EAAgD,SAClE,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,IAAMC,IAAUK,EAAWV,CAAc;CACzC,OACE,kBAACH,EAAc,SAAf;EACO;EACL,WAAWU,EAAGT,EAAO,SAASU,CAAS;EACvC,gBAAcH;EACd,GAAID;CACL,CAAA;AAEL,CAAC,GAIKQ,IAAcT,EAA6C,SAC/D,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAACP,EAAc,SAAf;EAA4B;EAAK,WAAWU,EAAGT,EAAO,SAASU,CAAS;EAAG,GAAIJ;CAAO,CAAA;AAC/F,CAAC,GAcYR,IAAO,OAAO,OAAOM,GAAU;CAC1C,MAAMO;CACN,SAASE;CACT,SAASC;AACX,CAAC"}

package/dist/components/navigation/Tabs/Tabs.module.js

@@ -0,0 +1,11 @@
+//#region src/components/navigation/Tabs/Tabs.module.css
+var e = "kiln-Tabs__root", t = "kiln-Tabs__list", n = "kiln-Tabs__trigger", r = "kiln-Tabs__content", i = {
+	root: e,
+	list: t,
+	trigger: n,
+	content: r
+};
+//#endregion
+export { r as content, i as default, t as list, e as root, n as trigger };
+
+//# sourceMappingURL=Tabs.module.js.map

package/dist/components/navigation/Tabs/Tabs.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.module.js","names":["root","list","trigger","content","Tabs_module_default"],"sources":["../../../../src/components/navigation/Tabs/Tabs.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --tabs-indicator       underline bar colour, default var(--color-accent)\n *   --tabs-indicator-size  default max(2px, var(--border-width-strong))\n *   --tabs-pill-bg         current pill fill, default var(--color-accent-soft)\n *   --tabs-pill-ink        current pill text, default var(--color-accent-text)\n *   --tabs-radius          pill radius, default var(--radius-action)\n *   --tabs-content-gap     space above a panel, default var(--space-5)\n */\n.root {\n  min-inline-size: 0;\n}\n\n.root[data-orientation='vertical'] {\n  display: flex;\n  gap: var(--space-5);\n}\n\n.list {\n  display: flex;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  overflow-x: auto;\n  overscroll-behavior-x: contain;\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n}\n.list::-webkit-scrollbar {\n  display: none;\n}\n\n.list[data-variant='underline'] {\n  gap: var(--space-5);\n  /* The hairline is an inset shadow so the current tab's bar can sit on top of it. */\n  box-shadow: inset 0 calc(-1 * var(--border-width)) 0 var(--color-line);\n}\n\n.list[data-variant='pill'] {\n  gap: var(--space-1);\n  padding: 2px;\n  margin: -2px;\n}\n\n.list[data-orientation='vertical'] {\n  flex-direction: column;\n  overflow: visible;\n}\n.list[data-variant='underline'][data-orientation='vertical'] {\n  gap: 0;\n  box-shadow: inset calc(-1 * var(--border-width)) 0 0 var(--color-line);\n}\n\n/* ── Triggers ───────────────────────────────────────────────────────────── */\n.trigger {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: 0.45em;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--color-ink-muted);\n  font-family: var(--font-text);\n  font-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: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    color var(--dur-1) var(--ease-out),\n    background-color var(--dur-1) var(--ease-out);\n}\n\n@media (hover: hover) {\n  .trigger:hover:not(:disabled) {\n    color: var(--color-ink);\n  }\n}\n\n.trigger[data-state='active'] {\n  color: var(--color-ink);\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n.trigger:focus-visible {\n  outline: 2px solid var(--color-focus);\n  /* Inset: the list scrolls, so an outer outline would be clipped. */\n  outline-offset: -2px;\n  border-radius: var(--radius-field);\n}\n\n/* Underline */\n.trigger[data-variant='underline'] {\n  min-block-size: var(--control-lg);\n  padding-inline: 0;\n}\n.trigger[data-variant='underline']::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  block-size: var(--tabs-indicator-size, max(2px, var(--border-width-strong)));\n  background: var(--tabs-indicator, var(--color-accent));\n  scale: 0 1;\n  transition: scale var(--dur-2) var(--ease-spring);\n}\n.trigger[data-variant='underline'][data-state='active']::after {\n  scale: 1 1;\n}\n.trigger[data-variant='underline'][data-orientation='vertical'] {\n  min-block-size: var(--control-md);\n  padding-inline-end: var(--space-5);\n}\n.trigger[data-variant='underline'][data-orientation='vertical']::after {\n  inset-inline: auto 0;\n  inset-block: 0;\n  block-size: auto;\n  inline-size: var(--tabs-indicator-size, max(2px, var(--border-width-strong)));\n  scale: 1 0;\n}\n.trigger[data-variant='underline'][data-orientation='vertical'][data-state='active']::after {\n  scale: 1 1;\n}\n\n/* Pill */\n.trigger[data-variant='pill'] {\n  min-block-size: var(--control-sm);\n  padding-inline: var(--space-3);\n  border-radius: var(--tabs-radius, var(--radius-action));\n}\n@media (hover: hover) {\n  .trigger[data-variant='pill']:hover:not(:disabled, [data-state='active']) {\n    background: var(--color-surface-sunken);\n  }\n}\n.trigger[data-variant='pill'][data-state='active'] {\n  background: var(--tabs-pill-bg, var(--color-accent-soft));\n  color: var(--tabs-pill-ink, var(--color-accent-text));\n}\n.trigger[data-variant='pill']:focus-visible {\n  outline-offset: 0;\n  border-radius: var(--tabs-radius, var(--radius-action));\n}\n\n/* ── Panels ─────────────────────────────────────────────────────────────── */\n.content {\n  padding-block-start: var(--tabs-content-gap, var(--space-5));\n  min-inline-size: 0;\n}\n.root[data-orientation='vertical'] > .content {\n  padding-block-start: 0;\n  flex: 1;\n}\n.content:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n  border-radius: var(--radius-field);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .trigger::after {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/navigation/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs.js';
+export type { TabsProps, TabsVariant, TabsListProps, TabsTriggerProps, TabsContentProps, } from './Tabs.js';

package/dist/components/overlays/Dialog/Dialog.d.ts

@@ -0,0 +1,49 @@
+import { type ComponentPropsWithoutRef, type HTMLAttributes, type ReactNode } from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+export type DialogSize = 'sm' | 'md' | 'lg';
+export type DialogProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
+/**
+ * Modal dialog root. Controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ * Focus is trapped while open, Escape and the scrim close it, and focus returns to the
+ * trigger on close.
+ *
+ * <Dialog>
+ *   <Dialog.Trigger asChild><Button>Delete</Button></Dialog.Trigger>
+ *   <Dialog.Content title="Delete invoice?" description="…">
+ *     <Dialog.Footer>…</Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog>
+ */
+declare function DialogRoot(props: DialogProps): import("react").JSX.Element;
+export type DialogTriggerProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
+export interface DialogContentProps extends Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'title'> {
+    /** Width step. `sm` for confirmations, `md` (default) for short forms, `lg` for reading. */
+    size?: DialogSize;
+    /**
+     * Heading, rendered as the accessible title. If you omit it, render a `<Dialog.Title>`
+     * yourself — every dialog needs a name.
+     */
+    title?: ReactNode;
+    /** Supporting sentence under the title, wired to `aria-describedby`. */
+    description?: ReactNode;
+    /** Hide the corner close button (keep a `Dialog.Close` in the footer instead). */
+    hideClose?: boolean;
+    /** Accessible name of the corner close button. Default "Close". */
+    closeLabel?: string;
+    /** Portal target. Defaults to `document.body`; its theme scope is also used. */
+    container?: HTMLElement | null;
+}
+export type DialogFooterProps = HTMLAttributes<HTMLDivElement>;
+export type DialogTitleProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
+export type DialogDescriptionProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
+export type DialogCloseProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
+export declare const Dialog: typeof DialogRoot & {
+    Root: typeof DialogRoot;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export {};

package/dist/components/overlays/Dialog/Dialog.js

@@ -0,0 +1,97 @@
+import { cx as e } from "../../../utils/cx.js";
+import { PortalAnchorContext as t, composeRefs as n, usePortalAnchor as r, usePortalAnchorRef as i, usePortalTheme as a } from "../usePortalTheme.js";
+import { OverlayClose as o } from "../OverlayClose.js";
+import s from "./Dialog.module.js";
+import { forwardRef as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Dialog as d } from "radix-ui";
+//#region src/components/overlays/Dialog/Dialog.tsx
+function f(e) {
+	let n = i();
+	return /* @__PURE__ */ l(t.Provider, {
+		value: n,
+		children: /* @__PURE__ */ l(d.Root, { ...e })
+	});
+}
+var p = c(function(e, t) {
+	let i = r();
+	return /* @__PURE__ */ l(d.Trigger, {
+		ref: n(t, i),
+		...e
+	});
+}), m = c(function({ container: e }, t) {
+	let n = a(e);
+	return /* @__PURE__ */ l(d.Overlay, {
+		ref: t,
+		className: s.overlay,
+		...n
+	});
+}), h = c(function({ size: t = "md", title: n, description: r, hideClose: i = !1, closeLabel: c, container: f, className: p, children: m, ...h }, g) {
+	let _ = a(f);
+	return /* @__PURE__ */ u(d.Content, {
+		ref: g,
+		className: e(s.content, p),
+		"data-size": t,
+		..._,
+		...h,
+		children: [
+			n !== void 0 || r !== void 0 ? /* @__PURE__ */ u("div", {
+				className: s.header,
+				"data-has-close": i ? void 0 : "",
+				children: [n === void 0 ? null : /* @__PURE__ */ l(d.Title, {
+					className: s.title,
+					children: n
+				}), r === void 0 ? null : /* @__PURE__ */ l(d.Description, {
+					className: s.description,
+					children: r
+				})]
+			}) : null,
+			m,
+			i ? null : /* @__PURE__ */ l(o, {
+				className: s.close,
+				label: c
+			})
+		]
+	});
+}), g = c(function({ container: e, forceMount: t, ...n }, r) {
+	return /* @__PURE__ */ u(d.Portal, {
+		container: e,
+		forceMount: t,
+		children: [/* @__PURE__ */ l(m, { container: e }), /* @__PURE__ */ l(h, {
+			ref: r,
+			container: e,
+			forceMount: t,
+			...n
+		})]
+	});
+}), _ = c(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ l("div", {
+		ref: r,
+		className: e(s.footer, t),
+		...n
+	});
+}), v = c(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ l(d.Title, {
+		ref: r,
+		className: e(s.title, t),
+		...n
+	});
+}), y = c(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ l(d.Description, {
+		ref: r,
+		className: e(s.description, t),
+		...n
+	});
+}), b = d.Close, x = Object.assign(f, {
+	Root: f,
+	Trigger: p,
+	Content: g,
+	Footer: _,
+	Title: v,
+	Description: y,
+	Close: b
+});
+//#endregion
+export { x as Dialog };
+
+//# sourceMappingURL=Dialog.js.map

package/dist/components/overlays/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["DialogPrimitive","styles","Dialog","Dialog_module_default","DialogRoot","anchor","usePortalAnchorRef","PortalAnchorContext","Dialog","props","DialogTrigger","forwardRef","usePortalAnchor","composeRefs","ref","Overlay","theme","usePortalTheme","container","ContentInner","rest","cx","className","size","title","description","hideClose","children","OverlayClose","closeLabel","DialogContent","DialogFooter","DialogTitle","DialogDescription","DialogClose","Dialog$1"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ComponentRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { Dialog as DialogPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport {\n  PortalAnchorContext,\n  composeRefs,\n  usePortalAnchor,\n  usePortalAnchorRef,\n  usePortalTheme,\n} from '#components/overlays/usePortalTheme'\nimport { OverlayClose } from '#components/overlays/OverlayClose'\nimport styles from './Dialog.module.css'\n\nexport type DialogSize = 'sm' | 'md' | 'lg'\n\nexport type DialogProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Root>\n\n/**\n * Modal dialog root. Controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).\n * Focus is trapped while open, Escape and the scrim close it, and focus returns to the\n * trigger on close.\n *\n * <Dialog>\n *   <Dialog.Trigger asChild><Button>Delete</Button></Dialog.Trigger>\n *   <Dialog.Content title=\"Delete invoice?\" description=\"…\">\n *     <Dialog.Footer>…</Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog>\n */\nfunction DialogRoot(props: DialogProps) {\n  const anchor = usePortalAnchorRef()\n  return (\n    <PortalAnchorContext.Provider value={anchor}>\n      <DialogPrimitive.Root {...props} />\n    </PortalAnchorContext.Provider>\n  )\n}\n\nexport type DialogTriggerProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>\n\n/** Opens the dialog. Use `asChild` to render your own button. Its theme scope themes the dialog. */\nconst DialogTrigger = forwardRef<ComponentRef<typeof DialogPrimitive.Trigger>, DialogTriggerProps>(\n  function DialogTrigger(props, ref) {\n    const anchor = usePortalAnchor()\n    return <DialogPrimitive.Trigger ref={composeRefs(ref, anchor)} {...props} />\n  },\n)\n\n/* Rendered inside the Portal so they mount on open and read the theme at that moment. */\nconst Overlay = forwardRef<HTMLDivElement, { container?: HTMLElement | null }>(function Overlay(\n  { container },\n  ref,\n) {\n  const theme = usePortalTheme(container)\n  return <DialogPrimitive.Overlay ref={ref} className={styles.overlay} {...theme} />\n})\n\nexport interface DialogContentProps extends Omit<\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n  'title'\n> {\n  /** Width step. `sm` for confirmations, `md` (default) for short forms, `lg` for reading. */\n  size?: DialogSize\n  /**\n   * Heading, rendered as the accessible title. If you omit it, render a `<Dialog.Title>`\n   * yourself — every dialog needs a name.\n   */\n  title?: ReactNode\n  /** Supporting sentence under the title, wired to `aria-describedby`. */\n  description?: ReactNode\n  /** Hide the corner close button (keep a `Dialog.Close` in the footer instead). */\n  hideClose?: boolean\n  /** Accessible name of the corner close button. Default \"Close\". */\n  closeLabel?: string\n  /** Portal target. Defaults to `document.body`; its theme scope is also used. */\n  container?: HTMLElement | null\n}\n\nconst ContentInner = forwardRef<HTMLDivElement, DialogContentProps>(function ContentInner(\n  {\n    size = 'md',\n    title,\n    description,\n    hideClose = false,\n    closeLabel,\n    container,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const theme = usePortalTheme(container)\n  return (\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cx(styles.content, className)}\n      data-size={size}\n      {...theme}\n      {...rest}\n    >\n      {title !== undefined || description !== undefined ? (\n        <div className={styles.header} data-has-close={hideClose ? undefined : ''}>\n          {title !== undefined ? (\n            <DialogPrimitive.Title className={styles.title}>{title}</DialogPrimitive.Title>\n          ) : null}\n          {description !== undefined ? (\n            <DialogPrimitive.Description className={styles.description}>\n              {description}\n            </DialogPrimitive.Description>\n          ) : null}\n        </div>\n      ) : null}\n      {children}\n      {hideClose ? null : <OverlayClose className={styles.close} label={closeLabel} />}\n    </DialogPrimitive.Content>\n  )\n})\n\n/**\n * The dialog panel, its scrim and the portal. Centred, scrolls internally when tall.\n */\nconst DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(function DialogContent(\n  { container, forceMount, ...rest },\n  ref,\n) {\n  return (\n    <DialogPrimitive.Portal container={container} forceMount={forceMount}>\n      <Overlay container={container} />\n      <ContentInner ref={ref} container={container} forceMount={forceMount} {...rest} />\n    </DialogPrimitive.Portal>\n  )\n})\n\nexport type DialogFooterProps = HTMLAttributes<HTMLDivElement>\n\n/** Actions row. Primary action last (rightmost); it wraps and stacks on narrow screens. */\nconst DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(function DialogFooter(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.footer, className)} {...rest} />\n})\n\nexport type DialogTitleProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n\n/** For custom headers when the `title` prop isn't enough. */\nconst DialogTitle = forwardRef<ComponentRef<typeof DialogPrimitive.Title>, DialogTitleProps>(\n  function DialogTitle({ className, ...rest }, ref) {\n    return <DialogPrimitive.Title ref={ref} className={cx(styles.title, className)} {...rest} />\n  },\n)\n\nexport type DialogDescriptionProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n\nconst DialogDescription = forwardRef<\n  ComponentRef<typeof DialogPrimitive.Description>,\n  DialogDescriptionProps\n>(function DialogDescription({ className, ...rest }, ref) {\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      className={cx(styles.description, className)}\n      {...rest}\n    />\n  )\n})\n\nexport type DialogCloseProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n\n/** Closes the dialog. Use `asChild` with a Button for \"Cancel\". */\nconst DialogClose = DialogPrimitive.Close\n\nexport const Dialog = Object.assign(DialogRoot, {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Content: DialogContent,\n  Footer: DialogFooter,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n})\n"],"mappings":";;;;;;;;AAmCA,SAASI,EAAW,GAAoB;CACtC,IAAMC,IAASC,EAAmB;CAClC,OACE,kBAACC,EAAoB,UAArB;EAA8B,OAAOF;EACnC,UAAA,kBAACL,EAAgB,MAAjB,EAAsB,GAAIS,EAAQ,CAAA;CACN,CAAA;AAElC;AAKA,IAAMC,IAAgBC,EACpB,SAAuB,GAAO,GAAK;CACjC,IAAMN,IAASO,EAAgB;CAC/B,OAAO,kBAACZ,EAAgB,SAAjB;EAAyB,KAAKa,EAAYC,GAAKT,CAAM;EAAG,GAAII;CAAQ,CAAA;AAC7E,CACF,GAGMM,IAAUJ,EAA+D,SAC7E,EAAE,gBACF,GACA;CACA,IAAMK,IAAQC,EAAeC,CAAS;CACtC,OAAO,kBAAClB,EAAgB,SAAjB;EAA8B;EAAK,WAAWC,EAAO;EAAS,GAAIe;CAAQ,CAAA;AACnF,CAAC,GAuBKG,IAAeR,EAA+C,SAClE,EACE,UAAO,MACP,UACA,gBACA,eAAY,IACZ,eACA,cACA,cACA,aACA,GAAGS,KAEL,GACA;CACA,IAAMJ,IAAQC,EAAeC,CAAS;CACtC,OACE,kBAAClB,EAAgB,SAAjB;EACO;EACL,WAAWqB,EAAGpB,EAAO,SAASqB,CAAS;EACvC,aAAWC;EACX,GAAIP;EACJ,GAAII;EALN,UAAA;GAOGI,MAAU,KAAA,KAAaC,MAAgB,KAAA,IACtC,kBAAC,OAAD;IAAK,WAAWxB,EAAO;IAAQ,kBAAgByB,IAAY,KAAA,IAAY;IAAvE,UAAA,CACGF,MAAU,KAAA,IAEP,OADF,kBAACxB,EAAgB,OAAjB;KAAuB,WAAWC,EAAO;KAAQ,UAAAuB;IAA6B,CAAA,GAE/EC,MAAgB,KAAA,IAIb,OAHF,kBAACzB,EAAgB,aAAjB;KAA6B,WAAWC,EAAO;KAC5C,UAAAwB;IAC0B,CAAA,CAE5B;GACH,CAAA,IAAA;GACHE;GACAD,IAAY,OAAO,kBAACE,GAAD;IAAc,WAAW3B,EAAO;IAAO,OAAO4B;GAAa,CAAA;EACxD;;AAE7B,CAAC,GAKKC,IAAgBnB,EAA+C,SACnE,EAAE,cAAW,eAAY,GAAGS,KAC5B,GACA;CACA,OACE,kBAACpB,EAAgB,QAAjB;EAAmC;EAAuB;EAA1D,UAAA,CACE,kBAACe,GAAD,EAAoB,aAAY,CAAA,GAChC,kBAACI,GAAD;GAAmB;GAAgB;GAAuB;GAAY,GAAIC;EAAO,CAAA,CAC3D;;AAE5B,CAAC,GAKKW,IAAepB,EAA8C,SACjE,EAAE,cAAW,GAAGS,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWC,EAAGpB,EAAO,QAAQqB,CAAS;EAAG,GAAIF;CAAO,CAAA;AAC5E,CAAC,GAKKY,IAAcrB,EAClB,SAAqB,EAAE,cAAW,GAAGS,KAAQ,GAAK;CAChD,OAAO,kBAACpB,EAAgB,OAAjB;EAA4B;EAAK,WAAWqB,EAAGpB,EAAO,OAAOqB,CAAS;EAAG,GAAIF;CAAO,CAAA;AAC7F,CACF,GAIMa,IAAoBtB,EAGxB,SAA2B,EAAE,cAAW,GAAGS,KAAQ,GAAK;CACxD,OACE,kBAACpB,EAAgB,aAAjB;EACO;EACL,WAAWqB,EAAGpB,EAAO,aAAaqB,CAAS;EAC3C,GAAIF;CACL,CAAA;AAEL,CAAC,GAKKc,IAAclC,EAAgB,OAEvBE,IAAS,OAAO,OAAOE,GAAY;CAC9C,MAAMA;CACN,SAASM;CACT,SAASoB;CACT,QAAQC;CACR,OAAOC;CACP,aAAaC;CACb,OAAOC;AACT,CAAC"}

package/dist/components/overlays/Dialog/Dialog.module.js

@@ -0,0 +1,17 @@
+//#region src/components/overlays/Dialog/Dialog.module.css
+var e = "kiln-Dialog__overlay", t = "kiln-Dialog__content", n = "kiln-Dialog__header", r = "kiln-Dialog__title", i = "kiln-Dialog__description", a = "kiln-Dialog__close", o = "kiln-Dialog__footer", s = {
+	overlay: e,
+	"fade-in": "kiln-Dialog__fade-in",
+	"fade-out": "kiln-Dialog__fade-out",
+	content: t,
+	"dialog-in": "kiln-Dialog__dialog-in",
+	header: n,
+	title: r,
+	description: i,
+	close: a,
+	footer: o
+};
+//#endregion
+export { a as close, t as content, s as default, i as description, o as footer, n as header, e as overlay, r as title };
+
+//# sourceMappingURL=Dialog.module.js.map

package/dist/components/overlays/Dialog/Dialog.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.module.js","names":["overlay","content","header","title","description","close","footer","Dialog_module_default"],"sources":["../../../../src/components/overlays/Dialog/Dialog.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --dialog-radius    default var(--radius-surface)\n *   --dialog-shadow    default var(--shadow-overlay)\n *   --dialog-border    default var(--color-line-strong)\n *   --dialog-surface   default var(--color-surface-raised)\n *\n * Motion: one keyframe for every theme. Monograph/Ledger's --ease-spring is their ease-out,\n * so the panel settles; Fiesta's overshoots, so it lands with a bump.\n */\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-overlay);\n  background: var(--color-scrim);\n}\n.overlay[data-state='open'] {\n  animation: fade-in var(--dur-2) var(--ease-out);\n}\n.overlay[data-state='closed'] {\n  animation: fade-out var(--dur-1) var(--ease-out);\n}\n\n.content {\n  --_pad: var(--space-5);\n  --_radius: var(--dialog-radius, var(--radius-surface));\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-overlay);\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  inline-size: min(\n    var(--_w),\n    calc(100% - 2 * var(--space-4))\n  ); /* % of the viewport (or a transformed container) */\n  block-size: fit-content;\n  max-block-size: calc(100% - 2 * var(--space-5));\n  margin: auto;\n  padding: var(--_pad);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  border: var(--border-width) solid var(--dialog-border, var(--color-line-strong));\n  border-radius: var(--_radius);\n  background: var(--dialog-surface, var(--color-surface-raised));\n  box-shadow: var(--dialog-shadow, var(--shadow-overlay));\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  font-size: var(--text-md);\n  line-height: var(--leading-body);\n  transform-origin: 50% 60%;\n}\n.content:focus {\n  outline: none;\n}\n\n.content[data-size='sm'] {\n  --_w: calc(var(--width-narrow) * 0.8125);\n}\n.content[data-size='md'] {\n  --_w: var(--width-narrow);\n}\n.content[data-size='lg'] {\n  --_w: var(--width-text);\n}\n\n.content[data-state='open'] {\n  animation: dialog-in var(--dur-3) var(--ease-spring);\n}\n.content[data-state='closed'] {\n  animation: fade-out var(--dur-1) var(--ease-out);\n}\n\n.header {\n  display: grid;\n  gap: var(--space-2);\n}\n/* Leave room for the absolutely placed close button. */\n.header[data-has-close] {\n  padding-inline-end: calc(var(--control-sm) + var(--space-2));\n}\n\n.title {\n  font-family: var(--heading-font);\n  font-weight: var(--heading-weight);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  font-size: var(--text-xl);\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n}\n\n.description {\n  font-size: var(--text-sm);\n  line-height: var(--leading-body);\n  color: var(--color-ink-muted);\n  max-inline-size: 60ch;\n}\n\n.close {\n  --_pad: var(--space-5);\n\n  position: absolute;\n  inset-block-start: calc(var(--_pad) - var(--space-1));\n  inset-inline-end: calc(var(--_pad) - var(--space-2));\n}\n\n.footer {\n  --_pad: var(--space-5); /* matches .content padding */\n\n  position: sticky;\n  inset-block-end: calc(-1 * var(--_pad));\n  display: flex;\n  flex-wrap: wrap-reverse;\n  justify-content: flex-end;\n  gap: var(--space-3);\n  margin-block-start: var(--space-1);\n  margin-inline: calc(-1 * var(--_pad));\n  margin-block-end: calc(-1 * var(--_pad));\n  padding: var(--space-4) var(--_pad) var(--_pad);\n  background: var(--dialog-surface, var(--color-surface-raised));\n}\n/* On a phone the actions stack full width, primary on top (wrap-reverse); side by side from sm. */\n.footer > * {\n  flex: 1 1 100%;\n}\n@media (min-width: 40em) {\n  .footer > * {\n    flex: 0 0 auto;\n  }\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    scale: 0.96;\n    translate: 0 var(--space-2);\n  }\n}\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n}\n@keyframes fade-out {\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .overlay[data-state],\n  .content[data-state] {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/components/overlays/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { Dialog } from './Dialog.js';
+export type { DialogProps, DialogSize, DialogTriggerProps, DialogContentProps, DialogFooterProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, } from './Dialog.js';

package/dist/components/overlays/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,62 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { DropdownMenu as MenuPrimitive } from 'radix-ui';
+export type DropdownMenuProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Root>;
+/**
+ * A list of commands behind a button: row actions, a member's options, sort order.
+ * Full keyboard support (arrows, typeahead, Home/End, Escape) from Radix.
+ *
+ * <DropdownMenu>
+ *   <DropdownMenu.Trigger asChild><Button>Options</Button></DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item shortcut="⌘E">Edit</DropdownMenu.Item>
+ *     <DropdownMenu.Separator />
+ *     <DropdownMenu.Item tone="critical">Remove</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu>
+ */
+declare function DropdownMenuRoot(props: DropdownMenuProps): import("react").JSX.Element;
+export type DropdownMenuTriggerProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Trigger>;
+export interface DropdownMenuContentProps extends ComponentPropsWithoutRef<typeof MenuPrimitive.Content> {
+    /** Portal target. Defaults to `document.body`; its theme scope is also used. */
+    container?: HTMLElement | null;
+}
+export type DropdownMenuItemTone = 'neutral' | 'critical';
+export interface DropdownMenuItemProps extends ComponentPropsWithoutRef<typeof MenuPrimitive.Item> {
+    /** `critical` for destructive commands. Put them last, after a separator. */
+    tone?: DropdownMenuItemTone;
+    /** Icon before the label. Use sparingly — one menu, icons on all items or none. */
+    leadingIcon?: ReactNode;
+    /** Keyboard shortcut hint, shown right-aligned. Display only; wire the shortcut yourself. */
+    shortcut?: ReactNode;
+}
+export interface DropdownMenuCheckboxItemProps extends ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem> {
+    shortcut?: ReactNode;
+}
+export type DropdownMenuRadioGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;
+export type DropdownMenuRadioItemProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;
+export type DropdownMenuLabelProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Label>;
+export type DropdownMenuSeparatorProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>;
+export type DropdownMenuGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;
+export type DropdownMenuSubProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Sub>;
+export interface DropdownMenuSubTriggerProps extends ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger> {
+    leadingIcon?: ReactNode;
+}
+export interface DropdownMenuSubContentProps extends ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent> {
+    container?: HTMLElement | null;
+}
+export declare const DropdownMenu: typeof DropdownMenuRoot & {
+    Root: typeof DropdownMenuRoot;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    CheckboxItem: import("react").ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioGroup: import("react").ForwardRefExoticComponent<MenuPrimitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<MenuPrimitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Sub: import("react").FC<MenuPrimitive.DropdownMenuSubProps>;
+    SubTrigger: import("react").ForwardRefExoticComponent<DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+    SubContent: import("react").ForwardRefExoticComponent<DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};