@geomak/ui 6.18.0 → 6.20.0

package/dist/index.cjs

@@ -1774,7 +1774,25 @@ Card.Body = CardBody;
 Card.Footer = CardFooter;
 var Card_default = Card;
 var Arrow2 = ({ dir }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: dir === "left" ? "M15 19l-7-7 7-7" : "M9 5l7 7-7 7" }) });
-function CardCarousel({
+var arrowBtn = "absolute top-1/2 -translate-y-1/2 z-30 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-md transition hover:text-foreground hover:bg-surface-raised disabled:opacity-0 disabled:pointer-events-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
+var Dots = ({ count, active, onSelect }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex items-center justify-center gap-1.5", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    "aria-label": `Go to slide ${i + 1}`,
+    "aria-current": i === active,
+    onClick: () => onSelect(i),
+    className: [
+      "h-1.5 rounded-full transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+      i === active ? "w-5 bg-accent" : "w-1.5 bg-border hover:bg-foreground-muted"
+    ].join(" ")
+  },
+  i
+)) });
+function CardCarousel(props) {
+  return props.variant === "rotating" ? /* @__PURE__ */ jsxRuntime.jsx(RotatingCarousel, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(FlatCarousel, { ...props });
+}
+function FlatCarousel({
   children,
   itemWidth = 280,
   gap = 16,
@@ -1793,7 +1811,6 @@ function CardCarousel({
   const update = React24.useCallback(() => {
     const el = scrollerRef.current;
     if (!el) return;
-    el.clientWidth;
     setAtStart(el.scrollLeft <= 1);
     setAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 1);
     const first = el.firstElementChild;
@@ -1811,49 +1828,109 @@ function CardCarousel({
       window.removeEventListener("resize", update);
     };
   }, [update]);
-  const scrollByDir = (dir) => {
+  const slideStep = (dir) => {
     const el = scrollerRef.current;
     if (!el) return;
     const first = el.firstElementChild;
     const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
     el.scrollBy({ left: dir * slideW, behavior: "smooth" });
   };
-  const scrollTo = (i) => {
+  const scrollToIndex = (i) => {
     const el = scrollerRef.current;
     if (!el) return;
     const first = el.firstElementChild;
     const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
     el.scrollTo({ left: i * slideW, behavior: "smooth" });
   };
-  const arrowBtn = "absolute top-1/2 -translate-y-1/2 z-10 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-md transition hover:text-foreground hover:bg-surface-raised disabled:opacity-0 disabled:pointer-events-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": ariaLabel, className: ["relative", className].filter(Boolean).join(" "), style, children: [
-    showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Previous", onClick: () => scrollByDir(-1), disabled: atStart, className: `${arrowBtn} left-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "left" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: scrollerRef,
-        className: "flex overflow-x-auto snap-x snap-mandatory hidden-scrollbar scroll-smooth",
-        style: { gap },
-        children: slides.map((slide, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "snap-start flex-shrink-0", style: { width }, children: slide }, i))
-      }
-    ),
-    showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Next", onClick: () => scrollByDir(1), disabled: atEnd, className: `${arrowBtn} right-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "right" }) }),
-    showDots && slides.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex items-center justify-center gap-1.5", children: slides.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Go to slide ${i + 1}`,
-        "aria-current": i === active,
-        onClick: () => scrollTo(i),
-        className: [
-          "h-1.5 rounded-full transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-          i === active ? "w-5 bg-accent" : "w-1.5 bg-border hover:bg-foreground-muted"
-        ].join(" ")
-      },
-      i
-    )) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": ariaLabel, "aria-roledescription": "carousel", className: ["relative", className].filter(Boolean).join(" "), style, children: [
+    showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Previous", onClick: () => slideStep(-1), disabled: atStart, className: `${arrowBtn} left-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "left" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollerRef, className: "flex overflow-x-auto snap-x snap-mandatory hidden-scrollbar scroll-smooth", style: { gap }, children: slides.map((slide, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "snap-start flex-shrink-0", style: { width }, children: slide }, i)) }),
+    showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Next", onClick: () => slideStep(1), disabled: atEnd, className: `${arrowBtn} right-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "right" }) }),
+    showDots && slides.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Dots, { count: slides.length, active, onSelect: scrollToIndex })
   ] });
 }
+function RotatingCarousel({
+  children,
+  itemWidth = 280,
+  showArrows = true,
+  showDots = false,
+  "aria-label": ariaLabel = "Carousel",
+  className = "",
+  style
+}) {
+  const slides = React24__default.default.Children.toArray(children);
+  const count = slides.length;
+  const [active, setActive] = React24.useState(0);
+  const reduced = framerMotion.useReducedMotion();
+  const wrap = (n) => count > 0 ? (n % count + count) % count : 0;
+  const idx = wrap(active);
+  const step = (dir) => setActive((a) => wrap(a + dir));
+  const w = typeof itemWidth === "number" ? itemWidth : parseInt(String(itemWidth), 10) || 320;
+  const widthCss = typeof itemWidth === "number" ? `${itemWidth}px` : itemWidth;
+  const SPACING = w * 0.6;
+  const SIDE_SCALE = 0.82;
+  const SIDE_OPACITY = 0.5;
+  const transition = reduced ? { duration: 0 } : { type: "spring", stiffness: 280, damping: 32, mass: 0.9 };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      step(-1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      step(1);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "aria-label": ariaLabel,
+      "aria-roledescription": "carousel",
+      className: ["relative", className].filter(Boolean).join(" "),
+      style,
+      onKeyDown,
+      children: [
+        showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Previous", onClick: () => step(-1), className: `${arrowBtn} left-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "left" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mx-auto overflow-hidden py-6", children: [
+          count > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "invisible mx-auto", style: { width: widthCss }, "aria-hidden": "true", children: slides[idx] }),
+          slides.map((slide, i) => {
+            let offset = wrap(i - idx);
+            if (offset > count / 2) offset -= count;
+            const abs = Math.abs(offset);
+            if (abs > 2) return null;
+            const isCenter = offset === 0;
+            const isPeek = abs === 1;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+                style: { width: widthCss, zIndex: 30 - abs * 10, pointerEvents: isCenter || isPeek ? "auto" : "none" },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.motion.div,
+                  {
+                    initial: false,
+                    animate: {
+                      x: offset * (abs <= 1 ? SPACING : SPACING * 1.7),
+                      scale: isCenter ? 1 : SIDE_SCALE,
+                      opacity: abs <= 1 ? isCenter ? 1 : SIDE_OPACITY : 0
+                    },
+                    transition,
+                    className: isCenter ? void 0 : "cursor-pointer",
+                    onClick: isCenter ? void 0 : () => setActive(i),
+                    "aria-hidden": isCenter ? void 0 : true,
+                    children: slide
+                  }
+                )
+              },
+              i
+            );
+          })
+        ] }),
+        showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Next", onClick: () => step(1), className: `${arrowBtn} right-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "right" }) }),
+        showDots && count > 1 && /* @__PURE__ */ jsxRuntime.jsx(Dots, { count, active: idx, onSelect: setActive })
+      ]
+    }
+  );
+}
 var VALUE_SIZE = {
   sm: "text-xl",
   md: "text-3xl",