zkit-ui 1.0.0

package/dist/ui/Button/index.js

@@ -0,0 +1,832 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const zkit_tools_1 = require("zkit-tools");
+const useTheme_1 = require("../../theme/useTheme");
+const LoadingSpinner_1 = require("../LoadingSpinner");
+const Text_1 = require("../Text");
+const AnimatedPressable = react_native_reanimated_1.default.createAnimatedComponent(react_native_1.Pressable);
+const PRESS_TIMING = {
+    duration: 120,
+    easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic),
+    reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+};
+const LOADING_TIMING = {
+    duration: 180,
+    easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic),
+    reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+};
+const DISABLED_OPACITY = 0.52;
+const PRESSED_OPACITY = 0.82;
+const PRESSED_SCALE = 0.985;
+const LOADING_SIZE_VISUAL_SCALE = 1.2;
+const SEMANTIC_COLORS = {
+    danger: '#DC2626',
+    error: '#DC2626',
+    info: '#2563EB',
+    success: '#16A34A',
+    warn: '#D97706',
+    warning: '#D97706',
+};
+const SIZE_TOKENS = {
+    xs: {
+        minHeight: 32,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        gap: 5,
+        radius: 10,
+        iconOnlySide: 32,
+        iconSize: 15,
+        textSize: 13,
+        textLineHeight: 18,
+    },
+    sm: {
+        minHeight: 36,
+        paddingHorizontal: 12,
+        paddingVertical: 7,
+        gap: 6,
+        radius: 12,
+        iconOnlySide: 36,
+        iconSize: 16,
+        textSize: 14,
+        textLineHeight: 19,
+    },
+    md: {
+        minHeight: 44,
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        gap: 8,
+        radius: 14,
+        iconOnlySide: 44,
+        iconSize: 18,
+        textSize: 15,
+        textLineHeight: 21,
+    },
+    lg: {
+        minHeight: 48,
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        gap: 9,
+        radius: 16,
+        iconOnlySide: 48,
+        iconSize: 20,
+        textSize: 16,
+        textLineHeight: 22,
+    },
+    xl: {
+        minHeight: 56,
+        paddingHorizontal: 24,
+        paddingVertical: 14,
+        gap: 10,
+        radius: 18,
+        iconOnlySide: 56,
+        iconSize: 22,
+        textSize: 17,
+        textLineHeight: 24,
+    },
+};
+const GRADIENT_DIRECTIONS = {
+    'to bottom': { start: { x: 0.5, y: 0 }, end: { x: 0.5, y: 1 } },
+    'to bottom left': { start: { x: 1, y: 0 }, end: { x: 0, y: 1 } },
+    'to bottom right': { start: { x: 0, y: 0 }, end: { x: 1, y: 1 } },
+    'to left': { start: { x: 1, y: 0.5 }, end: { x: 0, y: 0.5 } },
+    'to right': { start: { x: 0, y: 0.5 }, end: { x: 1, y: 0.5 } },
+    'to top': { start: { x: 0.5, y: 1 }, end: { x: 0.5, y: 0 } },
+    'to top left': { start: { x: 1, y: 1 }, end: { x: 0, y: 0 } },
+    'to top right': { start: { x: 0, y: 1 }, end: { x: 1, y: 0 } },
+};
+let cachedLinearGradientComponent;
+function resolveDefaultLoadingSize(iconSize, availableHeight) {
+    const scaled = iconSize * LOADING_SIZE_VISUAL_SCALE;
+    if (availableHeight == null || !Number.isFinite(availableHeight) || availableHeight <= 0) {
+        return scaled;
+    }
+    return Math.min(scaled, Math.max(0, availableHeight));
+}
+function resolveMetrics(size) {
+    var _a;
+    const token = (_a = SIZE_TOKENS[size]) !== null && _a !== void 0 ? _a : SIZE_TOKENS.md;
+    const loadingContentHeight = token.minHeight - token.paddingVertical * 2;
+    return {
+        minHeight: (0, zkit_tools_1.wp)(token.minHeight),
+        paddingHorizontal: (0, zkit_tools_1.wp)(token.paddingHorizontal),
+        paddingVertical: (0, zkit_tools_1.wp)(token.paddingVertical),
+        gap: (0, zkit_tools_1.wp)(token.gap),
+        radius: (0, zkit_tools_1.wp)(token.radius),
+        iconOnlySide: (0, zkit_tools_1.wp)(token.iconOnlySide),
+        iconSize: (0, zkit_tools_1.wp)(token.iconSize),
+        loadingSize: (0, zkit_tools_1.wp)(resolveDefaultLoadingSize(token.iconSize, loadingContentHeight)),
+        textSize: (0, zkit_tools_1.wp)(token.textSize),
+        textLineHeight: (0, zkit_tools_1.wp)(token.textLineHeight),
+        borderWidth: (0, zkit_tools_1.wp)(1),
+        linkPaddingVertical: (0, zkit_tools_1.wp)(2),
+        minTouchTarget: (0, zkit_tools_1.wp)(44),
+    };
+}
+function isPrimitiveTextChild(children) {
+    return typeof children === 'string' || typeof children === 'number';
+}
+function normalizeNumber(input) {
+    if (typeof input === 'number')
+        return Number.isFinite(input) ? input : undefined;
+    if (typeof input !== 'string')
+        return undefined;
+    const value = input.trim();
+    if (!value || value === 'auto' || value.endsWith('%'))
+        return undefined;
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+function isProcessableColor(color) {
+    return (0, react_native_1.processColor)(color) != null;
+}
+function colorToRgba(color, alpha) {
+    const processed = (0, react_native_1.processColor)(color);
+    if (typeof processed !== 'number')
+        return undefined;
+    const normalized = processed >>> 0;
+    const r = (normalized >> 16) & 255;
+    const g = (normalized >> 8) & 255;
+    const b = normalized & 255;
+    const a = Math.max(0, Math.min(1, alpha));
+    return `rgba(${r},${g},${b},${a})`;
+}
+function resolveColorToken(input, fallback, theme) {
+    var _a;
+    if (input == null)
+        return fallback;
+    const key = input.trim();
+    if (!key)
+        return fallback;
+    const resolved = key === 'primary'
+        ? theme.colors.primary
+        : key === 'onPrimary'
+            ? theme.colors.onPrimary
+            : key === 'secondary' || key === 'neutral'
+                ? theme.colors.secondary
+                : key === 'onSecondary'
+                    ? theme.colors.onSecondary
+                    : key === 'surface'
+                        ? theme.colors.surface
+                        : key === 'onSurface'
+                            ? theme.colors.onSurface
+                            : key === 'border'
+                                ? theme.colors.border
+                                : key === 'muted'
+                                    ? theme.colors.muted
+                                    : key === 'disabled'
+                                        ? theme.colors.disabled
+                                        : (_a = SEMANTIC_COLORS[key]) !== null && _a !== void 0 ? _a : key;
+    return isProcessableColor(resolved) ? resolved : fallback;
+}
+function resolveTonePalette(tone, theme) {
+    if (tone === 'neutral') {
+        return {
+            color: theme.colors.onSurface,
+            onColor: theme.colors.surface,
+        };
+    }
+    if (tone === 'success') {
+        return {
+            color: SEMANTIC_COLORS.success,
+            onColor: '#FFFFFF',
+        };
+    }
+    if (tone === 'warning') {
+        return {
+            color: SEMANTIC_COLORS.warning,
+            onColor: '#111827',
+        };
+    }
+    if (tone === 'danger') {
+        return {
+            color: SEMANTIC_COLORS.danger,
+            onColor: '#FFFFFF',
+        };
+    }
+    if (tone === 'info') {
+        return {
+            color: SEMANTIC_COLORS.info,
+            onColor: '#FFFFFF',
+        };
+    }
+    return {
+        color: theme.colors.primary,
+        onColor: theme.colors.onPrimary,
+    };
+}
+function degToVector(deg) {
+    const rad = (deg * Math.PI) / 180;
+    const x = Math.cos(rad);
+    const y = Math.sin(rad);
+    const len = Math.sqrt(x * x + y * y) || 1;
+    return { x: x / len, y: y / len };
+}
+function parseGradient(gradient) {
+    var _a;
+    if (!gradient || gradient.colors.length < 2)
+        return undefined;
+    const colors = gradient.colors.map((x) => String(x).trim()).filter(Boolean);
+    if (colors.length < 2)
+        return undefined;
+    if (gradient.start || gradient.end) {
+        return { colors, start: gradient.start, end: gradient.end };
+    }
+    const direction = (_a = gradient.direction) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    if (!direction)
+        return { colors };
+    if (direction.startsWith('to ')) {
+        return { colors, ...GRADIENT_DIRECTIONS[direction] };
+    }
+    const deg = Number.parseFloat(direction.replace('deg', '').trim());
+    if (!Number.isFinite(deg))
+        return { colors };
+    const v = degToVector(deg);
+    return {
+        colors,
+        start: { x: 0.5 - v.x * 0.5, y: 0.5 - v.y * 0.5 },
+        end: { x: 0.5 + v.x * 0.5, y: 0.5 + v.y * 0.5 },
+    };
+}
+function pickLinearGradientComponent() {
+    var _a;
+    if (cachedLinearGradientComponent !== undefined)
+        return cachedLinearGradientComponent;
+    try {
+        const mod = require('expo-linear-gradient');
+        cachedLinearGradientComponent = (_a = mod.LinearGradient) !== null && _a !== void 0 ? _a : null;
+    }
+    catch {
+        cachedLinearGradientComponent = null;
+    }
+    return cachedLinearGradientComponent;
+}
+function resolveShadowStyle(shadow, scheme, variant) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!shadow || shadow === 'none' || variant === 'ghost' || variant === 'link')
+        return undefined;
+    if (typeof shadow === 'object') {
+        const radius = Math.max(0, (_a = shadow.radius) !== null && _a !== void 0 ? _a : (0, zkit_tools_1.wp)(10));
+        return {
+            shadowColor: (_b = shadow.color) !== null && _b !== void 0 ? _b : '#000000',
+            shadowOffset: {
+                width: (_c = shadow.offsetX) !== null && _c !== void 0 ? _c : 0,
+                height: (_d = shadow.offsetY) !== null && _d !== void 0 ? _d : (0, zkit_tools_1.wp)(3),
+            },
+            shadowOpacity: (_e = shadow.opacity) !== null && _e !== void 0 ? _e : (scheme === 'dark' ? 0.28 : 0.14),
+            shadowRadius: radius,
+            elevation: (_f = shadow.elevation) !== null && _f !== void 0 ? _f : Math.max(0, Math.round(radius * 0.55)),
+        };
+    }
+    const level = shadow === 'sm' ? 1 : shadow === 'md' ? 2 : shadow === 'lg' ? 3 : 0;
+    if (level <= 0)
+        return undefined;
+    const radius = (0, zkit_tools_1.wp)(level * 5 + 3);
+    return {
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: (0, zkit_tools_1.wp)(level + 1) },
+        shadowOpacity: scheme === 'dark' ? 0.26 : 0.14,
+        shadowRadius: radius,
+        elevation: Math.max(0, Math.round(radius * 0.55)),
+    };
+}
+function resolveVisualColors({ accentColor, colors, gradientCfg, hasGradientBackground, palette, theme, variant, visualDisabled, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const fallbackGradientColor = resolveColorToken(gradientCfg === null || gradientCfg === void 0 ? void 0 : gradientCfg.colors[0], accentColor, theme);
+    const solidBackground = gradientCfg ? fallbackGradientColor : accentColor;
+    const softBackground = (_a = colorToRgba(accentColor, 0.12)) !== null && _a !== void 0 ? _a : theme.colors.secondary;
+    const softBorder = (_b = colorToRgba(accentColor, 0.2)) !== null && _b !== void 0 ? _b : theme.colors.border;
+    let backgroundColor = 'transparent';
+    let borderColor = 'transparent';
+    let textColor = accentColor;
+    if (variant === 'solid') {
+        backgroundColor = solidBackground;
+        textColor = palette.onColor;
+    }
+    else if (variant === 'soft') {
+        backgroundColor = softBackground;
+        borderColor = softBorder;
+    }
+    else if (variant === 'outline') {
+        borderColor = accentColor;
+    }
+    backgroundColor = (_c = colors === null || colors === void 0 ? void 0 : colors.background) !== null && _c !== void 0 ? _c : backgroundColor;
+    borderColor = (_d = colors === null || colors === void 0 ? void 0 : colors.border) !== null && _d !== void 0 ? _d : borderColor;
+    textColor = (_e = colors === null || colors === void 0 ? void 0 : colors.text) !== null && _e !== void 0 ? _e : textColor;
+    if (hasGradientBackground) {
+        backgroundColor = 'transparent';
+        borderColor = (_f = colors === null || colors === void 0 ? void 0 : colors.border) !== null && _f !== void 0 ? _f : 'transparent';
+        textColor = (_g = colors === null || colors === void 0 ? void 0 : colors.text) !== null && _g !== void 0 ? _g : palette.onColor;
+    }
+    if (visualDisabled) {
+        const disabledBackground = variant === 'solid' || variant === 'soft' ? theme.colors.secondary : 'transparent';
+        backgroundColor = (_h = colors === null || colors === void 0 ? void 0 : colors.disabledBackground) !== null && _h !== void 0 ? _h : disabledBackground;
+        borderColor = (_j = colors === null || colors === void 0 ? void 0 : colors.disabledBorder) !== null && _j !== void 0 ? _j : (variant === 'outline' ? theme.colors.border : borderColor);
+        textColor = (_k = colors === null || colors === void 0 ? void 0 : colors.disabledText) !== null && _k !== void 0 ? _k : theme.colors.disabled;
+    }
+    return {
+        backgroundColor,
+        borderColor,
+        textColor,
+        loadingColor: (_l = colors === null || colors === void 0 ? void 0 : colors.loading) !== null && _l !== void 0 ? _l : textColor,
+    };
+}
+function resolvePressEffect(effect, interactionDisabled) {
+    if (interactionDisabled)
+        return 'none';
+    if (effect !== 'auto')
+        return effect;
+    return 'scale-opacity';
+}
+function resolvePressEffectFlags(effect) {
+    return {
+        highlight: effect === 'highlight' || effect === 'scale-highlight',
+        opacity: effect === 'opacity' || effect === 'scale-opacity',
+        scale: effect === 'scale' || effect === 'scale-highlight' || effect === 'scale-opacity',
+    };
+}
+function resolveOverlay({ accentColor, colors, hasGradientBackground, variant, }) {
+    if (colors === null || colors === void 0 ? void 0 : colors.pressedOverlay) {
+        return { color: colors.pressedOverlay, strength: 0.12 };
+    }
+    if (variant === 'solid' || hasGradientBackground) {
+        return { color: '#000000', strength: 0.1 };
+    }
+    if (variant === 'soft') {
+        return { color: '#000000', strength: 0.06 };
+    }
+    return { color: accentColor, strength: 0.1 };
+}
+function resolveRootSizeStyle({ block, iconOnly, layout, metrics, variant, }) {
+    var _a, _b, _c;
+    const width = (_a = layout === null || layout === void 0 ? void 0 : layout.width) !== null && _a !== void 0 ? _a : (block ? '100%' : undefined);
+    const height = layout === null || layout === void 0 ? void 0 : layout.height;
+    const iconSide = (_c = (_b = normalizeNumber(width)) !== null && _b !== void 0 ? _b : normalizeNumber(height)) !== null && _c !== void 0 ? _c : metrics.iconOnlySide;
+    if (iconOnly) {
+        return {
+            ...(width !== undefined ? { width } : { width: iconSide }),
+            ...(height !== undefined ? { height } : { height: iconSide }),
+            ...((layout === null || layout === void 0 ? void 0 : layout.minWidth) !== undefined ? { minWidth: layout.minWidth } : undefined),
+            ...((layout === null || layout === void 0 ? void 0 : layout.maxWidth) !== undefined ? { maxWidth: layout.maxWidth } : undefined),
+        };
+    }
+    return {
+        ...(width !== undefined ? { width } : undefined),
+        ...(height !== undefined ? { height } : undefined),
+        ...((layout === null || layout === void 0 ? void 0 : layout.minWidth) !== undefined ? { minWidth: layout.minWidth } : undefined),
+        ...((layout === null || layout === void 0 ? void 0 : layout.maxWidth) !== undefined ? { maxWidth: layout.maxWidth } : undefined),
+        ...((layout === null || layout === void 0 ? void 0 : layout.minHeight) !== undefined
+            ? { minHeight: layout.minHeight }
+            : variant === 'link'
+                ? undefined
+                : { minHeight: metrics.minHeight }),
+    };
+}
+function resolveContentSizeStyle(rootSizeStyle, iconOnly) {
+    const nextStyle = {};
+    if (iconOnly || rootSizeStyle.width !== undefined)
+        nextStyle.width = '100%';
+    if (iconOnly || rootSizeStyle.height !== undefined)
+        nextStyle.height = '100%';
+    else if (rootSizeStyle.minHeight !== undefined)
+        nextStyle.minHeight = rootSizeStyle.minHeight;
+    return nextStyle;
+}
+function resolveSideLength(rootSizeStyle, iconOnly, layout, metrics) {
+    var _a, _b;
+    const height = normalizeNumber(rootSizeStyle.height);
+    if (height != null)
+        return height;
+    if (iconOnly)
+        return (_a = normalizeNumber(rootSizeStyle.width)) !== null && _a !== void 0 ? _a : metrics.iconOnlySide;
+    return (_b = layout === null || layout === void 0 ? void 0 : layout.minHeight) !== null && _b !== void 0 ? _b : metrics.minHeight;
+}
+function resolveRadiusStyle({ iconOnly, layout, metrics, rootSizeStyle, shape, }) {
+    var _a;
+    if (shape === 'square')
+        return { borderRadius: 0 };
+    if (shape === 'pill') {
+        const radius = resolveSideLength(rootSizeStyle, iconOnly, layout, metrics) / 2;
+        return {
+            borderBottomLeftRadius: radius,
+            borderBottomRightRadius: radius,
+            borderRadius: radius,
+            borderTopLeftRadius: radius,
+            borderTopRightRadius: radius,
+        };
+    }
+    return { borderRadius: (_a = layout === null || layout === void 0 ? void 0 : layout.radius) !== null && _a !== void 0 ? _a : metrics.radius };
+}
+function resolvePaddingStyle({ iconOnly, layout, metrics, variant, }) {
+    var _a, _b, _c;
+    if (iconOnly)
+        return {};
+    if (variant === 'link') {
+        return {
+            paddingHorizontal: 0,
+            paddingVertical: (_a = layout === null || layout === void 0 ? void 0 : layout.paddingVertical) !== null && _a !== void 0 ? _a : metrics.linkPaddingVertical,
+        };
+    }
+    return {
+        paddingHorizontal: (_b = layout === null || layout === void 0 ? void 0 : layout.paddingHorizontal) !== null && _b !== void 0 ? _b : metrics.paddingHorizontal,
+        paddingVertical: (_c = layout === null || layout === void 0 ? void 0 : layout.paddingVertical) !== null && _c !== void 0 ? _c : metrics.paddingVertical,
+    };
+}
+function resolveBorderStyle({ border, metrics, theme, visualColors, variant, }) {
+    var _a, _b, _c;
+    const defaultBorderWidth = variant === 'outline' ? metrics.borderWidth : undefined;
+    const width = (_a = border === null || border === void 0 ? void 0 : border.width) !== null && _a !== void 0 ? _a : defaultBorderWidth;
+    if (width == null)
+        return {};
+    return {
+        borderColor: (_b = border === null || border === void 0 ? void 0 : border.color) !== null && _b !== void 0 ? _b : (visualColors.borderColor === 'transparent' ? theme.colors.border : visualColors.borderColor),
+        borderStyle: (_c = border === null || border === void 0 ? void 0 : border.style) !== null && _c !== void 0 ? _c : 'solid',
+        borderWidth: width,
+    };
+}
+function resolveDefaultHitSlop({ iconOnly, layout, metrics, rootSizeStyle, variant, }) {
+    var _a, _b;
+    if (variant === 'link') {
+        const visualHeight = ((_a = layout === null || layout === void 0 ? void 0 : layout.textLineHeight) !== null && _a !== void 0 ? _a : metrics.textLineHeight) +
+            ((_b = layout === null || layout === void 0 ? void 0 : layout.paddingVertical) !== null && _b !== void 0 ? _b : metrics.linkPaddingVertical) * 2;
+        const vertical = Math.max((0, zkit_tools_1.wp)(6), (metrics.minTouchTarget - visualHeight) / 2);
+        return {
+            bottom: vertical,
+            left: (0, zkit_tools_1.wp)(8),
+            right: (0, zkit_tools_1.wp)(8),
+            top: vertical,
+        };
+    }
+    const side = resolveSideLength(rootSizeStyle, iconOnly, layout, metrics);
+    const slop = Math.max(0, (metrics.minTouchTarget - side) / 2);
+    if (slop <= 0)
+        return undefined;
+    return {
+        bottom: slop,
+        left: iconOnly ? slop : 0,
+        right: iconOnly ? slop : 0,
+        top: slop,
+    };
+}
+function resolveLoadingSize({ iconOnly, layout, metrics, variant, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if ((layout === null || layout === void 0 ? void 0 : layout.loadingSize) !== undefined)
+        return layout.loadingSize;
+    const iconSize = (_a = layout === null || layout === void 0 ? void 0 : layout.iconSize) !== null && _a !== void 0 ? _a : metrics.iconSize;
+    if (iconOnly) {
+        const availableHeight = (_c = (_b = normalizeNumber(layout === null || layout === void 0 ? void 0 : layout.height)) !== null && _b !== void 0 ? _b : normalizeNumber(layout === null || layout === void 0 ? void 0 : layout.width)) !== null && _c !== void 0 ? _c : metrics.iconOnlySide;
+        return resolveDefaultLoadingSize(iconSize, availableHeight);
+    }
+    if (variant === 'link') {
+        const availableHeight = ((_d = layout === null || layout === void 0 ? void 0 : layout.textLineHeight) !== null && _d !== void 0 ? _d : metrics.textLineHeight) +
+            ((_e = layout === null || layout === void 0 ? void 0 : layout.paddingVertical) !== null && _e !== void 0 ? _e : metrics.linkPaddingVertical) * 2;
+        return resolveDefaultLoadingSize(iconSize, availableHeight);
+    }
+    const availableHeight = ((_g = (_f = normalizeNumber(layout === null || layout === void 0 ? void 0 : layout.height)) !== null && _f !== void 0 ? _f : layout === null || layout === void 0 ? void 0 : layout.minHeight) !== null && _g !== void 0 ? _g : metrics.minHeight) -
+        ((_h = layout === null || layout === void 0 ? void 0 : layout.paddingVertical) !== null && _h !== void 0 ? _h : metrics.paddingVertical) * 2;
+    return resolveDefaultLoadingSize(iconSize, availableHeight);
+}
+function resolveIconBoxStyle(visible, iconSize) {
+    if (!visible)
+        return {};
+    return {
+        alignItems: 'center',
+        height: iconSize,
+        justifyContent: 'center',
+        overflow: 'hidden',
+    };
+}
+function resolveWebCursorStyle(disabled) {
+    if (react_native_1.Platform.OS !== 'web')
+        return undefined;
+    return { cursor: disabled ? 'not-allowed' : 'pointer' };
+}
+function ButtonImpl({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, loadingMode = 'inline', pressEffect = 'auto', icon, iconPlacement = 'start', iconOnly = false, color, colors, border, layout, gradient, shadow = 'none', children, style, contentStyle, textStyle, accessibilityLabel, accessibilityState, hitSlop, onPress, onPressIn, onPressOut, testID, ...pressableProps }, ref) {
+    var _a, _b;
+    const theme = (0, useTheme_1.useTheme)();
+    const scheme = (0, react_native_1.useColorScheme)();
+    const { width: viewportWidth } = (0, react_native_1.useWindowDimensions)();
+    const metrics = React.useMemo(() => resolveMetrics(size), [size, viewportWidth]);
+    const palette = React.useMemo(() => resolveTonePalette(tone, theme), [theme, tone]);
+    const accentColor = React.useMemo(() => resolveColorToken(color !== null && color !== void 0 ? color : colors === null || colors === void 0 ? void 0 : colors.color, palette.color, theme), [color, colors === null || colors === void 0 ? void 0 : colors.color, palette.color, theme]);
+    const gradientCfg = React.useMemo(() => parseGradient(gradient), [gradient]);
+    const LinearGradientComponent = React.useMemo(() => { var _a; return (variant === 'solid' && gradientCfg ? ((_a = pickLinearGradientComponent()) !== null && _a !== void 0 ? _a : undefined) : undefined); }, [gradientCfg, variant]);
+    const hasGradientBackground = Boolean(variant === 'solid' && gradientCfg && LinearGradientComponent);
+    const interactionDisabled = disabled || loading;
+    const visualDisabled = disabled;
+    const resolvedLoadingMode = iconOnly ? 'overlay' : loadingMode;
+    const centeredLoading = resolvedLoadingMode !== 'inline';
+    const visualColors = React.useMemo(() => resolveVisualColors({
+        accentColor,
+        colors,
+        gradientCfg,
+        hasGradientBackground,
+        palette,
+        theme,
+        variant,
+        visualDisabled,
+    }), [accentColor, colors, gradientCfg, hasGradientBackground, palette, theme, variant, visualDisabled]);
+    const rootSizeStyle = React.useMemo(() => resolveRootSizeStyle({
+        block,
+        iconOnly,
+        layout,
+        metrics,
+        variant,
+    }), [block, iconOnly, layout, metrics, variant]);
+    const contentSizeStyle = React.useMemo(() => resolveContentSizeStyle(rootSizeStyle, iconOnly), [iconOnly, rootSizeStyle]);
+    const radiusStyle = React.useMemo(() => resolveRadiusStyle({
+        iconOnly,
+        layout,
+        metrics,
+        rootSizeStyle,
+        shape,
+    }), [iconOnly, layout, metrics, rootSizeStyle, shape]);
+    const paddingStyle = React.useMemo(() => resolvePaddingStyle({
+        iconOnly,
+        layout,
+        metrics,
+        variant,
+    }), [iconOnly, layout, metrics, variant]);
+    const borderStyle = React.useMemo(() => resolveBorderStyle({
+        border,
+        metrics,
+        theme,
+        visualColors,
+        variant,
+    }), [border, metrics, theme, variant, visualColors]);
+    const shadowStyle = React.useMemo(() => resolveShadowStyle(shadow, scheme, variant), [scheme, shadow, variant]);
+    const webCursorStyle = React.useMemo(() => resolveWebCursorStyle(interactionDisabled), [interactionDisabled]);
+    const defaultHitSlop = React.useMemo(() => resolveDefaultHitSlop({
+        iconOnly,
+        layout,
+        metrics,
+        rootSizeStyle,
+        variant,
+    }), [iconOnly, layout, metrics, rootSizeStyle, variant]);
+    const resolvedText = React.useMemo(() => {
+        var _a, _b;
+        if (children == null)
+            return null;
+        if (!isPrimitiveTextChild(children))
+            return children;
+        return ((0, jsx_runtime_1.jsx)(Text_1.Text, { numberOfLines: 1, style: [
+                styles.text,
+                {
+                    color: visualColors.textColor,
+                    fontSize: (_a = layout === null || layout === void 0 ? void 0 : layout.textSize) !== null && _a !== void 0 ? _a : metrics.textSize,
+                    lineHeight: (_b = layout === null || layout === void 0 ? void 0 : layout.textLineHeight) !== null && _b !== void 0 ? _b : metrics.textLineHeight,
+                },
+                variant === 'link' ? styles.linkText : null,
+                textStyle,
+            ], children: children }));
+    }, [
+        children,
+        layout === null || layout === void 0 ? void 0 : layout.textLineHeight,
+        layout === null || layout === void 0 ? void 0 : layout.textSize,
+        metrics.textLineHeight,
+        metrics.textSize,
+        textStyle,
+        variant,
+        visualColors.textColor,
+    ]);
+    const hasText = resolvedText != null;
+    const hasIcon = icon != null;
+    const iconSize = (_a = layout === null || layout === void 0 ? void 0 : layout.iconSize) !== null && _a !== void 0 ? _a : metrics.iconSize;
+    const loadingSize = React.useMemo(() => resolveLoadingSize({
+        iconOnly,
+        layout,
+        metrics,
+        variant,
+    }), [iconOnly, layout, metrics, variant]);
+    const contentGap = (_b = layout === null || layout === void 0 ? void 0 : layout.gap) !== null && _b !== void 0 ? _b : metrics.gap;
+    const iconBaseBoxStyle = React.useMemo(() => resolveIconBoxStyle(hasIcon, iconSize), [hasIcon, iconSize]);
+    const iconPlacedBoxStyle = React.useMemo(() => {
+        if (!hasIcon)
+            return {};
+        const gap = hasText ? contentGap : 0;
+        return {
+            width: iconSize,
+            ...(iconPlacement === 'end' ? { marginLeft: gap } : { marginRight: gap }),
+        };
+    }, [contentGap, hasIcon, hasText, iconPlacement, iconSize]);
+    const inferredAccessibilityLabel = iconOnly && isPrimitiveTextChild(children) ? String(children) : undefined;
+    const resolvedAccessibilityLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : inferredAccessibilityLabel;
+    const pressSv = (0, react_native_reanimated_1.useSharedValue)(0);
+    const loadingSv = (0, react_native_reanimated_1.useSharedValue)(loading ? 1 : 0);
+    const [spinnerMounted, setSpinnerMounted] = React.useState(loading);
+    const hideSpinnerTimerRef = React.useRef(null);
+    const resolvedPressEffect = React.useMemo(() => resolvePressEffect(pressEffect, interactionDisabled), [interactionDisabled, pressEffect]);
+    const pressEffectFlags = React.useMemo(() => resolvePressEffectFlags(resolvedPressEffect), [resolvedPressEffect]);
+    const pressHighlightEnabled = pressEffectFlags.highlight;
+    const pressOpacityEnabled = pressEffectFlags.opacity;
+    const pressScaleEnabled = pressEffectFlags.scale;
+    const pressOverlay = React.useMemo(() => resolveOverlay({
+        accentColor,
+        colors,
+        hasGradientBackground,
+        variant,
+    }), [accentColor, colors, hasGradientBackground, variant]);
+    React.useEffect(() => {
+        if (interactionDisabled || resolvedPressEffect === 'none') {
+            pressSv.value = 0;
+        }
+    }, [interactionDisabled, pressSv, resolvedPressEffect]);
+    React.useEffect(() => {
+        if (hideSpinnerTimerRef.current) {
+            clearTimeout(hideSpinnerTimerRef.current);
+            hideSpinnerTimerRef.current = null;
+        }
+        if (loading) {
+            setSpinnerMounted(true);
+        }
+        loadingSv.value = (0, react_native_reanimated_1.withTiming)(loading ? 1 : 0, LOADING_TIMING);
+        if (!loading) {
+            hideSpinnerTimerRef.current = setTimeout(() => {
+                setSpinnerMounted(false);
+            }, LOADING_TIMING.duration);
+        }
+        return () => {
+            if (hideSpinnerTimerRef.current) {
+                clearTimeout(hideSpinnerTimerRef.current);
+                hideSpinnerTimerRef.current = null;
+            }
+        };
+    }, [loading, loadingSv]);
+    const rootAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const baseOpacity = visualDisabled ? DISABLED_OPACITY : 1;
+        const scale = pressScaleEnabled
+            ? (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [1, PRESSED_SCALE])
+            : 1;
+        const opacity = pressOpacityEnabled
+            ? (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [baseOpacity, PRESSED_OPACITY])
+            : baseOpacity;
+        return {
+            opacity,
+            transform: [{ scale }],
+        };
+    }, [pressOpacityEnabled, pressScaleEnabled, visualDisabled]);
+    const overlayAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const opacity = pressHighlightEnabled
+            ? (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [0, pressOverlay.strength])
+            : 0;
+        return { opacity };
+    }, [pressHighlightEnabled, pressOverlay.strength]);
+    const inlineSpinnerAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const width = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [0, loadingSize]);
+        const marginRight = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [0, hasText ? contentGap : 0]);
+        const opacity = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [0, 1]);
+        const scale = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [0.92, 1]);
+        return {
+            marginRight,
+            opacity,
+            transform: [{ scale }],
+            width,
+        };
+    }, [contentGap, hasText, loadingSize, loadingSv]);
+    const centeredSpinnerAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const opacity = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [0, 1]);
+        const scale = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [0.92, 1]);
+        return {
+            opacity,
+            transform: [{ scale }],
+        };
+    }, [loadingSv]);
+    const iconAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        if (!hasIcon || iconOnly)
+            return { opacity: 0, width: 0 };
+        const margin = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [hasText ? contentGap : 0, 0]);
+        const opacity = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [1, 0]);
+        const scale = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [1, 0.92]);
+        const width = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [iconSize, 0]);
+        return {
+            opacity,
+            transform: [{ scale }],
+            width,
+            ...(iconPlacement === 'end' ? { marginLeft: margin } : { marginRight: margin }),
+        };
+    }, [contentGap, hasIcon, hasText, iconOnly, iconPlacement, iconSize, loadingSv]);
+    const contentAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        if (centeredLoading || iconOnly) {
+            const opacity = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [1, 0]);
+            const scale = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [1, 0.98]);
+            return { opacity, transform: [{ scale }] };
+        }
+        const translateX = (0, react_native_reanimated_1.interpolate)(loadingSv.value, [0, 1], [0, metrics.linkPaddingVertical]);
+        return { transform: [{ translateX }] };
+    }, [centeredLoading, iconOnly, loadingSv, metrics.linkPaddingVertical]);
+    const spinnerVisible = loading || spinnerMounted;
+    const showContent = !iconOnly;
+    const handlePress = React.useCallback((event) => {
+        if (interactionDisabled)
+            return;
+        onPress === null || onPress === void 0 ? void 0 : onPress(event);
+    }, [interactionDisabled, onPress]);
+    const handlePressIn = React.useCallback((event) => {
+        if (!interactionDisabled && resolvedPressEffect !== 'none') {
+            pressSv.value = (0, react_native_reanimated_1.withTiming)(1, PRESS_TIMING);
+        }
+        onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(event);
+    }, [interactionDisabled, onPressIn, pressSv, resolvedPressEffect]);
+    const handlePressOut = React.useCallback((event) => {
+        if (!interactionDisabled && resolvedPressEffect !== 'none') {
+            pressSv.value = (0, react_native_reanimated_1.withTiming)(0, PRESS_TIMING);
+        }
+        onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
+    }, [interactionDisabled, onPressOut, pressSv, resolvedPressEffect]);
+    return ((0, jsx_runtime_1.jsx)(AnimatedPressable, { ...pressableProps, ref: ref, accessibilityLabel: resolvedAccessibilityLabel, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            busy: Boolean(loading || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy)),
+            disabled: Boolean(interactionDisabled || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.disabled)),
+        }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [styles.root, rootSizeStyle, radiusStyle, shadowStyle, rootAnimatedStyle, webCursorStyle, style], testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: [
+                styles.content,
+                contentSizeStyle,
+                paddingStyle,
+                radiusStyle,
+                borderStyle,
+                { backgroundColor: visualColors.backgroundColor },
+                contentStyle,
+            ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: "none", colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, radiusStyle] })) : null, (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
+                        react_native_1.StyleSheet.absoluteFillObject,
+                        radiusStyle,
+                        { backgroundColor: pressOverlay.color },
+                        overlayAnimatedStyle,
+                    ] }), iconOnly ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.centerOverlay, centeredSpinnerAnimatedStyle], children: spinnerVisible ? ((0, jsx_runtime_1.jsx)(LoadingSpinner_1.LoadingSpinner, { animating: spinnerVisible, color: visualColors.loadingColor, size: loadingSize })) : null }), (icon !== null && icon !== void 0 ? icon : resolvedText) ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: contentAnimatedStyle, children: icon !== null && icon !== void 0 ? icon : resolvedText })) : null] })) : centeredLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [styles.centerContent, contentAnimatedStyle], children: [icon && iconPlacement === 'start' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null, showContent ? resolvedText : null, icon && iconPlacement === 'end' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.centerOverlay, centeredSpinnerAnimatedStyle], children: spinnerVisible ? ((0, jsx_runtime_1.jsx)(LoadingSpinner_1.LoadingSpinner, { animating: spinnerVisible, color: visualColors.loadingColor, size: loadingSize })) : null })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.spinnerBox, { height: loadingSize }, inlineSpinnerAnimatedStyle], children: spinnerVisible ? ((0, jsx_runtime_1.jsx)(LoadingSpinner_1.LoadingSpinner, { animating: spinnerVisible, color: visualColors.loadingColor, size: loadingSize })) : null }), icon && iconPlacement === 'start' ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [iconBaseBoxStyle, iconAnimatedStyle], children: icon })) : null, resolvedText ? (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: contentAnimatedStyle, children: resolvedText }) : null, icon && iconPlacement === 'end' ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [iconBaseBoxStyle, iconAnimatedStyle], children: icon })) : null] }))] }) }));
+}
+const ButtonWithRef = React.forwardRef(ButtonImpl);
+ButtonWithRef.displayName = 'Button';
+exports.Button = React.memo(ButtonWithRef);
+exports.Button.displayName = 'Button';
+const styles = react_native_1.StyleSheet.create({
+    centerContent: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+    centerOverlay: {
+        alignItems: 'center',
+        bottom: 0,
+        justifyContent: 'center',
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+    },
+    content: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    linkText: {
+        textDecorationLine: 'underline',
+    },
+    root: {},
+    spinnerBox: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    text: {
+        flexShrink: 1,
+        fontWeight: '600',
+        letterSpacing: 0,
+        textAlign: 'center',
+    },
+});