@admin-layout/gluestack-ui-mobile 11.0.1-alpha.0 → 11.0.3-alpha.0

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

@@ -0,0 +1,160 @@
+'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

@@ -0,0 +1,178 @@
+'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

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

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

@@ -0,0 +1,22 @@
+'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

@@ -0,0 +1,10 @@
+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

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

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

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

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

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