react-native-system-ui 1.0.2 → 1.0.4

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

@@ -1,49 +1 @@
-import { createComponentTokensHook } from "../../design-system";
-export const createAvatarTokens = foundations => ({
-  defaults: {
-    size: "medium",
-    shape: "circle"
-  },
-  layout: {
-    container: {
-      alignItems: "center",
-      justifyContent: "center",
-      overflow: "hidden"
-    },
-    text: {
-      includeFontPadding: false,
-      textAlignVertical: "center"
-    },
-    image: {
-      width: "100%",
-      height: "100%"
-    },
-    iconWrapper: {
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  },
-  colors: {
-    background: foundations.palette.default[100],
-    text: foundations.palette.default[800],
-    transparent: "transparent"
-  },
-  typography: {
-    fontWeight: "600",
-    fallbackTextScale: 0.5
-  },
-  sizing: {
-    sizes: {
-      small: 24,
-      medium: 32,
-      large: 40
-    },
-    iconMaxSize: 32,
-    loadingSize: 12
-  },
-  radii: {
-    squareMin: 6,
-    squareDivisor: 6
-  }
-});
-export const useAvatarTokens = createComponentTokensHook("avatar", createAvatarTokens);
+import{createComponentTokensHook}from"../../design-system";export const createAvatarTokens=e=>({defaults:{size:"medium",shape:"circle"},layout:{container:{alignItems:"center",justifyContent:"center",overflow:"hidden"},text:{includeFontPadding:!1,textAlignVertical:"center"},image:{width:"100%",height:"100%"},iconWrapper:{alignItems:"center",justifyContent:"center"}},colors:{background:e.palette.default[100],text:e.palette.default[800],transparent:"transparent"},typography:{fontWeight:"600",fallbackTextScale:.5},sizing:{sizes:{small:24,medium:32,large:40},iconMaxSize:32,loadingSize:12},radii:{squareMin:6,squareDivisor:6}});export const useAvatarTokens=createComponentTokensHook("avatar",createAvatarTokens);

package/dist/es/components/badge/Badge.js

@@ -1,147 +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, useState } from 'react';
-import { Pressable, View } from 'react-native';
-import { isNumericLike, isRenderable, renderTextOrNode } from '../../utils';
-import { useBadgeTokens } from './tokens';
-const BadgeImpl = (props, ref) => {
-  const {
-    children,
-    content,
-    color,
-    textColor,
-    dot: dotP,
-    max,
-    offset,
-    showZero: showZeroP,
-    badgeStyle,
-    textStyle,
-    onPress,
-    style,
-    tokensOverride,
-    ...rest
-  } = props;
-  const tokens = useBadgeTokens(tokensOverride);
-  const dot = dotP ?? tokens.defaults.dot;
-  const showZero = showZeroP ?? tokens.defaults.showZero;
-  const hasCh = React.Children.count(children) > 0;
-  const {
-    visible,
-    formattedContent
-  } = useMemo(() => {
-    const num = isNumericLike(content) ? Number(content) : null;
-    const hide = num === 0 && !showZero;
-    const vis = dot || isRenderable(content) && !hide;
-    if (!vis || dot) return {
-      visible: vis,
-      formattedContent: null
-    };
-    const numMax = isNumericLike(max) ? Number(max) : null;
-    const fmt = num !== null && numMax !== null && num > numMax ? `${numMax}+` : content;
-    return {
-      visible: true,
-      formattedContent: fmt
-    };
-  }, [content, dot, max, showZero]);
-  const [sz, setSz] = useState({
-    width: 0,
-    height: 0
-  });
-  const onLay = useCallback(e => {
-    const {
-      width,
-      height
-    } = e.nativeEvent.layout;
-    setSz(prev => prev.width === width && prev.height === height ? prev : {
-      width,
-      height
-    });
-  }, []);
-  const transStyle = useMemo(() => {
-    if (!hasCh) return undefined;
-    if (dot) {
-      const h = tokens.sizing.dotSize / 2;
-      return {
-        transform: [{
-          translateX: h
-        }, {
-          translateY: -h
-        }]
-      };
-    }
-    ;
-    if (sz.width === 0) return {
-      opacity: 0
-    };
-    return {
-      transform: [{
-        translateX: sz.width / 2
-      }, {
-        translateY: -sz.height / 2
-      }]
-    };
-  }, [dot, hasCh, sz.height, sz.width, tokens.sizing.dotSize]);
-  const boxStyle = useMemo(() => dot ? {
-    width: tokens.sizing.dotSize,
-    height: tokens.sizing.dotSize,
-    borderRadius: tokens.radii.dot,
-    backgroundColor: color ?? tokens.colors.dot
-  } : {
-    minWidth: tokens.sizing.minWidth,
-    minHeight: tokens.sizing.height,
-    paddingHorizontal: tokens.sizing.paddingHorizontal,
-    paddingVertical: tokens.sizing.paddingVertical,
-    borderRadius: tokens.radii.badge,
-    borderWidth: tokens.borders.width,
-    borderColor: tokens.colors.border,
-    backgroundColor: color ?? tokens.colors.background
-  }, [color, dot, tokens.borders.width, tokens.colors.background, tokens.colors.border, tokens.colors.dot, tokens.radii.badge, tokens.radii.dot, tokens.sizing.dotSize, tokens.sizing.height, tokens.sizing.minWidth, tokens.sizing.paddingHorizontal, tokens.sizing.paddingVertical]);
-  const txtStyle = [tokens.layout.text, {
-    color: textColor ?? tokens.colors.text,
-    fontSize: tokens.typography.fontSize,
-    lineHeight: tokens.typography.lineHeight,
-    fontFamily: tokens.typography.fontFamily,
-    fontWeight: tokens.typography.fontWeight
-  }, textStyle];
-  const offStyle = useMemo(() => !offset ? undefined : hasCh ? {
-    right: offset[0],
-    top: offset[1]
-  } : {
-    marginLeft: offset[0],
-    marginTop: offset[1]
-  }, [hasCh, offset]);
-  const badgeEl = !visible ? null : /*#__PURE__*/React.createElement(View, {
-    pointerEvents: hasCh ? 'none' : 'auto',
-    onLayout: hasCh && !dot ? onLay : undefined,
-    style: [hasCh ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, boxStyle, transStyle, offStyle, badgeStyle, !hasCh ? style : undefined]
-  }, !dot && renderTextOrNode(formattedContent, txtStyle));
-  const accLabel = visible ? dot ? 'has new content' : `${formattedContent}` : undefined;
-  if (hasCh) return onPress ? /*#__PURE__*/React.createElement(Pressable, _extends({
-    ref: ref,
-    onPress: onPress,
-    accessibilityLabel: accLabel,
-    style: ({
-      pressed
-    }) => [tokens.layout.wrapper, style, pressed && {
-      opacity: tokens.defaults.pressedOpacity
-    }]
-  }, rest), children, badgeEl) : /*#__PURE__*/React.createElement(View, _extends({
-    ref: ref,
-    style: [tokens.layout.wrapper, style]
-  }, rest), children, badgeEl);
-  if (!visible) return null;
-  return onPress ? /*#__PURE__*/React.createElement(Pressable, _extends({
-    ref: ref,
-    onPress: onPress,
-    style: ({
-      pressed
-    }) => [tokens.layout.pressableStandalone, pressed && {
-      opacity: tokens.defaults.pressedOpacity
-    }]
-  }, rest), badgeEl) : /*#__PURE__*/React.cloneElement(badgeEl, {
-    ref,
-    ...rest
-  });
-};
-const BadgeForwardRef = /*#__PURE__*/React.forwardRef(BadgeImpl);
-BadgeForwardRef.displayName = 'Badge';
-export const Badge = /*#__PURE__*/React.memo(BadgeForwardRef);
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var o in i)({}).hasOwnProperty.call(i,o)&&(e[o]=i[o])}return e},_extends.apply(null,arguments)}import React,{useCallback,useMemo,useState}from"react";import{Pressable,View}from"react-native";import{isNumericLike,isRenderable,renderTextOrNode}from"../../utils";import{useBadgeTokens}from"./tokens";const BadgeImpl=(e,t)=>{const{children:i,content:o,color:r,textColor:a,dot:n,max:s,offset:d,showZero:l,badgeStyle:g,textStyle:c,onPress:u,style:h,tokensOverride:m,...p}=e,f=useBadgeTokens(m),b=n??f.defaults.dot,y=l??f.defaults.showZero,w=React.Children.count(i)>0,{visible:z,formattedContent:R}=useMemo(()=>{const e=isNumericLike(o)?Number(o):null,t=0===e&&!y,i=b||isRenderable(o)&&!t;if(!i||b)return{visible:i,formattedContent:null};const r=isNumericLike(s)?Number(s):null;return{visible:!0,formattedContent:null!==e&&null!==r&&e>r?`${r}+`:o}},[o,b,s,y]),[v,x]=useState({width:0,height:0}),k=useCallback(e=>{const{width:t,height:i}=e.nativeEvent.layout;x(e=>e.width===t&&e.height===i?e:{width:t,height:i})},[]),S=useMemo(()=>{if(w){if(b){const e=f.sizing.dotSize/2;return{transform:[{translateX:e},{translateY:-e}]}}return 0===v.width?{opacity:0}:{transform:[{translateX:v.width/2},{translateY:-v.height/2}]}}},[b,w,v.height,v.width,f.sizing.dotSize]),C=useMemo(()=>b?{width:f.sizing.dotSize,height:f.sizing.dotSize,borderRadius:f.radii.dot,backgroundColor:r??f.colors.dot}:{minWidth:f.sizing.minWidth,minHeight:f.sizing.height,paddingHorizontal:f.sizing.paddingHorizontal,paddingVertical:f.sizing.paddingVertical,borderRadius:f.radii.badge,borderWidth:f.borders.width,borderColor:f.colors.border,backgroundColor:r??f.colors.background},[r,b,f.borders.width,f.colors.background,f.colors.border,f.colors.dot,f.radii.badge,f.radii.dot,f.sizing.dotSize,f.sizing.height,f.sizing.minWidth,f.sizing.paddingHorizontal,f.sizing.paddingVertical]),B=[f.layout.text,{color:a??f.colors.text,fontSize:f.typography.fontSize,lineHeight:f.typography.lineHeight,fontFamily:f.typography.fontFamily,fontWeight:f.typography.fontWeight},c],N=useMemo(()=>d?w?{right:d[0],top:d[1]}:{marginLeft:d[0],marginTop:d[1]}:void 0,[w,d]),O=z?React.createElement(View,{pointerEvents:w?"none":"auto",onLayout:w&&!b?k:void 0,style:[w?f.layout.badgeAbsolute:f.layout.badgeStandalone,C,S,N,g,w?void 0:h]},!b&&renderTextOrNode(R,B)):null,E=z?b?"has new content":`${R}`:void 0;return w?u?React.createElement(Pressable,_extends({ref:t,onPress:u,accessibilityLabel:E,style:({pressed:e})=>[f.layout.wrapper,h,e&&{opacity:f.defaults.pressedOpacity}]},p),i,O):React.createElement(View,_extends({ref:t,style:[f.layout.wrapper,h]},p),i,O):z?u?React.createElement(Pressable,_extends({ref:t,onPress:u,style:({pressed:e})=>[f.layout.pressableStandalone,e&&{opacity:f.defaults.pressedOpacity}]},p),O):React.cloneElement(O,{ref:t,...p}):null},BadgeForwardRef=React.forwardRef(BadgeImpl);BadgeForwardRef.displayName="Badge";export const Badge=React.memo(BadgeForwardRef);

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

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

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

@@ -1,75 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const centered = {
-  alignItems: 'center',
-  justifyContent: 'center'
-};
-const createBadgeTokens = ({
-  palette,
-  spacing,
-  fontSize,
-  radii,
-  typography
-}) => {
-  const dotSize = 8;
-  return {
-    defaults: {
-      dot: false,
-      showZero: true,
-      pressedOpacity: 0.9
-    },
-    layout: {
-      wrapper: {
-        position: 'relative',
-        alignSelf: 'flex-start'
-      },
-      badgeAbsolute: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        ...centered,
-        zIndex: 1
-      },
-      badgeStandalone: {
-        alignSelf: 'flex-start',
-        flexDirection: 'row',
-        ...centered
-      },
-      pressableStandalone: {
-        alignSelf: 'flex-start',
-        flexDirection: 'row'
-      },
-      text: {
-        textAlign: 'center',
-        includeFontPadding: false,
-        textAlignVertical: 'center'
-      }
-    },
-    colors: {
-      background: palette.danger[500],
-      dot: palette.danger[500],
-      text: palette.danger.foreground ?? '#fff',
-      border: '#fff'
-    },
-    typography: {
-      fontSize: fontSize.xs,
-      fontWeight: typography.weight.bold,
-      fontFamily: typography.fontFamily,
-      lineHeight: fontSize.xs * typography.lineHeightMultiplier
-    },
-    sizing: {
-      minWidth: 18,
-      height: 18,
-      paddingHorizontal: spacing.xs,
-      paddingVertical: spacing.xxs,
-      dotSize
-    },
-    radii: {
-      badge: radii.pill,
-      dot: dotSize / 2
-    },
-    borders: {
-      width: 1
-    }
-  };
-};
-export const useBadgeTokens = createComponentTokensHook('badge', createBadgeTokens);
+import{createComponentTokensHook}from"../../design-system";const centered={alignItems:"center",justifyContent:"center"},createBadgeTokens=({palette:e,spacing:t,fontSize:n,radii:o,typography:i})=>({defaults:{dot:!1,showZero:!0,pressedOpacity:.9},layout:{wrapper:{position:"relative",alignSelf:"flex-start"},badgeAbsolute:{position:"absolute",top:0,right:0,...centered,zIndex:1},badgeStandalone:{alignSelf:"flex-start",flexDirection:"row",...centered},pressableStandalone:{alignSelf:"flex-start",flexDirection:"row"},text:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"}},colors:{background:e.danger[500],dot:e.danger[500],text:e.danger.foreground??"#fff",border:"#fff"},typography:{fontSize:n.xs,fontWeight:i.weight.bold,fontFamily:i.fontFamily,lineHeight:n.xs*i.lineHeightMultiplier},sizing:{minWidth:18,height:18,paddingHorizontal:t.xs,paddingVertical:t.xxs,dotSize:8},radii:{badge:o.pill,dot:4},borders:{width:1}});export const useBadgeTokens=createComponentTokensHook("badge",createBadgeTokens);

package/dist/es/components/button/Button.js

@@ -1,184 +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 { ActivityIndicator, Platform, Pressable, Text, View } from 'react-native';
-import { withAlpha } from '../../utils/color';
-import { createPlatformShadow } from '../../utils/createPlatformShadow';
-import { createHairlineView } from '../../utils/hairline';
-import { ensureSpace } from '../../utils/string';
-import { isFiniteNumber, isFunction, isString } from '../../utils';
-import { useAriaPress } from '../../hooks';
-import { ButtonGroupContext } from './ButtonContext';
-import { useButtonTokens } from './tokens';
-const clampShadowLevel = level => level <= 1 ? 1 : level >= 3 ? 3 : level;
-const ROUND_CORNER_STYLE = {
-  overflow: 'hidden'
-};
-const ButtonImpl = (props, forwardedRef) => {
-  const grp = useContext(ButtonGroupContext);
-  const {
-    text,
-    children,
-    icon,
-    iconPosition: iconPosP,
-    type: typeP,
-    size: sizeP,
-    color,
-    textColor: txtClrP,
-    plain: plainP,
-    block: blockP,
-    round: roundP,
-    square: sqP,
-    hairline: hlP,
-    shadow: shP,
-    loading: loadP,
-    loadingText,
-    loadingIndicator,
-    loadingSize: loadSzP,
-    disabled: disP,
-    allowFontScaling: fontScaleP,
-    maxFontSizeMultiplier,
-    rippleColor: rippleP,
-    contentStyle,
-    textStyle,
-    tokensOverride,
-    style,
-    ...pressProps
-  } = props;
-  const tokens = useButtonTokens(tokensOverride);
-  const type = typeP ?? grp?.type ?? tokens.defaults.type;
-  const size = sizeP ?? grp?.size ?? tokens.defaults.size;
-  const plain = plainP ?? grp?.plain ?? tokens.defaults.plain;
-  const block = blockP ?? grp?.block ?? tokens.defaults.block;
-  const round = roundP ?? grp?.round ?? tokens.defaults.round;
-  const square = sqP ?? grp?.square ?? tokens.defaults.square;
-  const hairline = hlP ?? grp?.hairline ?? tokens.defaults.hairline;
-  const iconPos = iconPosP ?? grp?.iconPosition ?? tokens.defaults.iconPosition;
-  const disabled = disP ?? grp?.disabled ?? tokens.defaults.disabled;
-  const loading = loadP ?? tokens.defaults.loading;
-  const loadSz = loadSzP ?? tokens.defaults.loadingSize;
-  const allowFontScaling = fontScaleP ?? tokens.defaults.allowFontScaling;
-  const shVal = shP ?? grp?.shadow;
-  const isDis = disabled || loading;
-  const tone = tokens.colors.tones[type] ?? tokens.colors.tones.default;
-  const szTok = tokens.sizing.sizes[size];
-  const [bgClr, borderClr, txtClr] = useMemo(() => plain ? [tokens.colors.backgroundPlain, color ?? tone.border, txtClrP ?? (type === 'default' && !color ? tone.text : color ?? tone.border)] : [color ?? tone.background, color ?? tone.border, txtClrP ?? (color ? '#ffffff' : tone.text)], [color, txtClrP, plain, type, tone, tokens.colors.backgroundPlain]);
-  const hasBorder = plain || type === 'default';
-  const useHl = hasBorder && hairline;
-  const borderW = hasBorder && !hairline ? tokens.borders.width : 0;
-  const radius = square ? 0 : round ? szTok.height / 2 : szTok.radius;
-  const shStyle = useMemo(() => {
-    if (plain) return undefined;
-    const lvl = isFiniteNumber(shVal) ? clampShadowLevel(shVal) : shVal === true ? 2 : undefined;
-    return lvl ? createPlatformShadow(tokens.shadows[lvl]) : undefined;
-  }, [shVal, plain, tokens.shadows]);
-  const {
-    onPress,
-    onPressIn,
-    onPressOut,
-    accessibilityLabel,
-    accessibilityHint,
-    accessibilityRole,
-    accessibilityState,
-    android_ripple: andRippleP,
-    ...viewProps
-  } = pressProps;
-  const {
-    interactionProps,
-    states
-  } = useAriaPress({
-    disabled: isDis,
-    onPress: onPress || undefined,
-    onPressStart: onPressIn || undefined,
-    onPressEnd: onPressOut || undefined
-  });
-  const opacity = disabled ? tokens.states.disabledOpacity : loading ? tokens.states.loadingOpacity : states.pressed ? tokens.states.pressedOpacity : 1;
-  const txtStyle = useMemo(() => ({
-    fontFamily: tokens.typography.fontFamily,
-    fontWeight: tokens.typography.fontWeight,
-    fontSize: szTok.fontSize,
-    lineHeight: szTok.fontSize * tokens.typography.lineHeightMultiplier,
-    color: txtClr
-  }), [tokens.typography, szTok.fontSize, txtClr]);
-  const iconGap = tokens.spacing.iconGap;
-  const rIcon = () => {
-    if (!icon) return null;
-    try {
-      const el = isFunction(icon) ? icon(txtClr, szTok.iconSize) : icon;
-      const margin = iconPos === 'left' ? {
-        marginRight: iconGap
-      } : {
-        marginLeft: iconGap
-      };
-      return /*#__PURE__*/React.createElement(View, {
-        style: [tokens.layout.iconWrapper, margin]
-      }, el);
-    } catch (err) {
-      if (__DEV__) console.warn('[Button] Failed to render icon:', err);
-      return null;
-    }
-  };
-  const rLoad = () => /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.iconWrapper, {
-      marginRight: iconGap
-    }]
-  }, loadingIndicator ?? /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: loadSz,
-    color: txtClr
-  }));
-  const label = loading && loadingText !== undefined ? loadingText : text !== undefined ? text : children;
-  const rLabel = () => {
-    if (label == null) return null;
-    if (typeof label === 'string' || typeof label === 'number') return /*#__PURE__*/React.createElement(Text, {
-      style: [tokens.layout.text, txtStyle, textStyle],
-      numberOfLines: 1,
-      allowFontScaling: allowFontScaling,
-      maxFontSizeMultiplier: maxFontSizeMultiplier
-    }, isString(label) ? ensureSpace(label, true) : String(label));
-    return label;
-  };
-  const accLabel = accessibilityLabel ?? (typeof label === 'string' || typeof label === 'number' ? String(label) : undefined);
-  const accState = useMemo(() => ({
-    ...accessibilityState,
-    disabled: isDis,
-    busy: loading
-  }), [accessibilityState, isDis, loading]);
-  const andRipple = useMemo(() => {
-    if (Platform.OS !== 'android') return andRippleP;
-    if (andRippleP) return andRippleP;
-    const rc = rippleP ?? (plain ? txtClr : type === 'default' && !color ? withAlpha(txtClr, 0.15) : tokens.colors.ripple);
-    return {
-      color: rc,
-      borderless: false
-    };
-  }, [andRippleP, rippleP, plain, txtClr, type, color, tokens.colors.ripple]);
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
-    ref: forwardedRef,
-    disabled: isDis,
-    style: [tokens.layout.base, {
-      minHeight: szTok.height,
-      paddingHorizontal: szTok.paddingHorizontal,
-      borderRadius: radius,
-      backgroundColor: bgClr,
-      borderColor: useHl ? 'transparent' : borderClr,
-      borderWidth: borderW,
-      opacity
-    }, Platform.OS === 'android' && radius > 0 && !shStyle ? ROUND_CORNER_STYLE : null, block ? tokens.layout.block : null, shStyle, style],
-    android_ripple: andRipple
-  }, interactionProps, {
-    accessibilityState: accState,
-    accessibilityRole: accessibilityRole ?? 'button',
-    accessibilityLabel: accLabel,
-    accessibilityHint: accessibilityHint
-  }, viewProps), /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.content, contentStyle]
-  }, loading ? /*#__PURE__*/React.createElement(React.Fragment, null, rLoad(), rLabel()) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && iconPos === 'left' && rIcon(), rLabel(), icon && iconPos === 'right' && rIcon())), useHl && /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: 'all',
-      color: borderClr,
-      borderRadius: radius
-    })
-  }));
-};
-const ButtonForwardRef = /*#__PURE__*/React.forwardRef(ButtonImpl);
-export const Button = /*#__PURE__*/React.memo(ButtonForwardRef);
-export default Button;
+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 i in o)({}).hasOwnProperty.call(o,i)&&(e[i]=o[i])}return e},_extends.apply(null,arguments)}import React,{useContext,useMemo}from"react";import{ActivityIndicator,Platform,Pressable,Text,View}from"react-native";import{withAlpha}from"../../utils/color";import{createPlatformShadow}from"../../utils/createPlatformShadow";import{createHairlineView}from"../../utils/hairline";import{ensureSpace}from"../../utils/string";import{isFiniteNumber,isFunction,isString}from"../../utils";import{useAriaPress}from"../../hooks";import{ButtonGroupContext}from"./ButtonContext";import{useButtonTokens}from"./tokens";const clampShadowLevel=e=>e<=1?1:e>=3?3:e,ROUND_CORNER_STYLE={overflow:"hidden"},ButtonImpl=(e,t)=>{const o=useContext(ButtonGroupContext),{text:i,children:r,icon:n,iconPosition:a,type:l,size:s,color:c,textColor:d,plain:u,block:p,round:f,square:m,hairline:y,shadow:b,loading:g,loadingText:h,loadingIndicator:S,loadingSize:R,disabled:w,allowFontScaling:P,maxFontSizeMultiplier:x,rippleColor:v,contentStyle:z,textStyle:F,tokensOverride:E,style:O,..._}=e,k=useButtonTokens(E),B=l??o?.type??k.defaults.type,C=s??o?.size??k.defaults.size,H=u??o?.plain??k.defaults.plain,M=p??o?.block??k.defaults.block,L=f??o?.round??k.defaults.round,V=m??o?.square??k.defaults.square,T=y??o?.hairline??k.defaults.hairline,A=a??o?.iconPosition??k.defaults.iconPosition,I=w??o?.disabled??k.defaults.disabled,N=g??k.defaults.loading,W=R??k.defaults.loadingSize,q=P??k.defaults.allowFontScaling,D=b??o?.shadow,G=I||N,j=k.colors.tones[B]??k.colors.tones.default,U=k.sizing.sizes[C],[Y,J,K]=useMemo(()=>H?[k.colors.backgroundPlain,c??j.border,d??("default"!==B||c?c??j.border:j.text)]:[c??j.background,c??j.border,d??(c?"#ffffff":j.text)],[c,d,H,B,j,k.colors.backgroundPlain]),Q=H||"default"===B,X=Q&&T,Z=Q&&!T?k.borders.width:0,$=V?0:L?U.height/2:U.radius,ee=useMemo(()=>{if(H)return;const e=isFiniteNumber(D)?clampShadowLevel(D):!0===D?2:void 0;return e?createPlatformShadow(k.shadows[e]):void 0},[D,H,k.shadows]),{onPress:te,onPressIn:oe,onPressOut:ie,accessibilityLabel:re,accessibilityHint:ne,accessibilityRole:ae,accessibilityState:le,android_ripple:se,...ce}=_,{interactionProps:de,states:ue}=useAriaPress({disabled:G,onPress:te||void 0,onPressStart:oe||void 0,onPressEnd:ie||void 0}),pe=I?k.states.disabledOpacity:N?k.states.loadingOpacity:ue.pressed?k.states.pressedOpacity:1,fe=useMemo(()=>({fontFamily:k.typography.fontFamily,fontWeight:k.typography.fontWeight,fontSize:U.fontSize,lineHeight:U.fontSize*k.typography.lineHeightMultiplier,color:K}),[k.typography,U.fontSize,K]),me=k.spacing.iconGap,ye=()=>{if(!n)return null;try{const e=isFunction(n)?n(K,U.iconSize):n,t="left"===A?{marginRight:me}:{marginLeft:me};return React.createElement(View,{style:[k.layout.iconWrapper,t]},e)}catch(e){return __DEV__&&console.warn("[Button] Failed to render icon:",e),null}},be=N&&void 0!==h?h:void 0!==i?i:r,ge=()=>null==be?null:"string"==typeof be||"number"==typeof be?React.createElement(Text,{style:[k.layout.text,fe,F],numberOfLines:1,allowFontScaling:q,maxFontSizeMultiplier:x},isString(be)?ensureSpace(be,!0):String(be)):be,he=re??("string"==typeof be||"number"==typeof be?String(be):void 0),Se=useMemo(()=>({...le,disabled:G,busy:N}),[le,G,N]),Re=useMemo(()=>{if("android"!==Platform.OS)return se;if(se)return se;return{color:v??(H?K:"default"!==B||c?k.colors.ripple:withAlpha(K,.15)),borderless:!1}},[se,v,H,K,B,c,k.colors.ripple]);return React.createElement(Pressable,_extends({ref:t,disabled:G,style:[k.layout.base,{minHeight:U.height,paddingHorizontal:U.paddingHorizontal,borderRadius:$,backgroundColor:Y,borderColor:X?"transparent":J,borderWidth:Z,opacity:pe},"android"===Platform.OS&&$>0&&!ee?ROUND_CORNER_STYLE:null,M?k.layout.block:null,ee,O],android_ripple:Re},de,{accessibilityState:Se,accessibilityRole:ae??"button",accessibilityLabel:he,accessibilityHint:ne},ce),React.createElement(View,{style:[k.layout.content,z]},N?React.createElement(React.Fragment,null,React.createElement(View,{style:[k.layout.iconWrapper,{marginRight:me}]},S??React.createElement(ActivityIndicator,{size:W,color:K})),ge()):React.createElement(React.Fragment,null,n&&"left"===A&&ye(),ge(),n&&"right"===A&&ye())),X&&React.createElement(View,{style:createHairlineView({position:"all",color:J,borderRadius:$})}))},ButtonForwardRef=React.forwardRef(ButtonImpl);export const Button=React.memo(ButtonForwardRef);export default Button;

package/dist/es/components/button/ButtonContext.js

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

package/dist/es/components/button/ButtonGroup.js

@@ -1,46 +1 @@
-import React, { useMemo } from 'react';
-import { View } from 'react-native';
-import { useButtonTokens } from './tokens';
-export const ButtonGroupContext = /*#__PURE__*/React.createContext(null);
-export const ButtonGroup = /*#__PURE__*/React.memo(({
-  children,
-  direction = 'horizontal',
-  spacing,
-  style,
-  type,
-  size,
-  plain,
-  block,
-  round,
-  square,
-  shadow,
-  disabled,
-  iconPosition,
-  hairline
-}) => {
-  const tokens = useButtonTokens();
-  const gap = spacing ?? tokens.spacing.groupGap;
-  const grpVal = useMemo(() => ({
-    type,
-    size,
-    plain,
-    block,
-    round,
-    square,
-    shadow,
-    disabled,
-    iconPosition,
-    hairline
-  }), [block, disabled, hairline, iconPosition, plain, round, shadow, size, square, type]);
-  const ctrStyle = useMemo(() => [{
-    flexDirection: direction === 'horizontal' ? 'row' : 'column',
-    alignItems: 'center',
-    gap,
-    width: block ? '100%' : undefined
-  }, style], [block, direction, gap, style]);
-  return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
-    value: grpVal
-  }, /*#__PURE__*/React.createElement(View, {
-    style: ctrStyle
-  }, children));
-});
+import React,{useMemo}from"react";import{View}from"react-native";import{useButtonTokens}from"./tokens";export const ButtonGroupContext=React.createContext(null);export const ButtonGroup=React.memo(({children:e,direction:o="horizontal",spacing:t,style:n,type:i,size:r,plain:a,block:s,round:c,square:u,shadow:l,disabled:p,iconPosition:m,hairline:d})=>{const h=useButtonTokens(),w=t??h.spacing.groupGap,x=useMemo(()=>({type:i,size:r,plain:a,block:s,round:c,square:u,shadow:l,disabled:p,iconPosition:m,hairline:d}),[s,p,d,m,a,c,l,r,u,i]),g=useMemo(()=>[{flexDirection:"horizontal"===o?"row":"column",alignItems:"center",gap:w,width:s?"100%":void 0},n],[s,o,w,n]);return React.createElement(ButtonGroupContext.Provider,{value:x},React.createElement(View,{style:g},e))});

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

@@ -1,7 +1 @@
-import { Button as ButtonBase } from './Button';
-import { ButtonGroup } from './ButtonGroup';
-const Button = Object.assign(ButtonBase, {
-  Group: ButtonGroup
-});
-export default Button;
-export { Button };
+import{Button as ButtonBase}from"./Button";import{ButtonGroup}from"./ButtonGroup";const Button=Object.assign(ButtonBase,{Group:ButtonGroup});export default Button;export{Button};