@byldpartners/ui 0.0.1

package/src/components/Command/Command.web.tsx

@@ -0,0 +1,134 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+
+const Command = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Command.displayName = "Command";
+
+const CommandInput = forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" data-command-input-wrapper="">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="mr-2 h-4 w-4 shrink-0 opacity-50"
+    >
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21-4.3-4.3" />
+    </svg>
+    <input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+CommandInput.displayName = "CommandInput";
+
+const CommandList = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+      {...props}
+    />
+  ),
+);
+CommandList.displayName = "CommandList";
+
+const CommandEmpty = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("py-6 text-center text-sm", className)}
+    {...props}
+  />
+));
+CommandEmpty.displayName = "CommandEmpty";
+
+const CommandGroup = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { heading?: string }
+>(({ className, heading, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[data-command-group-heading]]:px-2 [&_[data-command-group-heading]]:py-1.5 [&_[data-command-group-heading]]:text-xs [&_[data-command-group-heading]]:font-medium [&_[data-command-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  >
+    {heading && (
+      <div data-command-group-heading="" className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+        {heading}
+      </div>
+    )}
+    {children}
+  </div>
+));
+CommandGroup.displayName = "CommandGroup";
+
+const CommandSeparator = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = "CommandSeparator";
+
+const CommandItem = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { disabled?: boolean }
+>(({ className, disabled, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="option"
+    aria-disabled={disabled}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      disabled && "pointer-events-none opacity-50",
+      className,
+    )}
+    data-disabled={disabled || undefined}
+    {...props}
+  />
+));
+CommandItem.displayName = "CommandItem";
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandSeparator,
+  CommandItem,
+};

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

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

package/src/components/Command/index.ts

@@ -0,0 +1,18 @@
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandSeparator,
+  CommandItem,
+} from "./Command.web";
+export type {
+  CommandProps,
+  CommandInputProps,
+  CommandListProps,
+  CommandEmptyProps,
+  CommandGroupProps,
+  CommandItemProps,
+  CommandSeparatorProps,
+} from "./Command.types";

package/src/components/ContextMenu/ContextMenu.native.tsx

@@ -0,0 +1,241 @@
+import {
+  createContext,
+  useContext,
+} from "react";
+import {
+  View,
+  Text,
+  Modal,
+  Pressable,
+  ScrollView,
+} from "react-native";
+import { cn } from "../../utils/cn";
+import type {
+  ContextMenuProps,
+  ContextMenuTriggerProps,
+  ContextMenuContentProps,
+  ContextMenuItemProps,
+  ContextMenuSeparatorProps,
+  ContextMenuLabelProps,
+  ContextMenuCheckboxItemProps,
+  ContextMenuRadioGroupProps,
+  ContextMenuRadioItemProps,
+  ContextMenuSubProps,
+  ContextMenuSubTriggerProps,
+  ContextMenuSubContentProps,
+} from "./ContextMenu.types";
+import { useContextMenu } from "./useContextMenu";
+
+interface ContextMenuContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const ContextMenuContext = createContext<ContextMenuContextValue>({
+  open: false,
+  onOpenChange: () => {},
+});
+
+function ContextMenu({ children }: ContextMenuProps) {
+  const { open, onOpenChange } = useContextMenu();
+  return (
+    <ContextMenuContext.Provider value={{ open, onOpenChange }}>
+      {children}
+    </ContextMenuContext.Provider>
+  );
+}
+ContextMenu.displayName = "ContextMenu";
+
+function ContextMenuTrigger({ children, className }: ContextMenuTriggerProps) {
+  const { onOpenChange } = useContext(ContextMenuContext);
+  return (
+    <Pressable
+      onLongPress={() => onOpenChange(true)}
+      delayLongPress={500}
+      className={className}
+    >
+      {children}
+    </Pressable>
+  );
+}
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+
+function ContextMenuContent({ children, className }: ContextMenuContentProps) {
+  const { open, onOpenChange } = useContext(ContextMenuContext);
+
+  if (!open) return null;
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={() => onOpenChange(false)}
+    >
+      <Pressable
+        className="flex-1 justify-center items-center"
+        style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+        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>
+  );
+}
+ContextMenuContent.displayName = "ContextMenuContent";
+
+interface ContextMenuItemNativeProps extends ContextMenuItemProps {}
+
+function ContextMenuItem({
+  children,
+  onSelect,
+  disabled,
+  className,
+}: ContextMenuItemNativeProps) {
+  const { onOpenChange } = useContext(ContextMenuContext);
+  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);
+      }}
+    >
+      <Text
+        className={cn(
+          "text-sm text-popover-foreground",
+          disabled && "text-muted-foreground",
+        )}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  );
+}
+ContextMenuItem.displayName = "ContextMenuItem";
+
+function ContextMenuSeparator({ className }: ContextMenuSeparatorProps) {
+  return (
+    <View className={cn("bg-border my-1 -mx-1 h-[0.5px]", className)} />
+  );
+}
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+
+function ContextMenuLabel({ children, className }: ContextMenuLabelProps) {
+  return (
+    <Text
+      className={cn(
+        "px-3 py-1.5 text-xs font-semibold text-muted-foreground",
+        className,
+      )}
+    >
+      {children}
+    </Text>
+  );
+}
+ContextMenuLabel.displayName = "ContextMenuLabel";
+
+function ContextMenuCheckboxItem({
+  children,
+  checked,
+  onCheckedChange,
+  disabled,
+  className,
+}: ContextMenuCheckboxItemProps) {
+  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>
+      <Text className="text-sm text-popover-foreground">{children}</Text>
+    </Pressable>
+  );
+}
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+
+function ContextMenuRadioGroup({ children }: ContextMenuRadioGroupProps) {
+  return <>{children}</>;
+}
+ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
+
+function ContextMenuRadioItem({
+  children,
+  className,
+}: ContextMenuRadioItemProps) {
+  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>
+      <Text className="text-sm text-popover-foreground">{children}</Text>
+    </View>
+  );
+}
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+
+function ContextMenuSub({ children }: ContextMenuSubProps) {
+  return <>{children}</>;
+}
+ContextMenuSub.displayName = "ContextMenuSub";
+
+function ContextMenuSubTrigger({ children, className }: ContextMenuSubTriggerProps) {
+  return (
+    <View
+      className={cn(
+        "flex-row items-center px-3 py-2.5 rounded-sm",
+        className,
+      )}
+    >
+      <Text className="text-sm text-popover-foreground">{children}</Text>
+      <Text className="ml-auto text-base text-muted-foreground">›</Text>
+    </View>
+  );
+}
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+
+function ContextMenuSubContent({ children }: ContextMenuSubContentProps) {
+  return <View>{children}</View>;
+}
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuLabel,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+};

package/src/components/ContextMenu/ContextMenu.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+} from "./ContextMenu.web";
+
+const meta: Meta<typeof ContextMenu> = {
+  title: "Components/ContextMenu",
+  component: ContextMenu,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ContextMenu>;
+
+export const Default: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <div
+          style={{
+            border: "2px dashed #ccc",
+            padding: 40,
+            textAlign: "center",
+            borderRadius: 8,
+          }}
+        >
+          Right click here
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Copy</ContextMenuItem>
+        <ContextMenuItem>Cut</ContextMenuItem>
+        <ContextMenuItem>Paste</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};

package/src/components/ContextMenu/ContextMenu.types.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+
+export interface ContextMenuProps {
+  children?: ReactNode;
+}
+
+export interface ContextMenuTriggerProps {
+  children?: ReactNode;
+  className?: string;
+  asChild?: boolean;
+}
+
+export interface ContextMenuContentProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface ContextMenuItemProps {
+  children?: ReactNode;
+  className?: string;
+  inset?: boolean;
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+
+export interface ContextMenuSeparatorProps {
+  className?: string;
+}
+
+export interface ContextMenuLabelProps {
+  children?: ReactNode;
+  className?: string;
+  inset?: boolean;
+}
+
+export interface ContextMenuCheckboxItemProps {
+  children?: ReactNode;
+  className?: string;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export interface ContextMenuRadioGroupProps {
+  children?: ReactNode;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export interface ContextMenuRadioItemProps {
+  children?: ReactNode;
+  className?: string;
+  value: string;
+}
+
+export interface ContextMenuSubProps {
+  children?: ReactNode;
+}
+
+export interface ContextMenuSubTriggerProps {
+  children?: ReactNode;
+  className?: string;
+  inset?: boolean;
+}
+
+export interface ContextMenuSubContentProps {
+  children?: ReactNode;
+  className?: string;
+}