@yahoo/uds 3.162.1 → 3.162.2
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/Popover/UDSPopoverConfigProvider.d.cts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
- package/dist/components/client/Switch/Switch.cjs +5 -2
- package/dist/components/client/Switch/Switch.js +5 -2
- package/dist/components/client/Switch/switchStyles.cjs +2 -2
- package/dist/components/client/Switch/switchStyles.js +2 -2
- package/dist/hooks/useRtl.cjs +4 -8
- package/dist/hooks/useRtl.js +4 -8
- package/dist/styles/styler.d.cts +18 -18
- package/dist/styles/styler.d.ts +18 -18
- package/dist/uds/generated/componentData.cjs +142 -140
- package/dist/uds/generated/componentData.js +142 -140
- package/dist/uds/generated/tailwindPurge.cjs +1 -1
- package/dist/uds/generated/tailwindPurge.js +1 -1
- package/generated/componentData.json +186 -184
- package/generated/tailwindPurge.ts +1 -1
- package/package.json +1 -1
|
@@ -29,7 +29,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
29
29
|
gap: SpacingAlias;
|
|
30
30
|
dismissButtonSpacing: SpacingAlias;
|
|
31
31
|
dismissIconSize: number;
|
|
32
|
-
ariaKitPlacement: ("
|
|
32
|
+
ariaKitPlacement: ("bottom-end" | "bottom-start" | "top-end" | "top-start" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
33
33
|
animationDuration: number;
|
|
34
34
|
};
|
|
35
35
|
//#endregion
|
|
@@ -30,7 +30,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
30
30
|
gap: SpacingAlias;
|
|
31
31
|
dismissButtonSpacing: SpacingAlias;
|
|
32
32
|
dismissIconSize: number;
|
|
33
|
-
ariaKitPlacement: ("
|
|
33
|
+
ariaKitPlacement: ("bottom-end" | "bottom-start" | "top-end" | "top-start" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
34
34
|
animationDuration: number;
|
|
35
35
|
};
|
|
36
36
|
//#endregion
|
|
@@ -7,6 +7,7 @@ const require_components_IconSlot = require("../../IconSlot.cjs");
|
|
|
7
7
|
const require_components_Box = require("../../Box.cjs");
|
|
8
8
|
const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
|
|
9
9
|
const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
|
|
10
|
+
const require_hooks_useRtl = require("../../../hooks/useRtl.cjs");
|
|
10
11
|
const require_components_client_Switch_SwitchBase = require("./SwitchBase.cjs");
|
|
11
12
|
let react = require("react");
|
|
12
13
|
react = require_runtime.__toESM(react);
|
|
@@ -46,6 +47,7 @@ const toggleTransition = {
|
|
|
46
47
|
**/
|
|
47
48
|
const Switch = (0, react.forwardRef)(function Switch({ reduceMotion: forceReduceMotion, ...props }, parentRef) {
|
|
48
49
|
const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
|
|
50
|
+
const isRtl = require_hooks_useRtl.useRtl();
|
|
49
51
|
const reduceMotion = forceReduceMotion ? "always" : "user";
|
|
50
52
|
const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
|
|
51
53
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Switch_SwitchBase.SwitchBase, {
|
|
@@ -54,14 +56,15 @@ const Switch = (0, react.forwardRef)(function Switch({ reduceMotion: forceReduce
|
|
|
54
56
|
cssAnimationDuration,
|
|
55
57
|
enableHoverTracking: true,
|
|
56
58
|
renderHandle: ({ size, isOn, isOnX, showHoverEffect, disabled, onIcon, offIcon, cssAnimationDuration, handleSlotProps }) => {
|
|
59
|
+
const onX = isRtl ? `-${isOnX}` : isOnX;
|
|
57
60
|
const motionInitialAndAnimate = {
|
|
58
61
|
initial: {
|
|
59
62
|
scale: 1,
|
|
60
|
-
x: isOn ?
|
|
63
|
+
x: isOn ? onX : 0
|
|
61
64
|
},
|
|
62
65
|
animate: {
|
|
63
66
|
scale: showHoverEffect ? 1.05 : 1,
|
|
64
|
-
x: isOn ?
|
|
67
|
+
x: isOn ? onX : 0
|
|
65
68
|
}
|
|
66
69
|
};
|
|
67
70
|
const classNames = {
|
|
@@ -5,6 +5,7 @@ import { IconSlot } from "../../IconSlot.js";
|
|
|
5
5
|
import { Box } from "../../Box.js";
|
|
6
6
|
import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
|
|
7
7
|
import { SpringMotionConfig } from "../SpringMotionConfig.js";
|
|
8
|
+
import { useRtl } from "../../../hooks/useRtl.js";
|
|
8
9
|
import { SwitchBase } from "./SwitchBase.js";
|
|
9
10
|
import { forwardRef } from "react";
|
|
10
11
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -42,6 +43,7 @@ const toggleTransition = {
|
|
|
42
43
|
**/
|
|
43
44
|
const Switch = forwardRef(function Switch({ reduceMotion: forceReduceMotion, ...props }, parentRef) {
|
|
44
45
|
const prefersReducedMotion = usePrefersReducedMotion();
|
|
46
|
+
const isRtl = useRtl();
|
|
45
47
|
const reduceMotion = forceReduceMotion ? "always" : "user";
|
|
46
48
|
const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
|
|
47
49
|
return /* @__PURE__ */ jsx(SwitchBase, {
|
|
@@ -50,14 +52,15 @@ const Switch = forwardRef(function Switch({ reduceMotion: forceReduceMotion, ...
|
|
|
50
52
|
cssAnimationDuration,
|
|
51
53
|
enableHoverTracking: true,
|
|
52
54
|
renderHandle: ({ size, isOn, isOnX, showHoverEffect, disabled, onIcon, offIcon, cssAnimationDuration, handleSlotProps }) => {
|
|
55
|
+
const onX = isRtl ? `-${isOnX}` : isOnX;
|
|
53
56
|
const motionInitialAndAnimate = {
|
|
54
57
|
initial: {
|
|
55
58
|
scale: 1,
|
|
56
|
-
x: isOn ?
|
|
59
|
+
x: isOn ? onX : 0
|
|
57
60
|
},
|
|
58
61
|
animate: {
|
|
59
62
|
scale: showHoverEffect ? 1.05 : 1,
|
|
60
|
-
x: isOn ?
|
|
63
|
+
x: isOn ? onX : 0
|
|
61
64
|
}
|
|
62
65
|
};
|
|
63
66
|
const classNames = {
|
|
@@ -6,11 +6,11 @@ const require_styles_styler = require("../../../styles/styler.cjs");
|
|
|
6
6
|
const SIZE_MAP = {
|
|
7
7
|
md: {
|
|
8
8
|
isOnX: "1.25rem",
|
|
9
|
-
isOnTranslateClass: require_styles_styler.cx("translate-x-[1.25rem]")
|
|
9
|
+
isOnTranslateClass: require_styles_styler.cx("translate-x-[1.25rem]", "rtl:translate-x-[-1.25rem]")
|
|
10
10
|
},
|
|
11
11
|
sm: {
|
|
12
12
|
isOnX: "0.75rem",
|
|
13
|
-
isOnTranslateClass: require_styles_styler.cx("translate-x-[0.75rem]")
|
|
13
|
+
isOnTranslateClass: require_styles_styler.cx("translate-x-[0.75rem]", "rtl:translate-x-[-0.75rem]")
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
16
|
//#endregion
|
|
@@ -5,11 +5,11 @@ import { cx } from "../../../styles/styler.js";
|
|
|
5
5
|
const SIZE_MAP = {
|
|
6
6
|
md: {
|
|
7
7
|
isOnX: "1.25rem",
|
|
8
|
-
isOnTranslateClass: cx("translate-x-[1.25rem]")
|
|
8
|
+
isOnTranslateClass: cx("translate-x-[1.25rem]", "rtl:translate-x-[-1.25rem]")
|
|
9
9
|
},
|
|
10
10
|
sm: {
|
|
11
11
|
isOnX: "0.75rem",
|
|
12
|
-
isOnTranslateClass: cx("translate-x-[0.75rem]")
|
|
12
|
+
isOnTranslateClass: cx("translate-x-[0.75rem]", "rtl:translate-x-[-0.75rem]")
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
//#endregion
|
package/dist/hooks/useRtl.cjs
CHANGED
|
@@ -28,18 +28,14 @@ const createDirectionObserver = (callback) => {
|
|
|
28
28
|
* @default reads from document direction
|
|
29
29
|
*/
|
|
30
30
|
const useRtl = (options) => {
|
|
31
|
-
const [
|
|
31
|
+
const [detectedRtl, setDetectedRtl] = (0, react.useState)(getDocumentDirection);
|
|
32
32
|
(0, react.useEffect)(() => {
|
|
33
|
-
if (options?.explicit) {
|
|
34
|
-
setIsRtl(options.explicit);
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
33
|
const observer = createDirectionObserver(() => {
|
|
38
|
-
|
|
34
|
+
setDetectedRtl(getDocumentDirection());
|
|
39
35
|
});
|
|
40
36
|
return () => observer.disconnect();
|
|
41
|
-
}, [
|
|
42
|
-
return
|
|
37
|
+
}, []);
|
|
38
|
+
return options?.explicit ?? detectedRtl;
|
|
43
39
|
};
|
|
44
40
|
//#endregion
|
|
45
41
|
exports.createDirectionObserver = createDirectionObserver;
|
package/dist/hooks/useRtl.js
CHANGED
|
@@ -26,18 +26,14 @@ const createDirectionObserver = (callback) => {
|
|
|
26
26
|
* @default reads from document direction
|
|
27
27
|
*/
|
|
28
28
|
const useRtl = (options) => {
|
|
29
|
-
const [
|
|
29
|
+
const [detectedRtl, setDetectedRtl] = useState(getDocumentDirection);
|
|
30
30
|
useEffect(() => {
|
|
31
|
-
if (options?.explicit) {
|
|
32
|
-
setIsRtl(options.explicit);
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
31
|
const observer = createDirectionObserver(() => {
|
|
36
|
-
|
|
32
|
+
setDetectedRtl(getDocumentDirection());
|
|
37
33
|
});
|
|
38
34
|
return () => observer.disconnect();
|
|
39
|
-
}, [
|
|
40
|
-
return
|
|
35
|
+
}, []);
|
|
36
|
+
return options?.explicit ?? detectedRtl;
|
|
41
37
|
};
|
|
42
38
|
//#endregion
|
|
43
39
|
export { createDirectionObserver, getDocumentDirection, useRtl };
|
package/dist/styles/styler.d.cts
CHANGED
|
@@ -221,24 +221,24 @@ declare const getStylesInternal: (props?: ({
|
|
|
221
221
|
fontWeight?: "black" | "thin" | "medium" | "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" | "bold" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
|
|
222
222
|
lineHeight?: "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;
|
|
223
223
|
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;
|
|
224
|
-
textAlign?: "center" | "
|
|
224
|
+
textAlign?: "center" | "end" | "justify" | "start" | undefined;
|
|
225
225
|
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;
|
|
226
|
-
spacing?: "0" | "
|
|
227
|
-
spacingHorizontal?: "0" | "
|
|
228
|
-
spacingVertical?: "0" | "
|
|
229
|
-
spacingBottom?: "0" | "
|
|
230
|
-
spacingEnd?: "0" | "
|
|
231
|
-
spacingStart?: "0" | "
|
|
232
|
-
spacingTop?: "0" | "
|
|
233
|
-
offset?: "0" | "
|
|
234
|
-
offsetVertical?: "0" | "
|
|
235
|
-
offsetHorizontal?: "0" | "
|
|
236
|
-
offsetBottom?: "0" | "
|
|
237
|
-
offsetEnd?: "0" | "
|
|
238
|
-
offsetStart?: "0" | "
|
|
239
|
-
offsetTop?: "0" | "
|
|
240
|
-
columnGap?: "0" | "
|
|
241
|
-
rowGap?: "0" | "
|
|
226
|
+
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;
|
|
227
|
+
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;
|
|
228
|
+
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;
|
|
229
|
+
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;
|
|
230
|
+
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;
|
|
231
|
+
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;
|
|
232
|
+
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;
|
|
233
|
+
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;
|
|
234
|
+
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;
|
|
235
|
+
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;
|
|
236
|
+
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;
|
|
237
|
+
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;
|
|
238
|
+
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;
|
|
239
|
+
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;
|
|
240
|
+
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;
|
|
241
|
+
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;
|
|
242
242
|
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;
|
|
243
243
|
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;
|
|
244
244
|
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;
|
|
@@ -283,7 +283,7 @@ declare const getStylesInternal: (props?: ({
|
|
|
283
283
|
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;
|
|
284
284
|
nestedBorderRadiusSize?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
285
285
|
nestedBorderRadiusWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
286
|
-
nestedBorderRadiusSpacing?: "0" | "
|
|
286
|
+
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;
|
|
287
287
|
nestedBorderRadius?: boolean | "first" | "last" | undefined;
|
|
288
288
|
} & {
|
|
289
289
|
className?: string | undefined;
|
package/dist/styles/styler.d.ts
CHANGED
|
@@ -221,24 +221,24 @@ declare const getStylesInternal: (props?: ({
|
|
|
221
221
|
fontWeight?: "black" | "thin" | "medium" | "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" | "bold" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
|
|
222
222
|
lineHeight?: "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;
|
|
223
223
|
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;
|
|
224
|
-
textAlign?: "center" | "
|
|
224
|
+
textAlign?: "center" | "end" | "justify" | "start" | undefined;
|
|
225
225
|
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;
|
|
226
|
-
spacing?: "0" | "
|
|
227
|
-
spacingHorizontal?: "0" | "
|
|
228
|
-
spacingVertical?: "0" | "
|
|
229
|
-
spacingBottom?: "0" | "
|
|
230
|
-
spacingEnd?: "0" | "
|
|
231
|
-
spacingStart?: "0" | "
|
|
232
|
-
spacingTop?: "0" | "
|
|
233
|
-
offset?: "0" | "
|
|
234
|
-
offsetVertical?: "0" | "
|
|
235
|
-
offsetHorizontal?: "0" | "
|
|
236
|
-
offsetBottom?: "0" | "
|
|
237
|
-
offsetEnd?: "0" | "
|
|
238
|
-
offsetStart?: "0" | "
|
|
239
|
-
offsetTop?: "0" | "
|
|
240
|
-
columnGap?: "0" | "
|
|
241
|
-
rowGap?: "0" | "
|
|
226
|
+
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;
|
|
227
|
+
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;
|
|
228
|
+
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;
|
|
229
|
+
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;
|
|
230
|
+
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;
|
|
231
|
+
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;
|
|
232
|
+
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;
|
|
233
|
+
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;
|
|
234
|
+
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;
|
|
235
|
+
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;
|
|
236
|
+
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;
|
|
237
|
+
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;
|
|
238
|
+
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;
|
|
239
|
+
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;
|
|
240
|
+
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;
|
|
241
|
+
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;
|
|
242
242
|
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;
|
|
243
243
|
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;
|
|
244
244
|
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;
|
|
@@ -283,7 +283,7 @@ declare const getStylesInternal: (props?: ({
|
|
|
283
283
|
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;
|
|
284
284
|
nestedBorderRadiusSize?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
285
285
|
nestedBorderRadiusWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
|
|
286
|
-
nestedBorderRadiusSpacing?: "0" | "
|
|
286
|
+
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;
|
|
287
287
|
nestedBorderRadius?: boolean | "first" | "last" | undefined;
|
|
288
288
|
} & {
|
|
289
289
|
className?: string | undefined;
|