@primereact/mcp 11.1.0 → 11.2.0

package/data/llms/tailwind/guides/misc/locale.md

@@ -1,280 +0,0 @@
-# Internationalization and Localization
-
-Translating component messages and configuring regional settings such as date formats and the first day of the week.
-
-## Overview
-
-Components ship with a set of built-in messages such as filter operator labels, month names and ARIA descriptions. These messages live in a locale registry that is shared across PrimeReact, PrimeVue and PrimeNG through the `@primeuix/locale` package, and are re-exported from `@primereact/core/locale`.
-
-English is registered by default, so no configuration is required until another language is needed.
-
-## Import
-
-```js
-import { $t, $l, defineLocale, updateLocale, useLocale, Locale, LocaleService, en } from '@primereact/core/locale';
-```
-
-## Setting the Language
-
-`Locale.use` selects the active language. Every component reading a message re-renders when it changes, so this works both at startup and later in response to a language switcher.
-
-```js
-import { Locale } from '@primereact/core/locale';
-
-Locale.use('de');
-```
-
-Only `en` is built in, so any other language has to be registered first — see [Adding a Language](#adding-a-language) below.
-
-`PrimeReactProvider` also accepts a `locale` prop, which sets the initial language for the components beneath it.
-
-```jsx
-import { PrimeReactProvider } from '@primereact/core';
-
-<PrimeReactProvider locale="de">
-    <App />
-</PrimeReactProvider>;
-```
-
-## Adding a Language
-
-`defineLocale` registers a new language.
-
-```js
-import { defineLocale, Locale } from '@primereact/core/locale';
-
-defineLocale('es', {
-    clear: 'Limpiar',
-    apply: 'Aplicar',
-    accept: 'Sí',
-    reject: 'No',
-    dayNames: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
-    dayNamesShort: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
-    dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
-    monthNames: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
-    monthNamesShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic']
-});
-
-Locale.use('es');
-```
-
-A registered language must be complete. Keys that are left out resolve to `undefined` rather than falling back to English, which renders as an empty label. The practical approach is to spread the built-in English messages and override from there:
-
-```js
-import { defineLocale, en } from '@primereact/core/locale';
-
-defineLocale('es', {
-    ...en,
-    clear: 'Limpiar',
-    apply: 'Aplicar'
-});
-```
-
-The `en` object holds the built-in English messages and is exported for exactly this purpose. Ready-made translations from [PrimeLocale](#ready-made-translations) already cover every key, so spreading is only needed for hand-written translations.
-
-The provider accepts a `locales` map, which registers languages and selects one in a single step. Anything listed here is registered before `locale` is applied.
-
-```jsx
-import { PrimeReactProvider } from '@primereact/core';
-
-<PrimeReactProvider locale="es" locales={{ es: spanishMessages }}>
-    <App />
-</PrimeReactProvider>;
-```
-
-## Updating an Existing Language
-
-`updateLocale` merges new values into a language that is already registered, leaving the remaining keys untouched. It is useful for overriding a handful of labels without redefining a full translation.
-
-```js
-import { updateLocale } from '@primereact/core/locale';
-
-updateLocale('en', {
-    clear: 'Reset',
-    apply: 'Confirm'
-});
-```
-
-If the language does not exist yet, `updateLocale` registers it, behaving like `defineLocale`.
-
-## Reading Messages
-
-### In Components
-
-`useLocale` is the React hook for reading the active locale. It re-renders the calling component when the language changes.
-
-```jsx
-import { useLocale } from '@primereact/core/locale';
-
-function ClearButton() {
-    const { t, lang, messages } = useLocale();
-
-    return <button aria-label={t('clear')}>{t('clear')}</button>;
-}
-```
-
-| Field      | Description                                   |
-| ---------- | --------------------------------------------- |
-| `lang`     | Active language code, such as `en` or `de`.   |
-| `messages` | Full message object of the active language.   |
-| `t`        | Translates a key against the active language. |
-
-Re-rendering on a language change relies on the context published by `PrimeReactProvider`, which applications normally have at their root. A component rendered outside any provider still reads the correct messages on first render, but will not update when the language changes later.
-
-### Outside Components
-
-`$t` performs the same lookup without a React context, which suits utilities, event handlers and module-level code.
-
-```js
-import { $t } from '@primereact/core/locale';
-
-$t('clear'); // 'Clear'
-```
-
-Nested keys use dot notation.
-
-```js
-$t('aria.selectRow'); // 'Row Selected'
-```
-
-Messages containing placeholders accept replacement values. Positional placeholders such as `{0}` are filled from the argument order, while named ones are filled from an object.
-
-```js
-$t('searchMessage', 5); // '5 results are available'
-$t('selectionMessage', 3); // '3 items selected'
-$t('aria.stars', { star: 4 }); // '4 stars'
-```
-
-## Reacting to Language Changes
-
-Language changes emit a `locale:change` event. Components handle this automatically through `useLocale`; the event is only needed for code living outside React, such as syncing a third-party library.
-
-```js
-import { LocaleService } from '@primereact/core/locale';
-
-const onChange = ({ lang }) => console.log('Language is now', lang);
-
-LocaleService.on('locale:change', onChange);
-
-// remove the listener when it is no longer needed
-LocaleService.off('locale:change', onChange);
-```
-
-## Inspecting the Registry
-
-`$l` returns a facade over the registry, which helps when building a language switcher.
-
-```js
-import { $l } from '@primereact/core/locale';
-
-$l().langs; // ['en', 'es']
-$l().get('es'); // message object of the Spanish locale
-```
-
-## Message Keys
-
-Built-in messages are grouped as follows.
-
-| Group                     | Keys                                                                                                                                                                                                                |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Filter operators          | `startsWith`, `contains`, `notContains`, `endsWith`, `equals`, `notEquals`, `noFilter`, `lt`, `lte`, `gt`, `gte`, `dateIs`, `dateIsNot`, `dateBefore`, `dateAfter`                                                  |
-| Filter menu               | `clear`, `apply`, `matchAll`, `matchAny`, `addRule`, `removeRule`                                                                                                                                                   |
-| Actions                   | `accept`, `reject`, `choose`, `upload`, `cancel`, `completed`, `pending`                                                                                                                                            |
-| Dates                     | `dayNames`, `dayNamesShort`, `dayNamesMin`, `monthNames`, `monthNamesShort`, `today`, `weekHeader`, `firstDayOfWeek`, `dateFormat`                                                                                  |
-| Date navigation           | `chooseYear`, `chooseMonth`, `chooseDate`, `prevDecade`, `nextDecade`, `prevYear`, `nextYear`, `prevMonth`, `nextMonth`, `prevHour`, `nextHour`, `prevMinute`, `nextMinute`, `prevSecond`, `nextSecond`, `am`, `pm` |
-| Password strength         | `weak`, `medium`, `strong`, `passwordPrompt`                                                                                                                                                                        |
-| Empty and status messages | `emptyMessage`, `emptyFilterMessage`, `emptySearchMessage`, `emptySelectionMessage`, `searchMessage`, `selectionMessage`                                                                                            |
-| Files                     | `fileSizeTypes`, `fileChosenMessage`, `noFileChosenMessage`                                                                                                                                                         |
-| Regional settings         | `firstDayOfWeek`, `dateFormat`, `showMonthAfterYear`                                                                                                                                                                |
-| Accessibility             | Nested under `aria`, covering screen reader labels such as `aria.selectRow`, `aria.expandRow`, `aria.showFilterMenu`, `aria.zoomImage`, `aria.listLabel` and pagination labels.                                     |
-
-Not every entry is a string. `firstDayOfWeek` is a number, `showMonthAfterYear` is a boolean, and `dayNames`, `monthNames` and `fileSizeTypes` are arrays.
-
-The complete list with default English values is in `packages/@primereact/core/src/locale/defaultLocale.ts`.
-
-## Ready-Made Translations
-
-Writing a translation from scratch is rarely necessary. The community maintained [PrimeLocale](https://github.com/primefaces/primelocale) repository publishes complete translations for 70+ languages, shared across all Prime libraries. Each file covers every built-in message key, so nothing is left resolving to `undefined`.
-
-### Copying a File
-
-Grab the JSON file for the desired language from the repository, for example `tr.json`, and place it in the project.
-
-Each file wraps its messages in a single key named after the language:
-
-```json
-{
-    "tr": {
-        "clear": "Temizle",
-        "apply": "Uygula",
-        "aria": { "selectRow": "Satır Seçildi" }
-    }
-}
-```
-
-That wrapper has to be unwrapped before registering, otherwise every lookup resolves to `undefined`:
-
-```js
-import { defineLocale, Locale } from '@primereact/core/locale';
-import tr from './locales/tr.json';
-
-defineLocale('tr', tr.tr);
-Locale.use('tr');
-```
-
-The same unwrapping applies when the language is registered through the provider:
-
-```jsx
-import { PrimeReactProvider } from '@primereact/core';
-import tr from './locales/tr.json';
-
-<PrimeReactProvider locale="tr" locales={{ tr: tr.tr }}>
-    <App />
-</PrimeReactProvider>;
-```
-
-### Installing the Package
-
-The translations are also published to npm, which avoids maintaining copies by hand.
-
-```bash
-npm install primelocale
-```
-
-```js
-import { defineLocale, Locale } from '@primereact/core/locale';
-import { tr } from 'primelocale/js/tr.js';
-
-defineLocale('tr', tr);
-Locale.use('tr');
-```
-
-The package entry points export the messages directly, so no unwrapping is needed there.
-
-Regional variants are named with an underscore in the package and a hyphen in the JSON files. Brazilian Portuguese is `primelocale/js/pt_BR.js` when imported and `pt-BR.json` when copied.
-
-### Adjusting a Translation
-
-A ready-made translation can be tuned without editing the file, by layering overrides on top of it:
-
-```js
-defineLocale('tr', tr.tr);
-updateLocale('tr', { clear: 'Sıfırla' });
-```
-
-Contributions of new languages and corrections are welcome in the PrimeLocale repository, and benefit every Prime library at once.
-
-## Migrating from v10
-
-The locale helpers previously imported from `primereact/api` have been replaced.
-
-| v10                                    | v11                                                              |
-| -------------------------------------- | ---------------------------------------------------------------- |
-| `locale('de')`                         | `Locale.use('de')`, or the `locale` prop on `PrimeReactProvider` |
-| `addLocale('es', {...})`               | `defineLocale('es', {...})`                                      |
-| `updateLocaleOption(key, value, lang)` | `updateLocale(lang, { key: value })`                             |
-| `updateLocaleOptions({...}, lang)`     | `updateLocale(lang, {...})`                                      |
-| `localeOption(key)`                    | `$t(key)`, or `t(key)` from `useLocale()`                        |
-| `localeOptions(lang)`                  | `$l().get(lang)`, or `messages` from `useLocale()`               |
-
-One behavioural difference is worth noting: locale state is now shared with other Prime libraries in the same application rather than being private to PrimeReact. Setting a language from PrimeReact also affects PrimeVue or PrimeNG components running alongside it.

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.