sparkdesign 0.4.7 → 0.4.9

package/cli/registry/basic/spinner.tsx

@@ -1,17 +1,32 @@
 import { forwardRef } from 'react'
 import type { HTMLAttributes } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 import { LoaderLine } from './icons-inline'
 
-export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
-  className?: string
-}
+const spinnerVariants = cva('animate-spin', {
+  variants: {
+    size: {
+      xs: 'size-3',
+      sm: 'size-3.5',
+      md: 'size-4',
+      lg: 'size-5',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export interface SpinnerProps
+  extends HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof spinnerVariants> {}
 
 export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, size = 'md', ...props }, ref) => (
     <span ref={ref} role="status" aria-label="Loading" {...props}>
-      <LoaderLine className={cn('size-4 animate-spin', className)} />
+      <LoaderLine className={cn(spinnerVariants({ size }), className)} />
     </span>
   )
 )
 Spinner.displayName = 'Spinner'
+
+export { spinnerVariants }

package/cli/registry/basic/textarea.tsx

@@ -1,25 +1,43 @@
 import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+const textareaVariants = cva(
+  [
+    'flex w-full rounded-lg border border-border-tertiary bg-bg-container text-text transition-colors',
+    'placeholder:text-text-tertiary',
+    'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
+    'focus:border-border-secondary focus-visible:border-border-secondary',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    'aria-invalid:border-error aria-invalid:ring-0',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        sm: 'min-h-12 px-2 py-1 text-xs',
+        md: 'min-h-16 px-3 py-2 text-sm',
+        lg: 'min-h-20 px-4 py-2.5 text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
+export interface TextareaProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,
+    VariantProps<typeof textareaVariants> {
+  size?: 'sm' | 'md' | 'lg'
+}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, size = 'md', ...props }, ref) => (
     <textarea
       ref={ref}
-      className={cn(
-        'flex min-h-16 w-full rounded-lg border border-border-tertiary bg-bg-container px-3 py-2 text-sm text-text transition-colors',
-        'placeholder:text-text-tertiary',
-        'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
-        'focus:border-border-secondary focus-visible:border-border-secondary',
-        'disabled:cursor-not-allowed disabled:opacity-50',
-        'aria-invalid:border-error aria-invalid:ring-0',
-        className,
-      )}
+      className={cn(textareaVariants({ size }), className)}
       {...props}
     />
   ),
 )
 Textarea.displayName = 'Textarea'
 
-export { Textarea }
+export { Textarea, textareaVariants }

package/cli/registry/basic/tooltip.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { motion } from 'framer-motion'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 import { cn } from '@/lib/utils'
+import { MOTION_SCALE_IN } from '@/lib/motion'
 import { getThemeFromDocument } from './theme-from-document'
 
 const TooltipProvider = TooltipPrimitive.Provider
@@ -36,7 +37,7 @@ const TooltipContent = React.forwardRef<
           )}
           {...props}
         >
-          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.15 }}>
+          <motion.div {...MOTION_SCALE_IN}>
             {children}
           </motion.div>
         </TooltipPrimitive.Content>

package/cli/registry/chat/chat-input/compound.tsx

@@ -208,6 +208,7 @@ export function ChatInputMoreButton() {
       icon={ctx.addLargeIcon ?? <MoreLine className="h-5 w-5" />}
       onClick={ctx.onMoreButtonClick}
       disabled={ctx.disabled}
+      aria-label="More actions"
     />
   )
 }

package/cli/registry/chat/user-question/compound.tsx

@@ -39,6 +39,7 @@ export function UserQuestionHeader({ className }: UserQuestionHeaderProps) {
             onClick={ctx.handlePrevious}
             disabled={ctx.currentQuestionIndex === 0}
             icon={ctx.arrowUpSIcon}
+            aria-label="Previous question"
           />
           <span className="text-xs leading-xs text-text-tertiary px-1">
             {ctx.currentQuestionIndex + 1} / {ctx.questions.length}
@@ -49,6 +50,7 @@ export function UserQuestionHeader({ className }: UserQuestionHeaderProps) {
             onClick={ctx.handleNext}
             disabled={ctx.currentQuestionIndex === ctx.questions.length - 1}
             icon={ctx.arrowDownSIcon}
+            aria-label="Next question"
           />
         </div>
       )}

package/cli/registry/meta.json

@@ -1,4 +1,17 @@
 {
+  "accordion": {
+    "files": [
+      "basic/accordion.tsx",
+      "basic/icons-inline.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-accordion"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "alert": {
     "files": [
       "basic/alert.tsx"
@@ -31,11 +44,13 @@
       "chat/ask-user-part.tsx",
       "basic/collapsible-card.tsx",
       "basic/icons-inline.tsx",
-      "basic/button.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx"
     ],
     "dependencies": [
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -67,6 +82,19 @@
       "react-dom"
     ]
   },
+  "badge": {
+    "files": [
+      "basic/badge.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-slot",
+      "class-variance-authority"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "breadcrumb": {
     "files": [
       "basic/breadcrumb.tsx",
@@ -84,13 +112,15 @@
       "basic/collapsible-card.tsx",
       "basic/icons-inline.tsx",
       "basic/button.tsx",
+      "basic/spinner.tsx",
       "basic/select.tsx",
       "basic/theme-from-document.ts"
     ],
     "dependencies": [
       "@radix-ui/react-select",
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -99,10 +129,13 @@
   },
   "button": {
     "files": [
-      "basic/button.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx"
     ],
     "dependencies": [
-      "class-variance-authority"
+      "class-variance-authority",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -124,11 +157,14 @@
   "calendar": {
     "files": [
       "basic/calendar.tsx",
-      "basic/button.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx"
     ],
     "dependencies": [
       "class-variance-authority",
       "lucide-react",
+      "radix-ui",
       "react-day-picker"
     ],
     "peerDependencies": [
@@ -140,7 +176,9 @@
     "files": [
       "basic/card.tsx"
     ],
-    "dependencies": [],
+    "dependencies": [
+      "class-variance-authority"
+    ],
     "peerDependencies": [
       "react",
       "react-dom"
@@ -149,12 +187,15 @@
   "carousel": {
     "files": [
       "basic/carousel.tsx",
-      "basic/button.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx"
     ],
     "dependencies": [
       "class-variance-authority",
       "embla-carousel-react",
-      "lucide-react"
+      "lucide-react",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -197,7 +238,8 @@
       "@radix-ui/react-alert-dialog",
       "@radix-ui/react-dropdown-menu",
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -275,9 +317,23 @@
   "combobox": {
     "files": [
       "basic/combobox.tsx",
-      "basic/input.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx",
+      "basic/command.tsx",
+      "basic/dialog.tsx",
+      "basic/theme-from-document.ts",
+      "basic/popover.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-popover",
+      "class-variance-authority",
+      "cmdk",
+      "framer-motion",
+      "lucide-react",
+      "radix-ui"
     ],
-    "dependencies": [],
     "peerDependencies": [
       "react",
       "react-dom"
@@ -347,9 +403,22 @@
   "date-picker": {
     "files": [
       "basic/date-picker.tsx",
-      "basic/input.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx",
+      "basic/calendar.tsx",
+      "basic/popover.tsx",
+      "basic/theme-from-document.ts"
+    ],
+    "dependencies": [
+      "@radix-ui/react-popover",
+      "class-variance-authority",
+      "date-fns",
+      "framer-motion",
+      "lucide-react",
+      "radix-ui",
+      "react-day-picker"
     ],
-    "dependencies": [],
     "peerDependencies": [
       "react",
       "react-dom"
@@ -413,6 +482,22 @@
       "react-dom"
     ]
   },
+  "ellipsis-text": {
+    "files": [
+      "basic/ellipsis-text.tsx",
+      "basic/tooltip.tsx",
+      "basic/theme-from-document.ts"
+    ],
+    "dependencies": [
+      "@radix-ui/react-tooltip",
+      "clsx",
+      "framer-motion"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "empty": {
     "files": [
       "basic/empty.tsx"
@@ -472,11 +557,13 @@
       "chat/file-review-part.tsx",
       "basic/collapsible-card.tsx",
       "basic/icons-inline.tsx",
-      "basic/button.tsx"
+      "basic/button.tsx",
+      "basic/spinner.tsx"
     ],
     "dependencies": [
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -497,6 +584,21 @@
       "react-dom"
     ]
   },
+  "form": {
+    "files": [
+      "basic/form.tsx",
+      "basic/label.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-label",
+      "@radix-ui/react-slot",
+      "react-hook-form"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "generated-images-grid": {
     "files": [
       "chat/generated-images-grid.tsx"
@@ -521,15 +623,17 @@
     "files": [
       "chat/hint-banner.tsx",
       "basic/button.tsx",
-      "basic/dropdown-menu.tsx",
+      "basic/spinner.tsx",
       "basic/icons-inline.tsx",
+      "basic/dropdown-menu.tsx",
       "basic/theme-from-document.ts",
       "basic/scrollbar.tsx"
     ],
     "dependencies": [
       "@radix-ui/react-dropdown-menu",
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -555,7 +659,8 @@
       "basic/icon-button.tsx"
     ],
     "dependencies": [
-      "class-variance-authority"
+      "class-variance-authority",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -569,7 +674,8 @@
       "basic/icon-button.tsx"
     ],
     "dependencies": [
-      "class-variance-authority"
+      "class-variance-authority",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -593,7 +699,9 @@
     "files": [
       "basic/input.tsx"
     ],
-    "dependencies": [],
+    "dependencies": [
+      "class-variance-authority"
+    ],
     "peerDependencies": [
       "react",
       "react-dom"
@@ -603,11 +711,14 @@
     "files": [
       "basic/input-group.tsx",
       "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx",
       "basic/input.tsx",
       "basic/textarea.tsx"
     ],
     "dependencies": [
-      "class-variance-authority"
+      "class-variance-authority",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -699,12 +810,14 @@
       "basic/collapsible-card.tsx",
       "basic/icons-inline.tsx",
       "basic/button.tsx",
+      "basic/spinner.tsx",
       "basic/scrollbar.tsx",
       "lib/use-mermaid-render.ts"
     ],
     "dependencies": [
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -764,11 +877,13 @@
     "files": [
       "chat/permission-card.tsx",
       "basic/button.tsx",
+      "basic/spinner.tsx",
       "basic/icons-inline.tsx",
       "basic/scrollbar.tsx"
     ],
     "dependencies": [
-      "class-variance-authority"
+      "class-variance-authority",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -781,11 +896,13 @@
       "basic/collapsible-card.tsx",
       "basic/icons-inline.tsx",
       "basic/button.tsx",
+      "basic/spinner.tsx",
       "basic/icon-button.tsx"
     ],
     "dependencies": [
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -830,7 +947,8 @@
     "dependencies": [
       "@radix-ui/react-tooltip",
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -958,7 +1076,8 @@
       "basic/theme-from-document.ts"
     ],
     "dependencies": [
-      "@radix-ui/react-select"
+      "@radix-ui/react-select",
+      "class-variance-authority"
     ],
     "peerDependencies": [
       "react",
@@ -1022,6 +1141,35 @@
       "react-dom"
     ]
   },
+  "sidebar": {
+    "files": [
+      "basic/sidebar.tsx",
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/icons-inline.tsx",
+      "basic/input.tsx",
+      "basic/separator.tsx",
+      "basic/sheet.tsx",
+      "basic/drawer.tsx",
+      "basic/theme-from-document.ts",
+      "basic/skeleton.tsx",
+      "basic/tooltip.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-separator",
+      "@radix-ui/react-slot",
+      "@radix-ui/react-tooltip",
+      "class-variance-authority",
+      "framer-motion",
+      "lucide-react",
+      "radix-ui"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "sidebar-menu": {
     "files": [
       "basic/sidebar-menu.tsx",
@@ -1063,12 +1211,27 @@
       "react-dom"
     ]
   },
+  "sonner": {
+    "files": [
+      "basic/sonner.tsx",
+      "basic/theme-from-document.ts"
+    ],
+    "dependencies": [
+      "sonner"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "spinner": {
     "files": [
       "basic/spinner.tsx",
       "basic/icons-inline.tsx"
     ],
-    "dependencies": [],
+    "dependencies": [
+      "class-variance-authority"
+    ],
     "peerDependencies": [
       "react",
       "react-dom"
@@ -1164,7 +1327,8 @@
     ],
     "dependencies": [
       "class-variance-authority",
-      "framer-motion"
+      "framer-motion",
+      "radix-ui"
     ],
     "peerDependencies": [
       "react",
@@ -1175,7 +1339,9 @@
     "files": [
       "basic/textarea.tsx"
     ],
-    "dependencies": [],
+    "dependencies": [
+      "class-variance-authority"
+    ],
     "peerDependencies": [
       "react",
       "react-dom"
@@ -1193,6 +1359,19 @@
       "react-dom"
     ]
   },
+  "toast": {
+    "files": [
+      "basic/sonner.tsx",
+      "basic/theme-from-document.ts"
+    ],
+    "dependencies": [
+      "sonner"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "toggle": {
     "files": [
       "basic/toggle.tsx"
@@ -1207,6 +1386,20 @@
       "react-dom"
     ]
   },
+  "toggle-group": {
+    "files": [
+      "basic/toggle.tsx"
+    ],
+    "dependencies": [
+      "@radix-ui/react-toggle",
+      "@radix-ui/react-toggle-group",
+      "class-variance-authority"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
+  },
   "tool-invocation-card": {
     "files": [
       "chat/tool-invocation-card.tsx",
@@ -1264,5 +1457,32 @@
       "react",
       "react-dom"
     ]
+  },
+  "user-question-part": {
+    "files": [
+      "chat/user-question/index.tsx",
+      "chat/user-question/context.tsx",
+      "basic/icons-inline.tsx",
+      "chat/user-question/types.ts",
+      "chat/user-question/compound.tsx",
+      "lib/utils.ts",
+      "basic/icon-button.tsx",
+      "basic/button.tsx",
+      "basic/spinner.tsx",
+      "basic/option-list.tsx",
+      "basic/scrollbar.tsx",
+      "chat/user-question/useUserQuestionKeyboard.ts"
+    ],
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "framer-motion",
+      "radix-ui",
+      "tailwind-merge"
+    ],
+    "peerDependencies": [
+      "react",
+      "react-dom"
+    ]
   }
 }

package/dist/registry/basic/accordion.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    chevronIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
+export type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+export type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    chevronIcon?: React.ReactNode;
+};
+export type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/registry/basic/alert-dialog.d.ts

@@ -17,7 +17,7 @@ declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPri
 declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
 declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const contentVariants: (props?: ({
-    size?: "sm" | "default" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>, VariantProps<typeof contentVariants> {
     size?: 'default' | 'sm';