periplo-ui 4.10.0 → 4.11.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.
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { CheckCircle } from '@phosphor-icons/react/dist/ssr/CheckCircle';
|
|
4
|
+
import { GlobeHemisphereEast } from '@phosphor-icons/react/dist/ssr/GlobeHemisphereEast';
|
|
4
5
|
import { Info } from '@phosphor-icons/react/dist/ssr/Info';
|
|
5
6
|
import { SpinnerGap } from '@phosphor-icons/react/dist/ssr/SpinnerGap';
|
|
6
7
|
import { Warning } from '@phosphor-icons/react/dist/ssr/Warning';
|
|
7
8
|
import { XCircle } from '@phosphor-icons/react/dist/ssr/XCircle';
|
|
8
9
|
import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
|
|
9
10
|
import { buttonVariants } from '../Button/Button.js';
|
|
11
|
+
import { typographyVariants } from '../Typography/Typography.js';
|
|
10
12
|
import { cn } from '../../lib/utils.js';
|
|
11
13
|
|
|
12
14
|
const Toaster = ({
|
|
@@ -32,21 +34,25 @@ const Toaster = ({
|
|
|
32
34
|
unstyled: true,
|
|
33
35
|
classNames: {
|
|
34
36
|
toast: cn(
|
|
35
|
-
"group toast-group flex w-full min-w-[300px] items-center gap-4
|
|
37
|
+
"group toast-group flex w-full min-w-[300px] items-center gap-4 p-4 rounded-lg border text-sm border-1.5 bg-white shadow-toast",
|
|
36
38
|
// Default variant
|
|
37
39
|
"data-[type=default]:bg-white data-[type=default]:text-black data-[type=default]:border-black",
|
|
38
|
-
// Success variant
|
|
39
|
-
"data-[type=success]:bg-success-100 data-[type=success]:text-success-800 data-[type=success]:border-success-
|
|
40
|
-
// Error variant
|
|
41
|
-
"data-[type=error]:bg-
|
|
42
|
-
// Warning variant
|
|
43
|
-
"data-[type=warning]:bg-
|
|
44
|
-
// Info variant
|
|
45
|
-
"data-[type=info]:bg-
|
|
40
|
+
// Success variant
|
|
41
|
+
"data-[type=success]:bg-success-100 data-[type=success]:text-success-800 data-[type=success]:border-success-300",
|
|
42
|
+
// Error variant
|
|
43
|
+
"data-[type=error]:bg-error-100 data-[type=error]:text-error-800 data-[type=error]:border-error-300",
|
|
44
|
+
// Warning variant
|
|
45
|
+
"data-[type=warning]:bg-warning-100 data-[type=warning]:text-warning-800 data-[type=warning]:border-warning-300",
|
|
46
|
+
// Info variant
|
|
47
|
+
"data-[type=info]:bg-information-100 data-[type=info]:text-information-800 data-[type=info]:border-information-300"
|
|
46
48
|
),
|
|
49
|
+
icon: cn("-mr-1 shrink-0"),
|
|
50
|
+
content: cn("min-w-0"),
|
|
51
|
+
title: cn(typographyVariants({ weight: "medium" }), "text-inherit"),
|
|
52
|
+
description: cn(typographyVariants(), "text-inherit"),
|
|
47
53
|
loader: cn("!static !transform-none data-[visible=false]:hidden"),
|
|
48
54
|
closeButton: cn(
|
|
49
|
-
"
|
|
55
|
+
"order-last ml-auto shrink-0",
|
|
50
56
|
"p-0 opacity-50 transition-opacity hover:opacity-100 !border-none !bg-transparent",
|
|
51
57
|
"[&_svg]:h-4 [&_svg]:w-4"
|
|
52
58
|
),
|
|
@@ -54,13 +60,15 @@ const Toaster = ({
|
|
|
54
60
|
buttonVariants({
|
|
55
61
|
variant: "primary",
|
|
56
62
|
size: "sm"
|
|
57
|
-
})
|
|
63
|
+
}),
|
|
64
|
+
"inline-block shrink-0 max-w-24 truncate text-left leading-8"
|
|
58
65
|
),
|
|
59
66
|
cancelButton: cn(
|
|
60
67
|
buttonVariants({
|
|
61
68
|
variant: "ghost",
|
|
62
69
|
size: "sm"
|
|
63
|
-
})
|
|
70
|
+
}),
|
|
71
|
+
"ml-auto -mr-2 inline-block shrink-0 max-w-24 truncate text-left leading-8"
|
|
64
72
|
)
|
|
65
73
|
}
|
|
66
74
|
},
|
|
@@ -75,16 +83,19 @@ const Toaster = ({
|
|
|
75
83
|
}
|
|
76
84
|
);
|
|
77
85
|
};
|
|
78
|
-
const toast = Object.assign(
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
86
|
+
const toast = Object.assign(
|
|
87
|
+
(message, options) => toast$1(message, { icon: /* @__PURE__ */ jsx(GlobeHemisphereEast, { size: 24 }), ...options }),
|
|
88
|
+
{
|
|
89
|
+
info: (message, options) => toast$1.info(message, options),
|
|
90
|
+
success: (message, options) => toast$1.success(message, options),
|
|
91
|
+
error: (message, options) => toast$1.error(message, options),
|
|
92
|
+
warning: (message, options) => toast$1.warning(message, options),
|
|
93
|
+
loading: (message, options) => toast$1.loading(message, options),
|
|
94
|
+
promise: (promise, opts) => toast$1.promise(promise, opts),
|
|
95
|
+
dismiss: (toastId) => toast$1.dismiss(toastId),
|
|
96
|
+
custom: (render, options) => toast$1.custom(render, options)
|
|
97
|
+
}
|
|
98
|
+
);
|
|
88
99
|
|
|
89
100
|
export { Toaster, toast };
|
|
90
101
|
//# sourceMappingURL=Toaster.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.js","sources":["../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client'\n\nimport { CheckCircle } from '@phosphor-icons/react/dist/ssr/CheckCircle'\nimport { Info } from '@phosphor-icons/react/dist/ssr/Info'\nimport { SpinnerGap } from '@phosphor-icons/react/dist/ssr/SpinnerGap'\nimport { Warning } from '@phosphor-icons/react/dist/ssr/Warning'\nimport { XCircle } from '@phosphor-icons/react/dist/ssr/XCircle'\nimport { Toaster as Sonner, toast as sonnerToast, ToasterProps as SonnerProps } from 'sonner'\n\nimport { buttonVariants } from '../Button'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Toast message type options\n */\nexport type ToastType = 'success' | 'error' | 'warning' | 'loading' | 'default' | 'info'\n\n/**\n * Toast position options\n * @default 'bottom-right'\n */\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\n/**\n * Configuration for toast action buttons\n */\nexport type ToastAction = {\n /** Label text for the action button */\n label: string\n /** onClick handler for the action button */\n onClick: () => void\n /** Optional style object for the button */\n style?: React.CSSProperties\n}\n\n/**\n * Options for customizing toast appearance and behavior\n */\nexport type ToastOptions = {\n /** Optional description text below the main message */\n description?: React.ReactNode\n /** Duration in milliseconds to show the toast */\n duration?: number\n /** Custom icon element */\n icon?: React.ReactNode\n /** Position of the toast on screen */\n position?: ToastPosition\n /** ID for programmatically managing the toast */\n id?: string | number\n /** Action button configuration */\n action?: ToastAction\n /** Cancel button configuration */\n cancel?: ToastAction\n /** Callback when toast is dismissed */\n onDismiss?: () => void\n /** Callback when toast auto-closes */\n onAutoClose?: () => void\n /** Whether the toast can be dismissed */\n dismissible?: boolean\n /** Custom CSS classes */\n className?: string\n /** Whether to show the close button at the toast */\n closeButton?: boolean\n}\n\n/**\n * Props for the Toaster component\n */\nexport type ToasterProps = {\n /** Number of visible toasts */\n visibleToasts?: number\n /** Position of toasts */\n position?: ToastPosition\n /** Show close button on toasts, dismissable has to be true */\n closeButton?: boolean\n /** Whether to expand the toast */\n expand?: boolean\n} & Omit<SonnerProps, 'richColors' | 'expand' | 'gap' | 'dir' | 'invert'>\n\n/**\n * Toast notification component with customizable styles and behaviors\n * @example\n * ```tsx\n * <Toaster\n * theme=\"light\"\n * visibleToasts={3}\n * position=\"bottom-right\"\n * />\n * ```\n */\nconst Toaster = ({\n visibleToasts = 3,\n position = 'bottom-right',\n closeButton = false,\n expand = true,\n ...props\n}: ToasterProps) => {\n return (\n <Sonner\n className=\"toaster group\"\n theme=\"light\"\n richColors={false}\n expand={expand}\n visibleToasts={visibleToasts}\n position={position}\n closeButton={closeButton}\n dir=\"ltr\"\n invert={false}\n toastOptions={{\n unstyled: true,\n classNames: {\n toast: cn(\n 'group toast-group flex w-full min-w-[300px] items-center gap-4
|
|
1
|
+
{"version":3,"file":"Toaster.js","sources":["../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client'\n\nimport { CheckCircle } from '@phosphor-icons/react/dist/ssr/CheckCircle'\nimport { GlobeHemisphereEast } from '@phosphor-icons/react/dist/ssr/GlobeHemisphereEast'\nimport { Info } from '@phosphor-icons/react/dist/ssr/Info'\nimport { SpinnerGap } from '@phosphor-icons/react/dist/ssr/SpinnerGap'\nimport { Warning } from '@phosphor-icons/react/dist/ssr/Warning'\nimport { XCircle } from '@phosphor-icons/react/dist/ssr/XCircle'\nimport { Toaster as Sonner, toast as sonnerToast, ToasterProps as SonnerProps } from 'sonner'\n\nimport { buttonVariants } from '../Button'\nimport { typographyVariants } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Toast message type options\n */\nexport type ToastType = 'success' | 'error' | 'warning' | 'loading' | 'default' | 'info'\n\n/**\n * Toast position options\n * @default 'bottom-right'\n */\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\n/**\n * Configuration for toast action buttons\n */\nexport type ToastAction = {\n /** Label text for the action button */\n label: string\n /** onClick handler for the action button */\n onClick: () => void\n /** Optional style object for the button */\n style?: React.CSSProperties\n}\n\n/**\n * Options for customizing toast appearance and behavior\n */\nexport type ToastOptions = {\n /** Optional description text below the main message */\n description?: React.ReactNode\n /** Duration in milliseconds to show the toast */\n duration?: number\n /** Custom icon element */\n icon?: React.ReactNode\n /** Position of the toast on screen */\n position?: ToastPosition\n /** ID for programmatically managing the toast */\n id?: string | number\n /** Action button configuration */\n action?: ToastAction\n /** Cancel button configuration */\n cancel?: ToastAction\n /** Callback when toast is dismissed */\n onDismiss?: () => void\n /** Callback when toast auto-closes */\n onAutoClose?: () => void\n /** Whether the toast can be dismissed */\n dismissible?: boolean\n /** Custom CSS classes */\n className?: string\n /** Whether to show the close button at the toast */\n closeButton?: boolean\n}\n\n/**\n * Props for the Toaster component\n */\nexport type ToasterProps = {\n /** Number of visible toasts */\n visibleToasts?: number\n /** Position of toasts */\n position?: ToastPosition\n /** Show close button on toasts, dismissable has to be true */\n closeButton?: boolean\n /** Whether to expand the toast */\n expand?: boolean\n} & Omit<SonnerProps, 'richColors' | 'expand' | 'gap' | 'dir' | 'invert'>\n\n/**\n * Toast notification component with customizable styles and behaviors\n * @example\n * ```tsx\n * <Toaster\n * theme=\"light\"\n * visibleToasts={3}\n * position=\"bottom-right\"\n * />\n * ```\n */\nconst Toaster = ({\n visibleToasts = 3,\n position = 'bottom-right',\n closeButton = false,\n expand = true,\n ...props\n}: ToasterProps) => {\n return (\n <Sonner\n className=\"toaster group\"\n theme=\"light\"\n richColors={false}\n expand={expand}\n visibleToasts={visibleToasts}\n position={position}\n closeButton={closeButton}\n dir=\"ltr\"\n invert={false}\n toastOptions={{\n unstyled: true,\n classNames: {\n toast: cn(\n 'group toast-group flex w-full min-w-[300px] items-center gap-4 p-4 rounded-lg border text-sm border-1.5 bg-white shadow-toast',\n // Default variant\n 'data-[type=default]:bg-white data-[type=default]:text-black data-[type=default]:border-black',\n // Success variant\n 'data-[type=success]:bg-success-100 data-[type=success]:text-success-800 data-[type=success]:border-success-300',\n // Error variant\n 'data-[type=error]:bg-error-100 data-[type=error]:text-error-800 data-[type=error]:border-error-300',\n // Warning variant\n 'data-[type=warning]:bg-warning-100 data-[type=warning]:text-warning-800 data-[type=warning]:border-warning-300',\n // Info variant\n 'data-[type=info]:bg-information-100 data-[type=info]:text-information-800 data-[type=info]:border-information-300',\n ),\n icon: cn('-mr-1 shrink-0'),\n content: cn('min-w-0'),\n title: cn(typographyVariants({ weight: 'medium' }), 'text-inherit'),\n description: cn(typographyVariants(), 'text-inherit'),\n loader: cn('!static !transform-none data-[visible=false]:hidden'),\n closeButton: cn(\n 'order-last ml-auto shrink-0',\n 'p-0 opacity-50 transition-opacity hover:opacity-100 !border-none !bg-transparent',\n '[&_svg]:h-4 [&_svg]:w-4',\n ),\n actionButton: cn(\n buttonVariants({\n variant: 'primary',\n size: 'sm',\n }),\n 'inline-block shrink-0 max-w-24 truncate text-left leading-8',\n ),\n cancelButton: cn(\n buttonVariants({\n variant: 'ghost',\n size: 'sm',\n }),\n 'ml-auto -mr-2 inline-block shrink-0 max-w-24 truncate text-left leading-8',\n ),\n },\n }}\n icons={{\n success: <CheckCircle size={24} />,\n warning: <Warning size={24} />,\n error: <XCircle size={24} />,\n info: <Info size={24} />,\n loading: (\n <div className=\"flex h-6 w-6 items-center justify-center\">\n <SpinnerGap size={20} className=\"animate-spin\" />\n </div>\n ),\n }}\n {...props}\n />\n )\n}\n\nconst toast = Object.assign(\n (message: React.ReactNode, options?: ToastOptions) =>\n sonnerToast(message, { icon: <GlobeHemisphereEast size={24} />, ...options }),\n {\n info: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.info(message, options),\n success: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.success(message, options),\n error: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.error(message, options),\n warning: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.warning(message, options),\n loading: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.loading(message, options),\n promise: <T,>(\n promise: Promise<T>,\n opts: {\n loading: React.ReactNode\n success: React.ReactNode | ((data: T) => React.ReactNode)\n error: React.ReactNode | ((error: Error) => React.ReactNode)\n duration?: number\n description?: React.ReactNode\n position?: ToastPosition\n id?: string\n icon?: React.ReactNode\n className?: string\n dismissible?: boolean\n closeButton?: boolean\n },\n ) => sonnerToast.promise(promise, opts),\n dismiss: (toastId: string | number) => sonnerToast.dismiss(toastId),\n custom: (render: (id: string | number) => React.ReactElement, options?: ToastOptions) =>\n sonnerToast.custom(render, options),\n },\n)\n\nexport { Toaster, toast }\n"],"names":[],"mappings":";;;;;;;;;;;;;AA6FA;AAAiB;AACC;AACL;AACG;AACL;AAEX;AACE;AACE;AAAC;AAAA;AACW;AACJ;AACM;AACZ;AACA;AACA;AACA;AACI;AACI;AACM;AACF;AACE;AACH;AACL;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AACF;AACyB;AACJ;AAC6C;AACd;AACY;AACnD;AACX;AACA;AACA;AACF;AACc;AACG;AACJ;AACH;AACP;AACD;AACF;AACc;AACG;AACJ;AACH;AACP;AACD;AACF;AACF;AACF;AACO;AAC2B;AACJ;AACF;AACJ;AAIpB;AAEJ;AACI;AAAA;AAGV;AAEA;AAAqB;AAE2D;AAC9E;AAC+F;AACM;AACJ;AACI;AACA;AAgB7D;AAC4B;AAE9B;AAExC;;"}
|