sparkdesign 0.4.5 → 0.4.7

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,59 @@
+import * as React from 'react'
+import { motion } from 'framer-motion'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { cn } from '@/lib/utils'
+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
+              initial={{ opacity: 0, y: 4 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.15, ease: [0.4, 0, 0.2, 1] }}
+            >
+              {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

@@ -25,7 +25,8 @@ const SelectTrigger = React.forwardRef<
     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',
+      '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 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',
       FOCUS_RESET,
       className
     )}

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/textarea.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...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,
+      )}
+      {...props}
+    />
+  ),
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }

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/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-folder-selector.tsx

@@ -13,7 +13,7 @@ import { FolderPermissionDialog } from './folder-permission-dialog'
 import { FolderLine, FolderFillLine, TimeLine } from '../../basic/icons-inline'
 import type { FolderPermissionConfig, InputPropsWithWebkitDirectory } from './types'
 
-const MOCK_HISTORY_FOLDERS = ['~/Projects/qoder-work-ui', '~/Documents/workspace', '~/Desktop/demo', '~/code/my-app']
+const MOCK_HISTORY_FOLDERS = ['~/Projects/spark-design-app', '~/Documents/workspace', '~/Desktop/demo', '~/code/my-app']
 
 const iconClass = 'mr-2 w-4 h-4 shrink-0'
 

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/chat-input/folder-permission-dialog.tsx

@@ -28,10 +28,10 @@ export function FolderPermissionDialog({
       <AlertDialogContent className="p-6">
         <AlertDialogHeader>
           <AlertDialogTitle className="text-xl leading-xl font-semibold text-text">
-            Allow Qoder Work to access and modify files in &quot;{projectName}&quot;?
+            Allow Spark Design to access and modify files in &quot;{projectName}&quot;?
           </AlertDialogTitle>
           <AlertDialogDescription className="mt-2 text-sm leading-sm text-text-tertiary">
-            This permission applies to all files and subfolders in this directory. Qoder Work may read, update, and
+            This permission applies to all files and subfolders in this directory. Spark Design may read, update, and
             permanently delete files here, and may share relevant file contents with connected tools when needed.
             Only allow access to folders you trust.
           </AlertDialogDescription>

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'