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

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

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

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

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

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
+import r,{useEffect as o,useMemo as t,useRef as e}from"react";import{Animated as s,StyleSheet as n,View as i}from"react-native";import{createAnimatedValue as a,useTheme as d}from"../../theme/index.js";import{smoothCorners as p}from"../../utils/corners.js";import{jsx as m}from"react/jsx-runtime";const c={sm:{outer:16,inner:8},md:{outer:20,inner:10},lg:{outer:24,inner:12}};export const RadioDot=r=>{const{selected:n,color:l,disabled:u=!1,size:y="md",style:f,dotStyle:g}=r,b=d(),h=t(()=>buildStyles(),[]),R=l??b.colors.primary;let x,j;if("number"==typeof y)x=y,j=Math.round(y/2);else{const r=b.components.radio?.[y];x=r?.outer??c[y].outer,j=r?.inner??c[y].inner}const D=e(a(n?1:0)).current;o(()=>{const r=s.spring(D,{toValue:n?1:0,damping:b.motion.spring.snappy.damping,stiffness:b.motion.spring.snappy.stiffness,mass:b.motion.spring.snappy.mass,useNativeDriver:!0});return r.start(),()=>r.stop()},[n,D,b.motion.spring.snappy]);const w=D.interpolate({inputRange:[0,1],outputRange:[0,1]}),v=u?b.colors.border.primary:n?R:b.colors.border.primary;return m(i,{style:[h.outer,{width:x,height:x,borderWidth:b.colors.border.width,borderRadius:x/2,...p,borderColor:v},f],children:m(s.View,{style:[{width:j,height:j,borderRadius:j/2,...p,backgroundColor:u?b.colors.text.disabled:R,opacity:D,transform:[{scale:w}]},g]})})};RadioDot.displayName="RadioDot";const buildStyles=()=>n.create({outer:{alignItems:"center",justifyContent:"center"}});export default RadioDot;

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

@@ -1,45 +1 @@
-"use strict";
-
-import React, { useMemo } from 'react';
-import { View } from 'react-native';
-import { useControllableState } from "../../hooks/index.js";
-import { RadioGroupContext } from "./Radio.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const RadioGroup = ({
-  value,
-  defaultValue,
-  onChange,
-  children,
-  disabled = false,
-  accessibilityLabel,
-  style,
-  testID
-}) => {
-  const [current, setCurrent] = useControllableState({
-    value,
-    defaultValue: defaultValue ?? undefined,
-    onChange: onChange
-  });
-  const ctx = useMemo(() => ({
-    selectedValue: current,
-    onChange: setCurrent,
-    disabled
-  }), [current, setCurrent, disabled]);
-  return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
-    value: ctx,
-    children: /*#__PURE__*/_jsx(View, {
-      accessibilityRole: "radiogroup",
-      accessibilityLabel: accessibilityLabel,
-      accessibilityState: {
-        disabled
-      },
-      testID: testID,
-      style: style,
-      children: children
-    })
-  });
-};
-RadioGroup.displayName = 'RadioGroup';
-export { RadioGroup };
-export default RadioGroup;
-//# sourceMappingURL=RadioGroup.js.map
+import e,{useMemo as a}from"react";import{View as i}from"react-native";import{useControllableState as t}from"../../hooks/index.js";import{RadioGroupContext as o}from"./Radio.js";import{jsx as l}from"react/jsx-runtime";const RadioGroup=({value:e,defaultValue:r,onChange:s,children:d,disabled:c=!1,accessibilityLabel:n,style:u,testID:m})=>{const[p,b]=t({value:e,defaultValue:r??void 0,onChange:s}),f=a(()=>({selectedValue:p,onChange:b,disabled:c}),[p,b,c]);return l(o.Provider,{value:f,children:l(i,{accessibilityRole:"radiogroup",accessibilityLabel:n,accessibilityState:{disabled:c},testID:m,style:u,children:d})})};RadioGroup.displayName="RadioGroup";export{RadioGroup};export default RadioGroup;