@nikala-ui/core 0.10.0 → 0.10.1-nightly.4e09f2a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikala-ui/core",
-  "version": "0.10.0",
+  "version": "0.10.1-nightly.4e09f2a",
   "description": "Core component definitions, design tokens, and registry for Nikala UI",
   "type": "module",
   "private": false,

package/registry/button-group.json

@@ -0,0 +1,20 @@
+{
+  "name": "button-group",
+  "title": "Button Group",
+  "description": "Groups related buttons into a connected horizontal or vertical control.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "ui/button-group.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface ButtonGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Controls whether grouped buttons are arranged in a row or column. */\n  orientation?: \"horizontal\" | \"vertical\";\n  class?: string;\n}\n\n/**\n * Groups adjacent buttons into a connected control with shared borders and radii.\n *\n * ButtonGroup is intentionally presentational. Use Button for individual actions\n * and compose the group with the same reactive state as the surrounding feature.\n */\nexport const ButtonGroup: Component<ButtonGroupProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"orientation\",\n    \"class\",\n    \"children\",\n  ]);\n\n  const orientation = () => local.orientation ?? \"horizontal\";\n\n  return (\n    <div\n      role=\"group\"\n      data-orientation={orientation()}\n      class={cn(\n        \"isolate inline-flex\",\n        orientation() === \"horizontal\"\n          ? \"flex-row [&>button:not(:first-child)]:-ml-px [&>button:not(:first-child)]:rounded-l-none [&>button:not(:last-child)]:rounded-r-none\"\n          : \"flex-col [&>button:not(:first-child)]:-mt-px [&>button:not(:first-child)]:rounded-t-none [&>button:not(:last-child)]:rounded-b-none\",\n        \"[&>button:focus-visible]:z-10\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </div>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/create-drop-zone.json

@@ -0,0 +1,13 @@
+{
+  "name": "create-drop-zone",
+  "title": "createDropZone",
+  "description": "SolidJS reactive primitive for file drag & drop operations, validation, and file chooser dialogs",
+  "type": "registry:hook",
+  "files": [
+    {
+      "path": "hooks/create-drop-zone.ts",
+      "content": "import { createSignal, onCleanup, onMount, type Accessor } from \"solid-js\";\n\nexport interface FileRejection {\n  file: File;\n  errors: Array<{\n    code: \"file-invalid-type\" | \"file-too-large\" | \"file-too-small\" | \"too-many-files\";\n    message: string;\n  }>;\n}\n\nexport interface CreateDropZoneOptions {\n  /** Accepted file types: MIME types (e.g. \"image/*\", \"application/pdf\") or extensions (e.g. \".png\", \".jpg\") */\n  accept?: string | string[];\n  /** Maximum number of files allowed */\n  maxFiles?: number;\n  /** Maximum file size in bytes */\n  maxSize?: number;\n  /** Minimum file size in bytes */\n  minSize?: number;\n  /** Whether multiple files are allowed. Defaults to true */\n  multiple?: boolean;\n  /** Whether the drop zone is disabled */\n  disabled?: boolean | Accessor<boolean>;\n  /** Prevents browser default behavior of opening files dropped outside dropzone. Defaults to true */\n  preventDropOnDocument?: boolean;\n  /** Callback fired when valid files are dropped */\n  onDrop?: (files: File[], event: DragEvent) => void;\n  /** Callback fired when some or all files fail validation */\n  onDropRejected?: (rejectedFiles: FileRejection[], event: DragEvent) => void;\n  /** Callback fired when drag enters the dropzone */\n  onDragEnter?: (event: DragEvent) => void;\n  /** Callback fired when drag leaves the dropzone */\n  onDragLeave?: (event: DragEvent) => void;\n  /** Callback fired when dragging over the dropzone */\n  onDragOver?: (event: DragEvent) => void;\n  /** Callback fired whenever accepted files list changes */\n  onFilesChanged?: (files: File[]) => void;\n}\n\nexport interface CreateDropZoneReturn {\n  /** Whether drag operation is currently active over the target drop zone */\n  isOver: Accessor<boolean>;\n  /** Whether files are currently being dragged anywhere on the window */\n  isDragging: Accessor<boolean>;\n  /** Currently accepted dropped files */\n  files: Accessor<File[]>;\n  /** Currently rejected files with error details */\n  rejectedFiles: Accessor<FileRejection[]>;\n  /** Clear all accepted and rejected files */\n  clear: () => void;\n  /** Programmatically set files (e.g. from an <input type=\"file\" /> change event) */\n  setFiles: (files: File[]) => void;\n  /** Programmatically open the native browser file selector dialog */\n  openFileDialog: () => void;\n  /** Ref callback to attach to target DOM element */\n  ref: (el: HTMLElement) => void;\n  /** Event handler props to spread directly onto target JSX element */\n  props: {\n    onDragEnter: (e: DragEvent) => void;\n    onDragLeave: (e: DragEvent) => void;\n    onDragOver: (e: DragEvent) => void;\n    onDrop: (e: DragEvent) => void;\n  };\n}\n\nfunction matchesAccept(file: File, acceptList: string[]): boolean {\n  if (acceptList.length === 0) return true;\n  const fileName = file.name.toLowerCase();\n  const fileType = file.type.toLowerCase();\n\n  return acceptList.some((pattern) => {\n    const p = pattern.trim().toLowerCase();\n    if (p.startsWith(\".\")) {\n      return fileName.endsWith(p);\n    }\n    if (p.endsWith(\"/*\")) {\n      const typePrefix = p.slice(0, -2);\n      return fileType.startsWith(typePrefix + \"/\");\n    }\n    return fileType === p;\n  });\n}\n\nfunction validateFiles(\n  incomingFiles: File[],\n  options: CreateDropZoneOptions\n): { accepted: File[]; rejected: FileRejection[] } {\n  const acceptList = options.accept\n    ? (Array.isArray(options.accept) ? options.accept : options.accept.split(\",\"))\n        .map((s) => s.trim())\n        .filter(Boolean)\n    : [];\n\n  const maxFiles = options.maxFiles ?? (options.multiple === false ? 1 : Infinity);\n  const maxSize = options.maxSize;\n  const minSize = options.minSize;\n\n  const accepted: File[] = [];\n  const rejected: FileRejection[] = [];\n\n  incomingFiles.forEach((file, index) => {\n    const errors: FileRejection[\"errors\"] = [];\n\n    if (index >= maxFiles) {\n      errors.push({\n        code: \"too-many-files\",\n        message: `Maximum allowed files is ${maxFiles}.`,\n      });\n    }\n\n    if (acceptList.length > 0 && !matchesAccept(file, acceptList)) {\n      errors.push({\n        code: \"file-invalid-type\",\n        message: `File type \"${file.type || file.name.split(\".\").pop()}\" is not allowed.`,\n      });\n    }\n\n    if (maxSize !== undefined && file.size > maxSize) {\n      errors.push({\n        code: \"file-too-large\",\n        message: `File size exceeds ${(maxSize / (1024 * 1024)).toFixed(1)}MB limit.`,\n      });\n    }\n\n    if (minSize !== undefined && file.size < minSize) {\n      errors.push({\n        code: \"file-too-small\",\n        message: `File size is below ${(minSize / 1024).toFixed(1)}KB limit.`,\n      });\n    }\n\n    if (errors.length > 0) {\n      rejected.push({ file, errors });\n    } else {\n      accepted.push(file);\n    }\n  });\n\n  return { accepted, rejected };\n}\n\n/**\n * SolidJS reactive primitive for managing file drag & drop zones with validation and file dialog support.\n *\n * @param options Configuration options for file acceptance, size limits, and callbacks.\n */\nexport function createDropZone(options: CreateDropZoneOptions = {}): CreateDropZoneReturn {\n  const [isOver, setIsOver] = createSignal(false);\n  const [isDragging, setIsDragging] = createSignal(false);\n  const [files, setFilesInternal] = createSignal<File[]>([]);\n  const [rejectedFiles, setRejectedFilesInternal] = createSignal<FileRejection[]>([]);\n\n  let dragCounter = 0;\n  let windowDragCounter = 0;\n  let targetElement: HTMLElement | null = null;\n\n  const isDisabled = () => {\n    if (typeof options.disabled === \"function\") {\n      return (options.disabled as Accessor<boolean>)();\n    }\n    return options.disabled ?? false;\n  };\n\n  const processFiles = (incomingFiles: File[], event: DragEvent) => {\n    const { accepted, rejected } = validateFiles(incomingFiles, options);\n\n    setFilesInternal(accepted);\n    setRejectedFilesInternal(rejected);\n\n    if (accepted.length > 0) {\n      options.onDrop?.(accepted, event);\n      options.onFilesChanged?.(accepted);\n    }\n\n    if (rejected.length > 0) {\n      options.onDropRejected?.(rejected, event);\n    }\n  };\n\n  const onDragEnter = (e: DragEvent) => {\n    if (isDisabled()) return;\n    e.preventDefault();\n    dragCounter++;\n    if (dragCounter === 1) {\n      setIsOver(true);\n      options.onDragEnter?.(e);\n    }\n  };\n\n  const onDragOver = (e: DragEvent) => {\n    if (isDisabled()) return;\n    e.preventDefault();\n    if (e.dataTransfer) {\n      e.dataTransfer.dropEffect = \"copy\";\n    }\n    options.onDragOver?.(e);\n  };\n\n  const onDragLeave = (e: DragEvent) => {\n    if (isDisabled()) return;\n    e.preventDefault();\n    dragCounter--;\n    if (dragCounter <= 0) {\n      dragCounter = 0;\n      setIsOver(false);\n      options.onDragLeave?.(e);\n    }\n  };\n\n  const onDrop = (e: DragEvent) => {\n    if (isDisabled()) return;\n    e.preventDefault();\n    dragCounter = 0;\n    setIsOver(false);\n\n    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {\n      processFiles(Array.from(e.dataTransfer.files), e);\n    }\n  };\n\n  const clear = () => {\n    setFilesInternal([]);\n    setRejectedFilesInternal([]);\n    options.onFilesChanged?.([]);\n  };\n\n  const setFiles = (newFiles: File[]) => {\n    const dummyEvent = new Event(\"drop\") as unknown as DragEvent;\n    processFiles(newFiles, dummyEvent);\n  };\n\n  const openFileDialog = () => {\n    if (typeof document === \"undefined\" || isDisabled()) return;\n    const input = document.createElement(\"input\");\n    input.type = \"file\";\n    if (options.multiple !== false && (options.maxFiles === undefined || options.maxFiles > 1)) {\n      input.multiple = true;\n    }\n    if (options.accept) {\n      input.accept = Array.isArray(options.accept) ? options.accept.join(\",\") : options.accept;\n    }\n    input.onchange = (e) => {\n      const target = e.target as HTMLInputElement;\n      if (target.files && target.files.length > 0) {\n        processFiles(Array.from(target.files), e as unknown as DragEvent);\n      }\n    };\n    input.click();\n  };\n\n  const ref = (el: HTMLElement) => {\n    targetElement = el;\n  };\n\n  // Window-level drag detection and document drop prevention\n  onMount(() => {\n    if (typeof window === \"undefined\") return;\n\n    const handleWindowDragEnter = (e: DragEvent) => {\n      windowDragCounter++;\n      if (windowDragCounter === 1) {\n        setIsDragging(true);\n      }\n    };\n\n    const handleWindowDragLeave = (e: DragEvent) => {\n      windowDragCounter--;\n      if (windowDragCounter <= 0) {\n        windowDragCounter = 0;\n        setIsDragging(false);\n      }\n    };\n\n    const handleWindowDrop = (e: DragEvent) => {\n      windowDragCounter = 0;\n      setIsDragging(false);\n      if (options.preventDropOnDocument !== false) {\n        e.preventDefault();\n      }\n    };\n\n    const handleWindowDragOver = (e: DragEvent) => {\n      if (options.preventDropOnDocument !== false) {\n        e.preventDefault();\n      }\n    };\n\n    window.addEventListener(\"dragenter\", handleWindowDragEnter);\n    window.addEventListener(\"dragleave\", handleWindowDragLeave);\n    window.addEventListener(\"dragover\", handleWindowDragOver);\n    window.addEventListener(\"drop\", handleWindowDrop);\n\n    onCleanup(() => {\n      window.removeEventListener(\"dragenter\", handleWindowDragEnter);\n      window.removeEventListener(\"dragleave\", handleWindowDragLeave);\n      window.removeEventListener(\"dragover\", handleWindowDragOver);\n      window.removeEventListener(\"drop\", handleWindowDrop);\n    });\n  });\n\n  return {\n    isOver,\n    isDragging,\n    files,\n    rejectedFiles,\n    clear,\n    setFiles,\n    openFileDialog,\n    ref,\n    props: {\n      onDragEnter,\n      onDragLeave,\n      onDragOver,\n      onDrop,\n    },\n  };\n}\n",
+      "type": "registry:hook"
+    }
+  ]
+}

package/registry/dropzone.json

@@ -0,0 +1,21 @@
+{
+  "name": "dropzone",
+  "title": "Dropzone",
+  "description": "A compound drag-and-drop file upload container with file list previews and validation feedback.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "lucide-solid"
+  ],
+  "registryDependencies": [
+    "create-drop-zone"
+  ],
+  "files": [
+    {
+      "path": "ui/dropzone.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\nimport { CloudUpload, FileText, X, AlertCircle } from \"lucide-solid\";\n\nexport interface DropzoneProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n  isOver?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * Root container for the Dropzone file upload component.\n */\nexport const Dropzone: Component<DropzoneProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"isOver\", \"disabled\"]);\n\n  return (\n    <div\n      class={cn(\n        \"group relative flex w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-card/50 p-8 text-center transition-all\",\n        \"hover:border-primary/50 hover:bg-card/80\",\n        local.isOver && \"border-primary bg-primary/5 ring-2 ring-primary/20\",\n        local.disabled && \"pointer-events-none opacity-50\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface DropzoneIconProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Centered icon placeholder for Dropzone.\n */\nexport const DropzoneIcon: Component<DropzoneIconProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        \"mb-3 flex size-12 items-center justify-center rounded-lg bg-primary/10 text-primary transition-transform group-hover:scale-105\",\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children || <CloudUpload class=\"size-6\" />}\n    </div>\n  );\n};\n\nexport interface DropzoneTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {\n  class?: string;\n}\n\n/**\n * Primary title text for the dropzone prompt.\n */\nexport const DropzoneTitle: Component<DropzoneTitleProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <h4\n      class={cn(\"text-sm font-semibold tracking-tight text-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface DropzoneDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {\n  class?: string;\n}\n\n/**\n * Subtitle description text for dropzone file specifications.\n */\nexport const DropzoneDescription: Component<DropzoneDescriptionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <p\n      class={cn(\"mt-1 text-xs text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface DropzoneFileListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n}\n\n/**\n * Container list for uploaded files.\n */\nexport const DropzoneFileList: Component<DropzoneFileListProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div\n      class={cn(\"mt-4 flex w-full flex-col gap-2\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface DropzoneFileItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n  name: string;\n  size?: string;\n  onRemove?: () => void;\n}\n\n/**\n * Individual uploaded file card with name, formatted size, and remove button.\n */\nexport const DropzoneFileItem: Component<DropzoneFileItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"name\", \"size\", \"onRemove\", \"children\"]);\n\n  return (\n    <div\n      class={cn(\n        \"flex items-center justify-between gap-3 rounded-md border border-border bg-card p-2.5 text-xs transition-colors\",\n        local.class\n      )}\n      {...rest}\n    >\n      <div class=\"flex min-w-0 items-center gap-2.5\">\n        <div class=\"flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground\">\n          {local.children || <FileText class=\"size-4\" />}\n        </div>\n        <div class=\"flex min-w-0 flex-col text-left\">\n          <span class=\"truncate font-medium text-foreground\">{local.name}</span>\n          {local.size && (\n            <span class=\"font-mono text-[11px] text-muted-foreground\">{local.size}</span>\n          )}\n        </div>\n      </div>\n\n      {local.onRemove && (\n        <button\n          type=\"button\"\n          onClick={(e) => {\n            e.stopPropagation();\n            local.onRemove?.();\n          }}\n          class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive\"\n          aria-label=\"Remove file\"\n        >\n          <X class=\"size-3.5\" />\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport interface DropzoneRejectedItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  class?: string;\n  name: string;\n  error?: string;\n  size?: string;\n}\n\n/**\n * Card for displaying rejected files and validation errors.\n */\nexport const DropzoneRejectedItem: Component<DropzoneRejectedItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"name\", \"error\", \"size\"]);\n\n  return (\n    <div\n      class={cn(\n        \"flex items-center justify-between gap-3 rounded-md border border-destructive/30 bg-destructive/10 p-2.5 text-xs text-destructive\",\n        local.class\n      )}\n      {...rest}\n    >\n      <div class=\"flex min-w-0 items-center gap-2\">\n        <AlertCircle class=\"size-4 shrink-0\" />\n        <span class=\"truncate font-medium\">{local.name}</span>\n        {local.size && <span class=\"font-mono text-[11px] opacity-80\">({local.size})</span>}\n      </div>\n      {local.error && (\n        <span class=\"shrink-0 text-[11px] font-medium\">{local.error}</span>\n      )}\n    </div>\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/registry/index.json

@@ -74,6 +74,19 @@
       "tailwind-merge"
     ]
   },
+  {
+    "name": "button-group",
+    "title": "Button Group",
+    "description": "Groups related buttons into a connected horizontal or vertical control.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "registryDependencies": [
+      "button"
+    ]
+  },
   {
     "name": "button",
     "title": "Button",
@@ -197,6 +210,20 @@
       "scroll-area"
     ]
   },
+  {
+    "name": "dropzone",
+    "title": "Dropzone",
+    "description": "A compound drag-and-drop file upload container with file list previews and validation feedback.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-solid"
+    ],
+    "registryDependencies": [
+      "create-drop-zone"
+    ]
+  },
   {
     "name": "empty",
     "title": "Empty",
@@ -513,6 +540,16 @@
       "tailwind-merge"
     ]
   },
+  {
+    "name": "table",
+    "title": "Table",
+    "description": "A responsive and accessible data table component with headers, rows, cells, and footer summaries.",
+    "type": "registry:ui",
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ]
+  },
   {
     "name": "tabs",
     "title": "Tabs",
@@ -823,5 +860,11 @@
     "title": "createScrollIntoView",
     "description": "SolidJS reactive primitive for scrolling a target element into view smooth or auto behavior",
     "type": "registry:hook"
+  },
+  {
+    "name": "create-drop-zone",
+    "title": "createDropZone",
+    "description": "SolidJS reactive primitive for file drag & drop operations, validation, and file chooser dialogs",
+    "type": "registry:hook"
   }
 ]

package/registry/table.json

@@ -0,0 +1,17 @@
+{
+  "name": "table",
+  "title": "Table",
+  "description": "A responsive and accessible data table component with headers, rows, cells, and footer summaries.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "ui/table.tsx",
+      "content": "import { splitProps, type Component, type JSX } from \"solid-js\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {\n  class?: string;\n}\n\n/**\n * Root Table container component wrapped in a responsive scroll container.\n */\nexport const Table: Component<TableProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <div class=\"relative w-full overflow-auto\">\n      <table\n        class={cn(\"w-full caption-bottom text-sm\", local.class)}\n        {...rest}\n      />\n    </div>\n  );\n};\n\nexport interface TableHeaderProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {\n  class?: string;\n}\n\n/**\n * Header section wrapper for the Table component.\n */\nexport const TableHeader: Component<TableHeaderProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <thead\n      class={cn(\"[&_tr]:border-b border-border\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableBodyProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {\n  class?: string;\n}\n\n/**\n * Main body section wrapper for the Table component.\n */\nexport const TableBody: Component<TableBodyProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <tbody\n      class={cn(\"[&_tr:last-child]:border-0\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableFooterProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {\n  class?: string;\n}\n\n/**\n * Footer section wrapper for the Table component.\n */\nexport const TableFooter: Component<TableFooterProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <tfoot\n      class={cn(\n        \"border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableRowProps extends JSX.HTMLAttributes<HTMLTableRowElement> {\n  class?: string;\n}\n\n/**\n * Table row component with hover highlight states.\n */\nexport const TableRow: Component<TableRowProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <tr\n      class={cn(\n        \"border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableHeadProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  class?: string;\n}\n\n/**\n * Header cell component for table columns.\n */\nexport const TableHead: Component<TableHeadProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <th\n      class={cn(\n        \"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  class?: string;\n}\n\n/**\n * Standard data cell component for table rows.\n */\nexport const TableCell: Component<TableCellProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <td\n      class={cn(\n        \"p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        local.class\n      )}\n      {...rest}\n    />\n  );\n};\n\nexport interface TableCaptionProps extends JSX.HTMLAttributes<HTMLTableCaptionElement> {\n  class?: string;\n}\n\n/**\n * Accessible table caption for describing table contents.\n */\nexport const TableCaption: Component<TableCaptionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <caption\n      class={cn(\"mt-4 text-xs text-muted-foreground pb-2\", local.class)}\n      {...rest}\n    />\n  );\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/src/registry/components/ui/button-group.tsx

@@ -0,0 +1,42 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface ButtonGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Controls whether grouped buttons are arranged in a row or column. */
+  orientation?: "horizontal" | "vertical";
+  class?: string;
+}
+
+/**
+ * Groups adjacent buttons into a connected control with shared borders and radii.
+ *
+ * ButtonGroup is intentionally presentational. Use Button for individual actions
+ * and compose the group with the same reactive state as the surrounding feature.
+ */
+export const ButtonGroup: Component<ButtonGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "orientation",
+    "class",
+    "children",
+  ]);
+
+  const orientation = () => local.orientation ?? "horizontal";
+
+  return (
+    <div
+      role="group"
+      data-orientation={orientation()}
+      class={cn(
+        "isolate inline-flex",
+        orientation() === "horizontal"
+          ? "flex-row [&>button:not(:first-child)]:-ml-px [&>button:not(:first-child)]:rounded-l-none [&>button:not(:last-child)]:rounded-r-none"
+          : "flex-col [&>button:not(:first-child)]:-mt-px [&>button:not(:first-child)]:rounded-t-none [&>button:not(:last-child)]:rounded-b-none",
+        "[&>button:focus-visible]:z-10",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};

package/src/registry/components/ui/dropzone.tsx

@@ -0,0 +1,189 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+import { CloudUpload, FileText, X, AlertCircle } from "lucide-solid";
+
+export interface DropzoneProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  isOver?: boolean;
+  disabled?: boolean;
+}
+
+/**
+ * Root container for the Dropzone file upload component.
+ */
+export const Dropzone: Component<DropzoneProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "isOver", "disabled"]);
+
+  return (
+    <div
+      class={cn(
+        "group relative flex w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-card/50 p-8 text-center transition-all",
+        "hover:border-primary/50 hover:bg-card/80",
+        local.isOver && "border-primary bg-primary/5 ring-2 ring-primary/20",
+        local.disabled && "pointer-events-none opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneIconProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Centered icon placeholder for Dropzone.
+ */
+export const DropzoneIcon: Component<DropzoneIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "mb-3 flex size-12 items-center justify-center rounded-lg bg-primary/10 text-primary transition-transform group-hover:scale-105",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children || <CloudUpload class="size-6" />}
+    </div>
+  );
+};
+
+export interface DropzoneTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+/**
+ * Primary title text for the dropzone prompt.
+ */
+export const DropzoneTitle: Component<DropzoneTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <h4
+      class={cn("text-sm font-semibold tracking-tight text-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+/**
+ * Subtitle description text for dropzone file specifications.
+ */
+export const DropzoneDescription: Component<DropzoneDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <p
+      class={cn("mt-1 text-xs text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneFileListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Container list for uploaded files.
+ */
+export const DropzoneFileList: Component<DropzoneFileListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("mt-4 flex w-full flex-col gap-2", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneFileItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  name: string;
+  size?: string;
+  onRemove?: () => void;
+}
+
+/**
+ * Individual uploaded file card with name, formatted size, and remove button.
+ */
+export const DropzoneFileItem: Component<DropzoneFileItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "name", "size", "onRemove", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "flex items-center justify-between gap-3 rounded-md border border-border bg-card p-2.5 text-xs transition-colors",
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="flex min-w-0 items-center gap-2.5">
+        <div class="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+          {local.children || <FileText class="size-4" />}
+        </div>
+        <div class="flex min-w-0 flex-col text-left">
+          <span class="truncate font-medium text-foreground">{local.name}</span>
+          {local.size && (
+            <span class="font-mono text-[11px] text-muted-foreground">{local.size}</span>
+          )}
+        </div>
+      </div>
+
+      {local.onRemove && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            local.onRemove?.();
+          }}
+          class="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+          aria-label="Remove file"
+        >
+          <X class="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export interface DropzoneRejectedItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  name: string;
+  error?: string;
+  size?: string;
+}
+
+/**
+ * Card for displaying rejected files and validation errors.
+ */
+export const DropzoneRejectedItem: Component<DropzoneRejectedItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "name", "error", "size"]);
+
+  return (
+    <div
+      class={cn(
+        "flex items-center justify-between gap-3 rounded-md border border-destructive/30 bg-destructive/10 p-2.5 text-xs text-destructive",
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="flex min-w-0 items-center gap-2">
+        <AlertCircle class="size-4 shrink-0" />
+        <span class="truncate font-medium">{local.name}</span>
+        {local.size && <span class="font-mono text-[11px] opacity-80">({local.size})</span>}
+      </div>
+      {local.error && (
+        <span class="shrink-0 text-[11px] font-medium">{local.error}</span>
+      )}
+    </div>
+  );
+};

package/src/registry/components/ui/table.tsx

@@ -0,0 +1,160 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {
+  class?: string;
+}
+
+/**
+ * Root Table container component wrapped in a responsive scroll container.
+ */
+export const Table: Component<TableProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div class="relative w-full overflow-auto">
+      <table
+        class={cn("w-full caption-bottom text-sm", local.class)}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+export interface TableHeaderProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {
+  class?: string;
+}
+
+/**
+ * Header section wrapper for the Table component.
+ */
+export const TableHeader: Component<TableHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <thead
+      class={cn("[&_tr]:border-b border-border", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface TableBodyProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {
+  class?: string;
+}
+
+/**
+ * Main body section wrapper for the Table component.
+ */
+export const TableBody: Component<TableBodyProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <tbody
+      class={cn("[&_tr:last-child]:border-0", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface TableFooterProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {
+  class?: string;
+}
+
+/**
+ * Footer section wrapper for the Table component.
+ */
+export const TableFooter: Component<TableFooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <tfoot
+      class={cn(
+        "border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableRowProps extends JSX.HTMLAttributes<HTMLTableRowElement> {
+  class?: string;
+}
+
+/**
+ * Table row component with hover highlight states.
+ */
+export const TableRow: Component<TableRowProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <tr
+      class={cn(
+        "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableHeadProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {
+  class?: string;
+}
+
+/**
+ * Header cell component for table columns.
+ */
+export const TableHead: Component<TableHeadProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <th
+      class={cn(
+        "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {
+  class?: string;
+}
+
+/**
+ * Standard data cell component for table rows.
+ */
+export const TableCell: Component<TableCellProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <td
+      class={cn(
+        "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableCaptionProps extends JSX.HTMLAttributes<HTMLTableCaptionElement> {
+  class?: string;
+}
+
+/**
+ * Accessible table caption for describing table contents.
+ */
+export const TableCaption: Component<TableCaptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <caption
+      class={cn("mt-4 text-xs text-muted-foreground pb-2", local.class)}
+      {...rest}
+    />
+  );
+};

package/src/registry/metadata.ts

@@ -16,6 +16,12 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
     registryDependencies: ["spinner"],
   },
+  "button-group": {
+    title: "Button Group",
+    description: "Groups related buttons into a connected horizontal or vertical control.",
+    dependencies: ["clsx", "tailwind-merge"],
+    registryDependencies: ["button"],
+  },
   input: {
     title: "Input",
     description: "A standard text input field with styling variants.",
@@ -271,6 +277,17 @@ export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
     description: "Profile and link preview popover triggered on hover, built on Kobalte primitives.",
     dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
   },
+  table: {
+    title: "Table",
+    description: "A responsive and accessible data table component with headers, rows, cells, and footer summaries.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  dropzone: {
+    title: "Dropzone",
+    description: "A compound drag-and-drop file upload container with file list previews and validation feedback.",
+    dependencies: ["clsx", "tailwind-merge", "lucide-solid"],
+    registryDependencies: ["create-drop-zone"],
+  },
 };
 
 /**
@@ -437,4 +454,8 @@ export const HOOK_METADATA: Record<string, ComponentMeta> = {
     title: "createScrollIntoView",
     description: "SolidJS reactive primitive for scrolling a target element into view smooth or auto behavior",
   },
+  "create-drop-zone": {
+    title: "createDropZone",
+    description: "SolidJS reactive primitive for file drag & drop operations, validation, and file chooser dialogs",
+  },
 };