@viax.io/uxm 4.36.0 → 4.37.0

package/dist/ui/language-switcher/language-switcher-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/language-switcher/language-switcher-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Icon, LanguageSwitcher } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/** A spread of scripts — Latin, Cyrillic, CJK — so the endonym rendering and\n *  the trigger's width behaviour are both visible at a glance. */\nconst DEMO_LOCALES = ['en-US', 'de-DE', 'uk-UA', 'fr-FR', 'ja-JP', 'pl-PL'];\n\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-language-switcher-bg': styles.bg as string,\n    '--uxm-language-switcher-border-color': styles.borderColor as string,\n    '--uxm-language-switcher-radius': `${styles.radius}px`,\n    '--uxm-language-switcher-color': styles.color as string,\n    '--uxm-language-switcher-font-size': `${styles.fontSize}px`,\n    '--uxm-language-switcher-gap': `${styles.gap}px`,\n    '--uxm-language-switcher-padding-x': `${styles.paddingX}px`,\n    '--uxm-language-switcher-padding-y': `${styles.paddingY}px`,\n    '--uxm-language-switcher-hover-bg': styles.hoverBg as string,\n    '--uxm-language-switcher-hover-border-color': styles.hoverBorderColor as string,\n    '--uxm-language-switcher-open-bg': styles.openBg as string,\n    '--uxm-language-switcher-open-border-color': styles.openBorderColor as string,\n    '--uxm-language-switcher-focus-ring': styles.focusRing as string,\n    '--uxm-language-switcher-caret-color': styles.caretColor as string,\n    '--uxm-language-switcher-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n  } as CSSProperties;\n}\n\n/**\n * Static showcase — hand-rendered trigger markup, not the real atom.\n *\n * The atom routes `className` to the Listbox root and exposes no hook onto the\n * trigger, so the `--state-*` forced modifier cannot be projected through it\n * (same reason ButtonGroup's preview hand-renders). Inert: `pointer-events:\n * none` stops the production `:hover` firing on mouse-over and `tabIndex={-1}`\n * keeps it out of the focus order, so a real Tab press cannot override the\n * forced state being demonstrated.\n */\nfunction StaticShowcase({ state, variant }: { state: string; variant: 'full' | 'compact' }) {\n  return (\n    <div className=\"uxm-language-switcher\" style={{ pointerEvents: 'none' }}>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        className={cn(\n          'uxm-language-switcher__trigger',\n          `uxm-language-switcher__trigger--${variant}`,\n          state !== 'default' && `uxm-language-switcher__trigger--state-${state}`,\n        )}\n      >\n        <Icon glyph=\"globe\" size={16} />\n        {variant === 'full' && <span className=\"uxm-language-switcher__current\">Deutsch</span>}\n        <span className=\"uxm-language-switcher__caret\">\n          <Icon\n            glyph=\"chevron-down\"\n            size={12}\n            strokeWidth={2.2}\n            style={{ transform: state === 'open' ? 'rotate(180deg)' : 'none' }}\n          />\n        </span>\n      </button>\n    </div>\n  );\n}\n\nexport function LanguageSwitcherPreview({ styles, variants }: PreviewProps) {\n  const variant = ((variants.variant as string) ?? 'full') as 'full' | 'compact';\n  const state = (variants.state as string) ?? 'default';\n  const [locale, setLocale] = useState('en-US');\n  const cssVars = buildVars(styles);\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>\n          {variant} · {state} state\n        </div>\n        <StaticShowcase state={state} variant={variant} />\n      </div>\n\n      {/* Live instance — the real atom, exercising the production :hover /\n          :focus-visible / open rules through the same projected vars. */}\n      <div>\n        <div style={sectionLabel}>interactive</div>\n        <LanguageSwitcher\n          locales={DEMO_LOCALES}\n          value={locale}\n          onChange={setLocale}\n          variant={variant}\n          disabled={state === 'disabled'}\n        />\n      </div>\n\n      {/* The zero-cost-absence rule, shown rather than described: the same atom\n          with a single configured locale emits nothing. A realm with one\n          language depends on this, and it is easy to regress into a disabled\n          control, so it earns a slot. */}\n      <div>\n        <div style={sectionLabel}>one locale configured → renders nothing</div>\n        <div\n          style={{\n            border: '1px dashed var(--color-border)',\n            borderRadius: 8,\n            padding: 12,\n            fontSize: 12,\n            color: 'var(--color-text-muted)',\n          }}\n        >\n          <LanguageSwitcher locales={['en-US']} value=\"en-US\" onChange={() => {}} />\n          (empty — no wrapper, no disabled control)\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/language-switcher/language-switcher.cjs

@@ -0,0 +1,127 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var language_switcher_exports = {};
+__export(language_switcher_exports, {
+  LanguageSwitcher: () => LanguageSwitcher
+});
+module.exports = __toCommonJS(language_switcher_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_listbox = require("../listbox/index.cjs");
+function endonym(locale, withRegion) {
+  const base = locale.split("-")[0];
+  try {
+    const display = new Intl.DisplayNames([locale], { type: "language" });
+    const name = display.of(withRegion ? locale : base);
+    if (!name || name === locale || name === base) return locale;
+    return name.charAt(0).toLocaleUpperCase(locale) + name.slice(1);
+  } catch {
+    return locale;
+  }
+}
+function buildLabels(locales) {
+  const perBase = /* @__PURE__ */ new Map();
+  for (const locale of locales) {
+    const base = locale.split("-")[0];
+    perBase.set(base, (perBase.get(base) ?? 0) + 1);
+  }
+  return new Map(
+    locales.map((locale) => [
+      locale,
+      endonym(locale, (perBase.get(locale.split("-")[0]) ?? 0) > 1)
+    ])
+  );
+}
+function LanguageSwitcher({
+  locales,
+  value,
+  onChange,
+  getLabel,
+  variant = "full",
+  label = "Language",
+  searchLabel = "Search languages",
+  searchable = "auto",
+  disabled = false,
+  className,
+  style
+}) {
+  const items = (0, import_react.useMemo)(() => {
+    const labels = getLabel ? null : buildLabels(locales);
+    return locales.map((locale) => ({
+      locale,
+      label: getLabel ? getLabel(locale) : labels.get(locale) ?? locale
+    }));
+  }, [locales, getLabel]);
+  if (locales.length <= 1) return null;
+  const selected = items.find((item) => item.locale === value) ?? null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_listbox.Listbox,
+    {
+      items,
+      getKey: (item) => item.locale,
+      getLabel: (item) => item.label,
+      value: selected,
+      onChange: (next) => next && onChange(next.locale),
+      disabled,
+      searchable,
+      searchPlaceholder: searchLabel,
+      searchAriaLabel: searchLabel,
+      matchAnchorWidth: false,
+      minPanelWidth: 180,
+      placement: "bottom-end",
+      className: (0, import_helpers.cn)("uxm-language-switcher", className),
+      "aria-label": label,
+      renderTrigger: ({ open, triggerProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          ...triggerProps,
+          type: "button",
+          className: (0, import_helpers.cn)(
+            "uxm-language-switcher__trigger",
+            `uxm-language-switcher__trigger--${variant}`,
+            open && "uxm-language-switcher__trigger--open"
+          ),
+          style,
+          "aria-label": label,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "globe", size: 16, "aria-hidden": "true" }),
+            variant === "full" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-language-switcher__current", children: selected?.label ?? value }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-language-switcher__caret", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icon.Icon,
+              {
+                glyph: "chevron-down",
+                size: 12,
+                strokeWidth: 2.2,
+                style: { transform: open ? "rotate(180deg)" : "none" }
+              }
+            ) })
+          ]
+        }
+      ),
+      renderItem: (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-language-switcher__row", lang: item.locale, children: item.label })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LanguageSwitcher
+});
+//# sourceMappingURL=language-switcher.cjs.map

package/dist/ui/language-switcher/language-switcher.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/language-switcher/language-switcher.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\nimport { Listbox } from '../listbox';\n\nimport type { CSSProperties } from 'react';\n\nexport type LanguageSwitcherVariant = 'full' | 'compact';\n\nexport interface LanguageSwitcherProps {\n  /**\n   * BCP-47 tags the app offers, e.g. `[\"en-US\", \"de-DE\"]`.\n   *\n   * **The consumer supplies this — the atom never fetches it.** In a viax\n   * portal it comes from the realm's `getSupportedLocales`; the library has no\n   * data layer and must not grow one.\n   *\n   * When this holds **one entry or none, the component renders `null`** — not a\n   * disabled control, not a hidden one. Nothing is emitted, so a single-locale\n   * app pays zero layout cost.\n   */\n  locales: string[];\n  /** The currently selected tag. Must be one of `locales`. Controlled. */\n  value: string;\n  /** Fires with the picked BCP-47 tag. */\n  onChange: (locale: string) => void;\n  /**\n   * Override the label shown for a tag. The default renders the language's\n   * **endonym** — its name in its own language (`Deutsch`, not `German`) — via\n   * `Intl.DisplayNames`, which is why no hand-written name map ships here: a\n   * static map goes stale and cannot cover a realm's arbitrary locale list.\n   *\n   * Pass this only for a genuinely different rendering (adding a region, a\n   * flag, a marketing name). It is not the translation hook — endonyms are the\n   * same in every UI language, so this does NOT change with the app's locale.\n   */\n  getLabel?: (locale: string) => string;\n  /** `full` (default) shows the current endonym beside the globe; `compact` is icon-only, for tight top bars. */\n  variant?: LanguageSwitcherVariant;\n  /**\n   * Accessible name for the trigger. Default `\"Language\"`. The trigger's\n   * visible text is a language name, which tells a screen-reader user *what*\n   * is selected but not *what the control does* — so this is the only thing\n   * naming the control, and it must be translated by the consumer.\n   */\n  label?: string;\n  /** Accessible name for the panel's search box. Default `\"Search languages\"`. */\n  searchLabel?: string;\n  /** Reveal the panel's search box. Defaults to `'auto'` — shown past the shared Listbox threshold (6). */\n  searchable?: boolean | 'auto';\n  disabled?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * The endonym for a tag: the language's name written in that language.\n *\n * `Intl.DisplayNames` is asked for the name *in the target locale itself*\n * (`new Intl.DisplayNames([tag], …)`), which is what turns `de-DE` into\n * `Deutsch` rather than `German`. That is the accessibility requirement — a\n * reader who only speaks German has to recognise their own language in the list.\n *\n * Resolved on the **base language subtag**, not the full tag: `.of(\"de-DE\")`\n * yields `\"Deutsch (Deutschland)\"` and `.of(\"en-US\")` yields\n * `\"American English\"`, and a switcher listing countries when it is choosing\n * languages reads as noise. The region is added back by {@link buildLabels}\n * only where it actually disambiguates.\n *\n * Falls back to the bare tag on any runtime that rejects the locale, so an\n * unusual tag degrades to something selectable instead of throwing.\n */\nfunction endonym(locale: string, withRegion: boolean): string {\n  const base = locale.split('-')[0];\n  try {\n    const display = new Intl.DisplayNames([locale], { type: 'language' });\n    const name = display.of(withRegion ? locale : base);\n    if (!name || name === locale || name === base) return locale;\n    // CLDR yields lowercase endonyms for several languages (`français`,\n    // `español`). A standalone item in a picker reads as a proper noun in the\n    // UI, so title-case the first character only — never the whole string,\n    // which would corrupt scripts that have no case at all.\n    return name.charAt(0).toLocaleUpperCase(locale) + name.slice(1);\n  } catch {\n    return locale;\n  }\n}\n\n/**\n * Label every tag in the list, adding the region **only where two tags share a\n * base language**.\n *\n * A realm offering `[\"en-US\", \"de-DE\"]` gets `English` / `Deutsch`. One\n * offering `[\"en-US\", \"en-GB\"]` cannot: two rows both reading `English` are\n * unusable, so those become `American English` / `British English`. The\n * decision is per base language, so a list mixing both cases keeps the short\n * form where it is unambiguous.\n */\nfunction buildLabels(locales: string[]): Map<string, string> {\n  const perBase = new Map<string, number>();\n  for (const locale of locales) {\n    const base = locale.split('-')[0];\n    perBase.set(base, (perBase.get(base) ?? 0) + 1);\n  }\n  return new Map(\n    locales.map((locale) => [\n      locale,\n      endonym(locale, (perBase.get(locale.split('-')[0]) ?? 0) > 1),\n    ]),\n  );\n}\n\n/**\n * LanguageSwitcher — the single, library-owned control for changing the app's\n * language.\n *\n * Deliberately **presentational and data-free**: it takes the locale list, the\n * current value, and a change handler, and it renders. It issues no query,\n * reads no context, and persists nothing. Where the list comes from (a realm\n * config, a static array), how the choice is stored (localStorage, a user\n * preference mutation), and what re-renders afterwards are all the consumer's\n * concerns — the same separation `UxmLocaleProvider` keeps, and the reason one\n * switcher can serve every viax surface without any of them forking it.\n *\n * Pair it with `UxmLocaleProvider`: this control picks the tag, that provider\n * pushes it into every atom's `Intl` formatting.\n *\n * ```tsx\n * <LanguageSwitcher\n *   locales={supportedLocales}\n *   value={locale}\n *   onChange={setLocale}\n *   label={t('common.language')}\n * />\n * ```\n */\nexport function LanguageSwitcher({\n  locales,\n  value,\n  onChange,\n  getLabel,\n  variant = 'full',\n  label = 'Language',\n  searchLabel = 'Search languages',\n  searchable = 'auto',\n  disabled = false,\n  className,\n  style,\n}: LanguageSwitcherProps) {\n  // Endonyms never change with the app's UI language, so this memo is keyed on\n  // the list alone — switching locale does not invalidate it.\n  const items = useMemo(() => {\n    const labels = getLabel ? null : buildLabels(locales);\n    return locales.map((locale) => ({\n      locale,\n      label: getLabel ? getLabel(locale) : labels!.get(locale) ?? locale,\n    }));\n  }, [locales, getLabel]);\n\n  // Zero-cost absence, not a disabled control: a realm with one configured\n  // locale has no choice to offer, and an inert affordance would imply it does.\n  // Guarded AFTER the hooks above so hook order stays stable when a locale list\n  // arrives asynchronously and grows from one entry to several.\n  if (locales.length <= 1) return null;\n\n  const selected = items.find((item) => item.locale === value) ?? null;\n\n  return (\n    <Listbox<{ locale: string; label: string }>\n      items={items}\n      getKey={(item) => item.locale}\n      getLabel={(item) => item.label}\n      value={selected}\n      onChange={(next) => next && onChange(next.locale)}\n      disabled={disabled}\n      searchable={searchable}\n      searchPlaceholder={searchLabel}\n      searchAriaLabel={searchLabel}\n      matchAnchorWidth={false}\n      minPanelWidth={180}\n      placement=\"bottom-end\"\n      className={cn('uxm-language-switcher', className)}\n      aria-label={label}\n      renderTrigger={({ open, triggerProps }) => (\n        <button\n          {...triggerProps}\n          type=\"button\"\n          className={cn(\n            'uxm-language-switcher__trigger',\n            `uxm-language-switcher__trigger--${variant}`,\n            open && 'uxm-language-switcher__trigger--open',\n          )}\n          style={style}\n          aria-label={label}\n        >\n          <Icon glyph=\"globe\" size={16} aria-hidden=\"true\" />\n          {variant === 'full' && (\n            <span className=\"uxm-language-switcher__current\">\n              {selected?.label ?? value}\n            </span>\n          )}\n          <span className=\"uxm-language-switcher__caret\" aria-hidden=\"true\">\n            <Icon\n              glyph=\"chevron-down\"\n              size={12}\n              strokeWidth={2.2}\n              style={{ transform: open ? 'rotate(180deg)' : 'none' }}\n            />\n          </span>\n        </button>\n      )}\n      renderItem={(item) => (\n        <span className=\"uxm-language-switcher__row\" lang={item.locale}>\n          {item.label}\n        </span>\n      )}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/language-switcher/language-switcher.css

@@ -0,0 +1,95 @@
+@charset "UTF-8";
+/* ── language-switcher ── */
+/* LanguageSwitcher — globe + current endonym + caret, opening the shared
+   Listbox panel. The panel itself is NOT styled here: it inherits the
+   library-wide `--uxm-listbox-*` surface so every picker in the app agrees,
+   and a studio save on Listbox themes this control's dropdown too. Only the
+   trigger is this atom's own surface. */
+/* The atom passes its class into `Listbox`, which merges it onto its OWN root:
+   `cn('uxm-listbox', className)`. That root is `width: 100%` — correct for the
+   field-embedded pickers (CurrencyInput, PhoneInput) but wrong for a standalone
+   trigger, which must size to its content.
+
+   Both selectors are one class, so specificity ties and cascade order decides —
+   and `listbox.css` is imported AFTER `language-switcher.css`, so `width: 100%`
+   would win and stretch the switcher across its flex parent, pushing whatever
+   follows it out of the row. Qualifying with `.uxm-listbox` raises specificity
+   to (0,2,0) so this wins regardless of import order. Do NOT "fix" this by
+   reordering the @imports in styles.css — that ordering is alphabetical and
+   load-bearing elsewhere. */
+.uxm-listbox.uxm-language-switcher {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: auto;
+}
+
+.uxm-language-switcher {
+  display: inline-flex;
+}
+.uxm-language-switcher__trigger {
+  align-items: center;
+  background-color: var(--uxm-language-switcher-bg, transparent);
+  border: 1px solid var(--uxm-language-switcher-border-color, var(--color-border));
+  border-radius: var(--uxm-language-switcher-radius, 8px);
+  color: var(--uxm-language-switcher-color, var(--color-text));
+  cursor: pointer;
+  display: inline-flex;
+  font-size: calc(var(--uxm-language-switcher-font-size, 13px) * var(--type-scale, 1));
+  font-weight: 500;
+  gap: var(--uxm-language-switcher-gap, 6px);
+  line-height: 1.2;
+  padding: var(--uxm-language-switcher-padding-y, 7px) var(--uxm-language-switcher-padding-x, 10px);
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+  /* `--state-*` forced modifiers sit beside the real pseudo-classes (the
+     input family's pattern) so the studio can paint a state on an inert
+     preview without synthesising pointer or focus events. */
+}
+.uxm-language-switcher__trigger--state-hover, .uxm-language-switcher__trigger:hover:not(:disabled) {
+  background-color: var(--uxm-language-switcher-hover-bg, var(--color-surface));
+  border-color: var(--uxm-language-switcher-hover-border-color, var(--color-border-strong, var(--color-border)));
+}
+.uxm-language-switcher__trigger {
+  /* AA focus indicator: a 2px ring at >=3:1 against both the trigger fill and
+     the surface behind it. `outline` (not box-shadow) so Windows High
+     Contrast keeps it. */
+}
+.uxm-language-switcher__trigger--state-focus, .uxm-language-switcher__trigger:focus-visible {
+  outline: 2px solid var(--uxm-language-switcher-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+.uxm-language-switcher__trigger--state-open, .uxm-language-switcher__trigger--open {
+  background-color: var(--uxm-language-switcher-open-bg, var(--color-surface));
+  border-color: var(--uxm-language-switcher-open-border-color, var(--color-accent));
+}
+.uxm-language-switcher__trigger {
+  /* Icon-only: drop the label but keep the tap target square and >=32px so it
+     still clears the pointer-target guidance in a dense top bar. */
+}
+.uxm-language-switcher__trigger--compact {
+  justify-content: center;
+  min-width: var(--uxm-language-switcher-compact-size, 34px);
+  padding-inline: var(--uxm-language-switcher-compact-padding-x, 8px);
+}
+.uxm-language-switcher__trigger--state-disabled, .uxm-language-switcher__trigger:disabled {
+  cursor: not-allowed;
+  opacity: var(--uxm-language-switcher-disabled-opacity, 0.5);
+}
+.uxm-language-switcher__current {
+  white-space: nowrap;
+}
+.uxm-language-switcher__caret {
+  align-items: center;
+  color: var(--uxm-language-switcher-caret-color, var(--color-text-muted));
+  display: inline-flex;
+}
+.uxm-language-switcher__caret svg {
+  transition: transform 0.15s;
+}
+
+/* Row inside the shared Listbox panel. `lang` is set per row by the component
+   so a screen reader switches voice to the right language when reading an
+   endonym — without it, "Deutsch" is announced with English phonetics. */
+.uxm-language-switcher__row {
+  display: block;
+  white-space: nowrap;
+}

package/dist/ui/language-switcher/language-switcher.d.ts

@@ -0,0 +1,73 @@
+import type { CSSProperties } from 'react';
+export type LanguageSwitcherVariant = 'full' | 'compact';
+export interface LanguageSwitcherProps {
+    /**
+     * BCP-47 tags the app offers, e.g. `["en-US", "de-DE"]`.
+     *
+     * **The consumer supplies this — the atom never fetches it.** In a viax
+     * portal it comes from the realm's `getSupportedLocales`; the library has no
+     * data layer and must not grow one.
+     *
+     * When this holds **one entry or none, the component renders `null`** — not a
+     * disabled control, not a hidden one. Nothing is emitted, so a single-locale
+     * app pays zero layout cost.
+     */
+    locales: string[];
+    /** The currently selected tag. Must be one of `locales`. Controlled. */
+    value: string;
+    /** Fires with the picked BCP-47 tag. */
+    onChange: (locale: string) => void;
+    /**
+     * Override the label shown for a tag. The default renders the language's
+     * **endonym** — its name in its own language (`Deutsch`, not `German`) — via
+     * `Intl.DisplayNames`, which is why no hand-written name map ships here: a
+     * static map goes stale and cannot cover a realm's arbitrary locale list.
+     *
+     * Pass this only for a genuinely different rendering (adding a region, a
+     * flag, a marketing name). It is not the translation hook — endonyms are the
+     * same in every UI language, so this does NOT change with the app's locale.
+     */
+    getLabel?: (locale: string) => string;
+    /** `full` (default) shows the current endonym beside the globe; `compact` is icon-only, for tight top bars. */
+    variant?: LanguageSwitcherVariant;
+    /**
+     * Accessible name for the trigger. Default `"Language"`. The trigger's
+     * visible text is a language name, which tells a screen-reader user *what*
+     * is selected but not *what the control does* — so this is the only thing
+     * naming the control, and it must be translated by the consumer.
+     */
+    label?: string;
+    /** Accessible name for the panel's search box. Default `"Search languages"`. */
+    searchLabel?: string;
+    /** Reveal the panel's search box. Defaults to `'auto'` — shown past the shared Listbox threshold (6). */
+    searchable?: boolean | 'auto';
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * LanguageSwitcher — the single, library-owned control for changing the app's
+ * language.
+ *
+ * Deliberately **presentational and data-free**: it takes the locale list, the
+ * current value, and a change handler, and it renders. It issues no query,
+ * reads no context, and persists nothing. Where the list comes from (a realm
+ * config, a static array), how the choice is stored (localStorage, a user
+ * preference mutation), and what re-renders afterwards are all the consumer's
+ * concerns — the same separation `UxmLocaleProvider` keeps, and the reason one
+ * switcher can serve every viax surface without any of them forking it.
+ *
+ * Pair it with `UxmLocaleProvider`: this control picks the tag, that provider
+ * pushes it into every atom's `Intl` formatting.
+ *
+ * ```tsx
+ * <LanguageSwitcher
+ *   locales={supportedLocales}
+ *   value={locale}
+ *   onChange={setLocale}
+ *   label={t('common.language')}
+ * />
+ * ```
+ */
+export declare function LanguageSwitcher({ locales, value, onChange, getLabel, variant, label, searchLabel, searchable, disabled, className, style, }: LanguageSwitcherProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=language-switcher.d.ts.map

package/dist/ui/language-switcher/language-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"language-switcher.d.ts","sourceRoot":"","sources":["../../../src/ui/language-switcher/language-switcher.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,qBAAqB;IACpC;;;;;;;;;;OAUG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,+GAA+G;IAC/G,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yGAAyG;IACzG,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA2DD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAgB,EAChB,KAAkB,EAClB,WAAgC,EAChC,UAAmB,EACnB,QAAgB,EAChB,SAAS,EACT,KAAK,GACN,EAAE,qBAAqB,kDAsEvB"}

package/dist/ui/language-switcher/language-switcher.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../icon/index.js";
+import { Listbox } from "../listbox/index.js";
+function endonym(locale, withRegion) {
+  const base = locale.split("-")[0];
+  try {
+    const display = new Intl.DisplayNames([locale], { type: "language" });
+    const name = display.of(withRegion ? locale : base);
+    if (!name || name === locale || name === base) return locale;
+    return name.charAt(0).toLocaleUpperCase(locale) + name.slice(1);
+  } catch {
+    return locale;
+  }
+}
+function buildLabels(locales) {
+  const perBase = /* @__PURE__ */ new Map();
+  for (const locale of locales) {
+    const base = locale.split("-")[0];
+    perBase.set(base, (perBase.get(base) ?? 0) + 1);
+  }
+  return new Map(
+    locales.map((locale) => [
+      locale,
+      endonym(locale, (perBase.get(locale.split("-")[0]) ?? 0) > 1)
+    ])
+  );
+}
+function LanguageSwitcher({
+  locales,
+  value,
+  onChange,
+  getLabel,
+  variant = "full",
+  label = "Language",
+  searchLabel = "Search languages",
+  searchable = "auto",
+  disabled = false,
+  className,
+  style
+}) {
+  const items = useMemo(() => {
+    const labels = getLabel ? null : buildLabels(locales);
+    return locales.map((locale) => ({
+      locale,
+      label: getLabel ? getLabel(locale) : labels.get(locale) ?? locale
+    }));
+  }, [locales, getLabel]);
+  if (locales.length <= 1) return null;
+  const selected = items.find((item) => item.locale === value) ?? null;
+  return /* @__PURE__ */ jsx(
+    Listbox,
+    {
+      items,
+      getKey: (item) => item.locale,
+      getLabel: (item) => item.label,
+      value: selected,
+      onChange: (next) => next && onChange(next.locale),
+      disabled,
+      searchable,
+      searchPlaceholder: searchLabel,
+      searchAriaLabel: searchLabel,
+      matchAnchorWidth: false,
+      minPanelWidth: 180,
+      placement: "bottom-end",
+      className: cn("uxm-language-switcher", className),
+      "aria-label": label,
+      renderTrigger: ({ open, triggerProps }) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ...triggerProps,
+          type: "button",
+          className: cn(
+            "uxm-language-switcher__trigger",
+            `uxm-language-switcher__trigger--${variant}`,
+            open && "uxm-language-switcher__trigger--open"
+          ),
+          style,
+          "aria-label": label,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { glyph: "globe", size: 16, "aria-hidden": "true" }),
+            variant === "full" && /* @__PURE__ */ jsx("span", { className: "uxm-language-switcher__current", children: selected?.label ?? value }),
+            /* @__PURE__ */ jsx("span", { className: "uxm-language-switcher__caret", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                glyph: "chevron-down",
+                size: 12,
+                strokeWidth: 2.2,
+                style: { transform: open ? "rotate(180deg)" : "none" }
+              }
+            ) })
+          ]
+        }
+      ),
+      renderItem: (item) => /* @__PURE__ */ jsx("span", { className: "uxm-language-switcher__row", lang: item.locale, children: item.label })
+    }
+  );
+}
+export {
+  LanguageSwitcher
+};
+//# sourceMappingURL=language-switcher.js.map

package/dist/ui/language-switcher/language-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/language-switcher/language-switcher.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\nimport { Listbox } from '../listbox';\n\nimport type { CSSProperties } from 'react';\n\nexport type LanguageSwitcherVariant = 'full' | 'compact';\n\nexport interface LanguageSwitcherProps {\n  /**\n   * BCP-47 tags the app offers, e.g. `[\"en-US\", \"de-DE\"]`.\n   *\n   * **The consumer supplies this — the atom never fetches it.** In a viax\n   * portal it comes from the realm's `getSupportedLocales`; the library has no\n   * data layer and must not grow one.\n   *\n   * When this holds **one entry or none, the component renders `null`** — not a\n   * disabled control, not a hidden one. Nothing is emitted, so a single-locale\n   * app pays zero layout cost.\n   */\n  locales: string[];\n  /** The currently selected tag. Must be one of `locales`. Controlled. */\n  value: string;\n  /** Fires with the picked BCP-47 tag. */\n  onChange: (locale: string) => void;\n  /**\n   * Override the label shown for a tag. The default renders the language's\n   * **endonym** — its name in its own language (`Deutsch`, not `German`) — via\n   * `Intl.DisplayNames`, which is why no hand-written name map ships here: a\n   * static map goes stale and cannot cover a realm's arbitrary locale list.\n   *\n   * Pass this only for a genuinely different rendering (adding a region, a\n   * flag, a marketing name). It is not the translation hook — endonyms are the\n   * same in every UI language, so this does NOT change with the app's locale.\n   */\n  getLabel?: (locale: string) => string;\n  /** `full` (default) shows the current endonym beside the globe; `compact` is icon-only, for tight top bars. */\n  variant?: LanguageSwitcherVariant;\n  /**\n   * Accessible name for the trigger. Default `\"Language\"`. The trigger's\n   * visible text is a language name, which tells a screen-reader user *what*\n   * is selected but not *what the control does* — so this is the only thing\n   * naming the control, and it must be translated by the consumer.\n   */\n  label?: string;\n  /** Accessible name for the panel's search box. Default `\"Search languages\"`. */\n  searchLabel?: string;\n  /** Reveal the panel's search box. Defaults to `'auto'` — shown past the shared Listbox threshold (6). */\n  searchable?: boolean | 'auto';\n  disabled?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * The endonym for a tag: the language's name written in that language.\n *\n * `Intl.DisplayNames` is asked for the name *in the target locale itself*\n * (`new Intl.DisplayNames([tag], …)`), which is what turns `de-DE` into\n * `Deutsch` rather than `German`. That is the accessibility requirement — a\n * reader who only speaks German has to recognise their own language in the list.\n *\n * Resolved on the **base language subtag**, not the full tag: `.of(\"de-DE\")`\n * yields `\"Deutsch (Deutschland)\"` and `.of(\"en-US\")` yields\n * `\"American English\"`, and a switcher listing countries when it is choosing\n * languages reads as noise. The region is added back by {@link buildLabels}\n * only where it actually disambiguates.\n *\n * Falls back to the bare tag on any runtime that rejects the locale, so an\n * unusual tag degrades to something selectable instead of throwing.\n */\nfunction endonym(locale: string, withRegion: boolean): string {\n  const base = locale.split('-')[0];\n  try {\n    const display = new Intl.DisplayNames([locale], { type: 'language' });\n    const name = display.of(withRegion ? locale : base);\n    if (!name || name === locale || name === base) return locale;\n    // CLDR yields lowercase endonyms for several languages (`français`,\n    // `español`). A standalone item in a picker reads as a proper noun in the\n    // UI, so title-case the first character only — never the whole string,\n    // which would corrupt scripts that have no case at all.\n    return name.charAt(0).toLocaleUpperCase(locale) + name.slice(1);\n  } catch {\n    return locale;\n  }\n}\n\n/**\n * Label every tag in the list, adding the region **only where two tags share a\n * base language**.\n *\n * A realm offering `[\"en-US\", \"de-DE\"]` gets `English` / `Deutsch`. One\n * offering `[\"en-US\", \"en-GB\"]` cannot: two rows both reading `English` are\n * unusable, so those become `American English` / `British English`. The\n * decision is per base language, so a list mixing both cases keeps the short\n * form where it is unambiguous.\n */\nfunction buildLabels(locales: string[]): Map<string, string> {\n  const perBase = new Map<string, number>();\n  for (const locale of locales) {\n    const base = locale.split('-')[0];\n    perBase.set(base, (perBase.get(base) ?? 0) + 1);\n  }\n  return new Map(\n    locales.map((locale) => [\n      locale,\n      endonym(locale, (perBase.get(locale.split('-')[0]) ?? 0) > 1),\n    ]),\n  );\n}\n\n/**\n * LanguageSwitcher — the single, library-owned control for changing the app's\n * language.\n *\n * Deliberately **presentational and data-free**: it takes the locale list, the\n * current value, and a change handler, and it renders. It issues no query,\n * reads no context, and persists nothing. Where the list comes from (a realm\n * config, a static array), how the choice is stored (localStorage, a user\n * preference mutation), and what re-renders afterwards are all the consumer's\n * concerns — the same separation `UxmLocaleProvider` keeps, and the reason one\n * switcher can serve every viax surface without any of them forking it.\n *\n * Pair it with `UxmLocaleProvider`: this control picks the tag, that provider\n * pushes it into every atom's `Intl` formatting.\n *\n * ```tsx\n * <LanguageSwitcher\n *   locales={supportedLocales}\n *   value={locale}\n *   onChange={setLocale}\n *   label={t('common.language')}\n * />\n * ```\n */\nexport function LanguageSwitcher({\n  locales,\n  value,\n  onChange,\n  getLabel,\n  variant = 'full',\n  label = 'Language',\n  searchLabel = 'Search languages',\n  searchable = 'auto',\n  disabled = false,\n  className,\n  style,\n}: LanguageSwitcherProps) {\n  // Endonyms never change with the app's UI language, so this memo is keyed on\n  // the list alone — switching locale does not invalidate it.\n  const items = useMemo(() => {\n    const labels = getLabel ? null : buildLabels(locales);\n    return locales.map((locale) => ({\n      locale,\n      label: getLabel ? getLabel(locale) : labels!.get(locale) ?? locale,\n    }));\n  }, [locales, getLabel]);\n\n  // Zero-cost absence, not a disabled control: a realm with one configured\n  // locale has no choice to offer, and an inert affordance would imply it does.\n  // Guarded AFTER the hooks above so hook order stays stable when a locale list\n  // arrives asynchronously and grows from one entry to several.\n  if (locales.length <= 1) return null;\n\n  const selected = items.find((item) => item.locale === value) ?? null;\n\n  return (\n    <Listbox<{ locale: string; label: string }>\n      items={items}\n      getKey={(item) => item.locale}\n      getLabel={(item) => item.label}\n      value={selected}\n      onChange={(next) => next && onChange(next.locale)}\n      disabled={disabled}\n      searchable={searchable}\n      searchPlaceholder={searchLabel}\n      searchAriaLabel={searchLabel}\n      matchAnchorWidth={false}\n      minPanelWidth={180}\n      placement=\"bottom-end\"\n      className={cn('uxm-language-switcher', className)}\n      aria-label={label}\n      renderTrigger={({ open, triggerProps }) => (\n        <button\n          {...triggerProps}\n          type=\"button\"\n          className={cn(\n            'uxm-language-switcher__trigger',\n            `uxm-language-switcher__trigger--${variant}`,\n            open && 'uxm-language-switcher__trigger--open',\n          )}\n          style={style}\n          aria-label={label}\n        >\n          <Icon glyph=\"globe\" size={16} aria-hidden=\"true\" />\n          {variant === 'full' && (\n            <span className=\"uxm-language-switcher__current\">\n              {selected?.label ?? value}\n            </span>\n          )}\n          <span className=\"uxm-language-switcher__caret\" aria-hidden=\"true\">\n            <Icon\n              glyph=\"chevron-down\"\n              size={12}\n              strokeWidth={2.2}\n              style={{ transform: open ? 'rotate(180deg)' : 'none' }}\n            />\n          </span>\n        </button>\n      )}\n      renderItem={(item) => (\n        <span className=\"uxm-language-switcher__row\" lang={item.locale}>\n          {item.label}\n        </span>\n      )}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/locale/index.cjs

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

package/dist/ui/locale/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/locale/index.ts"],"sourcesContent":["export { DEFAULT_UXM_LOCALE, UxmLocaleProvider, useUxmLocale } from './locale';\nexport type { UxmLocaleProviderProps } from './locale';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoE;","names":[]}

package/dist/ui/locale/index.d.ts

@@ -0,0 +1,3 @@
+export { DEFAULT_UXM_LOCALE, UxmLocaleProvider, useUxmLocale } from './locale.js';
+export type { UxmLocaleProviderProps } from './locale.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/locale/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/locale/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC/E,YAAY,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC"}

package/dist/ui/locale/index.js

@@ -0,0 +1,7 @@
+import { DEFAULT_UXM_LOCALE, UxmLocaleProvider, useUxmLocale } from "./locale.js";
+export {
+  DEFAULT_UXM_LOCALE,
+  UxmLocaleProvider,
+  useUxmLocale
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/locale/index.ts"],"sourcesContent":["export { DEFAULT_UXM_LOCALE, UxmLocaleProvider, useUxmLocale } from './locale';\nexport type { UxmLocaleProviderProps } from './locale';\n"],"mappings":"AAAA,SAAS,oBAAoB,mBAAmB,oBAAoB;","names":[]}

package/dist/ui/locale/locale.cjs

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var locale_exports = {};
+__export(locale_exports, {
+  DEFAULT_UXM_LOCALE: () => DEFAULT_UXM_LOCALE,
+  UxmLocaleProvider: () => UxmLocaleProvider,
+  useUxmLocale: () => useUxmLocale
+});
+module.exports = __toCommonJS(locale_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const DEFAULT_UXM_LOCALE = "en-US";
+const UxmLocaleContext = (0, import_react.createContext)(void 0);
+function UxmLocaleProvider({ locale, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UxmLocaleContext.Provider, { value: locale, children });
+}
+function useUxmLocale(explicit) {
+  const fromContext = (0, import_react.useContext)(UxmLocaleContext);
+  return explicit ?? fromContext ?? DEFAULT_UXM_LOCALE;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_UXM_LOCALE,
+  UxmLocaleProvider,
+  useUxmLocale
+});
+//# sourceMappingURL=locale.cjs.map

package/dist/ui/locale/locale.cjs.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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CS;AA3CT,mBAA0C;AAUnC,MAAM,qBAAqB;AAElC,MAAM,uBAAmB,4BAAkC,MAAS;AA8B7D,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAA2B;AAC9E,SAAO,4CAAC,iBAAiB,UAAjB,EAA0B,OAAO,QAAS,UAAS;AAC7D;AAaO,SAAS,aAAa,UAA2B;AACtD,QAAM,kBAAc,yBAAW,gBAAgB;AAC/C,SAAO,YAAY,eAAe;AACpC;","names":[]}

package/dist/ui/locale/locale.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+/**
+ * Locale used by every UXM atom that formats dates, numbers, or units when
+ * neither a `locale` prop nor a surrounding {@link UxmLocaleProvider} says
+ * otherwise. Matches the English defaults baked into the atoms' label props,
+ * so an app that localises nothing keeps its current rendering.
+ */
+export declare const DEFAULT_UXM_LOCALE = "en-US";
+export interface UxmLocaleProviderProps {
+    /** BCP-47 tag — e.g. `"uk-UA"`, `"de-DE"`. Passed straight to `Intl`. */
+    locale: string;
+    children?: ReactNode;
+}
+/**
+ * Broadcasts one BCP-47 locale to every UXM atom below it.
+ *
+ * This is deliberately **not** an i18n engine — UXM ships no message
+ * catalogue and no translation runtime. Translated *copy* stays the
+ * consumer's job and arrives through each atom's label props (`clearLabel`,
+ * `labels`, …). What this provider carries is the one thing those props
+ * cannot express: which locale `Intl` should format with, so month names,
+ * decimal separators, and byte units follow the app instead of defaulting to
+ * US English.
+ *
+ * Mount it once near the app root; the atoms that need it read it themselves:
+ *
+ * ```tsx
+ * <UxmLocaleProvider locale="uk-UA">
+ *   <App />
+ * </UxmLocaleProvider>
+ * ```
+ *
+ * A `locale` prop on an individual atom still wins over the provider, so a
+ * single always-USD amount or an always-ISO date can opt out locally.
+ */
+export declare function UxmLocaleProvider({ locale, children }: UxmLocaleProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Resolve the locale an atom should format with, in precedence order:
+ * explicit prop → nearest {@link UxmLocaleProvider} → {@link DEFAULT_UXM_LOCALE}.
+ *
+ * Atoms take `locale?: string` and pass it straight in, which keeps the
+ * per-instance override working exactly as it did before the provider existed:
+ *
+ * ```tsx
+ * const locale = useUxmLocale(localeProp);
+ * ```
+ */
+export declare function useUxmLocale(explicit?: string): string;
+//# sourceMappingURL=locale.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"locale.d.ts","sourceRoot":"","sources":["../../../src/ui/locale/locale.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,UAAU,CAAC;AAI1C,MAAM,WAAW,sBAAsB;IACrC,yEAAyE;IACzE,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAE7E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAGtD"}