changelog update and spinner documentation

CHANGELOG.md

@@ -9,7 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
--   Implement `Card` and `CardSummary` components
+-   Implement `Card`, `CardSummary`, and `Switch` components
 
 ### Changed
 

src/components/switch/switch.stories.tsx

@@ -1,5 +1,6 @@
 import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { Switch } from './switch';
 
 const meta: Meta<typeof Switch> = {
@@ -16,27 +17,46 @@ const meta: Meta<typeof Switch> = {
 
 type Story = StoryObj<typeof Switch>;
 
-export const Default: Story = {
+/**
+ * `Spinner` used as an uncontrolled component
+ */
+export const Uncontrolled: Story = {
     args: {
         label: 'Show testnets',
         name: 'testnet',
+        defaultChecked: true,
+        onCheckedChanged: undefined,
     },
 };
 
+/**
+ * Controlled usage of the `Spinner` component
+ */
 export const Controlled: Story = {
+    decorators: [
+        (Story) => {
+            const [checked, setChecked] = useState(false);
+
+            const handleCheckedChanged = (newValue: boolean) => {
+                setChecked(newValue);
+            };
+
+            return <Story checked={checked} onCheckedChanged={handleCheckedChanged} />;
+        },
+    ],
+
     args: {
         label: 'Show testnets',
-        defaultChecked: true,
-        checked: false,
+        name: 'testnet',
     },
+
     render: function Component(args) {
         const [, setArgs] = useArgs();
 
-        const handleCheckedChanged = (checked: boolean) => {
-            args.onCheckedChanged?.(checked);
-            setArgs({ checked });
+        const handleCheckedChanged = (newValue: boolean) => {
+            args.onCheckedChanged?.(newValue);
+            setArgs({ checked: newValue });
         };
-
         return <Switch {...args} onCheckedChanged={handleCheckedChanged} />;
     },
 };

src/components/switch/switch.tsx

@@ -23,16 +23,46 @@ const labelClassNames = classNames(
 );
 
 export interface ISwitchProps extends HtmlHTMLAttributes<HTMLDivElement> {
+    /**
+     * Indicates whether the switch is checked
+     */
     checked?: boolean;
+    /**
+     * CSS class name
+     */
     className?: string;
+    /**
+     * The default checked state of the switch
+     * @default false
+     */
     defaultChecked?: boolean;
+    /**
+     * Indicates whether the switch is disabled
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * The ID of the switch
+     */
     id?: string;
+    /**
+     * The label of the switch
+     */
     label?: string;
+    /**
+     * The name of the switch
+     */
     name?: string;
+    /**
+     * Event handler for when the checked state changes
+     * @param checked - The new checked state
+     */
     onCheckedChanged?: (checked: boolean) => void;
 }
 
+/**
+ * Switch component
+ */
 export const Switch: React.FC<ISwitchProps> = (props) => {
     const {
         checked,