@admin-layout/gluestack-ui-mobile 12.0.16-alpha.93 → 12.2.1-alpha.0

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

@@ -1,311 +0,0 @@
-'use client';
-import React from 'react';
-import { createModal as createDrawer } from '@gluestack-ui/modal';
-import { Pressable, View, ScrollView, Dimensions } 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 screenWidth = Dimensions.get('window').width;
-const screenHeight = Dimensions.get('window').height;
-const sizes: { [key: string]: number } = {
-    sm: 0.25,
-    md: 0.5,
-    lg: 0.75,
-    full: 1,
-};
-
-const UIDrawer = createDrawer({
-    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 drawerStyle = tva({
-    base: 'w-full h-full web:pointer-events-none relative',
-    variants: {
-        size: {
-            sm: '',
-            md: '',
-            lg: '',
-            full: '',
-        },
-        anchor: {
-            left: 'items-start',
-            right: 'items-end',
-            top: 'justify-start',
-            bottom: 'justify-end',
-        },
-    },
-});
-
-const drawerBackdropStyle = tva({
-    base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',
-});
-
-const drawerContentStyle = tva({
-    base: 'bg-background-0 overflow-scroll border-outline-100 p-6 absolute',
-    parentVariants: {
-        size: {
-            sm: 'w-1/4',
-            md: 'w-1/2',
-            lg: 'w-3/4',
-            full: 'w-full',
-        },
-        anchor: {
-            left: 'h-full border-r',
-            right: 'h-full border-l',
-            top: 'w-full border-b',
-            bottom: 'w-full border-t',
-        },
-    },
-    parentCompoundVariants: [
-        {
-            anchor: 'top',
-            size: 'sm',
-            class: 'h-1/4',
-        },
-        {
-            anchor: 'top',
-            size: 'md',
-            class: 'h-1/2',
-        },
-        {
-            anchor: 'top',
-            size: 'lg',
-            class: 'h-3/4',
-        },
-        {
-            anchor: 'top',
-            size: 'full',
-            class: 'h-full',
-        },
-        {
-            anchor: 'bottom',
-            size: 'sm',
-            class: 'h-1/4',
-        },
-        {
-            anchor: 'bottom',
-            size: 'md',
-            class: 'h-1/2',
-        },
-        {
-            anchor: 'bottom',
-            size: 'lg',
-            class: 'h-3/4',
-        },
-        {
-            anchor: 'bottom',
-            size: 'full',
-            class: 'h-full',
-        },
-    ],
-});
-
-const drawerCloseButtonStyle = tva({
-    base: 'z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer',
-});
-
-const drawerHeaderStyle = tva({
-    base: 'justify-between items-center flex-row',
-});
-
-const drawerBodyStyle = tva({
-    base: 'mt-4 mb-6 shrink-0',
-});
-
-const drawerFooterStyle = tva({
-    base: 'flex-row justify-end items-center',
-});
-
-type IDrawerProps = React.ComponentProps<typeof UIDrawer> & VariantProps<typeof drawerStyle> & { className?: string };
-
-type IDrawerBackdropProps = React.ComponentProps<typeof UIDrawer.Backdrop> &
-    VariantProps<typeof drawerBackdropStyle> & { className?: string };
-
-type IDrawerContentProps = React.ComponentProps<typeof UIDrawer.Content> &
-    VariantProps<typeof drawerContentStyle> & { className?: string };
-
-type IDrawerHeaderProps = React.ComponentProps<typeof UIDrawer.Header> &
-    VariantProps<typeof drawerHeaderStyle> & { className?: string };
-
-type IDrawerBodyProps = React.ComponentProps<typeof UIDrawer.Body> &
-    VariantProps<typeof drawerBodyStyle> & { className?: string };
-
-type IDrawerFooterProps = React.ComponentProps<typeof UIDrawer.Footer> &
-    VariantProps<typeof drawerFooterStyle> & { className?: string };
-
-type IDrawerCloseButtonProps = React.ComponentProps<typeof UIDrawer.CloseButton> &
-    VariantProps<typeof drawerCloseButtonStyle> & { className?: string };
-
-const CustomDrawer = React.forwardRef<React.ElementRef<typeof UIDrawer>, IDrawerProps>(
-    ({ className, size = 'sm', anchor = 'left', ...props }, ref) => {
-        return (
-            <UIDrawer
-                ref={ref}
-                {...props}
-                pointerEvents="box-none"
-                className={drawerStyle({ size, anchor, class: className })}
-                context={{ size, anchor }}
-            />
-        );
-    },
-);
-
-const DrawerBackdrop = React.forwardRef<React.ElementRef<typeof UIDrawer.Backdrop>, IDrawerBackdropProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIDrawer.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={drawerBackdropStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const DrawerContent = React.forwardRef<React.ElementRef<typeof UIDrawer.Content>, IDrawerContentProps>(
-    ({ className, ...props }, ref) => {
-        const { size: parentSize, anchor: parentAnchor } = useStyleContext(SCOPE);
-
-        const drawerHeight = screenHeight * (sizes[parentSize] || sizes.md);
-        const drawerWidth = screenWidth * (sizes[parentSize] || sizes.md);
-
-        const isHorizontal = parentAnchor === 'left' || parentAnchor === 'right';
-
-        const initialObj = isHorizontal
-            ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }
-            : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };
-
-        const animateObj = isHorizontal ? { x: 0 } : { y: 0 };
-
-        const exitObj = isHorizontal
-            ? { x: parentAnchor === 'left' ? -drawerWidth : drawerWidth }
-            : { y: parentAnchor === 'top' ? -drawerHeight : drawerHeight };
-
-        const customClass = isHorizontal
-            ? `top-0 ${parentAnchor === 'left' ? 'left-0' : 'right-0'}`
-            : `left-0 ${parentAnchor === 'top' ? 'top-0' : 'bottom-0'}`;
-
-        return (
-            <UIDrawer.Content
-                ref={ref}
-                initial={initialObj}
-                animate={animateObj}
-                exit={exitObj}
-                transition={{
-                    type: 'timing',
-                    duration: 300,
-                }}
-                {...props}
-                className={drawerContentStyle({
-                    parentVariants: {
-                        size: parentSize,
-                        anchor: parentAnchor,
-                    },
-                    class: `${className} ${customClass}`,
-                })}
-                pointerEvents="auto"
-            />
-        );
-    },
-);
-
-const DrawerHeader = React.forwardRef<React.ElementRef<typeof UIDrawer.Header>, IDrawerHeaderProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIDrawer.Header
-                ref={ref}
-                {...props}
-                className={drawerHeaderStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const DrawerBody = React.forwardRef<React.ElementRef<typeof UIDrawer.Body>, IDrawerBodyProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIDrawer.Body
-                ref={ref}
-                {...props}
-                className={drawerBodyStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const DrawerFooter = React.forwardRef<React.ElementRef<typeof UIDrawer.Footer>, IDrawerFooterProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIDrawer.Footer
-                ref={ref}
-                {...props}
-                className={drawerFooterStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const DrawerCloseButton = React.forwardRef<React.ElementRef<typeof UIDrawer.CloseButton>, IDrawerCloseButtonProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIDrawer.CloseButton
-                ref={ref}
-                {...props}
-                className={drawerCloseButtonStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-CustomDrawer.displayName = 'Drawer';
-DrawerBackdrop.displayName = 'DrawerBackdrop';
-DrawerContent.displayName = 'DrawerContent';
-DrawerHeader.displayName = 'DrawerHeader';
-DrawerBody.displayName = 'DrawerBody';
-DrawerFooter.displayName = 'DrawerFooter';
-DrawerCloseButton.displayName = 'DrawerCloseButton';
-
-export { CustomDrawer, DrawerBackdrop, DrawerContent, DrawerCloseButton, DrawerHeader, DrawerBody, DrawerFooter };

package/src/components/ui/drawer/index.web.tsx

@@ -1,144 +0,0 @@
-'use client';
-import React, { forwardRef, useEffect, useRef } from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { createPortal } from 'react-dom';
-
-const SCOPE = 'DRAWER';
-
-interface DrawerOverlayProps {
-    onPress?: () => void;
-    className?: string;
-}
-
-const DrawerOverlay = ({ onPress, className }: DrawerOverlayProps) => (
-    <div
-        onClick={onPress}
-        className={`fixed inset-0 bg-black bg-opacity-40 transition-opacity ${className || ''}`}
-        aria-hidden="true"
-    />
-);
-
-const drawerStyle = tva({
-    base: 'fixed bg-white shadow-xl transition-transform duration-300 ease-in-out',
-    variants: {
-        placement: {
-            left: 'left-0 top-0 bottom-0 transform -translate-x-full',
-            right: 'right-0 top-0 bottom-0 transform translate-x-full',
-            top: 'top-0 left-0 right-0 transform -translate-y-full',
-            bottom: 'bottom-0 left-0 right-0 transform translate-y-full',
-        },
-        size: {
-            xs: 'w-[95%] max-w-xs',
-            sm: 'w-[95%] max-w-sm',
-            md: 'w-[95%] max-w-md',
-            lg: 'w-[95%] max-w-lg',
-            xl: 'w-[95%] max-w-xl',
-            full: 'w-full',
-        },
-    },
-    defaultVariants: {
-        placement: 'right',
-        size: 'md',
-    },
-});
-
-export const DrawerContent = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
-    <div ref={ref} className={`h-full flex flex-col ${className || ''}`} {...props} />
-));
-
-DrawerContent.displayName = 'DrawerContent';
-
-export const DrawerHeader = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
-    <div ref={ref} className={`px-6 py-4 border-b border-gray-200 ${className || ''}`} {...props} />
-));
-
-DrawerHeader.displayName = 'DrawerHeader';
-
-export const DrawerBody = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
-    <div ref={ref} className={`flex-1 p-6 overflow-y-auto ${className || ''}`} {...props} />
-));
-
-DrawerBody.displayName = 'DrawerBody';
-
-export const DrawerFooter = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
-    <div ref={ref} className={`px-6 py-4 border-t border-gray-200 ${className || ''}`} {...props} />
-));
-
-DrawerFooter.displayName = 'DrawerFooter';
-
-export const DrawerCloseButton = forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(
-    ({ className, onClick, ...props }, ref) => (
-        <button
-            ref={ref}
-            className={`absolute right-4 top-4 text-gray-400 hover:text-gray-600 ${className || ''}`}
-            onClick={onClick}
-            aria-label="Close drawer"
-            {...props}
-        >
-            ×
-        </button>
-    ),
-);
-
-DrawerCloseButton.displayName = 'DrawerCloseButton';
-
-type IDrawerProps = {
-    isOpen?: boolean;
-    onClose?: () => void;
-    children?: React.ReactNode;
-    className?: string;
-    placement?: VariantProps<typeof drawerStyle>['placement'];
-    size?: VariantProps<typeof drawerStyle>['size'];
-    closeOnOverlayClick?: boolean;
-};
-
-const Drawer = forwardRef<HTMLDivElement, IDrawerProps>(
-    ({ isOpen, onClose, children, className, placement, size, closeOnOverlayClick = true, ...props }, ref) => {
-        const drawerRef = useRef<HTMLDivElement>(null);
-
-        useEffect(() => {
-            const handleEscape = (event: KeyboardEvent) => {
-                if (event.key === 'Escape' && onClose) {
-                    onClose();
-                }
-            };
-
-            if (isOpen) {
-                document.addEventListener('keydown', handleEscape);
-                document.body.style.overflow = 'hidden';
-            }
-
-            return () => {
-                document.removeEventListener('keydown', handleEscape);
-                document.body.style.overflow = '';
-            };
-        }, [isOpen, onClose]);
-
-        if (!isOpen) return null;
-
-        return createPortal(
-            <>
-                <DrawerOverlay onPress={closeOnOverlayClick ? onClose : undefined} />
-                <div
-                    ref={ref}
-                    className={`${drawerStyle({ placement, size, class: className })} ${
-                        isOpen ? 'translate-x-0 translate-y-0' : ''
-                    }`}
-                    role="dialog"
-                    aria-modal="true"
-                    {...props}
-                >
-                    {children}
-                </div>
-            </>,
-            document.body,
-        );
-    },
-);
-
-Drawer.displayName = 'Drawer';
-
-export { Drawer };

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

@@ -1,190 +0,0 @@
-'use client';
-import React from 'react';
-import { createFab } from '@gluestack-ui/fab';
-import { Pressable, Text } from 'react-native';
-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';
-import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
-
-const SCOPE = 'FAB';
-const Root = withStyleContext(Pressable, SCOPE);
-const UIFab = createFab({
-    Root: Root,
-    Label: Text,
-    Icon: UIIcon,
-});
-
-cssInterop(PrimitiveIcon, {
-    className: {
-        target: 'style',
-        nativeStyleToProp: {
-            height: true,
-            width: true,
-            fill: true,
-            color: 'classNameColor',
-            stroke: true,
-        },
-    },
-});
-
-const fabStyle = tva({
-    base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-primary-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-indicator-info shadow-hard-2',
-    variants: {
-        size: {
-            sm: 'px-2.5 py-2.5',
-            md: 'px-3 py-3',
-            lg: 'px-4 py-4',
-        },
-        placement: {
-            'top right': 'top-4 right-4',
-            'top left': 'top-4 left-4',
-            'bottom right': 'bottom-4 right-4',
-            'bottom left': 'bottom-4 left-4',
-            'top center': 'top-4 self-center',
-            'bottom center': 'bottom-4 self-center',
-        },
-    },
-});
-
-const fabLabelStyle = tva({
-    base: 'text-typography-50 font-normal font-body tracking-md text-left mx-2',
-    variants: {
-        isTruncated: {
-            true: '',
-        },
-        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',
-        },
-    },
-    parentVariants: {
-        size: {
-            sm: 'text-sm',
-            md: 'text-base',
-            lg: 'text-lg',
-        },
-    },
-});
-
-const fabIconStyle = tva({
-    base: 'text-typography-50 fill-none',
-    variants: {
-        size: {
-            '2xs': 'h-3 w-3',
-            xs: 'h-3.5 w-3.5',
-            sm: 'h-4 w-4',
-            md: 'w-[18px] h-[18px]',
-            lg: 'h-5 w-5',
-            xl: 'h-6 w-6',
-        },
-    },
-});
-
-type IFabProps = Omit<React.ComponentPropsWithoutRef<typeof UIFab>, 'context'> & VariantProps<typeof fabStyle>;
-
-const Fab = React.forwardRef<React.ElementRef<typeof UIFab>, IFabProps>(
-    ({ size = 'md', placement = 'bottom right', className, ...props }, ref) => {
-        return (
-            <UIFab
-                ref={ref}
-                {...props}
-                className={fabStyle({ size, placement, class: className })}
-                context={{ size }}
-            />
-        );
-    },
-);
-
-type IFabLabelProps = React.ComponentPropsWithoutRef<typeof UIFab.Label> & VariantProps<typeof fabLabelStyle>;
-
-const FabLabel = React.forwardRef<React.ElementRef<typeof UIFab.Label>, IFabLabelProps>(
-    (
-        { size, isTruncated = false, bold = false, underline = false, strikeThrough = false, className, ...props },
-        ref,
-    ) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-        return (
-            <UIFab.Label
-                ref={ref}
-                {...props}
-                className={fabLabelStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    size,
-                    isTruncated,
-                    bold,
-                    underline,
-                    strikeThrough,
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-type IFabIconProps = React.ComponentPropsWithoutRef<typeof UIFab.Icon> &
-    VariantProps<typeof fabIconStyle> & {
-        height?: number;
-        width?: number;
-    };
-
-const FabIcon = React.forwardRef<React.ElementRef<typeof UIFab.Icon>, IFabIconProps>(
-    ({ size, className, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        if (typeof size === 'number') {
-            return <UIFab.Icon ref={ref} {...props} className={fabIconStyle({ class: className })} size={size} />;
-        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
-            return <UIFab.Icon ref={ref} {...props} className={fabIconStyle({ class: className })} />;
-        }
-        return (
-            <UIFab.Icon
-                ref={ref}
-                {...props}
-                className={fabIconStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    size,
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-Fab.displayName = 'Fab';
-FabLabel.displayName = 'FabLabel';
-FabIcon.displayName = 'FabIcon';
-
-export { Fab, FabLabel, FabIcon };