@yahoo/uds-v5-wip 1.12.0 → 1.14.0

package/dist/config/dist/propertyGroups.js

@@ -0,0 +1,432 @@
+//#region ../config/dist/propertyGroups.js
+const ALL_PROPERTY_GROUPS = [
+	{
+		id: "textColor",
+		label: "Text Color",
+		properties: ["color"]
+	},
+	{
+		id: "background",
+		label: "Background",
+		properties: ["bg"]
+	},
+	{
+		id: "borderColor",
+		label: "Border Color",
+		properties: [
+			"borderColor",
+			"borderYColor",
+			"borderXColor",
+			"borderStartColor",
+			"borderLeftColor",
+			"borderEndColor",
+			"borderRightColor",
+			"borderTopColor",
+			"borderBottomColor"
+		]
+	},
+	{
+		id: "outlineColor",
+		label: "Outline Color",
+		properties: ["outlineColor"]
+	},
+	{
+		id: "ringColor",
+		label: "Ring Color",
+		properties: ["ringColor", "ringOffsetColor"]
+	},
+	{
+		id: "divideColor",
+		label: "Divide Color",
+		properties: ["divideColor"]
+	},
+	{
+		id: "shadowColor",
+		label: "Shadow Color",
+		properties: ["shadowColor"]
+	},
+	{
+		id: "svgFill",
+		label: "SVG Fill",
+		properties: ["fillColor"]
+	},
+	{
+		id: "svgStroke",
+		label: "SVG Stroke",
+		properties: ["strokeColor"]
+	},
+	{
+		id: "caretColor",
+		label: "Caret Color",
+		properties: ["caretColor"]
+	},
+	{
+		id: "textDecorationColor",
+		label: "Text Decoration Color",
+		properties: ["textDecorationColor"]
+	},
+	{
+		id: "opacity",
+		label: "Opacity",
+		properties: ["opacity"]
+	},
+	{
+		id: "colorOpacity",
+		label: "Color Opacity",
+		properties: ["colorOpacity"]
+	},
+	{
+		id: "bgOpacity",
+		label: "Background Opacity",
+		properties: ["bgOpacity"]
+	},
+	{
+		id: "borderColorOpacity",
+		label: "Border Color Opacity",
+		properties: [
+			"borderColorOpacity",
+			"borderYColorOpacity",
+			"borderXColorOpacity",
+			"borderStartColorOpacity",
+			"borderLeftColorOpacity",
+			"borderEndColorOpacity",
+			"borderRightColorOpacity",
+			"borderTopColorOpacity",
+			"borderBottomColorOpacity"
+		]
+	},
+	{
+		id: "divideColorOpacity",
+		label: "Divide Color Opacity",
+		properties: ["divideColorOpacity"]
+	},
+	{
+		id: "outlineColorOpacity",
+		label: "Outline Color Opacity",
+		properties: ["outlineColorOpacity"]
+	},
+	{
+		id: "ringColorOpacity",
+		label: "Ring Color Opacity",
+		properties: ["ringColorOpacity", "ringOffsetColorOpacity"]
+	},
+	{
+		id: "textDecorationColorOpacity",
+		label: "Text Decoration Opacity",
+		properties: ["textDecorationColorOpacity"]
+	},
+	{
+		id: "svgFillOpacity",
+		label: "SVG Fill Opacity",
+		properties: ["fillColorOpacity"]
+	},
+	{
+		id: "svgStrokeOpacity",
+		label: "SVG Stroke Opacity",
+		properties: ["strokeColorOpacity"]
+	},
+	{
+		id: "shadowColorOpacity",
+		label: "Shadow Color Opacity",
+		properties: ["shadowColorOpacity"]
+	},
+	{
+		id: "caretColorOpacity",
+		label: "Caret Color Opacity",
+		properties: ["caretColorOpacity"]
+	},
+	{
+		id: "fontFamily",
+		label: "Font Family",
+		properties: ["fontFamily"]
+	},
+	{
+		id: "fontSize",
+		label: "Font Size",
+		properties: ["fontSize"]
+	},
+	{
+		id: "fontWeight",
+		label: "Font Weight",
+		properties: ["fontWeight"]
+	},
+	{
+		id: "lineHeight",
+		label: "Line Height",
+		properties: ["lineHeight"]
+	},
+	{
+		id: "letterSpacing",
+		label: "Letter Spacing",
+		properties: ["letterSpacing"]
+	},
+	{
+		id: "blur",
+		label: "Blur",
+		properties: ["blur"]
+	},
+	{
+		id: "backdropBlur",
+		label: "Backdrop Blur",
+		properties: ["backdropBlur"]
+	},
+	{
+		id: "animation",
+		label: "Animation",
+		properties: ["animation"]
+	},
+	{
+		id: "shadow",
+		label: "Shadow",
+		properties: ["shadow"]
+	},
+	{
+		id: "textShadow",
+		label: "Text Shadow",
+		properties: ["textShadow"]
+	},
+	{
+		id: "zIndex",
+		label: "Z-Index",
+		properties: ["zIndex"]
+	},
+	{
+		id: "borderWidth",
+		label: "Border Width",
+		properties: [
+			"borderWidth",
+			"borderYWidth",
+			"borderXWidth",
+			"borderStartWidth",
+			"borderLeftWidth",
+			"borderEndWidth",
+			"borderRightWidth",
+			"borderTopWidth",
+			"borderBottomWidth"
+		]
+	},
+	{
+		id: "borderRadius",
+		label: "Border Radius",
+		properties: [
+			"borderRadius",
+			"borderRadiusTop",
+			"borderRadiusBottom",
+			"borderRadiusStart",
+			"borderRadiusEnd",
+			"borderRadiusTopStart",
+			"borderRadiusTopEnd",
+			"borderRadiusBottomStart",
+			"borderRadiusBottomEnd"
+		]
+	},
+	{
+		id: "outlineWidth",
+		label: "Outline Width",
+		properties: ["outlineWidth", "outlineOffset"]
+	},
+	{
+		id: "divideWidth",
+		label: "Divide Width",
+		properties: ["divideWidth"]
+	},
+	{
+		id: "ringWidth",
+		label: "Ring Width",
+		properties: ["ringWidth", "ringOffsetWidth"]
+	},
+	{
+		id: "padding",
+		label: "Padding",
+		properties: [
+			"spacing",
+			"spacingX",
+			"spacingY",
+			"spacingRight",
+			"spacingEnd",
+			"spacingLeft",
+			"spacingStart",
+			"spacingTop",
+			"spacingBottom"
+		]
+	},
+	{
+		id: "margin",
+		label: "Margin",
+		properties: [
+			"margin",
+			"marginX",
+			"marginY",
+			"marginBottom",
+			"marginEnd",
+			"marginRight",
+			"marginStart",
+			"marginLeft",
+			"marginTop"
+		]
+	},
+	{
+		id: "offset",
+		label: "Offset",
+		properties: [
+			"offset",
+			"offsetY",
+			"offsetX",
+			"offsetBottom",
+			"offsetEnd",
+			"offsetRight",
+			"offsetStart",
+			"offsetLeft",
+			"offsetTop"
+		]
+	},
+	{
+		id: "gap",
+		label: "Gap",
+		properties: [
+			"gap",
+			"gapX",
+			"gapY"
+		]
+	},
+	{
+		id: "indent",
+		label: "Indent",
+		properties: ["indent"]
+	},
+	{
+		id: "scrollSnapGap",
+		label: "Scroll Snap Gap",
+		properties: [
+			"scrollSnapGap",
+			"scrollSnapGapTop",
+			"scrollSnapGapBottom",
+			"scrollSnapGapStart",
+			"scrollSnapGapEnd",
+			"scrollSnapGapX",
+			"scrollSnapGapY"
+		]
+	},
+	{
+		id: "scrollSnapSpacing",
+		label: "Scroll Snap Spacing",
+		properties: [
+			"scrollSnapSpacing",
+			"scrollSnapSpacingTop",
+			"scrollSnapSpacingBottom",
+			"scrollSnapSpacingStart",
+			"scrollSnapSpacingEnd",
+			"scrollSnapSpacingX",
+			"scrollSnapSpacingY"
+		]
+	},
+	{
+		id: "tableBorderSpacing",
+		label: "Table Border Spacing",
+		properties: [
+			"tableBorderSpacing",
+			"tableBorderSpacingX",
+			"tableBorderSpacingY"
+		]
+	},
+	{
+		id: "width",
+		label: "Width",
+		properties: [
+			"width",
+			"minWidth",
+			"maxWidth"
+		]
+	},
+	{
+		id: "height",
+		label: "Height",
+		properties: [
+			"height",
+			"minHeight",
+			"maxHeight"
+		]
+	},
+	{
+		id: "aspectRatio",
+		label: "Aspect Ratio",
+		properties: ["aspectRatio"]
+	},
+	{
+		id: "positionPlacement",
+		label: "Position",
+		properties: [
+			"top",
+			"bottom",
+			"left",
+			"right",
+			"inset",
+			"insetX",
+			"insetY"
+		]
+	},
+	{
+		id: "flex",
+		label: "Flex",
+		properties: [
+			"flex",
+			"flexGrow",
+			"flexShrink"
+		]
+	},
+	{
+		id: "transform",
+		label: "Transform",
+		properties: [
+			"scaleX",
+			"scaleY",
+			"skewX",
+			"skewY",
+			"translateX",
+			"translateY",
+			"rotate",
+			"scale"
+		]
+	},
+	{
+		id: "strokeWidth",
+		label: "Stroke Width",
+		properties: ["strokeWidth"]
+	}
+];
+const groupById = new Map(ALL_PROPERTY_GROUPS.map((g) => [g.id, g]));
+const propToGroupId = /* @__PURE__ */ new Map();
+for (const group of ALL_PROPERTY_GROUPS) for (const prop of group.properties) propToGroupId.set(prop, group.id);
+const COLOR_GROUPS = [
+	"textColor",
+	"background",
+	"borderColor",
+	"outlineColor",
+	"ringColor",
+	"divideColor",
+	"shadowColor",
+	"svgFill",
+	"svgStroke",
+	"caretColor",
+	"textDecorationColor"
+];
+[...COLOR_GROUPS], [...COLOR_GROUPS], [...COLOR_GROUPS];
+/**
+* Given an array of group IDs, returns the flat union of all their
+* member ConfigurableProps (deduplicated).
+*/
+function expandPropertyGroups(groupIds) {
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const id of groupIds) {
+		const group = groupById.get(id);
+		if (!group) continue;
+		for (const prop of group.properties) if (!seen.has(prop)) {
+			seen.add(prop);
+			result.push(prop);
+		}
+	}
+	return result;
+}
+//#endregion
+export { expandPropertyGroups };

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

@@ -1,5 +1,3 @@
-import { StyleProp } from "@uds/types";
-
 //#region ../config/dist/types.d.ts
 //#region src/types.d.ts
 /**
@@ -31,64 +29,6 @@ type VarGroupDef<M extends `_${string}` = `_${string}`> = Record<string, VarToke
  *   spacing: { 1: { value: '0.25rem' }, 2: { value: '0.5rem' } },
  * }
  */
-type VarsConfig<M extends `_${string}` = `_${string}`> = Record<string, VarGroupDef<M>>;
-/**
- * A single utility definition mapping a style prop to CSS output.
- *
- * @example
- * {
- *   className: 'bg',
- *   values: '{bg}',
- *   transform(value) { return { 'background-color': value } },
- * }
- */
-interface UtilityDef {
-  /** Class name prefix for runtime generation. Empty string means value IS the class. */
-  className: string;
-  /**
-   * Reference to defineVars namespace(s). Tokens from referenced namespaces become allowed values.
-   *
-   * - Single: `'{namespace}'` — tokens from one namespace
-   * - Array: `['{ns1}', '{ns2}']` — tokens from multiple namespaces, last entry wins on name collision
-   *
-   * The namespace name determines the CSS custom property prefix (e.g., `'{color}'` → `--uds-color-*`).
-   */
-  values?: string | string[] | {
-    type: 'boolean';
-  };
-  /** Literal enum values (e.g., `['block', 'flex', 'grid']`). */
-  literalValues?: string[];
-  /** Transform a token/literal value into CSS property declarations.
-   *  Optional for Phase 0 — only needed by resolveUtilityMappings() to derive cssProperty. */
-  transform?: (value: string, ctx: {
-    token: (ref: string) => string;
-  }) => Record<string, string>;
-}
-/**
- * Internal utilities config — used for resolved/stored data.
- * Keys are plain strings so internal iteration (Object.entries, etc.) stays clean.
- *
- * @example
- * {
- *   bg: { className: 'bg', values: '{bg}', transform(v) { return { 'background-color': v } } },
- *   display: { className: '', literalValues: ['block', 'flex'], transform(v) { return { display: v } } },
- * }
- */
-type UtilitiesConfig = Record<string, UtilityDef>;
-/**
- * Input type for `defineUtilities()` — keys must be valid UDS style prop names (`StyleProp`).
- *
- * This is the public-facing constraint used by the builder method. It ensures callers
- * only map props that exist in the UDS component style API. Unlike `UtilitiesConfig`
- * (which uses `Record<string, ...>` for clean internal iteration), this type enforces
- * named keys at the call site.
- *
- * @example
- * {
- *   color: { className: 'text', values: '{color}' },
- *   bg: { className: 'bg', values: ['{color}', '{bg}'] },
- *   display: { className: '', literalValues: ['block', 'flex', 'grid'] },
- * }
- */
+type VarsConfig<M extends `_${string}` = `_${string}`> = Record<string, VarGroupDef<M>>; //#endregion
 //#endregion
-export { UtilitiesConfig, UtilityDef, VarGroupDef, VarTokenDef, VarsConfig };
+export { VarGroupDef, VarTokenDef, VarsConfig };