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

package/src/switch/types.ts

@@ -1,19 +1,40 @@
 import type { PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
 
-type RootProps = RenderPressableProps & {
+export interface SwitchRootState {
+  /**
+   * Whether the switch is currently active.
+   */
+  checked: boolean;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the user should be unable to activate or deactivate the switch.
+   */
+  readOnly: boolean;
+  /**
+   * Whether the user must activate the switch before submitting a form.
+   */
+  required: boolean;
+}
+
+type SwitchRootProps = RenderPressableProps<SwitchRootState> & {
   checked: boolean;
   onCheckedChange: (checked: boolean) => void;
   disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
 
   /**
    * @platform: WEB ONLY
    */
-  onKeyDown?: (ev: React.KeyboardEvent) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
 };
 
-type ThumbProps = RenderViewProps;
+type SwitchThumbProps = RenderViewProps<SwitchRootState>;
 
-type RootRef = PressableRef;
-type ThumbRef = ViewRef;
+type SwitchRootRef = PressableRef;
+type SwitchThumbRef = ViewRef;
 
-export type { RootProps, RootRef, ThumbProps, ThumbRef };
+export type { SwitchRootProps, SwitchRootRef, SwitchThumbProps, SwitchThumbRef };

package/src/table/table.tsx

@@ -1,13 +1,13 @@
-import * as React from "react";
+import { forwardRef, Component } from "react";
 import { Pressable, View } from "react-native";
 
-import * as Slot from "../slot";
+import * as Render from "../render";
 import type { PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
 
 type RootProps = RenderViewProps;
 type RootRef = ViewRef;
 
-const Root = React.forwardRef<RootRef, RootProps>(({ ...props }, ref) => {
+const Root = forwardRef<RootRef, RootProps>(({ ...props }, ref) => {
   return (
     <Component
       role="table"
@@ -21,7 +21,7 @@ Root.displayName = "RootTable";
 type HeaderProps = RenderViewProps;
 type HeaderRef = ViewRef;
 
-const Header = React.forwardRef<HeaderRef, HeaderProps>(({ ...props }, ref) => {
+const Header = forwardRef<HeaderRef, HeaderProps>(({ ...props }, ref) => {
   return (
     <Component
       role="rowheader"
@@ -35,7 +35,7 @@ Header.displayName = "HeaderTable";
 type RowProps = RenderPressableProps;
 type RowRef = PressableRef;
 
-const Row = React.forwardRef<RowRef, RowProps>(({ ...props }, ref) => {
+const Row = forwardRef<RowRef, RowProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}
@@ -49,7 +49,7 @@ Row.displayName = "RowTable";
 type HeadProps = RenderViewProps;
 type HeadRef = ViewRef;
 
-const Head = React.forwardRef<HeadRef, HeadProps>(({ ...props }, ref) => {
+const Head = forwardRef<HeadRef, HeadProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}
@@ -63,7 +63,7 @@ Head.displayName = "HeadTable";
 type BodyProps = RenderViewProps;
 type BodyRef = ViewRef;
 
-const Body = React.forwardRef<BodyRef, BodyProps>(({ ...props }, ref) => {
+const Body = forwardRef<BodyRef, BodyProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}
@@ -77,7 +77,7 @@ Body.displayName = "BodyTable";
 type CellProps = RenderViewProps;
 type CellRef = ViewRef;
 
-const Cell = React.forwardRef<CellRef, CellProps>(({ ...props }, ref) => {
+const Cell = forwardRef<CellRef, CellProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}
@@ -91,7 +91,7 @@ Cell.displayName = "CellTable";
 type FooterProps = RenderViewProps;
 type FooterRef = ViewRef;
 
-const Footer = React.forwardRef<FooterRef, FooterProps>(({ ...props }, ref) => {
+const Footer = forwardRef<FooterRef, FooterProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}

package/src/tabs/tabs.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
+import { createContext, forwardRef, useId, useContext } from "react";
 import { Pressable, View, type GestureResponderEvent } from "react-native";
 
-import * as Slot from "../slot";
+import * as Render from "../render";
 
 import type { ContentProps, ContentRef, ListProps, ListRef, RootProps, RootRef, TriggerProps, TriggerRef } from "./types";
 
@@ -9,11 +9,11 @@ interface RootContext extends RootProps {
   nativeID: string;
 }
 
-const TabsContext = React.createContext<RootContext | null>(null);
+const TabsContext = createContext<RootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
+const Root = forwardRef<RootRef, RootProps>(
   ({ render, value, onValueChange, orientation: _orientation, dir: _dir, activationMode: _activationMode, ...viewProps }, ref) => {
-    const nativeID = React.useId();
+    const nativeID = useId();
 
     return (
       <TabsContext.Provider
@@ -35,14 +35,14 @@ const Root = React.forwardRef<RootRef, RootProps>(
 Root.displayName = "RootNativeTabs";
 
 function useRootContext() {
-  const context = React.useContext(TabsContext);
+  const context = useContext(TabsContext);
   if (!context) {
     throw new Error("Tabs compound components cannot be rendered outside the Tabs component");
   }
   return context;
 }
 
-const List = React.forwardRef<ListRef, ListProps>(({ ...props }, ref) => {
+const List = forwardRef<ListRef, ListProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}
@@ -54,15 +54,15 @@ const List = React.forwardRef<ListRef, ListProps>(({ ...props }, ref) => {
 
 List.displayName = "ListNativeTabs";
 
-const TriggerContext = React.createContext<{ value: string } | null>(null);
+const TriggerContext = createContext<{ value: string } | null>(null);
 
-const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled, value: tabValue, ...props }, ref) => {
+const Trigger = forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled, value: tabValue, ...props }, ref) => {
   const { onValueChange, value: rootValue, nativeID } = useRootContext();
 
-  function onPress(ev: GestureResponderEvent) {
+  function onPress(event: GestureResponderEvent) {
     if (disabled) return;
     onValueChange(tabValue);
-    onPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   return (
@@ -88,14 +88,14 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressPr
 Trigger.displayName = "TriggerNativeTabs";
 
 function useTriggerContext() {
-  const context = React.useContext(TriggerContext);
+  const context = useContext(TriggerContext);
   if (!context) {
     throw new Error("Tabs.Trigger compound components cannot be rendered outside the Tabs.Trigger component");
   }
   return context;
 }
 
-const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, value: tabValue, ...props }, ref) => {
+const Content = forwardRef<ContentRef, ContentProps>(({ keepMounted, value: tabValue, ...props }, ref) => {
   const { value: rootValue, nativeID } = useRootContext();
 
   if (!keepMounted) {

package/src/tabs/tabs.web.tsx

@@ -1,13 +1,13 @@
 // import * as Tabs from "@radix-ui/react-tabs";
-// import * as React from "react";
+//
 // import { Pressable, View } from "react-native";
 
-// import * as Slot from "../slot";
+// import * as Render from "../render";
 
 // import type { ContentProps, ContentRef, ListProps, ListRef, RootProps, RootRef, TriggerProps, TriggerRef } from "./types";
 
-// const TabsContext = React.createContext<RootProps | null>(null);
-// const Root = React.forwardRef<RootRef, RootProps>(({ value, onValueChange, orientation, dir, activationMode, ...viewProps }, ref) => {
+// const TabsContext = createContext<RootProps | null>(null);
+// const Root = forwardRef<RootRef, RootProps>(({ value, onValueChange, orientation, dir, activationMode, ...viewProps }, ref) => {
 //
 //   return (
 //     <TabsContext.Provider
@@ -36,14 +36,14 @@
 // Root.displayName = "RootWebTabs";
 
 // function useRootContext() {
-//   const context = React.useContext(TabsContext);
+//   const context = useContext(TabsContext);
 //   if (!context) {
 //     throw new Error("Tabs compound components cannot be rendered outside the Tabs component");
 //   }
 //   return context;
 // }
 
-// const List = React.forwardRef<ListRef, ListProps>(({ ...props }, ref) => {
+// const List = forwardRef<ListRef, ListProps>(({ ...props }, ref) => {
 //
 //   return (
 //     <Tabs.List render>
@@ -57,8 +57,8 @@
 
 // List.displayName = "ListWebTabs";
 
-// const TriggerContext = React.createContext<{ value: string } | null>(null);
-// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ value: tabValue, ...props }, ref) => {
+// const TriggerContext = createContext<{ value: string } | null>(null);
+// const Trigger = forwardRef<TriggerRef, TriggerProps>(({ value: tabValue, ...props }, ref) => {
 //
 //   return (
 //     <TriggerContext.Provider value={{ value: tabValue }}>
@@ -78,14 +78,14 @@
 // Trigger.displayName = "TriggerWebTabs";
 
 // function useTriggerContext() {
-//   const context = React.useContext(TriggerContext);
+//   const context = useContext(TriggerContext);
 //   if (!context) {
 //     throw new Error("Tabs.Trigger compound components cannot be rendered outside the Tabs.Trigger component");
 //   }
 //   return context;
 // }
 
-// const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, value, tabIndex = -1, ...props }, ref) => {
+// const Content = forwardRef<ContentRef, ContentProps>(({ keepMounted, value, tabIndex = -1, ...props }, ref) => {
 //
 //   return (
 //     <Tabs.Content

package/src/toast/toast.tsx

@@ -1,17 +1,17 @@
-import * as React from "react";
+import { createContext, forwardRef, useId, useContext } from "react";
 import { Pressable, Text, View, type GestureResponderEvent } from "react-native";
 
-import * as Slot from "../slot";
+import * as Render from "../render";
 
 import type { ActionProps, ActionRef, CloseProps, CloseRef, DescriptionProps, DescriptionRef, RootProps, RootRef, TitleProps, TitleRef } from "./types";
 
 interface RootContext extends RootProps {
   nativeID: string;
 }
-const ToastContext = React.createContext<RootContext | null>(null);
+const ToastContext = createContext<RootContext | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(({ type = "foreground", open, onOpenChange, ...viewProps }, ref) => {
-  const nativeID = React.useId();
+const Root = forwardRef<RootRef, RootProps>(({ type = "foreground", open, onOpenChange, ...viewProps }, ref) => {
+  const nativeID = useId();
 
   if (!open) {
     return null;
@@ -39,20 +39,20 @@ const Root = React.forwardRef<RootRef, RootProps>(({ type = "foreground", open,
 Root.displayName = "RootToast";
 
 function useToastContext() {
-  const context = React.useContext(ToastContext);
+  const context = useContext(ToastContext);
   if (!context) {
     throw new Error("Toast compound components cannot be rendered outside the Toast component");
   }
   return context;
 }
 
-const Close = React.forwardRef<CloseRef, CloseProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+const Close = forwardRef<CloseRef, CloseProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
   const { onOpenChange } = useToastContext();
 
-  function onPress(ev: GestureResponderEvent) {
+  function onPress(event: GestureResponderEvent) {
     if (disabled) return;
     onOpenChange(false);
-    onPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   return (
@@ -69,13 +69,13 @@ const Close = React.forwardRef<CloseRef, CloseProps>(({ onPress: onPressProp, di
 
 Close.displayName = "CloseToast";
 
-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 } = useToastContext();
 
-  function onPress(ev: GestureResponderEvent) {
+  function onPress(event: GestureResponderEvent) {
     if (disabled) return;
     onOpenChange(false);
-    onPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   return (
@@ -92,7 +92,7 @@ const Action = React.forwardRef<ActionRef, ActionProps>(({ onPress: onPressProp,
 
 Action.displayName = "ActionToast";
 
-const Title = React.forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
+const Title = forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
   const { nativeID } = useToastContext();
 
   return (
@@ -107,7 +107,7 @@ const Title = React.forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
 
 Title.displayName = "TitleToast";
 
-const Description = React.forwardRef<DescriptionRef, DescriptionProps>(({ ...props }, ref) => {
+const Description = forwardRef<DescriptionRef, DescriptionProps>(({ ...props }, ref) => {
   const { nativeID } = useToastContext();
 
   return (

package/src/toggle/toggle.tsx

@@ -1,16 +1,16 @@
-import * as React from "react";
+import { forwardRef } from "react";
 import { Pressable, type GestureResponderEvent } from "react-native";
 
-import * as Slot from "../slot";
+import * as Render from "../render";
 
 import type { RootProps, RootRef } from "./types";
 
-const Root = React.forwardRef<RootRef, RootProps>(({ pressed, onPressedChange, disabled, onPress: onPressProp, ...props }, ref) => {
-  function onPress(ev: GestureResponderEvent) {
+const Root = forwardRef<RootRef, RootProps>(({ pressed, onPressedChange, disabled, onPress: onPressProp, ...props }, ref) => {
+  function onPress(event: GestureResponderEvent) {
     if (disabled) return;
     const newValue = !pressed;
     onPressedChange(newValue);
-    onPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   return (

package/src/toggle/toggle.web.tsx

@@ -1,14 +1,14 @@
 // import * as Toggle from "@radix-ui/react-toggle";
-// import * as React from "react";
+//
 // import { Pressable, type GestureResponderEvent } from "react-native";
 
-// import * as Slot from "../slot";
+// import * as Render from "../render";
 
 // import type { RootProps, RootRef } from "./types";
 
-// const Root = React.forwardRef<RootRef, RootProps>(({ pressed, onPressedChange, disabled, onPress: onPressProp, ...props }, ref) => {
-//   function onPress(ev: GestureResponderEvent) {
-//     onPressProp?.(ev);
+// const Root = forwardRef<RootRef, RootProps>(({ pressed, onPressedChange, disabled, onPress: onPressProp, ...props }, ref) => {
+//   function onPress(event: GestureResponderEvent) {
+//     onPressProp?.(event);
 //     onPressedChange(!pressed);
 //   }
 

package/src/toggle-group/toggle-group.tsx

@@ -1,14 +1,14 @@
-import * as React from "react";
+import { createContext, forwardRef, useContext } from "react";
 import { Pressable, View, type GestureResponderEvent } from "react-native";
 
-import * as Slot from "../slot";
+import * as Render from "../render";
 import { ToggleGroupUtils } from "../utils";
 
 import type { ItemProps, ItemRef, RootProps, RootRef } from "./types";
 
-const ToggleGroupContext = React.createContext<RootProps | null>(null);
+const ToggleGroupContext = createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
+const Root = forwardRef<RootRef, RootProps>(
   (
     { render, type, value, onValueChange, disabled = false, rovingFocus: _rovingFocus, orientation: _orientation, dir: _dir, loop: _loop, ...viewProps },
     ref,
@@ -37,20 +37,20 @@ const Root = React.forwardRef<RootRef, RootProps>(
 Root.displayName = "RootToggleGroup";
 
 function useRootContext() {
-  const context = React.useContext(ToggleGroupContext);
+  const context = useContext(ToggleGroupContext);
   if (!context) {
     throw new Error("ToggleGroup compound components cannot be rendered outside the ToggleGroup component");
   }
   return context;
 }
 
-const ItemContext = React.createContext<ItemProps | null>(null);
+const ItemContext = createContext<ItemProps | null>(null);
 
-const Item = React.forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props }, ref) => {
-  // const id = React.useId();
+const Item = forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props }, ref) => {
+  // const id = useId();
   const { type, disabled, value, onValueChange } = useRootContext();
 
-  function onPress(ev: GestureResponderEvent) {
+  function onPress(event: GestureResponderEvent) {
     if (disabled || disabledProp) return;
     if (type === "single") {
       onValueChange(ToggleGroupUtils.getNewSingleValue(value, itemValue));
@@ -58,7 +58,7 @@ const Item = React.forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled:
     if (type === "multiple") {
       onValueChange(ToggleGroupUtils.getNewMultipleValue(value, itemValue));
     }
-    onPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   const isChecked = type === "single" ? ToggleGroupUtils.getIsSelected(value, itemValue) : undefined;
@@ -88,7 +88,7 @@ const Item = React.forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled:
 Item.displayName = "ItemToggleGroup";
 
 function useItemContext() {
-  const context = React.useContext(ItemContext);
+  const context = useContext(ItemContext);
   if (!context) {
     throw new Error("ToggleGroupItem compound components cannot be rendered outside the ToggleGroupItem component");
   }

package/src/toggle-group/toggle-group.web.tsx

@@ -1,15 +1,15 @@
 // import * as ToggleGroup from "@radix-ui/react-toggle-group";
-// import * as React from "react";
+//
 // import { Pressable, View, type GestureResponderEvent } from "react-native";
 
-// import * as Slot from "../slot";
+// import * as Render from "../render";
 // import { ToggleGroupUtils } from "../utils";
 
 // import type { ItemProps, ItemRef, RootProps, RootRef } from "./types";
 
-// const ToggleGroupContext = React.createContext<RootProps | null>(null);
+// const ToggleGroupContext = createContext<RootProps | null>(null);
 
-// const Root = React.forwardRef<RootRef, RootProps>(
+// const Root = forwardRef<RootRef, RootProps>(
 //   ({ render, type, value, onValueChange, disabled = false, rovingFocus, orientation, dir, loop, ...viewProps }, ref) => {
 //
 //     return (
@@ -47,20 +47,20 @@
 // Root.displayName = "RootToggleGroup";
 
 // function useRootContext() {
-//   const context = React.useContext(ToggleGroupContext);
+//   const context = useContext(ToggleGroupContext);
 //   if (!context) {
 //     throw new Error("ToggleGroup compound components cannot be rendered outside the ToggleGroup component");
 //   }
 //   return context;
 // }
 
-// const ItemContext = React.createContext<ItemProps | null>(null);
+// const ItemContext = createContext<ItemProps | null>(null);
 
-// const Item = React.forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props }, ref) => {
+// const Item = forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props }, ref) => {
 //   const { type, disabled, value, onValueChange } = useRootContext();
 
-//   function onPress(ev: GestureResponderEvent) {
-//     onPressProp?.(ev);
+//   function onPress(event: GestureResponderEvent) {
+//     onPressProp?.(event);
 //     if (type === "single") {
 //       onValueChange(ToggleGroupUtils.getNewSingleValue(value, itemValue));
 //     }
@@ -91,7 +91,7 @@
 // Item.displayName = "ItemToggleGroup";
 
 // function useItemContext() {
-//   const context = React.useContext(ItemContext);
+//   const context = useContext(ItemContext);
 //   if (!context) {
 //     throw new Error("ToggleGroupItem compound components cannot be rendered outside the ToggleGroupItem component");
 //   }

package/src/toolbar/toolbar.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
+import { forwardRef, createContext, useContext } from "react";
 import { Pressable, View, type GestureResponderEvent } from "react-native";
 
-import * as Slot from "../slot";
+import * as Render from "../render";
 import { ToggleGroupUtils } from "../utils";
 
 import type {
@@ -19,7 +19,7 @@ import type {
   ToggleItemRef,
 } from "./types";
 
-const Root = React.forwardRef<RootRef, RootProps>(({ orientation: _orientation, dir: _dir, loop: _loop, ...props }, ref) => {
+const Root = forwardRef<RootRef, RootProps>(({ orientation: _orientation, dir: _dir, loop: _loop, ...props }, ref) => {
   return (
     <Component
       ref={ref}
@@ -31,9 +31,9 @@ const Root = React.forwardRef<RootRef, RootProps>(({ orientation: _orientation,
 
 Root.displayName = "RootNativeToolbar";
 
-const ToggleGroupContext = React.createContext<ToggleGroupProps | null>(null);
+const ToggleGroupContext = createContext<ToggleGroupProps | null>(null);
 
-const ToggleGroup = React.forwardRef<ToggleGroupRef, ToggleGroupProps>(({ type, value, onValueChange, disabled = false, ...viewProps }, ref) => {
+const ToggleGroup = forwardRef<ToggleGroupRef, ToggleGroupProps>(({ type, value, onValueChange, disabled = false, ...viewProps }, ref) => {
   return (
     <ToggleGroupContext.Provider
       value={
@@ -57,18 +57,18 @@ const ToggleGroup = React.forwardRef<ToggleGroupRef, ToggleGroupProps>(({ type,
 ToggleGroup.displayName = "ToggleGroupNativeToolbar";
 
 function useToggleGroupContext() {
-  const context = React.useContext(ToggleGroupContext);
+  const context = useContext(ToggleGroupContext);
   if (!context) {
     throw new Error("ToggleGroup compound components cannot be rendered outside the ToggleGroup component");
   }
   return context;
 }
 
-const ToggleItem = React.forwardRef<ToggleItemRef, ToggleItemProps>(
+const ToggleItem = forwardRef<ToggleItemRef, ToggleItemProps>(
   ({ render, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props }, ref) => {
     const { type, disabled, value, onValueChange } = useToggleGroupContext();
 
-    function onPress(ev: GestureResponderEvent) {
+    function onPress(event: GestureResponderEvent) {
       if (disabled || disabledProp) return;
       if (type === "single") {
         onValueChange(ToggleGroupUtils.getNewSingleValue(value, itemValue));
@@ -76,7 +76,7 @@ const ToggleItem = React.forwardRef<ToggleItemRef, ToggleItemProps>(
       if (type === "multiple") {
         onValueChange(ToggleGroupUtils.getNewMultipleValue(value, itemValue));
       }
-      onPressProp?.(ev);
+      onPressProp?.(event);
     }
 
     const isChecked = type === "single" ? ToggleGroupUtils.getIsSelected(value, itemValue) : undefined;
@@ -104,7 +104,7 @@ const ToggleItem = React.forwardRef<ToggleItemRef, ToggleItemProps>(
 
 ToggleItem.displayName = "ToggleItemNativeToolbar";
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ ...props }, ref) => {
+const Separator = forwardRef<SeparatorRef, SeparatorProps>(({ ...props }, ref) => {
   return (
     <Component
       role={"separator"}
@@ -116,7 +116,7 @@ const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ ...props },
 
 Separator.displayName = "SeparatorNativeToolbar";
 
-const Link = React.forwardRef<LinkRef, LinkProps>(({ ...props }, ref) => {
+const Link = forwardRef<LinkRef, LinkProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}
@@ -128,7 +128,7 @@ const Link = React.forwardRef<LinkRef, LinkProps>(({ ...props }, ref) => {
 
 Link.displayName = "LinkNativeToolbar";
 
-const Button = React.forwardRef<ButtonRef, ButtonProps>(({ ...props }, ref) => {
+const Button = forwardRef<ButtonRef, ButtonProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}