@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
278 lines (277 loc) • 7.2 kB
JavaScript
import { c as r } from "../../index-D29mdTf5.js";
const t = 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",
"kubefirst:border-kubefirst-primary",
"kubefirst:bg-kubefirst-primary",
"kubefirst:hover:bg-kubefirst-secondary",
"kubefirst:hover:border-kubefirst-secondary",
"kubefirst:text-white",
"bg-aurora-500",
"border-aurora-500",
"text-slate-700",
"hover:bg-aurora-400",
"hover:border-aurora-400"
],
{
variants: {
variant: {
primary: "",
secondary: ["bg-white"],
danger: [
"border-red-700",
"bg-red-700",
"text-white",
"hover:bg-red-800",
"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-5.5",
"h-[30px]"
]
}
},
compoundVariants: [
{
variant: "secondary",
disabled: !1,
class: [
"bg-white",
"hover:bg-white",
"text-slate-700",
"border-slate-300",
"hover:text-slate-700",
"hover:border-slate-300",
"hover:bg-slate-50",
"dark:bg-transparent",
"dark:text-aurora-500",
"dark:border-aurora-500",
"dark:hover:bg-aurora-900",
"dark:hover:border-aurora-500",
"dark:hover:text-aurora-500",
"kubefirst:text-kubefirst-primary",
"kubefirst:border-kubefirst-primary",
"kubefirst:hover:text-kubefirst-secondary",
"kubefirst:hover:border-kubefirst-secondary",
"kubefirst:hover:bg-purple-50",
"kubefirst:bg-white"
]
},
{
variant: "primary",
disabled: !0,
class: [
"kubefirst:bg-zinc-200",
"kubefirst:border-zinc-200",
"kubefirst:text-zinc-500",
"text-gray-700",
"opacity-45"
]
},
{
variant: "secondary",
disabled: !0,
class: [
"kubefirst:bg-white",
"kubefirst:border-zinc-500",
"kubefirst:text-zinc-500",
"border-slate-300/45",
"bg-white",
"text-slate-700/45"
]
},
{
variant: "danger",
version: "alternate",
class: [
"kubefirst:border-red-700",
"kubefirst:text-red-700",
"kubefirst:bg-white",
"kubefirst:hover:bg-red-50",
"border-red-700",
"text-red-700",
"bg-white",
"hover:bg-red-50"
]
},
{
variant: "danger",
disabled: !0,
class: ["text-white", "bg-red-700/45", "border-transparent"]
},
{
variant: "text",
disabled: !1,
version: "default",
class: [
"kubefirst:hover:border-transparent",
"kubefirst:hover:text-kubefirst-primary",
"kubefirst:text-kubefirst-primary",
"kubefirst:hover:bg-purple-50",
"kubefirst:bg-white",
"kubefirst:border-transparent",
"bg-white",
"border-transparent",
"text-slate-700",
"hover:border-transparent",
"hover:text-aurora-500",
"hover:bg-transparent"
]
},
{
variant: "text",
disabled: !1,
version: "alternate",
class: [
"bg-white",
"border-transparent",
"text-aurora-500",
"hover:border-transparent",
"hover:text-aurora-500",
"hover:bg-aurora-50",
"kubefirst:hover:border-transparent",
"kubefirst:text-kubefirst-primary",
"kubefirst:border-transparent",
"kubefirst:bg-white",
"kubefirst:hover:text-kubefirst-primary",
"kubefirst:hover:bg-purple-50"
]
},
{
variant: "text",
disabled: !0,
version: ["default", "alternate"],
class: [
"kubefirst:bg-white",
"kubefirst:border-white",
"kubefirst:text-zinc-400",
"bg-white",
"border-white",
"text-slate-700/45"
]
},
{
shape: "circle",
size: ["medium", "large"],
disabled: !1,
class: [
"w-8",
"h-8",
"text-slate-400",
"bg-transparent",
"border-transparent",
"hover:border-transparent",
"hover:bg-aurora-500/5",
"hover:text-slate-800",
"[&>svg]:w-5",
"[&>svg]:h-5",
"dark:text-slate-400",
"dark:hover:text-aurora-500",
"dark:hover:bg-aurora-900",
"kubefirst:text-slate-400",
"kubefirst:bg-transparent",
"kubefirst:border-transparent",
"kubefirst:hover:border-transparent",
"kubefirst:hover:bg-kubefirst-primary/5",
"kubefirst:hover:text-kubefirst-primary",
"kubefirst-dark:text-slate-400",
"kubefirst-dark:bg-transparent",
"kubefirst-dark:border-transparent",
"kubefirst-dark:hover:border-transparent",
"kubefirst-dark:hover:bg-kubefirst-primary/5",
"kubefirst-dark:hover:text-kubefirst-primary",
"kubefirst-dark:hover:bg-kubefirst-primary/25"
]
},
{
shape: "circle",
size: "large",
disabled: !1,
class: ["w-11", "h-11", "[&>svg]:w-6", "[&>svg]:h-6"]
},
{
variant: "danger",
shape: "circle",
size: ["medium", "large"],
disabled: !1,
class: [
"text-red-700",
"hover:text-red-700",
"hover:bg-red-50",
"dark:text-red-700",
"dark:hover:text-red-500",
"dark:hover:bg-red-700/25"
]
},
{
shape: "circle",
size: ["medium", "large"],
disabled: !0,
class: [
"text-slate-400",
"bg-transparent",
"border-transparent",
"w-8",
"h-8",
"[&>svg]:w-5",
"[&>svg]:h-5"
]
},
{
shape: "circle",
size: "large",
disabled: !0,
class: ["w-11", "h-11", "[&>svg]:w-6", "[&>svg]:h-6"]
}
],
defaultVariants: {
variant: "primary",
version: "default",
disabled: !1,
size: "medium"
}
}
);
export {
t as buttonVariants
};