@byldpartners/ui 0.0.1

package/src/components/Sheet/useSheet.ts

@@ -0,0 +1,19 @@
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseSheetProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function useSheet({ open: controlledOpen, onOpenChange }: UseSheetProps = {}) {
+  const [open, setOpen] = useControllableState<boolean>({
+    value: controlledOpen,
+    defaultValue: false,
+    onChange: onOpenChange,
+  });
+
+  return {
+    open,
+    onOpenChange: setOpen,
+  };
+}

package/src/components/Sidebar/Sidebar.native.tsx

@@ -0,0 +1,7 @@
+const ERROR_MESSAGE = "@byldpartners/ui: Sidebar is not supported on native.";
+
+function Sidebar(): never {
+  throw new Error(ERROR_MESSAGE);
+}
+
+export { Sidebar };

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Sidebar,
+  SidebarProvider,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarTrigger,
+} from "./Sidebar.web";
+
+const meta = {
+  title: "Components/Sidebar",
+  component: Sidebar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <SidebarProvider
+      defaultOpen
+      style={
+        {
+          "--sidebar-width": "240px",
+          "--sidebar-width-icon": "48px",
+          height: 400,
+          width: 600,
+        } as React.CSSProperties
+      }
+      className="border rounded-lg overflow-hidden"
+    >
+      <Sidebar>
+        <SidebarHeader>
+          <span className="text-lg font-semibold px-2">App Name</span>
+        </SidebarHeader>
+        <SidebarContent>
+          <nav className="flex flex-col gap-1">
+            <a href="#" className="rounded-md px-3 py-2 text-sm hover:bg-accent">
+              Dashboard
+            </a>
+            <a href="#" className="rounded-md px-3 py-2 text-sm hover:bg-accent">
+              Projects
+            </a>
+            <a href="#" className="rounded-md px-3 py-2 text-sm hover:bg-accent">
+              Settings
+            </a>
+          </nav>
+        </SidebarContent>
+        <SidebarFooter>
+          <span className="text-xs text-muted-foreground px-2">v1.0.0</span>
+        </SidebarFooter>
+      </Sidebar>
+      <main className="flex-1 p-4">
+        <SidebarTrigger />
+        <p className="mt-4 text-sm text-muted-foreground">
+          Main content area. Click the trigger to toggle the sidebar.
+        </p>
+      </main>
+    </SidebarProvider>
+  ),
+};
+
+export const RightSide: Story = {
+  render: () => (
+    <SidebarProvider
+      defaultOpen
+      style={
+        {
+          "--sidebar-width": "240px",
+          "--sidebar-width-icon": "48px",
+          height: 400,
+          width: 600,
+        } as React.CSSProperties
+      }
+      className="border rounded-lg overflow-hidden"
+    >
+      <main className="flex-1 p-4">
+        <SidebarTrigger />
+        <p className="mt-4 text-sm text-muted-foreground">
+          Main content with sidebar on the right.
+        </p>
+      </main>
+      <Sidebar side="right">
+        <SidebarHeader>
+          <span className="text-lg font-semibold px-2">Details</span>
+        </SidebarHeader>
+        <SidebarContent>
+          <div className="px-3 text-sm">
+            <p>Additional information panel.</p>
+          </div>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  ),
+};

package/src/components/Sidebar/Sidebar.types.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+export interface SidebarProps {
+  children?: ReactNode;
+  className?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  collapsible?: "offcanvas" | "icon" | "none";
+  side?: "left" | "right";
+}
+
+export interface SidebarHeaderProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface SidebarContentProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface SidebarFooterProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface SidebarTriggerProps {
+  children?: ReactNode;
+  className?: string;
+}

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

@@ -0,0 +1,74 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  SidebarProvider,
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarTrigger,
+} from "./Sidebar.web";
+
+function renderSidebar(props: { defaultOpen?: boolean } = {}) {
+  return render(
+    <SidebarProvider {...props}>
+      <Sidebar>
+        <SidebarHeader>Header</SidebarHeader>
+        <SidebarContent>Content</SidebarContent>
+        <SidebarFooter>Footer</SidebarFooter>
+      </Sidebar>
+      <SidebarTrigger data-testid="trigger" />
+    </SidebarProvider>,
+  );
+}
+
+describe("Sidebar rendering", () => {
+  it("renders header, content, footer", () => {
+    renderSidebar();
+    expect(screen.getByText("Header")).toBeDefined();
+    expect(screen.getByText("Content")).toBeDefined();
+    expect(screen.getByText("Footer")).toBeDefined();
+  });
+
+  it("reflects open state via data-state attribute", () => {
+    renderSidebar();
+    const sidebar = screen.getByText("Content").closest("[data-state]") as HTMLElement;
+    expect(sidebar.getAttribute("data-state")).toBe("expanded");
+  });
+
+  it("toggles data-state on trigger click", () => {
+    renderSidebar();
+    const sidebar = screen.getByText("Content").closest("[data-state]") as HTMLElement;
+    fireEvent.click(screen.getByTestId("trigger"));
+    expect(sidebar.getAttribute("data-state")).toBe("collapsed");
+  });
+
+  it("renders Toggle Sidebar screen reader text", () => {
+    renderSidebar();
+    expect(screen.getByText("Toggle Sidebar")).toBeDefined();
+  });
+
+  it("does not have data-state when collapsible=none", () => {
+    render(
+      <SidebarProvider>
+        <Sidebar collapsible="none" data-testid="sidebar">
+          <SidebarContent>Content</SidebarContent>
+        </Sidebar>
+      </SidebarProvider>,
+    );
+    expect(screen.getByTestId("sidebar").getAttribute("data-state")).toBeNull();
+  });
+
+  it("applies order-last when side=right", () => {
+    render(
+      <SidebarProvider>
+        <Sidebar side="right">
+          <SidebarContent>Content</SidebarContent>
+        </Sidebar>
+      </SidebarProvider>,
+    );
+    const sidebar = screen.getByText("Content").closest("[data-side]") as HTMLElement;
+    expect(sidebar.className).toContain("order-last");
+    expect(sidebar.getAttribute("data-side")).toBe("right");
+  });
+});

package/src/components/Sidebar/Sidebar.web.tsx

@@ -0,0 +1,200 @@
+import {
+  forwardRef,
+  createContext,
+  useContext,
+  type ReactNode,
+} from "react";
+import { cn } from "../../utils/cn";
+import { useSidebar as useSidebarHook } from "./useSidebar";
+
+/**
+ * Sidebar - Web implementation
+ *
+ * Note: This is a web-heavy component. Sidebars on mobile are typically
+ * handled by navigation libraries (e.g., React Navigation drawer).
+ */
+
+interface SidebarContextValue {
+  open: boolean;
+  setOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
+  toggleSidebar: () => void;
+}
+
+const SidebarContext = createContext<SidebarContextValue>({
+  open: true,
+  setOpen: () => {},
+  toggleSidebar: () => {},
+});
+
+export function useSidebarContext() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebarContext must be used within a SidebarProvider.");
+  }
+  return context;
+}
+
+interface SidebarProviderProps {
+  children?: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const SidebarProvider = forwardRef<
+  HTMLDivElement,
+  SidebarProviderProps & React.HTMLAttributes<HTMLDivElement>
+>(({ defaultOpen = true, open: controlledOpen, onOpenChange, className, children, ...props }, ref) => {
+  const { open, setOpen, toggleSidebar } = useSidebarHook({
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+  });
+
+  return (
+    <SidebarContext.Provider value={{ open, setOpen, toggleSidebar }}>
+      <div
+        ref={ref}
+        className={cn("flex min-h-svh w-full", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+});
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    side?: "left" | "right";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(({ side = "left", collapsible = "offcanvas", className, children, ...props }, ref) => {
+  const { open } = useSidebarContext();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "group/sidebar relative flex flex-col bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-linear",
+        open ? "w-[--sidebar-width]" : collapsible === "icon" ? "w-[--sidebar-width-icon]" : "w-0",
+        side === "right" && "order-last",
+        className,
+      )}
+      data-state={open ? "expanded" : "collapsed"}
+      data-side={side}
+      {...props}
+    >
+      <div
+        className={cn(
+          "flex h-full w-[--sidebar-width] flex-col overflow-hidden",
+          !open && collapsible === "offcanvas" && "invisible",
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+});
+Sidebar.displayName = "Sidebar";
+
+const SidebarHeader = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col gap-2 p-2", className)}
+    {...props}
+  />
+));
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarContent = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-2",
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarFooter = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col gap-2 p-2", className)}
+    {...props}
+  />
+));
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarTrigger = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebarContext();
+  return (
+    <button
+      ref={ref}
+      className={cn("h-7 w-7", className)}
+      onClick={(e) => {
+        onClick?.(e);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <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"
+        className="h-4 w-4"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" />
+        <path d="M9 3v18" />
+      </svg>
+      <span className="sr-only">Toggle Sidebar</span>
+    </button>
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+export {
+  Sidebar,
+  SidebarProvider,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarTrigger,
+};

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

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

package/src/components/Sidebar/index.ts

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

package/src/components/Sidebar/useSidebar.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useSidebar } from "./useSidebar";
+
+describe("useSidebar", () => {
+  it("defaults to open", () => {
+    const { result } = renderHook(() => useSidebar());
+    expect(result.current.open).toBe(true);
+  });
+
+  it("respects defaultOpen=false", () => {
+    const { result } = renderHook(() => useSidebar({ defaultOpen: false }));
+    expect(result.current.open).toBe(false);
+  });
+
+  it("toggles open state", () => {
+    const { result } = renderHook(() => useSidebar());
+    expect(result.current.open).toBe(true);
+
+    act(() => result.current.toggleSidebar());
+    expect(result.current.open).toBe(false);
+
+    act(() => result.current.toggleSidebar());
+    expect(result.current.open).toBe(true);
+  });
+
+  it("sets open state directly", () => {
+    const { result } = renderHook(() => useSidebar());
+    act(() => result.current.setOpen(false));
+    expect(result.current.open).toBe(false);
+  });
+
+  it("calls onOpenChange", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useSidebar({ onOpenChange: onChange }),
+    );
+    act(() => result.current.toggleSidebar());
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  it("works in controlled mode", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useSidebar({ open: true, onOpenChange: onChange }),
+    );
+    act(() => result.current.toggleSidebar());
+    expect(result.current.open).toBe(true);
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/components/Sidebar/useSidebar.ts

@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseSidebarProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function useSidebar({
+  open: controlledOpen,
+  defaultOpen = true,
+  onOpenChange,
+}: UseSidebarProps = {}) {
+  const [open, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  const toggleSidebar = useCallback(() => {
+    setOpen((prev) => !prev);
+  }, [setOpen]);
+
+  return { open, setOpen, toggleSidebar };
+}

package/src/components/Skeleton/Skeleton.native.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from "react";
+import { Animated } from "react-native";
+import { cn } from "../../utils/cn";
+import type { SkeletonProps } from "./Skeleton.types";
+
+type SkeletonNativeProps = SkeletonProps;
+
+function Skeleton({
+  className,
+  ...props
+}: SkeletonNativeProps) {
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.5,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    animation.start();
+
+    return () => animation.stop();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      style={{ opacity }}
+      className={cn("rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  );
+}
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton };
+export type { SkeletonNativeProps };

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Skeleton } from "./Skeleton.web";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  render: () => <Skeleton style={{ width: 200, height: 20 }} />,
+};
+
+export const Card: Story = {
+  render: () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+      <Skeleton
+        style={{ width: 48, height: 48, borderRadius: "50%" }}
+      />
+      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <Skeleton style={{ width: 200, height: 16 }} />
+        <Skeleton style={{ width: 150, height: 16 }} />
+      </div>
+    </div>
+  ),
+};

package/src/components/Skeleton/Skeleton.types.ts

@@ -0,0 +1,6 @@
+export interface SkeletonProps {
+  className?: string;
+  width?: number | string;
+  height?: number | string;
+  borderRadius?: number;
+}

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

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { Skeleton } from "./Skeleton.web";
+
+describe("Skeleton", () => {
+  it("renders a div", () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstChild?.nodeName).toBe("DIV");
+  });
+
+  it("applies animate-pulse class", () => {
+    const { container } = render(<Skeleton />);
+    expect((container.firstChild as HTMLElement).className).toContain("animate-pulse");
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(<Skeleton className="h-10 w-40" />);
+    const el = container.firstChild as HTMLElement;
+    expect(el.className).toContain("h-10");
+    expect(el.className).toContain("w-40");
+  });
+
+  it("forwards ref", () => {
+    let ref: HTMLDivElement | null = null;
+    render(<Skeleton ref={(el) => { ref = el; }} />);
+    expect(ref).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it("passes through HTML attributes", () => {
+    const { container } = render(<Skeleton data-testid="skel" aria-label="loading" />);
+    const el = container.firstChild as HTMLElement;
+    expect(el.getAttribute("data-testid")).toBe("skel");
+    expect(el.getAttribute("aria-label")).toBe("loading");
+  });
+});

package/src/components/Skeleton/Skeleton.web.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+
+const Skeleton = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  );
+});
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton };

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

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

package/src/components/Skeleton/index.ts

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