@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/dist/theme/tokens.d.ts

@@ -8,11 +8,6 @@
  * build-time theme adapters, chart configuration, canvas/SVG rendering, tests,
  * or plain JS theme objects for other styling libraries.
  *
- * Derived tokens can reference other tokens (`var(--color-accent)`) and use CSS
- * color functions (`color-mix`). The resolver follows those references through
- * the theme iteratively and evaluates the supported color functions so callers
- * receive concrete raw values, not CSS expressions.
- *
  * SYNC: When modified, update:
  * - /packages/core/src/theme/useTheme.ts
  * - /packages/core/src/theme/index.ts
@@ -56,11 +51,8 @@ export declare const tokenVars: Record<TokenName, string>;
  * The result starts with `tokenDefaults`, applies `theme.tokens`, then
  * reapplies `theme.__inputTokens` when available so explicit tuple overrides
  * retain their original light/dark sides instead of relying on CSS parsing.
- * A final pass resolves any `var()` references between tokens and evaluates
- * the CSS color functions the theme generator emits (e.g. `color-mix`), so
- * derived tokens like `--color-text-accent` return concrete values rather than
- * `var(--color-accent)`. This mirrors the token resolution used by
- * `useTheme()` but does not need React context or media queries.
+ * This mirrors the token resolution used by `useTheme()` but does not need
+ * React context or media queries.
  *
  * Pass `theme` as null/undefined to resolve defaults only.
  */

package/dist/theme/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,SAAS,EAEf,MAAM,eAAe,CAAC;AAGvB,kFAAkF;AAClF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,kGAAkG;IAClG,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,2DAA2D;AAC3D,MAAM,WAAW,wBAAyB,SAAQ,yBAAyB;IACzE,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,MAAM,CAEhE;AAED,sFAAsF;AACtF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAElB,CAAC;AAqT/B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACtC,OAAO,EAAE,yBAAyB,GACjC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAyBxB;AAED,2EAA2E;AAC3E,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACtC,IAAI,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,OAAO,EAAE,wBAAwB,GAChC,MAAM,CAGR"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,SAAS,EAEf,MAAM,eAAe,CAAC;AAEvB,kFAAkF;AAClF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,kGAAkG;IAClG,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,2DAA2D;AAC3D,MAAM,WAAW,wBAAyB,SAAQ,yBAAyB;IACzE,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,MAAM,CAEhE;AAED,sFAAsF;AACtF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAElB,CAAC;AAmF/B;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACtC,OAAO,EAAE,yBAAyB,GACjC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAyBxB;AAED,2EAA2E;AAC3E,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACtC,IAAI,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,OAAO,EAAE,wBAAwB,GAChC,MAAM,CAGR"}

package/dist/theme/tokens.js

@@ -10,18 +10,12 @@
  * build-time theme adapters, chart configuration, canvas/SVG rendering, tests,
  * or plain JS theme objects for other styling libraries.
  *
- * Derived tokens can reference other tokens (`var(--color-accent)`) and use CSS
- * color functions (`color-mix`). The resolver follows those references through
- * the theme iteratively and evaluates the supported color functions so callers
- * receive concrete raw values, not CSS expressions.
- *
  * SYNC: When modified, update:
  * - /packages/core/src/theme/useTheme.ts
  * - /packages/core/src/theme/index.ts
  */
 
 import { tokenDefaults } from "./defineTheme.js";
-import { parseColor, formatColor } from "../utils/color.js";
 
 /** Resolved color mode used when choosing the side of light/dark token values. */
 
@@ -121,224 +115,14 @@ function resolveXDSTokenValue(value, mode) {
   return value;
 }
 
-// =============================================================================
-// Reference resolution — turn token expressions into concrete raw values
-// =============================================================================
-//
-// Generated themes emit derived tokens as references to other tokens rather
-// than baked-in values, so a scoped CSS override of a base token re-themes the
-// subtree that references it. The CSS cascade resolves those references, but
-// non-CSS consumers (canvas, SVG, data-viz) need the concrete value. These
-// helpers replay the same resolution in JS: follow `var()` references through
-// the resolved token map (iteratively, guarding against cycles) and evaluate
-// the CSS color functions used by the theme generator against those values.
-
-/** Index of the `)` matching the `(` at `openIndex`, or -1 when unbalanced. */
-function findMatchingParen(input, openIndex) {
-  let depth = 0;
-  for (let i = openIndex; i < input.length; i++) {
-    const char = input[i];
-    if (char === '(') {
-      depth++;
-    } else if (char === ')') {
-      depth--;
-      if (depth === 0) {
-        return i;
-      }
-    }
-  }
-  return -1;
-}
-
-/** Split a color-mix component into its color and optional percentage. */
-function parseMixComponent(part) {
-  const trimmed = part.trim();
-  const match = trimmed.match(/\s+([\d.]+)%$/);
-  if (match) {
-    return {
-      color: trimmed.slice(0, match.index).trim(),
-      percentage: parseFloat(match[1])
-    };
-  }
-  return {
-    color: trimmed,
-    percentage: null
-  };
-}
-
-/**
- * Evaluate `color-mix(in <space>, c1 [p1], c2 [p2])` to a concrete color.
- *
- * Supports the `srgb` color space (the one the theme generator emits) using
- * the CSS Color 5 algorithm: normalize the percentages, interpolate the
- * premultiplied channels, then apply the alpha multiplier when the mix weights
- * sum to less than 100%. Returns null for anything it can't evaluate so the
- * original expression is preserved rather than guessed.
- */
-function evaluateColorMix(body) {
-  const spaceMatch = body.match(/^in\s+([\w-]+)\s*,\s*(.+)$/s);
-  if (!spaceMatch) {
-    return null;
-  }
-  const [, colorSpace, rest] = spaceMatch;
-  if (colorSpace.toLowerCase() !== 'srgb') {
-    return null;
-  }
-  const split = splitTopLevelComma(rest);
-  if (split === null) {
-    return null;
-  }
-  const first = parseMixComponent(split[0]);
-  const second = parseMixComponent(split[1]);
-  if (first === null || second === null) {
-    return null;
-  }
-  const c1 = parseColor(first.color);
-  const c2 = parseColor(second.color);
-  if (c1 === null || c2 === null) {
-    return null;
-  }
-
-  // Fill in omitted percentages, then normalize so they sum to 100%.
-  let p1;
-  let p2;
-  if (first.percentage !== null && second.percentage !== null) {
-    p1 = first.percentage;
-    p2 = second.percentage;
-  } else if (first.percentage !== null) {
-    p1 = first.percentage;
-    p2 = 100 - p1;
-  } else if (second.percentage !== null) {
-    p2 = second.percentage;
-    p1 = 100 - p2;
-  } else {
-    p1 = 50;
-    p2 = 50;
-  }
-  const sum = p1 + p2;
-  if (sum <= 0) {
-    return null;
-  }
-  const w1 = p1 / sum;
-  const w2 = p2 / sum;
-  const alphaMultiplier = sum < 100 ? sum / 100 : 1;
-
-  // Interpolate in premultiplied sRGB, then un-premultiply.
-  const mixedA = w1 * c1.a + w2 * c2.a;
-  const premix = (k1, k2) => w1 * k1 * c1.a + w2 * k2 * c2.a;
-  const rp = premix(c1.r, c2.r);
-  const gp = premix(c1.g, c2.g);
-  const bp = premix(c1.b, c2.b);
-  const rgb = mixedA === 0 ? {
-    r: 0,
-    g: 0,
-    b: 0
-  } : {
-    r: rp / mixedA,
-    g: gp / mixedA,
-    b: bp / mixedA
-  };
-  return formatColor({
-    ...rgb,
-    a: mixedA * alphaMultiplier
-  });
-}
-
-/** Evaluate every supported color function in an expression, innermost first. */
-function evaluateColorFunctions(expr) {
-  const idx = expr.indexOf('color-mix(');
-  if (idx === -1) {
-    return expr;
-  }
-  const openIndex = idx + 'color-mix'.length;
-  const closeIndex = findMatchingParen(expr, openIndex);
-  if (closeIndex === -1) {
-    return expr;
-  }
-  const body = evaluateColorFunctions(expr.slice(openIndex + 1, closeIndex));
-  const evaluated = evaluateColorMix(body);
-  const replacement = evaluated ?? `color-mix(${body})`;
-  return expr.slice(0, idx) + replacement + evaluateColorFunctions(expr.slice(closeIndex + 1));
-}
-
-/**
- * Substitute `var(--name[, fallback])` references with their resolved values.
- * `seen` tracks the reference chain so cycles resolve to the literal reference
- * instead of recursing forever.
- */
-function substituteVars(expr, raw, cache, seen) {
-  const start = expr.indexOf('var(');
-  if (start === -1) {
-    return expr;
-  }
-  const openIndex = start + 'var'.length;
-  const closeIndex = findMatchingParen(expr, openIndex);
-  if (closeIndex === -1) {
-    return expr;
-  }
-  const inner = expr.slice(openIndex + 1, closeIndex);
-  const commaSplit = splitTopLevelComma(inner);
-  const name = (commaSplit ? commaSplit[0] : inner).trim();
-  const fallback = commaSplit ? commaSplit[1] : null;
-  let replacement;
-  if (seen.has(name)) {
-    replacement = expr.slice(start, closeIndex + 1);
-  } else if (name in raw) {
-    seen.add(name);
-    replacement = resolveReference(name, raw, cache, seen);
-    seen.delete(name);
-  } else if (fallback !== null) {
-    replacement = substituteVars(fallback.trim(), raw, cache, seen);
-  } else {
-    replacement = expr.slice(start, closeIndex + 1);
-  }
-  const rest = substituteVars(expr.slice(closeIndex + 1), raw, cache, seen);
-  return expr.slice(0, start) + replacement + rest;
-}
-
-/** Fully resolve a single expression: substitute references, then evaluate colors. */
-function resolveExpression(expr, raw, cache, seen) {
-  if (!expr.includes('var(') && !expr.includes('color-mix(')) {
-    return expr;
-  }
-  const substituted = substituteVars(expr, raw, cache, seen);
-  return evaluateColorFunctions(substituted);
-}
-
-/** Resolve one token by name, memoizing the result in `cache`. */
-function resolveReference(name, raw, cache, seen) {
-  if (name in cache) {
-    return cache[name];
-  }
-  const value = raw[name];
-  if (value === undefined) {
-    return '';
-  }
-  const resolved = resolveExpression(value, raw, cache, seen);
-  cache[name] = resolved;
-  return resolved;
-}
-
-/** Resolve every reference/color function in a raw token map to concrete values. */
-function resolveReferences(raw) {
-  const cache = {};
-  for (const name of Object.keys(raw)) {
-    resolveReference(name, raw, cache, new Set());
-  }
-  return cache;
-}
-
 /**
  * Resolve all Astryx token values for a theme and effective color mode.
  *
  * The result starts with `tokenDefaults`, applies `theme.tokens`, then
  * reapplies `theme.__inputTokens` when available so explicit tuple overrides
  * retain their original light/dark sides instead of relying on CSS parsing.
- * A final pass resolves any `var()` references between tokens and evaluates
- * the CSS color functions the theme generator emits (e.g. `color-mix`), so
- * derived tokens like `--color-text-accent` return concrete values rather than
- * `var(--color-accent)`. This mirrors the token resolution used by
- * `useTheme()` but does not need React context or media queries.
+ * This mirrors the token resolution used by `useTheme()` but does not need
+ * React context or media queries.
  *
  * Pass `theme` as null/undefined to resolve defaults only.
  */
@@ -351,7 +135,7 @@ export function resolveThemeTokens(theme, options) {
     resolved[key] = resolveXDSTokenValue(value, mode);
   }
   if (theme == null) {
-    return resolveReferences(resolved);
+    return resolved;
   }
   for (const [key, value] of Object.entries(theme.tokens)) {
     resolved[key] = resolveXDSTokenValue(value, mode);
@@ -363,7 +147,7 @@ export function resolveThemeTokens(theme, options) {
       }
     }
   }
-  return resolveReferences(resolved);
+  return resolved;
 }
 
 /** Resolve one Astryx token value for a theme and effective color mode. */

package/dist/theme/useTheme.d.ts

@@ -57,9 +57,8 @@ export interface UseThemeReturn {
  * (e.g. Vega, D3, Chart.js) that need concrete values rather than
  * CSS custom property references.
  *
- * When called outside a <Theme> provider, resolves mode from the root
- * Theme's `<html data-theme>` when one is present, falling back to the
- * current system color mode otherwise.
+ * When called outside an <Theme> provider, returns the default theme
+ * tokens resolved against the current system color mode.
  *
  * @example
  * ```

package/dist/theme/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/theme/useTheme.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,eAAe,CAAC;AAQhD;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,KAAK,EAAE,YAAY,CAAC;IACpB,0CAA0C;IAC1C,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAO1E;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;OAaG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC;;;;;;;OAOG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AA4ED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,IAAI,cAAc,CAiCzC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/theme/useTheme.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,eAAe,CAAC;AAQhD;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,KAAK,EAAE,YAAY,CAAC;IACpB,0CAA0C;IAC1C,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAO1E;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;OAaG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC;;;;;;;OAOG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,IAAI,cAAc,CA4BzC"}

package/dist/theme/useTheme.js

@@ -9,18 +9,13 @@
  * @position Theme hook; used by data viz, canvas, and non-CSS consumers
  *
  * Provides synchronous access to theme token values resolved for the
- * current color mode — no DOM reads on the provider path, no double render.
- * Without a reachable ThemeContext it consults `<html data-theme>` (kept in
- * sync by Theme) via a single shared, refcounted MutationObserver before
- * assuming OS preference; provider-path consumers subscribe to a no-op
- * store instead (the same args-switch technique useMediaQuery uses), so
- * mounting under a Theme never creates an observer. Token resolution is
- * shared with the server-safe helpers in ./tokens.ts.
+ * current color mode — no DOM reads, no double render. Token resolution
+ * is shared with the server-safe helpers in ./tokens.ts.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/theme/index.ts
  */
-import { createContext, use, useMemo, useSyncExternalStore } from 'react';
+import { createContext, use, useMemo } from 'react';
 import { resolveThemeTokens } from "./tokens.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
 
@@ -53,62 +48,6 @@ ThemeContext.displayName = 'ThemeContext';
 // Hook
 // =============================================================================
 
-function getRootThemeAttrSnapshot() {
-  if (typeof document === 'undefined') {
-    return null;
-  }
-  const attr = document.documentElement.getAttribute('data-theme');
-  return attr === 'light' || attr === 'dark' ? attr : null;
-}
-function getRootThemeAttrServerSnapshot() {
-  return null;
-}
-function getNullThemeMode() {
-  return null;
-}
-
-// Every no-context consumer wants the same <html data-theme> attribute, so
-// one MutationObserver — refcounted via this listener set — serves all of
-// them instead of one per consumer.
-const rootThemeAttrListeners = new Set();
-let rootThemeAttrObserver = null;
-function notifyRootThemeAttrListeners() {
-  for (const listener of rootThemeAttrListeners) {
-    listener();
-  }
-}
-function subscribeRootThemeAttr(onStoreChange) {
-  rootThemeAttrListeners.add(onStoreChange);
-  if (rootThemeAttrListeners.size === 1 && typeof MutationObserver !== 'undefined') {
-    rootThemeAttrObserver = new MutationObserver(notifyRootThemeAttrListeners);
-    rootThemeAttrObserver.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['data-theme']
-    });
-  }
-  return () => {
-    rootThemeAttrListeners.delete(onStoreChange);
-    if (rootThemeAttrListeners.size === 0 && rootThemeAttrObserver) {
-      rootThemeAttrObserver.disconnect();
-      rootThemeAttrObserver = null;
-    }
-  };
-}
-function subscribeNoop() {
-  return () => {};
-}
-
-/**
- * Reads the root Theme's mode off `<html data-theme>`, live via the shared
- * MutationObserver. Null means no root Theme has synced it (none present,
- * or mode is 'system'). `hasCtx` switches which store this subscribes to —
- * a no-op store when a ThemeContext exists — instead of skipping the hook
- * call, so provider-path consumers never touch the DOM or the observer.
- */
-function useRootThemeModeAttr(hasCtx) {
-  return useSyncExternalStore(hasCtx ? subscribeNoop : subscribeRootThemeAttr, hasCtx ? getNullThemeMode : getRootThemeAttrSnapshot, getRootThemeAttrServerSnapshot);
-}
-
 /**
  * Access the current Astryx theme's token values, resolved for the active color mode.
  *
@@ -117,9 +56,8 @@ function useRootThemeModeAttr(hasCtx) {
  * (e.g. Vega, D3, Chart.js) that need concrete values rather than
  * CSS custom property references.
  *
- * When called outside a <Theme> provider, resolves mode from the root
- * Theme's `<html data-theme>` when one is present, falling back to the
- * current system color mode otherwise.
+ * When called outside an <Theme> provider, returns the default theme
+ * tokens resolved against the current system color mode.
  *
  * @example
  * ```
@@ -137,14 +75,9 @@ function useRootThemeModeAttr(hasCtx) {
 export function useTheme() {
   const ctx = use(ThemeContext);
 
-  // Falls back to the root Theme's mode via <html data-theme> when there's
-  // no ThemeContext ancestor (e.g. useToast's detached fallback viewport).
-  // Resolves to null when `ctx` is present, so it has no effect there.
-  const rootAttrMode = useRootThemeModeAttr(ctx != null);
-
   // Resolve 'system' to 'light' | 'dark' using the OS preference
   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
-  const mode = ctx?.mode ?? rootAttrMode ?? 'system';
+  const mode = ctx?.mode ?? 'system';
   const theme = ctx?.theme ?? null;
   const effectiveMode = mode === 'system' ? prefersDark ? 'dark' : 'light' : mode;
 

package/dist/utils/index.d.ts

@@ -14,7 +14,6 @@ export { parseStyleKey } from './parseStyleKey';
 export { getKey, type Key, type KeyFallback } from './getKey';
 export { mergeProps } from './mergeProps';
 export { mergeRefs } from './mergeRefs';
-export { composeEventHandlers } from './composeEventHandlers';
 export { themeProps, themeDataAttributes } from './themeProps';
 export type { ClassValue, ClassProps, ThemeDataAttributes, ThemeProps, } from './themeProps';
 export { groupItems, getItemGroup } from './groupItems';
@@ -23,6 +22,4 @@ export { observeResize, unobserveResize } from './sharedResizeObserver';
 export { isRenderable } from './isRenderable';
 export { getInputARIA } from './inputAria';
 export type { InputARIA, InputARIAInputGroup } from './inputAria';
-export { parseHex, parseRgb, parseColor, formatHex, formatColor } from './color';
-export type { RGBA } from './color';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,YAAY,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,YAAY,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAEhF,OAAO,EACL,cAAc,EACd,SAAS,EACT,QAAQ,EACR,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,eAAe,EACf,wBAAwB,EACxB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,2BAA2B,GAC5B,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,aAAa,EACb,SAAS,EACT,UAAU,EACV,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAE5D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAE,KAAK,GAAG,EAAE,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAE5D,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,UAAU,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAC7D,YAAY,EACV,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,UAAU,GACX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AACtD,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,YAAY,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAEhE,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,SAAS,CAAC;AAC/E,YAAY,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,YAAY,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAEvC,YAAY,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAEhF,OAAO,EACL,cAAc,EACd,SAAS,EACT,QAAQ,EACR,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,eAAe,EACf,wBAAwB,EACxB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,2BAA2B,GAC5B,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,aAAa,EACb,SAAS,EACT,UAAU,EACV,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,cAAc,CAAC;AAE5D,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAE,KAAK,GAAG,EAAE,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAE5D,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,UAAU,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAC7D,YAAY,EACV,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,UAAU,GACX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AACtD,YAAY,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AACzC,YAAY,EAAC,SAAS,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC"}

package/dist/utils/index.js

@@ -14,10 +14,8 @@ export { parseStyleKey } from "./parseStyleKey.js";
 export { getKey } from "./getKey.js";
 export { mergeProps } from "./mergeProps.js";
 export { mergeRefs } from "./mergeRefs.js";
-export { composeEventHandlers } from "./composeEventHandlers.js";
 export { themeProps, themeDataAttributes } from "./themeProps.js";
 export { groupItems, getItemGroup } from "./groupItems.js";
 export { observeResize, unobserveResize } from "./sharedResizeObserver.js";
 export { isRenderable } from "./isRenderable.js";
-export { getInputARIA } from "./inputAria.js";
-export { parseHex, parseRgb, parseColor, formatHex, formatColor } from "./color.js";
+export { getInputARIA } from "./inputAria.js";

package/dist/utils/timeParser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeParser.d.ts","sourceRoot":"","sources":["../../src/utils/timeParser.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG;IAAC,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAA;CAAC,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAMvE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CA6B5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,UAAU,EAChB,cAAc,GAAE,OAAe,GAC9B,aAAa,CAUf;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,aAAa,GAAG,SAAS,EAC/B,cAAc,GAAE,OAAe,GAC9B,MAAM,CAqBR;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,aAAa,GAAG,SAAS,EAC/B,cAAc,GAAE,OAAe,GAC9B,MAAM,CAmBR;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,cAAc,GAAE,OAAe,GAC9B,aAAa,GAAG,IAAI,CAuGtB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,CAAC,EAAE,aAAa,GAAG,SAAS,EAC5B,CAAC,EAAE,aAAa,GAAG,SAAS,GAC3B,MAAM,CA4BR;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,GAClB,OAAO,CAQT;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,cAAc,GAAE,OAAe,GAC9B,aAAa,CAoBf;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,aAAa,EACnB,YAAY,EAAE,MAAM,EACpB,cAAc,GAAE,OAAe,GAC9B,aAAa,CAwBf"}
+{"version":3,"file":"timeParser.d.ts","sourceRoot":"","sources":["../../src/utils/timeParser.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG;IAAC,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAA;CAAC,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAMvE;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CA6B5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,UAAU,EAChB,cAAc,GAAE,OAAe,GAC9B,aAAa,CAUf;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,aAAa,GAAG,SAAS,EAC/B,cAAc,GAAE,OAAe,GAC9B,MAAM,CAqBR;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,aAAa,GAAG,SAAS,EAC/B,cAAc,GAAE,OAAe,GAC9B,MAAM,CAmBR;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,cAAc,GAAE,OAAe,GAC9B,aAAa,GAAG,IAAI,CAuGtB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,CAAC,EAAE,aAAa,GAAG,SAAS,EAC5B,CAAC,EAAE,aAAa,GAAG,SAAS,GAC3B,MAAM,CA4BR;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,GAClB,OAAO,CAQT;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,GAAG,CAAC,EAAE,aAAa,EACnB,cAAc,GAAE,OAAe,GAC9B,aAAa,CAoBf;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,aAAa,EACnB,YAAY,EAAE,MAAM,EACpB,cAAc,GAAE,OAAe,GAC9B,aAAa,CAqBf"}

package/dist/utils/timeParser.js

@@ -305,16 +305,13 @@ export function adjustTime(time, deltaMinutes, includeSeconds = false) {
   if (!parsed) {
     return time;
   }
-
-  // A non-finite delta would spin the wrap-around forever (-Infinity) or
-  // produce "NaN:NaN" (NaN) — return the input unchanged instead.
-  if (!Number.isFinite(deltaMinutes)) {
-    return time;
-  }
   let totalMinutes = parsed.hour * 60 + parsed.minute + deltaMinutes;
 
-  // Wrap around midnight (double-modulo handles negatives in O(1))
-  totalMinutes = (totalMinutes % (24 * 60) + 24 * 60) % (24 * 60);
+  // Wrap around midnight
+  while (totalMinutes < 0) {
+    totalMinutes += 24 * 60;
+  }
+  totalMinutes = totalMinutes % (24 * 60);
   const newHour = Math.floor(totalMinutes / 60);
   const newMinute = totalMinutes % 60;
   return formatISOTime({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.1.4-canary.ff77e1c",
+  "version": "0.1.4",
   "displayName": "XDS Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -626,14 +626,14 @@
     "CHANGELOG.md"
   ],
   "peerDependencies": {
-    "@stylexjs/stylex": "^0.19.0",
+    "@stylexjs/stylex": "^0.18.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
-    "@babel/preset-react": "^8.0.1",
+    "@babel/preset-react": "^7.29.7",
     "@babel/preset-typescript": "^7.29.7",
     "@stylexjs/babel-plugin": "^0.19.0",
     "@testing-library/dom": "^10.0.0",

package/src/AlertDialog/AlertDialog.doc.mjs

@@ -28,10 +28,6 @@ export const docs = {
       {guidance: false, description: 'Use AlertDialog for non-destructive actions; use a standard Dialog instead.'},
     ],
   },
-  // Intentionally a contained isInline preview, not playground.overlay: the
-  // component stays visible on load and knobs stay live, whereas a real
-  // showModal() overlay makes the page inert — see PlaygroundConfig.overlay
-  // in docs-types.ts (#3657).
   playground: {
     defaults: {
       isOpen: true,

package/src/AlertDialog/AlertDialog.tsx

@@ -132,7 +132,6 @@ export function AlertDialog({
   className,
   style,
   'data-testid': testId,
-  ...rest
 }: AlertDialogProps) {
   const titleId = useId();
   const descriptionId = useId();
@@ -143,7 +142,6 @@ export function AlertDialog({
 
   return (
     <Dialog
-      {...rest}
       ref={ref}
       isOpen={isOpen}
       isInline={isInline}

package/src/AppShell/AppShell.tsx

@@ -470,7 +470,6 @@ export function AppShell({
   className,
   style,
   ref,
-  ...rest
 }: AppShellProps) {
   // =========================================================================
   // Parse mobileNav prop — normalize to config, custom element, or disabled
@@ -769,7 +768,6 @@ export function AppShell({
   return (
     <AppShellMobileContext value={mobileContextValue}>
       <div
-        {...rest}
         ref={mergeRefs(ref, shellRef)}
         data-testid={dataTestId}
         {...mergeProps(

package/src/AspectRatio/AspectRatio.doc.mjs

@@ -13,7 +13,6 @@ export const docs = {
     bestPractices: [
       {guidance: true, description: 'Express the ratio as a fraction like `16/9` or `4/3` for readability.'},
       {guidance: true, description: 'Use for media that needs consistent proportions across screen sizes.'},
-      {guidance: true, description: 'Use `fit="cover"` for images and video so the component sizes the child; the child should not repeat `width`/`height`/`objectFit` styles.'},
       {guidance: false, description: 'Use for general layout containers; use standard layout components instead.'},
       {guidance: false, description: 'Nest AspectRatio containers; one level is sufficient.'},
     ],
@@ -25,17 +24,6 @@ export const docs = {
       description: 'Aspect ratio as width/height (e.g. 16/9, 1).',
       required: true,
     },
-    {
-      name: 'shape',
-      type: "'rectangle' | 'ellipse'",
-      description: 'Container shape. Both respect the `ratio`. `ellipse` clips to an oval (a circle when `ratio={1}`).',
-      default: "'rectangle'",
-    },
-    {
-      name: 'fit',
-      type: "'cover' | 'contain' | 'center'",
-      description: 'How the child is sized inside the ratio box. `cover` fills and crops media, `contain` fills and letterboxes, `center` keeps the natural size centered. When omitted, the child styles itself.',
-    },
     {
       name: 'children',
       type: 'ReactNode',
@@ -72,24 +60,12 @@ export const docsZh = {
     bestPractices: [
       {guidance: true, description: 'Express the ratio as a fraction like `16/9` or `4/3` for readability.'},
       {guidance: true, description: 'Use for media that needs consistent proportions across screen sizes.'},
-      {guidance: true, description: 'Use `fit="cover"` for images and video so the component sizes the child; the child should not repeat `width`/`height`/`objectFit` styles.'},
       {guidance: false, description: 'Use for general layout containers; use standard layout components instead.'},
       {guidance: false, description: 'Nest AspectRatio containers; one level is sufficient.'},
     ],
   },
   props: [
     {name: 'ratio', type: 'number', description: '宽高比，以宽/高表示（例如 16/9、1）。', required: true},
-    {
-      name: 'shape',
-      type: "'rectangle' | 'ellipse'",
-      description: '容器形状。两种形状都遵循 `ratio`。`ellipse` 裁剪为椭圆（`ratio={1}` 时为正圆）。',
-      default: "'rectangle'",
-    },
-    {
-      name: 'fit',
-      type: "'cover' | 'contain' | 'center'",
-      description: '子元素在比例框内的布局方式。`cover` 填满并裁剪媒体，`contain` 填满并留边，`center` 保持原始尺寸居中。省略时子元素自行设置样式。',
-    },
     {name: 'children', type: 'ReactNode', description: '通过绝对定位填充容器的内容。', required: true},
     {
       name: 'xstyle',
@@ -100,7 +76,7 @@ export const docsZh = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-aspect-ratio', visualProps: ['shape']},
+      {className: 'astryx-aspect-ratio'},
     ],
   },
 };
@@ -114,15 +90,12 @@ export const docsDense = {
     bestPractices: [
       {guidance: true, description: 'Express the ratio as a fraction like `16/9` or `4/3` for readability.'},
       {guidance: true, description: 'Use for media that needs consistent proportions across screen sizes.'},
-      {guidance: true, description: 'Use `fit="cover"` for images and video so the component sizes the child; the child should not repeat `width`/`height`/`objectFit` styles.'},
       {guidance: false, description: 'Use for general layout containers; use standard layout components instead.'},
       {guidance: false, description: 'Nest AspectRatio containers; one level is sufficient.'},
     ],
   },
   propDescriptions: {
     ratio: 'width/height ratio (e.g. 16/9, 1)',
-    shape: "container shape: 'rectangle' (default) | 'ellipse' (circle at ratio 1)",
-    fit: "child layout: 'cover' fill+crop | 'contain' fill+letterbox | 'center' natural size; omitted = child styles itself",
     children: 'content positioned absolutely to fill container',
     xstyle: 'StyleX layout customization via stylex.create()',
   },