@viax.io/uxm 4.36.0

package/dist/ui/modal/modal.css

@@ -0,0 +1,89 @@
+@charset "UTF-8";
+/* ── modal ──────────────────────────────────────────────────────────────────
+   Modal (surface — themable through UXM)
+
+   Compound atom: `.uxm-modal` wraps `.uxm-modal__header`, `__body`,
+   `__footer`. Root IS the visible surface (bg / border / radius / shadow
+   live here), but `paddingX` / `paddingY` apply to the header/footer/body
+   rather than the root — so the dividing lines span edge-to-edge.
+
+   Size presets (`--sm / --md / --lg / --fullscreen`) control width. All
+   color/border/radius/padding/font knobs route through `--uxm-modal-*`
+   vars so saves don't outrank the var-based base rule (the live-edit
+   freeze hazard pattern noted across the input family).
+   ──────────────────────────────────────────────────────────────────────── */
+.uxm-modal {
+  /* width: 100% + own border only add up under border-box — without it the
+     border alone pushes ~2px past the size-preset container in a reset-less
+     host (ui.css ships no reset). */
+  box-sizing: border-box;
+  background-color: var(--uxm-modal-background-color, var(--color-card));
+  border: 1px solid var(--uxm-modal-border-color, var(--color-border));
+  border-radius: var(--uxm-modal-border-radius, 12px);
+  /* Shadow comes from the global `--shadow-modal` token — designers tune
+     elevation once at the brand level, not per-modal. */
+  box-shadow: var(--shadow-modal, var(--shadow-2xl));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+}
+.uxm-modal--sm {
+  max-width: 360px;
+}
+.uxm-modal--md {
+  max-width: 480px;
+}
+.uxm-modal--lg {
+  max-width: 640px;
+}
+.uxm-modal--fullscreen {
+  max-width: none;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  border-radius: 0;
+}
+.uxm-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-inline: var(--uxm-modal-padding-x, 20px);
+  padding-block: var(--uxm-modal-padding-y, 16px);
+  /* Header divider reads the SAME borderColor as the outer modal border —
+     one knob controls every chrome line on the modal. */
+  border-bottom: 1px solid var(--uxm-modal-border-color, var(--color-border));
+}
+.uxm-modal__title {
+  margin: 0;
+  font-size: calc(var(--uxm-modal-title-size, 16px) * var(--type-scale, 1));
+  font-weight: 600;
+  color: var(--uxm-modal-title-color, var(--color-text));
+  /* Long titles truncate rather than push the close button off-edge. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
+}
+.uxm-modal__close {
+  flex-shrink: 0;
+}
+.uxm-modal__body {
+  padding-inline: var(--uxm-modal-padding-x, 20px);
+  padding-block: var(--uxm-modal-padding-y, 16px);
+  overflow-y: auto;
+  /* Body grows to fill available height between header + footer. */
+  flex: 1;
+}
+.uxm-modal__footer {
+  display: flex;
+  gap: 8px;
+  padding-inline: var(--uxm-modal-padding-x, 20px);
+  padding-block: var(--uxm-modal-padding-y, 16px);
+  /* Footer divider — same borderColor as the rest of the modal chrome. */
+  border-top: 1px solid var(--uxm-modal-border-color, var(--color-border));
+  /* Right-aligned actions by convention; consumers can override per-row. */
+  justify-content: flex-end;
+}

package/dist/ui/modal/modal.d.ts

@@ -0,0 +1,58 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'fullscreen';
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Sizing preset for the panel width. `fullscreen` lets the panel grow to viewport edges. Default `md`. */
+    size?: ModalSize;
+    /**
+     * Optional close handler — when provided, `Modal.Header` renders an X
+     * icon-button that calls it. Omit for forms that should only close via
+     * an explicit Cancel/Submit action (use `Dialog`'s `closeOnEscape`/
+     * `closeOnOutsideClick` to disable backdrop dismissal in that case).
+     */
+    onClose?: () => void;
+    /**
+     * Accessible name for the close X. Default `"Close"`. Lives on the root
+     * rather than on `Modal.Header` because it belongs with `onClose` — the
+     * prop that decides whether the button exists at all — and travels to the
+     * header through context, so consumers never wire it manually.
+     */
+    closeLabel?: string;
+    children: ReactNode;
+}
+/**
+ * Standard modal panel surface — header / body / footer slots. Renders
+ * inside a `<Dialog>`.
+ *
+ *   <Dialog open={open} onOpenChange={setOpen}>
+ *     <Modal size="md" onClose={() => setOpen(false)}>
+ *       <Modal.Header>Add step</Modal.Header>
+ *       <Modal.Body>…</Modal.Body>
+ *       <Modal.Footer>
+ *         <ButtonTertiary>Cancel</ButtonTertiary>
+ *         <ButtonPrimary>Save</ButtonPrimary>
+ *       </Modal.Footer>
+ *     </Modal>
+ *   </Dialog>
+ *
+ * Compound slots (rather than a `title`/`actions` props pair) let
+ * consumers compose freely — a confirmation skips body, a wizard puts a
+ * stepper in the header, etc.
+ *
+ * The header's title automatically wires its id to `Dialog`'s
+ * `aria-labelledby` via the surrounding Modal context. Consumers don't
+ * touch ids manually.
+ */
+declare function ModalRoot({ size, onClose, closeLabel, children, className, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visible heading. Receives the auto-generated title id. */
+    children: ReactNode;
+    /** Hide the close X even when Modal received `onClose`. */
+    hideClose?: boolean;
+}
+export declare const Modal: typeof ModalRoot & {
+    Header: import("react").ForwardRefExoticComponent<ModalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};
+//# sourceMappingURL=modal.d.ts.map

package/dist/ui/modal/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/ui/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;AAkB1D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/E,2GAA2G;IAC3G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,SAAS,CAAC,EACjB,IAAW,EACX,OAAO,EACP,UAAoB,EACpB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,UAAU,2CAsBZ;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,6DAA6D;IAC7D,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAmCD,eAAO,MAAM,KAAK;;;;CAIhB,CAAC"}

package/dist/ui/modal/modal.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId,
+  useMemo
+} from "react";
+import { cn } from "../../helpers/cn.js";
+import { Icon } from "../icon/index.js";
+import { IconButton } from "../icon-button/index.js";
+const ModalContext = createContext(null);
+function useModalContext() {
+  const ctx = useContext(ModalContext);
+  if (!ctx) {
+    throw new Error("Modal.Header / Modal.Body / Modal.Footer must be used inside <Modal>.");
+  }
+  return ctx;
+}
+function ModalRoot({
+  size = "md",
+  onClose,
+  closeLabel = "Close",
+  children,
+  className,
+  ...rest
+}) {
+  const titleId = useId();
+  const ctx = useMemo(
+    () => ({ titleId, onClose, closeLabel }),
+    [titleId, onClose, closeLabel]
+  );
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("uxm-modal", `uxm-modal--${size}`, className),
+      "aria-labelledby": titleId,
+      ...rest,
+      children
+    }
+  ) });
+}
+const ModalHeader = forwardRef(
+  ({ children, hideClose, className, ...rest }, ref) => {
+    const { titleId, onClose, closeLabel } = useModalContext();
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("uxm-modal__header", className), ...rest, children: [
+      /* @__PURE__ */ jsx("h2", { id: titleId, className: "uxm-modal__title", children }),
+      onClose && !hideClose && /* @__PURE__ */ jsx(IconButton, { "aria-label": closeLabel, onClick: onClose, className: "uxm-modal__close", children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 14, strokeWidth: 2 }) })
+    ] });
+  }
+);
+ModalHeader.displayName = "Modal.Header";
+const ModalBody = forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("uxm-modal__body", className), ...rest })
+);
+ModalBody.displayName = "Modal.Body";
+const ModalFooter = forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("uxm-modal__footer", className), ...rest })
+);
+ModalFooter.displayName = "Modal.Footer";
+const Modal = Object.assign(ModalRoot, {
+  Header: ModalHeader,
+  Body: ModalBody,
+  Footer: ModalFooter
+});
+export {
+  Modal
+};
+//# sourceMappingURL=modal.js.map

package/dist/ui/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/modal/modal.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  useId,\n  useMemo,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\n\nimport { cn } from '../../helpers/cn';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'fullscreen';\n\ninterface ModalContextValue {\n  titleId: string;\n  onClose?: () => void;\n  closeLabel: string;\n}\n\nconst ModalContext = createContext<ModalContextValue | null>(null);\n\nfunction useModalContext(): ModalContextValue {\n  const ctx = useContext(ModalContext);\n  if (!ctx) {\n    throw new Error('Modal.Header / Modal.Body / Modal.Footer must be used inside <Modal>.');\n  }\n  return ctx;\n}\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Sizing preset for the panel width. `fullscreen` lets the panel grow to viewport edges. Default `md`. */\n  size?: ModalSize;\n  /**\n   * Optional close handler — when provided, `Modal.Header` renders an X\n   * icon-button that calls it. Omit for forms that should only close via\n   * an explicit Cancel/Submit action (use `Dialog`'s `closeOnEscape`/\n   * `closeOnOutsideClick` to disable backdrop dismissal in that case).\n   */\n  onClose?: () => void;\n  /**\n   * Accessible name for the close X. Default `\"Close\"`. Lives on the root\n   * rather than on `Modal.Header` because it belongs with `onClose` — the\n   * prop that decides whether the button exists at all — and travels to the\n   * header through context, so consumers never wire it manually.\n   */\n  closeLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * Standard modal panel surface — header / body / footer slots. Renders\n * inside a `<Dialog>`.\n *\n *   <Dialog open={open} onOpenChange={setOpen}>\n *     <Modal size=\"md\" onClose={() => setOpen(false)}>\n *       <Modal.Header>Add step</Modal.Header>\n *       <Modal.Body>…</Modal.Body>\n *       <Modal.Footer>\n *         <ButtonTertiary>Cancel</ButtonTertiary>\n *         <ButtonPrimary>Save</ButtonPrimary>\n *       </Modal.Footer>\n *     </Modal>\n *   </Dialog>\n *\n * Compound slots (rather than a `title`/`actions` props pair) let\n * consumers compose freely — a confirmation skips body, a wizard puts a\n * stepper in the header, etc.\n *\n * The header's title automatically wires its id to `Dialog`'s\n * `aria-labelledby` via the surrounding Modal context. Consumers don't\n * touch ids manually.\n */\nfunction ModalRoot({\n  size = 'md',\n  onClose,\n  closeLabel = 'Close',\n  children,\n  className,\n  ...rest\n}: ModalProps) {\n  const titleId = useId();\n  const ctx = useMemo(\n    () => ({ titleId, onClose, closeLabel }),\n    [titleId, onClose, closeLabel],\n  );\n  return (\n    <ModalContext.Provider value={ctx}>\n      <div\n        className={cn('uxm-modal', `uxm-modal--${size}`, className)}\n        // Forward titleId to Dialog via aria-labelledby propagation: the\n        // Dialog panel reads aria-labelledby on itself, so the consumer\n        // typically passes `aria-labelledby` to Dialog. We expose it\n        // here on the Modal wrapper too for cases where a consumer uses\n        // Modal without Dialog (rare; styling-only previews).\n        aria-labelledby={titleId}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ModalContext.Provider>\n  );\n}\n\nexport interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Visible heading. Receives the auto-generated title id. */\n  children: ReactNode;\n  /** Hide the close X even when Modal received `onClose`. */\n  hideClose?: boolean;\n}\n\nconst ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(\n  ({ children, hideClose, className, ...rest }, ref) => {\n    const { titleId, onClose, closeLabel } = useModalContext();\n    return (\n      <div ref={ref} className={cn('uxm-modal__header', className)} {...rest}>\n        <h2 id={titleId} className=\"uxm-modal__title\">\n          {children}\n        </h2>\n        {onClose && !hideClose && (\n          <IconButton aria-label={closeLabel} onClick={onClose} className=\"uxm-modal__close\">\n            <Icon glyph=\"close\" size={14} strokeWidth={2} />\n          </IconButton>\n        )}\n      </div>\n    );\n  },\n);\nModalHeader.displayName = 'Modal.Header';\n\nconst ModalBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={cn('uxm-modal__body', className)} {...rest} />\n  ),\n);\nModalBody.displayName = 'Modal.Body';\n\nconst ModalFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={cn('uxm-modal__footer', className)} {...rest} />\n  ),\n);\nModalFooter.displayName = 'Modal.Footer';\n\nexport const Modal = Object.assign(ModalRoot, {\n  Header: ModalHeader,\n  Body: ModalBody,\n  Footer: ModalFooter,\n});\n"],"mappings":"AA0FM,cA2BA,YA3BA;AA1FN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAU3B,MAAM,eAAe,cAAwC,IAAI;AAEjE,SAAS,kBAAqC;AAC5C,QAAM,MAAM,WAAW,YAAY;AACnC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,uEAAuE;AAAA,EACzF;AACA,SAAO;AACT;AA6CA,SAAS,UAAU;AAAA,EACjB,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,UAAU,MAAM;AACtB,QAAM,MAAM;AAAA,IACV,OAAO,EAAE,SAAS,SAAS,WAAW;AAAA,IACtC,CAAC,SAAS,SAAS,UAAU;AAAA,EAC/B;AACA,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,KAC5B;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,aAAa,cAAc,IAAI,IAAI,SAAS;AAAA,MAM1D,mBAAiB;AAAA,MAChB,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AASA,MAAM,cAAc;AAAA,EAClB,CAAC,EAAE,UAAU,WAAW,WAAW,GAAG,KAAK,GAAG,QAAQ;AACpD,UAAM,EAAE,SAAS,SAAS,WAAW,IAAI,gBAAgB;AACzD,WACE,qBAAC,SAAI,KAAU,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,MAChE;AAAA,0BAAC,QAAG,IAAI,SAAS,WAAU,oBACxB,UACH;AAAA,MACC,WAAW,CAAC,aACX,oBAAC,cAAW,cAAY,YAAY,SAAS,SAAS,WAAU,oBAC9D,8BAAC,QAAK,OAAM,SAAQ,MAAM,IAAI,aAAa,GAAG,GAChD;AAAA,OAEJ;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAE1B,MAAM,YAAY;AAAA,EAChB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QACvB,oBAAC,SAAI,KAAU,WAAW,GAAG,mBAAmB,SAAS,GAAI,GAAG,MAAM;AAE1E;AACA,UAAU,cAAc;AAExB,MAAM,cAAc;AAAA,EAClB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QACvB,oBAAC,SAAI,KAAU,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,MAAM;AAE5E;AACA,YAAY,cAAc;AAEnB,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;","names":[]}

package/dist/ui/number-input/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var number_input_exports = {};
+module.exports = __toCommonJS(number_input_exports);
+__reExport(number_input_exports, require("./number-input.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./number-input.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/number-input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/number-input/index.ts"],"sourcesContent":["export * from './number-input';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,iCAAc,2BAAd;","names":[]}

package/dist/ui/number-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './number-input.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/number-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/number-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/ui/number-input/index.js

@@ -0,0 +1,2 @@
+export * from "./number-input.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/number-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/number-input/index.ts"],"sourcesContent":["export * from './number-input';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/number-input/number-input-preview.cjs

@@ -0,0 +1,96 @@
+"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_input_preview_exports = {};
+__export(number_input_preview_exports, {
+  NumberInputPreview: () => NumberInputPreview
+});
+module.exports = __toCommonJS(number_input_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+function buildVars(styles) {
+  return {
+    "--uxm-number-input-bg": styles.backgroundColor,
+    "--uxm-number-input-border-color": styles.borderColor,
+    "--uxm-number-input-color": styles.color,
+    "--uxm-number-input-border-radius": `${styles.borderRadius}px`,
+    "--uxm-number-input-padding-x": `${styles.paddingX}px`,
+    "--uxm-number-input-padding-y": `${styles.paddingY}px`,
+    "--uxm-number-input-font-size": `${styles.fontSize}px`,
+    "--uxm-number-input-hover-bg": styles.hoverBg,
+    "--uxm-number-input-hover-border": styles.hoverBorder,
+    "--uxm-number-input-focus-border": styles.focusBorder,
+    "--uxm-number-input-focus-ring": styles.focusRing,
+    "--uxm-number-input-disabled-bg": styles.disabledBg,
+    "--uxm-number-input-disabled-border": styles.disabledBorder,
+    "--uxm-number-input-disabled-color": styles.disabledColor,
+    "--uxm-number-input-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-number-input-error-bg": styles.errorBg,
+    "--uxm-number-input-error-border": styles.errorBorder,
+    "--uxm-number-input-error-color": styles.errorColor,
+    "--uxm-number-input-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0,
+    "--uxm-number-input-text-align": styles.textAlign
+  };
+}
+function NumberInputPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberInputDemo, { state, styles }, state);
+}
+function NumberInputDemo({ state, styles }) {
+  const isError = state === "error";
+  const [value, setValue] = (0, import_react.useState)(isError ? "-5" : "");
+  const cssVars = buildVars(styles);
+  const forcedClass = (0, import_helpers.cn)(
+    state === "hover" && "uxm-number-input--state-hover",
+    state === "focus" && "uxm-number-input--state-focus",
+    state === "error" && "uxm-number-input--error"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { width: 240, ...cssVars }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.NumberInput,
+      {
+        allowNegative: true,
+        allowDecimal: true,
+        decimals: 2,
+        value,
+        onChange: setValue,
+        disabled: state === "disabled",
+        className: forcedClass || void 0,
+        placeholder: "0"
+      }
+    ),
+    isError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "p",
+      {
+        style: {
+          fontSize: "var(--uxm-number-input-error-message-size, 12px)",
+          color: "var(--uxm-number-input-error-color, var(--color-danger-text))",
+          marginTop: 4
+        },
+        children: "Enter a positive number."
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NumberInputPreview
+});
+//# sourceMappingURL=number-input-preview.cjs.map

package/dist/ui/number-input/number-input-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/number-input/number-input-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { NumberInput } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every state knob onto the input as a `--uxm-number-input-*`\n * custom prop. The single `<NumberInput>` below reads them through\n * styles.css's `:hover` / `:focus` / `:disabled` / `--error` rules,\n * so live edits paint immediately and real pointer / keyboard\n * interaction exercises the same production CSS that ships to\n * consumers.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-number-input-bg': styles.backgroundColor as string,\n    '--uxm-number-input-border-color': styles.borderColor as string,\n    '--uxm-number-input-color': styles.color as string,\n    '--uxm-number-input-border-radius': `${styles.borderRadius}px`,\n    '--uxm-number-input-padding-x': `${styles.paddingX}px`,\n    '--uxm-number-input-padding-y': `${styles.paddingY}px`,\n    '--uxm-number-input-font-size': `${styles.fontSize}px`,\n    '--uxm-number-input-hover-bg': styles.hoverBg as string,\n    '--uxm-number-input-hover-border': styles.hoverBorder as string,\n    '--uxm-number-input-focus-border': styles.focusBorder as string,\n    '--uxm-number-input-focus-ring': styles.focusRing as string,\n    '--uxm-number-input-disabled-bg': styles.disabledBg as string,\n    '--uxm-number-input-disabled-border': styles.disabledBorder as string,\n    '--uxm-number-input-disabled-color': styles.disabledColor as string,\n    '--uxm-number-input-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-number-input-error-bg': styles.errorBg as string,\n    '--uxm-number-input-error-border': styles.errorBorder as string,\n    '--uxm-number-input-error-color': styles.errorColor as string,\n    '--uxm-number-input-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n    '--uxm-number-input-text-align': styles.textAlign as string,\n  } as CSSProperties;\n}\n\nexport function NumberInputPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  return <NumberInputDemo 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 NumberInputDemo({ state, styles }: { state: string; styles: Styles }) {\n  const isError = state === 'error';\n\n  // Default state stays empty so the placeholder shows. Error mode\n  // pre-fills a value that would fail a hypothetical \"positive\" rule.\n  const [value, setValue] = useState(isError ? '-5' : '');\n\n  const cssVars = buildVars(styles);\n\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-number-input--state-hover',\n    state === 'focus' && 'uxm-number-input--state-focus',\n    state === 'error' && 'uxm-number-input--error',\n  );\n\n  return (\n    <div style={{ width: 240, ...cssVars } as CSSProperties}>\n      <NumberInput\n        allowNegative\n        allowDecimal\n        decimals={2}\n        value={value}\n        onChange={setValue}\n        disabled={state === 'disabled'}\n        className={forcedClass || undefined}\n        placeholder=\"0\"\n      />\n      {isError && (\n        <p\n          style={{\n            fontSize: 'var(--uxm-number-input-error-message-size, 12px)',\n            color: 'var(--uxm-number-input-error-color, var(--color-danger-text))',\n            marginTop: 4,\n          }}\n        >\n          Enter a positive number.\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6CS;AA7CT,mBAA6C;AAE7C,qBAAmB;AAEnB,gBAA4B;AAY5B,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,yBAAyB,OAAO;AAAA,IAChC,mCAAmC,OAAO;AAAA,IAC1C,4BAA4B,OAAO;AAAA,IACnC,oCAAoC,GAAG,OAAO,YAAY;AAAA,IAC1D,gCAAgC,GAAG,OAAO,QAAQ;AAAA,IAClD,gCAAgC,GAAG,OAAO,QAAQ;AAAA,IAClD,gCAAgC,GAAG,OAAO,QAAQ;AAAA,IAClD,+BAA+B,OAAO;AAAA,IACtC,mCAAmC,OAAO;AAAA,IAC1C,mCAAmC,OAAO;AAAA,IAC1C,iCAAiC,OAAO;AAAA,IACxC,kCAAkC,OAAO;AAAA,IACzC,sCAAsC,OAAO;AAAA,IAC7C,qCAAqC,OAAO;AAAA,IAC5C,uCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,+BAA+B,OAAO;AAAA,IACtC,mCAAmC,OAAO;AAAA,IAC1C,kCAAkC,OAAO;AAAA,IACzC,yCACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,IACrE,iCAAiC,OAAO;AAAA,EAC1C;AACF;AAEO,SAAS,mBAAmB,EAAE,QAAQ,SAAS,GAAiB;AACrE,QAAM,QAAS,SAAS,SAAoB;AAC5C,SAAO,4CAAC,mBAA4B,OAAc,UAArB,KAAqC;AACpE;AAIA,SAAS,gBAAgB,EAAE,OAAO,OAAO,GAAsC;AAC7E,QAAM,UAAU,UAAU;AAI1B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,UAAU,OAAO,EAAE;AAEtD,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,kBAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,SACE,6CAAC,SAAI,OAAO,EAAE,OAAO,KAAK,GAAG,QAAQ,GACnC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,UAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,UAAU,UAAU;AAAA,QACpB,WAAW,eAAe;AAAA,QAC1B,aAAY;AAAA;AAAA,IACd;AAAA,IACC,WACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,WAAW;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/ui/number-input/number-input-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function NumberInputPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=number-input-preview.d.ts.map

package/dist/ui/number-input/number-input-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/number-input/number-input-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAwCrD,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAGpE"}

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

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { NumberInput } from "../../ui/index.js";
+function buildVars(styles) {
+  return {
+    "--uxm-number-input-bg": styles.backgroundColor,
+    "--uxm-number-input-border-color": styles.borderColor,
+    "--uxm-number-input-color": styles.color,
+    "--uxm-number-input-border-radius": `${styles.borderRadius}px`,
+    "--uxm-number-input-padding-x": `${styles.paddingX}px`,
+    "--uxm-number-input-padding-y": `${styles.paddingY}px`,
+    "--uxm-number-input-font-size": `${styles.fontSize}px`,
+    "--uxm-number-input-hover-bg": styles.hoverBg,
+    "--uxm-number-input-hover-border": styles.hoverBorder,
+    "--uxm-number-input-focus-border": styles.focusBorder,
+    "--uxm-number-input-focus-ring": styles.focusRing,
+    "--uxm-number-input-disabled-bg": styles.disabledBg,
+    "--uxm-number-input-disabled-border": styles.disabledBorder,
+    "--uxm-number-input-disabled-color": styles.disabledColor,
+    "--uxm-number-input-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-number-input-error-bg": styles.errorBg,
+    "--uxm-number-input-error-border": styles.errorBorder,
+    "--uxm-number-input-error-color": styles.errorColor,
+    "--uxm-number-input-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0,
+    "--uxm-number-input-text-align": styles.textAlign
+  };
+}
+function NumberInputPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ jsx(NumberInputDemo, { state, styles }, state);
+}
+function NumberInputDemo({ state, styles }) {
+  const isError = state === "error";
+  const [value, setValue] = useState(isError ? "-5" : "");
+  const cssVars = buildVars(styles);
+  const forcedClass = cn(
+    state === "hover" && "uxm-number-input--state-hover",
+    state === "focus" && "uxm-number-input--state-focus",
+    state === "error" && "uxm-number-input--error"
+  );
+  return /* @__PURE__ */ jsxs("div", { style: { width: 240, ...cssVars }, children: [
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        allowNegative: true,
+        allowDecimal: true,
+        decimals: 2,
+        value,
+        onChange: setValue,
+        disabled: state === "disabled",
+        className: forcedClass || void 0,
+        placeholder: "0"
+      }
+    ),
+    isError && /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          fontSize: "var(--uxm-number-input-error-message-size, 12px)",
+          color: "var(--uxm-number-input-error-color, var(--color-danger-text))",
+          marginTop: 4
+        },
+        children: "Enter a positive number."
+      }
+    )
+  ] });
+}
+export {
+  NumberInputPreview
+};
+//# sourceMappingURL=number-input-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/number-input/number-input-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { NumberInput } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every state knob onto the input as a `--uxm-number-input-*`\n * custom prop. The single `<NumberInput>` below reads them through\n * styles.css's `:hover` / `:focus` / `:disabled` / `--error` rules,\n * so live edits paint immediately and real pointer / keyboard\n * interaction exercises the same production CSS that ships to\n * consumers.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-number-input-bg': styles.backgroundColor as string,\n    '--uxm-number-input-border-color': styles.borderColor as string,\n    '--uxm-number-input-color': styles.color as string,\n    '--uxm-number-input-border-radius': `${styles.borderRadius}px`,\n    '--uxm-number-input-padding-x': `${styles.paddingX}px`,\n    '--uxm-number-input-padding-y': `${styles.paddingY}px`,\n    '--uxm-number-input-font-size': `${styles.fontSize}px`,\n    '--uxm-number-input-hover-bg': styles.hoverBg as string,\n    '--uxm-number-input-hover-border': styles.hoverBorder as string,\n    '--uxm-number-input-focus-border': styles.focusBorder as string,\n    '--uxm-number-input-focus-ring': styles.focusRing as string,\n    '--uxm-number-input-disabled-bg': styles.disabledBg as string,\n    '--uxm-number-input-disabled-border': styles.disabledBorder as string,\n    '--uxm-number-input-disabled-color': styles.disabledColor as string,\n    '--uxm-number-input-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-number-input-error-bg': styles.errorBg as string,\n    '--uxm-number-input-error-border': styles.errorBorder as string,\n    '--uxm-number-input-error-color': styles.errorColor as string,\n    '--uxm-number-input-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n    '--uxm-number-input-text-align': styles.textAlign as string,\n  } as CSSProperties;\n}\n\nexport function NumberInputPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  return <NumberInputDemo 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 NumberInputDemo({ state, styles }: { state: string; styles: Styles }) {\n  const isError = state === 'error';\n\n  // Default state stays empty so the placeholder shows. Error mode\n  // pre-fills a value that would fail a hypothetical \"positive\" rule.\n  const [value, setValue] = useState(isError ? '-5' : '');\n\n  const cssVars = buildVars(styles);\n\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-number-input--state-hover',\n    state === 'focus' && 'uxm-number-input--state-focus',\n    state === 'error' && 'uxm-number-input--error',\n  );\n\n  return (\n    <div style={{ width: 240, ...cssVars } as CSSProperties}>\n      <NumberInput\n        allowNegative\n        allowDecimal\n        decimals={2}\n        value={value}\n        onChange={setValue}\n        disabled={state === 'disabled'}\n        className={forcedClass || undefined}\n        placeholder=\"0\"\n      />\n      {isError && (\n        <p\n          style={{\n            fontSize: 'var(--uxm-number-input-error-message-size, 12px)',\n            color: 'var(--uxm-number-input-error-color, var(--color-danger-text))',\n            marginTop: 4,\n          }}\n        >\n          Enter a positive number.\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA6CS,cAqBL,YArBK;AA7CT,SAAS,gBAAoC;AAE7C,SAAS,UAAU;AAEnB,SAAS,mBAAmB;AAY5B,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,yBAAyB,OAAO;AAAA,IAChC,mCAAmC,OAAO;AAAA,IAC1C,4BAA4B,OAAO;AAAA,IACnC,oCAAoC,GAAG,OAAO,YAAY;AAAA,IAC1D,gCAAgC,GAAG,OAAO,QAAQ;AAAA,IAClD,gCAAgC,GAAG,OAAO,QAAQ;AAAA,IAClD,gCAAgC,GAAG,OAAO,QAAQ;AAAA,IAClD,+BAA+B,OAAO;AAAA,IACtC,mCAAmC,OAAO;AAAA,IAC1C,mCAAmC,OAAO;AAAA,IAC1C,iCAAiC,OAAO;AAAA,IACxC,kCAAkC,OAAO;AAAA,IACzC,sCAAsC,OAAO;AAAA,IAC7C,qCAAqC,OAAO;AAAA,IAC5C,uCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,+BAA+B,OAAO;AAAA,IACtC,mCAAmC,OAAO;AAAA,IAC1C,kCAAkC,OAAO;AAAA,IACzC,yCACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,IACrE,iCAAiC,OAAO;AAAA,EAC1C;AACF;AAEO,SAAS,mBAAmB,EAAE,QAAQ,SAAS,GAAiB;AACrE,QAAM,QAAS,SAAS,SAAoB;AAC5C,SAAO,oBAAC,mBAA4B,OAAc,UAArB,KAAqC;AACpE;AAIA,SAAS,gBAAgB,EAAE,OAAO,OAAO,GAAsC;AAC7E,QAAM,UAAU,UAAU;AAI1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,UAAU,OAAO,EAAE;AAEtD,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,cAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,OAAO,KAAK,GAAG,QAAQ,GACnC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,UAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,UAAU,UAAU;AAAA,QACpB,WAAW,eAAe;AAAA,QAC1B,aAAY;AAAA;AAAA,IACd;AAAA,IACC,WACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,WAAW;AAAA,QACb;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,162 @@
+"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_input_exports = {};
+__export(number_input_exports, {
+  NumberInput: () => NumberInput,
+  maskNumeric: () => maskNumeric
+});
+module.exports = __toCommonJS(number_input_exports);
+var import_jsx_runtime = (
+  // `{...rest}` is spread FIRST so the managed props below always win
+  // (same rule as TextInput) — a consumer prop can't clobber the mask's
+  // value/onChange or the computed error state.
+  require("react/jsx-runtime")
+);
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_field_error = require("../../ui/field-error/index.cjs");
+var import_icon = require("../../ui/icon/index.cjs");
+var import_icon_button = require("../../ui/icon-button/index.cjs");
+function maskNumeric(raw, allowNegative, allowDecimal, decimals) {
+  if (raw === "") return "";
+  let negative = false;
+  let body = raw;
+  if (allowNegative && body.startsWith("-")) {
+    negative = true;
+    body = body.slice(1);
+  }
+  body = body.replace(/[^\d.]/g, "");
+  if (!allowDecimal) {
+    body = body.replace(/\./g, "");
+  } else {
+    const firstDot = body.indexOf(".");
+    if (firstDot !== -1) {
+      body = body.slice(0, firstDot + 1) + body.slice(firstDot + 1).replace(/\./g, "");
+      const [intPart, decPart = ""] = body.split(".");
+      body = intPart + "." + decPart.slice(0, decimals);
+    }
+  }
+  return negative ? "-" + body : body;
+}
+function clampNumeric(value, min, max) {
+  if (value === "" || value === "-" || value === ".") return value;
+  const n = Number(value);
+  if (!Number.isFinite(n)) return value;
+  let clamped = n;
+  if (min !== void 0 && clamped < min) clamped = min;
+  if (max !== void 0 && clamped > max) clamped = max;
+  if (clamped === n) return value;
+  return String(clamped);
+}
+function NumberInput({
+  value,
+  defaultValue,
+  onChange,
+  min,
+  max,
+  allowNegative = false,
+  allowDecimal = false,
+  decimals = 2,
+  clearable = true,
+  clearLabel = "Clear",
+  className,
+  error,
+  disabled,
+  onBlur,
+  ...rest
+}) {
+  const errorId = (0, import_react.useId)();
+  const [internal, setInternal] = (0, import_react.useState)(
+    () => maskNumeric(defaultValue ?? "", allowNegative, allowDecimal, decimals)
+  );
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const handleChange = (0, import_react.useCallback)(
+    (e) => {
+      const next = maskNumeric(e.target.value, allowNegative, allowDecimal, decimals);
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [allowNegative, allowDecimal, decimals, isControlled, onChange]
+  );
+  const handleBlur = (0, import_react.useCallback)(
+    (e) => {
+      const clamped = clampNumeric(current ?? "", min, max);
+      if (clamped !== current) {
+        if (!isControlled) setInternal(clamped);
+        onChange?.(clamped);
+      }
+      onBlur?.(e);
+    },
+    [current, min, max, isControlled, onChange, onBlur]
+  );
+  const handleClear = (0, import_react.useCallback)(() => {
+    if (!isControlled) setInternal("");
+    onChange?.("");
+  }, [isControlled, onChange]);
+  const showClear = clearable && !!current && !disabled;
+  const input = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      ...rest,
+      type: "text",
+      inputMode: allowDecimal ? "decimal" : "numeric",
+      autoComplete: "off",
+      className: (0, import_helpers.cn)(
+        "uxm-number-input",
+        error && "uxm-number-input--error",
+        clearable && "uxm-number-input--clearable",
+        className
+      ),
+      "aria-invalid": error ? true : void 0,
+      "aria-describedby": (0, import_helpers.mergeDescribedBy)(rest["aria-describedby"], error ? errorId : void 0),
+      value: current,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      disabled
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    clearable ? (
+      // Layout-only wrapper so the clear button sits at the trailing edge;
+      // visible chrome stays on `.uxm-number-input` so saved --uxm vars apply.
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-number-input-wrap", children: [
+        input,
+        showClear && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_icon_button.IconButton,
+          {
+            className: "uxm-field-clear uxm-number-input__clear",
+            "aria-label": clearLabel,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: handleClear,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "close" })
+          }
+        )
+      ] })
+    ) : input,
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { id: errorId, className: "uxm-number-input__error-message", children: error })
+  ] });
+}
+NumberInput.hasError = true;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NumberInput,
+  maskNumeric
+});
+//# sourceMappingURL=number-input.cjs.map