@brand-map/primitives 0.0.0-broken.0

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

@@ -0,0 +1,238 @@
+import * as React 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 type {
+  ActionProps,
+  ActionRef,
+  CancelProps,
+  CancelRef,
+  ContentProps,
+  ContentRef,
+  DescriptionProps,
+  DescriptionRef,
+  BackdropProps,
+  BackdropRef,
+  PortalProps,
+  RootContext,
+  RootProps,
+  RootRef,
+  TitleProps,
+  TitleRef,
+  TriggerProps,
+  TriggerRef,
+} from "./types";
+
+const AlertDialogContext = React.createContext<(RootContext & { nativeID: string }) | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(({ open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+  const nativeID = React.useId();
+  const [open = false, onOpenChange] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChangeProp,
+  });
+
+  return (
+    <AlertDialogContext.Provider
+      value={{
+        open,
+        onOpenChange,
+        nativeID,
+      }}
+    >
+      <Slot.View
+        ref={ref}
+        {...viewProps}
+      />
+    </AlertDialogContext.Provider>
+  );
+});
+
+Root.displayName = "RootNativeAlertDialog";
+
+function useRootContext() {
+  const context = React.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 { open: value, onOpenChange } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    onOpenChange(!value);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Slot.Pressable
+      ref={ref}
+      aria-disabled={disabled ?? undefined}
+      role="button"
+      onPress={onPress}
+      disabled={disabled ?? undefined}
+      {...props}
+    />
+  );
+});
+
+Trigger.displayName = "TriggerNativeAlertDialog";
+
+/**
+ * @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 = useRootContext();
+
+  if (!keepMounted) {
+    if (!value.open) {
+      return null;
+    }
+  }
+
+  return (
+    <RNPPortal
+      hostName={hostName}
+      name={`${value.nativeID}_portal`}
+    >
+      <AlertDialogContext.Provider value={value}>{children}</AlertDialogContext.Provider>
+    </RNPPortal>
+  );
+}
+
+const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ...props }, ref) => {
+  const { open: value } = useRootContext();
+
+  if (!keepMounted) {
+    if (!value) {
+      return null;
+    }
+  }
+
+  return (
+    <Slot.View
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Backdrop.displayName = "BackdropNativeAlertDialog";
+
+const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
+  const { open: value, nativeID, onOpenChange } = useRootContext();
+
+  React.useEffect(() => {
+    const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+      onOpenChange(false);
+      return true;
+    });
+
+    return () => {
+      backHandler.remove();
+    };
+  }, []);
+
+  if (!keepMounted) {
+    if (!value) {
+      return null;
+    }
+  }
+
+  return (
+    <Slot.View
+      ref={ref}
+      role="alertdialog"
+      nativeID={nativeID}
+      aria-labelledby={`${nativeID}_label`}
+      aria-describedby={`${nativeID}_desc`}
+      aria-modal={true}
+      {...props}
+    />
+  );
+});
+
+Content.displayName = "ContentNativeAlertDialog";
+
+const Cancel = React.forwardRef<CancelRef, CancelProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { onOpenChange } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    onOpenChange(false);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Slot.Pressable
+      ref={ref}
+      aria-disabled={disabled ?? undefined}
+      role="button"
+      onPress={onPress}
+      disabled={disabled ?? undefined}
+      {...props}
+    />
+  );
+});
+
+Cancel.displayName = "CloseNativeAlertDialog";
+
+const Action = React.forwardRef<ActionRef, ActionProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { onOpenChange } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    onOpenChange(false);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Slot.Pressable
+      ref={ref}
+      aria-disabled={disabled ?? undefined}
+      role="button"
+      onPress={onPress}
+      disabled={disabled ?? undefined}
+      {...props}
+    />
+  );
+});
+
+Action.displayName = "ActionNativeAlertDialog";
+
+const Title = React.forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
+  const { nativeID } = useRootContext();
+
+  return (
+    <Slot.Text
+      ref={ref}
+      role="heading"
+      nativeID={`${nativeID}_label`}
+      {...props}
+    />
+  );
+});
+
+Title.displayName = "TitleNativeAlertDialog";
+
+const Description = React.forwardRef<DescriptionRef, DescriptionProps>(({ ...props }, ref) => {
+  const { nativeID } = useRootContext();
+
+  return (
+    <Slot.Text
+      ref={ref}
+      nativeID={`${nativeID}_desc`}
+      {...props}
+    />
+  );
+});
+
+Description.displayName = "DescriptionNativeAlertDialog";
+
+export { Action, Cancel, Content, Description, Backdrop, Portal, Root, Title, Trigger, useRootContext };

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

@@ -0,0 +1,260 @@
+// import { useAugmentedRef, useControllableState, useIsomorphicLayoutEffect } from "../hooks";
+// import * as Slot from "../slot";
+// 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 {
+//   ActionProps,
+//   ActionRef,
+//   CancelProps,
+//   CancelRef,
+//   ContentProps,
+//   ContentRef,
+//   DescriptionProps,
+//   DescriptionRef,
+//   BackdropProps,
+//   BackdropRef,
+//   PortalProps,
+//   RootContext,
+//   RootProps,
+//   RootRef,
+//   TitleProps,
+//   TitleRef,
+//   TriggerProps,
+//   TriggerRef,
+// } from "./types";
+
+// const AlertDialogContext = React.createContext<RootContext | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(({ open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+//   const [open = false, onOpenChange] = useControllableState({
+//     prop: openProp,
+//     defaultProp: defaultOpen,
+//     onChange: onOpenChangeProp,
+//   });
+//
+//   return (
+//     <AlertDialogContext.Provider value={{ open, onOpenChange }}>
+//       <AlertDialog.Root
+//         open={open}
+//         defaultOpen={defaultOpen}
+//         onOpenChange={onOpenChange}
+//       >
+//         <Component
+//           ref={ref}
+//           {...viewProps}
+//         />
+//       </AlertDialog.Root>
+//     </AlertDialogContext.Provider>
+//   );
+// });
+
+// Root.displayName = "RootAlertWebDialog";
+
+// function useRootContext() {
+//   const context = React.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 augmentedRef = useAugmentedRef({ ref });
+//   const { onOpenChange, open } = useRootContext();
+//   function onPress(ev: GestureResponderEvent) {
+//     if (onPressProp) {
+//       onPressProp(ev);
+//     }
+//     onOpenChange(!open);
+//   }
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.dataset.state = open ? "open" : "closed";
+//       augRef.type = "button";
+//     }
+//   }, [open]);
+
+//
+//   return (
+//     <AlertDialog.Trigger
+//       disabled={disabled ?? undefined}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         onPress={onPress}
+//         role="button"
+//         disabled={disabled}
+//         {...props}
+//       />
+//     </AlertDialog.Trigger>
+//   );
+// });
+
+// Trigger.displayName = "TriggerAlertWebDialog";
+
+// function Portal({ keepMounted, container, children }: PortalProps) {
+//   return (
+//     <AlertDialog.Portal
+//       keepMounted={keepMounted}
+//       children={children}
+//       container={container}
+//     />
+//   );
+// }
+
+// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ...props }, ref) => {
+//
+//   return (
+//     <AlertDialog.Backdrop keepMounted={keepMounted}>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </AlertDialog.Backdrop>
+//   );
+// });
+
+// Backdrop.displayName = "BackdropAlertWebDialog";
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+//   const { open } = useRootContext();
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       augRef.dataset.state = open ? "open" : "closed";
+//     }
+//   }, [open]);
+
+//
+//   return (
+//     <AlertDialog.Content
+//       onOpenAutoFocus={onOpenAutoFocus}
+//       onCloseAutoFocus={onCloseAutoFocus}
+//       onEscapeKeyDown={onEscapeKeyDown}
+//       keepMounted={keepMounted}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         {...props}
+//       />
+//     </AlertDialog.Content>
+//   );
+// });
+
+// Content.displayName = "ContentAlertWebDialog";
+
+// const Cancel = React.forwardRef<CancelRef, CancelProps>(({ onPress: onPressProp, disabled, ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+//   const { onOpenChange, open } = useRootContext();
+
+//   function onPress(ev: GestureResponderEvent) {
+//     if (onPressProp) {
+//       onPressProp(ev);
+//     }
+//     onOpenChange(!open);
+//   }
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.type = "button";
+//     }
+//   }, []);
+
+//
+//   return (
+//     <>
+//       <AlertDialog.Cancel
+//         disabled={disabled ?? undefined}
+//         render
+//       >
+//         <Component
+//           ref={augmentedRef}
+//           onPress={onPress}
+//           role="button"
+//           disabled={disabled}
+//           {...props}
+//         />
+//       </AlertDialog.Cancel>
+//     </>
+//   );
+// });
+
+// Cancel.displayName = "CancelAlertWebDialog";
+
+// const Action = React.forwardRef<ActionRef, ActionProps>(({ onPress: onPressProp, disabled, ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+//   const { onOpenChange, open } = useRootContext();
+
+//   function onPress(ev: GestureResponderEvent) {
+//     if (onPressProp) {
+//       onPressProp(ev);
+//     }
+//     onOpenChange(!open);
+//   }
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.type = "button";
+//     }
+//   }, []);
+
+//
+//   return (
+//     <>
+//       <AlertDialog.Action
+//         disabled={disabled ?? undefined}
+//         render
+//       >
+//         <Component
+//           ref={augmentedRef}
+//           onPress={onPress}
+//           role="button"
+//           disabled={disabled}
+//           {...props}
+//         />
+//       </AlertDialog.Action>
+//     </>
+//   );
+// });
+
+// Action.displayName = "ActionAlertWebDialog";
+
+// const Title = React.forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <AlertDialog.Title render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </AlertDialog.Title>
+//   );
+// });
+
+// Title.displayName = "TitleAlertWebDialog";
+
+// const Description = React.forwardRef<DescriptionRef, DescriptionProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <AlertDialog.Description render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </AlertDialog.Description>
+//   );
+// });
+
+// Description.displayName = "DescriptionAlertWebDialog";
+
+// export { Action, Cancel, Content, Description, Backdrop, Portal, Root, Title, Trigger, useRootContext };

package/src/alert-dialog/index.ts

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

package/src/alert-dialog/types.ts

@@ -0,0 +1,81 @@
+import type { KeepMountable, PressableRef, RenderPressableProps, RenderTextProps, RenderViewProps, TextRef, ViewRef } from "../types";
+
+type RootProps = {
+  open?: boolean;
+  onOpenChange?: (value: boolean) => void;
+  defaultOpen?: boolean;
+} & RenderViewProps;
+
+interface RootContext {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+}
+
+interface PortalProps extends KeepMountable {
+  children: React.ReactNode;
+
+  /**
+   * @platform: NATIVE ONLY
+   */
+  hostName?: string;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+type BackdropProps = KeepMountable & RenderViewProps;
+
+type ContentProps = KeepMountable &
+  RenderViewProps & {
+    /**
+     * @platform: WEB ONLY
+     */
+    onOpenAutoFocus?: (ev: Event) => void;
+
+    /**
+     * @platform: WEB ONLY
+     */
+    onCloseAutoFocus?: (ev: Event) => void;
+
+    /**
+     * @platform: WEB ONLY
+     */
+    onEscapeKeyDown?: (ev: Event) => void;
+  };
+
+type TriggerProps = RenderPressableProps;
+type CancelProps = RenderPressableProps;
+type ActionProps = RenderPressableProps;
+type TitleProps = RenderTextProps;
+type DescriptionProps = RenderTextProps;
+
+type ActionRef = PressableRef;
+type CancelRef = PressableRef;
+type ContentRef = ViewRef;
+type DescriptionRef = TextRef;
+type BackdropRef = ViewRef;
+type RootRef = ViewRef;
+type TitleRef = TextRef;
+type TriggerRef = PressableRef;
+
+export type {
+  ActionProps,
+  ActionRef,
+  CancelProps,
+  CancelRef,
+  ContentProps,
+  ContentRef,
+  DescriptionProps,
+  DescriptionRef,
+  BackdropProps,
+  BackdropRef,
+  PortalProps,
+  RootContext,
+  RootProps,
+  RootRef,
+  TitleProps,
+  TitleRef,
+  TriggerProps,
+  TriggerRef,
+};

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { View, type ViewStyle } from "react-native";
+
+import * as Slot from "../slot";
+import type { RenderViewProps, ViewRef } from "../types";
+
+type RootProps = Omit<RenderViewProps, "style"> & {
+  ratio?: number;
+  style?: ViewStyle;
+};
+
+type RootRef = ViewRef;
+
+const Root = React.forwardRef<RootRef, RootProps>(({ ratio = 1, style, ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      style={[style, { aspectRatio: ratio }]}
+      {...props}
+    />
+  );
+});
+
+Root.displayName = "RootAspectRatio";
+
+export { Root };
+export type { RootProps, RootRef };

package/src/aspect-ratio/index.ts

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