@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/commonjs/components/ProgressBar/ProgressBar.js

@@ -1,202 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ProgressBar = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _jsxRuntime = require("react/jsx-runtime");
-const toneColor = (theme, tone) => {
-  switch (tone) {
-    case 'success':
-      return theme.colors.success;
-    case 'warning':
-      return theme.colors.warning;
-    case 'error':
-      return theme.colors.error;
-    case 'primary':
-    default:
-      return theme.colors.primary;
-  }
-};
-const clampProgress = value => {
-  if (typeof value !== 'number' || Number.isNaN(value)) {
-    return 0;
-  }
-  if (value < 0) {
-    return 0;
-  }
-  if (value > 1) {
-    return 1;
-  }
-  return value;
-};
-const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const theme = (0, _index.useTheme)();
-  const {
-    progress,
-    indeterminate: indeterminateProp,
-    height = 6,
-    radius,
-    tone = 'primary',
-    trackColor,
-    barColor,
-    gradient,
-    segments,
-    animated = true,
-    style,
-    containerStyle,
-    barStyle,
-    accessibilityLabel,
-    testID
-  } = props;
-  const isIndeterminate = indeterminateProp ?? typeof progress !== 'number';
-  const clamped = clampProgress(progress);
-  const fillAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(clamped)).current;
-  const loopAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const widthAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const widthRef = (0, _react.useRef)(0);
-  const determinateDuration = theme.components.progressBar?.determinateAnimationDuration ?? 400;
-  const indeterminateDuration = theme.components.progressBar?.indeterminateLoopDuration ?? 1500;
-  const indeterminateWidth = theme.components.progressBar?.indeterminateWidth ?? '30%';
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const resolvedRadius = radius ?? theme.radius.full;
-  const resolvedTrack = trackColor ?? theme.colors.surface.disabled;
-  const resolvedBar = barColor ?? toneColor(theme, tone);
-  const resolvedGradient = (0, _react.useMemo)(() => {
-    if (!gradient) {
-      return null;
-    }
-    if (typeof gradient === 'string') {
-      return theme.gradients[gradient] ?? null;
-    }
-    return gradient;
-  }, [gradient, theme.gradients]);
-  const hasSegments = Array.isArray(segments) && segments.length > 0;
-  (0, _react.useEffect)(() => {
-    if (isIndeterminate) {
-      return;
-    }
-    if (!animated) {
-      fillAnim.setValue(clamped);
-      return;
-    }
-    _reactNative.Animated.timing(fillAnim, {
-      toValue: clamped,
-      duration: determinateDuration,
-      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: false
-    }).start();
-  }, [animated, clamped, determinateDuration, fillAnim, isIndeterminate, theme]);
-  (0, _react.useEffect)(() => {
-    if (!isIndeterminate) {
-      return;
-    }
-    (0, _index.setNativeValue)(loopAnim, 0);
-    const animation = _reactNative.Animated.loop(_reactNative.Animated.timing(loopAnim, {
-      toValue: 1,
-      duration: indeterminateDuration,
-      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
-      useNativeDriver: true
-    }));
-    animation.start();
-    return () => {
-      animation.stop();
-    };
-  }, [isIndeterminate, loopAnim, indeterminateDuration]);
-  const determinateWidth = fillAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0%', '100%']
-  });
-  const indeterminateTranslate = loopAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-1, 1]
-  });
-  const onLayout = event => {
-    const w = event.nativeEvent.layout.width;
-    widthRef.current = w;
-    (0, _index.setNativeValue)(widthAnim, w);
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    ref: ref,
-    accessibilityRole: "progressbar",
-    accessibilityLabel: accessibilityLabel,
-    accessibilityValue: isIndeterminate ? {
-      text: 'Loading'
-    } : {
-      min: 0,
-      max: 100,
-      now: Math.round(clamped * 100)
-    },
-    testID: testID,
-    onLayout: onLayout,
-    style: [styles.track, {
-      height,
-      borderRadius: resolvedRadius,
-      ..._corners.smoothCorners,
-      backgroundColor: resolvedTrack
-    }, style, containerStyle],
-    children: hasSegments ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.segments, {
-        height
-      }],
-      children: (segments ?? []).map((s, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          width: `${clampProgress(s.value) * 100}%`,
-          height,
-          backgroundColor: s.color ?? toneColor(theme, s.tone ?? 'primary')
-        }
-      }, i))
-    }) : isIndeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [styles.indeterminateBar, {
-        height,
-        borderRadius: resolvedRadius,
-        ..._corners.smoothCorners,
-        backgroundColor: resolvedBar,
-        width: indeterminateWidth,
-        transform: [{
-          translateX: _reactNative.Animated.multiply(indeterminateTranslate, widthAnim)
-        }]
-      }, barStyle]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [styles.determinateBar, {
-        height,
-        borderRadius: resolvedRadius,
-        ..._corners.smoothCorners,
-        backgroundColor: resolvedGradient ? 'transparent' : resolvedBar,
-        width: determinateWidth,
-        overflow: resolvedGradient ? 'hidden' : undefined
-      }, barStyle],
-      children: resolvedGradient ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Gradient, {
-        gradient: resolvedGradient,
-        style: _reactNative.StyleSheet.absoluteFill
-      }) : null
-    })
-  });
-});
-ProgressBar.displayName = 'ProgressBar';
-const buildStyles = _theme => _reactNative.StyleSheet.create({
-  track: {
-    width: '100%',
-    overflow: 'hidden'
-  },
-  determinateBar: {
-    position: 'absolute',
-    left: 0,
-    top: 0
-  },
-  indeterminateBar: {
-    position: 'absolute',
-    left: 0,
-    top: 0
-  },
-  segments: {
-    flexDirection: 'row',
-    width: '100%'
-  }
-});
-var _default = exports.default = ProgressBar;
-//# sourceMappingURL=ProgressBar.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ProgressBar=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_jsxRuntime=require("react/jsx-runtime");const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},clampProgress=e=>"number"!=typeof e||Number.isNaN(e)||e<0?0:e>1?1:e,ProgressBar=exports.ProgressBar=(0,_react.forwardRef)((e,t)=>{const r=(0,_index.useTheme)(),{progress:a,label:i,showPercent:s=!1,indeterminate:n,height:o=6,radius:l,tone:c="primary",trackColor:u,barColor:d,gradient:m,segments:_,animated:g=!0,style:p,containerStyle:x,barStyle:h,accessibilityLabel:y,testID:f}=e,v=n??"number"!=typeof a,b=clampProgress(a),w=(0,_react.useRef)((0,_index.createAnimatedValue)(b)).current,j=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,N=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,R=(0,_react.useRef)(0),V=r.components.progressBar?.determinateAnimationDuration??400,B=r.components.progressBar?.indeterminateLoopDuration??1500,A=r.components.progressBar?.indeterminateWidth??"30%",C=(0,_react.useMemo)(()=>buildStyles(r),[r]),P=l??r.radius.full,S=u??r.colors.surface.disabled,k=d??toneColor(r,c),D=(0,_react.useMemo)(()=>m?"string"==typeof m?r.gradients[m]??null:m:null,[m,r.gradients]),E=Array.isArray(_)&&_.length>0;(0,_react.useEffect)(()=>{v||(g?_reactNative.Animated.timing(w,{toValue:b,duration:V,easing:_reactNative.Easing.bezier(...r.motion.easing.standard),useNativeDriver:!1}).start():w.setValue(b))},[g,b,V,w,v,r]),(0,_react.useEffect)(()=>{if(!v)return;(0,_index.setNativeValue)(j,0);const e=_reactNative.Animated.loop(_reactNative.Animated.timing(j,{toValue:1,duration:B,easing:_reactNative.Easing.inOut(_reactNative.Easing.ease),useNativeDriver:!0}));return e.start(),()=>{e.stop()}},[v,j,B]);const q=w.interpolate({inputRange:[0,1],outputRange:["0%","100%"]}),L=j.interpolate({inputRange:[0,1],outputRange:[-1,1]}),M=s&&!v&&!E,z=null!=i||M,F=y??("string"==typeof i?i:void 0),I=(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,accessibilityRole:"progressbar",accessibilityLabel:F,accessibilityValue:v?{text:"Loading"}:{min:0,max:100,now:Math.round(100*b)},testID:f,onLayout:e=>{const t=e.nativeEvent.layout.width;R.current=t,(0,_index.setNativeValue)(N,t)},style:[C.track,{height:o,borderRadius:P,..._corners.smoothCorners,backgroundColor:S},p,x],children:E?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[C.segments,{height:o}],children:(_??[]).map((e,t)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:100*clampProgress(e.value)+"%",height:o,backgroundColor:e.color??toneColor(r,e.tone??"primary")}},t))}):v?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[C.indeterminateBar,{height:o,borderRadius:P,..._corners.smoothCorners,backgroundColor:k,width:A,transform:[{translateX:_reactNative.Animated.multiply(L,N)}]},h]}):(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[C.determinateBar,{height:o,borderRadius:P,..._corners.smoothCorners,backgroundColor:D?"transparent":k,width:q,overflow:D?"hidden":void 0},h],children:D?(0,_jsxRuntime.jsx)(_index.Gradient,{gradient:D,style:_reactNative.StyleSheet.absoluteFill}):null})});if(!z)return I;const T={fontSize:r.typography.fontSize.sm,...(0,_index.fontFor)(r,"medium")};return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:C.wrapper,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[C.labelRow,{marginBottom:r.spacing.xs}],children:["string"==typeof i||"number"==typeof i?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[C.label,T,{color:r.colors.text.primary}],children:i}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:C.label,children:i}),M?(0,_jsxRuntime.jsx)(_reactNative.Text,{accessible:!1,importantForAccessibility:"no",style:[T,{color:r.colors.text.secondary}],children:`${Math.round(100*b)}%`}):null]}),I]})});ProgressBar.displayName="ProgressBar";const buildStyles=e=>_reactNative.StyleSheet.create({wrapper:{width:"100%"},labelRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:8},label:{flexShrink:1},track:{width:"100%",overflow:"hidden"},determinateBar:{position:"absolute",left:0,top:0},indeterminateBar:{position:"absolute",left:0,top:0},segments:{flexDirection:"row",width:"100%"}});var _default=exports.default=ProgressBar;

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ProgressBar", {
-  enumerable: true,
-  get: function () {
-    return _ProgressBar.ProgressBar;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _ProgressBar.default;
-  }
-});
-var _ProgressBar = _interopRequireWildcard(require("./ProgressBar.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,"ProgressBar",{enumerable:!0,get:function(){return _ProgressBar.ProgressBar}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _ProgressBar.default}});var _ProgressBar=_interopRequireWildcard(require("./ProgressBar.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 o,u,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(o=r?n:t){if(o.has(e))return o.get(e);o.set(e,a)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((u=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(u.get||u.set)?o(a,r,u):a[r]=e[r]);return a})(e,r)}

package/lib/commonjs/components/ProgressRing/ProgressRing.js

@@ -1,191 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ProgressRing = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
-var _index = require("../../hooks/index.js");
-var _index2 = require("../../theme/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); }
-/**
- * ProgressRing: the circular sibling of ProgressBar.
- *
- * A track circle and a fill arc drawn with react-native-svg, the arc's
- * length driven by one animated value so a progress change sweeps
- * smoothly from the old fraction to the new one. Starts at 12 o'clock and
- * runs clockwise. Whatever is passed as `children` sits centred inside the
- * ring (an Avatar, an icon, a percentage), so the ring can wrap a picture
- * without the picture knowing about it.
- *
- * Determinate only: an unknown-duration wait is Spinner's job.
- */
-
-const AnimatedCircle = _reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Circle);
-const toneColor = (theme, tone) => {
-  switch (tone) {
-    case 'success':
-      return theme.colors.success;
-    case 'warning':
-      return theme.colors.warning;
-    case 'error':
-      return theme.colors.error;
-    default:
-      return theme.colors.primary;
-  }
-};
-const clampProgress = value => {
-  if (typeof value !== 'number' || Number.isNaN(value)) {
-    return 0;
-  }
-  return Math.min(1, Math.max(0, value));
-};
-const DEFAULT_STROKE_WIDTH = 4;
-const DEFAULT_DURATION = 600;
-const DEFAULT_COLOR_STOPS = [1 / 3, 2 / 3];
-// Width of the step between two bands: the colour holds up to just under
-// the stop and switches at the stop itself.
-const STOP_EDGE = 0.0001;
-const ProgressRing = exports.ProgressRing = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    progress,
-    size = 48,
-    strokeWidth: strokeWidthProp,
-    tone = 'primary',
-    trackColor,
-    ringColor,
-    colorByProgress = false,
-    animated = true,
-    rounded = true,
-    children,
-    accessibilityLabel,
-    style,
-    testID
-  } = props;
-  const theme = (0, _index2.useTheme)();
-  const tokens = theme.components.progressRing;
-  const reduceMotion = (0, _index.useReducedMotion)();
-  const clamped = clampProgress(progress);
-  const strokeWidth = strokeWidthProp ?? tokens?.strokeWidth ?? DEFAULT_STROKE_WIDTH;
-  const duration = tokens?.animationDuration ?? DEFAULT_DURATION;
-  const resolvedTrack = trackColor ?? tokens?.trackColor ?? theme.colors.surface.disabled;
-  const [stopLow, stopHigh] = tokens?.colorStops ?? DEFAULT_COLOR_STOPS;
-
-  // The arc is a full circle whose dash pattern is one dash the length of the
-  // circumference; the offset hides the part not yet reached. One value,
-  // one interpolation: the node driving strokeDashoffset is created once.
-  const radius = Math.max(0, (size - strokeWidth) / 2);
-  const circumference = 2 * Math.PI * radius;
-  const fillAnim = (0, _react.useRef)((0, _index2.createAnimatedValue)(clamped)).current;
-  (0, _react.useEffect)(() => {
-    if (!animated || reduceMotion) {
-      fillAnim.setValue(clamped);
-      return;
-    }
-    const anim = _reactNative.Animated.timing(fillAnim, {
-      toValue: clamped,
-      duration,
-      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: false
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [animated, clamped, duration, fillAnim, reduceMotion, theme.motion.easing.standard]);
-  const dashOffset = fillAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [circumference, 0]
-  });
-  // A round cap draws a dot even when the dash is zero long; keep the arc
-  // hidden at exactly zero so an empty ring is empty.
-  const fillOpacity = fillAnim.interpolate({
-    inputRange: [0, 0.001, 1],
-    outputRange: [0, 1, 1]
-  });
-  // Stepped bands on the same value: red holds to just under the first
-  // stop, amber to just under the second, green from there.
-  const bandedRing = (0, _react.useMemo)(() => fillAnim.interpolate({
-    inputRange: [0, stopLow - STOP_EDGE, stopLow, stopHigh - STOP_EDGE, stopHigh, 1],
-    outputRange: [theme.colors.error, theme.colors.error, theme.colors.warning, theme.colors.warning, theme.colors.success, theme.colors.success]
-  }), [fillAnim, stopLow, stopHigh, theme.colors.error, theme.colors.warning, theme.colors.success]);
-  const resolvedRing = ringColor ?? (colorByProgress ? bandedRing : toneColor(theme, tone));
-  const styles = (0, _react.useMemo)(() => buildStyles(), []);
-  const centre = size / 2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    ref: ref
-    // A bare ring is one screen-reader element. With content inside, the
-    // content speaks for itself (an avatar, a pressable picker): grouping
-    // it under the ring would make it unreachable.
-    ,
-    accessible: children == null,
-    accessibilityRole: "progressbar",
-    accessibilityLabel: accessibilityLabel,
-    accessibilityValue: {
-      min: 0,
-      max: 100,
-      now: Math.round(clamped * 100)
-    },
-    testID: testID,
-    style: [styles.root, {
-      width: size,
-      height: size
-    }, style],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
-      width: size,
-      height: size,
-      viewBox: `0 0 ${size} ${size}`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
-        cx: centre,
-        cy: centre,
-        r: radius,
-        stroke: resolvedTrack,
-        strokeWidth: strokeWidth,
-        fill: "none"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedCircle, {
-        cx: centre,
-        cy: centre,
-        r: radius
-        // The banded colour is an Animated node; resolved the same way.
-        ,
-        stroke: resolvedRing,
-        strokeWidth: strokeWidth,
-        strokeLinecap: rounded ? 'round' : 'butt',
-        strokeDasharray: `${circumference} ${circumference}`
-        // react-native-svg types these as numbers; the Animated nodes are
-        // resolved before they reach Circle (the SquircleFill precedent).
-        ,
-        strokeDashoffset: dashOffset,
-        strokeOpacity: fillOpacity,
-        fill: "none"
-        // Rotate the arc, not the children: the sweep starts at 12 o'clock.
-        ,
-        transform: `rotate(-90 ${centre} ${centre})`,
-        testID: testID ? `${testID}-fill` : undefined
-      })]
-    }), children != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.content,
-      pointerEvents: "box-none",
-      children: children
-    }) : null]
-  });
-});
-ProgressRing.displayName = 'ProgressRing';
-const buildStyles = () => _reactNative.StyleSheet.create({
-  root: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  content: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-var _default = exports.default = ProgressRing;
-//# sourceMappingURL=ProgressRing.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ProgressRing=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSvg=_interopRequireWildcard(require("react-native-svg")),_index=require("../../hooks/index.js"),_index2=require("../../theme/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 i,s,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(i=t?o:r){if(i.has(e))return i.get(e);i.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?i(n,t,s):n[t]=e[t]);return n})(e,t)}const AnimatedCircle=_reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Circle),toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},clampProgress=e=>"number"!=typeof e||Number.isNaN(e)?0:Math.min(1,Math.max(0,e)),DEFAULT_STROKE_WIDTH=4,DEFAULT_DURATION=600,DEFAULT_COLOR_STOPS=[1/3,2/3],STOP_EDGE=1e-4,ProgressRing=exports.ProgressRing=(0,_react.forwardRef)((e,t)=>{const{progress:r,size:o=48,strokeWidth:i,tone:s="primary",trackColor:n,ringColor:a,colorByProgress:c=!1,animated:l=!0,rounded:u=!0,children:d,accessibilityLabel:g,style:_,testID:p}=e,f=(0,_index2.useTheme)(),m=f.components.progressRing,x=(0,_index.useReducedMotion)(),v=clampProgress(r),R=i??m?.strokeWidth??4,h=m?.animationDuration??600,y=n??m?.trackColor??f.colors.surface.disabled,[b,j]=m?.colorStops??DEFAULT_COLOR_STOPS,w=Math.max(0,(o-R)/2),N=2*Math.PI*w,P=(0,_react.useRef)((0,_index2.createAnimatedValue)(v)).current;(0,_react.useEffect)(()=>{if(!l||x)return void P.setValue(v);const e=_reactNative.Animated.timing(P,{toValue:v,duration:h,easing:_reactNative.Easing.bezier(...f.motion.easing.standard),useNativeDriver:!1});return e.start(),()=>e.stop()},[l,v,h,P,x,f.motion.easing.standard]);const k=P.interpolate({inputRange:[0,1],outputRange:[N,0]}),D=P.interpolate({inputRange:[0,.001,1],outputRange:[0,1,1]}),O=(0,_react.useMemo)(()=>P.interpolate({inputRange:[0,b-1e-4,b,j-1e-4,j,1],outputRange:[f.colors.error,f.colors.error,f.colors.warning,f.colors.warning,f.colors.success,f.colors.success]}),[P,b,j,f.colors.error,f.colors.warning,f.colors.success]),S=a??(c?O:toneColor(f,s)),C=(0,_react.useMemo)(()=>buildStyles(),[]),M=o/2;return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,accessible:null==d,accessibilityRole:"progressbar",accessibilityLabel:g,accessibilityValue:{min:0,max:100,now:Math.round(100*v)},testID:p,style:[C.root,{width:o,height:o},_],children:[(0,_jsxRuntime.jsxs)(_reactNativeSvg.default,{width:o,height:o,viewBox:`0 0 ${o} ${o}`,children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Circle,{cx:M,cy:M,r:w,stroke:y,strokeWidth:R,fill:"none"}),(0,_jsxRuntime.jsx)(AnimatedCircle,{cx:M,cy:M,r:w,stroke:S,strokeWidth:R,strokeLinecap:u?"round":"butt",strokeDasharray:`${N} ${N}`,strokeDashoffset:k,strokeOpacity:D,fill:"none",transform:`rotate(-90 ${M} ${M})`,testID:p?`${p}-fill`:void 0})]}),null!=d?(0,_jsxRuntime.jsx)(_reactNative.View,{style:C.content,pointerEvents:"box-none",children:d}):null]})});ProgressRing.displayName="ProgressRing";const buildStyles=()=>_reactNative.StyleSheet.create({root:{alignItems:"center",justifyContent:"center"},content:{position:"absolute",top:0,right:0,bottom:0,left:0,alignItems:"center",justifyContent:"center"}});var _default=exports.default=ProgressRing;

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ProgressRing", {
-  enumerable: true,
-  get: function () {
-    return _ProgressRing.ProgressRing;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _ProgressRing.default;
-  }
-});
-var _ProgressRing = _interopRequireWildcard(require("./ProgressRing.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,"ProgressRing",{enumerable:!0,get:function(){return _ProgressRing.ProgressRing}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _ProgressRing.default}});var _ProgressRing=_interopRequireWildcard(require("./ProgressRing.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 o,i,u={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return u;if(o=r?n:t){if(o.has(e))return o.get(e);o.set(e,u)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(i.get||i.set)?o(u,r,i):u[r]=e[r]);return u})(e,r)}

package/lib/commonjs/components/Radio/Radio.js

@@ -1,127 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useRadioGroup = exports.default = exports.RadioGroupContext = exports.Radio = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _hapticUtils = require("../../utils/hapticUtils.js");
-var _RadioDot = require("./RadioDot.js");
-var _jsxRuntime = require("react/jsx-runtime");
-const RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
-const useRadioGroup = () => (0, _react.useContext)(RadioGroupContext);
-exports.useRadioGroup = useRadioGroup;
-const toneColor = (theme, tone) => {
-  switch (tone) {
-    case 'success':
-      return theme.colors.success;
-    case 'warning':
-      return theme.colors.warning;
-    case 'error':
-      return theme.colors.error;
-    case 'primary':
-    default:
-      return theme.colors.primary;
-  }
-};
-const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    value,
-    selected: selectedProp,
-    onChange,
-    disabled: disabledProp = false,
-    label,
-    size = 'md',
-    tone = 'primary',
-    accessibilityLabel,
-    haptic,
-    style,
-    containerStyle,
-    circleStyle,
-    dotStyle,
-    labelStyle,
-    testID,
-    ...rest
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const ctx = useRadioGroup();
-
-  // `value` is required by the props, but a JavaScript consumer can still omit
-  // it, and the failure is silent rather than loud: inside a group,
-  // `selectedValue === undefined` makes every unselected radio look selected the
-  // moment nothing is chosen, and pressing one reports `undefined` as the
-  // choice. A conformance test omitted it for months without anything noticing.
-  if (__DEV__ && value === undefined) {
-    // biome-ignore lint/suspicious/noConsole: deliberate development-only warning, see above
-    console.warn('[@webority/mobile-ui] Radio was rendered without a `value`. ' + 'Selection compares against it, so the group cannot track which option is chosen.');
-  }
-  const selected = ctx ? ctx.selectedValue === value : !!selectedProp;
-  const disabled = ctx ? ctx.disabled || disabledProp : disabledProp;
-  const fillColor = toneColor(theme, tone);
-  const radioLabelGap = theme.components.radio?.labelGap ?? 10;
-  const handlePress = _event => {
-    if (disabled) {
-      return;
-    }
-    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _hapticUtils.triggerHaptic)(h);
-    }
-    if (ctx) {
-      ctx.onChange(value);
-    } else {
-      onChange?.(value);
-    }
-  };
-  const accessibleLabel = accessibilityLabel ?? label;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-    ref: ref,
-    onPress: handlePress,
-    disabled: disabled,
-    accessibilityRole: "radio",
-    accessibilityLabel: accessibleLabel,
-    accessibilityState: {
-      checked: selected,
-      disabled
-    },
-    testID: testID,
-    hitSlop: 6,
-    ...rest,
-    style: ({
-      pressed
-    }) => [styles.row, {
-      opacity: disabled ? 0.55 : pressed ? 0.85 : 1
-    }, style, containerStyle],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioDot.RadioDot, {
-      selected: selected,
-      color: fillColor,
-      disabled: disabled,
-      size: size,
-      style: circleStyle,
-      dotStyle: dotStyle
-    }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.label, {
-        marginLeft: radioLabelGap,
-        color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
-        fontSize: theme.typography.fontSize.base
-      }, labelStyle],
-      numberOfLines: 2,
-      children: label
-    }) : null]
-  });
-});
-Radio.displayName = 'Radio';
-const buildStyles = _theme => _reactNative.StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  label: {
-    flexShrink: 1
-  }
-});
-var _default = exports.default = Radio;
-//# sourceMappingURL=Radio.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useRadioGroup=exports.default=exports.RadioGroupContext=exports.Radio=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_ChoiceText=require("../FieldBase/ChoiceText.js"),_RadioDot=require("./RadioDot.js"),_jsxRuntime=require("react/jsx-runtime");const RadioGroupContext=exports.RadioGroupContext=(0,_react.createContext)(null),useRadioGroup=()=>(0,_react.useContext)(RadioGroupContext);exports.useRadioGroup=useRadioGroup;const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},Radio=exports.Radio=(0,_react.forwardRef)((e,t)=>{const{value:o,selected:i,onChange:r,disabled:s=!1,label:a,description:l,error:c,size:n="md",tone:d="primary",accessibilityLabel:u,haptic:p,style:x,containerStyle:_,circleStyle:b,dotStyle:h,labelStyle:R,testID:y,...m}=e,C=(0,_index.useTheme)(),w=(0,_react.useMemo)(()=>buildStyles(C),[C]),f=useRadioGroup();__DEV__&&void 0===o&&console.warn("[@webority/mobile-ui] Radio was rendered without a `value`. Selection compares against it, so the group cannot track which option is chosen.");const j=f?f.selectedValue===o:!!i,S=f&&f.disabled||s,v=toneColor(C,d),g=C.components.radio?.labelGap??10,G=u??a;return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:t,onPress:e=>{if(S)return;const t=(0,_hapticUtils.resolveHaptic)(p,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),f?f.onChange(o):r?.(o)},disabled:S,accessibilityRole:"radio",accessibilityLabel:G,accessibilityHint:m.accessibilityHint??l,accessibilityState:{checked:j,disabled:S},testID:y,hitSlop:6,...m,style:({pressed:e})=>[w.row,(0,_ChoiceText.hasChoiceDetail)(l,c)?w.rowTop:null,{opacity:S?.55:e?.85:1},x,_],children:[(0,_jsxRuntime.jsx)(_RadioDot.RadioDot,{selected:j,color:v,disabled:S,size:n,style:[!c||j||S?null:{borderColor:C.colors.field.borderError},b],dotStyle:h}),(0,_jsxRuntime.jsx)(_ChoiceText.ChoiceText,{label:a,description:l,error:c,disabled:S,labelLines:2,style:{marginLeft:g},labelStyle:R})]})});Radio.displayName="Radio";const buildStyles=e=>_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},rowTop:{alignItems:"flex-start"}});var _default=exports.default=Radio;