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

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

@@ -1,192 +0,0 @@
-'use client';
-import React from 'react';
-import { createCheckbox } from '@gluestack-ui/checkbox';
-import { View, Pressable, Text, Platform } from 'react-native';
-import type { TextProps, ViewProps } from 'react-native';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { PrimitiveIcon, IPrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
-import { withStyleContext, useStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const IndicatorWrapper = React.forwardRef<React.ElementRef<typeof View>, ViewProps>(({ ...props }, ref) => {
-    return <View {...props} ref={ref} />;
-});
-
-const LabelWrapper = React.forwardRef<React.ElementRef<typeof Text>, TextProps>(({ ...props }, ref) => {
-    return <Text {...props} ref={ref} />;
-});
-
-const IconWrapper = React.forwardRef<React.ElementRef<typeof PrimitiveIcon>, IPrimitiveIcon>(({ ...props }, ref) => {
-    return <UIIcon {...props} ref={ref} />;
-});
-
-const SCOPE = 'CHECKBOX';
-const UICheckbox = createCheckbox({
-    // @ts-expect-error
-    Root: Platform.OS === 'web' ? withStyleContext(View, SCOPE) : withStyleContext(Pressable, SCOPE),
-    Group: View,
-    Icon: IconWrapper,
-    Label: LabelWrapper,
-    Indicator: IndicatorWrapper,
-});
-
-cssInterop(PrimitiveIcon, {
-    className: {
-        target: 'style',
-        nativeStyleToProp: {
-            height: true,
-            width: true,
-            fill: true,
-            color: 'classNameColor',
-            stroke: true,
-        },
-    },
-});
-
-const checkboxStyle = tva({
-    base: 'group/checkbox flex-row items-center justify-start web:cursor-pointer data-[disabled=true]:cursor-not-allowed',
-    variants: {
-        size: {
-            lg: 'gap-2',
-            md: 'gap-2',
-            sm: 'gap-1.5',
-        },
-    },
-});
-
-const checkboxIndicatorStyle = tva({
-    base: 'justify-center items-center border-outline-400 bg-transparent rounded web:data-[focus-visible=true]:outline-none web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-indicator-primary data-[checked=true]:bg-primary-600 data-[checked=true]:border-primary-600 data-[hover=true]:data-[checked=false]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[checked=true]:bg-primary-700 data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[checked=true]:data-[disabled=true]:border-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:bg-primary-600 data-[hover=true]:data-[checked=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[checked=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-700 data-[active=true]:data-[checked=true]:bg-primary-800 data-[active=true]:data-[checked=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40',
-    parentVariants: {
-        size: {
-            lg: 'w-6 h-6 border-[3px]',
-            md: 'w-5 h-5 border-2',
-            sm: 'w-4 h-4 border-2',
-        },
-    },
-});
-
-const checkboxLabelStyle = tva({
-    base: 'text-typography-600 data-[checked=true]:text-typography-900 data-[hover=true]:text-typography-900 data-[hover=true]:data-[checked=true]:text-typography-900 data-[hover=true]:data-[checked=true]:data-[disabled=true]:text-typography-900 data-[hover=true]:data-[disabled=true]:text-typography-400 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none',
-    parentVariants: {
-        size: {
-            lg: 'text-lg',
-            md: 'text-base',
-            sm: 'text-sm',
-        },
-    },
-});
-
-const checkboxIconStyle = tva({
-    base: 'text-typography-50 fill-none',
-
-    parentVariants: {
-        size: {
-            sm: 'h-3 w-3',
-            md: 'h-4 w-4',
-            lg: 'h-5 w-5',
-        },
-    },
-});
-
-const CheckboxGroup = UICheckbox.Group;
-
-type ICheckboxProps = React.ComponentPropsWithoutRef<typeof UICheckbox> & VariantProps<typeof checkboxStyle>;
-
-const Checkbox = React.forwardRef<React.ElementRef<typeof UICheckbox>, ICheckboxProps>(
-    ({ className, size = 'md', ...props }, ref) => {
-        return (
-            <UICheckbox
-                className={checkboxStyle({
-                    class: className,
-                    size,
-                })}
-                {...props}
-                context={{
-                    size,
-                }}
-                ref={ref}
-            />
-        );
-    },
-);
-
-type ICheckboxIndicatorProps = React.ComponentPropsWithoutRef<typeof UICheckbox.Indicator> &
-    VariantProps<typeof checkboxIndicatorStyle>;
-
-const CheckboxIndicator = React.forwardRef<React.ElementRef<typeof UICheckbox.Indicator>, ICheckboxIndicatorProps>(
-    ({ className, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        return (
-            <UICheckbox.Indicator
-                className={checkboxIndicatorStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    class: className,
-                })}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-type ICheckboxLabelProps = React.ComponentPropsWithoutRef<typeof UICheckbox.Label> &
-    VariantProps<typeof checkboxLabelStyle>;
-const CheckboxLabel = React.forwardRef<React.ElementRef<typeof UICheckbox.Label>, ICheckboxLabelProps>(
-    ({ className, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-        return (
-            <UICheckbox.Label
-                className={checkboxLabelStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    class: className,
-                })}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-type ICheckboxIconProps = React.ComponentPropsWithoutRef<typeof UICheckbox.Icon> &
-    VariantProps<typeof checkboxIconStyle>;
-
-const CheckboxIcon = React.forwardRef<React.ElementRef<typeof UICheckbox.Icon>, ICheckboxIconProps>(
-    ({ className, size, ...props }, ref) => {
-        const { size: parentSize } = useStyleContext(SCOPE);
-
-        if (typeof size === 'number') {
-            return (
-                <UICheckbox.Icon ref={ref} {...props} className={checkboxIconStyle({ class: className })} size={size} />
-            );
-        } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
-            return <UICheckbox.Icon ref={ref} {...props} className={checkboxIconStyle({ class: className })} />;
-        }
-
-        return (
-            <UICheckbox.Icon
-                className={checkboxIconStyle({
-                    parentVariants: {
-                        size: parentSize,
-                    },
-                    class: className,
-                    size,
-                })}
-                {...props}
-                ref={ref}
-            />
-        );
-    },
-);
-
-Checkbox.displayName = 'Checkbox';
-CheckboxIndicator.displayName = 'CheckboxIndicator';
-CheckboxLabel.displayName = 'CheckboxLabel';
-CheckboxIcon.displayName = 'CheckboxIcon';
-
-export { Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxGroup };

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

@@ -1,151 +0,0 @@
-'use client';
-import React, { forwardRef, createContext, useContext } 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 = 'CHECKBOX';
-
-const checkboxStyle = tva({
-    base: 'form-checkbox rounded transition duration-150 ease-in-out',
-    variants: {
-        size: {
-            sm: 'h-3 w-3',
-            md: 'h-4 w-4',
-            lg: 'h-5 w-5',
-        },
-        variant: {
-            outline: 'border-2',
-            solid: 'bg-blue-600 border-transparent',
-        },
-        status: {
-            error: 'border-red-500 focus:border-red-500 focus:ring-red-500',
-            success: 'border-green-500 focus:border-green-500 focus:ring-green-500',
-            warning: 'border-yellow-500 focus:border-yellow-500 focus:ring-yellow-500',
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'outline',
-    },
-});
-
-const labelStyle = tva({
-    base: 'ml-2 select-none',
-    variants: {
-        size: {
-            sm: 'text-sm',
-            md: 'text-base',
-            lg: 'text-lg',
-        },
-        disabled: {
-            true: 'opacity-50 cursor-not-allowed',
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-    },
-});
-
-type CheckboxGroupContextType = {
-    values?: string[];
-    onChange?: (values: string[]) => void;
-    size?: VariantProps<typeof checkboxStyle>['size'];
-    status?: VariantProps<typeof checkboxStyle>['status'];
-    variant?: VariantProps<typeof checkboxStyle>['variant'];
-};
-
-const CheckboxGroupContext = createContext<CheckboxGroupContextType>({});
-
-export const CheckboxGroup = forwardRef<HTMLDivElement, React.ComponentProps<'div'> & CheckboxGroupContextType>(
-    ({ values, onChange, size, status, variant, ...props }, ref) => {
-        return (
-            <CheckboxGroupContext.Provider value={{ values, onChange, size, status, variant }}>
-                <div ref={ref} role="group" {...props} />
-            </CheckboxGroupContext.Provider>
-        );
-    },
-);
-
-CheckboxGroup.displayName = 'CheckboxGroup';
-
-export const CheckboxLabel = forwardRef<
-    HTMLLabelElement,
-    React.ComponentProps<'label'> & {
-        size?: VariantProps<typeof labelStyle>['size'];
-        disabled?: boolean;
-    }
->(({ className, size, disabled, ...props }, ref) => {
-    return <label ref={ref} className={labelStyle({ size, disabled, class: className })} {...props} />;
-});
-
-CheckboxLabel.displayName = 'CheckboxLabel';
-
-export const CheckboxIcon = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
-    ({ className, children, ...props }, ref) => {
-        return (
-            <div ref={ref} className={`flex items-center justify-center ${className || ''}`} {...props}>
-                {children}
-            </div>
-        );
-    },
-);
-
-CheckboxIcon.displayName = 'CheckboxIcon';
-
-type ICheckboxProps = Omit<React.ComponentProps<'input'>, 'size'> & {
-    value: string;
-    size?: VariantProps<typeof checkboxStyle>['size'];
-    status?: VariantProps<typeof checkboxStyle>['status'];
-    variant?: VariantProps<typeof checkboxStyle>['variant'];
-};
-
-const Checkbox = forwardRef<HTMLInputElement, ICheckboxProps>(
-    (
-        {
-            className,
-            value,
-            size: itemSize,
-            status: itemStatus,
-            variant: itemVariant,
-            onChange,
-            checked: controlledChecked,
-            ...props
-        },
-        ref,
-    ) => {
-        const group = useContext(CheckboxGroupContext);
-        const size = itemSize || group.size;
-        const status = itemStatus || group.status;
-        const variant = itemVariant || group.variant;
-
-        const isChecked = group.values ? group.values.includes(value) : controlledChecked;
-
-        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            if (onChange) {
-                onChange(e);
-            }
-            if (group.onChange && group.values) {
-                const newValues = e.target.checked ? [...group.values, value] : group.values.filter((v) => v !== value);
-                group.onChange(newValues);
-            }
-        };
-
-        return (
-            <input
-                ref={ref}
-                type="checkbox"
-                value={value}
-                checked={isChecked}
-                onChange={handleChange}
-                className={checkboxStyle({ size, status, variant, class: className })}
-                {...props}
-            />
-        );
-    },
-);
-
-Checkbox.displayName = 'Checkbox';
-
-export { Checkbox };

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

@@ -1,38 +0,0 @@
-'use client';
-import React from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { Platform, View } from 'react-native';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const dividerStyle = tva({
-    base: 'bg-background-200',
-    variants: {
-        orientation: {
-            vertical: 'w-px h-full',
-            horizontal: 'h-px w-full',
-        },
-    },
-});
-
-type IUIDividerProps = React.ComponentPropsWithoutRef<typeof View> & VariantProps<typeof dividerStyle>;
-
-const Divider = React.forwardRef<React.ElementRef<typeof View>, IUIDividerProps>(
-    ({ className, orientation = 'horizontal', ...props }, ref) => {
-        return (
-            <View
-                ref={ref}
-                {...props}
-                aria-orientation={orientation}
-                role={Platform.OS === 'web' ? 'separator' : undefined}
-                className={dividerStyle({
-                    orientation,
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-Divider.displayName = 'Divider';
-
-export { Divider };

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

@@ -1,37 +0,0 @@
-'use client';
-import React from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const dividerStyle = tva({
-    base: 'bg-background-200',
-    variants: {
-        orientation: {
-            vertical: 'w-px h-full',
-            horizontal: 'h-px w-full',
-        },
-    },
-});
-
-type IUIDividerProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof dividerStyle>;
-
-const Divider = React.forwardRef<HTMLDivElement, IUIDividerProps>(
-    ({ className, orientation = 'horizontal', ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                {...props}
-                aria-orientation={orientation}
-                role="separator"
-                className={dividerStyle({
-                    orientation,
-                    class: className,
-                })}
-            />
-        );
-    },
-);
-
-Divider.displayName = 'Divider';
-
-export { Divider };