@mgcrea/react-native-tailwind 0.3.0 → 0.5.0

package/src/index.ts

@@ -11,10 +11,28 @@ export { generateStyleKey } from "./utils/styleKey";
 export type { RNStyle, StyleObject } from "./types";
 
 // Re-export individual parsers for advanced usage
-export { parseBorder, parseColor, parseLayout, parseSizing, parseSpacing, parseTypography } from "./parser";
+export {
+  parseAspectRatio,
+  parseBorder,
+  parseColor,
+  parseLayout,
+  parseShadow,
+  parseSizing,
+  parseSpacing,
+  parseTypography,
+} from "./parser";
 
 // Re-export constants for customization
+export { ASPECT_RATIO_PRESETS } from "./parser/aspectRatio";
 export { COLORS } from "./parser/colors";
+export { INSET_SCALE, Z_INDEX_SCALE } from "./parser/layout";
+export { SHADOW_SCALE } from "./parser/shadows";
 export { SIZE_PERCENTAGES, SIZE_SCALE } from "./parser/sizing";
 export { SPACING_SCALE } from "./parser/spacing";
-export { FONT_SIZES } from "./parser/typography";
+export { FONT_SIZES, LETTER_SPACING_SCALE } from "./parser/typography";
+
+// Re-export enhanced components with modifier support
+export { Pressable } from "./components/Pressable";
+export type { PressableProps } from "./components/Pressable";
+export { TextInput } from "./components/TextInput";
+export type { TextInputProps } from "./components/TextInput";

package/src/parser/aspectRatio.test.ts

@@ -0,0 +1,191 @@
+import { describe, expect, it } from "vitest";
+import { ASPECT_RATIO_PRESETS, parseAspectRatio } from "./aspectRatio";
+
+describe("ASPECT_RATIO_PRESETS", () => {
+  it("should export aspect ratio presets", () => {
+    expect(ASPECT_RATIO_PRESETS).toMatchSnapshot();
+  });
+
+  it("should have all preset values", () => {
+    expect(ASPECT_RATIO_PRESETS).toHaveProperty("aspect-auto");
+    expect(ASPECT_RATIO_PRESETS).toHaveProperty("aspect-square");
+    expect(ASPECT_RATIO_PRESETS).toHaveProperty("aspect-video");
+  });
+
+  it("should have correct preset values", () => {
+    expect(ASPECT_RATIO_PRESETS["aspect-auto"]).toBeUndefined();
+    expect(ASPECT_RATIO_PRESETS["aspect-square"]).toBe(1);
+    expect(ASPECT_RATIO_PRESETS["aspect-video"]).toBe(16 / 9);
+  });
+});
+
+describe("parseAspectRatio - preset values", () => {
+  it("should parse aspect-square", () => {
+    expect(parseAspectRatio("aspect-square")).toEqual({ aspectRatio: 1 });
+  });
+
+  it("should parse aspect-video", () => {
+    expect(parseAspectRatio("aspect-video")).toEqual({ aspectRatio: 16 / 9 });
+  });
+
+  it("should parse aspect-auto", () => {
+    // aspect-auto removes the aspect ratio constraint
+    expect(parseAspectRatio("aspect-auto")).toEqual({});
+  });
+});
+
+describe("parseAspectRatio - arbitrary values", () => {
+  it("should parse arbitrary aspect ratio values", () => {
+    expect(parseAspectRatio("aspect-[4/3]")).toEqual({ aspectRatio: 4 / 3 });
+    expect(parseAspectRatio("aspect-[16/9]")).toEqual({ aspectRatio: 16 / 9 });
+    expect(parseAspectRatio("aspect-[21/9]")).toEqual({ aspectRatio: 21 / 9 });
+    expect(parseAspectRatio("aspect-[1/1]")).toEqual({ aspectRatio: 1 });
+  });
+
+  it("should handle arbitrary ratios with different aspect values", () => {
+    expect(parseAspectRatio("aspect-[2/1]")).toEqual({ aspectRatio: 2 });
+    expect(parseAspectRatio("aspect-[3/2]")).toEqual({ aspectRatio: 1.5 });
+    expect(parseAspectRatio("aspect-[9/16]")).toEqual({ aspectRatio: 9 / 16 });
+  });
+
+  it("should handle arbitrary ratios with large numbers", () => {
+    expect(parseAspectRatio("aspect-[100/50]")).toEqual({ aspectRatio: 2 });
+    expect(parseAspectRatio("aspect-[1920/1080]")).toEqual({ aspectRatio: 1920 / 1080 });
+  });
+
+  it("should calculate correct aspect ratio values", () => {
+    const result = parseAspectRatio("aspect-[4/3]");
+    expect(result?.aspectRatio).toBeCloseTo(1.333, 3);
+
+    const result2 = parseAspectRatio("aspect-[16/9]");
+    expect(result2?.aspectRatio).toBeCloseTo(1.778, 3);
+  });
+});
+
+describe("parseAspectRatio - edge cases", () => {
+  it("should return null for division by zero", () => {
+    expect(parseAspectRatio("aspect-[4/0]")).toBeNull();
+    expect(parseAspectRatio("aspect-[16/0]")).toBeNull();
+  });
+
+  it("should return null for invalid arbitrary values", () => {
+    expect(parseAspectRatio("aspect-[4]")).toBeNull(); // Missing denominator
+    expect(parseAspectRatio("aspect-[/3]")).toBeNull(); // Missing numerator
+    expect(parseAspectRatio("aspect-[4/3/2]")).toBeNull(); // Extra slash
+    expect(parseAspectRatio("aspect-[abc/def]")).toBeNull(); // Non-numeric
+  });
+
+  it("should return null for malformed brackets", () => {
+    expect(parseAspectRatio("aspect-[4/3")).toBeNull(); // Missing closing bracket
+    expect(parseAspectRatio("aspect-4/3]")).toBeNull(); // Missing opening bracket
+    expect(parseAspectRatio("aspect-4/3")).toBeNull(); // No brackets
+  });
+
+  it("should return null for invalid class prefixes", () => {
+    expect(parseAspectRatio("ratio-[4/3]")).toBeNull();
+    expect(parseAspectRatio("ar-[4/3]")).toBeNull();
+    expect(parseAspectRatio("aspectRatio-[4/3]")).toBeNull();
+  });
+});
+
+describe("parseAspectRatio - invalid classes", () => {
+  it("should return null for non-aspect classes", () => {
+    expect(parseAspectRatio("bg-blue-500")).toBeNull();
+    expect(parseAspectRatio("p-4")).toBeNull();
+    expect(parseAspectRatio("text-white")).toBeNull();
+    expect(parseAspectRatio("w-full")).toBeNull();
+  });
+
+  it("should return null for invalid aspect class names", () => {
+    expect(parseAspectRatio("aspect")).toBeNull();
+    expect(parseAspectRatio("aspect-")).toBeNull();
+    expect(parseAspectRatio("aspect-invalid")).toBeNull();
+    expect(parseAspectRatio("aspect-16-9")).toBeNull();
+  });
+
+  it("should return null for empty or whitespace input", () => {
+    expect(parseAspectRatio("")).toBeNull();
+    expect(parseAspectRatio("   ")).toBeNull();
+  });
+});
+
+describe("parseAspectRatio - type validation", () => {
+  it("should return objects with correct property types", () => {
+    const square = parseAspectRatio("aspect-square");
+    expect(typeof square?.aspectRatio).toBe("number");
+
+    const video = parseAspectRatio("aspect-video");
+    expect(typeof video?.aspectRatio).toBe("number");
+
+    const arbitrary = parseAspectRatio("aspect-[4/3]");
+    expect(typeof arbitrary?.aspectRatio).toBe("number");
+  });
+
+  it("should return null or object, never undefined", () => {
+    const valid = parseAspectRatio("aspect-square");
+    expect(valid).not.toBeUndefined();
+    expect(typeof valid).toBe("object");
+
+    const invalid = parseAspectRatio("invalid");
+    expect(invalid).toBeNull();
+  });
+});
+
+describe("parseAspectRatio - comprehensive coverage", () => {
+  it("should parse all preset variants without errors", () => {
+    const presets = ["aspect-auto", "aspect-square", "aspect-video"];
+
+    presets.forEach((preset) => {
+      const result = parseAspectRatio(preset);
+      expect(result).toBeTruthy();
+      expect(typeof result).toBe("object");
+    });
+  });
+
+  it("should return consistent results for same input", () => {
+    const result1 = parseAspectRatio("aspect-square");
+    const result2 = parseAspectRatio("aspect-square");
+    expect(result1).toEqual(result2);
+
+    const result3 = parseAspectRatio("aspect-[4/3]");
+    const result4 = parseAspectRatio("aspect-[4/3]");
+    expect(result3).toEqual(result4);
+  });
+
+  it("should handle case-sensitive class names", () => {
+    // Aspect ratio classes are case-sensitive
+    expect(parseAspectRatio("ASPECT-square")).toBeNull();
+    expect(parseAspectRatio("Aspect-video")).toBeNull();
+    expect(parseAspectRatio("aspect-SQUARE")).toBeNull();
+  });
+
+  it("should handle common aspect ratios", () => {
+    // Common aspect ratios
+    expect(parseAspectRatio("aspect-[1/1]")).toBeTruthy(); // Square
+    expect(parseAspectRatio("aspect-[4/3]")).toBeTruthy(); // Standard
+    expect(parseAspectRatio("aspect-[16/9]")).toBeTruthy(); // Widescreen
+    expect(parseAspectRatio("aspect-[21/9]")).toBeTruthy(); // Ultrawide
+    expect(parseAspectRatio("aspect-[9/16]")).toBeTruthy(); // Portrait video
+  });
+
+  it("should differentiate between preset and arbitrary values", () => {
+    // Preset
+    const preset = parseAspectRatio("aspect-video");
+    expect(preset).toEqual({ aspectRatio: 16 / 9 });
+
+    // Arbitrary with same ratio
+    const arbitrary = parseAspectRatio("aspect-[16/9]");
+    expect(arbitrary).toEqual({ aspectRatio: 16 / 9 });
+
+    // Both should produce same result
+    expect(preset).toEqual(arbitrary);
+  });
+
+  it("should handle fractional results correctly", () => {
+    const result = parseAspectRatio("aspect-[5/7]");
+    expect(result?.aspectRatio).toBeCloseTo(0.714, 3);
+
+    const result2 = parseAspectRatio("aspect-[3/4]");
+    expect(result2?.aspectRatio).toBe(0.75);
+  });
+});

package/src/parser/aspectRatio.ts

@@ -0,0 +1,73 @@
+/**
+ * Aspect ratio utilities for React Native
+ * Uses aspectRatio style property (React Native 0.71+)
+ */
+
+import type { StyleObject } from "../types";
+
+/**
+ * Preset aspect ratios
+ */
+const ASPECT_RATIO_PRESETS: Record<string, number | undefined> = {
+  "aspect-auto": undefined, // Remove aspect ratio
+  "aspect-square": 1, // 1:1
+  "aspect-video": 16 / 9, // 16:9
+};
+
+/**
+ * Parse arbitrary aspect ratio value: aspect-[4/3]
+ * @param value - Arbitrary value string (e.g., "[4/3]", "[16/9]")
+ * @returns Aspect ratio number or null
+ */
+function parseArbitraryAspectRatio(value: string): number | null {
+  const match = value.match(/^\[(\d+)\/(\d+)\]$/);
+  if (match) {
+    const numerator = Number.parseInt(match[1], 10);
+    const denominator = Number.parseInt(match[2], 10);
+
+    if (denominator === 0) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`[react-native-tailwind] Invalid aspect ratio: ${value}. Denominator cannot be zero.`);
+      }
+      return null;
+    }
+
+    return numerator / denominator;
+  }
+
+  return null;
+}
+
+/**
+ * Parse aspect ratio classes
+ * @param cls - Class name to parse
+ * @returns Style object or null if not an aspect ratio class
+ */
+export function parseAspectRatio(cls: string): StyleObject | null {
+  if (!cls.startsWith("aspect-")) {
+    return null;
+  }
+
+  // Check for preset values
+  if (cls in ASPECT_RATIO_PRESETS) {
+    const aspectRatio = ASPECT_RATIO_PRESETS[cls];
+    // aspect-auto removes the aspect ratio constraint by returning empty object
+    // (this effectively unsets the aspectRatio property)
+    if (aspectRatio === undefined) {
+      return {};
+    }
+    return { aspectRatio };
+  }
+
+  // Check for arbitrary values: aspect-[4/3]
+  const arbitraryValue = cls.substring(7); // Remove "aspect-"
+  const aspectRatio = parseArbitraryAspectRatio(arbitraryValue);
+  if (aspectRatio !== null) {
+    return { aspectRatio };
+  }
+
+  return null;
+}
+
+// Export presets for testing/advanced usage
+export { ASPECT_RATIO_PRESETS };

package/src/parser/borders.test.ts

@@ -0,0 +1,329 @@
+import { describe, expect, it } from "vitest";
+import { BORDER_RADIUS_SCALE, BORDER_WIDTH_SCALE, parseBorder } from "./borders";
+
+describe("BORDER_WIDTH_SCALE", () => {
+  it("should export complete border width scale", () => {
+    expect(BORDER_WIDTH_SCALE).toMatchSnapshot();
+  });
+});
+
+describe("BORDER_RADIUS_SCALE", () => {
+  it("should export complete border radius scale", () => {
+    expect(BORDER_RADIUS_SCALE).toMatchSnapshot();
+  });
+});
+
+describe("parseBorder - border width all sides", () => {
+  it("should parse border shorthand", () => {
+    expect(parseBorder("border")).toEqual({ borderWidth: 1 });
+  });
+
+  it("should parse border with preset values", () => {
+    expect(parseBorder("border-0")).toEqual({ borderWidth: 0 });
+    expect(parseBorder("border-2")).toEqual({ borderWidth: 2 });
+    expect(parseBorder("border-4")).toEqual({ borderWidth: 4 });
+    expect(parseBorder("border-8")).toEqual({ borderWidth: 8 });
+  });
+
+  it("should parse border with arbitrary pixel values", () => {
+    expect(parseBorder("border-[1px]")).toEqual({ borderWidth: 1 });
+    expect(parseBorder("border-[1]")).toEqual({ borderWidth: 1 });
+    expect(parseBorder("border-[3px]")).toEqual({ borderWidth: 3 });
+    expect(parseBorder("border-[10px]")).toEqual({ borderWidth: 10 });
+  });
+});
+
+describe("parseBorder - border width directional", () => {
+  it("should parse border top", () => {
+    expect(parseBorder("border-t")).toEqual({ borderTopWidth: 1 });
+    expect(parseBorder("border-t-0")).toEqual({ borderTopWidth: 0 });
+    expect(parseBorder("border-t-2")).toEqual({ borderTopWidth: 2 });
+    expect(parseBorder("border-t-4")).toEqual({ borderTopWidth: 4 });
+    expect(parseBorder("border-t-8")).toEqual({ borderTopWidth: 8 });
+  });
+
+  it("should parse border right", () => {
+    expect(parseBorder("border-r")).toEqual({ borderRightWidth: 1 });
+    expect(parseBorder("border-r-0")).toEqual({ borderRightWidth: 0 });
+    expect(parseBorder("border-r-2")).toEqual({ borderRightWidth: 2 });
+    expect(parseBorder("border-r-4")).toEqual({ borderRightWidth: 4 });
+  });
+
+  it("should parse border bottom", () => {
+    expect(parseBorder("border-b")).toEqual({ borderBottomWidth: 1 });
+    expect(parseBorder("border-b-0")).toEqual({ borderBottomWidth: 0 });
+    expect(parseBorder("border-b-2")).toEqual({ borderBottomWidth: 2 });
+    expect(parseBorder("border-b-4")).toEqual({ borderBottomWidth: 4 });
+  });
+
+  it("should parse border left", () => {
+    expect(parseBorder("border-l")).toEqual({ borderLeftWidth: 1 });
+    expect(parseBorder("border-l-0")).toEqual({ borderLeftWidth: 0 });
+    expect(parseBorder("border-l-2")).toEqual({ borderLeftWidth: 2 });
+    expect(parseBorder("border-l-4")).toEqual({ borderLeftWidth: 4 });
+  });
+
+  it("should parse directional borders with arbitrary values", () => {
+    expect(parseBorder("border-t-[3px]")).toEqual({ borderTopWidth: 3 });
+    expect(parseBorder("border-r-[5px]")).toEqual({ borderRightWidth: 5 });
+    expect(parseBorder("border-b-[7px]")).toEqual({ borderBottomWidth: 7 });
+    expect(parseBorder("border-l-[9px]")).toEqual({ borderLeftWidth: 9 });
+  });
+});
+
+describe("parseBorder - border style", () => {
+  it("should parse border styles", () => {
+    expect(parseBorder("border-solid")).toEqual({ borderStyle: "solid" });
+    expect(parseBorder("border-dotted")).toEqual({ borderStyle: "dotted" });
+    expect(parseBorder("border-dashed")).toEqual({ borderStyle: "dashed" });
+  });
+});
+
+describe("parseBorder - border radius all corners", () => {
+  it("should parse rounded shorthand", () => {
+    expect(parseBorder("rounded")).toEqual({ borderRadius: 4 });
+  });
+
+  it("should parse rounded with preset values", () => {
+    expect(parseBorder("rounded-none")).toEqual({ borderRadius: 0 });
+    expect(parseBorder("rounded-sm")).toEqual({ borderRadius: 2 });
+    expect(parseBorder("rounded-md")).toEqual({ borderRadius: 6 });
+    expect(parseBorder("rounded-lg")).toEqual({ borderRadius: 8 });
+    expect(parseBorder("rounded-xl")).toEqual({ borderRadius: 12 });
+    expect(parseBorder("rounded-2xl")).toEqual({ borderRadius: 16 });
+    expect(parseBorder("rounded-3xl")).toEqual({ borderRadius: 24 });
+    expect(parseBorder("rounded-full")).toEqual({ borderRadius: 9999 });
+  });
+
+  it("should parse rounded with arbitrary pixel values", () => {
+    expect(parseBorder("rounded-[5px]")).toEqual({ borderRadius: 5 });
+    expect(parseBorder("rounded-[10px]")).toEqual({ borderRadius: 10 });
+    expect(parseBorder("rounded-[15]")).toEqual({ borderRadius: 15 });
+  });
+});
+
+describe("parseBorder - border radius sides", () => {
+  it("should parse rounded top", () => {
+    expect(parseBorder("rounded-t")).toEqual({
+      borderTopLeftRadius: 4,
+      borderTopRightRadius: 4,
+    });
+    expect(parseBorder("rounded-t-lg")).toEqual({
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+    });
+    expect(parseBorder("rounded-t-[12px]")).toEqual({
+      borderTopLeftRadius: 12,
+      borderTopRightRadius: 12,
+    });
+  });
+
+  it("should parse rounded right", () => {
+    expect(parseBorder("rounded-r")).toEqual({
+      borderTopRightRadius: 4,
+      borderBottomRightRadius: 4,
+    });
+    expect(parseBorder("rounded-r-lg")).toEqual({
+      borderTopRightRadius: 8,
+      borderBottomRightRadius: 8,
+    });
+    expect(parseBorder("rounded-r-[12px]")).toEqual({
+      borderTopRightRadius: 12,
+      borderBottomRightRadius: 12,
+    });
+  });
+
+  it("should parse rounded bottom", () => {
+    expect(parseBorder("rounded-b")).toEqual({
+      borderBottomLeftRadius: 4,
+      borderBottomRightRadius: 4,
+    });
+    expect(parseBorder("rounded-b-lg")).toEqual({
+      borderBottomLeftRadius: 8,
+      borderBottomRightRadius: 8,
+    });
+    expect(parseBorder("rounded-b-[12px]")).toEqual({
+      borderBottomLeftRadius: 12,
+      borderBottomRightRadius: 12,
+    });
+  });
+
+  it("should parse rounded left", () => {
+    expect(parseBorder("rounded-l")).toEqual({
+      borderTopLeftRadius: 4,
+      borderBottomLeftRadius: 4,
+    });
+    expect(parseBorder("rounded-l-lg")).toEqual({
+      borderTopLeftRadius: 8,
+      borderBottomLeftRadius: 8,
+    });
+    expect(parseBorder("rounded-l-[12px]")).toEqual({
+      borderTopLeftRadius: 12,
+      borderBottomLeftRadius: 12,
+    });
+  });
+});
+
+describe("parseBorder - border radius specific corners", () => {
+  it("should parse rounded top-left", () => {
+    expect(parseBorder("rounded-tl")).toEqual({ borderTopLeftRadius: 4 });
+    expect(parseBorder("rounded-tl-lg")).toEqual({ borderTopLeftRadius: 8 });
+    expect(parseBorder("rounded-tl-[12px]")).toEqual({
+      borderTopLeftRadius: 12,
+    });
+  });
+
+  it("should parse rounded top-right", () => {
+    expect(parseBorder("rounded-tr")).toEqual({ borderTopRightRadius: 4 });
+    expect(parseBorder("rounded-tr-lg")).toEqual({ borderTopRightRadius: 8 });
+    expect(parseBorder("rounded-tr-[12px]")).toEqual({
+      borderTopRightRadius: 12,
+    });
+  });
+
+  it("should parse rounded bottom-left", () => {
+    expect(parseBorder("rounded-bl")).toEqual({ borderBottomLeftRadius: 4 });
+    expect(parseBorder("rounded-bl-lg")).toEqual({ borderBottomLeftRadius: 8 });
+    expect(parseBorder("rounded-bl-[12px]")).toEqual({
+      borderBottomLeftRadius: 12,
+    });
+  });
+
+  it("should parse rounded bottom-right", () => {
+    expect(parseBorder("rounded-br")).toEqual({ borderBottomRightRadius: 4 });
+    expect(parseBorder("rounded-br-lg")).toEqual({
+      borderBottomRightRadius: 8,
+    });
+    expect(parseBorder("rounded-br-[12px]")).toEqual({
+      borderBottomRightRadius: 12,
+    });
+  });
+});
+
+describe("parseBorder - edge cases", () => {
+  it("should return null for invalid classes", () => {
+    expect(parseBorder("invalid")).toBeNull();
+    expect(parseBorder("border-")).toBeNull();
+    expect(parseBorder("rounded-")).toBeNull();
+    expect(parseBorder("borders-4")).toBeNull();
+  });
+
+  it("should return null for invalid border width values", () => {
+    expect(parseBorder("border-invalid")).toBeNull();
+    expect(parseBorder("border-3")).toBeNull(); // Not in scale
+    expect(parseBorder("border-16")).toBeNull(); // Not in scale
+    expect(parseBorder("border-t-3")).toBeNull(); // Not in scale
+  });
+
+  it("should return null for invalid border radius values", () => {
+    expect(parseBorder("rounded-invalid")).toBeNull();
+    expect(parseBorder("rounded-4xl")).toBeNull(); // Not in scale
+    expect(parseBorder("rounded-t-invalid")).toBeNull();
+  });
+
+  it("should return null for arbitrary values with unsupported units", () => {
+    expect(parseBorder("border-[2rem]")).toBeNull();
+    expect(parseBorder("border-[1em]")).toBeNull();
+    expect(parseBorder("rounded-[2rem]")).toBeNull();
+    expect(parseBorder("rounded-[1em]")).toBeNull();
+  });
+
+  it("should return null for malformed arbitrary values", () => {
+    expect(parseBorder("border-[8")).toBeNull();
+    expect(parseBorder("border-8]")).toBeNull();
+    expect(parseBorder("border-[]")).toBeNull();
+    expect(parseBorder("rounded-[12")).toBeNull();
+    expect(parseBorder("rounded-12]")).toBeNull();
+  });
+
+  it("should handle edge case values", () => {
+    expect(parseBorder("border-0")).toEqual({ borderWidth: 0 });
+    expect(parseBorder("border-t-0")).toEqual({ borderTopWidth: 0 });
+    expect(parseBorder("rounded-none")).toEqual({ borderRadius: 0 });
+    expect(parseBorder("rounded-full")).toEqual({ borderRadius: 9999 });
+  });
+
+  it("should not match partial class names", () => {
+    expect(parseBorder("myborder-4")).toBeNull();
+    expect(parseBorder("border-solid-extra")).toBeNull();
+    expect(parseBorder("myrounded-lg")).toBeNull();
+  });
+});
+
+describe("parseBorder - comprehensive coverage", () => {
+  it("should handle all border width directions with same value", () => {
+    expect(parseBorder("border-2")).toEqual({ borderWidth: 2 });
+    expect(parseBorder("border-t-2")).toEqual({ borderTopWidth: 2 });
+    expect(parseBorder("border-r-2")).toEqual({ borderRightWidth: 2 });
+    expect(parseBorder("border-b-2")).toEqual({ borderBottomWidth: 2 });
+    expect(parseBorder("border-l-2")).toEqual({ borderLeftWidth: 2 });
+  });
+
+  it("should handle all border radius types with same value", () => {
+    // All corners
+    expect(parseBorder("rounded-lg")).toEqual({ borderRadius: 8 });
+
+    // Sides
+    expect(parseBorder("rounded-t-lg")).toEqual({
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+    });
+    expect(parseBorder("rounded-r-lg")).toEqual({
+      borderTopRightRadius: 8,
+      borderBottomRightRadius: 8,
+    });
+    expect(parseBorder("rounded-b-lg")).toEqual({
+      borderBottomLeftRadius: 8,
+      borderBottomRightRadius: 8,
+    });
+    expect(parseBorder("rounded-l-lg")).toEqual({
+      borderTopLeftRadius: 8,
+      borderBottomLeftRadius: 8,
+    });
+
+    // Specific corners
+    expect(parseBorder("rounded-tl-lg")).toEqual({ borderTopLeftRadius: 8 });
+    expect(parseBorder("rounded-tr-lg")).toEqual({ borderTopRightRadius: 8 });
+    expect(parseBorder("rounded-bl-lg")).toEqual({ borderBottomLeftRadius: 8 });
+    expect(parseBorder("rounded-br-lg")).toEqual({
+      borderBottomRightRadius: 8,
+    });
+  });
+
+  it("should handle arbitrary values across all border width types", () => {
+    expect(parseBorder("border-[5px]")).toEqual({ borderWidth: 5 });
+    expect(parseBorder("border-t-[5px]")).toEqual({ borderTopWidth: 5 });
+    expect(parseBorder("border-r-[5px]")).toEqual({ borderRightWidth: 5 });
+    expect(parseBorder("border-b-[5px]")).toEqual({ borderBottomWidth: 5 });
+    expect(parseBorder("border-l-[5px]")).toEqual({ borderLeftWidth: 5 });
+  });
+
+  it("should handle arbitrary values across all border radius types", () => {
+    expect(parseBorder("rounded-[10px]")).toEqual({ borderRadius: 10 });
+
+    expect(parseBorder("rounded-t-[10px]")).toEqual({
+      borderTopLeftRadius: 10,
+      borderTopRightRadius: 10,
+    });
+
+    expect(parseBorder("rounded-tl-[10px]")).toEqual({
+      borderTopLeftRadius: 10,
+    });
+  });
+
+  it("should handle all border styles", () => {
+    expect(parseBorder("border-solid")).toEqual({ borderStyle: "solid" });
+    expect(parseBorder("border-dotted")).toEqual({ borderStyle: "dotted" });
+    expect(parseBorder("border-dashed")).toEqual({ borderStyle: "dashed" });
+  });
+
+  it("should handle shorthand classes correctly", () => {
+    expect(parseBorder("border")).toEqual({ borderWidth: 1 });
+    expect(parseBorder("rounded")).toEqual({ borderRadius: 4 });
+    expect(parseBorder("border-t")).toEqual({ borderTopWidth: 1 });
+    expect(parseBorder("rounded-t")).toEqual({
+      borderTopLeftRadius: 4,
+      borderTopRightRadius: 4,
+    });
+  });
+});