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

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

@@ -1,48 +0,0 @@
-'use client';
-import React from 'react';
-import { createImage } from '@gluestack-ui/image';
-import { Platform, Image as RNImage } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const imageStyle = tva({
-    base: 'max-w-full',
-    variants: {
-        size: {
-            '2xs': 'h-6 w-6',
-            xs: 'h-10 w-10',
-            sm: 'h-16 w-16',
-            md: 'h-20 w-20',
-            lg: 'h-24 w-24',
-            xl: 'h-32 w-32',
-            '2xl': 'h-64 w-64',
-            full: 'h-full w-full',
-            none: '',
-        },
-    },
-});
-
-const UIImage = createImage({ Root: RNImage });
-
-type ImageProps = VariantProps<typeof imageStyle> & React.ComponentProps<typeof UIImage>;
-const Image = React.forwardRef<React.ElementRef<typeof UIImage>, ImageProps & { className?: string }>(
-    ({ size = 'md', className, ...props }, ref) => {
-        return (
-            <UIImage
-                className={imageStyle({ size, class: className })}
-                {...props}
-                ref={ref}
-                // @ts-expect-error
-                style={
-                    Platform.OS === 'web'
-                        ? // eslint-disable-next-line react-native/no-inline-styles
-                          { height: 'revert-layer', width: 'revert-layer' }
-                        : undefined
-                }
-            />
-        );
-    },
-);
-
-Image.displayName = 'Image';
-export { Image };

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

@@ -1,43 +0,0 @@
-'use client';
-import React from 'react';
-import { createImage } from '@gluestack-ui/image';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const imageStyle = tva({
-    base: 'max-w-full',
-    variants: {
-        size: {
-            '2xs': 'h-6 w-6',
-            xs: 'h-10 w-10',
-            sm: 'h-16 w-16',
-            md: 'h-20 w-20',
-            lg: 'h-24 w-24',
-            xl: 'h-32 w-32',
-            '2xl': 'h-64 w-64',
-            full: 'h-full w-full',
-            none: '',
-        },
-    },
-});
-
-interface ImageBaseProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
-    source?: { uri: string };
-}
-
-const ImgComponent = ({ source, ...props }: ImageBaseProps) => <img src={source?.uri || ''} {...props} />;
-
-ImgComponent.displayName = 'ImgComponent';
-
-const UIImage = createImage({ Root: ImgComponent });
-
-interface ImageProps extends VariantProps<typeof imageStyle>, ImageBaseProps {
-    className?: string;
-}
-
-const Image = ({ size = 'md', className, ...props }: ImageProps) => {
-    return <UIImage className={imageStyle({ size, class: className })} {...props} />;
-};
-
-Image.displayName = 'Image';
-export { Image };

package/src/components/ui/image-background/index.tsx

@@ -1,21 +0,0 @@
-'use client';
-import { ImageBackground as RNImageBackground } from 'react-native';
-import React from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-
-const imageBackgroundStyle = tva({});
-
-export const ImageBackground = React.forwardRef<
-    React.ElementRef<typeof RNImageBackground>,
-    React.ComponentProps<typeof RNImageBackground>
->(({ className, ...props }, ref) => {
-    return (
-        <RNImageBackground
-            className={imageBackgroundStyle({
-                class: className,
-            })}
-            {...props}
-            ref={ref}
-        />
-    );
-});

package/src/components/ui/image-background/index.web.tsx

@@ -1,43 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { clsx } from 'clsx';
-
-const imageBackgroundStyle = tva({
-    base: 'bg-no-repeat bg-center bg-cover',
-});
-
-type ImageBackgroundProps = React.HTMLAttributes<HTMLDivElement> & {
-    source: { uri: string } | number;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
-    className?: string;
-};
-
-export const ImageBackground = forwardRef<HTMLDivElement, ImageBackgroundProps>(
-    ({ source, resizeMode = 'cover', className, style, children, ...props }, ref) => {
-        const imageUrl = typeof source === 'number' ? source : source.uri;
-        const backgroundSize = {
-            cover: 'cover',
-            contain: 'contain',
-            stretch: '100% 100%',
-            center: 'auto',
-        }[resizeMode];
-
-        return (
-            <div
-                ref={ref}
-                className={imageBackgroundStyle({ class: clsx(className) })}
-                style={{
-                    ...style,
-                    backgroundImage: `url(${imageUrl})`,
-                    backgroundSize,
-                }}
-                {...props}
-            >
-                {children}
-            </div>
-        );
-    },
-);
-
-ImageBackground.displayName = 'ImageBackground';

package/src/components/ui/index.ts

@@ -1,54 +0,0 @@
-export * from './IconSymbol';
-export * from './TabBarBackground';
-export * from './accordion';
-export * from './actionsheet';
-export * from './alert';
-export * from './alert-dialog';
-export * from './avatar';
-export * from './badge';
-export * from './box';
-export * from './button';
-export * from './card';
-export * from './center';
-export * from './checkbox';
-export * from './divider';
-export * from './drawer';
-export * from './fab';
-export * from './flat-list';
-export * from './form-control';
-export * from './gluestack-ui-provider';
-export * from './grid';
-export * from './heading';
-export * from './hstack';
-export * from './icon';
-export * from './image';
-export * from './image-background';
-export * from './input';
-export * from './input-accessory-view';
-export * from './keyboard-avoiding-view';
-export * from './link';
-export * from './menu';
-export * from './modal';
-export * from './popover';
-export * from './portal';
-export * from './pressable';
-export * from './progress';
-export * from './radio';
-export * from './refresh-control';
-export * from './safe-area-view';
-export * from './scroll-view';
-export * from './section-list';
-export * from './select';
-export * from './skeleton';
-export * from './slider';
-export * from './spinner';
-export * from './status-bar';
-export * from './switch';
-export * from './table';
-export * from './text';
-export * from './textarea';
-export * from './toast';
-export * from './tooltip';
-export * from './view';
-export * from './virtualized-list';
-export * from './vstack';

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

@@ -1,191 +0,0 @@
-'use client';
-import React from 'react';
-import { createInput } from '@gluestack-ui/input';
-import { View, Pressable, TextInput } 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 = 'INPUT';
-
-const UIInput = createInput({
-    Root: withStyleContext(View, SCOPE),
-    Icon: UIIcon,
-    Slot: Pressable,
-    Input: TextInput,
-});
-
-cssInterop(PrimitiveIcon, {
-    className: {
-        target: 'style',
-        nativeStyleToProp: {
-            height: true,
-            width: true,
-            fill: true,
-            color: 'classNameColor',
-            stroke: true,
-        },
-    },
-});
-
-const inputStyle = tva({
-    base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300 items-center',
-
-    variants: {
-        size: {
-            xl: 'h-12',
-            lg: 'h-11',
-            md: 'h-10',
-            sm: 'h-9',
-        },
-
-        variant: {
-            underlined:
-                'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700',
-
-            outline:
-                'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error',
-
-            rounded:
-                'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error',
-        },
-    },
-});
-
-const inputIconStyle = tva({
-    base: 'justify-center items-center text-typography-400 fill-none',
-    parentVariants: {
-        size: {
-            '2xs': 'h-3 w-3',
-            xs: 'h-3.5 w-3.5',
-            sm: 'h-4 w-4',
-            md: 'h-[18px] w-[18px]',
-            lg: 'h-5 w-5',
-            xl: 'h-6 w-6',
-        },
-    },
-});
-
-const inputSlotStyle = tva({
-    base: 'justify-center items-center web:disabled:cursor-not-allowed',
-});
-
-const inputFieldStyle = tva({
-    base: 'flex-1 text-typography-900 py-0 px-3 placeholder:text-typography-500 h-full ios:leading-[0px] web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
-
-    parentVariants: {
-        variant: {
-            underlined: 'web:outline-0 web:outline-none px-0',
-            outline: 'web:outline-0 web:outline-none',
-            rounded: 'web:outline-0 web:outline-none px-4',
-        },
-
-        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 IInputProps = React.ComponentProps<typeof UIInput> & VariantProps<typeof inputStyle> & { className?: string };
-const Input = React.forwardRef<React.ElementRef<typeof UIInput>, IInputProps>(
-    ({ className, variant = 'outline', size = 'md', ...props }, ref) => {
-        return (
-            <UIInput
-                ref={ref}
-                {...props}
-                className={inputStyle({ variant, size, class: className })}
-                context={{ variant, size }}
-            />
-        );
-    },
-);
-
-type IInputIconProps = React.ComponentProps<typeof UIInput.Icon> &
-    VariantProps<typeof inputIconStyle> & {
-        className?: string;
-        height?: number;
-        width?: number;
-    };
-
-const InputIcon = React.forwardRef<React.ElementRef<typeof UIInput.Icon>, IInputIconProps>(
-    ({ className, size, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        if (typeof size === 'number') {
-            return <UIInput.Icon ref={ref} {...props} className={inputIconStyle({ class: className })} size={size} />;
-        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
-            return <UIInput.Icon ref={ref} {...props} className={inputIconStyle({ class: className })} />;
-        }
-        return (
-            <UIInput.Icon
-                ref={ref}
-                {...props}
-                className={inputIconStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-type IInputSlotProps = React.ComponentProps<typeof UIInput.Slot> &
-    VariantProps<typeof inputSlotStyle> & { className?: string };
-
-const InputSlot = React.forwardRef<React.ElementRef<typeof UIInput.Slot>, IInputSlotProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIInput.Slot
-                ref={ref}
-                {...props}
-                className={inputSlotStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-type IInputFieldProps = React.ComponentProps<typeof UIInput.Input> &
-    VariantProps<typeof inputFieldStyle> & { className?: string };
-
-const InputField = React.forwardRef<React.ElementRef<typeof UIInput.Input>, IInputFieldProps>(
-    ({ className, ...props }, ref) => {
-        const { variant: parentVariant, size: parentSize } = useStyleContext(SCOPE);
-
-        return (
-            <UIInput.Input
-                ref={ref}
-                {...props}
-                className={inputFieldStyle({
-                    parentVariants: {
-                        variant: parentVariant,
-                        size: parentSize,
-                    },
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-Input.displayName = 'Input';
-InputIcon.displayName = 'InputIcon';
-InputSlot.displayName = 'InputSlot';
-InputField.displayName = 'InputField';
-
-export { Input, InputField, InputIcon, InputSlot };

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

@@ -1,80 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { createInput } from '@gluestack-ui/input';
-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 = 'INPUT';
-
-const StyledInput = forwardRef<HTMLInputElement, any>(
-    ({ onChangeText, onChange, secureTextEntry, placeholder, placeholderTextColor, ...props }, ref) => {
-        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            if (onChange) {
-                onChange(e);
-            }
-            if (onChangeText) {
-                onChangeText(e.target.value);
-            }
-        };
-
-        return (
-            <input
-                ref={ref}
-                type={secureTextEntry ? 'password' : 'text'}
-                placeholder={placeholder}
-                onChange={handleChange}
-                style={{
-                    ...props.style,
-                    '::placeholder': {
-                        color: placeholderTextColor,
-                    },
-                }}
-                {...props}
-            />
-        );
-    },
-);
-
-StyledInput.displayName = 'StyledInput';
-
-const inputStyle = 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 h-8',
-            md: 'text-base h-10',
-            lg: 'text-lg h-12',
-        },
-        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 IInputProps = React.ComponentProps<typeof StyledInput> &
-    VariantProps<typeof inputStyle> & {
-        className?: string;
-        onChangeText?: (text: string) => void;
-        secureTextEntry?: boolean;
-        placeholderTextColor?: string;
-    };
-
-const Input = React.forwardRef<HTMLInputElement, IInputProps>(({ className, size, variant, state, ...props }, ref) => {
-    return <StyledInput ref={ref} className={inputStyle({ size, variant, state, class: className })} {...props} />;
-});
-
-Input.displayName = 'Input';
-
-export { Input };

package/src/components/ui/input-accessory-view/index.tsx

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

package/src/components/ui/input-accessory-view/index.web.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import React from 'react';
-
-interface InputAccessoryViewProps {
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-    backgroundColor?: string;
-    nativeID?: string;
-}
-
-export const InputAccessoryView = ({ children, style, backgroundColor, ...props }: InputAccessoryViewProps) => {
-    return (
-        <div
-            style={{
-                position: 'fixed',
-                bottom: 0,
-                left: 0,
-                right: 0,
-                backgroundColor: backgroundColor || '#ffffff',
-                borderTopWidth: '1px',
-                borderTopStyle: 'solid',
-                borderTopColor: '#e5e5e5',
-                ...style,
-            }}
-            {...props}
-        >
-            {children}
-        </div>
-    );
-};

package/src/components/ui/keyboard-avoiding-view/index.tsx

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

package/src/components/ui/keyboard-avoiding-view/index.web.tsx

@@ -1,23 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-
-interface KeyboardAvoidingViewProps extends React.HTMLAttributes<HTMLDivElement> {
-    behavior?: 'height' | 'position' | 'padding';
-    keyboardVerticalOffset?: number;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-}
-
-const KeyboardAvoidingView = forwardRef<HTMLDivElement, KeyboardAvoidingViewProps>(
-    ({ children, style, ...props }, ref) => {
-        return (
-            <div ref={ref} style={style} {...props}>
-                {children}
-            </div>
-        );
-    },
-);
-
-KeyboardAvoidingView.displayName = 'KeyboardAvoidingView';
-
-export { KeyboardAvoidingView };

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

@@ -1,92 +0,0 @@
-'use client';
-import { createLink } from '@gluestack-ui/link';
-import { Pressable } from 'react-native';
-import { Text } from 'react-native';
-
-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 React from 'react';
-export const UILink = createLink({
-    Root: withStyleContext(Pressable),
-    Text: Text,
-});
-
-cssInterop(UILink, { className: 'style' });
-cssInterop(UILink.Text, { className: 'style' });
-
-const linkStyle = tva({
-    base: 'group/link web:outline-0 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-indicator-primary data-[focus-visible=true]:web:outline-0 data-[disabled=true]:opacity-4 ',
-});
-
-const linkTextStyle = tva({
-    base: 'underline text-info-700 data-[hover=true]:text-info-600 data-[hover=true]:no-underline data-[active=true]:text-info-700 font-normal font-body web:font-sans web:tracking-sm web:my-0 web:bg-transparent web:border-0 web:box-border web:display-inline web:list-none web:margin-0 web:padding-0 web:position-relative web:text-start web:whitespace-pre-wrap web:word-wrap-break-word',
-
-    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',
-        },
-    },
-});
-
-type ILinkProps = React.ComponentProps<typeof UILink> & VariantProps<typeof linkStyle> & { className?: string };
-
-const Link = React.forwardRef<React.ElementRef<typeof UILink>, ILinkProps>(({ className, ...props }, ref) => {
-    return <UILink ref={ref} {...props} className={linkStyle({ class: className })} />;
-});
-
-type ILinkTextProps = React.ComponentProps<typeof UILink.Text> &
-    VariantProps<typeof linkTextStyle> & { className?: string };
-
-const LinkText = React.forwardRef<React.ElementRef<typeof UILink.Text>, ILinkTextProps>(
-    ({ className, size = 'md', ...props }, ref) => {
-        return (
-            <UILink.Text
-                ref={ref}
-                {...props}
-                className={linkTextStyle({
-                    class: className,
-                    size,
-                })}
-            />
-        );
-    },
-);
-
-Link.displayName = 'Link';
-LinkText.displayName = 'LinkText';
-
-export { Link, LinkText };