@serendie/ui/dist/components/Tabs/TabItem.js

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

import { jsxs as y, jsx as o } from "react/jsx-runtime";
import { tabs_exports as b } from "../../node_modules/@ark-ui/react/dist/components/tabs/tabs.js";
import { NotificationBadge as i } from "../NotificationBadge/NotificationBadge.js";
import { cx as u } from "../../styled-system/css/cx.js";
import { sva as h } from "../../styled-system/css/sva.js";
const l = h({
  slots: ["trigger", "dot", "badgeBox", "badge"],
  base: {
    trigger: {
      display: "flex",
      justifyContent: "center",
      flex: 1,
      gap: "sd.system.dimension.spacing.twoExtraSmall",
      alignItems: "center",
      height: 44,
      cursor: "pointer",
      color: "sd.system.color.component.onSurface",
      transitionDuration: ".2s",
      transitionProperty: "color, border-color",
      transitionTimingFunction: "cubic-bezier(.2, 0, 0, 1)",
      borderBottomWidth: "2px",
      borderBottomStyle: "solid",
      borderBottomColor: "transparent",
      textStyle: "sd.system.typography.label.large_compact",
      _expanded: {
        textStyle: "sd.system.typography.label.large_expanded"
      },
      _selected: {
        color: "sd.system.color.impression.primary",
        fontWeight: "bold",
        borderBottomColor: "sd.system.color.impression.primary"
      },
      _disabled: {
        cursor: "default",
        color: "sd.system.color.interaction.disabledOnSurface"
      },
      _hover: {
        color: "sd.system.color.impression.primary",
        _disabled: {
          color: "sd.system.color.interaction.disabledOnSurface"
        }
      },
      _focusVisible: {
        outlineWidth: "1px",
        outlineStyle: "solid",
        outlineColor: "sd.system.color.component.outline",
        outlineOffset: "-1px"
      }
    },
    dot: {
      height: 8,
      width: 8
    },
    badgeBox: {
      height: 16,
      width: 16
    },
    badge: {
      backgroundColor: "color-mix(in srgb, {colors.sd.system.color.interaction.hoveredOnPrimary}, {colors.sd.system.color.impression.negativeContainer});"
    }
  }
}), v = ({
  title: n,
  value: a,
  disabled: t,
  dot: c,
  badge: r,
  className: d,
  ...m
}) => {
  const [p, g] = l.splitVariantProps(m), e = l(p), s = t ? e.badge : "";
  return /* @__PURE__ */ y(
    b.Trigger,
    {
      value: a,
      className: u(e.trigger, d),
      disabled: t,
      ...g,
      children: [
        /* @__PURE__ */ o("span", { children: n }),
        c && /* @__PURE__ */ o("div", { className: e.dot, children: /* @__PURE__ */ o(i, { noNumber: !0, className: s }) }),
        r && /* @__PURE__ */ o("div", { className: e.badgeBox, children: /* @__PURE__ */ o(
          i,
          {
            count: r,
            size: "small",
            className: s
          }
        ) })
      ]
    }
  );
};
export {
  v as TabItem,
  l as TabItemStyle
};