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

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

@@ -0,0 +1,241 @@
+'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.web.tsx

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

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

@@ -0,0 +1,188 @@
+'use client';
+import React from 'react';
+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(
+    ({ children, ...props }: React.HTMLProps<HTMLDivElement>) => <div {...props}>{children}</div>,
+    SCOPE,
+);
+
+cssInterop(PrimitiveIcon, {
+    className: {
+        target: 'style',
+        nativeStyleToProp: {
+            height: true,
+            width: true,
+            fill: true,
+            color: 'classNameColor',
+            stroke: true,
+        },
+    },
+});
+
+type IBadgeProps = React.ComponentPropsWithoutRef<'div'> & 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<'span'> & VariantProps<typeof badgeTextStyle>;
+
+const BadgeText = React.forwardRef<HTMLSpanElement, IBadgeTextProps>(({ children, className, size, ...props }, ref) => {
+    const { size: parentSize, action: parentAction } = useStyleContext(SCOPE);
+    return (
+        <span
+            ref={ref}
+            className={badgeTextStyle({
+                parentVariants: {
+                    size: parentSize,
+                    action: parentAction,
+                },
+                size,
+                class: className,
+            })}
+            {...props}
+        >
+            {children}
+        </span>
+    );
+});
+
+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/button/index.web.tsx

@@ -0,0 +1,86 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { createButton } from '@gluestack-ui/button';
+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 = 'BUTTON';
+
+const StyledButton = forwardRef<HTMLButtonElement, any>(({ onPress, onClick, disabled, ...props }, ref) => {
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (onClick) {
+            onClick(e);
+        }
+        if (onPress) {
+            onPress(e);
+        }
+    };
+
+    return <button ref={ref} onClick={handleClick} disabled={disabled} {...props} />;
+});
+
+StyledButton.displayName = 'StyledButton';
+
+const buttonStyle = tva({
+    base: 'px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+    variants: {
+        size: {
+            xs: 'px-2 py-1 text-xs',
+            sm: 'px-3 py-1.5 text-sm',
+            md: 'text-base',
+            lg: 'px-5 py-2.5 text-lg',
+        },
+        variant: {
+            solid: 'bg-blue-500 text-white hover:bg-blue-600',
+            outline: 'border border-blue-500 text-blue-500 hover:bg-blue-50',
+            ghost: 'text-blue-500 hover:bg-blue-50',
+            link: 'text-blue-500 hover:underline',
+        },
+        action: {
+            primary: 'bg-blue-500 text-white',
+            secondary: 'bg-gray-500 text-white',
+            positive: 'bg-green-500 text-white',
+            negative: 'bg-red-500 text-white',
+        },
+        state: {
+            loading: 'opacity-70 cursor-not-allowed',
+            disabled: 'opacity-50 cursor-not-allowed',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'solid',
+        action: 'primary',
+    },
+});
+
+type IButtonProps = React.ComponentProps<typeof StyledButton> &
+    VariantProps<typeof buttonStyle> & {
+        className?: string;
+        onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+        isDisabled?: boolean;
+        isLoading?: boolean;
+    };
+
+const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
+    ({ className, size, variant, action, state, isDisabled, isLoading, ...props }, ref) => {
+        const buttonState = {
+            state: isLoading ? ('loading' as const) : isDisabled ? ('disabled' as const) : undefined,
+        };
+
+        return (
+            <StyledButton
+                ref={ref}
+                className={buttonStyle({ size, variant, action, ...buttonState, class: className })}
+                disabled={isDisabled || isLoading}
+                {...props}
+            />
+        );
+    },
+);
+
+Button.displayName = 'Button';
+
+export { Button };