sparkdesign 0.0.1 → 0.2.6

package/cli/registry/basic/icons-inline.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react'
+
+const viewBox = '0 0 24 24'
+
+export interface InlineIconProps extends React.SVGAttributes<SVGSVGElement> {
+  className?: string
+  size?: number | string
+}
+
+const defaultSize = '1em'
+
+function createIcon(pathD: string, displayName: string) {
+  const Icon = React.forwardRef<SVGSVGElement, InlineIconProps>(
+    ({ className, size = defaultSize, ...props }, ref) => (
+      <svg
+        ref={ref}
+        viewBox={viewBox}
+        width={size}
+        height={size}
+        fill="currentColor"
+        className={className}
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden
+        {...props}
+      >
+        <path d={pathD} />
+      </svg>
+    )
+  )
+  Icon.displayName = displayName
+  return Icon
+}
+
+// Arrows（与 @ali/qoder-icon 一致；向下展开/折叠/下拉请用 ArrowDownSLine，勿用 ArrowDownLine）
+export const ArrowDownLine = createIcon(
+  'M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z',
+  'ArrowDownLine'
+)
+export const ArrowUpLine = createIcon(
+  'M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z',
+  'ArrowUpLine'
+)
+export const ArrowRightLine = createIcon(
+  'M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z',
+  'ArrowRightLine'
+)
+export const ArrowLeftLine = createIcon(
+  'M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z',
+  'ArrowLeftLine'
+)
+
+// Check
+export const CheckLine = createIcon(
+  'M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z',
+  'CheckLine'
+)
+
+// Close
+export const CloseLine = createIcon(
+  'M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z',
+  'CloseLine'
+)
+export const CloseLargeLine = createIcon(
+  'M10.5859 12L2.79297 4.20706L4.20718 2.79285L12.0001 10.5857L19.793 2.79285L21.2072 4.20706L13.4143 12L21.2072 19.7928L19.793 21.2071L12.0001 13.4142L4.20718 21.2071L2.79297 19.7928L10.5859 12Z',
+  'CloseLargeLine'
+)
+
+// Code / Eye (Switch segment, etc.)
+export const CodeSSlashLine = createIcon(
+  'M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z',
+  'CodeSSlashLine'
+)
+export const EyeLine = createIcon(
+  'M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z',
+  'EyeLine'
+)
+
+// Loader (Spinner) - bar style, use animate-spin on parent or className
+export const LoaderLine = createIcon(
+  'M11.9995 2C12.5518 2 12.9995 2.44772 12.9995 3V6C12.9995 6.55228 12.5518 7 11.9995 7C11.4472 7 10.9995 6.55228 10.9995 6V3C10.9995 2.44772 11.4472 2 11.9995 2ZM11.9995 17C12.5518 17 12.9995 17.4477 12.9995 18V21C12.9995 21.5523 12.5518 22 11.9995 22C11.4472 22 10.9995 21.5523 10.9995 21V18C10.9995 17.4477 11.4472 17 11.9995 17ZM20.6597 7C20.9359 7.47829 20.772 8.08988 20.2937 8.36602L17.6956 9.86602C17.2173 10.1422 16.6057 9.97829 16.3296 9.5C16.0535 9.02171 16.2173 8.41012 16.6956 8.13398L19.2937 6.63397C19.772 6.35783 20.3836 6.52171 20.6597 7ZM7.66935 14.5C7.94549 14.9783 7.78161 15.5899 7.30332 15.866L4.70525 17.366C4.22695 17.6422 3.61536 17.4783 3.33922 17C3.06308 16.5217 3.22695 15.9101 3.70525 15.634L6.30332 14.134C6.78161 13.8578 7.3932 14.0217 7.66935 14.5ZM20.6597 17C20.3836 17.4783 19.772 17.6422 19.2937 17.366L16.6956 15.866C16.2173 15.5899 16.0535 14.9783 16.3296 14.5C16.6057 14.0217 17.2173 13.8578 17.6956 14.134L20.2937 15.634C20.772 15.9101 20.9359 16.5217 20.6597 17ZM7.66935 9.5C7.3932 9.97829 6.78161 10.1422 6.30332 9.86602L3.70525 8.36602C3.22695 8.08988 3.06308 7.47829 3.33922 7C3.61536 6.52171 4.22695 6.35783 4.70525 6.63397L7.30332 8.13398C7.78161 8.41012 7.94549 9.02171 7.66935 9.5Z',
+  'LoaderLine'
+)
+
+// Chat: Send, Stop, Mic (Remix-style paths)
+export const SendPlaneLine = createIcon(
+  'M1.946 9.315c-.946-.35-.946-1.09 0-1.436l18.108-6.732c.946-.35 1.704.21 1.573 1.236L20.1 21.894c-.117.932-.93 1.636 1.897 1.636.967 0 1.754-.704 1.636-1.636l-.527-4.18L10 12 20.073 7.264l-.527-4.18c-.117-.932.67-1.636 1.637-1.636.967 0 2.014.704 1.897 1.636L21.627 18.57c-.131 1.026-.627 1.586-1.573 1.236L1.946 9.315Z',
+  'SendPlaneLine'
+)
+export const StopLine = createIcon(
+  'M6 6h12v12H6V6Zm2 2v8h8V8H8Z',
+  'StopLine'
+)
+export const MicLine = createIcon(
+  'M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3Zm0 14a5 5 0 0 0 5-5v-1a1 1 0 1 1 2 0v1a7 7 0 0 1-14 0v-1a1 1 0 1 1 2 0v1a5 5 0 0 0 5 5Z',
+  'MicLine'
+)
+// Folder (outline / fill)
+export const FolderLine = createIcon(
+  'M3 3h8.828l2 2H21a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm2 2v12h14V7h-8.414l-2-2H5Z',
+  'FolderLine'
+)
+export const FolderFillLine = createIcon(
+  'M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2Z',
+  'FolderFillLine'
+)
+
+// File (generic placeholder for FileAttachment / FileCard)
+export const FileLine = createIcon(
+  'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm4 18H6V4h7v5h5v11z',
+  'FileLine'
+)
+
+// Chat (RelatedPrompts)
+export const Chat3Line = createIcon(
+  'M12 2C6.477 2 2 6.477 2 12c0 1.5.328 2.932.917 4.215L1.5 21l4.785-1.417A9.966 9.966 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2zm0 2a8 8 0 1 1 0 16 7.99 7.99 0 0 1-3.918-1.018l-.26-.15-2.683.795.795-2.683-.15-.26A7.99 7.99 0 0 1 4 12a8 8 0 0 1 8-8z',
+  'Chat3Line'
+)
+// Warning
+export const WarningLine = createIcon(
+  'M12 7a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1zm0 10a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5z',
+  'WarningLine'
+)
+// Arrow down small（与 @ali/qoder-icon QoderArrowDownSLine 一致，用于展开/折叠/下拉）
+export const ArrowDownSLine = createIcon(
+  'M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z',
+  'ArrowDownSLine'
+)
+// Sparkling / AI
+export const SparklingLine = createIcon(
+  'M14 2l.5 2.5L17 5l-2.5.5L14 8l-.5-2.5L11 5l2.5-.5L14 2zM6 12l1 4 4 1 1-4-4-1-1-4zm8-2l.5 2.5 2.5.5-2.5.5-.5 2.5-.5-2.5-2.5-.5 2.5-.5.5-2.5z',
+  'SparklingLine'
+)
+// QueueIndicator / ToolInvocationCard
+export const TimeLine = createIcon(
+  'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm1 2v5.586l3.707 3.707-1.414 1.414L11 11.414V6h2z',
+  'TimeLine'
+)
+export const CheckboxCircleLine = createIcon(
+  'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm3.536 5.536l-4.95 4.95-2.121-2.122-1.414 1.414 3.535 3.536 6.364-6.364-1.414-1.414z',
+  'CheckboxCircleLine'
+)
+export const CloseCircleLine = createIcon(
+  'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm3.536 2.464l-1.414 1.414L12 10.586 9.878 8.464 8.464 9.878 10.586 12l-2.122 2.121 1.414 1.415L12 13.414l2.121 2.122 1.415-1.414L13.414 12l2.122-2.121z',
+  'CloseCircleLine'
+)
+// SidebarMenu / 更多操作（横排三点，与 QoderMoreLine 一致）
+export const MoreLine = createIcon(
+  'M6 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z',
+  'MoreLine'
+)
+// UserQuestionAnswer 问答
+export const QuestionAnswerLine = createIcon(
+  'M5.763 17H20V5H4v13.385L5.763 17zm.692 2L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455z',
+  'QuestionAnswerLine'
+)
+
+// Chat parts: FileReview, Task, Plan, Mermaid, Terminal, Browser, Question
+export const RequestChangesLine = createIcon(
+  'M7 14h10v2H7v-2zm0-4h10v2H7v-2zm0-4h10v2H7V6zm-4 12h2v2H3v-2zm0-4h2v2H3v-2zm0-4h2v2H3v-2zm0-4h2v2H3V6z',
+  'RequestChangesLine'
+)
+export const CatalogLine = createIcon(
+  'M3 5h2v2H3V5zm4 0h14v2H7V5zm-4 6h2v2H3v-2zm4 0h14v2H7v-2zm-4 6h2v2H3v-2zm4 0h14v2H7v-2z',
+  'CatalogLine'
+)
+export const CircleLine = createIcon(
+  'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16z',
+  'CircleLine'
+)
+export const IndeterminateCircleLine = createIcon(
+  'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm4 5v2H8V9h8z',
+  'IndeterminateCircleLine'
+)
+// TaskPart 进行中（圆内右箭头，面性；与 QoderArrowRightCircleFill 语义一致）
+export const ArrowRightCircleFillLine = createIcon(
+  'M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 10l-4-4v3H6v2h6v3l4-4z',
+  'ArrowRightCircleFillLine'
+)
+export const FileList2Line = createIcon(
+  'M3 4h14v2H3V4zm0 4h14v2H3V8zm0 4h10v2H3v-2zm0 4h8v2H3v-2z',
+  'FileList2Line'
+)
+export const DownloadLine = createIcon(
+  'M13 10h5l-6 6-6-6h5V3h2v7zM4 19h16v2H4v-2z',
+  'DownloadLine'
+)
+export const QuestionnaireLine = createIcon(
+  'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm1 5v6h-2V9h2zm0-4v2h-2V6h2z',
+  'QuestionnaireLine'
+)
+export const TerminalBoxLine = createIcon(
+  'M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm2 2v12h14V5H5zm2 2h2v2H7V7zm4 0h6v2h-6V7zm-4 4h2v2H7v-2zm4 0h6v2h-6v-2z',
+  'TerminalBoxLine'
+)
+export const ExternalLinkLine = createIcon(
+  'M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z',
+  'ExternalLinkLine'
+)
+export const GlobalLine = createIcon(
+  'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm1 2.05v1.9c.93.13 1.8.44 2.57.9L14.5 7.2c-.55-.36-1.15-.65-1.78-.9L13 6.05zM6.05 11H4.1c.13.93.44 1.8.9 2.57L7.2 9.5c-.36-.55-.65-1.15-.9-1.78L6.05 11zm1.25 4.5L4.6 16.33c.77.57 1.64.88 2.57 1.01v1.9c.63-.25 1.23-.54 1.78-.9L7.3 15.5zm7.4 0c.55.36 1.15.65 1.78.9v1.9a8.1 8.1 0 0 1-2.57-.9L16.8 15.5l-1.25-1.25zM17.9 13h-1.95c-.25-.63-.54-1.23-.9-1.78L16.8 14.5c.57.77.88 1.64 1.01 2.57zm-5.4-5.4c-.36.55-.65 1.15-.9 1.78H6.05c.13-.93.44-1.8.9-2.57L9.5 7.2l1.25 1.25zm-.9 6.8l1.25 1.25c.77-.57 1.64-.88 2.57-1.01v1.95c-.63.25-1.23.54-1.78.9L9.5 16.8zm4.5-4.5l1.25 1.25L16.8 9.5c-.36-.55-.65-1.15-.9-1.78h1.95c.13.93.44 1.8.9 2.57z',
+  'GlobalLine'
+)
+export const Forbid2Line = createIcon(
+  'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm3.536 2.464l-9.072 9.072a8 8 0 0 1 9.072-9.072zM8.464 17.536a8 8 0 0 1 9.072-9.072l-9.072 9.072z',
+  'Forbid2Line'
+)

package/cli/registry/basic/kbd.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export type KbdProps = React.ComponentProps<'kbd'>
+
+function Kbd({ className, ...props }: KbdProps) {
+  return (
+    <kbd
+      className={cn(
+        'pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 !font-sans text-xs font-medium',
+        'bg-fill-secondary text-text-secondary',
+        '[.tooltip-content_&]:bg-bg-highlight-hover [.tooltip-content_&]:text-text-on-primary',
+        'dark:[.tooltip-content_&]:bg-[color:var(--color-bg-base)]/10 dark:[.tooltip-content_&]:text-[var(--color-bg-base)]',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+Kbd.displayName = 'Kbd'
+
+export interface KbdGroupProps extends React.ComponentProps<'span'> {
+  separator?: React.ReactNode
+}
+
+function KbdGroup({
+  className,
+  children,
+  separator = '+',
+  ...props
+}: KbdGroupProps) {
+  const items = React.Children.toArray(children)
+  return (
+    <span className={cn('inline-flex items-center gap-1', className)} {...props}>
+      {items.map((child, index) => (
+        <React.Fragment key={index}>
+          {child}
+          {index < items.length - 1 && (
+            <span className="select-none !font-sans text-xs font-medium text-text-secondary">
+              {separator}
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+    </span>
+  )
+}
+KbdGroup.displayName = 'KbdGroup'
+
+export { Kbd, KbdGroup }

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