@mrmeg/expo-ui 0.1.0

package/dist/components/Slider.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { palette } from "../constants/colors";
+import { useTheme } from "../hooks/useTheme";
+import { hapticLight } from "../lib/haptics";
+import { useCallback, useRef } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from "react-native-reanimated";
+import { StyledText } from "./StyledText";
+const SIZES = {
+    sm: { track: 4, thumb: 16 },
+    md: { track: 6, thumb: 20 },
+};
+function clampAndSnap(raw, min, max, step) {
+    "worklet";
+    const clamped = Math.min(Math.max(raw, min), max);
+    const stepped = Math.round((clamped - min) / step) * step + min;
+    // Avoid floating-point drift
+    return Math.round(stepped * 1e6) / 1e6;
+}
+function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, size = "md", disabled = false, showValue = false, style: styleOverride, }) {
+    const { theme } = useTheme();
+    const dims = SIZES[size];
+    // Track layout width captured via onLayout
+    const trackWidth = useSharedValue(0);
+    // Thumb position in pixels along the track
+    const thumbX = useSharedValue(0);
+    // Last snapped value (worklet-side) to detect step changes for haptics
+    const lastSnappedValue = useSharedValue(value);
+    // Keep a ref to onValueChange so the worklet always calls the latest version
+    const onValueChangeRef = useRef(onValueChange);
+    onValueChangeRef.current = onValueChange;
+    const jsOnValueChange = useCallback((v) => {
+        onValueChangeRef.current?.(v);
+    }, []);
+    const jsHaptic = useCallback(() => {
+        hapticLight();
+    }, []);
+    // Sync external value prop changes with animation
+    const prevExternalValue = useRef(value);
+    if (value !== prevExternalValue.current) {
+        prevExternalValue.current = value;
+        if (trackWidth.value > 0) {
+            const ratio = (value - min) / (max - min || 1);
+            thumbX.value = withTiming(ratio * trackWidth.value, { duration: 80 });
+        }
+        lastSnappedValue.value = value;
+    }
+    const onTrackLayout = useCallback((e) => {
+        const w = e.nativeEvent.layout.width;
+        trackWidth.value = w;
+        // Set initial thumb position without animation
+        const ratio = (value - min) / (max - min || 1);
+        thumbX.value = ratio * w;
+    }, [value, min, max]);
+    const panGesture = Gesture.Pan()
+        .enabled(!disabled)
+        .onBegin((e) => {
+        "worklet";
+        // Jump to touch position
+        const x = Math.min(Math.max(e.x, 0), trackWidth.value);
+        thumbX.value = x;
+        const ratio = trackWidth.value > 0 ? x / trackWidth.value : 0;
+        const raw = min + ratio * (max - min);
+        const snapped = clampAndSnap(raw, min, max, step);
+        if (snapped !== lastSnappedValue.value) {
+            lastSnappedValue.value = snapped;
+            runOnJS(jsHaptic)();
+        }
+        runOnJS(jsOnValueChange)(snapped);
+    })
+        .onUpdate((e) => {
+        "worklet";
+        const x = Math.min(Math.max(e.x, 0), trackWidth.value);
+        thumbX.value = x;
+        const ratio = trackWidth.value > 0 ? x / trackWidth.value : 0;
+        const raw = min + ratio * (max - min);
+        const snapped = clampAndSnap(raw, min, max, step);
+        if (snapped !== lastSnappedValue.value) {
+            lastSnappedValue.value = snapped;
+            runOnJS(jsHaptic)();
+        }
+        runOnJS(jsOnValueChange)(snapped);
+    });
+    const fillStyle = useAnimatedStyle(() => ({
+        width: thumbX.value,
+    }));
+    const thumbAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: thumbX.value - dims.thumb / 2 }],
+    }));
+    const valueLabelStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: thumbX.value - 14 }],
+    }));
+    const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
+    // Accessibility action handler
+    const handleAccessibilityAction = useCallback((event) => {
+        const action = event.nativeEvent.actionName;
+        let next = value;
+        if (action === "increment") {
+            next = Math.min(value + step, max);
+        }
+        else if (action === "decrement") {
+            next = Math.max(value - step, min);
+        }
+        if (next !== value) {
+            onValueChange?.(next);
+        }
+    }, [value, step, min, max, onValueChange]);
+    return (_jsxs(View, { style: [{ opacity: disabled ? 0.5 : 1 }, flattenedStyle], accessibilityRole: "adjustable", accessibilityValue: { min, max, now: value }, accessibilityActions: [
+            { name: "increment", label: "Increment" },
+            { name: "decrement", label: "Decrement" },
+        ], onAccessibilityAction: handleAccessibilityAction, children: [showValue && (_jsx(Animated.View, { style: [
+                    {
+                        position: "absolute",
+                        top: -20,
+                        width: 28,
+                        alignItems: "center",
+                    },
+                    valueLabelStyle,
+                ], pointerEvents: "none", children: _jsx(StyledText, { style: {
+                        fontSize: 11,
+                        color: theme.colors.textDim,
+                        userSelect: "none",
+                    }, children: value }) })), _jsx(GestureDetector, { gesture: panGesture, children: _jsxs(View, { style: {
+                        height: dims.thumb,
+                        justifyContent: "center",
+                        ...(Platform.OS === "web" && { cursor: disabled ? "default" : "pointer" }),
+                    }, onLayout: onTrackLayout, children: [_jsx(View, { style: {
+                                height: dims.track,
+                                borderRadius: dims.track / 2,
+                                backgroundColor: theme.colors.muted,
+                                overflow: "hidden",
+                            }, children: _jsx(Animated.View, { style: [
+                                    {
+                                        height: dims.track,
+                                        borderRadius: dims.track / 2,
+                                        backgroundColor: theme.colors.primary,
+                                    },
+                                    fillStyle,
+                                ] }) }), _jsx(Animated.View, { style: [
+                                {
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    width: dims.thumb,
+                                    height: dims.thumb,
+                                    borderRadius: dims.thumb / 2,
+                                    backgroundColor: palette.white,
+                                    borderWidth: 1,
+                                    borderColor: theme.colors.border,
+                                    ...(Platform.OS !== "web" && {
+                                        shadowColor: "#000",
+                                        shadowOffset: { width: 0, height: 1 },
+                                        shadowOpacity: 0.15,
+                                        shadowRadius: 2,
+                                        elevation: 2,
+                                    }),
+                                },
+                                thumbAnimatedStyle,
+                            ] })] }) })] }));
+}
+export { Slider };

package/dist/components/StatusBar.d.ts

@@ -0,0 +1 @@
+export declare const StatusBar: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/StatusBar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useTheme } from "../hooks/useTheme";
+import { StatusBar as RNStatusBar, Platform } from "react-native";
+export const StatusBar = () => {
+    const { scheme, theme } = useTheme();
+    const barStyle = scheme === "dark" ? "light-content" : "dark-content";
+    /**
+     * Switching from system theme to light/dark would not properly update the status bar, so it is done imperatively
+     */
+    useEffect(() => {
+        RNStatusBar.setBarStyle(barStyle, true);
+        if (Platform.OS === "android") {
+            RNStatusBar.setBackgroundColor("transparent", true);
+            RNStatusBar.setTranslucent(true);
+        }
+    }, [barStyle]);
+    return (_jsx(RNStatusBar, { barStyle: barStyle, backgroundColor: Platform.OS === "android" ? "transparent" : undefined, translucent: true }));
+};

package/dist/components/StyledText.d.ts

@@ -0,0 +1,161 @@
+import React from "react";
+import { Text as RNText, TextProps as RNTextProps } from "react-native";
+/**
+ * TextClassContext provides className context for nested text components
+ * Used by @rn-primitives to apply consistent styling through the component tree
+ */
+export declare const TextClassContext: React.Context<string | undefined>;
+/**
+ * TextColorContext provides color context for nested text components
+ * Allows parent components (like Button) to override text color for all children
+ */
+export declare const TextColorContext: React.Context<string | undefined>;
+/**
+ * Font size variants following the DM Sans / DM Serif Display scale
+ */
+export type FontSize = "xs" | "sm" | "base" | "body" | "lg" | "xl" | "xxl" | "display";
+/**
+ * Semantic text variants for different use cases
+ */
+export type SemanticVariant = "title" | "heading" | "subheading" | "body" | "caption" | "label";
+/**
+ * Font weight options
+ */
+export type FontWeight = "light" | "regular" | "medium" | "semibold" | "bold";
+/**
+ * Text alignment options
+ */
+export type TextAlign = "left" | "center" | "right" | "justify" | "auto";
+export type TextProps = RNTextProps & {
+    /**
+     * Font variant - serif (DM Serif Display) or sans-serif (DM Sans)
+     */
+    variant?: "serif" | "sansSerif";
+    /**
+     * Font weight - light, regular, medium, semibold, bold
+     */
+    fontWeight?: FontWeight;
+    /**
+     * Font size variant
+     */
+    size?: FontSize;
+    /**
+     * Semantic variant - automatically sets size and weight
+     * Overrides individual size/fontWeight if provided
+     */
+    semantic?: SemanticVariant;
+    /**
+     * Text alignment
+     */
+    align?: TextAlign;
+    /**
+     * Text which is looked up via i18n.
+     */
+    tx?: string;
+    /**
+     * The text to display if not using `tx` or nested components.
+     */
+    text?: string;
+    /**
+     * Optional options to pass to i18n. Useful for interpolation
+     * as well as explicitly setting locale or translation fallbacks.
+     */
+    txOptions?: object;
+};
+/**
+ * Base Text component with theme and variant support
+ * Uses theme colors automatically - text by default
+ *
+ * Features:
+ * - Size variants (xs, sm, base, body, lg, xl, xxl, display)
+ * - Semantic variants (title, heading, subheading, body, caption, label)
+ * - Text alignment prop
+ * - Font weight options (light, regular, medium, semibold, bold)
+ * - Text selection enabled by default (userSelect: "auto")
+ * - numberOfLines and ellipsizeMode support from RN TextProps
+ */
+export declare const StyledText: React.ForwardRefExoticComponent<RNTextProps & {
+    /**
+     * Font variant - serif (DM Serif Display) or sans-serif (DM Sans)
+     */
+    variant?: "serif" | "sansSerif";
+    /**
+     * Font weight - light, regular, medium, semibold, bold
+     */
+    fontWeight?: FontWeight;
+    /**
+     * Font size variant
+     */
+    size?: FontSize;
+    /**
+     * Semantic variant - automatically sets size and weight
+     * Overrides individual size/fontWeight if provided
+     */
+    semantic?: SemanticVariant;
+    /**
+     * Text alignment
+     */
+    align?: TextAlign;
+    /**
+     * Text which is looked up via i18n.
+     */
+    tx?: string;
+    /**
+     * The text to display if not using `tx` or nested components.
+     */
+    text?: string;
+    /**
+     * Optional options to pass to i18n. Useful for interpolation
+     * as well as explicitly setting locale or translation fallbacks.
+     */
+    txOptions?: object;
+} & React.RefAttributes<RNText>>;
+/**
+ * Serif Text Component
+ * Uses serif font family (DM Serif Display)
+ */
+export declare function SerifText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Sans-Serif Text Component
+ * Uses sans-serif font family (DM Sans)
+ */
+export declare function SansSerifText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Serif Bold Text Component
+ * Uses serif font family — DM Serif Display only has regular weight
+ */
+export declare function SerifBoldText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Sans-Serif Bold Text Component
+ * Uses sans-serif font family with semibold weight (DM Sans 600)
+ */
+export declare function SansSerifBoldText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Display Text Component
+ * Uses DM Serif Display at display size — for hero text and splash screens
+ */
+export declare function DisplayText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Title Text - Large semibold text for page titles
+ */
+export declare function TitleText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Heading Text - Section heading text
+ */
+export declare function HeadingText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Subheading Text - Subsection heading text
+ */
+export declare function SubheadingText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Body Text - Default text for paragraphs and content
+ */
+export declare function BodyText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Caption Text - Small text for captions and secondary content
+ */
+export declare function CaptionText(props: TextProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Label Text - Medium weight text for form labels
+ */
+export declare function LabelText(props: TextProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/StyledText.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import { Text as RNText, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "../hooks/useTheme";
+import { fontFamilies } from "../constants/fonts";
+/**
+ * TextClassContext provides className context for nested text components
+ * Used by @rn-primitives to apply consistent styling through the component tree
+ */
+export const TextClassContext = React.createContext(undefined);
+/**
+ * TextColorContext provides color context for nested text components
+ * Allows parent components (like Button) to override text color for all children
+ */
+export const TextColorContext = React.createContext(undefined);
+const FONT_SIZES = {
+    xs: 11,
+    sm: 12,
+    base: 14,
+    body: 15,
+    lg: 18,
+    xl: 22,
+    xxl: 28,
+    display: 34,
+};
+const LINE_HEIGHTS = {
+    xs: 16.5,
+    sm: 18,
+    base: 21,
+    body: 24.75,
+    lg: 27,
+    xl: 26.4,
+    xxl: 33.6,
+    display: 40.8,
+};
+const LETTER_SPACING = {
+    sm: 0.5,
+    xxl: -0.3,
+    display: -0.5,
+};
+const SEMANTIC_CONFIGS = {
+    title: { size: "xxl", weight: "semibold" },
+    heading: { size: "xl", weight: "semibold" },
+    subheading: { size: "lg", weight: "medium" },
+    body: { size: "body", weight: "regular" },
+    caption: { size: "sm", weight: "regular" },
+    label: { size: "base", weight: "medium" },
+};
+// Map font weights to actual font family weight keys
+// DM Sans has: light, regular, medium, semibold
+// DM Serif Display has: regular only
+const getFontFamilyWeight = (weight) => {
+    if (!weight || weight === "regular")
+        return "regular";
+    if (weight === "light")
+        return "light";
+    if (weight === "medium")
+        return "medium";
+    // semibold and bold both map to semibold (DM Sans's heaviest weight)
+    return "semibold";
+};
+/**
+ * Base Text component with theme and variant support
+ * Uses theme colors automatically - text by default
+ *
+ * Features:
+ * - Size variants (xs, sm, base, body, lg, xl, xxl, display)
+ * - Semantic variants (title, heading, subheading, body, caption, label)
+ * - Text alignment prop
+ * - Font weight options (light, regular, medium, semibold, bold)
+ * - Text selection enabled by default (userSelect: "auto")
+ * - numberOfLines and ellipsizeMode support from RN TextProps
+ */
+export const StyledText = forwardRef((props, ref) => {
+    const { tx, text, txOptions, style, variant = "sansSerif", fontWeight, size, semantic, align, children, ...otherProps } = props;
+    const { theme } = useTheme();
+    const { t } = useTranslation();
+    // Check if there's a color override from parent context (e.g., Button)
+    const contextColor = React.useContext(TextColorContext);
+    // Use context color if provided, otherwise use theme default
+    const color = contextColor ?? theme.colors.text;
+    // If semantic variant is provided, use its config
+    const semanticConfig = semantic ? SEMANTIC_CONFIGS[semantic] : undefined;
+    const finalSize = semanticConfig?.size ?? size ?? "body";
+    const finalFontWeight = semanticConfig?.weight ?? fontWeight ?? "regular";
+    // Get font family based on variant and weight
+    const fontFamilyWeight = getFontFamilyWeight(finalFontWeight);
+    // DM Serif Display only has regular — use it regardless of requested weight
+    const fontFamily = variant === "serif"
+        ? fontFamilies.serif.regular
+        : fontFamilies.sansSerif[fontFamilyWeight] ?? fontFamilies.sansSerif.regular;
+    // Get fontSize and lineHeight from size variant
+    const fontSize = FONT_SIZES[finalSize];
+    const lineHeight = LINE_HEIGHTS[finalSize];
+    const letterSpacing = LETTER_SPACING[finalSize];
+    // If style overrides fontSize without lineHeight, drop the preset lineHeight
+    // so RN uses its default (avoids clipping text with a mismatched lineHeight)
+    const flatStyle = style ? StyleSheet.flatten(style) : undefined;
+    const styleHasFontSize = flatStyle && "fontSize" in flatStyle;
+    const styleHasLineHeight = flatStyle && "lineHeight" in flatStyle;
+    const resolvedLineHeight = styleHasFontSize && !styleHasLineHeight ? undefined : lineHeight;
+    const i18nText = tx ? String(t(tx, txOptions)) : text;
+    const content = i18nText || children;
+    return (_jsx(RNText, { ref: ref, style: [
+            {
+                color,
+                fontFamily,
+                fontSize,
+                ...(resolvedLineHeight !== undefined && { lineHeight: resolvedLineHeight }),
+                userSelect: "auto", // Changed from "none" to allow text selection
+                ...(letterSpacing !== undefined && { letterSpacing }),
+                ...(align && { textAlign: align }),
+            },
+            style,
+            // When a parent (Button, ToggleGroupItem) sets TextColorContext,
+            // that color must win over any color in the style prop
+            contextColor != null && { color: contextColor },
+        ], ...otherProps, children: content }));
+});
+StyledText.displayName = "StyledText";
+/**
+ * Serif Text Component
+ * Uses serif font family (DM Serif Display)
+ */
+export function SerifText(props) {
+    return _jsx(StyledText, { ...props, variant: "serif" });
+}
+/**
+ * Sans-Serif Text Component
+ * Uses sans-serif font family (DM Sans)
+ */
+export function SansSerifText(props) {
+    return _jsx(StyledText, { ...props, variant: "sansSerif" });
+}
+/**
+ * Serif Bold Text Component
+ * Uses serif font family — DM Serif Display only has regular weight
+ */
+export function SerifBoldText(props) {
+    return _jsx(StyledText, { ...props, variant: "serif", fontWeight: "regular" });
+}
+/**
+ * Sans-Serif Bold Text Component
+ * Uses sans-serif font family with semibold weight (DM Sans 600)
+ */
+export function SansSerifBoldText(props) {
+    return _jsx(StyledText, { ...props, variant: "sansSerif", fontWeight: "semibold" });
+}
+/**
+ * Display Text Component
+ * Uses DM Serif Display at display size — for hero text and splash screens
+ */
+export function DisplayText(props) {
+    return _jsx(StyledText, { ...props, variant: "serif", size: "display" });
+}
+// Export convenience components for semantic variants
+/**
+ * Title Text - Large semibold text for page titles
+ */
+export function TitleText(props) {
+    return _jsx(StyledText, { ...props, semantic: "title" });
+}
+/**
+ * Heading Text - Section heading text
+ */
+export function HeadingText(props) {
+    return _jsx(StyledText, { ...props, semantic: "heading" });
+}
+/**
+ * Subheading Text - Subsection heading text
+ */
+export function SubheadingText(props) {
+    return _jsx(StyledText, { ...props, semantic: "subheading" });
+}
+/**
+ * Body Text - Default text for paragraphs and content
+ */
+export function BodyText(props) {
+    return _jsx(StyledText, { ...props, semantic: "body" });
+}
+/**
+ * Caption Text - Small text for captions and secondary content
+ */
+export function CaptionText(props) {
+    return _jsx(StyledText, { ...props, semantic: "caption" });
+}
+/**
+ * Label Text - Medium weight text for form labels
+ */
+export function LabelText(props) {
+    return _jsx(StyledText, { ...props, semantic: "label" });
+}

package/dist/components/Switch.d.ts

@@ -0,0 +1,44 @@
+import * as SwitchPrimitives from "@rn-primitives/switch";
+import { StyleProp, ViewStyle } from "react-native";
+/**
+ * Switch variant styles
+ */
+export type SwitchVariant = "default" | "ios";
+interface SwitchProps extends Omit<SwitchPrimitives.RootProps, "style"> {
+    /**
+     * Visual variant
+     * @default "default"
+     */
+    variant?: SwitchVariant;
+    /**
+     * Optional label to display when switch is ON (checked)
+     */
+    labelOn?: string;
+    /**
+     * Optional label to display when switch is OFF (unchecked)
+     */
+    labelOff?: string;
+    /**
+     * Custom size for the switch container
+     * Default: { width: 44, height: 24 }
+     */
+    size?: {
+        width: number;
+        height: number;
+    };
+    /**
+     * Custom size for the thumb (sliding circle)
+     * Default: 20
+     */
+    thumbSize?: number;
+    /**
+     * Whether to show a loading spinner inside the thumb
+     */
+    loading?: boolean;
+    /**
+     * Custom style override (uses StyleSheet.flatten for web compatibility)
+     */
+    style?: StyleProp<ViewStyle>;
+}
+declare function Switch({ variant, labelOn, labelOff, size, thumbSize, loading, style: styleOverride, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export { Switch };