@mrmeg/expo-ui 0.1.0

package/dist/components/Button.js

@@ -0,0 +1,216 @@
+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";
+const SIZE_CONFIGS = {
+    sm: {
+        paddingVertical: spacing.xs,
+        paddingHorizontal: 12,
+        fontSize: 12,
+        height: 32,
+    },
+    md: {
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        fontSize: 14,
+        height: 36,
+    },
+    lg: {
+        paddingVertical: 10,
+        paddingHorizontal: spacing.lg,
+        fontSize: 16,
+        height: 44,
+    },
+};
+/**
+ * Enhanced Button Component
+ *
+ * Features:
+ * - 6 variants (default, outline, ghost, link, destructive, secondary)
+ * - 3 sizes (sm, md, lg)
+ * - Loading state with spinner
+ * - Full width option
+ * - Shadow support
+ * - Automatic text contrast calculation
+ * - Accessory components (left/right)
+ *
+ * Usage:
+ * ```tsx
+ * // Default button
+ * <Button onPress={handler}>
+ *   <SansSerifBoldText>Click Me</SansSerifBoldText>
+ * </Button>
+ *
+ * // Different variants
+ * <Button preset="outline" onPress={handler}>Outline</Button>
+ * <Button preset="ghost" onPress={handler}>Ghost</Button>
+ * <Button preset="destructive" onPress={handler}>Delete</Button>
+ *
+ * // Different sizes
+ * <Button size="sm" onPress={handler}>Small</Button>
+ * <Button size="lg" onPress={handler}>Large</Button>
+ *
+ * // Loading state
+ * <Button loading onPress={handler}>Processing...</Button>
+ *
+ * // Full width
+ * <Button fullWidth onPress={handler}>Submit</Button>
+ * ```
+ */
+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 { theme, getContrastingColor, getShadowStyle } = useTheme();
+    const styles = createStyles(theme, size);
+    const shadowStyle = getShadowStyle("base");
+    const sizeConfig = SIZE_CONFIGS[size];
+    // Pre-compute background color for contrast calculation
+    // Always flatten to handle both array styles (from Slot) and RegisteredStyle
+    const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
+    const customBgColor = flattenedStyle?.backgroundColor;
+    // Calculate background color for each preset
+    let backgroundColor;
+    if (customBgColor && typeof customBgColor === "string") {
+        backgroundColor = customBgColor;
+    }
+    else if (preset === "default") {
+        backgroundColor = theme.colors.accent;
+    }
+    else if (preset === "secondary") {
+        backgroundColor = theme.colors.primary;
+    }
+    else if (preset === "destructive") {
+        backgroundColor = theme.colors.destructive;
+    }
+    else if (preset === "outline" || preset === "ghost" || preset === "link") {
+        backgroundColor = "transparent";
+    }
+    else {
+        backgroundColor = theme.colors.accent;
+    }
+    // Determine text color per preset for readable contrast
+    const textColor = preset === "outline"
+        ? theme.colors.foreground
+        : preset === "ghost"
+            ? theme.colors.text
+            : preset === "link"
+                ? theme.colors.accent
+                : preset === "default"
+                    ? theme.colors.accentForeground
+                    : preset === "secondary"
+                        ? theme.colors.primaryForeground
+                        : getContrastingColor(backgroundColor, palette.white, palette.black);
+    const [focused, setFocused] = useState(false);
+    const isDisabled = disabled || loading;
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!isDisabled,
+        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: [
+                        styles.button,
+                        preset === "default" && styles.buttonDefault,
+                        preset === "outline" && styles.buttonOutline,
+                        preset === "ghost" && styles.buttonGhost,
+                        preset === "link" && styles.buttonLink,
+                        preset === "destructive" && styles.buttonDestructive,
+                        preset === "secondary" && styles.buttonSecondary,
+                        fullWidth && styles.fullWidth,
+                        withShadow && !isDisabled && shadowStyle,
+                        state.pressed && styles.pressed,
+                        state.pressed && pressedStyleOverride,
+                        isDisabled && styles.disabled,
+                        isDisabled && disabledStyleOverride,
+                        Platform.OS === "web" && focused && !isDisabled && {
+                            boxShadow: `0 0 0 2px ${theme.colors.background}, 0 0 0 4px ${theme.colors.accent}`,
+                        },
+                        // Spread array styles from Slot to prevent nested arrays on web
+                        ...(Array.isArray(styleOverride) ? styleOverride : [styleOverride]),
+                    ], children: [!!LeftAccessory && !loading && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), loading && (_jsx(ActivityIndicator, { size: "small", color: textColor, style: styles.loader })), (tx || text) ? (_jsx(StyledText, { style: [
+                                styles.text,
+                                state.pressed && styles.pressedText,
+                                state.pressed && pressedTextStyleOverride,
+                                isDisabled && disabledTextStyleOverride,
+                                textStyleOverride,
+                            ], children: tx || text })) : !loading && children ? (
+                        // Wrap string children in StyledText to apply TextColorContext
+                        typeof children === "string" ? (_jsx(StyledText, { style: [
+                                styles.text,
+                                state.pressed && styles.pressedText,
+                                state.pressed && pressedTextStyleOverride,
+                                isDisabled && disabledTextStyleOverride,
+                                textStyleOverride,
+                            ], children: children })) : (children)) : null, !!RightAccessory && !loading && (_jsx(RightAccessory, { style: styles.rightAccessory, pressableState: state, disabled: isDisabled }))] }) })) }) }));
+}
+const createStyles = (theme, size) => {
+    const sizeConfig = SIZE_CONFIGS[size];
+    return StyleSheet.create({
+        button: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: spacing.radiusMd,
+            paddingVertical: sizeConfig.paddingVertical,
+            paddingHorizontal: sizeConfig.paddingHorizontal,
+            minHeight: sizeConfig.height,
+            flexShrink: 0,
+            ...(Platform.OS === "web" && { cursor: "pointer" }),
+        },
+        buttonDefault: {
+            backgroundColor: theme.colors.accent,
+        },
+        buttonSecondary: {
+            backgroundColor: theme.colors.primary,
+        },
+        buttonDestructive: {
+            backgroundColor: theme.colors.destructive,
+        },
+        buttonOutline: {
+            backgroundColor: "transparent",
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+        },
+        buttonGhost: {
+            backgroundColor: "transparent",
+        },
+        buttonLink: {
+            backgroundColor: "transparent",
+            paddingVertical: 0,
+            paddingHorizontal: 0,
+        },
+        fullWidth: {
+            width: "100%",
+        },
+        text: {
+            fontFamily: fontFamilies.sansSerif.regular,
+            fontSize: sizeConfig.fontSize,
+            fontWeight: "500",
+            textAlign: "center",
+            lineHeight: sizeConfig.fontSize * 1.4,
+            flexShrink: 0,
+        },
+        pressed: {
+            opacity: 0.9,
+        },
+        pressedText: {
+            opacity: 0.9,
+        },
+        disabled: {
+            opacity: 0.6,
+        },
+        leftAccessory: {
+            marginRight: spacing.sm,
+        },
+        rightAccessory: {
+            marginLeft: spacing.sm,
+        },
+        loader: {
+            marginRight: spacing.sm,
+        },
+    });
+};

package/dist/components/Card.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { ViewStyle, TextStyle, StyleProp } from "react-native";
+import { TextProps } from "./StyledText";
+export interface CardProps {
+    /** Card contents */
+    children?: React.ReactNode;
+    /** Custom style override */
+    style?: StyleProp<ViewStyle>;
+    /** Visual variant */
+    variant?: "default" | "outline" | "ghost";
+    /** Make card pressable with scale animation */
+    onPress?: () => void;
+    /** Whether the card is disabled (only relevant when onPress is set) */
+    disabled?: boolean;
+}
+declare function Card({ children, style: styleOverride, variant, onPress, disabled }: CardProps): import("react/jsx-runtime").JSX.Element;
+export interface CardHeaderProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function CardHeader({ children, style: styleOverride }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface CardContentProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function CardContent({ children, style: styleOverride }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+export interface CardFooterProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function CardFooter({ children, style: styleOverride }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+export interface CardTitleProps extends Omit<TextProps, "style"> {
+    children?: React.ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+declare function CardTitle({ children, style: styleOverride, ...props }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+export interface CardDescriptionProps extends Omit<TextProps, "style"> {
+    children?: React.ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+declare function CardDescription({ children, style: styleOverride, ...props }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription };

package/dist/components/Card.js

@@ -0,0 +1,126 @@
+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";
+/**
+ * Card Component
+ *
+ * A themed container component with header, content, and footer sections.
+ * Follows shadcn/ui patterns with consistent styling and theme integration.
+ *
+ * Usage:
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Card Title</CardTitle>
+ *     <CardDescription>Card description text</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <Text>Main content goes here</Text>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+const CardContext = createContext(null);
+function useCardContext() {
+    const ctx = useContext(CardContext);
+    if (!ctx) {
+        // Fallback for standalone usage without Card parent
+        const { theme } = useTheme();
+        return { theme, styles: createCardStyles(theme) };
+    }
+    return ctx;
+}
+function Card({ children, style: styleOverride, variant = "default", onPress, disabled }) {
+    const { theme } = useTheme();
+    const styles = createCardStyles(theme);
+    const ctx = { theme, styles };
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !onPress || !!disabled,
+        scaleTo: 0.98,
+        haptic: false,
+    });
+    const cardContent = (_jsx(View, { style: [
+            styles.card,
+            variant === "default" && styles.cardDefault,
+            variant === "outline" && styles.cardOutline,
+            variant === "ghost" && styles.cardGhost,
+            styleOverride,
+        ], children: children }));
+    if (onPress) {
+        return (_jsx(CardContext.Provider, { value: ctx, children: _jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, ...pressHandlers, style: Platform.OS === "web" ? { cursor: "pointer" } : undefined, children: _jsx(Animated.View, { style: scaleStyle, children: cardContent }) }) }));
+    }
+    return (_jsx(CardContext.Provider, { value: ctx, children: cardContent }));
+}
+function CardHeader({ children, style: styleOverride }) {
+    const { styles } = useCardContext();
+    return (_jsx(View, { style: [styles.header, styleOverride], children: children }));
+}
+function CardContent({ children, style: styleOverride }) {
+    const { styles } = useCardContext();
+    return (_jsx(View, { style: [styles.content, styleOverride], children: children }));
+}
+function CardFooter({ children, style: styleOverride }) {
+    const { styles } = useCardContext();
+    return (_jsx(View, { style: [styles.footer, styleOverride], children: children }));
+}
+function CardTitle({ children, style: styleOverride, ...props }) {
+    const { theme, styles } = useCardContext();
+    return (_jsx(StyledText, { fontWeight: "semibold", ...props, style: [styles.title, { color: theme.colors.text }, styleOverride], children: children }));
+}
+function CardDescription({ children, style: styleOverride, ...props }) {
+    const { theme, styles } = useCardContext();
+    return (_jsx(StyledText, { ...props, style: [styles.description, { color: theme.colors.textDim }, styleOverride], children: children }));
+}
+const createCardStyles = (theme) => StyleSheet.create({
+    card: {
+        borderRadius: spacing.radiusLg,
+        overflow: "hidden",
+    },
+    cardDefault: {
+        backgroundColor: theme.colors.card,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+    },
+    cardOutline: {
+        backgroundColor: "transparent",
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+    },
+    cardGhost: {
+        backgroundColor: "transparent",
+    },
+    header: {
+        padding: spacing.lg,
+        paddingBottom: spacing.xs,
+        gap: spacing.xs,
+    },
+    content: {
+        paddingHorizontal: spacing.lg,
+        paddingBottom: spacing.lg,
+    },
+    footer: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: spacing.lg,
+        paddingBottom: spacing.lg,
+        paddingTop: 0,
+    },
+    title: {
+        fontSize: 18,
+        lineHeight: 24,
+        letterSpacing: -0.3,
+    },
+    description: {
+        fontSize: 14,
+        lineHeight: 20,
+    },
+});
+export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription };

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,39 @@
+import { StyleProp, ViewStyle } from "react-native";
+import * as CheckboxPrimitive from "@rn-primitives/checkbox";
+/**
+ * Size variants for Checkbox
+ */
+export type CheckboxSize = "sm" | "md" | "lg";
+export interface CheckboxProps extends Omit<CheckboxPrimitive.RootProps, "style"> {
+    /**
+     * Size variant
+     * @default "md"
+     */
+    size?: CheckboxSize;
+    /**
+     * Optional label text displayed next to the checkbox
+     */
+    label?: string;
+    /**
+     * Whether the checkbox is in an indeterminate state (dash icon)
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether the checkbox is in an error state
+     */
+    error?: boolean;
+    /**
+     * Custom style override (uses StyleSheet.flatten for web compatibility)
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Style for the label text
+     */
+    labelStyle?: StyleProp<ViewStyle>;
+    /**
+     * Whether the field is required (shows asterisk in label)
+     */
+    required?: boolean;
+}
+declare function Checkbox({ size, label, indeterminate, error, style: styleOverride, labelStyle, required, checked, onCheckedChange, disabled, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/components/Checkbox.js

@@ -0,0 +1,96 @@
+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 * as CheckboxPrimitive from "@rn-primitives/checkbox";
+const DEFAULT_HIT_SLOP = 8;
+const SIZE_CONFIGS = {
+    sm: { size: 16, iconSize: 12, strokeWidth: 2.5 },
+    md: { size: 20, iconSize: 16, strokeWidth: 3 },
+    lg: { size: 24, iconSize: 20, strokeWidth: 3.5 },
+};
+function Checkbox({ size = "md", label, indeterminate = false, error = false, style: styleOverride, labelStyle, required = false, checked, onCheckedChange, disabled, ...props }) {
+    const { theme, getContrastingColor } = useTheme();
+    const reduceMotion = useReducedMotion();
+    const sizeConfig = SIZE_CONFIGS[size];
+    // Simple fast opacity for the checkmark icon
+    const checkOpacity = useSharedValue(checked || indeterminate ? 1 : 0);
+    const wrappedOnCheckedChange = (next) => {
+        if (next)
+            hapticLight();
+        if (reduceMotion) {
+            checkOpacity.value = withTiming(next ? 1 : 0, { duration: 0 });
+        }
+        else {
+            checkOpacity.value = withTiming(next ? 1 : 0, { duration: 60 });
+        }
+        onCheckedChange?.(next);
+    };
+    const checkAnimatedStyle = useAnimatedStyle(() => ({
+        opacity: checkOpacity.value,
+    }));
+    // Dynamic border color with sufficient contrast against background
+    const borderColor = error
+        ? theme.colors.destructive
+        : checked || indeterminate
+            ? theme.colors.primary
+            : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
+    // Flatten style override for web compatibility
+    const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
+    const checkboxElement = (_jsx(CheckboxPrimitive.Root, { ...props, checked: checked, onCheckedChange: wrappedOnCheckedChange, disabled: disabled, style: {
+            borderColor,
+            backgroundColor: checked || indeterminate ? theme.colors.primary : "transparent",
+            borderRadius: spacing.radiusSm,
+            borderWidth: 1,
+            width: sizeConfig.size,
+            height: sizeConfig.size,
+            justifyContent: "center",
+            alignItems: "center",
+            opacity: disabled ? 0.5 : 1,
+            ...(flattenedStyle || {}),
+        }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "checkbox", accessibilityState: {
+            checked: indeterminate ? "mixed" : checked,
+            disabled: !!disabled,
+        }, accessibilityLabel: label, children: _jsx(CheckboxPrimitive.Indicator, { style: {
+                justifyContent: "center",
+                alignItems: "center",
+            }, children: _jsx(Animated.View, { style: checkAnimatedStyle, children: indeterminate ? (_jsx(Icon, { name: "minus", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) : (_jsx(Icon, { name: "check", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) }) }) }));
+    // If no label, return just the checkbox
+    if (!label) {
+        return checkboxElement;
+    }
+    // With label, wrap in a container
+    return (_jsxs(Pressable, { onPress: () => !disabled && wrappedOnCheckedChange(!checked), style: [styles.container, labelStyle], disabled: disabled, accessibilityRole: "checkbox", accessibilityState: {
+            checked: indeterminate ? "mixed" : checked,
+            disabled: !!disabled,
+        }, accessibilityLabel: label, children: [checkboxElement, _jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { style: [
+                        styles.label,
+                        { color: theme.colors.text },
+                        disabled && styles.disabledLabel,
+                        error && { color: theme.colors.destructive },
+                    ], children: [label, required && (_jsx(StyledText, { style: [styles.required, { color: theme.colors.destructive }], children: " *" }))] }) })] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+    },
+    labelContainer: {
+        flex: 1,
+    },
+    label: {
+        fontSize: 14,
+    },
+    disabledLabel: {
+        opacity: 0.5,
+    },
+    required: {
+        fontWeight: "bold",
+    },
+});
+export { Checkbox };

package/dist/components/Collapsible.d.ts

@@ -0,0 +1,67 @@
+import * as CollapsiblePrimitive from "@rn-primitives/collapsible";
+/**
+ * Collapsible Component (Root)
+ * A wrapper component that provides expand/collapse functionality with smooth animations
+ * Using @rn-primitives/collapsible with DaisyUI theme integration
+ *
+ * Usage:
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ * <Collapsible open={open} onOpenChange={setOpen}>
+ *   <CollapsibleTrigger>
+ *     <SansSerifText>Toggle</SansSerifText>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     <SansSerifText>Content that expands and collapses</SansSerifText>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+type CollapsibleProps = CollapsiblePrimitive.RootProps;
+declare function Collapsible({ children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * CollapsibleTrigger Component
+ * The trigger button/element that toggles the collapsible state
+ * Supports asChild pattern for custom trigger components
+ *
+ * Usage:
+ * ```tsx
+ * // Simple trigger
+ * <CollapsibleTrigger>
+ *   <SansSerifText>Click to expand</SansSerifText>
+ * </CollapsibleTrigger>
+ *
+ * // With asChild (using Button)
+ * <CollapsibleTrigger asChild>
+ *   <Button preset="outline">
+ *     <SansSerifText>Toggle</SansSerifText>
+ *   </Button>
+ * </CollapsibleTrigger>
+ * ```
+ */
+type CollapsibleTriggerProps = CollapsiblePrimitive.TriggerProps;
+declare function CollapsibleTrigger({ style: styleOverride, ...props }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * CollapsibleContent Component
+ * The content that expands and collapses
+ * Includes exit animation on native platforms
+ *
+ * Usage:
+ * ```tsx
+ * <CollapsibleContent>
+ *   <View>
+ *     <SansSerifText>This content will animate in and out</SansSerifText>
+ *   </View>
+ * </CollapsibleContent>
+ * ```
+ */
+type CollapsibleContentProps = CollapsiblePrimitive.ContentProps & {
+    /**
+     * Whether to force remove the content from the tree when closed
+     * Default: false (content remains in tree but hidden)
+     */
+    forceMount?: boolean;
+};
+declare function CollapsibleContent({ forceMount, style: styleOverride, children, ...props }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };
+export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps };

package/dist/components/Collapsible.js

@@ -0,0 +1,38 @@
+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 * as CollapsiblePrimitive from "@rn-primitives/collapsible";
+function Collapsible({ children, ...props }) {
+    return (_jsx(CollapsiblePrimitive.Root, { ...props, asChild: Platform.OS !== "web", children: _jsx(View, { children: children }) }));
+}
+function CollapsibleTrigger({ style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(CollapsiblePrimitive.Trigger, { ...props, style: {
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                paddingVertical: spacing.sm,
+                ...(Platform.OS === "web" && {
+                    cursor: "pointer",
+                    outlineStyle: "none",
+                }),
+                ...(styleOverride && typeof styleOverride !== "function"
+                    ? StyleSheet.flatten(styleOverride)
+                    : {}),
+            } }) }));
+}
+function CollapsibleContent({ forceMount, style: styleOverride, children, ...props }) {
+    const { theme } = useTheme();
+    const fadeAnim = React.useRef(new Animated.Value(1)).current;
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(CollapsiblePrimitive.Content, { ...props, forceMount: forceMount, children: _jsx(Animated.View, { style: {
+                    overflow: "hidden",
+                    opacity: fadeAnim,
+                    ...(styleOverride && typeof styleOverride !== "function"
+                        ? StyleSheet.flatten(styleOverride)
+                        : {}),
+                }, children: children }) }) }));
+}
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };