@byldpartners/ui 0.0.1

package/src/components/AlertDialog/AlertDialog.native.tsx

@@ -0,0 +1,281 @@
+import { createContext, useContext } from "react";
+import {
+  Modal,
+  Pressable,
+  Text,
+  View,
+  type ViewProps,
+  type TextProps,
+} from "react-native";
+import { cn } from "../../utils/cn";
+import type {
+  AlertDialogProps,
+  AlertDialogTriggerProps,
+  AlertDialogContentProps,
+  AlertDialogHeaderProps,
+  AlertDialogFooterProps,
+  AlertDialogTitleProps,
+  AlertDialogDescriptionProps,
+  AlertDialogActionProps,
+  AlertDialogCancelProps,
+} from "./AlertDialog.types";
+import { useAlertDialog } from "./useAlertDialog";
+
+// --- Context ---
+
+interface AlertDialogContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const AlertDialogContext = createContext<AlertDialogContextValue>({
+  open: false,
+  onOpenChange: () => {},
+});
+
+// --- AlertDialog Root ---
+
+interface AlertDialogNativeProps extends AlertDialogProps {
+  defaultOpen?: boolean;
+}
+
+function AlertDialog({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange: controlledOnOpenChange,
+  children,
+}: AlertDialogNativeProps) {
+  const { open, onOpenChange } = useAlertDialog({
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange: controlledOnOpenChange,
+  });
+
+  return (
+    <AlertDialogContext.Provider
+      value={{ open, onOpenChange }}
+    >
+      {children}
+    </AlertDialogContext.Provider>
+  );
+}
+AlertDialog.displayName = "AlertDialog";
+
+// --- AlertDialogTrigger ---
+
+interface AlertDialogTriggerNativeProps extends AlertDialogTriggerProps {
+  onPress?: () => void;
+}
+
+function AlertDialogTrigger({
+  children,
+  onPress,
+}: AlertDialogTriggerNativeProps) {
+  const { onOpenChange } = useContext(AlertDialogContext);
+
+  return (
+    <Pressable
+      onPress={() => {
+        onOpenChange(true);
+        onPress?.();
+      }}
+    >
+      {children}
+    </Pressable>
+  );
+}
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
+
+// --- AlertDialogContent ---
+
+interface AlertDialogContentNativeProps extends AlertDialogContentProps, ViewProps {}
+
+function AlertDialogContent({
+  children,
+  className,
+  ...props
+}: AlertDialogContentNativeProps) {
+  const { open, onOpenChange } = useContext(AlertDialogContext);
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={() => onOpenChange(false)}
+    >
+      <View className="flex-1 justify-center items-center p-6" style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}>
+        <View
+          className={cn(
+            "w-full max-w-lg bg-background rounded-lg p-6 gap-4 shadow-lg elevation-10",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+AlertDialogContent.displayName = "AlertDialogContent";
+
+// --- AlertDialogHeader ---
+
+interface AlertDialogHeaderNativeProps extends AlertDialogHeaderProps, ViewProps {}
+
+function AlertDialogHeader({
+  children,
+  className,
+  ...props
+}: AlertDialogHeaderNativeProps) {
+  return (
+    <View className={cn("gap-2", className)} {...props}>
+      {children}
+    </View>
+  );
+}
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+// --- AlertDialogFooter ---
+
+interface AlertDialogFooterNativeProps extends AlertDialogFooterProps, ViewProps {}
+
+function AlertDialogFooter({
+  children,
+  className,
+  ...props
+}: AlertDialogFooterNativeProps) {
+  return (
+    <View
+      className={cn("flex-row justify-end gap-2", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+// --- AlertDialogTitle ---
+
+interface AlertDialogTitleNativeProps extends AlertDialogTitleProps, TextProps {}
+
+function AlertDialogTitle({
+  children,
+  className,
+  ...props
+}: AlertDialogTitleNativeProps) {
+  return (
+    <Text
+      className={cn("text-lg font-semibold text-foreground", className)}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+AlertDialogTitle.displayName = "AlertDialogTitle";
+
+// --- AlertDialogDescription ---
+
+interface AlertDialogDescriptionNativeProps extends AlertDialogDescriptionProps, TextProps {}
+
+function AlertDialogDescription({
+  children,
+  className,
+  ...props
+}: AlertDialogDescriptionNativeProps) {
+  return (
+    <Text
+      className={cn("text-sm text-muted-foreground leading-5", className)}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+AlertDialogDescription.displayName = "AlertDialogDescription";
+
+// --- AlertDialogAction ---
+
+interface AlertDialogActionNativeProps extends AlertDialogActionProps {}
+
+function AlertDialogAction({
+  children,
+  onPress,
+}: AlertDialogActionNativeProps) {
+  const { onOpenChange } = useContext(AlertDialogContext);
+
+  return (
+    <Pressable
+      onPress={() => {
+        onPress?.();
+        onOpenChange(false);
+      }}
+      className="bg-primary px-4 rounded-md h-9 items-center justify-center"
+    >
+      {typeof children === "string" ? (
+        <Text className="text-primary-foreground text-sm font-medium">
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+AlertDialogAction.displayName = "AlertDialogAction";
+
+// --- AlertDialogCancel ---
+
+interface AlertDialogCancelNativeProps extends AlertDialogCancelProps {}
+
+function AlertDialogCancel({
+  children,
+  onPress,
+}: AlertDialogCancelNativeProps) {
+  const { onOpenChange } = useContext(AlertDialogContext);
+
+  return (
+    <Pressable
+      onPress={() => {
+        onPress?.();
+        onOpenChange(false);
+      }}
+      className="bg-transparent border border-border px-4 rounded-md h-9 items-center justify-center"
+    >
+      {typeof children === "string" ? (
+        <Text className="text-foreground text-sm font-medium">
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+AlertDialogCancel.displayName = "AlertDialogCancel";
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
+export type {
+  AlertDialogNativeProps,
+  AlertDialogTriggerNativeProps,
+  AlertDialogContentNativeProps,
+  AlertDialogHeaderNativeProps,
+  AlertDialogFooterNativeProps,
+  AlertDialogTitleNativeProps,
+  AlertDialogDescriptionNativeProps,
+  AlertDialogActionNativeProps,
+  AlertDialogCancelNativeProps,
+};

package/src/components/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "./AlertDialog.web";
+
+const meta = {
+  title: "Components/AlertDialog",
+  component: AlertDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <AlertDialogTrigger asChild>
+          <button>Delete Account</button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete your
+              account and remove your data from our servers.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </>
+    ),
+  },
+};

package/src/components/AlertDialog/AlertDialog.types.ts

@@ -0,0 +1,49 @@
+export interface AlertDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface AlertDialogTriggerProps {
+  children?: React.ReactNode;
+  className?: string;
+  asChild?: boolean;
+}
+
+export interface AlertDialogContentProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface AlertDialogHeaderProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface AlertDialogFooterProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface AlertDialogTitleProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface AlertDialogDescriptionProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface AlertDialogActionProps {
+  children?: React.ReactNode;
+  className?: string;
+  onPress?: () => void;
+}
+
+export interface AlertDialogCancelProps {
+  children?: React.ReactNode;
+  className?: string;
+  onPress?: () => void;
+}

package/src/components/AlertDialog/AlertDialog.web.tsx

@@ -0,0 +1,138 @@
+import { forwardRef } from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cn } from "../../utils/cn";
+import { buttonVariants } from "../Button/Button.web";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background text-foreground p-6 shadow-lg transition-opacity duration-200 data-[state=open]:opacity-100 data-[state=closed]:opacity-0 sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

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

@@ -0,0 +1,22 @@
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "./AlertDialog.native";
+export type {
+  AlertDialogProps,
+  AlertDialogTriggerProps,
+  AlertDialogContentProps,
+  AlertDialogHeaderProps,
+  AlertDialogFooterProps,
+  AlertDialogTitleProps,
+  AlertDialogDescriptionProps,
+  AlertDialogActionProps,
+  AlertDialogCancelProps,
+} from "./AlertDialog.types";

package/src/components/AlertDialog/index.ts

@@ -0,0 +1,24 @@
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "./AlertDialog.web";
+export type {
+  AlertDialogProps,
+  AlertDialogTriggerProps,
+  AlertDialogContentProps,
+  AlertDialogHeaderProps,
+  AlertDialogFooterProps,
+  AlertDialogTitleProps,
+  AlertDialogDescriptionProps,
+  AlertDialogActionProps,
+  AlertDialogCancelProps,
+} from "./AlertDialog.types";

package/src/components/AlertDialog/useAlertDialog.test.ts

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

package/src/components/AlertDialog/useAlertDialog.ts

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

package/src/components/AspectRatio/AspectRatio.native.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { View, type ViewProps, type LayoutChangeEvent } from "react-native";
+import type { AspectRatioProps } from "./AspectRatio.types";
+import { cn } from "../../utils/cn";
+import { useAspectRatio } from "./useAspectRatio";
+
+interface AspectRatioNativeProps extends AspectRatioProps, ViewProps {}
+
+function AspectRatio({
+  ratio = 1,
+  children,
+  className,
+  ...props
+}: AspectRatioNativeProps) {
+  const [width, setWidth] = useState(0);
+  const { height, isReady } = useAspectRatio({ ratio, width });
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    setWidth(event.nativeEvent.layout.width);
+  };
+
+  return (
+    <View
+      onLayout={handleLayout}
+      className={cn("relative w-full overflow-hidden", className)}
+      style={{ height: isReady ? height : undefined }}
+      {...props}
+    >
+      {isReady ? children : null}
+    </View>
+  );
+}
+
+AspectRatio.displayName = "AspectRatio";
+
+export { AspectRatio };
+export type { AspectRatioNativeProps };