@lanaco/lnc-react-ui/dist/TabItem.js

React component library

import { jsx as O } from "react/jsx-runtime";
import { forwardRef as W, useState as j } from "react";
import { s as A } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { i as D, d as P, c as l, b as n } from "./utils-BUdHa0nB.js";
import { u as S } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { u as f } from "./useUpdateEffect-CuYWz7EA.js";
const V = (e) => e == "small" ? "3.125rem" : e == "medium" ? "3.375rem" : "3.625rem", E = A.div`
  box-sizing: border-box;
  ${(e) => e.disabled === !0 && D(e.theme)};
  min-width: 5.25rem;
  ${(e) => e.fullWidth && "width: 100%"};
  display: flex;
  justify-content: center;
  align-items: center;

  height: ${(e) => V(e.size)};
  ${(e) => P(
  e.theme,
  r(e.type),
  e.size,
  "enabled"
)};
  ${(e) => !e.disabled && "cursor: pointer"};
  color: ${(e) => !e.disabled && l(
  e.theme,
  r(e.type),
  e.color,
  e.active ? "active" : "enabled",
  "text"
)};
  background-color: ${(e) => e.type == "regular" || e.type == "pill" && (e.disabled == !0 || e.active == !1) ? "transparent" : !e.disabled && l(
  e.theme,
  r(e.type),
  e.color,
  e.active ? "active" : "enabled",
  "background",
  "backgroundOpacity"
)};
  ${(e) => e.type == "underline" && e.last == !1 && "border-right: 1px solid " + l(
  e.theme,
  r(e.type),
  e.color,
  "enabled",
  "line"
)};
  ${(e) => h(
  e.theme,
  e.type,
  e.active,
  e.disabled,
  e.color,
  "enabled"
)};
  ${(e) => F(e.theme, e.type, e.first, e.last)};
  &:hover {
    color: ${(e) => !e.disabled && l(
  e.theme,
  r(e.type),
  e.color,
  "hover",
  "text"
)};
    background-color: ${(e) => e.type == "regular" ? "transparent" : !e.disabled && l(
  e.theme,
  r(e.type),
  e.color,
  "hover",
  "background",
  "backgroundOpacity"
)};
    ${(e) => h(
  e.theme,
  e.type,
  e.active,
  e.disabled,
  e.color,
  "hover"
)};
  }
  &:active {
    background: ${(e) => l(
  e.theme,
  r(e.type),
  e.color,
  "active",
  "background",
  "backgroundOpacity"
)};
  }
`, r = (e) => e == "underline" ? "TabUnderline" : e == "pill" ? "TabPill" : "TabRegular", F = (e, t, i, a) => {
  if (t == "pill")
    return `border-radius: ${n(e, "regular")}`;
  if (t == "underline" && i)
    return `border-radius: ${n(
      e,
      "regular"
    )} 0  0 ${n(e, "regular")}`;
  if (t == "underline" && a)
    return `border-radius: 0 ${n(
      e,
      "regular"
    )} ${n(e, "regular")} 0`;
}, h = (e, t, i, a, u, d) => {
  if (t != "pill")
    return `border-bottom: ${!a && (i || d == "hover") ? e.components[t === "regular" ? "TabRegular" : "TabUnderline"].default.enabled.lineHeight + "" : e.components[t === "regular" ? "TabRegular" : "TabUnderline"].default.hover.lineHeight + ""} solid ${l(
      e,
      r(t),
      u,
      i && !a ? "active" : a ? "enabled" : d,
      "line"
    )}`;
}, Q = W((e, t) => {
  const {
    type: i = "underline",
    disabled: a,
    first: u = !1,
    last: d = !1,
    fullWidth: v = !1,
    active: c = !1,
    activeIndex: o,
    index: b,
    //----------------
    onFocus: y = () => {
    },
    onBlur: $ = () => {
    },
    onClick: s = () => {
    },
    onKeyDown: k = () => {
    },
    itemClick: m = () => {
    },
    //----------------
    size: T = "small",
    color: x = "primary",
    className: C = "",
    style: R = {},
    children: U,
    ...w
  } = e, B = S(), [z, g] = j(c), H = {
    theme: B,
    color: x,
    size: T,
    style: R,
    className: "lnc-ui-tabitem " + C
  }, I = (N) => {
    m && !a && m(b), s && !a && s(N);
  };
  return f(() => {
    g(c);
  }, [c]), f(() => {
    g(o == b);
  }, [o]), /* @__PURE__ */ O(
    E,
    {
      ref: t,
      onFocus: y,
      onBlur: $,
      onClick: I,
      onKeyDown: k,
      disabled: a,
      type: i,
      first: u,
      last: d,
      fullWidth: v,
      active: z,
      ...H,
      ...w,
      children: U
    }
  );
});
export {
  Q as default
};