@admin-layout/gluestack-ui-mobile 11.0.1-alpha.0 → 11.0.2-alpha.0

package/lib/components/ui/menu/index.d.ts

@@ -0,0 +1,376 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+declare const menuStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{} | {}, undefined, "rounded-md bg-background-0 border border-outline-100 p-1 shadow-hard-5", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<unknown, undefined, "rounded-md bg-background-0 border border-outline-100 p-1 shadow-hard-5", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, unknown, undefined>>;
+declare const menuItemLabelStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    isTruncated: {
+        true: string;
+    };
+    bold: {
+        true: string;
+    };
+    underline: {
+        true: string;
+    };
+    strikeThrough: {
+        true: string;
+    };
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+    };
+    sub: {
+        true: string;
+    };
+    italic: {
+        true: string;
+    };
+    highlight: {
+        true: string;
+    };
+} | ({
+    isTruncated: {
+        true: string;
+    };
+    bold: {
+        true: string;
+    };
+    underline: {
+        true: string;
+    };
+    strikeThrough: {
+        true: string;
+    };
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+    };
+    sub: {
+        true: string;
+    };
+    italic: {
+        true: string;
+    };
+    highlight: {
+        true: string;
+    };
+} & {
+    isTruncated: {
+        true: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    bold: {
+        true: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    underline: {
+        true: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    strikeThrough: {
+        true: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    size: {
+        '2xs': import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        xs: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        sm: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        md: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        lg: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        xl: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        '2xl': import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        '3xl': import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        '4xl': import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        '5xl': import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        '6xl': import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    sub: {
+        true: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    italic: {
+        true: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+    highlight: {
+        true: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+}), undefined, "text-typography-700 font-normal font-body", import("tailwind-variants/dist/config").TVConfig<{
+    isTruncated: {
+        true: string;
+    };
+    bold: {
+        true: string;
+    };
+    underline: {
+        true: string;
+    };
+    strikeThrough: {
+        true: string;
+    };
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+    };
+    sub: {
+        true: string;
+    };
+    italic: {
+        true: string;
+    };
+    highlight: {
+        true: string;
+    };
+}, {
+    isTruncated: {
+        true: string;
+    };
+    bold: {
+        true: string;
+    };
+    underline: {
+        true: string;
+    };
+    strikeThrough: {
+        true: string;
+    };
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+    };
+    sub: {
+        true: string;
+    };
+    italic: {
+        true: string;
+    };
+    highlight: {
+        true: string;
+    };
+}>, {
+    isTruncated: {
+        true: string;
+    };
+    bold: {
+        true: string;
+    };
+    underline: {
+        true: string;
+    };
+    strikeThrough: {
+        true: string;
+    };
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+    };
+    sub: {
+        true: string;
+    };
+    italic: {
+        true: string;
+    };
+    highlight: {
+        true: string;
+    };
+}, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    isTruncated: {
+        true: string;
+    };
+    bold: {
+        true: string;
+    };
+    underline: {
+        true: string;
+    };
+    strikeThrough: {
+        true: string;
+    };
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+    };
+    sub: {
+        true: string;
+    };
+    italic: {
+        true: string;
+    };
+    highlight: {
+        true: string;
+    };
+}, undefined, "text-typography-700 font-normal font-body", import("tailwind-variants/dist/config").TVConfig<{
+    isTruncated: {
+        true: string;
+    };
+    bold: {
+        true: string;
+    };
+    underline: {
+        true: string;
+    };
+    strikeThrough: {
+        true: string;
+    };
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+    };
+    sub: {
+        true: string;
+    };
+    italic: {
+        true: string;
+    };
+    highlight: {
+        true: string;
+    };
+}, {
+    isTruncated: {
+        true: string;
+    };
+    bold: {
+        true: string;
+    };
+    underline: {
+        true: string;
+    };
+    strikeThrough: {
+        true: string;
+    };
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+    };
+    sub: {
+        true: string;
+    };
+    italic: {
+        true: string;
+    };
+    highlight: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const UIMenu: import("@gluestack-ui/menu/lib/types").IMenuComponentType<import("react-native").Animated.AnimatedProps<import("react-native").ViewProps & React.RefAttributes<View>> & import("@legendapp/motion").MotionComponentProps<typeof View, import("react-native").ViewStyle, unknown, unknown, unknown>, VariantProps<import("@gluestack-ui/nativewind-utils/types").TVReturnType<{} | {}, undefined, "min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<unknown, undefined, "min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, unknown, undefined>>> & {
+    className?: string;
+} & Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & React.RefAttributes<View>, import("react-native").TextProps, Omit<any, "ref"> & React.RefAttributes<unknown>>;
+type IMenuProps = React.ComponentProps<typeof UIMenu> & VariantProps<typeof menuStyle> & {
+    className?: string;
+};
+type IMenuItemLabelProps = React.ComponentProps<typeof UIMenu.ItemLabel> & VariantProps<typeof menuItemLabelStyle> & {
+    className?: string;
+};
+declare const Menu: React.ForwardRefExoticComponent<Omit<IMenuProps, "ref"> & React.RefAttributes<import("react-native").Animated.AnimatedProps<import("react-native").ViewProps & React.RefAttributes<View>> & import("@legendapp/motion").MotionComponentProps<typeof View, import("react-native").ViewStyle, unknown, unknown, unknown>>>;
+declare const MenuItem: React.ForwardRefExoticComponent<React.RefAttributes<VariantProps<import("@gluestack-ui/nativewind-utils/types").TVReturnType<{} | {}, undefined, "min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<unknown, undefined, "min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, unknown, undefined>>> & {
+    className?: string;
+} & Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & React.RefAttributes<View>> & Omit<VariantProps<import("@gluestack-ui/nativewind-utils/types").TVReturnType<{} | {}, undefined, "min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<unknown, undefined, "min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, unknown, undefined>>> & {
+    className?: string;
+} & Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & React.RefAttributes<View>, "ref"> & import("react-stately").ItemProps<VariantProps<import("@gluestack-ui/nativewind-utils/types").TVReturnType<{} | {}, undefined, "min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<unknown, undefined, "min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, unknown, undefined>>> & {
+    className?: string;
+} & Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & React.RefAttributes<View>> & import("@gluestack-ui/menu/lib/types").IItemProp>;
+declare const MenuItemLabel: React.ForwardRefExoticComponent<Omit<IMenuItemLabelProps, "ref"> & React.RefAttributes<import("react-native").TextProps>>;
+declare const MenuSeparator: React.ForwardRefExoticComponent<React.RefAttributes<Omit<any, "ref"> & React.RefAttributes<unknown>> & Omit<Omit<any, "ref"> & React.RefAttributes<unknown>, "ref">>;
+export { Menu, MenuItem, MenuItemLabel, MenuSeparator };

package/lib/components/ui/menu/index.js

@@ -0,0 +1,120 @@
+'use client';
+import React from 'react';
+import { createMenu } from '@gluestack-ui/menu';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { cssInterop } from 'nativewind';
+import { Pressable, Text, View } from 'react-native';
+import { Motion, AnimatePresence } from '@legendapp/motion';
+const menuStyle = tva({
+    base: 'rounded-md bg-background-0 border border-outline-100 p-1 shadow-hard-5',
+});
+const menuItemStyle = tva({
+    base: 'min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent',
+});
+const menuBackdropStyle = tva({
+    base: 'absolute top-0 bottom-0 left-0 right-0 web:cursor-default',
+    // add this classnames if you want to give background color to backdrop
+    // opacity-50 bg-background-500,
+});
+const menuSeparatorStyle = tva({
+    base: 'bg-background-200 h-px w-full',
+});
+const menuItemLabelStyle = tva({
+    base: 'text-typography-700 font-normal font-body',
+    variants: {
+        isTruncated: {
+            true: 'web:truncate',
+        },
+        bold: {
+            true: 'font-bold',
+        },
+        underline: {
+            true: 'underline',
+        },
+        strikeThrough: {
+            true: 'line-through',
+        },
+        size: {
+            '2xs': 'text-2xs',
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-lg',
+            xl: 'text-xl',
+            '2xl': 'text-2xl',
+            '3xl': 'text-3xl',
+            '4xl': 'text-4xl',
+            '5xl': 'text-5xl',
+            '6xl': 'text-6xl',
+        },
+        sub: {
+            true: 'text-xs',
+        },
+        italic: {
+            true: 'italic',
+        },
+        highlight: {
+            true: 'bg-yellow-500',
+        },
+    },
+});
+const BackdropPressable = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement(Pressable, { ref: ref, className: menuBackdropStyle({
+            class: className,
+        }), ...props }));
+});
+const Item = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement(Pressable, { ref: ref, className: menuItemStyle({
+            class: className,
+        }), ...props }));
+});
+const Separator = React.forwardRef(({ className, ...props }, ref) => {
+    return React.createElement(View, { ref: ref, className: menuSeparatorStyle({ class: className }), ...props });
+});
+export const UIMenu = createMenu({
+    Root: Motion.View,
+    Item: Item,
+    Label: Text,
+    Backdrop: BackdropPressable,
+    AnimatePresence: AnimatePresence,
+    Separator: Separator,
+});
+cssInterop(Motion.View, { className: 'style' });
+const Menu = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement(UIMenu, { ref: ref, initial: {
+            opacity: 0,
+            scale: 0.8,
+        }, animate: {
+            opacity: 1,
+            scale: 1,
+        }, exit: {
+            opacity: 0,
+            scale: 0.8,
+        }, transition: {
+            type: 'timing',
+            duration: 100,
+        }, className: menuStyle({
+            class: className,
+        }), ...props }));
+});
+const MenuItem = UIMenu.Item;
+const MenuItemLabel = React.forwardRef(({ className, isTruncated, bold, underline, strikeThrough, size = 'md', sub, italic, highlight, ...props }, ref) => {
+    return (React.createElement(UIMenu.ItemLabel, { ref: ref, className: menuItemLabelStyle({
+            isTruncated,
+            bold,
+            underline,
+            strikeThrough,
+            size,
+            sub,
+            italic,
+            highlight,
+            class: className,
+        }), ...props }));
+});
+const MenuSeparator = UIMenu.Separator;
+Menu.displayName = 'Menu';
+MenuItem.displayName = 'MenuItem';
+MenuItemLabel.displayName = 'MenuItemLabel';
+MenuSeparator.displayName = 'MenuSeparator';
+export { Menu, MenuItem, MenuItemLabel, MenuSeparator };
+//# sourceMappingURL=index.js.map

package/lib/components/ui/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/menu/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/ui/modal/index.d.ts

@@ -0,0 +1,146 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+declare const UIModal: import("@gluestack-ui/modal/lib/types").IModalComponentType<import("react-native").ViewProps & {
+    context?: any;
+} & React.RefAttributes<typeof View>, import("react-native").Animated.AnimatedProps<import("react-native").ViewProps & React.RefAttributes<View>> & import("@legendapp/motion").MotionComponentProps<typeof View, import("react-native").ViewStyle, unknown, unknown, unknown>, import("react-native").PressableProps & React.RefAttributes<View>, import("react-native").ViewProps, import("react-native").ViewProps, import("react-native").ScrollViewProps, import("react-native").Animated.AnimatedProps<Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
+    ref?: React.Ref<View>;
+}> & import("@legendapp/motion").MotionComponentProps<React.ForwardRefExoticComponent<import("react-native").PressableProps & React.RefAttributes<View>>, import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>), unknown, unknown, unknown>>;
+declare const modalStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+} | ({
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+} & {
+    size: {
+        xs: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        sm: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        md: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        lg: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+        full: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+}), undefined, "group/modal w-full h-full justify-center items-center web:pointer-events-none", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+}, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+}, undefined, "group/modal w-full h-full justify-center items-center web:pointer-events-none", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const modalBackdropStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{} | {}, undefined, "absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<unknown, undefined, "absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, unknown, undefined>>;
+declare const modalContentStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+} | ({} & {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+}), undefined, "bg-background-0 rounded-md overflow-hidden border border-outline-100 shadow-hard-2 p-6", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<unknown, undefined, "bg-background-0 rounded-md overflow-hidden border border-outline-100 shadow-hard-2 p-6", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, unknown, undefined>>;
+declare const modalBodyStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{} | {}, undefined, "mt-2 mb-6", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<unknown, undefined, "mt-2 mb-6", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, unknown, undefined>>;
+declare const modalCloseButtonStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{} | {}, undefined, "group/modal-close-button z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<unknown, undefined, "group/modal-close-button z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, unknown, undefined>>;
+declare const modalHeaderStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{} | {}, undefined, "justify-between items-center flex-row", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<unknown, undefined, "justify-between items-center flex-row", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, unknown, undefined>>;
+declare const modalFooterStyle: import("@gluestack-ui/nativewind-utils/types").TVReturnType<{} | {}, undefined, "flex-row justify-end items-center gap-2", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, undefined, import("@gluestack-ui/nativewind-utils/types").TVReturnType<unknown, undefined, "flex-row justify-end items-center gap-2", import("tailwind-variants/dist/config").TVConfig<unknown, unknown>, unknown, unknown, undefined>>;
+type IModalProps = React.ComponentProps<typeof UIModal> & VariantProps<typeof modalStyle> & {
+    className?: string;
+};
+type IModalBackdropProps = React.ComponentProps<typeof UIModal.Backdrop> & VariantProps<typeof modalBackdropStyle> & {
+    className?: string;
+};
+type IModalContentProps = React.ComponentProps<typeof UIModal.Content> & VariantProps<typeof modalContentStyle> & {
+    className?: string;
+};
+type IModalHeaderProps = React.ComponentProps<typeof UIModal.Header> & VariantProps<typeof modalHeaderStyle> & {
+    className?: string;
+};
+type IModalBodyProps = React.ComponentProps<typeof UIModal.Body> & VariantProps<typeof modalBodyStyle> & {
+    className?: string;
+};
+type IModalFooterProps = React.ComponentProps<typeof UIModal.Footer> & VariantProps<typeof modalFooterStyle> & {
+    className?: string;
+};
+type IModalCloseButtonProps = React.ComponentProps<typeof UIModal.CloseButton> & VariantProps<typeof modalCloseButtonStyle> & {
+    className?: string;
+};
+declare const Modal: React.ForwardRefExoticComponent<Omit<IModalProps, "ref"> & React.RefAttributes<import("react-native").ViewProps & {
+    context?: any;
+} & React.RefAttributes<typeof View>>>;
+declare const ModalBackdrop: React.ForwardRefExoticComponent<Omit<IModalBackdropProps, "ref"> & React.RefAttributes<import("react-native").Animated.AnimatedProps<Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
+    ref?: React.Ref<View>;
+}> & import("@legendapp/motion").MotionComponentProps<React.ForwardRefExoticComponent<import("react-native").PressableProps & React.RefAttributes<View>>, import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>), unknown, unknown, unknown>>>;
+declare const ModalContent: React.ForwardRefExoticComponent<Omit<IModalContentProps, "ref"> & React.RefAttributes<import("react-native").Animated.AnimatedProps<import("react-native").ViewProps & React.RefAttributes<View>> & import("@legendapp/motion").MotionComponentProps<typeof View, import("react-native").ViewStyle, unknown, unknown, unknown>>>;
+declare const ModalHeader: React.ForwardRefExoticComponent<Omit<IModalHeaderProps, "ref"> & React.RefAttributes<import("react-native").ViewProps>>;
+declare const ModalBody: React.ForwardRefExoticComponent<Omit<IModalBodyProps, "ref"> & React.RefAttributes<import("react-native").ScrollViewProps>>;
+declare const ModalFooter: React.ForwardRefExoticComponent<Omit<IModalFooterProps, "ref"> & React.RefAttributes<import("react-native").ViewProps>>;
+declare const ModalCloseButton: React.ForwardRefExoticComponent<Omit<IModalCloseButtonProps, "ref"> & React.RefAttributes<import("react-native").PressableProps & React.RefAttributes<View>>>;
+export { Modal, ModalBackdrop, ModalContent, ModalCloseButton, ModalHeader, ModalBody, ModalFooter };