analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
122 lines (119 loc) • 4.2 kB
JavaScript
"use client";
// src/components/Toast/utils/ToastStore.ts
import { create } from "zustand";
var useToastStore = create((set) => ({
toasts: [],
addToast: (toast) => {
const id = crypto.randomUUID();
set((state) => ({
toasts: [...state.toasts, { id, ...toast }]
}));
},
removeToast: (id) => {
set((state) => ({
toasts: state.toasts.filter((t) => t.id !== id)
}));
}
}));
var ToastStore_default = useToastStore;
// src/components/Toast/Toast.tsx
import { CheckCircle, WarningCircle, Info, X } from "phosphor-react";
import { jsx, jsxs } from "react/jsx-runtime";
var VARIANT_ACTION_CLASSES = {
solid: {
warning: "bg-warning text-warning-600 border-none focus-visible:outline-none",
success: "bg-success text-success-800 border-none focus-visible:outline-none",
info: "bg-info text-info-600 border-none focus-visible:outline-none"
},
outlined: {
warning: "bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none",
success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
info: "bg-info text-info-600 border border-info-600 focus-visible:outline-none"
}
};
var iconMap = {
success: CheckCircle,
info: Info,
warning: WarningCircle
};
var Toast = ({
variant = "outlined",
action = "success",
className = "",
onClose,
title,
description,
position = "default",
...props
}) => {
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
const positionClasses = {
"top-left": "fixed top-4 left-4",
"top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
"top-right": "fixed top-4 right-4",
"bottom-left": "fixed bottom-4 left-4",
"bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
"bottom-right": "fixed bottom-4 right-4",
default: ""
};
const IconAction = iconMap[action] || iconMap["success"];
const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
return /* @__PURE__ */ jsxs(
"div",
{
role: "alert",
"aria-live": "assertive",
"aria-atomic": "true",
className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
...props,
children: [
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-start gap-3", children: [
/* @__PURE__ */ jsx("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx(IconAction, {}) }),
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-start", children: [
/* @__PURE__ */ jsx("p", { className: "font-semibold text-md", children: title }),
description && /* @__PURE__ */ jsx("p", { className: "text-md text-text-900", children: description })
] })
] }),
/* @__PURE__ */ jsx(
"button",
{
onClick: onClose,
"aria-label": "Dismiss notification",
className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
children: /* @__PURE__ */ jsx(X, {})
}
)
]
}
);
};
var Toast_default = Toast;
// src/components/Toast/utils/Toaster.tsx
import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
var Toaster = () => {
const toasts = ToastStore_default((state) => state.toasts);
const removeToast = ToastStore_default((state) => state.removeToast);
return /* @__PURE__ */ jsx2(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx2(
Toast_default,
{
title: toast.title,
description: toast.description,
variant: toast.variant,
action: toast.action,
position: toast.position,
onClose: () => removeToast(toast.id)
},
toast.id
)) });
};
var useToast = () => {
const addToast = ToastStore_default((state) => state.addToast);
const removeToast = ToastStore_default((state) => state.removeToast);
return { addToast, removeToast };
};
var Toaster_default = Toaster;
export {
Toaster_default as default,
useToast
};
//# sourceMappingURL=index.mjs.map