@etus/ui 0.1.0

package/src/components/advanced/AssetManager/AssetManager.tsx

@@ -0,0 +1,928 @@
+"use client"
+
+import type {
+  Asset,
+  AssetFilter,
+  AssetManagerContextValue,
+  AssetManagerEmptyProps,
+  AssetManagerGridProps,
+  AssetManagerItemProps,
+  AssetManagerListProps,
+  AssetManagerProps,
+  AssetManagerSidebarProps,
+  AssetManagerToolbarProps,
+  AssetManagerUploaderProps,
+  AssetSort,
+  AssetView,
+} from "./AssetManager.types"
+
+import {
+  ChevronDownIcon,
+  FileIcon,
+  FileImageIcon,
+  FileTextIcon,
+  FileVideoIcon,
+  FolderOpenIcon,
+  GridIcon,
+  LayoutListIcon,
+  Loader2Icon,
+  SearchIcon,
+  Trash2Icon,
+  UploadCloudIcon,
+  XIcon,
+} from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import {
+  assetManagerContentVariants,
+  assetManagerEmptyVariants,
+  assetManagerGridVariants,
+  assetManagerItemInfoVariants,
+  assetManagerItemVariants,
+  assetManagerLoadingVariants,
+  assetManagerSidebarVariants,
+  assetManagerThumbnailVariants,
+  assetManagerToolbarVariants,
+  assetManagerUploaderVariants,
+  assetManagerVariants,
+} from "./AssetManager.variants"
+
+// ============================================
+// CONTEXT
+// ============================================
+
+const AssetManagerContext =
+  React.createContext<AssetManagerContextValue | null>(null)
+
+function useAssetManagerContext() {
+  const context = React.use(AssetManagerContext)
+  if (!context) {
+    throw new Error(
+      "AssetManager compound components must be used within an AssetManager component"
+    )
+  }
+  return context
+}
+
+// ============================================
+// UTILITIES
+// ============================================
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B"
+  const k = 1024
+  const sizes = ["B", "KB", "MB", "GB"] as const
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${String(Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)))} ${sizes[i] ?? "B"}`
+}
+
+function formatDate(date: Date): string {
+  return new Intl.DateTimeFormat("en-US", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(date)
+}
+
+function getAssetIcon(type: string) {
+  if (type.startsWith("image/")) {
+    return <FileImageIcon className="size-8 text-muted-foreground" />
+  }
+  if (type.startsWith("video/")) {
+    return <FileVideoIcon className="size-8 text-muted-foreground" />
+  }
+  if (type.startsWith("text/") || type.includes("document")) {
+    return <FileTextIcon className="size-8 text-muted-foreground" />
+  }
+  return <FileIcon className="size-8 text-muted-foreground" />
+}
+
+function filterAssets(assets: Asset[], filter: AssetFilter): Asset[] {
+  return assets.filter((asset) => {
+    // Search filter
+    if (filter.search) {
+      const searchLower = filter.search.toLowerCase()
+      if (!asset.name.toLowerCase().includes(searchLower)) {
+        return false
+      }
+    }
+
+    // Type filter
+    if (filter.types && filter.types.length > 0) {
+      const matchesType = filter.types.some((type) => {
+        if (type.endsWith("/*")) {
+          const baseType = type.replace("/*", "")
+          return asset.type.startsWith(baseType)
+        }
+        return asset.type === type
+      })
+      if (!matchesType) return false
+    }
+
+    // Date range filter
+    if (filter.dateRange) {
+      const assetDate = new Date(asset.createdAt)
+      if (filter.dateRange.start && assetDate < filter.dateRange.start) {
+        return false
+      }
+      if (filter.dateRange.end && assetDate > filter.dateRange.end) {
+        return false
+      }
+    }
+
+    return true
+  })
+}
+
+function sortAssets(assets: Asset[], sort: AssetSort): Asset[] {
+  return [...assets].sort((a, b) => {
+    let comparison = 0
+
+    switch (sort.field) {
+      case "name":
+        comparison = a.name.localeCompare(b.name)
+        break
+      case "size":
+        comparison = a.size - b.size
+        break
+      case "createdAt":
+        comparison =
+          new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+        break
+      case "updatedAt":
+        comparison =
+          new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
+        break
+    }
+
+    return sort.direction === "asc" ? comparison : -comparison
+  })
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+/**
+ * AssetManager - Advanced component for file and media management
+ *
+ * @example
+ * ```tsx
+ * <AssetManager
+ *   assets={assets}
+ *   selectedIds={selected}
+ *   onSelect={setSelected}
+ *   onUpload={handleUpload}
+ *   view="grid"
+ * />
+ * ```
+ */
+function AssetManager({
+  accept,
+  assets,
+  className,
+  emptyMessage = "No assets found",
+  loading = false,
+  maxSize,
+  multiple = true,
+  onDelete,
+  onSelect,
+  onUpload,
+  searchable = true,
+  selectedIds: selectedIdsProp,
+  showSidebar = true,
+  showUpload = true,
+  size,
+  sortable = true,
+  view: viewProp = "grid",
+  ...props
+}: AssetManagerProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const [internalSelectedIds, setInternalSelectedIds] = React.useState<
+    string[]
+  >([])
+  const [view, setView] = React.useState<AssetView>(viewProp)
+  const [filter, setFilter] = React.useState<AssetFilter>({})
+  const [sort, setSort] = React.useState<AssetSort>({
+    direction: "desc",
+    field: "createdAt",
+  })
+  const [isUploading, setIsUploading] = React.useState(false)
+
+  // Use controlled or uncontrolled mode for selection
+  const selectedIds = selectedIdsProp ?? internalSelectedIds
+  const isControlled = selectedIdsProp !== undefined
+
+  // Sync view prop with state - standard controlled/uncontrolled pattern
+  /* eslint-disable react-you-might-not-need-an-effect/no-derived-state, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
+  React.useEffect(() => {
+    setView(viewProp)
+  }, [viewProp])
+  /* eslint-enable react-you-might-not-need-an-effect/no-derived-state, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
+
+  const setSelectedIds = React.useCallback(
+    (ids: string[]) => {
+      if (!isControlled) {
+        setInternalSelectedIds(ids)
+      }
+      onSelect?.(ids)
+    },
+    [isControlled, onSelect]
+  )
+
+  // Filter and sort assets
+  const filteredAssets = React.useMemo(() => {
+    let result = filterAssets(assets, filter)
+    result = sortAssets(result, sort)
+    return result
+  }, [assets, filter, sort])
+
+  // Selection handlers
+  const selectAsset = React.useCallback(
+    (id: string) => {
+      if (multiple) {
+        setSelectedIds([...selectedIds, id])
+      } else {
+        setSelectedIds([id])
+      }
+    },
+    [multiple, selectedIds, setSelectedIds]
+  )
+
+  const toggleAsset = React.useCallback(
+    (id: string) => {
+      if (selectedIds.includes(id)) {
+        setSelectedIds(selectedIds.filter((i) => i !== id))
+      } else {
+        if (multiple) {
+          setSelectedIds([...selectedIds, id])
+        } else {
+          setSelectedIds([id])
+        }
+      }
+    },
+    [multiple, selectedIds, setSelectedIds]
+  )
+
+  const selectAll = React.useCallback(() => {
+    setSelectedIds(filteredAssets.map((a) => a.id))
+  }, [filteredAssets, setSelectedIds])
+
+  const clearSelection = React.useCallback(() => {
+    setSelectedIds([])
+  }, [setSelectedIds])
+
+  // File operations
+  const openFilePicker = React.useCallback(() => {
+    inputRef.current?.click()
+  }, [])
+
+  const uploadFiles = React.useCallback(
+    async (files: File[]) => {
+      if (!onUpload) return
+
+      setIsUploading(true)
+      try {
+        await onUpload(files)
+      } finally {
+        setIsUploading(false)
+      }
+    },
+    [onUpload]
+  )
+
+  const deleteSelected = React.useCallback(async () => {
+    if (!onDelete || selectedIds.length === 0) return
+
+    await onDelete(selectedIds)
+    clearSelection()
+  }, [onDelete, selectedIds, clearSelection])
+
+  const handleInputChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = event.target.files
+      if (files && files.length > 0) {
+        void uploadFiles([...files])
+      }
+      event.target.value = ""
+    },
+    [uploadFiles]
+  )
+
+  // Keyboard navigation
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === "Escape") {
+        clearSelection()
+      } else if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault()
+        selectAll()
+      } else if (event.key === "Delete" && selectedIds.length > 0) {
+        void deleteSelected()
+      }
+    },
+    [clearSelection, selectAll, deleteSelected, selectedIds]
+  )
+
+  const contextValue: AssetManagerContextValue = {
+    accept,
+    assets,
+    clearSelection,
+    deleteSelected,
+    filter,
+    filteredAssets,
+    loading: loading || isUploading,
+    maxSize,
+    multiple,
+    openFilePicker,
+    searchable,
+    selectAll,
+    selectAsset,
+    selectedIds,
+    setFilter,
+    setSort,
+    setView,
+    showSidebar,
+    showUpload,
+    sort,
+    sortable,
+    toggleAsset,
+    uploadFiles,
+    view,
+  }
+
+  const selectedAssets = assets.filter((a) => selectedIds.includes(a.id))
+
+  return (
+    <AssetManagerContext value={contextValue}>
+      <div
+        className={cn(assetManagerVariants({ size }), className)}
+        data-loading={loading || isUploading}
+        data-slot="asset-manager"
+        data-view={view}
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        <input
+          ref={inputRef}
+          accept={accept}
+          aria-hidden="true"
+          className="sr-only"
+          data-slot="asset-manager-input"
+          multiple={multiple}
+          tabIndex={-1}
+          type="file"
+          onChange={handleInputChange}
+        />
+
+        <AssetManagerToolbar />
+
+        <div
+          className={cn(
+            "flex flex-1 overflow-hidden",
+            assetManagerContentVariants({ hasSidebar: showSidebar && selectedAssets.length > 0 })
+          )}
+        >
+          <div className="flex-1 overflow-auto p-4">
+            {(loading || isUploading) && (
+              <div className={cn(assetManagerLoadingVariants())}>
+                <Loader2Icon className="size-8 animate-spin text-primary" />
+              </div>
+            )}
+
+            {filteredAssets.length === 0 && !loading && !isUploading ? (
+              showUpload && onUpload ? (
+                <AssetManagerUploader />
+              ) : (
+                <AssetManagerEmpty message={emptyMessage} />
+              )
+            ) : (
+              <AssetManagerGrid />
+            )}
+          </div>
+
+          {showSidebar && selectedAssets.length > 0 && (
+            <AssetManagerSidebar />
+          )}
+        </div>
+      </div>
+    </AssetManagerContext>
+  )
+}
+
+// ============================================
+// TOOLBAR COMPONENT
+// ============================================
+
+/**
+ * AssetManagerToolbar - Search, filter, and view controls
+ */
+function AssetManagerToolbar({ className, ...props }: AssetManagerToolbarProps) {
+  const {
+    clearSelection,
+    deleteSelected,
+    filter,
+    multiple,
+    openFilePicker,
+    searchable,
+    selectAll,
+    selectedIds,
+    setFilter,
+    setSort,
+    setView,
+    showUpload,
+    sort,
+    sortable,
+    view,
+  } = useAssetManagerContext()
+
+  const handleSearchChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setFilter({ ...filter, search: event.target.value })
+    },
+    [filter, setFilter]
+  )
+
+  const clearSearch = React.useCallback(() => {
+    setFilter({ ...filter, search: undefined })
+  }, [filter, setFilter])
+
+  return (
+    <div
+      className={cn(assetManagerToolbarVariants(), className)}
+      data-slot="asset-manager-toolbar"
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+        {searchable && (
+          <div className="relative">
+            <SearchIcon className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <input
+              aria-label="Search assets"
+              className="h-9 w-48 rounded-md border border-input bg-background pl-8 pr-8 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              placeholder="Search..."
+              type="search"
+              value={filter.search ?? ""}
+              onChange={handleSearchChange}
+            />
+            {filter.search && (
+              <button
+                aria-label="Clear search"
+                className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 hover:bg-muted"
+                type="button"
+                onClick={clearSearch}
+              >
+                <XIcon className="size-3.5" />
+              </button>
+            )}
+          </div>
+        )}
+
+        {sortable && (
+          <div className="relative">
+            <select
+              aria-label="Sort by"
+              className="h-9 appearance-none rounded-md border border-input bg-background pl-3 pr-8 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              value={`${sort.field}-${sort.direction}`}
+              onChange={(e) => {
+                const [field, direction] = e.target.value.split("-") as [
+                  "createdAt" | "name" | "size" | "updatedAt",
+                  "asc" | "desc"
+                ]
+                setSort({ field, direction })
+              }}
+            >
+              <option value="name-asc">Name A-Z</option>
+              <option value="name-desc">Name Z-A</option>
+              <option value="createdAt-desc">Newest first</option>
+              <option value="createdAt-asc">Oldest first</option>
+              <option value="size-desc">Largest first</option>
+              <option value="size-asc">Smallest first</option>
+            </select>
+            <ChevronDownIcon className="pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        {selectedIds.length > 0 && (
+          <>
+            <span className="text-sm text-muted-foreground">
+              {selectedIds.length} selected
+            </span>
+            {multiple && (
+              <button
+                className="h-8 rounded-md px-2 text-sm hover:bg-muted"
+                type="button"
+                onClick={selectAll}
+              >
+                Select all
+              </button>
+            )}
+            <button
+              className="h-8 rounded-md px-2 text-sm hover:bg-muted"
+              type="button"
+              onClick={clearSelection}
+            >
+              Clear
+            </button>
+            <button
+              aria-label="Delete selected"
+              className="h-8 rounded-md px-2 text-sm text-destructive hover:bg-destructive/10"
+              type="button"
+              onClick={() => {
+                void deleteSelected()
+              }}
+            >
+              <Trash2Icon className="size-4" />
+            </button>
+          </>
+        )}
+
+        <div className="flex items-center rounded-md border border-input">
+          <button
+            className={cn(
+              "h-8 w-8 rounded-l-md transition-colors",
+              view === "grid" ? "bg-muted" : "hover:bg-muted/50"
+            )}
+            aria-label="Grid view"
+            aria-pressed={view === "grid"}
+            type="button"
+            onClick={() => { setView("grid"); }}
+          >
+            <GridIcon className="mx-auto size-4" />
+          </button>
+          <button
+            className={cn(
+              "h-8 w-8 rounded-r-md border-l border-input transition-colors",
+              view === "list" ? "bg-muted" : "hover:bg-muted/50"
+            )}
+            aria-label="List view"
+            aria-pressed={view === "list"}
+            type="button"
+            onClick={() => { setView("list"); }}
+          >
+            <LayoutListIcon className="mx-auto size-4" />
+          </button>
+        </div>
+
+        {showUpload && (
+          <button
+            className="inline-flex h-9 items-center gap-2 rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+            type="button"
+            onClick={openFilePicker}
+          >
+            <UploadCloudIcon className="size-4" />
+            Upload
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ============================================
+// GRID VIEW COMPONENT
+// ============================================
+
+/**
+ * AssetManagerGrid - Grid/list view of assets
+ */
+function AssetManagerGrid({ className, ...props }: AssetManagerGridProps) {
+  const { filteredAssets, view } = useAssetManagerContext()
+
+  return (
+    <div
+      aria-label="Assets"
+      aria-multiselectable="true"
+      className={cn(assetManagerGridVariants({ view }), className)}
+      data-slot="asset-manager-grid"
+      role="listbox"
+      {...props}
+    >
+      {filteredAssets.map((asset) => (
+        <AssetManagerItem key={asset.id} asset={asset} />
+      ))}
+    </div>
+  )
+}
+
+// ============================================
+// LIST VIEW COMPONENT
+// ============================================
+
+/**
+ * AssetManagerList - Table-style list view (alias for grid with list view)
+ */
+function AssetManagerList({ className, ...props }: AssetManagerListProps) {
+  return <AssetManagerGrid className={className} {...props} />
+}
+
+// ============================================
+// ITEM COMPONENT
+// ============================================
+
+/**
+ * AssetManagerItem - Individual asset card/row
+ */
+function AssetManagerItem({ asset, className, ...props }: AssetManagerItemProps) {
+  const { selectedIds, toggleAsset, view } = useAssetManagerContext()
+  const isSelected = selectedIds.includes(asset.id)
+
+  const handleClick = React.useCallback(() => {
+    toggleAsset(asset.id)
+  }, [asset.id, toggleAsset])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault()
+        toggleAsset(asset.id)
+      }
+    },
+    [asset.id, toggleAsset]
+  )
+
+  const isImage = asset.type.startsWith("image/")
+  const thumbnailUrl = asset.thumbnailUrl ?? (isImage ? asset.url : undefined)
+
+  return (
+    <div
+      className={cn(
+        assetManagerItemVariants({ selected: isSelected, view }),
+        className
+      )}
+      aria-selected={isSelected}
+      data-slot="asset-manager-item"
+      role="option"
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      <div className={cn(assetManagerThumbnailVariants({ view }))}>
+        {thumbnailUrl ? (
+          <img
+            alt={asset.name}
+            className="size-full object-cover"
+            src={thumbnailUrl}
+          />
+        ) : (
+          getAssetIcon(asset.type)
+        )}
+      </div>
+
+      <div className={cn(assetManagerItemInfoVariants({ view }))}>
+        <p className="truncate text-sm font-medium">{asset.name}</p>
+        {view === "list" && (
+          <>
+            <p className="text-xs text-muted-foreground">
+              {formatFileSize(asset.size)}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {formatDate(new Date(asset.createdAt))}
+            </p>
+          </>
+        )}
+        {view !== "compact" && view !== "list" && (
+          <p className="truncate text-xs text-muted-foreground">
+            {formatFileSize(asset.size)}
+          </p>
+        )}
+      </div>
+
+      {isSelected && (
+        <div className="absolute right-2 top-2 size-5 rounded-full bg-primary text-primary-foreground">
+          <svg
+            className="size-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M5 13l4 4L19 7"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+            />
+          </svg>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// SIDEBAR COMPONENT
+// ============================================
+
+/**
+ * AssetManagerSidebar - Details panel for selected asset(s)
+ */
+function AssetManagerSidebar({ className, ...props }: AssetManagerSidebarProps) {
+  const { assets, selectedIds } = useAssetManagerContext()
+
+  const selectedAssets = assets.filter((a) => selectedIds.includes(a.id))
+  const asset = selectedAssets.length === 1 ? selectedAssets[0] : null
+
+  if (selectedAssets.length === 0) return null
+
+  return (
+    <div
+      className={cn(assetManagerSidebarVariants({ visible: true }), className)}
+      data-slot="asset-manager-sidebar"
+      {...props}
+    >
+      {selectedAssets.length === 1 && asset ? (
+        <div className="flex flex-col">
+          {/* Preview */}
+          <div className="flex aspect-video items-center justify-center bg-muted">
+            {asset.type.startsWith("image/") ? (
+              <img
+                alt={asset.name}
+                className="size-full object-contain"
+                src={asset.thumbnailUrl ?? asset.url}
+              />
+            ) : (
+              getAssetIcon(asset.type)
+            )}
+          </div>
+
+          {/* Details */}
+          <div className="space-y-3 p-4">
+            <div>
+              <h3 className="truncate font-medium">{asset.name}</h3>
+              <p className="text-xs text-muted-foreground">{asset.type}</p>
+            </div>
+
+            <dl className="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <dt className="text-muted-foreground">Size</dt>
+                <dd>{formatFileSize(asset.size)}</dd>
+              </div>
+              <div className="flex justify-between">
+                <dt className="text-muted-foreground">Created</dt>
+                <dd>{formatDate(new Date(asset.createdAt))}</dd>
+              </div>
+              <div className="flex justify-between">
+                <dt className="text-muted-foreground">Updated</dt>
+                <dd>{formatDate(new Date(asset.updatedAt))}</dd>
+              </div>
+            </dl>
+
+            {asset.metadata && Object.keys(asset.metadata).length > 0 && (
+              <div className="border-t pt-3">
+                <h4 className="mb-2 text-xs font-medium uppercase text-muted-foreground">
+                  Metadata
+                </h4>
+                <dl className="space-y-1 text-sm">
+                  {Object.entries(asset.metadata).map(([key, value]) => (
+                    <div key={key} className="flex justify-between">
+                      <dt className="text-muted-foreground">{key}</dt>
+                      <dd className="truncate">{String(value)}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center p-4 text-center">
+          <p className="text-sm font-medium">
+            {selectedAssets.length} items selected
+          </p>
+          <p className="text-xs text-muted-foreground">
+            Total size:{" "}
+            {formatFileSize(
+              selectedAssets.reduce((sum, a) => sum + a.size, 0)
+            )}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ============================================
+// UPLOADER COMPONENT
+// ============================================
+
+/**
+ * AssetManagerUploader - Drag and drop upload area
+ */
+function AssetManagerUploader({ className, ...props }: AssetManagerUploaderProps) {
+  const { accept, loading, maxSize, openFilePicker, uploadFiles } =
+    useAssetManagerContext()
+  const [isDragging, setIsDragging] = React.useState(false)
+
+  const handleDragOver = React.useCallback((event: React.DragEvent) => {
+    event.preventDefault()
+    setIsDragging(true)
+  }, [])
+
+  const handleDragLeave = React.useCallback((event: React.DragEvent) => {
+    event.preventDefault()
+    setIsDragging(false)
+  }, [])
+
+  const handleDrop = React.useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault()
+      setIsDragging(false)
+
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- dataTransfer.files can be null
+      if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
+        void uploadFiles([...event.dataTransfer.files])
+      }
+    },
+    [uploadFiles]
+  )
+
+  return (
+    <div
+      className={cn(
+        assetManagerUploaderVariants({ isDragging, disabled: loading }),
+        className
+      )}
+      data-dragging={isDragging}
+      data-slot="asset-manager-uploader"
+      role="button"
+      tabIndex={loading ? -1 : 0}
+      onClick={loading ? undefined : openFilePicker}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      onKeyDown={(e) => {
+        if (!loading && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault()
+          openFilePicker()
+        }
+      }}
+      {...props}
+    >
+      {loading ? (
+        <Loader2Icon className="size-12 animate-spin text-muted-foreground" />
+      ) : (
+        <FolderOpenIcon className="size-12 text-muted-foreground" />
+      )}
+      <p className="mt-2 text-sm font-medium">
+        {isDragging ? "Drop files here" : "Drag files here or click to upload"}
+      </p>
+      <p className="mt-1 text-xs text-muted-foreground">
+        {accept && `Accepted: ${accept}`}
+        {accept && maxSize && " • "}
+        {maxSize && `Max size: ${formatFileSize(maxSize)}`}
+      </p>
+    </div>
+  )
+}
+
+// ============================================
+// EMPTY STATE COMPONENT
+// ============================================
+
+/**
+ * AssetManagerEmpty - Empty state when no assets are found
+ */
+function AssetManagerEmpty({
+  className,
+  message = "No assets found",
+  ...props
+}: AssetManagerEmptyProps) {
+  return (
+    <div
+      className={cn(assetManagerEmptyVariants(), className)}
+      data-slot="asset-manager-empty"
+      {...props}
+    >
+      <FolderOpenIcon className="size-12 text-muted-foreground" />
+      <p className="mt-2 text-sm">{message}</p>
+    </div>
+  )
+}
+
+// ============================================
+// DISPLAY NAMES
+// ============================================
+
+AssetManager.displayName = "AssetManager"
+AssetManagerToolbar.displayName = "AssetManagerToolbar"
+AssetManagerGrid.displayName = "AssetManagerGrid"
+AssetManagerList.displayName = "AssetManagerList"
+AssetManagerItem.displayName = "AssetManagerItem"
+AssetManagerSidebar.displayName = "AssetManagerSidebar"
+AssetManagerUploader.displayName = "AssetManagerUploader"
+AssetManagerEmpty.displayName = "AssetManagerEmpty"
+
+export {
+  AssetManager,
+  AssetManagerEmpty,
+  AssetManagerGrid,
+  AssetManagerItem,
+  AssetManagerList,
+  AssetManagerSidebar,
+  AssetManagerToolbar,
+  AssetManagerUploader,
+}