infinity-ui-elements 1.0.8 → 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", {
@@ -3526,6 +3549,175 @@ const Button = React__namespace.forwardRef(({ className, variant = "primary", co
 });
 Button.displayName = "Button";
 
+const textVariants = cva("", {
+    variants: {
+        variant: {
+            display: "font-functional font-medium",
+            heading: "font-display",
+            body: "font-display",
+            caption: "font-display font-semibold",
+        },
+        size: {
+            "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",
+            medium: "font-medium",
+            semibold: "font-semibold",
+        },
+        color: {
+            default: "text-surface-ink-neutral-normal",
+            subtle: "text-surface-ink-neutral-subtle",
+            muted: "text-surface-ink-neutral-muted",
+            disabled: "text-surface-ink-neutral-disabled",
+            primary: "text-surface-ink-primary-normal",
+        },
+        as: {
+            h1: "",
+            h2: "",
+            h3: "",
+            h4: "",
+            h5: "",
+            h6: "",
+            p: "",
+            span: "",
+            div: "",
+        },
+    },
+    compoundVariants: [
+        // Display variants use Clash Grotesk with medium weight
+        {
+            variant: "display",
+            weight: "regular",
+            class: "font-medium",
+        },
+        {
+            variant: "display",
+            weight: "medium",
+            class: "font-medium",
+        },
+        {
+            variant: "display",
+            weight: "semibold",
+            class: "font-medium",
+        },
+        // Caption is always semibold
+        {
+            variant: "caption",
+            weight: "regular",
+            class: "font-semibold",
+        },
+        {
+            variant: "caption",
+            weight: "medium",
+            class: "font-semibold",
+        },
+        {
+            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",
+        size: "medium",
+        weight: "regular",
+        color: "default",
+        as: "p",
+    },
+});
+const Text = React__namespace.forwardRef(({ className, variant, size, weight, color, as, children, ...props }, ref) => {
+    const Component = as || "p";
+    return React__namespace.createElement(Component, {
+        className: cn(textVariants({ variant, size, weight, color, as, className })),
+        ref,
+        ...props,
+    }, children);
+});
+Text.displayName = "Text";
+
 exports.Button = Button;
+exports.Text = Text;
 exports.buttonVariants = buttonVariants;
+exports.textVariants = textVariants;
 //# sourceMappingURL=index.js.map