@cdx-ui/primitives 0.0.1-beta.65 → 0.0.1-beta.67

package/src/avatar/AvatarRoot.tsx

@@ -0,0 +1,39 @@
+import type React from 'react';
+import { forwardRef, useMemo, useState } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Slot } from '../slot';
+import { AvatarProvider } from './context';
+import type { IAvatarProps, IAvatarContextValue } from './types';
+
+export interface AvatarRootProps extends IAvatarProps {
+  asChild?: boolean;
+}
+
+export const AvatarRoot = forwardRef<React.ComponentRef<typeof View>, AvatarRootProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageError, setImageError] = useState(false);
+
+    const contextValue = useMemo<IAvatarContextValue>(
+      () => ({ imageLoaded, imageError, setImageLoaded, setImageError }),
+      [imageLoaded, imageError],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <AvatarProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          role={props.role || 'img'}
+          accessibilityRole="image"
+          {...(props as ViewProps)}
+        >
+          {children}
+        </Comp>
+      </AvatarProvider>
+    );
+  },
+);
+
+AvatarRoot.displayName = 'AvatarRoot';

package/src/avatar/index.ts

@@ -1,43 +1,3 @@
-import type React from 'react';
-import { createAvatarBadge } from './createAvatarBadge';
-import { createAvatarIcon } from './createAvatarIcon';
-import { createAvatarText } from './createAvatarText';
-import { createAvatarImage } from './createAvatarImage';
-import { createAvatarRoot } from './createAvatarRoot';
-import type { IAvatarComponentType } from './types';
-
-export type {
-  IAvatarBadgeProps,
-  IAvatarComponentType,
-  IAvatarIconProps,
-  IAvatarTextProps,
-  IAvatarImageProps,
-  IAvatarProps,
-} from './types';
-
-export function createAvatar<Root, Image, Text, Icon, Badge>(BaseComponents: {
-  Root: React.ComponentType<Root>;
-  Image: React.ComponentType<Image>;
-  Text: React.ComponentType<Text>;
-  Icon: React.ComponentType<Icon>;
-  Badge: React.ComponentType<Badge>;
-}) {
-  const Avatar = createAvatarRoot(BaseComponents.Root);
-  const AvatarImage = createAvatarImage(BaseComponents.Image);
-  const Text = createAvatarText(BaseComponents.Text);
-  const AvatarIcon = createAvatarIcon(BaseComponents.Icon);
-  const Badge = createAvatarBadge(BaseComponents.Badge);
-
-  Avatar.displayName = 'AvatarPrimitive';
-  AvatarImage.displayName = 'AvatarPrimitive.Image';
-  Text.displayName = 'AvatarPrimitive.Text';
-  AvatarIcon.displayName = 'AvatarPrimitive.Icon';
-  Badge.displayName = 'AvatarPrimitive.Badge';
-
-  return Object.assign(Avatar, {
-    Image: AvatarImage,
-    Text,
-    Icon: AvatarIcon,
-    Badge,
-  }) as unknown as IAvatarComponentType<Root, Image, Text, Icon, Badge>;
-}
+export type { IAvatarContextValue, IAvatarImageProps, IAvatarProps } from './types';
+export { useAvatarContext } from './context';
+export { AvatarRoot, type AvatarRootProps } from './AvatarRoot';

package/src/avatar/types.ts

@@ -1,4 +1,4 @@
-import type { ImageProps, TextProps, ViewProps } from 'react-native';
+import type { ImageProps, ViewProps } from 'react-native';
 
 // =============================================================================
 // AVATAR ROOT
@@ -19,31 +19,6 @@ export interface IAvatarImageProps extends Omit<ImageProps, 'source'> {
   alt?: string;
 }
 
-// =============================================================================
-// AVATAR FALLBACK TEXT
-// =============================================================================
-
-export interface IAvatarTextProps extends TextProps {
-  /** Full name — initials will be derived automatically */
-  children?: React.ReactNode;
-}
-
-// =============================================================================
-// AVATAR ICON (fallback icon — hidden when image loads)
-// =============================================================================
-
-export interface IAvatarIconProps extends ViewProps {
-  children?: React.ReactNode;
-}
-
-// =============================================================================
-// AVATAR BADGE
-// =============================================================================
-
-export interface IAvatarBadgeProps extends ViewProps {
-  children?: React.ReactNode;
-}
-
 // =============================================================================
 // CONTEXT
 // =============================================================================
@@ -54,24 +29,3 @@ export interface IAvatarContextValue {
   setImageLoaded: (loaded: boolean) => void;
   setImageError: (error: boolean) => void;
 }
-
-// =============================================================================
-// COMPOUND COMPONENT TYPE
-// =============================================================================
-
-export type IAvatarComponentType<Root, Image, Text, Icon, Badge> = React.ForwardRefExoticComponent<
-  React.RefAttributes<Root> & React.PropsWithoutRef<Root> & IAvatarProps
-> & {
-  Image: React.ForwardRefExoticComponent<
-    React.RefAttributes<Image> & React.PropsWithoutRef<Image> & IAvatarImageProps
-  >;
-  Text: React.ForwardRefExoticComponent<
-    React.RefAttributes<Text> & React.PropsWithoutRef<Text> & IAvatarTextProps
-  >;
-  Icon: React.ForwardRefExoticComponent<
-    React.RefAttributes<Icon> & React.PropsWithoutRef<Icon> & IAvatarIconProps
-  >;
-  Badge: React.ForwardRefExoticComponent<
-    React.RefAttributes<Badge> & React.PropsWithoutRef<Badge> & IAvatarBadgeProps
-  >;
-};

package/src/button/ButtonRoot.tsx

@@ -0,0 +1,115 @@
+import type React from 'react';
+import { forwardRef, useMemo } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import type { InteractionState } from '../types';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ButtonProvider } from './context';
+import type { IButtonProps } from './types';
+
+export interface ButtonRootProps extends Omit<IButtonProps, 'children'> {
+  asChild?: boolean;
+  children?: ((state: InteractionState) => React.ReactNode) | React.ReactNode;
+}
+
+export const ButtonRoot = forwardRef<React.ComponentRef<typeof Pressable>, ButtonRootProps>(
+  (
+    {
+      asChild,
+      children,
+      isDisabled,
+      isHovered: isHoveredProp,
+      isActive: isActiveProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isFocused, focusProps } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+    const { pressProps: pressableProps, isPressed: isActive } = usePress({
+      isDisabled,
+    });
+    const { isHovered, hoverProps } = useHover();
+
+    const contextValue = useMemo(() => {
+      return {
+        hover: isHoveredProp || isHovered,
+        focus: isFocusedProp || isFocused,
+        active: isActiveProp || isActive,
+        disabled: !!isDisabled,
+        focusVisible: isFocusVisibleProp || isFocusVisible,
+      };
+    }, [
+      isHovered,
+      isHoveredProp,
+      isFocused,
+      isFocusedProp,
+      isActive,
+      isActiveProp,
+      isDisabled,
+      isFocusVisible,
+      isFocusVisibleProp,
+    ]);
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <ButtonProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          role={props?.role || 'button'}
+          disabled={isDisabled}
+          {...(props as PressableProps)}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              hover: isHoveredProp || isHovered,
+              focus: isFocusedProp || isFocused,
+              active: isActiveProp || isActive,
+              disabled: !!isDisabled,
+              focusVisible: isFocusVisibleProp || isFocusVisible,
+            }),
+          )}
+          onPressIn={composeEventHandlers(props?.onPressIn, pressableProps.onPressIn)}
+          onPressOut={composeEventHandlers(props?.onPressOut, pressableProps.onPressOut)}
+          onHoverIn={composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(
+              props?.onFocus as (...args: unknown[]) => unknown,
+              focusProps.onFocus,
+            ),
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(
+              props?.onBlur as (...args: unknown[]) => unknown,
+              focusProps.onBlur,
+            ),
+            focusRingProps.onBlur,
+          )}
+        >
+          {typeof children === 'function'
+            ? children({
+                hover: isHoveredProp || isHovered,
+                focus: isFocusedProp || isFocused,
+                active: isActiveProp || isActive,
+                disabled: !!isDisabled,
+                focusVisible: isFocusVisibleProp || isFocusVisible,
+              })
+            : children}
+        </Comp>
+      </ButtonProvider>
+    );
+  },
+);
+
+ButtonRoot.displayName = 'ButtonRoot';

package/src/button/index.ts

@@ -0,0 +1,3 @@
+export type { IButtonProps, InterfaceButtonProps } from './types';
+export { useButtonContext } from './context';
+export { ButtonRoot, type ButtonRootProps } from './ButtonRoot';

package/src/button/types.ts

@@ -1,5 +1,4 @@
-import type { PropsWithoutRef, ReactElement, ReactNode, RefAttributes } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
+import type { PressableProps } from 'react-native';
 
 export interface InterfaceButtonProps extends PressableProps {
   /**
@@ -24,54 +23,4 @@ export interface InterfaceButtonProps extends PressableProps {
   isDisabled?: boolean;
 }
 
-export interface IButtonGroupProps {
-  /**
-   * The direction of the Stack Items.
-   * @default row
-   */
-  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-  /**
-   *
-   */
-  children: ReactElement | ReactElement[];
-
-  /**
-   * If true, the button will be disabled.
-   */
-  isDisabled?: boolean;
-  /**
-   * If true, button will be atttached together.
-   */
-  isAttached?: boolean;
-  reversed?: boolean;
-  isReversed?: boolean;
-}
-
-export type IButtonComponentType<
-  ButtonProps,
-  GroupProps,
-  SpinnerProps,
-  TextProps,
-  IconProps,
-  ButtonRef = unknown,
-  TextRef = unknown,
-> = React.ForwardRefExoticComponent<
-  PropsWithoutRef<ButtonProps & IButtonProps> & RefAttributes<ButtonRef>
-> & {
-  Group: React.ForwardRefExoticComponent<
-    RefAttributes<unknown> & PropsWithoutRef<GroupProps & IButtonGroupProps>
-  >;
-  Spinner: React.ForwardRefExoticComponent<
-    PropsWithoutRef<SpinnerProps> & React.RefAttributes<unknown>
-  >;
-  Text: React.ForwardRefExoticComponent<React.RefAttributes<TextRef> & PropsWithoutRef<TextProps>>;
-  Icon: React.ForwardRefExoticComponent<React.RefAttributes<unknown> & PropsWithoutRef<IconProps>>;
-};
-
-export interface IButtonTextProps extends ViewProps {
-  children?: ReactNode;
-}
-
-export interface IButtonSpinnerProps extends ViewProps {}
-
 export type IButtonProps = InterfaceButtonProps;

package/src/checkbox/CheckboxGroup.tsx

@@ -0,0 +1,50 @@
+import { forwardRef, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { useCheckboxGroup } from '@react-native-aria/checkbox';
+import { useCheckboxGroupState } from '@react-stately/checkbox';
+import { Slot } from '../slot';
+import { CheckboxGroupContext } from './context';
+import type { ICheckboxGroupProps } from './types';
+
+export interface CheckboxGroupRootProps extends ICheckboxGroupProps {
+  asChild?: boolean;
+  className?: string;
+  style?: ViewProps['style'];
+}
+
+export const CheckboxGroup = forwardRef<View, CheckboxGroupRootProps>(
+  ({ asChild, children, className, style, ...props }, ref) => {
+    const state = useCheckboxGroupState({
+      ...props,
+      validationState: props.isInvalid ? 'invalid' : 'valid',
+    });
+
+    const { groupProps } = useCheckboxGroup(
+      {
+        ...props,
+        'aria-label': props['aria-label'],
+      },
+      state,
+    );
+
+    const formControlContext = useFormControlContext();
+
+    const contextValue = useMemo(
+      () => ({ state: { ...formControlContext, ...state } }),
+      [formControlContext, state],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <CheckboxGroupContext.Provider value={contextValue}>
+        <Comp {...groupProps} className={className} style={style} ref={ref}>
+          {children}
+        </Comp>
+      </CheckboxGroupContext.Provider>
+    );
+  },
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';

package/src/checkbox/CheckboxRoot.tsx

@@ -0,0 +1,102 @@
+import { forwardRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { CheckboxProvider } from './context';
+import type { ICheckboxProps, ICheckboxContextValue } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+export interface CheckboxRootProps extends ICheckboxProps {
+  asChild?: boolean;
+}
+
+export const CheckboxRoot = forwardRef<React.ComponentRef<typeof Pressable>, CheckboxRootProps>(
+  (
+    { asChild, onPressIn, onPressOut, onHoverIn, onHoverOut, onFocus, onBlur, children, ...props },
+    ref,
+  ) => {
+    const {
+      isHovered: isHoveredProp,
+      isChecked: isCheckedProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isPressed: isPressedProp,
+      isFocused: isFocusedProp,
+      isIndeterminate: isIndeterminateProp,
+      isFocusVisible: isFocusVisibleProp,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      isIndeterminate,
+      groupItemInputProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      hoverProps,
+      mergedRef,
+    } = useCheckboxRoot(props, ref);
+
+    const { focusProps, isFocused } = useFocus();
+
+    const { pressProps, isPressed } = usePress({
+      isDisabled: isDisabled || isDisabledProp,
+    });
+
+    const contextValue: ICheckboxContextValue = {
+      isChecked: isChecked || isCheckedProp,
+      isDisabled: isDisabled || isDisabledProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isPressed: isPressed || isPressedProp,
+      isFocused: isFocused || isFocusedProp,
+      isIndeterminate: isIndeterminate || isIndeterminateProp,
+      isFocusVisible: isFocusVisibleProp,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <CheckboxProvider value={contextValue}>
+        <Comp
+          disabled={isDisabled || isDisabledProp}
+          {...(combinedProps as PressableProps)}
+          {...groupItemInputProps}
+          ref={mergedRef}
+          role="checkbox"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              checked: isChecked || isCheckedProp,
+              disabled: isDisabled || isDisabledProp,
+              hover: isHovered || isHoveredProp,
+              invalid: isInvalid || isInvalidProp,
+              readonly: isReadOnly || isReadOnlyProp,
+              active: isPressed,
+              focus: isFocused,
+              indeterminate: isIndeterminate || isIndeterminateProp,
+              focusVisible: isFocusVisibleProp,
+            }),
+          )}
+          onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(composeEventHandlers(onFocus, focusProps.onFocus))}
+          onBlur={composeEventHandlers(composeEventHandlers(onBlur, focusProps.onBlur))}
+        >
+          {children}
+        </Comp>
+      </CheckboxProvider>
+    );
+  },
+);
+
+CheckboxRoot.displayName = 'CheckboxRoot';

package/src/checkbox/CheckboxRoot.web.tsx

@@ -0,0 +1,92 @@
+import { forwardRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useFocusRing } from '@react-native-aria/focus';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { CheckboxProvider } from './context';
+import type { ICheckboxProps, ICheckboxContextValue } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+export interface CheckboxRootProps extends ICheckboxProps {
+  asChild?: boolean;
+}
+
+export const CheckboxRoot = forwardRef<React.ComponentRef<typeof Pressable>, CheckboxRootProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const {
+      isHovered: isHoveredProp,
+      isFocusVisible: isFocusVisibleProp,
+      isChecked: isCheckedProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isIndeterminate: isIndeterminateProp,
+      isFocused,
+      isPressed,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      isIndeterminate,
+      groupItemInputProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      mergedRef,
+      inputRef,
+    } = useCheckboxRoot(props, ref, { useInputRefForAria: true });
+
+    const { focusProps, isFocusVisible } = useFocusRing();
+
+    const contextValue: ICheckboxContextValue = {
+      isChecked: isChecked || isCheckedProp,
+      isDisabled: isDisabled || isDisabledProp,
+      isFocusVisible: isFocusVisible || isFocusVisibleProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isIndeterminate: isIndeterminate || isIndeterminateProp,
+      isPressed,
+      isFocused,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <CheckboxProvider value={contextValue}>
+        <Comp
+          {...(combinedProps as PressableProps)}
+          ref={mergedRef}
+          tabIndex={-1}
+          role="label"
+          // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
+          accessibilityRole="label"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              checked: isChecked || isCheckedProp,
+              disabled: isDisabled || isDisabledProp,
+              hover: isHovered || isHoveredProp,
+              invalid: isInvalid || isInvalidProp,
+              readonly: isReadOnly || isReadOnlyProp,
+              active: isPressed,
+              focus: isFocused,
+              indeterminate: isIndeterminate || isIndeterminateProp,
+              focusVisible: isFocusVisible,
+            }),
+          )}
+        >
+          <VisuallyHidden>
+            <input {...groupItemInputProps} {...focusProps} ref={inputRef} />
+          </VisuallyHidden>
+          {children}
+        </Comp>
+      </CheckboxProvider>
+    );
+  },
+);
+
+CheckboxRoot.displayName = 'CheckboxRoot';

package/src/checkbox/index.ts

@@ -1,43 +1,5 @@
-import type React from 'react';
-import { createCheckboxGroup } from './createCheckboxGroup';
-import { createCheckboxIcon } from './createCheckboxIcon';
-import { createCheckboxIndicator } from './createCheckboxIndicator';
-import { createCheckboxLabel } from './createCheckboxLabel';
-import { createCheckboxRoot } from './createCheckboxRoot';
-import type { ICheckboxComponentType } from './types';
+export type { ICheckboxContextValue, ICheckboxGroupProps, ICheckboxProps } from './types';
 
-export type {
-  ICheckboxComponentType,
-  ICheckboxGroupProps,
-  ICheckboxIconProps,
-  ICheckboxIndicatorProps,
-  ICheckboxLabelProps,
-  ICheckboxProps,
-} from './types';
-
-export function createCheckbox<Root, Indicator, Icon, Label, Group>(BaseComponents: {
-  Root: React.ComponentType<Root>;
-  Indicator: React.ComponentType<Indicator>;
-  Icon: React.ComponentType<Icon>;
-  Label: React.ComponentType<Label>;
-  Group: React.ComponentType<Group>;
-}) {
-  const Checkbox = createCheckboxRoot(BaseComponents.Root);
-  const Indicator = createCheckboxIndicator(BaseComponents.Indicator);
-  const Icon = createCheckboxIcon(BaseComponents.Icon);
-  const Label = createCheckboxLabel(BaseComponents.Label);
-  const Group = createCheckboxGroup(BaseComponents.Group);
-
-  Checkbox.displayName = 'CheckboxPrimitive';
-  Indicator.displayName = 'CheckboxPrimitive.Indicator';
-  Icon.displayName = 'CheckboxPrimitive.Icon';
-  Label.displayName = 'CheckboxPrimitive.Label';
-  Group.displayName = 'CheckboxPrimitive.Group';
-
-  return Object.assign(Checkbox, {
-    Indicator,
-    Icon,
-    Label,
-    Group,
-  }) as ICheckboxComponentType<Root, Indicator, Icon, Label, Group>;
-}
+export { useCheckboxContext } from './context';
+export { CheckboxRoot, type CheckboxRootProps } from './CheckboxRoot';
+export { CheckboxGroup, type CheckboxGroupRootProps } from './CheckboxGroup';

package/src/checkbox/types.ts

@@ -1,4 +1,5 @@
 import type { PressableProps } from 'react-native';
+
 export interface InterfaceCheckbox extends PressableProps {
   value: string;
   onChange?: (isSelected: boolean) => void;
@@ -27,38 +28,6 @@ export interface ICheckboxGroupProps {
   'aria-label'?: string;
 }
 
-export type ICheckboxComponentType<Root, Indicator, Icon, Label, Group> =
-  React.ForwardRefExoticComponent<
-    React.RefAttributes<Root> & React.PropsWithoutRef<Root> & InterfaceCheckbox
-  > & {
-    Indicator: React.ForwardRefExoticComponent<
-      React.RefAttributes<Indicator> & React.PropsWithoutRef<Indicator> & ICheckboxIndicatorProps
-    >;
-    Icon: React.ForwardRefExoticComponent<
-      React.RefAttributes<Icon> & React.PropsWithoutRef<Icon> & ICheckboxIconProps
-    >;
-    Label: React.ForwardRefExoticComponent<
-      React.RefAttributes<Label> & React.PropsWithoutRef<Label> & ICheckboxLabelProps
-    >;
-    Group: React.ForwardRefExoticComponent<
-      React.RefAttributes<Group> & React.PropsWithoutRef<Group> & ICheckboxGroupProps
-    >;
-  };
-
-export interface ICheckboxIndicatorProps {
-  children?: React.ReactNode;
-}
-
-export interface ICheckboxIconProps {
-  children?: React.ReactNode;
-  /** Render the icon even when unchecked */
-  forceMount?: boolean;
-}
-
-export interface ICheckboxLabelProps {
-  children?: React.ReactNode;
-}
-
 export type ICheckboxProps = InterfaceCheckbox;
 
 export interface ICheckboxContextValue {