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

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

@@ -1,283 +0,0 @@
-'use client';
-import { createSlider } from '@gluestack-ui/slider';
-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';
-
-// Create styled components for web
-const StyledRoot = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, ref) => (
-    <div ref={ref} {...props} />
-));
-
-const StyledThumb = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, ref) => (
-    <div ref={ref} {...props} />
-));
-
-const StyledTrack = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, ref) => (
-    <div ref={ref} {...props} />
-));
-
-const StyledFilledTrack = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, ref) => (
-    <div ref={ref} {...props} />
-));
-
-const StyledThumbInteraction = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, ref) => (
-    <div ref={ref} {...props} />
-));
-
-const Root = withStyleContext(StyledRoot, SCOPE);
-export const UISlider = createSlider({
-    Root,
-    Thumb: StyledThumb,
-    Track: StyledTrack,
-    FilledTrack: StyledFilledTrack,
-    ThumbInteraction: StyledThumbInteraction,
-});
-
-// Remove problematic cssInterop for now as it's causing type issues
-// cssInterop(UISlider.Track, {
-//     target: false,
-//     nativeStyleToProp: {
-//         style: true,
-//     },
-// });
-
-const sliderStyle = tva({
-    base: 'justify-center items-center data-[disabled=true]:opacity-40 data-[disabled=true]: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 cursor-pointer data-[active=true]:outline data-[active=true]:outline-4 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',
-        },
-    },
-});
-
-interface BaseSliderProps {
-    className?: string;
-    size?: 'sm' | 'md' | 'lg';
-    orientation?: 'horizontal' | 'vertical';
-    isReversed?: boolean;
-    style?: React.CSSProperties;
-    children?: React.ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseDown?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseUp?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
-}
-
-type ISliderProps = React.ComponentProps<typeof UISlider> & VariantProps<typeof sliderStyle> & BaseSliderProps;
-
-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> &
-    BaseSliderProps;
-
-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> &
-    BaseSliderProps;
-
-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> &
-    BaseSliderProps;
-
-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/spinner/index.web.tsx

@@ -1,81 +0,0 @@
-'use client';
-import React, { forwardRef } 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 = 'SPINNER';
-
-const spinnerStyle = tva({
-    base: 'inline-block rounded-full border-[2px] border-t-transparent animate-spin',
-    variants: {
-        size: {
-            xs: 'h-3 w-3 border-[1px]',
-            sm: 'h-4 w-4 border-[1.5px]',
-            md: 'h-6 w-6 border-[2px]',
-            lg: 'h-8 w-8 border-[2.5px]',
-            xl: 'h-12 w-12 border-[3px]',
-        },
-        colorScheme: {
-            primary: 'border-blue-600',
-            success: 'border-green-600',
-            warning: 'border-yellow-600',
-            error: 'border-red-600',
-            light: 'border-white',
-            dark: 'border-gray-900',
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        colorScheme: 'primary',
-    },
-});
-
-type ISpinnerProps = React.ComponentProps<'div'> & {
-    size?: VariantProps<typeof spinnerStyle>['size'];
-    colorScheme?: VariantProps<typeof spinnerStyle>['colorScheme'];
-    label?: string;
-};
-
-const Spinner = forwardRef<HTMLDivElement, ISpinnerProps>(
-    ({ className, size, colorScheme, label = 'Loading...', ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                role="status"
-                aria-label={label}
-                className={spinnerStyle({ size, colorScheme, class: className })}
-                {...props}
-            >
-                <span className="sr-only">{label}</span>
-            </div>
-        );
-    },
-);
-
-Spinner.displayName = 'Spinner';
-
-export { Spinner };
-
-// Add keyframes for spin animation to your global CSS:
-const styles = `
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.animate-spin {
-  animation: spin 0.8s linear infinite;
-}
-`;
-
-if (typeof document !== 'undefined') {
-    const styleSheet = document.createElement('style');
-    styleSheet.textContent = styles;
-    document.head.appendChild(styleSheet);
-}

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

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

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

@@ -1,20 +0,0 @@
-'use client';
-import React from 'react';
-
-interface StatusBarProps {
-    animated?: boolean;
-    backgroundColor?: string;
-    barStyle?: 'default' | 'light-content' | 'dark-content';
-    hidden?: boolean;
-    networkActivityIndicatorVisible?: boolean;
-    showHideTransition?: 'fade' | 'slide';
-    translucent?: boolean;
-}
-
-const StatusBar = (_props: StatusBarProps): null => {
-    return null;
-};
-
-StatusBar.displayName = 'StatusBar';
-
-export { StatusBar };