react-miui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [UNRELEASED]
 (nothing yet)
 
+## [0.3.0] - 2021-11-21
+### Added
+- Toggle component
+- Missing demo of `toolbar` variant of Header
+
 ## [0.2.0] - 2021-11-21
 ### Added
 - `back` icon

package/dist/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/dist/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/dist/components/form/Toggle.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+const react_1 = __importStar(require("react"));
+const Toggle_module_scss_1 = __importDefault(require("./Toggle.module.scss"));
+const Toggle = (props) => {
+    const handleChange = react_1.useCallback((e) => {
+        if (props.state == null) {
+            return;
+        }
+        props.onChange(e.target.checked);
+    }, [props.onChange, props.state]);
+    return (react_1.default.createElement("label", { className: Toggle_module_scss_1.default.container },
+        react_1.default.createElement("input", { type: "checkbox", checked: Boolean(props.state), "data-undetermined": props.state == null, readOnly: props.state == null, onChange: handleChange }),
+        react_1.default.createElement("div", { className: Toggle_module_scss_1.default.toggle })));
+};
+exports.Toggle = Toggle;
+//# sourceMappingURL=Toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/form/Toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA2C;AAE3C,8EAA0C;AAO1C,MAAM,MAAM,GAAqB,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,YAAY,GAAG,mBAAW,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,yCAAO,SAAS,EAAE,4BAAM,CAAC,SAAS;QAC9B,yCACI,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,uCAAK,SAAS,EAAE,4BAAM,CAAC,MAAM,GAAI,CAC7B,CACX,CAAC;AACN,CAAC,CAAC;AAEO,wBAAM"}

package/dist/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/dist/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/dist/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/dist/demo/components/form/Toggle.js

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleDemo = void 0;
+const react_1 = __importStar(require("react"));
+const Toggle_1 = require("../../../components/form/Toggle");
+const List_1 = require("../../../components/layout/list/List");
+const Item_1 = require("../../../components/layout/list/Item");
+const Toggle_module_scss_1 = __importDefault(require("./Toggle.module.scss"));
+const handleNoop = () => undefined;
+const ToggleDemo = () => {
+    const [state, ss] = react_1.useState(null);
+    react_1.useEffect(() => {
+        setTimeout(() => { ss(true); }, 1000);
+    }, []);
+    const handleToggle = react_1.useCallback(() => {
+        if (state == null) {
+            return;
+        }
+        ss(null);
+        setTimeout(() => {
+            ss(!state);
+        }, 1000);
+    }, [state]);
+    return (react_1.default.createElement(List_1.List, null,
+        react_1.default.createElement(Item_1.Item, null,
+            react_1.default.createElement("div", { className: Toggle_module_scss_1.default.row },
+                react_1.default.createElement("span", null, "Off"),
+                react_1.default.createElement(Toggle_1.Toggle, { onChange: handleNoop, state: false }))),
+        react_1.default.createElement(Item_1.Item, null,
+            react_1.default.createElement("div", { className: Toggle_module_scss_1.default.row },
+                react_1.default.createElement("span", null, "On"),
+                react_1.default.createElement(Toggle_1.Toggle, { onChange: handleNoop, state: true }))),
+        react_1.default.createElement(Item_1.Item, null,
+            react_1.default.createElement("div", { className: Toggle_module_scss_1.default.row },
+                react_1.default.createElement("span", null, "Undetermined"),
+                react_1.default.createElement(Toggle_1.Toggle, { onChange: handleNoop, state: null }))),
+        react_1.default.createElement(Item_1.Item, null,
+            react_1.default.createElement("div", { className: Toggle_module_scss_1.default.row },
+                react_1.default.createElement("span", null, "Dynamic"),
+                react_1.default.createElement(Toggle_1.Toggle, { onChange: handleToggle, state: state })))));
+};
+exports.ToggleDemo = ToggleDemo;
+//# sourceMappingURL=Toggle.js.map

package/dist/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,+CAAgE;AAChE,4DAAyD;AACzD,+DAA4D;AAC5D,+DAA4D;AAE5D,8EAA0C;AAE1C,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC;AAEnC,MAAM,UAAU,GAAc,GAAG,EAAE;IAC/B,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,gBAAQ,CAAiB,IAAI,CAAC,CAAC;IAEnD,iBAAS,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,mBAAW,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,8BAAC,WAAI;QACD,8BAAC,WAAI;YACD,uCAAK,SAAS,EAAE,4BAAM,CAAC,GAAG;gBACtB,kDAAgB;gBAChB,8BAAC,eAAM,IAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5C,CACH;QACP,8BAAC,WAAI;YACD,uCAAK,SAAS,EAAE,4BAAM,CAAC,GAAG;gBACtB,iDAAe;gBACf,8BAAC,eAAM,IAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,GAAI,CAC3C,CACH;QACP,8BAAC,WAAI;YACD,uCAAK,SAAS,EAAE,4BAAM,CAAC,GAAG;gBACtB,2DAAyB;gBACzB,8BAAC,eAAM,IAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,GAAI,CAC3C,CACH;QACP,8BAAC,WAAI;YACD,uCAAK,SAAS,EAAE,4BAAM,CAAC,GAAG;gBACtB,sDAAoB;gBACpB,8BAAC,eAAM,IAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,GAAI,CAC9C,CACH,CACJ,CACV,CAAC;AACN,CAAC,CAAC;AAEO,gCAAU"}

package/dist/demo/components/form/Toggle.module.scss

@@ -0,0 +1,5 @@
+.row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}

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

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

package/dist/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":";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"}
+{"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;AAEF,QAAA,MAAM,kBAAkB,mBAMvB,CAAC;AAKF,QAAA,MAAM,qBAAqB,mBAqD1B,CAAC;AAEF,QAAA,MAAM,2BAA2B,mBAqBhC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,CAAC"}

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderWithButtonsOnSideDemo = exports.HeaderWithButtonsDemo = exports.CenteredHeaderDemo = exports.HeaderDemo = void 0;
+exports.HeaderWithButtonsOnSideDemo = exports.HeaderWithButtonsDemo = exports.ToolbarVariantDemo = exports.CenteredHeaderDemo = exports.HeaderDemo = void 0;
 const react_1 = __importDefault(require("react"));
 const link_1 = __importDefault(require("next/link"));
 const index_js_1 = require("../../../../index.js");
@@ -21,6 +21,11 @@ const CenteredHeaderDemo = () => {
         react_1.default.createElement("div", null, "Header text is centered")));
 };
 exports.CenteredHeaderDemo = CenteredHeaderDemo;
+const ToolbarVariantDemo = () => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_js_1.Header, { center: true, variant: "toolbar" }, "Toolbar version")));
+};
+exports.ToolbarVariantDemo = ToolbarVariantDemo;
 const handleClick = () => { alert(1); };
 const HeaderWithButtonsDemo = () => {
     const demo = (react_1.default.createElement(react_1.default.Fragment, null,

package/dist/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":"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"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../../src/demo/components/layout/header/Header.tsx"],"names":[],"mappings":"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"}

package/dist/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;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"}
+{"version":3,"file":"componentsMap.d.ts","sourceRoot":"","sources":["../../src/demo/componentsMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA0B7C,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,MAiGpB,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC;AAEF,YAAY,EACR,MAAM,EACN,UAAU,GACb,CAAC"}

package/dist/demo/componentsMap.js

@@ -9,6 +9,7 @@ const Pad_1 = require("./components/ui/directionPad/Pad");
 const Icons_1 = require("./components/ui/icons/Icons");
 const ButtonDemo_1 = require("./components/ui/button/ButtonDemo");
 const Action_1 = require("./components/ui/action/Action");
+const Toggle_1 = require("./components/form/Toggle");
 const componentsMap = {
     Button: {
         name: "Button",
@@ -18,6 +19,10 @@ const componentsMap = {
         name: "Checkbox",
         Component: Checkbox_1.CheckboxDemo,
     },
+    Toggle: {
+        name: "Toggle",
+        Component: Toggle_1.ToggleDemo,
+    },
     Header: {
         name: "Header",
         Component: Header_1.HeaderDemo,
@@ -26,6 +31,10 @@ const componentsMap = {
                 name: "Centered",
                 Component: Header_1.CenteredHeaderDemo,
             },
+            Toolbar: {
+                name: "Toolbar",
+                Component: Header_1.ToolbarVariantDemo,
+            },
             WithButtons: {
                 name: "With buttons",
                 Component: Header_1.HeaderWithButtonsDemo,

package/dist/demo/componentsMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentsMap.js","sourceRoot":"","sources":["../../src/demo/componentsMap.ts"],"names":[],"mappings":";;;AACA,yDAA0D;AAC1D,8DAK2C;AAC3C,0EAIiD;AACjD,kEAAkE;AAClE,0DAAoE;AACpE,uDAAwD;AACxD,kEAA+D;AAC/D,0DAMuC;AAavC,MAAM,aAAa,GAAW;IAC1B,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,uBAAU;KACxB;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,uBAAY;KAC1B;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE;YACN,QAAQ,EAAE;gBACN,IAAI,EAAE,UAAU;gBAChB,SAAS,EAAE,2BAAkB;aAChC;YACD,WAAW,EAAE;gBACT,IAAI,EAAE,cAAc;gBACpB,SAAS,EAAE,8BAAqB;gBAChC,QAAQ,EAAE;oBACN,MAAM,EAAE;wBACJ,IAAI,EAAE,aAAa;wBACnB,SAAS,EAAE,oCAA2B;qBACzC;iBACJ;aACJ;YACD,MAAM,EAAE;gBACJ,IAAI,EAAE,QAAQ;gBACd,SAAS,EAAE,+BAAgB;gBAC3B,QAAQ,EAAE;oBACN,YAAY,EAAE;wBACV,IAAI,EAAE,WAAW;wBACjB,SAAS,EAAE,qCAAsB;qBACpC;oBACD,eAAe,EAAE;wBACb,IAAI,EAAE,iBAAiB;wBACvB,SAAS,EAAE,wCAAyB;qBACvC;oBACD,UAAU,EAAE;wBACR,IAAI,EAAE,SAAS;wBACf,SAAS,EAAE,mCAAoB;qBAClC;oBACD,WAAW,EAAE;wBACT,IAAI,EAAE,UAAU;wBAChB,SAAS,EAAE,oCAAqB;qBACnC;oBACD,kBAAkB,EAAE;wBAChB,IAAI,EAAE,kBAAkB;wBACxB,SAAS,EAAE,yCAA0B;qBACxC;iBACJ;aACJ;SACJ;KACJ;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE;YACN,cAAc,EAAE;gBACZ,IAAI,EAAE,mBAAmB;gBACzB,SAAS,EAAE,wBAAe;aAC7B;YACD,oBAAoB,EAAE;gBAClB,IAAI,EAAE,+BAA+B;gBACrC,SAAS,EAAE,6BAAoB;aAClC;YACD,YAAY,EAAE;gBACV,IAAI,EAAE,wBAAwB;gBAC9B,SAAS,EAAE,sBAAa;aAC3B;YACD,YAAY,EAAE;gBACV,IAAI,EAAE,wBAAwB;gBAC9B,SAAS,EAAE,oBAAW;aACzB;SACJ;KACJ;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,wBAAY;KAC1B;IACD,GAAG,EAAE;QACD,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,sBAAgB;KAC9B;IACD,KAAK,EAAE;QACH,IAAI,EAAE,OAAO;QACb,SAAS,EAAE,iBAAS;KACvB;CACJ,CAAC;AAGE,sCAAa"}
+{"version":3,"file":"componentsMap.js","sourceRoot":"","sources":["../../src/demo/componentsMap.ts"],"names":[],"mappings":";;;AACA,yDAA0D;AAC1D,8DAK2C;AAC3C,0EAIiD;AACjD,kEAAkE;AAClE,0DAAoE;AACpE,uDAAwD;AACxD,kEAA+D;AAC/D,0DAMuC;AACvC,qDAAsD;AAatD,MAAM,aAAa,GAAW;IAC1B,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,uBAAU;KACxB;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,uBAAY;KAC1B;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,mBAAU;KACxB;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE;YACN,QAAQ,EAAE;gBACN,IAAI,EAAE,UAAU;gBAChB,SAAS,EAAE,2BAAkB;aAChC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;gBACf,SAAS,EAAE,2BAAkB;aAChC;YACD,WAAW,EAAE;gBACT,IAAI,EAAE,cAAc;gBACpB,SAAS,EAAE,8BAAqB;gBAChC,QAAQ,EAAE;oBACN,MAAM,EAAE;wBACJ,IAAI,EAAE,aAAa;wBACnB,SAAS,EAAE,oCAA2B;qBACzC;iBACJ;aACJ;YACD,MAAM,EAAE;gBACJ,IAAI,EAAE,QAAQ;gBACd,SAAS,EAAE,+BAAgB;gBAC3B,QAAQ,EAAE;oBACN,YAAY,EAAE;wBACV,IAAI,EAAE,WAAW;wBACjB,SAAS,EAAE,qCAAsB;qBACpC;oBACD,eAAe,EAAE;wBACb,IAAI,EAAE,iBAAiB;wBACvB,SAAS,EAAE,wCAAyB;qBACvC;oBACD,UAAU,EAAE;wBACR,IAAI,EAAE,SAAS;wBACf,SAAS,EAAE,mCAAoB;qBAClC;oBACD,WAAW,EAAE;wBACT,IAAI,EAAE,UAAU;wBAChB,SAAS,EAAE,oCAAqB;qBACnC;oBACD,kBAAkB,EAAE;wBAChB,IAAI,EAAE,kBAAkB;wBACxB,SAAS,EAAE,yCAA0B;qBACxC;iBACJ;aACJ;SACJ;KACJ;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,mBAAU;QACrB,QAAQ,EAAE;YACN,cAAc,EAAE;gBACZ,IAAI,EAAE,mBAAmB;gBACzB,SAAS,EAAE,wBAAe;aAC7B;YACD,oBAAoB,EAAE;gBAClB,IAAI,EAAE,+BAA+B;gBACrC,SAAS,EAAE,6BAAoB;aAClC;YACD,YAAY,EAAE;gBACV,IAAI,EAAE,wBAAwB;gBAC9B,SAAS,EAAE,sBAAa;aAC3B;YACD,YAAY,EAAE;gBACV,IAAI,EAAE,wBAAwB;gBAC9B,SAAS,EAAE,oBAAW;aACzB;SACJ;KACJ;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,wBAAY;KAC1B;IACD,GAAG,EAAE;QACD,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,sBAAgB;KAC9B;IACD,KAAK,EAAE;QACH,IAAI,EAAE,OAAO;QACb,SAAS,EAAE,iBAAS;KACvB;CACJ,CAAC;AAGE,sCAAa"}

package/dist/global.scss

@@ -10,6 +10,9 @@
     --active-bg: #d3d3d3;
     --inactive-bg: #d3d3d3; // used
 
+    --toggle-handle-bg: #e0e0e0;
+    --toggle-handle-border: #cdcdcd;
+
     --icon: #636363;
     --border: #d5d5d5;
     --button-border: #bababa;
@@ -19,11 +22,12 @@
     --header-text: #484848;
 
     --toolbar-border: #ababab;
-    --toolbarf-bg: #f8f8f8;
+    --toolbar-bg: #f8f8f8;
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;
     --orange1: #ff7200;
+    --orange1-darker: #cc5b00;
     --purple1: #7357e8;
     --green1: #3ec234;
     --green1-darker: #38af2f;

package/docs/enums/ICON.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>ICON | react-miui - v0.2.0</title>
-	<meta name="description" content="Documentation for react-miui - v0.2.0">
+	<title>ICON | react-miui - v0.3.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.3.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.2.0</a>
+					<a href="../index.html" class="title">react-miui - v0.3.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">
@@ -89,7 +89,7 @@
 					<div class="tsd-signature tsd-kind-icon">back<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;back&quot;</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/40acbc6/src/components/icons/Icon.tsx#L9">src/components/icons/Icon.tsx:9</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/icons/Icon.tsx#L9">src/components/icons/Icon.tsx:9</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -99,7 +99,7 @@
 					<div class="tsd-signature tsd-kind-icon">checkmark<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;checkmark&quot;</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/40acbc6/src/components/icons/Icon.tsx#L8">src/components/icons/Icon.tsx:8</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/icons/Icon.tsx#L8">src/components/icons/Icon.tsx:8</a></li>
 						</ul>
 					</aside>
 				</section>

package/docs/index.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>react-miui - v0.2.0</title>
-	<meta name="description" content="Documentation for react-miui - v0.2.0">
+	<title>react-miui - v0.3.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.3.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="assets/css/main.css">
 	<link rel="stylesheet" href="assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="index.html" class="title">react-miui - v0.2.0</a>
+					<a href="index.html" class="title">react-miui - v0.3.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">
@@ -57,7 +57,7 @@
 					<a href="modules.html">Globals</a>
 				</li>
 			</ul>
-			<h1>Project react-miui - v0.2.0</h1>
+			<h1>Project react-miui - v0.3.0</h1>
 		</div>
 	</div>
 </header>

package/docs/modules/StickyHeader.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>StickyHeader | react-miui - v0.2.0</title>
-	<meta name="description" content="Documentation for react-miui - v0.2.0">
+	<title>StickyHeader | react-miui - v0.3.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.3.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.2.0</a>
+					<a href="../index.html" class="title">react-miui - v0.3.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">
@@ -92,7 +92,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/40acbc6/src/components/layout/header/StickyHeader.tsx#L50">src/components/layout/header/StickyHeader.tsx:50</a></li>
+									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/layout/header/StickyHeader.tsx#L50">src/components/layout/header/StickyHeader.tsx:50</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>

package/docs/modules.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>react-miui - v0.2.0</title>
-	<meta name="description" content="Documentation for react-miui - v0.2.0">
+	<title>react-miui - v0.3.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.3.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="assets/css/main.css">
 	<link rel="stylesheet" href="assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="index.html" class="title">react-miui - v0.2.0</a>
+					<a href="index.html" class="title">react-miui - v0.3.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">
@@ -57,7 +57,7 @@
 					<a href="modules.html">Globals</a>
 				</li>
 			</ul>
-			<h1>Project react-miui - v0.2.0</h1>
+			<h1>Project react-miui - v0.3.0</h1>
 		</div>
 	</div>
 </header>
@@ -104,7 +104,7 @@
 					<div class="tsd-signature tsd-kind-icon">Button<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/40acbc6/src/components/ui/button/Button.tsx#L12">src/components/ui/button/Button.tsx:12</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/ui/button/Button.tsx#L12">src/components/ui/button/Button.tsx:12</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -114,7 +114,7 @@
 					<div class="tsd-signature tsd-kind-icon">Checkbox<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/40acbc6/src/components/form/Checkbox.tsx#L13">src/components/form/Checkbox.tsx:13</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/form/Checkbox.tsx#L13">src/components/form/Checkbox.tsx:13</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -124,7 +124,7 @@
 					<div class="tsd-signature tsd-kind-icon">Direction<wbr>Pad<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/40acbc6/src/components/ui/directionPad/Pad.tsx#L17">src/components/ui/directionPad/Pad.tsx:17</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/ui/directionPad/Pad.tsx#L17">src/components/ui/directionPad/Pad.tsx:17</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -134,7 +134,7 @@
 					<div class="tsd-signature tsd-kind-icon">Header<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/40acbc6/src/components/layout/header/Header.tsx#L23">src/components/layout/header/Header.tsx:23</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/layout/header/Header.tsx#L23">src/components/layout/header/Header.tsx:23</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -144,7 +144,7 @@
 					<div class="tsd-signature tsd-kind-icon">Icon<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/40acbc6/src/components/icons/Icon.tsx#L22">src/components/icons/Icon.tsx:22</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/icons/Icon.tsx#L22">src/components/icons/Icon.tsx:22</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -154,7 +154,7 @@
 					<div class="tsd-signature tsd-kind-icon">Item<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/40acbc6/src/components/layout/list/Item.tsx#L18">src/components/layout/list/Item.tsx:18</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/layout/list/Item.tsx#L18">src/components/layout/list/Item.tsx:18</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -164,7 +164,7 @@
 					<div class="tsd-signature tsd-kind-icon">List<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/40acbc6/src/components/layout/list/List.tsx#L5">src/components/layout/list/List.tsx:5</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/layout/list/List.tsx#L5">src/components/layout/list/List.tsx:5</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -174,7 +174,7 @@
 					<div class="tsd-signature tsd-kind-icon">Sticky<wbr>Header<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> &amp; </span><span class="tsd-signature-type">Content</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/40acbc6/src/components/layout/header/StickyHeader.tsx#L17">src/components/layout/header/StickyHeader.tsx:17</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/layout/header/StickyHeader.tsx#L17">src/components/layout/header/StickyHeader.tsx:17</a></li>
 						</ul>
 					</aside>
 				</section>

package/docs/pages/Tutorials/Test.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>Test | react-miui - v0.2.0</title>
-	<meta name="description" content="Documentation for react-miui - v0.2.0">
+	<title>Test | react-miui - v0.3.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.3.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../../assets/css/main.css">
 	<link rel="stylesheet" href="../../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../../index.html" class="title">react-miui - v0.2.0</a>
+					<a href="../../index.html" class="title">react-miui - v0.3.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">

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

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

@@ -0,0 +1,5 @@
+.row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 declare const HeaderDemo: () => JSX.Element;
 declare const CenteredHeaderDemo: () => JSX.Element;
+declare const ToolbarVariantDemo: () => JSX.Element;
 declare const HeaderWithButtonsDemo: () => JSX.Element;
 declare const HeaderWithButtonsOnSideDemo: () => JSX.Element;
-export { HeaderDemo, CenteredHeaderDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo };
+export { HeaderDemo, CenteredHeaderDemo, ToolbarVariantDemo, 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":";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"}
+{"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;AAEF,QAAA,MAAM,kBAAkB,mBAMvB,CAAC;AAKF,QAAA,MAAM,qBAAqB,mBAqD1B,CAAC;AAEF,QAAA,MAAM,2BAA2B,mBAqBhC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,CAAC"}

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

@@ -13,6 +13,10 @@ const CenteredHeaderDemo = () => {
         React.createElement(Header, { center: true }, "Messages"),
         React.createElement("div", null, "Header text is centered")));
 };
+const ToolbarVariantDemo = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Header, { center: true, variant: "toolbar" }, "Toolbar version")));
+};
 const handleClick = () => { alert(1); };
 const HeaderWithButtonsDemo = () => {
     const demo = (React.createElement(React.Fragment, null,
@@ -42,5 +46,5 @@ const HeaderWithButtonsOnSideDemo = () => {
         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 };
+export { HeaderDemo, CenteredHeaderDemo, ToolbarVariantDemo, 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":"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"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../../src/demo/components/layout/header/Header.tsx"],"names":[],"mappings":"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"}

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;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"}
+{"version":3,"file":"componentsMap.d.ts","sourceRoot":"","sources":["../../src/demo/componentsMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA0B7C,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,MAiGpB,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC;AAEF,YAAY,EACR,MAAM,EACN,UAAU,GACb,CAAC"}

package/esm/demo/componentsMap.js

@@ -1,11 +1,12 @@
 import { CheckboxDemo } from "./components/form/Checkbox";
-import { CenteredHeaderDemo, HeaderDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo, } from "./components/layout/header/Header";
+import { CenteredHeaderDemo, HeaderDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo, ToolbarVariantDemo, } 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";
 import { IconsDemo } from "./components/ui/icons/Icons";
 import { ButtonDemo } from "./components/ui/button/ButtonDemo";
 import { ActionDemo, ActionLabelsOnBottom, ActionsDemo, ActionsOnBottom, ActionsOnLeft, } from "./components/ui/action/Action";
+import { ToggleDemo } from "./components/form/Toggle";
 const componentsMap = {
     Button: {
         name: "Button",
@@ -15,6 +16,10 @@ const componentsMap = {
         name: "Checkbox",
         Component: CheckboxDemo,
     },
+    Toggle: {
+        name: "Toggle",
+        Component: ToggleDemo,
+    },
     Header: {
         name: "Header",
         Component: HeaderDemo,
@@ -23,6 +28,10 @@ const componentsMap = {
                 name: "Centered",
                 Component: CenteredHeaderDemo,
             },
+            Toolbar: {
+                name: "Toolbar",
+                Component: ToolbarVariantDemo,
+            },
             WithButtons: {
                 name: "With buttons",
                 Component: HeaderWithButtonsDemo,

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,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"}
+{"version":3,"file":"componentsMap.js","sourceRoot":"","sources":["../../src/demo/componentsMap.ts"],"names":[],"mappings":"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"}

package/esm/global.scss

@@ -10,6 +10,9 @@
     --active-bg: #d3d3d3;
     --inactive-bg: #d3d3d3; // used
 
+    --toggle-handle-bg: #e0e0e0;
+    --toggle-handle-border: #cdcdcd;
+
     --icon: #636363;
     --border: #d5d5d5;
     --button-border: #bababa;
@@ -19,11 +22,12 @@
     --header-text: #484848;
 
     --toolbar-border: #ababab;
-    --toolbarf-bg: #f8f8f8;
+    --toolbar-bg: #f8f8f8;
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;
     --orange1: #ff7200;
+    --orange1-darker: #cc5b00;
     --purple1: #7357e8;
     --green1: #3ec234;
     --green1-darker: #38af2f;

package/package.json

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

package/src/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/src/components/form/Toggle.tsx

@@ -0,0 +1,33 @@
+import type { ChangeEvent } from "react";
+import React, { useCallback } from "react";
+
+import styles from "./Toggle.module.scss";
+
+interface Props {
+    onChange: (newState: boolean) => void;
+    state: boolean | null;
+}
+
+const Toggle: React.VFC<Props> = (props) => {
+    const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+        if (props.state == null) {
+            return;
+        }
+        props.onChange(e.target.checked);
+    }, [props.onChange, props.state]);
+
+    return (
+        <label className={styles.container}>
+            <input
+                type={"checkbox"}
+                checked={Boolean(props.state)}
+                data-undetermined={props.state == null}
+                readOnly={props.state == null}
+                onChange={handleChange}
+            />
+            <div className={styles.toggle} />
+        </label>
+    );
+};
+
+export { Toggle };

package/src/demo/components/form/Toggle.module.scss

@@ -0,0 +1,5 @@
+.row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}

package/src/demo/components/form/Toggle.tsx

@@ -0,0 +1,59 @@
+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: React.VFC = () => {
+    const [state, ss] = useState<boolean | null>(null);
+
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        setTimeout(() => { ss(true); }, 1000);
+    }, []);
+
+    const handleToggle = useCallback(() => {
+        if (state == null) {
+            return; // shouldn't happen, but ...
+        }
+        ss(null);
+        setTimeout(() => {
+            ss(!state);
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        }, 1000);
+    }, [state]);
+
+    return (
+        <List>
+            <Item>
+                <div className={styles.row}>
+                    <span>Off</span>
+                    <Toggle onChange={handleNoop} state={false} />
+                </div>
+            </Item>
+            <Item>
+                <div className={styles.row}>
+                    <span>On</span>
+                    <Toggle onChange={handleNoop} state={true} />
+                </div>
+            </Item>
+            <Item>
+                <div className={styles.row}>
+                    <span>Undetermined</span>
+                    <Toggle onChange={handleNoop} state={null} />
+                </div>
+            </Item>
+            <Item>
+                <div className={styles.row}>
+                    <span>Dynamic</span>
+                    <Toggle onChange={handleToggle} state={state} />
+                </div>
+            </Item>
+        </List>
+    );
+};
+
+export { ToggleDemo };

package/src/demo/components/layout/header/Header.tsx

@@ -27,6 +27,14 @@ const CenteredHeaderDemo = () => {
     );
 };
 
+const ToolbarVariantDemo = () => {
+    return (
+        <>
+            <Header center={true} variant={"toolbar"}>Toolbar version</Header>
+        </>
+    );
+};
+
 const handleClick = () => { alert(1); };
 
 // eslint-disable-next-line max-lines-per-function
@@ -108,4 +116,4 @@ const HeaderWithButtonsOnSideDemo = () => {
     );
 };
 
-export { HeaderDemo, CenteredHeaderDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo };
+export { HeaderDemo, CenteredHeaderDemo, ToolbarVariantDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo };

package/src/demo/componentsMap.ts

@@ -4,7 +4,7 @@ import {
     CenteredHeaderDemo,
     HeaderDemo,
     HeaderWithButtonsDemo,
-    HeaderWithButtonsOnSideDemo,
+    HeaderWithButtonsOnSideDemo, ToolbarVariantDemo,
 } from "./components/layout/header/Header";
 import {
     StickyHeaderBottomDemo,
@@ -22,6 +22,7 @@ import {
     ActionsOnBottom,
     ActionsOnLeft,
 } from "./components/ui/action/Action";
+import { ToggleDemo } from "./components/form/Toggle";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -43,6 +44,10 @@ const componentsMap: TheMap = {
         name: "Checkbox",
         Component: CheckboxDemo,
     },
+    Toggle: {
+        name: "Toggle",
+        Component: ToggleDemo,
+    },
     Header: {
         name: "Header",
         Component: HeaderDemo,
@@ -51,6 +56,10 @@ const componentsMap: TheMap = {
                 name: "Centered",
                 Component: CenteredHeaderDemo,
             },
+            Toolbar: {
+                name: "Toolbar",
+                Component: ToolbarVariantDemo,
+            },
             WithButtons: {
                 name: "With buttons",
                 Component: HeaderWithButtonsDemo,

package/src/global.scss

@@ -10,6 +10,9 @@
     --active-bg: #d3d3d3;
     --inactive-bg: #d3d3d3; // used
 
+    --toggle-handle-bg: #e0e0e0;
+    --toggle-handle-border: #cdcdcd;
+
     --icon: #636363;
     --border: #d5d5d5;
     --button-border: #bababa;
@@ -19,11 +22,12 @@
     --header-text: #484848;
 
     --toolbar-border: #ababab;
-    --toolbarf-bg: #f8f8f8;
+    --toolbar-bg: #f8f8f8;
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;
     --orange1: #ff7200;
+    --orange1-darker: #cc5b00;
     --purple1: #7357e8;
     --green1: #3ec234;
     --green1-darker: #38af2f;