@brand-map/primitives 0.0.0-broken.1 → 0.0.0-broken.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brand-map/primitives",
-  "version": "0.0.0-broken.1",
+  "version": "0.0.0-broken.2",
   "exports": {
     "./accordion": "./src/accordion/index.ts",
     "./alert-dialog": "./src/alert-dialog/index.ts",
@@ -23,7 +23,7 @@
     "./select": "./src/select/index.ts",
     "./separator": "./src/separator/index.ts",
     "./slider": "./src/slider/index.ts",
-    "./slot": "./src/slot/index.ts",
+    "./render": "./src/render/index.ts",
     "./switch": "./src/switch/index.ts",
     "./table": "./src/table/index.ts",
     "./tabs": "./src/tabs/index.ts",
@@ -38,21 +38,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "version-bump": "npx changeset && npx changeset version"
-  },
   "dependencies": {
     "react": "^19.2.4",
     "react-native": "^0.83.1",
     "zustand": "^5.0.10"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.8",
     "@tsconfig/react-native": "^3.0.9",
-    "@types/jest": "^30.0.0",
     "@types/react": "^19.2.10",
-    "oxfmt": "^0.27.0",
-    "oxlint": "^1.42.0",
     "typescript": "^5.9.3"
   },
   "engines": {

package/src/accordion/accordion.tsx

@@ -1,12 +1,12 @@
-import * as React from "react";
+import { createContext, forwardRef, useContext, useId } from "react";
 import { type GestureResponderEvent } from "react-native";
 
 import { useControllableState } from "../hooks";
-import * as Slot from "../slot";
+import * as Render from "../render";
 
 import type { ContentProps, ContentRef, HeaderProps, HeaderRef, ItemProps, ItemRef, RootContext, RootProps, RootRef, TriggerProps, TriggerRef } from "./types";
 
-const AccordionContext = React.createContext<RootContext | null>(null);
+const AccordionContext = createContext<RootContext | null>(null);
 
 /**
  * @xample
@@ -20,7 +20,7 @@ const AccordionContext = React.createContext<RootContext | null>(null);
  *  ...
  * </Root>
  */
-const Root = React.forwardRef<RootRef, RootProps>(
+const Root = forwardRef<RootRef, RootProps>(
   ({ render, multiple = false, disabled = false, collapsible = true, value: valueProp, onValueChange: onValueChangeProps, defaultValue, ...props }, ref) => {
     const [value = [], onValueChange] = useControllableState({
       prop: valueProp,
@@ -41,7 +41,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
         {typeof render === "function" ? (
           <>{render(props, { disabled: disabled, multiple, value })}</>
         ) : (
-          <Slot.View
+          <Render.View
             ref={ref}
             render={render}
             {...props}
@@ -54,18 +54,18 @@ const Root = React.forwardRef<RootRef, RootProps>(
 Root.displayName = "RootNativeAccordion";
 
 function useRootContext() {
-  const context = React.useContext(AccordionContext);
+  const context = useContext(AccordionContext);
   if (!context) {
     throw new Error("Accordion compound components cannot be rendered outside the Accordion component");
   }
   return context;
 }
 
-const AccordionItemContext = React.createContext<(ItemProps & { nativeID: string; open: boolean }) | null>(null);
+const AccordionItemContext = createContext<(ItemProps & { nativeID: string; open: boolean }) | null>(null);
 
-const Item = React.forwardRef<ItemRef, ItemProps>(({ render, value, disabled, ...props }, ref) => {
+const Item = forwardRef<ItemRef, ItemProps>(({ render, value, disabled, ...props }, ref) => {
   const { value: rootValue } = useRootContext();
-  const nativeID = React.useId();
+  const nativeID = useId();
   const open = isItemExpanded(rootValue, value);
 
   return (
@@ -73,7 +73,7 @@ const Item = React.forwardRef<ItemRef, ItemProps>(({ render, value, disabled, ..
       {typeof render === "function" ? (
         <>{render(props, { open })}</>
       ) : (
-        <Slot.View
+        <Render.View
           ref={ref}
           {...props}
         />
@@ -84,19 +84,19 @@ const Item = React.forwardRef<ItemRef, ItemProps>(({ render, value, disabled, ..
 Item.displayName = "ItemNativeAccordion";
 
 function useItemContext() {
-  const context = React.useContext(AccordionItemContext);
+  const context = useContext(AccordionItemContext);
   if (!context) {
     throw new Error("AccordionItem compound components cannot be rendered outside the AccordionItem component");
   }
   return context;
 }
 
-const Header = React.forwardRef<HeaderRef, HeaderProps>(({ ...props }, ref) => {
+const Header = forwardRef<HeaderRef, HeaderProps>(({ ...props }, ref) => {
   const { disabled: rootDisabled } = useRootContext();
   const { disabled: itemDisabled, open } = useItemContext();
 
   return (
-    <Slot.View
+    <Render.View
       ref={ref}
       role="heading"
       aria-expanded={open}
@@ -107,7 +107,7 @@ const Header = React.forwardRef<HeaderRef, HeaderProps>(({ ...props }, ref) => {
 });
 Header.displayName = "HeaderNativeAccordion";
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ render, onPress: onPressProp, disabled: disabledProp, ...props }, ref) => {
+const Trigger = forwardRef<TriggerRef, TriggerProps>(({ render, onPress: onPressProp, disabled: disabledProp, ...props }, ref) => {
   const { disabled: rootDisabled, multiple, onValueChange, value: rootValue, collapsible } = useRootContext();
   const { nativeID, disabled: itemDisabled, value, open } = useItemContext();
 
@@ -139,7 +139,7 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ render, onPress: o
   }
 
   return (
-    <Slot.Pressable
+    <Render.Pressable
       ref={ref}
       nativeID={nativeID}
       aria-disabled={isDisabled}
@@ -156,7 +156,7 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ render, onPress: o
 });
 Trigger.displayName = "TriggerNativeAccordion";
 
-const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
+const Content = forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
   const { multiple } = useRootContext();
   const { nativeID, open } = useItemContext();
 
@@ -167,7 +167,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, ...pr
   }
 
   return (
-    <Slot.View
+    <Render.View
       ref={ref}
       aria-hidden={!(keepMounted || open)}
       aria-labelledby={nativeID}

package/src/accordion/accordion.web.tsx

@@ -1,14 +1,14 @@
 // import { useAugmentedRef, useControllableState, useIsomorphicLayoutEffect } from "../hooks";
-// import * as Slot from "../slot";
+// import * as Render from "../render";
 // import * as Accordion from "@radix-ui/react-accordion";
-// import * as React from "react";
+//
 // import { Pressable, View } from "react-native";
 
 // import type { ContentProps, ContentRef, HeaderProps, HeaderRef, ItemProps, ItemRef, RootProps, RootRef, TriggerProps, TriggerRef } from "./types";
 
-// const AccordionContext = React.createContext<RootProps | null>(null);
+// const AccordionContext = createContext<RootProps | null>(null);
 
-// const Root = React.forwardRef<RootRef, RootProps>(
+// const Root = forwardRef<RootRef, RootProps>(
 //   (
 //     { render, value: valueProp, onValueChange: onValueChangeProps, defaultValue, type, disabled, dir, orientation = "vertical", collapsible, ...props },
 //     ref,
@@ -56,16 +56,16 @@
 // Root.displayName = "RootWebAccordion";
 
 // function useRootContext() {
-//   const context = React.useContext(AccordionContext);
+//   const context = useContext(AccordionContext);
 //   if (!context) {
 //     throw new Error("Accordion compound components cannot be rendered outside the Accordion component");
 //   }
 //   return context;
 // }
 
-// const AccordionItemContext = React.createContext<(ItemProps & { isExpanded: boolean }) | null>(null);
+// const AccordionItemContext = createContext<(ItemProps & { isExpanded: boolean }) | null>(null);
 
-// const Item = React.forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled, ...props }, ref) => {
+// const Item = forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled, ...props }, ref) => {
 //   const augmentedRef = useAugmentedRef({ ref });
 //   const { value, orientation, disabled: disabledRoot } = useRootContext();
 
@@ -115,14 +115,14 @@
 // Item.displayName = "ItemWebAccordion";
 
 // function useItemContext() {
-//   const context = React.useContext(AccordionItemContext);
+//   const context = useContext(AccordionItemContext);
 //   if (!context) {
 //     throw new Error("AccordionItem compound components cannot be rendered outside the AccordionItem component");
 //   }
 //   return context;
 // }
 
-// const Header = React.forwardRef<HeaderRef, HeaderProps>(({ ...props }, ref) => {
+// const Header = forwardRef<HeaderRef, HeaderProps>(({ ...props }, ref) => {
 //   const augmentedRef = useAugmentedRef({ ref });
 //   const { disabled, isExpanded } = useItemContext();
 //   const { orientation, disabled: disabledRoot } = useRootContext();
@@ -167,7 +167,7 @@
 //   opacity: 0,
 // };
 
-// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ disabled: disabledProp, ...props }, ref) => {
+// const Trigger = forwardRef<TriggerRef, TriggerProps>(({ disabled: disabledProp, ...props }, ref) => {
 //   const { disabled: disabledRoot } = useRootContext();
 //   const { disabled, isExpanded } = useItemContext();
 //   const triggerRef = React.useRef<HTMLButtonElement>(null);
@@ -218,13 +218,13 @@
 //           role="button"
 //           disabled={isDisabled}
 //           {...props}
-//           onPress={(ev) => {
+//           onPress={(event) => {
 //             if (triggerRef.current && !isDisabled) {
 //               triggerRef.current.disabled = false;
 //               triggerRef.current.click();
 //               triggerRef.current.disabled = true;
 //             }
-//             props.onPress?.(ev);
+//             props.onPress?.(event);
 //           }}
 //         />
 //       </Accordion.Trigger>
@@ -234,7 +234,7 @@
 
 // Trigger.displayName = "TriggerWebAccordion";
 
-// const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
+// const Content = forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
 //   const augmentedRef = useAugmentedRef({ ref });
 
 //   const { orientation, disabled: disabledRoot } = useRootContext();

package/src/alert-dialog/alert-dialog.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
+import { createContext, forwardRef, useId, useContext, useEffect } from "react";
 import { BackHandler, Pressable, Text, View, type GestureResponderEvent } from "react-native";
 
 import { useControllableState } from "../hooks";
 import { Portal as RNPPortal } from "../portal";
-import * as Slot from "../slot";
+import * as Render from "../render";
 
 import type {
   ActionProps,
@@ -26,10 +26,10 @@ import type {
   TriggerRef,
 } from "./types";
 
-const AlertDialogContext = React.createContext<(RootContext & { nativeID: string }) | null>(null);
+const AlertDialogContext = createContext<(RootContext & { nativeID: string }) | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(({ open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
-  const nativeID = React.useId();
+const Root = forwardRef<RootRef, RootProps>(({ open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+  const nativeID = useId();
   const [open = false, onOpenChange] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen,
@@ -44,7 +44,7 @@ const Root = React.forwardRef<RootRef, RootProps>(({ open: openProp, defaultOpen
         nativeID,
       }}
     >
-      <Slot.View
+      <Render.View
         ref={ref}
         {...viewProps}
       />
@@ -55,23 +55,23 @@ const Root = React.forwardRef<RootRef, RootProps>(({ open: openProp, defaultOpen
 Root.displayName = "RootNativeAlertDialog";
 
 function useRootContext() {
-  const context = React.useContext(AlertDialogContext);
+  const context = useContext(AlertDialogContext);
   if (!context) {
     throw new Error("AlertDialog compound components cannot be rendered outside the AlertDialog component");
   }
   return context;
 }
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+const Trigger = forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
   const { open: value, onOpenChange } = useRootContext();
 
-  function onPress(ev: GestureResponderEvent) {
+  function onPress(event: GestureResponderEvent) {
     onOpenChange(!value);
-    onPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   return (
-    <Slot.Pressable
+    <Render.Pressable
       ref={ref}
       aria-disabled={disabled ?? undefined}
       role="button"
@@ -106,7 +106,7 @@ function Portal({ keepMounted, hostName, children }: PortalProps) {
   );
 }
 
-const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ...props }, ref) => {
+const Backdrop = forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ...props }, ref) => {
   const { open: value } = useRootContext();
 
   if (!keepMounted) {
@@ -116,7 +116,7 @@ const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ..
   }
 
   return (
-    <Slot.View
+    <Render.View
       ref={ref}
       {...props}
     />
@@ -125,10 +125,10 @@ const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ..
 
 Backdrop.displayName = "BackdropNativeAlertDialog";
 
-const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
+const Content = forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
   const { open: value, nativeID, onOpenChange } = useRootContext();
 
-  React.useEffect(() => {
+  useEffect(() => {
     const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
       onOpenChange(false);
       return true;
@@ -146,7 +146,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, ...pr
   }
 
   return (
-    <Slot.View
+    <Render.View
       ref={ref}
       role="alertdialog"
       nativeID={nativeID}
@@ -160,17 +160,17 @@ const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, ...pr
 
 Content.displayName = "ContentNativeAlertDialog";
 
-const Cancel = React.forwardRef<CancelRef, CancelProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+const Cancel = forwardRef<CancelRef, CancelProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
   const { onOpenChange } = useRootContext();
 
-  function onPress(ev: GestureResponderEvent) {
+  function onPress(event: GestureResponderEvent) {
     if (disabled) return;
     onOpenChange(false);
-    onPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   return (
-    <Slot.Pressable
+    <Render.Pressable
       ref={ref}
       aria-disabled={disabled ?? undefined}
       role="button"
@@ -183,17 +183,17 @@ const Cancel = React.forwardRef<CancelRef, CancelProps>(({ onPress: onPressProp,
 
 Cancel.displayName = "CloseNativeAlertDialog";
 
-const Action = React.forwardRef<ActionRef, ActionProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+const Action = forwardRef<ActionRef, ActionProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
   const { onOpenChange } = useRootContext();
 
-  function onPress(ev: GestureResponderEvent) {
+  function onPress(event: GestureResponderEvent) {
     if (disabled) return;
     onOpenChange(false);
-    onPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   return (
-    <Slot.Pressable
+    <Render.Pressable
       ref={ref}
       aria-disabled={disabled ?? undefined}
       role="button"
@@ -206,11 +206,11 @@ const Action = React.forwardRef<ActionRef, ActionProps>(({ onPress: onPressProp,
 
 Action.displayName = "ActionNativeAlertDialog";
 
-const Title = React.forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
+const Title = forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
   const { nativeID } = useRootContext();
 
   return (
-    <Slot.Text
+    <Render.Text
       ref={ref}
       role="heading"
       nativeID={`${nativeID}_label`}
@@ -221,11 +221,11 @@ const Title = React.forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
 
 Title.displayName = "TitleNativeAlertDialog";
 
-const Description = React.forwardRef<DescriptionRef, DescriptionProps>(({ ...props }, ref) => {
+const Description = forwardRef<DescriptionRef, DescriptionProps>(({ ...props }, ref) => {
   const { nativeID } = useRootContext();
 
   return (
-    <Slot.Text
+    <Render.Text
       ref={ref}
       nativeID={`${nativeID}_desc`}
       {...props}

package/src/alert-dialog/alert-dialog.web.tsx

@@ -1,7 +1,7 @@
 // import { useAugmentedRef, useControllableState, useIsomorphicLayoutEffect } from "../hooks";
-// import * as Slot from "../slot";
+// import * as Render from "../render";
 // import * as AlertDialog from "@radix-ui/react-alert-dialog";
-// import * as React from "react";
+//
 // import { Pressable, Text, View, type GestureResponderEvent } from "react-native";
 
 // import type {
@@ -25,9 +25,9 @@
 //   TriggerRef,
 // } from "./types";
 
-// const AlertDialogContext = React.createContext<RootContext | null>(null);
+// const AlertDialogContext = createContext<RootContext | null>(null);
 
-// const Root = React.forwardRef<RootRef, RootProps>(({ open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+// const Root = forwardRef<RootRef, RootProps>(({ open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
 //   const [open = false, onOpenChange] = useControllableState({
 //     prop: openProp,
 //     defaultProp: defaultOpen,
@@ -53,19 +53,19 @@
 // Root.displayName = "RootAlertWebDialog";
 
 // function useRootContext() {
-//   const context = React.useContext(AlertDialogContext);
+//   const context = useContext(AlertDialogContext);
 //   if (!context) {
 //     throw new Error("AlertDialog compound components cannot be rendered outside the AlertDialog component");
 //   }
 //   return context;
 // }
 
-// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
+// const Trigger = forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
 //   const augmentedRef = useAugmentedRef({ ref });
 //   const { onOpenChange, open } = useRootContext();
-//   function onPress(ev: GestureResponderEvent) {
+//   function onPress(event: GestureResponderEvent) {
 //     if (onPressProp) {
-//       onPressProp(ev);
+//       onPressProp(event);
 //     }
 //     onOpenChange(!open);
 //   }
@@ -107,7 +107,7 @@
 //   );
 // }
 
-// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ...props }, ref) => {
+// const Backdrop = forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ...props }, ref) => {
 //
 //   return (
 //     <AlertDialog.Backdrop keepMounted={keepMounted}>
@@ -121,7 +121,7 @@
 
 // Backdrop.displayName = "BackdropAlertWebDialog";
 
-// const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ...props }, ref) => {
+// const Content = forwardRef<ContentRef, ContentProps>(({ keepMounted, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ...props }, ref) => {
 //   const augmentedRef = useAugmentedRef({ ref });
 //   const { open } = useRootContext();
 
@@ -151,13 +151,13 @@
 
 // Content.displayName = "ContentAlertWebDialog";
 
-// const Cancel = React.forwardRef<CancelRef, CancelProps>(({ onPress: onPressProp, disabled, ...props }, ref) => {
+// const Cancel = forwardRef<CancelRef, CancelProps>(({ onPress: onPressProp, disabled, ...props }, ref) => {
 //   const augmentedRef = useAugmentedRef({ ref });
 //   const { onOpenChange, open } = useRootContext();
 
-//   function onPress(ev: GestureResponderEvent) {
+//   function onPress(event: GestureResponderEvent) {
 //     if (onPressProp) {
-//       onPressProp(ev);
+//       onPressProp(event);
 //     }
 //     onOpenChange(!open);
 //   }
@@ -190,13 +190,13 @@
 
 // Cancel.displayName = "CancelAlertWebDialog";
 
-// const Action = React.forwardRef<ActionRef, ActionProps>(({ onPress: onPressProp, disabled, ...props }, ref) => {
+// const Action = forwardRef<ActionRef, ActionProps>(({ onPress: onPressProp, disabled, ...props }, ref) => {
 //   const augmentedRef = useAugmentedRef({ ref });
 //   const { onOpenChange, open } = useRootContext();
 
-//   function onPress(ev: GestureResponderEvent) {
+//   function onPress(event: GestureResponderEvent) {
 //     if (onPressProp) {
-//       onPressProp(ev);
+//       onPressProp(event);
 //     }
 //     onOpenChange(!open);
 //   }
@@ -229,7 +229,7 @@
 
 // Action.displayName = "ActionAlertWebDialog";
 
-// const Title = React.forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
+// const Title = forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
 //
 //   return (
 //     <AlertDialog.Title render>
@@ -243,7 +243,7 @@
 
 // Title.displayName = "TitleAlertWebDialog";
 
-// const Description = React.forwardRef<DescriptionRef, DescriptionProps>(({ ...props }, ref) => {
+// const Description = forwardRef<DescriptionRef, DescriptionProps>(({ ...props }, ref) => {
 //
 //   return (
 //     <AlertDialog.Description render>

package/src/alert-dialog/types.ts

@@ -31,17 +31,17 @@ type ContentProps = KeepMountable &
     /**
      * @platform: WEB ONLY
      */
-    onOpenAutoFocus?: (ev: Event) => void;
+    onOpenAutoFocus?: (event: Event) => void;
 
     /**
      * @platform: WEB ONLY
      */
-    onCloseAutoFocus?: (ev: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
 
     /**
      * @platform: WEB ONLY
      */
-    onEscapeKeyDown?: (ev: Event) => void;
+    onEscapeKeyDown?: (event: Event) => void;
   };
 
 type TriggerProps = RenderPressableProps;

package/src/aspect-ratio/aspect-ratio.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
+import { forwardRef, Component } from "react";
 import { View, type ViewStyle } from "react-native";
 
-import * as Slot from "../slot";
+import * as Render from "../render";
 import type { RenderViewProps, ViewRef } from "../types";
 
 type RootProps = Omit<RenderViewProps, "style"> & {
@@ -11,7 +11,7 @@ type RootProps = Omit<RenderViewProps, "style"> & {
 
 type RootRef = ViewRef;
 
-const Root = React.forwardRef<RootRef, RootProps>(({ ratio = 1, style, ...props }, ref) => {
+const Root = forwardRef<RootRef, RootProps>(({ ratio = 1, style, ...props }, ref) => {
   return (
     <Component
       ref={ref}

package/src/avatar/avatar.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
+import { createContext, forwardRef, useState, useContext, useCallback } from "react";
 import { type ImageErrorEventData, type ImageLoadEventData, type ImageSourcePropType, type NativeSyntheticEvent, Image as RNImage, View } from "react-native";
 
 import { useIsomorphicLayoutEffect } from "../hooks";
-import * as Slot from "../slot";
+import * as Render from "../render";
 
 import type { FallbackProps, FallbackRef, ImageProps, ImageRef, RootProps, RootRef } from "./types";
 
@@ -13,10 +13,10 @@ interface RootContextInterface extends RootProps {
   setStatus: (status: AvatarState) => void;
 }
 
-const RootContext = React.createContext<RootContextInterface | null>(null);
+const RootContext = createContext<RootContextInterface | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(({ alt, ...viewProps }, ref) => {
-  const [status, setStatus] = React.useState<AvatarState>("error");
+const Root = forwardRef<RootRef, RootProps>(({ alt, ...viewProps }, ref) => {
+  const [status, setStatus] = useState<AvatarState>("error");
 
   return (
     <RootContext.Provider value={{ alt, status, setStatus }}>
@@ -31,14 +31,14 @@ const Root = React.forwardRef<RootRef, RootProps>(({ alt, ...viewProps }, ref) =
 Root.displayName = "RootAvatar";
 
 function useRootContext() {
-  const context = React.useContext(RootContext);
+  const context = useContext(RootContext);
   if (!context) {
     throw new Error("Avatar compound components cannot be rendered outside the Avatar component");
   }
   return context;
 }
 
-const Image = React.forwardRef<ImageRef, ImageProps>(({ onLoad: onLoadProps, onError: onErrorProps, onLoadingStatusChange, ...props }, ref) => {
+const Image = forwardRef<ImageRef, ImageProps>(({ onLoad: onLoadProps, onError: onErrorProps, onLoadingStatusChange, ...props }, ref) => {
   const { alt, setStatus, status } = useRootContext();
 
   useIsomorphicLayoutEffect(() => {
@@ -51,7 +51,7 @@ const Image = React.forwardRef<ImageRef, ImageProps>(({ onLoad: onLoadProps, onE
     };
   }, [props?.source]);
 
-  const onLoad = React.useCallback(
+  const onLoad = useCallback(
     (e: NativeSyntheticEvent<ImageLoadEventData>) => {
       setStatus("loaded");
       onLoadingStatusChange?.("loaded");
@@ -60,7 +60,7 @@ const Image = React.forwardRef<ImageRef, ImageProps>(({ onLoad: onLoadProps, onE
     [onLoadProps],
   );
 
-  const onError = React.useCallback(
+  const onError = useCallback(
     (e: NativeSyntheticEvent<ImageErrorEventData>) => {
       setStatus("error");
       onLoadingStatusChange?.("error");
@@ -86,7 +86,7 @@ const Image = React.forwardRef<ImageRef, ImageProps>(({ onLoad: onLoadProps, onE
 
 Image.displayName = "ImageAvatar";
 
-const Fallback = React.forwardRef<FallbackRef, FallbackProps>(({ ...props }, ref) => {
+const Fallback = forwardRef<FallbackRef, FallbackProps>(({ ...props }, ref) => {
   const { alt, status } = useRootContext();
 
   if (status !== "error") {

package/src/avatar/types.ts

@@ -1,12 +1,12 @@
 import type { Image } from "react-native";
 
-import type { ComponentPropsWithRender, RenderViewProps, ViewRef } from "../types";
+import type { BrandMapUIComponentProps, RenderViewProps, ViewRef } from "../types";
 
 type RootProps = RenderViewProps & {
   alt: string;
 };
 
-type ImageProps = Omit<ComponentPropsWithRender<typeof Image>, "alt"> & {
+type ImageProps = Omit<BrandMapUIComponentProps<typeof Image>, "alt"> & {
   children?: React.ReactNode;
   onLoadingStatusChange?: (status: "error" | "loaded") => void;
 };