@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
366 lines (365 loc) • 9.76 kB
JavaScript
import { c as r } from "../../index-BNmRGtA6.js";
const o = r(
[
"border",
"cursor-pointer",
"disabled:pointer-events-none",
"flex",
"focus-visible:outline-none",
"focus-visible:ring-1",
"focus-visible:ring-ring",
"font-semibold",
"gap-[7px]",
"inline-flex",
"items-center",
"justify-center",
"rounded",
"transition-colors",
"whitespace-nowrap",
"h-10",
"px-4",
"py-2",
"text-sm",
"border-kubefirst-primary",
"bg-kubefirst-primary",
"hover:bg-kubefirst-secondary",
"hover:border-kubefirst-secondary",
"colony:bg-colony-primary",
"colony:border-colony-primary",
"colony:hover:bg-colony-secondary",
"colony:hover:border-colony-secondary",
"civo:bg-civo-primary",
"civo:border-civo-primary",
"civo:hover:bg-civo-secondary",
"civo:hover:border-civo-secondary"
],
{
variants: {
variant: {
primary: ["text-white"],
secondary: ["bg-white"],
danger: [
"border-red-700",
"bg-red-700",
"text-white",
"hover:bg-red-800",
"hover:border-red-800",
"colony:border-red-700",
"colony:bg-red-700",
"colony:text-white",
"colony:hover:bg-red-800",
"colony:hover:border-red-800",
"civo:border-red-700",
"civo:bg-red-700",
"civo:text-white",
"civo:hover:bg-red-800",
"civo:hover:border-red-800"
],
text: ["bg-transparent", "border-transparent", "text-slate-500"]
},
shape: {
circle: ["rounded-full", "p-1"]
},
version: {
default: "",
alternate: ""
},
disabled: {
true: ["text-zinc-500", "border-zinc-200", "bg-zinc-200"],
false: ""
},
size: {
medium: "",
large: ""
},
appearance: {
compact: [
"px-2",
"py-1",
"h-auto",
"text-[0.8125rem]",
"leading-[1.375rem]",
"h-[30px]"
]
}
},
compoundVariants: [
{
variant: "secondary",
disabled: !1,
class: [
"text-kubefirst-primary",
"border-kubefirst-primary",
"hover:text-kubefirst-secondary",
"hover:border-kubefirst-secondary",
"hover:bg-purple-50",
"colony:text-colony-primary",
"colony:bg-white",
"colony:border-colony-primary",
"colony:hover:text-colony-secondary",
"colony:hover:border-colony-secondary",
"colony:hover:bg-pink-50",
"civo:bg-white",
"civo:hover:bg-white",
"civo:text-slate-700",
"civo:border-slate-300",
"civo:hover:text-slate-700",
"civo:hover:border-slate-300",
"civo:hover:bg-slate-50"
]
},
{
variant: "primary",
disabled: !0,
class: [
"bg-zinc-200",
"border-zinc-200",
"text-zinc-500",
"colony:bg-zinc-200",
"colony:border-zinc-200",
"colony:text-zinc-500",
"civo:bg-civo-primary/45",
"civo:border-civo-primary/5",
"civo:text-white"
]
},
{
variant: "secondary",
disabled: !0,
class: [
"bg-white",
"border-zinc-500",
"text-zinc-500",
"civo:border-slate-300/45",
"civo:bg-white",
"civo:text-slate-700/45"
]
},
{
variant: "danger",
version: "alternate",
class: [
"border-red-700",
"text-red-700",
"bg-white",
"hover:bg-red-50",
"colony:border-red-700",
"colony:text-red-700",
"colony:bg-white",
"colony:hover:bg-red-50",
"civo:border-red-700",
"civo:text-red-700",
"civo:bg-white",
"civo:hover:bg-red-50"
]
},
{
variant: "danger",
disabled: !0,
class: [
"civo:text-white",
"civo:bg-red-700/45",
"civo:border-transparent"
]
},
{
variant: "text",
disabled: !1,
version: "default",
class: [
"hover:border-transparent",
"hover:text-kubefirst-primary",
"hover:bg-purple-50",
"colony:bg-white",
"colony:border-transparent",
"colony:hover:border-transparent",
"colony:hover:text-colony-primary",
"colony:hover:bg-pink-50",
"civo:bg-white",
"civo:border-transparent",
"civo:hover:border-transparent",
"civo:hover:text-civo-primary",
"civo:hover:bg-transparent"
]
},
{
variant: "text",
disabled: !1,
version: "alternate",
class: [
"hover:border-transparent",
"text-kubefirst-primary",
"hover:text-kubefirst-primary",
"hover:bg-purple-50",
"colony:bg-white",
"colony:border-transparent",
"colony:hover:border-transparent",
"colony:text-colony-primary",
"colony:hover:text-colony-primary",
"colony:hover:bg-pink-50",
"civo:bg-white",
"civo:border-transparent",
"civo:hover:border-transparent",
"civo:text-civo-primary",
"civo:hover:text-civo-primary",
"civo:hover:bg-blue-50"
]
},
{
variant: "text",
disabled: !0,
version: ["default", "alternate"],
class: [
"bg-white",
"border-white",
"text-zinc-400",
"colony:bg-white",
"colony:border-white",
"colony:text-zinc-400",
"civo:bg-white",
"civo:border-white",
"civo:text-civo-primary/45"
]
},
{
shape: "circle",
size: "medium",
disabled: !1,
class: [
"text-slate-400",
"bg-transparent",
"border-transparent",
"hover:border-transparent",
"hover:bg-kubefirst-primary/5",
"hover:text-kubefirst-primary",
"w-8",
"h-8",
"colony:text-slate-400",
"colony:bg-transparent",
"colony:border-transparent",
"colony:hover:border-transparent",
"colony:hover:bg-colony-primary/5",
"colony:hover:text-colony-primary",
"colony:[&>svg]:w-5",
"colony:[&>svg]:h-5",
"civo:text-slate-400",
"civo:bg-transparent",
"civo:border-transparent",
"civo:hover:border-transparent",
"civo:hover:bg-civo-primary/5",
"civo:hover:text-civo-primary",
"civo:[&>svg]:w-5",
"civo:[&>svg]:h-5"
]
},
{
shape: "circle",
size: "large",
disabled: !1,
class: [
"text-slate-400",
"bg-transparent",
"border-transparent",
"hover:border-transparent",
"hover:bg-kubefirst-primary/5",
"hover:text-kubefirst-primary",
"w-11",
"h-11",
"[&>svg]:w-6",
"[&>svg]:h-6",
"colony:text-slate-400",
"colony:bg-transparent",
"colony:border-transparent",
"colony:hover:border-transparent",
"colony:hover:bg-colony-primary/5",
"colony:hover:text-colony-primary",
"colony:w-11",
"colony:h-11",
"colony:[&>svg]:w-6",
"colony:[&>svg]:h-6",
"civo:text-slate-400",
"civo:bg-transparent",
"civo:border-transparent",
"civo:hover:border-transparent",
"civo:hover:bg-civo-primary/5",
"civo:hover:text-civo-primary",
"civo:w-11",
"civo:h-11",
"civo:[&>svg]:w-6",
"civo:[&>svg]:h-6"
]
},
{
variant: "danger",
shape: "circle",
size: "large",
disabled: !1,
class: [
"text-red-700",
"hover:text-red-700",
"hover:bg-red-50",
"colony:text-red-700",
"colony:hover:text-red-700",
"colony:hover:bg-red-50",
"civo:text-red-700",
"civo:hover:text-red-700",
"civo:hover:bg-red-50"
]
},
{
variant: "danger",
shape: "circle",
size: "medium",
disabled: !1,
class: [
"text-red-700",
"hover:text-red-700",
"hover:bg-red-50",
"colony:text-red-700",
"colony:hover:text-red-700",
"colony:hover:bg-red-50",
"civo:text-red-700",
"civo:hover:text-red-700",
"civo:hover:bg-red-50"
]
},
{
shape: "circle",
size: "medium",
disabled: !0,
class: [
"text-slate-300",
"bg-transparent",
"border-transparent",
"w-8",
"h-8",
"[&>svg]:w-5",
"[&>svg]:h-5",
"colony:text-slate-300",
"colony:bg-transparent",
"colony:border-transparent",
"colony:w-8",
"colony:h-8",
"colony:[&>svg]:w-5",
"colony:[&>svg]:h-5",
"civo:text-slate-300",
"civo:bg-transparent",
"civo:border-transparent",
"civo:w-8",
"civo:h-8",
"civo:[&>svg]:w-5",
"civo:[&>svg]:h-5"
]
}
],
defaultVariants: {
variant: "primary",
version: "default",
disabled: !1,
size: "medium"
}
}
);
export {
o as buttonVariants
};