@yahoo/uds-v5-wip 1.49.0 → 1.50.0

package/dist/components/dist/presets/index.js

@@ -2,8 +2,8 @@ import { textConfig } from "../text.config.js";
 import { accordionConfig } from "../accordion.config.js";
 import { alertConfig } from "../alert.config.js";
 import { anchorConfig } from "../anchor.config.js";
-import { avatarGroupConfig } from "../avatar-group.config.js";
 import { avatarConfig } from "../avatar.config.js";
+import { avatarGroupConfig } from "../avatar-group.config.js";
 import { badgeConfig } from "../badge.config.js";
 import { breadcrumbConfig } from "../breadcrumb.config.js";
 import { buttonConfig } from "../button.config.js";

package/dist/components/presets/index.js

@@ -2,8 +2,8 @@ import { textConfig } from "../dist/text.config.js";
 import { accordionConfig } from "../dist/accordion.config.js";
 import { alertConfig } from "../dist/alert.config.js";
 import { anchorConfig } from "../dist/anchor.config.js";
-import { avatarGroupConfig } from "../dist/avatar-group.config.js";
 import { avatarConfig } from "../dist/avatar.config.js";
+import { avatarGroupConfig } from "../dist/avatar-group.config.js";
 import { badgeConfig } from "../dist/badge.config.js";
 import { breadcrumbConfig } from "../dist/breadcrumb.config.js";
 import { buttonConfig } from "../dist/button.config.js";

package/dist/config/dist/types.d.ts

@@ -15,6 +15,12 @@ type TokenType = 'color' | 'dimension' | 'number' | 'fontFamily' | 'fontWeight'
  * A single design token definition with a base value and optional modifier overrides.
  * Modifier keys use the `_` prefix convention (e.g., `_dark`, `_hover`).
  *
+ * Modifier values can be flat strings (`_dark: '#88bcfb'`) or nested token defs
+ * that introduce further modifiers — useful for stacking modes from different
+ * sets (e.g. `_slate: { value: '#1167f4', _dark: '#88bcfb' }` for the slate
+ * theme's dark variant). The emitter joins each level's selector to form a
+ * compound CSS selector (`[data-theme="slate"].dark`).
+ *
  * When `M` is narrowed (e.g., `'_dark' | '_light'`), only those modifier keys are
  * accepted — TypeScript will flag unknown modifiers like `_eggs` at compile time.
  *
@@ -24,11 +30,12 @@ type TokenType = 'color' | 'dimension' | 'number' | 'fontFamily' | 'fontWeight'
  * @example
  * { value: '#1167f4', _dark: '#88bcfb' }
  * { value: 'transparent', $type: 'string' }
+ * { value: '#1167f4', _slate: { value: '#1167f4', _dark: '#88bcfb' } }
  */
 type VarTokenDef<M extends `_${string}` = `_${string}`> = {
   value: string;
   $type?: TokenType;
-} & { [K in M]?: string };
+} & { [K in M]?: string | VarTokenDef<M> };
 /**
  * A group of named tokens within a var namespace.
  *

package/dist/core/dist/createComponent.js

@@ -1,6 +1,6 @@
-import { applySlotOverrides, assertTransformedConfig, buildSlotProps, buildUntransformedSlotProps, inferComponentNameFromRenderFn, mergeMotionConfig, mergeRootClassName, mergeSlotMotionProps, partitionMergedProps } from "./createComponent.boundaries.js";
 import { processStyleProps } from "./getStyles.js";
 import { createComponentStyler } from "./getComponentStyles.js";
+import { applySlotOverrides, assertTransformedConfig, buildSlotProps, buildUntransformedSlotProps, inferComponentNameFromRenderFn, mergeMotionConfig, mergeRootClassName, mergeSlotMotionProps, partitionMergedProps } from "./createComponent.boundaries.js";
 import { createElement } from "react";
 //#region ../core/dist/createComponent.js
 function createPrimitiveRenderFn(tag) {

package/dist/core/dist/getStyles.js

@@ -3,8 +3,8 @@ import "../../utils/dist/index.js";
 import { expandCompositeStyles, getCompositeStylesConfig } from "./compositeStyles.js";
 import { propMappings } from "./style-prop-data.js";
 import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
-import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { modifierMappings } from "./modifier-mappings.js";
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { clsx } from "clsx";
 //#region ../core/dist/getStyles.js
 /** Convert kebab-case CSS property to camelCase for React inline styles.

package/dist/foundational-presets/dist/index.d.ts

@@ -1,19 +1 @@
-import { boldVibrantFoundationPreset } from "./boldVibrant.js";
-import { brutalistFoundationPreset } from "./brutalist.js";
-import { candyFoundationPreset } from "./candy.js";
-import { cleanMinimalistFoundationPreset } from "./cleanMinimalist.js";
-import { corporateFoundationPreset } from "./corporate.js";
-import { darkMoodyFoundationPreset } from "./darkMoody.js";
-import { defaultFoundationPreset } from "./defaultPreset.js";
-import { forestFoundationPreset } from "./forest.js";
-import { highContrastFoundationPreset } from "./highContrast.js";
-import { lavenderFoundationPreset } from "./lavender.js";
-import { luxuryFoundationPreset } from "./luxury.js";
-import { monochromeFoundationPreset } from "./monochrome.js";
-import { neonCyberFoundationPreset } from "./neonCyber.js";
-import { newspaperFoundationPreset } from "./newspaper.js";
-import { oceanFoundationPreset } from "./ocean.js";
-import { slateFoundationPreset } from "./slate.js";
-import { sunsetFoundationPreset } from "./sunset.js";
-import { terminalFoundationPreset } from "./terminal.js";
-import { warmOrganicFoundationPreset } from "./warmOrganic.js";
+import { defaultFoundationPreset } from "./defaultPreset.js";

package/dist/foundational-presets/dist/index.js

@@ -1,19 +1 @@
 import "./defaultPreset.js";
-import "./boldVibrant.js";
-import "./brutalist.js";
-import "./candy.js";
-import "./cleanMinimalist.js";
-import "./corporate.js";
-import "./darkMoody.js";
-import "./forest.js";
-import "./highContrast.js";
-import "./lavender.js";
-import "./luxury.js";
-import "./monochrome.js";
-import "./neonCyber.js";
-import "./newspaper.js";
-import "./ocean.js";
-import "./slate.js";
-import "./sunset.js";
-import "./terminal.js";
-import "./warmOrganic.js";

package/dist/loader/dist/packages/core/dist/getStyles.js

@@ -2,8 +2,8 @@ import "../../../../../utils/dist/index.js";
 import "./compositeStyles.js";
 import { propMappings } from "./style-prop-data.js";
 import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
-import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { modifierMappings } from "./modifier-mappings.js";
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 //#region ../loader/dist/packages/core/dist/getStyles.js
 /** Convert kebab-case CSS property to camelCase for React inline styles.
 *  CSS custom properties (--*) are kept as-is since React supports them verbatim. */

package/dist/presets/dist/defaultPreset.js

@@ -4,8 +4,8 @@ import { textConfig } from "../../components/dist/text.config.js";
 import { accordionConfig } from "../../components/dist/accordion.config.js";
 import { alertConfig } from "../../components/dist/alert.config.js";
 import { anchorConfig } from "../../components/dist/anchor.config.js";
-import { avatarGroupConfig } from "../../components/dist/avatar-group.config.js";
 import { avatarConfig } from "../../components/dist/avatar.config.js";
+import { avatarGroupConfig } from "../../components/dist/avatar-group.config.js";
 import { badgeConfig } from "../../components/dist/badge.config.js";
 import { breadcrumbConfig } from "../../components/dist/breadcrumb.config.js";
 import { buttonConfig } from "../../components/dist/button.config.js";

package/dist/presets/dist/index.d.ts

@@ -1,19 +1 @@
-import { boldVibrantPreset } from "./boldVibrant.js";
-import { brutalistPreset } from "./brutalist.js";
-import { candyPreset } from "./candy.js";
-import { cleanMinimalistPreset } from "./cleanMinimalist.js";
-import { corporatePreset } from "./corporate.js";
-import { darkMoodyPreset } from "./darkMoody.js";
-import { defaultPreset } from "./defaultPreset.js";
-import { forestPreset } from "./forest.js";
-import { highContrastPreset } from "./highContrast.js";
-import { lavenderPreset } from "./lavender.js";
-import { luxuryPreset } from "./luxury.js";
-import { monochromePreset } from "./monochrome.js";
-import { neonCyberPreset } from "./neonCyber.js";
-import { newspaperPreset } from "./newspaper.js";
-import { oceanPreset } from "./ocean.js";
-import { slatePreset } from "./slate.js";
-import { sunsetPreset } from "./sunset.js";
-import { terminalPreset } from "./terminal.js";
-import { warmOrganicPreset } from "./warmOrganic.js";
+import { defaultPreset } from "./defaultPreset.js";

package/dist/presets/dist/index.js

@@ -1,19 +1 @@
-import "./boldVibrant.js";
-import "./brutalist.js";
-import "./candy.js";
-import "./cleanMinimalist.js";
-import "./corporate.js";
-import "./darkMoody.js";
 import "./defaultPreset.js";
-import "./forest.js";
-import "./highContrast.js";
-import "./lavender.js";
-import "./luxury.js";
-import "./monochrome.js";
-import "./neonCyber.js";
-import "./newspaper.js";
-import "./ocean.js";
-import "./slate.js";
-import "./sunset.js";
-import "./terminal.js";
-import "./warmOrganic.js";

package/dist/presets.d.ts

@@ -1,20 +1,2 @@
-import { boldVibrantPreset } from "./presets/dist/boldVibrant.js";
-import { brutalistPreset } from "./presets/dist/brutalist.js";
-import { candyPreset } from "./presets/dist/candy.js";
-import { cleanMinimalistPreset } from "./presets/dist/cleanMinimalist.js";
-import { corporatePreset } from "./presets/dist/corporate.js";
-import { darkMoodyPreset } from "./presets/dist/darkMoody.js";
 import { defaultPreset } from "./presets/dist/defaultPreset.js";
-import { forestPreset } from "./presets/dist/forest.js";
-import { highContrastPreset } from "./presets/dist/highContrast.js";
-import { lavenderPreset } from "./presets/dist/lavender.js";
-import { luxuryPreset } from "./presets/dist/luxury.js";
-import { monochromePreset } from "./presets/dist/monochrome.js";
-import { neonCyberPreset } from "./presets/dist/neonCyber.js";
-import { newspaperPreset } from "./presets/dist/newspaper.js";
-import { oceanPreset } from "./presets/dist/ocean.js";
-import { slatePreset } from "./presets/dist/slate.js";
-import { sunsetPreset } from "./presets/dist/sunset.js";
-import { terminalPreset } from "./presets/dist/terminal.js";
-import { warmOrganicPreset } from "./presets/dist/warmOrganic.js";
-export { boldVibrantPreset, brutalistPreset, candyPreset, cleanMinimalistPreset, corporatePreset, darkMoodyPreset, defaultPreset, forestPreset, highContrastPreset, lavenderPreset, luxuryPreset, monochromePreset, neonCyberPreset, newspaperPreset, oceanPreset, slatePreset, sunsetPreset, terminalPreset, warmOrganicPreset };
+export { defaultPreset };

package/dist/presets.js

@@ -1,21 +1,3 @@
-import { boldVibrantPreset } from "./presets/dist/boldVibrant.js";
-import { brutalistPreset } from "./presets/dist/brutalist.js";
-import { candyPreset } from "./presets/dist/candy.js";
-import { cleanMinimalistPreset } from "./presets/dist/cleanMinimalist.js";
-import { corporatePreset } from "./presets/dist/corporate.js";
-import { darkMoodyPreset } from "./presets/dist/darkMoody.js";
 import { defaultPreset } from "./presets/dist/defaultPreset.js";
-import { forestPreset } from "./presets/dist/forest.js";
-import { highContrastPreset } from "./presets/dist/highContrast.js";
-import { lavenderPreset } from "./presets/dist/lavender.js";
-import { luxuryPreset } from "./presets/dist/luxury.js";
-import { monochromePreset } from "./presets/dist/monochrome.js";
-import { neonCyberPreset } from "./presets/dist/neonCyber.js";
-import { newspaperPreset } from "./presets/dist/newspaper.js";
-import { oceanPreset } from "./presets/dist/ocean.js";
-import { slatePreset } from "./presets/dist/slate.js";
-import { sunsetPreset } from "./presets/dist/sunset.js";
-import { terminalPreset } from "./presets/dist/terminal.js";
-import { warmOrganicPreset } from "./presets/dist/warmOrganic.js";
 import "./presets/dist/index.js";
-export { boldVibrantPreset, brutalistPreset, candyPreset, cleanMinimalistPreset, corporatePreset, darkMoodyPreset, defaultPreset, forestPreset, highContrastPreset, lavenderPreset, luxuryPreset, monochromePreset, neonCyberPreset, newspaperPreset, oceanPreset, slatePreset, sunsetPreset, terminalPreset, warmOrganicPreset };
+export { defaultPreset };