@byldpartners/ui 0.0.1

package/src/components/Form/Form.native.tsx

@@ -0,0 +1,98 @@
+import { View, Text, type ViewProps, type TextProps } from "react-native";
+import { cn } from "../../utils/cn";
+import { FormFieldContext, useFormFieldId } from "./useFormField";
+import type {
+  FormProps,
+  FormFieldProps,
+  FormItemProps,
+  FormLabelProps,
+  FormControlProps,
+  FormDescriptionProps,
+  FormMessageProps,
+} from "./Form.types";
+
+interface FormNativeProps extends FormProps, ViewProps {}
+
+function Form({ children, className, ...props }: FormNativeProps) {
+  return (
+    <View className={cn("gap-6", className)} {...props}>
+      {children}
+    </View>
+  );
+}
+
+function FormField({ name, children }: FormFieldProps) {
+  const id = useFormFieldId();
+  return (
+    <FormFieldContext.Provider value={{ id, name }}>
+      {children}
+    </FormFieldContext.Provider>
+  );
+}
+
+interface FormItemNativeProps extends FormItemProps, ViewProps {}
+
+function FormItem({ children, className, ...props }: FormItemNativeProps) {
+  return (
+    <View className={cn("gap-2", className)} {...props}>
+      {children}
+    </View>
+  );
+}
+
+interface FormLabelNativeProps extends FormLabelProps, TextProps {}
+
+function FormLabel({ children, className, ...props }: FormLabelNativeProps) {
+  return (
+    <Text className={cn("text-sm font-medium leading-none text-foreground", className)} {...props}>
+      {children}
+    </Text>
+  );
+}
+
+interface FormControlNativeProps extends FormControlProps, ViewProps {}
+
+function FormControl({ children, ...props }: FormControlNativeProps) {
+  return <View {...props}>{children}</View>;
+}
+
+interface FormDescriptionNativeProps extends FormDescriptionProps, TextProps {}
+
+function FormDescription({ children, className, ...props }: FormDescriptionNativeProps) {
+  return (
+    <Text className={cn("text-[0.8rem] text-muted-foreground", className)} {...props}>
+      {children}
+    </Text>
+  );
+}
+
+interface FormMessageNativeProps extends FormMessageProps, TextProps {}
+
+function FormMessage({ children, className, ...props }: FormMessageNativeProps) {
+  if (!children) return null;
+
+  return (
+    <Text className={cn("text-[0.8rem] font-medium text-destructive", className)} {...props}>
+      {children}
+    </Text>
+  );
+}
+
+Form.displayName = "Form";
+FormField.displayName = "FormField";
+FormItem.displayName = "FormItem";
+FormLabel.displayName = "FormLabel";
+FormControl.displayName = "FormControl";
+FormDescription.displayName = "FormDescription";
+FormMessage.displayName = "FormMessage";
+
+export {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+};
+export type { FormNativeProps };

package/src/components/Form/Form.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from "./Form.web";
+
+const meta = {
+  title: "Components/Form",
+  component: Form,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Form>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Form style={{ width: 350 }}>
+      <FormField name="username">
+        <FormItem>
+          <FormLabel>Username</FormLabel>
+          <FormControl>
+            <input
+              type="text"
+              placeholder="Enter your username"
+              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </FormControl>
+          <FormDescription>
+            This is your public display name.
+          </FormDescription>
+        </FormItem>
+      </FormField>
+
+      <FormField name="email">
+        <FormItem>
+          <FormLabel>Email</FormLabel>
+          <FormControl>
+            <input
+              type="email"
+              placeholder="Enter your email"
+              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </FormControl>
+          <FormDescription>
+            We will never share your email.
+          </FormDescription>
+        </FormItem>
+      </FormField>
+    </Form>
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <Form style={{ width: 350 }}>
+      <FormField name="username">
+        <FormItem>
+          <FormLabel>Username</FormLabel>
+          <FormControl>
+            <input
+              type="text"
+              placeholder="Enter your username"
+              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </FormControl>
+          <FormDescription>
+            This is your public display name.
+          </FormDescription>
+          <FormMessage>Username must be at least 3 characters.</FormMessage>
+        </FormItem>
+      </FormField>
+    </Form>
+  ),
+};

package/src/components/Form/Form.types.ts

@@ -0,0 +1,35 @@
+export interface FormProps {
+  children?: React.ReactNode;
+  className?: string;
+  onSubmit?: () => void;
+}
+
+export interface FormFieldProps {
+  name: string;
+  children?: React.ReactNode;
+}
+
+export interface FormItemProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface FormLabelProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface FormControlProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface FormDescriptionProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface FormMessageProps {
+  children?: React.ReactNode;
+  className?: string;
+}

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

@@ -0,0 +1,73 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from "./Form.web";
+
+describe("Form", () => {
+  it("renders a form element", () => {
+    render(<Form data-testid="form">content</Form>);
+    expect(screen.getByTestId("form").tagName).toBe("FORM");
+  });
+
+  it("merges custom className", () => {
+    render(<Form data-testid="form" className="my-form">content</Form>);
+    expect(screen.getByTestId("form").className).toContain("my-form");
+  });
+});
+
+describe("FormField + context", () => {
+  it("links FormLabel htmlFor to FormControl id", () => {
+    render(
+      <FormField name="email">
+        <FormItem>
+          <FormLabel>Email</FormLabel>
+          <FormControl data-testid="control">
+            <input />
+          </FormControl>
+        </FormItem>
+      </FormField>,
+    );
+
+    const label = screen.getByText("Email");
+    const control = screen.getByTestId("control");
+
+    // The label's htmlFor should match the control's id
+    expect(label.getAttribute("for")).toBe(control.id);
+  });
+});
+
+describe("FormDescription", () => {
+  it("renders description text", () => {
+    render(<FormDescription>Enter your email</FormDescription>);
+    expect(screen.getByText("Enter your email")).toBeDefined();
+  });
+
+  it("applies muted styling", () => {
+    render(<FormDescription>desc</FormDescription>);
+    expect(screen.getByText("desc").className).toContain("text-muted-foreground");
+  });
+});
+
+describe("FormMessage", () => {
+  it("renders when children provided", () => {
+    render(<FormMessage>Error!</FormMessage>);
+    expect(screen.getByText("Error!")).toBeDefined();
+  });
+
+  it("does not render when no children", () => {
+    const { container } = render(<FormMessage />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("applies destructive styling", () => {
+    render(<FormMessage>Error!</FormMessage>);
+    expect(screen.getByText("Error!").className).toContain("text-destructive");
+  });
+});

package/src/components/Form/Form.web.tsx

@@ -0,0 +1,111 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+import { FormFieldContext, useFormFieldContext, useFormFieldId } from "./useFormField";
+
+const Form = forwardRef<HTMLFormElement, React.FormHTMLAttributes<HTMLFormElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <form ref={ref} className={cn("space-y-6", className)} {...props} />
+    );
+  },
+);
+Form.displayName = "Form";
+
+interface FormFieldProps {
+  name: string;
+  children?: React.ReactNode;
+}
+
+function FormField({ name, children }: FormFieldProps) {
+  const id = useFormFieldId();
+  return (
+    <FormFieldContext.Provider value={{ id, name }}>
+      {children}
+    </FormFieldContext.Provider>
+  );
+}
+FormField.displayName = "FormField";
+
+const FormItem = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    );
+  },
+);
+FormItem.displayName = "FormItem";
+
+const FormLabel = forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => {
+    const { id } = useFormFieldContext();
+    return (
+      <label
+        ref={ref}
+        className={cn(
+          "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          className,
+        )}
+        htmlFor={id}
+        {...props}
+      />
+    );
+  },
+);
+FormLabel.displayName = "FormLabel";
+
+const FormControl = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { id } = useFormFieldContext();
+    return (
+      <div
+        ref={ref}
+        id={id}
+        className={cn("", className)}
+        {...props}
+      />
+    );
+  },
+);
+FormControl.displayName = "FormControl";
+
+const FormDescription = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <p
+      ref={ref}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  if (!children) return null;
+
+  return (
+    <p
+      ref={ref}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+};

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

@@ -0,0 +1,18 @@
+export {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from "./Form.native";
+export type {
+  FormProps,
+  FormFieldProps,
+  FormItemProps,
+  FormLabelProps,
+  FormControlProps,
+  FormDescriptionProps,
+  FormMessageProps,
+} from "./Form.types";

package/src/components/Form/index.ts

@@ -0,0 +1,18 @@
+export {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+} from "./Form.web";
+export type {
+  FormProps,
+  FormFieldProps,
+  FormItemProps,
+  FormLabelProps,
+  FormControlProps,
+  FormDescriptionProps,
+  FormMessageProps,
+} from "./Form.types";

package/src/components/Form/useFormField.test.ts

@@ -0,0 +1,25 @@
+import { createElement } from "react";
+import { describe, it, expect } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { FormFieldContext, useFormFieldContext } from "./useFormField";
+
+describe("useFormFieldContext", () => {
+  it("defaults to empty id and name", () => {
+    const { result } = renderHook(() => useFormFieldContext());
+    expect(result.current.id).toBe("");
+    expect(result.current.name).toBe("");
+  });
+
+  it("returns provided values from context", () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      createElement(
+        FormFieldContext.Provider,
+        { value: { id: "test-id", name: "email" } },
+        children,
+      );
+
+    const { result } = renderHook(() => useFormFieldContext(), { wrapper });
+    expect(result.current.id).toBe("test-id");
+    expect(result.current.name).toBe("email");
+  });
+});

package/src/components/Form/useFormField.ts

@@ -0,0 +1,22 @@
+import { createContext, useContext, useId } from "react";
+
+interface FormFieldContextValue {
+  id: string;
+  name: string;
+}
+
+const FormFieldContext = createContext<FormFieldContextValue>({
+  id: "",
+  name: "",
+});
+
+function useFormFieldContext() {
+  return useContext(FormFieldContext);
+}
+
+function useFormFieldId() {
+  return useId();
+}
+
+export { FormFieldContext, useFormFieldContext, useFormFieldId };
+export type { FormFieldContextValue };

package/src/components/HoverCard/HoverCard.native.tsx

@@ -0,0 +1,15 @@
+const ERROR_MESSAGE = "@byldpartners/ui: HoverCard is not supported on native.";
+
+function HoverCard(): never {
+  throw new Error(ERROR_MESSAGE);
+}
+
+function HoverCardTrigger(): never {
+  throw new Error(ERROR_MESSAGE);
+}
+
+function HoverCardContent(): never {
+  throw new Error(ERROR_MESSAGE);
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/src/components/HoverCard/HoverCard.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+} from "./HoverCard.web";
+
+const meta: Meta<typeof HoverCard> = {
+  title: "Components/HoverCard",
+  component: HoverCard,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof HoverCard>;
+
+export const Default: Story = {
+  render: () => (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <span style={{ textDecoration: "underline", cursor: "pointer" }}>
+          Hover me
+        </span>
+      </HoverCardTrigger>
+      <HoverCardContent>
+        <p>
+          This is additional information that appears when you hover over the
+          trigger element.
+        </p>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+};

package/src/components/HoverCard/HoverCard.types.ts

@@ -0,0 +1,18 @@
+export interface HoverCardProps {
+  openDelay?: number;
+  closeDelay?: number;
+  children?: React.ReactNode;
+}
+
+export interface HoverCardTriggerProps {
+  children?: React.ReactNode;
+  className?: string;
+  asChild?: boolean;
+}
+
+export interface HoverCardContentProps {
+  children?: React.ReactNode;
+  className?: string;
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+}

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

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { HoverCard, HoverCardTrigger, HoverCardContent } from "./HoverCard.web";
+
+describe("HoverCard", () => {
+  it("renders trigger", () => {
+    render(
+      <HoverCard>
+        <HoverCardTrigger>Hover me</HoverCardTrigger>
+        <HoverCardContent>Card content</HoverCardContent>
+      </HoverCard>,
+    );
+    expect(screen.getByText("Hover me")).toBeDefined();
+  });
+
+  it("content is hidden by default", () => {
+    render(
+      <HoverCard>
+        <HoverCardTrigger>Hover me</HoverCardTrigger>
+        <HoverCardContent>Card content</HoverCardContent>
+      </HoverCard>,
+    );
+    expect(screen.queryByText("Card content")).toBeNull();
+  });
+
+  it("shows content when open", () => {
+    render(
+      <HoverCard open>
+        <HoverCardTrigger>Hover me</HoverCardTrigger>
+        <HoverCardContent>Card content</HoverCardContent>
+      </HoverCard>,
+    );
+    expect(screen.getByText("Card content")).toBeDefined();
+  });
+});

package/src/components/HoverCard/HoverCard.web.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "../../utils/cn";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = forwardRef<
+  React.ComponentRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

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

@@ -0,0 +1,2 @@
+export { HoverCard, HoverCardTrigger, HoverCardContent } from "./HoverCard.native";
+export type { HoverCardProps, HoverCardTriggerProps, HoverCardContentProps } from "./HoverCard.types";

package/src/components/HoverCard/index.ts

@@ -0,0 +1,2 @@
+export { HoverCard, HoverCardTrigger, HoverCardContent } from "./HoverCard.web";
+export type { HoverCardProps, HoverCardTriggerProps, HoverCardContentProps } from "./HoverCard.types";

package/src/components/Icon/Icon.native.tsx

@@ -0,0 +1,27 @@
+import type { LucideIcon } from "lucide-react-native";
+import { useResolveClassNames } from "uniwind";
+
+interface IconProps {
+  icon: LucideIcon;
+  size?: number;
+  strokeWidth?: number;
+  className?: string;
+}
+
+function Icon({ icon: LucideComponent, size = 16, strokeWidth, className = "text-foreground" }: IconProps) {
+  const style = useResolveClassNames(className);
+  const color = (style as Record<string, unknown>).color as string | undefined;
+
+  return (
+    <LucideComponent
+      size={size}
+      color={color ?? "currentColor"}
+      strokeWidth={strokeWidth}
+    />
+  );
+}
+
+Icon.displayName = "Icon";
+
+export { Icon };
+export type { IconProps };

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

@@ -0,0 +1,2 @@
+export { Icon } from "./Icon.native";
+export type { IconProps } from "./Icon.native";