@yahoo/uds-v5-wip 1.33.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/dist/index.js

@@ -3,4 +3,6 @@ import "./component-resolution.js";
 import "./propertyGroups.js";
 import "./resolveTokenTypes.js";
 import "./createConfig.js";
+import "./propertyAcceptedTypes.js";
+import "./resolveStyleProp.js";
 import "./serialize.js";

package/dist/config/dist/propertyAcceptedTypes.js

@@ -0,0 +1,148 @@
+//#region ../config/dist/propertyAcceptedTypes.js
+const LENGTH_PCT = { types: [
+	"length",
+	"percentage",
+	"length-percentage"
+] };
+const LENGTH_PCT_AUTO = {
+	types: [
+		"length",
+		"percentage",
+		"length-percentage"
+	],
+	literals: ["auto"]
+};
+const LENGTH_ONLY = { types: ["length"] };
+const COLOR_ONLY = { types: ["color"] };
+const TIME_ONLY = { types: ["time"] };
+const NUMBER_ONLY = { types: ["number", "integer"] };
+const ANGLE_ONLY = { types: ["angle"] };
+const LENGTH_PCT_PROPS = [
+	"gap",
+	"column-gap",
+	"row-gap",
+	"padding",
+	"padding-top",
+	"padding-right",
+	"padding-bottom",
+	"padding-left",
+	"padding-block",
+	"padding-inline",
+	"padding-inline-start",
+	"padding-inline-end",
+	"scroll-margin",
+	"scroll-margin-top",
+	"scroll-margin-bottom",
+	"scroll-margin-block",
+	"scroll-margin-inline",
+	"scroll-margin-inline-start",
+	"scroll-margin-inline-end",
+	"scroll-padding",
+	"scroll-padding-top",
+	"scroll-padding-bottom",
+	"scroll-padding-block",
+	"scroll-padding-inline",
+	"scroll-padding-inline-start",
+	"scroll-padding-inline-end",
+	"border-radius",
+	"border-top-left-radius",
+	"border-top-right-radius",
+	"border-bottom-left-radius",
+	"border-bottom-right-radius",
+	"border-start-start-radius",
+	"border-start-end-radius",
+	"border-end-start-radius",
+	"border-end-end-radius",
+	"text-indent",
+	"font-size"
+];
+const LENGTH_PCT_AUTO_PROPS = [
+	"margin",
+	"margin-top",
+	"margin-right",
+	"margin-bottom",
+	"margin-left",
+	"margin-block",
+	"margin-inline",
+	"margin-inline-start",
+	"margin-inline-end",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"inset",
+	"inset-block",
+	"inset-inline",
+	"width",
+	"height",
+	"min-width",
+	"min-height",
+	"max-width",
+	"max-height"
+];
+const LENGTH_ONLY_PROPS = [
+	"border-width",
+	"border-top-width",
+	"border-right-width",
+	"border-bottom-width",
+	"border-left-width",
+	"border-block-width",
+	"border-inline-width",
+	"border-inline-start-width",
+	"border-inline-end-width",
+	"outline-width",
+	"outline-offset",
+	"border-spacing",
+	"letter-spacing",
+	"text-underline-offset",
+	"text-decoration-thickness"
+];
+const COLOR_PROPS = [
+	"color",
+	"background-color",
+	"border-color",
+	"border-top-color",
+	"border-right-color",
+	"border-bottom-color",
+	"border-left-color",
+	"border-block-color",
+	"border-inline-color",
+	"border-inline-start-color",
+	"border-inline-end-color",
+	"outline-color",
+	"text-decoration-color",
+	"caret-color",
+	"fill",
+	"stroke"
+];
+const TIME_PROPS = ["transition-duration", "transition-delay"];
+const NUMBER_PROPS = [
+	"flex-grow",
+	"flex-shrink",
+	"order",
+	"z-index",
+	"-webkit-line-clamp"
+];
+const ANGLE_PROPS = ["rotate"];
+new Map([
+	...LENGTH_PCT_PROPS.map((p) => [p, LENGTH_PCT]),
+	...LENGTH_PCT_AUTO_PROPS.map((p) => [p, LENGTH_PCT_AUTO]),
+	...LENGTH_ONLY_PROPS.map((p) => [p, LENGTH_ONLY]),
+	...COLOR_PROPS.map((p) => [p, COLOR_ONLY]),
+	...TIME_PROPS.map((p) => [p, TIME_ONLY]),
+	...NUMBER_PROPS.map((p) => [p, NUMBER_ONLY]),
+	...ANGLE_PROPS.map((p) => [p, ANGLE_ONLY]),
+	["font-weight", { types: [
+		"font-weight",
+		"number",
+		"integer"
+	] }],
+	["font-family", { types: ["font-family"] }],
+	["transition-timing-function", { types: ["easing-function"] }],
+	["box-shadow", { types: ["shadow"] }],
+	["text-shadow", { types: ["shadow"] }],
+	["list-style-image", { types: ["url", "image"] }],
+	["aspect-ratio", { types: ["ratio", "number"] }],
+	["opacity", { types: ["number", "percentage"] }]
+]);
+//#endregion

package/dist/config/dist/resolveStyleProp.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/config/dist/resolveStyleProp.js

@@ -0,0 +1,2 @@
+import "./resolveTokenTypes.js";
+import "./propertyAcceptedTypes.js";