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

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

@@ -0,0 +1,151 @@
+'use client';
+import React, { forwardRef, createContext, useContext } from 'react';
+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 = 'CHECKBOX';
+
+const checkboxStyle = tva({
+    base: 'form-checkbox rounded transition duration-150 ease-in-out',
+    variants: {
+        size: {
+            sm: 'h-3 w-3',
+            md: 'h-4 w-4',
+            lg: 'h-5 w-5',
+        },
+        variant: {
+            outline: 'border-2',
+            solid: 'bg-blue-600 border-transparent',
+        },
+        status: {
+            error: 'border-red-500 focus:border-red-500 focus:ring-red-500',
+            success: 'border-green-500 focus:border-green-500 focus:ring-green-500',
+            warning: 'border-yellow-500 focus:border-yellow-500 focus:ring-yellow-500',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+    },
+});
+
+const labelStyle = tva({
+    base: 'ml-2 select-none',
+    variants: {
+        size: {
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-lg',
+        },
+        disabled: {
+            true: 'opacity-50 cursor-not-allowed',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+
+type CheckboxGroupContextType = {
+    values?: string[];
+    onChange?: (values: string[]) => void;
+    size?: VariantProps<typeof checkboxStyle>['size'];
+    status?: VariantProps<typeof checkboxStyle>['status'];
+    variant?: VariantProps<typeof checkboxStyle>['variant'];
+};
+
+const CheckboxGroupContext = createContext<CheckboxGroupContextType>({});
+
+export const CheckboxGroup = forwardRef<HTMLDivElement, React.ComponentProps<'div'> & CheckboxGroupContextType>(
+    ({ values, onChange, size, status, variant, ...props }, ref) => {
+        return (
+            <CheckboxGroupContext.Provider value={{ values, onChange, size, status, variant }}>
+                <div ref={ref} role="group" {...props} />
+            </CheckboxGroupContext.Provider>
+        );
+    },
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+export const CheckboxLabel = forwardRef<
+    HTMLLabelElement,
+    React.ComponentProps<'label'> & {
+        size?: VariantProps<typeof labelStyle>['size'];
+        disabled?: boolean;
+    }
+>(({ className, size, disabled, ...props }, ref) => {
+    return <label ref={ref} className={labelStyle({ size, disabled, class: className })} {...props} />;
+});
+
+CheckboxLabel.displayName = 'CheckboxLabel';
+
+export const CheckboxIcon = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+    ({ className, children, ...props }, ref) => {
+        return (
+            <div ref={ref} className={`flex items-center justify-center ${className || ''}`} {...props}>
+                {children}
+            </div>
+        );
+    },
+);
+
+CheckboxIcon.displayName = 'CheckboxIcon';
+
+type ICheckboxProps = Omit<React.ComponentProps<'input'>, 'size'> & {
+    value: string;
+    size?: VariantProps<typeof checkboxStyle>['size'];
+    status?: VariantProps<typeof checkboxStyle>['status'];
+    variant?: VariantProps<typeof checkboxStyle>['variant'];
+};
+
+const Checkbox = forwardRef<HTMLInputElement, ICheckboxProps>(
+    (
+        {
+            className,
+            value,
+            size: itemSize,
+            status: itemStatus,
+            variant: itemVariant,
+            onChange,
+            checked: controlledChecked,
+            ...props
+        },
+        ref,
+    ) => {
+        const group = useContext(CheckboxGroupContext);
+        const size = itemSize || group.size;
+        const status = itemStatus || group.status;
+        const variant = itemVariant || group.variant;
+
+        const isChecked = group.values ? group.values.includes(value) : controlledChecked;
+
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            if (onChange) {
+                onChange(e);
+            }
+            if (group.onChange && group.values) {
+                const newValues = e.target.checked ? [...group.values, value] : group.values.filter((v) => v !== value);
+                group.onChange(newValues);
+            }
+        };
+
+        return (
+            <input
+                ref={ref}
+                type="checkbox"
+                value={value}
+                checked={isChecked}
+                onChange={handleChange}
+                className={checkboxStyle({ size, status, variant, class: className })}
+                {...props}
+            />
+        );
+    },
+);
+
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

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

@@ -0,0 +1,37 @@
+'use client';
+import React from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const dividerStyle = tva({
+    base: 'bg-background-200',
+    variants: {
+        orientation: {
+            vertical: 'w-px h-full',
+            horizontal: 'h-px w-full',
+        },
+    },
+});
+
+type IUIDividerProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof dividerStyle>;
+
+const Divider = React.forwardRef<HTMLDivElement, IUIDividerProps>(
+    ({ className, orientation = 'horizontal', ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                {...props}
+                aria-orientation={orientation}
+                role="separator"
+                className={dividerStyle({
+                    orientation,
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+Divider.displayName = 'Divider';
+
+export { Divider };

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

@@ -0,0 +1,144 @@
+'use client';
+import React, { forwardRef, useEffect, useRef } from 'react';
+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 = 'DRAWER';
+
+interface DrawerOverlayProps {
+    onPress?: () => void;
+    className?: string;
+}
+
+const DrawerOverlay = ({ onPress, className }: DrawerOverlayProps) => (
+    <div
+        onClick={onPress}
+        className={`fixed inset-0 bg-black bg-opacity-40 transition-opacity ${className || ''}`}
+        aria-hidden="true"
+    />
+);
+
+const drawerStyle = tva({
+    base: 'fixed bg-white shadow-xl transition-transform duration-300 ease-in-out',
+    variants: {
+        placement: {
+            left: 'left-0 top-0 bottom-0 transform -translate-x-full',
+            right: 'right-0 top-0 bottom-0 transform translate-x-full',
+            top: 'top-0 left-0 right-0 transform -translate-y-full',
+            bottom: 'bottom-0 left-0 right-0 transform translate-y-full',
+        },
+        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-full',
+        },
+    },
+    defaultVariants: {
+        placement: 'right',
+        size: 'md',
+    },
+});
+
+export const DrawerContent = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
+    <div ref={ref} className={`h-full flex flex-col ${className || ''}`} {...props} />
+));
+
+DrawerContent.displayName = 'DrawerContent';
+
+export const DrawerHeader = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
+    <div ref={ref} className={`px-6 py-4 border-b border-gray-200 ${className || ''}`} {...props} />
+));
+
+DrawerHeader.displayName = 'DrawerHeader';
+
+export const DrawerBody = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
+    <div ref={ref} className={`flex-1 p-6 overflow-y-auto ${className || ''}`} {...props} />
+));
+
+DrawerBody.displayName = 'DrawerBody';
+
+export const DrawerFooter = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => (
+    <div ref={ref} className={`px-6 py-4 border-t border-gray-200 ${className || ''}`} {...props} />
+));
+
+DrawerFooter.displayName = 'DrawerFooter';
+
+export const DrawerCloseButton = 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 drawer"
+            {...props}
+        >
+            ×
+        </button>
+    ),
+);
+
+DrawerCloseButton.displayName = 'DrawerCloseButton';
+
+type IDrawerProps = {
+    isOpen?: boolean;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    placement?: VariantProps<typeof drawerStyle>['placement'];
+    size?: VariantProps<typeof drawerStyle>['size'];
+    closeOnOverlayClick?: boolean;
+};
+
+const Drawer = forwardRef<HTMLDivElement, IDrawerProps>(
+    ({ isOpen, onClose, children, className, placement, size, closeOnOverlayClick = true, ...props }, ref) => {
+        const drawerRef = 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(
+            <>
+                <DrawerOverlay onPress={closeOnOverlayClick ? onClose : undefined} />
+                <div
+                    ref={ref}
+                    className={`${drawerStyle({ placement, size, class: className })} ${
+                        isOpen ? 'translate-x-0 translate-y-0' : ''
+                    }`}
+                    role="dialog"
+                    aria-modal="true"
+                    {...props}
+                >
+                    {children}
+                </div>
+            </>,
+            document.body,
+        );
+    },
+);
+
+Drawer.displayName = 'Drawer';
+
+export { Drawer };

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

@@ -0,0 +1,201 @@
+'use client';
+import React from 'react';
+import { createFab } from '@gluestack-ui/fab';
+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 { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+
+const SCOPE = 'FAB';
+
+// Create styled components for web
+const StyledButton = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+    (props, ref) => <button ref={ref} {...props} />,
+);
+StyledButton.displayName = 'StyledButton';
+
+const StyledSpan = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>((props, ref) => (
+    <span ref={ref} {...props} />
+));
+StyledSpan.displayName = 'StyledSpan';
+
+const Root = withStyleContext(StyledButton, SCOPE);
+const UIFab = createFab({
+    Root: Root,
+    Label: StyledSpan,
+    Icon: UIIcon,
+});
+
+cssInterop(PrimitiveIcon, {
+    className: {
+        target: 'style',
+        nativeStyleToProp: {
+            height: true,
+            width: true,
+            fill: true,
+            color: 'classNameColor',
+            stroke: true,
+        },
+    },
+});
+
+const fabStyle = tva({
+    base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-primary-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-indicator-info shadow-hard-2 border-0',
+    variants: {
+        size: {
+            sm: 'px-2.5 py-2.5',
+            md: 'px-3 py-3',
+            lg: 'px-4 py-4',
+        },
+        placement: {
+            'top right': 'top-4 right-4',
+            'top left': 'top-4 left-4',
+            'bottom right': 'bottom-4 right-4',
+            'bottom left': 'bottom-4 left-4',
+            'top center': 'top-4 self-center',
+            'bottom center': 'bottom-4 self-center',
+        },
+    },
+});
+
+const fabLabelStyle = tva({
+    base: 'text-typography-50 font-normal font-body tracking-md text-left mx-2',
+    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',
+        },
+    },
+    parentVariants: {
+        size: {
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-lg',
+        },
+    },
+});
+
+const fabIconStyle = tva({
+    base: 'text-typography-50 fill-none',
+    variants: {
+        size: {
+            '2xs': 'h-3 w-3',
+            xs: 'h-3.5 w-3.5',
+            sm: 'h-4 w-4',
+            md: 'w-[18px] h-[18px]',
+            lg: 'h-5 w-5',
+            xl: 'h-6 w-6',
+        },
+    },
+});
+
+type IFabProps = Omit<React.ComponentPropsWithoutRef<typeof UIFab>, 'context'> & VariantProps<typeof fabStyle>;
+
+const Fab = React.forwardRef<React.ElementRef<typeof UIFab>, IFabProps>(
+    ({ size = 'md', placement = 'bottom right', className, ...props }, ref) => {
+        return (
+            <UIFab
+                ref={ref}
+                {...props}
+                className={fabStyle({ size, placement, class: className })}
+                context={{ size }}
+            />
+        );
+    },
+);
+
+type IFabLabelProps = React.ComponentPropsWithoutRef<typeof UIFab.Label> & VariantProps<typeof fabLabelStyle>;
+
+const FabLabel = React.forwardRef<React.ElementRef<typeof UIFab.Label>, IFabLabelProps>(
+    (
+        { size, isTruncated = false, bold = false, underline = false, strikeThrough = false, className, ...props },
+        ref,
+    ) => {
+        const { size: parentSize } = useStyleContext(SCOPE);
+        return (
+            <UIFab.Label
+                ref={ref}
+                {...props}
+                className={fabLabelStyle({
+                    parentVariants: {
+                        size: parentSize,
+                    },
+                    size,
+                    isTruncated,
+                    bold,
+                    underline,
+                    strikeThrough,
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+type IFabIconProps = React.ComponentPropsWithoutRef<typeof UIFab.Icon> &
+    VariantProps<typeof fabIconStyle> & {
+        height?: number;
+        width?: number;
+    };
+
+const FabIcon = React.forwardRef<React.ElementRef<typeof UIFab.Icon>, IFabIconProps>(
+    ({ size, className, ...props }, ref) => {
+        const { size: parentSize } = useStyleContext(SCOPE);
+
+        if (typeof size === 'number') {
+            return <UIFab.Icon ref={ref} {...props} className={fabIconStyle({ class: className })} size={size} />;
+        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
+            return <UIFab.Icon ref={ref} {...props} className={fabIconStyle({ class: className })} />;
+        }
+        return (
+            <UIFab.Icon
+                ref={ref}
+                {...props}
+                className={fabIconStyle({
+                    parentVariants: {
+                        size: parentSize,
+                    },
+                    size,
+                    class: className,
+                })}
+            />
+        );
+    },
+);
+
+Fab.displayName = 'Fab';
+FabLabel.displayName = 'FabLabel';
+FabIcon.displayName = 'FabIcon';
+
+export { Fab, FabLabel, FabIcon };

package/src/components/ui/flat-list/index.web.tsx

@@ -0,0 +1,89 @@
+'use client';
+import React, { forwardRef } from 'react';
+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 { ScrollView } from '../scroll-view/index.web';
+
+const flatListStyle = tva({
+    base: 'flex flex-col',
+    variants: {
+        horizontal: {
+            true: 'flex-row',
+            false: 'flex-col',
+        },
+    },
+    defaultVariants: {
+        horizontal: false,
+    },
+});
+
+interface FlatListProps<T> {
+    data: ReadonlyArray<T>;
+    renderItem: ({ item, index }: { item: T; index: number }) => React.ReactElement;
+    keyExtractor?: (item: T, index: number) => string;
+    horizontal?: boolean;
+    className?: string;
+    contentContainerStyle?: React.CSSProperties;
+    ListHeaderComponent?: React.ReactElement | null;
+    ListFooterComponent?: React.ReactElement | null;
+    ListEmptyComponent?: React.ReactElement | null;
+    onEndReached?: () => void;
+    onEndReachedThreshold?: number;
+}
+
+function FlatListComponent<T>(
+    {
+        data,
+        renderItem,
+        keyExtractor,
+        horizontal = false,
+        className,
+        contentContainerStyle,
+        ListHeaderComponent,
+        ListFooterComponent,
+        ListEmptyComponent,
+        onEndReached,
+        onEndReachedThreshold = 0.5,
+        ...props
+    }: FlatListProps<T>,
+    ref: React.Ref<HTMLDivElement>,
+) {
+    const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
+        if (!onEndReached) return;
+
+        const target = event.target as HTMLDivElement;
+        const scrollPosition = horizontal
+            ? target.scrollLeft + target.clientWidth
+            : target.scrollTop + target.clientHeight;
+        const scrollSize = horizontal ? target.scrollWidth : target.scrollHeight;
+        const threshold = scrollSize * onEndReachedThreshold;
+
+        if (scrollSize - scrollPosition <= threshold) {
+            onEndReached();
+        }
+    };
+
+    return (
+        <ScrollView ref={ref} horizontal={horizontal} className={className} onScroll={handleScroll} {...props}>
+            <div className={flatListStyle({ horizontal })} style={contentContainerStyle}>
+                {ListHeaderComponent}
+                {data.length === 0 && ListEmptyComponent
+                    ? ListEmptyComponent
+                    : data.map((item, index) => (
+                          <React.Fragment key={keyExtractor ? keyExtractor(item, index) : index}>
+                              {renderItem({ item, index })}
+                          </React.Fragment>
+                      ))}
+                {ListFooterComponent}
+            </div>
+        </ScrollView>
+    );
+}
+
+const FlatList = React.forwardRef(FlatListComponent) as <T>(
+    props: FlatListProps<T> & { ref?: React.Ref<HTMLDivElement> },
+) => React.ReactElement;
+
+export { FlatList };