@yahoo/uds 2.11.0 → 3.0.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/cli/ButtonFile2.mock.tsx +11 -0
- package/cli/bin/uds-darwin-arm64-baseline +0 -0
- package/cli/bin/uds-linux-arm64 +0 -0
- package/cli/bin/uds-linux-x64-baseline +0 -0
- package/cli/cli.ts +1 -1
- package/cli/codemods/addCommentAboveComponents.ts +9 -3
- package/cli/codemods/flattenButtonVariant.ts +143 -0
- package/cli/codemods/utils/index.ts +1 -1
- package/cli/commands/codemod/flattenButtonVariant.ts +16 -0
- package/cli/commands/expo/_setup.ts +1 -0
- package/cli/commands/sync.ts +3 -0
- package/cli/preload.ts +1 -0
- package/cli/tailwindcss.d.ts +2 -0
- package/cli/tsconfig.json +30 -8
- package/cli/utils/auth.ts +1 -0
- package/cli/utils/configWorker.ts +11 -3
- package/cli/utils/purgeCSS.ts +21 -9
- package/cli/utils/setupConfigWorker.ts +2 -2
- package/cli/utils/sortKeys.ts +5 -0
- package/cli/utils/types.ts +3 -1
- package/dist/{Text-UCDorZDD.d.cts → Text-yeQcITg9.d.cts} +30 -69
- package/dist/{Text-UCDorZDD.d.ts → Text-yeQcITg9.d.ts} +30 -69
- package/dist/VStack-CJs5afN8.d.ts +145 -0
- package/dist/VStack-GpQHE4xQ.d.cts +145 -0
- package/dist/chunk-4G4TBHHL.js +2 -0
- package/dist/chunk-6CVEYTLQ.js +2 -0
- package/dist/chunk-6XNKVFUM.cjs +2 -0
- package/dist/chunk-AFPPCX7S.js +2 -0
- package/dist/chunk-BNLUH23E.cjs +1 -0
- package/dist/chunk-EWJ3J526.js +2 -0
- package/dist/chunk-FOX6Q5GR.cjs +1 -0
- package/dist/chunk-HTL6WRXY.cjs +1 -0
- package/dist/chunk-J7PUOUXC.cjs +1 -0
- package/dist/chunk-N3FKHXEJ.js +2 -0
- package/dist/chunk-NUEZVMWZ.cjs +1 -0
- package/dist/chunk-O26JIFUR.cjs +3 -0
- package/dist/chunk-S5UKKXRV.js +2 -0
- package/dist/chunk-WCB4EHGZ.js +3 -0
- package/dist/client/index.cjs +2 -2
- package/dist/client/index.d.cts +913 -21
- package/dist/client/index.d.ts +913 -21
- package/dist/client/index.js +3 -3
- package/dist/experimental/client/index.cjs +2 -2
- package/dist/experimental/client/index.d.cts +14 -49
- package/dist/experimental/client/index.d.ts +14 -49
- package/dist/experimental/client/index.js +2 -2
- package/dist/experimental/index.cjs +2 -2
- package/dist/experimental/index.d.cts +4 -55
- package/dist/experimental/index.d.ts +4 -55
- package/dist/experimental/index.js +1 -1
- package/dist/fixtures.cjs +1546 -55
- package/dist/fixtures.d.cts +33 -14
- package/dist/fixtures.d.ts +33 -14
- package/dist/fixtures.js +1519 -49
- package/dist/index-CU_UPAew.d.ts +202 -0
- package/dist/index-DUFUMc1S.d.cts +202 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +245 -128
- package/dist/index.d.ts +245 -128
- package/dist/index.js +1 -1
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/tailwind/plugin.cjs +1 -2
- package/dist/tailwind/plugin.d.cts +19 -5
- package/dist/tailwind/plugin.d.ts +19 -5
- package/dist/tailwind/plugin.js +2 -2
- package/dist/tailwind/purger.cjs +1 -1
- package/dist/tailwind/purger.js +2 -2
- package/dist/tailwind/tsMorph.cjs +1 -1
- package/dist/tailwind/tsMorph.js +1 -1
- package/dist/tailwind/utils.cjs +1 -1
- package/dist/tailwind/utils.d.cts +80 -28
- package/dist/tailwind/utils.d.ts +80 -28
- package/dist/tailwind/utils.js +1 -1
- package/dist/tokens/automation/configs.cjs +1 -0
- package/dist/tokens/automation/configs.d.cts +110 -0
- package/dist/tokens/automation/configs.d.ts +110 -0
- package/dist/tokens/automation/configs.js +1 -0
- package/dist/tokens/automation/properties.cjs +1 -0
- package/dist/tokens/automation/properties.d.cts +7 -0
- package/dist/tokens/automation/properties.d.ts +7 -0
- package/dist/tokens/automation/properties.js +1 -0
- package/dist/tokens/index.cjs +1 -1
- package/dist/tokens/index.d.cts +9355 -15
- package/dist/tokens/index.d.ts +9355 -15
- package/dist/tokens/index.js +1 -1
- package/dist/tokens/parseTokens.cjs +1 -1
- package/dist/tokens/parseTokens.d.cts +7 -23
- package/dist/tokens/parseTokens.d.ts +7 -23
- package/dist/tokens/parseTokens.js +1 -1
- package/dist/types-d2CfR7zp.d.cts +10245 -0
- package/dist/types-d2CfR7zp.d.ts +10245 -0
- package/package.json +15 -2
- package/dist/chunk-3G7IRLGN.js +0 -2
- package/dist/chunk-5WBROFT5.cjs +0 -1
- package/dist/chunk-6453EQCC.cjs +0 -1
- package/dist/chunk-7QHJ6LHA.js +0 -1
- package/dist/chunk-EYFQOFYW.cjs +0 -1
- package/dist/chunk-FWF2C6TL.cjs +0 -1
- package/dist/chunk-FYVGDNGL.js +0 -2
- package/dist/chunk-GIJ2FHY5.cjs +0 -1
- package/dist/chunk-GL5JI7EX.cjs +0 -2
- package/dist/chunk-MOUM7BAW.js +0 -2
- package/dist/chunk-PE2P7J44.js +0 -2
- package/dist/chunk-RXSJCGB3.cjs +0 -1
- package/dist/chunk-SUASN3GG.js +0 -2
- package/dist/chunk-U2K4DT7E.js +0 -3
- package/dist/chunk-VPR62GYQ.js +0 -2
- package/dist/chunk-WJ55DEUW.cjs +0 -2
- package/dist/chunk-X6F5UEQ5.js +0 -2
- package/dist/chunk-XZCEFUNX.cjs +0 -2
- package/dist/types-DPT0rst4.d.cts +0 -991
- package/dist/types-DPT0rst4.d.ts +0 -991
- /package/dist/{motionFeatures-HQUM526D.cjs → motionFeatures-6LIGGXPL.cjs} +0 -0
- /package/dist/{motionFeatures-PRT45UQH.js → motionFeatures-SJISLQ4M.js} +0 -0
package/dist/index.d.ts
CHANGED
@@ -1,42 +1,23 @@
|
|
1
|
-
import
|
2
|
-
|
3
|
-
import { q as UniversalBoxProps, r as UniversalStackProps, s as UniversalIconProps, t as UniversalImageProps, u as UniversalTextProps } from './types-DPT0rst4.js';
|
4
|
-
export { A as AVATAR_SIZE_PREFIX, a4 as AlwaysPalette, a5 as AlwaysPaletteAlias, a6 as Animation, a7 as AriaAttribute, a8 as AvatarShape, a9 as AvatarSize, aa as AvatarSizeConfig, x as BORDER_RADIUS_PREFIX, y as BORDER_WIDTH_PREFIX, a0 as BUTTON_CSS_VAR_MAP, ab as BackgroundColor, ac as BackgroundPalette, ad as BackgroundPaletteAlias, ae as BackgroundStyleProps, af as BorderRadius, ag as BorderRadiusConfig, ah as BorderStyleProps, ai as BorderWidth, aj as BorderWidthConfig, ak as BoxShadowConfig, al as ButtonBaseConfig, i as ButtonClassMap, am as ButtonClassName, an as ButtonColorConfig, ao as ButtonColorEffect, ap as ButtonColorEffectConfig, j as ButtonColorProperty, k as ButtonColorPropertyConfig, B as ButtonConfig, aq as ButtonKind, ar as ButtonMotionEffect, as as ButtonMotionProperty, at as ButtonMotionPropertyConfig, au as ButtonPalette, av as ButtonPaletteColor, aw as ButtonPaletteConfig, ax as ButtonSize, ay as ButtonSizeConfig, az as ButtonSizeProperty, aA as ButtonSpectrumColor, aB as ButtonState, aC as ButtonStateConfig, aD as ButtonStateEffectConfig, aE as ButtonVariant, aF as ButtonVariantConfig, C as ColorMode, aG as ColorModeConfig, aH as ColorModeForApp, a as ColorsConfig, aI as CorePalette, aJ as CorePaletteAlias, aK as CustomSizingStyleProps, N as DARK_COLOR_MODE_CLASSNAME, _ as DEFAULT_COLOR_MODE_CLASSNAME, $ as DEFAULT_SCALE_MODE_CLASSNAME, aL as DataAttribute, aM as Display, aN as DividerVariant, a3 as FONT_DECLARATIONS_MAP, z as FONT_FAMILY_PREFIX, D as FONT_SIZE_PREFIX, E as FONT_WEIGHT_PREFIX, aO as Flex, aP as FlexAlignContent, aQ as FlexAlignItems, aR as FlexAlignSelf, aS as FlexBasis, aT as FlexDirection, aU as FlexGrow, aV as FlexJustifyContent, aW as FlexShrink, aX as FlexStyleProps, aY as FlexWrap, aZ as FontAlias, p as FontConfig, a_ as FontCssVar, o as FontDeclarationConfig, a$ as FontFamilyCDNUrl, b0 as FontFamilyConfig, n as FontID, b1 as FontSize, b2 as FontSizeConfig, b3 as FontType, F as FontWeightConfig, b4 as FontWeightDescriptive, d as FontWeightNumeric, b5 as ForegroundColor, b6 as ForegroundPalette, b7 as ForegroundPaletteAlias, b8 as HighContrastMode, H as Hue, b as HueStep, a1 as ICON_BUTTON_CSS_VAR_MAP, G as ICON_SIZE_PREFIX, I as IconButtonClassMap, b9 as IconButtonClassName, ba as IconButtonConfig, bb as IconButtonDefaultsConfig, bc as IconButtonSize, bd as IconSizeConfig, be as ImageStyleProps, V as LARGE_SCALE_MODE_CLASSNAME, O as LIGHT_COLOR_MODE_CLASSNAME, L as LINE_HEIGHT_PREFIX, bf as LayoutStyleProps, bg as LetterSpacing, bh as LineClampAlias, bi as LineColor, bj as LineHeight, bk as LineHeightConfig, bl as LinePalette, bm as LinePaletteAlias, R as MEDIUM_SCALE_MODE_CLASSNAME, J as MOTION_PREFIX, bn as Modes, m as MotionConfig, bo as MotionCssVar, bp as MotionSpringConfig, l as MotionSpringConfigOptions, M as MotionVariant, h as MotionVariantSpeed, bq as MotionVariantValues, br as Overflow, a2 as PSEUDO_STYLE_SELECTOR_MAP, bs as Palette, c as PaletteConfig, P as PaletteType, bt as PaletteValue, bu as PlatformMode, bv as Position, bw as PropertyToPaletteAliasMap, bx as RegionMode, Q as SMALL_SCALE_MODE_CLASSNAME, K as SPECTRUM_COLOR_PREFIX, by as ScaleConfig, bz as ScaleEffectMap, S as ScaleMode, bA as ScaleModeConfig, bB as ScaleModeForApp, bC as SpacingAlias, bD as SpacingAliasWithNegatives, bE as SpacingConfig, bF as SpacingStyleProps, bG as SpectrumColor, bH as SpectrumConfig, bI as StateStyleProps, bJ as StyleProps, T as TEXT_TRANSFORM_PREFIX, bS as TShirtSize, bT as TShirtSizeCommon, bK as TextProperty, bL as TextStyleProps, bM as TextTransform, bN as TextTransformConfig, bO as TextVariant, bP as TransitionDelay, bQ as TransitionDuration, bR as TransitionTiming, w as UDS_PREFIX, bU as UdsCssVar, bV as UniversalAvatarProps, e as UniversalButtonProps, bW as UniversalDividerProps, f as UniversalIconButtonProps, g as UniversalPressableProps, bX as UniversalTextInputProps, U as UniversalTokensConfig, W as XLARGE_SCALE_MODE_CLASSNAME, X as XSMALL_SCALE_MODE_CLASSNAME, Y as XXLARGE_SCALE_MODE_CLASSNAME, Z as XXXLARGE_SCALE_MODE_CLASSNAME, v as alwaysPalette } from './types-DPT0rst4.js';
|
1
|
+
import { D as DivProps, I as InputProps } from './VStack-CJs5afN8.js';
|
2
|
+
export { B as Box, a as BoxProps, b as Divider, c as DividerProps, V as VStack, d as VStackProps } from './VStack-CJs5afN8.js';
|
5
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
6
|
-
|
7
|
-
export {
|
4
|
+
import { r as UniversalFormLabelProps, f as UniversalStackProps, s as IconPropsWithSVGProps, t as ImagePropsWithImgProps, u as UniversalIconSlot, v as UniversalLinkProps, w as UniversalTextProps } from './types-d2CfR7zp.js';
|
5
|
+
export { A as AVATAR_SIZE_PREFIX, ad as AlwaysPalette, ae as AlwaysPaletteAlias, af as AlwaysPaletteColor, ag as Animation, ah as AriaAttribute, ai as AvatarAbbreviationStrategy, aj as AvatarShape, ak as AvatarSize, al as AvatarSizeConfig, am as AvatarVariant, D as BORDER_RADIUS_PREFIX, E as BORDER_WIDTH_PREFIX, a5 as BUTTON_CSS_VAR_MAP, an as BackgroundColor, ao as BackgroundPalette, ap as BackgroundPaletteAlias, aq as BackgroundStyleProps, ar as BadgeSize, as as BadgeVariant, at as BorderRadius, au as BorderRadiusConfig, av as BorderStyleProps, aw as BorderWidth, ax as BorderWidthConfig, ay as ButtonBaseConfig, i as ButtonClassMap, az as ButtonClassName, aA as ButtonColorConfig, aB as ButtonColorEffect, aC as ButtonColorEffectConfig, j as ButtonColorProperty, k as ButtonColorPropertyConfig, B as ButtonConfig, aD as ButtonKind, aE as ButtonMotionEffect, aF as ButtonMotionProperty, aG as ButtonMotionPropertyConfig, aH as ButtonPalette, aI as ButtonPaletteColor, aJ as ButtonPaletteConfig, aK as ButtonShadowPropertyConfig, aL as ButtonSize, aM as ButtonSizeConfig, aN as ButtonSizeProperty, aO as ButtonSpectrumColor, aP as ButtonState, aQ as ButtonStateConfig, aR as ButtonStateEffectConfig, aS as ButtonVariant, aT as ButtonVariantConfig, aU as ButtonVariantFlat, aV as CheckboxSize, aW as CheckboxValue, aX as CheckboxVariant, aY as ChipSize, aZ as ChipVariant, C as ColorMode, a_ as ColorModeConfig, a$ as ColorModeForApp, a as ColorsConfig, b0 as ConfigurableDropShadowValues, b1 as ConfigurableInsetShadowValues, b2 as CustomSizingStyleProps, W as DARK_COLOR_MODE_CLASSNAME, a3 as DEFAULT_COLOR_MODE_CLASSNAME, a4 as DEFAULT_SCALE_MODE_CLASSNAME, b3 as DataAttribute, b4 as Display, b5 as DividerVariant, a8 as FONT_DECLARATIONS_MAP, G as FONT_FAMILY_PREFIX, J as FONT_SIZE_PREFIX, L as FONT_SLANT_PREFIX, K as FONT_WEIGHT_PREFIX, N as FONT_WIDTH_PREFIX, b6 as Flex, b7 as FlexAlignContent, b8 as FlexAlignItems, b9 as FlexAlignSelf, ba as FlexBasis, bb as FlexDirection, bc as FlexGrow, bd as FlexJustifyContent, be as FlexShrink, bf as FlexStyleProps, bg as FlexWrap, bh as FontAlias, a9 as FontAxisConfig, m as FontConfig, bi as FontCssVar, aa as FontDeclarationConfig, l as FontDeclarationItemConfig, ab as FontDeclarationMap, bj as FontFamilyCDNUrl, bk as FontFamilyConfig, F as FontID, bl as FontSize, bm as FontSizeConfig, bn as FontSlantConfig, bo as FontType, bp as FontWeightConfig, bq as FontWeightDescriptive, ac as FontWeightForFont, br as FontWeightNumeric, bs as FontWidthConfig, bt as ForegroundColor, bu as ForegroundPalette, bv as ForegroundPaletteAlias, bw as HighContrastMode, H as Hue, b as HueStep, a6 as ICON_BUTTON_CSS_VAR_MAP, O as ICON_SIZE_PREFIX, I as IconButtonClassMap, bx as IconButtonClassName, by as IconButtonConfig, bz as IconButtonDefaultsConfig, bA as IconButtonSize, bB as IconSizeConfig, bC as ImageStyleProps, bD as InputSize, $ as LARGE_SCALE_MODE_CLASSNAME, X as LIGHT_COLOR_MODE_CLASSNAME, Q as LINE_HEIGHT_PREFIX, bE as LayoutStyleProps, bF as LetterSpacing, bG as LineClampAlias, bH as LineColor, bI as LineHeight, bJ as LineHeightConfig, bK as LinePalette, bL as LinePaletteAlias, _ as MEDIUM_SCALE_MODE_CLASSNAME, R as MOTION_PREFIX, bM as Modes, p as MotionConfig, bN as MotionCssVar, bO as MotionSpringConfig, o as MotionSpringConfigOptions, M as MotionVariant, n as MotionVariantSpeed, bP as MotionVariantValues, bQ as Overflow, a7 as PSEUDO_STYLE_SELECTOR_MAP, bR as Palette, c as PaletteConfig, P as PaletteType, bS as PaletteValue, bT as PlatformMode, bU as Position, bV as PropertyToPaletteAliasMap, bW as RadioSize, bX as RadioValue, bY as RadioVariant, bZ as RegionMode, Z as SMALL_SCALE_MODE_CLASSNAME, T as SPECTRUM_COLOR_PREFIX, b_ as ScaleConfig, b$ as ScaleEffectMap, S as ScaleMode, c0 as ScaleModeConfig, c1 as ScaleModeForApp, c2 as ShadowColor, c3 as ShadowColorConfig, c4 as ShadowConfig, c5 as ShadowOffset, c6 as ShadowOpacity, c7 as ShadowPalette, c8 as ShadowPaletteAlias, d as ShadowPreset, c9 as ShadowSpreadRadius, ca as ShadowStyleProps, q as ShadowType, cb as ShadowTypeConfig, cc as ShadowVariant, cd as ShadowVariantConfig, ce as ShadowVariantInvert, cf as ShadowVariantWithInvert, cg as SharedPaletteAlias, ch as SpacingAlias, ci as SpacingConfig, cj as SpacingStyleProps, ck as SpectrumColor, cl as SpectrumConfig, cm as StateStyleProps, cn as StyleProps, co as SwitchSize, V as TEXT_TRANSFORM_PREFIX, cx as TShirtSize, cy as TShirtSizeCommon, cp as TextProperty, cq as TextStyleProps, cr as TextTransform, cs as TextTransformConfig, ct as TextVariant, cu as TransitionDelay, cv as TransitionDuration, cw as TransitionTiming, z as UDS_PREFIX, cz as UdsCssVar, cA as UniversalAvatarIconProps, cB as UniversalAvatarImageProps, cC as UniversalAvatarProps, cD as UniversalAvatarTextProps, cE as UniversalBadgeProps, e as UniversalBoxProps, cF as UniversalButtonProps, cG as UniversalCheckboxProps, cH as UniversalChipBaseProps, cI as UniversalChipButtonProps, cJ as UniversalChipDismissibleProps, cK as UniversalChipLinkProps, cL as UniversalChipProps, cM as UniversalChipToggleProps, g as UniversalDividerProps, cN as UniversalIconButtonProps, cO as UniversalIconProps, cP as UniversalImageProps, h as UniversalInputProps, cQ as UniversalMenuItemProps, cR as UniversalPressableProps, cS as UniversalRadioGroupProps, cT as UniversalRadioProps, cU as UniversalSwitchProps, U as UniversalTokensConfig, cV as UniversalTokensConfigAuto, a0 as XLARGE_SCALE_MODE_CLASSNAME, Y as XSMALL_SCALE_MODE_CLASSNAME, a1 as XXLARGE_SCALE_MODE_CLASSNAME, a2 as XXXLARGE_SCALE_MODE_CLASSNAME, x as alwaysPalette, y as defaultUniversalTokensConfigAuto } from './types-d2CfR7zp.js';
|
6
|
+
import * as react from 'react';
|
7
|
+
import { PropsWithChildren, Ref, Dispatch, SetStateAction } from 'react';
|
8
|
+
export { Avatar, AvatarIcon, AvatarIconProps, AvatarImage, AvatarImageProps, AvatarProps, AvatarText, AvatarTextProps, Badge, BadgeProps, Button, ButtonProps, Checkbox, CheckboxProps, Chip, ChipButton, ChipButtonProps, ChipDismissible, ChipDismissibleProps, ChipLink, ChipLinkProps, ChipProps, ChipToggle, ChipToggleProps, IconButton, IconButtonProps, Input, InputProps, Menu, MenuContentProps, MenuDividerProps, MenuItemCheckboxProps, MenuItemProps, MenuPlacement, MenuProviderProps, MenuTriggerProps, Pressable, PressableProps, Radio, RadioGroupProvider, RadioGroupProviderProps, RadioProps, SpringMotionConfig, SpringMotionConfigProps, Switch, SwitchProps } from '@yahoo/uds/client';
|
9
|
+
export { AllSelectors, BaseSelector, CssStyleObject, DEFAULT_COLOR_MODE, DEFAULT_COLOR_MODE_FOR_APP, DEFAULT_HIGH_CONTRAST_MODE, DEFAULT_REGION_MODE, DEFAULT_SCALE_MODE, DEFAULT_SCALE_MODE_FOR_APP, ParentVariantSelector, button, cartesianProduct, coalesceConfigVariant, defaultTokensConfig, entries, fontWeightMap, fromEntries, generateKeyFromFlatConfigPath, generateSchemaKey, getConfigDefaultValue, getConfigPseudoStateVariables, getConfigPseudoStateVariablesWithSetter, getConfigSubcomponents, getConfigVariantComponentStates, getConfigVariantComponentStatesMatrix, getConfigVariantProperties, getConfigVariantPseudoStates, getConfigVariants, getDefaultButtonBaseMap, isConfigDefaultValue, mapValues, parseButtonVariantFlat, parseDeprecatedButtonPaletteVariant, setConfigPseudoStateVariable, shadow, variants } from './tokens/index.js';
|
10
|
+
export { AvatarConfig, BadgeConfig, CheckboxConfig, ChipConfig, DividerConfig, InputConfig, LinkConfig, MenuConfig, RadioConfig, SwitchConfig } from './tokens/automation/configs.js';
|
11
|
+
export { A as AllPossibleProperties, j as AllVariantKeys, i as AutoComponentName, h as AutoComponents, g as ComponentConfig, b as ComponentStateConfig, C as ConfigurablePropertiesName, L as LayerConfig, P as PossibleStates, a as PossibleStatesWithRest, k as SchemaStateValue, S as SelectedConfigurableProperty, d as SubComponentConfig, V as VariantConfig, f as VariantConfigWithComponentStates, e as VariantConfigWithProperties, c as configurableProperties, r as createComponentStateConfig, w as createComponentStates, p as createConfigurableProperty, x as createLayerConfig, y as createSubComponentConfig, q as createVariantConfig, v as createVariantConfigWithComponentStates, u as createVariantConfigWithProperties, l as findFixtureType, m as generateClassName, n as generateDeclaration, o as generateStyles, s as statePseudoMapDocsMode, t as toMinimalDbConfigObject } from './index-CU_UPAew.js';
|
8
12
|
export { IconSize, IconVariant } from '@yahoo/uds-icons/types';
|
9
13
|
import 'motion/react';
|
14
|
+
import 'type-fest';
|
15
|
+
import '@yahoo/uds/fixtures';
|
10
16
|
|
11
|
-
type
|
12
|
-
interface
|
17
|
+
type HtmlLabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
|
18
|
+
interface FormLabelProps extends UniversalFormLabelProps, PropsWithChildren, HtmlLabelProps {
|
13
19
|
}
|
14
|
-
|
15
|
-
* **📦 A layout component that can be used to compose other components**
|
16
|
-
*
|
17
|
-
* @description
|
18
|
-
* The most simple component we ship - a div. But with all the power of the UDS design system.
|
19
|
-
* By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
|
20
|
-
* consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
|
21
|
-
*
|
22
|
-
* @example
|
23
|
-
* ```tsx
|
24
|
-
* import { Box } from '@yahoo/uds';
|
25
|
-
*
|
26
|
-
* <Box backgroundColor="primary" spacing="6">
|
27
|
-
* Any kind of content can go here!
|
28
|
-
* </Box>
|
29
|
-
* ```
|
30
|
-
*
|
31
|
-
* @usage
|
32
|
-
* - If you need to div-like container to apply padding, shapes, or other styling.
|
33
|
-
* - If you're creating card components.
|
34
|
-
*
|
35
|
-
* @see The {@link https://uds.build/docs/components/box Box Docs} for more info
|
36
|
-
*
|
37
|
-
* @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
|
38
|
-
*/
|
39
|
-
declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
|
20
|
+
declare const FormLabel: ({ htmlFor, required, label, children, color, variant, hasError, showRequiredAsterisk, as, className, ...rest }: FormLabelProps) => react_jsx_runtime.JSX.Element | null;
|
40
21
|
|
41
22
|
interface HStackProps extends UniversalStackProps, DivProps {
|
42
23
|
}
|
@@ -71,9 +52,6 @@ interface HStackProps extends UniversalStackProps, DivProps {
|
|
71
52
|
**/
|
72
53
|
declare const HStack: react.ForwardRefExoticComponent<HStackProps & react.RefAttributes<HTMLDivElement>>;
|
73
54
|
|
74
|
-
type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
|
75
|
-
interface IconProps extends UniversalIconProps, SVGElementProps {
|
76
|
-
}
|
77
55
|
/**
|
78
56
|
* **🎨 A component for displaying icons**
|
79
57
|
*
|
@@ -103,11 +81,8 @@ interface IconProps extends UniversalIconProps, SVGElementProps {
|
|
103
81
|
*
|
104
82
|
* @related [IconButton](https://uds.build/docs/components/icon-button)
|
105
83
|
*/
|
106
|
-
declare const Icon: react.ForwardRefExoticComponent<
|
84
|
+
declare const Icon: react.ForwardRefExoticComponent<IconPropsWithSVGProps & react.RefAttributes<SVGSVGElement>>;
|
107
85
|
|
108
|
-
type NativeImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'size' | 'color' | 'height' | 'width' | 'alt' | 'src'>;
|
109
|
-
interface ImageProps extends NativeImageProps, UniversalImageProps {
|
110
|
-
}
|
111
86
|
/**
|
112
87
|
* **📸 A component for displaying images**
|
113
88
|
*
|
@@ -131,15 +106,74 @@ interface ImageProps extends NativeImageProps, UniversalImageProps {
|
|
131
106
|
*
|
132
107
|
* @related [Box](https://uds.build/docs/components/box)
|
133
108
|
*/
|
134
|
-
declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }:
|
109
|
+
declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }: ImagePropsWithImgProps): react_jsx_runtime.JSX.Element;
|
110
|
+
|
111
|
+
interface InputHelpTextProps extends PropsWithChildren {
|
112
|
+
/** Icon to render at the start of the content */
|
113
|
+
startIcon?: UniversalIconSlot;
|
114
|
+
/** Icon to render at the end of the content */
|
115
|
+
endIcon?: UniversalIconSlot;
|
116
|
+
/**
|
117
|
+
* Props to pass to the start/end icon. If color is not provided, the icons
|
118
|
+
* will inherit the color from the `color` prop.
|
119
|
+
*/
|
120
|
+
iconProps?: Pick<IconPropsWithSVGProps, 'color' | 'size' | 'variant'>;
|
121
|
+
size?: InputProps['size'];
|
122
|
+
isFilled?: boolean;
|
123
|
+
}
|
124
|
+
declare function InputHelpText({ startIcon, endIcon, iconProps, children, size, isFilled, ...rest }: InputHelpTextProps): react_jsx_runtime.JSX.Element;
|
125
|
+
declare const InputHelpTextMemo: react.MemoExoticComponent<typeof InputHelpText>;
|
126
|
+
|
127
|
+
type HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
128
|
+
interface LinkProps extends HTMLAnchorProps, UniversalLinkProps {
|
129
|
+
/** The link's destination. */
|
130
|
+
href?: string;
|
131
|
+
/** Anchor rel property. @default "noopener" **/
|
132
|
+
rel?: string;
|
133
|
+
/** If true, forces an underline to always be shown for a11y purposes. @default false */
|
134
|
+
alwaysUnderline?: boolean;
|
135
|
+
}
|
136
|
+
/**
|
137
|
+
* A Link provides navigation or actionable functionality by linking users to
|
138
|
+
* another location within an application, an external resource, or triggering
|
139
|
+
* specific in-page interactions (i.e. scroll-to-section).
|
140
|
+
*
|
141
|
+
* @componentType Client component
|
142
|
+
*
|
143
|
+
* @description
|
144
|
+
* A link component provides navigation or actionable functionality by linking users to another location within an application, an external resource, or triggering specific in-page interactions (i.e. scroll-to-section). This is different than a “button” link which is a button component without a border or fill.
|
145
|
+
*
|
146
|
+
* @see
|
147
|
+
* Check out the {@link https://uds.build/docs/components/link Link Docs} for more info
|
148
|
+
*
|
149
|
+
* @usage
|
150
|
+
* - Provide a way for users to navigate to another location.
|
151
|
+
* - Provide a trigger for in-page interactions.
|
152
|
+
*
|
153
|
+
* @example
|
154
|
+
* ```tsx
|
155
|
+
* 'use client';
|
156
|
+
* import { Link } from '@yahoo/uds';
|
157
|
+
* import { Share, Link as LinkIcon } from '@yahoo/uds-icons';
|
158
|
+
*
|
159
|
+
* <Link href="#">My Link</Link>
|
160
|
+
* <Link href="#" startIcon={Share} />
|
161
|
+
* <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
|
162
|
+
*```
|
163
|
+
**/
|
164
|
+
declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
135
165
|
|
136
|
-
type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
|
166
|
+
type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li' | 'sup';
|
167
|
+
type ColorWithInherit = Exclude<UniversalTextProps['color'], undefined> | 'inherit';
|
168
|
+
type VariantWithInherit = Exclude<UniversalTextProps['variant'], undefined> | 'inherit';
|
137
169
|
type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
|
138
170
|
/** Ref passed to the inner container. */
|
139
171
|
ref?: Ref<HTMLElement>;
|
140
172
|
/** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
|
141
173
|
as?: TagName;
|
142
|
-
|
174
|
+
variant?: VariantWithInherit;
|
175
|
+
color?: ColorWithInherit;
|
176
|
+
} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
|
143
177
|
/**
|
144
178
|
* **💬 A text element that can be used to display text**
|
145
179
|
*
|
@@ -175,64 +209,44 @@ declare const Text: react.ForwardRefExoticComponent<(Omit<{
|
|
175
209
|
ref?: Ref<HTMLElement>;
|
176
210
|
/** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
|
177
211
|
as?: TextElementTagName | undefined;
|
178
|
-
|
212
|
+
variant?: VariantWithInherit;
|
213
|
+
color?: ColorWithInherit;
|
214
|
+
} & react.ClassAttributes<HTMLElement> & react.HTMLAttributes<HTMLElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
|
179
215
|
/** Ref passed to the inner container. */
|
180
216
|
ref?: Ref<HTMLElement>;
|
181
217
|
/** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
|
182
218
|
as?: TextElementTagName | undefined;
|
183
|
-
|
219
|
+
variant?: VariantWithInherit;
|
220
|
+
color?: ColorWithInherit;
|
221
|
+
} & react.ClassAttributes<HTMLLabelElement> & react.LabelHTMLAttributes<HTMLLabelElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
|
184
222
|
/** Ref passed to the inner container. */
|
185
223
|
ref?: Ref<HTMLElement>;
|
186
224
|
/** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
|
187
225
|
as?: TextElementTagName | undefined;
|
188
|
-
|
226
|
+
variant?: VariantWithInherit;
|
227
|
+
color?: ColorWithInherit;
|
228
|
+
} & react.ClassAttributes<HTMLHeadingElement> & react.HTMLAttributes<HTMLHeadingElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
|
189
229
|
/** Ref passed to the inner container. */
|
190
230
|
ref?: Ref<HTMLElement>;
|
191
231
|
/** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
|
192
232
|
as?: TextElementTagName | undefined;
|
193
|
-
|
233
|
+
variant?: VariantWithInherit;
|
234
|
+
color?: ColorWithInherit;
|
235
|
+
} & react.ClassAttributes<HTMLLIElement> & react.LiHTMLAttributes<HTMLLIElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
|
194
236
|
/** Ref passed to the inner container. */
|
195
237
|
ref?: Ref<HTMLElement>;
|
196
238
|
/** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
|
197
239
|
as?: TextElementTagName | undefined;
|
198
|
-
|
240
|
+
variant?: VariantWithInherit;
|
241
|
+
color?: ColorWithInherit;
|
242
|
+
} & react.ClassAttributes<HTMLParagraphElement> & react.HTMLAttributes<HTMLParagraphElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
|
199
243
|
/** Ref passed to the inner container. */
|
200
244
|
ref?: Ref<HTMLElement>;
|
201
245
|
/** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
|
202
246
|
as?: TextElementTagName | undefined;
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
/**
|
207
|
-
* **🥞 A layout component that arranges its children in rows using flexbox**
|
208
|
-
*
|
209
|
-
* @description
|
210
|
-
* VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
|
211
|
-
* and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
|
212
|
-
* add spacing between children.
|
213
|
-
*
|
214
|
-
* @example
|
215
|
-
* ```tsx
|
216
|
-
* import { VStack, Text } from '@yahoo/uds';
|
217
|
-
*
|
218
|
-
* <VStack gap="6">
|
219
|
-
* <Text variant="body1" color="primary">First</Text>
|
220
|
-
* <Text variant="body1" color="primary">Second</Text>
|
221
|
-
* <Text variant="body1" color="primary">Third</Text>
|
222
|
-
* </VStack>
|
223
|
-
* ```
|
224
|
-
*
|
225
|
-
* @usage
|
226
|
-
* - Create a column of items, optionally with gaps between.
|
227
|
-
* - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
|
228
|
-
* - Create rows that fill the available space within the parent container.
|
229
|
-
* - Create rows of proportionate size to each other (also known as a ratio-based layout).
|
230
|
-
*
|
231
|
-
* @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
|
232
|
-
*
|
233
|
-
* @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)
|
234
|
-
**/
|
235
|
-
declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
|
247
|
+
variant?: VariantWithInherit;
|
248
|
+
color?: ColorWithInherit;
|
249
|
+
} & react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & Omit<UniversalTextProps, "color" | "variant">, "ref">) & react.RefAttributes<HTMLElement>>;
|
236
250
|
|
237
251
|
type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
|
238
252
|
type CvaStyleValue<T> = T | CvaStyleArray<T> | Record<string, unknown> | null | boolean | undefined;
|
@@ -270,57 +284,158 @@ interface CX<T> {
|
|
270
284
|
declare const cx: CX<string>;
|
271
285
|
declare const cva: CVA<string>;
|
272
286
|
declare const getStylesInternal: (props?: ({
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
287
|
+
avatarSizeRoot?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
|
288
|
+
avatarSizeIcon?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
|
289
|
+
avatarTextVariantRoot?: "primary" | "secondary" | undefined;
|
290
|
+
avatarImageVariantRoot?: "primary" | "secondary" | undefined;
|
291
|
+
avatarIconVariantRoot?: "primary" | "secondary" | undefined;
|
292
|
+
badgeSizeRoot?: "xs" | "sm" | "md" | "lg" | undefined;
|
293
|
+
badgeSizeIcon?: "xs" | "sm" | "md" | "lg" | undefined;
|
294
|
+
badgeVariantRoot?: "primary" | "secondary" | "brand" | "brand-secondary" | "alert" | "alert-secondary" | "warning" | "warning-secondary" | "positive" | "positive-secondary" | "info" | "info-secondary" | undefined;
|
295
|
+
badgeVariantIcon?: "primary" | "secondary" | "brand" | "brand-secondary" | "alert" | "alert-secondary" | "warning" | "warning-secondary" | "positive" | "positive-secondary" | "info" | "info-secondary" | undefined;
|
296
|
+
checkboxSizeRoot?: "sm" | "md" | undefined;
|
297
|
+
checkboxSizeCheckbox?: "sm" | "md" | undefined;
|
298
|
+
checkboxVariantValueRoot?: "checked" | "unchecked" | "indeterminate" | undefined;
|
299
|
+
checkboxVariantRoot?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
|
300
|
+
checkboxVariantValueCheckbox?: "checked" | "unchecked" | "indeterminate" | undefined;
|
301
|
+
checkboxVariantCheckbox?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
|
302
|
+
checkboxVariantValueCheckboxIcon?: "checked" | "unchecked" | "indeterminate" | undefined;
|
303
|
+
checkboxVariantCheckboxIcon?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
|
304
|
+
chipSizeRoot?: "sm" | "md" | undefined;
|
305
|
+
chipToggleVariantActiveRoot?: "on" | "off" | undefined;
|
306
|
+
chipToggleVariantRoot?: "primary" | "secondary" | "brand" | "brand-secondary" | undefined;
|
307
|
+
chipToggleVariantActiveIcon?: "on" | "off" | undefined;
|
308
|
+
chipToggleVariantIcon?: "primary" | "secondary" | "brand" | "brand-secondary" | undefined;
|
309
|
+
chipDismissibleVariantRoot?: "primary" | "secondary" | "brand" | "brand-secondary" | undefined;
|
310
|
+
chipDismissibleVariantIcon?: "primary" | "secondary" | "brand" | "brand-secondary" | undefined;
|
311
|
+
chipLinkVariantRoot?: "primary" | "secondary" | "brand" | "brand-secondary" | undefined;
|
312
|
+
chipLinkVariantIcon?: "primary" | "secondary" | "brand" | "brand-secondary" | undefined;
|
313
|
+
dividerVariantRoot?: "primary" | "secondary" | "tertiary" | "muted" | undefined;
|
314
|
+
dividerVariantLine?: "primary" | "secondary" | "tertiary" | "muted" | undefined;
|
315
|
+
dividerVariantLabel?: "primary" | "secondary" | "tertiary" | "muted" | undefined;
|
316
|
+
inputSizeRoot?: "md" | "lg" | undefined;
|
317
|
+
inputSizeInputWrapper?: "md" | "lg" | undefined;
|
318
|
+
inputSizeInput?: "md" | "lg" | undefined;
|
319
|
+
inputSizeStartIcon?: "md" | "lg" | undefined;
|
320
|
+
inputSizeEndIcon?: "md" | "lg" | undefined;
|
321
|
+
inputSizeLabel?: "md" | "lg" | undefined;
|
322
|
+
inputSizeHelperIcon?: "md" | "lg" | undefined;
|
323
|
+
inputSizeHelperText?: "md" | "lg" | undefined;
|
324
|
+
inputVariantValueRoot?: "filled" | "empty" | undefined;
|
325
|
+
inputVariantRoot?: "default" | undefined;
|
326
|
+
inputVariantValueInputWrapper?: "filled" | "empty" | undefined;
|
327
|
+
inputVariantInputWrapper?: "default" | undefined;
|
328
|
+
inputVariantValueInput?: "filled" | "empty" | undefined;
|
329
|
+
inputVariantInput?: "default" | undefined;
|
330
|
+
inputVariantValueInputPlaceholder?: "filled" | "empty" | undefined;
|
331
|
+
inputVariantInputPlaceholder?: "default" | undefined;
|
332
|
+
inputVariantValueStartIcon?: "filled" | "empty" | undefined;
|
333
|
+
inputVariantStartIcon?: "default" | undefined;
|
334
|
+
inputVariantValueEndIcon?: "filled" | "empty" | undefined;
|
335
|
+
inputVariantEndIcon?: "default" | undefined;
|
336
|
+
inputVariantValueLabel?: "filled" | "empty" | undefined;
|
337
|
+
inputVariantLabel?: "default" | undefined;
|
338
|
+
inputVariantValueLabelRequired?: "filled" | "empty" | undefined;
|
339
|
+
inputVariantLabelRequired?: "default" | undefined;
|
340
|
+
inputVariantValueHelperIcon?: "filled" | "empty" | undefined;
|
341
|
+
inputVariantHelperIcon?: "default" | undefined;
|
342
|
+
inputVariantValueHelperText?: "filled" | "empty" | undefined;
|
343
|
+
inputVariantHelperText?: "default" | undefined;
|
344
|
+
linkTextStyleRoot?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | undefined;
|
345
|
+
linkTextStyleIcon?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | undefined;
|
346
|
+
linkVariantRoot?: "primary" | "secondary" | "tertiary" | "on-color" | undefined;
|
347
|
+
linkVariantIconStart?: "primary" | "secondary" | "tertiary" | "on-color" | undefined;
|
348
|
+
linkVariantIconEnd?: "primary" | "secondary" | "tertiary" | "on-color" | undefined;
|
349
|
+
menuSizeRoot?: "default" | undefined;
|
350
|
+
menuSizeStartIcon?: "default" | undefined;
|
351
|
+
menuSizeEndIcon?: "default" | undefined;
|
352
|
+
menuItemVariantActiveRoot?: "on" | "off" | undefined;
|
353
|
+
menuItemVariantRoot?: "default" | undefined;
|
354
|
+
menuItemVariantActiveText?: "on" | "off" | undefined;
|
355
|
+
menuItemVariantText?: "default" | undefined;
|
356
|
+
menuItemVariantActiveIcon?: "on" | "off" | undefined;
|
357
|
+
menuItemVariantIcon?: "default" | undefined;
|
358
|
+
menuItemCheckboxVariantActiveRoot?: "on" | "off" | undefined;
|
359
|
+
menuItemCheckboxVariantRoot?: "default" | undefined;
|
360
|
+
menuItemCheckboxVariantActiveText?: "on" | "off" | undefined;
|
361
|
+
menuItemCheckboxVariantText?: "default" | undefined;
|
362
|
+
menuItemCheckboxVariantActiveStartIcon?: "on" | "off" | undefined;
|
363
|
+
menuItemCheckboxVariantStartIcon?: "default" | undefined;
|
364
|
+
menuItemCheckboxVariantActiveEndIcon?: "on" | "off" | undefined;
|
365
|
+
menuItemCheckboxVariantEndIcon?: "default" | undefined;
|
366
|
+
menuDividerVariantRoot?: "default" | undefined;
|
367
|
+
menuDividerVariantText?: "default" | undefined;
|
368
|
+
radioVariantValueRoot?: "checked" | "unchecked" | undefined;
|
369
|
+
radioVariantRoot?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
|
370
|
+
radioVariantValueRadio?: "checked" | "unchecked" | undefined;
|
371
|
+
radioVariantRadio?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
|
372
|
+
radioVariantValueRadioCircle?: "checked" | "unchecked" | undefined;
|
373
|
+
radioVariantRadioCircle?: "primary" | "secondary" | "alert" | "alert-secondary" | undefined;
|
374
|
+
radioSizeRoot?: "sm" | "md" | undefined;
|
375
|
+
radioSizeRadio?: "sm" | "md" | undefined;
|
376
|
+
switchVariantActiveRoot?: "on" | "off" | undefined;
|
377
|
+
switchVariantRoot?: "default" | undefined;
|
378
|
+
switchVariantActiveSwitch?: "on" | "off" | undefined;
|
379
|
+
switchVariantSwitch?: "default" | undefined;
|
380
|
+
switchVariantActiveHandle?: "on" | "off" | undefined;
|
381
|
+
switchVariantHandle?: "default" | undefined;
|
382
|
+
switchVariantActiveHandleIcon?: "on" | "off" | undefined;
|
383
|
+
switchVariantHandleIcon?: "default" | undefined;
|
384
|
+
switchSizeRoot?: "sm" | "md" | undefined;
|
385
|
+
switchSizeSwitch?: "sm" | "md" | undefined;
|
386
|
+
switchSizeHandle?: "sm" | "md" | undefined;
|
387
|
+
switchSizeHandleIcon?: "sm" | "md" | undefined;
|
388
|
+
color?: "primary" | "secondary" | "brand" | "brand-secondary" | "alert" | "alert-secondary" | "warning" | "warning-secondary" | "positive" | "positive-secondary" | "info" | "info-secondary" | "tertiary" | "muted" | "on-color" | "accent" | "transparent" | "white" | "black" | "current" | undefined;
|
389
|
+
placeholderColor?: "primary" | "secondary" | "brand" | "brand-secondary" | "alert" | "alert-secondary" | "warning" | "warning-secondary" | "positive" | "positive-secondary" | "info" | "info-secondary" | "tertiary" | "muted" | "on-color" | "accent" | "transparent" | "white" | "black" | "current" | undefined;
|
390
|
+
fontFamily?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "serif" | "sans" | "mono" | "sans-alt" | "serif-alt" | undefined;
|
391
|
+
fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | undefined;
|
392
|
+
fontWeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "thin" | "black" | "extralight" | "light" | "regular" | "medium" | "semibold" | "bold" | "extrabold" | undefined;
|
393
|
+
lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | undefined;
|
279
394
|
textAlign?: "center" | "end" | "start" | "justify" | undefined;
|
280
|
-
textTransform?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "caption1" | "caption2" | "legal1" | "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
|
281
|
-
spacing?: "
|
282
|
-
spacingHorizontal?: "
|
283
|
-
spacingVertical?: "
|
284
|
-
spacingBottom?: "
|
285
|
-
spacingEnd?: "
|
286
|
-
spacingStart?: "
|
287
|
-
spacingTop?: "
|
288
|
-
offset?: "
|
289
|
-
offsetVertical?: "
|
290
|
-
offsetHorizontal?: "
|
291
|
-
offsetBottom?: "
|
292
|
-
offsetEnd?: "
|
293
|
-
offsetStart?: "
|
294
|
-
offsetTop?: "
|
295
|
-
columnGap?: "
|
296
|
-
rowGap?: "
|
297
|
-
backgroundColor?: "brand" | "
|
298
|
-
borderColor?: "brand" | "
|
299
|
-
borderStartColor?: "brand" | "
|
300
|
-
borderEndColor?: "brand" | "
|
301
|
-
borderBottomColor?: "brand" | "
|
302
|
-
borderTopColor?: "brand" | "
|
303
|
-
borderRadius?: "
|
304
|
-
borderTopStartRadius?: "
|
305
|
-
borderTopEndRadius?: "
|
306
|
-
borderBottomStartRadius?: "
|
307
|
-
borderBottomEndRadius?: "
|
308
|
-
borderWidth?: "thin" | "
|
309
|
-
borderVerticalWidth?: "thin" | "
|
310
|
-
borderHorizontalWidth?: "thin" | "
|
311
|
-
borderStartWidth?: "thin" | "
|
312
|
-
borderEndWidth?: "thin" | "
|
313
|
-
borderTopWidth?: "thin" | "
|
314
|
-
borderBottomWidth?: "thin" | "
|
315
|
-
avatarSize?: "sm" | "md" | "lg" | undefined;
|
395
|
+
textTransform?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
|
396
|
+
spacing?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
397
|
+
spacingHorizontal?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
398
|
+
spacingVertical?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
399
|
+
spacingBottom?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
400
|
+
spacingEnd?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
401
|
+
spacingStart?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
402
|
+
spacingTop?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
403
|
+
offset?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
404
|
+
offsetVertical?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
405
|
+
offsetHorizontal?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
406
|
+
offsetBottom?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
407
|
+
offsetEnd?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
408
|
+
offsetStart?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
409
|
+
offsetTop?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
410
|
+
columnGap?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
411
|
+
rowGap?: "6" | "7" | "10" | "12" | "16" | "2" | "0.5" | "4" | "1" | "1.5" | "8" | "2.5" | "5" | "3" | "3.5" | "0" | "9" | "11" | "14" | "px" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
412
|
+
backgroundColor?: "primary" | "secondary" | "brand" | "brand-secondary" | "alert" | "alert-secondary" | "warning" | "warning-secondary" | "positive" | "positive-secondary" | "info" | "info-secondary" | "accent" | "transparent" | "white" | "black" | "current" | undefined;
|
413
|
+
borderColor?: "primary" | "secondary" | "brand" | "brand-secondary" | "alert" | "alert-secondary" | "warning" | "warning-secondary" | "positive" | "positive-secondary" | "info" | "info-secondary" | "tertiary" | "muted" | "accent" | "transparent" | "white" | "black" | "current" | undefined;
|
414
|
+
borderStartColor?: "primary" | "secondary" | "brand" | "brand-secondary" | "alert" | "alert-secondary" | "warning" | "warning-secondary" | "positive" | "positive-secondary" | "info" | "info-secondary" | "tertiary" | "muted" | "accent" | "transparent" | "white" | "black" | "current" | undefined;
|
415
|
+
borderEndColor?: "primary" | "secondary" | "brand" | "brand-secondary" | "alert" | "alert-secondary" | "warning" | "warning-secondary" | "positive" | "positive-secondary" | "info" | "info-secondary" | "tertiary" | "muted" | "accent" | "transparent" | "white" | "black" | "current" | undefined;
|
416
|
+
borderBottomColor?: "primary" | "secondary" | "brand" | "brand-secondary" | "alert" | "alert-secondary" | "warning" | "warning-secondary" | "positive" | "positive-secondary" | "info" | "info-secondary" | "tertiary" | "muted" | "accent" | "transparent" | "white" | "black" | "current" | undefined;
|
417
|
+
borderTopColor?: "primary" | "secondary" | "brand" | "brand-secondary" | "alert" | "alert-secondary" | "warning" | "warning-secondary" | "positive" | "positive-secondary" | "info" | "info-secondary" | "tertiary" | "muted" | "accent" | "transparent" | "white" | "black" | "current" | undefined;
|
418
|
+
borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "none" | undefined;
|
419
|
+
borderTopStartRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "none" | undefined;
|
420
|
+
borderTopEndRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "none" | undefined;
|
421
|
+
borderBottomStartRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "none" | undefined;
|
422
|
+
borderBottomEndRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "none" | undefined;
|
423
|
+
borderWidth?: "thin" | "none" | "medium" | "thick" | undefined;
|
424
|
+
borderVerticalWidth?: "thin" | "none" | "medium" | "thick" | undefined;
|
425
|
+
borderHorizontalWidth?: "thin" | "none" | "medium" | "thick" | undefined;
|
426
|
+
borderStartWidth?: "thin" | "none" | "medium" | "thick" | undefined;
|
427
|
+
borderEndWidth?: "thin" | "none" | "medium" | "thick" | undefined;
|
428
|
+
borderTopWidth?: "thin" | "none" | "medium" | "thick" | undefined;
|
429
|
+
borderBottomWidth?: "thin" | "none" | "medium" | "thick" | undefined;
|
430
|
+
avatarSize?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
|
316
431
|
iconSize?: "sm" | "md" | "lg" | undefined;
|
317
432
|
alignContent?: "center" | "flex-end" | "flex-start" | "stretch" | "space-between" | "space-around" | undefined;
|
318
433
|
alignItems?: "center" | "flex-end" | "flex-start" | "baseline" | "stretch" | undefined;
|
319
434
|
alignSelf?: "center" | "flex-end" | "flex-start" | "baseline" | "stretch" | "auto" | undefined;
|
320
435
|
flex?: "1" | "none" | "initial" | "auto" | undefined;
|
321
436
|
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
|
322
|
-
flexGrow?: "
|
323
|
-
flexShrink?: "
|
437
|
+
flexGrow?: "2" | "1" | "3" | "0" | undefined;
|
438
|
+
flexShrink?: "1" | "0" | undefined;
|
324
439
|
flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
|
325
440
|
justifyContent?: "center" | "flex-end" | "flex-start" | "space-between" | "space-around" | "space-evenly" | undefined;
|
326
441
|
flexBasis?: "min-content" | undefined;
|
@@ -332,12 +447,14 @@ declare const getStylesInternal: (props?: ({
|
|
332
447
|
contentFit?: "none" | "fill" | "cover" | "contain" | "scale-down" | undefined;
|
333
448
|
colorMode?: "light" | "dark" | undefined;
|
334
449
|
scaleMode?: "medium" | "xSmall" | "small" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
|
335
|
-
buttonPalette?: "brand" | "
|
450
|
+
buttonPalette?: "brand" | "alert" | "warning" | "positive" | "info" | "accent" | undefined;
|
336
451
|
buttonVariant?: "primary" | "secondary" | "tertiary" | undefined;
|
337
452
|
buttonSize?: "sm" | "md" | "lg" | undefined;
|
338
453
|
iconButtonSize?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
|
339
454
|
width?: "full" | "fit" | "screen" | undefined;
|
340
455
|
height?: "full" | "fit" | "screen" | undefined;
|
456
|
+
dropShadow?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "none" | undefined;
|
457
|
+
insetShadow?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xl-invert" | "none" | "md-invert" | "xl-invert" | "xs-invert" | "sm-invert" | "lg-invert" | undefined;
|
341
458
|
} & {
|
342
459
|
className?: string | undefined;
|
343
460
|
}) | undefined) => string;
|
@@ -346,4 +463,4 @@ declare const getStyles: (props: GetStylesInternalProps) => string;
|
|
346
463
|
|
347
464
|
type SetState<T> = Dispatch<SetStateAction<T>>;
|
348
465
|
|
349
|
-
export {
|
466
|
+
export { FormLabel, type FormLabelProps, HStack, type HStackProps, Icon, IconPropsWithSVGProps as IconProps, IconPropsWithSVGProps, Image, ImagePropsWithImgProps as ImageProps, ImagePropsWithImgProps, InputHelpTextMemo as InputHelpText, type InputHelpTextProps, Link, type LinkProps, type SetState, Text, type TextProps, UniversalFormLabelProps, UniversalIconSlot, UniversalLinkProps, UniversalStackProps, UniversalTextProps, cva, cx, getStyles };
|
package/dist/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
import{
|
1
|
+
import{getStyles as e,cx as t,IconSlot as a}from"./chunk-WCB4EHGZ.js";export{Box,Divider,FormLabel,HStack,Icon,Image,InputHelpTextMemo as InputHelpText,Text,VStack,cva,cx,getStyles}from"./chunk-WCB4EHGZ.js";export{DEFAULT_COLOR_MODE,DEFAULT_COLOR_MODE_FOR_APP,DEFAULT_HIGH_CONTRAST_MODE,DEFAULT_REGION_MODE,DEFAULT_SCALE_MODE,DEFAULT_SCALE_MODE_FOR_APP,FONT_DECLARATIONS_MAP,alwaysPalette,button,cartesianProduct,coalesceConfigVariant,configurableProperties,createComponentStateConfig,createComponentStates,createConfigurableProperty,createLayerConfig,createSubComponentConfig,createVariantConfig,createVariantConfigWithComponentStates,createVariantConfigWithProperties,defaultTokensConfig,defaultUniversalTokensConfigAuto,findFixtureType,fontWeightMap,fromEntries,generateClassName,generateDeclaration,generateKeyFromFlatConfigPath,generateSchemaKey,generateStyles,getConfigDefaultValue,getConfigPseudoStateVariables,getConfigPseudoStateVariablesWithSetter,getConfigSubcomponents,getConfigVariantComponentStates,getConfigVariantComponentStatesMatrix,getConfigVariantProperties,getConfigVariantPseudoStates,getConfigVariants,getDefaultButtonBaseMap,isConfigDefaultValue,parseButtonVariantFlat,parseDeprecatedButtonPaletteVariant,setConfigPseudoStateVariable,shadow,statePseudoMapDocsMode,toMinimalDbConfigObject}from"./chunk-6CVEYTLQ.js";export{variants}from"./chunk-N3FKHXEJ.js";export{entries,mapValues}from"./chunk-EWJ3J526.js";export{AVATAR_SIZE_PREFIX,BORDER_RADIUS_PREFIX,BORDER_WIDTH_PREFIX,BUTTON_CSS_VAR_MAP,DARK_COLOR_MODE_CLASSNAME,DEFAULT_COLOR_MODE_CLASSNAME,DEFAULT_SCALE_MODE_CLASSNAME,FONT_FAMILY_PREFIX,FONT_SIZE_PREFIX,FONT_SLANT_PREFIX,FONT_WEIGHT_PREFIX,FONT_WIDTH_PREFIX,ICON_BUTTON_CSS_VAR_MAP,ICON_SIZE_PREFIX,LARGE_SCALE_MODE_CLASSNAME,LIGHT_COLOR_MODE_CLASSNAME,LINE_HEIGHT_PREFIX,MEDIUM_SCALE_MODE_CLASSNAME,MOTION_PREFIX,PSEUDO_STYLE_SELECTOR_MAP,SMALL_SCALE_MODE_CLASSNAME,SPECTRUM_COLOR_PREFIX,TEXT_TRANSFORM_PREFIX,UDS_PREFIX,XLARGE_SCALE_MODE_CLASSNAME,XSMALL_SCALE_MODE_CLASSNAME,XXLARGE_SCALE_MODE_CLASSNAME,XXXLARGE_SCALE_MODE_CLASSNAME}from"./chunk-4G4TBHHL.js";import{forwardRef as n,useMemo as o}from"react";import{jsxs as i,jsx as r}from"react/jsx-runtime";export{Avatar,AvatarIcon,AvatarImage,AvatarText,Badge,Button,Checkbox,Chip,ChipButton,ChipDismissible,ChipLink,ChipToggle,IconButton,Input,Menu,Pressable,Radio,RadioGroupProvider,SpringMotionConfig,Switch}from"@yahoo/uds/client";/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */var E=n((function({variant:n="primary",textVariant:E,startIcon:_,endIcon:s,alwaysUnderline:C=!1,children:S,className:A,...c},l){const L=!E,g=o((()=>{const a=!L&&e({linkTextStyleRoot:E,fontSize:E,fontFamily:E,fontWeight:E,lineHeight:E,textTransform:E});return e({linkVariantRoot:n,display:"inline-flex",alignItems:"center",className:t(a,"uds-ring",C?"underline":"hover:underline",A)})}),[C,L,E,n,A]),O=e({linkVariantIconStart:n,linkTextStyleIcon:E,className:t(L&&"w-[0.7em] h-[0.7em]")}),f=e({linkVariantIconEnd:n,linkTextStyleIcon:E,className:t(L&&"w-[0.7em] h-[0.7em]")}),M={variant:"outline",color:"current"};return i("a",{ref:l,className:g,...c,children:[_&&r(a,{className:O,icon:_,iconProps:M,"data-testid":"start-icon"}),S,s&&r(a,{className:f,icon:s,iconProps:M,"data-testid":"end-icon"})]})}));export{E as Link};
|