feat: stash-ui 0.1.0（40 个组件 + 文档站 + 主题机制）

2026-10-28 20:44:18 +08:00
commit 52296b3368
153 changed files with 17129 additions and 0 deletions
@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { RadioGroup, Text } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+const OPTIONS = [
+  { value: 'grid', label: '网格视图' },
+  { value: 'list', label: '列表视图' },
+  { value: 'compact', label: '紧凑视图（暂不可用）', disabled: true },
+]
+
+export function RadioGroups() {
+  const [view, setView] = useState('grid')
+
+  return (
+    <Section
+      id="radio"
+      title="单选"
+      api="RadioGroup"
+      desc="互斥选项组：原生 radio，键盘方向键在组内切换。单个「开/关」用 Switch，多选用 Checkbox。"
+    >
+      <Demo
+        title="基础用法"
+        desc="纵向排列适合设置项；横向排列适合 2–3 个短选项。"
+        layout="column"
+        code={`const [view, setView] = useState('grid')
+
+<RadioGroup value={view} onChange={setView} options={OPTIONS} />
+<RadioGroup value={view} onChange={setView} options={OPTIONS} direction="row" />`}
+      >
+        <RadioGroup value={view} onChange={setView} options={OPTIONS} />
+        <RadioGroup value={view} onChange={setView} options={OPTIONS} direction="row" />
+      </Demo>
+
+      <Demo
+        title="禁用"
+        desc="整组禁用时，所有选项都不可选；单个选项禁用只影响它自己。"
+        code={`<RadioGroup value="grid" onChange={() => {}} options={OPTIONS} disabled />`}
+      >
+        <RadioGroup value="grid" onChange={() => undefined} options={OPTIONS} disabled />
+        <Text size="sm" tone="muted">
+          整组禁用后仍能读出当前选中项
+        </Text>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'options', type: 'RadioOption[]', required: true, desc: '{ value, label, disabled? }' },
+          { name: 'value', type: 'string', required: true, desc: '当前选中值' },
+          { name: 'onChange', type: '(value: string) => void', required: true, desc: '选择回调' },
+          { name: 'direction', type: "'row' | 'column'", defaultValue: "'column'", desc: '排列方向' },
+          { name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用整组' },
+        ]}
+      />
+    </Section>
+  )
+}