@mrmeg/expo-ui 0.13.0-rsd.0 → 0.13.0

package/dist/components/Card.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
+import { ViewStyle, TextStyle, StyleProp } from "react-native";
 import { TextProps } from "./StyledText";
-import { type LooseStyle } from "../lib/styles";
 export interface CardProps {
+    /** Card contents */
     children?: React.ReactNode;
-    style?: LooseStyle;
+    /** Custom style override */
+    style?: StyleProp<ViewStyle>;
+    /** Visual variant */
     variant?: "default" | "outline" | "ghost";
     /** Make card pressable with scale animation */
     onPress?: () => void;
@@ -13,27 +16,27 @@ export interface CardProps {
 declare function Card({ children, style: styleOverride, variant, onPress, disabled }: CardProps): React.JSX.Element;
 export interface CardHeaderProps {
     children?: React.ReactNode;
-    style?: LooseStyle;
+    style?: StyleProp<ViewStyle>;
 }
 declare function CardHeader({ children, style: styleOverride }: CardHeaderProps): React.JSX.Element;
 export interface CardContentProps {
     children?: React.ReactNode;
-    style?: LooseStyle;
+    style?: StyleProp<ViewStyle>;
 }
 declare function CardContent({ children, style: styleOverride }: CardContentProps): React.JSX.Element;
 export interface CardFooterProps {
     children?: React.ReactNode;
-    style?: LooseStyle;
+    style?: StyleProp<ViewStyle>;
 }
 declare function CardFooter({ children, style: styleOverride }: CardFooterProps): React.JSX.Element;
 export interface CardTitleProps extends Omit<TextProps, "style"> {
     children?: React.ReactNode;
-    style?: LooseStyle;
+    style?: StyleProp<TextStyle>;
 }
 declare function CardTitle({ children, style: styleOverride, ...props }: CardTitleProps): React.JSX.Element;
 export interface CardDescriptionProps extends Omit<TextProps, "style"> {
     children?: React.ReactNode;
-    style?: LooseStyle;
+    style?: StyleProp<TextStyle>;
 }
 declare function CardDescription({ children, style: styleOverride, ...props }: CardDescriptionProps): React.JSX.Element;
 export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription };

package/dist/components/Card.js

@@ -1,110 +1,125 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, use, useState } from "react";
-import { css, html } from "react-strict-dom";
+import { createContext, use } from "react";
+import { View, Pressable, StyleSheet, Platform, Animated } from "react-native";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
-import { useReducedMotion } from "../hooks/useReduceMotion.js";
-import { sanitizeWebStyle } from "../lib/styles.js";
-// Card only needs to share the theme down to its subcomponents.
-const CardContext = createContext(false);
-// StyleX rejects imported constants (spacing.*) used statically inside
-// css.create, so spacing values are inlined as numeric literals here (mirrors
-// constants/spacing.ts: radiusLg=8, lg=24, xs=4).
-const styles = css.create({
-    card: { borderRadius: 8 },
-    default: (backgroundColor, borderColor) => ({
-        backgroundColor,
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor,
-    }),
-    outline: (borderColor) => ({
-        backgroundColor: "transparent",
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor,
-    }),
-    ghost: { backgroundColor: "transparent" },
-    shadow: (boxShadow) => ({ boxShadow }),
-    pressable: {
-        cursor: "pointer",
-        appearance: "none",
-        backgroundColor: "transparent",
-        borderWidth: 0,
-        padding: 0,
-        margin: 0,
-        textAlign: "inherit",
-        alignSelf: "stretch",
-        transitionProperty: "transform",
-        transitionDuration: "0.1s",
-    },
-    pressed: { transform: "scale(0.98)" },
-    header: {
-        display: "flex",
-        flexDirection: "column",
-        padding: 24,
-        paddingBottom: 4,
-        gap: 4,
-    },
-    content: {
-        display: "flex",
-        flexDirection: "column",
-        paddingLeft: 24,
-        paddingRight: 24,
-        paddingBottom: 24,
-    },
-    footer: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        paddingLeft: 24,
-        paddingRight: 24,
-        paddingBottom: 24,
-        paddingTop: 0,
-    },
-});
-const TITLE_STYLE = { fontSize: 18, lineHeight: 24, letterSpacing: 0 };
-const DESC_STYLE = { fontSize: 14, lineHeight: 20 };
+import { useScalePress } from "../hooks/useScalePress.js";
+import { spacing } from "../constants/spacing.js";
+/**
+ * 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 = use(CardContext);
+    // useTheme must run unconditionally (Rules of Hooks); createCardStyles is a
+    // plain function, so the `??` keeps the fallback styles lazy.
+    const { theme } = useTheme();
+    // Fallback for standalone usage without a Card parent.
+    return ctx ?? { theme, styles: createCardStyles(theme) };
+}
 function Card({ children, style: styleOverride, variant = "default", onPress, disabled }) {
     const { theme, getShadowStyle } = useTheme();
-    const reduceMotion = useReducedMotion();
-    const [pressed, setPressed] = useState(false);
+    const styles = createCardStyles(theme);
     const shadowStyle = getShadowStyle("subtle");
-    const surface = [
-        styles.card,
-        variant === "default" ? styles.default(theme.colors.card, theme.colors.border) : null,
-        variant === "default" ? styles.shadow(shadowStyle.boxShadow ?? "none") : null,
-        variant === "outline" ? styles.outline(theme.colors.border) : null,
-        variant === "ghost" ? styles.ghost : null,
-        sanitizeWebStyle(styleOverride),
-    ];
-    const cardContent = (_jsx(html.div, { style: surface, children: children }));
+    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 === "default" && shadowStyle,
+            variant === "outline" && styles.cardOutline,
+            variant === "ghost" && styles.cardGhost,
+            styleOverride,
+        ], children: children }));
     if (onPress) {
-        return (_jsx(CardContext.Provider, { value: true, children: _jsx(html.button, { type: "button", "aria-disabled": disabled, disabled: disabled, onClick: () => { if (!disabled)
-                    onPress(); }, onPointerDown: () => !disabled && setPressed(true), onPointerUp: () => setPressed(false), onPointerLeave: () => setPressed(false), style: [
-                    styles.pressable,
-                    pressed && !disabled && !reduceMotion ? styles.pressed : null,
-                ], children: cardContent }) }));
+        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: true, children: cardContent }));
+    return (_jsx(CardContext.Provider, { value: ctx, children: cardContent }));
 }
 function CardHeader({ children, style: styleOverride }) {
-    return (_jsx(html.div, { style: [styles.header, sanitizeWebStyle(styleOverride)], children: children }));
+    const { styles } = useCardContext();
+    return (_jsx(View, { style: [styles.header, styleOverride], children: children }));
 }
 function CardContent({ children, style: styleOverride }) {
-    return (_jsx(html.div, { style: [styles.content, sanitizeWebStyle(styleOverride)], children: children }));
+    const { styles } = useCardContext();
+    return (_jsx(View, { style: [styles.content, styleOverride], children: children }));
 }
 function CardFooter({ children, style: styleOverride }) {
-    return (_jsx(html.div, { style: [styles.footer, sanitizeWebStyle(styleOverride)], children: children }));
+    const { styles } = useCardContext();
+    return (_jsx(View, { style: [styles.footer, styleOverride], children: children }));
 }
 function CardTitle({ children, style: styleOverride, ...props }) {
-    const { theme } = useTheme();
-    use(CardContext);
-    return (_jsx(StyledText, { fontWeight: "semibold", ...props, style: [{ ...TITLE_STYLE, color: theme.colors.text }, styleOverride], children: children }));
+    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 } = useTheme();
-    use(CardContext);
-    return (_jsx(StyledText, { ...props, style: [{ ...DESC_STYLE, color: theme.colors.textDim }, styleOverride], children: children }));
+    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,
+    },
+    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,
+    },
+    description: {
+        fontSize: 14,
+        lineHeight: 20,
+    },
+});
 export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription };

package/dist/components/Checkbox.d.ts

@@ -1,16 +1,11 @@
 import React from "react";
-import { type LooseStyle } from "../lib/styles";
+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 {
-    /** Whether the checkbox is checked */
-    checked?: boolean;
-    /** Called with the next checked value when toggled */
-    onCheckedChange?: (checked: boolean) => void;
-    /** Whether the checkbox is disabled */
-    disabled?: boolean;
+export interface CheckboxProps extends Omit<CheckboxPrimitive.RootProps, "style"> {
     /**
      * Size variant
      * @default "md"
@@ -29,24 +24,17 @@ export interface CheckboxProps {
      */
     error?: boolean;
     /**
-     * Custom style override for the box
+     * Custom style override (uses StyleSheet.flatten for web compatibility)
      */
-    style?: LooseStyle;
+    style?: StyleProp<ViewStyle>;
     /**
-     * Style for the label row container
+     * Style for the label text
      */
-    labelStyle?: LooseStyle;
+    labelStyle?: StyleProp<ViewStyle>;
     /**
      * Whether the field is required (shows asterisk in label)
      */
     required?: boolean;
-    /** Forwarded accessibility label (defaults to `label`). */
-    "aria-label"?: string;
-    /** Accessibility label (RN-API alias of aria-label). */
-    accessibilityLabel?: string;
-    /** Forwarded test id (also accepts data-testid). */
-    testID?: string;
-    "data-testid"?: string;
 }
-declare function Checkbox({ size, label, indeterminate, error, style: styleOverride, labelStyle, required, checked, onCheckedChange, disabled, "aria-label": ariaLabelProp, accessibilityLabel, testID, "data-testid": dataTestId, }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ size, label, indeterminate, error, style: styleOverride, labelStyle, required, checked, onCheckedChange, disabled, ...props }: CheckboxProps): React.JSX.Element;
 export { Checkbox };

package/dist/components/Checkbox.js

@@ -1,102 +1,105 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { css, html } from "react-strict-dom";
+import { useCallback, useEffect, useRef } from "react";
+import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 import { Icon } from "./Icon.js";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { spacing } from "../constants/spacing.js";
 import { hapticLight } from "../lib/haptics.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
-import { sanitizeWebStyle } from "../lib/styles.js";
+import * as CheckboxPrimitive from "@rn-primitives/checkbox";
+const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
-    sm: { size: 16, iconSize: 12 },
-    md: { size: 20, iconSize: 16 },
-    lg: { size: 24, iconSize: 20 },
+    sm: { size: 16, iconSize: 12, strokeWidth: 2.5 },
+    md: { size: 20, iconSize: 16, strokeWidth: 3 },
+    lg: { size: 24, iconSize: 20, strokeWidth: 3.5 },
 };
-const styles = css.create({
-    // borderRadius literal (4) = spacing.radiusSm.
-    box: (size, borderColor, backgroundColor) => ({
-        width: size,
-        height: size,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor,
-        backgroundColor,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 0,
-        margin: 0,
-        appearance: "none",
-        cursor: "pointer",
-    }),
-    disabledBox: { opacity: 0.5, cursor: "not-allowed" },
-    indicator: (opacity, animated) => ({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        opacity,
-        transitionProperty: animated ? "opacity" : "none",
-        transitionDuration: animated ? "0.06s" : "0s",
-    }),
-    // minHeight literal (44) = spacing.touchTarget; gap (8) = spacing.sm.
-    container: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 8,
-        minHeight: 44,
-        appearance: "none",
-        backgroundColor: "transparent",
-        borderWidth: 0,
-        padding: 0,
-        margin: 0,
-        textAlign: "inherit",
-        cursor: "pointer",
-    },
-    disabledContainer: { cursor: "not-allowed" },
-    labelContainer: { flexGrow: 1, flexShrink: 1, flexBasis: "0%" },
-});
-const LABEL_TEXT_STYLE = { fontSize: 14 };
-function Checkbox({ size = "md", label, indeterminate = false, error = false, style: styleOverride, labelStyle, required = false, checked, onCheckedChange, disabled, "aria-label": ariaLabelProp, accessibilityLabel, testID, "data-testid": dataTestId, }) {
+function Checkbox({ size = "md", label, indeterminate = false, error = false, style: styleOverride, labelStyle, required = false, checked, onCheckedChange, disabled, ...props }) {
     const { theme, getContrastingColor } = useTheme();
-    const ariaLabel = ariaLabelProp ?? accessibilityLabel;
     const reduceMotion = useReducedMotion();
     const sizeConfig = SIZE_CONFIGS[size];
+    // Simple fast opacity for the checkmark icon
+    const checkOpacity = useRef(new Animated.Value(checked || indeterminate ? 1 : 0)).current;
     const isVisuallyChecked = !!checked || indeterminate;
-    const toggle = () => {
-        if (disabled)
-            return;
-        const next = !checked;
+    const animateCheckOpacity = useCallback((nextVisible) => {
+        Animated.timing(checkOpacity, {
+            toValue: nextVisible ? 1 : 0,
+            duration: reduceMotion ? 0 : 60,
+            useNativeDriver: true,
+        }).start();
+    }, [checkOpacity, reduceMotion]);
+    useEffect(() => {
+        animateCheckOpacity(isVisuallyChecked);
+    }, [animateCheckOpacity, isVisuallyChecked]);
+    const wrappedOnCheckedChange = (next) => {
         if (next)
             hapticLight();
+        animateCheckOpacity(next);
         onCheckedChange?.(next);
     };
-    // Dynamic border color with sufficient contrast against the background.
+    // Dynamic border color with sufficient contrast against background
     const borderColor = error
         ? theme.colors.destructive
         : isVisuallyChecked
             ? theme.colors.primary
             : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
-    const ariaChecked = indeterminate ? "mixed" : !!checked;
-    const boxStyle = [
-        styles.box(sizeConfig.size, borderColor, isVisuallyChecked ? theme.colors.primary : theme.colors.background),
-        disabled ? styles.disabledBox : null,
-        sanitizeWebStyle(styleOverride),
-    ];
-    const indicator = (_jsx(html.span, { style: styles.indicator(isVisuallyChecked ? 1 : 0, !reduceMotion), children: _jsx(Icon, { name: indeterminate ? "minus" : "check", size: sizeConfig.iconSize, color: theme.colors.primaryForeground, decorative: true }) }));
-    // Without a label the box itself is the interactive checkbox control.
+    // 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: {
+            ...styles.box,
+            borderColor,
+            backgroundColor: isVisuallyChecked ? theme.colors.primary : theme.colors.background,
+            width: sizeConfig.size,
+            height: sizeConfig.size,
+            opacity: disabled ? 0.5 : 1,
+            ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
+            ...(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: { opacity: checkOpacity }, 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 (_jsx(html.button, { type: "button", role: "checkbox", "aria-checked": ariaChecked, "aria-disabled": disabled, "aria-label": ariaLabel, disabled: disabled, "data-testid": dataTestId ?? testID, onClick: toggle, style: boxStyle, children: indicator }));
+        return checkboxElement;
     }
-    // With a label the whole row is the control; the box is a decorative visual.
-    return (_jsxs(html.button, { type: "button", role: "checkbox", "aria-checked": ariaChecked, "aria-disabled": disabled, "aria-label": ariaLabel ?? label, disabled: disabled, "data-testid": dataTestId ?? testID, onClick: toggle, style: [
-            styles.container,
-            disabled ? styles.disabledContainer : null,
-            sanitizeWebStyle(labelStyle),
-        ], children: [_jsx(html.span, { style: boxStyle, children: indicator }), _jsx(html.span, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: {
-                        ...LABEL_TEXT_STYLE,
-                        color: error ? theme.colors.destructive : theme.colors.text,
-                        opacity: disabled ? 0.5 : 1,
-                    }, children: [label, required && (_jsx(StyledText, { selectable: false, fontWeight: "bold", style: { color: theme.colors.destructive }, children: " *" }))] }) })] }));
+    // 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, { selectable: false, style: [
+                        styles.label,
+                        { color: theme.colors.text },
+                        disabled && styles.disabledLabel,
+                        error && { color: theme.colors.destructive },
+                    ], children: [label, required && (_jsx(StyledText, { selectable: false, style: [styles.required, { color: theme.colors.destructive }], children: " *" }))] }) })] }));
 }
+const styles = StyleSheet.create({
+    box: {
+        borderRadius: spacing.radiusSm,
+        borderWidth: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+        minHeight: spacing.touchTarget,
+    },
+    labelContainer: {
+        flex: 1,
+    },
+    label: {
+        fontSize: 14,
+    },
+    disabledLabel: {
+        opacity: 0.5,
+    },
+    required: {
+        fontWeight: "bold",
+    },
+});
 export { Checkbox };

package/dist/components/Collapsible.d.ts

@@ -1,68 +1,68 @@
 import * as React from "react";
-import { type LooseStyle } from "../lib/styles";
-export interface CollapsibleProps {
-    /** Controlled open state. */
-    open?: boolean;
-    /** Uncontrolled initial open state. */
-    defaultOpen?: boolean;
-    /** Open-state change handler. */
-    onOpenChange?: (open: boolean) => void;
-    /** Disables the trigger. */
-    disabled?: boolean;
-    children?: React.ReactNode;
-    /** Custom style override for the root container. */
-    style?: LooseStyle;
-}
+import * as CollapsiblePrimitive from "@rn-primitives/collapsible";
 /**
- * Collapsible Component (react-strict-dom)
- *
- * A wrapper component that provides expand/collapse functionality. The trigger
- * toggles a `shown` boolean shared via context; the content mounts only while
- * open (or always, when `forceMount`).
+ * 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>
- *     <StyledText>Toggle</StyledText>
+ *     <SansSerifText>Toggle</SansSerifText>
  *   </CollapsibleTrigger>
  *   <CollapsibleContent>
- *     <StyledText>Content that expands and collapses</StyledText>
+ *     <SansSerifText>Content that expands and collapses</SansSerifText>
  *   </CollapsibleContent>
  * </Collapsible>
  * ```
  */
-declare function Collapsible({ open: openProp, defaultOpen, onOpenChange, disabled, children, style, }: CollapsibleProps): React.JSX.Element;
-export interface CollapsibleTriggerProps {
-    /** Render the single child as the trigger (clones it, injecting onPress). */
-    asChild?: boolean;
-    /** Disables this trigger only. */
-    disabled?: boolean;
-    children?: React.ReactNode;
-    /** Custom style override. */
-    style?: LooseStyle;
-}
+type CollapsibleProps = CollapsiblePrimitive.RootProps;
+declare function Collapsible({ children, ...props }: CollapsibleProps): React.JSX.Element;
 /**
  * CollapsibleTrigger Component
- * The element that toggles the collapsible state. Supports `asChild` to use a
- * custom interactive child (e.g. Button) as the trigger.
+ * 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>
+ * ```
  */
-declare function CollapsibleTrigger({ asChild, disabled: triggerDisabled, style, children }: CollapsibleTriggerProps): React.JSX.Element;
-export interface CollapsibleContentProps {
-    /**
-     * Keep the content mounted (hidden) when closed instead of unmounting it.
-     * Default: false (content unmounts when closed).
-     */
-    forceMount?: boolean;
-    children?: React.ReactNode;
-    /** Custom style override. */
-    style?: LooseStyle;
-}
+type CollapsibleTriggerProps = CollapsiblePrimitive.TriggerProps;
+declare function CollapsibleTrigger({ style: styleOverride, ...props }: CollapsibleTriggerProps): React.JSX.Element;
 /**
  * CollapsibleContent Component
- * The content that expands and collapses. Unmounts when closed unless
- * `forceMount` is set, in which case it stays mounted but hidden.
+ * 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>
+ * ```
  */
-declare function CollapsibleContent({ forceMount, style, children }: CollapsibleContentProps): React.JSX.Element | null;
+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): React.JSX.Element;
 export { Collapsible, CollapsibleContent, CollapsibleTrigger };
+export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps };