@elabs-ai/components-ui 4.0.0

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,109 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type HTMLAttributes,
+} from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+export const Sheet = SheetPrimitive.Root;
+export const SheetTrigger = SheetPrimitive.Trigger;
+export const SheetClose = SheetPrimitive.Close;
+export const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = forwardRef<
+  ElementRef<typeof SheetPrimitive.Overlay>,
+  ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(function SheetOverlay({ className, ...props }, ref) {
+  return (
+    <SheetPrimitive.Overlay
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-50 bg-foreground/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 overscroll-contain bg-card p-6 text-card-foreground shadow-ring-lg transition duration-slow ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
+  {
+    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 max-w-sm border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+      },
+    },
+    defaultVariants: { side: "right" },
+  },
+);
+
+export interface SheetContentProps
+  extends
+    ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+export const SheetContent = forwardRef<
+  ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(function SheetContent({ side = "right", className, children, ...props }, ref) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        ref={ref}
+        className={cn(sheetVariants({ side }), className)}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close
+          className="absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label="Close"
+        >
+          <X className="size-4" />
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+});
+
+export function SheetHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5", className)} {...props} />;
+}
+export function SheetFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+export const SheetTitle = forwardRef<
+  ElementRef<typeof SheetPrimitive.Title>,
+  ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(function SheetTitle({ className, ...props }, ref) {
+  return (
+    <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+  );
+});
+export const SheetDescription = forwardRef<
+  ElementRef<typeof SheetPrimitive.Description>,
+  ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(function SheetDescription({ className, ...props }, ref) {
+  return (
+    <SheetPrimitive.Description
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});

package/src/components/sidebar/index.ts

@@ -0,0 +1,27 @@
+export {
+  Sidebar,
+  SidebarProvider,
+  SidebarTrigger,
+  SidebarRail,
+  SidebarInset,
+  SidebarInput,
+  SidebarHeader,
+  SidebarFooter,
+  SidebarSeparator,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+  sidebarMenuButtonVariants,
+  useSidebar,
+} from "./sidebar";

package/src/components/sidebar/sidebar.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Home, Inbox, Search, Settings } from "lucide-react";
+import { Sidebar } from "./sidebar";
+import {
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "./sidebar";
+
+const meta = {
+  title: "Layout/Sidebar",
+  component: Sidebar,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof Sidebar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items = [
+  { title: "Home", icon: Home },
+  { title: "Inbox", icon: Inbox },
+  { title: "Search", icon: Search },
+  { title: "Settings", icon: Settings },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="h-[480px]">
+      <SidebarProvider>
+        <Sidebar collapsible="icon">
+          <SidebarHeader className="px-3 py-2 font-semibold">Brand UI</SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Platform</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {items.map((item, i) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton isActive={i === 0} tooltip={item.title}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+        <SidebarInset>
+          <header className="flex h-14 items-center gap-2 border-b px-4">
+            <SidebarTrigger />
+            <span className="text-body font-medium">Dashboard</span>
+          </header>
+          <div className="p-6 text-body text-muted-foreground">
+            Main content. Press ⌘/Ctrl+B to toggle.
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  ),
+};

package/src/components/sidebar/sidebar.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { Sidebar, SidebarInset, SidebarProvider } from "./sidebar";
+
+function renderFrame() {
+  return render(
+    <SidebarProvider>
+      <Sidebar>
+        <span>chrome</span>
+      </Sidebar>
+      <SidebarInset>
+        <p>canvas</p>
+      </SidebarInset>
+    </SidebarProvider>,
+  );
+}
+
+describe("SidebarProvider", () => {
+  /**
+   * Regression lock. The wrapper spans the whole app frame — chrome AND content —
+   * so painting the CHROME's ink on it leaks that ink onto the canvas: every
+   * element that inherits its colour (an outline Button, a list row) renders in
+   * sidebar ink on a page background. That is invisible only while a theme gives
+   * `--sidebar` and `--background` the same polarity; a theme with dark chrome
+   * under a light canvas renders near-white text on white.
+   */
+  it("paints the app frame with the page ink, never the chrome ink", () => {
+    const { container } = renderFrame();
+    const wrapper = container.querySelector('[data-slot="sidebar-wrapper"]');
+    expect(wrapper).not.toBeNull();
+    expect(wrapper?.className).toContain("text-foreground");
+    expect(wrapper?.className).not.toContain("text-sidebar-foreground");
+  });
+
+  it("keeps the chrome ink on the sidebar itself", () => {
+    renderFrame();
+    // The desktop sidebar root owns the chrome colour pair, so the chrome is
+    // still correct without the wrapper carrying it.
+    const chrome = screen.getByText("chrome").closest('[class*="text-sidebar-foreground"]');
+    expect(chrome).not.toBeNull();
+  });
+});