@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/commonjs/components/Spinner/Spinner.js

@@ -1,203 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Spinner = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _squircle = require("../../utils/squircle.js");
-var _SquircleFill = require("../SquircleFill/SquircleFill.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const sizeMap = {
-  sm: 20,
-  md: 32,
-  lg: 48
-};
-const DOT_COUNT = 3;
-const DOT_STAGGER_MS = 150;
-const DOT_CYCLE_MS = 600;
-const Dot = ({
-  size,
-  color,
-  delay,
-  duration
-}) => {
-  const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
-  (0, _react.useEffect)(() => {
-    const animation = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.delay(delay), _reactNative.Animated.timing(scale, {
-      toValue: 1.4,
-      duration: duration / 2,
-      easing: _reactNative.Easing.out(_reactNative.Easing.quad),
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(scale, {
-      toValue: 1,
-      duration: duration / 2,
-      easing: _reactNative.Easing.in(_reactNative.Easing.quad),
-      useNativeDriver: true
-    })]));
-    animation.start();
-    return () => {
-      animation.stop();
-    };
-  }, [scale, delay, duration]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-      ..._corners.smoothCorners,
-      backgroundColor: color,
-      transform: [{
-        scale
-      }]
-    }
-  });
-};
-const Spinner = exports.Spinner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    size = 'md',
-    color,
-    message,
-    overlay = false,
-    backdropColor,
-    variant = 'circular',
-    accessibilityLabel,
-    style,
-    testID
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const fade = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(fade, {
-      toValue: 1,
-      duration: theme.motion.duration.normal,
-      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: true
-    }).start();
-  }, [fade, theme]);
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const dimension = sizeMap[size];
-  const resolvedColor = color ?? theme.colors.primary;
-  const resolvedBackdrop = backdropColor ?? theme.colors.background.overlay;
-  const indicator = (0, _react.useMemo)(() => {
-    if (variant === 'dots') {
-      const dotSize = Math.max(6, Math.round(dimension / 4));
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.dotsRow, {
-          gap: Math.round(dotSize / 2)
-        }],
-        children: Array.from({
-          length: DOT_COUNT
-        }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Dot, {
-          size: dotSize,
-          color: resolvedColor,
-          delay: i * DOT_STAGGER_MS,
-          duration: DOT_CYCLE_MS
-        }, i))
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-      color: resolvedColor,
-      size: size === 'sm' ? 'small' : 'large',
-      style: {
-        width: dimension,
-        height: dimension
-      }
-    });
-  }, [variant, size, dimension, resolvedColor, styles.dotsRow]);
-  const a11yLabel = accessibilityLabel ?? message ?? 'Loading';
-
-  // Android smooth corners for the overlay card. The host keeps its opaque
-  // background, because its elevation shadow is cast from the view's own
-  // outline; its native corner is pushed deeper so it hides under the
-  // squircle (see squircleHostRadius).
-  const squircle = (0, _SquircleFill.useSquircle)(overlay, theme.radius.lg);
-  const hostRadius = squircle.active && squircle.size ? {
-    borderRadius: (0, _squircle.squircleHostRadius)(squircle.size.width, squircle.size.height, theme.radius.lg)
-  } : null;
-  const inner = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    ref: ref,
-    accessible: true,
-    accessibilityRole: "progressbar",
-    accessibilityLiveRegion: "polite",
-    accessibilityLabel: a11yLabel,
-    accessibilityState: {
-      busy: true
-    },
-    testID: testID,
-    onLayout: squircle.onLayout,
-    style: [overlay ? styles.overlayContent : styles.inlineContent, hostRadius, {
-      opacity: fade
-    }],
-    children: [squircle.active && squircle.size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SquircleFill.SquircleFill, {
-      width: squircle.size.width,
-      height: squircle.size.height,
-      radius: theme.radius.lg,
-      fill: theme.colors.background.elevated
-    }) : null, indicator, message ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.message, {
-        color: theme.colors.text.primary,
-        fontSize: theme.typography.fontSize.base,
-        fontWeight: theme.typography.fontWeight.medium,
-        marginTop: theme.spacing.md
-      }],
-      numberOfLines: 2,
-      children: message
-    }) : null]
-  });
-  if (overlay) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      pointerEvents: "auto",
-      style: [styles.overlay, {
-        backgroundColor: resolvedBackdrop
-      }, style],
-      children: inner
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.inline, style],
-    children: inner
-  });
-});
-Spinner.displayName = 'Spinner';
-const buildStyles = theme => _reactNative.StyleSheet.create({
-  inline: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  inlineContent: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  overlay: {
-    ..._reactNative.StyleSheet.absoluteFill,
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 1000
-  },
-  overlayContent: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.colors.background.elevated,
-    borderRadius: theme.radius.lg,
-    ..._corners.smoothCorners,
-    paddingHorizontal: theme.spacing.xl,
-    paddingVertical: theme.spacing.xl,
-    minWidth: 140,
-    ...theme.shadows.lg
-  },
-  dotsRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  message: {
-    textAlign: 'center'
-  }
-});
-var _default = exports.default = Spinner;
-//# sourceMappingURL=Spinner.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Spinner=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_squircle=require("../../utils/squircle.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,n,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(a=t?r:i){if(a.has(e))return a.get(e);a.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?a(s,t,n):s[t]=e[t]);return s})(e,t)}const sizeMap={sm:20,md:32,lg:48},DOT_COUNT=3,DOT_STAGGER_MS=150,DOT_CYCLE_MS=600,Dot=({size:e,color:t,delay:i,duration:r})=>{const a=(0,_react.useRef)((0,_index.createAnimatedValue)(1)).current;return(0,_react.useEffect)(()=>{const e=_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.delay(i),_reactNative.Animated.timing(a,{toValue:1.4,duration:r/2,easing:_reactNative.Easing.out(_reactNative.Easing.quad),useNativeDriver:!0}),_reactNative.Animated.timing(a,{toValue:1,duration:r/2,easing:_reactNative.Easing.in(_reactNative.Easing.quad),useNativeDriver:!0})]));return e.start(),()=>{e.stop()}},[a,i,r]),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{width:e,height:e,borderRadius:e/2,..._corners.smoothCorners,backgroundColor:t,transform:[{scale:a}]}})},Spinner=exports.Spinner=(0,_react.forwardRef)((e,t)=>{const{size:i="md",color:r,message:a,overlay:n=!1,backdropColor:s,variant:o="circular",accessibilityLabel:l,style:c,testID:u}=e,d=(0,_index.useTheme)(),_=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current;(0,_react.useEffect)(()=>{_reactNative.Animated.timing(_,{toValue:1,duration:d.motion.duration.normal,easing:_reactNative.Easing.bezier(...d.motion.easing.standard),useNativeDriver:!0}).start()},[_,d]);const m=(0,_react.useMemo)(()=>buildStyles(d),[d]),g=sizeMap[i],y=r??d.colors.primary,p=s??d.colors.background.overlay,v=(0,_react.useMemo)(()=>{if("dots"===o){const e=Math.max(6,Math.round(g/4));return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[m.dotsRow,{gap:Math.round(e/2)}],children:Array.from({length:3}).map((t,i)=>(0,_jsxRuntime.jsx)(Dot,{size:e,color:y,delay:150*i,duration:600},i))})}return(0,_jsxRuntime.jsx)(_reactNative.ActivityIndicator,{color:y,size:"sm"===i?"small":"large",style:{width:g,height:g}})},[o,i,g,y,m.dotsRow]),f=l??a??"Loading",h=(0,_SquircleFill.useSquircle)(n,d.radius.lg),x=h.active&&h.size?{borderRadius:(0,_squircle.squircleHostRadius)(h.size.width,h.size.height,d.radius.lg)}:null,j=(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{ref:t,accessible:!0,accessibilityRole:"progressbar",accessibilityLiveRegion:"polite",accessibilityLabel:f,accessibilityState:{busy:!0},testID:u,onLayout:h.onLayout,style:[n?m.overlayContent:m.inlineContent,x,{opacity:_}],children:[h.active&&h.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:h.size.width,height:h.size.height,radius:d.radius.lg,fill:d.colors.background.elevated}):null,v,a?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[m.message,{color:d.colors.text.primary,fontSize:d.typography.fontSize.base,fontWeight:d.typography.fontWeight.medium,marginTop:d.spacing.md}],numberOfLines:2,children:a}):null]});return n?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"auto",style:[m.overlay,{backgroundColor:p},c],children:j}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[m.inline,c],children:j})});Spinner.displayName="Spinner";const buildStyles=e=>_reactNative.StyleSheet.create({inline:{alignItems:"center",justifyContent:"center"},inlineContent:{alignItems:"center",justifyContent:"center"},overlay:{..._reactNative.StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center",zIndex:1e3},overlayContent:{alignItems:"center",justifyContent:"center",backgroundColor:e.colors.background.elevated,borderRadius:e.radius.lg,..._corners.smoothCorners,paddingHorizontal:e.spacing.xl,paddingVertical:e.spacing.xl,minWidth:140,...e.shadows.lg},dotsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center"},message:{textAlign:"center"}});var _default=exports.default=Spinner;

package/lib/commonjs/components/Spinner/index.js

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Spinner", {
-  enumerable: true,
-  get: function () {
-    return _Spinner.Spinner;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Spinner.default;
-  }
-});
-var _Spinner = _interopRequireWildcard(require("./Spinner.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Spinner",{enumerable:!0,get:function(){return _Spinner.Spinner}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Spinner.default}});var _Spinner=_interopRequireWildcard(require("./Spinner.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var i,o,u={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return u;if(i=r?n:t){if(i.has(e))return i.get(e);i.set(e,u)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(o.get||o.set)?i(u,r,o):u[r]=e[r]);return u})(e,r)}

package/lib/commonjs/components/SquircleFill/SquircleFill.js

@@ -1,116 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SquircleFill = SquircleFill;
-exports.useSquircle = useSquircle;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
-var _squircle = require("../../utils/squircle.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * SquircleFill: the Android half of smooth corners.
- *
- * iOS rounds a view with Apple's continuous curve through
- * `borderCurve: 'continuous'` (`utils/corners`). Android has no such style,
- * so a host that wants the same look on Android draws its fill and border
- * as an SVG path laid over its own bounds, and paints itself transparent
- * behind it. Internal: `FieldBase`, `Button` and `Card` use it; apps get the
- * corners through those. No barrel on purpose: a directory without an
- * index.ts is an internal primitive, not a component of the public table.
- *
- * The overlay is absolutely positioned and inert to touches. It needs the
- * host's measured size, which `useSquircle` collects from the host's
- * `onLayout`; until the first layout the host keeps its native corner, so
- * the first frame shows a circular corner rather than no fill at all.
- *
- * Not a general clipping tool: children of the host are not clipped to the
- * shape, which is why hosts that must clip (a card with an image header, a
- * gradient button) keep their native corner.
- */
-
-const AnimatedPath = _reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Path);
-function SquircleFill({
-  width,
-  height,
-  radius,
-  fill,
-  stroke,
-  strokeWidth = 0,
-  outset = 0,
-  testID
-}) {
-  const hasStroke = strokeWidth > 0 && stroke !== undefined && stroke !== 'transparent';
-  const inset = hasStroke ? strokeWidth / 2 : 0;
-  const d = (0, _squircle.squirclePath)({
-    width,
-    height,
-    radius,
-    inset
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    pointerEvents: "none",
-    style: [styles.overlay, outset ? {
-      top: -outset,
-      left: -outset,
-      right: -outset,
-      bottom: -outset
-    } : null],
-    testID: testID,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
-      width: width,
-      height: height,
-      viewBox: `0 0 ${width} ${height}`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedPath, {
-        d: d
-        // react-native-svg types colours as strings; an Animated node is
-        // resolved to one by `createAnimatedComponent` before it reaches Path.
-        ,
-        fill: fill,
-        stroke: hasStroke ? stroke : undefined,
-        strokeWidth: hasStroke ? strokeWidth : undefined
-      })
-    })
-  });
-}
-SquircleFill.displayName = 'SquircleFill';
-/**
- * Tracks a host's size for `SquircleFill`. On iOS (and when `enabled` is
- * false) it only forwards the layout event and never re-renders the host.
- */
-function useSquircle(enabled, radius, onLayoutProp) {
-  const [size, setSize] = (0, _react.useState)(null);
-  const track = enabled && _reactNative.Platform.OS === 'android';
-  const onLayout = (0, _react.useCallback)(event => {
-    if (track) {
-      const {
-        width,
-        height
-      } = event.nativeEvent.layout;
-      setSize(prev => prev && prev.width === width && prev.height === height ? prev : {
-        width,
-        height
-      });
-    }
-    onLayoutProp?.(event);
-  }, [track, onLayoutProp]);
-  const active = track && size !== null && (0, _squircle.squircleApplies)(size.width, size.height, radius);
-  return {
-    onLayout,
-    size,
-    active
-  };
-}
-const styles = _reactNative.StyleSheet.create({
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }
-});
-//# sourceMappingURL=SquircleFill.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SquircleFill=SquircleFill,exports.useSquircle=useSquircle;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSvg=_interopRequireWildcard(require("react-native-svg")),_squircle=require("../../utils/squircle.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,l,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(a=t?r:i){if(a.has(e))return a.get(e);a.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((l=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(l.get||l.set)?a(n,t,l):n[t]=e[t]);return n})(e,t)}const AnimatedPath=_reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Path);function SquircleFill({width:e,height:t,radius:i,fill:r,stroke:a,strokeWidth:l=0,outset:n=0,testID:u}){const s=l>0&&void 0!==a&&"transparent"!==a,o=s?l/2:0,c=(0,_squircle.squirclePath)({width:e,height:t,radius:i,inset:o});return(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[styles.overlay,n?{top:-n,left:-n,right:-n,bottom:-n}:null],testID:u,children:(0,_jsxRuntime.jsx)(_reactNativeSvg.default,{width:e,height:t,viewBox:`0 0 ${e} ${t}`,children:(0,_jsxRuntime.jsx)(AnimatedPath,{d:c,fill:r,stroke:s?a:void 0,strokeWidth:s?l:void 0})})})}function useSquircle(e,t,i){const[r,a]=(0,_react.useState)(null),l=e&&"android"===_reactNative.Platform.OS;return{onLayout:(0,_react.useCallback)(e=>{if(l){const{width:t,height:i}=e.nativeEvent.layout;a(e=>e&&e.width===t&&e.height===i?e:{width:t,height:i})}i?.(e)},[l,i]),size:r,active:l&&null!==r&&(0,_squircle.squircleApplies)(r.width,r.height,t)}}SquircleFill.displayName="SquircleFill";const styles=_reactNative.StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0}});

package/lib/commonjs/components/StatTile/StatTile.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.StatTile=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../Card/index.js"),_index3=require("../IconBadge/index.js"),_index4=require("../Skeleton/index.js"),_index5=require("../Text/index.js"),_jsxRuntime=require("react/jsx-runtime");const isText=e=>"string"==typeof e||"number"==typeof e,StatTile=exports.StatTile=(0,_react.forwardRef)((e,t)=>{const{label:i,value:n,icon:s,iconVariant:r,tone:a="primary",caption:x,onPress:l,loading:d=!1,accessibilityLabel:c,style:o,testID:u}=e,_=(0,_index.useTheme)(),j=c??(isText(n)?`${i}, ${n}`:void 0);return d?(0,_jsxRuntime.jsx)(_index2.Card,{ref:t,variant:"outlined",style:o,testID:u,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.row,{columnGap:_.spacing.md}],children:[void 0===s?null:(0,_jsxRuntime.jsx)(_index4.Skeleton,{shape:"circle",width:40,height:40}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.text,children:[(0,_jsxRuntime.jsx)(_index4.Skeleton,{shape:"text",width:"50%",height:12}),(0,_jsxRuntime.jsx)(_index4.Skeleton,{shape:"text",width:"35%",height:24,style:{marginTop:_.spacing.xs}})]})]})}):(0,_jsxRuntime.jsx)(_index2.Card,{ref:t,variant:"outlined",onPress:l,accessibilityLabel:j,style:o,testID:u,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.row,{columnGap:_.spacing.md}],children:[void 0===s?null:(0,_jsxRuntime.jsx)(_index3.IconBadge,{icon:s,iconVariant:r,tone:a}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.text,children:[(0,_jsxRuntime.jsx)(_index5.Text,{variant:"caption",color:"secondary",numberOfLines:1,children:i}),isText(n)?(0,_jsxRuntime.jsx)(_index5.Text,{variant:"h3",numberOfLines:1,children:n}):n,null==x||""===x?null:isText(x)?(0,_jsxRuntime.jsx)(_index5.Text,{variant:"caption",color:"tertiary",numberOfLines:1,children:x}):x]})]})})});StatTile.displayName="StatTile";const styles=_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},text:{flex:1,minWidth:0}});var _default=exports.default=StatTile;

package/lib/commonjs/components/StatTile/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StatTile",{enumerable:!0,get:function(){return _StatTile.StatTile}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _StatTile.default}});var _StatTile=_interopRequireWildcard(require("./StatTile.js"));function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,o,u={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return u;if(i=t?n:r){if(i.has(e))return i.get(e);i.set(e,u)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?i(u,t,o):u[t]=e[t]);return u})(e,t)}

package/lib/commonjs/components/StatusBadge/StatusBadge.js

@@ -1,233 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.StatusBadge = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _color = require("../../utils/color.js");
-var _corners = require("../../utils/corners.js");
-var _index2 = require("../Skeleton/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * The same semantic vocabulary Chip and Badge use, and the web library's
- * `AppStatusBadge` (its `danger` is `error` here, the mobile theme's name).
- * A semantic name survives a palette change; a colour name does not.
- */
-
-/**
- * `soft` is the default: the tone at a light tint behind text in the tone,
- * with a border in the tone so the pill has an edge on any surface. `outline`
- * drops the fill. `solid` fills with the tone and draws the text on it.
- */
-
-const sizeMap = {
-  sm: {
-    height: 22,
-    paddingH: 8,
-    fontSize: 11,
-    dot: 5,
-    gap: 5
-  },
-  md: {
-    height: 24,
-    paddingH: 10,
-    fontSize: 12,
-    dot: 6,
-    gap: 6
-  }
-};
-
-/** Opacity of the tone behind a soft badge's text; the same as Button's soft fill. */
-const SOFT_FILL_OPACITY = 0.14;
-/**
- * Opacity of the tone in a soft badge's border. Full strength next to a 14%
- * tint reads as a heavy ring; a lighter shade of the status colour is the
- * usual edge on a tinted pill.
- */
-const SOFT_BORDER_OPACITY = 0.4;
-const BORDER_WIDTH = 1;
-/** The tone's base colour and the ink that sits on its solid fill. */
-const toneFor = (theme, tone) => {
-  switch (tone) {
-    case 'success':
-      return {
-        base: theme.colors.success,
-        on: theme.colors.onSuccess
-      };
-    case 'warning':
-      return {
-        base: theme.colors.warning,
-        on: theme.colors.onWarning
-      };
-    case 'error':
-      return {
-        base: theme.colors.error,
-        on: theme.colors.onError
-      };
-    case 'info':
-      return {
-        base: theme.colors.info,
-        on: theme.colors.onInfo
-      };
-    case 'primary':
-      return {
-        base: theme.colors.primary,
-        on: theme.colors.onPrimary
-      };
-    case 'neutral':
-    default:
-      // Neutral has no tone to tint: it takes the theme's surface greys and
-      // the secondary text tier, which reads on its own tint where the
-      // tertiary tier does not.
-      return {
-        base: theme.colors.text.secondary,
-        on: theme.colors.text.inverse
-      };
-  }
-};
-const isHex = value => typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value);
-const paletteFor = (theme, tone, variant, color) => {
-  const custom = isHex(color);
-  const {
-    base,
-    on
-  } = custom ?
-  // A custom colour has no themed on-colour of its own. The inverse text
-  // colour is right for the bright status colours apps actually send.
-  {
-    base: color,
-    on: theme.colors.text.inverse
-  } : toneFor(theme, tone);
-  const neutral = !custom && tone === 'neutral';
-  const tint = neutral ? theme.colors.background.tertiary : (0, _color.tintOf)(base, SOFT_FILL_OPACITY, theme.colors.background.secondary);
-  const edge = neutral ? theme.colors.border.primary : (0, _color.tintOf)(base, SOFT_BORDER_OPACITY, base);
-  switch (variant) {
-    case 'solid':
-      return {
-        fill: base,
-        border: base,
-        text: on,
-        dot: on
-      };
-    case 'outline':
-      return {
-        fill: 'transparent',
-        border: neutral ? edge : base,
-        text: base,
-        dot: base
-      };
-    case 'soft':
-    default:
-      return {
-        fill: tint,
-        border: edge,
-        text: base,
-        dot: base
-      };
-  }
-};
-const StatusBadge = exports.StatusBadge = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    label,
-    tone = 'neutral',
-    variant = 'soft',
-    size = 'md',
-    dot = false,
-    color,
-    loading = false,
-    accessibilityLabel,
-    style,
-    textStyle,
-    testID
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const sz = sizeMap[size];
-  const palette = (0, _react.useMemo)(() => paletteFor(theme, tone, variant, color), [theme, tone, variant, color]);
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusBadgeSkeleton, {
-      ...props
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    ref: ref,
-    accessible: true,
-    accessibilityRole: "text",
-    accessibilityLabel: accessibilityLabel ?? label,
-    testID: testID,
-    style: [styles.base, {
-      height: sz.height,
-      paddingHorizontal: sz.paddingH,
-      borderRadius: sz.height / 2,
-      ..._corners.smoothCorners,
-      backgroundColor: palette.fill,
-      borderColor: palette.border,
-      borderWidth: BORDER_WIDTH
-    }, style],
-    children: [dot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      testID: "status-badge-dot",
-      style: {
-        width: sz.dot,
-        height: sz.dot,
-        borderRadius: sz.dot / 2,
-        marginRight: sz.gap,
-        backgroundColor: palette.dot
-      }
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.label, {
-        color: palette.text,
-        fontSize: sz.fontSize,
-        ...(0, _index.fontFor)(theme, 'semibold')
-      }, textStyle],
-      numberOfLines: 1,
-      allowFontScaling: false,
-      children: label
-    })]
-  });
-});
-StatusBadge.displayName = 'StatusBadge';
-
-/**
- * Placeholder shape for `<StatusBadge>`: a pill of the configured size, as
- * wide as the label would make it, with room for the dot when one is asked
- * for, so a list of statuses keeps its column width while it loads.
- */
-const StatusBadgeSkeleton = ({
-  label,
-  size = 'md',
-  dot,
-  style
-}) => {
-  const sz = sizeMap[size];
-  const labelWidth = Math.max(32, Math.min(120, (label ?? '').length * 6.5));
-  const width = labelWidth + sz.paddingH * 2 + (dot ? sz.dot + sz.gap : 0);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-    width: width,
-    height: sz.height,
-    radius: sz.height / 2,
-    style: [styles.skeleton, style]
-  });
-};
-StatusBadgeSkeleton.displayName = 'StatusBadgeSkeleton';
-StatusBadge.Skeleton = StatusBadgeSkeleton;
-const styles = _reactNative.StyleSheet.create({
-  base: {
-    alignSelf: 'flex-start',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  label: {
-    textAlign: 'center',
-    includeFontPadding: false,
-    textAlignVertical: 'center'
-  },
-  skeleton: {
-    alignSelf: 'flex-start'
-  }
-});
-var _default = exports.default = StatusBadge;
-//# sourceMappingURL=StatusBadge.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.StatusBadge=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_index2=require("../Skeleton/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,a,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(s=t?o:r){if(s.has(e))return s.get(e);s.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?s(n,t,a):n[t]=e[t]);return n})(e,t)}const sizeMap={sm:{height:22,paddingH:8,fontSize:11,dot:5,gap:5},md:{height:24,paddingH:10,fontSize:12,dot:6,gap:6}},SOFT_FILL_OPACITY=.14,SOFT_BORDER_OPACITY=.4,BORDER_WIDTH=1,toneFor=(e,t)=>{switch(t){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"primary":return{base:e.colors.primary,on:e.colors.onPrimary};default:return{base:e.colors.text.secondary,on:e.colors.text.inverse}}},isHex=e=>"string"==typeof e&&/^#[0-9a-f]{6}$/i.test(e),paletteFor=(e,t,r,o)=>{const s=isHex(o),{base:a,on:n}=s?{base:o,on:e.colors.text.inverse}:toneFor(e,t),i=!s&&"neutral"===t,l=i?e.colors.background.tertiary:(0,_color.tintOf)(a,.14,e.colors.background.secondary),d=i?e.colors.border.primary:(0,_color.tintOf)(a,.4,a);switch(r){case"solid":return{fill:a,border:a,text:n,dot:n};case"outline":return{fill:"transparent",border:i?d:a,text:a,dot:a};default:return{fill:l,border:d,text:a,dot:a}}},StatusBadge=exports.StatusBadge=(0,_react.forwardRef)((e,t)=>{const{label:r,tone:o="neutral",variant:s="soft",size:a="md",dot:n=!1,color:i,loading:l=!1,accessibilityLabel:d,style:c,textStyle:u,testID:g}=e,f=(0,_index.useTheme)(),x=sizeMap[a],p=(0,_react.useMemo)(()=>paletteFor(f,o,s,i),[f,o,s,i]);return l?(0,_jsxRuntime.jsx)(StatusBadgeSkeleton,{...e}):(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,accessible:!0,accessibilityRole:"text",accessibilityLabel:d??r,testID:g,style:[styles.base,{minHeight:x.height,paddingHorizontal:x.paddingH,borderRadius:f.radius.full,..._corners.smoothCorners,backgroundColor:p.fill,borderColor:p.border,borderWidth:1},c],children:[n?(0,_jsxRuntime.jsx)(_reactNative.View,{testID:"status-badge-dot",style:{width:x.dot,height:x.dot,borderRadius:x.dot/2,marginRight:x.gap,backgroundColor:p.dot}}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.label,{color:p.text,fontSize:x.fontSize,...(0,_index.fontFor)(f,"semibold")},u],numberOfLines:1,maxFontSizeMultiplier:f.maxFontSizeMultiplier,children:r})]})});StatusBadge.displayName="StatusBadge";const StatusBadgeSkeleton=({label:e,size:t="md",dot:r,style:o})=>{const s=sizeMap[t],a=Math.max(32,Math.min(120,6.5*(e??"").length))+2*s.paddingH+(r?s.dot+s.gap:0);return(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:a,height:s.height,radius:s.height/2,style:[styles.skeleton,o]})};StatusBadgeSkeleton.displayName="StatusBadgeSkeleton",StatusBadge.Skeleton=StatusBadgeSkeleton;const styles=_reactNative.StyleSheet.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},skeleton:{alignSelf:"flex-start"}});var _default=exports.default=StatusBadge;

package/lib/commonjs/components/StatusBadge/index.js

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "StatusBadge", {
-  enumerable: true,
-  get: function () {
-    return _StatusBadge.StatusBadge;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _StatusBadge.default;
-  }
-});
-var _StatusBadge = _interopRequireWildcard(require("./StatusBadge.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"StatusBadge",{enumerable:!0,get:function(){return _StatusBadge.StatusBadge}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _StatusBadge.default}});var _StatusBadge=_interopRequireWildcard(require("./StatusBadge.js"));function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var u,a,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(u=t?n:r){if(u.has(e))return u.get(e);u.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(u=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?u(o,t,a):o[t]=e[t]);return o})(e,t)}