@weasel-js/ui 1.1.0 → 1.3.0-pre.0

package/dist/chunks/{BandEditor-D3i6l299.js → BandEditor-DKbcHG2_.js}

@@ -1,16 +1,16 @@
-import { Fragment as e, useEffect as t, useId as n, useRef as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Fragment as n, useEffect as r, useId as i, useRef as a } from "react";
 var o = {
-	root: "_root_amv2k_1",
-	label: "_label_amv2k_11",
-	ruler: "_ruler_amv2k_19",
-	tick: "_tick_amv2k_25",
-	tickLabel: "_tickLabel_amv2k_35",
-	bands: "_bands_amv2k_45",
-	band: "_band_amv2k_45",
-	selected: "_selected_amv2k_92",
-	bandContent: "_bandContent_amv2k_99",
-	seam: "_seam_amv2k_107"
+	root: "_root_1mpyk_1",
+	label: "_label_1mpyk_11",
+	ruler: "_ruler_1mpyk_19",
+	tick: "_tick_1mpyk_25",
+	tickLabel: "_tickLabel_1mpyk_35",
+	bands: "_bands_1mpyk_45",
+	band: "_band_1mpyk_45",
+	selected: "_selected_1mpyk_92",
+	bandContent: "_bandContent_1mpyk_99",
+	seam: "_seam_1mpyk_107"
 };
 //#endregion
 //#region src/components/BandEditor/scale.ts
@@ -108,11 +108,11 @@ function D(e) {
 	return t === "INPUT" || t === "TEXTAREA" || t === "SELECT";
 }
 function O(c) {
-	let { value: l, onInput: u, onChange: d, min: O, max: k, scale: A, ticks: j, renderBand: M, selectedIndex: N, onSelect: P, label: F, className: I } = c, L = c.snap ?? !0, R = c.splitBand ?? E, z = r(null), B = r(null);
-	t(() => () => {
+	let { value: l, onInput: u, onChange: d, min: O, max: k, scale: A, ticks: j, renderBand: M, selectedIndex: N, onSelect: P, label: F, className: I } = c, L = c.snap ?? !0, R = c.splitBand ?? E, z = a(null), B = a(null);
+	r(() => () => {
 		B.current?.();
 	}, []);
-	let V = n(), H = p(l, O), U = f(A, O), W = (e) => s(U.toUnit(e, O, k)), G = (e) => U.fromUnit(s(e), O, k), K = () => z.current?.getBoundingClientRect().width ?? 0, q = (e) => {
+	let V = i(), H = p(l, O), U = f(A, O), W = (e) => s(U.toUnit(e, O, k)), G = (e) => U.fromUnit(s(e), O, k), K = () => z.current?.getBoundingClientRect().width ?? 0, q = (e) => {
 		let t = z.current?.getBoundingClientRect();
 		return !t || t.width === 0 ? 0 : s((e - t.left) / t.width);
 	}, J = (e, t) => {
@@ -167,7 +167,7 @@ function O(c) {
 	}, $ = (e) => () => {
 		e !== N && P?.(e);
 	};
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ t("div", {
 		className: [o.root, I].filter(Boolean).join(" "),
 		role: "group",
 		"aria-label": typeof F == "string" ? F : void 0,
@@ -178,12 +178,12 @@ function O(c) {
 			t !== H && (e.preventDefault(), d(t), P?.(N - 1));
 		},
 		children: [
-			F !== void 0 && /* @__PURE__ */ i("div", {
+			F !== void 0 && /* @__PURE__ */ e("div", {
 				id: V,
 				className: o.label,
 				children: F
 			}),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ e("div", {
 				className: o.ruler,
 				ref: z,
 				"data-band-ruler": "",
@@ -193,50 +193,50 @@ function O(c) {
 					let t = x(H, G(q(e.clientX)), O, k, R);
 					t !== H && d(t);
 				},
-				children: j?.map((e, t) => /* @__PURE__ */ i("span", {
+				children: j?.map((t, n) => /* @__PURE__ */ e("span", {
 					className: o.tick,
-					"data-tick-at": e.at,
-					style: { "--be-at": T(W(e.at)) },
-					children: e.label !== void 0 && /* @__PURE__ */ i("span", {
+					"data-tick-at": t.at,
+					style: { "--be-at": T(W(t.at)) },
+					children: t.label !== void 0 && /* @__PURE__ */ e("span", {
 						className: o.tickLabel,
-						children: e.label
+						children: t.label
 					})
-				}, t))
+				}, n))
 			}),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ e("div", {
 				className: o.bands,
-				children: H.map((t, n) => {
-					let [r, s] = m(H, n, O, k), c = N === n;
-					return /* @__PURE__ */ a(e, { children: [/* @__PURE__ */ i("button", {
+				children: H.map((r, i) => {
+					let [a, s] = m(H, i, O, k), c = N === i;
+					return /* @__PURE__ */ t(n, { children: [/* @__PURE__ */ e("button", {
 						type: "button",
 						className: [o.band, c ? o.selected : null].filter(Boolean).join(" "),
 						style: {
-							"--be-from": T(W(r)),
+							"--be-from": T(W(a)),
 							"--be-to": T(W(s))
 						},
-						"aria-label": `Band ${n + 1}`,
+						"aria-label": `Band ${i + 1}`,
 						"aria-pressed": c,
-						"data-band-index": n,
-						onPointerDown: Q(n),
-						onFocus: $(n),
-						children: /* @__PURE__ */ i("span", {
+						"data-band-index": i,
+						onPointerDown: Q(i),
+						onFocus: $(i),
+						children: /* @__PURE__ */ e("span", {
 							className: o.bandContent,
-							children: M?.(t, n)
+							children: M?.(r, i)
 						})
-					}), n < H.length - 1 && /* @__PURE__ */ i("div", {
+					}), i < H.length - 1 && /* @__PURE__ */ e("div", {
 						role: "slider",
 						tabIndex: 0,
 						className: o.seam,
-						style: { "--be-at": T(W(H[n + 1].from)) },
-						"aria-label": `Seam ${n + 1}`,
+						style: { "--be-at": T(W(H[i + 1].from)) },
+						"aria-label": `Seam ${i + 1}`,
 						"aria-orientation": "horizontal",
-						"aria-valuemin": h(H, n, O, k)[0],
-						"aria-valuemax": h(H, n, O, k)[1],
-						"aria-valuenow": H[n + 1].from,
-						"data-seam-index": n,
-						onPointerDown: X(n),
-						onKeyDown: Z(n)
-					})] }, n);
+						"aria-valuemin": h(H, i, O, k)[0],
+						"aria-valuemax": h(H, i, O, k)[1],
+						"aria-valuenow": H[i + 1].from,
+						"data-seam-index": i,
+						onPointerDown: X(i),
+						onKeyDown: Z(i)
+					})] }, i);
 				})
 			})
 		]
@@ -245,4 +245,4 @@ function O(c) {
 //#endregion
 export { c as n, l as r, O as t };
 
-//# sourceMappingURL=BandEditor-D3i6l299.js.map
+//# sourceMappingURL=BandEditor-DKbcHG2_.js.map

package/dist/chunks/BandEditor-DKbcHG2_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BandEditor-DKbcHG2_.js","names":[],"sources":["../../src/components/BandEditor/BandEditor.module.css","../../src/components/BandEditor/scale.ts","../../src/components/BandEditor/bands.ts","../../src/components/BandEditor/BandEditor.tsx"],"sourcesContent":[".root {\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.label {\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-sm) / var(--wzl-leading-tight) var(--wzl-font-ui);\n  color: var(--wzl-fg-muted);\n}\n\n/* The ruler carries the ticks and is the split affordance: a click anywhere\n * on it divides the band underneath. The band strip below owns selection and\n * body drags, so neither gesture has to guess which the pointer meant. */\n.ruler {\n  position: relative;\n  height: var(--be-ruler-height, 20px);\n  cursor: crosshair;\n}\n\n.tick {\n  position: absolute;\n  left: var(--be-at);\n  bottom: 0;\n  width: 1px;\n  height: 6px;\n  background: var(--wzl-fg-subtle);\n  pointer-events: none;\n}\n\n.tickLabel {\n  position: absolute;\n  bottom: 7px;\n  left: 0;\n  transform: translateX(-50%);\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-xs) / var(--wzl-leading-tight) var(--wzl-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.bands {\n  position: relative;\n  height: var(--be-band-height, 34px);\n}\n\n.band {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--be-from);\n  width: calc(var(--be-to) - var(--be-from));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 0 4px;\n  margin: 0;\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-sm) / var(--wzl-leading-tight) var(--wzl-font-ui, ui-sans-serif, system-ui, sans-serif);\n  cursor: grab;\n}\n\n.band:hover {\n  background: var(--wzl-surface-hover);\n}\n\n.band:active {\n  cursor: grabbing;\n}\n\n.band:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n\n/* First and last bands are pinned to `min` / `max`, so their bodies do not\n * translate — the cursor should not promise otherwise. */\n.band:first-of-type,\n.band:last-of-type {\n  cursor: default;\n}\n\n/* Accent mixed toward transparent rather than a flat token, so the tint\n   reads over whatever surface the consumer's theme puts behind it. */\n.selected {\n  background: color-mix(in srgb, var(--wzl-accent) 22%, transparent);\n  border-color: var(--wzl-accent);\n  box-shadow: inset 0 0 0 1px var(--wzl-accent);\n  color: var(--wzl-fg);\n}\n\n.bandContent {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n/* Wider than the line it draws: a 1px seam is unhittable. */\n.seam {\n  position: absolute;\n  left: var(--be-at);\n  top: -3px;\n  bottom: -3px;\n  width: 11px;\n  margin-left: -5px;\n  z-index: 1;\n  cursor: ew-resize;\n  background: none;\n  border: none;\n}\n\n.seam::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 5px;\n  width: 1px;\n  background: var(--wzl-border-strong);\n}\n\n.seam:hover::before,\n.seam:focus-visible::before {\n  background: var(--wzl-accent);\n  width: 2px;\n}\n\n.seam:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: 0;\n  border-radius: var(--wzl-radius-sm);\n}\n","/**\n * Maps a domain value onto its position along the track, and back.\n *\n * Deliberately narrow — two functions over an explicit `[min, max]` — rather\n * than a general scale type for the package. `Plot2D`, `CurveEditor` and\n * `@weasel-js/core` each already use \"scale\" or \"domain\" to mean something\n * else; generalizing is a job for a second consumer that needs one.\n */\nexport interface BandScale {\n  /** Domain → position in [0,1]. Must be monotonic increasing. */\n  toUnit(value: number, min: number, max: number): number;\n  /** Inverse of `toUnit`. */\n  fromUnit(unit: number, min: number, max: number): number;\n}\n\nexport function clamp01(u: number): number {\n  return u < 0 ? 0 : u > 1 ? 1 : u;\n}\n\n/** Even domain steps take even track steps. */\nexport const linearScale: BandScale = {\n  toUnit: (value, min, max) => (max === min ? 0 : (value - min) / (max - min)),\n  fromUnit: (unit, min, max) => min + unit * (max - min),\n};\n\n/** Even *ratios* take even track steps. Requires `min > 0`. */\nexport const logScale: BandScale = {\n  toUnit: (value, min, max) => {\n    const lo = Math.log(min);\n    const hi = Math.log(max);\n    return hi === lo ? 0 : (Math.log(value) - lo) / (hi - lo);\n  },\n  fromUnit: (unit, min, max) => {\n    const lo = Math.log(min);\n    return Math.exp(lo + unit * (Math.log(max) - lo));\n  },\n};\n\nlet warnedNonPositiveMin = false;\n\nfunction isDev(): boolean {\n  return typeof process !== 'undefined' ? process.env.NODE_ENV !== 'production' : true;\n}\n\n/**\n * Resolves the `scale` prop, substituting `linearScale` for a `logScale`\n * that `min` would send to `NaN`.\n */\nexport function resolveScale(\n  scale: 'linear' | 'log' | BandScale | undefined,\n  min: number,\n): BandScale {\n  const requested =\n    scale === undefined || scale === 'log'\n      ? logScale\n      : scale === 'linear'\n        ? linearScale\n        : scale;\n\n  if (requested !== logScale || min > 0) return requested;\n\n  if (isDev() && !warnedNonPositiveMin) {\n    warnedNonPositiveMin = true;\n    console.warn(\n      `BandEditor: a log scale needs min > 0, but min is ${min}. Falling back to a linear scale. ` +\n        `Pass scale=\"linear\" to silence this.`,\n    );\n  }\n  return linearScale;\n}\n","import type { BandScale } from './scale';\nimport { clamp01 } from './scale';\n\nexport interface Band<T> {\n  /** Domain value where this band starts. The first band's is normalized to `min`. */\n  from: number;\n  data: T;\n}\n\n/**\n * A band list covers `[min, max]` exactly: N bands, N−1 interior seams, no\n * gaps and no overlaps. Seam *k* is `bands[k + 1].from`, and lives between\n * `bands[k].from` and the start of the band after next (or `max`).\n *\n * Every function here preserves that. Each returns the array it was given\n * when the edit would be a no-op, so callers can skip a callback with `===`.\n */\n\n/** Pins the first band's start to `min`; leaves the rest alone. */\nexport function normalizeBands<T>(value: readonly Band<T>[], min: number): Band<T>[] {\n  const bands = value.map((b) => ({ ...b }));\n  if (bands.length > 0) bands[0].from = min;\n  return bands;\n}\n\n/** `[from, to]` of band `index` in domain space. */\nexport function bandBounds<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  min: number,\n  max: number,\n): [number, number] {\n  const from = index === 0 ? min : bands[index].from;\n  const to = index === bands.length - 1 ? max : bands[index + 1].from;\n  return [from, to];\n}\n\n/** How far seam `index` can travel before it would cross a neighbour. */\nexport function seamBounds<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  min: number,\n  max: number,\n): [number, number] {\n  const lo = index === 0 ? min : bands[index].from;\n  const hi = index + 2 <= bands.length - 1 ? bands[index + 2].from : max;\n  return [lo, hi];\n}\n\n/** Clamps a target position for seam `index` to its neighbours, inclusive. */\nexport function clampSeamTo<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  to: number,\n  min: number,\n  max: number,\n): number {\n  const [lo, hi] = seamBounds(bands, index, min, max);\n  return Math.max(lo, Math.min(hi, to));\n}\n\nexport function setSeam<T>(bands: readonly Band<T>[], index: number, to: number): Band<T>[] {\n  if (bands[index + 1] === undefined || bands[index + 1].from === to) return bands as Band<T>[];\n  const next = bands.map((b) => ({ ...b }));\n  next[index + 1].from = to;\n  return next;\n}\n\n/** Band edges as track positions: `length + 1` values from 0 to 1. */\nexport function unitEdges<T>(\n  bands: readonly Band<T>[],\n  scale: BandScale,\n  min: number,\n  max: number,\n): number[] {\n  const edges = bands.map((b, i) => (i === 0 ? 0 : clamp01(scale.toUnit(b.from, min, max))));\n  edges.push(1);\n  return edges;\n}\n\n/**\n * Largest part of `shift` band `index` can take without pushing a neighbour's\n * far edge past it. Zero for the first and last band, whose outer edges are\n * `min` and `max` and do not move.\n */\nexport function clampBandShift(edges: readonly number[], index: number, shift: number): number {\n  const isFirst = index === 0;\n  const isLast = index === edges.length - 2;\n  if (isFirst || isLast) return 0;\n  const lo = edges[index - 1] - edges[index];\n  const hi = edges[index + 2] - edges[index + 1];\n  return Math.max(lo, Math.min(hi, shift));\n}\n\n/** Moves both edges of band `index`, which is the same as moving two seams. */\nexport function moveBandEdges<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  from: number,\n  to: number,\n): Band<T>[] {\n  const next = bands.map((b) => ({ ...b }));\n  next[index].from = from;\n  if (next[index + 1] !== undefined) next[index + 1].from = to;\n  return next;\n}\n\n/**\n * Splits the band containing `at` in two, the new band starting there.\n * A position already on a seam or on `min` / `max` splits nothing.\n */\nexport function splitBands<T>(\n  bands: readonly Band<T>[],\n  at: number,\n  min: number,\n  max: number,\n  makeData: (at: number, from: T) => T,\n): Band<T>[] {\n  if (bands.length === 0 || at <= min || at >= max) return bands as Band<T>[];\n  let index = -1;\n  for (let i = 0; i < bands.length; i++) {\n    const [from, to] = bandBounds(bands, i, min, max);\n    if (at > from && at < to) {\n      index = i;\n      break;\n    }\n  }\n  if (index < 0) return bands as Band<T>[];\n  const next = bands.map((b) => ({ ...b }));\n  next.splice(index + 1, 0, { from: at, data: makeData(at, bands[index].data) });\n  return next;\n}\n\n/**\n * Merges band `index` into its left neighbour, which keeps its payload and\n * absorbs the span. The first band has no left neighbour and cannot be\n * merged away — a partition always has at least one part.\n */\nexport function mergeBand<T>(bands: readonly Band<T>[], index: number): Band<T>[] {\n  if (index <= 0 || index >= bands.length) return bands as Band<T>[];\n  return bands.filter((_, i) => i !== index).map((b) => ({ ...b }));\n}\n","import {\n  Fragment,\n  useEffect,\n  useId,\n  useRef,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport s from './BandEditor.module.css';\nimport { clamp01, resolveScale, type BandScale } from './scale';\nimport {\n  bandBounds,\n  clampBandShift,\n  clampSeamTo,\n  mergeBand,\n  moveBandEdges,\n  normalizeBands,\n  seamBounds,\n  setSeam,\n  splitBands,\n  unitEdges,\n  type Band,\n} from './bands';\n\nexport type { Band, BandScale };\n\nexport interface BandEditorProps<T> {\n  /** Ascending by `from`. `value[0].from` is normalized to `min` on read. */\n  value: Band<T>[];\n  /** Live during a drag — wire for preview, do not write to history. */\n  onInput?: (next: Band<T>[]) => void;\n  /** Committed at gesture end: one call per gesture. */\n  onChange: (next: Band<T>[]) => void;\n  min: number;\n  max: number;\n  /** Default `'log'`. */\n  scale?: 'linear' | 'log' | BandScale;\n  ticks?: { at: number; label?: ReactNode }[];\n  /** Snap a dragged seam to a tick within ~6px. Default true; `alt` defeats it per-drag. */\n  snap?: boolean;\n  renderBand?: (band: Band<T>, index: number) => ReactNode;\n  selectedIndex?: number | null;\n  onSelect?: (index: number) => void;\n  /** Payload for a band split off an existing one. Default duplicates `from`. */\n  splitBand?: (at: number, from: T) => T;\n  label?: ReactNode;\n  className?: string;\n}\n\n/** Snap radius, in track pixels. */\nconst SNAP_PX = 6;\n\n/** One arrow-key step, as a fraction of the track. */\nconst KEY_STEP = 0.01;\n\nfunction pct(unit: number): string {\n  return `${clamp01(unit) * 100}%`;\n}\n\nfunction keepData<T>(_at: number, from: T): T {\n  return from;\n}\n\nfunction isTextEntry(target: EventTarget | null): boolean {\n  if (!(target instanceof HTMLElement)) return false;\n  if (target.isContentEditable) return true;\n  const tag = target.tagName;\n  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';\n}\n\n/**\n * Divides a numeric axis into contiguous bands and lets you drag the seams\n * between them. Each band carries a payload the consumer supplies and\n * renders through `renderBand`; the control itself knows nothing about what\n * a band means.\n *\n * The axis is always fully covered — N bands, N−1 interior seams, no gaps and\n * no overlaps — so editing is editing a sorted list of seam positions. Seams\n * clamp at their neighbours rather than crossing, which means a drag can\n * never destroy a band: removal is only ever the explicit `x` / `Delete`\n * merge. The first band is doubly exceptional, its left edge pinned to `min`\n * and its body immovable, and it has no left neighbour to merge into.\n *\n * | Gesture | Effect |\n * |---|---|\n * | drag a seam | resize the two bands either side |\n * | drag a band body | move both its seams, preserving its span |\n * | click the ruler | split the band under the pointer |\n * | `x` / `Delete` | merge the selected band into its left neighbour |\n * | click a band | select it |\n * | `←` `→` on a focused seam | move it by one step; `shift` for ten |\n *\n * `scale` defaults to `'log'`, because the interesting part of a width axis\n * is usually its narrow end.\n */\nexport function BandEditor<T>(props: BandEditorProps<T>): ReactElement {\n  const {\n    value,\n    onInput,\n    onChange,\n    min,\n    max,\n    scale,\n    ticks,\n    renderBand,\n    selectedIndex,\n    onSelect,\n    label,\n    className,\n  } = props;\n  const snap = props.snap ?? true;\n  const splitBand = props.splitBand ?? keepData;\n\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const endDragRef = useRef<(() => void) | null>(null);\n  useEffect(() => () => { endDragRef.current?.(); }, []);\n  const labelId = useId();\n  const bands = normalizeBands(value, min);\n  const sc = resolveScale(scale, min);\n  const toUnit = (v: number): number => clamp01(sc.toUnit(v, min, max));\n  const fromUnit = (u: number): number => sc.fromUnit(clamp01(u), min, max);\n\n  const trackWidth = (): number => trackRef.current?.getBoundingClientRect().width ?? 0;\n\n  const unitAt = (clientX: number): number => {\n    const rect = trackRef.current?.getBoundingClientRect();\n    if (!rect || rect.width === 0) return 0;\n    return clamp01((clientX - rect.left) / rect.width);\n  };\n\n  const snapped = (unit: number, altKey: boolean): number => {\n    if (!snap || altKey || !ticks || ticks.length === 0) return unit;\n    const width = trackWidth();\n    if (width === 0) return unit;\n    let best = unit;\n    let bestDistance = SNAP_PX / width;\n    for (const tick of ticks) {\n      const tickUnit = toUnit(tick.at);\n      const distance = Math.abs(tickUnit - unit);\n      if (distance <= bestDistance) {\n        bestDistance = distance;\n        best = tickUnit;\n      }\n    }\n    return best;\n  };\n\n  const drag = (onMove: (ev: PointerEvent) => void, onEnd: () => void): void => {\n    const move = (ev: PointerEvent): void => onMove(ev);\n    const unlisten = (): void => {\n      document.removeEventListener('pointermove', move);\n      document.removeEventListener('pointerup', up);\n      document.removeEventListener('pointercancel', cancel);\n      endDragRef.current = null;\n    };\n    // A canceled pointer never fires `pointerup`; without this the seam keeps\n    // tracking a released pointer and the gesture never commits.\n    const cancel = (): void => unlisten();\n    const up = (): void => {\n      unlisten();\n      onEnd();\n    };\n    document.addEventListener('pointermove', move);\n    document.addEventListener('pointerup', up);\n    document.addEventListener('pointercancel', cancel);\n    endDragRef.current = cancel;\n  };\n\n  const onSeamPointerDown = (index: number) => (e: ReactPointerEvent<HTMLDivElement>): void => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    e.preventDefault();\n    e.stopPropagation();\n    const base = bands;\n    let latest: Band<T>[] | null = null;\n    drag(\n      (ev) => {\n        const to = clampSeamTo(base, index, fromUnit(snapped(unitAt(ev.clientX), ev.altKey)), min, max);\n        latest = setSeam(base, index, to);\n        onInput?.(latest);\n      },\n      () => {\n        if (latest) onChange(latest);\n      },\n    );\n  };\n\n  const onSeamKeyDown = (index: number) => (e: ReactKeyboardEvent<HTMLDivElement>): void => {\n    const [lo, hi] = seamBounds(bands, index, min, max);\n    let target: number;\n    if (e.key === 'Home') target = lo;\n    else if (e.key === 'End') target = hi;\n    else {\n      let delta = 0;\n      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = e.shiftKey ? KEY_STEP * 10 : KEY_STEP;\n      else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = e.shiftKey ? -KEY_STEP * 10 : -KEY_STEP;\n      else return;\n      target = fromUnit(toUnit(bands[index + 1].from) + delta);\n    }\n    e.preventDefault();\n    const next = setSeam(bands, index, clampSeamTo(bands, index, target, min, max));\n    if (next !== bands) onChange(next);\n  };\n\n  const onBandPointerDown = (index: number) => (e: ReactPointerEvent<HTMLButtonElement>): void => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    if (index !== selectedIndex) onSelect?.(index);\n    // The first and last bands' outer edges are `min` and `max`, which do not\n    // move, so their bodies have nothing to translate.\n    if (index === 0 || index === bands.length - 1) return;\n    const base = bands;\n    const edges = unitEdges(base, sc, min, max);\n    const startUnit = unitAt(e.clientX);\n    let latest: Band<T>[] | null = null;\n    drag(\n      (ev) => {\n        const shift = clampBandShift(edges, index, unitAt(ev.clientX) - startUnit);\n        latest = moveBandEdges(\n          base,\n          index,\n          fromUnit(edges[index] + shift),\n          fromUnit(edges[index + 1] + shift),\n        );\n        onInput?.(latest);\n      },\n      () => {\n        if (latest) onChange(latest);\n      },\n    );\n  };\n\n  const onBandFocus = (index: number) => (): void => {\n    if (index !== selectedIndex) onSelect?.(index);\n  };\n\n  const onTrackPointerDown = (e: ReactPointerEvent<HTMLDivElement>): void => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    e.preventDefault();\n    const next = splitBands(bands, fromUnit(unitAt(e.clientX)), min, max, splitBand);\n    if (next !== bands) onChange(next);\n  };\n\n  const onRootKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>): void => {\n    if (e.key !== 'x' && e.key !== 'Delete') return;\n    // `x` is a bare letter and Cmd/Ctrl+X is cut: neither may be swallowed\n    // when the keystroke belongs to something a consumer put in a band.\n    if (e.metaKey || e.ctrlKey || e.altKey) return;\n    if (isTextEntry(e.target)) return;\n    if (selectedIndex === null || selectedIndex === undefined) return;\n    const next = mergeBand(bands, selectedIndex);\n    if (next === bands) return;\n    e.preventDefault();\n    onChange(next);\n    onSelect?.(selectedIndex - 1);\n  };\n\n  return (\n    <div\n      className={[s.root, className].filter(Boolean).join(' ')}\n      role=\"group\"\n      aria-label={typeof label === 'string' ? label : undefined}\n      aria-labelledby={label !== undefined && typeof label !== 'string' ? labelId : undefined}\n      onKeyDown={onRootKeyDown}\n    >\n      {label !== undefined && <div id={labelId} className={s.label}>{label}</div>}\n      <div className={s.ruler} ref={trackRef} data-band-ruler=\"\" onPointerDown={onTrackPointerDown}>\n        {ticks?.map((tick, i) => (\n          <span\n            key={i}\n            className={s.tick}\n            data-tick-at={tick.at}\n            style={{ '--be-at': pct(toUnit(tick.at)) } as CSSProperties}\n          >\n            {tick.label !== undefined && <span className={s.tickLabel}>{tick.label}</span>}\n          </span>\n        ))}\n      </div>\n      <div className={s.bands}>\n        {bands.map((band, i) => {\n          const [from, to] = bandBounds(bands, i, min, max);\n          const isSelected = selectedIndex === i;\n          return (\n            <Fragment key={i}>\n              <button\n                type=\"button\"\n                className={[s.band, isSelected ? s.selected : null].filter(Boolean).join(' ')}\n                style={{ '--be-from': pct(toUnit(from)), '--be-to': pct(toUnit(to)) } as CSSProperties}\n                aria-label={`Band ${i + 1}`}\n                aria-pressed={isSelected}\n                data-band-index={i}\n                onPointerDown={onBandPointerDown(i)}\n                onFocus={onBandFocus(i)}\n              >\n                <span className={s.bandContent}>{renderBand?.(band, i)}</span>\n              </button>\n              {i < bands.length - 1 && (\n                <div\n                  role=\"slider\"\n                  tabIndex={0}\n                  className={s.seam}\n                  style={{ '--be-at': pct(toUnit(bands[i + 1].from)) } as CSSProperties}\n                  aria-label={`Seam ${i + 1}`}\n                  aria-orientation=\"horizontal\"\n                  aria-valuemin={seamBounds(bands, i, min, max)[0]}\n                  aria-valuemax={seamBounds(bands, i, min, max)[1]}\n                  aria-valuenow={bands[i + 1].from}\n                  data-seam-index={i}\n                  onPointerDown={onSeamPointerDown(i)}\n                  onKeyDown={onSeamKeyDown(i)}\n                />\n              )}\n            </Fragment>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{Button-9QNIYugK.js → Button-CIu40Epu.js}

@@ -1,31 +1,31 @@
-import { forwardRef as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
 var r = {
-	button: "_button_yji6d_3",
-	size_sm: "_size_sm_yji6d_110",
-	size_md: "_size_md_yji6d_111",
-	iconOnly: "_iconOnly_yji6d_113",
-	variant_primary: "_variant_primary_yji6d_121",
-	variant_secondary: "_variant_secondary_yji6d_168",
-	variant_ghost: "_variant_ghost_yji6d_203",
-	fullWidth: "_fullWidth_yji6d_220",
-	loading: "_loading_yji6d_221",
-	label: "_label_yji6d_221",
-	iconSlot: "_iconSlot_yji6d_225",
-	spinner: "_spinner_yji6d_239",
-	"wzl-btn-spin": "_wzl-btn-spin_yji6d_1"
+	button: "_button_wj58b_3",
+	size_sm: "_size_sm_wj58b_110",
+	size_md: "_size_md_wj58b_111",
+	iconOnly: "_iconOnly_wj58b_113",
+	variant_primary: "_variant_primary_wj58b_121",
+	variant_secondary: "_variant_secondary_wj58b_168",
+	variant_ghost: "_variant_ghost_wj58b_203",
+	fullWidth: "_fullWidth_wj58b_220",
+	loading: "_loading_wj58b_221",
+	label: "_label_wj58b_221",
+	iconSlot: "_iconSlot_wj58b_225",
+	spinner: "_spinner_wj58b_239",
+	"wzl-btn-spin": "_wzl-btn-spin_wj58b_1"
 };
 //#endregion
 //#region src/components/Button/Button.tsx
 function i() {
-	return /* @__PURE__ */ t("span", {
+	return /* @__PURE__ */ e("span", {
 		className: r.spinner,
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ n("svg", {
+		children: /* @__PURE__ */ t("svg", {
 			viewBox: "0 0 16 16",
 			width: "14",
 			height: "14",
-			children: [/* @__PURE__ */ t("circle", {
+			children: [/* @__PURE__ */ e("circle", {
 				cx: "8",
 				cy: "8",
 				r: "6",
@@ -33,7 +33,7 @@ function i() {
 				stroke: "currentColor",
 				strokeWidth: "2",
 				strokeOpacity: "0.25"
-			}), /* @__PURE__ */ t("path", {
+			}), /* @__PURE__ */ e("path", {
 				d: "M 8 2 A 6 6 0 0 1 14 8",
 				fill: "none",
 				stroke: "currentColor",
@@ -43,9 +43,9 @@ function i() {
 		})
 	});
 }
-var a = e(function(e, a) {
-	let { variant: o = "secondary", size: s = "md", disabled: c, loading: l, leadingIcon: u, trailingIcon: d, fullWidth: f, iconOnly: p, ariaLabel: m, type: h = "button", className: g, style: _, children: v, onClick: y } = e;
-	return /* @__PURE__ */ n("button", {
+var a = n(function(n, a) {
+	let { variant: o = "secondary", size: s = "md", disabled: c, loading: l, leadingIcon: u, trailingIcon: d, fullWidth: f, iconOnly: p, ariaLabel: m, type: h = "button", className: g, style: _, children: v, onClick: y } = n;
+	return /* @__PURE__ */ t("button", {
 		ref: a,
 		type: h,
 		className: [
@@ -63,18 +63,18 @@ var a = e(function(e, a) {
 		"aria-label": m,
 		onClick: y,
 		children: [
-			!p && (l || u) && /* @__PURE__ */ t("span", {
+			!p && (l || u) && /* @__PURE__ */ e("span", {
 				className: r.iconSlot,
-				children: l ? /* @__PURE__ */ t(i, {}) : u
+				children: l ? /* @__PURE__ */ e(i, {}) : u
 			}),
-			p ? l ? /* @__PURE__ */ t(i, {}) : /* @__PURE__ */ t("span", {
+			p ? l ? /* @__PURE__ */ e(i, {}) : /* @__PURE__ */ e("span", {
 				className: r.iconSlot,
 				children: v
-			}) : v !== void 0 && /* @__PURE__ */ t("span", {
+			}) : v !== void 0 && /* @__PURE__ */ e("span", {
 				className: r.label,
 				children: v
 			}),
-			!p && d && /* @__PURE__ */ t("span", {
+			!p && d && /* @__PURE__ */ e("span", {
 				className: r.iconSlot,
 				children: d
 			})
@@ -84,4 +84,4 @@ var a = e(function(e, a) {
 //#endregion
 export { a as t };
 
-//# sourceMappingURL=Button-9QNIYugK.js.map
+//# sourceMappingURL=Button-CIu40Epu.js.map

package/dist/chunks/Button-CIu40Epu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-CIu40Epu.js","names":[],"sources":["../../src/components/Button/Button.module.css","../../src/components/Button/Button.tsx"],"sourcesContent":["/* Aqua-glass button. Every visual parameter is exposed as a CSS custom\n   property so the Button Lab can override per-instance via inline style. */\n.button {\n  /* ---- Tunables (with Aqua-biased defaults) ---- */\n  /* Corner radius = 10% of the button's height (the shorter axis on every\n     realistic button shape). Using calc against --btn-height keeps the\n     corners circular rather than elliptical, which a % value would\n     otherwise produce on a wide-but-short pill. */\n  --btn-radius:       calc(var(--btn-height) * 0.1);\n  --btn-fontweight:   var(--wzl-font-weight-medium);\n  --btn-fontsize:     var(--wzl-font-size);\n  --btn-height:       24px;\n  --btn-padx:         12px;\n\n  /* Body gradient — alpha-laced top, opaque bottom. Percentages are\n     \"color-mix accent ratio\" so 45% = 45% accent + 55% transparent. */\n  --btn-top-alpha:     45%;\n  --btn-upper-alpha:   70%;\n  --btn-equator:       52%;   /* vertical position of the bright-to-deep transition */\n  --btn-equator-spread: 12%;  /* half-width of the equator transition band */\n  --btn-equator-tint:  95%;   /* accent vs white at equator */\n  --btn-base-tint:     70%;   /* accent vs black at base */\n  --btn-blur:          6px;\n  --btn-saturate:      1.3;\n\n  /* Specular gloss (::before) */\n  --btn-gloss-top:     0.42;\n  --btn-gloss-mid:     0.12;\n  --btn-gloss-bottom:  50%;   /* inset from bottom — 50% = upper hemisphere */\n\n  /* 3D shadows */\n  --btn-rim:          0.22;\n  --btn-drop-near:    0.30;\n  --btn-drop-far:     0.18;\n  --btn-inset-hi:     0.42;\n  --btn-inset-lo:     0.3;\n\n  /* Text — main shadow + a second engraving shadow you can angle.\n     `inset-x` / `inset-y` are pre-projected offsets from `inset-angle` so\n     the lab can drive them with a single slider. */\n  --btn-text-shadow:    0.35;\n  --btn-text-inset:     0.55;\n  --btn-text-inset-x:   0px;\n  --btn-text-inset-y:   1px;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  border: none;\n  border-radius: var(--btn-radius);\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--btn-fontweight);\n  font-style: normal;\n  font-size: var(--btn-fontsize);\n  height: var(--btn-height);\n  padding: 0 var(--btn-padx);\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  isolation: isolate;\n  overflow: hidden;\n  transition: filter var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast), transform 80ms;\n}\n\n/* Specular gloss — covers the upper hemisphere of the pill with a bright\n   white sheen that fades to nothing by the equator. The single detail that\n   sells the glass-cylinder illusion. */\n.button::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom) 1px;\n  /* Top corners hug the button's outline; bottom corners are flat so the\n     gloss terminates in a straight line at the equator rather than two\n     little arcs that read as `)(` brackets at smaller radii. */\n  border-top-left-radius: var(--btn-radius);\n  border-top-right-radius: var(--btn-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.button > * {\n  position: relative;\n  z-index: 2;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---------- Sizes — set defaults for the custom props ---------- */\n\n.size_sm { --btn-height: 20px; --btn-padx: 8px; --btn-fontsize: var(--wzl-font-size-sm); }\n.size_md { --btn-height: 24px; --btn-padx: 12px; --btn-fontsize: var(--wzl-font-size); }\n\n.iconOnly.size_sm { width: 20px; --btn-padx: 0; }\n.iconOnly.size_md { width: 24px; --btn-padx: 0; }\n\n/* ---------- Variants ---------- */\n\n/* Primary: tinted aqua glass — body uses --wzl-accent. The upper / equator\n   / lower stops are positioned around --btn-equator so dragging the equator\n   shifts the entire transition zone as one block. */\n.variant_primary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha), transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint), white) var(--btn-equator),\n    var(--wzl-accent) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg-on-accent);\n  /* Main shadow below for legibility, then a second engraving shadow at a\n     configurable angle (defaults below) — a near-black, lower-alpha stamp\n     that sits underneath the glyphs and reads as recessed type. */\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, var(--btn-text-inset)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near)),\n    0 3px 6px rgba(0, 0, 0, var(--btn-drop-far));\n}\n\n.variant_primary:hover:not(:disabled) {\n  filter: brightness(1.08) saturate(1.06);\n}\n\n.variant_primary:active:not(:disabled) {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) 80%, black) 0%,\n    color-mix(in srgb, var(--wzl-accent) 95%, black) 50%,\n    color-mix(in srgb, var(--wzl-accent) 60%, white) 100%\n  );\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.35),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.06));\n  transform: translateY(0.5px);\n}\n.variant_primary:active::before { opacity: 0.3; }\n\n/* Secondary: neutral glass — drained of color. */\n.variant_secondary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-fg) 25%, transparent) 0%,\n    color-mix(in srgb, var(--wzl-fg) 10%, transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-surface-raised) 90%, white) var(--btn-equator),\n    var(--wzl-surface-raised) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-surface-sunken) 80%, black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.7)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, calc(var(--btn-text-inset) * 0.7));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, calc(var(--btn-inset-hi) * 0.5)),\n    inset 0 -1px 2px rgba(0, 0, 0, calc(var(--btn-inset-lo) * 0.83)),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.03)),\n    0 1px 2px rgba(0, 0, 0, calc(var(--btn-drop-near) * 0.93)),\n    0 3px 6px rgba(0, 0, 0, calc(var(--btn-drop-far) * 0.89));\n}\n\n.variant_secondary:hover:not(:disabled) { filter: brightness(1.1); }\n\n.variant_secondary:active:not(:disabled) {\n  background: linear-gradient(180deg, var(--wzl-surface-sunken) 0%, var(--wzl-surface-raised) 100%);\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.4),\n    0 0 0 1px rgba(0, 0, 0, 0.3);\n  transform: translateY(0.5px);\n}\n.variant_secondary:active::before { opacity: 0.2; }\n\n/* Ghost: silhouette only — no glass body, no gloss. */\n.variant_ghost {\n  background: transparent;\n  color: var(--wzl-fg);\n  box-shadow: none;\n}\n.variant_ghost::before { display: none; }\n\n.variant_ghost:hover:not(:disabled) {\n  background: var(--wzl-surface-hover);\n}\n\n.variant_ghost:active:not(:disabled) {\n  background: var(--wzl-surface-pressed);\n}\n\n/* ---------- Modifiers ---------- */\n\n.fullWidth { width: 100%; }\n.loading .label { opacity: 0.7; }\n\n/* ---------- Slots ---------- */\n\n.iconSlot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n}\n\n.size_sm .iconSlot > svg { width: 12px; height: 12px; }\n.size_md .iconSlot > svg { width: 14px; height: 14px; }\n\n.label { display: inline-block; }\n\n/* ---------- Spinner ---------- */\n\n.spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  animation: wzl-btn-spin 0.7s linear infinite;\n}\n\n@keyframes wzl-btn-spin {\n  to { transform: rotate(360deg); }\n}\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './Button.module.css';\n\n/** Visual weight of a button. Defaults to `secondary`. */\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\n/** Button height and type scale. */\nexport type ButtonSize = 'sm' | 'md';\n\ntype ButtonBase = {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  disabled?: boolean;\n  loading?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  fullWidth?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  className?: string;\n  style?: ButtonHTMLAttributes<HTMLButtonElement>['style'];\n  children?: ReactNode;\n  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];\n};\n\ntype ButtonRegular = ButtonBase & {\n  iconOnly?: false;\n  ariaLabel?: string;\n};\n\ntype ButtonIconOnly = ButtonBase & {\n  iconOnly: true;\n  ariaLabel: string;\n};\n\n/**\n * Props for {@link Button}. Setting `iconOnly` makes `ariaLabel` required,\n * since an icon-only button has no text for a screen reader to announce.\n */\nexport type ButtonProps = ButtonRegular | ButtonIconOnly;\n\nfunction Spinner(): ReactNode {\n  return (\n    <span className={s.spinner} aria-hidden=\"true\">\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\">\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeOpacity=\"0.25\"\n        />\n        <path\n          d=\"M 8 2 A 6 6 0 0 1 14 8\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </span>\n  );\n}\n\n/**\n * Standard button. `loading` swaps the leading icon for a spinner, marks the\n * button `aria-busy`, and leaves the label in place; it does not disable the\n * button, so pass `disabled` too if the click should be blocked.\n *\n * `ref` forwards to the underlying `<button>`.\n */\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: Ref<HTMLButtonElement>,\n) {\n  const {\n    variant = 'secondary',\n    size = 'md',\n    disabled,\n    loading,\n    leadingIcon,\n    trailingIcon,\n    fullWidth,\n    iconOnly,\n    ariaLabel,\n    type = 'button',\n    className,\n    style,\n    children,\n    onClick,\n  } = props;\n\n  const cls = [\n    s.button,\n    s[`variant_${variant}`],\n    s[`size_${size}`],\n    fullWidth && s.fullWidth,\n    iconOnly && s.iconOnly,\n    loading && s.loading,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showLeading = !iconOnly && (loading || leadingIcon);\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cls}\n      style={style}\n      disabled={disabled}\n      aria-busy={loading ? true : undefined}\n      aria-label={ariaLabel}\n      onClick={onClick}\n    >\n      {showLeading && (\n        <span className={s.iconSlot}>{loading ? <Spinner /> : leadingIcon}</span>\n      )}\n      {iconOnly ? (\n        loading ? <Spinner /> : <span className={s.iconSlot}>{children}</span>\n      ) : (\n        children !== undefined && <span className={s.label}>{children}</span>\n      )}\n      {!iconOnly && trailingIcon && (\n        <span className={s.iconSlot}>{trailingIcon}</span>\n      )}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;ACuCA,SAAS,IAAqB;AAC5B,QACE,kBAAC,QAAD;EAAM,WAAW,EAAE;EAAS,eAAY;YACtC,kBAAC,OAAD;GAAK,SAAQ;GAAY,OAAM;GAAK,QAAO;aAA3C,CACE,kBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,EACF,kBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,CACE;;EACD,CAAA;;AAWX,IAAa,IAAS,EAAW,SAC/B,GACA,GACA;CACA,IAAM,EACJ,aAAU,aACV,UAAO,MACP,aACA,YACA,gBACA,iBACA,cACA,aACA,cACA,UAAO,UACP,cACA,UACA,aACA,eACE;AAgBJ,QACE,kBAAC,UAAD;EACO;EACC;EACN,WAlBQ;GACV,EAAE;GACF,EAAE,WAAW;GACb,EAAE,QAAQ;GACV,KAAa,EAAE;GACf,KAAY,EAAE;GACd,KAAW,EAAE;GACb;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAQO;EACJ;EACG;EACV,aAAW,IAAU,KAAO,KAAA;EAC5B,cAAY;EACH;YARX;GAHkB,CAAC,MAAa,KAAW,MAcvC,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAW,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG;IAAmB,CAAA;GAE1E,IACC,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAW;IAAgB,CAAA,GAEtE,MAAa,KAAA,KAAa,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAQ;IAAgB,CAAA;GAEtE,CAAC,KAAY,KACZ,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAW;IAAoB,CAAA;GAE7C;;EAEX"}

package/dist/chunks/{Callout-NSOjza6G.js → Callout-CHs98djt.js}

@@ -1,42 +1,43 @@
-import { useCallback as e, useEffect as t, useId as n, useRef as r } from "react";
-import { Dialog as i, DialogTrigger as a, Heading as o, OverlayArrow as s, Popover as c } from "react-aria-components";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useCallback as r, useEffect as i, useId as a, useRef as o } from "react";
+import { Dialog as s, DialogTrigger as c, Heading as l, OverlayArrow as u, Popover as d } from "react-aria-components";
 import { createPortal as f } from "react-dom";
 var p = {
-	anchor: "_anchor_18o4b_1",
-	popover: "_popover_18o4b_6",
-	toneWarning: "_toneWarning_18o4b_25",
-	toneDanger: "_toneDanger_18o4b_29",
-	arrow: "_arrow_18o4b_33",
-	dialog: "_dialog_18o4b_52",
-	header: "_header_18o4b_59",
-	title: "_title_18o4b_66",
-	close: "_close_18o4b_73",
-	body: "_body_18o4b_89",
-	footer: "_footer_18o4b_96"
+	anchor: "_anchor_vtcyj_1",
+	popover: "_popover_vtcyj_6",
+	toneWarning: "_toneWarning_vtcyj_25",
+	toneDanger: "_toneDanger_vtcyj_29",
+	arrow: "_arrow_vtcyj_33",
+	dialog: "_dialog_vtcyj_52",
+	header: "_header_vtcyj_59",
+	title: "_title_vtcyj_66",
+	close: "_close_vtcyj_73",
+	body: "_body_vtcyj_89",
+	footer: "_footer_vtcyj_96"
 }, m = {
 	info: p.toneInfo,
 	warning: p.toneWarning,
 	danger: p.toneDanger
 };
-function h(a) {
-	let { children: h, className: g, title: _, footer: v, tone: y = "info", modal: b = !1, showCloseButton: x, onDismiss: S, triggerRef: C, anchorRect: w, placement: T = "top", offset: E = 12, maxHeight: D = 400, onOpenChange: O, shouldCloseOnInteractOutside: k, "aria-label": A, "aria-labelledby": j, ...M } = a, N = r(null), P = x ?? !b, F = r(S);
+function h(c) {
+	let { children: h, className: g, title: _, footer: v, tone: y = "info", modal: b = !1, showCloseButton: x, onDismiss: S, triggerRef: C, anchorRect: w, placement: T = "top", offset: E = 12, maxHeight: D = 400, onOpenChange: O, shouldCloseOnInteractOutside: k, "aria-label": A, "aria-labelledby": j, ...M } = c, N = o(null), P = x ?? !b, F = o(S);
 	F.current = S;
-	let I = r((e) => {
+	let I = o((e) => {
 		e.key === "Escape" && F.current?.();
-	}), L = r(null), R = e((e) => {
+	}), L = o(null), R = r((e) => {
 		L.current?.removeEventListener("keydown", I.current), L.current = e, e?.addEventListener("keydown", I.current);
-	}, []), z = n();
-	t(() => {
-		w === void 0 || typeof window > "u" || window.dispatchEvent(new Event("resize"));
+	}, []), z = a(), B = w !== void 0;
+	i(() => {
+		!B || typeof window > "u" || window.dispatchEvent(new Event("resize"));
 	}, [
+		B,
 		w?.x,
 		w?.y,
 		w?.width,
 		w?.height
 	]);
-	let B = b && _ !== void 0 ? z : j, V = b ? A : void 0;
-	return /* @__PURE__ */ d(l, { children: [w !== void 0 && f(/* @__PURE__ */ u("span", {
+	let V = b && _ !== void 0 ? z : j, H = b ? A : void 0;
+	return /* @__PURE__ */ n(e, { children: [w !== void 0 && f(/* @__PURE__ */ t("span", {
 		ref: N,
 		"data-callout-anchor": "",
 		className: p.anchor,
@@ -47,7 +48,7 @@ function h(a) {
 			width: w.width,
 			height: w.height
 		}
-	}), document.body), /* @__PURE__ */ d(c, {
+	}), document.body), /* @__PURE__ */ n(d, {
 		...M,
 		triggerRef: w === void 0 ? C : N,
 		isNonModal: !b,
@@ -56,52 +57,52 @@ function h(a) {
 		maxHeight: D,
 		onOpenChange: O,
 		shouldCloseOnInteractOutside: k ?? (b ? () => !1 : void 0),
-		"aria-label": V,
-		"aria-labelledby": B,
+		"aria-label": H,
+		"aria-labelledby": V,
 		className: [
 			p.popover,
 			m[y],
 			g
 		].filter(Boolean).join(" "),
 		"data-weasel-overlay": "",
-		children: [/* @__PURE__ */ u(s, {
+		children: [/* @__PURE__ */ t(u, {
 			className: p.arrow,
-			children: /* @__PURE__ */ u("svg", {
+			children: /* @__PURE__ */ t("svg", {
 				width: 12,
 				height: 12,
 				viewBox: "0 0 12 12",
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ u("path", { d: "M0 0 L6 6 L12 0" })
+				children: /* @__PURE__ */ t("path", { d: "M0 0 L6 6 L12 0" })
 			})
-		}), /* @__PURE__ */ u(i, {
+		}), /* @__PURE__ */ t(s, {
 			role: b ? "alertdialog" : "dialog",
 			className: p.dialog,
 			"aria-label": A,
 			"aria-labelledby": j,
 			ref: R,
-			children: ({ close: e }) => /* @__PURE__ */ d(l, { children: [
-				(_ !== void 0 || P) && /* @__PURE__ */ d("header", {
+			children: ({ close: r }) => /* @__PURE__ */ n(e, { children: [
+				(_ !== void 0 || P) && /* @__PURE__ */ n("header", {
 					className: p.header,
-					children: [_ !== void 0 && /* @__PURE__ */ u(o, {
+					children: [_ !== void 0 && /* @__PURE__ */ t(l, {
 						id: z,
 						slot: "title",
 						className: p.title,
 						children: _
-					}), P && /* @__PURE__ */ u("button", {
+					}), P && /* @__PURE__ */ t("button", {
 						type: "button",
 						className: p.close,
 						onClick: () => {
-							e(), O?.(!1), S?.();
+							r(), O?.(!1), S?.();
 						},
 						"aria-label": "Close callout",
 						children: "×"
 					})]
 				}),
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ t("div", {
 					className: p.body,
 					children: h
 				}),
-				v !== void 0 && /* @__PURE__ */ u("footer", {
+				v !== void 0 && /* @__PURE__ */ t("footer", {
 					className: p.footer,
 					children: v
 				})
@@ -110,6 +111,6 @@ function h(a) {
 	})] });
 }
 //#endregion
-export { a as n, h as t };
+export { c as n, h as t };
 
-//# sourceMappingURL=Callout-NSOjza6G.js.map
+//# sourceMappingURL=Callout-CHs98djt.js.map

package/dist/chunks/Callout-CHs98djt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout-CHs98djt.js","names":[],"sources":["../../src/components/Callout/Callout.module.css","../../src/components/Callout/Callout.tsx"],"sourcesContent":[".anchor {\n  position: fixed;\n  pointer-events: none;\n}\n\n.popover {\n  /* Above Dialog overlay (1000) and ToastRegion (1100) — RAC sets no z-index. */\n  z-index: 1200;\n  --callout-accent: var(--wzl-accent-strong);\n  background: var(--wzl-surface);\n  border: 1px solid var(--callout-accent);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  max-width: 320px;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.popover[data-entering],\n.popover[data-exiting] {\n  opacity: 0;\n}\n\n.toneWarning {\n  --callout-accent: var(--wzl-warning, #d99a3f);\n}\n\n.toneDanger {\n  --callout-accent: var(--wzl-danger);\n}\n\n.arrow svg {\n  display: block;\n  fill: var(--wzl-surface);\n  stroke: var(--callout-accent);\n  stroke-width: 1;\n}\n\n.arrow[data-placement='bottom'] svg {\n  transform: rotate(180deg);\n}\n\n.arrow[data-placement='left'] svg {\n  transform: rotate(-90deg);\n}\n\n.arrow[data-placement='right'] svg {\n  transform: rotate(90deg);\n}\n\n.dialog {\n  outline: none;\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px 0;\n}\n\n.title {\n  margin: 0;\n  flex: 1;\n  font-size: var(--wzl-font-size);\n  font-weight: var(--wzl-font-weight-bold);\n}\n\n.close {\n  flex: 0 0 auto;\n  background: none;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-lg);\n  line-height: 1;\n  padding: 2px 4px;\n  cursor: pointer;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.close:hover {\n  color: var(--wzl-fg);\n}\n\n.body {\n  padding: 8px 12px 10px;\n  font-size: var(--wzl-font-size);\n  line-height: 1.4;\n  overflow-y: auto;\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 0 12px 10px;\n}\n","import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  DialogTrigger,\n  Popover as RACPopover,\n  OverlayArrow,\n  Dialog as RACDialog,\n  Heading,\n  type PopoverProps as RACPopoverProps,\n} from 'react-aria-components';\nimport s from './Callout.module.css';\n\n/** Accent color of a {@link Callout}'s border and arrow. */\nexport type CalloutTone = 'info' | 'warning' | 'danger';\n\n/**\n * Composition wrapper for press-to-open callouts:\n * `<CalloutTrigger><Pressable>…</Pressable><Callout>…</Callout></CalloutTrigger>`.\n * Re-exported RAC DialogTrigger — non-RAC trigger elements must be wrapped\n * in `<Pressable>` from react-aria-components.\n * In composed mode, put `defaultOpen` on `CalloutTrigger`, not `Callout` —\n * RAC detaches to local open state on the trigger, not the popover.\n */\nexport { DialogTrigger as CalloutTrigger };\n\n/** Props for {@link Callout}, on top of React Aria's `Popover` props. */\nexport type CalloutProps = Omit<\n  RACPopoverProps,\n  'children' | 'className' | 'isNonModal' | 'triggerRef'\n> & {\n  children?: ReactNode;\n  className?: string;\n  /** Optional heading rendered above the body. */\n  title?: ReactNode;\n  /** Footer slot — typically action buttons. */\n  footer?: ReactNode;\n  /** Accent tone for border + arrow. Default `info`. */\n  tone?: CalloutTone;\n  /**\n   * `true` — blocks interaction with the rest of the app until dismissed;\n   * inner dialog is `role=\"alertdialog\"`. `false` (default) — non-blocking:\n   * the app stays interactive; Esc / outside click / close button dismiss.\n   */\n  modal?: boolean;\n  /**\n   * Show the × button. Defaults to `!modal`. In programmatic\n   * `triggerRef`/`anchorRect` modes the close button requires either\n   * controlled open (`isOpen` + `onOpenChange`) or `onDismiss`; with only\n   * `defaultOpen` it has no open-state setter to call and cannot close.\n   */\n  showCloseButton?: boolean;\n  /**\n   * The user asked for this callout to go away — the × button or Escape.\n   *\n   * Distinct from `onOpenChange`, which a non-modal popover *also* fires when\n   * interaction or focus merely leaves it. On a canvas that's every click on\n   * the artwork, so a consumer that pins `isOpen` and treats `onOpenChange`\n   * as dismissal retires messages nobody read. Use this instead: it fires\n   * only on a deliberate act, and never on incidental focus loss.\n   */\n  onDismiss?: () => void;\n  /** Anchor to an arbitrary element (programmatic use, with `isOpen`). */\n  triggerRef?: RefObject<Element | null>;\n  /**\n   * Anchor to a client-coordinate rect — e.g. a scene node's on-screen box.\n   * The callout re-anchors whenever this rect changes, so a consumer that\n   * recomputes it on pan, zoom, or scene edits keeps the arrow on its target.\n   * Takes precedence over `triggerRef`.\n   */\n  anchorRect?: { x: number; y: number; width: number; height: number };\n};\n\nconst toneClass: Record<CalloutTone, string> = {\n  info: s.toneInfo,\n  warning: s.toneWarning,\n  danger: s.toneDanger,\n};\n\n/**\n * Anchored callout with an arrow pointing at its source — a trigger\n * element, an arbitrary `triggerRef`, or a client-space `anchorRect`.\n * Wraps React Aria Popover + Dialog; positioning, collision flipping,\n * dismissal, and focus behavior come from the underlying primitives.\n */\nexport function Callout(props: CalloutProps) {\n  const {\n    children,\n    className,\n    title,\n    footer,\n    tone = 'info',\n    modal = false,\n    showCloseButton,\n    onDismiss,\n    triggerRef,\n    anchorRect,\n    placement = 'top',\n    offset = 12,\n    maxHeight = 400,\n    onOpenChange,\n    shouldCloseOnInteractOutside,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...rest\n  } = props;\n  const anchorRef = useRef<HTMLSpanElement>(null);\n  const showClose = showCloseButton ?? !modal;\n  // Escape is a dismissal like the × is. It can't ride on a React `onKeyDown`:\n  // RAC's Dialog runs its props through filterDOMProps, which drops handlers\n  // it doesn't know, so the listener goes on the section itself. RAC's own\n  // Escape handling is untouched — this only adds the signal.\n  const onDismissRef = useRef(onDismiss);\n  onDismissRef.current = onDismiss;\n  const escapeListener = useRef((e: KeyboardEvent) => {\n    if (e.key === 'Escape') onDismissRef.current?.();\n  });\n  const listeningTo = useRef<HTMLElement | null>(null);\n  const dialogRef = useCallback((node: HTMLElement | null) => {\n    listeningTo.current?.removeEventListener('keydown', escapeListener.current);\n    listeningTo.current = node;\n    node?.addEventListener('keydown', escapeListener.current);\n  }, []);\n  const titleId = useId();\n  // RAC positions on open and recomputes on scroll, resize, and a\n  // ResizeObserver on the anchor — none of which fire when `anchorRect` is\n  // merely *translated*, as it is when a consumer tracks a scene node across a\n  // pan. (Zoom happens to work, since scaling also changes the anchor's size.)\n  // Nudging RAC's own resize listener is the supported way to make it\n  // recompute; there's no public updatePosition on Popover.\n  const hasAnchorRect = anchorRect !== undefined;\n  useEffect(() => {\n    if (!hasAnchorRect || typeof window === 'undefined') return;\n    window.dispatchEvent(new Event('resize'));\n  }, [hasAnchorRect, anchorRect?.x, anchorRect?.y, anchorRect?.width, anchorRect?.height]);\n  // RAC's popover role-heuristic misses alertdialog; label the outer role\n  // it stamps. Upstream: react-spectrum Popover.mjs querySelector('[role=dialog]').\n  const popoverAriaLabelledby =\n    modal && title !== undefined ? titleId : ariaLabelledby;\n  const popoverAriaLabel = modal ? ariaLabel : undefined;\n  return (\n    <>\n      {/* Harmless while closed — RAC reads the ref only when the popover is open. */}\n      {anchorRect !== undefined &&\n        createPortal(\n          <span\n            ref={anchorRef}\n            data-callout-anchor=\"\"\n            className={s.anchor}\n            aria-hidden=\"true\"\n            // Dynamic geometry — inline style is the mechanism here, not styling.\n            style={{\n              left: anchorRect.x,\n              top: anchorRect.y,\n              width: anchorRect.width,\n              height: anchorRect.height,\n            }}\n          />,\n          document.body,\n        )}\n      <RACPopover\n        {...rest}\n        triggerRef={anchorRect !== undefined ? anchorRef : triggerRef}\n        isNonModal={!modal}\n        placement={placement}\n        offset={offset}\n        maxHeight={maxHeight}\n        onOpenChange={onOpenChange}\n        shouldCloseOnInteractOutside={\n          shouldCloseOnInteractOutside ?? (modal ? () => false : undefined)\n        }\n        aria-label={popoverAriaLabel}\n        aria-labelledby={popoverAriaLabelledby}\n        className={[s.popover, toneClass[tone], className].filter(Boolean).join(' ')}\n        data-weasel-overlay=\"\"\n      >\n        <OverlayArrow className={s.arrow}>\n          <svg width={12} height={12} viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path d=\"M0 0 L6 6 L12 0\" />\n          </svg>\n        </OverlayArrow>\n        <RACDialog\n          role={modal ? 'alertdialog' : 'dialog'}\n          className={s.dialog}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          ref={dialogRef}\n        >\n          {({ close }) => (\n            <>\n              {(title !== undefined || showClose) && (\n                <header className={s.header}>\n                  {title !== undefined && (\n                    <Heading id={titleId} slot=\"title\" className={s.title}>\n                      {title}\n                    </Heading>\n                  )}\n                  {showClose && (\n                    <button\n                      type=\"button\"\n                      className={s.close}\n                      onClick={() => {\n                        // `close()` resolves OverlayTriggerStateContext, only\n                        // provided by DialogTrigger (composed mode). In\n                        // triggerRef/anchorRect modes there is no such\n                        // context, so `close()` is a no-op there — the\n                        // controlled-open fallback below does the work.\n                        close();\n                        onOpenChange?.(false);\n                        onDismiss?.();\n                      }}\n                      aria-label=\"Close callout\"\n                    >\n                      ×\n                    </button>\n                  )}\n                </header>\n              )}\n              <div className={s.body}>{children}</div>\n              {footer !== undefined && <footer className={s.footer}>{footer}</footer>}\n            </>\n          )}\n        </RACDialog>\n      </RACPopover>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;GCwEM,IAAyC;CAC7C,MAAM,EAAE;CACR,SAAS,EAAE;CACX,QAAQ,EAAE;CACX;AAQD,SAAgB,EAAQ,GAAqB;CAC3C,IAAM,EACJ,aACA,cACA,UACA,WACA,UAAO,QACP,WAAQ,IACR,oBACA,cACA,eACA,eACA,eAAY,OACZ,YAAS,IACT,eAAY,KACZ,iBACA,iCACA,cAAc,GACd,mBAAmB,GACnB,GAAG,MACD,GACE,IAAY,EAAwB,KAAK,EACzC,IAAY,KAAmB,CAAC,GAKhC,IAAe,EAAO,EAAU;AACtC,GAAa,UAAU;CACvB,IAAM,IAAiB,GAAQ,MAAqB;AAClD,EAAI,EAAE,QAAQ,YAAU,EAAa,WAAW;GAChD,EACI,IAAc,EAA2B,KAAK,EAC9C,IAAY,GAAa,MAA6B;AAG1D,EAFA,EAAY,SAAS,oBAAoB,WAAW,EAAe,QAAQ,EAC3E,EAAY,UAAU,GACtB,GAAM,iBAAiB,WAAW,EAAe,QAAQ;IACxD,EAAE,CAAC,EACA,IAAU,GAAO,EAOjB,IAAgB,MAAe,KAAA;AACrC,SAAgB;AACV,GAAC,KAAiB,OAAO,SAAW,OACxC,OAAO,cAAc,IAAI,MAAM,SAAS,CAAC;IACxC;EAAC;EAAe,GAAY;EAAG,GAAY;EAAG,GAAY;EAAO,GAAY;EAAO,CAAC;CAGxF,IAAM,IACJ,KAAS,MAAU,KAAA,IAAY,IAAU,GACrC,IAAmB,IAAQ,IAAY,KAAA;AAC7C,QACE,kBAAA,GAAA,EAAA,UAAA,CAEG,MAAe,KAAA,KACd,EACE,kBAAC,QAAD;EACE,KAAK;EACL,uBAAoB;EACpB,WAAW,EAAE;EACb,eAAY;EAEZ,OAAO;GACL,MAAM,EAAW;GACjB,KAAK,EAAW;GAChB,OAAO,EAAW;GAClB,QAAQ,EAAW;GACpB;EACD,CAAA,EACF,SAAS,KACV,EACH,kBAAC,GAAD;EACE,GAAI;EACJ,YAAY,MAAe,KAAA,IAAwB,IAAZ;EACvC,YAAY,CAAC;EACF;EACH;EACG;EACG;EACd,8BACE,MAAiC,UAAc,KAAQ,KAAA;EAEzD,cAAY;EACZ,mBAAiB;EACjB,WAAW;GAAC,EAAE;GAAS,EAAU;GAAO;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC5E,uBAAoB;YAdtB,CAgBE,kBAAC,GAAD;GAAc,WAAW,EAAE;aACzB,kBAAC,OAAD;IAAK,OAAO;IAAI,QAAQ;IAAI,SAAQ;IAAY,eAAY;cAC1D,kBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;IACxB,CAAA;GACO,CAAA,EACf,kBAAC,GAAD;GACE,MAAM,IAAQ,gBAAgB;GAC9B,WAAW,EAAE;GACb,cAAY;GACZ,mBAAiB;GACjB,KAAK;cAEH,EAAE,eACF,kBAAA,GAAA,EAAA,UAAA;KACI,MAAU,KAAA,KAAa,MACvB,kBAAC,UAAD;KAAQ,WAAW,EAAE;eAArB,CACG,MAAU,KAAA,KACT,kBAAC,GAAD;MAAS,IAAI;MAAS,MAAK;MAAQ,WAAW,EAAE;gBAC7C;MACO,CAAA,EAEX,KACC,kBAAC,UAAD;MACE,MAAK;MACL,WAAW,EAAE;MACb,eAAe;AAQb,OAFA,GAAO,EACP,IAAe,GAAM,EACrB,KAAa;;MAEf,cAAW;gBACZ;MAEQ,CAAA,CAEJ;;IAEX,kBAAC,OAAD;KAAK,WAAW,EAAE;KAAO;KAAe,CAAA;IACvC,MAAW,KAAA,KAAa,kBAAC,UAAD;KAAQ,WAAW,EAAE;eAAS;KAAgB,CAAA;IACtE,EAAA,CAAA;GAEK,CAAA,CACD;IACZ,EAAA,CAAA"}

package/dist/chunks/Checkbox-BLEw-wEb.js

@@ -0,0 +1,47 @@
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { Checkbox as i } from "react-aria-components";
+var a = {
+	checkbox: "_checkbox_w5y2z_1",
+	box: "_box_w5y2z_18",
+	checkmark: "_checkmark_w5y2z_47",
+	label: "_label_w5y2z_60"
+}, o = r(function(r, o) {
+	let { children: s, className: c, ...l } = r;
+	return /* @__PURE__ */ t(i, {
+		...l,
+		ref: o,
+		className: [a.checkbox, c].filter(Boolean).join(" "),
+		children: ({ isIndeterminate: r }) => /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
+			className: a.box,
+			children: /* @__PURE__ */ t("svg", {
+				className: a.checkmark,
+				viewBox: "0 0 14 14",
+				"aria-hidden": "true",
+				children: r ? /* @__PURE__ */ t("line", {
+					x1: "3",
+					y1: "7",
+					x2: "11",
+					y2: "7",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round"
+				}) : /* @__PURE__ */ t("polyline", {
+					points: "3,7.5 6,10.5 11,4.5",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		}), s !== void 0 && /* @__PURE__ */ t("span", {
+			className: a.label,
+			children: s
+		})] })
+	});
+});
+//#endregion
+export { o as t };
+
+//# sourceMappingURL=Checkbox-BLEw-wEb.js.map

package/dist/chunks/Checkbox-BLEw-wEb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-BLEw-wEb.js","names":[],"sources":["../../src/components/Checkbox/Checkbox.module.css","../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.checkbox[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.box {\n  position: relative;\n  flex: 0 0 auto;\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: var(--wzl-radius-sm);\n  transition: background-color var(--wzl-motion-fast), border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.checkbox[data-focus-visible] .box {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.checkbox[data-hovered]:not([data-disabled]) .box {\n  border-color: var(--wzl-fg-muted);\n}\n\n.checkbox[data-selected] .box,\n.checkbox[data-indeterminate] .box {\n  background: var(--wzl-accent-strong);\n  border-color: var(--wzl-accent-strong);\n}\n\n.checkbox[data-invalid] .box {\n  border-color: var(--wzl-danger);\n}\n\n.checkmark {\n  position: absolute;\n  inset: 0;\n  color: var(--wzl-fg-on-accent);\n  opacity: 0;\n  pointer-events: none;\n}\n\n.checkbox[data-selected] .checkmark,\n.checkbox[data-indeterminate] .checkmark {\n  opacity: 1;\n}\n\n.label {\n  line-height: 1.2;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  Checkbox as RACCheckbox,\n  type CheckboxProps as RACCheckboxProps,\n} from 'react-aria-components';\nimport s from './Checkbox.module.css';\n\n/**\n * Props for {@link Checkbox}, on top of React Aria's `Checkbox` props. The\n * label is passed as children.\n */\nexport type CheckboxProps = Omit<RACCheckboxProps, 'children' | 'className'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single checkbox wrapping React Aria's Checkbox. Supports indeterminate\n * via `isIndeterminate`. The label is supplied as children.\n */\nexport const Checkbox = forwardRef(function Checkbox(\n  props: CheckboxProps,\n  ref: Ref<HTMLLabelElement>,\n) {\n  const { children, className, ...rest } = props;\n  return (\n    <RACCheckbox\n      {...rest}\n      ref={ref}\n      className={[s.checkbox, className].filter(Boolean).join(' ')}\n    >\n      {({ isIndeterminate }) => (\n        <>\n          <span className={s.box}>\n            <svg className={s.checkmark} viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n              {isIndeterminate ? (\n                <line x1=\"3\" y1=\"7\" x2=\"11\" y2=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n              ) : (\n                <polyline\n                  points=\"3,7.5 6,10.5 11,4.5\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              )}\n            </svg>\n          </span>\n          {children !== undefined && <span className={s.label}>{children}</span>}\n        </>\n      )}\n    </RACCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;GCoBa,IAAW,EAAW,SACjC,GACA,GACA;CACA,IAAM,EAAE,aAAU,cAAW,GAAG,MAAS;AACzC,QACE,kBAAC,GAAD;EACE,GAAI;EACC;EACL,WAAW,CAAC,EAAE,UAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;aAE1D,EAAE,yBACF,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAW,EAAE;aACjB,kBAAC,OAAD;IAAK,WAAW,EAAE;IAAW,SAAQ;IAAY,eAAY;cAC1D,IACC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAI,IAAG;KAAK,IAAG;KAAI,QAAO;KAAe,aAAY;KAAI,eAAc;KAAU,CAAA,GAEjG,kBAAC,YAAD;KACE,QAAO;KACP,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,CAAA;IAEA,CAAA;GACD,CAAA,EACN,MAAa,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAQ;GAAgB,CAAA,CACrE,EAAA,CAAA;EAEO,CAAA;EAEhB"}