react-miui 0.28.2 → 0.29.0

package/esm/components/ui/drawer/Drawer.module.scss

@@ -1,15 +0,0 @@
-.drawer {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: white;
-    z-index: 1;
-
-    transition: transform 300ms;
-}
-
-.content {
-    height: 100%;
-}

package/esm/components/ui/keyValue/KeyValue.module.scss

@@ -1,57 +0,0 @@
-.container {
-    --kv-border-color: var(--header-border);
-    --kv-border: calc(1px / var(--ratio-border)) solid var(--kv-border-color);
-    --kv-background-color: white;
-    --kv-hover-background-color: var(--active-bg);
-    border: 1px solid var(--kv-border-color);
-    background-color: var(--kv-background-color);
-    border-radius: 5px;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.item {
-    display: inline-flex;
-    box-sizing: border-box;
-    padding: 10px;
-    align-items: center;
-    gap: 10px;
-    border: none;
-    background: none;
-}
-
-button.item:hover {
-    background: var(--kv-hover-background-color)
-}
-
-.kv {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-}
-
-.key {
-    font-size: calc(22px / var(--ratio-font));
-    color: var(--sub);
-}
-
-.value {
-    font-size: calc(29px / var(--ratio-font));
-}
-
-.itemNotFirstRow {
-    border-top: var(--kv-border);
-}
-
-.itemNotFirstCol {
-    border-left: var(--kv-border);
-}
-
-.itemLastWithoutFullRow {
-    border-right: var(--kv-border);
-}
-
-.missingItem {
-    border-top: var(--kv-border);
-    border-left: var(--kv-border);
-}

package/esm/components/ui/message/Message.module.scss

@@ -1,31 +0,0 @@
-.container {
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-    padding: calc(47px / var(--ratio-dimensions)) calc(83px / var(--ratio-dimensions));
-    font-weight: 500;
-    line-height: 1.25;
-}
-
-.box {
-    border-left: 1px solid var(--border);
-    border-right: 1px solid var(--border);
-    margin: 12px;
-}
-
-.warning {
-    background-color: var(--yellow3);
-    border-color: var(--yellow1);
-    color: var(--yellow2);
-}
-
-.error {
-    background-color: var(--pinky3);
-    border-color: var(--pinky1);
-    color: var(--pinky2);
-}
-
-.info {
-    background-color: var(--blue3);
-    border-color: var(--blue2);
-    color: var(--blue1);
-}

package/esm/components/ui/modal/ModalButton.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-type Variant = "main";
-interface Props {
-    variant?: Variant | Variant[];
-}
-declare const ModalButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props>;
-export { ModalButton };
-//# sourceMappingURL=ModalButton.d.ts.map

package/esm/components/ui/modal/ModalButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,OAAO,GAAG,MAAM,CAAC;AAEtB,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAUhF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/esm/components/ui/modal/ModalButton.js

@@ -1,13 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { makeVariants } from "../../../utils/index.js";
-import styles from "./ModalButtons.module.scss";
-const ModalButton = ({ className, children, variant, ...props }) => {
-    const v = makeVariants(variant);
-    const cls = classnames(styles.button, {
-        [styles.buttonMain]: v.includes("main"),
-    }, className);
-    return React.createElement("button", { ...props, className: cls }, children);
-};
-export { ModalButton };
-//# sourceMappingURL=ModalButton.js.map

package/esm/components/ui/modal/ModalButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalButton.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAQhD,MAAM,WAAW,GAAoE,CAAC,EAClF,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EACzC,EAAE,EAAE;IACD,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IAEhC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;QAClC,CAAC,MAAM,CAAC,UAAoB,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;KACpD,EAAE,SAAS,CAAC,CAAC;IAEd,OAAO,mCAAY,KAAK,EAAE,SAAS,EAAE,GAAG,IAAG,QAAQ,CAAU,CAAC;AAClE,CAAC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/esm/components/ui/stats/Stats.module.scss

@@ -1,48 +0,0 @@
-.stats {
-    --stats-border: 1px solid rgba(255, 255, 255, .15);
-    --stats-bg: rgba(255, 255, 255, .05);
-    --stats-value-color: rgba(255, 255, 255, .9);
-    --stats-label-color: rgba(255, 255, 255, .61);
-
-    display: flex;
-    width: 100%;
-    padding: calc(60px / var(--ratio-dimensions)) 0;
-    margin: 0;
-    border-top: var(--stats-border);
-    background: var(--stats-bg);
-    background-clip: padding-box;
-    list-style-type: none;
-}
-
-.stats-dark {
-    --stats-border: 1px solid rgba(0, 0, 0, .15);
-    --stats-bg: rgba(0, 0, 0, .05);
-    --stats-value-color: rgba(0, 0, 0, .9);
-    --stats-label-color: rgba(0, 0, 0, .61);
-}
-
-.item {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    text-align: center;
-    gap: calc(20px / var(--ratio-dimensions));
-}
-
-.separator {
-    border-left: var(--stats-border);
-}
-
-.label {
-    display: block;
-    color: var(--stats-label-color);
-    font-size: calc(22px / var(--ratio-font));
-}
-
-.value {
-    display: block;
-    color: var(--stats-value-color);
-    font-size: calc(30px / var(--ratio-font));
-}

package/esm/components/ui/tabs/Item.module.scss

@@ -1,11 +0,0 @@
-.button {
-    border: none;
-    padding: 0;
-    font-size: calc(29px / var(--ratio-font));
-    color: var(--selector-text);
-    background: none;
-}
-
-.active {
-    color: var(--selector-active);
-}

package/esm/components/ui/tabs/Selector.module.scss

@@ -1,6 +0,0 @@
-.selector {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    gap: calc(114px / var(--ratio-dimensions));
-}

package/esm/global.scss

@@ -1,95 +0,0 @@
-// @TODO prefix variable names
-:root {
-    --ratio-dimensions: 3;
-    --ratio-border:     2.666666;
-    // font is calculated from top to bottom
-    --ratio-font:       1.666666;
-
-    --background: white;
-
-    --main-color: #008ad2;
-    --main-color-alt: #006AA9;
-
-    --active-bg: #e7e7e7;
-    --inactive-bg: #d3d3d3;
-    --inactive-dark-bg: #999;
-
-    --toggle-handle-bg: #e0e0e0;
-    --toggle-handle-border: #cdcdcd;
-    --toggle-bg-disabled: #f0f0f0;
-    --toggle-handle-border-disabled: #c29f7d;
-    --toggle-handle-bg-disabled: #deae84;
-
-    --icon: #636363;
-    --border: #d5d5d5;
-    --button-border: #bababa;
-
-    --header-border: #c8c8c9;
-    --header-bg: #efeff0;
-    --header-text: #484848;
-    --text: #323232;
-    --sub: #959595;
-
-    --pop-text: #666;
-
-    --toolbar-border: #ababab;
-    --toolbar-bg: #f8f8f8;
-    --modal-bg: #f7f7f7;
-    --modal-button-bg: #f8f8f8;
-    --modal-button-border: #c2c2c2;
-
-    --input-disabled-bg: #f3f3f3;
-    --input-disabled-text: #959595;
-
-    --choice-bg: #ffffff;
-    --choice-text: #999999;
-    --choice-active-bg: #f3f3f3;
-    --choice-active-text: #313131;
-    --choice-border: #cfcfcf;
-
-    --selector-text: #606060;
-    --selector-active: var(--main-color);
-
-    // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
-    --blue1: #038bf4;
-    --blue2: #b7d6f5;
-    --blue3: #dbe6ff;
-    --orange1: #ff7200;
-    --orange1-darker: #cc5b00;
-    --purple1: #7357e8;
-    --green1: #3ec234;
-    --green1-darker: #38af2f;
-    --pink1: #ff388f;
-    --red1: #ea2700;
-    --yellow1: #ffde9d;
-    --yellow2: #e4a429;
-    --yellow3: #fff5db;
-    --pinky1: #f5c0b7;
-    --pinky2: #e07b67;
-    --pinky3: #ffe1db;
-
-    --grey1: #737373;
-
-    --focus-color: #dcaf00;
-
-    --scrollbars-thumb: var(--grey1);
-    --scrollbars-bg: transparent;
-
-    --table-striped-bg: #fafafa;
-}
-
-*:focus {
-    outline: none!important;
-}
-
-*:focus-visible:focus-visible {
-    outline: none!important;
-    border-color: var(--focus-color);
-    background-color: var(--focus-bg-set);
-}
-
-
-body {
-    font-size: 15px;
-    color: var(--text);
-}

package/esm/scrollbars.scss

@@ -1,22 +0,0 @@
-.miui-scrollbars {
-    overflow-y: auto;
-    scrollbar-color: var(--scrollbars-thumb) var(--scrollbars-bg);
-    scrollbar-width: thin !important;
-
-    &::-webkit-scrollbar {
-        width: 6px;
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb:vertical {
-        background: var(--scrollbars-thumb);
-        background-clip: padding-box;
-        border: 2px solid var(--scrollbars-bg);
-        min-height: 10px;
-    }
-
-    &::-webkit-scrollbar-thumb:vertical:active {
-        background: var(--scrollbars-thumb);
-        border: 2px solid var(--scrollbars-bg);
-    }
-}

package/esm/utils/makeVariants.d.ts

@@ -1,3 +0,0 @@
-declare const makeVariants: <T extends string>(variants: T | T[] | undefined) => T[];
-export { makeVariants, };
-//# sourceMappingURL=makeVariants.d.ts.map

package/esm/utils/makeVariants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"makeVariants.d.ts","sourceRoot":"","sources":["../../src/utils/makeVariants.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,GAAI,CAAC,SAAS,MAAM,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,KAAG,CAAC,EAQxE,CAAC;AAEF,OAAO,EACH,YAAY,GACf,CAAC"}

package/esm/utils/makeVariants.js

@@ -1,11 +0,0 @@
-const makeVariants = (variants) => {
-    if (!variants) {
-        return [];
-    }
-    if (typeof variants === "string") {
-        return variants.split(" ").filter(Boolean);
-    }
-    return variants;
-};
-export { makeVariants, };
-//# sourceMappingURL=makeVariants.js.map

package/esm/utils/makeVariants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"makeVariants.js","sourceRoot":"","sources":["../../src/utils/makeVariants.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAmB,QAA6B,EAAO,EAAE;IAC1E,IAAI,CAAC,QAAQ,EAAE,CAAC;QACZ,OAAO,EAAE,CAAC;IACd,CAAC;IACD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAQ,CAAC;IACtD,CAAC;IACD,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,OAAO,EACH,YAAY,GACf,CAAC"}

package/next.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-    reactStrictMode: true,
-    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
-        return config;
-    },
-};

package/src/components/layout/card/Card.module.scss

@@ -1,15 +0,0 @@
-.card {
-    background: var(--background);
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column;
-
-    + .card {
-        margin-top: 23px;
-    }
-}
-
-.margin {
-    margin-left: 23px;
-    margin-right: 23px;
-}

package/src/components/layout/section/SearchContainer.module.scss

@@ -1,3 +0,0 @@
-.section {
-    margin: 12px;
-}

package/src/components/ui/action/EqualActions.module.scss

@@ -1,11 +0,0 @@
-.actions {
-    --actions-count: 1;
-    display: inline-grid;
-    grid-template-columns: repeat(var(--actions-count), 1fr);
-    gap: calc(56px / var(--ratio-dimensions));
-}
-
-.vertical {
-    grid-template-columns: auto;
-    grid-template-rows: repeat(var(--actions-count), 1fr);
-}

package/src/components/ui/directionPad/Pad.module.scss

@@ -1,45 +0,0 @@
-.pad {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 150px;
-    border-radius: 666px;
-    width: 150px;
-    border: 1px solid #aaa;
-    background: white;
-
-    &__line {
-        display: flex;
-    }
-
-    &__button {
-        height: 50px;
-        width: 50px;
-        margin: 0;
-        border-radius: 666px;
-        border: none;
-        display: block;
-        background: none;
-    }
-
-    &__middle {
-        display: block;
-        margin: 0;
-        height: 50px;
-        width: 50px;
-        border: 1px solid #999;
-        box-sizing: border-box;
-        border-radius: 666px;
-        background: none;
-    }
-
-    &__dot {
-        display: block;
-        width: 4px;
-        height: 4px;
-        border-radius: 666px;
-        background: black;
-        margin: auto;
-    }
-}

package/src/components/ui/drawer/Drawer.module.scss

@@ -1,15 +0,0 @@
-.drawer {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: white;
-    z-index: 1;
-
-    transition: transform 300ms;
-}
-
-.content {
-    height: 100%;
-}

package/src/components/ui/keyValue/KeyValue.module.scss

@@ -1,57 +0,0 @@
-.container {
-    --kv-border-color: var(--header-border);
-    --kv-border: calc(1px / var(--ratio-border)) solid var(--kv-border-color);
-    --kv-background-color: white;
-    --kv-hover-background-color: var(--active-bg);
-    border: 1px solid var(--kv-border-color);
-    background-color: var(--kv-background-color);
-    border-radius: 5px;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.item {
-    display: inline-flex;
-    box-sizing: border-box;
-    padding: 10px;
-    align-items: center;
-    gap: 10px;
-    border: none;
-    background: none;
-}
-
-button.item:hover {
-    background: var(--kv-hover-background-color)
-}
-
-.kv {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-}
-
-.key {
-    font-size: calc(22px / var(--ratio-font));
-    color: var(--sub);
-}
-
-.value {
-    font-size: calc(29px / var(--ratio-font));
-}
-
-.itemNotFirstRow {
-    border-top: var(--kv-border);
-}
-
-.itemNotFirstCol {
-    border-left: var(--kv-border);
-}
-
-.itemLastWithoutFullRow {
-    border-right: var(--kv-border);
-}
-
-.missingItem {
-    border-top: var(--kv-border);
-    border-left: var(--kv-border);
-}

package/src/components/ui/message/Message.module.scss

@@ -1,31 +0,0 @@
-.container {
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-    padding: calc(47px / var(--ratio-dimensions)) calc(83px / var(--ratio-dimensions));
-    font-weight: 500;
-    line-height: 1.25;
-}
-
-.box {
-    border-left: 1px solid var(--border);
-    border-right: 1px solid var(--border);
-    margin: 12px;
-}
-
-.warning {
-    background-color: var(--yellow3);
-    border-color: var(--yellow1);
-    color: var(--yellow2);
-}
-
-.error {
-    background-color: var(--pinky3);
-    border-color: var(--pinky1);
-    color: var(--pinky2);
-}
-
-.info {
-    background-color: var(--blue3);
-    border-color: var(--blue2);
-    color: var(--blue1);
-}

package/src/components/ui/modal/ModalButton.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-
-import classnames from "classnames";
-
-import { makeVariants } from "../../../utils/index";
-
-import styles from "./ModalButtons.module.scss";
-
-type Variant = "main";
-
-interface Props {
-    variant?: Variant | Variant[];
-}
-
-const ModalButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props> = ({
-    className, children, variant, ...props
-}) => {
-    const v = makeVariants(variant);
-
-    const cls = classnames(styles.button, {
-        [styles.buttonMain as string]: v.includes("main"),
-    }, className);
-
-    return <button {...props} className={cls}>{children}</button>;
-};
-
-export { ModalButton };

package/src/components/ui/stats/Stats.module.scss

@@ -1,48 +0,0 @@
-.stats {
-    --stats-border: 1px solid rgba(255, 255, 255, .15);
-    --stats-bg: rgba(255, 255, 255, .05);
-    --stats-value-color: rgba(255, 255, 255, .9);
-    --stats-label-color: rgba(255, 255, 255, .61);
-
-    display: flex;
-    width: 100%;
-    padding: calc(60px / var(--ratio-dimensions)) 0;
-    margin: 0;
-    border-top: var(--stats-border);
-    background: var(--stats-bg);
-    background-clip: padding-box;
-    list-style-type: none;
-}
-
-.stats-dark {
-    --stats-border: 1px solid rgba(0, 0, 0, .15);
-    --stats-bg: rgba(0, 0, 0, .05);
-    --stats-value-color: rgba(0, 0, 0, .9);
-    --stats-label-color: rgba(0, 0, 0, .61);
-}
-
-.item {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    text-align: center;
-    gap: calc(20px / var(--ratio-dimensions));
-}
-
-.separator {
-    border-left: var(--stats-border);
-}
-
-.label {
-    display: block;
-    color: var(--stats-label-color);
-    font-size: calc(22px / var(--ratio-font));
-}
-
-.value {
-    display: block;
-    color: var(--stats-value-color);
-    font-size: calc(30px / var(--ratio-font));
-}

package/src/components/ui/tabs/Item.module.scss

@@ -1,11 +0,0 @@
-.button {
-    border: none;
-    padding: 0;
-    font-size: calc(29px / var(--ratio-font));
-    color: var(--selector-text);
-    background: none;
-}
-
-.active {
-    color: var(--selector-active);
-}

package/src/components/ui/tabs/Selector.module.scss

@@ -1,6 +0,0 @@
-.selector {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    gap: calc(114px / var(--ratio-dimensions));
-}

package/src/demo/Demo.module.scss

@@ -1,4 +0,0 @@
-.container {
-    display: flex;
-    height: 100%;
-}

package/src/demo/Demo.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-
-// eslint-disable-next-line import/order
-import "@icon-park/react/styles/index.css";
-
-import { ToasterProvider } from "../components/ui/toaster/Toaster";
-
-import { Menu } from "./Menu";
-import { Main } from "./Main";
-import { componentsMap } from "./componentsMap";
-
-import styles from "./Demo.module.scss";
-
-const Demo: React.FC = (props) => {
-    return (
-        <ToasterProvider>
-            <div className={styles.container}>
-                <Menu list={componentsMap} />
-                <Main />
-            </div>
-        </ToasterProvider>
-    );
-};
-
-export { Demo };