@mrmeg/expo-ui 0.1.0

package/dist/components/Select.js

@@ -0,0 +1,172 @@
+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 * as SelectPrimitive from "@rn-primitives/select";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+// Platform-specific overlay
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+/**
+ * SelectRoot Component
+ * Manages select state and provides context for trigger and content
+ */
+const SelectRoot = SelectPrimitive.Root;
+const SIZE_CONFIGS = {
+    sm: {
+        height: 32,
+        fontSize: 12,
+        paddingHorizontal: spacing.sm,
+    },
+    md: {
+        height: 36,
+        fontSize: 14,
+        paddingHorizontal: spacing.inputPadding,
+    },
+    lg: {
+        height: 40,
+        fontSize: 14,
+        paddingHorizontal: spacing.md,
+    },
+};
+function SelectTrigger({ size = "md", error = false, children, style: styleOverride, disabled, ...props }) {
+    const { theme } = useTheme();
+    const sizeConfig = SIZE_CONFIGS[size];
+    return (_jsxs(SelectPrimitive.Trigger, { disabled: disabled, ...props, style: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            height: sizeConfig.height,
+            paddingHorizontal: sizeConfig.paddingHorizontal,
+            borderWidth: 1,
+            borderColor: error ? theme.colors.destructive : theme.colors.border,
+            borderRadius: spacing.radiusMd,
+            backgroundColor: theme.colors.background,
+            ...(Platform.OS === "web" && {
+                cursor: disabled ? "not-allowed" : "pointer",
+                outlineStyle: "none",
+            }),
+            ...(disabled && { opacity: 0.5 }),
+            ...(styleOverride && typeof styleOverride !== "function"
+                ? StyleSheet.flatten(styleOverride)
+                : {}),
+        }, children: [typeof children === "function" ? null : children, _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.mutedForeground })] }));
+}
+function SelectValue({ size = "md", placeholder, style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    const sizeConfig = SIZE_CONFIGS[size];
+    return (_jsx(SelectPrimitive.Value, { placeholder: placeholder, ...props, style: {
+            fontSize: sizeConfig.fontSize,
+            color: theme.colors.text,
+            flex: 1,
+            ...(styleOverride && typeof styleOverride !== "function"
+                ? StyleSheet.flatten(styleOverride)
+                : {}),
+        } }));
+}
+function SelectContent({ side, align = "start", sideOffset = 4, portalHost, style: styleOverride, ...props }) {
+    const { theme, getShadowStyle, getContrastingColor } = useTheme();
+    const shadowStyle = StyleSheet.flatten(getShadowStyle("soft"));
+    const insets = useSafeAreaInsets();
+    const textColor = getContrastingColor(theme.colors.background, palette.white, palette.black);
+    return (_jsx(SelectPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(SelectPrimitive.Overlay, { style: Platform.select({
+                    native: StyleSheet.absoluteFill,
+                    default: undefined,
+                }), children: _jsx(AnimatedView, { type: "fade", children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(SelectPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
+                                    backgroundColor: theme.colors.background,
+                                    borderWidth: 1,
+                                    borderColor: theme.colors.border,
+                                    borderRadius: spacing.radiusSm,
+                                    padding: spacing.xs,
+                                    minWidth: 128,
+                                    overflow: "hidden",
+                                    ...shadowStyle,
+                                    ...(Platform.OS === "web" && {
+                                        zIndex: 50,
+                                        cursor: "default",
+                                    }),
+                                    ...(styleOverride && typeof styleOverride !== "function"
+                                        ? StyleSheet.flatten(styleOverride)
+                                        : {}),
+                                } }) }) }) }) }) }) }));
+}
+function SelectItem({ children, style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(SelectPrimitive.Item, { ...props, style: {
+                position: "relative",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: spacing.sm,
+                borderRadius: spacing.radiusSm,
+                paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+                paddingLeft: spacing.xl,
+                paddingRight: spacing.sm,
+                backgroundColor: "transparent",
+                ...(Platform.OS === "web" && {
+                    cursor: props.disabled ? "not-allowed" : "pointer",
+                    outlineStyle: "none",
+                }),
+                ...(props.disabled && { opacity: 0.5 }),
+                ...(styleOverride && typeof styleOverride !== "function"
+                    ? StyleSheet.flatten(styleOverride)
+                    : {}),
+            }, children: [_jsx(View, { style: {
+                        position: "absolute",
+                        left: spacing.sm,
+                        height: 14,
+                        width: 14,
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.text, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), _jsx(SelectPrimitive.ItemText, {}), typeof children === "function" ? null : children] }) }));
+}
+function SelectGroup({ style: styleOverride, ...props }) {
+    return (_jsx(SelectPrimitive.Group, { ...props, style: {
+            ...(styleOverride && typeof styleOverride !== "function"
+                ? StyleSheet.flatten(styleOverride)
+                : {}),
+        } }));
+}
+function SelectLabel({ style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(SelectPrimitive.Label, { ...props, style: {
+            paddingHorizontal: spacing.sm,
+            paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+            fontSize: 14,
+            fontWeight: "500",
+            color: theme.colors.text,
+            ...(styleOverride && typeof styleOverride !== "function"
+                ? StyleSheet.flatten(styleOverride)
+                : {}),
+        } }));
+}
+function SelectSeparator({ style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(SelectPrimitive.Separator, { ...props, style: {
+            backgroundColor: theme.colors.border,
+            marginHorizontal: -spacing.xs,
+            marginVertical: spacing.xs,
+            height: 1,
+            ...(styleOverride && typeof styleOverride !== "function"
+                ? StyleSheet.flatten(styleOverride)
+                : {}),
+        } }));
+}
+/**
+ * Select Component with Sub-components
+ * Properly typed interface for dot notation access (e.g., Select.Trigger)
+ */
+const Select = Object.assign(SelectRoot, {
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    Content: SelectContent,
+    Item: SelectItem,
+    Group: SelectGroup,
+    Label: SelectLabel,
+    Separator: SelectSeparator,
+});
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, };

package/dist/components/Separator.d.ts

@@ -0,0 +1,83 @@
+import { StyleProp, ViewStyle } from "react-native";
+import * as SeparatorPrimitive from "@rn-primitives/separator";
+/**
+ * Size variants for Separator thickness
+ */
+export type SeparatorSize = "sm" | "md" | "lg";
+/**
+ * Visual variants for Separator
+ */
+export type SeparatorVariant = "default" | "muted" | "primary";
+export interface SeparatorProps extends Omit<SeparatorPrimitive.RootProps, "style"> {
+    /**
+     * Orientation of the separator
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Whether the separator is purely decorative (no semantic meaning)
+     * @default true
+     */
+    decorative?: boolean;
+    /**
+     * Size variant controlling thickness
+     * @default "sm"
+     */
+    size?: SeparatorSize;
+    /**
+     * Visual variant controlling color
+     * @default "default"
+     */
+    variant?: SeparatorVariant;
+    /**
+     * Custom style override (uses StyleSheet.flatten for web compatibility)
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Margin around the separator
+     * For horizontal: vertical margin, for vertical: horizontal margin
+     * @default spacing.md (16)
+     */
+    margin?: number;
+}
+/**
+ * Enhanced Separator Component
+ *
+ * A visual or semantic distinction between content sections.
+ * Supports both horizontal and vertical orientations with
+ * theme-aware styling.
+ *
+ * Features:
+ * - Orientation (horizontal, vertical)
+ * - Size variants (sm, md, lg)
+ * - Visual variants (default, muted, primary)
+ * - Configurable margin
+ * - Theme-aware colors
+ * - Full accessibility support
+ *
+ * Usage:
+ * ```tsx
+ * // Basic horizontal separator
+ * <Separator />
+ *
+ * // Vertical separator
+ * <Separator orientation="vertical" />
+ *
+ * // With size variant
+ * <Separator size="lg" />
+ *
+ * // Primary colored separator
+ * <Separator variant="primary" />
+ *
+ * // Muted separator with custom margin
+ * <Separator variant="muted" margin={spacing.lg} />
+ *
+ * // Non-decorative separator (has semantic meaning)
+ * <Separator decorative={false} />
+ *
+ * // Custom style
+ * <Separator style={{ opacity: 0.5 }} />
+ * ```
+ */
+declare function Separator({ orientation, decorative, size, variant, style: styleOverride, margin, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+export { Separator };

package/dist/components/Separator.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import * as SeparatorPrimitive from "@rn-primitives/separator";
+const SIZE_CONFIGS = {
+    sm: 1,
+    md: 2,
+    lg: 4,
+};
+/**
+ * Enhanced Separator Component
+ *
+ * A visual or semantic distinction between content sections.
+ * Supports both horizontal and vertical orientations with
+ * theme-aware styling.
+ *
+ * Features:
+ * - Orientation (horizontal, vertical)
+ * - Size variants (sm, md, lg)
+ * - Visual variants (default, muted, primary)
+ * - Configurable margin
+ * - Theme-aware colors
+ * - Full accessibility support
+ *
+ * Usage:
+ * ```tsx
+ * // Basic horizontal separator
+ * <Separator />
+ *
+ * // Vertical separator
+ * <Separator orientation="vertical" />
+ *
+ * // With size variant
+ * <Separator size="lg" />
+ *
+ * // Primary colored separator
+ * <Separator variant="primary" />
+ *
+ * // Muted separator with custom margin
+ * <Separator variant="muted" margin={spacing.lg} />
+ *
+ * // Non-decorative separator (has semantic meaning)
+ * <Separator decorative={false} />
+ *
+ * // Custom style
+ * <Separator style={{ opacity: 0.5 }} />
+ * ```
+ */
+function Separator({ orientation = "horizontal", decorative = true, size = "sm", variant = "default", style: styleOverride, margin = spacing.md, ...props }) {
+    const { theme } = useTheme();
+    // Determine color based on variant
+    const getColor = () => {
+        switch (variant) {
+            case "primary":
+                return theme.colors.primary;
+            case "muted":
+                return theme.colors.muted;
+            case "default":
+            default:
+                return theme.colors.border;
+        }
+    };
+    const thickness = SIZE_CONFIGS[size];
+    const color = getColor();
+    // Flatten style override for web compatibility
+    const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
+    const isHorizontal = orientation === "horizontal";
+    return (_jsx(SeparatorPrimitive.Root, { ...props, orientation: orientation, decorative: decorative, style: {
+            backgroundColor: color,
+            ...(isHorizontal
+                ? {
+                    height: thickness,
+                    width: "100%",
+                    marginVertical: margin,
+                }
+                : {
+                    width: thickness,
+                    height: "100%",
+                    marginHorizontal: margin,
+                }),
+            ...(flattenedStyle || {}),
+        } }));
+}
+export { Separator };

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,68 @@
+import { StyleProp, ViewStyle } from "react-native";
+export interface SkeletonProps {
+    /** Width of the skeleton element */
+    width?: number | `${number}%`;
+    /** Height of the skeleton element */
+    height?: number;
+    /** Border radius (defaults to radiusMd) */
+    borderRadius?: number;
+    /** Render as a circle (overrides borderRadius) */
+    circle?: boolean;
+    /** Custom style override */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Skeleton Component
+ *
+ * A placeholder loading element with a pulsing shimmer animation.
+ * Respects reduced-motion accessibility settings.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton width={200} height={20} />
+ * <Skeleton width={40} height={40} circle />
+ * ```
+ */
+export declare function Skeleton({ width, height, borderRadius, circle, style, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonTextProps {
+    /** Number of text lines to render */
+    lines?: number;
+    /** Height of each line */
+    lineHeight?: number;
+    /** Gap between lines */
+    gap?: number;
+    /** Custom style override */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * SkeletonText renders N horizontal bars simulating text.
+ * The last line is rendered at 60% width for a natural look.
+ */
+export declare function SkeletonText({ lines, lineHeight, gap, style, }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonAvatarProps {
+    /** Diameter of the circular avatar placeholder */
+    size?: number;
+    /** Custom style override */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * SkeletonAvatar is a circular skeleton shorthand.
+ */
+export declare function SkeletonAvatar({ size, style }: SkeletonAvatarProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonCardProps {
+    /** Whether to show an image placeholder area */
+    showImage?: boolean;
+    /** Image placeholder height */
+    imageHeight?: number;
+    /** Whether to show an avatar row */
+    showAvatar?: boolean;
+    /** Number of text lines */
+    textLines?: number;
+    /** Custom style override */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * SkeletonCard composes an image placeholder, optional avatar row,
+ * and text lines in a Card-styled wrapper.
+ */
+export declare function SkeletonCard({ showImage, imageHeight, showAvatar, textLines, style, }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { View, Animated, StyleSheet } from "react-native";
+import { useReducedMotion } from "react-native-reanimated";
+import { useTheme } from "../hooks/useTheme";
+import { shouldUseNativeDriver } from "../lib/animations";
+import { spacing } from "../constants/spacing";
+/**
+ * Skeleton Component
+ *
+ * A placeholder loading element with a pulsing shimmer animation.
+ * Respects reduced-motion accessibility settings.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton width={200} height={20} />
+ * <Skeleton width={40} height={40} circle />
+ * ```
+ */
+export function Skeleton({ width = "100%", height = 20, borderRadius = spacing.radiusMd, circle = false, style, }) {
+    const { theme } = useTheme();
+    const reduceMotion = useReducedMotion();
+    const opacity = useRef(new Animated.Value(reduceMotion ? 0.6 : 0.3)).current;
+    useEffect(() => {
+        if (reduceMotion) {
+            opacity.setValue(0.6);
+            return;
+        }
+        const animation = Animated.loop(Animated.sequence([
+            Animated.timing(opacity, {
+                toValue: 1,
+                duration: 800,
+                useNativeDriver: shouldUseNativeDriver,
+            }),
+            Animated.timing(opacity, {
+                toValue: 0.3,
+                duration: 800,
+                useNativeDriver: shouldUseNativeDriver,
+            }),
+        ]));
+        animation.start();
+        return () => animation.stop();
+    }, [opacity, reduceMotion]);
+    const resolvedSize = circle ? (typeof height === "number" ? height : 40) : undefined;
+    return (_jsx(Animated.View, { style: [
+            {
+                width: circle ? resolvedSize : width,
+                height: circle ? resolvedSize : height,
+                borderRadius: circle ? (resolvedSize / 2) : borderRadius,
+                backgroundColor: theme.colors.muted,
+                opacity,
+            },
+            style,
+        ] }));
+}
+/**
+ * SkeletonText renders N horizontal bars simulating text.
+ * The last line is rendered at 60% width for a natural look.
+ */
+export function SkeletonText({ lines = 3, lineHeight = 14, gap = spacing.sm, style, }) {
+    return (_jsx(View, { style: [{ gap }, style], children: Array.from({ length: lines }).map((_, i) => (_jsx(Skeleton, { width: i === lines - 1 ? "60%" : "100%", height: lineHeight }, i))) }));
+}
+/**
+ * SkeletonAvatar is a circular skeleton shorthand.
+ */
+export function SkeletonAvatar({ size = 40, style }) {
+    return _jsx(Skeleton, { width: size, height: size, circle: true, style: style });
+}
+/**
+ * SkeletonCard composes an image placeholder, optional avatar row,
+ * and text lines in a Card-styled wrapper.
+ */
+export function SkeletonCard({ showImage = true, imageHeight = 140, showAvatar = true, textLines = 3, style, }) {
+    const { theme } = useTheme();
+    const styles = createCardStyles(theme);
+    return (_jsxs(View, { style: [styles.card, style], children: [showImage && (_jsx(Skeleton, { width: "100%", height: imageHeight, borderRadius: 0 })), _jsxs(View, { style: styles.body, children: [showAvatar && (_jsxs(View, { style: styles.avatarRow, children: [_jsx(SkeletonAvatar, { size: 36 }), _jsxs(View, { style: styles.avatarText, children: [_jsx(Skeleton, { width: "50%", height: 14 }), _jsx(Skeleton, { width: "30%", height: 12 })] })] })), _jsx(SkeletonText, { lines: textLines })] })] }));
+}
+const createCardStyles = (theme) => StyleSheet.create({
+    card: {
+        backgroundColor: theme.colors.card,
+        borderRadius: spacing.radiusLg,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        overflow: "hidden",
+    },
+    body: {
+        padding: spacing.md,
+        gap: spacing.md,
+    },
+    avatarRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+    },
+    avatarText: {
+        flex: 1,
+        gap: spacing.xs,
+    },
+});

package/dist/components/Slider.d.ts

@@ -0,0 +1,24 @@
+import { StyleProp, ViewStyle } from "react-native";
+export type SliderSize = "sm" | "md";
+export interface SliderProps {
+    /** Current value */
+    value?: number;
+    /** Called when the user drags the thumb */
+    onValueChange?: (value: number) => void;
+    /** Minimum value @default 0 */
+    min?: number;
+    /** Maximum value @default 100 */
+    max?: number;
+    /** Step increment @default 1 */
+    step?: number;
+    /** Size variant @default "md" */
+    size?: SliderSize;
+    /** Disable interaction @default false */
+    disabled?: boolean;
+    /** Show value label above thumb @default false */
+    showValue?: boolean;
+    /** Style override for outer container */
+    style?: StyleProp<ViewStyle>;
+}
+declare function Slider({ value, onValueChange, min, max, step, size, disabled, showValue, style: styleOverride, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export { Slider };