@fanvue/ui 2.14.2 → 2.14.3

package/dist/cjs/components/CreatorTile/CreatorTile.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const cn = require("../../utils/cn.cjs");
+const Avatar = require("../Avatar/Avatar.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -22,12 +23,12 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const ASPECT_RATIO_CLASSES = {
-  tall: "aspect-1/2",
-  medium: "aspect-2/3",
-  short: "aspect-4/5"
+  tall: "aspect-5/4",
+  medium: "aspect-3/2",
+  short: "aspect-9/5"
 };
 const CreatorTile = React__namespace.forwardRef(
-  ({ className, imageSrc, imageAlt = "", name, tagline, aspectRatio = "medium", ...props }, ref) => {
+  ({ className, background, name, tagline, avatar, action, aspectRatio = "medium", ...props }, ref) => {
     const aspectClass = ASPECT_RATIO_CLASSES[aspectRatio];
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -40,19 +41,27 @@ const CreatorTile = React__namespace.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: imageSrc,
-              alt: imageAlt,
-              loading: "lazy",
-              className: "absolute inset-0 -z-10 h-full w-full object-cover"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 -z-10 bg-linear-to-b from-64% from-transparent to-black/40" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 px-6 pb-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 font-black text-4xl text-white leading-none tracking-tight", children: name }),
-            tagline ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 font-bold text-[9px] text-brand-primary-default uppercase leading-none", children: tagline }) : null
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover", children: background }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-1/2 rounded-b-[inherit] bg-linear-to-t from-black/60 to-transparent" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-1/2 overflow-hidden rounded-b-[inherit] backdrop-blur-md [-webkit-mask-image:linear-gradient(to_top,black,transparent)] [mask-image:linear-gradient(to_top,black,transparent)]" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-between gap-4 p-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Avatar.Avatar,
+                {
+                  size: 40,
+                  src: avatar?.src,
+                  alt: avatar?.alt ?? (typeof name === "string" ? name : void 0),
+                  fallback: avatar?.fallback,
+                  ...avatar
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-lg m-0 truncate text-white", children: name }),
+                tagline ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-md m-0 truncate text-white/50", children: tagline }) : null
+              ] })
+            ] }),
+            action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action }) : null
           ] })
         ]
       }

package/dist/cjs/components/CreatorTile/CreatorTile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CreatorTile.cjs","sources":["../../../../src/components/CreatorTile/CreatorTile.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Width-to-height ratio preset for the tile. */\nexport type CreatorTileAspectRatio = \"tall\" | \"medium\" | \"short\";\n\nconst ASPECT_RATIO_CLASSES: Record<CreatorTileAspectRatio, string> = {\n  tall: \"aspect-1/2\",\n  medium: \"aspect-2/3\",\n  short: \"aspect-4/5\",\n};\n\nexport interface CreatorTileProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Source URL of the creator's image. Rendered as the tile background. */\n  imageSrc: string;\n  /** Alt text for the creator image. Use an empty string for purely decorative imagery. */\n  imageAlt?: string;\n  /** Creator name shown as the prominent overlay heading. */\n  name: React.ReactNode;\n  /** Short tagline shown under the name in the brand accent color. */\n  tagline?: React.ReactNode;\n  /**\n   * Width-to-height ratio preset.\n   *\n   * - `tall` – 1:2 narrow portrait\n   * - `medium` – 2:3 classic poster (default)\n   * - `short` – 4:5 closer to square\n   *\n   * @default \"medium\"\n   */\n  aspectRatio?: CreatorTileAspectRatio;\n}\n\n/**\n * A visual highlight tile showcasing a creator with an overlaid name and tagline.\n *\n * The tile renders a full-bleed image with a bottom gradient that ensures the\n * overlaid text remains legible regardless of the underlying photography.\n *\n * @example\n * ```tsx\n * <CreatorTile\n *   imageSrc=\"https://example.com/creator.jpg\"\n *   imageAlt=\"Portrait of Jane Doe\"\n *   name=\"JANE DOE\"\n *   tagline=\"GLOBAL MUSIC ICON\"\n * />\n * ```\n */\nexport const CreatorTile = React.forwardRef<HTMLDivElement, CreatorTileProps>(\n  (\n    { className, imageSrc, imageAlt = \"\", name, tagline, aspectRatio = \"medium\", ...props },\n    ref,\n  ) => {\n    const aspectClass = ASPECT_RATIO_CLASSES[aspectRatio];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative isolate flex w-full flex-col justify-end overflow-hidden\",\n          aspectClass,\n          className,\n        )}\n        {...props}\n      >\n        <img\n          src={imageSrc}\n          alt={imageAlt}\n          loading=\"lazy\"\n          className=\"absolute inset-0 -z-10 h-full w-full object-cover\"\n        />\n        <div className=\"pointer-events-none absolute inset-0 -z-10 bg-linear-to-b from-64% from-transparent to-black/40\" />\n        <div className=\"flex flex-col gap-1 px-6 pb-6\">\n          <p className=\"m-0 font-black text-4xl text-white leading-none tracking-tight\">{name}</p>\n          {tagline ? (\n            <p className=\"m-0 font-bold text-[9px] text-brand-primary-default uppercase leading-none\">\n              {tagline}\n            </p>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\n\nCreatorTile.displayName = \"CreatorTile\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,uBAA+D;AAAA,EACnE,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAuCO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE,EAAE,WAAW,UAAU,WAAW,IAAI,MAAM,SAAS,cAAc,UAAU,GAAG,MAAA,GAChF,QACG;AACH,UAAM,cAAc,qBAAqB,WAAW;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZA,2BAAAA,IAAC,OAAA,EAAI,WAAU,kGAAA,CAAkG;AAAA,UACjHF,2BAAAA,KAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,YAAAE,2BAAAA,IAAC,KAAA,EAAE,WAAU,kEAAkE,UAAA,MAAK;AAAA,YACnF,UACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU,8EACV,mBACH,IACE;AAAA,UAAA,EAAA,CACN;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"CreatorTile.cjs","sources":["../../../../src/components/CreatorTile/CreatorTile.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\n/** Width-to-height ratio preset for the tile. */\nexport type CreatorTileAspectRatio = \"tall\" | \"medium\" | \"short\";\n\nconst ASPECT_RATIO_CLASSES: Record<CreatorTileAspectRatio, string> = {\n  tall: \"aspect-5/4\",\n  medium: \"aspect-3/2\",\n  short: \"aspect-9/5\",\n};\n\nexport interface CreatorTileProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Decorative background media rendered behind the creator content. */\n  background: React.ReactNode;\n  /** Creator display name shown as the prominent heading. */\n  name: React.ReactNode;\n  /** Optional secondary line shown under the name (e.g. handle or tagline). */\n  tagline?: React.ReactNode;\n  /** Avatar props forwarded to the inner {@link Avatar}. */\n  avatar?: React.ComponentPropsWithoutRef<typeof Avatar>;\n  /**\n   * Action element rendered on the right of the profile row (e.g. a `Button`\n   * for following the creator).\n   */\n  action?: React.ReactNode;\n  /**\n   * Width-to-height ratio preset.\n   *\n   * - `tall` – 1:2 narrow portrait\n   * - `medium` – 361:200 landscape banner (default)\n   * - `short` – 4:5 closer to square\n   *\n   * @default \"medium\"\n   */\n  aspectRatio?: CreatorTileAspectRatio;\n}\n\n/**\n * A visual highlight tile showcasing a creator with a full-bleed background\n * media and an overlaid profile row containing an avatar, name, optional\n * tagline and an action element.\n *\n * @example\n * ```tsx\n * <CreatorTile\n *   background={<img src=\"/creator.jpg\" alt=\"\" />}\n *   avatar={{ src: \"/avatar.jpg\", alt: \"Aitana Lopez\", fallback: \"AL\" }}\n *   name=\"Aitana Lopez\"\n *   tagline=\"@fit_aitana\"\n *   action={<Button variant=\"primary\">Follow</Button>}\n * />\n * ```\n */\nexport const CreatorTile = React.forwardRef<HTMLDivElement, CreatorTileProps>(\n  (\n    { className, background, name, tagline, avatar, action, aspectRatio = \"medium\", ...props },\n    ref,\n  ) => {\n    const aspectClass = ASPECT_RATIO_CLASSES[aspectRatio];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative isolate flex w-full flex-col justify-end overflow-hidden\",\n          aspectClass,\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"pointer-events-none absolute inset-0 select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover\">\n          {background}\n        </div>\n        <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 rounded-b-[inherit] bg-linear-to-t from-black/60 to-transparent\" />\n        <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 overflow-hidden rounded-b-[inherit] backdrop-blur-md [-webkit-mask-image:linear-gradient(to_top,black,transparent)] [mask-image:linear-gradient(to_top,black,transparent)]\" />\n        <div className=\"relative flex items-center justify-between gap-4 p-4\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <Avatar\n              size={40}\n              src={avatar?.src}\n              alt={avatar?.alt ?? (typeof name === \"string\" ? name : undefined)}\n              fallback={avatar?.fallback}\n              {...avatar}\n            />\n            <div className=\"flex min-w-0 flex-col\">\n              <p className=\"typography-semibold-body-lg m-0 truncate text-white\">{name}</p>\n              {tagline ? (\n                <p className=\"typography-semibold-body-md m-0 truncate text-white/50\">{tagline}</p>\n              ) : null}\n            </div>\n          </div>\n          {action ? <div className=\"shrink-0\">{action}</div> : null}\n        </div>\n      </div>\n    );\n  },\n);\n\nCreatorTile.displayName = \"CreatorTile\";\n"],"names":["React","jsxs","cn","jsx","Avatar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,uBAA+D;AAAA,EACnE,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AA4CO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CACE,EAAE,WAAW,YAAY,MAAM,SAAS,QAAQ,QAAQ,cAAc,UAAU,GAAG,MAAA,GACnF,QACG;AACH,UAAM,cAAc,qBAAqB,WAAW;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,kHACZ,UAAA,YACH;AAAA,UACAA,2BAAAA,IAAC,OAAA,EAAI,WAAU,wHAAA,CAAwH;AAAA,UACvIA,2BAAAA,IAAC,OAAA,EAAI,WAAU,mOAAA,CAAmO;AAAA,UAClPF,2BAAAA,KAAC,OAAA,EAAI,WAAU,wDACb,UAAA;AAAA,YAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,cAAAE,2BAAAA;AAAAA,gBAACC,OAAAA;AAAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,KAAK,QAAQ;AAAA,kBACb,KAAK,QAAQ,QAAQ,OAAO,SAAS,WAAW,OAAO;AAAA,kBACvD,UAAU,QAAQ;AAAA,kBACjB,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAENH,2BAAAA,KAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,gBAAAE,2BAAAA,IAAC,KAAA,EAAE,WAAU,uDAAuD,UAAA,MAAK;AAAA,gBACxE,UACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU,0DAA0D,mBAAQ,IAC7E;AAAA,cAAA,EAAA,CACN;AAAA,YAAA,GACF;AAAA,YACC,SAASA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,kBAAO,IAAS;AAAA,UAAA,EAAA,CACvD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}

package/dist/components/CreatorTile/CreatorTile.mjs

@@ -2,13 +2,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
+import { Avatar } from "../Avatar/Avatar.mjs";
 const ASPECT_RATIO_CLASSES = {
-  tall: "aspect-1/2",
-  medium: "aspect-2/3",
-  short: "aspect-4/5"
+  tall: "aspect-5/4",
+  medium: "aspect-3/2",
+  short: "aspect-9/5"
 };
 const CreatorTile = React.forwardRef(
-  ({ className, imageSrc, imageAlt = "", name, tagline, aspectRatio = "medium", ...props }, ref) => {
+  ({ className, background, name, tagline, avatar, action, aspectRatio = "medium", ...props }, ref) => {
     const aspectClass = ASPECT_RATIO_CLASSES[aspectRatio];
     return /* @__PURE__ */ jsxs(
       "div",
@@ -21,19 +22,27 @@ const CreatorTile = React.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: imageSrc,
-              alt: imageAlt,
-              loading: "lazy",
-              className: "absolute inset-0 -z-10 h-full w-full object-cover"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 -z-10 bg-linear-to-b from-64% from-transparent to-black/40" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-6 pb-6", children: [
-            /* @__PURE__ */ jsx("p", { className: "m-0 font-black text-4xl text-white leading-none tracking-tight", children: name }),
-            tagline ? /* @__PURE__ */ jsx("p", { className: "m-0 font-bold text-[9px] text-brand-primary-default uppercase leading-none", children: tagline }) : null
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover", children: background }),
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-1/2 rounded-b-[inherit] bg-linear-to-t from-black/60 to-transparent" }),
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-1/2 overflow-hidden rounded-b-[inherit] backdrop-blur-md [-webkit-mask-image:linear-gradient(to_top,black,transparent)] [mask-image:linear-gradient(to_top,black,transparent)]" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-between gap-4 p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  size: 40,
+                  src: avatar?.src,
+                  alt: avatar?.alt ?? (typeof name === "string" ? name : void 0),
+                  fallback: avatar?.fallback,
+                  ...avatar
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+                /* @__PURE__ */ jsx("p", { className: "typography-semibold-body-lg m-0 truncate text-white", children: name }),
+                tagline ? /* @__PURE__ */ jsx("p", { className: "typography-semibold-body-md m-0 truncate text-white/50", children: tagline }) : null
+              ] })
+            ] }),
+            action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
           ] })
         ]
       }

package/dist/components/CreatorTile/CreatorTile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CreatorTile.mjs","sources":["../../../src/components/CreatorTile/CreatorTile.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Width-to-height ratio preset for the tile. */\nexport type CreatorTileAspectRatio = \"tall\" | \"medium\" | \"short\";\n\nconst ASPECT_RATIO_CLASSES: Record<CreatorTileAspectRatio, string> = {\n  tall: \"aspect-1/2\",\n  medium: \"aspect-2/3\",\n  short: \"aspect-4/5\",\n};\n\nexport interface CreatorTileProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Source URL of the creator's image. Rendered as the tile background. */\n  imageSrc: string;\n  /** Alt text for the creator image. Use an empty string for purely decorative imagery. */\n  imageAlt?: string;\n  /** Creator name shown as the prominent overlay heading. */\n  name: React.ReactNode;\n  /** Short tagline shown under the name in the brand accent color. */\n  tagline?: React.ReactNode;\n  /**\n   * Width-to-height ratio preset.\n   *\n   * - `tall` – 1:2 narrow portrait\n   * - `medium` – 2:3 classic poster (default)\n   * - `short` – 4:5 closer to square\n   *\n   * @default \"medium\"\n   */\n  aspectRatio?: CreatorTileAspectRatio;\n}\n\n/**\n * A visual highlight tile showcasing a creator with an overlaid name and tagline.\n *\n * The tile renders a full-bleed image with a bottom gradient that ensures the\n * overlaid text remains legible regardless of the underlying photography.\n *\n * @example\n * ```tsx\n * <CreatorTile\n *   imageSrc=\"https://example.com/creator.jpg\"\n *   imageAlt=\"Portrait of Jane Doe\"\n *   name=\"JANE DOE\"\n *   tagline=\"GLOBAL MUSIC ICON\"\n * />\n * ```\n */\nexport const CreatorTile = React.forwardRef<HTMLDivElement, CreatorTileProps>(\n  (\n    { className, imageSrc, imageAlt = \"\", name, tagline, aspectRatio = \"medium\", ...props },\n    ref,\n  ) => {\n    const aspectClass = ASPECT_RATIO_CLASSES[aspectRatio];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative isolate flex w-full flex-col justify-end overflow-hidden\",\n          aspectClass,\n          className,\n        )}\n        {...props}\n      >\n        <img\n          src={imageSrc}\n          alt={imageAlt}\n          loading=\"lazy\"\n          className=\"absolute inset-0 -z-10 h-full w-full object-cover\"\n        />\n        <div className=\"pointer-events-none absolute inset-0 -z-10 bg-linear-to-b from-64% from-transparent to-black/40\" />\n        <div className=\"flex flex-col gap-1 px-6 pb-6\">\n          <p className=\"m-0 font-black text-4xl text-white leading-none tracking-tight\">{name}</p>\n          {tagline ? (\n            <p className=\"m-0 font-bold text-[9px] text-brand-primary-default uppercase leading-none\">\n              {tagline}\n            </p>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\n\nCreatorTile.displayName = \"CreatorTile\";\n"],"names":[],"mappings":";;;;AAMA,MAAM,uBAA+D;AAAA,EACnE,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAuCO,MAAM,cAAc,MAAM;AAAA,EAC/B,CACE,EAAE,WAAW,UAAU,WAAW,IAAI,MAAM,SAAS,cAAc,UAAU,GAAG,MAAA,GAChF,QACG;AACH,UAAM,cAAc,qBAAqB,WAAW;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,oBAAC,OAAA,EAAI,WAAU,kGAAA,CAAkG;AAAA,UACjH,qBAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,YAAA,oBAAC,KAAA,EAAE,WAAU,kEAAkE,UAAA,MAAK;AAAA,YACnF,UACC,oBAAC,KAAA,EAAE,WAAU,8EACV,mBACH,IACE;AAAA,UAAA,EAAA,CACN;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"CreatorTile.mjs","sources":["../../../src/components/CreatorTile/CreatorTile.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\n/** Width-to-height ratio preset for the tile. */\nexport type CreatorTileAspectRatio = \"tall\" | \"medium\" | \"short\";\n\nconst ASPECT_RATIO_CLASSES: Record<CreatorTileAspectRatio, string> = {\n  tall: \"aspect-5/4\",\n  medium: \"aspect-3/2\",\n  short: \"aspect-9/5\",\n};\n\nexport interface CreatorTileProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Decorative background media rendered behind the creator content. */\n  background: React.ReactNode;\n  /** Creator display name shown as the prominent heading. */\n  name: React.ReactNode;\n  /** Optional secondary line shown under the name (e.g. handle or tagline). */\n  tagline?: React.ReactNode;\n  /** Avatar props forwarded to the inner {@link Avatar}. */\n  avatar?: React.ComponentPropsWithoutRef<typeof Avatar>;\n  /**\n   * Action element rendered on the right of the profile row (e.g. a `Button`\n   * for following the creator).\n   */\n  action?: React.ReactNode;\n  /**\n   * Width-to-height ratio preset.\n   *\n   * - `tall` – 1:2 narrow portrait\n   * - `medium` – 361:200 landscape banner (default)\n   * - `short` – 4:5 closer to square\n   *\n   * @default \"medium\"\n   */\n  aspectRatio?: CreatorTileAspectRatio;\n}\n\n/**\n * A visual highlight tile showcasing a creator with a full-bleed background\n * media and an overlaid profile row containing an avatar, name, optional\n * tagline and an action element.\n *\n * @example\n * ```tsx\n * <CreatorTile\n *   background={<img src=\"/creator.jpg\" alt=\"\" />}\n *   avatar={{ src: \"/avatar.jpg\", alt: \"Aitana Lopez\", fallback: \"AL\" }}\n *   name=\"Aitana Lopez\"\n *   tagline=\"@fit_aitana\"\n *   action={<Button variant=\"primary\">Follow</Button>}\n * />\n * ```\n */\nexport const CreatorTile = React.forwardRef<HTMLDivElement, CreatorTileProps>(\n  (\n    { className, background, name, tagline, avatar, action, aspectRatio = \"medium\", ...props },\n    ref,\n  ) => {\n    const aspectClass = ASPECT_RATIO_CLASSES[aspectRatio];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative isolate flex w-full flex-col justify-end overflow-hidden\",\n          aspectClass,\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"pointer-events-none absolute inset-0 select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover\">\n          {background}\n        </div>\n        <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 rounded-b-[inherit] bg-linear-to-t from-black/60 to-transparent\" />\n        <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 overflow-hidden rounded-b-[inherit] backdrop-blur-md [-webkit-mask-image:linear-gradient(to_top,black,transparent)] [mask-image:linear-gradient(to_top,black,transparent)]\" />\n        <div className=\"relative flex items-center justify-between gap-4 p-4\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <Avatar\n              size={40}\n              src={avatar?.src}\n              alt={avatar?.alt ?? (typeof name === \"string\" ? name : undefined)}\n              fallback={avatar?.fallback}\n              {...avatar}\n            />\n            <div className=\"flex min-w-0 flex-col\">\n              <p className=\"typography-semibold-body-lg m-0 truncate text-white\">{name}</p>\n              {tagline ? (\n                <p className=\"typography-semibold-body-md m-0 truncate text-white/50\">{tagline}</p>\n              ) : null}\n            </div>\n          </div>\n          {action ? <div className=\"shrink-0\">{action}</div> : null}\n        </div>\n      </div>\n    );\n  },\n);\n\nCreatorTile.displayName = \"CreatorTile\";\n"],"names":[],"mappings":";;;;;AAOA,MAAM,uBAA+D;AAAA,EACnE,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AA4CO,MAAM,cAAc,MAAM;AAAA,EAC/B,CACE,EAAE,WAAW,YAAY,MAAM,SAAS,QAAQ,QAAQ,cAAc,UAAU,GAAG,MAAA,GACnF,QACG;AACH,UAAM,cAAc,qBAAqB,WAAW;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,kHACZ,UAAA,YACH;AAAA,UACA,oBAAC,OAAA,EAAI,WAAU,wHAAA,CAAwH;AAAA,UACvI,oBAAC,OAAA,EAAI,WAAU,mOAAA,CAAmO;AAAA,UAClP,qBAAC,OAAA,EAAI,WAAU,wDACb,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,KAAK,QAAQ;AAAA,kBACb,KAAK,QAAQ,QAAQ,OAAO,SAAS,WAAW,OAAO;AAAA,kBACvD,UAAU,QAAQ;AAAA,kBACjB,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEN,qBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,gBAAA,oBAAC,KAAA,EAAE,WAAU,uDAAuD,UAAA,MAAK;AAAA,gBACxE,UACC,oBAAC,KAAA,EAAE,WAAU,0DAA0D,mBAAQ,IAC7E;AAAA,cAAA,EAAA,CACN;AAAA,YAAA,GACF;AAAA,YACC,SAAS,oBAAC,OAAA,EAAI,WAAU,YAAY,kBAAO,IAAS;AAAA,UAAA,EAAA,CACvD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}

package/dist/index.d.ts

@@ -1382,18 +1382,18 @@ export declare interface CreatorCoverProps extends Omit<React_2.HTMLAttributes<H
 export declare type CreatorCoverSlot = string | React_2.ReactNode;
 
 /**
- * A visual highlight tile showcasing a creator with an overlaid name and tagline.
- *
- * The tile renders a full-bleed image with a bottom gradient that ensures the
- * overlaid text remains legible regardless of the underlying photography.
+ * A visual highlight tile showcasing a creator with a full-bleed background
+ * media and an overlaid profile row containing an avatar, name, optional
+ * tagline and an action element.
  *
  * @example
  * ```tsx
  * <CreatorTile
- *   imageSrc="https://example.com/creator.jpg"
- *   imageAlt="Portrait of Jane Doe"
- *   name="JANE DOE"
- *   tagline="GLOBAL MUSIC ICON"
+ *   background={<img src="/creator.jpg" alt="" />}
+ *   avatar={{ src: "/avatar.jpg", alt: "Aitana Lopez", fallback: "AL" }}
+ *   name="Aitana Lopez"
+ *   tagline="@fit_aitana"
+ *   action={<Button variant="primary">Follow</Button>}
  * />
  * ```
  */
@@ -1403,19 +1403,24 @@ export declare const CreatorTile: React_2.ForwardRefExoticComponent<CreatorTileP
 export declare type CreatorTileAspectRatio = "tall" | "medium" | "short";
 
 export declare interface CreatorTileProps extends React_2.HTMLAttributes<HTMLDivElement> {
-    /** Source URL of the creator's image. Rendered as the tile background. */
-    imageSrc: string;
-    /** Alt text for the creator image. Use an empty string for purely decorative imagery. */
-    imageAlt?: string;
-    /** Creator name shown as the prominent overlay heading. */
+    /** Decorative background media rendered behind the creator content. */
+    background: React_2.ReactNode;
+    /** Creator display name shown as the prominent heading. */
     name: React_2.ReactNode;
-    /** Short tagline shown under the name in the brand accent color. */
+    /** Optional secondary line shown under the name (e.g. handle or tagline). */
     tagline?: React_2.ReactNode;
+    /** Avatar props forwarded to the inner {@link Avatar}. */
+    avatar?: React_2.ComponentPropsWithoutRef<typeof Avatar>;
+    /**
+     * Action element rendered on the right of the profile row (e.g. a `Button`
+     * for following the creator).
+     */
+    action?: React_2.ReactNode;
     /**
      * Width-to-height ratio preset.
      *
      * - `tall` – 1:2 narrow portrait
-     * - `medium` – 2:3 classic poster (default)
+     * - `medium` – 361:200 landscape banner (default)
      * - `short` – 4:5 closer to square
      *
      * @default "medium"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "2.14.2",
+  "version": "2.14.3",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",