@webority/mobile-ui 0.0.38 → 0.1.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
+import{forwardRef as e,useEffect as r,useMemo as o,useRef as t}from"react";import{Animated as s,Pressable as i,StyleSheet as n,View as l}from"react-native";import a,{Path as c}from"react-native-svg";import{useControllableState as d}from"../../hooks/index.js";import{createAnimatedValue as p,useTheme as m}from"../../theme/index.js";import{smoothCorners as h}from"../../utils/corners.js";import{resolveHaptic as u,triggerHaptic as b}from"../../utils/hapticUtils.js";import{ChoiceText as y,hasChoiceDetail as f}from"../FieldBase/ChoiceText.js";import{fieldTextAsString as g,hasFieldText as x}from"../FieldBase/FieldBase.js";import{jsx as w,jsxs as k}from"react/jsx-runtime";const S={sm:16,md:20,lg:24},j=e((e,n)=>{const{checked:j,defaultChecked:C,onChange:L,indeterminate:v=!1,disabled:I=!1,label:R,description:B,error:D,help:M,labelLines:W,size:T="md",tone:F="primary",accessibilityLabel:P,haptic:V,style:z,boxStyle:E,indeterminateBarStyle:H,containerStyle:N,labelStyle:G,testID:O,...U}=e,[q,A]=d({value:j,defaultValue:C??!1,onChange:L}),J=m(),K=o(()=>buildStyles(J),[J]),Q=J.components.checkbox?.[T]?.boxSize??S[T],X=J.colors.border.width,Y=J.components.checkbox?.labelGap??10,Z=((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}})(J,F),$=q||v,_=t(p($?1:0)).current;r(()=>{const e=s.spring(_,{toValue:$?1:0,damping:J.motion.spring.snappy.damping,stiffness:J.motion.spring.snappy.stiffness,mass:J.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[$,_,J.motion.spring.snappy]);const ee=_.interpolate({inputRange:[0,1],outputRange:[0,1]}),re=P??g(R),oe=I?J.colors.border.primary:$?Z:x(D)?J.colors.field.borderError:J.colors.border.primary,te=I?J.colors.surface.disabled:$?Z:"transparent",se=I?J.colors.text.disabled:((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}})(J,F),ie=Math.round(.72*Q),ne=Math.round(.55*Q),le=Math.max(2,Math.round(.12*Q)),ae=k(i,{ref:n,onPress:e=>{if(I)return;const r=u(V,"selection");r&&b(r),A(!q),U.onPressOut?.(e)},disabled:I,accessibilityRole:"checkbox",accessibilityLabel:re,accessibilityHint:U.accessibilityHint??g(B),accessibilityState:{checked:v?"mixed":q,disabled:I},testID:O,hitSlop:6,...U,style:({pressed:e})=>[K.row,f(B,D)?K.rowTop:null,x(M)?K.rowShrink:null,{opacity:I?.55:e?.85:1},N,z],children:[w(l,{style:[K.box,{width:Q,height:Q,borderWidth:X,borderRadius:J.radius.xs,...h,borderColor:oe,backgroundColor:te},E],children:w(s.View,{style:[K.glyphWrap,{opacity:_,transform:[{scale:ee}]}],children:v?w(l,{style:[{width:ne,height:le,borderRadius:le/2,...h,backgroundColor:se},H]}):w(a,{width:ie,height:ie,viewBox:"0 0 24 24",children:w(c,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:se,strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})})})}),w(y,{label:R,description:B,error:D,disabled:I,labelLines:W||void 0,descriptionLines:W||void 0,style:{marginLeft:Y},labelStyle:G})]});return x(M)?k(l,{style:[K.helpRow,f(B,D)?K.rowTop:null],children:[ae,w(l,{style:[K.help,{marginLeft:J.spacing.xs}],children:M})]}):ae});j.displayName="Checkbox";const buildStyles=e=>n.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{j as Checkbox};export default j;

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

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

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

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