@serendie/ui/dist/components/BottomNavigation/BottomNavigationItem.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

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
};