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;
}({});
/**
* Icon positioning within the button
*/
let ButtonIconPosition = /* @__PURE__ */ function(ButtonIconPosition$1) {
	ButtonIconPosition$1["LEFT"] = "left";
	ButtonIconPosition$1["RIGHT"] = "right";
	return ButtonIconPosition$1;
}({});
const buttonIconVariants = cva("", {
	variants: {
		size: {
			[`${ButtonSize.SM}`]: "-translate-y-1/2 absolute top-1/2 size-3",
			[`${ButtonSize.MD}`]: "-translate-y-1/2 absolute top-1/2 size-4",
			[`${ButtonSize.LG}`]: "-translate-y-1/2 absolute top-1/2 size-5",
			[`${ButtonSize.XL}`]: "-translate-y-1/2 absolute top-1/2 size-6",
			[`${ButtonSize.ICON_SM}`]: "size-3",
			[`${ButtonSize.ICON_MD}`]: "size-4",
			[`${ButtonSize.ICON_LG}`]: "size-5",
			[`${ButtonSize.ICON_XL}`]: "size-6"
		},
		position: {
			[`${ButtonIconPosition.LEFT}`]: "left-3",
			[`${ButtonIconPosition.RIGHT}`]: "right-3"
		}
	},
	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["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["TEXT_INVERSE"] = "text-inverse";
	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 cursor-pointer truncate whitespace-nowrap font-medium transition-all duration-200 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}`]: "text-primary *:text-text-light focus:ring-primary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-primary-500/50",
			[`${ButtonColor.SECONDARY}`]: "text-secondary *:text-text-light focus:ring-secondary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-secondary-500/50",
			[`${ButtonColor.DESTRUCTIVE}`]: "text-destructive *:text-text-light focus:ring-destructive-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-destructive-500/50",
			[`${ButtonColor.NEUTRAL}`]: "text-neutral *:text-text-light focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
			[`${ButtonColor.LIGHT}`]: "text-white *:text-text-light focus:ring-white/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-white/50",
			[`${ButtonColor.DARK}`]: "text-neutral-800 *:text-text-light focus:ring-neutral-800/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-800/50",
			[`${ButtonColor.TEXT}`]: "text-text *:text-text-opposite focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
			[`${ButtonColor.TEXT_INVERSE}`]: "text-text-opposite *:text-text focus:ring-neutral-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-neutral-500/50",
			[`${ButtonColor.ERROR}`]: "text-error *:text-text-light focus:ring-error/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-error/50",
			[`${ButtonColor.SUCCESS}`]: "text-success *:text-text-light focus:ring-success/50 aria-[selected=true]:ring-6 aria-[selected=true]:ring-success/50",
			[`${ButtonColor.CUSTOM}`]: "focus:ring-primary-500 aria-[selected=true]:ring-6 aria-[selected=true]:ring-primary-500/50"
		},
		variant: {
			[`${ButtonVariant.DEFAULT}`]: "rounded-lg bg-current hover:bg-current/90",
			[`${ButtonVariant.NONE}`]: "border-none bg-current/0 text-inherit hover:bg-current/0",
			[`${ButtonVariant.OUTLINE}`]: "*:!text-current rounded-lg border-[1.5px] border-current bg-current/0 hover:bg-current/30",
			[`${ButtonVariant.LINK}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline",
			[`${ButtonVariant.INVISIBLE_LINK}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent",
			[`${ButtonVariant.HOVERABLE}`]: "*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5",
			[`${ButtonVariant.INPUT}`]: [
				"*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-input-text text-sm shadow-none outline-0 transition-all",
				"border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
				"aria-[invalid=true]:border-error",
				"disabled:opacity-50"
			]
		},
		textAlign: {
			[`${ButtonTextAlign.LEFT}`]: "text-left",
			[`${ButtonTextAlign.CENTER}`]: "text-center",
			[`${ButtonTextAlign.RIGHT}`]: "text-right"
		},
		isFullWidth: {
			true: "w-full",
			false: ""
		},
		hasIconLeft: {
			true: "px-12",
			false: ""
		},
		hasIconRight: {
			true: "pr-8",
			false: ""
		}
	},
	defaultVariants: {
		variant: ButtonVariant.DEFAULT,
		size: ButtonSize.MD,
		color: ButtonColor.CUSTOM,
		textAlign: ButtonTextAlign.CENTER,
		isFullWidth: false,
		hasIconRight: false,
		hasIconLeft: 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 = false, isSelected = false, isFullWidth = false, 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,
		"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
	};
	return /* @__PURE__ */ jsxs("button", {
		disabled: isLoading || disabled,
		role: isLink ? "link" : "button",
		type,
		className: buttonVariants({
			variant,
			size,
			color,
			isFullWidth,
			textAlign: textAlign ?? (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),
			hasIconLeft: Boolean(typeof children !== "undefined" && (typeof Icon !== "undefined" || isLoading)),
			hasIconRight: Boolean(typeof children !== "undefined" && typeof IconRight !== "undefined"),
			className
		}),
		...accessibilityProps,
		...props,
		children: [
			Icon && !isLoading && /* @__PURE__ */ jsx(Icon, {
				className: buttonIconVariants({
					size,
					className: iconClassName,
					position: ButtonIconPosition.LEFT
				}),
				"aria-hidden": "true"
			}),
			/* @__PURE__ */ jsx(Loader, {
				className: buttonIconVariants({
					size,
					className: iconClassName,
					position: ButtonIconPosition.LEFT
				}),
				isLoading,
				"aria-hidden": "true",
				"data-testid": "loader"
			}),
			children && /* @__PURE__ */ jsx("span", { children }),
			!children && isIconOnly && /* @__PURE__ */ jsx("span", {
				className: "sr-only",
				children: label
			}),
			IconRight && /* @__PURE__ */ jsx(IconRight, {
				className: buttonIconVariants({
					size,
					className: iconClassName,
					position: ButtonIconPosition.RIGHT
				}),
				"aria-hidden": "true"
			})
		]
	});
};

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