@brand-map/primitives 0.0.0-broken.0

package/src/menubar/menubar.web.tsx

@@ -0,0 +1,575 @@
+// import * as Menubar from "@radix-ui/react-menubar";
+// import * as React from "react";
+// import { GestureResponderEvent, Pressable, Text, View } from "react-native";
+
+// import { useAugmentedRef, useControllableState, useIsomorphicLayoutEffect } from "../hooks";
+// import * as Slot from "../slot";
+// import { EmptyGestureResponderEvent } from "../utils";
+
+// import type {
+//   CheckboxItemProps,
+//   CheckboxItemRef,
+//   ContentProps,
+//   ContentRef,
+//   GroupProps,
+//   GroupRef,
+//   ItemIndicatorProps,
+//   ItemIndicatorRef,
+//   ItemProps,
+//   ItemRef,
+//   LabelProps,
+//   LabelRef,
+//   MenuProps,
+//   MenuRef,
+//   BackdropProps,
+//   BackdropRef,
+//   PortalProps,
+//   RadioGroupProps,
+//   RadioGroupRef,
+//   RadioItemProps,
+//   RadioItemRef,
+//   RootProps,
+//   RootRef,
+//   SeparatorProps,
+//   SeparatorRef,
+//   SubContentProps,
+//   SubContentRef,
+//   SubProps,
+//   SubRef,
+//   SubTriggerProps,
+//   SubTriggerRef,
+//   TriggerProps,
+//   TriggerRef,
+// } from "./types";
+
+// const RootContext = React.createContext<RootProps | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(({ value, onValueChange, ...viewProps }, ref) => {
+//
+//   return (
+//     <RootContext.Provider value={{ value, onValueChange }}>
+//       <Menubar.Root
+//         value={value}
+//         onValueChange={onValueChange}
+//       >
+//         <Component
+//           ref={ref}
+//           {...viewProps}
+//         />
+//       </Menubar.Root>
+//     </RootContext.Provider>
+//   );
+// });
+
+// Root.displayName = "RootWebMenubar";
+
+// function useRootContext() {
+//   const context = React.useContext(RootContext);
+//   if (!context) {
+//     throw new Error("Menubar compound components cannot be rendered outside the Menubar component");
+//   }
+//   return context;
+// }
+
+// const MenuContext = React.createContext<MenuProps | null>(null);
+
+// const Menu = React.forwardRef<MenuRef, MenuProps>(({ value, ...viewProps }, ref) => {
+//
+//   return (
+//     <MenuContext.Provider value={{ value }}>
+//       <Menubar.Menu value={value}>
+//         <Component
+//           ref={ref}
+//           {...viewProps}
+//         />
+//       </Menubar.Menu>
+//     </MenuContext.Provider>
+//   );
+// });
+
+// Menu.displayName = "MenuWebMenubar";
+
+// function useMenuContext() {
+//   const context = React.useContext(MenuContext);
+//   if (!context) {
+//     throw new Error("Menubar compound components cannot be rendered outside the Menubar component");
+//   }
+//   return context;
+// }
+
+// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ disabled = false, ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+//   const { value: menuValue } = useMenuContext();
+//   const { value } = useRootContext();
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       augRef.dataset.state = value && menuValue === value ? "open" : "closed";
+//     }
+//   }, [value && menuValue]);
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       if (disabled) {
+//         augRef.dataset.disabled = "true";
+//       } else {
+//         augRef.dataset.disabled = undefined;
+//       }
+//     }
+//   }, [disabled]);
+
+//
+//   return (
+//     <Menubar.Trigger
+//       disabled={disabled ?? undefined}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         disabled={disabled}
+//         {...props}
+//       />
+//     </Menubar.Trigger>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebMenubar";
+
+// function Portal({ keepMounted, container, children }: PortalProps) {
+//   return (
+//     <Menubar.Portal
+//       keepMounted={keepMounted}
+//       container={container}
+//       children={children}
+//     />
+//   );
+// }
+
+// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Component
+//       ref={ref}
+//       {...props}
+//     />
+//   );
+// });
+
+// Backdrop.displayName = "BackdropWebMenubar";
+
+// const MenubarContentContext = React.createContext<{
+//   close: () => void;
+// } | null>(null);
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(
+//   (
+//     {
+//       render = false,
+//       keepMounted,
+//       align,
+//       side,
+//       sideOffset,
+//       alignOffset = 0,
+//       avoidCollisions = true,
+//       insets,
+//       loop,
+//       onCloseAutoFocus,
+//       onEscapeKeyDown,
+//       onPointerDownOutside,
+//       onFocusOutside,
+//       onInteractOutside,
+//       collisionBoundary,
+//       sticky,
+//       hideWhenDetached,
+//       ...props
+//     },
+//     ref,
+//   ) => {
+//     const itemRef = React.useRef<HTMLDivElement>(null);
+
+//     function close() {
+//       itemRef.current?.click();
+//     }
+
+//
+//     return (
+//       <MenubarContentContext.Provider value={{ close }}>
+//         <Menubar.Content
+//           keepMounted={keepMounted}
+//           alignOffset={alignOffset}
+//           avoidCollisions={avoidCollisions}
+//           collisionPadding={insets}
+//           loop={loop}
+//           onCloseAutoFocus={onCloseAutoFocus}
+//           onEscapeKeyDown={onEscapeKeyDown}
+//           onPointerDownOutside={onPointerDownOutside}
+//           onFocusOutside={onFocusOutside}
+//           onInteractOutside={onInteractOutside}
+//           collisionBoundary={collisionBoundary}
+//           sticky={sticky}
+//           hideWhenDetached={hideWhenDetached}
+//           align={align}
+//           side={side}
+//           sideOffset={sideOffset}
+//         >
+//           <Component
+//             ref={ref}
+//             {...props}
+//           />
+//           <Menubar.Item
+//             ref={itemRef}
+//             aria-hidden
+//             style={{ position: "fixed", top: 0, left: 0, zIndex: -999999999 }}
+//             aria-disabled
+//             tabIndex={-1}
+//             hidden
+//           />
+//         </Menubar.Content>
+//       </MenubarContentContext.Provider>
+//     );
+//   },
+// );
+
+// Content.displayName = "ContentWebMenubar";
+
+// function useMenubarContentContext() {
+//   const context = React.useContext(MenubarContentContext);
+//   if (!context) {
+//     throw new Error("MenubarContent compound components cannot be rendered outside the MenubarContent component");
+//   }
+//   return context;
+// }
+
+// const Item = React.forwardRef<ItemRef, ItemProps>(
+//   ({ render, textValue, closeOnPress = true, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
+//     const { close } = useMenubarContentContext();
+
+//     function onKeyDown(ev: React.KeyboardEvent) {
+//       onKeyDownProp?.(ev);
+//       if (ev.key === "Enter" || ev.key === " ") {
+//         onPressProp?.(EmptyGestureResponderEvent);
+//         if (closeOnPress) {
+//           close();
+//         }
+//       }
+//     }
+
+//     function onPress(ev: GestureResponderEvent) {
+//       onPressProp?.(ev);
+//       if (closeOnPress) {
+//         close();
+//       }
+//     }
+
+//
+//     return (
+//       <Menubar.Item
+//         textValue={textValue}
+//         disabled={props.disabled ?? undefined}
+//         onSelect={closeOnPress ? undefined : onSelected}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           // @ts-expect-error web only
+//           onKeyDown={onKeyDown}
+//           onPress={onPress}
+//           {...props}
+//         />
+//       </Menubar.Item>
+//     );
+//   },
+// );
+
+// Item.displayName = "ItemWebMenubar";
+
+// const Group = React.forwardRef<GroupRef, GroupProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Menubar.Group render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Menubar.Group>
+//   );
+// });
+
+// Group.displayName = "GroupWebMenubar";
+
+// const Label = React.forwardRef<LabelRef, LabelProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Menubar.Label render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Menubar.Label>
+//   );
+// });
+
+// Label.displayName = "LabelWebMenubar";
+
+// const CheckboxItem = React.forwardRef<CheckboxItemRef, CheckboxItemProps>(
+//   ({ render, checked, onCheckedChange, textValue, disabled = false, closeOnPress = true, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
+//     function onKeyDown(ev: React.KeyboardEvent) {
+//       onKeyDownProp?.(ev);
+//       if (ev.key === "Enter" || ev.key === " ") {
+//         onPressProp?.(EmptyGestureResponderEvent);
+//         onCheckedChange?.(!checked);
+//         if (closeOnPress) {
+//           close();
+//         }
+//       }
+//     }
+
+//     function onPress(ev: GestureResponderEvent) {
+//       onPressProp?.(ev);
+//       onCheckedChange?.(!checked);
+//       if (closeOnPress) {
+//         close();
+//       }
+//     }
+//
+//     return (
+//       <Menubar.CheckboxItem
+//         textValue={textValue}
+//         checked={checked}
+//         onCheckedChange={onCheckedChange}
+//         onSelect={closeOnPress ? undefined : onSelected}
+//         disabled={disabled ?? undefined}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           // @ts-expect-error web only
+//           onKeyDown={onKeyDown}
+//           onPress={onPress}
+//           role="button"
+//           {...props}
+//         />
+//       </Menubar.CheckboxItem>
+//     );
+//   },
+// );
+
+// CheckboxItem.displayName = "CheckboxItemWebMenubar";
+
+// const MenubarRadioGroupContext = React.createContext<{
+//   value?: string;
+//   onValueChange?: (value: string) => void;
+// } | null>(null);
+
+// const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>(({ value, onValueChange, ...props }, ref) => {
+//
+//   return (
+//     <MenubarRadioGroupContext.Provider value={{ value, onValueChange }}>
+//       <Menubar.RadioGroup
+//         value={value}
+//         onValueChange={onValueChange}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </Menubar.RadioGroup>
+//     </MenubarRadioGroupContext.Provider>
+//   );
+// });
+
+// RadioGroup.displayName = "RadioGroupWebMenubar";
+
+// function useMenubarRadioGroupContext() {
+//   const context = React.useContext(MenubarRadioGroupContext);
+//   if (!context) {
+//     throw new Error("MenubarRadioGroup compound components cannot be rendered outside the MenubarRadioGroup component");
+//   }
+//   return context;
+// }
+
+// const RadioItem = React.forwardRef<RadioItemRef, RadioItemProps>(
+//   ({ render, value, textValue, closeOnPress = true, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
+//     const { onValueChange } = useMenubarRadioGroupContext();
+//     const { close } = useMenubarContentContext();
+
+//     function onKeyDown(ev: React.KeyboardEvent) {
+//       onKeyDownProp?.(ev);
+//       if (ev.key === "Enter" || ev.key === " ") {
+//         onValueChange?.(value);
+//         onPressProp?.(EmptyGestureResponderEvent);
+//         if (closeOnPress) {
+//           close();
+//         }
+//       }
+//     }
+
+//     function onPress(ev: GestureResponderEvent) {
+//       onValueChange?.(value);
+//       onPressProp?.(ev);
+//       if (closeOnPress) {
+//         close();
+//       }
+//     }
+//
+//     return (
+//       <Menubar.RadioItem
+//         value={value}
+//         textValue={textValue}
+//         disabled={props.disabled ?? undefined}
+//         onSelect={closeOnPress ? undefined : onSelected}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           // @ts-expect-error web only
+//           onKeyDown={onKeyDown}
+//           onPress={onPress}
+//           {...props}
+//         />
+//       </Menubar.RadioItem>
+//     );
+//   },
+// );
+
+// RadioItem.displayName = "RadioItemWebMenubar";
+
+// const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(({ keepMounted, ...props }, ref) => {
+//
+//   return (
+//     <Menubar.ItemIndicator
+//       keepMounted={keepMounted}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Menubar.ItemIndicator>
+//   );
+// });
+
+// ItemIndicator.displayName = "ItemIndicatorWebMenubar";
+
+// const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ decorative, ...props }, ref) => {
+//
+//   return (
+//     <Menubar.Separator render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Menubar.Separator>
+//   );
+// });
+
+// Separator.displayName = "SeparatorWebMenubar";
+
+// const MenubarSubContext = React.createContext<{
+//   open: boolean;
+//   onOpenChange: (open: boolean) => void;
+// } | null>(null);
+
+// const Sub = React.forwardRef<SubRef, SubProps>(({ defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ...props }, ref) => {
+//   const [open = false, onOpenChange] = useControllableState({
+//     prop: openProp,
+//     defaultProp: defaultOpen,
+//     onChange: onOpenChangeProp,
+//   });
+//
+//   return (
+//     <MenubarSubContext.Provider value={{ open, onOpenChange }}>
+//       <Menubar.Sub
+//         open={open}
+//         onOpenChange={onOpenChange}
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </Menubar.Sub>
+//     </MenubarSubContext.Provider>
+//   );
+// });
+
+// Sub.displayName = "SubWebMenubar";
+
+// function useSubContext() {
+//   const context = React.useContext(MenubarSubContext);
+//   if (!context) {
+//     throw new Error("MenubarSub compound components cannot be rendered outside the MenubarSub component");
+//   }
+//   return context;
+// }
+
+// const SubTrigger = React.forwardRef<SubTriggerRef, SubTriggerProps>(({ textValue, disabled = false, onPress: onPressProp, ...props }, ref) => {
+//   const { onOpenChange } = useSubContext();
+
+//   function onPress(ev: GestureResponderEvent) {
+//     onOpenChange(true);
+//     onPressProp?.(ev);
+//   }
+
+//
+//   return (
+//     <Menubar.SubTrigger
+//       disabled={disabled ?? undefined}
+//       textValue={textValue}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         onPress={onPress}
+//         {...props}
+//       />
+//     </Menubar.SubTrigger>
+//   );
+// });
+
+// SubTrigger.displayName = "SubTriggerWebMenubar";
+
+// const SubContent = React.forwardRef<SubContentRef, SubContentProps>(({ render = false, keepMounted, ...props }, ref) => {
+//
+//   return (
+//     <Menubar.Portal>
+//       <Menubar.SubContent keepMounted={keepMounted}>
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </Menubar.SubContent>
+//     </Menubar.Portal>
+//   );
+// });
+
+// Content.displayName = "ContentWebMenubar";
+
+// export {
+//   CheckboxItem,
+//   Content,
+//   Group,
+//   Item,
+//   ItemIndicator,
+//   Label,
+//   Menu,
+//   Backdrop,
+//   Portal,
+//   RadioGroup,
+//   RadioItem,
+//   Root,
+//   Separator,
+//   Sub,
+//   SubContent,
+//   SubTrigger,
+//   Trigger,
+//   useMenuContext,
+//   useRootContext,
+//   useSubContext,
+// };
+
+// function onSelected(ev: Event) {
+//   ev.preventDefault();
+// }

package/src/menubar/types.ts

@@ -0,0 +1,126 @@
+import { KeepMountable, PositionedContentProps, PressableRef, RenderPressableProps, RenderTextProps, RenderViewProps, TextRef, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  value: string | undefined;
+  onValueChange: (value: string | undefined) => void;
+};
+
+type MenuProps = RenderViewProps & {
+  value: string | undefined;
+};
+
+interface PortalProps extends KeepMountable {
+  children: React.ReactNode;
+
+  /**
+   * @platform: NATIVE ONLY
+   */
+  hostName?: string;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+
+type BackdropProps = KeepMountable &
+  RenderPressableProps & {
+    closeOnPress?: boolean;
+  };
+
+type ItemProps = RenderPressableProps & {
+  textValue?: string;
+  closeOnPress?: boolean;
+};
+
+type CheckboxItemProps = RenderPressableProps & {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  closeOnPress?: boolean;
+  textValue?: string;
+};
+
+type RadioGroupProps = RenderViewProps & {
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+};
+
+type RadioItemProps = RenderPressableProps & {
+  value: string;
+  textValue?: string;
+  closeOnPress?: boolean;
+};
+
+type SeparatorProps = RenderViewProps & {
+  decorative?: boolean;
+};
+
+type SubProps = RenderViewProps & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (value: boolean) => void;
+};
+
+type SubTriggerProps = RenderPressableProps & {
+  textValue?: string;
+};
+
+type TriggerProps = RenderPressableProps;
+type ContentProps = RenderViewProps & PositionedContentProps;
+type SubContentProps = RenderViewProps & KeepMountable;
+type ItemIndicatorProps = RenderViewProps & KeepMountable;
+type GroupProps = RenderViewProps;
+type LabelProps = RenderTextProps;
+
+type CheckboxItemRef = PressableRef;
+type ContentRef = ViewRef;
+type GroupRef = ViewRef;
+type ItemIndicatorRef = ViewRef;
+type ItemRef = PressableRef;
+type LabelRef = TextRef;
+type MenuRef = ViewRef;
+type BackdropRef = PressableRef;
+type RadioGroupRef = ViewRef;
+type RadioItemRef = PressableRef;
+type RootRef = ViewRef;
+type SeparatorRef = ViewRef;
+type SubContentRef = ViewRef;
+type SubRef = ViewRef;
+type SubTriggerRef = PressableRef;
+type TriggerRef = PressableRef;
+
+export type {
+  CheckboxItemProps,
+  CheckboxItemRef,
+  ContentProps,
+  ContentRef,
+  GroupProps,
+  GroupRef,
+  ItemIndicatorProps,
+  ItemIndicatorRef,
+  ItemProps,
+  ItemRef,
+  LabelProps,
+  LabelRef,
+  MenuProps,
+  MenuRef,
+  BackdropProps,
+  BackdropRef,
+  PortalProps,
+  RadioGroupProps,
+  RadioGroupRef,
+  RadioItemProps,
+  RadioItemRef,
+  RootProps,
+  RootRef,
+  SeparatorProps,
+  SeparatorRef,
+  SubContentProps,
+  SubContentRef,
+  SubProps,
+  SubRef,
+  SubTriggerProps,
+  SubTriggerRef,
+  TriggerProps,
+  TriggerRef,
+};

package/src/navigation-menu/index.ts

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