react-miui 0.0.1 → 0.3.0

package/dist/demo/components/ui/button/ButtonDemo.d.ts

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

package/dist/demo/components/ui/button/ButtonDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonDemo.d.ts","sourceRoot":"","sources":["../../../../../src/demo/components/ui/button/ButtonDemo.tsx"],"names":[],"mappings":";AAGA,QAAA,MAAM,UAAU,mBAYf,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/demo/components/ui/button/ButtonDemo.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonDemo = void 0;
+const react_1 = __importDefault(require("react"));
+const index_js_1 = require("../../../../index.js");
+const ButtonDemo = () => {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(index_js_1.Button, null, "Basic button"),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(index_js_1.Button, { disabled: true }, "Disabled button"),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(index_js_1.Button, { variant: "inline" }, "Inline button"),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(index_js_1.Button, { variant: "outline" }, "Outline button")));
+};
+exports.ButtonDemo = ButtonDemo;
+//# sourceMappingURL=ButtonDemo.js.map

package/dist/demo/components/ui/button/ButtonDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonDemo.js","sourceRoot":"","sources":["../../../../../src/demo/components/ui/button/ButtonDemo.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,mDAA8C;AAE9C,MAAM,UAAU,GAAG,GAAG,EAAE;IACpB,OAAO,CACH;QACI,8BAAC,iBAAM,uBAAsB;QAC7B,yCAAM;QACN,8BAAC,iBAAM,IAAC,QAAQ,EAAE,IAAI,sBAA0B;QAChD,yCAAM;QACN,8BAAC,iBAAM,IAAC,OAAO,EAAE,QAAQ,oBAAwB;QACjD,yCAAM;QACN,8BAAC,iBAAM,IAAC,OAAO,EAAE,SAAS,qBAAyB,CACjD,CACT,CAAC;AACN,CAAC,CAAC;AAEO,gCAAU"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pad.d.ts","sourceRoot":"","sources":["../../../../../src/demo/components/ui/directionPad/Pad.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAkC7B,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,49 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectionPadDemo = void 0;
+const react_1 = __importStar(require("react"));
+const __1 = require("../../../..");
+const DirectionPadDemo = (props) => {
+    const [lastClick, setLastClick] = react_1.useState("<none>");
+    const handleLeftClick = react_1.useCallback(() => {
+        setLastClick("left");
+    }, []);
+    const handleRightClick = react_1.useCallback(() => {
+        setLastClick("right");
+    }, []);
+    const handleUpClick = react_1.useCallback(() => {
+        setLastClick("up");
+    }, []);
+    const handleDownClick = react_1.useCallback(() => {
+        setLastClick("down");
+    }, []);
+    const handleMiddleClick = react_1.useCallback(() => {
+        setLastClick("res");
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(__1.DirectionPad, { onLeftPress: handleLeftClick, onRightPress: handleRightClick, onUpPress: handleUpClick, onDownPress: handleDownClick, onMiddlePress: handleMiddleClick, middleLabel: "RES" }),
+        react_1.default.createElement("div", null,
+            "Last clicked button: ",
+            lastClick)));
+};
+exports.DirectionPadDemo = DirectionPadDemo;
+//# sourceMappingURL=Pad.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pad.js","sourceRoot":"","sources":["../../../../../src/demo/components/ui/directionPad/Pad.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,mCAA2C;AAE3C,MAAM,gBAAgB,GAAa,CAAC,KAAK,EAAE,EAAE;IACzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,gBAAQ,CAAC,QAAQ,CAAC,CAAC;IAErD,MAAM,eAAe,GAAG,mBAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,gBAAgB,GAAG,mBAAW,CAAC,GAAG,EAAE;QACtC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,aAAa,GAAG,mBAAW,CAAC,GAAG,EAAE;QACnC,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,eAAe,GAAG,mBAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,iBAAiB,GAAG,mBAAW,CAAC,GAAG,EAAE;QACvC,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH;QACI,8BAAC,gBAAY,IACT,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,gBAAgB,EAC9B,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,eAAe,EAC5B,aAAa,EAAE,iBAAiB,EAChC,WAAW,EAAE,KAAK,GACpB;QACF;;YAC0B,SAAS,CAC7B,CACP,CACN,CAAC;AACN,CAAC,CAAC;AAEO,4CAAgB"}

package/dist/demo/components/ui/icons/Icons.d.ts

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

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

@@ -0,0 +1 @@
+{"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/dist/demo/components/ui/icons/Icons.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconsDemo = void 0;
+const react_1 = __importDefault(require("react"));
+const index_js_1 = require("../../../../index.js");
+const Icons_module_scss_1 = __importDefault(require("./Icons.module.scss"));
+const IconsDemo = () => {
+    const icons = Object.values(index_js_1.ICON).map((value) => {
+        return (react_1.default.createElement(index_js_1.Item, { key: value },
+            react_1.default.createElement("div", { className: Icons_module_scss_1.default.row },
+                value,
+                react_1.default.createElement(index_js_1.Icon, { name: value }))));
+    });
+    return (react_1.default.createElement(index_js_1.List, null, icons));
+};
+exports.IconsDemo = IconsDemo;
+//# sourceMappingURL=Icons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../../../../src/demo/components/ui/icons/Icons.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,mDAA8D;AAE9D,4EAAyC;AAEzC,MAAM,SAAS,GAAa,GAAG,EAAE;IAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,eAAI,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5C,OAAO,CACH,8BAAC,eAAI,IAAC,GAAG,EAAE,KAAK;YACZ,uCAAK,SAAS,EAAE,2BAAM,CAAC,GAAG;gBACrB,KAAK;gBACN,8BAAC,eAAI,IAAC,IAAI,EAAE,KAAK,GAAI,CACnB,CACH,CACV,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,8BAAC,eAAI,QACA,KAAK,CACH,CACV,CAAC;AACN,CAAC,CAAC;AAEO,8BAAS"}

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

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

package/dist/demo/componentsMap.d.ts

@@ -0,0 +1,13 @@
+import type { AnyComponent } from "../types";
+interface TheMap {
+    [key: string]: TheMapItem;
+}
+interface TheMapItem {
+    name: string;
+    Component: AnyComponent;
+    children?: TheMap;
+}
+declare const componentsMap: TheMap;
+export { componentsMap, };
+export type { TheMap, TheMapItem, };
+//# sourceMappingURL=componentsMap.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentsMap = void 0;
+const Checkbox_1 = require("./components/form/Checkbox");
+const Header_1 = require("./components/layout/header/Header");
+const StickyHeader_1 = require("./components/layout/header/StickyHeader");
+const List_Item_1 = require("./components/layout/list/List.Item");
+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",
+        Component: ButtonDemo_1.ButtonDemo,
+    },
+    Checkbox: {
+        name: "Checkbox",
+        Component: Checkbox_1.CheckboxDemo,
+    },
+    Toggle: {
+        name: "Toggle",
+        Component: Toggle_1.ToggleDemo,
+    },
+    Header: {
+        name: "Header",
+        Component: Header_1.HeaderDemo,
+        children: {
+            Centered: {
+                name: "Centered",
+                Component: Header_1.CenteredHeaderDemo,
+            },
+            Toolbar: {
+                name: "Toolbar",
+                Component: Header_1.ToolbarVariantDemo,
+            },
+            WithButtons: {
+                name: "With buttons",
+                Component: Header_1.HeaderWithButtonsDemo,
+                children: {
+                    OnLeft: {
+                        name: "On the side",
+                        Component: Header_1.HeaderWithButtonsOnSideDemo,
+                    },
+                },
+            },
+            Sticky: {
+                name: "Sticky",
+                Component: StickyHeader_1.StickyHeaderDemo,
+                children: {
+                    StickyBottom: {
+                        name: "On bottom",
+                        Component: StickyHeader_1.StickyHeaderBottomDemo,
+                    },
+                    StickyTopBottom: {
+                        name: "On top & bottom",
+                        Component: StickyHeader_1.StickyHeaderTopBottomDemo,
+                    },
+                    StickyLeft: {
+                        name: "On left",
+                        Component: StickyHeader_1.StickyHeaderLeftDemo,
+                    },
+                    StickyRight: {
+                        name: "On right",
+                        Component: StickyHeader_1.StickyHeaderRightDemo,
+                    },
+                    StickyLeftCentered: {
+                        name: "On left centered",
+                        Component: StickyHeader_1.StickyHeaderLeftCenterDemo,
+                    },
+                },
+            },
+        },
+    },
+    Action: {
+        name: "Action",
+        Component: Action_1.ActionDemo,
+        children: {
+            ActionOnBottom: {
+                name: "Actions on header",
+                Component: Action_1.ActionsOnBottom,
+            },
+            ActionLabelsOnBottom: {
+                name: "Actions with labels on header",
+                Component: Action_1.ActionLabelsOnBottom,
+            },
+            ActionOnLeft: {
+                name: "Actions on left header",
+                Component: Action_1.ActionsOnLeft,
+            },
+            EqualActions: {
+                name: "EqualActions (wrapper)",
+                Component: Action_1.ActionsDemo,
+            },
+        },
+    },
+    ListItem: {
+        name: "List & Item",
+        Component: List_Item_1.ListItemDemo,
+    },
+    Pad: {
+        name: "Direction pad",
+        Component: Pad_1.DirectionPadDemo,
+    },
+    Icons: {
+        name: "Icons",
+        Component: Icons_1.IconsDemo,
+    },
+};
+exports.componentsMap = componentsMap;
+//# sourceMappingURL=componentsMap.js.map

package/dist/demo/componentsMap.js.map

@@ -0,0 +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;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/demo/utils/makeVariants.d.ts

@@ -0,0 +1,3 @@
+declare const makeVariants: <T extends string>(variants: T | T[] | undefined) => T[];
+export { makeVariants, };
+//# sourceMappingURL=makeVariants.d.ts.map

package/dist/demo/utils/makeVariants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeVariants.d.ts","sourceRoot":"","sources":["../../../src/demo/utils/makeVariants.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,0DAQjB,CAAC;AAEF,OAAO,EACH,YAAY,GACf,CAAC"}

package/dist/demo/utils/makeVariants.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeVariants = void 0;
+const makeVariants = (variants) => {
+    if (!variants) {
+        return [];
+    }
+    if (typeof variants === "string") {
+        return variants.split(" ").filter(Boolean);
+    }
+    return variants;
+};
+exports.makeVariants = makeVariants;
+//# sourceMappingURL=makeVariants.js.map

package/dist/demo/utils/makeVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeVariants.js","sourceRoot":"","sources":["../../../src/demo/utils/makeVariants.ts"],"names":[],"mappings":";;;AAAA,MAAM,YAAY,GAAG,CAAmB,QAA6B,EAAO,EAAE;IAC1E,IAAI,CAAC,QAAQ,EAAE;QACX,OAAO,EAAE,CAAC;KACb;IACD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;QAC9B,OAAO,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAQ,CAAC;KACrD;IACD,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAGE,oCAAY"}

package/dist/global.scss

@@ -1,15 +1,18 @@
-// Font-size ratio: 1,6 (666?)
-// Border ratio: 2,6666
-// Dimensions ratio: 3
-
 // @TODO prefix variable names
 :root {
+    --ratio-dimensions: 3;
+    --ratio-border:     2.666666;
+    --ratio-font:       1.666666;
+
     --main-color: #008ad2; // used
     --main-color-alt: #006AA9;
 
     --active-bg: #d3d3d3;
     --inactive-bg: #d3d3d3; // used
 
+    --toggle-handle-bg: #e0e0e0;
+    --toggle-handle-border: #cdcdcd;
+
     --icon: #636363;
     --border: #d5d5d5;
     --button-border: #bababa;
@@ -18,17 +21,35 @@
     --header-bg: #efeff0;
     --header-text: #484848;
 
-    --toolbar--border: #ababab;
-    --toolbar--bg: #f8f8f8;
+    --toolbar-border: #ababab;
+    --toolbar-bg: #f8f8f8;
 
-    --color1: #00aeeb;
-    --color2: #9d6ee5;
-    --color3: #00c293;
-    --color4: #ff5290;
-    --color5: #ff7259;
-    --color6: #4083f7;
+    // 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;
+    --pink1: #ff388f;
+    --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/dist/index.d.ts

@@ -1,2 +1,9 @@
-export * from "./components/form/Checkbox";
+export * from "./components/form/Checkbox.js";
+export * from "./components/icons/Icon.js";
+export * from "./components/layout/header/Header.js";
+export * from "./components/layout/header/StickyHeader.js";
+export * from "./components/layout/list/List.js";
+export * from "./components/layout/list/Item.js";
+export * from "./components/ui/button/Button.js";
+export * from "./components/ui/directionPad/Pad.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAE9C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/dist/index.js

@@ -10,5 +10,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components/form/Checkbox"), exports);
+__exportStar(require("./components/form/Checkbox.js"), exports);
+__exportStar(require("./components/icons/Icon.js"), exports);
+__exportStar(require("./components/layout/header/Header.js"), exports);
+__exportStar(require("./components/layout/header/StickyHeader.js"), exports);
+__exportStar(require("./components/layout/list/List.js"), exports);
+__exportStar(require("./components/layout/list/Item.js"), exports);
+__exportStar(require("./components/ui/button/Button.js"), exports);
+__exportStar(require("./components/ui/directionPad/Pad.js"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6DAA2C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,gEAA8C;AAE9C,6DAA2C;AAE3C,uEAAqD;AACrD,6EAA2D;AAC3D,mEAAiD;AACjD,mEAAiD;AAEjD,mEAAiD;AACjD,sEAAoD"}

package/dist/pages/_app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_app.d.ts","sourceRoot":"","sources":["../../src/pages/_app.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,KAAK,6BAA8B,QAAQ,gBAEhD,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"_app.d.ts","sourceRoot":"","sources":["../../src/pages/_app.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,KAAK,6BAA8B,QAAQ,gBAOhD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/pages/_app.js

@@ -4,8 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const head_1 = __importDefault(require("next/head"));
 require("../global.scss");
 require("../demo-global.scss");
-const MyApp = ({ Component, pageProps }) => (react_1.default.createElement(Component, Object.assign({}, pageProps)));
+const MyApp = ({ Component, pageProps }) => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(head_1.default, null,
+        react_1.default.createElement("title", null, "MIUI in React")),
+    react_1.default.createElement(Component, Object.assign({}, pageProps))));
 exports.default = MyApp;
 //# sourceMappingURL=_app.js.map

package/dist/pages/_app.js.map

@@ -1 +1 @@
-{"version":3,"file":"_app.js","sourceRoot":"","sources":["../../src/pages/_app.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAG1B,0BAAwB;AACxB,+BAA6B;AAE7B,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAY,EAAE,EAAE,CAAC,CAClD,8BAAC,SAAS,oBAAK,SAAS,EAAI,CAC/B,CAAC;AAEF,kBAAe,KAAK,CAAC"}
+{"version":3,"file":"_app.js","sourceRoot":"","sources":["../../src/pages/_app.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,qDAA6B;AAG7B,0BAAwB;AACxB,+BAA6B;AAE7B,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAY,EAAE,EAAE,CAAC,CAClD;IACI,8BAAC,cAAI;QACD,6DAA4B,CACzB;IACP,8BAAC,SAAS,oBAAK,SAAS,EAAI,CAC7B,CACN,CAAC;AAEF,kBAAe,KAAK,CAAC"}

package/dist/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/dist/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/dist/pages/react-miui.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const ReactMiuiPage = () => {
+    return (react_1.default.createElement("div", null, "Hi. This is an example page to demonstrate application level routing."));
+};
+exports.default = ReactMiuiPage;
+//# sourceMappingURL=react-miui.js.map

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

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

package/dist/types.d.ts

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

package/dist/types.d.ts.map

@@ -0,0 +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,GAAG,KAAK,CAAC,GAAG,CAAC;AAEhE,YAAY,EACR,YAAY,GACf,CAAC"}

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/docs/assets/js/search.js

@@ -1 +1 @@
-window.searchData = {"kinds":{"32":"Variable"},"rows":[{"id":0,"kind":32,"name":"Checkbox","url":"modules.html#Checkbox","classes":"tsd-kind-variable"}],"index":{"version":"2.3.9","fields":["name","parent"],"fieldVectors":[["name/0",[0,2.877]],["parent/0",[]]],"invertedIndex":[["checkbox",{"_index":0,"name":{"0":{}},"parent":{}}]],"pipeline":[]}}
+window.searchData = {"kinds":{"2":"Namespace","4":"Enumeration","16":"Enumeration member","32":"Variable","64":"Function"},"rows":[{"id":0,"kind":32,"name":"Checkbox","url":"modules.html#Checkbox","classes":"tsd-kind-variable"},{"id":1,"kind":32,"name":"Icon","url":"modules.html#Icon","classes":"tsd-kind-variable"},{"id":2,"kind":4,"name":"ICON","url":"enums/ICON.html","classes":"tsd-kind-enum"},{"id":3,"kind":16,"name":"checkmark","url":"enums/ICON.html#checkmark","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"ICON"},{"id":4,"kind":16,"name":"back","url":"enums/ICON.html#back","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"ICON"},{"id":5,"kind":32,"name":"Header","url":"modules.html#Header","classes":"tsd-kind-variable"},{"id":6,"kind":32,"name":"StickyHeader","url":"modules.html#StickyHeader","classes":"tsd-kind-variable"},{"id":7,"kind":2,"name":"StickyHeader","url":"modules/StickyHeader.html","classes":"tsd-kind-namespace"},{"id":8,"kind":64,"name":"Content","url":"modules/StickyHeader.html#Content","classes":"tsd-kind-function tsd-parent-kind-namespace","parent":"StickyHeader"},{"id":9,"kind":32,"name":"List","url":"modules.html#List","classes":"tsd-kind-variable"},{"id":10,"kind":32,"name":"Item","url":"modules.html#Item","classes":"tsd-kind-variable"},{"id":11,"kind":32,"name":"Button","url":"modules.html#Button","classes":"tsd-kind-variable"},{"id":12,"kind":32,"name":"DirectionPad","url":"modules.html#DirectionPad","classes":"tsd-kind-variable"}],"index":{"version":"2.3.9","fields":["name","parent"],"fieldVectors":[["name/0",[0,22.336]],["parent/0",[]],["name/1",[1,11.35]],["parent/1",[]],["name/2",[1,11.35]],["parent/2",[]],["name/3",[2,22.336]],["parent/3",[1,0.48]],["name/4",[3,22.336]],["parent/4",[1,0.48]],["name/5",[4,22.336]],["parent/5",[]],["name/6",[5,13.863]],["parent/6",[]],["name/7",[5,13.863]],["parent/7",[]],["name/8",[6,22.336]],["parent/8",[5,0.587]],["name/9",[7,22.336]],["parent/9",[]],["name/10",[8,22.336]],["parent/10",[]],["name/11",[9,22.336]],["parent/11",[]],["name/12",[10,22.336]],["parent/12",[]]],"invertedIndex":[["back",{"_index":3,"name":{"4":{}},"parent":{}}],["button",{"_index":9,"name":{"11":{}},"parent":{}}],["checkbox",{"_index":0,"name":{"0":{}},"parent":{}}],["checkmark",{"_index":2,"name":{"3":{}},"parent":{}}],["content",{"_index":6,"name":{"8":{}},"parent":{}}],["directionpad",{"_index":10,"name":{"12":{}},"parent":{}}],["header",{"_index":4,"name":{"5":{}},"parent":{}}],["icon",{"_index":1,"name":{"1":{},"2":{}},"parent":{"3":{},"4":{}}}],["item",{"_index":8,"name":{"10":{}},"parent":{}}],["list",{"_index":7,"name":{"9":{}},"parent":{}}],["stickyheader",{"_index":5,"name":{"6":{},"7":{}},"parent":{"8":{}}}]],"pipeline":[]}}

package/docs/assets/js/search.json

@@ -1 +1 @@
-{"kinds":{"32":"Variable","9999999":"Page"},"rows":[{"id":0,"kind":32,"name":"Checkbox","url":"modules.html#Checkbox","classes":"tsd-kind-variable"},{"id":1,"kind":1,"name":"Test","url":"pages/Tutorials/Test.html","classes":"tsd-kind-page","pagesPluginContent":"This is example tutorial page.\n","pagesPluginParent":"Tutorials / "}],"index":{"version":"2.3.9","fields":["pagesPluginContent","name","parent"],"fieldVectors":[["pagesPluginContent/0",[]],["name/0",[0,6.931]],["parent/0",[]],["pagesPluginContent/1",[1,7.379,2,7.379,3,7.379,4,7.379,5,7.379]],["name/1",[6,6.931]],["parent/1",[]]],"invertedIndex":[["checkbox",{"_index":0,"pagesPluginContent":{},"name":{"0":{}},"parent":{}}],["example",{"_index":3,"pagesPluginContent":{"1":{}},"name":{},"parent":{}}],["is",{"_index":2,"pagesPluginContent":{"1":{}},"name":{},"parent":{}}],["page",{"_index":5,"pagesPluginContent":{"1":{}},"name":{},"parent":{}}],["test",{"_index":6,"pagesPluginContent":{},"name":{"1":{}},"parent":{}}],["this",{"_index":1,"pagesPluginContent":{"1":{}},"name":{},"parent":{}}],["tutorial",{"_index":4,"pagesPluginContent":{"1":{}},"name":{},"parent":{}}]],"pipeline":[]}}
+{"kinds":{"2":"Namespace","4":"Enumeration","16":"Enumeration member","32":"Variable","64":"Function","9999999":"Page"},"rows":[{"id":0,"kind":32,"name":"Checkbox","url":"modules.html#Checkbox","classes":"tsd-kind-variable"},{"id":1,"kind":32,"name":"Icon","url":"modules.html#Icon","classes":"tsd-kind-variable"},{"id":2,"kind":4,"name":"ICON","url":"enums/ICON.html","classes":"tsd-kind-enum"},{"id":3,"kind":16,"name":"checkmark","url":"enums/ICON.html#checkmark","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"ICON","pagesPluginParent":"ICON."},{"id":4,"kind":16,"name":"back","url":"enums/ICON.html#back","classes":"tsd-kind-enum-member tsd-parent-kind-enum","parent":"ICON","pagesPluginParent":"ICON."},{"id":5,"kind":32,"name":"Header","url":"modules.html#Header","classes":"tsd-kind-variable"},{"id":6,"kind":32,"name":"StickyHeader","url":"modules.html#StickyHeader","classes":"tsd-kind-variable"},{"id":7,"kind":2,"name":"StickyHeader","url":"modules/StickyHeader.html","classes":"tsd-kind-namespace"},{"id":8,"kind":64,"name":"Content","url":"modules/StickyHeader.html#Content","classes":"tsd-kind-function tsd-parent-kind-namespace","parent":"StickyHeader","pagesPluginParent":"StickyHeader."},{"id":9,"kind":32,"name":"List","url":"modules.html#List","classes":"tsd-kind-variable"},{"id":10,"kind":32,"name":"Item","url":"modules.html#Item","classes":"tsd-kind-variable"},{"id":11,"kind":32,"name":"Button","url":"modules.html#Button","classes":"tsd-kind-variable"},{"id":12,"kind":32,"name":"DirectionPad","url":"modules.html#DirectionPad","classes":"tsd-kind-variable"},{"id":13,"kind":1,"name":"Test","url":"pages/Tutorials/Test.html","classes":"tsd-kind-page","pagesPluginContent":"This is example tutorial page.\n","pagesPluginParent":"Tutorials / "}],"index":{"version":"2.3.9","fields":["pagesPluginContent","name","parent"],"fieldVectors":[["pagesPluginContent/0",[]],["name/0",[0,23.026]],["parent/0",[]],["pagesPluginContent/1",[]],["name/1",[1,12.04]],["parent/1",[]],["pagesPluginContent/2",[]],["name/2",[1,12.04]],["parent/2",[]],["pagesPluginContent/3",[]],["name/3",[2,23.026]],["parent/3",[1,0.482]],["pagesPluginContent/4",[]],["name/4",[3,23.026]],["parent/4",[1,0.482]],["pagesPluginContent/5",[]],["name/5",[4,23.026]],["parent/5",[]],["pagesPluginContent/6",[]],["name/6",[5,14.553]],["parent/6",[]],["pagesPluginContent/7",[]],["name/7",[5,14.553]],["parent/7",[]],["pagesPluginContent/8",[]],["name/8",[6,23.026]],["parent/8",[5,0.582]],["pagesPluginContent/9",[]],["name/9",[7,23.026]],["parent/9",[]],["pagesPluginContent/10",[]],["name/10",[8,23.026]],["parent/10",[]],["pagesPluginContent/11",[]],["name/11",[9,23.026]],["parent/11",[]],["pagesPluginContent/12",[]],["name/12",[10,23.026]],["parent/12",[]],["pagesPluginContent/13",[11,5.467,12,5.467,13,5.467,14,5.467,15,5.467]],["name/13",[16,23.026]],["parent/13",[]]],"invertedIndex":[["back",{"_index":3,"pagesPluginContent":{},"name":{"4":{}},"parent":{}}],["button",{"_index":9,"pagesPluginContent":{},"name":{"11":{}},"parent":{}}],["checkbox",{"_index":0,"pagesPluginContent":{},"name":{"0":{}},"parent":{}}],["checkmark",{"_index":2,"pagesPluginContent":{},"name":{"3":{}},"parent":{}}],["content",{"_index":6,"pagesPluginContent":{},"name":{"8":{}},"parent":{}}],["directionpad",{"_index":10,"pagesPluginContent":{},"name":{"12":{}},"parent":{}}],["example",{"_index":13,"pagesPluginContent":{"13":{}},"name":{},"parent":{}}],["header",{"_index":4,"pagesPluginContent":{},"name":{"5":{}},"parent":{}}],["icon",{"_index":1,"pagesPluginContent":{},"name":{"1":{},"2":{}},"parent":{"3":{},"4":{}}}],["is",{"_index":12,"pagesPluginContent":{"13":{}},"name":{},"parent":{}}],["item",{"_index":8,"pagesPluginContent":{},"name":{"10":{}},"parent":{}}],["list",{"_index":7,"pagesPluginContent":{},"name":{"9":{}},"parent":{}}],["page",{"_index":15,"pagesPluginContent":{"13":{}},"name":{},"parent":{}}],["stickyheader",{"_index":5,"pagesPluginContent":{},"name":{"6":{},"7":{}},"parent":{"8":{}}}],["test",{"_index":16,"pagesPluginContent":{},"name":{"13":{}},"parent":{}}],["this",{"_index":11,"pagesPluginContent":{"13":{}},"name":{},"parent":{}}],["tutorial",{"_index":14,"pagesPluginContent":{"13":{}},"name":{},"parent":{}}]],"pipeline":[]}}