@arbidocs/blocks 0.4.72 → 0.4.73

package/dist/chunk-DETZZBG2.cjs

@@ -0,0 +1,91 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var lucideReact = require('lucide-react');
+var ui = require('@arbidocs/react/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/files/UploadDropzone.tsx
+function UploadDropzone({
+  onFiles,
+  accept,
+  multiple = true,
+  disabled = false,
+  uploading = false,
+  title = "Drag files here",
+  description = "or click to browse",
+  hint,
+  uploadingLabel = "Uploading\u2026",
+  icon: Icon = lucideReact.UploadCloud,
+  testId,
+  className
+}) {
+  const inputRef = react.useRef(null);
+  const [dragOver, setDragOver] = react.useState(false);
+  const inert = disabled || uploading;
+  const pick = (files) => {
+    if (!files?.length) return;
+    onFiles(Array.from(files));
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragOver(false);
+    if (inert) return;
+    pick(e.dataTransfer.files);
+  };
+  const onDragOver = (e) => {
+    e.preventDefault();
+    if (!inert) setDragOver(true);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => !inert && inputRef.current?.click(),
+      onDrop,
+      onDragOver,
+      onDragLeave: () => setDragOver(false),
+      disabled: inert,
+      "data-testid": testId,
+      className: ui.cn(
+        "flex w-full flex-col items-center justify-center gap-3 rounded-lg bg-muted px-6 py-12 text-center transition-colors",
+        "hover:bg-accent/60",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        dragOver && "bg-accent ring-2 ring-primary",
+        inert && "cursor-not-allowed opacity-60 hover:bg-muted",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            className: "hidden",
+            onChange: (e) => {
+              pick(e.target.files);
+              if (inputRef.current) inputRef.current.value = "";
+            },
+            "data-testid": testId ? `${testId}-input` : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary", children: uploading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-6 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-6" }) }),
+        uploading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: uploadingLabel }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium text-foreground", children: [
+            title,
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: description })
+          ] }),
+          hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: hint })
+        ] })
+      ]
+    }
+  );
+}
+
+exports.UploadDropzone = UploadDropzone;
+//# sourceMappingURL=chunk-DETZZBG2.cjs.map
+//# sourceMappingURL=chunk-DETZZBG2.cjs.map

package/dist/chunk-DETZZBG2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/files/UploadDropzone.tsx"],"names":["UploadCloud","useRef","useState","jsxs","cn","jsx","Loader2"],"mappings":"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","file":"chunk-DETZZBG2.cjs","sourcesContent":["import { useRef, useState } from 'react'\nimport type { DragEvent } from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { Loader2, UploadCloud } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\n\nexport interface UploadDropzoneProps {\n  /** Called with the chosen/dropped files. */\n  onFiles: (files: File[]) => void\n  /** `accept` attribute for the file picker (e.g. `.pdf,.docx`). */\n  accept?: string\n  /** Allow selecting more than one file. Defaults to true. */\n  multiple?: boolean\n  /** Disables picking/dropping (e.g. no active workspace yet). */\n  disabled?: boolean\n  /** Shows a spinner + busy copy while an upload is in flight. */\n  uploading?: boolean\n  /** Primary line, e.g. \"Drag files here\". */\n  title?: string\n  /** Secondary line under the title. */\n  description?: string\n  /** Small muted hint, e.g. \"PDF, DOCX, images — up to 50MB\". */\n  hint?: string\n  /** Copy shown next to the spinner while uploading. */\n  uploadingLabel?: string\n  /** Glyph in the tile. Defaults to an upload-cloud icon. */\n  icon?: LucideIcon\n  testId?: string\n  className?: string\n}\n\n/**\n * A themeable drag-and-drop upload target. Source-agnostic: it just surfaces\n * chosen files via `onFiles` — the host owns the actual upload. Handles its own\n * drag-over state, click-to-browse, and a busy state, styled with the kit's\n * SEMANTIC tokens only (border, muted, primary, foreground) so it renders in\n * each host's colours.\n */\nexport function UploadDropzone({\n  onFiles,\n  accept,\n  multiple = true,\n  disabled = false,\n  uploading = false,\n  title = 'Drag files here',\n  description = 'or click to browse',\n  hint,\n  uploadingLabel = 'Uploading…',\n  icon: Icon = UploadCloud,\n  testId,\n  className,\n}: UploadDropzoneProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [dragOver, setDragOver] = useState(false)\n  const inert = disabled || uploading\n\n  const pick = (files: FileList | null) => {\n    if (!files?.length) return\n    onFiles(Array.from(files))\n  }\n\n  const onDrop = (e: DragEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    setDragOver(false)\n    if (inert) return\n    pick(e.dataTransfer.files)\n  }\n\n  const onDragOver = (e: DragEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    if (!inert) setDragOver(true)\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => !inert && inputRef.current?.click()}\n      onDrop={onDrop}\n      onDragOver={onDragOver}\n      onDragLeave={() => setDragOver(false)}\n      disabled={inert}\n      data-testid={testId}\n      className={cn(\n        'flex w-full flex-col items-center justify-center gap-3 rounded-lg bg-muted px-6 py-12 text-center transition-colors',\n        'hover:bg-accent/60',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        dragOver && 'bg-accent ring-2 ring-primary',\n        inert && 'cursor-not-allowed opacity-60 hover:bg-muted',\n        className\n      )}\n    >\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        className=\"hidden\"\n        onChange={(e) => {\n          pick(e.target.files)\n          if (inputRef.current) inputRef.current.value = ''\n        }}\n        data-testid={testId ? `${testId}-input` : undefined}\n      />\n      <div className=\"flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary\">\n        {uploading ? <Loader2 className=\"size-6 animate-spin\" /> : <Icon className=\"size-6\" />}\n      </div>\n      {uploading ? (\n        <p className=\"text-sm font-medium text-foreground\">{uploadingLabel}</p>\n      ) : (\n        <div className=\"space-y-1\">\n          <p className=\"text-sm font-medium text-foreground\">\n            {title} <span className=\"text-muted-foreground\">{description}</span>\n          </p>\n          {hint && <p className=\"text-xs text-muted-foreground\">{hint}</p>}\n        </div>\n      )}\n    </button>\n  )\n}\n"]}

package/dist/chunk-EVUEIBNU.js

@@ -0,0 +1,89 @@
+"use client";
+import { useRef, useState } from 'react';
+import { Loader2, UploadCloud } from 'lucide-react';
+import { cn } from '@arbidocs/react/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/files/UploadDropzone.tsx
+function UploadDropzone({
+  onFiles,
+  accept,
+  multiple = true,
+  disabled = false,
+  uploading = false,
+  title = "Drag files here",
+  description = "or click to browse",
+  hint,
+  uploadingLabel = "Uploading\u2026",
+  icon: Icon = UploadCloud,
+  testId,
+  className
+}) {
+  const inputRef = useRef(null);
+  const [dragOver, setDragOver] = useState(false);
+  const inert = disabled || uploading;
+  const pick = (files) => {
+    if (!files?.length) return;
+    onFiles(Array.from(files));
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragOver(false);
+    if (inert) return;
+    pick(e.dataTransfer.files);
+  };
+  const onDragOver = (e) => {
+    e.preventDefault();
+    if (!inert) setDragOver(true);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => !inert && inputRef.current?.click(),
+      onDrop,
+      onDragOver,
+      onDragLeave: () => setDragOver(false),
+      disabled: inert,
+      "data-testid": testId,
+      className: cn(
+        "flex w-full flex-col items-center justify-center gap-3 rounded-lg bg-muted px-6 py-12 text-center transition-colors",
+        "hover:bg-accent/60",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        dragOver && "bg-accent ring-2 ring-primary",
+        inert && "cursor-not-allowed opacity-60 hover:bg-muted",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            className: "hidden",
+            onChange: (e) => {
+              pick(e.target.files);
+              if (inputRef.current) inputRef.current.value = "";
+            },
+            "data-testid": testId ? `${testId}-input` : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary", children: uploading ? /* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin" }) : /* @__PURE__ */ jsx(Icon, { className: "size-6" }) }),
+        uploading ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: uploadingLabel }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-foreground", children: [
+            title,
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: description })
+          ] }),
+          hint && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hint })
+        ] })
+      ]
+    }
+  );
+}
+
+export { UploadDropzone };
+//# sourceMappingURL=chunk-EVUEIBNU.js.map
+//# sourceMappingURL=chunk-EVUEIBNU.js.map

package/dist/chunk-EVUEIBNU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/files/UploadDropzone.tsx"],"names":[],"mappings":"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","file":"chunk-EVUEIBNU.js","sourcesContent":["import { useRef, useState } from 'react'\nimport type { DragEvent } from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { Loader2, UploadCloud } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\n\nexport interface UploadDropzoneProps {\n  /** Called with the chosen/dropped files. */\n  onFiles: (files: File[]) => void\n  /** `accept` attribute for the file picker (e.g. `.pdf,.docx`). */\n  accept?: string\n  /** Allow selecting more than one file. Defaults to true. */\n  multiple?: boolean\n  /** Disables picking/dropping (e.g. no active workspace yet). */\n  disabled?: boolean\n  /** Shows a spinner + busy copy while an upload is in flight. */\n  uploading?: boolean\n  /** Primary line, e.g. \"Drag files here\". */\n  title?: string\n  /** Secondary line under the title. */\n  description?: string\n  /** Small muted hint, e.g. \"PDF, DOCX, images — up to 50MB\". */\n  hint?: string\n  /** Copy shown next to the spinner while uploading. */\n  uploadingLabel?: string\n  /** Glyph in the tile. Defaults to an upload-cloud icon. */\n  icon?: LucideIcon\n  testId?: string\n  className?: string\n}\n\n/**\n * A themeable drag-and-drop upload target. Source-agnostic: it just surfaces\n * chosen files via `onFiles` — the host owns the actual upload. Handles its own\n * drag-over state, click-to-browse, and a busy state, styled with the kit's\n * SEMANTIC tokens only (border, muted, primary, foreground) so it renders in\n * each host's colours.\n */\nexport function UploadDropzone({\n  onFiles,\n  accept,\n  multiple = true,\n  disabled = false,\n  uploading = false,\n  title = 'Drag files here',\n  description = 'or click to browse',\n  hint,\n  uploadingLabel = 'Uploading…',\n  icon: Icon = UploadCloud,\n  testId,\n  className,\n}: UploadDropzoneProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [dragOver, setDragOver] = useState(false)\n  const inert = disabled || uploading\n\n  const pick = (files: FileList | null) => {\n    if (!files?.length) return\n    onFiles(Array.from(files))\n  }\n\n  const onDrop = (e: DragEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    setDragOver(false)\n    if (inert) return\n    pick(e.dataTransfer.files)\n  }\n\n  const onDragOver = (e: DragEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    if (!inert) setDragOver(true)\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => !inert && inputRef.current?.click()}\n      onDrop={onDrop}\n      onDragOver={onDragOver}\n      onDragLeave={() => setDragOver(false)}\n      disabled={inert}\n      data-testid={testId}\n      className={cn(\n        'flex w-full flex-col items-center justify-center gap-3 rounded-lg bg-muted px-6 py-12 text-center transition-colors',\n        'hover:bg-accent/60',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        dragOver && 'bg-accent ring-2 ring-primary',\n        inert && 'cursor-not-allowed opacity-60 hover:bg-muted',\n        className\n      )}\n    >\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        className=\"hidden\"\n        onChange={(e) => {\n          pick(e.target.files)\n          if (inputRef.current) inputRef.current.value = ''\n        }}\n        data-testid={testId ? `${testId}-input` : undefined}\n      />\n      <div className=\"flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary\">\n        {uploading ? <Loader2 className=\"size-6 animate-spin\" /> : <Icon className=\"size-6\" />}\n      </div>\n      {uploading ? (\n        <p className=\"text-sm font-medium text-foreground\">{uploadingLabel}</p>\n      ) : (\n        <div className=\"space-y-1\">\n          <p className=\"text-sm font-medium text-foreground\">\n            {title} <span className=\"text-muted-foreground\">{description}</span>\n          </p>\n          {hint && <p className=\"text-xs text-muted-foreground\">{hint}</p>}\n        </div>\n      )}\n    </button>\n  )\n}\n"]}