react-miui 0.1.0 → 0.4.1

package/esm/components/ui/action/EqualActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EqualActions.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAiBzB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"EqualActions.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/EqualActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiBjC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -1,16 +1,17 @@
 import React from "react";
 import { Action } from "./Action";
 import styles from "./EqualActions.module.scss";
+import classnames from "classnames";
 const EqualActions = (props) => {
     React.Children.forEach(props.children, (child) => {
         if (!child || typeof child !== "object" || !("type" in child) || child.type !== Action) {
-            throw new TypeError("Every child of Actions must be an Action component");
+            throw new TypeError("Every child of EqualActions must be an Action component");
         }
     });
     const style = {
         "--actions-count": React.Children.count(props.children),
     };
-    return (React.createElement("div", { className: styles.actions, style: style }, props.children));
+    return (React.createElement("div", { className: classnames(styles.actions, props.className), style: style }, props.children));
 };
 export { EqualActions };
 //# sourceMappingURL=EqualActions.js.map

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

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

package/esm/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;
@@ -17,13 +20,16 @@
     --header-border: #c8c8c9;
     --header-bg: #efeff0;
     --header-text: #484848;
+    --text: #323232;
+    --sub: #959595;
 
     --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;
@@ -31,12 +37,22 @@
     --red1: #ea2700;
 
     --grey1: #737373;
+
+    --focus-color: #dcaf00;
+}
+
+*: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;
+    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/types.d.ts

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

package/esm/types.d.ts.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.1.0",
+  "version": "0.4.1",
   "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/components/icons/Back.tsx

@@ -0,0 +1,21 @@
+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/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,20 +1,25 @@
-import type { AnyComponent } from "../../types";
-
 import React from "react";
+
+import type { AnyComponent } from "../../types";
 import { Checkmark } from "./Checkmark";
+import { Back } from "./Back";
+import { Forward } from "./Forward";
 
 enum ICON {
     checkmark = "checkmark",
+    back = "back",
+    forward = "forward",
 }
 
 interface Props {
     name: ICON;
+    className?: string;
 }
 
 const iconsMap = new Map<ICON, AnyComponent>([
-    [
-        ICON.checkmark, Checkmark,
-    ],
+    [ICON.checkmark, Checkmark],
+    [ICON.back, Back],
+    [ICON.forward, Forward],
 ]);
 
 const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {

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

@@ -16,13 +16,18 @@
 }
 
 .header--top, .header--bottom {
-    padding: 13px 16.666px;
+    padding: 0 16.666px;
     min-height: 44px;
 }
 .header--left, .header--right {
-    padding: 16.666px 13px;
+    padding: 16.666px 0;
     min-width: 44px;
     flex-direction: column;
+
+    > .contents {
+        flex-direction: column;
+        align-items: center;
+    }
 }
 
 .header--top {
@@ -40,6 +45,45 @@
     order: 2;
 }
 
-.header--center {
+.contents {
+    flex: 1;
+    display: flex;
+}
+
+.header--center > .contents {
     justify-content: center;
 }
+
+.header--top, .header--bottom {
+    .before {
+        margin-right: calc(50px / var(--ratio-dimensions));
+    }
+
+    .after {
+        margin-left: calc(50px / var(--ratio-dimensions));
+    }
+
+    .actions {
+        margin: calc(56px / var(--ratio-dimensions)) 0;
+    }
+}
+
+.header--left, .header--right {
+    .before {
+        margin-bottom: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .after {
+        margin-top: calc(50px / var(--ratio-dimensions));
+        flex-direction: column;
+    }
+
+    .actions {
+        margin: 0 calc(56px / var(--ratio-dimensions));
+    }
+}
+
+.before, .after {
+    display: flex;
+}

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

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

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

@@ -0,0 +1,22 @@
+.btn, .a {
+    padding: 7px;
+    background: none;
+    border-radius: 666px;
+    display: inline-block;
+    border: calc(2px / var(--ratio-border)) solid transparent;
+    color: var(--header-text);
+
+    &:hover {
+        background: #00000022;
+    }
+    &:active {
+        background: #00000011;
+        color: currentColor;
+    }
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+}

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

@@ -0,0 +1,49 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import type { ICON } from "../../icons/Icon";
+import { Icon } from "../../icons/Icon";
+import styles from "./HeaderIconAction.module.scss";
+
+interface LinkProps { // @TODO extract? - same on list item
+    href: string;
+}
+
+interface Props {
+    icon?: ICON | Exclude<ReactNode, string>;
+    onClick?: () => void;
+    href?: string;
+    to?: string;
+    Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
+    label?: ReactNode;
+    // if className ever goes here make sure that `a` gets classnames merged
+}
+
+const HeaderIconAction: React.VFC<Props> = (props) => {
+    const { icon, label, href, to, Link, ...restProps } = props;
+
+    let content: ReactNode = icon;
+    if (typeof icon === "string") {
+        content = <Icon className={styles.icon} name={icon as ICON} />;
+    }
+
+    if (to) {
+        if (!Link) {
+            throw new TypeError("`to` prop given without `Link` component");
+        }
+
+        return <Link href={to} {...restProps}><a className={styles.a}>{content}</a></Link>;
+    }
+
+    if (href) {
+        return <a href={href} className={styles.a} {...restProps}>{content}</a>;
+    }
+
+    return (
+        <button className={styles.btn} onClick={props.onClick}>
+            {content}
+        </button>
+    );
+};
+
+export { HeaderIconAction };

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";
+import { Label } from "./Label";
 
 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 };