@byldpartners/ui 0.0.1

package/src/components/Table/Table.types.ts

@@ -0,0 +1,41 @@
+export interface TableProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface TableHeaderProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface TableBodyProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface TableFooterProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface TableRowProps {
+  children?: React.ReactNode;
+  className?: string;
+  selected?: boolean;
+}
+
+export interface TableHeadProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface TableCellProps {
+  children?: React.ReactNode;
+  className?: string;
+  colSpan?: number;
+}
+
+export interface TableCaptionProps {
+  children?: React.ReactNode;
+  className?: string;
+}

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

@@ -0,0 +1,77 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from "./Table.web";
+
+function renderTable() {
+  return render(
+    <Table>
+      <TableCaption>A test table</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Age</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>Alice</TableCell>
+          <TableCell>25</TableCell>
+        </TableRow>
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={2}>Total: 1</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>,
+  );
+}
+
+describe("Table", () => {
+  it("renders a table element", () => {
+    renderTable();
+    expect(screen.getByRole("table")).toBeDefined();
+  });
+
+  it("renders header cells", () => {
+    renderTable();
+    expect(screen.getByText("Name").tagName).toBe("TH");
+    expect(screen.getByText("Age").tagName).toBe("TH");
+  });
+
+  it("renders body cells", () => {
+    renderTable();
+    expect(screen.getByText("Alice").tagName).toBe("TD");
+    expect(screen.getByText("25").tagName).toBe("TD");
+  });
+
+  it("renders caption", () => {
+    renderTable();
+    expect(screen.getByText("A test table").tagName).toBe("CAPTION");
+  });
+
+  it("renders footer", () => {
+    renderTable();
+    expect(screen.getByText("Total: 1")).toBeDefined();
+  });
+
+  it("merges className on Table", () => {
+    render(<Table className="my-table"><TableBody><TableRow><TableCell>x</TableCell></TableRow></TableBody></Table>);
+    expect(screen.getByRole("table").className).toContain("my-table");
+  });
+
+  it("wraps table in overflow container", () => {
+    renderTable();
+    const wrapper = screen.getByRole("table").parentElement!;
+    expect(wrapper.className).toContain("overflow-auto");
+  });
+});

package/src/components/Table/Table.web.tsx

@@ -0,0 +1,119 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+
+const Table = forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+};

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

@@ -0,0 +1,2 @@
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from "./Table.native";
+export type { TableProps, TableHeaderProps, TableBodyProps, TableFooterProps, TableRowProps, TableHeadProps, TableCellProps, TableCaptionProps } from "./Table.types";

package/src/components/Table/index.ts

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

package/src/components/Tabs/Tabs.native.tsx

@@ -0,0 +1,136 @@
+import { createContext, useContext } from "react";
+import { View, Text, Pressable, type ViewProps } from "react-native";
+import { cn } from "../../utils/cn";
+import { useTabs as useTabsHook } from "./useTabs";
+import type {
+  TabsProps,
+  TabsListProps,
+  TabsTriggerProps,
+  TabsContentProps,
+} from "./Tabs.types";
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a <Tabs />");
+  }
+  return context;
+}
+
+type TabsNativeProps = TabsProps & Omit<ViewProps, "className">;
+
+function Tabs({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  children,
+  ...props
+}: TabsNativeProps) {
+  const { value, onValueChange: handleValueChange } = useTabsHook({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+  });
+
+  return (
+    <TabsContext.Provider value={{ value, onValueChange: handleValueChange }}>
+      <View {...props}>{children}</View>
+    </TabsContext.Provider>
+  );
+}
+Tabs.displayName = "Tabs";
+
+type TabsListNativeProps = TabsListProps & Omit<ViewProps, "className">;
+
+function TabsList({ children, className, ...props }: TabsListNativeProps) {
+  return (
+    <View
+      className={cn(
+        "flex-row h-9 items-center bg-muted rounded-lg p-1",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+TabsList.displayName = "TabsList";
+
+type TabsTriggerNativeProps = TabsTriggerProps & Omit<ViewProps, "className">;
+
+function TabsTrigger({
+  value: triggerValue,
+  children,
+  disabled,
+  className,
+  ...props
+}: TabsTriggerNativeProps) {
+  const { value, onValueChange } = useTabsContext();
+  const isActive = value === triggerValue;
+
+  return (
+    <Pressable
+      onPress={() => !disabled && onValueChange(triggerValue)}
+      disabled={disabled}
+      className={cn(
+        "flex-1 items-center justify-center px-3 py-1 rounded-md",
+        isActive && "bg-background shadow-sm elevation-2",
+        disabled && "opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      {typeof children === "string" ? (
+        <Text
+          className={cn(
+            "text-sm font-medium leading-none",
+            isActive ? "text-foreground" : "text-muted-foreground",
+          )}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+TabsTrigger.displayName = "TabsTrigger";
+
+type TabsContentNativeProps = TabsContentProps & Omit<ViewProps, "className">;
+
+function TabsContent({
+  value: contentValue,
+  children,
+  className,
+  ...props
+}: TabsContentNativeProps) {
+  const { value } = useTabsContext();
+
+  if (value !== contentValue) {
+    return null;
+  }
+
+  return (
+    <View className={cn("mt-2", className)} {...props}>
+      {children}
+    </View>
+  );
+}
+TabsContent.displayName = "TabsContent";
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+export type {
+  TabsNativeProps,
+  TabsListNativeProps,
+  TabsTriggerNativeProps,
+  TabsContentNativeProps,
+};

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./Tabs.web";
+
+const meta: Meta<typeof Tabs> = {
+  title: "Components/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="account" style={{ width: 400 }}>
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        Manage your account details and preferences here.
+      </TabsContent>
+      <TabsContent value="password">
+        Update your password and security settings.
+      </TabsContent>
+      <TabsContent value="settings">
+        Configure your application settings and notifications.
+      </TabsContent>
+    </Tabs>
+  ),
+};

package/src/components/Tabs/Tabs.types.ts

@@ -0,0 +1,25 @@
+export interface TabsProps {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface TabsListProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface TabsTriggerProps {
+  value: string;
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+
+export interface TabsContentProps {
+  value: string;
+  children?: React.ReactNode;
+  className?: string;
+}

package/src/components/Tabs/Tabs.web.tsx

@@ -0,0 +1,52 @@
+import { forwardRef } from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../utils/cn";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,2 @@
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./Tabs.native";
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from "./Tabs.types";

package/src/components/Tabs/index.ts

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

package/src/components/Tabs/useTabs.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useTabs } from "./useTabs";
+
+describe("useTabs", () => {
+  it("defaults to empty string", () => {
+    const { result } = renderHook(() => useTabs({}));
+    expect(result.current.value).toBe("");
+  });
+
+  it("uses defaultValue", () => {
+    const { result } = renderHook(() => useTabs({ defaultValue: "tab-1" }));
+    expect(result.current.value).toBe("tab-1");
+  });
+
+  it("changes value via onValueChange", () => {
+    const { result } = renderHook(() => useTabs({ defaultValue: "tab-1" }));
+    act(() => result.current.onValueChange("tab-2"));
+    expect(result.current.value).toBe("tab-2");
+  });
+
+  it("calls external onValueChange callback", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useTabs({ defaultValue: "tab-1", onValueChange: onChange }),
+    );
+    act(() => result.current.onValueChange("tab-2"));
+    expect(onChange).toHaveBeenCalledWith("tab-2");
+  });
+
+  it("works in controlled mode", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useTabs({ value: "controlled", onValueChange: onChange }),
+    );
+    act(() => result.current.onValueChange("new"));
+    expect(result.current.value).toBe("controlled");
+    expect(onChange).toHaveBeenCalledWith("new");
+  });
+});

package/src/components/Tabs/useTabs.ts

@@ -0,0 +1,20 @@
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseTabsProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export function useTabs({ value, defaultValue = "", onValueChange }: UseTabsProps) {
+  const [currentValue, setCurrentValue] = useControllableState<string>({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+
+  return {
+    value: currentValue,
+    onValueChange: setCurrentValue,
+  };
+}

package/src/components/Textarea/Textarea.native.tsx

@@ -0,0 +1,33 @@
+import { TextInput, type TextInputProps } from "react-native";
+import { cn } from "../../utils/cn";
+import type { TextareaProps } from "./Textarea.types";
+
+type TextareaNativeProps = TextareaProps & Omit<TextInputProps, "className">;
+
+function Textarea({
+  disabled = false,
+  editable,
+  className,
+  numberOfLines = 4,
+  ...props
+}: TextareaNativeProps) {
+  return (
+    <TextInput
+      multiline
+      numberOfLines={numberOfLines}
+      editable={editable !== undefined ? editable : !disabled}
+      className={cn(
+        "min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm leading-tight text-foreground shadow-sm elevation-1",
+        disabled && "opacity-50",
+        className,
+      )}
+      style={{ textAlignVertical: "top" }}
+      {...props}
+    />
+  );
+}
+
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+export type { TextareaNativeProps };

package/src/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Textarea } from "./Textarea.web";
+
+const meta: Meta<typeof Textarea> = {
+  title: "Components/Textarea",
+  component: Textarea,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Type your message...",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Type your message...",
+    disabled: true,
+  },
+};

package/src/components/Textarea/Textarea.types.ts

@@ -0,0 +1,10 @@
+export interface TextareaProps {
+  placeholder?: string;
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (text: string) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  rows?: number;
+  className?: string;
+}

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

@@ -0,0 +1,33 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Textarea } from "./Textarea.web";
+
+describe("Textarea", () => {
+  it("renders a textarea element", () => {
+    render(<Textarea placeholder="Write here" />);
+    expect(screen.getByPlaceholderText("Write here").tagName).toBe("TEXTAREA");
+  });
+
+  it("merges custom className", () => {
+    render(<Textarea className="my-textarea" placeholder="test" />);
+    expect(screen.getByPlaceholderText("test").className).toContain("my-textarea");
+  });
+
+  it("forwards disabled prop", () => {
+    render(<Textarea disabled placeholder="test" />);
+    expect(screen.getByPlaceholderText("test")).toHaveProperty("disabled", true);
+  });
+
+  it("forwards value and onChange", () => {
+    const onChange = vi.fn();
+    render(<Textarea value="hello" onChange={onChange} />);
+    fireEvent.change(screen.getByDisplayValue("hello"), { target: { value: "world" } });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("forwards ref", () => {
+    let ref: HTMLTextAreaElement | null = null;
+    render(<Textarea ref={(el) => { ref = el; }} placeholder="test" />);
+    expect(ref).toBeInstanceOf(HTMLTextAreaElement);
+  });
+});