@byldpartners/ui 0.0.1

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

@@ -0,0 +1,29 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Card } from "./Card.web";
+
+describe("Card", () => {
+  it("renders children", () => {
+    render(<Card>Card content</Card>);
+    expect(screen.getByText("Card content")).toBeDefined();
+  });
+
+  it("applies base classes", () => {
+    render(<Card>content</Card>);
+    const el = screen.getByText("content");
+    expect(el.className).toContain("rounded-xl");
+    expect(el.className).toContain("border");
+    expect(el.className).toContain("bg-card");
+  });
+
+  it("merges custom className", () => {
+    render(<Card className="my-card">content</Card>);
+    expect(screen.getByText("content").className).toContain("my-card");
+  });
+
+  it("forwards ref", () => {
+    let ref: HTMLDivElement | null = null;
+    render(<Card ref={(el) => { ref = el; }}>content</Card>);
+    expect(ref).toBeInstanceOf(HTMLDivElement);
+  });
+});

package/src/components/Card/Card.web.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+import type { CardProps } from "./Card.types";
+
+const Card = forwardRef<HTMLDivElement, CardProps & React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "rounded-xl border border-border bg-card text-card-foreground shadow-sm",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+Card.displayName = "Card";
+
+export { Card };

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

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

package/src/components/Card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from "./Card.web";
+export type { CardProps } from "./Card.types";

package/src/components/Carousel/Carousel.native.tsx

@@ -0,0 +1,193 @@
+import {
+  useRef,
+  createContext,
+  useContext,
+  useCallback,
+  Children,
+} from "react";
+import {
+  View,
+  ScrollView,
+  Pressable,
+  Text,
+  type LayoutChangeEvent,
+  type ViewProps,
+} from "react-native";
+import type { CarouselOrientation, CarouselProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps } from "./Carousel.types";
+import { cn } from "../../utils/cn";
+import { useCarouselState } from "./useCarousel";
+
+interface CarouselContextValue {
+  orientation: CarouselOrientation;
+  currentIndex: number;
+  totalItems: number;
+  scrollPrevious: () => void;
+  scrollNext: () => void;
+  canScrollPrevious: boolean;
+  canScrollNext: boolean;
+  scrollViewRef: React.RefObject<ScrollView | null>;
+  itemWidth: number;
+  setTotalItems: (count: number) => void;
+}
+
+const CarouselContext = createContext<CarouselContextValue | null>(null);
+
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+
+interface CarouselNativeProps extends CarouselProps, ViewProps {}
+
+function Carousel({
+  orientation = "horizontal",
+  children,
+  onLayout,
+  ...props
+}: CarouselNativeProps) {
+  const carouselState = useCarouselState({ orientation });
+  const { setItemWidth, scrollPrevious: corePrev, scrollNext: coreNext } = carouselState;
+  const scrollViewRef = useRef<ScrollView | null>(null);
+
+  const handleLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      setItemWidth(e.nativeEvent.layout.width);
+      onLayout?.(e);
+    },
+    [onLayout, setItemWidth],
+  );
+
+  const scrollPrevious = useCallback(() => {
+    const pos = corePrev();
+    scrollViewRef.current?.scrollTo({ x: pos.x, y: pos.y, animated: true });
+  }, [corePrev]);
+
+  const scrollNext = useCallback(() => {
+    const pos = coreNext();
+    scrollViewRef.current?.scrollTo({ x: pos.x, y: pos.y, animated: true });
+  }, [coreNext]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        orientation: carouselState.orientation,
+        currentIndex: carouselState.currentIndex,
+        totalItems: carouselState.totalItems,
+        scrollPrevious,
+        scrollNext,
+        canScrollPrevious: carouselState.canScrollPrevious,
+        canScrollNext: carouselState.canScrollNext,
+        scrollViewRef,
+        itemWidth: carouselState.itemWidth,
+        setTotalItems: carouselState.setTotalItems,
+      }}
+    >
+      <View onLayout={handleLayout} {...props}>{children}</View>
+    </CarouselContext.Provider>
+  );
+}
+Carousel.displayName = "Carousel";
+
+interface CarouselContentNativeProps extends CarouselContentProps, ViewProps {}
+
+function CarouselContent({ children, ...props }: CarouselContentNativeProps) {
+  const { orientation, scrollViewRef, itemWidth, setTotalItems } =
+    useCarousel();
+  const items = Children.toArray(children);
+  const countRef = useRef(0);
+
+  if (items.length !== countRef.current) {
+    countRef.current = items.length;
+    setTimeout(() => setTotalItems(items.length), 0);
+  }
+
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <ScrollView
+      ref={scrollViewRef}
+      horizontal={isHorizontal}
+      pagingEnabled
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      decelerationRate="fast"
+      snapToInterval={itemWidth}
+      snapToAlignment="start"
+      {...props}
+    >
+      {children}
+    </ScrollView>
+  );
+}
+CarouselContent.displayName = "CarouselContent";
+
+interface CarouselItemNativeProps extends CarouselItemProps, ViewProps {}
+
+function CarouselItem({ children, style, ...props }: CarouselItemNativeProps) {
+  const { itemWidth } = useCarousel();
+
+  return (
+    <View style={{ width: itemWidth }} {...props}>
+      {children}
+    </View>
+  );
+}
+CarouselItem.displayName = "CarouselItem";
+
+interface CarouselButtonNativeProps extends CarouselPreviousProps, ViewProps {}
+
+function CarouselPrevious({
+  children,
+  ...props
+}: CarouselButtonNativeProps) {
+  const { scrollPrevious, canScrollPrevious } = useCarousel();
+
+  return (
+    <Pressable
+      onPress={scrollPrevious}
+      disabled={!canScrollPrevious}
+      className={cn(
+        "items-center justify-center h-8 w-8 rounded-md border border-border bg-background shadow-sm elevation-1",
+        !canScrollPrevious && "opacity-50",
+      )}
+      {...props}
+    >
+      {children ?? <Text className="text-base text-foreground">{"\u2039"}</Text>}
+    </Pressable>
+  );
+}
+CarouselPrevious.displayName = "CarouselPrevious";
+
+function CarouselNext({
+  children,
+  ...props
+}: CarouselButtonNativeProps) {
+  const { scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Pressable
+      onPress={scrollNext}
+      disabled={!canScrollNext}
+      className={cn(
+        "items-center justify-center h-8 w-8 rounded-md border border-border bg-background shadow-sm elevation-1",
+        !canScrollNext && "opacity-50",
+      )}
+      {...props}
+    >
+      {children ?? <Text className="text-base text-foreground">{"\u203A"}</Text>}
+    </Pressable>
+  );
+}
+CarouselNext.displayName = "CarouselNext";
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};
+export type { CarouselNativeProps, CarouselContentNativeProps, CarouselItemNativeProps, CarouselButtonNativeProps };

package/src/components/Carousel/Carousel.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from "./Carousel.web";
+
+const meta: Meta<typeof Carousel> = {
+  title: "Components/Carousel",
+  component: Carousel,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Carousel>;
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ width: 400, padding: "0 40px" }}>
+      <Carousel>
+        <CarouselContent>
+          {[1, 2, 3, 4, 5].map((num) => (
+            <CarouselItem key={num}>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  height: 200,
+                  border: "1px solid #e5e7eb",
+                  borderRadius: 8,
+                  fontSize: 32,
+                  fontWeight: 600,
+                }}
+              >
+                {num}
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  ),
+};

package/src/components/Carousel/Carousel.types.ts

@@ -0,0 +1,29 @@
+export type CarouselOrientation = "horizontal" | "vertical";
+
+export interface CarouselProps {
+  orientation?: CarouselOrientation;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface CarouselContentProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface CarouselItemProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface CarouselPreviousProps {
+  children?: React.ReactNode;
+  className?: string;
+  onPress?: () => void;
+}
+
+export interface CarouselNextProps {
+  children?: React.ReactNode;
+  className?: string;
+  onPress?: () => void;
+}

package/src/components/Carousel/Carousel.web.tsx

@@ -0,0 +1,272 @@
+import {
+  forwardRef,
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  Children,
+} from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+import type {
+  CarouselProps,
+  CarouselContentProps,
+  CarouselItemProps,
+  CarouselOrientation,
+} from "./Carousel.types";
+
+interface CarouselContextValue {
+  orientation: CarouselOrientation;
+  currentIndex: number;
+  totalItems: number;
+  scrollPrevious: () => void;
+  scrollNext: () => void;
+  canScrollPrevious: boolean;
+  canScrollNext: boolean;
+  setTotalItems: (count: number) => void;
+}
+
+const CarouselContext = createContext<CarouselContextValue | null>(null);
+
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+
+const carouselContentVariants = cva(
+  "flex transition-transform duration-300 ease-in-out",
+  {
+    variants: {
+      orientation: {
+        horizontal: "-ml-4",
+        vertical: "-mt-4 flex-col",
+      } satisfies Record<CarouselOrientation, string>,
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+const carouselItemVariants = cva("min-w-0 shrink-0 grow-0 basis-full", {
+  variants: {
+    orientation: {
+      horizontal: "pl-4",
+      vertical: "pt-4",
+    } satisfies Record<CarouselOrientation, string>,
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+const carouselPreviousVariants = cva(
+  "absolute inline-flex h-8 w-8 items-center justify-center rounded-full border border-input bg-background shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      orientation: {
+        horizontal: "-left-12 top-1/2 -translate-y-1/2",
+        vertical: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+      } satisfies Record<CarouselOrientation, string>,
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+const carouselNextVariants = cva(
+  "absolute inline-flex h-8 w-8 items-center justify-center rounded-full border border-input bg-background shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      orientation: {
+        horizontal: "-right-12 top-1/2 -translate-y-1/2",
+        vertical: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+      } satisfies Record<CarouselOrientation, string>,
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+const Carousel = forwardRef<
+  HTMLDivElement,
+  CarouselProps & React.HTMLAttributes<HTMLDivElement>
+>(({ className, orientation = "horizontal", children, ...props }, ref) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [totalItems, setTotalItems] = useState(0);
+
+  const canScrollPrevious = currentIndex > 0;
+  const canScrollNext = currentIndex < totalItems - 1;
+
+  const scrollPrevious = useCallback(() => {
+    setCurrentIndex((prev) => Math.max(0, prev - 1));
+  }, []);
+
+  const scrollNext = useCallback(() => {
+    setCurrentIndex((prev) => Math.min(totalItems - 1, prev + 1));
+  }, [totalItems]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        orientation,
+        currentIndex,
+        totalItems,
+        scrollPrevious,
+        scrollNext,
+        canScrollPrevious,
+        canScrollNext,
+        setTotalItems,
+      }}
+    >
+      <div
+        ref={ref}
+        role="region"
+        aria-roledescription="carousel"
+        className={cn("relative", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+});
+Carousel.displayName = "Carousel";
+
+const CarouselContent = forwardRef<
+  HTMLDivElement,
+  CarouselContentProps & React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  const { orientation, currentIndex, setTotalItems } = useCarousel();
+  const items = Children.toArray(children);
+
+  // Update total items count
+  if (items.length !== 0) {
+    // Using a ref-like pattern to avoid re-render loops
+    queueMicrotask(() => setTotalItems(items.length));
+  }
+
+  return (
+    <div className="overflow-hidden" ref={ref}>
+      <div
+        className={cn(carouselContentVariants({ orientation }), className)}
+        style={{
+          transform: orientation === "horizontal"
+            ? `translateX(-${currentIndex * 100}%)`
+            : `translateY(-${currentIndex * 100}%)`,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    </div>
+  );
+});
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = forwardRef<
+  HTMLDivElement,
+  CarouselItemProps & React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(carouselItemVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, children, ...props }, ref) => {
+  const { orientation, scrollPrevious, canScrollPrevious } = useCarousel();
+
+  return (
+    <button
+      ref={ref}
+      className={cn(carouselPreviousVariants({ orientation }), className)}
+      disabled={!canScrollPrevious}
+      onClick={scrollPrevious}
+      aria-label="Previous slide"
+      {...props}
+    >
+      {children ?? (
+        <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 className="sr-only">Previous slide</span>
+    </button>
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, children, ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <button
+      ref={ref}
+      className={cn(carouselNextVariants({ orientation }), className)}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      aria-label="Next slide"
+      {...props}
+    >
+      {children ?? (
+        <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>
+      )}
+      <span className="sr-only">Next slide</span>
+    </button>
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  carouselContentVariants,
+  carouselItemVariants,
+  carouselPreviousVariants,
+  carouselNextVariants,
+};

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

@@ -0,0 +1,2 @@
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "./Carousel.native";
+export type { CarouselProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, CarouselOrientation } from "./Carousel.types";

package/src/components/Carousel/index.ts

@@ -0,0 +1,2 @@
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "./Carousel.web";
+export type { CarouselProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, CarouselOrientation } from "./Carousel.types";