@viax.io/uxm 4.36.0

package/dist/ui/number-stepper/number-stepper-preview.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { FieldError, Icon, IconButton, NumberStepper } from "../../ui/index.js";
+function buildVars(styles) {
+  return {
+    "--uxm-number-stepper-input-bg": styles.backgroundColor,
+    "--uxm-number-stepper-input-border": styles.borderColor,
+    "--uxm-number-stepper-input-color": styles.color,
+    "--uxm-number-stepper-hover-bg": styles.hoverBg,
+    "--uxm-number-stepper-hover-border": styles.hoverBorder,
+    "--uxm-number-stepper-focus-border": styles.focusBorder,
+    "--uxm-number-stepper-focus-ring": styles.focusRing,
+    "--uxm-number-stepper-disabled-bg": styles.disabledBg,
+    "--uxm-number-stepper-disabled-border": styles.disabledBorder,
+    "--uxm-number-stepper-disabled-color": styles.disabledColor,
+    "--uxm-number-stepper-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-number-stepper-error-bg": styles.errorBg,
+    "--uxm-number-stepper-error-border": styles.errorBorder,
+    "--uxm-number-stepper-error-color": styles.errorColor,
+    "--uxm-number-stepper-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0,
+    "--uxm-number-stepper-input-width": `${styles.inputWidth}px`,
+    "--uxm-number-stepper-input-radius": `${styles.borderRadius}px`,
+    "--uxm-number-stepper-input-padding-x": `${styles.paddingX}px`,
+    "--uxm-number-stepper-input-padding-y": `${styles.paddingY}px`,
+    "--uxm-number-stepper-font-size": `${styles.fontSize}px`,
+    "--uxm-number-stepper-gap": `${styles.gap}px`,
+    "--uxm-number-stepper-unit-color": styles.unitColor,
+    "--uxm-number-stepper-unit-size": `${styles.unitSize}px`
+  };
+}
+function StaticShowcase({ state }) {
+  const isDisabled = state === "disabled";
+  const isError = state === "error";
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "uxm-number-stepper",
+          state === "hover" && "uxm-number-stepper--state-hover",
+          state === "focus" && "uxm-number-stepper--state-focus",
+          isError && "uxm-number-stepper--error"
+        ),
+        ...isDisabled ? { "aria-disabled": true } : {},
+        ...isError ? { "aria-invalid": true } : {},
+        style: { pointerEvents: "none" },
+        children: [
+          /* @__PURE__ */ jsx(IconButton, { tabIndex: -1, disabled: isDisabled, "aria-label": "Decrement", children: /* @__PURE__ */ jsx(Icon, { glyph: "minus", size: 12, strokeWidth: 2 }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              defaultValue: 16,
+              tabIndex: -1,
+              disabled: isDisabled,
+              "aria-label": "Showcase value",
+              className: "uxm-number-stepper__input"
+            }
+          ),
+          /* @__PURE__ */ jsx(IconButton, { tabIndex: -1, disabled: isDisabled, "aria-label": "Increment", children: /* @__PURE__ */ jsx(Icon, { glyph: "plus", size: 12, strokeWidth: 2 }) }),
+          /* @__PURE__ */ jsx("span", { className: "uxm-number-stepper__unit", children: "px" })
+        ]
+      }
+    ),
+    isError && // Same FieldError helper the real atom uses, so the showcase's
+    // message matches the interactive instance below (icon + text).
+    // Reads the projected `--uxm-number-stepper-error-*` vars.
+    /* @__PURE__ */ jsx(FieldError, { className: "uxm-number-stepper__error-message", children: "Value must be between 0 and 64." })
+  ] });
+}
+function NumberStepperPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ jsx(NumberStepperDemo, { state, styles }, state);
+}
+function NumberStepperDemo({ state, styles }) {
+  const isErrorState = state === "error";
+  const [value, setValue] = useState(isErrorState ? 128 : 16);
+  const isInvalid = value < 0 || value > 64;
+  const cssVars = buildVars(styles);
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, minWidth: 200, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsx(StaticShowcase, { state })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ jsx(
+        NumberStepper,
+        {
+          value,
+          onChange: setValue,
+          min: 0,
+          max: 64,
+          step: 1,
+          unit: "px",
+          disabled: state === "disabled",
+          error: isInvalid ? "Value must be between 0 and 64." : void 0
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  NumberStepperPreview
+};
+//# sourceMappingURL=number-stepper-preview.js.map

package/dist/ui/number-stepper/number-stepper-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/number-stepper/number-stepper-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { FieldError, Icon, IconButton, NumberStepper } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every registry knob as a `--uxm-number-stepper-*` custom\n * property on the wrapper. Both the static showcase and the\n * interactive instance below read from the same vars; the showcase\n * forces a state via the `--state-*` modifier class on the wrapper,\n * while the interactive instance exercises the production\n * `:hover` / `:focus-visible` / `:disabled` rules on real input.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-number-stepper-input-bg': styles.backgroundColor as string,\n    '--uxm-number-stepper-input-border': styles.borderColor as string,\n    '--uxm-number-stepper-input-color': styles.color as string,\n    '--uxm-number-stepper-hover-bg': styles.hoverBg as string,\n    '--uxm-number-stepper-hover-border': styles.hoverBorder as string,\n    '--uxm-number-stepper-focus-border': styles.focusBorder as string,\n    '--uxm-number-stepper-focus-ring': styles.focusRing as string,\n    '--uxm-number-stepper-disabled-bg': styles.disabledBg as string,\n    '--uxm-number-stepper-disabled-border': styles.disabledBorder as string,\n    '--uxm-number-stepper-disabled-color': styles.disabledColor as string,\n    '--uxm-number-stepper-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-number-stepper-error-bg': styles.errorBg as string,\n    '--uxm-number-stepper-error-border': styles.errorBorder as string,\n    '--uxm-number-stepper-error-color': styles.errorColor as string,\n    '--uxm-number-stepper-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n    '--uxm-number-stepper-input-width': `${styles.inputWidth}px`,\n    '--uxm-number-stepper-input-radius': `${styles.borderRadius}px`,\n    '--uxm-number-stepper-input-padding-x': `${styles.paddingX}px`,\n    '--uxm-number-stepper-input-padding-y': `${styles.paddingY}px`,\n    '--uxm-number-stepper-font-size': `${styles.fontSize}px`,\n    '--uxm-number-stepper-gap': `${styles.gap}px`,\n    '--uxm-number-stepper-unit-color': styles.unitColor as string,\n    '--uxm-number-stepper-unit-size': `${styles.unitSize}px`,\n  } as CSSProperties;\n}\n\n/**\n * Static showcase — ONE NumberStepper hand-rendered with the forced-\n * state class matching the State dropdown. Inert (`pointer-events:\n * none` + `tabIndex={-1}` on the input + `disabled` on the buttons)\n * so the forced state isn't overridden by real input. Composes the\n * real `IconButton` atom for the ± buttons so the showcase paints\n * the same visual treatment consumers will see in production — when\n * IconButton's theming changes, this showcase updates for free.\n */\nfunction StaticShowcase({ state }: { state: string }) {\n  const isDisabled = state === 'disabled';\n  const isError = state === 'error';\n  return (\n    <div>\n      <div\n        className={cn(\n          'uxm-number-stepper',\n          state === 'hover' && 'uxm-number-stepper--state-hover',\n          state === 'focus' && 'uxm-number-stepper--state-focus',\n          isError && 'uxm-number-stepper--error',\n        )}\n        {...(isDisabled ? { 'aria-disabled': true } : {})}\n        {...(isError ? { 'aria-invalid': true } : {})}\n        style={{ pointerEvents: 'none' }}\n      >\n        {/* Pass `disabled` only when the State variant actually is\n           \"disabled\" — otherwise the IconButton renders with disabled\n           styling (lower opacity, muted color) even in the default\n           showcase, making it visually mismatch the live interactive\n           instance below. `pointer-events: none` on the wrapper plus\n           `tabIndex={-1}` keeps the showcase inert without abusing\n           the disabled prop. */}\n        <IconButton tabIndex={-1} disabled={isDisabled} aria-label=\"Decrement\">\n          <Icon glyph=\"minus\" size={12} strokeWidth={2} />\n        </IconButton>\n        <input\n          type=\"number\"\n          defaultValue={16}\n          tabIndex={-1}\n          disabled={isDisabled}\n          aria-label=\"Showcase value\"\n          className=\"uxm-number-stepper__input\"\n        />\n        <IconButton tabIndex={-1} disabled={isDisabled} aria-label=\"Increment\">\n          <Icon glyph=\"plus\" size={12} strokeWidth={2} />\n        </IconButton>\n        <span className=\"uxm-number-stepper__unit\">px</span>\n      </div>\n      {isError && (\n        // Same FieldError helper the real atom uses, so the showcase's\n        // message matches the interactive instance below (icon + text).\n        // Reads the projected `--uxm-number-stepper-error-*` vars.\n        <FieldError className=\"uxm-number-stepper__error-message\">\n          Value must be between 0 and 64.\n        </FieldError>\n      )}\n    </div>\n  );\n}\n\nexport function NumberStepperPreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const state = (variants.state as string) ?? 'default';\n  return <NumberStepperDemo key={state} state={state} styles={styles} />;\n}\n\n// Keyed by state in the parent so changing the State knob remounts this\n// sub-component and `useState` re-seeds — no effect needed to sync.\nfunction NumberStepperDemo({ state, styles }: { state: string; styles: Styles }) {\n  const isErrorState = state === 'error';\n  // The State variant seeds the initial value: error mode pre-fills\n  // a value past `max={64}` so the realistic failure mode reads as\n  // out-of-range rather than an empty red border. After mount,\n  // the error treatment follows the ACTUAL value's validity (see\n  // `isInvalid` below) — typing a valid number clears the error\n  // border, matching real form-validation UX.\n  const [value, setValue] = useState(isErrorState ? 128 : 16);\n  const isInvalid = value < 0 || value > 64;\n  const cssVars = buildVars(styles);\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, minWidth: 200, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase state={state} />\n      </div>\n\n      {/* Interactive instance — real <NumberStepper> atom. Real\n          `:hover` / `:focus-visible` exercise the production CSS via\n          the projected vars above. Real ± clicks adjust the value.\n          The State dropdown carries through to `disabled` and\n          `error`; the rest fire on real input. The atom owns the\n          error-message rendering (reads the projected `--uxm-number-\n          stepper-error-*` vars), so the preview doesn't add its own. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <NumberStepper\n          value={value}\n          onChange={setValue}\n          min={0}\n          max={64}\n          step={1}\n          unit=\"px\"\n          disabled={state === 'disabled'}\n          error={isInvalid ? 'Value must be between 0 and 64.' : undefined}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/number-stepper/number-stepper.cjs

@@ -0,0 +1,113 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var number_stepper_exports = {};
+__export(number_stepper_exports, {
+  NumberStepper: () => NumberStepper
+});
+module.exports = __toCommonJS(number_stepper_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_field_error = require("../field-error/index.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_icon_button = require("../icon-button/index.cjs");
+function NumberStepper({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  unit,
+  disabled = false,
+  error,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  id,
+  "aria-describedby": describedBy,
+  decrementLabel = "Decrement",
+  incrementLabel = "Increment"
+}) {
+  const errorId = (0, import_react.useId)();
+  const adjust = (delta) => {
+    let next = value + delta;
+    if (min !== void 0) next = Math.max(min, next);
+    if (max !== void 0) next = Math.min(max, next);
+    onChange(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_helpers.cn)(
+          "uxm-number-stepper",
+          error && "uxm-number-stepper--error",
+          className
+        ),
+        style,
+        id,
+        ...disabled ? { "aria-disabled": true } : {},
+        ...error ? { "aria-invalid": true } : {},
+        "aria-describedby": (0, import_helpers.mergeDescribedBy)(describedBy, error ? errorId : void 0),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_icon_button.IconButton,
+            {
+              onClick: () => adjust(-step),
+              disabled,
+              "aria-label": decrementLabel,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "minus", size: 12, strokeWidth: 2 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "number",
+              value,
+              onChange: (e) => onChange(Number(e.target.value)),
+              min,
+              max,
+              step,
+              disabled,
+              "aria-label": ariaLabel,
+              className: "uxm-number-stepper__input"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_icon_button.IconButton,
+            {
+              onClick: () => adjust(step),
+              disabled,
+              "aria-label": incrementLabel,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "plus", size: 12, strokeWidth: 2 })
+            }
+          ),
+          unit && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-number-stepper__unit", children: unit })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { id: errorId, className: "uxm-number-stepper__error-message", children: error })
+  ] });
+}
+NumberStepper.hasError = true;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NumberStepper
+});
+//# sourceMappingURL=number-stepper.cjs.map

package/dist/ui/number-stepper/number-stepper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/number-stepper/number-stepper.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\n\nimport { FieldError } from '../field-error';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\n\nimport type { CSSProperties } from 'react';\n\nexport interface NumberStepperProps {\n  value: number;\n  onChange: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Optional unit displayed as a small suffix (e.g. \"px\"). */\n  unit?: string;\n  /**\n   * Disables the input and both step buttons. `aria-disabled` on the\n   * wrapper drives the dimmed treatment across the whole field (CSS\n   * reads the `disabled-*` vars + applies the disabled-opacity).\n   */\n  disabled?: boolean;\n  /**\n   * When set to a non-empty string, marks the field invalid: adds the\n   * `--error` modifier to the wrapper (which paints the error-state\n   * border + bg via the registry's error knobs), sets `aria-invalid`,\n   * and renders the message below the field. Use for out-of-range\n   * values typed past the buttons' clamp, server-side rejection, or any\n   * custom validation that fails. The ± buttons stay visually unchanged\n   * — error is the field's concern, not the affordance's. Omit (or pass\n   * an empty string) for the normal state.\n   */\n  error?: string;\n  className?: string;\n  style?: CSSProperties;\n  'aria-label'?: string;\n  /**\n   * Forwarded to the field wrapper (the inner `<input>` keeps the accessible name). `FormField` injects both — `id` for its\n   * label association, `aria-describedby` for the hint — so wiring these\n   * makes the atom hint-associable; the describedby is merged with the\n   * atom's own error-message id, consumer ids first.\n   */\n  id?: string;\n  'aria-describedby'?: string;\n\n  /**\n   * Accessible name for the − button. Default `\"Decrement\"`. The buttons\n   * carry no visible text, so this label is the ONLY thing assistive tech\n   * announces for them — it has to be translatable.\n   */\n  decrementLabel?: string;\n  /** Accessible name for the + button. Default `\"Increment\"`. */\n  incrementLabel?: string;\n}\n\n/**\n * A themable numeric input with explicit `−` / `+` step buttons and an\n * optional unit suffix. Suppresses the native browser spinner\n * unconditionally — the explicit buttons own the increment/decrement\n * affordance.\n *\n * The ± buttons compose the `IconButton` atom rather than rendering\n * bespoke `<button>` elements: visual treatment (bg, hover, active,\n * focus-ring, radius, size) flows from IconButton's own registry\n * knobs, so icon buttons look the same everywhere in the app. This\n * atom owns the semantic wiring — `onClick` handlers do the +/− math\n * and clamp to min/max; aria-labels identify the operation to AT.\n * IconButton has zero knowledge of numbers; NumberStepper has zero\n * knowledge of how a button looks.\n *\n * Bare control — no label. The editor's `NumberInput` knob wraps this\n * to add the label row.\n *\n * Sister atoms in the Inputs family:\n *   - `NumberInput`  — plain typing-only numeric field (no buttons).\n *                      Use when an unbounded value or a value the user\n *                      types directly (IDs, raw digits) doesn't benefit\n *                      from step affordances.\n *   - `CurrencyInput` — typing + locale formatting + currency picker.\n *                      Use for monetary values.\n */\nexport function NumberStepper({\n  value,\n  onChange,\n  min,\n  max,\n  step = 1,\n  unit,\n  disabled = false,\n  error,\n  className,\n  style,\n  'aria-label': ariaLabel,\n  id,\n  'aria-describedby': describedBy,\n  decrementLabel = 'Decrement',\n  incrementLabel = 'Increment',\n}: NumberStepperProps) {\n  const errorId = useId();\n  const adjust = (delta: number) => {\n    let next = value + delta;\n    if (min !== undefined) next = Math.max(min, next);\n    if (max !== undefined) next = Math.min(max, next);\n    onChange(next);\n  };\n\n  return (\n    <>\n      <div\n        className={cn(\n          'uxm-number-stepper',\n          error && 'uxm-number-stepper--error',\n          className,\n        )}\n        style={style}\n        id={id}\n        {...(disabled ? { 'aria-disabled': true as const } : {})}\n        {...(error ? { 'aria-invalid': true as const } : {})}\n        aria-describedby={mergeDescribedBy(describedBy, error ? errorId : undefined)}\n      >\n        <IconButton\n          onClick={() => adjust(-step)}\n          disabled={disabled}\n          aria-label={decrementLabel}\n        >\n          <Icon glyph=\"minus\" size={12} strokeWidth={2} />\n        </IconButton>\n        <input\n          type=\"number\"\n          value={value}\n          onChange={(e) => onChange(Number(e.target.value))}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          className=\"uxm-number-stepper__input\"\n        />\n        <IconButton\n          onClick={() => adjust(step)}\n          disabled={disabled}\n          aria-label={incrementLabel}\n        >\n          <Icon glyph=\"plus\" size={12} strokeWidth={2} />\n        </IconButton>\n        {unit && <span className=\"uxm-number-stepper__unit\">{unit}</span>}\n      </div>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-number-stepper__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\nNumberStepper.hasError = true;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6GI;AA7GJ,mBAAsB;AAEtB,qBAAqC;AAErC,yBAA2B;AAC3B,kBAAqB;AACrB,yBAA2B;AA6EpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GAAuB;AACrB,QAAM,cAAU,oBAAM;AACtB,QAAM,SAAS,CAAC,UAAkB;AAChC,QAAI,OAAO,QAAQ;AACnB,QAAI,QAAQ,OAAW,QAAO,KAAK,IAAI,KAAK,IAAI;AAChD,QAAI,QAAQ,OAAW,QAAO,KAAK,IAAI,KAAK,IAAI;AAChD,aAAS,IAAI;AAAA,EACf;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAI,WAAW,EAAE,iBAAiB,KAAc,IAAI,CAAC;AAAA,QACrD,GAAI,QAAQ,EAAE,gBAAgB,KAAc,IAAI,CAAC;AAAA,QAClD,wBAAkB,iCAAiB,aAAa,QAAQ,UAAU,MAAS;AAAA,QAE3E;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,OAAO,CAAC,IAAI;AAAA,cAC3B;AAAA,cACA,cAAY;AAAA,cAEZ,sDAAC,oBAAK,OAAM,SAAQ,MAAM,IAAI,aAAa,GAAG;AAAA;AAAA,UAChD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL;AAAA,cACA,UAAU,CAAC,MAAM,SAAS,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,cAChD;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,cAAY;AAAA,cACZ,WAAU;AAAA;AAAA,UACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,OAAO,IAAI;AAAA,cAC1B;AAAA,cACA,cAAY;AAAA,cAEZ,sDAAC,oBAAK,OAAM,QAAO,MAAM,IAAI,aAAa,GAAG;AAAA;AAAA,UAC/C;AAAA,UACC,QAAQ,4CAAC,UAAK,WAAU,4BAA4B,gBAAK;AAAA;AAAA;AAAA,IAC5D;AAAA,IACC,SACC,4CAAC,iCAAW,IAAI,SAAS,WAAU,qCAChC,iBACH;AAAA,KAEJ;AAEJ;AACA,cAAc,WAAW;","names":[]}

package/dist/ui/number-stepper/number-stepper.css

@@ -0,0 +1,95 @@
+@charset "UTF-8";
+/* ── NumberStepper ──
+   Numeric input + explicit ± step buttons + optional unit suffix. The
+   browser's native spinner is unconditionally suppressed so the
+   explicit buttons own that affordance.
+
+   State rules target the `__input` sub-element with paired `--state-*`
+   modifier classes on the wrapper alongside the real `:hover` /
+   `:focus-visible` / `:disabled` pseudos. `[aria-disabled]` on the
+   wrapper applies the disabled-opacity to the whole field (the input
+   element's native `disabled` blocks interaction). */
+.uxm-number-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--uxm-number-stepper-gap, 4px);
+  transition: opacity 0.15s;
+}
+
+.uxm-number-stepper[aria-disabled=true] {
+  opacity: var(--uxm-number-stepper-disabled-opacity, 0.6);
+  cursor: not-allowed;
+}
+
+.uxm-number-stepper__input {
+  width: var(--uxm-number-stepper-input-width, 64px);
+  border-radius: var(--uxm-number-stepper-input-radius, 6px);
+  border: 1px solid var(--uxm-number-stepper-input-border, var(--color-border));
+  background-color: var(--uxm-number-stepper-input-bg, var(--color-surface));
+  color: var(--uxm-number-stepper-input-color, var(--color-text-strong));
+  padding: var(--uxm-number-stepper-input-padding-y, 4px) var(--uxm-number-stepper-input-padding-x, 8px);
+  font-size: calc(var(--uxm-number-stepper-font-size, 12px) * var(--type-scale, 1));
+  text-align: center;
+  outline: none;
+  appearance: textfield;
+  -moz-appearance: textfield;
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.uxm-number-stepper__input::-webkit-inner-spin-button,
+.uxm-number-stepper__input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+.uxm-number-stepper--state-hover .uxm-number-stepper__input,
+.uxm-number-stepper:not([aria-disabled=true]) .uxm-number-stepper__input:hover {
+  background-color: var(--uxm-number-stepper-hover-bg, var(--color-surface));
+  border-color: var(--uxm-number-stepper-hover-border, var(--color-accent));
+}
+
+.uxm-number-stepper--state-focus .uxm-number-stepper__input,
+.uxm-number-stepper__input:focus-visible {
+  border-color: var(--uxm-number-stepper-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-number-stepper-focus-ring, var(--color-accent));
+  outline-offset: 1px;
+}
+
+.uxm-number-stepper__input:disabled {
+  background-color: var(--uxm-number-stepper-disabled-bg, var(--color-surface-alt));
+  border-color: var(--uxm-number-stepper-disabled-border, var(--color-border));
+  color: var(--uxm-number-stepper-disabled-color, var(--color-text-muted));
+  cursor: not-allowed;
+}
+
+/* Error — `--error` modifier on the wrapper paints the field's
+   border + bg with the error palette. Step buttons stay unchanged
+   (error is the field's concern, not the affordance's — matches
+   how input-with-icon keeps its icon untouched in error mode). */
+.uxm-number-stepper--error .uxm-number-stepper__input {
+  background-color: var(--uxm-number-stepper-error-bg, var(--color-card));
+  border-color: var(--uxm-number-stepper-error-border, var(--color-danger-text));
+}
+
+.uxm-number-stepper__error-message {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(var(--uxm-number-stepper-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-number-stepper-error-color, var(--color-danger-text));
+}
+
+/* ± step buttons compose `IconButton` — their size, radius, bg, hover
+   and focus treatment all flow from `.uxm-icon-button`'s own rules.
+   No `.uxm-number-stepper__button` ruleset here on purpose: tuning a
+   button-specific knob would silently diverge from IconButton's look
+   elsewhere in the app, which defeats the composition. */
+.uxm-number-stepper__unit {
+  font-size: calc(var(--uxm-number-stepper-unit-size, 11px) * var(--type-scale, 1));
+  color: var(--uxm-number-stepper-unit-color, var(--color-text-subtle));
+  /* Fixed reserved width so the input doesn't shift when the unit
+     text changes ("px" vs "rem" etc.). Layout primitive, not a knob. */
+  width: 20px;
+  text-align: left;
+  flex-shrink: 0;
+}

package/dist/ui/number-stepper/number-stepper.d.ts

@@ -0,0 +1,77 @@
+import type { CSSProperties } from 'react';
+export interface NumberStepperProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Optional unit displayed as a small suffix (e.g. "px"). */
+    unit?: string;
+    /**
+     * Disables the input and both step buttons. `aria-disabled` on the
+     * wrapper drives the dimmed treatment across the whole field (CSS
+     * reads the `disabled-*` vars + applies the disabled-opacity).
+     */
+    disabled?: boolean;
+    /**
+     * When set to a non-empty string, marks the field invalid: adds the
+     * `--error` modifier to the wrapper (which paints the error-state
+     * border + bg via the registry's error knobs), sets `aria-invalid`,
+     * and renders the message below the field. Use for out-of-range
+     * values typed past the buttons' clamp, server-side rejection, or any
+     * custom validation that fails. The ± buttons stay visually unchanged
+     * — error is the field's concern, not the affordance's. Omit (or pass
+     * an empty string) for the normal state.
+     */
+    error?: string;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+    /**
+     * Forwarded to the field wrapper (the inner `<input>` keeps the accessible name). `FormField` injects both — `id` for its
+     * label association, `aria-describedby` for the hint — so wiring these
+     * makes the atom hint-associable; the describedby is merged with the
+     * atom's own error-message id, consumer ids first.
+     */
+    id?: string;
+    'aria-describedby'?: string;
+    /**
+     * Accessible name for the − button. Default `"Decrement"`. The buttons
+     * carry no visible text, so this label is the ONLY thing assistive tech
+     * announces for them — it has to be translatable.
+     */
+    decrementLabel?: string;
+    /** Accessible name for the + button. Default `"Increment"`. */
+    incrementLabel?: string;
+}
+/**
+ * A themable numeric input with explicit `−` / `+` step buttons and an
+ * optional unit suffix. Suppresses the native browser spinner
+ * unconditionally — the explicit buttons own the increment/decrement
+ * affordance.
+ *
+ * The ± buttons compose the `IconButton` atom rather than rendering
+ * bespoke `<button>` elements: visual treatment (bg, hover, active,
+ * focus-ring, radius, size) flows from IconButton's own registry
+ * knobs, so icon buttons look the same everywhere in the app. This
+ * atom owns the semantic wiring — `onClick` handlers do the +/− math
+ * and clamp to min/max; aria-labels identify the operation to AT.
+ * IconButton has zero knowledge of numbers; NumberStepper has zero
+ * knowledge of how a button looks.
+ *
+ * Bare control — no label. The editor's `NumberInput` knob wraps this
+ * to add the label row.
+ *
+ * Sister atoms in the Inputs family:
+ *   - `NumberInput`  — plain typing-only numeric field (no buttons).
+ *                      Use when an unbounded value or a value the user
+ *                      types directly (IDs, raw digits) doesn't benefit
+ *                      from step affordances.
+ *   - `CurrencyInput` — typing + locale formatting + currency picker.
+ *                      Use for monetary values.
+ */
+export declare function NumberStepper({ value, onChange, min, max, step, unit, disabled, error, className, style, 'aria-label': ariaLabel, id, 'aria-describedby': describedBy, decrementLabel, incrementLabel, }: NumberStepperProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NumberStepper {
+    var hasError: boolean;
+}
+//# sourceMappingURL=number-stepper.d.ts.map

package/dist/ui/number-stepper/number-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-stepper.d.ts","sourceRoot":"","sources":["../../../src/ui/number-stepper/number-stepper.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,EACH,IAAQ,EACR,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,EAAE,EACF,kBAAkB,EAAE,WAAW,EAC/B,cAA4B,EAC5B,cAA4B,GAC7B,EAAE,kBAAkB,2CAyDpB;yBAzEe,aAAa"}

package/dist/ui/number-stepper/number-stepper.js

@@ -0,0 +1,89 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn, mergeDescribedBy } from "../../helpers/index.js";
+import { FieldError } from "../field-error/index.js";
+import { Icon } from "../icon/index.js";
+import { IconButton } from "../icon-button/index.js";
+function NumberStepper({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  unit,
+  disabled = false,
+  error,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  id,
+  "aria-describedby": describedBy,
+  decrementLabel = "Decrement",
+  incrementLabel = "Increment"
+}) {
+  const errorId = useId();
+  const adjust = (delta) => {
+    let next = value + delta;
+    if (min !== void 0) next = Math.max(min, next);
+    if (max !== void 0) next = Math.min(max, next);
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "uxm-number-stepper",
+          error && "uxm-number-stepper--error",
+          className
+        ),
+        style,
+        id,
+        ...disabled ? { "aria-disabled": true } : {},
+        ...error ? { "aria-invalid": true } : {},
+        "aria-describedby": mergeDescribedBy(describedBy, error ? errorId : void 0),
+        children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => adjust(-step),
+              disabled,
+              "aria-label": decrementLabel,
+              children: /* @__PURE__ */ jsx(Icon, { glyph: "minus", size: 12, strokeWidth: 2 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              value,
+              onChange: (e) => onChange(Number(e.target.value)),
+              min,
+              max,
+              step,
+              disabled,
+              "aria-label": ariaLabel,
+              className: "uxm-number-stepper__input"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => adjust(step),
+              disabled,
+              "aria-label": incrementLabel,
+              children: /* @__PURE__ */ jsx(Icon, { glyph: "plus", size: 12, strokeWidth: 2 })
+            }
+          ),
+          unit && /* @__PURE__ */ jsx("span", { className: "uxm-number-stepper__unit", children: unit })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FieldError, { id: errorId, className: "uxm-number-stepper__error-message", children: error })
+  ] });
+}
+NumberStepper.hasError = true;
+export {
+  NumberStepper
+};
+//# sourceMappingURL=number-stepper.js.map

package/dist/ui/number-stepper/number-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/number-stepper/number-stepper.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\n\nimport { FieldError } from '../field-error';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\n\nimport type { CSSProperties } from 'react';\n\nexport interface NumberStepperProps {\n  value: number;\n  onChange: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Optional unit displayed as a small suffix (e.g. \"px\"). */\n  unit?: string;\n  /**\n   * Disables the input and both step buttons. `aria-disabled` on the\n   * wrapper drives the dimmed treatment across the whole field (CSS\n   * reads the `disabled-*` vars + applies the disabled-opacity).\n   */\n  disabled?: boolean;\n  /**\n   * When set to a non-empty string, marks the field invalid: adds the\n   * `--error` modifier to the wrapper (which paints the error-state\n   * border + bg via the registry's error knobs), sets `aria-invalid`,\n   * and renders the message below the field. Use for out-of-range\n   * values typed past the buttons' clamp, server-side rejection, or any\n   * custom validation that fails. The ± buttons stay visually unchanged\n   * — error is the field's concern, not the affordance's. Omit (or pass\n   * an empty string) for the normal state.\n   */\n  error?: string;\n  className?: string;\n  style?: CSSProperties;\n  'aria-label'?: string;\n  /**\n   * Forwarded to the field wrapper (the inner `<input>` keeps the accessible name). `FormField` injects both — `id` for its\n   * label association, `aria-describedby` for the hint — so wiring these\n   * makes the atom hint-associable; the describedby is merged with the\n   * atom's own error-message id, consumer ids first.\n   */\n  id?: string;\n  'aria-describedby'?: string;\n\n  /**\n   * Accessible name for the − button. Default `\"Decrement\"`. The buttons\n   * carry no visible text, so this label is the ONLY thing assistive tech\n   * announces for them — it has to be translatable.\n   */\n  decrementLabel?: string;\n  /** Accessible name for the + button. Default `\"Increment\"`. */\n  incrementLabel?: string;\n}\n\n/**\n * A themable numeric input with explicit `−` / `+` step buttons and an\n * optional unit suffix. Suppresses the native browser spinner\n * unconditionally — the explicit buttons own the increment/decrement\n * affordance.\n *\n * The ± buttons compose the `IconButton` atom rather than rendering\n * bespoke `<button>` elements: visual treatment (bg, hover, active,\n * focus-ring, radius, size) flows from IconButton's own registry\n * knobs, so icon buttons look the same everywhere in the app. This\n * atom owns the semantic wiring — `onClick` handlers do the +/− math\n * and clamp to min/max; aria-labels identify the operation to AT.\n * IconButton has zero knowledge of numbers; NumberStepper has zero\n * knowledge of how a button looks.\n *\n * Bare control — no label. The editor's `NumberInput` knob wraps this\n * to add the label row.\n *\n * Sister atoms in the Inputs family:\n *   - `NumberInput`  — plain typing-only numeric field (no buttons).\n *                      Use when an unbounded value or a value the user\n *                      types directly (IDs, raw digits) doesn't benefit\n *                      from step affordances.\n *   - `CurrencyInput` — typing + locale formatting + currency picker.\n *                      Use for monetary values.\n */\nexport function NumberStepper({\n  value,\n  onChange,\n  min,\n  max,\n  step = 1,\n  unit,\n  disabled = false,\n  error,\n  className,\n  style,\n  'aria-label': ariaLabel,\n  id,\n  'aria-describedby': describedBy,\n  decrementLabel = 'Decrement',\n  incrementLabel = 'Increment',\n}: NumberStepperProps) {\n  const errorId = useId();\n  const adjust = (delta: number) => {\n    let next = value + delta;\n    if (min !== undefined) next = Math.max(min, next);\n    if (max !== undefined) next = Math.min(max, next);\n    onChange(next);\n  };\n\n  return (\n    <>\n      <div\n        className={cn(\n          'uxm-number-stepper',\n          error && 'uxm-number-stepper--error',\n          className,\n        )}\n        style={style}\n        id={id}\n        {...(disabled ? { 'aria-disabled': true as const } : {})}\n        {...(error ? { 'aria-invalid': true as const } : {})}\n        aria-describedby={mergeDescribedBy(describedBy, error ? errorId : undefined)}\n      >\n        <IconButton\n          onClick={() => adjust(-step)}\n          disabled={disabled}\n          aria-label={decrementLabel}\n        >\n          <Icon glyph=\"minus\" size={12} strokeWidth={2} />\n        </IconButton>\n        <input\n          type=\"number\"\n          value={value}\n          onChange={(e) => onChange(Number(e.target.value))}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          className=\"uxm-number-stepper__input\"\n        />\n        <IconButton\n          onClick={() => adjust(step)}\n          disabled={disabled}\n          aria-label={incrementLabel}\n        >\n          <Icon glyph=\"plus\" size={12} strokeWidth={2} />\n        </IconButton>\n        {unit && <span className=\"uxm-number-stepper__unit\">{unit}</span>}\n      </div>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-number-stepper__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\nNumberStepper.hasError = true;\n"],"mappings":"AA6GI,mBAkBM,KAjBJ,YADF;AA7GJ,SAAS,aAAa;AAEtB,SAAS,IAAI,wBAAwB;AAErC,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AA6EpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GAAuB;AACrB,QAAM,UAAU,MAAM;AACtB,QAAM,SAAS,CAAC,UAAkB;AAChC,QAAI,OAAO,QAAQ;AACnB,QAAI,QAAQ,OAAW,QAAO,KAAK,IAAI,KAAK,IAAI;AAChD,QAAI,QAAQ,OAAW,QAAO,KAAK,IAAI,KAAK,IAAI;AAChD,aAAS,IAAI;AAAA,EACf;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAI,WAAW,EAAE,iBAAiB,KAAc,IAAI,CAAC;AAAA,QACrD,GAAI,QAAQ,EAAE,gBAAgB,KAAc,IAAI,CAAC;AAAA,QAClD,oBAAkB,iBAAiB,aAAa,QAAQ,UAAU,MAAS;AAAA,QAE3E;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,OAAO,CAAC,IAAI;AAAA,cAC3B;AAAA,cACA,cAAY;AAAA,cAEZ,8BAAC,QAAK,OAAM,SAAQ,MAAM,IAAI,aAAa,GAAG;AAAA;AAAA,UAChD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL;AAAA,cACA,UAAU,CAAC,MAAM,SAAS,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,cAChD;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,cAAY;AAAA,cACZ,WAAU;AAAA;AAAA,UACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,OAAO,IAAI;AAAA,cAC1B;AAAA,cACA,cAAY;AAAA,cAEZ,8BAAC,QAAK,OAAM,QAAO,MAAM,IAAI,aAAa,GAAG;AAAA;AAAA,UAC/C;AAAA,UACC,QAAQ,oBAAC,UAAK,WAAU,4BAA4B,gBAAK;AAAA;AAAA;AAAA,IAC5D;AAAA,IACC,SACC,oBAAC,cAAW,IAAI,SAAS,WAAU,qCAChC,iBACH;AAAA,KAEJ;AAEJ;AACA,cAAc,WAAW;","names":[]}

package/dist/ui/option-list/index.cjs

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var option_list_exports = {};
+__export(option_list_exports, {
+  OptionList: () => import_option_list.OptionList
+});
+module.exports = __toCommonJS(option_list_exports);
+var import_option_list = require("./option-list.cjs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OptionList
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/option-list/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/option-list/index.ts"],"sourcesContent":["export { OptionList } from './option-list';\nexport type { OptionListItem, OptionListProps } from './option-list';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAA2B;","names":[]}

package/dist/ui/option-list/index.d.ts

@@ -0,0 +1,3 @@
+export { OptionList } from './option-list.js';
+export type { OptionListItem, OptionListProps } from './option-list.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/option-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/option-list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/ui/option-list/index.js

@@ -0,0 +1,5 @@
+import { OptionList } from "./option-list.js";
+export {
+  OptionList
+};
+//# sourceMappingURL=index.js.map

package/dist/ui/option-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/option-list/index.ts"],"sourcesContent":["export { OptionList } from './option-list';\nexport type { OptionListItem, OptionListProps } from './option-list';\n"],"mappings":"AAAA,SAAS,kBAAkB;","names":[]}