@cdx-ui/primitives 0.0.1-alpha.1 → 0.0.1-alpha.10

package/lib/typescript/select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/select/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/select/types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/switch/createSwitchRoot.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const createSwitchRoot: <T, R = unknown>(BaseSwitch: React.ComponentType<T>) => React.ForwardRefExoticComponent<import("./types").IInterfaceSwitchProps & React.RefAttributes<R>>;
+//# sourceMappingURL=createSwitchRoot.d.ts.map

package/lib/typescript/switch/createSwitchRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSwitchRoot.d.ts","sourceRoot":"","sources":["../../../src/switch/createSwitchRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAS1C,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,YAAY,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,sGA8DhF,CAAC"}

package/lib/typescript/switch/index.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { ISwitchComponentType } from './types';
+export type { ISwitchProps, ISwitchComponentType, IInterfaceSwitchProps } from './types';
+export declare function createSwitch<T, R = unknown>({ Root, }: {
+    Root: React.ComponentType<T>;
+}): ISwitchComponentType<T, R>;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,YAAY,EAAE,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEzF,wBAAgB,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,EAC3C,IAAI,GACL,EAAE;IACD,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;CAC9B,GAAG,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAK7B"}

package/lib/typescript/switch/types.d.ts

@@ -0,0 +1,38 @@
+import type React from 'react';
+export interface IInterfaceSwitchProps {
+    /**
+     * Callback invoked when the switch value changes.
+     */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * If true, set the Switch to the checked state.
+     */
+    isChecked?: boolean;
+    /**
+     * The current value of the switch.
+     */
+    value?: boolean;
+    /**
+     * If true, the switch will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * If true, the switch will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the checkbox will be initially checked.
+     */
+    defaultValue?: boolean;
+    /**
+     * If true, set the switch to the invalid state.
+     */
+    isInvalid?: boolean;
+    /**
+     * If true, the switch will be hovered.
+     */
+    isHovered?: boolean;
+}
+export type ISwitchComponentType<T, R = unknown> = React.ForwardRefExoticComponent<React.PropsWithoutRef<T & IInterfaceSwitchProps> & React.RefAttributes<R>>;
+export type ISwitchProps = IInterfaceSwitchProps;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/switch/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,oBAAoB,CAAC,CAAC,EAAE,CAAC,GAAG,OAAO,IAAI,KAAK,CAAC,yBAAyB,CAChF,KAAK,CAAC,eAAe,CAAC,CAAC,GAAG,qBAAqB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAC1E,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC"}

package/lib/typescript/types.d.ts

@@ -0,0 +1,8 @@
+export interface InteractionState {
+    hover: boolean;
+    focus: boolean;
+    active: boolean;
+    disabled: boolean;
+    focusVisible: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;CACvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/primitives",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.10",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -9,7 +9,6 @@
   "exports": {
     ".": {
       "react-native": "./src/index.ts",
-      "source": "./src/index.ts",
       "types": "./lib/typescript/index.d.ts",
       "import": "./lib/module/index.js",
       "require": "./lib/commonjs/index.js",
@@ -30,26 +29,30 @@
     ]
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-native": ">=0.74.0",
-    "react-native-web": ">=0.19.0",
-    "react-dom": ">=18.0.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-web": ">=0.19.0"
   },
   "peerDependenciesMeta": {
     "react-native": {
       "optional": true
     },
-    "react-native-web": {
+    "react-native-reanimated": {
       "optional": true
     },
-    "react-dom": {
+    "react-native-web": {
       "optional": true
     }
   },
   "dependencies": {
+    "@react-aria/visually-hidden": "3.8.30",
+    "@react-native-aria/checkbox": "0.2.10",
     "@react-native-aria/focus": "^0.2.9",
     "@react-native-aria/interactions": "^0.2.16",
-    "@cdx-ui/utils": "0.0.1-alpha.1"
+    "@react-stately/checkbox": "3.7.4",
+    "@react-stately/toggle": "3.9.4",
+    "@cdx-ui/utils": "0.0.1-alpha.10"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/button/context.tsx

@@ -1,4 +1,4 @@
 import { createContext } from '@cdx-ui/utils';
-import type { InteractionState } from './types';
+import type { InteractionState } from '../types';
 
 export const [ButtonProvider, useButtonContext] = createContext<InteractionState>('ButtonContext');

package/src/button/createButtonRoot.tsx

@@ -3,9 +3,10 @@ import { forwardRef, useMemo } from 'react';
 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 { dataAttributes } from '../utils/dataAttributes';
 import { ButtonProvider } from './context';
-import type { IButtonProps, InteractionState } from './types';
+import type { IButtonProps } from './types';
 
 export const createButtonRoot = <T,>(BaseButton: React.ComponentType<T>) =>
   forwardRef(
@@ -37,7 +38,7 @@ export const createButtonRoot = <T,>(BaseButton: React.ComponentType<T>) =>
           hover: isHoveredProp || isHovered,
           focus: isFocusedProp || isFocused,
           active: isActiveProp || isActive,
-          disabled: isDisabled,
+          disabled: !!isDisabled,
           focusVisible: isFocusVisibleProp || isFocusVisible,
         };
       }, [
@@ -61,7 +62,7 @@ export const createButtonRoot = <T,>(BaseButton: React.ComponentType<T>) =>
               hover: isHoveredProp || isHovered,
               focus: isFocusedProp || isFocused,
               active: isActiveProp || isActive,
-              disabled: isDisabled,
+              disabled: !!isDisabled,
               focusVisible: isFocusVisibleProp || isFocusVisible,
             })}
             disabled={isDisabled}
@@ -90,7 +91,7 @@ export const createButtonRoot = <T,>(BaseButton: React.ComponentType<T>) =>
                   hover: isHoveredProp || isHovered,
                   focus: isFocusedProp || isFocused,
                   active: isActiveProp || isActive,
-                  disabled: isDisabled,
+                  disabled: !!isDisabled,
                   focusVisible: isFocusVisibleProp || isFocusVisible,
                 })
               : children}

package/src/button/types.ts

@@ -1,14 +1,6 @@
 import type { PropsWithoutRef, ReactElement, ReactNode, RefAttributes } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 
-export interface InteractionState {
-  hover: boolean;
-  focus: boolean;
-  active: boolean;
-  disabled?: boolean;
-  focusVisible: boolean;
-}
-
 export interface InterfaceButtonProps extends PressableProps {
   /**
    * If true, the button will be in hovered state.

package/src/checkbox/context.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createContext } from '@cdx-ui/utils';
+import type { ICheckboxContextValue } from './types';
+
+export const [CheckboxProvider, useCheckboxContext] =
+  createContext<ICheckboxContextValue>('CheckboxContext');
+
+interface ICheckboxGroupState {
+  isReadOnly: boolean;
+  isDisabled: boolean;
+  isSelected: (value: string) => boolean;
+  addValue: (value: string) => void;
+  removeValue: (value: string) => void;
+}
+
+export const CheckboxGroupContext = React.createContext<{
+  state: ICheckboxGroupState;
+} | null>(null);

package/src/checkbox/createCheckboxGroup.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { useCheckboxGroup } from '@react-native-aria/checkbox';
+import { useCheckboxGroupState } from '@react-stately/checkbox';
+import { CheckboxGroupContext } from './context';
+import type { ICheckboxGroupProps } from './types';
+
+export const createCheckboxGroup = <T,>(BaseCheckboxGroup: React.ComponentType<T>) =>
+  forwardRef(({ children, ...props }: ICheckboxGroupProps, ref?: React.Ref<T>) => {
+    const state = useCheckboxGroupState({
+      ...props,
+      validationState: props.isInvalid ? 'invalid' : 'valid',
+    });
+
+    const { groupProps } = useCheckboxGroup(
+      {
+        ...props,
+        'aria-label': props['aria-label'],
+      },
+      state,
+    );
+
+    const formControlContext = useFormControlContext();
+
+    return (
+      <CheckboxGroupContext.Provider value={{ state: { ...formControlContext, ...state } }}>
+        <BaseCheckboxGroup {...groupProps} {...props} ref={ref}>
+          {children}
+        </BaseCheckboxGroup>
+      </CheckboxGroupContext.Provider>
+    );
+  });

package/src/checkbox/createCheckboxIcon.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from 'react';
+import { useCheckboxContext } from './context';
+import type { ICheckboxIconProps } from './types';
+
+export const createCheckboxIcon = <T,>(BaseCheckboxIcon: React.ComponentType<T>) =>
+  forwardRef<unknown, ICheckboxIconProps>(({ children, forceMount = false, ...props }, ref) => {
+    const { isChecked } = useCheckboxContext();
+
+    if (forceMount || isChecked) {
+      return (
+        <BaseCheckboxIcon {...(props as T)} ref={ref}>
+          {children}
+        </BaseCheckboxIcon>
+      );
+    }
+
+    return null;
+  });

package/src/checkbox/createCheckboxIndicator.tsx

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useCheckboxContext } from './context';
+import type { ICheckboxIndicatorProps } from './types';
+
+export const createCheckboxIndicator = <T,>(BaseCheckboxIndicator: React.ComponentType<T>) =>
+  forwardRef<unknown, ICheckboxIndicatorProps & { className?: string }>(
+    ({ children, className, ...props }, ref) => {
+      const {
+        isChecked,
+        isDisabled,
+        isHovered,
+        isInvalid,
+        isReadOnly,
+        isPressed,
+        isFocused,
+        isIndeterminate,
+        isFocusVisible,
+      } = useCheckboxContext();
+
+      return (
+        <BaseCheckboxIndicator
+          className={className}
+          {...dataAttributes({
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            focusVisible: isFocusVisible,
+            invalid: isInvalid,
+            readOnly: isReadOnly,
+            active: isPressed,
+            focused: isFocused,
+            indeterminate: isIndeterminate,
+            slot: 'checkbox-indicator',
+          })}
+          {...(props as T)}
+          ref={ref}
+        >
+          {children}
+        </BaseCheckboxIndicator>
+      );
+    },
+  );

package/src/checkbox/createCheckboxLabel.tsx

@@ -0,0 +1,42 @@
+import { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useCheckboxContext } from './context';
+import type { ICheckboxLabelProps } from './types';
+
+export const createCheckboxLabel = <T,>(BaseCheckboxLabel: React.ComponentType<T>) =>
+  forwardRef<unknown, ICheckboxLabelProps & { className?: string }>(
+    ({ children, className, ...props }, ref) => {
+      const {
+        isChecked,
+        isDisabled,
+        isHovered,
+        isInvalid,
+        isReadOnly,
+        isPressed,
+        isFocused,
+        isIndeterminate,
+        isFocusVisible,
+      } = useCheckboxContext();
+
+      return (
+        <BaseCheckboxLabel
+          className={className}
+          {...dataAttributes({
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            focusVisible: isFocusVisible,
+            invalid: isInvalid,
+            readOnly: isReadOnly,
+            pressed: isPressed,
+            focused: isFocused,
+            indeterminate: isIndeterminate,
+          })}
+          {...(props as T)}
+          ref={ref}
+        >
+          {children}
+        </BaseCheckboxLabel>
+      );
+    },
+  );

package/src/checkbox/createCheckboxRoot.tsx

@@ -0,0 +1,100 @@
+import { forwardRef } from 'react';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import { dataAttributes } from '../utils/dataAttributes';
+import { CheckboxProvider } from './context';
+import type { ICheckboxProps } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+export const createCheckboxRoot = <T,>(BaseCheckbox: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      {
+        onPressIn,
+        onPressOut,
+        onHoverIn,
+        onHoverOut,
+        onFocus,
+        onBlur,
+        children,
+        ...props
+      }: ICheckboxProps,
+      ref?: React.Ref<T>,
+    ) => {
+      const {
+        isHovered: isHoveredProp,
+        isChecked: isCheckedProp,
+        isDisabled: isDisabledProp,
+        isInvalid: isInvalidProp,
+        isReadOnly: isReadOnlyProp,
+        isPressed: isPressedProp,
+        isFocused: isFocusedProp,
+        isIndeterminate: isIndeterminateProp,
+        isFocusVisible,
+      } = 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,
+      });
+
+      return (
+        <BaseCheckbox
+          disabled={isDisabled || isDisabledProp}
+          {...pressProps}
+          {...(combinedProps as T)}
+          {...groupItemInputProps}
+          ref={mergedRef}
+          role="checkbox"
+          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))}
+          {...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,
+          })}
+        >
+          <CheckboxProvider
+            value={{
+              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,
+            }}
+          >
+            {children}
+          </CheckboxProvider>
+        </BaseCheckbox>
+      );
+    },
+  );

package/src/checkbox/createCheckboxRoot.web.tsx

@@ -0,0 +1,77 @@
+import { forwardRef } from 'react';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useFocusRing } from '@react-native-aria/focus';
+import { dataAttributes } from '../utils/dataAttributes';
+import { CheckboxProvider } from './context';
+import type { ICheckboxProps } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+export const createCheckboxRoot = <T,>(BaseCheckbox: React.ComponentType<T>) =>
+  forwardRef(({ children, ...props }: ICheckboxProps, ref?: React.Ref<T>) => {
+    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();
+
+    return (
+      <BaseCheckbox
+        {...(combinedProps as T)}
+        ref={mergedRef}
+        role="label"
+        // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
+        accessibilityRole="label"
+        {...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,
+        })}
+      >
+        <CheckboxProvider
+          value={{
+            isChecked: isChecked || isCheckedProp,
+            isDisabled: isDisabled || isDisabledProp,
+            isFocusVisible: isFocusVisible || isFocusVisibleProp,
+            isHovered: isHovered || isHoveredProp,
+            isInvalid: isInvalid || isInvalidProp,
+            isReadOnly: isReadOnly || isReadOnlyProp,
+            isIndeterminate: isIndeterminate || isIndeterminateProp,
+            isPressed,
+            isFocused,
+          }}
+        >
+          <VisuallyHidden>
+            <input {...groupItemInputProps} {...focusProps} ref={inputRef} />
+          </VisuallyHidden>
+          {children}
+        </CheckboxProvider>
+      </BaseCheckbox>
+    );
+  });

package/src/checkbox/index.ts

@@ -0,0 +1,43 @@
+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 {
+  ICheckboxComponentType,
+  ICheckboxGroupProps,
+  ICheckboxIconProps,
+  ICheckboxIndicatorProps,
+  ICheckboxLabelProps,
+  ICheckboxProps,
+} from './types';
+
+export const createCheckbox = <Root, Indicator, Icon, Label, Group>({
+  Root,
+  Indicator,
+  Icon,
+  Label,
+  Group,
+}: {
+  Root: React.ComponentType<Root>;
+  Indicator: React.ComponentType<Indicator>;
+  Icon: React.ComponentType<Icon>;
+  Label: React.ComponentType<Label>;
+  Group: React.ComponentType<Group>;
+}) => {
+  const Checkbox = createCheckboxRoot(Root) as any;
+  Checkbox.Indicator = createCheckboxIndicator(Indicator);
+  Checkbox.Icon = createCheckboxIcon(Icon);
+  Checkbox.Label = createCheckboxLabel(Label);
+  Checkbox.Group = createCheckboxGroup(Group);
+
+  Checkbox.displayName = 'Checkbox';
+  Checkbox.Indicator.displayName = 'Checkbox.Indicator';
+  Checkbox.Icon.displayName = 'Checkbox.Icon';
+  Checkbox.Label.displayName = 'Checkbox.Label';
+  Checkbox.Group.displayName = 'Checkbox.Group';
+
+  return Checkbox as ICheckboxComponentType<Root, Indicator, Icon, Label, Group>;
+};

package/src/checkbox/types.ts

@@ -0,0 +1,74 @@
+import type { PressableProps } from 'react-native';
+export interface InterfaceCheckbox extends PressableProps {
+  value: string;
+  onChange?: (isSelected: boolean) => void;
+  children?: React.ReactNode;
+  defaultIsChecked?: boolean;
+  isChecked?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isHovered?: boolean;
+  isFocused?: boolean;
+  isPressed?: boolean;
+  isRequired?: boolean;
+  isIndeterminate?: boolean;
+  isFocusVisible?: boolean;
+}
+
+export interface ICheckboxGroupProps {
+  value: string[];
+  onChange?: (values: string[]) => void;
+  children?: React.ReactNode;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isRequired?: boolean;
+  '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 {
+  isChecked?: boolean;
+  isDisabled?: boolean;
+  isHovered?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isPressed?: boolean;
+  isFocused?: boolean;
+  isIndeterminate?: boolean;
+  isFocusVisible?: boolean;
+}