@photoroom/ui 0.1.1

package/index444.mjs

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,9 @@
+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

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

package/index448.mjs

@@ -0,0 +1,182 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,33 @@
+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