@yahoo/uds-v5-wip 1.36.0 → 1.36.1

package/dist/core/dist/generated/stylePropsTwMap.d.ts

@@ -1,4 +1,5 @@
 //#region ../core/dist/generated/stylePropsTwMap.d.ts
+//#region src/generated/stylePropsTwMap.d.ts
 declare const stylePropsTwMap: {
   readonly "border-boolean": {
     readonly border: "boolean";
@@ -1695,6 +1696,6 @@ declare const stylePropsTwMap: {
   readonly "hyphens-manual": {
     readonly hyphens: "manual";
   };
-};
+}; //#endregion
 //#endregion
 export { stylePropsTwMap };

package/dist/core/dist/getComponentStyles.d.ts

@@ -1,6 +1,7 @@
 import { ComponentRegistry, ComponentSlotsOf, ComponentVariantsOf } from "@uds/types";
 
 //#region ../core/dist/getComponentStyles.d.ts
+//#region src/getComponentStyles.d.ts
 type ResolveSlots<Name extends string> = Name extends keyof ComponentRegistry ? ComponentSlotsOf<Name> : string;
 type ResolveVariants<Name extends string> = Name extends keyof ComponentRegistry ? ComponentVariantsOf<Name> : Record<string, string>;
 interface UdsRuntimeMeta {
@@ -44,6 +45,6 @@ interface ComponentStyler<Name extends string> {
  * @param slots - Array of slot names
  * @param element - Optional HTML element tag for element-specific prop forwarding
  */
-declare function createComponentStyler<Name extends string>(componentName: Name, slots: readonly string[], element?: string, variants?: readonly string[]): ComponentStyler<Name>;
+declare function createComponentStyler<Name extends string>(componentName: Name, slots: readonly string[], element?: string, variants?: readonly string[]): ComponentStyler<Name>; //#endregion
 //#endregion
 export { createComponentStyler };

package/dist/core/dist/getStyles.d.ts

@@ -2,6 +2,7 @@ import { ClassValue } from "clsx";
 import { ModifierProp, ModifierProps, StyleAndModifierProps, StyleProps } from "@uds/types";
 
 //#region ../core/dist/getStyles.d.ts
+//#region src/getStyles.d.ts
 /** Convert kebab-case CSS property to camelCase for React inline styles.
  *  CSS custom properties (--*) are kept as-is since React supports them verbatim. */
 declare function toCamelCase(str: string): string;
@@ -37,6 +38,6 @@ interface GetStylesParams extends StyleProps, ModifierProps {
  *  so they can be included in the CSS safelist.
  */
 declare function getStyles(props: GetStylesParams): string;
-declare function getVariantClassName(componentName: string, variant: string | undefined): string;
+declare function getVariantClassName(componentName: string, variant: string | undefined): string; //#endregion
 //#endregion
 export { createVariants, cx, getStyles, getVariantClassName, processStyleProps, toCamelCase };

package/dist/core/dist/getStyles.js

@@ -1,8 +1,10 @@
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { componentSlotClass } from "../../utils/dist/string-utils/componentClassName.js";
 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, modifierMappings, propMappings } from "./propMappings.js";
+import { modifierMappings } from "./modifier-mappings.js";
 import { clsx } from "clsx";
 //#region ../core/dist/getStyles.js
 /** Convert kebab-case CSS property to camelCase for React inline styles.

package/dist/core/dist/index.d.ts

@@ -1,11 +1,14 @@
+import { colorPropToOpacityProp } from "./color-opacity-map.js";
 import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./compositeStyles.js";
+import { PropMapping, propMappings } from "./style-prop-data.js";
+import { ConfigurablePropertyEntry, CssVariablePrefixEntry, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./configurable-prop-helpers.js";
 import { createComponent } from "./createComponent.js";
 import { ComponentExample, createComponentExample } from "./createComponentExample.js";
 import { createProvider } from "./createProvider.js";
 import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
 import { createComponentStyler } from "./getComponentStyles.js";
 import { createVariants, cx, getStyles, getVariantClassName, processStyleProps, toCamelCase } from "./getStyles.js";
-import { ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, colorPropToOpacityProp, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings } from "./propMappings.js";
+import { ModifierEntry, modifierMappings } from "./modifier-mappings.js";
 import { resolveMotionState } from "./resolveMotionState.js";
 import { TransformedMotionProps, transformPreset } from "./transformPreset.js";
 import { withDefaultStyleProps } from "./withDefaultStyleProps.js";

package/dist/core/dist/index.js

@@ -1,6 +1,9 @@
+import "./color-opacity-map.js";
 import "./compositeStyles.js";
+import "./style-prop-data.js";
+import "./configurable-prop-helpers.js";
 import "./generated/stylePropsTwMap.js";
-import "./propMappings.js";
+import "./modifier-mappings.js";
 import "./getStyles.js";
 import "./getComponentStyles.js";
 import "./createComponent.js";

package/dist/core/dist/modifier-mappings.d.ts

@@ -0,0 +1,13 @@
+import { ModifierProp } from "@uds/types";
+
+//#region ../core/dist/modifier-mappings.d.ts
+//#region src/modifier-mappings.d.ts
+declare const modifierMappings: Record<ModifierProp, string>;
+interface ModifierEntry {
+  prop: string;
+  cssSelector: string;
+  category: string;
+  description: string;
+} //#endregion
+//#endregion
+export { ModifierEntry, modifierMappings };

package/dist/core/dist/modifier-mappings.js

@@ -0,0 +1,61 @@
+//#region ../core/dist/modifier-mappings.js
+const modifierMappings = {
+	_after: "after:",
+	_hover: "hover:",
+	_focus: "focus:",
+	_focusWithin: "focus-within:",
+	_focusVisible: "focus-visible:",
+	_active: "active:",
+	_visited: "visited:",
+	_target: "target:",
+	_first: "first:",
+	_last: "last:",
+	_only: "only:",
+	_odd: "odd:",
+	_even: "even:",
+	_firstOfType: "first-of-type:",
+	_lastOfType: "last-of-type:",
+	_onlyOfType: "only-of-type:",
+	_empty: "empty:",
+	_disabled: "disabled:",
+	_enabled: "enabled:",
+	_checked: "checked:",
+	_indeterminate: "indeterminate:",
+	_default: "default:",
+	_required: "required:",
+	_valid: "valid:",
+	_invalid: "invalid:",
+	_inRange: "in-range:",
+	_outOfRange: "out-of-range:",
+	_placeholderShown: "placeholder-shown:",
+	_autofill: "autofill:",
+	_readonly: "read-only:",
+	_file: "file:",
+	_selection: "selection:",
+	_backdrop: "backdrop:",
+	_motionReduce: "motion-reduce:",
+	_motionSafe: "motion-safe:",
+	_contrastMore: "contrast-more:",
+	_contrastLess: "contrast-less:",
+	_forcedColors: "forced-colors:",
+	_placeholder: "placeholder:",
+	_ariaBusy: "aria-busy:",
+	_ariaChecked: "aria-checked:",
+	_ariaHidden: "aria-hidden:",
+	_ariaPressed: "aria-pressed:",
+	_ariaReadonly: "aria-readonly:",
+	_ariaRequired: "aria-required:",
+	_ariaSelected: "aria-selected:",
+	_ariaCurrent: "aria-[current]:",
+	_ariaDisabled: "aria-disabled:",
+	_ariaExpanded: "aria-expanded:",
+	_dataDisabled: "data-[disabled=true]:",
+	_dataStateOpen: "data-[state=open]:",
+	_dataStateClosed: "data-[state=closed]:",
+	_startingStyle: "starting-style:",
+	_scrollbar: "*::-webkit-scrollbar:",
+	_scrollbarThumb: "*::-webkit-scrollbar-thumb:",
+	_scrollbarTrack: "*::-webkit-scrollbar-track:"
+};
+//#endregion
+export { modifierMappings };

package/dist/core/dist/resolveMotionState.d.ts

@@ -1,4 +1,5 @@
 //#region ../core/dist/resolveMotionState.d.ts
-declare function resolveMotionState(stateKeyframe: Record<string, unknown>, index: number): Record<string, number>;
+//#region src/resolveMotionState.d.ts
+declare function resolveMotionState(stateKeyframe: Record<string, unknown>, index: number): Record<string, number>; //#endregion
 //#endregion
 export { resolveMotionState };

package/dist/core/dist/style-prop-data.d.ts

@@ -0,0 +1,33 @@
+import { StyleProp } from "@uds/types";
+
+//#region ../core/dist/style-prop-data.d.ts
+//#region src/style-prop-data.d.ts
+interface PropMapping {
+  /** Class name prefix for runtime class generation. 'no-prefix' means value IS the class. */
+  classPrefix: string;
+  /** CSS property name (for @utility directive generation). Only needed for token-based props. */
+  cssProperty?: string;
+  /** CSS variable namespace for tokens. Only needed for token-based (configurable) props. */
+  defaultVarPrefix?: string;
+  /** Module augmentation interface name. Only needed for configurable props. */
+  augmentType?: string;
+  /** Known literal values for functional @utility generation. Used for props with cssProperty but no defaultVarPrefix. */
+  literalValues?: string[];
+  /** Alternate CSS property for component configs (directValues mode).
+   *  Use when the utility cssProperty differs from the CSS shorthand needed for direct values.
+   *  e.g. transition utility maps to 'transition-property', but direct values need 'transition'. */
+  directCssProperty?: string;
+  /** Template for generating inline style values from arbitrary bracket values.
+   *  When present, arbitrary values like `[3.5px]` produce inline styles instead of Tailwind classes.
+   *  `cssProperty` is the CSS property name (kebab-case), `valueTemplate` uses `%s` as value placeholder.
+   *  e.g. { cssProperty: 'transform', valueTemplate: 'translateX(%s)' } */
+  arbitraryValueTemplate?: {
+    cssProperty: string;
+    valueTemplate: string;
+  };
+}
+/** Exclude className — it's passed through, not mapped to a utility class */
+type MappedStyleProp = Exclude<StyleProp, 'className'>;
+declare const propMappings: Record<MappedStyleProp, PropMapping>; //#endregion
+//#endregion
+export { PropMapping, propMappings };

package/dist/{loader/dist/packages/core/dist/propMappings.js → core/dist/style-prop-data.js}

@@ -1,4 +1,4 @@
-//#region ../loader/dist/packages/core/dist/propMappings.js
+//#region ../core/dist/style-prop-data.js
 const propMappings = {
 	animation: {
 		classPrefix: "animation",
@@ -1253,96 +1253,5 @@ const propMappings = {
 		augmentType: "CustomTextShadow"
 	}
 };
-/**
-* Built-in modifier mappings (pseudo-classes, pseudo-elements, etc.).
-* Custom modifiers from defineModes() are handled dynamically in the runtime.
-*/
-const modifierMappings = {
-	_after: "after:",
-	_hover: "hover:",
-	_focus: "focus:",
-	_focusWithin: "focus-within:",
-	_focusVisible: "focus-visible:",
-	_active: "active:",
-	_visited: "visited:",
-	_target: "target:",
-	_first: "first:",
-	_last: "last:",
-	_only: "only:",
-	_odd: "odd:",
-	_even: "even:",
-	_firstOfType: "first-of-type:",
-	_lastOfType: "last-of-type:",
-	_onlyOfType: "only-of-type:",
-	_empty: "empty:",
-	_disabled: "disabled:",
-	_enabled: "enabled:",
-	_checked: "checked:",
-	_indeterminate: "indeterminate:",
-	_default: "default:",
-	_required: "required:",
-	_valid: "valid:",
-	_invalid: "invalid:",
-	_inRange: "in-range:",
-	_outOfRange: "out-of-range:",
-	_placeholderShown: "placeholder-shown:",
-	_autofill: "autofill:",
-	_readonly: "read-only:",
-	_file: "file:",
-	_selection: "selection:",
-	_backdrop: "backdrop:",
-	_motionReduce: "motion-reduce:",
-	_motionSafe: "motion-safe:",
-	_contrastMore: "contrast-more:",
-	_contrastLess: "contrast-less:",
-	_forcedColors: "forced-colors:",
-	_placeholder: "placeholder:",
-	_ariaBusy: "aria-busy:",
-	_ariaChecked: "aria-checked:",
-	_ariaHidden: "aria-hidden:",
-	_ariaPressed: "aria-pressed:",
-	_ariaReadonly: "aria-readonly:",
-	_ariaRequired: "aria-required:",
-	_ariaSelected: "aria-selected:",
-	_ariaCurrent: "aria-[current]:",
-	_ariaDisabled: "aria-disabled:",
-	_ariaExpanded: "aria-expanded:",
-	_dataDisabled: "data-[disabled=true]:",
-	_dataStateOpen: "data-[state=open]:",
-	_dataStateClosed: "data-[state=closed]:",
-	_startingStyle: "starting-style:",
-	_scrollbar: "*::-webkit-scrollbar:",
-	_scrollbarThumb: "*::-webkit-scrollbar-thumb:",
-	_scrollbarTrack: "*::-webkit-scrollbar-track:"
-};
-/**
-* Maps each color prop name to its corresponding opacity prop name.
-* Used by runtime (getStyles) and loader (style-transform) to merge
-* a color value with its opacity before class generation.
-*
-* e.g. `bg="primary"` + `bgOpacity="75"` → class `bg-primary_75`
-*/
-const colorPropToOpacityProp = {
-	bg: "bgOpacity",
-	color: "colorOpacity",
-	textDecorationColor: "textDecorationColorOpacity",
-	borderColor: "borderColorOpacity",
-	borderYColor: "borderYColorOpacity",
-	borderXColor: "borderXColorOpacity",
-	borderStartColor: "borderStartColorOpacity",
-	borderLeftColor: "borderLeftColorOpacity",
-	borderEndColor: "borderEndColorOpacity",
-	borderRightColor: "borderRightColorOpacity",
-	borderTopColor: "borderTopColorOpacity",
-	borderBottomColor: "borderBottomColorOpacity",
-	divideColor: "divideColorOpacity",
-	outlineColor: "outlineColorOpacity",
-	ringColor: "ringColorOpacity",
-	ringOffsetColor: "ringOffsetColorOpacity",
-	fillColor: "fillColorOpacity",
-	strokeColor: "strokeColorOpacity",
-	shadowColor: "shadowColorOpacity",
-	caretColor: "caretColorOpacity"
-};
 //#endregion
-export { colorPropToOpacityProp, modifierMappings, propMappings };
+export { propMappings };

package/dist/core/dist/transformPreset.d.ts

@@ -1,6 +1,7 @@
 import { MotionPreset } from "@uds/types";
 
 //#region ../core/dist/transformPreset.d.ts
+//#region src/transformPreset.d.ts
 interface TransformedMotionProps {
   initial?: Record<string, unknown>;
   animate?: Record<string, unknown>;
@@ -12,6 +13,6 @@ interface TransformedMotionProps {
 /**
  * Convert a JS-runtime MotionPreset to a motion/react-compatible props object.
  */
-declare function transformPreset(preset: MotionPreset): TransformedMotionProps;
+declare function transformPreset(preset: MotionPreset): TransformedMotionProps; //#endregion
 //#endregion
 export { TransformedMotionProps, transformPreset };

package/dist/core/dist/withDefaultStyleProps.d.ts

@@ -1,6 +1,7 @@
 import { BorderRadius, GridSpan, GridStartEnd, GridTemplate, StyleAndModifierProps } from "@uds/types";
 
 //#region ../core/dist/withDefaultStyleProps.d.ts
+//#region src/withDefaultStyleProps.d.ts
 interface StackDefaultsInput extends StyleAndModifierProps {
   gap?: StyleAndModifierProps['gap'];
 }
@@ -38,6 +39,6 @@ declare const withDefaultStyleProps: {
     shape?: BorderRadius;
   }) => StyleAndModifierProps;
   Svg: (props: SvgDefaultsInput) => StyleAndModifierProps;
-};
+}; //#endregion
 //#endregion
 export { withDefaultStyleProps };

package/dist/core.d.ts

@@ -1,11 +1,14 @@
+import { colorPropToOpacityProp } from "./core/dist/color-opacity-map.js";
 import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./core/dist/compositeStyles.js";
+import { PropMapping, propMappings } from "./core/dist/style-prop-data.js";
+import { ConfigurablePropertyEntry, CssVariablePrefixEntry, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./core/dist/configurable-prop-helpers.js";
 import { createComponent } from "./core/dist/createComponent.js";
 import { ComponentExample, createComponentExample } from "./core/dist/createComponentExample.js";
 import { createProvider } from "./core/dist/createProvider.js";
 import { stylePropsTwMap } from "./core/dist/generated/stylePropsTwMap.js";
 import { createComponentStyler } from "./core/dist/getComponentStyles.js";
 import { createVariants, cx, getStyles, getVariantClassName, processStyleProps, toCamelCase } from "./core/dist/getStyles.js";
-import { ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, colorPropToOpacityProp, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings } from "./core/dist/propMappings.js";
+import { ModifierEntry, modifierMappings } from "./core/dist/modifier-mappings.js";
 import { resolveMotionState } from "./core/dist/resolveMotionState.js";
 import { TransformedMotionProps, transformPreset } from "./core/dist/transformPreset.js";
 import { withDefaultStyleProps } from "./core/dist/withDefaultStyleProps.js";

package/dist/core.js

@@ -1,6 +1,9 @@
+import { colorPropToOpacityProp } from "./core/dist/color-opacity-map.js";
 import { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig } from "./core/dist/compositeStyles.js";
+import { propMappings } from "./core/dist/style-prop-data.js";
+import { getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./core/dist/configurable-prop-helpers.js";
 import { stylePropsTwMap } from "./core/dist/generated/stylePropsTwMap.js";
-import { colorPropToOpacityProp, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings } from "./core/dist/propMappings.js";
+import { modifierMappings } from "./core/dist/modifier-mappings.js";
 import { createVariants, cx, getStyles, getVariantClassName, processStyleProps, toCamelCase } from "./core/dist/getStyles.js";
 import { createComponentStyler } from "./core/dist/getComponentStyles.js";
 import { createComponent } from "./core/dist/createComponent.js";

package/dist/fixtures.d.ts

@@ -1,2 +1,4 @@
-import { ConfigurablePropertyEntry, CssVariablePrefixEntry, ModifierEntry, PropMapping, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings } from "./core/dist/propMappings.js";
+import { PropMapping, propMappings } from "./core/dist/style-prop-data.js";
+import { ConfigurablePropertyEntry, CssVariablePrefixEntry, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./core/dist/configurable-prop-helpers.js";
+import { ModifierEntry, modifierMappings } from "./core/dist/modifier-mappings.js";
 export { type ConfigurablePropertyEntry, type CssVariablePrefixEntry, type ModifierEntry, type PropMapping, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings };

package/dist/fixtures.js

@@ -1,3 +1,5 @@
-import { getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings } from "./core/dist/propMappings.js";
+import { propMappings } from "./core/dist/style-prop-data.js";
+import { getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes } from "./core/dist/configurable-prop-helpers.js";
+import { modifierMappings } from "./core/dist/modifier-mappings.js";
 import "./core/dist/index.js";
 export { getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes, modifierMappings, propMappings };