@janbox/storefront-builder 2.0.1 → 2.0.2

package/dist/dropzone-CF4CWXth.js

@@ -0,0 +1,546 @@
+import { jsx as t, jsxs as R, Fragment as xe } from "@emotion/react/jsx-runtime";
+import { Children as B, isValidElement as _, cloneElement as q, useRef as $, useEffect as Ce, useMemo as j, useCallback as X, Fragment as ke } from "react";
+import { useControllableState as I } from "@janbox/storefront-ui/hooks";
+import { t as u, l as J, k as K, W as P, P as ye, M as Ie, D as Se, E as We, F as Ne, G as Q, H as Ve } from "./dialog-header-Bh3Dkw2q.js";
+import { ClassNames as Ee } from "@emotion/react";
+import { useMergeRefs as G, useFloating as ee, autoUpdate as te, offset as ne, flip as oe, size as se, useClick as re, useHover as Re, safePolygon as Ae, useDismiss as ie, useRole as le, useInteractions as ae, useFloatingParentNodeId as Te, FloatingTree as Oe, FloatingPortal as Pe } from "@floating-ui/react";
+import { isNumber as Me, isNil as M, merge as ze, isUndefined as ce, get as D } from "lodash-es";
+import { useUpdateEffect as Fe } from "react-use";
+import { FLOATING_Z_INDEX as L } from "@janbox/storefront-ui/theme";
+import { useVirtualizer as De } from "@tanstack/react-virtual";
+import { OverlayScrollbarsComponent as Le } from "overlayscrollbars-react";
+import { useDropzone as Be } from "react-dropzone";
+const lt = ({
+  children: e,
+  defaultValue: o,
+  value: s,
+  onSelectionChange: l,
+  ...a
+}) => {
+  const [i, b] = I({
+    defaultValue: o ?? null,
+    value: s
+  }), c = B.toArray(e).filter(
+    (r) => _(r)
+  ), d = (r) => {
+    const w = r.currentTarget.value;
+    w !== i && (b(w), l?.(w, r));
+  };
+  return /* @__PURE__ */ t(Ee, { children: ({ cx: r, css: w }) => /* @__PURE__ */ t(
+    "div",
+    {
+      css: {
+        padding: 4,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        borderRadius: 8,
+        backgroundColor: u.palette.white["1s"]
+      },
+      ...a,
+      children: c.map(
+        (p) => q(p, {
+          ...p.props,
+          onClick(v) {
+            d(v), p.props.onClick?.(v);
+          },
+          className: r(
+            w([
+              {
+                color: u.palette.white["4s"]
+              },
+              p.props.value?.toString() === i && {
+                backgroundColor: u.palette.black["7s"],
+                color: u.palette.white["6s"]
+              }
+            ]),
+            p.props.className
+          )
+        })
+      )
+    }
+  ) });
+}, Z = 10, at = ({
+  min: e = 0,
+  max: o = Number.MAX_SAFE_INTEGER,
+  fractionDigits: s = 0,
+  value: l,
+  defaultValue: a,
+  step: i = 0,
+  ref: b,
+  ...c
+}) => {
+  const d = $(null), [r, w] = I({
+    value: l?.toString(),
+    defaultValue: a?.toString() ?? ""
+  }), p = parseFloat(r), v = G([b, d]), S = typeof s == "number" ? s : Z, W = (n) => {
+    if (n = n.replace(/e|E/g, ""), e >= 0 && (n = n.replace(/^-/, "")), s === 0)
+      n = n.replace(/\.\d+$/, "");
+    else {
+      const g = n.split(".");
+      if (g.length > 1) {
+        const h = g.at(1)?.slice(0, Math.min(S, Z));
+        n = `${g.at(0)}.${h}`;
+      }
+    }
+    return c.transform?.(n) ?? n;
+  }, N = (n) => {
+    c.mode === "onBlur" && n.target.valueAsNumber < e && (n.target.value = e.toString()), w(n.target.value), c.onChange?.(n);
+  }, V = (n) => {
+    (n.key === "e" || n.key === "E") && n.preventDefault(), c.onKeyDown?.(n);
+  }, y = (n) => {
+    if (!d.current) return;
+    Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set?.call(d.current, n);
+    const h = new Event("input", { bubbles: !0 });
+    d.current.dispatchEvent(h);
+  }, C = (n) => {
+    const g = d.current;
+    if (M(g)) return;
+    const h = g.valueAsNumber, k = Math.min(isNaN(h) ? e + i : h + i, o);
+    h !== k && y(k.toString());
+  }, E = (n) => {
+    const g = d.current;
+    if (M(g)) return;
+    const h = g.valueAsNumber, k = Math.max(isNaN(h) ? e : h - i, e);
+    h !== k && y(k.toString());
+  };
+  return /* @__PURE__ */ t(
+    J,
+    {
+      ...c,
+      css: {
+        "::-webkit-outer-spin-button": {
+          margin: 0,
+          WebkitAppearance: "none"
+        },
+        "::-webkit-inner-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        }
+      },
+      prefix: c.prefix ?? (i > 0 ? /* @__PURE__ */ t(
+        K,
+        {
+          disabled: Me(l) && l <= e,
+          onClick: E,
+          "aria-disabled": isNaN(p) ? !1 : p >= o,
+          children: /* @__PURE__ */ t(P, { source: Ie })
+        }
+      ) : null),
+      suffix: c.suffix ?? (i > 0 ? /* @__PURE__ */ t(K, { onClick: C, "aria-disabled": isNaN(p) ? !1 : p <= e, children: /* @__PURE__ */ t(P, { source: ye }) }) : null),
+      type: "number",
+      value: r,
+      onChange: N,
+      transform: W,
+      ref: v,
+      onKeyDown: V
+    }
+  );
+}, ct = ({ event: e = "click", reason: o, ref: s, ...l }) => {
+  const a = $(null), {
+    context: { onOpenChange: i }
+  } = Se(), b = G([s, a]);
+  return Ce(() => {
+    const c = a.current;
+    if (!c) return;
+    const d = function(r) {
+      i?.(!1, r, o);
+    };
+    return c.addEventListener(e, d), () => {
+      c.removeEventListener(e, d);
+    };
+  }, [e, i, o]), /* @__PURE__ */ t(
+    "div",
+    {
+      css: {
+        display: "contents"
+      },
+      ...l,
+      ref: b
+    }
+  );
+}, Y = ({
+  open: e,
+  placement: o = "bottom",
+  onOpenChange: s,
+  dissmiss: l,
+  children: a,
+  reference: i,
+  trigger: b = "click",
+  offset: c = 4
+}) => {
+  const [d, r] = I({
+    defaultValue: !1,
+    value: e
+  }), p = ee({
+    open: d,
+    onOpenChange: (n, g, h) => {
+      r(n), s?.(n, g, h);
+    },
+    placement: o,
+    middleware: [
+      ne(c),
+      oe(),
+      se({
+        apply({ elements: n }) {
+          const g = {
+            zIndex: `${L}`,
+            minWidth: `${n.reference.getBoundingClientRect().width}px`
+          };
+          Object.assign(n.floating.style, g);
+        }
+      })
+    ],
+    whileElementsMounted: te
+  }), { context: v, refs: S } = p, W = re(v, {
+    enabled: b === "click"
+  }), N = Re(v, {
+    enabled: b === "hover",
+    handleClose: Ae()
+  }), V = ie(
+    v,
+    ze(
+      {
+        ancestorScroll: !0
+      },
+      l
+    )
+  ), y = le(v), C = ae([W, V, y, N]), E = j(
+    () => ({
+      ...p,
+      ...C
+    }),
+    [p, C]
+  );
+  return Fe(() => {
+    ce(i) || (S.setReference?.(i), v.onOpenChange(!M(i)));
+  }, [i]), /* @__PURE__ */ t(We.Provider, { value: E, children: a });
+}, dt = (e) => Te() ? /* @__PURE__ */ t(Y, { ...e }) : /* @__PURE__ */ t(Oe, { children: /* @__PURE__ */ t(Y, { ...e }) }), ut = ({ defaultIndex: e, activeIndex: o, children: s, onTabChange: l, ...a }) => {
+  const [i, b] = I({
+    defaultValue: e ?? 0,
+    value: o
+  }), c = (r) => {
+    b(r), l?.(r);
+  }, d = j(() => ({
+    activeIndex: i,
+    focusTab: c
+  }), [i]);
+  return /* @__PURE__ */ t(Ne.Provider, { value: d, children: /* @__PURE__ */ t("div", { css: { display: "flex", flexDirection: "column" }, ...a, children: s }) });
+}, _e = ({ fill: e = !1, ...o }) => {
+  const { activeIndex: s, focusTab: l } = Q(), a = Number(D(o, "data-tab-index")), i = (b) => {
+    l(a), o.onClick?.(b);
+  };
+  return /* @__PURE__ */ t(
+    "li",
+    {
+      "aria-hidden": !0,
+      css: [
+        {
+          paddingInline: 12,
+          paddingBlock: 8,
+          borderTopLeftRadius: 8,
+          borderTopRightRadius: 8,
+          color: u.palette.white["5s"],
+          textAlign: "center",
+          cursor: "pointer"
+        },
+        s === a && {
+          color: u.palette.white["6s"],
+          backgroundColor: u.palette.black["7s"]
+        },
+        e && {
+          flex: 1
+        }
+      ],
+      ...o,
+      onClick: i
+    }
+  );
+}, pt = ({ children: e, ...o }) => {
+  const s = B.toArray(e).filter(
+    (l) => _(l) && l.type === _e
+  );
+  return /* @__PURE__ */ t("ul", { css: [{ display: "flex", alignItems: "center" }], ...o, children: s.map(
+    (l, a) => q(l, {
+      "data-tab-index": a
+    })
+  ) });
+}, $e = ({ ...e }) => /* @__PURE__ */ t("div", { ...e }), ft = ({ children: e, ...o }) => {
+  const { activeIndex: s } = Q(), l = B.toArray(e).filter((a) => _(a) && a.type === $e).find((a, i) => i === s);
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      css: { position: "relative", borderTopWidth: 1, borderTopStyle: "solid", borderColor: u.palette.white["1s"] },
+      ...o,
+      children: l
+    }
+  );
+}, je = ({ children: e, options: o, ...s }) => /* @__PURE__ */ t(
+  Le,
+  {
+    options: {
+      scrollbars: {
+        autoHide: "leave"
+      },
+      ...o
+    },
+    ...s,
+    children: e
+  }
+), Ge = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, He = `<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10,18a1,1,0,0,1-.71-.29l-5-5a1,1,0,0,1,1.42-1.42L10,15.59l8.29-8.3a1,1,0,1,1,1.42,1.42l-9,9A1,1,0,0,1,10,18Z"></path>
+</svg>`, Ue = ({ RowComponent: e, options: o, ref: s, ...l }) => {
+  const a = $(null), i = G([a, s]), b = De({
+    ...o,
+    getScrollElement: () => {
+      const r = a.current?.getElement()?.firstElementChild;
+      return r instanceof HTMLDivElement ? r : null;
+    }
+  }), c = b.getVirtualItems(), d = b.getTotalSize();
+  return /* @__PURE__ */ t(je, { ...l, ref: i, children: /* @__PURE__ */ t(
+    Ve.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      style: {
+        height: d
+      },
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          style: {
+            transform: `translateY(${c.at(0)?.start ?? 0}px)`
+          },
+          children: c.map((r) => /* @__PURE__ */ t("div", { "data-index": r.index, ref: b.measureElement, children: /* @__PURE__ */ t(e, { row: r }) }, r.key))
+        }
+      )
+    }
+  ) });
+}, bt = (e) => {
+  const {
+    placement: o = "bottom-start",
+    contentWidth: s,
+    visible: l,
+    onOpenChange: a,
+    dissmiss: i,
+    searchable: b,
+    value: c,
+    optionValue: d,
+    optionLabel: r,
+    defaultValue: w,
+    options: p,
+    onChange: v,
+    placeholder: S,
+    prefix: W,
+    suffix: N,
+    className: V,
+    size: y = "32",
+    listProps: C,
+    selectedRenderer: E,
+    checkedIcon: n,
+    ...g
+  } = e, [h, k] = I({
+    defaultValue: !1,
+    value: l
+  }), [A, de] = I({
+    defaultValue: w,
+    value: c
+  }), ue = (f, m, x) => {
+    !f && !x || (k(f), a?.(f, m, x));
+  }, { refs: H, floatingStyles: pe, context: z } = ee({
+    open: h,
+    onOpenChange: ue,
+    placement: o,
+    middleware: [
+      oe(),
+      ne(4),
+      se({
+        apply({ elements: f }) {
+          const { width: m } = f.reference.getBoundingClientRect(), x = s === "fit-parent" ? m : s, O = {
+            minWidth: `${x ?? m}px`,
+            width: ce(x) ? x : `${x}px`,
+            zIndex: L
+          };
+          Object.assign(f.floating.style, O);
+        }
+      })
+    ],
+    whileElementsMounted: te
+  }), fe = re(z), be = ie(z, i), he = le(z), { getReferenceProps: ge, getFloatingProps: me } = ae([fe, be, he]), T = X(
+    (f) => typeof d == "function" ? d(f) : D(f, d ?? "value"),
+    [d]
+  ), U = X(
+    (f) => typeof r == "function" ? r(f) : D(f, r ?? "label"),
+    [r]
+  ), ve = (f) => {
+    const m = T(f);
+    m !== A && (de(m), v?.(m, f), k(!1));
+  }, F = j(
+    () => p.find((f) => A === T(f)),
+    [T, p, A]
+  ), we = ({ row: f }) => {
+    const m = p.at(f.index);
+    if (M(m)) return /* @__PURE__ */ t(xe, {});
+    const x = T(m), O = A === x;
+    return /* @__PURE__ */ R(
+      "div",
+      {
+        onClick: (Ke) => {
+          ve(m);
+        },
+        "aria-hidden": !0,
+        css: [
+          {
+            padding: 8,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            borderRadius: 8,
+            cursor: "pointer",
+            ":hover": {
+              backgroundColor: u.palette.white["1s"]
+            }
+          },
+          O && { backgroundColor: u.palette.black["7s"] }
+        ],
+        children: [
+          /* @__PURE__ */ t("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: U(m) }),
+          O && (n ?? /* @__PURE__ */ t(P, { size: 16, source: He }))
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ R(ke, { children: [
+    /* @__PURE__ */ R(
+      "button",
+      {
+        className: V,
+        css: [
+          {
+            ...u.text.xs,
+            height: Number(y),
+            display: "inline-flex",
+            position: "relative",
+            paddingInline: 8,
+            borderRadius: 8,
+            overflow: "hidden",
+            alignItems: "center",
+            gap: 8,
+            backgroundColor: u.palette.white["1s"],
+            color: u.palette.white["6s"],
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              borderRadius: 8,
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderColor: "transparent"
+            }
+          },
+          h && {
+            backgroundColor: u.palette.black["7s"],
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+              borderRadius: 8,
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderColor: u.palette.white["1s"]
+            }
+          }
+        ],
+        ...g,
+        ...ge(),
+        ref: H.setReference,
+        children: [
+          W,
+          /* @__PURE__ */ t("div", { css: { flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: F ? E?.(F) ?? U(F) : /* @__PURE__ */ t("span", { css: { color: u.palette.white["3s"] }, children: S }) }),
+          N ?? /* @__PURE__ */ t(
+            P,
+            {
+              source: Ge,
+              css: [{ transition: "transform" }, h && { transform: "rotate(-180deg)" }],
+              size: 16
+            }
+          )
+        ]
+      }
+    ),
+    h && /* @__PURE__ */ t(Pe, { root: document.body, children: /* @__PURE__ */ t(
+      "div",
+      {
+        ref: H.setFloating,
+        css: { borderRadius: 8, backgroundColor: u.palette.ink["6s"] },
+        style: {
+          ...pe,
+          zIndex: L
+        },
+        ...me(),
+        children: /* @__PURE__ */ R(
+          "div",
+          {
+            css: {
+              paddingBlock: 4,
+              borderRadius: 8,
+              backgroundColor: u.palette.white["1s"],
+              color: u.palette.white["6s"],
+              ":focus-visible": {
+                outlineStyle: "none"
+              },
+              ...u.text.xs
+            },
+            children: [
+              b && /* @__PURE__ */ t("div", { css: { paddingInline: 8, marginBottom: 8 }, children: /* @__PURE__ */ t(J, { fullWidth: !0, autoFocus: !0 }) }),
+              /* @__PURE__ */ t(
+                Ue,
+                {
+                  RowComponent: we,
+                  ...C,
+                  css: { paddingInline: 4 },
+                  style: {
+                    // height: 160,
+                    ...C?.style
+                  },
+                  options: {
+                    count: p.length,
+                    estimateSize: () => 32,
+                    ...C?.options
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+}, ht = ({ children: e, ...o }) => {
+  const s = Be(o);
+  return /* @__PURE__ */ R("div", { ...s.getRootProps(), children: [
+    e?.(s),
+    /* @__PURE__ */ t("input", { ...s.getInputProps() })
+  ] });
+};
+export {
+  Ge as A,
+  je as W,
+  lt as a,
+  ht as b,
+  at as c,
+  dt as d,
+  ct as e,
+  bt as f,
+  _e as g,
+  ft as h,
+  pt as i,
+  $e as j,
+  ut as k,
+  Ue as l
+};