@mitcsutt/kiln-ui 0.1.0

package/dist/components/layout/Stack/Stack.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 { alignCss as r, space as i } from "../../../utils/tokens.js";
+import a from "./Stack.module.js";
+import { visibilityClass as o } from "../../../utils/visibility.js";
+import { forwardRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/layout/Stack/Stack.tsx
+var l = s(function({ gap: s, align: l, dividers: u = !1, as: d = "div", hideBelow: f, hideAbove: p, className: m, style: h, ...g }, _) {
+	return /* @__PURE__ */ c(d, {
+		ref: _,
+		className: e(a.stack, o({
+			hideBelow: f,
+			hideAbove: p
+		}), m),
+		"data-dividers": u || void 0,
+		role: d === "ul" || d === "ol" ? "list" : void 0,
+		style: t(n("stack-gap", s, i), n("stack-align", l, r), h),
+		...g
+	});
+});
+//#endregion
+export { l as Stack };
+
+//# sourceMappingURL=Stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","names":["styles","Stack_module_default","Stack","forwardRef","Comp","rest","cx","visibilityClass","className","dividers","mergeStyles","responsiveVars","gap","space","align","alignCss","style"],"sources":["../../../../src/components/layout/Stack/Stack.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { alignCss, space, type Align, type Space } from '#utils/tokens'\nimport styles from './Stack.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type StackElement =\n  | 'div'\n  | 'section'\n  | 'article'\n  | 'aside'\n  | 'header'\n  | 'footer'\n  | 'main'\n  | 'nav'\n  | 'ul'\n  | 'ol'\n  | 'li'\n  | 'form'\n  | 'fieldset'\n\nexport interface StackProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /** Space between children, as a step on the theme's space scale. Responsive. */\n  gap?: Responsive<Space>\n  /** Cross-axis alignment. Responsive. Default `stretch`. */\n  align?: Responsive<Align>\n  /** Draw a hairline rule between children (the rule sits in the middle of the gap). */\n  dividers?: boolean\n  /** Render as a different element. Lists get `role=\"list\"` semantics preserved. */\n  as?: StackElement\n}\n\n/**\n * Vertical flow. The most common layout: a column of things with consistent space.\n *\n * <Stack gap={{ base: 4, md: 6 }} dividers>…</Stack>\n */\nexport const Stack = forwardRef<HTMLElement, StackProps>(function Stack(\n  {\n    gap,\n    align,\n    dividers = false,\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.stack, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-dividers={dividers || undefined}\n      role={Comp === 'ul' || Comp === 'ol' ? 'list' : undefined}\n      style={mergeStyles(\n        responsiveVars('stack-gap', gap, space),\n        responsiveVars('stack-align', align, alignCss),\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AAsCA,IAAaE,IAAQC,EAAoC,SACvD,EACE,QACA,UACA,cAAW,IACX,IAAIC,IAAO,OACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,OAAOO,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAChF,iBAAeC,KAAY,KAAA;EAC3B,MAAML,MAAS,QAAQA,MAAS,OAAO,SAAS,KAAA;EAChD,OAAOM,EACLC,EAAe,aAAaC,GAAKC,CAAK,GACtCF,EAAe,eAAeG,GAAOC,CAAQ,GAC7CC,CACF;EACA,GAAIX;CACL,CAAA;AAEL,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.module.js","names":["stack","Stack_module_default"],"sources":["../../../../src/components/layout/Stack/Stack.module.css"],"sourcesContent":["/*\n * Responsive pattern (copy this): the component writes cascaded vars\n * --stack-gap-{base,sm,md,lg,xl} (see utils/responsive.ts). CSS resolves them into a\n * private --_gap per breakpoint and every rule reads --_gap. Because the JS cascades\n * values upward, each breakpoint only needs a fallback to the default.\n */\n.stack {\n  --_gap: var(--stack-gap-base, 0px);\n  --_align: var(--stack-align-base, stretch);\n\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  gap: var(--_gap);\n  align-items: var(--_align);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n@media (min-width: 40em) {\n  .stack {\n    --_gap: var(--stack-gap-sm, 0px);\n    --_align: var(--stack-align-sm, stretch);\n  }\n}\n@media (min-width: 48em) {\n  .stack {\n    --_gap: var(--stack-gap-md, 0px);\n    --_align: var(--stack-align-md, stretch);\n  }\n}\n@media (min-width: 64em) {\n  .stack {\n    --_gap: var(--stack-gap-lg, 0px);\n    --_align: var(--stack-align-lg, stretch);\n  }\n}\n@media (min-width: 80em) {\n  .stack {\n    --_gap: var(--stack-gap-xl, 0px);\n    --_align: var(--stack-align-xl, stretch);\n  }\n}\n\n/* Dividers: a rule centred in the gap, drawn on every child after the first. */\n.stack[data-dividers] > * + * {\n  position: relative;\n}\n.stack[data-dividers] > * + *::before {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-start: calc(var(--_gap) / -2 - var(--border-width) / 2);\n  border-block-start: var(--border-width) solid var(--color-line);\n  pointer-events: none;\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.stack[hidden] {\n  display: none;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Stack } from './Stack.js';
+export type { StackProps, StackElement } from './Stack.js';

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

@@ -0,0 +1,20 @@
+import { type HTMLAttributes } from 'react';
+export type VisuallyHiddenElement = 'span' | 'div' | 'a' | 'h1' | 'h2' | 'h3' | 'label';
+export interface VisuallyHiddenProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Reveal the content while it (or something inside it) has keyboard focus —
+     * for skip links and other keyboard-only affordances.
+     */
+    focusable?: boolean;
+    /** Default `span`. */
+    as?: VisuallyHiddenElement;
+    /** Only for `as="a"`. */
+    href?: string;
+}
+/**
+ * Content for screen readers only: a label for an icon-only control, a table caption,
+ * a heading that the visual layout already implies.
+ *
+ * <VisuallyHidden as="h2">Open invoices</VisuallyHidden>
+ */
+export declare const VisuallyHidden: import("react").ForwardRefExoticComponent<VisuallyHiddenProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/layout/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,17 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./VisuallyHidden.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/layout/VisuallyHidden/VisuallyHidden.tsx
+var i = n(function({ focusable: n = !1, as: i = "span", className: a, ...o }, s) {
+	return /* @__PURE__ */ r(i, {
+		ref: s,
+		className: e(t.hidden, a),
+		"data-focusable": n || void 0,
+		...o
+	});
+});
+//#endregion
+export { i as VisuallyHidden };
+
+//# sourceMappingURL=VisuallyHidden.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.js","names":["styles","VisuallyHidden_module_default","VisuallyHidden","forwardRef","Comp","rest","cx","className","focusable"],"sources":["../../../../src/components/layout/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './VisuallyHidden.module.css'\n\nexport type VisuallyHiddenElement = 'span' | 'div' | 'a' | 'h1' | 'h2' | 'h3' | 'label'\n\nexport interface VisuallyHiddenProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Reveal the content while it (or something inside it) has keyboard focus —\n   * for skip links and other keyboard-only affordances.\n   */\n  focusable?: boolean\n  /** Default `span`. */\n  as?: VisuallyHiddenElement\n  /** Only for `as=\"a\"`. */\n  href?: string\n}\n\n/**\n * Content for screen readers only: a label for an icon-only control, a table caption,\n * a heading that the visual layout already implies.\n *\n * <VisuallyHidden as=\"h2\">Open invoices</VisuallyHidden>\n */\nexport const VisuallyHidden = forwardRef<HTMLElement, VisuallyHiddenProps>(function VisuallyHidden(\n  { focusable = false, as: Comp = 'span', className, ...rest },\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.hidden, className)}\n      data-focusable={focusable || undefined}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;AAwBA,IAAaE,IAAiBC,EAA6C,SACzE,EAAE,eAAY,IAAO,IAAIC,IAAO,QAAQ,cAAW,GAAGC,KACtD,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,QAAQO,CAAS;EACtC,kBAAgBC,KAAa,KAAA;EAC7B,GAAIH;CACL,CAAA;AAEL,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.module.js","names":["hidden","VisuallyHidden_module_default"],"sources":["../../../../src/components/layout/VisuallyHidden/VisuallyHidden.module.css"],"sourcesContent":["/* The standard clip pattern: in the accessibility tree, out of the layout. */\n.hidden:not([data-focusable]),\n.hidden[data-focusable]:not(:focus, :focus-within) {\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"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { VisuallyHidden } from './VisuallyHidden.js';
+export type { VisuallyHiddenProps, VisuallyHiddenElement } from './VisuallyHidden.js';

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

@@ -0,0 +1,35 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+export type AccordionVariant = 'divided' | 'contained';
+export type AccordionSize = 'sm' | 'md';
+interface AccordionOwnProps {
+    /** `divided` (default): hairlines between items, no box. `contained`: a bordered surface. */
+    variant?: AccordionVariant;
+    /** `sm` for inline notes ("Why is this invoice overdue?"); `md` for FAQs and sections. */
+    size?: AccordionSize;
+}
+export type AccordionProps = (AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & AccordionOwnProps;
+export type AccordionItemProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+export interface AccordionTriggerProps extends ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+    /** Heading level wrapping the trigger, for the document outline. Default 3. */
+    level?: 2 | 3 | 4 | 5 | 6;
+}
+export type AccordionContentProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
+/**
+ * Radix Accordion: expandable sections with a rotating chevron and a height animation.
+ * Also the library's disclosure: use one `type="single"` item for an inline "why?" note.
+ * Single accordions are `collapsible` unless you pass `collapsible={false}`.
+ *
+ * <Accordion type="single">
+ *   <Accordion.Item value="scoring">
+ *     <Accordion.Trigger>How scoring works</Accordion.Trigger>
+ *     <Accordion.Content>…</Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion>
+ */
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/navigation/Accordion/Accordion.js

@@ -0,0 +1,68 @@
+import { cx as e } from "../../../utils/cx.js";
+import { ChevronDownIcon as t } from "../../../icons/icons.js";
+import { headingTag as n } from "../../../utils/heading.js";
+import r from "./Accordion.module.js";
+import { createContext as i, forwardRef as a, useContext as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Accordion as l } from "radix-ui";
+//#region src/components/navigation/Accordion/Accordion.tsx
+var u = i("md"), d = a(function({ variant: t = "divided", size: n = "md", className: i, ...a }, o) {
+	let c = a.type === "single" ? {
+		collapsible: !0,
+		...a
+	} : a;
+	return /* @__PURE__ */ s(u.Provider, {
+		value: n,
+		children: /* @__PURE__ */ s(l.Root, {
+			ref: o,
+			className: e(r.root, i),
+			"data-variant": t,
+			"data-size": n,
+			...c
+		})
+	});
+}), f = a(function({ className: t, ...n }, i) {
+	return /* @__PURE__ */ s(l.Item, {
+		ref: i,
+		className: e(r.item, t),
+		...n
+	});
+}), p = a(function({ level: i = 3, className: a, children: d, ...f }, p) {
+	let m = o(u), h = n(i);
+	return /* @__PURE__ */ s(l.Header, {
+		asChild: !0,
+		children: /* @__PURE__ */ s(h, {
+			className: r.header,
+			children: /* @__PURE__ */ c(l.Trigger, {
+				ref: p,
+				className: e(r.trigger, a),
+				"data-size": m,
+				...f,
+				children: [/* @__PURE__ */ s("span", {
+					className: r.triggerLabel,
+					children: d
+				}), /* @__PURE__ */ s(t, { className: r.chevron })]
+			})
+		})
+	});
+}), m = a(function({ className: t, children: n, ...i }, a) {
+	let c = o(u);
+	return /* @__PURE__ */ s(l.Content, {
+		ref: a,
+		className: e(r.content, t),
+		"data-size": c,
+		...i,
+		children: /* @__PURE__ */ s("div", {
+			className: r.contentInner,
+			children: n
+		})
+	});
+}), h = Object.assign(d, {
+	Item: f,
+	Trigger: p,
+	Content: m
+});
+//#endregion
+export { h as Accordion };
+
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":["Accordion","AccordionPrimitive","styles","Accordion_module_default","SizeContext","createContext","AccordionRoot","forwardRef","rest","props","size","Accordion","cx","className","variant","AccordionItem","AccordionTrigger","useContext","Heading","headingTag","level","ChevronDownIcon","AccordionContent","Accordion$1"],"sources":["../../../../src/components/navigation/Accordion/Accordion.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, type ComponentPropsWithoutRef } from 'react'\nimport { Accordion as AccordionPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { ChevronDownIcon } from '#icons'\nimport styles from './Accordion.module.css'\nimport { headingTag } from '#utils/heading'\n\nexport type AccordionVariant = 'divided' | 'contained'\nexport type AccordionSize = 'sm' | 'md'\n\ninterface AccordionOwnProps {\n  /** `divided` (default): hairlines between items, no box. `contained`: a bordered surface. */\n  variant?: AccordionVariant\n  /** `sm` for inline notes (\"Why is this invoice overdue?\"); `md` for FAQs and sections. */\n  size?: AccordionSize\n}\n\nexport type AccordionProps = (\n  AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps\n) &\n  AccordionOwnProps\n\nconst SizeContext = createContext<AccordionSize>('md')\n\nconst AccordionRoot = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  { variant = 'divided', size = 'md', className, ...rest },\n  ref,\n) {\n  const props = rest.type === 'single' ? { collapsible: true, ...rest } : rest // single items can close by default\n  return (\n    <SizeContext.Provider value={size}>\n      <AccordionPrimitive.Root\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n      />\n    </SizeContext.Provider>\n  )\n})\n\nexport type AccordionItemProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n\nconst AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(function AccordionItem(\n  { className, ...rest },\n  ref,\n) {\n  return <AccordionPrimitive.Item ref={ref} className={cx(styles.item, className)} {...rest} />\n})\n\nexport interface AccordionTriggerProps extends ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> {\n  /** Heading level wrapping the trigger, for the document outline. Default 3. */\n  level?: 2 | 3 | 4 | 5 | 6\n}\n\nconst AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(\n  function AccordionTrigger({ level = 3, className, children, ...rest }, ref) {\n    const size = useContext(SizeContext)\n    const Heading = headingTag(level)\n    return (\n      <AccordionPrimitive.Header asChild>\n        <Heading className={styles.header}>\n          <AccordionPrimitive.Trigger\n            ref={ref}\n            className={cx(styles.trigger, className)}\n            data-size={size}\n            {...rest}\n          >\n            <span className={styles.triggerLabel}>{children}</span>\n            <ChevronDownIcon className={styles.chevron} />\n          </AccordionPrimitive.Trigger>\n        </Heading>\n      </AccordionPrimitive.Header>\n    )\n  },\n)\n\nexport type AccordionContentProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n\nconst AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n  function AccordionContent({ className, children, ...rest }, ref) {\n    const size = useContext(SizeContext)\n    return (\n      <AccordionPrimitive.Content\n        ref={ref}\n        className={cx(styles.content, className)}\n        data-size={size}\n        {...rest}\n      >\n        <div className={styles.contentInner}>{children}</div>\n      </AccordionPrimitive.Content>\n    )\n  },\n)\n\n/**\n * Radix Accordion: expandable sections with a rotating chevron and a height animation.\n * Also the library's disclosure: use one `type=\"single\"` item for an inline \"why?\" note.\n * Single accordions are `collapsible` unless you pass `collapsible={false}`.\n *\n * <Accordion type=\"single\">\n *   <Accordion.Item value=\"scoring\">\n *     <Accordion.Trigger>How scoring works</Accordion.Trigger>\n *     <Accordion.Content>…</Accordion.Content>\n *   </Accordion.Item>\n * </Accordion>\n */\nexport const Accordion = Object.assign(AccordionRoot, {\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n  Content: AccordionContent,\n})\n"],"mappings":";;;;;;;;AAsBA,IAAMI,IAAcC,EAA6B,IAAI,GAE/CC,IAAgBC,EAA2C,SAC/D,EAAE,aAAU,WAAW,UAAO,MAAM,cAAW,GAAGC,KAClD,GACA;CACA,IAAMC,IAAQD,EAAK,SAAS,WAAW;EAAE,aAAa;EAAM,GAAGA;CAAK,IAAIA;CACxE,OACE,kBAACJ,EAAY,UAAb;EAAsB,OAAOM;EAC3B,UAAA,kBAACT,EAAmB,MAApB;GACO;GACL,WAAWW,EAAGV,EAAO,MAAMW,CAAS;GACpC,gBAAcC;GACd,aAAWJ;GACX,GAAID;EACL,CAAA;CACmB,CAAA;AAE1B,CAAC,GAIKM,IAAgBR,EAA+C,SACnE,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAACP,EAAmB,MAApB;EAA8B;EAAK,WAAWW,EAAGV,EAAO,MAAMW,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC9F,CAAC,GASKQ,IAAmBT,EACvB,SAA0B,EAAE,WAAQ,GAAG,cAAW,aAAU,GAAGC,KAAQ,GAAK;CAC1E,IAAME,IAAOO,EAAWb,CAAW,GAC7Bc,IAAUC,EAAWC,CAAK;CAChC,OACE,kBAACnB,EAAmB,QAApB;EAA2B,SAAA;EACzB,UAAA,kBAACiB,GAAD;GAAS,WAAWhB,EAAO;GACzB,UAAA,kBAACD,EAAmB,SAApB;IACO;IACL,WAAWW,EAAGV,EAAO,SAASW,CAAS;IACvC,aAAWH;IACX,GAAIF;IAJN,UAAA,CAME,kBAAC,QAAD;KAAM,WAAWN,EAAO;KAAe;IAAe,CAAA,GACtD,kBAACmB,GAAD,EAAiB,WAAWnB,EAAO,QAAU,CAAA,CACnB;;EACrB,CAAA;CACgB,CAAA;AAE/B,CACF,GAIMoB,IAAmBf,EACvB,SAA0B,EAAE,cAAW,aAAU,GAAGC,KAAQ,GAAK;CAC/D,IAAME,IAAOO,EAAWb,CAAW;CACnC,OACE,kBAACH,EAAmB,SAApB;EACO;EACL,WAAWW,EAAGV,EAAO,SAASW,CAAS;EACvC,aAAWH;EACX,GAAIF;EAEJ,UAAA,kBAAC,OAAD;GAAK,WAAWN,EAAO;GAAe;EAAc,CAAA;CAC1B,CAAA;AAEhC,CACF,GAcaF,IAAY,OAAO,OAAOM,GAAe;CACpD,MAAMS;CACN,SAASC;CACT,SAASM;AACX,CAAC"}

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

@@ -0,0 +1,17 @@
+//#region src/components/navigation/Accordion/Accordion.module.css
+var e = "kiln-Accordion__root", t = "kiln-Accordion__item", n = "kiln-Accordion__header", r = "kiln-Accordion__trigger", i = "kiln-Accordion__chevron", a = "kiln-Accordion__triggerLabel", o = "kiln-Accordion__content", s = "kiln-Accordion__open", c = "kiln-Accordion__close", l = "kiln-Accordion__contentInner", u = {
+	root: e,
+	item: t,
+	header: n,
+	trigger: r,
+	chevron: i,
+	triggerLabel: a,
+	content: o,
+	open: s,
+	close: c,
+	contentInner: l
+};
+//#endregion
+export { i as chevron, c as close, o as content, l as contentInner, u as default, n as header, t as item, s as open, e as root, r as trigger, a as triggerLabel };
+
+//# sourceMappingURL=Accordion.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.module.js","names":["root","item","header","trigger","chevron","triggerLabel","content","open","close","contentInner","Accordion_module_default"],"sources":["../../../../src/components/navigation/Accordion/Accordion.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --accordion-radius   contained variant, default var(--radius-surface)\n *   --accordion-bg       contained variant, default var(--color-surface)\n *   --accordion-shadow   contained variant, default var(--shadow-surface)\n */\n.root {\n  --_px: 0px;\n\n  min-inline-size: 0;\n}\n\n.root[data-variant='contained'] {\n  --_px: var(--space-4);\n\n  overflow: hidden;\n  border: var(--border-width) solid var(--color-line-strong);\n  border-radius: var(--accordion-radius, var(--radius-surface));\n  background: var(--accordion-bg, var(--color-surface));\n  box-shadow: var(--accordion-shadow, var(--shadow-surface));\n}\n\n.item + .item {\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n\n.header {\n  all: unset;\n  display: flex;\n}\n\n.trigger {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-block-size: max(2.75rem, var(--control-lg));\n  padding-block: var(--space-3);\n  padding-inline: var(--_px);\n  border: 0;\n  background: transparent;\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  font-size: var(--text-md);\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  text-align: start;\n  cursor: pointer;\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.trigger[data-size='sm'] {\n  /* Small = an inline note: the chevron follows the label instead of hugging the far edge. */\n  justify-content: flex-start;\n  gap: var(--space-2);\n  min-block-size: max(2.75rem, var(--control-sm));\n  padding-block: var(--space-2);\n  font-size: var(--text-sm);\n}\n\n@media (hover: hover) {\n  .trigger:hover:not(:disabled) .chevron {\n    color: var(--color-ink);\n  }\n  .root[data-variant='contained'] .trigger:hover:not(:disabled) {\n    background: var(--color-surface-sunken);\n  }\n}\n\n.trigger:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n  border-radius: var(--radius-field);\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n.triggerLabel {\n  min-inline-size: 0;\n}\n\n.chevron {\n  flex: none;\n  font-size: 1.25rem;\n  color: var(--color-ink-subtle);\n  transition:\n    rotate var(--dur-2) var(--ease-spring),\n    color var(--dur-1) var(--ease-out);\n}\n.trigger[data-size='sm'] .chevron {\n  font-size: 1rem;\n}\n.trigger[data-state='open'] .chevron {\n  rotate: 180deg;\n  color: var(--color-ink);\n}\n\n/* ── Content: height animates to Radix's measured value ─────────────────── */\n.content {\n  overflow: hidden;\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  line-height: var(--leading-body);\n}\n.content[data-state='open'] {\n  animation: open var(--dur-3) var(--ease-out);\n}\n.content[data-state='closed'] {\n  animation: close var(--dur-2) var(--ease-out);\n}\n.contentInner {\n  padding-block-end: var(--space-4);\n  padding-inline: var(--_px);\n  padding-inline-end: calc(var(--_px) + 1.25rem + var(--space-4));\n}\n.content[data-size='sm'] .contentInner {\n  padding-block-end: var(--space-3);\n  padding-inline-end: var(--_px);\n}\n\n@keyframes open {\n  from {\n    block-size: 0;\n  }\n  to {\n    block-size: var(--radix-accordion-content-height);\n  }\n}\n@keyframes close {\n  from {\n    block-size: var(--radix-accordion-content-height);\n  }\n  to {\n    block-size: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .content[data-state='open'],\n  .content[data-state='closed'] {\n    animation: none;\n  }\n  .chevron {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion.js';
+export type { AccordionProps, AccordionVariant, AccordionSize, AccordionItemProps, AccordionTriggerProps, AccordionContentProps, } from './Accordion.js';

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

@@ -0,0 +1,42 @@
+import { type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+export interface BottomNavProps extends HTMLAttributes<HTMLElement> {
+    /** Names the landmark. Default "Main". */
+    label?: string;
+    /**
+     * Hide at and above this breakpoint, where a top nav takes over. Default `md`.
+     * `false` keeps it at every width. Inside `AppShell.BottomBar`, use the shell's
+     * `navBreakpoint` (default `lg`) so the bar and the nav leave together, and give the
+     * desktop nav the matching `hideBelow`.
+     */
+    hideAbove?: 'md' | 'lg' | false;
+    /** `fixed` (default) pins it to the viewport bottom; `static` leaves it in flow. */
+    position?: 'fixed' | 'static';
+}
+export interface BottomNavItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
+    icon: ReactNode;
+    /** Always visible — icon-only tab bars are guesswork. Keep it to one short word. */
+    label: string;
+    active?: boolean;
+    /**
+     * `true` for an unread dot; a number for a count (shown as 99+ above 99). The count is
+     * announced after the label.
+     */
+    badge?: boolean | number;
+    /** Render the single child (e.g. a router `<Link>`) as the item. */
+    asChild?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Mobile tab bar: 3–5 destinations, icon over label, pinned to the bottom with the
+ * safe-area inset. Hidden from `md` up by default, where `NavLinks` takes over.
+ * Pair the breakpoints: `<BottomNav hideAbove="md">` with `<NavLinks hideBelow="md">`.
+ *
+ * <BottomNav>
+ *   <BottomNav.Item asChild icon={<TableIcon />} label="Projects" active>
+ *     <Link to="/projects" />
+ *   </BottomNav.Item>
+ * </BottomNav>
+ */
+export declare const BottomNav: import("react").ForwardRefExoticComponent<BottomNavProps & import("react").RefAttributes<HTMLElement>> & {
+    Item: import("react").ForwardRefExoticComponent<BottomNavItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+};

package/dist/components/navigation/BottomNav/BottomNav.js

@@ -0,0 +1,67 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./BottomNav.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Slot as a } from "radix-ui";
+//#region src/components/navigation/BottomNav/BottomNav.tsx
+var o = n(function({ label: n = "Main", hideAbove: i = "md", position: a = "fixed", className: o, children: s, ...c }, l) {
+	return /* @__PURE__ */ r("nav", {
+		ref: l,
+		"aria-label": n,
+		className: e(t.nav, o),
+		"data-hide-above": i || void 0,
+		"data-position": a,
+		...c,
+		children: /* @__PURE__ */ r("ul", {
+			className: t.list,
+			role: "list",
+			children: s
+		})
+	});
+}), s = n(function({ icon: n, label: o, active: s = !1, badge: c, asChild: l = !1, className: u, children: d, ...f }, p) {
+	let m = l ? a.Root : "a", h = typeof c == "number" && c > 0 ? c : void 0;
+	return /* @__PURE__ */ r("li", {
+		className: t.item,
+		children: /* @__PURE__ */ i(m, {
+			ref: p,
+			className: e(t.link, u),
+			"data-active": s || void 0,
+			"aria-current": s ? "page" : void 0,
+			...f,
+			children: [
+				/* @__PURE__ */ i("span", {
+					className: t.iconWrap,
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ r("span", {
+						className: t.icon,
+						children: n
+					}), h === void 0 ? c === !0 ? /* @__PURE__ */ r("span", {
+						className: t.badge,
+						"data-kind": "dot"
+					}) : null : /* @__PURE__ */ r("span", {
+						className: t.badge,
+						"data-kind": "count",
+						children: h > 99 ? "99+" : h
+					})]
+				}),
+				/* @__PURE__ */ r("span", {
+					className: t.label,
+					children: o
+				}),
+				h === void 0 ? null : /* @__PURE__ */ r("span", {
+					className: t.srOnly,
+					children: `, ${String(h)} new`
+				}),
+				c === !0 ? /* @__PURE__ */ r("span", {
+					className: t.srOnly,
+					children: ", new"
+				}) : null,
+				/* @__PURE__ */ r(a.Slottable, { children: d })
+			]
+		})
+	});
+}), c = Object.assign(o, { Item: s });
+//#endregion
+export { c as BottomNav };
+
+//# sourceMappingURL=BottomNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNav.js","names":["styles","BottomNav_module_default","BottomNavRoot","forwardRef","rest","label","cx","className","hideAbove","position","BottomNavItem","Comp","asChild","Slot","count","badge","active","icon","BottomNav"],"sources":["../../../../src/components/navigation/BottomNav/BottomNav.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport styles from './BottomNav.module.css'\n\nexport interface BottomNavProps extends HTMLAttributes<HTMLElement> {\n  /** Names the landmark. Default \"Main\". */\n  label?: string\n  /**\n   * Hide at and above this breakpoint, where a top nav takes over. Default `md`.\n   * `false` keeps it at every width. Inside `AppShell.BottomBar`, use the shell's\n   * `navBreakpoint` (default `lg`) so the bar and the nav leave together, and give the\n   * desktop nav the matching `hideBelow`.\n   */\n  hideAbove?: 'md' | 'lg' | false\n  /** `fixed` (default) pins it to the viewport bottom; `static` leaves it in flow. */\n  position?: 'fixed' | 'static'\n}\n\nconst BottomNavRoot = forwardRef<HTMLElement, BottomNavProps>(function BottomNav(\n  { label = 'Main', hideAbove = 'md', position = 'fixed', className, children, ...rest },\n  ref,\n) {\n  return (\n    <nav\n      ref={ref}\n      aria-label={label}\n      className={cx(styles.nav, className)}\n      data-hide-above={hideAbove || undefined}\n      data-position={position}\n      {...rest}\n    >\n      <ul className={styles.list} role=\"list\">\n        {children}\n      </ul>\n    </nav>\n  )\n})\n\nexport interface BottomNavItemProps extends Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  'children'\n> {\n  icon: ReactNode\n  /** Always visible — icon-only tab bars are guesswork. Keep it to one short word. */\n  label: string\n  active?: boolean\n  /**\n   * `true` for an unread dot; a number for a count (shown as 99+ above 99). The count is\n   * announced after the label.\n   */\n  badge?: boolean | number\n  /** Render the single child (e.g. a router `<Link>`) as the item. */\n  asChild?: boolean\n  children?: ReactNode\n}\n\nconst BottomNavItem = forwardRef<HTMLAnchorElement, BottomNavItemProps>(function BottomNavItem(\n  { icon, label, active = false, badge, asChild = false, className, children, ...rest },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'a'\n  const count = typeof badge === 'number' && badge > 0 ? badge : undefined\n  return (\n    <li className={styles.item}>\n      <Comp\n        ref={ref}\n        className={cx(styles.link, className)}\n        data-active={active || undefined}\n        aria-current={active ? 'page' : undefined}\n        {...rest}\n      >\n        <span className={styles.iconWrap} aria-hidden=\"true\">\n          <span className={styles.icon}>{icon}</span>\n          {count !== undefined ? (\n            <span className={styles.badge} data-kind=\"count\">\n              {count > 99 ? '99+' : count}\n            </span>\n          ) : badge === true ? (\n            <span className={styles.badge} data-kind=\"dot\" />\n          ) : null}\n        </span>\n        <span className={styles.label}>{label}</span>\n        {count !== undefined ? (\n          <span className={styles.srOnly}>{`, ${String(count)} new`}</span>\n        ) : null}\n        {badge === true ? <span className={styles.srOnly}>, new</span> : null}\n        <Slot.Slottable>{children}</Slot.Slottable>\n      </Comp>\n    </li>\n  )\n})\n\n/**\n * Mobile tab bar: 3–5 destinations, icon over label, pinned to the bottom with the\n * safe-area inset. Hidden from `md` up by default, where `NavLinks` takes over.\n * Pair the breakpoints: `<BottomNav hideAbove=\"md\">` with `<NavLinks hideBelow=\"md\">`.\n *\n * <BottomNav>\n *   <BottomNav.Item asChild icon={<TableIcon />} label=\"Projects\" active>\n *     <Link to=\"/projects\" />\n *   </BottomNav.Item>\n * </BottomNav>\n */\nexport const BottomNav = Object.assign(BottomNavRoot, { Item: BottomNavItem })\n"],"mappings":";;;;;;AAmBA,IAAME,IAAgBC,EAAwC,SAC5D,EAAE,WAAQ,QAAQ,eAAY,MAAM,cAAW,SAAS,cAAW,aAAU,GAAGC,KAChF,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,cAAYC;EACZ,WAAWC,EAAGN,EAAO,KAAKO,CAAS;EACnC,mBAAiBC,KAAa,KAAA;EAC9B,iBAAeC;EACf,GAAIL;EAEJ,UAAA,kBAAC,MAAD;GAAI,WAAWJ,EAAO;GAAM,MAAK;GAC9B;EACC,CAAA;CACD,CAAA;AAET,CAAC,GAoBKU,IAAgBP,EAAkD,SACtE,EAAE,SAAM,UAAO,YAAS,IAAO,UAAO,aAAU,IAAO,cAAW,aAAU,GAAGC,KAC/E,GACA;CACA,IAAMO,IAAOC,IAAUC,EAAK,OAAO,KAC7BC,IAAQ,OAAOC,KAAU,YAAYA,IAAQ,IAAIA,IAAQ,KAAA;CAC/D,OACE,kBAAC,MAAD;EAAI,WAAWf,EAAO;EACpB,UAAA,kBAACW,GAAD;GACO;GACL,WAAWL,EAAGN,EAAO,MAAMO,CAAS;GACpC,eAAaS,KAAU,KAAA;GACvB,gBAAcA,IAAS,SAAS,KAAA;GAChC,GAAIZ;GALN,UAAA;IAOE,kBAAC,QAAD;KAAM,WAAWJ,EAAO;KAAU,eAAY;KAA9C,UAAA,CACE,kBAAC,QAAD;MAAM,WAAWA,EAAO;MAAO,UAAAiB;KAAW,CAAA,GACzCH,MAAU,KAAA,IAIPC,MAAU,KACZ,kBAAC,QAAD;MAAM,WAAWf,EAAO;MAAO,aAAU;KAAO,CAAA,IAC9C,OALF,kBAAC,QAAD;MAAM,WAAWA,EAAO;MAAO,aAAU;MACtC,UAAAc,IAAQ,KAAK,QAAQA;KAClB,CAAA,CAIJ;;IACN,kBAAC,QAAD;KAAM,WAAWd,EAAO;KAAQ,UAAAK;IAAY,CAAA;IAC3CS,MAAU,KAAA,IAEP,OADF,kBAAC,QAAD;KAAM,WAAWd,EAAO;KAAS,UAAA,KAAK,OAAOc,CAAK,EAAE;IAAY,CAAA;IAEjEC,MAAU,KAAO,kBAAC,QAAD;KAAM,WAAWf,EAAO;KAAQ,UAAA;IAAW,CAAA,IAAI;IACjE,kBAACa,EAAK,WAAN,EAAiB,YAAyB,CAAA;GACtC;;CACJ,CAAA;AAER,CAAC,GAaYK,IAAY,OAAO,OAAOhB,GAAe,EAAE,MAAMQ,EAAc,CAAC"}

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

@@ -0,0 +1,16 @@
+//#region src/components/navigation/BottomNav/BottomNav.module.css
+var e = "kiln-BottomNav__nav", t = "kiln-BottomNav__list", n = "kiln-BottomNav__item", r = "kiln-BottomNav__link", i = "kiln-BottomNav__iconWrap", a = "kiln-BottomNav__icon", o = "kiln-BottomNav__label", s = "kiln-BottomNav__badge", c = "kiln-BottomNav__srOnly", l = {
+	nav: e,
+	list: t,
+	item: n,
+	link: r,
+	iconWrap: i,
+	icon: a,
+	label: o,
+	badge: s,
+	srOnly: c
+};
+//#endregion
+export { s as badge, l as default, a as icon, i as iconWrap, n as item, o as label, r as link, t as list, e as nav, c as srOnly };
+
+//# sourceMappingURL=BottomNav.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNav.module.js","names":["nav","list","item","link","iconWrap","icon","label","badge","srOnly","BottomNav_module_default"],"sources":["../../../../src/components/navigation/BottomNav/BottomNav.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --bottom-nav-bg       default var(--color-surface)\n *   --bottom-nav-marker   current-item bar + ink, default var(--color-accent) / var(--color-accent-text)\n */\n.nav {\n  inset-inline: 0;\n  inset-block-end: 0;\n  z-index: var(--z-sticky);\n  padding-block-end: env(safe-area-inset-bottom, 0px);\n  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);\n  border-block-start: var(--border-width) solid var(--color-line-strong);\n  background: var(--bottom-nav-bg, var(--color-surface));\n}\n.nav[data-position='fixed'] {\n  position: fixed;\n}\n.nav[data-position='static'] {\n  position: relative;\n}\n\n@media (min-width: 48em) {\n  .nav[data-hide-above='md'] {\n    display: none;\n  }\n}\n@media (min-width: 64em) {\n  .nav[data-hide-above='lg'] {\n    display: none;\n  }\n}\n\n.list {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 1fr;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.item {\n  display: flex;\n  min-inline-size: 0;\n}\n\n.link {\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-1);\n  /* Touch target: never under 44px, whatever the theme's density. */\n  min-block-size: max(2.75rem, calc(var(--control-lg) + var(--space-2)));\n  padding: var(--space-2) var(--space-1);\n  color: var(--color-ink-muted);\n  font-family: var(--font-text);\n  /* Legible floor: the theme's xs step can fall under 11px at compact densities. */\n  font-size: max(var(--text-xs), 0.75rem);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: 1.1;\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n  transition: color var(--dur-1) var(--ease-out);\n}\n\n/* Current: a bar across the top edge, sitting on the nav's rule, and accent ink. */\n.link::before {\n  content: '';\n  position: absolute;\n  inset-block-start: calc(-1 * var(--border-width));\n  inset-inline: 28%;\n  block-size: max(2px, var(--border-width-strong));\n  border-end-start-radius: 2px;\n  border-end-end-radius: 2px;\n  background: var(--bottom-nav-marker, var(--color-accent));\n  scale: 0 1;\n  transition: scale var(--dur-2) var(--ease-spring);\n}\n.link[data-active] {\n  color: var(--bottom-nav-marker, var(--color-accent-text));\n}\n.link[data-active]::before {\n  scale: 1 1;\n}\n\n@media (hover: hover) {\n  .link:hover:not([data-active]) {\n    color: var(--color-ink);\n  }\n}\n\n.link:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n  border-radius: var(--radius-field);\n}\n\n.iconWrap {\n  position: relative;\n  display: inline-flex;\n}\n\n.icon {\n  display: inline-flex;\n  font-size: 1.5rem;\n}\n\n.label {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.badge {\n  position: absolute;\n  inset-block-start: -0.25rem;\n  inset-inline-start: calc(100% - 0.5rem);\n  display: inline-grid;\n  place-items: center;\n  border: 2px solid var(--bottom-nav-bg, var(--color-surface));\n  background: var(--color-accent);\n  color: var(--color-accent-ink);\n}\n.badge[data-kind='count'] {\n  min-inline-size: 1.25rem;\n  block-size: 1.25rem;\n  padding-inline: 0.25rem;\n  border-radius: var(--radius-chip);\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-2xs);\n  font-weight: var(--label-weight);\n  letter-spacing: 0;\n  text-transform: none;\n  line-height: 1;\n}\n.badge[data-kind='dot'] {\n  inline-size: 0.75rem;\n  block-size: 0.75rem;\n  inset-inline-start: calc(100% - 0.4rem);\n  border-radius: 50%;\n}\n\n.srOnly {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .link::before {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { BottomNav } from './BottomNav.js';
+export type { BottomNavProps, BottomNavItemProps } from './BottomNav.js';

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

@@ -0,0 +1,32 @@
+import { type AnchorHTMLAttributes, type HTMLAttributes } from 'react';
+import { type Space } from '../../../utils/tokens.js';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type NavLinksOrientation = 'horizontal' | 'vertical';
+export type NavLinksSize = 'sm' | 'md';
+export interface NavLinksProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
+    /** Names the landmark. Required when a page has more than one nav. Default "Main". */
+    label?: string;
+    /** `horizontal` (default) for headers; `vertical` for sidebars and footers. */
+    orientation?: NavLinksOrientation;
+    /**
+     * Space between links, as a step on the space scale. Default `5` horizontal, `0`
+     * vertical (vertical items are already a full control tall).
+     */
+    gap?: Space;
+    /** `md` (default) for page headers; `sm` for dense toolbars, footers and sub-navs. */
+    size?: NavLinksSize;
+}
+export interface NavLinksItemProps extends AnchorHTMLAttributes<HTMLAnchorElement>, VisibilityProps {
+    /** The current page. Sets `aria-current="page"` and draws the marker. */
+    active?: boolean;
+    /** Render the single child (e.g. a router `<Link>`) instead of an `<a>`. */
+    asChild?: boolean;
+}
+/**
+ * Site / app navigation: a labelled `<nav>` with a list of links. The current page is
+ * marked with a short accent bar under the label (horizontal) or an accent dot beside
+ * it (vertical) — a mark, not a glowing pill.
+ */
+export declare const NavLinks: import("react").ForwardRefExoticComponent<NavLinksProps & import("react").RefAttributes<HTMLElement>> & {
+    Item: import("react").ForwardRefExoticComponent<NavLinksItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+};

package/dist/components/navigation/NavLinks/NavLinks.js

@@ -0,0 +1,57 @@
+import { cx as e } from "../../../utils/cx.js";
+import { space as t } from "../../../utils/tokens.js";
+import { visibilityClass as n } from "../../../utils/visibility.js";
+import r from "./NavLinks.module.js";
+import { createContext as i, forwardRef as a, useContext as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { Slot as c } from "radix-ui";
+//#region src/components/navigation/NavLinks/NavLinks.tsx
+var l = i({
+	orientation: "horizontal",
+	size: "md"
+}), u = a(function({ label: i = "Main", orientation: a = "horizontal", gap: o, size: c = "md", hideBelow: u, hideAbove: d, className: f, children: p, ...m }, h) {
+	return /* @__PURE__ */ s(l.Provider, {
+		value: {
+			orientation: a,
+			size: c
+		},
+		children: /* @__PURE__ */ s("nav", {
+			ref: h,
+			"aria-label": i,
+			className: e(r.nav, n({
+				hideBelow: u,
+				hideAbove: d
+			}), f),
+			"data-orientation": a,
+			"data-size": c,
+			...m,
+			children: /* @__PURE__ */ s("ul", {
+				className: r.list,
+				role: "list",
+				style: o === void 0 ? void 0 : { "--_gap": t(o) },
+				children: p
+			})
+		})
+	});
+}), d = a(function({ active: t = !1, asChild: i = !1, hideBelow: a, hideAbove: u, className: d, ...f }, p) {
+	let { orientation: m, size: h } = o(l), g = i ? c.Root : "a";
+	return /* @__PURE__ */ s("li", {
+		className: e(r.item, n({
+			hideBelow: a,
+			hideAbove: u
+		})),
+		children: /* @__PURE__ */ s(g, {
+			ref: p,
+			className: e(r.link, d),
+			"data-orientation": m,
+			"data-size": h,
+			"data-active": t || void 0,
+			"aria-current": t ? "page" : void 0,
+			...f
+		})
+	});
+}), f = Object.assign(u, { Item: d });
+//#endregion
+export { f as NavLinks };
+
+//# sourceMappingURL=NavLinks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavLinks.js","names":["styles","NavLinks_module_default","NavLinksContext","createContext","NavLinksRoot","forwardRef","rest","label","cx","visibilityClass","className","orientation","size","gap","space","NavLinksItem","useContext","Comp","asChild","Slot","active","NavLinks"],"sources":["../../../../src/components/navigation/NavLinks/NavLinks.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  type AnchorHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n} from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { space, type Space } from '#utils/tokens'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\nimport styles from './NavLinks.module.css'\n\nexport type NavLinksOrientation = 'horizontal' | 'vertical'\nexport type NavLinksSize = 'sm' | 'md'\n\nexport interface NavLinksProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /** Names the landmark. Required when a page has more than one nav. Default \"Main\". */\n  label?: string\n  /** `horizontal` (default) for headers; `vertical` for sidebars and footers. */\n  orientation?: NavLinksOrientation\n  /**\n   * Space between links, as a step on the space scale. Default `5` horizontal, `0`\n   * vertical (vertical items are already a full control tall).\n   */\n  gap?: Space\n  /** `md` (default) for page headers; `sm` for dense toolbars, footers and sub-navs. */\n  size?: NavLinksSize\n}\n\ninterface NavLinksContextValue {\n  orientation: NavLinksOrientation\n  size: NavLinksSize\n}\n\nconst NavLinksContext = createContext<NavLinksContextValue>({\n  orientation: 'horizontal',\n  size: 'md',\n})\n\nconst NavLinksRoot = forwardRef<HTMLElement, NavLinksProps>(function NavLinks(\n  {\n    label = 'Main',\n    orientation = 'horizontal',\n    gap,\n    size = 'md',\n    hideBelow,\n    hideAbove,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <NavLinksContext.Provider value={{ orientation, size }}>\n      <nav\n        ref={ref}\n        aria-label={label}\n        className={cx(styles.nav, visibilityClass({ hideBelow, hideAbove }), className)}\n        data-orientation={orientation}\n        data-size={size}\n        {...rest}\n      >\n        <ul\n          className={styles.list}\n          role=\"list\"\n          style={gap === undefined ? undefined : ({ '--_gap': space(gap) } as CSSProperties)}\n        >\n          {children}\n        </ul>\n      </nav>\n    </NavLinksContext.Provider>\n  )\n})\n\nexport interface NavLinksItemProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>, VisibilityProps {\n  /** The current page. Sets `aria-current=\"page\"` and draws the marker. */\n  active?: boolean\n  /** Render the single child (e.g. a router `<Link>`) instead of an `<a>`. */\n  asChild?: boolean\n}\n\n/**\n * One link. For router links: `<NavLinks.Item asChild active={isActive}><Link to=\"/work\">Work</Link></NavLinks.Item>`.\n * `hideBelow`/`hideAbove` hide the whole list item (e.g. a secondary link on phones).\n */\nconst NavLinksItem = forwardRef<HTMLAnchorElement, NavLinksItemProps>(function NavLinksItem(\n  { active = false, asChild = false, hideBelow, hideAbove, className, ...rest },\n  ref,\n) {\n  const { orientation, size } = useContext(NavLinksContext)\n  const Comp = asChild ? Slot.Root : 'a'\n  return (\n    <li className={cx(styles.item, visibilityClass({ hideBelow, hideAbove }))}>\n      <Comp\n        ref={ref}\n        className={cx(styles.link, className)}\n        data-orientation={orientation}\n        data-size={size}\n        data-active={active || undefined}\n        aria-current={active ? 'page' : undefined}\n        {...rest}\n      />\n    </li>\n  )\n})\n\n/**\n * Site / app navigation: a labelled `<nav>` with a list of links. The current page is\n * marked with a short accent bar under the label (horizontal) or an accent dot beside\n * it (vertical) — a mark, not a glowing pill.\n */\nexport const NavLinks = Object.assign(NavLinksRoot, { Item: NavLinksItem })\n"],"mappings":";;;;;;;;AAoCA,IAAME,IAAkBC,EAAoC;CAC1D,aAAa;CACb,MAAM;AACR,CAAC,GAEKC,IAAeC,EAAuC,SAC1D,EACE,WAAQ,QACR,iBAAc,cACd,QACA,UAAO,MACP,cACA,cACA,cACA,aACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACJ,EAAgB,UAAjB;EAA0B,OAAO;GAAE;GAAa;EAAK;EACnD,UAAA,kBAAC,OAAD;GACO;GACL,cAAYK;GACZ,WAAWC,EAAGR,EAAO,KAAKS,EAAgB;IAAE;IAAW;GAAU,CAAC,GAAGC,CAAS;GAC9E,oBAAkBC;GAClB,aAAWC;GACX,GAAIN;GAEJ,UAAA,kBAAC,MAAD;IACE,WAAWN,EAAO;IAClB,MAAK;IACL,OAAOa,MAAQ,KAAA,IAAY,KAAA,IAAa,EAAE,UAAUC,EAAMD,CAAG,EAAE;IAE9D;GACC,CAAA;EACD,CAAA;CACmB,CAAA;AAE9B,CAAC,GAcKE,IAAeV,EAAiD,SACpE,EAAE,YAAS,IAAO,aAAU,IAAO,cAAW,cAAW,cAAW,GAAGC,KACvE,GACA;CACA,IAAM,EAAE,gBAAa,YAASU,EAAWd,CAAe,GAClDe,IAAOC,IAAUC,EAAK,OAAO;CACnC,OACE,kBAAC,MAAD;EAAI,WAAWX,EAAGR,EAAO,MAAMS,EAAgB;GAAE;GAAW;EAAU,CAAC,CAAC;EACtE,UAAA,kBAACQ,GAAD;GACO;GACL,WAAWT,EAAGR,EAAO,MAAMU,CAAS;GACpC,oBAAkBC;GAClB,aAAWC;GACX,eAAaQ,KAAU,KAAA;GACvB,gBAAcA,IAAS,SAAS,KAAA;GAChC,GAAId;EACL,CAAA;CACC,CAAA;AAER,CAAC,GAOYe,IAAW,OAAO,OAAOjB,GAAc,EAAE,MAAMW,EAAa,CAAC"}

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

@@ -0,0 +1,11 @@
+//#region src/components/navigation/NavLinks/NavLinks.module.css
+var e = "kiln-NavLinks__nav", t = "kiln-NavLinks__list", n = "kiln-NavLinks__item", r = "kiln-NavLinks__link", i = {
+	nav: e,
+	list: t,
+	item: n,
+	link: r
+};
+//#endregion
+export { i as default, n as item, r as link, t as list, e as nav };
+
+//# sourceMappingURL=NavLinks.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavLinks.module.js","names":["nav","list","item","link","NavLinks_module_default"],"sources":["../../../../src/components/navigation/NavLinks/NavLinks.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --navlinks-marker   current-page marker colour, default var(--color-accent)\n *   --navlinks-gap      space between links, default var(--space-5) horizontal / 0 vertical\n *                       (the `gap` prop wins over it)\n */\n.nav {\n  min-inline-size: 0;\n}\n\n.list {\n  /* Defined here so an ancestor's --_gap can never leak in; the `gap` prop overrides inline. */\n  --_gap: var(--navlinks-gap, var(--space-5));\n\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: var(--_gap);\n  row-gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.nav[data-orientation='vertical'] .list {\n  --_gap: var(--navlinks-gap, 0px);\n  flex-direction: column;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  gap: var(--_gap);\n}\n\n.item {\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n.link {\n  --_marker: var(--navlinks-marker, var(--color-accent));\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5em;\n  min-block-size: var(--control-md);\n  padding: 0;\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.2;\n  text-decoration: none;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  transition: color var(--dur-1) var(--ease-out);\n}\n\n@media (hover: hover) {\n  .link:hover {\n    color: var(--color-ink);\n  }\n}\n\n.link[data-active] {\n  color: var(--color-ink);\n}\n\n.link[data-size='sm'] {\n  min-block-size: var(--control-sm);\n  font-size: var(--text-xs);\n}\n\n.link:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* Horizontal: a bar under the label, the width of the word, sitting a little below it. */\n.link[data-orientation='horizontal']::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: calc(50% - 0.6lh - var(--space-2));\n  block-size: max(2px, var(--border-width-strong));\n  border-radius: 1px;\n  background: var(--_marker);\n  scale: 0 1;\n  transform-origin: left;\n  transition: scale var(--dur-2) var(--ease-spring);\n}\n.link[data-orientation='horizontal'][data-active]::after {\n  scale: 1 1;\n}\n\n/* Vertical: a dot in a reserved gutter, so labels never shift. */\n.link[data-orientation='vertical'] {\n  inline-size: 100%;\n  padding-inline-start: var(--space-4);\n}\n.link[data-orientation='vertical'][data-size='sm'] {\n  padding-inline-start: var(--space-3);\n}\n.link[data-orientation='vertical']::before {\n  content: '';\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 50%;\n  inline-size: 0.375rem;\n  block-size: 0.375rem;\n  margin-block-start: -0.1875rem;\n  border-radius: 50%;\n  background: var(--_marker);\n  scale: 0;\n  transition: scale var(--dur-2) var(--ease-spring);\n}\n.link[data-orientation='vertical'][data-active]::before {\n  scale: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .link::before,\n  .link::after {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { NavLinks } from './NavLinks.js';
+export type { NavLinksProps, NavLinksItemProps, NavLinksOrientation, NavLinksSize, } from './NavLinks.js';

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

@@ -0,0 +1,45 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type StepperStatus = 'complete' | 'current' | 'upcoming' | 'error';
+export interface StepperStep {
+    /** Stable identifier — matched against `value` and passed to `onStepSelect`. */
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    /** Overrides the status this step would otherwise derive from its position relative to `value`. */
+    status?: StepperStatus;
+    /**
+     * The step has errors. Independent of `status` (which keeps describing progress): an invalid
+     * step gets the critical glyph and text, and the hidden error suffix in place of the complete one;
+     * a current invalid step keeps `aria-current="step"`. `status: 'error'` is the same treatment for a step whose progress
+     * you don't report.
+     */
+    invalid?: boolean;
+}
+export interface StepperProps extends Omit<HTMLAttributes<HTMLOListElement>, 'onSelect'> {
+    steps: readonly StepperStep[];
+    /** The current step's `value` (`aria-current="step"`). */
+    value: string;
+    /** Steps become buttons when set — lets people jump to a visited or upcoming step. */
+    onStepSelect?: (value: string) => void;
+    /** Default `horizontal`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Below this breakpoint, collapse to a single line of text (`formatCompact`). */
+    compactBelow?: 'sm' | 'md';
+    formatCompact?: (index: number, total: number, label: ReactNode) => ReactNode;
+    /** Visually-hidden suffixes announced after a step's label. */
+    statusLabels?: {
+        complete?: string;
+        error?: string;
+    };
+}
+/**
+ * A step indicator for a multi-step flow — not a form control. Pair with `ActionBar`
+ * for the Back / Next / Submit row and drive both from the same current-step state.
+ *
+ * <Stepper
+ *   steps={[{ value: 'you', label: 'You' }, { value: 'team', label: 'Team' }]}
+ *   value={step}
+ *   onStepSelect={setStep}
+ * />
+ */
+export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLOListElement>>;