sparkdesign 0.4.6 → 0.4.8

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,238 @@
+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 { MOTION_SCALE_IN } from '@/lib/motion'
+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
+            {...MOTION_SCALE_IN}
+          >
+            {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,84 @@
+import * as React from 'react'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from './button'
+import { Calendar } from './calendar'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+
+export interface DatePickerProps {
+  value?: Date
+  defaultValue?: Date
+  onChange?: (date: Date | undefined) => void
+  placeholder?: React.ReactNode
+  disabled?: boolean
+  className?: string
+  align?: 'start' | 'center' | 'end'
+  formatString?: string
+  id?: string
+  name?: string
+  'aria-label'?: string
+}
+
+function DatePicker({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = 'Pick a date',
+  disabled,
+  className,
+  align = 'start',
+  formatString = 'PPP',
+  id,
+  name,
+  'aria-label': ariaLabel,
+}: DatePickerProps) {
+  const isControlled = value !== undefined
+  const [internal, setInternal] = React.useState<Date | undefined>(defaultValue)
+  const [open, setOpen] = React.useState(false)
+  const selected = isControlled ? value : internal
+
+  const handleSelect = React.useCallback(
+    (next: Date | undefined) => {
+      if (!isControlled) setInternal(next)
+      onChange?.(next)
+      if (next) setOpen(false)
+    },
+    [isControlled, onChange],
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          variant="outline"
+          disabled={disabled}
+          aria-label={ariaLabel ?? (typeof placeholder === 'string' ? placeholder : 'Pick a date')}
+          className={cn(
+            'w-60 justify-start text-left font-normal',
+            !selected && 'text-text-tertiary',
+            className,
+          )}
+          suffixIcon={<CalendarIcon className="ml-auto size-4 opacity-60" />}
+        >
+          {selected ? format(selected, formatString) : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align={align}>
+        <Calendar
+          mode="single"
+          selected={selected}
+          onSelect={handleSelect}
+          autoFocus
+        />
+        {name ? (
+          <input type="hidden" name={name} value={selected ? selected.toISOString() : ''} />
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { DatePicker }