@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
85 lines (84 loc) • 2.41 kB
JavaScript
import { jsx as l } from "react/jsx-runtime";
import { c } from "./index-DG4iIeSU.mjs";
import { c as n } from "./index-2NvaPZWc.mjs";
const u = c("rounded-full", {
variants: {
/**
* Controls the visual status of the dot.
* - `default`: neutral/inactive state
* - `primary`: active/enabled state
* - `success`: positive/successful state
* - `warning`: attention/caution state
* - `destructive`: negative/error state
*
* @default "default"
*/
status: {
default: "bg-muted-foreground [--glow-color:var(--color-muted-foreground)]",
primary: "bg-primary [--glow-color:var(--color-primary)]",
success: "bg-success [--glow-color:var(--color-success)]",
warning: "bg-warning [--glow-color:var(--color-warning)]",
destructive: "bg-destructive [--glow-color:var(--color-destructive)]"
},
/**
* Controls the size of the status dot.
* - `sm`: size-2 (0.5rem) diameter
* - `md`: size-3 (0.75rem) diameter
* - `lg`: size-4 (1rem) diameter
*
* @default "sm"
*/
size: {
sm: "size-2 [--glow-size:1px]",
md: "size-3 [--glow-size:2px]",
lg: "size-4 [--glow-size:3px]"
},
/**
* Controls the visual appearance of the dot.
* - `solid`: standard filled dot
* - `glow`: dot with a subtle glow effect
*
* @default "solid"
*/
appearance: {
solid: "",
glow: "border-(length:--glow-size) border-[color-mix(in_srgb,var(--glow-color)_50%,transparent)] bg-clip-padding shadow-[0_0_calc(var(--glow-size)*3)_color-mix(in_srgb,var(--glow-color)_30%,transparent)]"
}
},
defaultVariants: {
status: "default",
size: "sm",
appearance: "solid"
}
}), v = ({
className: e,
status: r = "default",
size: a = "sm",
appearance: s = "solid",
"aria-label": t,
"aria-hidden": o = !1,
...i
}) => /* @__PURE__ */ l(
"div",
{
"data-slot": "status-dot",
"data-status": r,
"data-size": a,
"data-appearance": s,
role: "img",
"aria-label": o ? void 0 : t || (r ? {
default: "Neutral status",
primary: "Active status",
success: "Success status",
warning: "Warning status",
destructive: "Error status"
}[r] : "Status indicator"),
"aria-hidden": o,
className: n(u({ status: r, size: a, appearance: s }), e),
...i
}
);
export {
v as S,
u as s
};