@byldpartners/ui 0.0.1

package/src/components/Input/Input.native.tsx

@@ -0,0 +1,32 @@
+import { TextInput, type TextInputProps } from "react-native";
+import type { InputProps } from "./Input.types";
+import { cn } from "../../utils/cn";
+
+interface InputNativeProps extends InputProps, TextInputProps {}
+
+function Input({
+  disabled = false,
+  editable,
+  className,
+  placeholderTextColor,
+  ...props
+}: InputNativeProps) {
+  return (
+    <TextInput
+      editable={editable !== undefined ? editable : !disabled}
+      placeholderTextColor={placeholderTextColor}
+      className={cn(
+        "h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm leading-tight text-foreground shadow-sm elevation-1",
+        disabled && "opacity-50",
+        className,
+      )}
+      style={{ textAlignVertical: "center" }}
+      {...props}
+    />
+  );
+}
+
+Input.displayName = "Input";
+
+export { Input };
+export type { InputNativeProps };

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Input } from "./Input.web";
+
+const meta = {
+  title: "Components/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Type here...",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled",
+    disabled: true,
+  },
+};
+
+export const WithLabel: Story = {
+  decorators: [
+    (Story) => (
+      <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+        <span style={{ fontSize: 14, fontWeight: 500 }}>Email</span>
+        <Story />
+      </label>
+    ),
+  ],
+  args: {
+    type: "email",
+    placeholder: "you@example.com",
+  },
+};

package/src/components/Input/Input.types.ts

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

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

@@ -0,0 +1,39 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Input } from "./Input.web";
+
+describe("Input", () => {
+  it("renders an input element", () => {
+    render(<Input placeholder="Type here" />);
+    expect(screen.getByPlaceholderText("Type here")).toBeDefined();
+  });
+
+  it("applies type prop", () => {
+    render(<Input type="email" placeholder="email" />);
+    expect(screen.getByPlaceholderText("email")).toHaveProperty("type", "email");
+  });
+
+  it("merges custom className", () => {
+    render(<Input className="my-input" placeholder="test" />);
+    expect(screen.getByPlaceholderText("test").className).toContain("my-input");
+  });
+
+  it("forwards disabled prop", () => {
+    render(<Input disabled placeholder="test" />);
+    expect(screen.getByPlaceholderText("test")).toHaveProperty("disabled", true);
+  });
+
+  it("forwards value and onChange", () => {
+    const onChange = vi.fn();
+    render(<Input value="hello" onChange={onChange} />);
+    const input = screen.getByDisplayValue("hello");
+    fireEvent.change(input, { target: { value: "world" } });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("forwards ref", () => {
+    let ref: HTMLInputElement | null = null;
+    render(<Input ref={(el) => { ref = el; }} placeholder="test" />);
+    expect(ref).toBeInstanceOf(HTMLInputElement);
+  });
+});

package/src/components/Input/Input.web.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+
+const Input = forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

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

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

package/src/components/Input/index.ts

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

package/src/components/InputOTP/InputOTP.native.tsx

@@ -0,0 +1,93 @@
+import { useRef } from "react";
+import {
+  View,
+  TextInput,
+  type ViewProps,
+  type NativeSyntheticEvent,
+} from "react-native";
+import { cn } from "../../utils/cn";
+import { useInputOTP } from "./useInputOTP";
+import type { InputOTPProps } from "./InputOTP.types";
+
+interface InputOTPNativeProps extends InputOTPProps, ViewProps {}
+
+function InputOTP({
+  length = 6,
+  value: controlledValue,
+  onValueChange,
+  disabled = false,
+  className,
+  ...props
+}: InputOTPNativeProps) {
+  const inputRefs = useRef<(TextInput | null)[]>([]);
+
+  const {
+    currentValue,
+    activeIndex,
+    setActiveIndex,
+    handleCharInput,
+    handleBackspace,
+  } = useInputOTP({ length, value: controlledValue, onValueChange });
+
+  const handleChange = (index: number, text: string) => {
+    const char = text.slice(-1);
+    const nextIndex = handleCharInput(index, char);
+    if (nextIndex !== null) {
+      inputRefs.current[nextIndex]?.focus();
+    }
+  };
+
+  const handleKeyPress = (
+    index: number,
+    e: NativeSyntheticEvent<{ key: string }>,
+  ) => {
+    if (e.nativeEvent.key === "Backspace") {
+      const focusIndex = handleBackspace(index);
+      if (focusIndex !== null) {
+        inputRefs.current[focusIndex]?.focus();
+      }
+    }
+  };
+
+  return (
+    <View
+      className={cn(
+        "flex-row gap-2",
+        disabled && "opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      {Array.from({ length }, (_, i) => (
+        <View
+          key={i}
+          className={cn(
+            "w-9 h-9 rounded-md border border-input items-center justify-center shadow-sm elevation-1",
+            activeIndex === i && "border-ring",
+          )}
+        >
+          <TextInput
+            ref={(el) => {
+              inputRefs.current[i] = el;
+            }}
+            value={currentValue[i] || ""}
+            onChangeText={(text) => handleChange(i, text)}
+            onKeyPress={(e) => handleKeyPress(i, e)}
+            onFocus={() => setActiveIndex(i)}
+            onBlur={() => setActiveIndex(-1)}
+            maxLength={1}
+            keyboardType="number-pad"
+            editable={!disabled}
+            className="w-full h-full text-center text-sm leading-tight text-foreground"
+            selectTextOnFocus
+          />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+InputOTP.displayName = "InputOTP";
+
+export { InputOTP };
+export type { InputOTPNativeProps };

package/src/components/InputOTP/InputOTP.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { InputOTP } from "./InputOTP.web";
+
+const meta = {
+  title: "Components/InputOTP",
+  component: InputOTP,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    length: {
+      control: "number",
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof InputOTP>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    length: 6,
+  },
+};
+
+export const FourDigits: Story = {
+  args: {
+    length: 4,
+  },
+};
+
+export const Controlled: Story = {
+  render: (args) => {
+    const [value, setValue] = useState("");
+    return (
+      <div>
+        <InputOTP {...args} length={6} value={value} onValueChange={setValue} />
+        <p className="mt-4 text-sm text-muted-foreground">
+          Current value: {value || "(empty)"}
+        </p>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    length: 6,
+    disabled: true,
+  },
+};

package/src/components/InputOTP/InputOTP.types.ts

@@ -0,0 +1,14 @@
+export interface InputOTPProps {
+  length?: number;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface InputOTPSlotProps {
+  index: number;
+  char?: string;
+  isActive?: boolean;
+  className?: string;
+}

package/src/components/InputOTP/InputOTP.web.tsx

@@ -0,0 +1,128 @@
+import { forwardRef, useState, useRef, useCallback, createContext, useContext } from "react";
+import { cn } from "../../utils/cn";
+import type { InputOTPProps } from "./InputOTP.types";
+
+interface InputOTPContextValue {
+  value: string;
+  activeIndex: number;
+  length: number;
+}
+
+const InputOTPContext = createContext<InputOTPContextValue>({
+  value: "",
+  activeIndex: -1,
+  length: 6,
+});
+
+const InputOTP = forwardRef<
+  HTMLDivElement,
+  InputOTPProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">
+>(
+  (
+    {
+      length = 6,
+      value: controlledValue,
+      onValueChange,
+      disabled = false,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = useState("");
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+    const currentValue = controlledValue !== undefined ? controlledValue : internalValue;
+
+    const updateValue = useCallback(
+      (newValue: string) => {
+        const clamped = newValue.slice(0, length);
+        if (controlledValue === undefined) {
+          setInternalValue(clamped);
+        }
+        onValueChange?.(clamped);
+      },
+      [controlledValue, length, onValueChange],
+    );
+
+    const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Backspace") {
+        e.preventDefault();
+        const chars = currentValue.split("");
+        if (chars[index]) {
+          chars[index] = "";
+          updateValue(chars.join(""));
+        } else if (index > 0) {
+          chars[index - 1] = "";
+          updateValue(chars.join(""));
+          inputRefs.current[index - 1]?.focus();
+        }
+      } else if (e.key === "ArrowLeft" && index > 0) {
+        inputRefs.current[index - 1]?.focus();
+      } else if (e.key === "ArrowRight" && index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+    };
+
+    const handleInput = (index: number, e: React.ChangeEvent<HTMLInputElement>) => {
+      const char = e.target.value.slice(-1);
+      if (!char) return;
+
+      const chars = currentValue.split("");
+      while (chars.length < length) chars.push("");
+      chars[index] = char;
+      updateValue(chars.join(""));
+
+      if (index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+    };
+
+    const handlePaste = (e: React.ClipboardEvent) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text").slice(0, length);
+      updateValue(pasted);
+      const nextIndex = Math.min(pasted.length, length - 1);
+      inputRefs.current[nextIndex]?.focus();
+    };
+
+    return (
+      <InputOTPContext.Provider value={{ value: currentValue, activeIndex, length }}>
+        <div
+          ref={ref}
+          className={cn("flex items-center gap-2", disabled && "opacity-50", className)}
+          onPaste={handlePaste}
+          {...props}
+        >
+          {Array.from({ length }, (_, i) => (
+            <input
+              key={i}
+              ref={(el) => {
+                inputRefs.current[i] = el;
+              }}
+              type="text"
+              inputMode="numeric"
+              maxLength={1}
+              value={currentValue[i] || ""}
+              disabled={disabled}
+              onChange={(e) => handleInput(i, e)}
+              onKeyDown={(e) => handleKeyDown(i, e)}
+              onFocus={() => setActiveIndex(i)}
+              onBlur={() => setActiveIndex(-1)}
+              className={cn(
+                "flex h-9 w-9 items-center justify-center rounded-md border border-input bg-transparent text-center text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed",
+                activeIndex === i && "ring-1 ring-ring",
+              )}
+              autoComplete="one-time-code"
+            />
+          ))}
+        </div>
+      </InputOTPContext.Provider>
+    );
+  },
+);
+InputOTP.displayName = "InputOTP";
+
+export { InputOTP };

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

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

package/src/components/InputOTP/index.ts

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

package/src/components/InputOTP/useInputOTP.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useInputOTP } from "./useInputOTP";
+
+describe("useInputOTP", () => {
+  it("starts with empty value", () => {
+    const { result } = renderHook(() => useInputOTP({}));
+    expect(result.current.currentValue).toBe("");
+  });
+
+  it("handles character input", () => {
+    const { result } = renderHook(() => useInputOTP({ length: 4 }));
+
+    act(() => {
+      result.current.handleCharInput(0, "1");
+    });
+    expect(result.current.currentValue).toBe("1");
+  });
+
+  it("returns next index after input", () => {
+    const { result } = renderHook(() => useInputOTP({ length: 4 }));
+
+    let nextIndex: number | null = null;
+    act(() => {
+      nextIndex = result.current.handleCharInput(0, "1");
+    });
+    expect(nextIndex).toBe(1);
+  });
+
+  it("returns null when inputting at last index", () => {
+    const { result } = renderHook(() => useInputOTP({ length: 4 }));
+
+    let nextIndex: number | null = null;
+    act(() => {
+      nextIndex = result.current.handleCharInput(3, "4");
+    });
+    expect(nextIndex).toBeNull();
+  });
+
+  it("handles backspace - clears current character", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useInputOTP({ length: 4, onValueChange: onChange }),
+    );
+
+    act(() => result.current.handleCharInput(0, "1"));
+    act(() => result.current.handleCharInput(1, "2"));
+    act(() => result.current.handleBackspace(1));
+
+    expect(result.current.currentValue).toBe("1");
+  });
+
+  it("handles backspace - moves to previous index when current is empty", () => {
+    const { result } = renderHook(() => useInputOTP({ length: 4 }));
+
+    act(() => result.current.handleCharInput(0, "1"));
+
+    let nextIndex: number | null = null;
+    act(() => {
+      // index 1 is empty, so backspace should clear index 0 and return 0
+      nextIndex = result.current.handleBackspace(1);
+    });
+    expect(nextIndex).toBe(0);
+  });
+
+  it("clamps value to length", () => {
+    const { result } = renderHook(() => useInputOTP({ length: 4 }));
+
+    // Build up a full value
+    act(() => result.current.handleCharInput(0, "1"));
+    act(() => result.current.handleCharInput(1, "2"));
+    act(() => result.current.handleCharInput(2, "3"));
+    act(() => result.current.handleCharInput(3, "4"));
+
+    expect(result.current.currentValue).toBe("1234");
+  });
+
+  it("calls onValueChange", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useInputOTP({ length: 4, onValueChange: onChange }),
+    );
+
+    act(() => result.current.handleCharInput(0, "5"));
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("returns null for empty char input", () => {
+    const { result } = renderHook(() => useInputOTP({ length: 4 }));
+
+    let nextIndex: number | null = null;
+    act(() => {
+      nextIndex = result.current.handleCharInput(0, "");
+    });
+    expect(nextIndex).toBeNull();
+  });
+});

package/src/components/InputOTP/useInputOTP.ts

@@ -0,0 +1,69 @@
+import { useState, useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseInputOTPProps {
+  length?: number;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export function useInputOTP({
+  length = 6,
+  value: controlledValue,
+  onValueChange,
+}: UseInputOTPProps) {
+  const [currentValue, setCurrentValue] = useControllableState<string>({
+    value: controlledValue,
+    defaultValue: "",
+    onChange: onValueChange,
+  });
+
+  const [activeIndex, setActiveIndex] = useState(-1);
+
+  const updateValue = useCallback(
+    (newValue: string) => {
+      const clamped = newValue.slice(0, length);
+      setCurrentValue(clamped);
+    },
+    [length, setCurrentValue],
+  );
+
+  const handleCharInput = useCallback(
+    (index: number, char: string): number | null => {
+      if (!char) return null;
+
+      const chars = currentValue.split("");
+      while (chars.length < length) chars.push("");
+      chars[index] = char;
+      updateValue(chars.join(""));
+
+      return index < length - 1 ? index + 1 : null;
+    },
+    [currentValue, length, updateValue],
+  );
+
+  const handleBackspace = useCallback(
+    (index: number): number | null => {
+      const chars = currentValue.split("");
+      if (chars[index]) {
+        chars[index] = "";
+        updateValue(chars.join(""));
+        return null;
+      } else if (index > 0) {
+        chars[index - 1] = "";
+        updateValue(chars.join(""));
+        return index - 1;
+      }
+      return null;
+    },
+    [currentValue, updateValue],
+  );
+
+  return {
+    currentValue,
+    activeIndex,
+    setActiveIndex,
+    handleCharInput,
+    handleBackspace,
+  };
+}

package/src/components/Label/Label.native.tsx

@@ -0,0 +1,25 @@
+import { Text, type TextProps } from "react-native";
+import type { LabelProps } from "./Label.types";
+import { cn } from "../../utils/cn";
+
+interface LabelNativeProps extends LabelProps, TextProps {}
+
+function Label({ disabled = false, className, children, ...props }: LabelNativeProps) {
+  return (
+    <Text
+      className={cn(
+        "text-sm font-medium leading-none text-foreground",
+        disabled && "opacity-70",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+
+Label.displayName = "Label";
+
+export { Label };
+export type { LabelNativeProps };

package/src/components/Label/Label.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Label } from "./Label.web";
+
+const meta = {
+  title: "Components/Label",
+  component: Label,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Email address",
+  },
+};

package/src/components/Label/Label.types.ts

@@ -0,0 +1,6 @@
+export interface LabelProps {
+  htmlFor?: string;
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}