@evolve.ui/core-components 1.0.1 → 1.2.0

package/ViewMore-BBoUvo7p.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ViewMore-BBoUvo7p.cjs","names":["effectEventListener","InlineButton","CaretUp","CaretDown"],"sources":["../src/utils/smoothScrollTo.ts","../src/ViewMore/ViewMore.tsx"],"sourcesContent":["/**\n * Easing function for smooth scroll animation\n * Uses cubic easing in-out curve\n * @param t - Progress value between 0 and 1\n * @returns Eased progress value\n */\nconst easeInOutCubic = (t: number): number => {\n    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n};\n\n/**\n * Smoothly scrolls the window to a specific vertical position using requestAnimationFrame\n * @param targetY - The target vertical scroll position in pixels\n * @param duration - The duration of the scroll animation in milliseconds (defaults to 300ms)\n *\n * @example\n * ```tsx\n * // Scroll to 500px from the top over 300ms\n * smoothScrollTo(500);\n *\n * // Scroll to top of an element with custom duration\n * const element = document.getElementById('my-element');\n * if (element) {\n *   const targetY = element.getBoundingClientRect().top + window.scrollY;\n *   smoothScrollTo(targetY, 500);\n * }\n * ```\n */\nexport const smoothScrollTo = (targetY: number, duration: number = 300): void => {\n    const startY = window.scrollY;\n    const distance = targetY - startY;\n    const startTime = performance.now();\n\n    const scroll = (currentTime: number) => {\n        const elapsed = currentTime - startTime;\n        const progress = Math.min(elapsed / duration, 1);\n        const easeProgress = easeInOutCubic(progress);\n\n        window.scrollTo(0, startY + distance * easeProgress);\n\n        if (progress < 1) {\n            requestAnimationFrame(scroll);\n        }\n    };\n\n    requestAnimationFrame(scroll);\n};\n","import { cn, wrapVarRgb } from '@evolve.ui/theme-system';\nimport { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { CaretDown, CaretUp } from '../Icons';\nimport { InlineButton } from '../Typography/InlineButton/InlineButton';\nimport { effectEventListener } from '../utils/effectEventListener';\nimport { smoothScrollTo } from '../utils/smoothScrollTo';\n\nconst SCROLL_TOP_OFFSET = 100;\nconst SCROLL_DURATION = 200;\n\ntype Props = {\n    /**\n     * Determines whether to center the inline button.\n     */\n    centerInlineButton?: boolean;\n    /**\n     * The inner text description or content to display.\n     *\n     */\n    children: React.ReactNode;\n    className?: string;\n    /**\n     * Custom text for the collapse button.\n     *\n     * @default 'Read Less'\n     */\n    collapseText?: string;\n    /**\n     * Whether the view more should be expanded by default.\n     *\n     * @default false\n     */\n    defaultExpanded?: boolean;\n    /**\n     * Prevents expansion/collapse while still allowing onClick callback to fire.\n     * Useful when you want to control the expansion behavior externally.\n     *\n     * @default false\n     */\n    disableExpand?: boolean;\n    /**\n     * Custom text for the expand button.\n     *\n     * @default 'Read More'\n     */\n    expandText?: string;\n    /**\n     * Custom fade color.\n     */\n    fadeBackgroundColor?: string;\n    /**\n     * Callback function that is called when the view more is expanded or collapsed.\n     */\n    onChange?: (isExpanded: boolean) => void;\n    /**\n     * Callback function that is called when the view more button is clicked.\n     * Can be used to track analytics or trigger other actions when the view more is interacted with.\n     * Use the `disableExpand` prop if you want to prevent the default expansion/collapse behavior.\n     */\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Determines whether to remove the fade background color.\n     */\n    removeFadeBackgroundColor?: boolean;\n    /**\n     * Whether to display caret icons (CaretDown/CaretUp) alongside the button text.\n     *\n     * @default false\n     */\n    showIcon?: boolean;\n    /**\n     * Number in pixels at which the text description will cut off and show the expand toggle.\n     *\n     * @default 150\n     */\n    textCutoffHeight?: number;\n    /**\n     * Determines whether to use a weak inline button.\n     */\n    useWeakInlineButton?: boolean;\n};\n\nexport const ViewMore = ({\n    centerInlineButton,\n    children,\n    className,\n    collapseText = 'Read Less',\n    defaultExpanded = false,\n    disableExpand = false,\n    expandText = 'Read More',\n    fadeBackgroundColor,\n    onChange,\n    onClick,\n    removeFadeBackgroundColor,\n    showIcon = false,\n    textCutoffHeight = 150,\n    useWeakInlineButton,\n}: Props) => {\n    const [isExpanded, setIsExpanded] = useState<boolean>(defaultExpanded);\n    // Set initial height for SSR-friendly rendering:\n    // - When expanded: Use large value (9999px) to show all content before useEffect measures actual height\n    // - When collapsed: Use textCutoffHeight to truncate content appropriately\n    const [height, setHeight] = useState<number>(defaultExpanded ? 9999 : textCutoffHeight);\n    const [showViewToggle, setShowViewToggle] = useState<boolean>(false);\n    const [enableTransitions, setEnableTransitions] = useState<boolean>(false);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const toggleDescription = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            onClick?.(event);\n\n            // If disableExpand is true, call onClick but don't toggle the expansion\n            if (disableExpand) {\n                return;\n            }\n\n            // Enable transitions on first user interaction\n            setEnableTransitions(true);\n\n            setIsExpanded((prevIsExpanded) => {\n                const newHeight = prevIsExpanded\n                    ? textCutoffHeight\n                    : (contentRef.current?.scrollHeight ?? textCutoffHeight);\n                setHeight(newHeight);\n                onChange?.(!prevIsExpanded);\n\n                // Scroll to top when collapsing with custom smooth scroll to match 300ms transition\n                if (prevIsExpanded && containerRef.current) {\n                    const top = containerRef.current.getBoundingClientRect().top + window.scrollY - SCROLL_TOP_OFFSET;\n                    smoothScrollTo(top, SCROLL_DURATION);\n                }\n\n                return !prevIsExpanded;\n            });\n        },\n        [textCutoffHeight, onChange, onClick, disableExpand]\n    );\n\n    const updateView = useCallback(() => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        const scrollHeight = contentRef.current.scrollHeight;\n        const shouldShowToggle = scrollHeight > textCutoffHeight;\n        setShowViewToggle(shouldShowToggle);\n        setHeight(isExpanded || !shouldShowToggle ? scrollHeight : textCutoffHeight);\n    }, [isExpanded, textCutoffHeight]);\n\n    useEffect(() => {\n        if (!contentRef.current) {\n            return;\n        }\n        updateView();\n\n        const cleanupResizeListener = effectEventListener(window, 'resize', updateView);\n\n        // Add ResizeObserver to detect content height changes\n        const resizeObserver = new ResizeObserver(updateView);\n        resizeObserver.observe(contentRef.current);\n\n        return () => {\n            cleanupResizeListener();\n            resizeObserver.disconnect();\n        };\n    }, [updateView, children]);\n\n    return (\n        <div className={cn(className, 'flex flex-col gap-xs')}>\n            <div\n                className={cn('relative overflow-hidden', {\n                    'transition-all duration-300 ease-in-out': enableTransitions,\n                })}\n                data-testid=\"description-container\"\n                ref={containerRef}\n                style={{\n                    height: showViewToggle ? `${height}px` : 'auto',\n                    maxHeight: showViewToggle || isExpanded ? undefined : `${textCutoffHeight}px`,\n                }}\n            >\n                <div ref={contentRef}>{children}</div>\n                {showViewToggle && !removeFadeBackgroundColor && !isExpanded && (\n                    <div\n                        className=\"absolute bottom-0 left-0 right-0 h-xl w-full\"\n                        style={{\n                            background: fadeBackgroundColor\n                                ? `linear-gradient(to bottom, transparent, ${fadeBackgroundColor})`\n                                : `linear-gradient(to bottom, transparent, ${wrapVarRgb('--color-background-primary')})`,\n                        }}\n                    />\n                )}\n            </div>\n            {showViewToggle && (\n                <div\n                    className={cn('w-full', {\n                        'text-center': centerInlineButton,\n                    })}\n                >\n                    {useWeakInlineButton ? (\n                        <InlineButton\n                            className=\"w-fit\"\n                            icon={showIcon ? (isExpanded ? CaretUp : CaretDown) : undefined}\n                            iconPlacement=\"right\"\n                            onClick={toggleDescription}\n                            style=\"neutral\"\n                        >\n                            {isExpanded ? collapseText : expandText}\n                        </InlineButton>\n                    ) : (\n                        <InlineButton\n                            className=\"w-fit\"\n                            icon={showIcon ? (isExpanded ? CaretUp : CaretDown) : undefined}\n                            iconPlacement=\"right\"\n                            onClick={toggleDescription}\n                        >\n                            {isExpanded ? collapseText : expandText}\n                        </InlineButton>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/ViewMore-BrZPuE4E.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ViewMore-BrZPuE4E.mjs","names":[],"sources":["../src/utils/smoothScrollTo.ts","../src/ViewMore/ViewMore.tsx"],"sourcesContent":["/**\n * Easing function for smooth scroll animation\n * Uses cubic easing in-out curve\n * @param t - Progress value between 0 and 1\n * @returns Eased progress value\n */\nconst easeInOutCubic = (t: number): number => {\n    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n};\n\n/**\n * Smoothly scrolls the window to a specific vertical position using requestAnimationFrame\n * @param targetY - The target vertical scroll position in pixels\n * @param duration - The duration of the scroll animation in milliseconds (defaults to 300ms)\n *\n * @example\n * ```tsx\n * // Scroll to 500px from the top over 300ms\n * smoothScrollTo(500);\n *\n * // Scroll to top of an element with custom duration\n * const element = document.getElementById('my-element');\n * if (element) {\n *   const targetY = element.getBoundingClientRect().top + window.scrollY;\n *   smoothScrollTo(targetY, 500);\n * }\n * ```\n */\nexport const smoothScrollTo = (targetY: number, duration: number = 300): void => {\n    const startY = window.scrollY;\n    const distance = targetY - startY;\n    const startTime = performance.now();\n\n    const scroll = (currentTime: number) => {\n        const elapsed = currentTime - startTime;\n        const progress = Math.min(elapsed / duration, 1);\n        const easeProgress = easeInOutCubic(progress);\n\n        window.scrollTo(0, startY + distance * easeProgress);\n\n        if (progress < 1) {\n            requestAnimationFrame(scroll);\n        }\n    };\n\n    requestAnimationFrame(scroll);\n};\n","import { cn, wrapVarRgb } from '@evolve.ui/theme-system';\nimport { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { CaretDown, CaretUp } from '../Icons';\nimport { InlineButton } from '../Typography/InlineButton/InlineButton';\nimport { effectEventListener } from '../utils/effectEventListener';\nimport { smoothScrollTo } from '../utils/smoothScrollTo';\n\nconst SCROLL_TOP_OFFSET = 100;\nconst SCROLL_DURATION = 200;\n\ntype Props = {\n    /**\n     * Determines whether to center the inline button.\n     */\n    centerInlineButton?: boolean;\n    /**\n     * The inner text description or content to display.\n     *\n     */\n    children: React.ReactNode;\n    className?: string;\n    /**\n     * Custom text for the collapse button.\n     *\n     * @default 'Read Less'\n     */\n    collapseText?: string;\n    /**\n     * Whether the view more should be expanded by default.\n     *\n     * @default false\n     */\n    defaultExpanded?: boolean;\n    /**\n     * Prevents expansion/collapse while still allowing onClick callback to fire.\n     * Useful when you want to control the expansion behavior externally.\n     *\n     * @default false\n     */\n    disableExpand?: boolean;\n    /**\n     * Custom text for the expand button.\n     *\n     * @default 'Read More'\n     */\n    expandText?: string;\n    /**\n     * Custom fade color.\n     */\n    fadeBackgroundColor?: string;\n    /**\n     * Callback function that is called when the view more is expanded or collapsed.\n     */\n    onChange?: (isExpanded: boolean) => void;\n    /**\n     * Callback function that is called when the view more button is clicked.\n     * Can be used to track analytics or trigger other actions when the view more is interacted with.\n     * Use the `disableExpand` prop if you want to prevent the default expansion/collapse behavior.\n     */\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Determines whether to remove the fade background color.\n     */\n    removeFadeBackgroundColor?: boolean;\n    /**\n     * Whether to display caret icons (CaretDown/CaretUp) alongside the button text.\n     *\n     * @default false\n     */\n    showIcon?: boolean;\n    /**\n     * Number in pixels at which the text description will cut off and show the expand toggle.\n     *\n     * @default 150\n     */\n    textCutoffHeight?: number;\n    /**\n     * Determines whether to use a weak inline button.\n     */\n    useWeakInlineButton?: boolean;\n};\n\nexport const ViewMore = ({\n    centerInlineButton,\n    children,\n    className,\n    collapseText = 'Read Less',\n    defaultExpanded = false,\n    disableExpand = false,\n    expandText = 'Read More',\n    fadeBackgroundColor,\n    onChange,\n    onClick,\n    removeFadeBackgroundColor,\n    showIcon = false,\n    textCutoffHeight = 150,\n    useWeakInlineButton,\n}: Props) => {\n    const [isExpanded, setIsExpanded] = useState<boolean>(defaultExpanded);\n    // Set initial height for SSR-friendly rendering:\n    // - When expanded: Use large value (9999px) to show all content before useEffect measures actual height\n    // - When collapsed: Use textCutoffHeight to truncate content appropriately\n    const [height, setHeight] = useState<number>(defaultExpanded ? 9999 : textCutoffHeight);\n    const [showViewToggle, setShowViewToggle] = useState<boolean>(false);\n    const [enableTransitions, setEnableTransitions] = useState<boolean>(false);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const toggleDescription = useCallback(\n        (event: MouseEvent<HTMLButtonElement>) => {\n            onClick?.(event);\n\n            // If disableExpand is true, call onClick but don't toggle the expansion\n            if (disableExpand) {\n                return;\n            }\n\n            // Enable transitions on first user interaction\n            setEnableTransitions(true);\n\n            setIsExpanded((prevIsExpanded) => {\n                const newHeight = prevIsExpanded\n                    ? textCutoffHeight\n                    : (contentRef.current?.scrollHeight ?? textCutoffHeight);\n                setHeight(newHeight);\n                onChange?.(!prevIsExpanded);\n\n                // Scroll to top when collapsing with custom smooth scroll to match 300ms transition\n                if (prevIsExpanded && containerRef.current) {\n                    const top = containerRef.current.getBoundingClientRect().top + window.scrollY - SCROLL_TOP_OFFSET;\n                    smoothScrollTo(top, SCROLL_DURATION);\n                }\n\n                return !prevIsExpanded;\n            });\n        },\n        [textCutoffHeight, onChange, onClick, disableExpand]\n    );\n\n    const updateView = useCallback(() => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        const scrollHeight = contentRef.current.scrollHeight;\n        const shouldShowToggle = scrollHeight > textCutoffHeight;\n        setShowViewToggle(shouldShowToggle);\n        setHeight(isExpanded || !shouldShowToggle ? scrollHeight : textCutoffHeight);\n    }, [isExpanded, textCutoffHeight]);\n\n    useEffect(() => {\n        if (!contentRef.current) {\n            return;\n        }\n        updateView();\n\n        const cleanupResizeListener = effectEventListener(window, 'resize', updateView);\n\n        // Add ResizeObserver to detect content height changes\n        const resizeObserver = new ResizeObserver(updateView);\n        resizeObserver.observe(contentRef.current);\n\n        return () => {\n            cleanupResizeListener();\n            resizeObserver.disconnect();\n        };\n    }, [updateView, children]);\n\n    return (\n        <div className={cn(className, 'flex flex-col gap-xs')}>\n            <div\n                className={cn('relative overflow-hidden', {\n                    'transition-all duration-300 ease-in-out': enableTransitions,\n                })}\n                data-testid=\"description-container\"\n                ref={containerRef}\n                style={{\n                    height: showViewToggle ? `${height}px` : 'auto',\n                    maxHeight: showViewToggle || isExpanded ? undefined : `${textCutoffHeight}px`,\n                }}\n            >\n                <div ref={contentRef}>{children}</div>\n                {showViewToggle && !removeFadeBackgroundColor && !isExpanded && (\n                    <div\n                        className=\"absolute bottom-0 left-0 right-0 h-xl w-full\"\n                        style={{\n                            background: fadeBackgroundColor\n                                ? `linear-gradient(to bottom, transparent, ${fadeBackgroundColor})`\n                                : `linear-gradient(to bottom, transparent, ${wrapVarRgb('--color-background-primary')})`,\n                        }}\n                    />\n                )}\n            </div>\n            {showViewToggle && (\n                <div\n                    className={cn('w-full', {\n                        'text-center': centerInlineButton,\n                    })}\n                >\n                    {useWeakInlineButton ? (\n                        <InlineButton\n                            className=\"w-fit\"\n                            icon={showIcon ? (isExpanded ? CaretUp : CaretDown) : undefined}\n                            iconPlacement=\"right\"\n                            onClick={toggleDescription}\n                            style=\"neutral\"\n                        >\n                            {isExpanded ? collapseText : expandText}\n                        </InlineButton>\n                    ) : (\n                        <InlineButton\n                            className=\"w-fit\"\n                            icon={showIcon ? (isExpanded ? CaretUp : CaretDown) : undefined}\n                            iconPlacement=\"right\"\n                            onClick={toggleDescription}\n                        >\n                            {isExpanded ? collapseText : expandText}\n                        </InlineButton>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/buttonColorClasses-B7OU4aQA.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttonColorClasses-B7OU4aQA.mjs","names":[],"sources":["../src/Button/buttonColorClasses.ts"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\n\n/**\n * Color class constants shared between Button and IconButton components.\n * Each constant represents a combination of variant (filled/outlined/transparent) and style (primary/critical/neutral/inverse).\n */\n\nexport const filledPrimaryClasses = cn(\n    'bg-primary-500 text-text-inverse outline-transparent hover:bg-primary-700 active:bg-primary-900 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:bg-primary-500 aria-busy:text-transparent'\n);\n\nexport const filledCriticalClasses = cn(\n    'bg-critical-500 text-text-inverse outline-transparent hover:bg-critical-700 active:bg-critical-900 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:bg-critical-500 aria-busy:text-transparent'\n);\n\nexport const filledNeutralClasses = cn(\n    'bg-surface-500 text-text-inverse outline-transparent hover:bg-surface-700 active:bg-surface-900 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:bg-surface-500 aria-busy:text-transparent'\n);\n\nexport const filledInverseClasses = cn(\n    'bg-surface-50 text-primary-500 outline-transparent focus:hui-focus-visible-outline-inverse hover:bg-surface-100 active:bg-surface-200 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:text-transparent'\n);\n\nexport const outlinedNeutralClasses = cn(\n    'bg-background-primary text-surface-500 outline outline-1 outline-current hover:bg-surface-100 hover:text-surface-700 active:bg-surface-200 active:text-surface-900 disabled:cursor-not-allowed disabled:bg-background-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:bg-background-primary aria-busy:text-transparent aria-busy:outline-surface-500'\n);\nexport const outlinedPrimaryClasses = cn(\n    'bg-background-primary text-primary-500 outline outline-1 outline-current hover:bg-primary-100 hover:text-primary-700 active:bg-primary-200 active:text-primary-900 disabled:cursor-not-allowed disabled:bg-background-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:bg-background-primary aria-busy:text-transparent aria-busy:outline-primary-500'\n);\n\nexport const outlinedCriticalClasses = cn(\n    'bg-background-primary text-critical-500 outline outline-1 outline-current hover:bg-critical-100 hover:text-critical-700 active:bg-critical-200 active:text-critical-900 disabled:cursor-not-allowed disabled:bg-background-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:bg-background-primary aria-busy:text-transparent aria-busy:outline-critical-500'\n);\n\nexport const outlinedInverseClasses = cn(\n    'outline-solid bg-transparent text-icon-inverse outline outline-1 outline-surface-50 focus:hui-focus-visible-outline-inverse hover:bg-background-hover-inverse focus:outline-focus-inverse active:bg-background-pressed-inverse disabled:cursor-not-allowed disabled:text-text-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:text-transparent'\n);\n\nexport const transparentPrimaryClasses = cn(\n    'bg-transparent text-primary-500 outline-transparent hover:bg-background-hover hover:text-primary-700 active:bg-background-pressed active:text-primary-900 disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:bg-background-pressed aria-busy:text-transparent'\n);\n\nexport const transparentCriticalClasses = cn(\n    'bg-transparent text-critical-500 outline-transparent hover:bg-background-hover hover:text-critical-700 active:bg-background-pressed active:text-critical-900 disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:bg-background-pressed aria-busy:text-transparent'\n);\n\nexport const transparentNeutralClasses = cn(\n    'bg-transparent text-surface-500 outline-transparent hover:bg-background-hover hover:text-surface-700 active:bg-background-pressed active:text-surface-900 disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:bg-background-pressed aria-busy:text-transparent'\n);\n\nexport const transparentInverseClasses = cn(\n    'bg-transparent text-icon-inverse outline-transparent focus:hui-focus-visible-outline-inverse hover:bg-background-hover-inverse active:bg-background-pressed-inverse disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:text-transparent'\n);\n"],"mappings":";;;;;;AAOA,MAAa,uBAAuB,GAChC,8OACJ;AAEA,MAAa,wBAAwB,GACjC,kPACJ;AAEA,MAAa,uBAAuB,GAChC,8OACJ;AAEA,MAAa,uBAAuB,GAChC,2PACJ;AAEA,MAAa,yBAAyB,GAClC,uXACJ;AACA,MAAa,yBAAyB,GAClC,uXACJ;AAEA,MAAa,0BAA0B,GACnC,6XACJ;AAEA,MAAa,yBAAyB,GAClC,iXACJ;AAEA,MAAa,4BAA4B,GACrC,uSACJ;AAEA,MAAa,6BAA6B,GACtC,0SACJ;AAEA,MAAa,4BAA4B,GACrC,uSACJ;AAEA,MAAa,4BAA4B,GACrC,iRACJ"}

package/buttonColorClasses-C3hg1at8.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttonColorClasses-C3hg1at8.cjs","names":[],"sources":["../src/Button/buttonColorClasses.ts"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\n\n/**\n * Color class constants shared between Button and IconButton components.\n * Each constant represents a combination of variant (filled/outlined/transparent) and style (primary/critical/neutral/inverse).\n */\n\nexport const filledPrimaryClasses = cn(\n    'bg-primary-500 text-text-inverse outline-transparent hover:bg-primary-700 active:bg-primary-900 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:bg-primary-500 aria-busy:text-transparent'\n);\n\nexport const filledCriticalClasses = cn(\n    'bg-critical-500 text-text-inverse outline-transparent hover:bg-critical-700 active:bg-critical-900 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:bg-critical-500 aria-busy:text-transparent'\n);\n\nexport const filledNeutralClasses = cn(\n    'bg-surface-500 text-text-inverse outline-transparent hover:bg-surface-700 active:bg-surface-900 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:bg-surface-500 aria-busy:text-transparent'\n);\n\nexport const filledInverseClasses = cn(\n    'bg-surface-50 text-primary-500 outline-transparent focus:hui-focus-visible-outline-inverse hover:bg-surface-100 active:bg-surface-200 disabled:cursor-not-allowed disabled:bg-background-disabled aria-busy:cursor-not-allowed aria-busy:text-transparent'\n);\n\nexport const outlinedNeutralClasses = cn(\n    'bg-background-primary text-surface-500 outline outline-1 outline-current hover:bg-surface-100 hover:text-surface-700 active:bg-surface-200 active:text-surface-900 disabled:cursor-not-allowed disabled:bg-background-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:bg-background-primary aria-busy:text-transparent aria-busy:outline-surface-500'\n);\nexport const outlinedPrimaryClasses = cn(\n    'bg-background-primary text-primary-500 outline outline-1 outline-current hover:bg-primary-100 hover:text-primary-700 active:bg-primary-200 active:text-primary-900 disabled:cursor-not-allowed disabled:bg-background-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:bg-background-primary aria-busy:text-transparent aria-busy:outline-primary-500'\n);\n\nexport const outlinedCriticalClasses = cn(\n    'bg-background-primary text-critical-500 outline outline-1 outline-current hover:bg-critical-100 hover:text-critical-700 active:bg-critical-200 active:text-critical-900 disabled:cursor-not-allowed disabled:bg-background-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:bg-background-primary aria-busy:text-transparent aria-busy:outline-critical-500'\n);\n\nexport const outlinedInverseClasses = cn(\n    'outline-solid bg-transparent text-icon-inverse outline outline-1 outline-surface-50 focus:hui-focus-visible-outline-inverse hover:bg-background-hover-inverse focus:outline-focus-inverse active:bg-background-pressed-inverse disabled:cursor-not-allowed disabled:text-text-disabled disabled:outline-border-disabled aria-busy:cursor-not-allowed aria-busy:text-transparent'\n);\n\nexport const transparentPrimaryClasses = cn(\n    'bg-transparent text-primary-500 outline-transparent hover:bg-background-hover hover:text-primary-700 active:bg-background-pressed active:text-primary-900 disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:bg-background-pressed aria-busy:text-transparent'\n);\n\nexport const transparentCriticalClasses = cn(\n    'bg-transparent text-critical-500 outline-transparent hover:bg-background-hover hover:text-critical-700 active:bg-background-pressed active:text-critical-900 disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:bg-background-pressed aria-busy:text-transparent'\n);\n\nexport const transparentNeutralClasses = cn(\n    'bg-transparent text-surface-500 outline-transparent hover:bg-background-hover hover:text-surface-700 active:bg-background-pressed active:text-surface-900 disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:bg-background-pressed aria-busy:text-transparent'\n);\n\nexport const transparentInverseClasses = cn(\n    'bg-transparent text-icon-inverse outline-transparent focus:hui-focus-visible-outline-inverse hover:bg-background-hover-inverse active:bg-background-pressed-inverse disabled:cursor-not-allowed disabled:bg-transparent aria-busy:cursor-not-allowed aria-busy:text-transparent'\n);\n"],"mappings":";;;;;;AAOA,MAAa,wBAAA,GAAA,wBAAA,GAAA,CACT,8OACJ;AAEA,MAAa,yBAAA,GAAA,wBAAA,GAAA,CACT,kPACJ;AAEA,MAAa,wBAAA,GAAA,wBAAA,GAAA,CACT,8OACJ;AAEA,MAAa,wBAAA,GAAA,wBAAA,GAAA,CACT,2PACJ;AAEA,MAAa,0BAAA,GAAA,wBAAA,GAAA,CACT,uXACJ;AACA,MAAa,0BAAA,GAAA,wBAAA,GAAA,CACT,uXACJ;AAEA,MAAa,2BAAA,GAAA,wBAAA,GAAA,CACT,6XACJ;AAEA,MAAa,0BAAA,GAAA,wBAAA,GAAA,CACT,iXACJ;AAEA,MAAa,6BAAA,GAAA,wBAAA,GAAA,CACT,uSACJ;AAEA,MAAa,8BAAA,GAAA,wBAAA,GAAA,CACT,0SACJ;AAEA,MAAa,6BAAA,GAAA,wBAAA,GAAA,CACT,uSACJ;AAEA,MAAa,6BAAA,GAAA,wBAAA,GAAA,CACT,iRACJ"}