harebear-ui 0.0.0-stage → 0.2.2

package/package.json

@@ -1,6 +1,121 @@
 {
   "name": "harebear-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.2",
+  "description": "Opinionated, pre-themed shadcn/ui component library for React 19 + Tailwind CSS v4. Admin, data, and AI chat building blocks, ready for agents.",
+  "license": "MIT",
+  "author": "Harrison Milbradt",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HMilbradt/harebear-ui.git"
+  },
+  "homepage": "https://github.com/HMilbradt/harebear-ui#readme",
+  "bugs": "https://github.com/HMilbradt/harebear-ui/issues",
+  "keywords": [
+    "react",
+    "tailwindcss",
+    "shadcn",
+    "radix",
+    "ui",
+    "components",
+    "design-system",
+    "admin",
+    "dashboard",
+    "ai",
+    "chat",
+    "llm",
+    "agents"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./llms.txt": "./llms.txt",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "harebear-ui": "bin/harebear-ui.mjs"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "docs",
+    "skills",
+    "llms.txt",
+    "AGENTS.md"
+  ],
+  "scripts": {
+    "dev": "vite --config playground/vite.config.ts",
+    "gen": "node scripts/gen-index.mjs && biome check --write src/index.ts",
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check .",
+    "format": "biome check --write .",
+    "test": "vitest run",
+    "check": "pnpm lint && pnpm typecheck && pnpm test && pnpm build && publint && attw --pack . --profile esm-only --exclude-entrypoints ./styles.css ./llms.txt",
+    "prepublishOnly": "pnpm check"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.30.3",
+  "engines": {
+    "node": ">=20.19"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.9.0",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/geist-mono": "^5.3.0",
+    "@shadcn/react": "^0.3.1",
+    "@tanstack/react-table": "^9.3.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
+    "lucide-react": "^1.70.0",
+    "radix-ui": "^1.8.1",
+    "react-day-picker": "^10.0.2",
+    "react-resizable-panels": "^4.21.0",
+    "recharts": "^3.10.1",
+    "shiki": "^4.6.0",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.7.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@biomejs/biome": "^2.6.6",
+    "@tailwindcss/vite": "^4.3.5",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.9",
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.3.0",
+    "jsdom": "^31.0.0",
+    "publint": "^0.3.25",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "shadcn": "^4.23.0",
+    "tailwindcss": "^4.3.5",
+    "tsdown": "^0.23.7",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.7",
+    "vitest": "^5.1.0"
+  }
+}

package/skills/harebear-ui/SKILL.md

@@ -0,0 +1,34 @@
+---
+
+name: harebear-ui
+description: Build React UI with the harebear-ui component library (pre-themed shadcn/ui + admin, data table, chart, and AI chat components on Tailwind v4). Use whenever creating or changing UI, pages, layouts, dashboards, tables, forms, or chat interfaces in a project that depends on harebear-ui.
+---
+
+# Building UI with harebear-ui
+
+This project uses `harebear-ui` for all UI. Its theme, tokens, and components are already installed.
+
+## Before writing UI
+
+1. Read the catalog: `node_modules/harebear-ui/docs/COMPONENTS.md`. It lists every export with props and examples.
+2. Pick existing components first. Build new components only by composing harebear-ui parts.
+3. For a whole screen, start from the closest reference screen: admin dashboard, AI chat, data table with detail panel, status home page, or auth (https://github.com/hmilbradt/harebear-ui/tree/main/playground/screens).
+
+## Rules
+
+- Import from the package root: `import { Button, Card, DataTable } from "harebear-ui"`. Never copy component source into the app.
+- Primitives keep shadcn/ui names, parts, and props (Dialog, DropdownMenu, Select, Sidebar, Tabs...).
+- Style only with theme tokens: `bg-background`, `bg-card`, `bg-muted`, `text-foreground`, `text-muted-foreground`, `bg-primary`, `bg-primary-soft text-primary`, `text-success`, `text-warning`, `text-destructive`, `border-border`, `shadow-card`, `rounded-md` (controls), `rounded-xl` (cards). No hex colors, no Tailwind palette colors like `bg-blue-500`, no inline color styles.
+- Status uses a tone prop: `success | warning | danger | info | neutral` (StatusBadge, StatusDot, Timeline, StatusBars, LinkTile).
+- Icons are lucide-react elements passed as nodes: `icon={<UsersIcon />}`. Icon-only buttons need `aria-label`.
+- Compose `className` with `cn()` from harebear-ui.
+- Lay out pages as columns of `Card`s with `gap-5`, page sections with `gap-7`. Use `PageHeader` for page titles and `AppShell` for sidebar apps.
+- DataTable columns: define with `createDataTableColumnHelper<Row>()` at module scope, pass `getRowId`.
+- Chat: `ChatThread` > `ChatMessage role="user" | "assistant"`; render model output inside `Prose`; composer is `PromptInput`; code is `CodeSnippet`; agent steps are `Trace`; clarifying questions are `Questionnaire`.
+- Sign-in and sign-up pages: `AuthLayout` + `LoginForm` / `SignupForm`. Don't hand-build auth forms.
+- Theme: `ThemeProvider` at the root (`accent`, `radius`, `defaultMode`), `ThemeToggle` for the light/dark button. Both modes must work: never style for only one.
+
+## Check your work
+
+- Run the app and look at the screen in light and dark mode.
+- Narrow the viewport to phone width: rows should wrap, tables scroll inside their card, and the sidebar becomes a sheet.