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

package/src/components/ui/skeleton/styles.tsx

@@ -1,35 +0,0 @@
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-
-export const skeletonStyle = tva({
-    base: 'w-full h-full',
-    variants: {
-        variant: {
-            sharp: 'rounded-none',
-            circular: 'rounded-full',
-            rounded: 'rounded-md',
-        },
-        speed: {
-            1: 'duration-75',
-            2: 'duration-100',
-            3: 'duration-150',
-            4: 'duration-200',
-        },
-    },
-});
-export const skeletonTextStyle = tva({
-    base: 'rounded-sm w-full',
-    variants: {
-        speed: {
-            1: 'duration-75',
-            2: 'duration-100',
-            3: 'duration-150',
-            4: 'duration-200',
-        },
-        gap: {
-            1: 'gap-1',
-            2: 'gap-2',
-            3: 'gap-3',
-            4: 'gap-4',
-        },
-    },
-});

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

@@ -1,239 +0,0 @@
-'use client';
-import { createSlider } from '@gluestack-ui/slider';
-import { Pressable } from 'react-native';
-import { View } from 'react-native';
-import React from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { cssInterop } from 'nativewind';
-
-const SCOPE = 'SLIDER';
-const Root = withStyleContext(View, SCOPE);
-export const UISlider = createSlider({
-    Root: Root,
-    Thumb: View,
-    Track: Pressable,
-    FilledTrack: View,
-    ThumbInteraction: View,
-});
-
-cssInterop(UISlider.Track, { className: 'style' });
-
-const sliderStyle = tva({
-    base: 'justify-center items-center data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-none',
-    variants: {
-        orientation: {
-            horizontal: 'w-full',
-            vertical: 'h-full',
-        },
-        size: {
-            sm: '',
-            md: '',
-            lg: '',
-        },
-        isReversed: {
-            true: '',
-            false: '',
-        },
-    },
-});
-
-const sliderThumbStyle = tva({
-    base: 'bg-primary-500 absolute rounded-full data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600 data-[disabled=true]:bg-primary-500 web:cursor-pointer web:data-[active=true]:outline web:data-[active=true]:outline-4 web:data-[active=true]:outline-primary-400 shadow-hard-1',
-
-    parentVariants: {
-        size: {
-            sm: 'h-4 w-4',
-            md: 'h-5 w-5',
-            lg: 'h-6 w-6',
-        },
-    },
-});
-
-const sliderTrackStyle = tva({
-    base: 'bg-background-300 rounded-lg overflow-hidden',
-    parentVariants: {
-        orientation: {
-            horizontal: 'w-full',
-            vertical: 'h-full',
-        },
-        isReversed: {
-            true: '',
-            false: '',
-        },
-        size: {
-            sm: '',
-            md: '',
-            lg: '',
-        },
-    },
-    parentCompoundVariants: [
-        {
-            orientation: 'horizontal',
-            size: 'sm',
-            class: 'h-1 flex-row',
-        },
-        {
-            orientation: 'horizontal',
-            size: 'sm',
-            isReversed: true,
-            class: 'h-1 flex-row-reverse',
-        },
-        {
-            orientation: 'horizontal',
-            size: 'md',
-            class: 'h-1 flex-row',
-        },
-        {
-            orientation: 'horizontal',
-            size: 'md',
-            isReversed: true,
-            class: 'h-[5px] flex-row-reverse',
-        },
-        {
-            orientation: 'horizontal',
-            size: 'lg',
-            class: 'h-1.5 flex-row',
-        },
-        {
-            orientation: 'horizontal',
-            size: 'lg',
-            isReversed: true,
-            class: 'h-1.5 flex-row-reverse',
-        },
-        {
-            orientation: 'vertical',
-            size: 'sm',
-            class: 'w-1 flex-col-reverse',
-        },
-        {
-            orientation: 'vertical',
-            size: 'sm',
-            isReversed: true,
-            class: 'w-1 flex-col',
-        },
-        {
-            orientation: 'vertical',
-            size: 'md',
-            class: 'w-[5px] flex-col-reverse',
-        },
-        {
-            orientation: 'vertical',
-            size: 'md',
-            isReversed: true,
-            class: 'w-[5px] flex-col',
-        },
-        {
-            orientation: 'vertical',
-            size: 'lg',
-            class: 'w-1.5 flex-col-reverse',
-        },
-        {
-            orientation: 'vertical',
-            size: 'lg',
-            isReversed: true,
-            class: 'w-1.5 flex-col',
-        },
-    ],
-});
-
-const sliderFilledTrackStyle = tva({
-    base: 'bg-primary-500 data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600',
-    parentVariants: {
-        orientation: {
-            horizontal: 'h-full',
-            vertical: 'w-full',
-        },
-    },
-});
-
-type ISliderProps = React.ComponentProps<typeof UISlider> & VariantProps<typeof sliderStyle>;
-
-const Slider = React.forwardRef<React.ElementRef<typeof UISlider>, ISliderProps>(
-    ({ className, size = 'md', orientation = 'horizontal', isReversed = false, ...props }, ref) => {
-        return (
-            <UISlider
-                ref={ref}
-                isReversed={isReversed}
-                orientation={orientation}
-                {...props}
-                className={sliderStyle({
-                    orientation,
-                    isReversed,
-                    class: className,
-                })}
-                context={{ size, orientation, isReversed }}
-            />
-        );
-    },
-);
-
-type ISliderThumbProps = React.ComponentProps<typeof UISlider.Thumb> & VariantProps<typeof sliderThumbStyle>;
-
-const SliderThumb = React.forwardRef<React.ElementRef<typeof UISlider.Thumb>, ISliderThumbProps>(
-    ({ className, size, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        return (
-            <UISlider.Thumb
-                ref={ref}
-                {...props}
-                className={sliderThumbStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    size,
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-type ISliderTrackProps = React.ComponentProps<typeof UISlider.Track> & VariantProps<typeof sliderTrackStyle>;
-
-const SliderTrack = React.forwardRef<React.ElementRef<typeof UISlider.Track>, ISliderTrackProps>(
-    ({ className, ...props }, ref) => {
-        const { orientation: parentOrientation, size: parentSize, isReversed } = useStyleContext(SCOPE);
-
-        return (
-            <UISlider.Track
-                ref={ref}
-                {...props}
-                className={sliderTrackStyle({
-                    parentVariants: {
-                        orientation: parentOrientation,
-                        size: parentSize,
-                        isReversed,
-                    },
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-type ISliderFilledTrackProps = React.ComponentProps<typeof UISlider.FilledTrack> &
-    VariantProps<typeof sliderFilledTrackStyle>;
-
-const SliderFilledTrack = React.forwardRef<React.ElementRef<typeof UISlider.FilledTrack>, ISliderFilledTrackProps>(
-    ({ className, ...props }, ref) => {
-        const { orientation: parentOrientation } = useStyleContext(SCOPE);
-
-        return (
-            <UISlider.FilledTrack
-                ref={ref}
-                {...props}
-                className={sliderFilledTrackStyle({
-                    parentVariants: {
-                        orientation: parentOrientation,
-                    },
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-export { Slider, SliderThumb, SliderTrack, SliderFilledTrack };

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

@@ -1,31 +0,0 @@
-'use client';
-import { ActivityIndicator } from 'react-native';
-import React from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { cssInterop } from 'nativewind';
-
-cssInterop(ActivityIndicator, {
-    className: { target: 'style', nativeStyleToProp: { color: true } },
-});
-
-const spinnerStyle = tva({});
-
-const Spinner = React.forwardRef<
-    React.ElementRef<typeof ActivityIndicator>,
-    React.ComponentProps<typeof ActivityIndicator>
->(({ className, color, focusable = false, 'aria-label': ariaLabel = 'loading', ...props }, ref) => {
-    return (
-        <ActivityIndicator
-            ref={ref}
-            focusable={focusable}
-            aria-label={ariaLabel}
-            {...props}
-            color={color}
-            className={spinnerStyle({ class: className })}
-        />
-    );
-});
-
-Spinner.displayName = 'Spinner';
-
-export { Spinner };

package/src/components/ui/status-bar/index.tsx

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

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

@@ -1,33 +0,0 @@
-'use client';
-import React from 'react';
-import { Switch as RNSwitch } from 'react-native';
-import { createSwitch } from '@gluestack-ui/switch';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const UISwitch = createSwitch({
-    Root: withStyleContext(RNSwitch),
-});
-
-const switchStyle = tva({
-    base: 'data-[focus=true]:outline-0 data-[focus=true]:ring-2 data-[focus=true]:ring-indicator-primary web:cursor-pointer disabled:cursor-not-allowed data-[disabled=true]:opacity-40 data-[invalid=true]:border-error-700 data-[invalid=true]:rounded-xl data-[invalid=true]:border-2',
-
-    variants: {
-        size: {
-            sm: 'scale-75',
-            md: '',
-            lg: 'scale-125',
-        },
-    },
-});
-
-type ISwitchProps = React.ComponentProps<typeof UISwitch> & VariantProps<typeof switchStyle>;
-const Switch = React.forwardRef<React.ElementRef<typeof UISwitch>, ISwitchProps>(
-    ({ className, size = 'md', ...props }, ref) => {
-        return <UISwitch ref={ref} {...props} className={switchStyle({ size, class: className })} />;
-    },
-);
-
-Switch.displayName = 'Switch';
-export { Switch };

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

@@ -1,171 +0,0 @@
-import React, { createContext, useMemo, useContext } from 'react';
-import {
-    Table as ExpoTable,
-    THead as ExpoTHead,
-    TBody as ExpoTBody,
-    TFoot as ExpoTFoot,
-    TR as ExpoTR,
-    Caption as ExpoTCaption,
-} from '@expo/html-elements';
-
-import {
-    tableStyle,
-    tableHeaderStyle,
-    tableBodyStyle,
-    tableFooterStyle,
-    tableHeadStyle,
-    tableRowStyleStyle,
-    tableDataStyle,
-    tableCaptionStyle,
-} from './styles';
-import { Text, View } from 'react-native';
-
-const TableHeaderContext = createContext<{
-    isHeaderRow: boolean;
-}>({
-    isHeaderRow: false,
-});
-const TableFooterContext = createContext<{
-    isFooterRow: boolean;
-}>({
-    isFooterRow: false,
-});
-
-type ITableProps = React.ComponentProps<typeof ExpoTable>;
-type ITableHeaderProps = React.ComponentProps<typeof ExpoTHead>;
-type ITableBodyProps = React.ComponentProps<typeof ExpoTBody>;
-type ITableFooterProps = React.ComponentProps<typeof ExpoTFoot>;
-type ITableHeadProps = React.ComponentProps<typeof View | typeof Text> & {
-    useRNView?: boolean;
-};
-type ITableRowProps = React.ComponentProps<typeof ExpoTR>;
-type ITableDataProps = React.ComponentProps<typeof View | typeof Text> & {
-    useRNView?: boolean;
-};
-type ITableCaptionProps = React.ComponentProps<typeof ExpoTCaption>;
-
-const Table = React.forwardRef<React.ElementRef<typeof ExpoTable>, ITableProps>(({ className, ...props }, ref) => {
-    return (
-        <ExpoTable
-            // @ts-expect-error
-            ref={ref}
-            className={tableStyle({ class: className })}
-            {...props}
-        />
-    );
-});
-
-const TableHeader = React.forwardRef<React.ElementRef<typeof ExpoTHead>, ITableHeaderProps>(
-    ({ className, ...props }, ref) => {
-        const contextValue = useMemo(() => {
-            return {
-                isHeaderRow: true,
-            };
-        }, []);
-        return (
-            <TableHeaderContext.Provider value={contextValue}>
-                <ExpoTHead
-                    // @ts-expect-error
-                    ref={ref}
-                    className={tableHeaderStyle({ class: className })}
-                    {...props}
-                />
-            </TableHeaderContext.Provider>
-        );
-    },
-);
-
-const TableBody = React.forwardRef<React.ElementRef<typeof ExpoTBody>, ITableBodyProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <ExpoTBody
-                // @ts-expect-error
-                ref={ref}
-                className={tableBodyStyle({ class: className })}
-                {...props}
-            />
-        );
-    },
-);
-
-const TableFooter = React.forwardRef<React.ElementRef<typeof ExpoTFoot>, ITableFooterProps>(
-    ({ className, ...props }, ref) => {
-        const contextValue = useMemo(() => {
-            return {
-                isFooterRow: true,
-            };
-        }, []);
-        return (
-            <TableFooterContext.Provider value={contextValue}>
-                <ExpoTFoot
-                    // @ts-expect-error
-                    ref={ref}
-                    className={tableFooterStyle({ class: className })}
-                    {...props}
-                />
-            </TableFooterContext.Provider>
-        );
-    },
-);
-
-const TableHead = React.forwardRef<React.ElementRef<typeof View | typeof Text>, ITableHeadProps>(
-    ({ useRNView = false, className, ...props }, ref) => {
-        if (useRNView) {
-            return <View ref={ref} className={tableHeadStyle({ class: className })} {...props} />;
-        } else {
-            return <Text ref={ref} className={tableHeadStyle({ class: className })} {...props} />;
-        }
-    },
-);
-
-const TableRow = React.forwardRef<React.ElementRef<typeof ExpoTR>, ITableRowProps>(({ className, ...props }, ref) => {
-    const { isHeaderRow } = useContext(TableHeaderContext);
-    const { isFooterRow } = useContext(TableFooterContext);
-
-    return (
-        <ExpoTR
-            // @ts-expect-error
-            ref={ref}
-            className={tableRowStyleStyle({
-                isHeaderRow,
-                isFooterRow,
-                class: className,
-            })}
-            {...props}
-        />
-    );
-});
-
-const TableData = React.forwardRef<React.ElementRef<typeof View | typeof Text>, ITableDataProps>(
-    ({ useRNView = false, className, ...props }, ref) => {
-        if (useRNView) {
-            return <View ref={ref} className={tableDataStyle({ class: className })} {...props} />;
-        } else {
-            return <Text ref={ref} className={tableDataStyle({ class: className })} {...props} />;
-        }
-    },
-);
-
-const TableCaption = React.forwardRef<React.ElementRef<typeof ExpoTCaption>, ITableCaptionProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <ExpoTCaption
-                // @ts-expect-error
-                ref={ref}
-                className={tableCaptionStyle({ class: className })}
-                {...props}
-            />
-        );
-    },
-);
-
-Table.displayName = 'Table';
-TableHeader.displayName = 'TableHeader';
-TableBody.displayName = 'TableBody';
-TableFooter.displayName = 'TableFooter';
-TableHead.displayName = 'TableHead';
-TableRow.displayName = 'TableRow';
-TableData.displayName = 'TableData';
-TableCaption.displayName = 'TableCaption';
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableData, TableCaption };

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

@@ -1,95 +0,0 @@
-import React, { createContext, useMemo, useContext } from 'react';
-import {
-    tableStyle,
-    tableHeaderStyle,
-    tableBodyStyle,
-    tableFooterStyle,
-    tableHeadStyle,
-    tableRowStyleStyle,
-    tableDataStyle,
-    tableCaptionStyle,
-} from './styles';
-
-const TableHeaderContext = createContext<{
-    isHeaderRow: boolean;
-}>({
-    isHeaderRow: false,
-});
-const TableFooterContext = createContext<{
-    isFooterRow: boolean;
-}>({
-    isFooterRow: false,
-});
-
-const Table = React.forwardRef(({ className, ...props }: any, ref?: any) => {
-    return <table ref={ref} className={tableStyle({ class: className })} {...props} />;
-});
-
-const TableHeader = React.forwardRef(({ className, ...props }: any, ref?: any) => {
-    const contextValue = useMemo(() => {
-        return {
-            isHeaderRow: true,
-        };
-    }, []);
-    return (
-        <TableHeaderContext.Provider value={contextValue}>
-            <thead ref={ref} className={tableHeaderStyle({ class: className })} {...props} />
-        </TableHeaderContext.Provider>
-    );
-});
-
-const TableBody = React.forwardRef(({ className, ...props }: any, ref?: any) => {
-    return <tbody ref={ref} className={tableBodyStyle({ class: className })} {...props} />;
-});
-
-const TableFooter = React.forwardRef(({ className, ...props }: any, ref?: any) => {
-    const contextValue = useMemo(() => {
-        return {
-            isFooterRow: true,
-        };
-    }, []);
-    return (
-        <TableFooterContext.Provider value={contextValue}>
-            <tfoot ref={ref} className={tableFooterStyle({ class: className })} {...props} />
-        </TableFooterContext.Provider>
-    );
-});
-
-const TableHead = React.forwardRef(({ className, ...props }: any, ref?: any) => {
-    return <th ref={ref} className={tableHeadStyle({ class: className })} {...props} />;
-});
-
-const TableRow = React.forwardRef(({ className, ...props }: any, ref?: any) => {
-    const { isHeaderRow } = useContext(TableHeaderContext);
-    const { isFooterRow } = useContext(TableFooterContext);
-    return (
-        <tr
-            ref={ref}
-            className={tableRowStyleStyle({
-                isHeaderRow,
-                isFooterRow,
-                class: className,
-            })}
-            {...props}
-        />
-    );
-});
-
-const TableData = React.forwardRef(({ className, ...props }: any, ref?: any) => {
-    return <td ref={ref} className={tableDataStyle({ class: className })} {...props} />;
-});
-
-const TableCaption = React.forwardRef(({ className, ...props }: any, ref?: any) => {
-    return <caption ref={ref} className={tableCaptionStyle({ class: className })} {...props} />;
-});
-
-Table.displayName = 'Table';
-TableHeader.displayName = 'TableHeader';
-TableBody.displayName = 'TableBody';
-TableFooter.displayName = 'TableFooter';
-TableHead.displayName = 'TableHead';
-TableRow.displayName = 'TableRow';
-TableData.displayName = 'TableData';
-TableCaption.displayName = 'TableCaption';
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableData, TableCaption };

package/src/components/ui/table/styles.tsx

@@ -1,44 +0,0 @@
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
-
-const captionTableStyle = isWeb ? 'caption-bottom' : '';
-
-export const tableStyle = tva({
-    base: `table border-collapse border-collapse w-[800px]`,
-});
-
-export const tableHeaderStyle = tva({
-    base: '',
-});
-
-export const tableBodyStyle = tva({
-    base: '',
-});
-
-export const tableFooterStyle = tva({
-    base: '',
-});
-
-export const tableHeadStyle = tva({
-    base: 'flex-1 px-6 py-[14px] text-left font-bold text-[16px] leading-[22px] text-typography-800 font-roboto',
-});
-
-export const tableRowStyleStyle = tva({
-    base: 'border-0 border-b border-solid border-outline-200 bg-background-0',
-    variants: {
-        isHeaderRow: {
-            true: '',
-        },
-        isFooterRow: {
-            true: 'border-b-0 ',
-        },
-    },
-});
-
-export const tableDataStyle = tva({
-    base: 'flex-1 px-6 py-[14px] text-left text-[16px] font-medium leading-[22px] text-typography-800 font-roboto',
-});
-
-export const tableCaptionStyle = tva({
-    base: `${captionTableStyle} px-6 py-[14px] text-[16px] font-normal leading-[22px] text-typography-800 bg-background-50 font-roboto`,
-});