@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
120 lines (119 loc) • 3.84 kB
JavaScript
import { jsxs as u, jsx as r } from "react/jsx-runtime";
import { c as l } from "./index-DG4iIeSU.mjs";
import { c as i } from "./index-2NvaPZWc.mjs";
import p from "./loader-circle-qI-wM2d8.mjs";
import { S as g } from "./index-D2LZVjSn.mjs";
const m = ({
children: a,
isPending: e,
className: t,
size: o,
...n
}) => /* @__PURE__ */ u(
"span",
{
"data-slot": "button-pending",
className: i("inline-flex-center relative", t),
...n,
children: [
e && /* @__PURE__ */ r("div", { className: "absolute", "aria-hidden": !0, "data-testid": "buttonPendingLoader", children: /* @__PURE__ */ r(p, { className: "animate-spin" }) }),
/* @__PURE__ */ r(
"span",
{
className: i(
"inline-flex-center",
o === "lg" ? "gap-2.5" : "gap-2",
e && "invisible"
),
children: a
}
)
]
}
), b = {
/**
* Controls the visual variant of the button.
* - `default`: filled with primary color.
* Should be used for indicating primary action.
* - `secondary`: filled with secondary color.
* Should be used for indicating secondary action.
* - `outline`: bordered, transparent fill.
* Can be used for additional controls, icon buttons.
* - `outlineBg`: bordered, filled with default surface background.
* - `ghost`: no styled applied, unless hovered.
* Can be used for additional controls, icon buttons.
* - `ghostPrimary`: primary color, with `ghost` styles on hover.
* Can be used for additional controls, icon buttons.
* - `success`: filled with success color.
* Should be used for indicating positive actions.
* - `destructive`: filled with destructive color.
* Should be used for indicating negative and destructive actions.
* - `link`: just a regular text with underline on hover.
*
* @default "default"
*/
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/80",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/70",
outline: "border border-input hover:bg-accent hover:text-accent-foreground",
outlineBg: "border border-input bg-surface-primary hover:bg-accent hover:text-accent-foreground",
ghost: "hover:bg-accent hover:text-accent-foreground",
ghostPrimary: "text-primary hover:bg-primary/10",
success: "bg-success text-success-foreground hover:bg-success/80",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80",
link: "text-primary underline-offset-4 hover:underline"
},
/**
* Affects height, font size, padding, radius and gap.
* - `xs`
* - `sm`
* - `default`
* - `lg`
* - `round`: useful for round buttons with icons.
* No size or padding applied, provide through className.
*
* @default "default"
*/
size: {
xs: "h-6 text-xs px-2 py-1 rounded-md gap-1",
sm: "h-9 rounded-md px-3 gap-2",
default: "h-10 px-4 py-2 rounded-md gap-2",
lg: "h-11 rounded-md px-8 gap-2.5",
round: "rounded-full"
}
}, f = l(
"inline-flex items-center justify-center whitespace-nowrap transition focus-ring disabled:pointer-events-none disabled:opacity-50",
{
variants: b,
defaultVariants: {
variant: "default",
size: "default"
}
}
), j = ({
className: a,
variant: e = "default",
size: t = "default",
asChild: o,
type: n = "button",
isPending: s,
children: d,
...c
}) => /* @__PURE__ */ r(
o ? g : "button",
{
"data-slot": "button",
"data-variant": e,
"data-size": t,
className: f({ variant: e, size: t, className: a }),
type: n,
"aria-label": s ? "Loading" : void 0,
...c,
children: s !== void 0 ? /* @__PURE__ */ r(m, { size: t, isPending: s, children: d }) : d
}
);
export {
j as B,
b as a,
f as b
};