@primereact/mcp 11.0.0-rc.2

package/data/llms/primitive/components/progressbar.md

@@ -0,0 +1,153 @@
+# ProgressBar
+
+An unstyled progress bar component for displaying process completion status.
+
+<DocPrimitiveIntro description="Build fully custom progress indicators with complete control over layout and styling." />
+
+```tsx
+'use client';
+import { ProgressBar } from 'primereact/progressbar';
+import styles from './basic-demo.module.css';
+
+export default function BasicDemo() {
+    return (
+        <div className={styles.wrapper}>
+            <ProgressBar.Root value={50}>
+                <ProgressBar.Track className={styles.track}>
+                    <ProgressBar.Indicator className={styles.indicator}>
+                        <ProgressBar.Label className={styles.label}>
+                            <ProgressBar.Value className={styles.value} />
+                        </ProgressBar.Label>
+                    </ProgressBar.Indicator>
+                </ProgressBar.Track>
+            </ProgressBar.Root>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="ProgressBar" />
+
+## Features
+
+- Compound component API with sub-components: `Root`, `Track`, `Indicator`, `Label`, `Value`
+- Normalizes `value` to a 0-100 percentage with configurable `min`/`max` bounds
+- Determinate and indeterminate modes for known and unknown progress
+- Configurable `formatter` function for custom display text
+
+## Usage
+
+```tsx
+import { ProgressBar } from 'primereact/progressbar';
+```
+
+```tsx
+<ProgressBar.Root>
+    <ProgressBar.Track>
+        <ProgressBar.Indicator>
+            <ProgressBar.Label>
+                <ProgressBar.Value />
+            </ProgressBar.Label>
+        </ProgressBar.Indicator>
+    </ProgressBar.Track>
+</ProgressBar.Root>
+```
+
+## Behavior
+
+### Polymorphic Rendering
+
+Use `as` on any sub-component to change the rendered HTML element.
+
+```tsx
+<ProgressBar.Root as="section"></ProgressBar.Root>
+<ProgressBar.Track as="span"></ProgressBar.Track>
+```
+
+Default elements: `Root`=`div`, `Track`=`div`, `Indicator`=`div`, `Label`=`div`, `Value`=`span`.
+
+### Render Function Children
+
+`Root` accepts a render function as children, providing access to the component instance.
+
+```tsx
+<ProgressBar.Root value={50}>{(instance) => <span>{instance.state.computedValue}%</span>}</ProgressBar.Root>
+```
+
+## Pass Through
+
+<DocPTViewer name="progressbar-pt" components={['ProgressBarRoot']} />
+
+## API
+
+### ProgressBarRoot
+
+<DocTable name="ProgressBarRoot" category="api" />
+
+| Attribute    | Value           |
+| ------------ | --------------- |
+| `data-scope` | `"progressbar"` |
+| `data-part`  | `"root"`        |
+
+<DocTable name="ProgressBarRoot" category="pt" />
+
+### ProgressBarTrack
+
+<DocTable name="ProgressBarTrack" category="api" />
+
+| Attribute    | Value           |
+| ------------ | --------------- |
+| `data-scope` | `"progressbar"` |
+| `data-part`  | `"track"`       |
+
+<DocTable name="ProgressBarTrack" category="pt" />
+
+### ProgressBarIndicator
+
+<DocTable name="ProgressBarIndicator" category="api" />
+
+| Attribute    | Value           |
+| ------------ | --------------- |
+| `data-scope` | `"progressbar"` |
+| `data-part`  | `"indicator"`   |
+
+<DocTable name="ProgressBarIndicator" category="pt" />
+
+### ProgressBarLabel
+
+<DocTable name="ProgressBarLabel" category="api" />
+
+| Attribute    | Value           |
+| ------------ | --------------- |
+| `data-scope` | `"progressbar"` |
+| `data-part`  | `"label"`       |
+
+<DocTable name="ProgressBarLabel" category="pt" />
+
+### ProgressBarValue
+
+<DocTable name="ProgressBarValue" category="api" />
+
+| Attribute    | Value           |
+| ------------ | --------------- |
+| `data-scope` | `"progressbar"` |
+| `data-part`  | `"value"`       |
+
+<DocTable name="ProgressBarValue" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+ProgressBar components uses `progressbar` role along with `aria-valuemin`, `aria-valuemax` and `aria-valuenow` attributes. Value to describe the component can be defined using `aria-labelledby` and `aria-label` props.
+
+```tsx
+<span id="label_status" />
+<ProgressBar.Root aria-labelledby="label_status" />
+
+<ProgressBar.Root aria-label="Status" />
+```
+
+### Keyboard Support
+
+Not applicable.