@btst/stack 2.8.1 → 2.9.0

package/dist/packages/stack/src/plugins/media/client/components/media-picker/folder-tree.cjs

@@ -0,0 +1,171 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const useMedia = require('../../hooks/use-media.cjs');
+const LucideIcons = require('lucide-react');
+const input = require('../../../../../../../ui/src/components/input.cjs');
+const utils = require('../../../../../../../ui/src/lib/utils.cjs');
+
+function FolderTree({
+  selectedId,
+  onSelect
+}) {
+  const { data: rootFoldersRaw = [] } = useMedia.useFolders(null);
+  const rootFolders = rootFoldersRaw;
+  const [newFolderName, setNewFolderName] = React.useState("");
+  const [isCreating, setIsCreating] = React.useState(false);
+  const { mutateAsync: createFolder } = useMedia.useCreateFolder();
+  const { mutateAsync: deleteFolder } = useMedia.useDeleteFolder();
+  const handleCreateFolder = async () => {
+    const name = newFolderName.trim();
+    if (!name) return;
+    try {
+      await createFolder({ name, parentId: selectedId ?? void 0 });
+      setNewFolderName("");
+      setIsCreating(false);
+    } catch (err) {
+      console.error("[btst/media] Failed to create folder", err);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-2 py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Folders" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          title: "New folder",
+          onClick: () => setIsCreating((v) => !v),
+          className: "rounded p-0.5 hover:bg-muted",
+          children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.FolderPlus, { className: "size-3.5 text-muted-foreground" })
+        }
+      )
+    ] }),
+    isCreating && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 px-2 pb-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        input.Input,
+        {
+          autoFocus: true,
+          value: newFolderName,
+          onChange: (e) => setNewFolderName(e.target.value),
+          placeholder: "Folder name",
+          className: "h-6 text-xs",
+          onKeyDown: (e) => {
+            if (e.key === "Enter") void handleCreateFolder();
+            if (e.key === "Escape") setIsCreating(false);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCreateFolder,
+          className: "rounded px-1 py-0.5 text-xs hover:bg-muted",
+          children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { className: "size-3" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto overscroll-contain", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect(null),
+          className: utils.cn(
+            "flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-sm hover:bg-muted",
+            selectedId === null && "bg-muted font-medium"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-3" }),
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Folder, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: "All files" })
+          ]
+        }
+      ),
+      rootFolders.map((folder) => /* @__PURE__ */ jsxRuntime.jsx(
+        FolderTreeItem,
+        {
+          folder,
+          selectedId,
+          onSelect
+        },
+        folder.id
+      ))
+    ] }),
+    selectedId && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t px-2 py-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: async () => {
+          if (confirm("Delete this folder? Assets inside will be unaffected.")) {
+            try {
+              await deleteFolder(selectedId);
+              onSelect(null);
+            } catch (err) {
+              console.error("[btst/media] Failed to delete folder", err);
+            }
+          }
+        },
+        className: "flex items-center gap-1 text-xs text-destructive hover:underline",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "size-3" }),
+          "Delete folder"
+        ]
+      }
+    ) })
+  ] });
+}
+function FolderTreeItem({
+  folder,
+  selectedId,
+  onSelect,
+  depth = 0
+}) {
+  const [expanded, setExpanded] = React.useState(false);
+  const { data: children = [] } = useMedia.useFolders(folder.id);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onSelect(folder.id);
+          setExpanded((v) => !v);
+        },
+        className: utils.cn(
+          "flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-sm hover:bg-muted",
+          selectedId === folder.id && "bg-muted font-medium"
+        ),
+        style: { paddingLeft: `${8 + depth * 12}px` },
+        children: [
+          children.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            LucideIcons.ChevronRight,
+            {
+              className: utils.cn(
+                "size-3 shrink-0 transition-transform",
+                expanded && "rotate-90"
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-3" }),
+          expanded ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.FolderOpen, { className: "size-3.5 shrink-0 text-amber-500" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Folder, { className: "size-3.5 shrink-0 text-amber-500" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: folder.name })
+        ]
+      }
+    ),
+    expanded && children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      FolderTreeItem,
+      {
+        folder: child,
+        selectedId,
+        onSelect,
+        depth: depth + 1
+      },
+      child.id
+    ))
+  ] });
+}
+
+exports.FolderTree = FolderTree;
+exports.FolderTreeItem = FolderTreeItem;

package/dist/packages/stack/src/plugins/media/client/components/media-picker/folder-tree.mjs

@@ -0,0 +1,168 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useFolders, useCreateFolder, useDeleteFolder } from '../../hooks/use-media.mjs';
+import { FolderPlus, Check, Folder, Trash2, ChevronRight, FolderOpen } from 'lucide-react';
+import { Input } from '../../../../../../../ui/src/components/input.mjs';
+import { cn } from '../../../../../../../ui/src/lib/utils.mjs';
+
+function FolderTree({
+  selectedId,
+  onSelect
+}) {
+  const { data: rootFoldersRaw = [] } = useFolders(null);
+  const rootFolders = rootFoldersRaw;
+  const [newFolderName, setNewFolderName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const { mutateAsync: createFolder } = useCreateFolder();
+  const { mutateAsync: deleteFolder } = useDeleteFolder();
+  const handleCreateFolder = async () => {
+    const name = newFolderName.trim();
+    if (!name) return;
+    try {
+      await createFolder({ name, parentId: selectedId ?? void 0 });
+      setNewFolderName("");
+      setIsCreating(false);
+    } catch (err) {
+      console.error("[btst/media] Failed to create folder", err);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Folders" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: "New folder",
+          onClick: () => setIsCreating((v) => !v),
+          className: "rounded p-0.5 hover:bg-muted",
+          children: /* @__PURE__ */ jsx(FolderPlus, { className: "size-3.5 text-muted-foreground" })
+        }
+      )
+    ] }),
+    isCreating && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 px-2 pb-1", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          value: newFolderName,
+          onChange: (e) => setNewFolderName(e.target.value),
+          placeholder: "Folder name",
+          className: "h-6 text-xs",
+          onKeyDown: (e) => {
+            if (e.key === "Enter") void handleCreateFolder();
+            if (e.key === "Escape") setIsCreating(false);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCreateFolder,
+          className: "rounded px-1 py-0.5 text-xs hover:bg-muted",
+          children: /* @__PURE__ */ jsx(Check, { className: "size-3" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto overscroll-contain", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect(null),
+          className: cn(
+            "flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-sm hover:bg-muted",
+            selectedId === null && "bg-muted font-medium"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "size-3" }),
+            /* @__PURE__ */ jsx(Folder, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: "All files" })
+          ]
+        }
+      ),
+      rootFolders.map((folder) => /* @__PURE__ */ jsx(
+        FolderTreeItem,
+        {
+          folder,
+          selectedId,
+          onSelect
+        },
+        folder.id
+      ))
+    ] }),
+    selectedId && /* @__PURE__ */ jsx("div", { className: "border-t px-2 py-1", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: async () => {
+          if (confirm("Delete this folder? Assets inside will be unaffected.")) {
+            try {
+              await deleteFolder(selectedId);
+              onSelect(null);
+            } catch (err) {
+              console.error("[btst/media] Failed to delete folder", err);
+            }
+          }
+        },
+        className: "flex items-center gap-1 text-xs text-destructive hover:underline",
+        children: [
+          /* @__PURE__ */ jsx(Trash2, { className: "size-3" }),
+          "Delete folder"
+        ]
+      }
+    ) })
+  ] });
+}
+function FolderTreeItem({
+  folder,
+  selectedId,
+  onSelect,
+  depth = 0
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const { data: children = [] } = useFolders(folder.id);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onSelect(folder.id);
+          setExpanded((v) => !v);
+        },
+        className: cn(
+          "flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-sm hover:bg-muted",
+          selectedId === folder.id && "bg-muted font-medium"
+        ),
+        style: { paddingLeft: `${8 + depth * 12}px` },
+        children: [
+          children.length > 0 ? /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: cn(
+                "size-3 shrink-0 transition-transform",
+                expanded && "rotate-90"
+              )
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "size-3" }),
+          expanded ? /* @__PURE__ */ jsx(FolderOpen, { className: "size-3.5 shrink-0 text-amber-500" }) : /* @__PURE__ */ jsx(Folder, { className: "size-3.5 shrink-0 text-amber-500" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: folder.name })
+        ]
+      }
+    ),
+    expanded && children.map((child) => /* @__PURE__ */ jsx(
+      FolderTreeItem,
+      {
+        folder: child,
+        selectedId,
+        onSelect,
+        depth: depth + 1
+      },
+      child.id
+    ))
+  ] });
+}
+
+export { FolderTree, FolderTreeItem };

package/dist/packages/stack/src/plugins/media/client/components/media-picker/index.cjs

@@ -0,0 +1,308 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const popover = require('../../../../../../../ui/src/components/popover.cjs');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const tabs = require('../../../../../../../ui/src/components/tabs.cjs');
+const LucideIcons = require('lucide-react');
+const folderTree = require('./folder-tree.cjs');
+const browseTab = require('./browse-tab.cjs');
+const uploadTab = require('./upload-tab.cjs');
+const urlTab = require('./url-tab.cjs');
+const context = require('@btst/stack/context');
+
+function MediaPicker({
+  trigger,
+  onSelect,
+  multiple = false,
+  accept
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [selectedFolder, setSelectedFolder] = React.useState(null);
+  const [selectedAssets, setSelectedAssets] = React.useState([]);
+  const [activeTab, setActiveTab] = React.useState(
+    "browse"
+  );
+  const handleClose = () => {
+    setOpen(false);
+    setSelectedAssets([]);
+  };
+  const handleConfirm = () => {
+    if (selectedAssets.length === 0) return;
+    const toSelect = [...selectedAssets];
+    handleClose();
+    setTimeout(() => onSelect(toSelect), 0);
+  };
+  const handleToggleAsset = (asset) => {
+    if (multiple) {
+      setSelectedAssets(
+        (prev) => prev.some((a) => a.id === asset.id) ? prev.filter((a) => a.id !== asset.id) : [...prev, asset]
+      );
+    } else {
+      setSelectedAssets([asset]);
+    }
+  };
+  const handleUploaded = (asset) => {
+    if (multiple) {
+      setSelectedAssets((prev) => [...prev, asset]);
+    } else {
+      setSelectedAssets([asset]);
+      setActiveTab("browse");
+    }
+  };
+  const handleUrlRegistered = (asset) => {
+    const toSelect = asset;
+    handleClose();
+    setTimeout(() => onSelect([toSelect]), 0);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    popover.Popover,
+    {
+      open,
+      onOpenChange: (v) => {
+        if (!v) handleClose();
+        else setOpen(true);
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          popover.PopoverContent,
+          {
+            className: "w-[calc(100vw-1rem)] max-w-[calc(100vw-1rem)] overflow-hidden p-0 sm:w-[820px]",
+            align: "start",
+            sideOffset: 8,
+            collisionPadding: 8,
+            style: {
+              maxWidth: "min(820px, calc(100vw - 1rem))",
+              height: "min(640px, calc(100dvh - 2rem))"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden rounded-md", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Media Library" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleClose,
+                    className: "rounded p-0.5 hover:bg-muted",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col md:flex-row", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-40 w-full shrink-0 overflow-hidden border-b bg-muted/20 md:max-h-none md:w-44 md:border-b-0 md:border-r", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  folderTree.FolderTree,
+                  {
+                    selectedId: selectedFolder,
+                    onSelect: setSelectedFolder
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col p-3 overflow-y-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  tabs.Tabs,
+                  {
+                    value: activeTab,
+                    onValueChange: (v) => setActiveTab(v),
+                    className: "flex flex-1 flex-col min-h-0",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(tabs.TabsList, { className: "grid h-auto w-full shrink-0 grid-cols-3 md:flex md:w-fit", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          tabs.TabsTrigger,
+                          {
+                            value: "browse",
+                            className: "h-8 px-2 text-xs md:h-6 md:px-3",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Image, { className: "mr-1 size-3" }),
+                              "Browse"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          tabs.TabsTrigger,
+                          {
+                            value: "upload",
+                            className: "h-8 px-2 text-xs md:h-6 md:px-3",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Upload, { className: "mr-1 size-3" }),
+                              "Upload"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          tabs.TabsTrigger,
+                          {
+                            value: "url",
+                            className: "h-8 px-2 text-xs md:h-6 md:px-3",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "mr-1 size-3" }),
+                              "URL"
+                            ]
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 min-h-0 flex-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          tabs.TabsContent,
+                          {
+                            value: "browse",
+                            className: "m-0 h-full min-h-0 data-[state=active]:flex data-[state=active]:flex-col",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              browseTab.BrowseTab,
+                              {
+                                folderId: selectedFolder,
+                                selected: selectedAssets,
+                                accept,
+                                onToggle: handleToggleAsset
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          tabs.TabsContent,
+                          {
+                            value: "upload",
+                            className: "m-0 h-full min-h-0 data-[state=active]:flex data-[state=active]:flex-col",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              uploadTab.UploadTab,
+                              {
+                                folderId: selectedFolder,
+                                accept,
+                                onUploaded: handleUploaded
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          tabs.TabsContent,
+                          {
+                            value: "url",
+                            className: "m-0 h-full min-h-0 data-[state=active]:flex data-[state=active]:flex-col",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              urlTab.UrlTab,
+                              {
+                                folderId: selectedFolder,
+                                onRegistered: handleUrlRegistered
+                              }
+                            )
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 border-t px-3 py-2 sm:flex-row sm:items-center sm:justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: selectedAssets.length > 0 ? `${selectedAssets.length} selected` : "Click a file to select it" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full gap-2 sm:w-auto", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: handleClose,
+                      className: "flex-1 sm:flex-none",
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      type: "button",
+                      size: "sm",
+                      "data-testid": "media-select-button",
+                      onClick: handleConfirm,
+                      disabled: selectedAssets.length === 0,
+                      className: "flex-1 sm:flex-none",
+                      children: multiple ? `Select ${selectedAssets.length > 0 ? `(${selectedAssets.length})` : ""}` : "Select"
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function ImageInputField({
+  value,
+  onChange
+}) {
+  const { Image: ImageComponent } = context.usePluginOverrides("media", {});
+  if (value) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      ImageComponent ? /* @__PURE__ */ jsxRuntime.jsx(
+        ImageComponent,
+        {
+          src: value,
+          alt: "Featured image preview",
+          className: "h-auto w-full max-w-xs rounded-md border object-cover",
+          width: 400,
+          height: 300,
+          "data-testid": "image-preview"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: value,
+          alt: "Featured image preview",
+          className: "h-auto w-full max-w-xs rounded-md border object-cover",
+          "data-testid": "image-preview"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MediaPicker,
+          {
+            trigger: /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "outline",
+                size: "sm",
+                type: "button",
+                "data-testid": "open-media-picker",
+                children: "Change Image"
+              }
+            ),
+            accept: ["image/*"],
+            onSelect: (assets) => onChange(assets[0]?.url ?? "")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            type: "button",
+            variant: "destructive",
+            size: "sm",
+            "data-testid": "remove-image-button",
+            onClick: () => onChange(""),
+            children: "Remove"
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    MediaPicker,
+    {
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          variant: "outline",
+          size: "sm",
+          type: "button",
+          "data-testid": "open-media-picker",
+          children: "Browse Media"
+        }
+      ),
+      accept: ["image/*"],
+      onSelect: (assets) => onChange(assets[0]?.url ?? "")
+    }
+  ) });
+}
+
+exports.ImageInputField = ImageInputField;
+exports.MediaPicker = MediaPicker;