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

package/src/components/ui/text/styles.tsx

@@ -1,47 +0,0 @@
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
-
-const baseStyle = isWeb
-    ? 'font-sans tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word'
-    : '';
-
-export const textStyle = tva({
-    base: `text-typography-700 font-body ${baseStyle}`,
-
-    variants: {
-        isTruncated: {
-            true: 'web:truncate',
-        },
-        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',
-        },
-    },
-});

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

@@ -1,83 +0,0 @@
-'use client';
-import React from 'react';
-import { createTextarea } from '@gluestack-ui/textarea';
-import { View, TextInput } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const SCOPE = 'TEXTAREA';
-const UITextarea = createTextarea({
-    Root: withStyleContext(View, SCOPE),
-    Input: TextInput,
-});
-
-const textareaStyle = tva({
-    base: 'w-full h-[100px] border border-background-300 rounded data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:data-[hover=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:bg-background-50 data-[disabled=true]:data-[hover=true]:border-background-300',
-
-    variants: {
-        variant: {
-            default:
-                'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:border-primary-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-indicator-primary data-[invalid=true]:data-[disabled=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-indicator-error ',
-        },
-        size: {
-            sm: '',
-            md: '',
-            lg: '',
-            xl: '',
-        },
-    },
-});
-
-const textareaInputStyle = tva({
-    base: 'p-2 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
-    parentVariants: {
-        size: {
-            sm: 'text-sm',
-            md: 'text-base',
-            lg: 'text-lg',
-            xl: 'text-xl',
-        },
-    },
-});
-
-type ITextareaProps = React.ComponentProps<typeof UITextarea> & VariantProps<typeof textareaStyle>;
-
-const Textarea = React.forwardRef<React.ElementRef<typeof UITextarea>, ITextareaProps>(
-    ({ className, variant = 'default', size = 'md', ...props }, ref) => {
-        return (
-            <UITextarea
-                ref={ref}
-                {...props}
-                className={textareaStyle({ variant, class: className })}
-                context={{ size }}
-            />
-        );
-    },
-);
-
-type ITextareaInputProps = React.ComponentProps<typeof UITextarea.Input> & VariantProps<typeof textareaInputStyle>;
-
-const TextareaInput = React.forwardRef<React.ElementRef<typeof UITextarea.Input>, ITextareaInputProps>(
-    ({ className, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        return (
-            <UITextarea.Input
-                ref={ref}
-                {...props}
-                className={textareaInputStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-Textarea.displayName = 'Textarea';
-TextareaInput.displayName = 'TextareaInput';
-
-export { Textarea, TextareaInput };

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

@@ -1,86 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { createTextarea } from '@gluestack-ui/textarea';
-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 = 'TEXTAREA';
-
-const StyledTextarea = forwardRef<HTMLTextAreaElement, any>(
-    ({ onChangeText, onChange, placeholder, placeholderTextColor, ...props }, ref) => {
-        const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-            if (onChange) {
-                onChange(e);
-            }
-            if (onChangeText) {
-                onChangeText(e.target.value);
-            }
-        };
-
-        return (
-            <textarea
-                ref={ref}
-                placeholder={placeholder}
-                onChange={handleChange}
-                style={{
-                    ...props.style,
-                    '::placeholder': {
-                        color: placeholderTextColor,
-                    },
-                }}
-                {...props}
-            />
-        );
-    },
-);
-
-StyledTextarea.displayName = 'StyledTextarea';
-
-const textareaStyle = tva({
-    base: 'px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
-    variants: {
-        size: {
-            sm: 'text-sm min-h-[80px]',
-            md: 'text-base min-h-[100px]',
-            lg: 'text-lg min-h-[120px]',
-        },
-        variant: {
-            outline: 'bg-transparent',
-            filled: 'bg-gray-100',
-            unstyled: '',
-        },
-        state: {
-            error: 'border-red-500 focus:ring-red-500',
-            success: 'border-green-500 focus:ring-green-500',
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'outline',
-    },
-});
-
-type ITextareaProps = React.ComponentProps<typeof StyledTextarea> &
-    VariantProps<typeof textareaStyle> & {
-        className?: string;
-        onChangeText?: (text: string) => void;
-        placeholderTextColor?: string;
-    };
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, ITextareaProps>(
-    ({ className, size, variant, state, ...props }, ref) => {
-        return (
-            <StyledTextarea
-                ref={ref}
-                className={textareaStyle({ size, variant, state, class: className })}
-                {...props}
-            />
-        );
-    },
-);
-
-Textarea.displayName = 'Textarea';
-
-export { Textarea };

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

@@ -1,218 +0,0 @@
-'use client';
-import React from 'react';
-import { createToastHook } from '@gluestack-ui/toast';
-import { AccessibilityInfo, Text, View } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { cssInterop } from 'nativewind';
-import { Motion, AnimatePresence } from '@legendapp/motion';
-import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const useToast = createToastHook(Motion.View, AnimatePresence);
-const SCOPE = 'TOAST';
-
-cssInterop(Motion.View, { className: 'style' });
-
-const toastStyle = tva({
-    base: 'p-4 m-1 rounded-md gap-1 web:pointer-events-auto shadow-hard-5 border-outline-100',
-    variants: {
-        action: {
-            error: 'bg-error-800',
-            warning: 'bg-warning-700',
-            success: 'bg-success-700',
-            info: 'bg-info-700',
-            muted: 'bg-background-800',
-        },
-
-        variant: {
-            solid: '',
-            outline: 'border bg-background-0',
-        },
-    },
-});
-
-const toastTitleStyle = tva({
-    base: 'text-typography-0 font-medium font-body tracking-md text-left',
-    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',
-        },
-    },
-    parentVariants: {
-        variant: {
-            solid: '',
-            outline: '',
-        },
-        action: {
-            error: '',
-            warning: '',
-            success: '',
-            info: '',
-            muted: '',
-        },
-    },
-    parentCompoundVariants: [
-        {
-            variant: 'outline',
-            action: 'error',
-            class: 'text-error-800',
-        },
-        {
-            variant: 'outline',
-            action: 'warning',
-            class: 'text-warning-800',
-        },
-        {
-            variant: 'outline',
-            action: 'success',
-            class: 'text-success-800',
-        },
-        {
-            variant: 'outline',
-            action: 'info',
-            class: 'text-info-800',
-        },
-        {
-            variant: 'outline',
-            action: 'muted',
-            class: 'text-background-800',
-        },
-    ],
-});
-
-const toastDescriptionStyle = tva({
-    base: 'font-normal font-body tracking-md text-left',
-    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',
-        },
-    },
-    parentVariants: {
-        variant: {
-            solid: 'text-typography-50',
-            outline: 'text-typography-900',
-        },
-    },
-});
-
-const Root = withStyleContext(View, SCOPE);
-type IToastProps = React.ComponentProps<typeof Root> & {
-    className?: string;
-} & VariantProps<typeof toastStyle>;
-
-const Toast = React.forwardRef<React.ElementRef<typeof Root>, IToastProps>(
-    ({ className, variant = 'solid', action = 'muted', ...props }, ref) => {
-        return (
-            <Root
-                ref={ref}
-                className={toastStyle({ variant, action, class: className })}
-                context={{ variant, action }}
-                {...props}
-            />
-        );
-    },
-);
-
-type IToastTitleProps = React.ComponentProps<typeof Text> & {
-    className?: string;
-} & VariantProps<typeof toastTitleStyle>;
-
-const ToastTitle = React.forwardRef<React.ElementRef<typeof Text>, IToastTitleProps>(
-    ({ className, size = 'md', children, ...props }, ref) => {
-        const { variant: parentVariant, action: parentAction } = useStyleContext(SCOPE);
-        React.useEffect(() => {
-            // Issue from react-native side
-            // Hack for now, will fix this later
-            AccessibilityInfo.announceForAccessibility(children as string);
-        }, [children]);
-
-        return (
-            <Text
-                {...props}
-                ref={ref}
-                aria-live="assertive"
-                aria-atomic="true"
-                role="alert"
-                className={toastTitleStyle({
-                    size,
-                    class: className,
-                    parentVariants: {
-                        variant: parentVariant,
-                        action: parentAction,
-                    },
-                })}
-            >
-                {children}
-            </Text>
-        );
-    },
-);
-
-type IToastDescriptionProps = React.ComponentProps<typeof Text> & {
-    className?: string;
-} & VariantProps<typeof toastDescriptionStyle>;
-
-const ToastDescription = React.forwardRef<React.ElementRef<typeof Text>, IToastDescriptionProps>(
-    ({ className, size = 'md', ...props }, ref) => {
-        const { variant: parentVariant } = useStyleContext(SCOPE);
-        return (
-            <Text
-                ref={ref}
-                {...props}
-                className={toastDescriptionStyle({
-                    size,
-                    class: className,
-                    parentVariants: {
-                        variant: parentVariant,
-                    },
-                })}
-            />
-        );
-    },
-);
-
-export { useToast, Toast, ToastTitle, ToastDescription };

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

@@ -1,132 +0,0 @@
-'use client';
-import React, { forwardRef, useEffect, useState } from 'react';
-import { createToast } from '@gluestack-ui/toast';
-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 = 'TOAST';
-
-const toastStyle = tva({
-    base: 'fixed flex items-center p-4 mb-4 rounded-lg shadow-lg transition-all duration-300 ease-in-out',
-    variants: {
-        variant: {
-            solid: 'bg-gray-800 text-white',
-            outline: 'bg-white border border-gray-300',
-            accent: 'border-l-4 border-blue-500 bg-white',
-        },
-        position: {
-            top: 'top-4 left-1/2 -translate-x-1/2',
-            'top-right': 'top-4 right-4',
-            'top-left': 'top-4 left-4',
-            bottom: 'bottom-4 left-1/2 -translate-x-1/2',
-            'bottom-right': 'bottom-4 right-4',
-            'bottom-left': 'bottom-4 left-4',
-        },
-        status: {
-            info: 'bg-blue-500 text-white',
-            success: 'bg-green-500 text-white',
-            warning: 'bg-yellow-500 text-white',
-            error: 'bg-red-500 text-white',
-        },
-    },
-    defaultVariants: {
-        variant: 'solid',
-        position: 'bottom',
-        status: 'info',
-    },
-});
-
-export const ToastTitle = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
-    <div ref={ref} className={`font-semibold ${className || ''}`} {...props} />
-));
-
-ToastTitle.displayName = 'ToastTitle';
-
-export const ToastDescription = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
-    ({ className, ...props }, ref) => <div ref={ref} className={`mt-1 ${className || ''}`} {...props} />,
-);
-
-ToastDescription.displayName = 'ToastDescription';
-
-type IToastProps = {
-    id?: string;
-    title?: string;
-    description?: string;
-    duration?: number;
-    onClose?: () => void;
-    isOpen?: boolean;
-    className?: string;
-    variant?: VariantProps<typeof toastStyle>['variant'];
-    position?: VariantProps<typeof toastStyle>['position'];
-    status?: VariantProps<typeof toastStyle>['status'];
-};
-
-const Toast = forwardRef<HTMLDivElement, IToastProps>(
-    (
-        { id, title, description, duration = 5000, onClose, isOpen, className, variant, position, status, ...props },
-        ref,
-    ) => {
-        const [isVisible, setIsVisible] = useState(isOpen);
-        const [isExiting, setIsExiting] = useState(false);
-
-        useEffect(() => {
-            setIsVisible(isOpen);
-            if (isOpen) {
-                const timer = setTimeout(() => {
-                    setIsExiting(true);
-                    setTimeout(() => {
-                        setIsVisible(false);
-                        setIsExiting(false);
-                        if (onClose) onClose();
-                    }, 300);
-                }, duration);
-
-                return () => clearTimeout(timer);
-            }
-        }, [isOpen, duration, onClose]);
-
-        if (!isVisible) return null;
-
-        return createPortal(
-            <div
-                ref={ref}
-                role="alert"
-                aria-live="polite"
-                className={toastStyle({
-                    variant,
-                    position,
-                    status,
-                    class: `${className || ''} ${isExiting ? 'opacity-0' : 'opacity-100'}`,
-                })}
-                {...props}
-            >
-                <div>
-                    {title && <ToastTitle>{title}</ToastTitle>}
-                    {description && <ToastDescription>{description}</ToastDescription>}
-                </div>
-                <button
-                    onClick={() => {
-                        setIsExiting(true);
-                        setTimeout(() => {
-                            setIsVisible(false);
-                            setIsExiting(false);
-                            if (onClose) onClose();
-                        }, 300);
-                    }}
-                    className="ml-4 text-current opacity-70 hover:opacity-100"
-                    aria-label="Close toast"
-                >
-                    ×
-                </button>
-            </div>,
-            document.body,
-        );
-    },
-);
-
-Toast.displayName = 'Toast';
-
-export { Toast };

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

@@ -1,104 +0,0 @@
-'use client';
-import React from 'react';
-import { createTooltip } from '@gluestack-ui/tooltip';
-import { View, Text } from 'react-native';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { Motion, AnimatePresence } from '@legendapp/motion';
-import { cssInterop } from 'nativewind';
-export const UITooltip = createTooltip({
-    Root: withStyleContext(View),
-    Content: Motion.View,
-    Text: Text,
-    AnimatePresence: AnimatePresence,
-});
-
-cssInterop(Motion.View, { className: 'style' });
-
-const tooltipStyle = tva({
-    base: 'w-full h-full web:pointer-events-none',
-});
-
-const tooltipContentStyle = tva({
-    base: 'py-1 px-3 rounded-sm bg-background-900 web:pointer-events-auto',
-});
-
-const tooltipTextStyle = tva({
-    base: 'font-normal tracking-normal web:select-none text-xs text-typography-50',
-
-    variants: {
-        isTruncated: {
-            true: {
-                props: 'line-clamp-1 truncate',
-            },
-        },
-        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',
-        },
-    },
-});
-
-type ITooltipProps = React.ComponentProps<typeof UITooltip> &
-    VariantProps<typeof tooltipStyle> & { className?: string };
-type ITooltipContentProps = React.ComponentProps<typeof UITooltip.Content> &
-    VariantProps<typeof tooltipContentStyle> & { className?: string };
-type ITooltipTextProps = React.ComponentProps<typeof UITooltip.Text> &
-    VariantProps<typeof tooltipTextStyle> & { className?: string };
-
-const Tooltip = React.forwardRef<React.ElementRef<typeof UITooltip>, ITooltipProps>(({ className, ...props }, ref) => {
-    return <UITooltip ref={ref} className={tooltipStyle({ class: className })} {...props} />;
-});
-
-const TooltipContent = React.forwardRef<
-    React.ElementRef<typeof UITooltip.Content>,
-    ITooltipContentProps & { className?: string }
->(({ className, ...props }, ref) => {
-    return (
-        <UITooltip.Content
-            ref={ref}
-            {...props}
-            className={tooltipContentStyle({
-                class: className,
-            })}
-            pointerEvents="auto"
-        />
-    );
-});
-
-const TooltipText = React.forwardRef<
-    React.ElementRef<typeof UITooltip.Text>,
-    ITooltipTextProps & { className?: string }
->(({ size, className, ...props }, ref) => {
-    return <UITooltip.Text ref={ref} className={tooltipTextStyle({ size, class: className })} {...props} />;
-});
-
-export { Tooltip, TooltipContent, TooltipText };