@primereact/mcp 11.0.0 → 11.2.0

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@primereact/mcp",
-  "version": "11.0.0",
+  "version": "11.2.0",
   "author": "PrimeTek Informatics",
   "description": "Model Context Protocol (MCP) server for PrimeReact component library",
   "homepage": "https://primereact.dev",
   "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/primefaces/primereact-nextchapter.git",
+    "directory": "packages/mcp"
+  },
   "bugs": {
     "url": "https://support.primeui.dev"
   },
@@ -50,16 +55,12 @@
   "engines": {
     "node": ">=22.0.0"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/primefaces/primereact-nextchapter.git",
-    "directory": "packages/mcp"
-  },
   "scripts": {
     "build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package",
-    "build:package": "pnpm run build:prebuild && tsup",
+    "build:package": "pnpm run test && tsup",
     "build:prebuild": "node ./scripts/prebuild.mjs",
-    "test": "vitest run --config=./vitest.config.ts",
+    "test": "pnpm run build:prebuild && vitest run --config=./vitest.config.ts",
+    "test:watch": "vitest --config=./vitest.config.ts",
     "test:extracted": "node ./scripts/extracted-smoke.mjs",
     "dev:link": "pnpm link --global && npm link"
   }

package/data/llms/styled/guides/installation/configuration.md

@@ -1,135 +0,0 @@
-# Configuration
-
-Application wide configuration for PrimeReact.
-
-## Provider
-
-Wrap your app with `PrimeReactProvider` in your main file (like `main.tsx` or `App.tsx`). This enables PrimeReact features everywhere in your app:
-
-```tsx showLineNumbers {10, 12}
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import { PrimeReactProvider } from "@primereact/core";
-
-...
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <PrimeReactProvider>
-        <App />
-    </PrimeReactProvider>
-  </StrictMode>,
-)
-
-```
-
-## Theme
-
-Style mode offers theming based on a design token based architecture. See the [styled mode](/docs/theming/styled) documentation for details such as building your own theme.
-
-```tsx full showLineNumbers {2,5-12,16}
-...
-import Aura from '@primeuix/themes/aura';
-import { PrimeReactProvider } from '@primereact/core';
-
-const theme = {
-    preset: Aura,
-    options: {
-        prefix: 'p',
-        darkModeSelector: 'system',
-        cssLayer: false
-    }
-};
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-    <React.StrictMode>
-        <PrimeReactProvider theme={theme}>
-            <App />
-        </PrimeReactProvider>
-    </React.StrictMode>
-);
-```
-
-## Unstyled
-
-Unstyled mode instructs the components not to add any built-in style classes so that they can be styled using custom css or libraries like Tailwind and Bootstrap. Visit Unstyled mode documentation for more information.
-
-```tsx showLineNumbers {6}
-import { PrimeReactProvider } from '@primereact/core';
-...
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-    <React.StrictMode>
-        <PrimeReactProvider unstyled>
-            <App />
-        </PrimeReactProvider>
-    </React.StrictMode>
-);
-```
-
-## PassThrough
-
-Defines the shared pass through properties per component type. Visit the [Pass Through Props](/docs/passthrough) documentation for more information.
-
-```tsx showLineNumbers {4-8,12}
-import { PrimeReactProvider } from '@primereact/core';
-...
-
-const pt = {
-    slider: {
-        handle: { className: 'bg-primary text-primary-contrast' }
-    }
-};
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-    <React.StrictMode>
-        <PrimeReactProvider pt={pt}>
-            <App />
-        </PrimeReactProvider>
-    </React.StrictMode>
-);
-```
-
-## PassThrough Options
-
-Used to configure the `ptOptions` properties of components. The `mergeSections` defines whether the sections from the main configuration gets added and the `mergeProps` controls whether to override or merge the defined props.
-Defaults are `true` for `mergeSections` and `false` for `mergeProps`.
-
-```tsx showLineNumbers {4-7,11}
-import { PrimeReactProvider } from '@primereact/core';
-...
-
-const ptOptions = {
-    mergeSections: true,
-    mergeProps: false
-};
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-    <React.StrictMode>
-        <PrimeReactProvider ptOptions={ptOptions}>
-            <App />
-        </PrimeReactProvider>
-    </React.StrictMode>
-);
-```
-
-## InputVariant
-
-Input fields come in two styles, default is `outlined` with borders around the field whereas `filled` alternative adds a background color to the field.
-Applying `p-variant-filled` to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class.
-Note that in case you add it to the application element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree,
-to resolve this case set inputVariant to `filled` at PrimeReactProvider as well.
-
-```tsx showLineNumbers {6}
-import { PrimeReactProvider } from '@primereact/core';
-...
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-    <React.StrictMode>
-        <PrimeReactProvider inputVariant="filled">
-            <App />
-        </PrimeReactProvider>
-    </React.StrictMode>
-);
-```

package/data/llms/tailwind/guides/theming/guide.md

@@ -1,179 +0,0 @@
-# Theming
-
-Theme PrimeReact's Tailwind components with CSS variables and the tailwindcss-primeui plugin.
-
-## Overview
-
-Like shadcn/ui, the Tailwind components are themed entirely through **CSS variables**, design tokens defined on `:root`. The [`tailwindcss-primeui`](https://github.com/primefaces/tailwindcss-primeui) plugin maps those tokens to Tailwind utilities (`bg-primary`, `text-muted-color`, `border-surface`, …) that every component is built with, so editing a single variable re-themes the whole UI.
-
-## How it works
-
-Two pieces work together:
-
-- **CSS variables**, PrimeUI design tokens (`--p-primary-*`, `--p-surface-*`, and semantic tokens) added to your global stylesheet's `:root`.
-- **tailwindcss-primeui**, a Tailwind plugin that turns those tokens into utility classes (`bg-primary`, `text-surface-500`, `text-color`, `text-muted-color`, `border-surface`, `rounded-border`, …) and a dark-mode variant. Install it during [installation](/docs/tailwind/guides/installation) and import it in your global CSS:
-
-```css title="app/globals.css"
-@import 'tailwindcss';
-
-@import 'tailwindcss-primeui';
-```
-
-## CSS Variables
-
-The PrimeReact registry ships as a `registry:style`, so when you set it up these tokens are written to your global stylesheet. This is the default theme:
-
-```css title="app/globals.css"
-:root {
-    --p-primary-50: oklch(98.5% 0 0);
-    --p-primary-100: oklch(97% 0 0);
-    --p-primary-200: oklch(92.2% 0 0);
-    --p-primary-300: oklch(87% 0 0);
-    --p-primary-400: oklch(70.8% 0 0);
-    --p-primary-500: oklch(55.6% 0 0);
-    --p-primary-600: oklch(43.9% 0 0);
-    --p-primary-700: oklch(37.1% 0 0);
-    --p-primary-800: oklch(26.9% 0 0);
-    --p-primary-900: oklch(20.5% 0 0);
-    --p-primary-950: oklch(14.5% 0 0);
-    --p-surface-0: oklch(100% 0 0);
-    --p-surface-50: oklch(98.5% 0 0);
-    --p-surface-100: oklch(97% 0 0);
-    --p-surface-200: oklch(92.2% 0 0);
-    --p-surface-300: oklch(87% 0 0);
-    --p-surface-400: oklch(70.8% 0 0);
-    --p-surface-500: oklch(55.6% 0 0);
-    --p-surface-600: oklch(43.9% 0 0);
-    --p-surface-700: oklch(37.1% 0 0);
-    --p-surface-800: oklch(26.9% 0 0);
-    --p-surface-900: oklch(20.5% 0 0);
-    --p-surface-950: oklch(14.5% 0 0);
-    --p-content-border-radius: 6px;
-    --p-primary-color: var(--p-primary-500);
-    --p-primary-contrast-color: var(--p-surface-0);
-    --p-primary-hover-color: var(--p-primary-600);
-    --p-primary-active-color: var(--p-primary-700);
-    --p-content-border-color: var(--p-surface-200);
-    --p-content-hover-background: var(--p-surface-100);
-    --p-content-hover-color: var(--p-surface-800);
-    --p-highlight-background: var(--p-primary-50);
-    --p-highlight-color: var(--p-primary-700);
-    --p-highlight-focus-background: var(--p-primary-100);
-    --p-highlight-focus-color: var(--p-primary-800);
-    --p-text-color: var(--p-surface-700);
-    --p-text-hover-color: var(--p-surface-800);
-    --p-text-muted-color: var(--p-surface-500);
-    --p-text-hover-muted-color: var(--p-surface-600);
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --p-primary-color: var(--p-primary-400);
-        --p-primary-contrast-color: var(--p-surface-900);
-        --p-primary-hover-color: var(--p-primary-300);
-        --p-primary-active-color: var(--p-primary-200);
-        --p-content-border-color: var(--p-surface-700);
-        --p-content-hover-background: var(--p-surface-800);
-        --p-content-hover-color: var(--p-surface-0);
-        --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
-        --p-highlight-color: rgba(255, 255, 255, 0.87);
-        --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
-        --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
-        --p-text-color: var(--p-surface-0);
-        --p-text-hover-color: var(--p-surface-0);
-        --p-text-muted-color: var(--p-surface-400);
-        --p-text-hover-muted-color: var(--p-surface-300);
-    }
-}
-```
-
-### Token groups
-
-- **Primary scale**, `--p-primary-50` … `--p-primary-950`, the accent ramp (neutral gray by default).
-- **Surface scale**, `--p-surface-0` … `--p-surface-950`, the neutrals used for backgrounds, borders and text.
-- **Semantic tokens**, resolve to the scales and are what components actually reference: `--p-primary-color`, `--p-primary-contrast-color`, `--p-primary-hover-color`, `--p-primary-active-color`, `--p-text-color`, `--p-text-muted-color`, `--p-content-border-color`, `--p-content-hover-background`, `--p-highlight-background` / `--p-highlight-color`, and `--p-content-border-radius` for rounding.
-
-## Customizing the theme
-
-### Primary color
-
-The default primary ramp is neutral gray. Point it at any palette, for example Tailwind's built-in `blue`, whose tokens are exposed as `--color-*` variables in Tailwind v4:
-
-```css title="app/globals.css"
-:root {
-    --p-primary-50: var(--color-blue-50);
-    --p-primary-100: var(--color-blue-100);
-    --p-primary-200: var(--color-blue-200);
-    --p-primary-300: var(--color-blue-300);
-    --p-primary-400: var(--color-blue-400);
-    --p-primary-500: var(--color-blue-500);
-    --p-primary-600: var(--color-blue-600);
-    --p-primary-700: var(--color-blue-700);
-    --p-primary-800: var(--color-blue-800);
-    --p-primary-900: var(--color-blue-900);
-    --p-primary-950: var(--color-blue-950);
-}
-```
-
-The semantic tokens (`--p-primary-color`, hover, active, contrast) follow the ramp automatically, so every component updates at once.
-
-### Surface color
-
-Remap `--p-surface-*` the same way to change the neutral tone, for example to one of Tailwind's neutral palettes like `zinc` (or `slate`, `stone`, `neutral`). Note `--p-surface-0` is pure white, so map it to `--color-white`:
-
-```css title="app/globals.css"
-:root {
-    --p-surface-0: var(--color-white);
-    --p-surface-50: var(--color-zinc-50);
-    --p-surface-100: var(--color-zinc-100);
-    --p-surface-200: var(--color-zinc-200);
-    --p-surface-300: var(--color-zinc-300);
-    --p-surface-400: var(--color-zinc-400);
-    --p-surface-500: var(--color-zinc-500);
-    --p-surface-600: var(--color-zinc-600);
-    --p-surface-700: var(--color-zinc-700);
-    --p-surface-800: var(--color-zinc-800);
-    --p-surface-900: var(--color-zinc-900);
-    --p-surface-950: var(--color-zinc-950);
-}
-```
-
-### Border radius
-
-`--p-content-border-radius` controls how rounded the components are:
-
-```css title="app/globals.css"
-:root {
-    --p-content-border-radius: 10px;
-}
-```
-
-## Dark mode
-
-By default the dark tokens apply under `@media (prefers-color-scheme: dark)`, following the user's system setting. To toggle dark mode yourself, move the dark overrides into a class selector and add that class to your `<html>` element:
-
-```css title="app/globals.css"
-.dark {
-    --p-primary-color: var(--p-primary-400);
-    --p-primary-contrast-color: var(--p-surface-900);
-    /* …rest of the dark overrides… */
-}
-```
-
-```tsx
-<html className="dark">...</html>
-```
-
-## Using tokens in your own markup
-
-Because the tokens are exposed as utilities by `tailwindcss-primeui`, you can style your own elements to match the components:
-
-```tsx
-<div className="bg-surface-0 text-color border border-surface rounded-border p-4">
-    <span className="text-primary">Themed with the same tokens</span>
-</div>
-```
-
-## Reference
-
-- [tailwindcss-primeui](https://github.com/primefaces/tailwindcss-primeui), the Tailwind plugin and the full list of utilities it generates.