react-miui 0.0.1-beta.8 → 0.2.0

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { Button } from "../../../../index.js";
+const ButtonDemo = () => {
+    return (React.createElement("div", null,
+        React.createElement(Button, null, "Basic button"),
+        React.createElement("br", null),
+        React.createElement(Button, { disabled: true }, "Disabled button"),
+        React.createElement("br", null),
+        React.createElement(Button, { variant: "inline" }, "Inline button"),
+        React.createElement("br", null),
+        React.createElement(Button, { variant: "outline" }, "Outline button")));
+};
+export { ButtonDemo };
+//# sourceMappingURL=ButtonDemo.js.map

package/esm/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,UAAU,GAAG,GAAG,EAAE;IACpB,OAAO,CACH;QACI,oBAAC,MAAM,uBAAsB;QAC7B,+BAAM;QACN,oBAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,sBAA0B;QAChD,+BAAM;QACN,oBAAC,MAAM,IAAC,OAAO,EAAE,QAAQ,oBAAwB;QACjD,+BAAM;QACN,oBAAC,MAAM,IAAC,OAAO,EAAE,SAAS,qBAAyB,CACjD,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,27 @@
+import React, { useCallback, useState } from "react";
+import { DirectionPad } from "../../../..";
+const DirectionPadDemo = (props) => {
+    const [lastClick, setLastClick] = useState("<none>");
+    const handleLeftClick = useCallback(() => {
+        setLastClick("left");
+    }, []);
+    const handleRightClick = useCallback(() => {
+        setLastClick("right");
+    }, []);
+    const handleUpClick = useCallback(() => {
+        setLastClick("up");
+    }, []);
+    const handleDownClick = useCallback(() => {
+        setLastClick("down");
+    }, []);
+    const handleMiddleClick = useCallback(() => {
+        setLastClick("res");
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DirectionPad, { onLeftPress: handleLeftClick, onRightPress: handleRightClick, onUpPress: handleUpClick, onDownPress: handleDownClick, onMiddlePress: handleMiddleClick, middleLabel: "RES" }),
+        React.createElement("div", null,
+            "Last clicked button: ",
+            lastClick)));
+};
+export { DirectionPadDemo };
+//# sourceMappingURL=Pad.js.map

package/esm/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,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,gBAAgB,GAAa,CAAC,KAAK,EAAE,EAAE;IACzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAErD,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH;QACI,oBAAC,YAAY,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;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/esm/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/esm/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/esm/demo/components/ui/icons/Icons.js

@@ -0,0 +1,14 @@
+import React from "react";
+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(Item, { key: value },
+            React.createElement("div", { className: styles.row },
+                value,
+                React.createElement(Icon, { name: value }))));
+    });
+    return (React.createElement(List, null, icons));
+};
+export { IconsDemo };
+//# sourceMappingURL=Icons.js.map

package/esm/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,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

@@ -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/esm/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;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

@@ -0,0 +1,100 @@
+import { CheckboxDemo } from "./components/form/Checkbox";
+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";
+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";
+const componentsMap = {
+    Button: {
+        name: "Button",
+        Component: ButtonDemo,
+    },
+    Checkbox: {
+        name: "Checkbox",
+        Component: CheckboxDemo,
+    },
+    Header: {
+        name: "Header",
+        Component: HeaderDemo,
+        children: {
+            Centered: {
+                name: "Centered",
+                Component: CenteredHeaderDemo,
+            },
+            WithButtons: {
+                name: "With buttons",
+                Component: HeaderWithButtonsDemo,
+                children: {
+                    OnLeft: {
+                        name: "On the side",
+                        Component: HeaderWithButtonsOnSideDemo,
+                    },
+                },
+            },
+            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,
+                    },
+                },
+            },
+        },
+    },
+    Action: {
+        name: "Action",
+        Component: ActionDemo,
+        children: {
+            ActionOnBottom: {
+                name: "Actions on header",
+                Component: ActionsOnBottom,
+            },
+            ActionLabelsOnBottom: {
+                name: "Actions with labels on header",
+                Component: ActionLabelsOnBottom,
+            },
+            ActionOnLeft: {
+                name: "Actions on left header",
+                Component: ActionsOnLeft,
+            },
+            EqualActions: {
+                name: "EqualActions (wrapper)",
+                Component: ActionsDemo,
+            },
+        },
+    },
+    ListItem: {
+        name: "List & Item",
+        Component: ListItemDemo,
+    },
+    Pad: {
+        name: "Direction pad",
+        Component: DirectionPadDemo,
+    },
+    Icons: {
+        name: "Icons",
+        Component: IconsDemo,
+    },
+};
+export { componentsMap, };
+//# sourceMappingURL=componentsMap.js.map

package/esm/demo/componentsMap.js.map

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

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

@@ -0,0 +1,11 @@
+const makeVariants = (variants) => {
+    if (!variants) {
+        return [];
+    }
+    if (typeof variants === "string") {
+        return variants.split(" ").filter(Boolean);
+    }
+    return variants;
+};
+export { makeVariants, };
+//# sourceMappingURL=makeVariants.js.map

package/esm/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;AAEF,OAAO,EACH,YAAY,GACf,CAAC"}

package/esm/global.scss

@@ -1,9 +1,9 @@
-// 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;
 
@@ -18,17 +18,34 @@
     --header-bg: #efeff0;
     --header-text: #484848;
 
-    --toolbar--border: #ababab;
-    --toolbar--bg: #f8f8f8;
+    --toolbar-border: #ababab;
+    --toolbarf-bg: #f8f8f8;
+
+    // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
+    --blue1: #038bf4;
+    --orange1: #ff7200;
+    --purple1: #7357e8;
+    --green1: #3ec234;
+    --green1-darker: #38af2f;
+    --pink1: #ff388f;
+    --red1: #ea2700;
+
+    --grey1: #737373;
+
+    --focus-color: #dcaf00;
+}
 
-    --color1: #00aeeb;
-    --color2: #9d6ee5;
-    --color3: #00c293;
-    --color4: #ff5290;
-    --color5: #ff7259;
-    --color6: #4083f7;
+*:focus {
+    outline: none!important;
 }
 
-*:focus { // @TODO take care of focus
+*:focus-visible:focus-visible {
     outline: none!important;
+    border-color: var(--focus-color);
+    background-color: var(--focus-bg-set);
+}
+
+
+body {
+    font-size: 15px;
 }

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

@@ -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.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","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/esm/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/esm/pages/_app.js

@@ -1,6 +1,10 @@
 import React from "react";
+import Head from "next/head";
 import "../global.scss";
 import "../demo-global.scss";
-const MyApp = ({ Component, pageProps }) => (React.createElement(Component, { ...pageProps }));
+const MyApp = ({ Component, pageProps }) => (React.createElement(React.Fragment, null,
+    React.createElement(Head, null,
+        React.createElement("title", null, "MIUI in React")),
+    React.createElement(Component, { ...pageProps })));
 export default MyApp;
 //# sourceMappingURL=_app.js.map

package/esm/pages/_app.js.map

@@ -1 +1 @@
-{"version":3,"file":"_app.js","sourceRoot":"","sources":["../../src/pages/_app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAY,EAAE,EAAE,CAAC,CAClD,oBAAC,SAAS,OAAK,SAAS,GAAI,CAC/B,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"_app.js","sourceRoot":"","sources":["../../src/pages/_app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,WAAW,CAAC;AAG7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAY,EAAE,EAAE,CAAC,CAClD;IACI,oBAAC,IAAI;QACD,mDAA4B,CACzB;IACP,oBAAC,SAAS,OAAK,SAAS,GAAI,CAC7B,CACN,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -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/esm/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/esm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/types.js.map

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

package/next-env.d.ts

@@ -1,5 +1,6 @@
-/* eslint-disable spaced-comment, @typescript-eslint/triple-slash-reference */
-
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.0.1-beta.8",
+  "version": "0.2.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -14,7 +14,8 @@
     "lint:fix": "yarn lint --fix",
     "prepack": "yarn compile",
     "prepublishOnly": "yarn audit && yarn lint && yarn test && yarn docs",
-    "start:dev": "next dev"
+    "start:dev": "next dev",
+    "deploy:dev": "next build && next export && netlify deploy --dir out"
   },
   "exports": {
     "./global.scss": "./src/global.scss",
@@ -33,7 +34,8 @@
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.12.7",
-    "@dzek69/eslint-config-base": "^2.0.0",
+    "@dzek69/eslint-config-base": "^2.1.0",
+    "@dzek69/eslint-config-react": "^1.2.2",
     "@dzek69/eslint-config-typescript": "^0.4.0",
     "@types/jest": "^26.0.23",
     "@types/react": "^17.0.4",
@@ -42,14 +44,14 @@
     "@typescript-eslint/parser": "^4.11.1",
     "babel-plugin-module-extension": "^0.1.3",
     "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^7.14.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.24.0",
     "fast-glob": "^3.2.7",
     "fs-extra": "^9.0.1",
     "husky": "^4.3.0",
     "jest": "^27.0.6",
     "must": "^0.13.4",
-    "next": "^11.1.0",
-    "nodemon": "^2.0.6",
+    "next": "^11.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use": "^17.2.4",
@@ -69,7 +71,7 @@
     }
   },
   "libraryTemplate": {
-    "version": "3.3.1",
+    "version": "3.4.0",
     "language": "typescript",
     "fixDefaultForCommonJS": true,
     "jsx": true

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

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

package/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/Checkmark.tsx

@@ -7,11 +7,14 @@ interface Props {
 const Checkmark: React.FC<Props> = (props) => {
     return (
         <svg
-            xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 45.701 45.7"
+            xmlns={"http://www.w3.org/2000/svg"}
+            width={"16"}
+            height={"16"}
+            viewBox={"0 0 45.701 45.7"}
             className={props.className}
         >
             <path
-                d="M20.687 38.332a5.308 5.308 0 01-7.505 0L1.554 26.704A5.306 5.306 0 119.059 19.2l6.928 6.927a1.344 1.344 0 001.896 0L36.642 7.368a5.308 5.308 0 017.505 7.504l-23.46 23.46z"
+                d={"M20.687 38.332a5.308 5.308 0 01-7.505 0L1.554 26.704A5.306 5.306 0 119.059 19.2l6.928 6.927a1.344 1.344 0 001.896 0L36.642 7.368a5.308 5.308 0 017.505 7.504l-23.46 23.46z"}
             />
         </svg>
 

package/src/components/icons/Icon.tsx

@@ -0,0 +1,30 @@
+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.back, Back],
+]);
+
+const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {
+    const C = iconsMap.get(iconName);
+    if (!C) {
+        throw new TypeError("Unknown icon: " + iconName);
+    }
+    return <C {...props} />;
+};
+
+export { Icon, ICON };