@admin-layout/gluestack-ui-mobile 11.0.4-alpha.4 → 12.0.16-alpha.0

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

@@ -0,0 +1,326 @@
+'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.web.tsx

@@ -0,0 +1,34 @@
+'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.web.tsx

@@ -0,0 +1,73 @@
+'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.web.tsx

@@ -0,0 +1,123 @@
+'use client';
+import React, { forwardRef } 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';
+
+const SCOPE = 'PROGRESS';
+
+const progressStyle = tva({
+    base: 'w-full overflow-hidden bg-gray-200 rounded-full',
+    variants: {
+        size: {
+            xs: 'h-1',
+            sm: 'h-2',
+            md: 'h-3',
+            lg: 'h-4',
+        },
+        variant: {
+            determinate: '',
+            indeterminate: 'relative',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'determinate',
+    },
+});
+
+const fillerStyle = tva({
+    base: 'h-full rounded-full transition-all duration-300 ease-in-out',
+    variants: {
+        variant: {
+            determinate: '',
+            indeterminate: 'absolute animate-progress-indeterminate',
+        },
+        colorScheme: {
+            primary: 'bg-blue-600',
+            success: 'bg-green-600',
+            warning: 'bg-yellow-600',
+            error: 'bg-red-600',
+        },
+    },
+    defaultVariants: {
+        variant: 'determinate',
+        colorScheme: 'primary',
+    },
+});
+
+type IProgressProps = React.ComponentProps<'div'> & {
+    value?: number;
+    min?: number;
+    max?: number;
+    size?: VariantProps<typeof progressStyle>['size'];
+    variant?: VariantProps<typeof progressStyle>['variant'];
+    colorScheme?: VariantProps<typeof fillerStyle>['colorScheme'];
+    isIndeterminate?: boolean;
+};
+
+const Progress = forwardRef<HTMLDivElement, IProgressProps>(
+    (
+        {
+            className,
+            value = 0,
+            min = 0,
+            max = 100,
+            size,
+            variant: variantProp,
+            colorScheme,
+            isIndeterminate,
+            ...props
+        },
+        ref,
+    ) => {
+        const variant = isIndeterminate ? 'indeterminate' : variantProp || 'determinate';
+        const percentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+
+        return (
+            <div
+                ref={ref}
+                role="progressbar"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={isIndeterminate ? undefined : value}
+                className={progressStyle({ size, variant, class: className })}
+                {...props}
+            >
+                <div
+                    className={fillerStyle({ variant, colorScheme })}
+                    style={{
+                        width: variant === 'determinate' ? `${percentage}%` : '40%',
+                    }}
+                />
+            </div>
+        );
+    },
+);
+
+Progress.displayName = 'Progress';
+
+export { Progress };
+
+// Add keyframes for indeterminate animation to your global CSS:
+const styles = `
+@keyframes progress-indeterminate {
+  0% {
+    left: -40%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+.animate-progress-indeterminate {
+  animation: progress-indeterminate 1.5s infinite ease-in-out;
+}
+`;
+
+if (typeof document !== 'undefined') {
+    const styleSheet = document.createElement('style');
+    styleSheet.textContent = styles;
+    document.head.appendChild(styleSheet);
+}

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

@@ -0,0 +1,130 @@
+'use client';
+import React, { forwardRef, createContext, useContext } 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';
+
+const SCOPE = 'RADIO';
+
+const radioStyle = tva({
+    base: 'form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out',
+    variants: {
+        size: {
+            sm: 'h-3 w-3',
+            md: 'h-4 w-4',
+            lg: 'h-5 w-5',
+        },
+        status: {
+            error: 'border-red-500 focus:border-red-500 focus:ring-red-500',
+            success: 'border-green-500 focus:border-green-500 focus:ring-green-500',
+            warning: 'border-yellow-500 focus:border-yellow-500 focus:ring-yellow-500',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+
+const labelStyle = tva({
+    base: 'ml-2 select-none',
+    variants: {
+        size: {
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-lg',
+        },
+        disabled: {
+            true: 'opacity-50 cursor-not-allowed',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+
+type RadioGroupContextType = {
+    value?: string;
+    onChange?: (value: string) => void;
+    name?: string;
+    size?: VariantProps<typeof radioStyle>['size'];
+    status?: VariantProps<typeof radioStyle>['status'];
+};
+
+const RadioGroupContext = createContext<RadioGroupContextType>({});
+
+export const RadioGroup = forwardRef<HTMLDivElement, React.ComponentProps<'div'> & RadioGroupContextType>(
+    ({ value, onChange, name, size, status, ...props }, ref) => {
+        return (
+            <RadioGroupContext.Provider value={{ value, onChange, name, size, status }}>
+                <div ref={ref} role="radiogroup" {...props} />
+            </RadioGroupContext.Provider>
+        );
+    },
+);
+
+RadioGroup.displayName = 'RadioGroup';
+
+export const RadioLabel = forwardRef<
+    HTMLLabelElement,
+    React.ComponentProps<'label'> & {
+        size?: VariantProps<typeof labelStyle>['size'];
+        disabled?: boolean;
+    }
+>(({ className, size, disabled, ...props }, ref) => {
+    return <label ref={ref} className={labelStyle({ size, disabled, class: className })} {...props} />;
+});
+
+RadioLabel.displayName = 'RadioLabel';
+
+export const RadioIcon = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+    ({ className, children, ...props }, ref) => {
+        return (
+            <div ref={ref} className={`flex items-center justify-center ${className || ''}`} {...props}>
+                {children}
+            </div>
+        );
+    },
+);
+
+RadioIcon.displayName = 'RadioIcon';
+
+type IRadioProps = Omit<React.ComponentProps<'input'>, 'size'> & {
+    value: string;
+    size?: VariantProps<typeof radioStyle>['size'];
+    status?: VariantProps<typeof radioStyle>['status'];
+};
+
+const Radio = forwardRef<HTMLInputElement, IRadioProps>(
+    ({ className, value, size: itemSize, status: itemStatus, onChange, ...props }, ref) => {
+        const group = useContext(RadioGroupContext);
+        const size = itemSize || group.size;
+        const status = itemStatus || group.status;
+
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            if (onChange) {
+                onChange(e);
+            }
+            if (group.onChange) {
+                group.onChange(e.target.value);
+            }
+        };
+
+        return (
+            <input
+                ref={ref}
+                type="radio"
+                value={value}
+                checked={group.value === value}
+                name={group.name}
+                onChange={handleChange}
+                className={radioStyle({ size, status, class: className })}
+                {...props}
+            />
+        );
+    },
+);
+
+Radio.displayName = 'Radio';
+
+export { Radio };