@mitcsutt/kiln-ui 0.1.0

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

@@ -0,0 +1,21 @@
+import { type HTMLAttributes } from 'react';
+import type { Width } from '../../../utils/tokens.js';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type ContainerElement = 'div' | 'section' | 'main' | 'header' | 'footer' | 'article' | 'nav';
+export interface ContainerProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
+    /**
+     * Maximum content width: `narrow` 32rem · `text` 42rem (prose measure) ·
+     * `content` 68rem (default) · `wide` 84rem · `full` (no maximum).
+     */
+    width?: Width;
+    /** Keep the fluid page gutter on either side. Default `true`. */
+    gutter?: boolean;
+    as?: ContainerElement;
+}
+/**
+ * Centres content at a readable maximum width with a fluid gutter. The gutter sits
+ * outside the width, so `width="text"` is always a true prose measure.
+ *
+ * <Container width="text">…</Container>
+ */
+export declare const Container: import("react").ForwardRefExoticComponent<ContainerProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/layout/Container/Container.js

@@ -0,0 +1,22 @@
+import { cx as e } from "../../../utils/cx.js";
+import { visibilityClass as t } from "../../../utils/visibility.js";
+import n from "./Container.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/layout/Container/Container.tsx
+var a = r(function({ width: r = "content", gutter: a = !0, as: o = "div", hideBelow: s, hideAbove: c, className: l, ...u }, d) {
+	return /* @__PURE__ */ i(o, {
+		ref: d,
+		className: e(n.container, t({
+			hideBelow: s,
+			hideAbove: c
+		}), l),
+		"data-width": r,
+		"data-gutter": a ? void 0 : "false",
+		...u
+	});
+});
+//#endregion
+export { a as Container };
+
+//# sourceMappingURL=Container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","names":["styles","Container_module_default","Container","forwardRef","Comp","rest","cx","visibilityClass","className","width","gutter"],"sources":["../../../../src/components/layout/Container/Container.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport type { Width } from '#utils/tokens'\nimport styles from './Container.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type ContainerElement = 'div' | 'section' | 'main' | 'header' | 'footer' | 'article' | 'nav'\n\nexport interface ContainerProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /**\n   * Maximum content width: `narrow` 32rem · `text` 42rem (prose measure) ·\n   * `content` 68rem (default) · `wide` 84rem · `full` (no maximum).\n   */\n  width?: Width\n  /** Keep the fluid page gutter on either side. Default `true`. */\n  gutter?: boolean\n  as?: ContainerElement\n}\n\n/**\n * Centres content at a readable maximum width with a fluid gutter. The gutter sits\n * outside the width, so `width=\"text\"` is always a true prose measure.\n *\n * <Container width=\"text\">…</Container>\n */\nexport const Container = forwardRef<HTMLElement, ContainerProps>(function Container(\n  { width = 'content', gutter = true, as: Comp = 'div', hideBelow, hideAbove, 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.container, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-width={width}\n      data-gutter={gutter ? undefined : 'false'}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AAyBA,IAAaE,IAAYC,EAAwC,SAC/D,EAAE,WAAQ,WAAW,YAAS,IAAM,IAAIC,IAAO,OAAO,cAAW,cAAW,cAAW,GAAGC,KAC1F,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,WAAWO,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EACpF,cAAYC;EACZ,eAAaC,IAAS,KAAA,IAAY;EAClC,GAAIL;CACL,CAAA;AAEL,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.module.js","names":["container","Container_module_default"],"sources":["../../../../src/components/layout/Container/Container.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --container-gutter   default var(--gutter) (fluid, from foundation.css)\n */\n.container {\n  --_w: var(--width-content);\n  --_g: var(--container-gutter, var(--gutter));\n\n  box-sizing: border-box;\n  inline-size: 100%;\n  max-inline-size: calc(var(--_w) + var(--_g) * 2);\n  margin-inline: auto;\n  padding-inline: var(--_g);\n  min-inline-size: 0;\n}\n\n.container[data-width='narrow'] {\n  --_w: var(--width-narrow);\n}\n.container[data-width='text'] {\n  --_w: var(--width-text);\n}\n.container[data-width='wide'] {\n  --_w: var(--width-wide);\n}\n.container[data-width='full'] {\n  max-inline-size: none;\n}\n\n.container[data-gutter='false'] {\n  --_g: 0px;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Container } from './Container.js';
+export type { ContainerProps, ContainerElement } from './Container.js';

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

@@ -0,0 +1,28 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type Space } from '../../../utils/tokens.js';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VisibilityProps {
+    /** Default `horizontal`. A vertical rule stretches to its flex/grid row. */
+    orientation?: DividerOrientation;
+    /** Heavier rule in `--color-line-strong` at `--border-width-strong`. */
+    strong?: boolean;
+    /** Text set into a horizontal rule, e.g. "Earlier this week". It also names the separator. */
+    label?: ReactNode;
+    /** Where the label sits. Default `start` (left-aligned by default); `center` for a lone break. */
+    labelPosition?: 'start' | 'center';
+    /** Margin on both sides of the rule (block axis if horizontal, inline if vertical). */
+    spacing?: Space;
+    /**
+     * Purely visual: hide it from assistive tech. Use when the rule only repeats a
+     * boundary that headings or landmarks already convey.
+     */
+    decorative?: boolean;
+}
+/**
+ * A hairline rule between groups of content. Prefer `Stack dividers` for rules
+ * between every item of a list.
+ *
+ * <Divider label="Earlier this week" spacing={6} />
+ */
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Divider/Divider.js

@@ -0,0 +1,35 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t } from "../../../utils/responsive.js";
+import { space as n } from "../../../utils/tokens.js";
+import { visibilityClass as r } from "../../../utils/visibility.js";
+import i from "./Divider.module.js";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/layout/Divider/Divider.tsx
+var c = a(function({ orientation: a = "horizontal", strong: c = !1, label: l, labelPosition: u = "start", spacing: d, decorative: f = !1, hideBelow: p, hideAbove: m, className: h, style: g, ..._ }, v) {
+	let y = o(), b = l != null && l !== !1 && a === "horizontal";
+	return /* @__PURE__ */ s("div", {
+		ref: v,
+		className: e(i.divider, r({
+			hideBelow: p,
+			hideAbove: m
+		}), h),
+		role: f ? "none" : "separator",
+		"aria-orientation": !f && a === "vertical" ? "vertical" : void 0,
+		"aria-labelledby": !f && b ? y : void 0,
+		"data-orientation": a,
+		"data-strong": c || void 0,
+		"data-label-position": b ? u : void 0,
+		style: t(d === void 0 ? void 0 : { "--divider-spacing": n(d) }, g),
+		..._,
+		children: b ? /* @__PURE__ */ s("span", {
+			id: y,
+			className: i.label,
+			children: l
+		}) : null
+	});
+});
+//#endregion
+export { c as Divider };
+
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","names":["styles","Divider_module_default","Divider","forwardRef","rest","labelId","useId","hasLabel","label","orientation","cx","visibilityClass","className","decorative","strong","labelPosition","mergeStyles","spacing","space","style"],"sources":["../../../../src/components/layout/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, useId, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport styles from './Divider.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type DividerOrientation = 'horizontal' | 'vertical'\n\nexport interface DividerProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VisibilityProps {\n  /** Default `horizontal`. A vertical rule stretches to its flex/grid row. */\n  orientation?: DividerOrientation\n  /** Heavier rule in `--color-line-strong` at `--border-width-strong`. */\n  strong?: boolean\n  /** Text set into a horizontal rule, e.g. \"Earlier this week\". It also names the separator. */\n  label?: ReactNode\n  /** Where the label sits. Default `start` (left-aligned by default); `center` for a lone break. */\n  labelPosition?: 'start' | 'center'\n  /** Margin on both sides of the rule (block axis if horizontal, inline if vertical). */\n  spacing?: Space\n  /**\n   * Purely visual: hide it from assistive tech. Use when the rule only repeats a\n   * boundary that headings or landmarks already convey.\n   */\n  decorative?: boolean\n}\n\n/**\n * A hairline rule between groups of content. Prefer `Stack dividers` for rules\n * between every item of a list.\n *\n * <Divider label=\"Earlier this week\" spacing={6} />\n */\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(\n  {\n    orientation = 'horizontal',\n    strong = false,\n    label,\n    labelPosition = 'start',\n    spacing,\n    decorative = false,\n    hideBelow,\n    hideAbove,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const labelId = useId()\n  const hasLabel =\n    label !== undefined && label !== null && label !== false && orientation === 'horizontal'\n  return (\n    <div\n      ref={ref}\n      className={cx(styles.divider, visibilityClass({ hideBelow, hideAbove }), className)}\n      role={decorative ? 'none' : 'separator'}\n      aria-orientation={!decorative && orientation === 'vertical' ? 'vertical' : undefined}\n      aria-labelledby={!decorative && hasLabel ? labelId : undefined}\n      data-orientation={orientation}\n      data-strong={strong || undefined}\n      data-label-position={hasLabel ? labelPosition : undefined}\n      style={mergeStyles(\n        spacing === undefined\n          ? undefined\n          : ({ '--divider-spacing': space(spacing) } as CSSProperties),\n        style,\n      )}\n      {...rest}\n    >\n      {hasLabel ? (\n        <span id={labelId} className={styles.label}>\n          {label}\n        </span>\n      ) : null}\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;AAkCA,IAAaE,IAAUC,EAAyC,SAC9D,EACE,iBAAc,cACd,YAAS,IACT,UACA,mBAAgB,SAChB,YACA,gBAAa,IACb,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAM,GAChBC,IACJC,KAAiC,QAAQA,MAAU,MAASC,MAAgB;CAC9E,OACE,kBAAC,OAAD;EACO;EACL,WAAWC,EAAGV,EAAO,SAASW,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAClF,MAAMC,IAAa,SAAS;EAC5B,oBAAkB,CAACA,KAAcJ,MAAgB,aAAa,aAAa,KAAA;EAC3E,mBAAiB,CAACI,KAAcN,IAAWF,IAAU,KAAA;EACrD,oBAAkBI;EAClB,eAAaK,KAAU,KAAA;EACvB,uBAAqBP,IAAWQ,IAAgB,KAAA;EAChD,OAAOC,EACLC,MAAY,KAAA,IACR,KAAA,IACC,EAAE,qBAAqBC,EAAMD,CAAO,EAAE,GAC3CE,CACF;EACA,GAAIf;EAEH,UAAAG,IACC,kBAAC,QAAD;GAAM,IAAIF;GAAS,WAAWL,EAAO;GAClC,UAAAQ;EACG,CAAA,IACJ;CACD,CAAA;AAET,CAAC"}

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

@@ -0,0 +1,9 @@
+//#region src/components/layout/Divider/Divider.module.css
+var e = "kiln-Divider__divider", t = "kiln-Divider__label", n = {
+	divider: e,
+	label: t
+};
+//#endregion
+export { n as default, e as divider, t as label };
+
+//# sourceMappingURL=Divider.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.module.js","names":["divider","label","Divider_module_default"],"sources":["../../../../src/components/layout/Divider/Divider.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --divider-color         default var(--color-line) (var(--color-line-strong) when strong)\n *   --divider-label-color   default var(--color-ink-muted)\n */\n.divider {\n  --_w: var(--border-width);\n  --_c: var(--divider-color, var(--color-line));\n  --_m: var(--divider-spacing, 0px);\n\n  flex-shrink: 0;\n  margin: 0;\n  border: 0;\n}\n\n.divider[data-strong] {\n  --_w: var(--border-width-strong);\n  --_c: var(--divider-color, var(--color-line-strong));\n}\n\n.divider[data-orientation='horizontal'] {\n  inline-size: 100%;\n  margin-block: var(--_m);\n  border-block-start: var(--_w) solid var(--_c);\n}\n\n.divider[data-orientation='vertical'] {\n  align-self: stretch;\n  inline-size: 0;\n  min-block-size: 1em;\n  margin-inline: var(--_m);\n  border-inline-start: var(--_w) solid var(--_c);\n}\n\n/* Labelled: the rule becomes two pseudo-element segments around the text. */\n.divider[data-label-position] {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  border-block-start: 0;\n}\n.divider[data-label-position]::before,\n.divider[data-label-position]::after {\n  content: '';\n  flex: 1 1 0;\n  border-block-start: var(--_w) solid var(--_c);\n}\n.divider[data-label-position='start']::before {\n  flex: 0 0 auto;\n  display: none;\n}\n\n.label {\n  flex: 0 1 auto;\n  min-inline-size: 0;\n  color: var(--divider-label-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: var(--leading-snug);\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.divider[hidden] {\n  display: none;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Divider } from './Divider.js';
+export type { DividerProps, DividerOrientation } from './Divider.js';

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

@@ -0,0 +1,50 @@
+import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../../utils/responsive.js';
+import { type Align, type Space } from '../../../utils/tokens.js';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type GridMinItemWidth = 'xs' | 'sm' | 'md' | 'lg';
+export type GridElement = 'div' | 'section' | 'ul' | 'ol' | 'dl';
+export type GridItemElement = 'div' | 'li' | 'article' | 'section' | 'aside';
+interface GridBaseProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
+    /** Space between cells (both axes). Responsive. */
+    gap?: Responsive<Space>;
+    /** Row gap, if different from `gap`. Responsive. */
+    rowGap?: Responsive<Space>;
+    /** Cell alignment on the block axis. Default `stretch`. Responsive. */
+    align?: Responsive<Align>;
+    as?: GridElement;
+}
+interface GridColumnsProps extends GridBaseProps {
+    /** A fixed track count, 1–12. Responsive: `{ base: 1, sm: 2, lg: 4 }`. */
+    columns?: Responsive<GridColumns>;
+    minItemWidth?: never;
+}
+interface GridAutoProps extends GridBaseProps {
+    columns?: never;
+    /**
+     * Fit as many tracks as there's room for, each at least this wide
+     * (xs 12rem · sm 16rem · md 20rem · lg 24rem). No breakpoints needed.
+     */
+    minItemWidth: GridMinItemWidth;
+}
+export type GridProps = GridColumnsProps | GridAutoProps;
+export type GridSpan = GridColumns | 'full';
+export interface GridItemProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
+    /** Columns to span, or `full` for edge to edge. Responsive. */
+    span?: Responsive<GridSpan>;
+    /** Column line to start on (1-based). Responsive. */
+    start?: Responsive<GridColumns>;
+    as?: GridItemElement;
+}
+/**
+ * Two-dimensional layout: either a fixed column count (responsive) or an
+ * intrinsic auto-fill grid that needs no breakpoints at all.
+ *
+ * <Grid columns={{ base: 1, sm: 2, lg: 4 }} gap={5}>…</Grid>
+ * <Grid minItemWidth="sm" gap={4}>…</Grid>
+ */
+export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLElement>> & {
+    Item: import("react").ForwardRefExoticComponent<GridItemProps & import("react").RefAttributes<HTMLElement>>;
+};
+export {};

package/dist/components/layout/Grid/Grid.js

@@ -0,0 +1,35 @@
+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 { visibilityClass as a } from "../../../utils/visibility.js";
+import o from "./Grid.module.js";
+import { forwardRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/layout/Grid/Grid.tsx
+var l = (e) => `repeat(${String(e)}, minmax(0, 1fr))`, u = s(function({ columns: s, minItemWidth: u, gap: d, rowGap: f, align: p, as: m = "div", hideBelow: h, hideAbove: g, className: _, style: v, ...y }, b) {
+	return /* @__PURE__ */ c(m, {
+		ref: b,
+		className: e(o.grid, a({
+			hideBelow: h,
+			hideAbove: g
+		}), _),
+		"data-min-item": u,
+		role: m === "ul" || m === "ol" ? "list" : void 0,
+		style: t(u ? void 0 : n("grid-columns", s, l), n("grid-gap", d, i), n("grid-row-gap", f, i), n("grid-align", p, r), v),
+		...y
+	});
+}), d = s(function({ span: r, start: i, as: s = "div", hideBelow: l, hideAbove: u, className: d, style: f, ...p }, m) {
+	return /* @__PURE__ */ c(s, {
+		ref: m,
+		className: e(o.item, a({
+			hideBelow: l,
+			hideAbove: u
+		}), d),
+		style: t(n("grid-item-end", r, (e) => e === "full" ? "-1" : `span ${String(e)}`), n("grid-item-full", r, (e) => e === "full" ? "1" : "auto"), n("grid-item-start", i, String), f),
+		...p
+	});
+}), f = Object.assign(u, { Item: d });
+//#endregion
+export { f as Grid };
+
+//# sourceMappingURL=Grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","names":["styles","Grid_module_default","tracks","n","GridRoot","forwardRef","Comp","rest","cx","visibilityClass","className","minItemWidth","mergeStyles","responsiveVars","columns","gap","space","rowGap","align","alignCss","style","GridItem","span","s","start","Grid"],"sources":["../../../../src/components/layout/Grid/Grid.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 './Grid.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\nexport type GridMinItemWidth = 'xs' | 'sm' | 'md' | 'lg'\nexport type GridElement = 'div' | 'section' | 'ul' | 'ol' | 'dl'\nexport type GridItemElement = 'div' | 'li' | 'article' | 'section' | 'aside'\n\ninterface GridBaseProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /** Space between cells (both axes). Responsive. */\n  gap?: Responsive<Space>\n  /** Row gap, if different from `gap`. Responsive. */\n  rowGap?: Responsive<Space>\n  /** Cell alignment on the block axis. Default `stretch`. Responsive. */\n  align?: Responsive<Align>\n  as?: GridElement\n}\n\ninterface GridColumnsProps extends GridBaseProps {\n  /** A fixed track count, 1–12. Responsive: `{ base: 1, sm: 2, lg: 4 }`. */\n  columns?: Responsive<GridColumns>\n  minItemWidth?: never\n}\n\ninterface GridAutoProps extends GridBaseProps {\n  columns?: never\n  /**\n   * Fit as many tracks as there's room for, each at least this wide\n   * (xs 12rem · sm 16rem · md 20rem · lg 24rem). No breakpoints needed.\n   */\n  minItemWidth: GridMinItemWidth\n}\n\nexport type GridProps = GridColumnsProps | GridAutoProps\n\nconst tracks = (n: GridColumns): string => `repeat(${String(n)}, minmax(0, 1fr))`\n\nconst GridRoot = forwardRef<HTMLElement, GridProps>(function Grid(\n  {\n    columns,\n    minItemWidth,\n    gap,\n    rowGap,\n    align,\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.grid, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-min-item={minItemWidth}\n      role={Comp === 'ul' || Comp === 'ol' ? 'list' : undefined}\n      style={mergeStyles(\n        minItemWidth ? undefined : responsiveVars('grid-columns', columns, tracks),\n        responsiveVars('grid-gap', gap, space),\n        responsiveVars('grid-row-gap', rowGap, space),\n        responsiveVars('grid-align', align, alignCss),\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n\nexport type GridSpan = GridColumns | 'full'\n\nexport interface GridItemProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /** Columns to span, or `full` for edge to edge. Responsive. */\n  span?: Responsive<GridSpan>\n  /** Column line to start on (1-based). Responsive. */\n  start?: Responsive<GridColumns>\n  as?: GridItemElement\n}\n\n/**\n * A cell that spans or starts somewhere specific. Plain children don't need it.\n *\n * <Grid.Item span={{ base: 'full', md: 8 }} start={{ md: 3 }}>…</Grid.Item>\n */\nconst GridItem = forwardRef<HTMLElement, GridItemProps>(function GridItem(\n  { span, start, as: Comp = 'div', hideBelow, hideAbove, className, style, ...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.item, visibilityClass({ hideBelow, hideAbove }), className)}\n      style={mergeStyles(\n        responsiveVars('grid-item-end', span, (s) => (s === 'full' ? '-1' : `span ${String(s)}`)),\n        // `full` must also pin the start line to 1; an explicit `start` still wins.\n        responsiveVars('grid-item-full', span, (s) => (s === 'full' ? '1' : 'auto')),\n        responsiveVars('grid-item-start', start, String),\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n\n/**\n * Two-dimensional layout: either a fixed column count (responsive) or an\n * intrinsic auto-fill grid that needs no breakpoints at all.\n *\n * <Grid columns={{ base: 1, sm: 2, lg: 4 }} gap={5}>…</Grid>\n * <Grid minItemWidth=\"sm\" gap={4}>…</Grid>\n */\nexport const Grid = Object.assign(GridRoot, { Item: GridItem })\n"],"mappings":";;;;;;;;AAuCA,IAAME,KAAU,MAA2B,UAAU,OAAOC,CAAC,EAAE,oBAEzDC,IAAWC,EAAmC,SAClD,EACE,YACA,iBACA,QACA,WACA,UACA,IAAIC,IAAO,OACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGR,EAAO,MAAMS,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAC/E,iBAAeC;EACf,MAAML,MAAS,QAAQA,MAAS,OAAO,SAAS,KAAA;EAChD,OAAOM,EACLD,IAAe,KAAA,IAAYE,EAAe,gBAAgBC,GAASZ,CAAM,GACzEW,EAAe,YAAYE,GAAKC,CAAK,GACrCH,EAAe,gBAAgBI,GAAQD,CAAK,GAC5CH,EAAe,cAAcK,GAAOC,CAAQ,GAC5CC,CACF;EACA,GAAIb;CACL,CAAA;AAEL,CAAC,GAiBKc,IAAWhB,EAAuC,SACtD,EAAE,SAAM,UAAO,IAAIC,IAAO,OAAO,cAAW,cAAW,cAAW,UAAO,GAAGC,KAC5E,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGR,EAAO,MAAMS,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAC/E,OAAOE,EACLC,EAAe,iBAAiBS,IAAO,MAAOC,MAAM,SAAS,OAAO,QAAQ,OAAOA,CAAC,GAAI,GAExFV,EAAe,kBAAkBS,IAAO,MAAOC,MAAM,SAAS,MAAM,MAAO,GAC3EV,EAAe,mBAAmBW,GAAO,MAAM,GAC/CJ,CACF;EACA,GAAIb;CACL,CAAA;AAEL,CAAC,GASYkB,IAAO,OAAO,OAAOrB,GAAU,EAAE,MAAMiB,EAAS,CAAC"}

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

@@ -0,0 +1,9 @@
+//#region src/components/layout/Grid/Grid.module.css
+var e = "kiln-Grid__grid", t = "kiln-Grid__item", n = {
+	grid: e,
+	item: t
+};
+//#endregion
+export { n as default, e as grid, t as item };
+
+//# sourceMappingURL=Grid.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.module.js","names":["grid","item","Grid_module_default"],"sources":["../../../../src/components/layout/Grid/Grid.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css.\n *\n * Component tokens (minimum track widths for `minItemWidth`):\n *   --grid-min-xs  12rem   --grid-min-sm  16rem   --grid-min-md  20rem   --grid-min-lg  24rem\n */\n.grid {\n  --_cols: var(--grid-columns-base, minmax(0, 1fr));\n  --_gap: var(--grid-gap-base, 0px);\n  --_row-gap: var(--grid-row-gap-base, var(--_gap));\n  --_align: var(--grid-align-base, stretch);\n\n  display: grid;\n  grid-template-columns: var(--_cols);\n  column-gap: var(--_gap);\n  row-gap: var(--_row-gap);\n  align-items: var(--_align);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Intrinsic mode: min() keeps a single track from overflowing a narrow container. */\n.grid[data-min-item] {\n  --_min: var(--grid-min-sm, 16rem);\n\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_min)), 1fr));\n}\n.grid[data-min-item='xs'] {\n  --_min: var(--grid-min-xs, 12rem);\n}\n.grid[data-min-item='md'] {\n  --_min: var(--grid-min-md, 20rem);\n}\n.grid[data-min-item='lg'] {\n  --_min: var(--grid-min-lg, 24rem);\n}\n\n.item {\n  --_start: var(--grid-item-start-base, var(--grid-item-full-base, auto));\n  --_end: var(--grid-item-end-base, auto);\n\n  grid-column-start: var(--_start);\n  grid-column-end: var(--_end);\n  min-inline-size: 0;\n}\n\n@media (min-width: 40em) {\n  .grid {\n    --_cols: var(--grid-columns-sm, minmax(0, 1fr));\n    --_gap: var(--grid-gap-sm, 0px);\n    --_row-gap: var(--grid-row-gap-sm, var(--_gap));\n    --_align: var(--grid-align-sm, stretch);\n  }\n  .item {\n    --_start: var(--grid-item-start-sm, var(--grid-item-full-sm, auto));\n    --_end: var(--grid-item-end-sm, auto);\n  }\n}\n@media (min-width: 48em) {\n  .grid {\n    --_cols: var(--grid-columns-md, minmax(0, 1fr));\n    --_gap: var(--grid-gap-md, 0px);\n    --_row-gap: var(--grid-row-gap-md, var(--_gap));\n    --_align: var(--grid-align-md, stretch);\n  }\n  .item {\n    --_start: var(--grid-item-start-md, var(--grid-item-full-md, auto));\n    --_end: var(--grid-item-end-md, auto);\n  }\n}\n@media (min-width: 64em) {\n  .grid {\n    --_cols: var(--grid-columns-lg, minmax(0, 1fr));\n    --_gap: var(--grid-gap-lg, 0px);\n    --_row-gap: var(--grid-row-gap-lg, var(--_gap));\n    --_align: var(--grid-align-lg, stretch);\n  }\n  .item {\n    --_start: var(--grid-item-start-lg, var(--grid-item-full-lg, auto));\n    --_end: var(--grid-item-end-lg, auto);\n  }\n}\n@media (min-width: 80em) {\n  .grid {\n    --_cols: var(--grid-columns-xl, minmax(0, 1fr));\n    --_gap: var(--grid-gap-xl, 0px);\n    --_row-gap: var(--grid-row-gap-xl, var(--_gap));\n    --_align: var(--grid-align-xl, stretch);\n  }\n  .item {\n    --_start: var(--grid-item-start-xl, var(--grid-item-full-xl, auto));\n    --_end: var(--grid-item-end-xl, auto);\n  }\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.grid[hidden] {\n  display: none;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Grid } from './Grid.js';
+export type { GridProps, GridItemProps, GridColumns, GridMinItemWidth, GridSpan, GridElement, GridItemElement, } from './Grid.js';

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

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../../utils/responsive.js';
+import { type Align, type Justify, type Space } from '../../../utils/tokens.js';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type InlineElement = 'div' | 'span' | 'nav' | 'ul' | 'ol' | 'li' | 'header' | 'footer' | 'p';
+export interface InlineProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
+    /** Space between items (both axes when wrapping). Responsive. */
+    gap?: Responsive<Space>;
+    /** Row gap when wrapped, if different from `gap`. Responsive. */
+    rowGap?: Responsive<Space>;
+    /** Cross-axis alignment. Default `center`. Responsive. */
+    align?: Responsive<Align>;
+    /** Main-axis distribution. Default `start`. Responsive. */
+    justify?: Responsive<Justify>;
+    /** Wrap onto new lines. Default `true`. */
+    wrap?: boolean;
+    as?: InlineElement;
+}
+/**
+ * Horizontal flow: button rows, tag lists, meta lines, toolbars.
+ *
+ * <Inline gap={3} justify={{ base: 'start', md: 'between' }}>…</Inline>
+ */
+export declare const Inline: import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLElement>>;

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Inline.js","names":["styles","Inline_module_default","Inline","forwardRef","Comp","rest","cx","visibilityClass","className","wrap","mergeStyles","responsiveVars","gap","space","rowGap","align","alignCss","justify","justifyCss","style"],"sources":["../../../../src/components/layout/Inline/Inline.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { alignCss, justifyCss, space, type Align, type Justify, type Space } from '#utils/tokens'\nimport styles from './Inline.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type InlineElement = 'div' | 'span' | 'nav' | 'ul' | 'ol' | 'li' | 'header' | 'footer' | 'p'\n\nexport interface InlineProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /** Space between items (both axes when wrapping). Responsive. */\n  gap?: Responsive<Space>\n  /** Row gap when wrapped, if different from `gap`. Responsive. */\n  rowGap?: Responsive<Space>\n  /** Cross-axis alignment. Default `center`. Responsive. */\n  align?: Responsive<Align>\n  /** Main-axis distribution. Default `start`. Responsive. */\n  justify?: Responsive<Justify>\n  /** Wrap onto new lines. Default `true`. */\n  wrap?: boolean\n  as?: InlineElement\n}\n\n/**\n * Horizontal flow: button rows, tag lists, meta lines, toolbars.\n *\n * <Inline gap={3} justify={{ base: 'start', md: 'between' }}>…</Inline>\n */\nexport const Inline = forwardRef<HTMLElement, InlineProps>(function Inline(\n  {\n    gap,\n    rowGap,\n    align,\n    justify,\n    wrap = true,\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.inline, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-wrap={wrap ? undefined : 'false'}\n      role={Comp === 'ul' || Comp === 'ol' ? 'list' : undefined}\n      style={mergeStyles(\n        responsiveVars('inline-gap', gap, space),\n        responsiveVars('inline-row-gap', rowGap, space),\n        responsiveVars('inline-align', align, alignCss),\n        responsiveVars('inline-justify', justify, justifyCss),\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AA4BA,IAAaE,IAASC,EAAqC,SACzD,EACE,QACA,WACA,UACA,YACA,UAAO,IACP,IAAIC,IAAO,OACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,QAAQO,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EACjF,aAAWC,IAAO,KAAA,IAAY;EAC9B,MAAML,MAAS,QAAQA,MAAS,OAAO,SAAS,KAAA;EAChD,OAAOM,EACLC,EAAe,cAAcC,GAAKC,CAAK,GACvCF,EAAe,kBAAkBG,GAAQD,CAAK,GAC9CF,EAAe,gBAAgBI,GAAOC,CAAQ,GAC9CL,EAAe,kBAAkBM,GAASC,CAAU,GACpDC,CACF;EACA,GAAId;CACL,CAAA;AAEL,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Inline.module.js","names":["inline","Inline_module_default"],"sources":["../../../../src/components/layout/Inline/Inline.module.css"],"sourcesContent":["/* Responsive pattern: see layout/Stack/Stack.module.css. */\n.inline {\n  --_gap: var(--inline-gap-base, 0px);\n  --_row-gap: var(--inline-row-gap-base, var(--_gap));\n  --_align: var(--inline-align-base, center);\n  --_justify: var(--inline-justify-base, flex-start);\n\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  min-inline-size: 0;\n  column-gap: var(--_gap);\n  row-gap: var(--_row-gap);\n  align-items: var(--_align);\n  justify-content: var(--_justify);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.inline[data-wrap='false'] {\n  flex-wrap: nowrap;\n}\n\n@media (min-width: 40em) {\n  .inline {\n    --_gap: var(--inline-gap-sm, 0px);\n    --_row-gap: var(--inline-row-gap-sm, var(--_gap));\n    --_align: var(--inline-align-sm, center);\n    --_justify: var(--inline-justify-sm, flex-start);\n  }\n}\n\n@media (min-width: 48em) {\n  .inline {\n    --_gap: var(--inline-gap-md, 0px);\n    --_row-gap: var(--inline-row-gap-md, var(--_gap));\n    --_align: var(--inline-align-md, center);\n    --_justify: var(--inline-justify-md, flex-start);\n  }\n}\n\n@media (min-width: 64em) {\n  .inline {\n    --_gap: var(--inline-gap-lg, 0px);\n    --_row-gap: var(--inline-row-gap-lg, var(--_gap));\n    --_align: var(--inline-align-lg, center);\n    --_justify: var(--inline-justify-lg, flex-start);\n  }\n}\n\n@media (min-width: 80em) {\n  .inline {\n    --_gap: var(--inline-gap-xl, 0px);\n    --_row-gap: var(--inline-row-gap-xl, var(--_gap));\n    --_align: var(--inline-align-xl, center);\n    --_justify: var(--inline-justify-xl, flex-start);\n  }\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.inline[hidden] {\n  display: none;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Inline } from './Inline.js';
+export type { InlineProps, InlineElement } from './Inline.js';

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

@@ -0,0 +1,30 @@
+import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../../utils/responsive.js';
+import { type Space } from '../../../utils/tokens.js';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type SectionElement = 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer';
+export type SectionSurface = 'canvas' | 'surface' | 'sunken' | 'inverse' | 'accent';
+export type SectionDivider = 'top' | 'bottom' | 'both';
+export interface SectionProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
+    /**
+     * Block padding (top and bottom), as a step on the space scale. Responsive.
+     * Vary it: adjacent sections should not share the same step. Default `8`.
+     */
+    space?: Responsive<Space>;
+    /**
+     * Full-bleed band colour. Omit to stay transparent on the canvas. `inverse` and
+     * `accent` re-point the ink, line and focus colours so children stay legible.
+     */
+    surface?: SectionSurface;
+    /** A hairline across the full bleed at the top, bottom or both edges. */
+    divider?: SectionDivider;
+    as?: SectionElement;
+}
+/**
+ * A full-bleed band of vertical rhythm. Put a `Container` inside for width.
+ *
+ * <Section space={{ base: 7, md: 9 }} surface="sunken" divider="both">
+ *   <Container>…</Container>
+ * </Section>
+ */
+export declare const Section: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/layout/Section/Section.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","names":["styles","Section_module_default","Section","forwardRef","spaceProp","Comp","rest","cx","visibilityClass","className","surface","divider","mergeStyles","responsiveVars","space","style"],"sources":["../../../../src/components/layout/Section/Section.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport styles from './Section.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type SectionElement = 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer'\nexport type SectionSurface = 'canvas' | 'surface' | 'sunken' | 'inverse' | 'accent'\nexport type SectionDivider = 'top' | 'bottom' | 'both'\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /**\n   * Block padding (top and bottom), as a step on the space scale. Responsive.\n   * Vary it: adjacent sections should not share the same step. Default `8`.\n   */\n  space?: Responsive<Space>\n  /**\n   * Full-bleed band colour. Omit to stay transparent on the canvas. `inverse` and\n   * `accent` re-point the ink, line and focus colours so children stay legible.\n   */\n  surface?: SectionSurface\n  /** A hairline across the full bleed at the top, bottom or both edges. */\n  divider?: SectionDivider\n  as?: SectionElement\n}\n\n/**\n * A full-bleed band of vertical rhythm. Put a `Container` inside for width.\n *\n * <Section space={{ base: 7, md: 9 }} surface=\"sunken\" divider=\"both\">\n *   <Container>…</Container>\n * </Section>\n */\nexport const Section = forwardRef<HTMLElement, SectionProps>(function Section(\n  {\n    space: spaceProp,\n    surface,\n    divider,\n    as: Comp = 'section',\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.section, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-surface={surface}\n      data-divider={divider}\n      style={mergeStyles(responsiveVars('section-space', spaceProp, space), style)}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AAkCA,IAAaE,IAAUC,EAAsC,SAC3D,EACE,OAAOC,GACP,YACA,YACA,IAAIC,IAAO,WACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGP,EAAO,SAASQ,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAClF,gBAAcC;EACd,gBAAcC;EACd,OAAOC,EAAYC,EAAe,iBAAiBT,GAAWU,CAAK,GAAGC,CAAK;EAC3E,GAAIT;CACL,CAAA;AAEL,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.module.js","names":["section","Section_module_default"],"sources":["../../../../src/components/layout/Section/Section.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css.\n *\n * Component tokens:\n *   --section-fill / --section-on   (read-only) the band's fill and ink on inverse/accent\n *   --section-space-default   block padding when `space` is unset (default var(--space-8))\n *   --section-divider-color   hairline colour for `divider` (default var(--color-line))\n */\n.section {\n  --_space: var(--section-space-base, var(--section-space-default, var(--space-8)));\n  --_rule: var(--border-width) solid var(--section-divider-color, var(--color-line));\n\n  display: block;\n  position: relative;\n  min-inline-size: 0;\n  padding-block: var(--_space);\n}\n\n@media (min-width: 40em) {\n  .section {\n    --_space: var(--section-space-sm, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 48em) {\n  .section {\n    --_space: var(--section-space-md, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 64em) {\n  .section {\n    --_space: var(--section-space-lg, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 80em) {\n  .section {\n    --_space: var(--section-space-xl, var(--section-space-default, var(--space-8)));\n  }\n}\n\n.section[data-divider='top'],\n.section[data-divider='both'] {\n  border-block-start: var(--_rule);\n}\n.section[data-divider='bottom'],\n.section[data-divider='both'] {\n  border-block-end: var(--_rule);\n}\n\n/* Surfaces */\n.section[data-surface='canvas'] {\n  background-color: var(--color-canvas);\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.section[data-surface='surface'] {\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n}\n.section[data-surface='sunken'] {\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink);\n}\n\n/*\n * Inverse and accent bands re-point the colour roles for every descendant, so text,\n * hairlines, focus rings and nested controls (an outline or solid Button) stay legible\n * without per-child props. Mixes are taken against the band's own fill.\n *\n * Swapping a pair (e.g. ink <-> ink-inverse) can't happen on one element — it would be\n * a var() cycle — so the band publishes its fill/ink as --section-fill/--section-on and\n * the swapped roles are set on its children.\n */\n.section[data-surface='inverse'] {\n  --section-fill: var(--color-surface-inverse);\n  --section-on: var(--color-ink-inverse);\n}\n.section[data-surface='accent'] {\n  --section-fill: var(--color-accent);\n  --section-on: var(--color-accent-ink);\n}\n.section:is([data-surface='inverse'], [data-surface='accent']) {\n  --color-ink: var(--section-on);\n  --color-ink-muted: color-mix(in oklab, var(--section-on) 76%, var(--section-fill));\n  --color-ink-subtle: color-mix(in oklab, var(--section-on) 60%, var(--section-fill));\n  --color-line: color-mix(in oklab, var(--section-on) 22%, var(--section-fill));\n  --color-line-strong: color-mix(in oklab, var(--section-on) 45%, var(--section-fill));\n  --color-canvas: var(--section-fill);\n  --color-surface: color-mix(in oklab, var(--section-on) 7%, var(--section-fill));\n  --color-surface-sunken: color-mix(in oklab, var(--section-on) 12%, var(--section-fill));\n  --color-surface-raised: color-mix(in oklab, var(--section-on) 4%, var(--section-fill));\n  --color-focus: var(--section-on);\n  --color-accent-text: var(--section-on);\n  --canvas-image: none;\n\n  background-color: var(--section-fill);\n  color: var(--section-on);\n}\n/* An accent fill only clears AA against its own ink (~4.5-5:1), so there is no headroom\n   for muted/subtle steps there: secondary text uses the full band ink, and nested\n   surfaces stay the band fill (edges come from the line tokens) so text on them keeps AA. */\n.section[data-surface='accent'] {\n  --color-ink-muted: var(--section-on);\n  --color-ink-subtle: var(--section-on);\n  --color-surface: var(--section-fill);\n  --color-surface-sunken: var(--section-fill);\n  --color-surface-raised: var(--section-fill);\n}\n.section[data-surface='inverse'] > * {\n  --color-surface-inverse: var(--section-on);\n  --color-ink-inverse: var(--section-fill);\n}\n/* On an accent band the accent itself becomes the band's ink, so a primary action still stands out. */\n.section[data-surface='accent'] > * {\n  --color-accent: var(--section-on);\n  --color-accent-hover: color-mix(in oklab, var(--section-on) 82%, var(--section-fill));\n  --color-accent-ink: var(--section-fill);\n  --color-accent-soft: color-mix(in oklab, var(--section-on) 12%, var(--section-fill));\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.section[hidden] {\n  display: none;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Section } from './Section.js';
+export type { SectionProps, SectionElement, SectionSurface, SectionDivider } from './Section.js';

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

@@ -0,0 +1,32 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type Responsive } from '../../../utils/responsive.js';
+import { type Align, type Space } from '../../../utils/tokens.js';
+/** First : second, on a 12-column basis. */
+export type SplitRatio = '1/1' | '1/2' | '2/1' | '1/3' | '3/1' | '5/7' | '7/5' | '4/8' | '8/4';
+export type SplitCollapse = 'sm' | 'md' | 'lg';
+export type SplitElement = 'div' | 'section' | 'article' | 'header' | 'footer';
+export interface SplitProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Width of the first child to the second. Default `5/7` — asymmetric on purpose. */
+    ratio?: SplitRatio;
+    /** Stack the two children vertically below this breakpoint. Default `md`. */
+    collapseBelow?: SplitCollapse;
+    /** Space between the two sides (and between them when stacked). Responsive. */
+    gap?: Responsive<Space>;
+    /** Block-axis alignment of the two sides. Default `start`. Responsive. */
+    align?: Responsive<Align>;
+    /** Put the second child first *visually* when split. DOM (and stacked) order is unchanged. */
+    reverse?: boolean;
+    /** Exactly two children: the first and second side. */
+    children: [ReactNode, ReactNode];
+    as?: SplitElement;
+}
+/**
+ * An asymmetric two-column layout: a heading beside its list, a label hang column,
+ * media beside copy. Stacks below `collapseBelow`.
+ *
+ * <Split ratio="5/7" gap={{ base: 5, md: 7 }}>
+ *   <Heading>Recent releases</Heading>
+ *   <Stack dividers>…</Stack>
+ * </Split>
+ */
+export declare const Split: import("react").ForwardRefExoticComponent<SplitProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/layout/Split/Split.js

@@ -0,0 +1,26 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t, responsiveVars as n } from "../../../utils/responsive.js";
+import { alignCss as r, space as i } from "../../../utils/tokens.js";
+import a from "./Split.module.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/layout/Split/Split.tsx
+var c = (e, t) => {
+	let [n, r] = e.split("/"), [i, a] = t ? [r, n] : [n, r];
+	return `minmax(0, ${String(i)}fr) minmax(0, ${String(a)}fr)`;
+}, l = o(function({ ratio: o = "5/7", collapseBelow: l = "md", gap: u, align: d, reverse: f = !1, as: p = "div", className: m, style: h, children: g, ..._ }, v) {
+	return /* @__PURE__ */ s(p, {
+		ref: v,
+		className: e(a.split, m),
+		"data-ratio": o,
+		"data-collapse-below": l,
+		"data-reverse": f || void 0,
+		style: t({ "--split-columns": c(o, f) }, n("split-gap", u, i), n("split-align", d, r), h),
+		..._,
+		children: g
+	});
+});
+//#endregion
+export { l as Split };
+
+//# sourceMappingURL=Split.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Split.js","names":["styles","Split_module_default","columns","a","b","ratio","first","second","reverse","Split","forwardRef","Comp","rest","cx","className","collapseBelow","mergeStyles","responsiveVars","gap","space","align","alignCss","style"],"sources":["../../../../src/components/layout/Split/Split.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } 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 './Split.module.css'\n\n/** First : second, on a 12-column basis. */\nexport type SplitRatio = '1/1' | '1/2' | '2/1' | '1/3' | '3/1' | '5/7' | '7/5' | '4/8' | '8/4'\nexport type SplitCollapse = 'sm' | 'md' | 'lg'\nexport type SplitElement = 'div' | 'section' | 'article' | 'header' | 'footer'\n\nexport interface SplitProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {\n  /** Width of the first child to the second. Default `5/7` — asymmetric on purpose. */\n  ratio?: SplitRatio\n  /** Stack the two children vertically below this breakpoint. Default `md`. */\n  collapseBelow?: SplitCollapse\n  /** Space between the two sides (and between them when stacked). Responsive. */\n  gap?: Responsive<Space>\n  /** Block-axis alignment of the two sides. Default `start`. Responsive. */\n  align?: Responsive<Align>\n  /** Put the second child first *visually* when split. DOM (and stacked) order is unchanged. */\n  reverse?: boolean\n  /** Exactly two children: the first and second side. */\n  children: [ReactNode, ReactNode]\n  as?: SplitElement\n}\n\nconst columns = (ratio: SplitRatio, reverse: boolean): string => {\n  const [a, b] = ratio.split('/')\n  const [first, second] = reverse ? [b, a] : [a, b]\n  return `minmax(0, ${String(first)}fr) minmax(0, ${String(second)}fr)`\n}\n\n/**\n * An asymmetric two-column layout: a heading beside its list, a label hang column,\n * media beside copy. Stacks below `collapseBelow`.\n *\n * <Split ratio=\"5/7\" gap={{ base: 5, md: 7 }}>\n *   <Heading>Recent releases</Heading>\n *   <Stack dividers>…</Stack>\n * </Split>\n */\nexport const Split = forwardRef<HTMLElement, SplitProps>(function Split(\n  {\n    ratio = '5/7',\n    collapseBelow = 'md',\n    gap,\n    align,\n    reverse = false,\n    as: Comp = 'div',\n    className,\n    style,\n    children,\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.split, className)}\n      data-ratio={ratio}\n      data-collapse-below={collapseBelow}\n      data-reverse={reverse || undefined}\n      style={mergeStyles(\n        { '--split-columns': columns(ratio, reverse) } as CSSProperties,\n        responsiveVars('split-gap', gap, space),\n        responsiveVars('split-align', align, alignCss),\n        style,\n      )}\n      {...rest}\n    >\n      {children}\n    </Comp>\n  )\n})\n"],"mappings":";;;;;;;AA2BA,IAAME,KAAW,GAAmB,MAA6B;CAC/D,IAAM,CAACC,GAAGC,KAAKC,EAAM,MAAM,GAAG,GACxB,CAACC,GAAOC,KAAUC,IAAU,CAACJ,GAAGD,CAAC,IAAI,CAACA,GAAGC,CAAC;CAChD,OAAO,aAAa,OAAOE,CAAK,EAAE,gBAAgB,OAAOC,CAAM,EAAE;AACnE,GAWaE,IAAQC,EAAoC,SACvD,EACE,WAAQ,OACR,mBAAgB,MAChB,QACA,UACA,aAAU,IACV,IAAIC,IAAO,OACX,cACA,UACA,aACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGb,EAAO,OAAOc,CAAS;EACrC,cAAYT;EACZ,uBAAqBU;EACrB,gBAAcP,KAAW,KAAA;EACzB,OAAOQ,EACL,EAAE,mBAAmBd,EAAQG,GAAOG,CAAO,EAAE,GAC7CS,EAAe,aAAaC,GAAKC,CAAK,GACtCF,EAAe,eAAeG,GAAOC,CAAQ,GAC7CC,CACF;EACA,GAAIV;EAEH;CACG,CAAA;AAEV,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Split.module.js","names":["split","Split_module_default"],"sources":["../../../../src/components/layout/Split/Split.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css. The column template comes\n * from the component as --split-columns (ratio + reverse); it only applies at and\n * above the `collapseBelow` breakpoint. Below it the sides stack in DOM order.\n */\n.split {\n  --_gap: var(--split-gap-base, 0px);\n  --_align: var(--split-align-base, flex-start);\n\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--_gap);\n  align-items: var(--_align);\n  min-inline-size: 0;\n}\n\n.split > * {\n  min-inline-size: 0;\n}\n\n@media (min-width: 40em) {\n  .split {\n    --_gap: var(--split-gap-sm, 0px);\n    --_align: var(--split-align-sm, flex-start);\n  }\n  .split[data-collapse-below='sm'] {\n    grid-template-columns: var(--split-columns);\n  }\n  .split[data-collapse-below='sm'][data-reverse] > :first-child {\n    order: 2;\n  }\n}\n@media (min-width: 48em) {\n  .split {\n    --_gap: var(--split-gap-md, 0px);\n    --_align: var(--split-align-md, flex-start);\n  }\n  .split[data-collapse-below='md'] {\n    grid-template-columns: var(--split-columns);\n  }\n  .split[data-collapse-below='md'][data-reverse] > :first-child {\n    order: 2;\n  }\n}\n@media (min-width: 64em) {\n  .split {\n    --_gap: var(--split-gap-lg, 0px);\n    --_align: var(--split-align-lg, flex-start);\n  }\n  .split[data-collapse-below='lg'] {\n    grid-template-columns: var(--split-columns);\n  }\n  .split[data-collapse-below='lg'][data-reverse] > :first-child {\n    order: 2;\n  }\n}\n@media (min-width: 80em) {\n  .split {\n    --_gap: var(--split-gap-xl, 0px);\n    --_align: var(--split-align-xl, flex-start);\n  }\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.split[hidden] {\n  display: none;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Split } from './Split.js';
+export type { SplitProps, SplitRatio, SplitCollapse, SplitElement } from './Split.js';

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

@@ -0,0 +1,21 @@
+import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../../utils/responsive.js';
+import { type Align, type Space } from '../../../utils/tokens.js';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type StackElement = 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'nav' | 'ul' | 'ol' | 'li' | 'form' | 'fieldset';
+export interface StackProps extends HTMLAttributes<HTMLElement>, VisibilityProps {
+    /** Space between children, as a step on the theme's space scale. Responsive. */
+    gap?: Responsive<Space>;
+    /** Cross-axis alignment. Responsive. Default `stretch`. */
+    align?: Responsive<Align>;
+    /** Draw a hairline rule between children (the rule sits in the middle of the gap). */
+    dividers?: boolean;
+    /** Render as a different element. Lists get `role="list"` semantics preserved. */
+    as?: StackElement;
+}
+/**
+ * Vertical flow. The most common layout: a column of things with consistent space.
+ *
+ * <Stack gap={{ base: 4, md: 6 }} dividers>…</Stack>
+ */
+export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLElement>>;