sparkdesign 0.0.1 → 0.1.10

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

package/registry/basic/collapsible-card.tsx

@@ -0,0 +1,230 @@
+import { useState, useRef, useLayoutEffect, type ReactNode } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { cn } from '@/lib/utils'
+import { ArrowDownSLine } from './icons-inline'
+
+export interface CollapsibleCardProps {
+  headerIcon?: ReactNode
+  headerTitle: ReactNode
+  headerRight?: ReactNode
+  children?: ReactNode
+  defaultExpanded?: boolean
+  /** CSS padding 如 '6px 8px'，或 Tailwind 类 */
+  contentPadding?: string
+  onToggle?: (expanded: boolean) => void
+  collapsible?: boolean
+  footer?: ReactNode
+  contentMaxHeight?: number
+  /** 是否启用内容区底部展开/收起栏：内容高度超过 maxHeight 时显示，点击切换全部展开或收起 */
+  showExpandAllBar?: boolean
+  /** showExpandAllBar 为 true 时，未展开全部时的内容区最大高度（px） */
+  maxHeight?: number
+  titleShimmer?: boolean
+  className?: string
+}
+
+const DEFAULT_MAX_HEIGHT = 124
+
+export function CollapsibleCard({
+  headerIcon,
+  headerTitle,
+  headerRight,
+  children,
+  defaultExpanded = true,
+  contentPadding = 'var(--spacing-1\.5) var(--spacing-2)',
+  onToggle,
+  collapsible = true,
+  footer,
+  contentMaxHeight,
+  showExpandAllBar = false,
+  maxHeight = DEFAULT_MAX_HEIGHT,
+  titleShimmer = false,
+  className,
+}: CollapsibleCardProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded)
+  const [isHovered, setIsHovered] = useState(false)
+  const [expandAll, setExpandAll] = useState(false)
+  const [shouldShowBar, setShouldShowBar] = useState(false)
+  const [contentHeight, setContentHeight] = useState(0)
+  const [isMeasuring, setIsMeasuring] = useState(showExpandAllBar && defaultExpanded)
+  const [isAnimating, setIsAnimating] = useState(false)
+  const measureRef = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    if (!showExpandAllBar || !isExpanded) {
+      setShouldShowBar(false)
+      setContentHeight(0)
+      setIsMeasuring(false)
+      return
+    }
+    setIsMeasuring(true)
+    const checkHeight = () => {
+      const el = measureRef.current
+      if (!el) return
+      const actualHeight = el.scrollHeight
+      setContentHeight(actualHeight)
+      setShouldShowBar(actualHeight > maxHeight)
+      setIsMeasuring(false)
+    }
+    const raf = requestAnimationFrame(checkHeight)
+    let resizeObserver: ResizeObserver | null = null
+    if (measureRef.current) {
+      resizeObserver = new ResizeObserver(checkHeight)
+      resizeObserver.observe(measureRef.current)
+    }
+    return () => {
+      cancelAnimationFrame(raf)
+      resizeObserver?.disconnect()
+    }
+  }, [showExpandAllBar, isExpanded, children, maxHeight])
+
+  const handleToggle = () => {
+    if (!collapsible) return
+    const next = !isExpanded
+    setIsAnimating(true)
+    if (next && showExpandAllBar) setIsMeasuring(true)
+    setIsExpanded(next)
+    onToggle?.(next)
+    setTimeout(() => setIsAnimating(false), 300)
+  }
+
+  const showArrow = collapsible && (isHovered || headerIcon == null)
+  const headerIconNode = showArrow
+    ? <ArrowDownSLine className={cn('w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0 transition-transform duration-200 text-text-secondary', isExpanded ? 'rotate-0' : '-rotate-90')} />
+    : headerIcon
+
+  const useExpandAllLogic = showExpandAllBar && isExpanded && !contentMaxHeight
+  const contentClamped = useExpandAllLogic && (isMeasuring || (shouldShowBar && !expandAll) || isAnimating || (!shouldShowBar && contentHeight === 0))
+  const contentMaxHeightStyle =
+    contentMaxHeight != null
+      ? `${contentMaxHeight}px`
+      : contentClamped
+        ? `${maxHeight}px`
+        : useExpandAllLogic && shouldShowBar && expandAll && contentHeight > 0
+          ? `${Math.max(contentHeight + 50, 2000)}px`
+          : undefined
+
+  return (
+    <div
+      className={cn(
+        'rounded-md overflow-hidden border border-border-tertiary bg-fill-tertiary relative',
+        className
+      )}
+    >
+      <div
+        className={cn(
+          'flex flex-row items-center gap-2 px-2 py-1.5 select-none',
+          isExpanded && 'border-b border-border-tertiary'
+        )}
+        onMouseEnter={() => collapsible && setIsHovered(true)}
+        onMouseLeave={() => collapsible && setIsHovered(false)}
+      >
+        <div
+          className={cn('flex flex-row items-center gap-2 flex-1 min-w-0', collapsible && 'cursor-pointer')}
+          onClick={handleToggle}
+          role={collapsible ? 'button' : undefined}
+          aria-expanded={collapsible ? isExpanded : undefined}
+        >
+          <div className="w-[var(--font-size-sm)] h-[var(--font-size-sm)] flex items-center justify-center shrink-0 text-text-secondary [&>svg]:w-[var(--font-size-sm)] [&>svg]:h-[var(--font-size-sm)]">
+            {headerIconNode}
+          </div>
+          <div className="min-w-0 flex-1 flex items-center text-xs leading-xs text-text-secondary">
+            {titleShimmer ? (
+              <span className="animate-pulse">{headerTitle}</span>
+            ) : (
+              headerTitle
+            )}
+          </div>
+        </div>
+        {headerRight != null && (
+          <div
+            className="flex items-center gap-1.5 shrink-0 relative z-10"
+            onClick={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            {headerRight}
+          </div>
+        )}
+      </div>
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: [0.2, 0.8, 0.2, 1] }}
+            className={cn('overflow-hidden', isAnimating && 'select-none')}
+          >
+            {/* 隐藏测量用，用于获取内容实际高度 */}
+            {useExpandAllLogic && (
+              <div
+                ref={measureRef}
+                className="absolute invisible h-auto w-full pointer-events-none"
+                style={{ padding: contentPadding }}
+                aria-hidden
+              >
+                {children}
+              </div>
+            )}
+          <div
+            className={cn(
+              'relative overflow-x-hidden bg-bg-base scrollbar-auto',
+              contentMaxHeight != null
+                ? 'overflow-y-auto'
+                : contentClamped
+                  ? 'overflow-y-hidden'
+                  : 'overflow-y-visible',
+              shouldShowBar && 'transition-[max-height] duration-300 ease-in-out'
+            )}
+            style={{
+              padding: contentPadding,
+              maxHeight: contentMaxHeightStyle,
+            }}
+          >
+              {children}
+              {/* 底部渐变遮罩：内容被截断且未展开全部时显示 */}
+              {useExpandAllLogic && shouldShowBar && contentHeight > maxHeight && (
+                <div
+                  className={cn(
+                    'absolute bottom-0 left-0 right-0 pointer-events-none h-[25px] bg-gradient-to-b from-transparent to-[var(--color-bg-base)] transition-opacity duration-300',
+                    expandAll ? 'opacity-0' : 'opacity-100'
+                  )}
+                />
+              )}
+            </div>
+            {/* 内容区底部展开/收起栏：仅当内容高度超过 maxHeight 时显示 */}
+            {useExpandAllLogic && shouldShowBar && (
+              <button
+                type="button"
+                className="w-full h-4 flex items-center justify-center bg-bg-base border-0 cursor-pointer text-text-secondary hover:text-text transition-colors"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setIsAnimating(true)
+                  setExpandAll((prev) => !prev)
+                  setTimeout(() => setIsAnimating(false), 300)
+                }}
+                aria-label={expandAll ? '收起' : '展开全部'}
+              >
+                <ArrowDownSLine
+                  className={cn(
+                    'w-[var(--font-size-sm)] h-[var(--font-size-sm)] transition-transform duration-200',
+                    expandAll ? 'rotate-180' : 'rotate-0'
+                  )}
+                />
+              </button>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {footer != null && (
+        <div className="flex flex-row items-center gap-2 px-2 py-1.5 border-t border-border-tertiary">
+          {footer}
+        </div>
+      )}
+    </div>
+  )
+}
+
+CollapsibleCard.displayName = 'CollapsibleCard'

package/registry/basic/collapsible.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+import { cn } from '@/lib/utils'
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
+>(({ className, ...props }, ref) => (
+  <CollapsiblePrimitive.CollapsibleContent
+    ref={ref}
+    className={cn('overflow-hidden', className)}
+    {...props}
+  />
+))
+CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }