@via-profit/ui-kit 0.1.0-rc.76 → 0.1.0-rc.78

package/Switch/SwitchContainer.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type SwitchContainerProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /**
+     * This property changes position of switch and its label.
+     * Default: `end`
+     */
+    readonly labelPosition?: 'start' | 'end' | 'top' | 'bottom';
+    /**
+     * if `true` switch state can not be changed
+     * Default: false;
+     */
+    readonly disabled?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /**
+     * This property changes position of switch and its label.
+     * Default: `end`
+     */
+    readonly labelPosition?: "bottom" | "top" | "start" | "end" | undefined;
+    /**
+     * if `true` switch state can not be changed
+     * Default: false;
+     */
+    readonly disabled?: boolean | undefined;
+} & React.RefAttributes<HTMLLabelElement>>;
+export default _default;

package/Switch/SwitchContainer.js

@@ -0,0 +1,52 @@
+"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 StyledContainer = styled_1.default.label `
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  font-size: 1em;
+  padding-right: 1em;
+  display: inline-flex;
+  align-items: center;
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+  ${({ labelPosition }) => {
+    let direction = 'row';
+    switch (labelPosition) {
+        case 'bottom':
+            direction = 'column';
+            break;
+        case 'start':
+            direction = 'row-reverse';
+            break;
+        case 'top':
+            direction = 'column-reverse';
+            break;
+        default:
+            //do nothing
+            break;
+    }
+    return (0, react_2.css) `
+      flex-direction: ${direction};
+    `;
+}}
+`;
+const SwitchContainer = (props, ref) => {
+    const { children, labelPosition, disabled } = props, nativeProps = __rest(props, ["children", "labelPosition", "disabled"]);
+    return (react_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { labelPosition: labelPosition, disabled: disabled, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SwitchContainer);

package/Switch/SwitchDot.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SwitchProps } from './index';
+export type SwitchDotProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * This prop allows you to provide switch state and control it. This property overrides internal component state
+     */
+    readonly checked: boolean;
+    readonly color?: SwitchProps['color'];
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * This prop allows you to provide switch state and control it. This property overrides internal component state
+     */
+    readonly checked: boolean;
+    readonly color?: string | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Switch/SwitchDot.js

@@ -0,0 +1,145 @@
+"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 ToggleContainer = styled_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: transparent;
+  vertical-align: middle;
+  text-decoration: none;
+  padding: 0.8rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  color: rgb(255, 255, 255);
+  transition:
+    left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform: ${({ checked }) => (checked ? 'translateX(1.5rem)' : 'translateX(0)')};
+`;
+const Dot = styled_1.default.span `
+  width: 1.4rem;
+  height: 1.4rem;
+  border-radius: 50%;
+  box-shadow:
+    rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
+    rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
+    rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+  background-color: ${({ $color, checked, theme }) => {
+    switch (true) {
+        case checked:
+            return $color ? $color.toString() : theme.color.accentPrimary.toString();
+        default:
+            return theme.isDark ? theme.color.textPrimary.toString() : theme.color.surface.toString();
+    }
+}};
+  &:before {
+    content: '';
+    position: absolute;
+    width: 1.4rem;
+    height: 1.4rem;
+    border-radius: 50%;
+    transition: all 0.3s ease-out;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    background-color: ${({ $color, checked, theme }) => {
+    switch (true) {
+        case checked:
+            return $color
+                ? $color.alpha(0.2).toString()
+                : theme.color.accentPrimary.alpha(0.2).toString();
+        default:
+            return theme.isDark
+                ? theme.color.textPrimary.alpha(0.2).toString()
+                : theme.color.surface.alpha(0.2).toString();
+    }
+}};
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    width: 1.4rem;
+    height: 1.4rem;
+    border-radius: 50%;
+    transition: all 0.3s ease-out;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    background-color: ${({ $color, checked, theme }) => {
+    switch (true) {
+        case checked:
+            return $color
+                ? $color.alpha(0.1).toString()
+                : theme.color.accentPrimary.alpha(0.1).toString();
+        default:
+            return theme.isDark
+                ? theme.color.textPrimary.alpha(0.1).toString()
+                : theme.color.surface.alpha(0.1).toString();
+    }
+}};
+  }
+`;
+const SwitchDot = (props, ref) => {
+    const { children, color, checked } = props, nativeProps = __rest(props, ["children", "color", "checked"]);
+    const theme = (0, react_2.useTheme)();
+    const { $color } = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return {
+                    $color: theme.color.accentPrimary,
+                };
+            case color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondary,
+                };
+            case typeof color === 'undefined':
+            case color === 'default':
+                return {
+                    $color: theme.color.accentPrimary,
+                };
+            case typeof color === 'string': {
+                let $color = theme.color.surface;
+                try {
+                    if (color) {
+                        $color = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $color,
+                };
+            }
+            default:
+                return {
+                    $color: theme.color.surface,
+                };
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(ToggleContainer, Object.assign({}, nativeProps, { ref: ref, "$color": $color, checked: checked }),
+        react_1.default.createElement(Dot, { "$color": $color, checked: checked }, children)));
+};
+exports.default = react_1.default.forwardRef(SwitchDot);

package/Switch/SwitchErrorText.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface SwitchErrorTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    readonly error?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<SwitchErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Switch/SwitchErrorText.js

@@ -0,0 +1,76 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const NoSSR_1 = __importDefault(require("../NoSSR"));
+const ErrorTextContainer = styled_1.default.div `
+  margin-left: 0.5em;
+  max-height: 0;
+  max-height: ${({ $maxHeight }) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+  transition: max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  overflow: hidden;
+`;
+const ErrorTextInner = styled_1.default.div `
+  color: ${({ theme }) => theme.color.error.toString()};
+  font-size: 0.8em;
+  transform: translateY(${({ $error }) => ($error ? 0 : '0.2em')});
+  opacity: ${({ $error }) => ($error ? 1 : 0)};
+  transition: all 240ms 240ms ease-out;
+`;
+const SwitchErrorText = (props, ref) => {
+    const { children, error } = props, nativeProps = __rest(props, ["children", "error"]);
+    const innerRef = React.useRef(null);
+    const [maxHeight, setMaxHeight] = React.useState('initial');
+    React.useEffect(() => {
+        const updateMaxHeight = () => {
+            if (innerRef.current && innerRef.current.getBoundingClientRect().height > 0) {
+                setMaxHeight(innerRef.current.getBoundingClientRect().height);
+            }
+        };
+        updateMaxHeight();
+        window.addEventListener('resize', updateMaxHeight);
+        return () => {
+            window.removeEventListener('resize', updateMaxHeight);
+        };
+    }, [children]);
+    return (React.createElement(ErrorTextContainer, Object.assign({}, nativeProps, { "$maxHeight": error ? maxHeight : 0, ref: ref }),
+        React.createElement(ErrorTextInner, { ref: innerRef, "$error": Boolean(error) }, children ? React.createElement(NoSSR_1.default, null, children) : React.createElement(React.Fragment, null, "\u00A0"))));
+};
+exports.default = React.forwardRef(SwitchErrorText);

package/Switch/SwitchTextWrapper.d.ts

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

package/Switch/SwitchTextWrapper.js

@@ -0,0 +1,30 @@
+"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"));
+// type StyleProps = {};
+const TextWrapper = styled_1.default.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+const SwitchTextWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(TextWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SwitchTextWrapper);

package/Switch/SwitchToggleWrapper.d.ts

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

package/Switch/SwitchToggleWrapper.js

@@ -0,0 +1,57 @@
+"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 ToggleWrapper = styled_1.default.span `
+  font-size: 0.86em;
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  position: relative;
+  height: 3rem;
+  width: 4.5rem;
+  padding: 1.1rem;
+  overflow: hidden;
+  box-sizing: border-box;
+  &:hover span[class*='ToggleContainer'] > span[class*='Dot']:after {
+    transform: translate(-50%, -50%) scale(1.7);
+  }
+`;
+const StyledInput = styled_1.default.input `
+  cursor: inherit;
+  position: absolute;
+  width: 100%;
+  opacity: 0;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  margin: 0px;
+  padding: 0px;
+  z-index: 1;
+  &:focus-visible ~ span[class*='ToggleContainer'] > span[class*='Dot']:before {
+    transform: translate(-50%, -50%) scale(1.7);
+  }
+`;
+const SwitchToggleWrapper = (props, ref) => {
+    const { children, disabled } = props, nativeProps = __rest(props, ["children", "disabled"]);
+    return (react_1.default.createElement(ToggleWrapper, { ref: ref },
+        react_1.default.createElement(StyledInput, Object.assign({}, nativeProps, { disabled: disabled, onChange: e => {
+                (nativeProps === null || nativeProps === void 0 ? void 0 : nativeProps.onChange) && nativeProps.onChange(e);
+            }, type: "checkbox" })),
+        children));
+};
+exports.default = react_1.default.forwardRef(SwitchToggleWrapper);

package/Switch/SwitchTrack.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SwitchProps } from './index';
+export type SwitchTrackProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * This prop allows you to provide switch state and control it. This property overrides internal component state
+     */
+    readonly checked: boolean;
+    readonly color?: SwitchProps['color'];
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * This prop allows you to provide switch state and control it. This property overrides internal component state
+     */
+    readonly checked: boolean;
+    readonly color?: string | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Switch/SwitchTrack.js

@@ -0,0 +1,80 @@
+"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 Track = styled_1.default.span `
+  height: 100%;
+  width: 100%;
+  border-radius: 7px;
+  transition:
+    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: ${({ $color, checked, theme }) => {
+    switch (true) {
+        case checked:
+            return $color ? $color.toString() : theme.color.accentPrimary.toString();
+        default:
+            return theme.isDark
+                ? theme.color.textPrimary.darken(10).toString()
+                : theme.color.surface.darken(200).toString();
+    }
+}};
+  opacity: 0.5;
+`;
+const SwitchTrack = (props, ref) => {
+    const { color, checked, children } = props, nativeProps = __rest(props, ["color", "checked", "children"]);
+    const theme = (0, react_2.useTheme)();
+    const { $color } = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return {
+                    $color: theme.color.accentPrimary,
+                };
+            case color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondary,
+                };
+            case typeof color === 'undefined':
+            case color === 'default':
+                return {
+                    $color: theme.color.accentPrimary,
+                };
+            case typeof color === 'string': {
+                let $color = theme.color.surface;
+                try {
+                    if (color) {
+                        $color = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $color,
+                };
+            }
+            default:
+                return {
+                    $color: theme.color.surface,
+                };
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(Track, Object.assign({}, nativeProps, { ref: ref, "$color": $color, checked: checked }), children));
+};
+exports.default = react_1.default.forwardRef(SwitchTrack);

package/Switch/SwitchWrapper.d.ts

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

package/Switch/SwitchWrapper.js

@@ -0,0 +1,31 @@
+"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 StyledWrapper = styled_1.default.span `
+  font-size: 1em;
+  padding-right: 1em;
+  display: inline-flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+`;
+const SwitchWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SwitchWrapper);