@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/Slider/Slider.js

@@ -0,0 +1,498 @@
+"use strict";
+
+import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useControllableState } from "../../hooks/index.js";
+import { useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SIZE_MAP = {
+  sm: {
+    trackHeight: 4,
+    thumbDiameter: 24
+  },
+  md: {
+    trackHeight: 6,
+    thumbDiameter: 28
+  },
+  lg: {
+    trackHeight: 8,
+    thumbDiameter: 32
+  }
+};
+const TONE_TO_COLOR_KEY = {
+  primary: 'primary',
+  success: 'success',
+  warning: 'warning',
+  error: 'error'
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const snapToStep = (value, min, max, step) => {
+  if (step <= 0) {
+    return clamp(value, min, max);
+  }
+  const stepped = Math.round((value - min) / step) * step + min;
+  const decimals = String(step).split('.')[1]?.length ?? 0;
+  const fixed = decimals > 0 ? Number(stepped.toFixed(decimals)) : stepped;
+  return clamp(fixed, min, max);
+};
+const defaultFormatLabel = value => String(value);
+const Slider = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    tone = 'primary',
+    size = 'md',
+    showLabel = false,
+    formatLabel = defaultFormatLabel,
+    accessibilityLabel,
+    haptic,
+    style,
+    containerStyle,
+    trackStyle,
+    fillStyle,
+    thumbStyle,
+    labelStyle,
+    thumbPressScale,
+    labelShowDuration,
+    labelOpacity: labelOpacityProp,
+    testID
+  } = props;
+  const theme = useTheme();
+  const sliderTheme = theme.components.slider;
+  const sliderSizeTheme = sliderTheme?.[size];
+  const sizeCfg = useMemo(() => ({
+    trackHeight: sliderSizeTheme?.trackHeight ?? SIZE_MAP[size].trackHeight,
+    thumbDiameter: sliderSizeTheme?.thumbDiameter ?? SIZE_MAP[size].thumbDiameter
+  }), [sliderSizeTheme, size]);
+  const thumbPressAnimationEnabled = sliderTheme?.thumbPressAnimation ?? false;
+  const resolvedPressScale = thumbPressScale ?? sliderTheme?.thumbPressScale ?? 1.1;
+  const resolvedLabelDuration = labelShowDuration ?? sliderTheme?.labelShowDuration ?? theme.motion.duration.fast;
+  const resolvedLabelOpacity = labelOpacityProp ?? sliderTheme?.labelOpacity ?? 1;
+  const styles = useMemo(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
+  const springCfg = useMemo(() => ({
+    damping: theme.motion.spring.snappy.damping,
+    stiffness: theme.motion.spring.snappy.stiffness,
+    mass: theme.motion.spring.snappy.mass
+  }), [theme.motion.spring.snappy]);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const fillColor = theme.colors[TONE_TO_COLOR_KEY[tone]];
+  const isRange = props.range === true;
+  const [currentValue, setCurrentValue] = useControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? (isRange ? [min, max] : min),
+    onChange: props.onChange
+  });
+
+  // ───────── Shared values (UI thread) ─────────
+  // lowX/highX: thumb px positions. lowVal/highVal: their snapped numeric values
+  // (mirrored on the UI thread so worklets can clamp the range + detect changes).
+  const lowX = useSharedValue(0);
+  const highX = useSharedValue(0);
+  const lowVal = useSharedValue(isRange ? currentValue[0] : currentValue);
+  const highVal = useSharedValue(isRange ? currentValue[1] : currentValue);
+  const dragStartX = useSharedValue(0);
+  const trackW = useSharedValue(0);
+  const lowScale = useSharedValue(1);
+  const highScale = useSharedValue(1);
+  const lowLabelOpacity = useSharedValue(0);
+  const highLabelOpacity = useSharedValue(0);
+
+  // Float-drift guard precision for step snapping (e.g. step 0.1 -> precision 10).
+  const precision = useMemo(() => {
+    const decimals = String(step).split('.')[1]?.length ?? 0;
+    return Math.pow(10, decimals);
+  }, [step]);
+  useEffect(() => {
+    return () => {
+      cancelAnimation(lowX);
+      cancelAnimation(highX);
+      cancelAnimation(lowScale);
+      cancelAnimation(highScale);
+      cancelAnimation(lowLabelOpacity);
+      cancelAnimation(highLabelOpacity);
+    };
+  }, [lowX, highX, lowScale, highScale, lowLabelOpacity, highLabelOpacity]);
+  const valueToPx = useCallback((value, width) => {
+    if (max === min || width <= 0) {
+      return 0;
+    }
+    return (value - min) / (max - min) * width;
+  }, [min, max]);
+  const pxToValue = useCallback((px, width) => {
+    if (width <= 0) {
+      return min;
+    }
+    const ratio = clamp(px / width, 0, 1);
+    return snapToStep(min + ratio * (max - min), min, max, step);
+  }, [min, max, step]);
+
+  // Sync external value -> shared values (controlled updates, value prop changes).
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `JSON.stringify(currentValue)` is the dependency by design (value equality for the tuple); adding `currentValue` itself would re-run on every new array identity and defeat it
+  useEffect(() => {
+    if (trackWidth <= 0) {
+      return;
+    }
+    if (isRange) {
+      const [v0, v1] = currentValue;
+      const lo = Math.min(v0, v1);
+      const hi = Math.max(v0, v1);
+      lowVal.value = lo;
+      highVal.value = hi;
+      lowX.value = valueToPx(lo, trackWidth);
+      highX.value = valueToPx(hi, trackWidth);
+    } else {
+      const v = currentValue;
+      lowVal.value = v;
+      highVal.value = v;
+      lowX.value = valueToPx(v, trackWidth);
+    }
+  }, [JSON.stringify(currentValue), trackWidth, isRange, valueToPx]);
+  const onTrackLayout = useCallback(e => {
+    const w = e.nativeEvent.layout.width;
+    trackW.value = w;
+    setTrackWidth(w);
+  }, [trackW]);
+  const fireChange = useCallback((lo, hi) => {
+    setCurrentValue(isRange ? [lo, hi] : lo);
+  }, [isRange, setCurrentValue]);
+  const fireHaptic = useCallback(() => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+  }, [haptic]);
+
+  // ───────── Pan gesture per thumb (UI thread) ─────────
+  const buildPan = useCallback(which => {
+    const xSV = which === 'low' ? lowX : highX;
+    const valSV = which === 'low' ? lowVal : highVal;
+    const otherSV = which === 'low' ? highVal : lowVal;
+    const scaleSV = which === 'low' ? lowScale : highScale;
+    const labelSV = which === 'low' ? lowLabelOpacity : highLabelOpacity;
+    const isLow = which === 'low';
+    const _min = min;
+    const _max = max;
+    const _step = step;
+    const _precision = precision;
+    const _range = isRange;
+    const _pressScale = resolvedPressScale;
+    const _pressAnim = thumbPressAnimationEnabled;
+    const _showLabel = showLabel;
+    const _labelOpacity = resolvedLabelOpacity;
+    const _labelDur = resolvedLabelDuration;
+    const _spring = springCfg;
+    return Gesture.Pan().enabled(!disabled).minDistance(0).onStart(() => {
+      'worklet';
+
+      dragStartX.value = xSV.value;
+      if (_pressAnim) {
+        scaleSV.value = withSpring(_pressScale, _spring);
+      }
+      if (_showLabel) {
+        labelSV.value = withTiming(_labelOpacity, {
+          duration: _labelDur,
+          easing: Easing.out(Easing.cubic)
+        });
+      }
+      runOnJS(fireHaptic)();
+    }).onUpdate(event => {
+      'worklet';
+
+      if (trackW.value <= 0) {
+        return;
+      }
+      const px = Math.min(Math.max(dragStartX.value + event.translationX, 0), trackW.value);
+      const ratio = px / trackW.value;
+      let v = _min + ratio * (_max - _min);
+      if (_step > 0) {
+        v = Math.round((v - _min) / _step) * _step + _min;
+        v = Math.round(v * _precision) / _precision;
+      }
+      v = Math.min(Math.max(v, _min), _max);
+      if (_range) {
+        if (isLow && v > otherSV.value) {
+          v = otherSV.value;
+        }
+        if (!isLow && v < otherSV.value) {
+          v = otherSV.value;
+        }
+      }
+      // Thumb sits at the snapped value's position.
+      xSV.value = _max === _min ? 0 : (v - _min) / (_max - _min) * trackW.value;
+      if (v !== valSV.value) {
+        valSV.value = v;
+        runOnJS(fireHaptic)();
+        runOnJS(fireChange)(lowVal.value, highVal.value);
+      }
+    }).onEnd(() => {
+      'worklet';
+
+      if (_pressAnim) {
+        scaleSV.value = withSpring(1, _spring);
+      }
+      if (_showLabel) {
+        labelSV.value = withTiming(0, {
+          duration: _labelDur,
+          easing: Easing.out(Easing.cubic)
+        });
+      }
+    });
+  }, [disabled, min, max, step, precision, isRange, resolvedPressScale, thumbPressAnimationEnabled, showLabel, resolvedLabelOpacity, resolvedLabelDuration, springCfg, fireChange, fireHaptic, lowX, highX, lowVal, highVal, lowScale, highScale, lowLabelOpacity, highLabelOpacity, dragStartX, trackW]);
+  const lowPan = useMemo(() => buildPan('low'), [buildPan]);
+  const highPan = useMemo(() => buildPan('high'), [buildPan]);
+
+  // Tap on track jumps to position (single mode only).
+  const handleTrackPress = useCallback(e => {
+    if (disabled || isRange || trackWidth <= 0) {
+      return;
+    }
+    const px = clamp(e.nativeEvent.locationX, 0, trackWidth);
+    const next = pxToValue(px, trackWidth);
+    if (next !== lowVal.value) {
+      fireHaptic();
+      lowVal.value = next;
+      lowX.value = withTiming(valueToPx(next, trackWidth), {
+        duration: theme.motion.duration.fast,
+        easing: Easing.out(Easing.cubic)
+      });
+      fireChange(next, next);
+    }
+  }, [disabled, isRange, trackWidth, pxToValue, valueToPx, fireChange, fireHaptic, lowX, lowVal, theme.motion.duration.fast]);
+
+  // Accessibility actions: increment / decrement.
+  const handleAccessibilityAction = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+    const delta = event.nativeEvent.actionName === 'increment' ? step : -step;
+    if (isRange) {
+      const nextLow = clamp(lowVal.value + delta, min, highVal.value);
+      if (nextLow !== lowVal.value) {
+        lowVal.value = nextLow;
+        lowX.value = valueToPx(nextLow, trackWidth);
+        fireHaptic();
+        fireChange(nextLow, highVal.value);
+      }
+    } else {
+      const next = clamp(lowVal.value + delta, min, max);
+      if (next !== lowVal.value) {
+        lowVal.value = next;
+        lowX.value = valueToPx(next, trackWidth);
+        fireHaptic();
+        fireChange(next, next);
+      }
+    }
+  }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, lowVal, highVal, fireChange, fireHaptic]);
+  const thumbRadius = sizeCfg.thumbDiameter / 2;
+
+  // ───────── Animated styles ─────────
+  const fillAnimStyle = useAnimatedStyle(() => isRange ? {
+    left: lowX.value,
+    width: Math.max(0, highX.value - lowX.value)
+  } : {
+    left: 0,
+    width: lowX.value
+  });
+  const lowThumbStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: lowX.value - thumbRadius
+    }, {
+      scale: lowScale.value
+    }]
+  }));
+  const highThumbStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: highX.value - thumbRadius
+    }, {
+      scale: highScale.value
+    }]
+  }));
+  const lowLabelStyle = useAnimatedStyle(() => ({
+    opacity: lowLabelOpacity.value
+  }));
+  const highLabelStyle = useAnimatedStyle(() => ({
+    opacity: highLabelOpacity.value
+  }));
+
+  // Display values (from committed state) for labels + a11y.
+  const lowDisplayValue = isRange ? Math.min(...currentValue) : currentValue;
+  const highDisplayValue = isRange ? Math.max(...currentValue) : currentValue;
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.container, containerStyle, style],
+    testID: testID,
+    accessibilityRole: "adjustable",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled
+    },
+    accessibilityValue: isRange ? {
+      min,
+      max,
+      now: lowDisplayValue,
+      text: `${lowDisplayValue} to ${highDisplayValue}`
+    } : {
+      min,
+      max,
+      now: lowDisplayValue
+    },
+    accessibilityActions: [{
+      name: 'increment'
+    }, {
+      name: 'decrement'
+    }],
+    onAccessibilityAction: handleAccessibilityAction,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      onPress: handleTrackPress,
+      disabled: disabled || isRange,
+      style: styles.trackTouch,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.trackWrap,
+        onLayout: onTrackLayout,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.track, {
+            backgroundColor: disabled ? theme.colors.surface.disabled : theme.colors.border.primary
+          }, trackStyle]
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.fill, {
+            backgroundColor: disabled ? theme.colors.surface.disabled : fillColor,
+            opacity: disabled ? 0.55 : 1
+          }, fillStyle, fillAnimStyle]
+        }), /*#__PURE__*/_jsx(GestureDetector, {
+          gesture: lowPan,
+          children: /*#__PURE__*/_jsx(Animated.View, {
+            style: [styles.thumb, {
+              width: sizeCfg.thumbDiameter,
+              height: sizeCfg.thumbDiameter,
+              borderRadius: thumbRadius,
+              backgroundColor: theme.colors.background.elevated,
+              borderColor: disabled ? theme.colors.surface.disabled : fillColor,
+              opacity: disabled ? 0.55 : 1
+            }, thumbStyle, lowThumbStyle],
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            children: showLabel ? /*#__PURE__*/_jsx(Animated.View, {
+              style: [styles.bubble, {
+                backgroundColor: fillColor
+              }, lowLabelStyle],
+              pointerEvents: "none",
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.bubbleText, labelStyle],
+                children: formatLabel(lowDisplayValue)
+              })
+            }) : null
+          })
+        }), isRange ? /*#__PURE__*/_jsx(GestureDetector, {
+          gesture: highPan,
+          children: /*#__PURE__*/_jsx(Animated.View, {
+            style: [styles.thumb, {
+              width: sizeCfg.thumbDiameter,
+              height: sizeCfg.thumbDiameter,
+              borderRadius: thumbRadius,
+              backgroundColor: theme.colors.background.elevated,
+              borderColor: disabled ? theme.colors.surface.disabled : fillColor,
+              opacity: disabled ? 0.55 : 1
+            }, thumbStyle, highThumbStyle],
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            children: showLabel ? /*#__PURE__*/_jsx(Animated.View, {
+              style: [styles.bubble, {
+                backgroundColor: fillColor
+              }, highLabelStyle],
+              pointerEvents: "none",
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.bubbleText, labelStyle],
+                children: formatLabel(highDisplayValue)
+              })
+            }) : null
+          })
+        }) : null]
+      })
+    })
+  });
+});
+Slider.displayName = 'Slider';
+const buildStyles = (theme, sizeCfg) => {
+  const thumbShadow = theme.shadows.md;
+  const verticalPad = sizeCfg.thumbDiameter / 2 + 4;
+  return StyleSheet.create({
+    container: {
+      width: '100%',
+      paddingVertical: verticalPad,
+      justifyContent: 'center'
+    },
+    trackTouch: {
+      width: '100%',
+      justifyContent: 'center'
+    },
+    trackWrap: {
+      width: '100%',
+      height: sizeCfg.thumbDiameter,
+      justifyContent: 'center'
+    },
+    track: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      height: sizeCfg.trackHeight,
+      borderRadius: theme.radius.full,
+      top: (sizeCfg.thumbDiameter - sizeCfg.trackHeight) / 2
+    },
+    fill: {
+      position: 'absolute',
+      height: sizeCfg.trackHeight,
+      borderRadius: theme.radius.full,
+      top: (sizeCfg.thumbDiameter - sizeCfg.trackHeight) / 2
+    },
+    thumb: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderWidth: 2,
+      shadowColor: thumbShadow.shadowColor,
+      shadowOffset: thumbShadow.shadowOffset,
+      shadowOpacity: thumbShadow.shadowOpacity,
+      shadowRadius: thumbShadow.shadowRadius,
+      elevation: thumbShadow.elevation,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    bubble: {
+      position: 'absolute',
+      bottom: sizeCfg.thumbDiameter + 6,
+      paddingHorizontal: theme.spacing.sm,
+      paddingVertical: theme.spacing.xxs,
+      borderRadius: theme.radius.md,
+      minWidth: 36,
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...Platform.select({
+        ios: {
+          shadowColor: theme.shadows.sm.shadowColor,
+          shadowOffset: theme.shadows.sm.shadowOffset,
+          shadowOpacity: theme.shadows.sm.shadowOpacity,
+          shadowRadius: theme.shadows.sm.shadowRadius
+        },
+        android: {
+          elevation: theme.shadows.sm.elevation
+        },
+        default: {}
+      })
+    },
+    bubbleText: {
+      color: theme.colors.text.inverse,
+      fontSize: theme.typography.fontSize.xs,
+      fontWeight: theme.typography.fontWeight.semibold
+    }
+  });
+};
+export { Slider };
+export default Slider;
+//# sourceMappingURL=Slider.js.map

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

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

package/lib/module/components/Spinner/Spinner.js

@@ -0,0 +1,179 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { ActivityIndicator, Animated, Easing, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeMap = {
+  sm: 20,
+  md: 32,
+  lg: 48
+};
+const DOT_COUNT = 3;
+const DOT_STAGGER_MS = 150;
+const DOT_CYCLE_MS = 600;
+const Dot = ({
+  size,
+  color,
+  delay,
+  duration
+}) => {
+  const scale = useRef(createAnimatedValue(1)).current;
+  useEffect(() => {
+    const animation = Animated.loop(Animated.sequence([Animated.delay(delay), Animated.timing(scale, {
+      toValue: 1.4,
+      duration: duration / 2,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true
+    }), Animated.timing(scale, {
+      toValue: 1,
+      duration: duration / 2,
+      easing: Easing.in(Easing.quad),
+      useNativeDriver: true
+    })]));
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [scale, delay, duration]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      backgroundColor: color,
+      transform: [{
+        scale
+      }]
+    }
+  });
+};
+const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    size = 'md',
+    color,
+    message,
+    overlay = false,
+    backdropColor,
+    variant = 'circular',
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const fade = useRef(createAnimatedValue(0)).current;
+  useEffect(() => {
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: theme.motion.duration.normal,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }).start();
+  }, [fade, theme]);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const dimension = sizeMap[size];
+  const resolvedColor = color ?? theme.colors.primary;
+  const resolvedBackdrop = backdropColor ?? theme.colors.background.overlay;
+  const indicator = useMemo(() => {
+    if (variant === 'dots') {
+      const dotSize = Math.max(6, Math.round(dimension / 4));
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.dotsRow, {
+          gap: Math.round(dotSize / 2)
+        }],
+        children: Array.from({
+          length: DOT_COUNT
+        }).map((_, i) => /*#__PURE__*/_jsx(Dot, {
+          size: dotSize,
+          color: resolvedColor,
+          delay: i * DOT_STAGGER_MS,
+          duration: DOT_CYCLE_MS
+        }, i))
+      });
+    }
+    return /*#__PURE__*/_jsx(ActivityIndicator, {
+      color: resolvedColor,
+      size: size === 'sm' ? 'small' : 'large',
+      style: {
+        width: dimension,
+        height: dimension
+      }
+    });
+  }, [variant, size, dimension, resolvedColor, styles.dotsRow]);
+  const a11yLabel = accessibilityLabel ?? message ?? 'Loading';
+  const inner = /*#__PURE__*/_jsxs(Animated.View, {
+    ref: ref,
+    accessible: true,
+    accessibilityRole: "progressbar",
+    accessibilityLiveRegion: "polite",
+    accessibilityLabel: a11yLabel,
+    accessibilityState: {
+      busy: true
+    },
+    testID: testID,
+    style: [overlay ? styles.overlayContent : styles.inlineContent, {
+      opacity: fade
+    }],
+    children: [indicator, message ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.message, {
+        color: theme.colors.text.primary,
+        fontSize: theme.typography.fontSize.base,
+        fontWeight: theme.typography.fontWeight.medium,
+        marginTop: theme.spacing.md
+      }],
+      numberOfLines: 2,
+      children: message
+    }) : null]
+  });
+  if (overlay) {
+    return /*#__PURE__*/_jsx(View, {
+      pointerEvents: "auto",
+      style: [styles.overlay, {
+        backgroundColor: resolvedBackdrop
+      }, style],
+      children: inner
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.inline, style],
+    children: inner
+  });
+});
+Spinner.displayName = 'Spinner';
+const buildStyles = theme => StyleSheet.create({
+  inline: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  inlineContent: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  overlay: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000
+  },
+  overlayContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radius.lg,
+    paddingHorizontal: theme.spacing.xl,
+    paddingVertical: theme.spacing.xl,
+    minWidth: 140,
+    ...theme.shadows.lg
+  },
+  dotsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  message: {
+    textAlign: 'center'
+  }
+});
+export { Spinner };
+export default Spinner;
+//# sourceMappingURL=Spinner.js.map

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

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