Sparkle: new component radio button

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

sparkle/src/components/RadioButton.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+export type RadioButtonProps = {
+  name: string;
+  choices: RadioButtonChoice[];
+  value: string;
+  layout: "inline" | "stacked";
+  onChange: (value: string) => void;
+};
+
+export type RadioButtonChoice = {
+  label: string;
+  value: string;
+  disabled: boolean;
+};
+
+const labelClasses = {
+  base: "dark:s-text-element-800-dark",
+  selected: "s-opacity-100 s-bg-action-500",
+  disabled: "s-opacity-50",
+};
+
+const inputClasses = {
+  base: "focus:s-outline-none s-ring-0 s-bg-action-50 dark:s-bg-structure-200-dark dark:s-ring-structure-200-dark s-p-2",
+  selected: "s-opacity-100 s-bg-action-500",
+  disabled:
+    "s-cursor-not-allowed dark:s-bg-structure-0-dark dark:s-border-structure-300-dark",
+};
+
+export function RadioButton({
+  name,
+  choices,
+  value,
+  layout,
+  onChange,
+}: RadioButtonProps) {
+  return (
+    <div
+      className={classNames(
+        "s-flex",
+        layout === "inline" ? "s-flex-row s-gap-x-4" : "s-flex-col s-gap-y-2"
+      )}
+    >
+      {choices.map((choice) => (
+        <div key={choice.value}>
+          <label
+            className={classNames(
+              "s-flex s-items-center s-space-x-2",
+              labelClasses.base,
+              choice.disabled ? labelClasses.disabled : ""
+            )}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={choice.value}
+              checked={value === choice.value}
+              disabled={choice.disabled}
+              onChange={(e) => {
+                onChange(e.target.value);
+              }}
+              className={classNames(
+                inputClasses.base,
+                choice.disabled ? inputClasses.disabled : "",
+                choice.value === value ? inputClasses.selected : ""
+              )}
+            />
+            <span>{choice.label}</span>
+          </label>
+        </div>
+      ))}
+    </div>
+  );
+}

sparkle/src/stories/RadioButton.stories.tsx

@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { RadioButton } from "@sparkle/components/RadioButton";
+
+const meta = {
+  title: "Atoms/RadioButton",
+  component: RadioButton,
+} satisfies Meta<typeof RadioButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const RadioButtonExamples = () => {
+  const [value1, setValue1] = React.useState<string>("yes");
+  const [value2, setValue2] = React.useState<string>("");
+
+  return (
+    <div>
+      <RadioButton
+        name="test1"
+        layout="inline"
+        choices={[
+          {
+            label: "yes",
+            value: "yes",
+            disabled: false,
+          },
+          {
+            label: "no",
+            value: "no",
+            disabled: false,
+          },
+          {
+            label: "maybe",
+            value: "maybe",
+            disabled: true,
+          },
+        ]}
+        value={value1}
+        onChange={(v) => {
+          setValue1(v);
+        }}
+      />
+      <br />
+      <br />
+      <br />
+      <RadioButton
+        name="test2"
+        layout="stacked"
+        choices={[
+          {
+            label: "more",
+            value: "more",
+            disabled: false,
+          },
+          {
+            label: "less",
+            value: "no",
+            disabled: false,
+          },
+        ]}
+        value={value2}
+        onChange={(v) => {
+          setValue2(v);
+        }}
+      />
+    </div>
+  );
+};