@yahoo/uds-v5-wip 1.33.0 → 1.34.0

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";

package/dist/config.d.ts

@@ -8,6 +8,47 @@ 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", {
+  opacity: {
+    0: string;
+    5: string;
+    10: string;
+    20: string;
+    40: string;
+    60: string;
+    80: string;
+    25: string;
+    30: string;
+    50: string;
+    70: string;
+    75: string;
+    90: string;
+    95: string;
+    100: string;
+  };
+  scale: {
+    0: string;
+    50: string;
+    75: string;
+    90: string;
+    95: string;
+    100: string;
+    105: string;
+    110: string;
+    125: string;
+    150: string;
+    200: string;
+  };
+  rotate: {
+    0: string;
+    2: string;
+    1: string;
+    3: string;
+    6: string;
+    12: string;
+    90: string;
+    45: string;
+    180: string;
+  };
   color: {
     inherit: string;
     current: string;
@@ -33,23 +74,7 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     inverse: string;
     "on-inverse": string;
   };
-  fontFamily: {
-    sans: string;
-    serif: string;
-    mono: string;
-  };
-  fontWeight: {
-    bold: string;
-    light: string;
-    thin: string;
-    medium: string;
-    extralight: string;
-    normal: string;
-    semibold: string;
-    extrabold: string;
-    black: string;
-  };
-  bg: {
+  borderColor: {
     brand: string;
     accent: string;
     alert: string;
@@ -60,17 +85,51 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     tertiary: string;
     inverse: string;
     surface: string;
-    "elevation-1": string;
-    "elevation-2": string;
-    "elevation-3": string;
     "brand-wash": string;
     "accent-wash": string;
     "alert-wash": string;
     "positive-wash": string;
     "warning-wash": string;
-    overlay: string;
   };
-  borderColor: {
+  position: {
+    auto: string;
+    full: string;
+    "1/2": string;
+    "1/3": string;
+    "2/3": string;
+    "1/4": string;
+    "2/4": string;
+    "3/4": string;
+  };
+  size: {
+    auto: string;
+    full: string;
+    max: string;
+    min: string;
+    "1/2": string;
+    "1/3": string;
+    "2/3": string;
+    "1/4": string;
+    "2/4": string;
+    "3/4": string;
+    fit: string;
+    "1/5": string;
+    "2/5": string;
+    "3/5": string;
+    "4/5": string;
+    "1/6": string;
+    "2/6": string;
+    "3/6": string;
+    "4/6": string;
+    "5/6": string;
+  };
+  animation: {
+    none: string;
+    ping: string;
+    spin: string;
+  };
+  bg: {
+    overlay: string;
     brand: string;
     accent: string;
     alert: string;
@@ -81,6 +140,9 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     tertiary: string;
     inverse: string;
     surface: string;
+    "elevation-1": string;
+    "elevation-2": string;
+    "elevation-3": string;
     "brand-wash": string;
     "accent-wash": string;
     "alert-wash": string;
@@ -93,63 +155,50 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     medium: string;
     thick: string;
   };
-  outlineWidth: {
+  divideWidth: {
     0: string;
-    2: string;
-    1: string;
     4: string;
-    8: string;
-  };
-  outlineOffset: {
-    0: string;
+    reverse: string;
     2: string;
-    1: string;
-    4: string;
     8: string;
   };
-  divideWidth: {
-    0: string;
-    2: string;
-    reverse: string;
-    4: string;
-    8: string;
+  flex: {
+    none: string;
+    initial: string;
+    auto: string;
+    1: string;
   };
-  ringWidth: {
+  flexGrow: {
     0: string;
-    2: string;
     1: string;
-    inset: string;
-    4: string;
-    8: string;
   };
-  ringOffsetWidth: {
+  flexShrink: {
     0: string;
-    2: string;
-    1: string;
-    4: string;
-    8: string;
   };
-  lineHeight: {
-    none: string;
-    normal: string;
-    tight: string;
-    relaxed: string;
+  aspectRatio: {
+    square: string;
+    landscape: string;
+    portrait: string;
+    widescreen: string;
+    ultrawide: string;
+    golden: string;
   };
-  letterSpacing: {
-    normal: string;
-    tight: string;
-    tighter: string;
-    wide: string;
-    wider: string;
-    widest: string;
+  zIndex: {
+    0: string;
+    auto: string;
+    10: string;
+    20: string;
+    40: string;
+    30: string;
+    50: string;
   };
   spacing: {
     0: string;
+    4: string;
     2: string;
     5: string;
     1: string;
     px: string;
-    4: string;
     8: string;
     0.5: string;
     1.5: string;
@@ -180,183 +229,116 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     80: string;
     96: string;
   };
-  position: {
-    auto: string;
-    full: string;
-    "1/2": string;
-    "1/3": string;
-    "2/3": string;
-    "1/4": string;
-    "2/4": string;
-    "3/4": string;
-  };
-  aspectRatio: {
-    square: string;
-    landscape: string;
-    portrait: string;
-    widescreen: string;
-    ultrawide: string;
-    golden: string;
+  w: {
+    screen: string;
+    svw: string;
+    lvw: string;
+    dvw: string;
   };
-  flex: {
+  outlineWidth: {
+    0: string;
+    4: string;
+    2: string;
     1: string;
-    none: string;
-    auto: string;
-    initial: string;
+    8: string;
   };
-  flexGrow: {
+  outlineOffset: {
     0: string;
+    4: string;
+    2: string;
     1: string;
+    8: string;
   };
-  flexShrink: {
+  ringWidth: {
     0: string;
+    4: string;
+    inset: string;
+    2: string;
+    1: string;
+    8: string;
   };
-  opacity: {
+  ringOffsetWidth: {
     0: string;
-    5: string;
-    10: string;
-    20: string;
-    40: string;
-    60: string;
-    80: string;
-    25: string;
-    30: string;
-    50: string;
-    70: string;
-    75: string;
-    90: string;
-    95: string;
-    100: string;
+    4: string;
+    2: string;
+    1: string;
+    8: string;
   };
-  radius: {
+  shadow: {
+    none: string;
     sm: string;
     md: string;
     lg: string;
     xl: string;
-    none: string;
-    full: string;
+    "2xl": string;
+    "2xs": string;
     xs: string;
+    inner: string;
   };
-  animation: {
+  strokeWidth: {
+    0: string;
+    2: string;
+    1: string;
+  };
+  fontFamily: {
+    sans: string;
+    serif: string;
+    mono: string;
+  };
+  fontWeight: {
+    normal: string;
+    thin: string;
+    bold: string;
+    light: string;
+    medium: string;
+    extralight: string;
+    semibold: string;
+    extrabold: string;
+    black: string;
+  };
+  letterSpacing: {
+    normal: string;
+    tight: string;
+    tighter: string;
+    wide: string;
+    wider: string;
+    widest: string;
+  };
+  lineHeight: {
     none: string;
-    spin: string;
-    ping: string;
+    normal: string;
+    tight: string;
+    relaxed: string;
   };
-  shadow: {
+  textShadow: {
+    none: string;
     sm: string;
     md: string;
     lg: string;
-    xl: string;
-    "2xl": string;
-    none: string;
-    xs: string;
     "2xs": string;
-    inner: string;
+    xs: string;
   };
   blur: {
+    none: string;
     sm: string;
     md: string;
     lg: string;
     xl: string;
     "2xl": string;
-    none: string;
     "3xl": string;
   };
-  textShadow: {
-    sm: string;
-    md: string;
-    lg: string;
-    none: string;
-    xs: string;
-    "2xs": string;
-  };
-  zIndex: {
-    0: string;
-    auto: string;
-    10: string;
-    20: string;
-    40: string;
-    30: string;
-    50: string;
-  };
-  size: {
-    auto: string;
-    full: string;
-    "1/2": string;
-    "1/3": string;
-    "2/3": string;
-    "1/4": string;
-    "2/4": string;
-    "3/4": string;
-    min: string;
-    max: string;
-    fit: string;
-    "1/5": string;
-    "2/5": string;
-    "3/5": string;
-    "4/5": string;
-    "1/6": string;
-    "2/6": string;
-    "3/6": string;
-    "4/6": string;
-    "5/6": string;
-  };
-  w: {
-    screen: string;
-    svw: string;
-    lvw: string;
-    dvw: string;
-  };
-  h: {
-    screen: string;
-    svh: string;
-    lvh: string;
-    dvh: string;
-  };
-  rotate: {
-    0: string;
-    2: string;
-    1: string;
-    3: string;
-    6: string;
-    12: string;
-    90: string;
-    45: string;
-    180: string;
-  };
-  scale: {
-    0: string;
-    50: string;
-    75: string;
-    90: string;
-    95: string;
-    100: string;
-    105: string;
-    110: string;
-    125: string;
-    150: string;
-    200: string;
-  };
-  skew: {
-    0: string;
-    2: string;
-    1: string;
-    3: string;
-    6: string;
-    12: string;
-  };
   translate: {
     0: string;
+    4: string;
+    full: string;
     2: string;
     5: string;
     1: string;
-    full: string;
     "1/2": string;
     "1/3": string;
     "2/3": string;
     "1/4": string;
     "3/4": string;
-    4: string;
     8: string;
     0.5: string;
     1.5: string;
@@ -387,10 +369,28 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | "_light" | "
     80: string;
     96: string;
   };
-  strokeWidth: {
+  radius: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xs: string;
+    full: string;
+  };
+  h: {
+    screen: string;
+    svh: string;
+    lvh: string;
+    dvh: string;
+  };
+  skew: {
     0: string;
     2: string;
     1: string;
+    3: string;
+    6: string;
+    12: string;
   };
 }, {}, {}, {}, "_light" | "_dark" | "_sm" | "_md" | "_lg" | "_xl" | "_2xl", {
   readonly color: {

package/dist/core/dist/compositeStyles.d.ts

@@ -1,6 +1,7 @@
 import { CompositeStylesConfig } from "@uds/types";
 
 //#region ../core/dist/compositeStyles.d.ts
+//#region src/compositeStyles.d.ts
 /** Set the composite-styles config (called by loader at build time) */
 declare function setCompositeStylesConfig(config: CompositeStylesConfig): void;
 /** Get the current composite-styles config */
@@ -16,6 +17,6 @@ declare function getCompositeStylesConfig(): CompositeStylesConfig;
 declare function expandCompositeStyles(props: Record<string, unknown>, config?: CompositeStylesConfig): {
   expanded: Record<string, unknown>;
   markerClasses: string[];
-};
+}; //#endregion
 //#endregion
 export { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig };

package/dist/core/dist/createComponent.d.ts

@@ -1,6 +1,7 @@
 import { CreateComponentConfig, CreateComponentProps, CreateComponentRenderFn, CreateComponentSlotTagConfig, CreateComponentTypeInput } from "@uds/types";
 
 //#region ../core/dist/createComponent.d.ts
+//#region src/createComponent.d.ts
 type PrimitiveTag = keyof React.JSX.IntrinsicElements;
 type SpecConfig<TSpec> = TSpec extends {
   config: infer TConfig extends CreateComponentTypeInput;
@@ -51,6 +52,6 @@ declare function createComponent<TSpecOrProps = {}>(tag: PrimitiveTag): React.FC
   props: infer TOwnProps;
 } ? CreateComponentProps<TConfig, TOwnProps, PrimitiveTag> : PrimitiveOwnProps<TSpecOrProps>>;
 declare function createComponent<TSpec>(renderFn: CreateComponentRenderFn<SpecConfig<TSpec>, SpecOwnProps<TSpec>, SpecSlotConfig<TSpec>>): React.FC<CreateComponentProps<SpecConfig<TSpec>, SpecOwnProps<TSpec>, SpecSlotConfig<TSpec>>>;
-declare function createComponent(config: CreateComponentConfig<string>, renderFn: CreateComponentRenderFn<any, any, any>): React.FC<any>;
+declare function createComponent(config: CreateComponentConfig<string>, renderFn: CreateComponentRenderFn<any, any, any>): React.FC<any>; //#endregion
 //#endregion
 export { createComponent };