@yahoo/uds 3.151.0 → 3.152.1
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/components/client/IconButton.cjs +62 -31
- package/dist/components/client/IconButton.d.cts +2 -1
- package/dist/components/client/IconButton.d.ts +2 -1
- package/dist/components/client/IconButton.js +63 -32
- package/dist/css/dist/purger/optimized/purgeFromCode.cjs +6 -4
- package/dist/css/dist/purger/optimized/purgeFromCode.js +6 -4
- package/dist/styles/styler.d.cts +18 -18
- package/dist/styles/styler.d.ts +18 -18
- package/dist/tailwind-v3/dist/purger/legacy/purgeCSS.cjs +3 -2
- package/dist/tailwind-v3/dist/purger/legacy/purgeCSS.js +3 -2
- package/dist/types/dist/index.d.cts +2 -0
- package/dist/types/dist/index.d.ts +2 -0
- package/dist/uds/generated/componentData.cjs +611 -598
- package/dist/uds/generated/componentData.js +611 -598
- package/dist/uds/generated/tailwindPurge.cjs +42 -5
- package/dist/uds/generated/tailwindPurge.js +42 -5
- package/generated/componentData.json +989 -970
- package/generated/tailwindPurge.ts +3 -3
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
4
4
|
require("../../_virtual/_rolldown/runtime.cjs");
|
|
5
5
|
const require_index = require("../../css-tokens/dist/index.cjs");
|
|
6
6
|
const require_styles_styler = require("../../styles/styler.cjs");
|
|
7
|
+
const require_utils_createSlot = require("../../utils/createSlot.cjs");
|
|
7
8
|
const require_components_Icon = require("../Icon.cjs");
|
|
8
9
|
const require_generateDefaultClassName = require("../../automated-config/dist/utils/generateDefaultClassName.cjs");
|
|
9
10
|
require("./buttonConstants.cjs");
|
|
@@ -44,13 +45,15 @@ const defaultVariantIconClass = require_generateDefaultClassName.generateDefault
|
|
|
44
45
|
* @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
|
|
45
46
|
*
|
|
46
47
|
**/
|
|
47
|
-
const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
|
|
48
|
+
const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
|
|
48
49
|
const ref = (0, react.useRef)(null);
|
|
49
50
|
(0, react.useImperativeHandle)(forwardedRef, () => ref.current);
|
|
50
51
|
const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
|
|
51
52
|
const prefersReducedMotion = (0, motion_react.useReducedMotion)();
|
|
52
53
|
const disableMotion = !!disableEffects || !!rest?.disabled;
|
|
53
54
|
const layoutVariant = (0, react.useMemo)(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
|
|
55
|
+
const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
|
|
56
|
+
const MotionSlot = (0, react.useMemo)(() => motion_react.m.create(Slot), [Slot]);
|
|
54
57
|
const buttonVariants = (0, react.useMemo)(() => ({
|
|
55
58
|
rest: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_REST})` },
|
|
56
59
|
hover: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_HOVER})` },
|
|
@@ -78,6 +81,63 @@ const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, ic
|
|
|
78
81
|
rootSizeClass,
|
|
79
82
|
rootVariantClass
|
|
80
83
|
]);
|
|
84
|
+
const iconContent = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.AnimatePresence, {
|
|
85
|
+
initial: false,
|
|
86
|
+
mode: "popLayout",
|
|
87
|
+
children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
|
|
88
|
+
variants: require_components_client_Button.loadingMotionVariants,
|
|
89
|
+
initial: "loading",
|
|
90
|
+
animate: "loading",
|
|
91
|
+
exit: "hide",
|
|
92
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
|
|
93
|
+
size: "sm",
|
|
94
|
+
name: _yahoo_uds_icons.Progress,
|
|
95
|
+
variant: iconVariant,
|
|
96
|
+
color: "current",
|
|
97
|
+
className: styles.loadingIcon
|
|
98
|
+
})
|
|
99
|
+
}, "loading"), name && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
|
|
100
|
+
variants: require_components_client_Button.iconMotionVariants,
|
|
101
|
+
initial: "icon",
|
|
102
|
+
animate: "icon",
|
|
103
|
+
exit: "hide",
|
|
104
|
+
children: !asChild && children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
|
|
105
|
+
size: "sm",
|
|
106
|
+
name,
|
|
107
|
+
variant: iconVariant,
|
|
108
|
+
color: "current",
|
|
109
|
+
className: require_styles_styler.cx(styles.icon, iconSlotClassName),
|
|
110
|
+
...iconSlotProps
|
|
111
|
+
})
|
|
112
|
+
}, name.name)]
|
|
113
|
+
}), [
|
|
114
|
+
asChild,
|
|
115
|
+
children,
|
|
116
|
+
iconSlotClassName,
|
|
117
|
+
iconSlotProps,
|
|
118
|
+
iconVariant,
|
|
119
|
+
loading,
|
|
120
|
+
name,
|
|
121
|
+
styles
|
|
122
|
+
]);
|
|
123
|
+
if (asChild && (0, react.isValidElement)(children)) {
|
|
124
|
+
const childProps = children.props;
|
|
125
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
|
|
126
|
+
layoutSpeed: "3",
|
|
127
|
+
layoutVariant,
|
|
128
|
+
reducedMotion: disableEffects ? "always" : "user",
|
|
129
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionSlot, {
|
|
130
|
+
type,
|
|
131
|
+
className: styles.root,
|
|
132
|
+
initial: "icon",
|
|
133
|
+
variants: buttonVariants,
|
|
134
|
+
whileHover: "hover",
|
|
135
|
+
whileTap: "pressed",
|
|
136
|
+
...rest,
|
|
137
|
+
children: (0, react.cloneElement)(children, childProps, iconContent)
|
|
138
|
+
})
|
|
139
|
+
});
|
|
140
|
+
}
|
|
81
141
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
|
|
82
142
|
layoutSpeed: "3",
|
|
83
143
|
layoutVariant,
|
|
@@ -92,36 +152,7 @@ const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, ic
|
|
|
92
152
|
whileHover: "hover",
|
|
93
153
|
whileTap: "pressed",
|
|
94
154
|
...rest,
|
|
95
|
-
children:
|
|
96
|
-
initial: false,
|
|
97
|
-
mode: "popLayout",
|
|
98
|
-
children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
|
|
99
|
-
variants: require_components_client_Button.loadingMotionVariants,
|
|
100
|
-
initial: "loading",
|
|
101
|
-
animate: "loading",
|
|
102
|
-
exit: "hide",
|
|
103
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
|
|
104
|
-
size: "sm",
|
|
105
|
-
name: _yahoo_uds_icons.Progress,
|
|
106
|
-
variant: iconVariant,
|
|
107
|
-
color: "current",
|
|
108
|
-
className: styles.loadingIcon
|
|
109
|
-
})
|
|
110
|
-
}, "loading"), name && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
|
|
111
|
-
variants: require_components_client_Button.iconMotionVariants,
|
|
112
|
-
initial: "icon",
|
|
113
|
-
animate: "icon",
|
|
114
|
-
exit: "hide",
|
|
115
|
-
children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
|
|
116
|
-
size: "sm",
|
|
117
|
-
name,
|
|
118
|
-
variant: iconVariant,
|
|
119
|
-
color: "current",
|
|
120
|
-
className: require_styles_styler.cx(styles.icon, iconSlotClassName),
|
|
121
|
-
...iconSlotProps
|
|
122
|
-
})
|
|
123
|
-
}, name.name)]
|
|
124
|
-
})
|
|
155
|
+
children: iconContent
|
|
125
156
|
})
|
|
126
157
|
});
|
|
127
158
|
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../tokens/types.cjs";
|
|
3
3
|
import * as _$react from "react";
|
|
4
|
+
import { ForwardRefExoticComponent } from "react";
|
|
4
5
|
import { HTMLMotionProps } from "motion/react";
|
|
5
6
|
|
|
6
7
|
//#region src/components/client/IconButton.d.ts
|
|
@@ -40,6 +41,6 @@ interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
|
|
|
40
41
|
* @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
|
|
41
42
|
*
|
|
42
43
|
**/
|
|
43
|
-
declare const IconButton:
|
|
44
|
+
declare const IconButton: ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
|
|
44
45
|
//#endregion
|
|
45
46
|
export { IconButton, type IconButtonProps };
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../tokens/types.js";
|
|
4
4
|
import * as _$react from "react";
|
|
5
|
+
import { ForwardRefExoticComponent } from "react";
|
|
5
6
|
import { HTMLMotionProps } from "motion/react";
|
|
6
7
|
|
|
7
8
|
//#region src/components/client/IconButton.d.ts
|
|
@@ -41,6 +42,6 @@ interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
|
|
|
41
42
|
* @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
|
|
42
43
|
*
|
|
43
44
|
**/
|
|
44
|
-
declare const IconButton:
|
|
45
|
+
declare const IconButton: ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
|
|
45
46
|
//#endregion
|
|
46
47
|
export { IconButton, type IconButtonProps };
|
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
"use client";
|
|
3
3
|
import { BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../css-tokens/dist/index.js";
|
|
4
4
|
import { cx, getStyles } from "../../styles/styler.js";
|
|
5
|
+
import { createSlot } from "../../utils/createSlot.js";
|
|
5
6
|
import { Icon } from "../Icon.js";
|
|
6
7
|
import { generateDefaultClassName } from "../../automated-config/dist/utils/generateDefaultClassName.js";
|
|
7
8
|
import "./buttonConstants.js";
|
|
8
9
|
import { SpringMotionConfig } from "./SpringMotionConfig.js";
|
|
9
10
|
import { iconMotionVariants, loadingMotionVariants } from "./Button.js";
|
|
10
11
|
import { Progress } from "@yahoo/uds-icons";
|
|
11
|
-
import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
|
|
12
|
+
import { cloneElement, forwardRef, isValidElement, useImperativeHandle, useMemo, useRef } from "react";
|
|
12
13
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
14
|
import { AnimatePresence, m, useReducedMotion } from "motion/react";
|
|
14
15
|
//#region src/components/client/IconButton.tsx
|
|
@@ -42,13 +43,15 @@ const defaultVariantIconClass = generateDefaultClassName("button", "variant", "i
|
|
|
42
43
|
* @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
|
|
43
44
|
*
|
|
44
45
|
**/
|
|
45
|
-
const IconButton = forwardRef(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
|
|
46
|
+
const IconButton = forwardRef(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
|
|
46
47
|
const ref = useRef(null);
|
|
47
48
|
useImperativeHandle(forwardedRef, () => ref.current);
|
|
48
49
|
const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
|
|
49
50
|
const prefersReducedMotion = useReducedMotion();
|
|
50
51
|
const disableMotion = !!disableEffects || !!rest?.disabled;
|
|
51
52
|
const layoutVariant = useMemo(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
|
|
53
|
+
const Slot = useMemo(() => createSlot(), []);
|
|
54
|
+
const MotionSlot = useMemo(() => m.create(Slot), [Slot]);
|
|
52
55
|
const buttonVariants = useMemo(() => ({
|
|
53
56
|
rest: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_REST})` },
|
|
54
57
|
hover: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_HOVER})` },
|
|
@@ -76,6 +79,63 @@ const IconButton = forwardRef(function IconButton({ variant, size, iconVariant,
|
|
|
76
79
|
rootSizeClass,
|
|
77
80
|
rootVariantClass
|
|
78
81
|
]);
|
|
82
|
+
const iconContent = useMemo(() => /* @__PURE__ */ jsxs(AnimatePresence, {
|
|
83
|
+
initial: false,
|
|
84
|
+
mode: "popLayout",
|
|
85
|
+
children: [loading && /* @__PURE__ */ jsx(m.span, {
|
|
86
|
+
variants: loadingMotionVariants,
|
|
87
|
+
initial: "loading",
|
|
88
|
+
animate: "loading",
|
|
89
|
+
exit: "hide",
|
|
90
|
+
children: /* @__PURE__ */ jsx(Icon, {
|
|
91
|
+
size: "sm",
|
|
92
|
+
name: Progress,
|
|
93
|
+
variant: iconVariant,
|
|
94
|
+
color: "current",
|
|
95
|
+
className: styles.loadingIcon
|
|
96
|
+
})
|
|
97
|
+
}, "loading"), name && !loading && /* @__PURE__ */ jsx(m.span, {
|
|
98
|
+
variants: iconMotionVariants,
|
|
99
|
+
initial: "icon",
|
|
100
|
+
animate: "icon",
|
|
101
|
+
exit: "hide",
|
|
102
|
+
children: !asChild && children || /* @__PURE__ */ jsx(Icon, {
|
|
103
|
+
size: "sm",
|
|
104
|
+
name,
|
|
105
|
+
variant: iconVariant,
|
|
106
|
+
color: "current",
|
|
107
|
+
className: cx(styles.icon, iconSlotClassName),
|
|
108
|
+
...iconSlotProps
|
|
109
|
+
})
|
|
110
|
+
}, name.name)]
|
|
111
|
+
}), [
|
|
112
|
+
asChild,
|
|
113
|
+
children,
|
|
114
|
+
iconSlotClassName,
|
|
115
|
+
iconSlotProps,
|
|
116
|
+
iconVariant,
|
|
117
|
+
loading,
|
|
118
|
+
name,
|
|
119
|
+
styles
|
|
120
|
+
]);
|
|
121
|
+
if (asChild && isValidElement(children)) {
|
|
122
|
+
const childProps = children.props;
|
|
123
|
+
return /* @__PURE__ */ jsx(SpringMotionConfig, {
|
|
124
|
+
layoutSpeed: "3",
|
|
125
|
+
layoutVariant,
|
|
126
|
+
reducedMotion: disableEffects ? "always" : "user",
|
|
127
|
+
children: /* @__PURE__ */ jsx(MotionSlot, {
|
|
128
|
+
type,
|
|
129
|
+
className: styles.root,
|
|
130
|
+
initial: "icon",
|
|
131
|
+
variants: buttonVariants,
|
|
132
|
+
whileHover: "hover",
|
|
133
|
+
whileTap: "pressed",
|
|
134
|
+
...rest,
|
|
135
|
+
children: cloneElement(children, childProps, iconContent)
|
|
136
|
+
})
|
|
137
|
+
});
|
|
138
|
+
}
|
|
79
139
|
return /* @__PURE__ */ jsx(SpringMotionConfig, {
|
|
80
140
|
layoutSpeed: "3",
|
|
81
141
|
layoutVariant,
|
|
@@ -90,36 +150,7 @@ const IconButton = forwardRef(function IconButton({ variant, size, iconVariant,
|
|
|
90
150
|
whileHover: "hover",
|
|
91
151
|
whileTap: "pressed",
|
|
92
152
|
...rest,
|
|
93
|
-
children:
|
|
94
|
-
initial: false,
|
|
95
|
-
mode: "popLayout",
|
|
96
|
-
children: [loading && /* @__PURE__ */ jsx(m.span, {
|
|
97
|
-
variants: loadingMotionVariants,
|
|
98
|
-
initial: "loading",
|
|
99
|
-
animate: "loading",
|
|
100
|
-
exit: "hide",
|
|
101
|
-
children: /* @__PURE__ */ jsx(Icon, {
|
|
102
|
-
size: "sm",
|
|
103
|
-
name: Progress,
|
|
104
|
-
variant: iconVariant,
|
|
105
|
-
color: "current",
|
|
106
|
-
className: styles.loadingIcon
|
|
107
|
-
})
|
|
108
|
-
}, "loading"), name && !loading && /* @__PURE__ */ jsx(m.span, {
|
|
109
|
-
variants: iconMotionVariants,
|
|
110
|
-
initial: "icon",
|
|
111
|
-
animate: "icon",
|
|
112
|
-
exit: "hide",
|
|
113
|
-
children: children || /* @__PURE__ */ jsx(Icon, {
|
|
114
|
-
size: "sm",
|
|
115
|
-
name,
|
|
116
|
-
variant: iconVariant,
|
|
117
|
-
color: "current",
|
|
118
|
-
className: cx(styles.icon, iconSlotClassName),
|
|
119
|
-
...iconSlotProps
|
|
120
|
-
})
|
|
121
|
-
}, name.name)]
|
|
122
|
-
})
|
|
153
|
+
children: iconContent
|
|
123
154
|
})
|
|
124
155
|
});
|
|
125
156
|
});
|
|
@@ -62,11 +62,13 @@ const isUdsComponentModule = (moduleSpecifier) => {
|
|
|
62
62
|
return cleaned === "@yahoo/uds" || cleaned.startsWith("@yahoo/uds/");
|
|
63
63
|
};
|
|
64
64
|
/**
|
|
65
|
-
* Normalize component name to match autoVariants keys (
|
|
65
|
+
* Normalize component name to match autoVariants keys (fully lowercase, no
|
|
66
|
+
* punctuation). autoVariants keys lowercase the entire component label (e.g.
|
|
67
|
+
* `menucontentSizeRoot`), so full lowercasing keeps the normalized prefix
|
|
68
|
+
* aligned with those keys and makes namespace/flat aliases resolve consistently.
|
|
66
69
|
*/
|
|
67
70
|
const normalizeComponentName = (name) => {
|
|
68
|
-
|
|
69
|
-
return cleaned.charAt(0).toLowerCase() + cleaned.slice(1);
|
|
71
|
+
return name.replace(/\W/g, "").toLowerCase();
|
|
70
72
|
};
|
|
71
73
|
/**
|
|
72
74
|
* Fallback: infer prop -> variant key mapping from autoVariants when the
|
|
@@ -350,7 +352,7 @@ const purgeFromCodeOptimized = async (code, options) => {
|
|
|
350
352
|
});
|
|
351
353
|
});
|
|
352
354
|
if (options.includeAllClassNamePrimitives) safelist.push(...extractClassNamePrimitives(sourceFile));
|
|
353
|
-
const finalSafelist = [...new Set(safelist)];
|
|
355
|
+
const finalSafelist = [...new Set(safelist)].sort();
|
|
354
356
|
const safelistGenerationMs = performance.now() - safelistGenStart;
|
|
355
357
|
stats.timeMs = Math.round(performance.now() - startTime);
|
|
356
358
|
stats.classesGenerated = finalSafelist.length;
|
|
@@ -61,11 +61,13 @@ const isUdsComponentModule = (moduleSpecifier) => {
|
|
|
61
61
|
return cleaned === "@yahoo/uds" || cleaned.startsWith("@yahoo/uds/");
|
|
62
62
|
};
|
|
63
63
|
/**
|
|
64
|
-
* Normalize component name to match autoVariants keys (
|
|
64
|
+
* Normalize component name to match autoVariants keys (fully lowercase, no
|
|
65
|
+
* punctuation). autoVariants keys lowercase the entire component label (e.g.
|
|
66
|
+
* `menucontentSizeRoot`), so full lowercasing keeps the normalized prefix
|
|
67
|
+
* aligned with those keys and makes namespace/flat aliases resolve consistently.
|
|
65
68
|
*/
|
|
66
69
|
const normalizeComponentName = (name) => {
|
|
67
|
-
|
|
68
|
-
return cleaned.charAt(0).toLowerCase() + cleaned.slice(1);
|
|
70
|
+
return name.replace(/\W/g, "").toLowerCase();
|
|
69
71
|
};
|
|
70
72
|
/**
|
|
71
73
|
* Fallback: infer prop -> variant key mapping from autoVariants when the
|
|
@@ -349,7 +351,7 @@ const purgeFromCodeOptimized = async (code, options) => {
|
|
|
349
351
|
});
|
|
350
352
|
});
|
|
351
353
|
if (options.includeAllClassNamePrimitives) safelist.push(...extractClassNamePrimitives(sourceFile));
|
|
352
|
-
const finalSafelist = [...new Set(safelist)];
|
|
354
|
+
const finalSafelist = [...new Set(safelist)].sort();
|
|
353
355
|
const safelistGenerationMs = performance.now() - safelistGenStart;
|
|
354
356
|
stats.timeMs = Math.round(performance.now() - startTime);
|
|
355
357
|
stats.classesGenerated = finalSafelist.length;
|
package/dist/styles/styler.d.cts
CHANGED
|
@@ -199,22 +199,22 @@ declare const getStylesInternal: (props?: ({
|
|
|
199
199
|
letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
|
|
200
200
|
textAlign?: "center" | "justify" | "start" | "end" | undefined;
|
|
201
201
|
textTransform?: "none" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "uppercase" | "lowercase" | "capitalize" | undefined;
|
|
202
|
-
spacing?: "0" | "
|
|
203
|
-
spacingHorizontal?: "0" | "
|
|
204
|
-
spacingVertical?: "0" | "
|
|
205
|
-
spacingBottom?: "0" | "
|
|
206
|
-
spacingEnd?: "0" | "
|
|
207
|
-
spacingStart?: "0" | "
|
|
208
|
-
spacingTop?: "0" | "
|
|
209
|
-
offset?: "0" | "
|
|
210
|
-
offsetVertical?: "0" | "
|
|
211
|
-
offsetHorizontal?: "0" | "
|
|
212
|
-
offsetBottom?: "0" | "
|
|
213
|
-
offsetEnd?: "0" | "
|
|
214
|
-
offsetStart?: "0" | "
|
|
215
|
-
offsetTop?: "0" | "
|
|
216
|
-
columnGap?: "0" | "
|
|
217
|
-
rowGap?: "0" | "
|
|
202
|
+
spacing?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
203
|
+
spacingHorizontal?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
204
|
+
spacingVertical?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
205
|
+
spacingBottom?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
206
|
+
spacingEnd?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
207
|
+
spacingStart?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
208
|
+
spacingTop?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
209
|
+
offset?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
210
|
+
offsetVertical?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
211
|
+
offsetHorizontal?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
212
|
+
offsetBottom?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
213
|
+
offsetEnd?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
214
|
+
offsetStart?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
215
|
+
offsetTop?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
216
|
+
columnGap?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
217
|
+
rowGap?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
218
218
|
backgroundColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
|
|
219
219
|
borderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
|
|
220
220
|
borderStartColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
|
|
@@ -250,7 +250,7 @@ declare const getStylesInternal: (props?: ({
|
|
|
250
250
|
overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
|
|
251
251
|
overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
|
|
252
252
|
position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
253
|
-
contentFit?: "none" | "
|
|
253
|
+
contentFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
|
|
254
254
|
colorMode?: "light" | "dark" | undefined;
|
|
255
255
|
scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
|
|
256
256
|
width?: "full" | "fit" | "screen" | undefined;
|
|
@@ -259,7 +259,7 @@ declare const getStylesInternal: (props?: ({
|
|
|
259
259
|
insetShadow?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs-invert" | "sm-invert" | "md-invert" | "lg-invert" | "xl-invert" | "2xl-invert" | undefined;
|
|
260
260
|
nestedBorderRadiusSize?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
261
261
|
nestedBorderRadiusWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
262
|
-
nestedBorderRadiusSpacing?: "0" | "
|
|
262
|
+
nestedBorderRadiusSpacing?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
263
263
|
nestedBorderRadius?: boolean | "first" | "last" | undefined;
|
|
264
264
|
} & {
|
|
265
265
|
className?: string | undefined;
|
package/dist/styles/styler.d.ts
CHANGED
|
@@ -199,22 +199,22 @@ declare const getStylesInternal: (props?: ({
|
|
|
199
199
|
letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
|
|
200
200
|
textAlign?: "center" | "justify" | "start" | "end" | undefined;
|
|
201
201
|
textTransform?: "none" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "uppercase" | "lowercase" | "capitalize" | undefined;
|
|
202
|
-
spacing?: "0" | "
|
|
203
|
-
spacingHorizontal?: "0" | "
|
|
204
|
-
spacingVertical?: "0" | "
|
|
205
|
-
spacingBottom?: "0" | "
|
|
206
|
-
spacingEnd?: "0" | "
|
|
207
|
-
spacingStart?: "0" | "
|
|
208
|
-
spacingTop?: "0" | "
|
|
209
|
-
offset?: "0" | "
|
|
210
|
-
offsetVertical?: "0" | "
|
|
211
|
-
offsetHorizontal?: "0" | "
|
|
212
|
-
offsetBottom?: "0" | "
|
|
213
|
-
offsetEnd?: "0" | "
|
|
214
|
-
offsetStart?: "0" | "
|
|
215
|
-
offsetTop?: "0" | "
|
|
216
|
-
columnGap?: "0" | "
|
|
217
|
-
rowGap?: "0" | "
|
|
202
|
+
spacing?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
203
|
+
spacingHorizontal?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
204
|
+
spacingVertical?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
205
|
+
spacingBottom?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
206
|
+
spacingEnd?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
207
|
+
spacingStart?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
208
|
+
spacingTop?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
209
|
+
offset?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
210
|
+
offsetVertical?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
211
|
+
offsetHorizontal?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
212
|
+
offsetBottom?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
213
|
+
offsetEnd?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
214
|
+
offsetStart?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
215
|
+
offsetTop?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
216
|
+
columnGap?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
217
|
+
rowGap?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
218
218
|
backgroundColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
|
|
219
219
|
borderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
|
|
220
220
|
borderStartColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
|
|
@@ -250,7 +250,7 @@ declare const getStylesInternal: (props?: ({
|
|
|
250
250
|
overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
|
|
251
251
|
overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
|
|
252
252
|
position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
253
|
-
contentFit?: "none" | "
|
|
253
|
+
contentFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
|
|
254
254
|
colorMode?: "light" | "dark" | undefined;
|
|
255
255
|
scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
|
|
256
256
|
width?: "full" | "fit" | "screen" | undefined;
|
|
@@ -259,7 +259,7 @@ declare const getStylesInternal: (props?: ({
|
|
|
259
259
|
insetShadow?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs-invert" | "sm-invert" | "md-invert" | "lg-invert" | "xl-invert" | "2xl-invert" | undefined;
|
|
260
260
|
nestedBorderRadiusSize?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
261
261
|
nestedBorderRadiusWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
262
|
-
nestedBorderRadiusSpacing?: "0" | "
|
|
262
|
+
nestedBorderRadiusSpacing?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
263
263
|
nestedBorderRadius?: boolean | "first" | "last" | undefined;
|
|
264
264
|
} & {
|
|
265
265
|
className?: string | undefined;
|
|
@@ -114,7 +114,7 @@ const getTailwindSafelist = (project, componentList, variants, generatedPurgeCss
|
|
|
114
114
|
if (variantClass) safeList.push(variantClass.replaceAll("\\", ""));
|
|
115
115
|
});
|
|
116
116
|
}
|
|
117
|
-
return Array.from(new Set(safeList)).filter(Boolean);
|
|
117
|
+
return Array.from(new Set(safeList)).filter(Boolean).sort();
|
|
118
118
|
};
|
|
119
119
|
/**
|
|
120
120
|
* Get the used props for a given component.
|
|
@@ -132,11 +132,12 @@ const isUDSComponent = (component, { componentToVariants }) => {
|
|
|
132
132
|
return !!componentToVariants[component];
|
|
133
133
|
};
|
|
134
134
|
const saveToFile = (safeList, outputPath) => {
|
|
135
|
+
const sortedSafeList = [...safeList].sort();
|
|
135
136
|
const fileContent = `
|
|
136
137
|
//! This file is generated by \`uds purge\` from @yahoo/uds
|
|
137
138
|
//! Do not edit directly
|
|
138
139
|
//! If there is issue with this file please report to #ask-uds
|
|
139
|
-
export const safelist = ${JSON.stringify(
|
|
140
|
+
export const safelist = ${JSON.stringify(sortedSafeList)};
|
|
140
141
|
`;
|
|
141
142
|
(0, node_fs.mkdirSync)(node_path.default.dirname(outputPath), { recursive: true });
|
|
142
143
|
(0, node_fs.writeFileSync)(outputPath, fileContent);
|
|
@@ -111,7 +111,7 @@ const getTailwindSafelist = (project, componentList, variants, generatedPurgeCss
|
|
|
111
111
|
if (variantClass) safeList.push(variantClass.replaceAll("\\", ""));
|
|
112
112
|
});
|
|
113
113
|
}
|
|
114
|
-
return Array.from(new Set(safeList)).filter(Boolean);
|
|
114
|
+
return Array.from(new Set(safeList)).filter(Boolean).sort();
|
|
115
115
|
};
|
|
116
116
|
/**
|
|
117
117
|
* Get the used props for a given component.
|
|
@@ -129,11 +129,12 @@ const isUDSComponent = (component, { componentToVariants }) => {
|
|
|
129
129
|
return !!componentToVariants[component];
|
|
130
130
|
};
|
|
131
131
|
const saveToFile = (safeList, outputPath) => {
|
|
132
|
+
const sortedSafeList = [...safeList].sort();
|
|
132
133
|
const fileContent = `
|
|
133
134
|
//! This file is generated by \`uds purge\` from @yahoo/uds
|
|
134
135
|
//! Do not edit directly
|
|
135
136
|
//! If there is issue with this file please report to #ask-uds
|
|
136
|
-
export const safelist = ${JSON.stringify(
|
|
137
|
+
export const safelist = ${JSON.stringify(sortedSafeList)};
|
|
137
138
|
`;
|
|
138
139
|
mkdirSync(path.dirname(outputPath), { recursive: true });
|
|
139
140
|
writeFileSync(outputPath, fileContent);
|