"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { AlertCircle, CheckCircle2, Info, Rocket, X, AlertTriangle } from "lucide-react";
import { cva } from "class-variance-authority";
import { cn } from "@open-mercato/shared/lib/utils";
const legacyVariantToStatus = {
  default: "information",
  destructive: "error",
  success: "success",
  warning: "warning",
  info: "information"
};
const alertVariants = cva(
  "relative flex w-full gap-2 transition-colors",
  {
    variants: {
      status: {
        error: "",
        warning: "",
        success: "",
        information: "",
        feature: ""
      },
      style: {
        filled: "",
        light: "",
        lighter: "",
        stroke: ""
      },
      size: {
        // Figma X-Small: px-[8px] py-[6px], radius-8, Paragraph/X Small (12/16)
        xs: "min-h-8 items-center rounded-lg px-2 py-1.5 text-xs leading-4 tracking-tight",
        // Figma Small: px-[10px] py-[8px], radius-8, Paragraph/Small (14/20)
        sm: "min-h-9 items-center rounded-lg px-2.5 py-2 text-sm leading-5 tracking-tight",
        // Figma Large: px-[12px] py-[10px], radius-12, Paragraph/Small (14/20) multi-line
        default: "items-start rounded-xl px-3 py-2.5 text-sm leading-5 tracking-tight"
      }
    },
    compoundVariants: [
      // === filled (Figma: bg = state/{x}/base, text = static-white) ===
      { status: "error", style: "filled", className: "border border-transparent bg-status-error-icon text-white" },
      { status: "warning", style: "filled", className: "border border-transparent bg-status-warning-icon text-white" },
      { status: "success", style: "filled", className: "border border-transparent bg-status-success-icon text-white" },
      { status: "information", style: "filled", className: "border border-transparent bg-status-info-icon text-white" },
      { status: "feature", style: "filled", className: "border border-transparent bg-status-neutral-icon text-white" },
      // === light (Figma: bg = state/{x}/light, text = text/strong-950 = #171717 black) ===
      { status: "error", style: "light", className: "border border-transparent bg-status-error-border text-foreground" },
      { status: "warning", style: "light", className: "border border-transparent bg-status-warning-border text-foreground" },
      { status: "success", style: "light", className: "border border-transparent bg-status-success-border text-foreground" },
      { status: "information", style: "light", className: "border border-transparent bg-status-info-border text-foreground" },
      { status: "feature", style: "light", className: "border border-transparent bg-status-neutral-border text-foreground" },
      // === lighter (Figma: bg = state/{x}/lighter, text = text/strong-950 = #171717 black) ===
      { status: "error", style: "lighter", className: "border border-transparent bg-status-error-bg text-foreground" },
      { status: "warning", style: "lighter", className: "border border-transparent bg-status-warning-bg text-foreground" },
      { status: "success", style: "lighter", className: "border border-transparent bg-status-success-bg text-foreground" },
      { status: "information", style: "lighter", className: "border border-transparent bg-status-info-bg text-foreground" },
      { status: "feature", style: "lighter", className: "border border-transparent bg-status-neutral-bg text-foreground" },
      // === stroke (Figma: bg = white, border = stroke/soft-200, text = strong-950, shadow = regular-shadow/medium) ===
      { style: "stroke", className: "border border-border bg-background text-foreground shadow-lg" }
    ],
    defaultVariants: {
      status: "information",
      style: "light",
      size: "sm"
    }
  }
);
const alertDismissVariants = cva(
  "shrink-0 rounded-md p-0.5 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
  {
    variants: {
      style: {
        filled: "text-white opacity-90 hover:opacity-100",
        light: "text-foreground opacity-40 hover:opacity-100",
        lighter: "text-foreground opacity-40 hover:opacity-100",
        stroke: "text-foreground opacity-40 hover:opacity-100"
      }
    },
    defaultVariants: { style: "light" }
  }
);
const alertIconBadgeVariants = cva(
  "inline-flex shrink-0 items-center justify-center rounded-full text-white",
  {
    variants: {
      status: {
        error: "bg-status-error-icon",
        warning: "bg-status-warning-icon",
        success: "bg-status-success-icon",
        information: "bg-status-info-icon",
        feature: "bg-status-neutral-icon"
      },
      size: {
        xs: "size-4 [&>svg]:size-2.5",
        sm: "size-5 [&>svg]:size-3",
        default: "size-6 [&>svg]:size-3.5"
      }
    },
    defaultVariants: { status: "information", size: "sm" }
  }
);
const defaultStatusIcons = {
  error: AlertCircle,
  warning: AlertTriangle,
  success: CheckCircle2,
  information: Info,
  feature: Rocket
};
const Alert = React.forwardRef(
  ({
    className,
    status,
    style,
    size,
    showIcon = true,
    icon,
    dismissible = false,
    onDismiss,
    dismissAriaLabel = "Dismiss",
    action,
    variant,
    children,
    ...props
  }, ref) => {
    const resolvedStatus = status ?? (variant ? legacyVariantToStatus[variant] : "information");
    const resolvedStyle = style ?? "light";
    const resolvedSize = size ?? "sm";
    const IconComponent = defaultStatusIcons[resolvedStatus];
    const rawIcon = icon ?? /* @__PURE__ */ jsx(IconComponent, { "aria-hidden": "true" });
    let iconSlot = null;
    if (showIcon) {
      if (resolvedStyle === "filled") {
        iconSlot = /* @__PURE__ */ jsx(
          "span",
          {
            className: cn(
              "inline-flex shrink-0 items-center justify-center",
              resolvedSize === "default" ? "[&>svg]:size-5" : "[&>svg]:size-4"
            ),
            "data-slot": "alert-icon",
            children: rawIcon
          }
        );
      } else {
        iconSlot = /* @__PURE__ */ jsx(
          "span",
          {
            className: alertIconBadgeVariants({ status: resolvedStatus, size: resolvedSize }),
            "data-slot": "alert-icon-badge",
            "data-status": resolvedStatus,
            children: rawIcon
          }
        );
      }
    }
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        role: "alert",
        className: cn(
          alertVariants({ status: resolvedStatus, style: resolvedStyle, size: resolvedSize }),
          className
        ),
        "data-slot": "alert",
        "data-status": resolvedStatus,
        "data-style": resolvedStyle,
        ...props,
        children: [
          iconSlot,
          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
          action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null,
          dismissible ? /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              onClick: onDismiss,
              "aria-label": dismissAriaLabel,
              className: alertDismissVariants({ style: resolvedStyle }),
              "data-slot": "alert-dismiss",
              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
            }
          ) : null
        ]
      }
    );
  }
);
Alert.displayName = "Alert";
const AlertTitle = React.forwardRef(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h5", { ref, className: cn("mb-1 text-sm font-medium leading-5", className), ...props })
);
AlertTitle.displayName = "AlertTitle";
const AlertDescription = React.forwardRef(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm leading-5", className), ...props })
);
AlertDescription.displayName = "AlertDescription";
export {
  Alert,
  AlertDescription,
  AlertTitle,
  alertIconBadgeVariants,
  alertVariants
};
//# sourceMappingURL=alert.js.map
