@mrmeg/expo-ui 0.1.0 → 0.1.1

package/README.md

@@ -2,6 +2,12 @@
 
 Reusable Expo and React Native UI primitives shared by the template and consumer apps. The package does not ship font files; web consumers load Lato from Google Fonts and native consumers use platform sans-serif fallbacks.
 
+This package is public for installability, reuse across MrMeg projects, and
+discoverability. It is a personal reusable Expo / React Native design-system
+package, not a generally supported open-source UI library. The package is
+published as `UNLICENSED`; use outside MrMeg projects requires explicit
+permission.
+
 ## Install
 
 Install from npm after publishing:
@@ -10,7 +16,12 @@ Install from npm after publishing:
 bun add @mrmeg/expo-ui
 ```
 
-Consumers must also install the peer dependencies listed in `package.json`. Keep npm auth tokens in developer or CI configuration, not in this repository.
+Consumers must also install the peer dependencies listed in `package.json`.
+The tested baseline is Expo SDK 55 with React 19.2, React Native 0.83,
+React Native Web 0.21, Reanimated 4.2, Worklets 0.7, and
+`@rn-primitives/*` 1.4. Start consumer apps from the same Expo SDK family
+or update the package and peer ranges deliberately. Keep npm auth tokens in
+developer or CI configuration, not in this repository.
 
 ## Imports
 
@@ -20,7 +31,7 @@ import { Button as ButtonDirect } from "@mrmeg/expo-ui/components/Button";
 import { colors, spacing, typography } from "@mrmeg/expo-ui/constants";
 import { useResources, useTheme } from "@mrmeg/expo-ui/hooks";
 import { globalUIStore, useThemeStore } from "@mrmeg/expo-ui/state";
-import { hapticLight, setupSentry } from "@mrmeg/expo-ui/lib";
+import { hapticLight } from "@mrmeg/expo-ui/lib";
 ```
 
 The root barrel also exports the public surface:
@@ -29,6 +40,123 @@ The root barrel also exports the public surface:
 import { Button, colors, useTheme } from "@mrmeg/expo-ui";
 ```
 
+## Theme System
+
+Use `useTheme()` for theme-aware app styles:
+
+```tsx
+import { StyleSheet, View } from "react-native";
+import { StyledText } from "@mrmeg/expo-ui/components";
+import { spacing } from "@mrmeg/expo-ui/constants";
+import { useTheme } from "@mrmeg/expo-ui/hooks";
+
+export function Panel() {
+  const { theme, getShadowStyle } = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.panel,
+        {
+          backgroundColor: theme.colors.card,
+          borderColor: theme.colors.border,
+        },
+        getShadowStyle("subtle"),
+      ]}
+    >
+      <StyledText semantic="heading">Theme-aware panel</StyledText>
+      <StyledText semantic="body" style={{ color: theme.colors.mutedForeground }}>
+        Uses package tokens instead of hardcoded colors.
+      </StyledText>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  panel: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: spacing.radiusLg,
+    padding: spacing.cardPadding,
+    gap: spacing.sm,
+  },
+});
+```
+
+`useTheme()` returns the active `theme`, resolved `scheme`, persisted `currentTheme`, `setTheme`, `toggleTheme`, shadow helpers, contrast helpers, and `withAlpha`. Use semantic tokens such as `theme.colors.background`, `foreground`, `card`, `border`, `primary`, `secondary`, `accent`, `mutedForeground`, `destructive`, `success`, and `warning`. `primary` is the neutral action color, `secondary` is a neutral secondary surface, and `accent` is the teal highlight color.
+
+Use `StyledText` for theme-aware text:
+
+```tsx
+import { BodyText, CaptionText, HeadingText, StyledText } from "@mrmeg/expo-ui/components";
+
+<HeadingText>Settings</HeadingText>
+<BodyText>Manage your account.</BodyText>
+<CaptionText>Changes sync automatically.</CaptionText>
+<StyledText semantic="label" tx="common.email" />
+```
+
+Useful `StyledText` props:
+
+- `semantic`: `title`, `heading`, `subheading`, `body`, `caption`, `label`
+- `size`: `xs`, `sm`, `base`, `body`, `lg`, `xl`, `xxl`, `display`
+- `fontWeight`: `light`, `regular`, `medium`, `semibold`, `bold`
+- `variant`: `sansSerif`, `serif`
+- `align`, `tx`, `txOptions`
+
+## Component Guide
+
+All components are exported from `@mrmeg/expo-ui/components`; direct imports such as `@mrmeg/expo-ui/components/Button` are supported.
+
+Layout:
+
+- `AnimatedView` - Reanimated visibility/entrance wrapper.
+- `Card` - Framed content with `variant`: `default`, `outline`, `ghost`; includes `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`.
+- `MaxWidthContainer` - Centered responsive content width.
+- `Separator` - Theme-aware divider.
+- `DismissKeyboard` - Tap-away keyboard dismissal wrapper.
+
+Forms and actions:
+
+- `Button` - Commands with `preset`: `default` for primary neutral actions, `secondary` for neutral secondary actions, plus `outline`, `ghost`, `link`, and `destructive`; `size`: `sm`, `md`, `lg`; supports `loading`, `fullWidth`, accessories, and shadows.
+- `TextInput` - Inputs with `variant`: `outline`, `filled`, `underlined`; `size`: `sm`, `md`, `lg`; supports labels, helper/error text, clear/password affordances, and left/right elements.
+- `Checkbox`, `RadioGroup`, `Select`, `Switch`, `Toggle`, `ToggleGroup`, `InputOTP`, `Slider`, `Label` - Form controls built on package tokens and `@rn-primitives` where applicable.
+
+Feedback:
+
+- `Alert`, `Badge`, `Notification`, `Progress`, `Skeleton`, `SkeletonText`, `SkeletonAvatar`, `SkeletonCard`, `EmptyState`, `StatusBar`.
+- Mount `Notification` once near the app root; trigger it with `globalUIStore`.
+
+Overlays and navigation:
+
+- `Dialog`, `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `Tooltip` require `PortalHost` near the app root.
+- `Tabs`, `Accordion`, and `Collapsible` cover in-page navigation and disclosure.
+
+Example:
+
+```tsx
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@mrmeg/expo-ui/components";
+
+<Card variant="outline">
+  <CardHeader>
+    <CardTitle>Subscription</CardTitle>
+    <Badge variant="secondary">Active</Badge>
+  </CardHeader>
+  <CardContent>
+    <Button preset="default" fullWidth>
+      Manage billing
+    </Button>
+  </CardContent>
+</Card>
+```
+
+LLM rules:
+
+- Prefer `StyledText` semantic variants over raw `Text`.
+- Use `useTheme()` and semantic tokens instead of hardcoded colors.
+- Use `Button.preset`, not `variant`, for buttons.
+- Mount `PortalHost` before using overlays, menus, select content, popovers, or tooltips.
+- Import from package exports, not `packages/ui/src/*`.
+
 ## App Startup
 
 Call `useResources()` once near the Expo app root before hiding the splash screen:
@@ -94,3 +222,7 @@ bun run ui:consumer-smoke
 ```
 
 `bun run ui:pack` runs a dry pack so the published file list and package size can be inspected before release.
+`bun run ui:consumer-smoke` installs the packed tarball into a clean fixture,
+checks the documented export-map files, type-checks all public package
+entrypoints, and verifies that `@mrmeg/expo-ui/constants` can be imported
+by plain Node ESM for token inspection.

package/dist/components/Accordion.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useState } from "react";
 import { Platform, Pressable, View } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
-import { Icon } from "./Icon";
-import { TextClassContext } from "./StyledText";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
+import { Icon } from "./Icon.js";
+import { TextClassContext } from "./StyledText.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
 import * as AccordionPrimitive from "@rn-primitives/accordion";
 function normalizeSingleValue(value) {
     return value ?? "";

package/dist/components/AnimatedView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Animated from "react-native-reanimated";
-import { useStaggeredEntrance } from "../hooks/useStaggeredEntrance";
+import { useStaggeredEntrance } from "../hooks/useStaggeredEntrance.js";
 /**
  * Cross-Platform Animated View Component
  * Uses Reanimated for smooth 60fps animations on all platforms

package/dist/components/Badge.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
-import { StyledText } from "./StyledText";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+import { StyledText } from "./StyledText.js";
 /**
  * Badge Component
  *

package/dist/components/BottomSheet.js

@@ -4,10 +4,10 @@ import { View, Pressable, Animated, StyleSheet, Platform, Dimensions, PanRespond
 import { Portal } from "@rn-primitives/portal";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { Pressable as SlotPressable } from "@rn-primitives/slot";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
-import { shouldUseNativeDriver } from "../lib/animations";
-import { TextColorContext, TextClassContext } from "./StyledText";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
+import { TextColorContext, TextClassContext } from "./StyledText.js";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**
  * BottomSheet Component with Sub-components

package/dist/components/Button.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Pressable, StyleSheet, View, Platform, ActivityIndicator, } from "react-native";
 import Animated from "react-native-reanimated";
-import { spacing } from "../constants/spacing";
-import { StyledText, TextColorContext } from "./StyledText";
-import { fontFamilies } from "../constants/fonts";
-import { palette } from "../constants/colors";
-import { useTheme } from "../hooks/useTheme";
-import { useScalePress } from "../hooks/useScalePress";
+import { spacing } from "../constants/spacing.js";
+import { StyledText, TextColorContext } from "./StyledText.js";
+import { fontFamilies } from "../constants/fonts.js";
+import { palette } from "../constants/colors.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 const SIZE_CONFIGS = {
     sm: {
         paddingVertical: spacing.xs,
@@ -64,7 +64,7 @@ const SIZE_CONFIGS = {
  * ```
  */
 export function Button(props) {
-    const { tx, text, txOptions, style: styleOverride, pressedStyle: pressedStyleOverride, textStyle: textStyleOverride, pressedTextStyle: pressedTextStyleOverride, disabledTextStyle: disabledTextStyleOverride, children, RightAccessory, LeftAccessory, disabled, disabledStyle: disabledStyleOverride, withShadow = false, preset = "default", size = "md", loading = false, fullWidth = false, ...rest } = props;
+    const { tx, text, txOptions, style: styleOverride, pressedStyle: pressedStyleOverride, textStyle: textStyleOverride, pressedTextStyle: pressedTextStyleOverride, disabledTextStyle: disabledTextStyleOverride, children, RightAccessory, LeftAccessory, disabled, disabledStyle: disabledStyleOverride, withShadow = false, preset = "default", size = "md", loading = false, fullWidth = false, onFocus, onBlur, onPressIn, onPressOut, ...rest } = props;
     const { theme, getContrastingColor, getShadowStyle } = useTheme();
     const styles = createStyles(theme, size);
     const shadowStyle = getShadowStyle("base");
@@ -79,10 +79,10 @@ export function Button(props) {
         backgroundColor = customBgColor;
     }
     else if (preset === "default") {
-        backgroundColor = theme.colors.accent;
+        backgroundColor = theme.colors.primary;
     }
     else if (preset === "secondary") {
-        backgroundColor = theme.colors.primary;
+        backgroundColor = theme.colors.secondary;
     }
     else if (preset === "destructive") {
         backgroundColor = theme.colors.destructive;
@@ -91,7 +91,7 @@ export function Button(props) {
         backgroundColor = "transparent";
     }
     else {
-        backgroundColor = theme.colors.accent;
+        backgroundColor = theme.colors.primary;
     }
     // Determine text color per preset for readable contrast
     const textColor = preset === "outline"
@@ -101,9 +101,9 @@ export function Button(props) {
             : preset === "link"
                 ? theme.colors.accent
                 : preset === "default"
-                    ? theme.colors.accentForeground
+                    ? theme.colors.primaryForeground
                     : preset === "secondary"
-                        ? theme.colors.primaryForeground
+                        ? theme.colors.secondaryForeground
                         : getContrastingColor(backgroundColor, palette.white, palette.black);
     const [focused, setFocused] = useState(false);
     const isDisabled = disabled || loading;
@@ -112,7 +112,23 @@ export function Button(props) {
         haptic: false,
         scaleTo: preset === "link" ? 1 : 0.97,
     });
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, ...pressHandlers, onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View, { style: [
+    const handleFocus = (event) => {
+        setFocused(true);
+        onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        setFocused(false);
+        onBlur?.(event);
+    };
+    const handlePressIn = (event) => {
+        pressHandlers.onPressIn();
+        onPressIn?.(event);
+    };
+    const handlePressOut = (event) => {
+        pressHandlers.onPressOut();
+        onPressOut?.(event);
+    };
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: handleFocus, onBlur: handleBlur, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View, { style: [
                         styles.button,
                         preset === "default" && styles.buttonDefault,
                         preset === "outline" && styles.buttonOutline,
@@ -162,10 +178,10 @@ const createStyles = (theme, size) => {
             ...(Platform.OS === "web" && { cursor: "pointer" }),
         },
         buttonDefault: {
-            backgroundColor: theme.colors.accent,
+            backgroundColor: theme.colors.primary,
         },
         buttonSecondary: {
-            backgroundColor: theme.colors.primary,
+            backgroundColor: theme.colors.secondary,
         },
         buttonDestructive: {
             backgroundColor: theme.colors.destructive,

package/dist/components/Card.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { View, Pressable, StyleSheet, Platform } from "react-native";
 import Animated from "react-native-reanimated";
-import { StyledText } from "./StyledText";
-import { useTheme } from "../hooks/useTheme";
-import { useScalePress } from "../hooks/useScalePress";
-import { spacing } from "../constants/spacing";
+import { StyledText } from "./StyledText.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { useScalePress } from "../hooks/useScalePress.js";
+import { spacing } from "../constants/spacing.js";
 /**
  * Card Component
  *

package/dist/components/Checkbox.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View, StyleSheet, Pressable } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
-import { Icon } from "./Icon";
-import { StyledText } from "./StyledText";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
-import { hapticLight } from "../lib/haptics";
+import { Icon } from "./Icon.js";
+import { StyledText } from "./StyledText.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+import { hapticLight } from "../lib/haptics.js";
 import * as CheckboxPrimitive from "@rn-primitives/checkbox";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {

package/dist/components/Collapsible.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Animated, Platform, StyleSheet, View } from "react-native";
-import { TextClassContext } from "./StyledText";
-import { spacing } from "../constants/spacing";
-import { useTheme } from "../hooks/useTheme";
+import { TextClassContext } from "./StyledText.js";
+import { spacing } from "../constants/spacing.js";
+import { useTheme } from "../hooks/useTheme.js";
 import * as CollapsiblePrimitive from "@rn-primitives/collapsible";
 function Collapsible({ children, ...props }) {
     return (_jsx(CollapsiblePrimitive.Root, { ...props, asChild: Platform.OS !== "web", children: _jsx(View, { children: children }) }));

package/dist/components/Dialog.js

@@ -4,12 +4,12 @@ import { Platform, StyleSheet, View } from "react-native";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import * as DialogPrimitive from "@rn-primitives/dialog";
 import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
-import { AnimatedView } from "./AnimatedView";
-import { TextClassContext, TextColorContext } from "./StyledText";
-import { StyledText } from "./StyledText";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
-import { palette } from "../constants/colors";
+import { AnimatedView } from "./AnimatedView.js";
+import { TextClassContext, TextColorContext } from "./StyledText.js";
+import { StyledText } from "./StyledText.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+import { palette } from "../constants/colors.js";
 const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
 // ============================================================================
 // Dialog

package/dist/components/Drawer.js

@@ -4,10 +4,10 @@ import { View, Pressable, Animated, StyleSheet, Platform, Dimensions, PanRespond
 import { Portal } from "@rn-primitives/portal";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { Pressable as SlotPressable } from "@rn-primitives/slot";
-import { useTheme } from "../hooks/useTheme";
-import { shouldUseNativeDriver } from "../lib/animations";
-import { spacing } from "../constants/spacing";
-import { TextColorContext, TextClassContext } from "./StyledText";
+import { useTheme } from "../hooks/useTheme.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
+import { spacing } from "../constants/spacing.js";
+import { TextColorContext, TextClassContext } from "./StyledText.js";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**
  * Drawer Component with Sub-components

package/dist/components/DropdownMenu.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Platform, StyleSheet, Text, View } from "react-native";
-import { Icon } from "./Icon";
-import { AnimatedView } from "./AnimatedView";
-import { TextClassContext } from "./StyledText";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
+import { Icon } from "./Icon.js";
+import { AnimatedView } from "./AnimatedView.js";
+import { TextClassContext } from "./StyledText.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { useSafeAreaInsets } from "react-native-safe-area-context";

package/dist/components/EmptyState.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View, StyleSheet } from "react-native";
-import { SansSerifBoldText, SansSerifText } from "./StyledText";
-import { Button } from "./Button";
-import { Icon } from "./Icon";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
+import { SansSerifBoldText, SansSerifText } from "./StyledText.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
 /**
  * EmptyState Component
  *

package/dist/components/ErrorBoundary.d.ts

@@ -20,6 +20,10 @@ interface ErrorBoundaryProps {
         errorInfo: ErrorInfo | null;
         resetError: () => void;
     }>;
+    /**
+     * Optional app-owned error reporter.
+     */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
 }
 interface ErrorBoundaryState {
     error: Error | null;

package/dist/components/ErrorBoundary.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from "react";
-import { captureException } from "../lib/sentry";
 /**
  * ErrorBoundary catches JavaScript errors anywhere in the child component tree,
  * logs those errors, and displays a fallback UI.
@@ -49,14 +48,7 @@ export class ErrorBoundary extends Component {
             console.error("ErrorBoundary caught an error:", error);
             console.error("Error info:", errorInfo);
         }
-        // Report to Sentry (no-op if DSN not configured)
-        captureException(error, {
-            contexts: {
-                react: {
-                    componentStack: errorInfo?.componentStack ?? undefined,
-                },
-            },
-        });
+        this.props.onError?.(error, errorInfo);
     }
     render() {
         const { children, FallbackComponent } = this.props;

package/dist/components/Icon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from "react-native";
-import { useTheme } from "../hooks/useTheme";
+import { useTheme } from "../hooks/useTheme.js";
 import Feather from "@expo/vector-icons/Feather";
 const THEME_COLOR_KEYS = [
     "primary", "primaryForeground", "secondary", "muted",

package/dist/components/InputOTP.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef, useState, useCallback } from "react";
 import { View, TextInput as RNTextInput, Pressable, StyleSheet, Platform, } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
-import { fontFamilies } from "../constants/fonts";
-import { StyledText } from "./StyledText";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+import { fontFamilies } from "../constants/fonts.js";
+import { StyledText } from "./StyledText.js";
 const CELL_WIDTH = 36;
 const CELL_HEIGHT = 40;
 const CELL_FONT_SIZE = 20;

package/dist/components/Label.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleSheet, Platform } from "react-native";
 import * as LabelPrimitive from "@rn-primitives/label";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
-import { fontFamilies } from "../constants/fonts";
-import { StyledText } from "./StyledText";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+import { fontFamilies } from "../constants/fonts.js";
+import { StyledText } from "./StyledText.js";
 const SIZE_CONFIGS = {
     sm: { fontSize: 12 },
     md: { fontSize: 14 },

package/dist/components/MaxWidthContainer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View, StyleSheet, Platform } from "react-native";
-import { useDimensions } from "../hooks/useDimensions";
+import { useDimensions } from "../hooks/useDimensions.js";
 const MAX_WIDTH_PRESETS = {
     sm: 640,
     md: 768,

package/dist/components/Notification.js

@@ -4,12 +4,12 @@ import { StyleSheet, View, ActivityIndicator, Pressable, Platform } from "react-
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS, useReducedMotion, Easing, } from "react-native-reanimated";
 import { useTranslation } from "react-i18next";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
-import { fontFamilies } from "../constants/fonts";
-import { Icon } from "./Icon";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
-import { StyledText } from "./StyledText";
-import { globalUIStore } from "../state/globalUIStore";
+import { fontFamilies } from "../constants/fonts.js";
+import { Icon } from "./Icon.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+import { StyledText } from "./StyledText.js";
+import { globalUIStore } from "../state/globalUIStore.js";
 /**
  * Notification
  *

package/dist/components/Popover.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AnimatedView } from "./AnimatedView";
-import { TextClassContext, TextColorContext } from "./StyledText";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
+import { AnimatedView } from "./AnimatedView.js";
+import { TextClassContext, TextColorContext } from "./StyledText.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
 import * as PopoverPrimitive from "@rn-primitives/popover";
 import * as React from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
-import { palette } from "../constants/colors";
+import { palette } from "../constants/colors.js";
 /**
  * Popover Trigger Component
  * The element that triggers the popover to open/close

package/dist/components/Progress.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 import Reanimated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
-import { useTheme } from "../hooks/useTheme";
-import { shouldUseNativeDriver } from "../lib/animations";
+import { useTheme } from "../hooks/useTheme.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
 // ============================================================================
 // Constants
 // ============================================================================

package/dist/components/RadioGroup.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect } from "react";
 import { View, StyleSheet, Pressable } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
-import { StyledText } from "./StyledText";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
-import { hapticLight } from "../lib/haptics";
+import { StyledText } from "./StyledText.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+import { hapticLight } from "../lib/haptics.js";
 import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {

package/dist/components/Select.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Platform, StyleSheet, View } from "react-native";
-import { Icon } from "./Icon";
-import { AnimatedView } from "./AnimatedView";
-import { TextClassContext, TextColorContext } from "./StyledText";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
-import { palette } from "../constants/colors";
+import { Icon } from "./Icon.js";
+import { AnimatedView } from "./AnimatedView.js";
+import { TextClassContext, TextColorContext } from "./StyledText.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
+import { palette } from "../constants/colors.js";
 import * as SelectPrimitive from "@rn-primitives/select";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { useSafeAreaInsets } from "react-native-safe-area-context";

package/dist/components/Separator.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from "react-native";
-import { useTheme } from "../hooks/useTheme";
-import { spacing } from "../constants/spacing";
+import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
 import * as SeparatorPrimitive from "@rn-primitives/separator";
 const SIZE_CONFIGS = {
     sm: 1,