import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { c as cva } from "../../index-BHpUy2Ix.js";
import { S as StClose } from "../../StClose-BQuYK7Le.js";
import { c as cn } from "../../cn-FAaWYZ6x.js";
const hintVariants = cva(
  "relative flex w-full rounded-xl p-4 text-base transition-all focus-within:ring-2 focus-within:ring-offset-2",
  {
    variants: {
      mood: {
        default: ["bg-accent/20 text-gray-800", "focus-within:ring-accent/50"],
        danger: [
          "bg-red-500/20 text-red-900 dark:text-red-100",
          "focus-within:ring-destructive/50"
        ],
        warning: [
          "bg-amber-500/20 text-amber-900 dark:text-amber-100",
          "focus-within:ring-amber-500/50"
        ],
        success: [
          "bg-emerald-500/20 text-emerald-900 dark:text-emerald-100",
          "focus-within:ring-emerald-500/50"
        ],
        neutral: [
          "bg-gray-200 text-text-primary",
          "focus-within:ring-gray-500/50"
        ]
      }
    },
    defaultVariants: {
      mood: "default"
    }
  }
);
const Hint = React.forwardRef(
  ({
    className,
    mood,
    icon,
    title,
    description,
    dismissible = false,
    onDismiss,
    children,
    ...props
  }, ref) => {
    const [isDismissed, setIsDismissed] = React.useState(false);
    React.useEffect(() => {
      if (!dismissible) return;
      const handleKeyDown = (event) => {
        if (event.key === "Escape" && !isDismissed) {
          setIsDismissed(true);
          onDismiss?.();
        }
      };
      document.addEventListener("keydown", handleKeyDown);
      return () => document.removeEventListener("keydown", handleKeyDown);
    }, [dismissible, isDismissed, onDismiss]);
    if (isDismissed) return null;
    const handleDismiss = () => {
      setIsDismissed(true);
      onDismiss?.();
    };
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        role: "status",
        "aria-live": "polite",
        "aria-atomic": "true",
        className: cn(hintVariants({ mood }), className),
        ...props,
        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3 w-full", children: [
          icon && /* @__PURE__ */ jsx(
            "div",
            {
              className: cn(
                "flex-shrink-0 [&>svg]:h-5 [&>svg]:w-5",
                mood === "default" && "text-accent",
                mood === "danger" && "text-red-600",
                mood === "warning" && "text-amber-600",
                mood === "success" && "text-emerald-600",
                mood === "neutral" && "text-gray-600"
              ),
              "aria-hidden": "true",
              children: icon
            }
          ),
          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
            title && /* @__PURE__ */ jsx("h3", { className: "font-semibold leading-5", children: title }),
            description && /* @__PURE__ */ jsx("p", { className: cn(title ? "opacity-80" : "text-primary"), children: description }),
            children
          ] }),
          dismissible && /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              onClick: handleDismiss,
              className: cn(
                "absolute right-2 top-2 z-10 rounded-lg p-1.5",
                "opacity-70 ring-offset-white transition-all",
                "hover:cursor-pointer hover:opacity-100",
                "focus:outline-none focus:ring-2 focus:ring-offset-2",
                "disabled:pointer-events-none",
                mood === "default" && "focus:ring-accent",
                mood === "danger" && "focus:ring-destructive",
                mood === "warning" && "focus:ring-amber-500",
                mood === "success" && "focus:ring-emerald-500",
                mood === "neutral" && "focus:ring-gray-500"
              ),
              "aria-label": "Dismiss hint",
              children: /* @__PURE__ */ jsx(StClose, { width: 16, height: 16 })
            }
          )
        ] })
      }
    );
  }
);
Hint.displayName = "Hint";
export {
  Hint
};
