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

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

@@ -0,0 +1,244 @@
+'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

@@ -0,0 +1,309 @@
+'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

@@ -0,0 +1,12 @@
+'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

@@ -0,0 +1,34 @@
+'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 };