@yahoo/uds 3.175.5 → 3.175.7
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/automated-config/dist/utils/getConfigVariantProperties.d.cts +2 -2
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +2 -2
- package/dist/components/client/Input/Input.cjs +8 -1
- package/dist/components/client/Input/Input.js +8 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
- package/dist/components/client/Select/SelectTrigger.cjs +12 -1
- package/dist/components/client/Select/SelectTrigger.js +12 -1
- package/dist/components/client/Select/selectFieldStyles.cjs +2 -2
- package/dist/components/client/Select/selectFieldStyles.d.cts +1 -1
- package/dist/components/client/Select/selectFieldStyles.d.ts +1 -1
- package/dist/components/client/Select/selectFieldStyles.js +2 -2
- package/dist/components/client/Toast/UDSToastConfigProvider.d.cts +5 -5
- package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +5 -5
- package/dist/hooks/usePointerFocusTracker.cjs +25 -0
- package/dist/hooks/usePointerFocusTracker.d.cts +9 -0
- package/dist/hooks/usePointerFocusTracker.d.ts +9 -0
- package/dist/hooks/usePointerFocusTracker.js +24 -0
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts +2 -2
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts +2 -2
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/README.md +4 -2
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/container.d.ts +16 -20
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/declaration.d.ts +2 -2
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/lazy-result.js +23 -2
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/list.js +5 -2
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/map-generator.js +3 -2
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/node.d.ts +2 -2
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/parser.js +4 -1
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/postcss.js +1 -1
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/previous-map.js +18 -12
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/processor.js +1 -1
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/root.js +16 -1
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/stringifier.js +37 -7
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/lib/warning.js +10 -0
- package/dist/tailwind-internal/dist/vendor/node_modules/postcss/package.json +2 -2
- package/dist/uds/generated/componentData.cjs +2617 -2617
- package/dist/uds/generated/componentData.js +2617 -2617
- package/dist/uds/package.cjs +2 -2
- package/dist/uds/package.js +2 -2
- package/generated/componentData.json +3264 -3264
- package/package.json +3 -3
|
@@ -10,8 +10,8 @@ import { VariantConfig } from "../types/ComponentConfig.cjs";
|
|
|
10
10
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
11
11
|
*/
|
|
12
12
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
13
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
13
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
14
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
15
|
} | null;
|
|
16
16
|
//#endregion
|
|
17
17
|
export { getConfigVariantProperties };
|
|
@@ -10,8 +10,8 @@ import { VariantConfig } from "../types/ComponentConfig.js";
|
|
|
10
10
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
11
11
|
*/
|
|
12
12
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
13
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
13
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
14
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
15
|
} | null;
|
|
16
16
|
//#endregion
|
|
17
17
|
export { getConfigVariantProperties };
|
|
@@ -8,6 +8,7 @@ const require_components_Box = require("../../Box.cjs");
|
|
|
8
8
|
const require_components_HStack = require("../../HStack.cjs");
|
|
9
9
|
const require_components_VStack = require("../../VStack.cjs");
|
|
10
10
|
const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
|
|
11
|
+
const require_hooks_usePointerFocusTracker = require("../../../hooks/usePointerFocusTracker.cjs");
|
|
11
12
|
const require_components_client_AnimateHeightChange = require("../AnimateHeightChange.cjs");
|
|
12
13
|
const require_components_client_Input_UDSInputConfigProvider = require("./UDSInputConfigProvider.cjs");
|
|
13
14
|
const require_components_client_Input_InputHelpTextInternal = require("./InputHelpTextInternal.cjs");
|
|
@@ -93,6 +94,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
93
94
|
const uid = id ?? `uds-input-${generatedId}`;
|
|
94
95
|
const helpTextId = `uds-input-${uid}-help-text`;
|
|
95
96
|
const { startIconSize, endIconSize } = require_components_client_Input_UDSInputConfigProvider.useInputConfig(size);
|
|
97
|
+
const { isPointerFocus, onPointerDown, onFocusChange } = require_hooks_usePointerFocusTracker.usePointerFocusTracker();
|
|
96
98
|
const { className: inputClassName, ...inputProps } = slotProps?.input ?? {};
|
|
97
99
|
const { className: inputWrapperClassName, ...inputWrapperProps } = slotProps?.inputWrapper ?? {};
|
|
98
100
|
const ref = (0, react.useRef)(null);
|
|
@@ -110,6 +112,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
110
112
|
slotProps
|
|
111
113
|
]);
|
|
112
114
|
const handleBlur = (0, react.useCallback)((e) => {
|
|
115
|
+
onFocusChange(false);
|
|
113
116
|
if (formatOnBlur && ref.current) {
|
|
114
117
|
const next = formatOnBlur(e.target.value);
|
|
115
118
|
if (next !== e.target.value) setNativeInputValue(ref.current, next);
|
|
@@ -119,9 +122,11 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
119
122
|
}, [
|
|
120
123
|
formatOnBlur,
|
|
121
124
|
onBlur,
|
|
125
|
+
onFocusChange,
|
|
122
126
|
slotProps
|
|
123
127
|
]);
|
|
124
128
|
const handleFocus = (0, react.useCallback)((e) => {
|
|
129
|
+
onFocusChange(true);
|
|
125
130
|
if (parseOnFocus && ref.current) {
|
|
126
131
|
const next = parseOnFocus(e.target.value);
|
|
127
132
|
if (next !== e.target.value) setNativeInputValue(ref.current, next);
|
|
@@ -131,6 +136,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
131
136
|
}, [
|
|
132
137
|
parseOnFocus,
|
|
133
138
|
onFocus,
|
|
139
|
+
onFocusChange,
|
|
134
140
|
slotProps
|
|
135
141
|
]);
|
|
136
142
|
const layoutVariant = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() ? "smooth" : "bouncy";
|
|
@@ -148,7 +154,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
148
154
|
inputSizeInputWrapperDynamic: size,
|
|
149
155
|
inputVariantInputWrapper: "default",
|
|
150
156
|
inputVariantValueInputWrapper: !value ? "empty" : "filled"
|
|
151
|
-
}), "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
|
|
157
|
+
}), !isPointerFocus && "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
|
|
152
158
|
input: require_styles_styler.getStyles({
|
|
153
159
|
inputSizeInput: size,
|
|
154
160
|
inputVariantInput: "default",
|
|
@@ -201,6 +207,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
201
207
|
alignItems: "center",
|
|
202
208
|
style: { minWidth: `${minWidth}px` },
|
|
203
209
|
...inputWrapperProps,
|
|
210
|
+
onPointerDown,
|
|
204
211
|
className: classNames.inputWrapper,
|
|
205
212
|
children: [
|
|
206
213
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StartIcon, {
|
|
@@ -6,6 +6,7 @@ import { Box } from "../../Box.js";
|
|
|
6
6
|
import { HStack } from "../../HStack.js";
|
|
7
7
|
import { VStack } from "../../VStack.js";
|
|
8
8
|
import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
|
|
9
|
+
import { usePointerFocusTracker } from "../../../hooks/usePointerFocusTracker.js";
|
|
9
10
|
import { AnimateHeightChange } from "../AnimateHeightChange.js";
|
|
10
11
|
import { useInputConfig } from "./UDSInputConfigProvider.js";
|
|
11
12
|
import { InputHelpTextInternal as InputHelpTextInternalMemo } from "./InputHelpTextInternal.js";
|
|
@@ -90,6 +91,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
90
91
|
const uid = id ?? `uds-input-${generatedId}`;
|
|
91
92
|
const helpTextId = `uds-input-${uid}-help-text`;
|
|
92
93
|
const { startIconSize, endIconSize } = useInputConfig(size);
|
|
94
|
+
const { isPointerFocus, onPointerDown, onFocusChange } = usePointerFocusTracker();
|
|
93
95
|
const { className: inputClassName, ...inputProps } = slotProps?.input ?? {};
|
|
94
96
|
const { className: inputWrapperClassName, ...inputWrapperProps } = slotProps?.inputWrapper ?? {};
|
|
95
97
|
const ref = useRef(null);
|
|
@@ -107,6 +109,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
107
109
|
slotProps
|
|
108
110
|
]);
|
|
109
111
|
const handleBlur = useCallback((e) => {
|
|
112
|
+
onFocusChange(false);
|
|
110
113
|
if (formatOnBlur && ref.current) {
|
|
111
114
|
const next = formatOnBlur(e.target.value);
|
|
112
115
|
if (next !== e.target.value) setNativeInputValue(ref.current, next);
|
|
@@ -116,9 +119,11 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
116
119
|
}, [
|
|
117
120
|
formatOnBlur,
|
|
118
121
|
onBlur,
|
|
122
|
+
onFocusChange,
|
|
119
123
|
slotProps
|
|
120
124
|
]);
|
|
121
125
|
const handleFocus = useCallback((e) => {
|
|
126
|
+
onFocusChange(true);
|
|
122
127
|
if (parseOnFocus && ref.current) {
|
|
123
128
|
const next = parseOnFocus(e.target.value);
|
|
124
129
|
if (next !== e.target.value) setNativeInputValue(ref.current, next);
|
|
@@ -128,6 +133,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
128
133
|
}, [
|
|
129
134
|
parseOnFocus,
|
|
130
135
|
onFocus,
|
|
136
|
+
onFocusChange,
|
|
131
137
|
slotProps
|
|
132
138
|
]);
|
|
133
139
|
const layoutVariant = usePrefersReducedMotion() ? "smooth" : "bouncy";
|
|
@@ -145,7 +151,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
145
151
|
inputSizeInputWrapperDynamic: size,
|
|
146
152
|
inputVariantInputWrapper: "default",
|
|
147
153
|
inputVariantValueInputWrapper: !value ? "empty" : "filled"
|
|
148
|
-
}), "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
|
|
154
|
+
}), !isPointerFocus && "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
|
|
149
155
|
input: getStyles({
|
|
150
156
|
inputSizeInput: size,
|
|
151
157
|
inputVariantInput: "default",
|
|
@@ -198,6 +204,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
198
204
|
alignItems: "center",
|
|
199
205
|
style: { minWidth: `${minWidth}px` },
|
|
200
206
|
...inputWrapperProps,
|
|
207
|
+
onPointerDown,
|
|
201
208
|
className: classNames.inputWrapper,
|
|
202
209
|
children: [
|
|
203
210
|
/* @__PURE__ */ jsx(StartIcon, {
|
|
@@ -24,7 +24,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
24
24
|
gap: SpacingAlias;
|
|
25
25
|
dismissButtonSpacing: SpacingAlias;
|
|
26
26
|
dismissIconSize: number;
|
|
27
|
-
ariaKitPlacement: ("
|
|
27
|
+
ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
28
28
|
animationDuration: number;
|
|
29
29
|
};
|
|
30
30
|
//#endregion
|
|
@@ -25,7 +25,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
25
25
|
gap: SpacingAlias;
|
|
26
26
|
dismissButtonSpacing: SpacingAlias;
|
|
27
27
|
dismissIconSize: number;
|
|
28
|
-
ariaKitPlacement: ("
|
|
28
|
+
ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
29
29
|
animationDuration: number;
|
|
30
30
|
};
|
|
31
31
|
//#endregion
|
|
@@ -6,6 +6,7 @@ const require_styles_styler = require("../../../styles/styler.cjs");
|
|
|
6
6
|
const require_components_IconSlot = require("../../IconSlot.cjs");
|
|
7
7
|
const require_components_Box = require("../../Box.cjs");
|
|
8
8
|
const require_components_HStack = require("../../HStack.cjs");
|
|
9
|
+
const require_hooks_usePointerFocusTracker = require("../../../hooks/usePointerFocusTracker.cjs");
|
|
9
10
|
const require_components_client_Select_selectContext = require("./selectContext.cjs");
|
|
10
11
|
const require_components_client_Select_selectFieldStyles = require("./selectFieldStyles.cjs");
|
|
11
12
|
const require_components_client_Select_SelectValue = require("./SelectValue.cjs");
|
|
@@ -41,6 +42,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
|
|
|
41
42
|
EndIcon.displayName = "EndIcon";
|
|
42
43
|
const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
|
|
43
44
|
const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = require_components_client_Select_selectContext.useSelectFieldContext();
|
|
45
|
+
const { isPointerFocus, onPointerDown: onPointerDownFocusTracker, onFocusChange } = require_hooks_usePointerFocusTracker.usePointerFocusTracker();
|
|
44
46
|
const select = (0, _ariakit_react.useSelectContext)();
|
|
45
47
|
const value = (0, _ariakit_react.useStoreState)(select, "value");
|
|
46
48
|
const open = (0, _ariakit_react.useStoreState)(select, "open");
|
|
@@ -50,6 +52,7 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
|
|
|
50
52
|
const { className: triggerWrapperClassName, ...triggerWrapperProps } = slotProps?.triggerWrapper ?? {};
|
|
51
53
|
const { className: triggerClassName, onClick, ...triggerProps } = slotProps?.trigger ?? {};
|
|
52
54
|
const handlePointerDown = (event) => {
|
|
55
|
+
onPointerDownFocusTracker();
|
|
53
56
|
if (readOnly) {
|
|
54
57
|
event.preventDefault();
|
|
55
58
|
event.stopPropagation();
|
|
@@ -57,6 +60,12 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
|
|
|
57
60
|
}
|
|
58
61
|
triggerPassthroughOnPointerDown?.(event);
|
|
59
62
|
};
|
|
63
|
+
const handleFocus = () => {
|
|
64
|
+
onFocusChange(true);
|
|
65
|
+
};
|
|
66
|
+
const handleBlur = () => {
|
|
67
|
+
onFocusChange(false);
|
|
68
|
+
};
|
|
60
69
|
const handleClick = (event) => {
|
|
61
70
|
if (readOnly) {
|
|
62
71
|
event.preventDefault();
|
|
@@ -74,7 +83,7 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
|
|
|
74
83
|
width: "full",
|
|
75
84
|
style: { minWidth: `${minWidth}px` },
|
|
76
85
|
...triggerWrapperProps,
|
|
77
|
-
className: require_components_client_Select_selectFieldStyles.getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
|
|
86
|
+
className: require_components_client_Select_selectFieldStyles.getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName, isPointerFocus),
|
|
78
87
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Select, {
|
|
79
88
|
ref,
|
|
80
89
|
id: uid,
|
|
@@ -87,6 +96,8 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
|
|
|
87
96
|
...triggerPassthroughProps,
|
|
88
97
|
...triggerProps,
|
|
89
98
|
onPointerDown: handlePointerDown,
|
|
99
|
+
onFocus: handleFocus,
|
|
100
|
+
onBlur: handleBlur,
|
|
90
101
|
onClick: handleClick,
|
|
91
102
|
className: require_styles_styler.cx("flex", "w-full", "min-w-0", "items-center", "border-0", "bg-transparent", "rounded-[inherit]", "outline-none", "shadow-none", "uds-hit-target", isDisabled ? "cursor-not-allowed" : "cursor-pointer"),
|
|
92
103
|
children: [
|
|
@@ -5,6 +5,7 @@ import { cx } from "../../../styles/styler.js";
|
|
|
5
5
|
import { IconSlot } from "../../IconSlot.js";
|
|
6
6
|
import { Box } from "../../Box.js";
|
|
7
7
|
import { HStack } from "../../HStack.js";
|
|
8
|
+
import { usePointerFocusTracker } from "../../../hooks/usePointerFocusTracker.js";
|
|
8
9
|
import { useSelectFieldContext } from "./selectContext.js";
|
|
9
10
|
import { getSelectEndIconClassName, getSelectStartIconClassName, getSelectTriggerClassName, getSelectTriggerWrapperClassName } from "./selectFieldStyles.js";
|
|
10
11
|
import { SelectValue as SelectValue$1 } from "./SelectValue.js";
|
|
@@ -40,6 +41,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
|
|
|
40
41
|
EndIcon.displayName = "EndIcon";
|
|
41
42
|
const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
|
|
42
43
|
const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = useSelectFieldContext();
|
|
44
|
+
const { isPointerFocus, onPointerDown: onPointerDownFocusTracker, onFocusChange } = usePointerFocusTracker();
|
|
43
45
|
const select = useSelectContext();
|
|
44
46
|
const value = useStoreState(select, "value");
|
|
45
47
|
const open = useStoreState(select, "open");
|
|
@@ -49,6 +51,7 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
|
|
|
49
51
|
const { className: triggerWrapperClassName, ...triggerWrapperProps } = slotProps?.triggerWrapper ?? {};
|
|
50
52
|
const { className: triggerClassName, onClick, ...triggerProps } = slotProps?.trigger ?? {};
|
|
51
53
|
const handlePointerDown = (event) => {
|
|
54
|
+
onPointerDownFocusTracker();
|
|
52
55
|
if (readOnly) {
|
|
53
56
|
event.preventDefault();
|
|
54
57
|
event.stopPropagation();
|
|
@@ -56,6 +59,12 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
|
|
|
56
59
|
}
|
|
57
60
|
triggerPassthroughOnPointerDown?.(event);
|
|
58
61
|
};
|
|
62
|
+
const handleFocus = () => {
|
|
63
|
+
onFocusChange(true);
|
|
64
|
+
};
|
|
65
|
+
const handleBlur = () => {
|
|
66
|
+
onFocusChange(false);
|
|
67
|
+
};
|
|
59
68
|
const handleClick = (event) => {
|
|
60
69
|
if (readOnly) {
|
|
61
70
|
event.preventDefault();
|
|
@@ -73,7 +82,7 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
|
|
|
73
82
|
width: "full",
|
|
74
83
|
style: { minWidth: `${minWidth}px` },
|
|
75
84
|
...triggerWrapperProps,
|
|
76
|
-
className: getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
|
|
85
|
+
className: getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName, isPointerFocus),
|
|
77
86
|
children: /* @__PURE__ */ jsxs(Select, {
|
|
78
87
|
ref,
|
|
79
88
|
id: uid,
|
|
@@ -86,6 +95,8 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
|
|
|
86
95
|
...triggerPassthroughProps,
|
|
87
96
|
...triggerProps,
|
|
88
97
|
onPointerDown: handlePointerDown,
|
|
98
|
+
onFocus: handleFocus,
|
|
99
|
+
onBlur: handleBlur,
|
|
89
100
|
onClick: handleClick,
|
|
90
101
|
className: cx("flex", "w-full", "min-w-0", "items-center", "border-0", "bg-transparent", "rounded-[inherit]", "outline-none", "shadow-none", "uds-hit-target", isDisabled ? "cursor-not-allowed" : "cursor-pointer"),
|
|
91
102
|
children: [
|
|
@@ -26,13 +26,13 @@ function getSelectLabelRequiredClassName(hasValue) {
|
|
|
26
26
|
}
|
|
27
27
|
/** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
|
|
28
28
|
const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
|
|
29
|
-
function getSelectTriggerWrapperClassName(size, hasValue, className) {
|
|
29
|
+
function getSelectTriggerWrapperClassName(size, hasValue, className, isPointerFocus) {
|
|
30
30
|
return require_styles_styler.cx(require_styles_styler.getStyles({
|
|
31
31
|
inputSizeInputWrapperStatic: size,
|
|
32
32
|
inputSizeInputWrapperDynamic: size,
|
|
33
33
|
inputVariantInputWrapper: "default",
|
|
34
34
|
inputVariantValueInputWrapper: !hasValue ? "empty" : "filled"
|
|
35
|
-
}), "flex", "w-full", "items-center", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
|
|
35
|
+
}), "flex", "w-full", "items-center", !isPointerFocus && "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
|
|
36
36
|
}
|
|
37
37
|
function getSelectTriggerClassName({ size, hasValue, disabled, className }) {
|
|
38
38
|
return require_styles_styler.getStyles({
|
|
@@ -18,7 +18,7 @@ declare function getSelectLabelClassName(size: SelectSize, hasValue: boolean): s
|
|
|
18
18
|
declare function getSelectLabelRequiredClassName(hasValue: boolean): string;
|
|
19
19
|
/** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
|
|
20
20
|
declare const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
|
|
21
|
-
declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string): string;
|
|
21
|
+
declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string, isPointerFocus?: boolean): string;
|
|
22
22
|
declare function getSelectTriggerClassName({ size, hasValue, disabled, className }: SelectTriggerStyleOptions): string;
|
|
23
23
|
declare function getSelectStartIconClassName(size: SelectSize, hasValue: boolean): string;
|
|
24
24
|
declare function getSelectEndIconClassName(size: SelectSize, hasValue: boolean): string;
|
|
@@ -19,7 +19,7 @@ declare function getSelectLabelClassName(size: SelectSize, hasValue: boolean): s
|
|
|
19
19
|
declare function getSelectLabelRequiredClassName(hasValue: boolean): string;
|
|
20
20
|
/** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
|
|
21
21
|
declare const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
|
|
22
|
-
declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string): string;
|
|
22
|
+
declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string, isPointerFocus?: boolean): string;
|
|
23
23
|
declare function getSelectTriggerClassName({ size, hasValue, disabled, className }: SelectTriggerStyleOptions): string;
|
|
24
24
|
declare function getSelectStartIconClassName(size: SelectSize, hasValue: boolean): string;
|
|
25
25
|
declare function getSelectEndIconClassName(size: SelectSize, hasValue: boolean): string;
|
|
@@ -25,13 +25,13 @@ function getSelectLabelRequiredClassName(hasValue) {
|
|
|
25
25
|
}
|
|
26
26
|
/** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
|
|
27
27
|
const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
|
|
28
|
-
function getSelectTriggerWrapperClassName(size, hasValue, className) {
|
|
28
|
+
function getSelectTriggerWrapperClassName(size, hasValue, className, isPointerFocus) {
|
|
29
29
|
return cx(getStyles({
|
|
30
30
|
inputSizeInputWrapperStatic: size,
|
|
31
31
|
inputSizeInputWrapperDynamic: size,
|
|
32
32
|
inputVariantInputWrapper: "default",
|
|
33
33
|
inputVariantValueInputWrapper: !hasValue ? "empty" : "filled"
|
|
34
|
-
}), "flex", "w-full", "items-center", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
|
|
34
|
+
}), "flex", "w-full", "items-center", !isPointerFocus && "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
|
|
35
35
|
}
|
|
36
36
|
function getSelectTriggerClassName({ size, hasValue, disabled, className }) {
|
|
37
37
|
return getStyles({
|
|
@@ -26,11 +26,11 @@ declare const useToastConfig: (sizeProp?: ToastSize | undefined, variantProp?: T
|
|
|
26
26
|
autoClose: number | false;
|
|
27
27
|
position: ToastPosition;
|
|
28
28
|
backgroundColor: {
|
|
29
|
-
warning: "
|
|
30
|
-
info: "
|
|
31
|
-
loading: "
|
|
32
|
-
success: "
|
|
33
|
-
error: "
|
|
29
|
+
warning: "alert" | "primary" | "secondary" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
|
|
30
|
+
info: "alert" | "primary" | "secondary" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
|
|
31
|
+
loading: "alert" | "primary" | "secondary" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
|
|
32
|
+
success: "alert" | "primary" | "secondary" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
|
|
33
|
+
error: "alert" | "primary" | "secondary" | "accent" | "brand" | "positive" | "warning" | "info" | "alert-secondary" | "brand-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
36
|
//#endregion
|