seven-design-ui 0.0.1

package/app/page.tsx

@@ -0,0 +1,202 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '../packages/components/src/button/Button'
+import { Input } from '../packages/components/src/input/Input'
+import { Switch } from '../packages/components/src/switch/Switch'
+import '../packages/theme/src/index.css'
+
+export default function Page() {
+  const [inputValue, setInputValue] = useState('')
+  const [switchChecked, setSwitchChecked] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const handleClick = () => {
+    setLoading(true)
+    setTimeout(() => setLoading(false), 2000)
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+      {/* Hero Section */}
+      <div className="container mx-auto px-4 py-16">
+        <div className="text-center mb-16">
+          <h1 className="text-6xl font-bold text-gray-900 mb-4">
+            SevenDesign
+          </h1>
+          <p className="text-xl text-gray-600 mb-8">
+            企业级 React UI 组件库
+          </p>
+          <p className="text-lg text-gray-500 max-w-2xl mx-auto mb-8">
+            现代化、可定制、TypeScript 驱动的组件库。基于 Monorepo 架构，提供完整的开发工具链和文档体系。
+          </p>
+          <div className="flex gap-4 justify-center flex-wrap">
+            <Button type="primary" size="large">
+              快速开始
+            </Button>
+            <Button size="large" plain>
+              查看文档
+            </Button>
+          </div>
+        </div>
+
+        {/* Features */}
+        <div className="grid md:grid-cols-3 gap-8 mb-16">
+          <div className="bg-white rounded-xl p-6 shadow-lg">
+            <div className="text-4xl mb-4">🎨</div>
+            <h3 className="text-xl font-semibold mb-2">精美设计</h3>
+            <p className="text-gray-600">
+              现代化的设计风格，参考 Element Plus，提供优雅的用户体验
+            </p>
+          </div>
+          <div className="bg-white rounded-xl p-6 shadow-lg">
+            <div className="text-4xl mb-4">🔧</div>
+            <h3 className="text-xl font-semibold mb-2">TypeScript</h3>
+            <p className="text-gray-600">
+              完整的类型定义，提供更好的开发体验和代码提示
+            </p>
+          </div>
+          <div className="bg-white rounded-xl p-6 shadow-lg">
+            <div className="text-4xl mb-4">🎭</div>
+            <h3 className="text-xl font-semibold mb-2">主题定制</h3>
+            <p className="text-gray-600">
+              基于 CSS Variables 的主题系统，轻松定制你的品牌风格
+            </p>
+          </div>
+        </div>
+
+        {/* Component Demos */}
+        <div className="bg-white rounded-2xl p-8 shadow-xl mb-8">
+          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
+            组件演示
+          </h2>
+
+          {/* Button Demo */}
+          <div className="mb-12">
+            <h3 className="text-2xl font-semibold mb-4 pb-2 border-b-2 border-gray-200">
+              Button 按钮
+            </h3>
+            <div className="space-y-4">
+              <div className="flex gap-3 flex-wrap">
+                <Button>默认按钮</Button>
+                <Button type="primary">主要按钮</Button>
+                <Button type="success">成功按钮</Button>
+                <Button type="warning">警告按钮</Button>
+                <Button type="danger">危险按钮</Button>
+                <Button type="info">信息按钮</Button>
+              </div>
+              <div className="flex gap-3 flex-wrap">
+                <Button plain>朴素按钮</Button>
+                <Button type="primary" plain>
+                  主要按钮
+                </Button>
+                <Button type="success" plain>
+                  成功按钮
+                </Button>
+              </div>
+              <div className="flex gap-3 items-center flex-wrap">
+                <Button size="large">大型按钮</Button>
+                <Button>默认按钮</Button>
+                <Button size="small">小型按钮</Button>
+              </div>
+              <div className="flex gap-3 flex-wrap">
+                <Button loading={loading} type="primary" onClick={handleClick}>
+                  {loading ? '加载中...' : '点击加载'}
+                </Button>
+                <Button disabled>禁用按钮</Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Input Demo */}
+          <div className="mb-12">
+            <h3 className="text-2xl font-semibold mb-4 pb-2 border-b-2 border-gray-200">
+              Input 输入框
+            </h3>
+            <div className="space-y-4 max-w-md">
+              <Input
+                placeholder="请输入内容"
+                value={inputValue}
+                onInput={setInputValue}
+              />
+              <Input placeholder="可清空的输入框" clearable />
+              <Input placeholder="密码输入框" type="password" showPassword />
+              <Input placeholder="禁用状态" disabled />
+              <div className="flex gap-3">
+                <Input placeholder="大尺寸" size="large" />
+                <Input placeholder="默认" />
+                <Input placeholder="小尺寸" size="small" />
+              </div>
+              {inputValue && (
+                <div className="p-3 bg-blue-50 border-l-4 border-blue-500 rounded">
+                  <p className="text-gray-700">输入的内容：{inputValue}</p>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Switch Demo */}
+          <div>
+            <h3 className="text-2xl font-semibold mb-4 pb-2 border-b-2 border-gray-200">
+              Switch 开关
+            </h3>
+            <div className="space-y-4">
+              <div className="flex gap-4 items-center flex-wrap">
+                <Switch checked={switchChecked} onChange={setSwitchChecked} />
+                <Switch defaultChecked />
+                <Switch disabled />
+                <Switch loading />
+              </div>
+              <div className="p-3 bg-blue-50 border-l-4 border-blue-500 rounded">
+                <p className="text-gray-700">
+                  当前状态：{switchChecked ? '✅ 开启' : '❌ 关闭'}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Installation */}
+        <div className="bg-gradient-to-r from-indigo-600 to-blue-600 rounded-2xl p-8 text-white">
+          <h2 className="text-3xl font-bold mb-4 text-center">快速安装</h2>
+          <div className="max-w-2xl mx-auto">
+            <pre className="bg-black/20 rounded-lg p-4 overflow-x-auto backdrop-blur">
+              <code className="text-sm">
+                {`# npm
+npm install seven-design-ui
+
+# pnpm
+pnpm add seven-design-ui
+
+# yarn
+yarn add seven-design-ui`}
+              </code>
+            </pre>
+          </div>
+        </div>
+
+        {/* Footer Info */}
+        <div className="mt-16 text-center text-gray-600">
+          <p className="mb-4">
+            这是一个 Monorepo 项目演示页面。完整的开发环境包括：
+          </p>
+          <div className="flex gap-4 justify-center flex-wrap">
+            <span className="px-4 py-2 bg-white rounded-lg shadow">
+              📦 packages/ - 组件库源码
+            </span>
+            <span className="px-4 py-2 bg-white rounded-lg shadow">
+              🎮 play/ - 本地调试环境
+            </span>
+            <span className="px-4 py-2 bg-white rounded-lg shadow">
+              📚 docs/ - Rspress 文档站点
+            </span>
+          </div>
+          <p className="mt-6 text-sm">
+            运行 <code className="bg-white px-2 py-1 rounded">pnpm dev</code> 启动 Playground
+            或 <code className="bg-white px-2 py-1 rounded">pnpm docs:dev</code> 查看完整文档
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }

package/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '@/lib/utils'
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

package/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }