@fanvue/ui 2.12.1 → 2.13.0
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.
|
@@ -22,6 +22,20 @@ function _interopNamespaceDefault(e) {
|
|
|
22
22
|
return Object.freeze(n);
|
|
23
23
|
}
|
|
24
24
|
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
25
|
+
const titleSizeClass = {
|
|
26
|
+
xs: "typography-bold-heading-xs",
|
|
27
|
+
sm: "typography-bold-heading-sm",
|
|
28
|
+
md: "typography-bold-heading-md",
|
|
29
|
+
lg: "typography-bold-heading-lg",
|
|
30
|
+
xl: "typography-bold-heading-xl"
|
|
31
|
+
};
|
|
32
|
+
const mediaSizeClass = {
|
|
33
|
+
xs: "h-[80px]",
|
|
34
|
+
sm: "h-[160px]",
|
|
35
|
+
md: "h-[200px]",
|
|
36
|
+
lg: "h-[280px]",
|
|
37
|
+
xl: "h-[360px]"
|
|
38
|
+
};
|
|
25
39
|
function isNonEmptyString(value) {
|
|
26
40
|
return typeof value === "string" && value.length > 0;
|
|
27
41
|
}
|
|
@@ -39,8 +53,10 @@ const EmptyState = React__namespace.forwardRef(
|
|
|
39
53
|
className,
|
|
40
54
|
variant = "default",
|
|
41
55
|
title,
|
|
56
|
+
titleSize = "lg",
|
|
42
57
|
description,
|
|
43
58
|
media,
|
|
59
|
+
mediaSize = "lg",
|
|
44
60
|
primaryAction,
|
|
45
61
|
secondaryAction,
|
|
46
62
|
...props
|
|
@@ -50,11 +66,11 @@ const EmptyState = React__namespace.forwardRef(
|
|
|
50
66
|
const regionLabelledBy = hasSlotContent(title) ? titleId : void 0;
|
|
51
67
|
const renderedPrimary = primaryAction === void 0 || primaryAction === null || primaryAction === false || primaryAction === "" ? null : isNonEmptyString(primaryAction) ? /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "brand", fullWidth: true, children: primaryAction }) : primaryAction;
|
|
52
68
|
const renderedSecondary = secondaryAction === void 0 || secondaryAction === null || secondaryAction === false || secondaryAction === "" ? null : isNonEmptyString(secondaryAction) ? /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "secondary", fullWidth: true, children: secondaryAction }) : secondaryAction;
|
|
53
|
-
const renderedTitle = title === void 0 || title === null || title === false || title === "" ? null : isNonEmptyString(title) ? /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "m-0
|
|
69
|
+
const renderedTitle = title === void 0 || title === null || title === false || title === "" ? null : isNonEmptyString(title) ? /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: cn.cn("m-0 text-content-primary", titleSizeClass[titleSize]), children: title }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
54
70
|
"div",
|
|
55
71
|
{
|
|
56
72
|
id: titleId,
|
|
57
|
-
className: "
|
|
73
|
+
className: cn.cn("text-content-primary min-w-0 w-full", titleSizeClass[titleSize]),
|
|
58
74
|
children: title
|
|
59
75
|
}
|
|
60
76
|
);
|
|
@@ -83,7 +99,7 @@ const EmptyState = React__namespace.forwardRef(
|
|
|
83
99
|
),
|
|
84
100
|
...props,
|
|
85
101
|
children: [
|
|
86
|
-
showMedia && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "
|
|
102
|
+
showMedia && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn("w-full overflow-hidden rounded-md", mediaSizeClass[mediaSize]), children: renderedMedia }),
|
|
87
103
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
88
104
|
"div",
|
|
89
105
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\nexport type EmptyStateVariant = \"default\" | \"centered\";\n\n/** Slot that can be plain copy (styled by `EmptyState`) or custom markup. */\nexport type EmptyStateSlot = string | React.ReactNode;\n\nfunction isNonEmptyString(value: unknown): value is string {\n return typeof value === \"string\" && value.length > 0;\n}\n\nfunction hasSlotContent(value: EmptyStateSlot | undefined): boolean {\n if (value === undefined || value === null || value === false) {\n return false;\n }\n if (typeof value === \"string\") {\n return value.length > 0;\n }\n return true;\n}\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n /**\n * Matches Figma property `Property 1` (`Default` / `centered`).\n * @default \"default\"\n */\n variant?: EmptyStateVariant;\n /** Main heading. Strings use library heading styles; pass a node for full control. */\n title?: EmptyStateSlot;\n /** Supporting body copy. Strings use library body styles; pass a node for rich text. */\n description?: EmptyStateSlot;\n /**\n * Top visual / illustration slot.\n * A string is treated as an image URL (`<img src={…}>`); pass a node for custom layout.\n */\n media?: EmptyStateSlot;\n /**\n * Primary call to action.\n * A string renders a brand `Button` with that label; pass a node for links, loading, etc.\n */\n primaryAction?: EmptyStateSlot;\n /**\n * Secondary action below the primary.\n * A string renders a secondary `Button` with that label; pass a node when you need more control.\n */\n secondaryAction?: EmptyStateSlot;\n}\n\nexport const EmptyState = React.forwardRef<HTMLElement, EmptyStateProps>(\n (\n {\n className,\n variant = \"default\",\n title,\n description,\n media,\n primaryAction,\n secondaryAction,\n ...props\n },\n ref,\n ) => {\n const isCentered = variant === \"centered\";\n const titleId = React.useId();\n const regionLabelledBy = hasSlotContent(title) ? titleId : undefined;\n\n const renderedPrimary =\n primaryAction === undefined ||\n primaryAction === null ||\n primaryAction === false ||\n primaryAction === \"\" ? null : isNonEmptyString(primaryAction) ? (\n <Button variant=\"brand\" fullWidth>\n {primaryAction}\n </Button>\n ) : (\n primaryAction\n );\n\n const renderedSecondary =\n secondaryAction === undefined ||\n secondaryAction === null ||\n secondaryAction === false ||\n secondaryAction === \"\" ? null : isNonEmptyString(secondaryAction) ? (\n <Button variant=\"secondary\" fullWidth>\n {secondaryAction}\n </Button>\n ) : (\n secondaryAction\n );\n\n const renderedTitle =\n title === undefined ||\n title === null ||\n title === false ||\n title === \"\" ? null : isNonEmptyString(title) ? (\n <h2 id={titleId} className
|
|
1
|
+
{"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\nexport type EmptyStateVariant = \"default\" | \"centered\";\n\nexport type EmptyStateTitleSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst titleSizeClass: Record<EmptyStateTitleSize, string> = {\n xs: \"typography-bold-heading-xs\",\n sm: \"typography-bold-heading-sm\",\n md: \"typography-bold-heading-md\",\n lg: \"typography-bold-heading-lg\",\n xl: \"typography-bold-heading-xl\",\n};\n\nexport type EmptyStateMediaSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst mediaSizeClass: Record<EmptyStateMediaSize, string> = {\n xs: \"h-[80px]\",\n sm: \"h-[160px]\",\n md: \"h-[200px]\",\n lg: \"h-[280px]\",\n xl: \"h-[360px]\",\n};\n\n/** Slot that can be plain copy (styled by `EmptyState`) or custom markup. */\nexport type EmptyStateSlot = string | React.ReactNode;\n\nfunction isNonEmptyString(value: unknown): value is string {\n return typeof value === \"string\" && value.length > 0;\n}\n\nfunction hasSlotContent(value: EmptyStateSlot | undefined): boolean {\n if (value === undefined || value === null || value === false) {\n return false;\n }\n if (typeof value === \"string\") {\n return value.length > 0;\n }\n return true;\n}\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n /**\n * Matches Figma property `Property 1` (`Default` / `centered`).\n * @default \"default\"\n */\n variant?: EmptyStateVariant;\n /** Main heading. Strings use library heading styles; pass a node for full control. */\n title?: EmptyStateSlot;\n /**\n * Size of the title heading — mapped internally to bold heading typography tokens.\n * @default \"lg\"\n */\n titleSize?: EmptyStateTitleSize;\n /** Supporting body copy. Strings use library body styles; pass a node for rich text. */\n description?: EmptyStateSlot;\n /**\n * Top visual / illustration slot.\n * A string is treated as an image URL (`<img src={…}>`); pass a node for custom layout.\n */\n media?: EmptyStateSlot;\n /**\n * Height of the media container.\n * @default \"lg\"\n */\n mediaSize?: EmptyStateMediaSize;\n /**\n * Primary call to action.\n * A string renders a brand `Button` with that label; pass a node for links, loading, etc.\n */\n primaryAction?: EmptyStateSlot;\n /**\n * Secondary action below the primary.\n * A string renders a secondary `Button` with that label; pass a node when you need more control.\n */\n secondaryAction?: EmptyStateSlot;\n}\n\nexport const EmptyState = React.forwardRef<HTMLElement, EmptyStateProps>(\n (\n {\n className,\n variant = \"default\",\n title,\n titleSize = \"lg\",\n description,\n media,\n mediaSize = \"lg\",\n primaryAction,\n secondaryAction,\n ...props\n },\n ref,\n ) => {\n const isCentered = variant === \"centered\";\n const titleId = React.useId();\n const regionLabelledBy = hasSlotContent(title) ? titleId : undefined;\n\n const renderedPrimary =\n primaryAction === undefined ||\n primaryAction === null ||\n primaryAction === false ||\n primaryAction === \"\" ? null : isNonEmptyString(primaryAction) ? (\n <Button variant=\"brand\" fullWidth>\n {primaryAction}\n </Button>\n ) : (\n primaryAction\n );\n\n const renderedSecondary =\n secondaryAction === undefined ||\n secondaryAction === null ||\n secondaryAction === false ||\n secondaryAction === \"\" ? null : isNonEmptyString(secondaryAction) ? (\n <Button variant=\"secondary\" fullWidth>\n {secondaryAction}\n </Button>\n ) : (\n secondaryAction\n );\n\n const renderedTitle =\n title === undefined ||\n title === null ||\n title === false ||\n title === \"\" ? null : isNonEmptyString(title) ? (\n <h2 id={titleId} className={cn(\"m-0 text-content-primary\", titleSizeClass[titleSize])}>\n {title}\n </h2>\n ) : (\n <div\n id={titleId}\n className={cn(\"text-content-primary min-w-0 w-full\", titleSizeClass[titleSize])}\n >\n {title}\n </div>\n );\n\n const renderedDescription =\n description === undefined ||\n description === null ||\n description === false ||\n description === \"\" ? null : isNonEmptyString(description) ? (\n <p className=\"m-0 typography-regular-body-lg text-content-secondary\">{description}</p>\n ) : (\n <div className=\"typography-regular-body-lg text-content-secondary min-w-0 w-full\">\n {description}\n </div>\n );\n\n const renderedMedia =\n media === undefined ||\n media === null ||\n media === false ||\n media === \"\" ? null : isNonEmptyString(media) ? (\n <img\n src={media}\n alt=\"\"\n decoding=\"async\"\n className=\"block h-full w-full object-contain object-center\"\n />\n ) : (\n media\n );\n\n const showMedia = renderedMedia !== null;\n const showActions = renderedPrimary !== null || renderedSecondary !== null;\n\n return (\n <section\n ref={ref}\n aria-labelledby={regionLabelledBy}\n data-testid=\"empty-state\"\n className={cn(\n \"flex w-full max-w-[375px] flex-col gap-6\",\n isCentered ? \"items-center text-center\" : \"items-start text-left\",\n className,\n )}\n {...props}\n >\n {showMedia && (\n <div className={cn(\"w-full overflow-hidden rounded-md\", mediaSizeClass[mediaSize])}>\n {renderedMedia}\n </div>\n )}\n\n <div\n className={cn(\"flex w-full flex-col gap-6\", isCentered ? \"items-center\" : \"items-start\")}\n >\n <div\n className={cn(\n \"flex w-full flex-col gap-4\",\n isCentered ? \"items-center\" : \"items-start\",\n )}\n >\n {renderedTitle}\n {renderedDescription}\n </div>\n\n {showActions ? (\n <div className={cn(\"flex flex-col gap-4\", isCentered ? \"items-center\" : \"items-start\")}>\n {renderedPrimary}\n {renderedSecondary}\n </div>\n ) : null}\n </div>\n </section>\n );\n },\n);\n\nEmptyState.displayName = \"EmptyState\";\n"],"names":["React","Button","jsx","cn","jsxs"],"mappings":"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"}
|
|
@@ -3,6 +3,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { cn } from "../../utils/cn.mjs";
|
|
5
5
|
import { Button } from "../Button/Button.mjs";
|
|
6
|
+
const titleSizeClass = {
|
|
7
|
+
xs: "typography-bold-heading-xs",
|
|
8
|
+
sm: "typography-bold-heading-sm",
|
|
9
|
+
md: "typography-bold-heading-md",
|
|
10
|
+
lg: "typography-bold-heading-lg",
|
|
11
|
+
xl: "typography-bold-heading-xl"
|
|
12
|
+
};
|
|
13
|
+
const mediaSizeClass = {
|
|
14
|
+
xs: "h-[80px]",
|
|
15
|
+
sm: "h-[160px]",
|
|
16
|
+
md: "h-[200px]",
|
|
17
|
+
lg: "h-[280px]",
|
|
18
|
+
xl: "h-[360px]"
|
|
19
|
+
};
|
|
6
20
|
function isNonEmptyString(value) {
|
|
7
21
|
return typeof value === "string" && value.length > 0;
|
|
8
22
|
}
|
|
@@ -20,8 +34,10 @@ const EmptyState = React.forwardRef(
|
|
|
20
34
|
className,
|
|
21
35
|
variant = "default",
|
|
22
36
|
title,
|
|
37
|
+
titleSize = "lg",
|
|
23
38
|
description,
|
|
24
39
|
media,
|
|
40
|
+
mediaSize = "lg",
|
|
25
41
|
primaryAction,
|
|
26
42
|
secondaryAction,
|
|
27
43
|
...props
|
|
@@ -31,11 +47,11 @@ const EmptyState = React.forwardRef(
|
|
|
31
47
|
const regionLabelledBy = hasSlotContent(title) ? titleId : void 0;
|
|
32
48
|
const renderedPrimary = primaryAction === void 0 || primaryAction === null || primaryAction === false || primaryAction === "" ? null : isNonEmptyString(primaryAction) ? /* @__PURE__ */ jsx(Button, { variant: "brand", fullWidth: true, children: primaryAction }) : primaryAction;
|
|
33
49
|
const renderedSecondary = secondaryAction === void 0 || secondaryAction === null || secondaryAction === false || secondaryAction === "" ? null : isNonEmptyString(secondaryAction) ? /* @__PURE__ */ jsx(Button, { variant: "secondary", fullWidth: true, children: secondaryAction }) : secondaryAction;
|
|
34
|
-
const renderedTitle = title === void 0 || title === null || title === false || title === "" ? null : isNonEmptyString(title) ? /* @__PURE__ */ jsx("h2", { id: titleId, className: "m-0
|
|
50
|
+
const renderedTitle = title === void 0 || title === null || title === false || title === "" ? null : isNonEmptyString(title) ? /* @__PURE__ */ jsx("h2", { id: titleId, className: cn("m-0 text-content-primary", titleSizeClass[titleSize]), children: title }) : /* @__PURE__ */ jsx(
|
|
35
51
|
"div",
|
|
36
52
|
{
|
|
37
53
|
id: titleId,
|
|
38
|
-
className: "
|
|
54
|
+
className: cn("text-content-primary min-w-0 w-full", titleSizeClass[titleSize]),
|
|
39
55
|
children: title
|
|
40
56
|
}
|
|
41
57
|
);
|
|
@@ -64,7 +80,7 @@ const EmptyState = React.forwardRef(
|
|
|
64
80
|
),
|
|
65
81
|
...props,
|
|
66
82
|
children: [
|
|
67
|
-
showMedia && /* @__PURE__ */ jsx("div", { className: "
|
|
83
|
+
showMedia && /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-hidden rounded-md", mediaSizeClass[mediaSize]), children: renderedMedia }),
|
|
68
84
|
/* @__PURE__ */ jsxs(
|
|
69
85
|
"div",
|
|
70
86
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.mjs","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\nexport type EmptyStateVariant = \"default\" | \"centered\";\n\n/** Slot that can be plain copy (styled by `EmptyState`) or custom markup. */\nexport type EmptyStateSlot = string | React.ReactNode;\n\nfunction isNonEmptyString(value: unknown): value is string {\n return typeof value === \"string\" && value.length > 0;\n}\n\nfunction hasSlotContent(value: EmptyStateSlot | undefined): boolean {\n if (value === undefined || value === null || value === false) {\n return false;\n }\n if (typeof value === \"string\") {\n return value.length > 0;\n }\n return true;\n}\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n /**\n * Matches Figma property `Property 1` (`Default` / `centered`).\n * @default \"default\"\n */\n variant?: EmptyStateVariant;\n /** Main heading. Strings use library heading styles; pass a node for full control. */\n title?: EmptyStateSlot;\n /** Supporting body copy. Strings use library body styles; pass a node for rich text. */\n description?: EmptyStateSlot;\n /**\n * Top visual / illustration slot.\n * A string is treated as an image URL (`<img src={…}>`); pass a node for custom layout.\n */\n media?: EmptyStateSlot;\n /**\n * Primary call to action.\n * A string renders a brand `Button` with that label; pass a node for links, loading, etc.\n */\n primaryAction?: EmptyStateSlot;\n /**\n * Secondary action below the primary.\n * A string renders a secondary `Button` with that label; pass a node when you need more control.\n */\n secondaryAction?: EmptyStateSlot;\n}\n\nexport const EmptyState = React.forwardRef<HTMLElement, EmptyStateProps>(\n (\n {\n className,\n variant = \"default\",\n title,\n description,\n media,\n primaryAction,\n secondaryAction,\n ...props\n },\n ref,\n ) => {\n const isCentered = variant === \"centered\";\n const titleId = React.useId();\n const regionLabelledBy = hasSlotContent(title) ? titleId : undefined;\n\n const renderedPrimary =\n primaryAction === undefined ||\n primaryAction === null ||\n primaryAction === false ||\n primaryAction === \"\" ? null : isNonEmptyString(primaryAction) ? (\n <Button variant=\"brand\" fullWidth>\n {primaryAction}\n </Button>\n ) : (\n primaryAction\n );\n\n const renderedSecondary =\n secondaryAction === undefined ||\n secondaryAction === null ||\n secondaryAction === false ||\n secondaryAction === \"\" ? null : isNonEmptyString(secondaryAction) ? (\n <Button variant=\"secondary\" fullWidth>\n {secondaryAction}\n </Button>\n ) : (\n secondaryAction\n );\n\n const renderedTitle =\n title === undefined ||\n title === null ||\n title === false ||\n title === \"\" ? null : isNonEmptyString(title) ? (\n <h2 id={titleId} className
|
|
1
|
+
{"version":3,"file":"EmptyState.mjs","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\nexport type EmptyStateVariant = \"default\" | \"centered\";\n\nexport type EmptyStateTitleSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst titleSizeClass: Record<EmptyStateTitleSize, string> = {\n xs: \"typography-bold-heading-xs\",\n sm: \"typography-bold-heading-sm\",\n md: \"typography-bold-heading-md\",\n lg: \"typography-bold-heading-lg\",\n xl: \"typography-bold-heading-xl\",\n};\n\nexport type EmptyStateMediaSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst mediaSizeClass: Record<EmptyStateMediaSize, string> = {\n xs: \"h-[80px]\",\n sm: \"h-[160px]\",\n md: \"h-[200px]\",\n lg: \"h-[280px]\",\n xl: \"h-[360px]\",\n};\n\n/** Slot that can be plain copy (styled by `EmptyState`) or custom markup. */\nexport type EmptyStateSlot = string | React.ReactNode;\n\nfunction isNonEmptyString(value: unknown): value is string {\n return typeof value === \"string\" && value.length > 0;\n}\n\nfunction hasSlotContent(value: EmptyStateSlot | undefined): boolean {\n if (value === undefined || value === null || value === false) {\n return false;\n }\n if (typeof value === \"string\") {\n return value.length > 0;\n }\n return true;\n}\n\nexport interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n /**\n * Matches Figma property `Property 1` (`Default` / `centered`).\n * @default \"default\"\n */\n variant?: EmptyStateVariant;\n /** Main heading. Strings use library heading styles; pass a node for full control. */\n title?: EmptyStateSlot;\n /**\n * Size of the title heading — mapped internally to bold heading typography tokens.\n * @default \"lg\"\n */\n titleSize?: EmptyStateTitleSize;\n /** Supporting body copy. Strings use library body styles; pass a node for rich text. */\n description?: EmptyStateSlot;\n /**\n * Top visual / illustration slot.\n * A string is treated as an image URL (`<img src={…}>`); pass a node for custom layout.\n */\n media?: EmptyStateSlot;\n /**\n * Height of the media container.\n * @default \"lg\"\n */\n mediaSize?: EmptyStateMediaSize;\n /**\n * Primary call to action.\n * A string renders a brand `Button` with that label; pass a node for links, loading, etc.\n */\n primaryAction?: EmptyStateSlot;\n /**\n * Secondary action below the primary.\n * A string renders a secondary `Button` with that label; pass a node when you need more control.\n */\n secondaryAction?: EmptyStateSlot;\n}\n\nexport const EmptyState = React.forwardRef<HTMLElement, EmptyStateProps>(\n (\n {\n className,\n variant = \"default\",\n title,\n titleSize = \"lg\",\n description,\n media,\n mediaSize = \"lg\",\n primaryAction,\n secondaryAction,\n ...props\n },\n ref,\n ) => {\n const isCentered = variant === \"centered\";\n const titleId = React.useId();\n const regionLabelledBy = hasSlotContent(title) ? titleId : undefined;\n\n const renderedPrimary =\n primaryAction === undefined ||\n primaryAction === null ||\n primaryAction === false ||\n primaryAction === \"\" ? null : isNonEmptyString(primaryAction) ? (\n <Button variant=\"brand\" fullWidth>\n {primaryAction}\n </Button>\n ) : (\n primaryAction\n );\n\n const renderedSecondary =\n secondaryAction === undefined ||\n secondaryAction === null ||\n secondaryAction === false ||\n secondaryAction === \"\" ? null : isNonEmptyString(secondaryAction) ? (\n <Button variant=\"secondary\" fullWidth>\n {secondaryAction}\n </Button>\n ) : (\n secondaryAction\n );\n\n const renderedTitle =\n title === undefined ||\n title === null ||\n title === false ||\n title === \"\" ? null : isNonEmptyString(title) ? (\n <h2 id={titleId} className={cn(\"m-0 text-content-primary\", titleSizeClass[titleSize])}>\n {title}\n </h2>\n ) : (\n <div\n id={titleId}\n className={cn(\"text-content-primary min-w-0 w-full\", titleSizeClass[titleSize])}\n >\n {title}\n </div>\n );\n\n const renderedDescription =\n description === undefined ||\n description === null ||\n description === false ||\n description === \"\" ? null : isNonEmptyString(description) ? (\n <p className=\"m-0 typography-regular-body-lg text-content-secondary\">{description}</p>\n ) : (\n <div className=\"typography-regular-body-lg text-content-secondary min-w-0 w-full\">\n {description}\n </div>\n );\n\n const renderedMedia =\n media === undefined ||\n media === null ||\n media === false ||\n media === \"\" ? null : isNonEmptyString(media) ? (\n <img\n src={media}\n alt=\"\"\n decoding=\"async\"\n className=\"block h-full w-full object-contain object-center\"\n />\n ) : (\n media\n );\n\n const showMedia = renderedMedia !== null;\n const showActions = renderedPrimary !== null || renderedSecondary !== null;\n\n return (\n <section\n ref={ref}\n aria-labelledby={regionLabelledBy}\n data-testid=\"empty-state\"\n className={cn(\n \"flex w-full max-w-[375px] flex-col gap-6\",\n isCentered ? \"items-center text-center\" : \"items-start text-left\",\n className,\n )}\n {...props}\n >\n {showMedia && (\n <div className={cn(\"w-full overflow-hidden rounded-md\", mediaSizeClass[mediaSize])}>\n {renderedMedia}\n </div>\n )}\n\n <div\n className={cn(\"flex w-full flex-col gap-6\", isCentered ? \"items-center\" : \"items-start\")}\n >\n <div\n className={cn(\n \"flex w-full flex-col gap-4\",\n isCentered ? \"items-center\" : \"items-start\",\n )}\n >\n {renderedTitle}\n {renderedDescription}\n </div>\n\n {showActions ? (\n <div className={cn(\"flex flex-col gap-4\", isCentered ? \"items-center\" : \"items-start\")}>\n {renderedPrimary}\n {renderedSecondary}\n </div>\n ) : null}\n </div>\n </section>\n );\n },\n);\n\nEmptyState.displayName = \"EmptyState\";\n"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1757,6 +1757,8 @@ export declare const EmojiIcon: React_2.ForwardRefExoticComponent<React_2.SVGAtt
|
|
|
1757
1757
|
|
|
1758
1758
|
export declare const EmptyState: React_2.ForwardRefExoticComponent<EmptyStateProps & React_2.RefAttributes<HTMLElement>>;
|
|
1759
1759
|
|
|
1760
|
+
declare type EmptyStateMediaSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
1761
|
+
|
|
1760
1762
|
export declare interface EmptyStateProps extends Omit<React_2.HTMLAttributes<HTMLElement>, "title"> {
|
|
1761
1763
|
/**
|
|
1762
1764
|
* Matches Figma property `Property 1` (`Default` / `centered`).
|
|
@@ -1765,6 +1767,11 @@ export declare interface EmptyStateProps extends Omit<React_2.HTMLAttributes<HTM
|
|
|
1765
1767
|
variant?: EmptyStateVariant;
|
|
1766
1768
|
/** Main heading. Strings use library heading styles; pass a node for full control. */
|
|
1767
1769
|
title?: EmptyStateSlot;
|
|
1770
|
+
/**
|
|
1771
|
+
* Size of the title heading — mapped internally to bold heading typography tokens.
|
|
1772
|
+
* @default "lg"
|
|
1773
|
+
*/
|
|
1774
|
+
titleSize?: EmptyStateTitleSize;
|
|
1768
1775
|
/** Supporting body copy. Strings use library body styles; pass a node for rich text. */
|
|
1769
1776
|
description?: EmptyStateSlot;
|
|
1770
1777
|
/**
|
|
@@ -1772,6 +1779,11 @@ export declare interface EmptyStateProps extends Omit<React_2.HTMLAttributes<HTM
|
|
|
1772
1779
|
* A string is treated as an image URL (`<img src={…}>`); pass a node for custom layout.
|
|
1773
1780
|
*/
|
|
1774
1781
|
media?: EmptyStateSlot;
|
|
1782
|
+
/**
|
|
1783
|
+
* Height of the media container.
|
|
1784
|
+
* @default "lg"
|
|
1785
|
+
*/
|
|
1786
|
+
mediaSize?: EmptyStateMediaSize;
|
|
1775
1787
|
/**
|
|
1776
1788
|
* Primary call to action.
|
|
1777
1789
|
* A string renders a brand `Button` with that label; pass a node for links, loading, etc.
|
|
@@ -1787,6 +1799,8 @@ export declare interface EmptyStateProps extends Omit<React_2.HTMLAttributes<HTM
|
|
|
1787
1799
|
/** Slot that can be plain copy (styled by `EmptyState`) or custom markup. */
|
|
1788
1800
|
export declare type EmptyStateSlot = string | React_2.ReactNode;
|
|
1789
1801
|
|
|
1802
|
+
declare type EmptyStateTitleSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
1803
|
+
|
|
1790
1804
|
export declare type EmptyStateVariant = "default" | "centered";
|
|
1791
1805
|
|
|
1792
1806
|
/** An "×" inside a filled circle icon for error states (20 × 20). */
|