react-native-system-ui 1.0.2 → 1.0.4

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

@@ -1,131 +1 @@
-import { createComponentTokensHook } from "../../design-system";
-export const createCascaderTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    radii
-  } = foundations;
-  const surfaceMuted = palette.default[100];
-  const placeholderText = "Select";
-  return {
-    defaults: {
-      placeholder: placeholderText,
-      title: placeholderText,
-      showHeader: true,
-      closeable: true,
-      swipeable: true,
-      poppable: false,
-      closeOnClickOverlay: true,
-      closeOnFinish: true,
-      popupPlacement: "bottom",
-      popupRound: true,
-      loadingText: "Loading..."
-    },
-    layout: {
-      container: {
-        borderRadius: 0,
-        width: "100%"
-      },
-      header: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        paddingVertical: 0
-      },
-      title: {
-        lineHeight: 20,
-        includeFontPadding: false
-      },
-      closeButton: {},
-      tabsWrapper: {
-        width: "100%"
-      },
-      tabsContentStatic: {
-        width: "100%"
-      },
-      tabsItem: {
-        alignItems: "center"
-      },
-      tabsTitle: {
-        includeFontPadding: false
-      },
-      tabTitleNode: {
-        includeFontPadding: false
-      },
-      optionList: {
-        flexGrow: 0
-      },
-      option: {
-        justifyContent: "center"
-      },
-      optionContent: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center"
-      },
-      optionText: {
-        lineHeight: 20,
-        includeFontPadding: false
-      },
-      optionTextActive: {},
-      optionLabel: {
-        flex: 1
-      },
-      empty: {
-        textAlign: "center"
-      },
-      inlineChildren: {}
-    },
-    colors: {
-      background: "#ffffff",
-      headerText: palette.default[900],
-      placeholder: palette.default[500],
-      closeIcon: palette.default[300],
-      closeIconActive: palette.default[500],
-      tabText: palette.default[900],
-      tabActive: palette.primary[500],
-      tabInactive: palette.default[500],
-      optionText: palette.default[900],
-      optionDisabled: palette.default[300],
-      optionActiveBackground: surfaceMuted,
-      optionActiveText: palette.primary[500],
-      divider: palette.default[200]
-    },
-    typography: {
-      titleSize: 16,
-      titleWeight: "500",
-      tabsTitleSize: 14,
-      tabTitlePlaceholderWeight: "400",
-      tabTitleWeight: "500",
-      optionTextSize: 14,
-      optionTextActiveWeight: "500",
-      emptyTextSize: 14
-    },
-    sizing: {
-      indicatorHeight: 3,
-      optionMinHeight: 40,
-      optionListHeight: 384,
-      headerHeight: 48,
-      closeIconSize: 22,
-      selectedIconSize: 18
-    },
-    radii: {
-      option: radii.sm
-    },
-    spacing: {
-      headerPaddingHorizontal: spacing.lg,
-      tabNavPaddingHorizontal: 6,
-      tabNavPaddingVertical: 2,
-      tabPaddingHorizontal: 10,
-      optionPaddingVertical: 10,
-      optionPaddingHorizontal: spacing.lg,
-      optionListPaddingTop: 6,
-      optionListPaddingBottom: 0,
-      closeButtonMarginLeft: 8,
-      optionLabelMarginRight: 12,
-      emptyPaddingVertical: 24,
-      inlineChildrenPaddingVertical: 12
-    }
-  };
-};
-export const useCascaderTokens = createComponentTokensHook("cascader", createCascaderTokens);
+import{createComponentTokensHook}from"../../design-system";export const createCascaderTokens=e=>{const{palette:t,spacing:i,radii:o}=e,n=e.surface??"#ffffff",a=t.default[100],d="Select";return{defaults:{placeholder:d,title:d,showHeader:!0,closeable:!0,swipeable:!0,poppable:!1,closeOnClickOverlay:!0,closeOnFinish:!0,popupPlacement:"bottom",popupRound:!0,loadingText:"Loading..."},layout:{container:{borderRadius:0,width:"100%"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:0},title:{lineHeight:20,includeFontPadding:!1},closeButton:{},tabsWrapper:{width:"100%"},tabsContentStatic:{width:"100%"},tabsItem:{alignItems:"center"},tabsTitle:{includeFontPadding:!1},tabTitleNode:{includeFontPadding:!1},optionList:{flexGrow:0},option:{justifyContent:"center"},optionContent:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},optionText:{lineHeight:20,includeFontPadding:!1},optionTextActive:{},optionLabel:{flex:1},empty:{textAlign:"center"},inlineChildren:{}},colors:{background:n,headerText:t.default[900],placeholder:t.default[500],closeIcon:t.default[300],closeIconActive:t.default[500],tabText:t.default[900],tabActive:t.primary[500],tabInactive:t.default[500],optionText:t.default[900],optionDisabled:t.default[300],optionActiveBackground:a,optionActiveText:t.primary[500],divider:t.default[200]},typography:{titleSize:16,titleWeight:"500",tabsTitleSize:14,tabTitlePlaceholderWeight:"400",tabTitleWeight:"500",optionTextSize:14,optionTextActiveWeight:"500",emptyTextSize:14},sizing:{indicatorHeight:3,optionMinHeight:40,optionListHeight:384,headerHeight:48,closeIconSize:22,selectedIconSize:18},radii:{option:o.sm},spacing:{headerPaddingHorizontal:i.lg,tabNavPaddingHorizontal:6,tabNavPaddingVertical:2,tabPaddingHorizontal:10,optionPaddingVertical:10,optionPaddingHorizontal:i.lg,optionListPaddingTop:6,optionListPaddingBottom:0,closeButtonMarginLeft:8,optionLabelMarginRight:12,emptyPaddingVertical:24,inlineChildrenPaddingVertical:12}}};export const useCascaderTokens=createComponentTokensHook("cascader",createCascaderTokens);

package/dist/es/components/cascader/useCascaderExtend.js

@@ -1,32 +1 @@
-const getDepth = (options, childrenKey) => {
-  let max = 1;
-  const traverse = (opts, level) => {
-    if (!opts?.length) return;
-    if (level > max) max = level;
-    opts.forEach(o => {
-      const has = Object.prototype.hasOwnProperty.call(o, childrenKey);
-      if (has && level + 1 > max) max = level + 1;
-      const ch = o[childrenKey];
-      if (ch?.length) traverse(ch, level + 1);
-    });
-  };
-  traverse(options, 1);
-  return max;
-};
-export const useCascaderExtend = (options = [], keys, value) => {
-  const depth = getDepth(options, keys.childrenKey);
-  const tabs = !value?.length ? [options] : value.reduce((acc, val, i) => {
-    if (val == null) return acc;
-    const cur = acc[i];
-    if (!cur) return acc;
-    const ch = cur.find(o => o[keys.valueKey] === value[i])?.[keys.childrenKey];
-    if (ch) acc.push(ch);
-    return acc;
-  }, [options]);
-  const items = !value?.length ? [] : value.map((val, i) => tabs[i]?.find(o => o[keys.valueKey] === val));
-  return {
-    tabs,
-    items,
-    depth
-  };
-};
+const getDepth=(e,t)=>{let n=1;const r=(e,c)=>{e?.length&&(c>n&&(n=c),e.forEach(e=>{Object.prototype.hasOwnProperty.call(e,t)&&c+1>n&&(n=c+1);const l=e[t];l?.length&&r(l,c+1)}))};return r(e,1),n};export const useCascaderExtend=(e=[],t,n)=>{const r=getDepth(e,t.childrenKey),c=n?.length?n.reduce((e,r,c)=>{if(null==r)return e;const l=e[c];if(!l)return e;const s=l.find(e=>e[t.valueKey]===n[c])?.[t.childrenKey];return s&&e.push(s),e},[e]):[e],l=n?.length?n.map((e,n)=>c[n]?.find(n=>n[t.valueKey]===e)):[];return{tabs:c,items:l,depth:r}};

package/dist/es/components/cell/Cell.js

@@ -1,156 +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, { useContext, useMemo } from 'react';
-import { Pressable, Text, View } from 'react-native';
-import { Arrow } from 'react-native-system-icon';
-import { useAriaPress, useHairline } from '../../hooks';
-import { isRenderable, isText, renderTextOrNode } from '../../utils';
-import { useDirection } from '../config-provider/useDirection';
-import { CellGroupContext } from './CellContext';
-import { useCellTokens } from './tokens';
-const CellImpl = (props, ref) => {
-  const {
-    title,
-    value,
-    label,
-    extra,
-    icon,
-    rightIcon,
-    border: borderP,
-    clickable,
-    isLink,
-    required,
-    center,
-    size: sizeP,
-    arrowDirection: arrP,
-    tokensOverride,
-    children,
-    style,
-    titleStyle,
-    valueStyle,
-    labelStyle,
-    contentStyle,
-    onPress,
-    disabled,
-    android_ripple,
-    ...rest
-  } = props;
-  const tokens = useCellTokens(tokensOverride);
-  const dir = useDirection();
-  const grp = useContext(CellGroupContext);
-  const border = borderP ?? tokens.defaults.border;
-  const size = sizeP ?? tokens.defaults.size;
-  const arrRaw = arrP ?? tokens.defaults.arrowDirection;
-  const arr = dir === 'rtl' ? arrRaw === 'left' ? 'right' : arrRaw === 'right' ? 'left' : arrRaw : arrRaw;
-  const lh = tokens.typography.lineHeight;
-  const hasT = isRenderable(title);
-  const hasV = isRenderable(value);
-  const hasL = isRenderable(label);
-  const hasE = isRenderable(extra);
-  const hasCh = isRenderable(children);
-  const hasI = isRenderable(icon);
-  const hasRI = isRenderable(rightIcon);
-  const onlyV = !hasT && !hasCh;
-  const showB = border && grp.border && !grp.isLast;
-  const showArr = !!isLink || !!clickable;
-  const inter = !disabled && (clickable || !!onPress || !!rest.onLongPress || !!rest.onPressIn || !!rest.onPressOut);
-  const large = size === 'large';
-  const ctrStyle = useMemo(() => [large ? tokens.layout.containerLarge : tokens.layout.container, center && tokens.layout.center, style], [size, center, tokens.layout, style]);
-  const hair = useHairline({
-    show: showB,
-    containerStyle: ctrStyle,
-    color: tokens.colors.border,
-    width: tokens.borders.width,
-    defaultPaddingHorizontal: tokens.sizing.paddingHorizontal
-  });
-  const cntStyle = useMemo(() => [tokens.layout.customContent, {
-    justifyContent: center ? 'center' : 'flex-start'
-  }, contentStyle], [center, tokens.layout.customContent, contentStyle]);
-  const {
-    interactionProps,
-    states
-  } = useAriaPress({
-    disabled: !inter,
-    onPress: onPress ?? undefined
-  });
-  const Comp = inter ? Pressable : View;
-  const compProps = inter ? {
-    android_ripple: android_ripple ?? {
-      color: tokens.colors.ripple
-    },
-    accessibilityRole: 'button',
-    ...interactionProps
-  } : {};
-  return /*#__PURE__*/React.createElement(Comp, _extends({
-    ref: ref,
-    style: [ctrStyle, inter && states.pressed && {
-      opacity: tokens.defaults.activeOpacity
-    }]
-  }, compProps, rest), hasI && /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.iconWrapper, {
-      marginRight: tokens.spacing.iconGap,
-      minHeight: tokens.sizing.iconSize,
-      minWidth: tokens.sizing.iconSize
-    }]
-  }, icon), /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.body
-  }, (hasT || required) && /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.titleRow, {
-      minHeight: lh
-    }]
-  }, required && /*#__PURE__*/React.createElement(Text, {
-    style: {
-      color: tokens.colors.required,
-      marginRight: tokens.spacing.iconGap / 2
-    }
-  }, "*"), hasT && /*#__PURE__*/React.createElement(View, {
-    style: titleStyle
-  }, renderTextOrNode(title, [{
-    color: tokens.colors.title,
-    fontSize: large ? tokens.typography.largeTitleSize : tokens.typography.titleSize,
-    fontWeight: tokens.typography.titleWeight
-  }, titleStyle], {
-    numberOfLines: 1
-  }))), hasL && /*#__PURE__*/React.createElement(View, {
-    style: [{
-      marginTop: tokens.spacing.labelMarginTop
-    }, labelStyle]
-  }, renderTextOrNode(label, [{
-    color: tokens.colors.label,
-    fontSize: large ? tokens.typography.largeLabelSize : tokens.typography.labelSize
-  }, labelStyle], {
-    numberOfLines: 2
-  }))), /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.valueContainer, {
-      minHeight: lh,
-      marginLeft: tokens.spacing.valueGap
-    }, !center && onlyV && tokens.layout.valueOnlyContainer, center && tokens.layout.valueCenter]
-  }, hasV ? /*#__PURE__*/React.createElement(View, {
-    style: cntStyle
-  }, renderTextOrNode(value, [tokens.layout.value, onlyV && tokens.layout.valueOnly, {
-    color: tokens.colors.value,
-    fontSize: large ? tokens.typography.largeValueSize : tokens.typography.valueSize
-  }, valueStyle], {
-    numberOfLines: 1
-  })) : hasCh && /*#__PURE__*/React.createElement(View, {
-    style: cntStyle
-  }, isText(children) ? renderTextOrNode(children, [tokens.layout.value, {
-    color: tokens.colors.value,
-    fontSize: large ? tokens.typography.largeValueSize : tokens.typography.valueSize
-  }, valueStyle]) : children)), hasE && /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginLeft: tokens.spacing.extraGap
-    }
-  }, renderTextOrNode(extra, {
-    marginLeft: tokens.spacing.extraGap,
-    color: tokens.colors.value,
-    fontSize: large ? tokens.typography.largeValueSize : tokens.typography.valueSize
-  })), hasRI ? rightIcon : showArr && /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.rightIconWrapper, tokens.layout.arrowTransforms[arr]]
-  }, /*#__PURE__*/React.createElement(Arrow, {
-    size: tokens.sizing.arrowSize,
-    fill: tokens.colors.arrow
-  })), hair);
-};
-const CellForwardRef = /*#__PURE__*/React.forwardRef(CellImpl);
-CellForwardRef.displayName = 'Cell';
-export const Cell = /*#__PURE__*/React.memo(CellForwardRef);
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}import React,{useContext,useMemo}from"react";import{Pressable,Text,View}from"react-native";import{Arrow}from"react-native-system-icon";import{useAriaPress,useHairline}from"../../hooks";import{isRenderable,isText,renderTextOrNode}from"../../utils";import{useDirection}from"../config-provider/useDirection";import{CellGroupContext}from"./CellContext";import{useCellTokens}from"./tokens";const CellImpl=(e,t)=>{const{title:r,value:o,label:l,extra:a,icon:i,rightIcon:n,border:s,clickable:c,isLink:u,required:p,center:y,size:d,arrowDirection:g,tokensOverride:m,children:f,style:b,titleStyle:h,valueStyle:R,labelStyle:w,contentStyle:z,onPress:v,disabled:x,android_ripple:C,...S}=e,O=useCellTokens(m),T=useDirection(),V=useContext(CellGroupContext),E=s??O.defaults.border,P=d??O.defaults.size,L=g??O.defaults.arrowDirection,H="rtl"===T?"left"===L?"right":"right"===L?"left":L:L,k=O.typography.lineHeight,G=isRenderable(r),N=isRenderable(o),_=isRenderable(l),D=isRenderable(a),I=isRenderable(f),W=isRenderable(i),A=isRenderable(n),M=!G&&!I,j=E&&V.border&&!V.isLast,F=!!u||!!c,q=!x&&(c||!!v||!!S.onLongPress||!!S.onPressIn||!!S.onPressOut),B="large"===P,J=useMemo(()=>[B?O.layout.containerLarge:O.layout.container,y&&O.layout.center,b],[P,y,O.layout,b]),K=useHairline({show:j,containerStyle:J,color:O.colors.border,width:O.borders.width,defaultPaddingHorizontal:O.sizing.paddingHorizontal}),Q=useMemo(()=>[O.layout.customContent,{justifyContent:y?"center":"flex-start"},z],[y,O.layout.customContent,z]),{interactionProps:U,states:X}=useAriaPress({disabled:!q,onPress:v??void 0}),Y=q?Pressable:View,Z=q?{android_ripple:C??{color:O.colors.ripple},accessibilityRole:"button",...U}:{};return React.createElement(Y,_extends({ref:t,style:[J,q&&X.pressed&&{opacity:O.defaults.activeOpacity}]},Z,S),W&&React.createElement(View,{style:[O.layout.iconWrapper,{marginRight:O.spacing.iconGap,minHeight:O.sizing.iconSize,minWidth:O.sizing.iconSize}]},i),React.createElement(View,{style:O.layout.body},(G||p)&&React.createElement(View,{style:[O.layout.titleRow,{minHeight:k}]},p&&React.createElement(Text,{style:{color:O.colors.required,marginRight:O.spacing.iconGap/2}},"*"),G&&React.createElement(View,{style:h},renderTextOrNode(r,[{color:O.colors.title,fontSize:B?O.typography.largeTitleSize:O.typography.titleSize,fontWeight:O.typography.titleWeight},h],{numberOfLines:1}))),_&&React.createElement(View,{style:[{marginTop:O.spacing.labelMarginTop},w]},renderTextOrNode(l,[{color:O.colors.label,fontSize:B?O.typography.largeLabelSize:O.typography.labelSize},w],{numberOfLines:2}))),React.createElement(View,{style:[O.layout.valueContainer,{minHeight:k,marginLeft:O.spacing.valueGap},!y&&M&&O.layout.valueOnlyContainer,y&&O.layout.valueCenter]},N?React.createElement(View,{style:Q},renderTextOrNode(o,[O.layout.value,M&&O.layout.valueOnly,{color:O.colors.value,fontSize:B?O.typography.largeValueSize:O.typography.valueSize},R],{numberOfLines:1})):I&&React.createElement(View,{style:Q},isText(f)?renderTextOrNode(f,[O.layout.value,{color:O.colors.value,fontSize:B?O.typography.largeValueSize:O.typography.valueSize},R]):f)),D&&React.createElement(View,{style:{marginLeft:O.spacing.extraGap}},renderTextOrNode(a,{marginLeft:O.spacing.extraGap,color:O.colors.value,fontSize:B?O.typography.largeValueSize:O.typography.valueSize})),A?n:F&&React.createElement(View,{style:[O.layout.rightIconWrapper,O.layout.arrowTransforms[H]]},React.createElement(Arrow,{size:O.sizing.arrowSize,fill:O.colors.arrow})),K)},CellForwardRef=React.forwardRef(CellImpl);CellForwardRef.displayName="Cell";export const Cell=React.memo(CellForwardRef);

package/dist/es/components/cell/CellContext.js

@@ -1,6 +1 @@
-import React from 'react';
-export const CellGroupContext = /*#__PURE__*/React.createContext({
-  border: true,
-  inset: false,
-  isLast: false
-});
+import React from"react";export const CellGroupContext=React.createContext({border:!0,inset:!1,isLast:!1});

package/dist/es/components/cell/CellGroup.js

@@ -1,81 +1 @@
-import React, { useMemo } from 'react';
-import { Text, View } from 'react-native';
-import { createHairlineView } from '../../utils';
-import { Cell as CellBase } from './Cell';
-import { CellGroupContext } from './CellContext';
-import { useCellTokens } from './tokens';
-const isCellElement = child => {
-  if (! /*#__PURE__*/React.isValidElement(child)) return false;
-  if (child.type === CellBase) return true;
-  return child.type.displayName === 'Cell';
-};
-export const CellGroup = /*#__PURE__*/React.memo(({
-  children,
-  title,
-  border,
-  inset,
-  card,
-  style,
-  bodyStyle,
-  tokensOverride
-}) => {
-  const tokens = useCellTokens(tokensOverride);
-  const rBorder = border ?? tokens.defaults.groupBorder;
-  const showInset = (inset ?? tokens.defaults.groupInset) || (card ?? tokens.defaults.groupCard);
-  const rCard = card ?? tokens.defaults.groupCard;
-  const showOuter = rBorder && !showInset;
-  const chArr = useMemo(() => React.Children.toArray(children), [children]);
-  const lastIdx = useMemo(() => {
-    for (let i = chArr.length - 1; i >= 0; i--) {
-      if (isCellElement(chArr[i])) return i;
-    }
-    ;
-    return -1;
-  }, [chArr]);
-  const ctrStyle = useMemo(() => [{
-    marginBottom: rCard ? 0 : tokens.sizing.groupMarginBottom
-  }, style], [rCard, style, tokens.sizing.groupMarginBottom]);
-  const insStyle = useMemo(() => ({
-    overflow: 'hidden',
-    borderRadius: tokens.radii.groupInset,
-    marginHorizontal: tokens.sizing.groupInsetMarginHorizontal,
-    backgroundColor: tokens.colors.background
-  }), [tokens.colors.background, tokens.radii.groupInset, tokens.sizing.groupInsetMarginHorizontal]);
-  const bodyStyleArr = [{
-    backgroundColor: tokens.colors.groupBodyBackground
-  }, showInset ? insStyle : null, rCard ? tokens.layout.groupCardShadow : null, bodyStyle];
-  const rTitle = useMemo(() => title ? /*#__PURE__*/React.createElement(Text, {
-    style: {
-      color: tokens.colors.groupTitle,
-      fontSize: tokens.typography.groupTitleSize,
-      paddingHorizontal: tokens.sizing.groupTitlePaddingHorizontal,
-      paddingVertical: tokens.sizing.groupTitlePaddingVertical
-    }
-  }, title) : null, [title, tokens.colors.groupTitle, tokens.sizing.groupTitlePaddingHorizontal, tokens.sizing.groupTitlePaddingVertical, tokens.typography.groupTitleSize]);
-  const rCh = useMemo(() => chArr.map((ch, i) => {
-    const key = /*#__PURE__*/React.isValidElement(ch) && ch.key != null ? ch.key : i;
-    return /*#__PURE__*/React.createElement(CellGroupContext.Provider, {
-      key: key,
-      value: {
-        border: rBorder,
-        inset: showInset,
-        isLast: isCellElement(ch) ? i === lastIdx : false
-      }
-    }, ch);
-  }), [chArr, lastIdx, rBorder, showInset]);
-  return /*#__PURE__*/React.createElement(View, {
-    style: ctrStyle
-  }, rTitle, /*#__PURE__*/React.createElement(View, {
-    style: bodyStyleArr
-  }, rCh, showOuter ? /*#__PURE__*/React.createElement(React.Fragment, null, ['top', 'bottom'].map(pos => /*#__PURE__*/React.createElement(View, {
-    key: pos,
-    style: createHairlineView({
-      position: pos,
-      color: tokens.colors.border,
-      left: 0,
-      right: 0,
-      enabled: tokens.borders.width > 0,
-      width: tokens.borders.width
-    })
-  }))) : null));
-});
+import React,{useMemo}from"react";import{Text,View}from"react-native";import{createHairlineView}from"../../utils";import{Cell as CellBase}from"./Cell";import{CellGroupContext}from"./CellContext";import{useCellTokens}from"./tokens";const isCellElement=e=>!!React.isValidElement(e)&&(e.type===CellBase||"Cell"===e.type.displayName);export const CellGroup=React.memo(({children:e,title:o,border:t,inset:r,card:l,style:i,bodyStyle:n,tokensOverride:a})=>{const s=useCellTokens(a),u=t??s.defaults.groupBorder,d=(r??s.defaults.groupInset)||(l??s.defaults.groupCard),g=l??s.defaults.groupCard,c=u&&!d,p=useMemo(()=>React.Children.toArray(e),[e]),m=useMemo(()=>{for(let e=p.length-1;e>=0;e--)if(isCellElement(p[e]))return e;return-1},[p]),C=useMemo(()=>[{marginBottom:g?0:s.sizing.groupMarginBottom},i],[g,i,s.sizing.groupMarginBottom]),y=useMemo(()=>({overflow:"hidden",borderRadius:s.radii.groupInset,marginHorizontal:s.sizing.groupInsetMarginHorizontal,backgroundColor:s.colors.background}),[s.colors.background,s.radii.groupInset,s.sizing.groupInsetMarginHorizontal]),z=[{backgroundColor:s.colors.groupBodyBackground},d?y:null,g?s.layout.groupCardShadow:null,n],f=useMemo(()=>o?React.createElement(Text,{style:{color:s.colors.groupTitle,fontSize:s.typography.groupTitleSize,paddingHorizontal:s.sizing.groupTitlePaddingHorizontal,paddingVertical:s.sizing.groupTitlePaddingVertical}},o):null,[o,s.colors.groupTitle,s.sizing.groupTitlePaddingHorizontal,s.sizing.groupTitlePaddingVertical,s.typography.groupTitleSize]),b=useMemo(()=>p.map((e,o)=>{const t=React.isValidElement(e)&&null!=e.key?e.key:o;return React.createElement(CellGroupContext.Provider,{key:t,value:{border:u,inset:d,isLast:!!isCellElement(e)&&o===m}},e)}),[p,m,u,d]);return React.createElement(View,{style:C},f,React.createElement(View,{style:z},b,c?React.createElement(React.Fragment,null,["top","bottom"].map(e=>React.createElement(View,{key:e,style:createHairlineView({position:e,color:s.colors.border,left:0,right:0,enabled:s.borders.width>0,width:s.borders.width})}))):null))});

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

@@ -1,8 +1 @@
-import { Cell as CellBase } from './Cell';
-import { CellGroup } from './CellGroup';
-const Cell = Object.assign(CellBase, {
-  Group: CellGroup
-});
-export default Cell;
-export { Cell };
-export { CellGroup };
+import{Cell as CellBase}from"./Cell";import{CellGroup}from"./CellGroup";const Cell=Object.assign(CellBase,{Group:CellGroup});export default Cell;export{Cell};export{CellGroup};

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

@@ -1,160 +1 @@
-import { StyleSheet } from 'react-native';
-import { createComponentTokensHook } from '../../design-system';
-export const createCellTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize,
-    typography,
-    radii
-  } = foundations;
-  const background = '#ffffff';
-  const paddingVertical = 10;
-  const largePaddingVertical = 14;
-  const paddingHorizontal = 16;
-  const arrowSize = 16;
-  const iconSize = 16;
-  const baseContainerLayout = {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    width: '100%',
-    backgroundColor: background,
-    paddingHorizontal
-  };
-  return {
-    defaults: {
-      border: true,
-      size: 'normal',
-      arrowDirection: 'right',
-      activeOpacity: 0.6,
-      groupBorder: true,
-      groupInset: false,
-      groupCard: false
-    },
-    layout: {
-      container: {
-        ...baseContainerLayout,
-        paddingVertical
-      },
-      containerLarge: {
-        ...baseContainerLayout,
-        paddingVertical: largePaddingVertical
-      },
-      center: {
-        alignItems: 'center'
-      },
-      body: {
-        minWidth: 0,
-        flexDirection: 'column'
-      },
-      titleRow: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      },
-      value: {
-        textAlign: 'right'
-      },
-      valueOnly: {
-        textAlign: 'left'
-      },
-      valueContainer: {
-        flex: 1,
-        flexShrink: 1,
-        minWidth: 0,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'flex-end'
-      },
-      valueOnlyContainer: {
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start'
-      },
-      valueCenter: {
-        alignItems: 'center'
-      },
-      customContent: {
-        flexShrink: 1,
-        minWidth: 0
-      },
-      iconWrapper: {
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
-      rightIconWrapper: {
-        alignSelf: 'center',
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
-      hairline: {
-        position: 'absolute',
-        bottom: 0
-      },
-      groupCardShadow: {},
-      arrowTransforms: {
-        left: {
-          transform: [{
-            rotate: '180deg'
-          }]
-        },
-        right: {},
-        up: {
-          transform: [{
-            rotate: '-90deg'
-          }]
-        },
-        down: {
-          transform: [{
-            rotate: '90deg'
-          }]
-        }
-      }
-    },
-    colors: {
-      background,
-      ripple: palette.default[100],
-      title: palette.default[800],
-      label: palette.default[500],
-      value: palette.default[600],
-      required: palette.danger[500],
-      border: palette.default[200],
-      arrow: palette.default[400],
-      groupTitle: palette.default[500],
-      groupBodyBackground: background
-    },
-    typography: {
-      titleSize: fontSize.sm,
-      lineHeight: 24,
-      titleWeight: typography.weight.medium,
-      largeTitleSize: fontSize.lg,
-      labelSize: fontSize.xs,
-      largeLabelSize: fontSize.sm,
-      valueSize: fontSize.sm,
-      largeValueSize: fontSize.md,
-      groupTitleSize: fontSize.sm
-    },
-    sizing: {
-      paddingVertical,
-      paddingHorizontal,
-      largePaddingVertical,
-      arrowSize,
-      iconSize,
-      groupMarginBottom: spacing.md,
-      groupTitlePaddingHorizontal: spacing.lg,
-      groupTitlePaddingVertical: spacing.sm,
-      groupInsetMarginHorizontal: spacing.lg
-    },
-    radii: {
-      groupInset: radii.lg
-    },
-    borders: {
-      width: StyleSheet.hairlineWidth
-    },
-    spacing: {
-      iconGap: spacing.sm,
-      valueGap: spacing.none,
-      extraGap: spacing.sm,
-      labelMarginTop: spacing.xs
-    }
-  };
-};
-export const useCellTokens = createComponentTokensHook('cell', createCellTokens);
+import{StyleSheet}from"react-native";import{createComponentTokensHook}from"../../design-system";export const createCellTokens=e=>{const{palette:t,spacing:r,fontSize:i,typography:n,radii:a}=e,o=e.surface??"#ffffff",l={flexDirection:"row",alignItems:"flex-start",width:"100%",backgroundColor:o,paddingHorizontal:16};return{defaults:{border:!0,size:"normal",arrowDirection:"right",activeOpacity:.6,groupBorder:!0,groupInset:!1,groupCard:!1},layout:{container:{...l,paddingVertical:10},containerLarge:{...l,paddingVertical:14},center:{alignItems:"center"},body:{minWidth:0,flexDirection:"column"},titleRow:{flexDirection:"row",alignItems:"center"},value:{textAlign:"right"},valueOnly:{textAlign:"left"},valueContainer:{flex:1,flexShrink:1,minWidth:0,flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},valueOnlyContainer:{justifyContent:"flex-start",alignItems:"flex-start"},valueCenter:{alignItems:"center"},customContent:{flexShrink:1,minWidth:0},iconWrapper:{justifyContent:"center",alignItems:"center"},rightIconWrapper:{alignSelf:"center",justifyContent:"center",alignItems:"center"},hairline:{position:"absolute",bottom:0},groupCardShadow:{},arrowTransforms:{left:{transform:[{rotate:"180deg"}]},right:{},up:{transform:[{rotate:"-90deg"}]},down:{transform:[{rotate:"90deg"}]}}},colors:{background:o,ripple:t.default[100],title:t.default[800],label:t.default[500],value:t.default[600],required:t.danger[500],border:t.default[200],arrow:t.default[400],groupTitle:t.default[500],groupBodyBackground:o},typography:{titleSize:i.sm,lineHeight:24,titleWeight:n.weight.medium,largeTitleSize:i.lg,labelSize:i.xs,largeLabelSize:i.sm,valueSize:i.sm,largeValueSize:i.md,groupTitleSize:i.sm},sizing:{paddingVertical:10,paddingHorizontal:16,largePaddingVertical:14,arrowSize:16,iconSize:16,groupMarginBottom:r.md,groupTitlePaddingHorizontal:r.lg,groupTitlePaddingVertical:r.sm,groupInsetMarginHorizontal:r.lg},radii:{groupInset:a.lg},borders:{width:StyleSheet.hairlineWidth},spacing:{iconGap:r.sm,valueGap:r.none,extraGap:r.sm,labelMarginTop:r.xs}}};export const useCellTokens=createComponentTokensHook("cell",createCellTokens);