react-miui 0.15.2 → 0.15.5

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

@@ -0,0 +1,7 @@
+.darker {
+    --choice-text: #59a5c2;
+    --choice-border: #10a4dc;
+    --choice-bg: #f9fdff;;
+    --choice-active-text: #145b79;
+    --choice-active-bg: #ddf5ff;
+}

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

@@ -2,9 +2,11 @@ import React, { useState } from "react";
 import { Choice } from "../../../components/form/choice/Choice";
 import { Section } from "../../../components/layout/section/Section";
 
+import styles from "./Choice.module.scss";
+
 interface Props {}
 
-const values = ["Single", "Multiple"];
+const values: ("Single" | "Multiple words")[] = ["Single", "Multiple words"];
 
 const ChoiceDemo: React.FC<Props> = () => {
     const [current, handleCurrent] = useState(values[0]);
@@ -16,4 +18,46 @@ const ChoiceDemo: React.FC<Props> = () => {
     );
 };
 
-export { ChoiceDemo };
+const values2 = [
+    {
+        label: "Option 1",
+        value: "one",
+    },
+    {
+        label: "Option 2",
+        value: "two",
+    },
+];
+
+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={"rn2d"}
+                    onChange={handleCurrent}
+                    variant={"left"}
+                />
+            </Section>
+
+        </>
+    );
+};
+
+export { ChoiceDemo, ChoiceDemo2 };

package/src/demo/componentsMap.ts

@@ -40,7 +40,7 @@ import { ModalCenteredDemo, ModalDemo, ModalOptionsDemo } from "./components/ui/
 import { ListInsetDemo } from "./components/layout/list/Inset";
 import { ListSelectionDemo } from "./components/layout/list/Selection";
 import { TabsDemo } from "./components/ui/tabs/Tabs";
-import { ChoiceDemo } from "./components/form/Choice";
+import { ChoiceDemo, ChoiceDemo2 } from "./components/form/Choice";
 import { MessageDemo } from "./components/ui/message/Message";
 import { PopDemo } from "./components/ui/pop/Pop";
 import { DrawerDemo } from "./components/ui/drawer/Drawer";
@@ -95,6 +95,12 @@ const componentsMap: TheMap = {
             Choice: {
                 name: "Choice",
                 Component: ChoiceDemo,
+                children: {
+                    Darker: {
+                        name: "Customized colors",
+                        Component: ChoiceDemo2,
+                    },
+                },
             },
         },
     },

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";

package/src/types/form.ts

@@ -1,5 +1,5 @@
 interface ObjectValue { value: string; label: string }
-type Value = string | ObjectValue;
+type Value<T extends string> = T | ObjectValue;
 
 export type {
     ObjectValue,

package/src/utils/toObjectValue.ts

@@ -1,6 +1,6 @@
 import type { ObjectValue, Value } from "../types/form";
 
-const toObjectValue = (s: Value): ObjectValue => {
+const toObjectValue = <T extends string>(s: Value<T>): ObjectValue => {
     return typeof s === "string" ? { value: s, label: s } : s;
 };