@yahoo/uds-mobile 1.6.5 → 1.8.0-beta.1

package/README.md

@@ -44,14 +44,14 @@ npm install @yahoo/uds-mobile
 
 | Dependency              | Supported Version |
 | ----------------------- | ----------------- |
-| Expo SDK                | 54                |
-| React Native            | ≥ 0.81.0          |
+| Expo SDK                | 55                |
+| React Native            | ≥ 0.83.0          |
 | React                   | ≥ 19.0.0          |
-| react-native-unistyles  | ≥ 3.0.20          |
-| react-native-reanimated | ~4.1.x            |
+| react-native-unistyles  | ≥ 3.0.0           |
+| react-native-reanimated | ≥ 4.0.0           |
 
 > [!NOTE]
-> This package is tested against Expo SDK 54. While it may work with other versions, we cannot guarantee compatibility. If you encounter issues on a different Expo SDK version, please check for peer dependency conflicts.
+> This package is tested against Expo SDK 55. While it may work with other versions, we cannot guarantee compatibility. If you encounter issues on a different Expo SDK version, please check for peer dependency conflicts.
 
 ### Peer Dependencies
 

package/dist/bin/generateTheme.mjs

@@ -10,9 +10,25 @@ import { fontAliasToPostscript } from "@yahoo/uds-mobile/fonts";
 /**
 * Generate Unistyles theme from UDS tokens.
 *
-* Takes UniversalTokensConfig and generates theme objects for React Native Unistyles.
+* Takes UniversalTokensConfigGeneric and generates theme objects for React Native Unistyles.
 */
 /**
+* TEMPORARY: UDS-665 - Override YAS font with Yahoo Product Sans
+* Remove this function when YAS font issue is resolved.
+* Search for "UDS-665" to find all related code.
+*/
+function applyYasFontOverride(fontId) {
+	if (fontId === "yas") return "yahoo-product-sans";
+	return fontId;
+}
+/**
+* Extracts a space-separated "R G B" string from a SpectrumValueEntry.
+*/
+function extractRgb(value) {
+	if (value?.rgb && typeof value.rgb === "object") return `${value.rgb.r} ${value.rgb.g} ${value.rgb.b}`;
+	return "0 0 0";
+}
+/**
 * Converts an array of BoxShadowValue objects to a CSS box-shadow string.
 * React Native's new architecture supports the CSS string syntax for boxShadow.
 *
@@ -72,11 +88,63 @@ function rgbStringToRgb(rgbString) {
 	return `rgb(${parts.join(", ")})`;
 }
 /**
-* Generates elevation colors from config.
+* Generates elevation border colors (for line palette) from config.
+* Resolves the borderColor from each elevation preset to an RGB value.
+*/
+function generateElevationBorderColors(config, colorMode) {
+	const result = {};
+	const palette = config.colorMode[colorMode].palette;
+	const spectrum = config.colorMode[colorMode].spectrum;
+	for (const level of Object.keys(config.elevation)) {
+		const borderColorDef = config.elevation[level][colorMode].borderColor;
+		let color = "transparent";
+		if (borderColorDef.type === "line") {
+			const colorDef = palette.line?.[borderColorDef.value];
+			if (colorDef) {
+				const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
+				if (rgbValue) {
+					const parts = extractRgb(rgbValue).trim().split(/\s+/);
+					color = colorDef.opacity !== void 0 ? `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})` : `rgb(${parts.join(", ")})`;
+				}
+			}
+		} else if (borderColorDef.type === "always") color = newAlwaysPalette[borderColorDef.value] ?? "transparent";
+		else if (borderColorDef.type === "spectrum") {
+			const spectrumValue = borderColorDef.value;
+			const rgbValue = spectrum[spectrumValue.hue]?.[spectrumValue.step];
+			if (rgbValue) color = `rgb(${extractRgb(rgbValue).trim().split(/\s+/).join(", ")})`;
+		}
+		result[`elevation-${level}`] = color;
+	}
+	return result;
+}
+/**
+* Generates elevation background colors from config.
+* Resolves backgroundFill from elevation preset through the background palette.
 */
-function generateElevationColors(elevation) {
+function generateElevationBackgroundColors(config, colorMode) {
 	const result = {};
-	for (const level of Object.keys(elevation)) result[`elevation-${level}`] = "transparent";
+	const palette = config.colorMode[colorMode].palette;
+	const spectrum = config.colorMode[colorMode].spectrum;
+	for (const level of Object.keys(config.elevation)) {
+		const backgroundFill = config.elevation[level][colorMode].backgroundFill;
+		let color = "transparent";
+		if (backgroundFill.type === "background") {
+			const colorDef = palette.background?.[backgroundFill.value];
+			if (colorDef) {
+				const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
+				if (rgbValue) {
+					const parts = extractRgb(rgbValue).trim().split(/\s+/);
+					color = colorDef.opacity !== void 0 ? `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})` : `rgb(${parts.join(", ")})`;
+				}
+			}
+		} else if (backgroundFill.type === "always") color = newAlwaysPalette[backgroundFill.value] ?? "transparent";
+		else if (backgroundFill.type === "spectrum") {
+			const spectrumValue = backgroundFill.value;
+			const rgbValue = spectrum[spectrumValue.hue]?.[spectrumValue.step];
+			if (rgbValue) color = `rgb(${extractRgb(rgbValue).trim().split(/\s+/).join(", ")})`;
+		}
+		result[`elevation-${level}`] = color;
+	}
 	return result;
 }
 /**
@@ -104,8 +172,8 @@ function resolveShadowColor(colorConfig, opacity, spectrum, palette) {
 	if (colorConfig.type === "palette") {
 		const colorDef = palette[colorConfig.value];
 		if (colorDef) {
-			const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
-			if (rgbValue) return `rgba(${rgbValue.trim().split(/\s+/).join(", ")}, ${opacityValue})`;
+			const spectrumEntry = spectrum[colorDef.hue]?.[colorDef.step];
+			if (spectrumEntry) return `rgba(${extractRgb(spectrumEntry).trim().split(/\s+/).join(", ")}, ${opacityValue})`;
 		}
 	}
 	return `rgba(0, 0, 0, ${opacityValue})`;
@@ -125,14 +193,15 @@ function convertShadowToBoxShadow(presets, spectrum, palette, inset = false) {
 }
 function generateSpectrum(spectrum) {
 	const result = {};
-	for (const [hue, steps] of Object.entries(spectrum)) for (const [step, rgbValue] of Object.entries(steps)) result[`${hue}-${step}`] = rgbStringToRgb(rgbValue);
+	for (const [hue, steps] of Object.entries(spectrum)) for (const [step, entry] of Object.entries(steps)) result[`${hue}-${step}`] = rgbStringToRgb(extractRgb(entry));
 	return result;
 }
 function generatePalette(palette, spectrum) {
 	const result = {};
 	for (const [alias, { hue, step, opacity }] of Object.entries(palette)) {
-		const rgbValue = spectrum[hue]?.[step];
-		if (!rgbValue) continue;
+		const spectrumEntry = spectrum[hue]?.[step];
+		if (!spectrumEntry) continue;
+		const rgbValue = extractRgb(spectrumEntry);
 		if (opacity !== void 0) {
 			const opacityPercent = parseInt(opacity, 10) / 100;
 			result[alias] = `rgba(${rgbValue.trim().split(/\s+/).join(", ")}, ${opacityPercent})`;
@@ -148,7 +217,7 @@ function generateTypography(typographyConfig, fontConfig) {
 	const result = {};
 	for (const [variant, style] of Object.entries(typographyConfig)) {
 		const fontAlias = style.fontFamily.base;
-		const fontId = fontConfig[fontAlias] ?? fontAlias;
+		const fontId = applyYasFontOverride(fontConfig[fontAlias] ?? fontAlias);
 		const weight = Number(style.fontWeight.base.value);
 		const postScriptName = isWebFontID(fontId) ? getPostScriptName(fontId, weight) : fontId;
 		result[variant] = {
@@ -163,10 +232,13 @@ function generateTypography(typographyConfig, fontConfig) {
 }
 function generateFontAliases(fontConfig) {
 	const result = {};
-	for (const [alias, fontId] of Object.entries(fontConfig)) if (isWebFontID(fontId)) {
-		const defaultWeight = FONT_DECLARATIONS_MAP[fontId].defaults.fontWeight;
-		result[alias] = getPostScriptName(fontId, defaultWeight);
-	} else result[alias] = fontId;
+	for (const [alias, rawFontId] of Object.entries(fontConfig)) {
+		const fontId = applyYasFontOverride(rawFontId);
+		if (isWebFontID(fontId)) {
+			const defaultWeight = FONT_DECLARATIONS_MAP[fontId].defaults.fontWeight;
+			result[alias] = getPostScriptName(fontId, defaultWeight);
+		} else result[alias] = fontId;
+	}
 	result.icons = "uds-icons";
 	return result;
 }
@@ -180,12 +252,65 @@ function generateShadows(config) {
 	});
 	return result;
 }
+function isElevationCustomShadows(value) {
+	return Array.isArray(value);
+}
+/**
+* Generates pre-computed boxShadow CSS strings for all shadow variants.
+* Produces both drop and inset shadow maps keyed by variant name.
+* Elevation levels resolve their dropShadow config (which may reference
+* a ShadowVariant or provide custom ShadowPreset tuples).
+*/
+function generateBoxShadows(config, colorMode) {
+	const colorsConfig = config.colorMode[colorMode];
+	const spectrum = colorsConfig.spectrum;
+	const palette = colorsConfig.palette.foreground;
+	const drop = {};
+	const inset = {};
+	for (const [variant, presets] of Object.entries(config.shadow.drop)) {
+		if (variant === "none" || !presets || presets.length === 0) {
+			drop[variant] = "";
+			continue;
+		}
+		drop[variant] = boxShadowToCssString(convertShadowToBoxShadow(presets, spectrum, palette));
+	}
+	for (const [level, modePresets] of Object.entries(config.elevation)) {
+		const preset = modePresets[colorMode];
+		const key = `elevation-${level}`;
+		if (!preset.dropShadow || preset.dropShadow === "none") {
+			drop[key] = "";
+			continue;
+		}
+		if (isElevationCustomShadows(preset.dropShadow)) {
+			const allPresets = [...preset.dropShadow];
+			if (allPresets.length > 0) drop[key] = boxShadowToCssString(convertShadowToBoxShadow(allPresets, spectrum, palette));
+			else drop[key] = "";
+		} else {
+			const refPresets = config.shadow.drop[preset.dropShadow];
+			if (refPresets && refPresets.length > 0) drop[key] = boxShadowToCssString(convertShadowToBoxShadow(refPresets, spectrum, palette));
+			else drop[key] = "";
+		}
+	}
+	for (const [variant, presets] of Object.entries(config.shadow.inset)) {
+		if (variant === "none" || !presets || presets.length === 0) {
+			inset[variant] = "";
+			continue;
+		}
+		inset[variant] = boxShadowToCssString(convertShadowToBoxShadow(presets, spectrum, palette, true));
+	}
+	drop["none"] = drop["none"] ?? "";
+	inset["none"] = inset["none"] ?? "";
+	return {
+		drop,
+		inset
+	};
+}
 /**
 * Resolves a typography variant name to React Native text styles.
 * Looks up the typography config and converts to RN-compatible values.
 *
 * @param variantName - The typography variant name (e.g., 'body1', 'label4', 'ui2')
-* @param typography - The typography config from UniversalTokensConfig
+* @param typography - The typography config from UniversalTokensConfigGeneric
 * @param config - The full config for resolving font family aliases
 * @returns Resolved typography styles (fontSize, lineHeight, letterSpacing, fontFamily)
 */
@@ -202,13 +327,13 @@ function resolveTypographyStyles(variantName, typography, config) {
 	if (typeof lineHeight === "number") result.lineHeight = lineHeight;
 	if (typeof letterSpacing === "number") result.letterSpacing = letterSpacing;
 	if (typeof fontFamily === "string") {
-		const fontId = config.font[fontFamily] ?? fontFamily;
+		const fontId = applyYasFontOverride(config.font[fontFamily] ?? fontFamily);
 		if (isWebFontID(fontId)) result.fontFamily = getPostScriptName(fontId, typeof fontWeight === "number" ? fontWeight : 400);
 		else result.fontFamily = fontId;
 	}
 	return result;
 }
-function resolveValue(variable, config, colorMode) {
+function resolveValue(variable, config, colorMode, propName) {
 	const { type, value } = variable;
 	const palette = config.colorMode[colorMode].palette;
 	const spectrum = config.colorMode[colorMode].spectrum;
@@ -216,9 +341,9 @@ function resolveValue(variable, config, colorMode) {
 	if (type === "backgroundPaletteColors" || type === "foregroundPaletteColors" || type === "linePaletteColors") {
 		const colorDef = palette[type.replace("PaletteColors", "")]?.[value];
 		if (colorDef) {
-			const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
-			if (rgbValue) {
-				const parts = rgbValue.trim().split(/\s+/);
+			const spectrumEntry = spectrum[colorDef.hue]?.[colorDef.step];
+			if (spectrumEntry) {
+				const parts = extractRgb(spectrumEntry).trim().split(/\s+/);
 				if (colorDef.opacity !== void 0) return `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})`;
 				return `rgb(${parts.join(", ")})`;
 			}
@@ -232,8 +357,8 @@ function resolveValue(variable, config, colorMode) {
 		if (lastDashIndex > 0) {
 			const hue = colorStr.slice(0, lastDashIndex);
 			const step = colorStr.slice(lastDashIndex + 1);
-			const rgbValue = spectrum[hue]?.[step];
-			if (rgbValue) return `rgb(${rgbValue.trim().split(/\s+/).join(", ")})`;
+			const spectrumEntry = spectrum[hue]?.[step];
+			if (spectrumEntry) return `rgb(${extractRgb(spectrumEntry).trim().split(/\s+/).join(", ")})`;
 		}
 		return;
 	}
@@ -263,6 +388,69 @@ function resolveValue(variable, config, colorMode) {
 		if (dropPresets && dropPresets.length > 0) return convertShadowToBoxShadow(dropPresets, spectrum, palette.foreground, true);
 		return [];
 	}
+	if (type === "elevationAliases") {
+		const level = value.replace("elevation-", "");
+		const elevationPreset = config.elevation[level];
+		if (!elevationPreset) return;
+		const preset = elevationPreset[colorMode];
+		if (propName === "backgroundColor") {
+			const backgroundFill = preset.backgroundFill;
+			if (backgroundFill.type === "background") {
+				const colorDef = palette.background?.[backgroundFill.value];
+				if (colorDef) {
+					const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
+					if (rgbValue) {
+						const parts = extractRgb(rgbValue).trim().split(/\s+/);
+						if (colorDef.opacity !== void 0) return `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})`;
+						return `rgb(${parts.join(", ")})`;
+					}
+				}
+			} else if (backgroundFill.type === "always") return newAlwaysPalette[backgroundFill.value] ?? "transparent";
+			else if (backgroundFill.type === "spectrum") {
+				const spectrumValue = backgroundFill.value;
+				const rgbValue = spectrum[spectrumValue.hue]?.[spectrumValue.step];
+				if (rgbValue) return `rgb(${extractRgb(rgbValue).trim().split(/\s+/).join(", ")})`;
+			}
+			return "transparent";
+		}
+		if (propName === "borderColor") {
+			const borderColorDef = preset.borderColor;
+			if (borderColorDef.type === "line") {
+				const colorDef = palette.line?.[borderColorDef.value];
+				if (colorDef) {
+					const rgbValue = spectrum[colorDef.hue]?.[colorDef.step];
+					if (rgbValue) {
+						const parts = extractRgb(rgbValue).trim().split(/\s+/);
+						if (colorDef.opacity !== void 0) return `rgba(${parts.join(", ")}, ${parseInt(colorDef.opacity, 10) / 100})`;
+						return `rgb(${parts.join(", ")})`;
+					}
+				}
+			} else if (borderColorDef.type === "always") return newAlwaysPalette[borderColorDef.value] ?? "transparent";
+			else if (borderColorDef.type === "spectrum") {
+				const spectrumValue = borderColorDef.value;
+				const rgbValue = spectrum[spectrumValue.hue]?.[spectrumValue.step];
+				if (rgbValue) return `rgb(${extractRgb(rgbValue).trim().split(/\s+/).join(", ")})`;
+			}
+			return "transparent";
+		}
+		if (propName === "borderWidth") {
+			const borderWidthKey = preset.borderWidth;
+			return scaleConfig.borderWidth[borderWidthKey] ?? 0;
+		}
+		if (propName === "shadow") {
+			const elevationPreset = config.elevation[level];
+			if (!elevationPreset) return [];
+			const preset = elevationPreset[colorMode];
+			if (!preset.dropShadow || preset.dropShadow === "none") return [];
+			if (isElevationCustomShadows(preset.dropShadow)) {
+				const allPresets = [...preset.dropShadow];
+				return allPresets.length > 0 ? convertShadowToBoxShadow(allPresets, spectrum, palette.foreground) : [];
+			}
+			const refPresets = config.shadow.drop[preset.dropShadow];
+			return refPresets && refPresets.length > 0 ? convertShadowToBoxShadow(refPresets, spectrum, palette.foreground) : [];
+		}
+		return;
+	}
 	if (type === "textDecorationLines") return value;
 	if (typeof value === "number") return value;
 }
@@ -296,7 +484,7 @@ function generateComponents(config, colorMode) {
 					if (!rnProps) continue;
 					const stateValue = states[state];
 					if (!stateValue) continue;
-					const resolvedValue = resolveValue(stateValue, config, colorMode);
+					const resolvedValue = resolveValue(stateValue, config, colorMode, propName);
 					if (resolvedValue === void 0) continue;
 					if (SHADOW_PROPS.has(propName)) {
 						if (Array.isArray(resolvedValue)) shadowValues.push(...resolvedValue);
@@ -356,31 +544,40 @@ function generateComponents(config, colorMode) {
 function generateTheme(config, colorMode) {
 	const colorsConfig = config.colorMode[colorMode];
 	const scaleConfig = config.scaleMode[DEFAULT_SCALE_MODE];
-	const elevationColors = generateElevationColors(config.elevation);
+	const elevationBackgroundColors = generateElevationBackgroundColors(config, colorMode);
+	const elevationBorderColors = generateElevationBorderColors(config, colorMode);
+	const boxShadows = generateBoxShadows(config, colorMode);
 	return {
 		colors: {
 			spectrum: sortKeys(generateSpectrum(colorsConfig.spectrum)),
 			background: sortKeys({
 				...generatePalette(colorsConfig.palette.background, colorsConfig.spectrum),
-				...elevationColors
+				...elevationBackgroundColors
 			}),
 			foreground: sortKeys(generatePalette(colorsConfig.palette.foreground, colorsConfig.spectrum)),
 			line: sortKeys({
 				...generatePalette(colorsConfig.palette.line, colorsConfig.spectrum),
-				...elevationColors
+				...elevationBorderColors
 			})
 		},
 		spacing: sortKeys({ ...spacingMap }),
 		borderRadius: sortKeys({ ...scaleConfig.borderRadius }),
 		borderWidth: sortKeys({
 			...scaleConfig.borderWidth,
-			...Object.fromEntries(Object.keys(config.elevation).map((level) => [`elevation-${level}`, parseInt(level, 10)]))
+			...Object.fromEntries(Object.keys(config.elevation).map((level) => {
+				const borderWidthKey = config.elevation[level].light.borderWidth;
+				return [`elevation-${level}`, scaleConfig.borderWidth[borderWidthKey] ?? 0];
+			}))
 		}),
 		iconSize: sortKeys({ ...scaleConfig.iconSizes }),
 		avatarSize: sortKeys({ ...scaleConfig.avatarSizes }),
 		font: sortKeys(generateFontAliases(config.font)),
 		typography: sortKeys(generateTypography(config.typography, config.font)),
 		shadow: sortKeys(generateShadows(config)),
+		boxShadow: {
+			drop: sortKeys(boxShadows.drop),
+			inset: sortKeys(boxShadows.inset)
+		},
 		components: generateComponents(config, colorMode)
 	};
 }

package/dist/components/Box.cjs

@@ -4,6 +4,7 @@ const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
 let react_native = require("react-native");
 let generated_styles = require("../../generated/styles");
+let react_native_unistyles = require("react-native-unistyles");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Box.tsx
@@ -35,20 +36,21 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @see {@link HStack} for horizontal layouts
 * @see {@link VStack} for vertical layouts
 */
-const Box = (0, react.memo)(function Box({ backgroundColor, dangerouslySetBackgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, dangerouslySetBorderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, style, ref, ...props }) {
+const Box = (0, react.memo)(function Box({ elevation, backgroundColor, dangerouslySetBackgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, dangerouslySetBorderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, dropShadow, insetShadow, style, ref, ...props }) {
+	const elevationAlias = elevation !== void 0 ? `elevation-${elevation}` : void 0;
 	const variants = {
-		backgroundColor,
+		backgroundColor: backgroundColor ?? elevationAlias,
 		borderRadius,
 		borderTopStartRadius,
 		borderTopEndRadius,
 		borderBottomStartRadius,
 		borderBottomEndRadius,
-		borderColor,
+		borderColor: borderColor ?? elevationAlias,
 		borderStartColor,
 		borderEndColor,
 		borderTopColor,
 		borderBottomColor,
-		borderWidth,
+		borderWidth: borderWidth ?? elevationAlias,
 		borderVerticalWidth,
 		borderHorizontalWidth,
 		borderStartWidth,
@@ -84,6 +86,8 @@ const Box = (0, react.memo)(function Box({ backgroundColor, dangerouslySetBackgr
 		rowGap
 	};
 	generated_styles.styles.useVariants(variants);
+	const effectiveDropShadow = dropShadow ?? elevationAlias;
+	const shadowStyle = effectiveDropShadow || insetShadow ? shadowSheet.shadow(effectiveDropShadow, insetShadow) : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 		ref,
 		style: (0, react.useMemo)(() => [
@@ -95,6 +99,7 @@ const Box = (0, react.memo)(function Box({ backgroundColor, dangerouslySetBackgr
 			maxWidth ? { maxWidth } : void 0,
 			minHeight ? { minHeight } : void 0,
 			maxHeight ? { maxHeight } : void 0,
+			shadowStyle,
 			generated_styles.styles.foundation,
 			style
 		], [
@@ -106,6 +111,7 @@ const Box = (0, react.memo)(function Box({ backgroundColor, dangerouslySetBackgr
 			maxWidth,
 			minHeight,
 			maxHeight,
+			shadowStyle,
 			generated_styles.styles.foundation,
 			style
 		]),
@@ -113,6 +119,14 @@ const Box = (0, react.memo)(function Box({ backgroundColor, dangerouslySetBackgr
 	});
 });
 Box.displayName = "Box";
+/**
+* Dynamic shadow stylesheet that merges drop and inset shadows into a single
+* boxShadow CSS string. Theme-reactive so shadows update on color mode change.
+*/
+const shadowSheet = react_native_unistyles.StyleSheet.create((theme) => ({ shadow: (drop, inset) => {
+	const parts = [drop ? theme.boxShadow.drop[drop] : "", inset ? theme.boxShadow.inset[inset] : ""].filter(Boolean);
+	return parts.length > 0 ? { boxShadow: parts.join(", ") } : {};
+} }));
 
 //#endregion
 exports.Box = Box;

package/dist/components/Box.d.cts

@@ -1,4 +1,5 @@
 
+import { ElevationLevel } from "../types/dist/index.cjs";
 import { SizeProps } from "../types.cjs";
 import * as react from "react";
 import { Ref } from "react";
@@ -7,9 +8,8 @@ import { StyleProps } from "../../generated/styles";
 
 //#region src/components/Box.d.ts
 interface BoxProps extends ViewProps, SizeProps {
-  /** Ref to the underlying View */
   ref?: Ref<View>;
-  /** Background color from the theme palette */
+  elevation?: ElevationLevel;
   backgroundColor?: StyleProps['backgroundColor'];
   borderRadius?: StyleProps['borderRadius'];
   borderTopStartRadius?: StyleProps['borderTopStartRadius'];
@@ -55,6 +55,8 @@ interface BoxProps extends ViewProps, SizeProps {
   offsetTop?: StyleProps['offsetTop'];
   columnGap?: StyleProps['columnGap'];
   rowGap?: StyleProps['rowGap'];
+  dropShadow?: StyleProps['dropShadow'];
+  insetShadow?: StyleProps['insetShadow'];
   dangerouslySetBackgroundColor?: string;
   dangerouslySetBorderColor?: string;
 }

package/dist/components/Box.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.cts","names":[],"sources":["../../src/components/Box.tsx"],"mappings":";;;;;;;;UASU,QAAA,SAAiB,SAAA,EAAW,SAAA;;EAEpC,GAAA,GAAM,GAAA,CAAI,IAAA;EAFO;EAIjB,eAAA,GAAkB,UAAA;EAClB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAIX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EACT,6BAAA;EACA,yBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BI,GAAA,EAAG,KAAA,CAAA,oBAAA,CAAA,QAAA"}
+{"version":3,"file":"Box.d.cts","names":[],"sources":["../../src/components/Box.tsx"],"mappings":";;;;;;;;;UAWU,QAAA,SAAiB,SAAA,EAAW,SAAA;EACpC,GAAA,GAAM,GAAA,CAAI,IAAA;EACV,SAAA,GAAY,cAAA;EACZ,eAAA,GAAkB,UAAA;EAClB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAIX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EACT,UAAA,GAAa,UAAA;EACb,WAAA,GAAc,UAAA;EACd,6BAAA;EACA,yBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BI,GAAA,EAAG,KAAA,CAAA,oBAAA,CAAA,QAAA"}

package/dist/components/Box.d.mts

@@ -1,4 +1,5 @@
 
+import { ElevationLevel } from "../types/dist/index.mjs";
 import { SizeProps } from "../types.mjs";
 import * as react from "react";
 import { Ref } from "react";
@@ -7,9 +8,8 @@ import { StyleProps } from "../../generated/styles";
 
 //#region src/components/Box.d.ts
 interface BoxProps extends ViewProps, SizeProps {
-  /** Ref to the underlying View */
   ref?: Ref<View>;
-  /** Background color from the theme palette */
+  elevation?: ElevationLevel;
   backgroundColor?: StyleProps['backgroundColor'];
   borderRadius?: StyleProps['borderRadius'];
   borderTopStartRadius?: StyleProps['borderTopStartRadius'];
@@ -55,6 +55,8 @@ interface BoxProps extends ViewProps, SizeProps {
   offsetTop?: StyleProps['offsetTop'];
   columnGap?: StyleProps['columnGap'];
   rowGap?: StyleProps['rowGap'];
+  dropShadow?: StyleProps['dropShadow'];
+  insetShadow?: StyleProps['insetShadow'];
   dangerouslySetBackgroundColor?: string;
   dangerouslySetBorderColor?: string;
 }

package/dist/components/Box.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.mts","names":[],"sources":["../../src/components/Box.tsx"],"mappings":";;;;;;;;UASU,QAAA,SAAiB,SAAA,EAAW,SAAA;;EAEpC,GAAA,GAAM,GAAA,CAAI,IAAA;EAFO;EAIjB,eAAA,GAAkB,UAAA;EAClB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAIX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EACT,6BAAA;EACA,yBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BI,GAAA,EAAG,KAAA,CAAA,oBAAA,CAAA,QAAA"}
+{"version":3,"file":"Box.d.mts","names":[],"sources":["../../src/components/Box.tsx"],"mappings":";;;;;;;;;UAWU,QAAA,SAAiB,SAAA,EAAW,SAAA;EACpC,GAAA,GAAM,GAAA,CAAI,IAAA;EACV,SAAA,GAAY,cAAA;EACZ,eAAA,GAAkB,UAAA;EAClB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,SAAA,GAAY,UAAA;EACZ,IAAA,GAAO,UAAA;EACP,aAAA,GAAgB,UAAA;EAChB,QAAA,GAAW,UAAA;EACX,UAAA,GAAa,UAAA;EACb,QAAA,GAAW,UAAA;EACX,cAAA,GAAiB,UAAA;EAEjB,OAAA,GAAU,UAAA;EACV,QAAA,GAAW,UAAA;EAIX,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,MAAA,GAAS,UAAA;EACT,UAAA,GAAa,UAAA;EACb,WAAA,GAAc,UAAA;EACd,6BAAA;EACA,yBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+BI,GAAA,EAAG,KAAA,CAAA,oBAAA,CAAA,QAAA"}

package/dist/components/Box.mjs

@@ -2,6 +2,7 @@
 import { memo, useMemo } from "react";
 import { View } from "react-native";
 import { styles } from "../../generated/styles";
+import { StyleSheet } from "react-native-unistyles";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Box.tsx
@@ -33,20 +34,21 @@ import { jsx } from "react/jsx-runtime";
 * @see {@link HStack} for horizontal layouts
 * @see {@link VStack} for vertical layouts
 */
-const Box = memo(function Box({ backgroundColor, dangerouslySetBackgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, dangerouslySetBorderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, style, ref, ...props }) {
+const Box = memo(function Box({ elevation, backgroundColor, dangerouslySetBackgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, dangerouslySetBorderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, display = "flex", overflow, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, minWidth, maxWidth, minHeight, maxHeight, dropShadow, insetShadow, style, ref, ...props }) {
+	const elevationAlias = elevation !== void 0 ? `elevation-${elevation}` : void 0;
 	const variants = {
-		backgroundColor,
+		backgroundColor: backgroundColor ?? elevationAlias,
 		borderRadius,
 		borderTopStartRadius,
 		borderTopEndRadius,
 		borderBottomStartRadius,
 		borderBottomEndRadius,
-		borderColor,
+		borderColor: borderColor ?? elevationAlias,
 		borderStartColor,
 		borderEndColor,
 		borderTopColor,
 		borderBottomColor,
-		borderWidth,
+		borderWidth: borderWidth ?? elevationAlias,
 		borderVerticalWidth,
 		borderHorizontalWidth,
 		borderStartWidth,
@@ -82,6 +84,8 @@ const Box = memo(function Box({ backgroundColor, dangerouslySetBackgroundColor,
 		rowGap
 	};
 	styles.useVariants(variants);
+	const effectiveDropShadow = dropShadow ?? elevationAlias;
+	const shadowStyle = effectiveDropShadow || insetShadow ? shadowSheet.shadow(effectiveDropShadow, insetShadow) : void 0;
 	return /* @__PURE__ */ jsx(View, {
 		ref,
 		style: useMemo(() => [
@@ -93,6 +97,7 @@ const Box = memo(function Box({ backgroundColor, dangerouslySetBackgroundColor,
 			maxWidth ? { maxWidth } : void 0,
 			minHeight ? { minHeight } : void 0,
 			maxHeight ? { maxHeight } : void 0,
+			shadowStyle,
 			styles.foundation,
 			style
 		], [
@@ -104,6 +109,7 @@ const Box = memo(function Box({ backgroundColor, dangerouslySetBackgroundColor,
 			maxWidth,
 			minHeight,
 			maxHeight,
+			shadowStyle,
 			styles.foundation,
 			style
 		]),
@@ -111,6 +117,14 @@ const Box = memo(function Box({ backgroundColor, dangerouslySetBackgroundColor,
 	});
 });
 Box.displayName = "Box";
+/**
+* Dynamic shadow stylesheet that merges drop and inset shadows into a single
+* boxShadow CSS string. Theme-reactive so shadows update on color mode change.
+*/
+const shadowSheet = StyleSheet.create((theme) => ({ shadow: (drop, inset) => {
+	const parts = [drop ? theme.boxShadow.drop[drop] : "", inset ? theme.boxShadow.inset[inset] : ""].filter(Boolean);
+	return parts.length > 0 ? { boxShadow: parts.join(", ") } : {};
+} }));
 
 //#endregion
 export { Box };