@geomak/ui 6.18.0 → 6.20.0

package/dist/index.d.cts

@@ -1131,12 +1131,20 @@ interface CardFooterProps {
 }
 declare function CardFooter({ children, noDivider, className }: CardFooterProps): react_jsx_runtime.JSX.Element;
 
+type CardCarouselVariant = 'flat' | 'rotating';
 interface CardCarouselProps {
-    /** The slides — typically `Card`s. Each becomes a snap target. */
+    /** The slides — typically `Card`s. */
     children: React__default.ReactNode;
+    /**
+     * Layout style. Default `'flat'`.
+     * - `'flat'` — a horizontal scroll-snap row (trackpad / touch / wheel).
+     * - `'rotating'` — a coverflow stack: the active card sits centre-stage,
+     *   prominent, with its neighbours scaled back and faded behind it.
+     */
+    variant?: CardCarouselVariant;
     /** Width of each slide. Number → px. Default `280`. */
     itemWidth?: number | string;
-    /** Gap between slides in px. Default `16`. */
+    /** Gap between slides in px (`flat` only). Default `16`. */
     gap?: number;
     /** Show prev / next arrow buttons. Default `true`. */
     showArrows?: boolean;
@@ -1148,18 +1156,23 @@ interface CardCarouselProps {
     style?: React__default.CSSProperties;
 }
 /**
- * A horizontal, scroll-snap carousel for cards. Native scrolling drives it
- * (trackpad / touch / wheel), with optional arrow buttons and position dots.
- * Arrows disable at the ends; the scrollbar is hidden but scrolling is intact.
+ * A carousel for cards, in two flavours via `variant`:
+ *
+ * - **`flat`** (default) — a native scroll-snap row driven by trackpad / touch /
+ *   wheel, with optional arrows and dots. Arrows disable at the ends.
+ * - **`rotating`** — a coverflow stack. The active card is centre-stage and
+ *   prominent; neighbours are scaled back and faded behind it. Stepping animates
+ *   the stack with a Framer Motion spring (transform + opacity only, so it stays
+ *   smooth). Click a side card, use the arrows/dots, or press ←/→.
  *
  * @example
  * ```tsx
- * <CardCarousel itemWidth={300} showDots>
+ * <CardCarousel variant="rotating" itemWidth={320} showDots>
  *   {vessels.map((v) => <Card key={v.id}>…</Card>)}
  * </CardCarousel>
  * ```
  */
-declare function CardCarousel({ children, itemWidth, gap, showArrows, showDots, 'aria-label': ariaLabel, className, style, }: CardCarouselProps): react_jsx_runtime.JSX.Element;
+declare function CardCarousel(props: CardCarouselProps): react_jsx_runtime.JSX.Element;
 
 type StatisticSize = 'sm' | 'md' | 'lg';
 type DeltaDirection = 'up' | 'down' | 'neutral';

package/dist/index.d.ts

@@ -1131,12 +1131,20 @@ interface CardFooterProps {
 }
 declare function CardFooter({ children, noDivider, className }: CardFooterProps): react_jsx_runtime.JSX.Element;
 
+type CardCarouselVariant = 'flat' | 'rotating';
 interface CardCarouselProps {
-    /** The slides — typically `Card`s. Each becomes a snap target. */
+    /** The slides — typically `Card`s. */
     children: React__default.ReactNode;
+    /**
+     * Layout style. Default `'flat'`.
+     * - `'flat'` — a horizontal scroll-snap row (trackpad / touch / wheel).
+     * - `'rotating'` — a coverflow stack: the active card sits centre-stage,
+     *   prominent, with its neighbours scaled back and faded behind it.
+     */
+    variant?: CardCarouselVariant;
     /** Width of each slide. Number → px. Default `280`. */
     itemWidth?: number | string;
-    /** Gap between slides in px. Default `16`. */
+    /** Gap between slides in px (`flat` only). Default `16`. */
     gap?: number;
     /** Show prev / next arrow buttons. Default `true`. */
     showArrows?: boolean;
@@ -1148,18 +1156,23 @@ interface CardCarouselProps {
     style?: React__default.CSSProperties;
 }
 /**
- * A horizontal, scroll-snap carousel for cards. Native scrolling drives it
- * (trackpad / touch / wheel), with optional arrow buttons and position dots.
- * Arrows disable at the ends; the scrollbar is hidden but scrolling is intact.
+ * A carousel for cards, in two flavours via `variant`:
+ *
+ * - **`flat`** (default) — a native scroll-snap row driven by trackpad / touch /
+ *   wheel, with optional arrows and dots. Arrows disable at the ends.
+ * - **`rotating`** — a coverflow stack. The active card is centre-stage and
+ *   prominent; neighbours are scaled back and faded behind it. Stepping animates
+ *   the stack with a Framer Motion spring (transform + opacity only, so it stays
+ *   smooth). Click a side card, use the arrows/dots, or press ←/→.
  *
  * @example
  * ```tsx
- * <CardCarousel itemWidth={300} showDots>
+ * <CardCarousel variant="rotating" itemWidth={320} showDots>
  *   {vessels.map((v) => <Card key={v.id}>…</Card>)}
  * </CardCarousel>
  * ```
  */
-declare function CardCarousel({ children, itemWidth, gap, showArrows, showDots, 'aria-label': ariaLabel, className, style, }: CardCarouselProps): react_jsx_runtime.JSX.Element;
+declare function CardCarousel(props: CardCarouselProps): react_jsx_runtime.JSX.Element;
 
 type StatisticSize = 'sm' | 'md' | 'lg';
 type DeltaDirection = 'up' | 'down' | 'neutral';

package/dist/index.js

@@ -1738,7 +1738,25 @@ Card.Body = CardBody;
 Card.Footer = CardFooter;
 var Card_default = Card;
 var Arrow2 = ({ dir }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-5 w-5", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "mt-3 flex items-center justify-center gap-1.5", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ 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__ */ jsx(RotatingCarousel, { ...props }) : /* @__PURE__ */ jsx(FlatCarousel, { ...props });
+}
+function FlatCarousel({
   children,
   itemWidth = 280,
   gap = 16,
@@ -1757,7 +1775,6 @@ function CardCarousel({
   const update = 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;
@@ -1775,49 +1792,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__ */ jsxs("section", { "aria-label": ariaLabel, className: ["relative", className].filter(Boolean).join(" "), style, children: [
-    showArrows && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Previous", onClick: () => scrollByDir(-1), disabled: atStart, className: `${arrowBtn} left-1`, children: /* @__PURE__ */ jsx(Arrow2, { dir: "left" }) }),
-    /* @__PURE__ */ 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__ */ jsx("div", { className: "snap-start flex-shrink-0", style: { width }, children: slide }, i))
-      }
-    ),
-    showArrows && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Next", onClick: () => scrollByDir(1), disabled: atEnd, className: `${arrowBtn} right-1`, children: /* @__PURE__ */ jsx(Arrow2, { dir: "right" }) }),
-    showDots && slides.length > 1 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex items-center justify-center gap-1.5", children: slides.map((_, i) => /* @__PURE__ */ 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__ */ jsxs("section", { "aria-label": ariaLabel, "aria-roledescription": "carousel", className: ["relative", className].filter(Boolean).join(" "), style, children: [
+    showArrows && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Previous", onClick: () => slideStep(-1), disabled: atStart, className: `${arrowBtn} left-1`, children: /* @__PURE__ */ jsx(Arrow2, { dir: "left" }) }),
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "snap-start flex-shrink-0", style: { width }, children: slide }, i)) }),
+    showArrows && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Next", onClick: () => slideStep(1), disabled: atEnd, className: `${arrowBtn} right-1`, children: /* @__PURE__ */ jsx(Arrow2, { dir: "right" }) }),
+    showDots && slides.length > 1 && /* @__PURE__ */ 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.Children.toArray(children);
+  const count = slides.length;
+  const [active, setActive] = useState(0);
+  const reduced = 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__ */ jsxs(
+    "section",
+    {
+      "aria-label": ariaLabel,
+      "aria-roledescription": "carousel",
+      className: ["relative", className].filter(Boolean).join(" "),
+      style,
+      onKeyDown,
+      children: [
+        showArrows && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Previous", onClick: () => step(-1), className: `${arrowBtn} left-1`, children: /* @__PURE__ */ jsx(Arrow2, { dir: "left" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative mx-auto overflow-hidden py-6", children: [
+          count > 0 && /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                  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__ */ jsx("button", { type: "button", "aria-label": "Next", onClick: () => step(1), className: `${arrowBtn} right-1`, children: /* @__PURE__ */ jsx(Arrow2, { dir: "right" }) }),
+        showDots && count > 1 && /* @__PURE__ */ jsx(Dots, { count, active: idx, onSelect: setActive })
+      ]
+    }
+  );
+}
 var VALUE_SIZE = {
   sm: "text-xl",
   md: "text-3xl",