sparkdesign 0.0.1 → 0.2.6

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

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

package/cli/registry/basic/switch.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const rootVariants = cva(
+  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full overflow-hidden border-2 border-transparent 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:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-fill-secondary',
+  {
+    variants: {
+      size: { md: 'h-5 w-9', lg: 'h-6 w-11' },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
+const thumbVariants = cva(
+  'pointer-events-none block rounded-full bg-text-on-primary ring-0 transition-transform data-[state=unchecked]:translate-x-0',
+  {
+    variants: {
+      size: {
+        md: 'h-4 w-4 data-[state=checked]:translate-x-4',
+        lg: 'h-5 w-5 data-[state=checked]:translate-x-4.5',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
+export interface SwitchProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, 'onChange'>,
+    VariantProps<typeof rootVariants> {
+  size?: 'md' | 'lg'
+}
+
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ className, size = 'md', disabled = false, ...rest }, ref) => (
+    <SwitchPrimitives.Root
+      ref={ref}
+      className={cn(rootVariants({ size }), className)}
+      disabled={disabled}
+      {...rest}
+    >
+      <SwitchPrimitives.Thumb className={thumbVariants({ size })} />
+    </SwitchPrimitives.Root>
+  )
+)
+Switch.displayName = 'Switch'
+
+export { Switch }