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,42 @@
+import type { ReactNode } from 'react'
+
+/**
+ * 一个用法示例：标题 + 说明 + 预览区 + 可选代码。
+ *
+ * 预览区默认横向排列，需要纵向（表单、长文）时传 `layout="column"`。
+ */
+type DemoProps = {
+  title: string
+  desc?: ReactNode
+  /** 展示给使用方的代码片段 */
+  code?: string
+  layout?: 'row' | 'column'
+  /** 灰底预览，用于白色组件（卡片）看得清边界 */
+  muted?: boolean
+  children: ReactNode
+}
+
+export function Demo({ title, desc, code, layout = 'row', muted = false, children }: DemoProps) {
+  const previewClasses = [
+    'demo-preview',
+    layout === 'column' ? 'demo-preview--column' : undefined,
+    muted ? 'demo-preview--muted' : undefined,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  return (
+    <article className="demo">
+      <h3 className="demo-title">{title}</h3>
+      {desc !== undefined && <p className="demo-desc">{desc}</p>}
+
+      <div className={previewClasses}>{children}</div>
+
+      {code !== undefined && (
+        <pre className="demo-code">
+          <code>{code}</code>
+        </pre>
+      )}
+    </article>
+  )
+}