@byldpartners/ui 0.0.1

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

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Label } from "./Label.web";
+
+describe("Label", () => {
+  it("renders a label element", () => {
+    render(<Label>Username</Label>);
+    const el = screen.getByText("Username");
+    expect(el.tagName).toBe("LABEL");
+  });
+
+  it("applies base styling", () => {
+    render(<Label>Username</Label>);
+    expect(screen.getByText("Username").className).toContain("text-sm");
+    expect(screen.getByText("Username").className).toContain("font-medium");
+  });
+
+  it("merges custom className", () => {
+    render(<Label className="my-label">Username</Label>);
+    expect(screen.getByText("Username").className).toContain("my-label");
+  });
+
+  it("forwards htmlFor prop", () => {
+    render(<Label htmlFor="email-input">Email</Label>);
+    expect(screen.getByText("Email").getAttribute("for")).toBe("email-input");
+  });
+});

package/src/components/Label/Label.web.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = forwardRef<
+  React.ComponentRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

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

@@ -0,0 +1,2 @@
+export { Label } from "./Label.native";
+export type { LabelProps } from "./Label.types";

package/src/components/Label/index.ts

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

package/src/components/Menubar/Menubar.native.tsx

@@ -0,0 +1,287 @@
+import {
+  createContext,
+  useContext,
+} from "react";
+import {
+  View,
+  Text,
+  Modal,
+  Pressable,
+  ScrollView,
+  type ViewProps,
+} from "react-native";
+import { cn } from "../../utils/cn";
+import type {
+  MenubarProps,
+  MenubarMenuProps,
+  MenubarTriggerProps,
+  MenubarContentProps,
+  MenubarItemProps,
+  MenubarSeparatorProps,
+  MenubarSubProps,
+  MenubarSubTriggerProps,
+  MenubarSubContentProps,
+  MenubarCheckboxItemProps,
+  MenubarRadioGroupProps,
+  MenubarRadioItemProps,
+} from "./Menubar.types";
+import { useMenubarMenu } from "./useMenubar";
+
+/**
+ * Menubar - Native implementation
+ *
+ * Note: Menubars are inherently web-heavy. This provides a basic horizontal
+ * row of menu triggers with modal-based dropdown content.
+ */
+
+interface MenubarMenuContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const MenubarMenuContext = createContext<MenubarMenuContextValue>({
+  open: false,
+  onOpenChange: () => {},
+});
+
+interface MenubarNativeProps extends MenubarProps {}
+
+function Menubar({ children, className }: MenubarNativeProps) {
+  return (
+    <View
+      className={cn(
+        "flex-row items-center border-[0.5px] border-border rounded-md bg-background p-1 gap-1 shadow-sm elevation-1",
+        className,
+      )}
+    >
+      {children}
+    </View>
+  );
+}
+Menubar.displayName = "Menubar";
+
+function MenubarMenu({ children }: MenubarMenuProps) {
+  const { open, onOpenChange } = useMenubarMenu();
+  return (
+    <MenubarMenuContext.Provider value={{ open, onOpenChange }}>
+      {children}
+    </MenubarMenuContext.Provider>
+  );
+}
+MenubarMenu.displayName = "MenubarMenu";
+
+interface MenubarTriggerNativeProps extends MenubarTriggerProps {}
+
+function MenubarTrigger({ children, className }: MenubarTriggerNativeProps) {
+  const { open, onOpenChange } = useContext(MenubarMenuContext);
+  return (
+    <Pressable
+      className={cn(
+        "px-3 py-1.5 rounded-sm",
+        open && "bg-accent",
+        className,
+      )}
+      onPress={() => onOpenChange(!open)}
+    >
+      {typeof children === "string" ? (
+        <Text className="text-sm font-medium text-foreground">{children}</Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+MenubarTrigger.displayName = "MenubarTrigger";
+
+interface MenubarContentNativeProps extends MenubarContentProps {}
+
+function MenubarContent({ children, className }: MenubarContentNativeProps) {
+  const { open, onOpenChange } = useContext(MenubarMenuContext);
+
+  if (!open) return null;
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={() => onOpenChange(false)}
+    >
+      <Pressable
+        className="flex-1 bg-black/30 justify-center items-center"
+        onPress={() => onOpenChange(false)}
+      >
+        <View
+          className={cn(
+            "bg-popover rounded-lg p-1 min-w-[200px] max-w-[280px] max-h-[400px] shadow-md elevation-3",
+            className,
+          )}
+        >
+          <ScrollView bounces={false}>{children}</ScrollView>
+        </View>
+      </Pressable>
+    </Modal>
+  );
+}
+MenubarContent.displayName = "MenubarContent";
+
+interface MenubarItemNativeProps extends MenubarItemProps {}
+
+function MenubarItem({
+  children,
+  onSelect,
+  disabled,
+  className,
+}: MenubarItemNativeProps) {
+  const { onOpenChange } = useContext(MenubarMenuContext);
+  return (
+    <Pressable
+      className={cn(
+        "flex-row items-center px-3 py-2.5 rounded-sm",
+        disabled && "opacity-50",
+        className,
+      )}
+      disabled={disabled}
+      onPress={() => {
+        onSelect?.();
+        onOpenChange(false);
+      }}
+    >
+      {typeof children === "string" ? (
+        <Text
+          className={cn(
+            "text-sm text-popover-foreground",
+            disabled && "text-muted-foreground",
+          )}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+MenubarItem.displayName = "MenubarItem";
+
+interface MenubarSeparatorNativeProps extends MenubarSeparatorProps {}
+
+function MenubarSeparator({ className }: MenubarSeparatorNativeProps) {
+  return (
+    <View
+      className={cn("bg-border my-1 -mx-1 h-[0.5px]", className)}
+    />
+  );
+}
+MenubarSeparator.displayName = "MenubarSeparator";
+
+function MenubarSub({ children }: MenubarSubProps) {
+  return <>{children}</>;
+}
+MenubarSub.displayName = "MenubarSub";
+
+interface MenubarSubTriggerNativeProps extends MenubarSubTriggerProps {}
+
+function MenubarSubTrigger({ children, className }: MenubarSubTriggerNativeProps) {
+  return (
+    <View
+      className={cn(
+        "flex-row items-center px-3 py-2.5 rounded-sm",
+        className,
+      )}
+    >
+      {typeof children === "string" ? (
+        <Text className="text-sm text-popover-foreground">{children}</Text>
+      ) : (
+        children
+      )}
+      <Text className="ml-auto text-base text-muted-foreground">›</Text>
+    </View>
+  );
+}
+MenubarSubTrigger.displayName = "MenubarSubTrigger";
+
+function MenubarSubContent({ children }: MenubarSubContentProps) {
+  return <View>{children}</View>;
+}
+MenubarSubContent.displayName = "MenubarSubContent";
+
+interface MenubarCheckboxItemNativeProps extends MenubarCheckboxItemProps {}
+
+function MenubarCheckboxItem({
+  children,
+  checked,
+  onCheckedChange,
+  disabled,
+  className,
+}: MenubarCheckboxItemNativeProps) {
+  return (
+    <Pressable
+      className={cn(
+        "flex-row items-center px-3 py-2.5 rounded-sm pl-9",
+        disabled && "opacity-50",
+        className,
+      )}
+      disabled={disabled}
+      onPress={() => onCheckedChange?.(!checked)}
+    >
+      <View className="absolute left-3 w-4 h-4 justify-center items-center">
+        {checked && <Text className="text-xs text-popover-foreground">✓</Text>}
+      </View>
+      {typeof children === "string" ? (
+        <Text className="text-sm text-popover-foreground">{children}</Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+MenubarCheckboxItem.displayName = "MenubarCheckboxItem";
+
+function MenubarRadioGroup({
+  children,
+}: MenubarRadioGroupProps) {
+  return <>{children}</>;
+}
+MenubarRadioGroup.displayName = "MenubarRadioGroup";
+
+interface MenubarRadioItemNativeProps extends MenubarRadioItemProps {}
+
+function MenubarRadioItem({
+  children,
+  className,
+}: MenubarRadioItemNativeProps) {
+  return (
+    <View
+      className={cn(
+        "flex-row items-center px-3 py-2.5 rounded-sm pl-9",
+        className,
+      )}
+    >
+      <View className="absolute left-3 w-4 h-4 justify-center items-center">
+        <View className="w-1.5 h-1.5 rounded-full bg-popover-foreground" />
+      </View>
+      {typeof children === "string" ? (
+        <Text className="text-sm text-popover-foreground">{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+MenubarRadioItem.displayName = "MenubarRadioItem";
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+};

package/src/components/Menubar/Menubar.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+} from "./Menubar.web";
+
+const meta: Meta<typeof Menubar> = {
+  title: "Components/Menubar",
+  component: Menubar,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof Menubar>;
+
+export const Default: Story = {
+  render: () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>New File</MenubarItem>
+          <MenubarItem>Open File</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Save</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Undo</MenubarItem>
+          <MenubarItem>Redo</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+};

package/src/components/Menubar/Menubar.types.ts

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+
+export interface MenubarProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface MenubarMenuProps {
+  children?: ReactNode;
+}
+
+export interface MenubarTriggerProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface MenubarContentProps {
+  children?: ReactNode;
+  className?: string;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  sideOffset?: number;
+}
+
+export interface MenubarItemProps {
+  children?: ReactNode;
+  className?: string;
+  inset?: boolean;
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+
+export interface MenubarSeparatorProps {
+  className?: string;
+}
+
+export interface MenubarSubProps {
+  children?: ReactNode;
+}
+
+export interface MenubarSubTriggerProps {
+  children?: ReactNode;
+  className?: string;
+  inset?: boolean;
+}
+
+export interface MenubarSubContentProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface MenubarCheckboxItemProps {
+  children?: ReactNode;
+  className?: string;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export interface MenubarRadioGroupProps {
+  children?: ReactNode;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export interface MenubarRadioItemProps {
+  children?: ReactNode;
+  className?: string;
+  value: string;
+}