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

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

@@ -1,326 +0,0 @@
-'use client';
-import React from 'react';
-import { createPopover } from '@gluestack-ui/popover';
-import { Motion, createMotionAnimatedComponent, AnimatePresence } 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';
-
-// Create web-specific components
-const Div = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>((props, ref) => <div ref={ref} {...props} />);
-Div.displayName = 'Div';
-
-const Button = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>((props, ref) => (
-    <button type="button" ref={ref} {...props} />
-));
-Button.displayName = 'Button';
-
-const AnimatedDiv = createMotionAnimatedComponent(Div);
-const MotionDiv = Motion.View;
-const SCOPE = 'POPOVER';
-
-const UIPopover = createPopover({
-    Root: withStyleContext(Div, SCOPE),
-    Arrow: MotionDiv,
-    Backdrop: AnimatedDiv,
-    Body: Div,
-    CloseButton: Button,
-    Content: MotionDiv,
-    Footer: Div,
-    Header: Div,
-    AnimatePresence: AnimatePresence,
-});
-
-cssInterop(MotionDiv, { className: 'style' });
-cssInterop(AnimatedDiv, { className: 'style' });
-
-const SIZES = {
-    xs: 'xs',
-    sm: 'sm',
-    md: 'md',
-    lg: 'lg',
-    full: 'full',
-} as const;
-
-type Size = keyof typeof SIZES;
-
-const popoverStyle = tva({
-    base: 'group/popover w-full h-full justify-center items-center pointer-events-none',
-    variants: {
-        size: {
-            [SIZES.xs]: '',
-            [SIZES.sm]: '',
-            [SIZES.md]: '',
-            [SIZES.lg]: '',
-            [SIZES.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',
-        } as const,
-    },
-});
-
-const popoverBackdropStyle = tva({
-    base: 'absolute left-0 top-0 right-0 bottom-0 cursor-default',
-});
-
-const popoverCloseButtonStyle = tva({
-    base: 'group/popover-close-button z-[1] rounded-sm data-[focus-visible=true]:bg-background-100 outline-0 cursor-pointer',
-});
-
-const popoverContentStyle = tva({
-    base: 'bg-background-0 rounded-lg overflow-hidden border border-outline-100 w-full',
-    parentVariants: {
-        size: {
-            [SIZES.xs]: 'max-w-[360px] p-3.5',
-            [SIZES.sm]: 'max-w-[420px] p-4',
-            [SIZES.md]: 'max-w-[510px] p-[18px]',
-            [SIZES.lg]: 'max-w-[640px] p-5',
-            [SIZES.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: size as Size, class: className })}
-                context={{ size, placement }}
-            />
-        );
-    },
-);
-
-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 as Size,
-                    },
-                    size: size as Size,
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-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/portal/index.web.tsx

@@ -1,34 +0,0 @@
-'use client';
-import React from 'react';
-import { createPortal } from 'react-dom';
-
-interface PortalProps {
-    children?: React.ReactNode;
-    containerRef?: React.RefObject<HTMLElement>;
-    className?: string;
-    style?: React.CSSProperties;
-}
-
-export const Portal = React.forwardRef<HTMLDivElement, PortalProps>(
-    ({ children, containerRef, className, style, ...props }, ref) => {
-        const [mounted, setMounted] = React.useState(false);
-
-        React.useEffect(() => {
-            setMounted(true);
-            return () => setMounted(false);
-        }, []);
-
-        if (!mounted) return null;
-
-        const container = containerRef?.current ?? document.body;
-
-        return createPortal(
-            <div ref={ref} className={className} style={style} {...props}>
-                {children}
-            </div>,
-            container,
-        );
-    },
-);
-
-Portal.displayName = 'Portal';

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 };

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

@@ -1,73 +0,0 @@
-'use client';
-import React, { forwardRef, useState } from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { clsx } from 'clsx';
-
-const pressableStyle = tva({
-    base: 'cursor-pointer select-none outline-none',
-    variants: {
-        disabled: {
-            true: 'opacity-40 cursor-not-allowed',
-        },
-        pressed: {
-            true: 'opacity-70',
-        },
-        hovered: {
-            true: 'hover:opacity-80',
-        },
-        focused: {
-            true: 'focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
-        },
-    },
-});
-
-type PressableProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> & {
-    onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onPressIn?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onPressOut?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    disabled?: boolean;
-    className?: string;
-};
-
-export const Pressable = forwardRef<HTMLButtonElement, PressableProps>(
-    ({ onPress, onPressIn, onPressOut, disabled, className, children, ...props }, ref) => {
-        const [isPressed, setIsPressed] = useState(false);
-        const [isHovered, setIsHovered] = useState(false);
-        const [isFocused, setIsFocused] = useState(false);
-
-        return (
-            <button
-                ref={ref}
-                className={pressableStyle({
-                    disabled,
-                    pressed: isPressed,
-                    hovered: isHovered,
-                    focused: isFocused,
-                    class: clsx(className),
-                })}
-                disabled={disabled}
-                onClick={onPress}
-                onMouseDown={(e) => {
-                    setIsPressed(true);
-                    onPressIn?.(e);
-                }}
-                onMouseUp={(e) => {
-                    setIsPressed(false);
-                    onPressOut?.(e);
-                }}
-                onMouseEnter={() => setIsHovered(true)}
-                onMouseLeave={() => {
-                    setIsHovered(false);
-                    setIsPressed(false);
-                }}
-                onFocus={() => setIsFocused(true)}
-                onBlur={() => setIsFocused(false)}
-                {...props}
-            >
-                {children}
-            </button>
-        );
-    },
-);
-
-Pressable.displayName = 'Pressable';

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

@@ -1,160 +0,0 @@
-'use client';
-import React from 'react';
-import { createProgress } from '@gluestack-ui/progress';
-import { View } 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';
-
-const SCOPE = 'PROGRESS';
-export const UIProgress = createProgress({
-    Root: withStyleContext(View, SCOPE),
-    FilledTrack: View,
-});
-
-cssInterop(UIProgress, { className: 'style' });
-cssInterop(UIProgress.FilledTrack, { className: 'style' });
-
-const progressStyle = tva({
-    base: 'bg-background-300 rounded-full w-full',
-    variants: {
-        orientation: {
-            horizontal: 'w-full',
-            vertical: 'h-full',
-        },
-        size: {
-            xs: 'h-1',
-            sm: 'h-2',
-            md: 'h-3',
-            lg: 'h-4',
-            xl: 'h-5',
-            '2xl': 'h-6',
-        },
-    },
-    compoundVariants: [
-        {
-            orientation: 'vertical',
-            size: 'xs',
-            class: 'h-full w-1 justify-end',
-        },
-        {
-            orientation: 'vertical',
-            size: 'sm',
-            class: 'h-full w-2 justify-end',
-        },
-        {
-            orientation: 'vertical',
-            size: 'md',
-            class: 'h-full w-3 justify-end',
-        },
-        {
-            orientation: 'vertical',
-            size: 'lg',
-            class: 'h-full w-4 justify-end',
-        },
-
-        {
-            orientation: 'vertical',
-            size: 'xl',
-            class: 'h-full w-5 justify-end',
-        },
-        {
-            orientation: 'vertical',
-            size: '2xl',
-            class: 'h-full w-6 justify-end',
-        },
-    ],
-});
-
-const progressFilledTrackStyle = tva({
-    base: 'bg-primary-500 rounded-full',
-    parentVariants: {
-        orientation: {
-            horizontal: 'w-full',
-            vertical: 'h-full',
-        },
-        size: {
-            xs: 'h-1',
-            sm: 'h-2',
-            md: 'h-3',
-            lg: 'h-4',
-            xl: 'h-5',
-            '2xl': 'h-6',
-        },
-    },
-    parentCompoundVariants: [
-        {
-            orientation: 'vertical',
-            size: 'xs',
-            class: 'h-full w-1',
-        },
-        {
-            orientation: 'vertical',
-            size: 'sm',
-            class: 'h-full w-2',
-        },
-        {
-            orientation: 'vertical',
-            size: 'md',
-            class: 'h-full w-3',
-        },
-        {
-            orientation: 'vertical',
-            size: 'lg',
-            class: 'h-full w-4',
-        },
-
-        {
-            orientation: 'vertical',
-            size: 'xl',
-            class: 'h-full w-5',
-        },
-        {
-            orientation: 'vertical',
-            size: '2xl',
-            class: 'h-full w-6',
-        },
-    ],
-});
-
-type IProgressProps = VariantProps<typeof progressStyle> & React.ComponentProps<typeof UIProgress>;
-type IProgressFilledTrackProps = VariantProps<typeof progressFilledTrackStyle> &
-    React.ComponentProps<typeof UIProgress.FilledTrack>;
-
-const Progress = React.forwardRef<React.ElementRef<typeof UIProgress>, IProgressProps>(
-    ({ className, size = 'md', orientation = 'horizontal', ...props }, ref) => {
-        return (
-            <UIProgress
-                ref={ref}
-                {...props}
-                className={progressStyle({ size, orientation, class: className })}
-                context={{ size, orientation }}
-                orientation={orientation}
-            />
-        );
-    },
-);
-
-const ProgressFilledTrack = React.forwardRef<
-    React.ElementRef<typeof UIProgress.FilledTrack>,
-    IProgressFilledTrackProps
->(({ className, ...props }, ref) => {
-    const { size: parentSize, orientation: parentOrientation } = useStyleContext(SCOPE);
-
-    return (
-        <UIProgress.FilledTrack
-            ref={ref}
-            className={progressFilledTrackStyle({
-                parentVariants: {
-                    size: parentSize,
-                    orientation: parentOrientation,
-                },
-                class: className,
-            })}
-            {...props}
-        />
-    );
-});
-
-export { Progress, ProgressFilledTrack };