feat: storybook

src/stories/Selection.stories.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import {
+  Switch,
+  Checkbox,
+  RadioGroup,
+  RadioItem,
+  SegmentedControl,
+  Control,
+} from '../components/ui';
+
+/* Grouped selection controls. Anchored on Switch for the docgen table;
+   the stories below showcase each control. */
+const meta = {
+  title: 'Selection/Controls',
+  component: Switch,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Toggle, checkbox, radio group and segmented control. The `Control` helper pairs any of them with a clickable label.',
+      },
+    },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Switches: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
+      <Switch defaultChecked />
+      <Switch />
+      <Control control={<Switch defaultChecked />}>Wi-Fi</Control>
+    </div>
+  ),
+};
+
+export const Checkboxes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Control control={<Checkbox defaultChecked />}>Sync to iCloud</Control>
+      <Control control={<Checkbox />}>Share analytics</Control>
+    </div>
+  ),
+};
+
+export const Radios: Story = {
+  render: () => (
+    <RadioGroup defaultValue="comfortable" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Control control={<RadioItem value="compact" />}>Compact</Control>
+      <Control control={<RadioItem value="comfortable" />}>Comfortable</Control>
+      <Control control={<RadioItem value="spacious" />}>Spacious</Control>
+    </RadioGroup>
+  ),
+};
+
+function SegmentedDemo() {
+  const [v, setV] = useState('day');
+  return (
+    <SegmentedControl
+      value={v}
+      onValueChange={setV}
+      items={[
+        { value: 'day', label: 'Day' },
+        { value: 'week', label: 'Week' },
+        { value: 'month', label: 'Month' },
+      ]}
+    />
+  );
+}
+
+export const Segmented: Story = { render: () => <SegmentedDemo /> };