@photoroom/ui 0.1.1

package/index19.mjs

@@ -0,0 +1,35 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { forwardRef as d, useId as u } from "react";
+import { cn as b } from "./index7.mjs";
+import { LimitIndicatorGauge as l } from "./index20.mjs";
+const m = d(
+  ({ value: e, max: t, children: r, className: s, ...n }, a) => {
+    const o = u();
+    return /* @__PURE__ */ c(
+      "button",
+      {
+        ref: a,
+        className: b(
+          "h-10 px-3",
+          "flex items-center gap-2",
+          "rounded-500",
+          "hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down",
+          "focus-visible:outline-none focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
+          "transition-colors interaction-transition-type-1",
+          "disabled:cursor-not-allowed disabled:opacity-30",
+          s
+        ),
+        ...n,
+        children: [
+          /* @__PURE__ */ i(l, { value: e, max: t, "aria-labelled-by": o }),
+          /* @__PURE__ */ i("span", { id: o, className: "component-400 whitespace-nowrap text-content-secondary", children: r })
+        ]
+      }
+    );
+  }
+);
+m.displayName = "LimitButton";
+export {
+  m as LimitButton
+};
+//# sourceMappingURL=index19.mjs.map

package/index190.mjs

@@ -0,0 +1,32 @@
+import { jsxs as i, Fragment as t, jsx as e } from "react/jsx-runtime";
+import { DropZoneOverlayWrapper as f } from "./index391.mjs";
+const h = ({
+  className: o,
+  showOverlay: p,
+  overlay: s,
+  overlayClassName: a,
+  children: l,
+  onDrop: m,
+  onDragEnter: r,
+  onDragLeave: n,
+  onDragOver: c
+}) => /* @__PURE__ */ i(t, { children: [
+  /* @__PURE__ */ e("div", { className: o, onDragEnter: r, children: l }),
+  /* @__PURE__ */ e(
+    f,
+    {
+      fullscreen: !1,
+      className: a,
+      showOverlay: p,
+      onDragEnter: r,
+      onDragLeave: n,
+      onDragOver: c,
+      onDrop: m,
+      children: s
+    }
+  )
+] });
+export {
+  h as DropZoneAreaWrapper
+};
+//# sourceMappingURL=index190.mjs.map

package/index191.mjs

@@ -0,0 +1,29 @@
+import { jsx as r } from "react/jsx-runtime";
+import { DropZoneFullscreenWrapper as c } from "./index392.mjs";
+import { DropZoneOverlay as f } from "./index192.mjs";
+const Z = ({
+  showOverlay: o,
+  className: e,
+  title: p,
+  description: n,
+  tip: l,
+  onDragEnter: m,
+  onDragLeave: t,
+  onDragOver: s,
+  onDrop: a
+}) => /* @__PURE__ */ r(
+  c,
+  {
+    className: e,
+    overlay: /* @__PURE__ */ r(f, { title: p, description: n, tip: l }),
+    showOverlay: o,
+    onDragEnter: m,
+    onDragLeave: t,
+    onDragOver: s,
+    onDrop: a
+  }
+);
+export {
+  Z as DropZoneFullscreen
+};
+//# sourceMappingURL=index191.mjs.map

package/index192.mjs

@@ -0,0 +1,12 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { DropIcon as a } from "@photoroom/icons/lib/monochromes";
+const r = ({ title: l, description: t, tip: c }) => /* @__PURE__ */ e("div", { className: "flex h-full w-full flex-col items-center justify-center bg-content-accent", children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center text-white", children: [
+  /* @__PURE__ */ e(a, { className: "mb-8 h-32 w-32" }),
+  l && /* @__PURE__ */ e("h2", { className: "mb-2 text-1000 font-bold text-black", children: /* @__PURE__ */ e("span", { className: "text-white", children: l }) }),
+  t && /* @__PURE__ */ e("p", { className: "mb-1 text-600 font-medium", children: t }),
+  c && /* @__PURE__ */ e("div", { className: "flex", children: c })
+] }) });
+export {
+  r as DropZoneOverlay
+};
+//# sourceMappingURL=index192.mjs.map

package/index193.mjs

@@ -0,0 +1,24 @@
+import { jsx as d } from "react/jsx-runtime";
+import { ACCEPTED_FILE_TYPES as n } from "./index321.mjs";
+import "./index322.mjs";
+import { forwardRef as f } from "react";
+const m = f(
+  ({ onChange: r, multiple: e = !1, directory: o = !1, accept: i }, t) => /* @__PURE__ */ d(
+    "input",
+    {
+      accept: (i == null ? void 0 : i.join(",")) || n.join(","),
+      "aria-hidden": !0,
+      className: "hidden",
+      ref: t,
+      type: "file",
+      onChange: r,
+      multiple: e,
+      ...o && { webkitdirectory: "true" }
+    }
+  )
+);
+m.displayName = "HiddenFileInput";
+export {
+  m as HiddenFileInput
+};
+//# sourceMappingURL=index193.mjs.map

package/index194.mjs

@@ -0,0 +1,152 @@
+import { ACCEPTED_FILE_TYPES as A } from "./index321.mjs";
+import { useState as x, useRef as E, useCallback as l } from "react";
+import { readDirectoryFiles as C } from "./index393.mjs";
+import { usePasteFilesHandler as H } from "./index294.mjs";
+const q = ({
+  withCopyPaste: w,
+  disabled: u,
+  allowFolders: d = !1,
+  acceptedFileTypes: p,
+  onDrag: h,
+  onFileChange: m
+}) => {
+  const [v, F] = x(!1), a = E(null), P = E(null), k = E(null), D = l(
+    ({
+      multiple: e = !0,
+      accept: t = p ?? A
+    } = {}) => new Promise((r) => {
+      const n = a.current;
+      if (!n || n.disabled)
+        return;
+      const c = n.multiple, g = n.accept;
+      n.accept = t.join(","), n.multiple = e, k.current = (i) => {
+        n.multiple = c, n.accept = g, !(!i || !i.length) && r(i);
+      }, n.click();
+    }),
+    [p]
+  ), R = l(
+    async ({
+      accept: e = p ?? A
+    } = {}) => (await D({ multiple: !1, accept: e }))[0],
+    [D, p]
+  ), o = l(
+    (e, t = !1, r = !1) => {
+      u || !e || !e.length || m == null || m(e, t, r);
+    },
+    [u, m]
+  ), L = l(
+    (e) => {
+      var t;
+      e.preventDefault(), !(u || !((t = e.dataTransfer) != null && t.types.includes("Files"))) && (h == null || h(), F(!0));
+    },
+    [u, h]
+  ), S = l((e) => {
+    e.preventDefault(), F(!1);
+  }, []), I = l((e) => {
+    e.preventDefault();
+  }, []), K = l(
+    async (e) => {
+      var c, g;
+      e.preventDefault(), F(!1);
+      const t = e.dataTransfer;
+      if (!t)
+        return;
+      if (!d) {
+        o(t.files, e.shiftKey);
+        return;
+      }
+      const r = [], n = ((c = t.items) == null ? void 0 : c.length) > 0 && Array.from(t.items).some((i) => {
+        var f;
+        const s = (f = i.webkitGetAsEntry) == null ? void 0 : f.call(i);
+        return s !== null && s.isDirectory;
+      });
+      if (n) {
+        const i = Array.from(t.items);
+        for (const s of i) {
+          const f = (g = s.webkitGetAsEntry) == null ? void 0 : g.call(s);
+          if (f) {
+            if (f.isDirectory && d) {
+              const y = await C(f);
+              r.push(...y);
+            } else if (f.isFile) {
+              const y = s.getAsFile();
+              y && r.push(y);
+            }
+          }
+        }
+      } else if (t.files.length > 0) {
+        o(t.files, e.shiftKey);
+        return;
+      }
+      if (r.length > 0) {
+        const i = {
+          length: r.length,
+          item: (s) => r[s] || null,
+          [Symbol.iterator]: function* () {
+            for (let s = 0; s < r.length; s++)
+              yield r[s];
+          }
+        };
+        o(i, e.shiftKey, n);
+      }
+    },
+    [o, d]
+  ), b = l(
+    (e) => {
+      const t = k.current;
+      k.current = null, t ? t(e.target.files) : o(e.target.files);
+    },
+    [o]
+  ), G = l(() => {
+    var e;
+    (e = a.current) == null || e.click();
+  }, []), T = l(() => {
+    var e;
+    (e = P.current) == null || e.click();
+  }, []), _ = l(() => {
+    a.current && (a.current.value = "");
+  }, []), j = l(
+    (e) => {
+      const t = e.target.files;
+      if (t && t.length > 0) {
+        const r = Array.from(t).filter(
+          (n) => A.includes(n.type)
+        );
+        if (r.length > 0) {
+          const n = {
+            length: r.length,
+            item: (c) => r[c] || null,
+            [Symbol.iterator]: function* () {
+              for (let c = 0; c < r.length; c++)
+                yield r[c];
+            }
+          };
+          o(n, !1, !0);
+        }
+      }
+    },
+    [o]
+  );
+  return H((e) => {
+    u || !w || o(e);
+  }), {
+    isDragging: v,
+    inputRef: a,
+    folderInputRef: P,
+    handleChange: b,
+    handleFolderChange: j,
+    handleDragEnter: L,
+    handleDragLeave: S,
+    handleDragOver: I,
+    handleDrop: K,
+    openFilePicker: G,
+    openFolderPicker: T,
+    resetFilePicker: _,
+    waitForFiles: D,
+    waitForFile: R
+  };
+};
+export {
+  q as useFileUploader
+};
+//# sourceMappingURL=index194.mjs.map

package/index195.mjs

@@ -0,0 +1,16 @@
+import { jsx as n } from "react/jsx-runtime";
+import { clsx as r } from "./index296.mjs";
+const x = {
+  h1: "text-1100",
+  h2: "text-1000",
+  h3: "text-900",
+  h4: "text-800",
+  h5: "text-700"
+}, h = ({ className: e, level: s, children: o }) => {
+  const t = `h${s}`, a = x[t];
+  return /* @__PURE__ */ n(t, { className: r(e, a, "font-bold text-content-primary"), children: o });
+};
+export {
+  h as Heading
+};
+//# sourceMappingURL=index195.mjs.map

package/index196.mjs

@@ -0,0 +1,27 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+const m = l(
+  ({ as: t = "p", text: r, segments: o, highLightStyle: s, className: g }, n) => {
+    let e = r;
+    for (const p of o) {
+      const a = p.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      e = e.replace(
+        new RegExp(a, "gi"),
+        (i) => `<strong style="${s}">${i}</strong>`
+      );
+    }
+    return /* @__PURE__ */ d(
+      t,
+      {
+        ref: n,
+        className: g,
+        dangerouslySetInnerHTML: { __html: e }
+      }
+    );
+  }
+);
+m.displayName = "HightLightedText";
+export {
+  m as HighLightedText
+};
+//# sourceMappingURL=index196.mjs.map

package/index197.mjs

@@ -0,0 +1,19 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { clsx as s } from "./index296.mjs";
+const m = ({ icon: e, label: n, className: c }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: s(
+      "flex h-8 items-center justify-center space-x-1 bg-accent-alpha-2 text-500 font-medium text-content-accent",
+      c
+    ),
+    children: [
+      e && /* @__PURE__ */ t(e, { className: "h-4 w-4 shrink-0 text-current" }),
+      /* @__PURE__ */ t("div", { children: n })
+    ]
+  }
+);
+export {
+  m as InfoBanner
+};
+//# sourceMappingURL=index197.mjs.map

package/index198.mjs

@@ -0,0 +1,34 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Drawer as r } from "./index382.mjs";
+import { cn as i } from "./index7.mjs";
+const u = ({
+  overlayClassName: o,
+  contentClassName: a,
+  open: n,
+  trigger: t,
+  withCloseHandle: d,
+  children: s,
+  onOpenChange: c
+}) => /* @__PURE__ */ l(r.Root, { open: n, onOpenChange: c, children: [
+  t && /* @__PURE__ */ e(r.Trigger, { asChild: !0, children: t }),
+  /* @__PURE__ */ l(r.Portal, { children: [
+    /* @__PURE__ */ e(r.Overlay, { className: i("fixed inset-0 bg-black-alpha-6", o) }),
+    /* @__PURE__ */ e(
+      r.Content,
+      {
+        className: i(
+          "fixed bottom-0 left-0 right-0 rounded-t-[12px] bg-white outline-none",
+          a
+        ),
+        children: /* @__PURE__ */ l("div", { className: "rounded-t-[12px] bg-white", children: [
+          d && /* @__PURE__ */ e("div", { className: "pb-8 pt-4", children: /* @__PURE__ */ e("div", { className: "mx-auto h-1.5 w-12 flex-shrink-0 rounded-full bg-neutral-300" }) }),
+          s
+        ] })
+      }
+    )
+  ] })
+] });
+export {
+  u as MobileDrawer
+};
+//# sourceMappingURL=index198.mjs.map

package/index199.mjs

@@ -0,0 +1,256 @@
+import { jsxs as A, jsx as d } from "react/jsx-runtime";
+import { RemoveIcon as _, AddIcon as q } from "@photoroom/icons/lib/monochromes";
+import { useRef as w, useState as B, useCallback as c, useMemo as E, useEffect as S } from "react";
+import { isMobile as F } from "./index319.mjs";
+import { cn as x } from "./index7.mjs";
+import { NumberSelectFieldButton as T } from "./index401.mjs";
+import { NumberSelectFieldList as G } from "./index402.mjs";
+import { Popover as J } from "./index43.mjs";
+const Q = 120, X = 200, ce = ({
+  value: a,
+  onChange: b,
+  min: D = -1 / 0,
+  max: g = 1 / 0,
+  step: t = 1,
+  disabled: I,
+  options: o,
+  className: K,
+  ...L
+}) => {
+  const s = w(!1), U = w(null), M = w(null), [l, p] = B(a.toString()), R = w(l), [m, f] = B(null), v = w(null), i = c(
+    (e) => {
+      if (e === "")
+        return !1;
+      const n = Number(e);
+      return !isNaN(n) && (D === void 0 || n >= D) && (g === void 0 || n <= g);
+    },
+    [D, g]
+  ), r = c(() => {
+    v.current && (clearInterval(v.current), v.current = null);
+  }, []), h = c(
+    (e) => {
+      p((n) => {
+        const u = (() => {
+          const V = (e > 0 ? Math.floor : Math.ceil)(Number(n) + e);
+          return i(V) ? V.toString() : (r(), n);
+        })();
+        return i(u) && b(Number(u)), u;
+      });
+    },
+    [r, i, b]
+  ), y = c(
+    (e) => {
+      s.current || (s.current = !0, h(e), r(), v.current = window.setInterval(() => {
+        h(e);
+      }, Q));
+    },
+    [r, h]
+  ), N = c(
+    (e) => {
+      r(), v.current = window.setTimeout(() => {
+        y(e);
+      }, X);
+    },
+    [r, y]
+  ), k = c(
+    (e) => {
+      b(e), p(e.toString());
+    },
+    [b]
+  ), O = c(
+    (e) => {
+      const n = e.shiftKey && t === 1 ? 10 : t;
+      switch (e.key) {
+        case "ArrowUp": {
+          if (e.preventDefault(), o) {
+            f((u) => u === null || u - 1 < 0 ? o.length - 1 : u - 1);
+            return;
+          }
+          y(n);
+          break;
+        }
+        case "ArrowDown": {
+          if (e.preventDefault(), o) {
+            f((u) => u === null || u + 1 >= o.length ? 0 : u + 1);
+            return;
+          }
+          y(-n);
+          break;
+        }
+        case "Enter": {
+          if (e.preventDefault(), m === null)
+            return;
+          k(o[m]), f(null);
+          break;
+        }
+        case "Escape": {
+          e.preventDefault(), f(null), r();
+          break;
+        }
+        default: {
+          f(null);
+          break;
+        }
+      }
+    },
+    [r, o, k, m, y, t]
+  ), j = c(
+    (e) => {
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowDown": {
+          e.preventDefault(), s.current = !1, r();
+          break;
+        }
+      }
+    },
+    [r]
+  ), C = c(
+    (e) => {
+      const n = e.target.value;
+      p(n), i(n) && b(Number(n));
+    },
+    [i, b]
+  ), z = c(() => {
+    var e;
+    o && f(o.indexOf(a) ?? 0), (e = U.current) == null || e.select();
+  }, [o, a]), H = c(() => {
+    o && f(null);
+    const e = a.toString();
+    l !== e && p(e);
+  }, [l, o, a]), P = E(
+    () => i(Number(l) + t),
+    [i, l, t]
+  ), W = E(
+    () => i(Number(l) - t),
+    [i, l, t]
+  );
+  return S(() => () => {
+    r();
+  }, [r]), S(() => {
+    var e, n;
+    if (m === null) {
+      (e = M.current) == null || e.close();
+      return;
+    }
+    (n = M.current) == null || n.open();
+  }, [m]), S(() => {
+    R.current = l;
+  }, [l]), S(() => {
+    a !== Number(R.current) && p(a.toString());
+  }, [a]), /* @__PURE__ */ A("div", { className: x("relative inline-block", K), children: [
+    /* @__PURE__ */ A(
+      "span",
+      {
+        className: x(
+          "group inline-flex items-center justify-center",
+          I && "pointer-events-none opacity-30"
+        ),
+        children: [
+          /* @__PURE__ */ d(
+            T,
+            {
+              disabled: !W,
+              "aria-label": "-",
+              onClick: () => {
+                h(-t);
+              },
+              onMouseDown: () => {
+                N(-t);
+              },
+              onTouchStart: () => {
+                N(-t);
+              },
+              onMouseUp: () => {
+                s.current = !1, r();
+              },
+              onTouchEnd: () => {
+                s.current = !1, r();
+              },
+              onMouseLeave: () => {
+                F || (s.current = !1, r());
+              },
+              onContextMenu: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ d(_, { className: "h-4 w-4 text-content-primary" })
+            }
+          ),
+          /* @__PURE__ */ d(
+            "input",
+            {
+              ...L,
+              ref: U,
+              disabled: I,
+              type: "number",
+              className: x(
+                "component-500 h-10 w-10 border-0 border-y border-misc-border-box bg-surface-default p-0 text-center text-content-primary focus:ring-0",
+                "focus-visible:border focus-visible:border-content-accent focus-visible:outline-none",
+                "focus-visible:rounded-[3px] focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring",
+                "group-hover:[&:not(:focus-visible)]:border-misc-border-box-hover",
+                "group-focus-visible:[&:not(:focus-visible)]:border-misc-border-box-hover",
+                "group-disabled:opacity-30"
+              ),
+              value: l,
+              onFocus: z,
+              onChange: C,
+              onBlur: H,
+              onKeyDown: O,
+              onKeyUp: j
+            }
+          ),
+          /* @__PURE__ */ d(
+            T,
+            {
+              disabled: !P,
+              "aria-label": "+",
+              onClick: () => {
+                h(t);
+              },
+              onMouseDown: () => {
+                N(t);
+              },
+              onTouchStart: () => {
+                N(t);
+              },
+              onMouseUp: () => {
+                s.current = !1, r();
+              },
+              onTouchEnd: () => {
+                s.current = !1, r();
+              },
+              onMouseLeave: () => {
+                F || (s.current = !1, r());
+              },
+              onContextMenu: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ d(q, { className: "h-4 w-4 text-content-primary" })
+            }
+          )
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ d(
+      J,
+      {
+        handlesRef: M,
+        triggerElement: (
+          // placeholder used for popover placement only
+          /* @__PURE__ */ d("div", { className: "pointer-events-none absolute inset-0 h-full" })
+        ),
+        preventAutoFocus: !0,
+        children: /* @__PURE__ */ d(
+          G,
+          {
+            values: o,
+            selectedIndex: m,
+            onSelect: (e) => {
+              k(e), f(null);
+            }
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  ce as NumberSelectField
+};
+//# sourceMappingURL=index199.mjs.map

package/index20.mjs

@@ -0,0 +1,55 @@
+import { jsxs as i, Fragment as k, jsx as t } from "react/jsx-runtime";
+import { cn as x } from "./index7.mjs";
+const r = 16, e = 2, o = (r - e) / 2, s = 2 * Math.PI * o, f = ({
+  value: a = 0,
+  max: n = 1,
+  className: l,
+  ...h
+}) => {
+  const m = Math.min(Math.max(a / n, 0), 1), c = s * m, d = s - c;
+  return /* @__PURE__ */ i(k, { children: [
+    /* @__PURE__ */ t("meter", { value: a, max: n, className: "sr-only", ...h }),
+    /* @__PURE__ */ i(
+      "svg",
+      {
+        "aria-hidden": "true",
+        viewBox: `0 0 ${r} ${r}`,
+        className: x("size-4 shrink-0", l),
+        children: [
+          /* @__PURE__ */ t(
+            "circle",
+            {
+              cx: r / 2,
+              cy: r / 2,
+              r: o,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: e,
+              className: "text-neutral-alpha-3"
+            }
+          ),
+          /* @__PURE__ */ t(
+            "circle",
+            {
+              cx: r / 2,
+              cy: r / 2,
+              r: o,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: e,
+              strokeDasharray: `${c}, ${d}`,
+              strokeDashoffset: s / 4,
+              strokeLinecap: "round",
+              className: "text-neutral-7",
+              style: { transition: "stroke-dasharray 0.15s ease" }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  f as LimitIndicatorGauge
+};
+//# sourceMappingURL=index20.mjs.map