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

package/dist/chunks/ColorField-D1t-BdSa.js

@@ -0,0 +1,60 @@
+import { t as e } from "./InlineRange-C6UYKxLD.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { getAlpha01 as i, toHex8 as a, withAlpha01 as o } from "@weasel-js/core";
+import { useState as s } from "react";
+var c = {
+	root: "_root_17gjv_1",
+	chip: "_chip_17gjv_7",
+	color: "_color_17gjv_14",
+	alphaRange: "_alphaRange_17gjv_40",
+	alphaReadout: "_alphaReadout_17gjv_44"
+};
+//#endregion
+//#region src/components/ColorField/ColorField.tsx
+function l(l) {
+	let { value: u, mixed: d = !1, alpha: f = !1, onInput: p, onChange: m, className: h } = l, g = a(u ?? "#000000"), _ = g.slice(0, 7), v = i(g), y = Math.round(v * 100), [b, x] = s(null), [S, C] = s(null), w = b ?? _, T = S ?? y, E = (e, t) => f ? o(e, t) : e, D = d && b === null, O = (e, t) => {
+		b === null && S === null || (m(E(e, t)), x(null), C(null));
+	};
+	return /* @__PURE__ */ r("span", {
+		className: [c.root, h].filter(Boolean).join(" "),
+		...d && b === null ? { "data-mixed": "" } : {},
+		children: [/* @__PURE__ */ n("span", {
+			className: c.chip,
+			children: /* @__PURE__ */ n("input", {
+				className: c.color,
+				type: "color",
+				value: w,
+				"aria-label": l["aria-label"] ?? "Color",
+				onInput: (e) => {
+					let t = e.target.value;
+					x(t), p?.(E(t, T / 100));
+				},
+				onBlur: () => O(w, T / 100)
+			})
+		}), f && /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n(e, {
+			className: c.alphaRange,
+			min: 0,
+			max: 100,
+			step: 1,
+			value: T,
+			disabled: D,
+			"aria-label": l["aria-label"] ? `${l["aria-label"]} opacity` : "Opacity",
+			onInput: (e) => {
+				let t = Number(e.target.value);
+				C(t), p?.(E(w, t / 100));
+			},
+			onPointerUp: () => O(w, T / 100),
+			onPointerCancel: () => O(w, T / 100),
+			onKeyUp: () => O(w, T / 100),
+			onBlur: () => O(w, T / 100)
+		}), /* @__PURE__ */ r("span", {
+			className: c.alphaReadout,
+			"aria-hidden": "true",
+			children: [T, "%"]
+		})] })]
+	});
+}
+//#endregion
+export { l as t };
+
+//# sourceMappingURL=ColorField-D1t-BdSa.js.map

package/dist/chunks/ColorField-D1t-BdSa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField-D1t-BdSa.js","names":[],"sources":["../../src/components/ColorField/ColorField.module.css","../../src/components/ColorField/ColorField.tsx"],"sourcesContent":[".root {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.chip {\n  position: relative;\n  display: inline-flex;\n  border-radius: var(--wzl-radius-sm);\n  overflow: hidden;\n}\n\n.color {\n  inline-size: 28px;\n  block-size: 20px;\n  padding: 0;\n  border: 1px solid var(--wzl-border, #444);\n  border-radius: var(--wzl-radius-sm);\n  background: none;\n  cursor: pointer;\n}\n\n/* Indeterminate (mixed) presentation: checkerboard overlay atop the\n * swatch. pointer-events: none so the input stays clickable. */\n.root[data-mixed] .chip::after {\n  content: '';\n  position: absolute;\n  inset: 1px;\n  border-radius: var(--wzl-radius-sm);\n  pointer-events: none;\n  background: repeating-conic-gradient(\n      var(--wzl-border, #666) 0% 25%,\n      var(--wzl-surface, #2e2f36) 0% 50%\n    )\n    50% / 8px 8px;\n}\n\n/* `InlineRange` owns the track; this only says how it shares the row. */\n.alphaRange {\n  flex: 1;\n}\n\n.alphaReadout {\n  min-inline-size: 3ch;\n  text-align: end;\n  font-size: var(--wzl-font-size-sm);\n  opacity: 0.7;\n}\n","import { useState } from 'react';\nimport { toHex8, getAlpha01, withAlpha01 } from '@weasel-js/core';\nimport { InlineRange } from '../InlineRange';\nimport s from './ColorField.module.css';\n\n/**\n * Props for {@link ColorField}. `onInput` fires throughout a gesture and\n * `onChange` once at its end.\n */\nexport interface ColorFieldProps {\n  /** Current color, `#rrggbb` or `#rrggbbaa`. Omit when `mixed`. */\n  value?: string;\n  /** Indeterminate presentation (multi-selection with differing colors):\n   *  checkered chip, empty value. The first color edit produces a real\n   *  value; the opacity slider stays disabled until then (an alpha-only\n   *  edit would otherwise commit a value composed against the\n   *  placeholder black). */\n  mixed?: boolean;\n  /** Show the opacity slider; emitted values are `#rrggbbaa`. */\n  alpha?: boolean;\n  /** Live value during interaction (picker drag, slider drag). Optional —\n   *  wire it for live preview; omit it for commit-only consumers. */\n  onInput?: (hex: string) => void;\n  /** Committed value — picker close (blur) or slider release. One call\n   *  per user gesture; pair with an undoable write. */\n  onChange: (hex: string) => void;\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * Compact color editor: native color input + optional opacity slider.\n * Commit semantics are gesture-based (see `onChange`) because native\n * color/range inputs fire `change` continuously during interaction —\n * commit-on-change would emit one undo entry per tick.\n */\nexport function ColorField(props: ColorFieldProps) {\n  const { value, mixed = false, alpha = false, onInput, onChange, className } = props;\n  const hex8 = toHex8(value ?? '#000000');\n  const rgb6 = hex8.slice(0, 7);\n  const alpha01 = getAlpha01(hex8);\n  const alphaPct = Math.round(alpha01 * 100);\n\n  // Drafts track the control during a gesture (the committed prop only\n  // updates after onChange), then reset to follow the prop again.\n  const [colorDraft, setColorDraft] = useState<string | null>(null);\n  const [alphaDraft, setAlphaDraft] = useState<number | null>(null);\n  const visibleRgb = colorDraft ?? rgb6;\n  const visibleAlphaPct = alphaDraft ?? alphaPct;\n\n  const compose = (rgb: string, a01: number): string =>\n    alpha ? withAlpha01(rgb, a01) : rgb;\n\n  // Mixed with no color edit yet: the alpha slider has nothing real to\n  // compose against (rgb6 is the placeholder black), so keep it disabled\n  // until the first color edit lands.\n  const alphaLocked = mixed && colorDraft === null;\n\n  // Commit only when a gesture actually changed something — blur with no\n  // preceding input must not emit (it would create a no-op undo entry).\n  const commit = (rgb: string, a01: number): void => {\n    if (colorDraft === null && alphaDraft === null) return;\n    onChange(compose(rgb, a01));\n    setColorDraft(null);\n    setAlphaDraft(null);\n  };\n\n  return (\n    <span\n      className={[s.root, className].filter(Boolean).join(' ')}\n      {...(mixed && colorDraft === null ? { 'data-mixed': '' } : {})}\n    >\n      <span className={s.chip}>\n        <input\n          className={s.color}\n          type=\"color\"\n          value={visibleRgb}\n          aria-label={props['aria-label'] ?? 'Color'}\n          onInput={(e) => {\n            const rgb = (e.target as HTMLInputElement).value;\n            setColorDraft(rgb);\n            onInput?.(compose(rgb, visibleAlphaPct / 100));\n          }}\n          onBlur={() => commit(visibleRgb, visibleAlphaPct / 100)}\n        />\n      </span>\n      {alpha && (\n        <>\n          <InlineRange\n            className={s.alphaRange}\n            min={0}\n            max={100}\n            step={1}\n            value={visibleAlphaPct}\n            disabled={alphaLocked}\n            aria-label={props['aria-label'] ? `${props['aria-label']} opacity` : 'Opacity'}\n            onInput={(e) => {\n              const pct = Number((e.target as HTMLInputElement).value);\n              setAlphaDraft(pct);\n              onInput?.(compose(visibleRgb, pct / 100));\n            }}\n            onPointerUp={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onPointerCancel={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onKeyUp={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onBlur={() => commit(visibleRgb, visibleAlphaPct / 100)}\n          />\n          <span className={s.alphaReadout} aria-hidden=\"true\">{visibleAlphaPct}%</span>\n        </>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;ACoCA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,WAAQ,IAAO,WAAQ,IAAO,YAAS,aAAU,iBAAc,GACxE,IAAO,EAAO,KAAS,UAAU,EACjC,IAAO,EAAK,MAAM,GAAG,EAAE,EACvB,IAAU,EAAW,EAAK,EAC1B,IAAW,KAAK,MAAM,IAAU,IAAI,EAIpC,CAAC,GAAY,KAAiB,EAAwB,KAAK,EAC3D,CAAC,GAAY,KAAiB,EAAwB,KAAK,EAC3D,IAAa,KAAc,GAC3B,IAAkB,KAAc,GAEhC,KAAW,GAAa,MAC5B,IAAQ,EAAY,GAAK,EAAI,GAAG,GAK5B,IAAc,KAAS,MAAe,MAItC,KAAU,GAAa,MAAsB;AAC7C,QAAe,QAAQ,MAAe,SAC1C,EAAS,EAAQ,GAAK,EAAI,CAAC,EAC3B,EAAc,KAAK,EACnB,EAAc,KAAK;;AAGrB,QACE,kBAAC,QAAD;EACE,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACxD,GAAK,KAAS,MAAe,OAAO,EAAE,cAAc,IAAI,GAAG,EAAE;YAF/D,CAIE,kBAAC,QAAD;GAAM,WAAW,EAAE;aACjB,kBAAC,SAAD;IACE,WAAW,EAAE;IACb,MAAK;IACL,OAAO;IACP,cAAY,EAAM,iBAAiB;IACnC,UAAU,MAAM;KACd,IAAM,IAAO,EAAE,OAA4B;AAE3C,KADA,EAAc,EAAI,EAClB,IAAU,EAAQ,GAAK,IAAkB,IAAI,CAAC;;IAEhD,cAAc,EAAO,GAAY,IAAkB,IAAI;IACvD,CAAA;GACG,CAAA,EACN,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,WAAW,EAAE;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,OAAO;GACP,UAAU;GACV,cAAY,EAAM,gBAAgB,GAAG,EAAM,cAAc,YAAY;GACrE,UAAU,MAAM;IACd,IAAM,IAAM,OAAQ,EAAE,OAA4B,MAAM;AAExD,IADA,EAAc,EAAI,EAClB,IAAU,EAAQ,GAAY,IAAM,IAAI,CAAC;;GAE3C,mBAAmB,EAAO,GAAY,IAAkB,IAAI;GAC5D,uBAAuB,EAAO,GAAY,IAAkB,IAAI;GAChE,eAAe,EAAO,GAAY,IAAkB,IAAI;GACxD,cAAc,EAAO,GAAY,IAAkB,IAAI;GACvD,CAAA,EACF,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAc,eAAY;aAA7C,CAAqD,GAAgB,IAAQ;KAC5E,EAAA,CAAA,CAEA"}

package/dist/chunks/{ComboBox-ONQISwtI.js → ComboBox-cvdKolWv.js}

@@ -1,20 +1,20 @@
-import { n as e } from "./Field-VQwmrIna.js";
-import { Button as t, ComboBox as n, FieldError as r, Input as i, Label as a, ListBox as o, ListBoxItem as s, Popover as c, Text as l } from "react-aria-components";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { n as e } from "./Field-BjFl_yng.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Button as r, ComboBox as i, FieldError as a, Input as o, Label as s, ListBox as c, ListBoxItem as l, Popover as u, Text as d } from "react-aria-components";
 var f = {
-	field: "_field_7wlzm_1",
-	frame: "_frame_7wlzm_9",
-	openButton: "_openButton_7wlzm_53",
-	popover: "_popover_7wlzm_75",
-	listbox: "_listbox_7wlzm_80",
-	option: "_option_7wlzm_93",
-	empty: "_empty_7wlzm_116"
+	field: "_field_nup3u_1",
+	frame: "_frame_nup3u_9",
+	openButton: "_openButton_nup3u_53",
+	popover: "_popover_nup3u_75",
+	listbox: "_listbox_nup3u_80",
+	option: "_option_nup3u_93",
+	empty: "_empty_nup3u_116"
 };
 //#endregion
 //#region src/components/ComboBox/ComboBox.tsx
-function p(s) {
-	let { label: p, description: h, errorMessage: g, placeholder: _, options: v, children: y, selectedKey: b, defaultSelectedKey: x, onSelectionChange: S, emptyLabel: C = "No matches", className: w, ...T } = s;
-	return /* @__PURE__ */ d(n, {
+function p(l) {
+	let { label: p, description: h, errorMessage: g, placeholder: _, options: v, children: y, selectedKey: b, defaultSelectedKey: x, onSelectionChange: S, emptyLabel: C = "No matches", className: w, ...T } = l;
+	return /* @__PURE__ */ n(i, {
 		...T,
 		selectedKey: b,
 		defaultSelectedKey: x,
@@ -25,19 +25,19 @@ function p(s) {
 			w
 		].filter(Boolean).join(" "),
 		children: [
-			p !== void 0 && /* @__PURE__ */ u(a, {
+			p !== void 0 && /* @__PURE__ */ t(s, {
 				className: e.label,
 				children: p
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ n("div", {
 				className: f.frame,
-				children: [/* @__PURE__ */ u(i, { placeholder: _ }), /* @__PURE__ */ u(t, {
+				children: [/* @__PURE__ */ t(o, { placeholder: _ }), /* @__PURE__ */ t(r, {
 					className: f.openButton,
 					"aria-label": "Show options",
-					children: /* @__PURE__ */ u("svg", {
+					children: /* @__PURE__ */ t("svg", {
 						viewBox: "0 0 10 10",
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ u("path", {
+						children: /* @__PURE__ */ t("path", {
 							d: "M2 4 L5 7 L8 4",
 							fill: "none",
 							stroke: "currentColor",
@@ -48,25 +48,25 @@ function p(s) {
 					})
 				})]
 			}),
-			h !== void 0 && /* @__PURE__ */ u(l, {
+			h !== void 0 && /* @__PURE__ */ t(d, {
 				slot: "description",
 				className: e.hint,
 				children: h
 			}),
-			/* @__PURE__ */ u(r, {
+			/* @__PURE__ */ t(a, {
 				className: e.error,
 				children: g
 			}),
-			/* @__PURE__ */ u(c, {
+			/* @__PURE__ */ t(u, {
 				className: f.popover,
 				"data-weasel-overlay": "",
-				children: /* @__PURE__ */ u(o, {
+				children: /* @__PURE__ */ t(c, {
 					className: f.listbox,
-					renderEmptyState: () => /* @__PURE__ */ u("div", {
+					renderEmptyState: () => /* @__PURE__ */ t("div", {
 						className: f.empty,
 						children: C
 					}),
-					children: v === void 0 ? y : v.map((e) => /* @__PURE__ */ u(m, {
+					children: v === void 0 ? y : v.map((e) => /* @__PURE__ */ t(m, {
 						id: e.value,
 						textValue: e.textValue,
 						isDisabled: e.isDisabled,
@@ -77,13 +77,13 @@ function p(s) {
 		]
 	});
 }
-function m({ className: e, ...t }) {
-	return /* @__PURE__ */ u(s, {
-		...t,
+function m({ className: e, ...n }) {
+	return /* @__PURE__ */ t(l, {
+		...n,
 		className: [f.option, e].filter(Boolean).join(" ")
 	});
 }
 //#endregion
 export { m as n, p as t };
 
-//# sourceMappingURL=ComboBox-ONQISwtI.js.map
+//# sourceMappingURL=ComboBox-cvdKolWv.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox-cvdKolWv.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-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 8px;\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","import 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 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  className?: string;\n};\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    className,\n    ...rest\n  } = props;\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, fieldClasses.root, className].filter(Boolean).join(' ')}\n    >\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <div className={s.frame}>\n        <RACInput placeholder={placeholder} />\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=\"\">\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/** 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":";;;;;;;;;;;;;;ACuDA,SAAgB,EAAiC,GAAyB;CACxE,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,YACA,aACA,gBACA,uBACA,sBACA,gBAAa,cACb,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EACE,GAAI;EACS;EACO;EACpB,mBAAmB,KAAqB,MAAM,EAAkB,EAAc,GAAG,KAAA;EACjF,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAL9E;GAOG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB,CACE,kBAAC,GAAD,EAAuB,gBAAe,CAAA,EACtC,kBAAC,GAAD;KAAW,WAAW,EAAE;KAAY,cAAW;eAC7C,kBAAC,OAAD;MAAK,SAAQ;MAAY,eAAY;gBACnC,kBAAC,QAAD;OAAM,GAAE;OAAiB,MAAK;OAAO,QAAO;OAAe,aAAY;OAAM,eAAc;OAAQ,gBAAe;OAAU,CAAA;MACxH,CAAA;KACI,CAAA,CACR;;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;cACpD,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;;;AAUlB,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"}