@roy-ui/ui 0.0.10 → 0.0.11

package/dist/Card-6L4M4GFX.css

@@ -0,0 +1,270 @@
+.royui-card {
+  /* Surfaces and ink — every one is a variable. The default is a premium
+     off-white (not pure white), which reads warmer and reads on a white page.
+     Opt into dark with theme="dark" (.royui-card--dark) or theme="auto". */
+  --royui-card-bg: #fafaf8;
+  --royui-card-fg: #1a1a1c;
+  --royui-card-muted: rgba(0, 0, 0, 0.52);
+  --royui-card-faint: rgba(0, 0, 0, 0.42);
+  --royui-card-line: rgba(0, 0, 0, 0.08);
+  --royui-card-radius: 24px;
+  /* A thin frame around the photo. Inner radius = radius − pad keeps the
+     corners concentric (24 − 8 = 16, the gallery's own radius). */
+  --royui-card-pad: 8px;
+  --royui-card-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  /* The price reads as premium when it's large and light, not bold. */
+  --royui-card-price-weight: 500;
+  /* Selection stays legible on the surface — a soft tint, not the browser blue. */
+  --royui-card-selection-bg: rgba(20, 20, 22, 0.12);
+  --royui-card-selection-fg: #1a1a1c;
+
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 360px;
+  /* The card is its own query container, so type scales to the card's width
+     (cqi units below) rather than the viewport — it fits in a sidebar, a
+     grid cell, or full-bleed without a media query. */
+  container-type: inline-size;
+  padding: var(--royui-card-pad);
+  background: var(--royui-card-bg);
+  color: var(--royui-card-fg);
+  border-radius: var(--royui-card-radius);
+  font-family: inherit;
+  /* A ring, a contact shadow, and a soft cast — the card rests, it doesn't
+     float. The ring is firm enough to hold the edge on a white background. */
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.07),
+    0 1px 2px rgba(0, 0, 0, 0.04),
+    0 14px 34px -16px rgba(0, 0, 0, 0.22);
+  transition:
+    transform 300ms var(--royui-card-ease),
+    box-shadow 300ms var(--royui-card-ease);
+}
+
+.royui-card--interactive:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 2px 4px rgba(0, 0, 0, 0.05),
+    0 22px 48px -18px rgba(0, 0, 0, 0.28);
+}
+/* The photo eases in a hair as the whole card lifts — barely there. */
+.royui-card--interactive:hover .royui-carousel__img {
+  transform: scale(1.045);
+}
+
+/* Force a legible selection — the browser default can wash text out on the
+   off-white surface. */
+.royui-card ::selection {
+  background: var(--royui-card-selection-bg);
+  color: var(--royui-card-selection-fg);
+}
+
+/* ── Badge ───────────────────────────────────────────────────────────── */
+.royui-card__badge {
+  position: absolute;
+  top: 11px;
+  left: 11px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 9px 4px 7px;
+  background: rgba(255, 255, 255, 0.9);
+  -webkit-backdrop-filter: blur(10px) saturate(1.2);
+  backdrop-filter: blur(10px) saturate(1.2);
+  border-radius: 99px;
+  color: #1a1a1c;
+  font-size: 12px;
+  font-size: clamp(11px, 3.7cqi, 12px);
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1;
+  box-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.04),
+    0 1px 2px rgba(0, 0, 0, 0.1),
+    0 3px 10px -3px rgba(0, 0, 0, 0.22);
+}
+.royui-card__badge-icon {
+  display: inline-flex;
+  color: #f5b400;
+}
+
+/* ── Body ────────────────────────────────────────────────────────────── */
+/* Horizontal padding insets the text a touch past the photo edge; the photo
+   and button sit at the card padding so they share one clean vertical line. */
+.royui-card__body {
+  padding: 14px 6px 2px;
+}
+
+.royui-card__price-row {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  min-width: 0;
+}
+.royui-card__price {
+  font-size: 23px;
+  font-size: clamp(18px, 7.2cqi, 23px);
+  font-weight: var(--royui-card-price-weight);
+  letter-spacing: -0.03em;
+  font-variant-numeric: tabular-nums;
+}
+.royui-card__price-label {
+  font-size: 14px;
+  font-size: clamp(12px, 4.4cqi, 14px);
+  font-weight: 450;
+  color: var(--royui-card-muted);
+}
+
+.royui-card__subtitle {
+  margin: 6px 0 0;
+  font-size: 14px;
+  font-size: clamp(12.5px, 4.4cqi, 14px);
+  line-height: 1.4;
+  color: var(--royui-card-muted);
+}
+
+.royui-card__divider {
+  height: 1px;
+  margin: 14px 0;
+  background: var(--royui-card-line);
+}
+
+/* Stats stay on one row and sit flush to both content edges, so the left and
+   right margins from the card border match. The hairline divider rides the
+   middle. */
+.royui-card__stats {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  gap: clamp(8px, 3.2cqi, 10px);
+  font-size: 14px;
+  font-size: clamp(12px, 4.4cqi, 14px);
+  color: var(--royui-card-fg);
+}
+.royui-card__stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  white-space: nowrap;
+}
+.royui-card__stat-sep {
+  flex: none;
+  width: 1px;
+  height: 15px;
+  background: var(--royui-card-line);
+}
+.royui-card__stat-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--royui-card-faint);
+}
+/* The figure carries weight; the descriptor is dimmed, like the reference. */
+.royui-card__stat-value {
+  color: var(--royui-card-fg);
+}
+.royui-card__stat-label {
+  color: var(--royui-card-muted);
+}
+
+.royui-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  margin-top: 14px;
+  font-size: 14px;
+  font-size: clamp(12px, 4.4cqi, 14px);
+}
+.royui-card__author {
+  color: var(--royui-card-muted);
+  min-width: 0;
+}
+.royui-card__author-link {
+  color: var(--royui-card-fg);
+  font-weight: 550;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  text-decoration-color: var(--royui-card-line);
+  transition: text-decoration-color 180ms var(--royui-card-ease);
+}
+a.royui-card__author-link:hover {
+  text-decoration-color: currentColor;
+}
+.royui-card__meta {
+  color: var(--royui-card-faint);
+  white-space: nowrap;
+}
+
+.royui-card__action {
+  margin-top: 16px;
+}
+
+/* ── Dark theme ──────────────────────────────────────────────────────────
+   Opt in with theme="dark" (.royui-card--dark). theme="auto" (.royui-card--auto)
+   applies the same tokens only when the OS asks for dark — so the default light
+   card is never silently swapped out from under a dark page. */
+.royui-card--dark {
+  --royui-card-bg: #161617;
+  --royui-card-fg: #f5f5f7;
+  --royui-card-muted: rgba(255, 255, 255, 0.55);
+  --royui-card-faint: rgba(255, 255, 255, 0.4);
+  --royui-card-line: rgba(255, 255, 255, 0.1);
+  --royui-card-selection-bg: rgba(245, 245, 247, 0.2);
+  --royui-card-selection-fg: #f5f5f7;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    0 14px 34px -16px rgba(0, 0, 0, 0.6);
+}
+.royui-card--dark.royui-card--interactive:hover {
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.12),
+    0 22px 48px -18px rgba(0, 0, 0, 0.7);
+}
+.royui-card--dark .royui-card__badge {
+  background: rgba(28, 28, 30, 0.82);
+  color: #f5f5f7;
+}
+
+@media (prefers-color-scheme: dark) {
+  .royui-card--auto {
+    --royui-card-bg: #161617;
+    --royui-card-fg: #f5f5f7;
+    --royui-card-muted: rgba(255, 255, 255, 0.55);
+    --royui-card-faint: rgba(255, 255, 255, 0.4);
+    --royui-card-line: rgba(255, 255, 255, 0.1);
+    --royui-card-selection-bg: rgba(245, 245, 247, 0.2);
+    --royui-card-selection-fg: #f5f5f7;
+    box-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.1),
+      0 14px 34px -16px rgba(0, 0, 0, 0.6);
+  }
+  .royui-card--auto.royui-card--interactive:hover {
+    box-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.12),
+      0 22px 48px -18px rgba(0, 0, 0, 0.7);
+  }
+  .royui-card--auto .royui-card__badge {
+    background: rgba(28, 28, 30, 0.82);
+    color: #f5f5f7;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .royui-card,
+  .royui-card--interactive:hover {
+    transition: none;
+    transform: none;
+  }
+  .royui-card--interactive:hover .royui-carousel__img {
+    transform: none;
+  }
+}

package/dist/ImageCarousel-4L4MNUP2.css

@@ -0,0 +1,148 @@
+.royui-carousel {
+  /* Tunables — radius and ratio are the ones you'll reach for most. */
+  --royui-carousel-ratio: 4 / 3;
+  --royui-carousel-radius: 16px;
+  --royui-carousel-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --royui-carousel-dot: rgba(255, 255, 255, 0.55);
+  --royui-carousel-dot-active: #ffffff;
+
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--royui-carousel-radius);
+  aspect-ratio: var(--royui-carousel-ratio);
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.royui-carousel__viewport {
+  width: 100%;
+  height: 100%;
+  /* Let the browser own vertical scroll; we only claim the horizontal axis. */
+  touch-action: pan-y;
+  cursor: grab;
+  -webkit-tap-highlight-color: transparent;
+}
+.royui-carousel__viewport:active {
+  cursor: grabbing;
+}
+.royui-carousel__viewport:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.9);
+  outline-offset: -2px;
+}
+
+.royui-carousel__track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  /* The signature slide — long, eased, with a touch of overshoot at the tail. */
+  transition: transform 520ms var(--royui-carousel-ease);
+  will-change: transform;
+}
+/* While the finger is down the track tracks the pointer 1:1, no easing. */
+.royui-carousel__track--dragging {
+  transition: none;
+}
+
+.royui-carousel__slide {
+  position: relative;
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.royui-carousel__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-drag: none;
+  /* Hover-zoom is driven by the card; the transition lives here. */
+  transition: transform 700ms var(--royui-carousel-ease);
+}
+
+/* A faint floor of shade so white dots stay legible over any photo. */
+.royui-carousel__scrim {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 38%;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
+  opacity: 0;
+  transition: opacity 320ms var(--royui-carousel-ease);
+  pointer-events: none;
+}
+.royui-carousel--has-dots .royui-carousel__scrim {
+  opacity: 1;
+}
+
+.royui-carousel__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+/* Re-enable interaction for whatever the overlay actually contains. */
+.royui-carousel__overlay > * {
+  pointer-events: auto;
+}
+
+.royui-carousel__dots {
+  position: absolute;
+  inset: auto 0 12px 0;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.royui-carousel__dot {
+  width: 6px;
+  height: 6px;
+  padding: 0;
+  border: none;
+  border-radius: 99px;
+  background: var(--royui-carousel-dot);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  /* The active dot doesn't pop — it stretches into a pill. */
+  transition:
+    width 380ms var(--royui-carousel-ease),
+    background 380ms var(--royui-carousel-ease),
+    opacity 380ms var(--royui-carousel-ease);
+}
+.royui-carousel__dot:hover {
+  background: rgba(255, 255, 255, 0.85);
+}
+.royui-carousel__dot--active {
+  width: 20px;
+  background: var(--royui-carousel-dot-active);
+}
+.royui-carousel__dot:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+/* Screen-reader-only live region. */
+.royui-carousel__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .royui-carousel__track,
+  .royui-carousel__img,
+  .royui-carousel__dot,
+  .royui-carousel__scrim {
+    transition: none;
+  }
+}

package/dist/chunk-B7QN2JTN.js

@@ -0,0 +1,307 @@
+"use client";
+import { Button } from './chunk-4SGMAZBG.js';
+import { forwardRef, useId, useState, useCallback, useRef, useEffect, Fragment as Fragment$1 } from 'react';
+import './ImageCarousel-4L4MNUP2.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import './Card-6L4M4GFX.css';
+
+var COMMIT_THRESHOLD = 0.18;
+var RUBBER_BAND = 0.35;
+var ImageCarousel = forwardRef(
+  ({
+    images,
+    index,
+    defaultIndex = 0,
+    onIndexChange,
+    showDots = true,
+    draggable = true,
+    ratio = "4 / 3",
+    overlay,
+    autoplay = false,
+    autoplayInterval = 2500,
+    pauseOnHover = true,
+    className = "",
+    style,
+    ...rest
+  }, ref) => {
+    const count = images.length;
+    const multiple = count > 1;
+    const labelId = useId();
+    const [internal, setInternal] = useState(
+      () => Math.max(0, Math.min(count - 1, defaultIndex))
+    );
+    const active = index ?? internal;
+    const commit = useCallback(
+      (next) => {
+        const clamped = Math.max(0, Math.min(count - 1, next));
+        if (clamped === active) return;
+        if (index === void 0) setInternal(clamped);
+        onIndexChange?.(clamped);
+      },
+      [active, count, index, onIndexChange]
+    );
+    const viewportRef = useRef(null);
+    const startX = useRef(0);
+    const widthRef = useRef(0);
+    const [drag, setDrag] = useState(0);
+    const [dragging, setDragging] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    useEffect(() => {
+      if (!autoplay || !multiple || dragging) return;
+      if (pauseOnHover && hovered) return;
+      if (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+        return;
+      }
+      const id = window.setTimeout(
+        () => commit(active + 1 >= count ? 0 : active + 1),
+        autoplayInterval
+      );
+      return () => window.clearTimeout(id);
+    }, [
+      autoplay,
+      autoplayInterval,
+      pauseOnHover,
+      hovered,
+      dragging,
+      multiple,
+      active,
+      count,
+      commit
+    ]);
+    const onPointerDown = (e) => {
+      if (!draggable || !multiple || e.button !== 0) return;
+      widthRef.current = viewportRef.current?.offsetWidth ?? 0;
+      startX.current = e.clientX;
+      setDragging(true);
+      viewportRef.current?.setPointerCapture(e.pointerId);
+    };
+    const onPointerMove = (e) => {
+      if (!dragging) return;
+      let dx = e.clientX - startX.current;
+      const atStart = active === 0 && dx > 0;
+      const atEnd = active === count - 1 && dx < 0;
+      if (atStart || atEnd) dx *= RUBBER_BAND;
+      setDrag(dx);
+    };
+    const endDrag = (e) => {
+      if (!dragging) return;
+      setDragging(false);
+      viewportRef.current?.releasePointerCapture?.(e.pointerId);
+      const threshold = (widthRef.current || 1) * COMMIT_THRESHOLD;
+      if (drag <= -threshold) commit(active + 1);
+      else if (drag >= threshold) commit(active - 1);
+      setDrag(0);
+    };
+    const onKeyDown = (e) => {
+      if (!multiple) return;
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        commit(active + 1);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        commit(active - 1);
+      }
+    };
+    const trackStyle = {
+      transform: `translate3d(calc(${-active * 100}% + ${drag}px), 0, 0)`
+    };
+    const classes = [
+      "royui-carousel",
+      showDots && multiple ? "royui-carousel--has-dots" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: classes,
+        style: { ["--royui-carousel-ratio"]: ratio, ...style },
+        role: "group",
+        "aria-roledescription": "carousel",
+        "aria-label": "Property images",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: viewportRef,
+              className: "royui-carousel__viewport",
+              tabIndex: multiple ? 0 : void 0,
+              onPointerDown,
+              onPointerMove,
+              onPointerUp: endDrag,
+              onPointerCancel: endDrag,
+              onKeyDown,
+              onMouseEnter: autoplay && pauseOnHover ? () => setHovered(true) : void 0,
+              onMouseLeave: autoplay && pauseOnHover ? () => setHovered(false) : void 0,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: [
+                    "royui-carousel__track",
+                    dragging ? "royui-carousel__track--dragging" : ""
+                  ].filter(Boolean).join(" "),
+                  style: trackStyle,
+                  children: images.map((img, i) => /* @__PURE__ */ jsx("div", { className: "royui-carousel__slide", children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      className: "royui-carousel__img",
+                      src: img.src,
+                      alt: img.alt ?? "",
+                      draggable: false,
+                      loading: i === 0 ? "eager" : "lazy",
+                      "aria-hidden": i !== active
+                    }
+                  ) }, `${img.src}-${i}`))
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "royui-carousel__scrim", "aria-hidden": "true" }),
+          overlay != null && /* @__PURE__ */ jsx("div", { className: "royui-carousel__overlay", children: overlay }),
+          showDots && multiple && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "royui-carousel__dots",
+              role: "tablist",
+              "aria-label": "Choose image",
+              children: images.map((_, i) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": i === active,
+                  "aria-label": `Image ${i + 1} of ${count}`,
+                  className: [
+                    "royui-carousel__dot",
+                    i === active ? "royui-carousel__dot--active" : ""
+                  ].filter(Boolean).join(" "),
+                  onClick: () => commit(i)
+                },
+                i
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: labelId,
+              className: "royui-carousel__status",
+              role: "status",
+              "aria-live": "polite",
+              children: multiple ? `Image ${active + 1} of ${count}` : ""
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ImageCarousel.displayName = "ImageCarousel";
+var StarIcon = () => /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M12 2.5l2.7 5.9 6.4.7-4.8 4.3 1.3 6.3L12 16.9 6.4 19.7l1.3-6.3L2.9 9.1l6.4-.7L12 2.5z" }) });
+var Card = forwardRef(
+  ({
+    images,
+    badge,
+    badgeIcon,
+    price,
+    priceLabel,
+    subtitle,
+    stats,
+    author,
+    authorHref,
+    authorProps,
+    meta,
+    actionLabel = "View Details",
+    onAction,
+    actionProps,
+    ratio = "4 / 3",
+    autoplay = false,
+    autoplayInterval = 2500,
+    defaultIndex,
+    onIndexChange,
+    hoverEffect = true,
+    theme = "auto",
+    className = "",
+    ...rest
+  }, ref) => {
+    const classes = [
+      "royui-card",
+      hoverEffect ? "royui-card--interactive" : "",
+      theme === "dark" ? "royui-card--dark" : "",
+      theme === "auto" ? "royui-card--auto" : "",
+      className
+    ].filter(Boolean).join(" ");
+    const overlay = badge != null ? /* @__PURE__ */ jsxs("span", { className: "royui-card__badge", children: [
+      /* @__PURE__ */ jsx("span", { className: "royui-card__badge-icon", children: badgeIcon ?? /* @__PURE__ */ jsx(StarIcon, {}) }),
+      badge
+    ] }) : void 0;
+    return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...rest, children: [
+      /* @__PURE__ */ jsx(
+        ImageCarousel,
+        {
+          images,
+          ratio,
+          autoplay,
+          autoplayInterval,
+          defaultIndex,
+          onIndexChange,
+          overlay
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "royui-card__body", children: [
+        /* @__PURE__ */ jsxs("div", { className: "royui-card__price-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "royui-card__price", children: price }),
+          priceLabel != null && /* @__PURE__ */ jsx("span", { className: "royui-card__price-label", children: priceLabel })
+        ] }),
+        subtitle != null && /* @__PURE__ */ jsx("p", { className: "royui-card__subtitle", children: subtitle }),
+        stats && stats.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "royui-card__divider" }),
+          /* @__PURE__ */ jsx("div", { className: "royui-card__stats", children: stats.map((stat, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            i > 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "royui-card__stat-sep",
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "royui-card__stat", children: [
+              stat.icon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "royui-card__stat-icon",
+                  "aria-hidden": "true",
+                  children: stat.icon
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "royui-card__stat-value", children: stat.value }),
+              stat.label != null && /* @__PURE__ */ jsx("span", { className: "royui-card__stat-label", children: stat.label })
+            ] })
+          ] }, i)) })
+        ] }),
+        (author != null || meta != null) && /* @__PURE__ */ jsxs("div", { className: "royui-card__footer", children: [
+          author != null && /* @__PURE__ */ jsxs("span", { className: "royui-card__author", children: [
+            "By",
+            " ",
+            authorHref ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: authorHref,
+                className: "royui-card__author-link",
+                ...authorProps,
+                children: author
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "royui-card__author-link", children: author })
+          ] }),
+          meta != null && /* @__PURE__ */ jsx("span", { className: "royui-card__meta", children: meta })
+        ] })
+      ] }),
+      actionLabel != null && /* @__PURE__ */ jsx("div", { className: "royui-card__action", children: /* @__PURE__ */ jsx(Button, { fullWidth: true, onClick: onAction, ...actionProps, children: actionLabel }) })
+    ] });
+  }
+);
+Card.displayName = "Card";
+
+export { Card, ImageCarousel };
+//# sourceMappingURL=chunk-B7QN2JTN.js.map
+//# sourceMappingURL=chunk-B7QN2JTN.js.map

package/dist/chunk-B7QN2JTN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/card/ImageCarousel.tsx","../src/components/card/Card.tsx"],"names":["jsx","forwardRef","jsxs","Fragment"],"mappings":"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","file":"chunk-B7QN2JTN.js","sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from 'react';\nimport './ImageCarousel.css';\n\nexport interface CarouselImage {\n  src: string;\n  alt?: string;\n}\n\nexport interface ImageCarouselProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Slides, in order. A single image renders without dots or drag. */\n  images: CarouselImage[];\n  /** Controlled active index. Leave undefined for uncontrolled. */\n  index?: number;\n  /** Starting index when uncontrolled. Default 0. */\n  defaultIndex?: number;\n  /** Fires with the new index on every change (drag, dot, or keyboard). */\n  onIndexChange?: (index: number) => void;\n  /** Show the pagination dots. Auto-hidden for a single image. Default true. */\n  showDots?: boolean;\n  /** Allow pointer drag / swipe between slides. Default true. */\n  draggable?: boolean;\n  /** Aspect ratio of the media box, e.g. \"4 / 3\" or \"1 / 1\". Default \"4 / 3\". */\n  ratio?: string;\n  /** Overlay slot painted on top of the image — a badge, a gradient, anything. */\n  overlay?: ReactNode;\n  /** Advance to the next slide on a timer, looping back to the first. Default false. */\n  autoplay?: boolean;\n  /** Milliseconds between auto-advances. Default 2500. */\n  autoplayInterval?: number;\n  /** Pause autoplay while the pointer is over the gallery. Default true. */\n  pauseOnHover?: boolean;\n}\n\n/** How far you have to drag, as a fraction of the width, before it commits. */\nconst COMMIT_THRESHOLD = 0.18;\n/** Resistance applied when dragging past the first or last slide. */\nconst RUBBER_BAND = 0.35;\n\nexport const ImageCarousel = forwardRef<HTMLDivElement, ImageCarouselProps>(\n  (\n    {\n      images,\n      index,\n      defaultIndex = 0,\n      onIndexChange,\n      showDots = true,\n      draggable = true,\n      ratio = '4 / 3',\n      overlay,\n      autoplay = false,\n      autoplayInterval = 2500,\n      pauseOnHover = true,\n      className = '',\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    const count = images.length;\n    const multiple = count > 1;\n    const labelId = useId();\n\n    const [internal, setInternal] = useState(() =>\n      Math.max(0, Math.min(count - 1, defaultIndex)),\n    );\n    const active = index ?? internal;\n\n    const commit = useCallback(\n      (next: number) => {\n        const clamped = Math.max(0, Math.min(count - 1, next));\n        if (clamped === active) return;\n        if (index === undefined) setInternal(clamped);\n        onIndexChange?.(clamped);\n      },\n      [active, count, index, onIndexChange],\n    );\n\n    // Drag state. `drag` is the live pixel offset of the current gesture.\n    const viewportRef = useRef<HTMLDivElement>(null);\n    const startX = useRef(0);\n    const widthRef = useRef(0);\n    const [drag, setDrag] = useState(0);\n    const [dragging, setDragging] = useState(false);\n    const [hovered, setHovered] = useState(false);\n\n    // Autoplay — one timeout, re-armed whenever `active` changes (so a manual\n    // dot tap or swipe also restarts the clock). Paused on hover and drag, and\n    // skipped entirely under reduced-motion.\n    useEffect(() => {\n      if (!autoplay || !multiple || dragging) return;\n      if (pauseOnHover && hovered) return;\n      if (\n        typeof window !== 'undefined' &&\n        window.matchMedia?.('(prefers-reduced-motion: reduce)').matches\n      ) {\n        return;\n      }\n      const id = window.setTimeout(\n        () => commit(active + 1 >= count ? 0 : active + 1),\n        autoplayInterval,\n      );\n      return () => window.clearTimeout(id);\n    }, [\n      autoplay,\n      autoplayInterval,\n      pauseOnHover,\n      hovered,\n      dragging,\n      multiple,\n      active,\n      count,\n      commit,\n    ]);\n\n    const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n      if (!draggable || !multiple || e.button !== 0) return;\n      widthRef.current = viewportRef.current?.offsetWidth ?? 0;\n      startX.current = e.clientX;\n      setDragging(true);\n      viewportRef.current?.setPointerCapture(e.pointerId);\n    };\n\n    const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {\n      if (!dragging) return;\n      let dx = e.clientX - startX.current;\n      const atStart = active === 0 && dx > 0;\n      const atEnd = active === count - 1 && dx < 0;\n      if (atStart || atEnd) dx *= RUBBER_BAND;\n      setDrag(dx);\n    };\n\n    const endDrag = (e: ReactPointerEvent<HTMLDivElement>) => {\n      if (!dragging) return;\n      setDragging(false);\n      viewportRef.current?.releasePointerCapture?.(e.pointerId);\n      const threshold = (widthRef.current || 1) * COMMIT_THRESHOLD;\n      if (drag <= -threshold) commit(active + 1);\n      else if (drag >= threshold) commit(active - 1);\n      setDrag(0);\n    };\n\n    const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!multiple) return;\n      if (e.key === 'ArrowRight') {\n        e.preventDefault();\n        commit(active + 1);\n      } else if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        commit(active - 1);\n      }\n    };\n\n    // Slide the track by whole slides, then add the in-flight drag offset.\n    const trackStyle: CSSProperties = {\n      transform: `translate3d(calc(${-active * 100}% + ${drag}px), 0, 0)`,\n    };\n\n    const classes = [\n      'royui-carousel',\n      showDots && multiple ? 'royui-carousel--has-dots' : '',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        style={{ ['--royui-carousel-ratio' as string]: ratio, ...style }}\n        role=\"group\"\n        aria-roledescription=\"carousel\"\n        aria-label=\"Property images\"\n        {...rest}\n      >\n        <div\n          ref={viewportRef}\n          className=\"royui-carousel__viewport\"\n          tabIndex={multiple ? 0 : undefined}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endDrag}\n          onPointerCancel={endDrag}\n          onKeyDown={onKeyDown}\n          onMouseEnter={\n            autoplay && pauseOnHover ? () => setHovered(true) : undefined\n          }\n          onMouseLeave={\n            autoplay && pauseOnHover ? () => setHovered(false) : undefined\n          }\n        >\n          <div\n            className={[\n              'royui-carousel__track',\n              dragging ? 'royui-carousel__track--dragging' : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            style={trackStyle}\n          >\n            {images.map((img, i) => (\n              <div className=\"royui-carousel__slide\" key={`${img.src}-${i}`}>\n                <img\n                  className=\"royui-carousel__img\"\n                  src={img.src}\n                  alt={img.alt ?? ''}\n                  draggable={false}\n                  loading={i === 0 ? 'eager' : 'lazy'}\n                  aria-hidden={i !== active}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"royui-carousel__scrim\" aria-hidden=\"true\" />\n\n        {overlay != null && (\n          <div className=\"royui-carousel__overlay\">{overlay}</div>\n        )}\n\n        {showDots && multiple && (\n          <div\n            className=\"royui-carousel__dots\"\n            role=\"tablist\"\n            aria-label=\"Choose image\"\n          >\n            {images.map((_, i) => (\n              <button\n                key={i}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={i === active}\n                aria-label={`Image ${i + 1} of ${count}`}\n                className={[\n                  'royui-carousel__dot',\n                  i === active ? 'royui-carousel__dot--active' : '',\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={() => commit(i)}\n              />\n            ))}\n          </div>\n        )}\n\n        <span\n          id={labelId}\n          className=\"royui-carousel__status\"\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          {multiple ? `Image ${active + 1} of ${count}` : ''}\n        </span>\n      </div>\n    );\n  },\n);\n\nImageCarousel.displayName = 'ImageCarousel';\n","'use client';\n\nimport {\n  Fragment,\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { Button, type ButtonProps } from '../button';\nimport { ImageCarousel, type CarouselImage } from './ImageCarousel';\nimport './Card.css';\n\nexport interface CardStat {\n  /** Small leading glyph. Inherits the muted stat color via currentColor. */\n  icon?: ReactNode;\n  /** The figure, full-strength — e.g. \"264 m²\" or \"4\". */\n  value: ReactNode;\n  /** Dimmed descriptor after the figure — e.g. \"Living\" or \"Bedrooms\". */\n  label?: ReactNode;\n}\n\nexport interface CardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'> {\n  /** Gallery shown at the top, with swipe + dot pagination. */\n  images: CarouselImage[];\n  /** Pill label over the image, e.g. \"Prime Pick\". Hidden when omitted. */\n  badge?: ReactNode;\n  /** Glyph inside the badge. Defaults to a gold star. */\n  badgeIcon?: ReactNode;\n  /** Headline figure, e.g. \"$250,000\". */\n  price: ReactNode;\n  /** Muted qualifier next to the price, e.g. \"List price\". */\n  priceLabel?: ReactNode;\n  /** Secondary line under the price — owner, address, etc. */\n  subtitle?: ReactNode;\n  /** Inline figures separated by hairline dividers, e.g. living area and rooms. */\n  stats?: CardStat[];\n  /** Footer attribution. Becomes a link when authorHref is set. */\n  author?: ReactNode;\n  /** Makes the author name a link. */\n  authorHref?: string;\n  /** Extra attributes for the author link — target, rel, onClick, etc. */\n  authorProps?: AnchorHTMLAttributes<HTMLAnchorElement>;\n  /** Right-aligned footer note, e.g. \"2 days ago\". */\n  meta?: ReactNode;\n  /** Label for the action button. Pass null to drop the button entirely. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action button. */\n  onAction?: () => void;\n  /** Escape hatch onto the underlying Button (variant, color, loading, …). */\n  actionProps?: Partial<ButtonProps>;\n  /** Aspect ratio of the gallery. Default \"4 / 3\". */\n  ratio?: string;\n  /** Auto-advance the gallery on a timer, looping. Default false. */\n  autoplay?: boolean;\n  /** Milliseconds between auto-advances. Default 2500. */\n  autoplayInterval?: number;\n  /** Starting gallery index. */\n  defaultIndex?: number;\n  /** Fires when the gallery moves. */\n  onIndexChange?: (index: number) => void;\n  /** Lift + image-zoom on hover. Default true. */\n  hoverEffect?: boolean;\n  /**\n   * Colour scheme. \"auto\" (default) follows the system via prefers-color-scheme;\n   * \"light\" is a premium off-white surface, \"dark\" a near-black one.\n   */\n  theme?: 'light' | 'dark' | 'auto';\n}\n\nconst StarIcon = () => (\n  <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden>\n    <path d=\"M12 2.5l2.7 5.9 6.4.7-4.8 4.3 1.3 6.3L12 16.9 6.4 19.7l1.3-6.3L2.9 9.1l6.4-.7L12 2.5z\" />\n  </svg>\n);\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      images,\n      badge,\n      badgeIcon,\n      price,\n      priceLabel,\n      subtitle,\n      stats,\n      author,\n      authorHref,\n      authorProps,\n      meta,\n      actionLabel = 'View Details',\n      onAction,\n      actionProps,\n      ratio = '4 / 3',\n      autoplay = false,\n      autoplayInterval = 2500,\n      defaultIndex,\n      onIndexChange,\n      hoverEffect = true,\n      theme = 'auto',\n      className = '',\n      ...rest\n    },\n    ref,\n  ) => {\n    const classes = [\n      'royui-card',\n      hoverEffect ? 'royui-card--interactive' : '',\n      theme === 'dark' ? 'royui-card--dark' : '',\n      theme === 'auto' ? 'royui-card--auto' : '',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const overlay =\n      badge != null ? (\n        <span className=\"royui-card__badge\">\n          <span className=\"royui-card__badge-icon\">\n            {badgeIcon ?? <StarIcon />}\n          </span>\n          {badge}\n        </span>\n      ) : undefined;\n\n    return (\n      <div ref={ref} className={classes} {...rest}>\n        <ImageCarousel\n          images={images}\n          ratio={ratio}\n          autoplay={autoplay}\n          autoplayInterval={autoplayInterval}\n          defaultIndex={defaultIndex}\n          onIndexChange={onIndexChange}\n          overlay={overlay}\n        />\n\n        <div className=\"royui-card__body\">\n          <div className=\"royui-card__price-row\">\n            <span className=\"royui-card__price\">{price}</span>\n            {priceLabel != null && (\n              <span className=\"royui-card__price-label\">{priceLabel}</span>\n            )}\n          </div>\n\n          {subtitle != null && (\n            <p className=\"royui-card__subtitle\">{subtitle}</p>\n          )}\n\n          {stats && stats.length > 0 && (\n            <>\n              <div className=\"royui-card__divider\" />\n              <div className=\"royui-card__stats\">\n                {stats.map((stat, i) => (\n                  <Fragment key={i}>\n                    {i > 0 && (\n                      <span\n                        className=\"royui-card__stat-sep\"\n                        aria-hidden=\"true\"\n                      />\n                    )}\n                    <span className=\"royui-card__stat\">\n                      {stat.icon && (\n                        <span\n                          className=\"royui-card__stat-icon\"\n                          aria-hidden=\"true\"\n                        >\n                          {stat.icon}\n                        </span>\n                      )}\n                      <span className=\"royui-card__stat-value\">{stat.value}</span>\n                      {stat.label != null && (\n                        <span className=\"royui-card__stat-label\">\n                          {stat.label}\n                        </span>\n                      )}\n                    </span>\n                  </Fragment>\n                ))}\n              </div>\n            </>\n          )}\n\n          {(author != null || meta != null) && (\n            <div className=\"royui-card__footer\">\n              {author != null && (\n                <span className=\"royui-card__author\">\n                  By{' '}\n                  {authorHref ? (\n                    <a\n                      href={authorHref}\n                      className=\"royui-card__author-link\"\n                      {...authorProps}\n                    >\n                      {author}\n                    </a>\n                  ) : (\n                    <span className=\"royui-card__author-link\">{author}</span>\n                  )}\n                </span>\n              )}\n              {meta != null && (\n                <span className=\"royui-card__meta\">{meta}</span>\n              )}\n            </div>\n          )}\n        </div>\n\n        {actionLabel != null && (\n          <div className=\"royui-card__action\">\n            <Button fullWidth onClick={onAction} {...actionProps}>\n              {actionLabel}\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n"]}

package/dist/components/card/index.d.ts

@@ -0,0 +1,92 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
+import { ButtonProps } from '../button/index.js';
+
+interface CarouselImage {
+    src: string;
+    alt?: string;
+}
+interface ImageCarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Slides, in order. A single image renders without dots or drag. */
+    images: CarouselImage[];
+    /** Controlled active index. Leave undefined for uncontrolled. */
+    index?: number;
+    /** Starting index when uncontrolled. Default 0. */
+    defaultIndex?: number;
+    /** Fires with the new index on every change (drag, dot, or keyboard). */
+    onIndexChange?: (index: number) => void;
+    /** Show the pagination dots. Auto-hidden for a single image. Default true. */
+    showDots?: boolean;
+    /** Allow pointer drag / swipe between slides. Default true. */
+    draggable?: boolean;
+    /** Aspect ratio of the media box, e.g. "4 / 3" or "1 / 1". Default "4 / 3". */
+    ratio?: string;
+    /** Overlay slot painted on top of the image — a badge, a gradient, anything. */
+    overlay?: ReactNode;
+    /** Advance to the next slide on a timer, looping back to the first. Default false. */
+    autoplay?: boolean;
+    /** Milliseconds between auto-advances. Default 2500. */
+    autoplayInterval?: number;
+    /** Pause autoplay while the pointer is over the gallery. Default true. */
+    pauseOnHover?: boolean;
+}
+declare const ImageCarousel: react.ForwardRefExoticComponent<ImageCarouselProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CardStat {
+    /** Small leading glyph. Inherits the muted stat color via currentColor. */
+    icon?: ReactNode;
+    /** The figure, full-strength — e.g. "264 m²" or "4". */
+    value: ReactNode;
+    /** Dimmed descriptor after the figure — e.g. "Living" or "Bedrooms". */
+    label?: ReactNode;
+}
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'> {
+    /** Gallery shown at the top, with swipe + dot pagination. */
+    images: CarouselImage[];
+    /** Pill label over the image, e.g. "Prime Pick". Hidden when omitted. */
+    badge?: ReactNode;
+    /** Glyph inside the badge. Defaults to a gold star. */
+    badgeIcon?: ReactNode;
+    /** Headline figure, e.g. "$250,000". */
+    price: ReactNode;
+    /** Muted qualifier next to the price, e.g. "List price". */
+    priceLabel?: ReactNode;
+    /** Secondary line under the price — owner, address, etc. */
+    subtitle?: ReactNode;
+    /** Inline figures separated by hairline dividers, e.g. living area and rooms. */
+    stats?: CardStat[];
+    /** Footer attribution. Becomes a link when authorHref is set. */
+    author?: ReactNode;
+    /** Makes the author name a link. */
+    authorHref?: string;
+    /** Extra attributes for the author link — target, rel, onClick, etc. */
+    authorProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    /** Right-aligned footer note, e.g. "2 days ago". */
+    meta?: ReactNode;
+    /** Label for the action button. Pass null to drop the button entirely. */
+    actionLabel?: ReactNode;
+    /** Click handler for the action button. */
+    onAction?: () => void;
+    /** Escape hatch onto the underlying Button (variant, color, loading, …). */
+    actionProps?: Partial<ButtonProps>;
+    /** Aspect ratio of the gallery. Default "4 / 3". */
+    ratio?: string;
+    /** Auto-advance the gallery on a timer, looping. Default false. */
+    autoplay?: boolean;
+    /** Milliseconds between auto-advances. Default 2500. */
+    autoplayInterval?: number;
+    /** Starting gallery index. */
+    defaultIndex?: number;
+    /** Fires when the gallery moves. */
+    onIndexChange?: (index: number) => void;
+    /** Lift + image-zoom on hover. Default true. */
+    hoverEffect?: boolean;
+    /**
+     * Colour scheme. "auto" (default) follows the system via prefers-color-scheme;
+     * "light" is a premium off-white surface, "dark" a near-black one.
+     */
+    theme?: 'light' | 'dark' | 'auto';
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Card, type CardProps, type CardStat, type CarouselImage, ImageCarousel, type ImageCarouselProps };

package/dist/components/card/index.js

@@ -0,0 +1,5 @@
+"use client";
+export { Card, ImageCarousel } from '../../chunk-B7QN2JTN.js';
+import '../../chunk-4SGMAZBG.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/index.d.ts

@@ -13,5 +13,6 @@ export { D as DateRange, a as addDays, b as addMonths, f as formatMonthYear, c a
 export { A as AnalogClock, a as AnalogClockProps, T as TimePicker, b as TimePickerProps, c as TimePickerVariant, d as TimeRangePicker, e as TimeRangePickerProps, f as TimeRangeValue, g as TimeValue, h as formatTime, i as formatTimeRange } from './TimeRangePicker-CgkOBnk6.js';
 export { ClockSwitch, ClockSwitchProps, DigitalClock, DigitalClockProps } from './components/time-picker/index.js';
 export { Column, ColumnMenu, ColumnType, DataIO, DataTable, DataTableProps, FilterState, SortDir, TableLayout, downloadString, fromCsv, fromJson, toCsv, toJson } from './components/data-table/index.js';
+export { Card, CardProps, CardStat, CarouselImage, ImageCarousel, ImageCarouselProps } from './components/card/index.js';
 import 'react';
 import 'react/jsx-runtime';

package/dist/index.js

@@ -1,15 +1,16 @@
 "use client";
+export { Popover } from './chunk-C5X3TE5U.js';
 export { TextMorph } from './chunk-PGV55XSZ.js';
 export { TreeNav, TreeNavItem } from './chunk-M6HB6BMA.js';
-export { Button } from './chunk-4SGMAZBG.js';
 export { ColumnMenu, DataTable, downloadString, fromCsv, fromJson, toCsv, toJson } from './chunk-PDUQROG2.js';
 export { Spinner, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './chunk-XERZVDIT.js';
 export { TableSearch } from './chunk-KSHKVSNK.js';
 export { AnalogClock, ClockSwitch, DigitalClock, TimePicker, TimeRangePicker, formatTime, formatTimeRange } from './chunk-QOSMU4DV.js';
 export { DEFAULT_PRESETS, DateRangePicker, addDays, addMonths, formatMonthYear, formatRange, formatShort, isBetween, isSameDay, startOfDay } from './chunk-SFENGB5N.js';
+export { Card, ImageCarousel } from './chunk-B7QN2JTN.js';
+export { Button } from './chunk-4SGMAZBG.js';
 export { GradientButton } from './chunk-RLBVY3DG.js';
 export { MadeBy } from './chunk-MDPMEW4K.js';
 export { Pagination } from './chunk-5CIBIH7R.js';
-export { Popover } from './chunk-C5X3TE5U.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roy-ui/ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Free, animated React components built with TypeScript. Zero config, RSC-safe, sub-12 KB. Gradient button, popover, text morph and more.",
   "keywords": [
     "react",
@@ -210,6 +210,10 @@
       "types": "./dist/components/data-table/index.d.ts",
       "import": "./dist/components/data-table/index.js"
     },
+    "./card": {
+      "types": "./dist/components/card/index.d.ts",
+      "import": "./dist/components/card/index.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {