@almadar/mobile 1.1.0

package/dist/chunk-7C5JCLLY.js

@@ -0,0 +1,1125 @@
+import {
+  useEventBus
+} from "./chunk-YTVYMEKU.js";
+import {
+  useTheme
+} from "./chunk-CUAWHLEK.js";
+
+// src/components/atoms/Typography.tsx
+import React from "react";
+import { Text, StyleSheet } from "react-native";
+function Typography({
+  variant = "body",
+  color,
+  align = "left",
+  children,
+  style,
+  isLoading,
+  error,
+  ...rest
+}) {
+  const theme = useTheme();
+  if (isLoading) {
+    return /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [
+          styles.skeleton,
+          {
+            backgroundColor: theme.colors.muted,
+            width: "60%"
+          },
+          style
+        ],
+        ...rest
+      },
+      " "
+    );
+  }
+  const variantStyles = {
+    h1: {
+      fontSize: theme.typography.sizes["4xl"],
+      fontWeight: theme.typography.fontWeight.bold,
+      lineHeight: theme.typography.lineHeight * theme.typography.sizes["4xl"],
+      color: theme.colors.foreground
+    },
+    h2: {
+      fontSize: theme.typography.sizes["3xl"],
+      fontWeight: theme.typography.fontWeight.bold,
+      lineHeight: theme.typography.lineHeight * theme.typography.sizes["3xl"],
+      color: theme.colors.foreground
+    },
+    h3: {
+      fontSize: theme.typography.sizes["2xl"],
+      fontWeight: theme.typography.fontWeight.bold,
+      lineHeight: theme.typography.lineHeight * theme.typography.sizes["2xl"],
+      color: theme.colors.foreground
+    },
+    h4: {
+      fontSize: theme.typography.sizes.xl,
+      fontWeight: theme.typography.fontWeight.medium,
+      lineHeight: theme.typography.lineHeight * theme.typography.sizes.xl,
+      color: theme.colors.foreground
+    },
+    body: {
+      fontSize: theme.typography.sizes.base,
+      fontWeight: theme.typography.fontWeight.normal,
+      lineHeight: theme.typography.lineHeight * theme.typography.sizes.base,
+      color: theme.colors.foreground
+    },
+    caption: {
+      fontSize: theme.typography.sizes.sm,
+      fontWeight: theme.typography.fontWeight.normal,
+      lineHeight: theme.typography.lineHeight * theme.typography.sizes.sm,
+      color: theme.colors["muted-foreground"]
+    },
+    label: {
+      fontSize: theme.typography.sizes.xs,
+      fontWeight: theme.typography.fontWeight.medium,
+      lineHeight: theme.typography.lineHeight * theme.typography.sizes.xs,
+      color: theme.colors["muted-foreground"],
+      textTransform: "uppercase"
+    }
+  };
+  const textColor = error ? theme.colors.error : color || variantStyles[variant].color;
+  return /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [
+        variantStyles[variant],
+        { textAlign: align, color: textColor },
+        style
+      ],
+      ...rest
+    },
+    children
+  );
+}
+var styles = StyleSheet.create({
+  skeleton: {
+    borderRadius: 4
+  }
+});
+Typography.displayName = "Typography";
+
+// src/components/molecules/LoadingState.tsx
+import React5 from "react";
+import { ActivityIndicator as ActivityIndicator2, StyleSheet as StyleSheet5 } from "react-native";
+
+// src/components/atoms/Stack.tsx
+import React4 from "react";
+import { View, StyleSheet as StyleSheet4 } from "react-native";
+
+// src/components/molecules/ErrorState.tsx
+import React3 from "react";
+import { StyleSheet as StyleSheet3 } from "react-native";
+
+// src/components/atoms/Button.tsx
+import React2 from "react";
+import {
+  TouchableOpacity,
+  Text as Text2,
+  StyleSheet as StyleSheet2,
+  ActivityIndicator
+} from "react-native";
+var Button = ({
+  onPress,
+  children,
+  variant = "default",
+  size = "md",
+  disabled = false,
+  isLoading = false,
+  style,
+  textStyle,
+  action,
+  actionPayload
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handlePress = () => {
+    if (action) {
+      eventBus.emit(`UI:${action}`, actionPayload);
+    }
+    onPress?.();
+  };
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "primary":
+        return {
+          container: {
+            backgroundColor: theme.colors.primary
+          },
+          text: {
+            color: theme.colors["primary-foreground"]
+          }
+        };
+      case "secondary":
+        return {
+          container: {
+            backgroundColor: theme.colors.secondary
+          },
+          text: {
+            color: theme.colors["secondary-foreground"]
+          }
+        };
+      case "ghost":
+        return {
+          container: {
+            backgroundColor: "transparent"
+          },
+          text: {
+            color: theme.colors.primary
+          }
+        };
+      case "destructive":
+        return {
+          container: {
+            backgroundColor: theme.colors.error
+          },
+          text: {
+            color: theme.colors["error-foreground"]
+          }
+        };
+      default:
+        return {
+          container: {
+            backgroundColor: theme.colors.card,
+            borderWidth: 1,
+            borderColor: theme.colors.border
+          },
+          text: {
+            color: theme.colors.foreground
+          }
+        };
+    }
+  };
+  const sizeStyles = {
+    sm: {
+      container: {
+        paddingVertical: theme.spacing[1],
+        paddingHorizontal: theme.spacing[3],
+        borderRadius: theme.borderRadius.md
+      },
+      text: {
+        fontSize: theme.typography.sizes.sm
+      }
+    },
+    md: {
+      container: {
+        paddingVertical: theme.spacing[2],
+        paddingHorizontal: theme.spacing[4],
+        borderRadius: theme.borderRadius.md
+      },
+      text: {
+        fontSize: theme.typography.sizes.base
+      }
+    },
+    lg: {
+      container: {
+        paddingVertical: theme.spacing[3],
+        paddingHorizontal: theme.spacing[6],
+        borderRadius: theme.borderRadius.lg
+      },
+      text: {
+        fontSize: theme.typography.sizes.lg
+      }
+    }
+  };
+  const variantStyle = getVariantStyles();
+  const sizeStyle = sizeStyles[size];
+  return /* @__PURE__ */ React2.createElement(
+    TouchableOpacity,
+    {
+      onPress: handlePress,
+      disabled: disabled || isLoading,
+      activeOpacity: 0.8,
+      style: [
+        styles2.button,
+        variantStyle.container,
+        sizeStyle.container,
+        (disabled || isLoading) && { opacity: 0.5 },
+        style
+      ]
+    },
+    isLoading ? /* @__PURE__ */ React2.createElement(ActivityIndicator, { color: variantStyle.text.color, size: "small" }) : /* @__PURE__ */ React2.createElement(Text2, { style: [styles2.text, variantStyle.text, sizeStyle.text, textStyle] }, children)
+  );
+};
+var styles2 = StyleSheet2.create({
+  button: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  text: {
+    fontWeight: "500"
+  }
+});
+Button.displayName = "Button";
+
+// src/components/molecules/ErrorState.tsx
+var ErrorState = ({
+  message = "Something went wrong",
+  onRetry
+}) => {
+  return /* @__PURE__ */ React3.createElement(VStack, { align: "center", spacing: 16, style: styles3.container }, /* @__PURE__ */ React3.createElement(Typography, { variant: "body", color: "#ef4444" }, message), onRetry && /* @__PURE__ */ React3.createElement(Button, { variant: "secondary", onPress: onRetry }, "Retry"));
+};
+var styles3 = StyleSheet3.create({
+  container: {
+    padding: 32,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+ErrorState.displayName = "ErrorState";
+
+// src/components/atoms/Stack.tsx
+var VStack = ({
+  spacing = 8,
+  align = "stretch",
+  justify = "flex-start",
+  children,
+  style,
+  testID,
+  isLoading,
+  error
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ React4.createElement(View, { style: [styles4.vstack, style] }, /* @__PURE__ */ React4.createElement(LoadingState, null));
+  }
+  if (error) {
+    return /* @__PURE__ */ React4.createElement(View, { style: [styles4.vstack, style] }, /* @__PURE__ */ React4.createElement(ErrorState, { message: error.message }));
+  }
+  const stackStyles = [
+    styles4.vstack,
+    { gap: spacing, alignItems: align, justifyContent: justify }
+  ];
+  if (Array.isArray(style)) {
+    stackStyles.push(...style);
+  } else if (style) {
+    stackStyles.push(style);
+  }
+  return /* @__PURE__ */ React4.createElement(View, { testID, style: stackStyles }, children);
+};
+var HStack = ({
+  spacing = 8,
+  align = "center",
+  justify = "flex-start",
+  children,
+  style,
+  testID,
+  isLoading,
+  error
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ React4.createElement(View, { style: [styles4.hstack, style] }, /* @__PURE__ */ React4.createElement(LoadingState, null));
+  }
+  if (error) {
+    return /* @__PURE__ */ React4.createElement(View, { style: [styles4.hstack, style] }, /* @__PURE__ */ React4.createElement(ErrorState, { message: error.message }));
+  }
+  const stackStyles = [
+    styles4.hstack,
+    { gap: spacing, alignItems: align, justifyContent: justify }
+  ];
+  if (Array.isArray(style)) {
+    stackStyles.push(...style);
+  } else if (style) {
+    stackStyles.push(style);
+  }
+  return /* @__PURE__ */ React4.createElement(View, { testID, style: stackStyles }, children);
+};
+var Box = ({
+  children,
+  style,
+  testID,
+  isLoading,
+  error
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ React4.createElement(View, { style: [styles4.box, style] }, /* @__PURE__ */ React4.createElement(LoadingState, null));
+  }
+  if (error) {
+    return /* @__PURE__ */ React4.createElement(View, { style: [styles4.box, style] }, /* @__PURE__ */ React4.createElement(ErrorState, { message: error.message }));
+  }
+  const boxStyles = [styles4.box];
+  if (Array.isArray(style)) {
+    boxStyles.push(...style);
+  } else if (style) {
+    boxStyles.push(style);
+  }
+  return /* @__PURE__ */ React4.createElement(View, { testID, style: boxStyles }, children);
+};
+var styles4 = StyleSheet4.create({
+  vstack: {
+    flexDirection: "column"
+  },
+  hstack: {
+    flexDirection: "row"
+  },
+  box: {
+    // Base box styles - mostly empty to allow full customization
+  }
+});
+VStack.displayName = "VStack";
+HStack.displayName = "HStack";
+Box.displayName = "Box";
+
+// src/components/molecules/LoadingState.tsx
+var LoadingState = ({
+  message = "Loading..."
+}) => {
+  return /* @__PURE__ */ React5.createElement(VStack, { align: "center", spacing: 12, style: styles5.container }, /* @__PURE__ */ React5.createElement(ActivityIndicator2, { size: "large", color: "#6366f1" }), /* @__PURE__ */ React5.createElement(Typography, { variant: "body", color: "#6b7280" }, message));
+};
+var styles5 = StyleSheet5.create({
+  container: {
+    padding: 32,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+LoadingState.displayName = "LoadingState";
+
+// src/components/atoms/Input.tsx
+import React6 from "react";
+import {
+  TextInput,
+  StyleSheet as StyleSheet6,
+  View as View2,
+  Text as Text3
+} from "react-native";
+var Input = ({
+  label,
+  errorMessage,
+  helperText,
+  containerStyle,
+  style,
+  isLoading,
+  error,
+  changeEvent,
+  focusEvent,
+  onChangeText,
+  onFocus,
+  onBlur,
+  ...textInputProps
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handleChangeText = (text) => {
+    if (changeEvent) {
+      eventBus.emit(`UI:${changeEvent}`, { value: text });
+    }
+    onChangeText?.(text);
+  };
+  const handleFocus = () => {
+    if (focusEvent) {
+      eventBus.emit(`UI:${focusEvent}`);
+    }
+    onFocus?.({});
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ React6.createElement(View2, { style: [styles6.container, containerStyle] }, label && /* @__PURE__ */ React6.createElement(Text3, { style: [styles6.label, { color: theme.colors.foreground }] }, label), /* @__PURE__ */ React6.createElement(LoadingState, { message: "Loading..." }));
+  }
+  const errorText = error?.message || errorMessage;
+  return /* @__PURE__ */ React6.createElement(View2, { style: [styles6.container, containerStyle] }, label && /* @__PURE__ */ React6.createElement(Text3, { style: [styles6.label, { color: theme.colors.foreground }] }, label), /* @__PURE__ */ React6.createElement(
+    TextInput,
+    {
+      style: [
+        styles6.input,
+        {
+          borderColor: errorText ? theme.colors.error : theme.colors.border,
+          backgroundColor: theme.colors.card,
+          color: theme.colors.foreground
+        },
+        style
+      ],
+      placeholderTextColor: theme.colors["muted-foreground"],
+      onChangeText: handleChangeText,
+      onFocus: handleFocus,
+      onBlur,
+      ...textInputProps
+    }
+  ), errorText ? /* @__PURE__ */ React6.createElement(Text3, { style: [styles6.errorText, { color: theme.colors.error }] }, errorText) : helperText ? /* @__PURE__ */ React6.createElement(Text3, { style: [styles6.helperText, { color: theme.colors["muted-foreground"] }] }, helperText) : null);
+};
+var styles6 = StyleSheet6.create({
+  container: {
+    width: "100%"
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "500",
+    marginBottom: 6
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 16
+  },
+  errorText: {
+    fontSize: 12,
+    marginTop: 4
+  },
+  helperText: {
+    fontSize: 12,
+    marginTop: 4
+  }
+});
+Input.displayName = "Input";
+
+// src/components/atoms/Select.tsx
+import React7, { useState } from "react";
+import {
+  TouchableOpacity as TouchableOpacity2,
+  View as View3,
+  Text as Text4,
+  StyleSheet as StyleSheet7,
+  Modal,
+  FlatList,
+  SafeAreaView
+} from "react-native";
+var Select = ({
+  options,
+  value,
+  onChange,
+  placeholder = "Select...",
+  disabled = false,
+  style,
+  textStyle,
+  isLoading,
+  error,
+  changeEvent,
+  actionPayload
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [isOpen, setIsOpen] = useState(false);
+  const selectedOption = options.find((opt) => opt.value === value);
+  const handleSelect = (selectedValue) => {
+    if (changeEvent) {
+      eventBus.emit(`UI:${changeEvent}`, { ...actionPayload, value: selectedValue });
+    }
+    onChange?.(selectedValue);
+    setIsOpen(false);
+  };
+  const handleOpen = () => {
+    if (!disabled && !isLoading) {
+      setIsOpen(true);
+    }
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ React7.createElement(View3, { style: [styles7.container, style] }, /* @__PURE__ */ React7.createElement(LoadingState, { message: "Loading..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React7.createElement(View3, { style: [styles7.container, style] }, /* @__PURE__ */ React7.createElement(ErrorState, { message: error.message }));
+  }
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+    TouchableOpacity2,
+    {
+      onPress: handleOpen,
+      disabled,
+      activeOpacity: 0.8,
+      style: [
+        styles7.button,
+        {
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.card,
+          opacity: disabled ? 0.5 : 1
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React7.createElement(
+      Text4,
+      {
+        style: [
+          styles7.buttonText,
+          {
+            color: selectedOption ? theme.colors.foreground : theme.colors["muted-foreground"]
+          },
+          textStyle
+        ],
+        numberOfLines: 1
+      },
+      selectedOption?.label || placeholder
+    ),
+    /* @__PURE__ */ React7.createElement(Text4, { style: [styles7.chevron, { color: theme.colors["muted-foreground"] }] }, "\u25BC")
+  ), /* @__PURE__ */ React7.createElement(
+    Modal,
+    {
+      visible: isOpen,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: () => setIsOpen(false)
+    },
+    /* @__PURE__ */ React7.createElement(SafeAreaView, { style: [styles7.modalContainer, { backgroundColor: theme.colors.background }] }, /* @__PURE__ */ React7.createElement(View3, { style: styles7.modalHeader }, /* @__PURE__ */ React7.createElement(TouchableOpacity2, { onPress: () => setIsOpen(false) }, /* @__PURE__ */ React7.createElement(Text4, { style: [styles7.closeButton, { color: theme.colors.primary }] }, "Close"))), /* @__PURE__ */ React7.createElement(
+      FlatList,
+      {
+        data: options,
+        keyExtractor: (item) => item.value,
+        renderItem: ({ item }) => /* @__PURE__ */ React7.createElement(
+          TouchableOpacity2,
+          {
+            style: [
+              styles7.option,
+              {
+                backgroundColor: item.value === value ? theme.colors.primary : theme.colors.card,
+                borderBottomColor: theme.colors.border
+              }
+            ],
+            onPress: () => handleSelect(item.value)
+          },
+          /* @__PURE__ */ React7.createElement(
+            Text4,
+            {
+              style: {
+                color: item.value === value ? theme.colors["primary-foreground"] : theme.colors.foreground
+              }
+            },
+            item.label
+          )
+        )
+      }
+    ))
+  ));
+};
+var styles7 = StyleSheet7.create({
+  container: {
+    width: "100%"
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  },
+  buttonText: {
+    fontSize: 16,
+    flex: 1
+  },
+  chevron: {
+    fontSize: 12,
+    marginLeft: 8
+  },
+  modalContainer: {
+    flex: 1
+  },
+  modalHeader: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "#e2e8f0"
+  },
+  closeButton: {
+    fontSize: 16,
+    fontWeight: "500"
+  },
+  option: {
+    padding: 16,
+    borderBottomWidth: 1
+  }
+});
+Select.displayName = "Select";
+
+// src/components/atoms/Card.tsx
+import React8 from "react";
+import { View as View4, StyleSheet as StyleSheet8, TouchableOpacity as TouchableOpacity3 } from "react-native";
+var Card = ({
+  children,
+  onPress,
+  style,
+  padding = "md",
+  variant = "default",
+  isLoading,
+  error,
+  action,
+  actionPayload
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handlePress = () => {
+    if (action) {
+      eventBus.emit(`UI:${action}`, actionPayload);
+    }
+    onPress?.();
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ React8.createElement(View4, { style: [styles8.card, style] }, /* @__PURE__ */ React8.createElement(LoadingState, null));
+  }
+  if (error) {
+    return /* @__PURE__ */ React8.createElement(View4, { style: [styles8.card, style] }, /* @__PURE__ */ React8.createElement(ErrorState, { message: error.message }));
+  }
+  const paddingStyles = {
+    none: { padding: 0 },
+    sm: { padding: theme.spacing[3] },
+    md: { padding: theme.spacing[4] },
+    lg: { padding: theme.spacing[6] }
+  };
+  const variantStyles = {
+    default: {
+      backgroundColor: theme.colors.card,
+      ...theme.shadows.main
+    },
+    elevated: {
+      backgroundColor: theme.colors.card,
+      ...theme.shadows.lg
+    },
+    outlined: {
+      backgroundColor: theme.colors.card,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      ...theme.shadows.none
+    }
+  };
+  const cardStyles = [
+    styles8.card,
+    variantStyles[variant],
+    paddingStyles[padding]
+  ];
+  if (Array.isArray(style)) {
+    cardStyles.push(...style);
+  } else if (style) {
+    cardStyles.push(style);
+  }
+  const content = /* @__PURE__ */ React8.createElement(View4, { style: cardStyles }, children);
+  if (onPress || action) {
+    return /* @__PURE__ */ React8.createElement(TouchableOpacity3, { onPress: handlePress, activeOpacity: 0.9 }, content);
+  }
+  return content;
+};
+var styles8 = StyleSheet8.create({
+  card: {
+    borderRadius: 12
+  }
+});
+Card.displayName = "Card";
+
+// src/components/atoms/Badge.tsx
+import React9 from "react";
+import { View as View5, Text as Text5, StyleSheet as StyleSheet9 } from "react-native";
+var Badge = ({
+  children,
+  variant = "default",
+  size = "md",
+  style,
+  isLoading,
+  error
+}) => {
+  const theme = useTheme();
+  if (isLoading) {
+    return /* @__PURE__ */ React9.createElement(View5, { style: [styles9.badge, style] }, /* @__PURE__ */ React9.createElement(LoadingState, { message: "Loading..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React9.createElement(View5, { style: [styles9.badge, style] }, /* @__PURE__ */ React9.createElement(ErrorState, { message: error.message }));
+  }
+  const variantStyles = {
+    default: {
+      container: {
+        backgroundColor: theme.colors.secondary
+      },
+      text: {
+        color: theme.colors["secondary-foreground"]
+      }
+    },
+    primary: {
+      container: {
+        backgroundColor: theme.colors.primary
+      },
+      text: {
+        color: theme.colors["primary-foreground"]
+      }
+    },
+    secondary: {
+      container: {
+        backgroundColor: theme.colors["secondary-hover"]
+      },
+      text: {
+        color: theme.colors["secondary-foreground"]
+      }
+    },
+    success: {
+      container: {
+        backgroundColor: theme.colors.success
+      },
+      text: {
+        color: theme.colors["success-foreground"]
+      }
+    },
+    warning: {
+      container: {
+        backgroundColor: theme.colors.warning
+      },
+      text: {
+        color: theme.colors["warning-foreground"]
+      }
+    },
+    error: {
+      container: {
+        backgroundColor: theme.colors.error
+      },
+      text: {
+        color: theme.colors["error-foreground"]
+      }
+    }
+  };
+  const sizeStyles = {
+    sm: {
+      container: {
+        paddingHorizontal: theme.spacing[2],
+        paddingVertical: 2,
+        borderRadius: theme.borderRadius.full
+      },
+      text: {
+        fontSize: theme.typography.sizes.xs
+      }
+    },
+    md: {
+      container: {
+        paddingHorizontal: theme.spacing[3],
+        paddingVertical: theme.spacing[1],
+        borderRadius: theme.borderRadius.full
+      },
+      text: {
+        fontSize: theme.typography.sizes.sm
+      }
+    }
+  };
+  const variantStyle = variantStyles[variant];
+  const sizeStyle = sizeStyles[size];
+  return /* @__PURE__ */ React9.createElement(View5, { style: [styles9.badge, variantStyle.container, sizeStyle.container, style] }, /* @__PURE__ */ React9.createElement(Text5, { style: [styles9.text, variantStyle.text, sizeStyle.text] }, children));
+};
+var styles9 = StyleSheet9.create({
+  badge: {
+    alignSelf: "flex-start"
+  },
+  text: {
+    fontWeight: "500"
+  }
+});
+Badge.displayName = "Badge";
+
+// src/components/atoms/ProgressBar.tsx
+import React10 from "react";
+import { View as View6, StyleSheet as StyleSheet10, Text as Text6 } from "react-native";
+var ProgressBar = ({
+  progress,
+  showLabel = false,
+  size = "md",
+  style,
+  trackStyle,
+  fillStyle,
+  isLoading,
+  error
+}) => {
+  const theme = useTheme();
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+  if (isLoading) {
+    return /* @__PURE__ */ React10.createElement(View6, { style: [styles10.container, style] }, /* @__PURE__ */ React10.createElement(LoadingState, { message: "Loading..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React10.createElement(View6, { style: [styles10.container, style] }, /* @__PURE__ */ React10.createElement(ErrorState, { message: error.message }));
+  }
+  const heightMap = {
+    sm: 4,
+    md: 8,
+    lg: 12
+  };
+  const height = heightMap[size];
+  return /* @__PURE__ */ React10.createElement(View6, { style: [styles10.container, style] }, /* @__PURE__ */ React10.createElement(
+    View6,
+    {
+      style: [
+        styles10.track,
+        {
+          height,
+          backgroundColor: theme.colors.muted,
+          borderRadius: height / 2
+        },
+        trackStyle
+      ]
+    },
+    /* @__PURE__ */ React10.createElement(
+      View6,
+      {
+        style: [
+          styles10.fill,
+          {
+            width: `${clampedProgress}%`,
+            height: "100%",
+            backgroundColor: theme.colors.primary,
+            borderRadius: height / 2
+          },
+          fillStyle
+        ]
+      }
+    )
+  ), showLabel && /* @__PURE__ */ React10.createElement(Text6, { style: [styles10.label, { color: theme.colors.foreground }] }, Math.round(clampedProgress), "%"));
+};
+var styles10 = StyleSheet10.create({
+  container: {
+    width: "100%"
+  },
+  track: {
+    width: "100%",
+    overflow: "hidden"
+  },
+  fill: {
+    // Animated fill
+  },
+  label: {
+    marginTop: 4,
+    fontSize: 12,
+    fontWeight: "500",
+    textAlign: "right"
+  }
+});
+ProgressBar.displayName = "ProgressBar";
+
+// src/components/atoms/game/HealthBar.tsx
+import React11 from "react";
+import { View as View7, Text as Text7, StyleSheet as StyleSheet11 } from "react-native";
+var sizeMap = {
+  sm: { heart: 16, bar: 8, text: 12 },
+  md: { heart: 24, bar: 12, text: 16 },
+  lg: { heart: 32, bar: 16, text: 20 }
+};
+var HeartIcon = ({
+  filled,
+  size,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  color
+}) => /* @__PURE__ */ React11.createElement(
+  View7,
+  {
+    style: {
+      width: size,
+      height: size,
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  },
+  /* @__PURE__ */ React11.createElement(
+    Text7,
+    {
+      style: {
+        fontSize: size * 0.8,
+        color: filled ? "#ef4444" : "#9ca3af"
+      }
+    },
+    filled ? "\u2665" : "\u2661"
+  )
+);
+var HealthBar = ({
+  current,
+  max,
+  format = "hearts",
+  size = "md",
+  style,
+  animated = true
+}) => {
+  const theme = useTheme();
+  const sizes = sizeMap[size];
+  const percentage = Math.max(0, Math.min(100, current / max * 100));
+  if (format === "hearts") {
+    return /* @__PURE__ */ React11.createElement(View7, { style: [styles11.heartsContainer, style] }, Array.from({ length: max }).map((_, i) => /* @__PURE__ */ React11.createElement(
+      View7,
+      {
+        key: i,
+        style: [
+          animated && styles11.animatedHeart
+        ]
+      },
+      /* @__PURE__ */ React11.createElement(
+        HeartIcon,
+        {
+          filled: i < current,
+          size: sizes.heart,
+          color: theme.colors.error
+        }
+      )
+    )));
+  }
+  if (format === "bar") {
+    const barColor = percentage > 66 ? "#22c55e" : percentage > 33 ? "#eab308" : "#ef4444";
+    return /* @__PURE__ */ React11.createElement(
+      View7,
+      {
+        style: [
+          styles11.barContainer,
+          {
+            height: sizes.bar,
+            backgroundColor: theme.colors.muted
+          },
+          style
+        ]
+      },
+      /* @__PURE__ */ React11.createElement(
+        View7,
+        {
+          style: [
+            styles11.barFill,
+            {
+              width: `${percentage}%`,
+              backgroundColor: barColor
+            },
+            animated && styles11.animatedBar
+          ]
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ React11.createElement(
+    Text7,
+    {
+      style: [
+        styles11.numericText,
+        {
+          fontSize: sizes.text,
+          color: theme.colors.foreground
+        },
+        style
+      ]
+    },
+    current,
+    "/",
+    max
+  );
+};
+var styles11 = StyleSheet11.create({
+  heartsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  animatedHeart: {
+    // React Native transform animation could be added here
+  },
+  barContainer: {
+    width: 96,
+    borderRadius: 9999,
+    overflow: "hidden"
+  },
+  barFill: {
+    height: "100%",
+    borderRadius: 9999
+  },
+  animatedBar: {
+    // LayoutAnimation could be configured
+  },
+  numericText: {
+    fontFamily: "monospace",
+    fontWeight: "700"
+  }
+});
+HealthBar.displayName = "HealthBar";
+
+// src/components/atoms/game/ScoreDisplay.tsx
+import React12, { useState as useState2, useEffect } from "react";
+import { View as View8, Text as Text8, StyleSheet as StyleSheet12 } from "react-native";
+var sizeMap2 = {
+  sm: { fontSize: 14 },
+  md: { fontSize: 18 },
+  lg: { fontSize: 24 },
+  xl: { fontSize: 36 }
+};
+var ScoreDisplay = ({
+  value,
+  label,
+  icon,
+  size = "md",
+  style,
+  animated = true,
+  locale = "en-US"
+}) => {
+  const theme = useTheme();
+  const [displayValue, setDisplayValue] = useState2(value);
+  const [isAnimating, setIsAnimating] = useState2(false);
+  const sizeConfig = sizeMap2[size] ?? sizeMap2.md;
+  useEffect(() => {
+    if (!animated || displayValue === value) {
+      setDisplayValue(value);
+      return;
+    }
+    setIsAnimating(true);
+    const diff = value - displayValue;
+    const steps = Math.min(Math.abs(diff), 20);
+    const increment = diff / steps;
+    let current = displayValue;
+    let step = 0;
+    const timer = setInterval(() => {
+      step++;
+      current += increment;
+      setDisplayValue(Math.round(current));
+      if (step >= steps) {
+        clearInterval(timer);
+        setDisplayValue(value);
+        setIsAnimating(false);
+      }
+    }, 50);
+    return () => clearInterval(timer);
+  }, [value, animated]);
+  const formattedValue = new Intl.NumberFormat(locale).format(displayValue);
+  return /* @__PURE__ */ React12.createElement(
+    View8,
+    {
+      style: [
+        styles12.container,
+        {
+          opacity: isAnimating ? 0.7 : 1
+        },
+        style
+      ]
+    },
+    icon && /* @__PURE__ */ React12.createElement(Text8, { style: { fontSize: sizeConfig.fontSize, marginRight: 8 } }, icon),
+    label && /* @__PURE__ */ React12.createElement(
+      Text8,
+      {
+        style: {
+          fontSize: sizeConfig.fontSize,
+          color: theme.colors["muted-foreground"],
+          marginRight: 8
+        }
+      },
+      label
+    ),
+    /* @__PURE__ */ React12.createElement(
+      Text8,
+      {
+        style: {
+          fontSize: sizeConfig.fontSize,
+          color: theme.colors.foreground,
+          fontWeight: "700",
+          fontVariant: ["tabular-nums"]
+        }
+      },
+      formattedValue
+    )
+  );
+};
+var styles12 = StyleSheet12.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+ScoreDisplay.displayName = "ScoreDisplay";
+
+export {
+  Typography,
+  LoadingState,
+  Button,
+  ErrorState,
+  VStack,
+  HStack,
+  Box,
+  Input,
+  Select,
+  Card,
+  Badge,
+  ProgressBar,
+  HealthBar,
+  ScoreDisplay
+};
+//# sourceMappingURL=chunk-7C5JCLLY.js.map