@weasel-js/ui 1.4.2 → 1.4.4

package/dist/chunks/{RadioGroup-VGAaLYaR.js.map → RadioGroup-B2_LUgDp.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-VGAaLYaR.js","names":[],"sources":["../../src/components/RadioGroup/RadioGroup.module.css","../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.group[data-orientation=\"horizontal\"] {\n  flex-direction: row;\n  gap: 16px;\n}\n\n.legend {\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.radio[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.dot {\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: 50%;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.radio[data-focus-visible] .dot {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.radio[data-hovered]:not([data-disabled]) .dot {\n  border-color: var(--wzl-fg-muted);\n}\n\n.radio[data-selected] .dot {\n  border-color: var(--wzl-accent-strong);\n}\n\n.dot::after {\n  content: '';\n  position: absolute;\n  inset: 3px;\n  border-radius: 50%;\n  background: var(--wzl-accent-strong);\n  transform: scale(0);\n  transition: transform var(--wzl-motion-fast);\n}\n\n.radio[data-selected] .dot::after {\n  transform: scale(1);\n}\n","import type { ReactNode } from 'react';\nimport {\n  RadioGroup as RACRadioGroup,\n  Radio as RACRadio,\n  Label,\n  Text,\n  FieldError,\n  type RadioGroupProps as RACRadioGroupProps,\n  type RadioProps as RACRadioProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './RadioGroup.module.css';\n\n/** Props for {@link RadioGroup}, on top of React Aria's `RadioGroup` props. */\nexport type RadioGroupProps = Omit<RACRadioGroupProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * A set of mutually exclusive choices, wrapping React Aria's RadioGroup and\n * supplying the same label / description / errorMessage slots as `Input`.\n * Holds {@link Radio} children.\n */\nexport function RadioGroup(props: RadioGroupProps) {\n  const { label, description, errorMessage, children, className, ...rest } = props;\n  return (\n    <RACRadioGroup\n      {...rest}\n      className={[s.group, fieldClasses.root, className].filter(Boolean).join(' ')}\n    >\n      {label !== undefined && <Label className={s.legend}>{label}</Label>}\n      {children}\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </RACRadioGroup>\n  );\n}\n\n/** Props for {@link Radio}, on top of React Aria's `Radio` props. */\nexport type RadioProps = Omit<RACRadioProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/** One choice in a {@link RadioGroup}. The label is passed as children. */\nexport function Radio({ children, className, ...rest }: RadioProps) {\n  return (\n    <RACRadio {...rest} className={[s.radio, className].filter(Boolean).join(' ')}>\n      <span className={s.dot} />\n      {children !== undefined && <span>{children}</span>}\n    </RACRadio>\n  );\n}\n"],"mappings":";;;;;;;;;;;AC4BA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,gBAAa,iBAAc,aAAU,cAAW,GAAG,MAAS;AAC3E,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAF9E;GAIG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAS;IAAc,CAAA;GAClE;GACA,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACxD;;;AAWpB,SAAgB,EAAM,EAAE,aAAU,cAAW,GAAG,KAAoB;AAClE,QACE,kBAAC,GAAD;EAAU,GAAI;EAAM,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7E,CACE,kBAAC,QAAD,EAAM,WAAW,EAAE,KAAO,CAAA,EACzB,MAAa,KAAA,KAAa,kBAAC,QAAD,EAAO,aAAgB,CAAA,CACzC"}
+{"version":3,"file":"RadioGroup-B2_LUgDp.js","names":[],"sources":["../../src/components/RadioGroup/RadioGroup.module.css","../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.group[data-orientation=\"horizontal\"] {\n  flex-direction: row;\n  gap: 16px;\n}\n\n.legend {\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.radio[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.dot {\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: 50%;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.radio[data-focus-visible] .dot {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.radio[data-hovered]:not([data-disabled]) .dot {\n  border-color: var(--wzl-fg-muted);\n}\n\n.radio[data-selected] .dot {\n  border-color: var(--wzl-accent-strong);\n}\n\n.dot::after {\n  content: '';\n  position: absolute;\n  inset: 3px;\n  border-radius: 50%;\n  background: var(--wzl-accent-strong);\n  transform: scale(0);\n  transition: transform var(--wzl-motion-fast);\n}\n\n.radio[data-selected] .dot::after {\n  transform: scale(1);\n}\n","import type { ReactNode } from 'react';\nimport {\n  RadioGroup as RACRadioGroup,\n  Radio as RACRadio,\n  Label,\n  Text,\n  FieldError,\n  type RadioGroupProps as RACRadioGroupProps,\n  type RadioProps as RACRadioProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './RadioGroup.module.css';\n\n/** Props for {@link RadioGroup}, on top of React Aria's `RadioGroup` props. */\nexport type RadioGroupProps = Omit<RACRadioGroupProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * A set of mutually exclusive choices, wrapping React Aria's RadioGroup and\n * supplying the same label / description / errorMessage slots as `Input`.\n * Holds {@link Radio} children.\n */\nexport function RadioGroup(props: RadioGroupProps) {\n  const { label, description, errorMessage, children, className, ...rest } = props;\n  return (\n    <RACRadioGroup\n      {...rest}\n      className={[s.group, fieldClasses.root, className].filter(Boolean).join(' ')}\n    >\n      {label !== undefined && <Label className={s.legend}>{label}</Label>}\n      {children}\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </RACRadioGroup>\n  );\n}\n\n/** Props for {@link Radio}, on top of React Aria's `Radio` props. */\nexport type RadioProps = Omit<RACRadioProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/** One choice in a {@link RadioGroup}. The label is passed as children. */\nexport function Radio({ children, className, ...rest }: RadioProps) {\n  return (\n    <RACRadio {...rest} className={[s.radio, className].filter(Boolean).join(' ')}>\n      <span className={s.dot} />\n      {children !== undefined && <span>{children}</span>}\n    </RACRadio>\n  );\n}\n"],"mappings":";;;;;;;;;;;AC4BA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,gBAAa,iBAAc,aAAU,cAAW,GAAG,MAAS;AAC3E,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAF9E;GAIG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAS;IAAc,CAAA;GAClE;GACA,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACxD;;;AAWpB,SAAgB,EAAM,EAAE,aAAU,cAAW,GAAG,KAAoB;AAClE,QACE,kBAAC,GAAD;EAAU,GAAI;EAAM,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7E,CACE,kBAAC,QAAD,EAAM,WAAW,EAAE,KAAO,CAAA,EACzB,MAAa,KAAA,KAAa,kBAAC,QAAD,EAAO,aAAgB,CAAA,CACzC"}

package/dist/chunks/{RangeSlider-DefoAOsh.js → RangeSlider-S2R3zA8N.js}

@@ -1,13 +1,13 @@
 import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
 import { Label as r, Slider as i, SliderOutput as a, SliderThumb as o, SliderTrack as s } from "react-aria-components";
 var c = {
-	slider: "_slider_cno0k_1",
-	head: "_head_cno0k_17",
-	label: "_label_cno0k_24",
-	output: "_output_cno0k_30",
-	track: "_track_cno0k_36",
-	fill: "_fill_cno0k_50",
-	thumb: "_thumb_cno0k_59"
+	slider: "_slider_1ll0c_1",
+	head: "_head_1ll0c_17",
+	label: "_label_1ll0c_24",
+	output: "_output_1ll0c_30",
+	track: "_track_1ll0c_36",
+	fill: "_fill_1ll0c_49",
+	thumb: "_thumb_1ll0c_58"
 };
 //#endregion
 //#region src/components/RangeSlider/RangeSlider.tsx
@@ -49,4 +49,4 @@ function l(l) {
 //#endregion
 export { l as t };
 
-//# sourceMappingURL=RangeSlider-DefoAOsh.js.map
+//# sourceMappingURL=RangeSlider-S2R3zA8N.js.map

package/dist/chunks/RangeSlider-S2R3zA8N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider-S2R3zA8N.js","names":[],"sources":["../../src/components/RangeSlider/RangeSlider.module.css","../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":[".slider {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 4px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.slider[data-orientation=\"vertical\"] {\n  flex-direction: row;\n  align-items: stretch;\n  width: 28px;\n  height: 160px;\n}\n\n.head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.label {\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n}\n\n.output {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  font-variant-numeric: tabular-nums;\n}\n\n.track {\n  position: relative;\n  height: 6px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.slider[data-orientation=\"vertical\"] .track {\n  width: 6px;\n  height: 100%;\n}\n\n.fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background: var(--wzl-accent-strong);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.thumb {\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-fg-muted);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 50%;\n  cursor: ew-resize;\n  outline: none;\n  transition: box-shadow var(--wzl-motion-fast);\n}\n\n.slider[data-orientation=\"vertical\"] .thumb {\n  cursor: ns-resize;\n}\n\n.thumb[data-focus-visible] {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.thumb[data-dragging] {\n  background: var(--wzl-accent-strong);\n}\n\n.slider[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Slider as RACSlider,\n  SliderOutput,\n  SliderTrack,\n  SliderThumb,\n  Label,\n  type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport s from './RangeSlider.module.css';\n\n/** Props for {@link RangeSlider}, on top of React Aria's `Slider` props. */\nexport type RangeSliderProps = Omit<RACSliderProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  /** Show the current value next to the label. Defaults to true when a\n   *  label is supplied. */\n  showOutput?: boolean;\n  /** Format the rendered value(s). Useful for units (`v => `${v}%``). */\n  formatOutput?: (v: number | number[]) => ReactNode;\n  className?: string;\n};\n\n/**\n * Linear range slider on React Aria. Single-value by default; pass an array\n * to `value` / `defaultValue` for multi-thumb. Distinct from `Slider`, which\n * is fully controlled and gives each thumb its own bounds and readout.\n *\n * The root is a column flex container and the track stretches to it, so\n * `align-items` on the root or on a wrapper that replaces it governs the\n * *horizontal* axis here and collapses the track to its content width. Style\n * the wrapper around one, not the root.\n */\nexport function RangeSlider(props: RangeSliderProps) {\n  const { label, showOutput, formatOutput, className, ...rest } = props;\n  const wantOutput = showOutput ?? label !== undefined;\n  return (\n    <RACSlider {...rest} className={[s.slider, className].filter(Boolean).join(' ')}>\n      {(label !== undefined || wantOutput) && (\n        <div className={s.head}>\n          {label !== undefined && <Label className={s.label}>{label}</Label>}\n          {wantOutput && (\n            <SliderOutput className={s.output}>\n              {({ state }) => {\n                const v = state.values.length === 1 ? state.values[0] : state.values;\n                return formatOutput ? formatOutput(v) : Array.isArray(v) ? v.join(' – ') : String(v);\n              }}\n            </SliderOutput>\n          )}\n        </div>\n      )}\n      <SliderTrack className={s.track}>\n        {({ state }) => {\n          // Single-thumb: fill from start to thumb. Multi-thumb: fill\n          // between adjacent thumbs (simplest = between first and last).\n          const fillStart = state.values.length > 1 ? state.getThumbPercent(0) * 100 : 0;\n          const fillEnd = state.getThumbPercent(state.values.length - 1) * 100;\n          return (\n            <>\n              <div\n                className={s.fill}\n                style={{ left: `${fillStart}%`, right: `${100 - fillEnd}%` }}\n              />\n              {state.values.map((_, i) => (\n                <SliderThumb key={i} index={i} className={s.thumb} />\n              ))}\n            </>\n          );\n        }}\n      </SliderTrack>\n    </RACSlider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;ACgCA,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,UAAO,eAAY,iBAAc,cAAW,GAAG,MAAS,GAC1D,IAAa,KAAc,MAAU,KAAA;AAC3C,QACE,kBAAC,GAAD;EAAW,GAAI;EAAM,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA/E,EACI,MAAU,KAAA,KAAa,MACvB,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAQ;IAAc,CAAA,EACjE,KACC,kBAAC,GAAD;IAAc,WAAW,EAAE;eACvB,EAAE,eAAY;KACd,IAAM,IAAI,EAAM,OAAO,WAAW,IAAI,EAAM,OAAO,KAAK,EAAM;AAC9D,YAAO,IAAe,EAAa,EAAE,GAAG,MAAM,QAAQ,EAAE,GAAG,EAAE,KAAK,MAAM,GAAG,OAAO,EAAE;;IAEzE,CAAA,CAEb;MAER,kBAAC,GAAD;GAAa,WAAW,EAAE;cACtB,EAAE,eAAY;IAGd,IAAM,IAAY,EAAM,OAAO,SAAS,IAAI,EAAM,gBAAgB,EAAE,GAAG,MAAM,GACvE,IAAU,EAAM,gBAAgB,EAAM,OAAO,SAAS,EAAE,GAAG;AACjE,WACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;KACE,WAAW,EAAE;KACb,OAAO;MAAE,MAAM,GAAG,EAAU;MAAI,OAAO,GAAG,MAAM,EAAQ;MAAI;KAC5D,CAAA,EACD,EAAM,OAAO,KAAK,GAAG,MACpB,kBAAC,GAAD;KAAqB,OAAO;KAAG,WAAW,EAAE;KAAS,EAAnC,EAAmC,CACrD,CACD,EAAA,CAAA;;GAGK,CAAA,CACJ"}

package/dist/chunks/{ResizeHandle-DMJdqRud.js → ResizeHandle-BrCO0JrH.js}

@@ -76,4 +76,4 @@ function c(o) {
 //#endregion
 export { c as t };
 
-//# sourceMappingURL=ResizeHandle-DMJdqRud.js.map
+//# sourceMappingURL=ResizeHandle-BrCO0JrH.js.map

package/dist/chunks/{ResizeHandle-DMJdqRud.js.map → ResizeHandle-BrCO0JrH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle-DMJdqRud.js","names":[],"sources":["../../src/components/ResizeHandle/ResizeHandle.module.css","../../src/components/ResizeHandle/ResizeHandle.tsx"],"sourcesContent":[".handle {\n  flex-shrink: 0;\n  width: 4px;\n  align-self: stretch;\n  cursor: ew-resize;\n  background: transparent;\n  border-left: 1px solid var(--wzl-border);\n  /* The bar is 4px of hit area — thin enough to read as a seam, wide\n     enough to grab. `touch-action: none` keeps a touch drag from being\n     stolen by the scroll container it usually sits inside. */\n  touch-action: none;\n}\n\n.handle.horizontal {\n  width: auto;\n  height: 4px;\n  align-self: auto;\n  cursor: ns-resize;\n  border-left: none;\n  border-top: 1px solid var(--wzl-border);\n}\n\n.handle:hover {\n  background: var(--wzl-border);\n}\n\n.handle:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring, var(--wzl-accent));\n  outline-offset: -1px;\n}\n","import { useCallback, useEffect, useRef, type KeyboardEvent, type PointerEvent } from 'react';\nimport { openPointerSession, type PointerSession } from '@weasel-js/core';\nimport s from './ResizeHandle.module.css';\n\n/**\n * Props for {@link ResizeHandle}. `onInput` fires throughout the drag and\n * `onChange` once at the end.\n */\nexport interface ResizeHandleProps {\n  /**\n   * Which way the handle *runs*, matching `aria-orientation` on the\n   * separator role: a `vertical` handle is a vertical bar between two\n   * side-by-side panes and drags horizontally. `horizontal` is the\n   * stacked case (a bar between rows, dragged up and down).\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /** Current size of the pane being resized, in pixels. */\n  value: number;\n  min: number;\n  max: number;\n  /**\n   * Flip the sign of the drag. Panes docked to the *trailing* edge (a\n   * right sidebar, a bottom drawer) grow as the pointer moves toward the\n   * start of the axis, so they want `invert`. Leading-edge panes don't.\n   */\n  invert?: boolean;\n  /**\n   * Fires continuously while dragging and on each keyboard step, always\n   * clamped to [min, max]. Drive the live size from this.\n   */\n  onInput(next: number): void;\n  /**\n   * Fires once when a drag ends or a keyboard step settles, with the final\n   * size. Persist here rather than in `onInput` — one write per gesture\n   * instead of one per pointer sample.\n   */\n  onChange?(next: number): void;\n  /**\n   * The granularity of `value`. Arrow keys move by one step (Shift by\n   * eight), and pointer drags snap to the same grid — a pointer reports\n   * fractional coordinates on a scaled display, and nobody wants\n   * `362.9453125` in their persisted layout. Set a fractional step for a\n   * pane measured in something finer than whole pixels.\n   */\n  step?: number;\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst clamp = (n: number, min: number, max: number): number => Math.min(max, Math.max(min, n));\n\n/**\n * Snap to the step grid, then clamp. Bounds win over the grid: `min`/`max`\n * are hard limits, so a range that isn't a whole number of steps clips to\n * the bound rather than overshooting it.\n */\nfunction settle(n: number, min: number, max: number, step: number): number {\n  const snapped = step > 0 ? Math.round(n / step) * step : n;\n  // Re-round to kill the float dust `x / 0.1 * 0.1` leaves behind.\n  const precise = Number.isInteger(step) ? snapped : Number(snapped.toFixed(10));\n  return clamp(precise, min, max);\n}\n\n/**\n * Draggable divider for resizing a pane — the \"window splitter\" pattern.\n * Owns no size of its own: the consumer holds `value` and applies it\n * (typically as a CSS custom property on the pane), which keeps the handle\n * usable for flex, grid, and absolutely-positioned layouts alike.\n *\n * Keyboard-operable as a matter of course: it's focusable, arrows step by\n * `step` (Shift for a coarse step), Home/End jump to the bounds. A splitter\n * that only responds to a pointer drag strands anyone who can't make one.\n */\nexport function ResizeHandle(props: ResizeHandleProps) {\n  const {\n    orientation = 'vertical', value, min, max, invert, onInput, onChange,\n    step = 1, ariaLabel, className,\n  } = props;\n\n  // The session reads current props rather than the ones the pointerdown\n  // closed over, so a bound or a step changed mid-drag takes effect.\n  const latest = useRef(props);\n  latest.current = props;\n\n  // Drag origin. Measured on pointerdown so every move is measured against\n  // the gesture's start rather than the previous sample — accumulating\n  // per-sample deltas drifts once the pointer leaves the clamped range.\n  const drag = useRef<{ origin: number; startValue: number; last: number } | null>(null);\n  const session = useRef<PointerSession | null>(null);\n  useEffect(() => () => { session.current?.cancel(); }, []);\n\n  const valueAt = (axis: number): number => {\n    const d = drag.current!;\n    const p = latest.current;\n    const delta = axis - d.origin;\n    return settle(d.startValue + (p.invert ? -delta : delta), p.min, p.max, p.step ?? 1);\n  };\n\n  const finish = (next: number) => {\n    drag.current = null;\n    session.current = null;\n    latest.current.onChange?.(next);\n  };\n\n  const onPointerDown = useCallback((e: PointerEvent<HTMLDivElement>) => {\n    if (e.button !== 0 || session.current) return;\n    const p = latest.current;\n    const vertical = (p.orientation ?? 'vertical') === 'vertical';\n    const axisOf = (ev: { clientX: number; clientY: number }) => (vertical ? ev.clientX : ev.clientY);\n    drag.current = {\n      origin: axisOf(e),\n      startValue: p.value,\n      last: settle(p.value, p.min, p.max, p.step ?? 1),\n    };\n    session.current = openPointerSession(e.currentTarget, e, {\n      onMove: (ev) => {\n        const next = valueAt(axisOf(ev));\n        drag.current!.last = next;\n        latest.current.onInput(next);\n      },\n      onEnd: (ev) => { finish(valueAt(axisOf(ev))); },\n      // A cancelled resize settles where it was left: `onInput` has already\n      // moved the pane there and the consumer owns the value, so abandoning\n      // the commit would persist a size the user is no longer looking at.\n      onCancel: () => { finish(drag.current!.last); },\n    });\n    e.preventDefault();\n  }, []);\n\n  const onKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {\n    const grow = orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown';\n    const shrink = orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp';\n    const amount = step * (e.shiftKey ? 8 : 1) * (invert ? -1 : 1);\n    let next: number | undefined;\n    if (e.key === grow) next = value + amount;\n    else if (e.key === shrink) next = value - amount;\n    else if (e.key === 'Home') next = invert ? max : min;\n    else if (e.key === 'End') next = invert ? min : max;\n    if (next === undefined) return;\n    e.preventDefault();\n    const settled = settle(next, min, max, step);\n    onInput(settled);\n    onChange?.(settled);\n  }, [invert, max, min, onInput, onChange, orientation, step, value]);\n\n  const cls = [s.handle, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n\n  return (\n    <div\n      className={cls}\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={ariaLabel}\n      aria-orientation={orientation}\n      aria-valuenow={value}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n"],"mappings":";;;;;;GCiDM,KAAS,GAAW,GAAa,MAAwB,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAE,CAAC;AAO9F,SAAS,EAAO,GAAW,GAAa,GAAa,GAAsB;CACzE,IAAM,IAAU,IAAO,IAAI,KAAK,MAAM,IAAI,EAAK,GAAG,IAAO;AAGzD,QAAO,EADS,OAAO,UAAU,EAAK,GAAG,IAAU,OAAO,EAAQ,QAAQ,GAAG,CAAC,EACxD,GAAK,EAAI;;AAajC,SAAgB,EAAa,GAA0B;CACrD,IAAM,EACJ,iBAAc,YAAY,UAAO,QAAK,QAAK,WAAQ,YAAS,aAC5D,UAAO,GAAG,cAAW,iBACnB,GAIE,IAAS,EAAO,EAAM;AAC5B,GAAO,UAAU;CAKjB,IAAM,IAAO,EAAoE,KAAK,EAChF,IAAU,EAA8B,KAAK;AACnD,eAAsB;AAAE,IAAQ,SAAS,QAAQ;IAAK,EAAE,CAAC;CAEzD,IAAM,KAAW,MAAyB;EACxC,IAAM,IAAI,EAAK,SACT,IAAI,EAAO,SACX,IAAQ,IAAO,EAAE;AACvB,SAAO,EAAO,EAAE,cAAc,EAAE,SAAS,CAAC,IAAQ,IAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;IAGhF,KAAU,MAAiB;AAG/B,EAFA,EAAK,UAAU,MACf,EAAQ,UAAU,MAClB,EAAO,QAAQ,WAAW,EAAK;IAG3B,IAAgB,GAAa,MAAoC;AACrE,MAAI,EAAE,WAAW,KAAK,EAAQ,QAAS;EACvC,IAAM,IAAI,EAAO,SACX,KAAY,EAAE,eAAe,gBAAgB,YAC7C,KAAU,MAA8C,IAAW,EAAG,UAAU,EAAG;AAkBzF,EAjBA,EAAK,UAAU;GACb,QAAQ,EAAO,EAAE;GACjB,YAAY,EAAE;GACd,MAAM,EAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;GACjD,EACD,EAAQ,UAAU,EAAmB,EAAE,eAAe,GAAG;GACvD,SAAS,MAAO;IACd,IAAM,IAAO,EAAQ,EAAO,EAAG,CAAC;AAEhC,IADA,EAAK,QAAS,OAAO,GACrB,EAAO,QAAQ,QAAQ,EAAK;;GAE9B,QAAQ,MAAO;AAAE,MAAO,EAAQ,EAAO,EAAG,CAAC,CAAC;;GAI5C,gBAAgB;AAAE,MAAO,EAAK,QAAS,KAAK;;GAC7C,CAAC,EACF,EAAE,gBAAgB;IACjB,EAAE,CAAC,EAEA,IAAY,GAAa,MAAqC;EAClE,IAAM,IAAO,MAAgB,aAAa,eAAe,aACnD,IAAS,MAAgB,aAAa,cAAc,WACpD,IAAS,KAAQ,EAAE,WAAW,IAAI,MAAM,IAAS,KAAK,IACxD;AAKJ,MAJI,EAAE,QAAQ,IAAM,IAAO,IAAQ,IAC1B,EAAE,QAAQ,IAAQ,IAAO,IAAQ,IACjC,EAAE,QAAQ,SAAQ,IAAO,IAAS,IAAM,IACxC,EAAE,QAAQ,UAAO,IAAO,IAAS,IAAM,IAC5C,MAAS,KAAA,EAAW;AACxB,IAAE,gBAAgB;EAClB,IAAM,IAAU,EAAO,GAAM,GAAK,GAAK,EAAK;AAE5C,EADA,EAAQ,EAAQ,EAChB,IAAW,EAAQ;IAClB;EAAC;EAAQ;EAAK;EAAK;EAAS;EAAU;EAAa;EAAM;EAAM,CAAC;AAKnE,QACE,kBAAC,OAAD;EACE,WALQ;GAAC,EAAE;GAAQ,MAAgB,gBAAgB,EAAE;GAAY;GAAU,CAC5E,OAAO,QAAQ,CAAC,KAAK,IAIT;EACX,MAAK;EACL,UAAU;EACV,cAAY;EACZ,oBAAkB;EAClB,iBAAe;EACf,iBAAe;EACf,iBAAe;EACA;EACJ;EACX,CAAA"}
+{"version":3,"file":"ResizeHandle-BrCO0JrH.js","names":[],"sources":["../../src/components/ResizeHandle/ResizeHandle.module.css","../../src/components/ResizeHandle/ResizeHandle.tsx"],"sourcesContent":[".handle {\n  flex-shrink: 0;\n  width: 4px;\n  align-self: stretch;\n  cursor: ew-resize;\n  background: transparent;\n  border-left: 1px solid var(--wzl-border);\n  /* The bar is 4px of hit area — thin enough to read as a seam, wide\n     enough to grab. `touch-action: none` keeps a touch drag from being\n     stolen by the scroll container it usually sits inside. */\n  touch-action: none;\n}\n\n.handle.horizontal {\n  width: auto;\n  height: 4px;\n  align-self: auto;\n  cursor: ns-resize;\n  border-left: none;\n  border-top: 1px solid var(--wzl-border);\n}\n\n.handle:hover {\n  background: var(--wzl-border);\n}\n\n.handle:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring, var(--wzl-accent));\n  outline-offset: -1px;\n}\n","import { useCallback, useEffect, useRef, type KeyboardEvent, type PointerEvent } from 'react';\nimport { openPointerSession, type PointerSession } from '@weasel-js/core';\nimport s from './ResizeHandle.module.css';\n\n/**\n * Props for {@link ResizeHandle}. `onInput` fires throughout the drag and\n * `onChange` once at the end.\n */\nexport interface ResizeHandleProps {\n  /**\n   * Which way the handle *runs*, matching `aria-orientation` on the\n   * separator role: a `vertical` handle is a vertical bar between two\n   * side-by-side panes and drags horizontally. `horizontal` is the\n   * stacked case (a bar between rows, dragged up and down).\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /** Current size of the pane being resized, in pixels. */\n  value: number;\n  min: number;\n  max: number;\n  /**\n   * Flip the sign of the drag. Panes docked to the *trailing* edge (a\n   * right sidebar, a bottom drawer) grow as the pointer moves toward the\n   * start of the axis, so they want `invert`. Leading-edge panes don't.\n   */\n  invert?: boolean;\n  /**\n   * Fires continuously while dragging and on each keyboard step, always\n   * clamped to [min, max]. Drive the live size from this.\n   */\n  onInput(next: number): void;\n  /**\n   * Fires once when a drag ends or a keyboard step settles, with the final\n   * size. Persist here rather than in `onInput` — one write per gesture\n   * instead of one per pointer sample.\n   */\n  onChange?(next: number): void;\n  /**\n   * The granularity of `value`. Arrow keys move by one step (Shift by\n   * eight), and pointer drags snap to the same grid — a pointer reports\n   * fractional coordinates on a scaled display, and nobody wants\n   * `362.9453125` in their persisted layout. Set a fractional step for a\n   * pane measured in something finer than whole pixels.\n   */\n  step?: number;\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst clamp = (n: number, min: number, max: number): number => Math.min(max, Math.max(min, n));\n\n/**\n * Snap to the step grid, then clamp. Bounds win over the grid: `min`/`max`\n * are hard limits, so a range that isn't a whole number of steps clips to\n * the bound rather than overshooting it.\n */\nfunction settle(n: number, min: number, max: number, step: number): number {\n  const snapped = step > 0 ? Math.round(n / step) * step : n;\n  // Re-round to kill the float dust `x / 0.1 * 0.1` leaves behind.\n  const precise = Number.isInteger(step) ? snapped : Number(snapped.toFixed(10));\n  return clamp(precise, min, max);\n}\n\n/**\n * Draggable divider for resizing a pane — the \"window splitter\" pattern.\n * Owns no size of its own: the consumer holds `value` and applies it\n * (typically as a CSS custom property on the pane), which keeps the handle\n * usable for flex, grid, and absolutely-positioned layouts alike.\n *\n * Keyboard-operable as a matter of course: it's focusable, arrows step by\n * `step` (Shift for a coarse step), Home/End jump to the bounds. A splitter\n * that only responds to a pointer drag strands anyone who can't make one.\n */\nexport function ResizeHandle(props: ResizeHandleProps) {\n  const {\n    orientation = 'vertical', value, min, max, invert, onInput, onChange,\n    step = 1, ariaLabel, className,\n  } = props;\n\n  // The session reads current props rather than the ones the pointerdown\n  // closed over, so a bound or a step changed mid-drag takes effect.\n  const latest = useRef(props);\n  latest.current = props;\n\n  // Drag origin. Measured on pointerdown so every move is measured against\n  // the gesture's start rather than the previous sample — accumulating\n  // per-sample deltas drifts once the pointer leaves the clamped range.\n  const drag = useRef<{ origin: number; startValue: number; last: number } | null>(null);\n  const session = useRef<PointerSession | null>(null);\n  useEffect(() => () => { session.current?.cancel(); }, []);\n\n  const valueAt = (axis: number): number => {\n    const d = drag.current!;\n    const p = latest.current;\n    const delta = axis - d.origin;\n    return settle(d.startValue + (p.invert ? -delta : delta), p.min, p.max, p.step ?? 1);\n  };\n\n  const finish = (next: number) => {\n    drag.current = null;\n    session.current = null;\n    latest.current.onChange?.(next);\n  };\n\n  const onPointerDown = useCallback((e: PointerEvent<HTMLDivElement>) => {\n    if (e.button !== 0 || session.current) return;\n    const p = latest.current;\n    const vertical = (p.orientation ?? 'vertical') === 'vertical';\n    const axisOf = (ev: { clientX: number; clientY: number }) => (vertical ? ev.clientX : ev.clientY);\n    drag.current = {\n      origin: axisOf(e),\n      startValue: p.value,\n      last: settle(p.value, p.min, p.max, p.step ?? 1),\n    };\n    session.current = openPointerSession(e.currentTarget, e, {\n      onMove: (ev) => {\n        const next = valueAt(axisOf(ev));\n        drag.current!.last = next;\n        latest.current.onInput(next);\n      },\n      onEnd: (ev) => { finish(valueAt(axisOf(ev))); },\n      // A cancelled resize settles where it was left: `onInput` has already\n      // moved the pane there and the consumer owns the value, so abandoning\n      // the commit would persist a size the user is no longer looking at.\n      onCancel: () => { finish(drag.current!.last); },\n    });\n    e.preventDefault();\n  }, []);\n\n  const onKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {\n    const grow = orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown';\n    const shrink = orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp';\n    const amount = step * (e.shiftKey ? 8 : 1) * (invert ? -1 : 1);\n    let next: number | undefined;\n    if (e.key === grow) next = value + amount;\n    else if (e.key === shrink) next = value - amount;\n    else if (e.key === 'Home') next = invert ? max : min;\n    else if (e.key === 'End') next = invert ? min : max;\n    if (next === undefined) return;\n    e.preventDefault();\n    const settled = settle(next, min, max, step);\n    onInput(settled);\n    onChange?.(settled);\n  }, [invert, max, min, onInput, onChange, orientation, step, value]);\n\n  const cls = [s.handle, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n\n  return (\n    <div\n      className={cls}\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={ariaLabel}\n      aria-orientation={orientation}\n      aria-valuenow={value}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n"],"mappings":";;;;;;GCiDM,KAAS,GAAW,GAAa,MAAwB,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAE,CAAC;AAO9F,SAAS,EAAO,GAAW,GAAa,GAAa,GAAsB;CACzE,IAAM,IAAU,IAAO,IAAI,KAAK,MAAM,IAAI,EAAK,GAAG,IAAO;AAGzD,QAAO,EADS,OAAO,UAAU,EAAK,GAAG,IAAU,OAAO,EAAQ,QAAQ,GAAG,CAAC,EACxD,GAAK,EAAI;;AAajC,SAAgB,EAAa,GAA0B;CACrD,IAAM,EACJ,iBAAc,YAAY,UAAO,QAAK,QAAK,WAAQ,YAAS,aAC5D,UAAO,GAAG,cAAW,iBACnB,GAIE,IAAS,EAAO,EAAM;AAC5B,GAAO,UAAU;CAKjB,IAAM,IAAO,EAAoE,KAAK,EAChF,IAAU,EAA8B,KAAK;AACnD,eAAsB;AAAE,IAAQ,SAAS,QAAQ;IAAK,EAAE,CAAC;CAEzD,IAAM,KAAW,MAAyB;EACxC,IAAM,IAAI,EAAK,SACT,IAAI,EAAO,SACX,IAAQ,IAAO,EAAE;AACvB,SAAO,EAAO,EAAE,cAAc,EAAE,SAAS,CAAC,IAAQ,IAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;IAGhF,KAAU,MAAiB;AAG/B,EAFA,EAAK,UAAU,MACf,EAAQ,UAAU,MAClB,EAAO,QAAQ,WAAW,EAAK;IAG3B,IAAgB,GAAa,MAAoC;AACrE,MAAI,EAAE,WAAW,KAAK,EAAQ,QAAS;EACvC,IAAM,IAAI,EAAO,SACX,KAAY,EAAE,eAAe,gBAAgB,YAC7C,KAAU,MAA8C,IAAW,EAAG,UAAU,EAAG;AAkBzF,EAjBA,EAAK,UAAU;GACb,QAAQ,EAAO,EAAE;GACjB,YAAY,EAAE;GACd,MAAM,EAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;GACjD,EACD,EAAQ,UAAU,EAAmB,EAAE,eAAe,GAAG;GACvD,SAAS,MAAO;IACd,IAAM,IAAO,EAAQ,EAAO,EAAG,CAAC;AAEhC,IADA,EAAK,QAAS,OAAO,GACrB,EAAO,QAAQ,QAAQ,EAAK;;GAE9B,QAAQ,MAAO;AAAE,MAAO,EAAQ,EAAO,EAAG,CAAC,CAAC;;GAI5C,gBAAgB;AAAE,MAAO,EAAK,QAAS,KAAK;;GAC7C,CAAC,EACF,EAAE,gBAAgB;IACjB,EAAE,CAAC,EAEA,IAAY,GAAa,MAAqC;EAClE,IAAM,IAAO,MAAgB,aAAa,eAAe,aACnD,IAAS,MAAgB,aAAa,cAAc,WACpD,IAAS,KAAQ,EAAE,WAAW,IAAI,MAAM,IAAS,KAAK,IACxD;AAKJ,MAJI,EAAE,QAAQ,IAAM,IAAO,IAAQ,IAC1B,EAAE,QAAQ,IAAQ,IAAO,IAAQ,IACjC,EAAE,QAAQ,SAAQ,IAAO,IAAS,IAAM,IACxC,EAAE,QAAQ,UAAO,IAAO,IAAS,IAAM,IAC5C,MAAS,KAAA,EAAW;AACxB,IAAE,gBAAgB;EAClB,IAAM,IAAU,EAAO,GAAM,GAAK,GAAK,EAAK;AAE5C,EADA,EAAQ,EAAQ,EAChB,IAAW,EAAQ;IAClB;EAAC;EAAQ;EAAK;EAAK;EAAS;EAAU;EAAa;EAAM;EAAM,CAAC;AAKnE,QACE,kBAAC,OAAD;EACE,WALQ;GAAC,EAAE;GAAQ,MAAgB,gBAAgB,EAAE;GAAY;GAAU,CAC5E,OAAO,QAAQ,CAAC,KAAK,IAIT;EACX,MAAK;EACL,UAAU;EACV,cAAY;EACZ,oBAAkB;EAClB,iBAAe;EACf,iBAAe;EACf,iBAAe;EACA;EACJ;EACX,CAAA"}

package/dist/chunks/Select-CacMfs4v.js

@@ -0,0 +1,124 @@
+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, FieldError as s, Label as c, ListBox as l, ListBoxItem as u, Popover as d, Select as f, SelectValue as p, Text as m } from "react-aria-components";
+var h = {
+	field: "_field_1wahg_1",
+	trigger: "_trigger_1wahg_9",
+	value: "_value_1wahg_41",
+	chevron: "_chevron_1wahg_54",
+	popover: "_popover_1wahg_61",
+	listbox: "_listbox_1wahg_67",
+	option: "_option_1wahg_80",
+	check: "_check_1wahg_105",
+	fit: "_fit_1wahg_118",
+	sizer: "_sizer_1wahg_129"
+};
+//#endregion
+//#region src/components/Select/Select.tsx
+function g(i) {
+	let { label: a, description: u, errorMessage: g, placeholder: y, options: x, children: S, selectedKey: C, defaultSelectedKey: w, onSelectionChange: T, width: E = "fill", className: D, portalContainer: O, ...k } = i, { anchor: A, portalProps: j } = e(O);
+	return /* @__PURE__ */ r(f, {
+		...k,
+		selectedKey: C,
+		defaultSelectedKey: w,
+		onSelectionChange: T ? (e) => T(e) : void 0,
+		className: [
+			h.field,
+			E === "fit" && h.fit,
+			t.root,
+			D
+		].filter(Boolean).join(" "),
+		children: [
+			A,
+			a !== void 0 && /* @__PURE__ */ n(c, {
+				className: t.label,
+				children: a
+			}),
+			/* @__PURE__ */ r(o, {
+				className: h.trigger,
+				children: [
+					/* @__PURE__ */ n(p, {
+						className: h.value,
+						children: ({ defaultChildren: e, isPlaceholder: t }) => t ? y ?? e : e
+					}),
+					E === "fit" && /* @__PURE__ */ r("span", {
+						className: h.sizer,
+						"aria-hidden": "true",
+						children: [y !== void 0 && /* @__PURE__ */ n("span", { children: y }), v(x, S).map((e, t) => /* @__PURE__ */ r("span", { children: [/* @__PURE__ */ n(_, {}), e] }, t))]
+					}),
+					/* @__PURE__ */ n("svg", {
+						className: h.chevron,
+						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"
+						})
+					})
+				]
+			}),
+			u !== void 0 && /* @__PURE__ */ n(m, {
+				slot: "description",
+				className: t.hint,
+				children: u
+			}),
+			/* @__PURE__ */ n(s, {
+				className: t.error,
+				children: g
+			}),
+			/* @__PURE__ */ n(d, {
+				className: h.popover,
+				"data-weasel-overlay": "",
+				...j,
+				children: /* @__PURE__ */ n(l, {
+					className: h.listbox,
+					children: x === void 0 ? S : x.map((e) => /* @__PURE__ */ n(b, {
+						id: e.value,
+						isDisabled: e.isDisabled,
+						textValue: e.textValue,
+						children: e.label
+					}, String(e.value)))
+				})
+			})
+		]
+	});
+}
+function _() {
+	return /* @__PURE__ */ n("svg", {
+		className: h.check,
+		viewBox: "0 0 10 10",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ n("polyline", {
+			points: "1.5,5 4,7.5 8.5,3",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.6",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function v(e, t) {
+	return e === void 0 ? i.toArray(t).map((e) => a(e) ? e.props.children : e) : e.map((e) => e.label);
+}
+function y(e, t) {
+	return t === void 0 ? typeof e == "string" || typeof e == "number" ? String(e) : void 0 : t;
+}
+function b({ children: e, className: t, textValue: i, ...a }) {
+	return /* @__PURE__ */ r(u, {
+		...a,
+		textValue: y(e, i),
+		className: [h.option, t].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ n(_, {}), e]
+	});
+}
+//#endregion
+export { b as n, g as t };
+
+//# sourceMappingURL=Select-CacMfs4v.js.map

package/dist/chunks/Select-CacMfs4v.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-CacMfs4v.js","names":[],"sources":["../../src/components/Select/Select.module.css","../../src/components/Select/Select.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.trigger {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: 6px;\n  height: var(--wzl-control-h);\n  padding: 0 6px 0 10px;\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  cursor: pointer;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.trigger[data-focus-visible] {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .trigger {\n  border-color: var(--wzl-danger);\n}\n\n.trigger[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.value {\n  flex: 1;\n  min-width: 0;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value[data-placeholder] {\n  color: var(--wzl-fg-subtle);\n}\n\n.chevron {\n  width: 10px;\n  height: 10px;\n  color: var(--wzl-fg-muted);\n  flex: 0 0 auto;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  max-height: inherit;\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  gap: 8px;\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  color: var(--wzl-fg);\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.check {\n  width: 10px;\n  height: 10px;\n  flex: 0 0 auto;\n  opacity: 0;\n}\n\n.option[data-selected] .check {\n  opacity: 1;\n}\n\n/* `width='fit'`: a hidden stack of every option label shares the value's grid\n   cell, so the trigger sizes to its widest option and never resizes on select. */\n.fit {\n  width: auto;\n  max-width: 100%;\n}\n\n.fit .trigger {\n  display: grid;\n  grid-template-columns: auto auto;\n}\n\n.fit .value,\n.fit .sizer {\n  grid-area: 1 / 1;\n}\n\n.fit .chevron {\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}\n\n.sizer > * {\n  grid-area: 1 / 1;\n}\n","import { Children, isValidElement, type ReactNode } from 'react';\nimport {\n  Select as RACSelect,\n  Label,\n  Button as RACButton,\n  SelectValue,\n  Popover as RACPopover,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Text,\n  FieldError,\n  type SelectProps as RACSelectProps,\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 './Select.module.css';\n\n/** One option in a {@link Select}'s `options` list. */\nexport type SelectOption = {\n  value: string;\n  label: ReactNode;\n  isDisabled?: boolean;\n  /**\n   * Plain-text form of `label`, for type-to-select and screen readers.\n   * Only needed when `label` isn't a bare string — a label built from\n   * elements has no text React Aria can read off it. A string label\n   * supplies this itself.\n   */\n  textValue?: string;\n};\n\ntype Key = string | number;\n\n/**\n * Props for {@link Select}, on top of React Aria's `Select` props, with the\n * selection key narrowed to the option value type.\n */\nexport type SelectProps<T extends Key = string> = Omit<RACSelectProps<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  /** Either pass `options` for a quick render, or `children` for full control. */\n  options?: ReadonlyArray<SelectOption & { value: T }>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T) => void;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the select sits in.\n   * `'fit'` sizes the trigger to its widest option, so it neither swallows a\n   * toolbar's slack nor changes width as the selection moves.\n   */\n  width?: 'fill' | 'fit';\n  className?: string;\n} & OverlayPortalProps;\n\n/**\n * Form select wrapping React Aria's Select. Pass either `options` for a\n * quick declarative render or `children` of `<SelectItem>` for control over\n * each row.\n *\n * The selection key type is parameterized so consumers with a string-literal\n * union for `value` (e.g. `'r' | 'g' | 'b'`) get a typed `onSelectionChange`.\n */\nexport function Select<T extends Key = string>(props: SelectProps<T>) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    width = 'fill',\n    className,\n    portalContainer,\n    ...rest\n  } = props;\n\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n\n  return (\n    <RACSelect\n      {...rest}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={onSelectionChange ? (k) => onSelectionChange(k as T) : 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      <RACButton className={s.trigger}>\n        <SelectValue className={s.value}>\n          {({ defaultChildren, isPlaceholder }) =>\n            isPlaceholder ? (placeholder ?? defaultChildren) : defaultChildren\n          }\n        </SelectValue>\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}>\n                <CheckMark />\n                {l}\n              </span>\n            ))}\n          </span>\n        )}\n        <svg className={s.chevron} 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      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n      {/* `data-weasel-overlay` marks DOM that belongs to this control but\n          renders in a portal, outside the subtree the trigger sits in. Any\n          consumer reasoning about \"did focus leave my component?\" via\n          `closest()` gets the wrong answer without it — a text editor whose\n          font menu lives here would end its session the moment the menu is\n          clicked. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACListBox className={s.listbox}>\n          {options !== undefined\n            ? options.map((o) => (\n                <SelectItem\n                  key={String(o.value)}\n                  id={o.value}\n                  isDisabled={o.isDisabled}\n                  textValue={o.textValue}\n                >\n                  {o.label}\n                </SelectItem>\n              ))\n            : children}\n        </RACListBox>\n      </RACPopover>\n    </RACSelect>\n  );\n}\n\n/* A selected row's mark travels into the trigger with its label, so a\n   `width='fit'` sizer has to allow for it too. */\nfunction CheckMark() {\n  return (\n    <svg className={s.check} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n      <polyline points=\"1.5,5 4,7.5 8.5,3\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * The labels a `width='fit'` trigger measures itself against. In the children\n * form the label sits one element deep, inside a `SelectItem`.\n */\nfunction optionLabels(\n  options: ReadonlyArray<SelectOption> | 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 SelectItem}, on top of React Aria's `ListBoxItem` props. */\nexport type SelectItemProps = Omit<RACListBoxItemProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Every row renders a check mark beside its label, so from React Aria's\n * side the children are never plain text and it can't derive the string\n * type-to-select and screen readers need — it warns once per row. A string\n * label already *is* that string, so derive it rather than making every\n * call site restate it; anything richer has to say what it reads as.\n */\nfunction textValueOf(children: ReactNode, explicit: string | undefined): string | undefined {\n  if (explicit !== undefined) return explicit;\n  return typeof children === 'string' || typeof children === 'number'\n    ? String(children)\n    : undefined;\n}\n\n/**\n * One row in a {@link Select}'s list, with a leading check mark when\n * selected. A string child supplies its own `textValue`; anything richer must\n * pass one so type-to-select and screen readers have something to read.\n */\nexport function SelectItem({ children, className, textValue, ...rest }: SelectItemProps) {\n  return (\n    <RACListBoxItem\n      {...rest}\n      textValue={textValueOf(children, textValue)}\n      className={[s.option, className].filter(Boolean).join(' ')}\n    >\n      <CheckMark />\n      {children}\n    </RACListBoxItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;ACmEA,SAAgB,EAA+B,GAAuB;CACpE,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,YACA,aACA,gBACA,uBACA,sBACA,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,EAAO,GAAG,KAAA;EAC1E,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,GAAD;IAAW,WAAW,EAAE;cAAxB;KACE,kBAAC,GAAD;MAAa,WAAW,EAAE;iBACtB,EAAE,oBAAiB,uBACnB,IAAiB,KAAe,IAAmB;MAEzC,CAAA;KACb,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,UAAA,CACE,kBAAC,GAAD,EAAa,CAAA,EACZ,EACI,EAAA,EAHI,EAGJ,CACP,CACG;;KAET,kBAAC,OAAD;MAAK,WAAW,EAAE;MAAS,SAAQ;MAAY,eAAY;gBACzD,kBAAC,QAAD;OAAM,GAAE;OAAiB,MAAK;OAAO,QAAO;OAAe,aAAY;OAAM,eAAc;OAAQ,gBAAe;OAAU,CAAA;MACxH,CAAA;KACI;;GACX,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GAOtE,kBAAC,GAAD;IAAY,WAAW,EAAE;IAAS,uBAAoB;IAAG,GAAI;cAC3D,kBAAC,GAAD;KAAY,WAAW,EAAE;eACtB,MAAY,KAAA,IAWT,IAVA,EAAQ,KAAK,MACX,kBAAC,GAAD;MAEE,IAAI,EAAE;MACN,YAAY,EAAE;MACd,WAAW,EAAE;gBAEZ,EAAE;MACQ,EANN,OAAO,EAAE,MAAM,CAMT,CACb;KAEK,CAAA;IACF,CAAA;GACH;;;AAMhB,SAAS,IAAY;AACnB,QACE,kBAAC,OAAD;EAAK,WAAW,EAAE;EAAO,SAAQ;EAAY,eAAY;YACvD,kBAAC,YAAD;GAAU,QAAO;GAAoB,MAAK;GAAO,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EACpI,CAAA;;AAQV,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;;AAmB/D,SAAS,EAAY,GAAqB,GAAkD;AAE1F,QADI,MAAa,KAAA,IACV,OAAO,KAAa,YAAY,OAAO,KAAa,WACvD,OAAO,EAAS,GAChB,KAAA,IAH+B;;AAWrC,SAAgB,EAAW,EAAE,aAAU,cAAW,cAAW,GAAG,KAAyB;AACvF,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW,EAAY,GAAU,EAAU;EAC3C,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAH5D,CAKE,kBAAC,GAAD,EAAa,CAAA,EACZ,EACc"}