@via-profit/ui-kit 0.9.1 → 0.10.0

package/Stepper/Step.js

@@ -0,0 +1,169 @@
+"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 Container = styled_1.default.div `
+  position: relative;
+  display: flex;
+  ${({ $orientation, $alternativeLabel, $last }) => $orientation === 'vertical'
+    ? (0, react_2.css) `
+          flex-direction: column;
+        `
+    : $alternativeLabel
+        ? (0, react_2.css) `
+            flex: 1 1 0;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+          `
+        : (0, react_2.css) `
+            flex: ${$last ? '0 0 auto' : '1 1 auto'};
+            align-items: center;
+          `}
+`;
+const Head = styled_1.default.div `
+  display: flex;
+  align-items: ${({ $alternativeLabel }) => ($alternativeLabel ? 'center' : 'flex-start')};
+  flex-direction: ${({ $alternativeLabel }) => ($alternativeLabel ? 'column' : 'row')};
+  gap: ${({ $alternativeLabel }) => ($alternativeLabel ? '0.35em' : '0.5em')};
+  flex-shrink: 0;
+`;
+/**
+ * The circle of the step: the check of the completed one, the number of the others
+ */
+const Icon = styled_1.default.span `
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 1.6em;
+  height: 1.6em;
+  border-radius: 50%;
+  font-size: 1em;
+  font-weight: 600;
+  ${({ theme, $state, $color, $contrastColor, $status }) => {
+    // the attention (warning, error) colors the step that is not completed
+    const main = $status ? theme.color[$status] : $color;
+    switch ($state) {
+        // done: the pale plate of the color and the check of the color
+        case 'completed':
+            return (0, react_2.css) `
+          background-color: ${$color.alpha(0.15).toString()};
+          color: ${$color.toString()};
+        `;
+        // now: the contrast plate of the color, the border and the number of the color
+        case 'active':
+            return (0, react_2.css) `
+          border: 2px solid ${main.toString()};
+          background-color: ${($status ? theme.color.surface : $contrastColor).toString()};
+          color: ${main.toString()};
+        `;
+        // ahead: pale grey
+        default:
+            return $status
+                ? (0, react_2.css) `
+              border: 1.5px solid ${main.toString()};
+              background-color: ${theme.color.surface.toString()};
+              color: ${main.darken(20).toString()};
+            `
+                : (0, react_2.css) `
+              background-color: ${theme.color.textPrimary.alpha(0.06).toString()};
+              color: ${theme.color.textSecondary.alpha(0.7).toString()};
+            `;
+    }
+}}
+  & > span {
+    font-size: 0.75em;
+  }
+  & > svg {
+    width: 0.85em;
+    height: 0.85em;
+  }
+`;
+const Label = styled_1.default.span `
+  display: flex;
+  flex-direction: column;
+  padding-top: 0.15em;
+  line-height: 1.3;
+  font-size: 0.929em;
+  font-weight: ${({ $state }) => ($state === 'active' ? 600 : 400)};
+  color: ${({ theme, $state }) => ($state === 'pending' ? theme.color.textSecondary : theme.color.textPrimary).toString()};
+`;
+const Caption = styled_1.default.span `
+  font-size: 0.857em;
+  font-weight: 400;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+/**
+ * The line to the next step: accented after the completed step
+ */
+const Connector = styled_1.default.span `
+  background-color: ${({ theme, $done, $color }) => ($done ? $color : theme.color.textPrimary.alpha(0.15)).toString()};
+  ${({ $orientation, $alternativeLabel }) => $orientation === 'vertical'
+    ? (0, react_2.css) `
+          width: 1.5px;
+          min-height: 0.75em;
+          margin: 0.25em 0 0.25em calc(0.8em - 0.75px);
+          flex: 1 1 auto;
+        `
+    : $alternativeLabel
+        ? (0, react_2.css) `
+            position: absolute;
+            top: calc(0.8em - 0.75px);
+            left: calc(50% + 1.1em);
+            right: calc(-50% + 1.1em);
+            height: 1.5px;
+          `
+        : (0, react_2.css) `
+            flex: 1 1 auto;
+            min-width: 1em;
+            height: 1.5px;
+            margin: 0 0.5em;
+          `}
+`;
+const Check = () => (react_1.default.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": true },
+    react_1.default.createElement("path", { d: "M5 12.5l4.5 4.5L19 7.5", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })));
+/**
+ * One step of the `<Stepper>`
+ */
+const Step = (props, ref) => {
+    const { children, caption, completed, status, icon } = props, nativeProps = __rest(props, ["children", "caption", "completed", "status", "icon"]);
+    const stepper = react_1.default.useContext(context_1.StepperContext);
+    const { index, last } = react_1.default.useContext(context_1.StepIndexContext);
+    if (!stepper) {
+        throw new Error('<Step> should be placed inside <Stepper>');
+    }
+    const { activeStep, orientation, alternativeLabel, color, contrastColor } = stepper;
+    const state = completed || (typeof completed === 'undefined' && index < activeStep)
+        ? 'completed'
+        : index === activeStep
+            ? 'active'
+            : 'pending';
+    return (react_1.default.createElement(Container, Object.assign({ role: "listitem", "aria-current": state === 'active' ? 'step' : undefined }, nativeProps, { "$orientation": orientation, "$alternativeLabel": alternativeLabel, "$last": last, ref: ref }),
+        react_1.default.createElement(Head, { "$alternativeLabel": alternativeLabel },
+            react_1.default.createElement(Icon, { "$state": state, "$color": color, "$contrastColor": contrastColor, "$status": status !== null && status !== void 0 ? status : null }, state === 'completed' ? react_1.default.createElement(Check, null) : (icon !== null && icon !== void 0 ? icon : react_1.default.createElement("span", null, index + 1))),
+            react_1.default.createElement(Label, { "$state": state },
+                children,
+                caption && react_1.default.createElement(Caption, null, caption))),
+        !last && (react_1.default.createElement(Connector, { "$orientation": orientation, "$alternativeLabel": alternativeLabel, "$done": state === 'completed', "$color": color }))));
+};
+exports.default = react_1.default.forwardRef(Step);

package/Stepper/Stepper.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StepperOrientation } from './context';
+export type StepperProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The current step from 0: the steps before it are completed. `-1` — nothing is started,
+     * the number of the steps — everything is completed
+     * Default: `0`
+     */
+    readonly activeStep?: number;
+    /**
+     * `horizontal` — the steps in a row, `vertical` — in a column
+     * Default: `horizontal`
+     */
+    readonly orientation?: StepperOrientation;
+    /**
+     * The labels under the icons (the horizontal stepper only): the steps share the width equally
+     * Default: false
+     */
+    readonly alternativeLabel?: boolean;
+    /**
+     * The color of the completed and the current steps: the primary, secondary name or any CSS color
+     * Default: `primary`
+     */
+    readonly color?: 'primary' | 'secondary' | string;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The current step from 0: the steps before it are completed. `-1` — nothing is started,
+     * the number of the steps — everything is completed
+     * Default: `0`
+     */
+    readonly activeStep?: number;
+    /**
+     * `horizontal` — the steps in a row, `vertical` — in a column
+     * Default: `horizontal`
+     */
+    readonly orientation?: StepperOrientation;
+    /**
+     * The labels under the icons (the horizontal stepper only): the steps share the width equally
+     * Default: false
+     */
+    readonly alternativeLabel?: boolean;
+    /**
+     * The color of the completed and the current steps: the primary, secondary name or any CSS color
+     * Default: `primary`
+     */
+    readonly color?: "primary" | "secondary" | string;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Stepper/Stepper.js

@@ -0,0 +1,74 @@
+"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 Color_1 = __importDefault(require("../Color"));
+const context_1 = require("./context");
+const StyledStepper = styled_1.default.div `
+  display: flex;
+  ${({ $orientation, $alternativeLabel }) => $orientation === 'vertical'
+    ? (0, react_2.css) `
+          flex-direction: column;
+        `
+    : (0, react_2.css) `
+          flex-direction: row;
+          align-items: ${$alternativeLabel ? 'flex-start' : 'center'};
+        `}
+`;
+/**
+ * The steps of a process: done, the current one, ahead. Children — the `<Step>` elements
+ */
+const Stepper = (props, ref) => {
+    const { activeStep = 0, orientation = 'horizontal', alternativeLabel = false, color = 'primary', children } = props, nativeProps = __rest(props, ["activeStep", "orientation", "alternativeLabel", "color", "children"]);
+    const theme = (0, react_2.useTheme)();
+    const [resolvedColor, contrastColor] = react_1.default.useMemo(() => {
+        if (color === 'primary') {
+            return [theme.color.accentPrimary, theme.color.accentPrimaryContrast];
+        }
+        if (color === 'secondary') {
+            return [theme.color.accentSecondary, theme.color.accentSecondaryContrast];
+        }
+        try {
+            const own = Color_1.default.fromString(color);
+            return [own, own.getContrastColor()];
+        }
+        catch (_a) {
+            return [theme.color.accentPrimary, theme.color.accentPrimaryContrast];
+        }
+    }, [
+        color,
+        theme.color.accentPrimary,
+        theme.color.accentPrimaryContrast,
+        theme.color.accentSecondary,
+        theme.color.accentSecondaryContrast,
+    ]);
+    const context = react_1.default.useMemo(() => ({
+        activeStep,
+        orientation,
+        alternativeLabel: orientation === 'horizontal' && alternativeLabel,
+        color: resolvedColor,
+        contrastColor,
+    }), [activeStep, orientation, alternativeLabel, resolvedColor, contrastColor]);
+    const steps = react_1.default.Children.toArray(children).filter(react_1.default.isValidElement);
+    return (react_1.default.createElement(context_1.StepperContext.Provider, { value: context },
+        react_1.default.createElement(StyledStepper, Object.assign({ role: "list", "aria-orientation": orientation }, nativeProps, { "$orientation": orientation, "$alternativeLabel": context.alternativeLabel, ref: ref }), steps.map((step, index) => {
+            var _a;
+            return (react_1.default.createElement(context_1.StepIndexContext.Provider, { key: (_a = step.key) !== null && _a !== void 0 ? _a : index, value: { index, last: index === steps.length - 1 } }, step));
+        }))));
+};
+exports.default = react_1.default.forwardRef(Stepper);

package/Stepper/context.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import Color from '../Color';
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperContextValue = {
+    readonly activeStep: number;
+    readonly orientation: StepperOrientation;
+    readonly alternativeLabel: boolean;
+    readonly color: Color;
+    /**
+     * The plate of the current step: the contrast color of the theme for the accent
+     */
+    readonly contrastColor: Color;
+};
+export declare const StepperContext: React.Context<StepperContextValue | null>;
+/**
+ * The place of the step in the stepper: set by the stepper for every child
+ */
+export declare const StepIndexContext: React.Context<{
+    readonly index: number;
+    readonly last: boolean;
+}>;

package/Stepper/context.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepIndexContext = exports.StepperContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.StepperContext = react_1.default.createContext(null);
+/**
+ * The place of the step in the stepper: set by the stepper for every child
+ */
+exports.StepIndexContext = react_1.default.createContext({ index: 0, last: true });

package/Stepper/index.d.ts

@@ -0,0 +1,6 @@
+import Stepper from './Stepper';
+export { default as Step } from './Step';
+export type { StepperProps } from './Stepper';
+export type { StepProps, StepState } from './Step';
+export type { StepperOrientation } from './context';
+export default Stepper;

package/Stepper/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Step = void 0;
+const Stepper_1 = __importDefault(require("./Stepper"));
+var Step_1 = require("./Step");
+Object.defineProperty(exports, "Step", { enumerable: true, get: function () { return __importDefault(Step_1).default; } });
+exports.default = Stepper_1.default;

package/Surface/SurfaceSubheader.js

@@ -19,11 +19,12 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const tokens_1 = require("../ThemeProvider/tokens");
 const StyledHeader = styled_1.default.div `
   padding: ${({ $noPadding, theme }) => {
-    const { y, x } = (0, tokens_1.themePadding)(theme, 'container', 0.9);
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
     return $noPadding ? '0' : `calc(${y} / 2) ${x} 0 ${x}`;
 }};
-  font-size: 0.9em;
-  font-weight: 200;
+  /* the size of the text, the secondary color and Light: quieter than the text, but not small */
+  font-size: 1em;
+  font-weight: 300;
   color: ${({ theme }) => theme.color.textSecondary.toString()};
 `;
 const SurfaceSubheader = (props, ref) => {

package/Tabs/Tab.d.ts

@@ -4,11 +4,19 @@ export type TabProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'valu
      * The value of the tab. The panel with the same value is shown when the tab is selected
      */
     readonly value: string;
+    /**
+     * The counter after the label: the badge of the color of the tabs, grey for zero
+     */
+    readonly counter?: number;
 };
 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;
+    /**
+     * The counter after the label: the badge of the color of the tabs, grey for zero
+     */
+    readonly counter?: number;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Tabs/Tab.js

@@ -17,10 +17,70 @@ 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 Badge_1 = __importDefault(require("../Badge"));
 const context_1 = require("./context");
 const tokens_1 = require("../ThemeProvider/tokens");
+const underlineStyles = ({ theme, $color, $selected, $orientation, }) => $orientation === 'vertical'
+    ? (0, react_2.css) `
+        /* The indicator of the selected tab on the right edge of the list */
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0.3em;
+          bottom: 0.3em;
+          right: -1px;
+          width: 2px;
+          border-radius: 2px;
+          background-color: ${$color.toString()};
+          transform: scaleY(${$selected ? 1 : 0});
+          transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        &:hover:not(:disabled) {
+          background-color: ${theme.color.textPrimary.alpha(0.05).toString()};
+        }
+      `
+    : (0, react_2.css) `
+        /* The hover is the rounded background over the line, the line is under the text only */
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0.2em 0 0.3em 0;
+          z-index: -1;
+          border-radius: inherit;
+          transition: background-color 150ms ease-out;
+        }
+        &:hover:not(:disabled)::before {
+          background-color: ${theme.color.textPrimary.alpha(0.05).toString()};
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          left: var(--tab-x);
+          right: var(--tab-x);
+          bottom: 0;
+          height: 2px;
+          border-radius: 2px;
+          background-color: ${$color.toString()};
+          transform: scaleX(${$selected ? 1 : 0});
+          transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+        }
+      `;
+const segmentedStyles = ({ theme, $color, $selected }) => (0, react_2.css) `
+  &:hover:not(:disabled) {
+    background-color: ${$selected
+    ? $color.alpha(0.2).toString()
+    : theme.color.textPrimary.alpha(0.05).toString()};
+  }
+  ${$selected &&
+    (0, react_2.css) `
+    background-color: ${$color.alpha(0.14).toString()};
+  `}
+`;
 const StyledTab = styled_1.default.button `
+  --tab-x: ${({ $size }) => context_1.TAB_SIZES[$size].x};
   position: relative;
+  /* The own stacking context: the hover background lies under the text, over the panel */
+  isolation: isolate;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -28,18 +88,17 @@ const StyledTab = styled_1.default.button `
   flex-shrink: 0;
   box-sizing: border-box;
   margin: 0;
-  padding: ${({ theme }) => {
-    const { y, x } = (0, tokens_1.themePadding)(theme, 'item');
-    return `${y} ${x}`;
-}};
+  padding: ${({ $size }) => `${context_1.TAB_SIZES[$size].y} var(--tab-x)`};
   border: 0;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   background: none;
   font: inherit;
-  font-size: 0.9em;
-  font-weight: 500;
+  font-size: ${({ $size }) => context_1.TAB_SIZES[$size].fontSize};
+  /* light: the tabs are the navigation, not the headings */
+  font-weight: ${({ $selected }) => ($selected ? 500 : 400)};
   white-space: nowrap;
   cursor: pointer;
-  color: ${({ theme, $color, $selected }) => $selected ? $color.toString() : theme.color.textSecondary.toString()};
+  color: ${({ theme, $color, $selected }) => $selected ? $color.darken(20).toString() : theme.color.textSecondary.toString()};
   transition:
     color 150ms ease-out,
     background-color 150ms ease-out;
@@ -54,7 +113,7 @@ const StyledTab = styled_1.default.button `
     `}
 
   &:hover:not(:disabled) {
-    background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.05).toString()};
+    color: ${({ theme, $color, $selected }) => $selected ? $color.darken(20).toString() : theme.color.textPrimary.toString()};
   }
 
   &:focus-visible {
@@ -67,31 +126,11 @@ const StyledTab = styled_1.default.button `
     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});
-          `}
-  }
+  ${props => (props.$variant === 'segmented' ? segmentedStyles(props) : underlineStyles(props))}
 
   @media (prefers-reduced-motion: reduce) {
     &,
+    &::before,
     &::after {
       transition: none;
     }
@@ -99,7 +138,7 @@ const StyledTab = styled_1.default.button `
   ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
 `;
 const Tab = (props, ref) => {
-    const { value, children, onClick, disabled } = props, nativeProps = __rest(props, ["value", "children", "onClick", "disabled"]);
+    const { value, counter, children, onClick, disabled } = props, nativeProps = __rest(props, ["value", "counter", "children", "onClick", "disabled"]);
     const context = (0, context_1.useTabsContext)('Tab');
     const isSelected = context.value === value;
     const tabRef = react_1.default.useRef(null);
@@ -126,6 +165,10 @@ const Tab = (props, ref) => {
             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));
+    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, "$variant": context.variant, "$size": context.size, "$fullWidth": context.fullWidth, ref: tabRef }),
+        children,
+        typeof counter === 'number' && (
+        // soft: the pale background of the color — the counter does not argue with the label
+        react_1.default.createElement(Badge_1.default, { variant: "soft", color: counter > 0 ? context.color.toString() : 'default' }, String(counter)))));
 };
 exports.default = react_1.default.forwardRef(Tab);

package/Tabs/TabList.js

@@ -21,27 +21,46 @@ const context_1 = require("./context");
 const StyledList = styled_1.default.div `
   display: flex;
   box-sizing: border-box;
-  ${({ theme, $orientation }) => $orientation === 'vertical'
+  gap: 0.25em;
+  ${({ $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;
           }
         `}
+  ${({ theme, $orientation, $variant }) => $variant === 'segmented'
+    ? (0, react_2.css) `
+          /* The tray: the tabs lie in the pale rounded plate */
+          ${$orientation === 'horizontal' &&
+        (0, react_2.css) `
+            align-self: flex-start;
+            display: inline-flex;
+            max-width: 100%;
+          `}
+          padding: 0.25em;
+          border-radius: ${theme.shape.radiusFactor * 2.5}em;
+          background-color: ${theme.color.textPrimary.alpha(0.05).toString()};
+        `
+    : $orientation === 'vertical'
+        ? (0, react_2.css) `
+            border-right: 1px solid ${theme.color.textPrimary.alpha(0.1).toString()};
+          `
+        : (0, react_2.css) `
+            border-bottom: 1px solid ${theme.color.textPrimary.alpha(0.1).toString()};
+          `}
 `;
 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 { orientation, variant, 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,
@@ -99,6 +118,6 @@ const TabList = (props, ref) => {
             target.click();
         }
     };
-    return (react_1.default.createElement(StyledList, Object.assign({ role: "tablist", "aria-orientation": orientation }, nativeProps, { onKeyDown: handleKeyDown, "$orientation": orientation, ref: listRef }), children));
+    return (react_1.default.createElement(StyledList, Object.assign({ role: "tablist", "aria-orientation": orientation }, nativeProps, { onKeyDown: handleKeyDown, "$orientation": orientation, "$variant": variant, ref: listRef }), children));
 };
 exports.default = react_1.default.forwardRef(TabList);

package/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TabsOrientation } from './context';
+import { TabsOrientation, TabsSize, TabsVariant } from './context';
 export type TabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & {
     /**
      * The selected tab of the controlled tabs. Pass it together with `onChange`
@@ -32,6 +32,18 @@ export type TabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' |
      * Default: false
      */
     readonly fullWidth?: boolean;
+    /**
+     * `underline`: the line under the text of the selected tab — the tabs of the page, the list, the window.\
+     * `segmented`: the tabs in the pale tray, the selected one is the plate — the short switches
+     * («Day / Week / Month»)
+     * Default: `underline`
+     */
+    readonly variant?: TabsVariant;
+    /**
+     * The height of the tab at the text of 14px: `s` — 32px, `m` — 40px, `l` — 48px
+     * Default: `m`
+     */
+    readonly size?: TabsSize;
     /**
      * The color of the selected tab: the primary, default, secondary name of the colors or your specified color value
      * Default: `default`
@@ -70,6 +82,18 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
      * Default: false
      */
     readonly fullWidth?: boolean;
+    /**
+     * `underline`: the line under the text of the selected tab — the tabs of the page, the list, the window.\
+     * `segmented`: the tabs in the pale tray, the selected one is the plate — the short switches
+     * («Day / Week / Month»)
+     * Default: `underline`
+     */
+    readonly variant?: TabsVariant;
+    /**
+     * The height of the tab at the text of 14px: `s` — 32px, `m` — 40px, `l` — 48px
+     * Default: `m`
+     */
+    readonly size?: TabsSize;
     /**
      * The color of the selected tab: the primary, default, secondary name of the colors or your specified color value
      * Default: `default`