Update: CheckboxGroup & RadioGroup

lib/components/checkbox/Checkbox.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Checkbox } from "./Checkbox";
 
 const meta = {
-  title: "ATOMS/Checkbox",
+  title: "ATOMS/Checkbox/Checkbox",
   component: Checkbox,
   tags: ["autodocs"],
   argTypes: {
@@ -60,17 +60,3 @@ export const Disabled: Story = {
     isDisabled: true,
   },
 };
-
-export const CheckboxGroup = () => {
-  return (
-    <Checkbox.Group
-      value={["1"]}
-      layout="horizontal"
-      onChange={(val) => console.log("checked: ", val)}
-    >
-      <Checkbox value="1">Option A</Checkbox>
-      <Checkbox value="2">Option B</Checkbox>
-      <Checkbox value="3">Option C</Checkbox>
-    </Checkbox.Group>
-  );
-};

lib/components/checkbox/Checkbox.tsx

@@ -72,7 +72,7 @@ export const Checkbox = (props: ICheckbox) => {
   );
 };
 
-const CheckboxGroup = ({
+export const CheckboxGroup = ({
   children,
   defaultValue,
   value,
@@ -158,6 +158,3 @@ const CheckboxGroup = ({
     </div>
   );
 };
-
-Checkbox.Group = CheckboxGroup;
-export default Checkbox;

lib/components/checkbox/CheckboxGroup.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ICheckboxGroup } from "./Checkbox.types";
+import { Checkbox, CheckboxGroup } from "./Checkbox";
+
+const meta = {
+  title: "ATOMS/Checkbox/CheckboxGroup",
+  component: CheckboxGroup,
+  tags: ["autodocs"],
+  argTypes: {
+    layout: {
+      options: ["horizontal", "vertical"],
+      control: { type: "radio" },
+    },
+    defaultValue: {
+      control: { type: "text" },
+    },
+    spacing: {
+      control: { type: "number" },
+    },
+    value: {
+      control: { type: "text" },
+    },
+    onChange: {
+      action: "onChange",
+    },
+  },
+} satisfies Meta<typeof CheckboxGroup>;
+
+export default meta;
+type Story = StoryObj<ICheckboxGroup>;
+
+const radioGroupArgs: ICheckboxGroup = {
+  value: ["1"],
+  layout: "horizontal",
+  onChange: (val) => console.log("checked: ", val),
+};
+
+export const Primary: Story = (props: ICheckboxGroup) => {
+  const all = { ...radioGroupArgs, ...props };
+  return (
+    <CheckboxGroup {...all}>
+      <Checkbox value="1">Option A</Checkbox>
+      <Checkbox value="2">Option B</Checkbox>
+      <Checkbox value="3">Option C</Checkbox>
+    </CheckboxGroup>
+  );
+};
+
+Primary.args = radioGroupArgs;

lib/components/radio/Radio.stories.tsx

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Radio } from "./Radio";
+import { IRadioGroup } from "./Radio.types";
 
 const meta = {
-  title: "ATOMS/Radio",
+  title: "ATOMS/Radio/Radio",
   component: Radio,
   tags: ["autodocs"],
   argTypes: {
@@ -60,16 +61,21 @@ export const Disabled: Story = {
   },
 };
 
-export const RadioGroup = () => {
+const radioGroupArgs: IRadioGroup = {
+  value: "1",
+  layout: "horizontal",
+  onChange: (val) => console.log("checked: ", val),
+};
+
+export const RadioGroup = (props: IRadioGroup) => {
+  const all = { ...radioGroupArgs, ...props };
   return (
-    <Radio.Group
-      value="1"
-      layout="horizontal"
-      onChange={(val) => console.log("checked: ", val)}
-    >
+    <Radio.Group {...all}>
       <Radio value="1">Option A</Radio>
       <Radio value="2">Option B</Radio>
       <Radio value="3">Option C</Radio>
     </Radio.Group>
   );
 };
+
+RadioGroup.args = radioGroupArgs;

lib/components/radio/Radio.tsx

@@ -65,7 +65,7 @@ export const Radio = (props: IRadio) => {
   );
 };
 
-const RadioGroup = ({
+export const RadioGroup = ({
   children,
   defaultValue,
   value,
@@ -142,6 +142,3 @@ const RadioGroup = ({
     </div>
   );
 };
-
-Radio.Group = RadioGroup;
-export default Radio;

lib/components/radio/RadioGroup.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { IRadioGroup } from "./Radio.types";
+import { Radio, RadioGroup } from "./Radio";
+
+const meta = {
+  title: "ATOMS/Radio/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+  argTypes: {
+    layout: {
+      options: ["horizontal", "vertical"],
+      control: { type: "radio" },
+    },
+    defaultValue: {
+      control: { type: "text" },
+    },
+    spacing: {
+      control: { type: "number" },
+    },
+    value: {
+      control: { type: "text" },
+    },
+    onChange: {
+      action: "onChange",
+    },
+  },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<IRadioGroup>;
+
+const radioGroupArgs: IRadioGroup = {
+  value: "1",
+  layout: "horizontal",
+  onChange: (val) => console.log("checked: ", val),
+};
+
+export const Primary: Story = (props: IRadioGroup) => {
+  const all = { ...radioGroupArgs, ...props };
+  return (
+    <RadioGroup {...all}>
+      <Radio value="1">Option A</Radio>
+      <Radio value="2">Option B</Radio>
+      <Radio value="3">Option C</Radio>
+    </RadioGroup>
+  );
+};
+
+Primary.args = radioGroupArgs;

lib/customization/styles/components/Checkbox.styles.ts

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 
-const container = cva(["flex", "items-center", "w-fit", "gap-3"]);
+const container = cva(["flex", "items-center", "w-fit", "gap-2"]);
 const input = cva(
   [
     "bg-primary-background",

lib/customization/styles/components/Radio.styles.ts

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 
-const container = cva(["flex", "items-center", "w-fit", "gap-3"]);
+const container = cva(["flex", "items-center", "w-fit", "gap-2"]);
 const input = cva(
   [
     "bg-primary-background",