@yahoo/uds 2.10.2 → 3.0.0-beta.1

package/cli/cli.ts

@@ -58,4 +58,4 @@ async function main() {
   await command.run(props);
 }
 
-main();
+await main();

package/cli/codemods/addCommentAboveComponents.ts

@@ -63,7 +63,7 @@ export async function addCommentAboveComponents({
       });
 
       const updateSrc = srcLines.join('\n');
-      console.log(updateSrc);
+      // console.log(updateSrc);
       sourceFile.replaceWithText(updateSrc);
     }
   });

package/cli/codemods/flattenButtonVariant.ts

@@ -0,0 +1,143 @@
+import { Project, SyntaxKind } from 'ts-morph';
+
+import { ButtonPalette, ButtonVariant, ButtonVariantFlat } from '~/tokens';
+
+import { getGlobPattern, getImportsFromPackage, getProject } from './utils';
+
+const buttonFlatValMap: Record<ButtonVariantFlat, ButtonVariantFlat> = {
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  brand: 'brand',
+  alert: 'alert',
+  positive: 'positive',
+  warning: 'warning',
+  info: 'info',
+  'brand-secondary': 'brand-secondary',
+  'brand-tertiary': 'brand-tertiary',
+  'alert-secondary': 'alert-secondary',
+  'alert-tertiary': 'alert-tertiary',
+  'positive-secondary': 'positive-secondary',
+  'positive-tertiary': 'positive-tertiary',
+  'warning-secondary': 'warning-secondary',
+  'warning-tertiary': 'warning-tertiary',
+  'info-secondary': 'info-secondary',
+  'info-tertiary': 'info-tertiary',
+};
+
+// This is a hack to typecheck the keys of the object, ensure that all of the values are present
+// NOTE: Importing fixtures still causes issues
+const buttonVariantsFlat = Object.values(buttonFlatValMap);
+
+function parseButtonVariantFlat({
+  palette = 'accent',
+  variant = 'primary',
+}: {
+  palette?: ButtonPalette;
+  variant?: ButtonVariant;
+}): ButtonVariantFlat {
+  if (palette === 'accent') {
+    return variant; // primary, secondary, tertiary
+  }
+
+  if (variant === 'primary') {
+    return palette; // brand, alert, positive, warning
+  }
+
+  return `${palette}-${variant}`; // brand-secondary, alert-tertiary, etc.
+}
+
+interface Options {
+  selectedDirs?: string[];
+  project?: Project;
+}
+
+/**
+ * Flatten palette and variant into a single variant prop for UDS Button and IconButton.
+ */
+export async function flattenButtonVariant({ selectedDirs, project = getProject() }: Options) {
+  const glob = getGlobPattern(selectedDirs);
+  const sourceFiles = project.getSourceFiles(glob);
+
+  for (const sourceFile of sourceFiles) {
+    // Get UDS imports from '@yahoo/uds'
+    const importUdsComponents = getImportsFromPackage(sourceFile, '@yahoo/uds');
+
+    // Only process files that import Button or IconButton
+    if (!importUdsComponents.has('Button') && !importUdsComponents.has('IconButton')) {
+      continue;
+    }
+
+    // Process both JsxOpeningElement and JsxSelfClosingElement nodes.
+    const jsxElements = [
+      ...sourceFile.getDescendantsOfKind(SyntaxKind.JsxOpeningElement),
+      ...sourceFile.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement),
+    ].filter((el) => {
+      const tagName = el.getTagNameNode().getText();
+      return (tagName === 'Button' || tagName === 'IconButton') && importUdsComponents.has(tagName);
+    });
+
+    jsxElements.forEach((jsxEl) => {
+      // Get palette and variant attributes
+      const paletteAttr = jsxEl.getAttribute('palette');
+      const variantAttr = jsxEl.getAttribute('variant');
+
+      // Prepare to capture literal values.
+      let paletteLiteral: string | undefined;
+      let variantLiteral: string;
+
+      // Process palette attribute
+      if (paletteAttr) {
+        // @ts-expect-error - getInitializer() is not in the type definition
+        const initializer = paletteAttr.getInitializer();
+        if (initializer && initializer.getKind() === SyntaxKind.StringLiteral) {
+          paletteLiteral = initializer.getText().slice(1, -1);
+        }
+      }
+
+      // Process variant attribute
+      if (variantAttr) {
+        // @ts-expect-error - getInitializer() is not in the type definition
+        const initializer = variantAttr.getInitializer();
+        if (initializer && initializer.getKind() === SyntaxKind.StringLiteral) {
+          variantLiteral = initializer.getText().slice(1, -1);
+        } else {
+          variantLiteral = 'primary';
+        }
+      } else {
+        variantLiteral = 'primary';
+      }
+
+      // Remove the old palette and variant attributes.
+      if (paletteAttr) {
+        paletteAttr.remove();
+      }
+      if (variantAttr) {
+        variantAttr.remove();
+      }
+
+      if (!paletteLiteral && buttonVariantsFlat.includes(variantLiteral as ButtonVariantFlat)) {
+        // If the variant is already a valid flattened value, use it as is.
+        if (variantLiteral !== 'primary') {
+          // If its "primary", just remove all the props
+          jsxEl.addAttribute({
+            name: 'variant',
+            initializer: `"${variantLiteral}"`,
+          });
+        }
+      } else {
+        // Compute the flattened variant using the parsing function.
+        const flattened = parseButtonVariantFlat({
+          palette: paletteLiteral as ButtonPalette,
+          variant: variantLiteral as ButtonVariant,
+        });
+
+        jsxEl.addAttribute({
+          name: 'variant',
+          initializer: `"${flattened}"`,
+        });
+      }
+    });
+  }
+  await project.save();
+}

package/cli/codemods/utils/index.ts

@@ -1,5 +1,5 @@
 /**
- * ------------------- GENERATED | DO NOT MODIFY THIS SECTINO ------------------
+ * ------------------- GENERATED | DO NOT MODIFY THIS SECTION ------------------
  * This file uses eslint-plugin-codegen to automatically watch for changes in
  * the `src/components` directory and updates this barrel file.
  */

package/cli/commands/codemod/flattenButtonVariant.ts

@@ -0,0 +1,16 @@
+import { type Props, spinStart, spinStop } from 'bluebun';
+
+import { flattenButtonVariant } from '../../codemods/flattenButtonVariant';
+
+export default {
+  name: 'flattenButtonVariant',
+  description: `Flatten deprecated button props into single variant prop`,
+
+  run: async (props: Props & { selectedDirs?: string[] }) => {
+    spinStart('Running codemod...');
+
+    await flattenButtonVariant({ selectedDirs: props.selectedDirs });
+
+    spinStop('Codemod complete! Peek the diff and commit your changes!');
+  },
+};

package/cli/tailwindcss.d.ts

@@ -0,0 +1,2 @@
+// The typecheck script is not able to find the `flattenColorPalette` function from TailwindCSS.
+declare module 'tailwindcss/lib/util/flattenColorPalette';

package/cli/tsconfig.json

@@ -1,8 +1,12 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Default",
-  "include": ["."],
-  "exclude": ["node_modules"],
+  "include": [
+    "."
+  ],
+  "exclude": [
+    "node_modules"
+  ],
   "compilerOptions": {
     "composite": false,
     "declaration": true,
@@ -16,16 +20,34 @@
     "preserveWatchOutput": true,
     "skipLibCheck": true,
     "strict": true,
-    "types": ["bun-types"],
+    "types": [
+      "bun-types"
+    ],
     "target": "esnext",
-    "lib": ["ESNext"],
+    "lib": [
+      "ESNext"
+    ],
     "module": "esnext",
     "moduleResolution": "bundler",
     "paths": {
-      "@yahoo/uds/scripts/*": ["../scripts/*"],
-      "@yahoo/uds/*": ["../src/*"],
-      "@yahoo/uds/tailwind/tsMorph": ["../scripts/utils/tsMorph.ts"],
-      "root/*": ["../../*"]
+      "~/*": [
+        "../src/*"
+      ],
+      "@yahoo/uds/scripts/*": [
+        "../scripts/*"
+      ],
+      //      "@yahoo/uds/tokens": [
+      //        "../src/tokens/index.ts"
+      //      ],
+      "@yahoo/uds/tailwind/purger": [
+        "../src/tailwind/purger/index.ts"
+      ],
+      "@yahoo/uds/tailwind/tsMorph": [
+        "../scripts/utils/tsMorph.ts"
+      ],
+      "root/*": [
+        "../../*"
+      ]
     }
   }
 }

package/cli/utils/configWorker.ts

@@ -8,7 +8,7 @@ import { eq, gte } from 'semver';
 import { ConfigWorkerThreadMessageEvent } from './types';
 
 const PRODUCTION_PREFIX = 'https://config.uds.build';
-const STAGING_PREFIX = 'https://staging.uds.build';
+const STAGING_PREFIX = 'https://staging.config.uds.build';
 const LOCAL_PORT = process.env.PORT || 4001;
 const LOCAL_PREFIX = `http://localhost:${LOCAL_PORT}`;
 

package/cli/utils/purgeCSS.ts

@@ -8,14 +8,14 @@ import {
 } from '@yahoo/uds/tailwind/purger';
 import { findReferencesAsJsxElements, getUsedPropsInReference } from '@yahoo/uds/tailwind/tsMorph';
 import {
-  ColorModeConfig,
+  type ColorModeConfig,
   DARK_COLOR_MODE_CLASSNAME,
   LARGE_SCALE_MODE_CLASSNAME,
   LIGHT_COLOR_MODE_CLASSNAME,
   MEDIUM_SCALE_MODE_CLASSNAME,
-  ScaleModeConfig,
+  type ScaleModeConfig,
   SMALL_SCALE_MODE_CLASSNAME,
-  UniversalTokensConfig,
+  type UniversalTokensConfig,
   variants,
   XLARGE_SCALE_MODE_CLASSNAME,
   XSMALL_SCALE_MODE_CLASSNAME,

package/cli/utils/sortKeys.ts

@@ -2,6 +2,11 @@ export function sortKeys<T extends Record<string, unknown>>(
   unsortedObj: T,
 ): Record<string, unknown> {
   const sortedObj: Record<string, unknown> = {}; // Add index signature to allow indexing with a string
+
+  if (!unsortedObj || typeof unsortedObj !== 'object') {
+    return unsortedObj;
+  }
+
   const keys = Object.keys(unsortedObj).sort();
 
   for (var index in keys) {

package/dist/{Text-UCDorZDD.d.cts → Text-DC5H-ljU.d.cts}

@@ -1,4 +1,4 @@
-import { ReactNode, PropsWithChildren, Ref } from 'react';
+import { PropsWithChildren, ReactNode, Ref } from 'react';
 import { SvgIcon, IconSize, IconVariant } from '@yahoo/uds-icons/types';
 
 declare const alwaysPalette: {
@@ -8,22 +8,25 @@ declare const alwaysPalette: {
     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 SharedPrimaryPaletteAlias = 'brand' | 'alert' | 'positive' | 'warning' | 'info';
+type SharedSecondaryPaletteAlias = `${SharedPrimaryPaletteAlias}-secondary`;
+type SharedPaletteAlias = SharedPrimaryPaletteAlias | SharedSecondaryPaletteAlias;
+type DeprecatedAccentAlias = 'accent';
+type BackgroundPaletteAlias = 'primary' | 'secondary' | DeprecatedAccentAlias | SharedPaletteAlias;
+type ForegroundPaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'on-color' | DeprecatedAccentAlias | SharedPaletteAlias;
+type LinePaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | DeprecatedAccentAlias | SharedPaletteAlias;
 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 ForegroundColor = ForegroundPaletteAlias | AlwaysPaletteAlias;
+type LineColor = LinePaletteAlias | AlwaysPaletteAlias;
+type BackgroundColor = BackgroundPaletteAlias | AlwaysPaletteAlias;
+type ShadowVariant = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ShadowVariantInvert = `${Exclude<ShadowVariant, 'none'>}-invert`;
+type TextVariant = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'label3' | 'label4' | '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';
@@ -40,12 +43,6 @@ 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;
@@ -82,6 +79,12 @@ interface BorderStyleProps {
     /** Sets the width of the bottom border of an element. */
     borderBottomWidth?: BorderWidth;
 }
+interface ShadowStyleProps {
+    /** Sets the variant of the shadow. */
+    dropShadow?: ShadowVariant;
+    /** Sets the variant of the inset shadow. */
+    insetShadow?: ShadowVariant | ShadowVariantInvert;
+}
 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;
@@ -178,7 +181,7 @@ interface SizeStyleProps {
     /** Sets the height of an element. */
     height?: 'full' | 'fit' | 'screen';
 }
-interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps, SizeStyleProps {
+interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps, SizeStyleProps, ShadowStyleProps {
     /**
      * When asChild is set to true, the component's child will be cloned and passed
      * the props and behavior required to make it functional.
@@ -205,54 +208,8 @@ interface UniversalIconProps {
     /** 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 DividerVariant = 'primary' | 'secondary' | 'tertiary' | 'muted';
-interface UniversalDividerProps {
-    /**
-     * Use a pre-defined variant.
-     * @default 'primary'
-     */
-    variant?: DividerVariant;
-    /**
-     * Set to true to scale the divider vertically.
-     */
-    vertical?: boolean;
-    /** Override thickness of the divider set by the variant. */
-    thickness?: BorderWidth;
-    /** Override color of the divider set by the variant. */
-    color?: LineColor;
-    /** When there are children, where are they placed?
-     * @default 'middle'
-     */
-    contentPosition?: 'start' | 'middle' | 'end';
+type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
+interface IconPropsWithSVGProps extends UniversalIconProps, SVGElementProps {
 }
 
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
@@ -260,11 +217,15 @@ interface BoxProps extends UniversalBoxProps, DivProps {
 }
 
 type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
+type ColorWithInherit = Exclude<UniversalTextProps['color'], undefined> | 'inherit';
+type VariantWithInherit = Exclude<UniversalTextProps['variant'], undefined> | 'inherit';
 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;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
 
-export type { BoxProps as B, DivProps as D, Overflow as O, SpacingStyleProps as S, TextProps as T, UniversalAvatarProps as U, UniversalStackProps as a, UniversalDividerProps as b, UniversalTextProps as c, UniversalIconProps as d, UniversalTextInputProps as e };
+export type { BoxProps as B, DivProps as D, IconPropsWithSVGProps as I, Overflow as O, TextProps as T, UniversalTextProps as U, UniversalStackProps as a };

package/dist/{Text-UCDorZDD.d.ts → Text-DC5H-ljU.d.ts}

@@ -1,4 +1,4 @@
-import { ReactNode, PropsWithChildren, Ref } from 'react';
+import { PropsWithChildren, ReactNode, Ref } from 'react';
 import { SvgIcon, IconSize, IconVariant } from '@yahoo/uds-icons/types';
 
 declare const alwaysPalette: {
@@ -8,22 +8,25 @@ declare const alwaysPalette: {
     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 SharedPrimaryPaletteAlias = 'brand' | 'alert' | 'positive' | 'warning' | 'info';
+type SharedSecondaryPaletteAlias = `${SharedPrimaryPaletteAlias}-secondary`;
+type SharedPaletteAlias = SharedPrimaryPaletteAlias | SharedSecondaryPaletteAlias;
+type DeprecatedAccentAlias = 'accent';
+type BackgroundPaletteAlias = 'primary' | 'secondary' | DeprecatedAccentAlias | SharedPaletteAlias;
+type ForegroundPaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'on-color' | DeprecatedAccentAlias | SharedPaletteAlias;
+type LinePaletteAlias = 'primary' | 'secondary' | 'tertiary' | 'muted' | DeprecatedAccentAlias | SharedPaletteAlias;
 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 ForegroundColor = ForegroundPaletteAlias | AlwaysPaletteAlias;
+type LineColor = LinePaletteAlias | AlwaysPaletteAlias;
+type BackgroundColor = BackgroundPaletteAlias | AlwaysPaletteAlias;
+type ShadowVariant = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ShadowVariantInvert = `${Exclude<ShadowVariant, 'none'>}-invert`;
+type TextVariant = 'display1' | 'display2' | 'display3' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'label3' | 'label4' | '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';
@@ -40,12 +43,6 @@ 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;
@@ -82,6 +79,12 @@ interface BorderStyleProps {
     /** Sets the width of the bottom border of an element. */
     borderBottomWidth?: BorderWidth;
 }
+interface ShadowStyleProps {
+    /** Sets the variant of the shadow. */
+    dropShadow?: ShadowVariant;
+    /** Sets the variant of the inset shadow. */
+    insetShadow?: ShadowVariant | ShadowVariantInvert;
+}
 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;
@@ -178,7 +181,7 @@ interface SizeStyleProps {
     /** Sets the height of an element. */
     height?: 'full' | 'fit' | 'screen';
 }
-interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps, SizeStyleProps {
+interface UniversalBoxProps extends PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, SpacingStyleProps, SizeStyleProps, ShadowStyleProps {
     /**
      * When asChild is set to true, the component's child will be cloned and passed
      * the props and behavior required to make it functional.
@@ -205,54 +208,8 @@ interface UniversalIconProps {
     /** 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 DividerVariant = 'primary' | 'secondary' | 'tertiary' | 'muted';
-interface UniversalDividerProps {
-    /**
-     * Use a pre-defined variant.
-     * @default 'primary'
-     */
-    variant?: DividerVariant;
-    /**
-     * Set to true to scale the divider vertically.
-     */
-    vertical?: boolean;
-    /** Override thickness of the divider set by the variant. */
-    thickness?: BorderWidth;
-    /** Override color of the divider set by the variant. */
-    color?: LineColor;
-    /** When there are children, where are they placed?
-     * @default 'middle'
-     */
-    contentPosition?: 'start' | 'middle' | 'end';
+type SVGElementProps = Omit<React.HTMLAttributes<SVGSVGElement>, 'color'>;
+interface IconPropsWithSVGProps extends UniversalIconProps, SVGElementProps {
 }
 
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
@@ -260,11 +217,15 @@ interface BoxProps extends UniversalBoxProps, DivProps {
 }
 
 type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li';
+type ColorWithInherit = Exclude<UniversalTextProps['color'], undefined> | 'inherit';
+type VariantWithInherit = Exclude<UniversalTextProps['variant'], undefined> | 'inherit';
 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;
+    variant?: VariantWithInherit;
+    color?: ColorWithInherit;
+} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
 
-export type { BoxProps as B, DivProps as D, Overflow as O, SpacingStyleProps as S, TextProps as T, UniversalAvatarProps as U, UniversalStackProps as a, UniversalDividerProps as b, UniversalTextProps as c, UniversalIconProps as d, UniversalTextInputProps as e };
+export type { BoxProps as B, DivProps as D, IconPropsWithSVGProps as I, Overflow as O, TextProps as T, UniversalTextProps as U, UniversalStackProps as a };