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

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

@@ -1,353 +0,0 @@
-'use client';
-import React from 'react';
-import { createButton } from '@gluestack-ui/button';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { cssInterop } from 'nativewind';
-import { ActivityIndicator, Pressable, Text, View } from 'react-native';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
-
-const SCOPE = 'BUTTON';
-
-const Root = withStyleContext(Pressable, SCOPE);
-
-const UIButton = createButton({
-    Root: Root,
-    Text,
-    Group: View,
-    Spinner: ActivityIndicator,
-    Icon: UIIcon,
-});
-
-cssInterop(PrimitiveIcon, {
-    className: {
-        target: 'style',
-        nativeStyleToProp: {
-            height: true,
-            width: true,
-            fill: true,
-            color: 'classNameColor',
-            stroke: true,
-        },
-    },
-});
-
-const buttonStyle = tva({
-    base: 'group/button rounded bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40 gap-2',
-    variants: {
-        action: {
-            primary:
-                'bg-primary-500 data-[hover=true]:bg-primary-600 data-[active=true]:bg-primary-700 border-primary-300 data-[hover=true]:border-primary-400 data-[active=true]:border-primary-500 data-[focus-visible=true]:web:ring-indicator-info',
-            secondary:
-                'bg-secondary-500 border-secondary-300 data-[hover=true]:bg-secondary-600 data-[hover=true]:border-secondary-400 data-[active=true]:bg-secondary-700 data-[active=true]:border-secondary-700 data-[focus-visible=true]:web:ring-indicator-info',
-            positive:
-                'bg-success-500 border-success-300 data-[hover=true]:bg-success-600 data-[hover=true]:border-success-400 data-[active=true]:bg-success-700 data-[active=true]:border-success-500 data-[focus-visible=true]:web:ring-indicator-info',
-            negative:
-                'bg-error-500 border-error-300 data-[hover=true]:bg-error-600 data-[hover=true]:border-error-400 data-[active=true]:bg-error-700 data-[active=true]:border-error-500 data-[focus-visible=true]:web:ring-indicator-info',
-            default: 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
-        },
-        variant: {
-            link: 'px-0',
-            outline: 'bg-transparent border data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
-            solid: '',
-        },
-
-        size: {
-            xs: 'px-3.5 h-8',
-            sm: 'px-4 h-9',
-            md: 'px-5 h-10',
-            lg: 'px-6 h-11',
-            xl: 'px-7 h-12',
-        },
-    },
-    compoundVariants: [
-        {
-            action: 'primary',
-            variant: 'link',
-            class: 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
-        },
-        {
-            action: 'secondary',
-            variant: 'link',
-            class: 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
-        },
-        {
-            action: 'positive',
-            variant: 'link',
-            class: 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
-        },
-        {
-            action: 'negative',
-            variant: 'link',
-            class: 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
-        },
-        {
-            action: 'primary',
-            variant: 'outline',
-            class: 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
-        },
-        {
-            action: 'secondary',
-            variant: 'outline',
-            class: 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
-        },
-        {
-            action: 'positive',
-            variant: 'outline',
-            class: 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
-        },
-        {
-            action: 'negative',
-            variant: 'outline',
-            class: 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
-        },
-    ],
-});
-
-const buttonTextStyle = tva({
-    base: 'text-typography-0 font-semibold web:select-none',
-    parentVariants: {
-        action: {
-            primary: 'text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700',
-            secondary:
-                'text-typography-500 data-[hover=true]:text-typography-600 data-[active=true]:text-typography-700',
-            positive: 'text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700',
-            negative: 'text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700',
-        },
-        variant: {
-            link: 'data-[hover=true]:underline data-[active=true]:underline',
-            outline: '',
-            solid: 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
-        },
-        size: {
-            xs: 'text-xs',
-            sm: 'text-sm',
-            md: 'text-base',
-            lg: 'text-lg',
-            xl: 'text-xl',
-        },
-    },
-    parentCompoundVariants: [
-        {
-            variant: 'solid',
-            action: 'primary',
-            class: 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
-        },
-        {
-            variant: 'solid',
-            action: 'secondary',
-            class: 'text-typography-800 data-[hover=true]:text-typography-800 data-[active=true]:text-typography-800',
-        },
-        {
-            variant: 'solid',
-            action: 'positive',
-            class: 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
-        },
-        {
-            variant: 'solid',
-            action: 'negative',
-            class: 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
-        },
-        {
-            variant: 'outline',
-            action: 'primary',
-            class: 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
-        },
-        {
-            variant: 'outline',
-            action: 'secondary',
-            class: 'text-typography-500 data-[hover=true]:text-primary-600 data-[active=true]:text-typography-700',
-        },
-        {
-            variant: 'outline',
-            action: 'positive',
-            class: 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
-        },
-        {
-            variant: 'outline',
-            action: 'negative',
-            class: 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
-        },
-    ],
-});
-
-const buttonIconStyle = tva({
-    base: 'fill-none',
-    parentVariants: {
-        variant: {
-            link: 'data-[hover=true]:underline data-[active=true]:underline',
-            outline: '',
-            solid: 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
-        },
-        size: {
-            xs: 'h-3.5 w-3.5',
-            sm: 'h-4 w-4',
-            md: 'h-[18px] w-[18px]',
-            lg: 'h-[18px] w-[18px]',
-            xl: 'h-5 w-5',
-        },
-        action: {
-            primary: 'text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700',
-            secondary:
-                'text-typography-500 data-[hover=true]:text-typography-600 data-[active=true]:text-typography-700',
-            positive: 'text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700',
-
-            negative: 'text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700',
-        },
-    },
-    parentCompoundVariants: [
-        {
-            variant: 'solid',
-            action: 'primary',
-            class: 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
-        },
-        {
-            variant: 'solid',
-            action: 'secondary',
-            class: 'text-typography-800 data-[hover=true]:text-typography-800 data-[active=true]:text-typography-800',
-        },
-        {
-            variant: 'solid',
-            action: 'positive',
-            class: 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
-        },
-        {
-            variant: 'solid',
-            action: 'negative',
-            class: 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
-        },
-    ],
-});
-
-const buttonGroupStyle = tva({
-    base: '',
-    variants: {
-        space: {
-            xs: 'gap-1',
-            sm: 'gap-2',
-            md: 'gap-3',
-            lg: 'gap-4',
-            xl: 'gap-5',
-            '2xl': 'gap-6',
-            '3xl': 'gap-7',
-            '4xl': 'gap-8',
-        },
-        isAttached: {
-            true: 'gap-0',
-        },
-        flexDirection: {
-            row: 'flex-row',
-            column: 'flex-col',
-            'row-reverse': 'flex-row-reverse',
-            'column-reverse': 'flex-col-reverse',
-        },
-    },
-});
-
-type IButtonProps = Omit<React.ComponentPropsWithoutRef<typeof UIButton>, 'context'> &
-    VariantProps<typeof buttonStyle> & { className?: string };
-
-const Button = React.forwardRef<React.ElementRef<typeof UIButton>, IButtonProps>(
-    ({ className, variant = 'solid', size = 'md', action = 'primary', ...props }, ref) => {
-        return (
-            <UIButton
-                ref={ref}
-                {...props}
-                className={buttonStyle({ variant, size, action, class: className })}
-                context={{ variant, size, action }}
-            />
-        );
-    },
-);
-
-type IButtonTextProps = React.ComponentPropsWithoutRef<typeof UIButton.Text> &
-    VariantProps<typeof buttonTextStyle> & { className?: string };
-
-const ButtonText = React.forwardRef<React.ElementRef<typeof UIButton.Text>, IButtonTextProps>(
-    ({ className, variant, size, action, ...props }, ref) => {
-        const { variant: parentVariant, size: parentSize, action: parentAction } = useStyleContext(SCOPE);
-
-        return (
-            <UIButton.Text
-                ref={ref}
-                {...props}
-                className={buttonTextStyle({
-                    parentVariants: {
-                        variant: parentVariant,
-                        size: parentSize,
-                        action: parentAction,
-                    },
-                    variant,
-                    size,
-                    action,
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-const ButtonSpinner = UIButton.Spinner;
-
-type IButtonIcon = React.ComponentPropsWithoutRef<typeof UIButton.Icon> &
-    VariantProps<typeof buttonIconStyle> & {
-        className?: string | undefined;
-        as?: React.ElementType;
-        height?: number;
-        width?: number;
-    };
-
-const ButtonIcon = React.forwardRef<React.ElementRef<typeof UIButton.Icon>, IButtonIcon>(
-    ({ className, size, ...props }, ref) => {
-        const { variant: parentVariant, size: parentSize, action: parentAction } = useStyleContext(SCOPE);
-
-        if (typeof size === 'number') {
-            return <UIButton.Icon ref={ref} {...props} className={buttonIconStyle({ class: className })} size={size} />;
-        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
-            return <UIButton.Icon ref={ref} {...props} className={buttonIconStyle({ class: className })} />;
-        }
-        return (
-            <UIButton.Icon
-                {...props}
-                className={buttonIconStyle({
-                    parentVariants: {
-                        size: parentSize,
-                        variant: parentVariant,
-                        action: parentAction,
-                    },
-                    size,
-                    class: className,
-                })}
-                ref={ref}
-            />
-        );
-    },
-);
-
-type IButtonGroupProps = React.ComponentPropsWithoutRef<typeof UIButton.Group> & VariantProps<typeof buttonGroupStyle>;
-
-const ButtonGroup = React.forwardRef<React.ElementRef<typeof UIButton.Group>, IButtonGroupProps>(
-    ({ className, space = 'md', isAttached = false, flexDirection = 'column', ...props }, ref) => {
-        return (
-            <UIButton.Group
-                className={buttonGroupStyle({
-                    class: className,
-                    space,
-                    isAttached,
-                    flexDirection,
-                })}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-Button.displayName = 'Button';
-ButtonText.displayName = 'ButtonText';
-ButtonSpinner.displayName = 'ButtonSpinner';
-ButtonIcon.displayName = 'ButtonIcon';
-ButtonGroup.displayName = 'ButtonGroup';
-
-export { Button, ButtonText, ButtonSpinner, ButtonIcon, ButtonGroup };

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

@@ -1,86 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { createButton } from '@gluestack-ui/button';
-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 = 'BUTTON';
-
-const StyledButton = forwardRef<HTMLButtonElement, any>(({ onPress, onClick, disabled, ...props }, ref) => {
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-        if (onClick) {
-            onClick(e);
-        }
-        if (onPress) {
-            onPress(e);
-        }
-    };
-
-    return <button ref={ref} onClick={handleClick} disabled={disabled} {...props} />;
-});
-
-StyledButton.displayName = 'StyledButton';
-
-const buttonStyle = tva({
-    base: 'px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
-    variants: {
-        size: {
-            xs: 'px-2 py-1 text-xs',
-            sm: 'px-3 py-1.5 text-sm',
-            md: 'text-base',
-            lg: 'px-5 py-2.5 text-lg',
-        },
-        variant: {
-            solid: 'bg-blue-500 text-white hover:bg-blue-600',
-            outline: 'border border-blue-500 text-blue-500 hover:bg-blue-50',
-            ghost: 'text-blue-500 hover:bg-blue-50',
-            link: 'text-blue-500 hover:underline',
-        },
-        action: {
-            primary: 'bg-blue-500 text-white',
-            secondary: 'bg-gray-500 text-white',
-            positive: 'bg-green-500 text-white',
-            negative: 'bg-red-500 text-white',
-        },
-        state: {
-            loading: 'opacity-70 cursor-not-allowed',
-            disabled: 'opacity-50 cursor-not-allowed',
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'solid',
-        action: 'primary',
-    },
-});
-
-type IButtonProps = React.ComponentProps<typeof StyledButton> &
-    VariantProps<typeof buttonStyle> & {
-        className?: string;
-        onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-        isDisabled?: boolean;
-        isLoading?: boolean;
-    };
-
-const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
-    ({ className, size, variant, action, state, isDisabled, isLoading, ...props }, ref) => {
-        const buttonState = {
-            state: isLoading ? ('loading' as const) : isDisabled ? ('disabled' as const) : undefined,
-        };
-
-        return (
-            <StyledButton
-                ref={ref}
-                className={buttonStyle({ size, variant, action, ...buttonState, class: className })}
-                disabled={isDisabled || isLoading}
-                {...props}
-            />
-        );
-    },
-);
-
-Button.displayName = 'Button';
-
-export { Button };

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { View, ViewProps } from 'react-native';
-import { cardStyle } from './styles';
-
-type ICardProps = ViewProps & VariantProps<typeof cardStyle> & { className?: string };
-
-const Card = React.forwardRef<React.ElementRef<typeof View>, ICardProps>(
-    ({ className, size = 'md', variant = 'elevated', ...props }, ref) => {
-        return <View className={cardStyle({ size, variant, class: className })} {...props} ref={ref} />;
-    },
-);
-
-Card.displayName = 'Card';
-
-export { Card };

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { cardStyle } from './styles';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-type ICardProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof cardStyle>;
-
-const Card = React.forwardRef<HTMLDivElement, ICardProps>(
-    ({ className, size = 'md', variant = 'elevated', ...props }, ref) => {
-        return <div className={cardStyle({ size, variant, class: className })} {...props} ref={ref} />;
-    },
-);
-
-Card.displayName = 'Card';
-
-export { Card };

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

@@ -1,20 +0,0 @@
-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' : '';
-
-export const cardStyle = tva({
-    base: baseStyle,
-    variants: {
-        size: {
-            sm: 'p-3 rounded',
-            md: 'p-4 rounded-md',
-            lg: 'p-6 rounded-xl',
-        },
-        variant: {
-            elevated: 'bg-background-0',
-            outline: 'border border-outline-200 ',
-            ghost: 'rounded-none',
-            filled: 'bg-background-50',
-        },
-    },
-});

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

@@ -1,14 +0,0 @@
-import { View, ViewProps } from 'react-native';
-import React from 'react';
-import { centerStyle } from './styles';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-type ICenterProps = ViewProps & VariantProps<typeof centerStyle>;
-
-const Center = React.forwardRef<React.ElementRef<typeof View>, ICenterProps>(({ className, ...props }, ref) => {
-    return <View className={centerStyle({ class: className })} {...props} ref={ref} />;
-});
-
-Center.displayName = 'Center';
-
-export { Center };

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { centerStyle } from './styles';
-
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-type ICenterProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof centerStyle>;
-
-const Center = React.forwardRef<HTMLDivElement, ICenterProps>(({ className, ...props }, ref) => {
-    return <div className={centerStyle({ class: className })} {...props} ref={ref} />;
-});
-
-Center.displayName = 'Center';
-
-export { Center };

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

@@ -1,8 +0,0 @@
-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' : '';
-
-export const centerStyle = tva({
-    base: `justify-center items-center ${baseStyle}`,
-});