@yahoo/uds-v5-wip 1.34.0 → 1.35.0

package/dist/config/dist/createConfig.d.ts

@@ -28,6 +28,8 @@ type IsReservedModifier<T> = T extends BaseModifierProp ? true : false;
 type HasReservedModifier<T> = T extends any ? IsReservedModifier<T> extends true ? true : never : never;
 interface ModeOption {
   name: string;
+  /** Optional human-readable label for Studio. Falls back to `name`. */
+  label?: string;
   modifier: ModifierNameShape;
   /** Description for AI prompt generation (e.g. "Apply styles in dark mode") */
   description?: string;
@@ -37,16 +39,55 @@ interface ModeOption {
 }
 interface ModeGroup {
   name: string;
+  /** Optional human-readable label for Studio. Falls back to `name`. */
+  label?: string;
   options: ModeOption[];
 }
+/** Single option within a mode set, as authored. */
+interface ModeOptionInput {
+  /** Optional human-readable label for Studio. Falls back to the option key. */
+  label?: string;
+  /**
+   * Optional explicit modifier string. When omitted, derived as `_${optionKey}`.
+   * Use this when the option key and modifier must differ (e.g. `xxl` → `_2xl`).
+   */
+  modifier?: ModifierNameShape;
+  /** CSS selector applied when this option is active (e.g. `.dark`). */
+  css?: string;
+  /** Media query applied when this option is active. */
+  media?: string;
+}
+/** Single mode set, as authored. */
+interface ModeSetInput {
+  /** Optional human-readable label for Studio. Falls back to the set key. */
+  label?: string;
+  options: Record<string, ModeOptionInput>;
+}
+/** Object-keyed input shape accepted by `defineModes`. */
+type ModesInput = Record<string, ModeSetInput>;
+/**
+ * Extract the union of modifier strings produced by an authored `ModesInput`.
+ * Uses an explicit `modifier` when present; otherwise derives `_${optionKey}`.
+ * Drives both the reserved-modifier guard and the modifier types that flow
+ * through subsequent builder calls.
+ */
+type GetModifierFromInput<I extends ModesInput> = { [SetKey in keyof I]: { [OptKey in keyof I[SetKey]['options']]: I[SetKey]['options'][OptKey] extends {
+  modifier: infer M;
+} ? M extends ModifierNameShape ? M : never : OptKey extends string ? `_${OptKey}` : never }[keyof I[SetKey]['options']] }[keyof I];
+/** Reject any input whose derived/explicit modifiers collide with reserved names. */
+type CheckForReservedModifiersInput<I extends ModesInput> = true extends HasReservedModifier<GetModifierFromInput<I>> ? 'ERROR: Cannot use reserved modifier names from ModifierProp. Please use a different modifier name.' : I;
+/**
+ * Convert the authored object-keyed input into the internal `ModeGroup[]` shape.
+ * Derives `_${optionKey}` modifiers when no explicit `modifier` is provided.
+ * Never sets `default: true` — the new API has no concept of a default option;
+ * downstream consumers treat "no option active" as the implicit default.
+ */
 interface ModifierDef {
   modifier: ModifierNameShape;
   selector: string;
   /** Description for AI prompt generation (e.g. "Apply styles on elevation-1 surfaces") */
   description?: string;
 }
-/** Extract modifier union from all mode groups */
-type GetModifierName<M extends readonly ModeGroup[]> = M[number]['options'][number]['modifier'];
 interface ArbitraryTokenGroup {
   properties: string[];
   pattern: string | string[];
@@ -133,8 +174,6 @@ type EmptyVars = {};
 /** Build a structured token reference object from atomic tokens */
 declare function buildTokenReference(atomic: AtomicToken<ModifierNameShape>[], configPrefix: string): Record<string, Record<string, string>>;
 /** Build a structured composite-styles reference object for use in defineModifiers context */
-/** Extract all modifiers from mode groups and check if any are reserved */
-type CheckForReservedModifiers<T extends readonly ModeGroup[]> = true extends HasReservedModifier<GetModifierName<T>> ? 'ERROR: Cannot use reserved modifier names from ModifierProp. Please use a different modifier name.' : T;
 /** Global styles definition — CSS selector → style props */
 type GlobalStylesDef = Record<string, Record<string, any>>;
 /** CSS properties for the example wrapper element */
@@ -226,7 +265,7 @@ interface UdsConfig<TModifier extends ModifierNameShape = ModifierProp, TTokens
   preflight(enabled?: boolean): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
   prefix(value: string): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
   buildOptions(options: BuildOptions): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
-  defineModes<const NewModes extends readonly ModeGroup[]>(params: CheckForReservedModifiers<NewModes>): ConfigResult<TModifier | GetModifierName<NewModes>, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers | GetModifierName<NewModes>, TVars>;
+  defineModes<const NewModes extends ModesInput>(params: CheckForReservedModifiersInput<NewModes>): ConfigResult<TModifier | GetModifierFromInput<NewModes>, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers | GetModifierFromInput<NewModes>, TVars>;
   defineModifiers<const Defs extends readonly ModifierDef[]>(params: Defs | ((ctx: {
     tokens: TTokens;
     compositeStyles: CompositeStylesReference<TCompositeStyles>;
@@ -315,4 +354,4 @@ interface InterpolateMarker {
 declare function darker(color: string, amount: number): string;
 declare function lighter(color: string, amount: number): string;
 //#endregion
-export { ArbitraryTokenGroup, AtomicToken, BuildOptions, ComponentConfig, DefineComponentInput, DefineComponentMotionInput, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GlobalStylesDef, InterpolateMarker, ModeGroup, ModifierDef, MotionPresetsDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig };
+export { ArbitraryTokenGroup, AtomicToken, BuildOptions, CheckForReservedModifiersInput, ComponentConfig, DefineComponentInput, DefineComponentMotionInput, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GetModifierFromInput, GlobalStylesDef, InterpolateMarker, ModeGroup, ModeOption, ModeOptionInput, ModeSetInput, ModesInput, ModifierDef, MotionPresetsDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig };

package/dist/config/dist/createConfig.js

@@ -9,6 +9,35 @@ import { resolveTokenType, sniffTokenTypeFromValue } from "./resolveTokenTypes.j
 import { applyPresetToData, deepMerge, mergeAtomic } from "./preset-merge.js";
 //#region ../config/dist/createConfig.js
 /** biome-ignore-all lint/suspicious/noExplicitAny: necessary for dynamic builder to work correctly */
+/**
+* Convert the authored object-keyed input into the internal `ModeGroup[]` shape.
+* Derives `_${optionKey}` modifiers when no explicit `modifier` is provided.
+* Never sets `default: true` — the new API has no concept of a default option;
+* downstream consumers treat "no option active" as the implicit default.
+*/
+function convertModesInputToGroups(input) {
+	const groups = [];
+	for (const [setKey, setValue] of Object.entries(input)) {
+		const options = [];
+		for (const [optionKey, optionValue] of Object.entries(setValue.options)) {
+			const option = {
+				name: optionKey,
+				modifier: optionValue.modifier ?? `_${optionKey}`
+			};
+			if (optionValue.label !== void 0) option.label = optionValue.label;
+			if (optionValue.css !== void 0) option.css = optionValue.css;
+			if (optionValue.media !== void 0) option.media = optionValue.media;
+			options.push(option);
+		}
+		const group = {
+			name: setKey,
+			options
+		};
+		if (setValue.label !== void 0) group.label = setValue.label;
+		groups.push(group);
+	}
+	return groups;
+}
 /** Build a structured token reference object from atomic tokens */
 function buildTokenReference(atomic, configPrefix) {
 	const result = Object.create(null);
@@ -391,9 +420,10 @@ function createConfigBuilder(data, extensions) {
 			return next({ buildOptions: options });
 		},
 		defineModes(params) {
+			const newGroups = convertModesInputToGroups(params);
 			return createConfigBuilder({
 				...data,
-				modes: [...data.modes, ...params]
+				modes: [...data.modes, ...newGroups]
 			}, extensions);
 		},
 		defineModifiers(params) {
@@ -692,4 +722,4 @@ const uds = createConfigBuilder({
 	remotion: void 0
 });
 //#endregion
-export { buildCompositeStylesReference, buildTokenReference, createConfigBuilder, darker, interpolate, lighter, rem, resolveConfig, uds };
+export { buildCompositeStylesReference, buildTokenReference, convertModesInputToGroups, createConfigBuilder, darker, interpolate, lighter, rem, resolveConfig, uds };

package/dist/config/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "./consts/defaultColors.js";
 import { PropertyGroupId } from "./propertyGroups.js";
 import { TokenType, VarGroupDef, VarTokenDef, VarsConfig } from "./types.js";
-import { ArbitraryTokenGroup, AtomicToken, BuildOptions, ComponentConfig, DefineComponentInput, DefineComponentMotionInput, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GlobalStylesDef, InterpolateMarker, ModeGroup, ModifierDef, MotionPresetsDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig } from "./createConfig.js";
+import { ArbitraryTokenGroup, AtomicToken, BuildOptions, CheckForReservedModifiersInput, ComponentConfig, DefineComponentInput, DefineComponentMotionInput, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GetModifierFromInput, GlobalStylesDef, InterpolateMarker, ModeGroup, ModeOption, ModeOptionInput, ModeSetInput, ModesInput, ModifierDef, MotionPresetsDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig } from "./createConfig.js";
 import { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig } from "./serialize.js";
 import { ComponentsConfig as ComponentsConfig$1 } from "@uds/types";
 export { type ComponentsConfig$1 as ComponentsConfig };

package/dist/config.d.ts

@@ -1,13 +1,40 @@
 import { defaultColors } from "./config/dist/consts/defaultColors.js";
 import { TokenType, VarGroupDef, VarTokenDef, VarsConfig } from "./config/dist/types.js";
-import { GlobalStylesDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig } from "./config/dist/createConfig.js";
+import { GetModifierFromInput, GlobalStylesDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig } from "./config/dist/createConfig.js";
 import { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig } from "./config/dist/serialize.js";
 import { ComponentsConfig } from "./config/dist/index.js";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region src/config.d.ts
 declare const uds: UdsConfig<_$_uds_types0.ModifierProp, {}, {}, {}, {}, never, {}>;
-declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "_dark" | "_sm" | "_md" | "_lg" | "_xl" | "_2xl", {
+declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierFromInput<{
+  readonly colorMode: {
+    readonly options: {
+      readonly dark: {
+        readonly css: ".dark";
+      };
+    };
+  };
+  readonly responsive: {
+    readonly options: {
+      readonly sm: {
+        readonly media: "(min-width: 640px)";
+      };
+      readonly md: {
+        readonly media: "(min-width: 768px)";
+      };
+      readonly lg: {
+        readonly media: "(min-width: 1024px)";
+      };
+      readonly xl: {
+        readonly media: "(min-width: 1280px)";
+      };
+      readonly "2xl": {
+        readonly media: "(min-width: 1536px)";
+      };
+    };
+  };
+}>, {
   opacity: {
     0: string;
     5: string;
@@ -40,8 +67,8 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
   };
   rotate: {
     0: string;
-    2: string;
     1: string;
+    2: string;
     3: string;
     6: string;
     12: string;
@@ -195,16 +222,16 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
   spacing: {
     0: string;
     4: string;
-    2: string;
-    5: string;
     1: string;
     px: string;
+    2: string;
     8: string;
     0.5: string;
     1.5: string;
     2.5: string;
     3: string;
     3.5: string;
+    5: string;
     6: string;
     7: string;
     9: string;
@@ -238,30 +265,30 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
   outlineWidth: {
     0: string;
     4: string;
-    2: string;
     1: string;
+    2: string;
     8: string;
   };
   outlineOffset: {
     0: string;
     4: string;
-    2: string;
     1: string;
+    2: string;
     8: string;
   };
   ringWidth: {
     0: string;
     4: string;
     inset: string;
-    2: string;
     1: string;
+    2: string;
     8: string;
   };
   ringOffsetWidth: {
     0: string;
     4: string;
-    2: string;
     1: string;
+    2: string;
     8: string;
   };
   shadow: {
@@ -277,8 +304,8 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
   };
   strokeWidth: {
     0: string;
-    2: string;
     1: string;
+    2: string;
   };
   fontFamily: {
     sans: string;
@@ -289,9 +316,9 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     normal: string;
     thin: string;
     bold: string;
-    light: string;
     medium: string;
     extralight: string;
+    light: string;
     semibold: string;
     extrabold: string;
     black: string;
@@ -331,20 +358,20 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     0: string;
     4: string;
     full: string;
-    2: string;
-    5: string;
     1: string;
     "1/2": string;
     "1/3": string;
     "2/3": string;
     "1/4": string;
     "3/4": string;
+    2: string;
     8: string;
     0.5: string;
     1.5: string;
     2.5: string;
     3: string;
     3.5: string;
+    5: string;
     6: string;
     7: string;
     9: string;
@@ -386,13 +413,40 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
   };
   skew: {
     0: string;
-    2: string;
     1: string;
+    2: string;
     3: string;
     6: string;
     12: string;
   };
-}, {}, {}, {}, "_light" | "_dark" | "_sm" | "_md" | "_lg" | "_xl" | "_2xl", {
+}, {}, {}, {}, GetModifierFromInput<{
+  readonly colorMode: {
+    readonly options: {
+      readonly dark: {
+        readonly css: ".dark";
+      };
+    };
+  };
+  readonly responsive: {
+    readonly options: {
+      readonly sm: {
+        readonly media: "(min-width: 640px)";
+      };
+      readonly md: {
+        readonly media: "(min-width: 768px)";
+      };
+      readonly lg: {
+        readonly media: "(min-width: 1024px)";
+      };
+      readonly xl: {
+        readonly media: "(min-width: 1280px)";
+      };
+      readonly "2xl": {
+        readonly media: "(min-width: 1536px)";
+      };
+    };
+  };
+}>, {
   readonly color: {
     readonly $type: "color";
     readonly inherit: {

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

@@ -1,9 +1,36 @@
-import { UdsConfig } from "../../config/dist/createConfig.js";
+import { GetModifierFromInput, UdsConfig } from "../../config/dist/createConfig.js";
 import * as _$_uds_types0 from "@uds/types";
 
 //#region ../foundational-presets/dist/boldVibrant.d.ts
 //#region src/boldVibrant.d.ts
-declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "_dark" | "_sm" | "_md" | "_lg" | "_xl" | "_2xl", {
+declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierFromInput<{
+  readonly colorMode: {
+    readonly options: {
+      readonly dark: {
+        readonly css: ".dark";
+      };
+    };
+  };
+  readonly responsive: {
+    readonly options: {
+      readonly sm: {
+        readonly media: "(min-width: 640px)";
+      };
+      readonly md: {
+        readonly media: "(min-width: 768px)";
+      };
+      readonly lg: {
+        readonly media: "(min-width: 1024px)";
+      };
+      readonly xl: {
+        readonly media: "(min-width: 1280px)";
+      };
+      readonly '2xl': {
+        readonly media: "(min-width: 1536px)";
+      };
+    };
+  };
+}>, {
   opacity: {
     0: string;
     5: string;
@@ -36,8 +63,8 @@ declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp
   };
   rotate: {
     0: string;
-    2: string;
     1: string;
+    2: string;
     3: string;
     6: string;
     12: string;
@@ -191,16 +218,16 @@ declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp
   spacing: {
     0: string;
     4: string;
-    2: string;
-    5: string;
     1: string;
     px: string;
+    2: string;
     8: string;
     0.5: string;
     1.5: string;
     2.5: string;
     3: string;
     3.5: string;
+    5: string;
     6: string;
     7: string;
     9: string;
@@ -234,30 +261,30 @@ declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp
   outlineWidth: {
     0: string;
     4: string;
-    2: string;
     1: string;
+    2: string;
     8: string;
   };
   outlineOffset: {
     0: string;
     4: string;
-    2: string;
     1: string;
+    2: string;
     8: string;
   };
   ringWidth: {
     0: string;
     4: string;
     inset: string;
-    2: string;
     1: string;
+    2: string;
     8: string;
   };
   ringOffsetWidth: {
     0: string;
     4: string;
-    2: string;
     1: string;
+    2: string;
     8: string;
   };
   shadow: {
@@ -273,8 +300,8 @@ declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp
   };
   strokeWidth: {
     0: string;
-    2: string;
     1: string;
+    2: string;
   };
   fontFamily: {
     sans: string;
@@ -285,9 +312,9 @@ declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp
     normal: string;
     thin: string;
     bold: string;
-    light: string;
     medium: string;
     extralight: string;
+    light: string;
     semibold: string;
     extrabold: string;
     black: string;
@@ -327,20 +354,20 @@ declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp
     0: string;
     4: string;
     full: string;
-    2: string;
-    5: string;
     1: string;
     "1/2": string;
     "1/3": string;
     "2/3": string;
     "1/4": string;
     "3/4": string;
+    2: string;
     8: string;
     0.5: string;
     1.5: string;
     2.5: string;
     3: string;
     3.5: string;
+    5: string;
     6: string;
     7: string;
     9: string;
@@ -382,13 +409,40 @@ declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp
   };
   skew: {
     0: string;
-    2: string;
     1: string;
+    2: string;
     3: string;
     6: string;
     12: string;
   };
-}, {}, {}, {}, "_light" | "_dark" | "_sm" | "_md" | "_lg" | "_xl" | "_2xl", {
+}, {}, {}, {}, GetModifierFromInput<{
+  readonly colorMode: {
+    readonly options: {
+      readonly dark: {
+        readonly css: ".dark";
+      };
+    };
+  };
+  readonly responsive: {
+    readonly options: {
+      readonly sm: {
+        readonly media: "(min-width: 640px)";
+      };
+      readonly md: {
+        readonly media: "(min-width: 768px)";
+      };
+      readonly lg: {
+        readonly media: "(min-width: 1024px)";
+      };
+      readonly xl: {
+        readonly media: "(min-width: 1280px)";
+      };
+      readonly '2xl': {
+        readonly media: "(min-width: 1536px)";
+      };
+    };
+  };
+}>, {
   readonly color: {
     readonly $type: "color";
     readonly inherit: {