@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -1,187 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Checkbox = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../../hooks/index.js");
-var _index2 = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _hapticUtils = require("../../utils/hapticUtils.js");
-var _jsxRuntime = require("react/jsx-runtime");
-const sizeMap = {
-  sm: 16,
-  md: 20,
-  lg: 24
-};
-const toneColor = (theme, tone) => {
-  switch (tone) {
-    case 'success':
-      return theme.colors.success;
-    case 'warning':
-      return theme.colors.warning;
-    case 'error':
-      return theme.colors.error;
-    case 'primary':
-    default:
-      return theme.colors.primary;
-  }
-};
-const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    checked,
-    defaultChecked,
-    onChange,
-    indeterminate = false,
-    disabled = false,
-    label,
-    size = 'md',
-    tone = 'primary',
-    accessibilityLabel,
-    haptic,
-    style,
-    boxStyle,
-    checkIconStyle,
-    indeterminateBarStyle,
-    containerStyle,
-    labelStyle,
-    testID,
-    ...rest
-  } = props;
-  const [current, setCurrent] = (0, _index.useControllableState)({
-    value: checked,
-    defaultValue: defaultChecked ?? false,
-    onChange
-  });
-  const theme = (0, _index2.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const boxSize = theme.components.checkbox?.[size]?.boxSize ?? sizeMap[size];
-  const checkboxBorderWidth = theme.colors.border.width;
-  const checkboxLabelGap = theme.components.checkbox?.labelGap ?? 10;
-  const fillColor = toneColor(theme, tone);
-  const isActive = current || indeterminate;
-  const progress = (0, _react.useRef)((0, _index2.createAnimatedValue)(isActive ? 1 : 0)).current;
-  (0, _react.useEffect)(() => {
-    const anim = _reactNative.Animated.spring(progress, {
-      toValue: isActive ? 1 : 0,
-      damping: theme.motion.spring.snappy.damping,
-      stiffness: theme.motion.spring.snappy.stiffness,
-      mass: theme.motion.spring.snappy.mass,
-      useNativeDriver: true
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [isActive, progress, theme.motion.spring.snappy]);
-  const scale = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1]
-  });
-  const handlePress = event => {
-    if (disabled) {
-      return;
-    }
-    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _hapticUtils.triggerHaptic)(h);
-    }
-    setCurrent(!current);
-    rest.onPressOut?.(event);
-  };
-  const accessibleLabel = accessibilityLabel ?? label;
-  const borderColor = disabled ? theme.colors.border.primary : isActive ? fillColor : theme.colors.border.primary;
-  const backgroundColor = disabled ? theme.colors.surface.disabled : isActive ? fillColor : 'transparent';
-  const glyphColor = disabled ? theme.colors.text.disabled : theme.colors.text.inverse;
-  const glyphFontSize = Math.round(boxSize * 0.72);
-  const indeterminateBarWidth = Math.round(boxSize * 0.55);
-  const indeterminateBarHeight = Math.max(2, Math.round(boxSize * 0.12));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-    ref: ref,
-    onPress: handlePress,
-    disabled: disabled,
-    accessibilityRole: "checkbox",
-    accessibilityLabel: accessibleLabel,
-    accessibilityState: {
-      checked: indeterminate ? 'mixed' : current,
-      disabled
-    },
-    testID: testID,
-    hitSlop: 6,
-    ...rest,
-    style: ({
-      pressed
-    }) => [styles.row, {
-      opacity: disabled ? 0.55 : pressed ? 0.85 : 1
-    }, containerStyle, style],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.box, {
-        width: boxSize,
-        height: boxSize,
-        borderWidth: checkboxBorderWidth,
-        borderRadius: theme.radius.xs,
-        ..._corners.smoothCorners,
-        borderColor,
-        backgroundColor
-      }, boxStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        style: [styles.glyphWrap, {
-          opacity: progress,
-          transform: [{
-            scale
-          }]
-        }],
-        children: indeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [{
-            width: indeterminateBarWidth,
-            height: indeterminateBarHeight,
-            borderRadius: indeterminateBarHeight / 2,
-            ..._corners.smoothCorners,
-            backgroundColor: glyphColor
-          }, indeterminateBarStyle]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.check, {
-            color: glyphColor,
-            fontSize: glyphFontSize,
-            lineHeight: glyphFontSize + 2
-          }, checkIconStyle],
-          allowFontScaling: false,
-          children: '✓'
-        })
-      })
-    }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.label, {
-        marginLeft: checkboxLabelGap,
-        color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
-        fontSize: theme.typography.fontSize.base
-      }, labelStyle],
-      numberOfLines: 2,
-      children: label
-    }) : null]
-  });
-});
-Checkbox.displayName = 'Checkbox';
-const buildStyles = _theme => _reactNative.StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  box: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  glyphWrap: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  check: {
-    fontWeight: '700',
-    textAlign: 'center',
-    includeFontPadding: false
-  },
-  label: {
-    flexShrink: 1
-  }
-});
-var _default = exports.default = Checkbox;
-//# sourceMappingURL=Checkbox.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Checkbox=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSvg=_interopRequireWildcard(require("react-native-svg")),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_ChoiceText=require("../FieldBase/ChoiceText.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var s,o,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(s=r?i:t){if(s.has(e))return s.get(e);s.set(e,a)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((o=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(o.get||o.set)?s(a,r,o):a[r]=e[r]);return a})(e,r)}const sizeMap={sm:16,md:20,lg:24},toneColor=(e,r)=>{switch(r){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},toneOnColor=(e,r)=>{switch(r){case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onPrimary}},Checkbox=exports.Checkbox=(0,_react.forwardRef)((e,r)=>{const{checked:t,defaultChecked:i,onChange:s,indeterminate:o=!1,disabled:a=!1,label:n,description:l,error:c,help:d,labelLines:u,size:p="md",tone:h="primary",accessibilityLabel:x,haptic:_,style:b,boxStyle:f,indeterminateBarStyle:m,containerStyle:y,labelStyle:g,testID:j,...v}=e,[w,C]=(0,_index.useControllableState)({value:t,defaultValue:i??!1,onChange:s}),k=(0,_index2.useTheme)(),S=(0,_react.useMemo)(()=>buildStyles(k),[k]),R=k.components.checkbox?.[p]?.boxSize??sizeMap[p],T=k.colors.border.width,N=k.components.checkbox?.labelGap??10,q=toneColor(k,h),M=w||o,F=(0,_react.useRef)((0,_index2.createAnimatedValue)(M?1:0)).current;(0,_react.useEffect)(()=>{const e=_reactNative.Animated.spring(F,{toValue:M?1:0,damping:k.motion.spring.snappy.damping,stiffness:k.motion.spring.snappy.stiffness,mass:k.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[M,F,k.motion.spring.snappy]);const B=F.interpolate({inputRange:[0,1],outputRange:[0,1]}),W=x??(0,_FieldBase.fieldTextAsString)(n),L=a?k.colors.border.primary:M?q:(0,_FieldBase.hasFieldText)(c)?k.colors.field.borderError:k.colors.border.primary,P=a?k.colors.surface.disabled:M?q:"transparent",D=a?k.colors.text.disabled:toneOnColor(k,h),O=Math.round(.72*R),V=Math.round(.55*R),I=Math.max(2,Math.round(.12*R)),A=(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:r,onPress:e=>{if(a)return;const r=(0,_hapticUtils.resolveHaptic)(_,"selection");r&&(0,_hapticUtils.triggerHaptic)(r),C(!w),v.onPressOut?.(e)},disabled:a,accessibilityRole:"checkbox",accessibilityLabel:W,accessibilityHint:v.accessibilityHint??(0,_FieldBase.fieldTextAsString)(l),accessibilityState:{checked:o?"mixed":w,disabled:a},testID:j,hitSlop:6,...v,style:({pressed:e})=>[S.row,(0,_ChoiceText.hasChoiceDetail)(l,c)?S.rowTop:null,(0,_FieldBase.hasFieldText)(d)?S.rowShrink:null,{opacity:a?.55:e?.85:1},y,b],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[S.box,{width:R,height:R,borderWidth:T,borderRadius:k.radius.xs,..._corners.smoothCorners,borderColor:L,backgroundColor:P},f],children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[S.glyphWrap,{opacity:F,transform:[{scale:B}]}],children:o?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{width:V,height:I,borderRadius:I/2,..._corners.smoothCorners,backgroundColor:D},m]}):(0,_jsxRuntime.jsx)(_reactNativeSvg.default,{width:O,height:O,viewBox:"0 0 24 24",children:(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:D,strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})})})}),(0,_jsxRuntime.jsx)(_ChoiceText.ChoiceText,{label:n,description:l,error:c,disabled:a,labelLines:u||void 0,descriptionLines:u||void 0,style:{marginLeft:N},labelStyle:g})]});return(0,_FieldBase.hasFieldText)(d)?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[S.helpRow,(0,_ChoiceText.hasChoiceDetail)(l,c)?S.rowTop:null],children:[A,(0,_jsxRuntime.jsx)(_reactNative.View,{style:[S.help,{marginLeft:k.spacing.xs}],children:d})]}):A});Checkbox.displayName="Checkbox";const buildStyles=e=>_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},rowTop:{alignItems:"flex-start"},rowShrink:{flexShrink:1},helpRow:{flexDirection:"row",alignItems:"center"},help:{flexShrink:0},box:{alignItems:"center",justifyContent:"center"},glyphWrap:{alignItems:"center",justifyContent:"center"}});var _default=exports.default=Checkbox;

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function () {
-    return _Checkbox.Checkbox;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Checkbox.default;
-  }
-});
-var _Checkbox = _interopRequireWildcard(require("./Checkbox.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,"Checkbox",{enumerable:!0,get:function(){return _Checkbox.Checkbox}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Checkbox.default}});var _Checkbox=_interopRequireWildcard(require("./Checkbox.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&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=r?n:t){if(o.has(e))return o.get(e);o.set(e,i)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((u=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(u.get||u.set)?o(i,r,u):i[r]=e[r]);return i})(e,r)}

package/lib/commonjs/components/Chip/Chip.js

@@ -1,358 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Chip = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _usePressAnimation = require("../../hooks/usePressAnimation.js");
-var _index = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _hapticUtils = require("../../utils/hapticUtils.js");
-var _slotIcon = require("../AppIcon/slotIcon.js");
-var _index2 = require("../Skeleton/index.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); }
-const toneFor = (theme, tone) => {
-  switch (tone) {
-    case 'primary':
-      return {
-        base: theme.colors.primaryMuted,
-        on: theme.colors.primary,
-        border: theme.colors.primary,
-        selectedBg: theme.colors.primaryMuted,
-        selectedOn: theme.colors.primary,
-        selectedBorder: theme.colors.primary
-      };
-    case 'success':
-      return {
-        base: theme.colors.background.tertiary,
-        on: theme.colors.success,
-        border: theme.colors.success,
-        selectedBg: theme.colors.primaryMuted,
-        selectedOn: theme.colors.primary,
-        selectedBorder: theme.colors.primary
-      };
-    case 'warning':
-      return {
-        base: theme.colors.background.tertiary,
-        on: theme.colors.warning,
-        border: theme.colors.warning,
-        selectedBg: theme.colors.primaryMuted,
-        selectedOn: theme.colors.primary,
-        selectedBorder: theme.colors.primary
-      };
-    case 'error':
-      return {
-        base: theme.colors.background.tertiary,
-        on: theme.colors.error,
-        border: theme.colors.error,
-        selectedBg: theme.colors.primaryMuted,
-        selectedOn: theme.colors.primary,
-        selectedBorder: theme.colors.primary
-      };
-    case 'info':
-      return {
-        base: theme.colors.background.tertiary,
-        on: theme.colors.info,
-        border: theme.colors.info,
-        selectedBg: theme.colors.primaryMuted,
-        selectedOn: theme.colors.primary,
-        selectedBorder: theme.colors.primary
-      };
-    case 'neutral':
-    default:
-      return {
-        base: theme.colors.background.tertiary,
-        on: theme.colors.text.primary,
-        border: theme.colors.border.primary,
-        selectedBg: theme.colors.primaryMuted,
-        selectedOn: theme.colors.primary,
-        selectedBorder: theme.colors.primary
-      };
-  }
-};
-const sizeMap = {
-  sm: {
-    paddingH: 10,
-    paddingV: 4,
-    fontSize: 12,
-    minHeight: 26,
-    closeSize: 16,
-    closeFont: 12,
-    gap: 6,
-    iconSize: 14
-  },
-  md: {
-    paddingH: 12,
-    paddingV: 6,
-    fontSize: 13,
-    minHeight: 32,
-    closeSize: 18,
-    closeFont: 13,
-    gap: 8,
-    iconSize: 16
-  }
-};
-const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    label,
-    selected = false,
-    onPress,
-    onClose,
-    leftIcon,
-    variant = 'filled',
-    tone = 'neutral',
-    size = 'md',
-    disabled = false,
-    loading = false,
-    accessibilityLabel,
-    haptic,
-    style,
-    textStyle,
-    containerStyle,
-    closeButtonStyle,
-    closeIconStyle,
-    testID
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const isPressable = !!onPress && !disabled;
-  const {
-    scale,
-    pressIn,
-    pressOut
-  } = (0, _usePressAnimation.usePressAnimation)({
-    enabled: isPressable
-  });
-  const tones = (0, _react.useMemo)(() => toneFor(theme, tone), [theme, tone]);
-  const overrides = theme.components.chip?.[size];
-  const sz = {
-    paddingH: overrides?.paddingHorizontal ?? sizeMap[size].paddingH,
-    paddingV: overrides?.paddingVertical ?? sizeMap[size].paddingV,
-    fontSize: overrides?.fontSize ?? sizeMap[size].fontSize,
-    minHeight: overrides?.minHeight ?? sizeMap[size].minHeight,
-    closeSize: overrides?.closeSize ?? sizeMap[size].closeSize,
-    closeFont: overrides?.closeFontSize ?? sizeMap[size].closeFont,
-    gap: overrides?.gap ?? sizeMap[size].gap,
-    iconSize: overrides?.iconSize ?? sizeMap[size].iconSize
-  };
-  const isFilled = variant === 'filled';
-  const backgroundColor = (() => {
-    if (selected) {
-      return isFilled ? tones.selectedBg : 'transparent';
-    }
-    if (isFilled) {
-      return tones.base;
-    }
-    return 'transparent';
-  })();
-  const borderColor = (() => {
-    if (selected) {
-      return tones.selectedBorder;
-    }
-    if (!isFilled) {
-      return tones.border;
-    }
-    return 'transparent';
-  })();
-  const textColor = (() => {
-    if (disabled) {
-      return theme.colors.text.disabled;
-    }
-    if (selected) {
-      return tones.selectedOn;
-    }
-    return tones.on;
-  })();
-  const borderWidth = isFilled ? 0 : theme.colors.border.width;
-  const handlePress = () => {
-    if (!isPressable) {
-      return;
-    }
-    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _hapticUtils.triggerHaptic)(h);
-    }
-    onPress?.();
-  };
-  const handleClose = () => {
-    if (disabled) {
-      return;
-    }
-    if (haptic !== false) {
-      (0, _hapticUtils.triggerHaptic)('impactLight');
-    }
-    onClose?.();
-  };
-  const a11yLabel = accessibilityLabel ?? label;
-  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.row,
-    children: [leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        marginRight: sz.gap
-      },
-      children: (0, _slotIcon.renderSlotIcon)(leftIcon, {
-        color: textColor,
-        size: sz.iconSize,
-        disabled
-      })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.label, {
-        color: textColor,
-        fontSize: sz.fontSize,
-        ...(0, _index.fontFor)(theme, 'medium')
-      }, textStyle],
-      numberOfLines: 1,
-      children: label ?? ' '
-    }), onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      onPress: handleClose,
-      disabled: disabled,
-      accessibilityRole: "button",
-      accessibilityLabel: `Remove ${label}`,
-      accessibilityState: {
-        disabled
-      },
-      hitSlop: 6,
-      style: ({
-        pressed
-      }) => [styles.close, {
-        width: sz.closeSize,
-        height: sz.closeSize,
-        borderRadius: sz.closeSize / 2,
-        ..._corners.smoothCorners,
-        marginLeft: sz.gap,
-        backgroundColor: pressed ? theme.colors.surface.pressed : theme.colors.surface.hovered
-      }, closeButtonStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [{
-          color: textColor,
-          fontSize: sz.closeFont,
-          ...(0, _index.fontFor)(theme, 'bold'),
-          lineHeight: sz.closeFont + 2
-        }, closeIconStyle],
-        allowFontScaling: false,
-        children: '×'
-      })
-    }) : null]
-  });
-  const baseStyle = {
-    paddingHorizontal: sz.paddingH,
-    paddingVertical: sz.paddingV,
-    minHeight: sz.minHeight,
-    borderRadius: theme.radius.full,
-    ..._corners.smoothCorners,
-    backgroundColor,
-    borderWidth,
-    borderColor,
-    opacity: disabled ? 0.55 : 1
-  };
-  let rendered;
-  if (isPressable) {
-    rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: {
-        transform: [{
-          scale
-        }],
-        alignSelf: 'flex-start'
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        ref: ref,
-        onPress: handlePress,
-        onPressIn: pressIn,
-        onPressOut: pressOut,
-        disabled: !isPressable,
-        accessibilityRole: "button",
-        accessibilityLabel: a11yLabel,
-        accessibilityState: {
-          selected,
-          disabled
-        },
-        android_ripple: {
-          color: theme.colors.surface.pressed,
-          borderless: false
-        },
-        testID: testID,
-        style: ({
-          pressed
-        }) => [styles.base, baseStyle, pressed && !isFilled ? {
-          backgroundColor: theme.colors.surface.pressed
-        } : null, containerStyle, style],
-        children: content
-      })
-    });
-  } else {
-    rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      ref: ref,
-      style: [styles.base, baseStyle, containerStyle, style],
-      accessible: true,
-      accessibilityRole: "text",
-      accessibilityLabel: a11yLabel,
-      accessibilityState: {
-        selected,
-        disabled
-      },
-      testID: testID,
-      children: content
-    });
-  }
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipSkeleton, {
-      ...props
-    });
-  }
-  return rendered;
-});
-Chip.displayName = 'Chip';
-
-/**
- * Placeholder shape for `<Chip>`. Pill of the configured size with a label
- * skeleton inside; leading icon and close button are reserved when the
- * consumer would normally provide them, so the chip width matches what it
- * would be when loaded.
- */
-const ChipSkeleton = ({
-  label,
-  size = 'md',
-  leftIcon,
-  onClose,
-  style,
-  containerStyle
-}) => {
-  const sz = sizeMap[size];
-  const labelWidth = Math.max(40, Math.min(120, (label ?? '').length * 7));
-  const pillHeight = sz.minHeight;
-  const pillRadius = pillHeight / 2;
-  const totalWidth = labelWidth + sz.paddingH * 2 + (leftIcon !== undefined ? sz.gap + 14 : 0) + (onClose !== undefined ? sz.gap + sz.closeSize : 0);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-    width: totalWidth,
-    height: pillHeight,
-    radius: pillRadius,
-    style: [{
-      alignSelf: 'flex-start'
-    }, containerStyle, style]
-  });
-};
-ChipSkeleton.displayName = 'ChipSkeleton';
-Chip.Skeleton = ChipSkeleton;
-const styles = _reactNative.StyleSheet.create({
-  base: {
-    alignSelf: 'flex-start',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  label: {
-    textAlign: 'center'
-  },
-  close: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-var _default = exports.default = Chip;
-//# sourceMappingURL=Chip.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Chip=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index2=require("../Skeleton/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,s=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var i,o,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(i=r?s:t){if(i.has(e))return i.get(e);i.set(e,l)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(o.get||o.set)?i(l,r,o):l[r]=e[r]);return l})(e,r)}const toneFor=(e,r)=>{switch(r){case"primary":return{base:e.colors.primaryMuted,on:e.colors.primary,border:e.colors.primary,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedBorder:e.colors.primary};case"success":return{base:e.colors.background.tertiary,on:e.colors.success,border:e.colors.success,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedBorder:e.colors.primary};case"warning":return{base:e.colors.background.tertiary,on:e.colors.warning,border:e.colors.warning,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedBorder:e.colors.primary};case"error":return{base:e.colors.background.tertiary,on:e.colors.error,border:e.colors.error,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedBorder:e.colors.primary};case"info":return{base:e.colors.background.tertiary,on:e.colors.info,border:e.colors.info,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedBorder:e.colors.primary};default:return{base:e.colors.background.tertiary,on:e.colors.text.primary,border:e.colors.border.primary,selectedBg:e.colors.primaryMuted,selectedOn:e.colors.primary,selectedBorder:e.colors.primary}}},SOFT_FILL_OPACITY=.14,SOFT_SELECTED_FILL_OPACITY=.24,sizeMap={sm:{paddingH:10,paddingV:4,fontSize:12,minHeight:26,closeSize:16,closeFont:12,gap:6,iconSize:14},md:{paddingH:12,paddingV:6,fontSize:13,minHeight:32,closeSize:18,closeFont:13,gap:8,iconSize:16}},Chip=exports.Chip=(0,_react.forwardRef)((e,r)=>{const{label:t,selected:s=!1,selectionMode:i="single",onPress:o,onClose:l,leftIcon:n,iconVariant:a,variant:c="filled",tone:d="neutral",size:p="md",disabled:u=!1,loading:g=!1,accessibilityLabel:m,haptic:y,style:b,textStyle:f,containerStyle:h,closeButtonStyle:_,closeIconStyle:S,testID:x}=e,z=(0,_index.useTheme)(),j=!!o&&!u,{scale:M,pressIn:C,pressOut:v}=(0,_usePressAnimation.usePressAnimation)({enabled:j}),k=(0,_react.useMemo)(()=>toneFor(z,d),[z,d]),R=z.components.chip?.[p],w={paddingH:R?.paddingHorizontal??sizeMap[p].paddingH,paddingV:R?.paddingVertical??sizeMap[p].paddingV,fontSize:R?.fontSize??sizeMap[p].fontSize,minHeight:R?.minHeight??sizeMap[p].minHeight,closeSize:R?.closeSize??sizeMap[p].closeSize,closeFont:R?.closeFontSize??sizeMap[p].closeFont,gap:R?.gap??sizeMap[p].gap,iconSize:R?.iconSize??sizeMap[p].iconSize},O="filled"===c,H="soft"===c,I=(()=>{if(H){const e=s?k.selectedOn:k.on,r=s?.24:.14;return(0,_color.tintOf)(e,r,s?k.selectedBg:k.base)}return s?O?k.selectedBg:"transparent":O?k.base:"transparent"})(),P=H?"transparent":s?k.selectedBorder:O?"transparent":k.border,B=u?z.colors.text.disabled:s?k.selectedOn:k.on,F=O||H?0:z.colors.border.width,handlePress=()=>{if(!j)return;const e=(0,_hapticUtils.resolveHaptic)(y,"selection");e&&(0,_hapticUtils.triggerHaptic)(e),o?.()},q=m??t,L=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.row,children:[n?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginRight:w.gap},children:(0,_slotIcon.renderSlotIcon)(n,{color:B,size:w.iconSize,disabled:u},a)}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.label,{color:B,fontSize:w.fontSize,...(0,_index.fontFor)(z,"medium")},f],numberOfLines:1,children:t??" "}),l?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>{u||(!1!==y&&(0,_hapticUtils.triggerHaptic)("impactLight"),l?.())},disabled:u,accessibilityRole:"button",accessibilityLabel:`Remove ${t}`,accessibilityState:{disabled:u},hitSlop:6,style:({pressed:e})=>[styles.close,{width:w.closeSize,height:w.closeSize,borderRadius:w.closeSize/2,..._corners.smoothCorners,marginLeft:w.gap,backgroundColor:e?z.colors.surface.pressed:z.colors.surface.hovered},_],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:B,fontSize:w.closeFont,...(0,_index.fontFor)(z,"bold"),lineHeight:w.closeFont+2},S],allowFontScaling:!1,children:"×"})}):null]}),N={paddingHorizontal:w.paddingH,paddingVertical:w.paddingV,minHeight:w.minHeight,borderRadius:z.radius.full,..._corners.smoothCorners,backgroundColor:I,borderWidth:F,borderColor:P,opacity:u?.55:1};let V;return V=j?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{transform:[{scale:M}],alignSelf:"flex-start"},children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:r,onPress:handlePress,onPressIn:C,onPressOut:v,disabled:!j,accessibilityRole:"multiple"===i?"checkbox":"button",accessibilityLabel:q,accessibilityState:"multiple"===i?{checked:s,disabled:u}:{selected:s,disabled:u},android_ripple:{color:z.colors.surface.pressed,borderless:!1},testID:x,style:({pressed:e})=>[styles.base,N,e&&"outlined"===c?{backgroundColor:z.colors.surface.pressed}:null,h,b],children:L})}):(0,_jsxRuntime.jsx)(_reactNative.View,{ref:r,style:[styles.base,N,h,b],accessible:!0,accessibilityRole:"text",accessibilityLabel:q,accessibilityState:{selected:s,disabled:u},testID:x,children:L}),g?(0,_jsxRuntime.jsx)(ChipSkeleton,{...e}):V});Chip.displayName="Chip";const ChipSkeleton=({label:e,size:r="md",leftIcon:t,onClose:s,style:i,containerStyle:o})=>{const l=sizeMap[r],n=Math.max(40,Math.min(120,7*(e??"").length)),a=l.minHeight,c=a/2,d=n+2*l.paddingH+(void 0!==t?l.gap+14:0)+(void 0!==s?l.gap+l.closeSize:0);return(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:d,height:a,radius:c,style:[{alignSelf:"flex-start"},o,i]})};ChipSkeleton.displayName="ChipSkeleton",Chip.Skeleton=ChipSkeleton;const styles=_reactNative.StyleSheet.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},row:{flexDirection:"row",alignItems:"center"},label:{textAlign:"center"},close:{alignItems:"center",justifyContent:"center"}});var _default=exports.default=Chip;

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

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