origam 2.3.0 → 2.6.1

package/dist/src/utils/Commons/rounded.util.cjs

@@ -4,6 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.formatRoundedStylesVar = formatRoundedStylesVar;
+exports.isCustomBorderRadius = isCustomBorderRadius;
+var _consts = require("../../consts/index.cjs");
+function isCustomBorderRadius(value) {
+  return _consts.CUSTOM_BORDER_RADIUS_REGEX.test(value.trim());
+}
 function formatRoundedStylesVar(values) {
   const styles = [];
   switch (values.length) {

package/dist/src/utils/Commons/rounded.util.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Whether a string is a free-form custom `border-radius` value (a
+ * `var(...)` / `calc(...)` reference or a single CSS length outside the
+ * literal `BORDER_RADIUS_REGEX` whitelist) that should be emitted verbatim
+ * as an inline `border-radius` declaration.
+ *
+ * @param value …
+ */
+export declare function isCustomBorderRadius(value: string): boolean;
 /**
  * Format rounded styles var.
  *

package/dist/src/utils/Commons/rounded.util.js

@@ -1,3 +1,7 @@
+import { CUSTOM_BORDER_RADIUS_REGEX } from "../../consts/index.js";
+export function isCustomBorderRadius(value) {
+  return CUSTOM_BORDER_RADIUS_REGEX.test(value.trim());
+}
 export function formatRoundedStylesVar(values) {
   const styles = [];
   switch (values.length) {

package/dist/src/utils/DataTable/headers.util.cjs

@@ -41,7 +41,7 @@ function convertToInternalHeaders(items) {
       ...defaultItem,
       key,
       value,
-      sortable: defaultItem.sortable ?? (defaultItem.key != null || !!defaultItem.sort),
+      sortable: defaultItem.sortable ?? (key != null || !!defaultItem.sort),
       children: defaultItem.children ? convertToInternalHeaders(defaultItem.children) : void 0
     };
     internalHeaders.push(internalItem);

package/dist/src/utils/DataTable/headers.util.js

@@ -25,7 +25,7 @@ export function convertToInternalHeaders(items) {
       ...defaultItem,
       key,
       value,
-      sortable: defaultItem.sortable ?? (defaultItem.key != null || !!defaultItem.sort),
+      sortable: defaultItem.sortable ?? (key != null || !!defaultItem.sort),
       children: defaultItem.children ? convertToInternalHeaders(defaultItem.children) : void 0
     };
     internalHeaders.push(internalItem);

package/dist/src/utils/DataTable/sort.util.cjs

@@ -32,13 +32,13 @@ function sortItems(items, sortByItems, options) {
         const customResult = options.sortRawFunctions[sortKey](sortARaw, sortBRaw);
         if (customResult == null) continue;
         hasCustomResult = true;
-        if (customResult) return customResult;
+        if (customResult !== 0) return customResult;
       }
       if (options?.sortFunctions?.[sortKey]) {
         const customResult = options.sortFunctions[sortKey](sortA, sortB);
         if (customResult == null) continue;
         hasCustomResult = true;
-        if (customResult) return customResult;
+        if (customResult !== 0) return customResult;
       }
       if (hasCustomResult) continue;
       if (sortA instanceof Date && sortB instanceof Date) {

package/dist/src/utils/DataTable/sort.util.js

@@ -28,13 +28,13 @@ export function sortItems(items, sortByItems, options) {
         const customResult = options.sortRawFunctions[sortKey](sortARaw, sortBRaw);
         if (customResult == null) continue;
         hasCustomResult = true;
-        if (customResult) return customResult;
+        if (customResult !== 0) return customResult;
       }
       if (options?.sortFunctions?.[sortKey]) {
         const customResult = options.sortFunctions[sortKey](sortA, sortB);
         if (customResult == null) continue;
         hasCustomResult = true;
-        if (customResult) return customResult;
+        if (customResult !== 0) return customResult;
       }
       if (hasCustomResult) continue;
       if (sortA instanceof Date && sortB instanceof Date) {

package/dist/src/utils/List/list-item.util.d.ts

@@ -14,5 +14,12 @@ export declare function transformListItems(props: IItemProps & {
  * @param props …
  * @param item  …
  * @returns …
+ *
+ * @note When `props.itemValue` is `undefined`, `getPropertyFromItem` returns
+ * its fallback, which is `title` (the resolved title value). This is the
+ * intentional Vuetify-like behaviour: without an explicit `itemValue` mapping,
+ * the item's resolved title becomes both its display label and its selection
+ * value. This is NOT a bug — it enables string arrays to work without any
+ * additional configuration (e.g. `items: ['Alice', 'Bob']`).
  */
 export declare function transformListItem(props: Omit<IItemProps, 'items'>, item: any): IInternalListItem;

package/dist/src/utils/Media/format-time.util.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatMediaTime = formatMediaTime;
+function formatMediaTime(seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) return "--:--";
+  const total = Math.floor(seconds);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = total % 60;
+  const pad = value => value.toString().padStart(2, "0");
+  if (h > 0) return `${h}:${pad(m)}:${pad(s)}`;
+  return `${pad(m)}:${pad(s)}`;
+}

package/dist/src/utils/Media/format-time.util.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Format a duration (seconds) into a media-toolbar-friendly string.
+ *
+ *   • short medias        → `mm:ss`     (e.g. `01:05`)
+ *   • medias  ≥ 1 hour    → `h:mm:ss`   (e.g. `1:02:05`)
+ *   • unknown / negative  → `--:--`     (em-dash placeholder while
+ *                                       metadata is still loading,
+ *                                       so the toolbar doesn't flash
+ *                                       `NaN:NaN`)
+ *
+ * Extracted from `<OrigamMediaController>` so both the time label
+ * sub-component AND the scrubber's `format-hover-tooltip` callback
+ * share a single source of truth — keeping `OrigamAudio` consistent
+ * with `OrigamVideo` byte-for-byte.
+ */
+export declare function formatMediaTime(seconds: number): string;

package/dist/src/utils/Media/format-time.util.js

@@ -0,0 +1,10 @@
+export function formatMediaTime(seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) return "--:--";
+  const total = Math.floor(seconds);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = total % 60;
+  const pad = (value) => value.toString().padStart(2, "0");
+  if (h > 0) return `${h}:${pad(m)}:${pad(s)}`;
+  return `${pad(m)}:${pad(s)}`;
+}

package/dist/src/utils/QrCode/qr-code-adapters.util.cjs

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveQrColor = resolveQrColor;
+exports.resolveQrCornerRadius = resolveQrCornerRadius;
+var _color = require("../Commons/color.util.cjs");
+const ROUNDED_TO_CORNER = {
+  "x-small": 0.1,
+  "small": 0.18,
+  "default": 0.25,
+  "medium": 0.3,
+  "large": 0.4,
+  "x-large": 0.5,
+  "shaped": 0.25,
+  "shaped-invert": 0.25
+};
+function resolveQrColor(value, role, fallback) {
+  if (value === null || value === void 0 || value === "") return fallback;
+  if ((0, _color.isIntent)(value)) {
+    return role === "foreground" ? (0, _color.tokenForegroundForIntent)(value) : (0, _color.intentBgExpr)(value, "default");
+  }
+  return String(value);
+}
+function resolveQrCornerRadius(value) {
+  if (value === void 0 || value === null || value === false || value === "") return 0;
+  if (value === true) return 0.5;
+  if (typeof value === "number") return Math.max(0, Math.min(0.5, value));
+  if (typeof value === "string" && value in ROUNDED_TO_CORNER) {
+    return ROUNDED_TO_CORNER[value];
+  }
+  return 0;
+}

package/dist/src/utils/QrCode/qr-code-adapters.util.d.ts

@@ -0,0 +1,49 @@
+import type { TColor, TRounded } from '../../types';
+/**
+ * Transform a DS-shaped colour (intent, raw CSS, `currentColor`,
+ * `transparent`, undefined) into a literal CSS string ready to drop
+ * inside an SVG `fill=""` attribute.
+ *
+ *   • `TIntent` (e.g. `'primary'`, `'success'`) → CSS variable
+ *     reference (`var(--origam-color__action--primary---fg)`) so the
+ *     module colour follows the active theme automatically.
+ *   • Raw CSS (`'#abc123'`, `'rgb(0,0,0)'`, `'currentColor'`) → passed
+ *     through verbatim.
+ *   • `undefined` / `null` / empty → falls back to `fallback`.
+ *
+ * `role` decides which token slot of the intent is read — and the
+ * mapping matches the rest of the DS semantics for `color="primary"`
+ * / `bgColor="primary"` on text + surface elements:
+ *
+ *   • `'foreground'` → the intent's OWN paint (via
+ *     `tokenForegroundForIntent`, i.e. `fgSubtle` for primary /
+ *     feedback intents, `secondary.fg` for neutral / secondary).
+ *     Matches how `useColor` resolves `color="primary"` on any text
+ *     element: the text is painted primary itself, NOT its
+ *     white-on-dark contrast.
+ *   • `'background'` → the intent's `bg` slot (the actual surface
+ *     paint, e.g. primary's main violet) — same channel
+ *     `bgColor="primary"` uses on Card / Btn / Chip.
+ *
+ * This means `qrCodeProps.color="primary"` paints PURPLE modules,
+ * exactly as a consumer reading "make the modules primary" would
+ * expect — not the contrast white-on-primary pairing that
+ * `intentFgExpr` returns.
+ */
+export declare function resolveQrColor(value: TColor | undefined | null, role: 'foreground' | 'background', fallback: string): string;
+/**
+ * Transform a DS-shaped rounded value (`TRounded` named rung, raw
+ * number, boolean, or string) into the per-module corner radius the
+ * QR encoder expects — a number in **module units** ([0, 0.5]).
+ *
+ *   • `'x-small'` … `'x-large'` → looked up in `ROUNDED_TO_CORNER`
+ *     (0.10 … 0.50 module units, picked so each rung paints a
+ *     visibly distinct module shape).
+ *   • `true` → 0.50 (legacy "fully rounded" alias).
+ *   • `false` / `''` / `null` / `undefined` → 0 (strict squares).
+ *   • `number` → clamped to `[0, 0.5]`.
+ *   • CSS dimension (`'4px'`, `'0.25rem'`, …) → 0 (modules speak
+ *     module units, not pixels — pixel input falls back to
+ *     squares instead of silently misbehaving).
+ */
+export declare function resolveQrCornerRadius(value: TRounded | number | boolean | string | null | undefined): number;

package/dist/src/utils/QrCode/qr-code-adapters.util.js

@@ -0,0 +1,27 @@
+import { intentBgExpr, isIntent, tokenForegroundForIntent } from "../Commons/color.util.js";
+const ROUNDED_TO_CORNER = {
+  "x-small": 0.1,
+  "small": 0.18,
+  "default": 0.25,
+  "medium": 0.3,
+  "large": 0.4,
+  "x-large": 0.5,
+  "shaped": 0.25,
+  "shaped-invert": 0.25
+};
+export function resolveQrColor(value, role, fallback) {
+  if (value === null || value === void 0 || value === "") return fallback;
+  if (isIntent(value)) {
+    return role === "foreground" ? tokenForegroundForIntent(value) : intentBgExpr(value, "default");
+  }
+  return String(value);
+}
+export function resolveQrCornerRadius(value) {
+  if (value === void 0 || value === null || value === false || value === "") return 0;
+  if (value === true) return 0.5;
+  if (typeof value === "number") return Math.max(0, Math.min(0.5, value));
+  if (typeof value === "string" && value in ROUNDED_TO_CORNER) {
+    return ROUNDED_TO_CORNER[value];
+  }
+  return 0;
+}

package/dist/src/utils/Theme/apply-theme.util.cjs

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyTheme = applyTheme;
+exports.applyThemes = applyThemes;
+exports.installedThemesFromList = installedThemesFromList;
+exports.resolveThemeVars = resolveThemeVars;
+exports.semanticTreeToVars = semanticTreeToVars;
+exports.themeSelector = themeSelector;
+exports.themeToCss = themeToCss;
+exports.themeVarsToVars = themeVarsToVars;
+var _tokenName = require("./token-name.util.cjs");
+const STYLE_ELEMENT_PREFIX = "origam-theme";
+function normaliseVarName(key) {
+  return key.startsWith("--") ? key : `--${key}`;
+}
+const VARS_GROUP_ROOTS = {
+  color: ["color"],
+  rounded: ["radius"],
+  border: ["border"],
+  typo: ["font"],
+  shadow: ["shadow"],
+  spacing: ["space"],
+  motion: ["motion"]
+};
+function isSemanticLeaf(node) {
+  const t = typeof node;
+  return t === "string" || t === "number";
+}
+function semanticTreeToVars(tree, rootPath) {
+  const out = {};
+  const walk = (node, path) => {
+    for (const key of Object.keys(node)) {
+      const child = node[key];
+      const nextPath = [...path, key];
+      if (isSemanticLeaf(child)) {
+        out[(0, _tokenName.tokenPathToCssVar)(nextPath, false)] = child;
+      } else {
+        walk(child, nextPath);
+      }
+    }
+  };
+  walk(tree, [...rootPath]);
+  return out;
+}
+function themeVarsToVars(vars) {
+  let out = {};
+  for (const group of Object.keys(VARS_GROUP_ROOTS)) {
+    const tree = vars[group];
+    if (!tree) continue;
+    out = {
+      ...out,
+      ...semanticTreeToVars(tree, VARS_GROUP_ROOTS[group])
+    };
+  }
+  return out;
+}
+function resolveThemeVars(theme) {
+  const fromVars = theme.vars ? themeVarsToVars(theme.vars) : {};
+  const fromCssVars = {};
+  if (theme.cssVars) {
+    for (const key of Object.keys(theme.cssVars)) {
+      fromCssVars[normaliseVarName(key)] = theme.cssVars[key];
+    }
+  }
+  return {
+    ...fromVars,
+    ...fromCssVars
+  };
+}
+function themeSelector(theme) {
+  const hasName = typeof theme.name === "string" && theme.name.length > 0;
+  const hasMode = theme.mode === "light" || theme.mode === "dark";
+  if (!hasName && !hasMode) return ":root";
+  if (!hasName) return `[data-mode="${theme.mode}"]`;
+  const attrs = `[data-theme="${theme.name}"]${hasMode ? `[data-mode="${theme.mode}"]` : ""}`;
+  return `:root:root${attrs}, ${attrs}`;
+}
+function themeToCss(theme) {
+  const vars = resolveThemeVars(theme);
+  const decls = Object.keys(vars).map(name => `  ${name}: ${vars[name]};`).join("\n");
+  return `${themeSelector(theme)} {
+${decls}
+}
+`;
+}
+function applyTheme(theme) {
+  if (typeof document === "undefined") return null;
+  const vars = resolveThemeVars(theme);
+  if (Object.keys(vars).length === 0) return null;
+  const namePart = theme.name ? `-${theme.name}` : "";
+  const modePart = theme.mode === "light" || theme.mode === "dark" ? `-${theme.mode}` : "";
+  const id = `${STYLE_ELEMENT_PREFIX}${namePart}${modePart}`;
+  let style = document.getElementById(id);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = id;
+    style.setAttribute("data-origam-theme", theme.name ?? "root");
+    if (modePart) style.setAttribute("data-origam-mode", theme.mode);
+    document.head.appendChild(style);
+  }
+  style.textContent = themeToCss(theme);
+  return id;
+}
+function applyThemes(themes) {
+  const ids = [];
+  for (const theme of themes) {
+    const id = applyTheme(theme);
+    if (id) ids.push(id);
+  }
+  return ids;
+}
+function installedThemesFromList(themes) {
+  const order = [];
+  const modesByName = /* @__PURE__ */new Map();
+  const metaByName = /* @__PURE__ */new Map();
+  for (const theme of themes) {
+    if (!theme.name) continue;
+    if (!modesByName.has(theme.name)) {
+      modesByName.set(theme.name, /* @__PURE__ */new Set());
+      metaByName.set(theme.name, {});
+      order.push(theme.name);
+    }
+    if (theme.mode === "light" || theme.mode === "dark") {
+      modesByName.get(theme.name).add(theme.mode);
+    }
+    const meta = metaByName.get(theme.name);
+    if (meta.label === void 0 && theme.label) meta.label = theme.label;
+    if (meta.description === void 0 && theme.description) meta.description = theme.description;
+    if (meta.swatch === void 0 && theme.swatch) meta.swatch = theme.swatch;
+  }
+  return order.map(name => {
+    const meta = metaByName.get(name);
+    return {
+      name,
+      modes: [...modesByName.get(name)],
+      label: meta.label ?? name,
+      ...(meta.description !== void 0 ? {
+        description: meta.description
+      } : {}),
+      ...(meta.swatch !== void 0 ? {
+        swatch: meta.swatch
+      } : {})
+    };
+  });
+}

package/dist/src/utils/Theme/apply-theme.util.d.ts

@@ -0,0 +1,65 @@
+import type { IOrigamTheme } from '../../interfaces';
+import type { ISemanticTree, IThemeVars, TInstalledThemes, TThemeVars } from '../../types';
+/**
+ * Walk a hand-authored semantic tree depth-first, prefixing every leaf path
+ * with `rootPath` and converting it to a `--origam-*` name through the shared
+ * `tokenPathToCssVar` grammar (primitive/semantic side, never component). The
+ * leaf value passes through verbatim — a gradient string is just a color value.
+ */
+export declare function semanticTreeToVars(tree: ISemanticTree, rootPath: ReadonlyArray<string>): TThemeVars;
+/**
+ * Collapse the structured `vars` token bucket (the normal authoring path) into a
+ * flat CSS-var map. Each group (`color` / `rounded` / `border` / `typo` /
+ * `shadow` / `spacing` / `motion`) is walked under its `--origam-*` root path.
+ */
+export declare function themeVarsToVars(vars: IThemeVars): TThemeVars;
+/**
+ * Resolve an `IOrigamTheme` to its flat CSS-var map.
+ *
+ * Precedence (low → high): the structured `vars` token bucket (the normal
+ * authoring path), then the `cssVars` raw `--origam-*` escape hatch (always
+ * wins on key collision).
+ */
+export declare function resolveThemeVars(theme: IOrigamTheme): TThemeVars;
+/**
+ * Compute the CSS selector a theme block targets, from its `name` / `mode`:
+ *   - neither            → `:root`
+ *   - name only          → `[data-theme="<name>"]`
+ *   - mode only          → `[data-mode="<mode>"]`
+ *   - name + mode        → `[data-theme="<name>"][data-mode="<mode>"]`
+ *
+ * A `mode` of `'auto'` is treated as "no mode scoping".
+ */
+export declare function themeSelector(theme: IOrigamTheme): string;
+/**
+ * Serialise an `IOrigamTheme` to a CSS rule string:
+ *   `<selector> {\n  --origam-…: value;\n  …\n}`
+ *
+ * Pure — no DOM access. Used both by `applyTheme` (runtime injection) and by
+ * the Theme Builder's CSS export so a single code path produces both.
+ */
+export declare function themeToCss(theme: IOrigamTheme): string;
+/**
+ * Inject (or replace) a theme's CSS variables into `<head>` at runtime.
+ * SSR-safe: a no-op when `document` is unavailable. Returns the `<style>`
+ * element id used, or `null` when skipped (SSR / empty theme).
+ *
+ * The element id derives from the theme name so multiple named themes can
+ * coexist; re-applying the same theme replaces its block in place.
+ */
+export declare function applyTheme(theme: IOrigamTheme): string | null;
+/**
+ * Install a list of themes at once: injects each one's scoped block (via
+ * `applyTheme`) and returns the ids that were actually written (SSR / empty
+ * themes are skipped, so the result may be shorter than the input).
+ */
+export declare function applyThemes(themes: IOrigamTheme[]): string[];
+/**
+ * Collapse an `IOrigamTheme[]` into the distinct-brand summary exposed to
+ * consumers: one entry per `name`, listing every concrete mode that brand was
+ * installed for, plus the UI metadata (`label` / `description` / `swatch`)
+ * gathered from the objects of that brand (first non-empty value wins; `label`
+ * falls back to `name`). Themes without a `name` (root-scoped) are ignored —
+ * they are not selectable brands. Pure (no DOM access), so it runs SSR-side.
+ */
+export declare function installedThemesFromList(themes: IOrigamTheme[]): TInstalledThemes;

package/dist/src/utils/Theme/apply-theme.util.js

@@ -0,0 +1,125 @@
+import { tokenPathToCssVar } from "./token-name.util.js";
+const STYLE_ELEMENT_PREFIX = "origam-theme";
+function normaliseVarName(key) {
+  return key.startsWith("--") ? key : `--${key}`;
+}
+const VARS_GROUP_ROOTS = {
+  color: ["color"],
+  rounded: ["radius"],
+  border: ["border"],
+  typo: ["font"],
+  shadow: ["shadow"],
+  spacing: ["space"],
+  motion: ["motion"]
+};
+function isSemanticLeaf(node) {
+  const t = typeof node;
+  return t === "string" || t === "number";
+}
+export function semanticTreeToVars(tree, rootPath) {
+  const out = {};
+  const walk = (node, path) => {
+    for (const key of Object.keys(node)) {
+      const child = node[key];
+      const nextPath = [...path, key];
+      if (isSemanticLeaf(child)) {
+        out[tokenPathToCssVar(nextPath, false)] = child;
+      } else {
+        walk(child, nextPath);
+      }
+    }
+  };
+  walk(tree, [...rootPath]);
+  return out;
+}
+export function themeVarsToVars(vars) {
+  let out = {};
+  for (const group of Object.keys(VARS_GROUP_ROOTS)) {
+    const tree = vars[group];
+    if (!tree) continue;
+    out = { ...out, ...semanticTreeToVars(tree, VARS_GROUP_ROOTS[group]) };
+  }
+  return out;
+}
+export function resolveThemeVars(theme) {
+  const fromVars = theme.vars ? themeVarsToVars(theme.vars) : {};
+  const fromCssVars = {};
+  if (theme.cssVars) {
+    for (const key of Object.keys(theme.cssVars)) {
+      fromCssVars[normaliseVarName(key)] = theme.cssVars[key];
+    }
+  }
+  return { ...fromVars, ...fromCssVars };
+}
+export function themeSelector(theme) {
+  const hasName = typeof theme.name === "string" && theme.name.length > 0;
+  const hasMode = theme.mode === "light" || theme.mode === "dark";
+  if (!hasName && !hasMode) return ":root";
+  if (!hasName) return `[data-mode="${theme.mode}"]`;
+  const attrs = `[data-theme="${theme.name}"]${hasMode ? `[data-mode="${theme.mode}"]` : ""}`;
+  return `:root:root${attrs}, ${attrs}`;
+}
+export function themeToCss(theme) {
+  const vars = resolveThemeVars(theme);
+  const decls = Object.keys(vars).map((name) => `  ${name}: ${vars[name]};`).join("\n");
+  return `${themeSelector(theme)} {
+${decls}
+}
+`;
+}
+export function applyTheme(theme) {
+  if (typeof document === "undefined") return null;
+  const vars = resolveThemeVars(theme);
+  if (Object.keys(vars).length === 0) return null;
+  const namePart = theme.name ? `-${theme.name}` : "";
+  const modePart = theme.mode === "light" || theme.mode === "dark" ? `-${theme.mode}` : "";
+  const id = `${STYLE_ELEMENT_PREFIX}${namePart}${modePart}`;
+  let style = document.getElementById(id);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = id;
+    style.setAttribute("data-origam-theme", theme.name ?? "root");
+    if (modePart) style.setAttribute("data-origam-mode", theme.mode);
+    document.head.appendChild(style);
+  }
+  style.textContent = themeToCss(theme);
+  return id;
+}
+export function applyThemes(themes) {
+  const ids = [];
+  for (const theme of themes) {
+    const id = applyTheme(theme);
+    if (id) ids.push(id);
+  }
+  return ids;
+}
+export function installedThemesFromList(themes) {
+  const order = [];
+  const modesByName = /* @__PURE__ */ new Map();
+  const metaByName = /* @__PURE__ */ new Map();
+  for (const theme of themes) {
+    if (!theme.name) continue;
+    if (!modesByName.has(theme.name)) {
+      modesByName.set(theme.name, /* @__PURE__ */ new Set());
+      metaByName.set(theme.name, {});
+      order.push(theme.name);
+    }
+    if (theme.mode === "light" || theme.mode === "dark") {
+      modesByName.get(theme.name).add(theme.mode);
+    }
+    const meta = metaByName.get(theme.name);
+    if (meta.label === void 0 && theme.label) meta.label = theme.label;
+    if (meta.description === void 0 && theme.description) meta.description = theme.description;
+    if (meta.swatch === void 0 && theme.swatch) meta.swatch = theme.swatch;
+  }
+  return order.map((name) => {
+    const meta = metaByName.get(name);
+    return {
+      name,
+      modes: [...modesByName.get(name)],
+      label: meta.label ?? name,
+      ...meta.description !== void 0 ? { description: meta.description } : {},
+      ...meta.swatch !== void 0 ? { swatch: meta.swatch } : {}
+    };
+  });
+}

package/dist/src/utils/Theme/token-name.util.cjs

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOKEN_INTENT_STATES = void 0;
+exports.isBemChildKey = isBemChildKey;
+exports.tokenPathToCssVar = tokenPathToCssVar;
+exports.tokenPathToCssVarName = tokenPathToCssVarName;
+const TOKEN_INTENT_STATES = exports.TOKEN_INTENT_STATES = /* @__PURE__ */new Set(["primary", "secondary", "ghost", "success", "warning", "danger", "info", "error", "selected", "outlined", "elevated", "filter", "hover", "active", "disabled", "focus"]);
+function isBemChildKey(key) {
+  return /^[a-zA-Z]+$/.test(key) && !key.includes("-");
+}
+function tokenPathToCssVarName(path, isComponent) {
+  if (isComponent) {
+    const [blockName, ...rest] = path;
+    if (rest.length === 0) {
+      return `origam-${blockName}`;
+    }
+    if (rest.length > 1 && TOKEN_INTENT_STATES.has(rest[0])) {
+      const [state, ...propParts] = rest;
+      return `origam-${blockName}--${state}---${propParts.join("-")}`;
+    }
+    if (rest.length > 1 && isBemChildKey(rest[0])) {
+      const [child, ...propParts] = rest;
+      if (propParts.length > 1 && TOKEN_INTENT_STATES.has(propParts[0])) {
+        const [state, ...innerProp] = propParts;
+        return `origam-${blockName}__${child}--${state}---${innerProp.join("-")}`;
+      }
+      return `origam-${blockName}__${child}---${propParts.join("-")}`;
+    }
+    return `origam-${blockName}---${rest.join("-")}`;
+  }
+  if (path.length === 2) {
+    return `origam-${path[0]}---${path[1]}`;
+  }
+  if (path.length === 3) {
+    return `origam-${path[0]}__${path[1]}---${path[2]}`;
+  }
+  if (path.length === 4) {
+    return `origam-${path[0]}__${path[1]}--${path[2]}---${path[3]}`;
+  }
+  return `origam-${path.join("-")}`;
+}
+function tokenPathToCssVar(path, isComponent) {
+  return `--${tokenPathToCssVarName(path, isComponent)}`;
+}