@particle-academy/react-fancy 5.1.0 → 5.3.0

package/dist/index.d.cts

@@ -843,8 +843,18 @@ declare function Portal({ children, container }: PortalProps): react.ReactPortal
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     /** Which heading element to render */
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    /** Text size */
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /**
+     * Text size, on a SEMANTIC ramp — the names are steps on this scale, not
+     * Tailwind class names. `xl` is `text-2xl` and `2xl` is `text-4xl`, and that
+     * offset has been true since the component shipped, so the display steps
+     * below continue the same ramp rather than re-basing it and silently
+     * resizing every existing heading.
+     *
+     * `3xl`–`7xl` are DISPLAY sizes: hero type, "typography at maximum volume".
+     * They carry tighter tracking, because letter-spacing tuned for body-adjacent
+     * headings reads loose and unset once type gets big.
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
     /** Font weight */
     weight?: "normal" | "medium" | "semibold" | "bold";
 }
@@ -1005,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> {
 }
@@ -1014,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

@@ -843,8 +843,18 @@ declare function Portal({ children, container }: PortalProps): react.ReactPortal
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     /** Which heading element to render */
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    /** Text size */
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /**
+     * Text size, on a SEMANTIC ramp — the names are steps on this scale, not
+     * Tailwind class names. `xl` is `text-2xl` and `2xl` is `text-4xl`, and that
+     * offset has been true since the component shipped, so the display steps
+     * below continue the same ramp rather than re-basing it and silently
+     * resizing every existing heading.
+     *
+     * `3xl`–`7xl` are DISPLAY sizes: hero type, "typography at maximum volume".
+     * They carry tighter tracking, because letter-spacing tuned for body-adjacent
+     * headings reads loose and unset once type gets big.
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
     /** Font weight */
     weight?: "normal" | "medium" | "semibold" | "bold";
 }
@@ -1005,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> {
 }
@@ -1014,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

@@ -6222,7 +6222,20 @@ var sizeClasses3 = {
   md: "text-base",
   lg: "text-lg",
   xl: "text-2xl",
-  "2xl": "text-4xl"
+  "2xl": "text-4xl",
+  // Display steps. Each is the next Tailwind size up, continuing the ramp.
+  "3xl": "text-5xl",
+  "4xl": "text-6xl",
+  "5xl": "text-7xl",
+  "6xl": "text-8xl",
+  "7xl": "text-9xl"
+};
+var trackingClasses = {
+  "3xl": "tracking-tight",
+  "4xl": "tracking-tight",
+  "5xl": "tracking-tighter",
+  "6xl": "tracking-tighter",
+  "7xl": "tracking-tighter"
 };
 var weightClasses = {
   normal: "font-normal",
@@ -6247,6 +6260,7 @@ var Heading = forwardRef(
         className: cn(
           "text-zinc-900 dark:text-zinc-100",
           sizeClasses3[size],
+          trackingClasses[size],
           weightClasses[weight],
           className
         ),
@@ -7026,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",
@@ -7041,6 +7115,7 @@ var CardRoot = forwardRef(
   ({
     variant = "outlined",
     padding = "md",
+    interactive = false,
     className,
     children,
     ...props
@@ -7053,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
         ),
@@ -7064,6 +7143,7 @@ var CardRoot = forwardRef(
 );
 CardRoot.displayName = "Card";
 var Card = Object.assign(CardRoot, {
+  Media: CardMedia,
   Header: CardHeader,
   Body: CardBody,
   Footer: CardFooter