92 lines
1.7 KiB
TypeScript
92 lines
1.7 KiB
TypeScript
import { tv } from "tailwind-variants";
|
|
|
|
export const inlineSizeRecipe = tv({
|
|
base: "relative overflow-hidden flex flex-nowrap justify-center items-center box-border",
|
|
variants: {
|
|
size: {
|
|
xs: "text-xs h-inline-xs",
|
|
sm: "text-sm h-inline-sm",
|
|
md: "text-md h-inline-md",
|
|
lg: "text-lg h-inline-lg",
|
|
xl: "text-xl h-inline-xl",
|
|
"2xl": "text-2xl h-inline-2xl",
|
|
},
|
|
shape: {
|
|
square: "rounded-none",
|
|
rounded: "",
|
|
circle: "rounded-full",
|
|
},
|
|
iconOnly: {
|
|
true: "",
|
|
false: "",
|
|
},
|
|
disabled: {
|
|
true: "",
|
|
false: "",
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
shape: "rounded",
|
|
size: "xs",
|
|
class: "rounded-xs",
|
|
},
|
|
{
|
|
shape: "rounded",
|
|
size: "sm",
|
|
class: "rounded-sm",
|
|
},
|
|
{
|
|
shape: "rounded",
|
|
size: "md",
|
|
class: "rounded-md",
|
|
},
|
|
{
|
|
shape: "rounded",
|
|
size: "lg",
|
|
class: "rounded-lg",
|
|
},
|
|
{
|
|
shape: "rounded",
|
|
size: "xl",
|
|
class: "rounded-xl",
|
|
},
|
|
{
|
|
shape: "rounded",
|
|
size: "2xl",
|
|
class: "rounded-2xl",
|
|
},
|
|
// --------------------------------------------------
|
|
{
|
|
iconOnly: true,
|
|
size: "xs",
|
|
class: "w-inline-xs",
|
|
},
|
|
{
|
|
iconOnly: true,
|
|
size: "sm",
|
|
class: "w-inline-sm",
|
|
},
|
|
{
|
|
iconOnly: true,
|
|
size: "md",
|
|
class: "w-inline-md",
|
|
},
|
|
{
|
|
iconOnly: true,
|
|
size: "lg",
|
|
class: "w-inline-lg",
|
|
},
|
|
{
|
|
iconOnly: true,
|
|
size: "xl",
|
|
class: "w-inline-xl",
|
|
},
|
|
{
|
|
iconOnly: true,
|
|
size: "2xl",
|
|
class: "w-inline-2xl",
|
|
},
|
|
],
|
|
});
|