@misoto22/folio 0.0.0 → 0.16.0

package/dist/lib/color.js

@@ -0,0 +1,189 @@
+const clamp = (n, min = 0, max = 1) => Math.max(min, Math.min(max, n));
+const wrapHue = (h) => (h % 360 + 360) % 360;
+const multiply = (m, v) => m.map((row) => row.reduce((n, x, i) => n + x * (v[i] ?? 0), 0));
+const linearize = (v) => Math.abs(v) <= 0.04045 ? v / 12.92 : Math.sign(v) * ((Math.abs(v) + 0.055) / 1.055) ** 2.4;
+const encode = (v) => Math.abs(v) <= 31308e-7 ? 12.92 * v : Math.sign(v) * (1.055 * Math.abs(v) ** (1 / 2.4) - 0.055);
+const RGB_XYZ = [
+  [0.4123907993, 0.3575843394, 0.1804807884],
+  [0.2126390059, 0.7151686788, 0.0721923154],
+  [0.0193308187, 0.1191947798, 0.9505321522]
+];
+const P3_XYZ = [
+  [0.4865709486, 0.2656676932, 0.1982172852],
+  [0.2289745641, 0.6917385218, 0.0792869141],
+  [0, 0.0451133819, 1.0439443689]
+];
+const XYZ_RGB = [
+  [3.2409699419, -1.5373831776, -0.4986107603],
+  [-0.9692436363, 1.8759675015, 0.0415550574],
+  [0.0556300797, -0.2039769589, 1.0569715142]
+];
+const XYZ_P3 = [
+  [2.4934969119, -0.9313836179, -0.4027107845],
+  [-0.8294889696, 1.7626640603, 0.0236246858],
+  [0.0358458302, -0.0761723893, 0.956884524]
+];
+const XYZ_LMS = [
+  [0.819022438, 0.3619062601, -0.1288737815],
+  [0.0329836539, 0.9292868616, 0.0361446664],
+  [0.0481771894, 0.2642395318, 0.6335478285]
+];
+const LMS_XYZ = [
+  [1.2268798734, -0.5578149966, 0.2813910502],
+  [-0.0405757626, 1.1122868294, -0.0717110667],
+  [-0.0763729497, -0.421493324, 1.5869240244]
+];
+function rgbToColor(rgb, a = 1, space = "srgb") {
+  const xyz = multiply(space === "p3" ? P3_XYZ : RGB_XYZ, rgb.map(linearize));
+  const [l, m, s] = multiply(XYZ_LMS, xyz).map(Math.cbrt);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const c = Math.hypot(A, B);
+  const grey = c < 1e-7;
+  return {
+    l: clamp(L),
+    c: grey ? 0 : c,
+    h: grey ? 0 : wrapHue(Math.atan2(B, A) * 180 / Math.PI),
+    a: clamp(a)
+  };
+}
+function colorToRgb(color, space = "srgb") {
+  const a = color.c * Math.cos(color.h * Math.PI / 180);
+  const b = color.c * Math.sin(color.h * Math.PI / 180);
+  const lms = [
+    (color.l + 0.3963377774 * a + 0.2158037573 * b) ** 3,
+    (color.l - 0.1055613458 * a - 0.0638541728 * b) ** 3,
+    (color.l - 0.0894841775 * a - 1.291485548 * b) ** 3
+  ];
+  return multiply(space === "p3" ? XYZ_P3 : XYZ_RGB, multiply(LMS_XYZ, lms)).map(encode);
+}
+function inGamut(color, space = "srgb") {
+  return colorToRgb(color, space).every((n) => n >= -1e-5 && n <= 1.00001);
+}
+function fitGamut(color, space = "srgb") {
+  if (inGamut(color, space)) return color;
+  let lo = 0;
+  let hi = color.c;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    if (inGamut({ ...color, c: mid }, space)) lo = mid;
+    else hi = mid;
+  }
+  return { ...color, c: lo };
+}
+function maxChroma(l, h, space = "srgb") {
+  if (l <= 0 || l >= 1) return 0;
+  return fitGamut({ l, c: 0.5, h, a: 1 }, space).c;
+}
+function colorFormat(value) {
+  const text = value.trim();
+  if (/^oklch\(/i.test(text)) return "oklch";
+  if (/^color\(display-p3\s/i.test(text)) return "p3";
+  return "hex";
+}
+const round = (v, digits = 4) => Number(v.toFixed(digits));
+function formatColor(color, format) {
+  const alpha = color.a < 1 ? ` / ${round(color.a)}` : "";
+  if (format === "oklch") {
+    return `oklch(${round(color.l)} ${round(color.c)} ${round(color.h, 2)}${alpha})`;
+  }
+  const space = format === "p3" ? "p3" : "srgb";
+  const rgb = colorToRgb(fitGamut(color, space), space);
+  if (format === "p3") {
+    return `color(display-p3 ${rgb.map((n) => round(clamp(n), 5)).join(" ")}${alpha})`;
+  }
+  const bytes = rgb.map((n) => Math.round(clamp(n) * 255));
+  if (color.a < 1) bytes.push(Math.round(color.a * 255));
+  return `#${bytes.map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+}
+const NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?(%|deg|grad|rad|turn)?$/i;
+function number(value, percentScale = 1, hue = false) {
+  const match = NUMBER.exec(value);
+  if (!match) return null;
+  const n = parseFloat(value);
+  if (!Number.isFinite(n)) return null;
+  const unit = match[1]?.toLowerCase();
+  if (hue) {
+    if (unit === "rad") return n * 180 / Math.PI;
+    if (unit === "turn") return n * 360;
+    if (unit === "grad") return n * 0.9;
+    return !unit || unit === "deg" ? n : null;
+  }
+  if (unit === "%") return n * percentScale / 100;
+  return unit ? null : n;
+}
+function parseColor(value) {
+  const text = value.trim().toLowerCase();
+  if (text === "transparent") return { l: 0, c: 0, h: 0, a: 0 };
+  if (/^#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.test(text)) {
+    const short = text.slice(1);
+    const hex = short.length <= 4 ? [...short].map((c) => c + c).join("") : short;
+    const bytes = (hex.match(/../g) ?? []).map((c) => parseInt(c, 16) / 255);
+    return rgbToColor(bytes.slice(0, 3), bytes[3] ?? 1);
+  }
+  const match = /^(oklch|rgb|rgba|hsl|hsla|color)\(([^()]*)\)$/.exec(text);
+  if (!match) return null;
+  const kind = match[1] ?? "";
+  let body = (match[2] ?? "").trim();
+  const p3 = kind === "color";
+  if (p3) {
+    if (!body.startsWith("display-p3 ")) return null;
+    body = body.slice(11).trim();
+  }
+  const legacy = body.includes(",");
+  if (legacy && (p3 || kind === "oklch" || body.includes("/"))) return null;
+  const parts = legacy ? body.split(",").map((x) => x.trim()) : body.split(/\s*\/\s*/);
+  if (!legacy && parts.length > 2) return null;
+  const channels = legacy ? parts.slice(0, 3) : (parts[0] ?? "").split(/\s+/);
+  if (channels.length !== 3) return null;
+  if (legacy && parts.length !== 3 && parts.length !== 4) return null;
+  if (legacy && kind.startsWith("rgb") && channels.some((c) => c.endsWith("%")) && !channels.every((c) => c.endsWith("%"))) {
+    return null;
+  }
+  const alphaText = legacy ? parts[3] : parts[1];
+  const alpha = alphaText === void 0 ? 1 : number(alphaText);
+  if (alpha === null) return null;
+  if (kind === "oklch") {
+    const l = number(channels[0] ?? "");
+    const c = number(channels[1] ?? "", 0.4);
+    const h = number(channels[2] ?? "", 1, true);
+    if (l === null || c === null || h === null) return null;
+    return { l: clamp(l), c: Math.max(0, c), h: wrapHue(h), a: clamp(alpha) };
+  }
+  if (kind.startsWith("hsl")) {
+    const h = number(channels[0] ?? "", 1, true);
+    const s = number(channels[1] ?? "");
+    const l = number(channels[2] ?? "");
+    if (h === null || s === null || l === null) return null;
+    if (!channels[1]?.endsWith("%") || !channels[2]?.endsWith("%")) return null;
+    const sat = clamp(s);
+    const light = clamp(l);
+    const amount = sat * Math.min(light, 1 - light);
+    const channel = (n) => {
+      const k = (n + wrapHue(h) / 30) % 12;
+      return light - amount * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+    };
+    return rgbToColor([channel(0), channel(8), channel(4)], alpha);
+  }
+  const values = channels.map((c) => number(c, p3 ? 1 : 255));
+  if (values.some((n) => n === null)) return null;
+  return rgbToColor(
+    values.map((n) => p3 ? n ?? 0 : clamp((n ?? 0) / 255)),
+    alpha,
+    p3 ? "p3" : "srgb"
+  );
+}
+export {
+  clamp,
+  colorFormat,
+  colorToRgb,
+  fitGamut,
+  formatColor,
+  inGamut,
+  maxChroma,
+  parseColor,
+  rgbToColor,
+  wrapHue
+};
+//# sourceMappingURL=color.js.map

package/dist/lib/color.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/color.ts"],"sourcesContent":["/**\n * CSS colour maths, with no dependency and no DOM.\n *\n * Adapted from DialKit (https://github.com/joshpuckett/dialkit), MIT licensed:\n *\n *   Copyright (c) 2026 Josh Puckett\n *\n *   Permission is hereby granted, free of charge, to any person obtaining a\n *   copy of this software and associated documentation files (the \"Software\"),\n *   to deal in the Software without restriction, including without limitation\n *   the rights to use, copy, modify, merge, publish, distribute, sublicense,\n *   and/or sell copies of the Software, and to permit persons to whom the\n *   Software is furnished to do so, subject to the following conditions:\n *\n *   The above copyright notice and this permission notice shall be included in\n *   all copies or substantial portions of the Software.\n *\n * The working space is OKLCH, and that is the substantive choice here rather\n * than an implementation detail. A picker built on HSV hands a reader two\n * colours at the same \"lightness\" where one of them is visibly darker, because\n * HSV's lightness is a property of the numbers rather than of the eye. Every\n * decision in `ColorPicker` — where the handle sits, what the hue strip looks\n * like at this lightness, which colours are reachable at all — depends on a\n * space that is perceptually uniform, and OKLCH is the one CSS ships.\n *\n * The matrices are the CSS Color 4 reference implementation's, D65.\n * https://www.w3.org/TR/css-color-4/#color-conversion-code\n */\n\n/** A colour in OKLCH: lightness 0–1, chroma, hue in degrees, alpha 0–1. */\nexport interface Color {\n  l: number\n  c: number\n  h: number\n  a: number\n}\n\n/** The notations this module reads and writes. */\nexport type ColorFormat = 'hex' | 'oklch' | 'p3'\n\n/** The two RGB gamuts a colour can be fitted to. */\nexport type ColorSpace = 'srgb' | 'p3'\n\ntype Triple = [number, number, number]\n\nexport const clamp = (n: number, min = 0, max = 1) => Math.max(min, Math.min(max, n))\n\nexport const wrapHue = (h: number) => ((h % 360) + 360) % 360\n\nconst multiply = (m: number[][], v: Triple): Triple =>\n  m.map((row) => row.reduce((n, x, i) => n + x * (v[i] ?? 0), 0)) as Triple\n\n/** sRGB transfer function, undone. Signed, so an out-of-gamut channel survives. */\nconst linearize = (v: number) =>\n  Math.abs(v) <= 0.04045 ? v / 12.92 : Math.sign(v) * ((Math.abs(v) + 0.055) / 1.055) ** 2.4\n\nconst encode = (v: number) =>\n  Math.abs(v) <= 0.0031308 ? 12.92 * v : Math.sign(v) * (1.055 * Math.abs(v) ** (1 / 2.4) - 0.055)\n\nconst RGB_XYZ = [\n  [0.4123907993, 0.3575843394, 0.1804807884],\n  [0.2126390059, 0.7151686788, 0.0721923154],\n  [0.0193308187, 0.1191947798, 0.9505321522],\n]\nconst P3_XYZ = [\n  [0.4865709486, 0.2656676932, 0.1982172852],\n  [0.2289745641, 0.6917385218, 0.0792869141],\n  [0, 0.0451133819, 1.0439443689],\n]\nconst XYZ_RGB = [\n  [3.2409699419, -1.5373831776, -0.4986107603],\n  [-0.9692436363, 1.8759675015, 0.0415550574],\n  [0.0556300797, -0.2039769589, 1.0569715142],\n]\nconst XYZ_P3 = [\n  [2.4934969119, -0.9313836179, -0.4027107845],\n  [-0.8294889696, 1.7626640603, 0.0236246858],\n  [0.0358458302, -0.0761723893, 0.956884524],\n]\nconst XYZ_LMS = [\n  [0.819022438, 0.3619062601, -0.1288737815],\n  [0.0329836539, 0.9292868616, 0.0361446664],\n  [0.0481771894, 0.2642395318, 0.6335478285],\n]\nconst LMS_XYZ = [\n  [1.2268798734, -0.5578149966, 0.2813910502],\n  [-0.0405757626, 1.1122868294, -0.0717110667],\n  [-0.0763729497, -0.421493324, 1.5869240244],\n]\n\n/** Gamma-encoded RGB in 0–1 to OKLCH. */\nexport function rgbToColor(rgb: Triple, a = 1, space: ColorSpace = 'srgb'): Color {\n  const xyz = multiply(space === 'p3' ? P3_XYZ : RGB_XYZ, rgb.map(linearize) as Triple)\n  const [l, m, s] = multiply(XYZ_LMS, xyz).map(Math.cbrt) as Triple\n  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s\n  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s\n  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s\n  const c = Math.hypot(A, B)\n  // Below the threshold the hue is the angle of rounding error, not a hue. Left\n  // in, a slider dragged to pure white would spin the strip through 360°.\n  const grey = c < 1e-7\n  return {\n    l: clamp(L),\n    c: grey ? 0 : c,\n    h: grey ? 0 : wrapHue((Math.atan2(B, A) * 180) / Math.PI),\n    a: clamp(a),\n  }\n}\n\n/** OKLCH to gamma-encoded RGB in 0–1. May fall outside it — see `fitGamut`. */\nexport function colorToRgb(color: Color, space: ColorSpace = 'srgb'): Triple {\n  const a = color.c * Math.cos((color.h * Math.PI) / 180)\n  const b = color.c * Math.sin((color.h * Math.PI) / 180)\n  const lms: Triple = [\n    (color.l + 0.3963377774 * a + 0.2158037573 * b) ** 3,\n    (color.l - 0.1055613458 * a - 0.0638541728 * b) ** 3,\n    (color.l - 0.0894841775 * a - 1.291485548 * b) ** 3,\n  ]\n  return multiply(space === 'p3' ? XYZ_P3 : XYZ_RGB, multiply(LMS_XYZ, lms)).map(encode) as Triple\n}\n\nexport function inGamut(color: Color, space: ColorSpace = 'srgb'): boolean {\n  return colorToRgb(color, space).every((n) => n >= -0.00001 && n <= 1.00001)\n}\n\n/**\n * Brings a colour inside a gamut by giving up CHROMA, and nothing else.\n *\n * The naive fix is to clip each channel at 0 and 1, which changes the hue and\n * the lightness together — a vivid blue clipped that way comes back purple and\n * darker. Bisecting on chroma keeps both, so what a reader loses is only the\n * saturation the display could never have shown them.\n */\nexport function fitGamut(color: Color, space: ColorSpace = 'srgb'): Color {\n  if (inGamut(color, space)) return color\n  let lo = 0\n  let hi = color.c\n  // Twenty halvings of a chroma under 0.5 lands well inside a 24-bit step.\n  for (let i = 0; i < 20; i++) {\n    const mid = (lo + hi) / 2\n    if (inGamut({ ...color, c: mid }, space)) lo = mid\n    else hi = mid\n  }\n  return { ...color, c: lo }\n}\n\n/** The most chroma a gamut holds at this lightness and hue — the plane's edge. */\nexport function maxChroma(l: number, h: number, space: ColorSpace = 'srgb'): number {\n  if (l <= 0 || l >= 1) return 0\n  return fitGamut({ l, c: 0.5, h, a: 1 }, space).c\n}\n\n/** Which notation a string is written in. Anything unrecognised reads as hex. */\nexport function colorFormat(value: string): ColorFormat {\n  const text = value.trim()\n  if (/^oklch\\(/i.test(text)) return 'oklch'\n  if (/^color\\(display-p3\\s/i.test(text)) return 'p3'\n  return 'hex'\n}\n\nconst round = (v: number, digits = 4) => Number(v.toFixed(digits))\n\n/**\n * A colour as a CSS string.\n *\n * Hex and Display P3 are bounded output spaces, so the colour is fitted on the\n * way out; OKLCH is not, and writing an out-of-gamut OKLCH is legitimate — the\n * browser fits it to whatever the display actually has.\n */\nexport function formatColor(color: Color, format: ColorFormat): string {\n  const alpha = color.a < 1 ? ` / ${round(color.a)}` : ''\n  if (format === 'oklch') {\n    return `oklch(${round(color.l)} ${round(color.c)} ${round(color.h, 2)}${alpha})`\n  }\n  const space: ColorSpace = format === 'p3' ? 'p3' : 'srgb'\n  const rgb = colorToRgb(fitGamut(color, space), space)\n  if (format === 'p3') {\n    return `color(display-p3 ${rgb.map((n) => round(clamp(n), 5)).join(' ')}${alpha})`\n  }\n  const bytes = rgb.map((n) => Math.round(clamp(n) * 255))\n  if (color.a < 1) bytes.push(Math.round(color.a * 255))\n  return `#${bytes.map((n) => n.toString(16).padStart(2, '0')).join('')}`\n}\n\nconst NUMBER = /^[+-]?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[+-]?\\d+)?(%|deg|grad|rad|turn)?$/i\n\n/** One CSS numeric token, in the unit its channel allows. */\nfunction number(value: string, percentScale = 1, hue = false): number | null {\n  const match = NUMBER.exec(value)\n  if (!match) return null\n  const n = parseFloat(value)\n  if (!Number.isFinite(n)) return null\n  const unit = match[1]?.toLowerCase()\n  if (hue) {\n    if (unit === 'rad') return (n * 180) / Math.PI\n    if (unit === 'turn') return n * 360\n    if (unit === 'grad') return n * 0.9\n    return !unit || unit === 'deg' ? n : null\n  }\n  if (unit === '%') return (n * percentScale) / 100\n  return unit ? null : n\n}\n\n/**\n * An absolute CSS colour as OKLCH, or `null` when the string is not one.\n *\n * Hex, `rgb()`, `hsl()`, `oklch()` and `color(display-p3 …)`, in both the\n * comma and the space syntax. Named colours are deliberately absent: resolving\n * them needs a table of a hundred and forty-eight entries or a DOM, and a\n * picker that accepts \"rebeccapurple\" but not \"papayawhip\" is worse than one\n * that accepts neither.\n */\nexport function parseColor(value: string): Color | null {\n  const text = value.trim().toLowerCase()\n  if (text === 'transparent') return { l: 0, c: 0, h: 0, a: 0 }\n\n  if (/^#(?:[\\da-f]{3,4}|[\\da-f]{6}|[\\da-f]{8})$/.test(text)) {\n    const short = text.slice(1)\n    const hex = short.length <= 4 ? [...short].map((c) => c + c).join('') : short\n    const bytes = (hex.match(/../g) ?? []).map((c) => parseInt(c, 16) / 255)\n    return rgbToColor(bytes.slice(0, 3) as Triple, bytes[3] ?? 1)\n  }\n\n  const match = /^(oklch|rgb|rgba|hsl|hsla|color)\\(([^()]*)\\)$/.exec(text)\n  if (!match) return null\n  const kind = match[1] ?? ''\n  let body = (match[2] ?? '').trim()\n\n  const p3 = kind === 'color'\n  if (p3) {\n    if (!body.startsWith('display-p3 ')) return null\n    body = body.slice(11).trim()\n  }\n\n  // The comma syntax is the legacy one, and it never applied to `oklch()` or\n  // `color()`; mixing it with the modern `/` alpha is not a colour either.\n  const legacy = body.includes(',')\n  if (legacy && (p3 || kind === 'oklch' || body.includes('/'))) return null\n\n  const parts = legacy ? body.split(',').map((x) => x.trim()) : body.split(/\\s*\\/\\s*/)\n  if (!legacy && parts.length > 2) return null\n  const channels = legacy ? parts.slice(0, 3) : (parts[0] ?? '').split(/\\s+/)\n  if (channels.length !== 3) return null\n  if (legacy && parts.length !== 3 && parts.length !== 4) return null\n  // Legacy rgb() is all percentages or all numbers, never a mixture.\n  if (\n    legacy &&\n    kind.startsWith('rgb') &&\n    channels.some((c) => c.endsWith('%')) &&\n    !channels.every((c) => c.endsWith('%'))\n  ) {\n    return null\n  }\n\n  const alphaText = legacy ? parts[3] : parts[1]\n  const alpha = alphaText === undefined ? 1 : number(alphaText)\n  if (alpha === null) return null\n\n  if (kind === 'oklch') {\n    const l = number(channels[0] ?? '')\n    // 100% chroma is 0.4 by the specification, not 1.\n    const c = number(channels[1] ?? '', 0.4)\n    const h = number(channels[2] ?? '', 1, true)\n    if (l === null || c === null || h === null) return null\n    return { l: clamp(l), c: Math.max(0, c), h: wrapHue(h), a: clamp(alpha) }\n  }\n\n  if (kind.startsWith('hsl')) {\n    const h = number(channels[0] ?? '', 1, true)\n    const s = number(channels[1] ?? '')\n    const l = number(channels[2] ?? '')\n    if (h === null || s === null || l === null) return null\n    if (!channels[1]?.endsWith('%') || !channels[2]?.endsWith('%')) return null\n    const sat = clamp(s)\n    const light = clamp(l)\n    const amount = sat * Math.min(light, 1 - light)\n    const channel = (n: number) => {\n      const k = (n + wrapHue(h) / 30) % 12\n      return light - amount * Math.max(-1, Math.min(k - 3, 9 - k, 1))\n    }\n    return rgbToColor([channel(0), channel(8), channel(4)], alpha)\n  }\n\n  const values = channels.map((c) => number(c, p3 ? 1 : 255))\n  if (values.some((n) => n === null)) return null\n  return rgbToColor(\n    values.map((n) => (p3 ? (n ?? 0) : clamp((n ?? 0) / 255))) as Triple,\n    alpha,\n    p3 ? 'p3' : 'srgb',\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/lib/control.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The one text-control look, shared by Input, Textarea and Select.
+ *
+ * These three had each carried their own copy of the class string. Three copies
+ * drift: the padding stayed in step, but the focus treatment and the disabled
+ * opacity did not, and a form ended up with a select that dimmed differently
+ * from the input beside it. One export, three consumers.
+ *
+ * The padding comes from the density tokens, so a subtree marked
+ * `data-density="compact"` tightens its fields along with its buttons.
+ * Mobile text stays at 16px so iOS does not zoom the viewport on focus.
+ *
+ * The border COLOUR is deliberately not in here. It is toggled per control so
+ * the invalid state reliably wins over the resting border rather than relying
+ * on which utility Tailwind happened to emit last.
+ */
+declare const CONTROL_BASE = "min-h-(--control-h-md) w-full rounded-(--radius) border bg-(--paper) px-(--field-px) py-(--field-py) text-base md:text-sm text-(--ink) transition-colors duration-(--duration-fast) placeholder:text-(--ink-3-aa) hover:border-(--rule-hard) focus:border-(--ink) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none";
+/** Resting vs invalid border, named so a call site never writes the colour. */
+declare const CONTROL_BORDER: {
+    readonly resting: "border-(--rule-2)";
+    readonly invalid: "border-(--danger)";
+};
+/**
+ * Reads the invalid state from either spelling.
+ *
+ * `invalid` is the ergonomic prop; `aria-invalid` is what a form library sets.
+ * A control that honours only one of them silently loses the error styling for
+ * whichever half of the ecosystem it did not anticipate.
+ */
+declare function isInvalid(invalid?: boolean, ariaInvalid?: boolean | 'true' | 'false' | string): boolean;
+
+export { CONTROL_BASE, CONTROL_BORDER, isInvalid };

package/dist/lib/control.js

@@ -0,0 +1,14 @@
+const CONTROL_BASE = "min-h-(--control-h-md) w-full rounded-(--radius) border bg-(--paper) px-(--field-px) py-(--field-py) text-base md:text-sm text-(--ink) transition-colors duration-(--duration-fast) placeholder:text-(--ink-3-aa) hover:border-(--rule-hard) focus:border-(--ink) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none";
+const CONTROL_BORDER = {
+  resting: "border-(--rule-2)",
+  invalid: "border-(--danger)"
+};
+function isInvalid(invalid, ariaInvalid) {
+  return invalid === true || ariaInvalid === true || ariaInvalid === "true";
+}
+export {
+  CONTROL_BASE,
+  CONTROL_BORDER,
+  isInvalid
+};
+//# sourceMappingURL=control.js.map

package/dist/lib/control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/control.ts"],"sourcesContent":["/**\n * The one text-control look, shared by Input, Textarea and Select.\n *\n * These three had each carried their own copy of the class string. Three copies\n * drift: the padding stayed in step, but the focus treatment and the disabled\n * opacity did not, and a form ended up with a select that dimmed differently\n * from the input beside it. One export, three consumers.\n *\n * The padding comes from the density tokens, so a subtree marked\n * `data-density=\"compact\"` tightens its fields along with its buttons.\n * Mobile text stays at 16px so iOS does not zoom the viewport on focus.\n *\n * The border COLOUR is deliberately not in here. It is toggled per control so\n * the invalid state reliably wins over the resting border rather than relying\n * on which utility Tailwind happened to emit last.\n */\nexport const CONTROL_BASE =\n  'min-h-(--control-h-md) w-full rounded-(--radius) border bg-(--paper) px-(--field-px) py-(--field-py) text-base md:text-sm text-(--ink) transition-colors duration-(--duration-fast) placeholder:text-(--ink-3-aa) hover:border-(--rule-hard) focus:border-(--ink) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/** Resting vs invalid border, named so a call site never writes the colour. */\nexport const CONTROL_BORDER = {\n  resting: 'border-(--rule-2)',\n  invalid: 'border-(--danger)',\n} as const\n\n/**\n * Reads the invalid state from either spelling.\n *\n * `invalid` is the ergonomic prop; `aria-invalid` is what a form library sets.\n * A control that honours only one of them silently loses the error styling for\n * whichever half of the ecosystem it did not anticipate.\n */\nexport function isInvalid(invalid?: boolean, ariaInvalid?: boolean | 'true' | 'false' | string): boolean {\n  return invalid === true || ariaInvalid === true || ariaInvalid === 'true'\n}\n"],"mappings":"AAgBO,MAAM,eACX;AAGK,MAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,EACT,SAAS;AACX;AASO,SAAS,UAAU,SAAmB,aAA4D;AACvG,SAAO,YAAY,QAAQ,gBAAgB,QAAQ,gBAAgB;AACrE;","names":[]}

package/dist/lib/index.d.ts

@@ -0,0 +1,4 @@
+export { cn } from './cn.js';
+export { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './control.js';
+export { IndicatorStyle, useSelectionIndicator } from './useSelectionIndicator.js';
+import 'clsx';

package/dist/lib/index.js

@@ -0,0 +1,11 @@
+import { cn } from "./cn.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "./control.js";
+import { useSelectionIndicator } from "./useSelectionIndicator.js";
+export {
+  CONTROL_BASE,
+  CONTROL_BORDER,
+  cn,
+  isInvalid,
+  useSelectionIndicator
+};
+//# sourceMappingURL=index.js.map

package/dist/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/index.ts"],"sourcesContent":["export { cn } from './cn'\nexport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from './control'\nexport { useSelectionIndicator } from './useSelectionIndicator'\nexport type { IndicatorStyle } from './useSelectionIndicator'\n"],"mappings":"AAAA,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AACxD,SAAS,6BAA6B;","names":[]}

package/dist/lib/numeric.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The three things a numeric control has to do to a typed number, in one place.
+ *
+ * `Slider` and `NumberField` both take a number from a keyboard and both have
+ * to reconcile it with `min`, `max` and `step`. Written twice they drift, and
+ * they drift in the direction nobody tests: a slider that snaps 0.1 + 0.2 to
+ * `0.30000000000000004` and a field beside it that prints `0.3`.
+ *
+ * The step base is `min`, not zero, because that is what the HTML step
+ * algorithm uses — a range from 5 to 100 stepping by 10 lands on 15, not on 10.
+ */
+/**
+ * Decimal places implied by a step.
+ *
+ * Snapping is arithmetic on binary floats, so a value that should be exactly
+ * one step from the last one usually is not. Rounding the result to the step's
+ * own precision is what stops that reaching a readout — and the step's own
+ * precision is the most a caller can have meant.
+ */
+declare function decimalsForStep(step: number): number;
+/** Rounds to the nearest step from `min`, at the step's own precision. */
+declare function snapToStep(value: number, step: number, min?: number): number;
+/** Holds a value inside a range. An inverted range yields its own lower bound. */
+declare function clampToRange(value: number, min: number, max: number): number;
+/**
+ * A typed string as a number, or `null` when it is not one yet.
+ *
+ * `null` rather than `NaN` because the caller has to tell "not a number" from
+ * "not finished being typed" and act the same way on both: leave the committed
+ * value alone. `Number('')` is `0`, which is the trap this exists for — an
+ * emptied box would otherwise commit zero on every keystroke that cleared it.
+ */
+declare function parseNumber(text: string): number | null;
+
+export { clampToRange, decimalsForStep, parseNumber, snapToStep };

package/dist/lib/numeric.js

@@ -0,0 +1,29 @@
+function decimalsForStep(step) {
+  if (!Number.isFinite(step) || step <= 0) return 0;
+  const text = String(step);
+  const exponential = /e-(\d+)$/i.exec(text);
+  if (exponential) return Number(exponential[1]);
+  return text.split(".")[1]?.length ?? 0;
+}
+function snapToStep(value, step, min = 0) {
+  if (!Number.isFinite(step) || step <= 0) return value;
+  const base = Number.isFinite(min) ? min : 0;
+  const snapped = base + Math.round((value - base) / step) * step;
+  return Number(snapped.toFixed(decimalsForStep(step)));
+}
+function clampToRange(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function parseNumber(text) {
+  const trimmed = text.trim();
+  if (trimmed === "") return null;
+  const value = Number(trimmed);
+  return Number.isFinite(value) ? value : null;
+}
+export {
+  clampToRange,
+  decimalsForStep,
+  parseNumber,
+  snapToStep
+};
+//# sourceMappingURL=numeric.js.map

package/dist/lib/numeric.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/numeric.ts"],"sourcesContent":["/**\n * The three things a numeric control has to do to a typed number, in one place.\n *\n * `Slider` and `NumberField` both take a number from a keyboard and both have\n * to reconcile it with `min`, `max` and `step`. Written twice they drift, and\n * they drift in the direction nobody tests: a slider that snaps 0.1 + 0.2 to\n * `0.30000000000000004` and a field beside it that prints `0.3`.\n *\n * The step base is `min`, not zero, because that is what the HTML step\n * algorithm uses — a range from 5 to 100 stepping by 10 lands on 15, not on 10.\n */\n\n/**\n * Decimal places implied by a step.\n *\n * Snapping is arithmetic on binary floats, so a value that should be exactly\n * one step from the last one usually is not. Rounding the result to the step's\n * own precision is what stops that reaching a readout — and the step's own\n * precision is the most a caller can have meant.\n */\nexport function decimalsForStep(step: number): number {\n  if (!Number.isFinite(step) || step <= 0) return 0\n  const text = String(step)\n  // Exponential notation carries its precision in the exponent, and `1e-7` has\n  // no '.' to split on — `String(0.0000001)` is exactly that.\n  const exponential = /e-(\\d+)$/i.exec(text)\n  if (exponential) return Number(exponential[1])\n  return text.split('.')[1]?.length ?? 0\n}\n\n/** Rounds to the nearest step from `min`, at the step's own precision. */\nexport function snapToStep(value: number, step: number, min = 0): number {\n  if (!Number.isFinite(step) || step <= 0) return value\n  const base = Number.isFinite(min) ? min : 0\n  const snapped = base + Math.round((value - base) / step) * step\n  return Number(snapped.toFixed(decimalsForStep(step)))\n}\n\n/** Holds a value inside a range. An inverted range yields its own lower bound. */\nexport function clampToRange(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\n/**\n * A typed string as a number, or `null` when it is not one yet.\n *\n * `null` rather than `NaN` because the caller has to tell \"not a number\" from\n * \"not finished being typed\" and act the same way on both: leave the committed\n * value alone. `Number('')` is `0`, which is the trap this exists for — an\n * emptied box would otherwise commit zero on every keystroke that cleared it.\n */\nexport function parseNumber(text: string): number | null {\n  const trimmed = text.trim()\n  if (trimmed === '') return null\n  const value = Number(trimmed)\n  return Number.isFinite(value) ? value : null\n}\n"],"mappings":"AAoBO,SAAS,gBAAgB,MAAsB;AACpD,MAAI,CAAC,OAAO,SAAS,IAAI,KAAK,QAAQ,EAAG,QAAO;AAChD,QAAM,OAAO,OAAO,IAAI;AAGxB,QAAM,cAAc,YAAY,KAAK,IAAI;AACzC,MAAI,YAAa,QAAO,OAAO,YAAY,CAAC,CAAC;AAC7C,SAAO,KAAK,MAAM,GAAG,EAAE,CAAC,GAAG,UAAU;AACvC;AAGO,SAAS,WAAW,OAAe,MAAc,MAAM,GAAW;AACvE,MAAI,CAAC,OAAO,SAAS,IAAI,KAAK,QAAQ,EAAG,QAAO;AAChD,QAAM,OAAO,OAAO,SAAS,GAAG,IAAI,MAAM;AAC1C,QAAM,UAAU,OAAO,KAAK,OAAO,QAAQ,QAAQ,IAAI,IAAI;AAC3D,SAAO,OAAO,QAAQ,QAAQ,gBAAgB,IAAI,CAAC,CAAC;AACtD;AAGO,SAAS,aAAa,OAAe,KAAa,KAAqB;AAC5E,SAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAUO,SAAS,YAAY,MAA6B;AACvD,QAAM,UAAU,KAAK,KAAK;AAC1B,MAAI,YAAY,GAAI,QAAO;AAC3B,QAAM,QAAQ,OAAO,OAAO;AAC5B,SAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;AAC1C;","names":[]}

package/dist/lib/overlay-container.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface OverlayContainerProps {
+    /** The element overlays should render into. `null` restores the default. */
+    container: HTMLElement | null;
+    children: ReactNode;
+}
+/**
+ * Redirects every overlay in the subtree — popover, select, menu, tooltip,
+ * dialog, sheet — into a given element instead of `document.body`.
+ *
+ * Two problems, one cause. An overlay portalled to the body is positioned
+ * against the VIEWPORT, so inside a bounded frame (a documentation example, a
+ * device preview, a canvas) it flips and shifts against edges the reader cannot
+ * see, and lands outside the box it belongs to. It also leaves the subtree, so
+ * `dir="rtl"` and `data-density` set on that frame stop reaching it.
+ *
+ * Naming the container fixes both: the panel renders inside the frame,
+ * inherits what the frame declares, and collides with the frame's edges.
+ *
+ * The container must be positioned (`relative` is enough) for the panel to be
+ * placed against it rather than against the nearest positioned ancestor. The
+ * modal surfaces need it for a second reason: they place themselves with
+ * `position: fixed`, which resolves against the VIEWPORT whatever element they
+ * are portalled into, so a named container switches them to `absolute` — and
+ * an unpositioned container would then hand them the wrong box.
+ *
+ * @example
+ * const [frame, setFrame] = useState<HTMLElement | null>(null)
+ * <div ref={setFrame} className="relative" data-density="compact">
+ *   <OverlayContainer container={frame}>{children}</OverlayContainer>
+ * </div>
+ */
+declare function OverlayContainer({ container, children }: OverlayContainerProps): react.JSX.Element;
+/**
+ * The element overlays in this subtree should render into, or `null` for the
+ * document body.
+ *
+ * Every portal in the library reads this. That sentence was false for a
+ * release: `Dialog` and `Sheet` rendered the Radix portal with no container and
+ * never called this hook, and their props derive from `Content`, which has no
+ * `container` — so a caller could not pass one either, and every modal example
+ * on the documentation site escaped the preview card it was drawn in.
+ */
+declare function useOverlayContainer(): HTMLElement | null;
+
+export { OverlayContainer, type OverlayContainerProps, useOverlayContainer };

package/dist/lib/overlay-container.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const OverlayContainerContext = createContext(null);
+function OverlayContainer({ container, children }) {
+  return /* @__PURE__ */ jsx(OverlayContainerContext, { value: container, children });
+}
+function useOverlayContainer() {
+  return useContext(OverlayContainerContext);
+}
+export {
+  OverlayContainer,
+  useOverlayContainer
+};
+//# sourceMappingURL=overlay-container.js.map

package/dist/lib/overlay-container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/overlay-container.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { ReactNode } from 'react'\n\nconst OverlayContainerContext = createContext<HTMLElement | null>(null)\n\nexport interface OverlayContainerProps {\n  /** The element overlays should render into. `null` restores the default. */\n  container: HTMLElement | null\n  children: ReactNode\n}\n\n/**\n * Redirects every overlay in the subtree — popover, select, menu, tooltip,\n * dialog, sheet — into a given element instead of `document.body`.\n *\n * Two problems, one cause. An overlay portalled to the body is positioned\n * against the VIEWPORT, so inside a bounded frame (a documentation example, a\n * device preview, a canvas) it flips and shifts against edges the reader cannot\n * see, and lands outside the box it belongs to. It also leaves the subtree, so\n * `dir=\"rtl\"` and `data-density` set on that frame stop reaching it.\n *\n * Naming the container fixes both: the panel renders inside the frame,\n * inherits what the frame declares, and collides with the frame's edges.\n *\n * The container must be positioned (`relative` is enough) for the panel to be\n * placed against it rather than against the nearest positioned ancestor. The\n * modal surfaces need it for a second reason: they place themselves with\n * `position: fixed`, which resolves against the VIEWPORT whatever element they\n * are portalled into, so a named container switches them to `absolute` — and\n * an unpositioned container would then hand them the wrong box.\n *\n * @example\n * const [frame, setFrame] = useState<HTMLElement | null>(null)\n * <div ref={setFrame} className=\"relative\" data-density=\"compact\">\n *   <OverlayContainer container={frame}>{children}</OverlayContainer>\n * </div>\n */\nexport function OverlayContainer({ container, children }: OverlayContainerProps) {\n  return <OverlayContainerContext value={container}>{children}</OverlayContainerContext>\n}\n\n/**\n * The element overlays in this subtree should render into, or `null` for the\n * document body.\n *\n * Every portal in the library reads this. That sentence was false for a\n * release: `Dialog` and `Sheet` rendered the Radix portal with no container and\n * never called this hook, and their props derive from `Content`, which has no\n * `container` — so a caller could not pass one either, and every modal example\n * on the documentation site escaped the preview card it was drawn in.\n */\nexport function useOverlayContainer(): HTMLElement | null {\n  return useContext(OverlayContainerContext)\n}\n"],"mappings":";AAwCS;AAtCT,SAAS,eAAe,kBAAkB;AAG1C,MAAM,0BAA0B,cAAkC,IAAI;AAkC/D,SAAS,iBAAiB,EAAE,WAAW,SAAS,GAA0B;AAC/E,SAAO,oBAAC,2BAAwB,OAAO,WAAY,UAAS;AAC9D;AAYO,SAAS,sBAA0C;AACxD,SAAO,WAAW,uBAAuB;AAC3C;","names":[]}

package/dist/lib/slot-content.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement, ReactNode } from 'react';
+
+/** Resolve suspended server elements through React's public children API. */
+declare function resolveSlotElement<Props>(element: ReactElement<Props>): ReactElement<Props>;
+/** Replace a host slot's content after resolving its element; retain navigation props. */
+declare function replaceSlotContent<Props>(element: ReactElement<Props>, content: ReactNode): ReactElement<Props>;
+
+export { replaceSlotContent, resolveSlotElement };

package/dist/lib/slot-content.js

@@ -0,0 +1,17 @@
+import { Children, cloneElement, isValidElement } from "react";
+function resolveSlotElement(element) {
+  const children = Children.toArray(element);
+  const resolved = children[0];
+  if (children.length !== 1 || !isValidElement(resolved)) {
+    throw new Error("A slot must resolve to exactly one React element.");
+  }
+  return resolved;
+}
+function replaceSlotContent(element, content) {
+  return cloneElement(resolveSlotElement(element), void 0, content);
+}
+export {
+  replaceSlotContent,
+  resolveSlotElement
+};
+//# sourceMappingURL=slot-content.js.map

package/dist/lib/slot-content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/slot-content.ts"],"sourcesContent":["import { Children, cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react'\n\n/** Resolve suspended server elements through React's public children API. */\nexport function resolveSlotElement<Props>(element: ReactElement<Props>): ReactElement<Props> {\n  const children = Children.toArray(element)\n  const resolved = children[0]\n  if (children.length !== 1 || !isValidElement<Props>(resolved)) {\n    throw new Error('A slot must resolve to exactly one React element.')\n  }\n  return resolved\n}\n\n/** Replace a host slot's content after resolving its element; retain navigation props. */\nexport function replaceSlotContent<Props>(element: ReactElement<Props>, content: ReactNode): ReactElement<Props> {\n  return cloneElement(resolveSlotElement(element), undefined, content)\n}\n"],"mappings":"AAAA,SAAS,UAAU,cAAc,sBAAyD;AAGnF,SAAS,mBAA0B,SAAmD;AAC3F,QAAM,WAAW,SAAS,QAAQ,OAAO;AACzC,QAAM,WAAW,SAAS,CAAC;AAC3B,MAAI,SAAS,WAAW,KAAK,CAAC,eAAsB,QAAQ,GAAG;AAC7D,UAAM,IAAI,MAAM,mDAAmD;AAAA,EACrE;AACA,SAAO;AACT;AAGO,SAAS,mBAA0B,SAA8B,SAAyC;AAC/G,SAAO,aAAa,mBAAmB,OAAO,GAAG,QAAW,OAAO;AACrE;","names":[]}

package/dist/lib/step-rail.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * The list a rail's items sit in.
+ *
+ * One number for the marker, because three rules depend on it: the marker's
+ * own box, where the connector starts, and where it is centred. Written as a
+ * property rather than repeated as a literal so a caller can move all three at
+ * once.
+ */
+declare const STEP_RAIL_LIST_CLASS = "m-0 flex list-none flex-col p-0 [--step-size:2rem]";
+interface StepRailItemProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    /**
+     * `li` inside a real `<ol>`; `div` for a host that carries the list as ARIA
+     * roles so article prose does not restyle it as a bulleted list.
+     */
+    as?: 'li' | 'div';
+    /** What the marker prints: a count, a host counter, or nothing. */
+    marker: ReactNode;
+    /** Classes for the marker, after its resting or filled look. */
+    markerClassName?: string;
+    /** Draws the marker filled. Visual only; the caller decides what it announces. */
+    filled?: boolean;
+    /** The last item draws no connector below its marker. */
+    last: boolean;
+    title: ReactNode;
+    note?: ReactNode;
+    /** Anything that belongs under the note, inside the same column. */
+    children?: ReactNode;
+}
+/**
+ * One stop on a numbered rail: marker, connector, name and note.
+ *
+ * Internal. It is the single rendering shared by the core `Steps` and the
+ * website `StepSequence`, so the two cannot drift apart in geometry or type.
+ * Neither entry point exports it.
+ *
+ * The connector is drawn on the ITEM rather than as a full-height line behind
+ * the markers, so it starts under one and stops above the next — and the last
+ * step has no tail hanging off it.
+ */
+declare function StepRailItem({ as: Item, marker, markerClassName, filled, last, title, note, children, className, ...rest }: StepRailItemProps): react.JSX.Element;
+
+export { STEP_RAIL_LIST_CLASS, StepRailItem, type StepRailItemProps };

package/dist/lib/step-rail.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+const STEP_RAIL_LIST_CLASS = "m-0 flex list-none flex-col p-0 [--step-size:2rem]";
+function StepRailItem({
+  as: Item = "li",
+  marker,
+  markerClassName,
+  filled = false,
+  last,
+  title,
+  note,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(Item, { ...rest, className: cn("relative flex gap-4 pb-7 last:pb-0", className), children: [
+    !last && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "absolute start-[calc(var(--step-size)/2)] top-(--step-size) bottom-0 w-px -translate-x-1/2 bg-(--rule-2) rtl:translate-x-1/2"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "relative z-1 grid size-(--step-size) shrink-0 place-items-center rounded-full border text-[12px] tabular-nums",
+          filled ? "border-(--accent) bg-(--accent) text-(--accent-foreground)" : "border-(--rule-2) bg-(--paper) text-(--ink-3-aa)",
+          markerClassName
+        ),
+        children: marker
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1 pt-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-sans text-[15px] leading-tight text-(--ink)", children: title }),
+      note !== void 0 && note !== null && /* @__PURE__ */ jsx("span", { className: "mono-meta leading-[1.6] text-(--ink-3-aa)", children: note }),
+      children
+    ] })
+  ] });
+}
+export {
+  STEP_RAIL_LIST_CLASS,
+  StepRailItem
+};
+//# sourceMappingURL=step-rail.js.map

package/dist/lib/step-rail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/step-rail.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from './cn'\n\n/**\n * The list a rail's items sit in.\n *\n * One number for the marker, because three rules depend on it: the marker's\n * own box, where the connector starts, and where it is centred. Written as a\n * property rather than repeated as a literal so a caller can move all three at\n * once.\n */\nexport const STEP_RAIL_LIST_CLASS = 'm-0 flex list-none flex-col p-0 [--step-size:2rem]'\n\nexport interface StepRailItemProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {\n  /**\n   * `li` inside a real `<ol>`; `div` for a host that carries the list as ARIA\n   * roles so article prose does not restyle it as a bulleted list.\n   */\n  as?: 'li' | 'div'\n  /** What the marker prints: a count, a host counter, or nothing. */\n  marker: ReactNode\n  /** Classes for the marker, after its resting or filled look. */\n  markerClassName?: string\n  /** Draws the marker filled. Visual only; the caller decides what it announces. */\n  filled?: boolean\n  /** The last item draws no connector below its marker. */\n  last: boolean\n  title: ReactNode\n  note?: ReactNode\n  /** Anything that belongs under the note, inside the same column. */\n  children?: ReactNode\n}\n\n/**\n * One stop on a numbered rail: marker, connector, name and note.\n *\n * Internal. It is the single rendering shared by the core `Steps` and the\n * website `StepSequence`, so the two cannot drift apart in geometry or type.\n * Neither entry point exports it.\n *\n * The connector is drawn on the ITEM rather than as a full-height line behind\n * the markers, so it starts under one and stops above the next — and the last\n * step has no tail hanging off it.\n */\nexport function StepRailItem({\n  as: Item = 'li',\n  marker,\n  markerClassName,\n  filled = false,\n  last,\n  title,\n  note,\n  children,\n  className,\n  ...rest\n}: StepRailItemProps) {\n  return (\n    <Item {...rest} className={cn('relative flex gap-4 pb-7 last:pb-0', className)}>\n      {/* Absolute, so it spans the gap between this marker and the next without\n          taking part in the row's own layout — and simply absent on the last\n          row rather than drawn and then hidden. */}\n      {!last && (\n        <span\n          aria-hidden\n          className=\"absolute start-[calc(var(--step-size)/2)] top-(--step-size) bottom-0 w-px -translate-x-1/2 bg-(--rule-2) rtl:translate-x-1/2\"\n        />\n      )}\n      <span\n        aria-hidden\n        className={cn(\n          'relative z-1 grid size-(--step-size) shrink-0 place-items-center rounded-full border text-[12px] tabular-nums',\n          filled\n            ? 'border-(--accent) bg-(--accent) text-(--accent-foreground)'\n            : 'border-(--rule-2) bg-(--paper) text-(--ink-3-aa)',\n          markerClassName,\n        )}\n      >\n        {marker}\n      </span>\n      <div className=\"flex min-w-0 flex-col gap-1 pt-1\">\n        <span className=\"font-sans text-[15px] leading-tight text-(--ink)\">{title}</span>\n        {note !== undefined && note !== null && (\n          <span className=\"mono-meta leading-[1.6] text-(--ink-3-aa)\">{note}</span>\n        )}\n        {children}\n      </div>\n    </Item>\n  )\n}\n"],"mappings":"AA8DQ,cAiBF,YAjBE;AA7DR,SAAS,UAAU;AAUZ,MAAM,uBAAuB;AAiC7B,SAAS,aAAa;AAAA,EAC3B,IAAI,OAAO;AAAA,EACX;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,SACE,qBAAC,QAAM,GAAG,MAAM,WAAW,GAAG,sCAAsC,SAAS,GAI1E;AAAA,KAAC,QACA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAU;AAAA;AAAA,IACZ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA,SACI,+DACA;AAAA,UACJ;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,qBAAC,SAAI,WAAU,oCACb;AAAA,0BAAC,UAAK,WAAU,oDAAoD,iBAAM;AAAA,MACzE,SAAS,UAAa,SAAS,QAC9B,oBAAC,UAAK,WAAU,6CAA6C,gBAAK;AAAA,MAEnE;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}