@admin-layout/gluestack-ui-mobile 11.0.1-alpha.0 → 11.0.3-alpha.0

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

@@ -0,0 +1,353 @@
+'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/card/index.tsx

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,15 @@
+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

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,8 @@
+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}`,
+});

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

@@ -0,0 +1,192 @@
+'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/divider/index.tsx

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