@sincpro/mobile-ui 1.0.1 → 2.0.0

package/dist/Actions/Actions.Button.d.ts

@@ -1,5 +1,6 @@
 import { type VariantProps } from "../theme/tw.js";
 import type React from "react";
+import type { AccessibilityProps } from "react-native";
 declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: "bg-accent";
@@ -10,18 +11,18 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
         true: "opacity-70";
     };
-}, undefined, "rounded-md items-center justify-center flex-row min-h-[44px]", {
+}, undefined, "rounded-md items-center justify-center flex-row min-h-[48px]", {
     variant: {
         primary: "bg-accent";
         accent: "bg-transparent";
@@ -31,12 +32,12 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
@@ -52,12 +53,12 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
@@ -128,7 +129,7 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
         true: "opacity-70";
     };
 }, undefined>>;
-export interface ButtonProps extends VariantProps<typeof button> {
+export interface ButtonProps extends VariantProps<typeof button>, AccessibilityProps {
     title: string;
     onPress?: () => void;
     confirm?: string;
@@ -136,14 +137,16 @@ export interface ButtonProps extends VariantProps<typeof button> {
     disabled?: boolean;
     className?: string;
     icon?: React.ReactNode;
+    testID?: string;
 }
-export interface ButtonIconProps extends VariantProps<typeof buttonIcon> {
+export interface ButtonIconProps extends VariantProps<typeof buttonIcon>, AccessibilityProps {
     icon: string;
     onPress?: () => void;
     confirm?: string;
     loading?: boolean;
     disabled?: boolean;
     className?: string;
+    testID?: string;
 }
 declare const ButtonWithIcon: React.FC<ButtonProps> & {
     Icon: React.FC<ButtonIconProps>;

package/dist/Actions/Actions.Button.js

@@ -6,10 +6,9 @@ import { tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useCallback } from "react";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
-import { runOnJS } from "react-native-reanimated";
 // ─── Style variants ───────────────────────────────────────────────────────────
 const button = tv({
-    base: "rounded-md items-center justify-center flex-row min-h-[44px]",
+    base: "rounded-md items-center justify-center flex-row min-h-[48px]",
     variants: {
         variant: {
             primary: "bg-accent",
@@ -20,12 +19,12 @@ const button = tv({
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
             flat: "bg-text-primary/10",
-            link: "bg-transparent min-h-0",
+            link: "bg-transparent",
             transparent: "bg-transparent border border-border-light",
         },
         size: {
-            small: "py-1.5 px-3 min-h-[36px]",
-            medium: "py-2.5 px-4 min-h-[44px]",
+            small: "py-1.5 px-3 min-h-[48px]",
+            medium: "py-2.5 px-4 min-h-[48px]",
             large: "py-3 px-5 min-h-[48px]",
         },
         disabled: {
@@ -152,7 +151,7 @@ const textVariantMap = {
     medium: "button",
     large: "buttonLarge",
 };
-const Button = ({ title, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, }) => {
+const Button = ({ title, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, testID, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
     const { show, hide } = useConfirmationContext();
     const textColorClass = textColor({ variant: variant, disabled });
     const loadingColorValue = getLoadingColor(variant);
@@ -166,22 +165,30 @@ const Button = ({ title, onPress, confirm, variant = "primary", size = "medium",
                 cancelText: "Cancelar",
                 onConfirm: () => {
                     hide();
-                    runOnJS(onPress)();
+                    onPress();
                 },
                 onCancel: () => hide(),
             });
         }
         else if (onPress) {
-            runOnJS(onPress)();
+            onPress();
         }
     }, [onPress, confirm, show, hide]);
     if (variant === "link") {
-        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
+        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
+                ...accessibilityState,
+                disabled: disabled || loading,
+                busy: loading,
+            }, style: { minHeight: 48, minWidth: 48, justifyContent: "center" }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { allowFontScaling: true, className: textColorClass, style: { flexShrink: 1 }, variant: textVariantValue, children: title })) }));
     }
     const emphasize = variant === "primary" || variant === "cta";
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: false, className: textColorClass, ellipsizeMode: "tail", numberOfLines: 1, semibold: emphasize, variant: textVariantValue, children: title })] })) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: true, className: textColorClass, semibold: emphasize, style: { flexShrink: 1 }, variant: textVariantValue, children: title })] })) }));
 };
-const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, }) => {
+const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, testID, accessibilityState, ...accessibilityProps }) => {
     const { show, hide } = useConfirmationContext();
     const iconColorValue = getIconColor(variant, disabled);
     const iconSizeValue = iconSizeMap[size] ?? 20;
@@ -195,16 +202,20 @@ const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "mediu
                 cancelText: "Cancelar",
                 onConfirm: () => {
                     hide();
-                    runOnJS(onPress)();
+                    onPress();
                 },
                 onCancel: () => hide(),
             });
         }
         else if (onPress) {
-            runOnJS(onPress)();
+            onPress();
         }
     }, [onPress, confirm, show, hide]);
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
 };
 const ButtonWithIcon = Object.assign(Button, { Icon: ButtonIcon });
 export default ButtonWithIcon;

package/dist/Actions/Actions.Dock.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+export interface DockProps {
+    primaryAction: ReactNode;
+    children: ReactNode;
+    summary?: ReactNode;
+    title?: string;
+    moreLabel?: string;
+    collapseLabel?: string;
+    backdropLabel?: string;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    dismissOnBackdrop?: boolean;
+    maxExpandedHeightRatio?: number;
+    placement?: "fixed" | "footer";
+    className?: string;
+    testID?: string;
+}
+declare function Dock({ primaryAction, children, summary, title, moreLabel, collapseLabel, backdropLabel, expanded: controlledExpanded, defaultExpanded, onExpandedChange, dismissOnBackdrop, maxExpandedHeightRatio, placement, className, testID, }: DockProps): import("react").JSX.Element;
+export default Dock;

package/dist/Actions/Actions.Dock.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+/* eslint-disable react-hooks/refs */
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { themeToVars, useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import { vars } from "nativewind";
+import { useEffect, useRef, useState } from "react";
+import { Animated, KeyboardAvoidingView, Modal, PanResponder, Platform, ScrollView, useWindowDimensions, View, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+function Dock({ primaryAction, children, summary, title = "Más opciones", moreLabel = "Más opciones", collapseLabel = "Ocultar opciones", backdropLabel = "Cerrar panel", expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, dismissOnBackdrop = true, maxExpandedHeightRatio = 0.6, placement = "fixed", className, testID, }) {
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    const expanded = controlledExpanded ?? internalExpanded;
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const insets = useSafeAreaInsets();
+    const { height } = useWindowDimensions();
+    const [barHeight, setBarHeight] = useState(0);
+    const translateY = useRef(new Animated.Value(0)).current;
+    const requestExpanded = (next) => {
+        if (next === expanded)
+            return;
+        if (controlledExpanded === undefined)
+            setInternalExpanded(next);
+        onExpandedChange?.(next);
+    };
+    const gestureRef = useRef({ expanded, requestExpanded, reducedMotion });
+    gestureRef.current = { expanded, requestExpanded, reducedMotion };
+    const resolvedRatio = Number.isFinite(maxExpandedHeightRatio)
+        ? Math.min(0.9, Math.max(0.1, maxExpandedHeightRatio))
+        : 0.6;
+    const maxPanelHeight = Math.max(0, Math.min(height * resolvedRatio, height - insets.top - insets.bottom - barHeight));
+    const resetDrag = () => {
+        translateY.stopAnimation();
+        if (gestureRef.current.reducedMotion) {
+            translateY.setValue(0);
+            return;
+        }
+        Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+            damping: 24,
+            stiffness: 260,
+        }).start();
+    };
+    useEffect(() => {
+        translateY.stopAnimation();
+        translateY.setValue(0);
+        return () => translateY.stopAnimation();
+    }, [expanded, reducedMotion, translateY]);
+    const [pan] = useState(() => PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onPanResponderGrant: () => translateY.stopAnimation(),
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderMove: (_, gesture) => {
+            if (gestureRef.current.expanded)
+                translateY.setValue(Math.max(0, gesture.dy));
+        },
+        onPanResponderRelease: (_, gesture) => {
+            const isVertical = Math.abs(gesture.dy) > Math.abs(gesture.dx);
+            const shouldChange = gestureRef.current.expanded
+                ? gesture.dy > 40 || gesture.vy > 0.5
+                : gesture.dy < -40 || gesture.vy < -0.5;
+            if (isVertical && shouldChange) {
+                gestureRef.current.requestExpanded(!gestureRef.current.expanded);
+            }
+            resetDrag();
+        },
+        onPanResponderTerminate: resetDrag,
+    }));
+    const handle = (_jsx(View, { className: "min-h-12 items-center justify-center", ...pan.panHandlers, testID: testID ? `${testID}-handle` : undefined, children: _jsx(View, { className: "h-1 w-10 rounded-full bg-border-strong" }) }));
+    const bar = (_jsxs(View, { className: cn("gap-3 border-t border-border-light bg-bg-card px-4 pb-2", className), onLayout: (event) => setBarHeight(event.nativeEvent.layout.height), testID: testID ? `${testID}-bar` : undefined, children: [!expanded ? handle : null, summary, _jsxs(View, { className: "flex-row items-center gap-3", children: [_jsxs(Pressable, { accessibilityLabel: expanded ? collapseLabel : moreLabel, accessibilityRole: "button", accessibilityState: { expanded }, className: "min-h-12 flex-1 flex-row items-center justify-center gap-1 rounded-lg bg-bg-muted px-3", onPress: () => requestExpanded(!expanded), testID: testID ? `${testID}-more` : undefined, children: [_jsx(Typography.Text, { className: "text-text-primary", variant: "buttonSmall", children: expanded ? collapseLabel : moreLabel }), _jsx(Icon, { color: theme.icon.secondary, name: expanded ? "chevron-down" : "chevron-up", size: 16 })] }), _jsx(View, { className: "flex-1", children: primaryAction })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(View, { className: cn(placement === "fixed" && "absolute bottom-0 left-0 right-0 z-20"), style: expanded ? { height: barHeight } : undefined, testID: testID, children: !expanded ? bar : null }), _jsx(Modal, { animationType: "none", onRequestClose: () => requestExpanded(false), presentationStyle: "overFullScreen", testID: testID ? `${testID}-modal` : undefined, transparent: true, visible: expanded, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : "height", style: { flex: 1 }, testID: testID ? `${testID}-keyboard` : undefined, children: _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1, justifyContent: "flex-end" }, children: [_jsx(Pressable, { accessibilityLabel: backdropLabel, accessibilityRole: "button", className: "absolute inset-0 bg-black/50", disabled: !dismissOnBackdrop, onPress: dismissOnBackdrop ? () => requestExpanded(false) : undefined, testID: testID ? `${testID}-backdrop` : undefined }), _jsxs(View, { onAccessibilityEscape: () => requestExpanded(false), style: [
+                                    vars(themeToVars(theme)),
+                                    {
+                                        paddingBottom: insets.bottom,
+                                        backgroundColor: theme.bg.card,
+                                        maxHeight: height - insets.top,
+                                        flexShrink: 1,
+                                    },
+                                ], children: [_jsx(View, { style: { overflow: "hidden", flexShrink: 1 }, children: _jsxs(Animated.View, { style: {
+                                                maxHeight: maxPanelHeight,
+                                                flexShrink: 1,
+                                                transform: [{ translateY }],
+                                            }, testID: testID ? `${testID}-expanded-content` : undefined, children: [handle, _jsxs(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingBottom: 16 }, keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, style: { flexShrink: 1 }, testID: testID ? `${testID}-scroll` : undefined, children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: "pb-2 text-text-primary", semibold: true, variant: "subtitle", children: title })) : null, children] })] }) }), bar] })] }) }) })] }));
+}
+export default Dock;

package/dist/Actions/Actions.FAB.d.ts

@@ -5,6 +5,7 @@ export interface FABProps {
     position?: "bottom-right" | "bottom-left";
     className?: string;
     testID?: string;
+    accessibilityLabel?: string;
 }
-declare function FAB({ icon, onPress, label, position, className, testID, }: FABProps): import("react").JSX.Element;
+declare function FAB({ icon, onPress, label, position, className, testID, accessibilityLabel, }: FABProps): import("react").JSX.Element;
 export default FAB;

package/dist/Actions/Actions.FAB.js

@@ -5,13 +5,15 @@ import { theme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-function FAB({ icon, onPress, label, position = "bottom-right", className, testID, }) {
+function FAB({ icon, onPress, label, position = "bottom-right", className, testID, accessibilityLabel, }) {
     const insets = useSafeAreaInsets();
-    return (_jsxs(Pressable, { accessibilityLabel: label ?? "Acción", accessibilityRole: "button", className: cn("absolute flex-row items-center justify-center rounded-full bg-primary", label ? "h-14 px-5 gap-2" : "w-14 h-14", className), onPress: onPress, style: {
+    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? label ?? "Acción", accessibilityRole: "button", className: cn("absolute flex-row items-center justify-center rounded-full bg-primary", label ? "min-h-14 px-5 py-3 gap-2" : "w-14 h-14", className), onPress: onPress, style: {
+            minHeight: 56,
+            minWidth: 56,
             bottom: insets.bottom + 16,
             right: position === "bottom-right" ? 16 : undefined,
             left: position === "bottom-left" ? 16 : undefined,
             ...theme.shadow.lg,
-        }, testID: testID, children: [_jsx(Icon, { color: theme.icon.inverse, name: icon, size: 24 }), label ? (_jsx(Typography.Text, { className: "text-text-on-primary font-semibold", children: label })) : null] }));
+        }, testID: testID, children: [_jsx(Icon, { color: theme.icon.inverse, name: icon, size: 24 }), label ? (_jsx(Typography.Text, { className: "text-text-on-primary font-semibold", style: { flexShrink: 1 }, children: label })) : null] }));
 }
 export default FAB;

package/dist/Actions/Actions.FilterButton.d.ts

@@ -3,8 +3,16 @@ export interface FilterButtonProps {
     title: string;
     active: boolean;
     onPress: () => void;
+    variant?: "default" | "mobile";
+    disabled?: boolean;
+    className?: string;
+    testID?: string;
 }
 export declare const FilterButton: FC<FilterButtonProps>;
-export declare function FilterButtonGroup({ children }: {
+export interface FilterButtonGroupProps {
     children: ReactNode;
-}): import("react").JSX.Element;
+    layout?: "row" | "scroll" | "wrap";
+    className?: string;
+    testID?: string;
+}
+export declare function FilterButtonGroup({ children, layout, className, testID, }: FilterButtonGroupProps): import("react").JSX.Element;

package/dist/Actions/Actions.FilterButton.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { tv } from "../theme/tw.js";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { TouchableOpacity, View } from "react-native";
+import { ScrollView, TouchableOpacity, View } from "react-native";
 const filterButton = tv({
     base: "rounded-lg items-center justify-center py-2 px-3 min-h-[36px]",
     variants: {
@@ -22,7 +25,19 @@ const filterText = tv({
     },
     defaultVariants: { active: false },
 });
-export const FilterButton = ({ title, active, onPress }) => (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: filterButton({ active }), onPress: onPress, children: _jsx(Typography.Text, { className: filterText({ active }), variant: "buttonSmall", children: title }) }));
-export function FilterButtonGroup({ children }) {
-    return _jsx(View, { className: "flex-row gap-2 p-3", children: children });
+export const FilterButton = ({ title, active, onPress, variant = "default", disabled = false, className, testID, }) => {
+    const theme = useTheme();
+    if (variant === "mobile") {
+        return (_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { selected: active, disabled }, activeOpacity: 1 - theme.state.press, className: cn("flex-row items-center self-start rounded-full px-3 py-2 gap-2 max-w-full", active ? "bg-container-primary" : "bg-bg-muted", className), disabled: disabled, onPress: onPress, style: {
+                minHeight: 48,
+                minWidth: 48,
+            }, testID: testID, children: [active ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: theme.container.onPrimary, name: "checkmark", size: 18 }) })) : null, _jsx(Typography.Text, { className: cn("flex-shrink", active ? "text-container-on-primary" : "text-text-primary"), variant: "bodyLarge", children: title })] }));
+    }
+    return (_jsx(TouchableOpacity, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { selected: active, disabled }, activeOpacity: 0.8, className: filterButton({ active, className }), disabled: disabled, onPress: onPress, testID: testID, children: _jsx(Typography.Text, { className: filterText({ active }), variant: "buttonSmall", children: title }) }));
+};
+export function FilterButtonGroup({ children, layout = "row", className, testID, }) {
+    if (layout === "scroll") {
+        return (_jsx(ScrollView, { className: cn("py-1", className), contentContainerStyle: { gap: 8 }, horizontal: true, keyboardShouldPersistTaps: "handled", showsHorizontalScrollIndicator: false, testID: testID, children: children }));
+    }
+    return (_jsx(View, { className: cn("flex-row gap-2 p-3", layout === "wrap" && "flex-wrap", className), testID: testID, children: children }));
 }

package/dist/Actions/Actions.IconButton.d.ts

@@ -1,5 +1,6 @@
 import { type VariantProps } from "../theme/tw.js";
 import { IconType } from "../utils/icon.js";
+import type { AccessibilityProps } from "react-native";
 declare const iconButton: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: "bg-primary";
@@ -55,13 +56,14 @@ declare const iconButton: import("tailwind-variants").TVReturnType<{
         true: "opacity-50";
     };
 }, undefined>>;
-export interface IconButtonProps extends VariantProps<typeof iconButton> {
+export interface IconButtonProps extends VariantProps<typeof iconButton>, AccessibilityProps {
     icon?: string;
     type?: IconType;
     onPress: () => void;
     loading?: boolean;
     iconColor?: string;
     className?: string;
+    testID?: string;
 }
-declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, }: IconButtonProps): import("react").JSX.Element;
+declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, testID, accessibilityState, ...accessibilityProps }: IconButtonProps): import("react").JSX.Element;
 export default IconButton;

package/dist/Actions/Actions.IconButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { Display } from "../Display/index.js";
+import Icon from "../Display/Display.Icon.js";
 import { theme } from "../theme/index.js";
 import { tv } from "../theme/tw.js";
 import { ActivityIndicator, TouchableOpacity } from "react-native";
@@ -31,8 +31,12 @@ const iconButton = tv({
         disabled: false,
     },
 });
-function IconButton({ icon, type = "feather", onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, }) {
+function IconButton({ icon, type = "feather", onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, testID, accessibilityState, ...accessibilityProps }) {
     const resolvedColor = iconColor ?? theme.text.accent;
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: iconButton({ variant, size, rounded, disabled, className }), disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Display.Icon, { color: resolvedColor, name: icon, size: 24, type: type })) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: iconButton({ variant, size, rounded, disabled, className }), disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Icon, { color: resolvedColor, name: icon, size: 24, type: type })) }));
 }
 export default IconButton;

package/dist/Actions/index.d.ts

@@ -1,3 +1,4 @@
+import Dock from "./Actions.Dock.js";
 import FAB from "./Actions.FAB.js";
 import { FilterButtonGroup } from "./Actions.FilterButton.js";
 import IconButton from "./Actions.IconButton.js";
@@ -6,17 +7,20 @@ export declare const Actions: {
     Button: import("react").FC<import("./Actions.Button.js").ButtonProps> & {
         Icon: import("react").FC<import("./Actions.Button.js").ButtonIconProps>;
     };
+    /** Compact primary-action dock with additional options in a dismissible sheet. */
+    Dock: typeof Dock;
     /** Small icon-only tap target — ghost, primary, secondary, tertiary variants. */
     IconButton: typeof IconButton;
     /** Floating Action Button — fixed bottom-right/left, label-optional. */
     FAB: typeof FAB;
     /** Chip-style active/inactive toggle — use inside `Actions.FilterButtonGroup`. */
     FilterButton: import("react").FC<import("./Actions.FilterButton.js").FilterButtonProps>;
-    /** Horizontal scroll container for `Actions.FilterButton` chips. */
+    /** Filter chip layout; opt into horizontal scrolling or wrapping with `layout`. */
     FilterButtonGroup: typeof FilterButtonGroup;
 };
 export type { ButtonIconProps, ButtonProps } from "./Actions.Button.js";
+export type { DockProps } from "./Actions.Dock.js";
 export type { FABProps } from "./Actions.FAB.js";
-export type { FilterButtonProps } from "./Actions.FilterButton.js";
+export type { FilterButtonGroupProps, FilterButtonProps, } from "./Actions.FilterButton.js";
 export type { IconButtonProps } from "./Actions.IconButton.js";
 export default Actions;

package/dist/Actions/index.js

@@ -1,17 +1,20 @@
 import ButtonWithIcon from "./Actions.Button.js";
+import Dock from "./Actions.Dock.js";
 import FAB from "./Actions.FAB.js";
 import { FilterButton, FilterButtonGroup, } from "./Actions.FilterButton.js";
 import IconButton from "./Actions.IconButton.js";
 export const Actions = {
     /** Primary action button. The filled one is gold; navy is text. Supports confirm dialog. */
     Button: ButtonWithIcon,
+    /** Compact primary-action dock with additional options in a dismissible sheet. */
+    Dock,
     /** Small icon-only tap target — ghost, primary, secondary, tertiary variants. */
     IconButton,
     /** Floating Action Button — fixed bottom-right/left, label-optional. */
     FAB,
     /** Chip-style active/inactive toggle — use inside `Actions.FilterButtonGroup`. */
     FilterButton,
-    /** Horizontal scroll container for `Actions.FilterButton` chips. */
+    /** Filter chip layout; opt into horizontal scrolling or wrapping with `layout`. */
     FilterButtonGroup,
 };
 export default Actions;

package/dist/Dialog/BottomSheet/BottomSheet.Root.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 /* eslint-disable react-hooks/refs */
 import { theme } from "../../theme/index.js";
-import { createContext, useContext, useEffect, useRef } from "react";
+import { useSheetTranslation } from "../../utils/useSheetTranslation.js";
+import { createContext, useContext, useRef } from "react";
 import { Animated, Dimensions, Modal, PanResponder, Pressable, ScrollView, Text, View, } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 const BottomSheetContext = createContext(null);
@@ -98,27 +99,17 @@ const SIZE_MAP = {
 function Root({ visible, onClose, size = "auto", dismissible = true, children }) {
     const insets = useSafeAreaInsets();
     const screenHeight = Dimensions.get("window").height;
-    const translateY = useRef(new Animated.Value(screenHeight)).current;
+    const { translateY, reducedMotion } = useSheetTranslation(visible, screenHeight);
+    const gesture = useRef({ dismissible, onClose, reducedMotion });
+    gesture.current = { dismissible, onClose, reducedMotion };
     const maxHeight = size === "auto" ? screenHeight * 0.9 : screenHeight * SIZE_MAP[size];
     const minHeight = size === "auto" ? 0 : screenHeight * SIZE_MAP[size];
-    useEffect(() => {
-        if (visible) {
-            Animated.spring(translateY, {
-                toValue: 0,
-                useNativeDriver: true,
-                damping: 20,
-                stiffness: 300,
-            }).start();
-        }
-        else {
-            translateY.setValue(screenHeight);
-        }
-    }, [visible, screenHeight, translateY]);
     const panResponder = useRef(PanResponder.create({
-        onStartShouldSetPanResponder: () => dismissible,
+        onStartShouldSetPanResponder: () => gesture.current.dismissible,
         onMoveShouldSetPanResponder: (_, gestureState) => {
-            return dismissible && Math.abs(gestureState.dy) > 10;
+            return gesture.current.dismissible && Math.abs(gestureState.dy) > 10;
         },
+        onPanResponderGrant: () => translateY.stopAnimation(),
         onPanResponderMove: (_, gestureState) => {
             if (gestureState.dy > 0) {
                 translateY.setValue(gestureState.dy);
@@ -126,36 +117,33 @@ function Root({ visible, onClose, size = "auto", dismissible = true, children })
         },
         onPanResponderRelease: (_, gestureState) => {
             if (gestureState.dy > 100 || gestureState.vy > 0.5) {
-                Animated.timing(translateY, {
-                    toValue: screenHeight,
-                    duration: 200,
-                    useNativeDriver: true,
-                }).start(() => onClose());
+                translateY.stopAnimation();
+                gesture.current.onClose();
             }
             else {
-                Animated.spring(translateY, {
-                    toValue: 0,
-                    useNativeDriver: true,
-                    damping: 20,
-                    stiffness: 300,
-                }).start();
+                if (gesture.current.reducedMotion)
+                    translateY.setValue(0);
+                else
+                    Animated.spring(translateY, {
+                        toValue: 0,
+                        useNativeDriver: true,
+                        damping: 20,
+                        stiffness: 300,
+                    }).start();
             }
         },
     })).current;
     function handleBackdropPress() {
         if (dismissible) {
-            Animated.timing(translateY, {
-                toValue: screenHeight,
-                duration: 200,
-                useNativeDriver: true,
-            }).start(() => onClose());
+            translateY.stopAnimation();
+            onClose();
         }
     }
     const contextValue = {
         close: onClose,
         panHandlers: panResponder.panHandlers,
     };
-    return (_jsx(Modal, { animationType: "fade", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 bg-black/50", children: [_jsx(Pressable, { className: "flex-1", onPress: handleBackdropPress }), _jsx(Animated.View, { className: "rounded-t-3xl overflow-hidden", style: {
+    return (_jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 bg-black/50", children: [_jsx(Pressable, { className: "flex-1", onPress: handleBackdropPress }), _jsx(Animated.View, { className: "rounded-t-3xl overflow-hidden", style: {
                         backgroundColor: theme.bg.popover,
                         maxHeight,
                         minHeight: minHeight || undefined,

package/dist/Dialog/Dialog.ActionSheet.d.ts

@@ -12,6 +12,7 @@ export interface ActionSheetProps {
     title?: string;
     message?: string;
     cancelLabel?: string;
+    testID?: string;
 }
-declare function ActionSheet({ visible, onClose, actions, title, message, cancelLabel, }: ActionSheetProps): import("react").JSX.Element;
+declare function ActionSheet({ visible, onClose, actions, title, message, cancelLabel, testID, }: ActionSheetProps): import("react").JSX.Element;
 export default ActionSheet;