react-miui 0.1.0 → 0.2.0

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/ui/action/EqualActions.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
-declare const EqualActions: React.FC;
+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

@@ -1 +1 @@
-{"version":3,"file":"EqualActions.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAiBzB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"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

@@ -1,16 +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 Actions must be an Action component");
+            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: styles.actions, style: style }, 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

@@ -1 +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;AAEhD,MAAM,YAAY,GAAa,CAAC,KAAK,EAAE,EAAE;IACrC,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,oDAAoD,CAAC,CAAC;SAC7E;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,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,IACvC,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"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/demo/Menu.module.scss

@@ -35,5 +35,7 @@
         &:hover {
             background: var(--active-bg);
         }
+
+        --focus-bg-set: var(--focus-color);
     }
 }

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

@@ -1,4 +1,7 @@
 /// <reference types="react" />
 declare const HeaderDemo: () => JSX.Element;
-export { HeaderDemo };
+declare const CenteredHeaderDemo: () => JSX.Element;
+declare const HeaderWithButtonsDemo: () => JSX.Element;
+declare const HeaderWithButtonsOnSideDemo: () => JSX.Element;
+export { HeaderDemo, CenteredHeaderDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo };
 //# sourceMappingURL=Header.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../src/demo/components/layout/header/Header.tsx"],"names":[],"mappings":";AAIA,QAAA,MAAM,UAAU,mBAUf,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../src/demo/components/layout/header/Header.tsx"],"names":[],"mappings":";AAMA,QAAA,MAAM,UAAU,mBAUf,CAAC;AAEF,QAAA,MAAM,kBAAkB,mBASvB,CAAC;AAKF,QAAA,MAAM,qBAAqB,mBAqD1B,CAAC;AAEF,QAAA,MAAM,2BAA2B,mBAqBhC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,CAAC"}

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

@@ -1,10 +1,46 @@
 import React from "react";
-import { Header } from "../../../../index.js";
+import Link from "next/link";
+import { Header, ICON, StickyHeader } from "../../../../index.js";
+import { HeaderIconAction } from "../../../../components/layout/header/HeaderIconAction";
 const HeaderDemo = () => {
     const longContent = new Array(1000).fill(null).map((_, key) => React.createElement("div", { key: key }, "content"));
     return (React.createElement(React.Fragment, null,
         React.createElement(Header, null, "Some place"),
         longContent));
 };
-export { HeaderDemo };
+const CenteredHeaderDemo = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Header, { center: true }, "Messages"),
+        React.createElement("div", null, "Header text is centered")));
+};
+const handleClick = () => { alert(1); };
+const HeaderWithButtonsDemo = () => {
+    const demo = (React.createElement(React.Fragment, null,
+        React.createElement(HeaderIconAction, { icon: ICON.back, onClick: handleClick }),
+        React.createElement(HeaderIconAction, { icon: ICON.checkmark, onClick: handleClick })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Header, { center: true, before: "A text" }, "Messages"),
+        React.createElement("div", null, "Header text is centered"),
+        React.createElement(Header, { before: "A text" }, "Messages"),
+        React.createElement("div", null, "Header text is start aligned"),
+        React.createElement(Header, { before: demo }, "Messages"),
+        React.createElement("div", null, "Some button icons are added on the left to left aligned title"),
+        React.createElement(Header, { before: demo, center: true }, "Messages"),
+        React.createElement("div", null, "Some button icons are added on the left to centered aligned title"),
+        React.createElement(Header, { before: React.createElement(HeaderIconAction, { icon: ICON.back, to: "/react-miui", Link: Link }), center: true }, "Messages"),
+        React.createElement("div", null, "Some internal link icons are added on the left to centered aligned title"),
+        React.createElement(Header, { before: React.createElement(HeaderIconAction, { icon: ICON.back, href: "https://www.npmjs.com/package/react-miui" }), center: true }, "Messages"),
+        React.createElement("div", null, "Some external link icons are added on the left to centered aligned title"),
+        React.createElement(Header, { before: React.createElement(HeaderIconAction, { icon: ICON.back, href: "https://www.npmjs.com/package/react-miui" }), after: React.createElement(HeaderIconAction, { icon: ICON.checkmark, href: "https://www.npmjs.com/package/react-miui" }), center: true }, "Messages"),
+        React.createElement("div", null, "Some external link icons are added on both sides to centered aligned title")));
+};
+const HeaderWithButtonsOnSideDemo = () => {
+    const demo = (React.createElement(React.Fragment, null,
+        React.createElement(HeaderIconAction, { icon: ICON.back, onClick: handleClick }),
+        React.createElement(HeaderIconAction, { icon: ICON.checkmark, onClick: handleClick })));
+    return (React.createElement(StickyHeader, { position: "left" },
+        React.createElement(Header, { center: true, before: demo, after: demo }, "M"),
+        React.createElement(StickyHeader.Content, null, "Header is on the side")));
+};
+export { HeaderDemo, CenteredHeaderDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo };
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../../src/demo/components/layout/header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,UAAU,GAAG,GAAG,EAAE;IAEpB,MAAM,WAAW,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,6BAAK,GAAG,EAAE,GAAG,cAAe,CAAC,CAAC;IAE7F,OAAO,CACH;QACI,oBAAC,MAAM,qBAAoB;QAC1B,WAAW,CACb,CACN,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../../src/demo/components/layout/header/Header.tsx"],"names":[],"mappings":"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"}

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

@@ -23,7 +23,7 @@ const ActionDemo = () => {
             " - onClick action"),
         React.createElement("div", null,
             React.createElement(Action, { icon: ICON.checkmark, onClick: handleClick, label: "Pineapple" }),
-            " - onClick action")));
+            " - onClick action with label")));
 };
 const ActionsOnLeft = () => {
     return (React.createElement(StickyHeader, { position: "left" },
@@ -62,7 +62,7 @@ const ActionLabelsOnBottom = () => {
 };
 const ActionsDemo = () => {
     return (React.createElement("div", null,
-        "To make every action take the same amount of horizontal space you need to wrap every Action with Actions wrapper. Some components (like Header) will do that automatically for you. If you need to use Actions outside of such components - manually wrap them with Actions.",
+        "To make every action take the same amount of horizontal space you need to wrap every Action with EqualActions wrapper. Some components (like Header) will do that automatically for you. If you need to use Actions outside of such components - manually wrap them with EqualActions.",
         React.createElement("div", null,
             React.createElement(EqualActions, null,
                 React.createElement(Action, { icon: ICON.checkmark, label: "Add" }),

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

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../../src/demo/components/ui/action/Action.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../../src/demo/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,mDAAmD,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAErE,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAE7E,MAAM,WAAW,GAAG,GAAG,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAExC,MAAM,UAAU,GAAa,GAAG,EAAE;IAC9B,OAAO,CACH;QACI;YACI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI;uCAC9B;QACN;YACI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,GAAI;sCAC5D;QACN;YACI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,0CAA0C,GAAI;sCAChF;QACN;YACI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,GAAI;gCACpD;QACN;YACI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,GAAI;2CACxE,CACP,CACN,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG,EAAE;IACvB,OAAO,CACH,oBAAC,YAAY,IAAC,QAAQ,EAAE,MAAM;QAC1B,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM;YAC1C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI;YAChC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI;YAChC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI,CAC3B;QACT,oBAAC,YAAY,CAAC,OAAO,kBAEE,CACZ,CAElB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE;IACzB,OAAO,CACH,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ;QAC5B,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM;YAC1C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI;YAChC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI;YAChC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI,CAC3B;QACT,oBAAC,YAAY,CAAC,OAAO,kBAEE,CACZ,CAElB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAC9B,OAAO,CACH,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ;QAC5B,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM;YAC1C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI;YAC9C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAI;YACjD,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,cAAc,GAAI,CAClD;QACT,oBAAC,YAAY,CAAC,OAAO;YACjB,oBAAC,YAAY,IAAC,QAAQ,EAAE,KAAK;gBACzB,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM;oBAC1C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI;oBAC9C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAI;oBACjD,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,GAAI,CAC3C;gBACT,oBAAC,YAAY,CAAC,OAAO;;oBAGwD,OAAO;;oBAC/E,UAAU;wBACQ,CACZ,CACI,CACZ,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,EAAE;IACrB,OAAO,CACH;;QAKI;YACI,oBAAC,YAAY;gBACT,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI;gBAC9C,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAI;gBACjD,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,cAAc,GAAI,CAC5C,CACb,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,oBAAoB,EAAE,WAAW,EAAE,CAAC"}

package/esm/demo/components/ui/icons/Icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icons.d.ts","sourceRoot":"","sources":["../../../../../src/demo/components/ui/icons/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAkBtB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Icons.d.ts","sourceRoot":"","sources":["../../../../../src/demo/components/ui/icons/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAiBtB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/demo/components/ui/icons/Icons.js

@@ -1,14 +1,14 @@
 import React from "react";
-import { Icon, ICON } from "../../../../index.js";
+import { Icon, ICON, Item, List } from "../../../../index.js";
+import styles from "./Icons.module.scss";
 const IconsDemo = () => {
     const icons = Object.values(ICON).map((value) => {
-        return (React.createElement("li", { key: value },
-            React.createElement(Icon, { name: value }),
-            value));
+        return (React.createElement(Item, { key: value },
+            React.createElement("div", { className: styles.row },
+                value,
+                React.createElement(Icon, { name: value }))));
     });
-    return (React.createElement("div", null,
-        "Icons:",
-        React.createElement("ul", null, icons)));
+    return (React.createElement(List, null, icons));
 };
 export { IconsDemo };
 //# sourceMappingURL=Icons.js.map

package/esm/demo/components/ui/icons/Icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../../../../src/demo/components/ui/icons/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAElD,MAAM,SAAS,GAAa,GAAG,EAAE;IAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5C,OAAO,CACH,4BAAI,GAAG,EAAE,KAAK;YACV,oBAAC,IAAI,IAAC,IAAI,EAAE,KAAK,GAAI;YACpB,KAAK,CACL,CACR,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,CACH;;QAEI,gCACK,KAAK,CACL,CACH,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../../../../src/demo/components/ui/icons/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,SAAS,GAAa,GAAG,EAAE;IAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5C,OAAO,CACH,oBAAC,IAAI,IAAC,GAAG,EAAE,KAAK;YACZ,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG;gBACrB,KAAK;gBACN,oBAAC,IAAI,IAAC,IAAI,EAAE,KAAK,GAAI,CACnB,CACH,CACV,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,oBAAC,IAAI,QACA,KAAK,CACH,CACV,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/demo/components/ui/icons/Icons.module.scss

@@ -0,0 +1,4 @@
+.row {
+    display: flex;
+    justify-content: space-between;
+}

package/esm/demo/componentsMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"componentsMap.d.ts","sourceRoot":"","sources":["../../src/demo/componentsMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoB7C,UAAU,MAAM;IAEZ,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC7B;AAED,UAAU,UAAU;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,YAAY,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,EAAE,MAyEpB,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC;AAEF,YAAY,EACR,MAAM,EACN,UAAU,GACb,CAAC"}
+{"version":3,"file":"componentsMap.d.ts","sourceRoot":"","sources":["../../src/demo/componentsMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAyB7C,UAAU,MAAM;IAEZ,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC7B;AAED,UAAU,UAAU;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,YAAY,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,EAAE,MAyFpB,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC;AAEF,YAAY,EACR,MAAM,EACN,UAAU,GACb,CAAC"}

package/esm/demo/componentsMap.js

@@ -1,5 +1,5 @@
 import { CheckboxDemo } from "./components/form/Checkbox";
-import { HeaderDemo } from "./components/layout/header/Header";
+import { CenteredHeaderDemo, HeaderDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo, } from "./components/layout/header/Header";
 import { StickyHeaderBottomDemo, StickyHeaderDemo, StickyHeaderLeftCenterDemo, StickyHeaderLeftDemo, StickyHeaderRightDemo, StickyHeaderTopBottomDemo, } from "./components/layout/header/StickyHeader";
 import { ListItemDemo } from "./components/layout/list/List.Item";
 import { DirectionPadDemo } from "./components/ui/directionPad/Pad";
@@ -19,29 +19,45 @@ const componentsMap = {
         name: "Header",
         Component: HeaderDemo,
         children: {
-            Sticky: {
-                name: "Sticky header",
-                Component: StickyHeaderDemo,
-            },
-            StickyBottom: {
-                name: "On bottom",
-                Component: StickyHeaderBottomDemo,
-            },
-            StickyTopBottom: {
-                name: "On top & bottom",
-                Component: StickyHeaderTopBottomDemo,
+            Centered: {
+                name: "Centered",
+                Component: CenteredHeaderDemo,
             },
-            StickyLeft: {
-                name: "On left",
-                Component: StickyHeaderLeftDemo,
+            WithButtons: {
+                name: "With buttons",
+                Component: HeaderWithButtonsDemo,
+                children: {
+                    OnLeft: {
+                        name: "On the side",
+                        Component: HeaderWithButtonsOnSideDemo,
+                    },
+                },
             },
-            StickyRight: {
-                name: "On right",
-                Component: StickyHeaderRightDemo,
-            },
-            StickyLeftCentered: {
-                name: "On left centered",
-                Component: StickyHeaderLeftCenterDemo,
+            Sticky: {
+                name: "Sticky",
+                Component: StickyHeaderDemo,
+                children: {
+                    StickyBottom: {
+                        name: "On bottom",
+                        Component: StickyHeaderBottomDemo,
+                    },
+                    StickyTopBottom: {
+                        name: "On top & bottom",
+                        Component: StickyHeaderTopBottomDemo,
+                    },
+                    StickyLeft: {
+                        name: "On left",
+                        Component: StickyHeaderLeftDemo,
+                    },
+                    StickyRight: {
+                        name: "On right",
+                        Component: StickyHeaderRightDemo,
+                    },
+                    StickyLeftCentered: {
+                        name: "On left centered",
+                        Component: StickyHeaderLeftCenterDemo,
+                    },
+                },
             },
         },
     },
@@ -61,8 +77,8 @@ const componentsMap = {
                 name: "Actions on left header",
                 Component: ActionsOnLeft,
             },
-            Actions: {
-                name: "Actions (wrapper)",
+            EqualActions: {
+                name: "EqualActions (wrapper)",
                 Component: ActionsDemo,
             },
         },

package/esm/demo/componentsMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentsMap.js","sourceRoot":"","sources":["../../src/demo/componentsMap.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EACH,sBAAsB,EACtB,gBAAgB,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,qBAAqB,EACzF,yBAAyB,GAC5B,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EACH,UAAU,EACV,oBAAoB,EACpB,WAAW,EACX,eAAe,EACf,aAAa,GAChB,MAAM,+BAA+B,CAAC;AAavC,MAAM,aAAa,GAAW;IAC1B,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,UAAU;KACxB;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,YAAY;KAC1B;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,UAAU;QACrB,QAAQ,EAAE;YACN,MAAM,EAAE;gBACJ,IAAI,EAAE,eAAe;gBACrB,SAAS,EAAE,gBAAgB;aAC9B;YACD,YAAY,EAAE;gBACV,IAAI,EAAE,WAAW;gBACjB,SAAS,EAAE,sBAAsB;aACpC;YACD,eAAe,EAAE;gBACb,IAAI,EAAE,iBAAiB;gBACvB,SAAS,EAAE,yBAAyB;aACvC;YACD,UAAU,EAAE;gBACR,IAAI,EAAE,SAAS;gBACf,SAAS,EAAE,oBAAoB;aAClC;YACD,WAAW,EAAE;gBACT,IAAI,EAAE,UAAU;gBAChB,SAAS,EAAE,qBAAqB;aACnC;YACD,kBAAkB,EAAE;gBAChB,IAAI,EAAE,kBAAkB;gBACxB,SAAS,EAAE,0BAA0B;aACxC;SACJ;KACJ;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,UAAU;QACrB,QAAQ,EAAE;YACN,cAAc,EAAE;gBACZ,IAAI,EAAE,mBAAmB;gBACzB,SAAS,EAAE,eAAe;aAC7B;YACD,oBAAoB,EAAE;gBAClB,IAAI,EAAE,+BAA+B;gBACrC,SAAS,EAAE,oBAAoB;aAClC;YACD,YAAY,EAAE;gBACV,IAAI,EAAE,wBAAwB;gBAC9B,SAAS,EAAE,aAAa;aAC3B;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,mBAAmB;gBACzB,SAAS,EAAE,WAAW;aACzB;SACJ;KACJ;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,YAAY;KAC1B;IACD,GAAG,EAAE;QACD,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,gBAAgB;KAC9B;IACD,KAAK,EAAE;QACH,IAAI,EAAE,OAAO;QACb,SAAS,EAAE,SAAS;KACvB;CACJ,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC"}
+{"version":3,"file":"componentsMap.js","sourceRoot":"","sources":["../../src/demo/componentsMap.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EACH,kBAAkB,EAClB,UAAU,EACV,qBAAqB,EACrB,2BAA2B,GAC9B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACH,sBAAsB,EACtB,gBAAgB,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,qBAAqB,EACzF,yBAAyB,GAC5B,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EACH,UAAU,EACV,oBAAoB,EACpB,WAAW,EACX,eAAe,EACf,aAAa,GAChB,MAAM,+BAA+B,CAAC;AAavC,MAAM,aAAa,GAAW;IAC1B,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,UAAU;KACxB;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,YAAY;KAC1B;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,UAAU;QACrB,QAAQ,EAAE;YACN,QAAQ,EAAE;gBACN,IAAI,EAAE,UAAU;gBAChB,SAAS,EAAE,kBAAkB;aAChC;YACD,WAAW,EAAE;gBACT,IAAI,EAAE,cAAc;gBACpB,SAAS,EAAE,qBAAqB;gBAChC,QAAQ,EAAE;oBACN,MAAM,EAAE;wBACJ,IAAI,EAAE,aAAa;wBACnB,SAAS,EAAE,2BAA2B;qBACzC;iBACJ;aACJ;YACD,MAAM,EAAE;gBACJ,IAAI,EAAE,QAAQ;gBACd,SAAS,EAAE,gBAAgB;gBAC3B,QAAQ,EAAE;oBACN,YAAY,EAAE;wBACV,IAAI,EAAE,WAAW;wBACjB,SAAS,EAAE,sBAAsB;qBACpC;oBACD,eAAe,EAAE;wBACb,IAAI,EAAE,iBAAiB;wBACvB,SAAS,EAAE,yBAAyB;qBACvC;oBACD,UAAU,EAAE;wBACR,IAAI,EAAE,SAAS;wBACf,SAAS,EAAE,oBAAoB;qBAClC;oBACD,WAAW,EAAE;wBACT,IAAI,EAAE,UAAU;wBAChB,SAAS,EAAE,qBAAqB;qBACnC;oBACD,kBAAkB,EAAE;wBAChB,IAAI,EAAE,kBAAkB;wBACxB,SAAS,EAAE,0BAA0B;qBACxC;iBACJ;aACJ;SACJ;KACJ;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,UAAU;QACrB,QAAQ,EAAE;YACN,cAAc,EAAE;gBACZ,IAAI,EAAE,mBAAmB;gBACzB,SAAS,EAAE,eAAe;aAC7B;YACD,oBAAoB,EAAE;gBAClB,IAAI,EAAE,+BAA+B;gBACrC,SAAS,EAAE,oBAAoB;aAClC;YACD,YAAY,EAAE;gBACV,IAAI,EAAE,wBAAwB;gBAC9B,SAAS,EAAE,aAAa;aAC3B;YACD,YAAY,EAAE;gBACV,IAAI,EAAE,wBAAwB;gBAC9B,SAAS,EAAE,WAAW;aACzB;SACJ;KACJ;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,YAAY;KAC1B;IACD,GAAG,EAAE;QACD,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,gBAAgB;KAC9B;IACD,KAAK,EAAE;QACH,IAAI,EAAE,OAAO;QACb,SAAS,EAAE,SAAS;KACvB;CACJ,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC"}

package/esm/global.scss

@@ -31,12 +31,21 @@
     --red1: #ea2700;
 
     --grey1: #737373;
+
+    --focus-color: #dcaf00;
 }
 
-*:focus { // @TODO take care of focus
+*:focus {
     outline: none!important;
 }
 
+*:focus-visible:focus-visible {
+    outline: none!important;
+    border-color: var(--focus-color);
+    background-color: var(--focus-bg-set);
+}
+
+
 body {
     font-size: 15px;
 }

package/esm/pages/react-miui.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const ReactMiuiPage: () => JSX.Element;
+export default ReactMiuiPage;
+//# sourceMappingURL=react-miui.d.ts.map

package/esm/pages/react-miui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-miui.d.ts","sourceRoot":"","sources":["../../src/pages/react-miui.tsx"],"names":[],"mappings":";AAEA,QAAA,MAAM,aAAa,mBAOlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/esm/pages/react-miui.js

@@ -0,0 +1,6 @@
+import React from "react";
+const ReactMiuiPage = () => {
+    return (React.createElement("div", null, "Hi. This is an example page to demonstrate application level routing."));
+};
+export default ReactMiuiPage;
+//# sourceMappingURL=react-miui.js.map

package/esm/pages/react-miui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-miui.js","sourceRoot":"","sources":["../../src/pages/react-miui.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,aAAa,GAAG,GAAG,EAAE;IAEvB,OAAO,CACH,yGAEM,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/esm/types.d.ts

@@ -1,4 +1,4 @@
 import type React from "react";
-declare type AnyComponent = React.ComponentClass | React.FC;
+declare type AnyComponent = React.ComponentClass | React.FC | React.VFC;
 export type { AnyComponent, };
 //# sourceMappingURL=types.d.ts.map

package/esm/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,aAAK,YAAY,GAAG,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,EAAE,CAAC;AAEpD,YAAY,EACR,YAAY,GACf,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,aAAK,YAAY,GAAG,KAAK,CAAC,cAAc,GAAG,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,GAAG,CAAC;AAEhE,YAAY,EACR,YAAY,GACf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {

package/src/components/icons/Back.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Back: React.VFC<Props> = (props) => {
+    return (
+        <svg width={"9"} height={"16"} viewBox={"0 0 9 16"} xmlns={"http://www.w3.org/2000/svg"} className={props.className}>
+            <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"} />
+        </svg>
+    );
+};
+
+export { Back };

package/src/components/icons/Icon.tsx

@@ -2,19 +2,21 @@ import type { AnyComponent } from "../../types";
 
 import React from "react";
 import { Checkmark } from "./Checkmark";
+import { Back } from "./Back";
 
 enum ICON {
     checkmark = "checkmark",
+    back = "back",
 }
 
 interface Props {
     name: ICON;
+    className?: string;
 }
 
 const iconsMap = new Map<ICON, AnyComponent>([
-    [
-        ICON.checkmark, Checkmark,
-    ],
+    [ICON.checkmark, Checkmark],
+    [ICON.back, Back],
 ]);
 
 const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {

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

@@ -16,13 +16,18 @@
 }
 
 .header--top, .header--bottom {
-    padding: 13px 16.666px;
+    padding: 0 16.666px;
     min-height: 44px;
 }
 .header--left, .header--right {
-    padding: 16.666px 13px;
+    padding: 16.666px 0;
     min-width: 44px;
     flex-direction: column;
+
+    > .contents {
+        flex-direction: column;
+        align-items: center;
+    }
 }
 
 .header--top {
@@ -40,6 +45,45 @@
     order: 2;
 }
 
-.header--center {
+.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/src/components/layout/header/Header.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import classnames from "classnames";
+import type { ReactNode } from "react";
 
 import styles from "./Header.module.scss";
 import { Action } from "../../ui/action/Action";
@@ -8,10 +9,17 @@ import { EqualActions } from "../../ui/action/EqualActions";
 interface Props {
     center?: boolean;
     variant?: "toolbar";
-    position?: "top" | "left" | "right" | "bottom";
+    /**
+     * This indicates just how the borders are drawn and how content is aligned, not the actual position on the screen.
+     * To set up position on the screen you need to properly style parent element.
+     */
+    position?: "top" | "left" | "right" | "bottom"; // @TODO disallow left/right if not inside StickyHeader?
     className?: string;
+    before?: ReactNode;
+    after?: ReactNode;
 }
 
+// eslint-disable-next-line max-statements
 const Header: React.FC<Props> = (props) => {
     const { center, children, variant, position = "top" } = props;
 
@@ -30,12 +38,26 @@ const Header: React.FC<Props> = (props) => {
 
     let contents = children;
     if (justActions) {
-        contents = <EqualActions>{contents}</EqualActions>;
+        contents = <EqualActions className={styles.actions}>{contents}</EqualActions>;
+    }
+
+    let before: ReactNode;
+    if (props.before != null) {
+        before = <div className={styles.before}>{props.before}</div>;
+    }
+
+    let after: ReactNode;
+    if (props.after != null) {
+        after = <div className={styles.after}>{props.after}</div>;
     }
 
     return (
         <div className={cls}>
-            {contents}
+            {before}
+            <div className={styles.contents}>
+                {contents}
+            </div>
+            {after}
         </div>
     );
 };

package/src/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;
+}