Extract bordered list into UI List

Documents and data requests duplicated the same card and
row chrome. A shared List primitive keeps those surfaces
consistent across the portal.

Signed-off-by: Émile Ré <emile@probo.com>

packages/ui/src/v2/List/List.stories.tsx

@@ -0,0 +1,73 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Badge } from "../Badge/Badge";
+import { Text } from "../typography/Text";
+
+import { List } from "./List";
+import { ListItem } from "./ListItem";
+import { ListItemContent } from "./ListItemContent";
+import { ListSkeleton } from "./ListSkeleton";
+
+const entries = [
+  { title: "Information Security Policy", meta: "Policy" },
+  { title: "Access Control Procedure", meta: "Procedure" },
+  { title: "Vendor Risk Assessment", meta: "Report" },
+] as const;
+
+export default {
+  title: "v2/List",
+  component: List,
+  render: () => (
+    <div className="w-96">
+      <List>
+        {entries.map(entry => (
+          <ListItem key={entry.title}>
+            <ListItemContent>
+              <Text size={2} weight="medium" color="neutral" highContrast>
+                {entry.title}
+              </Text>
+              <Text size={1} color="gold">
+                {entry.meta}
+              </Text>
+            </ListItemContent>
+            <Badge color="neutral" variant="soft">
+              View
+            </Badge>
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  ),
+} satisfies Meta<typeof List>;
+
+type Story = StoryObj<typeof List>;
+
+export const Playground: Story = {};
+
+export const Skeleton: Story = {
+  render: () => (
+    <div className="w-96">
+      <ListSkeleton count={3} />
+    </div>
+  ),
+};

packages/ui/src/v2/List/List.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import type { ComponentProps } from "react";
+
+import { list } from "./variants";
+
+export type ListProps = ComponentProps<"ul">;
+
+// Bordered list surface for divided rows (documents, data requests, …). Pair
+// with ListItem / ListItemContent; use ListSkeleton while loading.
+export function List(props: ListProps) {
+  const { className, ...rest } = props;
+  const { root } = list();
+
+  return <ul className={root({ className })} {...rest} />;
+}

packages/ui/src/v2/List/ListItem.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import type { ComponentProps } from "react";
+
+import { list } from "./variants";
+
+export type ListItemProps = ComponentProps<"li">;
+
+// One divided row inside a List. Put leading chrome, ListItemContent, and
+// trailing actions as children.
+export function ListItem(props: ListItemProps) {
+  const { className, ...rest } = props;
+  const { item } = list();
+
+  return <li className={item({ className })} {...rest} />;
+}

packages/ui/src/v2/List/ListItemContent.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import type { ComponentProps } from "react";
+
+import { list } from "./variants";
+
+export type ListItemContentProps = ComponentProps<"div">;
+
+// Flexible primary column inside a ListItem (title + metadata stack).
+export function ListItemContent(props: ListItemContentProps) {
+  const { className, ...rest } = props;
+  const { content } = list();
+
+  return <div className={content({ className })} {...rest} />;
+}

packages/ui/src/v2/List/ListItemSkeleton.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import type { ComponentProps } from "react";
+
+import { list } from "./variants";
+
+export type ListItemSkeletonProps = Omit<ComponentProps<"li">, "children">;
+
+// Loading placeholder paired with ListItem: a pulse bar that keeps the row
+// dividers of a List.
+export function ListItemSkeleton(props: ListItemSkeletonProps) {
+  const { className, ...rest } = props;
+  const { skeletonItem } = list();
+
+  return <li className={skeletonItem({ className })} aria-hidden {...rest} />;
+}

packages/ui/src/v2/List/ListSkeleton.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import type { ComponentProps } from "react";
+
+import { ListItemSkeleton } from "./ListItemSkeleton";
+import { list } from "./variants";
+
+export type ListSkeletonProps = Omit<ComponentProps<"ul">, "children"> & {
+  // Number of pulse rows to render inside the list surface.
+  count?: number;
+};
+
+// Loading placeholder paired with List: the bordered surface filled with
+// ListItemSkeleton rows. Imports only variants + ListItemSkeleton so it stays
+// out of any interactive List consumer graph.
+export function ListSkeleton(props: ListSkeletonProps) {
+  const { count = 3, className, ...rest } = props;
+  const rows = Array.from({ length: count }, (_, index) => index);
+  const { root } = list();
+
+  return (
+    <ul className={root({ className })} {...rest}>
+      {rows.map(row => (
+        <ListItemSkeleton key={row} />
+      ))}
+    </ul>
+  );
+}

packages/ui/src/v2/List/variants.ts

@@ -0,0 +1,32 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { tv } from "tailwind-variants/lite";
+
+// Bordered list surface: a soft sand card of divided rows, with a flexible
+// primary column for title + metadata. Border treatment matches Card `soft`.
+export const list = tv({
+  slots: {
+    root: "list-none overflow-hidden rounded-4 border border-sand-a3 bg-sand-1",
+    item: "flex items-center gap-4 border-b border-sand-a3 px-4 py-3 last:border-b-0",
+    content: "flex min-w-0 flex-1 flex-col gap-0.5",
+    skeletonItem: "h-16 animate-pulse border-b border-sand-a3 bg-sand-2 last:border-b-0",
+  },
+});