base-themes 0.1.0

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "base-themes",
+  "private": false,
+  "version": "0.1.0",
+  "description": "Themeable Base UI React components with Bento, shadcn, and neo brutalism styles.",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist/base-themes.js",
+    "dist/base-themes.css",
+    "dist/types",
+    "public/previews",
+    "registry",
+    "skills/base-themes/SKILL.md",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/lib.d.ts",
+      "import": "./dist/base-themes.js"
+    },
+    "./styles.css": "./dist/base-themes.css",
+    "./registry.json": "./registry/registry.json",
+    "./skill": "./skills/base-themes/SKILL.md"
+  },
+  "types": "./dist/types/lib.d.ts",
+  "module": "./dist/base-themes.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:docs && npm run build:types && npm run build:lib",
+    "build:docs": "tsc -b && vite build",
+    "build:types": "tsc -p tsconfig.lib.json",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "lint": "eslint .",
+    "registry:check": "node scripts/validate-registry.mjs",
+    "prepack": "npm run registry:check && npm run lint && npm run build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.5.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.16.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.12.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@base-ui/react": "^1.5.0",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  }
+}

package/registry/registry.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "base-themes",
+  "homepage": "https://base-ui.com/",
+  "dependencies": ["@base-ui/react", "clsx", "lucide-react"],
+  "style": {
+    "tokens": "src/styles/tokens.css",
+    "global": "src/index.css",
+    "default": "bento",
+    "variants": ["bento", "shadcn", "neo-brutalism"]
+  },
+  "components": [
+    { "name": "accordion", "title": "Accordion", "files": ["src/components/ui/Accordion.tsx", "src/components/ui/Accordion.css"] },
+    { "name": "alert-dialog", "title": "Alert Dialog", "files": ["src/components/ui/AlertDialog.tsx", "src/components/ui/AlertDialog.css"] },
+    { "name": "autocomplete", "title": "Autocomplete", "files": ["src/components/ui/Autocomplete.tsx", "src/components/ui/Autocomplete.css", "src/components/ui/Combobox.css"] },
+    { "name": "avatar", "title": "Avatar", "files": ["src/components/ui/Avatar.tsx", "src/components/ui/Avatar.css"] },
+    { "name": "button", "title": "Button", "files": ["src/components/ui/Button.tsx", "src/components/ui/Button.css"] },
+    { "name": "checkbox", "title": "Checkbox", "files": ["src/components/ui/Checkbox.tsx", "src/components/ui/Checkbox.css"] },
+    { "name": "checkbox-group", "title": "Checkbox Group", "files": ["src/components/ui/CheckboxGroup.tsx", "src/components/ui/Checkbox.css"] },
+    { "name": "collapsible", "title": "Collapsible", "files": ["src/components/ui/Collapsible.tsx", "src/components/ui/Collapsible.css"] },
+    { "name": "combobox", "title": "Combobox", "files": ["src/components/ui/Combobox.tsx", "src/components/ui/Combobox.css"] },
+    { "name": "context-menu", "title": "Context Menu", "files": ["src/components/ui/ContextMenu.tsx", "src/components/ui/ContextMenu.css", "src/components/ui/Menu.css"] },
+    { "name": "csp-provider", "title": "CSP Provider", "files": ["src/components/ui/CspProvider.tsx"] },
+    { "name": "dialog", "title": "Dialog", "files": ["src/components/ui/Dialog.tsx", "src/components/ui/Dialog.css"] },
+    { "name": "direction-provider", "title": "Direction Provider", "files": ["src/components/ui/DirectionProvider.tsx", "src/components/ui/useDirection.ts"] },
+    { "name": "drawer", "title": "Drawer", "files": ["src/components/ui/Drawer.tsx", "src/components/ui/Drawer.css"] },
+    { "name": "field", "title": "Field", "files": ["src/components/ui/Field.tsx", "src/components/ui/Field.css"] },
+    { "name": "fieldset", "title": "Fieldset", "files": ["src/components/ui/Fieldset.tsx", "src/components/ui/Fieldset.css"] },
+    { "name": "form", "title": "Form", "files": ["src/components/ui/Form.tsx", "src/components/ui/Form.css"] },
+    { "name": "input", "title": "Input", "files": ["src/components/ui/Input.tsx", "src/components/ui/Input.css"] },
+    { "name": "menu", "title": "Menu", "files": ["src/components/ui/Menu.tsx", "src/components/ui/Menu.css"] },
+    { "name": "menubar", "title": "Menubar", "files": ["src/components/ui/Menubar.tsx", "src/components/ui/Menubar.css", "src/components/ui/Menu.css"] },
+    { "name": "meter", "title": "Meter", "files": ["src/components/ui/Meter.tsx", "src/components/ui/Meter.css"] },
+    { "name": "navigation-menu", "title": "Navigation Menu", "files": ["src/components/ui/NavigationMenu.tsx", "src/components/ui/NavigationMenu.css"] },
+    { "name": "number-field", "title": "Number Field", "files": ["src/components/ui/NumberField.tsx", "src/components/ui/NumberField.css"] },
+    { "name": "otp-field", "title": "OTP Field", "files": ["src/components/ui/OtpField.tsx", "src/components/ui/OtpField.css"] },
+    { "name": "popover", "title": "Popover", "files": ["src/components/ui/Popover.tsx", "src/components/ui/Popover.css"] },
+    { "name": "preview-card", "title": "Preview Card", "files": ["src/components/ui/PreviewCard.tsx", "src/components/ui/PreviewCard.css"] },
+    { "name": "progress", "title": "Progress", "files": ["src/components/ui/Progress.tsx", "src/components/ui/Progress.css"] },
+    { "name": "radio", "title": "Radio", "files": ["src/components/ui/Radio.tsx", "src/components/ui/RadioGroup.css"] },
+    { "name": "radio-group", "title": "Radio Group", "files": ["src/components/ui/RadioGroup.tsx", "src/components/ui/RadioGroup.css"] },
+    { "name": "scroll-area", "title": "Scroll Area", "files": ["src/components/ui/ScrollArea.tsx", "src/components/ui/ScrollArea.css"] },
+    { "name": "select", "title": "Select", "files": ["src/components/ui/Select.tsx", "src/components/ui/Select.css"] },
+    { "name": "separator", "title": "Separator", "files": ["src/components/ui/Separator.tsx", "src/components/ui/Separator.css"] },
+    { "name": "slider", "title": "Slider", "files": ["src/components/ui/Slider.tsx", "src/components/ui/Slider.css"] },
+    { "name": "switch", "title": "Switch", "files": ["src/components/ui/Switch.tsx", "src/components/ui/Switch.css"] },
+    { "name": "tabs", "title": "Tabs", "files": ["src/components/ui/Tabs.tsx", "src/components/ui/Tabs.css"] },
+    { "name": "toast", "title": "Toast", "files": ["src/components/ui/Toast.tsx", "src/components/ui/Toast.css", "src/components/ui/useToastManager.ts"] },
+    { "name": "toggle", "title": "Toggle", "files": ["src/components/ui/Toggle.tsx", "src/components/ui/ToggleGroup.css"] },
+    { "name": "toggle-group", "title": "Toggle Group", "files": ["src/components/ui/ToggleGroup.tsx", "src/components/ui/ToggleGroup.css"] },
+    { "name": "toolbar", "title": "Toolbar", "files": ["src/components/ui/Toolbar.tsx", "src/components/ui/Toolbar.css"] },
+    { "name": "tooltip", "title": "Tooltip", "files": ["src/components/ui/Tooltip.tsx", "src/components/ui/Tooltip.css"] }
+  ],
+  "blocks": [
+    { "name": "dashboard-shell", "title": "Dashboard Shell", "route": "/blocks", "components": ["button", "progress", "meter"] },
+    { "name": "settings-form", "title": "Settings Form", "route": "/blocks", "components": ["fieldset", "field", "switch", "button"] }
+  ],
+  "pages": [
+    { "name": "components", "route": "/components/button" },
+    { "name": "blocks", "route": "/blocks" },
+    { "name": "themes", "route": "/themes" },
+    { "name": "installation", "route": "/docs/installation" }
+  ]
+}

package/skills/base-themes/SKILL.md

@@ -0,0 +1,107 @@
+---
+name: base-themes
+description: Install and extend the Base Themes React component kit built on Base UI primitives, with Bento, shadcn, and neo brutalism styles, blocks, theme tokens, and registry metadata. Use when adding Base Themes components, blocks, custom themes, or installation guidance to a React app.
+---
+
+# Base Themes
+
+## Quick Start
+
+Install the package and peer dependencies in the target React app:
+
+```bash
+npm install base-themes @base-ui/react react react-dom
+```
+
+Import the styles once:
+
+```tsx
+import 'base-themes/styles.css'
+```
+
+Use a packaged component:
+
+```tsx
+import { Button, Select } from 'base-themes'
+
+export function Example() {
+  return (
+    <div data-style="bento" data-theme="light">
+      <Button>Save changes</Button>
+      <Select
+        id="density"
+        label="Density"
+        defaultValue="comfortable"
+        items={{ compact: 'Compact', comfortable: 'Comfortable', spacious: 'Spacious' }}
+      />
+    </div>
+  )
+}
+```
+
+For source-copy installs, copy the component wrappers and styles:
+
+```bash
+cp -R src/components/ui ./target-app/src/components/ui
+cp -R src/styles ./target-app/src/styles
+```
+
+Import the tokens once from app CSS:
+
+```css
+@import './styles/tokens.css';
+```
+
+## Workflows
+
+### Add A Component
+
+1. Check `registry/registry.json` for the component entry.
+2. Copy every file listed in the entry's `files` array.
+3. Ensure `src/styles/tokens.css`, `src/styles/shadcn.css`, and `src/styles/neo-brutalism.css` are imported by the target app when source-copying.
+4. Install dependencies from the registry `dependencies` array.
+5. Import the component from `src/components/ui`.
+
+### Add A Block
+
+1. Open `registry/registry.json` and find the block under `blocks`.
+2. Copy the components listed in the block's `components` array.
+3. Recreate the block layout from `/blocks` or adapt it into the target route.
+4. Keep block styles token-based; avoid hard-coded one-off colors.
+
+### Customize Theme
+
+Override variables in `src/styles/tokens.css`, or add style-specific overrides under `[data-style='shadcn']` and `[data-style='neo-brutalism']`:
+
+```css
+:root {
+  --bg: #f8fafc;
+  --surface: #ffffff;
+  --text-strong: #111827;
+  --accent: #f97316;
+}
+
+[data-theme='dark'] {
+  --bg: #0b1120;
+  --surface: #111827;
+  --text-strong: #f1f5f9;
+  --accent: #fb923c;
+}
+```
+
+## Verification
+
+Run these checks after changing components, registry, blocks, or theme tokens:
+
+```bash
+node scripts/validate-registry.mjs
+npm run lint
+npm run build
+```
+
+Use the docs app for manual verification:
+
+- `/components/button` for component pages
+- `/blocks` for block examples
+- `/themes` for token customization
+- `/docs/installation` for install instructions