@cerberus-design/react
Version:
The Cerberus Design React component library.
78 lines (77 loc) • 1.97 kB
JavaScript
"use client";
import {
trapFocus
} from "../../chunk-IX7BYPTS.js";
import {
useCerberusContext
} from "../../chunk-GITT5645.js";
// src/components/deprecated/Notification.tsx
import { cx } from "styled-system/css";
import { hstack, vstack } from "styled-system/patterns";
import {
notification
} from "styled-system/recipes";
import {
useRef
} from "react";
import { jsx, jsxs } from "react/jsx-runtime";
function MatchNotificationIcon(props) {
const { icons } = useCerberusContext();
const palette = props.palette || "info";
const key = `${palette}Notification`;
const Icon = icons[key];
return /* @__PURE__ */ jsx(Icon, {});
}
function Notification(props) {
const { children, palette, onClose, ...nativeProps } = props;
const ref = useRef(null);
const onKeyDown = trapFocus(ref);
const styles = notification({ palette });
const { icons } = useCerberusContext();
const { close: CloseIcon } = icons;
return /* @__PURE__ */ jsxs(
"dialog",
{
...nativeProps,
"data-placement": "left",
className: cx(
nativeProps.className,
hstack({
position: "relative",
gap: "4"
}),
styles.dialog
),
onKeyDown,
ref,
children: [
/* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(MatchNotificationIcon, { palette }) }),
/* @__PURE__ */ jsx(
"div",
{
className: vstack({
alignItems: "flex-start",
gap: "0",
py: "2"
}),
children
}
),
/* @__PURE__ */ jsx(
"button",
{
"aria-label": "Close",
className: styles.close,
onClick: onClose,
value: props.id,
children: /* @__PURE__ */ jsx(CloseIcon, {})
}
)
]
}
);
}
export {
Notification
};
//# sourceMappingURL=Notification.js.map