@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/commonjs/components/Button/Button.js

@@ -1,561 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Button = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _useFlickGuard = require("../../hooks/useFlickGuard.js");
-var _usePressAnimation = require("../../hooks/usePressAnimation.js");
-var _index = require("../../theme/index.js");
-var _animatedValue = require("../../theme/animatedValue.js");
-var _color = require("../../utils/color.js");
-var _corners = require("../../utils/corners.js");
-var _hapticUtils = require("../../utils/hapticUtils.js");
-var _slotIcon = require("../AppIcon/slotIcon.js");
-var _index2 = require("../Spinner/index.js");
-var _SquircleFill = require("../SquircleFill/SquircleFill.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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.
- */
-
-const Button = exports.Button = /*#__PURE__*/(0, _react.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 = (0, _index.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 = (0, _usePressAnimation.usePressAnimation)({
-    preset: pressAnimation || 'scale',
-    enabled: pressAnimation !== false && isInteractive
-  });
-  const flickGuard = (0, _useFlickGuard.useFlickGuard)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeStyles = {
-    ...sizeMap[size],
-    ...(theme.components.button?.[size] ?? {})
-  };
-  const toneColors = (0, _react.useMemo)(() => toneFor(theme, tone), [theme, tone]);
-  const variantStyles = (0, _react.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 = (0, _react.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 = _reactNative.StyleSheet.flatten(style)?.borderRadius;
-  const borderRadius = isLink ? 0 : typeof styleRadius === 'number' ? styleRadius : rounded ? theme.radius.full : sizeStyles.borderRadius;
-  const squircle = (0, _SquircleFill.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 = (0, _react.useRef)((0, _animatedValue.createAnimatedValue)(0)).current;
-  const [labelWidth, setLabelWidth] = (0, _react.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.
-      _reactNative.Animated.timing(underline, {
-        toValue: 1,
-        duration: theme.motion.duration.slower,
-        easing: _reactNative.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) {
-      (0, _hapticUtils.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.contentRow,
-    children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Spinner, {
-      variant: "circular",
-      size: "sm",
-      color: variantStyles.textColor,
-      accessibilityLabel: "Loading"
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [hasBadge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        testID: "button-icon-badge",
-        style: [styles.iconLeft, styles.iconBadge, {
-          width: badgeDiameter,
-          height: badgeDiameter,
-          borderRadius: badgeDiameter / 2,
-          backgroundColor: variantStyles.badgeFill
-        }],
-        children: (0, _slotIcon.renderSlotIcon)(leftIcon, badgeSlotState)
-      }) : leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.iconLeft,
-        children: (0, _slotIcon.renderSlotIcon)(leftIcon, slotState)
-      }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        onLayout: onLabelLayout,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.label, {
-            color: variantStyles.textColor,
-            fontSize: sizeStyles.fontSize,
-            ...(0, _index.fontFor)(theme, 'semibold')
-          }, textStyle],
-          numberOfLines: 1,
-          children: title
-        }), isLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.iconRight,
-        children: (0, _slotIcon.renderSlotIcon)(rightIcon, slotState)
-      }) : null]
-    })
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: [pressAnim.style, fullWidth ? styles.fullWidth : null],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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,
-        ..._corners.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [squircle.active && squircle.size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SquircleFill.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.
-        (0, _jsxRuntime.jsx)(_index.Gradient, {
-          gradient: resolvedGradient,
-          style: [_reactNative.StyleSheet.absoluteFill, {
-            borderRadius,
-            ..._corners.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.
-        (0, _jsxRuntime.jsx)(_SquircleFill.SquircleFill, {
-          width: squircle.size.width,
-          height: squircle.size.height,
-          radius: borderRadius,
-          fill: variantStyles.pressedTint,
-          outset: variantStyles.borderWidth,
-          testID: "button-pressed"
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          pointerEvents: "none",
-          style: [styles.pressedOverlay, {
-            borderRadius,
-            backgroundColor: variantStyles.pressedTint,
-            ..._corners.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: (0, _color.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: (0, _color.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: (0, _color.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: (0, _color.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: _color.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 => _reactNative.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'
-  }
-});
-var _default = exports.default = Button;
-//# sourceMappingURL=Button.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Button=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_useFlickGuard=require("../../hooks/useFlickGuard.js"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_animatedValue=require("../../theme/animatedValue.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index2=require("../Spinner/index.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var i,s,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(i=r?o:t){if(i.has(e))return i.get(e);i.set(e,n)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((s=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(s.get||s.set)?i(n,r,s):n[r]=e[r]);return n})(e,r)}const Button=exports.Button=(0,_react.forwardRef)((e,r)=>{const{title:t,children:o,variant:i="solid",tone:s="primary",size:n="md",loading:a=!1,disabled:l=!1,fullWidth:d=!1,leftIcon:c,rightIcon:u,iconVariant:b,leftIconBadge:g=!1,haptic:p="selection",rounded:_=!1,gradient:f,style:h,textStyle:m,pressAnimation:x,onPress:y,accessibilityLabel:S,accessibilityHint:j,testID:v,onLayout:R,...C}=e;if(__DEV__&&hasTextChild(o))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 k=(0,_index.useTheme)(),I=!l&&!a,w="link"===i,z=x??(!w&&"scale"),F=(0,_usePressAnimation.usePressAnimation)({preset:z||"scale",enabled:!1!==z&&I}),T=(0,_useFlickGuard.useFlickGuard)(),N=(0,_react.useMemo)(()=>buildStyles(k),[k]),W={...sizeMap[n],...k.components.button?.[n]??{}},q=(0,_react.useMemo)(()=>toneFor(k,s),[k,s]),V=(0,_react.useMemo)(()=>variantFor(k,i,q,l),[k,i,q,l]),H=(0,_react.useMemo)(()=>!f||l||"solid"!==i?null:"string"==typeof f?k.gradients[f]??null:f,[f,l,i,k.gradients]),P=_reactNative.StyleSheet.flatten(h)?.borderRadius,A=w?0:"number"==typeof P?P:_?k.radius.full:W.borderRadius,L=(0,_SquircleFill.useSquircle)(!H&&"link"!==i,A,R),O=(0,_react.useRef)((0,_animatedValue.createAnimatedValue)(0)).current,[E,B]=(0,_react.useState)(0),D=w?e=>B(e.nativeEvent.layout.width):void 0,M=S??t,G="outline"===i||"ghost"===i,U=!G&&!w,K={color:V.textColor,size:W.iconSize,disabled:l},X=g&&!w&&Boolean(c),Y=W.minHeight-2*BADGE_INSET-2*V.borderWidth,J={color:V.badgeInk,size:W.badgeIconSize??W.iconSize,disabled:l},Q=(0,_jsxRuntime.jsx)(_reactNative.View,{style:N.contentRow,children:a?(0,_jsxRuntime.jsx)(_index2.Spinner,{variant:"circular",size:"sm",color:V.textColor,accessibilityLabel:"Loading"}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[X?(0,_jsxRuntime.jsx)(_reactNative.View,{testID:"button-icon-badge",style:[N.iconLeft,N.iconBadge,{width:Y,height:Y,borderRadius:Y/2,backgroundColor:V.badgeFill}],children:(0,_slotIcon.renderSlotIcon)(c,J,b)}):c?(0,_jsxRuntime.jsx)(_reactNative.View,{style:N.iconLeft,children:(0,_slotIcon.renderSlotIcon)(c,K,b)}):null,t?(0,_jsxRuntime.jsxs)(_reactNative.View,{onLayout:D,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[N.label,{color:V.textColor,fontSize:W.fontSize,...(0,_index.fontFor)(k,"semibold")},m],numberOfLines:1,children:t}),w?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",testID:"button-link-underline",style:[N.linkUnderline,{backgroundColor:V.textColor,transform:[{translateX:O.interpolate({inputRange:[0,1],outputRange:[-E/2,0]})},{scaleX:O.interpolate({inputRange:[0,1],outputRange:[0,1]})}]}]}):null]}):o,u?(0,_jsxRuntime.jsx)(_reactNative.View,{style:N.iconRight,children:(0,_slotIcon.renderSlotIcon)(u,K,b)}):null]})});return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[F.style,d?N.fullWidth:null],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:r,onPress:e=>{I&&!T.isFlick(e)&&(F.press(),!1!==p&&(0,_hapticUtils.triggerHaptic)(p),y?.(e))},onPressIn:e=>{T.onPressIn(e),F.pressIn(),w&&I&&(O.stopAnimation(),O.setValue(0),_reactNative.Animated.timing(O,{toValue:1,duration:k.motion.duration.slower,easing:_reactNative.Easing.bezier(...k.motion.easing.decelerate),useNativeDriver:!0}).start())},onPressOut:()=>{F.pressOut()},disabled:!I,hitSlop:w?LINK_HIT_SLOP:void 0,accessibilityRole:"button",accessibilityLabel:M,accessibilityHint:j,accessibilityState:{disabled:!I,busy:a},testID:v,onLayout:L.onLayout,style:({pressed:e})=>[N.base,{paddingHorizontal:w?0:W.paddingHorizontal,paddingVertical:w?0:X?BADGE_INSET:W.paddingVertical,paddingLeft:X?BADGE_INSET:void 0,minHeight:w?void 0:W.minHeight,borderRadius:A,..._corners.smoothCorners,backgroundColor:H||L.active?"transparent":V.backgroundColor,borderWidth:V.borderWidth,borderColor:L.active?"transparent":V.borderColor,opacity:a?.55:1,overflow:L.active||w?"visible":"hidden"},e&&G&&!L.active?{backgroundColor:k.colors.surface.pressed}:null,d?N.fullWidth:null,h],...C,children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[L.active&&L.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:L.size.width,height:L.size.height,radius:A,fill:e&&G?k.colors.surface.pressed:V.backgroundColor,stroke:V.borderColor,strokeWidth:V.borderWidth,outset:V.borderWidth}):null,H?(0,_jsxRuntime.jsx)(_index.Gradient,{gradient:H,style:[_reactNative.StyleSheet.absoluteFill,{borderRadius:A,..._corners.smoothCorners}]}):null,e&&U?L.active&&L.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:L.size.width,height:L.size.height,radius:A,fill:V.pressedTint,outset:V.borderWidth,testID:"button-pressed"}):(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[N.pressedOverlay,{borderRadius:A,backgroundColor:V.pressedTint,..._corners.smoothCorners}],testID:"button-pressed"}):null,Q]})})})});Button.displayName="Button";const hasTextChild=e=>_react.default.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:(0,_color.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:(0,_color.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:(0,_color.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:(0,_color.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,t,o)=>{const i=o?e.colors.text.disabled:t.fg,s={badgeFill:e.colors.surface.disabled,badgeInk:e.colors.text.disabled},n=o?s:{badgeFill:t.on,badgeInk:t.base},a=o?s:{badgeFill:t.base,badgeInk:t.on};switch(r){case"solid":return{backgroundColor:o?e.colors.surface.disabled:t.base,borderColor:"transparent",borderWidth:1,textColor:o?e.colors.text.disabled:t.on,pressedTint:e.colors.surface.pressed,...n};case"soft":return{backgroundColor:o?e.colors.surface.disabled:t.soft,borderColor:"transparent",borderWidth:1,textColor:i,pressedTint:e.colors.surface.pressed,...a};case"outline":return{backgroundColor:"transparent",borderColor:o?e.colors.border.primary:t.base,borderWidth:1,textColor:i,pressedTint:e.colors.surface.pressed,...a};case"ghost":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:1,textColor:i,pressedTint:e.colors.surface.pressed,...a};case"link":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:0,textColor:o?e.colors.text.disabled:e.colors.text.link,pressedTint:e.colors.surface.pressed,...a};case"glass":return{backgroundColor:e.colors.glass.fill,borderColor:e.colors.glass.border,borderWidth:1,textColor:o?e.colors.text.disabled:e.colors.glass.on,pressedTint:_color.ACCENT_PRESSED_TINT,badgeFill:e.colors.glass.badge,badgeInk:o?e.colors.text.disabled:t.base};default:return{backgroundColor:t.base,borderColor:"transparent",borderWidth:1,textColor:t.on,pressedTint:e.colors.surface.pressed,...n}}},buildStyles=e=>_reactNative.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"}});var _default=exports.default=Button;

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function () {
-    return _Button.Button;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Button.default;
-  }
-});
-var _Button = _interopRequireWildcard(require("./Button.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Button",{enumerable:!0,get:function(){return _Button.Button}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Button.default}});var _Button=_interopRequireWildcard(require("./Button.js"));function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,u,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((u=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(u.get||u.set)?o(i,t,u):i[t]=e[t]);return i})(e,t)}