react-miui 0.0.3 → 0.4.0

package/src/demo/components/ui/action/Action.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import Link from "next/link";
+import { Action } from "../../../../components/ui/action/Action";
+import { ICON } from "../../../../components/icons/Icon";
+import { StickyHeader } from "../../../../components/layout/header/StickyHeader";
+import { Header } from "../../../../components/layout/header/Header";
+
+import styles from "./ActionDemo.module.scss";
+import { EqualActions } from "../../../../components/ui/action/EqualActions";
+
+const handleClick = () => { alert(1); };
+
+const ActionDemo: React.FC = () => {
+    return (
+        <>
+            <div>
+                <Action icon={ICON.checkmark} /> - action without action
+            </div>
+            <div>
+                <Action icon={ICON.checkmark} Link={Link} to={"react-miui"} /> - internal link action
+            </div>
+            <div>
+                <Action icon={ICON.checkmark} href={"https://www.npmjs.com/package/react-miui"} /> - external link action
+            </div>
+            <div>
+                <Action icon={ICON.checkmark} onClick={handleClick} /> - onClick action
+            </div>
+            <div>
+                <Action icon={ICON.checkmark} onClick={handleClick} label={"Pineapple"} /> - onClick action with label
+            </div>
+        </>
+    );
+};
+
+const ActionsOnLeft = () => {
+    return (
+        <StickyHeader position={"left"}>
+            <Header center={true} className={styles.header}>
+                <Action icon={ICON.checkmark} />
+                <Action icon={ICON.checkmark} />
+                <Action icon={ICON.checkmark} />
+            </Header>
+            <StickyHeader.Content>
+                content
+            </StickyHeader.Content>
+        </StickyHeader>
+
+    );
+};
+
+const ActionsOnBottom = () => {
+    return (
+        <StickyHeader position={"bottom"}>
+            <Header center={true} className={styles.header}>
+                <Action icon={ICON.checkmark} />
+                <Action icon={ICON.checkmark} />
+                <Action icon={ICON.checkmark} />
+            </Header>
+            <StickyHeader.Content>
+                content
+            </StickyHeader.Content>
+        </StickyHeader>
+
+    );
+};
+
+const ActionLabelsOnBottom = () => {
+    return (
+        <StickyHeader position={"bottom"}>
+            <Header center={true} className={styles.header}>
+                <Action icon={ICON.checkmark} label={"Add"} />
+                <Action icon={ICON.checkmark} label={"Delete"} />
+                <Action icon={ICON.checkmark} label={"Share on Web"} />
+            </Header>
+            <StickyHeader.Content>
+                <StickyHeader position={"top"}>
+                    <Header center={true} className={styles.header}>
+                        <Action icon={ICON.checkmark} label={"Add"} />
+                        <Action icon={ICON.checkmark} label={"Delete"} />
+                        <Action icon={ICON.checkmark} label={"Share"} />
+                    </Header>
+                    <StickyHeader.Content>
+                        When you put just `Action`s into Header it will be automatically wrapped with EqualActions so if
+                        labels width are not equal each action will take the same space as the most wide item.
+                        If you don't like this behavior - wrap your actions into React.Fragment {"<></>"} or pass extra
+                        {"<span />"}.
+                    </StickyHeader.Content>
+                </StickyHeader>
+            </StickyHeader.Content>
+        </StickyHeader>
+    );
+};
+
+const ActionsDemo = () => {
+    return (
+        <div>
+            To make every action take the same amount of horizontal space you need to wrap every Action with
+            EqualActions wrapper. Some components (like Header) will do that automatically for you. If you need to use
+            Actions outside of such components - manually wrap them with EqualActions.
+
+            <div>
+                <EqualActions>
+                    <Action icon={ICON.checkmark} label={"Add"} />
+                    <Action icon={ICON.checkmark} label={"Delete"} />
+                    <Action icon={ICON.checkmark} label={"Share on Web"} />
+                </EqualActions>
+            </div>
+        </div>
+    );
+};
+
+export { ActionDemo, ActionsOnLeft, ActionsOnBottom, ActionLabelsOnBottom, ActionsDemo };

package/src/demo/components/ui/action/ActionDemo.module.scss

@@ -0,0 +1,3 @@
+.header {
+    gap: calc(56px / var(--ratio-dimensions));
+}

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

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

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { Icon, ICON, Item, List } from "../../../../index.js";
+
+const IconsDemo: React.FC = () => {
+    const icons = Object.values(ICON).map((value) => {
+        return (
+            <Item key={value} ratio={"1/"}>
+                {value}
+                <Icon name={value} />
+            </Item>
+        );
+    });
+
+    return (
+        <List>
+            {icons}
+        </List>
+    );
+};
+
+export { IconsDemo };

package/src/demo/componentsMap.ts

@@ -1,6 +1,11 @@
-import type React from "react";
+import type { AnyComponent } from "../types";
 import { CheckboxDemo } from "./components/form/Checkbox";
-import { HeaderDemo } from "./components/layout/header/Header";
+import {
+    CenteredHeaderDemo,
+    HeaderDemo,
+    HeaderWithButtonsDemo,
+    HeaderWithButtonsOnSideDemo, ToolbarVariantDemo,
+} from "./components/layout/header/Header";
 import {
     StickyHeaderBottomDemo,
     StickyHeaderDemo, StickyHeaderLeftCenterDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo,
@@ -8,8 +13,20 @@ import {
 } from "./components/layout/header/StickyHeader";
 import { ListItemDemo } from "./components/layout/list/List.Item";
 import { DirectionPadDemo } from "./components/ui/directionPad/Pad";
-
-type AnyComponent = React.ComponentClass | React.FC;
+import { IconsDemo } from "./components/ui/icons/Icons";
+import { ButtonDemo } from "./components/ui/button/ButtonDemo";
+import {
+    ActionDemo,
+    ActionLabelsOnBottom,
+    ActionsDemo,
+    ActionsOnBottom,
+    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
@@ -23,48 +40,120 @@ interface TheMapItem {
 }
 
 const componentsMap: TheMap = {
+    Button: {
+        name: "Button",
+        Component: ButtonDemo,
+    },
     Checkbox: {
         name: "Checkbox",
         Component: CheckboxDemo,
     },
+    Toggle: {
+        name: "Toggle",
+        Component: ToggleDemo,
+    },
     Header: {
         name: "Header",
         Component: HeaderDemo,
         children: {
+            Centered: {
+                name: "Centered",
+                Component: CenteredHeaderDemo,
+            },
+            Toolbar: {
+                name: "Toolbar",
+                Component: ToolbarVariantDemo,
+            },
+            WithButtons: {
+                name: "With buttons",
+                Component: HeaderWithButtonsDemo,
+                children: {
+                    OnLeft: {
+                        name: "On the side",
+                        Component: HeaderWithButtonsOnSideDemo,
+                    },
+                },
+            },
             Sticky: {
-                name: "Sticky header",
+                name: "Sticky",
                 Component: StickyHeaderDemo,
+                children: {
+                    StickyBottom: {
+                        name: "On bottom",
+                        Component: StickyHeaderBottomDemo,
+                    },
+                    StickyTopBottom: {
+                        name: "On top & bottom",
+                        Component: StickyHeaderTopBottomDemo,
+                    },
+                    StickyLeft: {
+                        name: "On left",
+                        Component: StickyHeaderLeftDemo,
+                    },
+                    StickyRight: {
+                        name: "On right",
+                        Component: StickyHeaderRightDemo,
+                    },
+                    StickyLeftCentered: {
+                        name: "On left centered",
+                        Component: StickyHeaderLeftCenterDemo,
+                    },
+                },
             },
-            StickyBottom: {
-                name: "On bottom",
-                Component: StickyHeaderBottomDemo,
-            },
-            StickyTopBottom: {
-                name: "On top & bottom",
-                Component: StickyHeaderTopBottomDemo,
+        },
+    },
+    Action: {
+        name: "Action",
+        Component: ActionDemo,
+        children: {
+            ActionOnBottom: {
+                name: "Actions on header",
+                Component: ActionsOnBottom,
             },
-            StickyLeft: {
-                name: "On left",
-                Component: StickyHeaderLeftDemo,
+            ActionLabelsOnBottom: {
+                name: "Actions with labels on header",
+                Component: ActionLabelsOnBottom,
             },
-            StickyRight: {
-                name: "On right",
-                Component: StickyHeaderRightDemo,
+            ActionOnLeft: {
+                name: "Actions on left header",
+                Component: ActionsOnLeft,
             },
-            StickyLeftCentered: {
-                name: "On left centered",
-                Component: StickyHeaderLeftCenterDemo,
+            EqualActions: {
+                name: "EqualActions (wrapper)",
+                Component: ActionsDemo,
             },
         },
     },
     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",
         Component: DirectionPadDemo,
     },
+    Icons: {
+        name: "Icons",
+        Component: IconsDemo,
+    },
 };
 
 export {

package/src/demo/utils/makeVariants.ts

@@ -0,0 +1,13 @@
+const makeVariants = <T extends string>(variants: T | T[] | undefined): T[] => {
+    if (!variants) {
+        return [];
+    }
+    if (typeof variants === "string") {
+        return variants.split(" ").filter(Boolean) as T[];
+    }
+    return variants;
+};
+
+export {
+    makeVariants,
+};

package/src/global.scss

@@ -1,15 +1,18 @@
-// Font-size ratio: 1,6 (666?)
-// Border ratio: 2,6666
-// Dimensions ratio: 3
-
 // @TODO prefix variable names
 :root {
+    --ratio-dimensions: 3;
+    --ratio-border:     2.666666;
+    --ratio-font:       1.666666;
+
     --main-color: #008ad2; // used
     --main-color-alt: #006AA9;
 
     --active-bg: #d3d3d3;
     --inactive-bg: #d3d3d3; // used
 
+    --toggle-handle-bg: #e0e0e0;
+    --toggle-handle-border: #cdcdcd;
+
     --icon: #636363;
     --border: #d5d5d5;
     --button-border: #bababa;
@@ -17,18 +20,39 @@
     --header-border: #c8c8c9;
     --header-bg: #efeff0;
     --header-text: #484848;
+    --text: #323232;
+    --sub: #959595;
 
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
 
-    --color1: #00aeeb;
-    --color2: #9d6ee5;
-    --color3: #00c293;
-    --color4: #ff5290;
-    --color5: #ff7259;
-    --color6: #4083f7;
+    // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
+    --blue1: #038bf4;
+    --orange1: #ff7200;
+    --orange1-darker: #cc5b00;
+    --purple1: #7357e8;
+    --green1: #3ec234;
+    --green1-darker: #38af2f;
+    --pink1: #ff388f;
+    --red1: #ea2700;
+
+    --grey1: #737373;
+
+    --focus-color: #dcaf00;
 }
 
-*:focus { // @TODO take care of focus
+*: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/src/index.ts

@@ -1,6 +1,11 @@
 export * from "./components/form/Checkbox.js";
+
+export * from "./components/icons/Icon.js";
+
 export * from "./components/layout/header/Header.js";
 export * from "./components/layout/header/StickyHeader.js";
 export * from "./components/layout/list/List.js";
 export * from "./components/layout/list/Item.js";
+
+export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";

package/src/pages/react-miui.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const ReactMiuiPage = () => {
+    // @TODO nicer UI, add back button etc
+    return (
+        <div>
+            Hi. This is an example page to demonstrate application level routing.
+        </div>
+    );
+};
+
+export default ReactMiuiPage;

package/src/types.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+
+type AnyComponent = React.ComponentClass | React.FC | React.VFC;
+
+export type {
+    AnyComponent,
+};

package/.postcssrc

@@ -1,9 +0,0 @@
-{
-    "modules": true,
-    "plugins": {
-        "postcss-modules": {
-            "generateScopedName": "_[name]__[local]"
-        },
-        "postcss-nested": true
-    }
-}

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;AA0CrD,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;AAEpC,0EAAwC;AAExC,qDAAkD;AAElD,mDAAgD;AAUhD,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"}