@zendir/ui 0.5.0 → 0.6.1

package/dist/react/core/inputs/Button.js

@@ -1,306 +1,283 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { memo, forwardRef, useState, useMemo, useRef, useCallback, useLayoutEffect } from "react";
-import ReactDOM from "react-dom";
 import { useTheme } from "../../theme/ThemeProvider.js";
-import { safeAccentText, classNames } from "../../utils/index.js";
-const Button = memo(forwardRef(function Button2({
-  variant = "primary",
-  size = "medium",
-  icon,
-  iconEnd,
-  loading = false,
-  fullWidth = false,
-  tooltip,
-  disabled,
-  className = "",
-  children,
-  style,
-  onMouseEnter,
-  onMouseLeave,
-  onFocus,
-  onBlur,
-  ...rest
-}, ref) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const [isHovered, setIsHovered] = useState(false);
-  const [isActive, setIsActive] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [showTooltip, setShowTooltip] = useState(false);
-  const isDisabled = disabled || loading;
-  const transparentDefault = tokens.colors.interactive.transparentDefault;
-  const transparentHover = tokens.colors.interactive.transparentHover;
-  const safeAccentBg = useMemo(() => {
-    const hex = tokens.colors.accent.primary.replace("#", "");
-    if (hex.length < 6) return tokens.colors.accent.primary;
-    const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-    const r = parseInt(hex.slice(0, 2), 16) / 255;
-    const g = parseInt(hex.slice(2, 4), 16) / 255;
-    const b = parseInt(hex.slice(4, 6), 16) / 255;
-    const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
-    if (1.05 / (L + 0.05) >= 4.5) return tokens.colors.accent.primary;
-    const factor = 0.88;
-    const dr = Math.min(255, Math.round(r * 255 * factor));
-    const dg = Math.min(255, Math.round(g * 255 * factor));
-    const db = Math.min(255, Math.round(b * 255 * factor));
-    return `#${dr.toString(16).padStart(2, "0")}${dg.toString(16).padStart(2, "0")}${db.toString(16).padStart(2, "0")}`;
-  }, [tokens.colors.accent.primary]);
-  const safeAccentFg = useMemo(() => safeAccentText(tokens.colors.accent.primary), [tokens.colors.accent.primary]);
-  const sizeConfig = {
-    small: {
-      padding: `${tokens.spacing.xxs} ${tokens.spacing.smd}`,
-      fontSize: tokens.typography.fontSize.xs,
-      height: "24px",
-      gap: tokens.spacing.xs,
-      iconSize: 13,
-      borderRadius: tokens.borderRadius.sm
-    },
-    medium: {
-      padding: `${tokens.spacing.xxs} ${tokens.spacing.md}`,
-      fontSize: tokens.typography.fontSize.sm,
-      height: "28px",
-      gap: tokens.spacing.xs,
-      iconSize: 15,
-      borderRadius: tokens.borderRadius.md
-    },
-    large: {
-      padding: `${tokens.spacing.xs} ${tokens.spacing.lg}`,
-      fontSize: tokens.typography.fontSize.base,
-      height: "34px",
-      gap: tokens.spacing.sm,
-      iconSize: 17,
-      borderRadius: tokens.borderRadius.md
-    }
-  };
-  const config = sizeConfig[size];
-  const getVariantStyles = () => {
-    const baseTransition = `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`;
-    if (isTransparentTheme && transparentDefault && transparentHover) {
-      switch (variant) {
-        case "primary":
-          return {
-            backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,
-            color: tokens.colors.text.primary,
-            border: `1px solid ${isHovered && !isDisabled ? "rgba(139, 92, 246, 0.5)" : "rgba(139, 92, 246, 0.25)"}`,
-            boxShadow: isHovered && !isDisabled ? "0 0 10px rgba(139, 92, 246, 0.15)" : "none",
-            transition: baseTransition,
-            backdropFilter: "blur(8px)",
-            WebkitBackdropFilter: "blur(8px)"
-          };
-        case "secondary":
-          return {
-            backgroundColor: isHovered && !isDisabled ? `${tokens.colors.accent.primary}15` : transparentDefault,
-            color: safeAccentFg,
-            border: `1px solid ${isHovered && !isDisabled ? `${tokens.colors.accent.primary}70` : `${tokens.colors.accent.primary}30`}`,
-            boxShadow: "none",
-            transition: baseTransition,
-            backdropFilter: "blur(8px)",
-            WebkitBackdropFilter: "blur(8px)"
-          };
-        case "borderless":
-          return {
-            backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,
-            color: safeAccentFg,
-            border: "none",
-            boxShadow: "none",
-            transition: baseTransition,
-            backdropFilter: "blur(6px)",
-            WebkitBackdropFilter: "blur(6px)"
-          };
-      }
-    }
-    switch (variant) {
-      case "primary":
-        return {
-          backgroundColor: isHovered && !isDisabled ? tokens.colors.interactive.hover : safeAccentBg,
-          color: "#ffffff",
-          border: "none",
-          boxShadow: isHovered && !isDisabled ? `0 2px 8px -2px ${tokens.colors.accent.primary}35` : "none",
-          transition: baseTransition
-        };
-      case "secondary":
-        return {
-          backgroundColor: isHovered && !isDisabled ? `${tokens.colors.accent.primary}12` : "transparent",
-          color: isHovered && !isDisabled ? safeAccentFg : safeAccentFg,
-          border: `${tokens.borders.width.medium} solid ${isHovered && !isDisabled ? tokens.colors.accent.primary : `${tokens.colors.accent.primary}80`}`,
-          boxShadow: "none",
-          transition: baseTransition
-        };
-      case "borderless":
-        return {
-          backgroundColor: isHovered && !isDisabled ? `${tokens.colors.accent.primary}10` : "transparent",
-          color: safeAccentFg,
-          border: `${tokens.borders.width.medium} solid transparent`,
-          boxShadow: "none",
-          transition: baseTransition
-        };
-    }
-  };
-  const focusStyles = isFocused ? {
-    outline: "none",
-    boxShadow: tokens.borders.focusRing.button
-  } : {};
-  const activeStyles = isActive && !isDisabled ? {
-    filter: "brightness(0.85)",
-    transform: "scale(0.98)",
-    boxShadow: "none"
-  } : {};
-  const baseStyle = {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: config.gap,
-    padding: config.padding,
-    height: config.height,
-    fontSize: config.fontSize,
-    fontWeight: 400,
-    fontFamily: tokens.typography.fontFamily.primary,
-    letterSpacing: "0.02em",
-    borderRadius: config.borderRadius,
-    cursor: isDisabled ? "not-allowed" : "pointer",
-    opacity: isDisabled ? 0.5 : 1,
-    outline: "none",
-    textDecoration: "none",
-    whiteSpace: "nowrap",
-    userSelect: "none",
-    width: fullWidth ? "100%" : "auto",
-    position: "relative",
-    ...getVariantStyles(),
-    ...focusStyles,
-    ...activeStyles,
-    ...style
-  };
-  const spinner = /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: config.iconSize,
-      height: config.iconSize,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      style: {
-        animation: "zendir-spin 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            strokeLinecap: "round",
-            strokeDasharray: "31.4 31.4",
-            strokeDashoffset: "10",
-            opacity: "0.9"
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` })
-      ]
-    }
-  );
-  const internalRef = useRef(null);
-  const tooltipNodeRef = useRef(null);
-  const [tooltipPos, setTooltipPos] = useState(null);
-  const mergedRef = useCallback((node) => {
-    internalRef.current = node;
-    if (typeof ref === "function") ref(node);
-    else if (ref) ref.current = node;
-  }, [ref]);
-  useLayoutEffect(() => {
-    if (!showTooltip || !tooltip || !internalRef.current) {
-      setTooltipPos(null);
-      return;
-    }
-    const btn = internalRef.current.getBoundingClientRect();
-    const gap = 8;
-    let top = btn.top - gap;
-    let left = btn.left + btn.width / 2;
-    if (tooltipNodeRef.current) {
-      const tt = tooltipNodeRef.current.getBoundingClientRect();
-      top = btn.top - tt.height - gap;
-      left = btn.left + (btn.width - tt.width) / 2;
-      if (left < 8) left = 8;
-      if (left + tt.width > window.innerWidth - 8) left = window.innerWidth - tt.width - 8;
-      if (top < 8) top = btn.bottom + gap;
-    }
-    setTooltipPos({ top, left });
-  }, [showTooltip, tooltip]);
-  const tooltipPortal = tooltip && showTooltip && ReactDOM.createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: tooltipNodeRef,
-        role: "tooltip",
-        style: {
-          position: "fixed",
-          top: tooltipPos ? tooltipPos.top : -9999,
-          left: tooltipPos ? tooltipPos.left : -9999,
-          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
-          fontSize: "0.75rem",
-          fontWeight: 500,
-          color: tokens.colors.text.primary,
-          backgroundColor: tokens.colors.background.elevated,
-          border: tokens.borders.divider,
-          borderRadius: tokens.borderRadius.md,
-          boxShadow: tokens.shadows.md,
-          whiteSpace: "nowrap",
-          zIndex: 2147483100,
-          pointerEvents: "none",
-          opacity: tooltipPos ? 1 : 0,
-          animation: tooltipPos ? `zendir-btn-tip ${tokens.animation.duration.fast}ms ${tokens.animation.easing.default} both` : "none"
-        },
-        children: [
-          tooltip,
-          /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-btn-tip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }` })
-        ]
-      }
-    ),
-    document.body
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref: mergedRef,
-        type: "button",
-        disabled: isDisabled,
-        className: classNames("zendir-button", `zendir-button--${variant}`, `zendir-button--${size}`, className),
-        style: baseStyle,
-        title: tooltip && !showTooltip ? tooltip : void 0,
-        onMouseDown: () => setIsActive(true),
-        onMouseUp: () => setIsActive(false),
-        onMouseEnter: (e) => {
-          setIsHovered(true);
-          setShowTooltip(true);
-          onMouseEnter == null ? void 0 : onMouseEnter(e);
-        },
-        onMouseLeave: (e) => {
-          setIsHovered(false);
-          setIsActive(false);
-          setShowTooltip(false);
-          onMouseLeave == null ? void 0 : onMouseLeave(e);
-        },
-        onFocus: (e) => {
-          setIsFocused(true);
-          onFocus == null ? void 0 : onFocus(e);
-        },
-        onBlur: (e) => {
-          setIsFocused(false);
-          onBlur == null ? void 0 : onBlur(e);
-        },
-        ...rest,
-        children: [
-          loading ? spinner : icon,
-          children && /* @__PURE__ */ jsx("span", { children }),
-          iconEnd && !loading && iconEnd
-        ]
-      }
-    ),
-    tooltipPortal
-  ] });
+import { classNames, safeAccentText } from "../../utils/index.js";
+import { forwardRef, memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import ReactDOM from "react-dom";
+//#region src/react/core/inputs/Button.tsx
+/**
+* @zendir/ui - Button Component
+*
+* Enterprise-grade button following Astro UX Design System with Zendir purple accents.
+*
+* Astro UX Compliance:
+* - Three visual variants: primary, secondary, borderless
+* - Size variants: small, medium, large
+* - Sentence case capitalization
+* - Focus ring for accessibility (WCAG 2.1 AA)
+* - Right-align in button groups (primary on right)
+*
+* Zendir Enhancements:
+* - Purple accent colors
+* - Smooth micro-interactions
+* - Subtle glow effects
+* - Modern glassmorphism hover states
+*
+* @example
+* ```tsx
+* <Button>Primary Action</Button>
+* <Button variant="secondary">Cancel</Button>
+* <Button variant="borderless" icon={<Icon name="settings" />}>Settings</Button>
+* <Button loading>Saving...</Button>
+* ```
+*/
+var Button = memo(forwardRef(function Button({ variant = "primary", size = "medium", icon, iconEnd, loading = false, fullWidth = false, tooltip, disabled, className = "", children, style, onMouseEnter, onMouseLeave, onFocus, onBlur, ...rest }, ref) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const [isHovered, setIsHovered] = useState(false);
+	const [isActive, setIsActive] = useState(false);
+	const [isFocused, setIsFocused] = useState(false);
+	const [showTooltip, setShowTooltip] = useState(false);
+	const isDisabled = disabled || loading;
+	const transparentDefault = tokens.colors.interactive.transparentDefault;
+	const transparentHover = tokens.colors.interactive.transparentHover;
+	const safeAccentBg = useMemo(() => {
+		const hex = tokens.colors.accent.primary.replace("#", "");
+		if (hex.length < 6) return tokens.colors.accent.primary;
+		const toLinear = (c) => c <= .03928 ? c / 12.92 : Math.pow((c + .055) / 1.055, 2.4);
+		const r = parseInt(hex.slice(0, 2), 16) / 255;
+		const g = parseInt(hex.slice(2, 4), 16) / 255;
+		const b = parseInt(hex.slice(4, 6), 16) / 255;
+		if (1.05 / (.2126 * toLinear(r) + .7152 * toLinear(g) + .0722 * toLinear(b) + .05) >= 4.5) return tokens.colors.accent.primary;
+		const factor = .88;
+		const dr = Math.min(255, Math.round(r * 255 * factor));
+		const dg = Math.min(255, Math.round(g * 255 * factor));
+		const db = Math.min(255, Math.round(b * 255 * factor));
+		return `#${dr.toString(16).padStart(2, "0")}${dg.toString(16).padStart(2, "0")}${db.toString(16).padStart(2, "0")}`;
+	}, [tokens.colors.accent.primary]);
+	const safeAccentFg = useMemo(() => safeAccentText(tokens.colors.accent.primary), [tokens.colors.accent.primary]);
+	const config = {
+		small: {
+			padding: `${tokens.spacing.xxs} ${tokens.spacing.smd}`,
+			fontSize: tokens.typography.fontSize.xs,
+			height: "24px",
+			gap: tokens.spacing.xs,
+			iconSize: 13,
+			borderRadius: tokens.borderRadius.sm
+		},
+		medium: {
+			padding: `${tokens.spacing.xxs} ${tokens.spacing.md}`,
+			fontSize: tokens.typography.fontSize.sm,
+			height: "28px",
+			gap: tokens.spacing.xs,
+			iconSize: 15,
+			borderRadius: tokens.borderRadius.md
+		},
+		large: {
+			padding: `${tokens.spacing.xs} ${tokens.spacing.lg}`,
+			fontSize: tokens.typography.fontSize.base,
+			height: "34px",
+			gap: tokens.spacing.sm,
+			iconSize: 17,
+			borderRadius: tokens.borderRadius.md
+		}
+	}[size];
+	const getVariantStyles = () => {
+		const baseTransition = `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`;
+		if (isTransparentTheme && transparentDefault && transparentHover) switch (variant) {
+			case "primary": return {
+				backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,
+				color: tokens.colors.text.primary,
+				border: `1px solid ${isHovered && !isDisabled ? `${tokens.colors.accent.primary}80` : `${tokens.colors.accent.primary}40`}`,
+				boxShadow: isHovered && !isDisabled ? `0 0 10px ${tokens.colors.accent.primary}26` : "none",
+				transition: baseTransition,
+				backdropFilter: "blur(8px)",
+				WebkitBackdropFilter: "blur(8px)"
+			};
+			case "secondary": return {
+				backgroundColor: isHovered && !isDisabled ? `${tokens.colors.accent.primary}15` : transparentDefault,
+				color: safeAccentFg,
+				border: `1px solid ${isHovered && !isDisabled ? `${tokens.colors.accent.primary}70` : `${tokens.colors.accent.primary}30`}`,
+				boxShadow: "none",
+				transition: baseTransition,
+				backdropFilter: "blur(8px)",
+				WebkitBackdropFilter: "blur(8px)"
+			};
+			case "borderless": return {
+				backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,
+				color: safeAccentFg,
+				border: "none",
+				boxShadow: "none",
+				transition: baseTransition,
+				backdropFilter: "blur(6px)",
+				WebkitBackdropFilter: "blur(6px)"
+			};
+		}
+		switch (variant) {
+			case "primary": return {
+				backgroundColor: isHovered && !isDisabled ? tokens.colors.interactive.hover : safeAccentBg,
+				color: "#ffffff",
+				border: "none",
+				boxShadow: isHovered && !isDisabled ? `0 2px 8px -2px ${tokens.colors.accent.primary}35` : "none",
+				transition: baseTransition
+			};
+			case "secondary": return {
+				backgroundColor: isHovered && !isDisabled ? `${tokens.colors.accent.primary}12` : "transparent",
+				color: isHovered && !isDisabled ? safeAccentFg : safeAccentFg,
+				border: `${tokens.borders.width.medium} solid ${isHovered && !isDisabled ? tokens.colors.accent.primary : `${tokens.colors.accent.primary}80`}`,
+				boxShadow: "none",
+				transition: baseTransition
+			};
+			case "borderless": return {
+				backgroundColor: isHovered && !isDisabled ? `${tokens.colors.accent.primary}10` : "transparent",
+				color: safeAccentFg,
+				border: `${tokens.borders.width.medium} solid transparent`,
+				boxShadow: "none",
+				transition: baseTransition
+			};
+		}
+	};
+	const focusStyles = isFocused ? {
+		outline: "none",
+		boxShadow: tokens.borders.focusRing.button
+	} : {};
+	const activeStyles = isActive && !isDisabled ? {
+		filter: "brightness(0.85)",
+		transform: "scale(0.98)",
+		boxShadow: "none"
+	} : {};
+	const baseStyle = {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: config.gap,
+		padding: config.padding,
+		height: config.height,
+		fontSize: config.fontSize,
+		fontWeight: 400,
+		fontFamily: tokens.typography.fontFamily.primary,
+		letterSpacing: "0.02em",
+		borderRadius: config.borderRadius,
+		cursor: isDisabled ? "not-allowed" : "pointer",
+		opacity: isDisabled ? .5 : 1,
+		outline: "none",
+		textDecoration: "none",
+		whiteSpace: "nowrap",
+		userSelect: "none",
+		width: fullWidth ? "100%" : "auto",
+		position: "relative",
+		...getVariantStyles(),
+		...focusStyles,
+		...activeStyles,
+		...style
+	};
+	const spinner = /* @__PURE__ */ jsxs("svg", {
+		width: config.iconSize,
+		height: config.iconSize,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		style: { animation: "zendir-spin 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite" },
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "2.5",
+			strokeLinecap: "round",
+			strokeDasharray: "31.4 31.4",
+			strokeDashoffset: "10",
+			opacity: "0.9"
+		}), /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` })]
+	});
+	const internalRef = useRef(null);
+	const tooltipNodeRef = useRef(null);
+	const [tooltipPos, setTooltipPos] = useState(null);
+	const mergedRef = useCallback((node) => {
+		internalRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	useLayoutEffect(() => {
+		if (!showTooltip || !tooltip || !internalRef.current) {
+			setTooltipPos(null);
+			return;
+		}
+		const btn = internalRef.current.getBoundingClientRect();
+		const gap = 8;
+		let top = btn.top - gap;
+		let left = btn.left + btn.width / 2;
+		if (tooltipNodeRef.current) {
+			const tt = tooltipNodeRef.current.getBoundingClientRect();
+			top = btn.top - tt.height - gap;
+			left = btn.left + (btn.width - tt.width) / 2;
+			if (left < 8) left = 8;
+			if (left + tt.width > window.innerWidth - 8) left = window.innerWidth - tt.width - 8;
+			if (top < 8) top = btn.bottom + gap;
+		}
+		setTooltipPos({
+			top,
+			left
+		});
+	}, [showTooltip, tooltip]);
+	const tooltipPortal = tooltip && showTooltip && ReactDOM.createPortal(/* @__PURE__ */ jsxs("div", {
+		ref: tooltipNodeRef,
+		role: "tooltip",
+		style: {
+			position: "fixed",
+			top: tooltipPos ? tooltipPos.top : -9999,
+			left: tooltipPos ? tooltipPos.left : -9999,
+			padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+			fontSize: "0.75rem",
+			fontWeight: 500,
+			color: tokens.colors.text.primary,
+			backgroundColor: tokens.colors.background.elevated,
+			border: tokens.borders.divider,
+			borderRadius: tokens.borderRadius.md,
+			boxShadow: tokens.shadows.md,
+			whiteSpace: "nowrap",
+			zIndex: 2147483100,
+			pointerEvents: "none",
+			opacity: tooltipPos ? 1 : 0,
+			animation: tooltipPos ? `zendir-btn-tip ${tokens.animation.duration.fast}ms ${tokens.animation.easing.default} both` : "none"
+		},
+		children: [tooltip, /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-btn-tip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }` })]
+	}), document.body);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+		ref: mergedRef,
+		type: "button",
+		disabled: isDisabled,
+		className: classNames("zendir-button", `zendir-button--${variant}`, `zendir-button--${size}`, className),
+		style: baseStyle,
+		title: tooltip && !showTooltip ? tooltip : void 0,
+		onMouseDown: () => setIsActive(true),
+		onMouseUp: () => setIsActive(false),
+		onMouseEnter: (e) => {
+			setIsHovered(true);
+			setShowTooltip(true);
+			onMouseEnter?.(e);
+		},
+		onMouseLeave: (e) => {
+			setIsHovered(false);
+			setIsActive(false);
+			setShowTooltip(false);
+			onMouseLeave?.(e);
+		},
+		onFocus: (e) => {
+			setIsFocused(true);
+			onFocus?.(e);
+		},
+		onBlur: (e) => {
+			setIsFocused(false);
+			onBlur?.(e);
+		},
+		...rest,
+		children: [
+			loading ? spinner : icon,
+			children && /* @__PURE__ */ jsx("span", { children }),
+			iconEnd && !loading && iconEnd
+		]
+	}), tooltipPortal] });
 }));
-export {
-  Button
-};
-//# sourceMappingURL=Button.js.map
+//#endregion
+export { Button, Button as default };
+
+//# sourceMappingURL=Button.js.map