@yahoo/uds 3.29.0 → 3.31.0-beta.1

package/dist/fixtures.js

@@ -1698,7 +1698,13 @@ var textVariants = [
     "label4",
     "caption1",
     "caption2",
-    "legal1"
+    "legal1",
+    "ui1",
+    "ui2",
+    "ui3",
+    "ui4",
+    "ui5",
+    "ui6"
 ];
 var textProperties = [
     "fontFamily",
@@ -1814,7 +1820,13 @@ var fontSizeRamp = {
         label4: -2,
         caption1: -1,
         caption2: -1,
-        legal1: -1
+        legal1: -1,
+        ui1: 0,
+        ui2: 0,
+        ui3: 0,
+        ui4: 0,
+        ui5: 0,
+        ui6: 0
     },
     small: {
         display1: -2,
@@ -1832,7 +1844,13 @@ var fontSizeRamp = {
         label4: -1,
         caption1: 0,
         caption2: 0,
-        legal1: 0
+        legal1: 0,
+        ui1: 0,
+        ui2: 0,
+        ui3: 0,
+        ui4: 0,
+        ui5: 0,
+        ui6: 0
     },
     medium: {
         display1: -1,
@@ -1850,7 +1868,13 @@ var fontSizeRamp = {
         label4: -1,
         caption1: 0,
         caption2: 0,
-        legal1: 0
+        legal1: 0,
+        ui1: 0,
+        ui2: 0,
+        ui3: 0,
+        ui4: 0,
+        ui5: 0,
+        ui6: 0
     },
     large: {
         display1: 0,
@@ -1868,7 +1892,13 @@ var fontSizeRamp = {
         label4: 0,
         caption1: 0,
         caption2: 0,
-        legal1: 0
+        legal1: 0,
+        ui1: 0,
+        ui2: 0,
+        ui3: 0,
+        ui4: 0,
+        ui5: 0,
+        ui6: 0
     },
     xLarge: {
         display1: 2,
@@ -1886,7 +1916,13 @@ var fontSizeRamp = {
         label4: 2,
         caption1: 2,
         caption2: 2,
-        legal1: 2
+        legal1: 2,
+        ui1: 2,
+        ui2: 2,
+        ui3: 2,
+        ui4: 2,
+        ui5: 2,
+        ui6: 2
     },
     xxLarge: {
         display1: 4,
@@ -1904,7 +1940,13 @@ var fontSizeRamp = {
         label4: 4,
         caption1: 4,
         caption2: 4,
-        legal1: 4
+        legal1: 4,
+        ui1: 4,
+        ui2: 4,
+        ui3: 4,
+        ui4: 4,
+        ui5: 4,
+        ui6: 4
     },
     xxxLarge: {
         display1: 6,
@@ -1922,7 +1964,13 @@ var fontSizeRamp = {
         label4: 6,
         caption1: 6,
         caption2: 6,
-        legal1: 6
+        legal1: 6,
+        ui1: 6,
+        ui2: 6,
+        ui3: 6,
+        ui4: 6,
+        ui5: 6,
+        ui6: 6
     }
 };
 var lineHeightRamp = {
@@ -1942,7 +1990,13 @@ var lineHeightRamp = {
         label4: -4,
         caption1: 0,
         caption2: 0,
-        legal1: -4
+        legal1: -4,
+        ui1: 0,
+        ui2: 0,
+        ui3: 0,
+        ui4: 0,
+        ui5: 0,
+        ui6: 0
     },
     small: {
         display1: 0,
@@ -1960,7 +2014,13 @@ var lineHeightRamp = {
         label4: -4,
         caption1: 0,
         caption2: 0,
-        legal1: 0
+        legal1: 0,
+        ui1: 0,
+        ui2: 0,
+        ui3: 0,
+        ui4: 0,
+        ui5: 0,
+        ui6: 0
     },
     medium: {
         display1: 0,
@@ -1978,7 +2038,13 @@ var lineHeightRamp = {
         label4: -4,
         caption1: 0,
         caption2: 0,
-        legal1: 0
+        legal1: 0,
+        ui1: 0,
+        ui2: 0,
+        ui3: 0,
+        ui4: 0,
+        ui5: 0,
+        ui6: 0
     },
     large: {
         display1: 0,
@@ -1996,7 +2062,13 @@ var lineHeightRamp = {
         label4: 0,
         caption1: 0,
         caption2: 0,
-        legal1: 0
+        legal1: 0,
+        ui1: 0,
+        ui2: 0,
+        ui3: 0,
+        ui4: 0,
+        ui5: 0,
+        ui6: 0
     },
     xLarge: {
         display1: 0,
@@ -2014,7 +2086,13 @@ var lineHeightRamp = {
         label4: 0,
         caption1: 4,
         caption2: 4,
-        legal1: 0
+        legal1: 0,
+        ui1: 0,
+        ui2: 0,
+        ui3: 0,
+        ui4: 0,
+        ui5: 0,
+        ui6: 0
     },
     xxLarge: {
         display1: 0,
@@ -2032,7 +2110,13 @@ var lineHeightRamp = {
         label4: 4,
         caption1: 4,
         caption2: 4,
-        legal1: 4
+        legal1: 4,
+        ui1: 0,
+        ui2: 0,
+        ui3: 0,
+        ui4: 0,
+        ui5: 0,
+        ui6: 0
     },
     xxxLarge: {
         display1: 0,
@@ -2050,7 +2134,13 @@ var lineHeightRamp = {
         label4: 8,
         caption1: 8,
         caption2: 8,
-        legal1: 4
+        legal1: 4,
+        ui1: 0,
+        ui2: 0,
+        ui3: 0,
+        ui4: 0,
+        ui5: 0,
+        ui6: 0
     }
 };
 var avatarSizes = [

package/dist/index-B9RNh21D.d.ts

@@ -0,0 +1,245 @@
+import * as properties from '@yahoo/uds/fixtures';
+import { m as ShadowPreset, g as UniversalTokensConfig } from './types-BdTp68BU.js';
+
+type DispatchContext = {
+    componentName: string;
+    subComponentName?: string;
+    propertyKey: string;
+    layer: string;
+};
+interface ConfigurableProperty<T extends AllPossibleProperties, CVR = unknown> {
+    name: string;
+    cssProperties: string | string[];
+    twThemePath: (selected: T, value: string) => string;
+    possibleFixtures: T[];
+    extendedProperties?: ExtendablePropertiesName[] | ((context: DispatchContext) => ExtendablePropertiesName[] | undefined | false);
+    customValueRenderer?: (schemaStateValue: SchemaStateValue<CVR>, schema: unknown, themeGetter: (path: string) => string) => string;
+    concatenate?: boolean;
+    concatenationDelimiter?: string;
+}
+declare const publicProperties: {
+    readonly backgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
+    readonly borderWidth: ConfigurableProperty<"spacingAliases" | "borderWidths", unknown>;
+    readonly borderRadius: ConfigurableProperty<"borderRadii", unknown>;
+    readonly borderColor: ConfigurableProperty<"linePaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
+    readonly fontFamily: ConfigurableProperty<"textVariants", unknown>;
+    readonly fontSize: ConfigurableProperty<"textVariants", unknown>;
+    readonly fontVariationSettings: ConfigurableProperty<"textVariants", unknown>;
+    readonly lineHeight: ConfigurableProperty<"textVariants", unknown>;
+    readonly textTransform: ConfigurableProperty<"textVariants", unknown>;
+    readonly padding: ConfigurableProperty<"spacingAliases", unknown>;
+    readonly gap: ConfigurableProperty<"spacingAliases", unknown>;
+    readonly color: ConfigurableProperty<"foregroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
+    readonly fontWeight: ConfigurableProperty<"textVariants", unknown>;
+    readonly iconSize: ConfigurableProperty<"iconSizes", unknown>;
+    readonly spacingHorizontal: ConfigurableProperty<"spacingAliases", unknown>;
+    readonly spacingVertical: ConfigurableProperty<"spacingAliases", unknown>;
+    readonly textVariant: ConfigurableProperty<"textVariants", unknown>;
+    readonly textDecorationLine: ConfigurableProperty<"textDecorationLines", unknown>;
+    readonly shadow: ConfigurableProperty<"shadowVariants", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
+    readonly insetShadow: ConfigurableProperty<"shadowVariantsWithInvert", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
+    readonly height: ConfigurableProperty<"spacingAliases", unknown>;
+    readonly width: ConfigurableProperty<"spacingAliases", unknown>;
+};
+declare const configurableProperties: {
+    outlineWidth: ConfigurableProperty<"spacingAliases" | "borderWidths", unknown>;
+    outlineColor: ConfigurableProperty<"linePaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
+    insetOutlineOffset: ConfigurableProperty<"spacingAliases" | "borderWidths", unknown>;
+    solidOutline: ConfigurableProperty<never, unknown>;
+    backgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
+    borderWidth: ConfigurableProperty<"spacingAliases" | "borderWidths", unknown>;
+    borderRadius: ConfigurableProperty<"borderRadii", unknown>;
+    borderColor: ConfigurableProperty<"linePaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
+    fontFamily: ConfigurableProperty<"textVariants", unknown>;
+    fontSize: ConfigurableProperty<"textVariants", unknown>;
+    fontVariationSettings: ConfigurableProperty<"textVariants", unknown>;
+    lineHeight: ConfigurableProperty<"textVariants", unknown>;
+    textTransform: ConfigurableProperty<"textVariants", unknown>;
+    padding: ConfigurableProperty<"spacingAliases", unknown>;
+    gap: ConfigurableProperty<"spacingAliases", unknown>;
+    color: ConfigurableProperty<"foregroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
+    fontWeight: ConfigurableProperty<"textVariants", unknown>;
+    iconSize: ConfigurableProperty<"iconSizes", unknown>;
+    spacingHorizontal: ConfigurableProperty<"spacingAliases", unknown>;
+    spacingVertical: ConfigurableProperty<"spacingAliases", unknown>;
+    textVariant: ConfigurableProperty<"textVariants", unknown>;
+    textDecorationLine: ConfigurableProperty<"textDecorationLines", unknown>;
+    shadow: ConfigurableProperty<"shadowVariants", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
+    insetShadow: ConfigurableProperty<"shadowVariantsWithInvert", string | [] | [ShadowPreset] | [ShadowPreset, ShadowPreset] | [ShadowPreset, ShadowPreset, ShadowPreset]>;
+    height: ConfigurableProperty<"spacingAliases", unknown>;
+    width: ConfigurableProperty<"spacingAliases", unknown>;
+};
+type ExtendablePropertiesName = keyof typeof configurableProperties;
+type ConfigurablePropertiesName = keyof typeof publicProperties;
+interface SelectedConfigurableProperty<C extends ConfigurablePropertiesName, O extends string, T extends (typeof publicProperties)[C]['possibleFixtures'] = (typeof publicProperties)[C]['possibleFixtures'], V extends readonly (readonly string[])[] = readonly (readonly string[])[]> {
+    label: string;
+    name: C;
+    typeOfFixture: T;
+    values: V;
+    pseudoStates?: PossibleStates[];
+    supportsCustom?: boolean;
+    defaults: {
+        [K in O]: V[number][number];
+    };
+}
+
+type AllPossibleProperties = Exclude<keyof typeof properties, 'iconButtonClassNames' | 'iconButtonSize' | 'iconButtonStates' | 'buttonClassNames' | 'buttonColorProperties' | 'buttonIconSvgSize' | 'buttonKinds' | 'buttonMotionEffects' | 'buttonMotionProperties' | 'buttonPalettes' | 'buttonSizeProperties' | 'buttonSizes' | 'buttonStates' | 'buttonVariants'> | 'shadowVariantConfig';
+type PossibleStates = 'hover' | 'pressed' | 'focused' | 'invalid' | 'focus-within' | 'focused-keyboard' | 'visited' | 'readonly' | 'disabled' | 'invalid&hover' | 'invalid&pressed';
+type PossibleStatesWithRest = 'rest' | PossibleStates;
+interface LayerConfig {
+    label: string;
+    properties: Readonly<Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>>;
+    pseudoSelector?: string;
+}
+interface ComponentStateConfig {
+    label: string;
+    options: string[];
+    layers: {
+        root: LayerConfig;
+    } & Record<string, LayerConfig>;
+}
+interface SubComponentConfig {
+    label: string;
+    description: string;
+    overrideComponentName?: string;
+    variants: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
+}
+interface VariantConfig<O extends string = string> {
+    label: string;
+    description: string;
+    isConfigurable: boolean;
+    default: O;
+    options: readonly O[];
+}
+interface VariantConfigWithProperties<O extends string = string> extends VariantConfig<O> {
+    layers: {
+        root: LayerConfig;
+    } & Record<string, LayerConfig>;
+}
+interface VariantConfigWithComponentStates<O extends string = string> extends VariantConfig<O> {
+    componentStates?: Readonly<Record<string, ComponentStateConfig>>;
+}
+interface ComponentConfig {
+    label: string;
+    description: string;
+    overrideComponentName?: string;
+    subComponents?: Record<string, SubComponentConfig>;
+    variants?: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
+}
+type AutoComponents = Omit<UniversalTokensConfig, 'colorMode' | 'font' | 'scaleMode' | 'version' | 'motion' | 'button' | 'iconButton' | 'shadow' | 'breakpoints' | 'typography' | 'globalDefaults'>;
+type AutoComponentName = keyof AutoComponents;
+type AllVariantKeys = {
+    [K in keyof AutoComponents]: {
+        [V in keyof AutoComponents[K]['defaults']]: V;
+    }[keyof AutoComponents[K]['defaults']];
+}[keyof AutoComponents];
+
+type ThemeFn = (path: string) => string;
+type SchemaStateValue<T = any> = {
+    type: string;
+    valueType: 'alias' | 'custom';
+    value: T;
+};
+declare const statePseudoMapDocsMode: Record<PossibleStates | 'rest', string>;
+declare function findFixtureType(property: SelectedConfigurableProperty<ConfigurablePropertiesName, string>, variantKey: string): string;
+declare function toMinimalDbConfigObject<C extends ComponentConfig>(config: C): any;
+declare function generateClassName({ componentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, subComponentName, stateKey, stateValue, }: {
+    componentName: string;
+    variantKey: string;
+    variantValue?: string;
+    layer: string;
+    layerOptionalPseudoSelector?: string;
+    subComponentName?: string;
+    stateKey?: string;
+    stateValue?: string;
+}): string;
+declare function generateDeclaration({ componentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, subComponentName, stateKey, stateValue, schema, propertyKey, originalPropertyDefinition, theme, currentStyles, previewOptions, }: {
+    componentName: string;
+    variantKey: string;
+    variantValue: string;
+    layer: string;
+    layerOptionalPseudoSelector?: string;
+    subComponentName?: string;
+    stateKey?: string;
+    stateValue?: string;
+    schema: unknown;
+    propertyKey: string;
+    originalPropertyDefinition: SelectedConfigurableProperty<ConfigurablePropertiesName, any>;
+    theme: ThemeFn;
+    currentStyles: Readonly<Record<string, Record<string, string>>>;
+    previewOptions?: {
+        generatePseudoStateClassModifier?: boolean;
+        forcePseudoState?: boolean;
+    };
+}): Record<string, Record<string, string>>;
+declare function generateStyles<C extends ComponentConfig>(config: C, schema: any, theme: ThemeFn, previewOptions?: {
+    generatePseudoStateClassModifier: boolean;
+    forcePseudoState: boolean;
+}): Record<string, Record<string, string>>;
+declare function createConfigurableProperty<C extends ConfigurablePropertiesName, O extends string, T extends (typeof configurableProperties)[C]['possibleFixtures'], V extends readonly (readonly string[])[] = readonly (readonly string[])[]>(prop: {
+    name: C;
+    typeOfFixture: T;
+    values: V;
+    defaults: {
+        [K in O]: V[number][number];
+    };
+    label: string;
+    pseudoStates?: PossibleStates[];
+    supportsCustom?: boolean;
+}): SelectedConfigurableProperty<C, O, T, V>;
+/**
+ * @deprecated use the new functions instead
+ */
+declare function createVariantConfig<O extends string, T extends Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, O>>>(config: {
+    label: string;
+    description: string;
+    isConfigurable: boolean;
+    default: O;
+    options: readonly O[];
+    properties: T;
+}): VariantConfig<O>;
+declare function createComponentStateConfig(config: {
+    label: string;
+    options: string[];
+    layers: {
+        root: LayerConfig;
+    } & Record<string, LayerConfig>;
+}): ComponentStateConfig;
+declare function createVariantConfigWithProperties(config: {
+    label: string;
+    description: string;
+    isConfigurable: boolean;
+    default: string;
+    options: readonly string[];
+    layers: {
+        root: LayerConfig;
+    } & Record<string, LayerConfig>;
+}): VariantConfigWithProperties;
+declare function createVariantConfigWithComponentStates(config: {
+    label: string;
+    description: string;
+    isConfigurable: boolean;
+    default: string;
+    options: readonly string[];
+    componentStates: Record<string, ComponentStateConfig>;
+}): VariantConfigWithComponentStates;
+declare function createComponentStates(config: {
+    label: string;
+    options: string[];
+    layers: {
+        root: LayerConfig;
+    } & Record<string, LayerConfig>;
+}): ComponentStateConfig;
+declare function createLayerConfig(config: {
+    label: string;
+    pseudoSelector?: string;
+    properties: Readonly<Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>>;
+}): LayerConfig;
+declare function createSubComponentConfig(config: {
+    label: string;
+    description: string;
+    overrideComponentName?: string;
+    variants: Record<string, VariantConfigWithProperties | VariantConfigWithComponentStates>;
+}): SubComponentConfig;
+
+export { type AllPossibleProperties as A, type ConfigurablePropertiesName as C, type ExtendablePropertiesName as E, type LayerConfig as L, type PossibleStates as P, type SelectedConfigurableProperty as S, type VariantConfig as V, type PossibleStatesWithRest as a, type ComponentStateConfig as b, configurableProperties as c, type SubComponentConfig as d, type VariantConfigWithProperties as e, type VariantConfigWithComponentStates as f, type ComponentConfig as g, type AutoComponents as h, type AutoComponentName as i, type AllVariantKeys as j, type SchemaStateValue as k, findFixtureType as l, generateClassName as m, generateDeclaration as n, generateStyles as o, createConfigurableProperty as p, createVariantConfig as q, createComponentStateConfig as r, statePseudoMapDocsMode as s, toMinimalDbConfigObject as t, createVariantConfigWithProperties as u, createVariantConfigWithComponentStates as v, createComponentStates as w, createLayerConfig as x, createSubComponentConfig as y };