react-miui 0.3.0 → 0.4.3

package/esm/components/layout/list/Label.js

@@ -0,0 +1,10 @@
+import React from "react";
+import styles from "./Label.module.scss";
+const Label = (props) => {
+    const sub = props.sub ? React.createElement("div", { className: styles.sub }, props.sub) : null;
+    return (React.createElement("div", { className: styles.root },
+        React.createElement("div", null, props.children),
+        sub));
+};
+export { Label };
+//# sourceMappingURL=Label.js.map

package/esm/components/layout/list/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAMzC,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,IAAG,KAAK,CAAC,GAAG,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACvB,iCAAM,KAAK,CAAC,QAAQ,CAAO;QAC1B,GAAG,CACF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,9 @@
+.sub {
+    font-size: calc(27px / var(--ratio-font));
+    color: var(--sub);
+    margin-top: calc(27px / var(--ratio-font) / 3);
+}
+
+.root {
+    padding: calc(54px / var(--ratio-dimensions)) 0;
+}

package/esm/components/layout/list/List.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
-declare const List: React.FC;
+import { Header } from "./Header.js";
+interface SubComponents {
+    Header: typeof Header;
+}
+declare const List: React.FC & SubComponents;
 export { List };
 //# sourceMappingURL=List.d.ts.map

package/esm/components/layout/list/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAIjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,UAAU,aAAa;IACnB,MAAM,EAAE,OAAO,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,GAAG,aAItB,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/layout/list/List.js

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

package/esm/components/layout/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,OAAO,CACH,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,QAAQ,CAAM,CACpD,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAMxC,MAAM,IAAI,GAA6B,CAAC,KAAK,EAAE,EAAE;IAC7C,OAAO,CACH,4BAAI,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,QAAQ,CAAM,CACpD,CAAC;AACN,CAAC,CAAC;AAEF,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/layout/list/Value.d.ts

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

package/esm/components/layout/list/Value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAIlB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/esm/components/layout/list/Value.js

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

package/esm/components/layout/list/Value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,KAAK,GAAa,CAAC,KAAK,EAAE,EAAE;IAC9B,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAC,QAAQ,CAAO,CACvD,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,7 @@
+.value {
+    color: var(--icon);
+    font-size: calc(26px / var(--ratio-font));
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Icon } from "../../icons/Icon";
+import { Icon } from "../../icons/Icon.js";
 import styles from "./Action.module.scss";
 const Action = (props) => {
     const { icon, label, href, to, Link, ...restProps } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAgB1C,MAAM,MAAM,GAAqB,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5D,IAAI,QAAQ,GAAc,IAAI,CAAC;IAC/B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC1B,QAAQ,GAAG,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;KAC3C;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,MAAM,OAAO,GAAG,CACZ;QACI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,QAAQ,CAAO;QAC9C,SAAS,CACX,CACN,CAAC;IAEF,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS;YAAE,2BAAG,SAAS,EAAE,MAAM,CAAC,CAAC,IAAG,OAAO,CAAK,CAAO,CAAC;KACtF;IAED,IAAI,IAAI,EAAE;QACN,OAAO,2BAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,KAAM,SAAS,IAAG,OAAO,CAAK,CAAC;KAC3E;IAED,OAAO,CACH,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,IACnD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAgB1C,MAAM,MAAM,GAAqB,CAAC,KAAK,EAAE,EAAE;IACvC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5D,IAAI,QAAQ,GAAc,IAAI,CAAC;IAC/B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC1B,QAAQ,GAAG,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAY,GAAI,CAAC;KAC3C;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,MAAM,OAAO,GAAG,CACZ;QACI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,QAAQ,CAAO;QAC9C,SAAS,CACX,CACN,CAAC;IAEF,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS;YAAE,2BAAG,SAAS,EAAE,MAAM,CAAC,CAAC,IAAG,OAAO,CAAK,CAAO,CAAC;KACtF;IAED,IAAI,IAAI,EAAE;QACN,OAAO,2BAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,KAAM,SAAS,IAAG,OAAO,CAAK,CAAC;KAC3E;IAED,OAAO,CACH,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,IACnD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/ui/action/EqualActions.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { Action } from "./Action";
-import styles from "./EqualActions.module.scss";
 import classnames from "classnames";
+import { Action } from "./Action.js";
+import styles from "./EqualActions.module.scss";
 const EqualActions = (props) => {
     React.Children.forEach(props.children, (child) => {
         if (!child || typeof child !== "object" || !("type" in child) || child.type !== Action) {

package/esm/components/ui/action/EqualActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EqualActions.js","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,UAAU,MAAM,YAAY,CAAC;AAMpC,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;YACpF,MAAM,IAAI,SAAS,CAAC,yDAAyD,CAAC,CAAC;SAClF;IACL,CAAC,CAAC,CAAC;IAGH,MAAM,KAAK,GAAG;QACV,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;KACnC,CAAC;IAEzB,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACpE,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"EqualActions.js","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAMhD,MAAM,YAAY,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;YACpF,MAAM,IAAI,SAAS,CAAC,yDAAyD,CAAC,CAAC;SAClF;IACL,CAAC,CAAC,CAAC;IAGH,MAAM,KAAK,GAAG;QACV,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;KACnC,CAAC;IAEzB,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,IACpE,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/components/ui/button/Button.js

@@ -1,7 +1,7 @@
 import React from "react";
-import styles from "./Button.module.scss";
 import classnames from "classnames";
-import { makeVariants } from "../../../demo/utils/makeVariants";
+import styles from "./Button.module.scss";
+import { makeVariants } from "../../../utils/makeVariants.js";
 const Button = (props) => {
     const variants = makeVariants(props.variant);
     const cls = classnames(styles.btn, {

package/esm/components/ui/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAOhE,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,CAAC,CAAC;IAEH,OAAO,CACH,gCAAQ,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAU,CAC9E,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAO9D,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,CAAC,CAAC;IAEH,OAAO,CACH,gCAAQ,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAU,CAC9E,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/global.scss

@@ -20,6 +20,8 @@
     --header-border: #c8c8c9;
     --header-bg: #efeff0;
     --header-text: #484848;
+    --text: #323232;
+    --sub: #959595;
 
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
@@ -52,4 +54,5 @@
 
 body {
     font-size: 15px;
+    color: var(--text);
 }

package/esm/index.d.ts

@@ -1,9 +1,13 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Toggle.js";
 export * from "./components/icons/Icon.js";
 export * from "./components/layout/header/Header.js";
+export * from "./components/layout/header/HeaderIconAction.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/action/Action.js";
+export * from "./components/ui/action/EqualActions.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,+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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/esm/index.js

@@ -1,9 +1,13 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Toggle.js";
 export * from "./components/icons/Icon.js";
 export * from "./components/layout/header/Header.js";
+export * from "./components/layout/header/HeaderIconAction.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/action/Action.js";
+export * from "./components/ui/action/EqualActions.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,+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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}

package/esm/utils/makeVariants.d.ts.map

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

package/esm/utils/makeVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeVariants.js","sourceRoot":"","sources":["../../src/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/package.json

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

package/src/components/form/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import styles from "./Checkbox.module.scss";
-import { Checkmark } from "../icons/Checkmark";
+import { Checkmark } from "../icons/Checkmark.js";
 
 interface Props {
     color?: string;

package/src/components/icons/Back.tsx

@@ -6,7 +6,13 @@ interface Props {
 
 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}>
+        <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>
     );

package/src/components/icons/Forward.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Forward: 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={"M.95.15Q.8 0 .55 0t-.4.15Q0 .3 0 .55t.15.4L7.35 8l-7.2 7.05Q0 15.2 0 15.4q0 .25.2.4.15.2.4.2.2 0 .35-.15L9 8 1 .2Q1 .15.95.15"} />
+        </svg>
+    );
+};
+
+export { Forward };

package/src/components/icons/Icon.tsx

@@ -1,12 +1,14 @@
-import type { AnyComponent } from "../../types";
-
 import React from "react";
-import { Checkmark } from "./Checkmark";
-import { Back } from "./Back";
+
+import type { AnyComponent } from "../../types";
+import { Checkmark } from "./Checkmark.js";
+import { Back } from "./Back.js";
+import { Forward } from "./Forward.js";
 
 enum ICON {
     checkmark = "checkmark",
     back = "back",
+    forward = "forward",
 }
 
 interface Props {
@@ -17,6 +19,7 @@ interface Props {
 const iconsMap = new Map<ICON, AnyComponent>([
     [ICON.checkmark, Checkmark],
     [ICON.back, Back],
+    [ICON.forward, Forward],
 ]);
 
 const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {

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

@@ -3,8 +3,8 @@ import classnames from "classnames";
 import type { ReactNode } from "react";
 
 import styles from "./Header.module.scss";
-import { Action } from "../../ui/action/Action";
-import { EqualActions } from "../../ui/action/EqualActions";
+import { Action } from "../../ui/action/Action.js";
+import { EqualActions } from "../../ui/action/EqualActions.js";
 
 interface Props {
     center?: boolean;

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

@@ -0,0 +1,8 @@
+.header > * {
+    padding-top: calc(80px / var(--ratio-dimensions));
+    padding-bottom: calc(40px / var(--ratio-dimensions));
+
+    font-size: calc(26px / var(--ratio-font));
+    color: var(--sub);
+    text-transform: uppercase;
+}

package/src/components/layout/list/Header.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import classnames from "classnames";
+
+import styles from "./Item.module.scss";
+import headerStyles from "./Header.module.scss";
+
+const Header: React.FC = (props) => {
+    // @TODO way to use h1, h2, h3 instead of div
+    return (
+        <li className={classnames(styles.item, headerStyles.header)}>
+            <div>{props.children}</div>
+        </li>
+    );
+};
+
+export { Header };

package/src/components/layout/list/Item.module.scss

@@ -2,7 +2,7 @@
     list-style-type: none;
     margin: 0;
     padding: 0;
-    font-size: 15px;
+    font-size: calc(34px / var(--ratio-font));
 
     &:not(:first-child) > * {
         border-top: 0.37px solid var(--header-border);
@@ -10,7 +10,7 @@
 
     > * {
         display: block;
-        padding: 20px 0;
+        padding: 0;
         text-decoration: none;
     }
 }
@@ -20,4 +20,12 @@
     background: none;
     width: 100%;
     text-align: left;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.content {
+    display: flex;
+    min-height: calc(174px / var(--ratio-dimensions));
+    align-items: center;
 }

package/src/components/layout/list/Item.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import classnames from "classnames";
 
 import styles from "./Item.module.scss";
+import { Value } from "./Value.js";
+import { Label } from "./Label.js";
 
 interface LinkProps {
     href: string;
@@ -13,38 +15,63 @@ interface Props {
     onClick?: () => void;
     className?: string;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    ratio?: string; // @TODO number/number/number/.. type?
 }
 
-const Item: React.FC<Props> = (props) => {
-    const { className, children, href, to, onClick, Link, ...restProps } = props;
+interface SubComponents {
+    Label: typeof Label;
+    Value: typeof Value;
+}
+
+// eslint-disable-next-line max-statements
+const Item: React.FC<Props> & SubComponents = (props) => {
+    const { className, children, href, to, onClick, Link, ratio, ...restProps } = props;
     const cls = classnames(styles.item, className);
 
     const liProps = {
         className: cls,
     };
 
+    const r = ratio ? ratio.split("/") : [];
+
+    const ren = React.Children.map(props.children, (child, index) => {
+        let flex = undefined;
+        if (!r.length && child && typeof child === "object" && "type" in child && child.type === Value) {
+            return child;
+        }
+        if (index in r) {
+            flex = r[index];
+        }
+        return <div style={{ flex }}>{child}</div>;
+    });
+
     if (to) {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
-        return <li {...liProps}><Link href={to} {...restProps}>{children}</Link></li>;
+        return <li {...liProps}><Link href={to} {...restProps}><a className={styles.content}>{ren}</a></Link></li>;
     }
     if (href) {
         const aProps: typeof restProps & { onClick?: Props["onClick"]} = { ...restProps };
         if (onClick) {
             aProps.onClick = onClick;
         }
-        return <li {...liProps}><a href={href} {...aProps}>{children}</a></li>;
+        return <li {...liProps}><a href={href} {...aProps} className={styles.content}>{ren}</a></li>;
     }
     if (onClick) {
         return (
             <li {...liProps}>
-                <button className={styles.button} onClick={props.onClick} {...restProps}>{children}</button>
+                <button className={classnames(styles.button, styles.content)} onClick={props.onClick}{...restProps}>
+                    {ren}
+                </button>
             </li>
         );
     }
-    return <li {...liProps}><div {...restProps}>{children}</div></li>;
+    return <li {...liProps}><div {...restProps} className={styles.content}>{ren}</div></li>;
 };
 
+Item.Label = Label;
+Item.Value = Value;
+
 export { Item };

package/src/components/layout/list/Label.module.scss

@@ -0,0 +1,9 @@
+.sub {
+    font-size: calc(27px / var(--ratio-font));
+    color: var(--sub);
+    margin-top: calc(27px / var(--ratio-font) / 3);
+}
+
+.root {
+    padding: calc(54px / var(--ratio-dimensions)) 0;
+}

package/src/components/layout/list/Label.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import styles from "./Label.module.scss";
+
+interface Props {
+    sub?: ReactNode;
+}
+
+const Label: React.FC<Props> = (props) => {
+    const sub = props.sub ? <div className={styles.sub}>{props.sub}</div> : null;
+
+    return (
+        <div className={styles.root}>
+            <div>{props.children}</div>
+            {sub}
+        </div>
+    );
+};
+
+export { Label };

package/src/components/layout/list/List.tsx

@@ -1,11 +1,18 @@
 import React from "react";
 
+import { Header } from "./Header.js";
 import styles from "./List.module.scss";
 
-const List: React.FC = (props) => {
+interface SubComponents {
+    Header: typeof Header;
+}
+
+const List: React.FC & SubComponents = (props) => {
     return (
         <ul className={styles.list}>{props.children}</ul>
     );
 };
 
+List.Header = Header;
+
 export { List };

package/src/components/layout/list/Value.module.scss

@@ -0,0 +1,7 @@
+.value {
+    color: var(--icon);
+    font-size: calc(26px / var(--ratio-font));
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+}

package/src/components/layout/list/Value.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import styles from "./Value.module.scss";
+
+const Value: React.FC = (props) => {
+    return (
+        <div className={styles.value}>{props.children}</div>
+    );
+};
+
+export { Value };

package/src/components/ui/action/Action.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import type { ReactNode } from "react";
 
 import type { ICON } from "../../icons/Icon";
-import { Icon } from "../../icons/Icon";
+import { Icon } from "../../icons/Icon.js";
 import styles from "./Action.module.scss";
 
 interface LinkProps { // @TODO extract? - same on list item

package/src/components/ui/action/EqualActions.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Action } from "./Action";
+import classnames from "classnames";
 
+import { Action } from "./Action.js";
 import styles from "./EqualActions.module.scss";
-import classnames from "classnames";
 
 interface Props {
     className?: string;

package/src/components/ui/button/Button.tsx

@@ -1,8 +1,8 @@
 import React from "react";
+import classnames from "classnames";
 
 import styles from "./Button.module.scss";
-import classnames from "classnames";
-import { makeVariants } from "../../../demo/utils/makeVariants";
+import { makeVariants } from "../../../utils/makeVariants.js";
 
 interface Props {
     disabled?: boolean;

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

@@ -3,8 +3,6 @@ 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 = () => {
@@ -28,29 +26,21 @@ const ToggleDemo: React.VFC = () => {
 
     return (
         <List>
-            <Item>
-                <div className={styles.row}>
-                    <span>Off</span>
-                    <Toggle onChange={handleNoop} state={false} />
-                </div>
+            <Item ratio={"1/"}>
+                <span>Off</span>
+                <Toggle onChange={handleNoop} state={false} />
             </Item>
-            <Item>
-                <div className={styles.row}>
-                    <span>On</span>
-                    <Toggle onChange={handleNoop} state={true} />
-                </div>
+            <Item ratio={"1/"}>
+                <span>On</span>
+                <Toggle onChange={handleNoop} state={true} />
             </Item>
-            <Item>
-                <div className={styles.row}>
-                    <span>Undetermined</span>
-                    <Toggle onChange={handleNoop} state={null} />
-                </div>
+            <Item ratio={"1/"}>
+                <span>Undetermined</span>
+                <Toggle onChange={handleNoop} state={null} />
             </Item>
-            <Item>
-                <div className={styles.row}>
-                    <span>Dynamic</span>
-                    <Toggle onChange={handleToggle} state={state} />
-                </div>
+            <Item ratio={"1/"}>
+                <span>Dynamic</span>
+                <Toggle onChange={handleToggle} state={state} />
             </Item>
         </List>
     );