@yuno-payments/dashboard-design-system 2.7.9 → 2.7.10-beta.1
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/components/molecules/{empty-state-onboarding/animated-empty.d.ts → animated-empty/animated-empty-illustration.d.ts} +4 -4
- package/dist/components/molecules/{empty-state-onboarding/animated-empty.js → animated-empty/animated-empty-illustration.js} +7 -7
- package/dist/components/molecules/{empty-state-onboarding/empty-state-onboarding.d.ts → animated-empty/animated-empty.d.ts} +2 -2
- package/dist/components/molecules/{empty-state-onboarding/empty-state-onboarding.js → animated-empty/animated-empty.js} +23 -23
- package/dist/components/molecules/{empty-state-onboarding → animated-empty}/illustrations.d.ts +1 -1
- package/dist/components/molecules/animated-empty/index.d.ts +4 -0
- package/dist/components/molecules/animated-empty/types.d.ts +18 -0
- package/dist/components/molecules/index.d.ts +1 -1
- package/dist/dashboard-design-system.css +1 -1
- package/dist/index.css +1 -1
- package/dist/index.esm.min.js +5 -5
- package/dist/index.js +86 -86
- package/dist/index.umd.min.js +2 -2
- package/package.json +1 -1
- package/registry/components-registry.json +87 -87
- package/dist/components/molecules/empty-state-onboarding/index.d.ts +0 -4
- package/dist/components/molecules/empty-state-onboarding/types.d.ts +0 -18
- /package/dist/components/molecules/{empty-state-onboarding → animated-empty}/illustrations.js +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export interface
|
|
3
|
-
variant:
|
|
1
|
+
import { AnimatedEmptyVariant } from './types';
|
|
2
|
+
export interface AnimatedEmptyIllustrationProps {
|
|
3
|
+
variant: AnimatedEmptyVariant;
|
|
4
4
|
className?: string;
|
|
5
5
|
alt?: string;
|
|
6
6
|
}
|
|
@@ -10,4 +10,4 @@ export interface AnimatedEmptyProps {
|
|
|
10
10
|
* images and toggles them via Tailwind `dark:` variants — no React
|
|
11
11
|
* re-render needed when the theme changes.
|
|
12
12
|
*/
|
|
13
|
-
export declare function
|
|
13
|
+
export declare function AnimatedEmptyIllustration({ variant, className, alt, }: AnimatedEmptyIllustrationProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,27 +2,27 @@ import { j as m } from "../../../_virtual/jsx-runtime.js";
|
|
|
2
2
|
import { cn as a } from "../../../lib/utils.js";
|
|
3
3
|
import { ILLUSTRATIONS as i } from "./illustrations.js";
|
|
4
4
|
import { ThemedImage as s } from "../../atoms/themed-image/themed-image.js";
|
|
5
|
-
function
|
|
5
|
+
function p({
|
|
6
6
|
variant: o,
|
|
7
|
-
className:
|
|
7
|
+
className: e,
|
|
8
8
|
alt: r = ""
|
|
9
9
|
}) {
|
|
10
|
-
const
|
|
10
|
+
const t = i[o];
|
|
11
11
|
return /* @__PURE__ */ m.jsx(
|
|
12
12
|
s,
|
|
13
13
|
{
|
|
14
|
-
lightSrc:
|
|
15
|
-
darkSrc:
|
|
14
|
+
lightSrc: t.light,
|
|
15
|
+
darkSrc: t.dark,
|
|
16
16
|
alt: r,
|
|
17
17
|
"aria-hidden": r === "" ? !0 : void 0,
|
|
18
18
|
draggable: !1,
|
|
19
19
|
className: a(
|
|
20
20
|
"w-full max-w-[592px] h-auto select-none",
|
|
21
|
-
|
|
21
|
+
e
|
|
22
22
|
)
|
|
23
23
|
}
|
|
24
24
|
);
|
|
25
25
|
}
|
|
26
26
|
export {
|
|
27
|
-
|
|
27
|
+
p as AnimatedEmptyIllustration
|
|
28
28
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AnimatedEmptyProps } from './types';
|
|
2
2
|
/**
|
|
3
3
|
* Onboarding empty-state with an illustration on the left and promotional
|
|
4
4
|
* text + CTA on the right. Designed to be shown the first time a user
|
|
@@ -9,4 +9,4 @@ import { EmptyStateOnboardingProps } from './types';
|
|
|
9
9
|
* Layout: Image (left) | Text (right). On mobile collapses to column with
|
|
10
10
|
* the illustration on top.
|
|
11
11
|
*/
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const AnimatedEmpty: import('react').ForwardRefExoticComponent<AnimatedEmptyProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { j as e } from "../../../_virtual/jsx-runtime.js";
|
|
2
2
|
import { forwardRef as p } from "react";
|
|
3
|
-
import { cn as
|
|
3
|
+
import { cn as u } from "../../../lib/utils.js";
|
|
4
4
|
import { Button as n } from "../../atoms/button/button.js";
|
|
5
|
-
import {
|
|
6
|
-
import { Typography as
|
|
7
|
-
const
|
|
5
|
+
import { AnimatedEmptyIllustration as h } from "./animated-empty-illustration.js";
|
|
6
|
+
import { Typography as l } from "../../atoms/typography/typography.js";
|
|
7
|
+
const j = p(
|
|
8
8
|
({
|
|
9
|
-
variant:
|
|
10
|
-
tagline:
|
|
11
|
-
title:
|
|
12
|
-
description:
|
|
9
|
+
variant: d,
|
|
10
|
+
tagline: i,
|
|
11
|
+
title: m,
|
|
12
|
+
description: s,
|
|
13
13
|
cta: t,
|
|
14
14
|
onDismiss: a,
|
|
15
|
-
dismissLabel:
|
|
16
|
-
illustration:
|
|
15
|
+
dismissLabel: r,
|
|
16
|
+
illustration: o,
|
|
17
17
|
className: c
|
|
18
18
|
}, x) => {
|
|
19
19
|
const f = () => {
|
|
@@ -23,34 +23,34 @@ const g = p(
|
|
|
23
23
|
"div",
|
|
24
24
|
{
|
|
25
25
|
ref: x,
|
|
26
|
-
"data-variant":
|
|
27
|
-
className:
|
|
28
|
-
"yuno-empty
|
|
26
|
+
"data-variant": d,
|
|
27
|
+
className: u(
|
|
28
|
+
"yuno-animated-empty",
|
|
29
29
|
"flex flex-col md:flex-row items-center gap-8",
|
|
30
30
|
"bg-card rounded-lg p-8 md:p-12",
|
|
31
31
|
"animate-fade-in duration-500",
|
|
32
32
|
c
|
|
33
33
|
),
|
|
34
34
|
children: [
|
|
35
|
-
/* @__PURE__ */ e.jsx("div", { className: "hidden md:block yuno-empty-
|
|
35
|
+
/* @__PURE__ */ e.jsx("div", { className: "hidden md:block yuno-animated-empty-illustration bg-muted rounded-lg overflow-hidden flex-shrink-0", children: o ?? /* @__PURE__ */ e.jsx(h, { variant: d }) }),
|
|
36
36
|
/* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-4 items-start w-full", children: [
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
i && /* @__PURE__ */ e.jsx(
|
|
38
|
+
l,
|
|
39
39
|
{
|
|
40
40
|
variant: "muted",
|
|
41
41
|
className: "uppercase tracking-wide text-xs font-semibold",
|
|
42
|
-
children:
|
|
42
|
+
children: i
|
|
43
43
|
}
|
|
44
44
|
),
|
|
45
45
|
/* @__PURE__ */ e.jsx(
|
|
46
|
-
|
|
46
|
+
l,
|
|
47
47
|
{
|
|
48
48
|
as: "h3",
|
|
49
49
|
className: "text-2xl font-semibold leading-tight",
|
|
50
|
-
children:
|
|
50
|
+
children: m
|
|
51
51
|
}
|
|
52
52
|
),
|
|
53
|
-
/* @__PURE__ */ e.jsx(
|
|
53
|
+
/* @__PURE__ */ e.jsx(l, { variant: "muted", className: "text-sm", children: s }),
|
|
54
54
|
/* @__PURE__ */ e.jsxs("div", { className: "flex gap-3 items-center mt-2", children: [
|
|
55
55
|
/* @__PURE__ */ e.jsx(
|
|
56
56
|
n,
|
|
@@ -62,7 +62,7 @@ const g = p(
|
|
|
62
62
|
children: t.label
|
|
63
63
|
}
|
|
64
64
|
),
|
|
65
|
-
a &&
|
|
65
|
+
a && r && /* @__PURE__ */ e.jsx(n, { variant: "ghost", size: "default", onClick: a, children: r })
|
|
66
66
|
] })
|
|
67
67
|
] })
|
|
68
68
|
]
|
|
@@ -70,7 +70,7 @@ const g = p(
|
|
|
70
70
|
);
|
|
71
71
|
}
|
|
72
72
|
);
|
|
73
|
-
|
|
73
|
+
j.displayName = "AnimatedEmpty";
|
|
74
74
|
export {
|
|
75
|
-
|
|
75
|
+
j as AnimatedEmpty
|
|
76
76
|
};
|
package/dist/components/molecules/{empty-state-onboarding → animated-empty}/illustrations.d.ts
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { EmptyStateVariant } from './types';
|
|
1
|
+
import { AnimatedEmptyVariant as EmptyStateVariant } from './types';
|
|
2
2
|
export type IllustrationTheme = "light" | "dark";
|
|
3
3
|
export declare const ASSETS_BASE_URL = "https://dashboard-assets.y.uno";
|
|
4
4
|
export declare const ILLUSTRATIONS: Record<EmptyStateVariant, Record<IllustrationTheme, string>>;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { AnimatedEmpty } from './animated-empty';
|
|
2
|
+
export { AnimatedEmptyIllustration, type AnimatedEmptyIllustrationProps, } from './animated-empty-illustration';
|
|
3
|
+
export { ILLUSTRATIONS, ASSETS_BASE_URL } from './illustrations';
|
|
4
|
+
export type { AnimatedEmptyProps, AnimatedEmptyVariant, AnimatedEmptyAction, } from './types';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type AnimatedEmptyVariant = "payments" | "chargebacks" | "installments" | "paymentLinks" | "recipients" | "subscriptions" | "rules" | "blocklists" | "allowlists";
|
|
3
|
+
export interface AnimatedEmptyAction {
|
|
4
|
+
label: string;
|
|
5
|
+
onClick: () => void;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface AnimatedEmptyProps {
|
|
9
|
+
variant: AnimatedEmptyVariant;
|
|
10
|
+
tagline?: string;
|
|
11
|
+
title: string;
|
|
12
|
+
description: string;
|
|
13
|
+
cta: AnimatedEmptyAction;
|
|
14
|
+
onDismiss?: () => void;
|
|
15
|
+
dismissLabel?: string;
|
|
16
|
+
illustration?: ReactNode;
|
|
17
|
+
className?: string;
|
|
18
|
+
}
|
|
@@ -8,7 +8,7 @@ export { NavTabs, type NavTab, type NavTabsProps } from './nav-tabs';
|
|
|
8
8
|
export { HighlightBanner, type HighlightBannerProps } from './highlight-banner';
|
|
9
9
|
export { Empty, type EmptyProps } from './empty';
|
|
10
10
|
export { EmptyIcon, type EmptyIconProps } from './empty';
|
|
11
|
-
export {
|
|
11
|
+
export { AnimatedEmpty, AnimatedEmptyIllustration, type AnimatedEmptyProps, type AnimatedEmptyVariant, type AnimatedEmptyAction, type AnimatedEmptyIllustrationProps, } from './animated-empty';
|
|
12
12
|
export { ProviderCard, type ProviderCardProps } from './provider-card';
|
|
13
13
|
export { FileUpload, type FileUploadProps, type UploadFile, } from './file-upload';
|
|
14
14
|
export { Stepper, type StepperProps, type StepperStep } from './stepper';
|