commerce-toolkit 0.3.0 → 0.5.0

package/dist/file-input.js

@@ -0,0 +1,625 @@
+import { jsx as o, jsxs as re } from "react/jsx-runtime";
+import { a as V, c as f } from "./utils-CRiPKpXj.js";
+import { createContext as X, useRef as q, useReducer as ne, useState as J, useCallback as l, useMemo as O, useContext as ie, useId as se, useEffect as ae, use as oe } from "react";
+import { B as le } from "./button-W0_PtryU.js";
+import { S as ue } from "./index-DD8W7cMj.js";
+import fe from "./file-image-mD9END8E.js";
+import ce from "./file-play-Me3yGHo4.js";
+import de from "./file-audio-Sgr9gwDM.js";
+import pe from "./file-text-CvVtG9rC.js";
+import me from "./file-code-DTFxRV6s.js";
+import ve from "./file-archive-Dnn2js1U.js";
+import ge from "./file-cog-J1O7eE3I.js";
+import be from "./file-CF5CMt0u.js";
+const Q = {
+  files: /* @__PURE__ */ new Map()
+};
+function he(t, r) {
+  switch (r.type) {
+    case "ADD_FILES": {
+      const e = new Map(t.files);
+      return r.files.forEach((n) => {
+        e.has(n) || e.set(n, {
+          file: n,
+          progress: 0,
+          status: "idle"
+        });
+      }), { ...t, files: e };
+    }
+    case "SET_PROGRESS": {
+      const e = new Map(t.files), n = e.get(r.file);
+      return n && e.set(r.file, {
+        ...n,
+        progress: r.progress,
+        status: "uploading"
+      }), { ...t, files: e };
+    }
+    case "SET_SUCCESS": {
+      const e = new Map(t.files), n = e.get(r.file);
+      return n && e.set(r.file, {
+        ...n,
+        status: "success",
+        progress: 100
+      }), { ...t, files: e };
+    }
+    case "SET_ERROR": {
+      const e = new Map(t.files), n = e.get(r.file);
+      return n && e.set(r.file, {
+        ...n,
+        status: "error",
+        error: r.error
+      }), { ...t, files: e };
+    }
+    case "REMOVE_FILE": {
+      const e = new Map(t.files);
+      return e.delete(r.file), { ...t, files: e };
+    }
+    case "CLEAR":
+      return Q;
+    default:
+      return t;
+  }
+}
+const U = X(null);
+function D() {
+  const t = ie(U);
+  if (!t)
+    throw new Error("useFileInput must be used within a FileInputRoot");
+  return t;
+}
+function Pe({
+  id: t,
+  children: r,
+  className: e,
+  accept: n,
+  multiple: i,
+  disabled: m,
+  invalid: p,
+  name: h,
+  maxFiles: b,
+  maxSize: v,
+  onFileValidate: y,
+  onFileAccept: w,
+  onFileReject: z,
+  onUploadFile: C,
+  onUploadSuccess: N,
+  onUploadError: $,
+  ...M
+}) {
+  const a = q(null), g = `${t}-input`, [I, E] = ne(he, Q), [S, W] = J(void 0), A = l((c, d) => {
+    E({ type: "SET_PROGRESS", file: c, progress: d });
+  }, []), L = l((c) => {
+    E({ type: "SET_SUCCESS", file: c });
+  }, []), H = l((c, d) => {
+    E({ type: "SET_ERROR", file: c, error: d });
+  }, []), B = l((c) => {
+    E({ type: "ADD_FILES", files: c });
+  }, []), G = l((c) => {
+    const d = a.current;
+    if (d?.files) {
+      const T = new DataTransfer();
+      Array.from(d.files).filter((s) => s !== c).forEach((s) => T.items.add(s)), d.files = T.files;
+    }
+    E({ type: "REMOVE_FILE", file: c });
+  }, []), K = l(() => {
+    a.current?.click();
+  }, []), P = l(
+    (c) => {
+      const d = [], T = [];
+      c.forEach((s) => {
+        let x = !1, u = "";
+        if (y) {
+          const F = y(s);
+          F != null && (u = F, x = !0);
+        }
+        if (!x && n != null) {
+          const F = n.split(",").map((R) => R.trim().toLowerCase()), _ = s.type.toLowerCase(), te = `.${s.name.split(".").pop()?.toLowerCase()}`;
+          F.some(
+            (R) => R === _ || R === te || R.endsWith("/*") && _.startsWith(R.slice(0, -1))
+          ) || (u = "File type not accepted", x = !0);
+        }
+        !x && v != null && s.size > v && (u = "File size exceeds limit", x = !0), x ? (W(u), z?.(s, u)) : (W(void 0), w?.(s), d.push(s), T.push(s));
+      });
+      const j = a.current;
+      if (j) {
+        const s = new DataTransfer(), u = [...Array.from(I.files.keys()), ...T], F = b != null ? u.slice(0, b) : u;
+        F.forEach((_) => s.items.add(_)), j.files = s.files, B(F);
+      }
+      d.length > 0 && (C ? d.forEach((s) => {
+        A(s, 0);
+        const x = (u) => {
+          A(s, u);
+        };
+        Promise.resolve(C(s, x)).then((u) => {
+          L(s), N?.(s, u);
+        }).catch((u) => {
+          const F = u instanceof Error ? u : new Error("Upload failed");
+          H(s, F.message), $?.(s, F);
+        });
+      }) : d.forEach((s) => {
+        L(s);
+      }));
+    },
+    [
+      n,
+      b,
+      v,
+      I.files,
+      y,
+      w,
+      z,
+      C,
+      N,
+      $,
+      B,
+      A,
+      L,
+      H
+    ]
+  ), Z = l(
+    (c) => {
+      const d = Array.from(c.target.files ?? []);
+      P(d);
+    },
+    [P]
+  ), ee = O(
+    () => ({
+      files: I.files,
+      id: t,
+      inputId: g,
+      inputRef: a,
+      disabled: m,
+      invalid: p,
+      validationError: S,
+      addFiles: P,
+      removeFile: G,
+      openFilePicker: K
+    }),
+    [
+      I.files,
+      t,
+      g,
+      m,
+      p,
+      S,
+      P,
+      G,
+      K
+    ]
+  );
+  return /* @__PURE__ */ o(U.Provider, { value: ee, children: /* @__PURE__ */ re(
+    "div",
+    {
+      "aria-disabled": m === !0 ? !0 : void 0,
+      "aria-invalid": p === !0 || S != null ? !0 : void 0,
+      className: V("group", e, "@container"),
+      ...M,
+      children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            accept: n,
+            className: "sr-only",
+            disabled: m,
+            id: g,
+            multiple: i,
+            name: h,
+            onChange: Z,
+            ref: a,
+            tabIndex: -1,
+            type: "file"
+          }
+        ),
+        r
+      ]
+    }
+  ) });
+}
+function _e({ children: t, className: r, ...e }) {
+  const { id: n, disabled: i, invalid: m, addFiles: p, openFilePicker: h } = D(), [b, v] = J(!1), y = l(
+    (a) => {
+      a.preventDefault(), v(!1);
+      const g = Array.from(a.dataTransfer.files);
+      p(g);
+    },
+    [p]
+  ), w = l((a) => {
+    a.preventDefault(), v(!0);
+  }, []), z = l((a) => {
+    a.preventDefault(), v(!0);
+  }, []), C = l((a) => {
+    const g = a.relatedTarget;
+    g && g instanceof Node && a.currentTarget.contains(g) || (a.preventDefault(), v(!1));
+  }, []), N = l(
+    (a) => {
+      (a.key === "Enter" || a.key === " ") && (a.preventDefault(), h());
+    },
+    [h]
+  ), $ = l(
+    (a) => {
+      a.preventDefault(), v(!1);
+      const g = a.clipboardData.items;
+      if (g.length === 0) return;
+      const I = [];
+      for (const E of Array.from(g))
+        if (E.kind === "file") {
+          const S = E.getAsFile();
+          S && I.push(S);
+        }
+      I.length !== 0 && p(I);
+    },
+    [p]
+  ), M = l(() => {
+    h();
+  }, [h]);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "aria-controls": `${n}-input ${n}-list`,
+      "aria-disabled": i === !0 ? !0 : void 0,
+      "aria-invalid": m === !0 ? !0 : void 0,
+      className: V(
+        // Base layout
+        "min-h-19 flex flex-col items-center justify-center gap-1.5",
+        // Spacing
+        "p-4",
+        // Borders & Rounded
+        "rounded-lg border-[1.5px] border-dashed border-[var(--file-input-dropzone-border,hsl(var(--contrast-200)))]",
+        // Background
+        "bg-[var(--file-input-dropzone-background,hsl(var(--background)))]",
+        // Interaction
+        "cursor-pointer select-none",
+        // Transitions
+        "transition-colors duration-300 ease-in-out",
+        // Hover state
+        "hover:border-[var(--file-input-dropzone-border-hover,hsl(var(--foreground)))] hover:bg-[var(--file-input-dropzone-background-hover,hsl(var(--contrast-100)))]",
+        // Focus-visible state
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--file-input-focus,hsl(var(--primary)))] focus-visible:ring-offset-2",
+        // Disabled state
+        "group-aria-disabled:cursor-not-allowed group-aria-disabled:border-[var(--file-input-dropzone-border-disabled,color-mix(in_oklab,hsl(var(--contrast-200))_70%,transparent))] group-aria-disabled:bg-[var(--file-input-dropzone-background-disabled,hsl(var(--background)))]",
+        "group-aria-disabled:focus-visible:outline-none group-aria-disabled:focus-visible:ring-0 group-aria-disabled:focus-visible:ring-offset-0",
+        // Invalid state
+        "group-aria-invalid:border-[var(--file-input-dropzone-border-error,hsl(var(--error)))]",
+        // Dragging state
+        "data-[dragging]:border-[var(--file-input-dropzone-border-dragging,hsl(var(--foreground)))] data-[dragging]:bg-[var(--file-input-dropzone-background-dragging,color-mix(in_oklab,hsl(var(--success)),white_75%))]",
+        // Container queries
+        "@sm:flex-row",
+        r
+      ),
+      "data-dragging": b ? "" : void 0,
+      onClick: M,
+      onDragEnter: z,
+      onDragLeave: C,
+      onDragOver: w,
+      onDrop: y,
+      onKeyDown: N,
+      onPaste: $,
+      role: "button",
+      tabIndex: i === !0 ? -1 : 0,
+      ...e,
+      children: t
+    }
+  );
+}
+function Me({ children: t, disabled: r, ...e }) {
+  const { inputId: n, disabled: i, openFilePicker: m } = D(), p = r ?? i;
+  return /* @__PURE__ */ o(
+    le,
+    {
+      "aria-controls": `${n}-input`,
+      className: "pointer-events-none",
+      disabled: p,
+      onClick: m,
+      size: "small",
+      tabIndex: -1,
+      type: "button",
+      variant: "outline",
+      ...e,
+      children: t
+    }
+  );
+}
+const Y = X(void 0);
+function Ae({ className: t, children: r, file: e, ...n }) {
+  const i = se(), { files: m, removeFile: p } = D(), h = q(!1), b = m.get(e), v = l(() => p(e), [p, e]);
+  if (!b)
+    return null;
+  const y = O(
+    () => ({ file: e, fileState: b, generatedId: i, removeFile: v }),
+    [e, b, i, v]
+  );
+  ae(() => {
+    h.current || setTimeout(() => {
+      h.current = !0;
+    }, 300);
+  }, [b]);
+  const { status: w, error: z } = b;
+  return /* @__PURE__ */ o(Y.Provider, { value: y, children: /* @__PURE__ */ o(
+    "div",
+    {
+      "aria-describedby": `${i}-status${z != null ? ` ${i}-error` : ""}`.trim(),
+      "aria-invalid": w === "error",
+      "aria-labelledby": `${i}-name`,
+      className: f(
+        "relative flex items-center justify-between gap-2 overflow-hidden rounded-lg border-[1.5px] border-[var(--file-input-item-border,hsl(var(--contrast-200)))] p-4",
+        // Start animation state
+        "data-[start-animation]:animate-in data-[start-animation]:fade-in-0 data-[start-animation]:slide-in-from-top-2",
+        // Invalid state
+        "aria-invalid:border-[var(--file-input-item-border-error,hsl(var(--error)))]",
+        t
+      ),
+      "data-slot": "file-input-item",
+      "data-start-animation": h.current ? void 0 : "",
+      role: "listitem",
+      ...n,
+      children: typeof r == "function" ? r(y) : r
+    }
+  ) });
+}
+function k() {
+  const t = oe(Y);
+  if (!t)
+    throw new Error("useFileInputItem must be used within a FileInputItem");
+  return t;
+}
+function Le({ className: t, children: r, ...e }) {
+  const { id: n, files: i } = D();
+  if (i.size === 0)
+    return null;
+  const m = O(() => ({ files: i }), [i]);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: f("mt-3 grid gap-3", t),
+      "data-slot": "file-input-list",
+      id: `${n}-list`,
+      role: "list",
+      ...e,
+      children: typeof r == "function" ? r(m) : r
+    }
+  );
+}
+function je({ className: t, children: r, ...e }) {
+  const { id: n } = D();
+  return /* @__PURE__ */ o(
+    "p",
+    {
+      className: f(
+        "mt-2 font-[family-name:var(--file-input-message-font-family,var(--font-family-body))] text-sm font-normal text-[var(--file-input-message,hsl(var(--contrast-500)))]",
+        t
+      ),
+      "data-slot": "file-input-message",
+      id: `${n}-message`,
+      ...e,
+      children: r
+    }
+  );
+}
+function Oe({
+  className: t,
+  children: r,
+  ...e
+}) {
+  const { id: n, validationError: i } = D();
+  return i != null ? null : /* @__PURE__ */ o(
+    "p",
+    {
+      className: f(
+        "font-[family-name:var(--file-input-dropzone-message-font-family,var(--font-family-body))] text-sm font-normal text-[var(--file-input-dropzone-message,hsl(var(--contrast-500)))]",
+        // Disabled styles
+        "group-aria-disabled:text-[var(--file-input-dropzone-message-disabled,color-mix(in_oklab,hsl(var(--contrast-500))_70%,transparent))]",
+        t
+      ),
+      "data-slot": "file-input-dropzone-hint",
+      id: `${n}-hint`,
+      ...e,
+      children: r
+    }
+  );
+}
+function We({
+  className: t,
+  children: r,
+  ...e
+}) {
+  const { id: n, validationError: i } = D();
+  return i == null ? null : /* @__PURE__ */ o(
+    "p",
+    {
+      className: f(
+        "font-[family-name:var(--file-input-dropzone-message-font-family,var(--font-family-body))] text-sm font-normal text-[var(--file-input-dropzone-message-error,hsl(var(--error)))]",
+        t
+      ),
+      "data-slot": "file-input-dropzone-error",
+      id: `${n}-error`,
+      role: "alert",
+      ...e,
+      children: r ?? i
+    }
+  );
+}
+function He({ className: t, children: r, ...e }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: f("flex min-w-0 flex-1 flex-col", t),
+      "data-slot": "file-input-metadata",
+      ...e,
+      children: r
+    }
+  );
+}
+function Be({ className: t, children: r, ...e }) {
+  return /* @__PURE__ */ o("div", { className: f("flex-1", t), "data-slot": "file-input-details", ...e, children: r });
+}
+function Ge({ className: t, children: r, ...e }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: f(
+        "flex items-center gap-1 font-[family-name:var(--file-input-item-name-font-family,var(--font-family-body))]",
+        t
+      ),
+      "data-slot": "file-input-header",
+      ...e,
+      children: r
+    }
+  );
+}
+function Ke({ className: t, children: r, ...e }) {
+  const { generatedId: n } = k();
+  return /* @__PURE__ */ o(
+    "p",
+    {
+      className: f(
+        "truncate text-sm font-semibold text-[var(--file-input-item-name,hsl(var(--foreground)))]",
+        t
+      ),
+      "data-slot": "file-input-name",
+      id: `${n}-name`,
+      ...e,
+      children: r
+    }
+  );
+}
+function Ve({ className: t, children: r, ...e }) {
+  const { generatedId: n } = k();
+  return /* @__PURE__ */ o(
+    "p",
+    {
+      className: f(
+        "text-xs font-normal text-[var(--file-input-item-status,hsl(var(--contrast-500)))]",
+        t
+      ),
+      "data-slot": "file-input-status",
+      id: `${n}-status`,
+      ...e,
+      children: r
+    }
+  );
+}
+function Xe({ className: t, children: r, ...e }) {
+  const { generatedId: n } = k();
+  return /* @__PURE__ */ o(
+    "p",
+    {
+      className: f(
+        "text-xs font-normal text-[var(--file-input-item-status-error,hsl(var(--error)))]",
+        t
+      ),
+      "data-slot": "file-input-error",
+      id: `${n}-error`,
+      ...e,
+      children: r
+    }
+  );
+}
+function qe({ className: t, children: r, ...e }) {
+  const {
+    fileState: {
+      file: { name: n }
+    },
+    removeFile: i
+  } = k();
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      "aria-label": `Remove ${n}`,
+      className: f(
+        "inline-flex size-8 cursor-pointer items-center justify-center rounded-full transition-colors",
+        // Hover state
+        "hover:bg-[var(--file-input-item-delete-hover,hsl(var(--contrast-100)))]",
+        // Focus-visible state
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--file-input-focus,hsl(var(--primary)))]",
+        t
+      ),
+      "data-slot": "file-input-remove",
+      onClick: i,
+      type: "button",
+      ...e,
+      children: r
+    }
+  );
+}
+function Je({ className: t, ...r }) {
+  const {
+    generatedId: e,
+    fileState: { progress: n }
+  } = k();
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "aria-labelledby": `${e}-name`,
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": n,
+      "aria-valuetext": `${n}%`,
+      className: f(
+        "absolute bottom-0 left-0 h-1 w-full bg-[var(--file-input-item-progress,hsl(var(--primary)))] transition-transform duration-300 ease-linear",
+        t
+      ),
+      role: "progressbar",
+      style: { transform: `translateX(-${100 - n}%)` },
+      ...r
+    }
+  );
+}
+function Qe({ asChild: t = !1, className: r, children: e }) {
+  const { fileState: n } = k(), i = Fe(n.file);
+  return t ? /* @__PURE__ */ o(
+    ue,
+    {
+      className: f("size-4 text-[var(--file-input-icon,hsl(var(--contrast-400)))]", r),
+      "data-slot": "file-input-icon",
+      children: e
+    }
+  ) : /* @__PURE__ */ o(
+    i,
+    {
+      className: f("size-4 text-[var(--file-input-icon,hsl(var(--contrast-400)))]", r),
+      "data-slot": "file-input-icon"
+    }
+  );
+}
+function Fe(t) {
+  const r = t.type, e = t.name.split(".").pop()?.toLowerCase() ?? "";
+  return r.startsWith("image/") ? fe : r.startsWith("video/") ? ce : r.startsWith("audio/") ? de : r.startsWith("text/") || ["txt", "md", "rtf", "pdf"].includes(e) ? pe : [
+    "html",
+    "css",
+    "js",
+    "jsx",
+    "ts",
+    "tsx",
+    "json",
+    "xml",
+    "php",
+    "py",
+    "rb",
+    "java",
+    "c",
+    "cpp",
+    "cs"
+  ].includes(e) ? me : ["zip", "rar", "7z", "tar", "gz", "bz2"].includes(e) ? ve : ["exe", "msi", "app", "apk", "deb", "rpm"].includes(e) || r.startsWith("application/") ? ge : be;
+}
+export {
+  Be as Details,
+  _e as Dropzone,
+  We as DropzoneError,
+  Oe as DropzoneHint,
+  Xe as Error,
+  Ge as Header,
+  Qe as Icon,
+  Ae as Item,
+  Le as List,
+  je as Message,
+  He as Metadata,
+  Ke as Name,
+  Je as Progress,
+  qe as Remove,
+  Pe as Root,
+  Ve as Status,
+  Me as Trigger,
+  D as useFileInput,
+  k as useFileInputItem
+};
+//# sourceMappingURL=file-input.js.map