@particle-academy/react-fancy 5.2.0 → 5.3.0

package/dist/index.cjs

@@ -7042,6 +7042,66 @@ var CardFooter = react.forwardRef(
   }
 );
 CardFooter.displayName = "CardFooter";
+var CardMedia = react.forwardRef(
+  ({
+    src,
+    alt = "",
+    ratio = "16/9",
+    height,
+    background,
+    objectPosition = "center",
+    loading = "lazy",
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-card-media": "",
+        className: cn(
+          "relative overflow-hidden rounded-t-lg",
+          // Card's `padding` prop pads EVERY direct div child
+          // (`[&>div]:px-4 …`), which would inset the media and break the
+          // flush-to-the-edge look every caller wants. `!` wins regardless of
+          // stylesheet order, which plain `p-0` would not.
+          "!px-0 !py-0",
+          className
+        ),
+        style: {
+          ...height === void 0 ? { aspectRatio: ratio } : { height },
+          ...background ? { background } : null,
+          ...style
+        },
+        ...props,
+        children: [
+          src ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              alt,
+              loading,
+              className: "absolute inset-0 h-full w-full object-cover",
+              style: { objectPosition }
+            }
+          ) : null,
+          children,
+          topLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 top-2 z-10", children: topLeft }) : null,
+          topRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 top-2 z-10", children: topRight }) : null,
+          bottomLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-2 left-2 z-10", children: bottomLeft }) : null,
+          bottomRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-2 right-2 z-10", children: bottomRight }) : null
+        ]
+      }
+    );
+  }
+);
+CardMedia.displayName = "CardMedia";
 var variantClasses = {
   outlined: "border border-zinc-200 dark:border-zinc-700",
   elevated: "shadow-md border border-zinc-100 dark:border-zinc-800",
@@ -7057,6 +7117,7 @@ var CardRoot = react.forwardRef(
   ({
     variant = "outlined",
     padding = "md",
+    interactive = false,
     className,
     children,
     ...props
@@ -7069,6 +7130,10 @@ var CardRoot = react.forwardRef(
         className: cn(
           "rounded-lg bg-white dark:bg-zinc-900",
           variantClasses[variant],
+          // `overflow-hidden` is part of `interactive` rather than always-on:
+          // clipping unconditionally would cut off popovers and dropdowns that
+          // legitimately overflow a static card.
+          interactive && "overflow-hidden transition hover:-translate-y-0.5 hover:shadow-lg hover:border-zinc-300 dark:hover:border-zinc-600",
           paddingClasses[padding],
           className
         ),
@@ -7080,6 +7145,7 @@ var CardRoot = react.forwardRef(
 );
 CardRoot.displayName = "Card";
 var Card = Object.assign(CardRoot, {
+  Media: CardMedia,
   Header: CardHeader,
   Body: CardBody,
   Footer: CardFooter