sparkdesign 0.0.1 → 0.2.6

package/cli/dist/utils/tokens.js

@@ -0,0 +1,90 @@
+/**
+ * [INPUT]: cwd, registryRoot
+ * [OUTPUT]: 见各函数
+ * [POS]: cli/src/utils/tokens.ts
+ *
+ * [PROTOCOL]: 文件逻辑变更时同步更新此 Header
+ * - init：ensureDesignTokens 注入到用户入口 CSS（globals/index.css）
+ * - add：不改入口；writeQoderTokensFile 生成独立 qoder-tokens.css，由用户自行 import
+ */
+import path from 'node:path';
+import fs from 'fs-extra';
+const TOKEN_MARKER = 'Spark Design tokens';
+/** 项目里是否已有 token（入口 CSS 内联了变量、或已 import qoder-tokens.css） */
+export async function projectHasTokens(cwd) {
+    const candidates = [
+        path.join(cwd, 'src', 'app', 'globals.css'),
+        path.join(cwd, 'src', 'index.css'),
+        path.join(cwd, 'src', 'main.css'),
+        path.join(cwd, 'src', 'App.css'),
+    ];
+    for (const p of candidates) {
+        if (await fs.pathExists(p)) {
+            const content = await fs.readFile(p, 'utf-8');
+            if (content.includes('--color-primary:') ||
+                content.includes(TOKEN_MARKER) ||
+                content.includes('qoder-tokens.css')) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+/** 仅 init 使用：把 theme+scale+scrollbar-utility 注入到用户入口 CSS（globals.css / index.css） */
+export async function ensureDesignTokens(cwd, registryRoot) {
+    const themePath = path.join(registryRoot, 'tokens', 'theme.css');
+    const scalePath = path.join(registryRoot, 'tokens', 'scale.css');
+    const scrollbarPath = path.join(registryRoot, 'tokens', 'scrollbar-utility.css');
+    if (!(await fs.pathExists(themePath)) || !(await fs.pathExists(scalePath))) {
+        return null;
+    }
+    if (await projectHasTokens(cwd)) {
+        return null;
+    }
+    let cssEntry = path.join(cwd, 'src', 'app', 'globals.css');
+    if (!(await fs.pathExists(cssEntry))) {
+        cssEntry = path.join(cwd, 'src', 'index.css');
+    }
+    if (!(await fs.pathExists(cssEntry))) {
+        cssEntry = path.join(cwd, 'src', 'index.css');
+        await fs.ensureDir(path.dirname(cssEntry));
+    }
+    const themeContent = await fs.readFile(themePath, 'utf-8');
+    const scaleContent = await fs.readFile(scalePath, 'utf-8');
+    const scrollbarContent = (await fs.pathExists(scrollbarPath))
+        ? await fs.readFile(scrollbarPath, 'utf-8')
+        : '';
+    const tokensBlock = `/* ${TOKEN_MARKER} - 由 npx sparkdesign init 写入，驱动组件样式 */\n${scaleContent}\n\n${themeContent}\n` +
+        (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    const existing = (await fs.pathExists(cssEntry)) ? await fs.readFile(cssEntry, 'utf-8') : '';
+    const newContent = tokensBlock + (existing ? '\n' + existing : '');
+    await fs.writeFile(cssEntry, newContent, 'utf-8');
+    return cssEntry;
+}
+const DEDICATED_TOKENS_FILE = 'qoder-tokens.css';
+/** 仅 add 使用：在 src 下生成独立 token 文件，不修改用户入口。若已存在则不覆盖。返回路径及是否本次创建。 */
+export async function writeQoderTokensFile(cwd, registryRoot) {
+    const themePath = path.join(registryRoot, 'tokens', 'theme.css');
+    const scalePath = path.join(registryRoot, 'tokens', 'scale.css');
+    const scrollbarPath = path.join(registryRoot, 'tokens', 'scrollbar-utility.css');
+    const targetPath = path.join(cwd, 'src', DEDICATED_TOKENS_FILE);
+    if (await fs.pathExists(targetPath)) {
+        return { path: targetPath, created: false };
+    }
+    if (!(await fs.pathExists(themePath)) || !(await fs.pathExists(scalePath))) {
+        return { path: targetPath, created: false };
+    }
+    const themeContent = await fs.readFile(themePath, 'utf-8');
+    const scaleContent = await fs.readFile(scalePath, 'utf-8');
+    const scrollbarContent = (await fs.pathExists(scrollbarPath))
+        ? await fs.readFile(scrollbarPath, 'utf-8')
+        : '';
+    const content = `/* ${TOKEN_MARKER} - 在应用入口 import 此文件以驱动组件样式 */\n${scaleContent}\n\n${themeContent}\n` +
+        (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    await fs.ensureDir(path.dirname(targetPath));
+    await fs.writeFile(targetPath, content, 'utf-8');
+    return { path: targetPath, created: true };
+}
+export function getQoderTokensImportPath() {
+    return `./${DEDICATED_TOKENS_FILE}`;
+}

package/cli/dist/utils/transform.js

@@ -0,0 +1,19 @@
+/**
+ * [INPUT]: 模板源码 + 用户 aliases
+ * [OUTPUT]: 替换别名后的源码字符串
+ * [POS]: cli/src/utils/transform.ts
+ *
+ * [PROTOCOL]: 文件逻辑变更时同步更新此 Header
+ */
+/** 移除文件开头的 L3 协议块注释，使按需引入到用户项目的代码不包含内部文档。 */
+export function stripL3Header(source) {
+    return source.replace(/^\s*\/\*\*[\s\S]*?\*\/\s*/, '').trimStart();
+}
+export function transformImports(source, aliases) {
+    let result = source;
+    result = result.replace(/from ['"]@\/lib\/utils['"]/g, `from '${aliases.utils}'`);
+    if (aliases.components) {
+        result = result.replace(/from ['"]@\/components\//g, `from '${aliases.components}/`);
+    }
+    return result;
+}

package/cli/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/cli/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 }

package/cli/registry/basic/button.tsx

@@ -0,0 +1,100 @@
+import { forwardRef } from 'react'
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-1.5 font-medium transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary text-text-on-primary hover:bg-primary-hover',
+        secondary: 'bg-bg-highlight text-text-on-primary hover:bg-bg-highlight-hover',
+        tertiary: 'bg-fill-secondary text-text hover:bg-fill',
+        ghost: 'bg-transparent text-text-secondary hover:bg-fill-secondary hover:text-text',
+        text: 'bg-transparent text-text-secondary hover:text-text',
+      },
+      size: {
+        sm: 'h-7 px-2 text-xs',
+        md: 'h-9 px-3 text-sm',
+        lg: 'h-11 px-4 text-base',
+      },
+      rounded: {
+        square: 'rounded',
+        pill: 'rounded-full',
+      },
+      textOnly: {
+        true: 'h-auto px-0 py-0.5',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      { textOnly: true, size: 'sm', className: 'text-xs' },
+      { textOnly: true, size: 'md', className: 'text-sm' },
+      { textOnly: true, size: 'lg', className: 'text-base' },
+    ],
+    defaultVariants: {
+      variant: 'ghost',
+      size: 'md',
+      rounded: 'square',
+      textOnly: false,
+    },
+  }
+)
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  children: ReactNode
+  textButton?: boolean
+  prefixIcon?: ReactNode
+  suffixIcon?: ReactNode
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'ghost',
+      children,
+      size = 'md',
+      textButton = false,
+      prefixIcon,
+      suffixIcon,
+      rounded = 'square',
+      disabled = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={buttonVariants({
+          variant: textButton ? 'text' : variant,
+          size,
+          rounded,
+          textOnly: textButton,
+          className,
+        })}
+        disabled={disabled}
+        {...props}
+      >
+        {prefixIcon && (
+          <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
+            {prefixIcon}
+          </span>
+        )}
+        {children}
+        {suffixIcon && (
+          <span className="inline-flex shrink-0 items-center justify-center [&>*]:block [&>*]:leading-none">
+            {suffixIcon}
+          </span>
+        )}
+      </button>
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

package/cli/registry/basic/collapse.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { cn } from '@/lib/utils'
+import { ArrowDownSLine } from './icons-inline'
+
+const Collapse = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Root
+    ref={ref}
+    className={cn('w-full font-sans', className)}
+    data-slot="collapse"
+    {...props}
+  />
+))
+Collapse.displayName = 'Collapse'
+
+const CollapseItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn(
+      'border-b border-border-tertiary last:border-b-0 data-[orientation=horizontal]:border-b-0 data-[orientation=horizontal]:border-r data-[orientation=horizontal]:border-border-tertiary data-[orientation=horizontal]:last:border-r-0',
+      className
+    )}
+    data-slot="collapse-item"
+    {...props}
+  />
+))
+CollapseItem.displayName = 'CollapseItem'
+
+export interface CollapseTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+  chevronIcon?: React.ReactNode
+}
+
+const CollapseTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  CollapseTriggerProps
+>(({ className, children, chevronIcon, ...rest }, ref) => (
+  <AccordionPrimitive.Header className="flex font-sans">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'group flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium text-text font-sans transition-colors outline-none',
+        'hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:justify-between data-[orientation=horizontal]:py-4 data-[orientation=horizontal]:text-left',
+        className
+      )}
+      data-slot="collapse-trigger"
+      {...rest}
+    >
+      {children}
+      <span
+        className="shrink-0 inline-flex transition-transform duration-200 group-data-[state=open]:rotate-180"
+        aria-hidden
+      >
+        {chevronIcon ?? <ArrowDownSLine className="size-4 text-text-secondary" />}
+      </span>
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+CollapseTrigger.displayName = 'CollapseTrigger'
+
+const CollapseContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      'overflow-hidden text-sm text-text-secondary font-sans data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+      'data-[orientation=horizontal]:data-[state=closed]:animate-accordion-left data-[orientation=horizontal]:data-[state=open]:animate-accordion-right',
+      className
+    )}
+    data-slot="collapse-content"
+    {...props}
+  >
+    <div className="pb-3 pt-0 data-[orientation=horizontal]:pb-0 data-[orientation=horizontal]:pl-0 data-[orientation=horizontal]:pr-3">
+      {children}
+    </div>
+  </AccordionPrimitive.Content>
+))
+CollapseContent.displayName = 'CollapseContent'
+
+export type CollapseProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
+export type CollapseItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+export type CollapseContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+
+export { Collapse, CollapseItem, CollapseTrigger, CollapseContent }