@cerberus-design/react
Version:
The Cerberus Design React component library.
62 lines (59 loc) • 2.15 kB
JavaScript
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Box } from 'styled-system/jsx';
import { Button } from '../button/button.js';
import { Show } from '../show/show.js';
import { NotificationParts } from './parts.js';
import { MatchNotificationIcon } from './match-icon.js';
import { ToastCloseTrigger } from './close-trigger.js';
import { toaster } from './toaster.js';
import { Toaster } from '../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/toast/toaster.js';
function getEmphasis(type) {
return type.includes("subtle") ? "low" : "high";
}
function NotificationCenter(props) {
const cachedToaster = props.toaster || toaster;
return /* @__PURE__ */ jsx(Toaster, { toaster: cachedToaster, children: (toast) => /* @__PURE__ */ jsxs(
NotificationParts.Root,
{
"data-emphasis": getEmphasis(
toast.type ?? "info"
),
children: [
/* @__PURE__ */ jsx(
MatchNotificationIcon,
{
type: toast.type
}
),
/* @__PURE__ */ jsxs(Box, { flex: "1", paddingBlock: "sm", children: [
/* @__PURE__ */ jsx(NotificationParts.Heading, { children: toast.title }),
/* @__PURE__ */ jsx(NotificationParts.Description, { children: toast.description }),
/* @__PURE__ */ jsx(Show, { when: toast.action, children: /* @__PURE__ */ jsx(NotificationParts.ActionTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
Button,
{
palette: toast.type,
usage: "ghost",
size: "sm",
children: toast.action?.label
}
) }) })
] }),
/* @__PURE__ */ jsx(ToastCloseTrigger, {})
]
},
toast.id
) });
}
function useNotificationCenter() {
function notify(options) {
toaster.create({
title: options.heading,
description: options.description,
type: options.palette,
action: options.action
});
}
return { ...toaster, notify };
}
export { NotificationCenter, getEmphasis, useNotificationCenter };