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

package/src/components/ui/form-control/index.web.tsx

@@ -0,0 +1,451 @@
+'use client';
+import React from 'react';
+import { createFormControl } from '@gluestack-ui/form-control';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+
+const SCOPE = 'FORM_CONTROL';
+
+const formControlStyle = tva({
+    base: 'flex flex-col',
+    variants: {
+        size: {
+            sm: '',
+            md: '',
+            lg: '',
+        },
+    },
+});
+
+const formControlErrorIconStyle = tva({
+    base: 'text-error-700 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',
+        },
+    },
+});
+
+const formControlErrorStyle = tva({
+    base: 'flex flex-row justify-start items-center mt-1 gap-1',
+});
+
+const formControlErrorTextStyle = tva({
+    base: 'text-error-700',
+    variants: {
+        isTruncated: {
+            true: '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',
+        },
+    },
+});
+
+const formControlHelperStyle = tva({
+    base: 'flex flex-row justify-start items-center mt-1',
+});
+
+const formControlHelperTextStyle = tva({
+    base: 'text-typography-500',
+    variants: {
+        isTruncated: {
+            true: 'truncate',
+        },
+        bold: {
+            true: 'font-bold',
+        },
+        underline: {
+            true: 'underline',
+        },
+        strikeThrough: {
+            true: 'line-through',
+        },
+        size: {
+            '2xs': 'text-2xs',
+            xs: 'text-xs',
+            sm: 'text-xs',
+            md: 'text-sm',
+            lg: 'text-base',
+            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',
+        },
+    },
+});
+
+const formControlLabelStyle = tva({
+    base: 'flex flex-row justify-start items-center mb-1',
+});
+
+const formControlLabelTextStyle = tva({
+    base: 'font-medium text-typography-900',
+    variants: {
+        isTruncated: {
+            true: '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',
+        },
+    },
+});
+
+const formControlLabelAstrickStyle = tva({
+    base: 'font-medium text-typography-900',
+    variants: {
+        isTruncated: {
+            true: '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',
+        },
+    },
+});
+
+type IFormControlLabelAstrickProps = React.ComponentPropsWithoutRef<'span'> &
+    VariantProps<typeof formControlLabelAstrickStyle>;
+
+const FormControlLabelAstrick = React.forwardRef<HTMLSpanElement, IFormControlLabelAstrickProps>(
+    ({ className, ...props }, ref) => {
+        const { size: parentSize } = useStyleContext(SCOPE);
+
+        return (
+            <span
+                ref={ref}
+                className={formControlLabelAstrickStyle({
+                    parentVariants: { size: parentSize },
+                    class: className,
+                })}
+                {...props}
+            />
+        );
+    },
+);
+
+type FormControlErrorComponent = React.ForwardRefExoticComponent<
+    React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
+>;
+
+type FormControlErrorTextComponent = React.ForwardRefExoticComponent<
+    React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>
+>;
+
+type FormControlLabelComponent = React.ForwardRefExoticComponent<
+    React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>
+>;
+
+type FormControlLabelTextComponent = React.ForwardRefExoticComponent<
+    React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>
+>;
+
+type FormControlHelperComponent = React.ForwardRefExoticComponent<
+    React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
+>;
+
+type FormControlHelperTextComponent = React.ForwardRefExoticComponent<
+    React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>
+>;
+
+export const UIFormControl = createFormControl({
+    Root: withStyleContext('form' as any, SCOPE),
+    Error: 'div' as any as unknown as FormControlErrorComponent,
+    ErrorText: 'span' as any as unknown as FormControlErrorTextComponent,
+    ErrorIcon: UIIcon,
+    Label: 'label' as any as unknown as FormControlLabelComponent,
+    LabelText: 'span' as any as unknown as FormControlLabelTextComponent,
+    LabelAstrick: FormControlLabelAstrick,
+    Helper: 'div' as any as unknown as FormControlHelperComponent,
+    HelperText: 'span' as any as unknown as FormControlHelperTextComponent,
+});
+
+cssInterop(PrimitiveIcon, {
+    className: {
+        target: 'style',
+        nativeStyleToProp: {
+            height: true,
+            width: true,
+            fill: true,
+            color: true,
+            stroke: true,
+        },
+    },
+});
+
+type IFormControlProps = React.ComponentProps<typeof UIFormControl> & VariantProps<typeof formControlStyle>;
+
+const FormControl = React.forwardRef<React.ElementRef<typeof UIFormControl>, IFormControlProps>(
+    ({ className, size = 'md', ...props }, ref) => {
+        const contextValue = { size };
+        return (
+            <UIFormControl
+                ref={ref}
+                className={formControlStyle({ size, class: className })}
+                {...props}
+                data-context={JSON.stringify(contextValue)}
+            />
+        );
+    },
+);
+
+type IFormControlErrorProps = React.ComponentProps<typeof UIFormControl.Error> &
+    VariantProps<typeof formControlErrorStyle> &
+    React.HTMLAttributes<HTMLDivElement>;
+
+const FormControlError = React.forwardRef<HTMLDivElement, IFormControlErrorProps>(({ className, ...props }, ref) => {
+    return <UIFormControl.Error ref={ref as any} className={formControlErrorStyle({ class: className })} {...props} />;
+});
+
+type IFormControlErrorTextProps = React.ComponentProps<typeof UIFormControl.Error.Text> &
+    VariantProps<typeof formControlErrorTextStyle> &
+    React.HTMLAttributes<HTMLSpanElement>;
+
+const FormControlErrorText = React.forwardRef<HTMLSpanElement, IFormControlErrorTextProps>(
+    ({ className, size, ...props }, ref) => {
+        const { size: parentSize } = useStyleContext(SCOPE);
+        return (
+            <UIFormControl.Error.Text
+                ref={ref as any}
+                className={formControlErrorTextStyle({
+                    parentVariants: { size: parentSize },
+                    size,
+                    class: className,
+                })}
+                {...props}
+            />
+        );
+    },
+);
+
+type IFormControlErrorIconProps = React.ComponentProps<typeof UIFormControl.Error.Icon> &
+    VariantProps<typeof formControlErrorIconStyle> & {
+        height?: number;
+        width?: number;
+    };
+
+const FormControlErrorIcon = React.forwardRef<
+    React.ElementRef<typeof UIFormControl.Error.Icon>,
+    IFormControlErrorIconProps
+>(({ className, size, ...props }, ref) => {
+    const { size: parentSize } = useStyleContext(SCOPE);
+
+    if (typeof size === 'number') {
+        return (
+            <UIFormControl.Error.Icon
+                ref={ref}
+                {...props}
+                className={formControlErrorIconStyle({ class: className })}
+                size={size}
+            />
+        );
+    } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
+        return (
+            <UIFormControl.Error.Icon
+                ref={ref}
+                {...props}
+                className={formControlErrorIconStyle({ class: className })}
+            />
+        );
+    }
+    return (
+        <UIFormControl.Error.Icon
+            className={formControlErrorIconStyle({
+                parentVariants: { size: parentSize },
+                size,
+                class: className,
+            })}
+            {...props}
+        />
+    );
+});
+
+type IFormControlLabelProps = React.ComponentProps<typeof UIFormControl.Label> &
+    VariantProps<typeof formControlLabelStyle> &
+    React.HTMLAttributes<HTMLLabelElement>;
+
+const FormControlLabel = React.forwardRef<HTMLLabelElement, IFormControlLabelProps>(({ className, ...props }, ref) => {
+    return <UIFormControl.Label ref={ref as any} className={formControlLabelStyle({ class: className })} {...props} />;
+});
+
+type IFormControlLabelTextProps = React.ComponentProps<typeof UIFormControl.Label.Text> &
+    VariantProps<typeof formControlLabelTextStyle> &
+    React.HTMLAttributes<HTMLSpanElement>;
+
+const FormControlLabelText = React.forwardRef<HTMLSpanElement, IFormControlLabelTextProps>(
+    ({ className, size, ...props }, ref) => {
+        const { size: parentSize } = useStyleContext(SCOPE);
+        return (
+            <UIFormControl.Label.Text
+                ref={ref as any}
+                className={formControlLabelTextStyle({
+                    parentVariants: { size: parentSize },
+                    size,
+                    class: className,
+                })}
+                {...props}
+            />
+        );
+    },
+);
+
+type IFormControlHelperProps = React.ComponentProps<typeof UIFormControl.Helper> &
+    VariantProps<typeof formControlHelperStyle> &
+    React.HTMLAttributes<HTMLDivElement>;
+
+const FormControlHelper = React.forwardRef<HTMLDivElement, IFormControlHelperProps>(({ className, ...props }, ref) => {
+    return (
+        <UIFormControl.Helper
+            ref={ref as any}
+            className={formControlHelperStyle({
+                class: className,
+            })}
+            {...props}
+        />
+    );
+});
+
+type IFormControlHelperTextProps = React.ComponentProps<typeof UIFormControl.Helper.Text> &
+    VariantProps<typeof formControlHelperTextStyle> &
+    React.HTMLAttributes<HTMLSpanElement>;
+
+const FormControlHelperText = React.forwardRef<HTMLSpanElement, IFormControlHelperTextProps>(
+    ({ className, size, ...props }, ref) => {
+        const { size: parentSize } = useStyleContext(SCOPE);
+        return (
+            <UIFormControl.Helper.Text
+                ref={ref as any}
+                className={formControlHelperTextStyle({
+                    parentVariants: { size: parentSize },
+                    size,
+                    class: className,
+                })}
+                {...props}
+            />
+        );
+    },
+);
+
+FormControl.displayName = 'FormControl';
+FormControlError.displayName = 'FormControlError';
+FormControlErrorText.displayName = 'FormControlErrorText';
+FormControlErrorIcon.displayName = 'FormControlErrorIcon';
+FormControlLabel.displayName = 'FormControlLabel';
+FormControlLabelText.displayName = 'FormControlLabelText';
+FormControlLabelAstrick.displayName = 'FormControlLabelAstrick';
+FormControlHelper.displayName = 'FormControlHelper';
+FormControlHelperText.displayName = 'FormControlHelperText';
+
+export {
+    FormControl,
+    FormControlError,
+    FormControlErrorText,
+    FormControlErrorIcon,
+    FormControlLabel,
+    FormControlLabelText,
+    FormControlLabelAstrick,
+    FormControlHelper,
+    FormControlHelperText,
+};

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

@@ -0,0 +1,43 @@
+'use client';
+import React from 'react';
+import { createImage } from '@gluestack-ui/image';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const imageStyle = tva({
+    base: 'max-w-full',
+    variants: {
+        size: {
+            '2xs': 'h-6 w-6',
+            xs: 'h-10 w-10',
+            sm: 'h-16 w-16',
+            md: 'h-20 w-20',
+            lg: 'h-24 w-24',
+            xl: 'h-32 w-32',
+            '2xl': 'h-64 w-64',
+            full: 'h-full w-full',
+            none: '',
+        },
+    },
+});
+
+interface ImageBaseProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+    source?: { uri: string };
+}
+
+const ImgComponent = ({ source, ...props }: ImageBaseProps) => <img src={source?.uri || ''} {...props} />;
+
+ImgComponent.displayName = 'ImgComponent';
+
+const UIImage = createImage({ Root: ImgComponent });
+
+interface ImageProps extends VariantProps<typeof imageStyle>, ImageBaseProps {
+    className?: string;
+}
+
+const Image = ({ size = 'md', className, ...props }: ImageProps) => {
+    return <UIImage className={imageStyle({ size, class: className })} {...props} />;
+};
+
+Image.displayName = 'Image';
+export { Image };

package/src/components/ui/image-background/index.web.tsx

@@ -0,0 +1,43 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { clsx } from 'clsx';
+
+const imageBackgroundStyle = tva({
+    base: 'bg-no-repeat bg-center bg-cover',
+});
+
+type ImageBackgroundProps = React.HTMLAttributes<HTMLDivElement> & {
+    source: { uri: string } | number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
+    className?: string;
+};
+
+export const ImageBackground = forwardRef<HTMLDivElement, ImageBackgroundProps>(
+    ({ source, resizeMode = 'cover', className, style, children, ...props }, ref) => {
+        const imageUrl = typeof source === 'number' ? source : source.uri;
+        const backgroundSize = {
+            cover: 'cover',
+            contain: 'contain',
+            stretch: '100% 100%',
+            center: 'auto',
+        }[resizeMode];
+
+        return (
+            <div
+                ref={ref}
+                className={imageBackgroundStyle({ class: clsx(className) })}
+                style={{
+                    ...style,
+                    backgroundImage: `url(${imageUrl})`,
+                    backgroundSize,
+                }}
+                {...props}
+            >
+                {children}
+            </div>
+        );
+    },
+);
+
+ImageBackground.displayName = 'ImageBackground';

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

@@ -0,0 +1,80 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { createInput } from '@gluestack-ui/input';
+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 = 'INPUT';
+
+const StyledInput = forwardRef<HTMLInputElement, any>(
+    ({ onChangeText, onChange, secureTextEntry, placeholder, placeholderTextColor, ...props }, ref) => {
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            if (onChange) {
+                onChange(e);
+            }
+            if (onChangeText) {
+                onChangeText(e.target.value);
+            }
+        };
+
+        return (
+            <input
+                ref={ref}
+                type={secureTextEntry ? 'password' : 'text'}
+                placeholder={placeholder}
+                onChange={handleChange}
+                style={{
+                    ...props.style,
+                    '::placeholder': {
+                        color: placeholderTextColor,
+                    },
+                }}
+                {...props}
+            />
+        );
+    },
+);
+
+StyledInput.displayName = 'StyledInput';
+
+const inputStyle = tva({
+    base: 'px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+    variants: {
+        size: {
+            sm: 'text-sm h-8',
+            md: 'text-base h-10',
+            lg: 'text-lg h-12',
+        },
+        variant: {
+            outline: 'bg-transparent',
+            filled: 'bg-gray-100',
+            unstyled: '',
+        },
+        state: {
+            error: 'border-red-500 focus:ring-red-500',
+            success: 'border-green-500 focus:ring-green-500',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+    },
+});
+
+type IInputProps = React.ComponentProps<typeof StyledInput> &
+    VariantProps<typeof inputStyle> & {
+        className?: string;
+        onChangeText?: (text: string) => void;
+        secureTextEntry?: boolean;
+        placeholderTextColor?: string;
+    };
+
+const Input = React.forwardRef<HTMLInputElement, IInputProps>(({ className, size, variant, state, ...props }, ref) => {
+    return <StyledInput ref={ref} className={inputStyle({ size, variant, state, class: className })} {...props} />;
+});
+
+Input.displayName = 'Input';
+
+export { Input };

package/src/components/ui/input-accessory-view/index.web.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+
+interface InputAccessoryViewProps {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    backgroundColor?: string;
+    nativeID?: string;
+}
+
+export const InputAccessoryView = ({ children, style, backgroundColor, ...props }: InputAccessoryViewProps) => {
+    return (
+        <div
+            style={{
+                position: 'fixed',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                backgroundColor: backgroundColor || '#ffffff',
+                borderTopWidth: '1px',
+                borderTopStyle: 'solid',
+                borderTopColor: '#e5e5e5',
+                ...style,
+            }}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};

package/src/components/ui/keyboard-avoiding-view/index.web.tsx

@@ -0,0 +1,23 @@
+'use client';
+import React, { forwardRef } from 'react';
+
+interface KeyboardAvoidingViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    behavior?: 'height' | 'position' | 'padding';
+    keyboardVerticalOffset?: number;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+
+const KeyboardAvoidingView = forwardRef<HTMLDivElement, KeyboardAvoidingViewProps>(
+    ({ children, style, ...props }, ref) => {
+        return (
+            <div ref={ref} style={style} {...props}>
+                {children}
+            </div>
+        );
+    },
+);
+
+KeyboardAvoidingView.displayName = 'KeyboardAvoidingView';
+
+export { KeyboardAvoidingView };