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

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-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/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-accessory-view/index.tsx

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

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

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

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

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

@@ -1,179 +0,0 @@
-'use client';
-import React from 'react';
-import { createMenu } from '@gluestack-ui/menu';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { cssInterop } from 'nativewind';
-import { Pressable, Text, View } from 'react-native';
-import { Motion, AnimatePresence } from '@legendapp/motion';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const menuStyle = tva({
-    base: 'rounded-md bg-background-0 border border-outline-100 p-1 shadow-hard-5',
-});
-
-const menuItemStyle = tva({
-    base: 'min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent',
-});
-
-const menuBackdropStyle = tva({
-    base: 'absolute top-0 bottom-0 left-0 right-0 web:cursor-default',
-    // add this classnames if you want to give background color to backdrop
-    // opacity-50 bg-background-500,
-});
-
-const menuSeparatorStyle = tva({
-    base: 'bg-background-200 h-px w-full',
-});
-
-const menuItemLabelStyle = tva({
-    base: 'text-typography-700 font-normal font-body',
-
-    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',
-        },
-    },
-});
-
-const BackdropPressable = React.forwardRef<
-    React.ElementRef<typeof Pressable>,
-    React.ComponentPropsWithoutRef<typeof Pressable> & VariantProps<typeof menuBackdropStyle>
->(({ className, ...props }, ref) => {
-    return (
-        <Pressable
-            ref={ref}
-            className={menuBackdropStyle({
-                class: className,
-            })}
-            {...props}
-        />
-    );
-});
-
-type IMenuItemProps = VariantProps<typeof menuItemStyle> & {
-    className?: string;
-} & React.ComponentPropsWithoutRef<typeof Pressable>;
-
-const Item = React.forwardRef<React.ElementRef<typeof Pressable>, IMenuItemProps>(({ className, ...props }, ref) => {
-    return (
-        <Pressable
-            ref={ref}
-            className={menuItemStyle({
-                class: className,
-            })}
-            {...props}
-        />
-    );
-});
-
-const Separator = React.forwardRef(({ className, ...props }: any, ref?: any) => {
-    return <View ref={ref} className={menuSeparatorStyle({ class: className })} {...props} />;
-});
-export const UIMenu = createMenu({
-    Root: Motion.View,
-    Item: Item,
-    Label: Text,
-    Backdrop: BackdropPressable,
-    AnimatePresence: AnimatePresence,
-    Separator: Separator,
-});
-
-cssInterop(Motion.View, { className: 'style' });
-
-type IMenuProps = React.ComponentProps<typeof UIMenu> & VariantProps<typeof menuStyle> & { className?: string };
-type IMenuItemLabelProps = React.ComponentProps<typeof UIMenu.ItemLabel> &
-    VariantProps<typeof menuItemLabelStyle> & { className?: string };
-
-const Menu = React.forwardRef<React.ElementRef<typeof UIMenu>, IMenuProps>(({ className, ...props }, ref) => {
-    return (
-        <UIMenu
-            ref={ref}
-            initial={{
-                opacity: 0,
-                scale: 0.8,
-            }}
-            animate={{
-                opacity: 1,
-                scale: 1,
-            }}
-            exit={{
-                opacity: 0,
-                scale: 0.8,
-            }}
-            transition={{
-                type: 'timing',
-                duration: 100,
-            }}
-            className={menuStyle({
-                class: className,
-            })}
-            {...props}
-        />
-    );
-});
-
-const MenuItem = UIMenu.Item;
-
-const MenuItemLabel = React.forwardRef<React.ElementRef<typeof UIMenu.ItemLabel>, IMenuItemLabelProps>(
-    (
-        { className, isTruncated, bold, underline, strikeThrough, size = 'md', sub, italic, highlight, ...props },
-        ref,
-    ) => {
-        return (
-            <UIMenu.ItemLabel
-                ref={ref}
-                className={menuItemLabelStyle({
-                    isTruncated,
-                    bold,
-                    underline,
-                    strikeThrough,
-                    size,
-                    sub,
-                    italic,
-                    highlight,
-                    class: className,
-                })}
-                {...props}
-            />
-        );
-    },
-);
-
-const MenuSeparator = UIMenu.Separator;
-
-Menu.displayName = 'Menu';
-MenuItem.displayName = 'MenuItem';
-MenuItemLabel.displayName = 'MenuItemLabel';
-MenuSeparator.displayName = 'MenuSeparator';
-export { Menu, MenuItem, MenuItemLabel, MenuSeparator };