@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
74 lines (73 loc) • 2.87 kB
JavaScript
import { jsx as a } from "react/jsx-runtime";
import { c as o } from "./index-CzIeYJrm.mjs";
import { c as d } from "./index-2NvaPZWc.mjs";
import { S as i } from "./index-CB1Wkg0G.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"
}
}
), x = ({
className: r,
variant: e,
size: t,
asChild: s,
...n
}) => /* @__PURE__ */ a(
s ? i : "div",
{
className: d(c({ variant: e, size: t }), r),
...n
}
);
export {
x as B,
c as b
};