@slugbase/ui 0.0.0

package/dist/theme/resolve-theme.d.ts

@@ -0,0 +1,6 @@
+import type { ResolvedTheme, ThemePreference } from "./theme-types.js";
+/** Maps user preference + system dark mode to an applied `data-theme` value. */
+export declare function resolveTheme(preference: ThemePreference, prefersDark: boolean): ResolvedTheme;
+export declare function readStoredThemePreference(): ThemePreference | null;
+export declare function persistThemePreference(preference: ThemePreference): void;
+//# sourceMappingURL=resolve-theme.d.ts.map

package/dist/theme/resolve-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-theme.d.ts","sourceRoot":"","sources":["../../src/theme/resolve-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEvE,gFAAgF;AAChF,wBAAgB,YAAY,CAC1B,UAAU,EAAE,eAAe,EAC3B,WAAW,EAAE,OAAO,GACnB,aAAa,CAKf;AAED,wBAAgB,yBAAyB,IAAI,eAAe,GAAG,IAAI,CASlE;AAED,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,eAAe,GAAG,IAAI,CAKxE"}

package/dist/theme/resolve-theme.js

@@ -0,0 +1,24 @@
+/** Maps user preference + system dark mode to an applied `data-theme` value. */
+export function resolveTheme(preference, prefersDark) {
+    if (preference === "auto") {
+        return prefersDark ? "dark" : "light";
+    }
+    return preference;
+}
+export function readStoredThemePreference() {
+    if (typeof window === "undefined") {
+        return null;
+    }
+    const stored = window.localStorage.getItem("slugbase-theme-preference");
+    if (stored === "light" || stored === "dark" || stored === "auto") {
+        return stored;
+    }
+    return null;
+}
+export function persistThemePreference(preference) {
+    if (typeof window === "undefined") {
+        return;
+    }
+    window.localStorage.setItem("slugbase-theme-preference", preference);
+}
+//# sourceMappingURL=resolve-theme.js.map

package/dist/theme/resolve-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-theme.js","sourceRoot":"","sources":["../../src/theme/resolve-theme.ts"],"names":[],"mappings":"AAEA,gFAAgF;AAChF,MAAM,UAAU,YAAY,CAC1B,UAA2B,EAC3B,WAAoB;IAEpB,IAAI,UAAU,KAAK,MAAM,EAAE,CAAC;QAC1B,OAAO,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IACxC,CAAC;IACD,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,yBAAyB;IACvC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;IACxE,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACjE,OAAO,MAAM,CAAC;IAChB,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,UAA2B;IAChE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO;IACT,CAAC;IACD,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,2BAA2B,EAAE,UAAU,CAAC,CAAC;AACvE,CAAC"}

package/dist/theme/theme-context.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import { type ResolvedTheme, type ThemePreference } from "./theme-types.js";
+export type ThemeContextValue = {
+    preference: ThemePreference;
+    resolved: ResolvedTheme;
+    setPreference: (next: ThemePreference) => void;
+};
+export type ThemeProviderProps = {
+    children: ReactNode;
+    /** SSR hint before client hydration. */
+    initialPreference?: ThemePreference;
+};
+export declare function ThemeProvider({ children, initialPreference, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+//# sourceMappingURL=theme-context.d.ts.map

package/dist/theme/theme-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-context.d.ts","sourceRoot":"","sources":["../../src/theme/theme-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAC;AAO1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,EAAE,eAAe,CAAC;IAC5B,QAAQ,EAAE,aAAa,CAAC;IACxB,aAAa,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD,CAAC;AAkBF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,eAAe,CAAC;CACrC,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,iBAA4C,GAC7C,EAAE,kBAAkB,2CAuCpB;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}

package/dist/theme/theme-context.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import { DEFAULT_THEME_PREFERENCE, } from "./theme-types.js";
+import { persistThemePreference, readStoredThemePreference, resolveTheme, } from "./resolve-theme.js";
+const ThemeContext = createContext(null);
+function getSystemPrefersDark() {
+    if (typeof window === "undefined") {
+        return true;
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function applyDocumentTheme(resolved) {
+    if (typeof document === "undefined") {
+        return;
+    }
+    document.documentElement.dataset.theme = resolved;
+}
+export function ThemeProvider({ children, initialPreference = DEFAULT_THEME_PREFERENCE, }) {
+    const [preference, setPreferenceState] = useState(() => {
+        return readStoredThemePreference() ?? initialPreference;
+    });
+    const [prefersDark, setPrefersDark] = useState(getSystemPrefersDark);
+    const resolved = useMemo(() => resolveTheme(preference, prefersDark), [preference, prefersDark]);
+    useEffect(() => {
+        applyDocumentTheme(resolved);
+    }, [resolved]);
+    useEffect(() => {
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const onChange = () => {
+            setPrefersDark(media.matches);
+        };
+        media.addEventListener("change", onChange);
+        return () => {
+            media.removeEventListener("change", onChange);
+        };
+    }, []);
+    const setPreference = useCallback((next) => {
+        setPreferenceState(next);
+        persistThemePreference(next);
+    }, []);
+    const value = useMemo(() => ({ preference, resolved, setPreference }), [preference, resolved, setPreference]);
+    return (_jsx(ThemeContext.Provider, { value: value, children: children }));
+}
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) {
+        throw new Error("useTheme must be used within ThemeProvider");
+    }
+    return ctx;
+}
+//# sourceMappingURL=theme-context.js.map

package/dist/theme/theme-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-context.js","sourceRoot":"","sources":["../../src/theme/theme-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,QAAQ,GAET,MAAM,OAAO,CAAC;AACf,OAAO,EACL,wBAAwB,GAGzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,sBAAsB,EACtB,yBAAyB,EACzB,YAAY,GACb,MAAM,oBAAoB,CAAC;AAQ5B,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAEnE,SAAS,oBAAoB;IAC3B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC;AACnE,CAAC;AAED,SAAS,kBAAkB,CAAC,QAAuB;IACjD,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO;IACT,CAAC;IACD,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG,QAAQ,CAAC;AACpD,CAAC;AAQD,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,iBAAiB,GAAG,wBAAwB,GACzB;IACnB,MAAM,CAAC,UAAU,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAkB,GAAG,EAAE;QACtE,OAAO,yBAAyB,EAAE,IAAI,iBAAiB,CAAC;IAC1D,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAErE,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,WAAW,CAAC,EAC3C,CAAC,UAAU,EAAE,WAAW,CAAC,CAC1B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;QAChE,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC,CAAC;QACF,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC3C,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAChD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,IAAqB,EAAE,EAAE;QAC1D,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,EAC/C,CAAC,UAAU,EAAE,QAAQ,EAAE,aAAa,CAAC,CACtC,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CACxE,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,MAAM,GAAG,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;IAChE,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/theme/theme-types.d.ts

@@ -0,0 +1,5 @@
+export type ThemePreference = "light" | "dark" | "auto";
+export type ResolvedTheme = "light" | "dark";
+export declare const THEME_STORAGE_KEY: "slugbase-theme-preference";
+export declare const DEFAULT_THEME_PREFERENCE: ThemePreference;
+//# sourceMappingURL=theme-types.d.ts.map

package/dist/theme/theme-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-types.d.ts","sourceRoot":"","sources":["../../src/theme/theme-types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7C,eAAO,MAAM,iBAAiB,EAAG,2BAAoC,CAAC;AAEtE,eAAO,MAAM,wBAAwB,EAAE,eAAwB,CAAC"}

package/dist/theme/theme-types.js

@@ -0,0 +1,3 @@
+export const THEME_STORAGE_KEY = "slugbase-theme-preference";
+export const DEFAULT_THEME_PREFERENCE = "dark";
+//# sourceMappingURL=theme-types.js.map

package/dist/theme/theme-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-types.js","sourceRoot":"","sources":["../../src/theme/theme-types.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAAG,2BAAoC,CAAC;AAEtE,MAAM,CAAC,MAAM,wBAAwB,GAAoB,MAAM,CAAC"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@slugbase/ui",
+  "version": "0.0.0",
+  "private": false,
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mdg-labs/slugbase.git",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./tailwind": {
+      "types": "./src/tailwind/token-theme.ts",
+      "default": "./src/tailwind/token-theme.ts"
+    },
+    "./styles/colors-and-type.css": "./src/styles/colors-and-type.css"
+  },
+  "scripts": {
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "build": "tsc -p tsconfig.build.json",
+    "test:unit": "vitest run --config vitest.config.ts",
+    "test:integration": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/ibm-plex-sans": "^5.2.8",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.17",
+    "@radix-ui/react-tooltip": "^1.2.10",
+    "lucide-react": "^1.17.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.5.0",
+    "happy-dom": "^20.9.0",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^3.4.17",
+    "vitest": "^4.1.6"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/components/AppShell.spec.tsx

@@ -0,0 +1,28 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AppShell } from "./AppShell.js";
+
+describe("AppShell", () => {
+  it("matches base layout snapshot", () => {
+    const { container } = render(
+      <AppShell
+        sidebar={<div>Sidebar content</div>}
+        topBar={<div>TopBar content</div>}
+      >
+        <p>Content</p>
+      </AppShell>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders sidebar, topbar, and main regions", () => {
+    const { container } = render(
+      <AppShell sidebar={<span>Nav</span>} topBar={<span>Bar</span>}>
+        <p>Main</p>
+      </AppShell>,
+    );
+    expect(container.querySelector('[data-testid="app-shell-sidebar"]')).toBeTruthy();
+    expect(container.querySelector('[data-testid="app-shell-topbar"]')).toBeTruthy();
+    expect(container.querySelector('[data-testid="app-shell-main"]')).toBeTruthy();
+  });
+});

package/src/components/AppShell.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+
+export type AppShellProps = {
+  /** 248px left sidebar content */
+  sidebar: ReactNode;
+  /** 52px fixed-height top bar content */
+  topBar: ReactNode;
+  /** Scrollable main content area */
+  children: ReactNode;
+};
+
+/**
+ * Base signed-in layout shell.
+ * Grid: 248px sidebar | flexible main column with 52px topbar + scrollable content.
+ * Layout is viewport-locked (h-screen, overflow-hidden) - scroll lives inside the
+ * main content area only (spec §9.3.1).
+ */
+export function AppShell({ sidebar, topBar, children }: AppShellProps) {
+  return (
+    <div
+      className="grid h-screen overflow-hidden bg-canvas font-sans text-body text-fg"
+      style={{ gridTemplateColumns: "248px 1fr" }}
+      data-testid="app-shell"
+    >
+      <aside
+        className="flex min-h-0 flex-col overflow-y-auto border-r border-[color:var(--border-subtle)] bg-base"
+        data-testid="app-shell-sidebar"
+      >
+        {sidebar}
+      </aside>
+
+      <div className="flex min-h-0 min-w-0 flex-col overflow-hidden">
+        <header
+          className="flex shrink-0 items-center border-b border-[color:var(--border-subtle)]"
+          style={{ height: 52, background: "color-mix(in srgb, var(--base) 60%, transparent)" }}
+          data-testid="app-shell-topbar"
+        >
+          {topBar}
+        </header>
+        <main
+          className="flex-1 overflow-y-auto bg-canvas p-sp-7"
+          data-testid="app-shell-main"
+        >
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

package/src/components/Badge.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+
+export type BadgeVariant = "accent" | "success" | "warning" | "neutral";
+
+export type BadgeProps = {
+  variant?: BadgeVariant;
+  children: ReactNode;
+  className?: string;
+};
+
+const variantClasses: Record<BadgeVariant, string> = {
+  accent: "bg-accent-subtle text-accent-text",
+  success: "bg-success-subtle text-success-text",
+  warning: "bg-warning-subtle text-warning-text",
+  neutral: "bg-raised-2 text-fg-muted",
+};
+
+/**
+ * Status / plan badge - matches prototype `.badge` pattern.
+ * Variant: accent | success | warning | neutral.
+ */
+export function Badge({
+  variant = "neutral",
+  children,
+  className = "",
+}: BadgeProps) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full font-semibold ${variantClasses[variant]} ${className}`}
+      style={{
+        height: "18px",
+        padding: "0 7px",
+        fontSize: "var(--text-micro)",
+        lineHeight: "var(--lh-micro)",
+        letterSpacing: "0.02em",
+      }}
+    >
+      {children}
+    </span>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,56 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+
+export type ButtonSize = "default" | "sm" | "lg";
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  block?: boolean;
+  children: ReactNode;
+};
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    "border border-transparent bg-accent text-accent-fg font-semibold hover:bg-accent-hover active:bg-accent-active disabled:opacity-50",
+  secondary:
+    "border border-[color:var(--border)] bg-raised text-fg hover:bg-raised-2 hover:border-[color:var(--border-strong)] disabled:opacity-50",
+  ghost:
+    "border border-transparent bg-transparent text-fg-muted hover:bg-raised hover:text-fg disabled:opacity-50",
+  danger:
+    "border border-transparent bg-danger text-danger-fg font-semibold hover:bg-danger-hover disabled:opacity-50",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  default: "h-[34px] px-sp-5",
+  sm: "h-[28px] px-sp-4",
+  lg: "h-[44px] px-sp-6",
+};
+
+const sizeFontStyles: Record<ButtonSize, string> = {
+  default: "var(--text-body)",
+  sm: "var(--text-small)",
+  lg: "var(--text-body-lg)",
+};
+
+export function Button({
+  variant = "primary",
+  size = "default",
+  block = false,
+  className = "",
+  type = "button",
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={`inline-flex items-center justify-center gap-sp-3 rounded-md font-medium transition-colors duration-micro ease-in-out active:translate-y-[0.5px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas disabled:cursor-not-allowed ${sizeClasses[size]} ${variantClasses[variant]}${block ? " w-full" : ""} ${className}`}
+      style={{ fontSize: sizeFontStyles[size], lineHeight: "1" }}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,70 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+
+export type CheckboxProps = {
+  checked?: boolean | "indeterminate";
+  onCheckedChange?: (checked: boolean | "indeterminate") => void;
+  disabled?: boolean;
+  id?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  className?: string;
+};
+
+/**
+ * 3-state checkbox (off / on / indeterminate).
+ * Styled to match prototype `.cb` pattern from app.css.
+ * Uses Radix Checkbox primitive for accessible keyboard + pointer handling.
+ */
+export function Checkbox({
+  checked,
+  onCheckedChange,
+  disabled,
+  id,
+  className = "",
+  ...ariaProps
+}: CheckboxProps) {
+  return (
+    <CheckboxPrimitive.Root
+      id={id}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+      className={`flex-none cursor-pointer rounded-sm bg-canvas transition-[background,border-color] duration-micro ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent ${className}`}
+      style={{
+        width: "17px",
+        height: "17px",
+        border: "1.5px solid var(--border-strong)",
+        display: "grid",
+        placeItems: "center",
+      }}
+      {...(ariaProps["aria-label"] ? { "aria-label": ariaProps["aria-label"] } : {})}
+      {...(ariaProps["aria-labelledby"]
+        ? { "aria-labelledby": ariaProps["aria-labelledby"] }
+        : {})}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-accent-fg">
+        {checked === "indeterminate" ? (
+          <span
+            aria-hidden="true"
+            className="block rounded-[2px] bg-accent-fg"
+            style={{ width: "8px", height: "2px" }}
+          />
+        ) : (
+          <svg
+            aria-hidden="true"
+            width="10"
+            height="10"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}

package/src/components/ColorPicker.spec.tsx

@@ -0,0 +1,53 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ColorPicker, PRESET_COLORS } from "./ColorPicker.js";
+
+const labels = {
+  label: "Color",
+  none: "None",
+};
+
+describe("ColorPicker", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders 16 swatches in a grid", () => {
+    render(<ColorPicker value={null} onChange={vi.fn()} labels={labels} />);
+
+    expect(PRESET_COLORS).toHaveLength(16);
+    expect(screen.getByTestId("color-picker-grid").children).toHaveLength(16);
+  });
+
+  it("selects a swatch and toggles off when clicked again", () => {
+    const onChange = vi.fn();
+
+    render(<ColorPicker value={null} onChange={onChange} labels={labels} />);
+
+    fireEvent.click(screen.getByTestId("color-picker-swatch-7782f7"));
+    expect(onChange).toHaveBeenCalledWith("#7782f7");
+
+    cleanup();
+    onChange.mockClear();
+
+    render(<ColorPicker value="#7782f7" onChange={onChange} labels={labels} />);
+    fireEvent.click(screen.getByTestId("color-picker-swatch-7782f7"));
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it("clears the selected color", () => {
+    const onChange = vi.fn();
+
+    render(<ColorPicker value="#45c98a" onChange={onChange} labels={labels} />);
+
+    fireEvent.click(screen.getByTestId("color-picker-clear"));
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it("hides clear control when no color is selected", () => {
+    render(<ColorPicker value={null} onChange={vi.fn()} labels={labels} />);
+
+    expect(screen.queryByTestId("color-picker-clear")).toBeNull();
+  });
+});

package/src/components/ColorPicker.tsx

@@ -0,0 +1,87 @@
+import { CheckIcon } from "lucide-react";
+
+/** Curated palette — semantic hues + accent variants aligned with design tokens. */
+export const PRESET_COLORS = [
+  "#7782f7",
+  "#45c98a",
+  "#e6b24e",
+  "#f0686b",
+  "#5ba4e6",
+  "#56b6e6",
+  "#e8944a",
+  "#a77bea",
+  "#b178f7",
+  "#f78fb0",
+  "#5fd6a0",
+  "#8a90a0",
+  "#6571ec",
+  "#9aa2fa",
+  "#efc878",
+  "#f48a8c",
+] as const;
+
+export type ColorPickerLabels = {
+  label: string;
+  none: string;
+};
+
+export type ColorPickerProps = {
+  value: string | null;
+  onChange: (color: string | null) => void;
+  labels: ColorPickerLabels;
+  testId?: string;
+};
+
+export function ColorPicker({
+  value,
+  onChange,
+  labels,
+  testId = "color-picker",
+}: ColorPickerProps) {
+  return (
+    <div className="flex flex-col gap-sp-2" data-testid={testId}>
+      <span
+        className="text-fg-muted"
+        style={{ fontSize: "var(--text-small)", lineHeight: "var(--lh-small)" }}
+      >
+        {labels.label}
+      </span>
+      <div className="grid grid-cols-8 gap-sp-3" data-testid={`${testId}-grid`}>
+        {PRESET_COLORS.map((swatch) => (
+          <button
+            key={swatch}
+            type="button"
+            className="relative h-7 w-7 rounded-full transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-[color:var(--accent)] focus:ring-offset-2 focus:ring-offset-[color:var(--overlay)]"
+            style={{ backgroundColor: swatch }}
+            aria-label={swatch}
+            aria-pressed={value === swatch}
+            data-testid={`${testId}-swatch-${swatch.slice(1)}`}
+            onClick={() => {
+              onChange(value === swatch ? null : swatch);
+            }}
+          >
+            {value === swatch && (
+              <CheckIcon
+                size={14}
+                className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white"
+              />
+            )}
+          </button>
+        ))}
+      </div>
+      {value && (
+        <button
+          type="button"
+          className="self-start text-fg-muted transition-colors hover:text-fg"
+          style={{ fontSize: "var(--text-small)" }}
+          data-testid={`${testId}-clear`}
+          onClick={() => {
+            onChange(null);
+          }}
+        >
+          {labels.none}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/ConfirmDialog.spec.tsx

@@ -0,0 +1,44 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ConfirmDialog } from "./ConfirmDialog.js";
+
+function ConfirmHarness() {
+  const [open, setOpen] = useState(false);
+  const onConfirm = vi.fn();
+
+  return (
+    <>
+      <button type="button" onClick={() => { setOpen(true); }}>
+        Open confirm
+      </button>
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Remove member"
+        description="This cannot be undone."
+        confirmLabel="Remove"
+        cancelLabel="Cancel"
+        destructive
+        onConfirm={() => {
+          onConfirm();
+          setOpen(false);
+        }}
+      />
+    </>
+  );
+}
+
+describe("ConfirmDialog", () => {
+  it("supports keyboard-friendly confirm and cancel actions", () => {
+    render(<ConfirmHarness />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Open confirm" }));
+    expect(screen.getByRole("dialog")).toBeTruthy();
+    expect(screen.getByText("Remove member")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+});