@elabs-ai/components-ui 4.0.0

package/src/components/resizable/resizable.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./resizable";
+const meta = {
+  title: "Layout/Resizable",
+  component: ResizablePanelGroup,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof ResizablePanelGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <ResizablePanelGroup direction="horizontal" className="h-48 max-w-xl rounded-lg border">
+      <ResizablePanel defaultSize={40} className="flex items-center justify-center p-4 text-body">
+        List
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel
+        defaultSize={60}
+        className="flex items-center justify-center p-4 text-body text-muted-foreground"
+      >
+        Detail
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};

package/src/components/resizable/resizable.tsx

@@ -0,0 +1,40 @@
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { cn } from "../../lib/cn";
+
+export function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      className={cn("flex size-full data-[panel-group-direction=vertical]:flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+export const ResizablePanel = ResizablePrimitive.Panel;
+
+export function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & { withHandle?: boolean }) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+          <GripVertical className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+}

package/src/components/reveal/index.ts

@@ -0,0 +1,7 @@
+export {
+  Reveal,
+  RevealGroup,
+  revealVariants,
+  type RevealProps,
+  type RevealGroupProps,
+} from "./reveal";

package/src/components/reveal/reveal.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { useState } from "react";
+import { Reveal, RevealGroup } from "./reveal";
+import { Button } from "../button/button";
+import { Card, CardContent } from "../card/card";
+
+const meta = {
+  title: "Core/Reveal",
+  component: Reveal,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+  argTypes: {
+    appear: {
+      description: "Entrance animation direction or style.",
+      control: { type: "select" },
+      options: ["up", "down", "left", "right", "zoom", "fade"],
+      table: { category: "Appearance" },
+    },
+    speed: {
+      description: "Animation duration rung — maps to the gated motion token.",
+      control: { type: "radio" },
+      options: ["fast", "base", "slow"],
+      table: { category: "Appearance" },
+    },
+    delayMs: {
+      description: "Animation delay in ms (RevealGroup sets this per child to stagger).",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Extra Tailwind classes merged via cn().",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Reveal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ROWS = ["Connectors", "Pipelines", "Datasets", "Dashboards", "Alerts"];
+
+function StaggerDemo() {
+  const [run, setRun] = useState(0);
+  return (
+    <div className="flex w-80 flex-col gap-4">
+      <div className="flex justify-end">
+        <Button size="sm" variant="ghost" onClick={() => setRun((n) => n + 1)}>
+          Replay
+        </Button>
+      </div>
+      <RevealGroup key={run} className="flex flex-col gap-2" appear="up" staggerMs={60}>
+        {ROWS.map((row) => (
+          <Card key={row} interactive>
+            <CardContent className="p-3 text-body">{row}</CardContent>
+          </Card>
+        ))}
+      </RevealGroup>
+    </div>
+  );
+}
+
+/** Staggered list entrance — hit Replay (or flip the Motion toolbar) to compare. */
+export const Default: Story = {
+  render: () => <StaggerDemo />,
+  play: async ({ canvas }) => {
+    // All children are cloned + rendered (presence, not immediate visibility —
+    // staggered items sit at opacity 0 during their delay via fill-mode-both).
+    await expect(await canvas.findByText("Connectors")).toBeInTheDocument();
+    await expect(await canvas.findByText("Alerts")).toBeInTheDocument();
+  },
+};
+
+/** The directional + zoom variants. */
+export const Directions: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-3">
+      {(["up", "down", "left", "right", "zoom", "fade"] as const).map((appear) => (
+        <Reveal
+          key={appear}
+          appear={appear}
+          className="bg-surface flex h-20 w-24 items-center justify-center rounded-md border text-meta"
+        >
+          {appear}
+        </Reveal>
+      ))}
+    </div>
+  ),
+};

package/src/components/reveal/reveal.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Reveal, RevealGroup } from "./reveal";
+
+describe("Reveal", () => {
+  it("renders children with the gated entrance classes", () => {
+    render(<Reveal data-testid="r">hello</Reveal>);
+    const el = screen.getByTestId("r");
+    expect(el).toHaveTextContent("hello");
+    expect(el.className).toContain("animate-in");
+    expect(el.className).toContain("duration-slow"); // gated duration utility (default speed)
+  });
+
+  it("applies a delay when delayMs is set", () => {
+    render(
+      <Reveal data-testid="r" delayMs={120}>
+        x
+      </Reveal>,
+    );
+    expect(screen.getByTestId("r").style.animationDelay).toBe("120ms");
+  });
+});
+
+describe("RevealGroup", () => {
+  it("clones children in place (no wrapper) with staggered delays", () => {
+    render(
+      <RevealGroup staggerMs={50}>
+        <span data-testid="a">a</span>
+        <span data-testid="b">b</span>
+        <span data-testid="c">c</span>
+      </RevealGroup>,
+    );
+    const a = screen.getByTestId("a");
+    const b = screen.getByTestId("b");
+    const c = screen.getByTestId("c");
+    // Children keep their own tag (cloned in place, no wrapper div).
+    expect(a.tagName).toBe("SPAN");
+    expect(a.className).toContain("animate-in");
+    expect(a.style.animationDelay).toBe("0ms");
+    expect(b.style.animationDelay).toBe("50ms");
+    expect(c.style.animationDelay).toBe("100ms");
+  });
+});

package/src/components/reveal/reveal.tsx

@@ -0,0 +1,95 @@
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type CSSProperties,
+  type HTMLAttributes,
+  type ReactElement,
+} from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/cn";
+
+/**
+ * Entrance-animation classes (tw-animate-css), gated by the motion system: the
+ * `duration-*` utility feeds `--tw-duration` (= the gated `--t-*`), so the
+ * reveal slows to ~0 when motion is reduced/off. `fill-mode-both` holds the
+ * start state through any stagger delay so items don't flash in early.
+ */
+export const revealVariants = cva("animate-in fill-mode-both", {
+  variants: {
+    appear: {
+      // Travel ~24px (slide-*-6): below ~16px a slide reads as a flicker/pop, not
+      // trackable motion — distance, not duration, is what makes it feel smooth.
+      fade: "fade-in",
+      up: "fade-in slide-in-from-bottom-6",
+      down: "fade-in slide-in-from-top-6",
+      left: "fade-in slide-in-from-right-6",
+      right: "fade-in slide-in-from-left-6",
+      zoom: "fade-in zoom-in-95",
+    },
+    speed: {
+      fast: "duration-fast ease-entrance",
+      base: "duration-base ease-entrance",
+      slow: "duration-slow ease-entrance",
+    },
+  },
+  defaultVariants: { appear: "up", speed: "slow" },
+});
+
+export interface RevealProps
+  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof revealVariants> {
+  /** Animation delay in ms (RevealGroup sets this per child to stagger). */
+  delayMs?: number;
+}
+
+/**
+ * Animates its content in on mount (fade + directional slide/zoom). Gated by the
+ * motion system — no animation when motion is reduced/off. For a list/grid, use
+ * {@link RevealGroup} to stagger children.
+ */
+export const Reveal = forwardRef<HTMLDivElement, RevealProps>(function Reveal(
+  { className, appear, speed, delayMs, style, ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(revealVariants({ appear, speed }), className)}
+      style={delayMs ? { animationDelay: `${delayMs}ms`, ...style } : style}
+      {...props}
+    />
+  );
+});
+
+export interface RevealGroupProps
+  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof revealVariants> {
+  /** Delay added per successive child, in ms. */
+  staggerMs?: number;
+}
+
+type RevealableChild = ReactElement<{ className?: string; style?: CSSProperties }>;
+
+/**
+ * Staggers an entrance across direct children. Clones each child to add the
+ * reveal classes + an incremental `animation-delay` — no wrapper elements, so it
+ * is safe inside flex/grid layouts. Remount it (e.g. via a changing `key`) to
+ * replay. Gated by the motion system.
+ */
+export const RevealGroup = forwardRef<HTMLDivElement, RevealGroupProps>(function RevealGroup(
+  { children, className, appear, speed, staggerMs = 60, ...props },
+  ref,
+) {
+  return (
+    <div ref={ref} className={className} {...props}>
+      {Children.map(children, (child, index) => {
+        if (!isValidElement(child)) return child;
+        const el = child as RevealableChild;
+        return cloneElement(el, {
+          className: cn(revealVariants({ appear, speed }), el.props.className),
+          style: { animationDelay: `${index * staggerMs}ms`, ...el.props.style },
+        });
+      })}
+    </div>
+  );
+});

package/src/components/revision-timeline/index.ts

@@ -0,0 +1,10 @@
+export {
+  RevisionTimeline,
+  revisionTimelineVariants,
+  laneColor,
+  type Revision,
+  type RevisionEdge,
+  type RevisionBranch,
+  type RevisionTimelineProps,
+  type RevisionTimelineDensity,
+} from "./revision-timeline";