@alfadocs/ui-kit 0.70.0 → 0.71.0

package/dist/_chunks/image-cropper-D9jqJy19.js

@@ -0,0 +1,367 @@
+import { jsxs as C, jsx as h } from "react/jsx-runtime";
+import { forwardRef as te, useId as oe, useRef as w, useState as re, useCallback as X, useMemo as ie } from "react";
+import { c as Y } from "./index-D2ZczOXr.js";
+import { useTranslation as se } from "react-i18next";
+import { c as ne } from "./compose-refs-C0k0tdqF.js";
+import { u as ae } from "./registry-DvAUVLHh.js";
+import { B as ce } from "./button-DD_0Xdmr.js";
+import { R as de } from "./rotate-ccw-BWANpitO.js";
+const le = {
+  type: "object",
+  properties: {
+    x: { type: "number", minimum: 0, maximum: 1 },
+    y: { type: "number", minimum: 0, maximum: 1 },
+    width: { type: "number", minimum: 0, maximum: 1 },
+    height: { type: "number", minimum: 0, maximum: 1 }
+  },
+  required: ["x", "y", "width", "height"]
+}, pe = {
+  id: "image-cropper",
+  capabilities: ["range_pick"],
+  state: {
+    crop: {
+      type: "object",
+      descriptionKey: "ui.agent.imageCropper.state.crop",
+      description: "Current crop rectangle in normalised [0,1] coordinates: { x, y, width, height }.",
+      read: (o) => o.getCrop()
+    }
+  },
+  actions: {
+    set_crop: {
+      safety: "write",
+      argsType: "{ x: number; y: number; width: number; height: number }",
+      argsSchema: le,
+      idempotent: !0,
+      descriptionKey: "ui.agent.imageCropper.actions.setCrop",
+      description: "Set the crop rectangle (normalised [0,1]). Values are clamped to the image bounds and the minimum crop size.",
+      invoke: (o, c) => {
+        o.setCrop(c);
+      }
+    },
+    reset: {
+      safety: "write",
+      idempotent: !0,
+      descriptionKey: "ui.agent.imageCropper.actions.reset",
+      description: "Reset the crop to the centred default for the current aspect.",
+      invoke: (o) => {
+        o.reset();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "image-cropper",
+      description: "Marks the ImageCropper wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, De = (o) => Math.min(1, Math.max(0, o));
+function M(o, c) {
+  const n = Math.min(1, Math.max(c, o.width)), s = Math.min(1, Math.max(c, o.height)), d = Math.min(1 - n, Math.max(0, o.x)), y = Math.min(1 - s, Math.max(0, o.y));
+  return { x: d, y, width: n, height: s };
+}
+function B(o, c, n, s) {
+  if (!c || c <= 0 || n <= 0 || s <= 0) return o;
+  const d = o.width * n / c / s;
+  return { ...o, height: d };
+}
+function D(o, c, n) {
+  const d = B({ x: 0.1, y: 0.1, width: 0.8, height: 0.8 }, o, c, n);
+  return M(
+    {
+      ...d,
+      // Re-centre vertically after the aspect coercion.
+      y: Math.max(0, (1 - d.height) / 2)
+    },
+    0.05
+  );
+}
+function ue(o) {
+  return {
+    x: Math.round(o.x * 100),
+    y: Math.round(o.y * 100),
+    width: Math.round(o.width * 100),
+    height: Math.round(o.height * 100)
+  };
+}
+const me = Y(
+  ["ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]"].join(" ")
+), he = Y(
+  "ds:relative ds:inline-block ds:max-w-full ds:overflow-hidden ds:rounded-[var(--radius-md)] ds:bg-[var(--muted)] ds:select-none ds:touch-none",
+  {
+    variants: {
+      disabled: {
+        true: "ds:opacity-60 ds:pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: { disabled: !1 }
+  }
+), fe = "ds:block ds:max-w-full ds:h-auto ds:pointer-events-none", ge = [
+  "ds:absolute ds:box-border ds:cursor-move",
+  "ds:border-2 ds:border-[color:var(--ring)]",
+  "ds:shadow-[var(--shadow-md)]",
+  "ds:[inset-inline-start:var(--ic-x)] ds:[inset-block-start:var(--ic-y)]",
+  "ds:[inline-size:var(--ic-w)] ds:[block-size:var(--ic-h)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
+].join(" "), we = "ds:absolute ds:size-[var(--spacing-md)] ds:rounded-full ds:bg-[var(--ring)] ds:border-2 ds:border-[color:var(--background)]", ye = [
+  {
+    corner: "top-start",
+    cls: "ds:[inset-block-start:0] ds:[inset-inline-start:0]"
+  },
+  {
+    corner: "top-end",
+    cls: "ds:[inset-block-start:0] ds:[inset-inline-end:0]"
+  },
+  {
+    corner: "bottom-start",
+    cls: "ds:[inset-block-end:0] ds:[inset-inline-start:0]"
+  },
+  {
+    corner: "bottom-end",
+    cls: "ds:[inset-block-end:0] ds:[inset-inline-end:0]"
+  }
+];
+function be(o, c, n, s) {
+  switch (c) {
+    case "top-start":
+      return {
+        x: o.x + n,
+        y: o.y + s,
+        width: o.width - n,
+        height: o.height - s
+      };
+    case "top-end":
+      return {
+        x: o.x,
+        y: o.y + s,
+        width: o.width + n,
+        height: o.height - s
+      };
+    case "bottom-start":
+      return {
+        x: o.x + n,
+        y: o.y,
+        width: o.width - n,
+        height: o.height + s
+      };
+    case "bottom-end":
+    default:
+      return {
+        x: o.x,
+        y: o.y,
+        width: o.width + n,
+        height: o.height + s
+      };
+  }
+}
+const xe = te(
+  function({
+    src: c,
+    alt: n,
+    aspect: s,
+    value: d,
+    defaultValue: y,
+    onChange: p,
+    minSize: b = 0.1,
+    keyboardStep: T = 0.02,
+    disabled: u,
+    id: H,
+    className: S,
+    "aria-label": W
+  }, E) {
+    const { t: x } = se(), $ = oe(), j = `${$}-instructions`, N = `${$}-live`, z = w(null), U = w(null), V = ne(E, U), R = w(null), v = w(null), I = w(!1), m = d !== void 0, [_, A] = re(
+      () => M(y ?? D(s, 0, 0), b)
+    ), r = m ? M(d, b) : _, f = X(
+      (e) => {
+        I.current = !0;
+        const t = M(e, b);
+        m || A(t), p == null || p(t);
+      },
+      [m, b, p]
+    ), g = () => {
+      var t;
+      const e = (t = z.current) == null ? void 0 : t.getBoundingClientRect();
+      return { w: (e == null ? void 0 : e.width) ?? 0, h: (e == null ? void 0 : e.height) ?? 0 };
+    }, q = () => {
+      if (I.current || m || y) return;
+      const { w: e, h: t } = g();
+      A(D(s, e, t));
+    }, K = (e) => {
+      var a;
+      v.current = null;
+      const t = e.currentTarget;
+      (a = t.hasPointerCapture) != null && a.call(t, e.pointerId) && t.releasePointerCapture(e.pointerId);
+    }, F = (e) => {
+      var l, i;
+      if (u) return;
+      const { w: t, h: a } = g();
+      v.current = {
+        mode: "move",
+        pointerX: e.clientX,
+        pointerY: e.clientY,
+        start: r,
+        boxW: t,
+        boxH: a
+      }, (i = (l = e.currentTarget).setPointerCapture) == null || i.call(l, e.pointerId);
+    }, G = (e, t) => {
+      var i, L;
+      if (u) return;
+      e.stopPropagation();
+      const { w: a, h: l } = g();
+      v.current = {
+        mode: "resize",
+        corner: t,
+        pointerX: e.clientX,
+        pointerY: e.clientY,
+        start: r,
+        boxW: a,
+        boxH: l
+      }, (L = (i = R.current) == null ? void 0 : i.setPointerCapture) == null || L.call(i, e.pointerId);
+    }, J = (e) => {
+      const t = v.current;
+      if (!t || t.boxW <= 0 || t.boxH <= 0) return;
+      const a = (e.clientX - t.pointerX) / t.boxW, l = (e.clientY - t.pointerY) / t.boxH;
+      if (t.mode === "move")
+        f({ ...t.start, x: t.start.x + a, y: t.start.y + l });
+      else if (t.corner) {
+        const i = be(t.start, t.corner, a, l);
+        f(B(i, s, t.boxW, t.boxH));
+      }
+    }, O = (e) => {
+      if (u) return;
+      const t = T, { w: a, h: l } = g();
+      let i = null;
+      e.shiftKey ? (e.key === "ArrowRight" ? i = { ...r, width: r.width + t } : e.key === "ArrowLeft" ? i = { ...r, width: r.width - t } : e.key === "ArrowDown" ? i = { ...r, height: r.height + t } : e.key === "ArrowUp" && (i = { ...r, height: r.height - t }), i && (i = B(i, s, a, l))) : e.key === "ArrowRight" ? i = { ...r, x: r.x + t } : e.key === "ArrowLeft" ? i = { ...r, x: r.x - t } : e.key === "ArrowDown" ? i = { ...r, y: r.y + t } : e.key === "ArrowUp" && (i = { ...r, y: r.y - t }), i && (e.preventDefault(), f(i));
+    }, P = X(() => {
+      const { w: e, h: t } = g();
+      I.current = !1;
+      const a = D(s, e, t);
+      m || A(a), p == null || p(a);
+    }, [s, m, p]), Q = ie(
+      () => ({
+        getCrop: () => r,
+        setCrop: (e) => f(e),
+        reset: P,
+        focus: () => {
+          var e;
+          return (e = R.current) == null ? void 0 : e.focus();
+        }
+      }),
+      [r, f, P]
+    );
+    ae(pe, Q, H);
+    const k = ue(r), Z = {
+      // Inline style — permitted per 23-constraints §Runtime-computed dimensions
+      //   (CSS custom-property setters; the position/size rules live in CVA).
+      "--ic-x": `${r.x * 100}%`,
+      "--ic-y": `${r.y * 100}%`,
+      "--ic-w": `${r.width * 100}%`,
+      "--ic-h": `${r.height * 100}%`
+    }, ee = W ?? x("imageCropper.cropRegion");
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        ref: V,
+        className: me({ className: S }),
+        "data-component": "image-cropper",
+        "data-component-id": H,
+        children: [
+          /* @__PURE__ */ C(
+            "div",
+            {
+              ref: z,
+              dir: "ltr",
+              className: he({ disabled: !!u }),
+              children: [
+                /* @__PURE__ */ h(
+                  "img",
+                  {
+                    src: c,
+                    alt: n,
+                    className: fe,
+                    onLoad: q
+                  }
+                ),
+                /* @__PURE__ */ h(
+                  "div",
+                  {
+                    ref: R,
+                    role: "group",
+                    tabIndex: u ? -1 : 0,
+                    "aria-label": ee,
+                    "aria-describedby": j,
+                    "aria-disabled": u || void 0,
+                    className: ge,
+                    style: Z,
+                    onPointerDown: F,
+                    onPointerMove: J,
+                    onPointerUp: K,
+                    onPointerCancel: K,
+                    onKeyDown: O,
+                    children: ye.map(({ corner: e, cls: t }) => /* @__PURE__ */ h(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: `${we} ${t}`,
+                        onPointerDown: (a) => G(a, e)
+                      },
+                      e
+                    ))
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ C("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ h(
+              "p",
+              {
+                id: j,
+                className: "type-body-sm ds:text-muted-foreground",
+                children: x("imageCropper.instructions")
+              }
+            ),
+            /* @__PURE__ */ C(
+              ce,
+              {
+                type: "button",
+                intent: "outline",
+                size: "sm",
+                disabled: u,
+                onClick: P,
+                children: [
+                  /* @__PURE__ */ h(de, { "aria-hidden": "true", className: "ds:size-4" }),
+                  x("imageCropper.reset")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ h("p", { id: N, role: "status", "aria-live": "polite", className: "ds:sr-only", children: x("imageCropper.announcement", {
+            x: k.x,
+            y: k.y,
+            width: k.width,
+            height: k.height
+          }) })
+        ]
+      }
+    );
+  }
+);
+xe.displayName = "ImageCropper";
+export {
+  xe as I,
+  B as a,
+  M as b,
+  De as c,
+  D as d,
+  pe as i,
+  ue as t
+};
+//# sourceMappingURL=image-cropper-D9jqJy19.js.map