@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/input/colorUtils.mjs

@@ -1,56 +1,51 @@
 "use client";
+import { clampUnit as e, hsvToHex as t, parseHexBytes as n, wrapHue as r } from "../../lib/color.mjs";
+import { getArrowIntent as i } from "../../lib/direction.mjs";
+import { getColorName as a } from "./colorName.mjs";
 //#region src/components/input/colorUtils.ts
-var e = "#000000", t = "#ffffff", n = /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i, r = /^#([0-9a-f]{6}|[0-9a-f]{8})$/i, i = /^#?[0-9a-f]{0,8}$/i;
-function a(e, t, n) {
+var o = "#000000", s = "#ffffff", c = /^#([0-9a-f]{6}|[0-9a-f]{8})$/i, l = /^#?[0-9a-f]{0,8}$/i;
+function u(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function o(e) {
-	return Math.round(a(e, 0, 255)).toString(16).padStart(2, "0");
-}
-function s(e) {
-	let t = (e.length <= 4 ? e.split("").map((e) => e + e).join("") : e).toLowerCase();
-	return {
-		rgb: `#${t.slice(0, 6)}`,
-		alpha: t.length === 8 ? parseInt(t.slice(6, 8), 16) : 255
-	};
-}
-function c(e) {
-	let t = n.exec(e.trim());
-	return t ? s(t[1]) : null;
-}
-function l(e) {
-	let t = r.exec(e.trim());
-	return t ? s(t[1]) : null;
-}
-function u(e) {
-	return i.test(e.trim());
-}
-function d(e, t = 255) {
-	let n = Math.round(a(t, 0, 255));
-	return n === 255 ? e : e + o(n);
+function d(e) {
+	return Math.round(u(e, 0, 255)).toString(16).padStart(2, "0");
 }
 function f(e) {
-	let t = c(e);
-	return t ? d(t.rgb, t.alpha) : null;
+	let t = n(e);
+	return t ? {
+		rgb: `#${d(t.r)}${d(t.g)}${d(t.b)}`,
+		alpha: t.alpha
+	} : null;
 }
 function p(e) {
-	return Math.round(a(e, 0, 255) / 255 * 100);
+	return c.test(e.trim()) ? f(e) : null;
 }
 function m(e) {
-	return Math.round(a(e, 0, 100) / 100 * 255);
+	return l.test(e.trim());
 }
-function h(e) {
-	let t = e.endsWith("%"), n = Number(t ? e.slice(0, -1) : e);
-	return Number.isFinite(n) ? a(t ? n / 100 * 255 : n, 0, 255) : null;
+function h(e, t = 255) {
+	let n = Math.round(u(t, 0, 255));
+	return n === 255 ? e : e + d(n);
 }
 function g(e) {
+	let t = f(e);
+	return t ? h(t.rgb, t.alpha) : null;
+}
+function _(e) {
+	return Math.round(u(e, 0, 255) / 255 * 100);
+}
+function v(e) {
+	let t = e.endsWith("%"), n = Number(t ? e.slice(0, -1) : e);
+	return Number.isFinite(n) ? u(t ? n / 100 * 255 : n, 0, 255) : null;
+}
+function y(e) {
 	if (e === void 0) return 1;
 	let t = e.endsWith("%"), n = Number(t ? e.slice(0, -1) : e);
-	return Number.isFinite(n) ? a(t ? n / 100 : n, 0, 1) : null;
+	return Number.isFinite(n) ? u(t ? n / 100 : n, 0, 1) : null;
 }
-var _ = /^rgba?\(\s*([^)]*)\)$/i;
-function v(e) {
-	let t = e.trim(), n = c(t);
+var b = /^rgba?\(\s*([^)]*)\)$/i;
+function x(e) {
+	let t = e.trim(), n = f(t);
 	if (n) {
 		let e = parseInt(n.rgb.slice(1), 16);
 		return {
@@ -60,37 +55,140 @@ function v(e) {
 			a: n.alpha / 255
 		};
 	}
-	let r = _.exec(t);
+	let r = b.exec(t);
 	if (!r) return null;
 	let [i, a] = r[1].split("/"), o = (i ?? "").split(/[\s,]+/).map((e) => e.trim()).filter(Boolean), s = a?.trim();
 	if (s === void 0 && o.length === 4 && (s = o.pop()), o.length !== 3) return null;
-	let [l, u, d] = o.map(h), f = g(s);
-	return l === null || u === null || d === null || f === null ? null : {
-		r: l,
-		g: u,
-		b: d,
-		a: f
+	let [c, l, u] = o.map(v), d = y(s);
+	return c === null || l === null || u === null || d === null ? null : {
+		r: c,
+		g: l,
+		b: u,
+		a: d
 	};
 }
-function y(e) {
+function S(e) {
 	let t = e / 255;
 	return t <= .04045 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
 }
-function b(e) {
-	let t = v(e);
-	return t ? .2126 * y(t.r) + .7152 * y(t.g) + .0722 * y(t.b) : null;
+function C(e) {
+	let t = x(e);
+	return t ? .2126 * S(t.r) + .7152 * S(t.g) + .0722 * S(t.b) : null;
 }
-function x(n) {
-	let r = b(n);
-	return r === null || (r + .05) / .05 >= 1.05 / (r + .05) ? {
-		glyph: e,
-		halo: t
+function w(e) {
+	let t = C(e);
+	return t === null || (t + .05) / .05 >= 1.05 / (t + .05) ? {
+		glyph: o,
+		halo: s
 	} : {
-		glyph: t,
-		halo: e
+		glyph: s,
+		halo: o
 	};
 }
+function T(e) {
+	return Number.isFinite(e) && e >= 0 && e <= 360 ? e : r(e);
+}
+function E(t) {
+	return {
+		h: T(t.h),
+		s: e(t.s, 0),
+		v: e(t.v, 0),
+		a: e(t.a, 1)
+	};
+}
+function D(e) {
+	return Math.round(e * 100);
+}
+function O(e) {
+	return `${Math.round(e * 1e4) / 100}%`;
+}
+function k(e, t) {
+	return e.h === t.h && e.s === t.s && e.v === t.v && (e.a ?? 1) === (t.a ?? 1);
+}
+function A(e, t, n, r, a) {
+	if (t.altKey || t.ctrlKey || t.metaKey) return null;
+	let o = t.shiftKey ? 10 : 1, s;
+	switch (e) {
+		case "ArrowUp":
+			s = r + o;
+			break;
+		case "ArrowDown":
+			s = r - o;
+			break;
+		case "ArrowRight":
+		case "ArrowLeft":
+			s = r + (i(e, {
+				orientation: "horizontal",
+				dir: n
+			}) === "next" ? o : -o);
+			break;
+		case "PageUp":
+			s = r + 10;
+			break;
+		case "PageDown":
+			s = r - 10;
+			break;
+		case "Home":
+			s = 0;
+			break;
+		case "End":
+			s = a;
+			break;
+		default: return null;
+	}
+	return Math.min(a, Math.max(0, s));
+}
+var j = (e) => e === "vertical" ? "to top" : "to right";
+function M(e) {
+	return `linear-gradient(to top, #000000, transparent), linear-gradient(to right, #ffffff, ${t({
+		h: e,
+		s: 1,
+		v: 1
+	})})`;
+}
+var N = "#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000";
+function P(e, n, r) {
+	let i = j(r);
+	return e === "hue" ? `linear-gradient(${i}, ${N})` : e === "saturation" ? `linear-gradient(${i}, ${t({
+		h: n.h,
+		s: 0,
+		v: n.v
+	})}, ${t({
+		h: n.h,
+		s: 1,
+		v: n.v
+	})})` : `linear-gradient(${i}, #000000, ${t({
+		h: n.h,
+		s: n.s,
+		v: 1
+	})})`;
+}
+function F(e, n, r) {
+	let i = t({
+		h: e.h,
+		s: e.s,
+		v: e.v
+	}), a = j(r);
+	return n ? `linear-gradient(${a}, ${i}, transparent)` : `linear-gradient(${a}, transparent, ${i})`;
+}
+function I(e, t, n) {
+	if (n.valueText) return n.valueText(e, t);
+	let r = `${n.saturation} ${D(e.s)}%`, i = `${n.brightness} ${D(e.v)}%`, o = t === "saturation" ? `${r}, ${i}` : `${i}, ${r}`, s = (n.colorName ?? a)(e);
+	return s ? `${o}, ${s}` : o;
+}
+function L(e, t, n) {
+	if (n.valueText) return n.valueText(e, t);
+	if (t !== "hue") return `${D(t === "saturation" ? e.s : e.v)}%`;
+	let r = `${Math.round(e.h)}°`, i = (n.colorName ?? a)(e);
+	return i ? `${r}, ${i}` : r;
+}
+function R(e, t, n) {
+	if (n) return n(e, t);
+	let r = D(e.a);
+	return `${t ? 100 - r : r}%`;
+}
+var z = "pointer-events-none absolute size-6 rounded-full border-2 border-background bg-(--wave-color-thumb) ring-1 ring-foreground forced-colors:forced-color-adjust-none forced-colors:border-[Canvas] forced-colors:ring-[CanvasText]", B = "h-6 w-full items-center", V = "h-40 w-6 flex-col items-center [container-type:size]", H = "mx-3 h-3 flex-1 wave-rtl:-scale-x-100", U = "my-3 w-3 flex-1", W = "bg-(image:--wave-color-slider-gradient)", G = "absolute m-0 cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed [&::-webkit-slider-thumb]:size-6 [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:size-6", K = "inset-0 size-full", q = "start-1/2 top-1/2 h-6 w-[100cqh] -translate-x-1/2 wave-rtl:translate-x-1/2 -translate-y-1/2 -rotate-90", J = "pointer-events-none absolute inset-x-3 inset-y-0", Y = "pointer-events-none absolute inset-x-0 inset-y-3", X = "start-(--wave-color-slider-position) top-1/2 -translate-x-1/2 wave-rtl:translate-x-1/2 -translate-y-1/2", Z = "bottom-(--wave-color-slider-position) start-1/2 -translate-x-1/2 wave-rtl:translate-x-1/2 translate-y-1/2";
 //#endregion
-export { p as alphaToOpacity, d as formatHexColor, x as getCheckColors, b as getRelativeLuminance, u as isHexDraft, f as normalizeHexColor, m as opacityToAlpha, v as parseCssColor, c as parseHexColor, l as parseHexInput };
+export { z as COLOR_THUMB_CLASSES, W as RAIL_GRADIENT, G as RAIL_INPUT_CLASSES, K as RAIL_INPUT_HORIZONTAL, q as RAIL_INPUT_VERTICAL, B as RAIL_ROOT_HORIZONTAL, V as RAIL_ROOT_VERTICAL, H as RAIL_TRACK_HORIZONTAL, U as RAIL_TRACK_VERTICAL, X as THUMB_POSITION_HORIZONTAL, Z as THUMB_POSITION_VERTICAL, J as THUMB_TRACK_HORIZONTAL, Y as THUMB_TRACK_VERTICAL, F as alphaSliderGradient, _ as alphaToOpacity, R as alphaValueText, I as areaValueText, M as colorAreaGradient, P as colorSliderGradient, E as displayColor, T as displayHue, h as formatHexColor, w as getCheckColors, C as getRelativeLuminance, m as isHexDraft, g as normalizeHexColor, x as parseCssColor, f as parseHexColor, p as parseHexInput, A as railKeyTarget, k as sameColor, L as sliderValueText, D as toPercent, O as toPosition };
 
 //# sourceMappingURL=colorUtils.mjs.map

package/dist/components/input/colorUtils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"colorUtils.mjs","names":["BLACK","WHITE","HEX_COLOR","HEX_INPUT","HEX_DRAFT","clamp","max","min","value","toHexByte","fromDigits","lower","digits","d","parseHexColor","match","parseHexInput","text","isHexDraft","formatHexColor","byte","alpha","rgb","normalizeHexColor","parsed","alphaToOpacity","opacityToAlpha","opacity","parseChannel","percent","token","parseAlpha","RGB_FUNCTION","parseCssColor","hex","n","channelsPart","alphaPart","tokens","t","alphaToken","r","g","b","a","linearize","c","channel","getRelativeLuminance","color","getCheckColors","luminance"],"sources":["../../../src/components/input/colorUtils.ts"],"sourcesContent":["/**\n * Color helpers for ColorPicker and SwatchPicker: hex parsing/normalisation, the alpha byte ↔\n * opacity percentage, and the luminance-picked check glyph drawn on a user-supplied swatch.\n *\n * Internal (not exported from the package). Pure functions, no DOM access, so they run on the\n * server and in tests.\n */\n\n/** A parsed hex color: the `#rrggbb` part (lowercase) and the alpha byte (0–255). */\nexport interface HexColor {\n  /** `#rrggbb`, lowercase. */\n  rgb: string;\n  /** Alpha byte, 0 (transparent) … 255 (opaque). */\n  alpha: number;\n}\n\n/** An sRGB color with 0–255 channels and a 0–1 alpha. */\nexport interface RgbaColor {\n  r: number;\n  g: number;\n  b: number;\n  a: number;\n}\n\n/** Colors of the selected-swatch check glyph: the glyph and the halo drawn under it. */\nexport interface CheckColors {\n  glyph: string;\n  halo: string;\n}\n\n// wave-allow-color: luminance-picked check glyph on a user swatch (C-TOKENS exception, input-pickers#16)\nconst BLACK = '#000000';\n// wave-allow-color: luminance-picked check glyph on a user swatch (C-TOKENS exception, input-pickers#16)\nconst WHITE = '#ffffff';\n\nconst HEX_COLOR = /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;\nconst HEX_INPUT = /^#([0-9a-f]{6}|[0-9a-f]{8})$/i;\nconst HEX_DRAFT = /^#?[0-9a-f]{0,8}$/i;\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction toHexByte(value: number): string {\n  return Math.round(clamp(value, 0, 255))\n    .toString(16)\n    .padStart(2, '0');\n}\n\nfunction fromDigits(digits: string): HexColor {\n  const long =\n    digits.length <= 4\n      ? digits\n          .split('')\n          .map((d) => d + d)\n          .join('')\n      : digits;\n  const lower = long.toLowerCase();\n  return {\n    rgb: `#${lower.slice(0, 6)}`,\n    alpha: lower.length === 8 ? parseInt(lower.slice(6, 8), 16) : 255,\n  };\n}\n\n/**\n * Parses a hex color (`#rgb`, `#rgba`, `#rrggbb` or `#rrggbbaa`, case-insensitive, surrounding\n * whitespace ignored). Returns `null` for anything else (named colors, `rgb()`, a missing `#`).\n *\n * @example parseHexColor('#0F6CBD80') // { rgb: '#0f6cbd', alpha: 128 }\n */\nexport function parseHexColor(value: string): HexColor | null {\n  const match = HEX_COLOR.exec(value.trim());\n  return match ? fromDigits(match[1]) : null;\n}\n\n/**\n * Parses text typed into a hex field: only complete `#rrggbb` / `#rrggbbaa` values are accepted,\n * so the short forms a user passes through while typing (`#abc`) are never committed.\n */\nexport function parseHexInput(text: string): HexColor | null {\n  const match = HEX_INPUT.exec(text.trim());\n  return match ? fromDigits(match[1]) : null;\n}\n\n/**\n * Whether typed text can still become a hex color by typing more characters (an optional `#`\n * followed by at most 8 hex digits; surrounding whitespace ignored, like the parsers). `false`\n * means the text is invalid whatever follows.\n */\nexport function isHexDraft(text: string): boolean {\n  return HEX_DRAFT.test(text.trim());\n}\n\n/**\n * Formats `#rrggbb` plus an alpha byte: `#rrggbb` when opaque (`alpha` 255, the default),\n * `#rrggbbaa` otherwise. The alpha byte is rounded and clamped to 0–255.\n */\nexport function formatHexColor(rgb: string, alpha = 255): string {\n  const byte = Math.round(clamp(alpha, 0, 255));\n  return byte === 255 ? rgb : rgb + toHexByte(byte);\n}\n\n/**\n * A hex color in the one form ColorPicker reports: `#rrggbb` in lower case, or `#rrggbbaa` when\n * the alpha byte is not 255 (short forms expanded, surrounding whitespace dropped). Returns `null`\n * for anything {@link parseHexColor} rejects.\n *\n * @example normalizeHexColor('#ABC') // '#aabbcc'\n * @example normalizeHexColor('#0f6cbdff') // '#0f6cbd'\n */\nexport function normalizeHexColor(value: string): string | null {\n  const parsed = parseHexColor(value);\n  return parsed ? formatHexColor(parsed.rgb, parsed.alpha) : null;\n}\n\n/** Alpha byte (0–255) → whole opacity percentage (0–100). */\nexport function alphaToOpacity(alpha: number): number {\n  return Math.round((clamp(alpha, 0, 255) / 255) * 100);\n}\n\n/** Opacity percentage (0–100) → alpha byte (0–255). Inverse of {@link alphaToOpacity}. */\nexport function opacityToAlpha(opacity: number): number {\n  return Math.round((clamp(opacity, 0, 100) / 100) * 255);\n}\n\nfunction parseChannel(token: string): number | null {\n  const percent = token.endsWith('%');\n  const n = Number(percent ? token.slice(0, -1) : token);\n  if (!Number.isFinite(n)) return null;\n  return clamp(percent ? (n / 100) * 255 : n, 0, 255);\n}\n\nfunction parseAlpha(token: string | undefined): number | null {\n  if (token === undefined) return 1;\n  const percent = token.endsWith('%');\n  const n = Number(percent ? token.slice(0, -1) : token);\n  if (!Number.isFinite(n)) return null;\n  return clamp(percent ? n / 100 : n, 0, 1);\n}\n\nconst RGB_FUNCTION = /^rgba?\\(\\s*([^)]*)\\)$/i;\n\n/**\n * Parses the CSS colors that can be resolved without a browser: hex colors and `rgb()`/`rgba()`\n * (comma or space syntax, numbers or percentages, optional alpha). Returns `null` for named\n * colors, other color spaces and variables.\n */\nexport function parseCssColor(value: string): RgbaColor | null {\n  const text = value.trim();\n  const hex = parseHexColor(text);\n  if (hex) {\n    const n = parseInt(hex.rgb.slice(1), 16);\n    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255, a: hex.alpha / 255 };\n  }\n  const match = RGB_FUNCTION.exec(text);\n  if (!match) return null;\n  const [channelsPart, alphaPart]: Array<string | undefined> = match[1].split('/');\n  const tokens = (channelsPart ?? '')\n    .split(/[\\s,]+/)\n    .map((t) => t.trim())\n    .filter(Boolean);\n  let alphaToken: string | undefined = alphaPart?.trim();\n  if (alphaToken === undefined && tokens.length === 4) alphaToken = tokens.pop();\n  if (tokens.length !== 3) return null;\n  const [r, g, b] = tokens.map(parseChannel);\n  const a = parseAlpha(alphaToken);\n  if (r === null || g === null || b === null || a === null) return null;\n  return { r, g, b, a };\n}\n\nfunction linearize(channel: number): number {\n  const c = channel / 255;\n  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n}\n\n/**\n * WCAG 2.x relative luminance (0 = black … 1 = white) of a color {@link parseCssColor} understands,\n * or `null`. Alpha is ignored (the swatch is treated as opaque).\n */\nexport function getRelativeLuminance(color: string): number | null {\n  const parsed = parseCssColor(color);\n  if (!parsed) return null;\n  return 0.2126 * linearize(parsed.r) + 0.7152 * linearize(parsed.g) + 0.0722 * linearize(parsed.b);\n}\n\n/**\n * Colors of the check glyph drawn on a selected swatch (`input-pickers#16`): black or white,\n * whichever has the higher WCAG contrast ratio against the swatch color, with the other one as a\n * halo under it so the glyph stays visible on any color. Colors that cannot be parsed without a\n * browser (named colors, `hsl()`, variables) get a black glyph with a white halo.\n *\n * This is the one runtime-computed exception to the token rule (C-TOKENS): the glyph sits on a\n * consumer-supplied color, not on a theme surface.\n */\nexport function getCheckColors(color: string): CheckColors {\n  const luminance = getRelativeLuminance(color);\n  if (luminance === null) return { glyph: BLACK, halo: WHITE };\n  const onBlack = (luminance + 0.05) / 0.05;\n  const onWhite = 1.05 / (luminance + 0.05);\n  return onBlack >= onWhite ? { glyph: BLACK, halo: WHITE } : { glyph: WHITE, halo: BLACK };\n}\n"],"mappings":";;AA+BA,IAAMA,IAAQ,WAERC,IAAQ,WAERC,IAAY,yDACZC,IAAY,iCACZC,IAAY;AAElB,SAASC,EAAM,GAAe,GAAa,GAAqB;CAC9D,OAAO,KAAK,IAAIC,GAAK,KAAK,IAAIC,GAAKC,CAAK,CAAC;AAC3C;AAEA,SAASC,EAAU,GAAuB;CACxC,OAAO,KAAK,MAAMJ,EAAMG,GAAO,GAAG,GAAG,CAAC,CAAC,CACpC,SAAS,EAAE,CAAC,CACZ,SAAS,GAAG,GAAG;AACpB;AAEA,SAASE,EAAW,GAA0B;CAQ5C,IAAMC,KANJC,EAAO,UAAU,IACbA,EACG,MAAM,EAAE,CAAC,CACT,KAAK,MAAMC,IAAIA,CAAC,CAAC,CACjB,KAAK,EAAE,IACVD,EAAA,CACa,YAAY;CAC/B,OAAO;EACL,KAAK,IAAID,EAAM,MAAM,GAAG,CAAC;EACzB,OAAOA,EAAM,WAAW,IAAI,SAASA,EAAM,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;CAChE;AACF;AAQA,SAAgBG,EAAc,GAAgC;CAC5D,IAAMC,IAAQb,EAAU,KAAKM,EAAM,KAAK,CAAC;CACzC,OAAOO,IAAQL,EAAWK,EAAM,EAAE,IAAI;AACxC;AAMA,SAAgBC,EAAc,GAA+B;CAC3D,IAAMD,IAAQZ,EAAU,KAAKc,EAAK,KAAK,CAAC;CACxC,OAAOF,IAAQL,EAAWK,EAAM,EAAE,IAAI;AACxC;AAOA,SAAgBG,EAAW,GAAuB;CAChD,OAAOd,EAAU,KAAKa,EAAK,KAAK,CAAC;AACnC;AAMA,SAAgBE,EAAe,GAAa,IAAQ,KAAa;CAC/D,IAAMC,IAAO,KAAK,MAAMf,EAAMgB,GAAO,GAAG,GAAG,CAAC;CAC5C,OAAOD,MAAS,MAAME,IAAMA,IAAMb,EAAUW,CAAI;AAClD;AAUA,SAAgBG,EAAkB,GAA8B;CAC9D,IAAMC,IAASV,EAAcN,CAAK;CAClC,OAAOgB,IAASL,EAAeK,EAAO,KAAKA,EAAO,KAAK,IAAI;AAC7D;AAGA,SAAgBC,EAAe,GAAuB;CACpD,OAAO,KAAK,MAAOpB,EAAMgB,GAAO,GAAG,GAAG,IAAI,MAAO,GAAG;AACtD;AAGA,SAAgBK,EAAe,GAAyB;CACtD,OAAO,KAAK,MAAOrB,EAAMsB,GAAS,GAAG,GAAG,IAAI,MAAO,GAAG;AACxD;AAEA,SAASC,EAAa,GAA8B;CAClD,IAAMC,IAAUC,EAAM,SAAS,GAAG,GAC5B,IAAI,OAAOD,IAAUC,EAAM,MAAM,GAAG,EAAE,IAAIA,CAAK;CAErD,OADK,OAAO,SAAS,CAAC,IACfzB,EAAMwB,IAAW,IAAI,MAAO,MAAM,GAAG,GAAG,GAAG,IADlB;AAElC;AAEA,SAASE,EAAW,GAA0C;CAC5D,IAAID,MAAU,KAAA,GAAW,OAAO;CAChC,IAAMD,IAAUC,EAAM,SAAS,GAAG,GAC5B,IAAI,OAAOD,IAAUC,EAAM,MAAM,GAAG,EAAE,IAAIA,CAAK;CAErD,OADK,OAAO,SAAS,CAAC,IACfzB,EAAMwB,IAAU,IAAI,MAAM,GAAG,GAAG,CAAC,IADR;AAElC;AAEA,IAAMG,IAAe;AAOrB,SAAgBC,EAAc,GAAiC;CAC7D,IAAMhB,IAAOT,EAAM,KAAK,GAClB0B,IAAMpB,EAAcG,CAAI;CAC9B,IAAIiB,GAAK;EACP,IAAMC,IAAI,SAASD,EAAI,IAAI,MAAM,CAAC,GAAG,EAAE;EACvC,OAAO;GAAE,GAAIC,KAAK,KAAM;GAAK,GAAIA,KAAK,IAAK;GAAK,GAAGA,IAAI;GAAK,GAAGD,EAAI,QAAQ;EAAI;CACjF;CACA,IAAMnB,IAAQiB,EAAa,KAAKf,CAAI;CACpC,IAAI,CAACF,GAAO,OAAO;CACnB,IAAM,CAACqB,GAAcC,KAAwCtB,EAAM,EAAE,CAAC,MAAM,GAAG,GACzEuB,KAAUF,KAAgB,GAAA,CAC7B,MAAM,QAAQ,CAAC,CACf,KAAK,MAAMG,EAAE,KAAK,CAAC,CAAC,CACpB,OAAO,OAAO,GACbC,IAAiCH,GAAW,KAAK;CAErD,IADIG,MAAe,KAAA,KAAaF,EAAO,WAAW,MAAG,IAAaA,EAAO,IAAI,IACzEA,EAAO,WAAW,GAAG,OAAO;CAChC,IAAM,CAACG,GAAGC,GAAGC,KAAKL,EAAO,IAAIV,CAAY,GACnCgB,IAAIb,EAAWS,CAAU;CAE/B,OADIC,MAAM,QAAQC,MAAM,QAAQC,MAAM,QAAQC,MAAM,OAAa,OAC1D;EAAE;EAAG;EAAG;EAAG;CAAE;AACtB;AAEA,SAASC,EAAU,GAAyB;CAC1C,IAAMC,IAAIC,IAAU;CACpB,OAAOD,KAAK,SAAUA,IAAI,UAAUA,IAAI,QAAS,UAAU;AAC7D;AAMA,SAAgBE,EAAqB,GAA8B;CACjE,IAAMxB,IAASS,EAAcgB,CAAK;CAElC,OADKzB,IACE,QAASqB,EAAUrB,EAAO,CAAC,IAAI,QAASqB,EAAUrB,EAAO,CAAC,IAAI,QAASqB,EAAUrB,EAAO,CAAC,IAD5E;AAEtB;AAWA,SAAgB0B,EAAe,GAA4B;CACzD,IAAMC,IAAYH,EAAqBC,CAAK;CAI5C,OAHIE,MAAc,SACDA,IAAY,OAAQ,OACrB,QAAQA,IAAY,OAFL;EAAE,OAAOnD;EAAO,MAAMC;CAAM,IAGC;EAAE,OAAOA;EAAO,MAAMD;CAAM;AAC1F"}
+{"version":3,"file":"colorUtils.mjs","names":["BLACK","WHITE","HEX_INPUT","HEX_DRAFT","clamp","max","min","value","toHexByte","parseHexColor","bytes","parseHexBytes","parseHexInput","text","isHexDraft","formatHexColor","byte","alpha","rgb","normalizeHexColor","parsed","alphaToOpacity","parseChannel","percent","token","parseAlpha","RGB_FUNCTION","parseCssColor","hex","n","match","channelsPart","alphaPart","tokens","t","alphaToken","r","g","b","a","linearize","c","channel","getRelativeLuminance","color","getCheckColors","luminance","displayHue","h","wrapHue","displayColor","clampUnit","toPercent","toPosition","sameColor","railKeyTarget","modifiers","step","next","key","current","getArrowIntent","toward","orientation","colorAreaGradient","hsvToHex","HUE_SPECTRUM","colorSliderGradient","direction","alphaSliderGradient","opaque","transparency","areaValueText","labels","saturation","brightness","channels","name","getColorName","sliderValueText","degrees","alphaValueText","valueText","opacity","COLOR_THUMB_CLASSES","RAIL_ROOT_HORIZONTAL","RAIL_ROOT_VERTICAL","RAIL_TRACK_HORIZONTAL","RAIL_TRACK_VERTICAL","RAIL_GRADIENT","RAIL_INPUT_CLASSES","RAIL_INPUT_HORIZONTAL","RAIL_INPUT_VERTICAL","THUMB_TRACK_HORIZONTAL","THUMB_TRACK_VERTICAL","THUMB_POSITION_HORIZONTAL","THUMB_POSITION_VERTICAL"],"sources":["../../../src/components/input/colorUtils.ts"],"sourcesContent":["/**\n * Color helpers for ColorPicker, SwatchPicker and the HSV color parts: hex parsing and\n * normalisation (on the grammar of `src/lib/color.ts`), the alpha byte ↔ opacity percentage, and\n * the luminance-picked check glyph drawn on a user-supplied swatch.\n *\n * Internal (not exported from the package). Pure functions, no DOM access, so they run on the\n * server and in tests.\n */\nimport { clampUnit, hsvToHex, parseHexBytes, wrapHue } from '../../lib/color';\nimport { getArrowIntent, type Direction } from '../../lib/direction';\nimport type { HsvColor } from '../../lib/types';\nimport { getColorName } from './colorName';\n\n/** A parsed hex color: the `#rrggbb` part (lowercase) and the alpha byte (0–255). */\nexport interface HexColor {\n  /** `#rrggbb`, lowercase. */\n  rgb: string;\n  /** Alpha byte, 0 (transparent) … 255 (opaque). */\n  alpha: number;\n}\n\n/** An sRGB color with 0–255 channels and a 0–1 alpha. */\nexport interface RgbaColor {\n  r: number;\n  g: number;\n  b: number;\n  a: number;\n}\n\n/** Colors of the selected-swatch check glyph: the glyph and the halo drawn under it. */\nexport interface CheckColors {\n  glyph: string;\n  halo: string;\n}\n\n// wave-allow-color: luminance-picked check glyph on a user swatch (C-TOKENS exception, input-pickers#16)\nconst BLACK = '#000000';\n// wave-allow-color: luminance-picked check glyph on a user swatch (C-TOKENS exception, input-pickers#16)\nconst WHITE = '#ffffff';\n\nconst HEX_INPUT = /^#([0-9a-f]{6}|[0-9a-f]{8})$/i;\nconst HEX_DRAFT = /^#?[0-9a-f]{0,8}$/i;\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction toHexByte(value: number): string {\n  return Math.round(clamp(value, 0, 255))\n    .toString(16)\n    .padStart(2, '0');\n}\n\n/**\n * Parses a hex color (`#rgb`, `#rgba`, `#rrggbb` or `#rrggbbaa`, case-insensitive, surrounding\n * whitespace ignored). Returns `null` for anything else (named colors, `rgb()`, a missing `#`).\n *\n * @example parseHexColor('#0F6CBD80') // { rgb: '#0f6cbd', alpha: 128 }\n */\nexport function parseHexColor(value: string): HexColor | null {\n  const bytes = parseHexBytes(value);\n  return bytes\n    ? {\n        rgb: `#${toHexByte(bytes.r)}${toHexByte(bytes.g)}${toHexByte(bytes.b)}`,\n        alpha: bytes.alpha,\n      }\n    : null;\n}\n\n/**\n * Parses text typed into a hex field: only complete `#rrggbb` / `#rrggbbaa` values are accepted,\n * so the short forms a user passes through while typing (`#abc`) are never committed.\n */\nexport function parseHexInput(text: string): HexColor | null {\n  return HEX_INPUT.test(text.trim()) ? parseHexColor(text) : null;\n}\n\n/**\n * Whether typed text can still become a hex color by typing more characters (an optional `#`\n * followed by at most 8 hex digits; surrounding whitespace ignored, like the parsers). `false`\n * means the text is invalid whatever follows.\n */\nexport function isHexDraft(text: string): boolean {\n  return HEX_DRAFT.test(text.trim());\n}\n\n/**\n * Formats `#rrggbb` plus an alpha byte: `#rrggbb` when opaque (`alpha` 255, the default),\n * `#rrggbbaa` otherwise. The alpha byte is rounded and clamped to 0–255.\n */\nexport function formatHexColor(rgb: string, alpha = 255): string {\n  const byte = Math.round(clamp(alpha, 0, 255));\n  return byte === 255 ? rgb : rgb + toHexByte(byte);\n}\n\n/**\n * A hex color in the one form ColorPicker reports: `#rrggbb` in lower case, or `#rrggbbaa` when\n * the alpha byte is not 255 (short forms expanded, surrounding whitespace dropped). Returns `null`\n * for anything {@link parseHexColor} rejects.\n *\n * @example normalizeHexColor('#ABC') // '#aabbcc'\n * @example normalizeHexColor('#0f6cbdff') // '#0f6cbd'\n */\nexport function normalizeHexColor(value: string): string | null {\n  const parsed = parseHexColor(value);\n  return parsed ? formatHexColor(parsed.rgb, parsed.alpha) : null;\n}\n\n/** Alpha byte (0–255) → whole opacity percentage (0–100). */\nexport function alphaToOpacity(alpha: number): number {\n  return Math.round((clamp(alpha, 0, 255) / 255) * 100);\n}\n\n/** Opacity percentage (0–100) → alpha byte (0–255). Inverse of {@link alphaToOpacity}. */\nexport function opacityToAlpha(opacity: number): number {\n  return Math.round((clamp(opacity, 0, 100) / 100) * 255);\n}\n\nfunction parseChannel(token: string): number | null {\n  const percent = token.endsWith('%');\n  const n = Number(percent ? token.slice(0, -1) : token);\n  if (!Number.isFinite(n)) return null;\n  return clamp(percent ? (n / 100) * 255 : n, 0, 255);\n}\n\nfunction parseAlpha(token: string | undefined): number | null {\n  if (token === undefined) return 1;\n  const percent = token.endsWith('%');\n  const n = Number(percent ? token.slice(0, -1) : token);\n  if (!Number.isFinite(n)) return null;\n  return clamp(percent ? n / 100 : n, 0, 1);\n}\n\nconst RGB_FUNCTION = /^rgba?\\(\\s*([^)]*)\\)$/i;\n\n/**\n * Parses the CSS colors that can be resolved without a browser: hex colors and `rgb()`/`rgba()`\n * (comma or space syntax, numbers or percentages, optional alpha). Returns `null` for named\n * colors, other color spaces and variables.\n */\nexport function parseCssColor(value: string): RgbaColor | null {\n  const text = value.trim();\n  const hex = parseHexColor(text);\n  if (hex) {\n    const n = parseInt(hex.rgb.slice(1), 16);\n    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255, a: hex.alpha / 255 };\n  }\n  const match = RGB_FUNCTION.exec(text);\n  if (!match) return null;\n  const [channelsPart, alphaPart]: Array<string | undefined> = match[1].split('/');\n  const tokens = (channelsPart ?? '')\n    .split(/[\\s,]+/)\n    .map((t) => t.trim())\n    .filter(Boolean);\n  let alphaToken: string | undefined = alphaPart?.trim();\n  if (alphaToken === undefined && tokens.length === 4) alphaToken = tokens.pop();\n  if (tokens.length !== 3) return null;\n  const [r, g, b] = tokens.map(parseChannel);\n  const a = parseAlpha(alphaToken);\n  if (r === null || g === null || b === null || a === null) return null;\n  return { r, g, b, a };\n}\n\nfunction linearize(channel: number): number {\n  const c = channel / 255;\n  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n}\n\n/**\n * WCAG 2.x relative luminance (0 = black … 1 = white) of a color {@link parseCssColor} understands,\n * or `null`. Alpha is ignored (the swatch is treated as opaque).\n */\nexport function getRelativeLuminance(color: string): number | null {\n  const parsed = parseCssColor(color);\n  if (!parsed) return null;\n  return 0.2126 * linearize(parsed.r) + 0.7152 * linearize(parsed.g) + 0.0722 * linearize(parsed.b);\n}\n\n/**\n * Colors of the check glyph drawn on a selected swatch (`input-pickers#16`): black or white,\n * whichever has the higher WCAG contrast ratio against the swatch color, with the other one as a\n * halo under it so the glyph stays visible on any color. Colors that cannot be parsed without a\n * browser (named colors, `hsl()`, variables) get a black glyph with a white halo.\n *\n * This is the one runtime-computed exception to the token rule (C-TOKENS): the glyph sits on a\n * consumer-supplied color, not on a theme surface.\n */\nexport function getCheckColors(color: string): CheckColors {\n  const luminance = getRelativeLuminance(color);\n  if (luminance === null) return { glyph: BLACK, halo: WHITE };\n  const onBlack = (luminance + 0.05) / 0.05;\n  const onWhite = 1.05 / (luminance + 0.05);\n  return onBlack >= onWhite ? { glyph: BLACK, halo: WHITE } : { glyph: WHITE, halo: BLACK };\n}\n\n// ---------------------------------------------------------------------------------------------\n// The HSV color parts: ColorArea, ColorSlider and AlphaSlider (spec P3-05)\n// ---------------------------------------------------------------------------------------------\n\n/** The channels of an HSV color that a part edits or names in a value text. */\nexport type ColorChannel = 'hue' | 'saturation' | 'value' | 'alpha';\n\n/** Which way a rail runs: left to right (mirrored in right-to-left layouts), or bottom to top. */\nexport type RailOrientation = 'horizontal' | 'vertical';\n\n/** The modifier keys of a key press. */\nexport interface KeyModifiers {\n  shiftKey: boolean;\n  altKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n}\n\n/**\n * A hue as a part shows it: 0–360 kept as given (360 is the end of a hue rail), any other finite\n * hue wrapped into [0, 360), and a hue that is not finite as 0.\n */\nexport function displayHue(h: number): number {\n  return Number.isFinite(h) && h >= 0 && h <= 360 ? h : wrapHue(h);\n}\n\n/**\n * A color as a part shows it: the hue for display, saturation and brightness clamped to [0, 1]\n * (not a number: 0) and alpha clamped to [0, 1] (left out or not a number: 1).\n */\nexport function displayColor(color: HsvColor): Required<HsvColor> {\n  return {\n    h: displayHue(color.h),\n    s: clampUnit(color.s, 0),\n    v: clampUnit(color.v, 0),\n    a: clampUnit(color.a, 1),\n  };\n}\n\n/** A 0–1 channel as the whole percentage the range inputs and value texts use. */\nexport function toPercent(value: number): number {\n  return Math.round(value * 100);\n}\n\n/** A 0–1 position as a CSS percentage with at most two decimals, for an inline custom property. */\nexport function toPosition(value: number): string {\n  return `${Math.round(value * 10000) / 100}%`;\n}\n\n/** Whether two colors have the same channels (a missing alpha equals 1). */\nexport function sameColor(a: HsvColor, b: HsvColor): boolean {\n  return a.h === b.h && a.s === b.s && a.v === b.v && (a.a ?? 1) === (b.a ?? 1);\n}\n\n/**\n * The value a rail (a range from 0 to `max`) moves to for a key press, or `null` for a key it\n * leaves alone: ArrowUp and ArrowDown by 1; ArrowRight and ArrowLeft by 1 toward the reading\n * direction's end and start (so mirrored in right-to-left layouts); Shift with an arrow, Page Up\n * and Page Down by 10; Home and End to 0 and `max`. A key with Alt, Ctrl or Meta belongs to the\n * browser. The result is clamped to the range.\n */\nexport function railKeyTarget(\n  key: string,\n  modifiers: KeyModifiers,\n  dir: Direction,\n  current: number,\n  max: number,\n): number | null {\n  if (modifiers.altKey || modifiers.ctrlKey || modifiers.metaKey) return null;\n  const step = modifiers.shiftKey ? 10 : 1;\n  let next: number;\n  switch (key) {\n    case 'ArrowUp':\n      next = current + step;\n      break;\n    case 'ArrowDown':\n      next = current - step;\n      break;\n    case 'ArrowRight':\n    case 'ArrowLeft':\n      next =\n        current +\n        (getArrowIntent(key, { orientation: 'horizontal', dir }) === 'next' ? step : -step);\n      break;\n    case 'PageUp':\n      next = current + 10;\n      break;\n    case 'PageDown':\n      next = current - 10;\n      break;\n    case 'Home':\n      next = 0;\n      break;\n    case 'End':\n      next = max;\n      break;\n    default:\n      return null;\n  }\n  return Math.min(max, Math.max(0, next));\n}\n\nconst toward = (orientation: RailOrientation) =>\n  orientation === 'vertical' ? 'to top' : 'to right';\n\n/** The field of a ColorArea at hue `h`: white to the pure hue left to right, black toward the bottom. */\nexport function colorAreaGradient(h: number): string {\n  const hue = hsvToHex({ h, s: 1, v: 1 });\n  // wave-allow-color: the saturation and brightness field of the user's color (runtime gradient)\n  return `linear-gradient(to top, #000000, transparent), linear-gradient(to right, #ffffff, ${hue})`;\n}\n\n// wave-allow-color: the hue spectrum of a hue rail (runtime gradient data, not a theme color)\nconst HUE_SPECTRUM = '#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000';\n\n/**\n * The rail of a ColorSlider: the hue spectrum, gray to the full color at the color's brightness\n * (saturation), or black to the color at full brightness (brightness).\n */\nexport function colorSliderGradient(\n  channel: 'hue' | 'saturation' | 'value',\n  color: Required<HsvColor>,\n  orientation: RailOrientation,\n): string {\n  const direction = toward(orientation);\n  if (channel === 'hue') return `linear-gradient(${direction}, ${HUE_SPECTRUM})`;\n  if (channel === 'saturation') {\n    const gray = hsvToHex({ h: color.h, s: 0, v: color.v });\n    const full = hsvToHex({ h: color.h, s: 1, v: color.v });\n    return `linear-gradient(${direction}, ${gray}, ${full})`;\n  }\n  const bright = hsvToHex({ h: color.h, s: color.s, v: 1 });\n  // wave-allow-color: the brightness rail runs from black to the color (runtime gradient)\n  return `linear-gradient(${direction}, #000000, ${bright})`;\n}\n\n/** The rail of an AlphaSlider: transparent to the opaque color, or the reverse with `transparency`. */\nexport function alphaSliderGradient(\n  color: Required<HsvColor>,\n  transparency: boolean,\n  orientation: RailOrientation,\n): string {\n  const opaque = hsvToHex({ h: color.h, s: color.s, v: color.v });\n  const direction = toward(orientation);\n  return transparency\n    ? `linear-gradient(${direction}, ${opaque}, transparent)`\n    : `linear-gradient(${direction}, transparent, ${opaque})`;\n}\n\n/**\n * The value text of one of ColorArea's inputs: its own channel first, then the other one, then\n * the color's name (\"Saturation 72%, Brightness 40%, dark blue\"). `colorName` replaces the namer\n * (`''` leaves the name out); `valueText` replaces the whole text.\n */\nexport function areaValueText(\n  color: Required<HsvColor>,\n  channel: 'saturation' | 'value',\n  labels: {\n    saturation: string;\n    brightness: string;\n    colorName?: (color: HsvColor) => string;\n    valueText?: (color: HsvColor, channel: 'saturation' | 'value') => string;\n  },\n): string {\n  if (labels.valueText) return labels.valueText(color, channel);\n  const saturation = `${labels.saturation} ${toPercent(color.s)}%`;\n  const brightness = `${labels.brightness} ${toPercent(color.v)}%`;\n  const channels =\n    channel === 'saturation' ? `${saturation}, ${brightness}` : `${brightness}, ${saturation}`;\n  const name = (labels.colorName ?? getColorName)(color);\n  return name ? `${channels}, ${name}` : channels;\n}\n\n/** The value text of a ColorSlider: \"210°, blue\" for hue, \"72%\" for saturation and brightness. */\nexport function sliderValueText(\n  color: Required<HsvColor>,\n  channel: 'hue' | 'saturation' | 'value',\n  labels: {\n    colorName?: (color: HsvColor) => string;\n    valueText?: (color: HsvColor, channel: 'hue' | 'saturation' | 'value') => string;\n  },\n): string {\n  if (labels.valueText) return labels.valueText(color, channel);\n  if (channel !== 'hue') return `${toPercent(channel === 'saturation' ? color.s : color.v)}%`;\n  const degrees = `${Math.round(color.h)}°`;\n  const name = (labels.colorName ?? getColorName)(color);\n  return name ? `${degrees}, ${name}` : degrees;\n}\n\n/** The value text of an AlphaSlider: the opacity (\"40%\"), or the transparency with `transparency`. */\nexport function alphaValueText(\n  color: Required<HsvColor>,\n  transparency: boolean,\n  valueText?: (color: HsvColor, transparency: boolean) => string,\n): string {\n  if (valueText) return valueText(color, transparency);\n  const opacity = toPercent(color.a);\n  return `${transparency ? 100 - opacity : opacity}%`;\n}\n\n/**\n * The thumb of ColorArea, ColorSlider and AlphaSlider (decorative; the focused input is what\n * assistive technology reads): 24 px, filled from `--wave-color-thumb`, with a two-tone edge (a\n * `background` border inside a `foreground` ring) that shows on any color. Forced colors keep the\n * fill and draw the edge in system colors. Each part adds its own focus classes, keyed on its\n * named group, and its part class.\n */\nexport const COLOR_THUMB_CLASSES =\n  'pointer-events-none absolute size-6 rounded-full border-2 border-background bg-(--wave-color-thumb) ring-1 ring-foreground forced-colors:forced-color-adjust-none forced-colors:border-[Canvas] forced-colors:ring-[CanvasText]';\n\n/** The root of a horizontal ColorSlider or AlphaSlider (24 px, as tall as the thumb). */\nexport const RAIL_ROOT_HORIZONTAL = 'h-6 w-full items-center';\n/** The root of a vertical one: a size container, so the turned input can be as long as it is tall. */\nexport const RAIL_ROOT_VERTICAL = 'h-40 w-6 flex-col items-center [container-type:size]';\n/** The drawn rail, inset by half a thumb at both ends (a horizontal one mirrors in right-to-left layouts). */\nexport const RAIL_TRACK_HORIZONTAL = 'mx-3 h-3 flex-1 wave-rtl:-scale-x-100';\nexport const RAIL_TRACK_VERTICAL = 'my-3 w-3 flex-1';\n/** The rail's gradient, read from the inline `--wave-color-slider-gradient` property. */\nexport const RAIL_GRADIENT = 'bg-(image:--wave-color-slider-gradient)';\n/**\n * The native range input of a rail: over the whole slider and invisible, with its own thumb as\n * wide as the drawn one, so a press lands on the value under the drawn thumb.\n */\nexport const RAIL_INPUT_CLASSES =\n  'absolute m-0 cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed [&::-webkit-slider-thumb]:size-6 [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:size-6';\nexport const RAIL_INPUT_HORIZONTAL = 'inset-0 size-full';\n/** Turned a quarter, so its start (the minimum) is at the bottom; it carries `dir=\"ltr\"`. */\nexport const RAIL_INPUT_VERTICAL =\n  'start-1/2 top-1/2 h-6 w-[100cqh] -translate-x-1/2 wave-rtl:translate-x-1/2 -translate-y-1/2 -rotate-90';\n/** The box the thumb moves in: the rail's length, so its center meets the native thumb's. */\nexport const THUMB_TRACK_HORIZONTAL = 'pointer-events-none absolute inset-x-3 inset-y-0';\nexport const THUMB_TRACK_VERTICAL = 'pointer-events-none absolute inset-x-0 inset-y-3';\n/** The thumb's place along the rail, read from the inline `--wave-color-slider-position` property. */\nexport const THUMB_POSITION_HORIZONTAL =\n  'start-(--wave-color-slider-position) top-1/2 -translate-x-1/2 wave-rtl:translate-x-1/2 -translate-y-1/2';\nexport const THUMB_POSITION_VERTICAL =\n  'bottom-(--wave-color-slider-position) start-1/2 -translate-x-1/2 wave-rtl:translate-x-1/2 translate-y-1/2';\n"],"mappings":"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"}

package/dist/components/input/fieldLabel.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/children.cjs");let n=require("react");n=e.__toESM(n,1);var r=Symbol.for(`wave.fieldLabel`);function i(e){return e[r]=!0,e}function a(e){if(!n.isValidElement(e))return!1;let i=t.getElementType(e);return(typeof i==`function`||typeof i==`object`&&!!i)&&i[r]===!0}exports.FIELD_LABEL=r,exports.isFieldLabelElement=a,exports.markFieldLabel=i;
+//# sourceMappingURL=fieldLabel.cjs.map

package/dist/components/input/fieldLabel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldLabel.cjs","names":["React","getElementType","require_runtime","require_children","react","FIELD_LABEL","markFieldLabel","component","isFieldLabelElement","node","type"],"sources":["../../../src/components/input/fieldLabel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getElementType } from '../../lib/children';\nimport type { CoreSize, TextWeight } from '../../lib/types';\n\n/**\n * Marks the components whose element Field renders as its label instead of wrapping it in its own\n * `<label>` (Label, InfoLabel). A marker, not an import, so that Field never pulls InfoLabel's\n * overlay code into a bundle. Internal.\n */\nexport const FIELD_LABEL: symbol = Symbol.for('wave.fieldLabel');\n\n/** The props Field gives a label element (each only when the element does not set it). */\nexport interface FieldLabelElementProps {\n  id?: string;\n  htmlFor?: string;\n  required?: boolean | React.ReactNode;\n  size?: CoreSize;\n  weight?: TextWeight;\n  className?: string;\n}\n\n/** Marks `component` as a Field label element; call it next to `displayName`. */\nexport function markFieldLabel<T extends object>(component: T): T {\n  (component as Record<symbol, unknown>)[FIELD_LABEL] = true;\n  return component;\n}\n\n/** Whether `node` is an element of a marked component (lazy client references resolved). */\nexport function isFieldLabelElement(\n  node: React.ReactNode,\n): node is React.ReactElement<FieldLabelElementProps> {\n  if (!React.isValidElement(node)) return false;\n  const type = getElementType(node);\n  return (\n    (typeof type === 'function' || (typeof type === 'object' && type !== null)) &&\n    (type as Record<symbol, unknown>)[FIELD_LABEL] === true\n  );\n}\n"],"mappings":"iJASA,IAAaK,EAAsB,OAAO,IAAI,iBAAiB,EAa/D,SAAgBC,EAAiC,EAAiB,CAEhE,MADA,GAAuCD,GAAe,GAC/CE,CACT,CAGA,SAAgBC,EACd,EACoD,CACpD,GAAI,CAACR,EAAM,eAAeS,CAAI,EAAG,MAAO,GACxC,IAAMC,EAAOT,EAAAA,eAAeQ,CAAI,EAChC,OACG,OAAOC,GAAS,YAAe,OAAOA,GAAS,YAAYA,IAC3DA,EAAiCL,KAAiB,EAEvD"}

package/dist/components/input/fieldLabel.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { getElementType as e } from "../../lib/children.mjs";
+import * as t from "react";
+//#region src/components/input/fieldLabel.ts
+var n = Symbol.for("wave.fieldLabel");
+function r(e) {
+	return e[n] = !0, e;
+}
+function i(r) {
+	if (!t.isValidElement(r)) return !1;
+	let i = e(r);
+	return (typeof i == "function" || typeof i == "object" && !!i) && i[n] === !0;
+}
+//#endregion
+export { n as FIELD_LABEL, i as isFieldLabelElement, r as markFieldLabel };
+
+//# sourceMappingURL=fieldLabel.mjs.map

package/dist/components/input/fieldLabel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldLabel.mjs","names":["React","FIELD_LABEL","markFieldLabel","component","isFieldLabelElement","node","type","getElementType"],"sources":["../../../src/components/input/fieldLabel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getElementType } from '../../lib/children';\nimport type { CoreSize, TextWeight } from '../../lib/types';\n\n/**\n * Marks the components whose element Field renders as its label instead of wrapping it in its own\n * `<label>` (Label, InfoLabel). A marker, not an import, so that Field never pulls InfoLabel's\n * overlay code into a bundle. Internal.\n */\nexport const FIELD_LABEL: symbol = Symbol.for('wave.fieldLabel');\n\n/** The props Field gives a label element (each only when the element does not set it). */\nexport interface FieldLabelElementProps {\n  id?: string;\n  htmlFor?: string;\n  required?: boolean | React.ReactNode;\n  size?: CoreSize;\n  weight?: TextWeight;\n  className?: string;\n}\n\n/** Marks `component` as a Field label element; call it next to `displayName`. */\nexport function markFieldLabel<T extends object>(component: T): T {\n  (component as Record<symbol, unknown>)[FIELD_LABEL] = true;\n  return component;\n}\n\n/** Whether `node` is an element of a marked component (lazy client references resolved). */\nexport function isFieldLabelElement(\n  node: React.ReactNode,\n): node is React.ReactElement<FieldLabelElementProps> {\n  if (!React.isValidElement(node)) return false;\n  const type = getElementType(node);\n  return (\n    (typeof type === 'function' || (typeof type === 'object' && type !== null)) &&\n    (type as Record<symbol, unknown>)[FIELD_LABEL] === true\n  );\n}\n"],"mappings":";;;;AASA,IAAaC,IAAsB,OAAO,IAAI,iBAAiB;AAa/D,SAAgBC,EAAiC,GAAiB;CAEhE,OADA,EAAuCD,KAAe,IAC/CE;AACT;AAGA,SAAgBC,EACd,GACoD;CACpD,IAAI,CAACJ,EAAM,eAAeK,CAAI,GAAG,OAAO;CACxC,IAAMC,IAAOC,EAAeF,CAAI;CAChC,QACG,OAAOC,KAAS,cAAe,OAAOA,KAAS,cAAYA,MAC3DA,EAAiCL,OAAiB;AAEvD"}

package/dist/components/input/inputLook.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../hooks/useFieldControl.cjs"),t=require("../provider/WaveProvider.cjs");var n=[`small`,`medium`,`large`],r=[`outline`,`underline`,`filled-darker`,`filled-lighter`];function i(i,a,o={}){let s=e.useFieldContext(),{inputDefaults:c}=t.useWaveTheme(),l=o.sizes??n,u=e=>e!==void 0&&l.includes(e),d=e=>typeof e==`string`&&r.includes(e);return{size:(u(i)?i:void 0)??(u(s?.size)?s.size:void 0)??(u(c.size)?c.size:void 0)??o.defaultSize??`medium`,appearance:(d(a)?a:void 0)??(d(c.appearance)?c.appearance:void 0)??`outline`}}function a(e){return typeof e==`number`?e:typeof e==`string`&&/^\d+$/.test(e)?Number(e):void 0}exports.legacyNativeSize=a,exports.useInputLook=i;
+//# sourceMappingURL=inputLook.cjs.map

package/dist/components/input/inputLook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputLook.cjs","names":["useFieldContext","useWaveTheme","require_useFieldControl","require_WaveProvider","CORE_SIZES","APPEARANCES","useInputLook","field","sizes","options","fits","candidate","isAppearance","size","inputDefaults","appearance","legacyNativeSize"],"sources":["../../../src/components/input/inputLook.ts"],"sourcesContent":["import type { CoreSize, InputAppearance, Size } from '../../lib/types';\nimport { useFieldContext } from '../../hooks/useFieldControl';\nimport { useWaveTheme } from '../provider/WaveProvider';\n\nconst CORE_SIZES: readonly CoreSize[] = ['small', 'medium', 'large'];\nconst APPEARANCES: readonly string[] = [\n  'outline',\n  'underline',\n  'filled-darker',\n  'filled-lighter',\n] satisfies readonly InputAppearance[];\n\n/** Options of {@link useInputLook}. */\nexport interface InputLookOptions<S extends Size> {\n  /**\n   * The sizes the control supports; an own, Field or provider size outside them is skipped.\n   * @default the three core sizes (`small`, `medium`, `large`)\n   */\n  sizes?: readonly S[];\n  /**\n   * The size when nothing else applies. Pass it when `sizes` leaves out `medium`: the fallback is\n   * not checked against `sizes`.\n   * @default 'medium'\n   */\n  defaultSize?: S;\n}\n\n/**\n * The size and appearance a text control or picker renders (Phase 4 D6): its own props, then the\n * surrounding Field's `size`, then `WaveProvider inputDefaults`, then the defaults (`medium`,\n * `outline`). `undefined` props fall through like absent ones, and so do values outside the\n * unions (from untyped code: plain JS, CMS config, an untyped `inputDefaults`): an own or provider\n * size outside `sizes`, or an appearance other than the four, is skipped, so the returned values\n * (and the `data-size`/`data-appearance` attributes built from them) are always supported ones.\n *\n * @internal Not exported from the package.\n */\nexport function useInputLook<S extends Size = CoreSize>(\n  size: S | undefined,\n  appearance: InputAppearance | undefined,\n  options: InputLookOptions<S> = {},\n): { size: S; appearance: InputAppearance } {\n  const field = useFieldContext();\n  const { inputDefaults } = useWaveTheme();\n  const sizes = (options.sizes ?? CORE_SIZES) as readonly Size[];\n  const fits = (candidate: Size | undefined): candidate is S =>\n    candidate !== undefined && sizes.includes(candidate);\n  const isAppearance = (candidate: unknown): candidate is InputAppearance =>\n    typeof candidate === 'string' && APPEARANCES.includes(candidate);\n  const resolvedSize =\n    (fits(size) ? size : undefined) ??\n    (fits(field?.size) ? field.size : undefined) ??\n    (fits(inputDefaults.size) ? inputDefaults.size : undefined) ??\n    options.defaultSize ??\n    ('medium' as S);\n  const resolvedAppearance =\n    (isAppearance(appearance) ? appearance : undefined) ??\n    (isAppearance(inputDefaults.appearance) ? inputDefaults.appearance : undefined) ??\n    'outline';\n  return { size: resolvedSize, appearance: resolvedAppearance };\n}\n\n/**\n * The numeric legacy form of `size` on Input and Select (the native attribute, deprecated in\n * favour of `htmlSize`): a number, or a string of digits only, which untyped code wrote HTML style\n * before 0.9 (`size=\"20\"`). `undefined` for anything else, which `useInputLook` then resolves as a\n * design size.\n *\n * @internal Not exported from the package.\n */\nexport function legacyNativeSize(size: unknown): number | undefined {\n  if (typeof size === 'number') return size;\n  return typeof size === 'string' && /^\\d+$/.test(size) ? Number(size) : undefined;\n}\n"],"mappings":"0GAIA,IAAMI,EAAkC,CAAC,QAAS,SAAU,OAAO,EAC7DC,EAAiC,CACrC,UACA,YACA,gBACA,gBACF,EA2BA,SAAgBC,EACd,EACA,EACA,EAA+B,CAAC,EACU,CAC1C,IAAMC,EAAQP,EAAAA,gBAAgB,EACxB,CAAE,iBAAkBC,EAAAA,aAAa,EACjCO,EAASC,EAAQ,OAASL,EAC1BM,EAAQ,GACZC,IAAc,IAAA,IAAaH,EAAM,SAASG,CAAS,EAC/CC,EAAgB,GACpB,OAAOD,GAAc,UAAYN,EAAY,SAASM,CAAS,EAWjE,MAAO,CAAE,MATND,EAAKG,CAAI,EAAIA,EAAO,IAAA,MACpBH,EAAKH,GAAO,IAAI,EAAIA,EAAM,KAAO,IAAA,MACjCG,EAAKI,EAAc,IAAI,EAAIA,EAAc,KAAO,IAAA,KACjDL,EAAQ,aACP,SAK0B,YAH1BG,EAAaG,CAAU,EAAIA,EAAa,IAAA,MACxCH,EAAaE,EAAc,UAAU,EAAIA,EAAc,WAAa,IAAA,KACrE,SAC0D,CAC9D,CAUA,SAAgBE,EAAiB,EAAmC,CAElE,OADI,OAAOH,GAAS,SAAiBA,EAC9B,OAAOA,GAAS,UAAY,QAAQ,KAAKA,CAAI,EAAI,OAAOA,CAAI,EAAI,IAAA,EACzE"}

package/dist/components/input/inputLook.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { useFieldContext as e } from "../../hooks/useFieldControl.mjs";
+import { useWaveTheme as t } from "../provider/WaveProvider.mjs";
+//#region src/components/input/inputLook.ts
+var n = [
+	"small",
+	"medium",
+	"large"
+], r = [
+	"outline",
+	"underline",
+	"filled-darker",
+	"filled-lighter"
+];
+function i(i, a, o = {}) {
+	let s = e(), { inputDefaults: c } = t(), l = o.sizes ?? n, u = (e) => e !== void 0 && l.includes(e), d = (e) => typeof e == "string" && r.includes(e);
+	return {
+		size: (u(i) ? i : void 0) ?? (u(s?.size) ? s.size : void 0) ?? (u(c.size) ? c.size : void 0) ?? o.defaultSize ?? "medium",
+		appearance: (d(a) ? a : void 0) ?? (d(c.appearance) ? c.appearance : void 0) ?? "outline"
+	};
+}
+function a(e) {
+	return typeof e == "number" ? e : typeof e == "string" && /^\d+$/.test(e) ? Number(e) : void 0;
+}
+//#endregion
+export { a as legacyNativeSize, i as useInputLook };
+
+//# sourceMappingURL=inputLook.mjs.map

package/dist/components/input/inputLook.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputLook.mjs","names":["CORE_SIZES","APPEARANCES","useInputLook","field","useFieldContext","useWaveTheme","sizes","options","fits","candidate","isAppearance","size","inputDefaults","appearance","legacyNativeSize"],"sources":["../../../src/components/input/inputLook.ts"],"sourcesContent":["import type { CoreSize, InputAppearance, Size } from '../../lib/types';\nimport { useFieldContext } from '../../hooks/useFieldControl';\nimport { useWaveTheme } from '../provider/WaveProvider';\n\nconst CORE_SIZES: readonly CoreSize[] = ['small', 'medium', 'large'];\nconst APPEARANCES: readonly string[] = [\n  'outline',\n  'underline',\n  'filled-darker',\n  'filled-lighter',\n] satisfies readonly InputAppearance[];\n\n/** Options of {@link useInputLook}. */\nexport interface InputLookOptions<S extends Size> {\n  /**\n   * The sizes the control supports; an own, Field or provider size outside them is skipped.\n   * @default the three core sizes (`small`, `medium`, `large`)\n   */\n  sizes?: readonly S[];\n  /**\n   * The size when nothing else applies. Pass it when `sizes` leaves out `medium`: the fallback is\n   * not checked against `sizes`.\n   * @default 'medium'\n   */\n  defaultSize?: S;\n}\n\n/**\n * The size and appearance a text control or picker renders (Phase 4 D6): its own props, then the\n * surrounding Field's `size`, then `WaveProvider inputDefaults`, then the defaults (`medium`,\n * `outline`). `undefined` props fall through like absent ones, and so do values outside the\n * unions (from untyped code: plain JS, CMS config, an untyped `inputDefaults`): an own or provider\n * size outside `sizes`, or an appearance other than the four, is skipped, so the returned values\n * (and the `data-size`/`data-appearance` attributes built from them) are always supported ones.\n *\n * @internal Not exported from the package.\n */\nexport function useInputLook<S extends Size = CoreSize>(\n  size: S | undefined,\n  appearance: InputAppearance | undefined,\n  options: InputLookOptions<S> = {},\n): { size: S; appearance: InputAppearance } {\n  const field = useFieldContext();\n  const { inputDefaults } = useWaveTheme();\n  const sizes = (options.sizes ?? CORE_SIZES) as readonly Size[];\n  const fits = (candidate: Size | undefined): candidate is S =>\n    candidate !== undefined && sizes.includes(candidate);\n  const isAppearance = (candidate: unknown): candidate is InputAppearance =>\n    typeof candidate === 'string' && APPEARANCES.includes(candidate);\n  const resolvedSize =\n    (fits(size) ? size : undefined) ??\n    (fits(field?.size) ? field.size : undefined) ??\n    (fits(inputDefaults.size) ? inputDefaults.size : undefined) ??\n    options.defaultSize ??\n    ('medium' as S);\n  const resolvedAppearance =\n    (isAppearance(appearance) ? appearance : undefined) ??\n    (isAppearance(inputDefaults.appearance) ? inputDefaults.appearance : undefined) ??\n    'outline';\n  return { size: resolvedSize, appearance: resolvedAppearance };\n}\n\n/**\n * The numeric legacy form of `size` on Input and Select (the native attribute, deprecated in\n * favour of `htmlSize`): a number, or a string of digits only, which untyped code wrote HTML style\n * before 0.9 (`size=\"20\"`). `undefined` for anything else, which `useInputLook` then resolves as a\n * design size.\n *\n * @internal Not exported from the package.\n */\nexport function legacyNativeSize(size: unknown): number | undefined {\n  if (typeof size === 'number') return size;\n  return typeof size === 'string' && /^\\d+$/.test(size) ? Number(size) : undefined;\n}\n"],"mappings":";;;;AAIA,IAAMA,IAAkC;CAAC;CAAS;CAAU;AAAO,GAC7DC,IAAiC;CACrC;CACA;CACA;CACA;AACF;AA2BA,SAAgBC,EACd,GACA,GACA,IAA+B,CAAC,GACU;CAC1C,IAAMC,IAAQC,EAAgB,GACxB,EAAE,qBAAkBC,EAAa,GACjCC,IAASC,EAAQ,SAASP,GAC1BQ,KAAQ,MACZC,MAAc,KAAA,KAAaH,EAAM,SAASG,CAAS,GAC/CC,KAAgB,MACpB,OAAOD,KAAc,YAAYR,EAAY,SAASQ,CAAS;CAWjE,OAAO;EAAE,OATND,EAAKG,CAAI,IAAIA,IAAO,KAAA,OACpBH,EAAKL,GAAO,IAAI,IAAIA,EAAM,OAAO,KAAA,OACjCK,EAAKI,EAAc,IAAI,IAAIA,EAAc,OAAO,KAAA,MACjDL,EAAQ,eACP;EAK0B,aAH1BG,EAAaG,CAAU,IAAIA,IAAa,KAAA,OACxCH,EAAaE,EAAc,UAAU,IAAIA,EAAc,aAAa,KAAA,MACrE;CAC0D;AAC9D;AAUA,SAAgBE,EAAiB,GAAmC;CAElE,OADI,OAAOH,KAAS,WAAiBA,IAC9B,OAAOA,KAAS,YAAY,QAAQ,KAAKA,CAAI,IAAI,OAAOA,CAAI,IAAI,KAAA;AACzE"}

package/dist/components/input/pickerStyles.cjs

@@ -1,2 +1,2 @@
-"use client";var e=`absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground`;function t(e){return e>=2?`pe-14`:e===1?`pe-8`:void 0}exports.PICKER_ICON_BUTTON_CLASSES=e,exports.pickerEndPadding=t;
+"use client";const e=require("../../lib/cn.cjs"),t=require("../../lib/styles.cjs");var n=`absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground`,r={small:e.cn(`size-5`,t.hitAreaLayer),medium:``,large:`size-8`};function i(t=`medium`,i=`outline`){return e.cn(n,r[t],i===`filled-darker`&&`not-disabled:not-aria-disabled:hover:bg-subtle-pressed`)}var a={small:[`end-1`,`end-7`],medium:[`end-1`,`end-7`],large:[`end-1`,`end-9`]};function o(e,t){return a[e][t-1]}var s={small:[`pe-7`,`pe-13`],medium:[`pe-8`,`pe-14`],large:[`pe-10`,`pe-18`]},c={small:{chevron:12,icon:12},medium:{chevron:12,icon:16},large:{chevron:16,icon:20}};function l(e,t){return c[e][t]}function u(e,t=`medium`){if(!(e<=0))return s[t][+(e>=2)]}exports.PICKER_ICON_BUTTON_CLASSES=n,exports.pickerButtonOffset=o,exports.pickerEndPadding=u,exports.pickerGlyphSize=l,exports.pickerIconButtonClasses=i;
 //# sourceMappingURL=pickerStyles.cjs.map

package/dist/components/input/pickerStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pickerStyles.cjs","names":["PICKER_ICON_BUTTON_CLASSES","pickerEndPadding","buttons"],"sources":["../../../src/components/input/pickerStyles.ts"],"sourcesContent":["/**\n * Classes shared by the pickers of the combobox family (Combobox, Dropdown, TimePicker).\n * Component-private: not exported from the package.\n */\n\n/**\n * An icon button at the end of a picker's control (its clear and expand buttons): a 24×24px\n * target that the caller positions (`end-1`, `end-7`) and gives `focusRing` and `disabledStyles`.\n * It sets its own padding and background (C-NATIVE: an app-wide `button` rule would otherwise pad\n * and fill it) and gates its hover colors on the enabled state.\n */\nexport const PICKER_ICON_BUTTON_CLASSES =\n  'absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground';\n\n/**\n * The end padding that keeps a picker's text clear of the buttons at its end: `pe-8` for one\n * button, `pe-14` for two, nothing without one.\n */\nexport function pickerEndPadding(buttons: number): string | undefined {\n  if (buttons >= 2) return 'pe-14';\n  return buttons === 1 ? 'pe-8' : undefined;\n}\n"],"mappings":"aAWA,IAAaA,EACX,+MAMF,SAAgBC,EAAiB,EAAqC,CAEpE,OADIC,GAAW,EAAU,QAClBA,IAAY,EAAI,OAAS,IAAA,EAClC"}
+{"version":3,"file":"pickerStyles.cjs","names":["cn","hitAreaLayer","require_cn","require_styles","PICKER_ICON_BUTTON_CLASSES","BUTTON_BOX","pickerIconButtonClasses","size","appearance","BUTTON_OFFSETS","pickerButtonOffset","position","END_PADDINGS","GLYPHS","pickerGlyphSize","kind","pickerEndPadding"],"sources":["../../../src/components/input/pickerStyles.ts"],"sourcesContent":["/**\n * Classes shared by the pickers of the combobox family (Combobox, Dropdown, TimePicker).\n * Component-private: not exported from the package.\n */\n\nimport { cn } from '../../lib/cn';\nimport { hitAreaLayer } from '../../lib/styles';\nimport type { CoreSize, InputAppearance } from '../../lib/types';\n\n/**\n * An icon button at the end of a picker's control (its clear and expand buttons): a 24×24px\n * target that the caller positions (`end-1`, `end-7`) and gives `focusRing` and `disabledStyles`.\n * It sets its own padding and background (C-NATIVE: an app-wide `button` rule would otherwise pad\n * and fill it) and gates its hover colors on the enabled state.\n */\nexport const PICKER_ICON_BUTTON_CLASSES =\n  'absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground';\n\n/** The button box of each size: 20px with a 24px hit layer, 24px (the 0.7 box) or 32px. */\nconst BUTTON_BOX: Readonly<Record<CoreSize, string>> = {\n  small: cn('size-5', hitAreaLayer),\n  medium: '',\n  large: 'size-8',\n};\n\n/**\n * The classes of a picker's icon button at a size and appearance (Phase 4 D11): the 0.7 classes,\n * the size's box and, on `filled-darker`, a hover fill one step darker than the field.\n */\nexport function pickerIconButtonClasses(\n  size: CoreSize = 'medium',\n  appearance: InputAppearance = 'outline',\n): string {\n  return cn(\n    PICKER_ICON_BUTTON_CLASSES,\n    BUTTON_BOX[size],\n    appearance === 'filled-darker' && 'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n  );\n}\n\nconst BUTTON_OFFSETS: Readonly<Record<CoreSize, readonly [string, string]>> = {\n  small: ['end-1', 'end-7'],\n  medium: ['end-1', 'end-7'],\n  large: ['end-1', 'end-9'],\n};\n\n/** The inline-end offset of a picker's first or second icon button (the second sits before it). */\nexport function pickerButtonOffset(size: CoreSize, position: 1 | 2): string {\n  return BUTTON_OFFSETS[size][position - 1];\n}\n\nconst END_PADDINGS: Readonly<Record<CoreSize, readonly [string, string]>> = {\n  small: ['pe-7', 'pe-13'],\n  medium: ['pe-8', 'pe-14'],\n  large: ['pe-10', 'pe-18'],\n};\n\n/** The glyph sizes of each size: the chevron, and the other icons (clear, calendar). */\nconst GLYPHS: Readonly<Record<CoreSize, { chevron: number; icon: number }>> = {\n  small: { chevron: 12, icon: 12 },\n  medium: { chevron: 12, icon: 16 },\n  large: { chevron: 16, icon: 20 },\n};\n\n/** The pixel size of a picker glyph at a size. */\nexport function pickerGlyphSize(size: CoreSize, kind: 'chevron' | 'icon'): number {\n  return GLYPHS[size][kind];\n}\n\n/**\n * The end padding that keeps a picker's text clear of the buttons at its end: per size and button\n * count (one or two buttons at the end). At medium (the default), `pe-8` for one button, `pe-14`\n * for two, nothing without one.\n */\nexport function pickerEndPadding(buttons: number, size: CoreSize = 'medium'): string | undefined {\n  if (buttons <= 0) return undefined;\n  return END_PADDINGS[size][buttons >= 2 ? 1 : 0];\n}\n"],"mappings":"mFAeA,IAAaI,EACX,+MAGIC,EAAiD,CACrD,MAAOL,EAAAA,GAAG,SAAUC,EAAAA,YAAY,EAChC,OAAQ,GACR,MAAO,QACT,EAMA,SAAgBK,EACd,EAAiB,SACjB,EAA8B,UACtB,CACR,OAAON,EAAAA,GACLI,EACAC,EAAWE,GACXC,IAAe,iBAAmB,wDACpC,CACF,CAEA,IAAMC,EAAwE,CAC5E,MAAO,CAAC,QAAS,OAAO,EACxB,OAAQ,CAAC,QAAS,OAAO,EACzB,MAAO,CAAC,QAAS,OAAO,CAC1B,EAGA,SAAgBC,EAAmB,EAAgB,EAAyB,CAC1E,OAAOD,EAAeF,EAAK,CAACI,EAAW,EACzC,CAEA,IAAMC,EAAsE,CAC1E,MAAO,CAAC,OAAQ,OAAO,EACvB,OAAQ,CAAC,OAAQ,OAAO,EACxB,MAAO,CAAC,QAAS,OAAO,CAC1B,EAGMC,EAAwE,CAC5E,MAAO,CAAE,QAAS,GAAI,KAAM,EAAG,EAC/B,OAAQ,CAAE,QAAS,GAAI,KAAM,EAAG,EAChC,MAAO,CAAE,QAAS,GAAI,KAAM,EAAG,CACjC,EAGA,SAAgBC,EAAgB,EAAgB,EAAkC,CAChF,OAAOD,EAAON,EAAK,CAACQ,EACtB,CAOA,SAAgBC,EAAiB,EAAiB,EAAiB,SAA8B,CAC/F,GAAI,KAAW,GACf,OAAOJ,EAAaL,EAAK,CAAC,KAAW,GACvC"}

package/dist/components/input/pickerStyles.mjs

@@ -1,10 +1,48 @@
 "use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { hitAreaLayer as t } from "../../lib/styles.mjs";
 //#region src/components/input/pickerStyles.ts
-var e = "absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground";
-function t(e) {
-	return e >= 2 ? "pe-14" : e === 1 ? "pe-8" : void 0;
+var n = "absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground", r = {
+	small: e("size-5", t),
+	medium: "",
+	large: "size-8"
+};
+function i(t = "medium", i = "outline") {
+	return e(n, r[t], i === "filled-darker" && "not-disabled:not-aria-disabled:hover:bg-subtle-pressed");
+}
+var a = {
+	small: ["end-1", "end-7"],
+	medium: ["end-1", "end-7"],
+	large: ["end-1", "end-9"]
+};
+function o(e, t) {
+	return a[e][t - 1];
+}
+var s = {
+	small: ["pe-7", "pe-13"],
+	medium: ["pe-8", "pe-14"],
+	large: ["pe-10", "pe-18"]
+}, c = {
+	small: {
+		chevron: 12,
+		icon: 12
+	},
+	medium: {
+		chevron: 12,
+		icon: 16
+	},
+	large: {
+		chevron: 16,
+		icon: 20
+	}
+};
+function l(e, t) {
+	return c[e][t];
+}
+function u(e, t = "medium") {
+	if (!(e <= 0)) return s[t][+(e >= 2)];
 }
 //#endregion
-export { e as PICKER_ICON_BUTTON_CLASSES, t as pickerEndPadding };
+export { n as PICKER_ICON_BUTTON_CLASSES, o as pickerButtonOffset, u as pickerEndPadding, l as pickerGlyphSize, i as pickerIconButtonClasses };
 
 //# sourceMappingURL=pickerStyles.mjs.map

package/dist/components/input/pickerStyles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pickerStyles.mjs","names":["PICKER_ICON_BUTTON_CLASSES","pickerEndPadding","buttons"],"sources":["../../../src/components/input/pickerStyles.ts"],"sourcesContent":["/**\n * Classes shared by the pickers of the combobox family (Combobox, Dropdown, TimePicker).\n * Component-private: not exported from the package.\n */\n\n/**\n * An icon button at the end of a picker's control (its clear and expand buttons): a 24×24px\n * target that the caller positions (`end-1`, `end-7`) and gives `focusRing` and `disabledStyles`.\n * It sets its own padding and background (C-NATIVE: an app-wide `button` rule would otherwise pad\n * and fill it) and gates its hover colors on the enabled state.\n */\nexport const PICKER_ICON_BUTTON_CLASSES =\n  'absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground';\n\n/**\n * The end padding that keeps a picker's text clear of the buttons at its end: `pe-8` for one\n * button, `pe-14` for two, nothing without one.\n */\nexport function pickerEndPadding(buttons: number): string | undefined {\n  if (buttons >= 2) return 'pe-14';\n  return buttons === 1 ? 'pe-8' : undefined;\n}\n"],"mappings":";;AAWA,IAAaA,IACX;AAMF,SAAgBC,EAAiB,GAAqC;CAEpE,OADIC,KAAW,IAAU,UAClBA,MAAY,IAAI,SAAS,KAAA;AAClC"}
+{"version":3,"file":"pickerStyles.mjs","names":["PICKER_ICON_BUTTON_CLASSES","BUTTON_BOX","cn","hitAreaLayer","pickerIconButtonClasses","size","appearance","BUTTON_OFFSETS","pickerButtonOffset","position","END_PADDINGS","GLYPHS","pickerGlyphSize","kind","pickerEndPadding"],"sources":["../../../src/components/input/pickerStyles.ts"],"sourcesContent":["/**\n * Classes shared by the pickers of the combobox family (Combobox, Dropdown, TimePicker).\n * Component-private: not exported from the package.\n */\n\nimport { cn } from '../../lib/cn';\nimport { hitAreaLayer } from '../../lib/styles';\nimport type { CoreSize, InputAppearance } from '../../lib/types';\n\n/**\n * An icon button at the end of a picker's control (its clear and expand buttons): a 24×24px\n * target that the caller positions (`end-1`, `end-7`) and gives `focusRing` and `disabledStyles`.\n * It sets its own padding and background (C-NATIVE: an app-wide `button` rule would otherwise pad\n * and fill it) and gates its hover colors on the enabled state.\n */\nexport const PICKER_ICON_BUTTON_CLASSES =\n  'absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground';\n\n/** The button box of each size: 20px with a 24px hit layer, 24px (the 0.7 box) or 32px. */\nconst BUTTON_BOX: Readonly<Record<CoreSize, string>> = {\n  small: cn('size-5', hitAreaLayer),\n  medium: '',\n  large: 'size-8',\n};\n\n/**\n * The classes of a picker's icon button at a size and appearance (Phase 4 D11): the 0.7 classes,\n * the size's box and, on `filled-darker`, a hover fill one step darker than the field.\n */\nexport function pickerIconButtonClasses(\n  size: CoreSize = 'medium',\n  appearance: InputAppearance = 'outline',\n): string {\n  return cn(\n    PICKER_ICON_BUTTON_CLASSES,\n    BUTTON_BOX[size],\n    appearance === 'filled-darker' && 'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n  );\n}\n\nconst BUTTON_OFFSETS: Readonly<Record<CoreSize, readonly [string, string]>> = {\n  small: ['end-1', 'end-7'],\n  medium: ['end-1', 'end-7'],\n  large: ['end-1', 'end-9'],\n};\n\n/** The inline-end offset of a picker's first or second icon button (the second sits before it). */\nexport function pickerButtonOffset(size: CoreSize, position: 1 | 2): string {\n  return BUTTON_OFFSETS[size][position - 1];\n}\n\nconst END_PADDINGS: Readonly<Record<CoreSize, readonly [string, string]>> = {\n  small: ['pe-7', 'pe-13'],\n  medium: ['pe-8', 'pe-14'],\n  large: ['pe-10', 'pe-18'],\n};\n\n/** The glyph sizes of each size: the chevron, and the other icons (clear, calendar). */\nconst GLYPHS: Readonly<Record<CoreSize, { chevron: number; icon: number }>> = {\n  small: { chevron: 12, icon: 12 },\n  medium: { chevron: 12, icon: 16 },\n  large: { chevron: 16, icon: 20 },\n};\n\n/** The pixel size of a picker glyph at a size. */\nexport function pickerGlyphSize(size: CoreSize, kind: 'chevron' | 'icon'): number {\n  return GLYPHS[size][kind];\n}\n\n/**\n * The end padding that keeps a picker's text clear of the buttons at its end: per size and button\n * count (one or two buttons at the end). At medium (the default), `pe-8` for one button, `pe-14`\n * for two, nothing without one.\n */\nexport function pickerEndPadding(buttons: number, size: CoreSize = 'medium'): string | undefined {\n  if (buttons <= 0) return undefined;\n  return END_PADDINGS[size][buttons >= 2 ? 1 : 0];\n}\n"],"mappings":";;;;AAeA,IAAaA,IACX,gNAGIC,IAAiD;CACrD,OAAOC,EAAG,UAAUC,CAAY;CAChC,QAAQ;CACR,OAAO;AACT;AAMA,SAAgBC,EACd,IAAiB,UACjB,IAA8B,WACtB;CACR,OAAOF,EACLF,GACAC,EAAWI,IACXC,MAAe,mBAAmB,wDACpC;AACF;AAEA,IAAMC,IAAwE;CAC5E,OAAO,CAAC,SAAS,OAAO;CACxB,QAAQ,CAAC,SAAS,OAAO;CACzB,OAAO,CAAC,SAAS,OAAO;AAC1B;AAGA,SAAgBC,EAAmB,GAAgB,GAAyB;CAC1E,OAAOD,EAAeF,EAAK,CAACI,IAAW;AACzC;AAEA,IAAMC,IAAsE;CAC1E,OAAO,CAAC,QAAQ,OAAO;CACvB,QAAQ,CAAC,QAAQ,OAAO;CACxB,OAAO,CAAC,SAAS,OAAO;AAC1B,GAGMC,IAAwE;CAC5E,OAAO;EAAE,SAAS;EAAI,MAAM;CAAG;CAC/B,QAAQ;EAAE,SAAS;EAAI,MAAM;CAAG;CAChC,OAAO;EAAE,SAAS;EAAI,MAAM;CAAG;AACjC;AAGA,SAAgBC,EAAgB,GAAgB,GAAkC;CAChF,OAAOD,EAAON,EAAK,CAACQ;AACtB;AAOA,SAAgBC,EAAiB,GAAiB,IAAiB,UAA8B;CAC/F,IAAI,OAAW,IACf,OAAOJ,EAAaL,EAAK,CAAC,OAAW;AACvC"}

package/dist/components/layout/Accordion.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../hooks/useControllable.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../lib/styles.cjs"),c=require("../../lib/icons.cjs"),l=require("./disclosureIds.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=u.createContext(null),p=u.createContext(null),m=u.createContext(null),h=[],g={openItems:h,toggle:()=>{},registerItem:()=>()=>{},baseId:`wave-accordion-inert`,headingLevel:3},_={value:``,isOpen:!1,triggerId:`wave-accordion-inert-trigger`,panelId:`wave-accordion-inert-panel`,hasPanelContent:!1,headingLevel:3,toggle:()=>{}},v={extra:null,inPanel:!0},y=u.createContext(!1),b=`m-0 grid`;function x(e){return u.useContext(f)||(r.reportMissingContext(e,`<Accordion>`),g)}function S(e){return u.useContext(p)||(r.reportMissingContext(e,`<Accordion.Item>`),_)}function C(e){r.warnOnce(`Accordion:duplicate:${e}`,`Accordion: several items share the value "${e}". Item values must be unique within an Accordion; items with the same value open and close together and share their trigger and panel ids.`)}function w(e){if(e!==void 0)return e===null?h:[e]}var T=e=>{let{type:n,openItem:i,defaultOpenItem:s,onOpenItemChange:c,openItems:l,defaultOpenItems:g,onOpenItemsChange:_,headingLevel:v=3,className:b,children:x,ref:S,...T}=e,E=n===`multiple`;E||(l!==void 0&&r.warnDeprecated(`Accordion`,`openItems`,`openItem`,`In single mode the Accordion takes one value.`),g!==void 0&&r.warnDeprecated(`Accordion`,`defaultOpenItems`,`defaultOpenItem`,`In single mode the Accordion takes one value.`),_!==void 0&&r.warnDeprecated(`Accordion`,`onOpenItemsChange`,`onOpenItemChange`,`In single mode the Accordion reports one value.`));let D=E?void 0:i,O=u.useMemo(()=>w(D)??l,[D,l]),[k]=u.useState(()=>(E?void 0:w(s))??g??h),[A,j]=a.useControllable(O,k,e=>{let t=[...e];E||c?.(t[0]??null),_?.(t)}),M=A.length;u.useEffect(()=>{!E&&M>1&&r.warnOnce(`Accordion:single-multiple-open`,`Accordion: type="single" allows one open item, but ${M} are open. Pass \`openItem\`, or use type="multiple".`)},[E,M]);let N=u.useCallback(e=>{j(t=>t.includes(e)?t.filter(t=>t!==e):E?[...t,e]:[e])},[E,j]),P=u.useRef(null),F=u.useCallback(e=>{P.current??=new Map;let t=P.current,n=(t.get(e)??0)+1;return t.set(e,n),n>1&&C(e),()=>{let n=(t.get(e)??1)-1;n>0?t.set(e,n):t.delete(e)}},[]),I=o.useId(`accordion`),L=u.useMemo(()=>({openItems:A,toggle:N,registerItem:F,baseId:I,headingLevel:v}),[A,N,F,I,v]);return(0,d.jsx)(f.Provider,{value:L,children:(0,d.jsx)(p.Provider,{value:null,children:(0,d.jsx)(m.Provider,{value:null,children:(0,d.jsx)(y.Provider,{value:!1,children:(0,d.jsx)(`div`,{ref:S,className:t.cn(`divide-y divide-border`,b),...T,children:x})})})})})};T.displayName=`Accordion`;function E(e,t,r){if(Array.isArray(e)){for(let n of e){let e=E(n,t,r);if(e)return e}return}if(!u.isValidElement(e))return;let i=n.getElementType(e,{suspend:!1});if(i===t)return e;if(i!==r&&i!==T&&i!==A)return E(e.props.children,t,r)}function D(e){let t=e?.props.id;return typeof t==`string`&&t!==``?t:void 0}function O(e){if(!u.isValidElement(e))return!1;let t=n.getElementType(e,{suspend:!1});if(typeof t==`string`||t===j||t===M||t===T||t===A)return!1;let r=e.props.children;return n.getElementType(r,{suspend:!1})===j||O(r)}function k(e){return`${e} was rendered inside the panel of an Accordion.Item, so it is not the item's ${e===`Accordion.Trigger`?`header`:`panel`}. Place Accordion.Trigger and Accordion.Panel directly in Accordion.Item, in a Fragment, or in an element that wraps them as \`children\` (such as a Tooltip). The Item cannot see inside a component that renders them itself and treats that component as panel content.`}var A=({value:e,headingLevel:r,className:i,children:a,ref:o,...s})=>{let c=x(`Accordion.Item`),f=c.openItems.includes(e),{toggle:h,baseId:g,registerItem:_}=c;u.useEffect(()=>_(e),[_,e]);let v=r??c.headingLevel,S=`h${v}`,C,w,T=[],k=[];for(let{key:e,node:t}of n.flattenChildren(a)){let n=(0,d.jsx)(u.Fragment,{children:t},e),r=E(t,j,M),i=E(t,M,j);r||i?(C??=r,w??=i,T.push(O(t)?(0,d.jsx)(S,{className:b,children:(0,d.jsx)(y.Provider,{value:!0,children:t})},e):n)):k.push(n)}let A=C!==void 0,N=w!==void 0,P=D(C),F=D(w),I=N||k.length>0,L=N&&k.length>0?k:null,R=u.useMemo(()=>({value:e,isOpen:f,triggerId:P??l.getPartId(g,`trigger`,e),panelId:F??l.getPartId(g,`panel`,e),hasPanelContent:I,headingLevel:v,toggle:()=>h(e)}),[e,f,g,P,F,I,v,h]),z=u.useMemo(()=>({extra:L,inPanel:!1}),[L]);return(0,d.jsx)(p.Provider,{value:R,children:(0,d.jsx)(m.Provider,{value:z,children:(0,d.jsxs)(`div`,{ref:o,"data-state":f?`open`:`closed`,className:t.cn(i),...s,children:[A?null:(0,d.jsx)(j,{children:e}),T,!N&&k.length>0?(0,d.jsx)(M,{children:k}):null]})})})};A.displayName=`AccordionItem`;var j=({id:e,className:n,children:a,onClick:o,ref:l,...f})=>{let p=S(`Accordion.Trigger`),h=u.useContext(m)?.inPanel??!1;u.useEffect(()=>{h&&r.warnOnce(`Accordion.Trigger:inside-panel`,k(`Accordion.Trigger`))},[h]);let g=u.useContext(y),_=`h${p.headingLevel}`,v=p.isOpen?`open`:`closed`,x=(0,d.jsxs)(`button`,{type:`button`,className:t.cn(`flex w-full items-center justify-between gap-2 px-4 py-3 text-start text-body-1 font-semibold text-foreground`,`not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed`,s.disabledStyles,s.focusRingInset,n),...f,id:e||(h?void 0:p.triggerId),"aria-controls":!h&&p.hasPanelContent?p.panelId:void 0,"aria-expanded":p.isOpen,"data-state":v,onClick:i.composeEventHandlers(o,p.toggle),ref:l,children:[a,(0,d.jsx)(c.ChevronDownIcon,{size:16,className:t.cn(`shrink-0 transition-transform motion-reduce:transition-none`,p.isOpen&&`rotate-180`)})]});return g?x:(0,d.jsx)(_,{className:b,children:x})};j.displayName=`AccordionTrigger`;var M=({id:e,className:n,children:i,ref:a,...o})=>{let s=S(`Accordion.Panel`),c=u.useContext(m),l=c?.inPanel??!1;return u.useEffect(()=>{l&&r.warnOnce(`Accordion.Panel:inside-panel`,k(`Accordion.Panel`))},[l]),s.isOpen?l?(0,d.jsx)(`div`,{className:t.cn(n),...o,id:e||void 0,ref:a,children:i}):(0,d.jsx)(m.Provider,{value:v,children:(0,d.jsxs)(`div`,{role:`region`,className:t.cn(`px-4 pb-3 text-body-1 text-muted-foreground`,n),...o,id:e||s.panelId,"aria-labelledby":s.triggerId,"data-state":`open`,ref:a,children:[i,c?.extra]})}):null};M.displayName=`AccordionPanel`;var N=Object.assign(T,{Item:A,Trigger:j,Panel:M});exports.Accordion=N,exports.AccordionItem=A,exports.AccordionPanel=M,exports.AccordionTrigger=j;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useControllable.cjs"),s=require("../../hooks/useId.cjs"),c=require("../../lib/styles.cjs"),l=require("../../lib/icons.cjs"),u=require("./disclosureIds.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=d.createContext(null),m=d.createContext(null),h=d.createContext(null),g=[],_={openItems:g,toggle:()=>{},registerItem:()=>()=>{},baseId:`wave-accordion-inert`,headingLevel:3},v={value:``,isOpen:!1,triggerId:`wave-accordion-inert-trigger`,panelId:`wave-accordion-inert-panel`,hasPanelContent:!1,headingLevel:3,toggle:()=>{}},y={extra:null,inPanel:!0},b=d.createContext(!1),x=`m-0 grid`;function S(e){return d.useContext(p)||(r.reportMissingContext(e,`<Accordion>`),_)}function C(e){return d.useContext(m)||(r.reportMissingContext(e,`<Accordion.Item>`),v)}function w(e){r.warnOnce(`Accordion:duplicate:${e}`,`Accordion: several items share the value "${e}". Item values must be unique within an Accordion; items with the same value open and close together and share their trigger and panel ids.`)}function T(e){if(e!==void 0)return e===null?g:[e]}var E=e=>{let{type:n,openItem:i,defaultOpenItem:c,onOpenItemChange:l,openItems:u,defaultOpenItems:_,onOpenItemsChange:v,headingLevel:y=3,className:x,children:S,ref:C,...E}=e,D=n===`multiple`;D||(u!==void 0&&r.warnDeprecated(`Accordion`,`openItems`,`openItem`,`In single mode the Accordion takes one value.`),_!==void 0&&r.warnDeprecated(`Accordion`,`defaultOpenItems`,`defaultOpenItem`,`In single mode the Accordion takes one value.`),v!==void 0&&r.warnDeprecated(`Accordion`,`onOpenItemsChange`,`onOpenItemChange`,`In single mode the Accordion reports one value.`));let O=D?void 0:i,k=d.useMemo(()=>T(O)??u,[O,u]),[A]=d.useState(()=>(D?void 0:T(c))??_??g),[j,M]=o.useControllable(k,A,e=>{let t=[...e];D||l?.(t[0]??null),v?.(t)}),N=j.length;d.useEffect(()=>{!D&&N>1&&r.warnOnce(`Accordion:single-multiple-open`,`Accordion: type="single" allows one open item, but ${N} are open. Pass \`openItem\`, or use type="multiple".`)},[D,N]);let P=d.useCallback(e=>{M(t=>t.includes(e)?t.filter(t=>t!==e):D?[...t,e]:[e])},[D,M]),F=d.useRef(null),I=d.useCallback(e=>{F.current??=new Map;let t=F.current,n=(t.get(e)??0)+1;return t.set(e,n),n>1&&w(e),()=>{let n=(t.get(e)??1)-1;n>0?t.set(e,n):t.delete(e)}},[]),L=s.useId(`accordion`),R=d.useMemo(()=>({openItems:j,toggle:P,registerItem:I,baseId:L,headingLevel:y}),[j,P,I,L,y]);return(0,f.jsx)(p.Provider,{value:R,children:(0,f.jsx)(m.Provider,{value:null,children:(0,f.jsx)(h.Provider,{value:null,children:(0,f.jsx)(b.Provider,{value:!1,children:(0,f.jsx)(`div`,{ref:C,className:t.cn(a.accordionClassNames.root,`divide-y divide-border`,x),...E,children:S})})})})})};E.displayName=`Accordion`;function D(e,t,r){if(Array.isArray(e)){for(let n of e){let e=D(n,t,r);if(e)return e}return}if(!d.isValidElement(e))return;let i=n.getElementType(e,{suspend:!1});if(i===t)return e;if(i!==r&&i!==E&&i!==j)return D(e.props.children,t,r)}function O(e){let t=e?.props.id;return typeof t==`string`&&t!==``?t:void 0}function k(e){if(!d.isValidElement(e))return!1;let t=n.getElementType(e,{suspend:!1});if(typeof t==`string`||t===M||t===N||t===E||t===j)return!1;let r=e.props.children;return n.getElementType(r,{suspend:!1})===M||k(r)}function A(e){return`${e} was rendered inside the panel of an Accordion.Item, so it is not the item's ${e===`Accordion.Trigger`?`header`:`panel`}. Place Accordion.Trigger and Accordion.Panel directly in Accordion.Item, in a Fragment, or in an element that wraps them as \`children\` (such as a Tooltip). The Item cannot see inside a component that renders them itself and treats that component as panel content.`}var j=({value:e,headingLevel:r,className:i,children:o,ref:s,...c})=>{let l=S(`Accordion.Item`),p=l.openItems.includes(e),{toggle:g,baseId:_,registerItem:v}=l;d.useEffect(()=>v(e),[v,e]);let y=r??l.headingLevel,C=`h${y}`,w,T,E=[],A=[];for(let{key:e,node:r}of n.flattenChildren(o)){let n=(0,f.jsx)(d.Fragment,{children:r},e),i=D(r,M,N),o=D(r,N,M);i||o?(w??=i,T??=o,E.push(k(r)?(0,f.jsx)(C,{className:t.cn(a.accordionTriggerClassNames.heading,x),children:(0,f.jsx)(b.Provider,{value:!0,children:r})},e):n)):A.push(n)}let j=w!==void 0,P=T!==void 0,F=O(w),I=O(T),L=P||A.length>0,R=P&&A.length>0?A:null,z=d.useMemo(()=>({value:e,isOpen:p,triggerId:F??u.getPartId(_,`trigger`,e),panelId:I??u.getPartId(_,`panel`,e),hasPanelContent:L,headingLevel:y,toggle:()=>g(e)}),[e,p,_,F,I,L,y,g]),B=d.useMemo(()=>({extra:R,inPanel:!1}),[R]);return(0,f.jsx)(m.Provider,{value:z,children:(0,f.jsx)(h.Provider,{value:B,children:(0,f.jsxs)(`div`,{ref:s,"data-state":p?`open`:`closed`,className:t.cn(a.accordionItemClassNames.root,i),...c,children:[j?null:(0,f.jsx)(M,{children:e}),E,!P&&A.length>0?(0,f.jsx)(N,{children:A}):null]})})})};j.displayName=`AccordionItem`;var M=({id:e,className:n,children:o,onClick:s,ref:u,...p})=>{let m=C(`Accordion.Trigger`),g=d.useContext(h)?.inPanel??!1;d.useEffect(()=>{g&&r.warnOnce(`Accordion.Trigger:inside-panel`,A(`Accordion.Trigger`))},[g]);let _=d.useContext(b),v=`h${m.headingLevel}`,y=m.isOpen?`open`:`closed`,S=(0,f.jsxs)(`button`,{type:`button`,className:t.cn(a.accordionTriggerClassNames.root,`flex w-full items-center justify-between gap-2 px-4 py-3 text-start text-body-1 font-semibold text-foreground`,`not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed`,c.disabledStyles,c.focusRingInset,n),...p,id:e||(g?void 0:m.triggerId),"aria-controls":!g&&m.hasPanelContent?m.panelId:void 0,"aria-expanded":m.isOpen,"data-state":y,onClick:i.composeEventHandlers(s,m.toggle),ref:u,children:[o,(0,f.jsx)(l.ChevronDownIcon,{size:16,className:t.cn(a.accordionTriggerClassNames.expandIcon,`shrink-0 transition-transform motion-reduce:transition-none`,m.isOpen&&`rotate-180`)})]});return _?S:(0,f.jsx)(v,{className:t.cn(a.accordionTriggerClassNames.heading,x),children:S})};M.displayName=`AccordionTrigger`;var N=({id:e,className:n,children:i,ref:o,...s})=>{let c=C(`Accordion.Panel`),l=d.useContext(h),u=l?.inPanel??!1;return d.useEffect(()=>{u&&r.warnOnce(`Accordion.Panel:inside-panel`,A(`Accordion.Panel`))},[u]),c.isOpen?u?(0,f.jsx)(`div`,{className:t.cn(a.accordionPanelClassNames.root,n),...s,id:e||void 0,ref:o,children:i}):(0,f.jsx)(h.Provider,{value:y,children:(0,f.jsxs)(`div`,{role:`region`,className:t.cn(a.accordionPanelClassNames.root,`px-4 pb-3 text-body-1 text-muted-foreground`,n),...s,id:e||c.panelId,"aria-labelledby":c.triggerId,"data-state":`open`,ref:o,children:[i,l?.extra]})}):null};N.displayName=`AccordionPanel`;var P=Object.assign(E,{Item:j,Trigger:M,Panel:N});exports.Accordion=P,exports.AccordionItem=j,exports.AccordionPanel=N,exports.AccordionTrigger=M;
 //# sourceMappingURL=Accordion.cjs.map