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

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

@@ -1,205 +0,0 @@
-'use client';
-import { createAlert } from '@gluestack-ui/alert';
-import { View, Text } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import React from 'react';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
-
-const SCOPE = 'ALERT';
-
-const alertStyle = tva({
-    base: 'items-center py-3 px-4 rounded-md flex-row gap-2 border-outline-100',
-
-    variants: {
-        action: {
-            error: 'bg-background-error',
-            warning: 'bg-background-warning',
-            success: 'bg-background-success',
-            info: 'bg-background-info',
-            muted: 'bg-background-muted',
-        },
-
-        variant: {
-            solid: '',
-            outline: 'border bg-background-0',
-        },
-    },
-});
-
-const alertTextStyle = tva({
-    base: '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',
-        },
-    },
-    parentVariants: {
-        action: {
-            error: 'text-error-800',
-            warning: 'text-warning-800',
-            success: 'text-success-800',
-            info: 'text-info-800',
-            muted: 'text-background-800',
-        },
-    },
-});
-
-const alertIconStyle = tva({
-    base: 'fill-none',
-    variants: {
-        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',
-        },
-    },
-    parentVariants: {
-        action: {
-            error: 'text-error-800',
-            warning: 'text-warning-800',
-            success: 'text-success-800',
-            info: 'text-info-800',
-            muted: 'text-background-800',
-        },
-    },
-});
-
-export const UIAlert = createAlert({
-    Root: withStyleContext(View, SCOPE),
-    Text: Text,
-    Icon: UIIcon,
-});
-
-cssInterop(PrimitiveIcon, {
-    className: {
-        target: 'style',
-        nativeStyleToProp: {
-            height: true,
-            width: true,
-            fill: true,
-            color: 'classNameColor',
-            stroke: true,
-        },
-    },
-});
-
-type IAlertProps = Omit<React.ComponentPropsWithoutRef<typeof UIAlert>, 'context'> & VariantProps<typeof alertStyle>;
-
-const Alert = React.forwardRef<React.ElementRef<typeof UIAlert>, IAlertProps>(
-    ({ className, variant = 'solid', action = 'muted', ...props }, ref) => {
-        return (
-            <UIAlert
-                className={alertStyle({ action, variant, class: className })}
-                context={{ variant, action }}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-type IAlertTextProps = React.ComponentPropsWithoutRef<typeof UIAlert.Text> & VariantProps<typeof alertTextStyle>;
-
-const AlertText = React.forwardRef<React.ElementRef<typeof UIAlert.Text>, IAlertTextProps>(
-    (
-        { className, isTruncated, bold, underline, strikeThrough, size = 'md', sub, italic, highlight, ...props },
-        ref,
-    ) => {
-        const { action: parentAction } = useStyleContext(SCOPE);
-        return (
-            <UIAlert.Text
-                className={alertTextStyle({
-                    isTruncated,
-                    bold,
-                    underline,
-                    strikeThrough,
-                    size,
-                    sub,
-                    italic,
-                    highlight,
-                    class: className,
-                    parentVariants: {
-                        action: parentAction,
-                    },
-                })}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-type IAlertIconProps = React.ComponentPropsWithoutRef<typeof UIAlert.Icon> &
-    VariantProps<typeof alertIconStyle> & {
-        height?: number;
-        width?: number;
-    };
-
-const AlertIcon = React.forwardRef<React.ElementRef<typeof UIAlert.Icon>, IAlertIconProps>(
-    ({ className, size = 'md', ...props }, ref) => {
-        const { action: parentAction } = useStyleContext(SCOPE);
-
-        if (typeof size === 'number') {
-            return <UIAlert.Icon ref={ref} {...props} className={alertIconStyle({ class: className })} size={size} />;
-        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
-            return <UIAlert.Icon ref={ref} {...props} className={alertIconStyle({ class: className })} />;
-        }
-        return (
-            <UIAlert.Icon
-                className={alertIconStyle({
-                    parentVariants: {
-                        action: parentAction,
-                    },
-                    size,
-                    class: className,
-                })}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-Alert.displayName = 'Alert';
-AlertText.displayName = 'AlertText';
-AlertIcon.displayName = 'AlertIcon';
-
-export { Alert, AlertText, AlertIcon };

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

@@ -1,71 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { createAlert } from '@gluestack-ui/alert';
-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 = 'ALERT';
-
-const alertStyle = tva({
-    base: 'rounded-lg p-4 mb-4',
-    variants: {
-        variant: {
-            solid: '',
-            outline: 'border',
-            accent: 'border-l-4',
-        },
-        status: {
-            info: 'bg-blue-50 text-blue-700 border-blue-500',
-            success: 'bg-green-50 text-green-700 border-green-500',
-            warning: 'bg-yellow-50 text-yellow-700 border-yellow-500',
-            error: 'bg-red-50 text-red-700 border-red-500',
-        },
-    },
-    defaultVariants: {
-        variant: 'solid',
-        status: 'info',
-    },
-});
-
-export const AlertIcon = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
-    ({ className, children, ...props }, ref) => (
-        <div ref={ref} className={`mr-3 flex-shrink-0 ${className || ''}`} {...props}>
-            {children}
-        </div>
-    ),
-);
-
-AlertIcon.displayName = 'AlertIcon';
-
-export const AlertText = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
-    <div ref={ref} className={`flex-1 ${className || ''}`} {...props} />
-));
-
-AlertText.displayName = 'AlertText';
-
-export const AlertTitle = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
-    <div ref={ref} className={`font-semibold mb-1 ${className || ''}`} {...props} />
-));
-
-AlertTitle.displayName = 'AlertTitle';
-
-export const AlertDescription = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
-    ({ className, ...props }, ref) => <div ref={ref} className={className} {...props} />,
-);
-
-AlertDescription.displayName = 'AlertDescription';
-
-type IAlertProps = React.ComponentProps<'div'> & {
-    variant?: VariantProps<typeof alertStyle>['variant'];
-    status?: VariantProps<typeof alertStyle>['status'];
-};
-
-const Alert = forwardRef<HTMLDivElement, IAlertProps>(({ className, variant, status, ...props }, ref) => {
-    return <div ref={ref} role="alert" className={alertStyle({ variant, status, class: className })} {...props} />;
-});
-
-Alert.displayName = 'Alert';
-
-export { Alert };

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

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