@spark-ui/components
Version:
Spark (Leboncoin design system) components.
95 lines (93 loc) • 2.91 kB
JavaScript
// src/badge/BadgeItem.styles.tsx
import { makeVariants } from "@spark-ui/internal-utils";
import { cva } from "class-variance-authority";
var styles = cva(
["inline-flex h-fit", "empty:p-0", "text-center font-bold", "rounded-full box-content"],
{
variants: {
/**
* Visual color appearance of the component.
* @default 'danger'
*/
intent: makeVariants({
main: ["bg-main", "text-on-main", "border-surface"],
support: ["bg-support", "text-on-support", "border-surface"],
accent: ["bg-accent", "text-on-accent", "border-surface"],
success: ["bg-success", "text-on-success", "border-surface"],
alert: ["bg-alert", "text-on-alert", "border-surface"],
danger: ["bg-error", "text-on-error", "border-surface"],
info: ["bg-info", "text-on-info", "border-surface"],
neutral: ["bg-neutral", "text-on-neutral", "border-surface"],
surface: ["bg-surface", "text-on-surface", "border-surface"],
basic: ["bg-basic", "text-on-basic", "border-surface"]
}),
/**
* Size of the component.
* @default 'md'
*/
size: makeVariants({
sm: ["text-small", "px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]", "empty:size-sz-8"],
md: ["text-caption", "px-md py-sm", "empty:size-sz-16"]
}),
/**
* Type of the component.
* @default 'relative'
*/
type: {
relative: ["absolute right-0 border-md", "translate-x-1/2 -translate-y-1/2"],
standalone: []
}
},
defaultVariants: {
intent: "danger",
size: "md",
type: "relative"
}
}
);
// src/badge/BadgeItem.tsx
import { jsx } from "react/jsx-runtime";
var BadgeItem = ({
intent = "danger",
size = "md",
type = "relative",
count,
overflowCount = 99,
"aria-label": label,
className,
...others
}) => {
const hasOverflow = count && count > overflowCount;
const ariaLabel = typeof label === "function" ? label({ count, overflowCount }) : label;
const props = { ...others, "aria-label": ariaLabel };
return /* @__PURE__ */ jsx(
"span",
{
"data-spark-component": "badge",
role: "status",
className: styles({
intent,
size,
type,
className
}),
...props,
children: hasOverflow ? `${overflowCount}+` : count
}
);
};
BadgeItem.displayName = "BadgeItem";
// src/badge/Badge.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var Badge = ({ children, ...props }) => {
const isStandalone = !children;
return isStandalone ? /* @__PURE__ */ jsx2(BadgeItem, { type: "standalone", ...props }) : /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
children,
/* @__PURE__ */ jsx2(BadgeItem, { ...props })
] });
};
Badge.displayName = "Badge";
export {
Badge
};
//# sourceMappingURL=index.mjs.map