@mrmeg/expo-ui 0.1.0

package/dist/components/Tooltip.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { AnimatedView } from "./AnimatedView";
+import { TextClassContext, TextColorContext } from "./StyledText";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import * as TooltipPrimitive from "@rn-primitives/tooltip";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { palette } from "../constants/colors";
+/**
+ * Tooltip Trigger Component
+ * The element that triggers the tooltip to appear on hover (web) or press (native)
+ */
+const TooltipTrigger = TooltipPrimitive.Trigger;
+/**
+ * FullWindowOverlay wrapper - uses native overlay on iOS for proper z-index handling
+ * On Android/Web, uses Fragment to avoid unnecessary nesting
+ */
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+/**
+ * Tooltip Content Component
+ * The content that appears in the tooltip overlay
+ * Supports smart positioning, animations, and theme integration
+ *
+ * Features:
+ * - Side positioning (top, bottom, left, right - left/right web only)
+ * - Alignment options (start, center, end)
+ * - Visual variants (default, dark, light)
+ * - Smooth animations
+ * - Portal-based rendering for proper z-index
+ */
+function TooltipContent({ side = "top", align = "center", sideOffset = 4, portalHost, variant = "default", ...props }) {
+    const { theme, getShadowStyle, getContrastingColor } = useTheme();
+    // Determine colors based on variant
+    const getVariantColors = () => {
+        switch (variant) {
+            case "dark":
+                return {
+                    background: palette.gray800,
+                    border: palette.gray800,
+                    text: palette.white,
+                };
+            case "light":
+                return {
+                    background: palette.white,
+                    border: palette.gray200,
+                    text: palette.gray800,
+                };
+            case "default":
+            default:
+                return {
+                    background: theme.colors.card,
+                    border: theme.colors.border,
+                    text: getContrastingColor(theme.colors.card, palette.white, palette.black),
+                };
+        }
+    };
+    const colors = getVariantColors();
+    const contentStyle = StyleSheet.flatten([
+        {
+            backgroundColor: colors.background,
+            borderColor: colors.border,
+            borderWidth: 1,
+            borderRadius: spacing.radiusMd,
+            paddingHorizontal: spacing.sm,
+            paddingVertical: spacing.xs,
+            maxWidth: 250,
+            ...getShadowStyle("soft"),
+        },
+    ]);
+    return (_jsx(TooltipPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(TooltipPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsx(AnimatedView, { type: "fade", enterDuration: 150, children: _jsx(TextColorContext.Provider, { value: colors.text, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TooltipPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, style: contentStyle, ...props }) }) }) }) }) }) }));
+}
+function TooltipBody({ children, style, ...props }) {
+    return (_jsx(View, { style: [
+            {
+                paddingHorizontal: spacing.xxs,
+                paddingVertical: spacing.xxs,
+            },
+            style,
+        ], ...props, children: children }));
+}
+/**
+ * Tooltip Root Component
+ * Manages tooltip state and provides context for trigger and content
+ *
+ * Usage:
+ * ```tsx
+ * // Basic tooltip
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button><Text>Hover me</Text></Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <StyledText>Tooltip text</StyledText>
+ *   </TooltipContent>
+ * </Tooltip>
+ *
+ * // With positioning
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Icon as={Info} size={20} />
+ *   </TooltipTrigger>
+ *   <TooltipContent side="bottom" align="start">
+ *     <StyledText>Information tooltip</StyledText>
+ *   </TooltipContent>
+ * </Tooltip>
+ *
+ * // Dark variant
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button><Text>Help</Text></Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent variant="dark">
+ *     <StyledText>Dark tooltip</StyledText>
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ */
+function Tooltip({ delayDuration = 700, skipDelayDuration = 300, ...props }) {
+    return (_jsx(TooltipPrimitive.Root, { delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, ...props }));
+}
+/**
+ * Tooltip Component with Sub-components
+ * Properly typed interface for dot notation access (e.g., Tooltip.Trigger)
+ */
+const TooltipComponent = Object.assign(Tooltip, {
+    Trigger: TooltipTrigger,
+    Content: TooltipContent,
+    Body: TooltipBody,
+});
+export { TooltipComponent as Tooltip, TooltipTrigger, TooltipContent, TooltipBody, };

package/dist/components/index.d.ts

@@ -0,0 +1,35 @@
+export * from "./Accordion";
+export * from "./Alert";
+export * from "./AnimatedView";
+export * from "./Badge";
+export * from "./BottomSheet";
+export * from "./Button";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./Collapsible";
+export * from "./Dialog";
+export * from "./DismissKeyboard";
+export * from "./Drawer";
+export * from "./DropdownMenu";
+export * from "./EmptyState";
+export * from "./ErrorBoundary";
+export * from "./Icon";
+export * from "./InputOTP";
+export * from "./Label";
+export * from "./MaxWidthContainer";
+export * from "./Notification";
+export * from "./Popover";
+export * from "./Progress";
+export * from "./RadioGroup";
+export * from "./Select";
+export * from "./Separator";
+export * from "./Skeleton";
+export * from "./Slider";
+export * from "./StatusBar";
+export * from "./StyledText";
+export * from "./Switch";
+export * from "./Tabs";
+export * from "./TextInput";
+export * from "./Toggle";
+export * from "./ToggleGroup";
+export * from "./Tooltip";

package/dist/components/index.js

@@ -0,0 +1,35 @@
+export * from "./Accordion";
+export * from "./Alert";
+export * from "./AnimatedView";
+export * from "./Badge";
+export * from "./BottomSheet";
+export * from "./Button";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./Collapsible";
+export * from "./Dialog";
+export * from "./DismissKeyboard";
+export * from "./Drawer";
+export * from "./DropdownMenu";
+export * from "./EmptyState";
+export * from "./ErrorBoundary";
+export * from "./Icon";
+export * from "./InputOTP";
+export * from "./Label";
+export * from "./MaxWidthContainer";
+export * from "./Notification";
+export * from "./Popover";
+export * from "./Progress";
+export * from "./RadioGroup";
+export * from "./Select";
+export * from "./Separator";
+export * from "./Skeleton";
+export * from "./Slider";
+export * from "./StatusBar";
+export * from "./StyledText";
+export * from "./Switch";
+export * from "./Tabs";
+export * from "./TextInput";
+export * from "./Toggle";
+export * from "./ToggleGroup";
+export * from "./Tooltip";

package/dist/constants/colors.d.ts

@@ -0,0 +1,82 @@
+import { navigationFonts } from "./fonts";
+/**
+ * Raw color palette - use semantic colors in components instead
+ *
+ * Zinc-inspired neutral scale for a minimal, professional feel.
+ * Status colors aligned with Tailwind's default palette.
+ */
+declare const palette: {
+    readonly teal400: "#2dd4bf";
+    readonly teal500: "#14b8a6";
+    readonly teal600: "#0d9488";
+    readonly white: "#FFFFFF";
+    readonly gray50: "#FAFAFA";
+    readonly gray100: "#F4F4F5";
+    readonly gray200: "#E4E4E7";
+    readonly gray300: "#D4D4D8";
+    readonly gray400: "#A1A1AA";
+    readonly gray500: "#71717A";
+    readonly gray600: "#52525B";
+    readonly gray700: "#3F3F46";
+    readonly gray800: "#27272A";
+    readonly gray900: "#18181B";
+    readonly gray950: "#09090B";
+    readonly black: "#000000";
+    readonly dark900: "#09090B";
+    readonly dark800: "#18181B";
+    readonly dark700: "#27272A";
+    readonly dark600: "#3F3F46";
+    readonly dark400: "#A1A1AA";
+    readonly dark300: "#D4D4D8";
+    readonly dark100: "#F4F4F5";
+    readonly green500: "#22C55E";
+    readonly green400: "#4ADE80";
+    readonly amber500: "#F59E0B";
+    readonly amber400: "#FBBF24";
+    readonly red500: "#EF4444";
+    readonly red400: "#F87171";
+};
+/**
+ * Semantic color interface - what colors mean in the UI
+ */
+export interface ThemeColors {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    text: string;
+    textDim: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    warning: string;
+    border: string;
+    overlay: string;
+}
+export interface Theme {
+    colors: ThemeColors;
+    dark: boolean;
+    fonts: typeof navigationFonts;
+    navigation: {
+        primary: string;
+        background: string;
+        card: string;
+        text: string;
+        border: string;
+        notification: string;
+    };
+}
+export interface Colors {
+    light: Theme;
+    dark: Theme;
+}
+export declare const colors: Colors;
+export { palette };

package/dist/constants/colors.js

@@ -0,0 +1,116 @@
+import { navigationFonts } from "./fonts";
+/**
+ * Raw color palette - use semantic colors in components instead
+ *
+ * Zinc-inspired neutral scale for a minimal, professional feel.
+ * Status colors aligned with Tailwind's default palette.
+ */
+const palette = {
+    // Brand (accent)
+    teal400: "#2dd4bf",
+    teal500: "#14b8a6",
+    teal600: "#0d9488",
+    // Neutrals — zinc scale
+    white: "#FFFFFF",
+    gray50: "#FAFAFA",
+    gray100: "#F4F4F5",
+    gray200: "#E4E4E7",
+    gray300: "#D4D4D8",
+    gray400: "#A1A1AA",
+    gray500: "#71717A",
+    gray600: "#52525B",
+    gray700: "#3F3F46",
+    gray800: "#27272A",
+    gray900: "#18181B",
+    gray950: "#09090B",
+    black: "#000000",
+    // Dark mode surfaces — zinc-based
+    dark900: "#09090B",
+    dark800: "#18181B",
+    dark700: "#27272A",
+    dark600: "#3F3F46",
+    dark400: "#A1A1AA",
+    dark300: "#D4D4D8",
+    dark100: "#F4F4F5",
+    // Status
+    green500: "#22C55E",
+    green400: "#4ADE80",
+    amber500: "#F59E0B",
+    amber400: "#FBBF24",
+    red500: "#EF4444",
+    red400: "#F87171",
+};
+const lightTheme = {
+    dark: false,
+    fonts: navigationFonts,
+    colors: {
+        background: palette.white,
+        foreground: palette.gray950,
+        card: palette.gray50,
+        cardForeground: palette.gray950,
+        text: palette.gray950,
+        textDim: palette.gray500,
+        primary: palette.gray900,
+        primaryForeground: palette.gray50,
+        secondary: palette.teal500,
+        secondaryForeground: palette.white,
+        muted: palette.gray100,
+        mutedForeground: palette.gray500,
+        accent: palette.teal500,
+        accentForeground: palette.white,
+        destructive: palette.red500,
+        destructiveForeground: palette.white,
+        success: palette.green500,
+        warning: palette.amber500,
+        border: palette.gray200,
+        overlay: "rgba(0, 0, 0, 0.5)",
+    },
+    navigation: {
+        primary: palette.gray900,
+        background: palette.white,
+        card: palette.gray50,
+        text: palette.gray950,
+        border: palette.gray200,
+        notification: palette.teal500,
+    },
+};
+const darkTheme = {
+    dark: true,
+    fonts: navigationFonts,
+    colors: {
+        background: palette.dark900,
+        foreground: palette.dark100,
+        card: palette.dark800,
+        cardForeground: palette.dark100,
+        text: palette.dark100,
+        textDim: palette.dark400,
+        primary: palette.gray50,
+        primaryForeground: palette.gray900,
+        secondary: palette.teal400,
+        secondaryForeground: palette.black,
+        muted: palette.dark700,
+        mutedForeground: palette.dark400,
+        accent: palette.teal400,
+        accentForeground: palette.gray900,
+        destructive: palette.red400,
+        destructiveForeground: palette.white,
+        success: palette.green400,
+        warning: palette.amber400,
+        border: palette.dark700,
+        overlay: "rgba(0, 0, 0, 0.7)",
+    },
+    navigation: {
+        primary: palette.gray50,
+        background: palette.dark900,
+        card: palette.dark800,
+        text: palette.dark100,
+        border: palette.dark700,
+        notification: palette.teal400,
+    },
+};
+export const colors = {
+    light: lightTheme,
+    dark: darkTheme,
+};
+// Export palette for rare one-off cases
+export { palette };

package/dist/constants/fonts.d.ts

@@ -0,0 +1,32 @@
+type NavigationFontWeight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+interface FontStyle {
+    fontFamily: string;
+    fontWeight: NavigationFontWeight;
+}
+interface NavigationFonts {
+    regular: FontStyle;
+    medium: FontStyle;
+    bold: FontStyle;
+    heavy: FontStyle;
+}
+export declare const fontFamilies: {
+    serif: {
+        regular: string;
+        bold: string;
+    };
+    sansSerif: {
+        regular: string;
+        bold: string;
+    };
+};
+/**
+ * Typography scale — Tailwind-matching sizes for consistent text hierarchy.
+ * Components can progressively adopt these tokens.
+ */
+export type TypographySize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+export declare const typography: Record<TypographySize, {
+    fontSize: number;
+    lineHeight: number;
+}>;
+export declare const navigationFonts: NavigationFonts;
+export {};

package/dist/constants/fonts.js

@@ -0,0 +1,91 @@
+import { Platform } from "react-native";
+// Web font stack fallback
+const WEB_FONT_STACK = "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+export const fontFamilies = {
+    serif: Platform.select({
+        ios: { regular: "Georgia", bold: "Georgia" },
+        web: { regular: "Georgia, 'Times New Roman', serif", bold: "Georgia, 'Times New Roman', serif" },
+        default: { regular: "serif", bold: "serif" },
+    }),
+    sansSerif: Platform.select({
+        web: {
+            regular: `"Lato", ${WEB_FONT_STACK}`,
+            bold: `"Lato", ${WEB_FONT_STACK}`,
+        },
+        ios: {
+            regular: "System",
+            bold: "System",
+        },
+        default: {
+            regular: "sans-serif",
+            bold: "sans-serif",
+        },
+    }),
+};
+export const typography = {
+    xs: { fontSize: 12, lineHeight: 16 },
+    sm: { fontSize: 14, lineHeight: 20 },
+    base: { fontSize: 16, lineHeight: 24 },
+    lg: { fontSize: 18, lineHeight: 28 },
+    xl: { fontSize: 20, lineHeight: 28 },
+    "2xl": { fontSize: 24, lineHeight: 32 },
+    "3xl": { fontSize: 30, lineHeight: 36 },
+    "4xl": { fontSize: 36, lineHeight: 40 },
+};
+// Navigation theme fonts configuration
+export const navigationFonts = Platform.select({
+    web: {
+        regular: {
+            fontFamily: fontFamilies.sansSerif.regular || WEB_FONT_STACK,
+            fontWeight: "400",
+        },
+        medium: {
+            fontFamily: fontFamilies.sansSerif.regular || WEB_FONT_STACK,
+            fontWeight: "500",
+        },
+        bold: {
+            fontFamily: fontFamilies.sansSerif.bold || WEB_FONT_STACK,
+            fontWeight: "600",
+        },
+        heavy: {
+            fontFamily: fontFamilies.sansSerif.bold || WEB_FONT_STACK,
+            fontWeight: "700",
+        },
+    },
+    ios: {
+        regular: {
+            fontFamily: fontFamilies.sansSerif.regular || "System",
+            fontWeight: "400",
+        },
+        medium: {
+            fontFamily: fontFamilies.sansSerif.regular || "System",
+            fontWeight: "500",
+        },
+        bold: {
+            fontFamily: fontFamilies.sansSerif.bold || "System",
+            fontWeight: "600",
+        },
+        heavy: {
+            fontFamily: fontFamilies.sansSerif.bold || "System",
+            fontWeight: "700",
+        },
+    },
+    default: {
+        regular: {
+            fontFamily: fontFamilies.sansSerif.regular || "sans-serif",
+            fontWeight: "normal",
+        },
+        medium: {
+            fontFamily: fontFamilies.sansSerif.regular || "sans-serif-medium",
+            fontWeight: "normal",
+        },
+        bold: {
+            fontFamily: fontFamilies.sansSerif.bold || "sans-serif",
+            fontWeight: "600",
+        },
+        heavy: {
+            fontFamily: fontFamilies.sansSerif.bold || "sans-serif",
+            fontWeight: "700",
+        },
+    },
+});

package/dist/constants/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./colors";
+export * from "./fonts";
+export * from "./spacing";

package/dist/constants/index.js

@@ -0,0 +1,3 @@
+export * from "./colors";
+export * from "./fonts";
+export * from "./spacing";

package/dist/constants/spacing.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Spacing Constants
+ *
+ * A consistent spacing scale based on an 8px base unit.
+ * Use these constants throughout the app for consistent spacing.
+ */
+export declare const spacing: {
+    readonly base: 8;
+    readonly xxs: 2;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 16;
+    readonly lg: 24;
+    readonly xl: 32;
+    readonly xxl: 48;
+    readonly xxxl: 64;
+    readonly gutter: 16;
+    readonly gutterVertical: 24;
+    readonly screenPadding: 16;
+    readonly buttonPadding: 10;
+    readonly inputPadding: 10;
+    readonly cardPadding: 16;
+    readonly sectionSpacing: 32;
+    readonly listItemSpacing: 8;
+    readonly radiusNone: 0;
+    readonly radiusXs: 2;
+    readonly radiusSm: 4;
+    readonly radiusMd: 6;
+    readonly radiusLg: 8;
+    readonly radiusXl: 12;
+    readonly radius2xl: 16;
+    readonly radiusFull: 9999;
+    readonly iconXs: 12;
+    readonly iconSm: 16;
+    readonly iconMd: 24;
+    readonly iconLg: 32;
+    readonly iconXl: 48;
+};
+export declare const base: 8, xxs: 2, xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, buttonPadding: 10, inputPadding: 10, cardPadding: 16, sectionSpacing: 32, listItemSpacing: 8, radiusNone: 0, radiusXs: 2, radiusSm: 4, radiusMd: 6, radiusLg: 8, radiusXl: 12, radius2xl: 16, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
+export declare const space: (multiplier: number) => number;

package/dist/constants/spacing.js

@@ -0,0 +1,48 @@
+/**
+ * Spacing Constants
+ *
+ * A consistent spacing scale based on an 8px base unit.
+ * Use these constants throughout the app for consistent spacing.
+ */
+export const spacing = {
+    // Base unit: 8px
+    base: 8,
+    // Spacing scale
+    xxs: 2, // 2px  - Minimal spacing
+    xs: 4, // 4px  - Extra small
+    sm: 8, // 8px  - Small (1 unit)
+    md: 16, // 16px - Medium (2 units)
+    lg: 24, // 24px - Large (3 units)
+    xl: 32, // 32px - Extra large (4 units)
+    xxl: 48, // 48px - 2x extra large (6 units)
+    xxxl: 64, // 64px - 3x extra large (8 units)
+    // Common layout spacing
+    gutter: 16, // Standard horizontal gutter
+    gutterVertical: 24, // Standard vertical spacing
+    screenPadding: 16, // Default screen edge padding
+    // Component-specific
+    buttonPadding: 10, // Default button padding
+    inputPadding: 10, // Default input padding
+    cardPadding: 16, // Default card padding
+    sectionSpacing: 32, // Space between major sections
+    listItemSpacing: 8, // Space between list items
+    // Border radius — shadcn-inspired scale (radiusMd = 6px default)
+    radiusNone: 0,
+    radiusXs: 2,
+    radiusSm: 4,
+    radiusMd: 6,
+    radiusLg: 8,
+    radiusXl: 12,
+    radius2xl: 16,
+    radiusFull: 9999, // For circular elements
+    // Icon sizes
+    iconXs: 12,
+    iconSm: 16,
+    iconMd: 24,
+    iconLg: 32,
+    iconXl: 48,
+};
+// Export individual constants for convenience
+export const { base, xxs, xs, sm, md, lg, xl, xxl, xxxl, gutter, gutterVertical, screenPadding, buttonPadding, inputPadding, cardPadding, sectionSpacing, listItemSpacing, radiusNone, radiusXs, radiusSm, radiusMd, radiusLg, radiusXl, radius2xl, radiusFull, iconXs, iconSm, iconMd, iconLg, iconXl, } = spacing;
+// Helper function to multiply base spacing
+export const space = (multiplier) => spacing.base * multiplier;

package/dist/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./useDimensions";
+export * from "./useReduceMotion";
+export * from "./useResources";
+export * from "./useScalePress";
+export * from "./useStaggeredEntrance";
+export * from "./useTheme";

package/dist/hooks/index.js

@@ -0,0 +1,6 @@
+export * from "./useDimensions";
+export * from "./useReduceMotion";
+export * from "./useResources";
+export * from "./useScalePress";
+export * from "./useStaggeredEntrance";
+export * from "./useTheme";

package/dist/hooks/useDimensions.d.ts

@@ -0,0 +1,19 @@
+export declare const SCREEN_SIZES: {
+    readonly SMALL: 768;
+    readonly MEDIUM: 1000;
+    readonly LARGE: 1200;
+};
+type WindowDimensions = {
+    width: number;
+    height: number;
+    orientation: "landscape" | "portrait";
+    isSmallScreen: boolean;
+    isMediumScreen: boolean;
+    isLargeScreen: boolean;
+};
+/**
+* Provides a consistent way to access window dimensions and screen size information across mobile and web.
+*
+*/
+export declare const useDimensions: () => WindowDimensions;
+export {};