sparkdesign 0.4.6 → 0.4.8

package/cli/registry/basic/navigation-menu.tsx

@@ -0,0 +1,168 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-bg-base px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-fill-secondary hover:text-text focus:bg-fill-secondary focus:text-text focus-visible:ring-[3px] focus-visible:ring-primary-border/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-fill-secondary/50 data-[state=open]:text-text data-[state=open]:hover:bg-fill-secondary data-[state=open]:focus:bg-fill-secondary"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-bg-container group-data-[viewport=false]/navigation-menu:text-text group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-bg-container text-text shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-fill-secondary hover:text-text focus:bg-fill-secondary focus:text-text focus-visible:ring-[3px] focus-visible:ring-primary-border/50 focus-visible:outline-1 data-[active=true]:bg-fill-secondary/50 data-[active=true]:text-text data-[active=true]:hover:bg-fill-secondary data-[active=true]:focus:bg-fill-secondary [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-text-tertiary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}

package/cli/registry/basic/popover.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import { motion } from 'framer-motion'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { cn } from '@/lib/utils'
+import { MOTION_SCALE_IN } from '@/lib/motion'
+import { getThemeFromDocument } from './theme-from-document'
+
+const Popover = PopoverPrimitive.Root
+const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+export interface PopoverContentProps
+  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+  /** When provided (e.g. from ThemeStyleProvider), used for portal wrapper */
+  dataStyle?: string
+  dataTheme?: string
+}
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(
+  (
+    { className, align = 'center', sideOffset = 4, children, dataStyle, dataTheme, ...props },
+    ref,
+  ) => {
+    const fromDoc = getThemeFromDocument()
+    const dataProps =
+      dataStyle !== undefined
+        ? { 'data-style': dataStyle, 'data-theme': dataTheme ?? fromDoc['data-theme'] ?? '' }
+        : fromDoc
+    return (
+      <PopoverPrimitive.Portal>
+        <div style={{ display: 'contents' }} {...dataProps}>
+          <PopoverPrimitive.Content
+            ref={ref}
+            align={align}
+            sideOffset={sideOffset}
+            className={cn(
+              'z-50 w-72 rounded-lg border border-border-tertiary bg-bg-container p-4 text-sm text-text shadow-md outline-none',
+              className,
+            )}
+            {...props}
+          >
+            <motion.div
+              {...MOTION_SCALE_IN}
+            >
+              {children}
+            </motion.div>
+          </PopoverPrimitive.Content>
+        </div>
+      </PopoverPrimitive.Portal>
+    )
+  },
+)
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent }

package/cli/registry/basic/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-primary-border/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

package/cli/registry/basic/select.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 import { ArrowDownSLine, ArrowUpLine, CheckLine } from './icons-inline'
 import { getThemeFromDocument } from './theme-from-document'
@@ -12,20 +13,39 @@ const Select = SelectPrimitive.Root
 const SelectGroup = SelectPrimitive.Group
 const SelectValue = SelectPrimitive.Value
 
+const selectTriggerVariants = cva(
+  [
+    'flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-border-tertiary bg-bg-container text-text placeholder:text-muted-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+    'focus:border-border-secondary focus-visible:border-border-secondary data-[state=open]:border-border-secondary',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        sm: 'h-7 px-2 py-0.5 text-xs',
+        md: 'h-9 px-3 py-2 text-sm',
+        lg: 'h-11 px-4 py-2.5 text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+)
+
 export interface SelectTriggerProps
-  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'size'>,
+    VariantProps<typeof selectTriggerVariants> {
   triggerIcon?: React.ReactNode
+  size?: 'sm' | 'md' | 'lg'
 }
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
->(({ className, children, disabled, triggerIcon, ...props }, ref) => (
+>(({ className, children, disabled, triggerIcon, size = 'md', ...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',
+      selectTriggerVariants({ size }),
       FOCUS_RESET,
       className
     )}
@@ -174,4 +194,5 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
+  selectTriggerVariants,
 }

package/cli/registry/basic/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import { cn } from '@/lib/utils'
+
+export type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  SeparatorProps
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      'shrink-0 bg-border-tertiary',
+      'data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full',
+      'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+      className,
+    )}
+    {...props}
+  />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

package/cli/registry/basic/sheet.tsx

@@ -0,0 +1,18 @@
+export {
+  Drawer as Sheet,
+  DrawerTrigger as SheetTrigger,
+  DrawerClose as SheetClose,
+  DrawerPortal as SheetPortal,
+  DrawerOverlay as SheetOverlay,
+  DrawerContent as SheetContent,
+  DrawerHeader as SheetHeader,
+  DrawerFooter as SheetFooter,
+  DrawerTitle as SheetTitle,
+  DrawerDescription as SheetDescription,
+  drawerVariants as sheetVariants,
+} from './drawer'
+export type {
+  DrawerContentProps as SheetContentProps,
+  DrawerHeaderProps as SheetHeaderProps,
+  DrawerFooterProps as SheetFooterProps,
+} from './drawer'

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

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+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, size = 'md', ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(textareaVariants({ size }), className)}
+      {...props}
+    />
+  ),
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea, textareaVariants }

package/cli/registry/basic/toggle.tsx

@@ -1,5 +1,5 @@
 import { createContext, forwardRef, useContext } from 'react'
-import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import * as TogglePrimitive from '@radix-ui/react-toggle'
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
 import { cva, type VariantProps } from 'class-variance-authority'

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/basic/typography.tsx

@@ -119,7 +119,7 @@ function TypographyInlineCode({ className, ...props }: TypographyInlineCodeProps
   return (
     <code
       className={cn(
-        'relative rounded bg-fill-secondary px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-text',
+        'relative rounded bg-fill-secondary px-1 py-0.5 font-mono text-sm font-semibold text-text',
         className
       )}
       {...props}

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

@@ -56,7 +56,7 @@ export const ChatInputTextarea = forwardRef<HTMLTextAreaElement, ChatInputTextar
         placeholder={placeholder}
         disabled={disabled}
         rows={1}
-        className={textareaStyles}
+        className={[textareaStyles, className].filter(Boolean).join(' ')}
         {...props}
         style={{ ...(style ?? {}), ...textareaNoFocusStyle }}
       />

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

@@ -94,7 +94,7 @@ export interface ChatInputInputProps extends Omit<React.ComponentProps<typeof Ch
 }
 
 export const ChatInputInput = forwardRef<HTMLTextAreaElement, ChatInputInputProps>(
-  ({ placeholder = 'What can I help you with today?', maxRows = 6, ...props }, ref) => {
+  ({ placeholder, maxRows, ...props }, ref) => {
     const ctx = useChatInputContext()
     const setRef = useCallback(
       (node: HTMLTextAreaElement | null) => {
@@ -111,9 +111,9 @@ export const ChatInputInput = forwardRef<HTMLTextAreaElement, ChatInputInputProp
           value={ctx.value}
           onChange={ctx.onChange}
           onKeyDown={ctx.handleKeyDown}
-          placeholder={placeholder}
+          placeholder={placeholder ?? ctx.placeholder}
           disabled={ctx.disabled}
-          maxRows={maxRows}
+          maxRows={maxRows ?? ctx.maxRows}
           {...props}
         />
       </div>
@@ -264,6 +264,7 @@ export const ChatInputDefaultLayout = forwardRef<HTMLTextAreaElement, ChatInputD
     ref
   ) {
     const ctx = useChatInputContext()
+    void aboveOverlap
 
     const renderAttachments = () => {
     if (!hasAttachments || ctx.attachments == null || ctx.attachments === false) return null

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

@@ -11,6 +11,8 @@ export interface ChatInputContextValue {
   onChange: (value: string) => void
   onSend?: (value: string) => void
   disabled: boolean
+  placeholder: string
+  maxRows: number
   form?: string
   textareaRef: React.RefObject<HTMLTextAreaElement | null>
   setTextareaRef: (node: HTMLTextAreaElement | null) => void
@@ -87,7 +89,6 @@ export function ChatInputRootProvider({
   closeIcon,
   dataStyle,
   dataTheme,
-  className,
   children,
   ...rest
 }: ChatInputRootProps) {
@@ -144,6 +145,8 @@ export function ChatInputRootProvider({
     onChange: handleChange,
     onSend,
     disabled,
+    placeholder,
+    maxRows,
     form,
     textareaRef,
     setTextareaRef,

package/cli/registry/chat/code-block-part.tsx

@@ -1,7 +1,7 @@
 import { useMemo, type ReactNode } from 'react'
 import { motion } from 'framer-motion'
 import { cn } from '@/lib/utils'
-import { Highlight, Prism } from 'prism-react-renderer'
+import { Highlight } from 'prism-react-renderer'
 import { CollapsibleCard } from '../basic/collapsible-card'
 import { FileLine, LoaderLine } from '../basic/icons-inline'
 import { getFileIconColorClass } from '../lib/file-icon-maps'