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

package/src/select/select.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
+import { createContext, forwardRef, useId, useState, useContext, useEffect } from "react";
 import { BackHandler, Pressable, Text, View, type GestureResponderEvent, type LayoutChangeEvent, type LayoutRectangle } from "react-native";
 
 import { useAugmentedRef, useControllableState, useRelativePosition, type LayoutPosition } from "../hooks";
 import { Portal as RNPPortal } from "../portal";
-import * as Slot from "../slot";
+import * as Render from "../render";
 
 import type {
   ContentProps,
@@ -45,19 +45,19 @@ interface RootContextInterface extends SharedRootContext {
   nativeID: string;
 }
 
-const RootContext = React.createContext<RootContextInterface | null>(null);
+const RootContext = createContext<RootContextInterface | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
+const Root = forwardRef<RootRef, RootProps>(
   ({ render, value: valueProp, defaultValue, onValueChange: onValueChangeProp, onOpenChange: onOpenChangeProp, disabled, ...viewProps }, ref) => {
-    const nativeID = React.useId();
+    const nativeID = useId();
     const [value, onValueChange] = useControllableState({
       prop: valueProp,
       defaultProp: defaultValue,
       onChange: onValueChangeProp,
     });
-    const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
-    const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
-    const [open, setOpen] = React.useState(false);
+    const [triggerPosition, setTriggerPosition] = useState<LayoutPosition | null>(null);
+    const [contentLayout, setContentLayout] = useState<LayoutRectangle | null>(null);
+    const [open, setOpen] = useState(false);
 
     function onOpenChange(value: boolean) {
       setOpen(value);
@@ -91,14 +91,14 @@ const Root = React.forwardRef<RootRef, RootProps>(
 Root.displayName = "RootNativeSelect";
 
 function useRootContext() {
-  const context = React.useContext(RootContext);
+  const context = useContext(RootContext);
   if (!context) {
     throw new Error("Select compound components cannot be rendered outside the Select 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, onOpenChange, disabled: disabledRoot, setTriggerPosition } = useRootContext();
 
   const augmentedRef = useAugmentedRef({
@@ -117,13 +117,13 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressPr
     },
   });
 
-  function onPress(ev: GestureResponderEvent) {
+  function onPress(event: GestureResponderEvent) {
     if (disabled) return;
     augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
       setTriggerPosition({ width, pageX, pageY: pageY, height });
     });
     onOpenChange(!open);
-    onPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   return (
@@ -141,7 +141,7 @@ const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressPr
 
 Trigger.displayName = "TriggerNativeSelect";
 
-const Value = React.forwardRef<ValueRef, ValueProps>(({ placeholder, ...props }, ref) => {
+const Value = forwardRef<ValueRef, ValueProps>(({ placeholder, ...props }, ref) => {
   const { value } = useRootContext();
 
   return (
@@ -182,16 +182,16 @@ function Portal({ keepMounted, hostName, children }: PortalProps) {
   );
 }
 
-const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+const Backdrop = forwardRef<BackdropRef, BackdropProps>(({ keepMounted, onPress: onPressProp, closeOnPress = true, ...props }, ref) => {
   const { open, onOpenChange, setTriggerPosition, setContentLayout } = useRootContext();
 
-  function onPress(ev: GestureResponderEvent) {
+  function onPress(event: GestureResponderEvent) {
     if (closeOnPress) {
       setTriggerPosition(null);
       setContentLayout(null);
       onOpenChange(false);
     }
-    OnPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   if (!keepMounted) {
@@ -214,7 +214,7 @@ Backdrop.displayName = "BackdropNativeSelect";
 /**
  * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
  */
-const Content = React.forwardRef<ContentRef, ContentProps>(
+const Content = forwardRef<ContentRef, ContentProps>(
   (
     {
       render = false,
@@ -235,7 +235,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
   ) => {
     const { open, onOpenChange, contentLayout, nativeID, triggerPosition, setContentLayout, setTriggerPosition } = useRootContext();
 
-    React.useEffect(() => {
+    useEffect(() => {
       const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
         setTriggerPosition(null);
         setContentLayout(null);
@@ -289,15 +289,15 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
 
 Content.displayName = "ContentNativeSelect";
 
-const ItemContext = React.createContext<{
+const ItemContext = createContext<{
   itemValue: string;
   label: string;
 } | null>(null);
 
-const Item = React.forwardRef<ItemRef, ItemProps>(
+const Item = forwardRef<ItemRef, ItemProps>(
   ({ render, value: itemValue, label, onPress: onPressProp, disabled = false, closeOnPress = true, ...props }, ref) => {
     const { onOpenChange, value, onValueChange, setTriggerPosition, setContentLayout } = useRootContext();
-    function onPress(ev: GestureResponderEvent) {
+    function onPress(event: GestureResponderEvent) {
       if (closeOnPress) {
         setTriggerPosition(null);
         setContentLayout(null);
@@ -305,7 +305,7 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
       }
 
       onValueChange({ value: itemValue, label });
-      onPressProp?.(ev);
+      onPressProp?.(event);
     }
 
     return (
@@ -332,14 +332,14 @@ const Item = React.forwardRef<ItemRef, ItemProps>(
 Item.displayName = "ItemNativeSelect";
 
 function useItemContext() {
-  const context = React.useContext(ItemContext);
+  const context = useContext(ItemContext);
   if (!context) {
     throw new Error("Item compound components cannot be rendered outside of an Item component");
   }
   return context;
 }
 
-const ItemText = React.forwardRef<ItemTextRef, ItemTextProps>(({ ...props }, ref) => {
+const ItemText = forwardRef<ItemTextRef, ItemTextProps>(({ ...props }, ref) => {
   const { label } = useItemContext();
 
   return (
@@ -354,7 +354,7 @@ const ItemText = React.forwardRef<ItemTextRef, ItemTextProps>(({ ...props }, ref
 
 ItemText.displayName = "ItemTextNativeSelect";
 
-const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(({ keepMounted, ...props }, ref) => {
+const ItemIndicator = forwardRef<ItemIndicatorRef, ItemIndicatorProps>(({ keepMounted, ...props }, ref) => {
   const { itemValue } = useItemContext();
   const { value } = useRootContext();
 
@@ -375,7 +375,7 @@ const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(({
 
 ItemIndicator.displayName = "ItemIndicatorNativeSelect";
 
-const Group = React.forwardRef<GroupRef, GroupProps>(({ ...props }, ref) => {
+const Group = forwardRef<GroupRef, GroupProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}
@@ -387,7 +387,7 @@ const Group = React.forwardRef<GroupRef, GroupProps>(({ ...props }, ref) => {
 
 Group.displayName = "GroupNativeSelect";
 
-const Label = React.forwardRef<LabelRef, LabelProps>(({ ...props }, ref) => {
+const Label = forwardRef<LabelRef, LabelProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}
@@ -398,7 +398,7 @@ const Label = React.forwardRef<LabelRef, LabelProps>(({ ...props }, ref) => {
 
 Label.displayName = "LabelNativeSelect";
 
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ decorative, ...props }, ref) => {
+const Separator = forwardRef<SeparatorRef, SeparatorProps>(({ decorative, ...props }, ref) => {
   return (
     <Component
       role={decorative ? "presentation" : "separator"}

package/src/select/select.web.tsx

@@ -1,9 +1,9 @@
 // import * as Select from "@radix-ui/react-select";
-// import * as React from "react";
+//
 // import { Pressable, Text, View } from "react-native";
 
 // import { useAugmentedRef, useControllableState, useIsomorphicLayoutEffect } from "../hooks";
-// import * as Slot from "../slot";
+// import * as Render from "../render";
 
 // import type {
 //   ContentProps,
@@ -35,7 +35,7 @@
 //   ViewportProps,
 // } from "./types";
 
-// const SelectContext = React.createContext<
+// const SelectContext = createContext<
 //   | (SharedRootContext & {
 //       open: boolean;
 //       onOpenChange: (open: boolean) => void;
@@ -47,14 +47,14 @@
 //  * @web Parameter of `onValueChange` has the value of `value` for the `value` and the `label` of the selected Option
 //  * @ex When an Option with a label of Green Apple, the parameter passed to `onValueChange` is { value: 'green-apple', label: 'green-apple' }
 //  */
-// const Root = React.forwardRef<RootRef, RootProps>(
+// const Root = forwardRef<RootRef, RootProps>(
 //   ({ render, value: valueProp, defaultValue, onValueChange: onValueChangeProp, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
 //     const [value, onValueChange] = useControllableState({
 //       prop: valueProp,
 //       defaultProp: defaultValue,
 //       onChange: onValueChangeProp,
 //     });
-//     const [open, setOpen] = React.useState(false);
+//     const [open, setOpen] = useState(false);
 
 //     function onOpenChange(value: boolean) {
 //       setOpen(value);
@@ -95,14 +95,14 @@
 // Root.displayName = "RootWebSelect";
 
 // function useRootContext() {
-//   const context = React.useContext(SelectContext);
+//   const context = useContext(SelectContext);
 //   if (!context) {
 //     throw new Error("Select compound components cannot be rendered outside the Select component");
 //   }
 //   return context;
 // }
 
-// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ role: _role, disabled, ...props }, ref) => {
+// const Trigger = forwardRef<TriggerRef, TriggerProps>(({ role: _role, disabled, ...props }, ref) => {
 //   const { open, onOpenChange } = useRootContext();
 //   const augmentedRef = useAugmentedRef({
 //     ref,
@@ -142,14 +142,14 @@
 
 // Trigger.displayName = "TriggerWebSelect";
 
-// const Value = React.forwardRef<ValueRef, ValueProps>(({ placeholder, children, ...props }, ref) => {
+// const Value = forwardRef<ValueRef, ValueProps>(({ placeholder, children, ...props }, ref) => {
 //   return (
-//     <Slot.Text
+//     <Render.Text
 //       ref={ref}
 //       {...props}
 //     >
 //       <Select.Value placeholder={placeholder}>{children}</Select.Value>
-//     </Slot.Text>
+//     </Render.Text>
 //   );
 // });
 
@@ -164,7 +164,7 @@
 //   );
 // }
 
-// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, children, ...props }, ref) => {
+// const Backdrop = forwardRef<BackdropRef, BackdropProps>(({ keepMounted, children, ...props }, ref) => {
 //   const { open } = useRootContext();
 
 //
@@ -183,7 +183,7 @@
 
 // Backdrop.displayName = "BackdropWebSelect";
 
-// const Content = React.forwardRef<ContentRef, ContentProps>(
+// const Content = forwardRef<ContentRef, ContentProps>(
 //   (
 //     {
 //       render = false,
@@ -227,15 +227,15 @@
 
 // Content.displayName = "ContentWebSelect";
 
-// const ItemContext = React.createContext<{
+// const ItemContext = createContext<{
 //   itemValue: string;
 //   label: string;
 // } | null>(null);
 
-// const Item = React.forwardRef<ItemRef, ItemProps>(({ closeOnPress = true, label, value, children, ...props }, ref) => {
+// const Item = forwardRef<ItemRef, ItemProps>(({ closeOnPress = true, label, value, children, ...props }, ref) => {
 //   return (
 //     <ItemContext.Provider value={{ itemValue: value, label: label }}>
-//       <Slot.Pressable
+//       <Render.Pressable
 //         ref={ref}
 //         {...props}
 //       >
@@ -246,7 +246,7 @@
 //         >
 //           <>{children as React.ReactNode}</>
 //         </Select.Item>
-//       </Slot.Pressable>
+//       </Render.Pressable>
 //     </ItemContext.Provider>
 //   );
 // });
@@ -254,14 +254,14 @@
 // Item.displayName = "ItemWebSelect";
 
 // function useItemContext() {
-//   const context = React.useContext(ItemContext);
+//   const context = useContext(ItemContext);
 //   if (!context) {
 //     throw new Error("Item compound components cannot be rendered outside of an Item component");
 //   }
 //   return context;
 // }
 
-// const ItemText = React.forwardRef<ItemTextRef, Omit<ItemTextProps, "children">>(({ ...props }, ref) => {
+// const ItemText = forwardRef<ItemTextRef, Omit<ItemTextProps, "children">>(({ ...props }, ref) => {
 //   const { label } = useItemContext();
 
 //
@@ -279,7 +279,7 @@
 
 // ItemText.displayName = "ItemTextWebSelect";
 
-// const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(({ keepMounted: _forceMount, ...props }, ref) => {
+// const ItemIndicator = forwardRef<ItemIndicatorRef, ItemIndicatorProps>(({ keepMounted: _forceMount, ...props }, ref) => {
 //
 //   return (
 //     <Select.ItemIndicator render>
@@ -293,7 +293,7 @@
 
 // ItemIndicator.displayName = "ItemIndicatorWebSelect";
 
-// const Group = React.forwardRef<GroupRef, GroupProps>(({ ...props }, ref) => {
+// const Group = forwardRef<GroupRef, GroupProps>(({ ...props }, ref) => {
 //
 //   return (
 //     <Select.Group render>
@@ -307,7 +307,7 @@
 
 // Group.displayName = "GroupWebSelect";
 
-// const Label = React.forwardRef<LabelRef, LabelProps>(({ ...props }, ref) => {
+// const Label = forwardRef<LabelRef, LabelProps>(({ ...props }, ref) => {
 //
 //   return (
 //     <Select.Label render>
@@ -321,7 +321,7 @@
 
 // Label.displayName = "LabelWebSelect";
 
-// const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ decorative, ...props }, ref) => {
+// const Separator = forwardRef<SeparatorRef, SeparatorProps>(({ decorative, ...props }, ref) => {
 //
 //   return (
 //     <Select.Separator render>

package/src/separator/separator.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
+import { forwardRef } from "react";
 import { View } 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>(({ decorative, orientation = "horizontal", ...props }, ref) => {
+const Root = forwardRef<RootRef, RootProps>(({ decorative, orientation = "horizontal", ...props }, ref) => {
   return (
     <Component
       role={decorative ? "presentation" : "separator"}

package/src/slider/slider.tsx

@@ -1,13 +1,13 @@
-import * as React from "react";
+import { createContext, forwardRef, useContext } from "react";
 import { View } from "react-native";
 
-import * as Slot from "../slot";
+import * as Render from "../render";
 
 import type { RangeProps, RangeRef, RootProps, RootRef, ThumbProps, ThumbRef, TrackProps, TrackRef } from "./types";
 
-const RootContext = React.createContext<RootProps | null>(null);
+const RootContext = createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(
+const Root = forwardRef<RootRef, RootProps>(
   ({ render, value, disabled, min, max, dir: _dir, inverted: _inverted, step: _step, onValueChange: _onValueChange, ...props }, ref) => {
     return (
       <RootContext.Provider value={{ value, disabled, min, max }}>
@@ -24,14 +24,14 @@ const Root = React.forwardRef<RootRef, RootProps>(
 Root.displayName = "RootNativeSlider";
 
 function useSliderContext() {
-  const context = React.useContext(RootContext);
+  const context = useContext(RootContext);
   if (context === null) {
     throw new Error("Slider compound components cannot be rendered outside the Slider component");
   }
   return context;
 }
 
-const Track = React.forwardRef<TrackRef, TrackProps>(({ ...props }, ref) => {
+const Track = forwardRef<TrackRef, TrackProps>(({ ...props }, ref) => {
   const { value, min, max, disabled } = useSliderContext();
 
   return (
@@ -50,7 +50,7 @@ const Track = React.forwardRef<TrackRef, TrackProps>(({ ...props }, ref) => {
 
 Track.displayName = "TrackNativeSlider";
 
-const Range = React.forwardRef<RangeRef, RangeProps>(({ ...props }, ref) => {
+const Range = forwardRef<RangeRef, RangeProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}
@@ -62,7 +62,7 @@ const Range = React.forwardRef<RangeRef, RangeProps>(({ ...props }, ref) => {
 
 Range.displayName = "RangeNativeSlider";
 
-const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ ...props }, ref) => {
+const Thumb = forwardRef<ThumbRef, ThumbProps>(({ ...props }, ref) => {
   return (
     <Component
       accessibilityRole="adjustable"

package/src/slider/slider.web.tsx

@@ -1,12 +1,12 @@
 // import * as Slider from "@radix-ui/react-slider";
-// import * as React from "react";
+//
 // import { View } from "react-native";
 
-// import * as Slot from "../slot";
+// import * as Render from "../render";
 
 // import type { RangeProps, RangeRef, RootProps, RootRef, ThumbProps, ThumbRef, TrackProps, TrackRef } from "./types";
 
-// const Root = React.forwardRef<RootRef, RootProps>(({ value, disabled, min, max, dir, inverted, step = 1, onValueChange, ...props }, ref) => {
+// const Root = forwardRef<RootRef, RootProps>(({ value, disabled, min, max, dir, inverted, step = 1, onValueChange, ...props }, ref) => {
 //
 //   return (
 //     <Slider.Root
@@ -30,7 +30,7 @@
 
 // Root.displayName = "RootWebSlider";
 
-// const Track = React.forwardRef<TrackRef, TrackProps>(({ ...props }, ref) => {
+// const Track = forwardRef<TrackRef, TrackProps>(({ ...props }, ref) => {
 //
 //   return (
 //     <Slider.Track render>
@@ -44,7 +44,7 @@
 
 // Track.displayName = "TrackWebSlider";
 
-// const Range = React.forwardRef<RangeRef, RangeProps>(({ ...props }, ref) => {
+// const Range = forwardRef<RangeRef, RangeProps>(({ ...props }, ref) => {
 //
 //   return (
 //     <Slider.Range render>
@@ -58,7 +58,7 @@
 
 // Range.displayName = "RangeWebSlider";
 
-// const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ ...props }, ref) => {
+// const Thumb = forwardRef<ThumbRef, ThumbProps>(({ ...props }, ref) => {
 //
 //   return (
 //     <Slider.Thumb render>

package/src/switch/switch.context.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+import { SwitchRootState } from "./types";
+
+export type SwitchRootContext = SwitchRootState;
+
+export const SwitchRootContext = React.createContext<SwitchRootContext | undefined>(undefined);
+
+export function useSwitchRootContext() {
+  const context = React.useContext(SwitchRootContext);
+  if (context === undefined) {
+    throw new Error("Base UI: SwitchRootContext is missing. Switch parts must be placed within <Switch.Root>.");
+  }
+
+  return context;
+}

package/src/switch/switch.tsx

@@ -1,49 +1,79 @@
-import * as React from "react";
-import { Pressable, View, type GestureResponderEvent } from "react-native";
+import { forwardRef, useMemo } from "react";
+import { type GestureResponderEvent } from "react-native";
 
-import * as Slot from "../slot";
+import * as Render from "../render";
 
-import type { RootProps, RootRef, ThumbProps, ThumbRef } from "./types";
+import { SwitchRootContext, useSwitchRootContext } from "./switch.context";
+import { SwitchRootRef, SwitchRootProps, SwitchRootState, SwitchThumbRef, SwitchThumbProps } from "./types";
 
-const Root = React.forwardRef<RootRef, RootProps>(
-  ({ render, checked, onCheckedChange, disabled, onPress: onPressProp, "aria-valuetext": ariaValueText, ...props }, ref) => {
-    function onPress(ev: GestureResponderEvent) {
-      if (disabled) return;
-      onCheckedChange(!checked);
-      onPressProp?.(ev);
+export const SwitchRoot = forwardRef(function SwitchRoot(componentProps: SwitchRootProps, forwardedRef: React.ForwardedRef<SwitchRootRef>) {
+  const {
+    render,
+    checked,
+    onCheckedChange,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    onPress: onPressProp,
+    "aria-valuetext": ariaValueText,
+    ...rest
+  } = componentProps;
+
+  const state: SwitchRootState = useMemo(
+    () => ({
+      checked,
+      disabled,
+      readOnly,
+      required,
+    }),
+    [checked, disabled, readOnly, required],
+  );
+
+  const onPress = (event: GestureResponderEvent) => {
+    if (disabled) {
+      return;
     }
+    onCheckedChange(!checked);
+    onPressProp?.(event);
+  };
+
+  const props = {
+    "ref": forwardedRef,
+    "role": "switch" as const,
+    "aria-disabled": disabled,
+    "aria-checked": checked,
+    "aria-valuetext": (ariaValueText ?? checked) ? "on" : "off",
+    "onPress": onPress,
+    "accessibilityState": { checked, disabled },
+    "disabled": disabled,
+    ...rest,
+  };
+
+  if (typeof render === "function") {
+    return <SwitchRootContext.Provider value={state}>{render(props, state)}</SwitchRootContext.Provider>;
+  }
 
-    return (
-      <Component
-        ref={ref}
-        aria-disabled={disabled}
-        role="switch"
-        aria-checked={checked}
-        aria-valuetext={(ariaValueText ?? checked) ? "on" : "off"}
-        onPress={onPress}
-        accessibilityState={{
-          checked,
-          disabled,
-        }}
-        disabled={disabled}
-        {...props}
-      />
-    );
-  },
-);
-
-Root.displayName = "RootNativeSwitch";
-
-const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ ...props }, ref) => {
   return (
-    <Component
-      ref={ref}
+    <SwitchRootContext.Provider value={state}>
+      <Render.Pressable {...props} />
+    </SwitchRootContext.Provider>
+  );
+});
+SwitchRoot.displayName = "SwitchRoot";
+
+const SwitchThumb = forwardRef(function SwitchThumb({ render, ...props }: SwitchThumbProps, forwardedRef: React.ForwardedRef<SwitchThumbRef>) {
+  const state = useSwitchRootContext();
+
+  if (typeof render === "function") {
+    return render(props, state);
+  }
+
+  return (
+    <Render.View
+      ref={forwardedRef}
       role="presentation"
       {...props}
     />
   );
 });
-
-Thumb.displayName = "ThumbNativeSwitch";
-
-export { Root, Thumb };
+SwitchThumb.displayName = "ThumbNativeSwitch";

package/src/switch/switch.web.tsx

@@ -1,21 +1,21 @@
 // import * as Switch from "@radix-ui/react-switch";
-// import * as React from "react";
+//
 // import { Pressable, View, type GestureResponderEvent } from "react-native";
 
-// import * as Slot from "../slot";
+// import * as Render from "../render";
 
 // import type { RootProps, RootRef, ThumbProps, ThumbRef } from "./types";
 
-// const Root = React.forwardRef<RootRef, RootProps>(
+// const Root = forwardRef<RootRef, RootProps>(
 //   ({ render, checked, onCheckedChange, disabled, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
-//     function onPress(ev: GestureResponderEvent) {
+//     function onPress(event: GestureResponderEvent) {
 //       onCheckedChange(!checked);
-//       onPressProp?.(ev);
+//       onPressProp?.(event);
 //     }
 
-//     function onKeyDown(ev: React.KeyboardEvent) {
-//       onKeyDownProp?.(ev);
-//       if (ev.key === " ") {
+//     function onKeyDown(event: React.KeyboardEvent) {
+//       onKeyDownProp?.(event);
+//       if (event.key === " ") {
 //         onCheckedChange(!checked);
 //       }
 //     }
@@ -43,7 +43,7 @@
 
 // Root.displayName = "RootWebSwitch";
 
-// const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ ...props }, ref) => {
+// const Thumb = forwardRef<ThumbRef, ThumbProps>(({ ...props }, ref) => {
 //
 //   return (
 //     <Switch.Thumb render>