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

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

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

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

@@ -0,0 +1,135 @@
+'use client';
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { createModal } from '@gluestack-ui/modal';
+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 = 'MODAL';
+
+interface ModalOverlayProps {
+    onPress?: () => void;
+    className?: string;
+}
+
+const ModalOverlay = ({ onPress, className }: ModalOverlayProps) => (
+    <div
+        onClick={onPress}
+        className={`fixed inset-0 bg-black bg-opacity-40 transition-opacity ${className || ''}`}
+        aria-hidden="true"
+    />
+);
+
+const modalStyle = tva({
+    base: 'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl p-6 max-h-[90vh] overflow-y-auto',
+    variants: {
+        size: {
+            xs: 'w-[95%] max-w-xs',
+            sm: 'w-[95%] max-w-sm',
+            md: 'w-[95%] max-w-md',
+            lg: 'w-[95%] max-w-lg',
+            xl: 'w-[95%] max-w-xl',
+            full: 'w-[95%]',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+
+export const ModalContent = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
+    <div ref={ref} role="dialog" aria-modal="true" className={className} {...props} />
+));
+
+ModalContent.displayName = 'ModalContent';
+
+export const ModalHeader = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
+    <div ref={ref} className={`text-xl font-semibold mb-4 ${className || ''}`} {...props} />
+));
+
+ModalHeader.displayName = 'ModalHeader';
+
+export const ModalBody = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
+    <div ref={ref} className={`mb-6 ${className || ''}`} {...props} />
+));
+
+ModalBody.displayName = 'ModalBody';
+
+export const ModalFooter = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
+    <div ref={ref} className={`flex justify-end space-x-2 ${className || ''}`} {...props} />
+));
+
+ModalFooter.displayName = 'ModalFooter';
+
+export const ModalCloseButton = forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(
+    ({ className, onClick, ...props }, ref) => (
+        <button
+            ref={ref}
+            className={`absolute right-4 top-4 text-gray-400 hover:text-gray-600 ${className || ''}`}
+            onClick={onClick}
+            aria-label="Close modal"
+            {...props}
+        >
+            ×
+        </button>
+    ),
+);
+
+ModalCloseButton.displayName = 'ModalCloseButton';
+
+type IModalProps = {
+    isOpen?: boolean;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    size?: VariantProps<typeof modalStyle>['size'];
+    closeOnOverlayClick?: boolean;
+};
+
+const Modal = forwardRef<HTMLDivElement, IModalProps>(
+    ({ isOpen, onClose, children, className, size, closeOnOverlayClick = true, ...props }, ref) => {
+        const modalRef = useRef<HTMLDivElement>(null);
+
+        useEffect(() => {
+            const handleEscape = (event: KeyboardEvent) => {
+                if (event.key === 'Escape' && onClose) {
+                    onClose();
+                }
+            };
+
+            if (isOpen) {
+                document.addEventListener('keydown', handleEscape);
+                document.body.style.overflow = 'hidden';
+            }
+
+            return () => {
+                document.removeEventListener('keydown', handleEscape);
+                document.body.style.overflow = '';
+            };
+        }, [isOpen, onClose]);
+
+        if (!isOpen) return null;
+
+        return createPortal(
+            <>
+                <ModalOverlay onPress={closeOnOverlayClick ? onClose : undefined} />
+                <div
+                    ref={ref}
+                    className={modalStyle({ size, class: className })}
+                    role="dialog"
+                    aria-modal="true"
+                    {...props}
+                >
+                    {children}
+                </div>
+            </>,
+            document.body,
+        );
+    },
+);
+
+Modal.displayName = 'Modal';
+
+export { Modal };