@app-studio/components 0.10.17

package/dist/native/components/Button/Button/Button.props.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ButtonProps as $ButtonProps, Shadow, ViewProps } from 'app-studio';
+import { Elevation } from '../../../utils/elevation';
+import { IconPosition, Shape, Size, Variant, Animation, LoaderPosition } from './Button.type';
+import { LoaderProps } from '../../Loader/Loader/Loader.props';
+export interface ButtonProps extends Omit<$ButtonProps, 'size' | 'onClick' | 'variant' | 'shadow'> {
+    children?: React.ReactNode;
+    to?: string;
+    isLoading?: boolean;
+    loaderProps?: LoaderProps;
+    loaderPosition?: LoaderPosition;
+    icon?: React.ReactNode;
+    iconPosition?: IconPosition;
+    isDisabled?: boolean;
+    isFilled?: boolean;
+    isAuto?: boolean;
+    isIconRounded?: boolean;
+    onClick?: (...args: any) => any;
+    isExternal?: boolean;
+    isIcon?: boolean;
+    size?: Size;
+    shadow?: Shadow | Elevation | ViewProps;
+    shape?: Shape;
+    ariaLabel?: string;
+    variant?: Variant | string;
+    animation?: Animation;
+    color?: string;
+    textColor?: string;
+    reversed?: boolean;
+    borderMovingDuration?: number;
+    borderMovingGradientColors?: string[];
+    isHovered?: boolean;
+    animatedStrokeAccentColor?: string;
+    animatedStrokeTextColor?: string;
+    views?: {
+        container?: ViewProps;
+        content?: ViewProps;
+        loader?: ViewProps;
+        icon?: ViewProps;
+        link?: ViewProps;
+    };
+    config?: any;
+    keys?: any[];
+    label?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+}

package/dist/native/components/Button/Button/Button.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Button.props.js.map

package/dist/native/components/Button/Button/Button.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.props.js","sourceRoot":"","sources":["../../../../../src/components/Button/Button/Button.props.ts"],"names":[],"mappings":""}

package/dist/native/components/Button/Button/Button.state.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const useButtonState: () => {
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/native/components/Button/Button/Button.state.js

@@ -0,0 +1,10 @@
+import React from 'react';
+export const useButtonState = () => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    // This custom react hook 'useButtonState' is defined for managing the state of a button, especially for hover interactions.
+    return { isHovered, setIsHovered };
+    // The 'setIsHovered' function is used to update the value of 'isHovered' state when the hover status of the button changes.
+    // A state variable 'isHovered' is declared with its initial value set to 'false', indicating that the button is not hovered by default.
+};
+// The hook returns an object containing 'isHovered' state and the 'setIsHovered' function to enable state management from the consumer component.
+//# sourceMappingURL=Button.state.js.map

package/dist/native/components/Button/Button/Button.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.state.js","sourceRoot":"","sources":["../../../../../src/components/Button/Button/Button.state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,4HAA4H;IAC5H,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;IACnC,4HAA4H;IAC5H,wIAAwI;AAC1I,CAAC,CAAC;AACF,kJAAkJ"}

package/dist/native/components/Button/Button/Button.style.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Button Styles
+ *
+ * Defines the styles for the Button component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+import { ViewProps } from 'app-studio';
+import { Shape, Size, Variant } from './Button.type';
+export declare const ButtonSizes: Record<Size, ViewProps>;
+/**
+ * Button shapes with consistent border radius
+ */
+export declare const ButtonShapes: Record<Shape, number | string>;
+/**
+ * Icon sizes for different button sizes
+ */
+export declare const IconSizes: Record<Size, ViewProps>;
+/**
+ * Convert an app-studio token (`color-*`, `theme-*`, `light-*`, `dark-*`) into
+ * the equivalent CSS `var(--token)` reference so it can be embedded inside
+ * arbitrary CSS strings (box-shadow, gradients, …) where token resolution is
+ * not applied. Non-token values are returned unchanged.
+ */
+export declare const cssVar: (value: string) => string;
+export declare const getButtonVariants: (color: string, textColor: string, reversed?: boolean, theme?: any) => Record<Variant, ViewProps>;
+/**
+ * Generate offset path for border animation
+ */
+export declare function generateOffsetPath(width: number, height: number, borderRadius: number | string): string;

package/dist/native/components/Button/Button/Button.style.js

@@ -0,0 +1,256 @@
+/**
+ * Button Styles
+ *
+ * Defines the styles for the Button component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+export const ButtonSizes = {
+    xs: {
+        minHeight: 24,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        fontSize: 10,
+        fontWeight: 500,
+        lineHeight: 12,
+        letterSpacing: '-0.01em',
+    },
+    sm: {
+        minHeight: 32,
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        fontSize: 12,
+        fontWeight: 500,
+        lineHeight: 16,
+        letterSpacing: '-0.01em',
+    },
+    md: {
+        minHeight: 40,
+        paddingHorizontal: 20,
+        paddingVertical: 10,
+        fontSize: 14,
+        fontWeight: 500,
+        lineHeight: 20,
+        letterSpacing: '-0.01em',
+    },
+    lg: {
+        minHeight: 48,
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        fontSize: 16,
+        fontWeight: 500,
+        lineHeight: 24,
+        letterSpacing: '-0.01em',
+    },
+    xl: {
+        minHeight: 56,
+        paddingHorizontal: 28,
+        paddingVertical: 14,
+        fontSize: 20,
+        fontWeight: 500,
+        lineHeight: 28,
+        letterSpacing: '-0.01em',
+    },
+};
+/**
+ * Button shapes with consistent border radius
+ */
+export const ButtonShapes = {
+    square: 0,
+    rounded: 8,
+    pill: 999, // Full rounded for pill shape
+};
+/**
+ * Icon sizes for different button sizes
+ */
+export const IconSizes = {
+    xs: {
+        width: 16,
+        height: 16,
+        padding: 6,
+    },
+    sm: {
+        width: 20,
+        height: 20,
+        padding: 6,
+    },
+    md: {
+        width: 24,
+        height: 24,
+        padding: 8,
+    },
+    lg: {
+        width: 24,
+        height: 24,
+        padding: 12,
+    },
+    xl: {
+        width: 28,
+        height: 28,
+        padding: 14,
+    },
+};
+/**
+ * Convert an app-studio token (`color-*`, `theme-*`, `light-*`, `dark-*`) into
+ * the equivalent CSS `var(--token)` reference so it can be embedded inside
+ * arbitrary CSS strings (box-shadow, gradients, …) where token resolution is
+ * not applied. Non-token values are returned unchanged.
+ */
+export const cssVar = (value) => /^(color|theme|light|dark)-/.test(value) ? `var(--${value})` : value;
+const normalizeHex = (value) => {
+    const match = value.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (!match)
+        return null;
+    const hex = match[1].length === 3
+        ? match[1]
+            .split('')
+            .map((char) => `${char}${char}`)
+            .join('')
+        : match[1];
+    return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+    };
+};
+const mixHex = (value, alpha) => {
+    const color = normalizeHex(value);
+    if (!color)
+        return value;
+    const target = alpha < 100 ? 255 : 0;
+    const amount = Math.min(Math.abs(100 - alpha) / 100, 0.28);
+    const toHex = (channel) => Math.round(channel + (target - channel) * amount)
+        .toString(16)
+        .padStart(2, '0');
+    return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
+};
+const tintColor = (value, alpha) => mixHex(value, alpha);
+export const getButtonVariants = (color, textColor, reversed = false, theme) => {
+    // Determine effective tokens based on reversed state
+    const effectiveBg = reversed ? textColor : color;
+    const effectiveContent = reversed ? color : textColor;
+    const effectiveBorder = reversed ? textColor : color;
+    // For filled buttons, if the background is the primary color, use onPrimary for text contrast.
+    const isPrimary = color === 'theme-primary' || (theme && color === theme.primary);
+    const filledTextColor = isPrimary && theme?.onPrimary ? theme.onPrimary : effectiveContent;
+    // App-Studio alpha syntax: `{token}-{alpha}` (alpha 0–1000 → 0%–100% opacity).
+    const focusRing = `0 0 0 2px ${cssVar('color-white')}, 0 0 0 4px ${cssVar(effectiveBorder)}`;
+    return {
+        filled: {
+            backgroundColor: effectiveBg,
+            color: filledTextColor,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: effectiveBg,
+            _hover: { opacity: 0.92 },
+            _active: { opacity: 0.96 },
+            _focusVisible: { outline: 'none', boxShadow: focusRing },
+            transition: 'background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease',
+        },
+        empty: {
+            color: effectiveBorder,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: effectiveBorder,
+            backgroundColor: 'transparent',
+            _hover: { opacity: 0.9 },
+            _active: { opacity: 0.95 },
+            _focusVisible: { outline: 'none', boxShadow: focusRing },
+            transition: 'background-color 0.2s ease, opacity 0.2s ease',
+        },
+        outline: {
+            color: effectiveBorder,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: effectiveBorder,
+            backgroundColor: 'transparent',
+            _hover: { opacity: 0.9 },
+            _active: { opacity: 0.95 },
+            _focusVisible: { outline: 'none', boxShadow: focusRing },
+            transition: 'background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease',
+        },
+        ghost: {
+            color: effectiveBorder,
+            borderWidth: 0,
+            borderStyle: 'solid',
+            borderColor: effectiveBorder,
+            backgroundColor: 'transparent',
+            _hover: { opacity: 0.86 },
+            _active: { opacity: 0.94 },
+            _focusVisible: { outline: 'none', boxShadow: focusRing },
+            transition: 'background-color 0.2s ease, color 0.2s ease',
+        },
+        link: {
+            color: effectiveBorder,
+            borderWidth: 0,
+            borderStyle: 'none',
+            borderColor: effectiveBorder,
+            minHeight: 'auto',
+            paddingHorizontal: '4px',
+            paddingVertical: '10px',
+            textDecoration: 'underline',
+            backgroundColor: 'transparent',
+            style: {
+                textUnderlineOffset: '2px',
+                textDecorationThickness: '1px',
+                textDecorationColor: cssVar(effectiveBorder),
+            },
+            _hover: { opacity: 0.8 },
+            _active: { opacity: 0.9 },
+            _focusVisible: { outline: 'none', boxShadow: focusRing },
+            transition: 'opacity 0.2s ease',
+        },
+        subtle: {
+            // Use app-studio alpha-token syntax: append `-{alpha}` (0–1000) to the
+            // color token, e.g. `color-green-900` → `color-green-900-300` for 30%.
+            // Background and border get translucent tints; text stays at full
+            // opacity so the label remains readable.
+            backgroundColor: `${effectiveBorder}-${reversed ? 200 : 100}`,
+            color: effectiveBorder,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: `${effectiveBorder}-${reversed ? 400 : 250}`,
+            _hover: {
+                backgroundColor: `${effectiveBorder}-${reversed ? 300 : 180}`,
+            },
+            _active: {
+                backgroundColor: `${effectiveBorder}-${reversed ? 380 : 240}`,
+            },
+            _focusVisible: { outline: 'none', boxShadow: focusRing },
+            transition: 'background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease',
+        },
+    };
+};
+/**
+ * Generate offset path for border animation
+ */
+export function generateOffsetPath(width, height, borderRadius) {
+    let radius;
+    if (typeof borderRadius === 'string' && borderRadius.endsWith('%')) {
+        const percentage = parseFloat(borderRadius) / 100;
+        radius = Math.min(width, height) * percentage;
+    }
+    else {
+        radius = parseFloat(borderRadius.toString());
+    }
+    radius = Math.min(radius, width / 2, height / 2);
+    if (radius === 0) {
+        return `M 0,0 H ${width} V ${height} H 0 Z`;
+    }
+    return `
+    M ${radius},0
+    H ${width - radius}
+    A ${radius},${radius} 0 0 1 ${width},${radius}
+    V ${height - radius}
+    A ${radius},${radius} 0 0 1 ${width - radius},${height}
+    H ${radius}
+    A ${radius},${radius} 0 0 1 0,${height - radius}
+    V ${radius}
+    A ${radius},${radius} 0 0 1 ${radius},0
+    Z
+  `;
+}
+//# sourceMappingURL=Button.style.js.map

package/dist/native/components/Button/Button/Button.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.style.js","sourceRoot":"","sources":["../../../../../src/components/Button/Button/Button.style.ts"],"names":[],"mappings":"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"}

package/dist/native/components/Button/Button/Button.view.d.ts

@@ -0,0 +1,9 @@
+/**
+ * ButtonView component – minimal and design‑system aligned.
+ * - Chooses a **main color** with priority: `backgroundColor` → `color` → `theme-primary`.
+ * - Uses `getButtonVariants` to derive base/hover/active styles per variant.
+ */
+import React from 'react';
+import { ButtonProps } from './Button.props';
+declare const ButtonView: React.NamedExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
+export default ButtonView;

package/dist/native/components/Button/Button/Button.view.js

@@ -0,0 +1,245 @@
+/**
+ * ButtonView component – minimal and design‑system aligned.
+ * - Chooses a **main color** with priority: `backgroundColor` → `color` → `theme-primary`.
+ * - Uses `getButtonVariants` to derive base/hover/active styles per variant.
+ */
+import React, { useMemo } from 'react';
+import { Element, Horizontal, Vertical, View } from 'app-studio';
+import { Link } from '../../Link/Link';
+import { Loader } from '../../Loader/Loader';
+import { ButtonSizes, ButtonShapes, IconSizes, getButtonVariants, cssVar, } from './Button.style';
+import { useDesignSystem, deepMerge } from '../../../design-system';
+// --- Helper: Button Content ---
+// Renders the inner content: Loader, Icon, and Children.
+const ButtonContent = React.memo(({ children, icon, isLoading, iconPosition = 'left', loaderPosition = 'left', size = 'md', resolvedTextColor, isIconRounded, views, }) => {
+    const Wrapper = ['left', 'right'].includes(iconPosition)
+        ? Horizontal
+        : Vertical;
+    const sizeStyles = ButtonSizes[size];
+    return (<Wrapper gap={8} alignItems="center" justifyContent="center" fontSize={sizeStyles.fontSize} fontWeight={sizeStyles.fontWeight} lineHeight={sizeStyles.lineHeight} letterSpacing={sizeStyles.letterSpacing} whiteSpace="nowrap" color={resolvedTextColor} {...views?.content}>
+        {isLoading && loaderPosition === 'left' && (<Loader size={size === 'xs' || size === 'sm' ? 'sm' : 'md'} color={resolvedTextColor} {...views?.loader}/>)}
+
+        {icon && ['left', 'top'].includes(iconPosition) && !isLoading && (<View color={resolvedTextColor} {...views?.icon}>
+            {icon}
+          </View>)}
+
+        {children}
+
+        {icon && ['right', 'bottom'].includes(iconPosition) && !isLoading && (<View color={resolvedTextColor} {...views?.icon}>
+            {icon}
+          </View>)}
+
+        {isLoading && loaderPosition === 'right' && (<Loader size={size === 'xs' || size === 'sm' ? 'sm' : 'md'} color={resolvedTextColor} {...views?.loader}/>)}
+      </Wrapper>);
+});
+// --- Animation Logic moved to StandardButton ---
+// --- Variant: Standard Button ---
+// --- Helpers ---
+// Helper to calculate numeric border radius
+const getNumericBorderRadius = (shape) => {
+    const shapeValue = ButtonShapes[shape];
+    if (typeof shapeValue === 'number')
+        return shapeValue;
+    if (typeof shapeValue === 'string')
+        return parseInt(shapeValue, 10) || 0;
+    return 0;
+};
+// Common Inner Button Surface
+const InnerButton = ({ asComponent, isDisabled, isLoading, isWrapped = false, borderRadius, width, height, baseStyles, sizeStyles, iconPad, mainTone, resolvedTextColor, children, borderWidth = 0, ...props }) => {
+    return (<Element as={asComponent} disabled={Boolean(isDisabled || isLoading)} display={isWrapped ? 'flex' : 'inline-flex'} alignItems="center" justifyContent="center" borderRadius={borderRadius} width={width} height={height} {...baseStyles} {...sizeStyles} {...iconPad} 
+    // Ensure background is solid for wrapped buttons if baseStyles doesn't provide it
+    backgroundColor={baseStyles?.backgroundColor || (isWrapped ? mainTone : undefined)} color={resolvedTextColor} borderWidth={isWrapped ? 0 : undefined} cursor={isDisabled ? 'default' : 'pointer'} {...props}>
+      {children}
+    </Element>);
+};
+// Common Header for Border Animations
+const BorderWrapper = ({ shape, isDisabled, onClick, shadow, borderWidth, isAuto, isFilled, views, children, ...props }) => (<Element as="div" position="relative" display="inline-flex" alignItems="center" justifyContent="center" borderRadius={ButtonShapes[shape]} cursor={isDisabled ? 'default' : 'pointer'} onClick={onClick} boxShadow={shadow} padding={borderWidth} width={isAuto ? 'fit-content' : isFilled ? '100%' : undefined} {...views?.container} {...props}>
+    {children}
+  </Element>);
+// --- Variant: Standard Button ---
+const StandardButton = ({ variant, animation, to, isDisabled, isLoading, isAuto, isFilled, isExternal, shape = 'rounded', shadow, onClick, views, baseStyles, sizeStyles, iconPad, containerRef, resolvedTextColor, content, size, mainTone, borderMovingDuration = 2, borderMovingGradientColors = ['#705CFF', '#FF5C97', '#FFC75C'], animatedStrokeAccentColor = '#705CFF', animatedStrokeTextColor = '#333333', ...props }) => {
+    // --- Common Helpers ---
+    const numericBorderRadius = getNumericBorderRadius(shape);
+    const linkOrContent = to ? (<Link to={to} isExternal={isExternal} color="currentColor" textDecoration="inherit" _hover={{ color: 'currentColor' }} {...views?.link}>
+      {content}
+    </Link>) : (content);
+    const innerProps = {
+        isDisabled,
+        isLoading,
+        baseStyles,
+        sizeStyles,
+        iconPad,
+        resolvedTextColor,
+        mainTone,
+        children: linkOrContent,
+    };
+    // --- Animation: Border Moving ---
+    if (animation === 'borderMoving' && borderMovingGradientColors) {
+        const borderWidth = 3;
+        const borderAnimation = {
+            from: { backgroundPosition: '0% 50%' },
+            to: { backgroundPosition: '200% 50%' },
+            duration: `${borderMovingDuration}s`,
+            timingFunction: 'linear',
+            iterationCount: 'infinite',
+        };
+        return (<BorderWrapper shape={shape} isDisabled={isDisabled} onClick={onClick} shadow={shadow} borderWidth={borderWidth} isAuto={isAuto} isFilled={isFilled} views={views} background={`linear-gradient(90deg, ${cssVar(borderMovingGradientColors[0])}, ${cssVar(borderMovingGradientColors[1])}, ${cssVar(borderMovingGradientColors[2])}, ${cssVar(borderMovingGradientColors[0])})`} backgroundSize="200% 100%" animate={borderAnimation} {...props}>
+        <InnerButton asComponent={to ? 'div' : 'button'} isWrapped={true} borderRadius={Math.max(0, numericBorderRadius - borderWidth)} width="100%" height="100%" {...innerProps}/>
+      </BorderWrapper>);
+    }
+    // --- Animation: Animated Stroke ---
+    if (animation === 'animatedStroke') {
+        // SVG stroke / CSS color need a real CSS value — wrap tokens in var(--…).
+        const resolvedAccentColor = cssVar(animatedStrokeAccentColor);
+        const resolvedStrokeTextColor = cssVar(animatedStrokeTextColor);
+        const strokePathLength = 1000;
+        const strokeAnimation = {
+            from: {
+                strokeWidth: '8px',
+                strokeDasharray: `0 ${strokePathLength}`,
+                strokeDashoffset: -Math.round(strokePathLength * 0.63),
+            },
+            to: {
+                strokeWidth: '3px',
+                strokeDasharray: `${strokePathLength}`,
+                strokeDashoffset: 0,
+            },
+            duration: '0.9s',
+            timingFunction: 'ease-in',
+            fillMode: 'forwards',
+        };
+        const mergedClassName = [
+            'group',
+            views?.container?.className,
+            props?.className,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (<Element ref={containerRef} as={to ? 'div' : 'button'} type={to ? undefined : 'button'} disabled={Boolean(!to && (isDisabled || isLoading))} onClick={onClick} position="relative" display="inline-flex" alignItems="center" justifyContent="center" width={isAuto ? 'fit-content' : isFilled ? '100%' : undefined} borderRadius={ButtonShapes[shape]} boxShadow={shadow} transition="background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease" cursor={isDisabled ? 'default' : 'pointer'} color={resolvedStrokeTextColor} backgroundColor="transparent" borderWidth={0} {...views?.container} {...props} className={mergedClassName}>
+        <View as="svg" position="absolute" top={0} right={0} bottom={0} left={0} width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" pointerEvents="none" zIndex={1} aria-hidden="true">
+          <View as="rect" x="0" y="0" height="100%" width="100%" rx={numericBorderRadius} ry={numericBorderRadius} fill="transparent" stroke={resolvedAccentColor} strokeWidth="8px" strokeDasharray={`0 ${strokePathLength}`} strokeDashoffset={-Math.round(strokePathLength * 0.63)} {...{ pathLength: strokePathLength }} on={{
+                groupHover: {
+                    animate: strokeAnimation,
+                },
+            }}/>
+        </View>
+
+        <View position="relative" zIndex={0}>
+          {linkOrContent}
+        </View>
+      </Element>);
+    }
+    // --- Animation: Border Reveal ---
+    if (animation === 'borderReveal') {
+        const borderWidth = 3;
+        // Use the first color from gradient colors or fall back to mainTone.
+        // Wrap in var(--…) so app-studio tokens render inside CSS gradient strings.
+        const activeColor = cssVar(borderMovingGradientColors?.[0] || mainTone || '#000000');
+        // Sides duration
+        // The default duration (2s) is too slow for a hover interaction.
+        // We scale it by 0.25 to make it responsive (0.5s total).
+        const effectiveDuration = borderMovingDuration * 0.75;
+        const sideDuration = effectiveDuration / 4;
+        // Gradients for each side (color 50%, transparent 50%)
+        const topGrad = `linear-gradient(90deg, ${activeColor} 50%, transparent 50%)`;
+        const rightGrad = `linear-gradient(180deg, ${activeColor} 50%, transparent 50%)`;
+        const bottomGrad = `linear-gradient(270deg, ${activeColor} 50%, transparent 50%)`;
+        const leftGrad = `linear-gradient(0deg, ${activeColor} 50%, transparent 50%)`;
+        // Coordinates:
+        // Top (L->R): 100% 0 -> 0 0
+        // Right (T->B): 100% 100% -> 100% 0
+        // Bottom (R->L): 0 100% -> 100% 100%
+        // Left (B->T): 0 0 -> 0 100%
+        const bgPosStart = `100% 0, 100% 100%, 0 100%, 0 0`;
+        const bgPosEnd = `0 0, 100% 0, 100% 100%, 0 100%`;
+        // Delays:
+        // Enter (Forward): Top(0), Right(1), Bottom(2), Left(3)
+        const delayEnter = `0s, ${sideDuration}s, ${sideDuration * 2}s, ${sideDuration * 2}s`;
+        // Exit (Reverse): Top(3), Right(2), Bottom(1), Left(0)
+        const delayExit = `${sideDuration * 2}s, ${sideDuration * 2}s, ${sideDuration}s, 0s`;
+        // Use slightly larger gradient size to overlap with button content (avoid gaps)
+        const gradientSize = borderWidth + 1;
+        return (<Element ref={containerRef} as="div" position="relative" display="inline-flex" alignItems="center" justifyContent="center" borderRadius={ButtonShapes[shape]} cursor={isDisabled ? 'default' : 'pointer'} onClick={onClick} boxShadow={shadow} padding={borderWidth} background={`
+          ${topGrad} no-repeat,
+          ${rightGrad} no-repeat,
+          ${bottomGrad} no-repeat,
+          ${leftGrad} no-repeat
+        `} backgroundSize={`200% ${gradientSize}px, ${gradientSize}px 200%, 200% ${gradientSize}px, ${gradientSize}px 200%`} 
+        // Default State (Hidden)
+        backgroundPosition={bgPosStart} transitionProperty="background-position" transitionDuration={`${sideDuration}s`} transitionTimingFunction="linear" transitionDelay={delayExit} 
+        // Hover State (Visible)
+        _hover={{
+                backgroundPosition: bgPosEnd,
+                transitionDelay: delayEnter,
+            }} width={isAuto ? 'fit-content' : isFilled ? '100%' : undefined} {...views?.container} {...props}>
+        <View as={to ? 'div' : 'button'} disabled={Boolean(isDisabled || isLoading)} display="flex" alignItems="center" justifyContent="center" borderRadius={Math.max(0, numericBorderRadius - borderWidth)} width="100%" height="100%" {...baseStyles} {...sizeStyles} {...iconPad} backgroundColor={baseStyles?.backgroundColor || mainTone} color={resolvedTextColor} borderWidth={0} cursor={isDisabled ? 'default' : 'pointer'}>
+          {linkOrContent}
+        </View>
+      </Element>);
+    }
+    // --- Default: Standard Button ---
+    return (<Element ref={containerRef} as={variant === 'link' && to ? 'div' : 'button'} type={variant === 'link' && to ? undefined : 'button'} disabled={Boolean(isDisabled || isLoading)} 
+    /* sizing */
+    {...sizeStyles} {...iconPad} // Apply icon padding if needed
+     display="inline-flex" alignItems="center" justifyContent="center" width={isAuto ? 'fit-content' : isFilled ? '100%' : undefined} 
+    /* visuals */
+    borderRadius={ButtonShapes[shape]} boxShadow={shadow} transition="background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease" cursor={isDisabled ? 'default' : 'pointer'} onClick={onClick} {...baseStyles} {...views?.container} {...props}>
+      {linkOrContent}
+    </Element>);
+};
+// --- Main Component ---
+const ButtonView = React.memo(React.forwardRef(({ 
+/* behaviour */
+variant = 'filled', size = 'md', shape = 'rounded', iconPosition = 'left', loaderPosition = 'left', backgroundColor, // Primary override for main color
+color, // Main button color (theme tokens or color palette)
+textColor, // Explicit text color
+reversed = false, // Reverse colors for dark backgrounds
+isAuto = true, isFilled, isDisabled, isLoading, isIconRounded, isHovered, 
+/* content */
+icon, children, 
+/* nav */
+to, isExternal, 
+/* misc */
+shadow, onClick, views = {}, animation, loaderProps, config: buttonConfig, ariaLabel, 
+/* effect props */
+borderMovingDuration = 2, borderMovingGradientColors = ['#705CFF', '#FF5C97', '#FFC75C'], animatedStrokeAccentColor = '#705CFF', animatedStrokeTextColor = '#333333', ...props }, ref) => {
+    /* MAIN COLOR – an app-studio token that drives the whole palette.
+     *   Priority: explicit backgroundColor → color → theme-primary.
+     *   State overrides: disabled → theme-disabled, loading → theme-loading.
+     *   Tokens are passed straight through to app-studio (no hex conversion). */
+    const baseColorKey = backgroundColor ?? color ?? 'theme-primary';
+    const mainColorKey = isDisabled
+        ? 'theme-disabled'
+        : isLoading
+            ? 'theme-loading'
+            : baseColorKey;
+    /* TEXT COLOR – token; defaults to color-white */
+    const textColorKey = textColor ?? 'color-white';
+    /* variant palette */
+    const { config } = useDesignSystem();
+    const theme = config?.theme;
+    const palette = useMemo(() => {
+        const basePalette = getButtonVariants(mainColorKey, textColorKey, reversed, theme);
+        // Merge with any variant overrides from config
+        if (buttonConfig?.variants) {
+            Object.keys(buttonConfig.variants).forEach((v) => {
+                if (basePalette[v]) {
+                    basePalette[v] = deepMerge(basePalette[v], buttonConfig.variants[v]);
+                }
+            });
+        }
+        return basePalette;
+    }, [mainColorKey, textColorKey, reversed, theme, buttonConfig?.variants]);
+    const base = palette[variant];
+    const finalContentColor = base?.color ?? textColorKey;
+    // Render content logic safely
+    const content = (<ButtonContent icon={icon} isLoading={isLoading} iconPosition={iconPosition} loaderPosition={loaderPosition} size={size} resolvedTextColor={finalContentColor} isIconRounded={isIconRounded} views={views}>
+          {children}
+        </ButtonContent>);
+    // Standard variants (filled, outline, ghost, link)
+    const sizeStyles = ButtonSizes[size];
+    const iconPad = isIconRounded ? IconSizes[size] : {};
+    return (<StandardButton variant={variant} animation={animation} to={to} isDisabled={isDisabled} isLoading={isLoading} isAuto={isAuto} isFilled={isFilled} isExternal={isExternal} shape={shape} shadow={shadow} onClick={onClick} views={views} baseStyles={base} sizeStyles={sizeStyles} iconPad={iconPad} resolvedTextColor={finalContentColor} content={content} size={size} mainTone={mainColorKey} borderMovingDuration={borderMovingDuration} borderMovingGradientColors={borderMovingGradientColors} animatedStrokeAccentColor={animatedStrokeAccentColor} animatedStrokeTextColor={animatedStrokeTextColor} containerRef={ref} {...props}/>);
+}));
+export default ButtonView;
+//# sourceMappingURL=Button.view.js.map