@mijn-ui/react-alert/dist/index.js

A component for displaying critical information or notifications.

"use client";

// src/alert.tsx
import { createTVUnstyledSlots } from "@mijn-ui/react-core";
import { useTVUnstyled } from "@mijn-ui/react-hooks";
import {
  alertStyles,
  cn
} from "@mijn-ui/react-theme";
import { createContext } from "@mijn-ui/react-utilities";
import { jsx } from "react/jsx-runtime";
var [AlertProvider, useAlertContext] = createContext({
  name: "AlertContext",
  strict: true,
  errorMessage: "useAlertContext: `context` is undefined. Seems you forgot to wrap component within <Alert />"
});
var useAlertStyles = (unstyledOverride) => {
  const context = useAlertContext();
  const unstyledSlots = useTVUnstyled(context, unstyledOverride);
  return { ...unstyledSlots, classNames: context.classNames };
};
var Alert = ({
  variant,
  color,
  unstyled = false,
  className,
  classNames,
  ...props
}) => {
  const styles = alertStyles({ variant, color });
  const { base } = createTVUnstyledSlots({ base: styles.base }, unstyled);
  return /* @__PURE__ */ jsx(AlertProvider, { value: { styles, unstyled, classNames }, children: /* @__PURE__ */ jsx(
    "div",
    {
      className: base({ className: cn(classNames?.base, className) }),
      ...props
    }
  ) });
};
var AlertIcon = ({ unstyled, className, ...props }) => {
  const { iconWrapper, classNames } = useAlertStyles(unstyled);
  return /* @__PURE__ */ jsx(
    "span",
    {
      className: iconWrapper({
        className: cn(classNames?.iconWrapper, className)
      }),
      ...props
    }
  );
};
var AlertTitle = ({ unstyled, className, ...props }) => {
  const { title, classNames } = useAlertStyles(unstyled);
  return /* @__PURE__ */ jsx(
    "h5",
    {
      className: title({ className: cn(classNames?.title, className) }),
      ...props
    }
  );
};
var AlertDescription = ({
  unstyled,
  className,
  ...props
}) => {
  const { description, classNames } = useAlertStyles(unstyled);
  return /* @__PURE__ */ jsx(
    "p",
    {
      className: description({
        className: cn(classNames?.description, className)
      }),
      ...props
    }
  );
};
export {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
  useAlertStyles
};