@admin-layout/gluestack-ui-mobile 11.0.4-alpha.4 → 11.2.1-alpha.1

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

@@ -1,53 +0,0 @@
-import React from 'react';
-
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { Text as RNText } from 'react-native';
-import { textStyle } from './styles';
-
-type ITextProps = React.ComponentProps<typeof RNText> &
-    VariantProps<typeof textStyle> & {
-        color?: string; // New prop for dynamic colors
-    };
-
-const Text = React.forwardRef<React.ElementRef<typeof RNText>, ITextProps>(
-    (
-        {
-            className,
-            isTruncated,
-            bold,
-            underline,
-            strikeThrough,
-            size = 'md',
-            sub,
-            italic,
-            highlight,
-            color,
-            style,
-            ...props
-        },
-        ref,
-    ) => {
-        return (
-            <RNText
-                className={textStyle({
-                    isTruncated,
-                    bold,
-                    underline,
-                    strikeThrough,
-                    size,
-                    sub,
-                    italic,
-                    highlight,
-                    class: className,
-                })}
-                style={[{ color }, style]}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-Text.displayName = 'Text';
-
-export { Text };

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { textStyle } from './styles';
-
-type ITextProps = React.ComponentProps<'span'> & VariantProps<typeof textStyle>;
-
-const Text = React.forwardRef<React.ElementRef<'span'>, ITextProps>(
-    (
-        {
-            className,
-            isTruncated,
-            bold,
-            underline,
-            strikeThrough,
-            size = 'md',
-            sub,
-            italic,
-            highlight,
-            ...props
-        }: { className?: string } & ITextProps,
-        ref,
-    ) => {
-        return (
-            <span
-                className={textStyle({
-                    isTruncated,
-                    bold,
-                    underline,
-                    strikeThrough,
-                    size,
-                    sub,
-                    italic,
-                    highlight,
-                    class: className,
-                })}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-Text.displayName = 'Text';
-
-export { Text };

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

package/src/components/ui/utils/use-break-point-value.ts

@@ -1,79 +0,0 @@
-import { Dimensions, useWindowDimensions } from 'react-native';
-import { useEffect, useState } from 'react';
-
-/** Define your breakpoints manually */
-const screenSize = {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    '2xl': 1536,
-};
-
-type Breakpoints = keyof typeof screenSize | 'default';
-
-type BreakPointValue = Partial<Record<Breakpoints, any>>;
-
-const resolveScreenWidth: Record<string, number> = {
-    default: 0,
-    ...screenSize,
-};
-
-/** Define the proper type including `value` */
-type MediaQueryBreakpoint = {
-    key: string;
-    breakpoint: number;
-    isValid: boolean;
-    value?: any; // Add this property to avoid TypeScript error
-};
-
-export const getBreakPointValue = (values: BreakPointValue, width: number) => {
-    if (typeof values !== 'object') return values;
-
-    let finalBreakPointResolvedValue: any;
-    const mediaQueriesBreakpoints: MediaQueryBreakpoint[] = Object.entries(resolveScreenWidth).map(
-        ([key, breakpoint]) => ({
-            key,
-            breakpoint,
-            isValid: width >= breakpoint,
-            value: undefined, // Initialize `value` property
-        }),
-    );
-
-    mediaQueriesBreakpoints.sort((a, b) => a.breakpoint - b.breakpoint);
-
-    mediaQueriesBreakpoints.forEach((breakpoint, index) => {
-        breakpoint.value = values.hasOwnProperty(breakpoint.key)
-            ? values[breakpoint.key]
-            : mediaQueriesBreakpoints[index - 1]?.value || values.default;
-    });
-
-    const lastValidObject = getLastValidObject(mediaQueriesBreakpoints);
-    finalBreakPointResolvedValue = lastValidObject ? lastValidObject.value : values;
-
-    return finalBreakPointResolvedValue;
-};
-
-export function useBreakpointValue(values: BreakPointValue): any {
-    const { width } = useWindowDimensions();
-    const [currentBreakPointValue, setCurrentBreakPointValue] = useState(getBreakPointValue(values, width));
-
-    useEffect(() => {
-        setCurrentBreakPointValue(getBreakPointValue(values, width));
-    }, [values, width]);
-
-    return typeof values !== 'object' ? values : currentBreakPointValue;
-}
-
-export function isValidBreakpoint(breakPointWidth: number, width: number = Dimensions.get('window').width) {
-    return width >= breakPointWidth;
-}
-
-function getLastValidObject(mediaQueries: MediaQueryBreakpoint[]) {
-    for (let i = mediaQueries.length - 1; i >= 0; i--) {
-        if (mediaQueries[i].isValid) {
-            return mediaQueries[i];
-        }
-    }
-    return null;
-}

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

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

package/src/components/ui/virtualized-list/index.tsx

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

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { View } from 'react-native';
-
-import { vstackStyle } from './styles';
-
-type IVStackProps = React.ComponentProps<typeof View> & VariantProps<typeof vstackStyle>;
-
-const VStack = React.forwardRef<React.ElementRef<typeof View>, IVStackProps>(
-    ({ className, space, reversed, ...props }, ref) => {
-        return <View className={vstackStyle({ space, reversed, class: className })} {...props} ref={ref} />;
-    },
-);
-
-VStack.displayName = 'VStack';
-
-export { VStack };

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-import { vstackStyle } from './styles';
-
-type IVStackProps = React.ComponentProps<'div'> & VariantProps<typeof vstackStyle>;
-
-const VStack = React.forwardRef<React.ElementRef<'div'>, IVStackProps>(
-    ({ className, space, reversed, ...props }, ref) => {
-        return <div className={vstackStyle({ space, reversed, class: className })} {...props} ref={ref} />;
-    },
-);
-
-VStack.displayName = 'VStack';
-
-export { VStack };