@yahoo/uds 0.2.2 → 0.4.0

package/dist/{types-CzJpH_Oi.d.ts → types-COiuE8XK.d.ts}

@@ -20,55 +20,19 @@ type Palette = {
 type Hue = 'gray' | 'purple' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'mint' | 'green' | 'lime' | 'citron' | 'yellow' | 'brown' | 'nude' | 'orange' | 'sunset' | 'red' | 'rose' | 'pink' | 'magenta' | 'carbon';
 type HueStep = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15';
 type SpectrumColor = `${Hue}-${HueStep}`;
-type CorePalette = {
-    accent: PaletteValue;
-    alert: PaletteValue;
-    brand: PaletteValue;
-    positive: PaletteValue;
-    warning: PaletteValue;
-};
-type CorePaletteAlias = keyof CorePalette;
-type BackgroundPalette = {
-    primary: PaletteValue;
-    secondary: PaletteValue;
-};
-type BackgroundPaletteAlias = keyof BackgroundPalette;
-type BackgroundWashPalette = {
-    'accent-wash': PaletteValue;
-    'alert-wash': PaletteValue;
-    'brand-wash': PaletteValue;
-    'positive-wash': PaletteValue;
-    'warning-wash': PaletteValue;
-};
-type BackgroundWashPaletteAlias = keyof BackgroundWashPalette;
-type ElevationPalette = {
-    'elevation-1': PaletteValue;
-    'elevation-2': PaletteValue;
-    'elevation-3': PaletteValue;
-    'elevation-3-inverse': PaletteValue;
-    overlay: PaletteValue;
-};
-type ElevationPaletteAlias = keyof ElevationPalette;
-type ForegroundPalette = {
-    primary: PaletteValue;
-    secondary: PaletteValue;
-    tertiary: PaletteValue;
-    muted: PaletteValue;
-    'on-color': PaletteValue;
-};
-type ForegroundPaletteAlias = keyof ForegroundPalette;
-type LinePalette = {
-    primary: PaletteValue;
-    secondary: PaletteValue;
-    tertiary: PaletteValue;
-    muted: PaletteValue;
-};
-type LinePaletteAlias = keyof LinePalette;
+type CorePalette = Record<CorePaletteAlias, PaletteValue>;
+type CorePaletteAlias = 'accent' | 'alert' | 'brand' | 'positive' | 'warning';
+type BackgroundPaletteAlias = 'primary' | 'secondary';
+type BackgroundPalette = Record<BackgroundPaletteAlias, PaletteValue>;
+type ForegroundPalette = Record<ForegroundPaletteAlias, PaletteValue>;
+type ForegroundPaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'on-color';
+type LinePalette = Record<LinePaletteAlias, PaletteValue>;
+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 | BackgroundWashPaletteAlias | ElevationPaletteAlias | AlwaysPaletteAlias;
+type BackgroundColor = CorePaletteAlias | BackgroundPaletteAlias | AlwaysPaletteAlias;
 type TextVariant = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'caption1' | 'caption2' | 'legal1';
 type FontFamilyGlobalAlias = 'icons' | 'sans' | 'sans-beta' | 'sans-condensed' | 'serif-text' | 'serif-display';
 type FontFamilyGlobalConfig = Record<FontFamilyGlobalAlias, {
@@ -88,29 +52,15 @@ type FontFamilyConfig = Record<TextVariant, FontFamilyGlobalAlias>;
 type FontWeightConfig = Record<TextVariant, FontWeightDescriptive>;
 type LineHeightConfig = Record<TextVariant, LineHeight>;
 type ConfigurableTextProperty = 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'textTransform';
-type AvatarSizeConfig = {
-    s: number;
-    m: number;
-    l: number;
-};
-type AvatarSize = keyof AvatarSizeConfig;
+type AvatarSize = 's' | 'm' | 'l';
+type AvatarSizeConfig = Record<AvatarSize, number>;
 type AvatarShape = BorderRadius;
-type IconSizeConfig = {
-    s: number;
-    m: number;
-    l: number;
-};
-type IconSize = keyof IconSizeConfig;
-type AspectRatioConfig = Record<string, string>;
-type AspectRatio = keyof AspectRatioConfig;
+type IconSize = 'sm' | 'md' | 'lg';
+type IconSizeConfig = Record<IconSize, number>;
 type SpacingAlias = 'none' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14';
 type SpacingConfig = Record<SpacingAlias, number>;
-type ZIndex = 'auto' | '0' | '10' | '20' | '30' | '40' | '50';
-type ZIndexConfig = Record<ZIndex, string>;
 type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 type BorderRadiusConfig = Record<BorderRadius, number>;
-type Elevation = '1' | '2' | '3';
-type ElevationConfig = Record<Elevation, BoxShadowConfig>;
 type BorderWidth = 'none' | 'thin' | 'medium' | 'thick';
 type BorderWidthConfig = Record<BorderWidth, number>;
 type BoxShadowConfig = {
@@ -120,11 +70,7 @@ type BoxShadowConfig = {
     blurRadius: number;
     spreadRadius: number;
 }[];
-type Opacity = '0' | '5' | '10' | '20' | '25' | '30' | '40' | '50' | '60' | '70' | '75' | '80' | '90' | '95' | '100';
-type ColorModeConfig = {
-    light: ColorsConfig;
-    dark: ColorsConfig;
-};
+type ColorModeConfig = Record<ColorMode, ColorsConfig>;
 type ColorsConfig = {
     palette: PaletteConfig;
     spectrum: SpectrumConfig;
@@ -134,8 +80,6 @@ type SpectrumConfig = Record<Hue, SpectrumValue>;
 type PaletteConfig = {
     core: CorePalette;
     background: BackgroundPalette;
-    backgroundWash: BackgroundWashPalette;
-    elevation: ElevationPalette;
     foreground: ForegroundPalette;
     line: LinePalette;
 };
@@ -151,27 +95,16 @@ type ScaleConfig = {
     lineHeight: LineHeightConfig;
     textTransform: TextTransformConfig;
 };
-type ScaleModeConfig = {
-    xSmall: ScaleConfig;
-    small: ScaleConfig;
-    medium: ScaleConfig;
-    large: ScaleConfig;
-    xLarge: ScaleConfig;
-    xxLarge: ScaleConfig;
-    xxxLarge: ScaleConfig;
-};
+type ScaleModeConfig = Record<ScaleMode, ScaleConfig>;
 type UniversalTokensConfig = {
     colorMode: ColorModeConfig;
     scaleMode: ScaleModeConfig;
-    aspectRatio: Record<string, string>;
     fontFamily: FontFamilyGlobalConfig;
-    elevation: ElevationConfig;
-    zIndex: ZIndexConfig;
 };
 type PlatformMode = 'web' | 'ios' | 'android';
-type ColorMode = keyof ColorModeConfig;
+type ColorMode = 'light' | 'dark';
 type ColorModeForApp = ColorMode | 'system';
-type ScaleMode = keyof ScaleModeConfig;
+type ScaleMode = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
 type ScaleModeForApp = ScaleMode | 'system';
 type HighContrastMode = boolean;
 type RegionMode = '🇺🇸 US' | '🇩🇪 DE' | '🇫🇷 FR' | '🇨🇳 CN';
@@ -211,20 +144,6 @@ type ImageStyleProps = {
     contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 };
 interface BorderStyleProps {
-    /** Add a border around all sides of the box. */
-    bordered?: boolean;
-    /** Add a border to the top side of the box. */
-    borderedTop?: boolean;
-    /** Add a border to the bottom side of the box. */
-    borderedBottom?: boolean;
-    /** Add a border to the leading side of the box. */
-    borderedStart?: boolean;
-    /** Add a border to the trailing side of the box. */
-    borderedEnd?: boolean;
-    /** Add a border to the leading and trailing sides of the box. */
-    borderedHorizontal?: boolean;
-    /** Add a border to the top and bottom sides of the box. */
-    borderedVertical?: boolean;
     /** Add a border radius to all corners of the box. */
     borderRadius?: BorderRadius;
     /** Add a border radius to top left corner of the box. */
@@ -237,21 +156,21 @@ interface BorderStyleProps {
     borderBottomEndRadius?: BorderRadius;
     /** Adds a custom border color from the palette */
     borderColor?: LineColor;
-    /** Utility for controlling an element's border color on active. */
+    /** Border color on active. */
     borderColorOnActive?: LineColor;
-    /** Utility for controlling an element's border color on focus. */
+    /** Border color on focus. */
     borderColorOnFocus?: LineColor;
-    /** Utility for controlling an element's border color on checked. */
+    /** Border color on checked. */
     borderColorOnChecked?: LineColor;
-    /** Utility for controlling an element's border color on hover. */
+    /** Border color on hover. */
     borderColorOnHover?: LineColor;
-    /** Adds a custom border color from the palette */
+    /** Start border color */
     borderStartColor?: LineColor;
-    /** Adds a custom border color from the palette */
+    /** End border color */
     borderEndColor?: LineColor;
-    /** Adds a custom border color from the palette */
+    /** Top border color */
     borderTopColor?: LineColor;
-    /** Adds a custom border color from the palette */
+    /** Bottom border color */
     borderBottomColor?: LineColor;
     /** Shorthand property to the width of an element's border. */
     borderWidth?: BorderWidth;
@@ -271,8 +190,6 @@ interface BorderStyleProps {
 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;
-    /** Sets the z-order of a positioned element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one. */
-    zIndex?: ZIndex;
     /** 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. */
@@ -338,9 +255,6 @@ interface FlexStyleProps {
     /** 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 OpacityStyleProps {
-    opacity?: Opacity;
-}
 interface SizingStyleProps {
     /** Sets the height of an element */
     height?: Height;
@@ -360,45 +274,33 @@ interface StateStyleProps {
     focusable?: boolean;
 }
 interface TextStyleProps {
-    /** Utility for controlling the color of a Text or Icon element */
+    /** Color of a Text or Icon element */
     color?: ForegroundColor;
-    /** Utility for controlling the color of a Text or Icon element when checked */
-    colorChecked?: ForegroundColor;
-    /** Utility for controlling the color of a placeholder element */
+    /** Color of placeholder text */
     placeholderColor?: ForegroundColor;
-    /** Utility for controlling the font family of a Text element */
+    /** Font family for the text */
     fontFamily?: TextVariant | FontFamilyGlobalAlias;
-    /** Utility for controlling the font size of a Text element */
+    /** Font size of the text */
     fontSize?: TextVariant;
-    /** Utility for controlling the font weight of a Text element */
+    /** Font weight of the text */
     fontWeight?: TextVariant | FontWeightDescriptive;
-    /** Utility for controlling the line height of a Text element */
+    /** Line height of the text */
     lineHeight?: TextVariant;
-    /** Utility for controlling the text alignment of a Text element */
+    /** Text alignment of the text */
     textAlign?: 'center' | 'justify' | 'start' | 'end';
-    /** Utility for controlling the text transformation of a Text element */
+    /** Sets the text transform for the text  */
     textTransform?: TextVariant | TextTransform;
 }
 interface BackgroundStyleProps {
-    /** Utility for controlling an element's background color. */
+    /** Sets the background color. */
     backgroundColor?: BackgroundColor;
-    /** Utility for controlling an element's background color on active. */
-    backgroundColorOnActive?: BackgroundColor;
-    /** Utility for controlling an element's background color on focus. */
-    backgroundColorOnFocus?: BackgroundColor;
-    /** Utility for controlling an element's background color on checked. */
-    backgroundColorOnChecked?: BackgroundColor;
-    /** Utility for controlling an element's background color on hover. */
-    backgroundColorOnHover?: BackgroundColor;
-    /** Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. */
-    elevation?: Elevation;
 }
 type CustomSizingStyleProps = {
     iconSize?: IconSize;
     avatarSize?: AvatarSize;
 };
-type StyleProps = BackgroundStyleProps & BorderStyleProps & LayoutStyleProps & FlexStyleProps & SpacingStyleProps & TextStyleProps & OpacityStyleProps & SizingStyleProps & ImageStyleProps & CustomSizingStyleProps;
-interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, OpacityStyleProps, SizingStyleProps, SpacingStyleProps {
+type StyleProps = BackgroundStyleProps & BorderStyleProps & LayoutStyleProps & FlexStyleProps & SpacingStyleProps & TextStyleProps & SizingStyleProps & ImageStyleProps & CustomSizingStyleProps;
+interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SizingStyleProps, 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.
@@ -409,17 +311,24 @@ 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;
 }
 type IconName = IconName$1;
-interface UniversalIconProps extends Omit<UniversalTextProps, 'children' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight'>, UniversalBoxProps {
-    size?: IconSize;
+interface UniversalIconProps extends Omit<TextStyleProps, 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight'>, UniversalBoxProps {
+    /** Size of the icon. */
+    size: IconSize;
+    /** Name of the icon. */
     name: IconName;
+    /** Color of the icon. */
+    color?: ForegroundColor;
 }
 interface UniversalPressableProps extends UniversalBoxProps {
     onPress?: () => void;
 }
-type ButtonVariant = CorePaletteAlias | `${CorePaletteAlias}-outline` | `${CorePaletteAlias}-ghost` | `${CorePaletteAlias}-wash` | 'primary-ghost' | 'primary-outline' | 'secondary';
+type ButtonVariant = CorePaletteAlias | `${CorePaletteAlias}-outline` | `${CorePaletteAlias}-ghost` | 'primary-ghost' | 'primary-outline' | 'secondary';
 type ButtonSize = 's' | 'm' | 'l';
 interface UniversalIconButtonProps {
     /**
@@ -434,6 +343,8 @@ interface UniversalIconButtonProps {
     size?: ButtonSize;
     /** The name of the icon to be displayed at the start of the button. */
     name: IconName;
+    /** Color for the icon. */
+    color: ForegroundColor;
 }
 interface UniversalButtonProps {
     /**
@@ -481,4 +392,4 @@ interface UniversalTextInputProps {
     spacingHorizontal?: SpacingAlias;
 }
 
-export { type Display as $, type AlwaysPalette as A, type BackgroundPalette as B, type ColorMode as C, type BackgroundColor as D, type ElevationConfig as E, type ForegroundPalette as F, type BackgroundPaletteAlias as G, type Hue as H, type BackgroundStyleProps as I, type BackgroundWashPaletteAlias as J, type BorderRadius as K, type LinePalette as L, type BorderRadiusConfig as M, type BorderStyleProps as N, type BorderWidth as O, type PaletteValue as P, type BorderWidthConfig as Q, type BoxShadowConfig as R, type ScaleMode as S, type ButtonSize as T, type UniversalTokensConfig as U, type ButtonVariant as V, type ColorModeForApp as W, type ConfigurableTextProperty as X, type CorePaletteAlias as Y, type CustomSizingStyleProps as Z, type DataAttribute as _, type ColorsConfig as a, type TransitionTiming as a$, type ElevationPaletteAlias as a0, type Flex as a1, type FlexAlignContent as a2, type FlexAlignItems as a3, type FlexAlignSelf as a4, type FlexBasis as a5, type FlexDirection as a6, type FlexGrow as a7, type FlexJustifyContent as a8, type FlexShrink as a9, type Modes as aA, type Opacity as aB, type OpacityStyleProps as aC, type Overflow as aD, type Palette as aE, type PaletteConfig as aF, type PaletteType as aG, type PlatformMode as aH, type Position as aI, type RegionMode as aJ, type ScaleConfig as aK, type ScaleModeConfig as aL, type ScaleModeForApp as aM, type SizingStyleProps as aN, type SpacingAlias as aO, type SpacingConfig as aP, type SpacingStyleProps as aQ, type SpectrumColor as aR, type SpectrumConfig as aS, type StateStyleProps as aT, type StyleProps as aU, type TextStyleProps as aV, type TextTransform as aW, type TextTransformConfig as aX, type TextVariant as aY, type TransitionDelay as aZ, type TransitionDuration as a_, type FlexStyleProps as aa, type FlexWrap as ab, type FontFamilyConfig as ac, type FontFamilyGlobalAlias as ad, type FontSize as ae, type FontSizeConfig as af, type FontWeightDescriptive as ag, type ForegroundColor as ah, type ForegroundPaletteAlias as ai, type Height as aj, type HighContrastMode as ak, type IconName as al, type IconSize as am, type IconSizeConfig as an, type ImageStyleProps as ao, type LayoutStyleProps as ap, type LetterSpacing as aq, type LineClampAlias as ar, type LineColor as as, type LineHeight as at, type LineHeightConfig as au, type LinePaletteAlias as av, type MaxHeight as aw, type MaxWidth as ax, type MinHeight as ay, type MinWidth as az, type HueStep as b, type UniversalTextInputProps as b0, type Width as b1, type ZIndex as b2, type ZIndexConfig as b3, type CorePalette as c, type BackgroundWashPalette as d, type FontWeightConfig as e, type FontWeightNumeric as f, type Elevation as g, type FontFamilyGlobalConfig as h, type UniversalAvatarProps as i, type UniversalButtonProps as j, type UniversalBoxProps as k, type UniversalPressableProps as l, type UniversalStackProps as m, type UniversalIconButtonProps as n, type UniversalImageProps as o, type UniversalIconProps as p, type UniversalTextProps as q, alwaysPalette as r, type AlwaysPaletteAlias as s, type Animation as t, type AriaAttribute as u, type AspectRatio as v, type AspectRatioConfig as w, type AvatarShape as x, type AvatarSize as y, type AvatarSizeConfig as z };
+export { type FlexJustifyContent as $, type AlwaysPalette as A, type BackgroundPaletteAlias as B, type ColorMode as C, type BorderWidth as D, type BorderWidthConfig as E, type ForegroundPaletteAlias as F, type BoxShadowConfig as G, type Hue as H, type ButtonSize as I, type ButtonVariant as J, type ColorModeConfig as K, type LinePaletteAlias as L, type ColorModeForApp as M, type ConfigurableTextProperty as N, type CorePalette as O, type CustomSizingStyleProps as P, type DataAttribute as Q, type Display as R, type ScaleMode as S, type Flex as T, type UniversalTokensConfig as U, type FlexAlignContent as V, type FlexAlignItems as W, type FlexAlignSelf as X, type FlexBasis as Y, type FlexDirection as Z, type FlexGrow as _, type ColorsConfig as a, type FlexShrink as a0, type FlexStyleProps as a1, type FlexWrap as a2, type FontFamilyConfig as a3, type FontFamilyGlobalAlias as a4, type FontSize as a5, type FontSizeConfig as a6, type FontWeightDescriptive as a7, type ForegroundColor as a8, type ForegroundPalette as a9, type ScaleConfig as aA, type ScaleModeConfig as aB, type ScaleModeForApp as aC, type SizingStyleProps as aD, type SpacingAlias as aE, type SpacingConfig as aF, type SpacingStyleProps as aG, type SpectrumColor as aH, type SpectrumConfig as aI, type StateStyleProps as aJ, type StyleProps as aK, type TextStyleProps as aL, type TextTransform as aM, type TextTransformConfig as aN, type TextVariant as aO, type TransitionDelay as aP, type TransitionDuration as aQ, type TransitionTiming as aR, type UniversalBoxProps as aS, type UniversalTextInputProps as aT, type UniversalTextProps as aU, type Width as aV, type Height as aa, type HighContrastMode as ab, type IconName as ac, type IconSize as ad, type IconSizeConfig as ae, type ImageStyleProps as af, type LayoutStyleProps as ag, type LetterSpacing as ah, type LineClampAlias as ai, type LineColor as aj, type LineHeight as ak, type LineHeightConfig as al, type LinePalette as am, type MaxHeight as an, type MaxWidth as ao, type MinHeight as ap, type MinWidth as aq, type Modes as ar, type Overflow as as, type Palette as at, type PaletteConfig as au, type PaletteType as av, type PaletteValue as aw, type PlatformMode as ax, type Position as ay, type RegionMode as az, type HueStep as b, type CorePaletteAlias as c, type FontWeightConfig as d, type FontWeightNumeric as e, type FontFamilyGlobalConfig as f, type UniversalAvatarProps as g, type UniversalButtonProps as h, type UniversalPressableProps as i, type UniversalIconButtonProps as j, type UniversalImageProps as k, type UniversalStackProps as l, type UniversalIconProps as m, alwaysPalette as n, type AlwaysPaletteAlias as o, type Animation as p, type AriaAttribute as q, type AvatarShape as r, type AvatarSize as s, type AvatarSizeConfig as t, type BackgroundColor as u, type BackgroundPalette as v, type BackgroundStyleProps as w, type BorderRadius as x, type BorderRadiusConfig as y, type BorderStyleProps as z };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yahoo/uds",
   "description": "Yahoo Universal System",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "type": "module",
   "bin": {
     "uds": "./cli/uds-cli"
@@ -64,14 +64,24 @@
         "default": "./dist/tailwindPurge.cjs"
       }
     },
+    "./tailwindPurge/utils": {
+      "import": {
+        "types": "./dist/tailwindPurge/utils.d.ts",
+        "default": "./dist/tailwindPurge/utils.js"
+      },
+      "require": {
+        "types": "./dist/tailwindPurge/utils.cjs",
+        "default": "./dist/tailwindPurge/utils.cjs"
+      }
+    },
     "./fixtures": {
       "import": {
-        "types": "./dist/fixtures/index.d.ts",
-        "default": "./dist/fixtures/index.js"
+        "types": "./dist/fixtures.d.ts",
+        "default": "./dist/fixtures.js"
       },
       "require": {
-        "types": "./dist/fixtures/index.cjs",
-        "default": "./dist/fixtures/index.cjs"
+        "types": "./dist/fixtures.d.ts",
+        "default": "./dist/fixtures.cjs"
       }
     },
     "./fonts/*.otf": "./fonts/*.otf",
@@ -110,7 +120,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "bun run ./scripts/buildScripts.ts && tsup",
+    "build": "bun run ./scripts/prebuild.ts && tsup && bun run ./scripts/postbuild.ts",
     "build:css": "tailwindcss --input ./src/tailwind/uds.css --output ./generated/uds.css --config ./src/tailwind/tailwind.config.ts",
     "build:fixtures": "bun run ./scripts/buildFixtures.ts",
     "build:fontcss": "bun run ./scripts/generateFontCSS.ts --output ./generated/fonts.css",
@@ -136,22 +146,27 @@
     "typecheck:uds": "tsc -p . --noEmit"
   },
   "dependencies": {
-    "@ariakit/react": "^0.4.0",
+    "@ariakit/react": "^0.4.2",
     "bluebun": "0.0.34",
     "clsx": "^2.1.0",
     "fast-glob": "^3.3.2",
-    "react-toastify": "^10.0.0",
+    "lodash-es": "^4.17.21",
+    "react-toastify": "^10.0.4",
     "tailwind-merge": "^2.2.1",
     "ts-morph": "^21.0.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@fullhuman/postcss-purgecss": "^5.0.0",
+    "@types/react": "^18.2.63",
+    "@types/react-dom": "^18.2.20",
+    "autoprefixer": "^10.4.18",
     "chalk": "^5.3.0",
     "concurrently": "^8.2.2",
+    "postcss": "^8.4.35",
     "shared": "workspace:*",
+    "tailwindcss": "^3.4.1",
     "tsconfig": "workspace:*",
-    "tsup": "^8.0.1"
+    "tsup": "^8.0.2"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^4.6.0",

package/dist/Image.native-C6kOWgnf.d.ts

@@ -1,38 +0,0 @@
-import * as react from 'react';
-import { l as UniversalPressableProps, n as UniversalIconButtonProps, o as UniversalImageProps } from './types-CzJpH_Oi.js';
-import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ImageProps as ImageProps$1 } from 'expo-image';
-
-type NativePressableProps = Omit<PressableProps$1, 'children' | 'style' | 'onPress'> & {
-    style?: StyleProp<ViewStyle>;
-};
-interface PressableProps extends UniversalPressableProps, NativePressableProps {
-}
-declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<View>>;
-
-interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
-}
-/**
- * An icon button element that can be used to trigger an action.
- * @example
- ```tsx
-  import { IconButton } from "@yahoo/uds"
-
-  export function IconButtonDemo() {
-    return (
-      <IconButton variant="accent-outline" name="close" onPress={console.log} />
-    )
-  }
- ```
- */
-declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;
-
-interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImageProps {
-}
-/**
- * An image element
- */
-declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, elevation, backgroundColor, backgroundColorOnActive, backgroundColorOnHover, backgroundColorOnChecked, opacity, bordered, borderedTop, borderedBottom, borderedStart, borderedEnd, borderedHorizontal, borderedVertical, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderColorOnActive, borderColorOnFocus, borderColorOnChecked, borderColorOnHover, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, zIndex, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, minHeight, maxHeight, minWidth, maxWidth, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
-
-export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };

package/dist/Image.native-VeXt5aeI.d.cts

@@ -1,38 +0,0 @@
-import * as react from 'react';
-import { l as UniversalPressableProps, n as UniversalIconButtonProps, o as UniversalImageProps } from './types-CzJpH_Oi.cjs';
-import { View, PressableProps as PressableProps$1, StyleProp, ViewStyle } from 'react-native';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ImageProps as ImageProps$1 } from 'expo-image';
-
-type NativePressableProps = Omit<PressableProps$1, 'children' | 'style' | 'onPress'> & {
-    style?: StyleProp<ViewStyle>;
-};
-interface PressableProps extends UniversalPressableProps, NativePressableProps {
-}
-declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<View>>;
-
-interface IconButtonProps extends PressableProps, UniversalIconButtonProps {
-}
-/**
- * An icon button element that can be used to trigger an action.
- * @example
- ```tsx
-  import { IconButton } from "@yahoo/uds"
-
-  export function IconButtonDemo() {
-    return (
-      <IconButton variant="accent-outline" name="close" onPress={console.log} />
-    )
-  }
- ```
- */
-declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<View>>;
-
-interface ImageProps extends Omit<ImageProps$1, 'alt' | 'source'>, UniversalImageProps {
-}
-/**
- * An image element
- */
-declare function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, elevation, backgroundColor, backgroundColorOnActive, backgroundColorOnHover, backgroundColorOnChecked, opacity, bordered, borderedTop, borderedBottom, borderedStart, borderedEnd, borderedHorizontal, borderedVertical, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderColorOnActive, borderColorOnFocus, borderColorOnChecked, borderColorOnHover, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, zIndex, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, minHeight, maxHeight, minWidth, maxWidth, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
-
-export { type ImageProps as I, type PressableProps as P, IconButton as a, type IconButtonProps as b, Image as c, Pressable as d };

package/dist/VStack-BSD9TbBd.d.cts

@@ -1,114 +0,0 @@
-import * as react from 'react';
-import { k as UniversalBoxProps, l as UniversalPressableProps, m as UniversalStackProps } from './types-CzJpH_Oi.cjs';
-
-type DivProps = React.HTMLAttributes<HTMLDivElement>;
-interface BoxProps extends UniversalBoxProps, DivProps {
-}
-/**
- * A layout primitive that can be used to compose other components.
- * @example
- ```tsx
-  import { Box } from "@yahoo/uds"
-
-  export function Demo() {
-    return (
-      <Box
-        bordered
-        backgroundColor="primary"
-        borderRadius="md"
-        spacing='6'
-        >
-        Any kind of content can go here!
-      </Box>
-    )
-  }
-  ```
- */
-declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
-
-type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'>;
-interface PressableProps extends UniversalPressableProps, HtmlButtonProps {
-}
-/**
- * Provides press interactions with accessibility support.
- * @example
- ```tsx
-   import { Pressable, Text } from "@yahoo/uds"
-
-  export function Demo() {
-    return (
-      <Pressable
-        onClick={console.log}
-        backgroundColor="secondary"
-        bordered
-        borderColor="primary"
-        borderRadius="lg"
-      >
-        <Text variant="body1" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
-      </Pressable>
-    )
-  }
-  ```
- */
-declare const Pressable: react.ForwardRefExoticComponent<PressableProps & react.RefAttributes<HTMLButtonElement>>;
-
-type VStackProps = UniversalStackProps & DivProps;
-/**
- * The VStack is essentially the same component as [Box](/components/box) where it uses [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) but it lays out content in a column. VStack also allows for gaps between children via the `gap` prop.
- *
- * You should use VStack when:
- *
- * - you want to lay content out in rows that are sized to their content (height only, by default each child will fill the width of the VStack)
- * - you want to add gaps between columns
- * - you want to lay content out in columns that fill the available space within the parent container
- * - you need columns of proportionate size to each other (also known as a ratio-based layout)
- *
- * @example
- * #### Rows with Gaps
- *
- * ```tsx
- *   import { Box, VStack } from "@yahoo/uds"
- *
- *   export function Demo() {
- *     return (
- *       <VStack gap="6">
- *         <Box spacing="6" backgroundColor="secondary">
- *           First
- *         </Box>
- *         <Box spacing="6" backgroundColor="secondary">
- *           Second
- *         </Box>
- *         <Box spacing="6" backgroundColor="secondary">
- *           Third
- *         </Box>
- *       </VStack>
- *     )
- *   }
- * ```
- *
- * #### Rows that Have Proportionate Sizes
- *
- * ```tsx
- *     import { Box, VStack } from "@yahoo/uds"
- *
- *   export function Demo() {
- *     return (
- *       <VStack gap="6">
- *         <Box spacing="6" flexGrow="1" backgroundColor="secondary">
- *           First
- *         </Box>
- *         <Box spacing="6" flexGrow="2" backgroundColor="secondary">
- *           Second
- *         </Box>
- *         <Box spacing="6" flexGrow="3" backgroundColor="secondary">
- *           Third
- *         </Box>
- *       </VStack>
- *     )
- *   }
- * ```
- *
- **/
-declare const VStack: react.ForwardRefExoticComponent<UniversalStackProps & DivProps & react.RefAttributes<HTMLDivElement>>;
-
-export { Box as B, type DivProps as D, Pressable as P, VStack as V, type BoxProps as a, type PressableProps as b, type VStackProps as c };