@bianic-ui/tabs/dist/esm/tabs.js

Accessible Tabs component for React and Bianic UI

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { bianic, forwardRef, omitThemingProps, StylesProvider, useMultiStyleConfig, useStyles } from "@bianic-ui/system";
import { cx, __DEV__ } from "@bianic-ui/utils";
import * as React from "react";
import { TabsProvider, useTab, useTabIndicator, useTabList, useTabPanel, useTabPanels, useTabs } from "./use-tabs";

/**
 * Tabs
 *
 * Provides context and logic for all tabs components. It doesn't render
 * any DOM node.
 */
export var Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
  var styles = useMultiStyleConfig("Tabs", props);

  var _omitThemingProps = omitThemingProps(props),
      {
    children,
    className
  } = _omitThemingProps,
      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["children", "className"]);

  var _useTabs = useTabs(rest),
      {
    htmlProps
  } = _useTabs,
      ctx = _objectWithoutPropertiesLoose(_useTabs, ["htmlProps"]);

  var context = React.useMemo(() => ctx, [ctx]);
  return /*#__PURE__*/React.createElement(TabsProvider, {
    value: context
  }, /*#__PURE__*/React.createElement(StylesProvider, {
    value: styles
  }, /*#__PURE__*/React.createElement(bianic.div, _extends({
    className: cx("bianic-tabs", className),
    ref: ref
  }, htmlProps), children)));
});

if (__DEV__) {
  Tabs.displayName = "Tabs";
}

/**
 * Tab button used to activate a specific tab panel. It renders a `button`,
 * and is responsible for automatic and manual selection modes.
 */
export var Tab = /*#__PURE__*/forwardRef(function Tab(props, ref) {
  var styles = useStyles();
  var tabProps = useTab(_extends({}, props, {
    ref
  }));

  var tabStyles = _extends({
    outline: "0",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }, styles.tab);

  return /*#__PURE__*/React.createElement(bianic.button, _extends({}, tabProps, {
    className: cx("bianic-tabs__tab", props.className),
    __css: tabStyles
  }));
});

if (__DEV__) {
  Tab.displayName = "Tab";
}

/**
 * TabList is used to manage a list of tab buttons. It renders a `div` by default,
 * and is responsible the keyboard interaction between tabs.
 */
export var TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
  var tablistProps = useTabList(_extends({}, props, {
    ref
  }));
  var styles = useStyles();

  var tablistStyles = _extends({
    display: "flex"
  }, styles.tablist);

  return /*#__PURE__*/React.createElement(bianic.div, _extends({}, tablistProps, {
    className: cx("bianic-tabs__tablist", props.className),
    __css: tablistStyles
  }));
});

if (__DEV__) {
  TabList.displayName = "TabList";
}

/**
 * TabPanel
 * Used to render the content for a specific tab.
 */
export var TabPanel = /*#__PURE__*/forwardRef(function TabPanel(props, ref) {
  var panelProps = useTabPanel(_extends({}, props, {
    ref
  }));
  var styles = useStyles();
  return /*#__PURE__*/React.createElement(bianic.div, _extends({}, panelProps, {
    className: cx("bianic-tabs__tab-panel", props.className),
    __css: styles.tabpanel
  }));
});

if (__DEV__) {
  TabPanel.displayName = "TabPanel";
}

/**
 * TabPanel
 *
 * Used to manage the rendering of multiple tab panels. It uses
 * `cloneElement` to hide/show tab panels.
 *
 * It renders a `div` by default.
 */
export var TabPanels = /*#__PURE__*/forwardRef(function TabPanels(props, ref) {
  var panelsProps = useTabPanels(props);
  return /*#__PURE__*/React.createElement(bianic.div, _extends({}, panelsProps, {
    ref: ref,
    className: cx("bianic-tabs__tab-panels", props.className)
  }));
});

if (__DEV__) {
  TabPanels.displayName = "TabPanels";
}

/**
 * TabIndicator
 *
 * Used to render an active tab indicator that animates between
 * selected tabs.
 */
export var TabIndicator = /*#__PURE__*/forwardRef(function TabIndicator(props, ref) {
  var indicatorStyle = useTabIndicator();

  var style = _extends({}, props.style, indicatorStyle);

  var styles = useStyles();
  return /*#__PURE__*/React.createElement(bianic.div, _extends({
    ref: ref
  }, props, {
    className: cx("bianic-tabs__tab-indicator", props.className),
    style: style,
    __css: styles.indicator
  }));
});

if (__DEV__) {
  TabIndicator.displayName = "TabIndicator";
}
//# sourceMappingURL=tabs.js.map