fix: change checkbox

docs/components/checkbox.md

@@ -1,9 +1,36 @@
 ### Basic usage
 
 ```py
+import streamlit as st
+
 import streamlit_shadcn_ui as ui
 
-ui.checkbox(checked=True, label="I am a Checkbox 1")
-ui.checkbox(checked=False, label="I am a Checkbox 2")
-ui.checkbox(checked=False, label="I am a Checkbox 3")
+st.subheader("Single Choice")
+checkbox_options = [
+    {"label": "I am a Checkbox 1", "id": "s1", "default_checked": True},
+    {"label": "I am a Checkbox 2", "id": "s2", "default_checked": False},
+    {"label": "I am a Checkbox 3", "id": "s3", "default_checked": False},
+]
+
+checkbox_values = [option["default_checked"] for option in checkbox_options]
+
+checkbox_values[0] = ui.checkbox(mode="single", options=[checkbox_options[0]], key="cb1")
+checkbox_values[1] = ui.checkbox(mode="single", options=[checkbox_options[1]], key="cb2")
+checkbox_values[2] = ui.checkbox(mode="single", options=[checkbox_options[2]], key="cb3")
+
+st.markdown(f"""
++ checkbox 1 value: {checkbox_values[0]}
++ checkbox 2 value: {checkbox_values[1]}
++ checkbox 3 value: {checkbox_values[2]}
+""")
+
+st.subheader("Multiple Choices")
+checkbox_options_multiple = [
+    {"label": "Option A", "id": "m1", "default_checked":False},
+    {"label": "Option B", "id": "m2", "default_checked":False},
+    {"label": "Option C", "id": "m3", "default_checked":False},
+    {"label": "Option D", "id": "m4", "default_checked":False}
+]
+radio_value_1 = ui.checkbox(mode="multiple", options=checkbox_options_multiple, key="cb4")
+st.write("Selected Option:", radio_value_1)
 ```

docs/components/radio_group.md

@@ -8,13 +8,11 @@ import streamlit_shadcn_ui as ui
 radio_options = [
     {"label": "Option A", "value": "A", "id": "r1"},
     {"label": "Option B", "value": "B", "id": "r2"},
-    {"label": "Option C", "value": "C", "id": "r3"}
+    {"label": "Option C", "value": "C", "id": "r3"},
+    {"label": "Option D", "value": "D", "id": "r4"}
 ]
-radio_value = ui.radio_group(options=radio_options, default_value="B", mode="single",key="radio1")
+radio_value = ui.radio_group(options=radio_options, default_value="B", key="radio1")
 st.write("Selected Radio Option:", radio_value)
 
-radio_value_1 = ui.radio_group(options=radio_options, default_value=["B"], mode="multiple",key="radio2")
-st.write("Selected Radio Option:", radio_value_1)
-
 st.write(ui.radio_group)
 ```

pages/Checkbox.py

@@ -4,20 +4,36 @@
 
 st.header("Checkbox")
 
-checkbox_values = [True, False, False]
+st.subheader("Single Choice")
+checkbox_options = [
+    {"label": "I am a Checkbox 1", "id": "s1", "default_checked": True},
+    {"label": "I am a Checkbox 2", "id": "s2", "default_checked": False},
+    {"label": "I am a Checkbox 3", "id": "s3", "default_checked": False},
+]
 
+checkbox_values = [option["default_checked"] for option in checkbox_options]
 
-checkbox_values[0] = ui.checkbox(default_checked=True, label="I am a Checkbox 1", key="cb1")
-checkbox_values[1] = ui.checkbox(default_checked=False, label="I am a Checkbox 2", key="cb2")
-checkbox_values[2] = ui.checkbox(default_checked=False, label="I am a Checkbox 3", key="cb3")
+checkbox_values[0] = ui.checkbox(mode="single", options=[checkbox_options[0]], key="cb1")
+checkbox_values[1] = ui.checkbox(mode="single", options=[checkbox_options[1]], key="cb2")
+checkbox_values[2] = ui.checkbox(mode="single", options=[checkbox_options[2]], key="cb3")
 
 st.markdown(f"""
 + checkbox 1 value: {checkbox_values[0]}
 + checkbox 2 value: {checkbox_values[1]}
 + checkbox 3 value: {checkbox_values[2]}
 """)
 
-with open("docs/components/checkbox.md", "r") as f:
-    st.markdown(f.read())
+st.subheader("Multiple Choices")
+checkbox_options_multiple = [
+    {"label": "Option A", "id": "m1", "default_checked":False},
+    {"label": "Option B", "id": "m2", "default_checked":False},
+    {"label": "Option C", "id": "m3", "default_checked":False},
+    {"label": "Option D", "id": "m4", "default_checked":False}
+]
+radio_value_1 = ui.checkbox(mode="multiple", options=checkbox_options_multiple, key="cb4")
+st.write("Selected Option:", radio_value_1)
+
+st.write(ui.checkbox)
 
-st.write(ui.checkbox)
+with open("docs/components/checkbox.md", "r") as f:
+    st.markdown(f.read())

pages/RadioGroup.py

@@ -12,10 +12,7 @@
     {"label": "Option C", "value": "C", "id": "r3"},
     {"label": "Option D", "value": "D", "id": "r4"}
 ]
-radio_value = ui.radio_group(options=radio_options, default_value="B", mode="single",key="radio1")
+radio_value = ui.radio_group(options=radio_options, default_value="B", key="radio1")
 st.write("Selected Radio Option:", radio_value)
 
-radio_value_1 = ui.radio_group(options=radio_options, default_value=["B"], mode="multiple",key="radio2")
-st.write("Selected Radio Option:", radio_value_1)
-
 st.write(ui.radio_group)

streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/checkbox.tsx

@@ -1,31 +1,52 @@
-import { Checkbox } from "@/components/ui/checkbox";
-import { forwardRef, useCallback, useState } from "react";
+import { forwardRef, useState, useCallback, useEffect } from "react";
 import { Streamlit } from "streamlit-component-lib";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 
 interface StCheckboxProps {
-    label?: string;
-    defaultChecked?: boolean;
-    disabled?: boolean;
+    options?: { label: string; id: string; default_checked: boolean }[];
+    mode?: "single" | "multiple";
 }
-export const StCheckbox = forwardRef<HTMLDivElement>(
+
+export const StCheckbox = forwardRef<HTMLDivElement, StCheckboxProps>(
     (props: StCheckboxProps, ref) => {
-        const { label, defaultChecked, disabled, ..._props } = props;
-        const [checked, setChecked] = useState(defaultChecked ?? false);
-        const onCheckedChange = useCallback((checked: boolean) => {
-            setChecked(checked);
-            Streamlit.setComponentValue(checked);
+        const { options, mode, ..._props } = props;
+        console.log("options",options)
+        const initialValues =
+            options?.reduce((acc, option) => {
+                acc[option.id] = option.default_checked;
+                return acc;
+            }, {} as Record<string, boolean>) || {};
+        console.log("initialValues",initialValues)
+        const [selectedValues, setSelectedValues] = useState<Record<string, boolean>>(initialValues);
+
+        useEffect(() => {
+            Streamlit.setComponentValue(initialValues);
         }, []);
+
+        const handleChange = (id: string) => {
+            setSelectedValues((prevSelected) => {
+                const updatedSelected = { ...prevSelected, [id]: !prevSelected[id] };
+                Streamlit.setComponentValue(updatedSelected);
+                return updatedSelected;
+            });
+        };
+
         return (
-            <div className="flex items-center space-x-2" ref={ref} {..._props}>
-                <Checkbox
-                    checked={checked}
-                    disabled={disabled}
-                    onCheckedChange={onCheckedChange}
-                />
-                {label && (
-                    <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                        {label}
-                    </label>
+            <div className="flex flex-col space-y-2" ref={ref} {..._props}>
+                {options && (
+                    <div>
+                        {options.map((option) => (
+                            <div key={option.id} className="flex items-center space-x-2 py-1">
+                                <Checkbox
+                                    id={option.id}
+                                    checked={selectedValues[option.id]}
+                                    onCheckedChange={() => handleChange(option.id)}
+                                />
+                                <Label htmlFor={option.id}>{option.label}</Label>
+                            </div>
+                        ))}
+                    </div>
                 )}
             </div>
         );

streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/radioGroup.tsx

@@ -2,77 +2,37 @@ import { forwardRef, useState, useEffect } from "react";
 import { Streamlit } from "streamlit-component-lib";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Checkbox } from "@/components/ui/checkbox";
+
 interface StRadioGroupProps {
-    defaultValue?: string | string[];
+    defaultValue?: string;
     options: { label: string; value: string; id: string }[];
-    mode?: "single" | "multiple";
 }
 
 export const StRadioGroup = forwardRef<HTMLDivElement, StRadioGroupProps>(
     (props: StRadioGroupProps, ref) => {
-        const { defaultValue, options, mode } = props;
-        const [selectedValue, setSelectedValue] = useState<string | string[]>(
-            mode === "single"
-              ? (defaultValue as string) || "" 
-              : (defaultValue as string[]) || [] 
-          );
+        const { defaultValue, options } = props;
+        const [selectedValue, setSelectedValue] = useState<string>(defaultValue || '');
 
+        // Update the state when defaultValue changes
         useEffect(() => {
             setSelectedValue(defaultValue || '');
         }, [defaultValue]);
 
-        const handleChange = (value: string) => {
-            if (mode === "single") {
-                setSelectedValue(value); 
-                Streamlit.setComponentValue(value); 
-            } else {
-                setSelectedValue((prevSelected) => {
-                    const updatedSelected = (prevSelected as string[]).includes(value)
-                        ? (prevSelected as string[]).filter((v) => v !== value)
-                        : [...(prevSelected as string[]), value]; 
-                    Streamlit.setComponentValue(updatedSelected); 
-                    return updatedSelected;
-                });
-            }
+        // Handle radio value change
+        const handleRadioChange = (value: string) => {
+            setSelectedValue(value);
+            Streamlit.setComponentValue(value);
         };
 
         return (
-            <div ref={ref}>
-                {
-                    mode === "single" && 
-                    <RadioGroup defaultValue={defaultValue as string} onValueChange={handleChange} ref={ref}>
-                        {options.map(option => (
-                            <div key={option.id} className="flex items-center space-x-2 m-1">
-                                <RadioGroupItem value={option.value} id={option.id} />
-                                <Label htmlFor={option.id}>{option.label}</Label>
-                            </div>
-                        ))}
-                    </RadioGroup>
-                }
-                {
-                    mode === 'multiple' && 
-                    <div className="py-1">
-                        {options.map((option) => (
-                            <div
-                                key={option.id}
-                                className="flex items-center space-x-2 mx-1 my-3"
-                            >
-                                <Checkbox
-                                    id={option.id}
-                                    checked={(selectedValue as string[]).includes(
-                                        option.value
-                                    )}
-                                    onCheckedChange={() => handleChange(option.value)}
-                                />
-                                <Label htmlFor={option.id}>{option.label}</Label>
-                            </div>
-                        ))}
+            <RadioGroup defaultValue={defaultValue} onValueChange={handleRadioChange} ref={ref}>
+                {options.map(option => (
+                    <div key={option.id} className="flex items-center space-x-2 m-1">
+                        <RadioGroupItem value={option.value} id={option.id} />
+                        <Label htmlFor={option.id}>{option.label}</Label>
                     </div>
-                }
-
-            </div>
-
+                ))}
+            </RadioGroup>
         );
     }
-);
+);

streamlit_shadcn_ui/py_components/checkbox.py

@@ -2,7 +2,11 @@
 
 _component_func = declare_component("checkbox")
 
-def checkbox(default_checked=False, label=None, key=None):
-    props = {"defaultChecked": default_checked, "label": label}
-    component_value = _component_func(comp="checkbox", props=props, key=key, default=default_checked)
+def checkbox(mode = None, options=None,key=None):
+
+    props = {
+        "options": options,
+        "mode": mode
+        }
+    component_value = _component_func(comp="checkbox", props=props, key=key)
     return component_value

streamlit_shadcn_ui/py_components/radio_group.py

@@ -2,11 +2,10 @@
 
 _component_func = declare_component("radio_group")
 
-def radio_group(options, mode = None, default_value=None, key=None):
+def radio_group(options, default_value=None, key=None):
     props = {
         "defaultValue": default_value,
-        "options": options,
-        "mode": mode
+        "options": options
     }
     component_value = _component_func(comp="radio_group", props=props, key=key, default=default_value)
-    return component_value
+    return component_value