@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
59 lines (55 loc) • 2.8 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_circle_check_big_icon = require('../icon/icons/circle-check-big-icon.cjs');
const require_info_icon = require('../icon/icons/info-icon.cjs');
const require_octagon_alert_icon = require('../icon/icons/octagon-alert-icon.cjs');
const require_triangle_alert_icon = require('../icon/icons/triangle-alert-icon.cjs');
const require_alert_style = require('./alert.style.cjs');
const require_use_loading_component = require('../loading/use-loading-component.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/alert/alert.tsx
const icons = {
error: require_octagon_alert_icon.OctagonAlertIcon,
info: require_info_icon.InfoIcon,
success: require_circle_check_big_icon.CircleCheckBigIcon,
warning: require_triangle_alert_icon.TriangleAlertIcon
};
const { ComponentContext, PropsContext: AlertPropsContext, useComponentContext, usePropsContext: useAlertPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("alert", require_alert_style.alertStyle);
/**
* `Alert` is a component that conveys information to the user.
*
* @see https://yamada-ui.com/docs/components/alert
*/
const AlertRoot = withProvider(({ status, colorScheme = status,...props }) => {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
value: (0, react.useMemo)(() => ({ status }), [status]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
colorScheme,
role: "alert",
...props
})
});
}, "root")({ status: "info" });
const AlertIcon = withContext(({ as,...rest }) => {
const { status } = useComponentContext();
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as || icons[status], { ...rest });
}, "icon")();
const AlertLoading = withContext(({ loadingScheme = "oval",...rest }) => {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_loading_component.useLoadingComponent(loadingScheme), { ...rest });
}, ["icon", "loading"])();
const AlertTitle = withContext("p", "title")();
const AlertDescription = withContext("span", "description")();
//#endregion
exports.AlertDescription = AlertDescription;
exports.AlertIcon = AlertIcon;
exports.AlertLoading = AlertLoading;
exports.AlertPropsContext = AlertPropsContext;
exports.AlertRoot = AlertRoot;
exports.AlertTitle = AlertTitle;
exports.useAlertPropsContext = useAlertPropsContext;
//# sourceMappingURL=alert.cjs.map