@kubit-ui-web/react-components/dist/cjs/components/tabs/tabs.styled.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsTabListStyled = exports.TabsContentStyled = exports.LabelHiddenContainer = exports.TextWrapperStyled = exports.TabStyled = exports.TabsRightArrowContainerStyled = exports.TabsLeftArrowContainerStyled = exports.OneTabStyled = exports.PrimaryTabItemRoveStyled = exports.TabsStyled = exports.TabsContainerStyled = void 0;
const styled_components_1 = __importStar(require("styled-components"));
const getStyles_1 = require("../../utils/getStyles/getStyles");
const type_1 = require("../button/types/type");
const state_1 = require("./types/state");
const TWO_TABS = 2;
const THREE_TABS = 3;
exports.TabsContainerStyled = styled_components_1.default.div `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles.fullContainer)}
`;
exports.TabsStyled = styled_components_1.default.div `
  position: relative;
  display: flex;
  ${({ styles }) => (0, getStyles_1.getStyles)(styles.container)}

  ${({ theme: { MEDIA_QUERIES: { onlyMobile }, }, }) => (0, styled_components_1.css) `
    ${onlyMobile} {
      overflow: hidden;
    }
  `}
`;
exports.PrimaryTabItemRoveStyled = styled_components_1.default.button ``;
exports.PrimaryTabItemRoveStyled.defaultProps = {
    type: type_1.ButtonType.BUTTON,
};
exports.OneTabStyled = styled_components_1.default.div ``;
exports.TabsLeftArrowContainerStyled = styled_components_1.default.button `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles.arrowLeftIconContainer)}
  ${({ styles, theme: { MEDIA_QUERIES: { onlyMobile }, }, }) => (0, styled_components_1.css) `
    ${onlyMobile} {
      :focus-visible {
        ${(0, getStyles_1.getStyles)(styles.arrowLeftIconContainer?.MOBILE?.focusVisible)}
      }
    }
  `}
`;
exports.TabsRightArrowContainerStyled = styled_components_1.default.button `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles.arrowRightIconContainer)}
  ${({ styles, theme: { MEDIA_QUERIES: { onlyMobile }, }, }) => (0, styled_components_1.css) `
    ${onlyMobile} {
      :focus-visible {
        ${(0, getStyles_1.getStyles)(styles.arrowRightIconContainer?.MOBILE?.focusVisible)}
      }
    }
  `}
`;
exports.TabStyled = styled_components_1.default.div `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles.tabContainer)}
  width: ${props => (props.autoWidth ? 'auto' : `calc(100% / ${props.tabsLength})`)};

  &:has(:focus-visible) {
    ${({ styles, theme: { MEDIA_QUERIES: { onlyDesktop }, }, }) => (0, styled_components_1.css) `
      ${onlyDesktop} {
        &:focus-within {
          ${(0, getStyles_1.getStyles)(styles.tabContainer?.DESKTOP?.focusWithin)}
        }
        &:focus {
          ${(0, getStyles_1.getStyles)(styles.tabContainer?.DESKTOP?.focus)}
        }
        &:focus-visible {
          ${(0, getStyles_1.getStyles)(styles.tabContainer?.DESKTOP?.focusVisible)}
        }
      }
    `}
  }
  ${({ styles, numTabsInViewMobile, theme: { MEDIA_QUERIES: { onlyMobile }, }, }) => (0, styled_components_1.css) `
    ${onlyMobile} {
      min-width: calc(100% / ${numTabsInViewMobile});
      :focus-within {
        ${(0, getStyles_1.getStyles)(styles.tabContainer?.MOBILE?.focusWithin)}
      }
    }
  `}

  > * {
    height: 100%;
  }

  & ${exports.PrimaryTabItemRoveStyled} {
    ${props => (0, getStyles_1.getStyles)(props.styles?.[props.state]?.tabButton)}

    &:hover {
      ${props => (0, getStyles_1.getStyles)(props.styles?.[state_1.TabsStateTypes.HOVER]?.tabButton)}
    }

    &:active {
      ${props => (0, getStyles_1.getStyles)(props.styles?.[state_1.TabsStateTypes.PRESSED]?.tabButton)}
    }

    &:disabled {
      ${props => (0, getStyles_1.getStyles)(props.styles?.[state_1.TabsStateTypes.DISABLED]?.tabButton)}
    }

    // When label is empty
    ${props => props.empty && (0, getStyles_1.getStyles)(props.styles?.[state_1.TabsStateTypes.EMPTY]?.tabButton)}
  }

  & ${exports.OneTabStyled} {
    ${({ styles }) => (0, getStyles_1.getStyles)(styles.oneTabContainer)}
    ${props => props.empty && (0, getStyles_1.getStyles)(props.styles?.[state_1.TabsStateTypes.EMPTY]?.tabButton)}
  }
`;
exports.TextWrapperStyled = styled_components_1.default.span.withConfig({
    shouldForwardProp: () => true,
}) `
  display: ${isHidden => (isHidden ? 'none' : undefined)};
  text-overflow: ellipsis;
  overflow: hidden;
  // Addition lines for 2 line or multiline ellipsis
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
`;
exports.LabelHiddenContainer = styled_components_1.default.span `
  display: none;
`;
exports.TabsContentStyled = styled_components_1.default.div `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles.contentContainer)}
  display: ${({ $display }) => $display};
`;
exports.TabsTabListStyled = styled_components_1.default.div `
  display: flex;
  width: 100%;
  ${({ styles }) => (0, getStyles_1.getStyles)(styles.tabButtonsContainer)}

  ${({ theme: { MEDIA_QUERIES: { onlyMobile }, }, }) => (0, styled_components_1.css) `
    ${onlyMobile} {
      transition: 0.2s linear;
    }
  `}
  > ${exports.TabStyled}:first-child > ${exports.PrimaryTabItemRoveStyled} {
    ${props => (0, getStyles_1.getStyles)(props.styles?.firstTabButton)}
  }
  > ${exports.TabStyled}:last-child > ${exports.PrimaryTabItemRoveStyled} {
    ${props => (0, getStyles_1.getStyles)(props.styles?.lastTabButton)}
  }
`;
//# sourceMappingURL=tabs.styled.js.map