"use client";
import * as React5 from 'react';
import { Loader2, X, Loader2Icon } from 'lucide-react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';
import { jsxs, jsx } from 'react/jsx-runtime';
import * as AvatarPrimitive from '@radix-ui/react-avatar';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
__name(cn, "cn");
var buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        // Keep the additional Hanzo variants for backward compatibility
        primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        linkFG: "text-primary underline-offset-4 hover:underline",
        linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
);
var Button = React5.forwardRef(
  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return /* @__PURE__ */ jsxs(
      Comp,
      {
        className: cn(buttonVariants({ variant, size, className })),
        ref,
        ...props,
        children: [
          isLoading ? /* @__PURE__ */ jsx(
            Loader2,
            {
              className: cn("h-4 w-4 animate-spin", size !== "icon" && "mr-2")
            }
          ) : null,
          isLoading && size === "icon" ? null : children
        ]
      }
    );
  }
);
Button.displayName = "Button";
var Announcement = React5.forwardRef(
  ({ className, children, dismissible = true, onDismiss, ...props }, ref) => {
    const [isVisible, setIsVisible] = React5.useState(true);
    const handleDismiss = /* @__PURE__ */ __name(() => {
      setIsVisible(false);
      onDismiss?.();
    }, "handleDismiss");
    if (!isVisible) return null;
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn(
          "relative flex items-center gap-4 rounded-lg border bg-background px-4 py-3 text-sm",
          className
        ),
        ...props,
        children: [
          /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
          dismissible && /* @__PURE__ */ jsxs(
            Button,
            {
              variant: "ghost",
              size: "icon",
              className: "h-6 w-6",
              onClick: handleDismiss,
              children: [
                /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Dismiss" })
              ]
            }
          )
        ]
      }
    );
  }
);
Announcement.displayName = "Announcement";
var Avatar = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
  AvatarPrimitive.Root,
  {
    className: cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    ),
    ref,
    ...props
  }
), "Avatar");
Avatar.displayName = AvatarPrimitive.Root.displayName;
var AvatarImage = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
  AvatarPrimitive.Image,
  {
    className: cn("aspect-square h-full w-full", className),
    ref,
    ...props
  }
), "AvatarImage");
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
var AvatarFallback = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
  AvatarPrimitive.Fallback,
  {
    className: cn(
      "bg-muted flex h-full w-full items-center justify-center rounded-full",
      className
    ),
    ref,
    ...props
  }
), "AvatarFallback");
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
var AvatarGroup = React5.forwardRef(
  ({ className, items, max = 5, ...props }, ref) => {
    const displayItems = items.slice(0, max);
    const remaining = items.length - max;
    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex -space-x-4", className), ...props, children: [
      displayItems.map((item, index) => /* @__PURE__ */ jsxs(Avatar, { className: "border-2 border-background", children: [
        /* @__PURE__ */ jsx(AvatarImage, { src: item.src, alt: item.alt }),
        /* @__PURE__ */ jsx(AvatarFallback, { children: item.fallback })
      ] }, index)),
      remaining > 0 && /* @__PURE__ */ jsx(Avatar, { className: "border-2 border-background", children: /* @__PURE__ */ jsxs(AvatarFallback, { children: [
        "+",
        remaining
      ] }) })
    ] });
  }
);
AvatarGroup.displayName = "AvatarGroup";
var bannerVariants = cva(
  "relative w-full border-b px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        info: "border-blue-500/50 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400",
        success: "border-green-500/50 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100 [&>svg]:text-green-600 dark:[&>svg]:text-green-400",
        warning: "border-yellow-500/50 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",
        error: "border-red-500/50 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100 [&>svg]:text-red-600 dark:[&>svg]:text-red-400"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
var Banner = React5.forwardRef(
  ({ className, variant, onClose, children, ...props }, ref) => {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        role: "alert",
        className: cn(bannerVariants({ variant }), className),
        ...props,
        children: [
          children,
          onClose && /* @__PURE__ */ jsxs(
            "button",
            {
              type: "button",
              onClick: onClose,
              className: "absolute right-4 top-3 rounded-md p-1 hover:bg-black/5 dark:hover:bg-white/5",
              children: [
                /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
              ]
            }
          )
        ]
      }
    );
  }
);
Banner.displayName = "Banner";
var Cursor = React5.forwardRef(
  ({ className, children, cursorText, cursorSize = 20, ...props }, ref) => {
    const [position, setPosition] = React5.useState({ x: 0, y: 0 });
    const [isHovered, setIsHovered] = React5.useState(false);
    const handleMouseMove = /* @__PURE__ */ __name((e) => {
      const rect = e.currentTarget.getBoundingClientRect();
      setPosition({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      });
    }, "handleMouseMove");
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("relative cursor-none", className),
        onMouseMove: handleMouseMove,
        onMouseEnter: () => setIsHovered(true),
        onMouseLeave: () => setIsHovered(false),
        ...props,
        children: [
          children,
          isHovered && /* @__PURE__ */ jsx(
            "div",
            {
              className: "pointer-events-none absolute z-50 flex items-center justify-center rounded-full bg-primary/20 backdrop-blur-sm transition-transform",
              style: {
                left: position.x,
                top: position.y,
                width: cursorSize,
                height: cursorSize,
                transform: "translate(-50%, -50%)"
              },
              children: cursorText && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-primary", children: cursorText })
            }
          )
        ]
      }
    );
  }
);
Cursor.displayName = "Cursor";
var Marquee = React5.forwardRef(
  ({
    className,
    children,
    repeat = 2,
    reverse = false,
    pauseOnHover = false,
    vertical = false,
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        className: cn(
          "group flex overflow-hidden",
          vertical ? "flex-col" : "flex-row",
          className
        ),
        ...props,
        children: Array.from({ length: repeat }).map((_, i) => /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "flex shrink-0",
              vertical ? "animate-marquee-vertical flex-col" : "animate-marquee",
              reverse && (vertical ? "[animation-direction:reverse]" : "[animation-direction:reverse]"),
              pauseOnHover && "group-hover:[animation-play-state:paused]"
            ),
            children
          },
          i
        ))
      }
    );
  }
);
Marquee.displayName = "Marquee";
var pillVariants = cva(
  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors",
  {
    variants: {
      variant: {
        default: "bg-primary/10 text-primary hover:bg-primary/20",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        success: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
        warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
        error: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
var Pill = React5.forwardRef(
  ({ className, variant, onRemove, children, ...props }, ref) => {
    return /* @__PURE__ */ jsxs(
      "span",
      {
        ref,
        className: cn(pillVariants({ variant }), className),
        ...props,
        children: [
          children,
          onRemove && /* @__PURE__ */ jsxs(
            "button",
            {
              type: "button",
              onClick: onRemove,
              className: "ml-0.5 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",
              children: [
                /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Remove" })
              ]
            }
          )
        ]
      }
    );
  }
);
Pill.displayName = "Pill";
function Spinner({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    Loader2Icon,
    {
      role: "status",
      "aria-label": "Loading",
      className: cn("size-4 animate-spin", className),
      ...props
    }
  );
}
__name(Spinner, "Spinner");
var badgeVariants = cva(
  "focus:ring-ring border-divider inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
        outline: "hover:bg-bg-secondary text-text-secondary hover:text-text-default border border-gray-500 bg-transparent shadow-xs",
        inputAdornment: "bg-gray-600 px-2 font-medium text-white",
        tags: "text-text-secondary border-divider bg-bg-quaternary rounded-lg px-2 py-1 font-normal capitalize"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
var Badge = React5.forwardRef(
  ({ className, variant, ...props }, ref) => {
    return /* @__PURE__ */ jsx("div", { ref, className: cn(badgeVariants({ variant }), className), ...props });
  }
);
Badge.displayName = "Badge";
var Tags = React5.forwardRef(
  ({ className, tags, onRemove, variant = "default", ...props }, ref) => {
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        className: cn("flex flex-wrap gap-2", className),
        ...props,
        children: tags.map((tag) => /* @__PURE__ */ jsxs(
          Badge,
          {
            variant,
            className: cn("gap-1", onRemove && "pr-1"),
            children: [
              tag.label,
              onRemove && /* @__PURE__ */ jsxs(
                "button",
                {
                  type: "button",
                  onClick: () => onRemove(tag.id),
                  className: "ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",
                  children: [
                    /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
                    /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
                      "Remove ",
                      tag.label
                    ] })
                  ]
                }
              )
            ]
          },
          tag.id
        ))
      }
    );
  }
);
Tags.displayName = "Tags";
var Ticker = React5.forwardRef(
  ({
    className,
    children,
    speed = 50,
    direction = "left",
    pauseOnHover = true,
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        className: cn("group relative overflow-hidden", className),
        ...props,
        children: /* @__PURE__ */ jsxs(
          "div",
          {
            className: cn(
              "flex w-fit animate-scroll",
              pauseOnHover && "group-hover:[animation-play-state:paused]"
            ),
            style: {
              animationDuration: `${speed}s`,
              animationDirection: direction === "right" ? "reverse" : "normal"
            },
            children: [
              children,
              children
            ]
          }
        )
      }
    );
  }
);
Ticker.displayName = "Ticker";

export { Announcement, AvatarGroup, Banner, Cursor, Marquee, Pill, Spinner, Tags, Ticker, bannerVariants, pillVariants };
