90 lines
1.9 KiB
TypeScript
90 lines
1.9 KiB
TypeScript
import { cvr } from "../utils/cvr";
|
|
|
|
export const itemSizeRecipe = cvr({
|
|
base: "relative select-none flex flex-nowrap justify-center items-center",
|
|
variants: {
|
|
size: {
|
|
xs: "text-xs h-item-xs gap-xs px-xs",
|
|
sm: "text-sm h-item-sm gap-sm px-sm",
|
|
md: "text-md h-item-md gap-md px-md",
|
|
lg: "text-lg h-item-lg gap-lg px-lg",
|
|
xl: "text-xl h-item-xl gap-xl px-xl",
|
|
"2xl": "text-2xl h-item-2xl gap-2xl px-2xl",
|
|
},
|
|
shape: {
|
|
square: "rounded-none",
|
|
rounded: "",
|
|
circle: "rounded-full",
|
|
},
|
|
iconOnly: {
|
|
true: "px-none",
|
|
false: "",
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{ iconOnly: false, size: "xs", class: "px-xs" },
|
|
{ iconOnly: false, size: "sm", class: "px-sm" },
|
|
{ iconOnly: false, size: "md", class: "px-md" },
|
|
{ iconOnly: false, size: "lg", class: "px-lg" },
|
|
{ iconOnly: false, size: "xl", class: "px-xl" },
|
|
{ iconOnly: false, size: "2xl", class: "px-2xl" },
|
|
{ shape: "rounded", size: "xs", class: "rounded-sm" },
|
|
{
|
|
shape: "rounded",
|
|
size: "sm",
|
|
class: "rounded-md",
|
|
},
|
|
{
|
|
shape: "rounded",
|
|
size: "md",
|
|
class: "rounded-lg",
|
|
},
|
|
{
|
|
shape: "rounded",
|
|
size: "lg",
|
|
class: "rounded-xl",
|
|
},
|
|
{
|
|
shape: "rounded",
|
|
size: "xl",
|
|
class: "rounded-2xl",
|
|
},
|
|
{
|
|
shape: "rounded",
|
|
size: "2xl",
|
|
class: "rounded-3xl",
|
|
},
|
|
// --------------------------------------------------
|
|
{
|
|
iconOnly: true,
|
|
size: "xs",
|
|
class: "w-item-xs",
|
|
},
|
|
{
|
|
iconOnly: true,
|
|
size: "sm",
|
|
class: "w-item-sm",
|
|
},
|
|
{
|
|
iconOnly: true,
|
|
size: "md",
|
|
class: "w-item-md",
|
|
},
|
|
{
|
|
iconOnly: true,
|
|
size: "lg",
|
|
class: "w-item-lg",
|
|
},
|
|
{
|
|
iconOnly: true,
|
|
size: "xl",
|
|
class: "w-item-xl",
|
|
},
|
|
{
|
|
iconOnly: true,
|
|
size: "2xl",
|
|
class: "w-item-2xl",
|
|
},
|
|
],
|
|
});
|