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,63 @@
+import { useState } from 'react'
+import { Select, Space, Text } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+const OPTIONS = [
+  { value: 'new', label: '最近更新' },
+  { value: 'hot', label: '最热门' },
+  { value: 'name', label: '按名称' },
+  { value: 'none', label: '（暂不可用）', disabled: true },
+]
+
+export function Selects() {
+  const [sort, setSort] = useState('new')
+  const [kind, setKind] = useState<string | undefined>(undefined)
+
+  return (
+    <Section
+      id="select"
+      title="下拉选择"
+      api="Select"
+      desc="受控的单值选择：触发器是原生 button，展开后是 listbox；支持点击外部关闭、Esc、↑↓ 移动、Enter 选择。"
+    >
+      <Demo
+        title="基础用法"
+        desc="不传 value 时显示 placeholder；禁用的选项不可点、不可选。"
+        code={`const [sort, setSort] = useState('new')
+
+<Select options={OPTIONS} value={sort} onChange={setSort} />`}
+      >
+        <Space gap="md" wrap>
+          <Select options={OPTIONS} value={sort} onChange={setSort} />
+          <Text size="sm" tone="muted">
+            当前：{OPTIONS.find((option) => option.value === sort)?.label}
+          </Text>
+        </Space>
+      </Demo>
+
+      <Demo
+        title="占位与禁用"
+        desc="placeholder 只在没有选中值时出现；整个控件 disabled 时不可展开。"
+        code={`<Select options={OPTIONS} value={kind} onChange={setKind} placeholder="选择类型" />
+<Select options={OPTIONS} value={kind} onChange={setKind} disabled />`}
+      >
+        <Space gap="md" wrap>
+          <Select options={OPTIONS} value={kind} onChange={setKind} placeholder="选择类型" />
+          <Select options={OPTIONS} value={kind} onChange={setKind} disabled />
+        </Space>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'options', type: 'SelectOption[]', required: true, desc: '{ value, label, disabled? }' },
+          { name: 'value', type: 'string', desc: '当前值' },
+          { name: 'onChange', type: '(value: string) => void', required: true, desc: '选择回调' },
+          { name: 'placeholder', type: 'string', defaultValue: "'请选择'", desc: '未选中时的文案' },
+          { name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用整个控件' },
+        ]}
+      />
+    </Section>
+  )
+}