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

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

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

@@ -1,178 +0,0 @@
-'use client';
-import React from 'react';
-import { createRadio } from '@gluestack-ui/radio';
-import { Pressable, View, Platform, 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 = 'Radio';
-
-const UIRadio = createRadio({
-    Root: (Platform.OS === 'web' ? withStyleContext(View, SCOPE) : withStyleContext(Pressable, SCOPE)) as ReturnType<
-        typeof withStyleContext<typeof Pressable>
-    >,
-    Group: View,
-    Icon: UIIcon,
-    Indicator: View,
-    Label: Text,
-});
-
-cssInterop(PrimitiveIcon, {
-    className: {
-        target: 'style',
-        nativeStyleToProp: {
-            height: true,
-            width: true,
-            fill: true,
-            color: 'classNameColor',
-            stroke: true,
-        },
-    },
-});
-
-const radioStyle = tva({
-    base: 'group/radio flex-row justify-start items-center web:cursor-pointer data-[disabled=true]:web:cursor-not-allowed',
-    variants: {
-        size: {
-            sm: 'gap-1.5',
-            md: 'gap-2',
-            lg: 'gap-2',
-        },
-    },
-});
-
-const radioGroupStyle = tva({
-    base: 'gap-2',
-});
-
-const radioIconStyle = tva({
-    base: 'rounded-full justify-center items-center text-primary-800 fill-primary-800',
-
-    parentVariants: {
-        size: {
-            sm: 'h-[9px] w-[9px]',
-            md: 'h-3 w-3',
-            lg: 'h-4 w-4',
-        },
-    },
-});
-
-const radioIndicatorStyle = tva({
-    base: 'justify-center items-center bg-transparent border-outline-400 border-2 rounded-full data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[checked=true]:border-primary-600 data-[checked=true]:bg-transparent data-[hover=true]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[checked=true]:bg-transparent data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-400 data-[active=true]:bg-transparent data-[active=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[checked=true]:border-outline-400 data-[disabled=true]:data-[checked=true]:bg-transparent data-[disabled=true]:data-[invalid=true]:border-error-400',
-    parentVariants: {
-        size: {
-            sm: 'h-4 w-4',
-            md: 'h-5 w-5',
-            lg: 'h-6 w-6',
-        },
-    },
-});
-
-const radioLabelStyle = tva({
-    base: 'text-typography-600 data-[checked=true]:text-typography-900 data-[hover=true]:text-typography-900 data-[hover=true]:data-[disabled=true]:text-typography-600 data-[hover=true]:data-[disabled=true]:data-[checked=true]:text-typography-900 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none',
-    parentVariants: {
-        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',
-        },
-    },
-});
-
-type IRadioProps = Omit<React.ComponentProps<typeof UIRadio>, 'context'> & VariantProps<typeof radioStyle>;
-const Radio = React.forwardRef<React.ElementRef<typeof UIRadio>, IRadioProps>(
-    ({ className, size = 'md', ...props }, ref) => {
-        return <UIRadio className={radioStyle({ class: className, size })} {...props} ref={ref} context={{ size }} />;
-    },
-);
-
-type IRadioGroupProps = React.ComponentProps<typeof UIRadio.Group> & VariantProps<typeof radioGroupStyle>;
-const RadioGroup = React.forwardRef<React.ElementRef<typeof UIRadio.Group>, IRadioGroupProps>(
-    ({ className, ...props }, ref) => {
-        return <UIRadio.Group className={radioGroupStyle({ class: className })} {...props} ref={ref} />;
-    },
-);
-
-type IRadioIndicatorProps = React.ComponentProps<typeof UIRadio.Indicator> & VariantProps<typeof radioIndicatorStyle>;
-const RadioIndicator = React.forwardRef<React.ElementRef<typeof UIRadio.Indicator>, IRadioIndicatorProps>(
-    ({ className, ...props }, ref) => {
-        const { size } = useStyleContext(SCOPE);
-        return (
-            <UIRadio.Indicator
-                className={radioIndicatorStyle({
-                    parentVariants: { size },
-                    class: className,
-                })}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-type IRadioLabelProps = React.ComponentProps<typeof UIRadio.Label> & VariantProps<typeof radioIndicatorStyle>;
-const RadioLabel = React.forwardRef<React.ElementRef<typeof UIRadio.Label>, IRadioLabelProps>(
-    ({ className, ...props }, ref) => {
-        const { size } = useStyleContext(SCOPE);
-        return (
-            <UIRadio.Label
-                className={radioLabelStyle({
-                    parentVariants: { size },
-                    class: className,
-                })}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-type IRadioIconProps = React.ComponentProps<typeof UIRadio.Icon> &
-    VariantProps<typeof radioIconStyle> & {
-        height?: number;
-        width?: number;
-    };
-const RadioIcon = React.forwardRef<React.ElementRef<typeof UIRadio.Icon>, IRadioIconProps>(
-    ({ className, size, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        if (typeof size === 'number') {
-            return <UIRadio.Icon ref={ref} {...props} className={radioIconStyle({ class: className })} size={size} />;
-        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
-            return <UIRadio.Icon ref={ref} {...props} className={radioIconStyle({ class: className })} />;
-        }
-
-        return (
-            <UIRadio.Icon
-                {...props}
-                className={radioIconStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    size,
-                    class: className,
-                })}
-                ref={ref}
-            />
-        );
-    },
-);
-
-Radio.displayName = 'Radio';
-RadioGroup.displayName = 'RadioGroup';
-RadioIndicator.displayName = 'RadioIndicator';
-RadioLabel.displayName = 'RadioLabel';
-RadioIcon.displayName = 'RadioIcon';
-
-export { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon };

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

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

package/src/components/ui/refresh-control/index.tsx

@@ -1,2 +0,0 @@
-'use client';
-export { RefreshControl } from 'react-native';

package/src/components/ui/refresh-control/index.web.tsx

@@ -1,104 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-
-interface RefreshControlProps {
-    refreshing?: boolean;
-    onRefresh?: () => void;
-    progressViewOffset?: number;
-    tintColor?: string;
-    title?: string;
-    titleColor?: string;
-    colors?: string[];
-    enabled?: boolean;
-    style?: React.CSSProperties;
-}
-
-export const RefreshControl: React.FC<RefreshControlProps> = ({ refreshing = false, onRefresh, style, ...props }) => {
-    const [startY, setStartY] = useState(0);
-    const [pulling, setPulling] = useState(false);
-    const [pullDistance, setPullDistance] = useState(0);
-    const threshold = 100; // Minimum pull distance to trigger refresh
-
-    useEffect(() => {
-        if (!refreshing) {
-            setPullDistance(0);
-            setPulling(false);
-        }
-    }, [refreshing]);
-
-    const handleTouchStart = (e: React.TouchEvent) => {
-        if (window.scrollY === 0) {
-            setStartY(e.touches[0].clientY);
-            setPulling(true);
-        }
-    };
-
-    const handleTouchMove = (e: React.TouchEvent) => {
-        if (pulling && !refreshing) {
-            const currentY = e.touches[0].clientY;
-            const distance = Math.max(0, currentY - startY);
-            setPullDistance(Math.min(distance * 0.5, threshold * 1.5)); // Add resistance
-        }
-    };
-
-    const handleTouchEnd = () => {
-        if (pulling && pullDistance >= threshold && onRefresh) {
-            onRefresh();
-        }
-        if (!refreshing) {
-            setPullDistance(0);
-        }
-        setPulling(false);
-    };
-
-    return (
-        <div
-            style={{
-                position: 'relative',
-                width: '100%',
-                ...style,
-            }}
-            onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
-            onTouchEnd={handleTouchEnd}
-        >
-            {(pulling || refreshing) && (
-                <div
-                    style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        height: Math.max(pullDistance, refreshing ? 50 : 0),
-                        transition: pulling ? 'none' : 'height 0.2s ease-out',
-                        overflow: 'hidden',
-                    }}
-                >
-                    <div
-                        style={{
-                            width: '20px',
-                            height: '20px',
-                            border: '2px solid #ccc',
-                            borderTopColor: props.tintColor || '#000',
-                            borderRadius: '50%',
-                            animation: refreshing ? 'spin 1s linear infinite' : 'none',
-                            transform: !refreshing ? `rotate(${(pullDistance / threshold) * 360}deg)` : undefined,
-                        }}
-                    />
-                </div>
-            )}
-            <style>
-                {`
-          @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-          }
-        `}
-            </style>
-        </div>
-    );
-};

package/src/components/ui/safe-area-view/index.tsx

@@ -1,22 +0,0 @@
-'use client';
-import React from 'react';
-import { SafeAreaView, ViewProps } from 'react-native';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { clsx } from 'clsx'; // Correct utility for class merging
-import { safeAreaStyle } from './styles';
-
-type ISafeAreaProps = ViewProps & VariantProps<typeof safeAreaStyle> & { className?: string };
-
-export const StyledSafeAreaView = React.forwardRef<React.ElementRef<typeof SafeAreaView>, ISafeAreaProps>(
-    ({ className, children, ...props }, ref) => {
-        return (
-            <SafeAreaView
-                {...props}
-                ref={ref}
-                className={safeAreaStyle({ class: clsx(className) })} // Convert className properly
-            >
-                {children}
-            </SafeAreaView>
-        );
-    },
-);

package/src/components/ui/safe-area-view/index.web.tsx

@@ -1,24 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { clsx } from 'clsx';
-import { safeAreaStyle } from './styles';
-
-type ISafeAreaProps = React.HTMLAttributes<HTMLDivElement> &
-    VariantProps<typeof safeAreaStyle> & {
-        className?: string;
-    };
-
-export const StyledSafeAreaView = forwardRef<HTMLDivElement, ISafeAreaProps>(
-    ({ className, children, ...props }, ref) => {
-        return (
-            <div {...props} ref={ref} className={safeAreaStyle({ class: clsx(className) })}>
-                {children}
-            </div>
-        );
-    },
-);
-
-StyledSafeAreaView.displayName = 'StyledSafeAreaView';
-
-export { StyledSafeAreaView as SafeAreaView };

package/src/components/ui/safe-area-view/styles.tsx

@@ -1,10 +0,0 @@
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
-
-const baseStyle = isWeb
-    ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
-    : '';
-
-export const safeAreaStyle = tva({
-    base: baseStyle,
-});

package/src/components/ui/scroll-view/index.tsx

@@ -1,2 +0,0 @@
-'use client';
-export { ScrollView } from 'react-native';