@mgcrea/react-native-tailwind 0.15.2 → 0.15.4

package/dist/utils/colorUtils.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Shared color utilities for parsing and manipulating colors
+ */
+/**
+ * Tailwind color palette (flattened from config) with basic colors
+ */
+export declare const COLORS: Record<string, string>;
+/**
+ * Apply opacity to hex color by appending alpha channel
+ * @param hex - Hex color string (e.g., "#ff0000", "#f00", or "transparent")
+ * @param opacity - Opacity value 0-100 (e.g., 50 for 50%)
+ * @returns 8-digit hex with alpha (e.g., "#FF000080") or transparent
+ */
+export declare function applyOpacity(hex: string, opacity: number): string;
+/**
+ * Parse arbitrary color value: [#ff0000], [#f00], [#FF0000AA]
+ * Supports 3-digit, 6-digit, and 8-digit (with alpha) hex colors
+ * @param value - Arbitrary value string like "[#ff0000]"
+ * @returns Hex string if valid, null otherwise (preserves input case)
+ */
+export declare function parseArbitraryColor(value: string): string | null;
+/**
+ * Parse a color value with optional opacity modifier
+ * Handles preset colors, custom colors, arbitrary hex values, and opacity modifiers
+ *
+ * @param colorKey - Color key like "red-500", "red-500/50", "[#ff0000]", "[#ff0000]/80"
+ * @param customColors - Optional custom colors from tailwind.config
+ * @returns Hex color string or null if invalid
+ */
+export declare function parseColorValue(colorKey: string, customColors?: Record<string, string>): string | null;

package/dist/utils/colorUtils.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.COLORS=void 0;exports.applyOpacity=applyOpacity;exports.parseArbitraryColor=parseArbitraryColor;exports.parseColorValue=parseColorValue;var _tailwind=require("../config/tailwind");var _flattenColors=require("./flattenColors");var COLORS=exports.COLORS=Object.assign({},(0,_flattenColors.flattenColors)(_tailwind.TAILWIND_COLORS),{white:"#FFFFFF",black:"#000000",transparent:"transparent"});function applyOpacity(hex,opacity){if(hex==="transparent"){return"transparent";}var cleanHex=hex.replace(/^#/,"");var fullHex=cleanHex.length===3?cleanHex.split("").map(function(char){return char+char;}).join(""):cleanHex;var alpha=Math.round(opacity/100*255);var alphaHex=alpha.toString(16).padStart(2,"0").toUpperCase();return`#${fullHex.toUpperCase()}${alphaHex}`;}function parseArbitraryColor(value){var hexMatch=value.match(/^\[#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\]$/);if(hexMatch){var hex=hexMatch[1];if(hex.length===3){var expanded=hex.split("").map(function(char){return char+char;}).join("");return`#${expanded}`;}return`#${hex}`;}return null;}function parseColorValue(colorKey,customColors){var _getColor;var getColor=function getColor(key){var _customColors$key;return(_customColors$key=customColors==null?void 0:customColors[key])!=null?_customColors$key:COLORS[key];};var opacityMatch=colorKey.match(/^(.+)\/(\d+)$/);if(opacityMatch){var baseColorKey=opacityMatch[1];var opacity=Number.parseInt(opacityMatch[2],10);if(opacity<0||opacity>100){return null;}var _arbitraryColor=parseArbitraryColor(baseColorKey);if(_arbitraryColor!==null){return applyOpacity(_arbitraryColor,opacity);}var color=getColor(baseColorKey);if(color){return applyOpacity(color,opacity);}return null;}var arbitraryColor=parseArbitraryColor(colorKey);if(arbitraryColor!==null){return arbitraryColor;}return(_getColor=getColor(colorKey))!=null?_getColor:null;}

package/dist/utils/colorUtils.test.js

@@ -0,0 +1 @@
+var _vitest=require("vitest");var _colorUtils=require("./colorUtils");(0,_vitest.describe)("COLORS",function(){(0,_vitest.it)("should include basic colors",function(){(0,_vitest.expect)(_colorUtils.COLORS.white).toBe("#FFFFFF");(0,_vitest.expect)(_colorUtils.COLORS.black).toBe("#000000");(0,_vitest.expect)(_colorUtils.COLORS.transparent).toBe("transparent");});(0,_vitest.it)("should include flattened Tailwind colors",function(){(0,_vitest.expect)(_colorUtils.COLORS["red-500"]).toBeDefined();(0,_vitest.expect)(_colorUtils.COLORS["blue-500"]).toBeDefined();(0,_vitest.expect)(_colorUtils.COLORS["green-500"]).toBeDefined();(0,_vitest.expect)(_colorUtils.COLORS["gray-100"]).toBeDefined();(0,_vitest.expect)(_colorUtils.COLORS["gray-900"]).toBeDefined();});});(0,_vitest.describe)("applyOpacity",function(){(0,_vitest.it)("should apply opacity to 6-digit hex colors",function(){(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#ff0000",50)).toBe("#FF000080");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#00ff00",100)).toBe("#00FF00FF");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#0000ff",0)).toBe("#0000FF00");});(0,_vitest.it)("should apply opacity to 3-digit hex colors",function(){(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#f00",50)).toBe("#FF000080");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#0f0",25)).toBe("#00FF0040");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#00f",75)).toBe("#0000FFBF");});(0,_vitest.it)("should handle various opacity values",function(){(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#000000",0)).toBe("#00000000");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#000000",25)).toBe("#00000040");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#000000",50)).toBe("#00000080");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#000000",75)).toBe("#000000BF");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#000000",80)).toBe("#000000CC");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#000000",100)).toBe("#000000FF");});(0,_vitest.it)("should return transparent unchanged",function(){(0,_vitest.expect)((0,_colorUtils.applyOpacity)("transparent",50)).toBe("transparent");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("transparent",0)).toBe("transparent");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("transparent",100)).toBe("transparent");});(0,_vitest.it)("should uppercase the output",function(){(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#aabbcc",50)).toBe("#AABBCC80");(0,_vitest.expect)((0,_colorUtils.applyOpacity)("#AbCdEf",50)).toBe("#ABCDEF80");});});(0,_vitest.describe)("parseArbitraryColor",function(){(0,_vitest.it)("should parse 6-digit hex colors",function(){(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#ff0000]")).toBe("#ff0000");(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#00ff00]")).toBe("#00ff00");(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#0000ff]")).toBe("#0000ff");(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#AABBCC]")).toBe("#AABBCC");});(0,_vitest.it)("should parse and expand 3-digit hex colors",function(){(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#f00]")).toBe("#ff0000");(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#0f0]")).toBe("#00ff00");(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#00f]")).toBe("#0000ff");(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#ABC]")).toBe("#AABBCC");});(0,_vitest.it)("should parse 8-digit hex colors (with alpha)",function(){(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#ff000080]")).toBe("#ff000080");(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#00ff00cc]")).toBe("#00ff00cc");(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#AABBCCDD]")).toBe("#AABBCCDD");});(0,_vitest.it)("should preserve input case",function(){(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#aabbcc]")).toBe("#aabbcc");(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#AABBCC]")).toBe("#AABBCC");(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#AaBbCc]")).toBe("#AaBbCc");});(0,_vitest.it)("should return null for invalid formats",function(){(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#gg0000]")).toBeNull();(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#ff00]")).toBeNull();(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[#ff00000]")).toBeNull();(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[ff0000]")).toBeNull();(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("#ff0000")).toBeNull();(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[rgb(255,0,0)]")).toBeNull();(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("")).toBeNull();(0,_vitest.expect)((0,_colorUtils.parseArbitraryColor)("[]")).toBeNull();});});(0,_vitest.describe)("parseColorValue",function(){(0,_vitest.describe)("preset colors",function(){(0,_vitest.it)("should parse preset color names",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("red-500")).toBe(_colorUtils.COLORS["red-500"]);(0,_vitest.expect)((0,_colorUtils.parseColorValue)("blue-800")).toBe(_colorUtils.COLORS["blue-800"]);(0,_vitest.expect)((0,_colorUtils.parseColorValue)("green-600")).toBe(_colorUtils.COLORS["green-600"]);});(0,_vitest.it)("should parse basic colors",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("black")).toBe("#000000");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("white")).toBe("#FFFFFF");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("transparent")).toBe("transparent");});(0,_vitest.it)("should return null for invalid color names",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("notacolor")).toBeNull();(0,_vitest.expect)((0,_colorUtils.parseColorValue)("red-999")).toBeNull();(0,_vitest.expect)((0,_colorUtils.parseColorValue)("foobar-500")).toBeNull();});});(0,_vitest.describe)("arbitrary colors",function(){(0,_vitest.it)("should parse arbitrary hex colors",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("[#ff0000]")).toBe("#ff0000");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("[#00ff00]")).toBe("#00ff00");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("[#0000ff]")).toBe("#0000ff");});(0,_vitest.it)("should parse 3-digit arbitrary hex colors",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("[#f00]")).toBe("#ff0000");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("[#0f0]")).toBe("#00ff00");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("[#00f]")).toBe("#0000ff");});(0,_vitest.it)("should parse 8-digit arbitrary hex colors",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("[#ff000080]")).toBe("#ff000080");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("[#00ff00cc]")).toBe("#00ff00cc");});});(0,_vitest.describe)("opacity modifier",function(){(0,_vitest.it)("should apply opacity to preset colors",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("red-500/50")).toBe((0,_colorUtils.applyOpacity)(_colorUtils.COLORS["red-500"],50));(0,_vitest.expect)((0,_colorUtils.parseColorValue)("blue-800/80")).toBe((0,_colorUtils.applyOpacity)(_colorUtils.COLORS["blue-800"],80));(0,_vitest.expect)((0,_colorUtils.parseColorValue)("black/25")).toBe((0,_colorUtils.applyOpacity)("#000000",25));});(0,_vitest.it)("should apply opacity to arbitrary colors",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("[#ff0000]/50")).toBe("#FF000080");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("[#00ff00]/25")).toBe("#00FF0040");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("[#0000ff]/80")).toBe("#0000FFCC");});(0,_vitest.it)("should handle edge opacity values",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("red-500/0")).toBe((0,_colorUtils.applyOpacity)(_colorUtils.COLORS["red-500"],0));(0,_vitest.expect)((0,_colorUtils.parseColorValue)("red-500/100")).toBe((0,_colorUtils.applyOpacity)(_colorUtils.COLORS["red-500"],100));});(0,_vitest.it)("should return null for invalid opacity values",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("red-500/101")).toBeNull();(0,_vitest.expect)((0,_colorUtils.parseColorValue)("red-500/-1")).toBeNull();(0,_vitest.expect)((0,_colorUtils.parseColorValue)("red-500/abc")).toBeNull();});(0,_vitest.it)("should keep transparent unchanged with opacity",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("transparent/50")).toBe("transparent");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("transparent/0")).toBe("transparent");});});(0,_vitest.describe)("custom colors",function(){var customColors={brand:"#FF5733","brand-primary":"#3498DB","brand-secondary":"#2ECC71"};(0,_vitest.it)("should parse custom colors",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("brand",customColors)).toBe("#FF5733");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("brand-primary",customColors)).toBe("#3498DB");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("brand-secondary",customColors)).toBe("#2ECC71");});(0,_vitest.it)("should apply opacity to custom colors",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("brand/50",customColors)).toBe("#FF573380");(0,_vitest.expect)((0,_colorUtils.parseColorValue)("brand-primary/80",customColors)).toBe("#3498DBCC");});(0,_vitest.it)("should still support preset colors with custom colors",function(){(0,_vitest.expect)((0,_colorUtils.parseColorValue)("red-500",customColors)).toBe(_colorUtils.COLORS["red-500"]);(0,_vitest.expect)((0,_colorUtils.parseColorValue)("blue-800/50",customColors)).toBe((0,_colorUtils.applyOpacity)(_colorUtils.COLORS["blue-800"],50));});(0,_vitest.it)("should allow custom colors to override presets",function(){var overrideColors={"red-500":"#CUSTOM1"};(0,_vitest.expect)((0,_colorUtils.parseColorValue)("red-500",overrideColors)).toBe("#CUSTOM1");});});});

package/dist/utils/mergeStyles.d.ts

@@ -1,10 +1,10 @@
 /**
  * Smart merge utility for StyleObject values
- * Handles array properties (like transform) by concatenating instead of overwriting
+ * Handles transform arrays with "last wins" semantics for same transform types
  */
 import type { StyleObject } from "../types/core";
 /**
- * Merge two StyleObject instances, handling array properties specially
+ * Merge two StyleObject instances, handling transform arrays specially
  *
  * @param target - The target object to merge into (mutated)
  * @param source - The source object to merge from
@@ -16,11 +16,19 @@ import type { StyleObject } from "../types/core";
  * // => { margin: 4, padding: 8 }
  *
  * @example
- * // Array properties (transform) are concatenated
+ * // Different transform types are combined
  * mergeStyles(
  *   { transform: [{ rotate: '45deg' }] },
  *   { transform: [{ scale: 1.1 }] }
  * )
  * // => { transform: [{ rotate: '45deg' }, { scale: 1.1 }] }
+ *
+ * @example
+ * // Same transform type: last wins (Tailwind parity)
+ * mergeStyles(
+ *   { transform: [{ rotate: '45deg' }] },
+ *   { transform: [{ rotate: '90deg' }] }
+ * )
+ * // => { transform: [{ rotate: '90deg' }] }
  */
 export declare function mergeStyles(target: StyleObject, source: StyleObject): StyleObject;

package/dist/utils/mergeStyles.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.mergeStyles=mergeStyles;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var ARRAY_MERGE_PROPERTIES=new Set(["transform"]);function mergeStyles(target,source){for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){var sourceValue=source[key];if(ARRAY_MERGE_PROPERTIES.has(key)&&Array.isArray(sourceValue)){var targetValue=target[key];if(Array.isArray(targetValue)){target[key]=[].concat((0,_toConsumableArray2.default)(targetValue),(0,_toConsumableArray2.default)(sourceValue));}else{target[key]=sourceValue;}}else{target[key]=sourceValue;}}}return target;}
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.mergeStyles=mergeStyles;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));function getTransformType(transform){return Object.keys(transform)[0];}function mergeTransforms(target,source){var result=(0,_toConsumableArray2.default)(target);var _loop=function _loop(){var sourceType=getTransformType(sourceTransform);var existingIndex=result.findIndex(function(t){return getTransformType(t)===sourceType;});if(existingIndex!==-1){result[existingIndex]=sourceTransform;}else{result.push(sourceTransform);}};for(var sourceTransform of source){_loop();}return result;}function mergeStyles(target,source){for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){var sourceValue=source[key];if(key==="transform"&&Array.isArray(sourceValue)){var targetValue=target[key];if(Array.isArray(targetValue)){target.transform=mergeTransforms(targetValue,sourceValue);}else{target[key]=sourceValue;}}else{target[key]=sourceValue;}}}return target;}

package/dist/utils/mergeStyles.test.js

@@ -1 +1 @@
-var _vitest=require("vitest");var _mergeStyles=require("./mergeStyles");(0,_vitest.describe)("mergeStyles",function(){(0,_vitest.describe)("standard properties",function(){(0,_vitest.it)("should merge non-array properties like Object.assign",function(){var target={margin:4};var source={padding:8};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:4,padding:8});});(0,_vitest.it)("should overwrite non-array properties",function(){var target={margin:4};var source={margin:8};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:8});});(0,_vitest.it)("should handle shadowOffset as standard property (object, not array)",function(){var target={shadowOffset:{width:0,height:1}};var source={shadowOffset:{width:0,height:2}};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({shadowOffset:{width:0,height:2}});});});(0,_vitest.describe)("transform array merging",function(){(0,_vitest.it)("should concatenate transform arrays",function(){var target={transform:[{rotate:"45deg"}]};var source={transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{rotate:"45deg"},{scale:1.1}]});});(0,_vitest.it)("should handle multiple transforms in source",function(){var target={transform:[{rotate:"45deg"}]};var source={transform:[{scale:1.1},{translateX:10}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{rotate:"45deg"},{scale:1.1},{translateX:10}]});});(0,_vitest.it)("should assign transform when target has no transform",function(){var target={margin:4};var source={transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:4,transform:[{scale:1.1}]});});(0,_vitest.it)("should handle empty target transform array",function(){var target={transform:[]};var source={transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{scale:1.1}]});});});(0,_vitest.describe)("mixed properties",function(){(0,_vitest.it)("should handle mix of standard and transform properties",function(){var target={margin:4,transform:[{rotate:"45deg"}]};var source={padding:8,transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:4,padding:8,transform:[{rotate:"45deg"},{scale:1.1}]});});});(0,_vitest.describe)("mutation behavior",function(){(0,_vitest.it)("should mutate and return target object",function(){var target={margin:4};var source={padding:8};var result=(0,_mergeStyles.mergeStyles)(target,source);(0,_vitest.expect)(result).toBe(target);(0,_vitest.expect)(target).toEqual({margin:4,padding:8});});});});
+var _vitest=require("vitest");var _mergeStyles=require("./mergeStyles");(0,_vitest.describe)("mergeStyles",function(){(0,_vitest.describe)("standard properties",function(){(0,_vitest.it)("should merge non-array properties like Object.assign",function(){var target={margin:4};var source={padding:8};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:4,padding:8});});(0,_vitest.it)("should overwrite non-array properties",function(){var target={margin:4};var source={margin:8};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:8});});(0,_vitest.it)("should handle shadowOffset as standard property (object, not array)",function(){var target={shadowOffset:{width:0,height:1}};var source={shadowOffset:{width:0,height:2}};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({shadowOffset:{width:0,height:2}});});});(0,_vitest.describe)("transform array merging - different types combined",function(){(0,_vitest.it)("should combine different transform types",function(){var target={transform:[{rotate:"45deg"}]};var source={transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{rotate:"45deg"},{scale:1.1}]});});(0,_vitest.it)("should handle multiple transforms in source",function(){var target={transform:[{rotate:"45deg"}]};var source={transform:[{scale:1.1},{translateX:10}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{rotate:"45deg"},{scale:1.1},{translateX:10}]});});(0,_vitest.it)("should assign transform when target has no transform",function(){var target={margin:4};var source={transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:4,transform:[{scale:1.1}]});});(0,_vitest.it)("should handle empty target transform array",function(){var target={transform:[]};var source={transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{scale:1.1}]});});});(0,_vitest.describe)("transform array merging - same type last wins (Tailwind parity)",function(){(0,_vitest.it)("should replace same transform type with last value",function(){var target={transform:[{rotate:"45deg"}]};var source={transform:[{rotate:"90deg"}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{rotate:"90deg"}]});});(0,_vitest.it)("should replace same scale type with last value",function(){var target={transform:[{scale:0.5}]};var source={transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{scale:1.1}]});});(0,_vitest.it)("should preserve order when replacing - rotate stays in position",function(){var target={transform:[{rotate:"45deg"},{scale:1.1}]};var source={transform:[{rotate:"90deg"}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{rotate:"90deg"},{scale:1.1}]});});(0,_vitest.it)("should handle mixed: replace same types, add new types",function(){var target={transform:[{rotate:"45deg"},{scale:0.5}]};var source={transform:[{scale:1.1},{translateX:10}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{rotate:"45deg"},{scale:1.1},{translateX:10}]});});(0,_vitest.it)("should handle scaleX and scaleY as different types",function(){var target={transform:[{scaleX:0.5}]};var source={transform:[{scaleY:1.5}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({transform:[{scaleX:0.5},{scaleY:1.5}]});});});(0,_vitest.describe)("mixed properties",function(){(0,_vitest.it)("should handle mix of standard and transform properties",function(){var target={margin:4,transform:[{rotate:"45deg"}]};var source={padding:8,transform:[{scale:1.1}]};(0,_vitest.expect)((0,_mergeStyles.mergeStyles)(target,source)).toEqual({margin:4,padding:8,transform:[{rotate:"45deg"},{scale:1.1}]});});});(0,_vitest.describe)("mutation behavior",function(){(0,_vitest.it)("should mutate and return target object",function(){var target={margin:4};var source={padding:8};var result=(0,_mergeStyles.mergeStyles)(target,source);(0,_vitest.expect)(result).toBe(target);(0,_vitest.expect)(target).toEqual({margin:4,padding:8});});});});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "description": "Compile-time Tailwind CSS for React Native with zero runtime overhead",
   "author": "Olivier Louvignes <olivier@mgcrea.io> (https://github.com/mgcrea)",
   "homepage": "https://github.com/mgcrea/react-native-tailwind#readme",

package/src/parser/colors.test.ts

@@ -1,21 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { COLORS, parseColor } from "./colors";
-
-// Helper to apply opacity to hex color for testing
-function applyOpacity(hex: string, opacity: number): string {
-  if (hex === "transparent") return "transparent";
-  const cleanHex = hex.replace(/^#/, "");
-  const fullHex =
-    cleanHex.length === 3
-      ? cleanHex
-          .split("")
-          .map((char) => char + char)
-          .join("")
-      : cleanHex;
-  const alpha = Math.round((opacity / 100) * 255);
-  const alphaHex = alpha.toString(16).padStart(2, "0").toUpperCase();
-  return `#${fullHex.toUpperCase()}${alphaHex}`;
-}
+import { applyOpacity } from "../utils/colorUtils";
 
 describe("COLORS", () => {
   it("should export complete color palette", () => {

package/src/parser/colors.ts

@@ -2,85 +2,11 @@
  * Color utilities (background, text, border colors)
  */
 
-import { TAILWIND_COLORS } from "../config/tailwind";
 import type { StyleObject } from "../types";
-import { flattenColors } from "../utils/flattenColors";
+import { COLORS, applyOpacity, parseArbitraryColor } from "../utils/colorUtils";
 
-// Tailwind color palette (flattened from config)
-export const COLORS: Record<string, string> = {
-  ...flattenColors(TAILWIND_COLORS),
-  // Add basic colors
-  white: "#FFFFFF",
-  black: "#000000",
-  transparent: "transparent",
-};
-
-/**
- * Apply opacity to hex color by appending alpha channel
- * @param hex - Hex color string (e.g., "#ff0000", "#f00", or "transparent")
- * @param opacity - Opacity value 0-100 (e.g., 50 for 50%)
- * @returns 8-digit hex with alpha (e.g., "#FF000080") or rgba for special colors
- */
-function applyOpacity(hex: string, opacity: number): string {
-  // Handle transparent specially
-  if (hex === "transparent") {
-    return "transparent";
-  }
-
-  // Remove # if present
-  const cleanHex = hex.replace(/^#/, "");
-
-  // Expand 3-digit hex to 6-digit: #abc -> #aabbcc
-  const fullHex =
-    cleanHex.length === 3
-      ? cleanHex
-          .split("")
-          .map((char) => char + char)
-          .join("")
-      : cleanHex;
-
-  // Convert opacity percentage (0-100) to hex (00-FF)
-  const alpha = Math.round((opacity / 100) * 255);
-  const alphaHex = alpha.toString(16).padStart(2, "0").toUpperCase();
-
-  // Return 8-digit hex: #RRGGBBAA
-  return `#${fullHex.toUpperCase()}${alphaHex}`;
-}
-
-/**
- * Parse arbitrary color value: [#ff0000], [#f00], [#FF0000AA]
- * Supports 3-digit, 6-digit, and 8-digit (with alpha) hex colors
- * Returns hex string if valid, null otherwise
- */
-function parseArbitraryColor(value: string): string | null {
-  // Match: [#rgb], [#rrggbb], or [#rrggbbaa]
-  const hexMatch = value.match(/^\[#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\]$/);
-  if (hexMatch) {
-    const hex = hexMatch[1];
-    // Expand 3-digit hex to 6-digit: #abc -> #aabbcc
-    if (hex.length === 3) {
-      const expanded = hex
-        .split("")
-        .map((char) => char + char)
-        .join("");
-      return `#${expanded}`;
-    }
-    return `#${hex}`;
-  }
-
-  // Warn about unsupported formats
-  if (value.startsWith("[") && value.endsWith("]")) {
-    /* v8 ignore next 5 */
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[react-native-tailwind] Unsupported arbitrary color value: ${value}. Only hex colors are supported (e.g., [#ff0000], [#f00], or [#ff0000aa]).`,
-      );
-    }
-    return null;
-  }
-
-  return null;
-}
+// Re-export COLORS for backward compatibility and tests
+export { COLORS };
 
 /**
  * Parse color classes (background, text, border)
@@ -93,6 +19,7 @@ export function parseColor(cls: string, customColors?: Record<string, string>):
   };
 
   // Helper to parse color with optional opacity modifier
+  // Uses internal implementation to preserve warnings for invalid arbitrary colors
   const parseColorWithOpacity = (colorKey: string): string | null => {
     // Check for opacity modifier: blue-500/50
     const opacityMatch = colorKey.match(/^(.+)\/(\d+)$/);
@@ -133,6 +60,17 @@ export function parseColor(cls: string, customColors?: Record<string, string>):
       return arbitraryColor;
     }
 
+    // Check for unsupported arbitrary format and warn
+    if (colorKey.startsWith("[") && colorKey.endsWith("]")) {
+      /* v8 ignore next 5 */
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[react-native-tailwind] Unsupported arbitrary color value: ${colorKey}. Only hex colors are supported (e.g., [#ff0000], [#f00], or [#ff0000aa]).`,
+        );
+      }
+      return null;
+    }
+
     // Try preset/custom colors
     return getColor(colorKey) ?? null;
   };

package/src/parser/index.ts

@@ -60,7 +60,7 @@ export function parseClass(cls: string, customTheme?: CustomTheme): StyleObject
     (cls: string) => parseLayout(cls, customTheme?.spacing),
     (cls: string) => parseTypography(cls, customTheme?.fontFamily, customTheme?.fontSize),
     (cls: string) => parseSizing(cls, customTheme?.spacing),
-    parseShadow,
+    (cls: string) => parseShadow(cls, customTheme?.colors),
     parseAspectRatio,
     (cls: string) => parseTransform(cls, customTheme?.spacing),
   ];

package/src/parser/layout.test.ts

@@ -521,6 +521,39 @@ describe("parseLayout - positioning utilities", () => {
     expect(parseLayout("left-[12.5%]")).toEqual({ left: "12.5%" });
     expect(parseLayout("left-[-20px]")).toEqual({ left: -20 });
   });
+
+  it("should parse negative positioning prefixes", () => {
+    // Standard spacing scale
+    expect(parseLayout("-top-1")).toEqual({ top: -4 });
+    expect(parseLayout("-top-4")).toEqual({ top: -16 });
+    expect(parseLayout("-right-1")).toEqual({ right: -4 });
+    expect(parseLayout("-right-2")).toEqual({ right: -8 });
+    expect(parseLayout("-bottom-4")).toEqual({ bottom: -16 });
+    expect(parseLayout("-bottom-8")).toEqual({ bottom: -32 });
+    expect(parseLayout("-left-2")).toEqual({ left: -8 });
+    expect(parseLayout("-left-4")).toEqual({ left: -16 });
+  });
+
+  it("should parse negative positioning with fractional values", () => {
+    expect(parseLayout("-top-0.5")).toEqual({ top: -2 });
+    expect(parseLayout("-right-1.5")).toEqual({ right: -6 });
+    expect(parseLayout("-bottom-2.5")).toEqual({ bottom: -10 });
+    expect(parseLayout("-left-3.5")).toEqual({ left: -14 });
+  });
+
+  it("should parse negative positioning with arbitrary values", () => {
+    expect(parseLayout("-top-[10px]")).toEqual({ top: -10 });
+    expect(parseLayout("-right-[20px]")).toEqual({ right: -20 });
+    expect(parseLayout("-bottom-[30]")).toEqual({ bottom: -30 });
+    expect(parseLayout("-left-[40px]")).toEqual({ left: -40 });
+  });
+
+  it("should parse negative positioning with arbitrary percentages", () => {
+    expect(parseLayout("-top-[10%]")).toEqual({ top: "-10%" });
+    expect(parseLayout("-right-[25%]")).toEqual({ right: "-25%" });
+    expect(parseLayout("-bottom-[50%]")).toEqual({ bottom: "-50%" });
+    expect(parseLayout("-left-[100%]")).toEqual({ left: "-100%" });
+  });
 });
 
 describe("parseLayout - inset utilities", () => {
@@ -791,9 +824,11 @@ describe("parseLayout - custom spacing", () => {
     expect(parseLayout("inset-e-xl", customSpacing)).toEqual({ end: 64 });
   });
 
-  it("should support negative values with custom spacing for start/end", () => {
-    // Note: -top-*, -left-*, -right-*, -bottom-* negative prefixes are not supported
-    // Use arbitrary values like top-[-10px] for negative positioning
+  it("should support negative values with custom spacing for positioning", () => {
+    expect(parseLayout("-top-sm", customSpacing)).toEqual({ top: -8 });
+    expect(parseLayout("-right-md", customSpacing)).toEqual({ right: -16 });
+    expect(parseLayout("-bottom-lg", customSpacing)).toEqual({ bottom: -32 });
+    expect(parseLayout("-left-xl", customSpacing)).toEqual({ left: -64 });
     expect(parseLayout("-start-sm", customSpacing)).toEqual({ start: -8 });
     expect(parseLayout("-end-md", customSpacing)).toEqual({ end: -16 });
   });

package/src/parser/layout.ts

@@ -260,87 +260,127 @@ export function parseLayout(cls: string, customSpacing?: Record<string, number>)
     }
   }
 
-  // Top positioning: top-0, top-4, top-[10px], top-[50%], etc.
-  if (cls.startsWith("top-")) {
-    const topKey = cls.substring(4);
+  // Top positioning: top-0, top-4, top-[10px], top-[50%], -top-4, etc.
+  const topMatch = cls.match(/^(-?)top-(.+)$/);
+  if (topMatch) {
+    const [, negPrefix, topKey] = topMatch;
+    const isNegative = negPrefix === "-";
 
     // Auto value - return empty object (no-op, removes the property)
     if (topKey === "auto") {
       return {};
     }
 
-    // Arbitrary values: top-[123px], top-[50%], top-[-10px]
+    // Arbitrary values: top-[123px], top-[50%], -top-[10px]
     const arbitraryTop = parseArbitraryInset(topKey);
     if (arbitraryTop !== null) {
+      if (typeof arbitraryTop === "number") {
+        return { top: isNegative ? -arbitraryTop : arbitraryTop };
+      }
+      // Percentage values with negative prefix
+      if (isNegative && arbitraryTop.endsWith("%")) {
+        const numValue = parseFloat(arbitraryTop);
+        return { top: `${-numValue}%` };
+      }
       return { top: arbitraryTop };
     }
 
     const topValue = insetMap[topKey];
     if (topValue !== undefined) {
-      return { top: topValue };
+      return { top: isNegative ? -topValue : topValue };
     }
   }
 
-  // Right positioning: right-0, right-4, right-[10px], right-[50%], etc.
-  if (cls.startsWith("right-")) {
-    const rightKey = cls.substring(6);
+  // Right positioning: right-0, right-4, right-[10px], right-[50%], -right-4, etc.
+  const rightMatch = cls.match(/^(-?)right-(.+)$/);
+  if (rightMatch) {
+    const [, negPrefix, rightKey] = rightMatch;
+    const isNegative = negPrefix === "-";
 
     // Auto value - return empty object (no-op, removes the property)
     if (rightKey === "auto") {
       return {};
     }
 
-    // Arbitrary values: right-[123px], right-[50%], right-[-10px]
+    // Arbitrary values: right-[123px], right-[50%], -right-[10px]
     const arbitraryRight = parseArbitraryInset(rightKey);
     if (arbitraryRight !== null) {
+      if (typeof arbitraryRight === "number") {
+        return { right: isNegative ? -arbitraryRight : arbitraryRight };
+      }
+      // Percentage values with negative prefix
+      if (isNegative && arbitraryRight.endsWith("%")) {
+        const numValue = parseFloat(arbitraryRight);
+        return { right: `${-numValue}%` };
+      }
       return { right: arbitraryRight };
     }
 
     const rightValue = insetMap[rightKey];
     if (rightValue !== undefined) {
-      return { right: rightValue };
+      return { right: isNegative ? -rightValue : rightValue };
     }
   }
 
-  // Bottom positioning: bottom-0, bottom-4, bottom-[10px], bottom-[50%], etc.
-  if (cls.startsWith("bottom-")) {
-    const bottomKey = cls.substring(7);
+  // Bottom positioning: bottom-0, bottom-4, bottom-[10px], bottom-[50%], -bottom-4, etc.
+  const bottomMatch = cls.match(/^(-?)bottom-(.+)$/);
+  if (bottomMatch) {
+    const [, negPrefix, bottomKey] = bottomMatch;
+    const isNegative = negPrefix === "-";
 
     // Auto value - return empty object (no-op, removes the property)
     if (bottomKey === "auto") {
       return {};
     }
 
-    // Arbitrary values: bottom-[123px], bottom-[50%], bottom-[-10px]
+    // Arbitrary values: bottom-[123px], bottom-[50%], -bottom-[10px]
     const arbitraryBottom = parseArbitraryInset(bottomKey);
     if (arbitraryBottom !== null) {
+      if (typeof arbitraryBottom === "number") {
+        return { bottom: isNegative ? -arbitraryBottom : arbitraryBottom };
+      }
+      // Percentage values with negative prefix
+      if (isNegative && arbitraryBottom.endsWith("%")) {
+        const numValue = parseFloat(arbitraryBottom);
+        return { bottom: `${-numValue}%` };
+      }
       return { bottom: arbitraryBottom };
     }
 
     const bottomValue = insetMap[bottomKey];
     if (bottomValue !== undefined) {
-      return { bottom: bottomValue };
+      return { bottom: isNegative ? -bottomValue : bottomValue };
     }
   }
 
-  // Left positioning: left-0, left-4, left-[10px], left-[50%], etc.
-  if (cls.startsWith("left-")) {
-    const leftKey = cls.substring(5);
+  // Left positioning: left-0, left-4, left-[10px], left-[50%], -left-4, etc.
+  const leftMatch = cls.match(/^(-?)left-(.+)$/);
+  if (leftMatch) {
+    const [, negPrefix, leftKey] = leftMatch;
+    const isNegative = negPrefix === "-";
 
     // Auto value - return empty object (no-op, removes the property)
     if (leftKey === "auto") {
       return {};
     }
 
-    // Arbitrary values: left-[123px], left-[50%], left-[-10px]
+    // Arbitrary values: left-[123px], left-[50%], -left-[10px]
     const arbitraryLeft = parseArbitraryInset(leftKey);
     if (arbitraryLeft !== null) {
+      if (typeof arbitraryLeft === "number") {
+        return { left: isNegative ? -arbitraryLeft : arbitraryLeft };
+      }
+      // Percentage values with negative prefix
+      if (isNegative && arbitraryLeft.endsWith("%")) {
+        const numValue = parseFloat(arbitraryLeft);
+        return { left: `${-numValue}%` };
+      }
       return { left: arbitraryLeft };
     }
 
     const leftValue = insetMap[leftKey];
     if (leftValue !== undefined) {
-      return { left: leftValue };
+      return { left: isNegative ? -leftValue : leftValue };
     }
   }
 

package/src/parser/shadows.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
-import { SHADOW_SCALE, parseShadow } from "./shadows";
+import { SHADOW_COLORS, SHADOW_SCALE, parseShadow } from "./shadows";
+import { applyOpacity } from "../utils/colorUtils";
 
 describe("SHADOW_SCALE", () => {
   it("should export complete shadow scale", () => {
@@ -138,7 +139,7 @@ describe("parseShadow - shadow properties (Android)", () => {
 
 describe("parseShadow - invalid classes", () => {
   it("should return null for invalid shadow classes", () => {
-    expect(parseShadow("shadow-invalid")).toBeNull();
+    expect(parseShadow("shadow-invalidcolor")).toBeNull();
     expect(parseShadow("shadows")).toBeNull();
     expect(parseShadow("shadow-")).toBeNull();
     expect(parseShadow("shadow-small")).toBeNull();
@@ -190,3 +191,109 @@ describe("parseShadow - comprehensive coverage", () => {
     expect(parseShadow("shadow-MD")).toBeNull();
   });
 });
+
+describe("parseShadow - shadow colors", () => {
+  it("should parse shadow color with preset colors", () => {
+    expect(parseShadow("shadow-red-500")).toEqual({ shadowColor: SHADOW_COLORS["red-500"] });
+    expect(parseShadow("shadow-blue-800")).toEqual({ shadowColor: SHADOW_COLORS["blue-800"] });
+    expect(parseShadow("shadow-green-600")).toEqual({ shadowColor: SHADOW_COLORS["green-600"] });
+  });
+
+  it("should parse shadow color with basic colors", () => {
+    expect(parseShadow("shadow-black")).toEqual({ shadowColor: SHADOW_COLORS.black });
+    expect(parseShadow("shadow-white")).toEqual({ shadowColor: SHADOW_COLORS.white });
+    expect(parseShadow("shadow-transparent")).toEqual({ shadowColor: "transparent" });
+  });
+
+  it("should parse shadow color with opacity modifier", () => {
+    expect(parseShadow("shadow-red-500/50")).toEqual({
+      shadowColor: applyOpacity(SHADOW_COLORS["red-500"], 50),
+    });
+    expect(parseShadow("shadow-blue-800/80")).toEqual({
+      shadowColor: applyOpacity(SHADOW_COLORS["blue-800"], 80),
+    });
+    expect(parseShadow("shadow-black/25")).toEqual({
+      shadowColor: applyOpacity(SHADOW_COLORS.black, 25),
+    });
+    expect(parseShadow("shadow-white/0")).toEqual({
+      shadowColor: applyOpacity(SHADOW_COLORS.white, 0),
+    });
+    expect(parseShadow("shadow-green-500/100")).toEqual({
+      shadowColor: applyOpacity(SHADOW_COLORS["green-500"], 100),
+    });
+  });
+
+  it("should parse shadow color with arbitrary hex values", () => {
+    expect(parseShadow("shadow-[#ff0000]")).toEqual({ shadowColor: "#ff0000" });
+    expect(parseShadow("shadow-[#00ff00]")).toEqual({ shadowColor: "#00ff00" });
+    expect(parseShadow("shadow-[#0000ff]")).toEqual({ shadowColor: "#0000ff" });
+  });
+
+  it("should parse shadow color with 3-digit hex values", () => {
+    expect(parseShadow("shadow-[#f00]")).toEqual({ shadowColor: "#ff0000" });
+    expect(parseShadow("shadow-[#0f0]")).toEqual({ shadowColor: "#00ff00" });
+    expect(parseShadow("shadow-[#00f]")).toEqual({ shadowColor: "#0000ff" });
+  });
+
+  it("should parse shadow color with arbitrary hex and opacity", () => {
+    // When opacity is applied, the color is uppercased for consistency
+    expect(parseShadow("shadow-[#ff0000]/50")).toEqual({ shadowColor: "#FF000080" });
+    expect(parseShadow("shadow-[#00ff00]/25")).toEqual({ shadowColor: "#00FF0040" });
+    expect(parseShadow("shadow-[#0000ff]/80")).toEqual({ shadowColor: "#0000FFCC" });
+  });
+
+  it("should parse shadow color with 8-digit hex (with alpha)", () => {
+    expect(parseShadow("shadow-[#ff000080]")).toEqual({ shadowColor: "#ff000080" });
+    expect(parseShadow("shadow-[#00ff00cc]")).toEqual({ shadowColor: "#00ff00cc" });
+  });
+
+  it("should handle transparent with opacity modifier", () => {
+    // Transparent should remain transparent even with opacity
+    expect(parseShadow("shadow-transparent/50")).toEqual({ shadowColor: "transparent" });
+  });
+
+  it("should return null for invalid opacity values", () => {
+    expect(parseShadow("shadow-red-500/101")).toBeNull();
+    expect(parseShadow("shadow-red-500/-1")).toBeNull();
+    expect(parseShadow("shadow-red-500/abc")).toBeNull();
+  });
+
+  it("should return null for invalid color names", () => {
+    expect(parseShadow("shadow-notacolor")).toBeNull();
+    expect(parseShadow("shadow-foobar-500")).toBeNull();
+    expect(parseShadow("shadow-red-999")).toBeNull();
+  });
+});
+
+describe("parseShadow - shadow colors with custom colors", () => {
+  const customColors = {
+    brand: "#FF5733",
+    "brand-primary": "#3498DB",
+    "brand-secondary": "#2ECC71",
+  };
+
+  it("should parse shadow with custom colors", () => {
+    expect(parseShadow("shadow-brand", customColors)).toEqual({ shadowColor: "#FF5733" });
+    expect(parseShadow("shadow-brand-primary", customColors)).toEqual({ shadowColor: "#3498DB" });
+    expect(parseShadow("shadow-brand-secondary", customColors)).toEqual({ shadowColor: "#2ECC71" });
+  });
+
+  it("should parse shadow with custom colors and opacity", () => {
+    expect(parseShadow("shadow-brand/50", customColors)).toEqual({ shadowColor: "#FF573380" });
+    expect(parseShadow("shadow-brand-primary/80", customColors)).toEqual({ shadowColor: "#3498DBCC" });
+  });
+
+  it("should still support preset colors with custom colors", () => {
+    expect(parseShadow("shadow-red-500", customColors)).toEqual({ shadowColor: SHADOW_COLORS["red-500"] });
+    expect(parseShadow("shadow-blue-800/50", customColors)).toEqual({
+      shadowColor: applyOpacity(SHADOW_COLORS["blue-800"], 50),
+    });
+  });
+
+  it("should allow custom colors to override presets", () => {
+    const overrideColors = {
+      "red-500": "#CUSTOM1",
+    };
+    expect(parseShadow("shadow-red-500", overrideColors)).toEqual({ shadowColor: "#CUSTOM1" });
+  });
+});