@grantbii/design-system 1.0.42 → 1.0.43

package/core/molecules/RadioButtons.d.ts

@@ -1,6 +1,6 @@
 import { DetailedHTMLProps, InputHTMLAttributes } from "react";
 import { Option } from "../foundations";
-type RadioOption = Option & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export type RadioOption = Option & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 type RadioButtonProps = {
     name: string;
     options: RadioOption[];

package/core/molecules/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Modal, useModal } from "./Modal";
-export { default as RadioButtons } from "./RadioButtons";
+export { default as RadioButtons, type RadioOption } from "./RadioButtons";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/molecules/RadioButtons.stories.d.ts

@@ -3,4 +3,5 @@ import { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof RadioButtons>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const TextOnly: Story;
+export declare const NoneSelectedByDefault: Story;
+export declare const OneSelectedByDefault: Story;

package/stories/molecules/RadioButtons.stories.js

@@ -8,7 +8,7 @@ const meta = {
     },
 };
 export default meta;
-export const TextOnly = {
+export const NoneSelectedByDefault = {
     args: {
         name: "location ",
         options: [
@@ -25,3 +25,21 @@ export const TextOnly = {
         ],
     },
 };
+export const OneSelectedByDefault = {
+    args: {
+        name: "location ",
+        options: [
+            {
+                label: "Singapore",
+                value: "Singapore",
+                onChange: () => alert("Selected Singapore!"),
+                defaultChecked: true,
+            },
+            {
+                label: "Hong Kong",
+                value: "Hong Kong",
+                onChange: () => alert("Selected Hong Kong!"),
+            },
+        ],
+    },
+};