@via-profit/ui-kit 0.3.0 → 0.5.0

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/TextAreaIconWrapper.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TextFieldIconWrapperProps } from '../TextField/TextFieldIconWrapper';
 export type TextAreaIconWrapperProps = TextFieldIconWrapperProps;
 declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLDivElement> & {
-    readonly position: "start" | "end";
+    readonly position: "end" | "start";
     readonly error?: boolean | undefined;
     readonly focused?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/TextArea/TextAreaInput.js

@@ -44,6 +44,8 @@ const TextareaNative = styled_1.default.textarea `
   resize: none;
   padding: 1em 1.2em;
   font-size: 1em;
+  /* Form controls do not inherit the font by default (textarea is monospace) */
+  font-family: inherit;
   background: none;
   border-radius: inherit;
   margin: 0;

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();
@@ -85,7 +86,7 @@ const TextArea = (props, ref) => {
             typeof requiredAsterisk !== 'undefined' &&
                 requiredAsterisk !== null &&
                 requiredAsterisk !== false && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
-        React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth },
+        React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth, disabled: nativeInputProps.disabled },
             hasStartIcon && (React.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
             React.createElement(overridesMap.Input, Object.assign({}, nativeInputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),
             hasEndIcon && (React.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))),

package/TextField/TextFieldInput.js

@@ -44,6 +44,8 @@ const react_1 = require("@emotion/react");
 const Input = styled_1.default.input `
   padding: 1em 1.2em;
   font-size: 1em;
+  /* Form controls do not inherit the font by default (textarea is monospace) */
+  font-family: inherit;
   background: none;
   border-radius: inherit;
   margin: 0;

package/TextField/TextFieldInputWrapper.d.ts

@@ -4,11 +4,13 @@ export type TextFieldInputWrapperProps = React.HTMLAttributes<HTMLDivElement> &
     readonly fullWidth?: boolean;
     readonly readOnly?: boolean;
     readonly focused?: boolean;
+    readonly disabled?: boolean;
 };
 export declare const TextFieldInputWrapper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly error?: boolean | undefined;
     readonly fullWidth?: boolean | undefined;
     readonly readOnly?: boolean | undefined;
     readonly focused?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default TextFieldInputWrapper;

package/TextField/TextFieldInputWrapper.js

@@ -69,10 +69,20 @@ const Wrapper = styled_1.default.div `
         border-color: ${props.theme.color.error.lighten(0.6).toString()};
       }
     `}
+  ${props => props.$disabled &&
+    (0, react_1.css) `
+      color: ${props.theme.color.textPrimary.alpha(0.4).toString()};
+      cursor: not-allowed;
+
+      & input,
+      & textarea {
+        cursor: not-allowed;
+      }
+    `}
 `;
 exports.TextFieldInputWrapper = React.forwardRef((props, ref) => {
-    const { focused, error, readOnly, fullWidth, children } = props, nativeProps = __rest(props, ["focused", "error", "readOnly", "fullWidth", "children"]);
-    return (React.createElement(Wrapper, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, "$readOnly": readOnly, "$fullWidth": Boolean(fullWidth), ref: ref }), children));
+    const { focused, error, readOnly, fullWidth, disabled, children } = props, nativeProps = __rest(props, ["focused", "error", "readOnly", "fullWidth", "disabled", "children"]);
+    return (React.createElement(Wrapper, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, "$readOnly": readOnly, "$fullWidth": Boolean(fullWidth), "$disabled": disabled, ref: ref }), children));
 });
 exports.TextFieldInputWrapper.displayName = 'TextFieldInputWrapper';
 exports.default = exports.TextFieldInputWrapper;

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();
@@ -107,7 +108,7 @@ const TextField = React.forwardRef((props, ref) => {
     const renderIcon = React.useCallback((position, icon) => (React.createElement(overridesMap.IconWrapper, { position: position }, icon)), [overridesMap]);
     return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
         renderLabel(),
-        React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth },
+        React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth, disabled: nativeInputProps.disabled },
             hasStartIcon && renderIcon('start', startIcon),
             React.createElement(overridesMap.Input, Object.assign({}, nativeInputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),
             hasEndIcon && renderIcon('end', endIcon)),

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 } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape"]);
-    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) });
+    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 = {
@@ -41,7 +43,6 @@ const createTheme = overrides => {
     Object.entries(Object.assign(Object.assign({}, defaultColors), color)).forEach(([colorName, colorValue]) => {
         theme.color[colorName] = Color_1.default.fromString(colorValue);
     });
-    theme.color.test = Color_1.default.fromString('red');
     return theme;
 };
 exports.createTheme = createTheme;

package/ThemeProvider/index.d.ts

@@ -1,14 +1,23 @@
 import React from 'react';
 import { useTheme } from '@emotion/react';
 import type Color from '../Color';
+import type { UIThemeComponents } from './components';
 export { useTheme };
 export * from './createTheme';
-export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color'>> & {
+export * from './components';
+export { default as useThemeProps } from './useThemeProps';
+export * from './tokens';
+export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color' | 'spacing' | 'components' | 'typography' | 'focusRing' | 'elevation'>> & {
+    readonly typography: UIThemeOverrideTypography;
+    readonly focusRing: UIThemeOverrideFocusRing;
+    readonly elevation: UIThemeOverrideElevation;
+    readonly components: UIThemeComponents;
     readonly isDark: boolean;
     readonly fontSize: Record<keyof UIThemeOverrideFontSize, number>;
     readonly zIndex: Required<UIThemeOverrideZIndex>;
     readonly color: Record<keyof UIThemeOverrideColor, Color>;
     readonly shape: Required<UIThemeOverrideShape>;
+    readonly spacing: Required<UIThemeOverrideSpacing>;
 };
 export interface UIThemeOverrideColor {
     readonly backgroundPrimary?: string;
@@ -27,6 +36,43 @@ export interface UIThemeOverrideColor {
     readonly success?: string;
     readonly successContrast?: string;
 }
+/**
+ * The font of the theme. The components inherit the font of the page:
+ * apply `theme.typography.fontFamily` to the `body` of your application
+ */
+export interface UIThemeOverrideTypography {
+    readonly fontFamily?: string;
+}
+/**
+ * The outline of the focused element. Without these values every component draws its own focus
+ */
+export interface UIThemeOverrideFocusRing {
+    /**
+     * e.g. `2px`
+     */
+    readonly width?: string;
+    /**
+     * The gap between the element and the outline, e.g. `1px`
+     */
+    readonly offset?: string;
+    /**
+     * Any CSS color. Without it the outline has the color of the component
+     */
+    readonly color?: string;
+}
+/**
+ * The shadows. Without these values every component has its own shadow
+ */
+export interface UIThemeOverrideElevation {
+    /**
+     * The elements over the page: the menus, the calendar of the date picker, the toasts
+     */
+    readonly popup?: string;
+    /**
+     * The cards and the panels on the page: Surface, Accordion, Table
+     */
+    readonly surface?: string;
+}
 export interface UIThemeOverrideZIndex {
     readonly header?: number;
     readonly modal?: number;
@@ -34,6 +80,18 @@ export interface UIThemeOverrideZIndex {
 export interface UIThemeOverrideShape {
     readonly radiusFactor?: 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
 }
+/**
+ * The spacing scale: the gaps between the elements (`<Stack>`, `<Grid>`) and the paddings.
+ * Any CSS length, `em` is recommended: the spacing grows together with the font size
+ */
+export interface UIThemeOverrideSpacing {
+    readonly xs?: string;
+    readonly sm?: string;
+    readonly md?: string;
+    readonly lg?: string;
+    readonly xl?: string;
+}
+export type ThemeSpacing = keyof UIThemeOverrideSpacing;
 export interface UIThemeOverrideFontSize {
     readonly small?: number;
     readonly normal?: number;
@@ -41,10 +99,22 @@ export interface UIThemeOverrideFontSize {
     readonly large?: number;
 }
 export interface UIThemeOverrides {
-    readonly isDark: boolean;
+    /**
+     * **Default:** `false`
+     */
+    readonly isDark?: boolean;
+    /**
+     * The look of the components: `defaultProps`, the `styles` added to the parts
+     * and the `overrides` that replace the parts. The props of the component instance win over the theme
+     */
+    readonly components?: UIThemeComponents;
     readonly fontSize?: UIThemeOverrideFontSize;
+    readonly typography?: UIThemeOverrideTypography;
+    readonly focusRing?: UIThemeOverrideFocusRing;
+    readonly elevation?: UIThemeOverrideElevation;
     readonly zIndex?: UIThemeOverrideZIndex;
     readonly shape?: UIThemeOverrideShape;
+    readonly spacing?: UIThemeOverrideSpacing;
     readonly color?: UIThemeOverrideColor;
 }
 declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/ThemeProvider/index.js

@@ -17,11 +17,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = void 0;
+exports.useThemeProps = exports.useTheme = void 0;
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@emotion/react");
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return react_2.useTheme; } });
 __exportStar(require("./createTheme"), exports);
+__exportStar(require("./components"), exports);
+var useThemeProps_1 = require("./useThemeProps");
+Object.defineProperty(exports, "useThemeProps", { enumerable: true, get: function () { return __importDefault(useThemeProps_1).default; } });
+__exportStar(require("./tokens"), exports);
 const ThemeProvider = props => {
     const { children, theme } = props;
     return react_1.default.createElement(react_2.ThemeProvider, { theme: theme }, children);

package/ThemeProvider/tokens.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from '@emotion/react';
+/**
+ * True if the theme sets the focus ring
+ */
+export declare const hasThemeFocusRing: (theme: Theme) => boolean;
+/**
+ * The focus ring of the theme for the `selector` of the focused element.
+ * Put it at the end of the styles: it replaces the own focus of the component.
+ * Without `focusRing` in the theme it returns nothing and the component keeps its own focus
+ */
+export declare const themeFocusRing: (theme: Theme, selector?: string) => import("@emotion/utils").SerializedStyles | undefined;
+/**
+ * The shadow of the level: the `elevation` of the theme, or the own shadow of the component
+ */
+export declare const elevation: (theme: Theme, level: 'popup' | 'surface', own: string) => string;

package/ThemeProvider/tokens.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.elevation = exports.themeFocusRing = exports.hasThemeFocusRing = void 0;
+const react_1 = require("@emotion/react");
+/**
+ * True if the theme sets the focus ring
+ */
+const hasThemeFocusRing = (theme) => typeof theme.focusRing.width !== 'undefined' || typeof theme.focusRing.color !== 'undefined';
+exports.hasThemeFocusRing = hasThemeFocusRing;
+/**
+ * The focus ring of the theme for the `selector` of the focused element.
+ * Put it at the end of the styles: it replaces the own focus of the component.
+ * Without `focusRing` in the theme it returns nothing and the component keeps its own focus
+ */
+const themeFocusRing = (theme, selector = '&:focus-visible') => {
+    if (!(0, exports.hasThemeFocusRing)(theme)) {
+        return undefined;
+    }
+    const { width = '2px', offset = '1px', color = theme.color.accentPrimary.toString(), } = theme.focusRing;
+    return (0, react_1.css) `
+    ${selector} {
+      outline: ${width} solid ${color};
+      outline-offset: ${offset};
+    }
+  `;
+};
+exports.themeFocusRing = themeFocusRing;
+/**
+ * The shadow of the level: the `elevation` of the theme, or the own shadow of the component
+ */
+const elevation = (theme, level, own) => { var _a; return (_a = theme.elevation[level]) !== null && _a !== void 0 ? _a : own; };
+exports.elevation = elevation;

package/ThemeProvider/useThemeProps.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeComponentName } from './components';
+/**
+ * Adds the `defaultProps` and the `overrides` of the theme to the props of the component.
+ * The props passed explicitly win over `defaultProps`, the `overrides` of the instance win over the theme ones
+ */
+declare const useThemeProps: <P extends object>(name: ThemeComponentName, props: P) => P;
+export default useThemeProps;

package/ThemeProvider/useThemeProps.js

@@ -0,0 +1,34 @@
+"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");
+/**
+ * Adds the `defaultProps` and the `overrides` of the theme to the props of the component.
+ * The props passed explicitly win over `defaultProps`, the `overrides` of the instance win over the theme ones
+ */
+const useThemeProps = (name, props) => {
+    var _a;
+    const theme = (0, react_2.useTheme)();
+    const config = (_a = theme.components) === null || _a === void 0 ? void 0 : _a[name];
+    const defaultProps = config === null || config === void 0 ? void 0 : config.defaultProps;
+    const themeOverrides = config === null || config === void 0 ? void 0 : config.overrides;
+    const { overrides } = props;
+    // A stable object: the components memoize the map of their parts by `overrides`
+    const mergedOverrides = react_1.default.useMemo(() => (themeOverrides ? Object.assign(Object.assign({}, themeOverrides), overrides) : overrides), [themeOverrides, overrides]);
+    if (!defaultProps && !themeOverrides) {
+        return props;
+    }
+    const merged = Object.assign(Object.assign({}, props), { overrides: mergedOverrides });
+    if (defaultProps) {
+        Object.entries(defaultProps).forEach(([key, value]) => {
+            if (typeof merged[key] === 'undefined') {
+                merged[key] = value;
+            }
+        });
+    }
+    return merged;
+};
+exports.default = useThemeProps;

package/Toast/ToastAction.d.ts

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

package/Toast/ToastAction.js

@@ -0,0 +1,32 @@
+"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 styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
+const StyledButton = styled_1.default.button `
+  margin: 0;
+  padding: 0.35em 0.7em;
+  border: 0;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  background-color: ${({ theme }) => theme.color.accentPrimary.alpha(0.1).toString()};
+  color: ${({ theme }) => theme.color.accentPrimary.toString()};
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 150ms ease-out;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.accentPrimary.alpha(0.18).toString()};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 1px;
+  }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
+`;
+const ToastAction = (props, ref) => react_1.default.createElement(StyledButton, Object.assign({ type: "button" }, props, { ref: ref }));
+exports.default = react_1.default.forwardRef(ToastAction);

package/Toast/ToastCard.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ToastPosition, ToastType } from './store';
+export type ToastCardProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly type: ToastType;
+    readonly position: ToastPosition;
+    /**
+     * The toast plays the exit animation
+     */
+    readonly isClosing: boolean;
+};
+export declare const TOAST_ANIMATION_MS = 200;
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly type: ToastType;
+    readonly position: ToastPosition;
+    /**
+     * The toast plays the exit animation
+     */
+    readonly isClosing: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Toast/ToastCard.js

@@ -0,0 +1,86 @@
+"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 });
+exports.TOAST_ANIMATION_MS = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
+exports.TOAST_ANIMATION_MS = 200;
+/**
+ * The toasts slide from the edge of the screen they are attached to
+ */
+const getOffset = (position) => {
+    if (position.endsWith('right')) {
+        return 'translateX(110%)';
+    }
+    if (position.endsWith('left')) {
+        return 'translateX(-110%)';
+    }
+    return position.startsWith('top') ? 'translateY(-100%)' : 'translateY(100%)';
+};
+const StyledCard = styled_1.default.div `
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75em;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 100%;
+  min-width: 14em;
+  padding: 0.75em 1em;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.5}em;
+  border: 1px solid ${({ theme }) => theme.color.textPrimary.alpha(0.08).toString()};
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup', `0 0.5em 1.5em rgba(0, 0, 0, ${theme.isDark ? 0.5 : 0.14})`)};
+  font-size: 0.875em;
+  line-height: 1.4;
+  pointer-events: auto;
+  overflow-wrap: anywhere;
+  ${({ $position, $isClosing }) => {
+    const hidden = (0, react_2.css) `
+      opacity: 0;
+      transform: ${getOffset($position)};
+    `;
+    const shown = (0, react_2.css) `
+      opacity: 1;
+      transform: none;
+    `;
+    const enter = (0, react_2.keyframes) `from { ${hidden.styles} } to { ${shown.styles} }`;
+    const exit = (0, react_2.keyframes) `from { ${shown.styles} } to { ${hidden.styles} }`;
+    return (0, react_2.css) `
+      animation: ${$isClosing ? exit : enter} ${exports.TOAST_ANIMATION_MS}ms cubic-bezier(0.2, 0, 0, 1)
+        forwards;
+    `;
+}}
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-name: none;
+    opacity: ${({ $isClosing }) => ($isClosing ? 0 : 1)};
+  }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
+`;
+const ToastCard = (props, ref) => {
+    const { children, type, position, isClosing } = props, nativeProps = __rest(props, ["children", "type", "position", "isClosing"]);
+    return (react_1.default.createElement(StyledCard, Object.assign({ "data-toast-type": type }, nativeProps, { "$position": position, "$isClosing": isClosing, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ToastCard);

package/Toast/ToastCloseButton.d.ts

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