@loke/design-system
Version:
A design system with individually importable components
2 lines (1 loc) • 1.74 kB
JavaScript
import{cn}from"@loke/design-system/cn";import{createResponsiveComponent}from"@loke/design-system/responsive";import{cva}from"class-variance-authority";import{forwardRef}from"react";import{jsx}from"react/jsx-runtime";var headingVariants=cva("scroll-m-20 tracking-tight",{variants:{color:{accent:"text-accent-foreground",card:"text-card-foreground",destructive:"text-destructive-foreground",foreground:"text-foreground","n-50":"text-zinc-50","n-100":"text-zinc-100","n-200":"text-zinc-200","n-300":"text-zinc-300","n-400":"text-zinc-400","n-500":"text-zinc-500","n-600":"text-zinc-600","n-700":"text-zinc-700","n-800":"text-zinc-800","n-900":"text-zinc-900","n-950":"text-zinc-950",popover:"text-popover-foreground",primary:"text-primary-foreground",secondary:"text-secondary-foreground"},variant:{display:"text-5xl font-extrabold text-foreground leading-tight",h1:"text-4xl font-extrabold text-foreground leading-tight",h2:"text-3xl font-bold text-foreground leading-tight",h3:"text-2xl font-semibold text-foreground",h4:"text-xl font-semibold text-foreground",h5:"text-lg font-medium text-foreground",h6:"text-base font-medium text-foreground",section:"text-xl font-semibold text-primary",subtitle:"text-2xl font-medium text-foreground/80",title:"text-4xl font-bold text-foreground"}}}),{createResponsive}=createResponsiveComponent(headingVariants),HEADING_LEVEL_REGEX=/^h[1-6]$/,Heading=forwardRef(({className,as,variant,color,...props},ref)=>{let finalVariant=variant||as,Comp=as||(finalVariant&&HEADING_LEVEL_REGEX.test(finalVariant)?finalVariant:"h2"),classes=createResponsive({color,variant:finalVariant});return jsx(Comp,{className:cn(classes,className),ref,...props})});Heading.displayName="Heading";export{headingVariants,Heading};