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

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

@@ -1,103 +0,0 @@
-'use client';
-import { createLink } from '@gluestack-ui/link';
-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';
-
-// Create styled components for web
-const StyledAnchor = withStyleContext('a' as any);
-const StyledSpan = withStyleContext('span' as any);
-
-export const UILink = createLink({
-    Root: StyledAnchor,
-    Text: StyledSpan,
-}) as any;
-
-cssInterop(UILink, { className: 'style' as any });
-cssInterop(UILink.Text, { className: 'style' as any });
-
-const linkStyle = tva({
-    base: 'group/link outline-0 cursor-pointer data-[disabled=true]:cursor-not-allowed data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-indicator-primary data-[focus-visible=true]:outline-0 data-[disabled=true]:opacity-4',
-});
-
-const linkTextStyle = tva({
-    base: 'underline text-info-700 hover:text-info-600 hover:no-underline active:text-info-700 font-normal font-sans tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start whitespace-pre-wrap word-wrap-break-word',
-
-    variants: {
-        isTruncated: {
-            true: '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',
-        },
-    },
-});
-
-interface ILinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof linkStyle> {
-    className?: string;
-}
-
-const Link = React.forwardRef<HTMLAnchorElement, ILinkProps>(({ className, href, target, rel, ...props }, ref) => {
-    return (
-        <UILink
-            ref={ref}
-            {...props}
-            href={href}
-            target={target}
-            rel={target === '_blank' ? 'noopener noreferrer' : rel}
-            className={linkStyle({ class: className })}
-        />
-    );
-});
-
-interface ILinkTextProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof linkTextStyle> {
-    className?: string;
-}
-
-const LinkText = React.forwardRef<HTMLSpanElement, 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

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

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

@@ -1,159 +0,0 @@
-'use client';
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
-import { createMenu } from '@gluestack-ui/menu';
-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 { createPortal } from 'react-dom';
-
-const SCOPE = 'MENU';
-
-const menuStyle = tva({
-    base: 'absolute z-50 min-w-[200px] py-1 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none',
-    variants: {
-        placement: {
-            top: 'bottom-full mb-2',
-            bottom: 'top-full mt-2',
-            left: 'right-full mr-2',
-            right: 'left-full ml-2',
-        },
-        size: {
-            sm: 'text-sm',
-            md: 'text-base',
-            lg: 'text-lg',
-        },
-    },
-    defaultVariants: {
-        placement: 'bottom',
-        size: 'md',
-    },
-});
-
-export const MenuItem = forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(
-    ({ className, onClick, disabled, ...props }, ref) => (
-        <button
-            ref={ref}
-            className={`w-full px-4 py-2 text-left hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed ${
-                className || ''
-            }`}
-            onClick={onClick}
-            disabled={disabled}
-            role="menuitem"
-            {...props}
-        />
-    ),
-);
-
-MenuItem.displayName = 'MenuItem';
-
-export const MenuDivider = forwardRef<HTMLHRElement, React.ComponentProps<'hr'>>(({ className, ...props }, ref) => (
-    <hr ref={ref} className={`my-1 border-gray-200 ${className || ''}`} role="separator" {...props} />
-));
-
-MenuDivider.displayName = 'MenuDivider';
-
-export const MenuGroup = forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { title?: string }>(
-    ({ className, title, children, ...props }, ref) => (
-        <div ref={ref} role="group" aria-label={title} {...props}>
-            {title && <div className="px-4 py-2 text-sm font-semibold text-gray-500">{title}</div>}
-            {children}
-        </div>
-    ),
-);
-
-MenuGroup.displayName = 'MenuGroup';
-
-type IMenuProps = {
-    trigger: React.ReactElement;
-    isOpen?: boolean;
-    onOpen?: () => void;
-    onClose?: () => void;
-    children?: React.ReactNode;
-    className?: string;
-    placement?: VariantProps<typeof menuStyle>['placement'];
-    size?: VariantProps<typeof menuStyle>['size'];
-};
-
-const Menu = forwardRef<HTMLDivElement, IMenuProps>(
-    ({ trigger, isOpen: controlledIsOpen, onOpen, onClose, children, className, placement, size, ...props }, ref) => {
-        const [isOpen, setIsOpen] = useState(controlledIsOpen || false);
-        const menuRef = useRef<HTMLDivElement>(null);
-        const triggerRef = useRef<HTMLDivElement>(null);
-
-        const handleOpen = () => {
-            setIsOpen(true);
-            if (onOpen) onOpen();
-        };
-
-        const handleClose = () => {
-            setIsOpen(false);
-            if (onClose) onClose();
-        };
-
-        useEffect(() => {
-            if (controlledIsOpen !== undefined) {
-                setIsOpen(controlledIsOpen);
-            }
-        }, [controlledIsOpen]);
-
-        useEffect(() => {
-            const handleClickOutside = (event: MouseEvent) => {
-                if (
-                    menuRef.current &&
-                    !menuRef.current.contains(event.target as Node) &&
-                    triggerRef.current &&
-                    !triggerRef.current.contains(event.target as Node)
-                ) {
-                    handleClose();
-                }
-            };
-
-            const handleEscape = (event: KeyboardEvent) => {
-                if (event.key === 'Escape') {
-                    handleClose();
-                }
-            };
-
-            if (isOpen) {
-                document.addEventListener('mousedown', handleClickOutside);
-                document.addEventListener('keydown', handleEscape);
-            }
-
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-                document.removeEventListener('keydown', handleEscape);
-            };
-        }, [isOpen]);
-
-        return (
-            <div className="relative inline-block" ref={ref}>
-                <div
-                    ref={triggerRef}
-                    onClick={() => (isOpen ? handleClose() : handleOpen())}
-                    aria-haspopup="true"
-                    aria-expanded={isOpen}
-                >
-                    {trigger}
-                </div>
-                {isOpen &&
-                    createPortal(
-                        <div
-                            ref={menuRef}
-                            className={menuStyle({ placement, size, class: className })}
-                            role="menu"
-                            aria-orientation="vertical"
-                            {...props}
-                        >
-                            {children}
-                        </div>,
-                        document.body,
-                    )}
-            </div>
-        );
-    },
-);
-
-Menu.displayName = 'Menu';
-
-export { Menu };

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

@@ -1,244 +0,0 @@
-'use client';
-import React from 'react';
-import { createModal } from '@gluestack-ui/modal';
-import { Pressable, View, ScrollView } from 'react-native';
-import { Motion, AnimatePresence, createMotionAnimatedComponent } from '@legendapp/motion';
-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 AnimatedPressable = createMotionAnimatedComponent(Pressable);
-const SCOPE = 'MODAL';
-
-const UIModal = createModal({
-    Root: withStyleContext(View, SCOPE),
-    Backdrop: AnimatedPressable,
-    Content: Motion.View,
-    Body: ScrollView,
-    CloseButton: Pressable,
-    Footer: View,
-    Header: View,
-    AnimatePresence: AnimatePresence,
-});
-
-cssInterop(AnimatedPressable, { className: 'style' });
-cssInterop(Motion.View, { className: 'style' });
-
-const modalStyle = tva({
-    base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none',
-    variants: {
-        size: {
-            xs: '',
-            sm: '',
-            md: '',
-            lg: '',
-            full: '',
-        },
-    },
-});
-
-const modalBackdropStyle = tva({
-    base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',
-});
-
-const modalContentStyle = tva({
-    base: 'bg-background-0 rounded-md overflow-hidden border border-outline-100 shadow-hard-2 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 modalBodyStyle = tva({
-    base: 'mt-2 mb-6',
-});
-
-const modalCloseButtonStyle = tva({
-    base: 'group/modal-close-button z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer',
-});
-
-const modalHeaderStyle = tva({
-    base: 'justify-between items-center flex-row',
-});
-
-const modalFooterStyle = tva({
-    base: 'flex-row justify-end items-center gap-2',
-});
-
-type IModalProps = React.ComponentProps<typeof UIModal> & VariantProps<typeof modalStyle> & { className?: string };
-
-type IModalBackdropProps = React.ComponentProps<typeof UIModal.Backdrop> &
-    VariantProps<typeof modalBackdropStyle> & { className?: string };
-
-type IModalContentProps = React.ComponentProps<typeof UIModal.Content> &
-    VariantProps<typeof modalContentStyle> & { className?: string };
-
-type IModalHeaderProps = React.ComponentProps<typeof UIModal.Header> &
-    VariantProps<typeof modalHeaderStyle> & { className?: string };
-
-type IModalBodyProps = React.ComponentProps<typeof UIModal.Body> &
-    VariantProps<typeof modalBodyStyle> & { className?: string };
-
-type IModalFooterProps = React.ComponentProps<typeof UIModal.Footer> &
-    VariantProps<typeof modalFooterStyle> & { className?: string };
-
-type IModalCloseButtonProps = React.ComponentProps<typeof UIModal.CloseButton> &
-    VariantProps<typeof modalCloseButtonStyle> & { className?: string };
-
-const Modal = React.forwardRef<React.ElementRef<typeof UIModal>, IModalProps>(
-    ({ className, size = 'md', ...props }, ref) => (
-        <UIModal
-            ref={ref}
-            {...props}
-            pointerEvents="box-none"
-            className={modalStyle({ size, class: className })}
-            context={{ size }}
-        />
-    ),
-);
-
-const ModalBackdrop = React.forwardRef<React.ElementRef<typeof UIModal.Backdrop>, IModalBackdropProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIModal.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={modalBackdropStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const ModalContent = React.forwardRef<React.ElementRef<typeof UIModal.Content>, IModalContentProps>(
-    ({ className, size, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        return (
-            <UIModal.Content
-                ref={ref}
-                initial={{
-                    opacity: 0,
-                    scale: 0.9,
-                }}
-                animate={{
-                    opacity: 1,
-                    scale: 1,
-                }}
-                exit={{
-                    opacity: 0,
-                }}
-                transition={{
-                    type: 'spring',
-                    damping: 18,
-                    stiffness: 250,
-                    opacity: {
-                        type: 'timing',
-                        duration: 250,
-                    },
-                }}
-                {...props}
-                className={modalContentStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    size,
-                    class: className,
-                })}
-                pointerEvents="auto"
-            />
-        );
-    },
-);
-
-const ModalHeader = React.forwardRef<React.ElementRef<typeof UIModal.Header>, IModalHeaderProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIModal.Header
-                ref={ref}
-                {...props}
-                className={modalHeaderStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const ModalBody = React.forwardRef<React.ElementRef<typeof UIModal.Body>, IModalBodyProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIModal.Body
-                ref={ref}
-                {...props}
-                className={modalBodyStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const ModalFooter = React.forwardRef<React.ElementRef<typeof UIModal.Footer>, IModalFooterProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIModal.Footer
-                ref={ref}
-                {...props}
-                className={modalFooterStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const ModalCloseButton = React.forwardRef<React.ElementRef<typeof UIModal.CloseButton>, IModalCloseButtonProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIModal.CloseButton
-                ref={ref}
-                {...props}
-                className={modalCloseButtonStyle({
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-// Assign display names
-Modal.displayName = 'Modal';
-ModalBackdrop.displayName = 'ModalBackdrop';
-ModalContent.displayName = 'ModalContent';
-ModalHeader.displayName = 'ModalHeader';
-ModalBody.displayName = 'ModalBody';
-ModalFooter.displayName = 'ModalFooter';
-ModalCloseButton.displayName = 'ModalCloseButton';
-
-export { Modal, ModalBackdrop, ModalContent, ModalCloseButton, ModalHeader, ModalBody, ModalFooter };