@byldpartners/ui 0.0.1

package/src/components/Pagination/Pagination.web.tsx

@@ -0,0 +1,185 @@
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+import type {
+  PaginationProps,
+  PaginationContentProps,
+  PaginationItemProps,
+  PaginationLinkProps,
+  PaginationPreviousProps,
+  PaginationNextProps,
+  PaginationEllipsisProps,
+} from "./Pagination.types";
+
+const Pagination = forwardRef<
+  HTMLElement,
+  PaginationProps & React.ComponentProps<"nav">
+>(({ className, ...props }, ref) => (
+  <nav
+    ref={ref}
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+));
+Pagination.displayName = "Pagination";
+
+const PaginationContent = forwardRef<
+  HTMLUListElement,
+  PaginationContentProps & React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = forwardRef<
+  HTMLLIElement,
+  PaginationItemProps & React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+const paginationLinkVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        default: "h-9 px-4 py-2",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      size: "icon",
+    },
+  },
+);
+
+interface PaginationLinkWebProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  isActive?: boolean;
+  size?: "default" | "icon";
+  className?: string;
+}
+
+const PaginationLink = forwardRef<HTMLAnchorElement, PaginationLinkWebProps>(
+  ({ className, isActive, size = "icon", ...props }, ref) => (
+    <a
+      ref={ref}
+      aria-current={isActive ? "page" : undefined}
+      className={cn(
+        paginationLinkVariants({ size }),
+        isActive
+          ? "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground"
+          : "hover:bg-accent hover:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = forwardRef<
+  HTMLAnchorElement,
+  PaginationLinkWebProps
+>(({ className, ...props }, ref) => (
+  <PaginationLink
+    ref={ref}
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+    <span>Previous</span>
+  </PaginationLink>
+));
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = forwardRef<HTMLAnchorElement, PaginationLinkWebProps>(
+  ({ className, ...props }, ref) => (
+    <PaginationLink
+      ref={ref}
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 pr-2.5", className)}
+      {...props}
+    >
+      <span>Next</span>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    </PaginationLink>
+  ),
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = forwardRef<
+  HTMLSpanElement,
+  PaginationEllipsisProps & React.ComponentProps<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+    <span className="sr-only">More pages</span>
+  </span>
+));
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+  paginationLinkVariants,
+};
+export type { PaginationLinkWebProps };

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

@@ -0,0 +1,19 @@
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+  paginationLinkVariants,
+} from "./Pagination.native";
+export type {
+  PaginationProps,
+  PaginationContentProps,
+  PaginationItemProps,
+  PaginationLinkProps,
+  PaginationPreviousProps,
+  PaginationNextProps,
+  PaginationEllipsisProps,
+} from "./Pagination.types";

package/src/components/Pagination/index.ts

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

package/src/components/Popover/Popover.native.tsx

@@ -0,0 +1,97 @@
+import {
+  createContext,
+  useContext,
+} from "react";
+import {
+  Modal,
+  Pressable,
+  type ViewProps,
+} from "react-native";
+import type {
+  PopoverProps,
+  PopoverTriggerProps,
+  PopoverContentProps,
+} from "./Popover.types";
+import { usePopover } from "./usePopover";
+
+interface PopoverContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const PopoverContext = createContext<PopoverContextValue>({
+  open: false,
+  onOpenChange: () => {},
+});
+
+function Popover({
+  children,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+}: PopoverProps) {
+  const { open, onOpenChange } = usePopover({
+    open: controlledOpen,
+    onOpenChange: controlledOnOpenChange,
+  });
+
+  return (
+    <PopoverContext.Provider value={{ open, onOpenChange }}>
+      {children}
+    </PopoverContext.Provider>
+  );
+}
+Popover.displayName = "Popover";
+
+interface PopoverTriggerNativeProps extends PopoverTriggerProps {
+  onPress?: () => void;
+}
+
+function PopoverTrigger({ children, onPress }: PopoverTriggerNativeProps) {
+  const { onOpenChange } = useContext(PopoverContext);
+  return (
+    <Pressable
+      onPress={() => {
+        onOpenChange(true);
+        onPress?.();
+      }}
+    >
+      {children}
+    </Pressable>
+  );
+}
+PopoverTrigger.displayName = "PopoverTrigger";
+
+interface PopoverContentNativeProps extends PopoverContentProps {
+  style?: ViewProps["style"];
+}
+
+function PopoverContent({ children, style }: PopoverContentNativeProps) {
+  const { open, onOpenChange } = useContext(PopoverContext);
+
+  if (!open) return null;
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={() => onOpenChange(false)}
+    >
+      <Pressable
+        className="flex-1 bg-black/30 justify-center items-center"
+        onPress={() => onOpenChange(false)}
+      >
+        <Pressable
+          className="bg-background rounded-lg p-4 w-[85%] max-w-[320px] shadow-md elevation-5"
+          style={style}
+          onPress={(e) => e.stopPropagation()}
+        >
+          {children}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+PopoverContent.displayName = "PopoverContent";
+
+export { Popover, PopoverTrigger, PopoverContent };

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Popover, PopoverTrigger, PopoverContent } from "./Popover.web";
+
+const meta: Meta<typeof Popover> = {
+  title: "Components/Popover",
+  component: Popover,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+export const Default: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button>Open Popover</button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <p>This is the popover content. You can place any elements here.</p>
+      </PopoverContent>
+    </Popover>
+  ),
+};

package/src/components/Popover/Popover.types.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+export interface PopoverProps {
+  children?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface PopoverTriggerProps {
+  children?: ReactNode;
+  className?: string;
+  asChild?: boolean;
+}
+
+export interface PopoverContentProps {
+  children?: ReactNode;
+  className?: string;
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+}

package/src/components/Popover/Popover.web.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../../utils/cn";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 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}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

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

@@ -0,0 +1,2 @@
+export { Popover, PopoverTrigger, PopoverContent } from "./Popover.native";
+export type { PopoverProps } from "./Popover.types";

package/src/components/Popover/index.ts

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

package/src/components/Popover/usePopover.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { usePopover } from "./usePopover";
+
+describe("usePopover", () => {
+  it("defaults to closed", () => {
+    const { result } = renderHook(() => usePopover());
+    expect(result.current.open).toBe(false);
+  });
+
+  it("uses defaultOpen", () => {
+    const { result } = renderHook(() => usePopover({ defaultOpen: true }));
+    expect(result.current.open).toBe(true);
+  });
+
+  it("opens and closes", () => {
+    const { result } = renderHook(() => usePopover());
+    act(() => result.current.onOpenChange(true));
+    expect(result.current.open).toBe(true);
+    act(() => result.current.onOpenChange(false));
+    expect(result.current.open).toBe(false);
+  });
+
+  it("calls external onOpenChange callback", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() => usePopover({ onOpenChange: onChange }));
+    act(() => result.current.onOpenChange(true));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("works in controlled mode", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      usePopover({ open: false, onOpenChange: onChange }),
+    );
+    act(() => result.current.onOpenChange(true));
+    expect(result.current.open).toBe(false);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/Popover/usePopover.ts

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UsePopoverProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+interface UsePopoverReturn {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function usePopover({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+}: UsePopoverProps = {}): UsePopoverReturn {
+  const [open, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      setOpen(nextOpen);
+    },
+    [setOpen],
+  );
+
+  return { open, onOpenChange: handleOpenChange };
+}
+
+export type { UsePopoverProps, UsePopoverReturn };

package/src/components/Progress/Progress.native.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  View,
+  Animated,
+  type ViewProps,
+  type LayoutChangeEvent,
+} from "react-native";
+import type { ProgressProps } from "./Progress.types";
+import { useProgress } from "./useProgress";
+
+interface ProgressNativeProps extends ProgressProps, ViewProps {}
+
+function Progress({
+  value = 0,
+  max = 100,
+  style,
+  ...props
+}: ProgressNativeProps) {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const [trackWidth, setTrackWidth] = useState(0);
+
+  const { clampedValue, percentage } = useProgress({ value, max });
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: percentage,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  }, [percentage, animatedValue]);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    setTrackWidth(event.nativeEvent.layout.width);
+  };
+
+  return (
+    <View
+      className="h-2 w-full overflow-hidden rounded-full bg-primary/20"
+      style={style}
+      onLayout={handleLayout}
+      accessibilityRole="progressbar"
+      accessibilityValue={{
+        min: 0,
+        max,
+        now: clampedValue,
+      }}
+      {...props}
+    >
+      <Animated.View
+        className="h-full bg-primary rounded-full"
+        style={{
+          width: animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, trackWidth],
+          }),
+        }}
+      />
+    </View>
+  );
+}
+
+Progress.displayName = "Progress";
+
+export { Progress };
+export type { ProgressNativeProps };

package/src/components/Progress/Progress.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Progress } from "./Progress.web";
+
+const meta: Meta<typeof Progress> = {
+  title: "Components/Progress",
+  component: Progress,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof Progress>;
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ width: 300 }}>
+      <Progress value={60} />
+    </div>
+  ),
+};
+
+export const Empty: Story = {
+  render: () => (
+    <div style={{ width: 300 }}>
+      <Progress value={0} />
+    </div>
+  ),
+};
+
+export const Full: Story = {
+  render: () => (
+    <div style={{ width: 300 }}>
+      <Progress value={100} />
+    </div>
+  ),
+};

package/src/components/Progress/Progress.types.ts

@@ -0,0 +1,6 @@
+export interface ProgressProps {
+  value?: number;
+  max?: number;
+  children?: React.ReactNode;
+  className?: string;
+}

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

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Progress } from "./Progress.web";
+
+describe("Progress rendering", () => {
+  it("renders with progressbar role", () => {
+    render(<Progress value={50} />);
+    expect(screen.getByRole("progressbar")).toBeDefined();
+  });
+
+  it("applies transform on indicator based on value", () => {
+    render(<Progress value={75} />);
+    const indicator = screen.getByRole("progressbar").firstChild as HTMLElement;
+    expect(indicator.style.transform).toBe("translateX(-25%)");
+  });
+
+  it("shows 0% when value is 0", () => {
+    render(<Progress value={0} />);
+    const indicator = screen.getByRole("progressbar").firstChild as HTMLElement;
+    expect(indicator.style.transform).toBe("translateX(-100%)");
+  });
+
+  it("merges custom className", () => {
+    render(<Progress className="my-progress" value={0} />);
+    expect(screen.getByRole("progressbar").className).toContain("my-progress");
+  });
+});

package/src/components/Progress/Progress.web.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../../utils/cn";
+import { useProgress } from "./useProgress";
+
+const Progress = forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => {
+  const { percentage } = useProgress({ value: value ?? 0 });
+
+  return (
+    <ProgressPrimitive.Root
+      ref={ref}
+      className={cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        className="h-full w-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - percentage * 100}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+});
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

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

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

package/src/components/Progress/index.ts

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

package/src/components/Progress/useProgress.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { useProgress } from "./useProgress";
+
+describe("useProgress", () => {
+  it("defaults to 0% when no args", () => {
+    const result = useProgress();
+    expect(result.clampedValue).toBe(0);
+    expect(result.percentage).toBe(0);
+    expect(result.max).toBe(100);
+  });
+
+  it("computes percentage correctly", () => {
+    const result = useProgress({ value: 50, max: 100 });
+    expect(result.percentage).toBe(0.5);
+  });
+
+  it("clamps value to min 0", () => {
+    const result = useProgress({ value: -10, max: 100 });
+    expect(result.clampedValue).toBe(0);
+    expect(result.percentage).toBe(0);
+  });
+
+  it("clamps value to max", () => {
+    const result = useProgress({ value: 150, max: 100 });
+    expect(result.clampedValue).toBe(100);
+    expect(result.percentage).toBe(1);
+  });
+
+  it("handles custom max", () => {
+    const result = useProgress({ value: 25, max: 50 });
+    expect(result.clampedValue).toBe(25);
+    expect(result.percentage).toBe(0.5);
+  });
+
+  it("handles max=0 without division by zero", () => {
+    const result = useProgress({ value: 10, max: 0 });
+    expect(result.percentage).toBe(0);
+  });
+
+  it("returns 100% when value equals max", () => {
+    const result = useProgress({ value: 100, max: 100 });
+    expect(result.percentage).toBe(1);
+  });
+});