react-miui 0.0.1 → 0.3.0

package/esm/components/form/Checkbox.module.scss

@@ -3,24 +3,31 @@
         width: 0;
         height: 0;
         transform: scale(0);
+        margin: 0;
+        vertical-align: middle;
 
         + span {
             border-radius: 100px;
             background: var(--inactive-bg);
-            width: 24px;
-            height: 24px;
+            width: 18px;
+            height: 18px;
             display: inline-flex;
             justify-content: center;
             align-items: center;
+            vertical-align: middle;
 
             svg {
-                width: 12px;
-                height: 12px;
+                width: 9px;
+                height: 9px;
                 fill: white;
             }
+
+            + span {
+                vertical-align: middle;
+            }
         }
 
-        &:focus {
+        &:focus-visible {
             + span {
                 box-shadow: 0 0 5px black;
             }
@@ -34,7 +41,7 @@
         }
 
         + span + span:not(:empty) {
-            margin-left: 1em;
+            margin-left: 0.5em;
         }
     }
 }

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

@@ -0,0 +1,8 @@
+import React from "react";
+interface Props {
+    onChange: (newState: boolean) => void;
+    state: boolean | null;
+}
+declare const Toggle: React.VFC<Props>;
+export { Toggle };
+//# sourceMappingURL=Toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/form/Toggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,UAAU,KAAK;IACX,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAoB5B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/form/Toggle.js

@@ -0,0 +1,15 @@
+import React, { useCallback } from "react";
+import styles from "./Toggle.module.scss";
+const Toggle = (props) => {
+    const handleChange = useCallback((e) => {
+        if (props.state == null) {
+            return;
+        }
+        props.onChange(e.target.checked);
+    }, [props.onChange, props.state]);
+    return (React.createElement("label", { className: styles.container },
+        React.createElement("input", { type: "checkbox", checked: Boolean(props.state), "data-undetermined": props.state == null, readOnly: props.state == null, onChange: handleChange }),
+        React.createElement("div", { className: styles.toggle })));
+};
+export { Toggle };
+//# sourceMappingURL=Toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/form/Toggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAO1C,MAAM,MAAM,GAAqB,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAgC,EAAE,EAAE;QAClE,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;YACrB,OAAO;SACV;QACD,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElC,OAAO,CACH,+BAAO,SAAS,EAAE,MAAM,CAAC,SAAS;QAC9B,+BACI,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,uBACV,KAAK,CAAC,KAAK,IAAI,IAAI,EACtC,QAAQ,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,EAC7B,QAAQ,EAAE,YAAY,GACxB;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI,CAC7B,CACX,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

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

package/esm/components/icons/Back.d.ts

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

package/esm/components/icons/Back.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Back.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Back.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAM1B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/icons/Back.js

@@ -0,0 +1,7 @@
+import React from "react";
+const Back = (props) => {
+    return (React.createElement("svg", { width: "9", height: "16", viewBox: "0 0 9 16", xmlns: "http://www.w3.org/2000/svg", className: props.className },
+        React.createElement("path", { fill: "currentColor", d: "M8.05.1L0 7.95l8.05 7.85v.05q.15.15.4.15t.4-.15q.15-.2.15-.4 0-.25-.15-.4V15H8.8L1.65 7.95l7.2-7Q9 .75 9 .55q0-.25-.2-.4Q8.65 0 8.4 0q-.2 0-.35.1" })));
+};
+export { Back };
+//# sourceMappingURL=Back.js.map

package/esm/components/icons/Back.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Back.js","sourceRoot":"","sources":["../../../src/components/icons/Back.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,IAAI,GAAqB,CAAC,KAAK,EAAE,EAAE;IACrC,OAAO,CACH,6BAAK,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,4BAA4B,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;QAC/G,8BAAM,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,mJAAmJ,GAAI,CACpL,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/icons/Checkmark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkmark.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Checkmark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAY9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Checkmark.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Checkmark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAe9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/components/icons/Checkmark.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkmark.js","sourceRoot":"","sources":["../../../src/components/icons/Checkmark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,OAAO,CACH,6BACI,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,iBAAiB,EACnF,SAAS,EAAE,KAAK,CAAC,SAAS;QAE1B,8BACI,CAAC,EAAC,4KAA4K,GAChL,CACA,CAET,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Checkmark.js","sourceRoot":"","sources":["../../../src/components/icons/Checkmark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,OAAO,CACH,6BACI,KAAK,EAAE,4BAA4B,EACnC,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS;QAE1B,8BACI,CAAC,EAAE,4KAA4K,GACjL,CACA,CAET,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/components/icons/Icon.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare enum ICON {
+    checkmark = "checkmark",
+    back = "back"
+}
+interface Props {
+    name: ICON;
+    className?: string;
+}
+declare const Icon: React.FC<Props>;
+export { Icon, ICON };
+//# sourceMappingURL=Icon.d.ts.map

package/esm/components/icons/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,aAAK,IAAI;IACL,SAAS,cAAc;IACvB,IAAI,SAAS;CAChB;AAED,UAAU,KAAK;IACX,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAOD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAMzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/icons/Icon.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Checkmark } from "./Checkmark";
+import { Back } from "./Back";
+var ICON;
+(function (ICON) {
+    ICON["checkmark"] = "checkmark";
+    ICON["back"] = "back";
+})(ICON || (ICON = {}));
+const iconsMap = new Map([
+    [ICON.checkmark, Checkmark],
+    [ICON.back, Back],
+]);
+const Icon = ({ name: iconName, ...props }) => {
+    const C = iconsMap.get(iconName);
+    if (!C) {
+        throw new TypeError("Unknown icon: " + iconName);
+    }
+    return React.createElement(C, { ...props });
+};
+export { Icon, ICON };
+//# sourceMappingURL=Icon.js.map

package/esm/components/icons/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,IAAK,IAGJ;AAHD,WAAK,IAAI;IACL,+BAAuB,CAAA;IACvB,qBAAa,CAAA;AACjB,CAAC,EAHI,IAAI,KAAJ,IAAI,QAGR;AAOD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAqB;IACzC,CAAC,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAC3B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,IAAI,GAAoB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3D,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,CAAC,CAAC,EAAE;QACJ,MAAM,IAAI,SAAS,CAAC,gBAAgB,GAAG,QAAQ,CAAC,CAAC;KACpD;IACD,OAAO,oBAAC,CAAC,OAAK,KAAK,GAAI,CAAC;AAC5B,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/layout/header/Header.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ReactNode } from "react";
+interface Props {
+    center?: boolean;
+    variant?: "toolbar";
+    position?: "top" | "left" | "right" | "bottom";
+    className?: string;
+    before?: ReactNode;
+    after?: ReactNode;
+}
+declare const Header: React.FC<Props>;
+export { Header };
+//# sourceMappingURL=Header.d.ts.map

package/esm/components/layout/header/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,KAAK;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IAKpB,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAGD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwC3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/layout/header/Header.js

@@ -0,0 +1,37 @@
+import React from "react";
+import classnames from "classnames";
+import styles from "./Header.module.scss";
+import { Action } from "../../ui/action/Action";
+import { EqualActions } from "../../ui/action/EqualActions";
+const Header = (props) => {
+    const { center, children, variant, position = "top" } = props;
+    let justActions = false;
+    if (position === "top" || position === "bottom") {
+        const chld = React.Children.toArray(props.children);
+        justActions = chld.every(c => {
+            return c && typeof c === "object" && "type" in c && c.type === Action;
+        });
+    }
+    const cls = classnames(styles.header, {
+        [styles["header--center"]]: center,
+        [styles["header--toolbar"]]: variant === "toolbar",
+    }, styles[`header--${position}`], props.className);
+    let contents = children;
+    if (justActions) {
+        contents = React.createElement(EqualActions, { className: styles.actions }, contents);
+    }
+    let before;
+    if (props.before != null) {
+        before = React.createElement("div", { className: styles.before }, props.before);
+    }
+    let after;
+    if (props.after != null) {
+        after = React.createElement("div", { className: styles.after }, props.after);
+    }
+    return (React.createElement("div", { className: cls },
+        before,
+        React.createElement("div", { className: styles.contents }, contents),
+        after));
+};
+export { Header };
+//# sourceMappingURL=Header.js.map

package/esm/components/layout/header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAgB5D,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAE9D,IAAI,WAAW,GAAG,KAAK,CAAC;IACxB,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,QAAQ,EAAE;QAC7C,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACpD,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACzB,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC;QAC1E,CAAC,CAAC,CAAC;KACN;IAED,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;QAClC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,MAAM;QAClC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,OAAO,KAAK,SAAS;KACrD,EAAE,MAAM,CAAC,WAAW,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnD,IAAI,QAAQ,GAAG,QAAQ,CAAC;IACxB,IAAI,WAAW,EAAE;QACb,QAAQ,GAAG,oBAAC,YAAY,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAgB,CAAC;KACjF;IAED,IAAI,MAAiB,CAAC;IACtB,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,EAAE;QACtB,MAAM,GAAG,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,KAAK,CAAC,MAAM,CAAO,CAAC;KAChE;IAED,IAAI,KAAgB,CAAC;IACrB,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;QACrB,KAAK,GAAG,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAC,KAAK,CAAO,CAAC;KAC7D;IAED,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG;QACd,MAAM;QACP,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,IAC1B,QAAQ,CACP;QACL,KAAK,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/layout/header/Header.module.scss

@@ -0,0 +1,89 @@
+.header {
+    --border-color: var(--header-border);
+    --background-color: var(--header-bg);
+    background: var(--background-color);
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    font-weight: bold;
+    box-sizing: border-box;
+    color: var(--header-text);
+}
+
+.header--toolbar {
+    --border-color: var(--toolbar-border);
+    --background-color: var(--toolbar-bg);
+}
+
+.header--top, .header--bottom {
+    padding: 0 16.666px;
+    min-height: 44px;
+}
+.header--left, .header--right {
+    padding: 16.666px 0;
+    min-width: 44px;
+    flex-direction: column;
+
+    > .contents {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+.header--top {
+    border-bottom: 0.37px solid var(--border-color);
+}
+.header--bottom {
+    border-top: 0.37px solid var(--border-color);
+    order: 2;
+}
+.header--left {
+    border-right: 0.37px solid var(--border-color);
+}
+.header--right {
+    border-left: 0.37px solid var(--border-color);
+    order: 2;
+}
+
+.contents {
+    flex: 1;
+    display: flex;
+}
+
+.header--center > .contents {
+    justify-content: center;
+}
+
+.header--top, .header--bottom {
+    .before {
+        margin-right: calc(50px / var(--ratio-dimensions));
+    }
+
+    .after {
+        margin-left: calc(50px / var(--ratio-dimensions));
+    }
+
+    .actions {
+        margin: calc(56px / var(--ratio-dimensions)) 0;
+    }
+}
+
+.header--left, .header--right {
+    .before {
+        margin-bottom: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .after {
+        margin-top: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .actions {
+        margin: 0 calc(56px / var(--ratio-dimensions));
+    }
+}
+
+.before, .after {
+    display: flex;
+}

package/esm/components/layout/header/HeaderIconAction.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 {
+    icon?: ICON | Exclude<ReactNode, string>;
+    onClick?: () => void;
+    href?: string;
+    to?: string;
+    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    label?: ReactNode;
+}
+declare const HeaderIconAction: React.VFC<Props>;
+export { HeaderIconAction };
+//# sourceMappingURL=HeaderIconAction.d.ts.map

package/esm/components/layout/header/HeaderIconAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconAction.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.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,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,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,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAyBtC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/esm/components/layout/header/HeaderIconAction.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Icon } from "../../icons/Icon";
+import styles from "./HeaderIconAction.module.scss";
+const HeaderIconAction = (props) => {
+    const { icon, label, href, to, Link, ...restProps } = props;
+    let content = icon;
+    if (typeof icon === "string") {
+        content = React.createElement(Icon, { className: styles.icon, name: icon });
+    }
+    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", { className: styles.btn, onClick: props.onClick }, content));
+};
+export { HeaderIconAction };
+//# sourceMappingURL=HeaderIconAction.js.map

package/esm/components/layout/header/HeaderIconAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconAction.js","sourceRoot":"","sources":["../../../../src/components/layout/header/HeaderIconAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAgBpD,MAAM,gBAAgB,GAAqB,CAAC,KAAK,EAAE,EAAE;IACjD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5D,IAAI,OAAO,GAAc,IAAI,CAAC;IAC9B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC1B,OAAO,GAAG,oBAAC,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAY,GAAI,CAAC;KAClE;IAED,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,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAChD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/esm/components/layout/header/HeaderIconAction.module.scss

@@ -0,0 +1,22 @@
+.btn, .a {
+    padding: 7px;
+    background: none;
+    border-radius: 666px;
+    display: inline-block;
+    border: calc(2px / var(--ratio-border)) solid transparent;
+    color: var(--header-text);
+
+    &:hover {
+        background: #00000022;
+    }
+    &:active {
+        background: #00000011;
+        color: currentColor;
+    }
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+}

package/esm/components/layout/header/StickyHeader.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface Content {
+    Content: React.FC;
+}
+interface Props {
+    position?: "top" | "left" | "right" | "bottom";
+}
+declare const StickyHeader: React.FC<Props> & Content;
+export { StickyHeader };
+//# sourceMappingURL=StickyHeader.d.ts.map

package/esm/components/layout/header/StickyHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,OAAO;IACb,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;CACrB;AAED,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;CAClD;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,OA+BrC,CAAC;AAMF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/components/layout/header/StickyHeader.js

@@ -0,0 +1,28 @@
+import React from "react";
+import classnames from "classnames";
+import { Header } from "./Header.js";
+import styles from "./StickyHeader.module.scss";
+const err = new TypeError("StickyHeader needs two children - Header and StickyHeader.Content");
+const StickyHeader = (props) => {
+    const position = props.position || "top";
+    const children = React.Children.toArray(props.children);
+    if (children.length !== 2) {
+        throw err;
+    }
+    let header = children.find(c => typeof c === "object" && "type" in c && c.type === Header), content = children.find(c => typeof c === "object" && "type" in c && c.type === StickyHeader.Content);
+    if (!header || !content) {
+        throw err;
+    }
+    header = header;
+    content = content;
+    const cls = classnames(styles.stickyHeader, styles[`stickyHeader--${position}`]);
+    const contentCls = classnames(styles.stickyHeader__content, styles[`stickyHeader__content--${position}`]);
+    return (React.createElement("div", { className: cls },
+        React.cloneElement(header, { position }),
+        React.createElement("div", { className: contentCls }, content)));
+};
+StickyHeader.Content = ({ children }) => {
+    return React.createElement(React.Fragment, null, children);
+};
+export { StickyHeader };
+//# sourceMappingURL=StickyHeader.js.map

package/esm/components/layout/header/StickyHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StickyHeader.js","sourceRoot":"","sources":["../../../../src/components/layout/header/StickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,MAAM,GAAG,GAAG,IAAI,SAAS,CAAC,mEAAmE,CAAC,CAAC;AAU/F,MAAM,YAAY,GAA8B,CAAC,KAAK,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;IAEzC,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAGxD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;QACvB,MAAM,GAAG,CAAC;KACb;IAED,IAAI,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,EACtF,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC;IAE1G,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE;QACrB,MAAM,GAAG,CAAC;KACb;IAED,MAAM,GAAG,MAAe,CAAC;IACzB,OAAO,GAAG,OAAgB,CAAC;IAE3B,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,iBAAiB,QAAQ,EAAE,CAAC,CAAC,CAAC;IACjF,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAAC,0BAA0B,QAAQ,EAAE,CAAC,CAAC,CAAC;IAE1G,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG;QACd,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC;QACzC,6BAAK,SAAS,EAAE,UAAU,IACrB,OAAO,CACN,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,YAAY,CAAC,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpC,OAAO,0CAAG,QAAQ,CAAI,CAAC;AAC3B,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/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/esm/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/esm/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/esm/components/layout/list/Item.js

@@ -0,0 +1,33 @@
+import React from "react";
+import classnames from "classnames";
+import styles from "./Item.module.scss";
+const Item = (props) => {
+    const { className, children, href, to, onClick, Link, ...restProps } = props;
+    const cls = classnames(styles.item, className);
+    const liProps = {
+        className: cls,
+    };
+    if (to) {
+        if (!Link) {
+            throw new TypeError("`to` prop given without `Link` component");
+        }
+        return React.createElement("li", { ...liProps },
+            React.createElement(Link, { href: to, ...restProps }, children));
+    }
+    if (href) {
+        const aProps = { ...restProps };
+        if (onClick) {
+            aProps.onClick = onClick;
+        }
+        return React.createElement("li", { ...liProps },
+            React.createElement("a", { href: href, ...aProps }, children));
+    }
+    if (onClick) {
+        return (React.createElement("li", { ...liProps },
+            React.createElement("button", { className: styles.button, onClick: props.onClick, ...restProps }, children)));
+    }
+    return React.createElement("li", { ...liProps },
+        React.createElement("div", { ...restProps }, children));
+};
+export { Item };
+//# sourceMappingURL=Item.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAcxC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7E,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,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,+BAAQ,OAAO;YAAE,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS,IAAG,QAAQ,CAAQ,CAAK,CAAC;KACjF;IACD,IAAI,IAAI,EAAE;QACN,MAAM,MAAM,GAAqD,EAAE,GAAG,SAAS,EAAE,CAAC;QAClF,IAAI,OAAO,EAAE;YACT,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;SAC5B;QACD,OAAO,+BAAQ,OAAO;YAAE,2BAAG,IAAI,EAAE,IAAI,KAAM,MAAM,IAAG,QAAQ,CAAK,CAAK,CAAC;KAC1E;IACD,IAAI,OAAO,EAAE;QACT,OAAO,CACH,+BAAQ,OAAO;YACX,gCAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,KAAM,SAAS,IAAG,QAAQ,CAAU,CAC3F,CACR,CAAC;KACL;IACD,OAAO,+BAAQ,OAAO;QAAE,gCAAS,SAAS,IAAG,QAAQ,CAAO,CAAK,CAAC;AACtE,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/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/esm/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/esm/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/esm/components/layout/list/List.js

@@ -0,0 +1,7 @@
+import React from "react";
+import styles from "./List.module.scss";
+const List = (props) => {
+    return (React.createElement("ul", { className: styles.list }, props.children));
+};
+export { List };
+//# sourceMappingURL=List.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,OAAO,CACH,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,QAAQ,CAAM,CACpD,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

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

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

package/esm/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/esm/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"}