@brand-map/primitives 0.0.0-broken.0

package/src/toolbar/toolbar.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { Pressable, View, type GestureResponderEvent } from "react-native";
+
+import * as Slot from "../slot";
+import { ToggleGroupUtils } from "../utils";
+
+import type {
+  ButtonProps,
+  ButtonRef,
+  LinkProps,
+  LinkRef,
+  RootProps,
+  RootRef,
+  SeparatorProps,
+  SeparatorRef,
+  ToggleGroupProps,
+  ToggleGroupRef,
+  ToggleItemProps,
+  ToggleItemRef,
+} from "./types";
+
+const Root = React.forwardRef<RootRef, RootProps>(({ orientation: _orientation, dir: _dir, loop: _loop, ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="toolbar"
+      {...props}
+    />
+  );
+});
+
+Root.displayName = "RootNativeToolbar";
+
+const ToggleGroupContext = React.createContext<ToggleGroupProps | null>(null);
+
+const ToggleGroup = React.forwardRef<ToggleGroupRef, ToggleGroupProps>(({ type, value, onValueChange, disabled = false, ...viewProps }, ref) => {
+  return (
+    <ToggleGroupContext.Provider
+      value={
+        {
+          type,
+          value,
+          disabled,
+          onValueChange,
+        } as ToggleGroupProps
+      }
+    >
+      <Component
+        ref={ref}
+        role="group"
+        {...viewProps}
+      />
+    </ToggleGroupContext.Provider>
+  );
+});
+
+ToggleGroup.displayName = "ToggleGroupNativeToolbar";
+
+function useToggleGroupContext() {
+  const context = React.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>(
+  ({ render, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props }, ref) => {
+    const { type, disabled, value, onValueChange } = useToggleGroupContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled || disabledProp) return;
+      if (type === "single") {
+        onValueChange(ToggleGroupUtils.getNewSingleValue(value, itemValue));
+      }
+      if (type === "multiple") {
+        onValueChange(ToggleGroupUtils.getNewMultipleValue(value, itemValue));
+      }
+      onPressProp?.(ev);
+    }
+
+    const isChecked = type === "single" ? ToggleGroupUtils.getIsSelected(value, itemValue) : undefined;
+    const isSelected = type === "multiple" ? ToggleGroupUtils.getIsSelected(value, itemValue) : undefined;
+
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled}
+        role={type === "single" ? "radio" : "checkbox"}
+        onPress={onPress}
+        aria-checked={isChecked}
+        aria-selected={isSelected}
+        disabled={(disabled || disabledProp) ?? false}
+        accessibilityState={{
+          disabled: (disabled || disabledProp) ?? false,
+          checked: isChecked,
+          selected: isSelected,
+        }}
+        {...props}
+      />
+    );
+  },
+);
+
+ToggleItem.displayName = "ToggleItemNativeToolbar";
+
+const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      role={"separator"}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Separator.displayName = "SeparatorNativeToolbar";
+
+const Link = React.forwardRef<LinkRef, LinkProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="link"
+      {...props}
+    />
+  );
+});
+
+Link.displayName = "LinkNativeToolbar";
+
+const Button = React.forwardRef<ButtonRef, ButtonProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="button"
+      {...props}
+    />
+  );
+});
+
+export { Button, Link, Root, Separator, ToggleGroup, ToggleItem };

package/src/toolbar/toolbar.web.tsx

@@ -0,0 +1,158 @@
+// import * as Toolbar from "@radix-ui/react-toolbar";
+// import * as React from "react";
+// import { Pressable, View, type GestureResponderEvent } from "react-native";
+
+// import * as Slot from "../slot";
+// import { ToggleGroupUtils } from "../utils";
+
+// import type {
+//   ButtonProps,
+//   ButtonRef,
+//   LinkProps,
+//   LinkRef,
+//   RootProps,
+//   RootRef,
+//   SeparatorProps,
+//   SeparatorRef,
+//   ToggleGroupProps,
+//   ToggleGroupRef,
+//   ToggleItemProps,
+//   ToggleItemRef,
+// } from "./types";
+
+// const Root = React.forwardRef<RootRef, RootProps>(({ orientation, dir, loop, style, ...props }, ref) => {
+//
+//   return (
+//     <Toolbar.Root
+//       orientation={orientation}
+//       dir={dir}
+//       loop={loop}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Toolbar.Root>
+//   );
+// });
+
+// Root.displayName = "RootWebToolbar";
+
+// const ToggleGroupContext = React.createContext<ToggleGroupProps | null>(null);
+
+// const ToggleGroup = React.forwardRef<ToggleGroupRef, ToggleGroupProps>(
+//   ({ render, type, value, onValueChange, disabled = false, style, ...viewProps }, ref) => {
+//
+//     return (
+//       <ToggleGroupContext.Provider
+//         value={
+//           {
+//             type,
+//             value,
+//             disabled,
+//             onValueChange,
+//           } as ToggleGroupProps
+//         }
+//       >
+//         <Toolbar.ToggleGroup
+//           type={type as any}
+//           value={value as any}
+//           onValueChange={onValueChange as any}
+//           disabled={disabled}
+//           render
+//         >
+//           <Component
+//             ref={ref}
+//             {...viewProps}
+//           />
+//         </Toolbar.ToggleGroup>
+//       </ToggleGroupContext.Provider>
+//     );
+//   },
+// );
+
+// ToggleGroup.displayName = "ToggleGroupWebToolbar";
+
+// function useToggleGroupContext() {
+//   const context = React.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>(
+//   ({ render, value: itemValue, disabled: disabledProp = false, onPress: onPressProp, style, ...props }, ref) => {
+//     const { type, disabled, value, onValueChange } = useToggleGroupContext();
+
+//     function onPress(ev: GestureResponderEvent) {
+//       if (disabled || disabledProp) return;
+//       if (type === "single") {
+//         onValueChange(ToggleGroupUtils.getNewSingleValue(value, itemValue));
+//       }
+//       if (type === "multiple") {
+//         onValueChange(ToggleGroupUtils.getNewMultipleValue(value, itemValue));
+//       }
+//       onPressProp?.(ev);
+//     }
+
+//
+//     return (
+//       <Toolbar.ToggleItem
+//         value={itemValue}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           onPress={onPress}
+//           role="button"
+//           {...props}
+//         />
+//       </Toolbar.ToggleItem>
+//     );
+//   },
+// );
+
+// ToggleItem.displayName = "ToggleItemWebToolbar";
+
+// const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ style, ...props }, ref) => {
+//
+//   return (
+//     <Component
+//       ref={ref}
+//       {...props}
+//     />
+//   );
+// });
+
+// Separator.displayName = "SeparatorWebToolbar";
+
+// const Link = React.forwardRef<LinkRef, LinkProps>(({ style, ...props }, ref) => {
+//
+//   return (
+//     <Toolbar.Link render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Toolbar.Link>
+//   );
+// });
+
+// Link.displayName = "LinkWebToolbar";
+
+// const Button = React.forwardRef<ButtonRef, ButtonProps>(({ style, ...props }, ref) => {
+//
+//   return (
+//     <Toolbar.Button render>
+//       <Component
+//         ref={ref}
+//         role="button"
+//         {...props}
+//       />
+//     </Toolbar.Button>
+//   );
+// });
+
+// export { Button, Link, Root, Separator, ToggleGroup, ToggleItem };

package/src/toolbar/types.ts

@@ -0,0 +1,64 @@
+import type { PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  /**
+   * @platform: WEB ONLY
+   */
+  orientation?: "horizontal" | "vertical";
+
+  /**
+   * @platform: WEB ONLY
+   */
+  dir?: "ltr" | "rtl";
+
+  /**
+   * @platform: WEB ONLY
+   */
+  loop?: boolean;
+};
+
+type SingleToggleGroupProps = {
+  type: "single";
+  value: string | undefined;
+  onValueChange: (val: string | undefined) => void;
+};
+
+type MultipleToggleGroupProps = {
+  type: "multiple";
+  value: string[];
+  onValueChange: (val: string[]) => void;
+};
+
+type ToggleGroupProps = (SingleToggleGroupProps | MultipleToggleGroupProps) & {
+  disabled?: boolean;
+} & RenderViewProps;
+
+type ToggleItemProps = RenderPressableProps & {
+  value: string;
+};
+
+type SeparatorProps = RenderViewProps;
+type LinkProps = RenderPressableProps;
+type ButtonProps = RenderPressableProps;
+
+type RootRef = ViewRef;
+type LinkRef = PressableRef;
+type ButtonRef = PressableRef;
+type SeparatorRef = ViewRef;
+type ToggleGroupRef = ViewRef;
+type ToggleItemRef = PressableRef;
+
+export type {
+  ButtonProps,
+  ButtonRef,
+  LinkProps,
+  LinkRef,
+  RootProps,
+  RootRef,
+  SeparatorProps,
+  SeparatorRef,
+  ToggleGroupProps,
+  ToggleGroupRef,
+  ToggleItemProps,
+  ToggleItemRef,
+};

package/src/tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from "./tooltip";
+export * from "./types";

package/src/tooltip/tooltip.tsx

@@ -0,0 +1,261 @@
+import * as React 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 type { ContentProps, ContentRef, BackdropProps, BackdropRef, PortalProps, RootProps, RootRef, TriggerProps, TriggerRef } from "./types";
+
+interface RootContextInterface {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerPosition: LayoutPosition | null;
+  setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
+  contentLayout: LayoutRectangle | null;
+  setContentLayout: (contentLayout: LayoutRectangle | null) => void;
+  nativeID: string;
+}
+
+const RootContext = React.createContext<RootContextInterface | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(
+  (
+    {
+      render,
+      delayDuration: _delayDuration,
+      skipDelayDuration: _skipDelayDuration,
+      disableHoverableContent: _disableHoverableContent,
+      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);
+
+    function onOpenChange(value: boolean) {
+      setOpen(value);
+      onOpenChangeProp?.(value);
+    }
+
+    return (
+      <RootContext.Provider
+        value={{
+          open,
+          onOpenChange,
+          contentLayout,
+          nativeID,
+          setContentLayout,
+          setTriggerPosition,
+          triggerPosition,
+        }}
+      >
+        <Component
+          ref={ref}
+          {...viewProps}
+        />
+      </RootContext.Provider>
+    );
+  },
+);
+
+Root.displayName = "RootNativeTooltip";
+
+function useTooltipContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error("Tooltip compound components cannot be rendered outside the Tooltip component");
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { open, onOpenChange, setTriggerPosition } = useTooltipContext();
+
+  const augmentedRef = useAugmentedRef({
+    ref,
+    methods: {
+      open: () => {
+        onOpenChange(true);
+        augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+          setTriggerPosition({ width, pageX, pageY: pageY, height });
+        });
+      },
+      close: () => {
+        setTriggerPosition(null);
+        onOpenChange(false);
+      },
+    },
+  });
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      setTriggerPosition({ width, pageX, pageY: pageY, height });
+    });
+    const newValue = !open;
+    onOpenChange(newValue);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={augmentedRef}
+      aria-disabled={disabled ?? undefined}
+      role="button"
+      onPress={onPress}
+      disabled={disabled ?? undefined}
+      {...props}
+    />
+  );
+});
+
+Trigger.displayName = "TriggerNativeTooltip";
+
+/**
+ * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset to account for nav elements like headers.
+ */
+function Portal({ keepMounted, hostName, children }: PortalProps) {
+  const value = useTooltipContext();
+
+  if (!value.triggerPosition) {
+    return null;
+  }
+
+  if (!keepMounted) {
+    if (!value.open) {
+      return null;
+    }
+  }
+
+  return (
+    <RNPPortal
+      hostName={hostName}
+      name={`${value.nativeID}_portal`}
+    >
+      <RootContext.Provider value={value}>{children}</RootContext.Provider>
+    </RNPPortal>
+  );
+}
+
+const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+  const { open, onOpenChange, setContentLayout, setTriggerPosition } = useTooltipContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (closeOnPress) {
+      setTriggerPosition(null);
+      setContentLayout(null);
+      onOpenChange(false);
+    }
+    OnPressProp?.(ev);
+  }
+
+  if (!keepMounted) {
+    if (!open) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      onPress={onPress}
+      {...props}
+    />
+  );
+});
+
+Backdrop.displayName = "BackdropNativeTooltip";
+
+/**
+ * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior on native by setting `disablePositioningStyle` to `true`.
+ */
+const Content = React.forwardRef<ContentRef, ContentProps>(
+  (
+    {
+      render = false,
+      keepMounted,
+      align = "center",
+      side = "top",
+      sideOffset = 0,
+      alignOffset = 0,
+      avoidCollisions = true,
+      onLayout: onLayoutProp,
+      insets,
+      style,
+      disablePositioningStyle,
+      ...props
+    },
+    ref,
+  ) => {
+    const { open, onOpenChange, nativeID, contentLayout, setContentLayout, setTriggerPosition, triggerPosition } = useTooltipContext();
+
+    React.useEffect(() => {
+      const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+        setTriggerPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+        return true;
+      });
+
+      return () => {
+        setContentLayout(null);
+        backHandler.remove();
+      };
+    }, []);
+
+    const positionStyle = useRelativePosition({
+      align,
+      avoidCollisions,
+      triggerPosition,
+      contentLayout,
+      alignOffset,
+      insets,
+      sideOffset,
+      side: getNativeSide(side),
+      disablePositioningStyle,
+    });
+
+    function onLayout(event: LayoutChangeEvent) {
+      setContentLayout(event.nativeEvent.layout);
+      onLayoutProp?.(event);
+    }
+
+    if (!keepMounted) {
+      if (!open) {
+        return null;
+      }
+    }
+
+    return (
+      <Component
+        ref={ref}
+        role="tooltip"
+        nativeID={nativeID}
+        aria-modal={true}
+        style={[positionStyle, style]}
+        onLayout={onLayout}
+        onStartShouldSetResponder={onStartShouldSetResponder}
+        {...props}
+      />
+    );
+  },
+);
+
+Content.displayName = "ContentNativeTooltip";
+
+export { Content, Backdrop, Portal, Root, Trigger };
+
+function onStartShouldSetResponder() {
+  return true;
+}
+
+function getNativeSide(side: "left" | "right" | "top" | "bottom") {
+  if (side === "left" || side === "right") {
+    return "top";
+  }
+  return side;
+}