@dust-tt/sparkle 0.2.210 → 0.2.211

package/src/stories/Checkbox.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
 
 import { Checkbox } from "../index_with_tw_base";
 
@@ -9,38 +10,106 @@ const meta = {
 
 export default meta;
 type Story = StoryObj<typeof meta>;
+export const CheckBoxExample = () => {
+  // No-op function for onChange
+  const handleChange = () => {
+    // This function intentionally left blank
+  };
+
+  return (
+    <div className="s-flex s-flex-col s-gap-10">
+      SM
+      <div className="s-flex s-gap-10">
+        Selectable
+        <Checkbox variant="selectable" onChange={handleChange} />
+        <Checkbox
+          checked="checked"
+          variant="selectable"
+          onChange={handleChange}
+        />
+        <Checkbox
+          checked="partial"
+          variant="selectable"
+          onChange={handleChange}
+        />
+        Checkable
+        <Checkbox variant="checkable" onChange={handleChange} />
+        <Checkbox
+          checked="checked"
+          variant="checkable"
+          onChange={handleChange}
+        />
+        <Checkbox
+          checked="partial"
+          variant="checkable"
+          onChange={handleChange}
+        />
+      </div>
+      XS
+      <div className="s-flex s-gap-10">
+        Selectable
+        <Checkbox size="xs" variant="selectable" onChange={handleChange} />
+        <Checkbox
+          size="xs"
+          checked="checked"
+          variant="selectable"
+          onChange={handleChange}
+        />
+        <Checkbox
+          size="xs"
+          checked="partial"
+          variant="selectable"
+          onChange={handleChange}
+        />
+        Checkable
+        <Checkbox size="xs" variant="checkable" onChange={handleChange} />
+        <Checkbox
+          size="xs"
+          checked="checked"
+          variant="checkable"
+          onChange={handleChange}
+        />
+        <Checkbox
+          size="xs"
+          checked="partial"
+          variant="checkable"
+          onChange={handleChange}
+        />
+      </div>
+    </div>
+  );
+};
 
 export const Selectable: Story = {
   args: {
-    checked: true,
+    checked: "checked",
     variant: "selectable",
   },
 };
 
 export const Checked: Story = {
   args: {
-    checked: true,
+    checked: "checked",
     variant: "checkable",
   },
 };
 
 export const Unchecked: Story = {
   args: {
-    checked: false,
+    checked: "unchecked",
   },
 };
 
 export const PartialChecked: Story = {
   args: {
-    checked: false,
-    partialChecked: true,
+    checked: "partial",
     variant: "checkable",
   },
 };
 
 export const Disabled: Story = {
   args: {
-    checked: true,
+    checked: "checked",
     disabled: true,
   },
 };