@yahoo/uds 2.2.1 → 2.3.0

package/cli/PropsToClass.mock.tsx

@@ -0,0 +1,14 @@
+import { Button, cx, HStack, Text } from '@yahoo/uds';
+const textClassName = cx('text-primary');
+const otherProps = { height: 'fit' };
+
+export const PageA = () => {
+  return (
+    <HStack className="w-full max-h-screen">
+      <Button className="min-w-full">Click me</Button>
+      {/* 🙏 TODO: Add w-10/12 to your className attribute */}
+      <Text className={textClassName}>Some text</Text>
+      <Text {...otherProps}>Some text</Text>
+    </HStack>
+  );
+}

package/dist/Text-CwmyqrBk.d.cts

@@ -0,0 +1,243 @@
+import { PropsWithChildren, Ref } from 'react';
+import { SvgIcon, IconSize, IconVariant } from '@yahoo/uds-icons/types';
+
+declare const alwaysPalette: {
+    white: string;
+    black: string;
+    transparent: string;
+    current: string;
+};
+
+type CorePaletteAlias = 'brand' | 'accent' | 'alert' | 'positive' | 'warning';
+type BackgroundPaletteAlias = 'primary' | 'secondary';
+type ForegroundPaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'on-color';
+type LinePaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted';
+type AlwaysPalette = typeof alwaysPalette;
+type AlwaysPaletteAlias = keyof AlwaysPalette;
+type ForegroundColor = CorePaletteAlias | ForegroundPaletteAlias | AlwaysPaletteAlias;
+type LineColor = CorePaletteAlias | LinePaletteAlias | AlwaysPaletteAlias;
+type BackgroundColor = CorePaletteAlias | BackgroundPaletteAlias | AlwaysPaletteAlias;
+type TextVariant = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'caption1' | 'caption2' | 'legal1';
+type FontAlias = 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono';
+type FontWeightDescriptive = 'thin' | 'extralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+type TShirtSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type TShirtSizeCommon = Extract<TShirtSize, 'sm' | 'md' | 'lg'>;
+type AvatarSize = TShirtSizeCommon;
+type SpacingAlias = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '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';
+type BorderRadius = TShirtSize;
+type BorderWidth = 'none' | 'thin' | 'medium' | 'thick';
+type Flex = '1' | 'auto' | 'initial' | 'none';
+type FlexGrow = '0' | '1' | '2' | '3';
+type FlexShrink = '0' | '1';
+type FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
+type FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type FlexAlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+type FlexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+type FlexBasis = 'min-content';
+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';
+type Overflow = 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
+type Position = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
+type ImageStyleProps = {
+    /**
+     * Determines how the image should be resized to fit its container.
+     */
+    contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+};
+interface BorderStyleProps {
+    /** Add a border radius to all corners of the box. */
+    borderRadius?: BorderRadius;
+    /** Add a border radius to top left corner of the box. */
+    borderTopStartRadius?: BorderRadius;
+    /** Add a border radius to top right corner of the box. */
+    borderTopEndRadius?: BorderRadius;
+    /** Add a border radius to bottom left corner of the box. */
+    borderBottomStartRadius?: BorderRadius;
+    /** Add a border radius to bottom right corner of the box. */
+    borderBottomEndRadius?: BorderRadius;
+    /** Adds a custom border color from the palette */
+    borderColor?: LineColor;
+    /** Start border color */
+    borderStartColor?: LineColor;
+    /** End border color */
+    borderEndColor?: LineColor;
+    /** Top border color */
+    borderTopColor?: LineColor;
+    /** Bottom border color */
+    borderBottomColor?: LineColor;
+    /** Shorthand property to the width of an element's border. */
+    borderWidth?: BorderWidth;
+    /** Sets the width of the top and bottom border of an element. */
+    borderVerticalWidth?: BorderWidth;
+    /** Sets the width of the start (left) and end (right) border of an element. */
+    borderHorizontalWidth?: BorderWidth;
+    /** Sets the width of the start (left) border of an element. */
+    borderStartWidth?: BorderWidth;
+    /** Sets the width of the end (right) border of an element. */
+    borderEndWidth?: BorderWidth;
+    /** Sets the width of the top border of an element. */
+    borderTopWidth?: BorderWidth;
+    /** Sets the width of the bottom border of an element. */
+    borderBottomWidth?: BorderWidth;
+}
+interface LayoutStyleProps {
+    /** 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. */
+    display?: Display;
+    /** 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. */
+    overflow?: Overflow;
+    /** 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. */
+    overflowX?: Overflow;
+    /** 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. */
+    overflowY?: Overflow;
+    /** Sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
+    position?: Position;
+}
+interface SpacingStyleProps {
+    /** Apply inner spacing on all sides. */
+    spacing?: SpacingAlias;
+    /** Apply inner spacing on the leading and trailing sides. */
+    spacingHorizontal?: SpacingAlias;
+    /** Apply inner spacing on the top and bottom sides. */
+    spacingVertical?: SpacingAlias;
+    /** Apply inner spacing on the bottom side. */
+    spacingBottom?: SpacingAlias;
+    /** Apply inner spacing on the trailing side. */
+    spacingEnd?: SpacingAlias;
+    /** Apply inner spacing on the leading side. */
+    spacingStart?: SpacingAlias;
+    /** Apply inner spacing on the top side. */
+    spacingTop?: SpacingAlias;
+    /** Apply negative outer spacing on all sides. */
+    offset?: SpacingAlias;
+    /** Apply negative outer spacing on the top and bottom sides. */
+    offsetVertical?: SpacingAlias;
+    /** Apply negative outer spacing on the leading and trailing sides. */
+    offsetHorizontal?: SpacingAlias;
+    /** Apply negative outer spacing on the bottom side. */
+    offsetBottom?: SpacingAlias;
+    /** Apply negative outer spacing on the trailing side. */
+    offsetEnd?: SpacingAlias;
+    /** Apply negative outer spacing on the leading side. */
+    offsetStart?: SpacingAlias;
+    /** Apply negative outer spacing on the top side. */
+    offsetTop?: SpacingAlias;
+    /** Control the horizontal gutters between grid and flexbox items. */
+    columnGap?: SpacingAlias;
+    /** Control the vertical gutters between grid and flexbox items. */
+    rowGap?: SpacingAlias;
+}
+interface FlexStyleProps {
+    /** Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. */
+    alignContent?: FlexAlignContent;
+    /** 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. */
+    alignItems?: FlexAlignItems;
+    /** 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. */
+    alignSelf?: FlexAlignSelf;
+    /** Sets how a flex item will grow or shrink to fit the space available in its flex container. */
+    flex?: Flex;
+    /** Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */
+    flexDirection?: FlexDirection;
+    /** 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. */
+    flexGrow?: FlexGrow;
+    /** 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. */
+    flexShrink?: FlexShrink;
+    /** 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. */
+    flexWrap?: FlexWrap;
+    /** 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. */
+    justifyContent?: FlexJustifyContent;
+    /** 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 */
+    flexBasis?: FlexBasis;
+}
+interface TextStyleProps {
+    /** Color of a Text or Icon element */
+    color?: ForegroundColor;
+    /** Color of placeholder text */
+    placeholderColor?: ForegroundColor;
+    /** Font family for the text */
+    fontFamily?: TextVariant | FontAlias;
+    /** Font size of the text */
+    fontSize?: TextVariant;
+    /** Font weight of the text */
+    fontWeight?: TextVariant | FontWeightDescriptive;
+    /** Line height of the text */
+    lineHeight?: TextVariant;
+    /** Text alignment of the text */
+    textAlign?: 'center' | 'justify' | 'start' | 'end';
+    /** Sets the text transform for the text  */
+    textTransform?: TextVariant | TextTransform;
+}
+interface BackgroundStyleProps {
+    /** Sets the background color. */
+    backgroundColor?: BackgroundColor;
+}
+interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps {
+    /**
+     * When asChild is set to true, the component's child will be cloned and passed
+     * the props and behavior required to make it functional.
+     */
+    asChild?: boolean;
+}
+interface UniversalStackProps extends Omit<UniversalBoxProps, 'flexDirection'> {
+    gap?: SpacingAlias;
+}
+interface UniversalTextProps extends PropsWithChildren, TextStyleProps, UniversalBoxProps {
+    /** Style of text. */
+    variant?: TextVariant;
+    /** Color of the text. */
+    color?: ForegroundColor;
+}
+interface UniversalIconProps {
+    /** Icon to render from the icons package. */
+    name: SvgIcon;
+    /** Size of the icon. */
+    size?: IconSize;
+    /** Variant for icon. Either fill or outline. */
+    variant?: IconVariant;
+    /** Color of the icon. */
+    color?: ForegroundColor;
+}
+interface UniversalImageProps extends Omit<UniversalBoxProps, 'width' | 'height'>, ImageStyleProps {
+    /** The source URL of the image. */
+    src: string;
+    /**  Provides fallback (alternate) text to display when the image specified by the Image element is not loaded. */
+    alt?: string;
+    /** Width of the image in px. */
+    width?: number;
+    /** Height of the image in pixel. */
+    height?: number;
+}
+interface UniversalAvatarProps extends UniversalImageProps {
+    /** The size of the Avatar. */
+    size?: AvatarSize;
+    /** The shape of the Avatar. */
+    shape?: BorderRadius;
+}
+interface UniversalTextInputProps {
+    disabled?: boolean;
+    required?: boolean;
+    backgroundColor?: BackgroundColor;
+    borderColor?: LineColor;
+    borderWidth?: BorderWidth;
+    borderRadius?: BorderRadius;
+    color?: ForegroundColor;
+    fontSize?: TextVariant;
+    placeholderColor?: ForegroundColor;
+    spacingVertical?: SpacingAlias;
+    spacingHorizontal?: SpacingAlias;
+}
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+interface BoxProps extends UniversalBoxProps, DivProps {
+}
+
+type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
+type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TagName;
+} & JSX.IntrinsicElements[TagName] & UniversalTextProps;
+
+export type { BoxProps as B, DivProps as D, Overflow as O, TextProps as T, UniversalAvatarProps as U, UniversalTextProps as a, UniversalIconProps as b, UniversalStackProps as c, UniversalTextInputProps as d };

package/dist/Text-CwmyqrBk.d.ts

@@ -0,0 +1,243 @@
+import { PropsWithChildren, Ref } from 'react';
+import { SvgIcon, IconSize, IconVariant } from '@yahoo/uds-icons/types';
+
+declare const alwaysPalette: {
+    white: string;
+    black: string;
+    transparent: string;
+    current: string;
+};
+
+type CorePaletteAlias = 'brand' | 'accent' | 'alert' | 'positive' | 'warning';
+type BackgroundPaletteAlias = 'primary' | 'secondary';
+type ForegroundPaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'on-color';
+type LinePaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted';
+type AlwaysPalette = typeof alwaysPalette;
+type AlwaysPaletteAlias = keyof AlwaysPalette;
+type ForegroundColor = CorePaletteAlias | ForegroundPaletteAlias | AlwaysPaletteAlias;
+type LineColor = CorePaletteAlias | LinePaletteAlias | AlwaysPaletteAlias;
+type BackgroundColor = CorePaletteAlias | BackgroundPaletteAlias | AlwaysPaletteAlias;
+type TextVariant = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'caption1' | 'caption2' | 'legal1';
+type FontAlias = 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono';
+type FontWeightDescriptive = 'thin' | 'extralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+type TShirtSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type TShirtSizeCommon = Extract<TShirtSize, 'sm' | 'md' | 'lg'>;
+type AvatarSize = TShirtSizeCommon;
+type SpacingAlias = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '3.5' | '4' | '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';
+type BorderRadius = TShirtSize;
+type BorderWidth = 'none' | 'thin' | 'medium' | 'thick';
+type Flex = '1' | 'auto' | 'initial' | 'none';
+type FlexGrow = '0' | '1' | '2' | '3';
+type FlexShrink = '0' | '1';
+type FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
+type FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type FlexAlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+type FlexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+type FlexBasis = 'min-content';
+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';
+type Overflow = 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
+type Position = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
+type ImageStyleProps = {
+    /**
+     * Determines how the image should be resized to fit its container.
+     */
+    contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+};
+interface BorderStyleProps {
+    /** Add a border radius to all corners of the box. */
+    borderRadius?: BorderRadius;
+    /** Add a border radius to top left corner of the box. */
+    borderTopStartRadius?: BorderRadius;
+    /** Add a border radius to top right corner of the box. */
+    borderTopEndRadius?: BorderRadius;
+    /** Add a border radius to bottom left corner of the box. */
+    borderBottomStartRadius?: BorderRadius;
+    /** Add a border radius to bottom right corner of the box. */
+    borderBottomEndRadius?: BorderRadius;
+    /** Adds a custom border color from the palette */
+    borderColor?: LineColor;
+    /** Start border color */
+    borderStartColor?: LineColor;
+    /** End border color */
+    borderEndColor?: LineColor;
+    /** Top border color */
+    borderTopColor?: LineColor;
+    /** Bottom border color */
+    borderBottomColor?: LineColor;
+    /** Shorthand property to the width of an element's border. */
+    borderWidth?: BorderWidth;
+    /** Sets the width of the top and bottom border of an element. */
+    borderVerticalWidth?: BorderWidth;
+    /** Sets the width of the start (left) and end (right) border of an element. */
+    borderHorizontalWidth?: BorderWidth;
+    /** Sets the width of the start (left) border of an element. */
+    borderStartWidth?: BorderWidth;
+    /** Sets the width of the end (right) border of an element. */
+    borderEndWidth?: BorderWidth;
+    /** Sets the width of the top border of an element. */
+    borderTopWidth?: BorderWidth;
+    /** Sets the width of the bottom border of an element. */
+    borderBottomWidth?: BorderWidth;
+}
+interface LayoutStyleProps {
+    /** 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. */
+    display?: Display;
+    /** 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. */
+    overflow?: Overflow;
+    /** 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. */
+    overflowX?: Overflow;
+    /** 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. */
+    overflowY?: Overflow;
+    /** Sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
+    position?: Position;
+}
+interface SpacingStyleProps {
+    /** Apply inner spacing on all sides. */
+    spacing?: SpacingAlias;
+    /** Apply inner spacing on the leading and trailing sides. */
+    spacingHorizontal?: SpacingAlias;
+    /** Apply inner spacing on the top and bottom sides. */
+    spacingVertical?: SpacingAlias;
+    /** Apply inner spacing on the bottom side. */
+    spacingBottom?: SpacingAlias;
+    /** Apply inner spacing on the trailing side. */
+    spacingEnd?: SpacingAlias;
+    /** Apply inner spacing on the leading side. */
+    spacingStart?: SpacingAlias;
+    /** Apply inner spacing on the top side. */
+    spacingTop?: SpacingAlias;
+    /** Apply negative outer spacing on all sides. */
+    offset?: SpacingAlias;
+    /** Apply negative outer spacing on the top and bottom sides. */
+    offsetVertical?: SpacingAlias;
+    /** Apply negative outer spacing on the leading and trailing sides. */
+    offsetHorizontal?: SpacingAlias;
+    /** Apply negative outer spacing on the bottom side. */
+    offsetBottom?: SpacingAlias;
+    /** Apply negative outer spacing on the trailing side. */
+    offsetEnd?: SpacingAlias;
+    /** Apply negative outer spacing on the leading side. */
+    offsetStart?: SpacingAlias;
+    /** Apply negative outer spacing on the top side. */
+    offsetTop?: SpacingAlias;
+    /** Control the horizontal gutters between grid and flexbox items. */
+    columnGap?: SpacingAlias;
+    /** Control the vertical gutters between grid and flexbox items. */
+    rowGap?: SpacingAlias;
+}
+interface FlexStyleProps {
+    /** Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. */
+    alignContent?: FlexAlignContent;
+    /** 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. */
+    alignItems?: FlexAlignItems;
+    /** 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. */
+    alignSelf?: FlexAlignSelf;
+    /** Sets how a flex item will grow or shrink to fit the space available in its flex container. */
+    flex?: Flex;
+    /** Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */
+    flexDirection?: FlexDirection;
+    /** 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. */
+    flexGrow?: FlexGrow;
+    /** 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. */
+    flexShrink?: FlexShrink;
+    /** 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. */
+    flexWrap?: FlexWrap;
+    /** 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. */
+    justifyContent?: FlexJustifyContent;
+    /** 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 */
+    flexBasis?: FlexBasis;
+}
+interface TextStyleProps {
+    /** Color of a Text or Icon element */
+    color?: ForegroundColor;
+    /** Color of placeholder text */
+    placeholderColor?: ForegroundColor;
+    /** Font family for the text */
+    fontFamily?: TextVariant | FontAlias;
+    /** Font size of the text */
+    fontSize?: TextVariant;
+    /** Font weight of the text */
+    fontWeight?: TextVariant | FontWeightDescriptive;
+    /** Line height of the text */
+    lineHeight?: TextVariant;
+    /** Text alignment of the text */
+    textAlign?: 'center' | 'justify' | 'start' | 'end';
+    /** Sets the text transform for the text  */
+    textTransform?: TextVariant | TextTransform;
+}
+interface BackgroundStyleProps {
+    /** Sets the background color. */
+    backgroundColor?: BackgroundColor;
+}
+interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps {
+    /**
+     * When asChild is set to true, the component's child will be cloned and passed
+     * the props and behavior required to make it functional.
+     */
+    asChild?: boolean;
+}
+interface UniversalStackProps extends Omit<UniversalBoxProps, 'flexDirection'> {
+    gap?: SpacingAlias;
+}
+interface UniversalTextProps extends PropsWithChildren, TextStyleProps, UniversalBoxProps {
+    /** Style of text. */
+    variant?: TextVariant;
+    /** Color of the text. */
+    color?: ForegroundColor;
+}
+interface UniversalIconProps {
+    /** Icon to render from the icons package. */
+    name: SvgIcon;
+    /** Size of the icon. */
+    size?: IconSize;
+    /** Variant for icon. Either fill or outline. */
+    variant?: IconVariant;
+    /** Color of the icon. */
+    color?: ForegroundColor;
+}
+interface UniversalImageProps extends Omit<UniversalBoxProps, 'width' | 'height'>, ImageStyleProps {
+    /** The source URL of the image. */
+    src: string;
+    /**  Provides fallback (alternate) text to display when the image specified by the Image element is not loaded. */
+    alt?: string;
+    /** Width of the image in px. */
+    width?: number;
+    /** Height of the image in pixel. */
+    height?: number;
+}
+interface UniversalAvatarProps extends UniversalImageProps {
+    /** The size of the Avatar. */
+    size?: AvatarSize;
+    /** The shape of the Avatar. */
+    shape?: BorderRadius;
+}
+interface UniversalTextInputProps {
+    disabled?: boolean;
+    required?: boolean;
+    backgroundColor?: BackgroundColor;
+    borderColor?: LineColor;
+    borderWidth?: BorderWidth;
+    borderRadius?: BorderRadius;
+    color?: ForegroundColor;
+    fontSize?: TextVariant;
+    placeholderColor?: ForegroundColor;
+    spacingVertical?: SpacingAlias;
+    spacingHorizontal?: SpacingAlias;
+}
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+interface BoxProps extends UniversalBoxProps, DivProps {
+}
+
+type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
+type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
+    /** Ref passed to the inner container. */
+    ref?: Ref<HTMLElement>;
+    /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+    as?: TagName;
+} & JSX.IntrinsicElements[TagName] & UniversalTextProps;
+
+export type { BoxProps as B, DivProps as D, Overflow as O, TextProps as T, UniversalAvatarProps as U, UniversalTextProps as a, UniversalIconProps as b, UniversalStackProps as c, UniversalTextInputProps as d };

package/dist/client/index.cjs

@@ -1,3 +1,3 @@
 "use client";
-"use strict";var e=require("../chunk-JGIKFUBH.cjs"),t=require("../chunk-YUHY3FXT.cjs"),n=require("../chunk-DMMTEAJW.cjs"),i=require("../chunk-5WBROFT5.cjs"),a=require("@yahoo/uds/fixtures"),o=require("react/jsx-runtime"),r=require("framer-motion"),s=require("react"),c={scale:.7,opacity:0},l={scale:[.7,.7,1],opacity:[0,0,1],transition:{times:[0,.5,1]}},u={icon:l,hide:c,loading:c},d={loading:l,hide:c,icon:c},m=`var(${i.BUTTON_CSS_VAR_MAP.columnGap})`,h=`var(${i.BUTTON_CSS_VAR_MAP.iconSize})`,p={rest:{scale:`var(${i.BUTTON_CSS_VAR_MAP.effects.scale.rest})`},hover:{scale:`var(${i.BUTTON_CSS_VAR_MAP.effects.scale.hover})`},pressed:{scale:`var(${i.BUTTON_CSS_VAR_MAP.effects.scale.pressed})`},withoutIcon:{columnGap:"0px"},withIcon:{columnGap:m}},g={hide:{width:"0px",opacity:0,display:"none"},loading:{width:h,display:"flex",opacity:1},icon:{width:h,display:"flex",opacity:1}},x=({size:e,variant:t})=>{if("outline"===t)switch(e){case"sm":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M7.9 2.7a5.2 5.2 0 1 0 5.2 5.2h1.6a6.8 6.8 0 1 1-6.8-6.8.8.8 0 1 1 0 1.6"})});case"md":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M12 4a8 8 0 1 0 8 8h2c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2a1 1 0 1 1 0 2"})});case"lg":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M16.15 4.3C9.605 4.3 4.3 9.605 4.3 16.15S9.605 28 16.15 28 28 22.695 28 16.15h2.3c0 7.815-6.335 14.15-14.15 14.15S2 23.965 2 16.15 8.335 2 16.15 2a1.15 1.15 0 0 1 0 2.3"})})}if("fill"===t)switch(e){case"sm":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M8 2.9A5.1 5.1 0 1 0 13.1 8h1.8A6.9 6.9 0 1 1 8 1.1a.9.9 0 1 1 0 1.8"})});case"md":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M12.15 4.3A7.85 7.85 0 1 0 20 12.15h2.3c0 5.606-4.544 10.15-10.15 10.15S2 17.756 2 12.15 6.544 2 12.15 2a1.15 1.15 0 0 1 0 2.3"})});case"lg":return o.jsx(o.Fragment,{children:o.jsx("path",{fill:"currentColor",d:"M16.35 4.7C9.916 4.7 4.7 9.916 4.7 16.35S9.916 28 16.35 28 28 22.784 28 16.35h2.7c0 7.925-6.425 14.35-14.35 14.35S2 24.275 2 16.35 8.425 2 16.35 2a1.35 1.35 0 1 1 0 2.7"})})}return o.jsx(o.Fragment,{})},f=()=>import("../motionFeatures-P3FQL2KP.cjs").then((({domAnimation:e})=>e));/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */function v({reducedMotion:e="user",children:i,layoutVariant:a="subtle",layoutSpeed:c="3",colorVariant:l="smooth",colorSpeed:u="3"}){const d=n.motion[a][c],m=n.motion[l][u],[h,p]=s.useState(d),[g,x]=s.useState(m),v={variant:l,speed:u},j=t.getMotionVar({...v,control:"stiffness"}),b=t.getMotionVar({...v,control:"damping"}),S={variant:a,speed:c},y=t.getMotionVar({...S,control:"stiffness"}),M=t.getMotionVar({...S,control:"damping"});s.useEffect((()=>{const e=getComputedStyle(document.documentElement),t={damping:Number(e.getPropertyValue(M)),stiffness:Number(e.getPropertyValue(y))},n={damping:Number(e.getPropertyValue(b)),stiffness:Number(e.getPropertyValue(j))};p(t),x(n)}),[b,j,M,y]);const I=s.useMemo((()=>({type:"spring",mass:1,...h,layout:h,opacity:g,color:g,borderColor:g,backgroundColor:g})),[g,h]);return o.jsx(r.LazyMotion,{features:f,strict:!0,children:o.jsx(r.MotionConfig,{transition:I,reducedMotion:e,children:i})})}var j=e.createSlot(),b=r.m.create(j),S=s.forwardRef((function({palette:t,variant:n,size:i,startIcon:c,endIcon:l,iconVariant:m,loading:h,disableEffects:f,children:j,asChild:S,className:y,...M},I){const N=s.useRef(null);s.useImperativeHandle(I,(()=>N.current));const C=l?"icon":"hide",w=(({startIcon:e,endIcon:t,loading:n})=>e||t||n?"withIcon":"withoutIcon")({startIcon:c,endIcon:l,loading:h}),V=(({loading:e,startIcon:t})=>e?"loading":t?"icon":"hide")({loading:h,startIcon:c}),A={button:e.getStyles({buttonSize:i,buttonVariant:n,buttonPalette:t,className:e.cx("uds-button","uds-ring","uds-hit-target",h&&"uds-button-loading",f&&"uds-button-without-effects","withIcon"===w&&"uds-button-with-gap",y)}),content:"uds-button-content truncate",iconContainer:"uds-button-icon-container flex overflow-clip",loading:"uds-button-icon start-content animate-spin",start:"uds-button-icon start-content",end:"uds-button-icon end-content"},z=r.useReducedMotion()?"smooth":"subtle",P=s.useMemo((()=>o.jsx(r.m.span,{className:A.iconContainer,initial:!1,variants:g,animate:V,children:o.jsxs(r.AnimatePresence,{initial:!1,mode:"popLayout",children:[h&&o.jsx(r.m.span,{variants:d,initial:"hide",animate:"loading",exit:"hide",children:o.jsx(e.Icon,{size:a.buttonIconSvgSize,name:x,variant:m,color:"current",className:A.loading})},"loading"),c&&!h&&o.jsx(r.m.span,{variants:u,initial:"hide",animate:"icon",exit:"hide",children:o.jsx(e.Icon,{size:a.buttonIconSvgSize,name:c,variant:m,color:"current",className:A.start})},c.name)]})})),[A.iconContainer,A.loading,A.start,V,h,m,c]),T=s.useMemo((()=>o.jsx(r.m.span,{className:A.iconContainer,initial:!1,variants:g,animate:C,children:o.jsx(r.AnimatePresence,{initial:!1,mode:"popLayout",children:l&&o.jsx(r.m.span,{variants:u,initial:"hide",animate:"icon",exit:"hide",children:o.jsx(e.Icon,{size:a.buttonIconSvgSize,name:l,variant:m,color:"current",className:A.start})},l.name)})})),[A.iconContainer,A.start,l,C,m]),_=s.useMemo((()=>f?{...p,rest:{},hover:{},pressed:{}}:p),[f]);return S&&s.isValidElement(j)?o.jsx(v,{layoutSpeed:"3",layoutVariant:z,children:o.jsx(b,{className:A.button,initial:["hide",w],animate:w,variants:_,whileHover:"hover",whileTap:"pressed",...M,children:s.cloneElement(j,j.props,o.jsxs(o.Fragment,{children:[P,o.jsx("span",{className:A.content,children:j.props.children}),T]}))})}):o.jsx(v,{layoutSpeed:"3",layoutVariant:z,children:o.jsxs(r.m.button,{ref:N,className:A.button,initial:["hide",w],animate:w,variants:_,whileHover:"hover",whileTap:"pressed",...M,children:[P,o.jsx("span",{className:A.content,children:j}),T]})})})),y=s.forwardRef((function({palette:t,variant:n,size:i,iconVariant:c,loading:l,disableEffects:m,name:h,className:g,children:f,...j},b){const S=s.useRef(null);s.useImperativeHandle(b,(()=>S.current));const y=s.useMemo((()=>({button:e.getStyles({buttonVariant:n,buttonPalette:t,iconButtonSize:i,className:e.cx("uds-icon-button","uds-button","uds-ring","uds-hit-target",l&&"uds-button-loading",m&&"uds-button-without-effects",g)}),loading:"uds-button-icon start-content animate-spin",icon:"uds-button-icon start-content"})),[t,n,g,m,i,l]),M=r.useReducedMotion(),I=s.useMemo((()=>M?"smooth":"subtle"),[M]),N=s.useMemo((()=>{const{rest:e,hover:t,pressed:n}=p;return m?{rest:{},hover:{},pressed:{}}:{rest:e,hover:t,pressed:n}}),[m]);return o.jsx(v,{layoutSpeed:"3",layoutVariant:I,reducedMotion:m?"always":"user",children:o.jsx(r.m.button,{ref:S,className:y.button,initial:"icon",variants:N,whileHover:"hover",whileTap:"pressed",...j,children:o.jsxs(r.AnimatePresence,{initial:!1,mode:"popLayout",children:[l&&o.jsx(r.m.span,{variants:d,initial:"loading",animate:"loading",exit:"hide",children:o.jsx(e.Icon,{size:a.buttonIconSvgSize,name:x,variant:c,color:"current",className:y.loading})},"loading"),h&&!l&&o.jsx(r.m.span,{variants:u,initial:"icon",animate:"icon",exit:"hide",children:f||o.jsx(e.Icon,{size:a.buttonIconSvgSize,name:h,variant:c,color:"current",className:y.icon})},h.name)]})})})}));
-/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */exports.Button=S,exports.IconButton=y,exports.SpringMotionConfig=v;
+"use strict";var e=require("../chunk-JGIKFUBH.cjs"),t=require("../chunk-YUHY3FXT.cjs"),o=require("../chunk-DMMTEAJW.cjs"),n=require("../chunk-5WBROFT5.cjs"),r=require("@yahoo/uds/fixtures"),i=require("react/jsx-runtime"),a=require("framer-motion"),s=require("react"),c={scale:.7,opacity:0},l={scale:[.7,.7,1],opacity:[0,0,1],transition:{times:[0,.5,1]}},d={icon:l,hide:c,loading:c},u={loading:l,hide:c,icon:c},m=`var(${n.BUTTON_CSS_VAR_MAP.columnGap})`,p=`var(${n.BUTTON_CSS_VAR_MAP.iconSize})`,h={rest:{scale:`var(${n.BUTTON_CSS_VAR_MAP.effects.scale.rest})`},hover:{scale:`var(${n.BUTTON_CSS_VAR_MAP.effects.scale.hover})`},pressed:{scale:`var(${n.BUTTON_CSS_VAR_MAP.effects.scale.pressed})`},withoutIcon:{columnGap:"0px"},withIcon:{columnGap:m}},f={hide:{width:"0px",opacity:0,display:"none"},loading:{width:p,display:"flex",opacity:1},icon:{width:p,display:"flex",opacity:1}},g=({size:e,variant:t})=>{if("outline"===t)switch(e){case"sm":return i.jsx(i.Fragment,{children:i.jsx("path",{fill:"currentColor",d:"M7.9 2.7a5.2 5.2 0 1 0 5.2 5.2h1.6a6.8 6.8 0 1 1-6.8-6.8.8.8 0 1 1 0 1.6"})});case"md":return i.jsx(i.Fragment,{children:i.jsx("path",{fill:"currentColor",d:"M12 4a8 8 0 1 0 8 8h2c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2a1 1 0 1 1 0 2"})});case"lg":return i.jsx(i.Fragment,{children:i.jsx("path",{fill:"currentColor",d:"M16.15 4.3C9.605 4.3 4.3 9.605 4.3 16.15S9.605 28 16.15 28 28 22.695 28 16.15h2.3c0 7.815-6.335 14.15-14.15 14.15S2 23.965 2 16.15 8.335 2 16.15 2a1.15 1.15 0 0 1 0 2.3"})})}if("fill"===t)switch(e){case"sm":return i.jsx(i.Fragment,{children:i.jsx("path",{fill:"currentColor",d:"M8 2.9A5.1 5.1 0 1 0 13.1 8h1.8A6.9 6.9 0 1 1 8 1.1a.9.9 0 1 1 0 1.8"})});case"md":return i.jsx(i.Fragment,{children:i.jsx("path",{fill:"currentColor",d:"M12.15 4.3A7.85 7.85 0 1 0 20 12.15h2.3c0 5.606-4.544 10.15-10.15 10.15S2 17.756 2 12.15 6.544 2 12.15 2a1.15 1.15 0 0 1 0 2.3"})});case"lg":return i.jsx(i.Fragment,{children:i.jsx("path",{fill:"currentColor",d:"M16.35 4.7C9.916 4.7 4.7 9.916 4.7 16.35S9.916 28 16.35 28 28 22.784 28 16.35h2.7c0 7.925-6.425 14.35-14.35 14.35S2 24.275 2 16.35 8.425 2 16.35 2a1.35 1.35 0 1 1 0 2.7"})})}return i.jsx(i.Fragment,{})},b=()=>import("../motionFeatures-P3FQL2KP.cjs").then((({domAnimation:e})=>e));/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */function x({reducedMotion:e="user",children:n,layoutVariant:r="subtle",layoutSpeed:c="3",colorVariant:l="smooth",colorSpeed:d="3"}){const u=o.motion[r][c],m=o.motion[l][d],[p,h]=s.useState(u),[f,g]=s.useState(m),x={variant:l,speed:d},S=t.getMotionVar({...x,control:"stiffness"}),v=t.getMotionVar({...x,control:"damping"}),j={variant:r,speed:c},C=t.getMotionVar({...j,control:"stiffness"}),y=t.getMotionVar({...j,control:"damping"});s.useEffect((()=>{const e=getComputedStyle(document.documentElement),t={damping:Number(e.getPropertyValue(y)),stiffness:Number(e.getPropertyValue(C))},o={damping:Number(e.getPropertyValue(v)),stiffness:Number(e.getPropertyValue(S))};h(t),g(o)}),[v,S,y,C]);const w=s.useMemo((()=>({type:"spring",mass:1,...p,layout:p,opacity:f,color:f,borderColor:f,backgroundColor:f})),[f,p]);return i.jsx(a.LazyMotion,{features:b,strict:!0,children:i.jsx(a.MotionConfig,{transition:w,reducedMotion:e,children:n})})}var S=e.createSlot(),v=a.m.create(S),j=s.forwardRef((function({palette:t,variant:o,size:n,startIcon:c,endIcon:l,iconVariant:m,loading:p,disableEffects:b,children:S,asChild:j,className:C,...y},w){const M=s.useRef(null);s.useImperativeHandle(w,(()=>M.current));const I=l?"icon":"hide",V=(({startIcon:e,endIcon:t,loading:o})=>e||t||o?"withIcon":"withoutIcon")({startIcon:c,endIcon:l,loading:p}),N=(({loading:e,startIcon:t})=>e?"loading":t?"icon":"hide")({loading:p,startIcon:c}),T={button:e.getStyles({buttonSize:n,buttonVariant:o,buttonPalette:t,className:e.cx("uds-button","uds-ring","uds-hit-target",p&&"uds-button-loading",b&&"uds-button-without-effects","withIcon"===V&&"uds-button-with-gap",C)}),content:"uds-button-content truncate",iconContainer:"uds-button-icon-container flex overflow-clip",loading:"uds-button-icon start-content animate-spin",start:"uds-button-icon start-content",end:"uds-button-icon end-content"},B=a.useReducedMotion()?"smooth":"subtle",z=s.useMemo((()=>i.jsx(a.m.span,{className:T.iconContainer,initial:!1,variants:f,animate:N,children:i.jsxs(a.AnimatePresence,{initial:!1,mode:"popLayout",children:[p&&i.jsx(a.m.span,{variants:u,initial:"hide",animate:"loading",exit:"hide",children:i.jsx(e.Icon,{size:r.buttonIconSvgSize,name:g,variant:m,color:"current",className:T.loading})},"loading"),c&&!p&&i.jsx(a.m.span,{variants:d,initial:"hide",animate:"icon",exit:"hide",children:i.jsx(e.Icon,{size:r.buttonIconSvgSize,name:c,variant:m,color:"current",className:T.start})},c.name)]})})),[T.iconContainer,T.loading,T.start,N,p,m,c]),R=s.useMemo((()=>i.jsx(a.m.span,{className:T.iconContainer,initial:!1,variants:f,animate:I,children:i.jsx(a.AnimatePresence,{initial:!1,mode:"popLayout",children:l&&i.jsx(a.m.span,{variants:d,initial:"hide",animate:"icon",exit:"hide",children:i.jsx(e.Icon,{size:r.buttonIconSvgSize,name:l,variant:m,color:"current",className:T.start})},l.name)})})),[T.iconContainer,T.start,l,I,m]),E=s.useMemo((()=>b?{...h,rest:{},hover:{},pressed:{}}:h),[b]);return j&&s.isValidElement(S)?i.jsx(x,{layoutSpeed:"3",layoutVariant:B,children:i.jsx(v,{className:T.button,initial:["hide",V],animate:V,variants:E,whileHover:"hover",whileTap:"pressed",...y,children:s.cloneElement(S,S.props,i.jsxs(i.Fragment,{children:[z,i.jsx("span",{className:T.content,children:S.props.children}),R]}))})}):i.jsx(x,{layoutSpeed:"3",layoutVariant:B,children:i.jsxs(a.m.button,{ref:M,className:T.button,initial:["hide",V],animate:V,variants:E,whileHover:"hover",whileTap:"pressed",...y,children:[z,i.jsx("span",{className:T.content,children:S}),R]})})})),C=s.forwardRef((function({palette:t,variant:o,size:n,iconVariant:c,loading:l,disableEffects:m,name:p,className:f,children:b,...S},v){const j=s.useRef(null);s.useImperativeHandle(v,(()=>j.current));const C=s.useMemo((()=>({button:e.getStyles({buttonVariant:o,buttonPalette:t,iconButtonSize:n,className:e.cx("uds-icon-button","uds-button","uds-ring","uds-hit-target",l&&"uds-button-loading",m&&"uds-button-without-effects",f)}),loading:"uds-button-icon start-content animate-spin",icon:"uds-button-icon start-content"})),[t,o,f,m,n,l]),y=a.useReducedMotion(),w=s.useMemo((()=>y?"smooth":"subtle"),[y]),M=s.useMemo((()=>{const{rest:e,hover:t,pressed:o}=h;return m?{rest:{},hover:{},pressed:{}}:{rest:e,hover:t,pressed:o}}),[m]);return i.jsx(x,{layoutSpeed:"3",layoutVariant:w,reducedMotion:m?"always":"user",children:i.jsx(a.m.button,{ref:j,className:C.button,initial:"icon",variants:M,whileHover:"hover",whileTap:"pressed",...S,children:i.jsxs(a.AnimatePresence,{initial:!1,mode:"popLayout",children:[l&&i.jsx(a.m.span,{variants:u,initial:"loading",animate:"loading",exit:"hide",children:i.jsx(e.Icon,{size:r.buttonIconSvgSize,name:g,variant:c,color:"current",className:C.loading})},"loading"),p&&!l&&i.jsx(a.m.span,{variants:d,initial:"icon",animate:"icon",exit:"hide",children:b||i.jsx(e.Icon,{size:r.buttonIconSvgSize,name:p,variant:c,color:"current",className:C.icon})},p.name)]})})})})),y=e.createSlot(),w=s.forwardRef((function({className:t,asChild:o,onPress:n,onClick:r=n,backgroundColor:a,borderRadius:s,borderTopStartRadius:c,borderTopEndRadius:l,borderBottomStartRadius:d,borderBottomEndRadius:u,borderColor:m,borderStartColor:p,borderEndColor:h,borderTopColor:f,borderBottomColor:g,borderWidth:b,borderVerticalWidth:x,borderHorizontalWidth:S,borderStartWidth:v,borderEndWidth:j,borderTopWidth:C,borderBottomWidth:w,alignContent:M,alignItems:I,alignSelf:V,flex:N,flexDirection:T,flexGrow:B,flexShrink:z,flexWrap:R,justifyContent:E,flexBasis:A,display:P,overflow:W,overflowX:_,overflowY:F,position:H,spacing:k,spacingHorizontal:G,spacingVertical:q,spacingBottom:U,spacingEnd:O,spacingStart:L,spacingTop:$,offset:Y,offsetVertical:D,offsetHorizontal:X,offsetBottom:J,offsetEnd:K,offsetStart:Q,offsetTop:Z,columnGap:ee,rowGap:te,...oe},ne){const re=e.getStyles({backgroundColor:a,borderRadius:s,borderTopStartRadius:c,borderTopEndRadius:l,borderBottomStartRadius:d,borderBottomEndRadius:u,borderColor:m,borderStartColor:p,borderEndColor:h,borderTopColor:f,borderBottomColor:g,borderWidth:b,borderVerticalWidth:x,borderHorizontalWidth:S,borderStartWidth:v,borderEndWidth:j,borderTopWidth:C,borderBottomWidth:w,alignContent:M,alignItems:I,alignSelf:V,flex:N,flexDirection:T,flexGrow:B,flexShrink:z,flexWrap:R,justifyContent:E,flexBasis:A,display:P,overflow:W,overflowX:_,overflowY:F,position:H,spacing:k,spacingHorizontal:G,spacingVertical:q,spacingBottom:U,spacingEnd:O,spacingStart:L,spacingTop:$,offset:Y,offsetVertical:D,offsetHorizontal:X,offsetBottom:J,offsetEnd:K,offsetStart:Q,offsetTop:Z,columnGap:ee,rowGap:te,className:t}),ie=o?y:"button";return i.jsx(ie,{className:re,ref:ne,onClick:r,...oe})}));
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */exports.Button=j,exports.IconButton=C,exports.Pressable=w,exports.SpringMotionConfig=x;

package/dist/client/index.d.cts

@@ -1,12 +1,12 @@
-import { e as UniversalButtonProps, f as UniversalIconButtonProps, M as MotionVariant, g as MotionVariantSpeed } from '../types-Pyccco5Q.cjs';
+import { e as UniversalButtonProps, f as UniversalIconButtonProps, g as UniversalPressableProps, M as MotionVariant, h as MotionVariantSpeed } from '../types-DsMvZpWN.cjs';
 import { HTMLMotionProps, MotionConfigProps } from 'framer-motion';
 import * as react from 'react';
 import react__default from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import '@yahoo/uds-icons/types';
 
-type HtmlButtonProps$1 = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<react__default.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
-interface ButtonProps extends HtmlButtonProps$1, UniversalButtonProps {
+type HtmlButtonProps$2 = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<react__default.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+interface ButtonProps extends HtmlButtonProps$2, UniversalButtonProps {
 }
 /**
  * **🖲️ A button element that can be used to trigger an action**
@@ -42,8 +42,8 @@ interface ButtonProps extends HtmlButtonProps$1, UniversalButtonProps {
  **/
 declare const Button: react__default.ForwardRefExoticComponent<ButtonProps & react__default.RefAttributes<HTMLButtonElement>>;
 
-type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
-interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
+type HtmlButtonProps$1 = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
+interface IconButtonProps extends HtmlButtonProps$1, UniversalIconButtonProps {
 }
 /**
  * **⚙️️ An icon button element that can be used to trigger an action**
@@ -77,6 +77,46 @@ interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
  **/
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
+interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
+}
+/**
+ * **🖲️ A primitive component for creating button interactions with accessibility support**
+ *
+ * @type Client component
+ *
+ * @description
+ * The Pressable component is a primitive component that can be used
+ * to create button interactions with accessibility support. It can be used
+ * to trigger an action, such as submitting a form, navigating to a new page,
+ * or adding interactivity to a section or card.
+ *
+ * @example
+ * ```tsx
+ * import { Pressable } from '@yahoo/uds';
+ *
+ * <Pressable
+ *   backgroundColor="secondary"
+ *   borderWidth="thin"
+ *   borderColor="primary"
+ *   borderRadius="lg"
+ *   onPress={() => console.log('Pressed!')}
+ *  >
+ *    <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
+ * </Pressable>
+ * ```
+ *
+ * @usage
+ * - If you need to add interactivity to a section or card.
+ * - If you need a highly customized version of [Button](./button)
+ *
+ * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
+ *
+ * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
+ *
+ */
+declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
+
 interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | 'reducedMotion'> {
     layoutVariant?: MotionVariant;
     layoutSpeed?: MotionVariantSpeed;
@@ -94,4 +134,4 @@ interface SpringMotionConfigProps extends Pick<MotionConfigProps, 'children' | '
  */
 declare function SpringMotionConfig({ reducedMotion, children, layoutVariant, layoutSpeed, colorVariant, colorSpeed, }: SpringMotionConfigProps): react_jsx_runtime.JSX.Element;
 
-export { Button, type ButtonProps, IconButton, type IconButtonProps, SpringMotionConfig, type SpringMotionConfigProps };
+export { Button, type ButtonProps, IconButton, type IconButtonProps, Pressable, type PressableProps, SpringMotionConfig, type SpringMotionConfigProps };