react-miui 0.0.1 → 0.3.0

package/dist/components/layout/header/StickyHeader.module.scss

@@ -0,0 +1,18 @@
+.stickyHeader {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &__content {
+        flex: 1;
+        overflow: auto;
+
+        &--bottom, &--right {
+            order: 1;
+        }
+    }
+}
+
+.stickyHeader--left, .stickyHeader--right {
+    flex-direction: row;
+}

package/dist/components/layout/list/Item.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface LinkProps {
+    href: string;
+}
+interface Props {
+    href?: string;
+    to?: string;
+    onClick?: () => void;
+    className?: string;
+    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+}
+declare const Item: React.FC<Props>;
+export { Item };
+//# sourceMappingURL=Item.d.ts.map

package/dist/components/layout/list/Item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;CAChE;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8BzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/layout/list/Item.js

@@ -0,0 +1,50 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Item_module_scss_1 = __importDefault(require("./Item.module.scss"));
+const Item = (props) => {
+    const { className, children, href, to, onClick, Link } = props, restProps = __rest(props, ["className", "children", "href", "to", "onClick", "Link"]);
+    const cls = classnames_1.default(Item_module_scss_1.default.item, className);
+    const liProps = {
+        className: cls,
+    };
+    if (to) {
+        if (!Link) {
+            throw new TypeError("`to` prop given without `Link` component");
+        }
+        return react_1.default.createElement("li", Object.assign({}, liProps),
+            react_1.default.createElement(Link, Object.assign({ href: to }, restProps), children));
+    }
+    if (href) {
+        const aProps = Object.assign({}, restProps);
+        if (onClick) {
+            aProps.onClick = onClick;
+        }
+        return react_1.default.createElement("li", Object.assign({}, liProps),
+            react_1.default.createElement("a", Object.assign({ href: href }, aProps), children));
+    }
+    if (onClick) {
+        return (react_1.default.createElement("li", Object.assign({}, liProps),
+            react_1.default.createElement("button", Object.assign({ className: Item_module_scss_1.default.button, onClick: props.onClick }, restProps), children)));
+    }
+    return react_1.default.createElement("li", Object.assign({}, liProps),
+        react_1.default.createElement("div", Object.assign({}, restProps), children));
+};
+exports.Item = Item;
+//# sourceMappingURL=Item.js.map

package/dist/components/layout/list/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,0EAAwC;AAcxC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAtE,0DAA8D,CAAQ,CAAC;IAC7E,MAAM,GAAG,GAAG,oBAAU,CAAC,0BAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE/C,MAAM,OAAO,GAAG;QACZ,SAAS,EAAE,GAAG;KACjB,CAAC;IAEF,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,sDAAQ,OAAO;YAAE,8BAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAM,SAAS,GAAG,QAAQ,CAAQ,CAAK,CAAC;KACjF;IACD,IAAI,IAAI,EAAE;QACN,MAAM,MAAM,qBAA0D,SAAS,CAAE,CAAC;QAClF,IAAI,OAAO,EAAE;YACT,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;SAC5B;QACD,OAAO,sDAAQ,OAAO;YAAE,mDAAG,IAAI,EAAE,IAAI,IAAM,MAAM,GAAG,QAAQ,CAAK,CAAK,CAAC;KAC1E;IACD,IAAI,OAAO,EAAE;QACT,OAAO,CACH,sDAAQ,OAAO;YACX,wDAAQ,SAAS,EAAE,0BAAM,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAAM,SAAS,GAAG,QAAQ,CAAU,CAC3F,CACR,CAAC;KACL;IACD,OAAO,sDAAQ,OAAO;QAAE,uDAAS,SAAS,GAAG,QAAQ,CAAO,CAAK,CAAC;AACtE,CAAC,CAAC;AAEO,oBAAI"}

package/dist/components/layout/list/Item.module.scss

@@ -0,0 +1,23 @@
+.item {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    font-size: 15px;
+
+    &:not(:first-child) > * {
+        border-top: 0.37px solid var(--header-border);
+    }
+
+    > * {
+        display: block;
+        padding: 20px 0;
+        text-decoration: none;
+    }
+}
+
+.button {
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+}

package/dist/components/layout/list/List.d.ts

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

package/dist/components/layout/list/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAIjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/layout/list/List.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const react_1 = __importDefault(require("react"));
+const List_module_scss_1 = __importDefault(require("./List.module.scss"));
+const List = (props) => {
+    return (react_1.default.createElement("ul", { className: List_module_scss_1.default.list }, props.children));
+};
+exports.List = List;
+//# sourceMappingURL=List.js.map

package/dist/components/layout/list/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,0EAAwC;AAExC,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,OAAO,CACH,sCAAI,SAAS,EAAE,0BAAM,CAAC,IAAI,IAAG,KAAK,CAAC,QAAQ,CAAM,CACpD,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}

package/dist/components/layout/list/List.module.scss

@@ -0,0 +1,4 @@
+.list {
+    margin: 0 23px;
+    padding: 0;
+}

package/dist/components/ui/action/Action.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { ReactNode } from "react";
+import type { ICON } from "../../icons/Icon";
+interface LinkProps {
+    href: string;
+}
+interface Props {
+    href?: string;
+    to?: string;
+    onClick?: () => void;
+    icon?: ICON | Exclude<ReactNode, string>;
+    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    label?: ReactNode;
+}
+declare const Action: React.VFC<Props>;
+export { Action };
+//# sourceMappingURL=Action.d.ts.map

package/dist/components/ui/action/Action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAI7C,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;CAErB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAkC5B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/ui/action/Action.js

@@ -0,0 +1,44 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Action = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("../../icons/Icon");
+const Action_module_scss_1 = __importDefault(require("./Action.module.scss"));
+const Action = (props) => {
+    const { icon, label, href, to, Link } = props, restProps = __rest(props, ["icon", "label", "href", "to", "Link"]);
+    let iconElem = icon;
+    if (typeof icon === "string") {
+        iconElem = react_1.default.createElement(Icon_1.Icon, { name: icon });
+    }
+    const labelElem = label ? react_1.default.createElement("div", { className: Action_module_scss_1.default.label }, label) : null;
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: Action_module_scss_1.default.action }, iconElem),
+        labelElem));
+    if (to) {
+        if (!Link) {
+            throw new TypeError("`to` prop given without `Link` component");
+        }
+        return react_1.default.createElement(Link, Object.assign({ href: to }, restProps),
+            react_1.default.createElement("a", { className: Action_module_scss_1.default.a }, content));
+    }
+    if (href) {
+        return react_1.default.createElement("a", Object.assign({ href: href, className: Action_module_scss_1.default.a }, restProps), content);
+    }
+    return (react_1.default.createElement("button", { onClick: props.onClick, className: Action_module_scss_1.default.button }, content));
+};
+exports.Action = Action;
+//# sourceMappingURL=Action.js.map

package/dist/components/ui/action/Action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAI1B,2CAAwC;AACxC,8EAA0C;AAgB1C,MAAM,MAAM,GAAqB,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAArD,uCAA6C,CAAQ,CAAC;IAE5D,IAAI,QAAQ,GAAc,IAAI,CAAC;IAC/B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC1B,QAAQ,GAAG,8BAAC,WAAI,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;KAC3C;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,4BAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,MAAM,OAAO,GAAG,CACZ;QACI,uCAAK,SAAS,EAAE,4BAAM,CAAC,MAAM,IAAG,QAAQ,CAAO;QAC9C,SAAS,CACX,CACN,CAAC;IAEF,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,8BAAC,IAAI,kBAAC,IAAI,EAAE,EAAE,IAAM,SAAS;YAAE,qCAAG,SAAS,EAAE,4BAAM,CAAC,CAAC,IAAG,OAAO,CAAK,CAAO,CAAC;KACtF;IAED,IAAI,IAAI,EAAE;QACN,OAAO,mDAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,4BAAM,CAAC,CAAC,IAAM,SAAS,GAAG,OAAO,CAAK,CAAC;KAC3E;IAED,OAAO,CACH,0CAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,4BAAM,CAAC,MAAM,IACnD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}

package/dist/components/ui/action/Action.module.scss

@@ -0,0 +1,26 @@
+.action {
+    height: calc(102px / var(--ratio-dimensions));
+    width: calc(102px / var(--ratio-dimensions));
+    border-radius: 100px;
+    border: calc(1px / var(--ratio-border)) solid var(--button-border);
+    background: white;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.a {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.button {
+    border: none;
+    padding: 0;
+    background: none;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(18px / var(--ratio-dimensions));
+}

package/dist/components/ui/action/EqualActions.d.ts

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

package/dist/components/ui/action/EqualActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EqualActions.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiBjC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/ui/action/EqualActions.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EqualActions = void 0;
+const react_1 = __importDefault(require("react"));
+const Action_1 = require("./Action");
+const EqualActions_module_scss_1 = __importDefault(require("./EqualActions.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+const EqualActions = (props) => {
+    react_1.default.Children.forEach(props.children, (child) => {
+        if (!child || typeof child !== "object" || !("type" in child) || child.type !== Action_1.Action) {
+            throw new TypeError("Every child of EqualActions must be an Action component");
+        }
+    });
+    const style = {
+        "--actions-count": react_1.default.Children.count(props.children),
+    };
+    return (react_1.default.createElement("div", { className: classnames_1.default(EqualActions_module_scss_1.default.actions, props.className), style: style }, props.children));
+};
+exports.EqualActions = EqualActions;
+//# sourceMappingURL=EqualActions.js.map

package/dist/components/ui/action/EqualActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EqualActions.js","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qCAAkC;AAElC,0FAAgD;AAChD,4DAAoC;AAMpC,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAM,EAAE;YACpF,MAAM,IAAI,SAAS,CAAC,yDAAyD,CAAC,CAAC;SAClF;IACL,CAAC,CAAC,CAAC;IAGH,MAAM,KAAK,GAAG;QACV,iBAAiB,EAAE,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;KACnC,CAAC;IAEzB,OAAO,CACH,uCAAK,SAAS,EAAE,oBAAU,CAAC,kCAAM,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACpE,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oCAAY"}

package/dist/components/ui/action/EqualActions.module.scss

@@ -0,0 +1,6 @@
+.actions {
+    --actions-count: 1;
+    display: inline-grid;
+    grid-template-columns: repeat(var(--actions-count), 1fr);
+    gap: calc(56px / var(--ratio-dimensions));
+}

package/dist/components/ui/button/Button.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface Props {
+    disabled?: boolean;
+    variant?: "inline" | "outline";
+}
+declare const Button: React.FC<Props>;
+export { Button };
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/ui/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAW3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/ui/button/Button.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const react_1 = __importDefault(require("react"));
+const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+const makeVariants_1 = require("../../../demo/utils/makeVariants");
+const Button = (props) => {
+    const variants = makeVariants_1.makeVariants(props.variant);
+    const cls = classnames_1.default(Button_module_scss_1.default.btn, {
+        [Button_module_scss_1.default["btn--inline"]]: variants.includes("inline"),
+        [Button_module_scss_1.default["btn--outline"]]: variants.includes("outline"),
+    });
+    return (react_1.default.createElement("button", { className: cls, disabled: props.disabled }, props.children));
+};
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

package/dist/components/ui/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,8EAA0C;AAC1C,4DAAoC;AACpC,mEAAgE;AAOhE,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,QAAQ,GAAG,2BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,GAAG,GAAG,oBAAU,CAAC,4BAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,4BAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,4BAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,CAAC,CAAC;IAEH,OAAO,CACH,0CAAQ,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAU,CAC9E,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}

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

@@ -0,0 +1,25 @@
+.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/dist/components/ui/directionPad/Button.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface Props {
+    onClick?: () => void;
+}
+declare const PadButton: React.FC<Props>;
+export { PadButton };
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/ui/directionPad/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAI9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/ui/directionPad/Button.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PadButton = void 0;
+const react_1 = __importDefault(require("react"));
+const Pad_module_scss_1 = __importDefault(require("./Pad.module.scss"));
+const PadButton = (props) => {
+    return (react_1.default.createElement("button", Object.assign({}, props, { className: Pad_module_scss_1.default.pad__button }),
+        react_1.default.createElement("span", { className: Pad_module_scss_1.default.pad__dot })));
+};
+exports.PadButton = PadButton;
+//# sourceMappingURL=Button.js.map

package/dist/components/ui/directionPad/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,wEAAuC;AAMvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,OAAO,CACH,0DAAY,KAAK,IAAE,SAAS,EAAE,yBAAM,CAAC,WAAW;QAAE,wCAAM,SAAS,EAAE,yBAAM,CAAC,QAAQ,GAAI,CAAS,CAClG,CAAC;AACN,CAAC,CAAC;AAEO,8BAAS"}

package/dist/components/ui/directionPad/Middle.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface Props {
+    label?: string;
+    onClick?: () => void;
+}
+declare const PadMiddle: React.FC<Props>;
+export { PadMiddle };
+//# sourceMappingURL=Middle.d.ts.map

package/dist/components/ui/directionPad/Middle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Middle.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAI9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/ui/directionPad/Middle.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PadMiddle = void 0;
+const react_1 = __importDefault(require("react"));
+const Pad_module_scss_1 = __importDefault(require("./Pad.module.scss"));
+const PadMiddle = (props) => {
+    return (react_1.default.createElement("button", { onClick: props.onClick, className: Pad_module_scss_1.default.pad__middle }, props.label));
+};
+exports.PadMiddle = PadMiddle;
+//# sourceMappingURL=Middle.js.map

package/dist/components/ui/directionPad/Middle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Middle.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Middle.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,wEAAuC;AAOvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,OAAO,CACH,0CAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,yBAAM,CAAC,WAAW,IAAG,KAAK,CAAC,KAAK,CAAU,CACxF,CAAC;AACN,CAAC,CAAC;AAEO,8BAAS"}

package/dist/components/ui/directionPad/Pad.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface Props {
+    onUpPress?: () => void;
+    onDownPress?: () => void;
+    onLeftPress?: () => void;
+    onRightPress?: () => void;
+    onMiddlePress?: () => void;
+    middleLabel?: string;
+}
+declare const Pad: React.FC<Props>;
+export { Pad as DirectionPad };
+//# sourceMappingURL=Pad.d.ts.map

package/dist/components/ui/directionPad/Pad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pad.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Pad.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgBxB,CAAC;AAEF,OAAO,EAAE,GAAG,IAAI,YAAY,EAAE,CAAC"}

package/dist/components/ui/directionPad/Pad.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectionPad = void 0;
+const react_1 = __importDefault(require("react"));
+const Button_js_1 = require("./Button.js");
+const Middle_js_1 = require("./Middle.js");
+const Pad_module_scss_1 = __importDefault(require("./Pad.module.scss"));
+const Pad = (props) => {
+    return (react_1.default.createElement("div", { className: Pad_module_scss_1.default.pad },
+        react_1.default.createElement("div", { className: Pad_module_scss_1.default.pad__line },
+            react_1.default.createElement(Button_js_1.PadButton, { onClick: props.onUpPress })),
+        react_1.default.createElement("div", { className: Pad_module_scss_1.default.pad__line },
+            react_1.default.createElement(Button_js_1.PadButton, { onClick: props.onLeftPress }),
+            react_1.default.createElement(Middle_js_1.PadMiddle, { onClick: props.onMiddlePress, label: props.middleLabel }),
+            react_1.default.createElement(Button_js_1.PadButton, { onClick: props.onRightPress })),
+        react_1.default.createElement("div", { className: Pad_module_scss_1.default.pad__line },
+            react_1.default.createElement(Button_js_1.PadButton, { onClick: props.onDownPress }))));
+};
+exports.DirectionPad = Pad;
+//# sourceMappingURL=Pad.js.map

package/dist/components/ui/directionPad/Pad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pad.js","sourceRoot":"","sources":["../../../../src/components/ui/directionPad/Pad.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,2CAAkD;AAClD,2CAAkD;AAElD,wEAAuC;AAWvC,MAAM,GAAG,GAAoB,CAAC,KAAK,EAAE,EAAE;IACnC,OAAO,CACH,uCAAK,SAAS,EAAE,yBAAM,CAAC,GAAG;QACtB,uCAAK,SAAS,EAAE,yBAAM,CAAC,SAAS;YAC5B,8BAAC,qBAAM,IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,GAAI,CAClC;QACN,uCAAK,SAAS,EAAE,yBAAM,CAAC,SAAS;YAC5B,8BAAC,qBAAM,IAAC,OAAO,EAAE,KAAK,CAAC,WAAW,GAAI;YACtC,8BAAC,qBAAM,IAAC,OAAO,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,GAAI;YAClE,8BAAC,qBAAM,IAAC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAI,CACrC;QACN,uCAAK,SAAS,EAAE,yBAAM,CAAC,SAAS;YAC5B,8BAAC,qBAAM,IAAC,OAAO,EAAE,KAAK,CAAC,WAAW,GAAI,CACpC,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEc,2BAAY"}

package/dist/components/ui/directionPad/Pad.module.scss

@@ -0,0 +1,45 @@
+.pad {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 150px;
+    border-radius: 666px;
+    width: 150px;
+    border: 1px solid #aaa;
+    background: white;
+
+    &__line {
+        display: flex;
+    }
+
+    &__button {
+        height: 50px;
+        width: 50px;
+        margin: 0;
+        border-radius: 666px;
+        border: none;
+        display: block;
+        background: none;
+    }
+
+    &__middle {
+        display: block;
+        margin: 0;
+        height: 50px;
+        width: 50px;
+        border: 1px solid #999;
+        box-sizing: border-box;
+        border-radius: 666px;
+        background: none;
+    }
+
+    &__dot {
+        display: block;
+        width: 4px;
+        height: 4px;
+        border-radius: 666px;
+        background: black;
+        margin: auto;
+    }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../src/demo/Demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAOjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"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

@@ -8,9 +8,10 @@ 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, null),
+        react_1.default.createElement(Menu_1.Menu, { list: componentsMap_1.componentsMap }),
         react_1.default.createElement(Main_1.Main, null)));
 };
 exports.Demo = Demo;

package/dist/demo/Demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Demo.js","sourceRoot":"","sources":["../../src/demo/Demo.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,0EAAwC;AACxC,iCAA8B;AAC9B,iCAA8B;AAE9B,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,OAAO,CACH,uCAAK,SAAS,EAAE,0BAAM,CAAC,SAAS;QAC5B,8BAAC,WAAI,OAAG;QACR,8BAAC,WAAI,OAAG,CACN,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}
+{"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/Main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../src/demo/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EA+BjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"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

@@ -26,28 +26,56 @@ 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 Checkbox_1 = require("./components/form/Checkbox");
 const safeUseHash_1 = require("./utils/safeUseHash");
-const componentsMap = {
-    checkbox: Checkbox_1.CheckboxDemo,
+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 Component = componentsMap[hashWithoutHash];
-    if (!Component) {
+    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 }, hash),
-        react_1.default.createElement("button", { onClick: () => { setBg("transparent"); } }, "Transparent"),
-        react_1.default.createElement("button", { onClick: () => { setBg("white"); } }, "White"),
+        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))));
 };