react-miui 0.5.2 → 0.9.0

package/esm/components/ui/toaster/Toaster.js

@@ -0,0 +1,74 @@
+import React, { createContext, useContext } from "react";
+import { Notification } from "./Notification";
+const ToasterContext = createContext(() => {
+    throw new Error("Toaster Provider missing in the tree");
+});
+const prefix = `${Date.now()}_`;
+let counter = 0;
+const DEFAULT_TIMEOUT = 5000;
+class ToasterProvider extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this._add = (text) => {
+            this._removeAllToasts();
+            const id = prefix + String(counter++);
+            const hide = false;
+            this.setState(prev => ({
+                ...prev,
+                list: [...prev.list, {
+                        id,
+                        text,
+                        hide,
+                    }],
+            }));
+            setTimeout(() => {
+                this.setState(prev => ({
+                    ...prev,
+                    list: prev.list.map(p => {
+                        if (p.id !== id) {
+                            return p;
+                        }
+                        return {
+                            ...p,
+                            hide: true,
+                        };
+                    }),
+                }));
+            }, DEFAULT_TIMEOUT);
+        };
+        this._handleRemove = (id) => {
+            this.setState(prev => ({
+                ...prev,
+                list: prev.list.filter(p => p.id !== id),
+            }));
+        };
+        this._removeAllToasts = () => {
+            this.setState(prev => ({
+                ...prev,
+                list: prev.list.map(p => {
+                    if (p.hide) {
+                        return p;
+                    }
+                    return {
+                        ...p,
+                        hide: true,
+                    };
+                }),
+            }));
+        };
+        this.state = {
+            list: [],
+        };
+    }
+    render() {
+        const notifications = this.state.list.map((t) => {
+            return React.createElement(Notification, { onRemove: this._handleRemove, key: t.id, toast: t });
+        });
+        return (React.createElement(ToasterContext.Provider, { value: this._add },
+            notifications,
+            this.props.children));
+    }
+}
+const useToaster = () => useContext(ToasterContext);
+export { ToasterProvider, useToaster };
+//# sourceMappingURL=Toaster.js.map

package/esm/components/ui/toaster/Toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../../src/components/ui/toaster/Toaster.tsx"],"names":[],"mappings":"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"}

package/esm/components/ui/toaster/Toaster.module.scss

@@ -0,0 +1,32 @@
+@keyframes show {
+    from {
+        transform: translateY(calc(100% + calc(190px / var(--ratio-dimensions))))
+    }
+}
+
+.toast {
+    position: fixed;
+    bottom: 0;
+    left: 40px;
+    right: 40px;
+    display: flex;
+    justify-content: center;
+    z-index: 1;
+
+    span {
+        background: rgba(56, 50, 46, 0.85);
+        color: #F9F6F2;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.37);
+        border-radius: 12px; // around 22 @TODO use calc here
+        display: inline-block;
+        padding: 1em 1em;
+        animation: show 500ms 1;
+        animation-fill-mode: forwards;
+        margin-bottom: calc(190px / var(--ratio-dimensions));
+    }
+}
+
+.hide {
+    transition: opacity 300ms;
+    opacity: 0;
+}

package/esm/components/ui/toaster/types.d.ts

@@ -0,0 +1,7 @@
+interface Toast {
+    id: string;
+    text: string;
+    hide: boolean;
+}
+export type { Toast, };
+//# sourceMappingURL=types.d.ts.map

package/esm/components/ui/toaster/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toaster/types.ts"],"names":[],"mappings":"AAAA,UAAU,KAAK;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACjB;AAED,YAAY,EACR,KAAK,GACR,CAAC"}

package/esm/components/ui/toaster/types.js

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

package/esm/components/ui/toaster/types.js.map

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

package/esm/global.scss

@@ -2,6 +2,7 @@
 :root {
     --ratio-dimensions: 3;
     --ratio-border:     2.666666;
+    // font is calculated from top to bottom
     --ratio-font:       1.666666;
 
     --background: white;
@@ -27,6 +28,18 @@
 
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
+    --modal-bg: #f7f7f7;
+    --modal-button-bg: #f8f8f8;
+    --modal-button-border: #c2c2c2;
+
+    --choice-bg: #ffffff;
+    --choice-text: #999999;
+    --choice-active-bg: #f3f3f3;
+    --choice-active-text: #313131;
+    --choice-border: #cfcfcf;
+
+    --selector-text: #606060;
+    --selector-active: var(--main-color);
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;

package/esm/index.d.ts

@@ -1,4 +1,8 @@
+export * from "./components/form/choice/Choice.js";
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Input.js";
+export * from "./components/form/Label.js";
+export * from "./components/form/TextArea.js";
 export * from "./components/form/Toggle.js";
 export * from "./components/icons/Icon.js";
 export * from "./components/layout/card/Card.js";
@@ -7,9 +11,14 @@ 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/layout/section/SearchContainer.js";
 export * from "./components/layout/section/Section.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";
+export * from "./components/ui/modal/Modal.js";
+export * from "./components/ui/modal/ModalButtons.js";
+export * from "./components/ui/tabs/Selector.js";
+export * from "./components/ui/toaster/Toaster.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;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}

package/esm/index.js

@@ -1,4 +1,8 @@
+export * from "./components/form/choice/Choice.js";
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Input.js";
+export * from "./components/form/Label.js";
+export * from "./components/form/TextArea.js";
 export * from "./components/form/Toggle.js";
 export * from "./components/icons/Icon.js";
 export * from "./components/layout/card/Card.js";
@@ -7,9 +11,14 @@ 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/layout/section/SearchContainer.js";
 export * from "./components/layout/section/Section.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";
+export * from "./components/ui/modal/Modal.js";
+export * from "./components/ui/modal/ModalButtons.js";
+export * from "./components/ui/tabs/Selector.js";
+export * from "./components/ui/toaster/Toaster.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;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}

package/esm/types/form.d.ts

@@ -0,0 +1,7 @@
+interface ObjectValue {
+    value: string;
+    label: string;
+}
+declare type Value = string | ObjectValue;
+export type { ObjectValue, Value, };
+//# sourceMappingURL=form.d.ts.map

package/esm/types/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/types/form.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE;AACtD,aAAK,KAAK,GAAG,MAAM,GAAG,WAAW,CAAC;AAElC,YAAY,EACR,WAAW,EACX,KAAK,GACR,CAAC"}

package/esm/types/form.js

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

package/esm/types/form.js.map

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

package/esm/types.d.ts

@@ -1,4 +1,4 @@
 import type React from "react";
-declare type AnyComponent = React.ComponentClass | React.FC | React.VFC;
+declare type AnyComponent = React.ComponentClass | React.FC;
 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,GAAG,KAAK,CAAC,GAAG,CAAC;AAEhE,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,CAAC;AAEpD,YAAY,EACR,YAAY,GACf,CAAC"}

package/esm/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./makeVariants";
+export * from "./toObjectValue";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}

package/esm/utils/index.js

@@ -0,0 +1,3 @@
+export * from "./makeVariants";
+export * from "./toObjectValue";
+//# sourceMappingURL=index.js.map

package/esm/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}

package/esm/utils/toObjectValue.d.ts

@@ -0,0 +1,4 @@
+import type { ObjectValue, Value } from "../types/form";
+declare const toObjectValue: (s: Value) => ObjectValue;
+export { toObjectValue, };
+//# sourceMappingURL=toObjectValue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toObjectValue.d.ts","sourceRoot":"","sources":["../../src/utils/toObjectValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExD,QAAA,MAAM,aAAa,MAAO,KAAK,KAAG,WAEjC,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC"}

package/esm/utils/toObjectValue.js

@@ -0,0 +1,5 @@
+const toObjectValue = (s) => {
+    return typeof s === "string" ? { value: s, label: s } : s;
+};
+export { toObjectValue, };
+//# sourceMappingURL=toObjectValue.js.map

package/esm/utils/toObjectValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toObjectValue.js","sourceRoot":"","sources":["../../src/utils/toObjectValue.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG,CAAC,CAAQ,EAAe,EAAE;IAC5C,OAAO,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.5.2",
+  "version": "0.9.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -13,7 +13,7 @@
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx,.mjs",
     "lint:fix": "yarn lint --fix",
     "prepack": "yarn compile",
-    "prepublishOnly": "yarn audit && yarn lint && yarn test && yarn docs",
+    "prepublishOnly": "yarn lint && yarn test && yarn docs",
     "start:dev": "next dev",
     "deploy:dev": "next build && next export && netlify deploy --dir out"
   },

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

@@ -0,0 +1,48 @@
+.input {
+    box-sizing: border-box;
+    height: calc(103px / var(--ratio-dimensions));
+    font-size: calc(34 / var(--ratio-font));
+    color: var(--text);
+    border: none;
+    display: block;
+    width: 100%;
+    background: none;
+    font-family: inherit;
+    padding: 1.2em 0;
+
+    &::placeholder {
+        color: var(--sub);
+    }
+}
+
+.wrapper {
+    background: white;
+    display: inline-flex;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 2px;
+    padding: 0 calc(36px / var(--ratio-dimensions));
+    border: calc(1px / var(--ratio-border)) solid var(--border);
+    align-items: center;
+}
+
+.textarea {
+    padding: 1.2em calc(36px / var(--ratio-dimensions));
+    height: unset;
+    resize: vertical;
+    min-height: calc(103px * 3 / var(--ratio-dimensions))
+}
+
+.prefix {
+    margin-right: calc(36px / var(--ratio-dimensions));
+    display: flex;
+}
+
+.suffix {
+    margin-left: calc(36px / var(--ratio-dimensions));
+    display: flex;
+}
+
+.wrapperFocused {
+    border-color: var(--focus-color);
+}

package/src/components/form/Input.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback, useState } from "react";
+import classnames from "classnames";
+
+import styles from "./Input.module.scss";
+
+interface Props {
+    children?: never;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+}
+
+const Input: React.FC<Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> & Props> = ({
+    className, children,
+    prefix, suffix,
+    onFocus, onBlur,
+    ...props
+}) => {
+    const [focused, setFocused] = useState(false);
+
+    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+        setFocused(true);
+        onFocus?.(e);
+    }, [onFocus]);
+
+    const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+        setFocused(false);
+        onBlur?.(e);
+    }, [onBlur]);
+
+    const wrapperCls = classnames(styles.wrapper, {
+        [styles.wrapperFocused]: focused,
+    }, className);
+
+    const prefixElem = prefix ? <div className={styles.prefix}>{prefix}</div> : null;
+    const suffixElem = suffix ? <div className={styles.suffix}>{suffix}</div> : null;
+
+    return (
+        <div className={wrapperCls}>
+            {prefixElem}
+            <input {...props} onFocus={handleFocus} onBlur={handleBlur} className={styles.input} />
+            {suffixElem}
+        </div>
+    );
+};
+
+export {
+    Input,
+};

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

@@ -0,0 +1,15 @@
+.label + .label {
+    margin-top: 23px;
+    display: block;
+}
+
+.text {
+    font-size: calc(28px / var(--ratio-font));
+    margin-bottom: calc(24px / var(--ratio-dimensions));
+    color: var(--sub);
+}
+
+.textBig {
+    font-size: calc(34px / var(--ratio-font));
+
+}

package/src/components/form/Label.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import styles from "./Label.module.scss";
+import { makeVariants } from "../../utils/makeVariants";
+import classnames from "classnames";
+
+interface Props {
+    label?: React.ReactNode;
+    variant?: "big";
+}
+
+const Label: React.FC<Props> = (props) => {
+    const v = makeVariants(props.variant);
+
+    const labelCls = classnames(styles.text, {
+        [styles.textBig]: v.includes("big"),
+    });
+
+    const label = props.label ? <div className={labelCls}>{props.label}</div> : null;
+
+    return (
+        <label className={styles.label}>
+            {label}
+            {props.children}
+        </label>
+    );
+};
+
+export { Label };

package/src/components/form/TextArea.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback, useState } from "react";
+import classnames from "classnames";
+
+import styles from "./Input.module.scss";
+
+interface Props {
+    children?: never;
+}
+
+const TextArea: React.FC<React.TextareaHTMLAttributes<HTMLTextAreaElement> & Props> = ({
+    className, children,
+    onFocus, onBlur,
+    ...props
+}) => {
+    const [focused, setFocused] = useState(false);
+
+    const handleFocus = useCallback((e: React.FocusEvent<HTMLTextAreaElement>) => {
+        setFocused(true);
+        onFocus?.(e);
+    }, [onFocus]);
+
+    const handleBlur = useCallback((e: React.FocusEvent<HTMLTextAreaElement>) => {
+        setFocused(false);
+        onBlur?.(e);
+    }, [onBlur]);
+
+    const cls = classnames(styles.wrapper, {
+        [styles.wrapperFocused]: focused,
+    }, styles.input, styles.textarea, className);
+
+    return (
+        <textarea {...props} onFocus={handleFocus} onBlur={handleBlur} className={cls} />
+    );
+};
+
+export {
+    TextArea,
+};

package/src/components/form/Toggle.tsx

@@ -8,7 +8,7 @@ interface Props {
     state: boolean | null;
 }
 
-const Toggle: React.VFC<Props> = (props) => {
+const Toggle: React.FC<Props> = (props) => {
     const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
         if (props.state == null) {
             return;

package/src/components/form/choice/Choice.module.scss

@@ -0,0 +1,43 @@
+.choice {
+    input {
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        opacity: 0;
+        margin: 0;
+        position: absolute;
+
+        &:checked + span {
+            color: var(--choice-active-text);
+            background: var(--choice-active-bg);
+        }
+    }
+
+    span {
+        display: flex;
+        padding: 0;
+        flex: 1;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        font-size: calc(24px / var(--ratio-font));
+        color: var(--choice-text);
+        background: var(--choice-bg);
+    }
+
+    display: flex;
+    border: 1px solid var(--choice-border); // @TODO width
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+
+    label {
+        flex: 1;
+        height: calc(89px / var(--ratio-dimensions));
+        display: flex;
+
+        + label {
+            border-left: 1px solid var(--choice-border);
+        }
+    }
+}

package/src/components/form/choice/Choice.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import type { Value } from "../../../types/form";
+import { toObjectValue } from "../../../utils";
+import { ChoiceItem } from "./ChoiceItem";
+import styles from "./Choice.module.scss";
+
+interface Props {
+    values: Value[];
+    value: string;
+    name: string;
+    onChange: (value: string) => void;
+}
+
+const Choice: React.FC<Props> = (props) => {
+    const opts = props.values.map(option => {
+        const opt = toObjectValue(option);
+        return (
+            <ChoiceItem
+                key={opt.value}
+                name={props.name}
+                value={opt}
+                onChange={props.onChange}
+                active={props.value === opt.value}
+            />
+        );
+    });
+
+    return <div className={styles.choice}>{opts}</div>;
+};
+
+export { Choice };

package/src/components/form/choice/ChoiceItem.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from "react";
+import type { ObjectValue } from "../../../types/form";
+
+interface Props {
+    name: string;
+    value: ObjectValue;
+    onChange: (value: string) => void;
+    active: boolean;
+}
+
+const ChoiceItem: React.FC<Props> = (props) => {
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        props.onChange(e.currentTarget.value);
+    }, [props.onChange]);
+
+    return (
+        <label key={props.value.value} tabIndex={0}>
+            <input
+                type={"radio"}
+                name={props.name}
+                value={props.value.value}
+                checked={props.active}
+                onChange={handleChange}
+            />
+            <span>{props.value.label}</span>
+        </label>
+    );
+};
+
+export { ChoiceItem };

package/src/components/icons/Back.tsx

@@ -4,7 +4,7 @@ interface Props {
     className?: string;
 }
 
-const Back: React.VFC<Props> = (props) => {
+const Back: React.FC<Props> = (props) => {
     return (
         <svg
             width={"9"}

package/src/components/icons/Battery.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Battery: React.FC<Props> = (props) => {
+    return (
+        <svg
+            width={"13"}
+            height={"17"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path
+                fill={"none"}
+                stroke={"#000"}
+                strokeLinecap={"round"}
+                strokeLinejoin={"round"}
+                d={"M12.5 2.55q0-.6-.5-.55H9.25q-.65 0-.6-.7v-.2Q8.7.5 8.2.5H4.75q-.4 0-.4.4v.4q.05.75-.75.7H1.1q-.6-.05-.6.55V16q0 .5.6.5h11q.4 0 .4-.45V2.55"}
+            />
+            <path
+                fill={"none"}
+                stroke={"#000"}
+                strokeLinecap={"round"}
+                strokeLinejoin={"round"}
+                d={"M8.9 8.6h-2V5.8l-3 4 1.95.05v2.75l3.05-4"}
+            />
+        </svg>
+
+    );
+};
+
+export { Battery };