@via-profit/ui-kit 0.4.0 → 0.5.0

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;

package/Tabs/useTabsColor.js

@@ -0,0 +1,33 @@
+"use strict";
+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 react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+/**
+ * Resolves the `color` property of the Tabs to the Color instance
+ */
+const useTabsColor = (color) => {
+    const theme = (0, react_2.useTheme)();
+    return react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            default:
+                try {
+                    return Color_1.default.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+exports.default = useTabsColor;

package/TextArea/index.js

@@ -45,8 +45,9 @@ const TextFieldInputWrapper_1 = __importDefault(require("../TextField/TextFieldI
 const TextAreaInput_1 = __importDefault(require("../TextArea/TextAreaInput"));
 const TextFieldErrorText_1 = __importDefault(require("../TextField/TextFieldErrorText"));
 const TextAreaIconWrapper_1 = __importDefault(require("./TextAreaIconWrapper"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const TextArea = (props, ref) => {
-    const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
+    const _a = (0, useThemeProps_1.default)('TextArea', props), { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = _a, nativeInputProps = __rest(_a, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
     // useId is stable between server and client renders
     const generatedID = React.useId();

package/TextField/index.js

@@ -48,6 +48,7 @@ const TextFieldInputWrapper_1 = __importDefault(require("./TextFieldInputWrapper
 const TextFieldInput_1 = __importDefault(require("./TextFieldInput"));
 const TextFieldErrorText_1 = __importDefault(require("./TextFieldErrorText"));
 const TextFieldIconWrapper_1 = __importDefault(require("./TextFieldIconWrapper"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 __exportStar(require("./TextFieldContainer"), exports);
 __exportStar(require("./TextFieldLabel"), exports);
 __exportStar(require("./TextFieldLabelAsterisk"), exports);
@@ -65,7 +66,7 @@ const defailtOverrides = {
     InputWrapper: TextFieldInputWrapper_1.default,
 };
 const TextField = React.forwardRef((props, ref) => {
-    const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
+    const _a = (0, useThemeProps_1.default)('TextField', props), { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = _a, nativeInputProps = __rest(_a, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
     // useId is stable between server and client renders
     const generatedID = React.useId();

package/ThemeProvider/components.d.ts

@@ -0,0 +1,79 @@
+import type { AccordionProps, AccordionOverrides } from '../Accordion';
+import type { AvatarProps } from '../Avatar';
+import type { AvatarBaseOverrides } from '../Avatar/AvatarBase';
+import type { BadgeProps } from '../Badge';
+import type { BadgeBaseOverrides } from '../Badge/BadgeBase';
+import type { ButtonProps } from '../Button';
+import type { ButtonBaseOverrides } from '../Button/ButtonBase';
+import type { CalendarProps, CalendarOverrides } from '../Calendar/CalendarComponent';
+import type { CheckboxProps, CheckboxOverrides } from '../Checkbox';
+import type { HighlightedProps, HighlightedOverrides } from '../Highlighted';
+import type { MenuProps, MenuOverrides } from '../Menu/MenuContainer';
+import type { BaseModalProps, BaseModalOverrides } from '../Modal/BaseModal';
+import type { DialogProps } from '../Modal/Dialog';
+import type { DrawerProps, DrawerOverrides } from '../Modal/Drawer';
+import type { ConfirmBoxProps, ConfirmBoxOverrides } from '../Modal/ConfirmBox';
+import type { MessageBoxProps, MessageBoxOverrides } from '../Modal/MessageBox';
+import type { PopperProps, PopperOverrides } from '../Popper/Popper';
+import type { RadioProps, RadioOverrides } from '../Radio';
+import type { RadioGroupProps, RadioGroupOverrides } from '../RadioGroup';
+import type { SelectboxProps, SelectboxOverrides } from '../Selectbox';
+import type { SliderProps, SliderOverrides } from '../Slider';
+import type { SurfaceProps, SurfaceOverrides } from '../Surface';
+import type { SwiperProps, SwiperOverrides } from '../Swiper/Swiper';
+import type { SwitchProps, SwitchOverrides } from '../Switch';
+import type { TabsProps } from '../Tabs';
+import type { TextAreaProps, TextAreaOverrides } from '../TextArea';
+import type { TextFieldProps, TextFieldOverrides } from '../TextField';
+import type { ToastContainerProps, ToastOverrides } from '../Toast/ToastContainer';
+import type { TooltipProps, TooltipOverrides } from '../Tooltip';
+export interface ThemeComponentConfig<Props, Overrides = {}> {
+    /**
+     * The props the component gets when they are not passed explicitly
+     */
+    readonly defaultProps?: Partial<Omit<Props, 'overrides' | 'children'>>;
+    /**
+     * The parts that replace the standard ones, usually `styled(StandardPart)`.
+     * The `overrides` of the component instance win over them
+     */
+    readonly overrides?: Overrides;
+}
+/**
+ * The look of the components in the theme, by the component name
+ */
+export interface UIThemeComponents {
+    readonly Accordion?: ThemeComponentConfig<AccordionProps, AccordionOverrides>;
+    readonly Avatar?: ThemeComponentConfig<AvatarProps, AvatarBaseOverrides>;
+    readonly Badge?: ThemeComponentConfig<BadgeProps, BadgeBaseOverrides>;
+    readonly Button?: ThemeComponentConfig<ButtonProps, ButtonBaseOverrides>;
+    readonly Calendar?: ThemeComponentConfig<CalendarProps<any>, CalendarOverrides>;
+    readonly Checkbox?: ThemeComponentConfig<CheckboxProps, CheckboxOverrides>;
+    readonly Highlighted?: ThemeComponentConfig<HighlightedProps, HighlightedOverrides>;
+    readonly Menu?: ThemeComponentConfig<MenuProps<any, any>, MenuOverrides>;
+    /**
+     * The parts of the base modal window. Dialog, Drawer, ConfirmBox and MessageBox pass their own parts:
+     * set them in the config of these components
+     */
+    readonly Modal?: ThemeComponentConfig<BaseModalProps, BaseModalOverrides>;
+    readonly Dialog?: ThemeComponentConfig<DialogProps, BaseModalOverrides>;
+    readonly Drawer?: ThemeComponentConfig<DrawerProps, DrawerOverrides>;
+    readonly ConfirmBox?: ThemeComponentConfig<ConfirmBoxProps, ConfirmBoxOverrides>;
+    readonly MessageBox?: ThemeComponentConfig<MessageBoxProps, MessageBoxOverrides>;
+    readonly Popper?: ThemeComponentConfig<PopperProps, PopperOverrides>;
+    readonly Radio?: ThemeComponentConfig<RadioProps, RadioOverrides>;
+    readonly RadioGroup?: ThemeComponentConfig<RadioGroupProps, RadioGroupOverrides>;
+    readonly Selectbox?: ThemeComponentConfig<SelectboxProps<any, any>, SelectboxOverrides>;
+    readonly Slider?: ThemeComponentConfig<SliderProps<any>, SliderOverrides>;
+    readonly Surface?: ThemeComponentConfig<SurfaceProps, SurfaceOverrides>;
+    readonly Swiper?: ThemeComponentConfig<SwiperProps, SwiperOverrides>;
+    readonly Switch?: ThemeComponentConfig<SwitchProps, SwitchOverrides>;
+    /**
+     * The parts of the tabs are rendered by the user, so the theme sets only the `defaultProps`
+     */
+    readonly Tabs?: ThemeComponentConfig<TabsProps>;
+    readonly TextArea?: ThemeComponentConfig<TextAreaProps, TextAreaOverrides>;
+    readonly TextField?: ThemeComponentConfig<TextFieldProps, TextFieldOverrides>;
+    readonly Toast?: ThemeComponentConfig<ToastContainerProps, ToastOverrides>;
+    readonly Tooltip?: ThemeComponentConfig<TooltipProps, TooltipOverrides>;
+}
+export type ThemeComponentName = keyof UIThemeComponents;

package/ThemeProvider/components.js

@@ -0,0 +1,3 @@
+"use strict";
+/* eslint-disable import/max-dependencies */
+Object.defineProperty(exports, "__esModule", { value: true });

package/ThemeProvider/createTheme.js

@@ -17,8 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
 const Color_1 = __importDefault(require("../Color"));
 const createTheme = overrides => {
-    const _a = overrides || {}, { isDark, fontSize, zIndex, color, shape, spacing } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape", "spacing"]);
-    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, fontSize: Object.assign({ small: 14, normal: 16, medium: 18, large: 20 }, fontSize), zIndex: Object.assign({ header: 8, modal: 10 }, zIndex), color: {}, shape: Object.assign({ radiusFactor: 0.3 }, shape), spacing: Object.assign({ xs: '0.25em', sm: '0.5em', md: '1em', lg: '1.5em', xl: '2em' }, spacing) });
+    const _a = overrides || {}, { isDark, fontSize, zIndex, color, shape, spacing, components, typography, focusRing, elevation } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape", "spacing", "components", "typography", "focusRing", "elevation"]);
+    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, components: components || {}, 
+        // Empty by default: the components keep their own fonts, focus and shadows
+        typography: Object.assign({}, typography), focusRing: Object.assign({}, focusRing), elevation: Object.assign({}, elevation), fontSize: Object.assign({ small: 14, normal: 16, medium: 18, large: 20 }, fontSize), zIndex: Object.assign({ header: 8, modal: 10 }, zIndex), color: {}, shape: Object.assign({ radiusFactor: 0.3 }, shape), spacing: Object.assign({ xs: '0.25em', sm: '0.5em', md: '1em', lg: '1.5em', xl: '2em' }, spacing) });
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     /* @ts-ignore */
     const defaultColors = {