@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
91 lines (90 loc) • 2.23 kB
JavaScript
import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { NotificationBadge as p } from "../NotificationBadge/NotificationBadge.js";
import { cx as d } from "../../styled-system/css/cx.js";
import { sva as y } from "../../styled-system/css/sva.js";
const i = y({
slots: ["root", "iconGroup", "icon", "label", "badge"],
base: {
root: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: "sd.system.dimension.spacing.twoExtraSmall",
height: 64,
flex: 1,
cursor: "pointer"
},
iconGroup: {
position: "relative"
},
label: {
color: "sd.system.color.component.onSurface",
textStyle: "sd.system.typography.label.small_compact",
expanded: {
textStyle: "sd.system.typography.label.small_compact"
}
},
icon: {
color: "sd.system.color.component.onSurface",
"& svg": {
width: "sd.reference.dimension.scale.8",
height: "sd.reference.dimension.scale.8"
}
},
badge: {
position: "absolute",
top: "-6px",
right: "4px"
}
},
variants: {
isActive: {
true: {
label: {
color: "sd.system.color.impression.primary"
},
icon: {
color: "sd.system.color.impression.primary"
}
}
},
dot: {
true: {
badge: {
top: "-2.5px",
right: "4px"
}
}
}
},
defaultVariants: {
isActive: !1
}
}), b = ({
icon: r,
label: a,
count: l,
className: n,
...c
}) => {
const [t, m] = i.splitVariantProps(c), o = i(t);
return /* @__PURE__ */ s("button", { className: d(o.root, n), ...m, children: [
/* @__PURE__ */ s("div", { className: o.iconGroup, children: [
/* @__PURE__ */ e("div", { className: o.badge, children: /* @__PURE__ */ e(
p,
{
count: l || 0,
noNumber: t.dot,
size: "small"
}
) }),
/* @__PURE__ */ e("div", { className: o.icon, children: r })
] }),
/* @__PURE__ */ e("span", { className: o.label, children: a })
] });
};
export {
b as BottomNavigationItem,
i as BottomNavigationItemStyle
};