@via-profit/ui-kit 0.1.0-rc.44 → 0.1.0-rc.45

package/Autocomplete/AutocompleteContainer.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
 import { Value, OnRequestClose, GetOptionSelected } from '../Menu';
+import { TextFieldProps } from '../TextField';
+import type { AnchorPos } from '../Popper';
 import type { MenuItemCommonProps } from '../Menu/MenuItem';
-export type AutocompleteProps<T, Multiple extends boolean | undefined = undefined> = {
-    readonly value: Value<T, Multiple> | null;
+export interface AutocompleteProps<T, Multiple extends boolean | undefined = undefined> {
+    readonly items: readonly T[];
+    readonly value: Value<T, Multiple>;
     /**
      * Array of items. If will be array of objects or array of strings
      */
-    readonly items: T[];
     readonly multiple?: Multiple;
     /**
      * Menu open state\
@@ -17,9 +19,35 @@ export type AutocompleteProps<T, Multiple extends boolean | undefined = undefine
      * Loading indicator visiblility\
      * If `true` then visible, otherwise - hidden
      */
+    /**
+     * Anchor position\
+     * \
+     * Default: `auto-start-end`
+     */
+    readonly anchorPos?: AnchorPos;
+    /**
+     * Text field loading state\
+     * If `true` then text field has been contained the loading indicator, otherwise - nop
+     */
     readonly isLoading?: boolean;
+    /**
+     * Should the autocomplete element be cleared when blur and if no element is selected
+     */
     readonly clearIfNotSelected?: boolean;
+    /**
+     * items render function
+     */
     readonly children: Children<T>;
+    /**
+     * Field placeholder
+     */
+    readonly placeholder?: string;
+    /**
+     * Field label text or element
+     */
+    readonly label?: TextFieldProps['label'];
+    readonly error?: TextFieldProps['error'];
+    readonly errorText?: TextFieldProps['errorText'];
     readonly filterItems?: FilterItems<T>;
     readonly onChange?: OnChange<T, Multiple>;
     readonly selectedItemToString: ItemToString<T, Multiple>;
@@ -27,14 +55,14 @@ export type AutocompleteProps<T, Multiple extends boolean | undefined = undefine
     readonly onRequestClose?: OnRequestClose;
     readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
     readonly onRequestOpen?: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement, Element>) => void;
-};
+}
 export type Children<T> = (data: {
     item: T;
     index: number;
     inputValue: string;
 }, itemProps: MenuItemCommonProps) => React.ReactNode;
-export type ItemToString<T, Multiple extends boolean | undefined = undefined> = (item: Value<T, Multiple>) => string;
-export type OnChange<T, Multiple extends boolean | undefined = undefined> = (item: Value<T, Multiple> | null) => void;
+export type ItemToString<T, Multiple extends boolean | undefined = undefined> = (item: Multiple extends undefined ? T : readonly T[]) => string;
+export type OnChange<T, Multiple extends boolean | undefined = undefined> = (item: Value<T, Multiple>) => void;
 export type FilterItems<T> = (items: readonly T[], data: {
     readonly query: string;
     readonly inputValue: string;

package/Autocomplete/AutocompleteContainer.js

@@ -34,7 +34,7 @@ const Spinner_1 = __importDefault(require("../LoadingIndicator/Spinner"));
 const IconClear_1 = __importDefault(require("./IconClear"));
 const context_1 = __importStar(require("./context"));
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, clearIfNotSelected = true, filterItems, children, onChange, selectedItemToString, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, } = props;
+    const { items, value, multiple, isOpen = false, isLoading = false, clearIfNotSelected = true, anchorPos = 'auto-start-end', placeholder, label, error, errorText, filterItems, children, onChange, selectedItemToString, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, } = props;
     const menuRef = react_1.default.useRef(null);
     const inputRef = react_1.default.useRef(null);
     const isFocusedRef = react_1.default.useRef(false);
@@ -42,7 +42,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
     const { currentOpen, filteredItems, inputValue, currentValue, anchorElement, currentLoading } = state;
     const clear = react_1.default.useCallback(() => {
         if (onChange) {
-            onChange(null);
+            onChange((multiple ? [] : null));
         }
         dispatch((0, context_1.actionSetPartial)({
             filteredItems: items,
@@ -53,7 +53,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             var _a;
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }, 15);
-    }, [dispatch, onChange, items]);
+    }, [dispatch, onChange, items, multiple]);
     /**
      * API
      */
@@ -120,22 +120,14 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         if (value === currentValue) {
             return;
         }
-        if (multiple) {
-            if (Array.isArray(value)) {
-                dispatch((0, context_1.actionSetPartial)({
-                    currentValue: value,
-                    inputValue: value === null ? inputValue : selectedItemToString(value),
-                }));
-            }
-        }
-        if (!multiple) {
-            if (!Array.isArray(value)) {
-                dispatch((0, context_1.actionSetPartial)({
-                    currentValue: value,
-                    inputValue: value === null ? inputValue : selectedItemToString(value),
-                }));
-            }
-        }
+        dispatch((0, context_1.actionSetPartial)({
+            currentValue: value,
+            inputValue: multiple
+                ? ''
+                : value === null
+                    ? inputValue
+                    : selectedItemToString(value),
+        }));
     }, [value, multiple, currentValue, inputValue, dispatch, selectedItemToString]);
     react_1.default.useEffect(() => {
         if (currentOpen && menuRef.current) {
@@ -152,7 +144,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         dispatch((0, context_1.actionSetPartial)({ currentOpen: isOpen, currentLoading: isLoading, filteredItems: items }));
     }, [isOpen, isLoading, items, dispatch]);
     return (react_1.default.createElement("div", null,
-        react_1.default.useMemo(() => (react_1.default.createElement(TextField_1.default, { endIcon: react_1.default.createElement(Button_1.default, { iconOnly: true, onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null)), onKeyDown: inputKeydownEvent, ref: el => {
+        react_1.default.useMemo(() => (react_1.default.createElement(TextField_1.default, { placeholder: placeholder, label: label, error: error, errorText: errorText, endIcon: react_1.default.createElement(Button_1.default, { iconOnly: true, onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null)), onKeyDown: inputKeydownEvent, ref: el => {
                 if (anchorElement !== el) {
                     dispatch((0, context_1.actionSetPartial)({ anchorElement: el }));
                 }
@@ -160,7 +152,11 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 isFocusedRef.current = false;
                 if (clearIfNotSelected) {
                     dispatch((0, context_1.actionSetPartial)({
-                        inputValue: value !== null ? selectedItemToString(value) : '',
+                        inputValue: multiple
+                            ? ''
+                            : value !== null
+                                ? selectedItemToString(value)
+                                : '',
                     }));
                 }
             }, onFocus: event => {
@@ -184,6 +180,11 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                     filteredItems: newItems,
                 }));
             } })), [
+            placeholder,
+            label,
+            multiple,
+            error,
+            errorText,
             currentLoading,
             inputKeydownEvent,
             inputValue,
@@ -198,15 +199,10 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             filterItems,
             items,
         ]),
-        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, anchorPos: "left-bottom-right", multiple: multiple, items: filteredItems, value: currentValue, isOpen: currentOpen && filteredItems.length > 0, autofocus: false, anchorElement: anchorElement, closeOutsideClick: true, getOptionSelected: getOptionSelected, onSelectItem: item => {
+        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, anchorPos: anchorPos, multiple: multiple, items: filteredItems, value: currentValue, isOpen: currentOpen && filteredItems.length > 0, autofocus: false, anchorElement: anchorElement, closeOutsideClick: true, getOptionSelected: getOptionSelected, onSelectItem: item => {
                 if (typeof onChange === 'function') {
                     onChange(item);
                 }
-                if (!multiple) {
-                    dispatch((0, context_1.actionSetPartial)({
-                        inputValue: selectedItemToString(item),
-                    }));
-                }
             }, closeOnSelect: multiple ? false : true, onRequestClose: evt => {
                 if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
                     onRequestClose(evt);
@@ -218,12 +214,11 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             filteredItems,
             inputValue,
             multiple,
+            anchorPos,
             children,
-            dispatch,
             onRequestClose,
             onChange,
             getOptionSelected,
-            selectedItemToString,
         ])));
 });
 Autocomplete.displayName = 'Autocomplete';

package/Badge/BadgeBase.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { BadgeIconWrapperProps } from './BadgeIconWrapper';
+import { BadgeTextWrapperProps } from './BadgeTextWrapper';
+import { BadgeContainerProps } from './BadgeContainer';
+import { BadgeDeleteButtonProps } from './BadgeDeleteButton';
+type BadgeNativeProps = React.HTMLAttributes<HTMLSpanElement>;
+export interface BadgeBaseProps extends Omit<BadgeNativeProps, 'color'> {
+    /**
+     * Icon or another JSX element placed before Badge label\
+     * Example:
+     * ```tsx
+     * <Badge startIcon={<MyIconElement />}>
+     *   Label
+     * </Badge>
+     * ```
+     */
+    readonly startIcon?: JSX.Element;
+    /**
+     * Badge style variant\
+     * Allowed variants: `standard` or `outlined`\
+     * \
+     * **Default**: `standard`
+     */
+    readonly variant?: 'standard' | 'outlined';
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: BadgeContainerProps['color'];
+    readonly onDelete?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: BadgeBaseOverrides;
+}
+export interface BadgeBaseOverrides {
+    /**
+     * Element container
+     */
+    readonly Container?: React.ForwardRefExoticComponent<BadgeContainerProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * icon wrapper
+     */
+    readonly IconWrapper?: React.ForwardRefExoticComponent<BadgeIconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * text wrapper
+     */
+    readonly TextWrapper?: React.ForwardRefExoticComponent<BadgeTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * Icon delete
+     */
+    readonly ButtonDelete?: React.ForwardRefExoticComponent<BadgeDeleteButtonProps & React.RefAttributes<HTMLButtonElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<BadgeBaseProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Badge/BadgeBase.js

@@ -0,0 +1,33 @@
+"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 BadgeIconWrapper_1 = __importDefault(require("./BadgeIconWrapper"));
+const BadgeTextWrapper_1 = __importDefault(require("./BadgeTextWrapper"));
+const BadgeContainer_1 = __importDefault(require("./BadgeContainer"));
+const BadgeDeleteButton_1 = __importDefault(require("./BadgeDeleteButton"));
+const BadgeBase = (props, ref) => {
+    const { children, startIcon, color, variant, overrides, onDelete } = props, nativeProps = __rest(props, ["children", "startIcon", "color", "variant", "overrides", "onDelete"]);
+    const overridesMap = react_1.default.useMemo(() => (Object.assign({ TextWrapper: BadgeTextWrapper_1.default,
+        IconWrapper: BadgeIconWrapper_1.default,
+        Container: BadgeContainer_1.default,
+        ButtonDelete: BadgeDeleteButton_1.default }, overrides)), [overrides]);
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { color: color, ref: ref }),
+        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, null, startIcon)),
+        react_1.default.createElement(overridesMap.TextWrapper, null, children),
+        typeof onDelete === 'function' && (react_1.default.createElement(overridesMap.ButtonDelete, { variant: variant, onClick: onDelete, color: color }))));
+};
+exports.default = react_1.default.forwardRef(BadgeBase);

package/Badge/BadgeContainer.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type BadgeContainerProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: string | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Badge/BadgeContainer.js

@@ -0,0 +1,42 @@
+"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 StyledBadge = styled_1.default.span `
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2.5}em;
+  font-size: 1em;
+  border-width: 0;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-width: 0.14em;
+  transition: all 180ms ease-out 0s;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  color: ${({ color, theme }) => {
+    switch (true) {
+        case typeof color === 'undefined':
+        default:
+            return theme.color.textPrimary.toString();
+    }
+}};
+`;
+const BadgeContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledBadge, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(BadgeContainer);

package/Badge/BadgeDeleteButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type BadgeDeleteButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children'> & {
+    readonly color?: 'primary' | 'secondaary' | 'default' | string;
+    readonly variant?: 'standard' | 'outlined';
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {
+    readonly color?: string | undefined;
+    readonly variant?: "standard" | "outlined" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Badge/BadgeDeleteButton.js

@@ -0,0 +1,92 @@
+"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 ButtonBase_1 = __importDefault(require("../Button/ButtonBase"));
+const Color_1 = __importDefault(require("../Color"));
+const StyledButton = (0, styled_1.default)(ButtonBase_1.default) `
+  display: flex;
+  padding: 0.3em;
+  font-size: 1em;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.1em;
+  margin-right: 0.14em;
+  background-color: ${({ $background }) => $background.toString()};
+  color: ${({ $color }) => $color.toString()};
+  position: relative;
+`;
+const BadgeDeleteButton = (props, ref) => {
+    const { color = 'default', variant = 'standard' } = props, nativeProps = __rest(props, ["color", "variant"]);
+    const theme = (0, react_2.useTheme)();
+    const { $color, $background } = react_1.default.useMemo(() => {
+        switch (true) {
+            case variant === 'standard' && color === 'default':
+                return {
+                    $color: theme.color.textPrimary,
+                    $background: theme.color.surface.darken(20),
+                };
+            case variant === 'standard' && color === 'primary':
+                return {
+                    $color: theme.color.accentPrimaryContrast,
+                    $background: theme.color.accentPrimary,
+                };
+            case variant === 'standard' && color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondaryContrast,
+                    $background: theme.color.accentSecondary,
+                };
+            case variant === 'outlined' && color === 'default':
+                return {
+                    $color: theme.color.textPrimary,
+                    $background: theme.color.surface,
+                };
+            case variant === 'outlined' && color === 'primary':
+                return {
+                    $color: theme.color.accentPrimary.darken(10),
+                    $background: new Color_1.default('rgba(0,0,0,0)'),
+                };
+            case variant === 'outlined' && color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondary.darken(10),
+                    $background: new Color_1.default('rgba(0,0,0,0)'),
+                };
+            case variant === 'outlined' && typeof color === 'string':
+                return {
+                    $color: new Color_1.default(color),
+                    $background: new Color_1.default(color).alpha(0),
+                };
+            case variant === 'standard' && typeof color === 'string':
+                return {
+                    $color: new Color_1.default(color).contrast(theme.color.textPrimary) > 5
+                        ? theme.color.textPrimary
+                        : theme.color.surface,
+                    $background: new Color_1.default(color),
+                };
+            default:
+                return {
+                    $color: theme.color.textPrimary,
+                    $background: theme.color.textPrimary,
+                };
+        }
+    }, [color, variant, theme.color]);
+    return (react_1.default.createElement(StyledButton, Object.assign({}, nativeProps, { "$color": $color, "$background": $background, ref: ref }),
+        react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" },
+            react_1.default.createElement("path", { d: "m256 0c-141.11 0-256 114.89-256 256s114.89 256 256 256 256-114.89 256-256-114.89-256-256-256zm0 39.385c119.81 0 216.62 96.805 216.62 216.62s-96.805 216.62-216.62 216.62-216.62-96.805-216.62-216.62 96.805-216.62 216.62-216.62zm-78.769 118.15a19.692 19.692 0 0 0-5.0961 0.67068 19.692 19.692 0 0 0-8.8293 5.0961 19.692 19.692 0 0 0 0 27.851l64.844 64.844-64.844 64.844a19.692 19.692 0 0 0 0 27.851 19.692 19.692 0 0 0 27.851 0l64.844-64.844 64.844 64.844a19.692 19.692 0 0 0 27.851 0 19.692 19.692 0 0 0 0-27.851l-64.844-64.844 64.844-64.844a19.692 19.692 0 0 0 0-27.851 19.692 19.692 0 0 0-27.851 0l-64.844 64.844-64.844-64.844a19.692 19.692 0 0 0-13.925-5.7669z", fill: "currentColor" }))));
+};
+exports.default = react_1.default.forwardRef(BadgeDeleteButton);

package/Badge/BadgeIconWrapper.d.ts

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

package/Badge/BadgeIconWrapper.js

@@ -0,0 +1,29 @@
+"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 Wrapper = styled_1.default.span `
+  display: flex;
+  padding: 0.3em 0 0.3em 0.3em;
+  align-items: center;
+  justify-content: center;
+`;
+const BadgeIconWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Wrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(BadgeIconWrapper);

package/Badge/BadgeOutlined.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BadgeBaseProps } from './BadgeBase';
+export type BadgeOutlinedProps = BadgeBaseProps;
+declare const _default: React.ForwardRefExoticComponent<BadgeBaseProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Badge/BadgeOutlined.js

@@ -0,0 +1,69 @@
+"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 BadgeBase_1 = __importDefault(require("./BadgeBase"));
+const StyledOutlinedBadge = (0, styled_1.default)(BadgeBase_1.default) `
+  color: ${({ $color }) => $color.darken(30).toString()};
+  border-color: ${({ $color }) => $color.toString()};
+  background-color: transparent;
+  border-style: solid;
+  border-width: 0.14em;
+  &:hover {
+    background-color: ${({ $color }) => $color.darken(20).alpha(0.1).toString()};
+  }
+  &:focus-visible {
+    outline-style: solid;
+    outline-width: 0.14em;
+    outline-color: ${({ $color, theme }) => $color.rgbString() === theme.color.accentPrimary.rgbString()
+    ? theme.color.textPrimary.toString()
+    : theme.color.accentPrimary.toString()};
+  }
+`;
+const BadgeOutlined = (props, ref) => {
+    const { children, color } = props, restProps = __rest(props, ["children", "color"]);
+    const theme = (0, react_2.useTheme)();
+    const $color = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+                return theme.color.textPrimary.lighten(30);
+            case typeof color === 'string': {
+                let c = theme.color.textPrimary;
+                try {
+                    if (color) {
+                        c = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return c;
+            }
+            default:
+                return theme.color.textPrimary;
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(StyledOutlinedBadge, Object.assign({ "$color": $color, color: color, variant: "outlined" }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(BadgeOutlined);

package/Badge/BadgeStandard.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BadgeBaseProps } from './BadgeBase';
+export type BadgeStandardProps = BadgeBaseProps;
+declare const _default: React.ForwardRefExoticComponent<BadgeBaseProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Badge/BadgeStandard.js

@@ -0,0 +1,89 @@
+"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 BadgeBase_1 = __importDefault(require("./BadgeBase"));
+const StyledStandardBadge = (0, styled_1.default)(BadgeBase_1.default) `
+  color: ${({ $color }) => $color.toString()};
+  background-color: ${({ $background }) => $background.toString()};
+  ${({ $background }) => {
+    switch (true) {
+        case $background.luminance() > 0.49:
+            return $background.darken(40).alpha(0.8).toString();
+        default:
+            return $background.darken(20).alpha(0.5).toString();
+    }
+}};
+  &:hover {
+    background-color: ${({ $background }) => $background.darken(30).toString()};
+  }
+  &:focus-visible {
+    outline-color: ${({ theme, $background }) => $background.rgbString() === theme.color.accentPrimary.rgbString()
+    ? theme.color.textPrimary.toString()
+    : theme.color.accentPrimary.toString()};
+  }
+`;
+const BadgeStandard = (props, ref) => {
+    const { children, color } = props, restProps = __rest(props, ["children", "color"]);
+    const theme = (0, react_2.useTheme)();
+    const { $background, $color } = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return {
+                    $color: theme.color.accentPrimaryContrast,
+                    $background: theme.color.accentPrimary,
+                };
+            case color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondaryContrast,
+                    $background: theme.color.accentSecondary,
+                };
+            case typeof color === 'undefined':
+            case color === 'default':
+                return {
+                    $background: theme.color.surface.darken(10),
+                    $color: theme.color.textPrimary,
+                };
+            case typeof color === 'string': {
+                let $background = theme.color.surface;
+                try {
+                    if (color) {
+                        $background = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $background,
+                    $color: $background.contrast(theme.color.textPrimary) > 5
+                        ? theme.color.textPrimary
+                        : theme.color.surface,
+                };
+            }
+            default:
+                return {
+                    $background: theme.color.surface,
+                    $color: theme.color.textPrimary,
+                };
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(StyledStandardBadge, Object.assign({ variant: "standard", "$color": $color, "$background": $background, color: color }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(BadgeStandard);

package/Badge/BadgeTextWrapper.d.ts

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