infinity-ui-elements 1.0.7 → 1.1.0

package/dist/index.esm.js

@@ -3505,5 +3505,136 @@ const Button = React.forwardRef(({ className, variant = "primary", color = "prim
 });
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+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",
+        },
+        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",
+        },
+        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-xlarge",
+                "display-large",
+                "display-medium",
+                "display-small",
+                "heading-2xlarge",
+                "heading-xlarge",
+            ],
+            weight: "regular",
+            class: "font-medium",
+        },
+        {
+            variant: [
+                "display-xlarge",
+                "display-large",
+                "display-medium",
+                "display-small",
+                "heading-2xlarge",
+                "heading-xlarge",
+            ],
+            weight: "medium",
+            class: "font-medium",
+        },
+        {
+            variant: [
+                "display-xlarge",
+                "display-large",
+                "display-medium",
+                "display-small",
+                "heading-2xlarge",
+                "heading-xlarge",
+            ],
+            weight: "semibold",
+            class: "font-medium",
+        },
+        // Caption medium is always semibold
+        {
+            variant: "caption-medium",
+            weight: "regular",
+            class: "font-semibold",
+        },
+        {
+            variant: "caption-medium",
+            weight: "medium",
+            class: "font-semibold",
+        },
+        {
+            variant: "caption-medium",
+            weight: "semibold",
+            class: "font-semibold",
+        },
+    ],
+    defaultVariants: {
+        variant: "body-medium",
+        size: "body-medium",
+        weight: "regular",
+        color: "default",
+        as: "p",
+    },
+});
+const Text = React.forwardRef(({ className, variant, size, weight, color, as, children, ...props }, ref) => {
+    const Component = as || "p";
+    return React.createElement(Component, {
+        className: cn(textVariants({ variant, size, weight, color, as, className })),
+        ref,
+        ...props,
+    }, children);
+});
+Text.displayName = "Text";
+
+export { Button, Text, buttonVariants, textVariants };
 //# sourceMappingURL=index.esm.js.map