@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/ProgressBar/ProgressBar.js

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

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

@@ -1,4 +1 @@
-"use strict";
-
-export { default, ProgressBar } from "./ProgressBar.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{default,ProgressBar}from"./ProgressBar.js";

package/lib/module/components/ProgressRing/ProgressRing.js

@@ -1,187 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import { forwardRef, useEffect, useMemo, useRef } from 'react';
-import { Animated, Easing, StyleSheet, View } from 'react-native';
-import Svg, { Circle } from 'react-native-svg';
-import { useReducedMotion } from "../../hooks/index.js";
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedCircle = Animated.createAnimatedComponent(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 = /*#__PURE__*/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 = useTheme();
-  const tokens = theme.components.progressRing;
-  const reduceMotion = 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 = useRef(createAnimatedValue(clamped)).current;
-  useEffect(() => {
-    if (!animated || reduceMotion) {
-      fillAnim.setValue(clamped);
-      return;
-    }
-    const anim = Animated.timing(fillAnim, {
-      toValue: clamped,
-      duration,
-      easing: 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 = 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 = useMemo(() => buildStyles(), []);
-  const centre = size / 2;
-  return /*#__PURE__*/_jsxs(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__*/_jsxs(Svg, {
-      width: size,
-      height: size,
-      viewBox: `0 0 ${size} ${size}`,
-      children: [/*#__PURE__*/_jsx(Circle, {
-        cx: centre,
-        cy: centre,
-        r: radius,
-        stroke: resolvedTrack,
-        strokeWidth: strokeWidth,
-        fill: "none"
-      }), /*#__PURE__*/_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__*/_jsx(View, {
-      style: styles.content,
-      pointerEvents: "box-none",
-      children: children
-    }) : null]
-  });
-});
-ProgressRing.displayName = 'ProgressRing';
-const buildStyles = () => StyleSheet.create({
-  root: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  content: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-export { ProgressRing };
-export default ProgressRing;
-//# sourceMappingURL=ProgressRing.js.map
+"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Easing,StyleSheet,View}from"react-native";import Svg,{Circle}from"react-native-svg";import{useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const AnimatedCircle=Animated.createAnimatedComponent(Circle),toneColor=(e,r)=>{switch(r){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=forwardRef((e,r)=>{const{progress:t,size:o=48,strokeWidth:s,tone:i="primary",trackColor:n,ringColor:a,colorByProgress:c=!1,animated:l=!0,rounded:u=!0,children:m,accessibilityLabel:d,style:g,testID:p}=e,f=useTheme(),h=f.components.progressRing,R=useReducedMotion(),y=clampProgress(t),x=s??h?.strokeWidth??4,b=h?.animationDuration??600,w=n??h?.trackColor??f.colors.surface.disabled,[C,S]=h?.colorStops??DEFAULT_COLOR_STOPS,_=Math.max(0,(o-x)/2),j=2*Math.PI*_,D=useRef(createAnimatedValue(y)).current;useEffect(()=>{if(!l||R)return void D.setValue(y);const e=Animated.timing(D,{toValue:y,duration:b,easing:Easing.bezier(...f.motion.easing.standard),useNativeDriver:!1});return e.start(),()=>e.stop()},[l,y,b,D,R,f.motion.easing.standard]);const k=D.interpolate({inputRange:[0,1],outputRange:[j,0]}),A=D.interpolate({inputRange:[0,.001,1],outputRange:[0,1,1]}),E=useMemo(()=>D.interpolate({inputRange:[0,C-1e-4,C,S-1e-4,S,1],outputRange:[f.colors.error,f.colors.error,f.colors.warning,f.colors.warning,f.colors.success,f.colors.success]}),[D,C,S,f.colors.error,f.colors.warning,f.colors.success]),P=a??(c?E:toneColor(f,i)),T=useMemo(()=>buildStyles(),[]),v=o/2;return _jsxs(View,{ref:r,accessible:null==m,accessibilityRole:"progressbar",accessibilityLabel:d,accessibilityValue:{min:0,max:100,now:Math.round(100*y)},testID:p,style:[T.root,{width:o,height:o},g],children:[_jsxs(Svg,{width:o,height:o,viewBox:`0 0 ${o} ${o}`,children:[_jsx(Circle,{cx:v,cy:v,r:_,stroke:w,strokeWidth:x,fill:"none"}),_jsx(AnimatedCircle,{cx:v,cy:v,r:_,stroke:P,strokeWidth:x,strokeLinecap:u?"round":"butt",strokeDasharray:`${j} ${j}`,strokeDashoffset:k,strokeOpacity:A,fill:"none",transform:`rotate(-90 ${v} ${v})`,testID:p?`${p}-fill`:void 0})]}),null!=m?_jsx(View,{style:T.content,pointerEvents:"box-none",children:m}):null]})});ProgressRing.displayName="ProgressRing";const buildStyles=()=>StyleSheet.create({root:{alignItems:"center",justifyContent:"center"},content:{position:"absolute",top:0,right:0,bottom:0,left:0,alignItems:"center",justifyContent:"center"}});export{ProgressRing};export default ProgressRing;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { default, ProgressRing } from "./ProgressRing.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{default,ProgressRing}from"./ProgressRing.js";

package/lib/module/components/Radio/Radio.js

@@ -1,123 +1 @@
-"use strict";
-
-import { createContext, forwardRef, useContext, useMemo } from 'react';
-import { Pressable, StyleSheet, Text } from 'react-native';
-import { useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
-import { RadioDot } from "./RadioDot.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const RadioGroupContext = /*#__PURE__*/createContext(null);
-export const useRadioGroup = () => useContext(RadioGroupContext);
-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 = /*#__PURE__*/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 = useTheme();
-  const styles = 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 = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    if (ctx) {
-      ctx.onChange(value);
-    } else {
-      onChange?.(value);
-    }
-  };
-  const accessibleLabel = accessibilityLabel ?? label;
-  return /*#__PURE__*/_jsxs(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__*/_jsx(RadioDot, {
-      selected: selected,
-      color: fillColor,
-      disabled: disabled,
-      size: size,
-      style: circleStyle,
-      dotStyle: dotStyle
-    }), label ? /*#__PURE__*/_jsx(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 => StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  label: {
-    flexShrink: 1
-  }
-});
-export { Radio };
-export default Radio;
-//# sourceMappingURL=Radio.js.map
+"use strict";import{createContext,forwardRef,useContext,useMemo}from"react";import{Pressable,StyleSheet}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{RadioDot}from"./RadioDot.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const RadioGroupContext=createContext(null);export const useRadioGroup=()=>useContext(RadioGroupContext);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=forwardRef((e,t)=>{const{value:o,selected:r,onChange:s,disabled:i=!1,label:a,description:l,error:c,size:n="md",tone:d="primary",accessibilityLabel:p,haptic:u,style:m,containerStyle:b,circleStyle:h,dotStyle:y,labelStyle:x,testID:f,...C}=e,R=useTheme(),w=useMemo(()=>buildStyles(R),[R]),S=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 g=S?S.selectedValue===o:!!r,j=S&&S.disabled||i,D=toneColor(R,d),_=R.components.radio?.labelGap??10;return _jsxs(Pressable,{ref:t,onPress:e=>{if(j)return;const t=resolveHaptic(u,"selection");t&&triggerHaptic(t),S?S.onChange(o):s?.(o)},disabled:j,accessibilityRole:"radio",accessibilityLabel:p??a,accessibilityHint:C.accessibilityHint??l,accessibilityState:{checked:g,disabled:j},testID:f,hitSlop:6,...C,style:({pressed:e})=>[w.row,hasChoiceDetail(l,c)?w.rowTop:null,{opacity:j?.55:e?.85:1},m,b],children:[_jsx(RadioDot,{selected:g,color:D,disabled:j,size:n,style:[!c||g||j?null:{borderColor:R.colors.field.borderError},h],dotStyle:y}),_jsx(ChoiceText,{label:a,description:l,error:c,disabled:j,labelLines:2,style:{marginLeft:_},labelStyle:x})]})});Radio.displayName="Radio";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},rowTop:{alignItems:"flex-start"}});export{Radio};export default Radio;

package/lib/module/components/Radio/RadioDot.js

@@ -1,102 +1 @@
-"use strict";
-
-/**
- * RadioDot — the bare animated radio indicator (ring + spring-scaled dot).
- *
- * Extracted from Radio so custom option templates (ChoiceGroup `renderOption`,
- * bespoke cards) can embed the standard indicator without rebuilding the
- * animation or the disabled/selected colour rules. Purely visual — no press
- * handling, no a11y role; the parent control owns those.
- */
-
-import React, { useEffect, useMemo, useRef } from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const sizeMap = {
-  sm: {
-    outer: 16,
-    inner: 8
-  },
-  md: {
-    outer: 20,
-    inner: 10
-  },
-  lg: {
-    outer: 24,
-    inner: 12
-  }
-};
-export const RadioDot = props => {
-  const {
-    selected,
-    color,
-    disabled = false,
-    size = 'md',
-    style,
-    dotStyle
-  } = props;
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(), []);
-  const fillColor = color ?? theme.colors.primary;
-  let outer;
-  let inner;
-  if (typeof size === 'number') {
-    outer = size;
-    inner = Math.round(size / 2);
-  } else {
-    const overrides = theme.components.radio?.[size];
-    outer = overrides?.outer ?? sizeMap[size].outer;
-    inner = overrides?.inner ?? sizeMap[size].inner;
-  }
-  const progress = useRef(createAnimatedValue(selected ? 1 : 0)).current;
-  useEffect(() => {
-    const anim = Animated.spring(progress, {
-      toValue: selected ? 1 : 0,
-      damping: theme.motion.spring.snappy.damping,
-      stiffness: theme.motion.spring.snappy.stiffness,
-      mass: theme.motion.spring.snappy.mass,
-      useNativeDriver: true
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [selected, progress, theme.motion.spring.snappy]);
-  const scale = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1]
-  });
-  const borderColor = disabled ? theme.colors.border.primary : selected ? fillColor : theme.colors.border.primary;
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.outer, {
-      width: outer,
-      height: outer,
-      borderWidth: theme.colors.border.width,
-      borderRadius: outer / 2,
-      ...smoothCorners,
-      borderColor
-    }, style],
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [{
-        width: inner,
-        height: inner,
-        borderRadius: inner / 2,
-        ...smoothCorners,
-        backgroundColor: disabled ? theme.colors.text.disabled : fillColor,
-        opacity: progress,
-        transform: [{
-          scale
-        }]
-      }, dotStyle]
-    })
-  });
-};
-RadioDot.displayName = 'RadioDot';
-const buildStyles = () => StyleSheet.create({
-  outer: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-export default RadioDot;
-//# sourceMappingURL=RadioDot.js.map
+"use strict";import React,{useEffect,useMemo,useRef}from"react";import{Animated,StyleSheet,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{jsx as _jsx}from"react/jsx-runtime";const sizeMap={sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12}};export const RadioDot=e=>{const{selected:t,color:o,disabled:r=!1,size:s="md",style:i,dotStyle:n}=e,a=useTheme(),m=useMemo(()=>buildStyles(),[]),d=o??a.colors.primary;let u,p;if("number"==typeof s)u=s,p=Math.round(s/2);else{const e=a.components.radio?.[s];u=e?.outer??sizeMap[s].outer,p=e?.inner??sizeMap[s].inner}const c=useRef(createAnimatedValue(t?1:0)).current;useEffect(()=>{const e=Animated.spring(c,{toValue:t?1:0,damping:a.motion.spring.snappy.damping,stiffness:a.motion.spring.snappy.stiffness,mass:a.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[t,c,a.motion.spring.snappy]);const l=c.interpolate({inputRange:[0,1],outputRange:[0,1]}),f=r?a.colors.border.primary:t?d:a.colors.border.primary;return _jsx(View,{style:[m.outer,{width:u,height:u,borderWidth:a.colors.border.width,borderRadius:u/2,...smoothCorners,borderColor:f},i],children:_jsx(Animated.View,{style:[{width:p,height:p,borderRadius:p/2,...smoothCorners,backgroundColor:r?a.colors.text.disabled:d,opacity:c,transform:[{scale:l}]},n]})})};RadioDot.displayName="RadioDot";const buildStyles=()=>StyleSheet.create({outer:{alignItems:"center",justifyContent:"center"}});export default RadioDot;