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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,44 @@
+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`,
+});