@admin-layout/gluestack-ui-mobile 11.0.4-alpha.4 → 11.2.1-alpha.1

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

@@ -1,160 +0,0 @@
-'use client';
-import React from 'react';
-import { createProgress } from '@gluestack-ui/progress';
-import { View } from 'react-native';
-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 = 'PROGRESS';
-export const UIProgress = createProgress({
-    Root: withStyleContext(View, SCOPE),
-    FilledTrack: View,
-});
-
-cssInterop(UIProgress, { className: 'style' });
-cssInterop(UIProgress.FilledTrack, { className: 'style' });
-
-const progressStyle = tva({
-    base: 'bg-background-300 rounded-full w-full',
-    variants: {
-        orientation: {
-            horizontal: 'w-full',
-            vertical: 'h-full',
-        },
-        size: {
-            xs: 'h-1',
-            sm: 'h-2',
-            md: 'h-3',
-            lg: 'h-4',
-            xl: 'h-5',
-            '2xl': 'h-6',
-        },
-    },
-    compoundVariants: [
-        {
-            orientation: 'vertical',
-            size: 'xs',
-            class: 'h-full w-1 justify-end',
-        },
-        {
-            orientation: 'vertical',
-            size: 'sm',
-            class: 'h-full w-2 justify-end',
-        },
-        {
-            orientation: 'vertical',
-            size: 'md',
-            class: 'h-full w-3 justify-end',
-        },
-        {
-            orientation: 'vertical',
-            size: 'lg',
-            class: 'h-full w-4 justify-end',
-        },
-
-        {
-            orientation: 'vertical',
-            size: 'xl',
-            class: 'h-full w-5 justify-end',
-        },
-        {
-            orientation: 'vertical',
-            size: '2xl',
-            class: 'h-full w-6 justify-end',
-        },
-    ],
-});
-
-const progressFilledTrackStyle = tva({
-    base: 'bg-primary-500 rounded-full',
-    parentVariants: {
-        orientation: {
-            horizontal: 'w-full',
-            vertical: 'h-full',
-        },
-        size: {
-            xs: 'h-1',
-            sm: 'h-2',
-            md: 'h-3',
-            lg: 'h-4',
-            xl: 'h-5',
-            '2xl': 'h-6',
-        },
-    },
-    parentCompoundVariants: [
-        {
-            orientation: 'vertical',
-            size: 'xs',
-            class: 'h-full w-1',
-        },
-        {
-            orientation: 'vertical',
-            size: 'sm',
-            class: 'h-full w-2',
-        },
-        {
-            orientation: 'vertical',
-            size: 'md',
-            class: 'h-full w-3',
-        },
-        {
-            orientation: 'vertical',
-            size: 'lg',
-            class: 'h-full w-4',
-        },
-
-        {
-            orientation: 'vertical',
-            size: 'xl',
-            class: 'h-full w-5',
-        },
-        {
-            orientation: 'vertical',
-            size: '2xl',
-            class: 'h-full w-6',
-        },
-    ],
-});
-
-type IProgressProps = VariantProps<typeof progressStyle> & React.ComponentProps<typeof UIProgress>;
-type IProgressFilledTrackProps = VariantProps<typeof progressFilledTrackStyle> &
-    React.ComponentProps<typeof UIProgress.FilledTrack>;
-
-const Progress = React.forwardRef<React.ElementRef<typeof UIProgress>, IProgressProps>(
-    ({ className, size = 'md', orientation = 'horizontal', ...props }, ref) => {
-        return (
-            <UIProgress
-                ref={ref}
-                {...props}
-                className={progressStyle({ size, orientation, class: className })}
-                context={{ size, orientation }}
-                orientation={orientation}
-            />
-        );
-    },
-);
-
-const ProgressFilledTrack = React.forwardRef<
-    React.ElementRef<typeof UIProgress.FilledTrack>,
-    IProgressFilledTrackProps
->(({ className, ...props }, ref) => {
-    const { size: parentSize, orientation: parentOrientation } = useStyleContext(SCOPE);
-
-    return (
-        <UIProgress.FilledTrack
-            ref={ref}
-            className={progressFilledTrackStyle({
-                parentVariants: {
-                    size: parentSize,
-                    orientation: parentOrientation,
-                },
-                class: className,
-            })}
-            {...props}
-        />
-    );
-});
-
-export { Progress, ProgressFilledTrack };

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

@@ -1,178 +0,0 @@
-'use client';
-import React from 'react';
-import { createRadio } from '@gluestack-ui/radio';
-import { Pressable, View, Platform, Text } from 'react-native';
-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 = 'Radio';
-
-const UIRadio = createRadio({
-    Root: (Platform.OS === 'web' ? withStyleContext(View, SCOPE) : withStyleContext(Pressable, SCOPE)) as ReturnType<
-        typeof withStyleContext<typeof Pressable>
-    >,
-    Group: View,
-    Icon: UIIcon,
-    Indicator: View,
-    Label: Text,
-});
-
-cssInterop(PrimitiveIcon, {
-    className: {
-        target: 'style',
-        nativeStyleToProp: {
-            height: true,
-            width: true,
-            fill: true,
-            color: 'classNameColor',
-            stroke: true,
-        },
-    },
-});
-
-const radioStyle = tva({
-    base: 'group/radio flex-row justify-start items-center web:cursor-pointer data-[disabled=true]:web:cursor-not-allowed',
-    variants: {
-        size: {
-            sm: 'gap-1.5',
-            md: 'gap-2',
-            lg: 'gap-2',
-        },
-    },
-});
-
-const radioGroupStyle = tva({
-    base: 'gap-2',
-});
-
-const radioIconStyle = tva({
-    base: 'rounded-full justify-center items-center text-primary-800 fill-primary-800',
-
-    parentVariants: {
-        size: {
-            sm: 'h-[9px] w-[9px]',
-            md: 'h-3 w-3',
-            lg: 'h-4 w-4',
-        },
-    },
-});
-
-const radioIndicatorStyle = tva({
-    base: 'justify-center items-center bg-transparent border-outline-400 border-2 rounded-full data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[checked=true]:border-primary-600 data-[checked=true]:bg-transparent data-[hover=true]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[checked=true]:bg-transparent data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-400 data-[active=true]:bg-transparent data-[active=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[checked=true]:border-outline-400 data-[disabled=true]:data-[checked=true]:bg-transparent data-[disabled=true]:data-[invalid=true]:border-error-400',
-    parentVariants: {
-        size: {
-            sm: 'h-4 w-4',
-            md: 'h-5 w-5',
-            lg: 'h-6 w-6',
-        },
-    },
-});
-
-const radioLabelStyle = tva({
-    base: 'text-typography-600 data-[checked=true]:text-typography-900 data-[hover=true]:text-typography-900 data-[hover=true]:data-[disabled=true]:text-typography-600 data-[hover=true]:data-[disabled=true]:data-[checked=true]:text-typography-900 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none',
-    parentVariants: {
-        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',
-        },
-    },
-});
-
-type IRadioProps = Omit<React.ComponentProps<typeof UIRadio>, 'context'> & VariantProps<typeof radioStyle>;
-const Radio = React.forwardRef<React.ElementRef<typeof UIRadio>, IRadioProps>(
-    ({ className, size = 'md', ...props }, ref) => {
-        return <UIRadio className={radioStyle({ class: className, size })} {...props} ref={ref} context={{ size }} />;
-    },
-);
-
-type IRadioGroupProps = React.ComponentProps<typeof UIRadio.Group> & VariantProps<typeof radioGroupStyle>;
-const RadioGroup = React.forwardRef<React.ElementRef<typeof UIRadio.Group>, IRadioGroupProps>(
-    ({ className, ...props }, ref) => {
-        return <UIRadio.Group className={radioGroupStyle({ class: className })} {...props} ref={ref} />;
-    },
-);
-
-type IRadioIndicatorProps = React.ComponentProps<typeof UIRadio.Indicator> & VariantProps<typeof radioIndicatorStyle>;
-const RadioIndicator = React.forwardRef<React.ElementRef<typeof UIRadio.Indicator>, IRadioIndicatorProps>(
-    ({ className, ...props }, ref) => {
-        const { size } = useStyleContext(SCOPE);
-        return (
-            <UIRadio.Indicator
-                className={radioIndicatorStyle({
-                    parentVariants: { size },
-                    class: className,
-                })}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-type IRadioLabelProps = React.ComponentProps<typeof UIRadio.Label> & VariantProps<typeof radioIndicatorStyle>;
-const RadioLabel = React.forwardRef<React.ElementRef<typeof UIRadio.Label>, IRadioLabelProps>(
-    ({ className, ...props }, ref) => {
-        const { size } = useStyleContext(SCOPE);
-        return (
-            <UIRadio.Label
-                className={radioLabelStyle({
-                    parentVariants: { size },
-                    class: className,
-                })}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-type IRadioIconProps = React.ComponentProps<typeof UIRadio.Icon> &
-    VariantProps<typeof radioIconStyle> & {
-        height?: number;
-        width?: number;
-    };
-const RadioIcon = React.forwardRef<React.ElementRef<typeof UIRadio.Icon>, IRadioIconProps>(
-    ({ className, size, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        if (typeof size === 'number') {
-            return <UIRadio.Icon ref={ref} {...props} className={radioIconStyle({ class: className })} size={size} />;
-        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
-            return <UIRadio.Icon ref={ref} {...props} className={radioIconStyle({ class: className })} />;
-        }
-
-        return (
-            <UIRadio.Icon
-                {...props}
-                className={radioIconStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    size,
-                    class: className,
-                })}
-                ref={ref}
-            />
-        );
-    },
-);
-
-Radio.displayName = 'Radio';
-RadioGroup.displayName = 'RadioGroup';
-RadioIndicator.displayName = 'RadioIndicator';
-RadioLabel.displayName = 'RadioLabel';
-RadioIcon.displayName = 'RadioIcon';
-
-export { Radio, RadioGroup, RadioIndicator, RadioLabel, RadioIcon };

package/src/components/ui/refresh-control/index.tsx

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

package/src/components/ui/safe-area-view/index.tsx

@@ -1,22 +0,0 @@
-'use client';
-import React from 'react';
-import { SafeAreaView, ViewProps } from 'react-native';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { clsx } from 'clsx'; // Correct utility for class merging
-import { safeAreaStyle } from './styles';
-
-type ISafeAreaProps = ViewProps & VariantProps<typeof safeAreaStyle> & { className?: string };
-
-export const StyledSafeAreaView = React.forwardRef<React.ElementRef<typeof SafeAreaView>, ISafeAreaProps>(
-    ({ className, children, ...props }, ref) => {
-        return (
-            <SafeAreaView
-                {...props}
-                ref={ref}
-                className={safeAreaStyle({ class: clsx(className) })} // Convert className properly
-            >
-                {children}
-            </SafeAreaView>
-        );
-    },
-);

package/src/components/ui/safe-area-view/styles.tsx

@@ -1,10 +0,0 @@
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
-
-const baseStyle = isWeb
-    ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
-    : '';
-
-export const safeAreaStyle = tva({
-    base: baseStyle,
-});

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

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

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

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

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,
-};