@etus/ui 0.1.1 → 0.1.2

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

@@ -1,928 +0,0 @@
-"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,
-}