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

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

@@ -1,241 +0,0 @@
-'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';
-
-const SCOPE = 'ALERT_DIALOG';
-
-// Create base components with proper types
-interface BaseProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
-}
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    className?: string;
-}
-
-const RootComponent = React.forwardRef<HTMLDivElement, BaseProps>((props, ref) => <div {...props} ref={ref} />);
-const BodyComponent = React.forwardRef<HTMLDivElement, BaseProps>((props, ref) => <div {...props} ref={ref} />);
-const ContentComponent = Motion.View;
-const CloseButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
-    <button {...props} ref={ref} />
-));
-const HeaderComponent = React.forwardRef<HTMLDivElement, BaseProps>((props, ref) => <div {...props} ref={ref} />);
-const FooterComponent = React.forwardRef<HTMLDivElement, BaseProps>((props, ref) => <div {...props} ref={ref} />);
-const BackdropComponent = createMotionAnimatedComponent(
-    React.forwardRef<HTMLDivElement, BaseProps>((props, ref) => <div {...props} ref={ref} />),
-);
-
-const UIAccessibleAlertDialog = createAlertDialog({
-    Root: withStyleContext(RootComponent, SCOPE),
-    Body: BodyComponent,
-    Content: ContentComponent,
-    CloseButton: CloseButtonComponent,
-    Header: HeaderComponent,
-    Footer: FooterComponent,
-    Backdrop: BackdropComponent,
-    AnimatePresence: AnimatePresence,
-});
-
-cssInterop(Motion.View, { className: 'style' });
-cssInterop(BackdropComponent, { className: 'style' });
-
-const alertDialogStyle = tva({
-    base: 'group/modal w-full h-full justify-center items-center 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 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 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) => {
-        const classes = alertDialogStyle({ class: className });
-        return <UIAccessibleAlertDialog ref={ref} {...props} className={classes} context={{ size }} />;
-    },
-);
-
-const AlertDialogContent = React.forwardRef<
-    React.ElementRef<typeof UIAccessibleAlertDialog.Content>,
-    IAlertDialogContentProps
->(({ className, size, ...props }, ref) => {
-    const { size: parentSize } = useStyleContext(SCOPE);
-    const classes = alertDialogContentStyle({
-        parentVariants: {
-            size: parentSize,
-        },
-        size,
-        class: className,
-    });
-
-    return (
-        <UIAccessibleAlertDialog.Content
-            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={classes}
-        />
-    );
-});
-
-const AlertDialogCloseButton = React.forwardRef<
-    React.ElementRef<typeof UIAccessibleAlertDialog.CloseButton>,
-    IAlertDialogCloseButtonProps
->(({ className, ...props }, ref) => {
-    const classes = alertDialogCloseButtonStyle({ class: className });
-    return <UIAccessibleAlertDialog.CloseButton ref={ref} {...props} className={classes} />;
-});
-
-const AlertDialogHeader = React.forwardRef<
-    React.ElementRef<typeof UIAccessibleAlertDialog.Header>,
-    IAlertDialogHeaderProps
->(({ className, ...props }, ref) => {
-    const classes = alertDialogHeaderStyle({ class: className });
-    return <UIAccessibleAlertDialog.Header ref={ref} {...props} className={classes} />;
-});
-
-const AlertDialogFooter = React.forwardRef<
-    React.ElementRef<typeof UIAccessibleAlertDialog.Footer>,
-    IAlertDialogFooterProps
->(({ className, ...props }, ref) => {
-    const classes = alertDialogFooterStyle({ class: className });
-    return <UIAccessibleAlertDialog.Footer ref={ref} {...props} className={classes} />;
-});
-
-const AlertDialogBody = React.forwardRef<React.ElementRef<typeof UIAccessibleAlertDialog.Body>, IAlertDialogBodyProps>(
-    ({ className, ...props }, ref) => {
-        const classes = alertDialogBodyStyle({ class: className });
-        return <UIAccessibleAlertDialog.Body ref={ref} {...props} className={classes} />;
-    },
-);
-
-const AlertDialogBackdrop = React.forwardRef<
-    React.ElementRef<typeof UIAccessibleAlertDialog.Backdrop>,
-    IAlertDialogBackdropProps
->(({ className, ...props }, ref) => {
-    const classes = alertDialogBackdropStyle({ class: className });
-    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={classes}
-        />
-    );
-});
-
-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

@@ -1,162 +0,0 @@
-'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/avatar/index.web.tsx

@@ -1,150 +0,0 @@
-'use client';
-import React from 'react';
-import { createAvatar } from '@gluestack-ui/avatar';
-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';
-
-type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
-const UIAvatar = createAvatar({
-    Root: withStyleContext(({ children, ...props }: any) => <div {...props}>{children}</div>, SCOPE),
-    Badge: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-    Group: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-    Image: (props: any) => <img {...props} />,
-    FallbackText: ({ children, ...props }: any) => <span {...props}>{children}</span>,
-});
-
-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 cursor-default',
-    variants: {
-        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',
-    variants: {
-        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',
-});
-
-interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
-    size?: SizeType;
-}
-
-const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(({ className, size = 'md', ...props }, ref) => {
-    return <UIAvatar {...props} ref={ref} className={avatarStyle({ size, class: className })} context={{ size }} />;
-});
-
-interface AvatarBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-    size?: SizeType;
-}
-
-const AvatarBadge = React.forwardRef<HTMLDivElement, AvatarBadgeProps>(({ className, size, ...props }, ref) => {
-    const { size: parentSize } = useStyleContext(SCOPE);
-    return (
-        <UIAvatar.Badge
-            {...props}
-            ref={ref}
-            className={avatarBadgeStyle({
-                size: size || parentSize,
-                class: className,
-            })}
-        />
-    );
-});
-
-interface AvatarFallbackTextProps extends React.HTMLAttributes<HTMLSpanElement> {
-    size?: SizeType;
-}
-
-const AvatarFallbackText = React.forwardRef<HTMLSpanElement, AvatarFallbackTextProps>(
-    ({ className, size, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-        return (
-            <UIAvatar.FallbackText
-                {...props}
-                ref={ref}
-                className={avatarFallbackTextStyle({
-                    size: size || parentSize,
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}
-
-const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(({ className, ...props }, ref) => {
-    return (
-        <UIAvatar.Image
-            {...props}
-            ref={ref}
-            className={avatarImageStyle({
-                class: className,
-            })}
-        />
-    );
-});
-
-interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(({ className, ...props }, ref) => {
-    return (
-        <UIAvatar.Group
-            {...props}
-            ref={ref}
-            className={avatarGroupStyle({
-                class: className,
-            })}
-        />
-    );
-});
-
-Avatar.displayName = 'Avatar';
-AvatarBadge.displayName = 'AvatarBadge';
-AvatarFallbackText.displayName = 'AvatarFallbackText';
-AvatarImage.displayName = 'AvatarImage';
-AvatarGroup.displayName = 'AvatarGroup';
-
-export { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage, AvatarGroup };