@particle-academy/react-fancy 5.2.0 → 5.3.0

package/dist/index.d.cts

@@ -1015,6 +1015,34 @@ declare const Profile: react.ForwardRefExoticComponent<ProfileProps & react.RefA
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
     variant?: "outlined" | "elevated" | "flat";
     padding?: "none" | "sm" | "md" | "lg";
+    /**
+     * Card is a link or a grid tile: adds the hover lift + border/shadow
+     * response, and clips children to the rounded corners so a `Card.Media`
+     * sits flush.
+     */
+    interactive?: boolean;
+}
+interface CardMediaProps extends HTMLAttributes<HTMLDivElement> {
+    /** Image URL. Omit for a pure colour/gradient tile. */
+    src?: string;
+    alt?: string;
+    /** CSS `aspect-ratio`. Default `"16/9"`. Ignored when `height` is set. */
+    ratio?: string;
+    /** Fixed height instead of an aspect ratio. */
+    height?: number | string;
+    /**
+     * Shown UNDER the image — while it loads, and permanently if it never
+     * arrives. Any CSS background value, so a gradient works.
+     */
+    background?: string;
+    /** `object-position` for the image. Default `"center"`. */
+    objectPosition?: string;
+    loading?: "lazy" | "eager";
+    /** Slots pinned to the media's corners — a number chip, a status pill. */
+    topLeft?: ReactNode;
+    topRight?: ReactNode;
+    bottomLeft?: ReactNode;
+    bottomRight?: ReactNode;
 }
 interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
 }
@@ -1024,6 +1052,7 @@ interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>> & {
+    Media: react.ForwardRefExoticComponent<CardMediaProps & react.RefAttributes<HTMLDivElement>>;
     Header: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
     Body: react.ForwardRefExoticComponent<CardBodyProps & react.RefAttributes<HTMLDivElement>>;
     Footer: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -1015,6 +1015,34 @@ declare const Profile: react.ForwardRefExoticComponent<ProfileProps & react.RefA
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
     variant?: "outlined" | "elevated" | "flat";
     padding?: "none" | "sm" | "md" | "lg";
+    /**
+     * Card is a link or a grid tile: adds the hover lift + border/shadow
+     * response, and clips children to the rounded corners so a `Card.Media`
+     * sits flush.
+     */
+    interactive?: boolean;
+}
+interface CardMediaProps extends HTMLAttributes<HTMLDivElement> {
+    /** Image URL. Omit for a pure colour/gradient tile. */
+    src?: string;
+    alt?: string;
+    /** CSS `aspect-ratio`. Default `"16/9"`. Ignored when `height` is set. */
+    ratio?: string;
+    /** Fixed height instead of an aspect ratio. */
+    height?: number | string;
+    /**
+     * Shown UNDER the image — while it loads, and permanently if it never
+     * arrives. Any CSS background value, so a gradient works.
+     */
+    background?: string;
+    /** `object-position` for the image. Default `"center"`. */
+    objectPosition?: string;
+    loading?: "lazy" | "eager";
+    /** Slots pinned to the media's corners — a number chip, a status pill. */
+    topLeft?: ReactNode;
+    topRight?: ReactNode;
+    bottomLeft?: ReactNode;
+    bottomRight?: ReactNode;
 }
 interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
 }
@@ -1024,6 +1052,7 @@ interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>> & {
+    Media: react.ForwardRefExoticComponent<CardMediaProps & react.RefAttributes<HTMLDivElement>>;
     Header: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
     Body: react.ForwardRefExoticComponent<CardBodyProps & react.RefAttributes<HTMLDivElement>>;
     Footer: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -7040,6 +7040,66 @@ var CardFooter = forwardRef(
   }
 );
 CardFooter.displayName = "CardFooter";
+var CardMedia = forwardRef(
+  ({
+    src,
+    alt = "",
+    ratio = "16/9",
+    height,
+    background,
+    objectPosition = "center",
+    loading = "lazy",
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ 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__ */ jsx(
+            "img",
+            {
+              src,
+              alt,
+              loading,
+              className: "absolute inset-0 h-full w-full object-cover",
+              style: { objectPosition }
+            }
+          ) : null,
+          children,
+          topLeft ? /* @__PURE__ */ jsx("span", { className: "absolute left-2 top-2 z-10", children: topLeft }) : null,
+          topRight ? /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-2 z-10", children: topRight }) : null,
+          bottomLeft ? /* @__PURE__ */ jsx("span", { className: "absolute bottom-2 left-2 z-10", children: bottomLeft }) : null,
+          bottomRight ? /* @__PURE__ */ 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",
@@ -7055,6 +7115,7 @@ var CardRoot = forwardRef(
   ({
     variant = "outlined",
     padding = "md",
+    interactive = false,
     className,
     children,
     ...props
@@ -7067,6 +7128,10 @@ var CardRoot = 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
         ),
@@ -7078,6 +7143,7 @@ var CardRoot = forwardRef(
 );
 CardRoot.displayName = "Card";
 var Card = Object.assign(CardRoot, {
+  Media: CardMedia,
   Header: CardHeader,
   Body: CardBody,
   Footer: CardFooter