@yahoo/uds-mobile 1.1.0-beta.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CONTRIBUTING.md +1 -1
- package/README.md +9 -4
- package/dist/bin/generateTheme.mjs +8 -10
- package/dist/bin/{fixtures/dist/index.mjs → uds/dist/fixtures.mjs} +16 -8
- package/dist/bin/{palette/dist/index.mjs → uds/dist/tokens/configs/palette/alwaysPalette.mjs} +1 -1
- package/dist/bin/uds/dist/tokens/consts/defaultModes.mjs +6 -0
- package/dist/bin/{fonts/dist/index.mjs → uds/dist/tokens/consts/fontDeclarationsMap.mjs} +9 -24
- package/dist/components/Avatar.d.cts +2 -2
- package/dist/components/Avatar.d.mts +2 -2
- package/dist/components/Badge.d.cts +3 -3
- package/dist/components/Badge.d.mts +3 -3
- package/dist/components/Badge.mjs.map +1 -1
- package/dist/components/Box.cjs +1 -1
- package/dist/components/Box.d.cts +3 -3
- package/dist/components/Box.d.mts +3 -3
- package/dist/components/Box.mjs +1 -1
- package/dist/components/Box.mjs.map +1 -1
- package/dist/components/Button.cjs +6 -6
- package/dist/components/Button.d.cts +4 -3
- package/dist/components/Button.d.cts.map +1 -1
- package/dist/components/Button.d.mts +4 -3
- package/dist/components/Button.d.mts.map +1 -1
- package/dist/components/Button.mjs +1 -1
- package/dist/components/Button.mjs.map +1 -1
- package/dist/components/Checkbox.cjs +4 -4
- package/dist/components/Checkbox.d.cts +3 -3
- package/dist/components/Checkbox.d.mts +3 -3
- package/dist/components/Checkbox.d.mts.map +1 -1
- package/dist/components/Checkbox.mjs +1 -1
- package/dist/components/Checkbox.mjs.map +1 -1
- package/dist/components/Chip.d.cts +3 -3
- package/dist/components/Chip.d.mts +3 -3
- package/dist/components/Chip.d.mts.map +1 -1
- package/dist/components/Chip.mjs.map +1 -1
- package/dist/components/HStack.d.cts +2 -2
- package/dist/components/HStack.d.mts +2 -2
- package/dist/components/Icon.d.cts +4 -3
- package/dist/components/Icon.d.cts.map +1 -1
- package/dist/components/Icon.d.mts +4 -3
- package/dist/components/Icon.d.mts.map +1 -1
- package/dist/components/Icon.mjs.map +1 -1
- package/dist/components/IconButton.cjs +5 -5
- package/dist/components/IconButton.d.cts +4 -3
- package/dist/components/IconButton.d.cts.map +1 -1
- package/dist/components/IconButton.d.mts +4 -3
- package/dist/components/IconButton.d.mts.map +1 -1
- package/dist/components/IconButton.mjs +1 -1
- package/dist/components/IconButton.mjs.map +1 -1
- package/dist/components/IconSlot.d.cts +2 -2
- package/dist/components/IconSlot.d.mts +2 -2
- package/dist/components/IconSlot.d.mts.map +1 -1
- package/dist/components/Image.d.cts +3 -3
- package/dist/components/Image.d.mts +3 -3
- package/dist/components/Image.d.mts.map +1 -1
- package/dist/components/Image.mjs.map +1 -1
- package/dist/components/Input.d.cts +3 -3
- package/dist/components/Input.d.mts +3 -3
- package/dist/components/Input.d.mts.map +1 -1
- package/dist/components/Input.mjs.map +1 -1
- package/dist/components/Link.d.cts +4 -3
- package/dist/components/Link.d.cts.map +1 -1
- package/dist/components/Link.d.mts +4 -3
- package/dist/components/Link.d.mts.map +1 -1
- package/dist/components/Link.mjs.map +1 -1
- package/dist/components/Pressable.d.cts +3 -3
- package/dist/components/Pressable.d.mts +3 -3
- package/dist/components/Radio.cjs +4 -4
- package/dist/components/Radio.d.cts +3 -3
- package/dist/components/Radio.d.mts +3 -3
- package/dist/components/Radio.mjs +1 -1
- package/dist/components/Radio.mjs.map +1 -1
- package/dist/components/Screen.d.cts +2 -2
- package/dist/components/Screen.d.mts +2 -2
- package/dist/components/Screen.d.mts.map +1 -1
- package/dist/components/Switch.d.cts +3 -3
- package/dist/components/Switch.d.cts.map +1 -1
- package/dist/components/Switch.d.mts +3 -3
- package/dist/components/Switch.d.mts.map +1 -1
- package/dist/components/Switch.mjs.map +1 -1
- package/dist/components/Text.d.cts +2 -2
- package/dist/components/Text.d.mts +2 -2
- package/dist/components/VStack.d.cts +2 -2
- package/dist/components/VStack.d.mts +2 -2
- package/dist/components/VStack.d.mts.map +1 -1
- package/dist/icons/dist/glyphMap.d.cts +1 -1
- package/dist/icons/dist/glyphMap.d.cts.map +1 -1
- package/dist/icons/dist/glyphMap.d.mts +1 -1
- package/dist/icons/dist/glyphMap.d.mts.map +1 -1
- package/dist/icons/dist/glyphMap.mjs.map +1 -1
- package/dist/icons/dist/svgMap.d.cts.map +1 -1
- package/dist/icons/dist/svgMap.d.mts.map +1 -1
- package/dist/icons/dist/svgMap.mjs.map +1 -1
- package/dist/icons/dist/tokens.mjs.map +1 -1
- package/dist/icons/dist/types.d.cts +24 -0
- package/dist/icons/dist/types.d.cts.map +1 -0
- package/dist/icons/dist/types.d.mts +24 -0
- package/dist/icons/dist/types.d.mts.map +1 -0
- package/dist/motion.cjs +12 -12
- package/dist/motion.d.cts +3 -2
- package/dist/motion.d.cts.map +1 -1
- package/dist/motion.d.mts +3 -2
- package/dist/motion.d.mts.map +1 -1
- package/dist/motion.mjs +1 -1
- package/dist/motion.mjs.map +1 -1
- package/dist/uds/dist/components/Box.d.cts +3 -0
- package/dist/uds/dist/components/Box.d.mts +3 -0
- package/dist/uds/dist/components/Divider/Divider.d.cts +3 -0
- package/dist/uds/dist/components/Divider/Divider.d.mts +3 -0
- package/dist/uds/dist/components/Divider/DividerCore.d.cts +4 -0
- package/dist/uds/dist/components/Divider/DividerCore.d.mts +4 -0
- package/dist/uds/dist/components/Divider/DividerInternal.d.cts +4 -0
- package/dist/uds/dist/components/Divider/DividerInternal.d.mts +4 -0
- package/dist/uds/dist/components/Divider/index.d.cts +2 -0
- package/dist/uds/dist/components/Divider/index.d.mts +2 -0
- package/dist/uds/dist/components/FormLabel.d.cts +3 -0
- package/dist/uds/dist/components/FormLabel.d.mts +4 -0
- package/dist/uds/dist/components/HStack.d.cts +4 -0
- package/dist/uds/dist/components/HStack.d.mts +4 -0
- package/dist/uds/dist/components/Icon.d.cts +3 -0
- package/dist/uds/dist/components/Icon.d.mts +3 -0
- package/dist/uds/dist/components/Image.d.cts +2 -0
- package/dist/uds/dist/components/Image.d.mts +3 -0
- package/dist/uds/dist/components/Link.d.cts +3 -0
- package/dist/uds/dist/components/Link.d.mts +3 -0
- package/dist/uds/dist/components/Text.d.cts +3 -0
- package/dist/uds/dist/components/Text.d.mts +3 -0
- package/dist/uds/dist/components/VStack.d.cts +4 -0
- package/dist/uds/dist/components/VStack.d.mts +4 -0
- package/dist/uds/dist/components/client/Avatar/Avatar.d.cts +2 -0
- package/dist/uds/dist/components/client/Avatar/Avatar.d.mts +3 -0
- package/dist/uds/dist/components/client/Avatar/AvatarIcon.d.cts +2 -0
- package/dist/uds/dist/components/client/Avatar/AvatarIcon.d.mts +3 -0
- package/dist/uds/dist/components/client/Avatar/AvatarImage.d.cts +4 -0
- package/dist/uds/dist/components/client/Avatar/AvatarImage.d.mts +5 -0
- package/dist/uds/dist/components/client/Avatar/AvatarText.d.cts +3 -0
- package/dist/uds/dist/components/client/Avatar/AvatarText.d.mts +4 -0
- package/dist/uds/dist/components/client/Avatar/index.d.cts +5 -0
- package/dist/uds/dist/components/client/Avatar/index.d.mts +5 -0
- package/dist/uds/dist/components/client/Badge.d.cts +3 -0
- package/dist/uds/dist/components/client/Badge.d.mts +3 -0
- package/dist/uds/dist/components/client/Button.d.cts +3 -0
- package/dist/uds/dist/components/client/Button.d.mts +3 -0
- package/dist/uds/dist/components/client/Checkbox.d.cts +3 -0
- package/dist/uds/dist/components/client/Checkbox.d.mts +3 -0
- package/dist/uds/dist/components/client/Chip/Chip.d.cts +4 -0
- package/dist/uds/dist/components/client/Chip/Chip.d.mts +4 -0
- package/dist/uds/dist/components/client/Chip/ChipBase.d.cts +4 -0
- package/dist/uds/dist/components/client/Chip/ChipBase.d.mts +4 -0
- package/dist/uds/dist/components/client/Chip/ChipButton.d.cts +4 -0
- package/dist/uds/dist/components/client/Chip/ChipButton.d.mts +4 -0
- package/dist/uds/dist/components/client/Chip/ChipDismissible.d.cts +4 -0
- package/dist/uds/dist/components/client/Chip/ChipDismissible.d.mts +4 -0
- package/dist/uds/dist/components/client/Chip/ChipLink.d.cts +4 -0
- package/dist/uds/dist/components/client/Chip/ChipLink.d.mts +4 -0
- package/dist/uds/dist/components/client/Chip/ChipToggle.d.cts +4 -0
- package/dist/uds/dist/components/client/Chip/ChipToggle.d.mts +4 -0
- package/dist/uds/dist/components/client/Chip/index.d.cts +6 -0
- package/dist/uds/dist/components/client/Chip/index.d.mts +6 -0
- package/dist/uds/dist/components/client/IconButton.d.cts +3 -0
- package/dist/uds/dist/components/client/IconButton.d.mts +3 -0
- package/dist/uds/dist/components/client/Input/Input.d.cts +4 -0
- package/dist/uds/dist/components/client/Input/Input.d.mts +4 -0
- package/dist/uds/dist/components/client/Input/InputHelpText.d.cts +2 -0
- package/dist/uds/dist/components/client/Input/InputHelpText.d.mts +3 -0
- package/dist/uds/dist/components/client/Input/InputHelpTextInternal.d.cts +5 -0
- package/dist/uds/dist/components/client/Input/InputHelpTextInternal.d.mts +6 -0
- package/dist/uds/dist/components/client/Input/index.d.cts +3 -0
- package/dist/uds/dist/components/client/Input/index.d.mts +3 -0
- package/dist/uds/dist/components/client/Menu/Menu.Content.d.cts +4 -0
- package/dist/uds/dist/components/client/Menu/Menu.Content.d.mts +4 -0
- package/dist/uds/dist/components/client/Menu/Menu.Divider.d.cts +3 -0
- package/dist/uds/dist/components/client/Menu/Menu.Divider.d.mts +3 -0
- package/dist/uds/dist/components/client/Menu/Menu.Item.d.cts +4 -0
- package/dist/uds/dist/components/client/Menu/Menu.Item.d.mts +4 -0
- package/dist/uds/dist/components/client/Menu/Menu.ItemCheckbox.d.cts +4 -0
- package/dist/uds/dist/components/client/Menu/Menu.ItemCheckbox.d.mts +4 -0
- package/dist/uds/dist/components/client/Menu/Menu.Provider.d.cts +2 -0
- package/dist/uds/dist/components/client/Menu/Menu.Provider.d.mts +3 -0
- package/dist/uds/dist/components/client/Menu/Menu.Trigger.d.cts +4 -0
- package/dist/uds/dist/components/client/Menu/Menu.Trigger.d.mts +4 -0
- package/dist/uds/dist/components/client/Menu/Menu.d.cts +2 -0
- package/dist/uds/dist/components/client/Menu/Menu.d.mts +2 -0
- package/dist/uds/dist/components/client/Menu/Menu.index.d.cts +7 -0
- package/dist/uds/dist/components/client/Menu/Menu.index.d.mts +7 -0
- package/dist/uds/dist/components/client/Menu/index.d.cts +9 -0
- package/dist/uds/dist/components/client/Menu/index.d.mts +9 -0
- package/dist/uds/dist/components/client/Pressable.d.cts +3 -0
- package/dist/uds/dist/components/client/Pressable.d.mts +3 -0
- package/dist/uds/dist/components/client/Radio/Radio.d.cts +3 -0
- package/dist/uds/dist/components/client/Radio/Radio.d.mts +3 -0
- package/dist/uds/dist/components/client/Radio/RadioGroupProvider.d.cts +3 -0
- package/dist/uds/dist/components/client/Radio/RadioGroupProvider.d.mts +3 -0
- package/dist/uds/dist/components/client/Radio/index.d.cts +3 -0
- package/dist/uds/dist/components/client/Radio/index.d.mts +3 -0
- package/dist/uds/dist/components/client/SpringMotionConfig.d.cts +3 -0
- package/dist/uds/dist/components/client/SpringMotionConfig.d.mts +3 -0
- package/dist/uds/dist/components/client/Switch.d.cts +3 -0
- package/dist/uds/dist/components/client/Switch.d.mts +3 -0
- package/dist/uds/dist/components/client/index.d.cts +33 -0
- package/dist/uds/dist/components/client/index.d.mts +33 -0
- package/dist/uds/dist/components/index.d.cts +40 -0
- package/dist/uds/dist/components/index.d.mts +40 -0
- package/dist/uds/dist/index.d.cts +46 -0
- package/dist/uds/dist/index.d.mts +46 -0
- package/dist/uds/dist/styles/styler.d.cts +2 -0
- package/dist/uds/dist/styles/styler.d.mts +2 -0
- package/dist/uds/dist/styles/stylerTypes.d.cts +2 -0
- package/dist/uds/dist/styles/stylerTypes.d.mts +2 -0
- package/dist/uds/dist/tokens/automation/configs/avatar.d.cts +2 -0
- package/dist/uds/dist/tokens/automation/configs/avatar.d.mts +2 -0
- package/dist/uds/dist/tokens/automation/properties.d.cts +3 -0
- package/dist/uds/dist/tokens/automation/properties.d.mts +3 -0
- package/dist/uds/dist/tokens/automation/types/ComponentConfig.d.cts +3 -0
- package/dist/uds/dist/tokens/automation/types/ComponentConfig.d.mts +3 -0
- package/dist/{motion-tokens/dist/index.cjs → uds/dist/tokens/configs/motion.cjs} +2 -2
- package/dist/{motion-tokens/dist/index.d.cts → uds/dist/tokens/configs/motion.d.cts} +4 -4
- package/dist/uds/dist/tokens/configs/motion.d.cts.map +1 -0
- package/dist/{motion-tokens/dist/index.d.mts → uds/dist/tokens/configs/motion.d.mts} +4 -4
- package/dist/uds/dist/tokens/configs/motion.d.mts.map +1 -0
- package/dist/{motion-tokens/dist/index.mjs → uds/dist/tokens/configs/motion.mjs} +3 -3
- package/dist/uds/dist/tokens/configs/motion.mjs.map +1 -0
- package/dist/uds/dist/tokens/configs/palette/alwaysPalette.d.cts +32 -0
- package/dist/uds/dist/tokens/configs/palette/alwaysPalette.d.cts.map +1 -0
- package/dist/uds/dist/tokens/configs/palette/alwaysPalette.d.mts +32 -0
- package/dist/uds/dist/tokens/configs/palette/alwaysPalette.d.mts.map +1 -0
- package/dist/uds/dist/tokens/types.d.cts +426 -0
- package/dist/uds/dist/tokens/types.d.cts.map +1 -0
- package/dist/uds/dist/tokens/types.d.mts +426 -0
- package/dist/uds/dist/tokens/types.d.mts.map +1 -0
- package/dist/uds/dist/types.d.cts +2 -0
- package/dist/uds/dist/types.d.mts +2 -0
- package/fonts/uds-icons.ttf +0 -0
- package/package.json +1 -1
- package/dist/bin/modes/dist/index.mjs +0 -6
- package/dist/motion-tokens/dist/index.d.cts.map +0 -1
- package/dist/motion-tokens/dist/index.d.mts.map +0 -1
- package/dist/motion-tokens/dist/index.mjs.map +0 -1
- package/dist/types/dist/index.d.cts +0 -247
- package/dist/types/dist/index.d.cts.map +0 -1
- package/dist/types/dist/index.d.mts +0 -247
- package/dist/types/dist/index.d.mts.map +0 -1
|
@@ -0,0 +1,426 @@
|
|
|
1
|
+
|
|
2
|
+
import { deprecatedAlwaysPalette, newAlwaysPalette } from "./configs/palette/alwaysPalette.cjs";
|
|
3
|
+
import { IconSize, IconVariant, SvgIcon } from "../../../icons/dist/types.cjs";
|
|
4
|
+
import { ElementType, PropsWithChildren, ReactElement, ReactNode, Ref } from "react";
|
|
5
|
+
import { Spring } from "motion/react";
|
|
6
|
+
|
|
7
|
+
//#region ../uds/dist/tokens/types.d.ts
|
|
8
|
+
|
|
9
|
+
type SharedPrimaryPaletteAlias = 'brand' | 'alert' | 'positive' | 'warning' | 'info';
|
|
10
|
+
type SharedSecondaryPaletteAlias = `${SharedPrimaryPaletteAlias}-secondary`;
|
|
11
|
+
type SharedPaletteAlias = SharedPrimaryPaletteAlias | SharedSecondaryPaletteAlias;
|
|
12
|
+
type DeprecatedAccentAlias = 'accent';
|
|
13
|
+
type BackgroundPaletteAlias = 'primary' | 'secondary' | DeprecatedAccentAlias | SharedPaletteAlias;
|
|
14
|
+
type ForegroundPaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'on-color' | DeprecatedAccentAlias | SharedPaletteAlias;
|
|
15
|
+
type LinePaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | DeprecatedAccentAlias | SharedPaletteAlias;
|
|
16
|
+
type AlwaysPaletteAliasWithPrefix = keyof typeof newAlwaysPalette;
|
|
17
|
+
type AlwaysPaletteAlias = keyof typeof deprecatedAlwaysPalette | AlwaysPaletteAliasWithPrefix;
|
|
18
|
+
type ForegroundColor = ForegroundPaletteAlias | AlwaysPaletteAlias;
|
|
19
|
+
type LineColor = LinePaletteAlias | AlwaysPaletteAlias | ElevationAlias;
|
|
20
|
+
type BackgroundColor = BackgroundPaletteAlias | AlwaysPaletteAlias | ElevationAlias;
|
|
21
|
+
type ShadowVariant = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
22
|
+
type ShadowVariantWithElevation = ShadowVariant | ElevationAlias;
|
|
23
|
+
type ShadowVariantInvert = `${Exclude<ShadowVariant, 'none'>}-invert`;
|
|
24
|
+
type TextVariantTypography = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'label3' | 'label4' | 'caption1' | 'caption2' | 'legal1';
|
|
25
|
+
type TextVariantUi = 'ui1' | 'ui2' | 'ui3' | 'ui4' | 'ui5' | 'ui6';
|
|
26
|
+
type TextVariantWithoutEmphasized = TextVariantTypography | TextVariantUi;
|
|
27
|
+
type TShirtSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
28
|
+
type TShirtSizeCommon = Extract<TShirtSize, 'sm' | 'md' | 'lg'>;
|
|
29
|
+
type SpacingAlias = '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';
|
|
30
|
+
type ElevationLevel = '0' | '1' | '2' | '3' | '4' | '5';
|
|
31
|
+
type ElevationAlias = `elevation-${ElevationLevel}`;
|
|
32
|
+
type BorderRadius = TShirtSize;
|
|
33
|
+
type BorderWidth = 'none' | 'thin' | 'medium' | 'thick';
|
|
34
|
+
type BorderWidthWithElevation = BorderWidth | ElevationAlias;
|
|
35
|
+
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
36
|
+
type ButtonPalette = 'brand' | 'accent' | 'alert' | 'positive' | 'warning' | 'info';
|
|
37
|
+
type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
|
|
38
|
+
type ButtonVariantFlat = ButtonVariant | `${Exclude<ButtonPalette, 'accent'>}` | `${Exclude<ButtonPalette, 'accent'>}-${Exclude<ButtonVariant, 'primary'>}`;
|
|
39
|
+
type IconButtonSize = Extract<TShirtSize, 'xs' | TShirtSizeCommon | 'xl'>;
|
|
40
|
+
type InputSize = Extract<TShirtSizeCommon, 'md' | 'lg'>;
|
|
41
|
+
type MotionVariant = 'damped' | 'smooth' | 'subtle' | 'bouncy' | 'veryBouncy';
|
|
42
|
+
type MotionVariantSpeed = '1' | '2' | '3' | '4';
|
|
43
|
+
type MotionSpringConfigOptions = 'damping' | 'stiffness';
|
|
44
|
+
type MotionSpringConfig = Required<Pick<Spring, MotionSpringConfigOptions>>;
|
|
45
|
+
type MotionVariantValues = { [key in MotionVariantSpeed]: MotionSpringConfig };
|
|
46
|
+
type MotionConfig = Record<MotionVariant, MotionVariantValues>;
|
|
47
|
+
type Flex = '1' | 'auto' | 'initial' | 'none';
|
|
48
|
+
type FlexGrow = '0' | '1' | '2' | '3';
|
|
49
|
+
type FlexShrink = '0' | '1';
|
|
50
|
+
type FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
|
|
51
|
+
type FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
|
|
52
|
+
type FlexAlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
|
|
53
|
+
type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
|
54
|
+
type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
|
|
55
|
+
type FlexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
|
|
56
|
+
type FlexBasis = 'min-content';
|
|
57
|
+
type Display = 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'table' | 'inline-table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row-group' | 'table-row' | 'flow-root' | 'grid' | 'contents' | 'none';
|
|
58
|
+
type Overflow = 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
|
|
59
|
+
type Position = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
|
|
60
|
+
type ImageStyleProps = {
|
|
61
|
+
/**
|
|
62
|
+
* Determines how the image should be resized to fit its container.
|
|
63
|
+
*/
|
|
64
|
+
contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
|
|
65
|
+
};
|
|
66
|
+
interface BorderStyleProps {
|
|
67
|
+
/** Add a border radius to all corners of the box. */
|
|
68
|
+
borderRadius?: BorderRadius;
|
|
69
|
+
/** Add a border radius to top left corner of the box. */
|
|
70
|
+
borderTopStartRadius?: BorderRadius;
|
|
71
|
+
/** Add a border radius to top right corner of the box. */
|
|
72
|
+
borderTopEndRadius?: BorderRadius;
|
|
73
|
+
/** Add a border radius to bottom left corner of the box. */
|
|
74
|
+
borderBottomStartRadius?: BorderRadius;
|
|
75
|
+
/** Add a border radius to bottom right corner of the box. */
|
|
76
|
+
borderBottomEndRadius?: BorderRadius;
|
|
77
|
+
/** Adds a custom border color from the palette */
|
|
78
|
+
borderColor?: LineColor;
|
|
79
|
+
/** Start border color */
|
|
80
|
+
borderStartColor?: LineColor;
|
|
81
|
+
/** End border color */
|
|
82
|
+
borderEndColor?: LineColor;
|
|
83
|
+
/** Top border color */
|
|
84
|
+
borderTopColor?: LineColor;
|
|
85
|
+
/** Bottom border color */
|
|
86
|
+
borderBottomColor?: LineColor;
|
|
87
|
+
/** Shorthand property to the width of an element's border. */
|
|
88
|
+
borderWidth?: BorderWidthWithElevation;
|
|
89
|
+
/** Sets the width of the top and bottom border of an element. */
|
|
90
|
+
borderVerticalWidth?: BorderWidthWithElevation;
|
|
91
|
+
/** Sets the width of the start (left) and end (right) border of an element. */
|
|
92
|
+
borderHorizontalWidth?: BorderWidthWithElevation;
|
|
93
|
+
/** Sets the width of the start (left) border of an element. */
|
|
94
|
+
borderStartWidth?: BorderWidthWithElevation;
|
|
95
|
+
/** Sets the width of the end (right) border of an element. */
|
|
96
|
+
borderEndWidth?: BorderWidthWithElevation;
|
|
97
|
+
/** Sets the width of the top border of an element. */
|
|
98
|
+
borderTopWidth?: BorderWidthWithElevation;
|
|
99
|
+
/** Sets the width of the bottom border of an element. */
|
|
100
|
+
borderBottomWidth?: BorderWidthWithElevation;
|
|
101
|
+
}
|
|
102
|
+
interface NestedBorderRadiusStyleProps {
|
|
103
|
+
/**
|
|
104
|
+
* Apply nested border radius calculation to first/last children.
|
|
105
|
+
* Uses CSS custom properties to calculate appropriate nested radius based on borderRadius and spacing.
|
|
106
|
+
* @link https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners
|
|
107
|
+
*/
|
|
108
|
+
nestedBorderRadius?: boolean | 'first' | 'last';
|
|
109
|
+
/**
|
|
110
|
+
* Sets the --uds-nested-border-radius-size CSS variable used in nested border radius calculations.
|
|
111
|
+
* @default borderRadius prop, otherwise can be customized
|
|
112
|
+
*/
|
|
113
|
+
nestedBorderRadiusSize?: BorderRadius;
|
|
114
|
+
/**
|
|
115
|
+
* Sets the --uds-nested-border-radius-spacing CSS variable used in nested border radius calculations.
|
|
116
|
+
* @default spacing prop, otherwise can be customized
|
|
117
|
+
*/
|
|
118
|
+
nestedBorderRadiusSpacing?: SpacingAlias;
|
|
119
|
+
/**
|
|
120
|
+
* Sets the --uds-nested-border-radius-width CSS variable used in nested border radius calculations.
|
|
121
|
+
* @default borderWidth prop, otherwise can be customized
|
|
122
|
+
*/
|
|
123
|
+
nestedBorderRadiusWidth?: BorderWidthWithElevation;
|
|
124
|
+
}
|
|
125
|
+
interface ShadowStyleProps {
|
|
126
|
+
/** Sets the variant of the shadow. */
|
|
127
|
+
dropShadow?: ShadowVariantWithElevation;
|
|
128
|
+
/** Sets the variant of the inset shadow. */
|
|
129
|
+
insetShadow?: Exclude<ShadowVariant, ElevationAlias> | ShadowVariantInvert;
|
|
130
|
+
}
|
|
131
|
+
interface LayoutStyleProps {
|
|
132
|
+
/** Sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. */
|
|
133
|
+
display?: Display;
|
|
134
|
+
/** Shorthand property which sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction. */
|
|
135
|
+
overflow?: Overflow;
|
|
136
|
+
/** Sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. */
|
|
137
|
+
overflowX?: Overflow;
|
|
138
|
+
/** sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. */
|
|
139
|
+
overflowY?: Overflow;
|
|
140
|
+
/** Sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
|
|
141
|
+
position?: Position;
|
|
142
|
+
}
|
|
143
|
+
interface SpacingStyleProps {
|
|
144
|
+
/** Apply inner spacing on all sides. */
|
|
145
|
+
spacing?: SpacingAlias;
|
|
146
|
+
/** Apply inner spacing on the leading and trailing sides. */
|
|
147
|
+
spacingHorizontal?: SpacingAlias;
|
|
148
|
+
/** Apply inner spacing on the top and bottom sides. */
|
|
149
|
+
spacingVertical?: SpacingAlias;
|
|
150
|
+
/** Apply inner spacing on the bottom side. */
|
|
151
|
+
spacingBottom?: SpacingAlias;
|
|
152
|
+
/** Apply inner spacing on the trailing side. */
|
|
153
|
+
spacingEnd?: SpacingAlias;
|
|
154
|
+
/** Apply inner spacing on the leading side. */
|
|
155
|
+
spacingStart?: SpacingAlias;
|
|
156
|
+
/** Apply inner spacing on the top side. */
|
|
157
|
+
spacingTop?: SpacingAlias;
|
|
158
|
+
/** Apply negative outer spacing on all sides. */
|
|
159
|
+
offset?: SpacingAlias;
|
|
160
|
+
/** Apply negative outer spacing on the top and bottom sides. */
|
|
161
|
+
offsetVertical?: SpacingAlias;
|
|
162
|
+
/** Apply negative outer spacing on the leading and trailing sides. */
|
|
163
|
+
offsetHorizontal?: SpacingAlias;
|
|
164
|
+
/** Apply negative outer spacing on the bottom side. */
|
|
165
|
+
offsetBottom?: SpacingAlias;
|
|
166
|
+
/** Apply negative outer spacing on the trailing side. */
|
|
167
|
+
offsetEnd?: SpacingAlias;
|
|
168
|
+
/** Apply negative outer spacing on the leading side. */
|
|
169
|
+
offsetStart?: SpacingAlias;
|
|
170
|
+
/** Apply negative outer spacing on the top side. */
|
|
171
|
+
offsetTop?: SpacingAlias;
|
|
172
|
+
/** Control the horizontal gutters between grid and flexbox items. */
|
|
173
|
+
columnGap?: SpacingAlias;
|
|
174
|
+
/** Control the vertical gutters between grid and flexbox items. */
|
|
175
|
+
rowGap?: SpacingAlias;
|
|
176
|
+
}
|
|
177
|
+
interface FlexStyleProps {
|
|
178
|
+
/** Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. */
|
|
179
|
+
alignContent?: FlexAlignContent;
|
|
180
|
+
/** Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. */
|
|
181
|
+
alignItems?: FlexAlignItems;
|
|
182
|
+
/** Overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. */
|
|
183
|
+
alignSelf?: FlexAlignSelf;
|
|
184
|
+
/** Sets how a flex item will grow or shrink to fit the space available in its flex container. */
|
|
185
|
+
flex?: Flex;
|
|
186
|
+
/** Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */
|
|
187
|
+
flexDirection?: FlexDirection;
|
|
188
|
+
/** Sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's main size. */
|
|
189
|
+
flexGrow?: FlexGrow;
|
|
190
|
+
/** Sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. */
|
|
191
|
+
flexShrink?: FlexShrink;
|
|
192
|
+
/** Sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. */
|
|
193
|
+
flexWrap?: FlexWrap;
|
|
194
|
+
/** Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. */
|
|
195
|
+
justifyContent?: FlexJustifyContent;
|
|
196
|
+
/** Sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis */
|
|
197
|
+
flexBasis?: FlexBasis;
|
|
198
|
+
}
|
|
199
|
+
interface BackgroundStyleProps {
|
|
200
|
+
/** Sets the background color. */
|
|
201
|
+
backgroundColor?: BackgroundColor;
|
|
202
|
+
}
|
|
203
|
+
interface SizeStyleProps {
|
|
204
|
+
/** Sets the width of an element. */
|
|
205
|
+
width?: 'full' | 'fit' | 'screen';
|
|
206
|
+
/** Sets the height of an element. */
|
|
207
|
+
height?: 'full' | 'fit' | 'screen';
|
|
208
|
+
}
|
|
209
|
+
interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps, SizeStyleProps, ShadowStyleProps, NestedBorderRadiusStyleProps {
|
|
210
|
+
/**
|
|
211
|
+
* When asChild is set to true, the component's child will be cloned and passed
|
|
212
|
+
* the props and behavior required to make it functional.
|
|
213
|
+
*/
|
|
214
|
+
asChild?: boolean;
|
|
215
|
+
/**
|
|
216
|
+
* Customize tag name.
|
|
217
|
+
*/
|
|
218
|
+
as?: ElementType;
|
|
219
|
+
}
|
|
220
|
+
interface UniversalIconProps<Name = SvgIcon> {
|
|
221
|
+
/** Icon to render from the icons package. */
|
|
222
|
+
name: Name;
|
|
223
|
+
/** Size of the icon. */
|
|
224
|
+
size?: IconSize;
|
|
225
|
+
/** Variant for icon. Either fill or outline. */
|
|
226
|
+
variant?: IconVariant;
|
|
227
|
+
/** Color of the icon. */
|
|
228
|
+
color?: ForegroundColor;
|
|
229
|
+
}
|
|
230
|
+
type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
|
|
231
|
+
interface IconPropsWithSVGProps extends UniversalIconProps, SVGElementProps {}
|
|
232
|
+
type IconSlotRenderProps = Omit<IconPropsWithSVGProps, 'name'>;
|
|
233
|
+
/**
|
|
234
|
+
* We are changing the slot prop from ReactNode to ReactElement to avoid
|
|
235
|
+
* confusing and useless options like number and string, however,
|
|
236
|
+
* there are cases where folks are using null/undefined to dynamically opt-out
|
|
237
|
+
* of rendering the icon. We want to still allow that.
|
|
238
|
+
*/
|
|
239
|
+
type BackwardsCompatibleReactElement = null | undefined | ReactElement;
|
|
240
|
+
/**
|
|
241
|
+
* Used anywhere we offer an icon which can be customized.
|
|
242
|
+
*
|
|
243
|
+
* Passing an SvgIcon is the happy path.
|
|
244
|
+
*
|
|
245
|
+
* @example
|
|
246
|
+
* import { Calendar } from "@yahoo/uds-icons"
|
|
247
|
+
* <IconSlot icon={Calendar} />
|
|
248
|
+
*/
|
|
249
|
+
type UniversalIconSlot = SvgIcon | BackwardsCompatibleReactElement | ((iconProps: IconSlotRenderProps) => BackwardsCompatibleReactElement);
|
|
250
|
+
interface UniversalImageProps extends Omit<UniversalBoxProps, 'width' | 'height'>, ImageStyleProps {
|
|
251
|
+
/** The source URL of the image. */
|
|
252
|
+
src: string;
|
|
253
|
+
/** Provides fallback (alternate) text to display when the image specified by the Image element is not loaded. */
|
|
254
|
+
alt?: string;
|
|
255
|
+
/** Width of the image in px. */
|
|
256
|
+
width?: number;
|
|
257
|
+
/** Height of the image in pixel. */
|
|
258
|
+
height?: number;
|
|
259
|
+
}
|
|
260
|
+
interface UniversalInputProps<IconSlotType = UniversalIconSlot> {
|
|
261
|
+
/** Label text to associate with the input. */
|
|
262
|
+
label?: string | ReactNode | (() => ReactNode);
|
|
263
|
+
/** If true, the input is disabled and non-interactive. */
|
|
264
|
+
disabled?: boolean;
|
|
265
|
+
/** If true, the `label` is displayed as required and the input element is required. */
|
|
266
|
+
required?: boolean;
|
|
267
|
+
/** Description or error message */
|
|
268
|
+
helpText?: string | ReactNode | (() => ReactNode);
|
|
269
|
+
/** Helper text icon */
|
|
270
|
+
helperTextIcon?: IconSlotType;
|
|
271
|
+
/** If true, the input displays its error state styling, which includes styling the startIcon. */
|
|
272
|
+
hasError?: boolean;
|
|
273
|
+
/**
|
|
274
|
+
* The size of the input.
|
|
275
|
+
* @default 'md'
|
|
276
|
+
*/
|
|
277
|
+
size?: InputSize;
|
|
278
|
+
/** An icon to be displayed at the start of the input. */
|
|
279
|
+
startIcon?: IconSlotType;
|
|
280
|
+
/** An icon to be displayed at the end of the input. */
|
|
281
|
+
endIcon?: IconSlotType;
|
|
282
|
+
/** If true, forces reduced motion. Otherwise, respects the user's setting. */
|
|
283
|
+
reduceMotion?: boolean;
|
|
284
|
+
/** If true, the input is read-only. */
|
|
285
|
+
readOnly?: boolean;
|
|
286
|
+
/** The width the input should take up in its container. */
|
|
287
|
+
width?: UniversalBoxProps['width'];
|
|
288
|
+
}
|
|
289
|
+
type LinkVariant = 'primary' | 'secondary' | 'tertiary' | 'on-color';
|
|
290
|
+
type LinkTextVariant = TextVariantWithoutEmphasized;
|
|
291
|
+
interface UniversalLinkProps<IconSlotType = UniversalIconSlot> {
|
|
292
|
+
/** Text style */
|
|
293
|
+
textVariant?: LinkTextVariant;
|
|
294
|
+
/** The color style of the link. */
|
|
295
|
+
variant?: LinkVariant;
|
|
296
|
+
/** An icon to be displayed at the start of the component. */
|
|
297
|
+
startIcon?: IconSlotType;
|
|
298
|
+
/** An icon to be displayed at the end of the component. */
|
|
299
|
+
endIcon?: IconSlotType;
|
|
300
|
+
/** If true, forces an underline to always be shown for a11y purposes.
|
|
301
|
+
* @default false
|
|
302
|
+
*/
|
|
303
|
+
alwaysUnderline?: boolean;
|
|
304
|
+
}
|
|
305
|
+
type CheckboxValue = boolean | 'indeterminate';
|
|
306
|
+
type CheckboxVariant = 'primary' | 'secondary';
|
|
307
|
+
type CheckboxSize = 'sm' | 'md';
|
|
308
|
+
interface UniversalCheckboxProps {
|
|
309
|
+
/**
|
|
310
|
+
* Variant of the checkbox.
|
|
311
|
+
* @default 'primary'
|
|
312
|
+
*/
|
|
313
|
+
variant?: CheckboxVariant;
|
|
314
|
+
/**
|
|
315
|
+
* Size of the checkbox.
|
|
316
|
+
* @default 'md'
|
|
317
|
+
*/
|
|
318
|
+
size?: CheckboxSize;
|
|
319
|
+
/**
|
|
320
|
+
* The label of the checkbox. Can be a ReactNode for rich html labels.
|
|
321
|
+
* Will not be labelled if omitted. User MUST then use `aria-label` attribute,
|
|
322
|
+
* wrap in a `<label>` tag or `htmlFor` to add an external label for a11y.
|
|
323
|
+
*/
|
|
324
|
+
label?: string | ReactNode | (() => ReactNode);
|
|
325
|
+
/**
|
|
326
|
+
* Controlled value of the checkbox. Will be an uncontrolled input if not present.
|
|
327
|
+
*/
|
|
328
|
+
checked?: CheckboxValue;
|
|
329
|
+
/**
|
|
330
|
+
* If true, the checkbox displays its error state.
|
|
331
|
+
*/
|
|
332
|
+
hasError?: boolean;
|
|
333
|
+
/**
|
|
334
|
+
* Disables animations when true.
|
|
335
|
+
*/
|
|
336
|
+
reduceMotion?: boolean;
|
|
337
|
+
/**
|
|
338
|
+
* On which side of the input is the label displayed.
|
|
339
|
+
* @default 'start'
|
|
340
|
+
*/
|
|
341
|
+
labelPosition?: 'start' | 'end';
|
|
342
|
+
}
|
|
343
|
+
type RadioVariant = 'primary' | 'secondary';
|
|
344
|
+
type RadioSize = 'sm' | 'md';
|
|
345
|
+
interface UniversalRadioProps {
|
|
346
|
+
/**
|
|
347
|
+
* Variant of the radio.
|
|
348
|
+
* @default 'primary'
|
|
349
|
+
*/
|
|
350
|
+
variant?: RadioVariant;
|
|
351
|
+
/**
|
|
352
|
+
* Size of the radio.
|
|
353
|
+
* @default 'md'
|
|
354
|
+
*/
|
|
355
|
+
size?: RadioSize;
|
|
356
|
+
/**
|
|
357
|
+
* The label of the radio. Can be a ReactNode for rich html labels.
|
|
358
|
+
* Will not be labelled if omitted. User MUST then use `aria-label` attribute,
|
|
359
|
+
* wrap in a `<label>` tag or `htmlFor` to add an external label for a11y.
|
|
360
|
+
*/
|
|
361
|
+
label?: string | ReactNode | (() => ReactNode);
|
|
362
|
+
/**
|
|
363
|
+
* The value of the radio.
|
|
364
|
+
* @default ''
|
|
365
|
+
*/
|
|
366
|
+
value?: string;
|
|
367
|
+
/**
|
|
368
|
+
* Whether the radio is checked.
|
|
369
|
+
*/
|
|
370
|
+
checked?: boolean;
|
|
371
|
+
/**
|
|
372
|
+
* If true, the radio displays its error state.
|
|
373
|
+
*/
|
|
374
|
+
hasError?: boolean;
|
|
375
|
+
/**
|
|
376
|
+
* Disables animations when true.
|
|
377
|
+
*/
|
|
378
|
+
reduceMotion?: boolean;
|
|
379
|
+
/**
|
|
380
|
+
* On which side of the input is the label displayed.
|
|
381
|
+
* @default 'start'
|
|
382
|
+
*/
|
|
383
|
+
labelPosition?: 'start' | 'end';
|
|
384
|
+
}
|
|
385
|
+
type SwitchSize = 'sm' | 'md';
|
|
386
|
+
interface UniversalSwitchProps<IconSlotType = UniversalIconSlot> {
|
|
387
|
+
/**
|
|
388
|
+
* Size of the switch.
|
|
389
|
+
* @default 'md'
|
|
390
|
+
*/
|
|
391
|
+
size?: SwitchSize;
|
|
392
|
+
/**
|
|
393
|
+
* The label of the switch. Can be a ReactNode for rich html labels.
|
|
394
|
+
* Will not be labelled if omitted. User MUST then use `aria-label` attribute,
|
|
395
|
+
* wrap in a `<label>` tag or `htmlFor` to add an external label for a11y.
|
|
396
|
+
*/
|
|
397
|
+
label?: string | ReactNode | (() => ReactNode);
|
|
398
|
+
/**
|
|
399
|
+
* Controlled value of the switch. Will be an uncontrolled input if not present.
|
|
400
|
+
*/
|
|
401
|
+
isOn?: boolean;
|
|
402
|
+
/**
|
|
403
|
+
* Set the initial value to default when uncontrolled.
|
|
404
|
+
*/
|
|
405
|
+
defaultIsOn?: boolean;
|
|
406
|
+
/** An icon to be displayed on the on state of the input. */
|
|
407
|
+
onIcon?: IconSlotType;
|
|
408
|
+
/** An icon to be displayed on the off state of the input. */
|
|
409
|
+
offIcon?: IconSlotType;
|
|
410
|
+
/**
|
|
411
|
+
* Disables animations when true.
|
|
412
|
+
*/
|
|
413
|
+
reduceMotion?: boolean;
|
|
414
|
+
/**
|
|
415
|
+
* On which side of the input is the label displayed.
|
|
416
|
+
* @default 'start'
|
|
417
|
+
*/
|
|
418
|
+
labelPosition?: 'start' | 'end';
|
|
419
|
+
}
|
|
420
|
+
type ChipVariant = 'primary' | 'secondary' | 'brand' | 'brand-secondary';
|
|
421
|
+
type ChipSize = 'sm' | 'md';
|
|
422
|
+
type BadgeVariant = 'primary' | 'secondary' | 'brand' | 'brand-secondary' | 'alert' | 'alert-secondary' | 'positive' | 'positive-secondary' | 'warning' | 'warning-secondary' | 'info' | 'info-secondary';
|
|
423
|
+
type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
424
|
+
//#endregion
|
|
425
|
+
export { type AlwaysPaletteAlias, type AlwaysPaletteAliasWithPrefix, type BackgroundColor, type BackgroundPaletteAlias, type BackgroundStyleProps, type BadgeSize, type BadgeVariant, type BorderRadius, type BorderStyleProps, type BorderWidth, type BorderWidthWithElevation, type ButtonPalette, type ButtonSize, type ButtonVariant, type ButtonVariantFlat, type CheckboxSize, type CheckboxValue, type CheckboxVariant, type ChipSize, type ChipVariant, type Display, type ElevationAlias, type ElevationLevel, type Flex, type FlexAlignContent, type FlexAlignItems, type FlexAlignSelf, type FlexBasis, type FlexDirection, type FlexGrow, type FlexJustifyContent, type FlexShrink, type FlexStyleProps, type FlexWrap, type ForegroundColor, type ForegroundPaletteAlias, type IconButtonSize, type IconPropsWithSVGProps, type IconSlotRenderProps, type ImageStyleProps, type InputSize, type LayoutStyleProps, type LineColor, type LinePaletteAlias, type LinkTextVariant, type LinkVariant, type MotionConfig, type MotionSpringConfig, type MotionSpringConfigOptions, type MotionVariant, type MotionVariantSpeed, type MotionVariantValues, type Overflow, type Position, type RadioSize, type RadioVariant, type ShadowStyleProps, type ShadowVariant, type ShadowVariantInvert, type ShadowVariantWithElevation, type SharedPaletteAlias, type SpacingAlias, type SpacingStyleProps, type SwitchSize, type TShirtSize, type TShirtSizeCommon, type TextVariantTypography, type TextVariantUi, type TextVariantWithoutEmphasized, type UniversalBoxProps, type UniversalCheckboxProps, type UniversalIconProps, type UniversalIconSlot, type UniversalImageProps, type UniversalInputProps, type UniversalLinkProps, type UniversalRadioProps, type UniversalSwitchProps };
|
|
426
|
+
//# sourceMappingURL=types.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.cts","names":["UniversalTokensConfigAuto","deprecatedAlwaysPalette","newAlwaysPalette","MOTION_PREFIX","UDS_PREFIX","FONT_DECLARATIONS_MAP","ElementType","HTMLAttributes","PropsWithChildren","ReactElement","ReactNode","Ref","Spring","IntRange","IconSize","IconVariant","SvgIcon","MaxLengthArray","T","N","A","PaletteType","PaletteConfig","PaletteValue","Hue","HueStep","OpacityStep","Palette","key","SpectrumColor","SharedPrimaryPaletteAlias","SharedSecondaryPaletteAlias","SharedPaletteAlias","DeprecatedAccentAlias","Percentage","BackgroundPaletteAlias","BackgroundPalette","Record","ForegroundPaletteAlias","ForegroundPalette","LinePaletteAlias","LinePalette","ShadowPaletteAlias","ShadowPalette","AlwaysPaletteAliasWithPrefix","AlwaysPaletteAlias","ForegroundColor","LineColor","ElevationAlias","BackgroundColor","ShadowColor","PropertyToPaletteAliasMap","ShadowSpectrumColor","ShadowPaletteColor","ShadowAlwaysColor","ShadowColorConfig","ShadowOffset","SpacingAlias","Exclude","ShadowOpacity","ShadowSpreadRadius","ShadowPreset","ShadowVariant","ShadowVariantWithElevation","ShadowVariantInvert","ShadowVariantWithInvert","ShadowVariantConfig","ShadowType","ShadowTypeConfig","ShadowConfig","PixelsUnit","RemsUnit","UnitlessUnit","PercentageUnit","BreakpointValue","BreakpointsConfig","Breakpoint","BreakpointWithBase","TextVariantTypography","TextVariantUi","TextVariantWithoutEmphasized","TextVariant","FontAlias","FontType","FontID","FontDeclaration","FontFamilyCDNUrl","FontConfig","FontCssVar","FontWeightNumeric","FontWeightDescriptive","TextTransform","TextDecorationLine","LineClampAlias","LineHeight","FontSize","TextTransformConfig","FontSizeConfig","FontFamilyConfig","FontWeightConfig","FontSlantConfig","FontWidthConfig","LineHeightConfig","TextProperty","TypographyUnitValue","TypographyResponsiveProperty","TypographyStyleProperty","TypographyStyle","TypographyConfig","GlobalDefaultsConfig","TShirtSize","TShirtSizeCommon","Extract","AvatarSize","AvatarSizeConfig","AvatarShape","BorderRadius","IconSizeConfig","SpacingConfig","ElevationSurfaceColor","AlwaysPaletteColor","ElevationBackgroundFillColor","ElevationBorderColor","RGBColorValue","RGBAUnit","ElevationCustomShadows","RGBUnit","ElevationPreset","BorderWidth","ElevationLevel","ElevationConfig","ColorMode","BorderRadiusConfig","BorderWidthWithElevation","BorderWidthConfig","ColorModeConfig","ColorsConfig","SpectrumConfig","SpectrumValue","ScaleConfig","ScaleModeConfig","ScaleMode","ButtonSize","ButtonPalette","ButtonVariant","ScaleEffect","ButtonVariantFlat","ButtonSpectrumColor","ButtonPaletteColor","IconButtonSize","InputSize","UniversalTokensConfig","MotionConfig","UdsCssVar","PlatformMode","ColorModeForApp","ScaleModeForApp","HighContrastMode","RegionMode","Modes","Animation","TransitionDelay","TransitionDuration","TransitionTiming","MotionVariant","MotionVariantSpeed","MotionSpringConfigOptions","MotionSpringConfig","Pick","Required","MotionCssVar","MotionVariantValues","AriaAttribute","DataAttribute","Flex","FlexGrow","FlexShrink","FlexAlignContent","FlexAlignItems","FlexAlignSelf","FlexDirection","FlexWrap","FlexJustifyContent","FlexBasis","Display","Overflow","Position","ImageStyleProps","BorderStyleProps","NestedBorderRadiusStyleProps","ShadowStyleProps","LayoutStyleProps","SpacingStyleProps","FlexStyleProps","StateStyleProps","TextStyleProps","BackgroundStyleProps","CustomSizingStyleProps","SizeStyleProps","StyleProps","UniversalBoxProps","UniversalStackProps","Omit","UniversalTextProps","UniversalIconProps","Name","SVGElementProps","SVGSVGElement","React","IconPropsWithSVGProps","IconSlotRenderProps","BackwardsCompatibleReactElement","UniversalIconSlot","UniversalPressableProps","UniversalIconButtonProps","UniversalButtonProps","IconSlotType","UniversalImageProps","ImgElementProps","HTMLImageElement","ImgHTMLAttributes","ImagePropsWithImgProps","UniversalFormLabelProps","UniversalInputProps","DividerVariant","UniversalDividerProps","LinkVariant","LinkTextVariant","UniversalLinkProps","CheckboxValue","CheckboxVariant","CheckboxSize","UniversalCheckboxProps","RadioValue","RadioVariant","RadioSize","UniversalRadioProps","UniversalRadioGroupProps","SwitchSize","UniversalSwitchProps","ChipVariant","ChipSize","UniversalChipBaseProps","UniversalChipDismissibleProps","UniversalChipToggleProps","UniversalChipButtonProps","UniversalChipLinkProps","UniversalChipProps","HTMLAnchorElement","AnchorHTMLAttributes","BadgeVariant","BadgeSize","UniversalBadgeProps","AvatarVariant","AvatarAbbreviationStrategy","UniversalAvatarBaseProps","UniversalAvatarImageProps","UniversalAvatarTextProps","UniversalAvatarIconProps","UniversalAvatarProps","UniversalMenuItemProps","ConfigurableComponentName"],"sources":["../../../../../uds/dist/tokens/types.d.ts"],"sourcesContent":["\nimport { UniversalTokensConfigAuto } from \"../generated/universalTokensConfigAuto.js\";\nimport { deprecatedAlwaysPalette, newAlwaysPalette } from \"./configs/palette/alwaysPalette.js\";\nimport \"./configs/palette/index.js\";\nimport { MOTION_PREFIX, UDS_PREFIX } from \"./consts/cssTokens.js\";\nimport { FONT_DECLARATIONS_MAP } from \"./consts/fontDeclarationsMap.js\";\nimport { ElementType, HTMLAttributes, PropsWithChildren, ReactElement, ReactNode, Ref } from \"react\";\nimport { Spring } from \"motion/react\";\nimport { IntRange } from \"type-fest\";\nimport { IconSize, IconVariant, SvgIcon } from \"@yahoo/uds-icons/types\";\n\n//#region src/tokens/types.d.ts\n/** Ensure an array has a max length of N */\ntype MaxLengthArray<T, N extends number, A extends T[] = []> = A['length'] extends N ? A : T[] extends A ? T[] : A | MaxLengthArray<T, N, [...A, T]>;\ntype PaletteType = keyof PaletteConfig;\ntype PaletteValue = {\n hue: Hue;\n step: HueStep;\n opacity?: OpacityStep;\n};\ntype Palette = { [key in PaletteType]: keyof PaletteConfig[key] };\ntype Hue = 'gray' | 'purple' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'mint' | 'green' | 'lime' | 'citron' | 'yellow' | 'brown' | 'nude' | 'orange' | 'sunset' | 'red' | 'rose' | 'pink' | 'magenta' | 'carbon';\ntype HueStep = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15';\ntype SpectrumColor = `${Hue}-${HueStep}`;\ntype SharedPrimaryPaletteAlias = 'brand' | 'alert' | 'positive' | 'warning' | 'info';\ntype SharedSecondaryPaletteAlias = `${SharedPrimaryPaletteAlias}-secondary`;\ntype SharedPaletteAlias = SharedPrimaryPaletteAlias | SharedSecondaryPaletteAlias;\ntype DeprecatedAccentAlias = 'accent';\ntype OpacityStep = `${Percentage}`;\ntype BackgroundPaletteAlias = 'primary' | 'secondary' | DeprecatedAccentAlias | SharedPaletteAlias;\ntype BackgroundPalette = Record<BackgroundPaletteAlias, PaletteValue>;\ntype ForegroundPaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'on-color' | DeprecatedAccentAlias | SharedPaletteAlias;\ntype ForegroundPalette = Record<ForegroundPaletteAlias, PaletteValue>;\ntype LinePaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | DeprecatedAccentAlias | SharedPaletteAlias;\ntype LinePalette = Record<LinePaletteAlias, PaletteValue>;\ntype ShadowPaletteAlias = 'primary' | 'secondary';\ntype ShadowPalette = Record<ShadowPaletteAlias, PaletteValue>;\ntype AlwaysPaletteAliasWithPrefix = keyof typeof newAlwaysPalette;\ntype AlwaysPaletteAlias = keyof typeof deprecatedAlwaysPalette | AlwaysPaletteAliasWithPrefix;\ntype ForegroundColor = ForegroundPaletteAlias | AlwaysPaletteAlias;\ntype LineColor = LinePaletteAlias | AlwaysPaletteAlias | ElevationAlias;\ntype BackgroundColor = BackgroundPaletteAlias | AlwaysPaletteAlias | ElevationAlias;\ntype ShadowColor = ShadowPaletteAlias | SpectrumColor | AlwaysPaletteAlias | ElevationAlias;\ntype PropertyToPaletteAliasMap = {\n backgroundColor: BackgroundColor;\n borderColor: LineColor;\n color: ForegroundColor;\n};\ntype ShadowSpectrumColor = {\n type: 'spectrum';\n value: SpectrumColor;\n};\ntype ShadowPaletteColor = {\n type: 'palette';\n value: ShadowColor;\n};\ntype ShadowAlwaysColor = {\n type: 'always';\n value: AlwaysPaletteAlias;\n};\ntype ShadowColorConfig = ShadowPaletteColor | ShadowSpectrumColor | ShadowAlwaysColor;\ntype ShadowOffset = `-${Exclude<SpacingAlias, '0'>}` | SpacingAlias;\ntype ShadowOpacity = OpacityStep;\ntype ShadowSpreadRadius = `-${Exclude<SpacingAlias, '0'>}` | SpacingAlias;\ntype ShadowPreset = {\n offsetX: ShadowOffset;\n offsetY: ShadowOffset;\n blur: SpacingAlias;\n spread: ShadowSpreadRadius;\n color: ShadowColorConfig;\n opacity: ShadowOpacity;\n};\ntype ShadowVariant = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\ntype ShadowVariantWithElevation = ShadowVariant | ElevationAlias;\ntype ShadowVariantInvert = `${Exclude<ShadowVariant, 'none'>}-invert`;\ntype ShadowVariantWithInvert = ShadowVariant | ShadowVariantInvert;\ntype ShadowVariantConfig = MaxLengthArray<ShadowPreset, 3>;\ntype ShadowType = 'drop' | 'inset';\ntype ShadowTypeConfig = Record<ShadowVariant, ShadowVariantConfig>;\ntype ShadowConfig = {\n drop: Record<ShadowVariant, ShadowVariantConfig>;\n inset: Record<ShadowVariant | ShadowVariantInvert, ShadowVariantConfig>;\n};\ntype Percentage = IntRange<0, 101>;\ntype PixelsUnit = {\n value: number;\n type: 'px';\n};\ntype RemsUnit = {\n value: number;\n type: 'rem';\n};\ntype UnitlessUnit = {\n value: number;\n type: 'unitless';\n};\ntype PercentageUnit = {\n value: Percentage;\n type: 'percentage';\n};\ntype BreakpointValue = PixelsUnit;\ntype BreakpointsConfig = {\n sm: BreakpointValue;\n md: BreakpointValue;\n lg: BreakpointValue;\n xl: BreakpointValue;\n '2xl': BreakpointValue;\n};\ntype Breakpoint = keyof BreakpointsConfig;\ntype BreakpointWithBase = Breakpoint | 'base';\ntype TextVariantTypography = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'label3' | 'label4' | 'caption1' | 'caption2' | 'legal1';\ntype TextVariantUi = 'ui1' | 'ui2' | 'ui3' | 'ui4' | 'ui5' | 'ui6';\ntype TextVariantWithoutEmphasized = TextVariantTypography | TextVariantUi;\ntype TextVariant = TextVariantWithoutEmphasized | `${TextVariantWithoutEmphasized}/emphasized`;\ntype FontAlias = 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono';\ntype FontType = 'sans' | 'serif' | 'mono';\ntype FontID = keyof typeof FONT_DECLARATIONS_MAP;\ntype FontDeclaration = (typeof FONT_DECLARATIONS_MAP)[FontID]['declarations'][number];\ntype FontFamilyCDNUrl = FontDeclaration['src'];\ntype FontConfig = Record<FontAlias, FontID>;\ntype FontCssVar = `--${typeof UDS_PREFIX}-font-${FontAlias}`;\ntype FontWeightNumeric = `${IntRange<100, 901, 100>}`;\ntype FontWeightDescriptive = 'thin' | 'extralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';\ntype TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';\ntype TextDecorationLine = 'none' | 'underline';\ntype LineClampAlias = `${IntRange<1, 7>}`;\ntype LineHeight = number;\ntype FontSize = number;\ntype TextTransformConfig = Record<TextVariantWithoutEmphasized, TextTransform>;\ntype FontSizeConfig = Record<TextVariantWithoutEmphasized, FontSize>;\ntype FontFamilyConfig = Record<TextVariantWithoutEmphasized, FontAlias>;\ntype FontWeightConfig = Record<TextVariantWithoutEmphasized, number>;\ntype FontSlantConfig = Record<TextVariantWithoutEmphasized, number>;\ntype FontWidthConfig = Record<TextVariantWithoutEmphasized, number>;\ntype LineHeightConfig = Record<TextVariantWithoutEmphasized, LineHeight>;\ntype TextProperty = 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'textTransform' | 'letterSpacing';\n/**\n * Defines a structured CSS value, separating the raw value from its unit type.\n * 'unitless' is for unitless values like line-height or font-weight.\n */\ntype TypographyUnitValue = PixelsUnit | UnitlessUnit;\n/**\n * Defines the structure for a single, responsive CSS property.\n * The value can now be a simple string (for properties like fontFamily)\n * or a structured CssValue object (for properties like fontSize).\n */\ntype TypographyResponsiveProperty<T> = {\n /**\n * The base value for the property, applying from 0px up to the 'sm' breakpoint.\n */\n base: T;\n /**\n * Responsive overrides for each breakpoint. If this key is present, it must\n * contain a value for every defined breakpoint.\n */\n breakpoints: Record<Breakpoint, T>;\n};\ntype TypographyStyleProperty = keyof TypographyStyle;\ntype TypographyStyle = {\n fontFamily: TypographyResponsiveProperty<FontAlias>;\n textTransform: TypographyResponsiveProperty<TextTransform>;\n fontSize: TypographyResponsiveProperty<TypographyUnitValue>;\n fontWeight: TypographyResponsiveProperty<TypographyUnitValue>;\n lineHeight: TypographyResponsiveProperty<TypographyUnitValue>;\n fontSlant: TypographyResponsiveProperty<TypographyUnitValue>;\n fontWidth: TypographyResponsiveProperty<TypographyUnitValue>;\n letterSpacing: TypographyResponsiveProperty<PixelsUnit>;\n};\ntype TypographyConfig = Record<TextVariant, TypographyStyle>;\ntype GlobalDefaultsConfig = {\n breakpoint: Breakpoint | 'base';\n enableResponsiveType: boolean;\n};\ntype TShirtSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';\ntype TShirtSizeCommon = Extract<TShirtSize, 'sm' | 'md' | 'lg'>;\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\ntype AvatarSizeConfig = Record<AvatarSize, number>;\ntype AvatarShape = BorderRadius;\ntype IconSizeConfig = Record<IconSize, number>;\ntype SpacingAlias = '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';\ntype SpacingConfig = Record<SpacingAlias, number>;\ntype ElevationSurfaceColor = AlwaysPaletteColor<AlwaysPaletteAlias> | {\n type: 'spectrum';\n value: {\n hue: Hue;\n step: HueStep;\n };\n};\ntype ElevationBackgroundFillColor = {\n type: 'background';\n value: BackgroundPaletteAlias;\n} | ElevationSurfaceColor;\ntype ElevationBorderColor = {\n type: 'line';\n value: LinePaletteAlias;\n} | ElevationSurfaceColor;\ntype RGBColorValue = `${IntRange<0, 256>}`;\ntype RGBAUnit = {\n type: 'rgba';\n r: RGBColorValue;\n g: RGBColorValue;\n b: RGBColorValue;\n a: OpacityStep;\n};\ntype ElevationCustomShadows = [ShadowPreset, ShadowPreset, ShadowPreset, ShadowPreset];\ntype RGBUnit = {\n type: 'rgb';\n r: RGBColorValue;\n g: RGBColorValue;\n b: RGBColorValue;\n};\ntype ElevationPreset = {\n surfaceColor: ElevationSurfaceColor & {\n opacity: OpacityStep;\n };\n layerWithBackgroundFill: boolean;\n backgroundFill: ElevationBackgroundFillColor;\n backgroundBlurRadius: number;\n finalBackgroundValue: RGBAUnit;\n fallbackBlurredBackgroundValue: RGBUnit;\n borderColor: ElevationBorderColor;\n borderWidth: BorderWidth;\n dropShadow: ShadowVariant | ElevationCustomShadows;\n};\ntype ElevationLevel = '0' | '1' | '2' | '3' | '4' | '5';\ntype ElevationAlias = `elevation-${ElevationLevel}`;\ntype ElevationConfig = Record<ElevationLevel, Record<ColorMode, ElevationPreset>>;\ntype BorderRadius = TShirtSize;\ntype BorderRadiusConfig = Record<BorderRadius, number>;\ntype BorderWidth = 'none' | 'thin' | 'medium' | 'thick';\ntype BorderWidthWithElevation = BorderWidth | ElevationAlias;\ntype BorderWidthConfig = Record<BorderWidth, number>;\ntype ColorModeConfig = Record<ColorMode, ColorsConfig>;\ntype ColorsConfig = {\n palette: PaletteConfig;\n spectrum: SpectrumConfig;\n};\ntype SpectrumValue = Record<HueStep, string>;\ntype SpectrumConfig = Record<Hue, SpectrumValue>;\ntype PaletteConfig = {\n background: BackgroundPalette;\n foreground: ForegroundPalette;\n line: LinePalette;\n shadow: ShadowPalette;\n};\ntype ScaleConfig = {\n avatarSizes: AvatarSizeConfig;\n iconSizes: IconSizeConfig;\n borderRadius: BorderRadiusConfig;\n borderWidth: BorderWidthConfig;\n};\ntype ScaleModeConfig = Record<ScaleMode, ScaleConfig>;\ntype ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\ntype ButtonPalette = 'brand' | 'accent' | 'alert' | 'positive' | 'warning' | 'info';\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary';\ntype ScaleEffect = 'none' | 'up' | 'down';\ntype ButtonVariantFlat = ButtonVariant | `${Exclude<ButtonPalette, 'accent'>}` | `${Exclude<ButtonPalette, 'accent'>}-${Exclude<ButtonVariant, 'primary'>}`;\ntype ButtonSpectrumColor = {\n type: 'spectrum';\n value: SpectrumColor;\n};\ntype ButtonPaletteColor<T> = {\n type: 'palette';\n value: T;\n};\ntype AlwaysPaletteColor<T> = {\n type: 'always';\n value: T;\n};\ntype IconButtonSize = Extract<TShirtSize, 'xs' | TShirtSizeCommon | 'xl'>;\ntype InputSize = Extract<TShirtSizeCommon, 'md' | 'lg'>;\ninterface UniversalTokensConfig extends UniversalTokensConfigAuto {\n version: string;\n colorMode: ColorModeConfig;\n scaleMode: ScaleModeConfig;\n font: FontConfig;\n motion: MotionConfig;\n shadow: ShadowConfig;\n breakpoints: BreakpointsConfig;\n typography: TypographyConfig;\n elevation: ElevationConfig;\n globalDefaults: GlobalDefaultsConfig;\n}\ntype UdsCssVar = FontCssVar;\ntype PlatformMode = 'web' | 'ios' | 'android';\ntype ColorMode = 'light' | 'dark';\ntype ColorModeForApp = ColorMode | 'system';\ntype ScaleMode = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';\ntype ScaleModeForApp = ScaleMode | 'system';\ntype HighContrastMode = boolean;\ntype RegionMode = '🇺🇸 US' | '🇩🇪 DE' | '🇫🇷 FR' | '🇨🇳 CN';\ninterface Modes {\n colorMode: ColorMode;\n scaleMode: ScaleMode;\n}\ntype Animation = 'none' | 'spin' | 'ping' | 'pulse' | 'bounce';\ntype TransitionDelay = '0' | '75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000';\ntype TransitionDuration = '0' | '75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000';\ntype TransitionTiming = 'linear' | 'in' | 'out' | 'in-out';\ntype MotionVariant = 'damped' | 'smooth' | 'subtle' | 'bouncy' | 'veryBouncy';\ntype MotionVariantSpeed = '1' | '2' | '3' | '4';\ntype MotionSpringConfigOptions = 'damping' | 'stiffness';\ntype MotionSpringConfig = Required<Pick<Spring, MotionSpringConfigOptions>>;\ntype MotionCssVar = `--${typeof MOTION_PREFIX}-${MotionVariant}-${MotionVariantSpeed}-${keyof MotionSpringConfig}`;\ntype MotionVariantValues = { [key in MotionVariantSpeed]: MotionSpringConfig };\ntype MotionConfig = Record<MotionVariant, MotionVariantValues>;\ntype AriaAttribute = 'busy' | 'checked' | 'disabled' | 'expanded' | 'hidden' | 'pressed' | 'readonly' | 'required' | 'selected' | 'invalid';\ntype DataAttribute = 'active' | 'active-item' | 'autofill' | 'backdrop' | 'enter' | 'leave' | 'focus-visible';\ntype Flex = '1' | 'auto' | 'initial' | 'none';\ntype FlexGrow = '0' | '1' | '2' | '3';\ntype FlexShrink = '0' | '1';\ntype FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';\ntype FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';\ntype FlexAlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';\ntype FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\ntype FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';\ntype FlexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';\ntype FlexBasis = 'min-content';\ntype Display = 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'table' | 'inline-table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row-group' | 'table-row' | 'flow-root' | 'grid' | 'contents' | 'none';\ntype Overflow = 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';\ntype Position = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';\ntype ImageStyleProps = {\n /**\n * Determines how the image should be resized to fit its container.\n */\n contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\n};\ninterface BorderStyleProps {\n /** Add a border radius to all corners of the box. */\n borderRadius?: BorderRadius;\n /** Add a border radius to top left corner of the box. */\n borderTopStartRadius?: BorderRadius;\n /** Add a border radius to top right corner of the box. */\n borderTopEndRadius?: BorderRadius;\n /** Add a border radius to bottom left corner of the box. */\n borderBottomStartRadius?: BorderRadius;\n /** Add a border radius to bottom right corner of the box. */\n borderBottomEndRadius?: BorderRadius;\n /** Adds a custom border color from the palette */\n borderColor?: LineColor;\n /** Start border color */\n borderStartColor?: LineColor;\n /** End border color */\n borderEndColor?: LineColor;\n /** Top border color */\n borderTopColor?: LineColor;\n /** Bottom border color */\n borderBottomColor?: LineColor;\n /** Shorthand property to the width of an element's border. */\n borderWidth?: BorderWidthWithElevation;\n /** Sets the width of the top and bottom border of an element. */\n borderVerticalWidth?: BorderWidthWithElevation;\n /** Sets the width of the start (left) and end (right) border of an element. */\n borderHorizontalWidth?: BorderWidthWithElevation;\n /** Sets the width of the start (left) border of an element. */\n borderStartWidth?: BorderWidthWithElevation;\n /** Sets the width of the end (right) border of an element. */\n borderEndWidth?: BorderWidthWithElevation;\n /** Sets the width of the top border of an element. */\n borderTopWidth?: BorderWidthWithElevation;\n /** Sets the width of the bottom border of an element. */\n borderBottomWidth?: BorderWidthWithElevation;\n}\ninterface NestedBorderRadiusStyleProps {\n /**\n * Apply nested border radius calculation to first/last children.\n * Uses CSS custom properties to calculate appropriate nested radius based on borderRadius and spacing.\n * @link https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners\n */\n nestedBorderRadius?: boolean | 'first' | 'last';\n /**\n * Sets the --uds-nested-border-radius-size CSS variable used in nested border radius calculations.\n * @default borderRadius prop, otherwise can be customized\n */\n nestedBorderRadiusSize?: BorderRadius;\n /**\n * Sets the --uds-nested-border-radius-spacing CSS variable used in nested border radius calculations.\n * @default spacing prop, otherwise can be customized\n */\n nestedBorderRadiusSpacing?: SpacingAlias;\n /**\n * Sets the --uds-nested-border-radius-width CSS variable used in nested border radius calculations.\n * @default borderWidth prop, otherwise can be customized\n */\n nestedBorderRadiusWidth?: BorderWidthWithElevation;\n}\ninterface ShadowStyleProps {\n /** Sets the variant of the shadow. */\n dropShadow?: ShadowVariantWithElevation;\n /** Sets the variant of the inset shadow. */\n insetShadow?: Exclude<ShadowVariant, ElevationAlias> | ShadowVariantInvert;\n}\ninterface LayoutStyleProps {\n /** Sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. */\n display?: Display;\n /** Shorthand property which sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction. */\n overflow?: Overflow;\n /** Sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. */\n overflowX?: Overflow;\n /** sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property. */\n overflowY?: Overflow;\n /** Sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */\n position?: Position;\n}\ninterface SpacingStyleProps {\n /** Apply inner spacing on all sides. */\n spacing?: SpacingAlias;\n /** Apply inner spacing on the leading and trailing sides. */\n spacingHorizontal?: SpacingAlias;\n /** Apply inner spacing on the top and bottom sides. */\n spacingVertical?: SpacingAlias;\n /** Apply inner spacing on the bottom side. */\n spacingBottom?: SpacingAlias;\n /** Apply inner spacing on the trailing side. */\n spacingEnd?: SpacingAlias;\n /** Apply inner spacing on the leading side. */\n spacingStart?: SpacingAlias;\n /** Apply inner spacing on the top side. */\n spacingTop?: SpacingAlias;\n /** Apply negative outer spacing on all sides. */\n offset?: SpacingAlias;\n /** Apply negative outer spacing on the top and bottom sides. */\n offsetVertical?: SpacingAlias;\n /** Apply negative outer spacing on the leading and trailing sides. */\n offsetHorizontal?: SpacingAlias;\n /** Apply negative outer spacing on the bottom side. */\n offsetBottom?: SpacingAlias;\n /** Apply negative outer spacing on the trailing side. */\n offsetEnd?: SpacingAlias;\n /** Apply negative outer spacing on the leading side. */\n offsetStart?: SpacingAlias;\n /** Apply negative outer spacing on the top side. */\n offsetTop?: SpacingAlias;\n /** Control the horizontal gutters between grid and flexbox items. */\n columnGap?: SpacingAlias;\n /** Control the vertical gutters between grid and flexbox items. */\n rowGap?: SpacingAlias;\n}\ninterface FlexStyleProps {\n /** Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. */\n alignContent?: FlexAlignContent;\n /** Sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. */\n alignItems?: FlexAlignItems;\n /** Overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. */\n alignSelf?: FlexAlignSelf;\n /** Sets how a flex item will grow or shrink to fit the space available in its flex container. */\n flex?: Flex;\n /** Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */\n flexDirection?: FlexDirection;\n /** Sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's main size. */\n flexGrow?: FlexGrow;\n /** Sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. */\n flexShrink?: FlexShrink;\n /** Sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. */\n flexWrap?: FlexWrap;\n /** Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. */\n justifyContent?: FlexJustifyContent;\n /** Sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis */\n flexBasis?: FlexBasis;\n}\ninterface StateStyleProps {\n interactable?: boolean;\n focusable?: boolean;\n}\ninterface TextStyleProps {\n /** Color of a Text or Icon element */\n color?: ForegroundColor;\n /** Color of placeholder text */\n placeholderColor?: ForegroundColor;\n /** Font family for the text */\n fontFamily?: TextVariant | FontAlias;\n /** Font size of the text */\n fontSize?: TextVariant;\n /** Letter spacing of the text */\n letterSpacing?: TextVariant;\n /**\n * Font weight of the text\n *\n * @deprecated Consider using an `emphasized` text variant instead. For example: `display1/emphasized`\n */\n fontWeight?: TextVariant | FontWeightDescriptive;\n /** Line height of the text */\n lineHeight?: TextVariant;\n /** Text alignment of the text */\n textAlign?: 'center' | 'justify' | 'start' | 'end';\n /** Sets the text transform for the text */\n textTransform?: TextVariant | TextTransform;\n}\ninterface BackgroundStyleProps {\n /** Sets the background color. */\n backgroundColor?: BackgroundColor;\n}\ntype CustomSizingStyleProps = {\n iconSize?: IconSize;\n avatarSize?: AvatarSize;\n};\ninterface SizeStyleProps {\n /** Sets the width of an element. */\n width?: 'full' | 'fit' | 'screen';\n /** Sets the height of an element. */\n height?: 'full' | 'fit' | 'screen';\n}\ntype StyleProps = BackgroundStyleProps & BorderStyleProps & LayoutStyleProps & FlexStyleProps & SpacingStyleProps & TextStyleProps & ImageStyleProps & CustomSizingStyleProps & ShadowStyleProps & SizeStyleProps & NestedBorderRadiusStyleProps;\ninterface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps, SizeStyleProps, ShadowStyleProps, NestedBorderRadiusStyleProps {\n /**\n * When asChild is set to true, the component's child will be cloned and passed\n * the props and behavior required to make it functional.\n */\n asChild?: boolean;\n /**\n * Customize tag name.\n */\n as?: ElementType;\n}\ninterface UniversalStackProps extends Omit<UniversalBoxProps, 'flexDirection'> {\n gap?: SpacingAlias;\n separator?: ReactNode | ((index: number) => ReactNode);\n}\ninterface UniversalTextProps extends PropsWithChildren, TextStyleProps, UniversalBoxProps {\n /** Style of text. */\n variant?: TextVariant;\n /** Color of the text. */\n color?: ForegroundColor;\n}\ninterface UniversalIconProps<Name = SvgIcon> {\n /** Icon to render from the icons package. */\n name: Name;\n /** Size of the icon. */\n size?: IconSize;\n /** Variant for icon. Either fill or outline. */\n variant?: IconVariant;\n /** Color of the icon. */\n color?: ForegroundColor;\n}\ntype SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;\ninterface IconPropsWithSVGProps extends UniversalIconProps, SVGElementProps {}\ntype IconSlotRenderProps = Omit<IconPropsWithSVGProps, 'name'>;\n/**\n * We are changing the slot prop from ReactNode to ReactElement to avoid\n * confusing and useless options like number and string, however,\n * there are cases where folks are using null/undefined to dynamically opt-out\n * of rendering the icon. We want to still allow that.\n */\ntype BackwardsCompatibleReactElement = null | undefined | ReactElement;\n/**\n * Used anywhere we offer an icon which can be customized.\n *\n * Passing an SvgIcon is the happy path.\n *\n * @example\n * import { Calendar } from \"@yahoo/uds-icons\"\n * <IconSlot icon={Calendar} />\n */\ntype UniversalIconSlot = SvgIcon | BackwardsCompatibleReactElement | ((iconProps: IconSlotRenderProps) => BackwardsCompatibleReactElement);\ninterface UniversalPressableProps extends Omit<UniversalBoxProps, 'as'> {\n onPress?: () => void;\n}\ninterface UniversalIconButtonProps {\n /**\n * The variant of the button\n * @default is assigned in the configurator\n */\n variant?: ButtonVariantFlat;\n /** The size of the button. */\n size?: IconButtonSize;\n /** The icon variant\n * @default 'outline'\n */\n iconVariant?: IconVariant;\n /** Icon to render from the icons package. */\n name: SvgIcon;\n /** Allows setting the HTML `name` attribute on `button` because we are using `name` for an `SVGIcon` instead. */\n htmlName?: string;\n /** Render the button with a loading state. */\n loading?: boolean;\n /** Disable any motion effects configured in the configurator */\n disableEffects?: boolean;\n}\ninterface UniversalButtonProps<IconSlotType = UniversalIconSlot> extends Pick<SizeStyleProps, 'width'> {\n /**\n * The variant of the button\n * @default is assigned in the configurator\n */\n variant?: ButtonVariantFlat;\n /**\n * The size of the button\n * @default is assigned in the configurator\n */\n size?: ButtonSize;\n /** The icon variant for start and end icons\n * @default 'outline'\n */\n iconVariant?: IconVariant;\n /** The icon to render at the start of the button. Can be a UDS icon, an Icon component, ReactNode, or a function that returns a ReactNode. */\n startIcon?: IconSlotType;\n /** The icon to render at the end of the button. Can be a UDS icon, an Icon component, ReactNode, or a function that returns a ReactNode. */\n endIcon?: IconSlotType;\n /** Render the button with a loading state. */\n loading?: boolean;\n /** Disable any motion effects configured in the configurator */\n disableEffects?: boolean;\n /**\n * When asChild is set to true, the component's child will be cloned and passed\n * the props and behavior required to make it functional.\n */\n asChild?: boolean;\n}\ninterface UniversalImageProps extends Omit<UniversalBoxProps, 'width' | 'height'>, ImageStyleProps {\n /** The source URL of the image. */\n src: string;\n /** Provides fallback (alternate) text to display when the image specified by the Image element is not loaded. */\n alt?: string;\n /** Width of the image in px. */\n width?: number;\n /** Height of the image in pixel. */\n height?: number;\n}\ntype ImgElementProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'size' | 'color' | 'height' | 'width' | 'alt' | 'src'>;\ninterface ImagePropsWithImgProps extends UniversalImageProps, ImgElementProps {}\ninterface UniversalFormLabelProps extends Omit<UniversalTextProps, 'variant' | 'color'> {\n /**\n * Customize tag name.\n */\n as?: ElementType;\n /** The style of text. @default 'label2' */\n variant?: UniversalTextProps['variant'] | 'inherit';\n /** If true, renders a red asterisk to indicate the field is required. */\n required?: boolean;\n /**\n * Sets the color of the label text.\n * @default muted\n */\n color?: ForegroundColor | 'inherit';\n /** If true, the required * is styled with an alert color if the input is required. */\n hasError?: boolean;\n /** Whether to show an asterisk on required labels. @default false */\n showRequiredAsterisk?: boolean;\n /** The contents of the label. If missing, uses children. **/\n label?: string | ReactNode | (() => ReactNode);\n}\ninterface UniversalInputProps<IconSlotType = UniversalIconSlot> {\n /** Label text to associate with the input. */\n label?: string | ReactNode | (() => ReactNode);\n /** If true, the input is disabled and non-interactive. */\n disabled?: boolean;\n /** If true, the `label` is displayed as required and the input element is required. */\n required?: boolean;\n /** Description or error message */\n helpText?: string | ReactNode | (() => ReactNode);\n /** Helper text icon */\n helperTextIcon?: IconSlotType;\n /** If true, the input displays its error state styling, which includes styling the startIcon. */\n hasError?: boolean;\n /**\n * The size of the input.\n * @default 'md'\n */\n size?: InputSize;\n /** An icon to be displayed at the start of the input. */\n startIcon?: IconSlotType;\n /** An icon to be displayed at the end of the input. */\n endIcon?: IconSlotType;\n /** If true, forces reduced motion. Otherwise, respects the user's setting. */\n reduceMotion?: boolean;\n /** If true, the input is read-only. */\n readOnly?: boolean;\n /** The width the input should take up in its container. */\n width?: UniversalBoxProps['width'];\n}\ntype DividerVariant = 'primary' | 'secondary' | 'tertiary' | 'muted';\ninterface UniversalDividerProps {\n /**\n * Use a pre-defined variant.\n * @default 'primary'\n */\n variant?: DividerVariant;\n /**\n * Set to true to scale the divider vertically.\n */\n vertical?: boolean;\n /** When there are children, where are they placed?\n * @default 'center'\n */\n contentPosition?: 'start' | 'center' | 'end';\n}\ntype LinkVariant = 'primary' | 'secondary' | 'tertiary' | 'on-color';\ntype LinkTextVariant = TextVariantWithoutEmphasized;\ninterface UniversalLinkProps<IconSlotType = UniversalIconSlot> {\n /** Text style */\n textVariant?: LinkTextVariant;\n /** The color style of the link. */\n variant?: LinkVariant;\n /** An icon to be displayed at the start of the component. */\n startIcon?: IconSlotType;\n /** An icon to be displayed at the end of the component. */\n endIcon?: IconSlotType;\n /** If true, forces an underline to always be shown for a11y purposes.\n * @default false\n */\n alwaysUnderline?: boolean;\n}\ntype CheckboxValue = boolean | 'indeterminate';\ntype CheckboxVariant = 'primary' | 'secondary';\ntype CheckboxSize = 'sm' | 'md';\ninterface UniversalCheckboxProps {\n /**\n * Variant of the checkbox.\n * @default 'primary'\n */\n variant?: CheckboxVariant;\n /**\n * Size of the checkbox.\n * @default 'md'\n */\n size?: CheckboxSize;\n /**\n * The label of the checkbox. Can be a ReactNode for rich html labels.\n * Will not be labelled if omitted. User MUST then use `aria-label` attribute,\n * wrap in a `<label>` tag or `htmlFor` to add an external label for a11y.\n */\n label?: string | ReactNode | (() => ReactNode);\n /**\n * Controlled value of the checkbox. Will be an uncontrolled input if not present.\n */\n checked?: CheckboxValue;\n /**\n * If true, the checkbox displays its error state.\n */\n hasError?: boolean;\n /**\n * Disables animations when true.\n */\n reduceMotion?: boolean;\n /**\n * On which side of the input is the label displayed.\n * @default 'start'\n */\n labelPosition?: 'start' | 'end';\n}\ntype RadioValue = boolean;\ntype RadioVariant = 'primary' | 'secondary';\ntype RadioSize = 'sm' | 'md';\ninterface UniversalRadioProps {\n /**\n * Variant of the radio.\n * @default 'primary'\n */\n variant?: RadioVariant;\n /**\n * Size of the radio.\n * @default 'md'\n */\n size?: RadioSize;\n /**\n * The label of the radio. Can be a ReactNode for rich html labels.\n * Will not be labelled if omitted. User MUST then use `aria-label` attribute,\n * wrap in a `<label>` tag or `htmlFor` to add an external label for a11y.\n */\n label?: string | ReactNode | (() => ReactNode);\n /**\n * The value of the radio.\n * @default ''\n */\n value?: string;\n /**\n * Whether the radio is checked.\n */\n checked?: boolean;\n /**\n * If true, the radio displays its error state.\n */\n hasError?: boolean;\n /**\n * Disables animations when true.\n */\n reduceMotion?: boolean;\n /**\n * On which side of the input is the label displayed.\n * @default 'start'\n */\n labelPosition?: 'start' | 'end';\n}\ninterface UniversalRadioGroupProps {\n /**\n * The name used for all radio inputs in the group.\n */\n name?: string;\n /**\n * The value of the selected radio item.\n */\n value?: string;\n /**\n * The default value of the selected radio item for uncontrolled radio groups.\n */\n defaultValue?: string;\n /** Callback when the user interacts to select a different radio item. */\n onChange?: (value: string | undefined) => void;\n /**\n * When asChild is set to true, the component's child will be cloned and passed\n * the props and behavior required to make it functional.\n */\n asChild?: boolean;\n}\ntype SwitchSize = 'sm' | 'md';\ninterface UniversalSwitchProps<IconSlotType = UniversalIconSlot> {\n /**\n * Size of the switch.\n * @default 'md'\n */\n size?: SwitchSize;\n /**\n * The label of the switch. Can be a ReactNode for rich html labels.\n * Will not be labelled if omitted. User MUST then use `aria-label` attribute,\n * wrap in a `<label>` tag or `htmlFor` to add an external label for a11y.\n */\n label?: string | ReactNode | (() => ReactNode);\n /**\n * Controlled value of the switch. Will be an uncontrolled input if not present.\n */\n isOn?: boolean;\n /**\n * Set the initial value to default when uncontrolled.\n */\n defaultIsOn?: boolean;\n /** An icon to be displayed on the on state of the input. */\n onIcon?: IconSlotType;\n /** An icon to be displayed on the off state of the input. */\n offIcon?: IconSlotType;\n /**\n * Disables animations when true.\n */\n reduceMotion?: boolean;\n /**\n * On which side of the input is the label displayed.\n * @default 'start'\n */\n labelPosition?: 'start' | 'end';\n}\ntype ChipVariant = 'primary' | 'secondary' | 'brand' | 'brand-secondary';\ntype ChipSize = 'sm' | 'md';\ninterface UniversalChipBaseProps<IconSlotType = UniversalIconSlot> extends PropsWithChildren {\n /**\n * Controls the foreground and background contrast.\n * @default \"primary\"\n */\n variant?: ChipVariant;\n /**\n * Adjusts padding and font size.\n * @default \"md\"\n */\n size?: ChipSize;\n /**\n * Optional icon displayed at the start of the chip.\n */\n startIcon?: IconSlotType;\n /**\n * Optional icon displayed at the end of the chip.\n */\n endIcon?: IconSlotType;\n /**\n * Optional minimum width of the chip before label is truncated.\n */\n minWidth?: number;\n /**\n * Maximum width of the chip before label is truncated.\n */\n maxWidth?: number;\n /**\n * Customize tag name.\n */\n as?: ElementType;\n /** If true, forces reduced motion. Otherwise, respects the user's setting. */\n reduceMotion?: boolean;\n /** Whether the chip is disabled. @default false */\n disabled?: boolean;\n}\ninterface UniversalChipDismissibleProps<IconSlotType = UniversalIconSlot> extends Omit<UniversalChipBaseProps, 'endIcon' | 'asChild' | 'layerClassNames'> {\n /**\n * Handler for dismiss action (e.g., closing the chip).\n */\n onDismiss?: () => void;\n /**\n * Provide an accessible label for the dismiss button.\n */\n dismissButtonAriaLabel?: string;\n /**\n * Custom icon to use for the dismiss button.\n */\n dismissIcon?: IconSlotType;\n}\ninterface UniversalChipToggleProps extends Omit<UniversalChipBaseProps, 'asChild' | 'layerClassNames'> {\n isToggled?: boolean;\n /**\n * Handler for toggle action.\n */\n onToggle?: (isToggled: boolean) => void;\n}\ntype UniversalChipButtonProps = Omit<UniversalChipToggleProps, 'isToggled' | 'onToggle' | 'asChild'>;\ninterface UniversalChipLinkProps extends Omit<UniversalChipBaseProps, 'layerClassNames'> {\n href?: string;\n}\ninterface UniversalChipProps extends UniversalChipToggleProps, UniversalChipLinkProps, UniversalChipButtonProps, UniversalChipDismissibleProps {\n linkProps?: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;\n}\ntype BadgeVariant = 'primary' | 'secondary' | 'brand' | 'brand-secondary' | 'alert' | 'alert-secondary' | 'positive' | 'positive-secondary' | 'warning' | 'warning-secondary' | 'info' | 'info-secondary';\ntype BadgeSize = 'xs' | 'sm' | 'md' | 'lg';\ninterface UniversalBadgeProps<IconSlotType = UniversalIconSlot> extends PropsWithChildren {\n /**\n * Customize tag name.\n */\n as?: ElementType;\n /**\n * Controls the foreground and background contrast.\n * @default \"primary\"\n */\n variant?: BadgeVariant;\n /**\n * Adjusts padding and font size.\n * @default \"md\"\n */\n size?: BadgeSize;\n /**\n * CSS color override of the background. Defaults to variant definition.\n */\n backgroundColor?: string;\n /**\n * CSS color override of the text. Defaults to variant definition.\n */\n color?: string;\n /**\n * CSS color override of the icon. Defaults to variant definition.\n */\n iconColor?: string;\n /**\n * CSS color override of the border. Defaults to variant definition.\n */\n borderColor?: string;\n /**\n * Optional icon displayed at the start of the badge.\n */\n startIcon?: IconSlotType;\n /**\n * Optional icon displayed at the end of the badge.\n */\n endIcon?: IconSlotType;\n /**\n * Optional minium width of the badge.\n */\n minWidth?: number;\n /**\n * Maximum width of the badge before label is truncated.\n */\n maxWidth?: number | 'full';\n}\ntype AvatarVariant = 'primary' | 'secondary';\ntype AvatarAbbreviationStrategy = 'first' | 'last' | 'firstAndLast' | 'firstTwo' | 'firstThree' | 'firstOfEach' | ((name: string) => string);\n/** Props common to all Avatar variants */\ninterface UniversalAvatarBaseProps {\n /** Avatar size key. @default \"md\" */\n size?: AvatarSize;\n /** Avatar variant. @default \"primary\" */\n variant?: 'primary' | 'secondary';\n /** Custom size in pixels */\n customSize?: number;\n /** Abbreviation strategy for text variant. @default \"firstAndLast\" */\n abbreviationStrategy?: AvatarAbbreviationStrategy;\n /** Alt text for the image */\n alt?: string;\n /** Custom class name */\n className?: string;\n}\n/** Props for Avatar image variant */\ninterface UniversalAvatarImageProps extends UniversalAvatarBaseProps {\n /** Source URL for the image */\n src: string;\n /** Optional srcSet for responsive images */\n srcSet?: string;\n /**\n * Additional properties for the img element,\n * excluding controlled attributes.\n * @deprecated Use slotProps.image instead\n */\n imageProps?: Omit<ImagePropsWithImgProps, 'src' | 'srcSet' | 'alt' | 'className' | 'height' | 'width'>;\n /** Fallback text if image fails to load */\n fallback?: string;\n}\n/** Props for Avatar text variant */\ninterface UniversalAvatarTextProps extends UniversalAvatarBaseProps {\n /** Name for generating initials */\n name?: string;\n /** Predefined initials */\n initials?: string;\n}\n/** Props for Avatar icon variant */\ninterface UniversalAvatarIconProps<IconSlotType = UniversalIconSlot> extends Omit<UniversalAvatarBaseProps, 'abbreviationStrategy'> {\n /** Optional icon override */\n icon?: IconSlotType;\n}\n/** Combined Avatar component props */\ntype UniversalAvatarProps = UniversalAvatarImageProps;\ninterface UniversalMenuItemProps<IconSlotType = UniversalIconSlot> extends Omit<UniversalPressableProps, 'asChild'>, PropsWithChildren {\n /** The icon to show at the end */\n endIcon?: IconSlotType;\n /** The icon to show at the start */\n startIcon?: IconSlotType;\n /**\n * The variant of text to use.\n * @default label2 (label1 if checked)\n */\n textVariant?: TextVariant;\n /** HTML name attribute */\n name?: string;\n /** Whether the item is in a checked/active state */\n active?: boolean;\n /** Whether the item is disabled */\n disabled?: boolean;\n /** Slots to customize the rendering */\n slots?: {\n root?: (props: HTMLAttributes<any> & {\n ref?: Ref<any>;\n }) => ReactNode;\n };\n}\ntype ConfigurableComponentName = keyof UniversalTokensConfigAuto;\n//#endregion\nexport { type AlwaysPaletteAlias, type AlwaysPaletteAliasWithPrefix, type AlwaysPaletteColor, type Animation, type AriaAttribute, type AvatarAbbreviationStrategy, type AvatarShape, type AvatarSize, type AvatarSizeConfig, type AvatarVariant, type BackgroundColor, type BackgroundPalette, type BackgroundPaletteAlias, type BackgroundStyleProps, type BadgeSize, type BadgeVariant, type BorderRadius, type BorderRadiusConfig, type BorderStyleProps, type BorderWidth, type BorderWidthConfig, type BorderWidthWithElevation, type Breakpoint, type BreakpointWithBase, type BreakpointsConfig, type ButtonPalette, type ButtonPaletteColor, type ButtonSize, type ButtonSpectrumColor, type ButtonVariant, type ButtonVariantFlat, type CheckboxSize, type CheckboxValue, type CheckboxVariant, type ChipSize, type ChipVariant, type ColorMode, type ColorModeConfig, type ColorModeForApp, type ColorsConfig, type ConfigurableComponentName, type CustomSizingStyleProps, type DataAttribute, type Display, type DividerVariant, type ElevationAlias, type ElevationConfig, type ElevationCustomShadows, type ElevationLevel, type ElevationPreset, type Flex, type FlexAlignContent, type FlexAlignItems, type FlexAlignSelf, type FlexBasis, type FlexDirection, type FlexGrow, type FlexJustifyContent, type FlexShrink, type FlexStyleProps, type FlexWrap, type FontAlias, type FontConfig, type FontCssVar, type FontFamilyCDNUrl, type FontFamilyConfig, type FontID, type FontSize, type FontSizeConfig, type FontSlantConfig, type FontType, type FontWeightConfig, type FontWeightDescriptive, type FontWeightNumeric, type FontWidthConfig, type ForegroundColor, type ForegroundPalette, type ForegroundPaletteAlias, type GlobalDefaultsConfig, type HighContrastMode, type Hue, type HueStep, type IconButtonSize, type IconPropsWithSVGProps, type IconSize, type IconSizeConfig, type IconSlotRenderProps, type IconVariant, type ImagePropsWithImgProps, type ImageStyleProps, type InputSize, type LayoutStyleProps, type LineClampAlias, type LineColor, type LineHeight, type LineHeightConfig, type LinePalette, type LinePaletteAlias, type LinkTextVariant, type LinkVariant, type Modes, type MotionConfig, type MotionCssVar, type MotionSpringConfig, type MotionSpringConfigOptions, type MotionVariant, type MotionVariantSpeed, type MotionVariantValues, type OpacityStep, type Overflow, type Palette, type PaletteConfig, type PaletteType, type PaletteValue, type Percentage, type PercentageUnit, type PixelsUnit, type PlatformMode, type Position, type PropertyToPaletteAliasMap, type RGBAUnit, type RGBColorValue, type RadioSize, type RadioValue, type RadioVariant, type RegionMode, type RemsUnit, type ScaleConfig, type ScaleEffect, type ScaleMode, type ScaleModeConfig, type ScaleModeForApp, type ShadowColor, type ShadowColorConfig, type ShadowConfig, type ShadowOffset, type ShadowOpacity, type ShadowPalette, type ShadowPaletteAlias, type ShadowPreset, type ShadowSpreadRadius, type ShadowStyleProps, type ShadowType, type ShadowTypeConfig, type ShadowVariant, type ShadowVariantConfig, type ShadowVariantInvert, type ShadowVariantWithElevation, type ShadowVariantWithInvert, type SharedPaletteAlias, type SpacingAlias, type SpacingConfig, type SpacingStyleProps, type SpectrumColor, type SpectrumConfig, type StateStyleProps, type StyleProps, type SwitchSize, type TShirtSize, type TShirtSizeCommon, type TextDecorationLine, type TextProperty, type TextStyleProps, type TextTransform, type TextTransformConfig, type TextVariant, type TextVariantTypography, type TextVariantUi, type TextVariantWithoutEmphasized, type TransitionDelay, type TransitionDuration, type TransitionTiming, type TypographyConfig, type TypographyResponsiveProperty, type TypographyStyle, type TypographyStyleProperty, type TypographyUnitValue, type UdsCssVar, type UnitlessUnit, type UniversalAvatarIconProps, type UniversalAvatarImageProps, type UniversalAvatarProps, type UniversalAvatarTextProps, type UniversalBadgeProps, type UniversalBoxProps, type UniversalButtonProps, type UniversalCheckboxProps, type UniversalChipBaseProps, type UniversalChipButtonProps, type UniversalChipDismissibleProps, type UniversalChipLinkProps, type UniversalChipProps, type UniversalChipToggleProps, type UniversalDividerProps, type UniversalFormLabelProps, type UniversalIconButtonProps, type UniversalIconProps, type UniversalIconSlot, type UniversalImageProps, type UniversalInputProps, type UniversalLinkProps, type UniversalMenuItemProps, type UniversalPressableProps, type UniversalRadioGroupProps, type UniversalRadioProps, type UniversalStackProps, type UniversalSwitchProps, type UniversalTextProps, type UniversalTokensConfig, type UniversalTokensConfigAuto };"],"mappings":"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"}
|