@byldpartners/ui 0.0.1

package/src/components/Progress/useProgress.ts

@@ -0,0 +1,11 @@
+interface UseProgressProps {
+  value?: number;
+  max?: number;
+}
+
+export function useProgress({ value = 0, max = 100 }: UseProgressProps = {}) {
+  const clampedValue = Math.min(Math.max(value, 0), max);
+  const percentage = max > 0 ? clampedValue / max : 0;
+
+  return { clampedValue, percentage, max };
+}

package/src/components/RadioGroup/RadioGroup.native.tsx

@@ -0,0 +1,96 @@
+import { createContext, useContext } from "react";
+import {
+  View,
+  Pressable,
+  type ViewProps,
+  type PressableProps,
+} from "react-native";
+import type { RadioGroupProps, RadioGroupItemProps } from "./RadioGroup.types";
+import { useRadioGroup } from "./useRadioGroup";
+import { cn } from "../../utils/cn";
+
+interface RadioGroupContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  disabled: boolean;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue>({
+  value: "",
+  onValueChange: () => {},
+  disabled: false,
+});
+
+interface RadioGroupNativeProps extends RadioGroupProps, ViewProps {}
+
+function RadioGroup({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  disabled: disabledProp,
+  children,
+  style,
+  ...props
+}: RadioGroupNativeProps) {
+  const { value, disabled, selectValue } = useRadioGroup({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    disabled: disabledProp,
+  });
+
+  return (
+    <RadioGroupContext.Provider
+      value={{ value, onValueChange: selectValue, disabled }}
+    >
+      <View className="gap-2" style={style} {...props}>
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  );
+}
+
+interface RadioGroupItemNativeProps extends Omit<RadioGroupItemProps, "disabled">, Omit<PressableProps, "children"> {}
+
+function RadioGroupItem({
+  value,
+  disabled: itemDisabled = false,
+  style,
+  children,
+  ...props
+}: RadioGroupItemNativeProps) {
+  const ctx = useContext(RadioGroupContext);
+  const isSelected = ctx.value === value;
+  const isDisabled = ctx.disabled || itemDisabled;
+
+  const handlePress = () => {
+    if (!isDisabled) {
+      ctx.onValueChange(value);
+    }
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={isDisabled}
+      className={cn(
+        "w-4 h-4 rounded-full border border-primary items-center justify-center shadow-sm elevation-1",
+        isDisabled && "opacity-50"
+      )}
+      style={style}
+      accessibilityRole="radio"
+      accessibilityState={{ selected: isSelected, disabled: isDisabled || false }}
+      {...props}
+    >
+      {isSelected && (
+        <View className="w-2 h-2 rounded-full bg-primary" />
+      )}
+    </Pressable>
+  );
+}
+
+RadioGroup.displayName = "RadioGroup";
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export { RadioGroup, RadioGroupItem };
+export type { RadioGroupNativeProps, RadioGroupItemNativeProps };

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RadioGroup, RadioGroupItem } from "./RadioGroup.web";
+
+const meta: Meta<typeof RadioGroup> = {
+  title: "Components/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-one">
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <RadioGroupItem value="option-one" id="option-one" />
+        <label htmlFor="option-one">Option One</label>
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <RadioGroupItem value="option-two" id="option-two" />
+        <label htmlFor="option-two">Option Two</label>
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <RadioGroupItem value="option-three" id="option-three" />
+        <label htmlFor="option-three">Option Three</label>
+      </div>
+    </RadioGroup>
+  ),
+};

package/src/components/RadioGroup/RadioGroup.types.ts

@@ -0,0 +1,16 @@
+export interface RadioGroupProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface RadioGroupItemProps {
+  value: string;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  id?: string;
+}

package/src/components/RadioGroup/RadioGroup.web.tsx

@@ -0,0 +1,47 @@
+import { forwardRef } from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "../../utils/cn";
+
+const RadioGroup = forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="h-3.5 w-3.5"
+        >
+          <circle cx="12" cy="12" r="6" />
+        </svg>
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

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

@@ -0,0 +1,2 @@
+export { RadioGroup, RadioGroupItem } from "./RadioGroup.native";
+export type { RadioGroupProps, RadioGroupItemProps } from "./RadioGroup.types";

package/src/components/RadioGroup/index.ts

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

package/src/components/RadioGroup/useRadioGroup.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useRadioGroup } from "./useRadioGroup";
+
+describe("useRadioGroup", () => {
+  it("defaults to empty string", () => {
+    const { result } = renderHook(() => useRadioGroup({}));
+    expect(result.current.value).toBe("");
+  });
+
+  it("uses defaultValue", () => {
+    const { result } = renderHook(() =>
+      useRadioGroup({ defaultValue: "opt-1" }),
+    );
+    expect(result.current.value).toBe("opt-1");
+  });
+
+  it("selects a value", () => {
+    const { result } = renderHook(() => useRadioGroup({}));
+    act(() => result.current.selectValue("opt-2"));
+    expect(result.current.value).toBe("opt-2");
+  });
+
+  it("calls onValueChange", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useRadioGroup({ onValueChange: onChange }),
+    );
+    act(() => result.current.selectValue("opt-1"));
+    expect(onChange).toHaveBeenCalledWith("opt-1");
+  });
+
+  it("does not select when disabled", () => {
+    const { result } = renderHook(() =>
+      useRadioGroup({ disabled: true }),
+    );
+    act(() => result.current.selectValue("opt-1"));
+    expect(result.current.value).toBe("");
+  });
+
+  it("works in controlled mode", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useRadioGroup({ value: "opt-1", onValueChange: onChange }),
+    );
+    act(() => result.current.selectValue("opt-2"));
+    expect(result.current.value).toBe("opt-1");
+    expect(onChange).toHaveBeenCalledWith("opt-2");
+  });
+});

package/src/components/RadioGroup/useRadioGroup.ts

@@ -0,0 +1,40 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseRadioGroupProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+}
+
+interface UseRadioGroupReturn {
+  value: string;
+  disabled: boolean;
+  selectValue: (value: string) => void;
+}
+
+export function useRadioGroup({
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  disabled = false,
+}: UseRadioGroupProps): UseRadioGroupReturn {
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange,
+  });
+
+  const selectValue = useCallback(
+    (val: string) => {
+      if (disabled) return;
+      setValue(val);
+    },
+    [disabled, setValue],
+  );
+
+  return { value, disabled, selectValue };
+}
+
+export type { UseRadioGroupProps, UseRadioGroupReturn };

package/src/components/ResizablePanel/ResizablePanel.native.tsx

@@ -0,0 +1,75 @@
+import { View, Text, type ViewProps } from "react-native";
+import type { ResizablePanelGroupProps, ResizablePanelProps, ResizableHandleProps } from "./ResizablePanel.types";
+import { cn } from "../../utils/cn";
+
+interface ResizablePanelGroupNativeProps extends ResizablePanelGroupProps, ViewProps {}
+
+/**
+ * ResizablePanelGroup on native is a placeholder.
+ * Resize interactions are not meaningful on mobile.
+ */
+function ResizablePanelGroup({
+  direction = "horizontal",
+  children,
+  style,
+  ...props
+}: ResizablePanelGroupNativeProps) {
+  return (
+    <View
+      className={cn(
+        "flex-1",
+        direction === "horizontal" ? "flex-row" : "flex-col"
+      )}
+      style={style}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+
+interface ResizablePanelNativeProps extends ResizablePanelProps, ViewProps {}
+
+function ResizablePanel({
+  defaultSize,
+  children,
+  style,
+  ...props
+}: ResizablePanelNativeProps) {
+  return (
+    <View
+      className="overflow-hidden"
+      style={[{ flex: defaultSize ?? 1 }, style]}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+ResizablePanel.displayName = "ResizablePanel";
+
+interface ResizableHandleNativeProps extends ResizableHandleProps, ViewProps {}
+
+function ResizableHandle({
+  style,
+  ...props
+}: ResizableHandleNativeProps) {
+  return (
+    <View
+      className="w-px bg-border items-center justify-center"
+      style={style}
+      {...props}
+    >
+      <Text className="text-muted-foreground text-[10px]">{"\u22EE"}</Text>
+    </View>
+  );
+}
+ResizableHandle.displayName = "ResizableHandle";
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+export type {
+  ResizablePanelGroupNativeProps,
+  ResizablePanelNativeProps,
+  ResizableHandleNativeProps,
+};

package/src/components/ResizablePanel/ResizablePanel.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "./ResizablePanel.web";
+
+const meta = {
+  title: "Components/ResizablePanel",
+  component: ResizablePanelGroup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ResizablePanelGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ width: 500, height: 200 }} className="rounded-lg border">
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Panel One</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Panel Two</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div style={{ width: 500, height: 300 }} className="rounded-lg border">
+      <ResizablePanelGroup direction="vertical">
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Top Panel</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Bottom Panel</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+};
+
+export const ThreePanels: Story = {
+  render: () => (
+    <div style={{ width: 500, height: 200 }} className="rounded-lg border">
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel defaultSize={25}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Left</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Center</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={25}>
+          <div className="flex h-full items-center justify-center p-6">
+            <span className="font-semibold">Right</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+};

package/src/components/ResizablePanel/ResizablePanel.types.ts

@@ -0,0 +1,20 @@
+export type ResizableDirection = "horizontal" | "vertical";
+
+export interface ResizablePanelGroupProps {
+  direction?: ResizableDirection;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface ResizablePanelProps {
+  defaultSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface ResizableHandleProps {
+  withHandle?: boolean;
+  className?: string;
+}

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

@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeAll } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "./ResizablePanel.web";
+
+// react-resizable-panels requires ResizeObserver
+beforeAll(() => {
+  global.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+});
+
+describe("ResizablePanelGroup", () => {
+  it("renders children panels", () => {
+    render(
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel defaultSize={50}>Left</ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>Right</ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+    expect(screen.getByText("Left")).toBeDefined();
+    expect(screen.getByText("Right")).toBeDefined();
+  });
+
+  it("merges custom className on group", () => {
+    const { container } = render(
+      <ResizablePanelGroup direction="horizontal" className="my-group">
+        <ResizablePanel defaultSize={100}>content</ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+    const group = container.firstChild as HTMLElement;
+    expect(group.className).toContain("my-group");
+  });
+
+  it("renders handle with visual grip when withHandle", () => {
+    render(
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel defaultSize={50}>Left</ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel defaultSize={50}>Right</ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+    const handle = screen.getByRole("separator");
+    expect(handle.querySelector("svg")).not.toBeNull();
+  });
+});

package/src/components/ResizablePanel/ResizablePanel.web.tsx

@@ -0,0 +1,77 @@
+import {
+  Group,
+  Panel,
+  Separator,
+} from "react-resizable-panels";
+import { cn } from "../../utils/cn";
+import type {
+  ResizablePanelGroupProps,
+  ResizablePanelProps,
+  ResizableHandleProps,
+} from "./ResizablePanel.types";
+
+function ResizablePanelGroup({
+  className,
+  direction = "horizontal",
+  children,
+}: ResizablePanelGroupProps) {
+  return (
+    <Group
+      orientation={direction}
+      className={cn(
+        "flex h-full w-full data-[orientation=vertical]:flex-col",
+        className,
+      )}
+    >
+      {children}
+    </Group>
+  );
+}
+
+function ResizablePanel({
+  className,
+  ...props
+}: ResizablePanelProps & React.ComponentProps<typeof Panel>) {
+  return <Panel className={cn("relative overflow-auto", className)} {...props} />;
+}
+
+function ResizableHandle({
+  className,
+  withHandle,
+  ...props
+}: ResizableHandleProps & React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="10"
+            height="10"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="12" cy="5" r="1" />
+            <circle cx="12" cy="12" r="1" />
+            <circle cx="12" cy="19" r="1" />
+            <circle cx="19" cy="5" r="1" />
+            <circle cx="19" cy="12" r="1" />
+            <circle cx="19" cy="19" r="1" />
+          </svg>
+        </div>
+      )}
+    </Separator>
+  );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

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

@@ -0,0 +1,2 @@
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "./ResizablePanel.native";
+export type { ResizablePanelGroupProps, ResizablePanelProps, ResizableHandleProps, ResizableDirection } from "./ResizablePanel.types";

package/src/components/ResizablePanel/index.ts

@@ -0,0 +1,2 @@
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "./ResizablePanel.web";
+export type { ResizablePanelGroupProps, ResizablePanelProps, ResizableHandleProps, ResizableDirection } from "./ResizablePanel.types";

package/src/components/ScrollArea/ScrollArea.native.tsx

@@ -0,0 +1,43 @@
+import { ScrollView, type ScrollViewProps } from "react-native";
+import type { ScrollAreaProps, ScrollBarProps } from "./ScrollArea.types";
+
+interface ScrollAreaNativeProps extends ScrollAreaProps, ScrollViewProps {
+  orientation?: "vertical" | "horizontal";
+}
+
+function ScrollArea({
+  children,
+  orientation = "vertical",
+  style,
+  ...props
+}: ScrollAreaNativeProps) {
+  return (
+    <ScrollView
+      horizontal={orientation === "horizontal"}
+      showsVerticalScrollIndicator={orientation === "vertical"}
+      showsHorizontalScrollIndicator={orientation === "horizontal"}
+      className="flex-1"
+      style={style}
+      {...props}
+    >
+      {children}
+    </ScrollView>
+  );
+}
+
+ScrollArea.displayName = "ScrollArea";
+
+interface ScrollBarNativeProps extends ScrollBarProps {}
+
+/**
+ * ScrollBar is a no-op on native as React Native's ScrollView
+ * handles its own scroll indicators natively.
+ */
+function ScrollBar(_props: ScrollBarNativeProps) {
+  return null;
+}
+
+ScrollBar.displayName = "ScrollBar";
+
+export { ScrollArea, ScrollBar };
+export type { ScrollAreaNativeProps, ScrollBarNativeProps };