@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
89 lines (88 loc) • 2.12 kB
JavaScript
import { jsx as e } from "react/jsx-runtime";
import { cx as a } from "../../styled-system/css/cx.js";
import { sva as m } from "../../styled-system/css/sva.js";
const n = m({
slots: ["root", "text"],
base: {
root: {
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: 24,
minWidth: 24,
color: "sd.system.color.impression.onNegative",
borderRadius: "sd.system.dimension.radius.full",
paddingX: "sd.system.dimension.spacing.twoExtraSmall",
textStyle: "sd.system.typography.label.small_compact",
_expanded: {
textStyle: "sd.system.typography.label.small_expanded"
}
},
text: {
height: 24,
lineHeight: "24px"
}
},
variants: {
size: {
small: {
root: {
height: 16,
minWidth: 16,
paddingX: "sd.system.dimension.spacing.twoExtraSmall"
}
},
medium: {
root: {
height: 24,
minWidth: 24,
paddingX: "sd.system.dimension.spacing.extraSmall"
}
}
},
variant: {
primary: {
root: {
backgroundColor: "sd.system.color.impression.negative"
}
},
secondary: {
root: {
backgroundColor: "sd.system.color.impression.primary"
}
}
},
noNumber: {
true: {
root: {
height: 8,
paddingX: 0,
minWidth: 8
}
}
},
position: {
relative: {
root: {
position: "relative"
}
}
}
},
defaultVariants: {
variant: "primary",
size: "medium"
}
}), g = ({
count: t,
noNumber: s,
className: o,
...d
}) => {
const [l, r] = n.splitVariantProps(d), i = n({ noNumber: s, ...l });
return s ? /* @__PURE__ */ e("div", { className: a(i.root, o), ...r }) : !t || t < 1 ? null : /* @__PURE__ */ e("div", { className: a(i.root, o), ...r, children: /* @__PURE__ */ e("span", { className: i.text, children: t > 99 ? "99+" : t }) });
};
export {
g as NotificationBadge
};