@versini/ui-button 11.3.4 → 11.3.5

package/dist/188.js

@@ -0,0 +1,469 @@
+/*!
+  @versini/ui-button v11.3.5
+  © 2026 gizmette.com
+*/
+
+import clsx from "clsx";
+
+
+
+const BUTTON_CLASSNAME = "av-button";
+
+
+
+const TYPE_ICON = "icon";
+const TYPE_BUTTON = "button";
+const TYPE_LINK = "link";
+// Text copy classes
+const TEXT_COPY_DARK = "text-copy-dark";
+const TEXT_COPY_LIGHT = "text-copy-light";
+const TEXT_COPY_LIGHTER = "text-copy-lighter";
+const DARK_TEXT_COPY_DARK = "dark:text-copy-dark";
+const DARK_TEXT_COPY_LIGHT = "dark:text-copy-light";
+const DARK_TEXT_COPY_LIGHTER = "dark:text-copy-lighter";
+// Hover text classes
+const HOVER_TEXT_DARK = "hover:text-copy-dark-hover";
+const HOVER_TEXT_LIGHT = "hover:text-copy-light-hover";
+const DARK_HOVER_TEXT_DARK = "dark:hover:text-copy-dark-hover";
+const DARK_HOVER_TEXT_LIGHT = "dark:hover:text-copy-light-hover";
+// Active text classes
+const ACTIVE_TEXT_LIGHT = "active:text-copy-light-active";
+const ACTIVE_TEXT_MEDIUM = "active:text-copy-medium-active";
+const ACTIVE_TEXT_LIGHTER = "active:text-copy-lighter-active";
+const DARK_ACTIVE_TEXT_LIGHT = "dark:active:text-copy-light-active";
+const DARK_ACTIVE_TEXT_MEDIUM = "dark:active:text-copy-medium-active";
+// Background classes
+const BG_ACTION_LIGHT = "bg-action-light";
+const BG_ACTION_DARK = "bg-action-dark";
+const BG_DANGER_LIGHT = "bg-action-danger-light";
+const BG_DANGER_DARK = "bg-action-danger-dark";
+// System mode compound background classes
+const BG_LIGHT_DARK_DARK = "bg-action-light dark:bg-action-dark";
+const BG_DARK_DARK_LIGHT = "bg-action-dark dark:bg-action-light";
+const BG_DANGER_DARK_DARK_LIGHT = "bg-action-danger-dark dark:bg-action-danger-light";
+const BG_DANGER_LIGHT_DARK_DARK = "bg-action-danger-light dark:bg-action-danger-dark";
+// Hover background classes
+const HOVER_BG_LIGHT = "hover:bg-action-light-hover";
+const HOVER_BG_DARK = "hover:bg-action-dark-hover";
+const HOVER_BG_DANGER_LIGHT = "hover:bg-action-danger-light-hover";
+const HOVER_BG_DANGER_DARK = "hover:bg-action-danger-dark-hover";
+// System mode compound hover background classes
+const HOVER_BG_LIGHT_DARK_DARK = "hover:bg-action-light-hover dark:hover:bg-action-dark-hover";
+const HOVER_BG_DARK_DARK_LIGHT = "hover:bg-action-dark-hover dark:hover:bg-action-light-hover";
+const HOVER_BG_DANGER_DARK_DARK_LIGHT = "hover:bg-action-danger-dark-hover dark:hover:bg-action-danger-light-hover";
+const HOVER_BG_DANGER_LIGHT_DARK_DARK = "hover:bg-action-danger-light-hover dark:hover:bg-action-danger-dark-hover";
+// Active background classes
+const ACTIVE_BG_LIGHT = "active:bg-action-light-active";
+const ACTIVE_BG_DARK = "active:bg-action-dark-active";
+const ACTIVE_BG_DANGER_LIGHT = "active:bg-action-danger-light-active";
+const ACTIVE_BG_DANGER_DARK = "active:bg-action-danger-dark-active";
+// System mode compound active background classes
+const ACTIVE_BG_LIGHT_DARK_DARK = "active:bg-action-light-active dark:active:bg-action-dark-active";
+const ACTIVE_BG_DARK_DARK_LIGHT = "active:bg-action-dark-active dark:active:bg-action-light-active";
+const ACTIVE_BG_DANGER_DARK_DARK_LIGHT = "active:bg-action-danger-dark-active dark:active:bg-action-danger-light-active";
+const ACTIVE_BG_DANGER_LIGHT_DARK_DARK = "active:bg-action-danger-light-active dark:active:bg-action-danger-dark-active";
+// Border classes
+const BORDER_MEDIUM = "border-border-medium";
+const BORDER_ACCENT = "border-border-accent";
+const BORDER_DANGER_MEDIUM = "border-border-danger-medium";
+const BORDER_DANGER_DARK = "border-border-danger-dark";
+// System mode compound border classes
+const BORDER_MEDIUM_DARK_ACCENT = "border-border-medium dark:border-border-accent";
+const BORDER_ACCENT_DARK_MEDIUM = "border-border-accent dark:border-border-medium";
+const BORDER_DANGER_DARK_DARK_MEDIUM = "border-border-danger-dark dark:border-border-danger-medium";
+const BORDER_DANGER_MEDIUM_DARK_DARK = "border-border-danger-medium dark:border-border-danger-dark";
+// Focus classes
+const FOCUS_LIGHT = "focus:outline-focus-light";
+const FOCUS_DARK = "focus:outline-focus-dark";
+// System mode compound focus classes
+const FOCUS_LIGHT_DARK_DARK = "focus:outline-focus-light dark:focus:outline-focus-dark";
+const FOCUS_DARK_DARK_LIGHT = "focus:outline-focus-dark dark:focus:outline-focus-light";
+// Common utility classes
+const NOT_PROSE = "not-prose";
+// Size classes
+const SIZE_SMALL = "max-h-8 py-0 px-2";
+const SIZE_MEDIUM = "max-h-9 h-8 px-3";
+const SIZE_LARGE = "max-h-12 py-2 px-4";
+// Font size classes
+const FONT_SMALL = "text-sm font-medium";
+const FONT_MEDIUM = "text-base font-medium";
+const FONT_LARGE = "text-lg font-medium";
+/**
+ * Helpers functions used more than once.
+ */ const isSmall = (size)=>size === "small";
+const isMedium = (size)=>size === "medium";
+const isLarge = (size)=>size === "large";
+const isPrimary = (variant)=>variant === "primary";
+const isSecondary = (variant)=>variant === "secondary";
+const isDanger = (variant)=>variant === "danger";
+const isSelected = (variant)=>variant === "selected";
+const isLight = (mode)=>mode === "light";
+const isDark = (mode)=>mode === "dark";
+const isSystem = (mode)=>mode === "system";
+const isAltSystem = (mode)=>mode === "alt-system";
+const isDarkOrAltSystem = (mode)=>isDark(mode) || isAltSystem(mode);
+const isLightOrSystem = (mode)=>isLight(mode) || isSystem(mode);
+const getButtonSizesClasses = ({ type, size, labelRight, labelLeft, align, animated })=>{
+    const labelRightOrLeft = labelRight || labelLeft;
+    switch(type){
+        case TYPE_BUTTON:
+        case TYPE_LINK:
+            return clsx({
+                [SIZE_SMALL]: isSmall(size),
+                [SIZE_MEDIUM]: isMedium(size),
+                [SIZE_LARGE]: isLarge(size)
+            });
+        case TYPE_ICON:
+            return clsx("flex items-center", {
+                "justify-center": align === "center",
+                "justify-start": align === "left",
+                "justify-end": align === "right",
+                "h-6 w-6 p-0": isSmall(size) && !animated && !labelRightOrLeft,
+                "h-6 px-1 sm:px-2": isSmall(size) && !animated && labelRightOrLeft,
+                "h-8 w-8 p-1": isMedium(size) && !animated && !labelRightOrLeft,
+                "h-8 px-3": isMedium(size) && !animated && labelRightOrLeft,
+                "h-12 w-12 p-2": isLarge(size) && !animated && !labelRightOrLeft,
+                "h-12 px-4": isLarge(size) && !animated && labelRightOrLeft,
+                "h-6 py-0": isSmall(size) && animated && !labelRightOrLeft,
+                "h-6": isSmall(size) && animated && labelRightOrLeft,
+                "h-8 py-1": isMedium(size) && animated && !labelRightOrLeft,
+                "h-8": isMedium(size) && animated && labelRightOrLeft,
+                "h-12 py-2": isLarge(size) && animated && !labelRightOrLeft,
+                "h-12": isLarge(size) && animated && labelRightOrLeft
+            });
+    }
+};
+const getButtonFontClasses = ({ type, size, labelRight, labelLeft })=>{
+    switch(type){
+        case TYPE_BUTTON:
+        case TYPE_LINK:
+            return clsx({
+                "text-center": type === TYPE_LINK,
+                [FONT_SMALL]: isSmall(size),
+                [FONT_MEDIUM]: isMedium(size),
+                [FONT_LARGE]: isLarge(size)
+            });
+        case TYPE_ICON:
+            return clsx({
+                [FONT_SMALL]: isSmall(size) && (labelRight || labelLeft),
+                [FONT_MEDIUM]: isMedium(size) && (labelRight || labelLeft),
+                [FONT_LARGE]: isLarge(size) && (labelRight || labelLeft)
+            });
+    }
+};
+const getButtonTextCopyClasses = ({ mode, noBackground, truncate, variant })=>{
+    if (noBackground) {
+        return NOT_PROSE;
+    }
+    const truncateClass = {
+        truncate: truncate
+    };
+    if (isPrimary(variant)) {
+        return clsx(NOT_PROSE, {
+            ...truncateClass,
+            [TEXT_COPY_DARK]: isLightOrSystem(mode),
+            [TEXT_COPY_LIGHT]: isDarkOrAltSystem(mode),
+            [DARK_TEXT_COPY_LIGHT]: isSystem(mode),
+            [DARK_TEXT_COPY_DARK]: isAltSystem(mode)
+        });
+    }
+    if (isSecondary(variant)) {
+        return clsx(NOT_PROSE, {
+            ...truncateClass,
+            [TEXT_COPY_LIGHT]: isLightOrSystem(mode),
+            [TEXT_COPY_DARK]: isDarkOrAltSystem(mode),
+            [DARK_TEXT_COPY_DARK]: isSystem(mode),
+            [DARK_TEXT_COPY_LIGHT]: isAltSystem(mode)
+        });
+    }
+    if (isDanger(variant)) {
+        return clsx(NOT_PROSE, {
+            ...truncateClass,
+            [TEXT_COPY_LIGHT]: isDarkOrAltSystem(mode),
+            [TEXT_COPY_LIGHTER]: mode === "light" || mode === "alt-system",
+            [DARK_TEXT_COPY_LIGHTER]: isSystem(mode),
+            [DARK_TEXT_COPY_LIGHT]: isAltSystem(mode)
+        });
+    }
+    /* v8 ignore start - selected variant edge case */ if (isSelected(variant)) {
+        return clsx(NOT_PROSE, TEXT_COPY_LIGHTER, truncateClass);
+    }
+/* v8 ignore stop */ };
+const getButtonBackgroundClasses = ({ mode, noBackground, variant })=>{
+    if (noBackground) {
+        return;
+    }
+    if (isPrimary(variant)) {
+        return clsx({
+            [BG_ACTION_LIGHT]: isLight(mode),
+            [BG_ACTION_DARK]: isDark(mode),
+            [BG_LIGHT_DARK_DARK]: isSystem(mode),
+            [BG_DARK_DARK_LIGHT]: isAltSystem(mode)
+        });
+    }
+    if (isSecondary(variant)) {
+        return clsx({
+            [BG_ACTION_DARK]: isLight(mode),
+            [BG_ACTION_LIGHT]: isDark(mode),
+            [BG_DARK_DARK_LIGHT]: isSystem(mode),
+            [BG_LIGHT_DARK_DARK]: isAltSystem(mode)
+        });
+    }
+    if (isDanger(variant)) {
+        return clsx({
+            [BG_DANGER_DARK]: isDark(mode),
+            [BG_DANGER_LIGHT]: isLight(mode),
+            [BG_DANGER_DARK_DARK_LIGHT]: isSystem(mode),
+            [BG_DANGER_LIGHT_DARK_DARK]: isAltSystem(mode)
+        });
+    }
+    /* v8 ignore start - selected variant edge case */ if (isSelected(variant)) {
+        return "bg-action-selected-dark";
+    }
+/* v8 ignore stop */ };
+const getButtonRadiusClasses = ({ radius })=>{
+    return clsx({
+        "rounded-full": radius === "large",
+        "rounded-md": radius === "medium",
+        "rounded-xs": radius === "small"
+    });
+};
+const getButtonHoverClasses = ({ mode, disabled, variant })=>{
+    if (disabled) {
+        return "";
+    }
+    if (isPrimary(variant)) {
+        return clsx({
+            [HOVER_TEXT_DARK]: isLightOrSystem(mode),
+            [HOVER_TEXT_LIGHT]: isDarkOrAltSystem(mode),
+            [DARK_HOVER_TEXT_LIGHT]: isSystem(mode),
+            [DARK_HOVER_TEXT_DARK]: isAltSystem(mode),
+            [HOVER_BG_LIGHT]: isLight(mode),
+            [HOVER_BG_DARK]: isDark(mode),
+            [HOVER_BG_LIGHT_DARK_DARK]: isSystem(mode),
+            [HOVER_BG_DARK_DARK_LIGHT]: isAltSystem(mode)
+        });
+    }
+    if (isSecondary(variant)) {
+        return clsx({
+            [HOVER_TEXT_LIGHT]: isLightOrSystem(mode),
+            [HOVER_TEXT_DARK]: isDarkOrAltSystem(mode),
+            [DARK_HOVER_TEXT_DARK]: isSystem(mode),
+            [DARK_HOVER_TEXT_LIGHT]: isAltSystem(mode),
+            [HOVER_BG_DARK]: isLight(mode),
+            [HOVER_BG_LIGHT]: isDark(mode),
+            [HOVER_BG_DARK_DARK_LIGHT]: isSystem(mode),
+            [HOVER_BG_LIGHT_DARK_DARK]: isAltSystem(mode)
+        });
+    }
+    if (isDanger(variant)) {
+        return clsx(HOVER_TEXT_LIGHT, {
+            [HOVER_BG_DANGER_DARK]: isDark(mode),
+            [HOVER_BG_DANGER_LIGHT]: isLight(mode),
+            [HOVER_BG_DANGER_DARK_DARK_LIGHT]: isSystem(mode),
+            [HOVER_BG_DANGER_LIGHT_DARK_DARK]: isAltSystem(mode)
+        });
+    }
+    /* v8 ignore start - selected variant edge case */ if (isSelected(variant)) {
+        return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
+    }
+/* v8 ignore stop */ };
+const getButtonActiveClasses = ({ mode, disabled, variant })=>{
+    if (disabled) {
+        return "";
+    }
+    if (isPrimary(variant)) {
+        return clsx({
+            [ACTIVE_TEXT_LIGHT]: isLightOrSystem(mode),
+            [ACTIVE_TEXT_MEDIUM]: isDarkOrAltSystem(mode),
+            [DARK_ACTIVE_TEXT_MEDIUM]: isSystem(mode),
+            [DARK_ACTIVE_TEXT_LIGHT]: isAltSystem(mode),
+            [ACTIVE_BG_LIGHT]: isLight(mode),
+            [ACTIVE_BG_DARK]: isDark(mode),
+            [ACTIVE_BG_LIGHT_DARK_DARK]: isSystem(mode),
+            [ACTIVE_BG_DARK_DARK_LIGHT]: isAltSystem(mode)
+        });
+    }
+    if (isSecondary(variant)) {
+        return clsx({
+            [ACTIVE_TEXT_MEDIUM]: isLightOrSystem(mode),
+            [ACTIVE_TEXT_LIGHT]: isDarkOrAltSystem(mode),
+            [DARK_ACTIVE_TEXT_LIGHT]: isSystem(mode),
+            [DARK_ACTIVE_TEXT_MEDIUM]: isAltSystem(mode),
+            [ACTIVE_BG_DARK]: isLight(mode),
+            [ACTIVE_BG_LIGHT]: isDark(mode),
+            [ACTIVE_BG_DARK_DARK_LIGHT]: isSystem(mode),
+            [ACTIVE_BG_LIGHT_DARK_DARK]: isAltSystem(mode)
+        });
+    }
+    if (isDanger(variant)) {
+        return clsx(ACTIVE_TEXT_LIGHTER, {
+            [ACTIVE_BG_DANGER_DARK]: isDark(mode),
+            [ACTIVE_BG_DANGER_LIGHT]: isLight(mode),
+            [ACTIVE_BG_DANGER_DARK_DARK_LIGHT]: isSystem(mode),
+            [ACTIVE_BG_DANGER_LIGHT_DARK_DARK]: isAltSystem(mode)
+        });
+    }
+    /* v8 ignore start - selected variant edge case */ if (isSelected(variant)) {
+        return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
+    }
+/* v8 ignore stop */ };
+const getButtonBorderClasses = ({ mode, noBorder, variant })=>{
+    if (noBorder) {
+        return "border border-transparent";
+    }
+    if (isPrimary(variant)) {
+        return clsx("border", {
+            [BORDER_MEDIUM]: isLight(mode),
+            [BORDER_ACCENT]: isDark(mode),
+            [BORDER_MEDIUM_DARK_ACCENT]: isSystem(mode),
+            [BORDER_ACCENT_DARK_MEDIUM]: isAltSystem(mode)
+        });
+    }
+    if (isSecondary(variant)) {
+        return clsx("border", {
+            [BORDER_ACCENT]: isLight(mode),
+            [BORDER_MEDIUM]: isDark(mode),
+            [BORDER_ACCENT_DARK_MEDIUM]: isSystem(mode),
+            [BORDER_MEDIUM_DARK_ACCENT]: isAltSystem(mode)
+        });
+    }
+    if (isDanger(variant)) {
+        return clsx("border", {
+            [BORDER_DANGER_DARK]: isDark(mode),
+            [BORDER_DANGER_MEDIUM]: isLight(mode),
+            [BORDER_DANGER_DARK_DARK_MEDIUM]: isSystem(mode),
+            [BORDER_DANGER_MEDIUM_DARK_DARK]: isAltSystem(mode)
+        });
+    }
+    /* v8 ignore start - selected variant edge case */ if (isSelected(variant)) {
+        return "border border-border-selected-dark";
+    }
+/* v8 ignore stop */ };
+const getButtonFocusClasses = ({ focusMode })=>{
+    return clsx("focus:outline-2 focus:outline-offset-2", {
+        [FOCUS_DARK]: isDark(focusMode),
+        [FOCUS_LIGHT]: isLight(focusMode),
+        [FOCUS_LIGHT_DARK_DARK]: isAltSystem(focusMode),
+        [FOCUS_DARK_DARK_LIGHT]: isSystem(focusMode)
+    });
+};
+const getIconClasses = ({ mode, raw, iconClassName, variant = "primary" })=>{
+    if (raw) {
+        return "";
+    }
+    let textColorClasses = {};
+    if (isPrimary(variant)) {
+        textColorClasses = {
+            [TEXT_COPY_DARK]: isLightOrSystem(mode),
+            [TEXT_COPY_LIGHT]: isDarkOrAltSystem(mode),
+            [DARK_TEXT_COPY_LIGHT]: isSystem(mode),
+            [DARK_TEXT_COPY_DARK]: isAltSystem(mode)
+        };
+    } else if (isSecondary(variant)) {
+        textColorClasses = {
+            [TEXT_COPY_LIGHT]: isLightOrSystem(mode),
+            [TEXT_COPY_DARK]: isDarkOrAltSystem(mode),
+            [DARK_TEXT_COPY_DARK]: isSystem(mode),
+            [DARK_TEXT_COPY_LIGHT]: isAltSystem(mode)
+        };
+    } else if (isDanger(variant)) {
+        textColorClasses = {
+            [TEXT_COPY_LIGHT]: mode === "dark" || mode === "system",
+            [TEXT_COPY_LIGHTER]: mode === "light" || mode === "alt-system",
+            [DARK_TEXT_COPY_LIGHTER]: isSystem(mode),
+            [DARK_TEXT_COPY_LIGHT]: isAltSystem(mode)
+        };
+    }
+    /* v8 ignore start - selected variant edge case */ if (isSelected(variant)) {
+        textColorClasses = {
+            [TEXT_COPY_LIGHTER]: true
+        };
+    }
+    /* v8 ignore stop */ return clsx(textColorClasses, iconClassName);
+};
+const getButtonIconLabelClasses = ({ animated })=>{
+    return clsx({
+        "transition-opacity duration-300 ease-in-out": animated
+    });
+};
+const getBadgeClasses = ({ size, badge })=>{
+    if (badge === undefined || badge === false || badge === 0) {
+        return null;
+    }
+    const isNumber = typeof badge === "number";
+    const displayValue = isNumber ? badge > 99 ? "99+" : String(badge) : null;
+    const baseClasses = clsx("absolute inline-flex items-center justify-center", "border border-border-white", "rounded-full", TEXT_COPY_LIGHTER, "bg-copy-error-dark", "pointer-events-none");
+    const sizeClasses = clsx({
+        "size-2 -top-0.5 right-0": !isNumber && isSmall(size),
+        "size-2.5 -top-0.5 right-0": !isNumber && isMedium(size),
+        "size-3 -top-0.5 right-1": !isNumber && isLarge(size),
+        "min-w-3 h-3 text-[8px] px-1 -top-1.5 -right-1.5": isNumber && isSmall(size) && badge < 10,
+        "min-w-3 h-3 text-[8px] px-1 -top-1.5 -right-2": isNumber && isSmall(size) && badge >= 10 && badge <= 99,
+        "min-w-3 h-3 text-[8px] px-1 -top-1.5 -right-3": isNumber && isSmall(size) && badge > 99,
+        "min-w-4 h-4 text-[10px] px-1 -top-1.5 -right-0.5": isNumber && isMedium(size) && badge < 10,
+        "min-w-4 h-4 text-[10px] px-1 -top-1.5 -right-2": isNumber && isMedium(size) && badge >= 10 && badge <= 99,
+        "min-w-4 h-4 text-[10px] px-1 -top-1.5 -right-3": isNumber && isMedium(size) && badge > 99,
+        "min-w-5 h-5 text-xs px-1 -top-1 -right-1": isNumber && isLarge(size) && badge < 10,
+        "min-w-5 h-5 text-xs px-1 -top-1 -right-2": isNumber && isLarge(size) && badge >= 10 && badge <= 99,
+        "min-w-5 h-5 text-xs px-1 -top-1 -right-3": isNumber && isLarge(size) && badge > 99
+    });
+    return {
+        className: clsx(baseClasses, sizeClasses),
+        displayValue
+    };
+};
+const getButtonClasses = ({ type, className, raw, mode, focusMode, disabled, fullWidth, size, noBorder, labelRight, labelLeft, noBackground, variant, truncate, align, radius, animated, badge })=>{
+    if (!variant) {
+        variant = "primary";
+    }
+    const hasBadge = badge !== undefined && badge !== false && badge !== 0;
+    return raw ? clsx(BUTTON_CLASSNAME, className) : clsx(BUTTON_CLASSNAME, getButtonTextCopyClasses({
+        mode,
+        variant,
+        noBackground,
+        truncate
+    }), getButtonBackgroundClasses({
+        mode,
+        noBackground,
+        variant
+    }), getButtonRadiusClasses({
+        radius
+    }), getButtonSizesClasses({
+        type,
+        size,
+        labelRight,
+        labelLeft,
+        align,
+        animated
+    }), getButtonFontClasses({
+        type,
+        size,
+        labelRight,
+        labelLeft
+    }), getButtonBorderClasses({
+        mode,
+        variant,
+        noBorder
+    }), getButtonFocusClasses({
+        focusMode
+    }), getButtonHoverClasses({
+        mode,
+        variant,
+        disabled
+    }), getButtonActiveClasses({
+        mode,
+        variant,
+        disabled
+    }), {
+        "w-full": fullWidth,
+        "disabled:cursor-not-allowed disabled:opacity-50": disabled,
+        "cursor-pointer": !disabled,
+        relative: hasBadge
+    }, clsx({
+        "transition-[width] duration-300 ease-in": type === TYPE_ICON && animated
+    }), className);
+};
+
+export { TYPE_BUTTON, TYPE_ICON, TYPE_LINK, clsx, getBadgeClasses, getButtonClasses, getButtonIconLabelClasses, getIconClasses };
+export { jsx, jsxs } from "react/jsx-runtime";

package/dist/370.js

@@ -0,0 +1,219 @@
+/*!
+  @versini/ui-button v11.3.5
+  © 2026 gizmette.com
+*/
+
+import { useMergeRefs } from "@versini/ui-hooks/use-merge-refs";
+import { useResizeObserver } from "@versini/ui-hooks/use-resize-observer";
+import { jsxs, getButtonClasses, getIconClasses, getButtonIconLabelClasses, TYPE_ICON, getBadgeClasses, jsx } from "./188.js";
+import { useLayoutEffect, useRef, useEffect, BaseButton_private } from "./795.js";
+
+
+
+
+
+
+
+
+
+const WIDTH = {
+    small: 24,
+    medium: 32,
+    large: 48
+};
+const PADDINGS = {
+    small: 8 * 2,
+    medium: 12 * 2,
+    large: 16 * 2
+};
+const BORDERS = 2; // border x 2
+const ANIMATION_DURATION = 300; // ms - should match the CSS transition duration
+function ButtonIcon({ children, disabled = false, mode = "system", focusMode = "system", fullWidth = false, className, type = "button", raw = false, noBorder = false, "aria-label": ariaLabel, label, size = "medium", labelRight, labelLeft, noBackground = false, align = "center", radius = "large", variant = "secondary", iconClassName, animated = false, badge, ref, ...otherProps }) {
+    const buttonClass = getButtonClasses({
+        type: TYPE_ICON,
+        mode,
+        focusMode,
+        fullWidth,
+        disabled,
+        raw,
+        className,
+        noBorder,
+        size,
+        labelRight,
+        labelLeft,
+        noBackground,
+        align,
+        radius,
+        variant,
+        animated,
+        badge
+    });
+    const iconClass = getIconClasses({
+        mode,
+        raw,
+        iconClassName,
+        variant
+    });
+    const labelClass = getButtonIconLabelClasses({
+        animated
+    });
+    // Create a combined class for the button content wrapper
+    const contentWrapperClass = "flex items-center justify-center relative w-full h-full overflow-hidden";
+    const [labelRightRef, rectR] = useResizeObserver();
+    const [labelLeftRef, rectL] = useResizeObserver();
+    const [iconRef, rectIcon] = useResizeObserver();
+    const bufferRef = useRef(0);
+    const buttonRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const mergedRef = useMergeRefs([
+        ref,
+        buttonRef
+    ]);
+    /**
+	 * Effect to calculate the buffer to add to the width of the button to
+	 * account for the icon, paddings and borders.
+	 */ useLayoutEffect(()=>{
+        /* v8 ignore start */ if (iconRef && iconRef.current && animated) {
+            bufferRef.current = rectIcon.width + PADDINGS[size] + (noBorder ? 0 : BORDERS);
+            // Set initial button width if it hasn't been set yet
+            if (buttonRef.current && !buttonRef.current.style.width) {
+                buttonRef.current.style.width = `${WIDTH[size]}px`;
+            }
+        }
+    /* v8 ignore stop */ }, [
+        rectIcon,
+        iconRef,
+        size,
+        noBorder,
+        animated
+    ]);
+    /**
+	 * Effect to update the width of the button based on the visibility of
+	 * the right and left labels.
+	 */ useLayoutEffect(()=>{
+        /* v8 ignore start */ if (buttonRef && buttonRef.current && animated) {
+            // Calculate the target width first
+            let newWidth = WIDTH[size];
+            if (labelRight && labelRightRef && rectR.width > 0) {
+                newWidth = rectR.width + bufferRef.current;
+            } else if (labelLeft && labelLeftRef && rectL.width > 0) {
+                newWidth = rectL.width + bufferRef.current;
+            }
+            // Clear any existing timeout to prevent race conditions
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            // Start transition - expand button first
+            if (newWidth !== parseInt(buttonRef.current.style.width || "0", 10)) {
+                // Make sure labels are hidden during width transition
+                if (labelRightRef.current) {
+                    labelRightRef.current.style.opacity = "0";
+                }
+                if (labelLeftRef.current) {
+                    labelLeftRef.current.style.opacity = "0";
+                }
+                // Set the width to trigger the transition
+                buttonRef.current.style.width = `${newWidth}px`;
+                // After button width transition completes, show the label
+                if (newWidth > WIDTH[size]) {
+                    timeoutRef.current = setTimeout(()=>{
+                        if (labelRightRef.current && labelRight) {
+                            labelRightRef.current.style.opacity = "1";
+                        }
+                        if (labelLeftRef.current && labelLeft) {
+                            labelLeftRef.current.style.opacity = "1";
+                        }
+                        timeoutRef.current = null;
+                    }, ANIMATION_DURATION * 0.8); // Wait for most of the width transition to complete
+                }
+            }
+            // If transitioning to icon-only state, hide labels immediately
+            if (newWidth === WIDTH[size]) {
+                if (labelRightRef.current) {
+                    labelRightRef.current.style.opacity = "0";
+                }
+                if (labelLeftRef.current) {
+                    labelLeftRef.current.style.opacity = "0";
+                }
+            }
+        }
+    /* v8 ignore stop */ }, [
+        rectR,
+        labelRight,
+        labelRightRef,
+        rectL,
+        labelLeft,
+        labelLeftRef,
+        size,
+        animated
+    ]);
+    // Clean up timeout on unmount
+    /* v8 ignore start */ useEffect(()=>{
+        return ()=>{
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    /* v8 ignore stop */ const badgeInfo = getBadgeClasses({
+        size,
+        badge
+    });
+    return /*#__PURE__*/ jsxs(BaseButton_private, {
+        ref: mergedRef,
+        className: buttonClass,
+        disabled: disabled,
+        type: type,
+        "aria-label": ariaLabel || label,
+        ...otherProps,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: contentWrapperClass,
+                children: [
+                    /*#__PURE__*/ jsx(ButtonLabel, {
+                        label: labelLeft,
+                        labelRef: labelLeftRef,
+                        labelClass: labelClass,
+                        labelInnerClass: "pr-2",
+                        initiallyHidden: animated
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        ref: iconRef,
+                        className: iconClass,
+                        children: children
+                    }),
+                    /*#__PURE__*/ jsx(ButtonLabel, {
+                        label: labelRight,
+                        labelRef: labelRightRef,
+                        labelClass: labelClass,
+                        labelInnerClass: "pl-2",
+                        initiallyHidden: animated
+                    })
+                ]
+            }),
+            badgeInfo && /*#__PURE__*/ jsx("span", {
+                className: badgeInfo.className,
+                "aria-hidden": "true",
+                children: badgeInfo.displayValue
+            })
+        ]
+    });
+}
+const ButtonLabel = ({ labelRef, labelClass, label, labelInnerClass, initiallyHidden = false })=>{
+    if (!label && !initiallyHidden) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx("span", {
+        ref: labelRef,
+        className: labelClass,
+        style: initiallyHidden ? {
+            opacity: 0
+        } : undefined,
+        children: label && /*#__PURE__*/ jsx("span", {
+            className: labelInnerClass,
+            children: label
+        })
+    });
+};
+
+export { ButtonIcon };