feat: first take on table component

packages/ui-react/.storybook/style.css

@@ -5,5 +5,7 @@
   html {
     /* Use a bold color to clearly show cases where we've forgotten to set text color. */
     color: #ff00ff;
+
+    @apply font-sans;
   }
 }

packages/ui-react/package.json

@@ -30,15 +30,16 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.0",
-    "@tailwindcss/vite": "^4.1.7",
+    "@base-ui-components/react": "1.0.0-beta.1",
+    "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.511.0",
+    "lucide-react": "^0.525.0",
     "react": "^19.1.0",
-    "sonner": "^2.0.3",
-    "tailwind-merge": "^3.3.0",
-    "tailwindcss": "^4.1.7"
+    "sonner": "^2.0.6",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.11"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^8.6.14",
@@ -49,16 +50,16 @@
     "@storybook/react": "8.6.14",
     "@storybook/react-vite": "8.6.14",
     "@storybook/test": "8.6.14",
-    "@tailwindcss/cli": "^4.1.7",
-    "@types/react": "^19.1.4",
-    "@vitest/browser": "^3.1.3",
-    "@vitest/coverage-v8": "^3.1.3",
+    "@tailwindcss/cli": "^4.1.11",
+    "@types/react": "^19.1.8",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "copyfiles": "^2.4.1",
-    "playwright": "^1.52.0",
+    "playwright": "^1.53.2",
     "prop-types": "15.8.1",
     "storybook": "8.6.14",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
-    "vitest": "^3.1.3"
+    "vitest": "^3.2.4"
   }
 }

packages/ui-react/src/components/button/button.stories.tsx

@@ -22,6 +22,12 @@ export const Contained = {
   },
 };
 
+// <Button
+//   variant="contained"
+// >
+
+// </Button>
+
 export const Text = {
   args: {
     variant: "text",

packages/ui-react/src/components/button/button.tsx

@@ -14,14 +14,23 @@ const buttonVariants = cva(
   {
     variants: {
       color: {
+        gray: `
+          [--btn-text:var(--color-gray-800)]
+          [--btn-border:var(--color-gray-400)]
+          [--btn-bg:var(--color-gray-200)]
+          [--btn-bg-hover:var(--color-gray-4300)]
+          [--btn-bg-active:var(--color-gray-400)]
+
+          [--btn-bg-text-hover:var(--color-gray-200)]
+          [--btn-bg-text-active:var(--color-gray-300)]
+        `,
         blue: `
           [--btn-text:var(--color-white)]
           [--btn-border:var(--color-blue)]
           [--btn-bg:var(--color-blue)]
           [--btn-bg-hover:var(--color-blue-hover)]
           [--btn-bg-active:var(--color-blue-active)]
 
-          [--btn-text-border:var(--color-blue-600)]
           [--btn-bg-text-hover:var(--color-bluegray-100)]
           [--btn-bg-text-active:var(--color-bluegray-200)]
         `,
@@ -32,7 +41,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-orange-hover)]
           [--btn-bg-active:var(--color-orange-active)]
 
-          [--btn-text-border:var(--color-orange)]
           [--btn-bg-text-hover:var(--color-orange-100)]
           [--btn-bg-text-active:var(--color-orange-200)]
         `,
@@ -43,7 +51,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-red-hover)]
           [--btn-bg-active:var(--color-red-active)]
 
-          [--btn-text-border:var(--color-red)]
           [--btn-bg-text-hover:var(--color-red-100)]
           [--btn-bg-text-active:var(--color-red-200)]
         `,
@@ -54,7 +61,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-trackergreen-hover)]
           [--btn-bg-active:var(--color-trackergreen-active)]
 
-          [--btn-text-border:var(--color-trackergreen)]
           [--btn-bg-text-hover:var(--color-trackergreen-100)]
           [--btn-bg-text-active:var(--color-trackergreen-200)]
         `,
@@ -65,7 +71,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-discovererblue-hover)]
           [--btn-bg-active:var(--color-discovererblue-active)]
 
-          [--btn-text-border:var(--color-discovererblue)]
           [--btn-bg-text-hover:var(--color-discovererblue-100)]
           [--btn-bg-text-active:var(--color-discovererblue-200)]
         `,
@@ -76,7 +81,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-adventurerorange-hover)]
           [--btn-bg-active:var(--color-adventurerorange-active)]
 
-          [--btn-text-border:var(--color-adventurerorange)]
           [--btn-bg-text-hover:var(--color-adventurerorange-100)]
           [--btn-bg-text-active:var(--color-adventurerorange-200)]
         `,
@@ -87,7 +91,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-challengerpink-hover)]
           [--btn-bg-active:var(--color-challengerpink-active)]
 
-          [--btn-text-border:var(--color-challengerpink)]
           [--btn-bg-text-hover:var(--color-challengerpink-100)]
           [--btn-bg-text-active:var(--color-challengerpink-200)]
         `,
@@ -98,7 +101,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-roveryellow-hover)]
           [--btn-bg-active:var(--color-roveryellow-active)]
 
-          [--btn-text-border:var(--color-roveryellow)]
           [--btn-bg-text-hover:var(--color-roveryellow-100)]
           [--btn-bg-text-active:var(--color-roveryellow-200)]
         `,
@@ -129,13 +131,30 @@ const buttonVariants = cva(
       size: {
         medium: "text-base px-4 h-10 rounded-lg",
         small: "text-sm px-3 h-8 rounded-md",
+        "tiny-icon": "text-sm p-1 size-6 rounded-md",
       },
     },
     defaultVariants: {
       color: "blue",
       variant: "contained",
       size: "medium",
     },
+    compoundVariants: [
+      {
+        color: "gray",
+        variant: "text",
+        class: `
+          text-(--btn-text)
+        `,
+      },
+      {
+        color: "gray",
+        variant: "outlined",
+        class: `
+          text-(--btn-text)
+        `,
+      },
+    ],
   },
 );
 

packages/ui-react/src/components/card/card.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, Preview } from "@storybook/react";
+import { Card } from "./card.js";
+
+export default {
+  title: "Components/Card",
+  component: Card,
+} satisfies Meta;
+
+export const Simple = {
+  args: {
+    children: "Card Content",
+  },
+} satisfies Preview;

packages/ui-react/src/components/card/card.tsx

@@ -0,0 +1,41 @@
+import { mergeProps, useRender } from "@base-ui-components/react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+
+const cardVariants = cva(
+  `
+    p-4
+    border
+    rounded-lg
+    text-gray-dark
+  `,
+  {
+    variants: {
+      variant: {
+        light: "bg-gray-100 border-gray-300",
+        medium: "bg-gray-200 border-gray-300",
+      },
+    },
+    defaultVariants: {
+      variant: "light",
+    },
+  },
+);
+
+export type Props = useRender.ComponentProps<"div"> &
+  VariantProps<typeof cardVariants>;
+
+function Card(props: Props) {
+  const { render = <div />, className, variant, ...otherProps } = props;
+
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: cn(cardVariants({ variant }), className),
+  };
+
+  return useRender({
+    render,
+    props: mergeProps(defaultProps, otherProps),
+  });
+}
+
+export { Card };

packages/ui-react/src/components/menu/Docs.mdx

@@ -0,0 +1,14 @@
+import { Meta, Primary, Controls } from '@storybook/addon-docs';
+import stories from './menu.stories'
+
+<Meta of={stories} />
+
+# Menu
+
+The Menu component is used to display a list of options when a button or other
+trigger element is clicked. It extends the [Base UI Menu
+component](https://base-ui.com/react/components/menu).
+
+<Primary />
+<Controls />
+

packages/ui-react/src/components/menu/menu.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, Preview } from "@storybook/react";
+import { InfoIcon } from "lucide-react";
+import { Button } from "../button/button.js";
+import * as Menu from "./menu.js";
+
+export default {
+  title: "Components/Menu",
+  component: Menu.Root,
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-40 max-w-lg">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta;
+
+export const Simple = {
+  args: {
+    children: (
+      <>
+        <Menu.Trigger render={<Button>Open Menu</Button>} />
+        <Menu.Positioner>
+          <Menu.Item>Option 1</Menu.Item>
+          <Menu.Item>Option 2</Menu.Item>
+          <Menu.Separator />
+          <Menu.Item>Option 3</Menu.Item>
+        </Menu.Positioner>
+      </>
+    ),
+  },
+} satisfies Preview;
+
+export const Nested = {
+  args: {
+    children: (
+      <>
+        <Menu.Trigger render={<Button>Open Menu</Button>} />
+        <Menu.Positioner>
+          <Menu.Item>Option 1</Menu.Item>
+          <Menu.Item>Option 2</Menu.Item>
+          <Menu.Separator />
+
+          <Menu.SubmenuRoot>
+            <Menu.SubmenuTrigger
+              render={<Menu.Item icon={<InfoIcon />}>Submenu</Menu.Item>}
+            />
+            <Menu.Positioner>
+              <Menu.Item>Option 1</Menu.Item>
+              <Menu.Item>Option 2</Menu.Item>
+            </Menu.Positioner>
+          </Menu.SubmenuRoot>
+        </Menu.Positioner>
+      </>
+    ),
+  },
+} satisfies Preview;