@weasel-js/ui 1.4.4 → 1.5.1

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

@@ -1 +0,0 @@
-{"version":3,"file":"BandEditor-CUlbOlJi.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 { openPointerSession, type PointerSession } from '@weasel-js/core';\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 sessionRef = useRef<PointerSession | null>(null);\n  useEffect(() => () => { sessionRef.current?.cancel(); }, []);\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  // No pointer capture: a band body is a `<button>` whose content the consumer\n  // renders, and capture would retarget pointerup and kill the click on it.\n  // A drag that ends without a release commits nothing.\n  const drag = (\n    down: ReactPointerEvent<HTMLElement>,\n    onMove: (ev: PointerEvent) => void,\n    onEnd: () => void,\n  ): void => {\n    sessionRef.current?.cancel();\n    sessionRef.current = openPointerSession(down.currentTarget, down, {\n      onMove,\n      onEnd: () => { sessionRef.current = null; onEnd(); },\n      onCancel: () => { sessionRef.current = null; },\n    }, { capture: false });\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      e,\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      e,\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/ComboBox-BBRRWvdc.js

@@ -1,107 +0,0 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { n as t } from "./Field-dzlxOGxT.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Children as i, isValidElement as a } from "react";
-import { Button as o, ComboBox as s, FieldError as c, Input as l, Label as u, ListBox as d, ListBoxItem as f, Popover as p, Text as m } from "react-aria-components";
-var h = {
-	field: "_field_ijbwo_1",
-	frame: "_frame_ijbwo_9",
-	openButton: "_openButton_ijbwo_53",
-	popover: "_popover_ijbwo_75",
-	listbox: "_listbox_ijbwo_80",
-	option: "_option_ijbwo_93",
-	empty: "_empty_ijbwo_116",
-	fit: "_fit_ijbwo_125",
-	sizer: "_sizer_ijbwo_146"
-};
-//#endregion
-//#region src/components/ComboBox/ComboBox.tsx
-function g(i) {
-	let { label: a, description: f, errorMessage: g, placeholder: y, options: b, children: x, selectedKey: S, defaultSelectedKey: C, onSelectionChange: w, emptyLabel: T = "No matches", width: E = "fill", className: D, portalContainer: O, ...k } = i, { anchor: A, portalProps: j } = e(O);
-	return /* @__PURE__ */ r(s, {
-		...k,
-		selectedKey: S,
-		defaultSelectedKey: C,
-		onSelectionChange: w ? (e) => w(e) : void 0,
-		className: [
-			h.field,
-			E === "fit" && h.fit,
-			t.root,
-			D
-		].filter(Boolean).join(" "),
-		children: [
-			A,
-			a !== void 0 && /* @__PURE__ */ n(u, {
-				className: t.label,
-				children: a
-			}),
-			/* @__PURE__ */ r("div", {
-				className: h.frame,
-				children: [
-					/* @__PURE__ */ n(l, { placeholder: y }),
-					E === "fit" && /* @__PURE__ */ r("span", {
-						className: h.sizer,
-						"aria-hidden": "true",
-						children: [y !== void 0 && /* @__PURE__ */ n("span", { children: y }), _(b, x).map((e, t) => /* @__PURE__ */ n("span", { children: e }, t))]
-					}),
-					/* @__PURE__ */ n(o, {
-						className: h.openButton,
-						"aria-label": "Show options",
-						children: /* @__PURE__ */ n("svg", {
-							viewBox: "0 0 10 10",
-							"aria-hidden": "true",
-							children: /* @__PURE__ */ n("path", {
-								d: "M2 4 L5 7 L8 4",
-								fill: "none",
-								stroke: "currentColor",
-								strokeWidth: "1.5",
-								strokeLinecap: "round",
-								strokeLinejoin: "round"
-							})
-						})
-					})
-				]
-			}),
-			f !== void 0 && /* @__PURE__ */ n(m, {
-				slot: "description",
-				className: t.hint,
-				children: f
-			}),
-			/* @__PURE__ */ n(c, {
-				className: t.error,
-				children: g
-			}),
-			/* @__PURE__ */ n(p, {
-				className: h.popover,
-				"data-weasel-overlay": "",
-				...j,
-				children: /* @__PURE__ */ n(d, {
-					className: h.listbox,
-					renderEmptyState: () => /* @__PURE__ */ n("div", {
-						className: h.empty,
-						children: T
-					}),
-					children: b === void 0 ? x : b.map((e) => /* @__PURE__ */ n(v, {
-						id: e.value,
-						textValue: e.textValue,
-						isDisabled: e.isDisabled,
-						children: e.label
-					}, String(e.value)))
-				})
-			})
-		]
-	});
-}
-function _(e, t) {
-	return e === void 0 ? i.toArray(t).map((e) => a(e) ? e.props.children : e) : e.map((e) => e.label);
-}
-function v({ className: e, ...t }) {
-	return /* @__PURE__ */ n(f, {
-		...t,
-		className: [h.option, e].filter(Boolean).join(" ")
-	});
-}
-//#endregion
-export { v as n, g as t };
-
-//# sourceMappingURL=ComboBox-BBRRWvdc.js.map

package/dist/chunks/ComboBox-BBRRWvdc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComboBox-BBRRWvdc.js","names":[],"sources":["../../src/components/ComboBox/ComboBox.module.css","../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.frame {\n  display: flex;\n  align-items: stretch;\n  height: var(--wzl-field-h, var(--wzl-control-h));\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  line-height: 1;\n  overflow: hidden;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n  border-color: var(--wzl-danger);\n}\n\n.field[data-disabled] .frame {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.frame input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  padding: 0 var(--wzl-field-pad-x);\n}\n\n.frame input::placeholder {\n  color: var(--wzl-fg-subtle);\n}\n\n.openButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  background: transparent;\n  border: none;\n  border-left: 1px solid var(--wzl-border);\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n}\n\n.openButton[data-hovered]:not([data-disabled]) {\n  color: var(--wzl-fg);\n}\n\n.openButton svg {\n  width: 10px;\n  height: 10px;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  outline: none;\n}\n\n.listbox {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n  padding: 4px;\n  max-height: 280px;\n  overflow: auto;\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n  color: var(--wzl-fg);\n  outline: none;\n}\n\n.option[data-focused] {\n  background: var(--wzl-surface-hover);\n}\n\n.option[data-selected] {\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.option[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.empty {\n  padding: 6px 8px;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* `width='fit'`: a hidden stack of every option label shares the input's grid\n   cell, so the field is wide enough for whichever option is chosen and takes\n   no more of the row than that. */\n.fit {\n  width: auto;\n  max-width: 100%;\n}\n\n.fit .frame {\n  display: grid;\n  grid-template-columns: auto auto;\n  width: fit-content;\n  max-width: 100%;\n}\n\n/* `width: 0` keeps the input's 20-character intrinsic width out of the track\n   sizing — the sizer is what the column measures — and `min-width` then\n   stretches it back across whatever that came to. */\n.fit .frame input {\n  grid-area: 1 / 1;\n  width: 0;\n  min-width: 100%;\n}\n\n.fit .sizer {\n  grid-area: 1 / 1;\n}\n\n.fit .openButton {\n  grid-area: 1 / 2;\n}\n\n.sizer {\n  display: grid;\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  white-space: nowrap;\n  padding: 0 var(--wzl-field-pad-x);\n}\n\n.sizer > * {\n  grid-area: 1 / 1;\n}\n","import { Children, isValidElement, type ReactNode } from 'react';\nimport {\n  ComboBox as RACComboBox,\n  Label,\n  Input as RACInput,\n  Button as RACButton,\n  Popover as RACPopover,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Text,\n  FieldError,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport s from './ComboBox.module.css';\n\n/**\n * One option in a {@link ComboBox}'s `options` list. `textValue` is the\n * plain-text form used for filtering and screen readers, needed only when\n * `label` isn't a bare string.\n */\nexport type ComboBoxOption = {\n  value: string;\n  label: ReactNode;\n  textValue?: string;\n  isDisabled?: boolean;\n};\n\ntype Key = string | number;\n\n/**\n * Props for {@link ComboBox}, on top of React Aria's `ComboBox` props, with\n * the selection key narrowed to the option value type.\n */\nexport type ComboBoxProps<T extends Key = string> = Omit<RACComboBoxProps<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  options?: ReadonlyArray<ComboBoxOption & { value: T }>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T | null) => void;\n  emptyLabel?: ReactNode;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the combo box sits\n   * in. `'fit'` sizes the input to its widest option, so it neither swallows a\n   * toolbar's slack nor cuts a selection off once one is made.\n   */\n  width?: 'fill' | 'fit';\n  className?: string;\n} & OverlayPortalProps;\n\n/**\n * Filterable single-select wrapping React Aria's ComboBox. The user can\n * type to filter; selection commits to `onSelectionChange`. When no value\n * is in the input, selection clears (key becomes null).\n */\nexport function ComboBox<T extends Key = string>(props: ComboBoxProps<T>) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    emptyLabel = 'No matches',\n    width = 'fill',\n    className,\n    portalContainer,\n    ...rest\n  } = props;\n\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n\n  return (\n    <RACComboBox\n      {...rest}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={onSelectionChange ? (k) => onSelectionChange(k as T | null) : undefined}\n      className={[s.field, width === 'fit' && s.fit, fieldClasses.root, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {anchor}\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <div className={s.frame}>\n        <RACInput placeholder={placeholder} />\n        {width === 'fit' && (\n          <span className={s.sizer} aria-hidden=\"true\">\n            {placeholder !== undefined && <span>{placeholder}</span>}\n            {optionLabels(options, children).map((l, i) => (\n              <span key={i}>{l}</span>\n            ))}\n          </span>\n        )}\n        <RACButton className={s.openButton} aria-label=\"Show options\">\n          <svg viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </RACButton>\n      </div>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACListBox className={s.listbox} renderEmptyState={() => <div className={s.empty}>{emptyLabel}</div>}>\n          {options !== undefined\n            ? options.map((o) => (\n                <ComboBoxItem key={String(o.value)} id={o.value} textValue={o.textValue} isDisabled={o.isDisabled}>\n                  {o.label}\n                </ComboBoxItem>\n              ))\n            : children}\n        </RACListBox>\n      </RACPopover>\n    </RACComboBox>\n  );\n}\n\n/**\n * The labels a `width='fit'` input measures itself against. In the children\n * form the label sits one element deep, inside a `ComboBoxItem`.\n */\nfunction optionLabels(\n  options: ReadonlyArray<ComboBoxOption> | undefined,\n  children: ReactNode,\n): ReactNode[] {\n  if (options !== undefined) return options.map((o) => o.label);\n  return Children.toArray(children).map((c) =>\n    isValidElement<{ children?: ReactNode }>(c) ? c.props.children : c,\n  );\n}\n\n/** Props for {@link ComboBoxItem}, on top of React Aria's `ListBoxItem` props. */\nexport type ComboBoxItemProps = Omit<RACListBoxItemProps, 'className'> & {\n  className?: string;\n};\n\n/** One row in a {@link ComboBox}'s filtered list. */\nexport function ComboBoxItem({ className, ...rest }: ComboBoxItemProps) {\n  return <RACListBoxItem {...rest} className={[s.option, className].filter(Boolean).join(' ')} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AC8DA,SAAgB,EAAiC,GAAyB;CACxE,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,YACA,aACA,gBACA,uBACA,sBACA,gBAAa,cACb,WAAQ,QACR,cACA,oBACA,GAAG,MACD,GAEE,EAAE,WAAQ,mBAAgB,EAAiB,EAAgB;AAEjE,QACE,kBAAC,GAAD;EACE,GAAI;EACS;EACO;EACpB,mBAAmB,KAAqB,MAAM,EAAkB,EAAc,GAAG,KAAA;EACjF,WAAW;GAAC,EAAE;GAAO,MAAU,SAAS,EAAE;GAAK,EAAa;GAAM;GAAU,CACzE,OAAO,QAAQ,CACf,KAAK,IAAI;YAPd;GASG;GACA,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB;KACE,kBAAC,GAAD,EAAuB,gBAAe,CAAA;KACrC,MAAU,SACT,kBAAC,QAAD;MAAM,WAAW,EAAE;MAAO,eAAY;gBAAtC,CACG,MAAgB,KAAA,KAAa,kBAAC,QAAD,EAAA,UAAO,GAAmB,CAAA,EACvD,EAAa,GAAS,EAAS,CAAC,KAAK,GAAG,MACvC,kBAAC,QAAD,EAAA,UAAe,GAAS,EAAb,EAAa,CACxB,CACG;;KAET,kBAAC,GAAD;MAAW,WAAW,EAAE;MAAY,cAAW;gBAC7C,kBAAC,OAAD;OAAK,SAAQ;OAAY,eAAY;iBACnC,kBAAC,QAAD;QAAM,GAAE;QAAiB,MAAK;QAAO,QAAO;QAAe,aAAY;QAAM,eAAc;QAAQ,gBAAe;QAAU,CAAA;OACxH,CAAA;MACI,CAAA;KACR;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACtE,kBAAC,GAAD;IAAY,WAAW,EAAE;IAAS,uBAAoB;IAAG,GAAI;cAC3D,kBAAC,GAAD;KAAY,WAAW,EAAE;KAAS,wBAAwB,kBAAC,OAAD;MAAK,WAAW,EAAE;gBAAQ;MAAiB,CAAA;eAClG,MAAY,KAAA,IAMT,IALA,EAAQ,KAAK,MACX,kBAAC,GAAD;MAAoC,IAAI,EAAE;MAAO,WAAW,EAAE;MAAW,YAAY,EAAE;gBACpF,EAAE;MACU,EAFI,OAAO,EAAE,MAAM,CAEnB,CACf;KAEK,CAAA;IACF,CAAA;GACD;;;AAQlB,SAAS,EACP,GACA,GACa;AAEb,QADI,MAAY,KAAA,IACT,EAAS,QAAQ,EAAS,CAAC,KAAK,MACrC,EAAyC,EAAE,GAAG,EAAE,MAAM,WAAW,EAClE,GAHiC,EAAQ,KAAK,MAAM,EAAE,MAAM;;AAY/D,SAAgB,EAAa,EAAE,cAAW,GAAG,KAA2B;AACtE,QAAO,kBAAC,GAAD;EAAgB,GAAI;EAAM,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAI,CAAA"}