@thewhileloop/whileui 1.2.2 → 2.0.0

package/dist/components/button/button.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, type PressableProps, type TextProps, type ViewProps } from 'react-native';
+import { View, type TextProps, type ViewProps } from 'react-native';
+import { type PressableProps } from '../pressable';
 import { type VariantProps } from '../../lib/tv';
 declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
@@ -16,7 +17,7 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
     };
-}, undefined, "flex-row items-center justify-center gap-2 rounded-md", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "flex-row items-center justify-center gap-2", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
@@ -76,7 +77,7 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
     };
-}, undefined, "flex-row items-center justify-center gap-2 rounded-md", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "flex-row items-center justify-center gap-2", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
@@ -122,7 +123,7 @@ declare const buttonTextVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
     };
-}, undefined, "text-sm font-medium text-center", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-medium text-center", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
@@ -182,7 +183,7 @@ declare const buttonTextVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
     };
-}, undefined, "text-sm font-medium text-center", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-medium text-center", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
@@ -213,10 +214,12 @@ declare const buttonTextVariants: import("tailwind-variants").TVReturnType<{
         icon: string;
     };
 }>, unknown, unknown, undefined>>;
-export interface ButtonProps extends Omit<PressableProps, 'children'>, VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends Omit<PressableProps, 'children' | 'feedback' | 'loading'>, VariantProps<typeof buttonVariants> {
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
+    /** Shows a centered spinner, exposes busy state, and prevents interaction. */
+    loading?: boolean;
 }
 export interface ButtonTextProps extends TextProps {
     variant?: VariantProps<typeof buttonTextVariants>['variant'];
@@ -225,16 +228,14 @@ export interface ButtonTextProps extends TextProps {
 }
 export interface ButtonIconProps extends ViewProps {
     className?: string;
-    position?: 'left' | 'right';
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<View>>;
-declare function ButtonText({ className, variant: variantProp, size: sizeProp, style, ...props }: ButtonTextProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonText({ className, variant: variantProp, size: sizeProp, style, ...props }: ButtonTextProps): React.JSX.Element;
 declare namespace ButtonText {
     var displayName: string;
 }
-declare function ButtonIcon({ className, position, ...props }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonIcon({ className, ...props }: ButtonIconProps): React.JSX.Element;
 declare namespace ButtonIcon {
     var displayName: string;
 }
 export { Button, ButtonText, ButtonIcon, buttonVariants, buttonTextVariants };
-//# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.js

@@ -1,31 +1,35 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext } from 'react';
-import { Pressable, Text, View, } from 'react-native';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext, useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { Pressable } from '../pressable';
+import { Spinner } from '../spinner';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
 import { tv } from '../../lib/tv';
 import { useResolveFontFamily } from '../../lib/font-context';
-import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { controlRecipe, typographyStyle } from '../../lib/recipes';
 const ButtonContext = createContext({
     variant: 'default',
     size: 'default',
 });
-// ─── Variants ────────────────────────────────────────────────
 const buttonVariants = tv({
-    base: 'flex-row items-center justify-center gap-2 rounded-md',
+    base: 'flex-row items-center justify-center gap-2',
     variants: {
         variant: {
-            default: 'bg-primary active:bg-primary-active',
-            destructive: 'bg-destructive active:bg-destructive-active',
-            outline: 'border border-input bg-background active:bg-accent',
-            secondary: 'bg-secondary active:bg-secondary-active',
-            ghost: 'active:bg-accent',
+            default: 'bg-primary',
+            destructive: 'bg-destructive',
+            outline: 'border border-input bg-background',
+            secondary: 'bg-secondary',
+            ghost: 'bg-transparent',
             link: '',
         },
         size: {
-            default: 'h-10 px-4 py-2',
-            sm: 'h-9 rounded-md px-3',
-            lg: 'h-12 rounded-md px-6',
-            icon: 'h-11 w-11',
+            default: '',
+            sm: '',
+            lg: '',
+            icon: '',
         },
     },
     defaultVariants: {
@@ -33,8 +37,24 @@ const buttonVariants = tv({
         size: 'default',
     },
 });
+function getButtonStyleTokens(visual, size, variant) {
+    if (variant === 'link') {
+        return undefined;
+    }
+    const recipe = controlRecipe(visual, size);
+    if (variant === 'outline') {
+        return { ...recipe, borderWidth: visual.borderWidthControl };
+    }
+    return recipe;
+}
+const BUTTON_TEXT_ROLE = {
+    default: 'label',
+    sm: 'caption',
+    lg: 'body',
+    icon: 'label',
+};
 const buttonTextVariants = tv({
-    base: 'text-sm font-medium text-center',
+    base: 'font-medium text-center',
     variants: {
         variant: {
             default: 'text-primary-foreground',
@@ -45,10 +65,10 @@ const buttonTextVariants = tv({
             link: 'text-primary underline',
         },
         size: {
-            default: 'text-sm',
-            sm: 'text-xs',
-            lg: 'text-base',
-            icon: 'text-sm',
+            default: '',
+            sm: '',
+            lg: '',
+            icon: '',
         },
     },
     defaultVariants: {
@@ -56,30 +76,39 @@ const buttonTextVariants = tv({
         size: 'default',
     },
 });
-// ─── Components ──────────────────────────────────────────────
-const Button = React.forwardRef(({ className, variant = 'default', size = 'default', disabled, children, style: styleProp, ...props }, ref) => {
-    const interaction = useInteractionTokens();
-    const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
-        disabled: Boolean(disabled),
-        pressedVariant: variant === 'link' ? 'none' : 'strong',
-    });
-    return (_jsx(ButtonContext.Provider, { value: { variant, size }, children: _jsx(Pressable, { ref: ref, className: cn(buttonVariants({ variant, size }), className), style: interactiveStyle, disabled: disabled, ...props, children: children }) }));
+const Button = React.forwardRef(({ className, variant = 'default', size = 'default', disabled, loading = false, children, style: styleProp, ...props }, ref) => {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
+    const tokenStyle = getButtonStyleTokens(visual, size, variant);
+    const contextValue = useMemo(() => ({ variant, size }), [size, variant]);
+    const spinnerColor = variant === 'default'
+        ? colors.primaryForeground
+        : variant === 'destructive'
+            ? colors.destructiveForeground
+            : variant === 'secondary'
+                ? colors.secondaryForeground
+                : variant === 'link'
+                    ? colors.primary
+                    : colors.foreground;
+    return (_jsx(ButtonContext.Provider, { value: contextValue, children: _jsx(Pressable, { ref: ref, accessibilityRole: variant === 'link' ? 'link' : 'button', className: cn(buttonVariants({ variant, size }), focusRing, className), style: (state) => [
+                typeof styleProp === 'function' ? styleProp(state) : styleProp,
+                tokenStyle ?? null,
+            ], disabled: disabled, loading: loading, feedback: variant === 'link' ? 'none' : 'strong', ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsx(View, { className: "flex-row items-center justify-center gap-2 opacity-0", children: children }), _jsx(View, { pointerEvents: "none", accessible: false, importantForAccessibility: "no-hide-descendants", className: "absolute inset-0 items-center justify-center", children: _jsx(Spinner, { color: spinnerColor, accessible: false }) })] })) : (children) }) }));
 });
 Button.displayName = 'Button';
-// ─── Sub-components ──────────────────────────────────────────
 function ButtonText({ className, variant: variantProp, size: sizeProp, style, ...props }) {
     const context = useContext(ButtonContext);
+    const visual = useVisualTokens();
     const variant = variantProp ?? context.variant;
     const size = sizeProp ?? context.size;
     const resolved = cn(buttonTextVariants({ variant, size }), className);
     const font = useResolveFontFamily(resolved);
-    return (_jsx(Text, { className: font ? font.className : resolved, style: font ? [font.style, style] : style, ...props }));
+    const typography = typographyStyle(visual, BUTTON_TEXT_ROLE[size ?? 'default'] ?? 'label');
+    return (_jsx(Text, { className: font ? font.className : resolved, style: font ? [typography, font.style, style] : [typography, style], ...props }));
 }
 ButtonText.displayName = 'ButtonText';
-function ButtonIcon({ className, position, ...props }) {
+function ButtonIcon({ className, ...props }) {
     return _jsx(View, { className: cn('items-center justify-center', className), ...props });
 }
 ButtonIcon.displayName = 'ButtonIcon';
-// ─── Exports ─────────────────────────────────────────────────
 export { Button, ButtonText, ButtonIcon, buttonVariants, buttonTextVariants };
-//# sourceMappingURL=button.js.map

package/dist/components/button/index.d.ts

@@ -1,2 +1 @@
 export { Button, ButtonText, ButtonIcon, buttonVariants, buttonTextVariants, type ButtonProps, type ButtonTextProps, type ButtonIconProps, } from './button';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.js

@@ -1,2 +1 @@
 export { Button, ButtonText, ButtonIcon, buttonVariants, buttonTextVariants, } from './button';
-//# sourceMappingURL=index.js.map

package/dist/components/card/card.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { View, type ViewProps, type TextProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
+import { type ShadowTier } from '../../lib/recipes';
 declare const cardVariants: import("tailwind-variants").TVReturnType<{
     padding: {
         none: string;
@@ -13,7 +14,7 @@ declare const cardVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "rounded-xl border border-border bg-card", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "border border-border bg-card", import("tailwind-variants/dist/config.js").TVConfig<{
     padding: {
         none: string;
         sm: string;
@@ -57,7 +58,7 @@ declare const cardVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "rounded-xl border border-border bg-card", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "border border-border bg-card", import("tailwind-variants/dist/config.js").TVConfig<{
     padding: {
         none: string;
         sm: string;
@@ -81,6 +82,8 @@ declare const cardVariants: import("tailwind-variants").TVReturnType<{
     };
 }>, unknown, unknown, undefined>>;
 export interface CardProps extends ViewProps, VariantProps<typeof cardVariants>, FrostedSurfaceProps {
+    /** Elevation tier; 'sm' by default, 'none' for flat cards. */
+    shadow?: ShadowTier;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<View>>;
 export interface CardHeaderProps extends ViewProps {
@@ -99,4 +102,3 @@ export interface CardFooterProps extends ViewProps {
 }
 declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<View>>;
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants };
-//# sourceMappingURL=card.d.ts.map

package/dist/components/card/card.js

@@ -5,15 +5,17 @@ import { Text } from '../text';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useFrostedSurface } from '../../lib/frosted-surface';
-// ─── Card ────────────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { shadowStyle, surfacePadding, typographyStyle } from '../../lib/recipes';
 const cardVariants = tv({
-    base: 'rounded-xl border border-border bg-card',
+    base: 'border border-border bg-card',
     variants: {
         padding: {
-            none: 'p-0',
-            sm: 'p-4',
-            default: 'p-6',
-            lg: 'p-8',
+            none: '',
+            sm: '',
+            default: '',
+            lg: '',
         },
         unstyled: {
             true: 'rounded-none border-0 bg-transparent shadow-none',
@@ -25,7 +27,9 @@ const cardVariants = tv({
         unstyled: false,
     },
 });
-const Card = React.forwardRef(({ className, padding, unstyled, frosted = false, blurIntensity, blurTintToken, style, children, ...props }, ref) => {
+const Card = React.forwardRef(({ className, padding, unstyled, shadow = 'sm', frosted = false, blurIntensity, blurTintToken, style, children, ...props }, ref) => {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -33,7 +37,17 @@ const Card = React.forwardRef(({ className, padding, unstyled, frosted = false,
         defaultTintToken: 'card',
         defaultBlurPreset: 'subtle',
     });
-    const cardStyle = [frostedSurface.surfaceStyle, style];
+    const effectivePadding = surfacePadding(visual, padding ?? 'default');
+    const cardStyle = [
+        {
+            borderRadius: unstyled ? 0 : visual.radiusXl,
+            padding: unstyled ? 0 : effectivePadding,
+            borderWidth: unstyled ? 0 : visual.borderWidthHairline,
+        },
+        unstyled ? null : shadowStyle(visual, colors, shadow),
+        frostedSurface.surfaceStyle,
+        style,
+    ];
     return (_jsxs(View, { ref: ref, className: cn(cardVariants({ padding, unstyled }), frosted && 'relative overflow-hidden bg-transparent', className), style: cardStyle, ...props, children: [frostedSurface.overlay, children] }));
 });
 Card.displayName = 'Card';
@@ -41,12 +55,14 @@ const CardHeader = React.forwardRef(({ className, ...props }, ref) => {
     return _jsx(View, { ref: ref, className: cn('pb-3', className), ...props });
 });
 CardHeader.displayName = 'CardHeader';
-const CardTitle = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx(Text, { ref: ref, className: cn('text-xl font-semibold text-card-foreground tracking-tight', className), ...props }));
+const CardTitle = React.forwardRef(({ className, style, ...props }, ref) => {
+    const visual = useVisualTokens();
+    return (_jsx(Text, { ref: ref, className: cn('font-semibold text-card-foreground tracking-tight', className), style: [typographyStyle(visual, 'title'), style], ...props }));
 });
 CardTitle.displayName = 'CardTitle';
-const CardDescription = React.forwardRef(({ className, ...props }, ref) => {
-    return _jsx(Text, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props });
+const CardDescription = React.forwardRef(({ className, style, ...props }, ref) => {
+    const visual = useVisualTokens();
+    return (_jsx(Text, { ref: ref, className: cn('text-muted-foreground', className), style: [typographyStyle(visual, 'label'), style], ...props }));
 });
 CardDescription.displayName = 'CardDescription';
 const CardContent = React.forwardRef(({ className, ...props }, ref) => {
@@ -57,6 +73,4 @@ const CardFooter = React.forwardRef(({ className, ...props }, ref) => {
     return _jsx(View, { ref: ref, className: cn('flex-row items-center pt-1', className), ...props });
 });
 CardFooter.displayName = 'CardFooter';
-// ─── Exports ─────────────────────────────────────────────────
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants };
-//# sourceMappingURL=card.js.map

package/dist/components/card/index.d.ts

@@ -1,2 +1 @@
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants, type CardProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, } from './card';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.js

@@ -1,2 +1 @@
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants, } from './card';
-//# sourceMappingURL=index.js.map

package/dist/components/checkbox/checkbox.d.ts

@@ -6,9 +6,8 @@ export interface CheckboxProps extends Omit<ViewProps, 'children'> {
     disabled?: boolean;
     className?: string;
 }
-declare function Checkbox({ checked: controlledChecked, defaultChecked, onCheckedChange, disabled, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare function Checkbox({ checked: controlledChecked, defaultChecked, onCheckedChange, disabled, className, ...props }: CheckboxProps): import("react").JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }
 export { Checkbox };
-//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox/checkbox.js

@@ -2,15 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Pressable, View } from 'react-native';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
+import { useVisualTokens } from '../../lib/visual-tokens';
 function Checkbox({ checked: controlledChecked, defaultChecked = false, onCheckedChange, disabled = false, className, ...props }) {
     const [internalChecked, setInternalChecked] = useState(defaultChecked);
     const isChecked = controlledChecked ?? internalChecked;
     const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
     const interactiveStyle = withInteractivePressableStyle(undefined, interaction, {
         disabled,
         pressedVariant: 'default',
     });
+    const size = Math.max(18, Math.round(visual.controlHeightSm * 0.55));
+    const checkSize = Math.max(8, Math.round(size * 0.5));
     const handleToggle = () => {
         if (disabled)
             return;
@@ -18,8 +23,16 @@ function Checkbox({ checked: controlledChecked, defaultChecked = false, onChecke
         setInternalChecked(newValue);
         onCheckedChange?.(newValue);
     };
-    return (_jsx(Pressable, { onPress: handleToggle, disabled: disabled, style: interactiveStyle, hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, children: _jsx(View, { className: cn('h-5 w-5 items-center justify-center rounded border', isChecked ? 'border-primary bg-primary' : 'border-border bg-muted', className), ...props, children: isChecked && _jsx(View, { className: "h-2.5 w-2.5 rounded-sm bg-primary-foreground" }) }) }));
+    return (_jsx(Pressable, { onPress: handleToggle, disabled: disabled, style: interactiveStyle, hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, "aria-checked": isChecked, children: _jsx(View, { className: cn('items-center justify-center', isChecked ? 'border-primary bg-primary' : 'border-border bg-muted', focusRing, className), style: {
+                width: size,
+                height: size,
+                borderWidth: visual.borderWidthControl,
+                borderRadius: Math.max(6, Math.round(visual.radiusSm * 0.7)),
+            }, ...props, children: isChecked && (_jsx(View, { className: "bg-primary-foreground", style: {
+                    width: checkSize,
+                    height: checkSize,
+                    borderRadius: Math.max(3, Math.round(visual.radiusSm * 0.35)),
+                } })) }) }));
 }
 Checkbox.displayName = 'Checkbox';
 export { Checkbox };
-//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/index.d.ts

@@ -1,2 +1 @@
 export { Checkbox, type CheckboxProps } from './checkbox';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.js

@@ -1,2 +1 @@
 export { Checkbox } from './checkbox';
-//# sourceMappingURL=index.js.map

package/dist/components/collapsible/collapsible.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { type ViewProps, type PressableProps } from 'react-native';
 interface CollapsibleContextValue {
     isOpen: boolean;
@@ -20,17 +21,16 @@ export interface CollapsibleContentProps extends ViewProps {
     className?: string;
     forceMount?: boolean;
 }
-declare function Collapsible({ defaultOpen, open: controlledOpen, onOpenChange, disabled, className, children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+declare function Collapsible({ defaultOpen, open: controlledOpen, onOpenChange, disabled, className, children, ...props }: CollapsibleProps): React.JSX.Element;
 declare namespace Collapsible {
     var displayName: string;
 }
-declare function CollapsibleTrigger({ className, children, asChild, onPress, ...props }: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleTrigger({ className, children, asChild, onPress, ...props }: CollapsibleTriggerProps): React.JSX.Element;
 declare namespace CollapsibleTrigger {
     var displayName: string;
 }
-declare function CollapsibleContent({ className, children, forceMount, ...props }: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function CollapsibleContent({ className, children, forceMount, ...props }: CollapsibleContentProps): React.JSX.Element | null;
 declare namespace CollapsibleContent {
     var displayName: string;
 }
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
-//# sourceMappingURL=collapsible.d.ts.map

package/dist/components/collapsible/collapsible.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useState } from 'react';
-import { View, Pressable } from 'react-native';
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { View, Pressable, } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, } from 'react-native-reanimated';
 import { cn } from '../../lib/cn';
 const CollapsibleContext = createContext({
@@ -8,22 +8,21 @@ const CollapsibleContext = createContext({
     toggle: () => { },
     disabled: false,
 });
-// Hook to access collapsible state
 export function useCollapsible() {
     return useContext(CollapsibleContext);
 }
-// ─── Components ──────────────────────────────────────────────
 function Collapsible({ defaultOpen = false, open: controlledOpen, onOpenChange, disabled = false, className, children, ...props }) {
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const isOpen = controlledOpen ?? internalOpen;
-    const toggle = () => {
+    const toggle = useCallback(() => {
         if (disabled)
             return;
         const next = !isOpen;
         setInternalOpen(next);
         onOpenChange?.(next);
-    };
-    return (_jsx(CollapsibleContext.Provider, { value: { isOpen, toggle, disabled }, children: _jsx(View, { className: cn(className), ...props, children: children }) }));
+    }, [disabled, isOpen, onOpenChange]);
+    const contextValue = useMemo(() => ({ isOpen, toggle, disabled }), [disabled, isOpen, toggle]);
+    return (_jsx(CollapsibleContext.Provider, { value: contextValue, children: _jsx(View, { className: cn(className), ...props, children: children }) }));
 }
 function CollapsibleTrigger({ className, children, asChild, onPress, ...props }) {
     const { toggle, disabled } = useContext(CollapsibleContext);
@@ -31,11 +30,10 @@ function CollapsibleTrigger({ className, children, asChild, onPress, ...props })
         onPress?.(e);
         toggle();
     };
-    // When asChild is true, wrap child in an invisible pressable overlay
     if (asChild && React.isValidElement(children)) {
-        return (_jsx(Pressable, { onPress: handlePress, disabled: disabled, className: cn(className), ...props, children: children }));
+        return (_jsx(Pressable, { accessibilityRole: "button", onPress: handlePress, disabled: disabled, className: cn(className), ...props, children: children }));
     }
-    return (_jsx(Pressable, { className: cn(className), onPress: handlePress, disabled: disabled, ...props, children: children }));
+    return (_jsx(Pressable, { accessibilityRole: "button", className: cn(className), onPress: handlePress, disabled: disabled, ...props, children: children }));
 }
 function CollapsibleContent({ className, children, forceMount, ...props }) {
     const { isOpen } = useContext(CollapsibleContext);
@@ -57,4 +55,3 @@ Collapsible.displayName = 'Collapsible';
 CollapsibleTrigger.displayName = 'CollapsibleTrigger';
 CollapsibleContent.displayName = 'CollapsibleContent';
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
-//# sourceMappingURL=collapsible.js.map

package/dist/components/collapsible/index.d.ts

@@ -1,2 +1 @@
 export { Collapsible, CollapsibleTrigger, CollapsibleContent, useCollapsible, type CollapsibleProps, type CollapsibleTriggerProps, type CollapsibleContentProps, } from './collapsible';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/collapsible/index.js

@@ -1,2 +1 @@
 export { Collapsible, CollapsibleTrigger, CollapsibleContent, useCollapsible, } from './collapsible';
-//# sourceMappingURL=index.js.map