@planetaexo/design-system 0.71.0 → 0.73.0

package/dist/index.cjs

@@ -12224,24 +12224,24 @@ function FeedLightbox({
       if (frame) cancelAnimationFrame(frame);
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-background", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-10 flex items-center gap-3 border-b border-border/60 bg-background/85 px-3 py-2.5 backdrop-blur-md", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-zinc-950 text-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-10 flex items-center gap-3 border-b border-white/10 bg-zinc-950/80 px-3 py-2.5 backdrop-blur-md", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           onClick: onClose,
-          className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60",
           "aria-label": (_a = labels == null ? void 0 : labels.close) != null ? _a : "Close lightbox",
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "h-5 w-5" })
         }
       ),
-      activeLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-center font-heading text-sm font-bold uppercase tracking-wide text-foreground", children: activeLabel }),
+      activeLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-center font-heading text-sm font-bold uppercase tracking-wide text-white", children: activeLabel }),
       total > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
         "span",
         {
           className: cn(
-            "shrink-0 font-ui text-sm font-medium tabular-nums text-muted-foreground",
+            "shrink-0 font-ui text-sm font-medium tabular-nums text-white/60",
             !activeLabel && "ml-auto"
           ),
           children: [
@@ -12264,7 +12264,7 @@ function FeedLightbox({
               "h2",
               {
                 className: cn(
-                  "px-3 font-heading text-lg font-bold uppercase tracking-wide text-foreground sm:px-4",
+                  "px-3 font-heading text-lg font-bold uppercase tracking-wide text-white sm:px-4",
                   index > 0 && "mt-3"
                 ),
                 children: sectionLabel
@@ -12278,7 +12278,7 @@ function FeedLightbox({
                   itemRefs.current[index] = el;
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden bg-white/5", children: /* @__PURE__ */ jsxRuntime.jsx(
                     Picture,
                     {
                       src: photo.src,
@@ -12290,8 +12290,8 @@ function FeedLightbox({
                     }
                   ) }),
                   (photo.caption || photo.credit) && /* @__PURE__ */ jsxRuntime.jsxs("figcaption", { className: "px-3 pt-2 sm:px-4", children: [
-                    photo.caption && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-ui text-sm leading-snug text-foreground/80", children: photo.caption }),
-                    photo.credit && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-ui text-xs text-muted-foreground", children: [
+                    photo.caption && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-ui text-sm leading-snug text-white/90", children: photo.caption }),
+                    photo.credit && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-ui text-xs text-white/50", children: [
                       "\xA9 ",
                       photo.credit
                     ] })
@@ -12702,65 +12702,117 @@ function CarouselGallery({
   onOpen,
   className
 }) {
-  var _a;
   const total = photos.length;
-  const photo = photos[index];
-  const prev = () => onIndexChange((index - 1 + total) % total);
-  const next = () => onIndexChange((index + 1) % total);
-  const touchStart = React20__namespace.useRef(null);
-  const swiped = React20__namespace.useRef(false);
-  const onTouchStart = (e) => {
-    const t = e.touches[0];
-    touchStart.current = { x: t.clientX, y: t.clientY };
-    swiped.current = false;
+  const go = (i) => onIndexChange(Math.max(0, Math.min(total - 1, i)));
+  const prev = () => go(index - 1);
+  const next = () => go(index + 1);
+  const containerRef = React20__namespace.useRef(null);
+  const [drag, setDrag] = React20__namespace.useState(0);
+  const [dragging, setDragging] = React20__namespace.useState(false);
+  const gesture = React20__namespace.useRef(null);
+  const movedRef = React20__namespace.useRef(false);
+  const onPointerDown = (e) => {
+    var _a, _b;
+    if (total <= 1) return;
+    movedRef.current = false;
+    gesture.current = {
+      x: e.clientX,
+      y: e.clientY,
+      w: (_b = (_a = containerRef.current) == null ? void 0 : _a.clientWidth) != null ? _b : 1,
+      axis: null,
+      id: e.pointerId
+    };
   };
-  const onTouchEnd = (e) => {
-    const start = touchStart.current;
-    touchStart.current = null;
-    if (!start || total <= 1) return;
-    const t = e.changedTouches[0];
-    const dx = t.clientX - start.x;
-    const dy = t.clientY - start.y;
-    if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) {
-      swiped.current = true;
-      if (dx < 0) next();
-      else prev();
+  const onPointerMove = (e) => {
+    var _a;
+    const g = gesture.current;
+    if (!g || e.pointerId !== g.id) return;
+    const dx = e.clientX - g.x;
+    const dy = e.clientY - g.y;
+    if (g.axis === null) {
+      if (Math.abs(dx) > 8 && Math.abs(dx) > Math.abs(dy)) {
+        g.axis = "x";
+        setDragging(true);
+        try {
+          (_a = containerRef.current) == null ? void 0 : _a.setPointerCapture(g.id);
+        } catch (e2) {
+        }
+      } else if (Math.abs(dy) > 8) {
+        gesture.current = null;
+        return;
+      } else {
+        return;
+      }
     }
+    if (g.axis !== "x") return;
+    movedRef.current = true;
+    let d = dx;
+    if (index === 0 && d > 0 || index === total - 1 && d < 0) d *= 0.35;
+    setDrag(d);
+  };
+  const endGesture = (e) => {
+    const g = gesture.current;
+    gesture.current = null;
+    setDragging(false);
+    setDrag(0);
+    if (!g || g.axis !== "x") return;
+    const dx = e.clientX - g.x;
+    const threshold = Math.min(110, g.w * 0.18);
+    if (dx <= -threshold) next();
+    else if (dx >= threshold) prev();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      onTouchStart,
-      onTouchEnd,
+      ref: containerRef,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endGesture,
+      onPointerCancel: endGesture,
+      onClick: () => {
+        if (movedRef.current) {
+          movedRef.current = false;
+          return;
+        }
+        onOpen(index);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onOpen(index);
+        }
+      },
+      role: "button",
+      tabIndex: 0,
+      "aria-label": `Open photo ${index + 1} fullscreen`,
       className: cn(
-        "relative w-full aspect-[4/3] sm:aspect-[16/10] overflow-hidden bg-muted group/photo touch-pan-y select-none",
+        "relative w-full aspect-[4/3] sm:aspect-[16/10] overflow-hidden bg-muted",
+        "touch-pan-y select-none cursor-zoom-in",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         className
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          "div",
           {
-            type: "button",
-            onClick: () => {
-              if (swiped.current) {
-                swiped.current = false;
-                return;
-              }
-              onOpen(index);
+            className: "flex h-full w-full",
+            style: {
+              transform: `translateX(calc(${-index * 100}% + ${drag}px))`,
+              transition: dragging ? "none" : "transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1)"
             },
-            "aria-label": `Open photo ${index + 1} fullscreen`,
-            className: "absolute inset-0 w-full h-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              Picture,
-              {
-                src: photo.src,
-                alt: (_a = photo.alt) != null ? _a : `Photo ${index + 1}`,
-                title: photo.caption,
-                className: "h-full w-full object-cover transition-transform duration-500 group-hover/photo:scale-[1.02]",
-                loading: "lazy"
-              },
-              photo.src
-            )
+            children: photos.map((p, i) => {
+              var _a;
+              return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Picture,
+                {
+                  src: p.src,
+                  alt: (_a = p.alt) != null ? _a : `Photo ${i + 1}`,
+                  title: p.caption,
+                  className: "pointer-events-none h-full w-full object-cover",
+                  rootMargin: "400px"
+                }
+              ) }, i);
+            })
           }
         ),
         total > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -12768,7 +12820,10 @@ function CarouselGallery({
             "button",
             {
               type: "button",
-              onClick: prev,
+              onClick: (e) => {
+                e.stopPropagation();
+                prev();
+              },
               "aria-label": "Previous photo",
               className: cn(
                 "absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 z-10",
@@ -12784,7 +12839,10 @@ function CarouselGallery({
             "button",
             {
               type: "button",
-              onClick: next,
+              onClick: (e) => {
+                e.stopPropagation();
+                next();
+              },
               "aria-label": "Next photo",
               className: cn(
                 "absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 z-10",
@@ -12801,7 +12859,10 @@ function CarouselGallery({
           "button",
           {
             type: "button",
-            onClick: () => onIndexChange(i),
+            onClick: (e) => {
+              e.stopPropagation();
+              onIndexChange(i);
+            },
             "aria-label": `Go to photo ${i + 1}`,
             className: cn(
               "h-1.5 rounded-full transition-all duration-300",