@photoroom/ui 0.1.1 → 0.1.2

package/index444.mjs

@@ -1,32 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { makeAble as p } from "./index443.mjs";
-import { motion as s } from "./index307.mjs";
-const l = 45, d = p("customEditable", {
-  render(t) {
-    const i = t.getRect(), { editionPill: e, onEditionPillPointerMove: r } = t.props;
-    if (!e)
-      return null;
-    let o = i.top > l;
-    return t.props.forcedPillPosition === "top" ? o = !0 : t.props.forcedPillPosition === "bottom" && (o = !1), /* @__PURE__ */ n(
-      s.div,
-      {
-        className: "absolute",
-        style: {
-          ...o ? { top: "-12px" } : { bottom: `calc(-${i.height}px - ${l}px)` },
-          left: `${i.width / 2}px`,
-          transform: `translate(-50%, ${o ? "-100%" : "100%"})`
-        },
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        onPointerMove: r,
-        children: e
-      },
-      "moveable-custom-editable"
-    );
-  }
-});
-export {
-  d as MoveableCustomEditable
-};
-//# sourceMappingURL=index444.mjs.map

package/index445.mjs

@@ -1,42 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { RotateLeftIcon as i } from "@photoroom/icons/lib/monochromes";
-import { makeAble as m } from "./index443.mjs";
-import { cn as l } from "./index7.mjs";
-const p = 24, u = 1, b = 8, g = m("customRotation", {
-  render(t) {
-    const r = t.getRect(), { onRotateButtonPointerMove: c } = t.props, { pos2: e, pos4: o } = t.state, a = (e[0] + o[0]) / 2, s = (e[1] + o[1]) / 2;
-    return /* @__PURE__ */ n(
-      "button",
-      {
-        type: "button",
-        className: l(
-          "rotation-handle",
-          // used as a target selector by react-moveable, do not remove
-          "absolute box-content flex items-center justify-center rounded-full border border-content-accent outline-none",
-          "bg-white text-content-accent",
-          "h-6 w-6 cursor-alias",
-          "hover:bg-content-accent hover:text-content-white-primary",
-          "focus-visible:bg-content-accent focus-visible:text-content-white-primary",
-          "active:bg-content-accent active:text-content-white-primary"
-        ),
-        style: {
-          transform: [
-            "translate(-50%, -50%)",
-            `translate(${a}px, ${s}px)`,
-            `rotate(${r.rotation}deg)`,
-            `translateX(${p / 2 + u + b}px)`
-          ].join(" "),
-          transformOrigin: "center"
-        },
-        tabIndex: -1,
-        onPointerMove: c,
-        children: /* @__PURE__ */ n(i, { className: "pointer-events-none h-3.5 w-3.5" })
-      },
-      "moveable-custom-rotation-handle"
-    );
-  }
-});
-export {
-  g as MoveableCustomRotation
-};
-//# sourceMappingURL=index445.mjs.map

package/index446.mjs

@@ -1,9 +0,0 @@
-var o = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function l(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
-}
-export {
-  o as commonjsGlobal,
-  l as getDefaultExportFromCjs
-};
-//# sourceMappingURL=index446.mjs.map

package/index447.mjs

@@ -1,5 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};
-//# sourceMappingURL=index447.mjs.map

package/index448.mjs

@@ -1,182 +0,0 @@
-import { __exports as w } from "./index595.mjs";
-var g;
-function x() {
-  return g ? w : (g = 1, (() => {
-    var b = { 792: (o, r, n) => {
-      n.d(r, { Z: () => c });
-      var a = n(609), d = n.n(a)()((function(u) {
-        return u[1];
-      }));
-      d.push([o.id, ':host{--divider-width: 1px;--divider-color: #fff;--divider-shadow: none;--default-handle-width: 50px;--default-handle-color: #fff;--default-handle-opacity: 1;--default-handle-shadow: none;--handle-position-start: 50%;position:relative;display:inline-block;overflow:hidden;line-height:0;direction:ltr}@media screen and (-webkit-min-device-pixel-ratio: 0)and (min-resolution: 0.001dpcm){:host{outline-offset:1px}}:host(:focus){outline:2px solid -webkit-focus-ring-color}::slotted(*){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.first{position:absolute;left:0;top:0;right:0;line-height:normal;font-size:100%;max-height:100%;height:100%;width:100%;--exposure: 50%;--keyboard-transition-time: 0ms;--default-transition-time: 0ms;--transition-time: var(--default-transition-time)}.first .first-overlay-container{position:relative;clip-path:inset(0 var(--exposure) 0 0);transition:clip-path var(--transition-time);height:100%}.first .first-overlay{overflow:hidden;height:100%}.first.focused{will-change:clip-path}.first.focused .first-overlay-container{will-change:clip-path}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:var(--exposure);height:100%;transition:right var(--transition-time),bottom var(--transition-time)}.focused .handle-container{will-change:right}.divider{position:absolute;height:100%;width:100%;left:0;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.divider:after{content:" ";display:block;height:100%;border-left-width:var(--divider-width);border-left-style:solid;border-left-color:var(--divider-color);box-shadow:var(--divider-shadow)}.handle{position:absolute;top:var(--handle-position-start);pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translate(calc(-50% - 0.5px), -50%);line-height:0}.default-handle{width:var(--default-handle-width);opacity:var(--default-handle-opacity);transition:all 1s;filter:drop-shadow(var(--default-handle-shadow))}.default-handle path{stroke:var(--default-handle-color)}.vertical .first-overlay-container{clip-path:inset(0 0 var(--exposure) 0)}.vertical .handle-container{transform:translateY(50%);height:auto;top:unset;bottom:var(--exposure);width:100%;left:0;flex-direction:row}.vertical .divider:after{height:1px;width:100%;border-top-width:var(--divider-width);border-top-style:solid;border-top-color:var(--divider-color);border-left:0}.vertical .handle{top:auto;left:var(--handle-position-start);transform:translate(calc(-50% - 0.5px), -50%) rotate(90deg)}', ""]);
-      const c = d;
-    }, 609: (o) => {
-      o.exports = function(r) {
-        var n = [];
-        return n.toString = function() {
-          return this.map((function(a) {
-            var d = r(a);
-            return a[2] ? "@media ".concat(a[2], " {").concat(d, "}") : d;
-          })).join("");
-        }, n.i = function(a, d, c) {
-          typeof a == "string" && (a = [[null, a, ""]]);
-          var u = {};
-          if (c) for (var v = 0; v < this.length; v++) {
-            var f = this[v][0];
-            f != null && (u[f] = !0);
-          }
-          for (var e = 0; e < a.length; e++) {
-            var t = [].concat(a[e]);
-            c && u[t[0]] || (d && (t[2] ? t[2] = "".concat(d, " and ").concat(t[2]) : t[2] = d), n.push(t));
-          }
-        }, n;
-      };
-    } }, m = {};
-    function h(o) {
-      var r = m[o];
-      if (r !== void 0) return r.exports;
-      var n = m[o] = { id: o, exports: {} };
-      return b[o](n, n.exports, h), n.exports;
-    }
-    h.n = (o) => {
-      var r = o && o.__esModule ? () => o.default : () => o;
-      return h.d(r, { a: r }), r;
-    }, h.d = (o, r) => {
-      for (var n in r) h.o(r, n) && !h.o(o, n) && Object.defineProperty(o, n, { enumerable: !0, get: r[n] });
-    }, h.o = (o, r) => Object.prototype.hasOwnProperty.call(o, r), (() => {
-      var o = h(792);
-      const r = "rendered", n = (e, t) => {
-        const i = e.getBoundingClientRect();
-        let s, l;
-        return t.type === "mousedown" ? (s = t.clientX, l = t.clientY) : (s = t.touches[0].clientX, l = t.touches[0].clientY), s >= i.x && s <= i.x + i.width && l >= i.y && l <= i.y + i.height;
-      };
-      let a;
-      const d = { ArrowLeft: -1, ArrowRight: 1 }, c = ["horizontal", "vertical"], u = (e) => ({ x: e.touches[0].pageX, y: e.touches[0].pageY }), v = (e) => ({ x: e.pageX, y: e.pageY }), f = typeof window < "u" && (window == null ? void 0 : window.HTMLElement);
-      typeof window < "u" && (window.document && (a = document.createElement("template"), a.innerHTML = '<div class="second" id="second"> <slot name="second"><slot name="before"></slot></slot> </div> <div class="first" id="first"> <div class="first-overlay"> <div class="first-overlay-container" id="firstImageContainer"> <slot name="first"><slot name="after"></slot></slot> </div> </div> <div class="handle-container"> <div class="divider"></div> <div class="handle" id="handle"> <slot name="handle"> <svg xmlns="http://www.w3.org/2000/svg" class="default-handle" viewBox="-8 -3 16 6"> <path d="M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2" fill="none" vector-effect="non-scaling-stroke"/> </svg> </slot> </div> </div> </div> '), window.customElements.define("img-comparison-slider", class extends f {
-        constructor() {
-          super(), this.exposure = this.hasAttribute("value") ? parseFloat(this.getAttribute("value")) : 50, this.slideOnHover = !1, this.slideDirection = "horizontal", this.keyboard = "enabled", this.isMouseDown = !1, this.animationDirection = 0, this.isFocused = !1, this.dragByHandle = !1, this.onMouseMove = (i) => {
-            if (this.isMouseDown || this.slideOnHover) {
-              const s = v(i);
-              this.slideToPage(s);
-            }
-          }, this.bodyUserSelectStyle = "", this.bodyWebkitUserSelectStyle = "", this.onMouseDown = (i) => {
-            if (this.slideOnHover || this.handle && !n(this.handleElement, i)) return;
-            i.preventDefault(), window.addEventListener("mousemove", this.onMouseMove), window.addEventListener("mouseup", this.onWindowMouseUp), this.isMouseDown = !0, this.enableTransition();
-            const s = v(i);
-            this.slideToPage(s), this.focus(), this.bodyUserSelectStyle = window.document.body.style.userSelect, this.bodyWebkitUserSelectStyle = window.document.body.style.webkitUserSelect, window.document.body.style.userSelect = "none", window.document.body.style.webkitUserSelect = "none";
-          }, this.onWindowMouseUp = () => {
-            this.isMouseDown = !1, window.document.body.style.userSelect = this.bodyUserSelectStyle, window.document.body.style.webkitUserSelect = this.bodyWebkitUserSelectStyle, window.removeEventListener("mousemove", this.onMouseMove), window.removeEventListener("mouseup", this.onWindowMouseUp);
-          }, this.touchStartPoint = null, this.isTouchComparing = !1, this.hasTouchMoved = !1, this.onTouchStart = (i) => {
-            this.dragByHandle && !n(this.handleElement, i) || (this.touchStartPoint = u(i), this.isFocused && (this.enableTransition(), this.slideToPage(this.touchStartPoint)));
-          }, this.onTouchMove = (i) => {
-            if (this.touchStartPoint === null) return;
-            const s = u(i);
-            if (this.isTouchComparing) return this.slideToPage(s), i.preventDefault(), !1;
-            if (!this.hasTouchMoved) {
-              const l = Math.abs(s.y - this.touchStartPoint.y), p = Math.abs(s.x - this.touchStartPoint.x);
-              if (this.slideDirection === "horizontal" && l < p || this.slideDirection === "vertical" && l > p) return this.isTouchComparing = !0, this.focus(), this.slideToPage(s), i.preventDefault(), !1;
-              this.hasTouchMoved = !0;
-            }
-          }, this.onTouchEnd = () => {
-            this.isTouchComparing = !1, this.hasTouchMoved = !1, this.touchStartPoint = null;
-          }, this.onBlur = () => {
-            this.stopSlideAnimation(), this.isFocused = !1, this.firstElement.classList.remove("focused");
-          }, this.onFocus = () => {
-            this.isFocused = !0, this.firstElement.classList.add("focused");
-          }, this.onKeyDown = (i) => {
-            if (this.keyboard === "disabled") return;
-            const s = d[i.key];
-            this.animationDirection !== s && s !== void 0 && (this.animationDirection = s, this.startSlideAnimation());
-          }, this.onKeyUp = (i) => {
-            if (this.keyboard === "disabled") return;
-            const s = d[i.key];
-            s !== void 0 && this.animationDirection === s && this.stopSlideAnimation();
-          }, this.resetDimensions = () => {
-            this.imageWidth = this.offsetWidth, this.imageHeight = this.offsetHeight;
-          };
-          const e = this.attachShadow({ mode: "open" }), t = document.createElement("style");
-          t.innerHTML = o.Z, this.getAttribute("nonce") && t.setAttribute("nonce", this.getAttribute("nonce")), e.appendChild(t), e.appendChild(a.content.cloneNode(!0)), this.firstElement = e.getElementById("first"), this.handleElement = e.getElementById("handle");
-        }
-        set handle(e) {
-          this.dragByHandle = e.toString().toLowerCase() !== "false";
-        }
-        get handle() {
-          return this.dragByHandle;
-        }
-        get value() {
-          return this.exposure;
-        }
-        set value(e) {
-          const t = parseFloat(e);
-          t !== this.exposure && (this.exposure = t, this.enableTransition(), this.setExposure());
-        }
-        get hover() {
-          return this.slideOnHover;
-        }
-        set hover(e) {
-          this.slideOnHover = e.toString().toLowerCase() !== "false", this.removeEventListener("mousemove", this.onMouseMove), this.slideOnHover && this.addEventListener("mousemove", this.onMouseMove);
-        }
-        get direction() {
-          return this.slideDirection;
-        }
-        set direction(e) {
-          this.slideDirection = e.toString().toLowerCase(), this.slide(0), this.firstElement.classList.remove(...c), c.includes(this.slideDirection) && this.firstElement.classList.add(this.slideDirection);
-        }
-        static get observedAttributes() {
-          return ["hover", "direction"];
-        }
-        connectedCallback() {
-          this.hasAttribute("tabindex") || (this.tabIndex = 0), this.addEventListener("dragstart", ((e) => (e.preventDefault(), !1))), new ResizeObserver(this.resetDimensions).observe(this), this.setExposure(0), this.keyboard = this.hasAttribute("keyboard") && this.getAttribute("keyboard") === "disabled" ? "disabled" : "enabled", this.addEventListener("keydown", this.onKeyDown), this.addEventListener("keyup", this.onKeyUp), this.addEventListener("focus", this.onFocus), this.addEventListener("blur", this.onBlur), this.addEventListener("touchstart", this.onTouchStart, { passive: !0 }), this.addEventListener("touchmove", this.onTouchMove, { passive: !1 }), this.addEventListener("touchend", this.onTouchEnd), this.addEventListener("mousedown", this.onMouseDown), this.handle = this.hasAttribute("handle") ? this.getAttribute("handle") : this.dragByHandle, this.hover = this.hasAttribute("hover") ? this.getAttribute("hover") : this.slideOnHover, this.direction = this.hasAttribute("direction") ? this.getAttribute("direction") : this.slideDirection, this.resetDimensions(), this.classList.contains(r) || this.classList.add(r);
-        }
-        disconnectedCallback() {
-          this.transitionTimer && window.clearTimeout(this.transitionTimer);
-        }
-        attributeChangedCallback(e, t, i) {
-          e === "hover" && (this.hover = i), e === "direction" && (this.direction = i), e === "keyboard" && (this.keyboard = i === "disabled" ? "disabled" : "enabled");
-        }
-        setExposure(e = 0) {
-          var t;
-          this.exposure = (t = this.exposure + e) < 0 ? 0 : t > 100 ? 100 : t, this.firstElement.style.setProperty("--exposure", 100 - this.exposure + "%");
-        }
-        slide(e = 0) {
-          this.setExposure(e);
-          const t = new Event("slide");
-          this.dispatchEvent(t);
-        }
-        slideToPage(e) {
-          this.slideDirection === "horizontal" && this.slideToPageX(e.x), this.slideDirection === "vertical" && this.slideToPageY(e.y);
-        }
-        slideToPageX(e) {
-          const t = e - this.getBoundingClientRect().left - window.scrollX;
-          this.exposure = t / this.imageWidth * 100, this.slide(0);
-        }
-        slideToPageY(e) {
-          const t = e - this.getBoundingClientRect().top - window.scrollY;
-          this.exposure = t / this.imageHeight * 100, this.slide(0);
-        }
-        enableTransition() {
-          this.firstElement.style.setProperty("--transition-time", "100ms"), this.transitionTimer = window.setTimeout((() => {
-            this.firstElement.style.setProperty("--transition-time", "var(--default-transition-time)"), this.transitionTimer = null;
-          }), 100);
-        }
-        startSlideAnimation() {
-          let e = null, t = this.animationDirection;
-          this.firstElement.style.setProperty("--transition-time", "var(--keyboard-transition-time)");
-          const i = (s) => {
-            if (this.animationDirection === 0 || t !== this.animationDirection) return;
-            e === null && (e = s);
-            const l = (s - e) / 16.666666666666668 * this.animationDirection;
-            this.slide(l), setTimeout((() => window.requestAnimationFrame(i)), 0), e = s;
-          };
-          window.requestAnimationFrame(i);
-        }
-        stopSlideAnimation() {
-          this.animationDirection = 0, this.firstElement.style.setProperty("--transition-time", "var(--default-transition-time)");
-        }
-      }));
-    })();
-  })(), w);
-}
-export {
-  x as __require
-};
-//# sourceMappingURL=index448.mjs.map

package/index449.mjs

@@ -1,32 +0,0 @@
-import * as n from "react";
-import { composeEventHandlers as f } from "./index421.mjs";
-import { useControllableState as m } from "./index433.mjs";
-import { Primitive as p } from "./index431.mjs";
-import { jsx as b } from "react/jsx-runtime";
-var r = "Toggle", c = n.forwardRef((e, t) => {
-  const { pressed: a, defaultPressed: s, onPressedChange: d, ...i } = e, [o, l] = m({
-    prop: a,
-    onChange: d,
-    defaultProp: s ?? !1,
-    caller: r
-  });
-  return /* @__PURE__ */ b(
-    p.button,
-    {
-      type: "button",
-      "aria-pressed": o,
-      "data-state": o ? "on" : "off",
-      "data-disabled": e.disabled ? "" : void 0,
-      ...i,
-      ref: t,
-      onClick: f(e.onClick, () => {
-        e.disabled || l(!o);
-      })
-    }
-  );
-});
-c.displayName = r;
-export {
-  c as Toggle
-};
-//# sourceMappingURL=index449.mjs.map

package/index45.mjs

@@ -1,33 +0,0 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { clsx as e } from "./index296.mjs";
-import { forwardRef as n } from "react";
-const d = n(
-  ({ as: o = "a", title: i, image: t, className: s, ...a }, c) => /* @__PURE__ */ l(
-    o,
-    {
-      ref: c,
-      ...a,
-      className: e("group flex flex-col gap-3 outline-none", s),
-      children: [
-        /* @__PURE__ */ r(
-          "figure",
-          {
-            className: e(
-              "relative block aspect-[16/9] rounded-500",
-              "after:absolute after:inset-0 after:rounded-inherit after:border after:border-misc-border after:content-['']",
-              "group-focus-visible:ring-misc-focus-indicator group-focus-visible:misc-border-size-focus-ring",
-              "[&_img]:block [&_img]:size-full [&_img]:overflow-hidden [&_img]:rounded-inherit [&_img]:object-cover"
-            ),
-            children: t
-          }
-        ),
-        /* @__PURE__ */ r("h5", { className: "component-semi-strong-600 text-content-primary", children: i })
-      ]
-    }
-  )
-);
-d.displayName = "BlogEditorialCard";
-export {
-  d as BlogEditorialCard
-};
-//# sourceMappingURL=index45.mjs.map