@webority/mobile-ui 0.0.38 → 0.1.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
+import e,{forwardRef as o,useMemo as r,useRef as t,useState as s}from"react";import{Animated as i,Easing as n,Pressable as l,StyleSheet as a,Text as d,View as c}from"react-native";import{useFlickGuard as u}from"../../hooks/useFlickGuard.js";import{usePressAnimation as b}from"../../hooks/usePressAnimation.js";import{fontFor as g,Gradient as p,useTheme as f}from"../../theme/index.js";import{createAnimatedValue as h}from"../../theme/animatedValue.js";import{ACCENT_PRESSED_TINT as m,tintOf as y}from"../../utils/color.js";import{smoothCorners as C}from"../../utils/corners.js";import{triggerHaptic as k}from"../../utils/hapticUtils.js";import{renderSlotIcon as x}from"../AppIcon/slotIcon.js";import{Spinner as z}from"../Spinner/index.js";import{SquircleFill as S,useSquircle as v}from"../SquircleFill/SquircleFill.js";import{jsx as I,jsxs as w,Fragment as R}from"react/jsx-runtime";const W=o((e,o)=>{const{title:m,children:y,variant:W="solid",tone:j="primary",size:F="md",loading:T=!1,disabled:D=!1,fullWidth:P=!1,leftIcon:A,rightIcon:B,iconVariant:O,leftIconBadge:E=!1,haptic:U="selection",rounded:q=!1,gradient:N,style:X,textStyle:G,pressAnimation:M,onPress:J,accessibilityLabel:K,accessibilityHint:Q,testID:Y,onLayout:Z,...$}=e,_=f(),ee=!D&&!T,oe="link"===W,re=M??(!oe&&"scale"),te=b({preset:re||"scale",enabled:!1!==re&&ee}),se=u(),ie=r(()=>buildStyles(_),[_]),ne={...H[F],..._.components.button?.[F]??{}},le=r(()=>toneFor(_,j),[_,j]),ae=r(()=>variantFor(_,W,le,D),[_,W,le,D]),de=r(()=>!N||D||"solid"!==W?null:"string"==typeof N?_.gradients[N]??null:N,[N,D,W,_.gradients]),ce=a.flatten(X)?.borderRadius,ue=oe?0:"number"==typeof ce?ce:q?_.radius.full:ne.borderRadius,be=v(!de&&"link"!==W,ue,Z),ge=t(h(0)).current,[pe,fe]=s(0),he=oe?e=>fe(e.nativeEvent.layout.width):void 0,me=K??m,ye="outline"===W||"ghost"===W,Ce=!ye&&!oe,ke={color:ae.textColor,size:ne.iconSize,disabled:D},xe=E&&!oe&&Boolean(A),ze=ne.minHeight-2*L-2*ae.borderWidth,Se={color:ae.badgeInk,size:ne.badgeIconSize??ne.iconSize,disabled:D},ve=I(c,{style:ie.contentRow,children:T?I(z,{variant:"circular",size:"sm",color:ae.textColor,accessibilityLabel:"Loading"}):w(R,{children:[xe?I(c,{testID:"button-icon-badge",style:[ie.iconLeft,ie.iconBadge,{width:ze,height:ze,borderRadius:ze/2,backgroundColor:ae.badgeFill}],children:x(A,Se,O)}):A?I(c,{style:ie.iconLeft,children:x(A,ke,O)}):null,m?w(c,{onLayout:he,children:[I(d,{style:[ie.label,{color:ae.textColor,fontSize:ne.fontSize,...g(_,"semibold")},G],numberOfLines:1,children:m}),oe?I(i.View,{pointerEvents:"none",testID:"button-link-underline",style:[ie.linkUnderline,{backgroundColor:ae.textColor,transform:[{translateX:ge.interpolate({inputRange:[0,1],outputRange:[-pe/2,0]})},{scaleX:ge.interpolate({inputRange:[0,1],outputRange:[0,1]})}]}]}):null]}):y,B?I(c,{style:ie.iconRight,children:x(B,ke,O)}):null]})});return I(i.View,{style:[te.style,P?ie.fullWidth:null],children:I(l,{ref:o,onPress:e=>{ee&&!se.isFlick(e)&&(te.press(),!1!==U&&k(U),J?.(e))},onPressIn:e=>{se.onPressIn(e),te.pressIn(),oe&&ee&&(ge.stopAnimation(),ge.setValue(0),i.timing(ge,{toValue:1,duration:_.motion.duration.slower,easing:n.bezier(..._.motion.easing.decelerate),useNativeDriver:!0}).start())},onPressOut:()=>{te.pressOut()},disabled:!ee,hitSlop:oe?V:void 0,accessibilityRole:"button",accessibilityLabel:me,accessibilityHint:Q,accessibilityState:{disabled:!ee,busy:T},testID:Y,onLayout:be.onLayout,style:({pressed:e})=>[ie.base,{paddingHorizontal:oe?0:ne.paddingHorizontal,paddingVertical:oe?0:xe?L:ne.paddingVertical,paddingLeft:xe?L:void 0,minHeight:oe?void 0:ne.minHeight,borderRadius:ue,...C,backgroundColor:de||be.active?"transparent":ae.backgroundColor,borderWidth:ae.borderWidth,borderColor:be.active?"transparent":ae.borderColor,opacity:T?.55:1,overflow:be.active||oe?"visible":"hidden"},e&&ye&&!be.active?{backgroundColor:_.colors.surface.pressed}:null,P?ie.fullWidth:null,X],...$,children:({pressed:e})=>w(R,{children:[be.active&&be.size?I(S,{width:be.size.width,height:be.size.height,radius:ue,fill:e&&ye?_.colors.surface.pressed:ae.backgroundColor,stroke:ae.borderColor,strokeWidth:ae.borderWidth,outset:ae.borderWidth}):null,de?I(p,{gradient:de,style:[a.absoluteFill,{borderRadius:ue,...C}]}):null,e&&Ce?be.active&&be.size?I(S,{width:be.size.width,height:be.size.height,radius:ue,fill:ae.pressedTint,outset:ae.borderWidth,testID:"button-pressed"}):I(c,{pointerEvents:"none",style:[ie.pressedOverlay,{borderRadius:ue,backgroundColor:ae.pressedTint,...C}],testID:"button-pressed"}):null,ve]})})})});W.displayName="Button";const H={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}},j=.14,toneFor=(e,o)=>{switch(o){case"primary":return{base:e.colors.primary,on:e.colors.onPrimary,fg:e.colors.primary,soft:y(e.colors.primary,j,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:y(e.colors.success,j,e.colors.background.secondary)};case"warning":return{base:e.colors.warning,on:e.colors.onWarning,fg:e.colors.warning,soft:y(e.colors.warning,j,e.colors.background.secondary)};case"error":return{base:e.colors.error,on:e.colors.onError,fg:e.colors.error,soft:y(e.colors.error,j,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}}},L=4,V={top:8,bottom:8,left:8,right:8},variantFor=(e,o,r,t)=>{const s=t?e.colors.text.disabled:r.fg,i={badgeFill:e.colors.surface.disabled,badgeInk:e.colors.text.disabled},n=t?i:{badgeFill:r.on,badgeInk:r.base},l=t?i:{badgeFill:r.base,badgeInk:r.on};switch(o){case"solid":return{backgroundColor:t?e.colors.surface.disabled:r.base,borderColor:"transparent",borderWidth:1,textColor:t?e.colors.text.disabled:r.on,pressedTint:e.colors.surface.pressed,...n};case"soft":return{backgroundColor:t?e.colors.surface.disabled:r.soft,borderColor:"transparent",borderWidth:1,textColor:s,pressedTint:e.colors.surface.pressed,...l};case"outline":return{backgroundColor:"transparent",borderColor:t?e.colors.border.primary:r.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:m,badgeFill:e.colors.glass.badge,badgeInk:t?e.colors.text.disabled:r.base};default:return{backgroundColor:r.base,borderColor:"transparent",borderWidth:1,textColor:r.on,pressedTint:e.colors.surface.pressed,...n}}},buildStyles=e=>a.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{W as Button};export default W;

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

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