react-miui 0.27.11 → 0.28.0

package/src/components/form/Label.module.scss

@@ -1,15 +0,0 @@
-.label + .label {
-    margin-top: 23px;
-    display: block;
-}
-
-.text {
-    font-size: calc(28px / var(--ratio-font));
-    margin-bottom: calc(24px / var(--ratio-dimensions));
-    color: var(--sub);
-}
-
-.textBig {
-    font-size: calc(34px / var(--ratio-font));
-
-}

package/src/components/form/Toggle.module.scss

@@ -1,55 +0,0 @@
-.container {
-    --ratio-dimensions: 2.5;
-
-    display: inline-flex;
-    align-items: center;
-    border: 1px solid #ccc;
-    border-radius: 100px;
-    position: relative;
-    line-height: 0;
-    width: calc(110px / var(--ratio-dimensions));
-    height: calc(62px / var(--ratio-dimensions));
-    padding-left: calc(8px / var(--ratio-dimensions));
-    box-sizing: border-box;
-
-    input {
-        position: absolute;
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        visibility: hidden;
-
-        &:not(:checked) + .toggle {
-            transform: translateX(0);
-            background: var(--toggle-handle-bg);
-            border-color: var(--toggle-handle-border);
-        }
-
-        &[data-undetermined=true] + .toggle {
-            transform: translateX(calc(24px / var(--ratio-dimensions)));
-            background: var(--toggle-handle-border);
-            border-color: var(--toggle-handle-border);
-        }
-
-        &:disabled:checked + .toggle {
-            border-color: var(--toggle-handle-border-disabled);
-            background: var(--toggle-handle-bg-disabled);
-        }
-    }
-}
-
-.disabled {
-    background: var(--toggle-bg-disabled);
-}
-
-.toggle {
-    box-sizing: border-box;
-    border-radius: 100px;
-    display: inline-block;
-    width: calc(44px / var(--ratio-dimensions));
-    height: calc(44px / var(--ratio-dimensions));
-    border: calc(1px / var(--ratio-border)) solid var(--orange1-darker);
-    background: var(--orange1);
-    transition: transform 200ms, background-color 200ms, border-color 200ms;
-    transform: translateX(calc(48px / var(--ratio-dimensions)));
-}

package/src/components/form/choice/Choice.module.scss

@@ -1,56 +0,0 @@
-.choice {
-    input {
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        opacity: 0;
-        margin: 0;
-        position: absolute;
-
-        &:checked + span {
-            color: var(--choice-active-text);
-            background: var(--choice-active-bg);
-        }
-    }
-
-    span {
-        display: flex;
-        padding: 0 1em;
-        flex: 1;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-        font-size: calc(24px / var(--ratio-font));
-        color: var(--choice-text);
-        background: var(--choice-bg);
-        white-space: nowrap;
-    }
-
-    display: flex;
-    border: 1px solid var(--choice-border); // @TODO width
-    position: relative;
-    border-radius: 8px;
-    overflow: hidden;
-    width: max-content;
-    margin-left: auto;
-    margin-right: auto;
-
-    label {
-        flex: 1;
-        height: calc(89px / var(--ratio-dimensions));
-        display: flex;
-
-        + label {
-            border-left: 1px solid var(--choice-border);
-        }
-    }
-}
-
-.wide {
-    width: 100%;
-}
-
-.left {
-    margin-left: unset;
-    margin-right: unset;
-}

package/src/demo/components/form/Choice.module.scss

@@ -1,7 +0,0 @@
-.darker {
-    --choice-text: #59a5c2;
-    --choice-border: #10a4dc;
-    --choice-bg: #f9fdff;;
-    --choice-active-text: #145b79;
-    --choice-active-bg: #ddf5ff;
-}

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

@@ -1,63 +0,0 @@
-import React, { useState } from "react";
-
-import { Choice, Section } from "../../../index";
-
-import styles from "./Choice.module.scss";
-
-interface Props {}
-
-const values: ("Single" | "Multiple words")[] = ["Single", "Multiple words"];
-
-const ChoiceDemo: React.FC<Props> = () => {
-    const [current, handleCurrent] = useState(values[0]!);
-
-    return (
-        <Section vertical={true} horizontal={true}>
-            <Choice values={values} value={current} name={"rnd"} onChange={handleCurrent} />
-        </Section>
-    );
-};
-
-const values2 = [
-    {
-        label: "Option 1",
-        value: "one",
-    },
-    {
-        label: "Option 2",
-        value: "two",
-    },
-];
-
-const ChoiceDemo2: React.FC<Props> = () => {
-    const [current, handleCurrent] = useState(values2[0]!.value);
-
-    return (
-        <>
-            <Section vertical={true} horizontal={true}>
-                <Choice
-                    values={values2}
-                    value={current}
-                    name={"rnd"}
-                    onChange={handleCurrent}
-                    className={styles.darker as string}
-                    variant={"wide"}
-                />
-
-                Current: {current}
-            </Section>
-            <Section vertical={true} horizontal={true}>
-                <Choice
-                    values={values2}
-                    value={current}
-                    name={"rn2d"}
-                    onChange={handleCurrent}
-                    variant={"left"}
-                />
-            </Section>
-
-        </>
-    );
-};
-
-export { ChoiceDemo, ChoiceDemo2 };

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

@@ -1,13 +0,0 @@
-import React from "react";
-
-import { Label, Input, ICON, Icon } from "../../../index";
-
-const LabelDemo = () => {
-    return (
-        <Label label={"Capacity"}>
-            <Input placeholder={"ie: 500"} prefix={<Icon name={ICON.battery} />} suffix={"kWh"} />
-        </Label>
-    );
-};
-
-export { LabelDemo };

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

@@ -1,60 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-
-import { Toggle, List, useToaster } from "../../../index";
-
-const Item = List.Item;
-
-const handleNoop = () => undefined;
-
-const ToggleDemo: React.FC = () => {
-    const [state, ss] = useState<boolean | null>(null);
-    const toast = useToaster();
-
-    useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-        setTimeout(() => { ss(true); }, 1000);
-    }, []);
-
-    const handleToggle = useCallback(() => {
-        if (state == null) {
-            return; // shouldn't happen, but ...
-        }
-        ss(null);
-        setTimeout(() => {
-            ss(!state);
-            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-        }, 1000);
-    }, [state]);
-
-    const handleCtx: React.MouseEventHandler = useCallback((e) => {
-        e.preventDefault();
-        toast("You right-clicked / long pressed the toggle");
-    }, []);
-
-    return (
-        <List>
-            <Item ratio={"1/"}>
-                <span>Off</span>
-                <Toggle onChange={handleNoop} value={false} />
-            </Item>
-            <Item ratio={"1/"}>
-                <span>On</span>
-                <Toggle onChange={handleNoop} value={true} />
-            </Item>
-            <Item ratio={"1/"}>
-                <span>Undetermined</span>
-                <Toggle onChange={handleNoop} value={null} />
-            </Item>
-            <Item ratio={"1/"}>
-                <span>Dynamic with right click</span>
-                <Toggle onChange={handleToggle} onContextMenu={handleCtx} value={state} />
-            </Item>
-            <Item ratio={"1/"}>
-                <span>Disabled</span>
-                <Toggle onChange={handleToggle} value={state} disabled={true} />
-            </Item>
-        </List>
-    );
-};
-
-export { ToggleDemo };