@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/dist/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Modal","forwardRef","rest","panelRef","useRef","onCloseRef","onClose","titleId","useId","descriptionId","useEffect","isOpen","previous","onKeyDown","event","focusable","first","last","overflow","createPortal","node","ref","description","size","className","title","Button","footer"],"sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Button } from \"../Button\";\nimport \"./style.css\";\n\nexport type ModalSize = \"dialog\" | \"md\" | \"wide\";\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  isOpen: boolean;\n  /** Escape, the scrim and the close button all call this. */\n  onClose: () => void;\n  title: string;\n  description?: string;\n  size?: ModalSize;\n  /** Actions, right-aligned. The confirming action goes last. */\n  footer?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * A focused task on top of the page. Heavy frame, hairline rules, a quiet\n * footer band — the collection frame, floated. Focus is trapped while open.\n */\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\n  { isOpen, onClose, title, description, size = \"md\", footer, className, children, ...rest },\n  ref,\n) {\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const onCloseRef = useRef(onClose);\n  const titleId = useId();\n  const descriptionId = useId();\n\n  useEffect(() => {\n    onCloseRef.current = onClose;\n  }, [onClose]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const previous = document.activeElement as HTMLElement | null;\n    const initialFocus = panelRef.current?.querySelector<HTMLElement>(\n      \"button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\",\n    );\n    (initialFocus ?? panelRef.current)?.focus();\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onCloseRef.current();\n        return;\n      }\n      if (event.key !== \"Tab\") return;\n      const focusable = Array.from(\n        panelRef.current?.querySelectorAll<HTMLElement>(\n          \"button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\",\n        ) ?? [],\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0]!;\n      const last = focusable[focusable.length - 1]!;\n      if (event.shiftKey && document.activeElement === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && document.activeElement === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    const overflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.body.style.overflow = overflow;\n      previous?.focus();\n    };\n  }, [isOpen]);\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  return createPortal(\n    <div className=\"ds-scrim\" onMouseDown={(event) => event.target === event.currentTarget && onCloseRef.current()}>\n      <div\n        {...rest}\n        ref={(node) => {\n          panelRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={description ? descriptionId : undefined}\n        tabIndex={-1}\n        data-size={size}\n        className={[\"ds-modal\", className].filter(Boolean).join(\" \")}\n      >\n        <header className=\"ds-modal__head\">\n          <div className=\"ds-modal__titles\">\n            <h2 id={titleId} className=\"ds-modal__title\">\n              {title}\n            </h2>\n            {description && (\n              <p id={descriptionId} className=\"ds-modal__description\">\n                {description}\n              </p>\n            )}\n          </div>\n          <Button\n            variant=\"simple\"\n            size=\"sm\"\n            isIconOnly\n            iconStart=\"x\"\n            aria-label=\"Close\"\n            className=\"ds-modal__close\"\n            onClick={() => onCloseRef.current()}\n          />\n        </header>\n        <div className=\"ds-modal__body\">{children}</div>\n        {footer && <footer className=\"ds-modal__footer\">{footer}</footer>}\n      </div>\n    </div>,\n    document.body,\n  );\n});\n"],"mappings":";;;;;AAuBA,IAAaA,IAAQC,EAAuC,SAC1D,EAAE,WAAQ,YAAS,UAAO,gBAAa,UAAO,MAAM,WAAQ,cAAW,aAAU,GAAGC,KACpF,GACA;CACA,IAAMC,IAAWC,EAA8B,IAAI,GAC7CC,IAAaD,EAAOE,CAAO,GAC3BC,IAAUC,EAAM,GAChBC,IAAgBD,EAAM;CAmD5B,OAjDAE,QAAgB;EACd,EAAW,UAAUJ;CACvB,GAAG,CAACA,CAAO,CAAC,GAEZI,QAAgB;EACd,IAAI,CAACC,GAAQ;EAEb,IAAMC,IAAW,SAAS;EAI1B,CAHqBT,EAAS,SAAS,cACrC,sIACF,KACiBA,EAAS,QAAA,EAAU,MAAM;EAE1C,IAAMU,KAAa,MAAyB;GAC1C,IAAIC,EAAM,QAAQ,UAAU;IAC1B,EAAW,QAAQ;IACnB;GACF;GACA,IAAIA,EAAM,QAAQ,OAAO;GACzB,IAAMC,IAAY,MAAM,KACtBZ,EAAS,SAAS,iBAChB,sIACF,KAAK,CAAC,CACR;GACA,IAAIY,EAAU,WAAW,GAAG;GAC5B,IAAMC,IAAQD,EAAU,IAClBE,IAAOF,EAAUA,EAAU,SAAS;GAC1C,AAAID,EAAM,YAAY,SAAS,kBAAkBE,KAC/CF,EAAM,eAAe,GACrBG,EAAK,MAAM,KACF,CAACH,EAAM,YAAY,SAAS,kBAAkBG,MACvDH,EAAM,eAAe,GACrBE,EAAM,MAAM;EAEhB;EAEA,SAAS,iBAAiB,WAAWH,CAAS;EAC9C,IAAMK,IAAW,SAAS,KAAK,MAAM;EAGrC,OAFA,SAAS,KAAK,MAAM,WAAW,gBAElB;GAGX,AAFA,SAAS,oBAAoB,WAAWL,CAAS,GACjD,SAAS,KAAK,MAAM,WAAWK,GAC/BN,GAAU,MAAM;EAClB;CACF,GAAG,CAACD,CAAM,CAAC,GAEP,CAACA,KAAU,OAAO,WAAa,MAAoB,OAEhDQ,EACL,kBAAC,OAAD;EAAK,WAAU;EAAW,cAAc,MAAUL,EAAM,WAAWA,EAAM,iBAAiBT,EAAW,QAAQ;EAC3G,UAAA,kBAAC,OAAD;GACE,GAAIH;GACJ,MAAM,MAAS;IAEb,AADA,EAAS,UAAUkB,GACf,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;GAC9B;GACA,MAAK;GACL,cAAW;GACX,mBAAiBb;GACjB,oBAAkBe,IAAcb,IAAgB,KAAA;GAChD,UAAU;GACV,aAAWc;GACX,WAAW,CAAC,YAAYC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAb7D,UAAA;IAeE,kBAAC,UAAD;KAAQ,WAAU;KAAlB,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,MAAD;OAAI,IAAIjB;OAAS,WAAU;OACxB,UAAAkB;MACC,CAAA,GACHH,KACC,kBAAC,KAAD;OAAG,IAAIb;OAAe,WAAU;OAC7B,UAAAa;MACA,CAAA,CAEF;KACL,CAAA,GAAA,kBAACI,GAAD;MACE,SAAQ;MACR,MAAK;MACL,YAAA;MACA,WAAU;MACV,cAAW;MACX,WAAU;MACV,eAAerB,EAAW,QAAQ;KACnC,CAAA,CACK;;IACR,kBAAC,OAAD;KAAK,WAAU;KAAkB;IAAc,CAAA;IAC9CsB,KAAU,kBAAC,UAAD;KAAQ,WAAU;KAAoB,UAAAA;IAAe,CAAA;GAC7D;;CACF,CAAA,GACL,SAAS,IACX;AACF,CAAC"}

package/dist/components/Modal/style.css

@@ -0,0 +1,106 @@
+@layer components {
+  .ds-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-6);
+    background: var(--scrim);
+    animation: ds-scrim-in var(--duration-base) var(--ease-standard);
+  }
+
+  .ds-modal {
+    --field-bg: var(--color-surface);
+
+    inline-size: 100%;
+    max-block-size: calc(100dvh - var(--space-12));
+    display: flex;
+    flex-direction: column;
+    background: var(--color-surface);
+    border: var(--frame-width) solid var(--frame-color);
+    border-radius: var(--overlay-radius);
+    box-shadow: var(--shadow-lg);
+    animation: ds-modal-in var(--duration-panel) var(--ease-panel);
+  }
+
+  .ds-modal[data-size="dialog"] {
+    max-inline-size: var(--dialog-width);
+  }
+
+  .ds-modal[data-size="md"] {
+    max-inline-size: var(--modal-width);
+  }
+
+  .ds-modal[data-size="wide"] {
+    max-inline-size: var(--modal-width-wide);
+  }
+
+  .ds-modal__head {
+    display: flex;
+    align-items: start;
+    gap: var(--space-4);
+    padding: var(--space-5) var(--space-6);
+    border-block-end: var(--rule-width) solid var(--rule-color);
+  }
+
+  .ds-modal__titles {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .ds-modal__title {
+    margin: 0;
+    font-size: var(--font-size-lead);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-tight);
+  }
+
+  .ds-modal__description {
+    margin: 0;
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-body);
+  }
+
+  .ds-modal__close {
+    margin-inline-start: auto;
+  }
+
+  .ds-modal__body {
+    padding: var(--space-6);
+    overflow-y: auto;
+  }
+
+  .ds-modal__footer {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-6);
+    background: var(--color-surface-subtle);
+    border-block-start: var(--rule-width) solid var(--rule-color);
+  }
+
+  @keyframes ds-scrim-in {
+    from {
+      opacity: 0%;
+    }
+  }
+
+  @keyframes ds-modal-in {
+    from {
+      opacity: 0%;
+      translate: 0 var(--space-4);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-scrim,
+    .ds-modal {
+      animation: none;
+    }
+  }
+}

package/dist/components/NumberField/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");;/* empty css                            */const t=require("../FieldAffix/index.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(...e){return e.filter(Boolean).join(` `)}var a=(0,n.forwardRef)(function({size:a=`md`,value:o,defaultValue:s=``,onValueChange:c,min:l,max:u,step:d=1,prefix:f,suffix:p,isDisabled:m=!1,isInvalid:h=!1,hasSteppers:g=!0,className:_,disabled:v,"aria-invalid":y,...b},x){let[S,C]=(0,n.useState)(s),w=o??S,T=(0,n.useRef)(null),E=(0,n.useCallback)(e=>{o===void 0&&C(e),c?.(e)},[c,o]),D=e=>{let t=(w===``?l??0:w)+e*d;l!==void 0&&(t=Math.max(l,t)),u!==void 0&&(t=Math.min(u,t)),t=Number(t.toFixed(10)),E(t),T.current?.focus()},O=w!==``&&(l!==void 0&&w<l||u!==void 0&&w>u);return(0,r.jsxs)(`div`,{className:i(`ds-number`,_),"data-size":a,children:[g&&(0,r.jsx)(`button`,{type:`button`,className:`ds-number__step`,"aria-label":`Decrease`,disabled:m||v||l!==void 0&&w!==``&&w<=l,onClick:()=>D(-1),children:(0,r.jsx)(e.t,{name:`minus`,size:16})}),(0,r.jsx)(t.FieldAffix,{className:`ds-number__body`,lead:f,trail:p,children:(0,r.jsx)(`input`,{ref:e=>{T.current=e,typeof x==`function`?x(e):x&&(x.current=e)},type:`number`,inputMode:`decimal`,value:w,min:l,max:u,step:d,disabled:m||v,"aria-invalid":h||O||y||void 0,"data-size":a,className:`ds-field-skin ds-number__input`,onChange:e=>{let t=e.target.value;E(t===``?``:Number(t))},...b})}),g&&(0,r.jsx)(`button`,{type:`button`,className:`ds-number__step`,"aria-label":`Increase`,disabled:m||v||u!==void 0&&w!==``&&w>=u,onClick:()=>D(1),children:(0,r.jsx)(e.t,{name:`plus`,size:16})})]})});function o({value:e,defaultValue:t={min:``,max:``},onValueChange:i,size:o=`md`,min:s,max:c,step:l=1,prefix:u,suffix:d,isDisabled:f=!1,minLabel:p=`Minimum`,maxLabel:m=`Maximum`}){let[h,g]=(0,n.useState)(t),_=e??h,v=t=>{e===void 0&&g(t),i?.(t)},y=_.min!==``&&_.max!==``&&_.min>_.max;return(0,r.jsxs)(`div`,{className:`ds-number-range`,children:[(0,r.jsx)(a,{"aria-label":p,size:o,value:_.min,min:s,max:c,step:l,prefix:u,suffix:d,isDisabled:f,isInvalid:y,onValueChange:e=>v({..._,min:e})}),(0,r.jsx)(`span`,{className:`ds-number-range__dash`,"aria-hidden":`true`,children:`–`}),(0,r.jsx)(a,{"aria-label":m,size:o,value:_.max,min:s,max:c,step:l,prefix:u,suffix:d,isDisabled:f,isInvalid:y,onValueChange:e=>v({..._,max:e})})]})}exports.NumberField=a,exports.NumberRangeField=o;
+//# sourceMappingURL=index.cjs.map

package/dist/components/NumberField/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","useCallback","Icon","FieldAffix","require_Icon","require_components_FieldAffix_index","react","react_jsx_runtime","cx","parts","NumberField","ariaInvalid","rest","internal","setInternal","defaultValue","current","value","inputRef","commit","next","onValueChange","nudge","min","direction","step","max","outOfRange","className","size","hasSteppers","isDisabled","disabled","prefix","suffix","node","ref","isInvalid","raw","event","NumberRangeField","crossed","minLabel","maxLabel"],"sources":["../../../src/components/NumberField/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface NumberFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"prefix\"> {\n  size?: FieldSize;\n  value?: number | \"\";\n  defaultValue?: number | \"\";\n  onValueChange?: (value: number | \"\") => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Rendered inside the field, before the number — \"£\", \"$\", a glyph. */\n  prefix?: ReactNode;\n  /** Rendered inside the field, after the number — \"kg\", \"%\", \"px\". */\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Hide the − / + steppers and keep typing only. */\n  hasSteppers?: boolean;\n}\n\n\n/**\n * A quantity, bounded by `min` and `max`. Steppers move by `step` and stop at\n * the bounds; typing is never blocked, an out-of-range value reads invalid.\n */\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(function NumberField(\n  {\n    size = \"md\",\n    value,\n    defaultValue = \"\",\n    onValueChange,\n    min,\n    max,\n    step = 1,\n    prefix,\n    suffix,\n\n    isDisabled = false,\n    isInvalid = false,\n    hasSteppers = true,\n    className,\n    disabled,\n    \"aria-invalid\": ariaInvalid,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<number | \"\">(defaultValue);\n  const current = value ?? internal;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = useCallback(\n    (next: number | \"\") => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    },\n    [onValueChange, value],\n  );\n\n  const nudge = (direction: 1 | -1) => {\n    const base = current === \"\" ? (min ?? 0) : current;\n    let next = base + direction * step;\n    if (min !== undefined) next = Math.max(min, next);\n    if (max !== undefined) next = Math.min(max, next);\n    next = Number(next.toFixed(10));\n    commit(next);\n    inputRef.current?.focus();\n  };\n\n  const outOfRange =\n    current !== \"\" &&\n    ((min !== undefined && current < min) || (max !== undefined && current > max));\n\n  return (\n    <div className={cx(\"ds-number\", className)} data-size={size}>\n      {hasSteppers && (\n        <button\n          type=\"button\"\n          className=\"ds-number__step\"\n          aria-label=\"Decrease\"\n          disabled={isDisabled || disabled || (min !== undefined && current !== \"\" && current <= min)}\n          onClick={() => nudge(-1)}\n        >\n          <Icon name=\"minus\" size={16} />\n        </button>\n      )}\n      <FieldAffix className=\"ds-number__body\" lead={prefix} trail={suffix}>\n        <input\n          ref={(node) => {\n            inputRef.current = node;\n            if (typeof ref === \"function\") ref(node);\n            else if (ref) ref.current = node;\n          }}\n          type=\"number\"\n          inputMode=\"decimal\"\n          value={current}\n          min={min}\n          max={max}\n          step={step}\n          disabled={isDisabled || disabled}\n          aria-invalid={isInvalid || outOfRange || ariaInvalid || undefined}\n          data-size={size}\n          className=\"ds-field-skin ds-number__input\"\n          onChange={(event) => {\n            const raw = event.target.value;\n            commit(raw === \"\" ? \"\" : Number(raw));\n          }}\n          {...rest}\n        />\n      </FieldAffix>\n\n      {hasSteppers && (\n        <button\n          type=\"button\"\n          className=\"ds-number__step\"\n          aria-label=\"Increase\"\n          disabled={isDisabled || disabled || (max !== undefined && current !== \"\" && current >= max)}\n          onClick={() => nudge(1)}\n        >\n          <Icon name=\"plus\" size={16} />\n        </button>\n      )}\n    </div>\n  );\n});\n\nexport interface NumberRangeValue {\n  min: number | \"\";\n  max: number | \"\";\n}\n\nexport interface NumberRangeFieldProps {\n  value?: NumberRangeValue;\n  defaultValue?: NumberRangeValue;\n  onValueChange?: (value: NumberRangeValue) => void;\n  size?: FieldSize;\n  /** Hard bounds both ends are clamped to. */\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Rendered inside both fields, before the number. */\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  minLabel?: string;\n  maxLabel?: string;\n}\n\n/**\n * A lower and an upper bound, typed. The pair reads invalid when the minimum\n * passes the maximum — neither field is rewritten behind the user.\n */\nexport function NumberRangeField({\n  value,\n  defaultValue = { min: \"\", max: \"\" },\n  onValueChange,\n  size = \"md\",\n  min,\n  max,\n  step = 1,\n  prefix,\n  suffix,\n  isDisabled = false,\n  minLabel = \"Minimum\",\n  maxLabel = \"Maximum\",\n}: NumberRangeFieldProps) {\n  const [internal, setInternal] = useState<NumberRangeValue>(defaultValue);\n  const current = value ?? internal;\n\n  const commit = (next: NumberRangeValue) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const crossed = current.min !== \"\" && current.max !== \"\" && current.min > current.max;\n\n  return (\n    <div className=\"ds-number-range\">\n      <NumberField\n        aria-label={minLabel}\n        size={size}\n        value={current.min}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, min: next })}\n      />\n      <span className=\"ds-number-range__dash\" aria-hidden=\"true\">\n        –\n      </span>\n      <NumberField\n        aria-label={maxLabel}\n        size={size}\n        value={current.max}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, max: next })}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/NumberField/index.d.cts

@@ -0,0 +1,50 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import type { FieldSize } from "../Field/index.cjs";
+export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value" | "defaultValue" | "onChange" | "prefix"> {
+    size?: FieldSize;
+    value?: number | "";
+    defaultValue?: number | "";
+    onValueChange?: (value: number | "") => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Rendered inside the field, before the number — "£", "$", a glyph. */
+    prefix?: ReactNode;
+    /** Rendered inside the field, after the number — "kg", "%", "px". */
+    suffix?: ReactNode;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    /** Hide the − / + steppers and keep typing only. */
+    hasSteppers?: boolean;
+}
+/**
+ * A quantity, bounded by `min` and `max`. Steppers move by `step` and stop at
+ * the bounds; typing is never blocked, an out-of-range value reads invalid.
+ */
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface NumberRangeValue {
+    min: number | "";
+    max: number | "";
+}
+export interface NumberRangeFieldProps {
+    value?: NumberRangeValue;
+    defaultValue?: NumberRangeValue;
+    onValueChange?: (value: NumberRangeValue) => void;
+    size?: FieldSize;
+    /** Hard bounds both ends are clamped to. */
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Rendered inside both fields, before the number. */
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    isDisabled?: boolean;
+    minLabel?: string;
+    maxLabel?: string;
+}
+/**
+ * A lower and an upper bound, typed. The pair reads invalid when the minimum
+ * passes the maximum — neither field is rewritten behind the user.
+ */
+export declare function NumberRangeField({ value, defaultValue, onValueChange, size, min, max, step, prefix, suffix, isDisabled, minLabel, maxLabel, }: NumberRangeFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/NumberField/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/NumberField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,QAAQ,CAAC;IACvH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,EAAE,KAAK,IAAI,CAAC;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAGD;;;GAGG;AACH,eAAO,MAAM,WAAW,+GAmGtB,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,GAAG,EAAE,CAAC;IACjB,GAAG,EAAE,MAAM,GAAG,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAmC,EACnC,aAAa,EACb,IAAW,EACX,GAAG,EACH,GAAG,EACH,IAAQ,EACR,MAAM,EACN,MAAM,EACN,UAAkB,EAClB,QAAoB,EACpB,QAAoB,GACrB,EAAE,qBAAqB,+BA4CvB"}

package/dist/components/NumberField/index.d.ts

@@ -0,0 +1,50 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import type { FieldSize } from "../Field/index.js";
+export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value" | "defaultValue" | "onChange" | "prefix"> {
+    size?: FieldSize;
+    value?: number | "";
+    defaultValue?: number | "";
+    onValueChange?: (value: number | "") => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Rendered inside the field, before the number — "£", "$", a glyph. */
+    prefix?: ReactNode;
+    /** Rendered inside the field, after the number — "kg", "%", "px". */
+    suffix?: ReactNode;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    /** Hide the − / + steppers and keep typing only. */
+    hasSteppers?: boolean;
+}
+/**
+ * A quantity, bounded by `min` and `max`. Steppers move by `step` and stop at
+ * the bounds; typing is never blocked, an out-of-range value reads invalid.
+ */
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface NumberRangeValue {
+    min: number | "";
+    max: number | "";
+}
+export interface NumberRangeFieldProps {
+    value?: NumberRangeValue;
+    defaultValue?: NumberRangeValue;
+    onValueChange?: (value: NumberRangeValue) => void;
+    size?: FieldSize;
+    /** Hard bounds both ends are clamped to. */
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Rendered inside both fields, before the number. */
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    isDisabled?: boolean;
+    minLabel?: string;
+    maxLabel?: string;
+}
+/**
+ * A lower and an upper bound, typed. The pair reads invalid when the minimum
+ * passes the maximum — neither field is rewritten behind the user.
+ */
+export declare function NumberRangeField({ value, defaultValue, onValueChange, size, min, max, step, prefix, suffix, isDisabled, minLabel, maxLabel, }: NumberRangeFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NumberField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NumberField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,QAAQ,CAAC;IACvH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,EAAE,KAAK,IAAI,CAAC;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAGD;;;GAGG;AACH,eAAO,MAAM,WAAW,+GAmGtB,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,GAAG,EAAE,CAAC;IACjB,GAAG,EAAE,MAAM,GAAG,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAmC,EACnC,aAAa,EACb,IAAW,EACX,GAAG,EACH,GAAG,EACH,IAAQ,EACR,MAAM,EACN,MAAM,EACN,UAAkB,EAClB,QAAoB,EACpB,QAAoB,GACrB,EAAE,qBAAqB,+BA4CvB"}

package/dist/components/NumberField/index.js

@@ -0,0 +1,124 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+/* empty css                          */
+import { FieldAffix as t } from "../FieldAffix/index.js";
+import { forwardRef as n, useCallback as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/NumberField/index.tsx
+function c(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var l = n(function({ size: n = "md", value: l, defaultValue: u = "", onValueChange: d, min: f, max: p, step: m = 1, prefix: h, suffix: g, isDisabled: _ = !1, isInvalid: v = !1, hasSteppers: y = !0, className: b, disabled: x, "aria-invalid": S, ...C }, w) {
+	let [T, E] = a(u), D = l ?? T, O = i(null), k = r((e) => {
+		l === void 0 && E(e), d?.(e);
+	}, [d, l]), A = (e) => {
+		let t = (D === "" ? f ?? 0 : D) + e * m;
+		f !== void 0 && (t = Math.max(f, t)), p !== void 0 && (t = Math.min(p, t)), t = Number(t.toFixed(10)), k(t), O.current?.focus();
+	}, j = D !== "" && (f !== void 0 && D < f || p !== void 0 && D > p);
+	return /* @__PURE__ */ s("div", {
+		className: c("ds-number", b),
+		"data-size": n,
+		children: [
+			y && /* @__PURE__ */ o("button", {
+				type: "button",
+				className: "ds-number__step",
+				"aria-label": "Decrease",
+				disabled: _ || x || f !== void 0 && D !== "" && D <= f,
+				onClick: () => A(-1),
+				children: /* @__PURE__ */ o(e, {
+					name: "minus",
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ o(t, {
+				className: "ds-number__body",
+				lead: h,
+				trail: g,
+				children: /* @__PURE__ */ o("input", {
+					ref: (e) => {
+						O.current = e, typeof w == "function" ? w(e) : w && (w.current = e);
+					},
+					type: "number",
+					inputMode: "decimal",
+					value: D,
+					min: f,
+					max: p,
+					step: m,
+					disabled: _ || x,
+					"aria-invalid": v || j || S || void 0,
+					"data-size": n,
+					className: "ds-field-skin ds-number__input",
+					onChange: (e) => {
+						let t = e.target.value;
+						k(t === "" ? "" : Number(t));
+					},
+					...C
+				})
+			}),
+			y && /* @__PURE__ */ o("button", {
+				type: "button",
+				className: "ds-number__step",
+				"aria-label": "Increase",
+				disabled: _ || x || p !== void 0 && D !== "" && D >= p,
+				onClick: () => A(1),
+				children: /* @__PURE__ */ o(e, {
+					name: "plus",
+					size: 16
+				})
+			})
+		]
+	});
+});
+function u({ value: e, defaultValue: t = {
+	min: "",
+	max: ""
+}, onValueChange: n, size: r = "md", min: i, max: c, step: u = 1, prefix: d, suffix: f, isDisabled: p = !1, minLabel: m = "Minimum", maxLabel: h = "Maximum" }) {
+	let [g, _] = a(t), v = e ?? g, y = (t) => {
+		e === void 0 && _(t), n?.(t);
+	}, b = v.min !== "" && v.max !== "" && v.min > v.max;
+	return /* @__PURE__ */ s("div", {
+		className: "ds-number-range",
+		children: [
+			/* @__PURE__ */ o(l, {
+				"aria-label": m,
+				size: r,
+				value: v.min,
+				min: i,
+				max: c,
+				step: u,
+				prefix: d,
+				suffix: f,
+				isDisabled: p,
+				isInvalid: b,
+				onValueChange: (e) => y({
+					...v,
+					min: e
+				})
+			}),
+			/* @__PURE__ */ o("span", {
+				className: "ds-number-range__dash",
+				"aria-hidden": "true",
+				children: "–"
+			}),
+			/* @__PURE__ */ o(l, {
+				"aria-label": h,
+				size: r,
+				value: v.max,
+				min: i,
+				max: c,
+				step: u,
+				prefix: d,
+				suffix: f,
+				isDisabled: p,
+				isInvalid: b,
+				onValueChange: (e) => y({
+					...v,
+					max: e
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { l as NumberField, u as NumberRangeField };
+
+//# sourceMappingURL=index.js.map

package/dist/components/NumberField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","cx","parts","NumberField","forwardRef","ariaInvalid","rest","internal","setInternal","useState","defaultValue","current","value","inputRef","useRef","commit","useCallback","next","onValueChange","nudge","min","direction","step","max","outOfRange","className","size","hasSteppers","isDisabled","disabled","FieldAffix","prefix","suffix","node","ref","isInvalid","raw","event","NumberRangeField","crossed","minLabel","maxLabel"],"sources":["../../../src/components/NumberField/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Icon } from \"../Icon\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface NumberFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"prefix\"> {\n  size?: FieldSize;\n  value?: number | \"\";\n  defaultValue?: number | \"\";\n  onValueChange?: (value: number | \"\") => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Rendered inside the field, before the number — \"£\", \"$\", a glyph. */\n  prefix?: ReactNode;\n  /** Rendered inside the field, after the number — \"kg\", \"%\", \"px\". */\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Hide the − / + steppers and keep typing only. */\n  hasSteppers?: boolean;\n}\n\n\n/**\n * A quantity, bounded by `min` and `max`. Steppers move by `step` and stop at\n * the bounds; typing is never blocked, an out-of-range value reads invalid.\n */\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(function NumberField(\n  {\n    size = \"md\",\n    value,\n    defaultValue = \"\",\n    onValueChange,\n    min,\n    max,\n    step = 1,\n    prefix,\n    suffix,\n\n    isDisabled = false,\n    isInvalid = false,\n    hasSteppers = true,\n    className,\n    disabled,\n    \"aria-invalid\": ariaInvalid,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<number | \"\">(defaultValue);\n  const current = value ?? internal;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = useCallback(\n    (next: number | \"\") => {\n      if (value === undefined) setInternal(next);\n      onValueChange?.(next);\n    },\n    [onValueChange, value],\n  );\n\n  const nudge = (direction: 1 | -1) => {\n    const base = current === \"\" ? (min ?? 0) : current;\n    let next = base + direction * step;\n    if (min !== undefined) next = Math.max(min, next);\n    if (max !== undefined) next = Math.min(max, next);\n    next = Number(next.toFixed(10));\n    commit(next);\n    inputRef.current?.focus();\n  };\n\n  const outOfRange =\n    current !== \"\" &&\n    ((min !== undefined && current < min) || (max !== undefined && current > max));\n\n  return (\n    <div className={cx(\"ds-number\", className)} data-size={size}>\n      {hasSteppers && (\n        <button\n          type=\"button\"\n          className=\"ds-number__step\"\n          aria-label=\"Decrease\"\n          disabled={isDisabled || disabled || (min !== undefined && current !== \"\" && current <= min)}\n          onClick={() => nudge(-1)}\n        >\n          <Icon name=\"minus\" size={16} />\n        </button>\n      )}\n      <FieldAffix className=\"ds-number__body\" lead={prefix} trail={suffix}>\n        <input\n          ref={(node) => {\n            inputRef.current = node;\n            if (typeof ref === \"function\") ref(node);\n            else if (ref) ref.current = node;\n          }}\n          type=\"number\"\n          inputMode=\"decimal\"\n          value={current}\n          min={min}\n          max={max}\n          step={step}\n          disabled={isDisabled || disabled}\n          aria-invalid={isInvalid || outOfRange || ariaInvalid || undefined}\n          data-size={size}\n          className=\"ds-field-skin ds-number__input\"\n          onChange={(event) => {\n            const raw = event.target.value;\n            commit(raw === \"\" ? \"\" : Number(raw));\n          }}\n          {...rest}\n        />\n      </FieldAffix>\n\n      {hasSteppers && (\n        <button\n          type=\"button\"\n          className=\"ds-number__step\"\n          aria-label=\"Increase\"\n          disabled={isDisabled || disabled || (max !== undefined && current !== \"\" && current >= max)}\n          onClick={() => nudge(1)}\n        >\n          <Icon name=\"plus\" size={16} />\n        </button>\n      )}\n    </div>\n  );\n});\n\nexport interface NumberRangeValue {\n  min: number | \"\";\n  max: number | \"\";\n}\n\nexport interface NumberRangeFieldProps {\n  value?: NumberRangeValue;\n  defaultValue?: NumberRangeValue;\n  onValueChange?: (value: NumberRangeValue) => void;\n  size?: FieldSize;\n  /** Hard bounds both ends are clamped to. */\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Rendered inside both fields, before the number. */\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  isDisabled?: boolean;\n  minLabel?: string;\n  maxLabel?: string;\n}\n\n/**\n * A lower and an upper bound, typed. The pair reads invalid when the minimum\n * passes the maximum — neither field is rewritten behind the user.\n */\nexport function NumberRangeField({\n  value,\n  defaultValue = { min: \"\", max: \"\" },\n  onValueChange,\n  size = \"md\",\n  min,\n  max,\n  step = 1,\n  prefix,\n  suffix,\n  isDisabled = false,\n  minLabel = \"Minimum\",\n  maxLabel = \"Maximum\",\n}: NumberRangeFieldProps) {\n  const [internal, setInternal] = useState<NumberRangeValue>(defaultValue);\n  const current = value ?? internal;\n\n  const commit = (next: NumberRangeValue) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const crossed = current.min !== \"\" && current.max !== \"\" && current.min > current.max;\n\n  return (\n    <div className=\"ds-number-range\">\n      <NumberField\n        aria-label={minLabel}\n        size={size}\n        value={current.min}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, min: next })}\n      />\n      <span className=\"ds-number-range__dash\" aria-hidden=\"true\">\n        –\n      </span>\n      <NumberField\n        aria-label={maxLabel}\n        size={size}\n        value={current.max}\n        min={min}\n        max={max}\n        step={step}\n        prefix={prefix}\n        suffix={suffix}\n        isDisabled={isDisabled}\n        isInvalid={crossed}\n        onValueChange={(next) => commit({ ...current, max: next })}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/NumberField/style.css

@@ -0,0 +1,85 @@
+@layer components {
+  .ds-number {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    inline-size: 100%;
+  }
+
+  .ds-number__body {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .ds-number__input {
+    text-align: start;
+  }
+
+  .ds-number__input::-webkit-outer-spin-button,
+  .ds-number__input::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  .ds-number__input {
+    appearance: textfield;
+  }
+
+  .ds-number__body .ds-field-affix__lead,
+  .ds-number__body .ds-field-affix__trail {
+    font-family: var(--font-mono);
+  }
+
+
+  .ds-number__step {
+    display: grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--field-height-md);
+    block-size: var(--field-height-md);
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--field-radius);
+    background: var(--field-rest);
+    color: var(--color-text);
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-number[data-size="sm"] .ds-number__step {
+    inline-size: var(--field-height-sm);
+    block-size: var(--field-height-sm);
+  }
+
+  .ds-number[data-size="lg"] .ds-number__step {
+    inline-size: var(--field-height-lg);
+    block-size: var(--field-height-lg);
+  }
+
+  .ds-number__step:hover:not(:disabled) {
+    background: var(--field-hover);
+  }
+
+  .ds-number__step:active:not(:disabled) {
+    background: var(--field-pressed);
+  }
+
+  .ds-number__step:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .ds-number__step:disabled {
+    opacity: 45%;
+    cursor: not-allowed;
+  }
+
+  .ds-number-range {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .ds-number-range__dash {
+    color: var(--color-text-muted);
+  }
+}

package/dist/components/Popover/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime"),n=require("react-dom");function r(...e){return e.filter(Boolean).join(` `)}var i=8;function a({anchorRef:a,anchorId:o,isOpen:s,align:c=`start`,matchAnchorWidth:l=!1,offset:u=4,className:d,children:f,role:p,id:m,panelRef:h,...g}){let _=(0,e.useRef)(null),v=(0,e.useId)(),y=m??v,b=(0,e.useCallback)(()=>{let e=a.current??(o?document.getElementById(o):null),t=_.current;if(!e||!t)return;let n=e.getBoundingClientRect();l&&(t.style.width=`${n.width}px`);let r=t.getBoundingClientRect(),s=document.documentElement.clientWidth,d=document.documentElement.clientHeight,f=d-n.bottom-u-i,p=n.top-u-i,m=f<r.height&&p>f,h=Math.max(120,m?p:f),g=m?Math.max(i,n.top-u-Math.min(r.height,h)):Math.min(n.bottom+u,d-i),v=c===`end`?n.right-r.width:n.left,y=Math.max(i,Math.min(v,s-r.width-i));t.style.left=`${Math.round(y)}px`,t.style.top=`${Math.round(g)}px`,t.style.setProperty(`--popover-max-block-size`,`${Math.round(h)}px`),t.style.visibility=`visible`},[c,o,a,l,u]);if((0,e.useEffect)(()=>{if(!s)return;let e=document.querySelector(`[data-popover-instance="${CSS.escape(v)}"]`);_.current=e,h&&(h.current=e),b();let t=()=>b();return window.addEventListener(`resize`,t),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,t),window.removeEventListener(`scroll`,t,!0),_.current=null,h&&(h.current=null)}},[v,s,y,h,b]),!s||typeof document>`u`)return null;let x=(0,t.jsx)(`div`,{id:y,"data-popover-instance":v,role:p,className:r(`ds-popover`,d),...g,children:f});return(0,n.createPortal)(x,document.body)}exports.Popover=a;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Popover/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useRef","useId","useCallback","createPortal","react","react_jsx_runtime","react_dom","cx","parts","VIEWPORT_MARGIN","Popover","rest","floatingRef","generatedId","panelId","id","place","reference","anchorRef","anchorId","floating","anchor","matchAnchorWidth","panel","viewportWidth","viewportHeight","roomBelow","offset","roomAbove","placeAbove","availableHeight","top","preferredLeft","align","left","isOpen","panelRef","update","className"],"sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nconst VIEWPORT_MARGIN = 8;\n\nexport type PopoverAlign = \"start\" | \"end\";\n\nexport interface PopoverProps {\n  /** The control the panel hangs off. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** Optional DOM id fallback for composed controls whose refs are consumed by a field wrapper. */\n  anchorId?: string;\n  isOpen: boolean;\n  /** Which edge of the anchor the panel lines up with. Flips when it must. */\n  align?: PopoverAlign;\n  /** Match the anchor's width — for listboxes that read as one field. */\n  matchAnchorWidth?: boolean;\n  /** Gap between anchor and panel. */\n  offset?: number;\n  className?: string;\n  children: ReactNode;\n  role?: string;\n  id?: string;\n  \"aria-label\"?: string;\n  panelRef?: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * A panel anchored to a control. It is positioned against the viewport, so it\n * flips above the anchor when the space below runs out and slides inward\n * rather than being cut off at any edge.\n */\nexport function Popover({\n  anchorRef,\n  anchorId,\n  isOpen,\n  align = \"start\",\n  matchAnchorWidth = false,\n  offset = 4,\n  className,\n  children,\n  role,\n  id,\n  panelRef,\n  ...rest\n}: PopoverProps) {\n  const floatingRef = useRef<HTMLDivElement | null>(null);\n  const generatedId = useId();\n  const panelId = id ?? generatedId;\n\n  const place = useCallback(() => {\n    const reference = anchorRef.current ?? (anchorId ? document.getElementById(anchorId) : null);\n    const floating = floatingRef.current;\n    if (!reference || !floating) return;\n\n    const anchor = reference.getBoundingClientRect();\n    if (matchAnchorWidth) floating.style.width = `${anchor.width}px`;\n    const panel = floating.getBoundingClientRect();\n    const viewportWidth = document.documentElement.clientWidth;\n    const viewportHeight = document.documentElement.clientHeight;\n    const roomBelow = viewportHeight - anchor.bottom - offset - VIEWPORT_MARGIN;\n    const roomAbove = anchor.top - offset - VIEWPORT_MARGIN;\n    const placeAbove = roomBelow < panel.height && roomAbove > roomBelow;\n    const availableHeight = Math.max(120, placeAbove ? roomAbove : roomBelow);\n    const top = placeAbove\n      ? Math.max(VIEWPORT_MARGIN, anchor.top - offset - Math.min(panel.height, availableHeight))\n      : Math.min(anchor.bottom + offset, viewportHeight - VIEWPORT_MARGIN);\n    const preferredLeft = align === \"end\" ? anchor.right - panel.width : anchor.left;\n    const left = Math.max(\n      VIEWPORT_MARGIN,\n      Math.min(preferredLeft, viewportWidth - panel.width - VIEWPORT_MARGIN),\n    );\n\n    floating.style.left = `${Math.round(left)}px`;\n    floating.style.top = `${Math.round(top)}px`;\n    floating.style.setProperty(\"--popover-max-block-size\", `${Math.round(availableHeight)}px`);\n    floating.style.visibility = \"visible\";\n  }, [align, anchorId, anchorRef, matchAnchorWidth, offset]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const floating = document.querySelector<HTMLDivElement>(\n      `[data-popover-instance=\"${CSS.escape(generatedId)}\"]`,\n    );\n    floatingRef.current = floating;\n    if (panelRef) panelRef.current = floating;\n    place();\n    const update = () => place();\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n      floatingRef.current = null;\n      if (panelRef) panelRef.current = null;\n    };\n  }, [generatedId, isOpen, panelId, panelRef, place]);\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const panel = (\n    <div\n      id={panelId}\n      data-popover-instance={generatedId}\n      role={role}\n      className={cx(\"ds-popover\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n\n  return createPortal(panel, document.body);\n}\n"],"mappings":"A,gJAIA,SAASO,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAEA,IAAMC,EAAkB,EA6BxB,SAAgBC,EAAQ,CACtB,YACA,WACA,SACA,QAAQ,QACR,mBAAmB,GACnB,SAAS,EACT,YACA,WACA,OACA,KACA,WACA,GAAGC,GACY,CACf,IAAMC,GAAA,EAAcZ,EAAAA,OAAAA,CAA8B,IAAI,EAChDa,GAAA,EAAcZ,EAAAA,MAAAA,CAAM,EACpBa,EAAUC,GAAMF,EAEhBG,GAAA,EAAQd,EAAAA,YAAAA,KAAkB,CAC9B,IAAMe,EAAYC,EAAU,UAAYC,EAAW,SAAS,eAAeA,CAAQ,EAAI,MACjFC,EAAWR,EAAY,QAC7B,GAAI,CAACK,GAAa,CAACG,EAAU,OAE7B,IAAMC,EAASJ,EAAU,sBAAsB,EAC3CK,IAAkB,EAAS,MAAM,MAAQ,GAAGD,EAAO,MAAM,KAC7D,IAAME,EAAQH,EAAS,sBAAsB,EACvCI,EAAgB,SAAS,gBAAgB,YACzCC,EAAiB,SAAS,gBAAgB,aAC1CC,EAAYD,EAAiBJ,EAAO,OAASM,EAASlB,EACtDmB,EAAYP,EAAO,IAAMM,EAASlB,EAClCoB,EAAaH,EAAYH,EAAM,QAAUK,EAAYF,EACrDI,EAAkB,KAAK,IAAI,IAAKD,EAAaD,EAAYF,CAAS,EAClEK,EAAMF,EACR,KAAK,IAAIpB,EAAiBY,EAAO,IAAMM,EAAS,KAAK,IAAIJ,EAAM,OAAQO,CAAe,CAAC,EACvF,KAAK,IAAIT,EAAO,OAASM,EAAQF,EAAiBhB,CAAe,EAC/DuB,EAAgBC,IAAU,MAAQZ,EAAO,MAAQE,EAAM,MAAQF,EAAO,KACtEa,EAAO,KAAK,IAChBzB,EACA,KAAK,IAAIuB,EAAeR,EAAgBD,EAAM,MAAQd,CAAe,CACvE,EAEA,EAAS,MAAM,KAAO,GAAG,KAAK,MAAMyB,CAAI,EAAE,IAC1C,EAAS,MAAM,IAAM,GAAG,KAAK,MAAMH,CAAG,EAAE,IACxCX,EAAS,MAAM,YAAY,2BAA4B,GAAG,KAAK,MAAMU,CAAe,EAAE,GAAG,EACzF,EAAS,MAAM,WAAa,SAC9B,EAAG,CAACG,EAAOd,EAAUD,EAAWI,EAAkBK,CAAM,CAAC,EAqBzD,IAnBA,EAAAvB,EAAA,UAAA,KAAgB,CACd,GAAI,CAAC+B,EAAQ,OACb,IAAMf,EAAW,SAAS,cACxB,2BAA2B,IAAI,OAAOP,CAAW,EAAE,GACrD,EACA,EAAY,QAAUO,EAClBgB,IAAU,EAAS,QAAUhB,GACjCJ,EAAM,EACN,IAAMqB,MAAerB,EAAM,EAG3B,OAFA,OAAO,iBAAiB,SAAUqB,CAAM,EACxC,OAAO,iBAAiB,SAAUA,EAAQ,EAAI,MACjC,CACX,OAAO,oBAAoB,SAAUA,CAAM,EAC3C,OAAO,oBAAoB,SAAUA,EAAQ,EAAI,EACjD,EAAY,QAAU,KAClBD,IAAU,EAAS,QAAU,KACnC,CACF,EAAG,CAACvB,EAAasB,EAAQrB,EAASsB,EAAUpB,CAAK,CAAC,EAE9C,CAACmB,GAAU,OAAO,SAAa,IAAa,OAAO,KAEvD,IAAMZ,GACJ,EAAAlB,EAAA,IAAA,CAAC,MAAD,CACE,GAAIS,EACJ,wBAAuBD,EACjB,OACN,UAAWN,EAAG,aAAc+B,CAAS,EACrC,GAAI3B,EAEH,UACE,CAAA,EAGP,OAAA,EAAOR,EAAAA,aAAAA,CAAaoB,EAAO,SAAS,IAAI,CAC1C,C"}

package/dist/components/Popover/index.d.cts

@@ -0,0 +1,28 @@
+import { type ReactNode, type RefObject } from "react";
+export type PopoverAlign = "start" | "end";
+export interface PopoverProps {
+    /** The control the panel hangs off. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Optional DOM id fallback for composed controls whose refs are consumed by a field wrapper. */
+    anchorId?: string;
+    isOpen: boolean;
+    /** Which edge of the anchor the panel lines up with. Flips when it must. */
+    align?: PopoverAlign;
+    /** Match the anchor's width — for listboxes that read as one field. */
+    matchAnchorWidth?: boolean;
+    /** Gap between anchor and panel. */
+    offset?: number;
+    className?: string;
+    children: ReactNode;
+    role?: string;
+    id?: string;
+    "aria-label"?: string;
+    panelRef?: RefObject<HTMLDivElement | null>;
+}
+/**
+ * A panel anchored to a control. It is positioned against the viewport, so it
+ * flips above the anchor when the space below runs out and slides inward
+ * rather than being cut off at any edge.
+ */
+export declare function Popover({ anchorRef, anchorId, isOpen, align, matchAnchorWidth, offset, className, children, role, id, panelRef, ...rest }: PopoverProps): import("react").ReactPortal | null;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Popover/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9F,OAAO,aAAa,CAAC;AAQrB,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAE3C,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC7C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAe,EACf,gBAAwB,EACxB,MAAU,EACV,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,YAAY,sCAoEd"}

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode, type RefObject } from "react";
+export type PopoverAlign = "start" | "end";
+export interface PopoverProps {
+    /** The control the panel hangs off. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Optional DOM id fallback for composed controls whose refs are consumed by a field wrapper. */
+    anchorId?: string;
+    isOpen: boolean;
+    /** Which edge of the anchor the panel lines up with. Flips when it must. */
+    align?: PopoverAlign;
+    /** Match the anchor's width — for listboxes that read as one field. */
+    matchAnchorWidth?: boolean;
+    /** Gap between anchor and panel. */
+    offset?: number;
+    className?: string;
+    children: ReactNode;
+    role?: string;
+    id?: string;
+    "aria-label"?: string;
+    panelRef?: RefObject<HTMLDivElement | null>;
+}
+/**
+ * A panel anchored to a control. It is positioned against the viewport, so it
+ * flips above the anchor when the space below runs out and slides inward
+ * rather than being cut off at any edge.
+ */
+export declare function Popover({ anchorRef, anchorId, isOpen, align, matchAnchorWidth, offset, className, children, role, id, panelRef, ...rest }: PopoverProps): import("react").ReactPortal | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9F,OAAO,aAAa,CAAC;AAQrB,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAE3C,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC7C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAe,EACf,gBAAwB,EACxB,MAAU,EACV,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,YAAY,sCAoEd"}

package/dist/components/Popover/index.js

@@ -0,0 +1,52 @@
+import { useCallback as e, useEffect as t, useId as n, useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { createPortal as a } from "react-dom";
+//#region src/components/Popover/index.tsx
+function o(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var s = 8;
+function c({ anchorRef: c, anchorId: l, isOpen: u, align: d = "start", matchAnchorWidth: f = !1, offset: p = 4, className: m, children: h, role: g, id: _, panelRef: v, ...y }) {
+	let b = r(null), x = n(), S = _ ?? x, C = e(() => {
+		let e = c.current ?? (l ? document.getElementById(l) : null), t = b.current;
+		if (!e || !t) return;
+		let n = e.getBoundingClientRect();
+		f && (t.style.width = `${n.width}px`);
+		let r = t.getBoundingClientRect(), i = document.documentElement.clientWidth, a = document.documentElement.clientHeight, o = a - n.bottom - p - s, u = n.top - p - s, m = o < r.height && u > o, h = Math.max(120, m ? u : o), g = m ? Math.max(s, n.top - p - Math.min(r.height, h)) : Math.min(n.bottom + p, a - s), _ = d === "end" ? n.right - r.width : n.left, v = Math.max(s, Math.min(_, i - r.width - s));
+		t.style.left = `${Math.round(v)}px`, t.style.top = `${Math.round(g)}px`, t.style.setProperty("--popover-max-block-size", `${Math.round(h)}px`), t.style.visibility = "visible";
+	}, [
+		d,
+		l,
+		c,
+		f,
+		p
+	]);
+	if (t(() => {
+		if (!u) return;
+		let e = document.querySelector(`[data-popover-instance="${CSS.escape(x)}"]`);
+		b.current = e, v && (v.current = e), C();
+		let t = () => C();
+		return window.addEventListener("resize", t), window.addEventListener("scroll", t, !0), () => {
+			window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0), b.current = null, v && (v.current = null);
+		};
+	}, [
+		x,
+		u,
+		S,
+		v,
+		C
+	]), !u || typeof document > "u") return null;
+	let w = /* @__PURE__ */ i("div", {
+		id: S,
+		"data-popover-instance": x,
+		role: g,
+		className: o("ds-popover", m),
+		...y,
+		children: h
+	});
+	return a(w, document.body);
+}
+//#endregion
+export { c as Popover };
+
+//# sourceMappingURL=index.js.map