react-miui 0.23.7 → 0.25.0

package/esm/components/layout/table/Table.module.scss

@@ -1,30 +0,0 @@
-.table {
-    border-spacing: 10px;
-    border-collapse: collapse;
-
-    > * > tr > * {
-        text-align: left;
-        padding: 0.75em 0.5em;
-        border-bottom: 1px solid var(--border);
-    }
-
-    > thead > tr:last-child > * {
-        border-bottom: 2px solid var(--border);
-        box-shadow: 0 4px 10px -10px rgba(0, 0, 0, 0.6);
-    }
-}
-
-.striped {
-    > tbody > tr:nth-child(even) > * {
-        background: var(--table-striped-bg);
-    }
-}
-
-.centered {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.wide {
-    width: 100%;
-}

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

@@ -1,60 +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));
-    font-weight: revert;
-    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/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/src/components/form/Checkbox.module.scss

@@ -1,71 +0,0 @@
-.checkbox {
-    input {
-        width: 0;
-        height: 0;
-        transform: scale(0);
-        margin: 0;
-        vertical-align: middle;
-
-        &:focus-visible {
-            + .checkmark {
-                box-shadow: 0 0 5px black;
-            }
-        }
-
-        + .checkmark + .label:not(:empty) {
-            margin-left: 0.75em;
-        }
-    }
-}
-
-.checkmark {
-    border-radius: 100px;
-    background: none;
-    border: 1px solid var(--inactive-bg);
-    width: 18px;
-    height: 18px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    vertical-align: middle;
-    box-sizing: border-box;
-
-    svg {
-        display: none;
-        width: 9px;
-        height: 9px;
-        fill: white;
-    }
-
-    + .label {
-        vertical-align: middle;
-    }
-}
-
-.checkmarkChecked {
-    border-width: 0;
-    color: var(--main-color);
-    background: currentColor;
-
-    svg {
-        display: inline-block;
-    }
-
-    &.checkmarkDisabled {
-        background: var(--inactive-dark-bg);
-    }
-}
-
-.checkmarkDisabled {
-    background: var(--active-bg);
-
-    + .label {
-        color: var(--input-disabled-text);
-    }
-}
-
-.checkmarkReadOnly {
-    + .label {
-        color: var(--input-disabled-text);
-    }
-}

package/src/components/layout/table/Table.module.scss

@@ -1,30 +0,0 @@
-.table {
-    border-spacing: 10px;
-    border-collapse: collapse;
-
-    > * > tr > * {
-        text-align: left;
-        padding: 0.75em 0.5em;
-        border-bottom: 1px solid var(--border);
-    }
-
-    > thead > tr:last-child > * {
-        border-bottom: 2px solid var(--border);
-        box-shadow: 0 4px 10px -10px rgba(0, 0, 0, 0.6);
-    }
-}
-
-.striped {
-    > tbody > tr:nth-child(even) > * {
-        background: var(--table-striped-bg);
-    }
-}
-
-.centered {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.wide {
-    width: 100%;
-}

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

@@ -1,60 +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));
-    font-weight: revert;
-    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/src/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/src/demo/components/form/Checkbox.tsx

@@ -1,33 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { Checkbox } from "../../../index";
-
-const handleChangeNoop = () => undefined;
-
-const CheckboxDemo: React.FC = (props) => {
-    const [v, setV] = useState(false);
-
-    const handleToggle = useCallback(() => { setV((prevV) => !prevV); }, []);
-
-    return (
-        <>
-            <Checkbox name={"a"} onChange={handleToggle} checked={!v}>I want something something</Checkbox>
-            <hr />
-            <Checkbox name={"a"} onChange={handleChangeNoop} checked={true} disabled={true}>
-                Something else - disabled
-            </Checkbox>
-            <Checkbox name={"a"} onChange={handleChangeNoop} checked={false} disabled={true}>
-                Something else - disabled
-            </Checkbox>
-            <hr />
-            <Checkbox name={"a"} onChange={handleChangeNoop} checked={true} readOnly={true}>
-                Last option - readonly
-            </Checkbox>
-            <Checkbox name={"a"} onChange={handleChangeNoop} checked={false} readOnly={true}>
-                Last option - readonly
-            </Checkbox>
-        </>
-    );
-};
-
-export { CheckboxDemo };

package/src/demo/components/layout/table/TableDemo.module.scss

@@ -1 +0,0 @@
-.actions {}

package/src/demo/components/ui/pop/Pop.tsx

@@ -1,77 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { SunOne } from "@icon-park/react";
-
-import { Pop, Header, StickyHeader, HeaderIconAction, ICON, Section, Icon } from "../../../../index";
-
-interface Props {}
-
-const handleClick = () => {
-    console.info("Clicked an option");
-};
-
-// eslint-disable-next-line max-lines-per-function
-const PopDemo: React.FC<Props> = () => {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    const [open, setOpen] = useState(false);
-    const [leftOpen, setLeftOpen] = useState(false);
-
-    const handleToggle = useCallback(() => {
-        setOpen(p => !p);
-    }, []);
-
-    const handleLeftToggle = useCallback(() => {
-        setLeftOpen(p => !p);
-    }, []);
-
-    const handleClose = useCallback(() => {
-        setOpen(false);
-    }, []);
-
-    const handleLeftClose = useCallback(() => {
-        setLeftOpen(false);
-    }, []);
-
-    const after = (
-        <>
-            <HeaderIconAction icon={ICON.config} onClick={handleToggle} />
-            <Pop anchor={"prev"} open={open} onClose={handleClose}>
-                <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
-                <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
-                <Pop.Option onClick={handleClick}>Configure</Pop.Option>
-            </Pop>
-        </>
-    );
-
-    const left = (
-        <>
-            <HeaderIconAction icon={ICON.checkmark} onClick={handleLeftToggle} />
-            <Pop anchor={"prev"} open={leftOpen} onClose={handleLeftClose}>
-                <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
-                <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
-                <Pop.Option icon={<SunOne />} onClick={handleClick}>Configure</Pop.Option>
-                <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
-                <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
-                <Pop.Option onClick={handleClick}>Configure</Pop.Option>
-                <Pop.Option icon={<Icon name={ICON.heart} />} onClick={handleClick}>Add new list</Pop.Option>
-                <Pop.Option icon={<Icon name={ICON.trash} />} onClick={handleClick}>Remove empty lists</Pop.Option>
-                <Pop.Option icon={<>text</>} onClick={handleClick}>Configure</Pop.Option>
-            </Pop>
-        </>
-    );
-
-    return (
-        <StickyHeader>
-            <Header before={left} after={after}>
-                Some place
-            </Header>
-            <StickyHeader.Content>
-                <Section horizontal={true} vertical={true}>
-                    Click on the left or right icon to open the menu
-                </Section>
-            </StickyHeader.Content>
-        </StickyHeader>
-    );
-};
-
-export { PopDemo };

package/src/demo/components/ui/toaster/Toaster.tsx

@@ -1,27 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { useToaster, Button, Input } from "../../../../index";
-
-interface Props {}
-
-const ToasterDemo: React.FC<Props> = (props) => {
-    const toast = useToaster();
-    const [text, setText] = useState("");
-
-    const handleToast = useCallback(() => {
-        toast(text || "Lorem ipsum dolor sit amet");
-    }, [text]);
-
-    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-        setText(e.target.value);
-    }, []);
-
-    return (
-        <div>
-            <Input onChange={handleChange} value={text} placeholder={"Fill in text to display"} />
-            <Button onClick={handleToast}>Show toast</Button>
-        </div>
-    );
-};
-
-export { ToasterDemo };