@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
336 lines (335 loc) • 7.67 kB
JavaScript
import { c as e } from "../../index-BNmRGtA6.js";
const a = e(
[
"border",
"cursor-pointer",
"disabled:pointer-events-none",
"flex",
"focus-visible:outline-none",
"focus-visible:ring-1",
"focus-visible:ring-ring",
"font-semibold",
"gap-2",
"inline-flex",
"items-center",
"justify-center",
"rounded",
"transition-colors",
"whitespace-nowrap",
"h-10",
"p-4",
"text-sm"
],
{
variants: {
variant: {
primary: ["text-white"],
secondary: ["bg-white"],
danger: [
"border-red-600",
"bg-red-600",
"text-white",
"hover:bg-red-700",
"hover:border-red-700"
],
text: ["bg-transparent", "border-transparent", "text-slate-500"],
circle: ["rounded-full", "p-1"]
},
version: {
default: "",
alternate: ""
},
theme: {
civo: "",
colony: "",
kubefirst: ""
},
disabled: {
true: ["text-zinc-500", "border-zinc-200", "bg-zinc-200"],
false: ""
},
size: {
medium: "",
large: ""
}
},
compoundVariants: [
{
variant: "primary",
theme: "kubefirst",
disabled: !1,
class: [
"border-kubefirst-primary",
"bg-kubefirst-primary",
"hover:bg-kubefirst-secondary",
"hover:border-kubefirst-secondary"
]
},
{
variant: "primary",
theme: "colony",
disabled: !1,
class: [
"bg-colony-primary",
"border-colony-primary",
"hover:bg-colony-secondary",
"hover:border-colony-secondary"
]
},
{
variant: "primary",
theme: "civo",
disabled: !1,
class: [
"bg-civo-primary",
"border-civo-primary",
"hover:bg-civo-secondary",
"hover:border-civo-secondary"
]
},
{
variant: "secondary",
theme: "kubefirst",
disabled: !1,
class: [
"text-kubefirst-primary",
"border-kubefirst-primary",
"hover:text-kubefirst-secondary",
"hover:border-kubefirst-secondary",
"hover:bg-purple-50"
]
},
{
variant: "secondary",
theme: "colony",
disabled: !1,
class: [
"text-colony-primary",
"border-colony-primary",
"hover:text-colony-secondary",
"hover:border-colony-secondary",
"hover:bg-pink-50"
]
},
{
variant: "secondary",
theme: "civo",
disabled: !1,
class: [
"text-[#324154]",
"border-[#cbd5e0]",
"hover:text-[#5d6776]",
"hover:border-[#d6dde6]"
]
},
{
variant: "primary",
disabled: !0,
class: ["bg-zinc-200", "border-zinc-200", "text-zinc-500"]
},
{
variant: "secondary",
disabled: !0,
class: ["bg-white", "border-zinc-500", "text-zinc-500"]
},
{
variant: "text",
theme: "kubefirst",
disabled: !1,
version: "default",
class: ["hover:text-kubefirst-primary", "hover:bg-purple-50"]
},
{
variant: "text",
theme: "colony",
disabled: !1,
version: "default",
class: ["hover:text-colony-primary", "hover:bg-pink-50"]
},
{
variant: "text",
theme: "civo",
disabled: !1,
version: "default",
class: ["hover:text-civo-primary", "hover:bg-blue-50"]
},
{
variant: "text",
theme: "kubefirst",
disabled: !1,
version: "alternate",
class: [
"text-kubefirst-primary",
"hover:text-kubefirst-primary",
"hover:bg-purple-50"
]
},
{
variant: "text",
theme: "colony",
disabled: !1,
version: "alternate",
class: [
"text-colony-primary",
"hover:text-colony-primary",
"hover:bg-pink-50"
]
},
{
variant: "text",
theme: "civo",
disabled: !1,
version: "alternate",
class: [
"text-civo-primary",
"hover:text-civo-primary",
"hover:bg-blue-50"
]
},
{
variant: "text",
disabled: !0,
class: ["bg-transparent", "border-transparent", "text-zinc-400"]
},
{
variant: "circle",
size: "medium",
theme: "kubefirst",
disabled: !1,
class: [
"text-slate-400",
"bg-transparent",
"border-transparent",
"hover:bg-kubefirst-primary/5",
"hover:text-kubefirst-primary",
"w-8",
"h-8",
"[&>svg]:w-5",
"[&>svg]:h-5"
]
},
{
variant: "circle",
size: "large",
theme: "kubefirst",
disabled: !1,
class: [
"text-slate-400",
"bg-transparent",
"border-transparent",
"hover:bg-kubefirst-primary/5",
"hover:text-kubefirst-primary",
"w-11",
"h-11",
"[&>svg]:w-6",
"[&>svg]:h-6"
]
},
{
variant: "circle",
size: "medium",
theme: "colony",
disabled: !1,
class: [
"text-slate-400",
"bg-transparent",
"border-transparent",
"hover:bg-colony-primary/5",
"hover:text-colony-primary",
"w-8",
"h-8",
"[&>svg]:w-5",
"[&>svg]:h-5"
]
},
{
variant: "circle",
size: "large",
theme: "colony",
disabled: !1,
class: [
"text-slate-400",
"bg-transparent",
"border-transparent",
"hover:bg-colony-primary/5",
"hover:text-colony-primary",
"w-11",
"h-11",
"[&>svg]:w-6",
"[&>svg]:h-6"
]
},
{
variant: "circle",
size: "medium",
theme: "civo",
disabled: !1,
class: [
"text-slate-400",
"bg-transparent",
"border-transparent",
"hover:bg-civo-primary/5",
"hover:text-civo-primary",
"w-8",
"h-8",
"[&>svg]:w-5",
"[&>svg]:h-5"
]
},
{
variant: "circle",
size: "large",
theme: "civo",
disabled: !1,
class: [
"text-slate-400",
"bg-transparent",
"border-transparent",
"hover:bg-civo-primary/5",
"hover:text-civo-primary",
"w-11",
"h-11",
"[&>svg]:w-6",
"[&>svg]:h-6"
]
},
{
variant: "circle",
size: "medium",
disabled: !0,
class: [
"text-slate-300",
"bg-transparent",
"border-transparent",
"w-8",
"h-8",
"[&>svg]:w-5",
"[&>svg]:h-5"
]
},
{
variant: "circle",
size: "large",
disabled: !0,
class: [
"text-slate-300",
"bg-transparent",
"border-transparent",
"w-11",
"h-11",
"[&>svg]:w-6",
"[&>svg]:h-6"
]
}
],
defaultVariants: {
variant: "primary",
theme: "kubefirst",
version: "default",
disabled: !1
}
}
);
export {
a as buttonVariants
};