react-miui 0.0.1 → 0.3.0

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { Icon } from "../../icons/Icon";
+import styles from "./Action.module.scss";
+const Action = (props) => {
+    const { icon, label, href, to, Link, ...restProps } = props;
+    let iconElem = icon;
+    if (typeof icon === "string") {
+        iconElem = React.createElement(Icon, { name: icon });
+    }
+    const labelElem = label ? React.createElement("div", { className: styles.label }, label) : null;
+    const content = (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles.action }, iconElem),
+        labelElem));
+    if (to) {
+        if (!Link) {
+            throw new TypeError("`to` prop given without `Link` component");
+        }
+        return React.createElement(Link, { href: to, ...restProps },
+            React.createElement("a", { className: styles.a }, content));
+    }
+    if (href) {
+        return React.createElement("a", { href: href, className: styles.a, ...restProps }, content);
+    }
+    return (React.createElement("button", { onClick: props.onClick, className: styles.button }, content));
+};
+export { Action };
+//# sourceMappingURL=Action.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAgB1C,MAAM,MAAM,GAAqB,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5D,IAAI,QAAQ,GAAc,IAAI,CAAC;IAC/B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC1B,QAAQ,GAAG,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;KAC3C;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,MAAM,OAAO,GAAG,CACZ;QACI,6BAAK,SAAS,EAAE,MAAM,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,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS;YAAE,2BAAG,SAAS,EAAE,MAAM,CAAC,CAAC,IAAG,OAAO,CAAK,CAAO,CAAC;KACtF;IAED,IAAI,IAAI,EAAE;QACN,OAAO,2BAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,KAAM,SAAS,IAAG,OAAO,CAAK,CAAC;KAC3E;IAED,OAAO,CACH,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,IACnD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/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/esm/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/esm/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/esm/components/ui/action/EqualActions.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Action } from "./Action";
+import styles from "./EqualActions.module.scss";
+import classnames from "classnames";
+const EqualActions = (props) => {
+    React.Children.forEach(props.children, (child) => {
+        if (!child || typeof child !== "object" || !("type" in child) || child.type !== Action) {
+            throw new TypeError("Every child of EqualActions must be an Action component");
+        }
+    });
+    const style = {
+        "--actions-count": React.Children.count(props.children),
+    };
+    return (React.createElement("div", { className: classnames(styles.actions, props.className), style: style }, props.children));
+};
+export { EqualActions };
+//# sourceMappingURL=EqualActions.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,UAAU,MAAM,YAAY,CAAC;AAMpC,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,KAAK,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,MAAM,EAAE;YACpF,MAAM,IAAI,SAAS,CAAC,yDAAyD,CAAC,CAAC;SAClF;IACL,CAAC,CAAC,CAAC;IAGH,MAAM,KAAK,GAAG;QACV,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;KACnC,CAAC;IAEzB,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACpE,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/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/esm/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/esm/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/esm/components/ui/button/Button.js

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./Button.module.scss";
+import classnames from "classnames";
+import { makeVariants } from "../../../demo/utils/makeVariants";
+const Button = (props) => {
+    const variants = makeVariants(props.variant);
+    const cls = classnames(styles.btn, {
+        [styles["btn--inline"]]: variants.includes("inline"),
+        [styles["btn--outline"]]: variants.includes("outline"),
+    });
+    return (React.createElement("button", { className: cls, disabled: props.disabled }, props.children));
+};
+export { Button };
+//# sourceMappingURL=Button.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAOhE,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,CAAC,CAAC;IAEH,OAAO,CACH,gCAAQ,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAU,CAC9E,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/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/esm/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/esm/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/esm/components/ui/directionPad/Button.js

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./Pad.module.scss";
+const PadButton = (props) => {
+    return (React.createElement("button", { ...props, className: styles.pad__button },
+        React.createElement("span", { className: styles.pad__dot })));
+};
+export { PadButton };
+//# sourceMappingURL=Button.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW;QAAE,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI,CAAS,CAClG,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/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/esm/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/esm/components/ui/directionPad/Middle.js

@@ -0,0 +1,7 @@
+import React from "react";
+import styles from "./Pad.module.scss";
+const PadMiddle = (props) => {
+    return (React.createElement("button", { onClick: props.onClick, className: styles.pad__middle }, props.label));
+};
+export { PadMiddle };
+//# sourceMappingURL=Middle.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAOvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,OAAO,CACH,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,KAAK,CAAC,KAAK,CAAU,CACxF,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/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/esm/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/esm/components/ui/directionPad/Pad.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { PadButton as Button } from "./Button.js";
+import { PadMiddle as Middle } from "./Middle.js";
+import styles from "./Pad.module.scss";
+const Pad = (props) => {
+    return (React.createElement("div", { className: styles.pad },
+        React.createElement("div", { className: styles.pad__line },
+            React.createElement(Button, { onClick: props.onUpPress })),
+        React.createElement("div", { className: styles.pad__line },
+            React.createElement(Button, { onClick: props.onLeftPress }),
+            React.createElement(Middle, { onClick: props.onMiddlePress, label: props.middleLabel }),
+            React.createElement(Button, { onClick: props.onRightPress })),
+        React.createElement("div", { className: styles.pad__line },
+            React.createElement(Button, { onClick: props.onDownPress }))));
+};
+export { Pad as DirectionPad };
+//# sourceMappingURL=Pad.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,GAAG,GAAoB,CAAC,KAAK,EAAE,EAAE;IACnC,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG;QACtB,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;YAC5B,oBAAC,MAAM,IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,GAAI,CAClC;QACN,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;YAC5B,oBAAC,MAAM,IAAC,OAAO,EAAE,KAAK,CAAC,WAAW,GAAI;YACtC,oBAAC,MAAM,IAAC,OAAO,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,GAAI;YAClE,oBAAC,MAAM,IAAC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAI,CACrC;QACN,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;YAC5B,oBAAC,MAAM,IAAC,OAAO,EAAE,KAAK,CAAC,WAAW,GAAI,CACpC,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,GAAG,IAAI,YAAY,EAAE,CAAC"}

package/esm/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/esm/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/esm/demo/Demo.js

@@ -2,9 +2,10 @@ import React from "react";
 import styles from "./Demo.module.scss";
 import { Menu } from "./Menu";
 import { Main } from "./Main";
+import { componentsMap } from "./componentsMap";
 const Demo = (props) => {
     return (React.createElement("div", { className: styles.container },
-        React.createElement(Menu, null),
+        React.createElement(Menu, { list: componentsMap }),
         React.createElement(Main, null)));
 };
 export { Demo };

package/esm/demo/Demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Demo.js","sourceRoot":"","sources":["../../src/demo/Demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;QAC5B,oBAAC,IAAI,OAAG;QACR,oBAAC,IAAI,OAAG,CACN,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Demo.js","sourceRoot":"","sources":["../../src/demo/Demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;QAC5B,oBAAC,IAAI,IAAC,IAAI,EAAE,aAAa,GAAI;QAC7B,oBAAC,IAAI,OAAG,CACN,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/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/esm/demo/Main.js

@@ -1,28 +1,56 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import classnames from "classnames";
 import styles from "./Main.module.scss";
-import { CheckboxDemo } from "./components/form/Checkbox";
 import { safeUseHash } from "./utils/safeUseHash";
-const componentsMap = {
-    checkbox: CheckboxDemo,
+import { componentsMap } from "./componentsMap";
+const getComponentByHash = (hash) => {
+    const parts = hash.split("/");
+    let obj = 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] = useState("white");
     const hash = safeUseHash();
     const hashWithoutHash = hash.substr(1);
-    const Component = componentsMap[hashWithoutHash];
-    if (!Component) {
+    const info = getComponentByHash(hashWithoutHash);
+    const handleTransparentBg = useCallback(() => {
+        setBg("transparent");
+    }, []);
+    const handleWhiteBg = useCallback(() => {
+        setBg("white");
+    }, []);
+    const handleMobileBg = useCallback(() => {
+        setBg("mobile");
+    }, []);
+    if (!info) {
         return (React.createElement("div", { className: styles.container },
             React.createElement("h1", { className: styles.header }, "Hi there"),
             "This is poor man's StoryBook."));
     }
+    const Component = info.Component;
     const componentCls = classnames(styles.component, {
         [styles["component--transparent"]]: bg === "transparent",
+        [styles["component--mobile"]]: bg === "mobile",
     });
     return (React.createElement("div", { className: styles.container },
-        React.createElement("h1", { className: styles.header }, hash),
-        React.createElement("button", { onClick: () => { setBg("transparent"); } }, "Transparent"),
-        React.createElement("button", { onClick: () => { setBg("white"); } }, "White"),
+        React.createElement("h1", { className: styles.header }, info.name),
+        React.createElement("button", { onClick: handleTransparentBg }, "Transparent"),
+        React.createElement("button", { onClick: handleWhiteBg }, "White"),
+        React.createElement("button", { onClick: handleMobileBg }, "Mobile"),
         React.createElement("div", { className: componentCls },
             React.createElement(Component, null))));
 };

package/esm/demo/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/demo/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIlD,MAAM,aAAa,GAA2D;IAC1E,QAAQ,EAAE,YAAY;CACzB,CAAC;AAEF,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAK,OAAO,CAAC,CAAC;IAE1C,MAAM,IAAI,GAAG,WAAW,EAAE,CAAC;IAC3B,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;IAEjD,IAAI,CAAC,SAAS,EAAE;QACZ,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;YAC5B,4BAAI,SAAS,EAAE,MAAM,CAAC,MAAM,eAAe;4CAEzC,CACT,CAAC;KACL;IAED,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE;QAC9C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,EAAE,KAAK,aAAa;KAC3D,CAAC,CAAC;IAEH,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;QAC5B,4BAAI,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,IAAI,CAAM;QACzC,gCAAQ,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,kBAAsB;QACtE,gCAAQ,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,YAAgB;QAE1D,6BAAK,SAAS,EAAE,YAAY;YACxB,oBAAC,SAAS,OAAG,CACX,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/demo/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,UAAU,MAAM,YAAY,CAAC;AAKpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAShD,MAAM,kBAAkB,GAAG,CAAC,IAAY,EAAwB,EAAE;IAC9D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,GAAG,GAAuB,aAAa,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,QAAQ,CAAK,OAAO,CAAC,CAAC;IAE1C,MAAM,IAAI,GAAG,WAAW,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,WAAW,CAAC,GAAG,EAAE;QACzC,KAAK,CAAC,aAAa,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,KAAK,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,IAAI,EAAE;QACP,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;YAC5B,4BAAI,SAAS,EAAE,MAAM,CAAC,MAAM,eAAe;4CAEzC,CACT,CAAC;KACL;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;IAEjC,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE;QAC9C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,EAAE,KAAK,aAAa;QACxD,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,EAAE,KAAK,QAAQ;KACjD,CAAC,CAAC;IAEH,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;QAC5B,4BAAI,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,IAAI,CAAC,IAAI,CAAM;QAC9C,gCAAQ,OAAO,EAAE,mBAAmB,kBAAsB;QAC1D,gCAAQ,OAAO,EAAE,aAAa,YAAgB;QAC9C,gCAAQ,OAAO,EAAE,cAAc,aAAiB;QAEhD,6BAAK,SAAS,EAAE,YAAY;YACxB,oBAAC,SAAS,OAAG,CACX,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/demo/Main.module.scss

@@ -8,10 +8,23 @@
 .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/esm/demo/Menu.d.ts

@@ -1,4 +1,9 @@
 import React from "react";
-declare const Menu: React.FC;
+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/esm/demo/Menu.d.ts.map

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

@@ -1,9 +1,25 @@
 import React from "react";
 import styles from "./Menu.module.scss";
-const Menu = () => {
-    return (React.createElement("div", { className: styles.menu },
-        React.createElement("a", { href: "#" }, "Main"),
-        React.createElement("a", { href: "#checkbox" }, "Checkbox")));
+const Menu = (props) => {
+    const cmp = Object.entries(props.list).map(([urlHash, component]) => {
+        const label = component.name;
+        const children = `children` in component && component.children
+            ? React.createElement(Menu, { ancestors: [...props.ancestors, urlHash], list: component.children })
+            : null;
+        return (React.createElement("li", { key: urlHash },
+            React.createElement("a", { href: "#" + [...props.ancestors, urlHash].join("/") }, label),
+            children));
+    });
+    const contents = React.createElement("ul", null, cmp);
+    if (!props.ancestors.length) {
+        cmp.unshift(React.createElement("li", { key: "--main" },
+            React.createElement("a", { href: "#" }, "Main")));
+        return React.createElement("menu", { className: styles.menu }, contents);
+    }
+    return contents;
+};
+Menu.defaultProps = {
+    ancestors: [],
 };
 export { Menu };
 //# sourceMappingURL=Menu.js.map

package/esm/demo/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/demo/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,MAAM,IAAI,GAAa,GAAG,EAAE;IACxB,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACvB,2BAAG,IAAI,EAAE,GAAG,WAAU;QACtB,2BAAG,IAAI,EAAE,WAAW,eAAc,CAChC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/demo/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;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,oBAAC,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,4BAAI,GAAG,EAAE,OAAO;YACZ,2BAAG,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,gCAAK,GAAG,CAAM,CAAC;IAEhC,IAAI,CAAC,KAAK,CAAC,SAAU,CAAC,MAAM,EAAE;QAC1B,GAAG,CAAC,OAAO,CAAC,4BAAI,GAAG,EAAE,QAAQ;YAAE,2BAAG,IAAI,EAAE,GAAG,WAAU,CAAK,CAAC,CAAC;QAC5D,OAAO,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,QAAQ,CAAQ,CAAC;KAC1D;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,IAAI,CAAC,YAAY,GAAG;IAChB,SAAS,EAAE,EAAE;CAChB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/demo/Menu.module.scss

@@ -1,19 +1,41 @@
 .menu {
-    display: block;
-    padding: 10px;
+    margin: 0;
+    padding: 0;
     border-right: 1px solid black;
 
-    a {
+    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;
-        background: var(--active-bg);
-        border-radius: 5px;
+        text-transform: uppercase;
+        font-size: 16px;
+    }
+
+    a {
+        padding: 5px 10px;
+        display: block;
         color: black;
         text-decoration: none;
-        text-transform: uppercase;
+        font-size: 14px;
 
-        + a {
-            margin-top: 10px;
+        &:hover {
+            background: var(--active-bg);
         }
+
+        --focus-bg-set: var(--focus-color);
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/demo/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAKzB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"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"}

package/esm/demo/components/form/Checkbox.js

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
-import { Checkbox } from "../../../components/form/Checkbox";
+import React, { useCallback, useState } from "react";
+import { Checkbox } from "../../../index.js";
 const CheckboxDemo = (props) => {
     const [v, setV] = useState(false);
-    return (React.createElement(Checkbox, { name: "a", onChange: () => { setV(!v); }, checked: v }, "I want something something"));
+    const handleToggle = useCallback(() => { setV((prevV) => !prevV); }, []);
+    return (React.createElement(Checkbox, { name: "a", onChange: handleToggle, checked: v }, "I want something something"));
 };
 export { CheckboxDemo };
 //# sourceMappingURL=Checkbox.js.map

package/esm/demo/components/form/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/demo/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,MAAM,YAAY,GAAa,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClC,OAAO,CACH,oBAAC,QAAQ,IAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,iCAAuC,CACxG,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/demo/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,YAAY,GAAa,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEzE,OAAO,CACH,oBAAC,QAAQ,IAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,iCAAuC,CACjG,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/demo/components/form/Toggle.d.ts

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

package/esm/demo/components/form/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/demo/components/form/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAShE,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,GA+CvB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/esm/demo/components/form/Toggle.js

@@ -0,0 +1,40 @@
+import React, { useCallback, useEffect, useState } from "react";
+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 = () => {
+    const [state, ss] = useState(null);
+    useEffect(() => {
+        setTimeout(() => { ss(true); }, 1000);
+    }, []);
+    const handleToggle = useCallback(() => {
+        if (state == null) {
+            return;
+        }
+        ss(null);
+        setTimeout(() => {
+            ss(!state);
+        }, 1000);
+    }, [state]);
+    return (React.createElement(List, null,
+        React.createElement(Item, null,
+            React.createElement("div", { className: styles.row },
+                React.createElement("span", null, "Off"),
+                React.createElement(Toggle, { onChange: handleNoop, state: false }))),
+        React.createElement(Item, null,
+            React.createElement("div", { className: styles.row },
+                React.createElement("span", null, "On"),
+                React.createElement(Toggle, { onChange: handleNoop, state: true }))),
+        React.createElement(Item, null,
+            React.createElement("div", { className: styles.row },
+                React.createElement("span", null, "Undetermined"),
+                React.createElement(Toggle, { onChange: handleNoop, state: null }))),
+        React.createElement(Item, null,
+            React.createElement("div", { className: styles.row },
+                React.createElement("span", null, "Dynamic"),
+                React.createElement(Toggle, { onChange: handleToggle, state: state })))));
+};
+export { ToggleDemo };
+//# sourceMappingURL=Toggle.js.map

package/esm/demo/components/form/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../src/demo/components/form/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,sCAAsC,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,sCAAsC,CAAC;AAE5D,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAE1C,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC;AAEnC,MAAM,UAAU,GAAc,GAAG,EAAE;IAC/B,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QAEX,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,KAAK,IAAI,IAAI,EAAE;YACf,OAAO;SACV;QACD,EAAE,CAAC,IAAI,CAAC,CAAC;QACT,UAAU,CAAC,GAAG,EAAE;YACZ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;QAEf,CAAC,EAAE,IAAI,CAAC,CAAC;IACb,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACH,oBAAC,IAAI;QACD,oBAAC,IAAI;YACD,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG;gBACtB,wCAAgB;gBAChB,oBAAC,MAAM,IAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5C,CACH;QACP,oBAAC,IAAI;YACD,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG;gBACtB,uCAAe;gBACf,oBAAC,MAAM,IAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,GAAI,CAC3C,CACH;QACP,oBAAC,IAAI;YACD,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG;gBACtB,iDAAyB;gBACzB,oBAAC,MAAM,IAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,GAAI,CAC3C,CACH;QACP,oBAAC,IAAI;YACD,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG;gBACtB,4CAAoB;gBACpB,oBAAC,MAAM,IAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,GAAI,CAC9C,CACH,CACJ,CACV,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}