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

package/src/popover/popover.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
+import { createContext, forwardRef, useId, useState, useContext, useEffect } from "react";
 import { BackHandler, Pressable, View, type GestureResponderEvent, type LayoutChangeEvent, type LayoutRectangle } from "react-native";
 
 import { useAugmentedRef, useRelativePosition, type LayoutPosition } from "../hooks";
 import { Portal as RNPPortal } from "../portal";
-import * as Slot from "../slot";
+import * as Render from "../render";
 
 import type {
   CloseProps,
@@ -29,13 +29,13 @@ interface RootContextInterface {
   nativeID: string;
 }
 
-const RootContext = React.createContext<RootContextInterface | null>(null);
+const RootContext = createContext<RootContextInterface | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(({ onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
-  const nativeID = React.useId();
-  const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
-  const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
-  const [open, setOpen] = React.useState(false);
+const Root = forwardRef<RootRef, RootProps>(({ onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+  const nativeID = useId();
+  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);
@@ -65,14 +65,14 @@ const Root = React.forwardRef<RootRef, RootProps>(({ onOpenChange: onOpenChangeP
 Root.displayName = "RootNativePopover";
 
 function useRootContext() {
-  const context = React.useContext(RootContext);
+  const context = useContext(RootContext);
   if (!context) {
     throw new Error("Popover compound components cannot be rendered outside the Popover 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 { onOpenChange, open, setTriggerPosition } = useRootContext();
 
   const augmentedRef = useAugmentedRef({
@@ -91,13 +91,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 (
@@ -140,16 +140,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) {
@@ -172,7 +172,7 @@ Backdrop.displayName = "BackdropNativePopover";
 /**
  * @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,
@@ -193,7 +193,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
   ) => {
     const { open, onOpenChange, contentLayout, nativeID, setContentLayout, setTriggerPosition, triggerPosition } = useRootContext();
 
-    React.useEffect(() => {
+    useEffect(() => {
       const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
         setTriggerPosition(null);
         setContentLayout(null);
@@ -247,15 +247,15 @@ const Content = React.forwardRef<ContentRef, ContentProps>(
 
 Content.displayName = "ContentNativePopover";
 
-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, setContentLayout, setTriggerPosition } = useRootContext();
 
-  function onPress(ev: GestureResponderEvent) {
+  function onPress(event: GestureResponderEvent) {
     if (disabled) return;
     setTriggerPosition(null);
     setContentLayout(null);
     onOpenChange(false);
-    onPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   return (

package/src/popover/popover.web.tsx

@@ -1,9 +1,9 @@
 // import * as Popover from "@radix-ui/react-popover";
-// import * as React from "react";
+//
 // import { Pressable, View, type GestureResponderEvent } from "react-native";
 
 // import { useAugmentedRef, useIsomorphicLayoutEffect } from "../hooks";
-// import * as Slot from "../slot";
+// import * as Render from "../render";
 
 // import type {
 //   CloseProps,
@@ -19,14 +19,14 @@
 //   TriggerRef,
 // } from "./types";
 
-// const RootContext = React.createContext<{
+// const RootContext = createContext<{
 //   open: boolean;
 //   onOpenChange: (open: boolean) => void;
 // } | null>(null);
 
-// const Root = React.forwardRef<RootRef, RootProps & { onOpenChange?: (open: boolean) => void }>(
+// const Root = forwardRef<RootRef, RootProps & { onOpenChange?: (open: boolean) => void }>(
 //   ({ render, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
-//     const [open, setOpen] = React.useState(false);
+//     const [open, setOpen] = useState(false);
 
 //     function onOpenChange(value: boolean) {
 //       setOpen(value);
@@ -52,14 +52,14 @@
 // Root.displayName = "RootWebPopover";
 
 // function useRootContext() {
-//   const context = React.useContext(RootContext);
+//   const context = useContext(RootContext);
 //   if (!context) {
 //     throw new Error("Popover compound components cannot be rendered outside the Popover 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 { onOpenChange, open } = useRootContext();
 //   const augmentedRef = useAugmentedRef({
 //     ref,
@@ -72,9 +72,9 @@
 //       },
 //     },
 //   });
-//   function onPress(ev: GestureResponderEvent) {
+//   function onPress(event: GestureResponderEvent) {
 //     if (onPressProp) {
-//       onPressProp(ev);
+//       onPressProp(event);
 //     }
 //     onOpenChange(!open);
 //   }
@@ -116,7 +116,7 @@
 //   );
 // }
 
-// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ...props }, ref) => {
+// const Backdrop = forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ...props }, ref) => {
 //
 //   return (
 //     <Component
@@ -128,7 +128,7 @@
 
 // Backdrop.displayName = "BackdropWebPopover";
 
-// const Content = React.forwardRef<ContentRef, ContentProps>(
+// const Content = forwardRef<ContentRef, ContentProps>(
 //   (
 //     {
 //       render = false,
@@ -175,13 +175,13 @@
 
 // Content.displayName = "ContentWebPopover";
 
-// const Close = React.forwardRef<CloseRef, CloseProps>(({ onPress: onPressProp, disabled, ...props }, ref) => {
+// const Close = forwardRef<CloseRef, CloseProps>(({ 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);
 //   }

package/src/progress/progress.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
+import { forwardRef, Component } from "react";
 import { View } from "react-native";
 
-import * as Slot from "../slot";
+import * as Render from "../render";
 
 import type { IndicatorProps, IndicatorRef, RootProps, RootRef } from "./types";
 
@@ -11,7 +11,7 @@ import type { IndicatorProps, IndicatorRef, RootProps, RootRef } from "./types";
 
 const DEFAULT_MAX = 100;
 
-const Root = React.forwardRef<RootRef, RootProps>(({ value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, ...props }, ref) => {
+const Root = forwardRef<RootRef, RootProps>(({ value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, ...props }, ref) => {
   const max = maxProp ?? DEFAULT_MAX;
   const value = isValidValueNumber(valueProp, max) ? valueProp : 0;
 
@@ -36,7 +36,7 @@ const Root = React.forwardRef<RootRef, RootProps>(({ value: valueProp, max: maxP
 
 Root.displayName = "RootProgress";
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ ...props }, ref) => {
+const Indicator = forwardRef<IndicatorRef, IndicatorProps>(({ ...props }, ref) => {
   return (
     <Component
       ref={ref}

package/src/progress/progress.web.tsx

@@ -1,14 +1,14 @@
 // import * as Progress from "@radix-ui/react-progress";
-// import * as React from "react";
+//
 // import { View } from "react-native";
 
-// import * as Slot from "../slot";
+// import * as Render from "../render";
 
 // import type { IndicatorProps, IndicatorRef, RootProps, RootRef } from "./types";
 
-// const ProgressContext = React.createContext<RootProps | null>(null);
+// const ProgressContext = createContext<RootProps | null>(null);
 
-// const Root = React.forwardRef<RootRef, RootProps>(({ value, max, getValueLabel, ...props }, ref) => {
+// const Root = forwardRef<RootRef, RootProps>(({ value, max, getValueLabel, ...props }, ref) => {
 //
 //   return (
 //     <ProgressContext.Provider value={{ value, max }}>
@@ -29,7 +29,7 @@
 
 // Root.displayName = "RootProgress";
 
-// const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ ...props }, ref) => {
+// const Indicator = forwardRef<IndicatorRef, IndicatorProps>(({ ...props }, ref) => {
 //
 //   return (
 //     <Progress.Indicator render>

package/src/radio-group/radio-group.tsx

@@ -1,13 +1,13 @@
-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 type { IndicatorProps, IndicatorRef, ItemProps, ItemRef, RootProps, RootRef } from "./types";
 
-const RadioGroupContext = React.createContext<RootProps | null>(null);
+const RadioGroupContext = createContext<RootProps | null>(null);
 
-const Root = React.forwardRef<RootRef, RootProps>(({ value, onValueChange, disabled = false, ...viewProps }, ref) => {
+const Root = forwardRef<RootRef, RootProps>(({ value, onValueChange, disabled = false, ...viewProps }, ref) => {
   return (
     <RadioGroupContext.Provider
       value={{
@@ -28,7 +28,7 @@ const Root = React.forwardRef<RootRef, RootProps>(({ value, onValueChange, disab
 Root.displayName = "RootRadioGroup";
 
 function useRadioGroupContext() {
-  const context = React.useContext(RadioGroupContext);
+  const context = useContext(RadioGroupContext);
   if (!context) {
     throw new Error("RadioGroup compound components cannot be rendered outside the RadioGroup component");
   }
@@ -39,15 +39,15 @@ interface RadioItemContext {
   itemValue: string | undefined;
 }
 
-const RadioItemContext = React.createContext<RadioItemContext | null>(null);
+const RadioItemContext = createContext<RadioItemContext | 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 { disabled, value, onValueChange } = useRadioGroupContext();
 
-  function onPress(ev: GestureResponderEvent) {
+  function onPress(event: GestureResponderEvent) {
     if (disabled || disabledProp) return;
     onValueChange(itemValue);
-    onPressProp?.(ev);
+    onPressProp?.(event);
   }
 
   return (
@@ -75,14 +75,14 @@ const Item = React.forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled:
 Item.displayName = "ItemRadioGroup";
 
 function useRadioItemContext() {
-  const context = React.useContext(RadioItemContext);
+  const context = useContext(RadioItemContext);
   if (!context) {
     throw new Error("RadioItem compound components cannot be rendered outside the RadioItem component");
   }
   return context;
 }
 
-const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ keepMounted, ...props }, ref) => {
+const Indicator = forwardRef<IndicatorRef, IndicatorProps>(({ keepMounted, ...props }, ref) => {
   const { value } = useRadioGroupContext();
   const { itemValue } = useRadioItemContext();
 

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

@@ -1,14 +1,14 @@
 // import * as RadioGroup from "@radix-ui/react-radio-group";
-// import * as React from "react";
+//
 // import { GestureResponderEvent, Pressable, View } from "react-native";
 
-// import * as Slot from "../slot";
+// import * as Render from "../render";
 
 // import type { IndicatorProps, IndicatorRef, ItemProps, ItemRef, RootProps, RootRef } from "./types";
 
-// const RadioGroupContext = React.createContext<RootProps | null>(null);
+// const RadioGroupContext = createContext<RootProps | null>(null);
 
-// const Root = React.forwardRef<RootRef, RootProps>(({ value, onValueChange, disabled = false, ...viewProps }, ref) => {
+// const Root = forwardRef<RootRef, RootProps>(({ value, onValueChange, disabled = false, ...viewProps }, ref) => {
 //
 //   return (
 //     <RadioGroupContext.Provider
@@ -35,18 +35,18 @@
 
 // Root.displayName = "RootRadioGroup";
 // function useRadioGroupContext() {
-//   const context = React.useContext(RadioGroupContext);
+//   const context = useContext(RadioGroupContext);
 //   if (!context) {
 //     throw new Error("RadioGroup compound components cannot be rendered outside the RadioGroup component");
 //   }
 //   return context;
 // }
-// const Item = React.forwardRef<ItemRef, ItemProps>(({ value, onPress: onPressProps, ...props }, ref) => {
+// const Item = forwardRef<ItemRef, ItemProps>(({ value, onPress: onPressProps, ...props }, ref) => {
 //   const { onValueChange } = useRadioGroupContext();
 
-//   function onPress(ev: GestureResponderEvent) {
+//   function onPress(event: GestureResponderEvent) {
 //     if (onPressProps) {
-//       onPressProps(ev);
+//       onPressProps(event);
 //     }
 //     onValueChange(value);
 //   }
@@ -68,7 +68,7 @@
 
 // Item.displayName = "ItemRadioGroup";
 
-// const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ keepMounted, ...props }, ref) => {
+// const Indicator = forwardRef<IndicatorRef, IndicatorProps>(({ keepMounted, ...props }, ref) => {
 //
 //   return (
 //     <RadioGroup.Indicator render>

package/src/render/index.ts

@@ -0,0 +1 @@
+export * from "./render";

package/src/{slot/slot.tsx → render/render.tsx}

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { cloneElement, isValidElement } from "react";
 import {
   Image as ReactNativeImage,
@@ -24,7 +23,7 @@ const Pressable = (props: BrandMapUIComponentProps<typeof ReactNativePressable>)
   }
 
   if (!isValidElement(render)) {
-    console.log("Slot.Pressable - Invalid render prop", render);
+    console.log("Render.Pressable - Invalid render prop", render);
     return <></>;
   }
 
@@ -41,7 +40,7 @@ const Pressable = (props: BrandMapUIComponentProps<typeof ReactNativePressable>)
     },
   );
 };
-// Pressable.displayName = "SlotPressable";
+// Pressable.displayName = "RenderPressable";
 
 const View = (props: BrandMapUIComponentProps<typeof ReactNativeView>): React.JSX.Element => {
   const { children, render, ...rest } = props;
@@ -51,7 +50,7 @@ const View = (props: BrandMapUIComponentProps<typeof ReactNativeView>): React.JS
   }
 
   if (!isValidElement(render)) {
-    console.log("Slot.View - Invalid render prop", render);
+    console.log("Render.View - Invalid render prop", render);
     return <></>;
   }
 
@@ -68,7 +67,7 @@ const View = (props: BrandMapUIComponentProps<typeof ReactNativeView>): React.JS
     },
   );
 };
-// View.displayName = "SlotView";
+// View.displayName = "RenderView";
 
 const Text = (props: BrandMapUIComponentProps<typeof ReactNativeText>): React.JSX.Element => {
   const { children, render, ...rest } = props;
@@ -78,7 +77,7 @@ const Text = (props: BrandMapUIComponentProps<typeof ReactNativeText>): React.JS
   }
 
   if (!isValidElement(render)) {
-    console.log("Slot.Text - Invalid render prop", render);
+    console.log("Render.Text - Invalid render prop", render);
     return <></>;
   }
 
@@ -95,7 +94,7 @@ const Text = (props: BrandMapUIComponentProps<typeof ReactNativeText>): React.JS
     },
   );
 };
-// Text.displayName = "SlotText";
+// Text.displayName = "RenderText";
 
 const Image = (props: BrandMapUIComponentProps<typeof ReactNativeImage> /**  & { children?: React.ReactNode } */): React.JSX.Element => {
   const { render, ...rest } = props;
@@ -105,7 +104,7 @@ const Image = (props: BrandMapUIComponentProps<typeof ReactNativeImage> /**  & {
   }
 
   if (!isValidElement(render)) {
-    console.log("Slot.Image - Invalid render prop", render);
+    console.log("Render.Image - Invalid render prop", render);
     return <></>;
   }
 
@@ -118,7 +117,7 @@ const Image = (props: BrandMapUIComponentProps<typeof ReactNativeImage> /**  & {
     // children,
   });
 };
-// Image.displayName = "SlotImage";
+// Image.displayName = "RenderImage";
 
 export { Image, Pressable, Text, View };
 
@@ -150,30 +149,30 @@ function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {
 
 type AnyProps = Record<string, any>;
 
-function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
+function mergeProps(renderProps: AnyProps, childProps: AnyProps) {
   // all child props should override
   const overrideProps = { ...childProps };
 
   for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
+    const renderPropValue = renderProps[propName];
     const childPropValue = childProps[propName];
 
     if (propName.startsWith("on")) {
-      if (!childPropValue && !slotPropValue) {
+      if (!childPropValue && !renderPropValue) {
         continue;
       }
 
       // if the handler exists on both, we compose them
-      if (slotPropValue && childPropValue) {
+      if (renderPropValue && childPropValue) {
         overrideProps[propName] = (...args: any[]) => {
           childPropValue(...args);
-          slotPropValue(...args);
+          renderPropValue(...args);
         };
       }
 
-      // but if it exists only on the slot, we use only this one
-      if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
+      // but if it exists only on the render, we use only this one
+      if (renderPropValue) {
+        overrideProps[propName] = renderPropValue;
       }
 
       continue;
@@ -181,42 +180,42 @@ function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
 
     // if it's `style`, we merge them
     if (propName === "style") {
-      overrideProps[propName] = combineStyles(slotPropValue, childPropValue);
+      overrideProps[propName] = combineStyles(renderPropValue, childPropValue);
     }
 
     // if it's `className`, we merge them
     if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+      overrideProps[propName] = [renderPropValue, childPropValue].filter(Boolean).join(" ");
     }
   }
 
-  return { ...slotProps, ...overrideProps };
+  return { ...renderProps, ...overrideProps };
 }
 
 type PressableStyle = ReactNativePressableProps["style"];
 type ImageStyle = StyleProp<ReactNativeImageStyle>;
 type Style = PressableStyle | ImageStyle;
 
-function combineStyles(slotStyle?: Style, childValue?: Style) {
-  if (typeof slotStyle === "function" && typeof childValue === "function") {
+function combineStyles(renderStyle?: Style, childValue?: Style) {
+  if (typeof renderStyle === "function" && typeof childValue === "function") {
     return (state: PressableStateCallbackType) => {
-      return StyleSheet.flatten([slotStyle(state), childValue(state)]);
+      return StyleSheet.flatten([renderStyle(state), childValue(state)]);
     };
   }
 
-  if (typeof slotStyle === "function") {
+  if (typeof renderStyle === "function") {
     return (state: PressableStateCallbackType) => {
-      return childValue ? StyleSheet.flatten([slotStyle(state), childValue]) : slotStyle(state);
+      return childValue ? StyleSheet.flatten([renderStyle(state), childValue]) : renderStyle(state);
     };
   }
 
   if (typeof childValue === "function") {
     return (state: PressableStateCallbackType) => {
-      return slotStyle ? StyleSheet.flatten([slotStyle, childValue(state)]) : childValue(state);
+      return renderStyle ? StyleSheet.flatten([renderStyle, childValue(state)]) : childValue(state);
     };
   }
 
-  return StyleSheet.flatten([slotStyle, childValue].filter(Boolean));
+  return StyleSheet.flatten([renderStyle, childValue].filter(Boolean));
 }
 
 export function isTextChildren(children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode)): children is string | string[] {