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

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

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

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

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

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

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

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

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

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

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

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