@byldpartners/ui 0.0.1

package/src/components/Slider/Slider.native.tsx

@@ -0,0 +1,98 @@
+import { useRef, useCallback } from "react";
+import {
+  View,
+  PanResponder,
+  type ViewProps,
+  type LayoutChangeEvent,
+  type GestureResponderEvent,
+} from "react-native";
+import { cn } from "../../utils/cn";
+import type { SliderProps } from "./Slider.types";
+import { useSlider } from "./useSlider";
+
+type SliderNativeProps = SliderProps & Omit<ViewProps, "className">;
+
+function Slider({
+  value: controlledValue,
+  defaultValue = [0],
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  className,
+  ...props
+}: SliderNativeProps) {
+  const { setValue, fraction, getValueFromRatio } = useSlider({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    min,
+    max,
+    step,
+  });
+
+  const trackLayout = useRef({ x: 0, width: 0 });
+
+  const updateFromPageX = useCallback((pageX: number) => {
+    const { x, width } = trackLayout.current;
+    if (width === 0) return;
+
+    const ratio = (pageX - x) / width;
+    const newVal = getValueFromRatio(ratio);
+    setValue([newVal]);
+  }, [getValueFromRatio, setValue]);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: (evt: GestureResponderEvent) => {
+        updateFromPageX(evt.nativeEvent.pageX);
+      },
+      onPanResponderMove: (evt: GestureResponderEvent) => {
+        updateFromPageX(evt.nativeEvent.pageX);
+      },
+    }),
+  ).current;
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    const { width } = e.nativeEvent.layout;
+    trackLayout.current.width = width;
+    // Measure absolute position on screen
+    (e.target as any)?.measure?.(
+      (_x: number, _y: number, _w: number, _h: number, pageX: number) => {
+        trackLayout.current.x = pageX;
+      }
+    );
+  };
+
+  return (
+    <View
+      className={cn(
+        "w-full h-8 justify-center",
+        disabled && "opacity-50",
+        className,
+      )}
+      onLayout={handleLayout}
+      {...panResponder.panHandlers}
+      {...props}
+    >
+      <View className="h-1.5 w-full rounded-full bg-primary/20">
+        <View
+          className="h-full rounded-full bg-primary"
+          style={{ width: `${fraction * 100}%` }}
+        />
+      </View>
+      <View
+        className="w-4 h-4 rounded-full bg-background border-2 border-primary absolute shadow elevation-1"
+        style={{ left: `${fraction * 100}%`, marginLeft: -8 }}
+      />
+    </View>
+  );
+}
+
+Slider.displayName = "Slider";
+
+export { Slider };
+export type { SliderNativeProps };

package/src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Slider } from "./Slider.web";
+
+const meta: Meta<typeof Slider> = {
+  title: "Components/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: [50],
+    max: 100,
+    step: 1,
+    style: { width: 300 },
+  },
+};

package/src/components/Slider/Slider.types.ts

@@ -0,0 +1,10 @@
+export interface SliderProps {
+  value?: number[];
+  defaultValue?: number[];
+  onValueChange?: (value: number[]) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  className?: string;
+}

package/src/components/Slider/Slider.web.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../../utils/cn";
+
+const Slider = forwardRef<
+  React.ComponentRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

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

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

package/src/components/Slider/index.ts

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

package/src/components/Slider/useSlider.test.ts

@@ -0,0 +1,68 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useSlider } from "./useSlider";
+
+describe("useSlider", () => {
+  it("defaults to [0]", () => {
+    const { result } = renderHook(() => useSlider());
+    expect(result.current.value).toEqual([0]);
+  });
+
+  it("uses defaultValue", () => {
+    const { result } = renderHook(() => useSlider({ defaultValue: [50] }));
+    expect(result.current.value).toEqual([50]);
+  });
+
+  it("computes fraction correctly", () => {
+    const { result } = renderHook(() => useSlider({ defaultValue: [50] }));
+    expect(result.current.fraction).toBe(0.5);
+  });
+
+  it("computes fraction with custom min/max", () => {
+    const { result } = renderHook(() =>
+      useSlider({ defaultValue: [25], min: 0, max: 50 }),
+    );
+    expect(result.current.fraction).toBe(0.5);
+  });
+
+  it("clamps and steps values", () => {
+    const { result } = renderHook(() =>
+      useSlider({ min: 0, max: 100, step: 10 }),
+    );
+    expect(result.current.clampAndStep(15)).toBe(20);
+    expect(result.current.clampAndStep(105)).toBe(100);
+    expect(result.current.clampAndStep(-5)).toBe(0);
+  });
+
+  it("getValueFromRatio computes correctly", () => {
+    const { result } = renderHook(() =>
+      useSlider({ min: 0, max: 100, step: 1 }),
+    );
+    expect(result.current.getValueFromRatio(0)).toBe(0);
+    expect(result.current.getValueFromRatio(0.5)).toBe(50);
+    expect(result.current.getValueFromRatio(1)).toBe(100);
+  });
+
+  it("getValueFromRatio clamps out-of-range ratios", () => {
+    const { result } = renderHook(() =>
+      useSlider({ min: 0, max: 100, step: 1 }),
+    );
+    expect(result.current.getValueFromRatio(-0.5)).toBe(0);
+    expect(result.current.getValueFromRatio(1.5)).toBe(100);
+  });
+
+  it("updates value via setValue", () => {
+    const { result } = renderHook(() => useSlider());
+    act(() => result.current.setValue([75]));
+    expect(result.current.value).toEqual([75]);
+  });
+
+  it("calls onValueChange", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useSlider({ onValueChange: onChange }),
+    );
+    act(() => result.current.setValue([42]));
+    expect(onChange).toHaveBeenCalledWith([42]);
+  });
+});

package/src/components/Slider/useSlider.ts

@@ -0,0 +1,55 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseSliderProps {
+  value?: number[];
+  defaultValue?: number[];
+  onValueChange?: (value: number[]) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export function useSlider({
+  value: controlledValue,
+  defaultValue = [0],
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+}: UseSliderProps = {}) {
+  const [value, setValue] = useControllableState<number[]>({
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange,
+  });
+
+  const clampAndStep = useCallback(
+    (val: number) => {
+      const stepped = Math.round((val - min) / step) * step + min;
+      return Math.min(max, Math.max(min, stepped));
+    },
+    [min, max, step],
+  );
+
+  const getValueFromRatio = useCallback(
+    (ratio: number) => {
+      const clamped = Math.max(0, Math.min(1, ratio));
+      return clampAndStep(min + clamped * (max - min));
+    },
+    [min, max, clampAndStep],
+  );
+
+  const fraction = (value[0] - min) / (max - min);
+
+  return {
+    value,
+    setValue,
+    fraction,
+    clampAndStep,
+    getValueFromRatio,
+    min,
+    max,
+    step,
+  };
+}

package/src/components/Switch/Switch.native.tsx

@@ -0,0 +1,36 @@
+import { Switch as RNSwitch, type SwitchProps as RNSwitchProps } from "react-native";
+import { useCSSVariable } from "uniwind";
+import type { SwitchProps } from "./Switch.types";
+
+type SwitchNativeProps = SwitchProps & Omit<RNSwitchProps, "value" | "onValueChange" | "className">;
+
+function Switch({
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled = false,
+  className: _className,
+  ...props
+}: SwitchNativeProps) {
+  const [input, primary, background] = useCSSVariable([
+    "--color-input",
+    "--color-primary",
+    "--color-background",
+  ]) as [string, string, string];
+
+  return (
+    <RNSwitch
+      value={checked}
+      onValueChange={onCheckedChange}
+      disabled={disabled}
+      trackColor={{ false: input, true: primary }}
+      thumbColor={background}
+      {...props}
+    />
+  );
+}
+
+Switch.displayName = "Switch";
+
+export { Switch };
+export type { SwitchNativeProps };

package/src/components/Switch/Switch.stories.tsx

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

package/src/components/Switch/Switch.types.ts

@@ -0,0 +1,7 @@
+export interface SwitchProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}

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

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Switch } from "./Switch.web";
+
+describe("Switch", () => {
+  it("renders with switch role", () => {
+    render(<Switch />);
+    expect(screen.getByRole("switch")).toBeDefined();
+  });
+
+  it("defaults to unchecked", () => {
+    render(<Switch />);
+    expect(screen.getByRole("switch").getAttribute("data-state")).toBe("unchecked");
+  });
+
+  it("can be checked by default", () => {
+    render(<Switch defaultChecked />);
+    expect(screen.getByRole("switch").getAttribute("data-state")).toBe("checked");
+  });
+
+  it("toggles on click", () => {
+    render(<Switch />);
+    const sw = screen.getByRole("switch");
+    fireEvent.click(sw);
+    expect(sw.getAttribute("data-state")).toBe("checked");
+  });
+
+  it("calls onCheckedChange", () => {
+    const onChange = vi.fn();
+    render(<Switch onCheckedChange={onChange} />);
+    fireEvent.click(screen.getByRole("switch"));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("respects disabled", () => {
+    render(<Switch disabled />);
+    expect(screen.getByRole("switch")).toHaveProperty("disabled", true);
+  });
+
+  it("merges custom className", () => {
+    render(<Switch className="my-switch" />);
+    expect(screen.getByRole("switch").className).toContain("my-switch");
+  });
+});

package/src/components/Switch/Switch.web.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "../../utils/cn";
+
+const Switch = forwardRef<
+  React.ComponentRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitive.Root>
+));
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };

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

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

package/src/components/Switch/index.ts

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

package/src/components/Table/Table.native.tsx

@@ -0,0 +1,165 @@
+import { View, Text, type ViewProps } from "react-native";
+import { cn } from "../../utils/cn";
+import type {
+  TableProps,
+  TableHeaderProps,
+  TableBodyProps,
+  TableFooterProps,
+  TableRowProps,
+  TableHeadProps,
+  TableCellProps,
+  TableCaptionProps,
+} from "./Table.types";
+
+type TableNativeProps = TableProps & Omit<ViewProps, "className">;
+
+function Table({ children, className, ...props }: TableNativeProps) {
+  return (
+    <View
+      className={cn("w-full rounded-lg overflow-hidden", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+Table.displayName = "Table";
+
+type TableHeaderNativeProps = TableHeaderProps & Omit<ViewProps, "className">;
+
+function TableHeader({ children, className, ...props }: TableHeaderNativeProps) {
+  return (
+    <View
+      className={cn("border-b border-border", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+TableHeader.displayName = "TableHeader";
+
+type TableBodyNativeProps = TableBodyProps & Omit<ViewProps, "className">;
+
+function TableBody({ children, className, ...props }: TableBodyNativeProps) {
+  return (
+    <View className={className} {...props}>
+      {children}
+    </View>
+  );
+}
+TableBody.displayName = "TableBody";
+
+type TableFooterNativeProps = TableFooterProps & Omit<ViewProps, "className">;
+
+function TableFooter({ children, className, ...props }: TableFooterNativeProps) {
+  return (
+    <View
+      className={cn("border-t border-border bg-secondary/50", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+TableFooter.displayName = "TableFooter";
+
+type TableRowNativeProps = TableRowProps & Omit<ViewProps, "className">;
+
+function TableRow({
+  children,
+  selected,
+  className,
+  ...props
+}: TableRowNativeProps) {
+  return (
+    <View
+      className={cn(
+        "flex-row border-b border-border items-center",
+        selected && "bg-secondary",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+TableRow.displayName = "TableRow";
+
+type TableHeadNativeProps = TableHeadProps & Omit<ViewProps, "className">;
+
+function TableHead({ children, className, ...props }: TableHeadNativeProps) {
+  return (
+    <View
+      className={cn("flex-1 h-10 px-2 justify-center", className)}
+      {...props}
+    >
+      {typeof children === "string" ? (
+        <Text className="font-medium text-xs text-muted-foreground">
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+TableHead.displayName = "TableHead";
+
+type TableCellNativeProps = TableCellProps & Omit<ViewProps, "className">;
+
+function TableCell({ children, className, ...props }: TableCellNativeProps) {
+  return (
+    <View
+      className={cn("flex-1 px-2 py-2 justify-center", className)}
+      {...props}
+    >
+      {typeof children === "string" ? (
+        <Text className="text-sm text-foreground">{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+TableCell.displayName = "TableCell";
+
+type TableCaptionNativeProps = TableCaptionProps & Omit<ViewProps, "className">;
+
+function TableCaption({ children, className, ...props }: TableCaptionNativeProps) {
+  return (
+    <View
+      className={cn("mt-4 items-center", className)}
+      {...props}
+    >
+      {typeof children === "string" ? (
+        <Text className="text-sm text-muted-foreground">{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+};
+export type {
+  TableNativeProps,
+  TableHeaderNativeProps,
+  TableBodyNativeProps,
+  TableFooterNativeProps,
+  TableRowNativeProps,
+  TableHeadNativeProps,
+  TableCellNativeProps,
+  TableCaptionNativeProps,
+};

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from "./Table.web";
+
+const meta: Meta<typeof Table> = {
+  title: "Components/Table",
+  component: Table,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableCaption>A list of team members.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>Alice Johnson</TableCell>
+          <TableCell>alice@example.com</TableCell>
+          <TableCell>Engineer</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Bob Smith</TableCell>
+          <TableCell>bob@example.com</TableCell>
+          <TableCell>Designer</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Carol Lee</TableCell>
+          <TableCell>carol@example.com</TableCell>
+          <TableCell>Manager</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+};