@mgcrea/react-native-tailwind 0.3.0 → 0.5.0

package/src/parser/shadows.ts

@@ -0,0 +1,133 @@
+/**
+ * Shadow and elevation utilities for React Native
+ * iOS uses shadow* properties, Android uses elevation
+ */
+
+import { Platform } from "react-native";
+import type { StyleObject } from "../types";
+
+/**
+ * Shadow scale definitions (raw values, not platform-specific)
+ * Based on Tailwind CSS shadow scale, adapted for React Native
+ */
+const SHADOW_DEFINITIONS = {
+  "shadow-sm": {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 1,
+    },
+    android: {
+      elevation: 1,
+    },
+  },
+  shadow: {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2,
+    },
+    android: {
+      elevation: 2,
+    },
+  },
+  "shadow-md": {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 3 },
+      shadowOpacity: 0.15,
+      shadowRadius: 4,
+    },
+    android: {
+      elevation: 4,
+    },
+  },
+  "shadow-lg": {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 6 },
+      shadowOpacity: 0.2,
+      shadowRadius: 8,
+    },
+    android: {
+      elevation: 8,
+    },
+  },
+  "shadow-xl": {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 10 },
+      shadowOpacity: 0.25,
+      shadowRadius: 12,
+    },
+    android: {
+      elevation: 12,
+    },
+  },
+  "shadow-2xl": {
+    ios: {
+      shadowColor: "#000000",
+      shadowOffset: { width: 0, height: 20 },
+      shadowOpacity: 0.3,
+      shadowRadius: 24,
+    },
+    android: {
+      elevation: 16,
+    },
+  },
+  "shadow-none": {
+    ios: {
+      shadowColor: "transparent",
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+    },
+    android: {
+      elevation: 0,
+    },
+  },
+} as const;
+
+/**
+ * Helper function to build the shadow scale using Platform.select()
+ * This allows tests to rebuild the scale after changing the platform mock
+ */
+function buildShadowScale(): Record<string, StyleObject> {
+  const scale: Record<string, StyleObject> = {};
+  for (const [key, value] of Object.entries(SHADOW_DEFINITIONS)) {
+    scale[key] = Platform.select<StyleObject>(value as never);
+  }
+  return scale;
+}
+
+/**
+ * Computed shadow scale using Platform.select()
+ * This is evaluated at module load time for production use
+ */
+let SHADOW_SCALE = buildShadowScale();
+
+/**
+ * Rebuild the shadow scale (useful for testing with platform mocks)
+ */
+export function rebuildShadowScale() {
+  SHADOW_SCALE = buildShadowScale();
+}
+
+/**
+ * Parse shadow classes
+ * @param cls - Class name to parse
+ * @returns Style object or null if not a shadow class
+ */
+export function parseShadow(cls: string): StyleObject | null {
+  // Check if it's a shadow class
+  if (cls in SHADOW_SCALE) {
+    return SHADOW_SCALE[cls];
+  }
+
+  return null;
+}
+
+// Export shadow scale and builder for testing/advanced usage
+export { buildShadowScale, SHADOW_SCALE };

package/src/parser/sizing.test.ts

@@ -0,0 +1,256 @@
+import { describe, expect, it } from "vitest";
+import { SIZE_PERCENTAGES, SIZE_SCALE, parseSizing } from "./sizing";
+
+describe("SIZE_SCALE", () => {
+  it("should export complete size scale", () => {
+    expect(SIZE_SCALE).toMatchSnapshot();
+  });
+});
+
+describe("SIZE_PERCENTAGES", () => {
+  it("should export complete percentage sizes", () => {
+    expect(SIZE_PERCENTAGES).toMatchSnapshot();
+  });
+});
+
+describe("parseSizing - width", () => {
+  it("should parse width with numeric values", () => {
+    expect(parseSizing("w-0")).toEqual({ width: 0 });
+    expect(parseSizing("w-4")).toEqual({ width: 16 });
+    expect(parseSizing("w-8")).toEqual({ width: 32 });
+    expect(parseSizing("w-96")).toEqual({ width: 384 });
+  });
+
+  it("should parse width with fractional values", () => {
+    expect(parseSizing("w-0.5")).toEqual({ width: 2 });
+    expect(parseSizing("w-1.5")).toEqual({ width: 6 });
+    expect(parseSizing("w-2.5")).toEqual({ width: 10 });
+  });
+
+  it("should parse width with percentage values", () => {
+    expect(parseSizing("w-full")).toEqual({ width: "100%" });
+    expect(parseSizing("w-1/2")).toEqual({ width: "50%" });
+    expect(parseSizing("w-1/3")).toEqual({ width: "33.333333%" });
+    expect(parseSizing("w-2/3")).toEqual({ width: "66.666667%" });
+    expect(parseSizing("w-1/4")).toEqual({ width: "25%" });
+    expect(parseSizing("w-3/4")).toEqual({ width: "75%" });
+  });
+
+  it("should parse width with special values", () => {
+    expect(parseSizing("w-auto")).toEqual({ width: "auto" });
+  });
+
+  it("should parse width with arbitrary pixel values", () => {
+    expect(parseSizing("w-[123px]")).toEqual({ width: 123 });
+    expect(parseSizing("w-[123]")).toEqual({ width: 123 });
+    expect(parseSizing("w-[350px]")).toEqual({ width: 350 });
+  });
+
+  it("should parse width with arbitrary percentage values", () => {
+    expect(parseSizing("w-[50%]")).toEqual({ width: "50%" });
+    expect(parseSizing("w-[33.333%]")).toEqual({ width: "33.333%" });
+    expect(parseSizing("w-[85%]")).toEqual({ width: "85%" });
+  });
+});
+
+describe("parseSizing - height", () => {
+  it("should parse height with numeric values", () => {
+    expect(parseSizing("h-0")).toEqual({ height: 0 });
+    expect(parseSizing("h-4")).toEqual({ height: 16 });
+    expect(parseSizing("h-8")).toEqual({ height: 32 });
+    expect(parseSizing("h-96")).toEqual({ height: 384 });
+  });
+
+  it("should parse height with fractional values", () => {
+    expect(parseSizing("h-0.5")).toEqual({ height: 2 });
+    expect(parseSizing("h-1.5")).toEqual({ height: 6 });
+    expect(parseSizing("h-2.5")).toEqual({ height: 10 });
+  });
+
+  it("should parse height with percentage values", () => {
+    expect(parseSizing("h-full")).toEqual({ height: "100%" });
+    expect(parseSizing("h-1/2")).toEqual({ height: "50%" });
+    expect(parseSizing("h-1/3")).toEqual({ height: "33.333333%" });
+    expect(parseSizing("h-2/3")).toEqual({ height: "66.666667%" });
+  });
+
+  it("should parse height with special values", () => {
+    expect(parseSizing("h-auto")).toEqual({ height: "auto" });
+  });
+
+  it("should parse height with arbitrary values", () => {
+    expect(parseSizing("h-[200px]")).toEqual({ height: 200 });
+    expect(parseSizing("h-[75%]")).toEqual({ height: "75%" });
+  });
+});
+
+describe("parseSizing - min width", () => {
+  it("should parse min-width with numeric values", () => {
+    expect(parseSizing("min-w-0")).toEqual({ minWidth: 0 });
+    expect(parseSizing("min-w-4")).toEqual({ minWidth: 16 });
+    expect(parseSizing("min-w-8")).toEqual({ minWidth: 32 });
+  });
+
+  it("should parse min-width with percentage values", () => {
+    expect(parseSizing("min-w-full")).toEqual({ minWidth: "100%" });
+    expect(parseSizing("min-w-1/2")).toEqual({ minWidth: "50%" });
+  });
+
+  it("should parse min-width with arbitrary values", () => {
+    expect(parseSizing("min-w-[200px]")).toEqual({ minWidth: 200 });
+    expect(parseSizing("min-w-[50%]")).toEqual({ minWidth: "50%" });
+  });
+});
+
+describe("parseSizing - min height", () => {
+  it("should parse min-height with numeric values", () => {
+    expect(parseSizing("min-h-0")).toEqual({ minHeight: 0 });
+    expect(parseSizing("min-h-4")).toEqual({ minHeight: 16 });
+    expect(parseSizing("min-h-8")).toEqual({ minHeight: 32 });
+  });
+
+  it("should parse min-height with percentage values", () => {
+    expect(parseSizing("min-h-full")).toEqual({ minHeight: "100%" });
+    expect(parseSizing("min-h-1/2")).toEqual({ minHeight: "50%" });
+  });
+
+  it("should parse min-height with arbitrary values", () => {
+    expect(parseSizing("min-h-[150px]")).toEqual({ minHeight: 150 });
+    expect(parseSizing("min-h-[40%]")).toEqual({ minHeight: "40%" });
+  });
+});
+
+describe("parseSizing - max width", () => {
+  it("should parse max-width with numeric values", () => {
+    expect(parseSizing("max-w-0")).toEqual({ maxWidth: 0 });
+    expect(parseSizing("max-w-4")).toEqual({ maxWidth: 16 });
+    expect(parseSizing("max-w-8")).toEqual({ maxWidth: 32 });
+  });
+
+  it("should parse max-width with percentage values", () => {
+    expect(parseSizing("max-w-full")).toEqual({ maxWidth: "100%" });
+    expect(parseSizing("max-w-1/2")).toEqual({ maxWidth: "50%" });
+  });
+
+  it("should parse max-width with arbitrary values", () => {
+    expect(parseSizing("max-w-[500px]")).toEqual({ maxWidth: 500 });
+    expect(parseSizing("max-w-[80%]")).toEqual({ maxWidth: "80%" });
+  });
+});
+
+describe("parseSizing - max height", () => {
+  it("should parse max-height with numeric values", () => {
+    expect(parseSizing("max-h-0")).toEqual({ maxHeight: 0 });
+    expect(parseSizing("max-h-4")).toEqual({ maxHeight: 16 });
+    expect(parseSizing("max-h-8")).toEqual({ maxHeight: 32 });
+  });
+
+  it("should parse max-height with percentage values", () => {
+    expect(parseSizing("max-h-full")).toEqual({ maxHeight: "100%" });
+    expect(parseSizing("max-h-1/2")).toEqual({ maxHeight: "50%" });
+  });
+
+  it("should parse max-height with arbitrary values", () => {
+    expect(parseSizing("max-h-[300px]")).toEqual({ maxHeight: 300 });
+    expect(parseSizing("max-h-[90%]")).toEqual({ maxHeight: "90%" });
+  });
+});
+
+describe("parseSizing - edge cases", () => {
+  it("should return null for invalid classes", () => {
+    expect(parseSizing("invalid")).toBeNull();
+    expect(parseSizing("w")).toBeNull();
+    expect(parseSizing("h")).toBeNull();
+    expect(parseSizing("width-4")).toBeNull();
+    expect(parseSizing("height-4")).toBeNull();
+  });
+
+  it("should return null for invalid size values", () => {
+    expect(parseSizing("w-invalid")).toBeNull();
+    expect(parseSizing("h-999")).toBeNull();
+    expect(parseSizing("min-w-abc")).toBeNull();
+  });
+
+  it("should return null for arbitrary values with unsupported units", () => {
+    expect(parseSizing("w-[16rem]")).toBeNull();
+    expect(parseSizing("h-[2em]")).toBeNull();
+    expect(parseSizing("max-w-[50vh]")).toBeNull();
+    expect(parseSizing("min-h-[100vw]")).toBeNull();
+  });
+
+  it("should return null for malformed arbitrary values", () => {
+    expect(parseSizing("w-[16")).toBeNull();
+    expect(parseSizing("h-16]")).toBeNull();
+    expect(parseSizing("min-w-[]")).toBeNull();
+  });
+
+  it("should handle edge case size values", () => {
+    expect(parseSizing("w-0")).toEqual({ width: 0 });
+    expect(parseSizing("h-0")).toEqual({ height: 0 });
+    expect(parseSizing("min-w-0")).toEqual({ minWidth: 0 });
+    expect(parseSizing("max-h-0")).toEqual({ maxHeight: 0 });
+  });
+
+  it("should not match partial class names", () => {
+    expect(parseSizing("tw-4")).toBeNull();
+    expect(parseSizing("width-4")).toBeNull();
+    expect(parseSizing("height-4")).toBeNull();
+  });
+});
+
+describe("parseSizing - comprehensive coverage", () => {
+  it("should parse all width variants with same value", () => {
+    const value = 16;
+    expect(parseSizing("w-4")).toEqual({ width: value });
+    expect(parseSizing("min-w-4")).toEqual({ minWidth: value });
+    expect(parseSizing("max-w-4")).toEqual({ maxWidth: value });
+  });
+
+  it("should parse all height variants with same value", () => {
+    const value = 16;
+    expect(parseSizing("h-4")).toEqual({ height: value });
+    expect(parseSizing("min-h-4")).toEqual({ minHeight: value });
+    expect(parseSizing("max-h-4")).toEqual({ maxHeight: value });
+  });
+
+  it("should handle large size values", () => {
+    expect(parseSizing("w-96")).toEqual({ width: 384 });
+    expect(parseSizing("h-96")).toEqual({ height: 384 });
+    expect(parseSizing("max-w-96")).toEqual({ maxWidth: 384 });
+  });
+
+  it("should handle arbitrary values across all width variants", () => {
+    expect(parseSizing("w-[123px]")).toEqual({ width: 123 });
+    expect(parseSizing("min-w-[123px]")).toEqual({ minWidth: 123 });
+    expect(parseSizing("max-w-[123px]")).toEqual({ maxWidth: 123 });
+  });
+
+  it("should handle arbitrary values across all height variants", () => {
+    expect(parseSizing("h-[200px]")).toEqual({ height: 200 });
+    expect(parseSizing("min-h-[200px]")).toEqual({ minHeight: 200 });
+    expect(parseSizing("max-h-[200px]")).toEqual({ maxHeight: 200 });
+  });
+
+  it("should handle arbitrary percentage values across all variants", () => {
+    expect(parseSizing("w-[75%]")).toEqual({ width: "75%" });
+    expect(parseSizing("h-[60%]")).toEqual({ height: "60%" });
+    expect(parseSizing("min-w-[25%]")).toEqual({ minWidth: "25%" });
+    expect(parseSizing("max-h-[90%]")).toEqual({ maxHeight: "90%" });
+  });
+
+  it("should handle all fractional percentage variants", () => {
+    expect(parseSizing("w-1/5")).toEqual({ width: "20%" });
+    expect(parseSizing("w-2/5")).toEqual({ width: "40%" });
+    expect(parseSizing("w-3/5")).toEqual({ width: "60%" });
+    expect(parseSizing("w-4/5")).toEqual({ width: "80%" });
+    expect(parseSizing("w-1/6")).toEqual({ width: "16.666667%" });
+    expect(parseSizing("w-5/6")).toEqual({ width: "83.333333%" });
+  });
+
+  it("should handle special values consistently", () => {
+    expect(parseSizing("w-auto")).toEqual({ width: "auto" });
+    expect(parseSizing("h-auto")).toEqual({ height: "auto" });
+    expect(parseSizing("w-full")).toEqual({ width: "100%" });
+    expect(parseSizing("h-full")).toEqual({ height: "100%" });
+  });
+});

package/src/parser/spacing.test.ts

@@ -0,0 +1,226 @@
+import { describe, expect, it } from "vitest";
+import { SPACING_SCALE, parseSpacing } from "./spacing";
+
+describe("SPACING_SCALE", () => {
+  it("should export complete spacing scale", () => {
+    expect(SPACING_SCALE).toMatchSnapshot();
+  });
+});
+
+describe("parseSpacing - margin", () => {
+  it("should parse margin all sides", () => {
+    expect(parseSpacing("m-0")).toEqual({ margin: 0 });
+    expect(parseSpacing("m-4")).toEqual({ margin: 16 });
+    expect(parseSpacing("m-8")).toEqual({ margin: 32 });
+    expect(parseSpacing("m-96")).toEqual({ margin: 384 });
+  });
+
+  it("should parse margin with fractional values", () => {
+    expect(parseSpacing("m-0.5")).toEqual({ margin: 2 });
+    expect(parseSpacing("m-1.5")).toEqual({ margin: 6 });
+    expect(parseSpacing("m-2.5")).toEqual({ margin: 10 });
+  });
+
+  it("should parse margin horizontal", () => {
+    expect(parseSpacing("mx-0")).toEqual({ marginHorizontal: 0 });
+    expect(parseSpacing("mx-4")).toEqual({ marginHorizontal: 16 });
+    expect(parseSpacing("mx-8")).toEqual({ marginHorizontal: 32 });
+  });
+
+  it("should parse margin vertical", () => {
+    expect(parseSpacing("my-0")).toEqual({ marginVertical: 0 });
+    expect(parseSpacing("my-4")).toEqual({ marginVertical: 16 });
+    expect(parseSpacing("my-8")).toEqual({ marginVertical: 32 });
+  });
+
+  it("should parse margin directional", () => {
+    expect(parseSpacing("mt-4")).toEqual({ marginTop: 16 });
+    expect(parseSpacing("mr-4")).toEqual({ marginRight: 16 });
+    expect(parseSpacing("mb-4")).toEqual({ marginBottom: 16 });
+    expect(parseSpacing("ml-4")).toEqual({ marginLeft: 16 });
+  });
+
+  it("should parse margin with arbitrary values", () => {
+    expect(parseSpacing("m-[16px]")).toEqual({ margin: 16 });
+    expect(parseSpacing("m-[16]")).toEqual({ margin: 16 });
+    expect(parseSpacing("m-[100px]")).toEqual({ margin: 100 });
+    expect(parseSpacing("m-[100]")).toEqual({ margin: 100 });
+  });
+
+  it("should parse margin directional with arbitrary values", () => {
+    expect(parseSpacing("mt-[24px]")).toEqual({ marginTop: 24 });
+    expect(parseSpacing("mr-[32]")).toEqual({ marginRight: 32 });
+    expect(parseSpacing("mb-[16px]")).toEqual({ marginBottom: 16 });
+    expect(parseSpacing("ml-[48]")).toEqual({ marginLeft: 48 });
+  });
+
+  it("should parse margin horizontal/vertical with arbitrary values", () => {
+    expect(parseSpacing("mx-[20px]")).toEqual({ marginHorizontal: 20 });
+    expect(parseSpacing("my-[30]")).toEqual({ marginVertical: 30 });
+  });
+});
+
+describe("parseSpacing - padding", () => {
+  it("should parse padding all sides", () => {
+    expect(parseSpacing("p-0")).toEqual({ padding: 0 });
+    expect(parseSpacing("p-4")).toEqual({ padding: 16 });
+    expect(parseSpacing("p-8")).toEqual({ padding: 32 });
+    expect(parseSpacing("p-96")).toEqual({ padding: 384 });
+  });
+
+  it("should parse padding with fractional values", () => {
+    expect(parseSpacing("p-0.5")).toEqual({ padding: 2 });
+    expect(parseSpacing("p-1.5")).toEqual({ padding: 6 });
+    expect(parseSpacing("p-2.5")).toEqual({ padding: 10 });
+  });
+
+  it("should parse padding horizontal", () => {
+    expect(parseSpacing("px-0")).toEqual({ paddingHorizontal: 0 });
+    expect(parseSpacing("px-4")).toEqual({ paddingHorizontal: 16 });
+    expect(parseSpacing("px-8")).toEqual({ paddingHorizontal: 32 });
+  });
+
+  it("should parse padding vertical", () => {
+    expect(parseSpacing("py-0")).toEqual({ paddingVertical: 0 });
+    expect(parseSpacing("py-4")).toEqual({ paddingVertical: 16 });
+    expect(parseSpacing("py-8")).toEqual({ paddingVertical: 32 });
+  });
+
+  it("should parse padding directional", () => {
+    expect(parseSpacing("pt-4")).toEqual({ paddingTop: 16 });
+    expect(parseSpacing("pr-4")).toEqual({ paddingRight: 16 });
+    expect(parseSpacing("pb-4")).toEqual({ paddingBottom: 16 });
+    expect(parseSpacing("pl-4")).toEqual({ paddingLeft: 16 });
+  });
+
+  it("should parse padding with arbitrary values", () => {
+    expect(parseSpacing("p-[16px]")).toEqual({ padding: 16 });
+    expect(parseSpacing("p-[16]")).toEqual({ padding: 16 });
+    expect(parseSpacing("p-[100px]")).toEqual({ padding: 100 });
+    expect(parseSpacing("p-[100]")).toEqual({ padding: 100 });
+  });
+
+  it("should parse padding directional with arbitrary values", () => {
+    expect(parseSpacing("pt-[24px]")).toEqual({ paddingTop: 24 });
+    expect(parseSpacing("pr-[32]")).toEqual({ paddingRight: 32 });
+    expect(parseSpacing("pb-[16px]")).toEqual({ paddingBottom: 16 });
+    expect(parseSpacing("pl-[48]")).toEqual({ paddingLeft: 48 });
+  });
+
+  it("should parse padding horizontal/vertical with arbitrary values", () => {
+    expect(parseSpacing("px-[20px]")).toEqual({ paddingHorizontal: 20 });
+    expect(parseSpacing("py-[30]")).toEqual({ paddingVertical: 30 });
+  });
+});
+
+describe("parseSpacing - gap", () => {
+  it("should parse gap", () => {
+    expect(parseSpacing("gap-0")).toEqual({ gap: 0 });
+    expect(parseSpacing("gap-4")).toEqual({ gap: 16 });
+    expect(parseSpacing("gap-8")).toEqual({ gap: 32 });
+    expect(parseSpacing("gap-96")).toEqual({ gap: 384 });
+  });
+
+  it("should parse gap with fractional values", () => {
+    expect(parseSpacing("gap-0.5")).toEqual({ gap: 2 });
+    expect(parseSpacing("gap-1.5")).toEqual({ gap: 6 });
+    expect(parseSpacing("gap-2.5")).toEqual({ gap: 10 });
+  });
+
+  it("should parse gap with arbitrary values", () => {
+    expect(parseSpacing("gap-[16px]")).toEqual({ gap: 16 });
+    expect(parseSpacing("gap-[16]")).toEqual({ gap: 16 });
+    expect(parseSpacing("gap-[100px]")).toEqual({ gap: 100 });
+    expect(parseSpacing("gap-[100]")).toEqual({ gap: 100 });
+  });
+});
+
+describe("parseSpacing - edge cases", () => {
+  it("should return null for invalid classes", () => {
+    expect(parseSpacing("invalid")).toBeNull();
+    expect(parseSpacing("m")).toBeNull();
+    expect(parseSpacing("p")).toBeNull();
+    expect(parseSpacing("margin-4")).toBeNull();
+    expect(parseSpacing("padding-4")).toBeNull();
+  });
+
+  it("should return null for invalid spacing values", () => {
+    expect(parseSpacing("m-invalid")).toBeNull();
+    expect(parseSpacing("p-999")).toBeNull();
+    expect(parseSpacing("gap-abc")).toBeNull();
+  });
+
+  it("should return null for arbitrary values with unsupported units", () => {
+    expect(parseSpacing("m-[16rem]")).toBeNull();
+    expect(parseSpacing("p-[2em]")).toBeNull();
+    expect(parseSpacing("gap-[50%]")).toBeNull();
+  });
+
+  it("should return null for malformed arbitrary values", () => {
+    expect(parseSpacing("m-[16")).toBeNull();
+    expect(parseSpacing("p-16]")).toBeNull();
+    expect(parseSpacing("gap-[]")).toBeNull();
+  });
+
+  it("should handle edge case spacing values", () => {
+    expect(parseSpacing("m-0")).toEqual({ margin: 0 });
+    expect(parseSpacing("p-0")).toEqual({ padding: 0 });
+    expect(parseSpacing("gap-0")).toEqual({ gap: 0 });
+  });
+
+  it("should not match partial class names", () => {
+    expect(parseSpacing("sm-4")).toBeNull();
+    expect(parseSpacing("margin-4")).toBeNull();
+    expect(parseSpacing("padding-4")).toBeNull();
+  });
+});
+
+describe("parseSpacing - comprehensive coverage", () => {
+  it("should parse all margin directions with same value", () => {
+    const value = 16;
+    expect(parseSpacing("m-4")).toEqual({ margin: value });
+    expect(parseSpacing("mx-4")).toEqual({ marginHorizontal: value });
+    expect(parseSpacing("my-4")).toEqual({ marginVertical: value });
+    expect(parseSpacing("mt-4")).toEqual({ marginTop: value });
+    expect(parseSpacing("mr-4")).toEqual({ marginRight: value });
+    expect(parseSpacing("mb-4")).toEqual({ marginBottom: value });
+    expect(parseSpacing("ml-4")).toEqual({ marginLeft: value });
+  });
+
+  it("should parse all padding directions with same value", () => {
+    const value = 16;
+    expect(parseSpacing("p-4")).toEqual({ padding: value });
+    expect(parseSpacing("px-4")).toEqual({ paddingHorizontal: value });
+    expect(parseSpacing("py-4")).toEqual({ paddingVertical: value });
+    expect(parseSpacing("pt-4")).toEqual({ paddingTop: value });
+    expect(parseSpacing("pr-4")).toEqual({ paddingRight: value });
+    expect(parseSpacing("pb-4")).toEqual({ paddingBottom: value });
+    expect(parseSpacing("pl-4")).toEqual({ paddingLeft: value });
+  });
+
+  it("should handle large spacing values", () => {
+    expect(parseSpacing("m-96")).toEqual({ margin: 384 });
+    expect(parseSpacing("p-96")).toEqual({ padding: 384 });
+    expect(parseSpacing("gap-96")).toEqual({ gap: 384 });
+  });
+
+  it("should handle arbitrary values across all margin directions", () => {
+    expect(parseSpacing("m-[50px]")).toEqual({ margin: 50 });
+    expect(parseSpacing("mx-[50px]")).toEqual({ marginHorizontal: 50 });
+    expect(parseSpacing("my-[50px]")).toEqual({ marginVertical: 50 });
+    expect(parseSpacing("mt-[50px]")).toEqual({ marginTop: 50 });
+    expect(parseSpacing("mr-[50px]")).toEqual({ marginRight: 50 });
+    expect(parseSpacing("mb-[50px]")).toEqual({ marginBottom: 50 });
+    expect(parseSpacing("ml-[50px]")).toEqual({ marginLeft: 50 });
+  });
+
+  it("should handle arbitrary values across all padding directions", () => {
+    expect(parseSpacing("p-[50px]")).toEqual({ padding: 50 });
+    expect(parseSpacing("px-[50px]")).toEqual({ paddingHorizontal: 50 });
+    expect(parseSpacing("py-[50px]")).toEqual({ paddingVertical: 50 });
+    expect(parseSpacing("pt-[50px]")).toEqual({ paddingTop: 50 });
+    expect(parseSpacing("pr-[50px]")).toEqual({ paddingRight: 50 });
+    expect(parseSpacing("pb-[50px]")).toEqual({ paddingBottom: 50 });
+    expect(parseSpacing("pl-[50px]")).toEqual({ paddingLeft: 50 });
+  });
+});