@yahoo/uds-v5-wip 1.40.0 → 1.41.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/config/dist/Props.d.ts +5 -0
- package/dist/config/dist/component-config.d.ts +14 -0
- package/dist/config/dist/component-refs.d.ts +13 -0
- package/dist/config/dist/component-resolution.d.ts +1 -1
- package/dist/config/dist/consts/defaultColors.d.ts +2 -1
- package/dist/config/dist/createConfig.d.ts +13 -1
- package/dist/config/dist/createConfig.js +1 -1
- package/dist/config/dist/defineComponent.d.ts +7 -0
- package/dist/config/dist/defineStyleProp.d.ts +20 -1
- package/dist/config/dist/defineStyleProp.js +27 -13
- package/dist/config/dist/index.d.ts +1 -1
- package/dist/config/dist/index.js +1 -1
- package/dist/config/dist/refs.js +65 -0
- package/dist/config/dist/resolveStyleProp.d.ts +7 -0
- package/dist/config/dist/resolveStyleProp.js +3 -12
- package/dist/config/dist/serialize.d.ts +2 -1
- package/dist/config/dist/types/css-values.d.ts +2 -1
- package/dist/config/dist/types.d.ts +2 -1
- package/dist/core/dist/color-opacity-map.d.ts +1 -2
- package/dist/core/dist/compositeStyles.d.ts +1 -2
- package/dist/core/dist/configurable-prop-helpers.d.ts +1 -2
- package/dist/core/dist/createComponent.d.ts +1 -2
- package/dist/core/dist/createComponentExample.d.ts +1 -2
- package/dist/core/dist/createProvider.d.ts +1 -2
- package/dist/core/dist/generated/stylePropsTwMap.d.ts +1 -2
- package/dist/core/dist/getComponentStyles.d.ts +1 -2
- package/dist/core/dist/getStyles.d.ts +1 -2
- package/dist/core/dist/modifier-mappings.d.ts +1 -2
- package/dist/core/dist/resolveMotionState.d.ts +1 -2
- package/dist/core/dist/style-prop-data.d.ts +1 -2
- package/dist/core/dist/transformPreset.d.ts +1 -2
- package/dist/core/dist/withDefaultStyleProps.d.ts +1 -2
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
|
@@ -3,6 +3,7 @@ import { ComponentConfigValue, HtmlTag, LayerInput, PropBinding } from "./compon
|
|
|
3
3
|
import { ComponentPropsWithoutRef, HTMLAttributes, JSX } from "react";
|
|
4
4
|
|
|
5
5
|
//#region ../config/dist/Props.d.ts
|
|
6
|
+
//#region src/Props.d.ts
|
|
6
7
|
/**
|
|
7
8
|
* Resolve the native HTML-attribute surface for the config's root tag.
|
|
8
9
|
*
|
|
@@ -65,5 +66,9 @@ interface DataAttrs {
|
|
|
65
66
|
type Props<TConfig extends ComponentConfigValue<Record<string, LayerInput>, Record<string, PropBinding>, HtmlTag | undefined>> = TConfig extends ComponentConfigValue<Record<string, LayerInput>, infer TProps extends Record<string, PropBinding>, infer TTag extends HtmlTag | undefined> ? Prettify<PropsFromConfig<TProps> & Omit<ElementProps<TTag>, keyof TProps> & DataAttrs & {
|
|
66
67
|
as?: string;
|
|
67
68
|
}> : never;
|
|
69
|
+
/**
|
|
70
|
+
* `Props<typeof boxConfig>` for the common 'use the config's inferred
|
|
71
|
+
* type' invocation. Keeps `box.tsx` from having to repeat the generic.
|
|
72
|
+
*/
|
|
68
73
|
//#endregion
|
|
69
74
|
export { Props };
|
|
@@ -2,6 +2,7 @@ import { ComponentRef, CompositeRef, RegisteredComponents, StylePropRef } from "
|
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
3
|
|
|
4
4
|
//#region ../config/dist/component-config.d.ts
|
|
5
|
+
//#region src/component-config.d.ts
|
|
5
6
|
/**
|
|
6
7
|
* HTML tag literal. The TypeScript type is `string` (any tag name);
|
|
7
8
|
* runtime renders it via `React.createElement(tag, ...)`.
|
|
@@ -158,6 +159,14 @@ type PrimitivePropBinding = StylePropShorthand | VerbosePropBinding;
|
|
|
158
159
|
* tighter `VerbosePropBinding`.
|
|
159
160
|
*/
|
|
160
161
|
type PropBinding = PrimitivePropBinding;
|
|
162
|
+
/**
|
|
163
|
+
* Marker for a boolean JSX prop. Use inside the `props` block:
|
|
164
|
+
*
|
|
165
|
+
* props: {
|
|
166
|
+
* loading: bool(),
|
|
167
|
+
* disabled: bool(),
|
|
168
|
+
* }
|
|
169
|
+
*/
|
|
161
170
|
/**
|
|
162
171
|
* Branded shape returned by `defineComponent({...})`. Carries `layers`,
|
|
163
172
|
* `props`, AND a phantom `__tag` slot as const-narrowed types so
|
|
@@ -183,5 +192,10 @@ interface ComponentConfigValue<TLayers extends Record<string, LayerInput>, TProp
|
|
|
183
192
|
readonly props?: TProps;
|
|
184
193
|
readonly defaultProps?: Record<string, unknown>;
|
|
185
194
|
}
|
|
195
|
+
/**
|
|
196
|
+
* The bundle passed to the render function for each layer — a ready-to-
|
|
197
|
+
* spread object with `className` and any forwarded attrs. The render
|
|
198
|
+
* function destructures `props.<layerName>` into the JSX position.
|
|
199
|
+
*/
|
|
186
200
|
//#endregion
|
|
187
201
|
export { BoolMarker, ComponentConfigValue, ComposedLayer, CompositeBinding, EnumMarker, HtmlTag, LayerInput, PrimitiveLayer, PrimitivePropBinding, PropBinding, RootTag, SingleLayerCompositeBinding, StylePropBinding, StylePropShorthand, SurfaceForward, VerbosePropBinding };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
//#region ../config/dist/component-refs.d.ts
|
|
2
|
+
//#region src/component-refs.d.ts
|
|
2
3
|
/**
|
|
3
4
|
* Augmentable registries + template-literal ref types for the
|
|
4
5
|
* component-API surface.
|
|
@@ -63,6 +64,14 @@ interface RegisteredStyleProps {}
|
|
|
63
64
|
* call.
|
|
64
65
|
*/
|
|
65
66
|
interface RegisteredComposites {}
|
|
67
|
+
/**
|
|
68
|
+
* Registered motion-preset names. Each key is the preset identifier
|
|
69
|
+
* (`'{fadeIn}'`); value is `void`.
|
|
70
|
+
*
|
|
71
|
+
* Populated by codegen from `uds.config.ts`'s `.defineMotion({...})`
|
|
72
|
+
* (motion has no separate `.registerMotion` step today; the entries
|
|
73
|
+
* come directly from `defineMotion` keys).
|
|
74
|
+
*/
|
|
66
75
|
/**
|
|
67
76
|
* Brace-wrapped reference to a registered React component. Falls open
|
|
68
77
|
* to `'{${string}}'` when the registry is unaugmented (e.g. inside
|
|
@@ -81,5 +90,9 @@ type StylePropRef = [keyof RegisteredStyleProps] extends [never] ? `{${string}}`
|
|
|
81
90
|
* when unaugmented.
|
|
82
91
|
*/
|
|
83
92
|
type CompositeRef = [keyof RegisteredComposites] extends [never] ? `{${string}}` : `{${Extract<keyof RegisteredComposites, string>}}`;
|
|
93
|
+
/**
|
|
94
|
+
* Brace-wrapped reference to a registered motion preset. Falls open
|
|
95
|
+
* when unaugmented.
|
|
96
|
+
*/
|
|
84
97
|
//#endregion
|
|
85
98
|
export { ComponentRef, CompositeRef, RegisteredComponents, RegisteredComposites, RegisteredStyleProps, StylePropRef };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export { };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
//#region ../config/dist/consts/defaultColors.d.ts
|
|
2
|
+
//#region src/consts/defaultColors.d.ts
|
|
2
3
|
declare const defaultColors: {
|
|
3
4
|
inherit: string;
|
|
4
5
|
current: string;
|
|
@@ -247,6 +248,6 @@ declare const defaultColors: {
|
|
|
247
248
|
'rose-800': string;
|
|
248
249
|
'rose-900': string;
|
|
249
250
|
'rose-950': string;
|
|
250
|
-
};
|
|
251
|
+
}; //#endregion
|
|
251
252
|
//#endregion
|
|
252
253
|
export { defaultColors };
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { ComponentConfigValue } from "./component-config.js";
|
|
2
2
|
import { BoundComponent } from "./defineComponent.js";
|
|
3
3
|
import { AnyStyleProp } from "./defineStyleProp.js";
|
|
4
|
-
import { ResolvedStyleProp } from "./resolveStyleProp.js";
|
|
5
4
|
import { TokenType, VarsConfig } from "./types.js";
|
|
5
|
+
import { ResolvedStyleProp } from "./resolveStyleProp.js";
|
|
6
6
|
import { BaseModifierProp, ComponentsConfig, CompositeStylesConfig, ConfigurableProp, ModifierProp, MotionPreset, RemotionComponentDef, RemotionConfig, RemotionTransitionDef } from "@uds/types";
|
|
7
7
|
|
|
8
8
|
//#region ../config/dist/createConfig.d.ts
|
|
9
|
+
//#region src/createConfig.d.ts
|
|
9
10
|
type MotionPresetsDef = Record<string, MotionPreset>;
|
|
10
11
|
type MotionAliasValue<TMotion> = TMotion extends Record<string, infer V> ? Extract<V, string> : never;
|
|
11
12
|
type EmptyMotion = {};
|
|
@@ -78,6 +79,12 @@ type GetModifierFromInput<I extends ModesInput> = { [SetKey in keyof I]: { [OptK
|
|
|
78
79
|
} ? M extends ModifierNameShape ? M : never : OptKey extends string ? `_${OptKey}` : never }[keyof I[SetKey]['options']] }[keyof I];
|
|
79
80
|
/** Reject any input whose derived/explicit modifiers collide with reserved names. */
|
|
80
81
|
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;
|
|
82
|
+
/**
|
|
83
|
+
* Convert the authored object-keyed input into the internal `ModeGroup[]` shape.
|
|
84
|
+
* Derives `_${optionKey}` modifiers when no explicit `modifier` is provided.
|
|
85
|
+
* Never sets `default: true` — the new API has no concept of a default option;
|
|
86
|
+
* downstream consumers treat "no option active" as the implicit default.
|
|
87
|
+
*/
|
|
81
88
|
interface ModifierDef {
|
|
82
89
|
modifier: ModifierNameShape;
|
|
83
90
|
selector: string;
|
|
@@ -157,6 +164,7 @@ type VarsToTokens<TVars extends VarsConfig> = { [K in keyof TVars]: { [T in Excl
|
|
|
157
164
|
type MergeTokens<A, B> = { [K in keyof A | keyof B]: K extends keyof B ? K extends keyof A ? A[K] & B[K] : B[K] : K extends keyof A ? A[K] : never };
|
|
158
165
|
/** Build a structured token reference object from atomic tokens */
|
|
159
166
|
declare function buildTokenReference(atomic: AtomicToken<ModifierNameShape>[], configPrefix: string): Record<string, Record<string, string>>;
|
|
167
|
+
/** Build a structured composite-styles reference object for use in defineModifiers context */
|
|
160
168
|
/** Global styles definition — CSS selector → style props */
|
|
161
169
|
type GlobalStylesDef = Record<string, Record<string, any>>;
|
|
162
170
|
/** CSS properties for the example wrapper element */
|
|
@@ -349,6 +357,10 @@ interface UdsConfig<TModifier extends ModifierNameShape = ModifierProp, TTokens
|
|
|
349
357
|
type AnyUdsConfig = UdsConfig<ModifierNameShape, any, any, any, any, any, any>;
|
|
350
358
|
/** Extract the raw config data from a builder instance */
|
|
351
359
|
declare function resolveConfig(config: AnyUdsConfig): UdsConfigData;
|
|
360
|
+
/**
|
|
361
|
+
* Resolve configuration with all token references replaced by their raw values.
|
|
362
|
+
* Useful for tools that need the actual values (e.g. anatomy generation).
|
|
363
|
+
*/
|
|
352
364
|
declare function createConfigBuilder<TModifier extends ModifierNameShape = ModifierProp, TTokens = EmptyTokens, TMotion = EmptyMotion, TExt extends Record<string, any> = {}, TCompositeStyles = EmptyCompositeStyles, TModeModifiers extends ModifierNameShape = never, TVars extends VarsConfig = EmptyVars>(data: UdsConfigData, extensions?: TExt): UdsConfig<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars> & TExt;
|
|
353
365
|
interface InterpolateMarker {
|
|
354
366
|
__type: 'interpolate';
|
|
@@ -4,9 +4,9 @@ import "../../utils/dist/index.js";
|
|
|
4
4
|
import { getConfigurablePropMapping } from "../../core/dist/configurable-prop-helpers.js";
|
|
5
5
|
import "../../core/dist/index.js";
|
|
6
6
|
import { buildMotionReference, resolveComponentMotionAliases, validateComponentVariants } from "./component-resolution.js";
|
|
7
|
-
import { applyPresetToData, deepMerge, mergeAtomic } from "./preset-merge.js";
|
|
8
7
|
import { resolveTokenType, sniffTokenTypeFromValue } from "./resolveTokenTypes.js";
|
|
9
8
|
import { resolveStyleProp } from "./resolveStyleProp.js";
|
|
9
|
+
import { applyPresetToData, deepMerge, mergeAtomic } from "./preset-merge.js";
|
|
10
10
|
//#region ../config/dist/createConfig.js
|
|
11
11
|
/** biome-ignore-all lint/suspicious/noExplicitAny: necessary for dynamic builder to work correctly */
|
|
12
12
|
/**
|
|
@@ -3,6 +3,7 @@ import { Props } from "./Props.js";
|
|
|
3
3
|
import { ReactNode } from "react";
|
|
4
4
|
|
|
5
5
|
//#region ../config/dist/defineComponent.d.ts
|
|
6
|
+
//#region src/defineComponent.d.ts
|
|
6
7
|
/**
|
|
7
8
|
* A React component bound to a `defineComponent` config, with the
|
|
8
9
|
* source config attached as a phantom type slot. Tools (codegen,
|
|
@@ -13,5 +14,11 @@ import { ReactNode } from "react";
|
|
|
13
14
|
type BoundComponent<TConfig extends ComponentConfigValue<Record<string, LayerInput>, any, HtmlTag | undefined>, TExtra extends Record<string, unknown> = {}> = React.FC<Props<TConfig> & TExtra> & {
|
|
14
15
|
readonly __config: TConfig;
|
|
15
16
|
};
|
|
17
|
+
/**
|
|
18
|
+
* A `defineComponent({...})` config value with a `.render(fn)` builder
|
|
19
|
+
* method bolted on. The builder is non-enumerable so JSON serialization
|
|
20
|
+
* still produces pure data — codegen can read `__kind`, `layers`,
|
|
21
|
+
* `props`, and `defaultProps` without seeing the render hook.
|
|
22
|
+
*/
|
|
16
23
|
//#endregion
|
|
17
24
|
export { BoundComponent };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CssValueTypeName } from "./types/css-values.js";
|
|
2
2
|
|
|
3
3
|
//#region ../config/dist/defineStyleProp.d.ts
|
|
4
4
|
/** Runtime input type for `toCss` based on the entry's `type`. */
|
|
@@ -22,10 +22,20 @@ type ArbitraryEntry = { [T in CssValueTypeName]: {
|
|
|
22
22
|
* - An array of {@link ArbitraryEntry} for multi-shape acceptance.
|
|
23
23
|
*/
|
|
24
24
|
type ArbitrarySpec = CssValueTypeName | readonly ArbitraryEntry[];
|
|
25
|
+
/**
|
|
26
|
+
* The literal-keyword subset of values a property accepts, derived from
|
|
27
|
+
* {@link CssPropertyValues}[P]. For custom CSS properties (`--*`) the value
|
|
28
|
+
* type is governed by the required `cssType` field instead, so any string
|
|
29
|
+
* is accepted at the type level.
|
|
30
|
+
*/
|
|
25
31
|
type StylePropMetadata = {
|
|
26
32
|
label?: string;
|
|
27
33
|
description?: string;
|
|
28
34
|
};
|
|
35
|
+
/**
|
|
36
|
+
* A finalized style prop. Returned by `defineStyleProp(spec).metadata(meta)`.
|
|
37
|
+
* Consumers wrap these in `uds.registerStyleProps({ <propName>: ... })`.
|
|
38
|
+
*/
|
|
29
39
|
/**
|
|
30
40
|
* Structurally-loose form of {@link StyleProp}. Any concrete `StyleProp<P>`
|
|
31
41
|
* is assignable to this. Used at registration / resolution boundaries where
|
|
@@ -41,5 +51,14 @@ interface AnyStyleProp {
|
|
|
41
51
|
readonly cssType?: CssValueTypeName;
|
|
42
52
|
readonly metadata: StylePropMetadata;
|
|
43
53
|
}
|
|
54
|
+
/**
|
|
55
|
+
* Return shape of {@link defineStyleProp}. The `metadata` field doubles as
|
|
56
|
+
* a callable chain: read it to access `{ label?, description? }` (both
|
|
57
|
+
* optional, so an unset metadata reads `undefined` for either field) or
|
|
58
|
+
* call it as `.metadata({ label, description })` to attach metadata and
|
|
59
|
+
* get back a plain {@link StyleProp}. A function satisfies the
|
|
60
|
+
* {@link StylePropMetadata} structural shape because both fields are
|
|
61
|
+
* optional, so the dual nature is type-safe.
|
|
62
|
+
*/
|
|
44
63
|
//#endregion
|
|
45
64
|
export { AnyStyleProp, ArbitraryEntry, ArbitrarySpec, StylePropMetadata };
|
|
@@ -1,25 +1,39 @@
|
|
|
1
1
|
//#region ../config/dist/defineStyleProp.js
|
|
2
2
|
const CUSTOM_PROPERTY_PREFIX = "--";
|
|
3
3
|
/**
|
|
4
|
-
* Author a style prop. Returns a
|
|
5
|
-
* the {
|
|
4
|
+
* Author a style prop. Returns a {@link StyleProp} directly so callers can
|
|
5
|
+
* skip the `.metadata({...})` chain when there's nothing to attach:
|
|
6
|
+
*
|
|
7
|
+
* ```ts
|
|
8
|
+
* defineStyleProp({ cssProperty: 'flex-direction', classPrefix: 'flex', values: ['row', 'col'] })
|
|
9
|
+
* ```
|
|
10
|
+
*
|
|
11
|
+
* The returned object still supports `.metadata({...})` for the common
|
|
12
|
+
* case where you want to attach a label/description — the chain returns a
|
|
13
|
+
* plain {@link StyleProp} with the metadata baked in. Pure — no global
|
|
14
|
+
* registration.
|
|
6
15
|
*/
|
|
7
16
|
function defineStyleProp(spec) {
|
|
8
17
|
const { cssProperty, classPrefix, values, arbitrary, cssType } = spec;
|
|
9
18
|
const isCustomProperty = cssProperty.startsWith(CUSTOM_PROPERTY_PREFIX);
|
|
10
19
|
if (isCustomProperty && cssType === void 0) throw new Error(`defineStyleProp: cssType is required for custom CSS properties (got cssProperty=${JSON.stringify(cssProperty)}).`);
|
|
11
20
|
if (!isCustomProperty && cssType !== void 0) throw new Error(`defineStyleProp: cssType is only allowed for custom CSS properties (--*). Got cssProperty=${JSON.stringify(cssProperty)} with cssType=${JSON.stringify(cssType)}.`);
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
const baseFields = {
|
|
22
|
+
kind: "styleProp",
|
|
23
|
+
cssProperty,
|
|
24
|
+
classPrefix,
|
|
25
|
+
values: values ?? [],
|
|
26
|
+
arbitrary,
|
|
27
|
+
cssType
|
|
28
|
+
};
|
|
29
|
+
const metadata = (meta = {}) => ({
|
|
30
|
+
...baseFields,
|
|
31
|
+
metadata: meta
|
|
32
|
+
});
|
|
33
|
+
return {
|
|
34
|
+
...baseFields,
|
|
35
|
+
metadata
|
|
36
|
+
};
|
|
23
37
|
}
|
|
24
38
|
//#endregion
|
|
25
39
|
export { defineStyleProp };
|
|
@@ -4,9 +4,9 @@ import { Props } from "./Props.js";
|
|
|
4
4
|
import { BoundComponent } from "./defineComponent.js";
|
|
5
5
|
import { ColorFn, ColorKeyword, CssAngle, CssColor, CssLength, CssPercentage, CssRatio, CssTime, CssValue, CssValueTypeName, HexColor, HslColor, RgbColor } from "./types/css-values.js";
|
|
6
6
|
import { AnyStyleProp, ArbitraryEntry, ArbitrarySpec, StylePropMetadata } from "./defineStyleProp.js";
|
|
7
|
-
import { ResolvedStyleProp, ResolvedToken } from "./resolveStyleProp.js";
|
|
8
7
|
import { TokenType, VarGroupDef, VarTokenDef, VarsConfig } from "./types.js";
|
|
9
8
|
import { AtomicToken, BuildOptions, CheckForReservedModifiersInput, ComponentConfig, DefineComponentInput, DefineComponentMotionInput, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GetModifierFromInput, GlobalStylesDef, InterpolateMarker, ModeGroup, ModeOption, ModeOptionInput, ModeSetInput, ModesInput, ModifierDef, MotionPresetsDef, SingleComponentDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig } from "./createConfig.js";
|
|
9
|
+
import { ResolvedStyleProp, ResolvedToken } from "./resolveStyleProp.js";
|
|
10
10
|
import { defaultColors } from "./consts/defaultColors.js";
|
|
11
11
|
import { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig } from "./serialize.js";
|
|
12
12
|
import { ComponentsConfig as ComponentsConfig$1 } from "@uds/types";
|
|
@@ -2,11 +2,11 @@ import "./component-resolution.js";
|
|
|
2
2
|
import "./consts/defaultColors.js";
|
|
3
3
|
import "./createComponent.js";
|
|
4
4
|
import "./propertyAcceptedTypes.js";
|
|
5
|
+
import "./refs.js";
|
|
5
6
|
import "./resolveTokenTypes.js";
|
|
6
7
|
import "./resolveStyleProp.js";
|
|
7
8
|
import "./createConfig.js";
|
|
8
9
|
import "./defineComponent.js";
|
|
9
10
|
import "./defineStyleProp.js";
|
|
10
11
|
import "./propertyGroups.js";
|
|
11
|
-
import "./refs.js";
|
|
12
12
|
import "./serialize.js";
|
package/dist/config/dist/refs.js
CHANGED
|
@@ -1 +1,66 @@
|
|
|
1
|
+
import { kebabCase } from "../../utils/dist/string-utils/kebabCase.js";
|
|
2
|
+
import { safeTokenName } from "../../utils/dist/string-utils/cssVar.js";
|
|
1
3
|
import "../../utils/dist/index.js";
|
|
4
|
+
//#region ../config/dist/refs.js
|
|
5
|
+
/**
|
|
6
|
+
* Token references — `'{namespace/key}'` braces in token values.
|
|
7
|
+
*
|
|
8
|
+
* Authors can point one token at another via a brace-wrapped path:
|
|
9
|
+
*
|
|
10
|
+
* defineVars({
|
|
11
|
+
* spectrum: { 'blue/500': { value: '#1167f4' } },
|
|
12
|
+
* color: { brand: { value: '{spectrum/blue/500}' } },
|
|
13
|
+
* })
|
|
14
|
+
*
|
|
15
|
+
* At CSS-declaration time this expands to a CSS variable alias:
|
|
16
|
+
*
|
|
17
|
+
* --uds-spectrum-blue-500: #1167f4;
|
|
18
|
+
* --uds-color-brand: var(--uds-spectrum-blue-500);
|
|
19
|
+
*
|
|
20
|
+
* Refs are a purely syntactic transform — no graph walk, no cycle
|
|
21
|
+
* detection. CSS handles aliasing (and any cascade cycles) at runtime.
|
|
22
|
+
* Refs that don't match a declared token resolve to a `var(...)` that
|
|
23
|
+
* has no `:root` declaration; the browser falls back to the property's
|
|
24
|
+
* initial value.
|
|
25
|
+
*
|
|
26
|
+
* Consumption is unchanged: `tokens.color.brand` in component configs
|
|
27
|
+
* still resolves to `var(--uds-color-brand)`, regardless of whether the
|
|
28
|
+
* brand value itself is a literal or a ref.
|
|
29
|
+
*/
|
|
30
|
+
const REF_PATTERN = /^\{([^/{}]+)\/([^{}]+)\}$/;
|
|
31
|
+
/**
|
|
32
|
+
* Parse a value as a token ref. Returns `null` when the value isn't a
|
|
33
|
+
* brace-wrapped ref of the form `{namespace/name}`. The `name` portion
|
|
34
|
+
* may contain additional slashes — only the first slash is treated as
|
|
35
|
+
* the namespace separator.
|
|
36
|
+
*/
|
|
37
|
+
function parseTokenRef(value) {
|
|
38
|
+
const match = REF_PATTERN.exec(value);
|
|
39
|
+
if (!match) return null;
|
|
40
|
+
const namespace = match[1];
|
|
41
|
+
const name = match[2];
|
|
42
|
+
if (!namespace || !name) return null;
|
|
43
|
+
return {
|
|
44
|
+
namespace,
|
|
45
|
+
name
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Resolve a token value to its CSS form. If `value` is a token ref, returns
|
|
50
|
+
* the corresponding `var(--<prefix>-<namespace>-<name>)` string. Otherwise
|
|
51
|
+
* returns the value unchanged.
|
|
52
|
+
*
|
|
53
|
+
* The CSS variable name is built the same way `defineVars` builds its `:root`
|
|
54
|
+
* declarations: `kebabCase` on the namespace, `safeTokenName` on the token
|
|
55
|
+
* name. So `{spectrum/blue/500}` resolves to `var(--uds-spectrum-blue-500)`
|
|
56
|
+
* (matching the namespace's own emitted variable name).
|
|
57
|
+
*/
|
|
58
|
+
function resolveTokenRef(value, configPrefix) {
|
|
59
|
+
const ref = parseTokenRef(value);
|
|
60
|
+
if (!ref) return value;
|
|
61
|
+
const cssPrefix = kebabCase(ref.namespace);
|
|
62
|
+
const cssName = safeTokenName(ref.name);
|
|
63
|
+
return `var(${configPrefix ? `--${configPrefix}-${cssPrefix}-${cssName}` : `--${cssPrefix}-${cssName}`})`;
|
|
64
|
+
}
|
|
65
|
+
//#endregion
|
|
66
|
+
export { parseTokenRef, resolveTokenRef };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CssValueTypeName } from "./types/css-values.js";
|
|
2
2
|
import { ArbitrarySpec, StylePropMetadata } from "./defineStyleProp.js";
|
|
3
3
|
//#region ../config/dist/resolveStyleProp.d.ts
|
|
4
|
+
//#region src/resolveStyleProp.d.ts
|
|
4
5
|
interface ResolvedToken {
|
|
5
6
|
/** The token's raw key, e.g. `'brand'`. */
|
|
6
7
|
readonly name: string;
|
|
@@ -58,5 +59,11 @@ interface ResolvedStyleProp {
|
|
|
58
59
|
readonly arbitrary: ArbitrarySpec | undefined;
|
|
59
60
|
readonly metadata: StylePropMetadata;
|
|
60
61
|
}
|
|
62
|
+
/**
|
|
63
|
+
* Structurally-loose input shape for the resolver. Any `StyleProp<P>` from
|
|
64
|
+
* `defineStyleProp` is assignable to this. Defined locally so the
|
|
65
|
+
* resolver's signature doesn't expand `ValuesEntry<P>` over the full CSS
|
|
66
|
+
* property union (TS2590).
|
|
67
|
+
*/
|
|
61
68
|
//#endregion
|
|
62
69
|
export { ResolvedStyleProp, ResolvedToken };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { safeTokenName } from "../../utils/dist/string-utils/cssVar.js";
|
|
2
2
|
import "../../utils/dist/index.js";
|
|
3
3
|
import { isTokenAcceptedByProperty } from "./propertyAcceptedTypes.js";
|
|
4
|
+
import { resolveTokenRef } from "./refs.js";
|
|
4
5
|
import { sniffTokenTypeFromValue } from "./resolveTokenTypes.js";
|
|
5
6
|
//#region ../config/dist/resolveStyleProp.js
|
|
6
7
|
/**
|
|
@@ -194,18 +195,8 @@ function resolveStyleProp(propName, styleProp, config) {
|
|
|
194
195
|
const aliasKey = aliasEntry.alias;
|
|
195
196
|
const aliasMapKey = typeof aliasKey === "string" ? aliasKey : String(aliasKey);
|
|
196
197
|
let resolvedValue;
|
|
197
|
-
if (typeof aliasEntry.value === "string")
|
|
198
|
-
|
|
199
|
-
const parsedRef = parseGroupRef(aliasEntry.value);
|
|
200
|
-
if (parsedRef?.key) {
|
|
201
|
-
const group = findGroup(config.atomic, parsedRef.group);
|
|
202
|
-
const token = group?.tokens.find((t) => t.name === parsedRef.key);
|
|
203
|
-
if (group && token) {
|
|
204
|
-
const safeName = safeTokenName(token.name);
|
|
205
|
-
resolvedValue = `var(${buildCssVar(configPrefix, group.cssPrefix ?? group.namespace ?? parsedRef.group, safeName)})`;
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
} else resolvedValue = aliasEntry.value;
|
|
198
|
+
if (typeof aliasEntry.value === "string") resolvedValue = resolveTokenRef(aliasEntry.value, configPrefix);
|
|
199
|
+
else resolvedValue = aliasEntry.value;
|
|
209
200
|
if (!literals.includes(aliasKey)) literals.push(aliasKey);
|
|
210
201
|
literalAliases[aliasMapKey] = resolvedValue;
|
|
211
202
|
}
|
|
@@ -3,6 +3,7 @@ import { AtomicToken, ExampleDef, ModeGroup, ModifierDef, MotionPresetsDef, UdsC
|
|
|
3
3
|
import { CompositeStylesConfig } from "@uds/types";
|
|
4
4
|
|
|
5
5
|
//#region ../config/dist/serialize.d.ts
|
|
6
|
+
//#region src/serialize.d.ts
|
|
6
7
|
type ModifierNameShape = `_${string}`;
|
|
7
8
|
type TokenRef = {
|
|
8
9
|
$ref: string;
|
|
@@ -67,6 +68,6 @@ declare function serializeConfig(config: UdsConfig): SerializedConfig;
|
|
|
67
68
|
* Resolves `$ref` markers back to `var()` strings using the atomic token
|
|
68
69
|
* definitions, then reconstructs the builder chain.
|
|
69
70
|
*/
|
|
70
|
-
declare function deserializeConfig(data: SerializedConfig): UdsConfig;
|
|
71
|
+
declare function deserializeConfig(data: SerializedConfig): UdsConfig; //#endregion
|
|
71
72
|
//#endregion
|
|
72
73
|
export { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
//#region ../config/dist/types/css-values.d.ts
|
|
2
|
+
//#region src/types/css-values.d.ts
|
|
2
3
|
/**
|
|
3
4
|
* CSS value-type primitives — building blocks used by {@link CssPropertyValues}
|
|
4
5
|
* in `./css-properties` and by `defineStyleProp` to constrain authored values.
|
|
@@ -55,6 +56,6 @@ type CssValue = {
|
|
|
55
56
|
ident: string;
|
|
56
57
|
string: string;
|
|
57
58
|
};
|
|
58
|
-
type CssValueTypeName = keyof CssValue;
|
|
59
|
+
type CssValueTypeName = keyof CssValue; //#endregion
|
|
59
60
|
//#endregion
|
|
60
61
|
export { ColorFn, ColorKeyword, CssAngle, CssColor, CssLength, CssPercentage, CssRatio, CssTime, CssValue, CssValueTypeName, HexColor, HslColor, RgbColor };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
//#region ../config/dist/types.d.ts
|
|
2
|
+
//#region src/types.d.ts
|
|
2
3
|
/**
|
|
3
4
|
* Scalar DTCG-aligned token types. Composite types (shadow, gradient,
|
|
4
5
|
* typography, border, transition, cubicBezier) are intentionally deferred
|
|
@@ -59,6 +60,6 @@ type VarGroupDef<M extends `_${string}` = `_${string}`> = {
|
|
|
59
60
|
* spacing: { $type: 'dimension', 1: { value: '0.25rem' }, 2: { value: '0.5rem' } },
|
|
60
61
|
* }
|
|
61
62
|
*/
|
|
62
|
-
type VarsConfig<M extends `_${string}` = `_${string}`> = Record<string, VarGroupDef<M>>;
|
|
63
|
+
type VarsConfig<M extends `_${string}` = `_${string}`> = Record<string, VarGroupDef<M>>; //#endregion
|
|
63
64
|
//#endregion
|
|
64
65
|
export { TokenType, VarGroupDef, VarTokenDef, VarsConfig };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
//#region ../core/dist/color-opacity-map.d.ts
|
|
2
|
-
//#region src/color-opacity-map.d.ts
|
|
3
2
|
/**
|
|
4
3
|
* Maps each color prop name to its corresponding opacity prop name.
|
|
5
4
|
* Used by the runtime (`getStyles`) and loader (`style-transform`) to merge
|
|
@@ -8,6 +7,6 @@
|
|
|
8
7
|
* @example
|
|
9
8
|
* `bg="primary"` + `bgOpacity="75"` → class `bg-primary_75`
|
|
10
9
|
*/
|
|
11
|
-
declare const colorPropToOpacityProp: Record<string, string>;
|
|
10
|
+
declare const colorPropToOpacityProp: Record<string, string>;
|
|
12
11
|
//#endregion
|
|
13
12
|
export { colorPropToOpacityProp };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { CompositeStylesConfig } from "@uds/types";
|
|
2
2
|
|
|
3
3
|
//#region ../core/dist/compositeStyles.d.ts
|
|
4
|
-
//#region src/compositeStyles.d.ts
|
|
5
4
|
/** Set the composite-styles config (called by loader at build time) */
|
|
6
5
|
declare function setCompositeStylesConfig(config: CompositeStylesConfig): void;
|
|
7
6
|
/** Get the current composite-styles config */
|
|
@@ -17,6 +16,6 @@ declare function getCompositeStylesConfig(): CompositeStylesConfig;
|
|
|
17
16
|
declare function expandCompositeStyles(props: Record<string, unknown>, config?: CompositeStylesConfig): {
|
|
18
17
|
expanded: Record<string, unknown>;
|
|
19
18
|
markerClasses: string[];
|
|
20
|
-
};
|
|
19
|
+
};
|
|
21
20
|
//#endregion
|
|
22
21
|
export { expandCompositeStyles, getCompositeStylesConfig, setCompositeStylesConfig };
|
|
@@ -2,7 +2,6 @@ import { PropMapping } from "./style-prop-data.js";
|
|
|
2
2
|
import { ConfigurableProp } from "@uds/types";
|
|
3
3
|
|
|
4
4
|
//#region ../core/dist/configurable-prop-helpers.d.ts
|
|
5
|
-
//#region src/configurable-prop-helpers.d.ts
|
|
6
5
|
/** Look up a {@link PropMapping} by ConfigurableProp name. */
|
|
7
6
|
declare function getConfigurablePropMapping(prop: ConfigurableProp): PropMapping | undefined;
|
|
8
7
|
interface ConfigurablePropertyEntry {
|
|
@@ -27,6 +26,6 @@ interface CssVariablePrefixEntry {
|
|
|
27
26
|
* Only includes props that have both `cssProperty` and `defaultVarPrefix`.
|
|
28
27
|
* Deduplicates by `defaultVarPrefix` so each namespace appears once.
|
|
29
28
|
*/
|
|
30
|
-
declare function getCssVariablePrefixes(): CssVariablePrefixEntry[];
|
|
29
|
+
declare function getCssVariablePrefixes(): CssVariablePrefixEntry[];
|
|
31
30
|
//#endregion
|
|
32
31
|
export { ConfigurablePropertyEntry, CssVariablePrefixEntry, getConfigurablePropMapping, getConfigurableProperties, getCssVariablePrefixes };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { CreateComponentConfig, CreateComponentProps, CreateComponentRenderFn, CreateComponentSlotTagConfig, CreateComponentTypeInput } from "@uds/types";
|
|
2
2
|
|
|
3
3
|
//#region ../core/dist/createComponent.d.ts
|
|
4
|
-
//#region src/createComponent.d.ts
|
|
5
4
|
type PrimitiveTag = keyof React.JSX.IntrinsicElements;
|
|
6
5
|
type SpecConfig<TSpec> = TSpec extends {
|
|
7
6
|
config: infer TConfig extends CreateComponentTypeInput;
|
|
@@ -52,6 +51,6 @@ declare function createComponent<TSpecOrProps = {}>(tag: PrimitiveTag): React.FC
|
|
|
52
51
|
props: infer TOwnProps;
|
|
53
52
|
} ? CreateComponentProps<TConfig, TOwnProps, PrimitiveTag> : PrimitiveOwnProps<TSpecOrProps>>;
|
|
54
53
|
declare function createComponent<TSpec>(renderFn: CreateComponentRenderFn<SpecConfig<TSpec>, SpecOwnProps<TSpec>, SpecSlotConfig<TSpec>>): React.FC<CreateComponentProps<SpecConfig<TSpec>, SpecOwnProps<TSpec>, SpecSlotConfig<TSpec>>>;
|
|
55
|
-
declare function createComponent(config: CreateComponentConfig<string>, renderFn: CreateComponentRenderFn<any, any, any>): React.FC<any>;
|
|
54
|
+
declare function createComponent(config: CreateComponentConfig<string>, renderFn: CreateComponentRenderFn<any, any, any>): React.FC<any>;
|
|
56
55
|
//#endregion
|
|
57
56
|
export { createComponent };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { ComponentProps, ComponentType } from "react";
|
|
2
2
|
|
|
3
3
|
//#region ../core/dist/createComponentExample.d.ts
|
|
4
|
-
//#region src/createComponentExample.d.ts
|
|
5
4
|
/**
|
|
6
5
|
* Extracts variant fixtures from a Component's props type.
|
|
7
6
|
* If Button has `variant?: 'brand' | 'outline'` and `size?: 'sm' | 'md'`,
|
|
@@ -37,6 +36,6 @@ type ExamplesResult<TComponent extends ComponentType<any>> = {
|
|
|
37
36
|
* }));
|
|
38
37
|
* ```
|
|
39
38
|
*/
|
|
40
|
-
declare function createComponentExample<TComponent extends ComponentType<any>, T extends Record<string, ExampleFn<TComponent>>>(Component: TComponent, examplesFn: (fixtures: VariantFixtures<TComponent>) => ExamplesResult<TComponent>): ComponentExample<T>;
|
|
39
|
+
declare function createComponentExample<TComponent extends ComponentType<any>, T extends Record<string, ExampleFn<TComponent>>>(Component: TComponent, examplesFn: (fixtures: VariantFixtures<TComponent>) => ExamplesResult<TComponent>): ComponentExample<T>;
|
|
41
40
|
//#endregion
|
|
42
41
|
export { ComponentExample, createComponentExample };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
//#region ../core/dist/createProvider.d.ts
|
|
2
|
-
//#region src/createProvider.d.ts
|
|
3
2
|
type ProviderRenderFn<TContext, TProps = Record<never, never>> = (props: {
|
|
4
3
|
children: React.ReactNode;
|
|
5
4
|
} & TProps) => {
|
|
@@ -8,6 +7,6 @@ type ProviderRenderFn<TContext, TProps = Record<never, never>> = (props: {
|
|
|
8
7
|
};
|
|
9
8
|
declare function createProvider<TContext, TProps = Record<never, never>>(name: string, renderFn: ProviderRenderFn<TContext, TProps>): [React.FC<{
|
|
10
9
|
children: React.ReactNode;
|
|
11
|
-
} & TProps>, () => TContext];
|
|
10
|
+
} & TProps>, () => TContext];
|
|
12
11
|
//#endregion
|
|
13
12
|
export { createProvider };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
//#region ../core/dist/generated/stylePropsTwMap.d.ts
|
|
2
|
-
//#region src/generated/stylePropsTwMap.d.ts
|
|
3
2
|
declare const stylePropsTwMap: {
|
|
4
3
|
readonly "border-boolean": {
|
|
5
4
|
readonly border: "boolean";
|
|
@@ -1696,6 +1695,6 @@ declare const stylePropsTwMap: {
|
|
|
1696
1695
|
readonly "hyphens-manual": {
|
|
1697
1696
|
readonly hyphens: "manual";
|
|
1698
1697
|
};
|
|
1699
|
-
};
|
|
1698
|
+
};
|
|
1700
1699
|
//#endregion
|
|
1701
1700
|
export { stylePropsTwMap };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { ComponentRegistry, ComponentSlotsOf, ComponentVariantsOf } from "@uds/types";
|
|
2
2
|
|
|
3
3
|
//#region ../core/dist/getComponentStyles.d.ts
|
|
4
|
-
//#region src/getComponentStyles.d.ts
|
|
5
4
|
type ResolveSlots<Name extends string> = Name extends keyof ComponentRegistry ? ComponentSlotsOf<Name> : string;
|
|
6
5
|
type ResolveVariants<Name extends string> = Name extends keyof ComponentRegistry ? ComponentVariantsOf<Name> : Record<string, string>;
|
|
7
6
|
interface UdsRuntimeMeta {
|
|
@@ -45,6 +44,6 @@ interface ComponentStyler<Name extends string> {
|
|
|
45
44
|
* @param slots - Array of slot names
|
|
46
45
|
* @param element - Optional HTML element tag for element-specific prop forwarding
|
|
47
46
|
*/
|
|
48
|
-
declare function createComponentStyler<Name extends string>(componentName: Name, slots: readonly string[], element?: string, variants?: readonly string[]): ComponentStyler<Name>;
|
|
47
|
+
declare function createComponentStyler<Name extends string>(componentName: Name, slots: readonly string[], element?: string, variants?: readonly string[]): ComponentStyler<Name>;
|
|
49
48
|
//#endregion
|
|
50
49
|
export { createComponentStyler };
|
|
@@ -2,7 +2,6 @@ import { ClassValue } from "clsx";
|
|
|
2
2
|
import { ModifierProp, ModifierProps, StyleAndModifierProps, StyleProps } from "@uds/types";
|
|
3
3
|
|
|
4
4
|
//#region ../core/dist/getStyles.d.ts
|
|
5
|
-
//#region src/getStyles.d.ts
|
|
6
5
|
/** Convert kebab-case CSS property to camelCase for React inline styles.
|
|
7
6
|
* CSS custom properties (--*) are kept as-is since React supports them verbatim. */
|
|
8
7
|
declare function toCamelCase(str: string): string;
|
|
@@ -38,6 +37,6 @@ interface GetStylesParams extends StyleProps, ModifierProps {
|
|
|
38
37
|
* so they can be included in the CSS safelist.
|
|
39
38
|
*/
|
|
40
39
|
declare function getStyles(props: GetStylesParams): string;
|
|
41
|
-
declare function getVariantClassName(componentName: string, variant: string | undefined): string;
|
|
40
|
+
declare function getVariantClassName(componentName: string, variant: string | undefined): string;
|
|
42
41
|
//#endregion
|
|
43
42
|
export { createVariants, cx, getStyles, getVariantClassName, processStyleProps, toCamelCase };
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { ModifierProp } from "@uds/types";
|
|
2
2
|
|
|
3
3
|
//#region ../core/dist/modifier-mappings.d.ts
|
|
4
|
-
//#region src/modifier-mappings.d.ts
|
|
5
4
|
declare const modifierMappings: Record<ModifierProp, string>;
|
|
6
5
|
interface ModifierEntry {
|
|
7
6
|
prop: string;
|
|
8
7
|
cssSelector: string;
|
|
9
8
|
category: string;
|
|
10
9
|
description: string;
|
|
11
|
-
}
|
|
10
|
+
}
|
|
12
11
|
//#endregion
|
|
13
12
|
export { ModifierEntry, modifierMappings };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
//#region ../core/dist/resolveMotionState.d.ts
|
|
2
|
-
|
|
3
|
-
declare function resolveMotionState(stateKeyframe: Record<string, unknown>, index: number): Record<string, number>; //#endregion
|
|
2
|
+
declare function resolveMotionState(stateKeyframe: Record<string, unknown>, index: number): Record<string, number>;
|
|
4
3
|
//#endregion
|
|
5
4
|
export { resolveMotionState };
|