@chakra-ui/react
Version:
Responsive and accessible React UI components built with React and Emotion
62 lines (59 loc) • 1.93 kB
JavaScript
"use client";
import { jsx } from 'react/jsx-runtime';
import { forwardRef, Fragment } from 'react';
import { createContext } from '../../create-context.js';
import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
import { chakra } from '../../styled-system/factory.js';
import { InfoIcon, WarningIcon, CheckCircleIcon } from '../icons.js';
const [AlertStatusProvider, useAlertStatusContext] = createContext({
name: "AlertStatusContext",
hookName: "useAlertStatusContext",
providerName: "<Alert />"
});
const {
withProvider,
withContext,
useStyles: useAlertStyles,
PropsProvider
} = createSlotRecipeContext({ key: "alert" });
const AlertRoot = withProvider(
"div",
"root",
{
forwardAsChild: true,
wrapElement(element, props) {
return (
// @ts-ignore fix later
/* @__PURE__ */ jsx(AlertStatusProvider, { value: { status: props.status || "info" }, children: element })
);
}
}
);
const AlertPropsProvider = PropsProvider;
const AlertTitle = withContext(
"div",
"title"
);
const AlertDescription = withContext("div", "description");
const AlertContent = withContext(
"div",
"content"
);
const iconMap = {
info: InfoIcon,
warning: WarningIcon,
success: CheckCircleIcon,
error: WarningIcon,
neutral: InfoIcon
};
const AlertIndicator = forwardRef(
function AlertIndicator2(props, ref) {
const api = useAlertStatusContext();
const styles = useAlertStyles();
const Icon = typeof api.status === "string" ? iconMap[api.status] : Fragment;
const { children = /* @__PURE__ */ jsx(Icon, {}), ...rest } = props;
return /* @__PURE__ */ jsx(chakra.span, { ref, ...rest, css: [styles.indicator, props.css], children });
}
);
export { AlertContent, AlertDescription, AlertIndicator, AlertPropsProvider, AlertRoot, AlertStatusProvider, AlertTitle, useAlertStatusContext, useAlertStyles };
;