@byldpartners/ui 0.0.1

package/src/components/AspectRatio/AspectRatio.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AspectRatio } from "./AspectRatio.web";
+
+const meta = {
+  title: "Components/AspectRatio",
+  component: AspectRatio,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AspectRatio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    ratio: 16 / 9,
+    children: (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          backgroundColor: "#e2e8f0",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 8,
+          color: "#64748b",
+          fontSize: 14,
+        }}
+      >
+        16 : 9
+      </div>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 480 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/AspectRatio/AspectRatio.types.ts

@@ -0,0 +1,5 @@
+export interface AspectRatioProps {
+  ratio?: number;
+  children?: React.ReactNode;
+  className?: string;
+}

package/src/components/AspectRatio/AspectRatio.web.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

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

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

package/src/components/AspectRatio/index.ts

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

package/src/components/AspectRatio/useAspectRatio.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { useAspectRatio } from "./useAspectRatio";
+
+describe("useAspectRatio", () => {
+  it("defaults to ratio 1 and width 0", () => {
+    const result = useAspectRatio();
+    expect(result.height).toBe(0);
+    expect(result.isReady).toBe(false);
+    expect(result.safeRatio).toBe(1);
+  });
+
+  it("computes height from width and ratio", () => {
+    const result = useAspectRatio({ width: 200, ratio: 16 / 9 });
+    expect(result.height).toBeCloseTo(112.5);
+    expect(result.isReady).toBe(true);
+  });
+
+  it("returns height equal to width when ratio is 1", () => {
+    const result = useAspectRatio({ width: 100, ratio: 1 });
+    expect(result.height).toBe(100);
+  });
+
+  it("returns 0 height when width is 0", () => {
+    const result = useAspectRatio({ width: 0, ratio: 16 / 9 });
+    expect(result.height).toBe(0);
+    expect(result.isReady).toBe(false);
+  });
+
+  it("falls back to ratio 1 when ratio is 0", () => {
+    const result = useAspectRatio({ width: 100, ratio: 0 });
+    expect(result.safeRatio).toBe(1);
+    expect(result.height).toBe(100);
+  });
+
+  it("falls back to ratio 1 when ratio is negative", () => {
+    const result = useAspectRatio({ width: 100, ratio: -2 });
+    expect(result.safeRatio).toBe(1);
+    expect(result.height).toBe(100);
+  });
+});

package/src/components/AspectRatio/useAspectRatio.ts

@@ -0,0 +1,12 @@
+interface UseAspectRatioProps {
+  ratio?: number;
+  width?: number;
+}
+
+export function useAspectRatio({ ratio = 1, width = 0 }: UseAspectRatioProps = {}) {
+  const safeRatio = ratio > 0 ? ratio : 1;
+  const height = width > 0 ? width / safeRatio : 0;
+  const isReady = width > 0;
+
+  return { height, isReady, safeRatio };
+}

package/src/components/Avatar/Avatar.native.tsx

@@ -0,0 +1,95 @@
+import {
+  Image,
+  Text,
+  View,
+  type ViewProps,
+  type ImageProps,
+} from "react-native";
+import { cn } from "../../utils/cn";
+import type {
+  AvatarProps,
+  AvatarImageProps,
+  AvatarFallbackProps,
+} from "./Avatar.types";
+import { useAvatarImage } from "./useAvatarImage";
+
+// --- Avatar ---
+
+interface AvatarNativeProps extends AvatarProps, ViewProps {}
+
+function Avatar({ children, className, ...props }: AvatarNativeProps) {
+  return (
+    <View
+      className={cn("relative h-10 w-10 rounded-full overflow-hidden", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+Avatar.displayName = "Avatar";
+
+// --- AvatarImage ---
+
+interface AvatarImageNativeProps extends AvatarImageProps, Omit<ImageProps, "source"> {}
+
+function AvatarImage({
+  src,
+  alt,
+  className,
+  onLoadingStatusChange,
+  ...props
+}: AvatarImageNativeProps) {
+  const { showImage, onLoad, onError, onLoadStart } = useAvatarImage({
+    src,
+    onLoadingStatusChange,
+  });
+
+  if (!showImage) return null;
+
+  return (
+    <Image
+      source={{ uri: src }}
+      accessibilityLabel={alt}
+      onLoad={onLoad}
+      onError={onError}
+      onLoadStart={onLoadStart}
+      className={cn("h-full w-full", className)}
+      {...props}
+    />
+  );
+}
+AvatarImage.displayName = "AvatarImage";
+
+// --- AvatarFallback ---
+
+interface AvatarFallbackNativeProps extends AvatarFallbackProps, ViewProps {}
+
+function AvatarFallback({
+  children,
+  className,
+  ...props
+}: AvatarFallbackNativeProps) {
+  return (
+    <View
+      className={cn("flex-1 items-center justify-center bg-muted rounded-full", className)}
+      {...props}
+    >
+      {typeof children === "string" ? (
+        <Text className="text-sm font-medium text-foreground">
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+AvatarFallback.displayName = "AvatarFallback";
+
+export { Avatar, AvatarImage, AvatarFallback };
+export type {
+  AvatarNativeProps,
+  AvatarImageNativeProps,
+  AvatarFallbackNativeProps,
+};

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Avatar, AvatarImage, AvatarFallback } from "./Avatar.web";
+
+const meta = {
+  title: "Components/Avatar",
+  component: Avatar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithImage: Story = {
+  args: {
+    children: (
+      <>
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </>
+    ),
+  },
+};
+
+export const WithFallback: Story = {
+  args: {
+    children: <AvatarFallback>CN</AvatarFallback>,
+  },
+};

package/src/components/Avatar/Avatar.types.ts

@@ -0,0 +1,17 @@
+export interface AvatarProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface AvatarImageProps {
+  src?: string;
+  alt?: string;
+  className?: string;
+  onLoadingStatusChange?: (status: "idle" | "loading" | "loaded" | "error") => void;
+}
+
+export interface AvatarFallbackProps {
+  children?: React.ReactNode;
+  className?: string;
+  delayMs?: number;
+}

package/src/components/Avatar/Avatar.web.tsx

@@ -0,0 +1,47 @@
+import { forwardRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../utils/cn";
+
+const Avatar = forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

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

@@ -0,0 +1,2 @@
+export { Avatar, AvatarImage, AvatarFallback } from "./Avatar.native";
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from "./Avatar.types";

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar, AvatarImage, AvatarFallback } from "./Avatar.web";
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from "./Avatar.types";

package/src/components/Avatar/useAvatarImage.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useAvatarImage } from "./useAvatarImage";
+
+describe("useAvatarImage", () => {
+  it("starts in error status when no src", () => {
+    const { result } = renderHook(() => useAvatarImage());
+    expect(result.current.status).toBe("error");
+    expect(result.current.showImage).toBe(false);
+  });
+
+  it("starts in idle status when src is provided", () => {
+    const { result } = renderHook(() => useAvatarImage({ src: "https://example.com/avatar.png" }));
+    expect(result.current.status).toBe("idle");
+    expect(result.current.showImage).toBe(true);
+  });
+
+  it("transitions to loading on loadStart", () => {
+    const { result } = renderHook(() => useAvatarImage({ src: "https://example.com/avatar.png" }));
+    act(() => result.current.onLoadStart());
+    expect(result.current.status).toBe("loading");
+    expect(result.current.showImage).toBe(true);
+  });
+
+  it("transitions to loaded on load", () => {
+    const { result } = renderHook(() => useAvatarImage({ src: "https://example.com/avatar.png" }));
+    act(() => result.current.onLoad());
+    expect(result.current.status).toBe("loaded");
+    expect(result.current.showImage).toBe(true);
+  });
+
+  it("transitions to error on error", () => {
+    const { result } = renderHook(() => useAvatarImage({ src: "https://example.com/avatar.png" }));
+    act(() => result.current.onError());
+    expect(result.current.status).toBe("error");
+    expect(result.current.showImage).toBe(false);
+  });
+
+  it("calls onLoadingStatusChange callback", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() =>
+      useAvatarImage({ src: "https://example.com/avatar.png", onLoadingStatusChange: callback }),
+    );
+
+    act(() => result.current.onLoadStart());
+    expect(callback).toHaveBeenCalledWith("loading");
+
+    act(() => result.current.onLoad());
+    expect(callback).toHaveBeenCalledWith("loaded");
+  });
+
+  it("calls onLoadingStatusChange with error", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() =>
+      useAvatarImage({ src: "https://example.com/avatar.png", onLoadingStatusChange: callback }),
+    );
+
+    act(() => result.current.onError());
+    expect(callback).toHaveBeenCalledWith("error");
+  });
+
+  it("showImage is false when src is empty string", () => {
+    const { result } = renderHook(() => useAvatarImage({ src: "" }));
+    expect(result.current.showImage).toBe(false);
+  });
+});

package/src/components/Avatar/useAvatarImage.ts

@@ -0,0 +1,31 @@
+import { useState, useCallback } from "react";
+
+type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error";
+
+interface UseAvatarImageProps {
+  src?: string;
+  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+}
+
+export function useAvatarImage({ src, onLoadingStatusChange }: UseAvatarImageProps = {}) {
+  const [status, setStatus] = useState<ImageLoadingStatus>(src ? "idle" : "error");
+
+  const onLoadStart = useCallback(() => {
+    setStatus("loading");
+    onLoadingStatusChange?.("loading");
+  }, [onLoadingStatusChange]);
+
+  const onLoad = useCallback(() => {
+    setStatus("loaded");
+    onLoadingStatusChange?.("loaded");
+  }, [onLoadingStatusChange]);
+
+  const onError = useCallback(() => {
+    setStatus("error");
+    onLoadingStatusChange?.("error");
+  }, [onLoadingStatusChange]);
+
+  const showImage = !!src && status !== "error";
+
+  return { status, showImage, onLoadStart, onLoad, onError };
+}

package/src/components/Badge/Badge.native.tsx

@@ -0,0 +1,64 @@
+import { View, Text, type ViewProps } from "react-native";
+import { cva } from "class-variance-authority";
+import type { BadgeVariant, BadgeProps } from "./Badge.types";
+import { cn } from "../../utils/cn";
+
+interface BadgeNativeProps extends BadgeProps, ViewProps {}
+
+const badgeContainerVariants = cva(
+  "flex-row items-center rounded-md border px-2.5 py-0.5 self-start",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary border-transparent shadow elevation-1",
+        secondary: "bg-secondary border-transparent",
+        destructive: "bg-destructive border-transparent shadow elevation-1",
+        outline: "bg-transparent border-border",
+      } satisfies Record<BadgeVariant, string>,
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const badgeTextVariants = cva("text-xs font-semibold", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      secondary: "text-secondary-foreground",
+      destructive: "text-destructive-foreground",
+      outline: "text-foreground",
+    } satisfies Record<BadgeVariant, string>,
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+function Badge({
+  variant = "default",
+  children,
+  className,
+  ...props
+}: BadgeNativeProps) {
+  return (
+    <View
+      className={cn(badgeContainerVariants({ variant }), className)}
+      {...props}
+    >
+      {typeof children === "string" ? (
+        <Text className={cn(badgeTextVariants({ variant }))}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+
+Badge.displayName = "Badge";
+
+export { Badge, badgeContainerVariants, badgeTextVariants };
+export type { BadgeNativeProps };

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Badge } from "./Badge.web";
+
+const meta = {
+  title: "Components/Badge",
+  component: Badge,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Badge",
+    variant: "default",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Secondary",
+    variant: "secondary",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: "Destructive",
+    variant: "destructive",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: "Outline",
+    variant: "outline",
+  },
+};

package/src/components/Badge/Badge.types.ts

@@ -0,0 +1,7 @@
+export type BadgeVariant = "default" | "secondary" | "destructive" | "outline";
+
+export interface BadgeProps {
+  variant?: BadgeVariant;
+  children?: React.ReactNode;
+  className?: string;
+}

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

@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Badge, badgeVariants } from "./Badge.web";
+
+describe("Badge", () => {
+  it("renders with children", () => {
+    render(<Badge>Status</Badge>);
+    expect(screen.getByText("Status")).toBeDefined();
+  });
+
+  it("applies default variant", () => {
+    render(<Badge>tag</Badge>);
+    expect(screen.getByText("tag").className).toContain("bg-primary");
+  });
+
+  it("applies destructive variant", () => {
+    render(<Badge variant="destructive">err</Badge>);
+    expect(screen.getByText("err").className).toContain("bg-destructive");
+  });
+
+  it("applies secondary variant", () => {
+    render(<Badge variant="secondary">sec</Badge>);
+    expect(screen.getByText("sec").className).toContain("bg-secondary");
+  });
+
+  it("applies outline variant", () => {
+    render(<Badge variant="outline">out</Badge>);
+    expect(screen.getByText("out").className).toContain("text-foreground");
+  });
+
+  it("merges custom className", () => {
+    render(<Badge className="my-class">tag</Badge>);
+    expect(screen.getByText("tag").className).toContain("my-class");
+  });
+
+  it("badgeVariants generates correct classes", () => {
+    const classes = badgeVariants({ variant: "destructive" });
+    expect(classes).toContain("bg-destructive");
+  });
+});

package/src/components/Badge/Badge.web.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+import type { BadgeVariant, BadgeProps } from "./Badge.types";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      } satisfies Record<BadgeVariant, string>,
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeWebProps
+  extends BadgeProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+const Badge = forwardRef<HTMLDivElement, BadgeWebProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  ),
+);
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1,2 @@
+export { Badge, badgeContainerVariants, badgeTextVariants } from "./Badge.native";
+export type { BadgeProps, BadgeVariant } from "./Badge.types";

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge, badgeVariants } from "./Badge.web";
+export type { BadgeProps, BadgeVariant } from "./Badge.types";