@usetheo/ui 0.20.0 → 0.21.0

package/dist/components/primitives/file-dropzone/file-dropzone.d.ts

@@ -0,0 +1,26 @@
+/**
+ * FileDropzone — drag-drop + file-picker primitive, dependency-free (HTML5
+ * DnD). The drag mechanics, the typed-rejection shape and the browser quirks
+ * are ported from the react-dropzone reference study (blueprint M5): nested
+ * dragenter/dragleave target counting, empty MIME type during drag (Chrome),
+ * and the all-or-nothing maxFiles rule.
+ *
+ * Boundary: this component SELECTS and VALIDATES files. Uploading (network,
+ * progress) belongs to the consumer — compose with `Progress` for that.
+ * Directory drops are out of scope (entries without a real File are skipped).
+ */
+import type { HTMLAttributes, ReactNode } from "react";
+import type { FileRejection, ValidateFilesOptions } from "./validate.js";
+export { matchesAccept, validateFiles, type FileDropzoneError, type FileDropzoneErrorCode, type FileRejection, type ValidateFilesOptions, } from "./validate.js";
+export type FileDropzoneState = "idle" | "drag-over" | "drag-reject" | "disabled";
+export interface FileDropzoneProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDrop" | "children">, ValidateFilesOptions {
+    /** Accessible name for the dropzone (aria-label). */
+    label: string;
+    disabled?: boolean;
+    onFilesAccepted?: (files: File[]) => void;
+    onFilesRejected?: (rejections: FileRejection[]) => void;
+    /** Custom instructions content; defaults to a drag-or-click hint. */
+    instructions?: ReactNode;
+}
+declare const FileDropzone: import("react").ForwardRefExoticComponent<FileDropzoneProps & import("react").RefAttributes<HTMLDivElement>>;
+export { FileDropzone };

package/dist/components/primitives/file-dropzone/index.d.ts

@@ -0,0 +1 @@
+export { FileDropzone, matchesAccept, validateFiles, type FileDropzoneError, type FileDropzoneErrorCode, type FileDropzoneProps, type FileDropzoneState, type FileRejection, type ValidateFilesOptions, } from "./file-dropzone.js";

package/dist/components/primitives/file-dropzone/validate.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Pure validation core of FileDropzone — typed rejections, accept matching
+ * (MIME exact / wildcard / extension), size and collective count rules.
+ * Ported behaviors from the react-dropzone reference study (blueprint M5).
+ */
+export type FileDropzoneErrorCode = "file-invalid-type" | "file-too-large" | "file-too-small" | "too-many-files";
+export interface FileDropzoneError {
+    /** One of the four built-in codes, or a custom code from `validator`. */
+    code: FileDropzoneErrorCode | string;
+    message: string;
+}
+export interface FileRejection {
+    file: File;
+    errors: FileDropzoneError[];
+}
+export interface ValidateFilesOptions {
+    accept?: Record<string, string[]>;
+    maxSize?: number;
+    minSize?: number;
+    maxFiles?: number;
+    multiple?: boolean;
+    validator?: (file: File) => FileDropzoneError | FileDropzoneError[] | null;
+}
+/**
+ * Matches a file against an `accept` map ({mime: [ext...]}): exact MIME,
+ * `type/*` wildcard, or extension (case-insensitive). No accept → accepts
+ * everything. An empty `file.type` is accepted (Chrome reports "" for some
+ * types during drag) — real validation happens again on drop.
+ */
+export declare function matchesAccept(file: File, accept?: Record<string, string[]>): boolean;
+/**
+ * Validates files against accept/size/count rules plus an optional custom
+ * validator. Per-file errors accumulate; the maxFiles/multiple rule is
+ * COLLECTIVE and all-or-nothing: exceeding it rejects EVERY file with
+ * `too-many-files` (ported from the reference behavior).
+ */
+export declare function validateFiles(files: File[], options?: ValidateFilesOptions): {
+    accepted: File[];
+    rejections: FileRejection[];
+};

package/dist/index.d.ts

@@ -49,6 +49,7 @@ export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSor
 export { PageShell, type PageShellProps } from "./components/composites/page-shell/index.js";
 export { linScale, niceMax, seriesPath, TrendChart, type TrendChartProps, type TrendPoint, type TrendSeries, } from "./components/composites/trend-chart/index.js";
 export { Stepper, deriveSteps, type StepStatus, type StepperProps, type StepperStepData, } from "./components/composites/stepper/index.js";
+export { FileDropzone, matchesAccept, validateFiles, type FileDropzoneError, type FileDropzoneErrorCode, type FileDropzoneProps, type FileDropzoneState, type FileRejection, type ValidateFilesOptions, } from "./components/primitives/file-dropzone/index.js";
 export { MetricsPanel, type Metric } from "./components/primitives/metrics-panel/index.js";
 export { SocialAuthRow, type SocialProvider, } from "./components/primitives/social-auth-row/index.js";
 export { LoginSplit } from "./components/primitives/login-split/index.js";

package/dist/index.js

@@ -4628,6 +4628,223 @@ var Stepper = forwardRef(
   )
 );
 Stepper.displayName = "Stepper";
+
+// src/components/primitives/file-dropzone/validate.ts
+function matchesAccept(file, accept) {
+  const entries = Object.entries(accept ?? {});
+  if (entries.length === 0) return true;
+  if (file.type === "") {
+    const exts = entries.flatMap(([, e]) => e);
+    if (exts.length === 0) return true;
+    return exts.some((ext) => file.name.toLowerCase().endsWith(ext.toLowerCase()));
+  }
+  return entries.some(([mime, exts]) => {
+    if (mime === file.type) return true;
+    if (mime.endsWith("/*") && file.type.startsWith(mime.slice(0, -1))) return true;
+    return exts.some((ext) => file.name.toLowerCase().endsWith(ext.toLowerCase()));
+  });
+}
+function acceptedExtensions(accept) {
+  const exts = Object.values(accept).flat();
+  return exts.length > 0 ? exts.join(", ") : Object.keys(accept).join(", ");
+}
+function validateFiles(files, options = {}) {
+  const { accept, maxSize, minSize, maxFiles, multiple = true, validator } = options;
+  const accepted = [];
+  const rejections = [];
+  for (const file of files) {
+    const errors = [];
+    if (accept && !matchesAccept(file, accept)) {
+      errors.push({
+        code: "file-invalid-type",
+        message: `File type must be one of ${acceptedExtensions(accept)}`
+      });
+    }
+    if (maxSize !== void 0 && file.size > maxSize) {
+      errors.push({ code: "file-too-large", message: `File is larger than ${maxSize} bytes` });
+    }
+    if (minSize !== void 0 && file.size < minSize) {
+      errors.push({ code: "file-too-small", message: `File is smaller than ${minSize} bytes` });
+    }
+    const custom = validator?.(file);
+    if (custom) errors.push(...Array.isArray(custom) ? custom : [custom]);
+    if (errors.length > 0) {
+      rejections.push({ file, errors });
+    } else {
+      accepted.push(file);
+    }
+  }
+  const tooMany = !multiple && accepted.length > 1 || maxFiles !== void 0 && maxFiles >= 1 && accepted.length > maxFiles;
+  if (tooMany) {
+    const limit = !multiple ? 1 : maxFiles;
+    for (const file of accepted) {
+      rejections.push({
+        file,
+        errors: [{ code: "too-many-files", message: `Too many files \u2014 at most ${limit} allowed` }]
+      });
+    }
+    accepted.length = 0;
+  }
+  return { accepted, rejections };
+}
+function hasFiles(event) {
+  return Array.from(event.dataTransfer?.types ?? []).includes("Files");
+}
+var FileDropzone = forwardRef(
+  ({
+    label,
+    disabled = false,
+    accept,
+    maxSize,
+    minSize,
+    maxFiles,
+    multiple = true,
+    validator,
+    onFilesAccepted,
+    onFilesRejected,
+    instructions,
+    className,
+    ...props
+  }, ref) => {
+    const dragTargetsRef = useRef([]);
+    const inputRef = useRef(null);
+    const [dragState, setDragState] = useState("idle");
+    const [rejections, setRejections] = useState([]);
+    const validateOptions = {
+      accept,
+      maxSize,
+      minSize,
+      maxFiles,
+      multiple,
+      validator
+    };
+    const processFiles = (files) => {
+      if (files.length === 0) return;
+      const result = validateFiles(files, validateOptions);
+      setRejections(result.rejections);
+      if (result.accepted.length > 0) onFilesAccepted?.(result.accepted);
+      if (result.rejections.length > 0) onFilesRejected?.(result.rejections);
+    };
+    const openPicker = () => {
+      const input = inputRef.current;
+      if (!input || disabled) return;
+      input.value = "";
+      input.click();
+    };
+    const onKeyDown = (event) => {
+      if (event.target !== event.currentTarget) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        openPicker();
+      }
+    };
+    const onDragEnter = (event) => {
+      event.preventDefault();
+      if (disabled || !hasFiles(event)) return;
+      dragTargetsRef.current = [...dragTargetsRef.current, event.target];
+      const items = Array.from(event.dataTransfer?.items ?? []).filter(
+        (item) => item.kind === "file"
+      );
+      const reject = accept !== void 0 && items.length > 0 && items.some(
+        (item) => item.type !== "" && !matchesAccept(
+          new File([], item.getAsFile?.()?.name ?? "", { type: item.type }),
+          accept
+        )
+      );
+      setDragState(reject ? "drag-reject" : "drag-over");
+    };
+    const onDragOver = (event) => {
+      event.preventDefault();
+      if (event.dataTransfer) {
+        try {
+          event.dataTransfer.dropEffect = "copy";
+        } catch {
+        }
+      }
+    };
+    const onDragLeave = (event) => {
+      event.preventDefault();
+      const root = event.currentTarget;
+      const targets = dragTargetsRef.current.filter((t) => root.contains(t));
+      const idx = targets.indexOf(event.target);
+      if (idx !== -1) targets.splice(idx, 1);
+      dragTargetsRef.current = targets;
+      if (targets.length === 0) setDragState("idle");
+    };
+    const onDrop = (event) => {
+      event.preventDefault();
+      dragTargetsRef.current = [];
+      setDragState("idle");
+      if (disabled || !hasFiles(event)) return;
+      processFiles(Array.from(event.dataTransfer?.files ?? []));
+    };
+    const state = disabled ? "disabled" : dragState;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "file-dropzone",
+          "data-state": state,
+          ref,
+          role: "button",
+          "aria-label": label,
+          "aria-disabled": disabled || void 0,
+          tabIndex: disabled ? void 0 : 0,
+          onClick: () => openPicker(),
+          onKeyDown,
+          onDragEnter,
+          onDragOver,
+          onDragLeave,
+          onDrop,
+          className: cn(
+            "flex min-h-24 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-border border-dashed p-4 text-center",
+            state === "drag-over" && "border-primary bg-primary/5",
+            state === "drag-reject" && "border-destructive bg-destructive/5",
+            state === "disabled" && "cursor-not-allowed opacity-50",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "file-dropzone-instructions",
+              className: "text-body-sm text-muted-foreground",
+              children: instructions ?? "Drag files here or click to browse."
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "data-slot": "file-dropzone-input",
+          ref: inputRef,
+          type: "file",
+          "aria-hidden": "true",
+          tabIndex: -1,
+          multiple,
+          accept: accept ? Object.entries(accept).flatMap(([m, e]) => [m, ...e]).join(",") : void 0,
+          disabled,
+          className: "sr-only",
+          onChange: (event) => processFiles(Array.from(event.target.files ?? []))
+        }
+      ),
+      rejections.length > 0 && /* @__PURE__ */ jsx(
+        "ul",
+        {
+          "data-slot": "file-dropzone-rejections",
+          className: "space-y-0.5 text-destructive text-label",
+          children: rejections.map((r) => /* @__PURE__ */ jsxs("li", { children: [
+            r.file.name,
+            " \u2014 ",
+            r.errors.map((e) => e.message).join("; ")
+          ] }, r.file.name))
+        }
+      )
+    ] });
+  }
+);
+FileDropzone.displayName = "FileDropzone";
 var MetricsPanel = forwardRef(
   ({ className, title, description, metrics, columns, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
@@ -5558,4 +5775,4 @@ function CommandPalette({
   ] }) });
 }
 
-export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, Combobox, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, DescriptionList, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FormField, Input, JsonViewer, Label, LoginSplit, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, StatTile, StatusDot, StatusIndicator, Stepper, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, TrendChart, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, deriveSteps, isNearBottom, linScale, niceMax, seriesPath, sheetVariants, useStickToBottom, useToast };
+export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, Combobox, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, DescriptionList, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FileDropzone, FormField, Input, JsonViewer, Label, LoginSplit, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, StatTile, StatusDot, StatusIndicator, Stepper, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, TrendChart, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, deriveSteps, isNearBottom, linScale, matchesAccept, niceMax, seriesPath, sheetVariants, useStickToBottom, useToast, validateFiles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "type": "module",
   "license": "Apache-2.0",
   "description": "Violet Forge design system — generic React components + primitives (the non-AI foundation of @theokit/ui).",