react-native-system-ui 1.0.2 → 1.0.4

package/dist/es/components/radio/Radio.js

@@ -1,214 +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, useContext, useEffect, useMemo, useRef } from 'react';
-import { Platform, Pressable, View } from 'react-native';
-import { useRadio } from '@react-native-aria/radio';
-import { useToggleState } from '@react-stately/toggle';
-import { RadioGroupContext } from './RadioContext';
-import { useRadioTokens } from './tokens';
-import { createHairlineView, parseNumber, renderTextOrNode } from '../../utils';
-import { isRenderable, isText } from '../../utils/validate';
-export const Radio = /*#__PURE__*/React.memo(props => {
-  const {
-    children,
-    name,
-    value,
-    checked,
-    defaultChecked,
-    iconSize,
-    checkedColor,
-    iconRender,
-    shape: shapeP,
-    labelPosition,
-    labelDisabled,
-    disabled,
-    style,
-    labelStyle,
-    tokensOverride,
-    onClick,
-    onChange,
-    accessibilityLabel,
-    ['aria-label']: ariaLabel,
-    ...rest
-  } = props;
-  const tokens = useRadioTokens(tokensOverride);
-  const group = useContext(RadioGroupContext);
-  const optVal = value ?? name;
-  const sv = optVal == null ? undefined : String(optVal);
-  const isGroup = !!group && sv !== undefined;
-  const rIconSz = parseNumber(iconSize ?? group?.iconSize, tokens.defaults.iconSize);
-  const rCheckedClr = checkedColor ?? group?.checkedColor ?? tokens.colors.checkedBackground;
-  const rLabelPos = labelPosition ?? tokens.defaults.labelPosition;
-  const rLabelDis = labelDisabled ?? group?.labelDisabled ?? tokens.defaults.labelDisabled;
-  const rDis = Boolean(disabled || group?.state.isDisabled);
-  const shape = shapeP ?? tokens.defaults.shape;
-  const standKey = sv ?? 'standalone';
-  const inputRef = useRef(null);
-  const inputElRef = useRef(null);
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  const onClickRef = useRef(onClick);
-  onClickRef.current = onClick;
-  const rAccLabel = accessibilityLabel ?? ariaLabel ?? (isText(children) ? String(children) : undefined) ?? sv ?? 'radio';
-  const {
-    isSelected: standSel,
-    setSelected: setStandSel
-  } = useToggleState({
-    isSelected: checked,
-    defaultSelected: defaultChecked,
-    onChange: next => onChange?.(next)
-  });
-  const pseudoState = {
-    selectedValue: standSel ? standKey : null,
-    setSelectedValue: next => {
-      setStandSel(next === standKey);
-    }
-  };
-  useEffect(() => {
-    if (isGroup && group && sv !== undefined) {
-      group.registerValue(sv, optVal ?? sv);
-      return () => group.unregisterValue(sv);
-    }
-    ;
-    return undefined;
-  }, [group, isGroup, optVal, sv]);
-  const state = isGroup && group ? group.state : pseudoState;
-  const radioVal = isGroup ? sv : standKey;
-  const {
-    onBlur,
-    onFocus,
-    ...compRest
-  } = rest;
-  const ariaRef = Platform.OS === 'web' ? inputElRef : inputRef;
-  const {
-    inputProps
-  } = useRadio({
-    value: radioVal,
-    isDisabled: rDis,
-    'aria-label': rAccLabel,
-    accessibilityLabel: rAccLabel,
-    ...compRest
-  }, state, ariaRef);
-  const isChecked = isGroup && group && sv !== undefined ? group.state.selectedValue === sv : checked !== undefined ? checked : standSel;
-  const inputOnPress = inputProps?.onPress;
-  const handlePress = useCallback(e => {
-    onClickRef.current?.(e);
-    if (rDis) return;
-    if (isGroup && group && sv !== undefined) {
-      if (!isChecked) group.state.setSelectedValue(sv);
-      return;
-    }
-    ;
-    if (checked !== undefined) {
-      onChangeRef.current?.(!checked);
-      return;
-    }
-    ;
-    if (onChangeRef.current) {
-      setStandSel(!standSel);
-      return;
-    }
-    ;
-    inputOnPress?.(e);
-  }, [checked, group, inputOnPress, isChecked, isGroup, rDis, sv, setStandSel, standSel]);
-  const mergedInputProps = inputProps ? {
-    ...inputProps,
-    onPress: handlePress
-  } : {};
-  const borderClr = rDis ? tokens.colors.disabledBorder : isChecked ? rCheckedClr : tokens.colors.border;
-  const bgClr = rDis ? tokens.colors.disabledBackground : tokens.colors.background;
-  const spacingStyle = rLabelPos === 'left' ? {
-    marginRight: tokens.spacing.gap
-  } : {
-    marginLeft: tokens.spacing.gap
-  };
-  const labelClr = rDis ? tokens.colors.labelDisabled : tokens.colors.label;
-  const radius = shape === 'square' ? tokens.radii.square : tokens.radii.round;
-  const labelNode = useMemo(() => !isRenderable(children) ? null : /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.labelWrapper, spacingStyle],
-    pointerEvents: "none",
-    accessible: false
-  }, renderTextOrNode(children, [tokens.layout.label, {
-    color: labelClr,
-    fontSize: tokens.typography.fontSize,
-    lineHeight: tokens.typography.fontSize * tokens.typography.lineHeightMultiplier,
-    fontFamily: tokens.typography.fontFamily,
-    fontWeight: tokens.typography.fontWeight
-  }, labelStyle].filter(Boolean))), [children, labelClr, labelStyle, spacingStyle, tokens.layout.label, tokens.layout.labelWrapper, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight, tokens.typography.lineHeightMultiplier]);
-  const interactive = !rDis && !rLabelDis;
-  const defaultIcon = useMemo(() => /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.icon, {
-      width: rIconSz,
-      height: rIconSz,
-      borderRadius: radius,
-      backgroundColor: bgClr
-    }]
-  }, isChecked && /*#__PURE__*/React.createElement(View, {
-    style: {
-      width: rIconSz * tokens.sizing.dotScale,
-      height: rIconSz * tokens.sizing.dotScale,
-      borderRadius: radius,
-      backgroundColor: rCheckedClr
-    }
-  }), /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: 'all',
-      color: borderClr,
-      borderRadius: radius
-    })
-  })), [bgClr, borderClr, radius, isChecked, rCheckedClr, rIconSz, tokens.layout.icon, tokens.sizing.dotScale]);
-  const iconVisual = iconRender ? iconRender({
-    checked: Boolean(isChecked),
-    disabled: Boolean(rDis)
-  }) ?? null : defaultIcon;
-  const webInputStyle = {
-    position: 'absolute',
-    width: 1,
-    height: 1,
-    margin: -1,
-    border: 0,
-    padding: 0,
-    overflow: 'hidden',
-    clip: 'rect(0 0 0 0)',
-    clipPath: 'inset(50%)',
-    whiteSpace: 'nowrap'
-  };
-  const {
-    ref: _ignoredAriaRefProp,
-    ...webInputProps
-  } = inputProps ?? {};
-  const webInputNode = Platform.OS === 'web' ? /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputElRef
-  }, webInputProps, {
-    style: webInputStyle
-  })) : null;
-  const iconNode = interactive ? /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.iconWrapper
-  }, iconVisual, webInputNode) : /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
-    ref: inputRef,
-    testID: sv !== undefined ? `radio-icon-${sv}` : undefined,
-    disabled: rDis,
-    accessibilityRole: "radio",
-    accessibilityState: {
-      selected: isChecked,
-      disabled: rDis
-    },
-    style: tokens.layout.iconWrapper
-  }), iconVisual, webInputNode);
-  const isLeft = rLabelPos === 'left';
-  const first = isLeft ? labelNode : iconNode;
-  const second = isLeft ? iconNode : labelNode;
-  if (interactive) return /*#__PURE__*/React.createElement(Pressable, _extends({}, mergedInputProps, {
-    ref: inputRef,
-    testID: sv !== undefined ? `radio-icon-${sv}` : undefined,
-    disabled: rDis,
-    accessibilityRole: "radio",
-    accessibilityState: {
-      selected: isChecked,
-      disabled: rDis
-    },
-    style: [tokens.layout.container, style]
-  }), first, second);
-  return /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.container, style]
-  }, first, second);
-});
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var o in a)({}).hasOwnProperty.call(a,o)&&(e[o]=a[o])}return e},_extends.apply(null,arguments)}import React,{useCallback,useContext,useEffect,useMemo,useRef}from"react";import{Platform,Pressable,View}from"react-native";import{useRadio}from"@react-native-aria/radio";import{useToggleState}from"@react-stately/toggle";import{RadioGroupContext}from"./RadioContext";import{useRadioTokens}from"./tokens";import{createHairlineView,parseNumber,renderTextOrNode}from"../../utils";import{isRenderable,isText}from"../../utils/validate";export const Radio=React.memo(e=>{const{children:t,name:a,value:o,checked:l,defaultChecked:i,iconSize:r,checkedColor:s,iconRender:n,shape:c,labelPosition:d,labelDisabled:u,disabled:p,style:b,labelStyle:y,tokensOverride:f,onClick:g,onChange:m,accessibilityLabel:h,"aria-label":R,...S}=e,v=useRadioTokens(f),k=useContext(RadioGroupContext),w=o??a,x=null==w?void 0:String(w),C=!!k&&void 0!==x,V=parseNumber(r??k?.iconSize,v.defaults.iconSize),P=s??k?.checkedColor??v.colors.checkedBackground,E=d??v.defaults.labelPosition,z=u??k?.labelDisabled??v.defaults.labelDisabled,B=Boolean(p||k?.state.isDisabled),D=c??v.defaults.shape,O=x??"standalone",T=useRef(null),W=useRef(null),_=useRef(m);_.current=m;const H=useRef(g);H.current=g;const M=h??R??(isText(t)?String(t):void 0)??x??"radio",{isSelected:F,setSelected:N}=useToggleState({isSelected:l,defaultSelected:i,onChange:e=>m?.(e)}),L={selectedValue:F?O:null,setSelectedValue:e=>{N(e===O)}};useEffect(()=>{if(C&&k&&void 0!==x)return k.registerValue(x,w??x),()=>k.unregisterValue(x)},[k,C,w,x]);const j=C&&k?k.state:L,q=C?x:O,{onBlur:G,onFocus:I,...$}=S,A="web"===Platform.OS?W:T,{inputProps:J}=useRadio({value:q,isDisabled:B,"aria-label":M,accessibilityLabel:M,...$},j,A),K=C&&k&&void 0!==x?k.state.selectedValue===x:void 0!==l?l:F,Q=J?.onPress,U=useCallback(e=>{H.current?.(e),B||(C&&k&&void 0!==x?K||k.state.setSelectedValue(x):void 0===l?_.current?N(!F):Q?.(e):_.current?.(!l))},[l,k,Q,K,C,B,x,N,F]),X=J?{...J,onPress:U}:{},Y=B?v.colors.disabledBorder:K?P:v.colors.border,Z=B?v.colors.disabledBackground:v.colors.background,ee="left"===E?{marginRight:v.spacing.gap}:{marginLeft:v.spacing.gap},te=B?v.colors.labelDisabled:v.colors.label,ae="square"===D?v.radii.square:v.radii.round,oe=useMemo(()=>isRenderable(t)?React.createElement(View,{style:[v.layout.labelWrapper,ee],pointerEvents:"none",accessible:!1},renderTextOrNode(t,[v.layout.label,{color:te,fontSize:v.typography.fontSize,lineHeight:v.typography.fontSize*v.typography.lineHeightMultiplier,fontFamily:v.typography.fontFamily,fontWeight:v.typography.fontWeight},y].filter(Boolean))):null,[t,te,y,ee,v.layout.label,v.layout.labelWrapper,v.typography.fontFamily,v.typography.fontSize,v.typography.fontWeight,v.typography.lineHeightMultiplier]),le=!B&&!z,ie=useMemo(()=>React.createElement(View,{style:[v.layout.icon,{width:V,height:V,borderRadius:ae,backgroundColor:Z}]},K&&React.createElement(View,{style:{width:V*v.sizing.dotScale,height:V*v.sizing.dotScale,borderRadius:ae,backgroundColor:P}}),React.createElement(View,{style:createHairlineView({position:"all",color:Y,borderRadius:ae})})),[Z,Y,ae,K,P,V,v.layout.icon,v.sizing.dotScale]),re=n?n({checked:Boolean(K),disabled:Boolean(B)})??null:ie,{ref:se,...ne}=J??{},ce="web"===Platform.OS?React.createElement("input",_extends({ref:W},ne,{style:{position:"absolute",width:1,height:1,margin:-1,border:0,padding:0,overflow:"hidden",clip:"rect(0 0 0 0)",clipPath:"inset(50%)",whiteSpace:"nowrap"}})):null,de=le?React.createElement(View,{style:v.layout.iconWrapper},re,ce):React.createElement(Pressable,_extends({},X,{ref:T,testID:void 0!==x?`radio-icon-${x}`:void 0,disabled:B,accessibilityRole:"radio",accessibilityState:{selected:K,disabled:B},style:v.layout.iconWrapper}),re,ce),ue="left"===E,pe=ue?oe:de,be=ue?de:oe;return le?React.createElement(Pressable,_extends({},X,{ref:T,testID:void 0!==x?`radio-icon-${x}`:void 0,disabled:B,accessibilityRole:"radio",accessibilityState:{selected:K,disabled:B},style:[v.layout.container,b]}),pe,be):React.createElement(View,{style:[v.layout.container,b]},pe,be)});

package/dist/es/components/radio/RadioContext.js

@@ -1 +1 @@
-export { RadioGroupContext } from './RadioGroup';
+export{RadioGroupContext}from"./RadioGroup";

package/dist/es/components/radio/RadioGroup.js

@@ -1,82 +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 { View } from 'react-native';
-import { useRadioGroup } from '@react-native-aria/radio';
-import { useRadioGroupState } from '@react-stately/radio';
-import { useRadioTokens } from './tokens';
-export const RadioGroupContext = /*#__PURE__*/React.createContext(null);
-const RadioGroupImpl = props => {
-  const {
-    value,
-    defaultValue,
-    onChange,
-    disabled: disabledProp,
-    direction: directionProp,
-    iconSize,
-    checkedColor,
-    labelDisabled,
-    gap: gapProp,
-    name,
-    children,
-    style,
-    tokensOverride,
-    accessibilityLabel,
-    accessibilityHint,
-    ...viewProps
-  } = props;
-  const tokens = useRadioTokens(tokensOverride);
-  const disabled = disabledProp ?? tokens.defaults.groupDisabled;
-  const direction = directionProp ?? tokens.defaults.groupDirection;
-  const gap = Math.max(0, gapProp ?? tokens.spacing.groupGap);
-  const registryRef = useRef(new Map());
-  const registerValue = useCallback((key, raw) => {
-    registryRef.current.set(key, raw);
-  }, []);
-  const unregisterValue = useCallback(key => {
-    registryRef.current.delete(key);
-  }, []);
-  const state = useRadioGroupState({
-    value: value == null ? undefined : String(value),
-    defaultValue: defaultValue == null ? undefined : String(defaultValue),
-    isDisabled: disabled,
-    onChange: key => {
-      onChange?.(registryRef.current.get(key) ?? key);
-    },
-    name
-  });
-  const {
-    radioGroupProps
-  } = useRadioGroup({
-    isDisabled: disabled,
-    'aria-label': accessibilityLabel,
-    name
-  }, state);
-  const rProps = useMemo(() => ({
-    ...(radioGroupProps ?? {}),
-    ...(accessibilityHint && {
-      'aria-describedby': accessibilityHint
-    }),
-    'aria-disabled': disabled
-  }), [accessibilityHint, disabled, radioGroupProps]);
-  const ctxVal = useMemo(() => ({
-    state,
-    direction,
-    iconSize,
-    checkedColor,
-    labelDisabled,
-    registerValue,
-    unregisterValue
-  }), [checkedColor, direction, iconSize, labelDisabled, registerValue, state, unregisterValue]);
-  const ctrStyle = [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, {
-    columnGap: direction === 'horizontal' ? gap : undefined,
-    rowGap: gap
-  }, style];
-  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
-    value: ctxVal
-  }, /*#__PURE__*/React.createElement(View, _extends({}, rProps, viewProps, {
-    accessibilityLabel: accessibilityLabel,
-    accessibilityHint: accessibilityHint,
-    style: ctrStyle
-  }), children));
-};
-export const RadioGroup = /*#__PURE__*/React.memo(RadioGroupImpl);
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var o in t)({}).hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},_extends.apply(null,arguments)}import React,{useCallback,useMemo,useRef}from"react";import{View}from"react-native";import{useRadioGroup}from"@react-native-aria/radio";import{useRadioGroupState}from"@react-stately/radio";import{useRadioTokens}from"./tokens";export const RadioGroupContext=React.createContext(null);const RadioGroupImpl=e=>{const{value:a,defaultValue:t,onChange:o,disabled:r,direction:i,iconSize:l,checkedColor:n,labelDisabled:s,gap:u,name:c,children:d,style:p,tokensOverride:b,accessibilityLabel:m,accessibilityHint:R,...g}=e,f=useRadioTokens(b),v=r??f.defaults.groupDisabled,G=i??f.defaults.groupDirection,y=Math.max(0,u??f.spacing.groupGap),h=useRef(new Map),x=useCallback((e,a)=>{h.current.set(e,a)},[]),C=useCallback(e=>{h.current.delete(e)},[]),k=useRadioGroupState({value:null==a?void 0:String(a),defaultValue:null==t?void 0:String(t),isDisabled:v,onChange:e=>{o?.(h.current.get(e)??e)},name:c}),{radioGroupProps:V}=useRadioGroup({isDisabled:v,"aria-label":m,name:c},k),D=useMemo(()=>({...V??{},...R&&{"aria-describedby":R},"aria-disabled":v}),[R,v,V]),S=useMemo(()=>({state:k,direction:G,iconSize:l,checkedColor:n,labelDisabled:s,registerValue:x,unregisterValue:C}),[n,G,l,s,x,k,C]),w=["horizontal"===G?f.layout.groupHorizontal:f.layout.groupVertical,{columnGap:"horizontal"===G?y:void 0,rowGap:y},p];return React.createElement(RadioGroupContext.Provider,{value:S},React.createElement(View,_extends({},D,g,{accessibilityLabel:m,accessibilityHint:R,style:w}),d))};export const RadioGroup=React.memo(RadioGroupImpl);

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

@@ -1,5 +1 @@
-import { Radio as RadioBase } from './Radio';
-import { RadioGroup } from './RadioGroup';
-const Radio = RadioBase;
-Radio.Group = RadioGroup;
-export { Radio, RadioGroup };
+import{Radio as RadioBase}from"./Radio";import{RadioGroup}from"./RadioGroup";const Radio=RadioBase;Radio.Group=RadioGroup;export{Radio,RadioGroup};

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

@@ -1,80 +1 @@
-import { StyleSheet } from 'react-native';
-import { createComponentTokensHook } from '../../design-system';
-const centered = {
-  justifyContent: 'center',
-  alignItems: 'center'
-};
-const createRadioTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize,
-    typography
-  } = foundations;
-  return {
-    defaults: {
-      iconSize: 20,
-      labelPosition: 'right',
-      shape: 'round',
-      labelDisabled: false,
-      groupDisabled: false,
-      groupDirection: 'vertical'
-    },
-    layout: {
-      container: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      },
-      iconWrapper: centered,
-      labelWrapper: {
-        flexShrink: 1
-      },
-      icon: centered,
-      label: {
-        includeFontPadding: false
-      },
-      groupHorizontal: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        alignItems: 'center'
-      },
-      groupVertical: {
-        flexDirection: 'column'
-      },
-      groupItem: {
-        flexShrink: 0
-      }
-    },
-    colors: {
-      border: palette.default[400],
-      background: '#ffffff',
-      checkedBackground: palette.primary[500],
-      disabledBorder: palette.default[300],
-      disabledBackground: palette.default[100],
-      checkmark: palette.primary.foreground ?? '#ffffff',
-      label: palette.default.foreground ?? '#111827',
-      labelDisabled: palette.default[400]
-    },
-    typography: {
-      fontSize: fontSize.md,
-      fontFamily: typography.fontFamily,
-      fontWeight: typography.weight.medium,
-      lineHeightMultiplier: typography.lineHeightMultiplier
-    },
-    sizing: {
-      dotScale: 0.5
-    },
-    radii: {
-      round: 999,
-      square: 2
-    },
-    borders: {
-      width: StyleSheet.hairlineWidth
-    },
-    spacing: {
-      gap: spacing.sm,
-      groupGap: spacing.sm
-    }
-  };
-};
-export const useRadioTokens = createComponentTokensHook('radio', createRadioTokens);
+import{StyleSheet}from"react-native";import{createComponentTokensHook}from"../../design-system";const centered={justifyContent:"center",alignItems:"center"},createRadioTokens=e=>{const{palette:r,spacing:o,fontSize:t,typography:i}=e,n=e.surface??"#ffffff";return{defaults:{iconSize:20,labelPosition:"right",shape:"round",labelDisabled:!1,groupDisabled:!1,groupDirection:"vertical"},layout:{container:{flexDirection:"row",alignItems:"center"},iconWrapper:centered,labelWrapper:{flexShrink:1},icon:centered,label:{includeFontPadding:!1},groupHorizontal:{flexDirection:"row",flexWrap:"wrap",alignItems:"center"},groupVertical:{flexDirection:"column"},groupItem:{flexShrink:0}},colors:{border:r.default[400],background:n,checkedBackground:r.primary[500],disabledBorder:r.default[300],disabledBackground:r.default[100],checkmark:r.primary.foreground??"#ffffff",label:r.default.foreground??"#111827",labelDisabled:r.default[400]},typography:{fontSize:t.md,fontFamily:i.fontFamily,fontWeight:i.weight.medium,lineHeightMultiplier:i.lineHeightMultiplier},sizing:{dotScale:.5},radii:{round:999,square:2},borders:{width:StyleSheet.hairlineWidth},spacing:{gap:o.sm,groupGap:o.sm}}};export const useRadioTokens=createComponentTokensHook("radio",createRadioTokens);

package/dist/es/components/safe-area-view/SafeAreaView.js

@@ -1,40 +1 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useSafeAreaPadding } from '../../hooks/useSafeAreaPadding';
-const SafeAreaViewImpl = ({
-  edge,
-  style,
-  children,
-  onLayout,
-  pointerEvents
-}) => {
-  const pad = useSafeAreaPadding({});
-  if (edge === 'top') return /*#__PURE__*/React.createElement(View, {
-    style: [{
-      width: '100%',
-      minHeight: pad.paddingTop
-    }, style],
-    onLayout: onLayout,
-    pointerEvents: pointerEvents ?? 'none'
-  });
-  if (edge === 'bottom') return /*#__PURE__*/React.createElement(View, {
-    style: [{
-      width: '100%',
-      minHeight: pad.paddingBottom
-    }, style],
-    pointerEvents: pointerEvents ?? 'none'
-  });
-  return /*#__PURE__*/React.createElement(View, {
-    style: [{
-      width: '100%',
-      paddingTop: pad.paddingTop,
-      paddingBottom: pad.paddingBottom,
-      paddingLeft: pad.paddingLeft,
-      paddingRight: pad.paddingRight
-    }, style],
-    onLayout: onLayout,
-    pointerEvents: pointerEvents
-  }, children);
-};
-export const SafeAreaView = /*#__PURE__*/React.memo(SafeAreaViewImpl);
-SafeAreaView.displayName = 'SafeAreaView';
+import React from"react";import{View}from"react-native";import{useSafeAreaPadding}from"../../hooks/useSafeAreaPadding";const SafeAreaViewImpl=({edge:e,style:t,children:a,onLayout:i,pointerEvents:n})=>{const o=useSafeAreaPadding({});return"top"===e?React.createElement(View,{style:[{width:"100%",minHeight:o.paddingTop},t],onLayout:i,pointerEvents:n??"none"}):"bottom"===e?React.createElement(View,{style:[{width:"100%",minHeight:o.paddingBottom},t],pointerEvents:n??"none"}):React.createElement(View,{style:[{width:"100%",paddingTop:o.paddingTop,paddingBottom:o.paddingBottom,paddingLeft:o.paddingLeft,paddingRight:o.paddingRight},t],onLayout:i,pointerEvents:n},a)};export const SafeAreaView=React.memo(SafeAreaViewImpl);SafeAreaView.displayName="SafeAreaView";

package/dist/es/components/safe-area-view/index.js

@@ -1 +1 @@
-export { SafeAreaView } from './SafeAreaView';
+export{SafeAreaView}from"./SafeAreaView";

package/dist/es/components/safe-area-view/tokens.js

@@ -1,5 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createSafeAreaViewTokens = _foundations => {
-  return {};
-};
-export const useSafeAreaViewTokens = createComponentTokensHook('safeAreaView', createSafeAreaViewTokens);
+import{createComponentTokensHook}from"../../design-system";const createSafeAreaViewTokens=e=>({});export const useSafeAreaViewTokens=createComponentTokensHook("safeAreaView",createSafeAreaViewTokens);

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

@@ -1,189 +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, useImperativeHandle, useRef } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { Search as SearchIcon } from 'react-native-system-icon';
-import { useAriaPress, useControllableValue } from '../../hooks';
-import { isText } from '../../utils/validate';
-import { useLocale } from '../config-provider/useLocale';
-import Field from '../field';
-import { useSearchTokens } from './tokens';
-const SearchComponent = (props, ref) => {
-  const locale = useLocale();
-  const {
-    tokensOverride,
-    label,
-    action,
-    actionText,
-    showAction = false,
-    shape: shapeP,
-    background,
-    style: containerStyle,
-    fieldStyle,
-    fieldContentStyle,
-    clearTrigger,
-    clearable = true,
-    leftIcon,
-    rightIcon,
-    errorMessage,
-    onSearch,
-    onCancel,
-    onChangeText,
-    onSubmitEditing,
-    returnKeyType,
-    inputStyle,
-    align,
-    inputAlign,
-    ...restFieldProps
-  } = props;
-  const tokens = useSearchTokens(tokensOverride);
-  const shape = shapeP ?? tokens.defaults.shape;
-  const [value, triggerChange] = useControllableValue(props, {
-    defaultValue: ''
-  });
-  const inputValue = value ?? '';
-  const rInputAlign = align ?? inputAlign;
-  const onChangeTextRef = useRef(onChangeText),
-    onCancelRef = useRef(onCancel),
-    onSearchRef = useRef(onSearch),
-    onSubmitEditingRef = useRef(onSubmitEditing),
-    inputValueRef = useRef(inputValue);
-  onChangeTextRef.current = onChangeText;
-  onCancelRef.current = onCancel;
-  onSearchRef.current = onSearch;
-  onSubmitEditingRef.current = onSubmitEditing;
-  inputValueRef.current = inputValue;
-  const handleChange = useCallback(next => {
-    triggerChange(next);
-    onChangeTextRef.current?.(next);
-  }, [triggerChange]);
-  const handleCancel = useCallback(() => {
-    handleChange('');
-    onCancelRef.current?.();
-  }, [handleChange]);
-  const handleSubmit = useCallback(event => {
-    onSearchRef.current?.(inputValueRef.current);
-    onSubmitEditingRef.current?.(event);
-  }, []);
-  const rBg = background ?? tokens.colors.background;
-  const rLeftIcon = leftIcon ?? /*#__PURE__*/React.createElement(SearchIcon, {
-    size: tokens.icon.size,
-    fill: tokens.colors.icon,
-    color: tokens.colors.icon
-  });
-  const rClearTrigger = clearTrigger ?? tokens.defaults.clearTrigger;
-  const rReturnKey = returnKeyType ?? 'search';
-  const showAct = !!action || showAction;
-  const customActTxt = /*#__PURE__*/React.isValidElement(actionText);
-  const renderCancelAct = showAct && !action && !customActTxt;
-  const radius = shape === 'round' ? tokens.radius.round : tokens.radius.square;
-  const inputRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    focus: () => inputRef.current?.focus(),
-    blur: () => inputRef.current?.blur(),
-    clear: () => handleChange('')
-  }), [handleChange]);
-  const cancelActPress = useAriaPress({
-    disabled: !renderCancelAct,
-    onPress: handleCancel,
-    extraProps: {
-      accessibilityRole: 'button',
-      testID: 'rnsu-search-action'
-    }
-  });
-  const ctrStyles = [S.ctr, {
-    paddingHorizontal: tokens.spacing.paddingHorizontal,
-    paddingVertical: tokens.spacing.paddingVertical,
-    backgroundColor: rBg
-  }, containerStyle];
-  const cntStyles = [S.cnt, {
-    borderRadius: radius,
-    paddingHorizontal: tokens.spacing.contentPaddingHorizontal,
-    paddingVertical: tokens.spacing.contentPaddingVertical,
-    backgroundColor: tokens.colors.contentBackground
-  }];
-  const labelEl = !label ? null : isText(label) ? /*#__PURE__*/React.createElement(Text, {
-    style: {
-      marginRight: tokens.spacing.labelGap,
-      color: tokens.colors.label,
-      fontSize: tokens.typography.label,
-      fontWeight: tokens.typography.labelWeight
-    }
-  }, label) : /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginRight: tokens.spacing.labelGap
-    }
-  }, label);
-  const actEl = action ? /*#__PURE__*/React.createElement(View, {
-    style: [S.act, {
-      marginLeft: tokens.spacing.actionGap
-    }]
-  }, action) : !showAct ? null : customActTxt ? /*#__PURE__*/React.createElement(View, {
-    style: [S.act, {
-      marginLeft: tokens.spacing.actionGap
-    }]
-  }, actionText) : /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [S.act, {
-      marginLeft: tokens.spacing.actionGap,
-      opacity: cancelActPress.states.pressed ? tokens.opacity.actionPressed : 1
-    }]
-  }, cancelActPress.interactionProps), /*#__PURE__*/React.createElement(Text, {
-    style: {
-      color: tokens.colors.action,
-      fontSize: tokens.typography.action,
-      fontWeight: tokens.typography.actionWeight
-    }
-  }, actionText ?? locale.cancel));
-  return /*#__PURE__*/React.createElement(View, {
-    style: ctrStyles
-  }, /*#__PURE__*/React.createElement(View, {
-    style: cntStyles
-  }, labelEl, /*#__PURE__*/React.createElement(View, {
-    style: S.field
-  }, /*#__PURE__*/React.createElement(Field, _extends({
-    ref: inputRef,
-    type: "search",
-    value: inputValue,
-    onChangeText: handleChange,
-    clearable: clearable,
-    clearTrigger: rClearTrigger,
-    leftIcon: rLeftIcon,
-    rightIcon: rightIcon,
-    center: !errorMessage,
-    errorMessage: errorMessage,
-    inputAlign: rInputAlign,
-    border: false,
-    style: [{
-      paddingHorizontal: tokens.spacing.none,
-      paddingVertical: tokens.spacing.none
-    }, fieldStyle],
-    contentStyle: [{
-      paddingVertical: tokens.spacing.none
-    }, fieldContentStyle],
-    inputStyle: [{
-      paddingVertical: tokens.spacing.none
-    }, inputStyle],
-    onSubmitEditing: handleSubmit,
-    returnKeyType: rReturnKey
-  }, restFieldProps)))), actEl);
-};
-const SearchForwardRef = /*#__PURE__*/React.forwardRef(SearchComponent);
-SearchForwardRef.displayName = 'Search';
-export const Search = /*#__PURE__*/React.memo(SearchForwardRef);
-const S = StyleSheet.create({
-  ctr: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  cnt: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  field: {
-    flex: 1
-  },
-  act: {
-    justifyContent: 'center'
-  }
-});
-export default Search;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}import React,{useCallback,useImperativeHandle,useRef}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{Search as SearchIcon}from"react-native-system-icon";import{useAriaPress,useControllableValue}from"../../hooks";import{isText}from"../../utils/validate";import{useLocale}from"../config-provider/useLocale";import Field from"../field";import{useSearchTokens}from"./tokens";const SearchComponent=(e,t)=>{const a=useLocale(),{tokensOverride:r,label:n,action:c,actionText:o,showAction:i=!1,shape:l,background:s,style:u,fieldStyle:d,fieldContentStyle:p,clearTrigger:g,clearable:f=!0,leftIcon:m,rightIcon:h,errorMessage:y,onSearch:b,onCancel:R,onChangeText:x,onSubmitEditing:V,returnKeyType:w,inputStyle:C,align:T,inputAlign:k,...E}=e,v=useSearchTokens(r),I=l??v.defaults.shape,[P,z]=useControllableValue(e,{defaultValue:""}),H=P??"",L=T??k,A=useRef(x),F=useRef(R),G=useRef(b),_=useRef(V),O=useRef(H);A.current=x,F.current=R,G.current=b,_.current=V,O.current=H;const W=useCallback(e=>{z(e),A.current?.(e)},[z]),j=useCallback(()=>{W(""),F.current?.()},[W]),D=useCallback(e=>{G.current?.(O.current),_.current?.(e)},[]),K=s??v.colors.background,M=m??React.createElement(SearchIcon,{size:v.icon.size,fill:v.colors.icon,color:v.colors.icon}),q=g??v.defaults.clearTrigger,B=w??"search",N=!!c||i,J=React.isValidElement(o),Q=N&&!c&&!J,U="round"===I?v.radius.round:v.radius.square,X=useRef(null);useImperativeHandle(t,()=>({focus:()=>X.current?.focus(),blur:()=>X.current?.blur(),clear:()=>W("")}),[W]);const Y=useAriaPress({disabled:!Q,onPress:j,extraProps:{accessibilityRole:"button",testID:"rnsu-search-action"}}),Z=[S.ctr,{paddingHorizontal:v.spacing.paddingHorizontal,paddingVertical:v.spacing.paddingVertical,backgroundColor:K},u],$=[S.cnt,{borderRadius:U,paddingHorizontal:v.spacing.contentPaddingHorizontal,paddingVertical:v.spacing.contentPaddingVertical,backgroundColor:v.colors.contentBackground}],ee=n?isText(n)?React.createElement(Text,{style:{marginRight:v.spacing.labelGap,color:v.colors.label,fontSize:v.typography.label,fontWeight:v.typography.labelWeight}},n):React.createElement(View,{style:{marginRight:v.spacing.labelGap}},n):null,te=c?React.createElement(View,{style:[S.act,{marginLeft:v.spacing.actionGap}]},c):N?J?React.createElement(View,{style:[S.act,{marginLeft:v.spacing.actionGap}]},o):React.createElement(Pressable,_extends({style:[S.act,{marginLeft:v.spacing.actionGap,opacity:Y.states.pressed?v.opacity.actionPressed:1}]},Y.interactionProps),React.createElement(Text,{style:{color:v.colors.action,fontSize:v.typography.action,fontWeight:v.typography.actionWeight}},o??a.cancel)):null;return React.createElement(View,{style:Z},React.createElement(View,{style:$},ee,React.createElement(View,{style:S.field},React.createElement(Field,_extends({ref:X,type:"search",value:H,onChangeText:W,clearable:f,clearTrigger:q,leftIcon:M,rightIcon:h,center:!y,errorMessage:y,inputAlign:L,border:!1,style:[{paddingHorizontal:v.spacing.none,paddingVertical:v.spacing.none},d],contentStyle:[{paddingVertical:v.spacing.none},p],inputStyle:[{paddingVertical:v.spacing.none},C],onSubmitEditing:D,returnKeyType:B},E)))),te)},SearchForwardRef=React.forwardRef(SearchComponent);SearchForwardRef.displayName="Search";export const Search=React.memo(SearchForwardRef);const S=StyleSheet.create({ctr:{flexDirection:"row",alignItems:"center"},cnt:{flex:1,flexDirection:"row",alignItems:"center"},field:{flex:1},act:{justifyContent:"center"}});export default Search;

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

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