@yahoo/uds-v5-wip 1.40.0 → 1.42.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/defineStyleProp.d.ts +1 -1
- package/dist/config/dist/defineStyleProp.js +38 -15
- package/dist/config/dist/index.js +1 -1
- package/dist/config/dist/refs.js +65 -0
- package/dist/config/dist/resolveStyleProp.d.ts +6 -1
- package/dist/config/dist/resolveStyleProp.js +7 -15
- package/dist/config.d.ts +2 -2
- 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/foundational-presets/dist/boldVibrant.d.ts +4 -4
- package/dist/foundational-presets/dist/brutalist.d.ts +4 -4
- package/dist/foundational-presets/dist/candy.d.ts +4 -4
- package/dist/foundational-presets/dist/cleanMinimalist.d.ts +4 -4
- package/dist/foundational-presets/dist/corporate.d.ts +4 -4
- package/dist/foundational-presets/dist/darkMoody.d.ts +4 -4
- package/dist/foundational-presets/dist/defaultPreset.d.ts +2 -2
- package/dist/foundational-presets/dist/forest.d.ts +4 -4
- package/dist/foundational-presets/dist/highContrast.d.ts +4 -4
- package/dist/foundational-presets/dist/lavender.d.ts +4 -4
- package/dist/foundational-presets/dist/luxury.d.ts +4 -4
- package/dist/foundational-presets/dist/monochrome.d.ts +4 -4
- package/dist/foundational-presets/dist/neonCyber.d.ts +4 -4
- package/dist/foundational-presets/dist/newspaper.d.ts +4 -4
- package/dist/foundational-presets/dist/ocean.d.ts +4 -4
- package/dist/foundational-presets/dist/slate.d.ts +4 -4
- package/dist/foundational-presets/dist/style-props.js +4 -4
- package/dist/foundational-presets/dist/sunset.d.ts +4 -4
- package/dist/foundational-presets/dist/terminal.d.ts +4 -4
- package/dist/foundational-presets/dist/warmOrganic.d.ts +4 -4
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
|
@@ -34,7 +34,7 @@ type StylePropMetadata = {
|
|
|
34
34
|
*/
|
|
35
35
|
interface AnyStyleProp {
|
|
36
36
|
readonly kind: 'styleProp';
|
|
37
|
-
readonly cssProperty: string;
|
|
37
|
+
readonly cssProperty: string | readonly string[];
|
|
38
38
|
readonly classPrefix: string;
|
|
39
39
|
readonly values: readonly unknown[];
|
|
40
40
|
readonly arbitrary?: ArbitrarySpec;
|
|
@@ -1,25 +1,48 @@
|
|
|
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
|
-
const { cssProperty, classPrefix, values, arbitrary, cssType } = spec;
|
|
9
|
-
|
|
17
|
+
const { cssProperty: cssPropertyInput, classPrefix, values, arbitrary, cssType } = spec;
|
|
18
|
+
let cssProperty;
|
|
19
|
+
if (Array.isArray(cssPropertyInput)) {
|
|
20
|
+
const deduped = Array.from(new Set(cssPropertyInput));
|
|
21
|
+
if (deduped.length === 0) throw new Error("defineStyleProp: `cssProperty` array must contain at least one CSS property.");
|
|
22
|
+
cssProperty = deduped;
|
|
23
|
+
} else cssProperty = cssPropertyInput;
|
|
24
|
+
const allProperties = Array.isArray(cssProperty) ? cssProperty : [cssProperty];
|
|
25
|
+
const hasCustom = allProperties.some((p) => p.startsWith(CUSTOM_PROPERTY_PREFIX));
|
|
26
|
+
if (allProperties.length > 1 && hasCustom) throw new Error(`defineStyleProp: \`cssProperty\` arrays must be standard CSS properties only; custom (\`--*\`) properties must use the single-string form. Got ${JSON.stringify(cssProperty)}.`);
|
|
27
|
+
const isCustomProperty = hasCustom;
|
|
10
28
|
if (isCustomProperty && cssType === void 0) throw new Error(`defineStyleProp: cssType is required for custom CSS properties (got cssProperty=${JSON.stringify(cssProperty)}).`);
|
|
11
29
|
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
|
-
|
|
30
|
+
const baseFields = {
|
|
31
|
+
kind: "styleProp",
|
|
32
|
+
cssProperty,
|
|
33
|
+
classPrefix,
|
|
34
|
+
values: values ?? [],
|
|
35
|
+
arbitrary,
|
|
36
|
+
cssType
|
|
37
|
+
};
|
|
38
|
+
const metadata = (meta = {}) => ({
|
|
39
|
+
...baseFields,
|
|
40
|
+
metadata: meta
|
|
41
|
+
});
|
|
42
|
+
return {
|
|
43
|
+
...baseFields,
|
|
44
|
+
metadata
|
|
45
|
+
};
|
|
23
46
|
}
|
|
24
47
|
//#endregion
|
|
25
48
|
export { defineStyleProp };
|
|
@@ -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 };
|
|
@@ -44,7 +44,12 @@ interface ResolvedToken {
|
|
|
44
44
|
interface ResolvedStyleProp {
|
|
45
45
|
/** The JSX prop name — the map key from `registerStyleProps({...})`. */
|
|
46
46
|
readonly propName: string;
|
|
47
|
-
|
|
47
|
+
/** The CSS property (or properties) this prop writes — passed through
|
|
48
|
+
* verbatim from the source `defineStyleProp` input. Single string for
|
|
49
|
+
* direct props, array for fan-out props (e.g. `borderRadiusStart` →
|
|
50
|
+
* both start-side corners). Readers normalize at the call site
|
|
51
|
+
* (`Array.isArray(p) ? p : [p]`) when iteration matters. */
|
|
52
|
+
readonly cssProperty: string | readonly string[];
|
|
48
53
|
readonly classPrefix: string;
|
|
49
54
|
readonly tokens: readonly ResolvedToken[];
|
|
50
55
|
readonly literals: readonly (string | number | boolean)[];
|
|
@@ -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
|
/**
|
|
@@ -143,6 +144,7 @@ function resolveGroupTokens(group, cssProperty, configPrefix, namespace) {
|
|
|
143
144
|
*/
|
|
144
145
|
function resolveStyleProp(propName, styleProp, config) {
|
|
145
146
|
const { cssProperty, classPrefix, values, arbitrary, metadata } = styleProp;
|
|
147
|
+
const primaryCssProperty = Array.isArray(cssProperty) ? cssProperty[0] : cssProperty;
|
|
146
148
|
const configPrefix = config.prefix;
|
|
147
149
|
const tokens = [];
|
|
148
150
|
const literals = [];
|
|
@@ -165,7 +167,7 @@ function resolveStyleProp(propName, styleProp, config) {
|
|
|
165
167
|
const token = group.tokens.find((t) => t.name === parsed.key);
|
|
166
168
|
if (!token) continue;
|
|
167
169
|
const valueType = detectTokenValueType(token, group);
|
|
168
|
-
if (!isTokenAcceptedByProperty(
|
|
170
|
+
if (!isTokenAcceptedByProperty(primaryCssProperty, valueType, token.value)) continue;
|
|
169
171
|
const safeName = safeTokenName(token.name);
|
|
170
172
|
const varPrefix = group.cssPrefix ?? group.namespace ?? parsed.group;
|
|
171
173
|
tokens.push({
|
|
@@ -178,7 +180,7 @@ function resolveStyleProp(propName, styleProp, config) {
|
|
|
178
180
|
cssVar: buildCssVar(configPrefix, varPrefix, safeName),
|
|
179
181
|
modifiers: token.modifiers
|
|
180
182
|
});
|
|
181
|
-
} else tokens.push(...resolveGroupTokens(group,
|
|
183
|
+
} else tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix));
|
|
182
184
|
continue;
|
|
183
185
|
}
|
|
184
186
|
if (isNamespacedRef(entry)) {
|
|
@@ -186,7 +188,7 @@ function resolveStyleProp(propName, styleProp, config) {
|
|
|
186
188
|
if (!parsed || parsed.key !== void 0) continue;
|
|
187
189
|
const group = findGroup(config.atomic, parsed.group);
|
|
188
190
|
if (!group) continue;
|
|
189
|
-
tokens.push(...resolveGroupTokens(group,
|
|
191
|
+
tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix, entry.namespace));
|
|
190
192
|
continue;
|
|
191
193
|
}
|
|
192
194
|
if (typeof entry === "object" && entry !== null && "alias" in entry && "value" in entry) {
|
|
@@ -194,18 +196,8 @@ function resolveStyleProp(propName, styleProp, config) {
|
|
|
194
196
|
const aliasKey = aliasEntry.alias;
|
|
195
197
|
const aliasMapKey = typeof aliasKey === "string" ? aliasKey : String(aliasKey);
|
|
196
198
|
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;
|
|
199
|
+
if (typeof aliasEntry.value === "string") resolvedValue = resolveTokenRef(aliasEntry.value, configPrefix);
|
|
200
|
+
else resolvedValue = aliasEntry.value;
|
|
209
201
|
if (!literals.includes(aliasKey)) literals.push(aliasKey);
|
|
210
202
|
literalAliases[aliasMapKey] = resolvedValue;
|
|
211
203
|
}
|
package/dist/config.d.ts
CHANGED
|
@@ -223,8 +223,8 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
|
|
|
223
223
|
0: string;
|
|
224
224
|
4: string;
|
|
225
225
|
1: string;
|
|
226
|
-
px: string;
|
|
227
226
|
2: string;
|
|
227
|
+
px: string;
|
|
228
228
|
8: string;
|
|
229
229
|
0.5: string;
|
|
230
230
|
1.5: string;
|
|
@@ -359,12 +359,12 @@ declare const defaultPreset: UdsConfig<_$_uds_types0.ModifierProp | GetModifierF
|
|
|
359
359
|
4: string;
|
|
360
360
|
full: string;
|
|
361
361
|
1: string;
|
|
362
|
+
2: string;
|
|
362
363
|
"1/2": string;
|
|
363
364
|
"1/3": string;
|
|
364
365
|
"2/3": string;
|
|
365
366
|
"1/4": string;
|
|
366
367
|
"3/4": string;
|
|
367
|
-
2: string;
|
|
368
368
|
8: string;
|
|
369
369
|
0.5: string;
|
|
370
370
|
1.5: string;
|
|
@@ -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 };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { StyleProp } from "@uds/types";
|
|
2
2
|
|
|
3
3
|
//#region ../core/dist/style-prop-data.d.ts
|
|
4
|
-
//#region src/style-prop-data.d.ts
|
|
5
4
|
interface PropMapping {
|
|
6
5
|
/** Class name prefix for runtime class generation. 'no-prefix' means value IS the class. */
|
|
7
6
|
classPrefix: string;
|
|
@@ -28,6 +27,6 @@ interface PropMapping {
|
|
|
28
27
|
}
|
|
29
28
|
/** Exclude className — it's passed through, not mapped to a utility class */
|
|
30
29
|
type MappedStyleProp = Exclude<StyleProp, 'className'>;
|
|
31
|
-
declare const propMappings: Record<MappedStyleProp, PropMapping>;
|
|
30
|
+
declare const propMappings: Record<MappedStyleProp, PropMapping>;
|
|
32
31
|
//#endregion
|
|
33
32
|
export { PropMapping, propMappings };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { MotionPreset } from "@uds/types";
|
|
2
2
|
|
|
3
3
|
//#region ../core/dist/transformPreset.d.ts
|
|
4
|
-
//#region src/transformPreset.d.ts
|
|
5
4
|
interface TransformedMotionProps {
|
|
6
5
|
initial?: Record<string, unknown>;
|
|
7
6
|
animate?: Record<string, unknown>;
|
|
@@ -13,6 +12,6 @@ interface TransformedMotionProps {
|
|
|
13
12
|
/**
|
|
14
13
|
* Convert a JS-runtime MotionPreset to a motion/react-compatible props object.
|
|
15
14
|
*/
|
|
16
|
-
declare function transformPreset(preset: MotionPreset): TransformedMotionProps;
|
|
15
|
+
declare function transformPreset(preset: MotionPreset): TransformedMotionProps;
|
|
17
16
|
//#endregion
|
|
18
17
|
export { TransformedMotionProps, transformPreset };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { BorderRadius, GridSpan, GridStartEnd, GridTemplate, StyleAndModifierProps } from "@uds/types";
|
|
2
2
|
|
|
3
3
|
//#region ../core/dist/withDefaultStyleProps.d.ts
|
|
4
|
-
//#region src/withDefaultStyleProps.d.ts
|
|
5
4
|
interface StackDefaultsInput extends StyleAndModifierProps {
|
|
6
5
|
gap?: StyleAndModifierProps['gap'];
|
|
7
6
|
}
|
|
@@ -39,6 +38,6 @@ declare const withDefaultStyleProps: {
|
|
|
39
38
|
shape?: BorderRadius;
|
|
40
39
|
}) => StyleAndModifierProps;
|
|
41
40
|
Svg: (props: SvgDefaultsInput) => StyleAndModifierProps;
|
|
42
|
-
};
|
|
41
|
+
};
|
|
43
42
|
//#endregion
|
|
44
43
|
export { withDefaultStyleProps };
|
|
@@ -387,8 +387,8 @@ declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp
|
|
|
387
387
|
0: string;
|
|
388
388
|
4: string;
|
|
389
389
|
1: string;
|
|
390
|
-
px: string;
|
|
391
390
|
2: string;
|
|
391
|
+
px: string;
|
|
392
392
|
8: string;
|
|
393
393
|
0.5: string;
|
|
394
394
|
1.5: string;
|
|
@@ -423,8 +423,8 @@ declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp
|
|
|
423
423
|
0: string;
|
|
424
424
|
4: string;
|
|
425
425
|
1: string;
|
|
426
|
-
px: string;
|
|
427
426
|
2: string;
|
|
427
|
+
px: string;
|
|
428
428
|
8: string;
|
|
429
429
|
0.5: string;
|
|
430
430
|
1.5: string;
|
|
@@ -644,12 +644,12 @@ declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp
|
|
|
644
644
|
4: string;
|
|
645
645
|
full: string;
|
|
646
646
|
1: string;
|
|
647
|
+
2: string;
|
|
647
648
|
"1/2": string;
|
|
648
649
|
"1/3": string;
|
|
649
650
|
"2/3": string;
|
|
650
651
|
"1/4": string;
|
|
651
652
|
"3/4": string;
|
|
652
|
-
2: string;
|
|
653
653
|
8: string;
|
|
654
654
|
0.5: string;
|
|
655
655
|
1.5: string;
|
|
@@ -685,12 +685,12 @@ declare const boldVibrantFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp
|
|
|
685
685
|
4: string;
|
|
686
686
|
full: string;
|
|
687
687
|
1: string;
|
|
688
|
+
2: string;
|
|
688
689
|
"1/2": string;
|
|
689
690
|
"1/3": string;
|
|
690
691
|
"2/3": string;
|
|
691
692
|
"1/4": string;
|
|
692
693
|
"3/4": string;
|
|
693
|
-
2: string;
|
|
694
694
|
8: string;
|
|
695
695
|
0.5: string;
|
|
696
696
|
1.5: string;
|
|
@@ -387,8 +387,8 @@ declare const brutalistFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp |
|
|
|
387
387
|
0: string;
|
|
388
388
|
4: string;
|
|
389
389
|
1: string;
|
|
390
|
-
px: string;
|
|
391
390
|
2: string;
|
|
391
|
+
px: string;
|
|
392
392
|
8: string;
|
|
393
393
|
0.5: string;
|
|
394
394
|
1.5: string;
|
|
@@ -423,8 +423,8 @@ declare const brutalistFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp |
|
|
|
423
423
|
0: string;
|
|
424
424
|
4: string;
|
|
425
425
|
1: string;
|
|
426
|
-
px: string;
|
|
427
426
|
2: string;
|
|
427
|
+
px: string;
|
|
428
428
|
8: string;
|
|
429
429
|
0.5: string;
|
|
430
430
|
1.5: string;
|
|
@@ -644,12 +644,12 @@ declare const brutalistFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp |
|
|
|
644
644
|
4: string;
|
|
645
645
|
full: string;
|
|
646
646
|
1: string;
|
|
647
|
+
2: string;
|
|
647
648
|
"1/2": string;
|
|
648
649
|
"1/3": string;
|
|
649
650
|
"2/3": string;
|
|
650
651
|
"1/4": string;
|
|
651
652
|
"3/4": string;
|
|
652
|
-
2: string;
|
|
653
653
|
8: string;
|
|
654
654
|
0.5: string;
|
|
655
655
|
1.5: string;
|
|
@@ -685,12 +685,12 @@ declare const brutalistFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp |
|
|
|
685
685
|
4: string;
|
|
686
686
|
full: string;
|
|
687
687
|
1: string;
|
|
688
|
+
2: string;
|
|
688
689
|
"1/2": string;
|
|
689
690
|
"1/3": string;
|
|
690
691
|
"2/3": string;
|
|
691
692
|
"1/4": string;
|
|
692
693
|
"3/4": string;
|
|
693
|
-
2: string;
|
|
694
694
|
8: string;
|
|
695
695
|
0.5: string;
|
|
696
696
|
1.5: string;
|
|
@@ -387,8 +387,8 @@ declare const candyFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp | GetM
|
|
|
387
387
|
0: string;
|
|
388
388
|
4: string;
|
|
389
389
|
1: string;
|
|
390
|
-
px: string;
|
|
391
390
|
2: string;
|
|
391
|
+
px: string;
|
|
392
392
|
8: string;
|
|
393
393
|
0.5: string;
|
|
394
394
|
1.5: string;
|
|
@@ -423,8 +423,8 @@ declare const candyFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp | GetM
|
|
|
423
423
|
0: string;
|
|
424
424
|
4: string;
|
|
425
425
|
1: string;
|
|
426
|
-
px: string;
|
|
427
426
|
2: string;
|
|
427
|
+
px: string;
|
|
428
428
|
8: string;
|
|
429
429
|
0.5: string;
|
|
430
430
|
1.5: string;
|
|
@@ -644,12 +644,12 @@ declare const candyFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp | GetM
|
|
|
644
644
|
4: string;
|
|
645
645
|
full: string;
|
|
646
646
|
1: string;
|
|
647
|
+
2: string;
|
|
647
648
|
"1/2": string;
|
|
648
649
|
"1/3": string;
|
|
649
650
|
"2/3": string;
|
|
650
651
|
"1/4": string;
|
|
651
652
|
"3/4": string;
|
|
652
|
-
2: string;
|
|
653
653
|
8: string;
|
|
654
654
|
0.5: string;
|
|
655
655
|
1.5: string;
|
|
@@ -685,12 +685,12 @@ declare const candyFoundationPreset: UdsConfig<_$_uds_types0.ModifierProp | GetM
|
|
|
685
685
|
4: string;
|
|
686
686
|
full: string;
|
|
687
687
|
1: string;
|
|
688
|
+
2: string;
|
|
688
689
|
"1/2": string;
|
|
689
690
|
"1/3": string;
|
|
690
691
|
"2/3": string;
|
|
691
692
|
"1/4": string;
|
|
692
693
|
"3/4": string;
|
|
693
|
-
2: string;
|
|
694
694
|
8: string;
|
|
695
695
|
0.5: string;
|
|
696
696
|
1.5: string;
|