@byldpartners/ui 0.0.1

package/src/components/Separator/Separator.native.tsx

@@ -0,0 +1,38 @@
+import { View, type ViewProps } from "react-native";
+import { cva } from "class-variance-authority";
+import type { SeparatorOrientation, SeparatorProps } from "./Separator.types";
+import { cn } from "../../utils/cn";
+
+interface SeparatorNativeProps extends SeparatorProps, ViewProps {}
+
+const separatorVariants = cva("bg-border", {
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full",
+      vertical: "w-px h-full",
+    } satisfies Record<SeparatorOrientation, string>,
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+function Separator({
+  orientation = "horizontal",
+  style,
+  className,
+  ...props
+}: SeparatorNativeProps) {
+  return (
+    <View
+      accessibilityRole="none"
+      className={cn(separatorVariants({ orientation }), className)}
+      style={style}
+      {...props}
+    />
+  );
+}
+Separator.displayName = "Separator";
+
+export { Separator, separatorVariants };
+export type { SeparatorNativeProps };

package/src/components/Separator/Separator.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Separator } from "./Separator.web";
+
+const meta: Meta<typeof Separator> = {
+  title: "Components/Separator",
+  component: Separator,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Separator>;
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ width: 300 }}>
+      <p>Content above</p>
+      <Separator />
+      <p>Content below</p>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 8, height: 20 }}>
+      <span>Left</span>
+      <Separator orientation="vertical" />
+      <span>Right</span>
+    </div>
+  ),
+};

package/src/components/Separator/Separator.types.ts

@@ -0,0 +1,7 @@
+export type SeparatorOrientation = "horizontal" | "vertical";
+
+export interface SeparatorProps {
+  orientation?: SeparatorOrientation;
+  decorative?: boolean;
+  className?: string;
+}

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

@@ -0,0 +1,32 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { Separator, separatorVariants } from "./Separator.web";
+
+describe("Separator", () => {
+  it("renders with role=separator", () => {
+    const { container } = render(<Separator decorative={false} />);
+    expect(container.querySelector("[role='separator']")).not.toBeNull();
+  });
+
+  it("renders as decorative by default (no role)", () => {
+    const { container } = render(<Separator />);
+    // Decorative separators have role="none"
+    expect(container.querySelector("[role='none']")).not.toBeNull();
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(<Separator className="my-sep" />);
+    const el = container.firstChild as HTMLElement;
+    expect(el.className).toContain("my-sep");
+  });
+
+  it("separatorVariants generates horizontal classes", () => {
+    expect(separatorVariants({ orientation: "horizontal" })).toContain("h-[1px]");
+    expect(separatorVariants({ orientation: "horizontal" })).toContain("w-full");
+  });
+
+  it("separatorVariants generates vertical classes", () => {
+    expect(separatorVariants({ orientation: "vertical" })).toContain("w-[1px]");
+    expect(separatorVariants({ orientation: "vertical" })).toContain("h-full");
+  });
+});

package/src/components/Separator/Separator.web.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cva } from "class-variance-authority";
+import type { SeparatorOrientation } from "./Separator.types";
+import { cn } from "../../utils/cn";
+
+const separatorVariants = cva("shrink-0 bg-border", {
+  variants: {
+    orientation: {
+      horizontal: "h-[1px] w-full",
+      vertical: "h-full w-[1px]",
+    } satisfies Record<SeparatorOrientation, string>,
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+const Separator = forwardRef<
+  React.ComponentRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(separatorVariants({ orientation }), className)}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator, separatorVariants };

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

@@ -0,0 +1,2 @@
+export { Separator, separatorVariants } from "./Separator.native";
+export type { SeparatorProps, SeparatorOrientation } from "./Separator.types";

package/src/components/Separator/index.ts

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

package/src/components/Sheet/Sheet.native.tsx

@@ -0,0 +1,246 @@
+import {
+  useRef,
+  useEffect,
+  createContext,
+  useContext,
+} from "react";
+import {
+  View,
+  Text,
+  Modal,
+  Pressable,
+  Animated,
+  Dimensions,
+  type ViewProps,
+  type TextProps,
+} from "react-native";
+import { cn } from "../../utils/cn";
+import type {
+  SheetSide,
+  SheetProps,
+  SheetTriggerProps,
+  SheetContentProps,
+  SheetHeaderProps,
+  SheetFooterProps,
+  SheetTitleProps,
+  SheetDescriptionProps,
+  SheetCloseProps,
+} from "./Sheet.types";
+import { useSheet } from "./useSheet";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+interface SheetContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const SheetContext = createContext<SheetContextValue>({
+  open: false,
+  onOpenChange: () => {},
+});
+
+function Sheet({
+  children,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+}: SheetProps) {
+  const { open, onOpenChange } = useSheet({
+    open: controlledOpen,
+    onOpenChange: controlledOnOpenChange,
+  });
+
+  return (
+    <SheetContext.Provider value={{ open, onOpenChange }}>
+      {children}
+    </SheetContext.Provider>
+  );
+}
+Sheet.displayName = "Sheet";
+
+interface SheetTriggerNativeProps extends SheetTriggerProps {
+  onPress?: () => void;
+}
+
+function SheetTrigger({ children, onPress }: SheetTriggerNativeProps) {
+  const { onOpenChange } = useContext(SheetContext);
+  return (
+    <Pressable
+      onPress={() => {
+        onOpenChange(true);
+        onPress?.();
+      }}
+    >
+      {children}
+    </Pressable>
+  );
+}
+SheetTrigger.displayName = "SheetTrigger";
+
+function getSlideConfig(side: SheetSide) {
+  switch (side) {
+    case "top":
+      return { axis: "translateY" as const, from: -SCREEN_HEIGHT, contentClassName: "top-0 left-0 right-0" };
+    case "bottom":
+      return { axis: "translateY" as const, from: SCREEN_HEIGHT, contentClassName: "bottom-0 left-0 right-0" };
+    case "left":
+      return { axis: "translateX" as const, from: -SCREEN_WIDTH, contentClassName: "top-0 left-0 bottom-0 w-3/4 max-w-[400px]" };
+    case "right":
+    default:
+      return { axis: "translateX" as const, from: SCREEN_WIDTH, contentClassName: "top-0 right-0 bottom-0 w-3/4 max-w-[400px]" };
+  }
+}
+
+interface SheetContentNativeProps extends SheetContentProps {
+  style?: ViewProps["style"];
+}
+
+function SheetContent({
+  children,
+  side = "right",
+  style,
+}: SheetContentNativeProps) {
+  const { open, onOpenChange } = useContext(SheetContext);
+  const config = getSlideConfig(side);
+  const animValue = useRef(new Animated.Value(config.from)).current;
+
+  useEffect(() => {
+    if (open) {
+      Animated.spring(animValue, {
+        toValue: 0,
+        useNativeDriver: true,
+        damping: 20,
+        stiffness: 150,
+      }).start();
+    } else {
+      Animated.timing(animValue, {
+        toValue: config.from,
+        duration: 250,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [open, animValue, config.from]);
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="none"
+      onRequestClose={() => onOpenChange(false)}
+    >
+      <Pressable
+        className="flex-1 bg-black/50"
+        onPress={() => onOpenChange(false)}
+      >
+        <Animated.View
+          className={cn("absolute bg-background shadow-lg elevation-5", config.contentClassName)}
+          style={[
+            style,
+            { transform: config.axis === "translateX" ? [{ translateX: animValue }] : [{ translateY: animValue }] },
+          ]}
+        >
+          <Pressable
+            onPress={(e) => e.stopPropagation()}
+            className="flex-1 p-6"
+          >
+            <Pressable
+              className="absolute top-4 right-4 z-10"
+              onPress={() => onOpenChange(false)}
+            >
+              <Text className="text-2xl text-muted-foreground">×</Text>
+            </Pressable>
+            {children}
+          </Pressable>
+        </Animated.View>
+      </Pressable>
+    </Modal>
+  );
+}
+SheetContent.displayName = "SheetContent";
+
+interface SheetHeaderNativeProps extends SheetHeaderProps {
+  style?: ViewProps["style"];
+}
+
+function SheetHeader({ children, style }: SheetHeaderNativeProps) {
+  return <View className="mb-3" style={style}>{children}</View>;
+}
+SheetHeader.displayName = "SheetHeader";
+
+interface SheetFooterNativeProps extends SheetFooterProps {
+  style?: ViewProps["style"];
+}
+
+function SheetFooter({ children, style }: SheetFooterNativeProps) {
+  return (
+    <View
+      className="mt-4 flex-row justify-end gap-2"
+      style={style}
+    >
+      {children}
+    </View>
+  );
+}
+SheetFooter.displayName = "SheetFooter";
+
+interface SheetTitleNativeProps extends SheetTitleProps {
+  style?: TextProps["style"];
+}
+
+function SheetTitle({ children, style }: SheetTitleNativeProps) {
+  return (
+    <Text
+      className="text-lg font-semibold text-foreground"
+      style={style}
+    >
+      {children}
+    </Text>
+  );
+}
+SheetTitle.displayName = "SheetTitle";
+
+interface SheetDescriptionNativeProps extends SheetDescriptionProps {
+  style?: TextProps["style"];
+}
+
+function SheetDescription({ children, style }: SheetDescriptionNativeProps) {
+  return (
+    <Text
+      className="text-sm text-muted-foreground mt-1"
+      style={style}
+    >
+      {children}
+    </Text>
+  );
+}
+SheetDescription.displayName = "SheetDescription";
+
+interface SheetCloseNativeProps extends SheetCloseProps {
+  onPress?: () => void;
+}
+
+function SheetClose({ children, onPress }: SheetCloseNativeProps) {
+  const { onOpenChange } = useContext(SheetContext);
+  return (
+    <Pressable
+      onPress={() => {
+        onOpenChange(false);
+        onPress?.();
+      }}
+    >
+      {children || <Text className="text-2xl text-muted-foreground">×</Text>}
+    </Pressable>
+  );
+}
+SheetClose.displayName = "SheetClose";
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  SheetClose,
+};

package/src/components/Sheet/Sheet.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "./Sheet.web";
+
+const meta: Meta<typeof Sheet> = {
+  title: "Components/Sheet",
+  component: Sheet,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Sheet>;
+
+export const Default: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <button type="button">Open Sheet</button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Sheet Title</SheetTitle>
+          <SheetDescription>
+            This is a description of the sheet content. It provides additional
+            context for the user.
+          </SheetDescription>
+        </SheetHeader>
+        <div style={{ padding: "16px 0" }}>
+          <p>Sheet body content goes here.</p>
+        </div>
+      </SheetContent>
+    </Sheet>
+  ),
+};

package/src/components/Sheet/Sheet.types.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+
+export type SheetSide = "top" | "right" | "bottom" | "left";
+
+export interface SheetProps {
+  children?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface SheetTriggerProps {
+  children?: ReactNode;
+  className?: string;
+  asChild?: boolean;
+}
+
+export interface SheetContentProps {
+  children?: ReactNode;
+  className?: string;
+  side?: SheetSide;
+}
+
+export interface SheetHeaderProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface SheetFooterProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface SheetTitleProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface SheetDescriptionProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface SheetCloseProps {
+  children?: ReactNode;
+  className?: string;
+  asChild?: boolean;
+}

package/src/components/Sheet/Sheet.web.tsx

@@ -0,0 +1,144 @@
+import { forwardRef } from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+
+function XIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
+    </svg>
+  );
+}
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = forwardRef<
+  React.ComponentRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.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}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background text-foreground p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = forwardRef<
+  React.ComponentRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <XIcon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = forwardRef<
+  React.ComponentRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = forwardRef<
+  React.ComponentRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

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

@@ -0,0 +1,2 @@
+export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose } from "./Sheet.native";
+export type { SheetProps } from "./Sheet.types";

package/src/components/Sheet/index.ts

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

package/src/components/Sheet/useSheet.test.ts

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