@loke/design-system
Version:
A design system with individually importable components
2 lines (1 loc) • 1.6 kB
JavaScript
import{cn}from"@loke/design-system/cn";import{createResponsiveComponent}from"@loke/design-system/responsive";import{cva}from"class-variance-authority";import{jsx}from"react/jsx-runtime";var columnsVariants=cva("grid w-full",{defaultVariants:{columns:2,gap:1},variants:{columns:{1:"grid-cols-1",2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",5:"grid-cols-5",6:"grid-cols-6",7:"grid-cols-7",8:"grid-cols-8",9:"grid-cols-9",10:"grid-cols-10",11:"grid-cols-11",12:"grid-cols-12","auto-fill":"grid-cols-auto-fill"},gap:{"0":"gap-0","1":"gap-1","2":"gap-2","3":"gap-3","4":"gap-4","5":"gap-5","6":"gap-6","7":"gap-7","8":"gap-8","9":"gap-9","10":"gap-10","12":"gap-12","16":"gap-16","20":"gap-20","24":"gap-24","28":"gap-28","32":"gap-32",large:"gap-8",medium:"gap-5",none:"gap-0",small:"gap-3",xlarge:"gap-12",xsmall:"gap-2",xxlarge:"gap-24",xxsmall:"gap-1"}}}),{createResponsive:createResponsiveColumns}=createResponsiveComponent(columnsVariants),Columns=({children,columns,gap,className})=>{return jsx("div",{className:cn(createResponsiveColumns({columns,gap}),className),children})},columnVariants=cva("",{defaultVariants:{colSpan:1},variants:{colSpan:{1:"col-span-1",2:"col-span-2",3:"col-span-3",4:"col-span-4",5:"col-span-5",6:"col-span-6",7:"col-span-7",8:"col-span-8",9:"col-span-9",10:"col-span-10",11:"col-span-11",12:"col-span-12"}}}),{createResponsive:createResponsiveColumn}=createResponsiveComponent(columnVariants),Column=({children,colSpan,className})=>jsx("div",{className:cn(createResponsiveColumn({colSpan}),className),children});export{columnsVariants,columnVariants,Columns,Column};