@almadar/mobile 1.1.0 → 1.2.1

package/dist/{chunk-DMLYJFYQ.js → chunk-BFRVXKSP.js}

@@ -1,7 +1,14 @@
+import {
+  useThemeMode
+} from "./chunk-A56SRZKI.js";
 import {
   ErrorState,
-  LoadingState
-} from "./chunk-7C5JCLLY.js";
+  HStack,
+  Icon,
+  LoadingState,
+  Typography,
+  VStack
+} from "./chunk-QUFLYKWA.js";
 import {
   useEventBus
 } from "./chunk-YTVYMEKU.js";
@@ -313,42 +320,12 @@ var styles4 = StyleSheet4.create({
 });
 Textarea.displayName = "Textarea";
 
-// src/components/atoms/Spinner.tsx
-import React5 from "react";
-import { ActivityIndicator, StyleSheet as StyleSheet5, View as View5 } from "react-native";
-var Spinner = ({
-  size = "md",
-  color,
-  style
-}) => {
-  const theme = useTheme();
-  const sizeMap = {
-    sm: 16,
-    md: 24,
-    lg: 32
-  };
-  return /* @__PURE__ */ React5.createElement(View5, { style: [styles5.container, style] }, /* @__PURE__ */ React5.createElement(
-    ActivityIndicator,
-    {
-      size: sizeMap[size],
-      color: color || theme.colors.primary
-    }
-  ));
-};
-var styles5 = StyleSheet5.create({
-  container: {
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
-Spinner.displayName = "Spinner";
-
 // src/components/atoms/Avatar.tsx
-import React6 from "react";
+import React5 from "react";
 import {
-  View as View6,
+  View as View5,
   Text as Text2,
-  StyleSheet as StyleSheet6,
+  StyleSheet as StyleSheet5,
   Image
 } from "react-native";
 var Avatar = ({
@@ -361,18 +338,18 @@ var Avatar = ({
   error
 }) => {
   const theme = useTheme();
-  const sizeMap = {
+  const sizeMap2 = {
     sm: { container: 32, fontSize: 12 },
     md: { container: 40, fontSize: 14 },
     lg: { container: 48, fontSize: 16 },
     xl: { container: 64, fontSize: 20 }
   };
-  const { container, fontSize } = sizeMap[size];
+  const { container, fontSize } = sizeMap2[size];
   if (isLoading) {
-    return /* @__PURE__ */ React6.createElement(View6, { style: [styles6.container, { width: container, height: container }, style] }, /* @__PURE__ */ React6.createElement(LoadingState, { message: "" }));
+    return /* @__PURE__ */ React5.createElement(View5, { style: [styles5.container, { width: container, height: container }, style] }, /* @__PURE__ */ React5.createElement(LoadingState, { message: "" }));
   }
   if (error) {
-    return /* @__PURE__ */ React6.createElement(View6, { style: [styles6.container, { width: container, height: container }, style] }, /* @__PURE__ */ React6.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React5.createElement(View5, { style: [styles5.container, { width: container, height: container }, style] }, /* @__PURE__ */ React5.createElement(ErrorState, { message: error.message }));
   }
   const getInitials = () => {
     if (initials) return initials;
@@ -382,12 +359,12 @@ var Avatar = ({
     return "?";
   };
   if (src) {
-    return /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React5.createElement(
       Image,
       {
         source: src,
         style: [
-          styles6.image,
+          styles5.image,
           {
             width: container,
             height: container,
@@ -399,11 +376,11 @@ var Avatar = ({
       }
     );
   }
-  return /* @__PURE__ */ React6.createElement(
-    View6,
+  return /* @__PURE__ */ React5.createElement(
+    View5,
     {
       style: [
-        styles6.container,
+        styles5.container,
         {
           width: container,
           height: container,
@@ -413,11 +390,11 @@ var Avatar = ({
         style
       ]
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React5.createElement(
       Text2,
       {
         style: [
-          styles6.initials,
+          styles5.initials,
           {
             fontSize,
             color: theme.colors["primary-foreground"]
@@ -428,7 +405,7 @@ var Avatar = ({
     )
   );
 };
-var styles6 = StyleSheet6.create({
+var styles5 = StyleSheet5.create({
   container: {
     alignItems: "center",
     justifyContent: "center"
@@ -443,11 +420,11 @@ var styles6 = StyleSheet6.create({
 Avatar.displayName = "Avatar";
 
 // src/components/atoms/Overlay.tsx
-import React7 from "react";
+import React6 from "react";
 import {
   TouchableWithoutFeedback,
-  View as View7,
-  StyleSheet as StyleSheet7
+  View as View6,
+  StyleSheet as StyleSheet6
 } from "react-native";
 var Overlay = ({
   isVisible = true,
@@ -465,23 +442,23 @@ var Overlay = ({
     }
     onPress?.();
   };
-  return /* @__PURE__ */ React7.createElement(TouchableWithoutFeedback, { onPress: handlePress }, /* @__PURE__ */ React7.createElement(
-    View7,
+  return /* @__PURE__ */ React6.createElement(TouchableWithoutFeedback, { onPress: handlePress }, /* @__PURE__ */ React6.createElement(
+    View6,
     {
       style: [
-        styles7.overlay,
+        styles6.overlay,
         {
           backgroundColor: theme.colors.background,
           opacity: 0.8
         },
-        blur && styles7.blur,
+        blur && styles6.blur,
         ...style ? [style] : []
       ],
       pointerEvents: "auto"
     }
   ));
 };
-var styles7 = StyleSheet7.create({
+var styles6 = StyleSheet6.create({
   overlay: {
     position: "absolute",
     top: 0,
@@ -498,8 +475,8 @@ var styles7 = StyleSheet7.create({
 Overlay.displayName = "Overlay";
 
 // src/components/atoms/Spacer.tsx
-import React8 from "react";
-import { View as View8 } from "react-native";
+import React7 from "react";
+import { View as View7 } from "react-native";
 var sizeValues = {
   xs: 4,
   sm: 8,
@@ -514,8 +491,8 @@ var Spacer = ({
   style
 }) => {
   if (size === "auto") {
-    return /* @__PURE__ */ React8.createElement(
-      View8,
+    return /* @__PURE__ */ React7.createElement(
+      View7,
       {
         style: [{ flex: 1 }, ...style ? [style] : []],
         accessibilityElementsHidden: true
@@ -524,8 +501,8 @@ var Spacer = ({
   }
   const sizeValue = sizeValues[size];
   const spacerStyle = axis === "horizontal" ? { width: sizeValue } : { height: sizeValue };
-  return /* @__PURE__ */ React8.createElement(
-    View8,
+  return /* @__PURE__ */ React7.createElement(
+    View7,
     {
       style: [
         spacerStyle,
@@ -538,7 +515,7 @@ var Spacer = ({
 Spacer.displayName = "Spacer";
 
 // src/components/atoms/ConditionalWrapper.tsx
-import React9 from "react";
+import React8 from "react";
 import { Animated as Animated2 } from "react-native";
 function evaluateCondition(condition, context = { formValues: {}, globalVariables: {} }) {
   if (typeof condition === "boolean") {
@@ -590,9 +567,9 @@ var ConditionalWrapper = ({
   animate = false,
   style
 }) => {
-  const [isVisible, setIsVisible] = React9.useState(!condition ? true : false);
-  const fadeAnim = React9.useRef(new Animated2.Value(!condition ? 1 : 0)).current;
-  React9.useEffect(() => {
+  const [isVisible, setIsVisible] = React8.useState(!condition ? true : false);
+  const fadeAnim = React8.useRef(new Animated2.Value(!condition ? 1 : 0)).current;
+  React8.useEffect(() => {
     if (!condition) {
       setIsVisible(true);
       return;
@@ -610,10 +587,10 @@ var ConditionalWrapper = ({
     }
   }, [condition, context, animate, fadeAnim]);
   if (!condition) {
-    return /* @__PURE__ */ React9.createElement(React9.Fragment, null, children);
+    return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
   }
   if (animate) {
-    return /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React8.createElement(
       Animated2.View,
       {
         style: [
@@ -624,17 +601,540 @@ var ConditionalWrapper = ({
       isVisible ? children : fallback
     );
   }
-  return isVisible ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, children) : /* @__PURE__ */ React9.createElement(React9.Fragment, null, fallback);
+  return isVisible ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, children) : /* @__PURE__ */ React8.createElement(React8.Fragment, null, fallback);
 };
 ConditionalWrapper.displayName = "ConditionalWrapper";
 
+// src/components/atoms/StatusDot.tsx
+import React9, { useEffect, useRef } from "react";
+import { View as View8, Animated as Animated3, StyleSheet as StyleSheet7 } from "react-native";
+var sizeMap = {
+  sm: 8,
+  md: 12,
+  lg: 16
+};
+var StatusDot = ({
+  status = "offline",
+  pulse = false,
+  size = "md",
+  label,
+  style
+}) => {
+  const theme = useTheme();
+  const pulseAnim = useRef(new Animated3.Value(1)).current;
+  const statusColors = {
+    online: theme.colors.success,
+    offline: theme.colors["muted-foreground"],
+    busy: theme.colors.error,
+    away: theme.colors.warning,
+    error: theme.colors.error
+  };
+  useEffect(() => {
+    if (pulse && (status === "online" || status === "busy")) {
+      const animation = Animated3.loop(
+        Animated3.sequence([
+          Animated3.timing(pulseAnim, {
+            toValue: 0.3,
+            duration: 1e3,
+            useNativeDriver: true
+          }),
+          Animated3.timing(pulseAnim, {
+            toValue: 1,
+            duration: 1e3,
+            useNativeDriver: true
+          })
+        ])
+      );
+      animation.start();
+      return () => animation.stop();
+    } else {
+      pulseAnim.setValue(1);
+    }
+  }, [pulse, status, pulseAnim]);
+  const dotSize = sizeMap[size];
+  const color = statusColors[status];
+  const dot = /* @__PURE__ */ React9.createElement(View8, { style: [styles7.wrapper, style] }, /* @__PURE__ */ React9.createElement(
+    Animated3.View,
+    {
+      style: [
+        styles7.dot,
+        {
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: color,
+          opacity: pulseAnim
+        }
+      ]
+    }
+  ));
+  if (label) {
+    return /* @__PURE__ */ React9.createElement(HStack, { spacing: theme.spacing[2], align: "center", style }, dot, /* @__PURE__ */ React9.createElement(Typography, { variant: "caption", style: { color: theme.colors.foreground } }, label));
+  }
+  return dot;
+};
+var styles7 = StyleSheet7.create({
+  wrapper: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dot: {}
+});
+StatusDot.displayName = "StatusDot";
+
+// src/components/atoms/TrendIndicator.tsx
+import React10 from "react";
+import { StyleSheet as StyleSheet8 } from "react-native";
+var sizeConfig = {
+  sm: { icon: 14, font: "xs" },
+  md: { icon: 18, font: "sm" },
+  lg: { icon: 22, font: "base" }
+};
+var TrendIndicator = ({
+  value,
+  direction = "neutral",
+  showValue = true,
+  size = "md",
+  style
+}) => {
+  const theme = useTheme();
+  const config = sizeConfig[size];
+  const directionColors = {
+    up: theme.colors.success,
+    down: theme.colors.error,
+    neutral: theme.colors["muted-foreground"]
+  };
+  const color = directionColors[direction];
+  const iconName = direction === "up" ? "chevron-up" : direction === "down" ? "chevron-down" : "minus";
+  return /* @__PURE__ */ React10.createElement(HStack, { spacing: 4, align: "center", style }, /* @__PURE__ */ React10.createElement(Icon, { name: iconName, size: config.icon, color }), showValue && value !== void 0 && /* @__PURE__ */ React10.createElement(
+    Typography,
+    {
+      variant: "body",
+      style: [
+        styles8.value,
+        { color, fontSize: theme.typography.sizes[config.font] }
+      ]
+    },
+    Math.abs(value),
+    "%"
+  ));
+};
+var styles8 = StyleSheet8.create({
+  value: {
+    fontWeight: "500"
+  }
+});
+TrendIndicator.displayName = "TrendIndicator";
+
+// src/components/atoms/TextHighlight.tsx
+import React11 from "react";
+import { Pressable, StyleSheet as StyleSheet9 } from "react-native";
+var TextHighlight = ({
+  children,
+  highlightType = "mark",
+  isActive = true,
+  action,
+  actionPayload,
+  color,
+  style
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handlePress = () => {
+    if (action) {
+      eventBus.emit(`UI:${action}`, actionPayload);
+    }
+  };
+  const highlightColors = {
+    mark: { bg: theme.colors.warning + "40", fg: theme.colors.foreground },
+    code: { bg: theme.colors.muted, fg: theme.colors.foreground },
+    emphasis: { bg: theme.colors.primary + "20", fg: theme.colors.primary },
+    custom: { bg: (color || theme.colors.accent) + "30", fg: theme.colors.foreground }
+  };
+  const { bg, fg } = highlightColors[highlightType];
+  const content = /* @__PURE__ */ React11.createElement(
+    Typography,
+    {
+      variant: "body",
+      style: [
+        styles9.text,
+        isActive && {
+          backgroundColor: bg,
+          color: fg
+        },
+        highlightType === "code" && {
+          fontFamily: "monospace",
+          fontSize: theme.typography.sizes.sm
+        },
+        style
+      ]
+    },
+    children
+  );
+  if (action) {
+    return /* @__PURE__ */ React11.createElement(Pressable, { onPress: handlePress, style: styles9.pressable }, content);
+  }
+  return content;
+};
+var styles9 = StyleSheet9.create({
+  text: {
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 4
+  },
+  pressable: {
+    alignSelf: "flex-start"
+  }
+});
+TextHighlight.displayName = "TextHighlight";
+
+// src/components/atoms/AnimatedCounter.tsx
+import React12, { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { Animated as Animated4, StyleSheet as StyleSheet10 } from "react-native";
+var AnimatedCounter = ({
+  value,
+  duration = 800,
+  prefix = "",
+  suffix = "",
+  style,
+  textStyle
+}) => {
+  const theme = useTheme();
+  const animatedValue = useRef2(new Animated4.Value(0)).current;
+  const displayRef = useRef2(0);
+  const [displayValue, setDisplayValue] = React12.useState(0);
+  useEffect2(() => {
+    animatedValue.setValue(displayRef.current);
+    Animated4.timing(animatedValue, {
+      toValue: value,
+      duration,
+      useNativeDriver: false
+    }).start();
+    const listener = animatedValue.addListener(({ value: v }) => {
+      const rounded = Math.round(v);
+      if (rounded !== displayRef.current) {
+        displayRef.current = rounded;
+        setDisplayValue(rounded);
+      }
+    });
+    return () => {
+      animatedValue.removeListener(listener);
+    };
+  }, [value, duration, animatedValue]);
+  return /* @__PURE__ */ React12.createElement(Animated4.View, { style: [styles10.container, style] }, /* @__PURE__ */ React12.createElement(
+    Animated4.Text,
+    {
+      style: [
+        styles10.text,
+        {
+          color: theme.colors.foreground,
+          fontSize: theme.typography.sizes["2xl"],
+          fontWeight: theme.typography.fontWeight.bold
+        },
+        textStyle
+      ]
+    },
+    prefix,
+    displayValue,
+    suffix
+  ));
+};
+var styles10 = StyleSheet10.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  text: {
+    textAlign: "center"
+  }
+});
+AnimatedCounter.displayName = "AnimatedCounter";
+
+// src/components/atoms/TypewriterText.tsx
+import React13, { useEffect as useEffect3, useRef as useRef3, useState } from "react";
+import { Animated as Animated5, StyleSheet as StyleSheet11 } from "react-native";
+var TypewriterText = ({
+  text,
+  speed = 50,
+  startDelay = 0,
+  onComplete,
+  showCursor = true,
+  style,
+  textStyle
+}) => {
+  const theme = useTheme();
+  const [displayedText, setDisplayedText] = useState("");
+  const [isComplete, setIsComplete] = useState(false);
+  const cursorOpacity = useRef3(new Animated5.Value(1)).current;
+  const intervalRef = useRef3(null);
+  const timeoutRef = useRef3(null);
+  useEffect3(() => {
+    setDisplayedText("");
+    setIsComplete(false);
+    let charIndex = 0;
+    timeoutRef.current = setTimeout(() => {
+      intervalRef.current = setInterval(() => {
+        if (charIndex < text.length) {
+          setDisplayedText(text.slice(0, charIndex + 1));
+          charIndex++;
+        } else {
+          if (intervalRef.current) clearInterval(intervalRef.current);
+          setIsComplete(true);
+          onComplete?.();
+        }
+      }, speed);
+    }, startDelay);
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [text, speed, startDelay, onComplete]);
+  useEffect3(() => {
+    if (showCursor && !isComplete) {
+      const blink = Animated5.loop(
+        Animated5.sequence([
+          Animated5.timing(cursorOpacity, {
+            toValue: 0,
+            duration: 500,
+            useNativeDriver: true
+          }),
+          Animated5.timing(cursorOpacity, {
+            toValue: 1,
+            duration: 500,
+            useNativeDriver: true
+          })
+        ])
+      );
+      blink.start();
+      return () => blink.stop();
+    }
+  }, [showCursor, isComplete, cursorOpacity]);
+  return /* @__PURE__ */ React13.createElement(HStack, { spacing: 0, align: "flex-end", style }, /* @__PURE__ */ React13.createElement(
+    Animated5.Text,
+    {
+      style: [
+        styles11.text,
+        {
+          color: theme.colors.foreground,
+          fontSize: theme.typography.sizes.base
+        },
+        textStyle
+      ]
+    },
+    displayedText
+  ), showCursor && !isComplete && /* @__PURE__ */ React13.createElement(
+    Animated5.Text,
+    {
+      style: [
+        styles11.cursor,
+        {
+          color: theme.colors.primary,
+          fontSize: theme.typography.sizes.base,
+          opacity: cursorOpacity
+        }
+      ]
+    },
+    "|"
+  ));
+};
+var styles11 = StyleSheet11.create({
+  text: {
+    fontWeight: "400"
+  },
+  cursor: {
+    fontWeight: "300",
+    marginLeft: 1
+  }
+});
+TypewriterText.displayName = "TypewriterText";
+
+// src/components/atoms/ThemeToggle.tsx
+import React14 from "react";
+import { Pressable as Pressable2, StyleSheet as StyleSheet12 } from "react-native";
+var sizeConfig2 = {
+  sm: { icon: 18, padding: 6 },
+  md: { icon: 24, padding: 10 },
+  lg: { icon: 30, padding: 14 }
+};
+var ThemeToggle = ({
+  size = "md",
+  showLabel = false,
+  style
+}) => {
+  const theme = useTheme();
+  const { resolvedMode, toggleMode } = useThemeMode();
+  const config = sizeConfig2[size];
+  const isDark = resolvedMode === "dark";
+  const iconText = isDark ? "\u2600" : "\u263E";
+  const label = isDark ? "Light mode" : "Dark mode";
+  return /* @__PURE__ */ React14.createElement(
+    Pressable2,
+    {
+      onPress: toggleMode,
+      style: [
+        styles12.container,
+        {
+          padding: config.padding,
+          borderRadius: theme.borderRadius.full,
+          backgroundColor: theme.colors.secondary
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React14.createElement(HStack, { spacing: theme.spacing[2], align: "center" }, /* @__PURE__ */ React14.createElement(Icon, { name: isDark ? "check" : "settings", size: config.icon, color: theme.colors.foreground }), /* @__PURE__ */ React14.createElement(Typography, { variant: "body", style: { color: theme.colors.foreground, fontSize: config.icon * 0.7 } }, iconText), showLabel && /* @__PURE__ */ React14.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, label))
+  );
+};
+var styles12 = StyleSheet12.create({
+  container: {
+    alignSelf: "flex-start"
+  }
+});
+ThemeToggle.displayName = "ThemeToggle";
+
+// src/components/atoms/RangeSlider.tsx
+import React15, { useRef as useRef4, useState as useState2 } from "react";
+import { View as View9, PanResponder, StyleSheet as StyleSheet13 } from "react-native";
+var THUMB_SIZE = 24;
+var TRACK_HEIGHT = 4;
+var RangeSlider = ({
+  min = 0,
+  max = 100,
+  value: controlledValue,
+  step = 1,
+  action,
+  actionPayload,
+  onChange,
+  showValue = false,
+  label,
+  disabled = false,
+  style
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [internalValue, setInternalValue] = useState2(controlledValue ?? min);
+  const trackWidth = useRef4(0);
+  const currentValue = controlledValue ?? internalValue;
+  const clamp = (v) => {
+    const stepped = Math.round((v - min) / step) * step + min;
+    return Math.max(min, Math.min(max, stepped));
+  };
+  const getFraction = () => (currentValue - min) / (max - min);
+  const emitValue = (v) => {
+    const clamped = clamp(v);
+    setInternalValue(clamped);
+    onChange?.(clamped);
+    if (action) {
+      eventBus.emit(`UI:${action}`, { ...actionPayload, value: clamped });
+    }
+  };
+  const panResponder = useRef4(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: (_, gestureState) => {
+        const fraction2 = Math.max(0, Math.min(1, gestureState.x0 / (trackWidth.current || 1)));
+        emitValue(fraction2 * (max - min) + min);
+      },
+      onPanResponderMove: (_, gestureState) => {
+        const startFraction = getFraction();
+        const deltaFraction = gestureState.dx / (trackWidth.current || 1);
+        const newValue = (startFraction + deltaFraction) * (max - min) + min;
+        emitValue(newValue);
+      }
+    })
+  ).current;
+  const handleLayout = (e) => {
+    trackWidth.current = e.nativeEvent.layout.width;
+  };
+  const fraction = getFraction();
+  const content = /* @__PURE__ */ React15.createElement(
+    View9,
+    {
+      style: [styles13.trackContainer, disabled && { opacity: 0.5 }, style],
+      onLayout: handleLayout,
+      ...panResponder.panHandlers
+    },
+    /* @__PURE__ */ React15.createElement(
+      View9,
+      {
+        style: [
+          styles13.track,
+          { backgroundColor: theme.colors.border }
+        ]
+      }
+    ),
+    /* @__PURE__ */ React15.createElement(
+      View9,
+      {
+        style: [
+          styles13.trackFill,
+          {
+            backgroundColor: theme.colors.primary,
+            width: `${fraction * 100}%`
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ React15.createElement(
+      View9,
+      {
+        style: [
+          styles13.thumb,
+          {
+            backgroundColor: theme.colors.primary,
+            borderColor: theme.colors.card,
+            left: `${fraction * 100}%`,
+            marginLeft: -THUMB_SIZE / 2,
+            ...theme.shadows.sm
+          }
+        ]
+      }
+    )
+  );
+  if (label || showValue) {
+    return /* @__PURE__ */ React15.createElement(VStack, { spacing: theme.spacing[2], style }, (label || showValue) && /* @__PURE__ */ React15.createElement(HStack, { spacing: 0, align: "center", style: styles13.header }, label && /* @__PURE__ */ React15.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"], flex: 1 } }, label), showValue && /* @__PURE__ */ React15.createElement(Typography, { variant: "body", style: { color: theme.colors.foreground, fontWeight: "500" } }, currentValue)), content);
+  }
+  return content;
+};
+var styles13 = StyleSheet13.create({
+  trackContainer: {
+    height: THUMB_SIZE + 8,
+    justifyContent: "center",
+    paddingHorizontal: THUMB_SIZE / 2
+  },
+  track: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+    position: "absolute",
+    left: THUMB_SIZE / 2,
+    right: THUMB_SIZE / 2
+  },
+  trackFill: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+    position: "absolute",
+    left: THUMB_SIZE / 2
+  },
+  thumb: {
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    borderWidth: 3,
+    position: "absolute"
+  },
+  header: {
+    justifyContent: "space-between"
+  }
+});
+RangeSlider.displayName = "RangeSlider";
+
 // src/components/atoms/game/Sprite.tsx
-import React10, { useMemo } from "react";
+import React16, { useMemo } from "react";
 import {
-  View as View9,
+  View as View10,
   Image as Image2,
   TouchableOpacity as TouchableOpacity3,
-  StyleSheet as StyleSheet8
+  StyleSheet as StyleSheet14
 } from "react-native";
 var Sprite = ({
   spritesheet,
@@ -675,13 +1175,13 @@ var Sprite = ({
     { scaleX: flipX ? -1 : 1 },
     { scaleY: flipY ? -1 : 1 }
   ];
-  const Container = action || onPress ? TouchableOpacity3 : View9;
-  return /* @__PURE__ */ React10.createElement(
+  const Container = action || onPress ? TouchableOpacity3 : View10;
+  return /* @__PURE__ */ React16.createElement(
     Container,
     {
       onPress: action || onPress ? handlePress : void 0,
       style: [
-        styles8.container,
+        styles14.container,
         {
           width: frameWidth,
           height: frameHeight,
@@ -692,8 +1192,8 @@ var Sprite = ({
         style
       ]
     },
-    /* @__PURE__ */ React10.createElement(
-      View9,
+    /* @__PURE__ */ React16.createElement(
+      View10,
       {
         style: {
           width: frameWidth * columns,
@@ -704,7 +1204,7 @@ var Sprite = ({
           overflow: "hidden"
         }
       },
-      /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ React16.createElement(
         Image2,
         {
           source: spritesheet,
@@ -718,7 +1218,7 @@ var Sprite = ({
     )
   );
 };
-var styles8 = StyleSheet8.create({
+var styles14 = StyleSheet14.create({
   container: {
     position: "absolute",
     overflow: "hidden"
@@ -727,8 +1227,8 @@ var styles8 = StyleSheet8.create({
 Sprite.displayName = "Sprite";
 
 // src/components/atoms/game/StateIndicator.tsx
-import React11 from "react";
-import { View as View10, Text as Text3, StyleSheet as StyleSheet9 } from "react-native";
+import React17 from "react";
+import { View as View11, Text as Text3, StyleSheet as StyleSheet15 } from "react-native";
 var DEFAULT_STATE_STYLES = {
   idle: { icon: "\u23F8", backgroundColor: "#6b7280" },
   active: { icon: "\u25B6", backgroundColor: "#22c55e" },
@@ -763,11 +1263,11 @@ var StateIndicator = ({
   const displayLabel = label || state.charAt(0).toUpperCase() + state.slice(1);
   const sizeStyles = SIZE_STYLES[size];
   const shouldAnimate = animated && state.toLowerCase() !== "idle" && state.toLowerCase() !== "done";
-  return /* @__PURE__ */ React11.createElement(
-    View10,
+  return /* @__PURE__ */ React17.createElement(
+    View11,
     {
       style: [
-        styles9.container,
+        styles15.container,
         {
           backgroundColor: config.backgroundColor,
           paddingHorizontal: sizeStyles.padding,
@@ -777,8 +1277,8 @@ var StateIndicator = ({
         style
       ]
     },
-    /* @__PURE__ */ React11.createElement(Text3, { style: { fontSize: sizeStyles.fontSize, marginRight: 4 } }, config.icon),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React17.createElement(Text3, { style: { fontSize: sizeStyles.fontSize, marginRight: 4 } }, config.icon),
+    /* @__PURE__ */ React17.createElement(
       Text3,
       {
         style: {
@@ -791,7 +1291,7 @@ var StateIndicator = ({
     )
   );
 };
-var styles9 = StyleSheet9.create({
+var styles15 = StyleSheet15.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -805,12 +1305,18 @@ export {
   Radio,
   Switch,
   Textarea,
-  Spinner,
   Avatar,
   Overlay,
   Spacer,
   ConditionalWrapper,
+  StatusDot,
+  TrendIndicator,
+  TextHighlight,
+  AnimatedCounter,
+  TypewriterText,
+  ThemeToggle,
+  RangeSlider,
   Sprite,
   StateIndicator
 };
-//# sourceMappingURL=chunk-DMLYJFYQ.js.map
+//# sourceMappingURL=chunk-BFRVXKSP.js.map