react-miui 0.5.2 → 0.6.0

package/esm/components/layout/section/SearchContainer.d.ts.map

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

package/esm/components/layout/section/SearchContainer.js

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

package/esm/components/layout/section/SearchContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchContainer.js","sourceRoot":"","sources":["../../../../src/components/layout/section/SearchContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAEnD,MAAM,eAAe,GAAa,CAAC,KAAK,EAAE,EAAE;IACxC,OAAO,CACH,iCAAS,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,KAAK,CAAC,QAAQ,CAAW,CACjE,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/esm/components/layout/section/SearchContainer.module.scss

@@ -0,0 +1,3 @@
+.section {
+    margin: 12px;
+}

package/esm/components/layout/section/Section.module.scss

@@ -15,3 +15,10 @@
     margin-left: 23px;
     margin-right: 23px;
 }
+
+.section > .section.vertical {
+    padding-top: 23px;
+    padding-bottom: 23px;
+    margin-top: 0;
+    margin-bottom: 0;
+}

package/esm/components/ui/action/Action.d.ts

@@ -12,6 +12,6 @@ interface Props {
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
     label?: ReactNode;
 }
-declare const Action: React.VFC<Props>;
+declare const Action: React.FC<Props>;
 export { Action };
 //# sourceMappingURL=Action.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAI7C,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;CAErB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAkC5B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action/Action.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAI7C,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;CAErB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkC3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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,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"}
+{"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,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,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/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;

package/esm/index.d.ts

@@ -1,4 +1,6 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Input.js";
+export * from "./components/form/Label.js";
 export * from "./components/form/Toggle.js";
 export * from "./components/icons/Icon.js";
 export * from "./components/layout/card/Card.js";
@@ -7,6 +9,7 @@ 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";

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,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,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"}

package/esm/index.js

@@ -1,4 +1,6 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Input.js";
+export * from "./components/form/Label.js";
 export * from "./components/form/Toggle.js";
 export * from "./components/icons/Icon.js";
 export * from "./components/layout/card/Card.js";
@@ -7,6 +9,7 @@ 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";

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,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,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"}

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/package.json

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

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

@@ -0,0 +1,39 @@
+.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;
+
+    &::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;
+}
+
+.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/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/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 };

package/src/components/icons/Forward.tsx

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

package/src/components/icons/Icon.tsx

@@ -4,11 +4,15 @@ import type { AnyComponent } from "../../types";
 import { Checkmark } from "./Checkmark.js";
 import { Back } from "./Back.js";
 import { Forward } from "./Forward.js";
+import { Search } from "./Search.js";
+import { Battery } from "./Battery.js";
 
 enum ICON {
     checkmark = "checkmark",
     back = "back",
     forward = "forward",
+    search = "search",
+    battery = "battery",
 }
 
 interface Props {
@@ -20,6 +24,8 @@ const iconsMap = new Map<ICON, AnyComponent>([
     [ICON.checkmark, Checkmark],
     [ICON.back, Back],
     [ICON.forward, Forward],
+    [ICON.search, Search],
+    [ICON.battery, Battery],
 ]);
 
 const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {

package/src/components/icons/Search.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Search: React.FC<Props> = (props) => {
+    return (
+        <svg
+            baseProfile={"basic"}
+            width={"16"}
+            height={"16"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path
+                fill={"none"}
+                stroke={"currentColor"}
+                strokeWidth={"2"}
+                strokeLinecap={"round"}
+                strokeLinejoin={"round"}
+                d={"M11.95 6.6q0 2.1-1.5 3.6m0-7.2q1.5 1.55 1.5 3.6M6.9 1.5q2.05 0 3.55 1.5m-7.2 0q1.5-1.5 3.65-1.5M1.75 6.6q0-2.05 1.5-3.6m0 7.2q-1.5-1.5-1.5-3.6m5.15 5.1q-2.15 0-3.65-1.5m6.95.2q-1.4 1.3-3.3 1.3m3.3-1.3l4.1 4.1m-3.85-4.3q-.1.1-.25.2"}
+            />
+        </svg>
+
+    );
+};
+
+export { Search };

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

@@ -19,7 +19,7 @@ interface Props {
     // if className ever goes here make sure that `a` gets classnames merged
 }
 
-const HeaderIconAction: React.VFC<Props> = (props) => {
+const HeaderIconAction: React.FC<Props> = (props) => {
     const { icon, label, href, to, Link, ...restProps } = props;
 
     let content: ReactNode = icon;

package/src/components/layout/section/SearchContainer.module.scss

@@ -0,0 +1,3 @@
+.section {
+    margin: 12px;
+}

package/src/components/layout/section/SearchContainer.tsx

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

package/src/components/layout/section/Section.module.scss

@@ -15,3 +15,10 @@
     margin-left: 23px;
     margin-right: 23px;
 }
+
+.section > .section.vertical {
+    padding-top: 23px;
+    padding-bottom: 23px;
+    margin-top: 0;
+    margin-bottom: 0;
+}

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

@@ -19,7 +19,7 @@ interface Props {
     // if className ever goes here make sure that `a` gets classnames merged
 }
 
-const Action: React.VFC<Props> = (props) => {
+const Action: React.FC<Props> = (props) => {
     const { icon, label, href, to, Link, ...restProps } = props;
 
     let iconElem: ReactNode = icon;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { Section } from "../../../components/layout/section/Section";
+import { SectionContainer } from "../../../components/layout/section/SectionContainer";
+import { Input } from "../../../components/form/Input";
+import { Label } from "../../../components/form/Label";
+import { Button } from "../../../components/ui/button/Button";
+
+// @TODO add checkbox
+// @TODO add toggle
+// @TODO some kind of `form` wrapper which also takes cares of margins?
+const FormDemo = () => {
+    return (
+        <SectionContainer>
+            <Section>
+                <Section variant={["vertical", "horizontal"]}>
+                    <Label label={"First name"}>
+                        <Input placeholder={""} />
+                    </Label>
+                    <Label label={"E-mail"}>
+                        <Input placeholder={"Don't forget the @"} suffix={".com"} />
+                    </Label>
+                    <Label>
+                        <Button>Submit</Button>
+                    </Label>
+                </Section>
+            </Section>
+        </SectionContainer>
+    );
+};
+
+export { FormDemo };

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { Input } from "../../../components/form/Input";
+import { ICON, Icon } from "../../../components/icons/Icon";
+
+const InputDemo: React.FC = () => {
+    return (
+        <>
+            <Input placeholder={"Capacity"} prefix={<Icon name={ICON.battery} />} suffix={"kWh"} />
+        </>
+    );
+};
+
+export { InputDemo };

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { Label } from "../../../components/form/Label";
+import { Input } from "../../../components/form/Input";
+import { ICON, Icon } from "../../../components/icons/Icon";
+
+const LabelDemo = () => {
+    return (
+        <Label label={"Capacity"}>
+            <Input placeholder={"ie: 500"} prefix={<Icon name={ICON.battery} />} suffix={"kWh"} />
+        </Label>
+    );
+};
+
+export { LabelDemo };

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { SearchContainer } from "../../../components/layout/section/SearchContainer";
+import { Input } from "../../../components/form/Input";
+import { ICON, Icon } from "../../../components/icons/Icon";
+import { Section } from "../../../components/layout/section/Section";
+import { SectionContainer } from "../../../components/layout/section/SectionContainer";
+import { List } from "../../../components/layout/list/List";
+import { Item } from "../../../components/layout/list/Item";
+
+const SearchDemo = () => {
+    return (
+        <SectionContainer>
+            <SearchContainer>
+                <Input placeholder={"Search..."} prefix={<Icon name={ICON.search} />} />
+            </SearchContainer>
+            <Section>
+                <List>
+                    <List.Header>Messages</List.Header>
+                    <Item>Lorem</Item>
+                    <Item>Ipsum</Item>
+                    <Item>Dolor</Item>
+                </List>
+            </Section>
+            <Section>
+                <List>
+                    <List.Header>Contacts</List.Header>
+                    <Item>Lorem</Item>
+                    <Item>Ipsum</Item>
+                    <Item>Dolor</Item>
+                </List>
+            </Section>
+        </SectionContainer>
+    );
+};
+
+export { SearchDemo };

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

@@ -5,7 +5,7 @@ import { Item } from "../../../components/layout/list/Item";
 
 const handleNoop = () => undefined;
 
-const ToggleDemo: React.VFC = () => {
+const ToggleDemo: React.FC = () => {
     const [state, ss] = useState<boolean | null>(null);
 
     useEffect(() => {

package/src/demo/componentsMap.ts

@@ -29,6 +29,10 @@ import { ListHeaderDemo } from "./components/layout/list/Header";
 import { ValueDemo } from "./components/layout/list/Value";
 import { SectionDemo } from "./components/layout/section/Section";
 import { CardDemo } from "./components/layout/card/Card";
+import { InputDemo } from "./components/form/Input";
+import { FormDemo } from "./components/form/Form";
+import { SearchDemo } from "./components/form/Search";
+import { LabelDemo } from "./components/form/Label";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -42,17 +46,35 @@ interface TheMapItem {
 }
 
 const componentsMap: TheMap = {
-    Button: {
-        name: "Button",
-        Component: ButtonDemo,
-    },
-    Checkbox: {
-        name: "Checkbox",
-        Component: CheckboxDemo,
-    },
-    Toggle: {
-        name: "Toggle",
-        Component: ToggleDemo,
+    Form: {
+        name: "Form",
+        Component: FormDemo,
+        children: {
+            Input: {
+                name: "Input",
+                Component: InputDemo,
+            },
+            Label: {
+                name: "Label",
+                Component: LabelDemo,
+            },
+            Search: {
+                name: "Search",
+                Component: SearchDemo,
+            },
+            Button: {
+                name: "Button",
+                Component: ButtonDemo,
+            },
+            Checkbox: {
+                name: "Checkbox",
+                Component: CheckboxDemo,
+            },
+            Toggle: {
+                name: "Toggle",
+                Component: ToggleDemo,
+            },
+        },
     },
     Header: {
         name: "Header",

package/src/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;

package/src/index.ts

@@ -1,4 +1,6 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Input.js";
+export * from "./components/form/Label.js";
 export * from "./components/form/Toggle.js";
 
 export * from "./components/icons/Icon.js";
@@ -9,6 +11,7 @@ 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";

package/src/types.ts

@@ -1,6 +1,6 @@
 import type React from "react";
 
-type AnyComponent = React.ComponentClass | React.FC | React.VFC;
+type AnyComponent = React.ComponentClass | React.FC;
 
 export type {
     AnyComponent,