@viax.io/uxm 4.36.0 → 4.37.0

package/dist/ui/locale/locale.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const DEFAULT_UXM_LOCALE = "en-US";
+const UxmLocaleContext = createContext(void 0);
+function UxmLocaleProvider({ locale, children }) {
+  return /* @__PURE__ */ jsx(UxmLocaleContext.Provider, { value: locale, children });
+}
+function useUxmLocale(explicit) {
+  const fromContext = useContext(UxmLocaleContext);
+  return explicit ?? fromContext ?? DEFAULT_UXM_LOCALE;
+}
+export {
+  DEFAULT_UXM_LOCALE,
+  UxmLocaleProvider,
+  useUxmLocale
+};
+//# sourceMappingURL=locale.js.map

package/dist/ui/locale/locale.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/locale/locale.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { ReactNode } from 'react';\n\n/**\n * Locale used by every UXM atom that formats dates, numbers, or units when\n * neither a `locale` prop nor a surrounding {@link UxmLocaleProvider} says\n * otherwise. Matches the English defaults baked into the atoms' label props,\n * so an app that localises nothing keeps its current rendering.\n */\nexport const DEFAULT_UXM_LOCALE = 'en-US';\n\nconst UxmLocaleContext = createContext<string | undefined>(undefined);\n\nexport interface UxmLocaleProviderProps {\n  /** BCP-47 tag — e.g. `\"uk-UA\"`, `\"de-DE\"`. Passed straight to `Intl`. */\n  locale: string;\n  children?: ReactNode;\n}\n\n/**\n * Broadcasts one BCP-47 locale to every UXM atom below it.\n *\n * This is deliberately **not** an i18n engine — UXM ships no message\n * catalogue and no translation runtime. Translated *copy* stays the\n * consumer's job and arrives through each atom's label props (`clearLabel`,\n * `labels`, …). What this provider carries is the one thing those props\n * cannot express: which locale `Intl` should format with, so month names,\n * decimal separators, and byte units follow the app instead of defaulting to\n * US English.\n *\n * Mount it once near the app root; the atoms that need it read it themselves:\n *\n * ```tsx\n * <UxmLocaleProvider locale=\"uk-UA\">\n *   <App />\n * </UxmLocaleProvider>\n * ```\n *\n * A `locale` prop on an individual atom still wins over the provider, so a\n * single always-USD amount or an always-ISO date can opt out locally.\n */\nexport function UxmLocaleProvider({ locale, children }: UxmLocaleProviderProps) {\n  return <UxmLocaleContext.Provider value={locale}>{children}</UxmLocaleContext.Provider>;\n}\n\n/**\n * Resolve the locale an atom should format with, in precedence order:\n * explicit prop → nearest {@link UxmLocaleProvider} → {@link DEFAULT_UXM_LOCALE}.\n *\n * Atoms take `locale?: string` and pass it straight in, which keeps the\n * per-instance override working exactly as it did before the provider existed:\n *\n * ```tsx\n * const locale = useUxmLocale(localeProp);\n * ```\n */\nexport function useUxmLocale(explicit?: string): string {\n  const fromContext = useContext(UxmLocaleContext);\n  return explicit ?? fromContext ?? DEFAULT_UXM_LOCALE;\n}\n"],"mappings":"AA2CS;AA3CT,SAAS,eAAe,kBAAkB;AAUnC,MAAM,qBAAqB;AAElC,MAAM,mBAAmB,cAAkC,MAAS;AA8B7D,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAA2B;AAC9E,SAAO,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,QAAS,UAAS;AAC7D;AAaO,SAAS,aAAa,UAA2B;AACtD,QAAM,cAAc,WAAW,gBAAgB;AAC/C,SAAO,YAAY,eAAe;AACpC;","names":[]}

package/dist/ui/page-shell/page-shell.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/page-shell/page-shell.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type PageShellVariant = 'standard' | 'canvas';\n\nexport interface PageShellProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Layout variant — controls the content area only. The sidebar and top bar\n   * always render whatever you pass.\n   *\n   * - `standard`: padded, scrollable content area for normal product pages.\n   * - `canvas`: full-bleed, non-scrolling content area for diagram surfaces\n   *   and lifecycle modelers. Pass a lighter context-specific top bar\n   *   (Back + title + diagram actions) instead of the full AppTopBar.\n   */\n  variant?: PageShellVariant;\n  /** Left navigation. Typically <AppSidebar /> from @viax.io/uxm/ui. */\n  sidebar?: ReactNode;\n  /** Top header — anything you want, or omit/null to render no header. */\n  topBar?: ReactNode;\n  /** Page content. */\n  children: ReactNode;\n}\n\nexport function PageShell({\n  variant = 'standard',\n  sidebar,\n  topBar,\n  children,\n  className,\n  ...rest\n}: PageShellProps) {\n  return (\n    <div className={cn('uxm-page-shell', `uxm-page-shell--${variant}`, className)} {...rest}>\n      {sidebar && <div className=\"uxm-page-shell__sidebar\">{sidebar}</div>}\n      <div className=\"uxm-page-shell__body\">\n        {topBar && <div className=\"uxm-page-shell__top-bar\">{topBar}</div>}\n        <main className=\"uxm-page-shell__content\">{children}</main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCkB;AAnClB,qBAAmB;AAyBZ,SAAS,UAAU;AAAA,EACxB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE,6CAAC,SAAI,eAAW,mBAAG,kBAAkB,mBAAmB,OAAO,IAAI,SAAS,GAAI,GAAG,MAChF;AAAA,eAAW,4CAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,IAC9D,6CAAC,SAAI,WAAU,wBACZ;AAAA,gBAAU,4CAAC,SAAI,WAAU,2BAA2B,kBAAO;AAAA,MAC5D,4CAAC,UAAK,WAAU,2BAA2B,UAAS;AAAA,OACtD;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/ui/page-shell/page-shell.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type PageShellVariant = 'standard' | 'canvas';\n\nexport interface PageShellProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Layout variant — controls the content area only. The sidebar and top bar\n   * always render whatever you pass.\n   *\n   * - `standard`: padded, scrollable content area for normal product pages.\n   * - `canvas`: full-bleed, non-scrolling content area for diagram surfaces\n   *   and lifecycle modelers. Pass a lighter context-specific top bar\n   *   (Back + title + diagram actions) instead of the full AppTopBar.\n   */\n  variant?: PageShellVariant;\n  /** Left navigation. Typically <AppSidebar /> from @viax/uxm/ui. */\n  sidebar?: ReactNode;\n  /** Top header — anything you want, or omit/null to render no header. */\n  topBar?: ReactNode;\n  /** Page content. */\n  children: ReactNode;\n}\n\nexport function PageShell({\n  variant = 'standard',\n  sidebar,\n  topBar,\n  children,\n  className,\n  ...rest\n}: PageShellProps) {\n  return (\n    <div className={cn('uxm-page-shell', `uxm-page-shell--${variant}`, className)} {...rest}>\n      {sidebar && <div className=\"uxm-page-shell__sidebar\">{sidebar}</div>}\n      <div className=\"uxm-page-shell__body\">\n        {topBar && <div className=\"uxm-page-shell__top-bar\">{topBar}</div>}\n        <main className=\"uxm-page-shell__content\">{children}</main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCkB;AAnClB,qBAAmB;AAyBZ,SAAS,UAAU;AAAA,EACxB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE,6CAAC,SAAI,eAAW,mBAAG,kBAAkB,mBAAmB,OAAO,IAAI,SAAS,GAAI,GAAG,MAChF;AAAA,eAAW,4CAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,IAC9D,6CAAC,SAAI,WAAU,wBACZ;AAAA,gBAAU,4CAAC,SAAI,WAAU,2BAA2B,kBAAO;AAAA,MAC5D,4CAAC,UAAK,WAAU,2BAA2B,UAAS;AAAA,OACtD;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/page-shell/page-shell.d.ts

@@ -11,7 +11,7 @@ export interface PageShellProps extends HTMLAttributes<HTMLDivElement> {
      *   (Back + title + diagram actions) instead of the full AppTopBar.
      */
     variant?: PageShellVariant;
-    /** Left navigation. Typically <AppSidebar /> from @viax.io/uxm/ui. */
+    /** Left navigation. Typically <AppSidebar /> from @viax/uxm/ui. */
     sidebar?: ReactNode;
     /** Top header — anything you want, or omit/null to render no header. */
     topBar?: ReactNode;

package/dist/ui/page-shell/page-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/ui/page-shell/page-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,sEAAsE;IACtE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,EACxB,OAAoB,EACpB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,2CAUhB"}
+{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/ui/page-shell/page-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,EACxB,OAAoB,EACpB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,2CAUhB"}

package/dist/ui/page-shell/page-shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/page-shell/page-shell.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type PageShellVariant = 'standard' | 'canvas';\n\nexport interface PageShellProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Layout variant — controls the content area only. The sidebar and top bar\n   * always render whatever you pass.\n   *\n   * - `standard`: padded, scrollable content area for normal product pages.\n   * - `canvas`: full-bleed, non-scrolling content area for diagram surfaces\n   *   and lifecycle modelers. Pass a lighter context-specific top bar\n   *   (Back + title + diagram actions) instead of the full AppTopBar.\n   */\n  variant?: PageShellVariant;\n  /** Left navigation. Typically <AppSidebar /> from @viax.io/uxm/ui. */\n  sidebar?: ReactNode;\n  /** Top header — anything you want, or omit/null to render no header. */\n  topBar?: ReactNode;\n  /** Page content. */\n  children: ReactNode;\n}\n\nexport function PageShell({\n  variant = 'standard',\n  sidebar,\n  topBar,\n  children,\n  className,\n  ...rest\n}: PageShellProps) {\n  return (\n    <div className={cn('uxm-page-shell', `uxm-page-shell--${variant}`, className)} {...rest}>\n      {sidebar && <div className=\"uxm-page-shell__sidebar\">{sidebar}</div>}\n      <div className=\"uxm-page-shell__body\">\n        {topBar && <div className=\"uxm-page-shell__top-bar\">{topBar}</div>}\n        <main className=\"uxm-page-shell__content\">{children}</main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAmCkB,cACZ,YADY;AAnClB,SAAS,UAAU;AAyBZ,SAAS,UAAU;AAAA,EACxB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE,qBAAC,SAAI,WAAW,GAAG,kBAAkB,mBAAmB,OAAO,IAAI,SAAS,GAAI,GAAG,MAChF;AAAA,eAAW,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,IAC9D,qBAAC,SAAI,WAAU,wBACZ;AAAA,gBAAU,oBAAC,SAAI,WAAU,2BAA2B,kBAAO;AAAA,MAC5D,oBAAC,UAAK,WAAU,2BAA2B,UAAS;AAAA,OACtD;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/ui/page-shell/page-shell.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type PageShellVariant = 'standard' | 'canvas';\n\nexport interface PageShellProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Layout variant — controls the content area only. The sidebar and top bar\n   * always render whatever you pass.\n   *\n   * - `standard`: padded, scrollable content area for normal product pages.\n   * - `canvas`: full-bleed, non-scrolling content area for diagram surfaces\n   *   and lifecycle modelers. Pass a lighter context-specific top bar\n   *   (Back + title + diagram actions) instead of the full AppTopBar.\n   */\n  variant?: PageShellVariant;\n  /** Left navigation. Typically <AppSidebar /> from @viax/uxm/ui. */\n  sidebar?: ReactNode;\n  /** Top header — anything you want, or omit/null to render no header. */\n  topBar?: ReactNode;\n  /** Page content. */\n  children: ReactNode;\n}\n\nexport function PageShell({\n  variant = 'standard',\n  sidebar,\n  topBar,\n  children,\n  className,\n  ...rest\n}: PageShellProps) {\n  return (\n    <div className={cn('uxm-page-shell', `uxm-page-shell--${variant}`, className)} {...rest}>\n      {sidebar && <div className=\"uxm-page-shell__sidebar\">{sidebar}</div>}\n      <div className=\"uxm-page-shell__body\">\n        {topBar && <div className=\"uxm-page-shell__top-bar\">{topBar}</div>}\n        <main className=\"uxm-page-shell__content\">{children}</main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAmCkB,cACZ,YADY;AAnClB,SAAS,UAAU;AAyBZ,SAAS,UAAU;AAAA,EACxB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE,qBAAC,SAAI,WAAW,GAAG,kBAAkB,mBAAmB,OAAO,IAAI,SAAS,GAAI,GAAG,MAChF;AAAA,eAAW,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,IAC9D,qBAAC,SAAI,WAAU,wBACZ;AAAA,gBAAU,oBAAC,SAAI,WAAU,2BAA2B,kBAAO;AAAA,MAC5D,oBAAC,UAAK,WAAU,2BAA2B,UAAS;AAAA,OACtD;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/range-slider/range-slider.cjs

@@ -36,7 +36,9 @@ function RangeSlider({
   unit,
   className,
   style,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  startLabel,
+  endLabel
 }) {
   const [start, end] = value;
   const range = max - min;
@@ -54,6 +56,8 @@ function RangeSlider({
     ["--uxm-range-slider-end"]: `${endPct}%`
   };
   const showAnyValues = showStart || showEnd || showRange;
+  const resolvedStartLabel = startLabel ?? (ariaLabel ? `${ariaLabel} (start)` : "Range start");
+  const resolvedEndLabel = endLabel ?? (ariaLabel ? `${ariaLabel} (end)` : "Range end");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_helpers.cn)("uxm-range-slider", className), style: mergedStyle, children: [
     showAnyValues && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-range-slider__values", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-range-slider__value uxm-range-slider__value--start", children: showStart ? `${start}${unit ?? ""}` : "" }),
@@ -72,7 +76,7 @@ function RangeSlider({
           step,
           disabled,
           onChange: (e) => handleStart(Number(e.target.value)),
-          "aria-label": ariaLabel ? `${ariaLabel} (start)` : "Range start"
+          "aria-label": resolvedStartLabel
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -86,7 +90,7 @@ function RangeSlider({
           step,
           disabled,
           onChange: (e) => handleEnd(Number(e.target.value)),
-          "aria-label": ariaLabel ? `${ariaLabel} (end)` : "Range end"
+          "aria-label": resolvedEndLabel
         }
       )
     ] })

package/dist/ui/range-slider/range-slider.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/range-slider/range-slider.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { CSSProperties } from 'react';\n\nexport interface RangeSliderProps {\n  /** [start, end] — start ≤ end always (the atom clamps on drag). */\n  value: [number, number];\n  onChange: (value: [number, number]) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Disable both thumbs and dim the wrapper via the shared --uxm-slider-disabled-opacity var. */\n  disabled?: boolean;\n  /** Show the start thumb's value above the slider (left-aligned). */\n  showStart?: boolean;\n  /** Show the end thumb's value above the slider (right-aligned). */\n  showEnd?: boolean;\n  /** Show the range (end − start) above the slider (centred). */\n  showRange?: boolean;\n  /** Optional unit shown alongside displayed values (e.g. \"px\"). */\n  unit?: string;\n  className?: string;\n  style?: CSSProperties;\n  'aria-label'?: string;\n}\n\n/**\n * Dual-thumb range slider — selects a sub-range [start, end] within\n * [min, max]. Built from two overlapped `<input type=\"range\">`\n * elements; each input's thumb is independently focusable, draggable,\n * and keyboard-navigable. The track is a shared CSS gradient that\n * paints the filled portion between the two thumbs.\n *\n * Shares the `<Slider>` atom's theming surface — `--uxm-slider-track-\n * color`, `--uxm-slider-accent-color`, `--uxm-slider-thumb-*`, etc.\n * — so editor saves on the Slider registry flow into both single and\n * range modes uniformly. Adds two range-specific gradient stops\n * (`--uxm-range-slider-start` / `-end`) that the atom computes inline\n * from the current value.\n *\n * Display options: `showStart` / `showEnd` / `showRange` toggle the\n * value labels above the slider. Off by default so the bare atom is\n * a pure track-and-thumbs control; consumers (or the editor preview)\n * opt in.\n */\nexport function RangeSlider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  showStart = false,\n  showEnd = false,\n  showRange = false,\n  unit,\n  className,\n  style,\n  'aria-label': ariaLabel,\n}: RangeSliderProps) {\n  const [start, end] = value;\n  const range = max - min;\n  const startPct = range > 0 ? ((start - min) / range) * 100 : 0;\n  const endPct = range > 0 ? ((end - min) / range) * 100 : 100;\n\n  // Clamp on drag so start can never overtake end (and vice versa).\n  // Without this, dragging the start thumb past the end would silently\n  // swap the tuple semantics — surprising for consumers that read\n  // `value[0]` as \"the lower bound.\"\n  const handleStart = (next: number) => {\n    onChange([Math.min(next, end), end]);\n  };\n  const handleEnd = (next: number) => {\n    onChange([start, Math.max(next, start)]);\n  };\n\n  const mergedStyle = {\n    ...style,\n    ['--uxm-range-slider-start' as string]: `${startPct}%`,\n    ['--uxm-range-slider-end' as string]: `${endPct}%`,\n  };\n\n  const showAnyValues = showStart || showEnd || showRange;\n\n  return (\n    <div className={cn('uxm-range-slider', className)} style={mergedStyle}>\n      {showAnyValues && (\n        <div className=\"uxm-range-slider__values\">\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--start\">\n            {showStart ? `${start}${unit ?? ''}` : ''}\n          </span>\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--range\">\n            {showRange ? `${end - start}${unit ?? ''}` : ''}\n          </span>\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--end\">\n            {showEnd ? `${end}${unit ?? ''}` : ''}\n          </span>\n        </div>\n      )}\n      <div className=\"uxm-range-slider__track\">\n        <input\n          type=\"range\"\n          className=\"uxm-range-slider__input uxm-range-slider__input--start\"\n          value={start}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          onChange={(e) => handleStart(Number(e.target.value))}\n          aria-label={ariaLabel ? `${ariaLabel} (start)` : 'Range start'}\n        />\n        <input\n          type=\"range\"\n          className=\"uxm-range-slider__input uxm-range-slider__input--end\"\n          value={end}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          onChange={(e) => handleEnd(Number(e.target.value))}\n          aria-label={ariaLabel ? `${ariaLabel} (end)` : 'Range end'}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuFQ;AAvFR,qBAAmB;AA6CZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAAqB;AACnB,QAAM,CAAC,OAAO,GAAG,IAAI;AACrB,QAAM,QAAQ,MAAM;AACpB,QAAM,WAAW,QAAQ,KAAM,QAAQ,OAAO,QAAS,MAAM;AAC7D,QAAM,SAAS,QAAQ,KAAM,MAAM,OAAO,QAAS,MAAM;AAMzD,QAAM,cAAc,CAAC,SAAiB;AACpC,aAAS,CAAC,KAAK,IAAI,MAAM,GAAG,GAAG,GAAG,CAAC;AAAA,EACrC;AACA,QAAM,YAAY,CAAC,SAAiB;AAClC,aAAS,CAAC,OAAO,KAAK,IAAI,MAAM,KAAK,CAAC,CAAC;AAAA,EACzC;AAEA,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,CAAC,0BAAoC,GAAG,GAAG,QAAQ;AAAA,IACnD,CAAC,wBAAkC,GAAG,GAAG,MAAM;AAAA,EACjD;AAEA,QAAM,gBAAgB,aAAa,WAAW;AAE9C,SACE,6CAAC,SAAI,eAAW,mBAAG,oBAAoB,SAAS,GAAG,OAAO,aACvD;AAAA,qBACC,6CAAC,SAAI,WAAU,4BACb;AAAA,kDAAC,UAAK,WAAU,0DACb,sBAAY,GAAG,KAAK,GAAG,QAAQ,EAAE,KAAK,IACzC;AAAA,MACA,4CAAC,UAAK,WAAU,0DACb,sBAAY,GAAG,MAAM,KAAK,GAAG,QAAQ,EAAE,KAAK,IAC/C;AAAA,MACA,4CAAC,UAAK,WAAU,wDACb,oBAAU,GAAG,GAAG,GAAG,QAAQ,EAAE,KAAK,IACrC;AAAA,OACF;AAAA,IAEF,6CAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,CAAC,MAAM,YAAY,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UACnD,cAAY,YAAY,GAAG,SAAS,aAAa;AAAA;AAAA,MACnD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,CAAC,MAAM,UAAU,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UACjD,cAAY,YAAY,GAAG,SAAS,WAAW;AAAA;AAAA,MACjD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/ui/range-slider/range-slider.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { CSSProperties } from 'react';\n\nexport interface RangeSliderProps {\n  /** [start, end] — start ≤ end always (the atom clamps on drag). */\n  value: [number, number];\n  onChange: (value: [number, number]) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Disable both thumbs and dim the wrapper via the shared --uxm-slider-disabled-opacity var. */\n  disabled?: boolean;\n  /** Show the start thumb's value above the slider (left-aligned). */\n  showStart?: boolean;\n  /** Show the end thumb's value above the slider (right-aligned). */\n  showEnd?: boolean;\n  /** Show the range (end − start) above the slider (centred). */\n  showRange?: boolean;\n  /** Optional unit shown alongside displayed values (e.g. \"px\"). */\n  unit?: string;\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Names the control as a whole. Each thumb derives its own name from this\n   * by appending `\" (start)\"` / `\" (end)\"` — English word order baked in, so\n   * translate via `startLabel` / `endLabel` instead of relying on the suffix.\n   */\n  'aria-label'?: string;\n  /**\n   * Accessible name for the lower thumb, used verbatim. Defaults to\n   * `` `${aria-label} (start)` `` when `aria-label` is set, else\n   * `\"Range start\"`.\n   */\n  startLabel?: string;\n  /**\n   * Accessible name for the upper thumb, used verbatim. Defaults to\n   * `` `${aria-label} (end)` `` when `aria-label` is set, else `\"Range end\"`.\n   */\n  endLabel?: string;\n}\n\n/**\n * Dual-thumb range slider — selects a sub-range [start, end] within\n * [min, max]. Built from two overlapped `<input type=\"range\">`\n * elements; each input's thumb is independently focusable, draggable,\n * and keyboard-navigable. The track is a shared CSS gradient that\n * paints the filled portion between the two thumbs.\n *\n * Shares the `<Slider>` atom's theming surface — `--uxm-slider-track-\n * color`, `--uxm-slider-accent-color`, `--uxm-slider-thumb-*`, etc.\n * — so editor saves on the Slider registry flow into both single and\n * range modes uniformly. Adds two range-specific gradient stops\n * (`--uxm-range-slider-start` / `-end`) that the atom computes inline\n * from the current value.\n *\n * Display options: `showStart` / `showEnd` / `showRange` toggle the\n * value labels above the slider. Off by default so the bare atom is\n * a pure track-and-thumbs control; consumers (or the editor preview)\n * opt in.\n */\nexport function RangeSlider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  showStart = false,\n  showEnd = false,\n  showRange = false,\n  unit,\n  className,\n  style,\n  'aria-label': ariaLabel,\n  startLabel,\n  endLabel,\n}: RangeSliderProps) {\n  const [start, end] = value;\n  const range = max - min;\n  const startPct = range > 0 ? ((start - min) / range) * 100 : 0;\n  const endPct = range > 0 ? ((end - min) / range) * 100 : 100;\n\n  // Clamp on drag so start can never overtake end (and vice versa).\n  // Without this, dragging the start thumb past the end would silently\n  // swap the tuple semantics — surprising for consumers that read\n  // `value[0]` as \"the lower bound.\"\n  const handleStart = (next: number) => {\n    onChange([Math.min(next, end), end]);\n  };\n  const handleEnd = (next: number) => {\n    onChange([start, Math.max(next, start)]);\n  };\n\n  const mergedStyle = {\n    ...style,\n    ['--uxm-range-slider-start' as string]: `${startPct}%`,\n    ['--uxm-range-slider-end' as string]: `${endPct}%`,\n  };\n\n  const showAnyValues = showStart || showEnd || showRange;\n\n  // Two thumbs on one control need two distinct names, and the composed\n  // default only works in English — \"(start)\" trailing a noun is not how\n  // every language qualifies it. `startLabel` / `endLabel` therefore replace\n  // the whole name rather than the suffix.\n  const resolvedStartLabel = startLabel ?? (ariaLabel ? `${ariaLabel} (start)` : 'Range start');\n  const resolvedEndLabel = endLabel ?? (ariaLabel ? `${ariaLabel} (end)` : 'Range end');\n\n  return (\n    <div className={cn('uxm-range-slider', className)} style={mergedStyle}>\n      {showAnyValues && (\n        <div className=\"uxm-range-slider__values\">\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--start\">\n            {showStart ? `${start}${unit ?? ''}` : ''}\n          </span>\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--range\">\n            {showRange ? `${end - start}${unit ?? ''}` : ''}\n          </span>\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--end\">\n            {showEnd ? `${end}${unit ?? ''}` : ''}\n          </span>\n        </div>\n      )}\n      <div className=\"uxm-range-slider__track\">\n        <input\n          type=\"range\"\n          className=\"uxm-range-slider__input uxm-range-slider__input--start\"\n          value={start}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          onChange={(e) => handleStart(Number(e.target.value))}\n          aria-label={resolvedStartLabel}\n        />\n        <input\n          type=\"range\"\n          className=\"uxm-range-slider__input uxm-range-slider__input--end\"\n          value={end}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          onChange={(e) => handleEnd(Number(e.target.value))}\n          aria-label={resolvedEndLabel}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgHQ;AAhHR,qBAAmB;AA6DZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,OAAO,GAAG,IAAI;AACrB,QAAM,QAAQ,MAAM;AACpB,QAAM,WAAW,QAAQ,KAAM,QAAQ,OAAO,QAAS,MAAM;AAC7D,QAAM,SAAS,QAAQ,KAAM,MAAM,OAAO,QAAS,MAAM;AAMzD,QAAM,cAAc,CAAC,SAAiB;AACpC,aAAS,CAAC,KAAK,IAAI,MAAM,GAAG,GAAG,GAAG,CAAC;AAAA,EACrC;AACA,QAAM,YAAY,CAAC,SAAiB;AAClC,aAAS,CAAC,OAAO,KAAK,IAAI,MAAM,KAAK,CAAC,CAAC;AAAA,EACzC;AAEA,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,CAAC,0BAAoC,GAAG,GAAG,QAAQ;AAAA,IACnD,CAAC,wBAAkC,GAAG,GAAG,MAAM;AAAA,EACjD;AAEA,QAAM,gBAAgB,aAAa,WAAW;AAM9C,QAAM,qBAAqB,eAAe,YAAY,GAAG,SAAS,aAAa;AAC/E,QAAM,mBAAmB,aAAa,YAAY,GAAG,SAAS,WAAW;AAEzE,SACE,6CAAC,SAAI,eAAW,mBAAG,oBAAoB,SAAS,GAAG,OAAO,aACvD;AAAA,qBACC,6CAAC,SAAI,WAAU,4BACb;AAAA,kDAAC,UAAK,WAAU,0DACb,sBAAY,GAAG,KAAK,GAAG,QAAQ,EAAE,KAAK,IACzC;AAAA,MACA,4CAAC,UAAK,WAAU,0DACb,sBAAY,GAAG,MAAM,KAAK,GAAG,QAAQ,EAAE,KAAK,IAC/C;AAAA,MACA,4CAAC,UAAK,WAAU,wDACb,oBAAU,GAAG,GAAG,GAAG,QAAQ,EAAE,KAAK,IACrC;AAAA,OACF;AAAA,IAEF,6CAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,CAAC,MAAM,YAAY,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UACnD,cAAY;AAAA;AAAA,MACd;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,CAAC,MAAM,UAAU,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UACjD,cAAY;AAAA;AAAA,MACd;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/range-slider/range-slider.d.ts

@@ -18,7 +18,23 @@ export interface RangeSliderProps {
     unit?: string;
     className?: string;
     style?: CSSProperties;
+    /**
+     * Names the control as a whole. Each thumb derives its own name from this
+     * by appending `" (start)"` / `" (end)"` — English word order baked in, so
+     * translate via `startLabel` / `endLabel` instead of relying on the suffix.
+     */
     'aria-label'?: string;
+    /**
+     * Accessible name for the lower thumb, used verbatim. Defaults to
+     * `` `${aria-label} (start)` `` when `aria-label` is set, else
+     * `"Range start"`.
+     */
+    startLabel?: string;
+    /**
+     * Accessible name for the upper thumb, used verbatim. Defaults to
+     * `` `${aria-label} (end)` `` when `aria-label` is set, else `"Range end"`.
+     */
+    endLabel?: string;
 }
 /**
  * Dual-thumb range slider — selects a sub-range [start, end] within
@@ -39,5 +55,5 @@ export interface RangeSliderProps {
  * a pure track-and-thumbs control; consumers (or the editor preview)
  * opt in.
  */
-export declare function RangeSlider({ value, onChange, min, max, step, disabled, showStart, showEnd, showRange, unit, className, style, 'aria-label': ariaLabel, }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function RangeSlider({ value, onChange, min, max, step, disabled, showStart, showEnd, showRange, unit, className, style, 'aria-label': ariaLabel, startLabel, endLabel, }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=range-slider.d.ts.map

package/dist/ui/range-slider/range-slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-slider.d.ts","sourceRoot":"","sources":["../../../src/ui/range-slider/range-slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,gBAAgB;IAC/B,mEAAmE;IACnE,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,GAAO,EACP,GAAS,EACT,IAAQ,EACR,QAAgB,EAChB,SAAiB,EACjB,OAAe,EACf,SAAiB,EACjB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,GACxB,EAAE,gBAAgB,2CAkElB"}
+{"version":3,"file":"range-slider.d.ts","sourceRoot":"","sources":["../../../src/ui/range-slider/range-slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,gBAAgB;IAC/B,mEAAmE;IACnE,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,GAAO,EACP,GAAS,EACT,IAAQ,EACR,QAAgB,EAChB,SAAiB,EACjB,OAAe,EACf,SAAiB,EACjB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,UAAU,EACV,QAAQ,GACT,EAAE,gBAAgB,2CAyElB"}

package/dist/ui/range-slider/range-slider.js

@@ -13,7 +13,9 @@ function RangeSlider({
   unit,
   className,
   style,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  startLabel,
+  endLabel
 }) {
   const [start, end] = value;
   const range = max - min;
@@ -31,6 +33,8 @@ function RangeSlider({
     ["--uxm-range-slider-end"]: `${endPct}%`
   };
   const showAnyValues = showStart || showEnd || showRange;
+  const resolvedStartLabel = startLabel ?? (ariaLabel ? `${ariaLabel} (start)` : "Range start");
+  const resolvedEndLabel = endLabel ?? (ariaLabel ? `${ariaLabel} (end)` : "Range end");
   return /* @__PURE__ */ jsxs("div", { className: cn("uxm-range-slider", className), style: mergedStyle, children: [
     showAnyValues && /* @__PURE__ */ jsxs("div", { className: "uxm-range-slider__values", children: [
       /* @__PURE__ */ jsx("span", { className: "uxm-range-slider__value uxm-range-slider__value--start", children: showStart ? `${start}${unit ?? ""}` : "" }),
@@ -49,7 +53,7 @@ function RangeSlider({
           step,
           disabled,
           onChange: (e) => handleStart(Number(e.target.value)),
-          "aria-label": ariaLabel ? `${ariaLabel} (start)` : "Range start"
+          "aria-label": resolvedStartLabel
         }
       ),
       /* @__PURE__ */ jsx(
@@ -63,7 +67,7 @@ function RangeSlider({
           step,
           disabled,
           onChange: (e) => handleEnd(Number(e.target.value)),
-          "aria-label": ariaLabel ? `${ariaLabel} (end)` : "Range end"
+          "aria-label": resolvedEndLabel
         }
       )
     ] })

package/dist/ui/range-slider/range-slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/range-slider/range-slider.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { CSSProperties } from 'react';\n\nexport interface RangeSliderProps {\n  /** [start, end] — start ≤ end always (the atom clamps on drag). */\n  value: [number, number];\n  onChange: (value: [number, number]) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Disable both thumbs and dim the wrapper via the shared --uxm-slider-disabled-opacity var. */\n  disabled?: boolean;\n  /** Show the start thumb's value above the slider (left-aligned). */\n  showStart?: boolean;\n  /** Show the end thumb's value above the slider (right-aligned). */\n  showEnd?: boolean;\n  /** Show the range (end − start) above the slider (centred). */\n  showRange?: boolean;\n  /** Optional unit shown alongside displayed values (e.g. \"px\"). */\n  unit?: string;\n  className?: string;\n  style?: CSSProperties;\n  'aria-label'?: string;\n}\n\n/**\n * Dual-thumb range slider — selects a sub-range [start, end] within\n * [min, max]. Built from two overlapped `<input type=\"range\">`\n * elements; each input's thumb is independently focusable, draggable,\n * and keyboard-navigable. The track is a shared CSS gradient that\n * paints the filled portion between the two thumbs.\n *\n * Shares the `<Slider>` atom's theming surface — `--uxm-slider-track-\n * color`, `--uxm-slider-accent-color`, `--uxm-slider-thumb-*`, etc.\n * — so editor saves on the Slider registry flow into both single and\n * range modes uniformly. Adds two range-specific gradient stops\n * (`--uxm-range-slider-start` / `-end`) that the atom computes inline\n * from the current value.\n *\n * Display options: `showStart` / `showEnd` / `showRange` toggle the\n * value labels above the slider. Off by default so the bare atom is\n * a pure track-and-thumbs control; consumers (or the editor preview)\n * opt in.\n */\nexport function RangeSlider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  showStart = false,\n  showEnd = false,\n  showRange = false,\n  unit,\n  className,\n  style,\n  'aria-label': ariaLabel,\n}: RangeSliderProps) {\n  const [start, end] = value;\n  const range = max - min;\n  const startPct = range > 0 ? ((start - min) / range) * 100 : 0;\n  const endPct = range > 0 ? ((end - min) / range) * 100 : 100;\n\n  // Clamp on drag so start can never overtake end (and vice versa).\n  // Without this, dragging the start thumb past the end would silently\n  // swap the tuple semantics — surprising for consumers that read\n  // `value[0]` as \"the lower bound.\"\n  const handleStart = (next: number) => {\n    onChange([Math.min(next, end), end]);\n  };\n  const handleEnd = (next: number) => {\n    onChange([start, Math.max(next, start)]);\n  };\n\n  const mergedStyle = {\n    ...style,\n    ['--uxm-range-slider-start' as string]: `${startPct}%`,\n    ['--uxm-range-slider-end' as string]: `${endPct}%`,\n  };\n\n  const showAnyValues = showStart || showEnd || showRange;\n\n  return (\n    <div className={cn('uxm-range-slider', className)} style={mergedStyle}>\n      {showAnyValues && (\n        <div className=\"uxm-range-slider__values\">\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--start\">\n            {showStart ? `${start}${unit ?? ''}` : ''}\n          </span>\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--range\">\n            {showRange ? `${end - start}${unit ?? ''}` : ''}\n          </span>\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--end\">\n            {showEnd ? `${end}${unit ?? ''}` : ''}\n          </span>\n        </div>\n      )}\n      <div className=\"uxm-range-slider__track\">\n        <input\n          type=\"range\"\n          className=\"uxm-range-slider__input uxm-range-slider__input--start\"\n          value={start}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          onChange={(e) => handleStart(Number(e.target.value))}\n          aria-label={ariaLabel ? `${ariaLabel} (start)` : 'Range start'}\n        />\n        <input\n          type=\"range\"\n          className=\"uxm-range-slider__input uxm-range-slider__input--end\"\n          value={end}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          onChange={(e) => handleEnd(Number(e.target.value))}\n          aria-label={ariaLabel ? `${ariaLabel} (end)` : 'Range end'}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAuFQ,SACE,KADF;AAvFR,SAAS,UAAU;AA6CZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAAqB;AACnB,QAAM,CAAC,OAAO,GAAG,IAAI;AACrB,QAAM,QAAQ,MAAM;AACpB,QAAM,WAAW,QAAQ,KAAM,QAAQ,OAAO,QAAS,MAAM;AAC7D,QAAM,SAAS,QAAQ,KAAM,MAAM,OAAO,QAAS,MAAM;AAMzD,QAAM,cAAc,CAAC,SAAiB;AACpC,aAAS,CAAC,KAAK,IAAI,MAAM,GAAG,GAAG,GAAG,CAAC;AAAA,EACrC;AACA,QAAM,YAAY,CAAC,SAAiB;AAClC,aAAS,CAAC,OAAO,KAAK,IAAI,MAAM,KAAK,CAAC,CAAC;AAAA,EACzC;AAEA,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,CAAC,0BAAoC,GAAG,GAAG,QAAQ;AAAA,IACnD,CAAC,wBAAkC,GAAG,GAAG,MAAM;AAAA,EACjD;AAEA,QAAM,gBAAgB,aAAa,WAAW;AAE9C,SACE,qBAAC,SAAI,WAAW,GAAG,oBAAoB,SAAS,GAAG,OAAO,aACvD;AAAA,qBACC,qBAAC,SAAI,WAAU,4BACb;AAAA,0BAAC,UAAK,WAAU,0DACb,sBAAY,GAAG,KAAK,GAAG,QAAQ,EAAE,KAAK,IACzC;AAAA,MACA,oBAAC,UAAK,WAAU,0DACb,sBAAY,GAAG,MAAM,KAAK,GAAG,QAAQ,EAAE,KAAK,IAC/C;AAAA,MACA,oBAAC,UAAK,WAAU,wDACb,oBAAU,GAAG,GAAG,GAAG,QAAQ,EAAE,KAAK,IACrC;AAAA,OACF;AAAA,IAEF,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,CAAC,MAAM,YAAY,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UACnD,cAAY,YAAY,GAAG,SAAS,aAAa;AAAA;AAAA,MACnD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,CAAC,MAAM,UAAU,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UACjD,cAAY,YAAY,GAAG,SAAS,WAAW;AAAA;AAAA,MACjD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/ui/range-slider/range-slider.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { CSSProperties } from 'react';\n\nexport interface RangeSliderProps {\n  /** [start, end] — start ≤ end always (the atom clamps on drag). */\n  value: [number, number];\n  onChange: (value: [number, number]) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Disable both thumbs and dim the wrapper via the shared --uxm-slider-disabled-opacity var. */\n  disabled?: boolean;\n  /** Show the start thumb's value above the slider (left-aligned). */\n  showStart?: boolean;\n  /** Show the end thumb's value above the slider (right-aligned). */\n  showEnd?: boolean;\n  /** Show the range (end − start) above the slider (centred). */\n  showRange?: boolean;\n  /** Optional unit shown alongside displayed values (e.g. \"px\"). */\n  unit?: string;\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Names the control as a whole. Each thumb derives its own name from this\n   * by appending `\" (start)\"` / `\" (end)\"` — English word order baked in, so\n   * translate via `startLabel` / `endLabel` instead of relying on the suffix.\n   */\n  'aria-label'?: string;\n  /**\n   * Accessible name for the lower thumb, used verbatim. Defaults to\n   * `` `${aria-label} (start)` `` when `aria-label` is set, else\n   * `\"Range start\"`.\n   */\n  startLabel?: string;\n  /**\n   * Accessible name for the upper thumb, used verbatim. Defaults to\n   * `` `${aria-label} (end)` `` when `aria-label` is set, else `\"Range end\"`.\n   */\n  endLabel?: string;\n}\n\n/**\n * Dual-thumb range slider — selects a sub-range [start, end] within\n * [min, max]. Built from two overlapped `<input type=\"range\">`\n * elements; each input's thumb is independently focusable, draggable,\n * and keyboard-navigable. The track is a shared CSS gradient that\n * paints the filled portion between the two thumbs.\n *\n * Shares the `<Slider>` atom's theming surface — `--uxm-slider-track-\n * color`, `--uxm-slider-accent-color`, `--uxm-slider-thumb-*`, etc.\n * — so editor saves on the Slider registry flow into both single and\n * range modes uniformly. Adds two range-specific gradient stops\n * (`--uxm-range-slider-start` / `-end`) that the atom computes inline\n * from the current value.\n *\n * Display options: `showStart` / `showEnd` / `showRange` toggle the\n * value labels above the slider. Off by default so the bare atom is\n * a pure track-and-thumbs control; consumers (or the editor preview)\n * opt in.\n */\nexport function RangeSlider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  showStart = false,\n  showEnd = false,\n  showRange = false,\n  unit,\n  className,\n  style,\n  'aria-label': ariaLabel,\n  startLabel,\n  endLabel,\n}: RangeSliderProps) {\n  const [start, end] = value;\n  const range = max - min;\n  const startPct = range > 0 ? ((start - min) / range) * 100 : 0;\n  const endPct = range > 0 ? ((end - min) / range) * 100 : 100;\n\n  // Clamp on drag so start can never overtake end (and vice versa).\n  // Without this, dragging the start thumb past the end would silently\n  // swap the tuple semantics — surprising for consumers that read\n  // `value[0]` as \"the lower bound.\"\n  const handleStart = (next: number) => {\n    onChange([Math.min(next, end), end]);\n  };\n  const handleEnd = (next: number) => {\n    onChange([start, Math.max(next, start)]);\n  };\n\n  const mergedStyle = {\n    ...style,\n    ['--uxm-range-slider-start' as string]: `${startPct}%`,\n    ['--uxm-range-slider-end' as string]: `${endPct}%`,\n  };\n\n  const showAnyValues = showStart || showEnd || showRange;\n\n  // Two thumbs on one control need two distinct names, and the composed\n  // default only works in English — \"(start)\" trailing a noun is not how\n  // every language qualifies it. `startLabel` / `endLabel` therefore replace\n  // the whole name rather than the suffix.\n  const resolvedStartLabel = startLabel ?? (ariaLabel ? `${ariaLabel} (start)` : 'Range start');\n  const resolvedEndLabel = endLabel ?? (ariaLabel ? `${ariaLabel} (end)` : 'Range end');\n\n  return (\n    <div className={cn('uxm-range-slider', className)} style={mergedStyle}>\n      {showAnyValues && (\n        <div className=\"uxm-range-slider__values\">\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--start\">\n            {showStart ? `${start}${unit ?? ''}` : ''}\n          </span>\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--range\">\n            {showRange ? `${end - start}${unit ?? ''}` : ''}\n          </span>\n          <span className=\"uxm-range-slider__value uxm-range-slider__value--end\">\n            {showEnd ? `${end}${unit ?? ''}` : ''}\n          </span>\n        </div>\n      )}\n      <div className=\"uxm-range-slider__track\">\n        <input\n          type=\"range\"\n          className=\"uxm-range-slider__input uxm-range-slider__input--start\"\n          value={start}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          onChange={(e) => handleStart(Number(e.target.value))}\n          aria-label={resolvedStartLabel}\n        />\n        <input\n          type=\"range\"\n          className=\"uxm-range-slider__input uxm-range-slider__input--end\"\n          value={end}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          onChange={(e) => handleEnd(Number(e.target.value))}\n          aria-label={resolvedEndLabel}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAgHQ,SACE,KADF;AAhHR,SAAS,UAAU;AA6DZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,OAAO,GAAG,IAAI;AACrB,QAAM,QAAQ,MAAM;AACpB,QAAM,WAAW,QAAQ,KAAM,QAAQ,OAAO,QAAS,MAAM;AAC7D,QAAM,SAAS,QAAQ,KAAM,MAAM,OAAO,QAAS,MAAM;AAMzD,QAAM,cAAc,CAAC,SAAiB;AACpC,aAAS,CAAC,KAAK,IAAI,MAAM,GAAG,GAAG,GAAG,CAAC;AAAA,EACrC;AACA,QAAM,YAAY,CAAC,SAAiB;AAClC,aAAS,CAAC,OAAO,KAAK,IAAI,MAAM,KAAK,CAAC,CAAC;AAAA,EACzC;AAEA,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,CAAC,0BAAoC,GAAG,GAAG,QAAQ;AAAA,IACnD,CAAC,wBAAkC,GAAG,GAAG,MAAM;AAAA,EACjD;AAEA,QAAM,gBAAgB,aAAa,WAAW;AAM9C,QAAM,qBAAqB,eAAe,YAAY,GAAG,SAAS,aAAa;AAC/E,QAAM,mBAAmB,aAAa,YAAY,GAAG,SAAS,WAAW;AAEzE,SACE,qBAAC,SAAI,WAAW,GAAG,oBAAoB,SAAS,GAAG,OAAO,aACvD;AAAA,qBACC,qBAAC,SAAI,WAAU,4BACb;AAAA,0BAAC,UAAK,WAAU,0DACb,sBAAY,GAAG,KAAK,GAAG,QAAQ,EAAE,KAAK,IACzC;AAAA,MACA,oBAAC,UAAK,WAAU,0DACb,sBAAY,GAAG,MAAM,KAAK,GAAG,QAAQ,EAAE,KAAK,IAC/C;AAAA,MACA,oBAAC,UAAK,WAAU,wDACb,oBAAU,GAAG,GAAG,GAAG,QAAQ,EAAE,KAAK,IACrC;AAAA,OACF;AAAA,IAEF,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,CAAC,MAAM,YAAY,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UACnD,cAAY;AAAA;AAAA,MACd;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,CAAC,MAAM,UAAU,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UACjD,cAAY;AAAA;AAAA,MACd;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/styles.css

@@ -1,4 +1,4 @@
-/* @viax.io/uxm — default styles aggregator.
+/* @viax/uxm — default styles aggregator.
    Each @import below pulls a single component's CSS from its folder.
    Cascade order matches the original monolithic styles.css. */
 
@@ -48,6 +48,7 @@
 @import "./inline-filter/inline-filter.css";
 @import "./input-with-icon/input-with-icon.css";
 @import "./input/input.css";
+@import "./language-switcher/language-switcher.css";
 @import "./lifecycle-connector/lifecycle-connector.css";
 @import "./lifecycle-drop-slot/lifecycle-drop-slot.css";
 @import "./lifecycle-edge-label/lifecycle-edge-label.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viax.io/uxm",
-  "version": "4.36.0",
+  "version": "4.37.0",
   "description": "Viax UXM — React 19 UI primitives and design tokens.",
   "license": "UNLICENSED",
   "private": false,
@@ -65,7 +65,6 @@
     "test:ci": "echo 'no tests yet' && exit 0",
     "test:coverage": "echo 'no coverage yet' && exit 0",
     "commit": "cz",
-    "prepare": "husky",
     "prepublishOnly": "npm run build",
     "check:type-scale": "node scripts/sweep-type-scale.mjs --check",
     "verify:type-scale": "node scripts/verify-type-scale.mjs origin/master"
@@ -92,7 +91,7 @@
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^12.0.9",
+    "@semantic-release/gitlab": "^13.3.2",
     "@semantic-release/npm": "^13.1.5",
     "@semantic-release/release-notes-generator": "^14.1.1",
     "@tailwindcss/cli": "^4.0.0",
@@ -126,9 +125,9 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/viax-io/uxm.git"
+    "url": "https://gitlab.viax.tech/services-viax/uxm.git"
   },
   "engines": {
-    "node": ">=22.14.0"
+    "node": ">=20"
   }
 }