@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,183 @@
+# useStepper
+
+A hook that manages stepper state, step navigation, and ARIA attributes.
+
+```tsx
+'use client';
+import * as React from 'react';
+import { useStepper } from '@primereact/headless/stepper';
+
+const steps = [
+    { value: '1', label: 'Header I', content: 'Content I' },
+    { value: '2', label: 'Header II', content: 'Content II' },
+    { value: '3', label: 'Header III', content: 'Content III' }
+];
+
+export default function BasicDemo() {
+    const stepper = useStepper({ defaultValue: '1' });
+    const { rootProps } = stepper;
+
+    return (
+        <div {...rootProps} className="max-w-2xl mx-auto">
+            <div className="flex items-center">
+                {steps.map((step, index) => {
+                    const active = stepper.isStepActive(step.value);
+                    const disabled = !active && stepper.isStepDisabled();
+                    const stepProps = stepper.getStepProps({ active, disabled });
+                    const headerProps = stepper.getHeaderProps({ activeValue: step.value, disabled });
+
+                    return (
+                        <div key={step.value} className={`flex items-center ${index < steps.length - 1 ? 'flex-1' : ''}`}>
+                            <div {...stepProps} className="group">
+                                <button
+                                    {...(headerProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+                                    className="inline-flex items-center gap-2 bg-transparent border-0 cursor-pointer p-1 focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                                >
+                                    <span className="inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold border-2 transition-colors bg-surface-200 dark:bg-surface-700 text-surface-500 dark:text-surface-400 border-surface-200 dark:border-surface-700 group-data-[active]:bg-primary group-data-[active]:text-primary-contrast group-data-[active]:border-primary group-data-[active]:ring-2 group-data-[active]:ring-primary/30">
+                                        {step.value}
+                                    </span>
+                                    <span className="text-sm font-medium text-surface-700 dark:text-surface-200">{step.label}</span>
+                                </button>
+                            </div>
+                            {index < steps.length - 1 && <span className="flex-1 h-px mx-4 bg-surface-300 dark:bg-surface-600" />}
+                        </div>
+                    );
+                })}
+            </div>
+            <div className="mt-6">
+                {steps.map((step) => {
+                    const active = stepper.isStepActive(step.value);
+                    const panelProps = stepper.getPanelProps({ active, activeValue: step.value });
+
+                    return (
+                        active && (
+                            <div key={step.value} {...panelProps}>
+                                <div className="flex flex-col h-48">
+                                    <div className="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-lg bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">
+                                        {step.content}
+                                    </div>
+                                </div>
+                            </div>
+                        )
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useStepper } from '@primereact/headless/stepper';
+```
+
+```tsx
+const stepper = useStepper({ defaultValue: '1' });
+const { rootProps, state } = stepper;
+```
+
+`useStepper` manages active step state and returns spread-ready prop objects for each DOM element, see [Primitive](/docs/primitive/components/stepper) for a component-based API.
+
+## Features
+
+- **Single-hook architecture**, one call returns `rootProps` plus getter functions (`getItemProps`, `getStepProps`, `getHeaderProps`, `getPanelProps`) for every step part
+- **Linear or free navigation**, opt into `linear` to gate forward jumps, or leave it off to let users bounce between steps
+- **Controlled or uncontrolled**, drive the active step from outside with `value`/`onValueChange` or let the hook own it
+- **Layout-agnostic**, no assumptions about horizontal vs vertical; compose panels and separators however you need
+- **Imperative controls**, `setActiveStep()` moves the pointer, `isStepActive()` and `isStepDisabled()` answer per-step queries
+
+## Working with callbacks
+
+### Controlled active step
+
+Drive the active step from parent state using `value` and `onValueChange`.
+
+```tsx
+const [value, setValue] = React.useState<string | number | null>('1');
+
+const stepper = useStepper({
+    value,
+    onValueChange: (e) => setValue(e.value)
+});
+
+<div {...rootProps}>
+    <div {...stepper.getItemProps({ active: true })}></div>
+    <div {...stepper.getStepProps({ active: true, disabled: false })}></div>
+    <button {...stepper.getHeaderProps({ activeValue: '1', disabled: false })}></button>
+    {stepper.isStepActive('1') && <div {...stepper.getPanelProps({ active: true, activeValue: '1' })}></div>}
+</div>;
+```
+
+`onValueChange` receives `{ value }` where `value` is the new active step key.
+
+### Wizard-style Next/Back navigation
+
+`setActiveStep` is the imperative escape hatch for Next/Back buttons, essential when `linear` mode prevents clicking headers directly.
+
+```tsx
+const stepper = useStepper({ linear: true, defaultValue: '1' });
+
+<button onClick={() => stepper.setActiveStep('2')}>Next</button>
+<button onClick={() => stepper.setActiveStep('1')}>Back</button>
+```
+
+### Gating with linear mode
+
+Turn on `linear` to lock inactive steps, `isStepDisabled()` will return `true` for them and `getHeaderProps` sets `tabIndex` to `-1`, so only the active step is reachable by keyboard.
+
+```tsx
+const stepper = useStepper({ linear: true, defaultValue: '1' });
+
+stepper.isStepDisabled('3'); // true until user advances
+```
+
+### Vertical layout composition
+
+The hook stays layout-agnostic. For a vertical stepper, use `getItemProps` to wrap each header and panel together so separators can nest inside the panel region.
+
+```tsx
+<div {...rootProps}>
+    <div {...stepper.getItemProps({ active })}>
+        <div {...stepper.getStepProps({ active, disabled })}>
+            <button {...stepper.getHeaderProps({ activeValue: '1', disabled })}>Step 1</button>
+        </div>
+        {stepper.isStepActive('1') && (
+            <div {...stepper.getPanelProps({ active: true, activeValue: '1' })}>
+                <span>Separator</span>
+                <div>Panel content</div>
+            </div>
+        )}
+    </div>
+</div>
+```
+
+## Styling with data attributes
+
+Every prop object includes `data-scope="stepper"` and a `data-part` attribute. `data-active` is present only on active elements; `data-disabled` is added automatically when applicable.
+
+```css
+[data-scope='stepper'][data-part='step'][data-active] {
+    background-color: var(--primary);
+}
+
+[data-scope='stepper'][data-part='header'][disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+[data-scope='stepper'][data-part='panel'][data-active] {
+    display: block;
+}
+```
+
+## API
+
+### useStepper
+
+<DocTable name="useStepper" category="api" />
+
+## Accessibility
+
+Arrow keys navigate steps, Enter activates the focused step, and disabled steps are skipped. See [Primitive](/docs/primitive/components/stepper#accessibility) for full WAI-ARIA compliance details.

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

@@ -0,0 +1,134 @@
+[
+  {
+    "name": "useStyleClass",
+    "source": "apps/showcase/assets/apidoc/usestyleclass.json",
+    "data": {
+      "description": "The useStyleClass manages the state and functionality of a StyleClass component.",
+      "interfaces": {
+        "UseStyleClassProps": {
+          "description": "Defines valid properties in useStyleClass.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "nodeRef",
+              "type": "RefObject<ReactNode>",
+              "default": "",
+              "description": "A React reference to DOM element that need to specify."
+            },
+            {
+              "name": "selector",
+              "type": "string",
+              "default": "",
+              "description": "Selector to define the target element."
+            },
+            {
+              "name": "enterFromClassName",
+              "type": "string",
+              "default": "",
+              "description": "Style class to add when item begins to get displayed."
+            },
+            {
+              "name": "enterActiveClassName",
+              "type": "string",
+              "default": "",
+              "description": "Style class to add during enter animation."
+            },
+            {
+              "name": "enterToClassName",
+              "type": "string",
+              "default": "",
+              "description": "Style class to add when item begins to get displayed."
+            },
+            {
+              "name": "leaveFromClassName",
+              "type": "string",
+              "default": "",
+              "description": "Style class to add when item begins to get hidden."
+            },
+            {
+              "name": "leaveActiveClassName",
+              "type": "string",
+              "default": "",
+              "description": "Style class to add during leave animation."
+            },
+            {
+              "name": "leaveToClassName",
+              "type": "string",
+              "default": "",
+              "description": "Style class to add when leave animation is completed."
+            },
+            {
+              "name": "hiddenClassName",
+              "type": "string",
+              "default": "",
+              "description": "Style class to apply when the component is hidden."
+            },
+            {
+              "name": "hideOnOutsideClick",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether to trigger leave animation when outside of the element is clicked."
+            },
+            {
+              "name": "toggleClassName",
+              "type": "string",
+              "default": "",
+              "description": "Adds or removes a class when no enter-leave animation is required."
+            },
+            {
+              "name": "hideOnResize",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether to trigger leave animation when the target element resized."
+            },
+            {
+              "name": "resizeSelector",
+              "type": "string",
+              "default": "window",
+              "description": "Target element to listen resize. Valid values are \"window\", \"document\" or target element."
+            }
+          ],
+          "methods": []
+        },
+        "UseStyleClassState": {
+          "description": "Defines valid state in useStyleClass.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseStyleClassExposes": {
+          "description": "Defines the methods and properties exposed by useStyleClass.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "targetRef",
+              "type": "RefObject<HTMLElement>",
+              "default": "",
+              "description": "The target element."
+            },
+            {
+              "name": "enter",
+              "type": "() => void",
+              "default": "",
+              "description": "The method to trigger the enter animation."
+            },
+            {
+              "name": "leave",
+              "type": "() => void",
+              "default": "",
+              "description": "The method to trigger the leave animation."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseStyleClassInstance": {
+          "description": "Instance of useStyleClass headless.",
+          "values": "HeadlessInstance<UseStyleClassProps, UseStyleClassState, UseStyleClassExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

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

@@ -0,0 +1,129 @@
+# useStyleClass
+
+Hook that manages CSS class toggling with enter/leave animation sequences on a target element.
+
+```tsx
+'use client';
+import { ChevronDown } from '@primeicons/react/chevron-down';
+import { useStyleClass } from '@primereact/headless/styleclass';
+import * as React from 'react';
+
+export default function BasicDemo() {
+    const btnRef = React.useRef<HTMLButtonElement>(null);
+
+    useStyleClass({
+        nodeRef: btnRef,
+        selector: '@next',
+        enterFromClassName: 'hidden',
+        enterActiveClassName: 'animate-scalein',
+        leaveToClassName: 'hidden',
+        leaveActiveClassName: 'animate-fadeout',
+        hideOnOutsideClick: true
+    });
+
+    return (
+        <div className="flex flex-col items-center gap-4 h-32">
+            <button
+                ref={btnRef}
+                type="button"
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-contrast hover:bg-primary/90 transition-colors cursor-pointer text-sm font-medium"
+            >
+                Toggle Panel
+                <ChevronDown className="w-3.5 h-3.5" />
+            </button>
+            <div className="hidden w-full max-w-md p-4 rounded-lg border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 shadow-md origin-top">
+                <p className="text-sm text-surface-700 dark:text-surface-200 leading-relaxed m-0">
+                    This panel is toggled using useStyleClass with scale-in and fade-out animations. Click the button again or click outside to
+                    dismiss.
+                </p>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useStyleClass } from '@primereact/headless/styleclass';
+```
+
+```tsx
+useStyleClass({
+    selector: '@next',
+    enterFromClassName: 'hidden',
+    enterActiveClassName: 'animate-scalein',
+    leaveToClassName: 'hidden',
+    leaveActiveClassName: 'animate-fadeout'
+});
+```
+
+`useStyleClass` binds click-to-toggle behavior on a host element and applies CSS class sequences to a target element resolved by selector. See [StyleClass](/docs/styled/components/styleclass) for a component-based API.
+
+## Features
+
+- **Selector-based targeting**, built-in `@next`, `@prev`, `@parent`, `@grandparent` selectors or any CSS selector
+- **Enter/leave sequences**, applies `{from,active,to}` classes in order and cleans them up after `animationend`
+- **Simple toggle mode**, `toggleClassName` handles the common case of flipping a single class without an animation sequence
+- **Outside-click dismissal**, `hideOnOutsideClick` runs the leave sequence when the user clicks outside the host and target
+- **External host binding**, `nodeRef` moves the click listener onto a different element than the hook's default host
+- **Imperative methods**, `enter()` and `leave()` trigger the sequences from any event source
+
+## Working with callbacks
+
+### Animate a sibling panel
+
+Combine `@next` with enter and leave class sequences to animate a panel directly after the trigger.
+
+```tsx
+useStyleClass({
+    selector: '@next',
+    enterFromClassName: 'hidden',
+    enterActiveClassName: 'animate-scalein',
+    enterToClassName: 'visible',
+    leaveActiveClassName: 'animate-fadeout',
+    leaveToClassName: 'hidden'
+});
+```
+
+### Toggle a single class
+
+When you do not need the animation lifecycle, use `toggleClassName` to flip a class on the target.
+
+```tsx
+useStyleClass({ selector: '@next', toggleClassName: 'hidden' });
+```
+
+### Dismiss on outside click
+
+Enable `hideOnOutsideClick` for menus and popovers that should close when the user clicks elsewhere on the page.
+
+```tsx
+useStyleClass({
+    selector: '@next',
+    enterFromClassName: 'hidden',
+    enterActiveClassName: 'animate-scalein',
+    leaveToClassName: 'hidden',
+    leaveActiveClassName: 'animate-fadeout',
+    hideOnOutsideClick: true
+});
+```
+
+### Attach the listener to a different element
+
+Pass `nodeRef` when the trigger lives outside the hook's host tree, for example, a global header button that controls a panel elsewhere in the DOM.
+
+```tsx
+const buttonRef = React.useRef(null);
+useStyleClass({ nodeRef: buttonRef, selector: '@next', toggleClassName: 'hidden' });
+```
+
+## API
+
+### useStyleClass
+
+<DocTable name="useStyleClass" category="api" />
+
+## Accessibility
+
+StyleClass does not add ARIA attributes. Add `aria-expanded`, `aria-controls`, and other attributes to the trigger and target elements as needed.