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

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

@@ -1,499 +0,0 @@
-'use client';
-import React from 'react';
-import { H4 } from '@expo/html-elements';
-import { createActionsheet } from '@gluestack-ui/actionsheet';
-import {
-    Pressable,
-    View,
-    Text,
-    ScrollView,
-    VirtualizedList,
-    FlatList,
-    SectionList,
-    PressableProps,
-} from 'react-native';
-import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { cssInterop } from 'nativewind';
-import { Motion, AnimatePresence, createMotionAnimatedComponent } from '@legendapp/motion';
-
-const ItemWrapper = React.forwardRef<React.ElementRef<typeof Pressable>, PressableProps>(({ ...props }, ref) => {
-    return <Pressable {...props} ref={ref} />;
-});
-
-const AnimatedPressable = createMotionAnimatedComponent(Pressable);
-
-export const UIActionsheet = createActionsheet({
-    Root: View,
-    Content: Motion.View,
-    Item: ItemWrapper,
-    ItemText: Text,
-    DragIndicator: View,
-    IndicatorWrapper: View,
-    Backdrop: AnimatedPressable,
-    ScrollView: ScrollView,
-    VirtualizedList: VirtualizedList,
-    FlatList: FlatList,
-    SectionList: SectionList,
-    SectionHeaderText: H4,
-    Icon: UIIcon,
-    AnimatePresence: AnimatePresence,
-});
-
-cssInterop(UIActionsheet, { className: 'style' });
-cssInterop(UIActionsheet.Content, { className: 'style' });
-cssInterop(ItemWrapper, { className: 'style' });
-cssInterop(UIActionsheet.ItemText, { className: 'style' });
-cssInterop(UIActionsheet.DragIndicator, { className: 'style' });
-cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' });
-cssInterop(UIActionsheet.Backdrop, { className: 'style' });
-cssInterop(UIActionsheet.ScrollView, {
-    className: 'style',
-    contentContainerClassName: 'contentContainerStyle',
-    indicatorClassName: 'indicatorStyle',
-});
-cssInterop(UIActionsheet.VirtualizedList, {
-    className: 'style',
-    ListFooterComponentClassName: 'ListFooterComponentStyle',
-    ListHeaderComponentClassName: 'ListHeaderComponentStyle',
-    contentContainerClassName: 'contentContainerStyle',
-    indicatorClassName: 'indicatorStyle',
-});
-cssInterop(UIActionsheet.FlatList, {
-    className: 'style',
-    ListFooterComponentClassName: 'ListFooterComponentStyle',
-    ListHeaderComponentClassName: 'ListHeaderComponentStyle',
-    columnWrapperClassName: 'columnWrapperStyle',
-    contentContainerClassName: 'contentContainerStyle',
-    indicatorClassName: 'indicatorStyle',
-});
-cssInterop(UIActionsheet.SectionList, { className: 'style' });
-cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' });
-
-cssInterop(PrimitiveIcon, {
-    className: {
-        target: 'style',
-        nativeStyleToProp: {
-            height: true,
-            width: true,
-            fill: true,
-            color: 'classNameColor',
-            stroke: true,
-        },
-    },
-});
-
-const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' });
-
-const actionsheetContentStyle = tva({
-    base: 'items-center rounded-tl-3xl rounded-tr-3xl p-5 pt-2 bg-background-0 web:pointer-events-auto web:select-none shadow-hard-5 border border-b-0 border-outline-100',
-});
-
-const actionsheetItemStyle = tva({
-    base: 'w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100 web:data-[focus-visible=true]:outline-indicator-primary gap-2',
-});
-
-const actionsheetItemTextStyle = tva({
-    base: 'text-typography-700 font-normal font-body',
-    variants: {
-        isTruncated: {
-            true: '',
-        },
-        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',
-        },
-    },
-});
-
-const actionsheetDragIndicatorStyle = tva({
-    base: 'w-16 h-1 bg-background-400 rounded-full',
-});
-
-const actionsheetDragIndicatorWrapperStyle = tva({
-    base: 'w-full py-1 items-center',
-});
-
-const actionsheetBackdropStyle = tva({
-    base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto',
-});
-
-const actionsheetScrollViewStyle = tva({
-    base: 'w-full h-auto',
-});
-
-const actionsheetVirtualizedListStyle = tva({
-    base: 'w-full h-auto',
-});
-
-const actionsheetFlatListStyle = tva({
-    base: 'w-full h-auto',
-});
-
-const actionsheetSectionListStyle = tva({
-    base: 'w-full h-auto',
-});
-
-const actionsheetSectionHeaderTextStyle = tva({
-    base: 'leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase',
-    variants: {
-        isTruncated: {
-            true: '',
-        },
-        bold: {
-            true: 'font-bold',
-        },
-        underline: {
-            true: 'underline',
-        },
-        strikeThrough: {
-            true: 'line-through',
-        },
-        size: {
-            '5xl': 'text-5xl',
-            '4xl': 'text-4xl',
-            '3xl': 'text-3xl',
-            '2xl': 'text-2xl',
-            xl: 'text-xl',
-            lg: 'text-lg',
-            md: 'text-base',
-            sm: 'text-sm',
-            xs: 'text-xs',
-        },
-
-        sub: {
-            true: 'text-xs',
-        },
-        italic: {
-            true: 'italic',
-        },
-        highlight: {
-            true: 'bg-yellow500',
-        },
-    },
-    defaultVariants: {
-        size: 'xs',
-    },
-});
-
-const actionsheetIconStyle = tva({
-    base: 'text-background-500 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 IActionsheetProps = VariantProps<typeof actionsheetStyle> & React.ComponentPropsWithoutRef<typeof UIActionsheet>;
-
-type IActionsheetContentProps = VariantProps<typeof actionsheetContentStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.Content> & {
-        className?: string;
-    };
-
-type IActionsheetItemProps = VariantProps<typeof actionsheetItemStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.Item>;
-
-type IActionsheetItemTextProps = VariantProps<typeof actionsheetItemTextStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.ItemText>;
-
-type IActionsheetDragIndicatorProps = VariantProps<typeof actionsheetDragIndicatorStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.DragIndicator>;
-
-type IActionsheetDragIndicatorWrapperProps = VariantProps<typeof actionsheetDragIndicatorWrapperStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.DragIndicatorWrapper>;
-
-type IActionsheetBackdropProps = VariantProps<typeof actionsheetBackdropStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.Backdrop> & {
-        className?: string;
-    };
-
-type IActionsheetScrollViewProps = VariantProps<typeof actionsheetScrollViewStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.ScrollView>;
-
-type IActionsheetVirtualizedListProps = VariantProps<typeof actionsheetVirtualizedListStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.VirtualizedList>;
-
-type IActionsheetFlatListProps = VariantProps<typeof actionsheetFlatListStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.FlatList>;
-
-type IActionsheetSectionListProps = VariantProps<typeof actionsheetSectionListStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.SectionList>;
-
-type IActionsheetSectionHeaderTextProps = VariantProps<typeof actionsheetSectionHeaderTextStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.SectionHeaderText>;
-
-type IActionsheetIconProps = VariantProps<typeof actionsheetIconStyle> &
-    React.ComponentPropsWithoutRef<typeof UIActionsheet.Icon> & {
-        className?: string;
-        as?: React.ElementType;
-        height?: number;
-        width?: number;
-    };
-
-const Actionsheet = React.forwardRef<React.ElementRef<typeof UIActionsheet>, IActionsheetProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIActionsheet
-                className={actionsheetStyle({
-                    class: className,
-                })}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-const ActionsheetContent = React.forwardRef<React.ElementRef<typeof UIActionsheet.Content>, IActionsheetContentProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIActionsheet.Content
-                className={actionsheetContentStyle({
-                    class: className,
-                })}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-const ActionsheetItem = React.forwardRef<React.ElementRef<typeof UIActionsheet.Item>, IActionsheetItemProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <UIActionsheet.Item
-                className={actionsheetItemStyle({
-                    class: className,
-                })}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-const ActionsheetItemText = React.forwardRef<
-    React.ElementRef<typeof UIActionsheet.ItemText>,
-    IActionsheetItemTextProps
->(({ isTruncated, bold, underline, strikeThrough, size = 'sm', className, ...props }, ref) => {
-    return (
-        <UIActionsheet.ItemText
-            className={actionsheetItemTextStyle({
-                class: className,
-                isTruncated,
-                bold,
-                underline,
-                strikeThrough,
-                size,
-            })}
-            ref={ref}
-            {...props}
-        />
-    );
-});
-
-const ActionsheetDragIndicator = React.forwardRef<
-    React.ElementRef<typeof UIActionsheet.DragIndicator>,
-    IActionsheetDragIndicatorProps
->(({ className, ...props }, ref) => {
-    return (
-        <UIActionsheet.DragIndicator
-            className={actionsheetDragIndicatorStyle({
-                class: className,
-            })}
-            ref={ref}
-            {...props}
-        />
-    );
-});
-
-const ActionsheetDragIndicatorWrapper = React.forwardRef<
-    React.ElementRef<typeof UIActionsheet.DragIndicatorWrapper>,
-    IActionsheetDragIndicatorWrapperProps
->(({ className, ...props }, ref) => {
-    return (
-        <UIActionsheet.DragIndicatorWrapper
-            className={actionsheetDragIndicatorWrapperStyle({
-                class: className,
-            })}
-            ref={ref}
-            {...props}
-        />
-    );
-});
-
-const ActionsheetBackdrop = React.forwardRef<
-    React.ElementRef<typeof UIActionsheet.Backdrop>,
-    IActionsheetBackdropProps
->(({ className, ...props }, ref) => {
-    return (
-        <UIActionsheet.Backdrop
-            initial={{
-                opacity: 0,
-            }}
-            animate={{
-                opacity: 0.5,
-            }}
-            exit={{
-                opacity: 0,
-            }}
-            {...props}
-            className={actionsheetBackdropStyle({
-                class: className,
-            })}
-            ref={ref}
-        />
-    );
-});
-
-const ActionsheetScrollView = React.forwardRef<
-    React.ElementRef<typeof UIActionsheet.ScrollView>,
-    IActionsheetScrollViewProps
->(({ className, ...props }, ref) => {
-    return (
-        <UIActionsheet.ScrollView
-            className={actionsheetScrollViewStyle({
-                class: className,
-            })}
-            ref={ref}
-            {...props}
-        />
-    );
-});
-
-const ActionsheetVirtualizedList = React.forwardRef<
-    React.ElementRef<typeof UIActionsheet.VirtualizedList>,
-    IActionsheetVirtualizedListProps
->(({ className, ...props }, ref) => {
-    return (
-        <UIActionsheet.VirtualizedList
-            className={actionsheetVirtualizedListStyle({
-                class: className,
-            })}
-            ref={ref}
-            {...props}
-        />
-    );
-});
-
-const ActionsheetFlatList = React.forwardRef<
-    React.ElementRef<typeof UIActionsheet.FlatList>,
-    IActionsheetFlatListProps
->(({ className, ...props }, ref) => {
-    return (
-        <UIActionsheet.FlatList
-            className={actionsheetFlatListStyle({
-                class: className,
-            })}
-            ref={ref}
-            {...props}
-        />
-    );
-});
-
-const ActionsheetSectionList = React.forwardRef<
-    React.ElementRef<typeof UIActionsheet.SectionList>,
-    IActionsheetSectionListProps
->(({ className, ...props }, ref) => {
-    return (
-        <UIActionsheet.SectionList
-            className={actionsheetSectionListStyle({
-                class: className,
-            })}
-            ref={ref}
-            {...props}
-        />
-    );
-});
-
-const ActionsheetSectionHeaderText = React.forwardRef<
-    React.ElementRef<typeof UIActionsheet.SectionHeaderText>,
-    IActionsheetSectionHeaderTextProps
->(({ className, isTruncated, bold, underline, strikeThrough, size, sub, italic, highlight, ...props }, ref) => {
-    return (
-        <UIActionsheet.SectionHeaderText
-            className={actionsheetSectionHeaderTextStyle({
-                class: className,
-                isTruncated,
-                bold,
-                underline,
-                strikeThrough,
-                size,
-                sub,
-                italic,
-                highlight,
-            })}
-            ref={ref}
-            {...props}
-        />
-    );
-});
-
-const ActionsheetIcon = React.forwardRef<React.ElementRef<typeof UIActionsheet.Icon>, IActionsheetIconProps>(
-    ({ className, size = 'sm', ...props }, ref) => {
-        if (typeof size === 'number') {
-            return (
-                <UIActionsheet.Icon
-                    ref={ref}
-                    {...props}
-                    className={actionsheetIconStyle({ class: className })}
-                    size={size}
-                />
-            );
-        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
-            return <UIActionsheet.Icon ref={ref} {...props} className={actionsheetIconStyle({ class: className })} />;
-        }
-        return (
-            <UIActionsheet.Icon
-                className={actionsheetIconStyle({
-                    class: className,
-                    size,
-                })}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-export {
-    Actionsheet,
-    ActionsheetContent,
-    ActionsheetItem,
-    ActionsheetItemText,
-    ActionsheetDragIndicator,
-    ActionsheetDragIndicatorWrapper,
-    ActionsheetBackdrop,
-    ActionsheetScrollView,
-    ActionsheetVirtualizedList,
-    ActionsheetFlatList,
-    ActionsheetSectionList,
-    ActionsheetSectionHeaderText,
-    ActionsheetIcon,
-};

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

@@ -1,205 +0,0 @@
-'use client';
-import { createAlert } from '@gluestack-ui/alert';
-import { View, Text } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import React from 'react';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
-
-const SCOPE = 'ALERT';
-
-const alertStyle = tva({
-    base: 'items-center py-3 px-4 rounded-md flex-row gap-2 border-outline-100',
-
-    variants: {
-        action: {
-            error: 'bg-background-error',
-            warning: 'bg-background-warning',
-            success: 'bg-background-success',
-            info: 'bg-background-info',
-            muted: 'bg-background-muted',
-        },
-
-        variant: {
-            solid: '',
-            outline: 'border bg-background-0',
-        },
-    },
-});
-
-const alertTextStyle = tva({
-    base: 'font-normal font-body',
-
-    variants: {
-        isTruncated: {
-            true: 'web: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: {
-        action: {
-            error: 'text-error-800',
-            warning: 'text-warning-800',
-            success: 'text-success-800',
-            info: 'text-info-800',
-            muted: 'text-background-800',
-        },
-    },
-});
-
-const alertIconStyle = tva({
-    base: 'fill-none',
-    variants: {
-        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',
-        },
-    },
-    parentVariants: {
-        action: {
-            error: 'text-error-800',
-            warning: 'text-warning-800',
-            success: 'text-success-800',
-            info: 'text-info-800',
-            muted: 'text-background-800',
-        },
-    },
-});
-
-export const UIAlert = createAlert({
-    Root: withStyleContext(View, SCOPE),
-    Text: Text,
-    Icon: UIIcon,
-});
-
-cssInterop(PrimitiveIcon, {
-    className: {
-        target: 'style',
-        nativeStyleToProp: {
-            height: true,
-            width: true,
-            fill: true,
-            color: 'classNameColor',
-            stroke: true,
-        },
-    },
-});
-
-type IAlertProps = Omit<React.ComponentPropsWithoutRef<typeof UIAlert>, 'context'> & VariantProps<typeof alertStyle>;
-
-const Alert = React.forwardRef<React.ElementRef<typeof UIAlert>, IAlertProps>(
-    ({ className, variant = 'solid', action = 'muted', ...props }, ref) => {
-        return (
-            <UIAlert
-                className={alertStyle({ action, variant, class: className })}
-                context={{ variant, action }}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-
-type IAlertTextProps = React.ComponentPropsWithoutRef<typeof UIAlert.Text> & VariantProps<typeof alertTextStyle>;
-
-const AlertText = React.forwardRef<React.ElementRef<typeof UIAlert.Text>, IAlertTextProps>(
-    (
-        { className, isTruncated, bold, underline, strikeThrough, size = 'md', sub, italic, highlight, ...props },
-        ref,
-    ) => {
-        const { action: parentAction } = useStyleContext(SCOPE);
-        return (
-            <UIAlert.Text
-                className={alertTextStyle({
-                    isTruncated,
-                    bold,
-                    underline,
-                    strikeThrough,
-                    size,
-                    sub,
-                    italic,
-                    highlight,
-                    class: className,
-                    parentVariants: {
-                        action: parentAction,
-                    },
-                })}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-type IAlertIconProps = React.ComponentPropsWithoutRef<typeof UIAlert.Icon> &
-    VariantProps<typeof alertIconStyle> & {
-        height?: number;
-        width?: number;
-    };
-
-const AlertIcon = React.forwardRef<React.ElementRef<typeof UIAlert.Icon>, IAlertIconProps>(
-    ({ className, size = 'md', ...props }, ref) => {
-        const { action: parentAction } = useStyleContext(SCOPE);
-
-        if (typeof size === 'number') {
-            return <UIAlert.Icon ref={ref} {...props} className={alertIconStyle({ class: className })} size={size} />;
-        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
-            return <UIAlert.Icon ref={ref} {...props} className={alertIconStyle({ class: className })} />;
-        }
-        return (
-            <UIAlert.Icon
-                className={alertIconStyle({
-                    parentVariants: {
-                        action: parentAction,
-                    },
-                    size,
-                    class: className,
-                })}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-Alert.displayName = 'Alert';
-AlertText.displayName = 'AlertText';
-AlertIcon.displayName = 'AlertIcon';
-
-export { Alert, AlertText, AlertIcon };