@versini/ui-button 11.3.3 → 11.3.5

package/dist/components/Button/utilities.js

@@ -1,389 +0,0 @@
-/*!
-  @versini/ui-button v11.3.3
-  © 2026 gizmette.com
-*/
-
-import clsx from "clsx";
-import { BUTTON_CLASSNAME } from "../../common/constants.js";
-
-;// CONCATENATED MODULE: external "clsx"
-
-;// CONCATENATED MODULE: external "../../common/constants.js"
-
-;// CONCATENATED MODULE: ./src/components/Button/utilities.ts
-
-
-const TYPE_ICON = "icon";
-const TYPE_BUTTON = "button";
-const TYPE_LINK = "link";
-const getButtonSizesClasses = ({ type, size, labelRight, labelLeft, align, animated })=>{
-    const smallClasses = "max-h-8 py-0 px-2";
-    const mediumClasses = "max-h-9 h-8 px-3";
-    const largeClasses = "max-h-12 py-2 px-4";
-    switch(type){
-        case TYPE_BUTTON:
-        case TYPE_LINK:
-            return clsx({
-                [smallClasses]: size === "small",
-                [mediumClasses]: size === "medium",
-                [largeClasses]: size === "large"
-            });
-        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": size === "small" && !animated && !(labelRight || labelLeft),
-                "h-6 px-1 sm:px-2": size === "small" && !animated && (labelRight || labelLeft),
-                "h-8 w-8 p-1": size === "medium" && !animated && !(labelRight || labelLeft),
-                "h-8 px-3": size === "medium" && !animated && (labelRight || labelLeft),
-                "h-12 w-12 p-2": size === "large" && !animated && !(labelRight || labelLeft),
-                "h-12 px-4": size === "large" && !animated && (labelRight || labelLeft),
-                "h-6 py-0": size === "small" && animated && !(labelRight || labelLeft),
-                "h-6": size === "small" && animated && (labelRight || labelLeft),
-                "h-8 py-1": size === "medium" && animated && !(labelRight || labelLeft),
-                "h-8": size === "medium" && animated && (labelRight || labelLeft),
-                "h-12 py-2": size === "large" && animated && !(labelRight || labelLeft),
-                "h-12": size === "large" && animated && (labelRight || labelLeft)
-            });
-    }
-};
-const getButtonFontClasses = ({ type, size, labelRight, labelLeft })=>{
-    const smallClasses = "text-sm font-medium";
-    const mediumClasses = "text-base font-medium";
-    const largeClasses = "text-lg font-medium";
-    switch(type){
-        case TYPE_BUTTON:
-        case TYPE_LINK:
-            return clsx({
-                "text-center": type === TYPE_LINK,
-                [smallClasses]: size === "small",
-                [mediumClasses]: size === "medium",
-                [largeClasses]: size === "large"
-            });
-        case TYPE_ICON:
-            return clsx({
-                [smallClasses]: size === "small" && (labelRight || labelLeft),
-                [mediumClasses]: size === "medium" && (labelRight || labelLeft),
-                [largeClasses]: size === "large" && (labelRight || labelLeft)
-            });
-    }
-};
-const getButtonTextCopyClasses = ({ mode, noBackground, truncate, variant })=>{
-    if (noBackground) {
-        return "not-prose";
-    }
-    if (variant === "primary") {
-        return clsx("not-prose", {
-            truncate: truncate,
-            "text-copy-dark": mode === "light" || mode === "system",
-            "text-copy-light": mode === "dark" || mode === "alt-system",
-            "dark:text-copy-light": mode === "system",
-            "dark:text-copy-dark": mode === "alt-system"
-        });
-    }
-    if (variant === "secondary") {
-        return clsx("not-prose", {
-            truncate: truncate,
-            "text-copy-light": mode === "light" || mode === "system",
-            "text-copy-dark": mode === "dark" || mode === "alt-system",
-            "dark:text-copy-dark": mode === "system",
-            "dark:text-copy-light": mode === "alt-system"
-        });
-    }
-    if (variant === "danger") {
-        return clsx("not-prose", {
-            truncate: truncate,
-            "text-copy-light": mode === "dark" || mode === "system",
-            "text-copy-lighter": mode === "light" || mode === "alt-system",
-            "dark:text-copy-lighter": mode === "system",
-            "dark:text-copy-light": mode === "alt-system"
-        });
-    }
-    /* v8 ignore start - selected variant edge case */ if (variant === "selected") {
-        return clsx("not-prose text-copy-lighter", {
-            truncate: truncate
-        });
-    }
-/* v8 ignore stop */ };
-const getButtonBackgroundClasses = ({ mode, noBackground, variant })=>{
-    if (noBackground) {
-        return;
-    }
-    if (variant === "primary") {
-        return clsx({
-            "bg-action-light": mode === "light",
-            "bg-action-dark": mode === "dark",
-            "bg-action-light dark:bg-action-dark": mode === "system",
-            "bg-action-dark dark:bg-action-light": mode === "alt-system"
-        });
-    }
-    if (variant === "secondary") {
-        return clsx({
-            "bg-action-dark": mode === "light",
-            "bg-action-light": mode === "dark",
-            "bg-action-dark dark:bg-action-light": mode === "system",
-            "bg-action-light dark:bg-action-dark": mode === "alt-system"
-        });
-    }
-    if (variant === "danger") {
-        return clsx({
-            "bg-action-danger-dark": mode === "dark",
-            "bg-action-danger-light": mode === "light",
-            "bg-action-danger-dark dark:bg-action-danger-light": mode === "system",
-            "bg-action-danger-light dark:bg-action-danger-dark": mode === "alt-system"
-        });
-    }
-    /* v8 ignore start - selected variant edge case */ if (variant === "selected") {
-        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 (variant === "primary") {
-        return clsx({
-            "hover:text-copy-dark-hover": mode === "light" || mode === "system",
-            "hover:text-copy-light-hover": mode === "dark" || mode === "alt-system",
-            "dark:hover:text-copy-light-hover": mode === "system",
-            "dark:hover:text-copy-dark-hover": mode === "alt-system",
-            "hover:bg-action-light-hover": mode === "light",
-            "hover:bg-action-dark-hover": mode === "dark",
-            "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": mode === "system",
-            "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": mode === "alt-system"
-        });
-    }
-    if (variant === "secondary") {
-        return clsx({
-            "hover:text-copy-light-hover": mode === "light" || mode === "system",
-            "hover:text-copy-dark-hover": mode === "dark" || mode === "alt-system",
-            "dark:hover:text-copy-dark-hover": mode === "system",
-            "dark:hover:text-copy-light-hover": mode === "alt-system",
-            "hover:bg-action-dark-hover": mode === "light",
-            "hover:bg-action-light-hover": mode === "dark",
-            "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": mode === "system",
-            "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": mode === "alt-system"
-        });
-    }
-    if (variant === "danger") {
-        return clsx("hover:text-copy-light-hover", {
-            "hover:bg-action-danger-dark-hover": mode === "dark",
-            "hover:bg-action-danger-light-hover": mode === "light",
-            "hover:bg-action-danger-dark-hover dark:hover:bg-action-danger-light-hover": mode === "system",
-            "hover:bg-action-danger-light-hover dark:hover:bg-action-danger-dark-hover": mode === "alt-system"
-        });
-    }
-    /* v8 ignore start - selected variant edge case */ if (variant === "selected") {
-        return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
-    }
-/* v8 ignore stop */ };
-const getButtonActiveClasses = ({ mode, disabled, variant })=>{
-    if (disabled) {
-        return "";
-    }
-    if (variant === "primary") {
-        return clsx({
-            "active:text-copy-light-active": mode === "light" || mode === "system",
-            "active:text-copy-medium-active": mode === "dark" || mode === "alt-system",
-            "dark:active:text-copy-medium-active": mode === "system",
-            "dark:active:text-copy-light-active": mode === "alt-system",
-            "active:bg-action-light-active": mode === "light",
-            "active:bg-action-dark-active": mode === "dark",
-            "active:bg-action-light-active dark:active:bg-action-dark-active": mode === "system",
-            "active:bg-action-dark-active dark:active:bg-action-light-active": mode === "alt-system"
-        });
-    }
-    if (variant === "secondary") {
-        return clsx({
-            "active:text-copy-medium-active": mode === "light" || mode === "system",
-            "active:text-copy-light-active": mode === "dark" || mode === "alt-system",
-            "dark:active:text-copy-light-active": mode === "system",
-            "dark:active:text-copy-medium-active": mode === "alt-system",
-            "active:bg-action-dark-active": mode === "light",
-            "active:bg-action-light-active": mode === "dark",
-            "active:bg-action-dark-active dark:active:bg-action-light-active": mode === "system",
-            "active:bg-action-light-active dark:active:bg-action-dark-active": mode === "alt-system"
-        });
-    }
-    if (variant === "danger") {
-        return clsx("active:text-copy-lighter-active", {
-            "active:bg-action-danger-dark-active": mode === "dark",
-            "active:bg-action-danger-light-active": mode === "light",
-            "active:bg-action-danger-dark-active dark:active:bg-action-danger-light-active": mode === "system",
-            "active:bg-action-danger-light-active dark:active:bg-action-danger-dark-active": mode === "alt-system"
-        });
-    }
-    /* v8 ignore start - selected variant edge case */ if (variant === "selected") {
-        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 (variant === "primary") {
-        return clsx("border", {
-            "border-border-medium": mode === "light",
-            "border-border-accent": mode === "dark",
-            "border-border-medium dark:border-border-accent": mode === "system",
-            "border-border-accent dark:border-border-medium": mode === "alt-system"
-        });
-    }
-    if (variant === "secondary") {
-        return clsx("border", {
-            "border-border-accent": mode === "light",
-            "border-border-medium": mode === "dark",
-            "border-border-accent dark:border-border-medium": mode === "system",
-            "border-border-medium dark:border-border-accent": mode === "alt-system"
-        });
-    }
-    if (variant === "danger") {
-        return clsx("border", {
-            "border-border-danger-dark": mode === "dark",
-            "border-border-danger-medium": mode === "light",
-            "border-border-danger-dark dark:border-border-danger-medium": mode === "system",
-            "border-border-danger-medium dark:border-border-danger-dark": mode === "alt-system"
-        });
-    }
-    /* v8 ignore start - selected variant edge case */ if (variant === "selected") {
-        return "border border-border-selected-dark";
-    }
-/* v8 ignore stop */ };
-const getButtonFocusClasses = ({ focusMode })=>{
-    return clsx("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
-        "focus:outline-focus-dark": focusMode === "dark",
-        "focus:outline-focus-light": focusMode === "light",
-        "focus:outline-focus-light dark:focus:outline-focus-dark": focusMode === "alt-system",
-        "focus:outline-focus-dark dark:focus:outline-focus-light": focusMode === "system"
-    });
-};
-const getIconClasses = ({ mode, raw, iconClassName, variant = "primary" })=>{
-    if (raw) {
-        return "";
-    }
-    // Use the same text color logic as getButtonTextCopyClasses
-    let textColorClasses = {};
-    if (variant === "primary") {
-        textColorClasses = {
-            "text-copy-dark": mode === "light" || mode === "system",
-            "text-copy-light": mode === "dark" || mode === "alt-system",
-            "dark:text-copy-light": mode === "system",
-            "dark:text-copy-dark": mode === "alt-system"
-        };
-    } else if (variant === "secondary") {
-        textColorClasses = {
-            "text-copy-light": mode === "light" || mode === "system",
-            "text-copy-dark": mode === "dark" || mode === "alt-system",
-            "dark:text-copy-dark": mode === "system",
-            "dark:text-copy-light": mode === "alt-system"
-        };
-    } else if (variant === "danger") {
-        textColorClasses = {
-            "text-copy-light": mode === "dark" || mode === "system",
-            "text-copy-lighter": mode === "light" || mode === "alt-system",
-            "dark:text-copy-lighter": mode === "system",
-            "dark:text-copy-light": mode === "alt-system"
-        };
-    }
-    /* v8 ignore start - selected variant edge case */ if (variant === "selected") {
-        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;
-    // Base classes for badge positioning and styling
-    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");
-    // Size-specific classes for positioning and dimensions
-    const sizeClasses = clsx({
-        // Dot badge (boolean true) - small circle
-        "size-2 -top-0.5 right-0": !isNumber && size === "small",
-        "size-2.5 -top-0.5 right-0": !isNumber && size === "medium",
-        "size-3 -top-0.5 right-1": !isNumber && size === "large",
-        // Number badge - larger to fit text
-        "min-w-3 h-3 text-[8px] px-1 -top-1.5 -right-1.5": isNumber && size === "small" && badge < 10,
-        "min-w-3 h-3 text-[8px] px-1 -top-1.5 -right-2": isNumber && size === "small" && badge >= 10 && badge <= 99,
-        "min-w-3 h-3 text-[8px] px-1 -top-1.5 -right-3": isNumber && size === "small" && badge > 99,
-        "min-w-4 h-4 text-[10px] px-1 -top-1.5 -right-0.5": isNumber && size === "medium" && badge < 10,
-        "min-w-4 h-4 text-[10px] px-1 -top-1.5 -right-2": isNumber && size === "medium" && badge >= 10 && badge <= 99,
-        "min-w-4 h-4 text-[10px] px-1 -top-1.5 -right-3": isNumber && size === "medium" && badge > 99,
-        "min-w-5 h-5 text-xs px-1 -top-1 -right-1": isNumber && size === "large" && badge < 10,
-        "min-w-5 h-5 text-xs px-1 -top-1 -right-2": isNumber && size === "large" && badge >= 10 && badge <= 99,
-        "min-w-5 h-5 text-xs px-1 -top-1 -right-3": isNumber && size === "large" && 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,
-        relative: hasBadge
-    }, clsx({
-        "transition-[width] duration-300 ease-in": type === TYPE_ICON && animated
-    }), className);
-};
-
-export { TYPE_BUTTON, TYPE_ICON, TYPE_LINK, getBadgeClasses, getButtonClasses, getButtonIconLabelClasses, getIconClasses };

package/dist/components/index.js

@@ -1,20 +0,0 @@
-/*!
-  @versini/ui-button v11.3.3
-  © 2026 gizmette.com
-*/
-
-export * from "../common/constants.js";
-export * from "./Button/Button.js";
-export * from "./Button/ButtonCopy.js";
-export * from "./Button/ButtonIcon.js";
-export * from "./Button/ButtonLink.js";
-export * from "./private/ButtonSort.js";
-
-;// CONCATENATED MODULE: ./src/components/index.ts
-
-
-
-
-
-
-