@via-profit/ui-kit 0.1.0-rc.7 → 0.1.0-rc.9

package/Autocomplete/index.d.ts

@@ -30,11 +30,11 @@ export type AutocompleteRef<T> = Pick<MenuRef<T>, 'scrollToItem' | 'scrollTo' |
     readonly blur: () => void;
     readonly clearInput: () => void;
 };
-declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: Pick<MenuProps<T, Multiple>, "zIndex" | "value" | "isOpen" | "estimatedItemSize" | "overscanCount" | "items" | "endThreshold" | "multiple" | "getOptionSelected" | "onEndReached" | "onSelectItem" | "renderItem" | "onRequestClose"> & {
+declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: Pick<MenuProps<T, Multiple>, "zIndex" | "value" | "multiple" | "overscanCount" | "isOpen" | "estimatedItemSize" | "items" | "endThreshold" | "getOptionSelected" | "onEndReached" | "onSelectItem" | "renderItem" | "onRequestClose"> & {
     readonly containerRef?: React.Ref<HTMLDivElement> | undefined;
     readonly itemToString: ItemToString<T, Multiple>;
     readonly renderInput: (params: RenderInputProps<T, Multiple>) => React.ReactNode;
-    readonly onRequestOpen: (event?: MouseEvent | KeyboardEvent | FocusEvent | React.FocusEvent<Element, Element> | React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent> | undefined) => void;
+    readonly onRequestOpen: (event?: MouseEvent | FocusEvent | KeyboardEvent | React.FocusEvent<Element, Element> | React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent> | undefined) => void;
     readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
     readonly filterItems?: ((items: readonly T[], data: {
         readonly query: string;

package/Button/ButtonAccent.d.ts

@@ -1,10 +1,5 @@
 import React from 'react';
-export type ButtonAccentProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    readonly startIcon?: JSX.Element;
-    readonly endIcon?: JSX.Element;
-};
-declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    readonly startIcon?: JSX.Element | undefined;
-    readonly endIcon?: JSX.Element | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+import { ButtonBaseProps } from './ButtonBase';
+export type ButtonAccentProps = ButtonBaseProps;
+declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonAccent.js

@@ -16,33 +16,32 @@ var __importDefault = (this && this.__importDefault) || function (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("./ButtonBase"));
 const Button = (0, styled_1.default)(ButtonBase_1.default) `
-  color: ${({ theme }) => theme.colors.accentPrimaryContrast.toString()};
-  background-color: ${({ theme }) => theme.colors.accentPrimary.toString()};
-  box-shadow: 0 2px 12px
-    ${({ theme }) => theme.colors.accentPrimary.darken(0.6).alpha(0.3).toString()};
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.accentPrimary.darken(0.1).toString()};
-  }
-  &:active {
-    background-color: ${({ theme }) => theme.colors.accentPrimary.darken(0.2).toString()};
-  }
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary.darken(0.3).toString()};
-  }
-`;
-const StartIconWrapper = styled_1.default.span `
-  margin-right: 0.8em;
-`;
-const EndIconWrapper = styled_1.default.span `
-  margin-left: 0.8em;
+  color: ${({ theme, disabled }) => disabled
+    ? theme.colors.textPrimary.alpha(0.4).toString()
+    : theme.colors.accentPrimaryContrast.toString()};
+  background-color: ${({ theme, disabled }) => disabled
+    ? theme.colors.backgroundGrey.darken(30).toString()
+    : theme.colors.accentPrimary.toString()};
+
+  ${({ disabled, theme }) => !disabled &&
+    (0, react_2.css) `
+      box-shadow: 0 2px 12px ${theme.colors.accentPrimary.darken(60).alpha(0.3).toString()};
+      &:hover {
+        background-color: ${theme.colors.accentPrimary.darken(20).toString()};
+      }
+      &:active {
+        background-color: ${theme.colors.accentPrimary.darken(30).toString()};
+      }
+      &:focus-visible {
+        outline: 2px solid ${theme.colors.accentPrimary.darken(20).toString()};
+      }
+    `};
 `;
 const ButtonAccent = (props, ref) => {
-    const { children, startIcon, endIcon } = props, otherProps = __rest(props, ["children", "startIcon", "endIcon"]);
-    return (react_1.default.createElement(Button, Object.assign({}, otherProps, { ref: ref }),
-        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(StartIconWrapper, null, startIcon)),
-        children,
-        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(EndIconWrapper, null, endIcon))));
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Button, Object.assign({}, restProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ButtonAccent);

package/Button/ButtonBase.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-export type ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly startIcon?: JSX.Element;
+    readonly endIcon?: JSX.Element;
+}
 declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonBase.js

@@ -16,24 +16,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const StartIconWrapper_1 = __importDefault(require("./components/StartIconWrapper"));
+const EndIconWrapper_1 = __importDefault(require("./components/EndIconWrapper"));
+const TextWrapper_1 = __importDefault(require("./components/TextWrapper"));
 const Button = styled_1.default.button `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   padding: 0.8em 1em;
   font-size: 0.8rem;
-  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   font-size: 1em;
   border: 0;
   outline: transparent;
   transition: all 180ms ease-out 0s;
   background: none;
   color: currentColor;
-`;
-const ButtonText = styled_1.default.span `
-  font-size: 0.86em;
+  display: inline-flex;
+  align-items: center;
 `;
 const ButtonBase = (props, ref) => {
-    const { children } = props, otherProps = __rest(props, ["children"]);
+    const { children, startIcon, endIcon } = props, otherProps = __rest(props, ["children", "startIcon", "endIcon"]);
     return (react_1.default.createElement(Button, Object.assign({}, otherProps, { ref: ref }),
-        react_1.default.createElement(ButtonText, null, children)));
+        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(StartIconWrapper_1.default, null, startIcon)),
+        react_1.default.createElement(TextWrapper_1.default, null, children),
+        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(EndIconWrapper_1.default, null, endIcon))));
 };
 exports.default = react_1.default.forwardRef(ButtonBase);

package/Button/ButtonStandard.d.ts

@@ -1,19 +1,8 @@
 import React from 'react';
+import { ButtonBaseProps } from './ButtonBase';
 /**
  * Standard
  */
-export type ButtonStandardProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    /**
-     * Starticon
-     */
-    readonly startIcon?: JSX.Element;
-    readonly endIcon?: JSX.Element;
-};
-declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    /**
-     * Starticon
-     */
-    readonly startIcon?: JSX.Element | undefined;
-    readonly endIcon?: JSX.Element | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+export type ButtonStandardProps = ButtonBaseProps;
+declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Button/ButtonStandard.js

@@ -16,35 +16,34 @@ var __importDefault = (this && this.__importDefault) || function (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("./ButtonBase"));
-const Button = (0, styled_1.default)(ButtonBase_1.default) `
-  color: ${({ theme }) => theme.colors.textPrimary.toString()};
-  background-color: ${({ theme }) => theme.isDark
-    ? theme.colors.backgroundPrimary.lighten(20).toString()
-    : theme.colors.backgroundPrimary.toString()};
-  box-shadow: 0 2px 12px
-    ${({ theme }) => theme.colors.backgroundPrimary.darken(40).alpha(0.6).toString()};
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(20).toString()};
-  }
-  &:active {
-    background-color: ${({ theme }) => theme.colors.backgroundPrimary.darken(40).toString()};
-  }
-  &:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.colors.accentPrimary.toString()};
-  }
-`;
-const StartIconWrapper = styled_1.default.span `
-  margin-right: 0.8em;
-`;
-const EndIconWrapper = styled_1.default.span `
-  margin-left: 0.8em;
+const StyledButtonBase = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ theme, disabled }) => disabled
+    ? theme.colors.textPrimary.alpha(0.4).toString()
+    : theme.colors.textPrimary.toString()};
+  background-color: ${({ theme, disabled }) => disabled
+    ? theme.colors.backgroundGrey.darken(10).toString()
+    : theme.isDark
+        ? theme.colors.backgroundPrimary.lighten(20).toString()
+        : theme.colors.backgroundPrimary.toString()};
+
+  ${({ disabled, theme }) => !disabled &&
+    (0, react_2.css) `
+      box-shadow: 0 2px 12px ${theme.colors.backgroundPrimary.darken(40).alpha(0.6).toString()};
+      &:hover {
+        background-color: ${theme.colors.backgroundPrimary.darken(20).toString()};
+      }
+      &:active {
+        background-color: ${theme.colors.backgroundPrimary.darken(40).toString()};
+      }
+      &:focus-visible {
+        outline: 2px solid ${theme.colors.accentPrimary.toString()};
+      }
+    `}
 `;
 const ButtonStandard = (props, ref) => {
-    const { children, startIcon, endIcon } = props, otherProps = __rest(props, ["children", "startIcon", "endIcon"]);
-    return (react_1.default.createElement(Button, Object.assign({}, otherProps, { ref: ref }),
-        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(StartIconWrapper, null, startIcon)),
-        children,
-        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(EndIconWrapper, null, endIcon))));
+    const { children, disabled } = props, restProps = __rest(props, ["children", "disabled"]);
+    return (react_1.default.createElement(StyledButtonBase, Object.assign({ disabled: disabled }, restProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ButtonStandard);

package/Button/components/EndIconWrapper.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const EndIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export default EndIconWrapper;

package/Button/components/EndIconWrapper.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = __importDefault(require("@emotion/styled"));
+const EndIconWrapper = styled_1.default.span `
+  margin-left: 0.8em;
+`;
+exports.default = EndIconWrapper;

package/Button/components/StartIconWrapper.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const StartIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export default StartIconWrapper;

package/Button/components/StartIconWrapper.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StartIconWrapper = styled_1.default.span `
+  margin-right: 0.8em;
+`;
+exports.default = StartIconWrapper;

package/Button/components/TextWrapper.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const TextWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export default TextWrapper;

package/Button/components/TextWrapper.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextWrapper = styled_1.default.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+`;
+exports.default = TextWrapper;

package/Button/index.d.ts

@@ -5,5 +5,5 @@ interface BaseProps {
     readonly variant?: 'standard' | 'accent';
 }
 export type ButtonProps = (ButtonStandardProps | ButtonAccentProps) & BaseProps;
-declare const _default: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const _default: React.ForwardRefExoticComponent<import("./ButtonBase").ButtonBaseProps & BaseProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/SelectBox/index.d.ts

@@ -26,11 +26,11 @@ export type SelectBoxProps<T, Multiple extends boolean | undefined = undefined>
     readonly containerRef?: React.Ref<SelectoBoxContainerRef>;
     readonly notSelectedLabel?: React.ReactNode;
 };
-declare const _default: <T, Multiple extends boolean | undefined = false>(props: Pick<MenuProps<T, Multiple>, "zIndex" | "value" | "isOpen" | "estimatedItemSize" | "overscanCount" | "items" | "endThreshold" | "multiple" | "getOptionSelected" | "onEndReached" | "onSelectItem" | "renderItem" | "onRequestClose"> & {
+declare const _default: <T, Multiple extends boolean | undefined = false>(props: Pick<MenuProps<T, Multiple>, "zIndex" | "value" | "multiple" | "overscanCount" | "isOpen" | "estimatedItemSize" | "items" | "endThreshold" | "getOptionSelected" | "onEndReached" | "onSelectItem" | "renderItem" | "onRequestClose"> & {
     readonly fullWidth?: boolean | undefined;
     readonly itemToString: ItemToString<T, Multiple>;
     readonly renderInput?: ((params: RenderInputProps<T, Multiple>) => React.ReactNode) | undefined;
-    readonly onRequestOpen: (event?: MouseEvent | KeyboardEvent | FocusEvent | React.FocusEvent<Element, Element> | React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent> | undefined) => void;
+    readonly onRequestOpen: (event?: MouseEvent | FocusEvent | KeyboardEvent | React.FocusEvent<Element, Element> | React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent> | undefined) => void;
 } & {
     readonly containerRef?: React.Ref<HTMLButtonElement> | undefined;
     readonly notSelectedLabel?: React.ReactNode;

package/ThemeProvider/createTheme.d.ts

@@ -1,35 +1,3 @@
-import { ColorInterface } from '../color';
-export type CreateTheme = (overrides?: UIThemeOverrides) => UITheme;
-export interface UITheme {
-    readonly isDark: boolean;
-    readonly fontSize: Record<'small' | 'normal' | 'medium' | 'large', number>;
-    readonly zIndex: {
-        readonly header: number;
-        readonly mainDrawer: number;
-        readonly modal: number;
-    };
-    readonly colors: {
-        readonly backgroundPrimary: ColorInterface;
-        readonly backgroundSecondary: ColorInterface;
-        readonly backgroundGrey: ColorInterface;
-        readonly textPrimary: ColorInterface;
-        readonly textSecondary: ColorInterface;
-        readonly accentPrimary: ColorInterface;
-        readonly accentPrimaryContrast: ColorInterface;
-        readonly accentSecondary: ColorInterface;
-        readonly accentSecondaryContrast: ColorInterface;
-        readonly error: ColorInterface;
-    };
-    readonly shape: {
-        readonly radiusFactor: 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
-    };
-}
-export interface UIThemeOverrides {
-    readonly isDark?: UITheme['isDark'];
-    readonly fontSize?: UITheme['fontSize'];
-    readonly zIndex?: UITheme['zIndex'];
-    readonly colors?: Partial<Record<keyof UITheme['colors'], string>>;
-    readonly shape?: UITheme['shape'];
-}
+import type { UITheme, UIThemeOverrides } from '@via-profit/ui-kit';
 declare const createTheme: (overrides?: UIThemeOverrides) => UITheme;
 export default createTheme;

package/ThemeProvider/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { UITheme } from './createTheme';
+import type { UITheme, UIThemeOverrides } from '@via-profit/ui-kit';
+export { UITheme, UIThemeOverrides };
 export interface ThemeProviderProps {
     readonly children: React.ReactNode | readonly React.ReactNode[];
     readonly theme: UITheme;

package/color/Color.d.ts

@@ -1,23 +1,4 @@
-export interface ColorInterface {
-    parseColor(value: string | Color): ParsedColor;
-    shade(decimal: number): this;
-    alpha(decimal: number): this;
-    lighten(decimal: number): this;
-    darken(decimal: number): this;
-    getHextByWebColor(value: string): string;
-    rgb(): ParsedColor;
-    rgbString(): string;
-    hexString(): string;
-    toString(): string;
-    luminance(): number;
-    contrast(rgb2: string | Color): number;
-}
-export type ParsedColor = {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-};
+import type { ColorInterface, ParsedColor } from '@via-profit/ui-kit/color';
 declare class Color implements ColorInterface {
     #private;
     constructor(value: string | Color);

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.7",
+  "version": "0.1.0-rc.9",
   "description": "UI Kit",
-  "main": "index.js",
   "repository": {
     "type": "git",
     "url": "git@github.com:via-profit/ui-kit.git"

package/index.d.ts

@@ -1,4 +0,0 @@
-import Button from './Button';
-import { UITheme } from './ThemeProvider/createTheme';
-export * from './Button';
-export { Button, UITheme };

package/index.js

@@ -1,23 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const Button_1 = __importDefault(require("./Button"));
-exports.Button = Button_1.default;
-__exportStar(require("./Button"), exports);