@via-profit/ui-kit 0.9.1 → 0.10.0

package/esm/Stepper/Stepper.js

@@ -0,0 +1,69 @@
+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;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css, useTheme } from '@emotion/react';
+import Color from '../Color';
+import { StepIndexContext, StepperContext } from './context';
+const StyledStepper = styled.div `
+  display: flex;
+  ${({ $orientation, $alternativeLabel }) => $orientation === 'vertical'
+    ? css `
+          flex-direction: column;
+        `
+    : 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 = useTheme();
+    const [resolvedColor, contrastColor] = React.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.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.useMemo(() => ({
+        activeStep,
+        orientation,
+        alternativeLabel: orientation === 'horizontal' && alternativeLabel,
+        color: resolvedColor,
+        contrastColor,
+    }), [activeStep, orientation, alternativeLabel, resolvedColor, contrastColor]);
+    const steps = React.Children.toArray(children).filter(React.isValidElement);
+    return (React.createElement(StepperContext.Provider, { value: context },
+        React.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.createElement(StepIndexContext.Provider, { key: (_a = step.key) !== null && _a !== void 0 ? _a : index, value: { index, last: index === steps.length - 1 } }, step));
+        }))));
+};
+export default React.forwardRef(Stepper);

package/esm/Stepper/context.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export const StepperContext = React.createContext(null);
+/**
+ * The place of the step in the stepper: set by the stepper for every child
+ */
+export const StepIndexContext = React.createContext({ index: 0, last: true });

package/esm/Stepper/index.js

@@ -0,0 +1,3 @@
+import Stepper from './Stepper';
+export { default as Step } from './Step';
+export default Stepper;

package/esm/Surface/SurfaceSubheader.js

@@ -14,11 +14,12 @@ import styled from '@emotion/styled';
 import { themePadding } from '../ThemeProvider/tokens';
 const StyledHeader = styled.div `
   padding: ${({ $noPadding, theme }) => {
-    const { y, x } = themePadding(theme, 'container', 0.9);
+    const { y, x } = 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/esm/Tabs/Tab.js

@@ -12,10 +12,70 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import { useTabsContext } from './context';
-import { themeFocusRing, themePadding } from '../ThemeProvider/tokens';
+import Badge from '../Badge';
+import { TAB_SIZES, useTabsContext } from './context';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+const underlineStyles = ({ theme, $color, $selected, $orientation, }) => $orientation === 'vertical'
+    ? 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()};
+        }
+      `
+    : 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 }) => css `
+  &:hover:not(:disabled) {
+    background-color: ${$selected
+    ? $color.alpha(0.2).toString()
+    : theme.color.textPrimary.alpha(0.05).toString()};
+  }
+  ${$selected &&
+    css `
+    background-color: ${$color.alpha(0.14).toString()};
+  `}
+`;
 const StyledTab = styled.button `
+  --tab-x: ${({ $size }) => 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;
@@ -23,18 +83,17 @@ const StyledTab = styled.button `
   flex-shrink: 0;
   box-sizing: border-box;
   margin: 0;
-  padding: ${({ theme }) => {
-    const { y, x } = themePadding(theme, 'item');
-    return `${y} ${x}`;
-}};
+  padding: ${({ $size }) => `${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 }) => 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;
@@ -49,7 +108,7 @@ const StyledTab = styled.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 {
@@ -62,31 +121,11 @@ const StyledTab = styled.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'
-    ? css `
-            top: 0;
-            bottom: 0;
-            right: -1px;
-            width: 2px;
-            transform: scaleY(${$selected ? 1 : 0});
-          `
-    : 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;
     }
@@ -94,7 +133,7 @@ const StyledTab = styled.button `
   ${({ theme }) => 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 = useTabsContext('Tab');
     const isSelected = context.value === value;
     const tabRef = React.useRef(null);
@@ -121,6 +160,10 @@ const Tab = (props, ref) => {
             context.select(value, event);
         }
     };
-    return (React.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.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.createElement(Badge, { variant: "soft", color: counter > 0 ? context.color.toString() : 'default' }, String(counter)))));
 };
 export default React.forwardRef(Tab);

package/esm/Tabs/TabList.js

@@ -16,27 +16,46 @@ import { useTabsContext } from './context';
 const StyledList = styled.div `
   display: flex;
   box-sizing: border-box;
-  ${({ theme, $orientation }) => $orientation === 'vertical'
+  gap: 0.25em;
+  ${({ $orientation }) => $orientation === 'vertical'
     ? css `
           flex-direction: column;
           flex-shrink: 0;
-          border-right: 1px solid ${theme.color.textPrimary.alpha(0.12).toString()};
         `
     : 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'
+    ? css `
+          /* The tray: the tabs lie in the pale rounded plate */
+          ${$orientation === 'horizontal' &&
+        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'
+        ? css `
+            border-right: 1px solid ${theme.color.textPrimary.alpha(0.1).toString()};
+          `
+        : 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 } = useTabsContext('TabList');
+    const { orientation, variant, activation, value, isUncontrolledEmpty, selectInitial } = useTabsContext('TabList');
     const listRef = React.useRef(null);
     React.useImperativeHandle(ref, () => listRef.current);
     // The tab order needs one focusable tab. Normally it is the selected one,
@@ -94,6 +113,6 @@ const TabList = (props, ref) => {
             target.click();
         }
     };
-    return (React.createElement(StyledList, Object.assign({ role: "tablist", "aria-orientation": orientation }, nativeProps, { onKeyDown: handleKeyDown, "$orientation": orientation, ref: listRef }), children));
+    return (React.createElement(StyledList, Object.assign({ role: "tablist", "aria-orientation": orientation }, nativeProps, { onKeyDown: handleKeyDown, "$orientation": orientation, "$variant": variant, ref: listRef }), children));
 };
 export default React.forwardRef(TabList);

package/esm/Tabs/Tabs.js

@@ -22,7 +22,7 @@ const StyledTabs = styled.div `
  */
 const escapeId = (value) => value.replace(/[^\w-]/g, char => `_${char.charCodeAt(0).toString(16)}`);
 const Tabs = (props, ref) => {
-    const { value, defaultValue, onChange, orientation = 'horizontal', activation = 'auto', fullWidth = false, color, children } = props, nativeProps = __rest(props, ["value", "defaultValue", "onChange", "orientation", "activation", "fullWidth", "color", "children"]);
+    const { value, defaultValue, onChange, orientation = 'horizontal', activation = 'auto', fullWidth = false, variant = 'underline', size = 'm', color, children } = props, nativeProps = __rest(props, ["value", "defaultValue", "onChange", "orientation", "activation", "fullWidth", "variant", "size", "color", "children"]);
     const isControlled = typeof value !== 'undefined';
     const [internalValue, setInternalValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
     const currentValue = isControlled ? value : internalValue;
@@ -55,6 +55,8 @@ const Tabs = (props, ref) => {
         orientation,
         activation,
         fullWidth,
+        variant,
+        size,
         color: $color,
         getTabId: tabValue => `${baseId}-tab-${escapeId(tabValue)}`,
         getPanelId: tabValue => `${baseId}-panel-${escapeId(tabValue)}`,
@@ -66,6 +68,8 @@ const Tabs = (props, ref) => {
         orientation,
         activation,
         fullWidth,
+        variant,
+        size,
         $color,
         baseId,
     ]);

package/esm/Tabs/context.js

@@ -1,4 +1,12 @@
 import React from 'react';
+/**
+ * The size of the text and the paddings of the tab, in the `em` of the tabs
+ */
+export const TAB_SIZES = {
+    s: { fontSize: '0.857em', y: '0.5em', x: '0.7em' },
+    m: { fontSize: '0.929em', y: '0.75em', x: '0.9em' },
+    l: { fontSize: '1em', y: '1em', x: '1.05em' },
+};
 export const TabsContext = React.createContext(null);
 export const useTabsContext = (component) => {
     const context = React.useContext(TabsContext);

package/esm/ThemeProvider/tokens.js

@@ -26,6 +26,7 @@ export const themeFocusRing = (theme, selector = '&:focus-visible') => {
  */
 export const defaultElevation = (theme) => ({
     popup: `0 8px 24px ${theme.color.surface.darken(50).alpha(0.6).toString()}`,
+    modal: `0 16px 48px -12px ${theme.color.surface.darken(100).alpha(0.5).toString()}`,
     surface: `0 8px 32px -13px ${theme.color.surface.darken(100).alpha(0.4).toString()}`,
     control: `0 1px 3px ${theme.color.surface.darken(100).alpha(0.35).toString()}`,
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -735,6 +735,11 @@
       "import": "./esm/Menu/MenuList.js",
       "require": "./Menu/MenuList.js"
     },
+    "./Menu/MenuSeparator": {
+      "types": "./Menu/MenuSeparator.d.ts",
+      "import": "./esm/Menu/MenuSeparator.js",
+      "require": "./Menu/MenuSeparator.js"
+    },
     "./Menu/context": {
       "types": "./Menu/context.d.ts",
       "import": "./esm/Menu/context.js",
@@ -1255,6 +1260,31 @@
       "import": "./esm/Stack/index.js",
       "require": "./Stack/index.js"
     },
+    "./Stepper/Step": {
+      "types": "./Stepper/Step.d.ts",
+      "import": "./esm/Stepper/Step.js",
+      "require": "./Stepper/Step.js"
+    },
+    "./Stepper/Stepper": {
+      "types": "./Stepper/Stepper.d.ts",
+      "import": "./esm/Stepper/Stepper.js",
+      "require": "./Stepper/Stepper.js"
+    },
+    "./Stepper/context": {
+      "types": "./Stepper/context.d.ts",
+      "import": "./esm/Stepper/context.js",
+      "require": "./Stepper/context.js"
+    },
+    "./Stepper/index": {
+      "types": "./Stepper/index.d.ts",
+      "import": "./esm/Stepper/index.js",
+      "require": "./Stepper/index.js"
+    },
+    "./Stepper": {
+      "types": "./Stepper/index.d.ts",
+      "import": "./esm/Stepper/index.js",
+      "require": "./Stepper/index.js"
+    },
     "./Surface/SurfaceContainer": {
       "types": "./Surface/SurfaceContainer.d.ts",
       "import": "./esm/Surface/SurfaceContainer.js",