react-miui 0.3.0 → 0.4.0

package/src/components/layout/list/Item.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import classnames from "classnames";
 
 import styles from "./Item.module.scss";
+import { Value } from "./Value";
 
 interface LinkProps {
     href: string;
@@ -13,38 +14,55 @@ interface Props {
     onClick?: () => void;
     className?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    ratio?: string; // @TODO number/number/number/.. type?
 }
 
+// eslint-disable-next-line max-statements
 const Item: React.FC<Props> = (props) => {
-    const { className, children, href, to, onClick, Link, ...restProps } = props;
+    const { className, children, href, to, onClick, Link, ratio, ...restProps } = props;
     const cls = classnames(styles.item, className);
 
     const liProps = {
         className: cls,
     };
 
+    const r = ratio ? ratio.split("/") : [];
+
+    const ren = React.Children.map(props.children, (child, index) => {
+        let flex = undefined;
+        if (!r.length && child && typeof child === "object" && "type" in child && child.type === Value) {
+            return child;
+        }
+        if (index in r) {
+            flex = r[index];
+        }
+        return <div style={{ flex }}>{child}</div>;
+    });
+
     if (to) {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
-        return <li {...liProps}><Link href={to} {...restProps}>{children}</Link></li>;
+        return <li {...liProps}><Link href={to} {...restProps}><a className={styles.content}>{ren}</a></Link></li>;
     }
     if (href) {
         const aProps: typeof restProps & { onClick?: Props["onClick"]} = { ...restProps };
         if (onClick) {
             aProps.onClick = onClick;
         }
-        return <li {...liProps}><a href={href} {...aProps}>{children}</a></li>;
+        return <li {...liProps}><a href={href} {...aProps} className={styles.content}>{ren}</a></li>;
     }
     if (onClick) {
         return (
             <li {...liProps}>
-                <button className={styles.button} onClick={props.onClick} {...restProps}>{children}</button>
+                <button className={classnames(styles.button, styles.content)} onClick={props.onClick}{...restProps}>
+                    {ren}
+                </button>
             </li>
         );
     }
-    return <li {...liProps}><div {...restProps}>{children}</div></li>;
+    return <li {...liProps}><div {...restProps} className={styles.content}>{ren}</div></li>;
 };
 
 export { Item };

package/src/components/layout/list/Label.module.scss

@@ -0,0 +1,9 @@
+.sub {
+    font-size: calc(27px / var(--ratio-font));
+    color: var(--sub);
+    margin-top: calc(27px / var(--ratio-font) / 3);
+}
+
+.root {
+    padding: calc(54px / var(--ratio-dimensions)) 0;
+}

package/src/components/layout/list/Label.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import styles from "./Label.module.scss";
+
+interface Props {
+    sub?: ReactNode;
+}
+
+const Label: React.FC<Props> = (props) => {
+    const sub = props.sub ? <div className={styles.sub}>{props.sub}</div> : null;
+
+    return (
+        <div className={styles.root}>
+            <div>{props.children}</div>
+            {sub}
+        </div>
+    );
+};
+
+export { Label };

package/src/components/layout/list/Value.module.scss

@@ -0,0 +1,7 @@
+.value {
+    color: var(--icon);
+    font-size: calc(26px / var(--ratio-font));
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+}

package/src/components/layout/list/Value.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import styles from "./Value.module.scss";
+
+const Value: React.FC = (props) => {
+    return (
+        <div className={styles.value}>{props.children}</div>
+    );
+};
+
+export { Value };

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

@@ -3,8 +3,6 @@ import { Toggle } from "../../../components/form/Toggle";
 import { List } from "../../../components/layout/list/List";
 import { Item } from "../../../components/layout/list/Item";
 
-import styles from "./Toggle.module.scss";
-
 const handleNoop = () => undefined;
 
 const ToggleDemo: React.VFC = () => {
@@ -28,29 +26,21 @@ const ToggleDemo: React.VFC = () => {
 
     return (
         <List>
-            <Item>
-                <div className={styles.row}>
-                    <span>Off</span>
-                    <Toggle onChange={handleNoop} state={false} />
-                </div>
+            <Item ratio={"1/"}>
+                <span>Off</span>
+                <Toggle onChange={handleNoop} state={false} />
             </Item>
-            <Item>
-                <div className={styles.row}>
-                    <span>On</span>
-                    <Toggle onChange={handleNoop} state={true} />
-                </div>
+            <Item ratio={"1/"}>
+                <span>On</span>
+                <Toggle onChange={handleNoop} state={true} />
             </Item>
-            <Item>
-                <div className={styles.row}>
-                    <span>Undetermined</span>
-                    <Toggle onChange={handleNoop} state={null} />
-                </div>
+            <Item ratio={"1/"}>
+                <span>Undetermined</span>
+                <Toggle onChange={handleNoop} state={null} />
             </Item>
-            <Item>
-                <div className={styles.row}>
-                    <span>Dynamic</span>
-                    <Toggle onChange={handleToggle} state={state} />
-                </div>
+            <Item ratio={"1/"}>
+                <span>Dynamic</span>
+                <Toggle onChange={handleToggle} state={state} />
             </Item>
         </List>
     );

package/src/demo/components/layout/list/Header.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { Header } from "../../../../components/layout/list/Header";
+
+const ListHeaderDemo = () => {
+    return (
+        <List>
+            <Header>Section name</Header>
+            <Item>Item</Item>
+            <Item>Another item</Item>
+            <Item>One more</Item>
+            <Header>Status section</Header>
+            <Item>Item</Item>
+            <Item>One more</Item>
+            <Header>Advanced</Header>
+            <Item>Item</Item>
+            <Item>Another item</Item>
+            <Item>One more</Item>
+        </List>
+    );
+};
+
+export { ListHeaderDemo };

package/src/demo/components/layout/list/ItemRatio.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { ICON, Icon } from "../../../../components/icons/Icon";
+
+const ItemRatioDemo = () => {
+    return (
+        <List>
+            <Item ratio={"1/"}>
+                <span>Label</span>
+                <>Value</>
+            </Item>
+            <Item ratio={"1/"}>
+                <span>Label</span>
+                <Icon name={ICON.forward} />
+            </Item>
+        </List>
+    );
+};
+
+export { ItemRatioDemo };

package/src/demo/components/layout/list/Label.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { Label } from "../../../../components/layout/list/Label";
+
+const ItemLabelDemo = () => {
+    return (
+        <List>
+            <Item>
+                <Label sub={"Here is a little text explaining things. Don't go too long, but make it non-ambiguous."}>
+                    Transmit power
+                </Label>
+            </Item>
+            <Item ratio={"6/4/"}>
+                <Label sub={"Here is a little text explaining things. Don't go too long, but make it non-ambiguous."}>
+                    Transmit power
+                </Label>
+                <></>
+                <>Value</>
+            </Item>
+            <Item>
+                <Label sub={"Just one sentence."}>
+                    Complicated name
+                </Label>
+            </Item>
+        </List>
+    );
+};
+
+export { ItemLabelDemo };

package/src/demo/components/layout/list/List.Item.module.scss

@@ -1,3 +1,7 @@
 .custom {
     border-left: 3px solid green;
 }
+
+.item {
+    display: flex;
+}

package/src/demo/components/layout/list/Value.module.scss

@@ -0,0 +1,4 @@
+.icon {
+    color: var(--toolbar-border);
+    margin-left: calc(40px / var(--ratio-dimensions));
+}

package/src/demo/components/layout/list/Value.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { Value } from "../../../../components/layout/list/Value";
+import { Label } from "../../../../components/layout/list/Label";
+import { ICON, Icon } from "../../../../components/icons/Icon";
+
+import styles from "./Value.module.scss";
+
+const ValueDemo = () => {
+    return (
+        <List>
+            <Item>
+                <Label>Name</Label>
+                <Value>Jack The 23rd</Value>
+            </Item>
+            <Item>
+                <Label>Start at</Label>
+                <Value>18:00</Value>
+                <Icon name={ICON.forward} className={styles.icon} />
+            </Item>
+        </List>
+    );
+};
+
+export { ValueDemo };

package/src/demo/components/ui/icons/Icons.tsx

@@ -1,16 +1,12 @@
 import React from "react";
 import { Icon, ICON, Item, List } from "../../../../index.js";
 
-import styles from "./Icons.module.scss";
-
 const IconsDemo: React.FC = () => {
     const icons = Object.values(ICON).map((value) => {
         return (
-            <Item key={value}>
-                <div className={styles.row}>
-                    {value}
-                    <Icon name={value} />
-                </div>
+            <Item key={value} ratio={"1/"}>
+                {value}
+                <Icon name={value} />
             </Item>
         );
     });

package/src/demo/componentsMap.ts

@@ -23,6 +23,10 @@ import {
     ActionsOnLeft,
 } from "./components/ui/action/Action";
 import { ToggleDemo } from "./components/form/Toggle";
+import { ItemRatioDemo } from "./components/layout/list/ItemRatio";
+import { ItemLabelDemo } from "./components/layout/list/Label";
+import { ListHeaderDemo } from "./components/layout/list/Header";
+import { ValueDemo } from "./components/layout/list/Value";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -123,6 +127,24 @@ const componentsMap: TheMap = {
     ListItem: {
         name: "List & Item",
         Component: ListItemDemo,
+        children: {
+            Ratio: {
+                name: "Alignment",
+                Component: ItemRatioDemo,
+            },
+            Header: {
+                name: "Header",
+                Component: ListHeaderDemo,
+            },
+            Label: {
+                name: "Label",
+                Component: ItemLabelDemo,
+            },
+            Value: {
+                name: "Value",
+                Component: ValueDemo,
+            },
+        },
     },
     Pad: {
         name: "Direction pad",

package/src/global.scss

@@ -20,6 +20,8 @@
     --header-border: #c8c8c9;
     --header-bg: #efeff0;
     --header-text: #484848;
+    --text: #323232;
+    --sub: #959595;
 
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
@@ -52,4 +54,5 @@
 
 body {
     font-size: 15px;
+    color: var(--text);
 }

package/dist/demo/Demo.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-declare const Demo: React.FC;
-export { Demo };
-//# sourceMappingURL=Demo.d.ts.map

package/dist/demo/Demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../src/demo/Demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAOjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/demo/Demo.js

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Demo = void 0;
-const react_1 = __importDefault(require("react"));
-const Demo_module_scss_1 = __importDefault(require("./Demo.module.scss"));
-const Menu_1 = require("./Menu");
-const Main_1 = require("./Main");
-const componentsMap_1 = require("./componentsMap");
-const Demo = (props) => {
-    return (react_1.default.createElement("div", { className: Demo_module_scss_1.default.container },
-        react_1.default.createElement(Menu_1.Menu, { list: componentsMap_1.componentsMap }),
-        react_1.default.createElement(Main_1.Main, null)));
-};
-exports.Demo = Demo;
-//# sourceMappingURL=Demo.js.map

package/dist/demo/Demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Demo.js","sourceRoot":"","sources":["../../src/demo/Demo.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,0EAAwC;AACxC,iCAA8B;AAC9B,iCAA8B;AAC9B,mDAAgD;AAEhD,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,OAAO,CACH,uCAAK,SAAS,EAAE,0BAAM,CAAC,SAAS;QAC5B,8BAAC,WAAI,IAAC,IAAI,EAAE,6BAAa,GAAI;QAC7B,8BAAC,WAAI,OAAG,CACN,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}

package/dist/demo/Demo.module.scss

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

package/dist/demo/Main.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-declare const Main: React.FC;
-export { Main };
-//# sourceMappingURL=Main.d.ts.map

package/dist/demo/Main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../src/demo/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AA2CrD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EA6CjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/demo/Main.js

@@ -1,83 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Main = void 0;
-const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Main_module_scss_1 = __importDefault(require("./Main.module.scss"));
-const safeUseHash_1 = require("./utils/safeUseHash");
-const componentsMap_1 = require("./componentsMap");
-const getComponentByHash = (hash) => {
-    const parts = hash.split("/");
-    let obj = componentsMap_1.componentsMap, objItem;
-    while (parts.length) {
-        const first = parts.shift();
-        objItem = obj === null || obj === void 0 ? void 0 : obj[first];
-        if (!objItem) {
-            return null;
-        }
-        obj = objItem.children;
-    }
-    if (objItem === null || objItem === void 0 ? void 0 : objItem.Component) {
-        return {
-            name: objItem.name,
-            Component: objItem.Component,
-        };
-    }
-    return null;
-};
-const Main = (props) => {
-    const [bg, setBg] = react_1.useState("white");
-    const hash = safeUseHash_1.safeUseHash();
-    const hashWithoutHash = hash.substr(1);
-    const info = getComponentByHash(hashWithoutHash);
-    const handleTransparentBg = react_1.useCallback(() => {
-        setBg("transparent");
-    }, []);
-    const handleWhiteBg = react_1.useCallback(() => {
-        setBg("white");
-    }, []);
-    const handleMobileBg = react_1.useCallback(() => {
-        setBg("mobile");
-    }, []);
-    if (!info) {
-        return (react_1.default.createElement("div", { className: Main_module_scss_1.default.container },
-            react_1.default.createElement("h1", { className: Main_module_scss_1.default.header }, "Hi there"),
-            "This is poor man's StoryBook."));
-    }
-    const Component = info.Component;
-    const componentCls = classnames_1.default(Main_module_scss_1.default.component, {
-        [Main_module_scss_1.default["component--transparent"]]: bg === "transparent",
-        [Main_module_scss_1.default["component--mobile"]]: bg === "mobile",
-    });
-    return (react_1.default.createElement("div", { className: Main_module_scss_1.default.container },
-        react_1.default.createElement("h1", { className: Main_module_scss_1.default.header }, info.name),
-        react_1.default.createElement("button", { onClick: handleTransparentBg }, "Transparent"),
-        react_1.default.createElement("button", { onClick: handleWhiteBg }, "White"),
-        react_1.default.createElement("button", { onClick: handleMobileBg }, "Mobile"),
-        react_1.default.createElement("div", { className: componentCls },
-            react_1.default.createElement(Component, null))));
-};
-exports.Main = Main;
-//# sourceMappingURL=Main.js.map

package/dist/demo/Main.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/demo/Main.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,4DAAoC;AAKpC,0EAAwC;AAExC,qDAAkD;AAClD,mDAAgD;AAShD,MAAM,kBAAkB,GAAG,CAAC,IAAY,EAAwB,EAAE;IAC9D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,GAAG,GAAuB,6BAAa,EACvC,OAA+B,CAAC;IAEpC,OAAO,KAAK,CAAC,MAAM,EAAE;QACjB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,EAAG,CAAC;QAC7B,OAAO,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAG,KAAK,CAAC,CAAC;QAEvB,IAAI,CAAC,OAAO,EAAE;YACV,OAAO,IAAI,CAAC;SACf;QACD,GAAG,GAAG,OAAO,CAAC,QAAQ,CAAC;KAC1B;IAED,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE;QACpB,OAAO;YACH,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,SAAS,EAAE,OAAO,CAAC,SAAS;SAC/B,CAAC;KACL;IAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,gBAAQ,CAAK,OAAO,CAAC,CAAC;IAE1C,MAAM,IAAI,GAAG,yBAAW,EAAE,CAAC;IAC3B,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACvC,MAAM,IAAI,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;IAEjD,MAAM,mBAAmB,GAAG,mBAAW,CAAC,GAAG,EAAE;QACzC,KAAK,CAAC,aAAa,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,aAAa,GAAG,mBAAW,CAAC,GAAG,EAAE;QACnC,KAAK,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,cAAc,GAAG,mBAAW,CAAC,GAAG,EAAE;QACpC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,IAAI,EAAE;QACP,OAAO,CACH,uCAAK,SAAS,EAAE,0BAAM,CAAC,SAAS;YAC5B,sCAAI,SAAS,EAAE,0BAAM,CAAC,MAAM,eAAe;4CAEzC,CACT,CAAC;KACL;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;IAEjC,MAAM,YAAY,GAAG,oBAAU,CAAC,0BAAM,CAAC,SAAS,EAAE;QAC9C,CAAC,0BAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,EAAE,KAAK,aAAa;QACxD,CAAC,0BAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,EAAE,KAAK,QAAQ;KACjD,CAAC,CAAC;IAEH,OAAO,CACH,uCAAK,SAAS,EAAE,0BAAM,CAAC,SAAS;QAC5B,sCAAI,SAAS,EAAE,0BAAM,CAAC,MAAM,IAAG,IAAI,CAAC,IAAI,CAAM;QAC9C,0CAAQ,OAAO,EAAE,mBAAmB,kBAAsB;QAC1D,0CAAQ,OAAO,EAAE,aAAa,YAAgB;QAC9C,0CAAQ,OAAO,EAAE,cAAc,aAAiB;QAEhD,uCAAK,SAAS,EAAE,YAAY;YACxB,8BAAC,SAAS,OAAG,CACX,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}

package/dist/demo/Main.module.scss

@@ -1,30 +0,0 @@
-.container {
-    flex: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.component {
-    padding: 20px;
-    flex: 1;
-    overflow: auto;
-
-    &--transparent {
-        background-position: 0px 0px, 10px 10px;
-        background-size: 20px 20px;
-        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
-    }
-
-    &--mobile {
-        border-radius: 20px;
-        max-width: 400px;
-        width: 100%;
-        padding: 0;
-        margin: 20px 0;
-        align-self: center;
-        border: 10px solid black;
-        border-top-width: 30px;
-        position: relative;
-    }
-}

package/dist/demo/Menu.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-import type { componentsMap } from "./componentsMap";
-interface Props {
-    ancestors?: string[];
-    list: typeof componentsMap;
-}
-declare const Menu: React.FC<Props>;
-export { Menu };
-//# sourceMappingURL=Menu.d.ts.map

package/dist/demo/Menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/demo/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,IAAI,EAAE,OAAO,aAAa,CAAC;CAC9B;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuBzB,CAAC;AAMF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/demo/Menu.js

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Menu = void 0;
-const react_1 = __importDefault(require("react"));
-const Menu_module_scss_1 = __importDefault(require("./Menu.module.scss"));
-const Menu = (props) => {
-    const cmp = Object.entries(props.list).map(([urlHash, component]) => {
-        const label = component.name;
-        const children = `children` in component && component.children
-            ? react_1.default.createElement(Menu, { ancestors: [...props.ancestors, urlHash], list: component.children })
-            : null;
-        return (react_1.default.createElement("li", { key: urlHash },
-            react_1.default.createElement("a", { href: "#" + [...props.ancestors, urlHash].join("/") }, label),
-            children));
-    });
-    const contents = react_1.default.createElement("ul", null, cmp);
-    if (!props.ancestors.length) {
-        cmp.unshift(react_1.default.createElement("li", { key: "--main" },
-            react_1.default.createElement("a", { href: "#" }, "Main")));
-        return react_1.default.createElement("menu", { className: Menu_module_scss_1.default.menu }, contents);
-    }
-    return contents;
-};
-exports.Menu = Menu;
-Menu.defaultProps = {
-    ancestors: [],
-};
-//# sourceMappingURL=Menu.js.map

package/dist/demo/Menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/demo/Menu.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,0EAAwC;AAQxC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE;QAChE,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC;QAC7B,MAAM,QAAQ,GAAG,UAAU,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ;YAC1D,CAAC,CAAC,8BAAC,IAAI,IAAC,SAAS,EAAE,CAAC,GAAG,KAAK,CAAC,SAAU,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,QAAQ,GAAI;YAC/E,CAAC,CAAC,IAAI,CAAC;QAEX,OAAO,CACH,sCAAI,GAAG,EAAE,OAAO;YACZ,qCAAG,IAAI,EAAE,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAU,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,KAAK,CAAK;YACnE,QAAQ,CACR,CACR,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,0CAAK,GAAG,CAAM,CAAC;IAEhC,IAAI,CAAC,KAAK,CAAC,SAAU,CAAC,MAAM,EAAE;QAC1B,GAAG,CAAC,OAAO,CAAC,sCAAI,GAAG,EAAE,QAAQ;YAAE,qCAAG,IAAI,EAAE,GAAG,WAAU,CAAK,CAAC,CAAC;QAC5D,OAAO,wCAAM,SAAS,EAAE,0BAAM,CAAC,IAAI,IAAG,QAAQ,CAAQ,CAAC;KAC1D;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAMO,oBAAI;AAJb,IAAI,CAAC,YAAY,GAAG;IAChB,SAAS,EAAE,EAAE;CAChB,CAAC"}

package/dist/demo/Menu.module.scss

@@ -1,41 +0,0 @@
-.menu {
-    margin: 0;
-    padding: 0;
-    border-right: 1px solid black;
-
-    ul {
-        margin: 0 0 0 15px;
-        padding: 0;
-    }
-
-    li {
-        padding: 0;
-        margin: 0;
-        list-style-type: none;
-    }
-
-    > ul {
-        margin: 0;
-        display: block;
-    }
-
-    > ul > li > a {
-        padding: 10px;
-        text-transform: uppercase;
-        font-size: 16px;
-    }
-
-    a {
-        padding: 5px 10px;
-        display: block;
-        color: black;
-        text-decoration: none;
-        font-size: 14px;
-
-        &:hover {
-            background: var(--active-bg);
-        }
-
-        --focus-bg-set: var(--focus-color);
-    }
-}

package/dist/demo/components/form/Checkbox.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-declare const CheckboxDemo: React.FC;
-export { CheckboxDemo };
-//# sourceMappingURL=Checkbox.d.ts.map

package/dist/demo/components/form/Checkbox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/demo/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAIrD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAQzB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}