@wheelhouse/ui 0.1.6 → 0.2.1

package/llms.txt

@@ -4,28 +4,30 @@
 Wheelhouse React component library: Base UI primitives, shadcn-style patterns, Tailwind CSS v4, CVA for variants. Published as ESM with TypeScript declarations (`dist/`).
 
 ## 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`** — components, **blocks** (composed patterns), and `cn` from `src/index.ts` (dev: TS sources; prod: `dist/index.js` + `.d.ts`).
+- **`@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.
+## Stack & peers
+- **`@wheelhouse/tokens`** — CSS variables via `globals.css`.
+- **Runtime (as used):** `class-variance-authority`, `clsx`, `tailwind-merge`, `zod`. **Icons:** `lucide-react` where needed.
+- **Peer dependencies:** `react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4+).
 
-## Peer dependencies (consumers must install)
-`react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4+).
+## Consuming apps
+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, including blocks such as `NavigationPattern1`).
 
-## 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`.
+## 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.
 
-## 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';`
+## Blocks (composed patterns under `src/blocks/`)
+Higher-level layouts built from components — import from `@wheelhouse/ui` like primitives. Source lives next to optional colocated config (nav labels, URLs, menus).
+
+| Block | Export | Source (monorepo) | Docs slug |
+| --- | --- | --- | --- |
+| Navigation — pattern 1 | `NavigationPattern1` | `src/blocks/navigation/pattern-1/pattern-1.tsx` (+ `pattern-1.config.ts` for nav data) | `/docs/blocks/navigation-pattern-1` |
 
-## 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, calendar, card, checkbox, collapsible, command, combobox, context-menu, date-selector, 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, sortable, spinner, status-indicator, switch, tabs, text, textarea, toggle, toggle-group, tooltip

package/package.json

@@ -1,21 +1,29 @@
 {
   "name": "@wheelhouse/ui",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "type": "module",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@fontsource-variable/geist": "^5.2.8",
-    "@phosphor-icons/react": "^2.1.10",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "lucide-react": "^0.469.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "react-day-picker": "^9.14.0",
+    "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 +32,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",
@@ -47,8 +55,8 @@
     "typescript-eslint": "^8.54.0",
     "vite": "^7.2.4",
     "vitest": "^3.0.0",
-    "@wheelhouse/tsconfig": "0.0.0",
-    "@wheelhouse/eslint-config": "0.0.0"
+    "@wheelhouse/eslint-config": "0.0.0",
+    "@wheelhouse/tsconfig": "0.0.0"
   },
   "exports": {
     ".": {

package/src/styles/globals.css

@@ -2,21 +2,14 @@
 @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.
-   
-   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.) */
-@import '@fontsource-variable/geist';
+/* Sans / mono use the system stack (no bundled webfonts). Swap --font-sans / --font-mono in
+   @theme below if you adopt a custom family (e.g. Fontsource or next/font). */
 
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
     --font-heading: var(--font-sans);
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     --color-sidebar-ring: var(--sidebar-ring);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -55,7 +48,7 @@
     --radius-2xl: calc(var(--radius) * 1.8);
     --radius-3xl: calc(var(--radius) * 2.2);
     --radius-4xl: calc(var(--radius) * 2.6);
-    --font-sans: 'Geist Variable', sans-serif;
+    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     --color-warning-foreground: var(--warning-foreground);
     --color-warning: var(--warning);
     --color-info-foreground: var(--info-foreground);
@@ -67,6 +60,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 {