@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
323 lines (322 loc) • 7.39 kB
JavaScript
import { t as r } from "../../dist-Bcn6lMQe.js";
var a = r([
"select-none",
"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",
"px-4",
"py-2",
"text-sm",
"bg-aurora-500",
"border-aurora-500",
"text-metal-900",
"focus-visible:bg-aurora-400",
"hover:bg-aurora-400",
"hover:border-aurora-400",
"kubefirst:border-kubefirst-primary",
"kubefirst:bg-kubefirst-primary",
"kubefirst:hover:bg-kubefirst-secondary",
"kubefirst:hover:border-kubefirst-secondary",
"kubefirst:text-white"
], {
variants: {
variant: {
primary: "",
secondary: ["bg-white"],
tertiary: [],
danger: [
"border-red-700",
"bg-red-700",
"text-white",
"hover:bg-red-800",
"hover:border-red-800",
"focus-visible:bg-red-800",
"focus-visible:border-red-800",
"focus-visible:ring-red-300"
],
link: [
"bg-transparent",
"border-transparent",
"text-blue-600",
"hover:underline",
"hover:text-blue-700",
"hover:bg-transparent",
"hover:border-transparent",
"dark:text-aurora-500",
"dark:hover:text-aurora-500",
"focus-visible:bg-transparent"
]
},
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",
"text-[13px]",
"leading-5.5",
"h-7.5"
] }
},
compoundVariants: [
{
variant: "primary",
disabled: !0,
class: [
"text-metal-900",
"bg-aurora-500",
"border-transparent",
"kubefirst:bg-zinc-200",
"kubefirst:border-zinc-200",
"kubefirst:text-zinc-500",
"text-gray-700",
"opacity-45"
]
},
{
variant: "secondary",
disabled: !1,
class: [
"transition-colors",
"bg-white",
"hover:bg-white",
"text-slate-700",
"border-slate-300",
"hover:text-slate-700",
"hover:border-slate-300",
"hover:bg-slate-50",
"focus-visible:bg-slate-50",
"dark:bg-transparent",
"dark:text-aurora-500",
"dark:border-aurora-500",
"dark:focus-visible:bg-aurora-900",
"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: "secondary",
disabled: !0,
class: [
"kubefirst:bg-white",
"kubefirst:border-zinc-500",
"kubefirst:text-zinc-500",
"border-slate-300",
"bg-white",
"text-slate-700",
"dark:bg-aurora-900",
"dark:border-aurora-500",
"dark:text-aurora-500",
"opacity-45"
]
},
{
variant: "tertiary",
disabled: !1,
class: [
"transition-colors",
"bg-transparent",
"border-transparent",
"text-slate-700",
"hover:bg-aurora-100",
"focus-visible:bg-aurora-100",
"hover:text-slate-700",
"hover:border-transparent",
"dark:bg-transparent",
"dark:text-metal-100",
"dark:border-metal-100",
"dark:focus-visible:bg-green-400/15",
"dark:hover:bg-green-400/15",
"dark:hover:border-metal-100",
"dark:hover:text-metal-100"
]
},
{
variant: "tertiary",
disabled: !0,
class: [
"border-transparent",
"bg-white",
"text-slate-700",
"opacity-45",
"dark:bg-transparent",
"dark:border-metal-100",
"dark:text-metal-100"
]
},
{
variant: "danger",
version: "alternate",
class: [
"text-red-700",
"border-red-700",
"bg-white",
"hover:bg-red-50",
"focus-visible:bg-red-50",
"focus-visible:border-red-700",
"focus-visible:ring-red-300",
"dark:bg-transparent",
"dark:border-rose-400",
"dark:text-rose-400",
"dark:hover:bg-rose-950",
"dark:hover:border-rose-400",
"dark:focus-visible:bg-rose-950"
]
},
{
variant: "danger",
disabled: !0,
class: [
"text-white",
"border-red-700",
"bg-red-700",
"opacity-45"
]
},
{
variant: "danger",
version: "alternate",
disabled: !0,
class: [
"text-red-700",
"border-red-700",
"bg-white",
"opacity-45"
]
},
{
variant: "link",
disabled: !0,
class: [
"bg-transparent",
"border-transparent",
"text-blue-600",
"opacity-45"
]
},
{
shape: "circle",
size: ["medium", "large"],
disabled: !1,
class: [
"w-8",
"h-8",
"text-slate-500",
"bg-transparent",
"border-transparent",
"hover:border-transparent",
"hover:bg-aurora-50",
"focus-visible:bg-aurora-50",
"hover:text-slate-800",
"focus-visible:text-slate-800",
"[&>svg]:w-5",
"[&>svg]:h-5",
"dark:text-metal-400",
"dark:focus-visible:text-aurora-500",
"dark:hover:text-aurora-500",
"dark:hover:bg-green-400/15",
"dark:focus-visible:bg-green-400/15"
]
},
{
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",
"focus-visible:text-red-700",
"hover:text-red-700",
"focus-visible:bg-red-50",
"focus-visible:ring-red-300",
"hover:bg-red-50",
"dark:text-red-500",
"dark:hover:text-red-500",
"dark:focus-visible:text-red-500",
"dark:hover:bg-red-950/55",
"dark:focus-visible:bg-red-950/55"
]
},
{
shape: "circle",
size: ["medium", "large"],
disabled: !0,
class: [
"opacity-45",
"text-slate-500",
"bg-transparent",
"border-transparent",
"w-8",
"h-8",
"[&>svg]:w-5",
"[&>svg]:h-5",
"dark:text-metal-400"
]
},
{
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 {
a as buttonVariants
};