sparkdesign 0.4.5 → 0.4.7

package/cli/registry/basic/combobox.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Input } from './input'
+
+export interface ComboboxOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  options: ComboboxOption[]
+  value?: string
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  emptyText?: string
+}
+
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = 'Search...',
+  emptyText = 'No option found.',
+  className,
+  ...props
+}: ComboboxProps) {
+  const [query, setQuery] = React.useState('')
+  const selected = options.find((option) => option.value === value)
+  const filtered = options.filter((option) =>
+    option.label.toLowerCase().includes(query.toLowerCase()),
+  )
+
+  return (
+    <div className={cn('w-full rounded-lg border border-border-tertiary bg-bg-container p-1', className)} {...props}>
+      <Input
+        role="combobox"
+        aria-expanded="true"
+        value={query || selected?.label || ''}
+        onChange={(event) => setQuery(event.target.value)}
+        placeholder={placeholder}
+        className="border-0 bg-transparent shadow-none"
+      />
+      <div role="listbox" className="mt-1 max-h-60 overflow-auto rounded-md">
+        {filtered.length > 0 ? (
+          filtered.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              role="option"
+              aria-selected={option.value === value}
+              disabled={option.disabled}
+              className={cn(
+                'flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-text transition-colors',
+                'hover:bg-fill-secondary focus:bg-fill-secondary focus:outline-none',
+                'disabled:pointer-events-none disabled:opacity-50',
+                option.value === value && 'bg-fill-secondary',
+              )}
+              onClick={() => {
+                onValueChange?.(option.value)
+                setQuery('')
+              }}
+            >
+              {option.label}
+            </button>
+          ))
+        ) : (
+          <div className="px-3 py-2 text-sm text-text-tertiary">{emptyText}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export { Combobox }

package/cli/registry/basic/command.tsx

@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-bg-container text-text",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        hideCloseButton={!showCloseButton}
+      >
+        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-text-tertiary [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-text-tertiary disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-text [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-text-tertiary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-fill-secondary data-[selected=true]:text-text [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-text-tertiary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-text-tertiary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

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

@@ -0,0 +1,239 @@
+import * as React from 'react'
+import { motion } from 'framer-motion'
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { ArrowRightLine, CheckLine } from './icons-inline'
+import { getThemeFromDocument } from './theme-from-document'
+
+const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const contentClasses =
+  'z-50 min-w-32 overflow-hidden rounded-lg border border-border-tertiary bg-bg-container p-1 text-text shadow-lg outline-none'
+
+export interface ContextMenuContentProps
+  extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> {
+  dataStyle?: string
+  dataTheme?: string
+}
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  ContextMenuContentProps
+>(({ className, children, dataStyle, dataTheme, ...props }, ref) => {
+  const fromDoc = getThemeFromDocument()
+  const dataProps =
+    dataStyle !== undefined
+      ? { 'data-style': dataStyle, 'data-theme': dataTheme ?? fromDoc['data-theme'] ?? '' }
+      : fromDoc
+  return (
+    <ContextMenuPrimitive.Portal>
+      <div style={{ display: 'contents' }} {...dataProps}>
+        <ContextMenuPrimitive.Content
+          ref={ref}
+          className={cn(contentClasses, className)}
+          {...props}
+        >
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.12, ease: [0.4, 0, 0.2, 1] }}
+          >
+            {children}
+          </motion.div>
+        </ContextMenuPrimitive.Content>
+      </div>
+    </ContextMenuPrimitive.Portal>
+  )
+})
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const subTriggerVariants = cva(
+  'flex h-9 w-full cursor-pointer select-none items-center gap-2 rounded-sm px-3 text-sm outline-none hover:bg-fill-secondary focus:bg-fill-secondary data-[highlighted]:bg-fill-secondary data-[state=open]:bg-fill-secondary',
+  {
+    variants: { inset: { true: 'pl-8 pr-3', false: '' } },
+    defaultVariants: { inset: false },
+  },
+)
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> &
+    VariantProps<typeof subTriggerVariants>
+>(({ className, inset = false, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(subTriggerVariants({ inset }), className)}
+    {...props}
+  >
+    {children}
+    <span className="ml-auto flex h-4 w-4 items-center justify-center">
+      <ArrowRightLine className="h-4 w-4" />
+    </span>
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> & {
+    dataStyle?: string
+    dataTheme?: string
+  }
+>(({ className, dataStyle, dataTheme, ...props }, ref) => {
+  const fromDoc = getThemeFromDocument()
+  const dataProps =
+    dataStyle !== undefined
+      ? { 'data-style': dataStyle, 'data-theme': dataTheme ?? fromDoc['data-theme'] ?? '' }
+      : fromDoc
+  return (
+    <ContextMenuPrimitive.Portal>
+      <div style={{ display: 'contents' }} {...dataProps}>
+        <ContextMenuPrimitive.SubContent
+          ref={ref}
+          className={cn(contentClasses, className)}
+          {...props}
+        />
+      </div>
+    </ContextMenuPrimitive.Portal>
+  )
+})
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const itemVariants = cva(
+  'relative flex h-9 w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-sm px-3 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'hover:bg-fill-secondary focus:bg-fill-secondary focus:text-text data-[highlighted]:bg-fill-secondary data-[highlighted]:text-text',
+        destructive:
+          'text-error hover:bg-error-bg focus:bg-error-bg focus:text-error data-[highlighted]:bg-error-bg data-[highlighted]:text-error',
+      },
+      inset: { true: 'pl-8 pr-3', false: '' },
+    },
+    defaultVariants: { variant: 'default', inset: false },
+  },
+)
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> &
+    VariantProps<typeof itemVariants>
+>(({ className, inset = false, variant = 'default', ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(itemVariants({ variant, inset }), className)}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const itemIndicatorClasses =
+  'relative flex h-9 w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-sm pl-8 pr-3 text-sm outline-none hover:bg-fill-secondary focus:bg-fill-secondary focus:text-text data-[highlighted]:bg-fill-secondary data-[highlighted]:text-text data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...rest }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    checked={checked}
+    className={cn(itemIndicatorClasses, className)}
+    {...rest}
+  >
+    <span className="absolute left-2 top-1/2 flex h-3.5 w-3.5 -translate-y-1/2 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <CheckLine className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(itemIndicatorClasses, className)}
+    {...props}
+  >
+    <span className="absolute left-2 top-1/2 flex h-3.5 w-3.5 -translate-y-1/2 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <div className="h-2 w-2 rounded-full bg-primary" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const labelVariants = cva(
+  'flex h-9 items-center px-3 text-sm font-semibold text-text-secondary',
+  {
+    variants: { inset: { true: 'pl-8 pr-3', false: '' } },
+    defaultVariants: { inset: false },
+  },
+)
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> &
+    VariantProps<typeof labelVariants>
+>(({ className, inset = false, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(labelVariants({ inset }), className)}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn('my-1 mx-1 h-px bg-border-tertiary', className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut: React.FC<React.HTMLAttributes<HTMLSpanElement>> = ({
+  className,
+  ...props
+}) => (
+  <span
+    className={cn('ml-auto text-xs tracking-widest text-text-tertiary', className)}
+    {...props}
+  />
+)
+ContextMenuShortcut.displayName = 'ContextMenuShortcut'
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

package/cli/registry/basic/data-table.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table'
+
+export interface DataTableColumn<TData> {
+  key: string
+  header: React.ReactNode
+  cell?: (row: TData, index: number) => React.ReactNode
+  accessor?: keyof TData
+  className?: string
+}
+
+export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
+  columns: DataTableColumn<TData>[]
+  data: TData[]
+  emptyText?: React.ReactNode
+}
+
+function DataTable<TData extends Record<string, unknown>>({
+  columns,
+  data,
+  emptyText = 'No results.',
+  className,
+  ...props
+}: DataTableProps<TData>) {
+  return (
+    <div className={cn('w-full overflow-auto rounded-lg border border-border-tertiary', className)} {...props}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column) => (
+              <TableHead key={column.key} className={column.className}>
+                {column.header}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.length > 0 ? (
+            data.map((row, rowIndex) => (
+              <TableRow key={rowIndex}>
+                {columns.map((column) => (
+                  <TableCell key={column.key} className={column.className}>
+                    {column.cell
+                      ? column.cell(row, rowIndex)
+                      : column.accessor
+                        ? String(row[column.accessor] ?? '')
+                        : null}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center text-text-tertiary">
+                {emptyText}
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+export { DataTable }

package/cli/registry/basic/date-picker.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { Input, type InputProps } from './input'
+
+export interface DatePickerProps extends Omit<InputProps, 'type'> {
+  type?: 'date' | 'datetime-local' | 'month' | 'time' | 'week'
+}
+
+const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>(
+  ({ type = 'date', ...props }, ref) => <Input ref={ref} type={type} {...props} />,
+)
+DatePicker.displayName = 'DatePicker'
+
+export { DatePicker }