@etus/ui 0.4.0-beta.2 → 0.4.0-beta.3

package/dist/chunk-YCZ6M6EF.js

@@ -0,0 +1,912 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { Loader2Icon, SearchIcon, XIcon, ChevronDownIcon, Trash2Icon, GridIcon, LayoutListIcon, UploadCloudIcon, FolderOpenIcon, FileImageIcon, FileVideoIcon, FileTextIcon, FileIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var assetManagerVariants = cva(
+  // Base styles
+  [
+    "relative",
+    "flex flex-col",
+    "w-full h-full",
+    "bg-background",
+    "border border-border rounded-lg",
+    "overflow-hidden"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "min-h-72",
+        md: "min-h-96",
+        lg: "min-h-[var(--asset-manager-root-min-height-lg)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var assetManagerToolbarVariants = cva(
+  // Base styles
+  [
+    "flex items-center justify-between gap-4",
+    "px-4 py-2",
+    "bg-muted/50",
+    "border-b border-border"
+  ],
+  {
+    variants: {
+      position: {
+        top: "",
+        bottom: "border-t border-b-0"
+      }
+    },
+    defaultVariants: {
+      position: "top"
+    }
+  }
+);
+var assetManagerContentVariants = cva(
+  // Base styles
+  ["flex-1", "overflow-auto", "p-4"],
+  {
+    variants: {
+      hasSidebar: {
+        true: "pr-0",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      hasSidebar: false
+    }
+  }
+);
+var assetManagerGridVariants = cva(
+  // Base styles
+  ["grid", "gap-4"],
+  {
+    variants: {
+      view: {
+        grid: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
+        compact: "grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10",
+        list: "grid-cols-1"
+      }
+    },
+    defaultVariants: {
+      view: "grid"
+    }
+  }
+);
+var assetManagerItemVariants = cva(
+  // Base styles
+  [
+    "relative",
+    "group",
+    "flex flex-col",
+    "rounded-lg",
+    "border border-border",
+    "bg-card",
+    "overflow-hidden",
+    "cursor-pointer",
+    "transition-all duration-200",
+    "hover:border-primary/50 hover:shadow-sm",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  ],
+  {
+    variants: {
+      view: {
+        grid: "aspect-square",
+        compact: "aspect-square",
+        list: "flex-row items-center p-2 gap-3"
+      },
+      selected: {
+        true: [
+          "ring-2 ring-primary",
+          "border-primary",
+          "bg-primary/5"
+        ],
+        false: ""
+      }
+    },
+    defaultVariants: {
+      view: "grid",
+      selected: false
+    }
+  }
+);
+var assetManagerThumbnailVariants = cva(
+  // Base styles
+  [
+    "flex items-center justify-center",
+    "bg-muted",
+    "overflow-hidden"
+  ],
+  {
+    variants: {
+      view: {
+        grid: "flex-1 w-full",
+        compact: "flex-1 w-full",
+        list: "size-12 shrink-0 rounded"
+      }
+    },
+    defaultVariants: {
+      view: "grid"
+    }
+  }
+);
+var assetManagerItemInfoVariants = cva(
+  // Base styles
+  ["flex flex-col", "min-w-0"],
+  {
+    variants: {
+      view: {
+        grid: "p-2",
+        compact: "p-1",
+        list: "flex-1"
+      }
+    },
+    defaultVariants: {
+      view: "grid"
+    }
+  }
+);
+var assetManagerSidebarVariants = cva(
+  // Base styles
+  [
+    "flex flex-col",
+    "w-64",
+    "border-l border-border",
+    "bg-muted/30",
+    "overflow-auto"
+  ],
+  {
+    variants: {
+      visible: {
+        true: "",
+        false: "hidden"
+      }
+    },
+    defaultVariants: {
+      visible: true
+    }
+  }
+);
+var assetManagerUploaderVariants = cva(
+  // Base styles
+  [
+    "flex flex-col items-center justify-center",
+    "p-8",
+    "border-2 border-dashed border-input",
+    "rounded-lg",
+    "cursor-pointer",
+    "transition-colors duration-200",
+    "hover:border-primary/50"
+  ],
+  {
+    variants: {
+      isDragging: {
+        true: "border-primary bg-primary/5",
+        false: ""
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      isDragging: false,
+      disabled: false
+    }
+  }
+);
+var assetManagerEmptyVariants = cva(
+  // Base styles
+  [
+    "flex flex-col items-center justify-center",
+    "p-8",
+    "text-center",
+    "text-muted-foreground"
+  ],
+  {
+    variants: {}
+  }
+);
+var assetManagerLoadingVariants = cva(
+  // Base styles
+  [
+    "absolute inset-0",
+    "flex items-center justify-center",
+    "bg-background/80",
+    "z-10"
+  ],
+  {
+    variants: {}
+  }
+);
+var AssetManagerContext = React.createContext(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;
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  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) {
+  return new Intl.DateTimeFormat("en-US", {
+    dateStyle: "medium",
+    timeStyle: "short"
+  }).format(date);
+}
+function getAssetIcon(type) {
+  if (type.startsWith("image/")) {
+    return /* @__PURE__ */ jsx(FileImageIcon, { className: "size-8 text-muted-foreground" });
+  }
+  if (type.startsWith("video/")) {
+    return /* @__PURE__ */ jsx(FileVideoIcon, { className: "size-8 text-muted-foreground" });
+  }
+  if (type.startsWith("text/") || type.includes("document")) {
+    return /* @__PURE__ */ jsx(FileTextIcon, { className: "size-8 text-muted-foreground" });
+  }
+  return /* @__PURE__ */ jsx(FileIcon, { className: "size-8 text-muted-foreground" });
+}
+function filterAssets(assets, filter) {
+  return assets.filter((asset) => {
+    if (filter.search) {
+      const searchLower = filter.search.toLowerCase();
+      if (!asset.name.toLowerCase().includes(searchLower)) {
+        return false;
+      }
+    }
+    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;
+    }
+    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, sort) {
+  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;
+  });
+}
+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
+}) {
+  const inputRef = React.useRef(null);
+  const [internalSelectedIds, setInternalSelectedIds] = React.useState([]);
+  const [view, setView] = React.useState(viewProp);
+  const [filter, setFilter] = React.useState({});
+  const [sort, setSort] = React.useState({
+    direction: "desc",
+    field: "createdAt"
+  });
+  const [isUploading, setIsUploading] = React.useState(false);
+  const selectedIds = selectedIdsProp ?? internalSelectedIds;
+  const isControlled = selectedIdsProp !== void 0;
+  React.useEffect(() => {
+    setView(viewProp);
+  }, [viewProp]);
+  const setSelectedIds = React.useCallback(
+    (ids) => {
+      if (!isControlled) {
+        setInternalSelectedIds(ids);
+      }
+      onSelect?.(ids);
+    },
+    [isControlled, onSelect]
+  );
+  const filteredAssets = React.useMemo(() => {
+    let result = filterAssets(assets, filter);
+    result = sortAssets(result, sort);
+    return result;
+  }, [assets, filter, sort]);
+  const selectAsset = React.useCallback(
+    (id) => {
+      if (multiple) {
+        setSelectedIds([...selectedIds, id]);
+      } else {
+        setSelectedIds([id]);
+      }
+    },
+    [multiple, selectedIds, setSelectedIds]
+  );
+  const toggleAsset = React.useCallback(
+    (id) => {
+      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]);
+  const openFilePicker = React.useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+  const uploadFiles = React.useCallback(
+    async (files) => {
+      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) => {
+      const files = event.target.files;
+      if (files && files.length > 0) {
+        void uploadFiles([...files]);
+      }
+      event.target.value = "";
+    },
+    [uploadFiles]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      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 = {
+    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 /* @__PURE__ */ jsx(AssetManagerContext, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(assetManagerVariants({ size }), className),
+      "data-loading": loading || isUploading,
+      "data-slot": "asset-manager",
+      "data-view": view,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            accept,
+            "aria-hidden": "true",
+            className: "sr-only",
+            "data-slot": "asset-manager-input",
+            multiple,
+            tabIndex: -1,
+            type: "file",
+            onChange: handleInputChange
+          }
+        ),
+        /* @__PURE__ */ jsx(AssetManagerToolbar, {}),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-1 overflow-hidden",
+              assetManagerContentVariants({ hasSidebar: showSidebar && selectedAssets.length > 0 })
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-4", children: [
+                (loading || isUploading) && /* @__PURE__ */ jsx("div", { className: cn(assetManagerLoadingVariants()), children: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-8 animate-spin text-primary" }) }),
+                filteredAssets.length === 0 && !loading && !isUploading ? showUpload && onUpload ? /* @__PURE__ */ jsx(AssetManagerUploader, {}) : /* @__PURE__ */ jsx(AssetManagerEmpty, { message: emptyMessage }) : /* @__PURE__ */ jsx(AssetManagerGrid, {})
+              ] }),
+              showSidebar && selectedAssets.length > 0 && /* @__PURE__ */ jsx(AssetManagerSidebar, {})
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AssetManagerToolbar({ className, ...props }) {
+  const {
+    clearSelection,
+    deleteSelected,
+    filter,
+    multiple,
+    openFilePicker,
+    searchable,
+    selectAll,
+    selectedIds,
+    setFilter,
+    setSort,
+    setView,
+    showUpload,
+    sort,
+    sortable,
+    view
+  } = useAssetManagerContext();
+  const handleSearchChange = React.useCallback(
+    (event) => {
+      setFilter({ ...filter, search: event.target.value });
+    },
+    [filter, setFilter]
+  );
+  const clearSearch = React.useCallback(() => {
+    setFilter({ ...filter, search: void 0 });
+  }, [filter, setFilter]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(assetManagerToolbarVariants(), className),
+      "data-slot": "asset-manager-toolbar",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          searchable && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(SearchIcon, { className: "absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              "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 && /* @__PURE__ */ jsx(
+              "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,
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+              }
+            )
+          ] }),
+          sortable && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(
+              "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("-");
+                  setSort({ field, direction });
+                },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "name-asc", children: "Name A-Z" }),
+                  /* @__PURE__ */ jsx("option", { value: "name-desc", children: "Name Z-A" }),
+                  /* @__PURE__ */ jsx("option", { value: "createdAt-desc", children: "Newest first" }),
+                  /* @__PURE__ */ jsx("option", { value: "createdAt-asc", children: "Oldest first" }),
+                  /* @__PURE__ */ jsx("option", { value: "size-desc", children: "Largest first" }),
+                  /* @__PURE__ */ jsx("option", { value: "size-asc", children: "Smallest first" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          selectedIds.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+              selectedIds.length,
+              " selected"
+            ] }),
+            multiple && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "h-8 rounded-md px-2 text-sm hover:bg-muted",
+                type: "button",
+                onClick: selectAll,
+                children: "Select all"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "h-8 rounded-md px-2 text-sm hover:bg-muted",
+                type: "button",
+                onClick: clearSelection,
+                children: "Clear"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "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();
+                },
+                children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-input", children: [
+            /* @__PURE__ */ jsx(
+              "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");
+                },
+                children: /* @__PURE__ */ jsx(GridIcon, { className: "mx-auto size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "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");
+                },
+                children: /* @__PURE__ */ jsx(LayoutListIcon, { className: "mx-auto size-4" })
+              }
+            )
+          ] }),
+          showUpload && /* @__PURE__ */ jsxs(
+            "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,
+              children: [
+                /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4" }),
+                "Upload"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AssetManagerGrid({ className, ...props }) {
+  const { filteredAssets, view } = useAssetManagerContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": "Assets",
+      "aria-multiselectable": "true",
+      className: cn(assetManagerGridVariants({ view }), className),
+      "data-slot": "asset-manager-grid",
+      role: "listbox",
+      ...props,
+      children: filteredAssets.map((asset) => /* @__PURE__ */ jsx(AssetManagerItem, { asset }, asset.id))
+    }
+  );
+}
+function AssetManagerList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(AssetManagerGrid, { className, ...props });
+}
+function AssetManagerItem({ asset, className, ...props }) {
+  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) => {
+      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 : void 0);
+  return /* @__PURE__ */ jsxs(
+    "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,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn(assetManagerThumbnailVariants({ view })), children: thumbnailUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: asset.name,
+            className: "size-full object-cover",
+            src: thumbnailUrl
+          }
+        ) : getAssetIcon(asset.type) }),
+        /* @__PURE__ */ jsxs("div", { className: cn(assetManagerItemInfoVariants({ view })), children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: asset.name }),
+          view === "list" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatFileSize(asset.size) }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatDate(new Date(asset.createdAt)) })
+          ] }),
+          view !== "compact" && view !== "list" && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: formatFileSize(asset.size) })
+        ] }),
+        isSelected && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 size-5 rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "size-5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M5 13l4 4L19 7",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2"
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+function AssetManagerSidebar({ className, ...props }) {
+  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 /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(assetManagerSidebarVariants({ visible: true }), className),
+      "data-slot": "asset-manager-sidebar",
+      ...props,
+      children: selectedAssets.length === 1 && asset ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex aspect-video items-center justify-center bg-muted", children: asset.type.startsWith("image/") ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: asset.name,
+            className: "size-full object-contain",
+            src: asset.thumbnailUrl ?? asset.url
+          }
+        ) : getAssetIcon(asset.type) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "truncate font-medium", children: asset.name }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: asset.type })
+          ] }),
+          /* @__PURE__ */ jsxs("dl", { className: "space-y-2 text-sm", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Size" }),
+              /* @__PURE__ */ jsx("dd", { children: formatFileSize(asset.size) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Created" }),
+              /* @__PURE__ */ jsx("dd", { children: formatDate(new Date(asset.createdAt)) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Updated" }),
+              /* @__PURE__ */ jsx("dd", { children: formatDate(new Date(asset.updatedAt)) })
+            ] })
+          ] }),
+          asset.metadata && Object.keys(asset.metadata).length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-t pt-3", children: [
+            /* @__PURE__ */ jsx("h4", { className: "mb-2 text-xs font-medium uppercase text-muted-foreground", children: "Metadata" }),
+            /* @__PURE__ */ jsx("dl", { className: "space-y-1 text-sm", children: Object.entries(asset.metadata).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: key }),
+              /* @__PURE__ */ jsx("dd", { className: "truncate", children: String(value) })
+            ] }, key)) })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-4 text-center", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium", children: [
+          selectedAssets.length,
+          " items selected"
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          "Total size:",
+          " ",
+          formatFileSize(
+            selectedAssets.reduce((sum, a) => sum + a.size, 0)
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function AssetManagerUploader({ className, ...props }) {
+  const { accept, loading, maxSize, openFilePicker, uploadFiles } = useAssetManagerContext();
+  const [isDragging, setIsDragging] = React.useState(false);
+  const handleDragOver = React.useCallback((event) => {
+    event.preventDefault();
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = React.useCallback((event) => {
+    event.preventDefault();
+    setIsDragging(false);
+  }, []);
+  const handleDrop = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      setIsDragging(false);
+      if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
+        void uploadFiles([...event.dataTransfer.files]);
+      }
+    },
+    [uploadFiles]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        assetManagerUploaderVariants({ isDragging, disabled: loading }),
+        className
+      ),
+      "data-dragging": isDragging,
+      "data-slot": "asset-manager-uploader",
+      role: "button",
+      tabIndex: loading ? -1 : 0,
+      onClick: loading ? void 0 : openFilePicker,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      onKeyDown: (e) => {
+        if (!loading && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          openFilePicker();
+        }
+      },
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-12 animate-spin text-muted-foreground" }) : /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-12 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm font-medium", children: isDragging ? "Drop files here" : "Drag files here or click to upload" }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+          accept && `Accepted: ${accept}`,
+          accept && maxSize && " \u2022 ",
+          maxSize && `Max size: ${formatFileSize(maxSize)}`
+        ] })
+      ]
+    }
+  );
+}
+function AssetManagerEmpty({
+  className,
+  message = "No assets found",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(assetManagerEmptyVariants(), className),
+      "data-slot": "asset-manager-empty",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-12 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm", children: message })
+      ]
+    }
+  );
+}
+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, assetManagerContentVariants, assetManagerEmptyVariants, assetManagerGridVariants, assetManagerItemInfoVariants, assetManagerItemVariants, assetManagerLoadingVariants, assetManagerSidebarVariants, assetManagerThumbnailVariants, assetManagerToolbarVariants, assetManagerUploaderVariants, assetManagerVariants };
+//# sourceMappingURL=chunk-YCZ6M6EF.js.map
+//# sourceMappingURL=chunk-YCZ6M6EF.js.map