react-native-system-ui 1.0.2 → 1.0.4

package/dist/es/components/search/tokens.js

@@ -1,48 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createSearchTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    radii,
-    fontSize
-  } = foundations;
-  return {
-    defaults: {
-      shape: 'square',
-      clearTrigger: 'focus'
-    },
-    colors: {
-      background: '#ffffff',
-      contentBackground: '#ffffff',
-      label: palette.default[600],
-      action: palette.primary[500],
-      icon: palette.default[400]
-    },
-    spacing: {
-      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.sm,
-      labelGap: spacing.sm,
-      actionGap: spacing.sm,
-      contentPaddingHorizontal: spacing.sm,
-      contentPaddingVertical: spacing.xs,
-      none: spacing.none
-    },
-    radius: {
-      square: radii.md,
-      round: radii.pill
-    },
-    typography: {
-      label: fontSize.sm,
-      labelWeight: '500',
-      action: fontSize.sm,
-      actionWeight: '500'
-    },
-    opacity: {
-      actionPressed: 0.6
-    },
-    icon: {
-      size: fontSize.md
-    }
-  };
-};
-export const useSearchTokens = createComponentTokensHook('search', createSearchTokens);
+import{createComponentTokensHook}from"../../design-system";const createSearchTokens=e=>{const{palette:a,spacing:o,radii:n,fontSize:t}=e,r=e.surface??"#ffffff";return{defaults:{shape:"square",clearTrigger:"focus"},colors:{background:r,contentBackground:r,label:a.default[600],action:a.primary[500],icon:a.default[400]},spacing:{paddingHorizontal:o.md,paddingVertical:o.sm,labelGap:o.sm,actionGap:o.sm,contentPaddingHorizontal:o.sm,contentPaddingVertical:o.xs,none:o.none},radius:{square:n.md,round:n.pill},typography:{label:t.sm,labelWeight:"500",action:t.sm,actionWeight:"500"},opacity:{actionPressed:.6},icon:{size:t.md}}};export const useSearchTokens=createComponentTokensHook("search",createSearchTokens);

package/dist/es/components/selector/Selector.js

@@ -1,166 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useMemo } from 'react';
-import { Pressable, Text, View } from 'react-native';
-import { useSelectorTokens } from './tokens';
-import { useAriaPress, useControllableValue } from '../../hooks';
-import { isText } from '../../utils';
-const CHECK_MARK = '✓';
-const CHECK_MARK_CORNER_HEIGHT = 8;
-const CHECK_MARK_CORNER_WIDTH = 10;
-const SelectorOptionItemImpl = ({
-  option,
-  active,
-  disabled,
-  multiple,
-  showCheckMark,
-  basis,
-  itemMargin,
-  tokens,
-  itemStyle,
-  labelStyle,
-  descriptionStyle,
-  onToggle
-}) => {
-  const labelContent = option.label;
-  const descriptionContent = option.description;
-  const hasDescription = descriptionContent != null;
-  const accessibilityLabel = isText(labelContent) ? String(labelContent) : String(option.value);
-  const accessibilityHint = isText(descriptionContent) ? String(descriptionContent) : undefined;
-  const {
-    interactionProps,
-    states
-  } = useAriaPress({
-    disabled,
-    onPress: () => onToggle(option),
-    extraProps: {
-      accessibilityRole: multiple ? 'checkbox' : 'radio',
-      accessibilityLabel: accessibilityLabel,
-      accessibilityHint: accessibilityHint,
-      accessibilityState: multiple ? {
-        checked: active,
-        disabled
-      } : {
-        selected: active,
-        disabled
-      }
-    }
-  });
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, interactionProps, {
-    style: [tokens.layout.pressable, {
-      width: basis
-    }]
-  }), /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.item, {
-      marginHorizontal: itemMargin,
-      marginVertical: itemMargin,
-      paddingHorizontal: tokens.spacing.paddingHorizontal,
-      paddingVertical: tokens.spacing.paddingVertical,
-      borderRadius: tokens.radii.item,
-      borderColor: active ? tokens.colors.borderActive : tokens.colors.border,
-      backgroundColor: active ? tokens.colors.backgroundActive : tokens.colors.background,
-      opacity: disabled ? tokens.states.disabledOpacity : 1
-    }, states.pressed && {
-      opacity: 0.9
-    }, itemStyle]
-  }, isText(labelContent) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.label, {
-      color: active ? tokens.colors.textActive : tokens.colors.text,
-      fontSize: tokens.typography.fontSize,
-      lineHeight: tokens.typography.fontSize * 1.4,
-      fontFamily: tokens.typography.fontFamily,
-      fontWeight: tokens.typography.fontWeight
-    }, labelStyle]
-  }, labelContent) : labelContent, hasDescription ? isText(descriptionContent) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.description, {
-      marginTop: tokens.spacing.descriptionMarginTop,
-      color: disabled ? tokens.colors.disabledText : tokens.colors.description,
-      fontSize: tokens.typography.descriptionSize,
-      lineHeight: tokens.typography.descriptionSize * 1.4
-    }, descriptionStyle]
-  }, descriptionContent) : /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginTop: tokens.spacing.descriptionMarginTop
-    }
-  }, descriptionContent) : null, active && showCheckMark ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.checkMarkTriangle, {
-      borderTopWidth: CHECK_MARK_CORNER_HEIGHT,
-      borderBottomWidth: CHECK_MARK_CORNER_HEIGHT,
-      borderLeftWidth: CHECK_MARK_CORNER_WIDTH,
-      borderRightWidth: CHECK_MARK_CORNER_WIDTH,
-      borderBottomColor: tokens.colors.check,
-      borderRightColor: tokens.colors.check
-    }]
-  }), /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.checkMark, {
-      color: tokens.colors.checkForeground
-    }]
-  }, CHECK_MARK)) : null));
-};
-const SelectorOptionItemMemo = /*#__PURE__*/React.memo(SelectorOptionItemImpl);
-SelectorOptionItemMemo.displayName = 'SelectorOptionItem';
-const SelectorOptionItem = SelectorOptionItemMemo;
-const SelectorImpl = props => {
-  const {
-    tokensOverride,
-    options,
-    columns: colP,
-    multiple: multP,
-    showCheckMark: showChkP,
-    disabled: disP,
-    onChange,
-    itemStyle,
-    labelStyle,
-    descriptionStyle,
-    style,
-    ...rest
-  } = props;
-  const tokens = useSelectorTokens(tokensOverride);
-  const columns = colP ?? tokens.defaults.columns ?? 1;
-  const multiple = multP ?? tokens.defaults.multiple;
-  const showCheckMark = showChkP ?? tokens.defaults.showCheckMark;
-  const disabled = Boolean(disP ?? tokens.defaults.disabled);
-  const [value = [], triggerChange] = useControllableValue(props, {
-    defaultValue: []
-  });
-  const optionsByVal = useMemo(() => {
-    const m = new Map();
-    for (const o of options) m.set(o.value, o);
-    return m;
-  }, [options]);
-  const rCols = Math.max(1, Math.floor(columns));
-  const basis = `${100 / rCols}%`;
-  const itemMargin = tokens.spacing.gap / 2;
-  const selectedSet = useMemo(() => new Set(value), [value]);
-  const toggleOption = useCallback(option => {
-    if (disabled || option.disabled) return;
-    const active = selectedSet.has(option.value);
-    const nextVal = multiple ? active ? value.filter(item => item !== option.value) : [...value, option.value] : active ? [] : [option.value];
-    triggerChange(nextVal, {
-      items: nextVal.map(v => optionsByVal.get(v)).filter(Boolean)
-    });
-  }, [disabled, multiple, optionsByVal, selectedSet, triggerChange, value]);
-  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: [tokens.layout.container, {
-      marginHorizontal: -itemMargin,
-      marginVertical: -itemMargin
-    }, style],
-    accessibilityRole: multiple ? undefined : 'radiogroup'
-  }), options.map(option => /*#__PURE__*/React.createElement(SelectorOptionItem, {
-    key: String(option.value),
-    option: option,
-    active: selectedSet.has(option.value),
-    disabled: disabled || Boolean(option.disabled),
-    multiple: multiple,
-    showCheckMark: showCheckMark,
-    basis: basis,
-    itemMargin: itemMargin,
-    tokens: tokens,
-    itemStyle: itemStyle,
-    labelStyle: labelStyle,
-    descriptionStyle: descriptionStyle,
-    onToggle: toggleOption
-  })));
-};
-export const Selector = /*#__PURE__*/React.memo(SelectorImpl);
-Selector.displayName = 'Selector';
-export default Selector;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var l in o)({}).hasOwnProperty.call(o,l)&&(e[l]=o[l])}return e},_extends.apply(null,arguments)}import React,{useCallback,useMemo}from"react";import{Pressable,Text,View}from"react-native";import{useSelectorTokens}from"./tokens";import{useAriaPress,useControllableValue}from"../../hooks";import{isText}from"../../utils";const CHECK_MARK="✓",CHECK_MARK_CORNER_HEIGHT=8,CHECK_MARK_CORNER_WIDTH=10,SelectorOptionItemImpl=({option:e,active:t,disabled:o,multiple:l,showCheckMark:i,basis:r,itemMargin:a,tokens:s,itemStyle:c,labelStyle:n,descriptionStyle:d,onToggle:p})=>{const m=e.label,u=e.description,g=null!=u,y=isText(m)?String(m):String(e.value),b=isText(u)?String(u):void 0,{interactionProps:h,states:S}=useAriaPress({disabled:o,onPress:()=>p(e),extraProps:{accessibilityRole:l?"checkbox":"radio",accessibilityLabel:y,accessibilityHint:b,accessibilityState:l?{checked:t,disabled:o}:{selected:t,disabled:o}}});return React.createElement(Pressable,_extends({},h,{style:[s.layout.pressable,{width:r}]}),React.createElement(View,{style:[s.layout.item,{marginHorizontal:a,marginVertical:a,paddingHorizontal:s.spacing.paddingHorizontal,paddingVertical:s.spacing.paddingVertical,borderRadius:s.radii.item,borderColor:t?s.colors.borderActive:s.colors.border,backgroundColor:t?s.colors.backgroundActive:s.colors.background,opacity:o?s.states.disabledOpacity:1},S.pressed&&{opacity:.9},c]},isText(m)?React.createElement(Text,{style:[s.layout.label,{color:t?s.colors.textActive:s.colors.text,fontSize:s.typography.fontSize,lineHeight:1.4*s.typography.fontSize,fontFamily:s.typography.fontFamily,fontWeight:s.typography.fontWeight},n]},m):m,g?isText(u)?React.createElement(Text,{style:[s.layout.description,{marginTop:s.spacing.descriptionMarginTop,color:o?s.colors.disabledText:s.colors.description,fontSize:s.typography.descriptionSize,lineHeight:1.4*s.typography.descriptionSize},d]},u):React.createElement(View,{style:{marginTop:s.spacing.descriptionMarginTop}},u):null,t&&i?React.createElement(React.Fragment,null,React.createElement(View,{style:[s.layout.checkMarkTriangle,{borderTopWidth:8,borderBottomWidth:8,borderLeftWidth:10,borderRightWidth:10,borderBottomColor:s.colors.check,borderRightColor:s.colors.check}]}),React.createElement(Text,{style:[s.layout.checkMark,{color:s.colors.checkForeground}]},"✓")):null))},SelectorOptionItemMemo=React.memo(SelectorOptionItemImpl);SelectorOptionItemMemo.displayName="SelectorOptionItem";const SelectorOptionItem=SelectorOptionItemMemo,SelectorImpl=e=>{const{tokensOverride:t,options:o,columns:l,multiple:i,showCheckMark:r,disabled:a,onChange:s,itemStyle:c,labelStyle:n,descriptionStyle:d,style:p,...m}=e,u=useSelectorTokens(t),g=l??u.defaults.columns??1,y=i??u.defaults.multiple,b=r??u.defaults.showCheckMark,h=Boolean(a??u.defaults.disabled),[S=[],f]=useControllableValue(e,{defaultValue:[]}),k=useMemo(()=>{const e=new Map;for(const t of o)e.set(t.value,t);return e},[o]),R=100/Math.max(1,Math.floor(g))+"%",x=u.spacing.gap/2,M=useMemo(()=>new Set(S),[S]),T=useCallback(e=>{if(h||e.disabled)return;const t=M.has(e.value),o=y?t?S.filter(t=>t!==e.value):[...S,e.value]:t?[]:[e.value];f(o,{items:o.map(e=>k.get(e)).filter(Boolean)})},[h,y,k,M,f,S]);return React.createElement(View,_extends({},m,{style:[u.layout.container,{marginHorizontal:-x,marginVertical:-x},p],accessibilityRole:y?void 0:"radiogroup"}),o.map(e=>React.createElement(SelectorOptionItem,{key:String(e.value),option:e,active:M.has(e.value),disabled:h||Boolean(e.disabled),multiple:y,showCheckMark:b,basis:R,itemMargin:x,tokens:u,itemStyle:c,labelStyle:n,descriptionStyle:d,onToggle:T})))};export const Selector=React.memo(SelectorImpl);Selector.displayName="Selector";export default Selector;

package/dist/es/components/selector/index.js

@@ -1,3 +1 @@
-import Selector from './Selector';
-export default Selector;
-export { Selector };
+import Selector from"./Selector";export default Selector;export{Selector};

package/dist/es/components/selector/tokens.js

@@ -1,88 +1 @@
-import { Platform } from 'react-native';
-import { createComponentTokensHook } from '../../design-system';
-const createSelectorTokens = ({
-  palette,
-  spacing,
-  radii,
-  typography,
-  fontSize
-}) => ({
-  defaults: {
-    columns: 3,
-    multiple: false,
-    showCheckMark: true,
-    disabled: false
-  },
-  layout: {
-    container: {
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    },
-    pressable: Platform.OS === 'web' ? {
-      outlineStyle: 'solid',
-      outlineWidth: 0
-    } : {},
-    item: {
-      flex: 1,
-      borderWidth: 0,
-      justifyContent: 'center',
-      alignItems: 'center',
-      overflow: 'hidden'
-    },
-    label: {
-      includeFontPadding: false,
-      textAlign: 'center'
-    },
-    description: {
-      includeFontPadding: false,
-      textAlign: 'center'
-    },
-    checkMark: {
-      position: 'absolute',
-      right: 1,
-      bottom: 1,
-      fontSize: 8,
-      includeFontPadding: false
-    },
-    checkMarkTriangle: {
-      position: 'absolute',
-      right: 0,
-      bottom: 0,
-      width: 0,
-      height: 0,
-      borderTopColor: 'transparent',
-      borderLeftColor: 'transparent'
-    }
-  },
-  colors: {
-    border: 'transparent',
-    borderActive: 'transparent',
-    background: '#ffffff',
-    backgroundActive: palette.primary[50],
-    text: palette.default[900],
-    textActive: palette.primary[600],
-    description: palette.default[500],
-    disabledText: palette.default[400],
-    check: palette.primary[600],
-    checkForeground: palette.primary.foreground ?? '#fff'
-  },
-  typography: {
-    fontSize: fontSize.md,
-    descriptionSize: fontSize.sm,
-    fontFamily: typography.fontFamily,
-    fontWeight: typography.weight.medium
-  },
-  radii: {
-    item: radii.xs
-  },
-  spacing: {
-    gap: spacing.sm,
-    paddingVertical: spacing.sm,
-    paddingHorizontal: spacing.lg,
-    descriptionMarginTop: spacing.xxs
-  },
-  states: {
-    disabledOpacity: 0.45
-  }
-});
-export const useSelectorTokens = createComponentTokensHook('selector', createSelectorTokens);
+import{Platform}from"react-native";import{createComponentTokensHook}from"../../design-system";const createSelectorTokens=e=>{const{palette:t,spacing:o,radii:r,typography:i,fontSize:n}=e,a=e.surface??"#ffffff";return{defaults:{columns:3,multiple:!1,showCheckMark:!0,disabled:!1},layout:{container:{flexDirection:"row",flexWrap:"wrap"},pressable:"web"===Platform.OS?{outlineStyle:"solid",outlineWidth:0}:{},item:{flex:1,borderWidth:0,justifyContent:"center",alignItems:"center",overflow:"hidden"},label:{includeFontPadding:!1,textAlign:"center"},description:{includeFontPadding:!1,textAlign:"center"},checkMark:{position:"absolute",right:1,bottom:1,fontSize:8,includeFontPadding:!1},checkMarkTriangle:{position:"absolute",right:0,bottom:0,width:0,height:0,borderTopColor:"transparent",borderLeftColor:"transparent"}},colors:{border:"transparent",borderActive:"transparent",background:a,backgroundActive:t.primary[50],text:t.default[900],textActive:t.primary[600],description:t.default[500],disabledText:t.default[400],check:t.primary[600],checkForeground:t.primary.foreground??"#fff"},typography:{fontSize:n.md,descriptionSize:n.sm,fontFamily:i.fontFamily,fontWeight:i.weight.medium},radii:{item:r.xs},spacing:{gap:o.sm,paddingVertical:o.sm,paddingHorizontal:o.lg,descriptionMarginTop:o.xxs},states:{disabledOpacity:.45}}};export const useSelectorTokens=createComponentTokensHook("selector",createSelectorTokens);

package/dist/es/components/share-sheet/ShareSheet.js

@@ -1,267 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useMemo, useRef } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
-import { useAriaPress } from '../../hooks';
-import { createHairlineView } from '../../utils/hairline';
-import { isFiniteNumber, isText, isValidNode } from '../../utils/validate';
-import { renderTextOrNode } from '../../utils';
-import Popup from '../popup';
-import { useLocale } from '../config-provider/useLocale';
-import { useShareSheetTokens } from './tokens';
-const no = o => {
-  if (!o || o.length === 0) return [];
-  if (Array.isArray(o[0])) return o;
-  return [o];
-};
-const ShareSheetOptionItem = /*#__PURE__*/React.memo(({
-  option: o,
-  index: i,
-  columns: cols,
-  tokens: t,
-  onSelect: os
-}) => {
-  const ows = {
-    width: `${100 / cols}%`
-  };
-  const is = {
-    width: t.sizing.icon,
-    height: t.sizing.icon
-  };
-  const p = useAriaPress({
-    onPress: () => os(o, i),
-    extraProps: {
-      accessibilityRole: 'menuitem',
-      accessibilityLabel: isText(o.name) ? String(o.name) : undefined,
-      testID: `rv-share-sheet-item-${i}`
-    }
-  });
-  const iconNode = isText(o.icon) ? renderTextOrNode(o.icon, []) : o.icon;
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [S.o, ows]
-  }, p.interactionProps), /*#__PURE__*/React.createElement(View, {
-    style: [S.ic, is, {
-      marginHorizontal: t.spacing.iconMarginHorizontal
-    }]
-  }, iconNode), isValidNode(o.name) && renderTextOrNode(o.name, [S.ot, {
-    color: t.colors.option,
-    fontFamily: t.typography.fontFamily,
-    fontSize: t.typography.option,
-    paddingHorizontal: t.spacing.optionTextPaddingHorizontal
-  }]), isValidNode(o.description) && (isText(o.description) ? renderTextOrNode(o.description, [S.od, {
-    color: t.colors.optionDesc,
-    fontFamily: t.typography.fontFamily,
-    marginTop: t.spacing.gap,
-    fontSize: t.typography.optionDesc,
-    paddingHorizontal: t.spacing.optionDescPaddingHorizontal
-  }]) : /*#__PURE__*/React.createElement(View, {
-    style: [S.odn, {
-      marginTop: t.spacing.gap,
-      paddingHorizontal: t.spacing.optionDescPaddingHorizontal
-    }]
-  }, o.description)));
-});
-const ShareSheetCancel = /*#__PURE__*/React.memo(({
-  cancelText: ct,
-  tokens: t,
-  onPress: op
-}) => {
-  const cp = useAriaPress({
-    onPress: op,
-    extraProps: {
-      testID: 'rv-share-sheet-cancel',
-      accessibilityRole: 'button'
-    }
-  });
-  return /*#__PURE__*/React.createElement(View, {
-    style: {
-      backgroundColor: t.colors.divider
-    }
-  }, /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [S.c, {
-      backgroundColor: t.colors.background,
-      paddingVertical: t.spacing.cancelPaddingVertical,
-      marginTop: t.spacing.cancelMarginTop
-    }]
-  }, cp.interactionProps), renderTextOrNode(ct, [S.ct, {
-    color: t.colors.option,
-    fontFamily: t.typography.fontFamily,
-    fontSize: t.typography.cancel
-  }])));
-});
-const ShareSheetImpl = p => {
-  const locale = useLocale();
-  const {
-    visible,
-    title,
-    description,
-    cancelText = locale?.vanShareSheet?.cancel ?? locale?.cancel ?? 'Cancel',
-    options,
-    columns = 4,
-    closeOnSelect = true,
-    safeAreaInsetBottom = true,
-    children,
-    tokensOverride,
-    onSelect,
-    onCancel,
-    onClose,
-    lockScroll = true,
-    overlay = true,
-    round = true,
-    style: ps,
-    placement: _p,
-    position: _pos,
-    ...pp
-  } = p;
-  const t = useShareSheetTokens(tokensOverride);
-  const gs = no(options);
-  const rc = isFiniteNumber(columns) ? Math.max(1, Math.floor(columns)) : 4;
-  const ht = isValidNode(title);
-  const hd = isValidNode(description);
-  const hc = isValidNode(cancelText);
-  const ocr = useRef(onCancel),
-    ocrr = useRef(onClose),
-    osr = useRef(onSelect);
-  ocr.current = onCancel;
-  ocrr.current = onClose;
-  osr.current = onSelect;
-  const cl = useCallback(ic => {
-    if (ic) ocr.current?.();
-    ocrr.current?.();
-  }, []);
-  const hs = useCallback((o, i) => {
-    osr.current?.(o, i);
-    o.onPress?.(o);
-    if (closeOnSelect) cl();
-  }, [cl, closeOnSelect]);
-  const opc = useCallback(() => cl(true), [cl]);
-  const ws = [S.w, {
-    backgroundColor: t.colors.background
-  }];
-  const grs = [S.or, {
-    paddingLeft: t.spacing.gap,
-    paddingVertical: 12
-  }];
-  const gn = useMemo(() => {
-    if (!gs.length) return null;
-    let gi = 0;
-    return gs.map((g, gidx) => /*#__PURE__*/React.createElement(View, {
-      key: gidx
-    }, gidx > 0 && /*#__PURE__*/React.createElement(View, {
-      style: createHairlineView({
-        position: 'top',
-        color: t.colors.border,
-        left: t.spacing.horizontal,
-        right: t.spacing.horizontal
-      })
-    }), /*#__PURE__*/React.createElement(View, {
-      style: grs
-    }, g.map(o => {
-      const ci = gi++;
-      return /*#__PURE__*/React.createElement(ShareSheetOptionItem, {
-        key: o.key ?? ci,
-        option: o,
-        index: ci,
-        columns: rc,
-        tokens: t,
-        onSelect: hs
-      });
-    }))));
-  }, [gs, grs, hs, rc, t]);
-  const hn = useMemo(() => {
-    if (!ht && !hd) return null;
-    return /*#__PURE__*/React.createElement(View, {
-      style: [S.h, {
-        paddingTop: t.spacing.headerPaddingTop,
-        paddingHorizontal: t.spacing.headerPaddingHorizontal,
-        paddingBottom: t.spacing.headerPaddingBottom
-      }]
-    }, ht && (isText(title) ? renderTextOrNode(title, [S.t, {
-      color: t.colors.title,
-      fontFamily: t.typography.fontFamily,
-      fontSize: t.typography.title,
-      marginTop: t.spacing.titleMarginTop
-    }]) : /*#__PURE__*/React.createElement(View, {
-      style: [S.n, {
-        marginTop: t.spacing.nodeMarginTop
-      }]
-    }, title)), hd && (isText(description) ? renderTextOrNode(description, [S.d, {
-      color: t.colors.description,
-      fontFamily: t.typography.fontFamily,
-      fontSize: t.typography.description,
-      marginTop: t.spacing.descriptionMarginTop
-    }]) : /*#__PURE__*/React.createElement(View, {
-      style: [S.n, {
-        marginTop: t.spacing.nodeMarginTop
-      }]
-    }, description)));
-  }, [description, hd, ht, title, t.colors.description, t.colors.title, t.spacing.descriptionMarginTop, t.spacing.headerPaddingBottom, t.spacing.headerPaddingHorizontal, t.spacing.headerPaddingTop, t.spacing.nodeMarginTop, t.spacing.titleMarginTop, t.typography.description, t.typography.fontFamily, t.typography.title]);
-  const psm = [{
-    padding: t.spacing.popupPadding
-  }, ps];
-  return /*#__PURE__*/React.createElement(Popup, _extends({}, pp, {
-    visible: visible,
-    placement: "bottom",
-    round: round,
-    safeAreaInsetBottom: safeAreaInsetBottom,
-    overlay: overlay,
-    lockScroll: lockScroll,
-    onClose: opc,
-    style: psm
-  }), /*#__PURE__*/React.createElement(View, {
-    accessibilityRole: "menu",
-    style: ws
-  }, hn, gn, children, hc && /*#__PURE__*/React.createElement(ShareSheetCancel, {
-    cancelText: cancelText,
-    tokens: t,
-    onPress: opc
-  })));
-};
-const S = StyleSheet.create({
-  w: {
-    width: '100%'
-  },
-  h: {
-    alignItems: 'center'
-  },
-  t: {
-    fontWeight: 'normal',
-    textAlign: 'center'
-  },
-  d: {
-    textAlign: 'center'
-  },
-  n: {
-    alignItems: 'center'
-  },
-  or: {
-    flexDirection: 'row',
-    flexWrap: 'wrap'
-  },
-  o: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  ic: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  ot: {
-    fontWeight: '500',
-    textAlign: 'center'
-  },
-  od: {
-    textAlign: 'center'
-  },
-  odn: {
-    alignItems: 'center'
-  },
-  c: {
-    alignItems: 'center'
-  },
-  ct: {
-    fontWeight: '500'
-  }
-});
-const ShareSheet = /*#__PURE__*/React.memo(ShareSheetImpl);
-ShareSheet.displayName = 'ShareSheet';
-export default ShareSheet;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)({}).hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},_extends.apply(null,arguments)}import React,{useCallback,useMemo,useRef}from"react";import{Pressable,StyleSheet,View}from"react-native";import{useAriaPress}from"../../hooks";import{createHairlineView}from"../../utils/hairline";import{isFiniteNumber,isText,isValidNode}from"../../utils/validate";import{renderTextOrNode}from"../../utils";import Popup from"../popup";import{useLocale}from"../config-provider/useLocale";import{useShareSheetTokens}from"./tokens";const no=e=>e&&0!==e.length?Array.isArray(e[0])?e:[e]:[],ShareSheetOptionItem=React.memo(({option:e,index:t,columns:o,tokens:n,onSelect:i})=>{const r={width:100/o+"%"},a={width:n.sizing.icon,height:n.sizing.icon},c=useAriaPress({onPress:()=>i(e,t),extraProps:{accessibilityRole:"menuitem",accessibilityLabel:isText(e.name)?String(e.name):void 0,testID:`rv-share-sheet-item-${t}`}}),s=isText(e.icon)?renderTextOrNode(e.icon,[]):e.icon;return React.createElement(Pressable,_extends({style:[S.o,r]},c.interactionProps),React.createElement(View,{style:[S.ic,a,{marginHorizontal:n.spacing.iconMarginHorizontal}]},s),isValidNode(e.name)&&renderTextOrNode(e.name,[S.ot,{color:n.colors.option,fontFamily:n.typography.fontFamily,fontSize:n.typography.option,paddingHorizontal:n.spacing.optionTextPaddingHorizontal}]),isValidNode(e.description)&&(isText(e.description)?renderTextOrNode(e.description,[S.od,{color:n.colors.optionDesc,fontFamily:n.typography.fontFamily,marginTop:n.spacing.gap,fontSize:n.typography.optionDesc,paddingHorizontal:n.spacing.optionDescPaddingHorizontal}]):React.createElement(View,{style:[S.odn,{marginTop:n.spacing.gap,paddingHorizontal:n.spacing.optionDescPaddingHorizontal}]},e.description)))}),ShareSheetCancel=React.memo(({cancelText:e,tokens:t,onPress:o})=>{const n=useAriaPress({onPress:o,extraProps:{testID:"rv-share-sheet-cancel",accessibilityRole:"button"}});return React.createElement(View,{style:{backgroundColor:t.colors.divider}},React.createElement(Pressable,_extends({style:[S.c,{backgroundColor:t.colors.background,paddingVertical:t.spacing.cancelPaddingVertical,marginTop:t.spacing.cancelMarginTop}]},n.interactionProps),renderTextOrNode(e,[S.ct,{color:t.colors.option,fontFamily:t.typography.fontFamily,fontSize:t.typography.cancel}])))}),ShareSheetImpl=e=>{const t=useLocale(),{visible:o,title:n,description:i,cancelText:r=t?.vanShareSheet?.cancel??t?.cancel??"Cancel",options:a,columns:c=4,closeOnSelect:s=!0,safeAreaInsetBottom:l=!0,children:p,tokensOverride:d,onSelect:g,onCancel:m,onClose:h,lockScroll:y=!0,overlay:u=!0,round:f=!0,style:T,placement:x,position:P,...b}=e,R=useShareSheetTokens(d),k=no(a),V=isFiniteNumber(c)?Math.max(1,Math.floor(c)):4,w=isValidNode(n),z=isValidNode(i),v=isValidNode(r),N=useRef(m),C=useRef(h),E=useRef(g);N.current=m,C.current=h,E.current=g;const I=useCallback(e=>{e&&N.current?.(),C.current?.()},[]),M=useCallback((e,t)=>{E.current?.(e,t),e.onPress?.(e),s&&I()},[I,s]),O=useCallback(()=>I(!0),[I]),F=[S.w,{backgroundColor:R.colors.background}],H=[S.or,{paddingLeft:R.spacing.gap,paddingVertical:12}],A=useMemo(()=>{if(!k.length)return null;let e=0;return k.map((t,o)=>React.createElement(View,{key:o},o>0&&React.createElement(View,{style:createHairlineView({position:"top",color:R.colors.border,left:R.spacing.horizontal,right:R.spacing.horizontal})}),React.createElement(View,{style:H},t.map(t=>{const o=e++;return React.createElement(ShareSheetOptionItem,{key:t.key??o,option:t,index:o,columns:V,tokens:R,onSelect:M})}))))},[k,H,M,V,R]),D=useMemo(()=>w||z?React.createElement(View,{style:[S.h,{paddingTop:R.spacing.headerPaddingTop,paddingHorizontal:R.spacing.headerPaddingHorizontal,paddingBottom:R.spacing.headerPaddingBottom}]},w&&(isText(n)?renderTextOrNode(n,[S.t,{color:R.colors.title,fontFamily:R.typography.fontFamily,fontSize:R.typography.title,marginTop:R.spacing.titleMarginTop}]):React.createElement(View,{style:[S.n,{marginTop:R.spacing.nodeMarginTop}]},n)),z&&(isText(i)?renderTextOrNode(i,[S.d,{color:R.colors.description,fontFamily:R.typography.fontFamily,fontSize:R.typography.description,marginTop:R.spacing.descriptionMarginTop}]):React.createElement(View,{style:[S.n,{marginTop:R.spacing.nodeMarginTop}]},i))):null,[i,z,w,n,R.colors.description,R.colors.title,R.spacing.descriptionMarginTop,R.spacing.headerPaddingBottom,R.spacing.headerPaddingHorizontal,R.spacing.headerPaddingTop,R.spacing.nodeMarginTop,R.spacing.titleMarginTop,R.typography.description,R.typography.fontFamily,R.typography.title]),_=[{padding:R.spacing.popupPadding},T];return React.createElement(Popup,_extends({},b,{visible:o,placement:"bottom",round:f,safeAreaInsetBottom:l,overlay:u,lockScroll:y,onClose:O,style:_}),React.createElement(View,{accessibilityRole:"menu",style:F},D,A,p,v&&React.createElement(ShareSheetCancel,{cancelText:r,tokens:R,onPress:O})))},S=StyleSheet.create({w:{width:"100%"},h:{alignItems:"center"},t:{fontWeight:"normal",textAlign:"center"},d:{textAlign:"center"},n:{alignItems:"center"},or:{flexDirection:"row",flexWrap:"wrap"},o:{alignItems:"center",justifyContent:"center"},ic:{alignItems:"center",justifyContent:"center"},ot:{fontWeight:"500",textAlign:"center"},od:{textAlign:"center"},odn:{alignItems:"center"},c:{alignItems:"center"},ct:{fontWeight:"500"}}),ShareSheet=React.memo(ShareSheetImpl);ShareSheet.displayName="ShareSheet";export default ShareSheet;

package/dist/es/components/share-sheet/index.js

@@ -1,3 +1 @@
-import ShareSheet from './ShareSheet';
-export { useShareSheetTokens } from './tokens';
-export default ShareSheet;
+import ShareSheet from"./ShareSheet";export{useShareSheetTokens}from"./tokens";export default ShareSheet;

package/dist/es/components/share-sheet/tokens.js

@@ -1,49 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize,
-    typography
-  } = foundations;
-  return {
-    colors: {
-      background: '#ffffff',
-      title: palette.default[900],
-      description: palette.default[500],
-      option: palette.default[900],
-      optionDesc: palette.default[500],
-      border: palette.default[200],
-      divider: palette.default[100]
-    },
-    spacing: {
-      horizontal: spacing.md,
-      vertical: spacing.sm,
-      gap: spacing.xs,
-      popupPadding: 0,
-      headerPaddingTop: spacing.sm,
-      headerPaddingHorizontal: spacing.lg,
-      headerPaddingBottom: spacing.md,
-      titleMarginTop: spacing.xs,
-      descriptionMarginTop: spacing.xs,
-      nodeMarginTop: spacing.xs,
-      iconMarginHorizontal: spacing.md,
-      optionTextPaddingHorizontal: spacing.xs,
-      optionDescPaddingHorizontal: spacing.lg,
-      cancelPaddingVertical: 14,
-      cancelMarginTop: spacing.sm
-    },
-    sizing: {
-      icon: 48
-    },
-    typography: {
-      fontFamily: typography.fontFamily,
-      title: fontSize.md,
-      description: fontSize.xs,
-      option: fontSize.xs,
-      optionDesc: fontSize.xxs,
-      cancel: fontSize.md
-    }
-  };
-};
-export const useShareSheetTokens = createComponentTokensHook('shareSheet', createTokens);
+import{createComponentTokensHook}from"../../design-system";const createTokens=o=>{const{palette:e,spacing:n,fontSize:t,typography:a}=o;return{colors:{background:o.surface??"#ffffff",title:e.default[900],description:e.default[500],option:e.default[900],optionDesc:e.default[500],border:e.default[200],divider:e.default[100]},spacing:{horizontal:n.md,vertical:n.sm,gap:n.xs,popupPadding:0,headerPaddingTop:n.sm,headerPaddingHorizontal:n.lg,headerPaddingBottom:n.md,titleMarginTop:n.xs,descriptionMarginTop:n.xs,nodeMarginTop:n.xs,iconMarginHorizontal:n.md,optionTextPaddingHorizontal:n.xs,optionDescPaddingHorizontal:n.lg,cancelPaddingVertical:14,cancelMarginTop:n.sm},sizing:{icon:48},typography:{fontFamily:a.fontFamily,title:t.md,description:t.xs,option:t.xs,optionDesc:t.xxs,cancel:t.md}}};export const useShareSheetTokens=createComponentTokensHook("shareSheet",createTokens);