@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,337 @@
+[
+  {
+    "name": "useProgressSpinner",
+    "source": "apps/showcase/assets/apidoc/useprogressspinner.json",
+    "data": {
+      "description": "The useProgressSpinner manages the state and functionality of a circular progress component.",
+      "interfaces": {
+        "UseProgressSpinnerProps": {
+          "description": "Defines valid properties in useProgressSpinner.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "value",
+              "type": "number",
+              "default": "null",
+              "description": "Current value. When null, the component is in indeterminate mode."
+            },
+            {
+              "name": "min",
+              "type": "number",
+              "default": "0",
+              "description": "Minimum value."
+            },
+            {
+              "name": "max",
+              "type": "number",
+              "default": "100",
+              "description": "Maximum value."
+            },
+            {
+              "name": "strokeWidth",
+              "type": "number",
+              "default": "4",
+              "description": "Width of the circle stroke."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the component is disabled."
+            }
+          ],
+          "methods": []
+        },
+        "UseProgressSpinnerState": {
+          "description": "Defines valid state in useProgressSpinner.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "value",
+              "type": "number",
+              "default": "",
+              "description": "Current value."
+            },
+            {
+              "name": "percent",
+              "type": "number",
+              "default": "",
+              "description": "Computed percentage (0-100)."
+            },
+            {
+              "name": "indeterminate",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the progress is indeterminate."
+            }
+          ],
+          "methods": []
+        },
+        "UseProgressSpinnerRootProps": {
+          "description": "Data attribute props for the ProgressSpinner root element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "role",
+              "type": "\"progressbar\"",
+              "default": "",
+              "description": "ARIA role indicating this is a progress bar."
+            },
+            {
+              "name": "data-scope",
+              "type": "\"progress\"",
+              "default": "",
+              "description": "Data scope attribute."
+            },
+            {
+              "name": "data-part",
+              "type": "\"root\"",
+              "default": "",
+              "description": "Data part attribute."
+            },
+            {
+              "name": "data-state",
+              "type": "\"indeterminate\" | \"determinate\"",
+              "default": "",
+              "description": "Data state attribute indicating determinate or indeterminate."
+            },
+            {
+              "name": "data-value",
+              "type": "number",
+              "default": "",
+              "description": "Data value attribute (only present in determinate mode)."
+            },
+            {
+              "name": "aria-valuemin",
+              "type": "number",
+              "default": "",
+              "description": "ARIA minimum value."
+            },
+            {
+              "name": "aria-valuemax",
+              "type": "number",
+              "default": "",
+              "description": "ARIA maximum value."
+            },
+            {
+              "name": "aria-valuenow",
+              "type": "number",
+              "default": "",
+              "description": "ARIA current value (only present in determinate mode)."
+            },
+            {
+              "name": "data-disabled",
+              "type": "string",
+              "default": "",
+              "description": "Data disabled attribute."
+            }
+          ],
+          "methods": []
+        },
+        "UseProgressSpinnerCircleProps": {
+          "description": "SVG props for the circle container element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "\"progress\"",
+              "default": "",
+              "description": "Data scope attribute."
+            },
+            {
+              "name": "data-part",
+              "type": "\"circle\"",
+              "default": "",
+              "description": "Data part attribute."
+            },
+            {
+              "name": "viewBox",
+              "type": "string",
+              "default": "",
+              "description": "SVG viewBox attribute."
+            }
+          ],
+          "methods": []
+        },
+        "UseProgressSpinnerCircleTrackProps": {
+          "description": "SVG circle props for the track element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "\"progress\"",
+              "default": "",
+              "description": "Data scope attribute."
+            },
+            {
+              "name": "data-part",
+              "type": "\"circleTrack\"",
+              "default": "",
+              "description": "Data part attribute."
+            },
+            {
+              "name": "data-state",
+              "type": "\"indeterminate\" | \"determinate\"",
+              "default": "",
+              "description": "Data state attribute."
+            },
+            {
+              "name": "cx",
+              "type": "number",
+              "default": "",
+              "description": "SVG circle center X position."
+            },
+            {
+              "name": "cy",
+              "type": "number",
+              "default": "",
+              "description": "SVG circle center Y position."
+            },
+            {
+              "name": "r",
+              "type": "number",
+              "default": "",
+              "description": "SVG circle radius."
+            },
+            {
+              "name": "fill",
+              "type": "string",
+              "default": "",
+              "description": "Fill color of the circle."
+            },
+            {
+              "name": "strokeWidth",
+              "type": "number",
+              "default": "",
+              "description": "Stroke width of the circle."
+            }
+          ],
+          "methods": []
+        },
+        "UseProgressSpinnerCircleRangeProps": {
+          "description": "SVG circle props for the range element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "\"progress\"",
+              "default": "",
+              "description": "Data scope attribute."
+            },
+            {
+              "name": "data-part",
+              "type": "\"circleRange\"",
+              "default": "",
+              "description": "Data part attribute."
+            },
+            {
+              "name": "data-state",
+              "type": "\"indeterminate\" | \"determinate\"",
+              "default": "",
+              "description": "Data state attribute."
+            },
+            {
+              "name": "cx",
+              "type": "number",
+              "default": "",
+              "description": "SVG circle center X position."
+            },
+            {
+              "name": "cy",
+              "type": "number",
+              "default": "",
+              "description": "SVG circle center Y position."
+            },
+            {
+              "name": "r",
+              "type": "number",
+              "default": "",
+              "description": "SVG circle radius."
+            },
+            {
+              "name": "fill",
+              "type": "string",
+              "default": "",
+              "description": "Fill color of the circle."
+            },
+            {
+              "name": "strokeWidth",
+              "type": "number",
+              "default": "",
+              "description": "Stroke width of the circle."
+            },
+            {
+              "name": "strokeDasharray",
+              "type": "string",
+              "default": "",
+              "description": "Stroke dasharray for the circle (only in determinate mode)."
+            },
+            {
+              "name": "strokeDashoffset",
+              "type": "string",
+              "default": "",
+              "description": "Stroke dashoffset for the circle (only in determinate mode)."
+            },
+            {
+              "name": "strokeLinecap",
+              "type": "\"round\"",
+              "default": "",
+              "description": "Stroke linecap style (only in determinate mode)."
+            },
+            {
+              "name": "style",
+              "type": "{ transformOrigin: string; transform: string }",
+              "default": "",
+              "description": "Inline style for transform origin and rotation (only in determinate mode)."
+            }
+          ],
+          "methods": []
+        },
+        "UseProgressSpinnerExposes": {
+          "description": "Defines the methods and properties exposed by useProgressSpinner.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "state",
+              "type": "UseProgressSpinnerState",
+              "default": "",
+              "description": "The current state of the circular progress."
+            },
+            {
+              "name": "rootProps",
+              "type": "UseProgressSpinnerRootProps",
+              "default": "",
+              "description": "Pre-built props for the root element."
+            },
+            {
+              "name": "circleProps",
+              "type": "UseProgressSpinnerCircleProps",
+              "default": "",
+              "description": "Pre-built props for the SVG circle container element."
+            },
+            {
+              "name": "circleTrackProps",
+              "type": "UseProgressSpinnerCircleTrackProps",
+              "default": "",
+              "description": "Pre-built props for the SVG circle track element."
+            },
+            {
+              "name": "circleRangeProps",
+              "type": "UseProgressSpinnerCircleRangeProps",
+              "default": "",
+              "description": "Pre-built props for the SVG circle range element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseProgressSpinnerInstance": {
+          "description": "Instance of useProgressSpinner headless.",
+          "values": "HeadlessInstance<UseProgressSpinnerProps, UseProgressSpinnerState, UseProgressSpinnerExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

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

@@ -0,0 +1,128 @@
+# useProgressSpinner
+
+Hook that manages circular progress state, SVG geometry computation, and determinate/indeterminate modes.
+
+```tsx
+'use client';
+import { useProgressSpinner } from '@primereact/headless/progressspinner';
+
+export default function BasicDemo() {
+    const { rootProps, circleProps, circleTrackProps, circleRangeProps } = useProgressSpinner();
+
+    return (
+        <div className="flex justify-center">
+            <div {...rootProps} className="w-24 h-24" aria-label="Loading">
+                <svg {...circleProps} className="w-full h-full animate-spin">
+                    <circle {...circleTrackProps} className="stroke-[var(--p-content-border-color)]" />
+                    <circle {...circleRangeProps} className="stroke-primary [stroke-dasharray:89,200] [stroke-dashoffset:0] [stroke-linecap:round]" />
+                </svg>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useProgressSpinner } from '@primereact/headless/progressspinner';
+```
+
+```tsx
+const { rootProps, circleProps, circleTrackProps, circleRangeProps, state } = useProgressSpinner({
+    value: 75
+});
+
+<div {...rootProps}>
+    <svg {...circleProps}>
+        <circle {...circleTrackProps} />
+        <circle {...circleRangeProps} />
+    </svg>
+</div>;
+```
+
+`useProgressSpinner` manages numeric value state with SVG circle geometry computation for both determinate and indeterminate progress indicators, see [Primitive](/docs/primitive/components/progressspinner) for a component-based API.
+
+## Features
+
+- **SVG geometry**, computes radius, circumference, and `stroke-dasharray`/`stroke-dashoffset` from value, min, and max
+- **Determinate and indeterminate**, switches modes automatically based on whether `value` is provided
+- **Configurable stroke and bounds**, `strokeWidth`, `min`, and `max` all feed into the geometry calculation
+- **Reactive state**, `state.value`, `state.percent`, and `state.indeterminate` drive custom labels or overlays
+- **Data-driven styling**, `data-state="indeterminate"` makes it easy to attach spin animations in CSS
+
+## Working with callbacks
+
+### Determinate vs indeterminate
+
+Omit `value` (or pass `null`) to show an indeterminate spinner; provide a numeric value for a determinate indicator.
+
+```tsx
+const indeterminate = useProgressSpinner();
+const determinate = useProgressSpinner({ value: 75 });
+```
+
+### Custom range
+
+Set `min` and `max` so the percentage is computed against your actual domain, not 0-100.
+
+```tsx
+const progress = useProgressSpinner({ value: 150, min: 0, max: 200 });
+
+progress.state.percent; // 75
+```
+
+### Rendering custom labels
+
+Read `state.percent` and `state.indeterminate` to layer a label on top of the SVG without recomputing geometry.
+
+```tsx
+const progress = useProgressSpinner({ value: 75 });
+
+<span>{Math.round(progress.state.percent)}%</span>;
+{
+    progress.state.indeterminate && <span>Loading...</span>;
+}
+```
+
+### Adjusting stroke thickness
+
+`strokeWidth` feeds directly into the circle geometry, so thicker strokes stay visually centered without manual tweaks.
+
+```tsx
+const progress = useProgressSpinner({ value: 75, strokeWidth: 8 });
+```
+
+## Styling with data attributes
+
+Every prop object includes `data-scope="progress"` and a `data-part` attribute. State-dependent attributes are added automatically.
+
+| Scope      | Part          | States       |
+| ---------- | ------------- | ------------ |
+| `progress` | `root`        | `data-state` |
+| `progress` | `circleTrack` | ,            |
+| `progress` | `circleRange` | ,            |
+
+```css
+[data-scope='progress'][data-part='circleTrack'] {
+    stroke: var(--p-content-border-color);
+}
+
+[data-scope='progress'][data-part='circleRange'] {
+    stroke: var(--p-primary-color);
+}
+
+[data-scope='progress'][data-state='indeterminate'] svg {
+    animation: spin 2s linear infinite;
+}
+```
+
+## API
+
+### useProgressSpinner
+
+<DocTable name="useProgressSpinner" category="api" />
+
+## Accessibility
+
+Announced as an indeterminate progress indicator via aria-busy. See [Primitive](/docs/primitive/components/progressspinner#accessibility) for full WAI-ARIA compliance details.