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

A component for displaying critical information or notifications.

"use client";

// src/alert.tsx
import {
  cn,
  createContext,
  createTVUnstyledSlots,
  useTVUnstyled
} from "@mijn-ui/react-core";
import { tv } from "tailwind-variants";
import { jsx } from "react/jsx-runtime";
var alertStyles = tv({
  slots: {
    base: "group space-y-1 relative w-full rounded-lg px-3 py-4 [&>span~*]:pl-8 border",
    iconWrapper: "translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-5 [&_svg]:text-current",
    title: "w-full font-semibold text-sm leading-none",
    description: "text-sm"
  },
  variants: {
    variant: {
      default: "border-outline-default bg-bg-default text-fg-default",
      brand: "border-outline-brand-subtle bg-bg-brand-subtle text-on-bg-brand-subtle",
      secondary: "border-outline-secondary bg-bg-secondary text-fg-secondary",
      success: "border-outline-success-subtle bg-bg-success-subtle text-on-bg-success-subtle",
      warning: "border-outline-warning-subtle bg-bg-warning-subtle text-on-bg-warning-subtle",
      danger: "border-outline-danger-subtle bg-bg-danger-subtle text-on-bg-danger-subtle",
      inverse: "border-outline-default bg-bg-inverse text-fg-inverse"
    }
  },
  defaultVariants: {
    variant: "default"
  }
});
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,
  unstyled = false,
  className,
  classNames,
  ...props
}) => {
  const styles = alertStyles({ variant });
  const { base } = createTVUnstyledSlots({ base: styles.base }, unstyled);
  return /* @__PURE__ */ jsx(AlertProvider, { value: { styles, unstyled, classNames }, children: /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "alert",
      className: base({ className: cn(classNames?.base, className) }),
      ...props
    }
  ) });
};
var AlertIcon = ({ unstyled, className, ...props }) => {
  const { iconWrapper, classNames } = useAlertStyles(unstyled);
  return /* @__PURE__ */ jsx(
    "span",
    {
      "data-slot": "alert-icon",
      className: iconWrapper({
        className: cn(classNames?.iconWrapper, className)
      }),
      ...props
    }
  );
};
var AlertTitle = ({ unstyled, className, ...props }) => {
  const { title, classNames } = useAlertStyles(unstyled);
  return /* @__PURE__ */ jsx(
    "h5",
    {
      "data-slot": "alert-title",
      className: title({ className: cn(classNames?.title, className) }),
      ...props
    }
  );
};
var AlertDescription = ({
  unstyled,
  className,
  ...props
}) => {
  const { description, classNames } = useAlertStyles(unstyled);
  return /* @__PURE__ */ jsx(
    "p",
    {
      "data-slot": "alert-description",
      className: description({
        className: cn(classNames?.description, className)
      }),
      ...props
    }
  );
};
export {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
  alertStyles,
  useAlertStyles
};