infinity-ui-elements 1.1.0 → 1.1.1

package/dist/index.js

@@ -3297,8 +3297,31 @@ const getDefaultConfig = () => {
 };
 const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 
+// Define patterns for custom classes that should be preserved
+// This approach is more scalable than hardcoding individual class names
+const CUSTOM_CLASS_PATTERNS = [
+    // Custom font classes
+    /^font-(functional|display)$/,
+    // Custom spacing classes (example)
+    // /^spacing-(xs|sm|md|lg|xl)$/,
+    // Custom color classes (example)
+    // /^color-(primary|secondary|accent)$/,
+    // Any class that starts with 'custom-'
+    /^custom-/,
+];
+function isCustomClass(className) {
+    return CUSTOM_CLASS_PATTERNS.some((pattern) => pattern.test(className));
+}
 function cn(...inputs) {
-    return twMerge(clsx(inputs));
+    // Use clsx first to combine classes, then use twMerge for standard Tailwind classes
+    const combined = clsx(inputs);
+    // Split classes and filter out our custom classes before merging
+    const classes = combined.split(" ");
+    const customClasses = classes.filter((cls) => isCustomClass(cls));
+    const standardClasses = classes.filter((cls) => !isCustomClass(cls));
+    // Merge standard classes and add back custom classes
+    const mergedStandard = twMerge(standardClasses.join(" "));
+    return clsx(mergedStandard, customClasses);
 }
 
 const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none", {
@@ -3529,36 +3552,18 @@ Button.displayName = "Button";
 const textVariants = cva("", {
     variants: {
         variant: {
-            "display-xlarge": "font-functional font-medium",
-            "display-large": "font-functional font-medium",
-            "display-medium": "font-functional font-medium",
-            "display-small": "font-functional font-medium",
-            "heading-2xlarge": "font-functional font-medium",
-            "heading-xlarge": "font-functional font-medium",
-            "heading-large": "font-display",
-            "heading-medium": "font-display",
-            "heading-small": "font-display",
-            "body-large": "font-display",
-            "body-medium": "font-display",
-            "body-small": "font-display",
-            "body-xsmall": "font-display",
-            "caption-medium": "font-display font-semibold",
+            display: "font-functional font-medium",
+            heading: "font-display",
+            body: "font-display",
+            caption: "font-display font-semibold",
         },
         size: {
-            "display-xlarge": "font-size-1100 leading-1100 tracking-[0%] mb-0",
-            "display-large": "font-size-1000 leading-1000 tracking-[0%] mb-0",
-            "display-medium": "font-size-900 leading-900 tracking-[0%] mb-0",
-            "display-small": "font-size-800 leading-800 tracking-[0%] mb-0",
-            "heading-2xlarge": "font-size-700 leading-700 tracking-[0%] mb-0",
-            "heading-xlarge": "font-size-600 leading-600 tracking-[0%] mb-0",
-            "heading-large": "font-size-500 leading-500 tracking-[0%] mb-0",
-            "heading-medium": "font-size-400 leading-400 tracking-[0%] mb-0",
-            "heading-small": "font-size-300 leading-300 tracking-[0%] mb-0",
-            "body-large": "font-size-200 leading-200 tracking-[0%] mb-[var(--paragraph-spacing-400)]",
-            "body-medium": "font-size-100 leading-100 tracking-[0%] mb-[var(--paragraph-spacing-300)]",
-            "body-small": "font-size-75 leading-75 tracking-[0%] mb-[var(--paragraph-spacing-200)]",
-            "body-xsmall": "font-size-25 leading-25 tracking-[0%] mb-[var(--paragraph-spacing-100)]",
-            "caption-medium": "text-50 leading-50 tracking-[0%] mb-0",
+            "2xlarge": "font-size-700 leading-700 tracking-[0%] mb-0",
+            xlarge: "font-size-1100 leading-1100 tracking-[0%] mb-0",
+            large: "font-size-1000 leading-1000 tracking-[0%] mb-0",
+            medium: "font-size-900 leading-900 tracking-[0%] mb-0",
+            small: "font-size-800 leading-800 tracking-[0%] mb-0",
+            xsmall: "font-size-25 leading-25 tracking-[0%] mb-[var(--paragraph-spacing-100)]",
         },
         weight: {
             regular: "font-normal",
@@ -3587,61 +3592,115 @@ const textVariants = cva("", {
     compoundVariants: [
         // Display variants use Clash Grotesk with medium weight
         {
-            variant: [
-                "display-xlarge",
-                "display-large",
-                "display-medium",
-                "display-small",
-                "heading-2xlarge",
-                "heading-xlarge",
-            ],
+            variant: "display",
             weight: "regular",
             class: "font-medium",
         },
         {
-            variant: [
-                "display-xlarge",
-                "display-large",
-                "display-medium",
-                "display-small",
-                "heading-2xlarge",
-                "heading-xlarge",
-            ],
+            variant: "display",
             weight: "medium",
             class: "font-medium",
         },
         {
-            variant: [
-                "display-xlarge",
-                "display-large",
-                "display-medium",
-                "display-small",
-                "heading-2xlarge",
-                "heading-xlarge",
-            ],
+            variant: "display",
             weight: "semibold",
             class: "font-medium",
         },
-        // Caption medium is always semibold
+        // Caption is always semibold
         {
-            variant: "caption-medium",
+            variant: "caption",
             weight: "regular",
             class: "font-semibold",
         },
         {
-            variant: "caption-medium",
+            variant: "caption",
             weight: "medium",
             class: "font-semibold",
         },
         {
-            variant: "caption-medium",
+            variant: "caption",
             weight: "semibold",
             class: "font-semibold",
         },
+        // Size-specific styling based on variant
+        // Display sizes
+        {
+            variant: "display",
+            size: "xlarge",
+            class: "font-size-1100 leading-1100 tracking-[0%] mb-0",
+        },
+        {
+            variant: "display",
+            size: "large",
+            class: "font-size-1000 leading-1000 tracking-[0%] mb-0",
+        },
+        {
+            variant: "display",
+            size: "medium",
+            class: "font-size-900 leading-900 tracking-[0%] mb-0",
+        },
+        {
+            variant: "display",
+            size: "small",
+            class: "font-size-800 leading-800 tracking-[0%] mb-0",
+        },
+        // Heading sizes
+        {
+            variant: "heading",
+            size: "2xlarge",
+            class: "font-size-700 leading-700 tracking-[0%] mb-0",
+        },
+        {
+            variant: "heading",
+            size: "xlarge",
+            class: "font-size-600 leading-600 tracking-[0%] mb-0",
+        },
+        {
+            variant: "heading",
+            size: "large",
+            class: "font-size-500 leading-500 tracking-[0%] mb-0",
+        },
+        {
+            variant: "heading",
+            size: "medium",
+            class: "font-size-400 leading-400 tracking-[0%] mb-0",
+        },
+        {
+            variant: "heading",
+            size: "small",
+            class: "font-size-300 leading-300 tracking-[0%] mb-0",
+        },
+        // Body sizes
+        {
+            variant: "body",
+            size: "large",
+            class: "font-size-200 leading-200 tracking-[0%] mb-[var(--paragraph-spacing-400)]",
+        },
+        {
+            variant: "body",
+            size: "medium",
+            class: "font-size-100 leading-100 tracking-[0%] mb-[var(--paragraph-spacing-300)]",
+        },
+        {
+            variant: "body",
+            size: "small",
+            class: "font-size-75 leading-75 tracking-[0%] mb-[var(--paragraph-spacing-200)]",
+        },
+        {
+            variant: "body",
+            size: "xsmall",
+            class: "font-size-25 leading-25 tracking-[0%] mb-[var(--paragraph-spacing-100)]",
+        },
+        // Caption sizes
+        {
+            variant: "caption",
+            size: "medium",
+            class: "text-50 leading-50 tracking-[0%] mb-0",
+        },
     ],
     defaultVariants: {
-        variant: "body-medium",
-        size: "body-medium",
+        variant: "body",
+        size: "medium",
         weight: "regular",
         color: "default",
         as: "p",