react-miui 0.21.0 → 0.23.0

package/esm/components/ui/modal/Modal.module.scss

@@ -1,92 +0,0 @@
-@keyframes overlay {
-    from {
-        background: #00000000;
-    }
-
-    to {
-        background: #0000004c;
-    }
-}
-
-.overlay {
-    position: fixed;
-    z-index: 4;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    animation: overlay 300ms;
-    animation-fill-mode: forwards;
-}
-
-.overlayOnBottom {
-    align-items: flex-end;
-    padding-bottom: calc(24px / var(--ratio-dimensions));
-}
-
-@keyframes container {
-    from {
-        transform: translateY(30px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-.container {
-    background: var(--modal-bg);
-    border-radius: calc(12px / var(--ratio-dimensions));
-    max-width: 333px;
-    width: calc(100% - 30px);
-    padding: 20px;
-    position: relative;
-    box-sizing: border-box;
-    animation: container 300ms;
-    animation-fill-mode: forwards;
-}
-
-.full {
-    width: calc(100vw - 30px);
-    max-width: 1000px;
-}
-
-.isClosing {
-    // keep this after .overlay .container to prevent overwriting
-    animation-direction: reverse;
-}
-
-.close {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-
-    + .title {
-        margin-right: 40px;
-        margin-top: -4px;
-    }
-}
-
-.title {
-    font-size: calc(40px / var(--ratio-font));
-    text-align: center;
-    color: black;
-    margin: calc(90px / var(--ratio-dimensions)) 0;
-}
-
-.negateMargin {
-    margin: 0 -20px -20px;
-}
-
-.removeMargin {
-    margin: 0;
-}

package/esm/components/ui/modal/ModalButtons.module.scss

@@ -1,32 +0,0 @@
-.container {
-    display: flex;
-    margin-top: calc(100px / var(--ratio-dimensions));
-    margin-left: -20px;
-    margin-right: -20px;
-    margin-bottom: -20px;
-}
-
-.button {
-    border: none;
-    border-top: 1px solid var(--modal-button-border);
-    background: var(--modal-button-bg);
-    flex: 1;
-    height: calc(156px / var(--ratio-dimensions));
-    font-weight: 500;
-
-    &:not(:first-child) {
-        border-left: 1px solid var(--modal-button-border);
-    }
-
-    &:first-child {
-        border-bottom-left-radius: calc(12px / var(--ratio-dimensions));
-    }
-
-    &:last-child {
-        border-bottom-right-radius: calc(12px / var(--ratio-dimensions));
-    }
-}
-
-.buttonMain {
-    color: var(--main-color);
-}

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

@@ -1,7 +0,0 @@
-import React from "react";
-interface Props {
-    children: React.ReactNode;
-}
-declare const ModalNegateMargin: React.FC<Props>;
-export { ModalNegateMargin };
-//# sourceMappingURL=ModalNoMargin.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ModalNoMargin.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalNoMargin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAYtC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -1,16 +0,0 @@
-import React from "react";
-import { List } from "../../layout/list/List.js";
-import styles from "./Modal.module.scss";
-const ModalNegateMargin = (props) => {
-    const chld = React.Children.map(props.children, (child, index) => {
-        if (child && typeof child === "object" && "type" in child && child.type === List) {
-            return React.cloneElement(child, {
-                className: styles.removeMargin,
-            });
-        }
-        return child;
-    });
-    return React.createElement("div", { className: styles.negateMargin }, chld);
-};
-export { ModalNegateMargin };
-//# sourceMappingURL=ModalNoMargin.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ModalNoMargin.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/ModalNoMargin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAEjD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAMzC,MAAM,iBAAiB,GAAoB,CAAC,KAAK,EAAE,EAAE;IACjD,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC7D,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;YAC9E,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAE7B,SAAS,EAAE,MAAM,CAAC,YAAY;aACjC,CAAC,CAAC;SACN;QAED,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC,CAAC;IACH,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,YAAY,IAAG,IAAI,CAAO,CAAC;AAC7D,CAAC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/esm/components/ui/pop/Pop.module.scss

@@ -1,59 +0,0 @@
-.overlay {
-    position: fixed;
-    background: #0000004c;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 4;
-}
-
-.pop {
-    z-index: 5;
-    position: absolute;
-    background: white;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-}
-
-.li {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-
-    + .li {
-        border-top: 1px solid var(--border);
-    }
-}
-
-.button {
-    border: none;
-    background: white;
-    height: calc(116px / var(--ratio-dimensions));
-    padding: 0 calc(42px / var(--ratio-dimensions));
-    box-sizing: border-box;
-    width: 100%;
-    min-width: calc(460px / var(--ratio-dimensions));
-    text-align: left;
-    color: var(--pop-text);
-    font-size: calc(26px / var(--ratio-font));
-    display: flex;
-    align-items: center;
-
-    &:hover {
-        background: var(--active-bg);
-    }
-}
-
-.icon {
-    fill: currentColor;
-    margin-right: calc(42px / var(--ratio-dimensions));
-}
-
-.fakeIcon {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin-right: calc(42px / var(--ratio-dimensions));
-}

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/components/ui/toaster/Toaster.module.scss

@@ -1,32 +0,0 @@
-@keyframes show {
-    from {
-        transform: translateY(calc(100% + calc(190px / var(--ratio-dimensions))))
-    }
-}
-
-.toast {
-    position: fixed;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    z-index: 6;
-    left: 50%;
-    transform: translateX(-50%);
-
-    span {
-        background: rgba(56, 50, 46, 0.85);
-        color: #F9F6F2;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.37);
-        border-radius: 12px; // around 22 @TODO use calc here
-        display: inline-block;
-        padding: 1em 1em;
-        animation: show 500ms 1;
-        animation-fill-mode: forwards;
-        margin-bottom: calc(190px / var(--ratio-dimensions));
-    }
-}
-
-.hide {
-    transition: opacity 300ms;
-    opacity: 0;
-}

package/esm/components/utils/Spacer.module.scss

@@ -1,3 +0,0 @@
-.spacer {
-    flex: 1;
-}

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/src/components/form/Select.module.scss

@@ -1,18 +0,0 @@
-.select {
-    box-sizing: border-box;
-    height: calc(103px / var(--ratio-dimensions));
-    font-size: calc(34 / var(--ratio-font));
-    color: var(--text);
-    display: block;
-    width: 100%;
-    background: white;
-    font-family: inherit;
-    border-radius: 2px;
-    padding: 0 calc(36px / var(--ratio-dimensions));
-    border: calc(1px / var(--ratio-border)) solid var(--border);
-
-    &:disabled {
-        background: var(--input-disabled-bg);
-        color: var(--input-disabled-text);
-    }
-}

package/src/components/ui/button/Button.module.scss

@@ -1,25 +0,0 @@
-.btn {
-    height: calc(118px / var(--ratio-dimensions));
-    background: var(--green1);
-    border: calc(1px / var(--ratio-border)) solid var(--green1-darker);
-    color: white;
-    border-radius: 1000px;
-    display: block;
-    width: 100%;
-    font-size: calc(26px / var(--ratio-font));
-    padding: 0 1em;
-
-    &:disabled {
-        opacity: 0.5;
-    }
-}
-
-.btn--inline {
-    width: auto;
-}
-
-.btn--outline {
-    background: white;
-    border-color: var(--button-border);
-    color: var(--grey1);
-}

package/src/components/ui/modal/Modal.module.scss

@@ -1,92 +0,0 @@
-@keyframes overlay {
-    from {
-        background: #00000000;
-    }
-
-    to {
-        background: #0000004c;
-    }
-}
-
-.overlay {
-    position: fixed;
-    z-index: 4;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    animation: overlay 300ms;
-    animation-fill-mode: forwards;
-}
-
-.overlayOnBottom {
-    align-items: flex-end;
-    padding-bottom: calc(24px / var(--ratio-dimensions));
-}
-
-@keyframes container {
-    from {
-        transform: translateY(30px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-.container {
-    background: var(--modal-bg);
-    border-radius: calc(12px / var(--ratio-dimensions));
-    max-width: 333px;
-    width: calc(100% - 30px);
-    padding: 20px;
-    position: relative;
-    box-sizing: border-box;
-    animation: container 300ms;
-    animation-fill-mode: forwards;
-}
-
-.full {
-    width: calc(100vw - 30px);
-    max-width: 1000px;
-}
-
-.isClosing {
-    // keep this after .overlay .container to prevent overwriting
-    animation-direction: reverse;
-}
-
-.close {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-
-    + .title {
-        margin-right: 40px;
-        margin-top: -4px;
-    }
-}
-
-.title {
-    font-size: calc(40px / var(--ratio-font));
-    text-align: center;
-    color: black;
-    margin: calc(90px / var(--ratio-dimensions)) 0;
-}
-
-.negateMargin {
-    margin: 0 -20px -20px;
-}
-
-.removeMargin {
-    margin: 0;
-}

package/src/components/ui/modal/ModalButtons.module.scss

@@ -1,32 +0,0 @@
-.container {
-    display: flex;
-    margin-top: calc(100px / var(--ratio-dimensions));
-    margin-left: -20px;
-    margin-right: -20px;
-    margin-bottom: -20px;
-}
-
-.button {
-    border: none;
-    border-top: 1px solid var(--modal-button-border);
-    background: var(--modal-button-bg);
-    flex: 1;
-    height: calc(156px / var(--ratio-dimensions));
-    font-weight: 500;
-
-    &:not(:first-child) {
-        border-left: 1px solid var(--modal-button-border);
-    }
-
-    &:first-child {
-        border-bottom-left-radius: calc(12px / var(--ratio-dimensions));
-    }
-
-    &:last-child {
-        border-bottom-right-radius: calc(12px / var(--ratio-dimensions));
-    }
-}
-
-.buttonMain {
-    color: var(--main-color);
-}

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

@@ -1,25 +0,0 @@
-import React from "react";
-
-import { List } from "../../layout/list/List.js";
-
-import styles from "./Modal.module.scss";
-
-interface Props {
-    children: React.ReactNode;
-}
-
-const ModalNegateMargin: React.FC<Props> = (props) => {
-    const chld = React.Children.map(props.children, (child, index) => {
-        if (child && typeof child === "object" && "type" in child && child.type === List) {
-            return React.cloneElement(child, {
-                // @TODO this will overwrite className
-                className: styles.removeMargin,
-            });
-        }
-
-        return child;
-    });
-    return <div className={styles.negateMargin}>{chld}</div>;
-};
-
-export { ModalNegateMargin };

package/src/demo/components/form/Select.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-
-import { Label, Select } from "../../../index.js";
-
-const SelectDemo: React.FC = () => {
-    return (
-        <>
-            <Label label={"Normal select"}>
-                <Select>
-                    <option>Cookie</option>
-                    <option>Ice cream</option>
-                    <option>Sweets</option>
-                </Select>
-            </Label>
-            <Label label={"Disabled"}>
-                <Select disabled={true}>
-                    <option>Cookie</option>
-                    <option>Ice cream</option>
-                    <option>Sweets</option>
-                </Select>
-            </Label>
-        </>
-    );
-};
-
-export { SelectDemo };

package/src/demo/components/ui/button/ButtonDemo.tsx

@@ -1,23 +0,0 @@
-import React, { useCallback } from "react";
-
-import { Button } from "../../../../index.js";
-
-const ButtonDemo = () => {
-    const handleClick = useCallback(() => {
-        alert("Clicked");
-    }, []);
-
-    return (
-        <div>
-            <Button onClick={handleClick}>Basic button</Button>
-            <br />
-            <Button disabled={true} onClick={handleClick}>Disabled button</Button>
-            <br />
-            <Button variant={"inline"} onClick={handleClick}>Inline button</Button>
-            <br />
-            <Button variant={"outline"} onClick={handleClick}>Outline button</Button>
-        </div>
-    );
-};
-
-export { ButtonDemo };