sparkdesign 0.0.1 → 0.1.10

package/registry/basic/select.tsx

@@ -0,0 +1,177 @@
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { cn } from '@/lib/utils'
+import { ArrowDownSLine, ArrowUpLine, CheckLine } from './icons-inline'
+import { getThemeFromDocument } from './theme-from-document'
+
+/** 取消 outline/ring，避免与全局 *:focus-visible 冲突产生偶现 focus 环；用 !important 压过全局 */
+const FOCUS_RESET =
+  'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:!outline-none focus-visible:!ring-0 focus-visible:outline-offset-0 focus-visible:!outline-offset-0 focus-visible:ring-offset-0 focus-visible:!ring-offset-0'
+
+const Select = SelectPrimitive.Root
+const SelectGroup = SelectPrimitive.Group
+const SelectValue = SelectPrimitive.Value
+
+export interface SelectTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+  triggerIcon?: React.ReactNode
+}
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(({ className, children, disabled, triggerIcon, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    disabled={disabled}
+    className={cn(
+      'flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-border-tertiary bg-bg-container px-3 py-2 text-sm text-text placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      FOCUS_RESET,
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <span className="pointer-events-none flex shrink-0 text-current [&>svg]:text-current">
+        {triggerIcon ?? <ArrowDownSLine className="h-[1em] w-[1em] shrink-0" />}
+      </span>
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & { scrollUpIcon?: React.ReactNode }
+>(({ className, scrollUpIcon, ...rest }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', FOCUS_RESET, className)}
+    {...rest}
+  >
+    {scrollUpIcon ?? <ArrowUpLine className="h-[1em] w-[1em]" />}
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & { scrollDownIcon?: React.ReactNode }
+>(({ className, scrollDownIcon, ...rest }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', FOCUS_RESET, className)}
+    {...rest}
+  >
+    {scrollDownIcon ?? <ArrowDownSLine className="h-[1em] w-[1em]" />}
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    /** When provided (e.g. from ThemeStyleProvider), used for portal wrapper */
+    dataStyle?: string
+    dataTheme?: string
+  }
+>(({ className, children, position = 'popper', sideOffset = 4, dataStyle, dataTheme, ...props }, ref) => {
+  const fromDoc = getThemeFromDocument()
+  const dataProps =
+    dataStyle !== undefined
+      ? { 'data-style': dataStyle, 'data-theme': dataTheme ?? fromDoc['data-theme'] ?? '' }
+      : fromDoc
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={cn(
+          'relative z-[60] max-h-96 min-w-32 overflow-hidden rounded-lg border border-border-tertiary bg-bg-container p-1 text-text shadow-lg',
+          FOCUS_RESET,
+          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className
+        )}
+        position={position}
+        sideOffset={sideOffset}
+        {...dataProps}
+        {...props}
+      >
+          <SelectScrollUpButton />
+          <SelectPrimitive.Viewport
+            className={cn(
+              FOCUS_RESET,
+              position === 'popper' &&
+                'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+            )}
+          >
+            {children}
+          </SelectPrimitive.Viewport>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+})
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('flex h-9 items-center px-3 text-sm font-semibold text-text-secondary', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & { itemIndicatorIcon?: React.ReactNode }
+>(({ className, children, itemIndicatorIcon, ...rest }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex h-9 w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-sm pl-3 pr-8 text-sm transition-colors',
+      FOCUS_RESET,
+      'hover:bg-fill-secondary data-[highlighted]:bg-fill-secondary data-[highlighted]:text-text data-[state=checked]:bg-fill-secondary data-[state=checked]:text-text',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...rest}
+  >
+    <span className="absolute right-3 flex h-[1em] w-[1em] items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        {itemIndicatorIcon ?? <CheckLine className="h-[1em] w-[1em]" />}
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('my-1 mx-1 h-px bg-border-tertiary', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

package/registry/basic/shimmering-text.tsx

@@ -0,0 +1,115 @@
+import { useMemo, forwardRef, useRef } from 'react'
+import { motion, useInView, type HTMLMotionProps } from 'framer-motion'
+import { cn } from '../lib/utils'
+
+export interface ShimmeringTextProps extends Omit<HTMLMotionProps<'span'>, 'children'> {
+  /** Required. Text to display with shimmer effect */
+  text: string
+  /** Animation duration in seconds. Default: 2 */
+  duration?: number
+  /** Delay before starting animation in seconds. Default: 0 */
+  delay?: number
+  /** Whether to repeat the animation. Default: true */
+  repeat?: boolean
+  /** Pause duration between repeats in seconds. Default: 0.5 */
+  repeatDelay?: number
+  /** Whether to start animation when entering viewport. Default: true */
+  startOnView?: boolean
+  /** Whether to animate only once. Default: false */
+  once?: boolean
+  /** Margin for viewport detection (e.g., "0px 0px -10%"). Default: undefined */
+  inViewMargin?: string
+  /** Shimmer spread multiplier. Default: 2 */
+  spread?: number
+  /** Base text color (CSS color value) */
+  color?: string
+  /** Shimmer gradient color (CSS color value) */
+  shimmerColor?: string
+}
+
+const ShimmeringText = forwardRef<HTMLSpanElement, ShimmeringTextProps>(
+  (
+    {
+      text,
+      duration = 2,
+      delay = 0,
+      repeat = true,
+      repeatDelay = 0.5,
+      startOnView = true,
+      once = false,
+      inViewMargin,
+      spread = 2,
+      color,
+      shimmerColor,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const containerRef = useRef<HTMLSpanElement>(null)
+    const isInView = useInView(containerRef, {
+      once: once,
+      margin: inViewMargin as `${number}px ${number}px ${number}px ${number}px` | undefined,
+    })
+
+    const shouldAnimate = startOnView ? isInView : true
+
+    const dynamicSpread = useMemo(() => {
+      return text.length * spread
+    }, [text, spread])
+
+    const baseColor = color || 'var(--color-text-secondary)'
+    const highlightColor = shimmerColor || 'var(--color-text)'
+
+    const backgroundStyle = useMemo(() => {
+      return {
+        backgroundImage: `linear-gradient(90deg, transparent calc(50% - ${dynamicSpread}px), ${highlightColor}, transparent calc(50% + ${dynamicSpread}px)), linear-gradient(${baseColor}, ${baseColor})`,
+      }
+    }, [dynamicSpread, highlightColor, baseColor])
+
+    const combinedRef = (node: HTMLSpanElement | null) => {
+      ;(containerRef as React.MutableRefObject<HTMLSpanElement | null>).current = node
+      if (typeof ref === 'function') {
+        ref(node)
+      } else if (ref) {
+        ref.current = node
+      }
+    }
+
+    return (
+      <motion.span
+        ref={combinedRef}
+        className={cn(
+          'relative inline-block bg-clip-text text-transparent',
+          'bg-[length:250%_100%,auto] bg-no-repeat',
+          className
+        )}
+        style={{
+          ...backgroundStyle,
+          ...style,
+        }}
+        initial={{ backgroundPosition: '100% center' }}
+        animate={
+          shouldAnimate
+            ? { backgroundPosition: '0% center' }
+            : { backgroundPosition: '100% center' }
+        }
+        transition={{
+          repeat: repeat && !once ? Infinity : 0,
+          repeatDelay: repeatDelay,
+          duration: duration,
+          delay: delay,
+          ease: 'linear',
+        }}
+        {...props}
+      >
+        {text}
+      </motion.span>
+    )
+  }
+)
+
+ShimmeringText.displayName = 'ShimmeringText'
+
+export { ShimmeringText }

package/registry/basic/sidebar-menu.tsx

@@ -0,0 +1,177 @@
+import { forwardRef, useState } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './dropdown-menu'
+import { MoreLine } from './icons-inline'
+
+export interface SidebarMenuItemAction {
+  id: string
+  label: string
+  icon?: ReactNode
+  onClick?: () => void
+  destructive?: boolean
+}
+
+export interface SidebarMenuItem {
+  id: string
+  label: string
+  icon?: ReactNode
+  disabled?: boolean
+  actions?: SidebarMenuItemAction[]
+}
+
+export interface SidebarMenuProps extends HTMLAttributes<HTMLDivElement> {
+  items: SidebarMenuItem[]
+  selectedId?: string
+  onItemClick?: (item: SidebarMenuItem) => void
+  width?: string
+  moreIcon?: ReactNode
+}
+
+const moreClass = 'w-4 h-4'
+
+export const SidebarMenu = forwardRef<HTMLDivElement, SidebarMenuProps>(
+  (
+    {
+      items,
+      selectedId,
+      onItemClick,
+      width = 'w-52',
+      className,
+      moreIcon,
+      ...props
+    },
+    ref
+  ) => {
+    const [openDropdownId, setOpenDropdownId] = useState<string | null>(null)
+    const baseStyles = 'flex flex-col gap-1.5 rounded-md bg-transparent'
+    const defaultMore = moreIcon ?? <MoreLine className={moreClass} />
+
+    return (
+      <div ref={ref} className={cn(baseStyles, width, className)} {...props}>
+        {items.map((item) => {
+          const isSelected = selectedId === item.id
+          const isDisabled = item.disabled
+          const isOpen = openDropdownId === item.id
+
+          return (
+            <div
+              key={item.id}
+              className={cn(
+                'group flex items-center gap-2 py-1 px-2 rounded-md text-sm leading-sm transition-colors',
+                'focus-within:outline-none min-w-0',
+                isDisabled && 'opacity-50 cursor-not-allowed',
+                !isDisabled && 'cursor-pointer',
+                isSelected
+                  ? 'bg-fill-secondary text-text'
+                  : 'bg-transparent text-text-secondary hover:bg-fill-secondary hover:text-text'
+              )}
+            >
+              <button
+                onClick={() => {
+                  if (!isDisabled) onItemClick?.(item)
+                  setOpenDropdownId(null)
+                }}
+                disabled={isDisabled}
+                className="flex-1 text-left truncate min-w-0 outline-none bg-transparent border-none p-0 cursor-pointer"
+              >
+                {item.label}
+              </button>
+              {item.actions && item.actions.length > 0 ? (
+                <div onClick={(e) => e.stopPropagation()}>
+                  <DropdownMenu
+                    open={isOpen}
+                    onOpenChange={(open) => {
+                      setOpenDropdownId(open ? item.id : null)
+                    }}
+                  >
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        className={cn(
+                          'flex items-center justify-center p-1 rounded outline-none transition-all duration-200 relative z-10 cursor-pointer hover:bg-fill-primary'
+                        )}
+                        style={{ pointerEvents: 'auto' }}
+                        onClick={(e) => e.stopPropagation()}
+                        onMouseDown={(e) => e.stopPropagation()}
+                      >
+                        <span
+                          className={cn(
+                            'transition-opacity pointer-events-none flex items-center justify-center',
+                            isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                          )}
+                        >
+                          {item.icon ?? (
+                            <span
+                              className={cn(
+                                'w-4 h-4 inline-flex items-center justify-center',
+                                isSelected ? 'text-text' : 'text-text-secondary'
+                              )}
+                            >
+                              {defaultMore}
+                            </span>
+                          )}
+                        </span>
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      {item.actions.map((action) => (
+                        <DropdownMenuItem
+                          key={action.id}
+                          variant={action.destructive ? 'destructive' : 'default'}
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            setOpenDropdownId(null)
+                            action.onClick?.()
+                          }}
+                        >
+                          {action.icon && (
+                            <span className="mr-2 w-4 h-4 flex items-center justify-center">
+                              {action.icon}
+                            </span>
+                          )}
+                          {action.label}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              ) : (
+                <span
+                  className="flex-shrink-0 w-4 h-4 flex items-center justify-center"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {item.icon ? (
+                    <span
+                      className={cn(
+                        'transition-opacity pointer-events-none',
+                        isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                      )}
+                    >
+                      {item.icon}
+                    </span>
+                  ) : (
+                    <span
+                      className={cn(
+                        'w-4 h-4 inline-flex items-center justify-center transition-opacity pointer-events-none',
+                        isSelected ? 'opacity-100 text-text' : 'opacity-0 group-hover:opacity-100 text-text-secondary'
+                      )}
+                    >
+                      {defaultMore}
+                    </span>
+                  )}
+                </span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+SidebarMenu.displayName = 'SidebarMenu'

package/registry/basic/skeleton.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const skeletonVariants = cva('animate-pulse bg-fill-tertiary', {
+  variants: {
+    rounded: {
+      default: 'rounded-md',
+      circle: 'rounded-full',
+    },
+  },
+  defaultVariants: { rounded: 'default' },
+})
+
+export interface SkeletonProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof skeletonVariants> {
+  rounded?: 'default' | 'circle'
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, rounded = 'default', ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(skeletonVariants({ rounded }), className)}
+      {...props}
+    />
+  )
+)
+Skeleton.displayName = 'Skeleton'
+
+export { skeletonVariants }

package/registry/basic/slider.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import { cn } from '@/lib/utils'
+
+export interface SliderProps
+  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+  className?: string
+}
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  SliderProps
+>(({ className, ...props }, ref) => {
+  const value = props.value ?? props.defaultValue ?? [50]
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn(
+        'relative flex w-full touch-none select-none cursor-pointer items-center',
+        'data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-auto data-[orientation=vertical]:h-full',
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        className={cn(
+          'relative grow overflow-hidden rounded-full bg-fill-secondary',
+          'data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full',
+          'data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full'
+        )}
+      >
+        <SliderPrimitive.Range
+          className={cn(
+            'absolute rounded-full bg-primary',
+            'data-[orientation=horizontal]:h-full',
+            'data-[orientation=vertical]:w-full'
+          )}
+        />
+      </SliderPrimitive.Track>
+      {value.map((_, i) => (
+        <SliderPrimitive.Thumb
+          key={i}
+          className={cn(
+            'block size-5 rounded-full border-2 border-primary bg-bg-base shadow-sm',
+            'transition-colors focus-visible:outline-none 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'
+          )}
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+})
+Slider.displayName = 'Slider'
+
+export { Slider }

package/registry/basic/sonner.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { Toaster as SonnerToaster } from 'sonner'
+import type { ToasterProps as SonnerToasterProps } from 'sonner'
+import { getThemeFromDocument } from './theme-from-document'
+
+export { toast } from 'sonner'
+
+export type ToasterProps = Omit<SonnerToasterProps, 'theme'> & {
+  theme?: 'light' | 'dark'
+  /** 可选：Portal 根节点 data-style，主库可传入 useThemeStyle 的值 */
+  dataStyle?: string
+  /** 可选：Portal 根节点 data-theme，主库可传入 useThemeStyle 的值 */
+  dataTheme?: string
+}
+
+/** 图标/文字用 2px；按钮与容器边缘、按钮之间用固定 8px */
+const TOAST_INNER_GAP_PX = '2px'
+const TOAST_EDGE_PADDING_PX = '8px'
+const TOAST_BUTTON_GAP_PX = '8px'
+
+/** 强制 toast 四边内边距 + 根节点 text-sm 变量 + 非首个按钮左间距；选择器带 data-styled 以覆盖 sonner */
+const TOAST_PADDING_TOP_BOTTOM_PX = '12px'
+/** 根节点用设计系统 text-sm 变量；[data-content] 撑满中间；非首个按钮左间距 */
+const TOAST_LAYOUT_FIX_CSS = `[data-sonner-toaster] [data-sonner-toast][data-styled="true"] { padding-left: ${TOAST_EDGE_PADDING_PX} !important; padding-right: ${TOAST_EDGE_PADDING_PX} !important; padding-top: ${TOAST_PADDING_TOP_BOTTOM_PX} !important; padding-bottom: ${TOAST_PADDING_TOP_BOTTOM_PX} !important; font-size: var(--font-size-sm) !important; line-height: var(--font-size-sm--line-height) !important; }
+[data-sonner-toaster] [data-sonner-toast] [data-content] { flex: 1 !important; min-width: 0 !important; }
+[data-sonner-toaster] [data-sonner-toast] [data-button]:not(:first-of-type) { margin-left: ${TOAST_BUTTON_GAP_PX} !important; }`
+
+const defaultToastOptions: NonNullable<SonnerToasterProps['toastOptions']> = {
+  className: 'text-sm',
+  style: {
+    padding: `var(--spacing-3) ${TOAST_EDGE_PADDING_PX}`,
+    gap: TOAST_INNER_GAP_PX,
+    background: 'var(--color-bg-container)',
+    borderColor: 'var(--color-border-tertiary)',
+    color: 'var(--color-text)',
+  },
+  descriptionClassName: 'text-xs text-text-secondary',
+  actionButtonStyle: {
+    borderRadius: 'var(--radius)',
+    paddingLeft: 'var(--spacing-2)',
+    paddingRight: 'var(--spacing-2)',
+    height: 'var(--spacing-7)',
+    fontSize: 'var(--font-size-xs)',
+  },
+  cancelButtonStyle: {
+    borderRadius: 'var(--radius)',
+    paddingLeft: 'var(--spacing-2)',
+    paddingRight: 'var(--spacing-2)',
+    height: 'var(--spacing-7)',
+    fontSize: 'var(--font-size-xs)',
+  },
+}
+
+const SONNER_GAP = 14
+const SONNER_VISIBLE_TOASTS = 3
+/** toaster 距视口右侧默认 24px，改为 8px 使按钮到屏幕边缘不会过大 */
+const DEFAULT_OFFSET = { right: 8, left: 8, top: 24, bottom: 24 }
+
+export function Toaster({ theme, toastOptions, dataStyle, dataTheme, icons, gap = SONNER_GAP, visibleToasts = SONNER_VISIBLE_TOASTS, offset = DEFAULT_OFFSET, ...props }: ToasterProps) {
+  const fromDocument = getThemeFromDocument()
+  const dataProps =
+    dataStyle !== undefined || dataTheme !== undefined
+      ? { 'data-style': dataStyle, 'data-theme': dataTheme }
+      : fromDocument
+  const resolvedTheme = theme ?? (typeof document !== 'undefined' && document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light')
+
+  const content = (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: TOAST_LAYOUT_FIX_CSS }} />
+      <div style={{ display: 'contents' }} {...dataProps}>
+        <SonnerToaster
+          theme={resolvedTheme}
+          closeButton
+          icons={icons}
+          gap={gap}
+          visibleToasts={visibleToasts}
+          offset={offset}
+          toastOptions={{
+            ...defaultToastOptions,
+            ...toastOptions,
+            style: { ...defaultToastOptions.style, ...toastOptions?.style },
+          }}
+          style={
+            {
+              '--border-radius': 'var(--radius-lg)',
+              fontFamily: 'inherit',
+              '--gap': `${gap}px`,
+              '--toast-icon-margin-start': '0',
+              '--toast-icon-margin-end': TOAST_INNER_GAP_PX,
+              /* 控制 action/cancel 按钮间距：按钮间仅靠 toast 根 gap，不再额外 margin */
+              '--toast-button-margin-start': 'auto',
+              '--toast-button-margin-end': '0',
+            } as React.CSSProperties
+          }
+          {...props}
+        />
+      </div>
+    </>
+  )
+
+  return typeof document !== 'undefined' ? createPortal(content, document.body) : null
+}
+Toaster.displayName = 'Toaster'

package/registry/basic/spinner.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+import { cn } from '@/lib/utils'
+import { LoaderLine } from './icons-inline'
+
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+  className?: string
+}
+
+export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
+  ({ className, ...props }, ref) => (
+    <span ref={ref} role="status" aria-label="Loading" {...props}>
+      <LoaderLine className={cn('size-4 animate-spin', className)} />
+    </span>
+  )
+)
+Spinner.displayName = 'Spinner'