@fanvue/ui 2.14.1 → 2.14.2
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/components/CreatorCard/CreatorCard.mjs +2 -10
- package/dist/components/CreatorCard/CreatorCard.mjs.map +1 -1
- package/dist/index.d.ts +3 -5
- 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,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;"}
|
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). */
|