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

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

@@ -0,0 +1,283 @@
+'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.web.tsx

@@ -0,0 +1,81 @@
+'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.web.tsx

@@ -0,0 +1,20 @@
+'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 };

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

@@ -0,0 +1,44 @@
+'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/tabs/index.web.tsx

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