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

src/components/Grid.tsx

@@ -0,0 +1,52 @@
+import type { CSSProperties, ReactNode } from 'react'
+import styles from './Grid.module.css'
+
+/**
+ * 网格：给「卡片列表」用的一致布局。
+ *
+ * 列数走 CSS 变量，断点收在组件里——页面不用再各写一份媒体查询。
+ * 默认窄屏退化：≤1100px 取一半（至少 2 列），≤720px 收成一列。
+ */
+export type GridGap = 'sm' | 'md' | 'lg'
+
+export type GridProps = {
+  /** 宽屏列数 */
+  columns?: number
+  /** 中等屏列数，默认一半（至少 2） */
+  tabletColumns?: number
+  /** 窄屏列数，默认 1 */
+  mobileColumns?: number
+  gap?: GridGap
+  /** 用 ul 渲染（配合 li 列表项，保持语义） */
+  as?: 'div' | 'ul'
+  role?: string
+  className?: string
+  style?: CSSProperties
+  children?: ReactNode
+}
+
+export function Grid({
+  columns = 4,
+  tabletColumns,
+  mobileColumns = 1,
+  gap = 'md',
+  as: Tag = 'div',
+  role,
+  className,
+  style,
+  children,
+}: GridProps) {
+  const vars: Record<string, string> = {
+    '--su-grid-cols': String(columns),
+    '--su-grid-cols-tablet': String(tabletColumns ?? Math.max(2, Math.ceil(columns / 2))),
+    '--su-grid-cols-mobile': String(mobileColumns),
+  }
+
+  const classes = [styles.root, styles[gap], className].filter(Boolean).join(' ')
+
+  return (
+    <Tag className={classes} style={{ ...vars, ...style }} role={role}>
+      {children}
+    </Tag>
+  )
+}