@byldpartners/ui 0.0.1

package/src/components/Menubar/Menubar.web.tsx

@@ -0,0 +1,256 @@
+import { forwardRef } from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { cn } from "../../utils/cn";
+
+function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M20 6 9 17l-5-5"/>
+    </svg>
+  );
+}
+
+function ChevronRightIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="m9 18 6-6-6-6"/>
+    </svg>
+  );
+}
+
+function CircleIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <circle cx="12" cy="12" r="10"/>
+    </svg>
+  );
+}
+
+const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref,
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  ),
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <CircleIcon className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+MenubarShortcut.displayName = "MenubarShortcut";
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarShortcut,
+};

package/src/components/Menubar/index.native.ts

@@ -0,0 +1,28 @@
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+} from "./Menubar.native";
+export type {
+  MenubarProps,
+  MenubarMenuProps,
+  MenubarTriggerProps,
+  MenubarContentProps,
+  MenubarItemProps,
+  MenubarSeparatorProps,
+  MenubarSubProps,
+  MenubarSubTriggerProps,
+  MenubarSubContentProps,
+  MenubarCheckboxItemProps,
+  MenubarRadioGroupProps,
+  MenubarRadioItemProps,
+} from "./Menubar.types";

package/src/components/Menubar/index.ts

@@ -0,0 +1,2 @@
+export * from "./Menubar.web";
+export type * from "./Menubar.types";

package/src/components/Menubar/useMenubar.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useMenubarMenu } from "./useMenubar";
+
+describe("useMenubarMenu", () => {
+  it("defaults to closed", () => {
+    const { result } = renderHook(() => useMenubarMenu());
+    expect(result.current.open).toBe(false);
+  });
+
+  it("opens via onOpenChange", () => {
+    const { result } = renderHook(() => useMenubarMenu());
+    act(() => result.current.onOpenChange(true));
+    expect(result.current.open).toBe(true);
+  });
+
+  it("calls external onOpenChange", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useMenubarMenu({ onOpenChange: onChange }),
+    );
+    act(() => result.current.onOpenChange(true));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("works in controlled mode", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useMenubarMenu({ open: false, onOpenChange: onChange }),
+    );
+    act(() => result.current.onOpenChange(true));
+    expect(result.current.open).toBe(false);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/Menubar/useMenubar.ts

@@ -0,0 +1,19 @@
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseMenubarMenuProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function useMenubarMenu({ open: controlledOpen, onOpenChange }: UseMenubarMenuProps = {}) {
+  const [open, setOpen] = useControllableState<boolean>({
+    value: controlledOpen,
+    defaultValue: false,
+    onChange: onOpenChange,
+  });
+
+  return {
+    open,
+    onOpenChange: setOpen,
+  };
+}

package/src/components/NavigationMenu/NavigationMenu.native.tsx

@@ -0,0 +1,128 @@
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  type ViewProps,
+} from "react-native";
+import { cn } from "../../utils/cn";
+import type {
+  NavigationMenuProps,
+  NavigationMenuListProps,
+  NavigationMenuItemProps,
+  NavigationMenuTriggerProps,
+  NavigationMenuContentProps,
+  NavigationMenuLinkProps,
+} from "./NavigationMenu.types";
+
+interface NavigationMenuNativeProps extends NavigationMenuProps {}
+
+function NavigationMenu({ children, className }: NavigationMenuNativeProps) {
+  return (
+    <View className={cn("flex-row items-center", className)}>
+      {children}
+    </View>
+  );
+}
+NavigationMenu.displayName = "NavigationMenu";
+
+interface NavigationMenuListNativeProps extends NavigationMenuListProps {}
+
+function NavigationMenuList({ children }: NavigationMenuListNativeProps) {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={{ flexDirection: "row", alignItems: "center", gap: 4 }}
+    >
+      {children}
+    </ScrollView>
+  );
+}
+NavigationMenuList.displayName = "NavigationMenuList";
+
+interface NavigationMenuItemNativeProps extends NavigationMenuItemProps {}
+
+function NavigationMenuItem({ children, className }: NavigationMenuItemNativeProps) {
+  return <View className={className}>{children}</View>;
+}
+NavigationMenuItem.displayName = "NavigationMenuItem";
+
+interface NavigationMenuTriggerNativeProps extends NavigationMenuTriggerProps {
+  onPress?: () => void;
+}
+
+function NavigationMenuTrigger({
+  children,
+  onPress,
+  className,
+}: NavigationMenuTriggerNativeProps) {
+  return (
+    <Pressable
+      className={cn(
+        "px-4 py-2 rounded-md bg-transparent",
+        className,
+      )}
+      onPress={onPress}
+    >
+      {typeof children === "string" ? (
+        <Text className="text-sm font-medium text-foreground">
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+
+interface NavigationMenuContentNativeProps extends NavigationMenuContentProps {}
+
+function NavigationMenuContent({ children, className }: NavigationMenuContentNativeProps) {
+  return <View className={cn("p-4", className)}>{children}</View>;
+}
+NavigationMenuContent.displayName = "NavigationMenuContent";
+
+interface NavigationMenuLinkNativeProps extends NavigationMenuLinkProps {}
+
+function NavigationMenuLink({
+  children,
+  onPress,
+  active,
+  className,
+}: NavigationMenuLinkNativeProps) {
+  return (
+    <Pressable
+      className={cn(
+        "px-4 py-2 rounded-md",
+        active && "bg-accent",
+        className,
+      )}
+      onPress={onPress}
+    >
+      {typeof children === "string" ? (
+        <Text
+          className={cn(
+            "text-sm font-medium text-foreground",
+            active && "font-semibold",
+          )}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+NavigationMenuLink.displayName = "NavigationMenuLink";
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+};

package/src/components/NavigationMenu/NavigationMenu.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuLink,
+} from "./NavigationMenu.web";
+
+const meta: Meta<typeof NavigationMenu> = {
+  title: "Components/NavigationMenu",
+  component: NavigationMenu,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof NavigationMenu>;
+
+export const Default: Story = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#">Home</NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#">About</NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#">Contact</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+};

package/src/components/NavigationMenu/NavigationMenu.types.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+
+export interface NavigationMenuProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface NavigationMenuListProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface NavigationMenuItemProps {
+  children?: ReactNode;
+  className?: string;
+  value?: string;
+}
+
+export interface NavigationMenuTriggerProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface NavigationMenuContentProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface NavigationMenuLinkProps {
+  children?: ReactNode;
+  className?: string;
+  href?: string;
+  active?: boolean;
+  onPress?: () => void;
+}

package/src/components/NavigationMenu/NavigationMenu.web.test.tsx

@@ -0,0 +1,56 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from "./NavigationMenu.web";
+
+describe("NavigationMenu", () => {
+  it("renders a nav element", () => {
+    render(
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuLink href="#">Home</NavigationMenuLink>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>,
+    );
+    expect(screen.getByRole("navigation")).toBeDefined();
+  });
+
+  it("renders links", () => {
+    render(
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuLink href="#">Home</NavigationMenuLink>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>,
+    );
+    expect(screen.getByText("Home")).toBeDefined();
+  });
+
+  it("merges custom className", () => {
+    render(
+      <NavigationMenu className="my-nav">
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuLink href="#">X</NavigationMenuLink>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>,
+    );
+    expect(screen.getByRole("navigation").className).toContain("my-nav");
+  });
+
+  it("navigationMenuTriggerStyle generates classes", () => {
+    const classes = navigationMenuTriggerStyle();
+    expect(classes).toContain("inline-flex");
+    expect(classes).toContain("h-9");
+  });
+});