@sincpro/mobile-ui 0.5.0 → 0.6.0

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

@@ -0,0 +1,151 @@
+import { type VariantProps } from "../theme/tw";
+import type React from "react";
+declare const button: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        cta: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-[13px] items-center justify-center flex-row min-h-[44px]", {
+    variant: {
+        primary: string;
+        accent: string;
+        cta: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        cta: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-[13px] items-center justify-center flex-row min-h-[44px]", unknown, unknown, undefined>>;
+declare const buttonIcon: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        cta: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-[13px] items-center justify-center aspect-square", {
+    variant: {
+        primary: string;
+        accent: string;
+        cta: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        cta: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-[13px] items-center justify-center aspect-square", unknown, unknown, undefined>>;
+export interface ButtonProps extends VariantProps<typeof button> {
+    title: string;
+    onPress?: () => void;
+    confirm?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+    icon?: React.ReactNode;
+}
+export interface ButtonIconProps extends VariantProps<typeof buttonIcon> {
+    icon: string;
+    onPress?: () => void;
+    confirm?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+declare const ButtonWithIcon: React.FC<ButtonProps> & {
+    Icon: React.FC<ButtonIconProps>;
+};
+export default ButtonWithIcon;

package/dist/Actions/Actions.Button.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { useConfirmationContext } from "../Dialog/Confirmation.context";
+import Icon from "../Display/Display.Icon";
+import { theme } from "../theme";
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { LinearGradient } from "expo-linear-gradient";
+import { useCallback } from "react";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { runOnJS } from "react-native-reanimated";
+// ─── Style variants ───────────────────────────────────────────────────────────
+const button = tv({
+    base: "rounded-[13px] items-center justify-center flex-row min-h-[44px]",
+    variants: {
+        variant: {
+            primary: "shadow-sm",
+            accent: "shadow-sm",
+            cta: "shadow-sm",
+            secondary: "bg-bg-muted",
+            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 min-h-0",
+            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]",
+            large: "py-3 px-5 min-h-[48px]",
+        },
+        disabled: {
+            true: "opacity-70",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "medium",
+    },
+});
+const buttonIcon = tv({
+    base: "rounded-[13px] items-center justify-center aspect-square",
+    variants: {
+        variant: {
+            primary: "shadow-sm",
+            accent: "shadow-sm",
+            cta: "shadow-sm",
+            secondary: "bg-bg-muted",
+            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-white",
+            accent: "text-text-on-accent",
+            cta: "text-text-on-accent",
+            secondary: "text-text-primary",
+            outline: "text-primary",
+            outlineDanger: "text-danger",
+            outlineBlack: "text-text-primary",
+            flat: "text-text-primary",
+            link: "text-primary",
+            transparent: "text-white",
+        },
+        disabled: {
+            true: "opacity-50",
+        },
+    },
+    compoundVariants: [
+        { variant: "primary", disabled: true, className: "text-white/70" },
+        { variant: "accent", disabled: true, className: "text-text-on-accent" },
+        { variant: "cta", disabled: true, className: "text-text-on-accent" },
+        { variant: "transparent", disabled: true, className: "text-white/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 helpers ─────────────────────────────────────────────────────
+function getLoadingColor(variant) {
+    const map = {
+        primary: theme.text.inverse,
+        accent: theme.text.inverse,
+        cta: theme.text.inverse,
+        secondary: theme.text.primary,
+        outline: theme.primary,
+        outlineDanger: theme.danger,
+        outlineBlack: theme.text.primary,
+        flat: theme.text.primary,
+        link: theme.primary,
+        transparent: theme.text.inverse,
+    };
+    return map[variant] ?? theme.text.inverse;
+}
+function getIconColor(variant, disabled) {
+    if (disabled) {
+        const map = {
+            primary: theme.icon.inverse + "70",
+            accent: theme.text.onAccent + "70",
+            cta: theme.text.onAccent + "70",
+            secondary: theme.text.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 map[variant] ?? theme.icon.disabled;
+    }
+    const map = {
+        primary: theme.icon.inverse,
+        accent: theme.text.onAccent,
+        cta: theme.text.onAccent,
+        secondary: theme.text.primary,
+        outline: theme.primary,
+        outlineDanger: theme.danger,
+        outlineBlack: theme.text.primary,
+        flat: theme.text.primary,
+        link: theme.primary,
+        transparent: theme.icon.inverse,
+    };
+    return map[variant] ?? theme.icon.inverse;
+}
+const iconSizeMap = { small: 16, medium: 20, large: 28 };
+const textVariantMap = {
+    small: "buttonSmall",
+    medium: "button",
+    large: "buttonLarge",
+};
+const Button = ({ title, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, }) => {
+    const { show, hide } = useConfirmationContext();
+    const textColorClass = textColor({ variant: variant, disabled });
+    const loadingColorValue = getLoadingColor(variant);
+    const textVariantValue = textVariantMap[size] ?? "button";
+    const handlePress = useCallback(() => {
+        if (confirm && onPress) {
+            show({
+                title: "Confirmar acción",
+                message: confirm,
+                confirmText: "Confirmar",
+                cancelText: "Cancelar",
+                onConfirm: () => {
+                    hide();
+                    runOnJS(onPress)();
+                },
+                onCancel: () => hide(),
+            });
+        }
+        else if (onPress) {
+            runOnJS(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 })) }));
+    }
+    if (variant === "primary" || variant === "accent" || variant === "cta") {
+        const gradientColors = variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
+        return (_jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: { borderRadius: 13, opacity: disabled ? 0.7 : 1 }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: handlePress, children: _jsx(View, { className: button({ size, disabled }), style: { backgroundColor: "transparent" }, 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, bold: true, className: textColorClass, ellipsizeMode: "tail", numberOfLines: 1, variant: textVariantValue, children: title })] })) }) }) }));
+    }
+    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, bold: true, className: textColorClass, ellipsizeMode: "tail", numberOfLines: 1, variant: textVariantValue, children: title })] })) }));
+};
+const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, }) => {
+    const { show, hide } = useConfirmationContext();
+    const iconColorValue = getIconColor(variant, disabled);
+    const iconSizeValue = iconSizeMap[size] ?? 20;
+    const loadingColorValue = getLoadingColor(variant);
+    const handlePress = useCallback(() => {
+        if (confirm && onPress) {
+            show({
+                title: "Confirmar acción",
+                message: confirm,
+                confirmText: "Confirmar",
+                cancelText: "Cancelar",
+                onConfirm: () => {
+                    hide();
+                    runOnJS(onPress)();
+                },
+                onCancel: () => hide(),
+            });
+        }
+        else if (onPress) {
+            runOnJS(onPress)();
+        }
+    }, [onPress, confirm, show, hide]);
+    if (variant === "primary") {
+        return (_jsx(LinearGradient, { colors: theme.gradient.primary, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: { borderRadius: 13, opacity: disabled ? 0.7 : 1 }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: handlePress, children: _jsx(View, { className: buttonIcon({ size, disabled }), style: { backgroundColor: "transparent" }, 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, 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.FAB.d.ts

@@ -0,0 +1,10 @@
+export interface FABProps {
+    icon: string;
+    onPress: () => void;
+    label?: string;
+    position?: "bottom-right" | "bottom-left";
+    className?: string;
+    testID?: string;
+}
+declare function FAB({ icon, onPress, label, position, className, testID, }: FABProps): import("react").JSX.Element;
+export default FAB;

package/dist/Actions/Actions.FAB.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+function FAB({ icon, onPress, label, position = "bottom-right", className, testID, }) {
+    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: {
+            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] }));
+}
+export default FAB;

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

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from "react";
+export interface FilterButtonProps {
+    title: string;
+    active: boolean;
+    onPress: () => void;
+}
+export declare const FilterButton: FC<FilterButtonProps>;
+export declare function FilterButtonGroup({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/Actions/Actions.FilterButton.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { TouchableOpacity, View } from "react-native";
+const filterButton = tv({
+    base: "rounded-lg items-center justify-center py-2 px-3 min-h-[36px]",
+    variants: {
+        active: {
+            true: "bg-primary border-0",
+            false: "bg-transparent border border-brand-primary",
+        },
+    },
+    defaultVariants: { active: false },
+});
+const filterText = tv({
+    base: "font-bold",
+    variants: {
+        active: {
+            true: "text-white",
+            false: "text-primary",
+        },
+    },
+    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 });
+}

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

@@ -0,0 +1,67 @@
+import { type VariantProps } from "../theme/tw";
+import { IconType } from "../utils/icon";
+declare const iconButton: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        ghost: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    rounded: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center", {
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        ghost: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    rounded: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        ghost: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    rounded: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center", unknown, unknown, undefined>>;
+export interface IconButtonProps extends VariantProps<typeof iconButton> {
+    icon?: string;
+    type?: IconType;
+    onPress: () => void;
+    loading?: boolean;
+    iconColor?: string;
+    className?: string;
+}
+declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, }: IconButtonProps): import("react").JSX.Element;
+export default IconButton;

package/dist/Actions/Actions.IconButton.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { Display } from "../Display";
+import { theme } from "../theme";
+import { tv } from "../theme/tw";
+import { ActivityIndicator, TouchableOpacity } from "react-native";
+const iconButton = tv({
+    base: "rounded-lg items-center justify-center",
+    variants: {
+        variant: {
+            primary: "bg-primary",
+            secondary: "bg-bg-card border border-primary",
+            tertiary: "bg-accent",
+            ghost: "bg-transparent",
+        },
+        size: {
+            small: "w-8 h-8",
+            medium: "w-10 h-10",
+            large: "w-12 h-12",
+        },
+        rounded: {
+            true: "rounded-full",
+        },
+        disabled: {
+            true: "opacity-50",
+        },
+    },
+    defaultVariants: {
+        variant: "ghost",
+        size: "medium",
+        rounded: false,
+        disabled: false,
+    },
+});
+function IconButton({ icon, type = "feather", onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, }) {
+    const resolvedColor = iconColor ?? theme.primary;
+    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 })) }));
+}
+export default IconButton;

package/dist/Actions/index.d.ts

@@ -0,0 +1,22 @@
+import FAB from "../Actions/Actions.FAB";
+import { FilterButtonGroup } from "../Actions/Actions.FilterButton";
+import IconButton from "../Actions/Actions.IconButton";
+export declare const Actions: {
+    /** Primary action button — gradient, outline, flat, link variants. Supports confirm dialog. */
+    Button: import("react").FC<import("../Actions/Actions.Button").ButtonProps> & {
+        Icon: import("react").FC<import("../Actions/Actions.Button").ButtonIconProps>;
+    };
+    /** 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/Actions.FilterButton").FilterButtonProps>;
+    /** Horizontal scroll container for `Actions.FilterButton` chips. */
+    FilterButtonGroup: typeof FilterButtonGroup;
+};
+export type { ButtonIconProps, ButtonProps } from "../Actions/Actions.Button";
+export type { FABProps } from "../Actions/Actions.FAB";
+export type { FilterButtonProps } from "../Actions/Actions.FilterButton";
+export type { IconButtonProps } from "../Actions/Actions.IconButton";
+export default Actions;

package/dist/Actions/index.js

@@ -0,0 +1,17 @@
+import ButtonWithIcon from "../Actions/Actions.Button";
+import FAB from "../Actions/Actions.FAB";
+import { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton";
+import IconButton from "../Actions/Actions.IconButton";
+export const Actions = {
+    /** Primary action button — gradient, outline, flat, link variants. Supports confirm dialog. */
+    Button: ButtonWithIcon,
+    /** 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. */
+    FilterButtonGroup,
+};
+export default Actions;

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+/* eslint-disable react-hooks/refs */
 import { theme } from "../../theme";
 import { createContext, useContext, useEffect, useRef } from "react";
 import { Animated, Dimensions, Modal, PanResponder, Pressable, ScrollView, Text, View, } from "react-native";

package/dist/Dialog/Dialog.Sheet.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { theme } from "../theme";
 import { Typography } from "../Typography";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Animated, Modal, PanResponder, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**
@@ -18,14 +18,16 @@ export function SheetProvider({ children }) {
  */
 function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismissOnBackdrop = false, testID, }) {
     const insets = useSafeAreaInsets();
-    const translateY = useRef(new Animated.Value(0)).current;
+    const [translateY] = useState(() => new Animated.Value(0));
     const onCloseRef = useRef(onClose);
+    // eslint-disable-next-line react-hooks/refs
     onCloseRef.current = onClose;
     useEffect(() => {
         if (visible)
             translateY.setValue(0);
     }, [visible, translateY]);
-    const pan = useRef(PanResponder.create({
+    // eslint-disable-next-line react-hooks/refs
+    const [pan] = useState(() => PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_, g) => g.dy > 2,
         onPanResponderMove: (_, g) => {
@@ -44,7 +46,7 @@ function Sheet({ visible, onClose, children, title, maxHeightRatio = 0.9, dismis
                 Animated.spring(translateY, { toValue: 0, useNativeDriver: true }).start();
             }
         },
-    })).current;
+    }));
     return (_jsx(Modal, { animationType: "slide", onRequestClose: onClose, transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 justify-end", testID: testID, children: [_jsx(View, { className: "absolute inset-0 bg-black/50", onResponderRelease: dismissOnBackdrop ? onClose : undefined, onStartShouldSetResponder: () => dismissOnBackdrop }), _jsxs(Animated.View, { className: "rounded-t-3xl", style: {
                         backgroundColor: theme.bg.card,
                         paddingBottom: insets.bottom + 12,

package/dist/Display/Display.CircleButton.d.ts

@@ -0,0 +1,15 @@
+import { IconType } from "../utils/icon";
+import { ComponentType } from "react";
+export interface CircleButtonProps {
+    iconType?: IconType;
+    size?: "sm" | "md" | "lg";
+    color?: string;
+    variant?: "primary" | "secondary" | "accent" | "success" | "danger" | "warning";
+    className?: string;
+    customIcon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+}
+export declare function CircleButton({ iconType, size, color, variant, className, customIcon, }: CircleButtonProps): import("react").JSX.Element;
+export default CircleButton;