@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
106 lines (105 loc) • 3.47 kB
JavaScript
import { jsxs as u, jsx as e } from "react/jsx-runtime";
import { c as l } from "./index-CzIeYJrm.mjs";
import { c as s } from "./index-2NvaPZWc.mjs";
import { L as p } from "./loader-circle-yb4mr2bR.mjs";
import { S as m } from "./index-CB1Wkg0G.mjs";
const g = ({
children: a,
isPending: r,
className: t,
size: o,
...n
}) => /* @__PURE__ */ u("span", { className: s("inline-flex-center relative", t), ...n, children: [
r && /* @__PURE__ */ e("div", { className: "absolute", "aria-hidden": !0, "data-testid": "buttonPendingLoader", children: /* @__PURE__ */ e(p, { className: "animate-spin" }) }),
/* @__PURE__ */ e(
"span",
{
className: s(
"inline-flex-center",
o === "lg" ? "gap-2.5" : "gap-2",
r && "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.
* - `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",
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"
}
}
), L = ({
className: a,
variant: r,
size: t,
asChild: o,
type: n = "button",
isPending: i,
children: d,
...c
}) => /* @__PURE__ */ e(
o ? m : "button",
{
className: f({ variant: r, size: t, className: a }),
type: n,
"aria-label": i ? "Loading" : void 0,
...c,
children: i !== void 0 ? /* @__PURE__ */ e(g, { size: t, isPending: i, children: d }) : d
}
);
export {
L as B,
f as a,
b
};