@admin-layout/gluestack-ui-mobile 11.0.1-alpha.0 → 11.0.2-alpha.0

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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,83 @@
+'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

@@ -0,0 +1,218 @@
+'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

@@ -0,0 +1,104 @@
+'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

@@ -0,0 +1,79 @@
+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

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

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

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

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

@@ -0,0 +1,17 @@
+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

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