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

React component library

import { jsx as j } from "react/jsx-runtime";
import { forwardRef as D, useState as H } from "react";
import { P as t } from "./index-S5Cd7WrG.js";
import { n as I } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { h as S, c as A, b as i, a as o } from "./utils-DtRLzzTZ.js";
import { u as F } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { u as h } from "./useUpdateEffect-CuYWz7EA.js";
const K = (e) => e == "small" ? "3.125rem" : e == "medium" ? "3.375rem" : "3.625rem", V = I.div`
  box-sizing: border-box;
  ${(e) => e.disabled === !0 && S(e.theme)};
  min-width: 5.25rem;
  ${(e) => e.fullWidth && "width: 100%"};
  display: flex;
  justify-content: center;
  align-items: center;

  height: ${(e) => K(e.size)};
  ${(e) => A(
  e.theme,
  a(e.type),
  e.size,
  "enabled"
)};
  ${(e) => !e.disabled && "cursor: pointer"};
  color: ${(e) => !e.disabled && i(
  e.theme,
  a(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 && i(
  e.theme,
  a(e.type),
  e.color,
  e.active ? "active" : "enabled",
  "background",
  "backgroundOpacity"
)};
  ${(e) => e.type == "underline" && e.last == !1 && "border-right: 1px solid " + i(
  e.theme,
  a(e.type),
  e.color,
  "enabled",
  "line"
)};
  ${(e) => y(
  e.theme,
  e.type,
  e.active,
  e.disabled,
  e.color,
  "enabled"
)};
  ${(e) => E(e.theme, e.type, e.first, e.last)};
  &:hover {
    color: ${(e) => !e.disabled && i(
  e.theme,
  a(e.type),
  e.color,
  "hover",
  "text"
)};
    background-color: ${(e) => e.type == "regular" ? "transparent" : !e.disabled && i(
  e.theme,
  a(e.type),
  e.color,
  "hover",
  "background",
  "backgroundOpacity"
)};
    ${(e) => y(
  e.theme,
  e.type,
  e.active,
  e.disabled,
  e.color,
  "hover"
)};
  }
  &:active {
    background: ${(e) => i(
  e.theme,
  a(e.type),
  e.color,
  "active",
  "background",
  "backgroundOpacity"
)};
  }
`, a = (e) => e == "underline" ? "TabUnderline" : e == "pill" ? "TabPill" : "TabRegular", E = (e, r, n, l) => {
  if (r == "pill")
    return `border-radius: ${o(e, "regular")}`;
  if (r == "underline" && n)
    return `border-radius: ${o(
      e,
      "regular"
    )} 0  0 ${o(e, "regular")}`;
  if (r == "underline" && l)
    return `border-radius: 0 ${o(
      e,
      "regular"
    )} ${o(e, "regular")} 0`;
}, y = (e, r, n, l, u, c) => {
  if (r != "pill")
    return `border-bottom: ${!l && (n || c == "hover") ? e.components[r === "regular" ? "TabRegular" : "TabUnderline"].default.enabled.lineHeight + "" : e.components[r === "regular" ? "TabRegular" : "TabUnderline"].default.hover.lineHeight + ""} solid ${i(
      e,
      a(r),
      u,
      n && !l ? "active" : l ? "enabled" : c,
      "line"
    )}`;
}, L = D((e, r) => {
  const {
    type: n = "underline",
    disabled: l,
    first: u = !1,
    last: c = !1,
    fullWidth: v = !1,
    active: d = !1,
    activeIndex: s,
    index: b,
    //----------------
    onFocus: $ = () => {
    },
    onBlur: k = () => {
    },
    onClick: m = () => {
    },
    onKeyDown: T = () => {
    },
    itemClick: f = () => {
    },
    //----------------
    size: x = "small",
    color: C = "primary",
    className: w = "",
    style: R = {},
    children: O,
    ...B
  } = e, U = F(), [z, g] = H(d), N = {
    theme: U,
    color: C,
    size: x,
    style: R,
    className: "lnc-ui-tabitem " + w
  }, P = (W) => {
    f && !l && f(b), m && !l && m(W);
  };
  return h(() => {
    g(d);
  }, [d]), h(() => {
    g(s == b);
  }, [s]), /* @__PURE__ */ j(
    V,
    {
      ref: r,
      onFocus: $,
      onBlur: k,
      onClick: P,
      onKeyDown: T,
      disabled: l,
      type: n,
      first: u,
      last: c,
      fullWidth: v,
      active: z,
      ...N,
      ...B,
      children: O
    }
  );
});
L.propTypes = {
  type: t.oneOf(["regular", "pill", "underline"]),
  /**
   * Is it first Tab Item in Tab Wrapper
   * }
   */
  first: t.bool,
  /**
   * Is it last Tab Item in Tab Wrapper
   * }
   */
  last: t.bool,
  fullWidth: t.bool,
  active: t.bool,
  //---------------------------------------------------------------
  onClick: t.func,
  onBlur: t.func,
  onFocus: t.func,
  onKeyDown: t.func,
  //---------------------------------------------------------------
  className: t.string,
  style: t.object,
  color: t.oneOf([
    "primary",
    "secondary",
    "success",
    "warning",
    "danger",
    "information",
    "neutral",
    "gray"
  ]),
  size: t.oneOf(["small", "medium", "large"])
};
export {
  L as default
};