@sincpro/mobile-ui 2.0.0 → 3.0.0

package/README.md

@@ -11,11 +11,16 @@ This package is maintained by Sincpro as part of the mobile framework ecosystem.
 ## Quick Start
 
 ```bash
-npx expo install @sincpro/mobile-ui expo-image
+npx expo install @sincpro/mobile-ui @expo/ui expo-symbols @shopify/flash-list expo-image react-native-keyboard-controller
 ```
 
 Wire the Tailwind preset, then import by category:
 
+The SDK 58 major uses one native sheet engine, semantic SF/Material icons and FlashList
+v2. Native dependencies are required peers, not implied by installing Expo.
+See [migration contracts](docs/MIGRATIONS.md) before upgrading. NativeWind remains on
+v4 until a v5 release explicitly supports SDK 58.
+
 ```js
 // tailwind.config.js
 module.exports = {
@@ -97,7 +102,7 @@ recoverable error. It uses fictional data and local state, not persistence or a
   the Expo renderer, disk caching, automatic source recycling and Reduce Motion policy.
   `Display.ExpoImage` exposes the direct renderer; `Display.Image` adds error/retry composition.
   See the [breaking migration guide](docs/MIGRATION-V2.md).
-- `ListViewV2.Content` exposes `listProps` for virtualization, `getItemLayout`, viewability
+- `ListViewV2.Content` exposes FlashList v2 `listProps` for recycling and viewability
   and `extraData`, plus `listRef` and content styling. `Root hasMore={false}` stops
   pagination; `loadingMore` and refresh pause it. See the
   [mobile performance and usability plan](docs/MOBILE-QUALITY.md).

package/assets/fonts/FFL.txt

@@ -0,0 +1,57 @@
+Fontshare EULA
+
+---—---------------------------------—------------------------------
+Free Font - End User License Agreement (FF EULA)
+---—---------------------------------—------------------------------
+Notice to User
+Indian Type Foundry designs, produces and distributes font software as digital fonts to end users worldwide. In addition to commercial fonts that are available for a fee, ITF also offers several fonts which can be used free of charge. The free fonts are distributed through a dedicated platform called www.fontshare.com (“Fontshare”) to end users worldwide. These free fonts are subject to this legally binding EULA between the Indian Type Foundry (“Indian Type Foundry” or “Licensor”) and you (“Licensee”). 
+You acknowledge that the Font Software and designs embodied therein are protected by the copyright, other intellectual property rights and industrial property rights and by international treaties. They are and remain at all times the intellectual property of the Indian Type Foundry.
+In addition to direct download, Fontshare also offers these free fonts via Fonthsare API using a code. In this case, the Font Software is delivered directly from the servers used by Indian Type Foundry to the Licensee's website, without the Licensee having to download the Font Software.
+By downloading, accessing the API, installing, storing, copying or using one of any Font Software, you agree to the following terms. 
+
+Definitions
+“Font Software” refers to the set of computer files or programs released under this license that instructs your computer to display and/or print each letters, characters, typographic designs, ornament and so forth. Font Software includes all bitmap and vector representations of fonts and typographic representations and embellishments created by or derived from the Font Software. 
+“Original Version” refers to the Font Software as distributed by the Indian Type Foundry as the copyright holder. 
+“Derivative Work” refers to the pictorial representation of the font created by the Font Software, including typographic characters such as letters, numerals, ornaments, symbols, or punctuation and special characters.
+
+01. Grant of License
+You are hereby granted a non-exclusive, non-assignable, non-transferrable, terminable license to access, download and use the Font Software for your personal or commercial use for an unlimited period of time for free of charge. 
+You may use the font Software in any media (including Print, Web, Mobile, Digital, Apps, ePub, Broadcasting and OEM) at any scale, at any location worldwide. 
+You may use the Font Software to create logos and other graphic elements, images on any surface, vector files or other scalable drawings and static images. 
+You may use the Font Software on any number of devices (computer, tablet, phone). The number of output devices (Printers) is not restricted. 
+You may make only such reasonable number of back-up copies suitable to your permitted use. 
+You may but are not required to identify Indian Type Foundry Fonts in your work credits. 
+
+02. Limitations of usage
+You may not modify, edit, adapt, translate, reverse engineer, decompile or disassemble, alter or otherwise copy the Font Software or the designs embodied therein in whole or in part, without the prior written consent of the Licensor. 
+The Fonts may not - beyond the permitted copies and the uses defined herein - be distributed, duplicated, loaned, resold or licensed in any way, whether by lending, donating or give otherwise to a person or entity. This includes the distribution of the Fonts by e-mail, on USB sticks, CD-ROMs, or other media, uploading them in a public server or making the fonts available on peer-to-peer networks. A passing on to external designers or service providers (design agencies, repro studios, printers, etc.) is also not permitted. 
+You are not allowed to transmit the Font Software over the Internet in font serving or for font replacement by means of technologies such as but not limited to EOT, Cufon, sIFR or similar technologies that may be developed in the future without the prior written consent of the Licensor. 
+
+03. Embedding
+You may embed the Font Software in PDF and other digital documents provided that is done in a secured, read-only mode. It must be ensured beyond doubt that the recipient cannot use the Font Software to edit or to create new documents. The design data (PDFs) created in this way and under these created design data (PDFs) may be distributed in any number. 
+The extraction of the Font Software in whole or in part is prohibited. 
+
+04. Third party use, Commercial print service provider
+You may include the Font Software in a non-editable electronic document solely for printing and display purposes and provide that electronic document to the commercial print service provider for the purpose of printing. If the print service needs to install the fonts, they too need to download the Font Software from the Licensor's website.
+
+05. Derivative Work
+You are allowed to make derivative works as far as you use them for your personal or commercial use. However, you cannot modify, make changes or reverse engineer the original font software provided to you. Any derivative works are the exclusive property of the Licensor and shall be subject to the terms and conditions of this EULA. Derivative works may not be sub-licensed, sold, leased, rented, loaned, or given away without the express written permission of the Licensor. 
+
+06. Warranty and Liability
+BECAUSE THIS SOFTWARE IS LICENSED FREE OF CHARGE, INDIAN TYPE FOUNDRY MAKES NO WARRANTIES, EXPRESS OR IMPLIED AS TO THE MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR OTHERWISE. THE FONT SOFTWARE WAS NOT MANUFACTURED FOR USE IN MANUFACTURING CONTROL DEVICES OR NAVIGATION DEVICES OR IN CIRCUMSTANCES THAT COULD RESULT IN ENVIRONMENTAL DAMAGE OR PERSONAL INJURY. WITHOUT LIMITING THE FOREGOING, INDIAN TYPE FOUNDRY SHALL IN NO EVENT BE LIABLE TO THE LICENSED USER OR ANY OTHER THIRD PARTY FOR ANY DIRECT, CONSEQUENTIAL OR INCIDENTAL DAMAGES, INCLUDING DAMAGES FROM LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION NOR FOR LOST PROFITS OR SAVINGS ARISING OUT OF THE USE OR INABILITY TO USE THE PRODUCT EVEN IF NOTIFIED IN ADVANCE, UNDER NO CIRCUMSTANCES SHALL INDIAN TYPE FOUNDRY’S LIABILITY EXCEED THE REPLACEMENT COST OF THE SOFTWARE. 
+IF LICENSEE CHOOSES TO ACCESS THE FONT SOFTWARE THROUGH A CODE (API), IT MAY HAVE A DIRECT IMPACT ON LICENSEE'S WEBSITE OR APPLICATIONS. INDIAN TYPE FOUNDRY IS NOT RESPONSIBLE OR LIABLE FOR ANY INTERRUPTION, MALFUNCTION, DOWNTIME OR OTHER FAILURE OF THE WEBSITE OR ITS API.
+
+07. Updates, Maintenance and Support Services
+Licensor will not provide you with any support services for the Software under this Agreement.
+
+08. Termination 
+Any breach of the terms of this agreement shall be a cause for termination, provided that such breach is notified in writing to the Licensee by the Licensor and the Licensee failed to rectify the breach within 30 days of the receipt of such notification. 
+In the event of termination and without limitation of any remedies under law or equity, you must delete the Font Software and all copies thereof. Proof of this must be provided upon request of the Licensor.  
+We reserve the right to claim damages for the violation of the conditions. 
+
+09. Final Provisions
+If individual provisions of this agreement are or become invalid, the validity of the remaining provisions shall remain unaffected. Invalid provisions shall be replaced by mutual agreement by such provisions that are suitable to achieve the desired economic purpose, taking into account the interests of both parties. The same shall apply mutatis mutandis to the filling of any gaps which may arise in this agreement.
+This contract is subject to laws of the Republic of India. Place of performance and exclusive place of jurisdiction for all disputes between the parties arising out of or in connection with this contract is, as far as legally permissible, Ahmedabad, India.
+- 
+Last Updated on 22 March 2021
+Copyright 2021 Indian Type Foundry. All rights reserved. 

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

@@ -1,3 +1,4 @@
+import type { IconName } from "../Display/index.js";
 import { type VariantProps } from "../theme/tw.js";
 import type React from "react";
 import type { AccessibilityProps } from "react-native";
@@ -140,7 +141,7 @@ export interface ButtonProps extends VariantProps<typeof button>, AccessibilityP
     testID?: string;
 }
 export interface ButtonIconProps extends VariantProps<typeof buttonIcon>, AccessibilityProps {
-    icon: string;
+    icon: IconName;
     onPress?: () => void;
     confirm?: string;
     loading?: boolean;

package/dist/Actions/Actions.Button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { useConfirmationContext } from "../Dialog/Confirmation.context.js";
+import { requestConfirmation } from "../Dialog/requestConfirmation.js";
 import Icon from "../Display/Display.Icon.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useCallback } from "react";
@@ -100,7 +100,7 @@ const textColor = tv({
     defaultVariants: { variant: "primary", disabled: false },
 });
 // ─── Color / size helpers ─────────────────────────────────────────────────────
-function getLoadingColor(variant) {
+function getLoadingColor(variant, theme) {
     const map = {
         primary: theme.text.onAccent,
         accent: theme.text.accent,
@@ -113,9 +113,9 @@ function getLoadingColor(variant) {
         link: theme.text.accent,
         transparent: theme.text.inverse,
     };
-    return map[variant] ?? theme.text.inverse;
+    return map[variant];
 }
-function getIconColor(variant, disabled) {
+function getIconColor(variant, disabled, theme) {
     if (disabled) {
         const map = {
             primary: theme.text.onAccent + "70",
@@ -129,7 +129,7 @@ function getIconColor(variant, disabled) {
             link: theme.icon.disabled,
             transparent: theme.icon.inverse + "70",
         };
-        return map[variant] ?? theme.icon.disabled;
+        return map[variant];
     }
     const map = {
         primary: theme.text.onAccent,
@@ -143,7 +143,7 @@ function getIconColor(variant, disabled) {
         link: theme.text.accent,
         transparent: theme.icon.inverse,
     };
-    return map[variant] ?? theme.icon.inverse;
+    return map[variant];
 }
 const iconSizeMap = { small: 16, medium: 20, large: 28 };
 const textVariantMap = {
@@ -152,28 +152,25 @@ const textVariantMap = {
     large: "buttonLarge",
 };
 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);
-    const textVariantValue = textVariantMap[size] ?? "button";
-    const handlePress = useCallback(() => {
+    const theme = useTheme();
+    const resolvedVariant = variant ?? "primary";
+    const resolvedSize = size ?? "medium";
+    const textColorClass = textColor({ variant: resolvedVariant, disabled });
+    const loadingColorValue = getLoadingColor(resolvedVariant, theme);
+    const textVariantValue = textVariantMap[resolvedSize];
+    const handlePress = useCallback(async () => {
         if (confirm && onPress) {
-            show({
+            const confirmed = await requestConfirmation({
                 title: "Confirmar acción",
                 message: confirm,
                 confirmText: "Confirmar",
                 cancelText: "Cancelar",
-                onConfirm: () => {
-                    hide();
-                    onPress();
-                },
-                onCancel: () => hide(),
             });
+            if (!confirmed)
+                return;
         }
-        else if (onPress) {
-            onPress();
-        }
-    }, [onPress, confirm, show, hide]);
+        onPress?.();
+    }, [onPress, confirm]);
     if (variant === "link") {
         return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: handlePress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
                 ...accessibilityState,
@@ -189,28 +186,25 @@ const Button = ({ title, onPress, confirm, variant = "primary", size = "medium",
         }, 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, testID, accessibilityState, ...accessibilityProps }) => {
-    const { show, hide } = useConfirmationContext();
-    const iconColorValue = getIconColor(variant, disabled);
-    const iconSizeValue = iconSizeMap[size] ?? 20;
-    const loadingColorValue = getLoadingColor(variant);
-    const handlePress = useCallback(() => {
+    const theme = useTheme();
+    const resolvedVariant = variant ?? "primary";
+    const resolvedSize = size ?? "medium";
+    const iconColorValue = getIconColor(resolvedVariant, disabled, theme);
+    const iconSizeValue = iconSizeMap[resolvedSize];
+    const loadingColorValue = getLoadingColor(resolvedVariant, theme);
+    const handlePress = useCallback(async () => {
         if (confirm && onPress) {
-            show({
+            const confirmed = await requestConfirmation({
                 title: "Confirmar acción",
                 message: confirm,
                 confirmText: "Confirmar",
                 cancelText: "Cancelar",
-                onConfirm: () => {
-                    hide();
-                    onPress();
-                },
-                onCancel: () => hide(),
             });
+            if (!confirmed)
+                return;
         }
-        else if (onPress) {
-            onPress();
-        }
-    }, [onPress, confirm, show, hide]);
+        onPress?.();
+    }, [onPress, confirm]);
     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,

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

@@ -1,20 +1,20 @@
 import { type ReactNode } from "react";
-export interface DockProps {
+export type 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;
+    dismissible?: boolean;
+    snapPoints?: (string | number)[];
     placement?: "fixed" | "footer";
+    safeAreaBottom?: boolean;
     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;
+};
+declare function Dock({ primaryAction, children, summary, title, moreLabel, collapseLabel, expanded: controlledExpanded, defaultExpanded, onExpandedChange, dismissible, snapPoints, placement, safeAreaBottom, className, testID, }: DockProps): import("react").JSX.Element;
 export default Dock;

package/dist/Actions/Actions.Dock.js

@@ -1,89 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-/* eslint-disable react-hooks/refs */
+import Sheet from "../Dialog/Dialog.Sheet.js";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { themeToVars, useTheme } from "../theme/index.js";
+import { 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 { useState } from "react";
+import { View } from "react-native";
+import { KeyboardStickyView } from "react-native-keyboard-controller";
 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;
+function Dock({ primaryAction, children, summary, title = "Más opciones", moreLabel = "Más opciones", collapseLabel = "Ocultar opciones", expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, dismissible = true, snapPoints, placement = "fixed", safeAreaBottom = placement === "fixed", className, testID, }) {
     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 [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    const expanded = controlledExpanded ?? internalExpanded;
     const requestExpanded = (next) => {
         if (next === expanded)
             return;
+        if (!next && !dismissible)
+            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] })] }) }) })] }));
+    const bar = (_jsxs(View, { className: cn("gap-3 bg-bg-card py-2", !expanded && "border-t border-border-light px-4", className), style: { paddingBottom: !expanded && safeAreaBottom ? insets.bottom + 8 : 8 }, testID: testID ? `${testID}-bar` : undefined, children: [summary, _jsxs(View, { className: "flex-row items-center gap-3", children: [_jsxs(Pressable, { accessibilityLabel: expanded ? collapseLabel : moreLabel, accessibilityRole: "button", accessibilityState: { expanded, disabled: expanded && !dismissible }, className: "flex-1 flex-row items-center justify-center gap-2 rounded-lg bg-bg-muted px-3", disabled: expanded && !dismissible, onPress: () => requestExpanded(!expanded), style: { minWidth: 48, minHeight: 48 }, testID: testID ? `${testID}-more` : undefined, children: [_jsx(Typography.Text, { className: expanded && !dismissible ? "text-text-disabled" : "text-text-primary", variant: "buttonSmall", children: expanded ? collapseLabel : moreLabel }), _jsx(Icon, { color: expanded && !dismissible ? theme.icon.disabled : theme.icon.secondary, name: expanded ? "expand" : "collapse", size: 16 })] }), _jsx(View, { className: "flex-1", children: primaryAction })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(KeyboardStickyView, { enabled: placement === "fixed" && !expanded, offset: { opened: safeAreaBottom ? insets.bottom : 0 }, style: placement === "fixed"
+                    ? { position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 20 }
+                    : undefined, testID: testID, children: !expanded ? bar : null }), _jsx(Sheet, { dismissible: dismissible, footer: expanded ? bar : undefined, onClose: () => requestExpanded(false), snapPoints: snapPoints, testID: testID ? `${testID}-sheet` : undefined, title: title, visible: expanded, children: children })] }));
 }
 export default Dock;

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

@@ -1,5 +1,6 @@
+import type { IconName } from "../Display/index.js";
 export interface FABProps {
-    icon: string;
+    icon: IconName;
     onPress: () => void;
     label?: string;
     position?: "bottom-right" | "bottom-left";

package/dist/Actions/Actions.FilterButton.js

@@ -31,7 +31,7 @@ export const FilterButton = ({ title, active, onPress, variant = "default", disa
         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 })] }));
+            }, testID: testID, children: [active ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: theme.container.onPrimary, name: "check", 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 }) }));
 };

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

@@ -1,5 +1,5 @@
+import type { IconName } from "../Display/index.js";
 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: {
@@ -57,13 +57,12 @@ declare const iconButton: import("tailwind-variants").TVReturnType<{
     };
 }, undefined>>;
 export interface IconButtonProps extends VariantProps<typeof iconButton>, AccessibilityProps {
-    icon?: string;
-    type?: IconType;
+    icon: IconName;
     onPress: () => void;
     loading?: boolean;
     iconColor?: string;
     className?: string;
     testID?: string;
 }
-declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, testID, accessibilityState, ...accessibilityProps }: IconButtonProps): import("react").JSX.Element;
+declare function IconButton({ icon, 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

@@ -31,12 +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, testID, accessibilityState, ...accessibilityProps }) {
+function IconButton({ icon, 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, ...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 })) }));
+        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Icon, { color: resolvedColor, name: icon, size: 24 })) }));
 }
 export default IconButton;

package/dist/Dialog/Confirmation.context.d.ts

@@ -1,21 +1,12 @@
+import { type ConfirmationProps } from "./Dialog.Confirmation.js";
 import { type ReactNode } from "react";
-type ConfirmationVariant = "dialog" | "bottomSheet";
-interface IConfirmationOptions {
-    variant?: ConfirmationVariant;
-    title?: string;
-    message?: string;
-    confirmText?: string;
-    cancelText?: string;
-    onConfirm?: () => void | Promise<void>;
-    onCancel?: () => void | Promise<void>;
-    render?: (close: () => void) => ReactNode;
-}
+export type { NativeConfirmationOptions } from "./requestConfirmation.js";
+export { requestConfirmation } from "./requestConfirmation.js";
+export type ConfirmationOptions = Omit<ConfirmationProps, "visible" | "onClose">;
 type ConfirmationContextValue = {
-    show: (opts: IConfirmationOptions) => void;
-    hide: () => void;
+    show: (options: ConfirmationOptions) => void;
 };
 export declare function ConfirmationProvider({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare function useConfirmationContext(): ConfirmationContextValue;
-export {};

package/dist/Dialog/Confirmation.context.js

@@ -1,62 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { BottomSheet } from "./BottomSheet/index.js";
-import ConfirmationDialog from "./Dialog.Confirmation.js";
-import { BaseButton } from "../primitives/BaseButton.js";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Confirmation from "./Dialog.Confirmation.js";
 import { createContext, useCallback, useContext, useMemo, useState, } from "react";
-const DEFAULT_STATE = {
-    isVisible: false,
-    variant: "dialog",
-    title: "Confirmación",
-    message: "¿Estás seguro de que quieres continuar?",
-    confirmText: "Confirmar",
-    cancelText: "Cancelar",
-    onConfirm: undefined,
-    onCancel: undefined,
-    render: undefined,
-};
+export { requestConfirmation } from "./requestConfirmation.js";
 const ConfirmationContext = createContext(null);
 export function ConfirmationProvider({ children }) {
-    const [state, setState] = useState(DEFAULT_STATE);
-    const show = useCallback((opts) => {
-        setState((prev) => ({
-            ...prev,
-            isVisible: true,
-            variant: opts.variant ?? DEFAULT_STATE.variant,
-            title: opts.title ?? DEFAULT_STATE.title,
-            message: opts.message ?? DEFAULT_STATE.message,
-            confirmText: opts.confirmText ?? DEFAULT_STATE.confirmText,
-            cancelText: opts.cancelText ?? DEFAULT_STATE.cancelText,
-            onConfirm: opts.onConfirm,
-            onCancel: opts.onCancel,
-            render: opts.render,
-        }));
+    const [options, setOptions] = useState();
+    const [visible, setVisible] = useState(false);
+    const show = useCallback(({ title = "Confirmación", message = "¿Estás seguro de que quieres continuar?", confirmText = "Confirmar", cancelText = "Cancelar", destructive = false, ...next }) => {
+        setOptions({ title, message, confirmText, cancelText, destructive, ...next });
+        setVisible(true);
     }, []);
-    const hide = useCallback(() => {
-        setState(DEFAULT_STATE);
-    }, []);
-    const value = useMemo(() => ({ show, hide }), [show, hide]);
-    const handleConfirm = async () => {
-        try {
-            await state.onConfirm?.();
-        }
-        finally {
-            hide();
-        }
-    };
-    const handleCancel = async () => {
-        try {
-            await state.onCancel?.();
-        }
-        finally {
-            hide();
-        }
-    };
-    return (_jsxs(ConfirmationContext.Provider, { value: value, children: [children, state.variant === "dialog" && (_jsx(ConfirmationDialog, { auxTitle: state.title, cancelButtonText: state.cancelText, confirmButtonText: state.confirmText, onCancel: handleCancel, onConfirm: handleConfirm, subtitle: state.message, visible: state.isVisible })), state.variant === "bottomSheet" && (_jsx(BottomSheet.Root, { onClose: handleCancel, visible: state.isVisible, children: state.render ? (state.render(hide)) : (_jsxs(_Fragment, { children: [_jsx(BottomSheet.Header, { children: _jsx(BottomSheet.Title, { subtitle: state.message, children: state.title }) }), _jsxs(BottomSheet.Actions, { layout: "horizontal", children: [_jsx(BaseButton, { className: "flex-1", onPress: handleCancel, title: state.cancelText ?? "", variant: "outline" }), _jsx(BaseButton, { className: "flex-1", onPress: handleConfirm, title: state.confirmText ?? "", variant: "primary" })] })] })) }))] }));
+    const value = useMemo(() => ({ show }), [show]);
+    return (_jsxs(ConfirmationContext.Provider, { value: value, children: [children, options ? (_jsx(Confirmation, { ...options, onClose: () => setVisible(false), visible: visible })) : null] }));
 }
 export function useConfirmationContext() {
     const context = useContext(ConfirmationContext);
     if (!context) {
-        return { show: () => { }, hide: () => { } };
+        throw new Error("useConfirmationContext requires ConfirmationProvider.");
     }
     return context;
 }

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

@@ -1,18 +1,19 @@
-export interface ActionSheetAction {
+import type { IconName } from "../Display/icon-map.js";
+export type ActionSheetAction = {
     label: string;
-    icon?: string;
+    icon?: IconName;
     destructive?: boolean;
     disabled?: boolean;
-    onPress: () => void;
-}
-export interface ActionSheetProps {
+    onPress: () => void | Promise<void>;
+};
+export type ActionSheetProps = {
     visible: boolean;
     onClose: () => void;
-    actions: ActionSheetAction[];
+    actions: readonly ActionSheetAction[];
     title?: string;
     message?: string;
     cancelLabel?: string;
     testID?: string;
-}
+};
 declare function ActionSheet({ visible, onClose, actions, title, message, cancelLabel, testID, }: ActionSheetProps): import("react").JSX.Element;
 export default ActionSheet;