@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/Button/Button.js

@@ -1,557 +1 @@
-"use strict";
-
-import React, { forwardRef, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useFlickGuard } from "../../hooks/useFlickGuard.js";
-import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { fontFor, Gradient, useTheme } from "../../theme/index.js";
-import { createAnimatedValue } from "../../theme/animatedValue.js";
-import { ACCENT_PRESSED_TINT, tintOf } from "../../utils/color.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
-import { renderSlotIcon } from "../AppIcon/slotIcon.js";
-import { Spinner } from "../Spinner/index.js";
-import { SquircleFill, useSquircle } from "../SquircleFill/SquircleFill.js";
-
-/**
- * Visual weight, heaviest first: `solid` fills with the tone, `soft` tints
- * the fill and draws the label in the tone, `outline` keeps a tone border,
- * `ghost` is label only, `link` is an inline text link in the link colour
- * whatever the tone, with no box of its own; its underline sweeps in from
- * the left on press and stays. `glass` is the odd one out: a frosted white
- * fill with a bright rim and dark ink, for a button sitting on a brand
- * gradient or a photo, where a tone fill would fight the surface. Its
- * colours come from `theme.colors.glass`, the same in both schemes, and the
- * tone only inks a badged icon.
- */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const Button = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    title,
-    children,
-    variant = 'solid',
-    tone = 'primary',
-    size = 'md',
-    loading = false,
-    disabled = false,
-    fullWidth = false,
-    leftIcon,
-    rightIcon,
-    leftIconBadge = false,
-    haptic = 'selection',
-    rounded = false,
-    gradient,
-    style,
-    textStyle,
-    pressAnimation: pressAnimationProp,
-    onPress,
-    accessibilityLabel,
-    accessibilityHint,
-    testID,
-    onLayout,
-    ...rest
-  } = props;
-  const theme = useTheme();
-  const isInteractive = !disabled && !loading;
-  // A link has no box to paint, so its underline sweep is its press feedback
-  // and the scale preset stays off unless the app asks for one.
-  const isLink = variant === 'link';
-  const pressAnimation = pressAnimationProp ?? (isLink ? false : 'scale');
-  const pressAnim = usePressAnimation({
-    preset: pressAnimation || 'scale',
-    enabled: pressAnimation !== false && isInteractive
-  });
-  const flickGuard = useFlickGuard();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = {
-    ...sizeMap[size],
-    ...(theme.components.button?.[size] ?? {})
-  };
-  const toneColors = useMemo(() => toneFor(theme, tone), [theme, tone]);
-  const variantStyles = useMemo(() => variantFor(theme, variant, toneColors, disabled), [theme, variant, toneColors, disabled]);
-
-  // Resolve gradient: string token → theme.gradients[token]; literal passes through.
-  // Skipped when disabled (parity with disabled flat-color treatment).
-  const resolvedGradient = useMemo(() => {
-    if (!gradient || disabled || variant !== 'solid') {
-      return null;
-    }
-    if (typeof gradient === 'string') {
-      return theme.gradients[gradient] ?? null;
-    }
-    return gradient;
-  }, [gradient, disabled, variant, theme.gradients]);
-
-  // Android smooth corners: the fill and border become an SVG squircle over
-  // a transparent host. A gradient button keeps its native corner, because
-  // the gradient layer needs `overflow: 'hidden'` and that clip is circular.
-  // A link has no box: no corner, and (below) no clip, or the rounded clip
-  // would trim the underline bar off the bottom of its text-high box. A
-  // radius set through `style` wins, and the layers below take it too, so
-  // the gradient, the tint and the squircle keep the same corner as the box.
-  const styleRadius = StyleSheet.flatten(style)?.borderRadius;
-  const borderRadius = isLink ? 0 : typeof styleRadius === 'number' ? styleRadius : rounded ? theme.radius.full : sizeStyles.borderRadius;
-  const squircle = useSquircle(!resolvedGradient && variant !== 'link', borderRadius, onLayout);
-
-  // The link underline: one value, 0 at rest, 1 fully drawn. Press-in
-  // restarts it from the left edge and it stays drawn once it arrives; the
-  // next press replays the sweep. A translateX + scaleX pair grows it from
-  // the left under the native driver, which has no transform origin.
-  const underline = useRef(createAnimatedValue(0)).current;
-  const [labelWidth, setLabelWidth] = useState(0);
-  const onLabelLayout = isLink ? event => setLabelWidth(event.nativeEvent.layout.width) : undefined;
-  const handlePressIn = event => {
-    flickGuard.onPressIn(event);
-    pressAnim.pressIn();
-    if (isLink && isInteractive) {
-      underline.stopAnimation();
-      underline.setValue(0);
-      // Slow, easing out: a fast sweep read as a flash rather than a draw.
-      Animated.timing(underline, {
-        toValue: 1,
-        duration: theme.motion.duration.slower,
-        easing: Easing.bezier(...theme.motion.easing.decelerate),
-        useNativeDriver: true
-      }).start();
-    }
-  };
-  const handlePressOut = () => {
-    pressAnim.pressOut();
-  };
-  const handlePress = event => {
-    // A scroll flick that started on the button is not a tap (see useFlickGuard).
-    if (!isInteractive || flickGuard.isFlick(event)) {
-      return;
-    }
-    pressAnim.press();
-    if (haptic !== false) {
-      triggerHaptic(haptic);
-    }
-    onPress?.(event);
-  };
-  const accessibleLabel = accessibilityLabel ?? title;
-
-  // Outline and ghost have no fill of their own, so a press paints the
-  // theme's pressed surface as their fill. Solid and soft keep their fill and
-  // take the pressed surface as a tint on top, on both platforms. There is
-  // no platform ripple: RN draws it in the host's rectangular bounds, so it
-  // poked out past the corners. A link has no box; its underline is the
-  // feedback.
-  const usesPressedSurface = variant === 'outline' || variant === 'ghost';
-  const usesPressedOverlay = !usesPressedSurface && !isLink;
-  const slotState = {
-    color: variantStyles.textColor,
-    size: sizeStyles.iconSize,
-    disabled
-  };
-
-  // A badged leading icon: an opaque disc as tall as the button less the
-  // inset on each side and the border the box already draws, so the disc
-  // sits inside the corner with an even gap all round. The box gives up its
-  // vertical and left padding to the inset so the disc, not the padding,
-  // sets the height; the right padding stays so the label keeps its air.
-  const hasBadge = leftIconBadge && !isLink && Boolean(leftIcon);
-  const badgeDiameter = sizeStyles.minHeight - 2 * BADGE_INSET - 2 * variantStyles.borderWidth;
-  const badgeSlotState = {
-    color: variantStyles.badgeInk,
-    size: sizeStyles.badgeIconSize ?? sizeStyles.iconSize,
-    disabled
-  };
-  const content = /*#__PURE__*/_jsx(View, {
-    style: styles.contentRow,
-    children: loading ? /*#__PURE__*/_jsx(Spinner, {
-      variant: "circular",
-      size: "sm",
-      color: variantStyles.textColor,
-      accessibilityLabel: "Loading"
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [hasBadge ? /*#__PURE__*/_jsx(View, {
-        testID: "button-icon-badge",
-        style: [styles.iconLeft, styles.iconBadge, {
-          width: badgeDiameter,
-          height: badgeDiameter,
-          borderRadius: badgeDiameter / 2,
-          backgroundColor: variantStyles.badgeFill
-        }],
-        children: renderSlotIcon(leftIcon, badgeSlotState)
-      }) : leftIcon ? /*#__PURE__*/_jsx(View, {
-        style: styles.iconLeft,
-        children: renderSlotIcon(leftIcon, slotState)
-      }) : null, title ? /*#__PURE__*/_jsxs(View, {
-        onLayout: onLabelLayout,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.label, {
-            color: variantStyles.textColor,
-            fontSize: sizeStyles.fontSize,
-            ...fontFor(theme, 'semibold')
-          }, textStyle],
-          numberOfLines: 1,
-          children: title
-        }), isLink ? /*#__PURE__*/_jsx(Animated.View, {
-          pointerEvents: "none",
-          testID: "button-link-underline",
-          style: [styles.linkUnderline, {
-            backgroundColor: variantStyles.textColor,
-            transform: [{
-              translateX: underline.interpolate({
-                inputRange: [0, 1],
-                outputRange: [-labelWidth / 2, 0]
-              })
-            }, {
-              scaleX: underline.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, 1]
-              })
-            }]
-          }]
-        }) : null]
-      }) : children, rightIcon ? /*#__PURE__*/_jsx(View, {
-        style: styles.iconRight,
-        children: renderSlotIcon(rightIcon, slotState)
-      }) : null]
-    })
-  });
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: [pressAnim.style, fullWidth ? styles.fullWidth : null],
-    children: /*#__PURE__*/_jsx(Pressable, {
-      ref: ref,
-      onPress: handlePress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      disabled: !isInteractive,
-      hitSlop: isLink ? LINK_HIT_SLOP : undefined,
-      accessibilityRole: "button",
-      accessibilityLabel: accessibleLabel,
-      accessibilityHint: accessibilityHint,
-      accessibilityState: {
-        disabled: !isInteractive,
-        busy: loading
-      },
-      testID: testID,
-      onLayout: squircle.onLayout,
-      style: ({
-        pressed
-      }) => [styles.base, {
-        // A link sits inline with text: no padding, no minimum height,
-        // and the hit slop above keeps the tap target usable.
-        paddingHorizontal: isLink ? 0 : sizeStyles.paddingHorizontal,
-        paddingVertical: isLink ? 0 : hasBadge ? BADGE_INSET : sizeStyles.paddingVertical,
-        paddingLeft: hasBadge ? BADGE_INSET : undefined,
-        minHeight: isLink ? undefined : sizeStyles.minHeight,
-        borderRadius,
-        ...smoothCorners,
-        // Hide the solid bg when a gradient layer or the squircle covers
-        // it. The border width stays for layout; the squircle paints the
-        // border itself, so its native colour goes transparent too.
-        backgroundColor: resolvedGradient || squircle.active ? 'transparent' : variantStyles.backgroundColor,
-        borderWidth: variantStyles.borderWidth,
-        borderColor: squircle.active ? 'transparent' : variantStyles.borderColor,
-        // Disabled reads through its colours alone; dimming it as well
-        // left the label close to invisible. Loading keeps its colours
-        // and dims, so the spinner reads as busy rather than off.
-        opacity: loading ? 0.55 : 1,
-        // The squircle bulges past the circular corner at the diagonal,
-        // so a rounded clip would cut off exactly the part it draws.
-        // Everywhere else the clip is what keeps the pressed tint and the
-        // gradient inside the corner.
-        overflow: squircle.active || isLink ? 'visible' : 'hidden'
-      }, pressed && usesPressedSurface && !squircle.active ? {
-        backgroundColor: theme.colors.surface.pressed
-      } : null, fullWidth ? styles.fullWidth : null, style],
-      ...rest,
-      children: ({
-        pressed
-      }) => /*#__PURE__*/_jsxs(_Fragment, {
-        children: [squircle.active && squircle.size ? /*#__PURE__*/_jsx(SquircleFill, {
-          width: squircle.size.width,
-          height: squircle.size.height,
-          radius: borderRadius,
-          fill: pressed && usesPressedSurface ? theme.colors.surface.pressed : variantStyles.backgroundColor,
-          stroke: variantStyles.borderColor,
-          strokeWidth: variantStyles.borderWidth,
-          outset: variantStyles.borderWidth
-        }) : null, resolvedGradient ?
-        /*#__PURE__*/
-        // The layer rounds itself: iOS clamps a view's own radius to
-        // half its size, but not the clip mask of its parent, and a
-        // continuous curve past half the height comes out with cut
-        // corners. Rounded here, the clip has nothing left to trim.
-        _jsx(Gradient, {
-          gradient: resolvedGradient,
-          style: [StyleSheet.absoluteFill, {
-            borderRadius,
-            ...smoothCorners
-          }]
-        }) : null, pressed && usesPressedOverlay ? squircle.active && squircle.size ?
-        /*#__PURE__*/
-        // On a squircle host the tint follows the same path as the
-        // fill; a rectangle would show at the corners.
-        _jsx(SquircleFill, {
-          width: squircle.size.width,
-          height: squircle.size.height,
-          radius: borderRadius,
-          fill: variantStyles.pressedTint,
-          outset: variantStyles.borderWidth,
-          testID: "button-pressed"
-        }) : /*#__PURE__*/_jsx(View, {
-          pointerEvents: "none",
-          style: [styles.pressedOverlay, {
-            borderRadius,
-            backgroundColor: variantStyles.pressedTint,
-            ...smoothCorners
-          }],
-          testID: "button-pressed"
-        }) : null, content]
-      })
-    })
-  });
-});
-Button.displayName = 'Button';
-const sizeMap = {
-  xs: {
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    minHeight: 28,
-    fontSize: 12,
-    borderRadius: 8,
-    iconSize: 14,
-    // The xs disc is only 18 across (20 on glass); a 14 icon filled 78% of it
-    // and met the edge. 11 keeps about md's share of the disc.
-    badgeIconSize: 11
-  },
-  sm: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    minHeight: 34,
-    fontSize: 14,
-    borderRadius: 10,
-    iconSize: 16
-  },
-  md: {
-    paddingHorizontal: 16,
-    paddingVertical: 9,
-    minHeight: 42,
-    fontSize: 16,
-    borderRadius: 12,
-    iconSize: 18
-  },
-  lg: {
-    paddingHorizontal: 20,
-    paddingVertical: 12,
-    minHeight: 50,
-    fontSize: 18,
-    borderRadius: 14,
-    iconSize: 20
-  },
-  xl: {
-    paddingHorizontal: 24,
-    paddingVertical: 14,
-    minHeight: 58,
-    fontSize: 20,
-    borderRadius: 16,
-    iconSize: 22
-  }
-};
-/** Opacity of the tone behind a soft button's label. */
-const SOFT_FILL_OPACITY = 0.14;
-const toneFor = (theme, tone) => {
-  switch (tone) {
-    case 'primary':
-      return {
-        base: theme.colors.primary,
-        on: theme.colors.onPrimary,
-        fg: theme.colors.primary,
-        soft: tintOf(theme.colors.primary, SOFT_FILL_OPACITY, theme.colors.primaryMuted)
-      };
-    case 'secondary':
-      return {
-        base: theme.colors.secondary,
-        on: theme.colors.onSecondary,
-        fg: theme.colors.onSecondary,
-        soft: theme.colors.secondary
-      };
-    case 'success':
-      return {
-        base: theme.colors.success,
-        on: theme.colors.onSuccess,
-        fg: theme.colors.success,
-        soft: tintOf(theme.colors.success, SOFT_FILL_OPACITY, theme.colors.background.secondary)
-      };
-    case 'warning':
-      return {
-        base: theme.colors.warning,
-        on: theme.colors.onWarning,
-        fg: theme.colors.warning,
-        soft: tintOf(theme.colors.warning, SOFT_FILL_OPACITY, theme.colors.background.secondary)
-      };
-    case 'error':
-      return {
-        base: theme.colors.error,
-        on: theme.colors.onError,
-        fg: theme.colors.error,
-        soft: tintOf(theme.colors.error, SOFT_FILL_OPACITY, theme.colors.background.secondary)
-      };
-    case 'neutral':
-    default:
-      return {
-        base: theme.colors.background.tertiary,
-        on: theme.colors.text.primary,
-        fg: theme.colors.text.primary,
-        soft: theme.colors.background.secondary
-      };
-  }
-};
-/** Gap between a badged icon's disc and the button's edge, every side. */
-const BADGE_INSET = 4;
-
-// Every variant carries the SAME borderWidth (with a transparent colour on
-// the non-outline ones). RN's layout treats border as part of the outer box,
-// so a 1-px border on outline-only would make outline buttons 2 px wider /
-// taller than solid / ghost buttons of identical content. Painting a
-// transparent border on the others equalises the geometry without visible
-// effect. Match the value with `BUTTON_BORDER_WIDTH` everywhere.
-const BUTTON_BORDER_WIDTH = 1;
-
-/** Tap target around a link's bare text, which has no padding of its own. */
-const LINK_HIT_SLOP = {
-  top: 8,
-  bottom: 8,
-  left: 8,
-  right: 8
-};
-const variantFor = (theme, variant, toneSet, disabled) => {
-  const textColor = disabled ? theme.colors.text.disabled : toneSet.fg;
-  // A disabled badge goes grey with the rest of the button.
-  const badgeDisabled = {
-    badgeFill: theme.colors.surface.disabled,
-    badgeInk: theme.colors.text.disabled
-  };
-  // The disc inverts the label: white with a tone icon where the label is
-  // white on the tone, the tone with a white icon where the label is the tone.
-  const badgeOnTone = disabled ? badgeDisabled : {
-    badgeFill: toneSet.on,
-    badgeInk: toneSet.base
-  };
-  const badgeOfTone = disabled ? badgeDisabled : {
-    badgeFill: toneSet.base,
-    badgeInk: toneSet.on
-  };
-  switch (variant) {
-    case 'solid':
-      return {
-        backgroundColor: disabled ? theme.colors.surface.disabled : toneSet.base,
-        borderColor: 'transparent',
-        borderWidth: BUTTON_BORDER_WIDTH,
-        textColor: disabled ? theme.colors.text.disabled : toneSet.on,
-        pressedTint: theme.colors.surface.pressed,
-        ...badgeOnTone
-      };
-    case 'soft':
-      return {
-        backgroundColor: disabled ? theme.colors.surface.disabled : toneSet.soft,
-        borderColor: 'transparent',
-        borderWidth: BUTTON_BORDER_WIDTH,
-        textColor,
-        pressedTint: theme.colors.surface.pressed,
-        ...badgeOfTone
-      };
-    case 'outline':
-      return {
-        backgroundColor: 'transparent',
-        borderColor: disabled ? theme.colors.border.primary : toneSet.base,
-        borderWidth: BUTTON_BORDER_WIDTH,
-        textColor,
-        pressedTint: theme.colors.surface.pressed,
-        ...badgeOfTone
-      };
-    case 'ghost':
-      return {
-        backgroundColor: 'transparent',
-        borderColor: 'transparent',
-        borderWidth: BUTTON_BORDER_WIDTH,
-        textColor,
-        pressedTint: theme.colors.surface.pressed,
-        ...badgeOfTone
-      };
-    case 'link':
-      // No border at all: the link is inline text, not a box in a row of
-      // buttons, so the geometry equalisation above does not apply to it.
-      return {
-        backgroundColor: 'transparent',
-        borderColor: 'transparent',
-        borderWidth: 0,
-        textColor: disabled ? theme.colors.text.disabled : theme.colors.text.link,
-        pressedTint: theme.colors.surface.pressed,
-        ...badgeOfTone
-      };
-    case 'glass':
-      // The fill and rim stay while disabled: an opaque disabled grey would
-      // read as a hole punched in the gradient underneath. The ink dims.
-      return {
-        backgroundColor: theme.colors.glass.fill,
-        borderColor: theme.colors.glass.border,
-        borderWidth: BUTTON_BORDER_WIDTH,
-        textColor: disabled ? theme.colors.text.disabled : theme.colors.glass.on,
-        pressedTint: ACCENT_PRESSED_TINT,
-        badgeFill: theme.colors.glass.badge,
-        badgeInk: disabled ? theme.colors.text.disabled : toneSet.base
-      };
-    default:
-      return {
-        backgroundColor: toneSet.base,
-        borderColor: 'transparent',
-        borderWidth: BUTTON_BORDER_WIDTH,
-        textColor: toneSet.on,
-        pressedTint: theme.colors.surface.pressed,
-        ...badgeOnTone
-      };
-  }
-};
-const buildStyles = theme => StyleSheet.create({
-  pressedOverlay: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  },
-  base: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-    overflow: 'hidden'
-  },
-  contentRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  label: {
-    textAlign: 'center',
-    // Android's default font padding adds the font's extra ascent above
-    // the glyphs, which pushed the visible label below the middle of the
-    // button. Off, the glyph box itself is what the row centres.
-    includeFontPadding: false,
-    textAlignVertical: 'center'
-  },
-  linkUnderline: {
-    height: 1.5,
-    marginTop: 1
-  },
-  iconLeft: {
-    marginRight: 8
-  },
-  iconBadge: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  iconRight: {
-    marginLeft: 8
-  },
-  fullWidth: {
-    alignSelf: 'stretch'
-  }
-});
-export { Button };
-export default Button;
-//# sourceMappingURL=Button.js.map
+"use strict";import React,{forwardRef,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,Gradient,useTheme}from"../../theme/index.js";import{createAnimatedValue}from"../../theme/animatedValue.js";import{ACCENT_PRESSED_TINT,tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Spinner}from"../Spinner/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const Button=forwardRef((e,r)=>{const{title:o,children:t,variant:s="solid",tone:i="primary",size:n="md",loading:l=!1,disabled:a=!1,fullWidth:d=!1,leftIcon:c,rightIcon:u,iconVariant:b,leftIconBadge:g=!1,haptic:p="selection",rounded:m=!1,gradient:f,style:h,textStyle:y,pressAnimation:S,onPress:x,accessibilityLabel:C,accessibilityHint:I,testID:_,onLayout:k,...w}=e;if(__DEV__&&hasTextChild(t))throw new Error('[@webority/mobile-ui] Button was given its label as text children. Pass it as `title` (<Button title="Save" />): text children draw a blank button with no accessible name.');const z=useTheme(),j=!a&&!l,T="link"===s,R=S??(!T&&"scale"),v=usePressAnimation({preset:R||"scale",enabled:!1!==R&&j}),F=useFlickGuard(),V=useMemo(()=>buildStyles(z),[z]),E={...sizeMap[n],...z.components.button?.[n]??{}},A=useMemo(()=>toneFor(z,i),[z,i]),H=useMemo(()=>variantFor(z,s,A,a),[z,s,A,a]),L=useMemo(()=>!f||a||"solid"!==s?null:"string"==typeof f?z.gradients[f]??null:f,[f,a,s,z.gradients]),W=StyleSheet.flatten(h)?.borderRadius,D=T?0:"number"==typeof W?W:m?z.radius.full:E.borderRadius,P=useSquircle(!L&&"link"!==s,D,k),B=useRef(createAnimatedValue(0)).current,[O,N]=useState(0),G=T?e=>N(e.nativeEvent.layout.width):void 0,M=C??o,q="outline"===s||"ghost"===s,U=!q&&!T,K={color:H.textColor,size:E.iconSize,disabled:a},X=g&&!T&&Boolean(c),Y=E.minHeight-2*BADGE_INSET-2*H.borderWidth,J={color:H.badgeInk,size:E.badgeIconSize??E.iconSize,disabled:a},Q=_jsx(View,{style:V.contentRow,children:l?_jsx(Spinner,{variant:"circular",size:"sm",color:H.textColor,accessibilityLabel:"Loading"}):_jsxs(_Fragment,{children:[X?_jsx(View,{testID:"button-icon-badge",style:[V.iconLeft,V.iconBadge,{width:Y,height:Y,borderRadius:Y/2,backgroundColor:H.badgeFill}],children:renderSlotIcon(c,J,b)}):c?_jsx(View,{style:V.iconLeft,children:renderSlotIcon(c,K,b)}):null,o?_jsxs(View,{onLayout:G,children:[_jsx(Text,{style:[V.label,{color:H.textColor,fontSize:E.fontSize,...fontFor(z,"semibold")},y],numberOfLines:1,children:o}),T?_jsx(Animated.View,{pointerEvents:"none",testID:"button-link-underline",style:[V.linkUnderline,{backgroundColor:H.textColor,transform:[{translateX:B.interpolate({inputRange:[0,1],outputRange:[-O/2,0]})},{scaleX:B.interpolate({inputRange:[0,1],outputRange:[0,1]})}]}]}):null]}):t,u?_jsx(View,{style:V.iconRight,children:renderSlotIcon(u,K,b)}):null]})});return _jsx(Animated.View,{style:[v.style,d?V.fullWidth:null],children:_jsx(Pressable,{ref:r,onPress:e=>{j&&!F.isFlick(e)&&(v.press(),!1!==p&&triggerHaptic(p),x?.(e))},onPressIn:e=>{F.onPressIn(e),v.pressIn(),T&&j&&(B.stopAnimation(),B.setValue(0),Animated.timing(B,{toValue:1,duration:z.motion.duration.slower,easing:Easing.bezier(...z.motion.easing.decelerate),useNativeDriver:!0}).start())},onPressOut:()=>{v.pressOut()},disabled:!j,hitSlop:T?LINK_HIT_SLOP:void 0,accessibilityRole:"button",accessibilityLabel:M,accessibilityHint:I,accessibilityState:{disabled:!j,busy:l},testID:_,onLayout:P.onLayout,style:({pressed:e})=>[V.base,{paddingHorizontal:T?0:E.paddingHorizontal,paddingVertical:T?0:X?BADGE_INSET:E.paddingVertical,paddingLeft:X?BADGE_INSET:void 0,minHeight:T?void 0:E.minHeight,borderRadius:D,...smoothCorners,backgroundColor:L||P.active?"transparent":H.backgroundColor,borderWidth:H.borderWidth,borderColor:P.active?"transparent":H.borderColor,opacity:l?.55:1,overflow:P.active||T?"visible":"hidden"},e&&q&&!P.active?{backgroundColor:z.colors.surface.pressed}:null,d?V.fullWidth:null,h],...w,children:({pressed:e})=>_jsxs(_Fragment,{children:[P.active&&P.size?_jsx(SquircleFill,{width:P.size.width,height:P.size.height,radius:D,fill:e&&q?z.colors.surface.pressed:H.backgroundColor,stroke:H.borderColor,strokeWidth:H.borderWidth,outset:H.borderWidth}):null,L?_jsx(Gradient,{gradient:L,style:[StyleSheet.absoluteFill,{borderRadius:D,...smoothCorners}]}):null,e&&U?P.active&&P.size?_jsx(SquircleFill,{width:P.size.width,height:P.size.height,radius:D,fill:H.pressedTint,outset:H.borderWidth,testID:"button-pressed"}):_jsx(View,{pointerEvents:"none",style:[V.pressedOverlay,{borderRadius:D,backgroundColor:H.pressedTint,...smoothCorners}],testID:"button-pressed"}):null,Q]})})})});Button.displayName="Button";const hasTextChild=e=>React.Children.toArray(e).some(e=>"string"==typeof e||"number"==typeof e),sizeMap={xs:{paddingHorizontal:10,paddingVertical:4,minHeight:28,fontSize:12,borderRadius:8,iconSize:14,badgeIconSize:11},sm:{paddingHorizontal:12,paddingVertical:6,minHeight:34,fontSize:14,borderRadius:10,iconSize:16},md:{paddingHorizontal:16,paddingVertical:9,minHeight:42,fontSize:16,borderRadius:12,iconSize:18},lg:{paddingHorizontal:20,paddingVertical:12,minHeight:50,fontSize:18,borderRadius:14,iconSize:20},xl:{paddingHorizontal:24,paddingVertical:14,minHeight:58,fontSize:20,borderRadius:16,iconSize:22}},SOFT_FILL_OPACITY=.14,toneFor=(e,r)=>{switch(r){case"primary":return{base:e.colors.primary,on:e.colors.onPrimary,fg:e.colors.primary,soft:tintOf(e.colors.primary,.14,e.colors.primaryMuted)};case"secondary":return{base:e.colors.secondary,on:e.colors.onSecondary,fg:e.colors.onSecondary,soft:e.colors.secondary};case"success":return{base:e.colors.success,on:e.colors.onSuccess,fg:e.colors.success,soft:tintOf(e.colors.success,.14,e.colors.background.secondary)};case"warning":return{base:e.colors.warning,on:e.colors.onWarning,fg:e.colors.warning,soft:tintOf(e.colors.warning,.14,e.colors.background.secondary)};case"error":return{base:e.colors.error,on:e.colors.onError,fg:e.colors.error,soft:tintOf(e.colors.error,.14,e.colors.background.secondary)};default:return{base:e.colors.background.tertiary,on:e.colors.text.primary,fg:e.colors.text.primary,soft:e.colors.background.secondary}}},BADGE_INSET=4,BUTTON_BORDER_WIDTH=1,LINK_HIT_SLOP={top:8,bottom:8,left:8,right:8},variantFor=(e,r,o,t)=>{const s=t?e.colors.text.disabled:o.fg,i={badgeFill:e.colors.surface.disabled,badgeInk:e.colors.text.disabled},n=t?i:{badgeFill:o.on,badgeInk:o.base},l=t?i:{badgeFill:o.base,badgeInk:o.on};switch(r){case"solid":return{backgroundColor:t?e.colors.surface.disabled:o.base,borderColor:"transparent",borderWidth:1,textColor:t?e.colors.text.disabled:o.on,pressedTint:e.colors.surface.pressed,...n};case"soft":return{backgroundColor:t?e.colors.surface.disabled:o.soft,borderColor:"transparent",borderWidth:1,textColor:s,pressedTint:e.colors.surface.pressed,...l};case"outline":return{backgroundColor:"transparent",borderColor:t?e.colors.border.primary:o.base,borderWidth:1,textColor:s,pressedTint:e.colors.surface.pressed,...l};case"ghost":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:1,textColor:s,pressedTint:e.colors.surface.pressed,...l};case"link":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:0,textColor:t?e.colors.text.disabled:e.colors.text.link,pressedTint:e.colors.surface.pressed,...l};case"glass":return{backgroundColor:e.colors.glass.fill,borderColor:e.colors.glass.border,borderWidth:1,textColor:t?e.colors.text.disabled:e.colors.glass.on,pressedTint:ACCENT_PRESSED_TINT,badgeFill:e.colors.glass.badge,badgeInk:t?e.colors.text.disabled:o.base};default:return{backgroundColor:o.base,borderColor:"transparent",borderWidth:1,textColor:o.on,pressedTint:e.colors.surface.pressed,...n}}},buildStyles=e=>StyleSheet.create({pressedOverlay:{position:"absolute",top:0,right:0,bottom:0,left:0},base:{alignItems:"center",justifyContent:"center",flexDirection:"row",overflow:"hidden"},contentRow:{flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},linkUnderline:{height:1.5,marginTop:1},iconLeft:{marginRight:8},iconBadge:{alignItems:"center",justifyContent:"center"},iconRight:{marginLeft:8},fullWidth:{alignSelf:"stretch"}});export{Button};export default Button;

package/lib/module/components/Button/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { Button, default } from "./Button.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{Button,default}from"./Button.js";