@wheelhouse/ui 0.1.6 → 0.2.0

package/llms.txt

@@ -5,27 +5,22 @@ Wheelhouse React component library: Base UI primitives, shadcn-style patterns, T
 
 ## Package entry points (`package.json` → `exports`)
 - **`@wheelhouse/ui`** — components and `cn` from `src/index.ts` (dev: TS sources; prod: `dist/index.js` + `.d.ts`).
-- **`@wheelhouse/ui/globals.css`** — single CSS entry apps should import for tokens + Tailwind + theme wiring (`src/styles/globals.css`).
+- **`@wheelhouse/ui/globals.css`** — CSS entry for tokens, Tailwind, and theme wiring (`src/styles/globals.css`).
 
-## Dependencies (relevant to agents)
-- **`@wheelhouse/tokens`** — CSS variables; pulled in via `globals.css` (`@import '@wheelhouse/tokens'`).
-- **Styling stack in `globals.css`:** tokens, Tailwind, `tw-animate-css`, `shadcn/tailwind.css`, Geist Variable font (see file comments if you move font loading to apps).
-- **Runtime:** `class-variance-authority`, `clsx`, `tailwind-merge`, `zod` (as used by components).
-- **Icons:** `@phosphor-icons/react` where needed.
-
-## Peer dependencies (consumers must install)
-`react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4+).
-
-## Source layout
-- `src/components/` — components; `src/components/index.ts` re-exports; feature folders (e.g. `button/`).
-- `src/lib/utils.ts` — `cn()` helper (Tailwind class merging).
-- `src/styles/globals.css` — app-facing stylesheet; Tailwind `@theme` maps semantic tokens to CSS variables from `@wheelhouse/tokens`.
+## Stack & peers
+- **`@wheelhouse/tokens`** — CSS variables via `globals.css`.
+- **Runtime (as used):** `class-variance-authority`, `clsx`, `tailwind-merge`, `zod`. **Icons:** `@phosphor-icons/react` where needed.
+- **Peer dependencies:** `react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4+).
 
 ## Consuming apps
-1. Import CSS: `@import '@wheelhouse/ui/globals.css';`
-2. With Tailwind v4, add `@source` to scan published classes (see `README.md` — path to `node_modules/@wheelhouse/ui/dist`).
-3. Import components: `import { Button } from '@wheelhouse/ui';`
+1. `@import '@wheelhouse/ui/globals.css';`
+2. With Tailwind v4, `@source` the published bundle (see `README.md`).
+3. `import { Button } from '@wheelhouse/ui'` (and other named exports).
+
+## Full documentation (LLM-friendly)
+Canonical narrative, examples, and props live in the **Wheelhouse docs** app (`apps/docs` in this monorepo). When deployed, it exposes `/llms.txt` (page index), `/llms-full.txt` (concatenated markdown), and `/llms-raw.mdx/...` (per-page markdown). Use your docs base URL or run the docs app locally — this file is only a short offline pointer.
 
-## Components
+## Component modules (barrels under `src/components/`)
+Named exports are grouped by folder. Alphabetical list of barrels re-exported from `@wheelhouse/ui`:
 
-- `Button`: TODO - figure out docs for each component
+accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, button-group, card, checkbox, collapsible, command, combobox, context-menu, dialog, direction, drawer, dropdown-menu, empty, field, filters, frame, hover-card, input, input-group, item, kbd, label, menubar, native-select, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, slider, sonner, spinner, switch, tabs, text, textarea, toggle, toggle-group, tooltip

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wheelhouse/ui",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "type": "module",
   "private": false,
   "publishConfig": {
@@ -8,14 +8,19 @@
   },
   "dependencies": {
     "@fontsource-variable/geist": "^5.2.8",
+    "@fontsource-variable/geist-mono": "^5.2.7",
     "@phosphor-icons/react": "^2.1.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "react-resizable-panels": "^4.9.0",
     "shadcn": "^4.1.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
     "zod": "^3.25.76",
-    "@wheelhouse/tokens": "0.1.2"
+    "@wheelhouse/tokens": "0.1.3"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.0.0",
@@ -24,16 +29,16 @@
     "tailwindcss": ">=4.0.0"
   },
   "devDependencies": {
-    "@storybook/react": "^10.0.0",
     "@base-ui/react": "^1.3.0",
     "@eslint/js": "^9.39.2",
+    "@storybook/react": "^10.0.0",
     "@tailwindcss/vite": "^4.1.18",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@turbo/gen": "^2.8.1",
     "@types/node": "^25.1.0",
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",

package/src/styles/globals.css

@@ -2,21 +2,22 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 @import 'shadcn/tailwind.css';
-/* Geist Variable is loaded here because --font-sans references it directly in the @theme
-   block below. Keeping the font and its token together prevents silent fallback to
-   sans-serif in apps that forget to import the font separately.
+/* Geist Variable / Geist Mono Variable are loaded here because --font-sans and --font-mono
+   reference them in @theme below. Keeping fonts and tokens together prevents silent fallback
+   to system fonts in apps that forget to import the faces separately.
    
    To move this to individual apps:
-   1. Remove this import
-   2. Remove @fontsource-variable/geist from packages/ui/package.json dependencies
-   3. Add @fontsource-variable/geist to each app's package.json
-   4. Import it in each app's entry point (layout.tsx, preview.tsx, etc.) */
+   1. Remove these imports
+   2. Remove @fontsource-variable/geist (and geist-mono) from packages/ui/package.json
+   3. Add the same packages to each app and import them in each app's CSS entry */
 @import '@fontsource-variable/geist';
+@import '@fontsource-variable/geist-mono';
 
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
     --font-heading: var(--font-sans);
+    --font-mono: 'Geist Mono Variable', ui-monospace, monospace;
     --color-sidebar-ring: var(--sidebar-ring);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -67,6 +68,8 @@
     --text-base--line-height: calc(1.5 / 0.9375);
     --text-sm: 0.8125rem;
     --text-sm--line-height: calc(1.25 / 0.8125);
+    --text-xxs: 0.625rem;
+    --text-xxs--line-height: calc(1 / 0.625);
 }
 
 @layer base {