@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/shared/components-7ntvvegr.js

@@ -0,0 +1,316 @@
+"use client";
+import {
+  FIELD_ACTION_RADIUS2
+} from "./components-124epb7f.js";
+import {
+  useShape2
+} from "./components-78x40gee.js";
+import {
+  useSize2
+} from "./components-h83az0bz.js";
+import {
+  cn2
+} from "./components-jcnjay5g.js";
+import {
+  useFieldState2
+} from "./components-6zng858q.js";
+import {
+  useIcon2
+} from "./components-jqpefjsn.js";
+import {
+  useReduceMotion2
+} from "./components-de99ykt7.js";
+import {
+  spring2
+} from "./components-3ey0hzpb.js";
+import {
+  button_default
+} from "./components-7d4r7hh1.js";
+import {
+  Spinner2,
+  progress_default
+} from "./components-d3shbwqq.js";
+import {
+  formatFileSize2,
+  dragVerdict2,
+  sortFiles2
+} from "./components-f7h57m6t.js";
+
+// components/inputs/file-dropzone/index.tsx
+import { Field } from "@base-ui/react/field";
+import { motion as motion2 } from "motion/react";
+import {
+  forwardRef,
+  useRef,
+  useState
+} from "react";
+
+// components/inputs/file-dropzone/file-row.tsx
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var THUMB = { default: "size-8", compact: "size-7" };
+var ROW_PAD = { default: "py-1.5", compact: "py-1" };
+var SPINNER = { default: "size-4", compact: "size-3.5" };
+function StatusGlyph({ status, size }) {
+  const Done = useIcon2("circle-check");
+  const Failed = useIcon2("circle-alert");
+  const reduced = useReduceMotion2();
+  const icon = useSize2(size).icon;
+  return /* @__PURE__ */ jsx("span", {
+    "aria-hidden": "true",
+    className: "inline-grid shrink-0 place-items-center",
+    children: /* @__PURE__ */ jsx(AnimatePresence, {
+      initial: false,
+      mode: "popLayout",
+      children: status !== "idle" && /* @__PURE__ */ jsxs(motion.span, {
+        className: cn2("col-start-1 row-start-1 flex", status === "done" && "text-status-success", status === "error" && "text-destructive", status === "uploading" && "text-muted-foreground"),
+        initial: { opacity: 0, scale: reduced ? 1 : 0.6 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: reduced ? 1 : 0.8, transition: spring2.fast.exit },
+        transition: spring2.fast,
+        children: [
+          status === "done" && /* @__PURE__ */ jsx(Done, {
+            size: icon,
+            strokeWidth: 2
+          }),
+          status === "error" && /* @__PURE__ */ jsx(Failed, {
+            size: icon,
+            strokeWidth: 2
+          }),
+          status === "uploading" && /* @__PURE__ */ jsx(Spinner2, {
+            className: SPINNER[size]
+          })
+        ]
+      }, status)
+    })
+  });
+}
+function FileRow2({
+  file,
+  name: nameProp,
+  fileSize: fileSizeProp,
+  type: typeProp,
+  thumbnail,
+  icon,
+  status = "idle",
+  progress,
+  description,
+  error,
+  onRemove,
+  removeLabel = "Remove file",
+  uploadingLabel = "Uploading",
+  actions,
+  locale,
+  disabled = false,
+  size: sizeProp,
+  className
+}) {
+  const size = useSize2(sizeProp);
+  const shape = useShape2();
+  const compact = size.variant === "compact";
+  const FileIcon = useIcon2("file");
+  const ImageIcon = useIcon2("image");
+  const Remove = useIcon2("x");
+  const name = nameProp ?? file?.name ?? "";
+  const bytes = fileSizeProp ?? file?.size;
+  const type = typeProp ?? file?.type ?? "";
+  const Glyph = icon ?? (type.startsWith("image/") ? ImageIcon : FileIcon);
+  const shown = error ? "error" : status;
+  const sizeText = bytes != null ? formatFileSize2(bytes, locale) : undefined;
+  const meta = error ?? description ?? (status === "uploading" && progress != null ? `${sizeText ?? ""} · ${Math.round(progress)}%` : sizeText);
+  return /* @__PURE__ */ jsxs("div", {
+    "data-status": shown,
+    "data-disabled": disabled || undefined,
+    className: cn2("flex min-w-0 items-center transition-opacity duration-fast", size.gap, size.itemPx, ROW_PAD[size.variant], shape.item, disabled && "pointer-events-none opacity-50", className),
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: cn2("flex shrink-0 items-center justify-center overflow-hidden bg-muted text-muted-foreground", THUMB[size.variant], FIELD_ACTION_RADIUS2[shape.variant]),
+        children: thumbnail ? /* @__PURE__ */ jsx("img", {
+          src: thumbnail,
+          alt: "",
+          className: "size-full object-cover"
+        }) : /* @__PURE__ */ jsx(Glyph, {
+          size: size.icon,
+          strokeWidth: 1.5
+        })
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex min-w-0 flex-1 flex-col",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: cn2("truncate text-foreground weight-normal", size.text),
+            title: name,
+            children: name
+          }),
+          meta != null && meta !== "" && /* @__PURE__ */ jsx("span", {
+            className: cn2("truncate", compact ? "text-caption-compact" : "text-caption", error ? "text-destructive weight-medium" : "text-muted-foreground weight-normal"),
+            children: meta
+          }),
+          shown === "uploading" && /* @__PURE__ */ jsx(progress_default, {
+            value: progress ?? null,
+            "aria-label": uploadingLabel,
+            className: "mt-1"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(StatusGlyph, {
+        status: shown,
+        size: size.variant
+      }),
+      actions,
+      onRemove && /* @__PURE__ */ jsx(button_default, {
+        variant: "ghost",
+        size: "icon-compact",
+        "aria-label": removeLabel,
+        disabled,
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsx(Remove, {
+          strokeWidth: 1.5
+        })
+      })
+    ]
+  });
+}
+
+// components/inputs/file-dropzone/index.tsx
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+var PAD = { default: "px-6 py-8", compact: "px-4 py-5" };
+var FileDropzone2 = forwardRef(({
+  onFilesChange,
+  onFilesRejected,
+  accept,
+  multiple = false,
+  maxFiles,
+  maxSize,
+  label,
+  description,
+  activeLabel = "Drop to add",
+  partialLabel = "Some files will be skipped",
+  rejectLabel = "These files can't be added",
+  icon,
+  children,
+  id,
+  required,
+  invalid,
+  disabled,
+  readOnly,
+  size: sizeProp,
+  className
+}, ref) => {
+  const field = useFieldState2();
+  const size = useSize2(sizeProp);
+  const shape = useShape2();
+  const reduced = useReduceMotion2();
+  const Upload = useIcon2("upload");
+  const Glyph = icon ?? Upload;
+  const compact = size.variant === "compact";
+  const isInvalid = invalid ?? field?.invalid ?? false;
+  const isDisabled = disabled ?? field?.disabled ?? false;
+  const isReadOnly = readOnly ?? field?.readOnly ?? false;
+  const closed = isDisabled || isReadOnly;
+  const [drag, setDrag] = useState("idle");
+  const depth = useRef(0);
+  const hand = (files) => {
+    if (!files.length)
+      return;
+    const { accepted, rejected } = sortFiles2(files, { accept, maxSize, maxFiles, multiple });
+    if (accepted.length)
+      onFilesChange?.(accepted);
+    if (rejected.length)
+      onFilesRejected?.(rejected);
+  };
+  const onDragEnter = (e) => {
+    if (closed || !e.dataTransfer.types.includes("Files"))
+      return;
+    e.preventDefault();
+    depth.current++;
+    const types = [...e.dataTransfer.items].filter((item) => item.kind === "file").map((item) => item.type);
+    setDrag(dragVerdict2(types, accept, multiple ? maxFiles ?? Number.POSITIVE_INFINITY : 1));
+  };
+  const onDragOver = (e) => {
+    if (closed || drag === "idle")
+      return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = drag === "reject" ? "none" : "copy";
+  };
+  const onDragLeave = () => {
+    if (drag === "idle")
+      return;
+    depth.current = Math.max(depth.current - 1, 0);
+    if (depth.current === 0)
+      setDrag("idle");
+  };
+  const onDrop = (e) => {
+    if (closed)
+      return;
+    e.preventDefault();
+    depth.current = 0;
+    setDrag("idle");
+    hand([...e.dataTransfer.files]);
+  };
+  const onChange = (e) => {
+    hand([...e.target.files ?? []]);
+    e.target.value = "";
+  };
+  const line = drag === "accept" ? activeLabel : drag === "partial" ? partialLabel : drag === "reject" ? rejectLabel : label ?? (multiple ? "Drop files here or click to browse" : "Drop a file here or click to browse");
+  return /* @__PURE__ */ jsxs2("label", {
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    "data-dragging": drag === "idle" ? undefined : drag,
+    "data-invalid": isInvalid || undefined,
+    "data-disabled": isDisabled || undefined,
+    "data-readonly": isReadOnly || undefined,
+    className: cn2("group/zone relative flex cursor-pointer flex-col items-center justify-center text-center", "border border-dashed border-border transition-[background-color,border-color,opacity] duration-fast", "hover:bg-muted/50 has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-focus-ring", "data-[dragging=accept]:border-solid data-[dragging=accept]:!border-border data-[dragging=accept]:!bg-muted", "data-[dragging=partial]:border-solid data-[dragging=partial]:!border-border data-[dragging=partial]:!bg-muted", "data-[invalid]:border-destructive/50 data-[invalid]:hover:bg-destructive-light/60", "data-[dragging=reject]:border-solid data-[dragging=reject]:border-destructive/50 data-[dragging=reject]:!bg-destructive-light/60", "data-[readonly]:cursor-default data-[readonly]:hover:bg-transparent", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", size.gap, PAD[size.variant], shape.container, className),
+    children: [
+      /* @__PURE__ */ jsx2(Field.Control, {
+        ref,
+        id,
+        disabled: closed,
+        "aria-required": (required ?? field?.required) || undefined,
+        "aria-invalid": isInvalid || undefined,
+        render: /* @__PURE__ */ jsx2("input", {
+          type: "file",
+          accept,
+          multiple,
+          onChange,
+          className: "sr-only"
+        })
+      }),
+      children ?? /* @__PURE__ */ jsxs2(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx2(motion2.span, {
+            className: cn2("flex text-muted-foreground transition-[color] duration-fast group-hover/zone:text-foreground group-data-[dragging]/zone:text-foreground", drag === "reject" && "text-destructive group-data-[dragging]/zone:text-destructive"),
+            initial: false,
+            animate: { y: (drag === "accept" || drag === "partial") && !reduced ? -2 : 0 },
+            transition: spring2.fast,
+            children: /* @__PURE__ */ jsx2(Glyph, {
+              size: size.icon,
+              strokeWidth: 1.5,
+              className: "transition-[stroke-width] duration-fast group-hover/zone:stroke-[2] group-data-[dragging]/zone:stroke-[2]"
+            })
+          }),
+          /* @__PURE__ */ jsxs2("span", {
+            className: "flex flex-col",
+            children: [
+              /* @__PURE__ */ jsx2("span", {
+                className: cn2("weight-normal", size.text, drag === "reject" ? "text-destructive" : "text-foreground"),
+                children: line
+              }),
+              description != null && /* @__PURE__ */ jsx2("span", {
+                className: cn2("text-muted-foreground weight-normal", compact ? "text-caption-compact" : "text-caption"),
+                children: description
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+});
+FileDropzone2.displayName = "FileDropzone";
+Object.assign(FileDropzone2, { Row: FileRow2 });
+var file_dropzone_default = FileDropzone2;
+
+export { FileRow2, FileDropzone2, file_dropzone_default };

package/dist/shared/components-8nwsqjn8.js

@@ -0,0 +1,34 @@
+"use client";
+import {
+  useReduceMotion2
+} from "./components-de99ykt7.js";
+import {
+  shapeMap2,
+  useShape2
+} from "./components-78x40gee.js";
+import {
+  spring2
+} from "./components-3ey0hzpb.js";
+import {
+  cn2
+} from "./components-jcnjay5g.js";
+
+// lib/focus-ring.tsx
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+function FocusRing2({ rect, shape }) {
+  const surrounding = useShape2();
+  const radius = (shape ? shapeMap2[shape] : surrounding).focusRing;
+  const reduced = useReduceMotion2();
+  return /* @__PURE__ */ jsx(AnimatePresence, {
+    children: rect && /* @__PURE__ */ jsx(motion.div, {
+      "aria-hidden": "true",
+      className: cn2("pointer-events-none absolute z-20 border border-focus-ring", radius),
+      initial: false,
+      animate: { left: rect.left - 2, top: rect.top - 2, width: rect.width + 4, height: rect.height + 4 },
+      exit: { opacity: 0, transition: spring2.fast.exit },
+      transition: reduced ? { duration: 0 } : { ...spring2.fast, opacity: { duration: spring2.fast.duration } }
+    })
+  });
+}
+export { FocusRing2 };

package/dist/shared/{components-5xc2j8jz.js → components-8tt3xbb5.js}

@@ -1,16 +1,17 @@
+"use client";
 import {
-  useReduceMotion
-} from "./components-men63rwj.js";
+  useReduceMotion2
+} from "./components-de99ykt7.js";
 import {
-  GOO_BLUR_RATIO
-} from "./components-hqeq3w9q.js";
+  spring2
+} from "./components-3ey0hzpb.js";
 import {
-  union,
-  GooLayer
-} from "./components-chacnk61.js";
+  GOO_BLUR_RATIO2
+} from "./components-awra5sff.js";
 import {
-  spring2
-} from "./components-1v7rxytx.js";
+  union2,
+  GooLayer2
+} from "./components-pw06rbxq.js";
 
 // lib/use-merge-split.tsx
 import { AnimatePresence, motion } from "motion/react";
@@ -19,7 +20,7 @@ import { jsx } from "react/jsx-runtime";
 var mergeSpring = spring2.moderate;
 var settleMs = mergeSpring.duration * 1000 + 80;
 var SEED = 0.5;
-function useSelectionRuns(checkedIndices) {
+function useSelectionRuns2(checkedIndices) {
   const prevGroupMap = useRef(new Map);
   const groupIdCounter = useRef(0);
   const runs = [];
@@ -51,7 +52,7 @@ function useSelectionRuns(checkedIndices) {
   prevGroupMap.current = nextGroupMap;
   return result;
 }
-function useMergeSplitBlocks(runs, itemRects, R) {
+function useMergeSplitBlocks2(runs, itemRects, R) {
   const blocks = [];
   for (const run of runs) {
     const first = itemRects[run.start];
@@ -107,8 +108,8 @@ var variants = (b) => ({
   enter: (mode) => mode === "goo" ? seed(b) : { ...rest(b), opacity: 0 },
   leave: (mode) => mode === "goo" ? { ...seed(b), transition: mergeSpring.exit } : { opacity: 0, transition: mode === "fade" ? mergeSpring.exit : { duration: 0 } }
 });
-function SelectionBackgrounds({ blocks }) {
-  const reduced = useReduceMotion();
+function SelectionBackgrounds2({ blocks }) {
+  const reduced = useReduceMotion2();
   const mode = blocks.some((b) => b.instant) ? "snap" : reduced ? "fade" : "goo";
   const rows = blocks.map((b) => b.key).join("|");
   const [melting, setMelting] = useState(false);
@@ -127,16 +128,16 @@ function SelectionBackgrounds({ blocks }) {
     timer.current = setTimeout(() => setMelting(false), settleMs);
   }, [rows, mode]);
   useEffect(() => () => clearTimeout(timer.current), []);
-  const box = blocks.reduce(union, null);
+  const box = blocks.reduce(union2, null);
   const changing = melting || rows !== shown.current;
   if (!changing)
     covered.current = box;
   else if (box)
-    covered.current = union(covered.current, box);
+    covered.current = union2(covered.current, box);
   radius.current = Math.max(changing ? radius.current : 0, ...blocks.flatMap((b) => b.radii));
-  return /* @__PURE__ */ jsx(GooLayer, {
+  return /* @__PURE__ */ jsx(GooLayer2, {
     active: melting,
-    blur: radius.current * GOO_BLUR_RATIO,
+    blur: radius.current * GOO_BLUR_RATIO2,
     box: covered.current,
     fill: "bg-active",
     children: /* @__PURE__ */ jsx(AnimatePresence, {
@@ -156,4 +157,4 @@ function SelectionBackgrounds({ blocks }) {
   });
 }
 
-export { useSelectionRuns, useMergeSplitBlocks, SelectionBackgrounds };
+export { useSelectionRuns2, useMergeSplitBlocks2, SelectionBackgrounds2 };

package/dist/shared/{components-vc7vq5nz.js → components-9as3rf68.js}

@@ -1,11 +1,14 @@
+"use client";
+import {
+  surfaceClasses2
+} from "./components-vf45j12c.js";
 import {
-  surfaceClasses2,
   useSurface2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 
 // primitives/surface/index.tsx
 import {