gemini-uis 0.1.0

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.2/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.github/workflows/deploy.yml

@@ -0,0 +1,59 @@
+name: Deploy Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - production
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Storybook
+        run: pnpm build-storybook
+
+      - name: Create .nojekyll file
+        run: touch storybook-static/.nojekyll
+
+      - name: Upload artifact for GitHub Pages
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: storybook-static
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4

package/.husky/pre-commit

@@ -0,0 +1,12 @@
+# 运行 lint-staged 检查
+echo "Running code quality checks..."
+npx lint-staged
+
+# 如果检查失败，阻止提交
+if [ $? -ne 0 ]; then
+  echo "Code quality checks failed. Please fix the errors before committing."
+  echo "Run 'pnpm run lint' to see detailed error messages."
+  exit 1
+fi
+
+echo "Code quality checks passed. Proceeding with commit."

package/.storybook/index.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+// import tailwindcss from '@tailwindcss/vite';
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  addons: [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  framework: "@storybook/react-vite",
+  async viteFinal(config) {
+    config.plugins = config.plugins || [];
+    config.plugins.push(tsconfigPaths());
+    // config.plugins.push(tailwindcss());
+    config.base = '/UIs/';
+    return config;
+  },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,22 @@
+import type { Preview } from '@storybook/react-vite'
+import './index.css'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/README.md

@@ -0,0 +1,11 @@
+# Gemini UIs 工作流程
+
+Node 22, pnpm
+
+pnpm install
+
+pnpm dev
+
+调试代码后若有组件库修改，需要执行 pnpm changeset
+
+项目采用了代码检查，请注意代码规范

package/eslint.config.js

@@ -0,0 +1,26 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>gemini-uis</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "gemini-uis",
+  "version": "0.1.0",
+  "type": "module",
+  "sideEffects": ["*.css"],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "build-storybook": "storybook build -o storybook-static",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix"
+    ]
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.8",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-onboarding": "^10.1.10",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-v8": "^4.0.16",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^10.1.10",
+    "globals": "^16.5.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "playwright": "^1.57.0",
+    "storybook": "^10.1.10",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^6.0.3",
+    "vitest": "^4.0.16"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.2.5"
+    },
+    "ignoredBuiltDependencies": [
+      "esbuild"
+    ]
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/icons/LoadingIcon.tsx

@@ -0,0 +1,34 @@
+import type { FC } from 'react';
+import type { IconProps } from './types';
+
+export const LoadingIcon: FC<IconProps> = ({ 
+  size = 16, 
+  className = 'animate-spin', 
+  ...props 
+}) => (
+  <svg
+    width={size}
+    height={size}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className={className}
+    {...props}
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    />
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+);
+
+export default LoadingIcon;

package/src/icons/index.ts

@@ -0,0 +1,2 @@
+export { default as LoadingIcon } from './LoadingIcon'
+export type { IconProps } from './types'

package/src/icons/types.ts

@@ -0,0 +1,6 @@
+import type { SVGProps } from 'react';
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  size?: number | string;
+  className?: string;
+}

package/src/libs/Button/guide/Button.stories.tsx

@@ -0,0 +1,378 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Button } from '@/libs/Button'
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '一个精简的按钮组件，仅保留基本功能，专为简单项目使用而设计。',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['primary', 'secondary', 'outline', 'ghost', 'text', 'danger', 'default'],
+      description: '按钮变体',
+      table: {
+        type: { summary: 'ButtonType' },
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: '按钮尺寸',
+      table: {
+        type: { summary: 'ButtonSize' },
+        defaultValue: { summary: 'md' },
+      },
+    },
+    rounded: {
+      control: 'boolean',
+      description: '是否圆角',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: '是否禁用',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    loading: {
+      control: 'boolean',
+      description: '是否显示加载状态',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    htmlType: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'],
+      description: 'HTML按钮类型',
+      table: {
+        type: { summary: "'button' | 'submit' | 'reset'" },
+        defaultValue: { summary: 'button' },
+      },
+    },
+    children: {
+      control: 'text',
+      description: '按钮内容',
+    },
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * 基础按钮示例
+ */
+export const Default: Story = {
+  args: {
+    children: '点击我',
+    type: 'primary',
+    size: 'md',
+    rounded: false,
+    disabled: false,
+    loading: false,
+  },
+}
+
+/**
+ * 所有变体展示
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Button type="primary">主要按钮</Button>
+      <Button type="secondary">次要按钮</Button>
+      <Button type="outline">轮廓按钮</Button>
+      <Button type="ghost">幽灵按钮</Button>
+      <Button type="text">文本按钮</Button>
+      <Button type="danger">危险按钮</Button>
+      <Button type="default">默认按钮</Button>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '展示所有可用的按钮变体类型。',
+      },
+    },
+  },
+}
+
+/**
+ * 所有尺寸展示
+ */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button size="xs">超小按钮</Button>
+      <Button size="sm">小按钮</Button>
+      <Button size="md">中等按钮</Button>
+      <Button size="lg">大按钮</Button>
+      <Button size="xl">超大按钮</Button>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '展示所有可用的按钮尺寸。',
+      },
+    },
+  },
+}
+
+/**
+ * 圆角设置
+ */
+export const Rounded: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Button rounded={false}>方框按钮</Button>
+      <Button rounded={true}>圆角按钮</Button>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '展示圆角和方框两种样式。',
+      },
+    },
+  },
+}
+
+/**
+ * 状态展示
+ */
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Button>正常状态</Button>
+      <Button loading>加载中</Button>
+      <Button disabled>禁用</Button>
+      <Button loading disabled>加载且禁用</Button>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '展示按钮的不同状态：正常、加载、禁用。',
+      },
+    },
+  },
+}
+
+/**
+ * 事件处理示例
+ */
+export const WithClickHandler: Story = {
+  render: () => (
+    <Button
+      onClick={(e) => {
+        e.preventDefault()
+        alert('按钮被点击了！')
+      }}
+    >
+      点击我
+    </Button>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '展示如何处理按钮点击事件。',
+      },
+    },
+  },
+}
+
+/**
+ * 表单集成示例
+ */
+export const FormIntegration: Story = {
+  render: () => (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        alert('表单已提交')
+      }}
+      onReset={() => {
+        alert('表单已重置')
+      }}
+      className="flex gap-4"
+    >
+      <Button type="primary" htmlType="submit">
+        提交表单
+      </Button>
+      <Button type="secondary" htmlType="reset">
+        重置
+      </Button>
+    </form>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '展示如何在表单中使用按钮，包括提交和重置功能。',
+      },
+    },
+  },
+}
+
+/**
+ * 组合示例：不同变体的所有尺寸
+ */
+export const AllVariantsAndSizes: Story = {
+  render: () => {
+    const variants: Array<'primary' | 'secondary' | 'outline' | 'ghost' | 'text' | 'danger' | 'default'> = [
+      'primary',
+      'secondary',
+      'outline',
+      'ghost',
+      'text',
+      'danger',
+      'default',
+    ]
+    const sizes: Array<'xs' | 'sm' | 'md' | 'lg' | 'xl'> = ['xs', 'sm', 'md', 'lg', 'xl']
+
+    return (
+      <div className="space-y-6">
+        {variants.map((variant) => (
+          <div key={variant} className="space-y-2">
+            <h3 className="text-sm font-semibold text-gray-700 capitalize">{variant}</h3>
+            <div className="flex flex-wrap items-center gap-2">
+              {sizes.map((size) => (
+                <Button key={size} type={variant} size={size}>
+                  {size.toUpperCase()}
+                </Button>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '展示所有变体和尺寸的组合效果。',
+      },
+    },
+  },
+}
+
+/**
+ * 圆角与方框对比
+ */
+export const RoundedComparison: Story = {
+  render: () => {
+    const variants: Array<'primary' | 'secondary' | 'outline'> = ['primary', 'secondary', 'outline']
+
+    return (
+      <div className="space-y-6">
+        <div className="space-y-2">
+          <h3 className="text-sm font-semibold text-gray-700">方框按钮 (rounded=false)</h3>
+          <div className="flex flex-wrap gap-2">
+            {variants.map((variant) => (
+              <Button key={variant} type={variant} rounded={false}>
+                {variant}
+              </Button>
+            ))}
+          </div>
+        </div>
+        <div className="space-y-2">
+          <h3 className="text-sm font-semibold text-gray-700">圆角按钮 (rounded=true)</h3>
+          <div className="flex flex-wrap gap-2">
+            {variants.map((variant) => (
+              <Button key={variant} type={variant} rounded={true}>
+                {variant}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '对比不同变体的圆角和方框样式。',
+      },
+    },
+  },
+}
+
+/**
+ * 加载状态示例
+ */
+export const LoadingStates: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Button type="primary" loading>
+        加载中
+      </Button>
+      <Button type="secondary" loading>
+        加载中
+      </Button>
+      <Button type="outline" loading>
+        加载中
+      </Button>
+      <Button type="danger" loading>
+        加载中
+      </Button>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '展示不同变体的加载状态。',
+      },
+    },
+  },
+}
+
+/**
+ * 禁用状态示例
+ */
+export const DisabledStates: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Button type="primary" disabled>
+        禁用
+      </Button>
+      <Button type="secondary" disabled>
+        禁用
+      </Button>
+      <Button type="outline" disabled>
+        禁用
+      </Button>
+      <Button type="ghost" disabled>
+        禁用
+      </Button>
+      <Button type="text" disabled>
+        禁用
+      </Button>
+      <Button type="danger" disabled>
+        禁用
+      </Button>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: '展示不同变体的禁用状态。',
+      },
+    },
+  },
+}

package/src/libs/Button/guide/README.md

@@ -0,0 +1,144 @@
+# Button 组件 - 简化版
+
+一个精简的按钮组件，仅保留基本功能，专为简单项目使用而设计。
+
+## 特性
+
+- 🎨 **6种变体**: primary, secondary, outline, ghost, link, danger
+- 📏 **5种尺寸**: xs, sm, md, lg, xl
+- 🔄 **圆角设置**: 支持方框和圆角两种样式
+- 🔄 **加载状态**: 内置加载动画
+- 🎯 **简洁设计**: 移除了复杂功能，专注于核心需求
+- 📱 **响应式**: 支持基础响应式布局
+- ♿ **无障碍**: 完整的键盘导航支持
+
+## 安装
+
+```tsx
+import { Button } from "@/ui/Button";
+```
+
+## 基础用法
+
+```tsx
+// 基础按钮
+<Button>点击我</Button>
+
+// 不同变体
+<Button type="primary">主要按钮</Button>
+<Button type="secondary">次要按钮</Button>
+<Button type="outline">轮廓按钮</Button>
+<Button type="ghost">幽灵按钮</Button>
+<Button type="link">链接按钮</Button>
+<Button type="danger">危险按钮</Button>
+```
+
+## 尺寸
+
+```tsx
+<Button size="xs">超小按钮</Button>
+<Button size="sm">小按钮</Button>
+<Button size="md">中等按钮</Button>
+<Button size="lg">大按钮</Button>
+<Button size="xl">超大按钮</Button>
+```
+
+## 圆角设置
+
+```tsx
+<Button rounded={false}>方框按钮</Button>
+<Button rounded={true}>圆角按钮</Button>
+```
+
+## 状态
+
+```tsx
+<Button loading>加载中</Button>
+<Button disabled>禁用</Button>
+```
+
+## 事件处理
+
+```tsx
+<Button
+  onClick={(e) => {
+    e.preventDefault();
+    console.log("按钮被点击");
+  }}
+>
+  点击我
+</Button>
+```
+
+## 表单集成
+
+```tsx
+<form>
+  <Button type="submit" variant="primary">
+    提交表单
+  </Button>
+  <Button type="reset" variant="secondary">
+    重置
+  </Button>
+</form>
+```
+
+## API 参考
+
+### ButtonProps
+
+| 属性      | 类型                              | 默认值      | 描述             |
+| --------- | --------------------------------- | ----------- | ---------------- |
+| type      | `ButtonType`                      | `'primary'` | 按钮变体         |
+| size      | `ButtonSize`                      | `'md'`      | 按钮尺寸         |
+| rounded   | `boolean`                         | `false`     | 是否圆角         |
+| disabled  | `boolean`                         | `false`     | 是否禁用         |
+| loading   | `boolean`                         | `false`     | 是否显示加载状态 |
+| className | `string`                          | -           | 自定义类名       |
+| children  | `ReactNode`                       | -           | 按钮内容         |
+| htmlType  | `'button' \| 'submit' \| 'reset'` | `'button'`  | HTML按钮类型     |
+| onClick   | `(event: MouseEvent) => void`     | -           | 点击事件处理器   |
+
+### 类型定义
+
+```tsx
+type ButtonType =
+  | "primary"
+  | "secondary"
+  | "outline"
+  | "ghost"
+  | "link"
+  | "danger";
+type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+```
+
+## 简化说明
+
+相比完整版Button组件，简化版移除了以下功能：
+
+- ❌ 复杂的形状选项（pill, square等）
+- ❌ 多种状态类型（success, error等）
+- ❌ 图标支持（leftIcon, rightIcon）
+- ❌ 全宽支持
+- ❌ 复杂的主题系统
+
+## 最佳实践
+
+1. **保持简洁**: 使用默认的primary变体作为主要操作
+2. **尺寸一致**: 在同一界面中保持按钮尺寸的一致性
+3. **状态反馈**: 使用loading状态提供用户反馈
+4. **无障碍性**: 确保按钮有适当的标签和键盘导航
+
+## 常见问题
+
+### Q: 如何自定义按钮颜色？
+
+A: 可以通过`className`属性添加自定义样式，或者修改`styles.ts`中的样式配置。
+
+### Q: 按钮支持哪些事件？
+
+A: 支持所有标准的HTML button元素事件，如onClick、onMouseOver等。
+
+### Q: 如何实现按钮组？
+
+A: 可以将多个Button组件包装在一个容器中，使用flex布局实现按钮组。

package/src/libs/Button/index.tsx

@@ -0,0 +1,69 @@
+import { forwardRef } from 'react'
+import type { ButtonProps, ButtonRef } from './types'
+import { getButtonStyles } from './styles'
+import { cn } from '@/utils'
+import { LoadingIcon } from '@/icons'
+
+export const Button = forwardRef<ButtonRef, ButtonProps>(
+  (
+    {
+      type = 'primary',
+      size = 'md',
+      rounded = false,
+      disabled = false,
+      loading = false,
+      className,
+      children,
+      htmlType = 'button',
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    // 计算最终状态
+    const isDisabled = disabled || loading
+
+    // 获取样式类名
+    const buttonStyles = getButtonStyles(
+      type,
+      size,
+      rounded,
+      isDisabled,
+      loading,
+      className
+    )
+
+    // 处理点击事件
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (isDisabled) {
+        event.preventDefault()
+        return
+      }
+      onClick?.(event)
+    }
+
+    return (
+      <button
+        ref={ref}
+        type={htmlType}
+        disabled={isDisabled}
+        onClick={handleClick}
+        className={cn(buttonStyles)}
+        {...props}
+      >
+        {loading && <LoadingIcon className="animate-spin w-4 h-4 mr-2" />}
+        {children}
+      </button>
+    )
+  }
+)
+
+export default Button
+
+// 导出类型
+export type {
+  ButtonProps,
+  ButtonRef,
+  ButtonType,
+  ButtonSize,
+} from './types'

package/src/libs/Button/styles.ts

@@ -0,0 +1,71 @@
+import type { ButtonType, ButtonSize } from './types'
+
+/**
+ * 获取按钮变体样式
+ */
+export const getVariantStyles = (variant: ButtonType): string => {
+  const variants = {
+    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
+    default: 'bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500 border border-gray-300',
+    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300',
+    outline: 'bg-transparent text-blue-600 hover:bg-blue-50 focus:ring-blue-500 border border-blue-600',
+    ghost: 'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500',
+    text: 'bg-transparent text-gray-700 focus:ring-gray-500',
+    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
+  }
+  return variants[variant] || variants.primary
+}
+
+/**
+ * 获取按钮尺寸样式
+ */
+export const getSizeStyles = (size: ButtonSize): string => {
+  const sizes = {
+    xs: 'px-2 py-1 text-xs min-h-[1.5rem]',
+    sm: 'px-3 py-1.5 text-sm min-h-[2rem]',
+    md: 'px-4 py-2 text-sm min-h-[2.5rem]',
+    lg: 'px-6 py-3 text-base min-h-[3rem]',
+    xl: 'px-8 py-4 text-lg min-h-[3.5rem]',
+  }
+  return sizes[size] || sizes.md
+}
+
+/**
+ * 获取按钮圆角样式
+ */
+export const getRoundedStyles = (rounded: boolean): string => {
+  return rounded ? 'rounded-lg' : 'rounded-none'
+}
+
+/**
+ * 组合所有样式类名
+ */
+export const getButtonStyles = (
+  variant: ButtonType = 'primary',
+  size: ButtonSize = 'md',
+  rounded: boolean = false,
+  disabled: boolean = false,
+  loading: boolean = false,
+  customClassName?: string
+): string => {
+  const baseStyles = 'inline-flex items-center justify-center font-medium text-center transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
+  const variantStyles = getVariantStyles(variant)
+  const sizeStyles = getSizeStyles(size)
+  const roundedStyles = getRoundedStyles(rounded)
+  const disabledStyles = disabled ? 'opacity-50 cursor-not-allowed' : ''
+  const loadingStyles = loading ? 'cursor-wait' : ''
+  
+  return [
+    baseStyles,
+    variantStyles,
+    sizeStyles,
+    roundedStyles,
+    disabledStyles,
+    loadingStyles,
+    customClassName,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}

package/src/libs/Button/types.ts

@@ -0,0 +1,52 @@
+import type { ReactNode, ButtonHTMLAttributes } from 'react'
+
+/**
+ * Button组件的变体类型 - 简化版
+ */
+export type ButtonType = 
+  | 'primary'     // 主要按钮
+  | 'default'     // 默认按钮
+  | 'secondary'   // 次要按钮
+  | 'outline'     // 轮廓按钮
+  | 'ghost'       // 幽灵按钮
+  | 'text'        // 文本按钮
+  | 'danger'      // 危险按钮
+
+/**
+ * Button组件的尺寸类型 - 简化版
+ */
+export type ButtonSize = 
+  | 'xs'          // 超小尺寸
+  | 'sm'          // 小尺寸
+  | 'md'          // 中等尺寸
+  | 'lg'          // 大尺寸
+  | 'xl'          // 超大尺寸
+
+
+/**
+ * Button组件的基础属性接口 - 简化版
+ */
+export interface ButtonProps 
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'children' | 'type'> {
+  /** 按钮变体 */
+  type?: ButtonType
+  /** 按钮尺寸 */
+  size?: ButtonSize
+  /** 是否圆角 */
+  rounded?: boolean
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否显示加载状态 */
+  loading?: boolean
+  /** 自定义类名 */
+  className?: string
+  /** 子元素 */
+  children?: ReactNode
+  /** 按钮类型 */
+  htmlType?: ButtonHTMLAttributes<HTMLButtonElement>['type']
+}
+
+/**
+ * Button组件的ref类型
+ */
+export type ButtonRef = HTMLButtonElement

package/src/libs/index.ts

@@ -0,0 +1,10 @@
+import './styles.css'
+// 导出组件
+export { default as Button } from './Button'
+export type {
+  ButtonProps,
+  ButtonRef,
+  ButtonType,
+  ButtonSize,
+} from './Button'
+

package/src/libs/styles.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+

package/src/utils/cn.ts

@@ -0,0 +1,8 @@
+/**
+ * 合并 CSS 类名
+ */
+function cn(...classes: (string | undefined | null | false)[]): string {
+    return classes.filter(Boolean).join(' ')
+}
+
+export default cn

package/src/utils/index.ts

@@ -0,0 +1 @@
+export { default as cn } from './cn'

package/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.css' {
+  const content: string
+  export default content
+}
+

package/tsconfig.app.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Path Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.build.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/libs", "src/utils", "src/icons"]
+}
+

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,103 @@
+/// <reference types="vitest/config" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import tailwindcss from '@tailwindcss/vite';
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig(({ command }) => {
+  // 在构建时禁用 React Compiler，避免运行时注入 require 导致的 ES 模块兼容性问题
+  // React Compiler 应该在最终使用库的应用中运行
+  const enableReactCompiler = command !== 'build';
+  const isLibBuild = process.env.BUILD_LIB === 'true';
+
+  return {
+    plugins: [
+      react({
+      babel: {
+        plugins: enableReactCompiler ? [['babel-plugin-react-compiler']] : [],
+      },
+    }),
+
+      // ✅ 只在 dev / storybook 启用
+      !isLibBuild && tailwindcss(),
+
+      dts({
+      entryRoot: './src/libs',
+      tsconfigPath: './tsconfig.build.json',
+      insertTypesEntry: true,
+      rollupTypes: true,
+        exclude: ['**/*.css', '**/style-entry.ts', '**/*.stories.tsx', '**/*.test.ts', '**/*.test.tsx'],
+      }),
+    ].filter(Boolean),
+
+
+    resolve: {
+      alias: {
+        '@': path.resolve(dirname, './src'),
+      },
+    },
+
+    build: {
+      lib: {
+      entry: {
+        index: path.resolve(dirname, './src/libs/index.ts')
+      },
+      name: 'gemini-uis',
+        formats: ['es'],
+        fileName: () => 'index.js',
+      },
+      rollupOptions: {
+        external: [
+          'react',
+          'react-dom',
+          'react/jsx-runtime',
+          'react/jsx-dev-runtime',
+        ],
+        output: {
+          assetFileNames: (assetInfo) => {
+            // 将所有 CSS 文件命名为 style.css
+            if (assetInfo.name && assetInfo.name.endsWith('.css')) {
+              return 'style.css';
+            }
+            return assetInfo.name || 'assets/[name]-[hash].[ext]';
+          },
+        },
+      },
+      cssCodeSplit: false,
+    },
+
+    test: {
+      projects: [
+      {
+        extends: true,
+        plugins: [
+          storybookTest({
+            configDir: path.join(dirname, '.storybook'),
+          }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+          },
+          setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+      },
+    ],
+    },
+  };
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />