@primereact/mcp 11.0.0-rc.2

package/data/llms/headless/components/checkbox.md

@@ -0,0 +1,184 @@
+# useCheckbox
+
+Hooks that manage checkbox and checkbox group state, indeterminate logic, and ARIA attributes.
+
+```tsx
+'use client';
+import { Check } from '@primeicons/react/check';
+import { useCheckbox } from '@primereact/headless/checkbox';
+
+export default function BasicDemo() {
+    const { rootProps, inputProps, boxProps, indicatorProps } = useCheckbox({ defaultChecked: true });
+
+    return (
+        <div className="flex justify-center">
+            <div className="flex items-center gap-2">
+                <div
+                    {...rootProps}
+                    className="relative inline-flex items-center has-[input:focus-visible]:outline-1 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-primary has-[input:focus-visible]:outline rounded"
+                >
+                    <input
+                        {...inputProps}
+                        value={inputProps.value as string}
+                        id="basic-cb"
+                        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer appearance-none m-0 p-0 border border-transparent rounded"
+                    />
+                    <div
+                        {...boxProps}
+                        className="flex items-center justify-center w-5 h-5 rounded-sm border-2 data-checked:bg-primary data-checked:border-primary data-unchecked:border-gray-300 data-unchecked:hover:border-primary"
+                    >
+                        <span {...indicatorProps} className="data-unchecked:hidden">
+                            <Check className="w-3 h-3 text-primary-contrast" />
+                        </span>
+                    </div>
+                </div>
+                <label htmlFor="basic-cb" className="cursor-pointer select-none text-sm">
+                    Remember me
+                </label>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useCheckbox } from '@primereact/headless/checkbox';
+```
+
+```tsx
+const { rootProps, inputProps, boxProps, indicatorProps, state } = useCheckbox({
+    defaultChecked: true
+});
+
+<div {...rootProps}>
+    <input {...inputProps} className="sr-only" />
+    <div {...boxProps}>{state.checked && <span {...indicatorProps}></span>}</div>
+</div>;
+```
+
+`useCheckbox` manages checked and indeterminate state for a single checkbox, while `useCheckboxGroup` manages a shared value array across many. See [Primitive](/docs/primitive/components/checkbox) for a component-based API.
+
+## Features
+
+- **Composable parts**, spreads props onto `root`, `input`, `box`, and `indicator` elements so the visual layer is fully yours
+- **Tri-state semantics**, supports checked, unchecked, and `indeterminate` mixed state for parent/child selection patterns
+- **Custom value mapping**, `trueValue` and `falseValue` let checked state represent non-boolean values
+- **Group coordination**, `useCheckboxGroup` maintains a shared value array and exposes `updateChange` for child checkboxes
+- **Controlled or uncontrolled**, drive via `checked`/`onCheckedChange` or let the hook own state from `defaultChecked`
+
+## Working with callbacks
+
+### Controlled checkbox
+
+Pass `checked` and `onCheckedChange` to own the state externally, needed for validation, async toggles, or parent-driven UI.
+
+```tsx
+const [checked, setChecked] = React.useState(true);
+
+useCheckbox({
+    checked,
+    onCheckedChange: (e) => setChecked(e.checked)
+});
+```
+
+The callback receives `{ originalEvent, checked }` where `checked` is the new boolean.
+
+### Indeterminate parent
+
+Render a "select all" checkbox that reflects partial children selection by computing `indeterminate` from child state.
+
+```tsx
+const allChecked = items.every((i) => i.selected);
+const someChecked = items.some((i) => i.selected);
+
+useCheckbox({
+    checked: allChecked,
+    indeterminate: someChecked && !allChecked,
+    onCheckedChange: (e) => toggleAll(e.checked)
+});
+```
+
+### Custom values
+
+Use `trueValue`/`falseValue` when the checkbox represents a non-boolean field such as `'yes'`/`'no'`.
+
+```tsx
+useCheckbox({ trueValue: 'yes', falseValue: 'no' });
+```
+
+### Group with shared value
+
+`useCheckboxGroup` owns the array; each checkbox derives its `checked` and forwards its event through the group's `updateChange`.
+
+```tsx
+const group = useCheckboxGroup({ defaultValue: ['a', 'b'] });
+
+const checkboxA = useCheckbox({
+    value: 'a',
+    checked: group.state.value?.includes('a'),
+    onCheckedChange: (e) => group.updateChange({ ...e, value: 'a' })
+});
+```
+
+### Controlled group
+
+Lift the group value into state to react to changes or persist selection.
+
+```tsx
+const [value, setValue] = React.useState<unknown[]>(['a']);
+
+const group = useCheckboxGroup({
+    value,
+    onValueChange: (e) => setValue(e.value)
+});
+```
+
+## Styling with data attributes
+
+Every prop object includes `data-scope="checkbox"` and a `data-part` attribute. State-dependent attributes are added automatically.
+
+| Scope      | Part        | States                               |
+| ---------- | ----------- | ------------------------------------ |
+| `checkbox` | `root`      | `data-checked`, `data-disabled`      |
+| `checkbox` | `box`       | `data-checked`, `data-indeterminate` |
+| `checkbox` | `indicator` | `data-checked`, `data-indeterminate` |
+
+```css
+[data-scope='checkbox'][data-part='box'] {
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 2px solid #ccc;
+    border-radius: 0.25rem;
+}
+
+[data-scope='checkbox'][data-part='box'][data-checked] {
+    background: var(--p-primary-color);
+    border-color: var(--p-primary-color);
+}
+
+[data-scope='checkbox'][data-part='box'][data-indeterminate] {
+    background: var(--p-primary-color);
+    border-color: var(--p-primary-color);
+}
+
+[data-scope='checkbox'][data-part='root'][data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+```
+
+## API
+
+### useCheckbox
+
+<DocTable name="useCheckbox" category="api" />
+
+### useCheckboxGroup
+
+<DocTable name="useCheckboxGroup" category="api" />
+
+## Accessibility
+
+Space toggles the checked state while focused. Use indeterminate for tri-state checkboxes. See [Primitive](/docs/primitive/components/checkbox#accessibility) for full WAI-ARIA compliance details.

package/data/llms/headless/components/chip/api.json

@@ -0,0 +1,107 @@
+[
+  {
+    "name": "useChip",
+    "source": "apps/showcase/assets/apidoc/usechip.json",
+    "data": {
+      "description": "The useChip manages the state and functionality of a chip component.",
+      "interfaces": {
+        "UseChipRemoveEvent": {
+          "description": "Event fired when the chip's remove icon is clicked.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "originalEvent",
+              "type": "E",
+              "default": "",
+              "description": "The original event that triggered the change."
+            }
+          ],
+          "methods": []
+        },
+        "UseChipProps": {
+          "description": "Defines valid properties in useChip.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "onRemove",
+              "type": "(event: UseChipRemoveEvent) => void",
+              "default": "",
+              "description": "Callback fired when the chip is removed."
+            }
+          ],
+          "methods": []
+        },
+        "UseChipState": {
+          "description": "Defines valid state in useChip.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "visible",
+              "type": "boolean",
+              "default": "",
+              "description": "The visibility state of the chip."
+            }
+          ],
+          "methods": []
+        },
+        "UseChipRootProps": {
+          "description": "Data attribute props for the Chip root element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "string",
+              "default": "",
+              "description": "Component scope identifier."
+            },
+            {
+              "name": "data-part",
+              "type": "string",
+              "default": "",
+              "description": "Component part identifier."
+            }
+          ],
+          "methods": []
+        },
+        "UseChipExposes": {
+          "description": "Defines the methods and properties exposed by useChip.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "state",
+              "type": "UseChipState",
+              "default": "",
+              "description": "The state of the useChip."
+            },
+            {
+              "name": "rootProps",
+              "type": "UseChipRootProps",
+              "default": "",
+              "description": "Pre-built data attribute props for the root element."
+            },
+            {
+              "name": "close",
+              "type": "(event: SyntheticEvent<HTMLElement>) => void",
+              "default": "",
+              "description": "Closes the chip."
+            },
+            {
+              "name": "removeProps",
+              "type": "{ tabIndex: 0; onClick: (event: SyntheticEvent<HTMLElement>) => void; onKeyDown: (event: KeyboardEvent<HTMLElement>) => void }",
+              "default": "",
+              "description": "Pre-built props for the remove element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseChipInstance": {
+          "description": "Instance of useChip headless.",
+          "values": "HeadlessInstance<UseChipProps, UseChipState, UseChipExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

package/data/llms/headless/components/chip.md

@@ -0,0 +1,141 @@
+# useChip
+
+Headless hook for building removable chip elements with custom markup.
+
+```tsx
+'use client';
+import { Times } from '@primeicons/react/times';
+import { useChip } from '@primereact/headless/chip';
+
+export default function BasicDemo() {
+    const chip1 = useChip();
+    const chip2 = useChip();
+    const chip3 = useChip({ onRemove: () => {} });
+
+    return (
+        <div className="flex items-center justify-center gap-2">
+            {chip1.state.visible && (
+                <div
+                    {...chip1.rootProps}
+                    className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-surface-200 dark:border-surface-700 text-sm"
+                >
+                    <span>Apple</span>
+                </div>
+            )}
+            {chip2.state.visible && (
+                <div
+                    {...chip2.rootProps}
+                    className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-surface-200 dark:border-surface-700 text-sm"
+                >
+                    <img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" alt="Amy" className="w-6 h-6 rounded-full" />
+                    <span>Amy Elsner</span>
+                </div>
+            )}
+            {chip3.state.visible && (
+                <div
+                    {...chip3.rootProps}
+                    className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-surface-200 dark:border-surface-700 text-sm"
+                >
+                    <span>Removable</span>
+                    <span {...chip3.removeProps} className="inline-flex items-center cursor-pointer hover:text-red-500 transition">
+                        <Times className="w-3 h-3" />
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useChip } from '@primereact/headless/chip';
+```
+
+```tsx
+const { rootProps, removeProps, state, close } = useChip({ onRemove: (e) => {} });
+
+<>
+    {
+        state.visible && (
+            <div {...rootProps}>
+                <span></span>
+                <span {...removeProps}></span>
+            </div>
+```
+
+`useChip` tracks whether the chip is visible and gives you wired-up props for the root and the remove button so keyboard and click dismissal work out of the box. See [Primitive](/docs/primitive/components/chip) for a component-based API.
+
+## Features
+
+- **Visibility state**, `state.visible` reflects whether the chip should be rendered
+- **Remove-button bindings**, `removeProps` includes click, Enter, and Backspace handlers so the dismiss element is fully wired
+- **Imperative close**, `close(event)` dismisses the chip from anywhere, not just the remove button
+- **Remove callback**, `onRemove` fires with the original event so you can sync external collections
+- **Data-attribute styling**, `data-scope` and `data-part` on the root for CSS targeting
+
+## Working with callbacks
+
+### React to dismissal
+
+Use `onRemove` to update the collection that owns the chip when the user dismisses it.
+
+```tsx
+const { rootProps, removeProps, state } = useChip({
+    onRemove: (e) => setTags((prev) => prev.filter((t) => t !== tag))
+});
+
+{
+    state.visible && (
+        <div {...rootProps}>
+            <span>{tag}</span>
+            <span {...removeProps}>x</span>
+        </div>
+    );
+}
+```
+
+### Guard rendering with `state.visible`
+
+`state.visible` flips to `false` after `close` is called. Conditionally render the chip so it unmounts cleanly.
+
+```tsx
+{
+    state.visible && <div {...rootProps}>...</div>;
+}
+```
+
+### Dismiss from outside the chip
+
+Call `close(event)` when you need a different trigger, a confirmation dialog, a bulk-clear button, or a keyboard shortcut, to dismiss the chip.
+
+```tsx
+const { close } = useChip({ onRemove: (e) => {} });
+
+<button onClick={(e) => close(e)}>Dismiss</button>;
+```
+
+## Styling with data attributes
+
+The root prop object includes `data-scope="chip"` and `data-part="root"` for targeted styling.
+
+```css
+[data-scope='chip'][data-part='root'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+}
+```
+
+## API
+
+### useChip
+
+<DocTable name="useChip" category="api" />
+
+## Accessibility
+
+Tab reaches the close button when present, and Enter or Space removes the chip. See [Primitive](/docs/primitive/components/chip#accessibility) for full WAI-ARIA compliance details.