@admin-layout/gluestack-ui-mobile 11.0.4-alpha.4 → 11.2.1-alpha.1

package/src/components/ui/modal/index.tsx

@@ -1,244 +0,0 @@
-'use client';
-import React from 'react';
-import { createModal } from '@gluestack-ui/modal';
-import { Pressable, View, ScrollView } from 'react-native';
-import { Motion, AnimatePresence, createMotionAnimatedComponent } from '@legendapp/motion';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const AnimatedPressable = createMotionAnimatedComponent(Pressable);
-const SCOPE = 'MODAL';
-
-const UIModal = createModal({
-    Root: withStyleContext(View, SCOPE),
-    Backdrop: AnimatedPressable,
-    Content: Motion.View,
-    Body: ScrollView,
-    CloseButton: Pressable,
-    Footer: View,
-    Header: View,
-    AnimatePresence: AnimatePresence,
-});
-
-cssInterop(AnimatedPressable, { className: 'style' });
-cssInterop(Motion.View, { className: 'style' });
-
-const modalStyle = tva({
-    base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none',
-    variants: {
-        size: {
-            xs: '',
-            sm: '',
-            md: '',
-            lg: '',
-            full: '',
-        },
-    },
-});
-
-const modalBackdropStyle = tva({
-    base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',
-});
-
-const modalContentStyle = tva({
-    base: 'bg-background-0 rounded-md overflow-hidden border border-outline-100 shadow-hard-2 p-6',
-    parentVariants: {
-        size: {
-            xs: 'w-[60%] max-w-[360px]',
-            sm: 'w-[70%] max-w-[420px]',
-            md: 'w-[80%] max-w-[510px]',
-            lg: 'w-[90%] max-w-[640px]',
-            full: 'w-full',
-        },
-    },
-});
-
-const modalBodyStyle = tva({
-    base: 'mt-2 mb-6',
-});
-
-const modalCloseButtonStyle = tva({
-    base: 'group/modal-close-button z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer',
-});
-
-const modalHeaderStyle = tva({
-    base: 'justify-between items-center flex-row',
-});
-
-const modalFooterStyle = tva({
-    base: 'flex-row justify-end items-center gap-2',
-});
-
-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 };
-
-const Modal = React.forwardRef<React.ElementRef<typeof UIModal>, IModalProps>(
-    ({ className, size = 'md', ...props }, ref) => (
-        <UIModal
-            ref={ref}
-            {...props}
-            pointerEvents="box-none"
-            className={modalStyle({ size, class: className })}
-            context={{ size }}
-        />
-    ),
-);
-
-const ModalBackdrop = React.forwardRef<React.ElementRef<typeof UIModal.Backdrop>, IModalBackdropProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIModal.Backdrop
-                ref={ref}
-                initial={{
-                    opacity: 0,
-                }}
-                animate={{
-                    opacity: 0.5,
-                }}
-                exit={{
-                    opacity: 0,
-                }}
-                transition={{
-                    type: 'spring',
-                    damping: 18,
-                    stiffness: 250,
-                    opacity: {
-                        type: 'timing',
-                        duration: 250,
-                    },
-                }}
-                {...props}
-                className={modalBackdropStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const ModalContent = React.forwardRef<React.ElementRef<typeof UIModal.Content>, IModalContentProps>(
-    ({ className, size, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        return (
-            <UIModal.Content
-                ref={ref}
-                initial={{
-                    opacity: 0,
-                    scale: 0.9,
-                }}
-                animate={{
-                    opacity: 1,
-                    scale: 1,
-                }}
-                exit={{
-                    opacity: 0,
-                }}
-                transition={{
-                    type: 'spring',
-                    damping: 18,
-                    stiffness: 250,
-                    opacity: {
-                        type: 'timing',
-                        duration: 250,
-                    },
-                }}
-                {...props}
-                className={modalContentStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    size,
-                    class: className,
-                })}
-                pointerEvents="auto"
-            />
-        );
-    },
-);
-
-const ModalHeader = React.forwardRef<React.ElementRef<typeof UIModal.Header>, IModalHeaderProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIModal.Header
-                ref={ref}
-                {...props}
-                className={modalHeaderStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const ModalBody = React.forwardRef<React.ElementRef<typeof UIModal.Body>, IModalBodyProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIModal.Body
-                ref={ref}
-                {...props}
-                className={modalBodyStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const ModalFooter = React.forwardRef<React.ElementRef<typeof UIModal.Footer>, IModalFooterProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIModal.Footer
-                ref={ref}
-                {...props}
-                className={modalFooterStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const ModalCloseButton = React.forwardRef<React.ElementRef<typeof UIModal.CloseButton>, IModalCloseButtonProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIModal.CloseButton
-                ref={ref}
-                {...props}
-                className={modalCloseButtonStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-// Assign display names
-Modal.displayName = 'Modal';
-ModalBackdrop.displayName = 'ModalBackdrop';
-ModalContent.displayName = 'ModalContent';
-ModalHeader.displayName = 'ModalHeader';
-ModalBody.displayName = 'ModalBody';
-ModalFooter.displayName = 'ModalFooter';
-ModalCloseButton.displayName = 'ModalCloseButton';
-
-export { Modal, ModalBackdrop, ModalContent, ModalCloseButton, ModalHeader, ModalBody, ModalFooter };

package/src/components/ui/popover/index.tsx

@@ -1,309 +0,0 @@
-'use client';
-import React from 'react';
-import { View, Pressable, ScrollView } from 'react-native';
-import { Motion, createMotionAnimatedComponent, AnimatePresence } from '@legendapp/motion';
-import { createPopover } from '@gluestack-ui/popover';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const AnimatedPressable = createMotionAnimatedComponent(Pressable);
-const SCOPE = 'POPOVER';
-
-const UIPopover = createPopover({
-    Root: withStyleContext(View, SCOPE),
-    Arrow: Motion.View,
-    Backdrop: AnimatedPressable,
-    Body: ScrollView,
-    CloseButton: Pressable,
-    Content: Motion.View,
-    Footer: View,
-    Header: View,
-    AnimatePresence: AnimatePresence,
-});
-
-cssInterop(Motion.View, { className: 'style' });
-cssInterop(AnimatedPressable, { className: 'style' });
-
-const popoverStyle = tva({
-    base: 'group/popover w-full h-full justify-center items-center web:pointer-events-none',
-    variants: {
-        size: {
-            xs: '',
-            sm: '',
-            md: '',
-            lg: '',
-            full: '',
-        },
-    },
-});
-
-const popoverArrowStyle = tva({
-    base: 'bg-background-0 z-[1] border absolute overflow-hidden h-3.5 w-3.5 border-outline-100',
-    variants: {
-        placement: {
-            'top left':
-                'data-[flip=false]:border-t-0 data-[flip=false]:border-l-0 data-[flip=true]:border-b-0 data-[flip=true]:border-r-0',
-            top: 'data-[flip=false]:border-t-0 data-[flip=false]:border-l-0 data-[flip=true]:border-b-0 data-[flip=true]:border-r-0',
-            'top right':
-                'data-[flip=false]:border-t-0 data-[flip=false]:border-l-0 data-[flip=true]:border-b-0 data-[flip=true]:border-r-0',
-            bottom: 'data-[flip=false]:border-b-0 data-[flip=false]:border-r-0 data-[flip=true]:border-t-0 data-[flip=true]:border-l-0',
-            'bottom left':
-                'data-[flip=false]:border-b-0 data-[flip=false]:border-r-0 data-[flip=true]:border-t-0 data-[flip=true]:border-l-0',
-            'bottom right':
-                'data-[flip=false]:border-b-0 data-[flip=false]:border-r-0 data-[flip=true]:border-t-0 data-[flip=true]:border-l-0',
-            left: 'data-[flip=false]:border-l-0 data-[flip=false]:border-b-0 data-[flip=true]:border-r-0 data-[flip=true]:border-t-0',
-            'left top':
-                'data-[flip=false]:border-l-0 data-[flip=false]:border-b-0 data-[flip=true]:border-r-0 data-[flip=true]:border-t-0',
-            'left bottom':
-                'data-[flip=false]:border-l-0 data-[flip=false]:border-b-0 data-[flip=true]:border-r-0 data-[flip=true]:border-t-0',
-            right: 'data-[flip=false]:border-r-0 data-[flip=false]:border-t-0 data-[flip=true]:border-l-0 data-[flip=true]:border-b-0',
-            'right top':
-                'data-[flip=false]:border-r-0 data-[flip=false]:border-t-0 data-[flip=true]:border-l-0 data-[flip=true]:border-b-0',
-            'right bottom':
-                'data-[flip=false]:border-r-0 data-[flip=false]:border-t-0 data-[flip=true]:border-l-0 data-[flip=true]:border-b-0',
-        },
-    },
-});
-
-const popoverBackdropStyle = tva({
-    base: 'absolute left-0 top-0 right-0 bottom-0 web:cursor-default',
-});
-
-const popoverCloseButtonStyle = tva({
-    base: 'group/popover-close-button z-[1] rounded-sm data-[focus-visible=true]:web:bg-background-100 web:outline-0 web:cursor-pointer',
-});
-
-const popoverContentStyle = tva({
-    base: 'bg-background-0 rounded-lg overflow-hidden border border-outline-100 w-full',
-    parentVariants: {
-        size: {
-            xs: 'max-w-[360px] p-3.5',
-            sm: 'max-w-[420px] p-4',
-            md: 'max-w-[510px] p-[18px]',
-            lg: 'max-w-[640px] p-5',
-            full: 'p-6',
-        },
-    },
-});
-
-const popoverHeaderStyle = tva({
-    base: 'flex-row justify-between items-center',
-});
-
-const popoverBodyStyle = tva({
-    base: '',
-});
-
-const popoverFooterStyle = tva({
-    base: 'flex-row justify-between items-center',
-});
-
-type IPopoverProps = React.ComponentProps<typeof UIPopover> &
-    VariantProps<typeof popoverStyle> & { className?: string };
-
-type IPopoverArrowProps = React.ComponentProps<typeof UIPopover.Arrow> &
-    VariantProps<typeof popoverArrowStyle> & { className?: string };
-
-type IPopoverContentProps = React.ComponentProps<typeof UIPopover.Content> &
-    VariantProps<typeof popoverContentStyle> & { className?: string };
-
-type IPopoverHeaderProps = React.ComponentProps<typeof UIPopover.Header> &
-    VariantProps<typeof popoverHeaderStyle> & { className?: string };
-
-type IPopoverFooterProps = React.ComponentProps<typeof UIPopover.Footer> &
-    VariantProps<typeof popoverFooterStyle> & { className?: string };
-
-type IPopoverBodyProps = React.ComponentProps<typeof UIPopover.Body> &
-    VariantProps<typeof popoverBodyStyle> & { className?: string };
-
-type IPopoverBackdropProps = React.ComponentProps<typeof UIPopover.Backdrop> &
-    VariantProps<typeof popoverBackdropStyle> & { className?: string };
-
-type IPopoverCloseButtonProps = React.ComponentProps<typeof UIPopover.CloseButton> &
-    VariantProps<typeof popoverCloseButtonStyle> & { className?: string };
-
-const Popover = React.forwardRef<React.ElementRef<typeof UIPopover>, IPopoverProps>(
-    ({ className, size = 'md', placement = 'bottom', ...props }, ref) => {
-        return (
-            <UIPopover
-                ref={ref}
-                placement={placement}
-                {...props}
-                className={popoverStyle({ size, class: className })}
-                context={{ size, placement }}
-                pointerEvents="box-none"
-            />
-        );
-    },
-);
-
-const PopoverContent = React.forwardRef<React.ElementRef<typeof UIPopover.Content>, IPopoverContentProps>(
-    ({ className, size, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        return (
-            <UIPopover.Content
-                ref={ref}
-                transition={{
-                    type: 'spring',
-                    damping: 18,
-                    stiffness: 250,
-                    mass: 0.9,
-                    opacity: {
-                        type: 'timing',
-                        duration: 50,
-                        delay: 50,
-                    },
-                }}
-                {...props}
-                className={popoverContentStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    size,
-                    class: className,
-                })}
-                pointerEvents="auto"
-            />
-        );
-    },
-);
-
-const PopoverArrow = React.forwardRef<React.ElementRef<typeof UIPopover.Arrow>, IPopoverArrowProps>(
-    ({ className, ...props }, ref) => {
-        const { placement } = useStyleContext(SCOPE);
-        return (
-            <UIPopover.Arrow
-                ref={ref}
-                transition={{
-                    type: 'spring',
-                    damping: 18,
-                    stiffness: 250,
-                    mass: 0.9,
-                    opacity: {
-                        type: 'timing',
-                        duration: 50,
-                        delay: 50,
-                    },
-                }}
-                {...props}
-                className={popoverArrowStyle({
-                    class: className,
-                    placement,
-                })}
-            />
-        );
-    },
-);
-
-const PopoverBackdrop = React.forwardRef<React.ElementRef<typeof UIPopover.Backdrop>, IPopoverBackdropProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIPopover.Backdrop
-                ref={ref}
-                {...props}
-                initial={{
-                    opacity: 0,
-                }}
-                animate={{
-                    opacity: 0.1,
-                }}
-                exit={{
-                    opacity: 0,
-                }}
-                transition={{
-                    type: 'spring',
-                    damping: 18,
-                    stiffness: 450,
-                    mass: 0.9,
-                    opacity: {
-                        type: 'timing',
-                        duration: 50,
-                        delay: 50,
-                    },
-                }}
-                className={popoverBackdropStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const PopoverBody = React.forwardRef<React.ElementRef<typeof UIPopover.Body>, IPopoverBodyProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIPopover.Body
-                ref={ref}
-                {...props}
-                className={popoverBodyStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const PopoverCloseButton = React.forwardRef<React.ElementRef<typeof UIPopover.CloseButton>, IPopoverCloseButtonProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIPopover.CloseButton
-                ref={ref}
-                {...props}
-                className={popoverCloseButtonStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const PopoverFooter = React.forwardRef<React.ElementRef<typeof UIPopover.Footer>, IPopoverFooterProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIPopover.Footer
-                ref={ref}
-                {...props}
-                className={popoverFooterStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const PopoverHeader = React.forwardRef<React.ElementRef<typeof UIPopover.Header>, IPopoverHeaderProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIPopover.Header
-                ref={ref}
-                {...props}
-                className={popoverHeaderStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-Popover.displayName = 'Popover';
-PopoverArrow.displayName = 'PopoverArrow';
-PopoverBackdrop.displayName = 'PopoverBackdrop';
-PopoverContent.displayName = 'PopoverContent';
-PopoverHeader.displayName = 'PopoverHeader';
-PopoverFooter.displayName = 'PopoverFooter';
-PopoverBody.displayName = 'PopoverBody';
-PopoverCloseButton.displayName = 'PopoverCloseButton';
-
-export {
-    Popover,
-    PopoverBackdrop,
-    PopoverArrow,
-    PopoverCloseButton,
-    PopoverFooter,
-    PopoverHeader,
-    PopoverBody,
-    PopoverContent,
-};

package/src/components/ui/portal/index.tsx

@@ -1,12 +0,0 @@
-'use client';
-import React from 'react';
-import { Overlay } from '@gluestack-ui/overlay';
-import { cssInterop } from 'nativewind';
-
-cssInterop(Overlay, { className: 'style' });
-
-export const Portal = React.forwardRef<React.ElementRef<typeof Overlay>, React.ComponentProps<typeof Overlay>>(
-    ({ ...props }: React.ComponentProps<typeof Overlay>, ref) => {
-        return <Overlay {...props} ref={ref} />;
-    },
-);

package/src/components/ui/pressable/index.tsx

@@ -1,34 +0,0 @@
-'use client';
-import React from 'react';
-import { createPressable } from '@gluestack-ui/pressable';
-import { Pressable as RNPressable } from 'react-native';
-
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const UIPressable = createPressable({
-    Root: withStyleContext(RNPressable),
-});
-
-const pressableStyle = tva({
-    base: 'data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-indicator-info data-[focus-visible=true]:ring-2 data-[disabled=true]:opacity-40',
-});
-
-type IPressableProps = Omit<React.ComponentProps<typeof UIPressable>, 'context'> & VariantProps<typeof pressableStyle>;
-const Pressable = React.forwardRef<React.ElementRef<typeof UIPressable>, IPressableProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIPressable
-                {...props}
-                ref={ref}
-                className={pressableStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-Pressable.displayName = 'Pressable';
-export { Pressable };