sparkdesign 0.0.1 → 0.1.10

package/registry/basic/option-list.tsx

@@ -0,0 +1,125 @@
+import { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const LIST_BASE = 'flex flex-col gap-1'
+
+const itemVariants = cva(
+  'w-full flex flex-col gap-0.5 items-start p-2 text-sm rounded text-left transition-colors outline-none focus-visible:bg-fill-tertiary focus-visible:ring-0',
+  {
+    variants: {
+      selected: { true: '', false: '' },
+      disabled: {
+        true: 'opacity-50 cursor-not-allowed',
+        false: 'cursor-pointer hover:bg-fill-tertiary',
+      },
+      dimmed: { true: 'opacity-40', false: '' },
+    },
+    defaultVariants: { selected: false, disabled: false, dimmed: false },
+  }
+)
+
+const prefixVariants = cva(
+  'flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-mono font-medium transition-colors',
+  {
+    variants: {
+      selected: {
+        true: 'bg-primary-active text-text-on-primary',
+        false: 'bg-fill-secondary text-text-tertiary',
+      },
+    },
+    defaultVariants: { selected: false },
+  }
+)
+
+export interface OptionItem {
+  id: string
+  label: string
+  description?: string
+  disabled?: boolean
+}
+
+export interface OptionListProps extends HTMLAttributes<HTMLDivElement> {
+  items: OptionItem[]
+  selectedIds?: string[]
+  focusedId?: string
+  onItemClick?: (item: OptionItem, index: number) => void
+  showPrefix?: boolean
+  disabled?: boolean
+}
+
+export const OptionList = forwardRef<HTMLDivElement, OptionListProps>(
+  (
+    {
+      items,
+      selectedIds = [],
+      focusedId,
+      onItemClick,
+      showPrefix = true,
+      disabled = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const getOptionNumber = (index: number) => String(index + 1)
+
+    return (
+      <div
+        ref={ref}
+        role="listbox"
+        aria-multiselectable={selectedIds.length > 1}
+        className={cn(LIST_BASE, className)}
+        {...props}
+      >
+        {items.map((item, index) => {
+          const isSelected = selectedIds.includes(item.id)
+          const isFocused = focusedId === item.id
+          const isDisabled = disabled || item.disabled
+          const hasSelection = selectedIds.length > 0
+          const dimmed = hasSelection && !isSelected && !isDisabled
+
+          return (
+            <button
+              key={item.id}
+              type="button"
+              role="option"
+              aria-selected={isSelected}
+              aria-disabled={isDisabled}
+              onClick={() => {
+                if (!isDisabled) onItemClick?.(item, index)
+              }}
+              disabled={isDisabled}
+              className={cn(
+                itemVariants({
+                  selected: isSelected,
+                  disabled: isDisabled,
+                  dimmed,
+                }),
+                // 键盘焦点态：仅底色，无 ring
+                isFocused && 'bg-fill-tertiary'
+              )}
+            >
+              <div className="flex items-center gap-3">
+                {showPrefix && (
+                  <div className={prefixVariants({ selected: isSelected })}>
+                    {getOptionNumber(index)}
+                  </div>
+                )}
+                <span className="font-medium text-text">{item.label}</span>
+              </div>
+              {item.description && (
+                <div className="ml-8 text-xs text-text-tertiary">
+                  {item.description}
+                </div>
+              )}
+            </button>
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+OptionList.displayName = 'OptionList'

package/registry/basic/pagination.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { ArrowLeftLine, ArrowRightLine } from './icons-inline'
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn('flex w-full justify-center', className)}
+    {...props}
+  />
+)
+Pagination.displayName = 'Pagination'
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      className={cn('flex flex-row flex-wrap items-center gap-2', className)}
+      {...props}
+    />
+  )
+)
+PaginationContent.displayName = 'PaginationContent'
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn('list-none', className)} {...props} />
+  )
+)
+PaginationItem.displayName = 'PaginationItem'
+
+export interface PaginationLinkProps extends React.ComponentProps<'a'> {
+  isActive?: boolean
+}
+
+const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+  ({ className, isActive, ...props }, ref) => (
+    <a
+      ref={ref}
+      aria-current={isActive ? 'page' : undefined}
+      className={cn(
+        'inline-flex min-w-9 h-9 items-center justify-center rounded-md border text-sm font-medium transition-colors',
+        'border-border-tertiary bg-bg-container text-text',
+        'hover:bg-fill-secondary hover:text-text hover:border-border-tertiary',
+        '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',
+        isActive && 'bg-fill-secondary border-border-tertiary text-text',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+PaginationLink.displayName = 'PaginationLink'
+
+export interface PaginationPreviousProps extends React.ComponentProps<'a'> {
+  text?: string
+}
+
+const PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationPreviousProps>(
+  ({ className, text = 'Previous', ...props }, ref) => (
+    <a
+      ref={ref}
+      aria-label="Go to previous page"
+      className={cn(
+        'inline-flex h-9 min-w-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium transition-colors',
+        'border-border-tertiary bg-bg-container text-text',
+        'hover:bg-fill-secondary hover:text-text hover:border-border-tertiary',
+        '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',
+        className
+      )}
+      {...props}
+    >
+      <ArrowLeftLine className="h-4 w-4 shrink-0" />
+      <span className="hidden sm:inline">{text}</span>
+    </a>
+  )
+)
+PaginationPrevious.displayName = 'PaginationPrevious'
+
+export interface PaginationNextProps extends React.ComponentProps<'a'> {
+  text?: string
+}
+
+const PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationNextProps>(
+  ({ className, text = 'Next', ...props }, ref) => (
+    <a
+      ref={ref}
+      aria-label="Go to next page"
+      className={cn(
+        'inline-flex h-9 min-w-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium transition-colors',
+        'border-border-tertiary bg-bg-container text-text',
+        'hover:bg-fill-secondary hover:text-text hover:border-border-tertiary',
+        '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',
+        className
+      )}
+      {...props}
+    >
+      <span className="hidden sm:inline">{text}</span>
+      <ArrowRightLine className="h-4 w-4 shrink-0" />
+    </a>
+  )
+)
+PaginationNext.displayName = 'PaginationNext'
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden
+    className={cn(
+      'flex h-9 w-9 shrink-0 items-center justify-center text-text-secondary',
+      className
+    )}
+    {...props}
+  >
+    &#8230;
+  </span>
+)
+PaginationEllipsis.displayName = 'PaginationEllipsis'
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationEllipsis,
+}

package/registry/basic/progress.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+import { cn } from '@/lib/utils'
+
+export interface ProgressProps
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,
+    'value'
+  > {
+  value?: number | null
+  max?: number
+  className?: string
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value, max = 100, ...rootProps }, ref) => {
+    const percent = value != null ? Math.min(max, Math.max(0, value)) : undefined
+    return (
+      <ProgressPrimitive.Root
+        ref={ref as React.RefObject<HTMLDivElement>}
+        value={percent ?? null}
+        max={max}
+        className={cn(
+          'relative h-1 w-full overflow-hidden rounded-full bg-fill-secondary',
+          className
+        )}
+        style={{ height: 4 }}
+        {...rootProps}
+      >
+        <ProgressPrimitive.Indicator
+          className="h-full rounded-full bg-success transition-[width] duration-200 ease-out"
+          style={{
+            width: percent != null ? `${(percent / max) * 100}%` : '0%',
+          }}
+        />
+      </ProgressPrimitive.Root>
+    )
+  }
+)
+Progress.displayName = 'Progress'
+
+export { Progress }

package/registry/basic/radio-group.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const rootVariants = cva('grid gap-2', {
+  variants: {
+    orientation: {
+      vertical: 'grid-flow-row',
+      horizontal: 'grid-flow-col auto-cols-max',
+    },
+  },
+  defaultVariants: { orientation: 'vertical' },
+})
+
+const itemVariants = cva(
+  'shrink-0 rounded-full border border-border-tertiary outline-offset-2 cursor-pointer transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-border disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-text data-[state=checked]:bg-text data-[state=checked]:text-bg-base',
+  {
+    variants: {
+      size: { sm: 'size-3.5', md: 'size-4', lg: 'size-5' },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
+const indicatorSizeMap: Record<'sm' | 'md' | 'lg', string> = {
+  sm: 'size-1.5',
+  md: 'size-2',
+  lg: 'size-2.5',
+}
+
+export interface RadioGroupProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, 'orientation'>,
+    VariantProps<typeof rootVariants> {}
+
+export interface RadioGroupItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+    VariantProps<typeof itemVariants> {}
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  RadioGroupProps
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <RadioGroupPrimitive.Root
+    ref={ref}
+    className={cn(rootVariants({ orientation, className }))}
+    orientation={orientation ?? 'vertical'}
+    {...props}
+  />
+))
+RadioGroup.displayName = 'RadioGroup'
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupItemProps
+>(({ className, size = 'md', ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(itemVariants({ size, className }))}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+      <span className={cn('rounded-full bg-current', indicatorSizeMap[size ?? 'md'])} />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+))
+RadioGroupItem.displayName = 'RadioGroupItem'
+
+export { RadioGroup, RadioGroupItem, rootVariants as radioGroupVariants, itemVariants as radioGroupItemVariants }

package/registry/basic/resizable.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { Group, Panel, Separator } from 'react-resizable-panels'
+import type { GroupProps, PanelProps, SeparatorProps } from 'react-resizable-panels'
+import { cn } from '@/lib/utils'
+
+export interface ResizablePanelGroupProps
+  extends Omit<GroupProps, 'orientation'> {
+  direction?: 'horizontal' | 'vertical'
+  className?: string
+}
+
+const ResizablePanelGroup = React.forwardRef<HTMLDivElement, ResizablePanelGroupProps>(
+  function ResizablePanelGroup({ direction = 'horizontal', className, ...props }, ref) {
+    return (
+      <Group
+        elementRef={ref}
+        orientation={direction}
+        className={cn('flex h-full w-full', direction === 'vertical' && 'flex-col', className)}
+        {...props}
+      />
+    )
+  }
+)
+ResizablePanelGroup.displayName = 'ResizablePanelGroup'
+
+export type ResizablePanelProps = PanelProps
+
+const ResizablePanel = React.forwardRef<HTMLDivElement, ResizablePanelProps>(
+  function ResizablePanel({ className, ...props }, ref) {
+    return <Panel elementRef={ref} className={cn(className)} {...props} />
+  }
+)
+ResizablePanel.displayName = 'ResizablePanel'
+
+export interface ResizableHandleProps extends SeparatorProps {
+  withHandle?: boolean
+  className?: string
+}
+
+const ResizableHandle = React.forwardRef<HTMLDivElement, ResizableHandleProps>(
+  function ResizableHandle({ withHandle = false, className, ...props }, ref) {
+    return (
+      <Separator
+        elementRef={ref}
+        className={cn(
+          'relative flex shrink-0 items-center justify-center bg-border-tertiary',
+          'after:absolute after:inset-0 after:transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
+          'data-[resize-handle-active]:bg-border-secondary',
+          'aria-[orientation=vertical]:h-full aria-[orientation=vertical]:w-px aria-[orientation=vertical]:cursor-col-resize',
+          'aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-row-resize',
+          '[&[aria-orientation=vertical]>div]:h-6 [&[aria-orientation=vertical]>div]:w-1',
+          '[&[aria-orientation=horizontal]>div]:h-1 [&[aria-orientation=horizontal]>div]:w-6',
+          className
+        )}
+        {...props}
+      >
+        {withHandle && (
+          <div className="z-10 shrink-0 rounded-lg bg-border-secondary" data-resize-handle />
+        )}
+      </Separator>
+    )
+  }
+)
+ResizableHandle.displayName = 'ResizableHandle'
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/registry/basic/scrollbar.tsx

@@ -0,0 +1,114 @@
+import { forwardRef, useId, useRef, useState, useCallback, useEffect } from 'react'
+import type { ReactNode, CSSProperties } from 'react'
+import { cn } from '@/lib/utils'
+
+export type ScrollbarVisibility = 'auto' | 'always' | 'hidden'
+
+export interface ScrollbarProps {
+  children: ReactNode
+  className?: string
+  style?: CSSProperties
+  maxHeight?: number | string
+  /** auto: 默认透明，滚动时与 hover 时可见；always: 始终可见；hidden: 隐藏 */
+  scrollbarVisibility?: ScrollbarVisibility
+  scrollbarWidth?: number
+}
+
+export const Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(
+  function Scrollbar(
+    {
+      children,
+      className,
+      style,
+      maxHeight,
+      scrollbarVisibility = 'auto',
+      scrollbarWidth = 6,
+    },
+    ref
+  ) {
+    const scrollId = useId().replace(/:/g, '')
+    const scrollClassName = `Scrollbar-${scrollId}`
+    const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const [isScrolling, setIsScrolling] = useState(false)
+
+    const handleScroll = useCallback(() => {
+      if (scrollbarVisibility !== 'auto') return
+      setIsScrolling(true)
+      if (scrollEndTimerRef.current) clearTimeout(scrollEndTimerRef.current)
+      scrollEndTimerRef.current = setTimeout(() => {
+        scrollEndTimerRef.current = null
+        setIsScrolling(false)
+      }, 800)
+    }, [scrollbarVisibility])
+
+    useEffect(() => {
+      return () => {
+        if (scrollEndTimerRef.current) clearTimeout(scrollEndTimerRef.current)
+      }
+    }, [])
+
+    const getScrollbarStyles = () => {
+      if (scrollbarVisibility === 'hidden') {
+        return `
+          .${scrollClassName}::-webkit-scrollbar { display: none; }
+          .${scrollClassName} { scrollbar-width: none; }
+        `
+      }
+      const isAuto = scrollbarVisibility === 'auto'
+      const thumbColor =
+        scrollbarVisibility === 'always'
+          ? 'var(--color-fill-secondary)'
+          : 'transparent'
+      const thumbHoverColor = 'var(--color-fill-secondary)'
+      const autoVisible = isAuto
+        ? `
+        .${scrollClassName}:hover::-webkit-scrollbar-thumb,
+        .${scrollClassName}.Scrollbar-isScrolling::-webkit-scrollbar-thumb {
+          background-color: ${thumbHoverColor};
+        }
+      `
+        : `
+        .${scrollClassName}:hover::-webkit-scrollbar-thumb {
+          background-color: ${thumbHoverColor};
+        }
+      `
+      return `
+        .${scrollClassName}::-webkit-scrollbar {
+          width: ${scrollbarWidth}px !important;
+          height: ${scrollbarWidth}px !important;
+        }
+        .${scrollClassName}::-webkit-scrollbar-track { background: transparent; }
+        .${scrollClassName}::-webkit-scrollbar-thumb {
+          background-color: ${thumbColor};
+          border-radius: ${Math.max(scrollbarWidth / 2, 2)}px;
+          min-height: var(--spacing-8);
+          transition: background-color 0.2s ease;
+        }
+        ${autoVisible}
+        .${scrollClassName}::-webkit-scrollbar-corner { background: transparent; }
+      `
+    }
+
+    const computedStyle: CSSProperties = { ...style, maxHeight }
+
+    return (
+      <>
+        <style>{getScrollbarStyles()}</style>
+        <div
+          ref={ref}
+          className={cn(
+            scrollClassName,
+            'overflow-y-auto',
+            isScrolling && 'Scrollbar-isScrolling',
+            className
+          )}
+          style={computedStyle}
+          onScroll={scrollbarVisibility === 'auto' ? handleScroll : undefined}
+        >
+          {children}
+        </div>
+      </>
+    )
+  }
+)
+Scrollbar.displayName = 'Scrollbar'