@fanvue/ui 2.14.1 → 2.14.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/CreatorCard/CreatorCard.cjs +2 -10
- package/dist/cjs/components/CreatorCard/CreatorCard.cjs.map +1 -1
- package/dist/cjs/components/CreatorTile/CreatorTile.cjs +26 -17
- package/dist/cjs/components/CreatorTile/CreatorTile.cjs.map +1 -1
- package/dist/components/CreatorCard/CreatorCard.mjs +2 -10
- package/dist/components/CreatorCard/CreatorCard.mjs.map +1 -1
- package/dist/components/CreatorTile/CreatorTile.mjs +26 -17
- package/dist/components/CreatorTile/CreatorTile.mjs.map +1 -1
- package/dist/index.d.ts +23 -20
- package/package.json +1 -1
|
@@ -23,7 +23,7 @@ function _interopNamespaceDefault(e) {
|
|
|
23
23
|
}
|
|
24
24
|
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
25
25
|
const CreatorCard = React__namespace.forwardRef(
|
|
26
|
-
({ className,
|
|
26
|
+
({ className, background, name, description, avatar, actions, ...props }, ref) => {
|
|
27
27
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
28
28
|
"div",
|
|
29
29
|
{
|
|
@@ -34,15 +34,7 @@ const CreatorCard = React__namespace.forwardRef(
|
|
|
34
34
|
),
|
|
35
35
|
...props,
|
|
36
36
|
children: [
|
|
37
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
38
|
-
"img",
|
|
39
|
-
{
|
|
40
|
-
src: imageSrc,
|
|
41
|
-
alt: imageAlt,
|
|
42
|
-
loading: "lazy",
|
|
43
|
-
className: "absolute inset-0 size-full object-cover"
|
|
44
|
-
}
|
|
45
|
-
),
|
|
37
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 h-full w-full select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover", children: background }),
|
|
46
38
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
47
39
|
"div",
|
|
48
40
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreatorCard.cjs","sources":["../../../../src/components/CreatorCard/CreatorCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\nexport interface CreatorCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /**
|
|
1
|
+
{"version":3,"file":"CreatorCard.cjs","sources":["../../../../src/components/CreatorCard/CreatorCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\nexport interface CreatorCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Decorative background media rendered behind the creator content. */\n background: React.ReactNode;\n /** Creator display name shown as the heading. */\n name: string;\n /** Optional secondary line shown below the name (e.g. role or tagline). */\n description?: string;\n /** Avatar props forwarded to the inner {@link Avatar}. */\n avatar?: React.ComponentPropsWithoutRef<typeof Avatar>;\n /**\n * Action buttons rendered at the bottom of the card. Pass zero, one, or two\n * `Button` elements to render variants with no, one, or two CTAs.\n */\n actions?: React.ReactNode;\n}\n\n/**\n * A portrait media card highlighting a creator with avatar, name, optional\n * tagline, and up to two stacked action buttons over a background image.\n *\n * Pass zero, one, or two {@link Button} elements via `actions` to render the\n * no-button, single-button, or two-button variants.\n *\n * @example\n * ```tsx\n * <CreatorCard\n * background={<img src=\"/creator.jpg\" alt=\"\" />}\n * name=\"Jane Doe\"\n * description=\"MODEL & PODCASTER\"\n * avatar={{ src: \"/avatar.jpg\", alt: \"Jane Doe\", fallback: \"JD\" }}\n * actions={\n * <>\n * <Button variant=\"brand\" fullWidth>Join for free for 3 days</Button>\n * <Button variant=\"primary\" fullWidth>Follow for Free</Button>\n * </>\n * }\n * />\n * ```\n */\nexport const CreatorCard = React.forwardRef<HTMLDivElement, CreatorCardProps>(\n ({ className, background, name, description, avatar, actions, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\n \"relative isolate flex aspect-290/450 max-w-full flex-col justify-end overflow-hidden bg-bg-primary\",\n className,\n )}\n {...props}\n >\n <div className=\"pointer-events-none absolute inset-0 h-full w-full select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover\">\n {background}\n </div>\n <div\n className={cn(\n \"pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-bg-primary via-bg-primary/90 to-transparent\",\n actions ? \"h-3/5\" : \"h-1/3\",\n )}\n />\n <div className=\"relative flex flex-col gap-4 p-4\">\n <div className=\"flex items-center gap-4\">\n <Avatar\n size={48}\n src={avatar?.src}\n alt={avatar?.alt ?? name}\n fallback={avatar?.fallback}\n {...avatar}\n />\n <div className=\"min-w-0 flex-1\">\n <p className=\"typography-bold-heading-sm truncate text-content-primary\">{name}</p>\n {description && (\n <p className=\"typography-semibold-body-sm truncate text-content-secondary dark:text-brand-primary-default\">\n {description}\n </p>\n )}\n </div>\n </div>\n {actions && <div className=\"flex flex-col gap-2\">{actions}</div>}\n </div>\n </div>\n );\n },\n);\n\nCreatorCard.displayName = \"CreatorCard\";\n"],"names":["React","jsxs","cn","jsx","Avatar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,QAAQ,SAAS,GAAG,MAAA,GAAS,QAAQ;AAChF,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,gIACZ,UAAA,YACH;AAAA,UACAA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA;AAAAA,gBACT;AAAA,gBACA,UAAU,UAAU;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAEFD,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,YAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,cAAAE,2BAAAA;AAAAA,gBAACC,OAAAA;AAAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,KAAK,QAAQ;AAAA,kBACb,KAAK,QAAQ,OAAO;AAAA,kBACpB,UAAU,QAAQ;AAAA,kBACjB,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAENH,2BAAAA,KAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,gBAAAE,2BAAAA,IAAC,KAAA,EAAE,WAAU,4DAA4D,UAAA,MAAK;AAAA,gBAC7E,eACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU,+FACV,UAAA,YAAA,CACH;AAAA,cAAA,EAAA,CAEJ;AAAA,YAAA,GACF;AAAA,YACC,WAAWA,2BAAAA,IAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC5D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
4
4
|
const jsxRuntime = require("react/jsx-runtime");
|
|
5
5
|
const React = require("react");
|
|
6
6
|
const cn = require("../../utils/cn.cjs");
|
|
7
|
+
const Avatar = require("../Avatar/Avatar.cjs");
|
|
7
8
|
function _interopNamespaceDefault(e) {
|
|
8
9
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
9
10
|
if (e) {
|
|
@@ -22,12 +23,12 @@ function _interopNamespaceDefault(e) {
|
|
|
22
23
|
}
|
|
23
24
|
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
24
25
|
const ASPECT_RATIO_CLASSES = {
|
|
25
|
-
tall: "aspect-
|
|
26
|
-
medium: "aspect-2
|
|
27
|
-
short: "aspect-
|
|
26
|
+
tall: "aspect-5/4",
|
|
27
|
+
medium: "aspect-3/2",
|
|
28
|
+
short: "aspect-9/5"
|
|
28
29
|
};
|
|
29
30
|
const CreatorTile = React__namespace.forwardRef(
|
|
30
|
-
({ className,
|
|
31
|
+
({ className, background, name, tagline, avatar, action, aspectRatio = "medium", ...props }, ref) => {
|
|
31
32
|
const aspectClass = ASPECT_RATIO_CLASSES[aspectRatio];
|
|
32
33
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
33
34
|
"div",
|
|
@@ -40,19 +41,27 @@ const CreatorTile = React__namespace.forwardRef(
|
|
|
40
41
|
),
|
|
41
42
|
...props,
|
|
42
43
|
children: [
|
|
43
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
44
|
+
/* @__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 }),
|
|
45
|
+
/* @__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" }),
|
|
46
|
+
/* @__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)]" }),
|
|
47
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-between gap-4 p-4", children: [
|
|
48
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
|
|
49
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
50
|
+
Avatar.Avatar,
|
|
51
|
+
{
|
|
52
|
+
size: 40,
|
|
53
|
+
src: avatar?.src,
|
|
54
|
+
alt: avatar?.alt ?? (typeof name === "string" ? name : void 0),
|
|
55
|
+
fallback: avatar?.fallback,
|
|
56
|
+
...avatar
|
|
57
|
+
}
|
|
58
|
+
),
|
|
59
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
|
|
60
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-lg m-0 truncate text-white", children: name }),
|
|
61
|
+
tagline ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-semibold-body-md m-0 truncate text-white/50", children: tagline }) : null
|
|
62
|
+
] })
|
|
63
|
+
] }),
|
|
64
|
+
action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action }) : null
|
|
56
65
|
] })
|
|
57
66
|
]
|
|
58
67
|
}
|
|
@@ -1 +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
|
+
{"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;;"}
|
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
import { cn } from "../../utils/cn.mjs";
|
|
5
5
|
import { Avatar } from "../Avatar/Avatar.mjs";
|
|
6
6
|
const CreatorCard = React.forwardRef(
|
|
7
|
-
({ className,
|
|
7
|
+
({ className, background, name, description, avatar, actions, ...props }, ref) => {
|
|
8
8
|
return /* @__PURE__ */ jsxs(
|
|
9
9
|
"div",
|
|
10
10
|
{
|
|
@@ -15,15 +15,7 @@ const CreatorCard = React.forwardRef(
|
|
|
15
15
|
),
|
|
16
16
|
...props,
|
|
17
17
|
children: [
|
|
18
|
-
/* @__PURE__ */ jsx(
|
|
19
|
-
"img",
|
|
20
|
-
{
|
|
21
|
-
src: imageSrc,
|
|
22
|
-
alt: imageAlt,
|
|
23
|
-
loading: "lazy",
|
|
24
|
-
className: "absolute inset-0 size-full object-cover"
|
|
25
|
-
}
|
|
26
|
-
),
|
|
18
|
+
/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 h-full w-full select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover", children: background }),
|
|
27
19
|
/* @__PURE__ */ jsx(
|
|
28
20
|
"div",
|
|
29
21
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreatorCard.mjs","sources":["../../../src/components/CreatorCard/CreatorCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\nexport interface CreatorCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /**
|
|
1
|
+
{"version":3,"file":"CreatorCard.mjs","sources":["../../../src/components/CreatorCard/CreatorCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\n\nexport interface CreatorCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Decorative background media rendered behind the creator content. */\n background: React.ReactNode;\n /** Creator display name shown as the heading. */\n name: string;\n /** Optional secondary line shown below the name (e.g. role or tagline). */\n description?: string;\n /** Avatar props forwarded to the inner {@link Avatar}. */\n avatar?: React.ComponentPropsWithoutRef<typeof Avatar>;\n /**\n * Action buttons rendered at the bottom of the card. Pass zero, one, or two\n * `Button` elements to render variants with no, one, or two CTAs.\n */\n actions?: React.ReactNode;\n}\n\n/**\n * A portrait media card highlighting a creator with avatar, name, optional\n * tagline, and up to two stacked action buttons over a background image.\n *\n * Pass zero, one, or two {@link Button} elements via `actions` to render the\n * no-button, single-button, or two-button variants.\n *\n * @example\n * ```tsx\n * <CreatorCard\n * background={<img src=\"/creator.jpg\" alt=\"\" />}\n * name=\"Jane Doe\"\n * description=\"MODEL & PODCASTER\"\n * avatar={{ src: \"/avatar.jpg\", alt: \"Jane Doe\", fallback: \"JD\" }}\n * actions={\n * <>\n * <Button variant=\"brand\" fullWidth>Join for free for 3 days</Button>\n * <Button variant=\"primary\" fullWidth>Follow for Free</Button>\n * </>\n * }\n * />\n * ```\n */\nexport const CreatorCard = React.forwardRef<HTMLDivElement, CreatorCardProps>(\n ({ className, background, name, description, avatar, actions, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\n \"relative isolate flex aspect-290/450 max-w-full flex-col justify-end overflow-hidden bg-bg-primary\",\n className,\n )}\n {...props}\n >\n <div className=\"pointer-events-none absolute inset-0 h-full w-full select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover\">\n {background}\n </div>\n <div\n className={cn(\n \"pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-bg-primary via-bg-primary/90 to-transparent\",\n actions ? \"h-3/5\" : \"h-1/3\",\n )}\n />\n <div className=\"relative flex flex-col gap-4 p-4\">\n <div className=\"flex items-center gap-4\">\n <Avatar\n size={48}\n src={avatar?.src}\n alt={avatar?.alt ?? name}\n fallback={avatar?.fallback}\n {...avatar}\n />\n <div className=\"min-w-0 flex-1\">\n <p className=\"typography-bold-heading-sm truncate text-content-primary\">{name}</p>\n {description && (\n <p className=\"typography-semibold-body-sm truncate text-content-secondary dark:text-brand-primary-default\">\n {description}\n </p>\n )}\n </div>\n </div>\n {actions && <div className=\"flex flex-col gap-2\">{actions}</div>}\n </div>\n </div>\n );\n },\n);\n\nCreatorCard.displayName = \"CreatorCard\";\n"],"names":[],"mappings":";;;;;AA2CO,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,QAAQ,SAAS,GAAG,MAAA,GAAS,QAAQ;AAChF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,gIACZ,UAAA,YACH;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,UAAU,UAAU;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAEF,qBAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,KAAK,QAAQ;AAAA,kBACb,KAAK,QAAQ,OAAO;AAAA,kBACpB,UAAU,QAAQ;AAAA,kBACjB,GAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEN,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,gBAAA,oBAAC,KAAA,EAAE,WAAU,4DAA4D,UAAA,MAAK;AAAA,gBAC7E,eACC,oBAAC,KAAA,EAAE,WAAU,+FACV,UAAA,YAAA,CACH;AAAA,cAAA,EAAA,CAEJ;AAAA,YAAA,GACF;AAAA,YACC,WAAW,oBAAC,OAAA,EAAI,WAAU,uBAAuB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC5D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}
|
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { cn } from "../../utils/cn.mjs";
|
|
5
|
+
import { Avatar } from "../Avatar/Avatar.mjs";
|
|
5
6
|
const ASPECT_RATIO_CLASSES = {
|
|
6
|
-
tall: "aspect-
|
|
7
|
-
medium: "aspect-2
|
|
8
|
-
short: "aspect-
|
|
7
|
+
tall: "aspect-5/4",
|
|
8
|
+
medium: "aspect-3/2",
|
|
9
|
+
short: "aspect-9/5"
|
|
9
10
|
};
|
|
10
11
|
const CreatorTile = React.forwardRef(
|
|
11
|
-
({ className,
|
|
12
|
+
({ className, background, name, tagline, avatar, action, aspectRatio = "medium", ...props }, ref) => {
|
|
12
13
|
const aspectClass = ASPECT_RATIO_CLASSES[aspectRatio];
|
|
13
14
|
return /* @__PURE__ */ jsxs(
|
|
14
15
|
"div",
|
|
@@ -21,19 +22,27 @@ const CreatorTile = React.forwardRef(
|
|
|
21
22
|
),
|
|
22
23
|
...props,
|
|
23
24
|
children: [
|
|
24
|
-
/* @__PURE__ */ jsx(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
25
|
+
/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 select-none *:h-full *:w-full [&>img]:object-cover [&>video]:object-cover", children: background }),
|
|
26
|
+
/* @__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" }),
|
|
27
|
+
/* @__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)]" }),
|
|
28
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-between gap-4 p-4", children: [
|
|
29
|
+
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
|
|
30
|
+
/* @__PURE__ */ jsx(
|
|
31
|
+
Avatar,
|
|
32
|
+
{
|
|
33
|
+
size: 40,
|
|
34
|
+
src: avatar?.src,
|
|
35
|
+
alt: avatar?.alt ?? (typeof name === "string" ? name : void 0),
|
|
36
|
+
fallback: avatar?.fallback,
|
|
37
|
+
...avatar
|
|
38
|
+
}
|
|
39
|
+
),
|
|
40
|
+
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
|
|
41
|
+
/* @__PURE__ */ jsx("p", { className: "typography-semibold-body-lg m-0 truncate text-white", children: name }),
|
|
42
|
+
tagline ? /* @__PURE__ */ jsx("p", { className: "typography-semibold-body-md m-0 truncate text-white/50", children: tagline }) : null
|
|
43
|
+
] })
|
|
44
|
+
] }),
|
|
45
|
+
action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null
|
|
37
46
|
] })
|
|
38
47
|
]
|
|
39
48
|
}
|
|
@@ -1 +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
|
+
{"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
CHANGED
|
@@ -1305,7 +1305,7 @@ export declare type CountVariant = "default" | "alert" | "brand" | "pink" | "inf
|
|
|
1305
1305
|
* @example
|
|
1306
1306
|
* ```tsx
|
|
1307
1307
|
* <CreatorCard
|
|
1308
|
-
*
|
|
1308
|
+
* background={<img src="/creator.jpg" alt="" />}
|
|
1309
1309
|
* name="Jane Doe"
|
|
1310
1310
|
* description="MODEL & PODCASTER"
|
|
1311
1311
|
* avatar={{ src: "/avatar.jpg", alt: "Jane Doe", fallback: "JD" }}
|
|
@@ -1321,10 +1321,8 @@ export declare type CountVariant = "default" | "alert" | "brand" | "pink" | "inf
|
|
|
1321
1321
|
export declare const CreatorCard: React_2.ForwardRefExoticComponent<CreatorCardProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
1322
1322
|
|
|
1323
1323
|
export declare interface CreatorCardProps extends React_2.HTMLAttributes<HTMLDivElement> {
|
|
1324
|
-
/**
|
|
1325
|
-
|
|
1326
|
-
/** Alt text for the background image. @default "" */
|
|
1327
|
-
imageAlt?: string;
|
|
1324
|
+
/** Decorative background media rendered behind the creator content. */
|
|
1325
|
+
background: React_2.ReactNode;
|
|
1328
1326
|
/** Creator display name shown as the heading. */
|
|
1329
1327
|
name: string;
|
|
1330
1328
|
/** Optional secondary line shown below the name (e.g. role or tagline). */
|
|
@@ -1384,18 +1382,18 @@ export declare interface CreatorCoverProps extends Omit<React_2.HTMLAttributes<H
|
|
|
1384
1382
|
export declare type CreatorCoverSlot = string | React_2.ReactNode;
|
|
1385
1383
|
|
|
1386
1384
|
/**
|
|
1387
|
-
* A visual highlight tile showcasing a creator with
|
|
1388
|
-
*
|
|
1389
|
-
*
|
|
1390
|
-
* overlaid text remains legible regardless of the underlying photography.
|
|
1385
|
+
* A visual highlight tile showcasing a creator with a full-bleed background
|
|
1386
|
+
* media and an overlaid profile row containing an avatar, name, optional
|
|
1387
|
+
* tagline and an action element.
|
|
1391
1388
|
*
|
|
1392
1389
|
* @example
|
|
1393
1390
|
* ```tsx
|
|
1394
1391
|
* <CreatorTile
|
|
1395
|
-
*
|
|
1396
|
-
*
|
|
1397
|
-
* name="
|
|
1398
|
-
* tagline="
|
|
1392
|
+
* background={<img src="/creator.jpg" alt="" />}
|
|
1393
|
+
* avatar={{ src: "/avatar.jpg", alt: "Aitana Lopez", fallback: "AL" }}
|
|
1394
|
+
* name="Aitana Lopez"
|
|
1395
|
+
* tagline="@fit_aitana"
|
|
1396
|
+
* action={<Button variant="primary">Follow</Button>}
|
|
1399
1397
|
* />
|
|
1400
1398
|
* ```
|
|
1401
1399
|
*/
|
|
@@ -1405,19 +1403,24 @@ export declare const CreatorTile: React_2.ForwardRefExoticComponent<CreatorTileP
|
|
|
1405
1403
|
export declare type CreatorTileAspectRatio = "tall" | "medium" | "short";
|
|
1406
1404
|
|
|
1407
1405
|
export declare interface CreatorTileProps extends React_2.HTMLAttributes<HTMLDivElement> {
|
|
1408
|
-
/**
|
|
1409
|
-
|
|
1410
|
-
/**
|
|
1411
|
-
imageAlt?: string;
|
|
1412
|
-
/** Creator name shown as the prominent overlay heading. */
|
|
1406
|
+
/** Decorative background media rendered behind the creator content. */
|
|
1407
|
+
background: React_2.ReactNode;
|
|
1408
|
+
/** Creator display name shown as the prominent heading. */
|
|
1413
1409
|
name: React_2.ReactNode;
|
|
1414
|
-
/**
|
|
1410
|
+
/** Optional secondary line shown under the name (e.g. handle or tagline). */
|
|
1415
1411
|
tagline?: React_2.ReactNode;
|
|
1412
|
+
/** Avatar props forwarded to the inner {@link Avatar}. */
|
|
1413
|
+
avatar?: React_2.ComponentPropsWithoutRef<typeof Avatar>;
|
|
1414
|
+
/**
|
|
1415
|
+
* Action element rendered on the right of the profile row (e.g. a `Button`
|
|
1416
|
+
* for following the creator).
|
|
1417
|
+
*/
|
|
1418
|
+
action?: React_2.ReactNode;
|
|
1416
1419
|
/**
|
|
1417
1420
|
* Width-to-height ratio preset.
|
|
1418
1421
|
*
|
|
1419
1422
|
* - `tall` – 1:2 narrow portrait
|
|
1420
|
-
* - `medium` –
|
|
1423
|
+
* - `medium` – 361:200 landscape banner (default)
|
|
1421
1424
|
* - `short` – 4:5 closer to square
|
|
1422
1425
|
*
|
|
1423
1426
|
* @default "medium"
|