react-miui 0.15.4 → 0.15.7

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

@@ -23,6 +23,7 @@
         font-size: calc(24px / var(--ratio-font));
         color: var(--choice-text);
         background: var(--choice-bg);
+        white-space: nowrap;
     }
 
     display: flex;
@@ -48,3 +49,8 @@
 .wide {
     width: 100%;
 }
+
+.left {
+    margin-left: unset;
+    margin-right: unset;
+}

package/esm/components/ui/button/Button.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+declare type Variant = "inline" | "outline";
 interface Props {
-    variant?: "inline" | "outline";
+    variant?: Variant | Variant[];
 }
 declare const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props>;
 export { Button };

package/esm/components/ui/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAkB3E,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,aAAK,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEpC,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAkB3E,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAM9D,MAAM,MAAM,GAAoE,CAAC,EAC7E,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EACzC,EAAE,EAAE;IACD,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IAEvC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,EAAE,SAAS,CAAC,CAAC;IAEd,OAAO,CACH,mCACQ,KAAK,EACT,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAC1B,QAAQ,CACD,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAQvD,MAAM,MAAM,GAAoE,CAAC,EAC7E,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EACzC,EAAE,EAAE;IACD,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IAEvC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACpD,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;KACzD,EAAE,SAAS,CAAC,CAAC;IAEd,OAAO,CACH,mCACQ,KAAK,EACT,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAC1B,QAAQ,CACD,CACZ,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/esm/components/ui/pop/Pop.module.scss

@@ -14,42 +14,43 @@
     background: white;
     margin: 0;
     padding: 0;
+    list-style-type: none;
+}
 
-    ul, li {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-    }
+.li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
 
-    li + li {
+    + .li {
         border-top: 1px solid var(--border);
     }
+}
 
-    button {
-        border: none;
-        background: white;
-        height: calc(116px / var(--ratio-dimensions));
-        padding: 0 calc(42px / var(--ratio-dimensions));
-        box-sizing: border-box;
-        width: 100%;
-        min-width: calc(460px / var(--ratio-dimensions));
-        text-align: left;
-        color: var(--pop-text);
-        font-size: calc(26px / var(--ratio-font));
-        display: flex;
-        align-items: center;
-
-        svg {
-            fill: currentColor;
-            margin-right: calc(42px / var(--ratio-dimensions));
-        }
+.button {
+    border: none;
+    background: white;
+    height: calc(116px / var(--ratio-dimensions));
+    padding: 0 calc(42px / var(--ratio-dimensions));
+    box-sizing: border-box;
+    width: 100%;
+    min-width: calc(460px / var(--ratio-dimensions));
+    text-align: left;
+    color: var(--pop-text);
+    font-size: calc(26px / var(--ratio-font));
+    display: flex;
+    align-items: center;
 
-        &:hover {
-            background: var(--active-bg);
-        }
+    &:hover {
+        background: var(--active-bg);
     }
 }
 
+.icon {
+    fill: currentColor;
+    margin-right: calc(42px / var(--ratio-dimensions));
+}
+
 .fakeIcon {
     display: inline-block;
     width: 16px;

package/esm/components/ui/pop/PopOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopOption.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAK7C,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAQ9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"PopOption.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAK7C,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAU9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/components/ui/pop/PopOption.js

@@ -4,10 +4,10 @@ import styles from "./Pop.module.scss";
 const PopOption = (props) => {
     var _a;
     const ic = props.icon
-        ? React.createElement(Icon, { name: props.icon })
+        ? React.createElement(Icon, { name: props.icon, className: styles.icon })
         : (((_a = props.forceEmptyIcon) !== null && _a !== void 0 ? _a : true) ? React.createElement("span", { className: styles.fakeIcon }) : null);
-    return (React.createElement("li", null,
-        React.createElement("button", { onClick: props.onClick },
+    return (React.createElement("li", { className: styles.li },
+        React.createElement("button", { onClick: props.onClick, className: styles.button },
             ic,
             props.children)));
 };

package/esm/components/ui/pop/PopOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOption.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;;IACzC,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI;QACjB,CAAC,CAAC,oBAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI;QAC5B,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAErF,OAAO,CACH;QAAI,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO;YAAG,EAAE;YAAE,KAAK,CAAC,QAAQ,CAAU,CAAK,CACzE,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"PopOption.js","sourceRoot":"","sources":["../../../../src/components/ui/pop/PopOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,SAAS,GAAoB,CAAC,KAAK,EAAE,EAAE;;IACzC,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI;QACjB,CAAC,CAAC,oBAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QACpD,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAErF,OAAO,CACH,4BAAI,SAAS,EAAE,MAAM,CAAC,EAAE;QACpB,gCAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM;YAAG,EAAE;YAAE,KAAK,CAAC,QAAQ,CAAU,CACtF,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/esm/components/utils/If.d.ts

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

package/esm/components/utils/If.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"If.d.ts","sourceRoot":"","sources":["../../../src/components/utils/If.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAKvB,CAAC;AAEF,OAAO,EAAE,EAAE,EAAE,CAAC"}

package/esm/components/utils/If.js

@@ -0,0 +1,9 @@
+import React from "react";
+const If = (props) => {
+    if (Boolean(props.condition)) {
+        return React.createElement(React.Fragment, null, props.children);
+    }
+    return null;
+};
+export { If };
+//# sourceMappingURL=If.js.map

package/esm/components/utils/If.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"If.js","sourceRoot":"","sources":["../../../src/components/utils/If.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,EAAE,GAAoB,CAAC,KAAK,EAAE,EAAE;IAClC,IAAI,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;QAC1B,OAAO,0CAAG,KAAK,CAAC,QAAQ,CAAI,CAAC;KAChC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,OAAO,EAAE,EAAE,EAAE,CAAC"}

package/esm/index.d.ts

@@ -28,5 +28,6 @@ export * from "./components/ui/stats/Stats.js";
 export * from "./components/ui/tabs/Selector.js";
 export * from "./components/ui/toaster/Toaster.js";
 export * from "./components/utils/HandleEsc.js";
+export * from "./components/utils/If.js";
 export * from "./components/utils/Spacer.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,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,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;AACvD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,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,6BAA6B,CAAC;AAC5C,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;AACvD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC"}

package/esm/index.js

@@ -28,5 +28,6 @@ export * from "./components/ui/stats/Stats.js";
 export * from "./components/ui/tabs/Selector.js";
 export * from "./components/ui/toaster/Toaster.js";
 export * from "./components/utils/HandleEsc.js";
+export * from "./components/utils/If.js";
 export * from "./components/utils/Spacer.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,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,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;AACvD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,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,6BAA6B,CAAC;AAC5C,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;AACvD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC"}

package/package.json

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

package/src/components/form/Toggle.tsx

@@ -6,6 +6,7 @@ import classnames from "classnames";
 
 interface Props {
     onChange: (newValue: boolean) => void;
+    undeterminedClickValue?: boolean;
     disabled?: boolean;
     value: boolean | null;
 }
@@ -13,6 +14,9 @@ interface Props {
 const Toggle: React.FC<Props> = (props) => {
     const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
         if (props.value == null) {
+            if ("undeterminedClickValue" in props) {
+                props.onChange(props.undeterminedClickValue!);
+            }
             return;
         }
         props.onChange(e.target.checked);

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

@@ -23,6 +23,7 @@
         font-size: calc(24px / var(--ratio-font));
         color: var(--choice-text);
         background: var(--choice-bg);
+        white-space: nowrap;
     }
 
     display: flex;
@@ -48,3 +49,8 @@
 .wide {
     width: 100%;
 }
+
+.left {
+    margin-left: unset;
+    margin-right: unset;
+}

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

@@ -6,7 +6,7 @@ import { makeVariants, toObjectValue } from "../../../utils";
 import { ChoiceItem } from "./ChoiceItem";
 import styles from "./Choice.module.scss";
 
-type Variant = "wide";
+type Variant = "wide" | "left";
 
 interface Props<T extends string> {
     values: Value<T>[];
@@ -17,6 +17,7 @@ interface Props<T extends string> {
     variant?: Variant | Variant[];
 }
 
+// @TODO handle disabled / readonly!
 // @TODO auto width mode by default?
 
 const Choice = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<T>>> => {
@@ -38,6 +39,7 @@ const Choice = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<T>
     const cls = classnames(
         styles.choice, props.className,
         { [styles.wide]: v.includes("wide") },
+        { [styles.left]: v.includes("left") },
     );
 
     return <div className={cls}>{opts}</div>;

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

@@ -2,10 +2,12 @@ import React from "react";
 import classnames from "classnames";
 
 import styles from "./Button.module.scss";
-import { makeVariants } from "../../../utils/makeVariants.js";
+import { makeVariants } from "../../../utils/index.js";
+
+type Variant = "inline" | "outline";
 
 interface Props {
-    variant?: "inline" | "outline";
+    variant?: Variant | Variant[];
 }
 
 const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Props> = ({

package/src/components/ui/pop/Pop.module.scss

@@ -14,42 +14,43 @@
     background: white;
     margin: 0;
     padding: 0;
+    list-style-type: none;
+}
 
-    ul, li {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-    }
+.li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
 
-    li + li {
+    + .li {
         border-top: 1px solid var(--border);
     }
+}
 
-    button {
-        border: none;
-        background: white;
-        height: calc(116px / var(--ratio-dimensions));
-        padding: 0 calc(42px / var(--ratio-dimensions));
-        box-sizing: border-box;
-        width: 100%;
-        min-width: calc(460px / var(--ratio-dimensions));
-        text-align: left;
-        color: var(--pop-text);
-        font-size: calc(26px / var(--ratio-font));
-        display: flex;
-        align-items: center;
-
-        svg {
-            fill: currentColor;
-            margin-right: calc(42px / var(--ratio-dimensions));
-        }
+.button {
+    border: none;
+    background: white;
+    height: calc(116px / var(--ratio-dimensions));
+    padding: 0 calc(42px / var(--ratio-dimensions));
+    box-sizing: border-box;
+    width: 100%;
+    min-width: calc(460px / var(--ratio-dimensions));
+    text-align: left;
+    color: var(--pop-text);
+    font-size: calc(26px / var(--ratio-font));
+    display: flex;
+    align-items: center;
 
-        &:hover {
-            background: var(--active-bg);
-        }
+    &:hover {
+        background: var(--active-bg);
     }
 }
 
+.icon {
+    fill: currentColor;
+    margin-right: calc(42px / var(--ratio-dimensions));
+}
+
 .fakeIcon {
     display: inline-block;
     width: 16px;

package/src/components/ui/pop/PopOption.tsx

@@ -13,11 +13,13 @@ interface Props {
 
 const PopOption: React.FC<Props> = (props) => {
     const ic = props.icon
-        ? <Icon name={props.icon} />
+        ? <Icon name={props.icon} className={styles.icon} />
         : ((props.forceEmptyIcon ?? true) ? <span className={styles.fakeIcon} /> : null);
 
     return (
-        <li><button onClick={props.onClick}>{ic}{props.children}</button></li>
+        <li className={styles.li}>
+            <button onClick={props.onClick} className={styles.button}>{ic}{props.children}</button>
+        </li>
     );
 };
 

package/src/components/utils/If.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+interface Props {
+    condition?: unknown;
+}
+
+const If: React.FC<Props> = (props) => {
+    if (Boolean(props.condition)) { // eslint-disable-line no-extra-boolean-cast
+        return <>{props.children}</>;
+    }
+    return null;
+};
+
+export { If };

package/src/demo/Main.module.scss

@@ -5,12 +5,18 @@
     flex-direction: column;
 }
 
+.header {
+    margin: 0;
+    padding: 20px 20px 0;
+}
+
 .component {
     padding: 20px;
     flex: 1;
     overflow: auto;
     display: flex;
     flex-direction: column;
+    margin-top: 20px;
 
     &--transparent {
         background-position: 0px 0px, 10px 10px;

package/src/demo/Main.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import classnames from "classnames";
 
 import type { AnyComponent } from "../types";
@@ -8,6 +8,7 @@ import styles from "./Main.module.scss";
 
 import { safeUseHash } from "./utils/safeUseHash";
 import { componentsMap } from "./componentsMap";
+import { Choice } from "../components/form/choice/Choice";
 
 type BG = "white" | "transparent" | "mobile";
 
@@ -41,23 +42,15 @@ const getComponentByHash = (hash: string): ComponentInfo | null => {
     return null;
 };
 
+const values: BG[] = ["white", "transparent", "mobile"];
+
 const Main: React.FC = (props) => {
-    const [bg, setBg] = useState<BG>("white");
+    const [bg, handleBgChange] = useState<BG>("white");
 
     const hash = safeUseHash();
     const hashWithoutHash = hash.substr(1);
     const info = getComponentByHash(hashWithoutHash);
 
-    const handleTransparentBg = useCallback(() => {
-        setBg("transparent");
-    }, []);
-    const handleWhiteBg = useCallback(() => {
-        setBg("white");
-    }, []);
-    const handleMobileBg = useCallback(() => {
-        setBg("mobile");
-    }, []);
-
     if (!info) {
         return (
             <div className={styles.container}>
@@ -77,9 +70,7 @@ const Main: React.FC = (props) => {
     return (
         <div className={styles.container}>
             <h1 className={styles.header}>{info.name}</h1>
-            <button onClick={handleTransparentBg}>Transparent</button>
-            <button onClick={handleWhiteBg}>White</button>
-            <button onClick={handleMobileBg}>Mobile</button>
+            <Choice values={values} value={bg} name={"x"} onChange={handleBgChange} />
 
             <div className={componentCls}>
                 <Component />

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

@@ -6,7 +6,7 @@ import styles from "./Choice.module.scss";
 
 interface Props {}
 
-const values: ("Single" | "Multiple")[] = ["Single", "Multiple"];
+const values: ("Single" | "Multiple words")[] = ["Single", "Multiple words"];
 
 const ChoiceDemo: React.FC<Props> = () => {
     const [current, handleCurrent] = useState(values[0]);
@@ -21,11 +21,11 @@ const ChoiceDemo: React.FC<Props> = () => {
 const values2 = [
     {
         label: "Option 1",
-        value: "opt",
+        value: "one",
     },
     {
         label: "Option 2",
-        value: "xxx",
+        value: "two",
     },
 ];
 
@@ -33,18 +33,30 @@ const ChoiceDemo2: React.FC<Props> = () => {
     const [current, handleCurrent] = useState(values2[0].value);
 
     return (
-        <Section variant={["vertical", "horizontal"]}>
-            <Choice
-                values={values2}
-                value={current}
-                name={"rnd"}
-                onChange={handleCurrent}
-                className={styles.darker}
-                variant={"wide"}
-            />
-
-            Current: {current}
-        </Section>
+        <>
+            <Section variant={["vertical", "horizontal"]}>
+                <Choice
+                    values={values2}
+                    value={current}
+                    name={"rnd"}
+                    onChange={handleCurrent}
+                    className={styles.darker}
+                    variant={"wide"}
+                />
+
+                Current: {current}
+            </Section>
+            <Section variant={["vertical", "horizontal"]}>
+                <Choice
+                    values={values2}
+                    value={current}
+                    name={"rn2d"}
+                    onChange={handleCurrent}
+                    variant={"left"}
+                />
+            </Section>
+
+        </>
     );
 };
 

package/src/index.ts

@@ -33,4 +33,5 @@ export * from "./components/ui/tabs/Selector.js";
 export * from "./components/ui/toaster/Toaster.js";
 
 export * from "./components/utils/HandleEsc.js";
+export * from "./components/utils/If.js";
 export * from "./components/utils/Spacer.js";