@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/Checkbox/Checkbox.js

@@ -1,184 +1 @@
-"use strict";
-
-import { forwardRef, useEffect, useMemo, useRef } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useControllableState } from "../../hooks/index.js";
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
-import { jsx as _jsx, jsxs as _jsxs } from "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 = /*#__PURE__*/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] = useControllableState({
-    value: checked,
-    defaultValue: defaultChecked ?? false,
-    onChange
-  });
-  const theme = useTheme();
-  const styles = 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 = useRef(createAnimatedValue(isActive ? 1 : 0)).current;
-  useEffect(() => {
-    const anim = 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 = resolveHaptic(haptic, 'selection');
-    if (h) {
-      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__*/_jsxs(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__*/_jsx(View, {
-      style: [styles.box, {
-        width: boxSize,
-        height: boxSize,
-        borderWidth: checkboxBorderWidth,
-        borderRadius: theme.radius.xs,
-        ...smoothCorners,
-        borderColor,
-        backgroundColor
-      }, boxStyle],
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.glyphWrap, {
-          opacity: progress,
-          transform: [{
-            scale
-          }]
-        }],
-        children: indeterminate ? /*#__PURE__*/_jsx(View, {
-          style: [{
-            width: indeterminateBarWidth,
-            height: indeterminateBarHeight,
-            borderRadius: indeterminateBarHeight / 2,
-            ...smoothCorners,
-            backgroundColor: glyphColor
-          }, indeterminateBarStyle]
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: [styles.check, {
-            color: glyphColor,
-            fontSize: glyphFontSize,
-            lineHeight: glyphFontSize + 2
-          }, checkIconStyle],
-          allowFontScaling: false,
-          children: '✓'
-        })
-      })
-    }), label ? /*#__PURE__*/_jsx(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 => 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
-  }
-});
-export { Checkbox };
-export default Checkbox;
-//# sourceMappingURL=Checkbox.js.map
+"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{fieldTextAsString,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";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=forwardRef((e,r)=>{const{checked:t,defaultChecked:s,onChange:o,indeterminate:i=!1,disabled:n=!1,label:a,description:l,error:c,help:d,labelLines:h,size:p="md",tone:m="primary",accessibilityLabel:u,haptic:x,style:b,boxStyle:f,indeterminateBarStyle:g,containerStyle:y,labelStyle:w,testID:C,...S}=e,[j,k]=useControllableState({value:t,defaultValue:s??!1,onChange:o}),T=useTheme(),v=useMemo(()=>buildStyles(T),[T]),R=T.components.checkbox?.[p]?.boxSize??sizeMap[p],_=T.colors.border.width,L=T.components.checkbox?.labelGap??10,V=toneColor(T,m),M=j||i,A=useRef(createAnimatedValue(M?1:0)).current;useEffect(()=>{const e=Animated.spring(A,{toValue:M?1:0,damping:T.motion.spring.snappy.damping,stiffness:T.motion.spring.snappy.stiffness,mass:T.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[M,A,T.motion.spring.snappy]);const D=A.interpolate({inputRange:[0,1],outputRange:[0,1]}),F=u??fieldTextAsString(a),I=n?T.colors.border.primary:M?V:hasFieldText(c)?T.colors.field.borderError:T.colors.border.primary,P=n?T.colors.surface.disabled:M?V:"transparent",H=n?T.colors.text.disabled:toneOnColor(T,m),B=Math.round(.72*R),W=Math.round(.55*R),z=Math.max(2,Math.round(.12*R)),E=_jsxs(Pressable,{ref:r,onPress:e=>{if(n)return;const r=resolveHaptic(x,"selection");r&&triggerHaptic(r),k(!j),S.onPressOut?.(e)},disabled:n,accessibilityRole:"checkbox",accessibilityLabel:F,accessibilityHint:S.accessibilityHint??fieldTextAsString(l),accessibilityState:{checked:i?"mixed":j,disabled:n},testID:C,hitSlop:6,...S,style:({pressed:e})=>[v.row,hasChoiceDetail(l,c)?v.rowTop:null,hasFieldText(d)?v.rowShrink:null,{opacity:n?.55:e?.85:1},y,b],children:[_jsx(View,{style:[v.box,{width:R,height:R,borderWidth:_,borderRadius:T.radius.xs,...smoothCorners,borderColor:I,backgroundColor:P},f],children:_jsx(Animated.View,{style:[v.glyphWrap,{opacity:A,transform:[{scale:D}]}],children:i?_jsx(View,{style:[{width:W,height:z,borderRadius:z/2,...smoothCorners,backgroundColor:H},g]}):_jsx(Svg,{width:B,height:B,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:H,strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})})})}),_jsx(ChoiceText,{label:a,description:l,error:c,disabled:n,labelLines:h||void 0,descriptionLines:h||void 0,style:{marginLeft:L},labelStyle:w})]});return hasFieldText(d)?_jsxs(View,{style:[v.helpRow,hasChoiceDetail(l,c)?v.rowTop:null],children:[E,_jsx(View,{style:[v.help,{marginLeft:T.spacing.xs}],children:d})]}):E});Checkbox.displayName="Checkbox";const buildStyles=e=>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"}});export{Checkbox};export default Checkbox;

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

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

package/lib/module/components/Chip/Chip.js

@@ -1,354 +1 @@
-"use strict";
-
-import React, { forwardRef, useMemo } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { fontFor, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
-import { renderSlotIcon } from "../AppIcon/slotIcon.js";
-import { Skeleton } from "../Skeleton/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 = /*#__PURE__*/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 = useTheme();
-  const isPressable = !!onPress && !disabled;
-  const {
-    scale,
-    pressIn,
-    pressOut
-  } = usePressAnimation({
-    enabled: isPressable
-  });
-  const tones = 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 = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    onPress?.();
-  };
-  const handleClose = () => {
-    if (disabled) {
-      return;
-    }
-    if (haptic !== false) {
-      triggerHaptic('impactLight');
-    }
-    onClose?.();
-  };
-  const a11yLabel = accessibilityLabel ?? label;
-  const content = /*#__PURE__*/_jsxs(View, {
-    style: styles.row,
-    children: [leftIcon ? /*#__PURE__*/_jsx(View, {
-      style: {
-        marginRight: sz.gap
-      },
-      children: renderSlotIcon(leftIcon, {
-        color: textColor,
-        size: sz.iconSize,
-        disabled
-      })
-    }) : null, /*#__PURE__*/_jsx(Text, {
-      style: [styles.label, {
-        color: textColor,
-        fontSize: sz.fontSize,
-        ...fontFor(theme, 'medium')
-      }, textStyle],
-      numberOfLines: 1,
-      children: label ?? ' '
-    }), onClose ? /*#__PURE__*/_jsx(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,
-        ...smoothCorners,
-        marginLeft: sz.gap,
-        backgroundColor: pressed ? theme.colors.surface.pressed : theme.colors.surface.hovered
-      }, closeButtonStyle],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [{
-          color: textColor,
-          fontSize: sz.closeFont,
-          ...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,
-    ...smoothCorners,
-    backgroundColor,
-    borderWidth,
-    borderColor,
-    opacity: disabled ? 0.55 : 1
-  };
-  let rendered;
-  if (isPressable) {
-    rendered = /*#__PURE__*/_jsx(Animated.View, {
-      style: {
-        transform: [{
-          scale
-        }],
-        alignSelf: 'flex-start'
-      },
-      children: /*#__PURE__*/_jsx(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__*/_jsx(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__*/_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__*/_jsx(Skeleton, {
-    width: totalWidth,
-    height: pillHeight,
-    radius: pillRadius,
-    style: [{
-      alignSelf: 'flex-start'
-    }, containerStyle, style]
-  });
-};
-ChipSkeleton.displayName = 'ChipSkeleton';
-Chip.Skeleton = ChipSkeleton;
-const styles = 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'
-  }
-});
-export { Chip };
-export default Chip;
-//# sourceMappingURL=Chip.js.map
+"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";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=forwardRef((e,r)=>{const{label:o,selected:s=!1,selectionMode:t="single",onPress:i,onClose:l,leftIcon:n,iconVariant:c,variant:a="filled",tone:d="neutral",size:p="md",disabled:m=!1,loading:g=!1,accessibilityLabel:b,haptic:u,style:y,textStyle:f,containerStyle:h,closeButtonStyle:S,closeIconStyle:z,testID:x}=e,C=useTheme(),j=!!i&&!m,{scale:H,pressIn:M,pressOut:k}=usePressAnimation({enabled:j}),w=useMemo(()=>toneFor(C,d),[C,d]),I=C.components.chip?.[p],_={paddingH:I?.paddingHorizontal??sizeMap[p].paddingH,paddingV:I?.paddingVertical??sizeMap[p].paddingV,fontSize:I?.fontSize??sizeMap[p].fontSize,minHeight:I?.minHeight??sizeMap[p].minHeight,closeSize:I?.closeSize??sizeMap[p].closeSize,closeFont:I?.closeFontSize??sizeMap[p].closeFont,gap:I?.gap??sizeMap[p].gap,iconSize:I?.iconSize??sizeMap[p].iconSize},F="filled"===a,O="soft"===a,B=(()=>{if(O){const e=s?w.selectedOn:w.on;return tintOf(e,s?.24:.14,s?w.selectedBg:w.base)}return s?F?w.selectedBg:"transparent":F?w.base:"transparent"})(),P=O?"transparent":s?w.selectedBorder:F?"transparent":w.border,V=m?C.colors.text.disabled:s?w.selectedOn:w.on,L=F||O?0:C.colors.border.width,handlePress=()=>{if(!j)return;const e=resolveHaptic(u,"selection");e&&triggerHaptic(e),i?.()},R=b??o,T=_jsxs(View,{style:styles.row,children:[n?_jsx(View,{style:{marginRight:_.gap},children:renderSlotIcon(n,{color:V,size:_.iconSize,disabled:m},c)}):null,_jsx(Text,{style:[styles.label,{color:V,fontSize:_.fontSize,...fontFor(C,"medium")},f],numberOfLines:1,children:o??" "}),l?_jsx(Pressable,{onPress:()=>{m||(!1!==u&&triggerHaptic("impactLight"),l?.())},disabled:m,accessibilityRole:"button",accessibilityLabel:`Remove ${o}`,accessibilityState:{disabled:m},hitSlop:6,style:({pressed:e})=>[styles.close,{width:_.closeSize,height:_.closeSize,borderRadius:_.closeSize/2,...smoothCorners,marginLeft:_.gap,backgroundColor:e?C.colors.surface.pressed:C.colors.surface.hovered},S],children:_jsx(Text,{style:[{color:V,fontSize:_.closeFont,...fontFor(C,"bold"),lineHeight:_.closeFont+2},z],allowFontScaling:!1,children:"×"})}):null]}),A={paddingHorizontal:_.paddingH,paddingVertical:_.paddingV,minHeight:_.minHeight,borderRadius:C.radius.full,...smoothCorners,backgroundColor:B,borderWidth:L,borderColor:P,opacity:m?.55:1};let v;return v=j?_jsx(Animated.View,{style:{transform:[{scale:H}],alignSelf:"flex-start"},children:_jsx(Pressable,{ref:r,onPress:handlePress,onPressIn:M,onPressOut:k,disabled:!j,accessibilityRole:"multiple"===t?"checkbox":"button",accessibilityLabel:R,accessibilityState:"multiple"===t?{checked:s,disabled:m}:{selected:s,disabled:m},android_ripple:{color:C.colors.surface.pressed,borderless:!1},testID:x,style:({pressed:e})=>[styles.base,A,e&&"outlined"===a?{backgroundColor:C.colors.surface.pressed}:null,h,y],children:T})}):_jsx(View,{ref:r,style:[styles.base,A,h,y],accessible:!0,accessibilityRole:"text",accessibilityLabel:R,accessibilityState:{selected:s,disabled:m},testID:x,children:T}),g?_jsx(ChipSkeleton,{...e}):v});Chip.displayName="Chip";const ChipSkeleton=({label:e,size:r="md",leftIcon:o,onClose:s,style:t,containerStyle:i})=>{const l=sizeMap[r],n=Math.max(40,Math.min(120,7*(e??"").length)),c=l.minHeight,a=c/2,d=n+2*l.paddingH+(void 0!==o?l.gap+14:0)+(void 0!==s?l.gap+l.closeSize:0);return _jsx(Skeleton,{width:d,height:c,radius:a,style:[{alignSelf:"flex-start"},i,t]})};ChipSkeleton.displayName="ChipSkeleton",Chip.Skeleton=ChipSkeleton;const styles=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"}});export{Chip};export default Chip;

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

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