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

package/src/components/ui/scroll-view/index.web.tsx

@@ -1,142 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { clsx } from 'clsx';
-
-// Styles for scroll containers
-const scrollContainerStyle = tva({
-    base: 'overflow-auto',
-    variants: {
-        horizontal: {
-            true: 'overflow-x-auto overflow-y-hidden whitespace-nowrap',
-        },
-        vertical: {
-            true: 'overflow-y-auto overflow-x-hidden',
-        },
-    },
-});
-
-type ScrollViewProps = React.HTMLAttributes<HTMLDivElement> & {
-    horizontal?: boolean;
-    className?: string;
-    contentContainerStyle?: React.CSSProperties;
-    showsHorizontalScrollIndicator?: boolean;
-    showsVerticalScrollIndicator?: boolean;
-};
-
-export const ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(
-    (
-        {
-            horizontal,
-            className,
-            contentContainerStyle,
-            showsHorizontalScrollIndicator = true,
-            showsVerticalScrollIndicator = true,
-            children,
-            style,
-            ...props
-        },
-        ref,
-    ) => {
-        return (
-            <div
-                ref={ref}
-                className={scrollContainerStyle({
-                    horizontal,
-                    vertical: !horizontal,
-                    class: clsx(className),
-                })}
-                style={{
-                    ...style,
-                    overflowX: !showsHorizontalScrollIndicator ? 'hidden' : undefined,
-                    overflowY: !showsVerticalScrollIndicator ? 'hidden' : undefined,
-                }}
-                {...props}
-            >
-                <div style={contentContainerStyle}>{children}</div>
-            </div>
-        );
-    },
-);
-
-ScrollView.displayName = 'ScrollView';
-
-// FlatList implementation
-type FlatListProps<T> = {
-    data: T[];
-    renderItem: ({ item, index }: { item: T; index: number }) => React.ReactNode;
-    keyExtractor?: (item: T, index: number) => string;
-    horizontal?: boolean;
-    className?: string;
-    contentContainerStyle?: React.CSSProperties;
-    showsHorizontalScrollIndicator?: boolean;
-    showsVerticalScrollIndicator?: boolean;
-};
-
-export function FlatList<T>({
-    data,
-    renderItem,
-    keyExtractor,
-    horizontal,
-    className,
-    contentContainerStyle,
-    showsHorizontalScrollIndicator,
-    showsVerticalScrollIndicator,
-    ...props
-}: FlatListProps<T>) {
-    return (
-        <ScrollView
-            horizontal={horizontal}
-            className={className}
-            contentContainerStyle={contentContainerStyle}
-            showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
-            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-            {...props}
-        >
-            {data.map((item, index) => (
-                <React.Fragment key={keyExtractor ? keyExtractor(item, index) : index}>
-                    {renderItem({ item, index })}
-                </React.Fragment>
-            ))}
-        </ScrollView>
-    );
-}
-
-// SectionList implementation
-type SectionListProps<T, S> = {
-    sections: Array<{ title: string; data: T[] }>;
-    renderItem: ({ item, index }: { item: T; index: number }) => React.ReactNode;
-    renderSectionHeader?: ({ section }: { section: { title: string; data: T[] } }) => React.ReactNode;
-    keyExtractor?: (item: T, index: number) => string;
-    className?: string;
-    contentContainerStyle?: React.CSSProperties;
-};
-
-export function SectionList<T, S>({
-    sections,
-    renderItem,
-    renderSectionHeader,
-    keyExtractor,
-    className,
-    contentContainerStyle,
-    ...props
-}: SectionListProps<T, S>) {
-    return (
-        <ScrollView className={className} contentContainerStyle={contentContainerStyle} {...props}>
-            {sections.map((section, sectionIndex) => (
-                <React.Fragment key={`section-${sectionIndex}`}>
-                    {renderSectionHeader?.({ section })}
-                    {section.data.map((item, index) => (
-                        <React.Fragment key={keyExtractor ? keyExtractor(item, index) : index}>
-                            {renderItem({ item, index })}
-                        </React.Fragment>
-                    ))}
-                </React.Fragment>
-            ))}
-        </ScrollView>
-    );
-}
-
-// VirtualizedList is an alias for FlatList in web implementation
-// since we're not implementing actual virtualization in this basic version
-export const VirtualizedList = FlatList;

package/src/components/ui/section-list/index.tsx

@@ -1,2 +0,0 @@
-'use client';
-export { SectionList } from 'react-native';

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

@@ -1,93 +0,0 @@
-'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 sectionListStyle = tva({
-    base: 'flex flex-col',
-});
-
-const sectionHeaderStyle = tva({
-    base: 'font-bold text-lg py-2 bg-gray-100',
-});
-
-interface SectionBase {
-    title: string;
-}
-
-interface SectionListProps<ItemT, SectionT extends SectionBase> {
-    sections: ReadonlyArray<SectionT & { data: ReadonlyArray<ItemT> }>;
-    renderItem: ({ item, index }: { item: ItemT; index: number }) => React.ReactElement;
-    renderSectionHeader?: ({ section }: { section: SectionT }) => React.ReactElement;
-    keyExtractor?: (item: ItemT, index: number) => string;
-    className?: string;
-    contentContainerStyle?: React.CSSProperties;
-    onEndReached?: () => void;
-    onEndReachedThreshold?: number;
-    stickySectionHeadersEnabled?: boolean;
-}
-
-function SectionListComponent<ItemT, SectionT extends SectionBase>(
-    {
-        sections,
-        renderItem,
-        renderSectionHeader,
-        keyExtractor,
-        className,
-        contentContainerStyle,
-        onEndReached,
-        onEndReachedThreshold = 0.5,
-        stickySectionHeadersEnabled = false,
-        ...props
-    }: SectionListProps<ItemT, SectionT>,
-    ref: React.Ref<HTMLDivElement>,
-) {
-    const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
-        if (!onEndReached) return;
-
-        const target = event.target as HTMLDivElement;
-        const scrollPosition = target.scrollTop + target.clientHeight;
-        const scrollSize = target.scrollHeight;
-        const threshold = scrollSize * onEndReachedThreshold;
-
-        if (scrollSize - scrollPosition <= threshold) {
-            onEndReached();
-        }
-    };
-
-    const defaultSectionHeader = (section: SectionT) => <div className={sectionHeaderStyle()}>{section.title}</div>;
-
-    return (
-        <ScrollView ref={ref} className={className} onScroll={handleScroll} {...props}>
-            <div className={sectionListStyle()} style={contentContainerStyle}>
-                {sections.map((section, sectionIndex) => (
-                    <div key={`section-${sectionIndex}`}>
-                        <div
-                            style={{
-                                position: stickySectionHeadersEnabled ? 'sticky' : 'relative',
-                                top: stickySectionHeadersEnabled ? 0 : undefined,
-                                zIndex: stickySectionHeadersEnabled ? 1 : undefined,
-                            }}
-                        >
-                            {renderSectionHeader ? renderSectionHeader({ section }) : defaultSectionHeader(section)}
-                        </div>
-                        {section.data.map((item, index) => (
-                            <React.Fragment key={keyExtractor ? keyExtractor(item, index) : `${sectionIndex}-${index}`}>
-                                {renderItem({ item, index })}
-                            </React.Fragment>
-                        ))}
-                    </div>
-                ))}
-            </div>
-        </ScrollView>
-    );
-}
-
-const SectionList = React.forwardRef(SectionListComponent) as <ItemT, SectionT extends SectionBase>(
-    props: SectionListProps<ItemT, SectionT> & { ref?: React.Ref<HTMLDivElement> },
-) => React.ReactElement;
-
-export { SectionList };

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

@@ -1,251 +0,0 @@
-'use client';
-
-import React from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
-import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { createSelect } from '@gluestack-ui/select';
-import { cssInterop } from 'nativewind';
-import {
-    Actionsheet,
-    ActionsheetContent,
-    ActionsheetItem,
-    ActionsheetItemText,
-    ActionsheetDragIndicator,
-    ActionsheetDragIndicatorWrapper,
-    ActionsheetBackdrop,
-    ActionsheetScrollView,
-    ActionsheetVirtualizedList,
-    ActionsheetFlatList,
-    ActionsheetSectionList,
-    ActionsheetSectionHeaderText,
-} from './select-actionsheet';
-import { Pressable, View, TextInput } from 'react-native';
-
-const SelectTriggerWrapper = React.forwardRef<
-    React.ElementRef<typeof Pressable>,
-    React.ComponentProps<typeof Pressable>
->(({ ...props }, ref) => {
-    return <Pressable {...props} ref={ref} />;
-});
-
-const selectIconStyle = tva({
-    base: 'text-background-500 fill-none',
-    parentVariants: {
-        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',
-        },
-    },
-});
-
-const selectStyle = tva({
-    base: '',
-});
-
-const selectTriggerStyle = tva({
-    base: 'border border-background-300 rounded flex-row items-center justify-between overflow-hidden data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[hover=true]:border-background-300',
-    variants: {
-        size: {
-            xl: 'h-12',
-            lg: 'h-11',
-            md: 'h-10',
-            sm: 'h-9',
-        },
-        variant: {
-            underlined:
-                'border-0 border-b rounded-none data-[hover=true]:border-primary-700 data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_-1px_0_0] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700',
-            outline:
-                'data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:data-[hover=true]:web:shadow-primary-600 data-[invalid=true]:web:shadow-[inset_0_0_0_1px] data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700 data-[invalid=true]:data-[hover=true]:border-error-700',
-            rounded:
-                'rounded-full data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700',
-        },
-    },
-});
-
-const selectInputStyle = tva({
-    base: 'py-auto px-3 placeholder:text-typography-500 web:w-full h-full text-typography-900 pointer-events-none web:outline-none ios:leading-[0px]',
-    parentVariants: {
-        size: {
-            xl: 'text-xl',
-            lg: 'text-lg',
-            md: 'text-base',
-            sm: 'text-sm',
-        },
-        variant: {
-            underlined: 'px-0',
-            outline: '',
-            rounded: 'px-4',
-        },
-    },
-});
-
-const UISelect = createSelect(
-    {
-        Root: View,
-        Trigger: withStyleContext(SelectTriggerWrapper),
-        Input: TextInput,
-        Icon: UIIcon,
-    },
-    {
-        Portal: Actionsheet,
-        Backdrop: ActionsheetBackdrop,
-        Content: ActionsheetContent,
-        DragIndicator: ActionsheetDragIndicator,
-        DragIndicatorWrapper: ActionsheetDragIndicatorWrapper,
-        Item: ActionsheetItem,
-        ItemText: ActionsheetItemText,
-        ScrollView: ActionsheetScrollView,
-        VirtualizedList: ActionsheetVirtualizedList,
-        FlatList: ActionsheetFlatList,
-        SectionList: ActionsheetSectionList,
-        SectionHeaderText: ActionsheetSectionHeaderText,
-    },
-);
-
-cssInterop(UISelect, { className: 'style' });
-cssInterop(UISelect.Input, {
-    className: { target: 'style', nativeStyleToProp: { textAlign: true } },
-});
-cssInterop(SelectTriggerWrapper, { className: 'style' });
-
-cssInterop(PrimitiveIcon, {
-    className: {
-        target: 'style',
-        nativeStyleToProp: {
-            height: true,
-            width: true,
-            fill: true,
-            color: 'classNameColor',
-            stroke: true,
-        },
-    },
-});
-
-type ISelectProps = VariantProps<typeof selectStyle> & React.ComponentProps<typeof UISelect> & { className?: string };
-
-const Select = React.forwardRef<React.ElementRef<typeof UISelect>, ISelectProps>(({ className, ...props }, ref) => {
-    return (
-        <UISelect
-            className={selectStyle({
-                class: className,
-            })}
-            ref={ref}
-            {...props}
-        />
-    );
-});
-
-type ISelectTriggerProps = VariantProps<typeof selectTriggerStyle> &
-    React.ComponentProps<typeof UISelect.Trigger> & { className?: string };
-
-const SelectTrigger = React.forwardRef<React.ElementRef<typeof UISelect.Trigger>, ISelectTriggerProps>(
-    ({ className, size = 'md', variant = 'outline', ...props }, ref) => {
-        return (
-            <UISelect.Trigger
-                className={selectTriggerStyle({
-                    class: className,
-                    size,
-                    variant,
-                })}
-                ref={ref}
-                context={{ size, variant }}
-                {...props}
-            />
-        );
-    },
-);
-
-type ISelectInputProps = VariantProps<typeof selectInputStyle> &
-    React.ComponentProps<typeof UISelect.Input> & { className?: string };
-
-const SelectInput = React.forwardRef<React.ElementRef<typeof UISelect.Input>, ISelectInputProps>(
-    ({ className, ...props }, ref) => {
-        const { size: parentSize, variant: parentVariant } = useStyleContext();
-        return (
-            <UISelect.Input
-                className={selectInputStyle({
-                    class: className,
-                    parentVariants: {
-                        size: parentSize,
-                        variant: parentVariant,
-                    },
-                })}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-type ISelectIcon = VariantProps<typeof selectIconStyle> &
-    React.ComponentProps<typeof UISelect.Icon> & { className?: string };
-
-const SelectIcon = React.forwardRef<React.ElementRef<typeof UISelect.Icon>, ISelectIcon>(
-    ({ className, size, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext();
-        if (typeof size === 'number') {
-            return <UISelect.Icon ref={ref} {...props} className={selectIconStyle({ class: className })} size={size} />;
-        } else if (
-            //@ts-expect-error
-            (props?.height !== undefined || props?.width !== undefined) &&
-            size === undefined
-        ) {
-            return <UISelect.Icon ref={ref} {...props} className={selectIconStyle({ class: className })} />;
-        }
-        return (
-            <UISelect.Icon
-                className={selectIconStyle({
-                    class: className,
-                    size,
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                })}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-Select.displayName = 'Select';
-SelectTrigger.displayName = 'SelectTrigger';
-SelectInput.displayName = 'SelectInput';
-SelectIcon.displayName = 'SelectIcon';
-
-// Actionsheet Components
-const SelectPortal = UISelect.Portal;
-const SelectBackdrop = UISelect.Backdrop;
-const SelectContent = UISelect.Content;
-const SelectDragIndicator = UISelect.DragIndicator;
-const SelectDragIndicatorWrapper = UISelect.DragIndicatorWrapper;
-const SelectItem = UISelect.Item;
-const SelectScrollView = UISelect.ScrollView;
-const SelectVirtualizedList = UISelect.VirtualizedList;
-const SelectFlatList = UISelect.FlatList;
-const SelectSectionList = UISelect.SectionList;
-const SelectSectionHeaderText = UISelect.SectionHeaderText;
-
-export {
-    Select,
-    SelectTrigger,
-    SelectInput,
-    SelectIcon,
-    SelectPortal,
-    SelectBackdrop,
-    SelectContent,
-    SelectDragIndicator,
-    SelectDragIndicatorWrapper,
-    SelectItem,
-    SelectScrollView,
-    SelectVirtualizedList,
-    SelectFlatList,
-    SelectSectionList,
-    SelectSectionHeaderText,
-};

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

@@ -1,83 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { createSelect } from '@gluestack-ui/select';
-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 = 'SELECT';
-
-const StyledSelect = forwardRef<HTMLSelectElement, any>(
-    ({ onValueChange, onChange, placeholder, children, ...props }, ref) => {
-        const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-            if (onChange) {
-                onChange(e);
-            }
-            if (onValueChange) {
-                onValueChange(e.target.value);
-            }
-        };
-
-        return (
-            <select ref={ref} onChange={handleChange} {...props}>
-                {placeholder && (
-                    <option value="" disabled>
-                        {placeholder}
-                    </option>
-                )}
-                {children}
-            </select>
-        );
-    },
-);
-
-StyledSelect.displayName = 'StyledSelect';
-
-const selectStyle = tva({
-    base: 'px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent appearance-none bg-white',
-    variants: {
-        size: {
-            sm: 'text-sm h-8',
-            md: 'text-base h-10',
-            lg: 'text-lg h-12',
-        },
-        variant: {
-            outline: 'bg-transparent',
-            filled: 'bg-gray-100',
-            unstyled: '',
-        },
-        state: {
-            error: 'border-red-500 focus:ring-red-500',
-            success: 'border-green-500 focus:ring-green-500',
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'outline',
-    },
-});
-
-export const SelectOption = forwardRef<HTMLOptionElement, React.ComponentProps<'option'>>((props, ref) => {
-    return <option ref={ref} {...props} />;
-});
-
-SelectOption.displayName = 'SelectOption';
-
-type ISelectProps = React.ComponentProps<typeof StyledSelect> &
-    VariantProps<typeof selectStyle> & {
-        className?: string;
-        onValueChange?: (value: string) => void;
-    };
-
-const Select = React.forwardRef<HTMLSelectElement, ISelectProps>(
-    ({ className, size, variant, state, ...props }, ref) => {
-        return (
-            <StyledSelect ref={ref} className={selectStyle({ size, variant, state, class: className })} {...props} />
-        );
-    },
-);
-
-Select.displayName = 'Select';
-
-export { Select };