@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
77 lines (76 loc) • 2.95 kB
JavaScript
import { jsx as n } from "react/jsx-runtime";
import { c as o } from "./index-DG4iIeSU.mjs";
import { c as d } from "./index-2NvaPZWc.mjs";
import { S as i } from "./index-D2LZVjSn.mjs";
const c = o(
"inline-flex-center border transition focus-ring",
{
variants: {
/**
* Controls the visual variant of the badge.
* - `default`: filled with primary color.
* - `secondary`: filled with secondary color.
* - `success`: filled with success color.
* Should be used for indicating positive and successful statues.
* - `successLight`: filled with success color of reduced opacity.
* Should be used for indicating positive and successful statues.
* - `warning`: filled with warning color.
* Should be used for bringing users' attention to potential upcoming problems or semi-success statuses.
* - `warningLight`: filled with warning color of reduced opacity.
* Should be used for bringing users' attention to potential upcoming problems or semi-negative statuses.
* - `destructive`: filled with destructive color.
* Should be used for indicating negative and unsuccessful statues.
* - `destructiveLight`: filled with destructive color of reduced opacity.
* Should be used for indicating negative and unsuccessful statues.
* - `outline`: bordered, transparent fill
*
* @default "default"
*/
variant: {
default: "border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
success: "border-transparent bg-success text-success-foreground shadow-sm hover:bg-success/80",
successLight: "border-transparent bg-success/10 text-success",
warning: "border-transparent bg-warning text-warning-foreground shadow-sm hover:bg-warning/80",
warningLight: "border-transparent bg-warning/10 text-warning-dark",
destructive: "border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
destructiveLight: "border-transparent bg-destructive/10 text-destructive",
outline: "text-foreground"
},
/**
* Affects padding, font size, border radius and gap.
* - `sm`
* - `lg`
*
* @default "sm"
*/
size: {
sm: "px-2.5 py-0.5 text-xs rounded-md gap-1 font-semibold",
lg: "text-sm px-3 py-2 rounded-2xl gap-3 font-medium"
}
},
defaultVariants: {
variant: "default",
size: "sm"
}
}
), f = ({
className: t,
variant: r = "default",
size: e = "sm",
asChild: s,
...a
}) => /* @__PURE__ */ n(
s ? i : "div",
{
"data-slot": "badge",
"data-variant": r,
"data-size": e,
className: d(c({ variant: r, size: e }), t),
...a
}
);
export {
f as B,
c as b
};