sparkdesign 0.0.1 → 0.1.10

package/registry/__tests__/chat/tool-invocation-card.test.tsx

@@ -0,0 +1,346 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ToolInvocationCard } from '../../chat/tool-invocation-card'
+
+describe('ToolInvocationCard', () => {
+  // ============================================================
+  // 基础渲染测试
+  // ============================================================
+  describe('基础渲染', () => {
+    it('应正确渲染工具名称', () => {
+      render(<ToolInvocationCard toolName="read_file" status="success" />)
+      expect(screen.getByText('read_file')).toBeInTheDocument()
+    })
+
+    it('应设置正确的 displayName', () => {
+      expect(ToolInvocationCard.displayName).toBe('ToolInvocationCard')
+    })
+
+    it('应渲染参数文本', () => {
+      render(
+        <ToolInvocationCard
+          toolName="search"
+          params="query: hello world"
+          status="success"
+        />
+      )
+      expect(screen.getByText('query: hello world')).toBeInTheDocument()
+    })
+
+    it('无参数时不应渲染参数区域', () => {
+      const { container } = render(
+        <ToolInvocationCard toolName="list_dir" status="success" />
+      )
+      // 只有工具名和状态文本
+      expect(container.textContent).toContain('list_dir')
+    })
+  })
+
+  // ============================================================
+  // 状态图标测试
+  // ============================================================
+  describe('状态图标', () => {
+    it('running 状态应显示时间图标', () => {
+      const { container } = render(
+        <ToolInvocationCard toolName="test" status="running" />
+      )
+      // 默认 timeIcon 使用 TimeLine 组件
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('success 状态应显示勾选图标', () => {
+      const { container } = render(
+        <ToolInvocationCard toolName="test" status="success" />
+      )
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('error 状态应显示关闭图标', () => {
+      const { container } = render(
+        <ToolInvocationCard toolName="test" status="error" />
+      )
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('应接受自定义图标', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          checkboxCircleIcon={<span data-testid="custom-check">✓</span>}
+        />
+      )
+      expect(screen.getByTestId('custom-check')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 状态文本测试
+  // ============================================================
+  describe('状态文本', () => {
+    it('running 状态应显示默认文本 "Running"', () => {
+      render(<ToolInvocationCard toolName="test" status="running" />)
+      expect(screen.getByText('Running')).toBeInTheDocument()
+    })
+
+    it('success 状态应显示默认文本 "Ran"', () => {
+      render(<ToolInvocationCard toolName="test" status="success" />)
+      expect(screen.getByText('Ran')).toBeInTheDocument()
+    })
+
+    it('error 状态应显示默认文本 "Failed"', () => {
+      render(<ToolInvocationCard toolName="test" status="error" />)
+      expect(screen.getByText('Failed')).toBeInTheDocument()
+    })
+
+    it('应接受自定义 statusText', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          statusText="执行完成"
+        />
+      )
+      expect(screen.getByText('执行完成')).toBeInTheDocument()
+    })
+
+    it('statusText 为空字符串时不应显示状态文本', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          statusText=""
+        />
+      )
+      expect(screen.queryByText('Ran')).not.toBeInTheDocument()
+    })
+
+    it('应接受自定义状态文本 props', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="running"
+          runningText="执行中"
+        />
+      )
+      expect(screen.getByText('执行中')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 响应展示测试
+  // ============================================================
+  describe('响应展示', () => {
+    it('有响应时应可展开', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Tool output result"
+        />
+      )
+      // 点击展开
+      fireEvent.click(screen.getByText('test'))
+      expect(screen.getByText('Tool output result')).toBeInTheDocument()
+    })
+
+    it('defaultExpanded=true 时应默认展开', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Already expanded"
+          defaultExpanded={true}
+        />
+      )
+      expect(screen.getByText('Already expanded')).toBeInTheDocument()
+    })
+
+    it('无响应时不应显示展开箭头', () => {
+      const { container } = render(
+        <ToolInvocationCard toolName="test" status="success" />
+      )
+      // 没有箭头图标（ArrowRightLine 的 SVG）
+      const arrows = container.querySelectorAll('[class*="rotate"]')
+      expect(arrows).toHaveLength(0)
+    })
+
+    it('running 状态时不应可展开', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="running"
+          response="Some response"
+        />
+      )
+      // running 状态下点击不应展开
+      fireEvent.click(screen.getByText('test'))
+      expect(screen.queryByText('Some response')).not.toBeInTheDocument()
+    })
+
+    it('点击应切换展开/收起状态', () => {
+      render(
+        <ToolInvocationCard
+          toolName="toggle-test"
+          status="success"
+          response="Toggle content"
+        />
+      )
+      const trigger = screen.getByText('toggle-test')
+
+      // 第一次点击展开
+      fireEvent.click(trigger)
+      expect(screen.getByText('Toggle content')).toBeInTheDocument()
+
+      // 第二次点击收起
+      fireEvent.click(trigger)
+      expect(screen.queryByText('Toggle content')).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 响应标签测试
+  // ============================================================
+  describe('响应标签', () => {
+    it('展开时应显示默认标签 "Response"', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Content"
+          defaultExpanded
+        />
+      )
+      expect(screen.getByText('Response')).toBeInTheDocument()
+    })
+
+    it('应接受自定义 responseLabel', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Content"
+          responseLabel="输出结果"
+          defaultExpanded
+        />
+      )
+      expect(screen.getByText('输出结果')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 错误状态样式测试
+  // ============================================================
+  describe('错误状态', () => {
+    it('error 状态响应应应用错误样式', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="error"
+          response="Error message"
+          defaultExpanded
+        />
+      )
+      const errorText = screen.getByText('Error message')
+      expect(errorText).toHaveClass('text-error')
+    })
+
+    it('success 状态响应不应有错误样式', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Success message"
+          defaultExpanded
+        />
+      )
+      const successText = screen.getByText('Success message')
+      expect(successText).not.toHaveClass('text-error')
+    })
+  })
+
+  // ============================================================
+  // className 测试
+  // ============================================================
+  describe('className', () => {
+    it('应合并自定义 className', () => {
+      const { container } = render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          className="custom-card"
+        />
+      )
+      expect(container.firstChild).toHaveClass('custom-card')
+    })
+  })
+
+  // ============================================================
+  // 自定义图标 props 测试
+  // ============================================================
+  describe('自定义图标 props', () => {
+    it('应接受自定义 timeIcon', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="running"
+          timeIcon={<span data-testid="time-icon">⏱</span>}
+        />
+      )
+      expect(screen.getByTestId('time-icon')).toBeInTheDocument()
+    })
+
+    it('应接受自定义 closeCircleIcon', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="error"
+          closeCircleIcon={<span data-testid="close-icon">✗</span>}
+        />
+      )
+      expect(screen.getByTestId('close-icon')).toBeInTheDocument()
+    })
+
+    it('应接受自定义 arrowRightIcon', () => {
+      render(
+        <ToolInvocationCard
+          toolName="test"
+          status="success"
+          response="Content"
+          arrowRightIcon={<span data-testid="arrow-icon">→</span>}
+        />
+      )
+      expect(screen.getByTestId('arrow-icon')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================================
+  // 组合场景测试
+  // ============================================================
+  describe('组合场景', () => {
+    it('应支持所有 props 组合', () => {
+      render(
+        <ToolInvocationCard
+          toolName="full_test"
+          params="/path/to/file.ts"
+          status="success"
+          response="File content here..."
+          defaultExpanded
+          statusText="已完成"
+          responseLabel="文件内容"
+          className="test-class"
+          checkboxCircleIcon={<span data-testid="check">✓</span>}
+          arrowRightIcon={<span data-testid="arrow">→</span>}
+        />
+      )
+
+      expect(screen.getByText('full_test')).toBeInTheDocument()
+      expect(screen.getByText('/path/to/file.ts')).toBeInTheDocument()
+      expect(screen.getByText('已完成')).toBeInTheDocument()
+      expect(screen.getByText('文件内容')).toBeInTheDocument()
+      expect(screen.getByText('File content here...')).toBeInTheDocument()
+      expect(screen.getByTestId('check')).toBeInTheDocument()
+      expect(screen.getByTestId('arrow')).toBeInTheDocument()
+    })
+  })
+})

package/registry/basic/alert-dialog.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react'
+import { motion } from 'framer-motion'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { getThemeFromDocument } from './theme-from-document'
+
+const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay ref={ref} asChild {...props}>
+    <motion.div
+      className={cn('fixed inset-0 z-50 bg-bg-mask/60', className)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.15 }}
+    />
+  </AlertDialogPrimitive.Overlay>
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const contentVariants = cva(
+  'font-sans fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-bg-base text-text shadow-lg p-6',
+  {
+    variants: {
+      size: { default: 'max-w-lg', sm: 'max-w-sm' },
+    },
+    defaultVariants: { size: 'default' },
+  }
+)
+
+export interface AlertDialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,
+    VariantProps<typeof contentVariants> {
+  size?: 'default' | 'sm'
+  /** When provided (e.g. from ThemeStyleProvider), used for portal wrapper */
+  dataStyle?: string
+  dataTheme?: string
+}
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  AlertDialogContentProps
+>(({ className, children, size = 'default', dataStyle, dataTheme, ...props }, ref) => {
+  const fromDoc = getThemeFromDocument()
+  const dataProps =
+    dataStyle !== undefined
+      ? { 'data-style': dataStyle, 'data-theme': dataTheme ?? fromDoc['data-theme'] ?? '' }
+      : fromDoc
+  return (
+    <AlertDialogPortal>
+      <div style={{ display: 'contents' }} {...dataProps}>
+        <AlertDialogOverlay />
+        <AlertDialogPrimitive.Content ref={ref} asChild {...props}>
+          <motion.div
+            className={cn(contentVariants({ size }), className)}
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+          >
+            {children}
+          </motion.div>
+        </AlertDialogPrimitive.Content>
+      </div>
+    </AlertDialogPortal>
+  )
+})
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex flex-col gap-2', className)} {...props} />
+))
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+
+const AlertDialogFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+    {...props}
+  />
+))
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('font-sans text-base font-medium leading-6 text-text', className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm leading-6 text-text-tertiary', className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
+
+const actionVariants = cva(
+  'inline-flex h-9 items-center justify-center rounded px-4 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 cursor-pointer',
+  {
+    variants: {
+      destructive: {
+        true: 'bg-error text-text-on-primary hover:bg-error-hover active:bg-error',
+        false: 'bg-bg-highlight text-text-on-primary hover:bg-bg-highlight-hover',
+      },
+    },
+    defaultVariants: { destructive: false },
+  }
+)
+
+export interface AlertDialogActionProps
+  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>,
+    VariantProps<typeof actionVariants> {
+  destructive?: boolean
+}
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  AlertDialogActionProps
+>(({ className, destructive = false, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(actionVariants({ destructive }), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      'inline-flex h-9 items-center justify-center rounded px-4 text-sm font-medium cursor-pointer',
+      'bg-transparent text-text-secondary hover:bg-fill-secondary hover:text-text',
+      'transition-colors focus:outline-none',
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
+export { contentVariants as alertDialogContentVariants, actionVariants as alertDialogActionVariants }

package/registry/basic/avatar.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const avatarVariants = cva('relative flex shrink-0 rounded-full', {
+  variants: {
+    size: {
+      sm: 'h-8 w-8',
+      default: 'h-10 w-10',
+      lg: 'h-12 w-12',
+    },
+  },
+  defaultVariants: { size: 'default' },
+})
+
+export interface AvatarProps
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
+    VariantProps<typeof avatarVariants> {}
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  AvatarProps
+>(({ className, size = 'default', ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(avatarVariants({ size }), className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+export type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  AvatarImageProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn(
+      'aspect-square h-full w-full overflow-hidden rounded-full object-cover',
+      className
+    )}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+export type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  AvatarFallbackProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center overflow-hidden rounded-full bg-fill-tertiary text-sm font-medium text-text',
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export type AvatarBadgeProps = React.HTMLAttributes<HTMLSpanElement>
+
+const AvatarBadge = React.forwardRef<HTMLSpanElement, AvatarBadgeProps>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(
+        'absolute bottom-0 right-0 z-10 block h-3 w-3 rounded-full border-2 border-bg-base bg-success',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+AvatarBadge.displayName = 'AvatarBadge'
+
+export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>
+
+const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex -space-x-2 [&>*]:ring-2 [&>*]:ring-bg-base', className)}
+      {...props}
+    />
+  )
+)
+AvatarGroup.displayName = 'AvatarGroup'
+
+export type AvatarGroupCountProps = React.HTMLAttributes<HTMLSpanElement>
+
+const AvatarGroupCount = React.forwardRef<HTMLSpanElement, AvatarGroupCountProps>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(
+        'inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-bg-base bg-fill-tertiary text-sm font-medium text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+AvatarGroupCount.displayName = 'AvatarGroupCount'
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}
+export { avatarVariants }