@via-profit/ui-kit 0.3.0 → 0.5.0

package/Table/TableFooter.js

@@ -17,17 +17,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledTableFooter = styled_1.default.tfoot `
-  display: table-footer-group;
   vertical-align: middle;
-  border-top-width: 0.1em;
-  border-top-style: solid;
-  border-top-color: ${({ theme }) => theme.color.surface.darken(30).toString()};
-  & [role='cell'] {
+
+  & > tr > th,
+  & > tr > td {
     font-weight: 600;
-  }
-  & [role='row'] {
     border-bottom: none;
   }
+
+  & > tr:first-of-type > th,
+  & > tr:first-of-type > td {
+    border-top: 0.1em solid ${({ theme }) => theme.color.surface.darken(30).toString()};
+  }
 `;
 const TableFooter = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);

package/Table/TableHeader.js

@@ -17,10 +17,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledTableHeader = styled_1.default.thead `
-  display: table-header-group;
   vertical-align: middle;
-  & [role='row'] {
+
+  & > tr > th,
+  & > tr > td {
     border-bottom: none;
+    font-weight: 500;
+    background-color: ${({ theme }) => theme.color.accentPrimary.darken(10).toString()};
+    color: ${({ theme }) => theme.color.accentPrimaryContrast.toString()};
   }
 `;
 const TableHeader = (props, ref) => {

package/Table/TableHeaderCell.js

@@ -16,20 +16,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+/**
+ * The column header inside `<TableHeader>` or the row header (`scope="row"`) inside `<TableBody>`.
+ * The role (columnheader/rowheader) is implied by the position, so no explicit role
+ */
 const StyledTableHeaderCell = styled_1.default.th `
-  display: table-cell;
   vertical-align: inherit;
   padding: 0.8em;
-  background-color: ${({ theme }) => theme.color.accentPrimary.darken(10).toString()};
-  color: ${({ theme }) => theme.color.accentPrimaryContrast.toString()};
-  word-break: break-all;
-  font-weight: 500;
-  @media all and (max-width: 1200px) {
-    padding: 0.4em;
-  }
+  text-align: start;
+  font-weight: 600;
+  border-bottom: 0.1em solid ${({ theme }) => theme.color.surface.darken(20).toString()};
 `;
 const TableHeaderCell = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(StyledTableHeaderCell, Object.assign({ role: "rowheader" }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledTableHeaderCell, Object.assign({}, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(TableHeaderCell);

package/Table/TableRow.js

@@ -17,14 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledTableRow = styled_1.default.tr `
-  display: table-row;
   vertical-align: inherit;
-  border-bottom-width: 0.1em;
-  border-bottom-style: solid;
-  border-bottom-color: ${({ theme }) => theme.color.surface.darken(20).toString()};
 `;
 const TableRow = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(StyledTableRow, Object.assign({ role: "row" }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledTableRow, Object.assign({}, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(TableRow);

package/Tabs/Tab.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type TabProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & {
+    /**
+     * The value of the tab. The panel with the same value is shown when the tab is selected
+     */
+    readonly value: string;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> & {
+    /**
+     * The value of the tab. The panel with the same value is shown when the tab is selected
+     */
+    readonly value: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Tabs/Tab.js

@@ -0,0 +1,128 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const context_1 = require("./context");
+const tokens_1 = require("../ThemeProvider/tokens");
+const StyledTab = styled_1.default.button `
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0.75em 1.1em;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: 0.9em;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  color: ${({ theme, $color, $selected }) => $selected ? $color.toString() : theme.color.textSecondary.toString()};
+  transition:
+    color 150ms ease-out,
+    background-color 150ms ease-out;
+  ${({ $fullWidth }) => $fullWidth &&
+    (0, react_2.css) `
+      flex: 1 1 0;
+    `}
+  ${({ $orientation }) => $orientation === 'vertical' &&
+    (0, react_2.css) `
+      justify-content: flex-start;
+      text-align: left;
+    `}
+
+  &:hover:not(:disabled) {
+    background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.05).toString()};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ $color }) => $color.toString()};
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.45;
+  }
+
+  /* The indicator of the selected tab: under the tab or on its right edge */
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: ${({ $color }) => $color.toString()};
+    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    ${({ $orientation, $selected }) => $orientation === 'vertical'
+    ? (0, react_2.css) `
+            top: 0;
+            bottom: 0;
+            right: -1px;
+            width: 2px;
+            transform: scaleY(${$selected ? 1 : 0});
+          `
+    : (0, react_2.css) `
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 2px;
+            transform: scaleX(${$selected ? 1 : 0});
+          `}
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &,
+    &::after {
+      transition: none;
+    }
+  }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
+`;
+const Tab = (props, ref) => {
+    const { value, children, onClick, disabled } = props, nativeProps = __rest(props, ["value", "children", "onClick", "disabled"]);
+    const context = (0, context_1.useTabsContext)('Tab');
+    const isSelected = context.value === value;
+    const tabRef = react_1.default.useRef(null);
+    react_1.default.useImperativeHandle(ref, () => tabRef.current);
+    // The selected tab is kept visible in the scrolled list
+    react_1.default.useEffect(() => {
+        if (isSelected && tabRef.current) {
+            const tab = tabRef.current;
+            const list = tab.parentElement;
+            if (list && list.scrollWidth > list.clientWidth) {
+                const left = tab.offsetLeft - list.offsetLeft;
+                if (left < list.scrollLeft || left + tab.offsetWidth > list.scrollLeft + list.clientWidth) {
+                    list.scrollTo({
+                        left: left - (list.clientWidth - tab.offsetWidth) / 2,
+                        behavior: 'smooth',
+                    });
+                }
+            }
+        }
+    }, [isSelected]);
+    const handleClick = event => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented) {
+            context.select(value, event);
+        }
+    };
+    return (react_1.default.createElement(StyledTab, Object.assign({ type: "button", role: "tab", id: context.getTabId(value), "aria-controls": context.getPanelId(value), "aria-selected": isSelected, tabIndex: isSelected ? 0 : -1, "data-tab-value": value }, nativeProps, { disabled: disabled, onClick: handleClick, "$color": context.color, "$selected": isSelected, "$orientation": context.orientation, "$fullWidth": context.fullWidth, ref: tabRef }), children));
+};
+exports.default = react_1.default.forwardRef(Tab);

package/Tabs/TabList.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type TabListProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Tabs/TabList.js

@@ -0,0 +1,104 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const context_1 = require("./context");
+const StyledList = styled_1.default.div `
+  display: flex;
+  box-sizing: border-box;
+  ${({ theme, $orientation }) => $orientation === 'vertical'
+    ? (0, react_2.css) `
+          flex-direction: column;
+          flex-shrink: 0;
+          border-right: 1px solid ${theme.color.textPrimary.alpha(0.12).toString()};
+        `
+    : (0, react_2.css) `
+          flex-direction: row;
+          /* Many tabs on the narrow screen scroll instead of breaking the layout */
+          overflow-x: auto;
+          scrollbar-width: none;
+          border-bottom: 1px solid ${theme.color.textPrimary.alpha(0.12).toString()};
+          &::-webkit-scrollbar {
+            display: none;
+          }
+        `}
+`;
+const getEnabledTabs = (list) => Array.from(list.querySelectorAll('[role="tab"]')).filter(tab => tab.closest('[role="tablist"]') === list && !tab.hasAttribute('disabled'));
+const TabList = (props, ref) => {
+    const { children, onKeyDown } = props, nativeProps = __rest(props, ["children", "onKeyDown"]);
+    const { orientation, activation, value, isUncontrolledEmpty, selectInitial } = (0, context_1.useTabsContext)('TabList');
+    const listRef = react_1.default.useRef(null);
+    react_1.default.useImperativeHandle(ref, () => listRef.current);
+    // The tab order needs one focusable tab. Normally it is the selected one,
+    // without it — the first enabled tab
+    react_1.default.useLayoutEffect(() => {
+        const list = listRef.current;
+        if (!list) {
+            return;
+        }
+        const tabs = getEnabledTabs(list);
+        if (isUncontrolledEmpty && tabs[0]) {
+            selectInitial(tabs[0].dataset.tabValue);
+            return;
+        }
+        // Set on every tab: the first tab may keep 0 from the previous render without a selected tab
+        const focusable = tabs.find(tab => tab.getAttribute('aria-selected') === 'true') || tabs[0];
+        tabs.forEach(tab => {
+            tab.tabIndex = tab === focusable ? 0 : -1;
+        });
+    });
+    const handleKeyDown = event => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        const list = listRef.current;
+        if (event.defaultPrevented || !list) {
+            return;
+        }
+        const tabs = getEnabledTabs(list);
+        const index = tabs.indexOf(document.activeElement);
+        if (index === -1) {
+            return;
+        }
+        const prevKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+        const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+        let nextIndex;
+        switch (event.key) {
+            case prevKey:
+                nextIndex = (index - 1 + tabs.length) % tabs.length;
+                break;
+            case nextKey:
+                nextIndex = (index + 1) % tabs.length;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const target = tabs[nextIndex];
+        target.focus();
+        if (activation === 'auto' && target.dataset.tabValue !== value) {
+            target.click();
+        }
+    };
+    return (react_1.default.createElement(StyledList, Object.assign({ role: "tablist", "aria-orientation": orientation }, nativeProps, { onKeyDown: handleKeyDown, "$orientation": orientation, ref: listRef }), children));
+};
+exports.default = react_1.default.forwardRef(TabList);

package/Tabs/TabPanel.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type TabPanelProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The value of the tab this panel belongs to
+     */
+    readonly value: string;
+    /**
+     * Keeps the hidden panel in the DOM, e.g. to keep the state of the form inside it.
+     * By default the hidden panel is unmounted
+     * Default: false
+     */
+    readonly keepMounted?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The value of the tab this panel belongs to
+     */
+    readonly value: string;
+    /**
+     * Keeps the hidden panel in the DOM, e.g. to keep the state of the form inside it.
+     * By default the hidden panel is unmounted
+     * Default: false
+     */
+    readonly keepMounted?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Tabs/TabPanel.js

@@ -0,0 +1,51 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const context_1 = require("./context");
+const tokens_1 = require("../ThemeProvider/tokens");
+const StyledPanel = styled_1.default.div `
+  box-sizing: border-box;
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? (0, react_2.css) `
+          flex: 1;
+          min-width: 0;
+          padding: 0 0 0 1.25em;
+        `
+    : (0, react_2.css) `
+          padding: 1.25em 0 0;
+        `}
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.alpha(0.5).toString()};
+    outline-offset: 2px;
+  }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
+`;
+const TabPanel = (props, ref) => {
+    const { value, keepMounted = false, children } = props, nativeProps = __rest(props, ["value", "keepMounted", "children"]);
+    const context = (0, context_1.useTabsContext)('TabPanel');
+    const isSelected = context.value === value;
+    if (!isSelected && !keepMounted) {
+        return null;
+    }
+    return (react_1.default.createElement(StyledPanel, Object.assign({ role: "tabpanel", id: context.getPanelId(value), "aria-labelledby": context.getTabId(value), 
+        // The panel is reachable by Tab even if it has no focusable elements
+        tabIndex: 0, hidden: !isSelected }, nativeProps, { "$orientation": context.orientation, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(TabPanel);

package/Tabs/Tabs.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { TabsOrientation } from './context';
+export type TabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & {
+    /**
+     * The selected tab of the controlled tabs. Pass it together with `onChange`
+     * Default: undefined
+     */
+    readonly value?: string | null;
+    /**
+     * The initially selected tab of the uncontrolled tabs
+     * Default: the first enabled tab
+     */
+    readonly defaultValue?: string;
+    /**
+     * Called when the user selects a tab
+     */
+    readonly onChange?: (value: string, event: React.SyntheticEvent) => void;
+    /**
+     * `vertical` puts the tabs in a column to the left of the panels, the arrows ↑/↓ move between them
+     * Default: `horizontal`
+     */
+    readonly orientation?: TabsOrientation;
+    /**
+     * `auto`: the arrows select the tab at once.\
+     * `manual`: the arrows only move the focus, Enter or Space selects the tab.
+     * Use `manual` when the panel loads slowly, e.g. from the server
+     * Default: `auto`
+     */
+    readonly activation?: 'auto' | 'manual';
+    /**
+     * The tabs share the whole width of the list
+     * Default: false
+     */
+    readonly fullWidth?: boolean;
+    /**
+     * The color of the selected tab: the primary, default, secondary name of the colors or your specified color value
+     * Default: `default`
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    /**
+     * The selected tab of the controlled tabs. Pass it together with `onChange`
+     * Default: undefined
+     */
+    readonly value?: string | null | undefined;
+    /**
+     * The initially selected tab of the uncontrolled tabs
+     * Default: the first enabled tab
+     */
+    readonly defaultValue?: string | undefined;
+    /**
+     * Called when the user selects a tab
+     */
+    readonly onChange?: ((value: string, event: React.SyntheticEvent<Element, Event>) => void) | undefined;
+    /**
+     * `vertical` puts the tabs in a column to the left of the panels, the arrows ↑/↓ move between them
+     * Default: `horizontal`
+     */
+    readonly orientation?: TabsOrientation | undefined;
+    /**
+     * `auto`: the arrows select the tab at once.\
+     * `manual`: the arrows only move the focus, Enter or Space selects the tab.
+     * Use `manual` when the panel loads slowly, e.g. from the server
+     * Default: `auto`
+     */
+    readonly activation?: "auto" | "manual" | undefined;
+    /**
+     * The tabs share the whole width of the list
+     * Default: false
+     */
+    readonly fullWidth?: boolean | undefined;
+    /**
+     * The color of the selected tab: the primary, default, secondary name of the colors or your specified color value
+     * Default: `default`
+     */
+    readonly color?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Tabs/Tabs.js

@@ -0,0 +1,81 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const context_1 = require("./context");
+const useTabsColor_1 = __importDefault(require("./useTabsColor"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
+const StyledTabs = styled_1.default.div `
+  display: ${({ $orientation }) => ($orientation === 'vertical' ? 'flex' : 'block')};
+  align-items: flex-start;
+`;
+/**
+ * Turns any value into the part of the id: the id must not contain spaces
+ */
+const escapeId = (value) => value.replace(/[^\w-]/g, char => `_${char.charCodeAt(0).toString(16)}`);
+const Tabs = (props, ref) => {
+    const _a = (0, useThemeProps_1.default)('Tabs', props), { value, defaultValue, onChange, orientation = 'horizontal', activation = 'auto', fullWidth = false, color, children } = _a, nativeProps = __rest(_a, ["value", "defaultValue", "onChange", "orientation", "activation", "fullWidth", "color", "children"]);
+    const isControlled = typeof value !== 'undefined';
+    const [internalValue, setInternalValue] = react_1.default.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+    const currentValue = isControlled ? value : internalValue;
+    const $color = (0, useTabsColor_1.default)(color);
+    const baseId = `tabs-${react_1.default.useId().replace(/:/g, '')}`;
+    // Warn once, not on every render
+    const isControlledWithoutOnChange = isControlled && typeof onChange === 'undefined';
+    react_1.default.useEffect(() => {
+        if (isControlledWithoutOnChange) {
+            console.error('The property «onChange» should be passed with prop «value» to make component controlled');
+        }
+    }, [isControlledWithoutOnChange]);
+    const onChangeRef = react_1.default.useRef(onChange);
+    onChangeRef.current = onChange;
+    const select = react_1.default.useCallback((next, event) => {
+        var _a;
+        if (next === currentValue) {
+            return;
+        }
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, next, event);
+    }, [currentValue, isControlled]);
+    const context = react_1.default.useMemo(() => ({
+        value: currentValue,
+        select,
+        selectInitial: setInternalValue,
+        isUncontrolledEmpty: !isControlled && internalValue === null,
+        orientation,
+        activation,
+        fullWidth,
+        color: $color,
+        getTabId: tabValue => `${baseId}-tab-${escapeId(tabValue)}`,
+        getPanelId: tabValue => `${baseId}-panel-${escapeId(tabValue)}`,
+    }), [
+        currentValue,
+        select,
+        isControlled,
+        internalValue,
+        orientation,
+        activation,
+        fullWidth,
+        $color,
+        baseId,
+    ]);
+    return (react_1.default.createElement(context_1.TabsContext.Provider, { value: context },
+        react_1.default.createElement(StyledTabs, Object.assign({}, nativeProps, { "$orientation": orientation, ref: ref }), children)));
+};
+exports.default = react_1.default.forwardRef(Tabs);

package/Tabs/context.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import Color from '../Color';
+export type TabsOrientation = 'horizontal' | 'vertical';
+export interface TabsContextValue {
+    /**
+     * The selected tab or `null` if nothing is selected
+     */
+    readonly value: string | null;
+    readonly select: (value: string, event: React.SyntheticEvent) => void;
+    /**
+     * Selects the tab without `onChange`: the initial tab of the uncontrolled tabs without `defaultValue`
+     */
+    readonly selectInitial: (value: string) => void;
+    readonly isUncontrolledEmpty: boolean;
+    readonly orientation: TabsOrientation;
+    readonly activation: 'auto' | 'manual';
+    readonly fullWidth: boolean;
+    readonly color: Color;
+    readonly getTabId: (value: string) => string;
+    readonly getPanelId: (value: string) => string;
+}
+export declare const TabsContext: React.Context<TabsContextValue | null>;
+export declare const useTabsContext: (component: string) => TabsContextValue;

package/Tabs/context.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabsContext = exports.TabsContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.TabsContext = react_1.default.createContext(null);
+const useTabsContext = (component) => {
+    const context = react_1.default.useContext(exports.TabsContext);
+    if (!context) {
+        throw new Error(`<${component}> should be placed inside <Tabs>`);
+    }
+    return context;
+};
+exports.useTabsContext = useTabsContext;

package/Tabs/index.d.ts

@@ -0,0 +1,10 @@
+import Tabs from './Tabs';
+export { default as Tab } from './Tab';
+export { default as TabList } from './TabList';
+export { default as TabPanel } from './TabPanel';
+export type { TabsProps } from './Tabs';
+export type { TabProps } from './Tab';
+export type { TabListProps } from './TabList';
+export type { TabPanelProps } from './TabPanel';
+export type { TabsOrientation } from './context';
+export default Tabs;

package/Tabs/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanel = exports.TabList = exports.Tab = void 0;
+const Tabs_1 = __importDefault(require("./Tabs"));
+var Tab_1 = require("./Tab");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return __importDefault(Tab_1).default; } });
+var TabList_1 = require("./TabList");
+Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return __importDefault(TabList_1).default; } });
+var TabPanel_1 = require("./TabPanel");
+Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return __importDefault(TabPanel_1).default; } });
+exports.default = Tabs_1.default;

package/Tabs/useTabsColor.d.ts

@@ -0,0 +1,6 @@
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Tabs to the Color instance
+ */
+declare const useTabsColor: (color: 'default' | 'primary' | 'secondary' | string | undefined) => Color;
+export default useTabsColor;