@admin-layout/gluestack-ui-mobile 12.0.16-alpha.91 → 12.2.1-alpha.0

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/switch/index.web.tsx

@@ -1,44 +0,0 @@
-'use client';
-import React from 'react';
-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 WebSwitch = ({ value, onValueChange, disabled, ...props }: any) => {
-    return (
-        <input
-            type="checkbox"
-            checked={value}
-            onChange={(e) => onValueChange?.(e.target.checked)}
-            disabled={disabled}
-            {...props}
-        />
-    );
-};
-
-const UISwitch = createSwitch({
-    Root: withStyleContext(WebSwitch),
-});
-
-const switchStyle = tva({
-    base: 'appearance-none relative inline-block w-10 h-6 rounded-full bg-gray-300 transition-colors duration-200 ease-in-out cursor-pointer focus:outline-none focus:ring-2 focus:ring-indicator-primary checked:bg-primary-500 disabled:cursor-not-allowed disabled:opacity-40 data-[invalid=true]:border-error-700 data-[invalid=true]:border-2',
-    variants: {
-        size: {
-            sm: 'w-8 h-5',
-            md: 'w-10 h-6',
-            lg: 'w-12 h-7',
-        },
-    },
-});
-
-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`,
-});

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

@@ -1,205 +0,0 @@
-'use client';
-import React, { forwardRef, createContext, useContext, useEffect, useRef, useState } from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const SCOPE = 'TABS';
-
-const tabListStyle = tva({
-    base: 'flex border-b border-gray-200',
-    variants: {
-        align: {
-            start: 'justify-start',
-            center: 'justify-center',
-            end: 'justify-end',
-        },
-        size: {
-            sm: 'gap-2',
-            md: 'gap-4',
-            lg: 'gap-6',
-        },
-    },
-    defaultVariants: {
-        align: 'start',
-        size: 'md',
-    },
-});
-
-const tabStyle = tva({
-    base: 'px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-t-lg transition-colors',
-    variants: {
-        variant: {
-            line: '-mb-px border-b-2 hover:border-gray-300',
-            enclosed: 'border border-b-0 hover:bg-gray-50',
-            soft: 'hover:bg-gray-100 rounded-lg',
-        },
-        size: {
-            sm: 'text-sm',
-            md: 'text-base',
-            lg: 'text-lg',
-        },
-        state: {
-            active: {
-                line: 'border-blue-500 text-blue-600',
-                enclosed: 'border-gray-200 bg-white',
-                soft: 'bg-gray-100 text-blue-600',
-            },
-            inactive: {
-                line: 'border-transparent text-gray-500',
-                enclosed: 'border-transparent text-gray-500',
-                soft: 'text-gray-500',
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'line',
-        size: 'md',
-        state: 'inactive',
-    },
-});
-
-const tabPanelStyle = tva({
-    base: 'mt-4 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-lg',
-});
-
-type TabsContextType = {
-    selectedIndex: number;
-    onChange: (index: number) => void;
-    variant?: VariantProps<typeof tabStyle>['variant'];
-    size?: VariantProps<typeof tabStyle>['size'];
-};
-
-const TabsContext = createContext<TabsContextType>({
-    selectedIndex: 0,
-    onChange: () => {},
-});
-
-type ITabsProps = React.ComponentProps<'div'> & {
-    defaultIndex?: number;
-    onChange?: (index: number) => void;
-    variant?: VariantProps<typeof tabStyle>['variant'];
-    size?: VariantProps<typeof tabStyle>['size'];
-};
-
-export const Tabs = forwardRef<HTMLDivElement, ITabsProps>(
-    ({ defaultIndex = 0, onChange, variant = 'line', size = 'md', children, ...props }, ref) => {
-        const [selectedIndex, setSelectedIndex] = useState(defaultIndex);
-
-        const handleChange = (index: number) => {
-            setSelectedIndex(index);
-            if (onChange) onChange(index);
-        };
-
-        return (
-            <TabsContext.Provider value={{ selectedIndex, onChange: handleChange, variant, size }}>
-                <div ref={ref} {...props}>
-                    {children}
-                </div>
-            </TabsContext.Provider>
-        );
-    },
-);
-
-Tabs.displayName = 'Tabs';
-
-type ITabListProps = React.ComponentProps<'div'> & {
-    align?: VariantProps<typeof tabListStyle>['align'];
-    size?: VariantProps<typeof tabListStyle>['size'];
-};
-
-export const TabList = forwardRef<HTMLDivElement, ITabListProps>(
-    ({ className, align, size: sizeProp, children, ...props }, ref) => {
-        const { size } = useContext(TabsContext);
-
-        return (
-            <div
-                ref={ref}
-                role="tablist"
-                className={tabListStyle({ align, size: sizeProp || size, class: className })}
-                {...props}
-            >
-                {children}
-            </div>
-        );
-    },
-);
-
-TabList.displayName = 'TabList';
-
-type ITabProps = Omit<React.ComponentProps<'button'>, 'value'> & {
-    index?: number;
-};
-
-export const Tab = forwardRef<HTMLButtonElement, ITabProps>(
-    ({ className, index = 0, onClick, onKeyDown, children, ...props }, ref) => {
-        const { selectedIndex, onChange, variant, size } = useContext(TabsContext);
-        const isSelected = selectedIndex === index;
-
-        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-            if (onClick) onClick(e);
-            onChange(index);
-        };
-
-        const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
-            if (onKeyDown) onKeyDown(e);
-            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-                e.preventDefault();
-                const tabList = e.currentTarget.parentElement;
-                if (tabList) {
-                    const tabs = Array.from(tabList.querySelectorAll('[role="tab"]'));
-                    const currentIndex = tabs.indexOf(e.currentTarget);
-                    const nextIndex = e.key === 'ArrowLeft' ? currentIndex - 1 : currentIndex + 1;
-                    if (nextIndex >= 0 && nextIndex < tabs.length) {
-                        (tabs[nextIndex] as HTMLButtonElement).focus();
-                        onChange(nextIndex);
-                    }
-                }
-            }
-        };
-
-        return (
-            <button
-                ref={ref}
-                role="tab"
-                aria-selected={isSelected}
-                tabIndex={isSelected ? 0 : -1}
-                onClick={handleClick}
-                onKeyDown={handleKeyDown}
-                className={tabStyle({
-                    variant,
-                    size,
-                    state: isSelected ? 'active' : 'inactive',
-                    class: className,
-                })}
-                {...props}
-            >
-                {children}
-            </button>
-        );
-    },
-);
-
-Tab.displayName = 'Tab';
-
-type ITabPanelProps = React.ComponentProps<'div'> & {
-    index?: number;
-};
-
-export const TabPanel = forwardRef<HTMLDivElement, ITabPanelProps>(
-    ({ className, index = 0, children, ...props }, ref) => {
-        const { selectedIndex } = useContext(TabsContext);
-        const isSelected = selectedIndex === index;
-
-        if (!isSelected) return null;
-
-        return (
-            <div ref={ref} role="tabpanel" tabIndex={0} className={tabPanelStyle({ class: className })} {...props}>
-                {children}
-            </div>
-        );
-    },
-);
-
-TabPanel.displayName = 'TabPanel';

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

@@ -1,53 +0,0 @@
-import React from 'react';
-
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { Text as RNText } from 'react-native';
-import { textStyle } from './styles';
-
-type ITextProps = React.ComponentProps<typeof RNText> &
-    VariantProps<typeof textStyle> & {
-        color?: string; // New prop for dynamic colors
-    };
-
-const Text = React.forwardRef<React.ElementRef<typeof RNText>, ITextProps>(
-    (
-        {
-            className,
-            isTruncated,
-            bold,
-            underline,
-            strikeThrough,
-            size = 'md',
-            sub,
-            italic,
-            highlight,
-            color,
-            style,
-            ...props
-        },
-        ref,
-    ) => {
-        return (
-            <RNText
-                className={textStyle({
-                    isTruncated,
-                    bold,
-                    underline,
-                    strikeThrough,
-                    size,
-                    sub,
-                    italic,
-                    highlight,
-                    class: className,
-                })}
-                style={[{ color }, style]}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-Text.displayName = 'Text';
-
-export { Text };

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { textStyle } from './styles';
-
-type ITextProps = React.ComponentProps<'span'> & VariantProps<typeof textStyle>;
-
-const Text = React.forwardRef<React.ElementRef<'span'>, ITextProps>(
-    (
-        {
-            className,
-            isTruncated,
-            bold,
-            underline,
-            strikeThrough,
-            size = 'md',
-            sub,
-            italic,
-            highlight,
-            ...props
-        }: { className?: string } & ITextProps,
-        ref,
-    ) => {
-        return (
-            <span
-                className={textStyle({
-                    isTruncated,
-                    bold,
-                    underline,
-                    strikeThrough,
-                    size,
-                    sub,
-                    italic,
-                    highlight,
-                    class: className,
-                })}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-Text.displayName = 'Text';
-
-export { Text };