react-miui 0.9.0 → 0.9.4

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

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,KAAK;IACX,GAAG,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAS1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,KAAK;IACX,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAS1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -1,8 +1,9 @@
 import React from "react";
+import classnames from "classnames";
 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 },
+    return (React.createElement("div", { className: classnames(styles.root, props.className) },
         React.createElement("div", null, props.children),
         sub));
 };

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

@@ -1 +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"}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAOzC,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,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;QACpD,iCAAM,KAAK,CAAC,QAAQ,CAAO;QAC1B,GAAG,CACF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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;AAG1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKrC,aAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,MAAM,EAAE,OAAO,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAqB7B,CAAC;AAIF,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;AAG1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKrC,aAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,MAAM,EAAE,OAAO,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAoB7B,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}

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

@@ -14,9 +14,10 @@ const List = (props) => {
         }
         return child;
     });
-    return (React.createElement("ul", { className: classnames(styles.list, {
-            [styles.inset]: v.includes("inset"),
-        }) }, chld));
+    const cls = classnames(props.className, styles.list, {
+        [styles.inset]: v.includes("inset"),
+    });
+    return (React.createElement("ul", { className: cls }, chld));
 };
 List.Header = Header;
 export { List };

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;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAaxC,MAAM,IAAI,GAAoC,CAAC,KAAK,EAAE,EAAE;IACpD,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACtD,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,EAAE;YACzG,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAE7B,OAAO,EAAE,KAAK,CAAC,OAAO;aACzB,CAAC,CAAC;SACN;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,4BACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE;YAC/B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;SACtC,CAAC,IACJ,IAAI,CACD,CACR,CAAC;AACN,CAAC,CAAC;AAEF,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,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;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAaxC,MAAM,IAAI,GAAoC,CAAC,KAAK,EAAE,EAAE;IACpD,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACtD,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,EAAE;YACzG,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAE7B,OAAO,EAAE,KAAK,CAAC,OAAO;aACzB,CAAC,CAAC;SACN;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE;QACjD,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;KACtC,CAAC,CAAC;IAEH,OAAO,CACH,4BAAI,SAAS,EAAE,GAAG,IAAG,IAAI,CAAM,CAClC,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

@@ -1,4 +1,7 @@
 import React from "react";
-declare const Value: React.FC;
+interface Props {
+    className?: string;
+}
+declare const Value: React.FC<Props>;
 export { Value };
 //# sourceMappingURL=Value.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAI1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAMzC,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAO,CACpF,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/esm/global.scss

@@ -7,11 +7,12 @@
 
     --background: white;
 
-    --main-color: #008ad2; // used
+    --main-color: #008ad2;
     --main-color-alt: #006AA9;
 
-    --active-bg: #d3d3d3;
-    --inactive-bg: #d3d3d3; // used
+    --active-bg: #e7e7e7;
+    --inactive-bg: #d3d3d3;
+    --inactive-dark-bg: #999;
 
     --toggle-handle-bg: #e0e0e0;
     --toggle-handle-border: #cdcdcd;
@@ -32,6 +33,9 @@
     --modal-button-bg: #f8f8f8;
     --modal-button-border: #c2c2c2;
 
+    --input-disabled-bg: #f3f3f3;
+    --input-disabled-text: #959595;
+
     --choice-bg: #ffffff;
     --choice-text: #999999;
     --choice-active-bg: #f3f3f3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.9.0",
+  "version": "0.9.4",
   "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 lint && yarn test && yarn docs",
+    "prepublishOnly": "yarn audit && yarn lint && yarn test && yarn docs",
     "start:dev": "next dev",
     "deploy:dev": "next build && next export && netlify deploy --dir out"
   },
@@ -48,16 +48,16 @@
     "eslint-plugin-react": "^7.24.0",
     "fast-glob": "^3.2.7",
     "fs-extra": "^9.0.1",
-    "husky": "^4.3.0",
-    "jest": "^27.0.6",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
     "must": "^0.13.4",
-    "next": "^11.1.3",
+    "next": "^11.1.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use": "^17.2.4",
     "sass": "^1.35.2",
     "ts-node": "^9.0.0",
-    "typedoc": "^0.21.2",
+    "typedoc": "^0.21.10",
     "typedoc-plugin-pages-fork-fork": "^0.0.3",
     "typescript": "^4.2.4"
   },
@@ -71,7 +71,7 @@
     }
   },
   "libraryTemplate": {
-    "version": "3.4.0",
+    "version": "3.4.1",
     "language": "typescript",
     "fixDefaultForCommonJS": true,
     "jsx": true

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

@@ -6,42 +6,66 @@
         margin: 0;
         vertical-align: middle;
 
-        + span {
-            border-radius: 100px;
-            background: var(--inactive-bg);
-            width: 18px;
-            height: 18px;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            vertical-align: middle;
-
-            svg {
-                width: 9px;
-                height: 9px;
-                fill: white;
-            }
-
-            + span {
-                vertical-align: middle;
-            }
-        }
-
         &:focus-visible {
-            + span {
+            + .checkmark {
                 box-shadow: 0 0 5px black;
             }
         }
 
-        &:checked {
-            + span {
-                color: var(--main-color);
-                background: currentColor;
-            }
+        + .checkmark + .label:not(:empty) {
+            margin-left: 0.75em;
         }
+    }
+}
 
-        + span + span:not(:empty) {
-            margin-left: 0.5em;
-        }
+.checkmark {
+    border-radius: 100px;
+    background: none;
+    border: 1px solid var(--inactive-bg);
+    width: 18px;
+    height: 18px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    box-sizing: border-box;
+
+    svg {
+        display: none;
+        width: 9px;
+        height: 9px;
+        fill: white;
+    }
+
+    + .label {
+        vertical-align: middle;
+    }
+}
+
+.checkmarkChecked {
+    border-width: 0;
+    color: var(--main-color);
+    background: currentColor;
+
+    svg {
+        display: inline-block;
+    }
+
+    &.checkmarkDisabled {
+        background: var(--inactive-dark-bg);
+    }
+}
+
+.checkmarkDisabled {
+    background: var(--active-bg);
+
+    + .label {
+        color: var(--input-disabled-text);
+    }
+}
+
+.checkmarkReadOnly {
+    + .label {
+        color: var(--input-disabled-text);
     }
 }

package/src/components/form/Checkbox.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import classnames from "classnames";
 
 import styles from "./Checkbox.module.scss";
 import { Checkmark } from "../icons/Checkmark.js";
@@ -6,19 +7,39 @@ import { Checkmark } from "../icons/Checkmark.js";
 interface Props {
     color?: string;
     name: string;
-    onChange: () => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     checked: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
 }
 
 const Checkbox: React.FC<Props> = (props) => {
     const style: React.CSSProperties = {};
     props.color && (style.color = props.color);
 
+    const cls = classnames(styles.checkbox, {
+        [styles.disabled]: props.disabled,
+        [styles.readOnly]: props.readOnly,
+    });
+
+    const checkmarkCls = classnames(styles.checkmark, {
+        [styles.checkmarkDisabled]: props.disabled,
+        [styles.checkmarkChecked]: props.checked,
+        [styles.checkmarkReadOnly]: props.readOnly,
+    });
+
     return (
-        <label className={styles.checkbox}>
-            <input type={"checkbox"} name={props.name} onChange={props.onChange} checked={props.checked} />
-            <span style={style}><Checkmark /></span>
-            <span>{props.children}</span>
+        <label className={cls}>
+            <input
+                type={"checkbox"}
+                name={props.name}
+                onChange={props.onChange}
+                checked={props.checked}
+                disabled={props.disabled}
+                readOnly={props.readOnly}
+            />
+            <span style={style} className={checkmarkCls}><Checkmark /></span>
+            <span className={styles.label}>{props.children}</span>
         </label>
     );
 };

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

@@ -24,6 +24,27 @@
     padding: 0 calc(36px / var(--ratio-dimensions));
     border: calc(1px / var(--ratio-border)) solid var(--border);
     align-items: center;
+
+    .input {
+        flex: 1;
+    }
+
+    &.disabled {
+        background: var(--input-disabled-bg);
+        color: var(--input-disabled-text);
+
+        .input {
+            color: var(--input-disabled-text);
+        }
+    }
+
+    &.readOnly {
+        color: var(--input-disabled-text);
+
+        .input {
+            color: var(--input-disabled-text);
+        }
+    }
 }
 
 .textarea {

package/src/components/form/Input.tsx

@@ -29,6 +29,8 @@ const Input: React.FC<Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"
 
     const wrapperCls = classnames(styles.wrapper, {
         [styles.wrapperFocused]: focused,
+        [styles.disabled]: props.disabled,
+        [styles.readOnly]: props.readOnly,
     }, className);
 
     const prefixElem = prefix ? <div className={styles.prefix}>{prefix}</div> : null;

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

@@ -1,20 +1,21 @@
 import React from "react";
 import classnames from "classnames";
 
+import { makeVariants } from "../../../utils/makeVariants";
 import styles from "./Item.module.scss";
 import headerStyles from "./Header.module.scss";
-import { makeVariants } from "../../../utils/makeVariants";
 
 type Variant = "inset";
 
 interface Props {
+    className?: string;
     variant?: Variant | Variant[];
 }
 
 const Header: React.FC<Props> = (props) => {
     const v = makeVariants(props.variant);
 
-    const cls = classnames(styles.item, headerStyles.header, {
+    const cls = classnames(props.className, styles.item, headerStyles.header, {
         [styles.inset]: v.includes("inset"),
     });
 

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

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

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

@@ -30,13 +30,12 @@ const List: React.FC<Props> & SubComponents = (props) => {
         return child;
     });
 
+    const cls = classnames(props.className, styles.list, {
+        [styles.inset]: v.includes("inset"),
+    });
+
     return (
-        <ul
-            className={classnames(styles.list, {
-                [styles.inset]: v.includes("inset"),
-            })}
-        >{chld}
-        </ul>
+        <ul className={cls}>{chld}</ul>
     );
 };
 

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

@@ -1,10 +1,15 @@
 import React from "react";
+import classnames from "classnames";
 
 import styles from "./Value.module.scss";
 
-const Value: React.FC = (props) => {
+interface Props {
+    className?: string;
+}
+
+const Value: React.FC<Props> = (props) => {
     return (
-        <div className={styles.value}>{props.children}</div>
+        <div className={classnames(styles.value, props.className)}>{props.children}</div>
     );
 };
 

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

@@ -2,13 +2,31 @@ import React, { useCallback, useState } from "react";
 
 import { Checkbox } from "../../../index.js";
 
+const handleChangeNoop = () => undefined;
+
 const CheckboxDemo: React.FC = (props) => {
     const [v, setV] = useState(false);
 
     const handleToggle = useCallback(() => { setV((prevV) => !prevV); }, []);
 
     return (
-        <Checkbox name={"a"} onChange={handleToggle} checked={v}>I want something something</Checkbox>
+        <>
+            <Checkbox name={"a"} onChange={handleToggle} checked={!v}>I want something something</Checkbox>
+            <hr />
+            <Checkbox name={"a"} onChange={handleChangeNoop} checked={true} disabled={true}>
+                Something else - disabled
+            </Checkbox>
+            <Checkbox name={"a"} onChange={handleChangeNoop} checked={false} disabled={true}>
+                Something else - disabled
+            </Checkbox>
+            <hr />
+            <Checkbox name={"a"} onChange={handleChangeNoop} checked={true} readOnly={true}>
+                Last option - readonly
+            </Checkbox>
+            <Checkbox name={"a"} onChange={handleChangeNoop} checked={false} readOnly={true}>
+                Last option - readonly
+            </Checkbox>
+        </>
     );
 };
 

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

@@ -6,6 +6,10 @@ const InputDemo: React.FC = () => {
     return (
         <>
             <Input placeholder={"Capacity"} prefix={<Icon name={ICON.battery} />} suffix={"kWh"} />
+            <Input value={"William J. Welter"} />
+            <Input prefix={"Text prefix"} value={"Polly W. Wilson"} />
+            <Input prefix={"Disabled"} value={"Clayton J. Foster"} disabled={true} />
+            <Input prefix={"Read only"} value={"Norma J. Gomez"} readOnly={true} />
         </>
     );
 };

package/src/global.scss

@@ -7,11 +7,12 @@
 
     --background: white;
 
-    --main-color: #008ad2; // used
+    --main-color: #008ad2;
     --main-color-alt: #006AA9;
 
-    --active-bg: #d3d3d3;
-    --inactive-bg: #d3d3d3; // used
+    --active-bg: #e7e7e7;
+    --inactive-bg: #d3d3d3;
+    --inactive-dark-bg: #999;
 
     --toggle-handle-bg: #e0e0e0;
     --toggle-handle-border: #cdcdcd;
@@ -32,6 +33,9 @@
     --modal-button-bg: #f8f8f8;
     --modal-button-border: #c2c2c2;
 
+    --input-disabled-bg: #f3f3f3;
+    --input-disabled-text: #959595;
+
     --choice-bg: #ffffff;
     --choice-text: #999999;
     --choice-active-bg: #f3f3f3;