@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/Form/Form.KeyboardToolbar.js

@@ -1,66 +0,0 @@
-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 { Typography } from "../Typography/index.js";
-import { useEffect, useRef, useState } from "react";
-import { StyleSheet, useWindowDimensions, View, } from "react-native";
-import { FocusedInputEvents, KeyboardController, KeyboardStickyView, useKeyboardState, } from "react-native-keyboard-controller";
-export default function KeyboardToolbar({ previousLabel = "Campo anterior", nextLabel = "Campo siguiente", doneLabel = "Ocultar teclado", showDoneLabel = false, onHeightChange, className, style, actionStyle, labelStyle, iconSize = 20, bottomGapOffset = 0, testID = "keyboard-toolbar", renderActionContent, }) {
-    const theme = useTheme();
-    const frame = useRef(null);
-    const { height: windowHeight } = useWindowDimensions();
-    const [bottomGap, setBottomGap] = useState(0);
-    const [height, setHeight] = useState(48);
-    const [inputs, setInputs] = useState({ current: 0, count: 0 });
-    const isVisible = useKeyboardState((state) => state.isVisible);
-    useEffect(() => {
-        const subscription = FocusedInputEvents.addListener("focusDidSet", setInputs);
-        return () => subscription.remove();
-    }, []);
-    const previousDisabled = inputs.current === 0;
-    const nextDisabled = inputs.current >= inputs.count - 1;
-    const content = (action, label, disabled) => {
-        if (renderActionContent)
-            return renderActionContent(action, { label, disabled });
-        if (action === "done" && showDoneLabel)
-            return (_jsx(Typography.Text, { className: "text-text-accent", style: labelStyle, variant: "bodySmall", children: label }));
-        return (_jsx(Icon, { color: disabled ? theme.text.tertiary : theme.text.accent, name: action === "previous" ? "collapse" : action === "next" ? "expand" : "check", size: iconSize }));
-    };
-    return (_jsx(View, { accessibilityElementsHidden: !isVisible, importantForAccessibility: isVisible ? "auto" : "no-hide-descendants", onLayout: () => {
-            frame.current?.measureInWindow((_x, y, _width, frameHeight) => setBottomGap(Math.max(0, windowHeight - y - frameHeight)));
-        }, pointerEvents: "box-none", ref: frame, style: StyleSheet.absoluteFill, children: _jsx(KeyboardStickyView, { offset: { closed: height, opened: bottomGap + bottomGapOffset - 8 }, style: { position: "absolute", bottom: 0, left: 0, right: 0 }, children: _jsxs(View, { className: className, onLayout: (event) => {
-                    const nextHeight = event.nativeEvent.layout.height;
-                    setHeight(nextHeight);
-                    onHeightChange?.(nextHeight);
-                }, style: [
-                    {
-                        minHeight: 48,
-                        flexDirection: "row",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        paddingHorizontal: 8,
-                        backgroundColor: theme.bg.card,
-                        borderTopWidth: StyleSheet.hairlineWidth,
-                        borderTopColor: theme.border.light,
-                    },
-                    style,
-                ], testID: testID, children: [_jsxs(View, { style: { flexDirection: "row" }, children: [_jsx(Pressable, { accessibilityLabel: previousLabel, disabled: previousDisabled, hitSlop: 0, onPress: () => KeyboardController.setFocusTo("prev"), style: [styles.arrow, actionStyle], children: content("previous", previousLabel, previousDisabled) }), _jsx(Pressable, { accessibilityLabel: nextLabel, disabled: nextDisabled, hitSlop: 0, onPress: () => KeyboardController.setFocusTo("next"), style: [styles.arrow, actionStyle], children: content("next", nextLabel, nextDisabled) })] }), _jsx(Pressable, { accessibilityLabel: doneLabel, hitSlop: 0, onPress: () => KeyboardController.dismiss(), style: [
-                            {
-                                minWidth: 48,
-                                minHeight: 48,
-                                flexShrink: 1,
-                                justifyContent: "center",
-                                padding: 8,
-                            },
-                            actionStyle,
-                        ], children: content("done", doneLabel, false) })] }) }) }));
-}
-const styles = StyleSheet.create({
-    arrow: {
-        minWidth: 48,
-        minHeight: 48,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-});

package/dist/Form/Form.PasswordInput.d.ts

@@ -1,9 +0,0 @@
-import InputField from "./Form.InputField.js";
-import React from "react";
-export interface PasswordFieldProps {
-    label: string;
-    error?: string;
-    inputProps: React.ComponentProps<typeof InputField>["inputProps"];
-}
-declare const PasswordField: React.FC<PasswordFieldProps>;
-export default PasswordField;

package/dist/Form/Form.PasswordInput.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display/index.js";
-import InputField from "./Form.InputField.js";
-import { useTheme } from "../theme/index.js";
-import { useState } from "react";
-import { TouchableOpacity, View } from "react-native";
-const PasswordField = ({ label, error, inputProps }) => {
-    const theme = useTheme();
-    const [showPassword, setShowPassword] = useState(false);
-    return (_jsxs(View, { className: "mb-4 relative", children: [_jsx(InputField, { error: error, inputProps: {
-                    ...inputProps,
-                    secureTextEntry: !showPassword,
-                    autoComplete: "off",
-                    importantForAutofill: "no",
-                }, label: label }), _jsx(TouchableOpacity, { className: "absolute right-3 bottom-[25px]", hitSlop: 8, onPress: () => setShowPassword(!showPassword), children: _jsx(Display.Icon, { color: theme.text.primary, name: showPassword ? "hidden" : "visibility", size: 22 }) })] }));
-};
-export default PasswordField;

package/dist/Form/Form.TextInput.d.ts

@@ -1,8 +0,0 @@
-import { FC } from "react";
-import { TextInputProps } from "react-native";
-export interface TextInputFProps extends TextInputProps {
-    error?: string;
-    className?: string;
-}
-declare const TextInputF: FC<TextInputFProps>;
-export default TextInputF;

package/dist/Form/Form.TextInput.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
-import { cn } from "../theme/tw.js";
-import { TextInput } from "react-native";
-const TextInputF = ({ className, ...props }) => {
-    return (_jsx(TextInput, { ...props, className: cn("border border-input rounded-md h-11 px-3 py-2 text-text-primary", className), placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, style: props.style, underlineColorAndroid: "transparent" }));
-};
-export default TextInputF;

package/dist/primitives/BaseButton.d.ts

@@ -1,150 +0,0 @@
-import type { IconName } from "../Display/index.js";
-import { type VariantProps } from "../theme/tw.js";
-import type React from "react";
-import { FC } from "react";
-import type { AccessibilityProps } from "react-native";
-declare const button: import("tailwind-variants").TVReturnType<{
-    variant: {
-        primary: "bg-accent";
-        accent: "bg-transparent";
-        secondary: "bg-bg-muted border border-border-strong";
-        outline: "bg-transparent border border-primary";
-        outlineDanger: "bg-transparent border border-danger";
-        outlineBlack: "bg-transparent border border-border-strong";
-        flat: "bg-text-primary/10";
-        link: "bg-transparent";
-        transparent: "bg-transparent border border-border-light";
-    };
-    size: {
-        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-[48px]", {
-    variant: {
-        primary: "bg-accent";
-        accent: "bg-transparent";
-        secondary: "bg-bg-muted border border-border-strong";
-        outline: "bg-transparent border border-primary";
-        outlineDanger: "bg-transparent border border-danger";
-        outlineBlack: "bg-transparent border border-border-strong";
-        flat: "bg-text-primary/10";
-        link: "bg-transparent";
-        transparent: "bg-transparent border border-border-light";
-    };
-    size: {
-        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, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        primary: "bg-accent";
-        accent: "bg-transparent";
-        secondary: "bg-bg-muted border border-border-strong";
-        outline: "bg-transparent border border-primary";
-        outlineDanger: "bg-transparent border border-danger";
-        outlineBlack: "bg-transparent border border-border-strong";
-        flat: "bg-text-primary/10";
-        link: "bg-transparent";
-        transparent: "bg-transparent border border-border-light";
-    };
-    size: {
-        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>>;
-declare const buttonIcon: import("tailwind-variants").TVReturnType<{
-    variant: {
-        primary: "bg-accent";
-        accent: "bg-transparent";
-        secondary: "bg-bg-muted border border-border-strong";
-        outline: "bg-transparent border border-primary";
-        outlineDanger: "bg-transparent border border-danger";
-        outlineBlack: "bg-transparent border border-border-strong";
-        flat: "bg-text-primary/10";
-        link: "bg-transparent";
-        transparent: "bg-transparent border border-border-light";
-    };
-    size: {
-        small: "w-9 h-9";
-        medium: "w-11 h-11";
-        large: "w-[52px] h-[52px]";
-    };
-    disabled: {
-        true: "opacity-70";
-    };
-}, undefined, "rounded-md items-center justify-center aspect-square", {
-    variant: {
-        primary: "bg-accent";
-        accent: "bg-transparent";
-        secondary: "bg-bg-muted border border-border-strong";
-        outline: "bg-transparent border border-primary";
-        outlineDanger: "bg-transparent border border-danger";
-        outlineBlack: "bg-transparent border border-border-strong";
-        flat: "bg-text-primary/10";
-        link: "bg-transparent";
-        transparent: "bg-transparent border border-border-light";
-    };
-    size: {
-        small: "w-9 h-9";
-        medium: "w-11 h-11";
-        large: "w-[52px] h-[52px]";
-    };
-    disabled: {
-        true: "opacity-70";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        primary: "bg-accent";
-        accent: "bg-transparent";
-        secondary: "bg-bg-muted border border-border-strong";
-        outline: "bg-transparent border border-primary";
-        outlineDanger: "bg-transparent border border-danger";
-        outlineBlack: "bg-transparent border border-border-strong";
-        flat: "bg-text-primary/10";
-        link: "bg-transparent";
-        transparent: "bg-transparent border border-border-light";
-    };
-    size: {
-        small: "w-9 h-9";
-        medium: "w-11 h-11";
-        large: "w-[52px] h-[52px]";
-    };
-    disabled: {
-        true: "opacity-70";
-    };
-}, undefined>>;
-export interface BaseButtonProps extends VariantProps<typeof button>, AccessibilityProps {
-    title: string;
-    onPress?: () => void;
-    loading?: boolean;
-    disabled?: boolean;
-    className?: string;
-    icon?: React.ReactNode;
-    testID?: string;
-}
-export declare const BaseButton: FC<BaseButtonProps>;
-export interface BaseButtonIconProps extends VariantProps<typeof buttonIcon>, AccessibilityProps {
-    icon: IconName;
-    onPress?: () => void;
-    loading?: boolean;
-    disabled?: boolean;
-    className?: string;
-    testID?: string;
-}
-export declare const BaseButtonIcon: FC<BaseButtonIconProps>;
-declare const BaseButtonWithIcon: React.FC<BaseButtonProps> & {
-    Icon: React.FC<BaseButtonIconProps>;
-};
-export default BaseButtonWithIcon;

package/dist/primitives/BaseButton.js

@@ -1,229 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon.js";
-import { theme } from "../theme/index.js";
-import { tv } from "../theme/tw.js";
-import { Typography } from "../Typography/index.js";
-import { ActivityIndicator, TouchableOpacity, View } from "react-native";
-// ============================================================================
-// STYLE VARIANTS
-// ============================================================================
-const button = tv({
-    base: "rounded-md items-center justify-center flex-row min-h-[48px]",
-    variants: {
-        variant: {
-            primary: "bg-accent",
-            accent: "bg-transparent",
-            secondary: "bg-bg-muted border border-border-strong",
-            outline: "bg-transparent border border-primary",
-            outlineDanger: "bg-transparent border border-danger",
-            outlineBlack: "bg-transparent border border-border-strong",
-            flat: "bg-text-primary/10",
-            link: "bg-transparent",
-            transparent: "bg-transparent border border-border-light",
-        },
-        size: {
-            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",
-        },
-    },
-    defaultVariants: {
-        variant: "primary",
-        size: "medium",
-    },
-});
-const buttonIcon = tv({
-    base: "rounded-md items-center justify-center aspect-square",
-    variants: {
-        variant: {
-            primary: "bg-accent",
-            accent: "bg-transparent",
-            secondary: "bg-bg-muted border border-border-strong",
-            outline: "bg-transparent border border-primary",
-            outlineDanger: "bg-transparent border border-danger",
-            outlineBlack: "bg-transparent border border-border-strong",
-            flat: "bg-text-primary/10",
-            link: "bg-transparent",
-            transparent: "bg-transparent border border-border-light",
-        },
-        size: {
-            small: "w-9 h-9",
-            medium: "w-11 h-11",
-            large: "w-[52px] h-[52px]",
-        },
-        disabled: {
-            true: "opacity-70",
-        },
-    },
-    defaultVariants: {
-        variant: "primary",
-        size: "medium",
-    },
-});
-const textColor = tv({
-    variants: {
-        variant: {
-            primary: "text-text-on-accent",
-            accent: "text-text-accent",
-            secondary: "text-text-primary",
-            outline: "text-text-accent",
-            outlineDanger: "text-danger",
-            outlineBlack: "text-text-primary",
-            flat: "text-text-primary",
-            link: "text-text-accent",
-            transparent: "text-text-inverse",
-        },
-        disabled: {
-            true: "opacity-50",
-        },
-    },
-    compoundVariants: [
-        {
-            variant: "primary",
-            disabled: true,
-            className: "text-text-on-accent",
-        },
-        {
-            variant: "accent",
-            disabled: true,
-            className: "text-text-accent",
-        },
-        {
-            variant: "transparent",
-            disabled: true,
-            className: "text-text-inverse/70",
-        },
-        {
-            variant: ["secondary", "outline", "link"],
-            disabled: true,
-            className: "text-text-secondary",
-        },
-        {
-            variant: "outlineDanger",
-            disabled: true,
-            className: "text-danger/50",
-        },
-        {
-            variant: "outlineBlack",
-            disabled: true,
-            className: "text-text-primary/50",
-        },
-        {
-            variant: "flat",
-            disabled: true,
-            className: "text-text-primary/50",
-        },
-    ],
-    defaultVariants: {
-        variant: "primary",
-        disabled: false,
-    },
-});
-// ============================================================================
-// COLOR & SIZE MAPS (Dynamic with theme)
-// ============================================================================
-function getLoadingColorDynamic(variant) {
-    const map = {
-        primary: theme.text.onAccent,
-        accent: theme.text.accent,
-        secondary: theme.text.primary,
-        outline: theme.text.accent,
-        outlineDanger: theme.danger,
-        outlineBlack: theme.text.primary,
-        flat: theme.text.primary,
-        link: theme.text.accent,
-        transparent: theme.text.inverse,
-    };
-    return map[variant] ?? theme.text.inverse;
-}
-function getIconColorDynamic(variant, disabled) {
-    if (disabled) {
-        const disabledMap = {
-            primary: theme.text.onAccent + "70",
-            accent: theme.text.accent + "70",
-            secondary: theme.icon.disabled,
-            outline: theme.icon.disabled,
-            outlineDanger: theme.danger + "7f",
-            outlineBlack: theme.text.primary + "7f",
-            flat: theme.text.primary + "7f",
-            link: theme.icon.disabled,
-            transparent: theme.icon.inverse + "70",
-        };
-        return disabledMap[variant] ?? theme.icon.disabled;
-    }
-    const enabledMap = {
-        primary: theme.text.onAccent,
-        accent: theme.text.accent,
-        secondary: theme.text.primary,
-        outline: theme.text.accent,
-        outlineDanger: theme.danger,
-        outlineBlack: theme.text.primary,
-        flat: theme.text.primary,
-        link: theme.text.accent,
-        transparent: theme.icon.inverse,
-    };
-    return enabledMap[variant] ?? theme.icon.inverse;
-}
-const iconSizeMap = {
-    small: 16,
-    medium: 20,
-    large: 28,
-};
-const textVariantMap = {
-    small: "buttonSmall",
-    medium: "button",
-    large: "buttonLarge",
-};
-// ============================================================================
-// HELPER FUNCTIONS
-// ============================================================================
-function getLoadingColor(variant) {
-    return getLoadingColorDynamic(variant);
-}
-function getIconColor(variant, disabled) {
-    return getIconColorDynamic(variant, disabled);
-}
-function getIconSize(size) {
-    return iconSizeMap[size] ?? 20;
-}
-function getTextVariant(size) {
-    return textVariantMap[size] ?? "button";
-}
-export const BaseButton = ({ title, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, testID, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
-    const textColorClass = textColor({
-        variant: variant ?? "primary",
-        disabled,
-    });
-    const loadingColorValue = getLoadingColor(variant ?? "primary");
-    const textVariantValue = getTextVariant(size ?? "medium");
-    if (variant === "link") {
-        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: onPress, ...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 })) }));
-    }
-    return (_jsxs(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
-            ...accessibilityState,
-            disabled: disabled || loading,
-            busy: loading,
-        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { allowFontScaling: true, className: textColorClass, semibold: variant === "primary", style: { flexShrink: 1 }, variant: textVariantValue, children: title }))] }));
-};
-export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, testID, accessibilityState, ...accessibilityProps }) => {
-    const iconColorValue = getIconColor(variant ?? "primary", disabled);
-    const loadingColorValue = getLoadingColor(variant ?? "primary");
-    const iconSizeValue = getIconSize(size ?? "medium");
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, 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: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
-};
-// ============================================================================
-// COMPOUND COMPONENT
-// ============================================================================
-const BaseButtonWithIcon = Object.assign(BaseButton, { Icon: BaseButtonIcon });
-export default BaseButtonWithIcon;

package/dist/utils/useSheetTranslation.d.ts

@@ -1,5 +0,0 @@
-import { Animated } from "react-native";
-export declare function useSheetTranslation(visible: boolean, hiddenOffset?: number): {
-    translateY: Animated.Value;
-    reducedMotion: boolean;
-};

package/dist/utils/useSheetTranslation.js

@@ -1,23 +0,0 @@
-import { useReducedMotion } from "./useReducedMotion.js";
-import { useEffect, useState } from "react";
-import { Animated } from "react-native";
-export function useSheetTranslation(visible, hiddenOffset = 800) {
-    const reducedMotion = useReducedMotion();
-    const [translateY] = useState(() => new Animated.Value(visible ? 0 : hiddenOffset));
-    useEffect(() => {
-        translateY.stopAnimation();
-        if (visible && !reducedMotion) {
-            const animation = Animated.spring(translateY, {
-                toValue: 0,
-                useNativeDriver: true,
-                damping: 20,
-                stiffness: 300,
-            });
-            animation.start();
-            return () => animation.stop();
-        }
-        translateY.setValue(visible ? 0 : hiddenOffset);
-        return () => translateY.stopAnimation();
-    }, [visible, hiddenOffset, reducedMotion, translateY]);
-    return { translateY, reducedMotion };
-}