import { cn } from "../../utils/cn.mjs";
import { ContainerRoundedSize } from "../Container/index.mjs";
import { Loader } from "../Loader/index.mjs";
import { cva } from "class-variance-authority";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Button/Button.tsx
/**
* Button size variants for different use cases
*/
let ButtonSize = /* @__PURE__ */ function(ButtonSize$1) {
	ButtonSize$1["SM"] = "sm";
	ButtonSize$1["MD"] = "md";
	ButtonSize$1["LG"] = "lg";
	ButtonSize$1["XL"] = "xl";
	ButtonSize$1["ICON_SM"] = "icon-sm";
	ButtonSize$1["ICON_MD"] = "icon-md";
	ButtonSize$1["ICON_LG"] = "icon-lg";
	ButtonSize$1["ICON_XL"] = "icon-xl";
	return ButtonSize$1;
}({});
const buttonIconVariants = cva("flex-none shrink-0", {
	variants: { size: {
		[`${ButtonSize.SM}`]: "size-3",
		[`${ButtonSize.MD}`]: "size-4",
		[`${ButtonSize.LG}`]: "size-5",
		[`${ButtonSize.XL}`]: "size-6",
		[`${ButtonSize.ICON_SM}`]: "size-3",
		[`${ButtonSize.ICON_MD}`]: "size-4",
		[`${ButtonSize.ICON_LG}`]: "size-4",
		[`${ButtonSize.ICON_XL}`]: "size-5"
	} },
	defaultVariants: { size: ButtonSize.MD }
});
/**
* Button visual style variants
*/
let ButtonVariant = /* @__PURE__ */ function(ButtonVariant$1) {
	ButtonVariant$1["DEFAULT"] = "default";
	ButtonVariant$1["NONE"] = "none";
	ButtonVariant$1["OUTLINE"] = "outline";
	ButtonVariant$1["LINK"] = "link";
	ButtonVariant$1["INVISIBLE_LINK"] = "invisible-link";
	ButtonVariant$1["HOVERABLE"] = "hoverable";
	ButtonVariant$1["FADE"] = "fade";
	ButtonVariant$1["INPUT"] = "input";
	return ButtonVariant$1;
}({});
/**
* Button color themes that work with the design system
*/
let ButtonColor = /* @__PURE__ */ function(ButtonColor$1) {
	ButtonColor$1["PRIMARY"] = "primary";
	ButtonColor$1["SECONDARY"] = "secondary";
	ButtonColor$1["DESTRUCTIVE"] = "destructive";
	ButtonColor$1["NEUTRAL"] = "neutral";
	ButtonColor$1["LIGHT"] = "light";
	ButtonColor$1["DARK"] = "dark";
	ButtonColor$1["TEXT"] = "text";
	ButtonColor$1["CARD"] = "card";
	ButtonColor$1["TEXT_INVERSE"] = "text-inverse";
	ButtonColor$1["CURRENT"] = "current";
	ButtonColor$1["ERROR"] = "error";
	ButtonColor$1["SUCCESS"] = "success";
	ButtonColor$1["CUSTOM"] = "custom";
	return ButtonColor$1;
}({});
/**
* Text alignment options for button content
*/
let ButtonTextAlign = /* @__PURE__ */ function(ButtonTextAlign$1) {
	ButtonTextAlign$1["LEFT"] = "left";
	ButtonTextAlign$1["CENTER"] = "center";
	ButtonTextAlign$1["RIGHT"] = "right";
	return ButtonTextAlign$1;
}({});
/**
* Enhanced button variants with improved accessibility and focus states
*/
const buttonVariants = cva("relative inline-flex cursor-pointer items-center justify-center font-medium ring-0 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", {
	variants: {
		size: {
			[`${ButtonSize.SM}`]: "min-h-7 px-3 text-xs max-md:py-1",
			[`${ButtonSize.MD}`]: "min-h-8 px-6 text-sm max-md:py-2",
			[`${ButtonSize.LG}`]: "min-h-10 px-8 text-lg max-md:py-3",
			[`${ButtonSize.XL}`]: "min-h-11 px-10 text-xl max-md:py-4",
			[`${ButtonSize.ICON_SM}`]: "p-1.5",
			[`${ButtonSize.ICON_MD}`]: "p-1.5",
			[`${ButtonSize.ICON_LG}`]: "p-2",
			[`${ButtonSize.ICON_XL}`]: "p-3"
		},
		color: {
			[`${ButtonColor.PRIMARY}`]: "hover-primary-500/20 text-primary ring-primary-500/20 *:text-text-light",
			[`${ButtonColor.SECONDARY}`]: "hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-text-light",
			[`${ButtonColor.DESTRUCTIVE}`]: "hover-destructive-500/20 text-destructive ring-destructive-500/20 *:text-text-light",
			[`${ButtonColor.NEUTRAL}`]: "text-neutral ring-neutral-500/5 *:text-text-light",
			[`${ButtonColor.CARD}`]: "hover-card-500/20 text-card ring-card-500/20 *:text-text-light",
			[`${ButtonColor.LIGHT}`]: "hover-white-500/20 text-white ring-white/20 *:text-text-light",
			[`${ButtonColor.DARK}`]: "text-neutral-800 ring-text-light/50 *:text-text-light",
			[`${ButtonColor.TEXT}`]: "text-text ring-text/20 *:text-text-opposite",
			[`${ButtonColor.CURRENT}`]: "hover-current-500/10 text-current ring-current/10 *:text-text-light",
			[`${ButtonColor.TEXT_INVERSE}`]: "text-text-opposite ring-text-opposite/20 *:text-text",
			[`${ButtonColor.ERROR}`]: "hover-error-500/20 text-error ring-error/20 *:text-text-light",
			[`${ButtonColor.SUCCESS}`]: "hover-success-500/20 text-success ring-success/20 *:text-text-light",
			[`${ButtonColor.CUSTOM}`]: ""
		},
		roundedSize: {
			[`${ContainerRoundedSize.NONE}`]: "rounded-none",
			[`${ContainerRoundedSize.SM}`]: "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
			[`${ContainerRoundedSize.MD}`]: "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl",
			[`${ContainerRoundedSize.LG}`]: "rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
			[`${ContainerRoundedSize.XL}`]: "rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl",
			[`${ContainerRoundedSize["2xl"]}`]: "rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]",
			[`${ContainerRoundedSize["3xl"]}`]: "rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]",
			[`${ContainerRoundedSize["4xl"]}`]: "rounded-[3rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[4rem]",
			[`${ContainerRoundedSize["5xl"]}`]: "rounded-[4rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[5rem]",
			[`${ContainerRoundedSize.FULL}`]: "rounded-full"
		},
		variant: {
			[`${ButtonVariant.DEFAULT}`]: [
				"bg-current",
				"hover:bg-current/90",
				"hover:ring-5",
				"aria-selected:ring-5"
			],
			[`${ButtonVariant.OUTLINE}`]: [
				"rounded-2xl border-[1.3px] border-current bg-current/0 *:text-current!",
				"hover:bg-current/20 focus-visible:bg-current/20",
				"hover:ring-5 focus-visible:ring-5",
				"aria-selected:ring-5"
			],
			[`${ButtonVariant.NONE}`]: "border-none bg-current/0 text-inherit hover:bg-current/0",
			[`${ButtonVariant.LINK}`]: "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent hover:underline",
			[`${ButtonVariant.INVISIBLE_LINK}`]: "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent",
			[`${ButtonVariant.HOVERABLE}`]: "rounded-lg border-none bg-current/0 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5",
			[`${ButtonVariant.FADE}`]: [
				"rounded-lg border-none bg-current/10 ring-current/5 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5",
				"hover:ring-5 focus-visible:ring-5",
				"aria-selected:ring-5"
			],
			[`${ButtonVariant.INPUT}`]: [
				"text-text",
				"w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl",
				"transition-shadow duration-100 md:text-sm",
				"ring-0",
				"disabled:opacity-50",
				"text-text",
				"bg-neutral-50 dark:bg-neutral-950",
				"ring-neutral-100 dark:ring-neutral-700",
				"hover:ring-3",
				"aria-selected:ring-4",
				"focus-visible:ring-3",
				"disabled:ring-0",
				"focus-visible:outline-none",
				"[box-shadow:none] focus:[box-shadow:none]",
				"aria-invalid:border-error"
			]
		},
		textAlign: {
			[`${ButtonTextAlign.LEFT}`]: "justify-start text-left",
			[`${ButtonTextAlign.CENTER}`]: "justify-center text-center",
			[`${ButtonTextAlign.RIGHT}`]: "justify-end text-right"
		},
		isFullWidth: {
			true: "w-full",
			false: ""
		}
	},
	defaultVariants: {
		variant: `${ButtonVariant.DEFAULT}`,
		size: `${ButtonSize.MD}`,
		color: `${ButtonColor.CUSTOM}`,
		roundedSize: `${ContainerRoundedSize.MD}`,
		textAlign: `${ButtonTextAlign.CENTER}`,
		isFullWidth: false
	}
});
/**
* Button Component - A comprehensive, accessible button component
*
* Features:
* - Full accessibility compliance with ARIA attributes
* - Multiple variants and sizes for different use cases
* - Icon support (left and right positioning)
* - Loading states with spinner
* - Keyboard navigation support
* - Focus management with visible indicators
* - Responsive design adaptations
*
* @example
* ```tsx
* // Basic button
* <Button label="Click me">Click me</Button>
*
* // Button with icon and loading state
* <Button
*   label="Save document"
*   Icon={SaveIcon}
*   isLoading={saving}
*   disabled={!hasChanges}
* >
*   Save
* </Button>
*
* // Destructive action button
* <Button
*   variant={`${ButtonVariant.OUTLINE}`}
*   color={ButtonColor.DESTRUCTIVE}
*   label="Delete item permanently"
*   aria-describedby="delete-warning"
* >
*   Delete
* </Button>
* ```
*/
const Button = ({ variant, size, color, children, Icon, IconRight, iconClassName, isLoading = false, isActive, isSelected, isFullWidth, roundedSize, textAlign, disabled, label, className, type = "button", "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-pressed": ariaPressed, ...props }) => {
	const isLink = variant === `${ButtonVariant.LINK}` || variant === `${ButtonVariant.INVISIBLE_LINK}`;
	const isIconOnly = !children && (Icon || IconRight);
	const accessibilityProps = {
		"aria-label": isIconOnly ? label ?? void 0 : void 0,
		"aria-labelledby": !isIconOnly ? void 0 : void 0,
		"aria-describedby": ariaDescribedBy,
		"aria-expanded": ariaExpanded,
		"aria-haspopup": ariaHasPopup,
		"aria-pressed": isActive !== void 0 ? isActive : ariaPressed,
		"aria-busy": isLoading,
		"aria-current": isActive ? "page" : void 0,
		"aria-disabled": disabled || isLoading,
		"aria-selected": isSelected
	};
	const isSquareButton = size === ButtonSize.ICON_SM || size === ButtonSize.ICON_MD || size === ButtonSize.ICON_LG || size === ButtonSize.ICON_XL;
	return /* @__PURE__ */ jsxs("button", {
		disabled: isLoading || disabled,
		role: isLink ? "link" : "button",
		type,
		className: buttonVariants({
			variant,
			size,
			color,
			isFullWidth,
			roundedSize,
			textAlign: textAlign ?? (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),
			className
		}),
		...accessibilityProps,
		...props,
		children: [
			Icon && !isLoading && /* @__PURE__ */ jsx(Icon, {
				className: buttonIconVariants({
					size,
					className: cn(!isSquareButton && "mr-3", iconClassName)
				}),
				"aria-hidden": "true"
			}),
			/* @__PURE__ */ jsx("div", {
				className: cn("flex items-center justify-center transition-[width] duration-300", isLoading && size === ButtonSize.SM && "w-3", isLoading && size === ButtonSize.MD && "w-4", isLoading && size === ButtonSize.LG && "w-5", isLoading && size === ButtonSize.XL && "w-6"),
				children: /* @__PURE__ */ jsx(Loader, {
					className: buttonIconVariants({
						size,
						className: cn(!isSquareButton && "mr-3", iconClassName)
					}),
					isLoading,
					"aria-hidden": "true",
					"data-testid": "loader"
				})
			}),
			children && /* @__PURE__ */ jsx("span", {
				className: "flex-1 truncate whitespace-nowrap",
				children
			}),
			!children && isIconOnly && /* @__PURE__ */ jsx("span", {
				className: "sr-only",
				children: label
			}),
			IconRight && /* @__PURE__ */ jsx(IconRight, {
				className: buttonIconVariants({
					size,
					className: cn(!isSquareButton && "ml-3", iconClassName)
				}),
				"aria-hidden": "true"
			})
		]
	});
};

//#endregion
export { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, buttonVariants };
//# sourceMappingURL=Button.mjs.map