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

package/src/components/ui/alert-dialog/index.tsx

@@ -0,0 +1,260 @@
+'use client';
+import React from 'react';
+import { createAlertDialog } from '@gluestack-ui/alert-dialog';
+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 { Motion, AnimatePresence, createMotionAnimatedComponent } from '@legendapp/motion';
+import { View, Pressable, ScrollView } from 'react-native';
+
+const AnimatedPressable = createMotionAnimatedComponent(Pressable);
+
+const SCOPE = 'ALERT_DIALOG';
+
+const UIAccessibleAlertDialog = createAlertDialog({
+    Root: withStyleContext(View, SCOPE),
+    Body: ScrollView,
+    Content: Motion.View,
+    CloseButton: Pressable,
+    Header: View,
+    Footer: View,
+    Backdrop: AnimatedPressable,
+    AnimatePresence: AnimatePresence,
+});
+
+cssInterop(Motion.View, { className: 'style' });
+cssInterop(AnimatedPressable, { className: 'style' });
+
+const alertDialogStyle = tva({
+    base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none',
+    parentVariants: {
+        size: {
+            xs: '',
+            sm: '',
+            md: '',
+            lg: '',
+            full: '',
+        },
+    },
+});
+
+const alertDialogContentStyle = tva({
+    base: 'bg-background-0 rounded-lg overflow-hidden border border-outline-100 p-6',
+    parentVariants: {
+        size: {
+            xs: 'w-[60%] max-w-[360px]',
+            sm: 'w-[70%] max-w-[420px]',
+            md: 'w-[80%] max-w-[510px]',
+            lg: 'w-[90%] max-w-[640px]',
+            full: 'w-full',
+        },
+    },
+});
+
+const alertDialogCloseButtonStyle = tva({
+    base: 'group/alert-dialog-close-button z-10 rounded-sm p-2 data-[focus-visible=true]:bg-background-100 web:cursor-pointer outline-0',
+});
+
+const alertDialogHeaderStyle = tva({
+    base: 'justify-between items-center flex-row',
+});
+
+const alertDialogFooterStyle = tva({
+    base: 'flex-row justify-end items-center gap-3',
+});
+
+const alertDialogBodyStyle = tva({ base: '' });
+
+const alertDialogBackdropStyle = tva({
+    base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',
+});
+
+type IAlertDialogProps = React.ComponentPropsWithoutRef<typeof UIAccessibleAlertDialog> &
+    VariantProps<typeof alertDialogStyle>;
+
+type IAlertDialogContentProps = React.ComponentPropsWithoutRef<typeof UIAccessibleAlertDialog.Content> &
+    VariantProps<typeof alertDialogContentStyle> & { className?: string };
+
+type IAlertDialogCloseButtonProps = React.ComponentPropsWithoutRef<typeof UIAccessibleAlertDialog.CloseButton> &
+    VariantProps<typeof alertDialogCloseButtonStyle>;
+
+type IAlertDialogHeaderProps = React.ComponentPropsWithoutRef<typeof UIAccessibleAlertDialog.Header> &
+    VariantProps<typeof alertDialogHeaderStyle>;
+
+type IAlertDialogFooterProps = React.ComponentPropsWithoutRef<typeof UIAccessibleAlertDialog.Footer> &
+    VariantProps<typeof alertDialogFooterStyle>;
+
+type IAlertDialogBodyProps = React.ComponentPropsWithoutRef<typeof UIAccessibleAlertDialog.Body> &
+    VariantProps<typeof alertDialogBodyStyle>;
+
+type IAlertDialogBackdropProps = React.ComponentPropsWithoutRef<typeof UIAccessibleAlertDialog.Backdrop> &
+    VariantProps<typeof alertDialogBackdropStyle> & { className?: string };
+
+const AlertDialog = React.forwardRef<React.ElementRef<typeof UIAccessibleAlertDialog>, IAlertDialogProps>(
+    ({ className, size = 'md', ...props }, ref) => {
+        return (
+            <UIAccessibleAlertDialog
+                ref={ref}
+                {...props}
+                className={alertDialogStyle({ class: className })}
+                context={{ size }}
+                pointerEvents="box-none"
+            />
+        );
+    },
+);
+
+const AlertDialogContent = React.forwardRef<
+    React.ElementRef<typeof UIAccessibleAlertDialog.Content>,
+    IAlertDialogContentProps
+>(({ className, size, ...props }, ref) => {
+    const { size: parentSize } = useStyleContext(SCOPE);
+
+    return (
+        <UIAccessibleAlertDialog.Content
+            pointerEvents="auto"
+            ref={ref}
+            initial={{
+                scale: 0.9,
+                opacity: 0,
+            }}
+            animate={{
+                scale: 1,
+                opacity: 1,
+            }}
+            exit={{
+                scale: 0.9,
+                opacity: 0,
+            }}
+            transition={{
+                type: 'spring',
+                damping: 18,
+                stiffness: 250,
+                opacity: {
+                    type: 'timing',
+                    duration: 250,
+                },
+            }}
+            {...props}
+            className={alertDialogContentStyle({
+                parentVariants: {
+                    size: parentSize,
+                },
+                size,
+                class: className,
+            })}
+        />
+    );
+});
+
+const AlertDialogCloseButton = React.forwardRef<
+    React.ElementRef<typeof UIAccessibleAlertDialog.CloseButton>,
+    IAlertDialogCloseButtonProps
+>(({ className, ...props }, ref) => {
+    return (
+        <UIAccessibleAlertDialog.CloseButton
+            ref={ref}
+            {...props}
+            className={alertDialogCloseButtonStyle({
+                class: className,
+            })}
+        />
+    );
+});
+
+const AlertDialogHeader = React.forwardRef<
+    React.ElementRef<typeof UIAccessibleAlertDialog.Header>,
+    IAlertDialogHeaderProps
+>(({ className, ...props }, ref) => {
+    return (
+        <UIAccessibleAlertDialog.Header
+            ref={ref}
+            {...props}
+            className={alertDialogHeaderStyle({
+                class: className,
+            })}
+        />
+    );
+});
+
+const AlertDialogFooter = React.forwardRef<
+    React.ElementRef<typeof UIAccessibleAlertDialog.Footer>,
+    IAlertDialogFooterProps
+>(({ className, ...props }, ref) => {
+    return (
+        <UIAccessibleAlertDialog.Footer
+            ref={ref}
+            {...props}
+            className={alertDialogFooterStyle({
+                class: className,
+            })}
+        />
+    );
+});
+
+const AlertDialogBody = React.forwardRef<React.ElementRef<typeof UIAccessibleAlertDialog.Body>, IAlertDialogBodyProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <UIAccessibleAlertDialog.Body
+                ref={ref}
+                {...props}
+                className={alertDialogBodyStyle({
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+const AlertDialogBackdrop = React.forwardRef<
+    React.ElementRef<typeof UIAccessibleAlertDialog.Backdrop>,
+    IAlertDialogBackdropProps
+>(({ className, ...props }, ref) => {
+    return (
+        <UIAccessibleAlertDialog.Backdrop
+            ref={ref}
+            initial={{
+                opacity: 0,
+            }}
+            animate={{
+                opacity: 0.5,
+            }}
+            exit={{
+                opacity: 0,
+            }}
+            transition={{
+                type: 'spring',
+                damping: 18,
+                stiffness: 250,
+                opacity: {
+                    type: 'timing',
+                    duration: 250,
+                },
+            }}
+            {...props}
+            className={alertDialogBackdropStyle({
+                class: className,
+            })}
+        />
+    );
+});
+
+AlertDialog.displayName = 'AlertDialog';
+AlertDialogContent.displayName = 'AlertDialogContent';
+AlertDialogCloseButton.displayName = 'AlertDialogCloseButton';
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+AlertDialogBody.displayName = 'AlertDialogBody';
+AlertDialogBackdrop.displayName = 'AlertDialogBackdrop';
+
+export {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogCloseButton,
+    AlertDialogHeader,
+    AlertDialogFooter,
+    AlertDialogBody,
+    AlertDialogBackdrop,
+};

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

@@ -0,0 +1,162 @@
+'use client';
+import React from 'react';
+import { createAvatar } from '@gluestack-ui/avatar';
+
+import { View, Text, Image, Platform } from 'react-native';
+
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+const SCOPE = 'AVATAR';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const UIAvatar = createAvatar({
+    Root: withStyleContext(View, SCOPE),
+    Badge: View,
+    Group: View,
+    Image: Image,
+    FallbackText: Text,
+});
+
+const avatarStyle = tva({
+    base: 'rounded-full justify-center items-center relative bg-primary-600 group-[.avatar-group]/avatar-group:-ml-2.5',
+    variants: {
+        size: {
+            xs: 'w-6 h-6',
+            sm: 'w-8 h-8',
+            md: 'w-12 h-12',
+            lg: 'w-16 h-16',
+            xl: 'w-24 h-24',
+            '2xl': 'w-32 h-32',
+        },
+    },
+});
+
+const avatarFallbackTextStyle = tva({
+    base: 'text-typography-0 font-semibold overflow-hidden text-transform:uppercase web:cursor-default',
+
+    parentVariants: {
+        size: {
+            xs: 'text-2xs',
+            sm: 'text-xs',
+            md: 'text-base',
+            lg: 'text-xl',
+            xl: 'text-3xl',
+            '2xl': 'text-5xl',
+        },
+    },
+});
+
+const avatarGroupStyle = tva({
+    base: 'group/avatar-group flex-row-reverse relative avatar-group',
+});
+
+const avatarBadgeStyle = tva({
+    base: 'w-5 h-5 bg-success-500 rounded-full absolute right-0 bottom-0 border-background-0 border-2',
+    parentVariants: {
+        size: {
+            xs: 'w-2 h-2',
+            sm: 'w-2 h-2',
+            md: 'w-3 h-3',
+            lg: 'w-4 h-4',
+            xl: 'w-6 h-6',
+            '2xl': 'w-8 h-8',
+        },
+    },
+});
+
+const avatarImageStyle = tva({
+    base: 'h-full w-full rounded-full absolute',
+});
+
+type IAvatarProps = Omit<React.ComponentPropsWithoutRef<typeof UIAvatar>, 'context'> & VariantProps<typeof avatarStyle>;
+
+const Avatar = React.forwardRef<React.ElementRef<typeof UIAvatar>, IAvatarProps>(
+    ({ className, size = 'md', ...props }, ref) => {
+        return <UIAvatar ref={ref} {...props} className={avatarStyle({ size, class: className })} context={{ size }} />;
+    },
+);
+
+type IAvatarBadgeProps = React.ComponentPropsWithoutRef<typeof UIAvatar.Badge> & VariantProps<typeof avatarBadgeStyle>;
+
+const AvatarBadge = React.forwardRef<React.ElementRef<typeof UIAvatar.Badge>, IAvatarBadgeProps>(
+    ({ className, size, ...props }, ref) => {
+        const { size: parentSize } = useStyleContext(SCOPE);
+
+        return (
+            <UIAvatar.Badge
+                ref={ref}
+                {...props}
+                className={avatarBadgeStyle({
+                    parentVariants: {
+                        size: parentSize,
+                    },
+                    size,
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+type IAvatarFallbackTextProps = React.ComponentPropsWithoutRef<typeof UIAvatar.FallbackText> &
+    VariantProps<typeof avatarFallbackTextStyle>;
+const AvatarFallbackText = React.forwardRef<React.ElementRef<typeof UIAvatar.FallbackText>, IAvatarFallbackTextProps>(
+    ({ className, size, ...props }, ref) => {
+        const { size: parentSize } = useStyleContext(SCOPE);
+
+        return (
+            <UIAvatar.FallbackText
+                ref={ref}
+                {...props}
+                className={avatarFallbackTextStyle({
+                    parentVariants: {
+                        size: parentSize,
+                    },
+                    size,
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+type IAvatarImageProps = React.ComponentPropsWithoutRef<typeof UIAvatar.Image> & VariantProps<typeof avatarImageStyle>;
+
+const AvatarImage = React.forwardRef<React.ElementRef<typeof UIAvatar.Image>, IAvatarImageProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <UIAvatar.Image
+                ref={ref}
+                {...props}
+                className={avatarImageStyle({
+                    class: className,
+                })}
+                // @ts-expect-error
+                style={
+                    Platform.OS === 'web'
+                        ? // eslint-disable-next-line react-native/no-inline-styles
+                          { height: 'revert-layer', width: 'revert-layer' }
+                        : undefined
+                }
+            />
+        );
+    },
+);
+
+type IAvatarGroupProps = React.ComponentPropsWithoutRef<typeof UIAvatar.Group> & VariantProps<typeof avatarGroupStyle>;
+
+const AvatarGroup = React.forwardRef<React.ElementRef<typeof UIAvatar.Group>, IAvatarGroupProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <UIAvatar.Group
+                ref={ref}
+                {...props}
+                className={avatarGroupStyle({
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+export { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage, AvatarGroup };

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

@@ -0,0 +1,188 @@
+'use client';
+import React from 'react';
+import { Text, View } from 'react-native';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+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';
+const SCOPE = 'BADGE';
+
+const badgeStyle = tva({
+    base: 'flex-row items-center rounded-sm data-[disabled=true]:opacity-50 px-2 py-1',
+    variants: {
+        action: {
+            error: 'bg-background-error border-error-300',
+            warning: 'bg-background-warning border-warning-300',
+            success: 'bg-background-success border-success-300',
+            info: 'bg-background-info border-info-300',
+            muted: 'bg-background-muted border-background-300',
+        },
+        variant: {
+            solid: '',
+            outline: 'border',
+        },
+        size: {
+            sm: '',
+            md: '',
+            lg: '',
+        },
+    },
+});
+
+const badgeTextStyle = tva({
+    base: 'text-typography-700 font-body font-normal tracking-normal uppercase',
+
+    parentVariants: {
+        action: {
+            error: 'text-error-600',
+            warning: 'text-warning-600',
+            success: 'text-success-600',
+            info: 'text-info-600',
+            muted: 'text-background-800',
+        },
+        size: {
+            sm: 'text-2xs',
+            md: 'text-xs',
+            lg: 'text-sm',
+        },
+    },
+    variants: {
+        isTruncated: {
+            true: 'web:truncate',
+        },
+        bold: {
+            true: 'font-bold',
+        },
+        underline: {
+            true: 'underline',
+        },
+        strikeThrough: {
+            true: 'line-through',
+        },
+        sub: {
+            true: 'text-xs',
+        },
+        italic: {
+            true: 'italic',
+        },
+        highlight: {
+            true: 'bg-yellow-500',
+        },
+    },
+});
+
+const badgeIconStyle = tva({
+    base: 'fill-none',
+    parentVariants: {
+        action: {
+            error: 'text-error-600',
+            warning: 'text-warning-600',
+            success: 'text-success-600',
+            info: 'text-info-600',
+            muted: 'text-background-800',
+        },
+        size: {
+            sm: 'h-3 w-3',
+            md: 'h-3.5 w-3.5',
+            lg: 'h-4 w-4',
+        },
+    },
+});
+
+const ContextView = withStyleContext(View, SCOPE);
+
+cssInterop(PrimitiveIcon, {
+    className: {
+        target: 'style',
+        nativeStyleToProp: {
+            height: true,
+            width: true,
+            fill: true,
+            color: 'classNameColor',
+            stroke: true,
+        },
+    },
+});
+
+type IBadgeProps = React.ComponentPropsWithoutRef<typeof ContextView> & VariantProps<typeof badgeStyle>;
+const Badge = ({
+    children,
+    action = 'muted',
+    variant = 'solid',
+    size = 'md',
+    className,
+    ...props
+}: { className?: string } & IBadgeProps) => {
+    return (
+        <ContextView
+            className={badgeStyle({ action, variant, class: className })}
+            {...props}
+            context={{
+                action,
+                variant,
+                size,
+            }}
+        >
+            {children}
+        </ContextView>
+    );
+};
+
+type IBadgeTextProps = React.ComponentPropsWithoutRef<typeof Text> & VariantProps<typeof badgeTextStyle>;
+
+const BadgeText = React.forwardRef<React.ElementRef<typeof Text>, IBadgeTextProps>(
+    ({ children, className, size, ...props }, ref) => {
+        const { size: parentSize, action: parentAction } = useStyleContext(SCOPE);
+        return (
+            <Text
+                ref={ref}
+                className={badgeTextStyle({
+                    parentVariants: {
+                        size: parentSize,
+                        action: parentAction,
+                    },
+                    size,
+                    class: className,
+                })}
+                {...props}
+            >
+                {children}
+            </Text>
+        );
+    },
+);
+
+type IBadgeIconProps = React.ComponentPropsWithoutRef<typeof PrimitiveIcon> & VariantProps<typeof badgeIconStyle>;
+
+const BadgeIcon = React.forwardRef<React.ElementRef<typeof UIIcon>, IBadgeIconProps>(
+    ({ className, size, ...props }, ref) => {
+        const { size: parentSize, action: parentAction } = useStyleContext(SCOPE);
+
+        if (typeof size === 'number') {
+            return <UIIcon ref={ref} {...props} className={badgeIconStyle({ class: className })} size={size} />;
+        } else if ((props?.height !== undefined || props?.width !== undefined) && size === undefined) {
+            return <UIIcon ref={ref} {...props} className={badgeIconStyle({ class: className })} />;
+        }
+        return (
+            <UIIcon
+                className={badgeIconStyle({
+                    parentVariants: {
+                        size: parentSize,
+                        action: parentAction,
+                    },
+                    size,
+                    class: className,
+                })}
+                {...props}
+                ref={ref}
+            />
+        );
+    },
+);
+
+Badge.displayName = 'Badge';
+BadgeText.displayName = 'BadgeText';
+BadgeIcon.displayName = 'BadgeIcon';
+
+export { Badge, BadgeIcon, BadgeText };

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View, ViewProps } from 'react-native';
+
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { boxStyle } from './styles';
+
+type IBoxProps = ViewProps & VariantProps<typeof boxStyle> & { className?: string };
+
+const Box = React.forwardRef<React.ElementRef<typeof View>, IBoxProps>(({ className, ...props }, ref) => {
+    return <View ref={ref} {...props} className={boxStyle({ class: className })} />;
+});
+
+Box.displayName = 'Box';
+export { Box };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { boxStyle } from './styles';
+
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type IBoxProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof boxStyle> & { className?: string };
+
+const Box = React.forwardRef<HTMLDivElement, IBoxProps>(({ className, ...props }, ref) => {
+    return <div ref={ref} className={boxStyle({ class: className })} {...props} />;
+});
+
+Box.displayName = 'Box';
+export { Box };

package/src/components/ui/box/styles.tsx

@@ -0,0 +1,10 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+
+const baseStyle = isWeb
+    ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+    : '';
+
+export const boxStyle = tva({
+    base: baseStyle,
+});