@elabs-ai/components-ui 4.0.0

package/src/components/attribution-panel/index.ts

@@ -0,0 +1,3 @@
+export { AttributionPanel, ATTRIBUTIONS, CATEGORY_LABEL } from "./attribution-panel";
+export type { AttributionPanelProps } from "./attribution-panel";
+export type { Attribution, AttributionCategory } from "./attribution-types";

package/src/components/avatar/avatar.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+const meta = {
+  title: "Display/Avatar",
+  component: Avatar,
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      description:
+        "Extra Tailwind classes merged via cn() on the avatar root (controls size/shape).",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="" alt="" />
+      <AvatarFallback>MR</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+/** Larger avatar via className. */
+export const Large: Story = {
+  render: () => (
+    <Avatar className="size-16">
+      <AvatarImage src="" alt="" />
+      <AvatarFallback>AB</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+/** Image avatar — fallback only shows while image loads or if it fails. */
+export const WithImage: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
+      <AvatarFallback>SC</AvatarFallback>
+    </Avatar>
+  ),
+};

package/src/components/avatar/avatar.test.tsx

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Avatar, AvatarFallback } from "./avatar";
+describe("Avatar", () => {
+  it("renders the fallback", () => {
+    render(
+      <Avatar>
+        <AvatarFallback>MR</AvatarFallback>
+      </Avatar>,
+    );
+    expect(screen.getByText("MR")).toBeInTheDocument();
+  });
+});

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../lib/cn";
+
+export const Avatar = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(function Avatar({ className, ...props }, ref) {
+  return (
+    <AvatarPrimitive.Root
+      ref={ref}
+      className={cn("relative flex size-9 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  );
+});
+export const AvatarImage = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Image>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(function AvatarImage({ className, ...props }, ref) {
+  return (
+    <AvatarPrimitive.Image
+      ref={ref}
+      className={cn(
+        "aspect-square size-full animate-in fade-in duration-base ease-entrance",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+export const AvatarFallback = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Fallback>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(function AvatarFallback({ className, ...props }, ref) {
+  return (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+});

package/src/components/avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar, AvatarImage, AvatarFallback } from "./avatar";

package/src/components/badge/badge.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Badge } from "./badge";
+
+const meta = {
+  title: "Core/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  args: { children: "Badge" },
+  argTypes: {
+    variant: {
+      description: "Visual style / semantic tone of the badge.",
+      control: { type: "select" },
+      options: ["default", "secondary", "outline", "success", "warning", "destructive", "info"],
+      table: { category: "Appearance" },
+    },
+    children: {
+      description: "Badge label content.",
+      control: "text",
+      table: { category: "Content" },
+    },
+    className: {
+      description: "Extra Tailwind classes merged via cn().",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Statuses: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge>Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="destructive">Error</Badge>
+      <Badge variant="info">Info</Badge>
+    </div>
+  ),
+};

package/src/components/badge/badge.test.tsx

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Badge } from "./badge";
+
+describe("Badge", () => {
+  it("renders content", () => {
+    render(<Badge>New</Badge>);
+    expect(screen.getByText("New")).toBeInTheDocument();
+  });
+});

package/src/components/badge/badge.tsx

@@ -0,0 +1,28 @@
+import { type HTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/cn";
+
+export const badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-meta font-medium 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",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "text-foreground",
+        success: "border-transparent bg-success text-success-foreground",
+        warning: "border-transparent bg-warning text-warning-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground",
+        info: "border-transparent bg-info text-info-foreground",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+export interface BadgeProps
+  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

package/src/components/badge/index.ts

@@ -0,0 +1 @@
+export { Badge, badgeVariants, type BadgeProps } from "./badge";

package/src/components/bento-grid/bento-grid.stories.tsx

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { BentoGrid, BentoGridItem } from "./bento-grid";
+
+const meta = {
+  title: "Layout/BentoGrid",
+  component: BentoGrid,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof BentoGrid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Tile({ title, body }: { title: string; body?: string }) {
+  return (
+    <div className="flex h-full min-w-0 flex-col p-5">
+      <h3 className="text-subtitle font-medium text-foreground">{title}</h3>
+      {body ? <p className="mt-1 min-w-0 text-body text-muted-foreground">{body}</p> : null}
+    </div>
+  );
+}
+
+/**
+ * A 6-tile overview: one hero (2×2, gradient wash) + five supporting tiles.
+ *
+ * The grid rests FLAT — no tile carries an elevation at rest, so the sheet reads
+ * as one plane. Hover a tile and it alone lifts to `shadow-lg`.
+ */
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <BentoGrid>
+        <BentoGridItem size="hero">
+          <Tile
+            title="Revenue"
+            body="Up 24% this quarter — the headline the team opens the dashboard for. Hover any tile: it lifts, the rest stay flat."
+          />
+        </BentoGridItem>
+        <BentoGridItem size="sm">
+          <Tile title="Active users" body="12,480" />
+        </BentoGridItem>
+        <BentoGridItem size="sm">
+          <Tile title="Churn" body="1.2%" />
+        </BentoGridItem>
+        <BentoGridItem size="md">
+          <Tile title="Pipeline" body="38 deals in flight across 4 stages" />
+        </BentoGridItem>
+        <BentoGridItem size="sm">
+          <Tile title="NPS" body="62" />
+        </BentoGridItem>
+        <BentoGridItem size="sm">
+          <Tile title="Open tickets" body="7" />
+        </BentoGridItem>
+      </BentoGrid>
+    </div>
+  ),
+};
+
+/**
+ * Clickable tiles via the stretched-link pattern: an inner `<a className="absolute
+ * inset-0">` makes the whole tile a single link, and `interactive` gives it a
+ * pointer cursor + a `focus-within` ring (keyboard-visible).
+ */
+export const Interactive: Story = {
+  render: () => (
+    <div className="p-6">
+      <BentoGrid>
+        <BentoGridItem size="hero" interactive>
+          <a href="#revenue" aria-label="Revenue" className="absolute inset-0 z-30" />
+          <Tile title="Revenue →" body="The whole tile is one link (stretched inner anchor)." />
+        </BentoGridItem>
+        <BentoGridItem interactive>
+          <a href="#users" aria-label="Users" className="absolute inset-0 z-30" />
+          <Tile title="Users →" body="12,480" />
+        </BentoGridItem>
+        <BentoGridItem interactive>
+          <a href="#churn" aria-label="Churn" className="absolute inset-0 z-30" />
+          <Tile title="Churn →" body="1.2%" />
+        </BentoGridItem>
+        <BentoGridItem size="md" interactive>
+          <a href="#pipeline" aria-label="Pipeline" className="absolute inset-0 z-30" />
+          <Tile title="Pipeline →" body="38 deals" />
+        </BentoGridItem>
+      </BentoGrid>
+    </div>
+  ),
+};
+
+/**
+ * The cursor-following spotlight is OPT-IN. Set `spotlight` on the `BentoGrid`
+ * to enable it for every tile; a tile's own `spotlight` prop still wins, so one
+ * tile can opt back out. Suppressed entirely under OS reduced-motion — the hover
+ * elevation carries the interaction on its own there.
+ */
+export const Spotlight: Story = {
+  render: () => (
+    <div className="p-6">
+      <BentoGrid spotlight>
+        <BentoGridItem size="hero">
+          <Tile
+            title="Revenue"
+            body="A primary-tinted glow follows the cursor across the tile, on top of the hover lift."
+          />
+        </BentoGridItem>
+        <BentoGridItem>
+          <Tile title="Active users" body="12,480" />
+        </BentoGridItem>
+        <BentoGridItem>
+          <Tile title="Churn" body="1.2%" />
+        </BentoGridItem>
+        <BentoGridItem size="md" spotlight={false}>
+          <Tile title="Opted out" body="spotlight={false} — lifts on hover, no glow." />
+        </BentoGridItem>
+      </BentoGrid>
+    </div>
+  ),
+};
+
+/** Explicit `span` overrides the size presets for bespoke layouts. */
+export const ExplicitSpans: Story = {
+  render: () => (
+    <div className="p-6">
+      <BentoGrid>
+        <BentoGridItem span={{ col: 3, row: 1 }}>
+          <Tile title="Wide banner" body="span={{ col: 3 }}" />
+        </BentoGridItem>
+        <BentoGridItem span={{ col: 1, row: 2 }}>
+          <Tile title="Tall rail" body="span={{ row: 2 }}" />
+        </BentoGridItem>
+        <BentoGridItem>
+          <Tile title="A" />
+        </BentoGridItem>
+        <BentoGridItem>
+          <Tile title="B" />
+        </BentoGridItem>
+        <BentoGridItem>
+          <Tile title="C" />
+        </BentoGridItem>
+      </BentoGrid>
+    </div>
+  ),
+};
+
+/** Edge states: a very long unbroken string (must not overflow) and a per-tile spotlight opt-in. */
+export const EdgeStates: Story = {
+  render: () => (
+    <div className="p-6">
+      <BentoGrid>
+        <BentoGridItem size="md">
+          <Tile
+            title="Long content"
+            body="supercalifragilisticexpialidocious-antidisestablishmentarianism-pneumonoultramicroscopicsilicovolcanoconiosis"
+          />
+        </BentoGridItem>
+        <BentoGridItem spotlight>
+          <Tile title="Spotlight" body="spotlight — on one tile only" />
+        </BentoGridItem>
+        <BentoGridItem>
+          <Tile title="Plain" />
+        </BentoGridItem>
+      </BentoGrid>
+    </div>
+  ),
+};

package/src/components/bento-grid/bento-grid.test.tsx

@@ -0,0 +1,119 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { BentoGrid, BentoGridItem } from "./bento-grid";
+
+describe("BentoGrid", () => {
+  it("renders a grid container with its children", () => {
+    render(
+      <BentoGrid data-testid="grid">
+        <BentoGridItem>A</BentoGridItem>
+        <BentoGridItem>B</BentoGridItem>
+      </BentoGrid>,
+    );
+    const grid = screen.getByTestId("grid");
+    expect(grid).toBeInTheDocument();
+    expect(grid.className).toMatch(/grid/);
+    expect(screen.getByText("A")).toBeInTheDocument();
+    expect(screen.getByText("B")).toBeInTheDocument();
+  });
+});
+
+describe("BentoGridItem", () => {
+  it("applies the hero size as a 2x2 span", () => {
+    render(
+      <BentoGridItem size="hero" data-testid="item">
+        hero
+      </BentoGridItem>,
+    );
+    const item = screen.getByTestId("item");
+    expect(item.style.gridColumn).toContain("span 2");
+    expect(item.style.gridRow).toContain("span 2");
+  });
+
+  it("lets an explicit span override the size preset", () => {
+    render(
+      <BentoGridItem size="sm" span={{ col: 3 }} data-testid="item">
+        wide
+      </BentoGridItem>,
+    );
+    const item = screen.getByTestId("item");
+    expect(item.style.gridColumn).toContain("span 3");
+    // size sm had row 1 → no row span emitted
+    expect(item.style.gridRow).toBe("");
+  });
+
+  it("omits the spotlight overlay by default and renders it when opted in", () => {
+    const { rerender } = render(<BentoGridItem data-testid="item">x</BentoGridItem>);
+    expect(screen.queryByTestId("bento-spotlight")).toBeNull();
+
+    rerender(
+      <BentoGridItem data-testid="item" spotlight>
+        x
+      </BentoGridItem>,
+    );
+    expect(screen.getByTestId("bento-spotlight")).toBeInTheDocument();
+  });
+
+  it("inherits the grid's spotlight opt-in, and a tile's own prop wins", () => {
+    render(
+      <BentoGrid spotlight>
+        <BentoGridItem data-testid="inherited">a</BentoGridItem>
+        <BentoGridItem data-testid="opted-out" spotlight={false}>
+          b
+        </BentoGridItem>
+      </BentoGrid>,
+    );
+    expect(screen.getByTestId("inherited").querySelector("[data-testid=bento-spotlight]")).not.toBe(
+      null,
+    );
+    expect(
+      screen.getByTestId("opted-out").querySelector("[data-testid=bento-spotlight]"),
+    ).toBeNull();
+  });
+
+  it("rests flat and lifts to a visible elevation on hover", () => {
+    render(<BentoGridItem data-testid="item">x</BentoGridItem>);
+    const item = screen.getByTestId("item");
+    // No resting elevation — the Card `shadow-sm` is overridden down to none...
+    expect(item.className).toMatch(/(?:^|\s)shadow-none(?:\s|$)/);
+    expect(item.className).not.toMatch(/(?:^|\s)shadow-sm(?:\s|$)/);
+    // ...and the hover state reaches a clearly readable rung of the ONE ramp.
+    expect(item.className).toMatch(/hover:shadow-xl/);
+    // The black-ink shadow all but vanishes on a dark ground, so the hover edge is
+    // the channel that carries the lift there — it must ride the base, not the
+    // `interactive` variant (a plain, non-clickable tile lifts too). It is the
+    // soft `ring/40` tint, never the hard `border-strong` outline.
+    expect(item.className).toMatch(/hover:border-ring\/40/);
+    expect(item.className).not.toMatch(/hover:border-border-strong/);
+    // ~4px of travel, neutralized (not dropped) under reduced motion.
+    expect(item.className).toMatch(/hover:-translate-y-1/);
+    expect(item.className).toMatch(/motion-reduce:hover:translate-y-0/);
+    // Smoothness comes from the arrival curve, not from a longer duration.
+    expect(item.className).toMatch(/transition-\[translate,box-shadow,border-color\]/);
+    expect(item.className).toMatch(/ease-entrance/);
+  });
+
+  it("supports the stretched-link pattern with a focus-within ring when interactive", () => {
+    render(
+      <BentoGridItem size="hero" interactive data-testid="item">
+        <a href="#go" aria-label="go" className="absolute inset-0" />
+        content
+      </BentoGridItem>,
+    );
+    // The tile stays a div; the inner anchor is the focusable element.
+    const item = screen.getByTestId("item");
+    expect(item.tagName).toBe("DIV");
+    expect(item.className).toMatch(/focus-within:ring/);
+    expect(screen.getByRole("link", { name: "go" })).toBeInTheDocument();
+  });
+
+  it("hero tiles carry the gradient emphasis wash", () => {
+    render(
+      <BentoGridItem size="hero" data-testid="item">
+        hero
+      </BentoGridItem>,
+    );
+    expect(screen.getByTestId("item").className).toMatch(/from-primary/);
+  });
+});