@primereact/mcp 11.0.0-rc.2

package/data/llms/styled/components/knob.md

@@ -0,0 +1,305 @@
+# Knob
+
+Knob is a form component to define number inputs with a dial.
+
+```tsx
+import { Knob } from '@primereact/ui/knob';
+
+export default function Preview() {
+    return (
+        <div className="flex flex-wrap gap-8 items-center justify-center">
+            <div className="flex flex-col items-center gap-2">
+                <Knob.Root defaultValue={48} ariaLabel="Volume">
+                    <Knob.Range />
+                    <Knob.Value />
+                    <Knob.Text />
+                </Knob.Root>
+                <span className="text-sm text-muted-color font-medium">Volume</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <Knob.Root defaultValue={75} ariaLabel="Brightness">
+                    <Knob.Range />
+                    <Knob.Value />
+                    <Knob.Text />
+                </Knob.Root>
+                <span className="text-sm text-muted-color font-medium">Treble</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <Knob.Root defaultValue={24} ariaLabel="Bass">
+                    <Knob.Range />
+                    <Knob.Value />
+                    <Knob.Text />
+                </Knob.Root>
+                <span className="text-sm text-muted-color font-medium">Bass</span>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { Knob } from '@primereact/ui/knob';
+```
+
+```tsx
+<Knob.Root>
+    <Knob.Range />
+    <Knob.Value />
+    <Knob.Text />
+</Knob.Root>
+```
+
+## Examples
+
+### Basic
+
+A circular knob for selecting a numeric value within a defined range.
+
+```tsx
+import { Knob } from '@primereact/ui/knob';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex justify-center">
+            <Knob.Root defaultValue={50} ariaLabel="Volume">
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob.Root>
+        </div>
+    );
+}
+```
+
+### Min/Max
+
+Boundaries are configured with the `min` and `max` properties. Defaults are `0` and `100`.
+
+```tsx
+import { Knob } from '@primereact/ui/knob';
+
+export default function MinMaxDemo() {
+    return (
+        <div className="flex justify-center">
+            <Knob.Root defaultValue={10} min={-50} max={50} ariaLabel="Temperature">
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob.Root>
+        </div>
+    );
+}
+```
+
+### Step
+
+Step factor is `1` by default and can be customized with the `step` property.
+
+```tsx
+import { Knob } from '@primereact/ui/knob';
+
+export default function StepDemo() {
+    return (
+        <div className="flex justify-center">
+            <Knob.Root defaultValue={50} step={10} ariaLabel="Volume step">
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob.Root>
+        </div>
+    );
+}
+```
+
+### Template
+
+Use `Knob.Text` with a render function to customize displayed content.
+
+```tsx
+'use client';
+import { Knob, type KnobTextInstance } from '@primereact/ui/knob';
+
+export default function TemplateDemo() {
+    return (
+        <div className="flex justify-center">
+            <Knob.Root defaultValue={50} ariaLabel="Download progress">
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text>
+                    {(instance: KnobTextInstance) => {
+                        const { knob } = instance;
+
+                        return <>{knob?.state.value}%</>;
+                    }}
+                </Knob.Text>
+            </Knob.Root>
+        </div>
+    );
+}
+```
+
+### Stroke
+
+The border size is specified with the `strokeWidth` property as a number in pixels.
+
+```tsx
+import { Knob } from '@primereact/ui/knob';
+
+export default function StrokeDemo() {
+    return (
+        <div className="flex justify-center">
+            <Knob.Root defaultValue={40} ariaLabel="Brightness">
+                <Knob.Range strokeWidth={5} />
+                <Knob.Value strokeWidth={5} />
+                <Knob.Text />
+            </Knob.Root>
+        </div>
+    );
+}
+```
+
+### Size
+
+Diameter of the knob is defined in pixels using the `size` property.
+
+```tsx
+import { Knob } from '@primereact/ui/knob';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex justify-center">
+            <Knob.Root defaultValue={60} size={200} ariaLabel="Progress">
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob.Root>
+        </div>
+    );
+}
+```
+
+### Color
+
+Each of the three components (`Knob.Range`, `Knob.Value`, `Knob.Text`) accepts a `color` prop to customize appearance. In addition, `strokeWidth` determines the stroke width of range and value sections.
+
+```tsx
+import { Knob } from '@primereact/ui/knob';
+
+export default function ColorDemo() {
+    return (
+        <div className="flex justify-center">
+            <Knob.Root defaultValue={50} ariaLabel="Disk usage">
+                <Knob.Range color="MediumTurquoise" />
+                <Knob.Value color="PeachPuff" />
+                <Knob.Text />
+            </Knob.Root>
+        </div>
+    );
+}
+```
+
+### Reactive
+
+Knob can be controlled with custom controls as well.
+
+```tsx
+'use client';
+import { Minus } from '@primeicons/react/minus';
+import { Plus } from '@primeicons/react/plus';
+import { Button } from '@primereact/ui/button';
+import { Knob } from '@primereact/ui/knob';
+import * as React from 'react';
+
+export default function ReactiveDemo() {
+    const [value, setValue] = React.useState(0);
+
+    return (
+        <div className="flex flex-col items-center gap-2">
+            <Knob.Root value={value} size={150} readOnly ariaLabel="Brightness">
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob.Root>
+            <div className="flex gap-2">
+                <Button onClick={() => setValue(value + 1)} disabled={value === 100} aria-label="Increase brightness" iconOnly>
+                    <Plus />
+                </Button>
+                <Button onClick={() => setValue(value - 1)} disabled={value <= 0} aria-label="Decrease brightness" iconOnly>
+                    <Minus />
+                </Button>
+            </div>
+        </div>
+    );
+}
+```
+
+### ReadOnly
+
+When `readOnly` is present, value cannot be edited.
+
+```tsx
+import { Knob } from '@primereact/ui/knob';
+
+export default function ReadOnlyDemo() {
+    return (
+        <div className="flex justify-center">
+            <Knob.Root defaultValue={50} readOnly ariaLabel="Read-only volume">
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob.Root>
+        </div>
+    );
+}
+```
+
+### Disabled
+
+When `disabled` is present, a visual hint is applied to indicate that the knob cannot be interacted with.
+
+```tsx
+import { Knob } from '@primereact/ui/knob';
+
+export default function DisabledDemo() {
+    return (
+        <div className="flex justify-center">
+            <Knob.Root defaultValue={50} ariaLabel="Disabled volume" disabled>
+                <Knob.Range />
+                <Knob.Value />
+                <Knob.Text />
+            </Knob.Root>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Knob Primitive](/docs/primitive/components/knob#api) for the full sub-component API.
+
+### Hooks
+
+See [useKnob](/docs/headless/components/knob#api) for the headless hook API.
+
+### Accessibility
+
+See [Knob Primitive](/docs/primitive/components/knob#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="Knob" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="Knob" category="token" />

package/data/llms/styled/components/label/api.json

@@ -0,0 +1,237 @@
+[
+  {
+    "name": "Label",
+    "source": "apps/showcase/assets/apidoc/label.json",
+    "data": {
+      "description": "Label can be used standalone or in conjunction with form components to provide accessible labeling.",
+      "interfaces": {
+        "LabelPassThrough": {
+          "description": "Defines passthrough(pt) options of Label component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "LabelPassThroughType<LabelHTMLAttributes<HTMLLabelElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "LabelProps": {
+          "description": "Defines valid properties in Label component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<LabelInstance, UseLabelProps, LabelPassThrough>",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<unknown>",
+              "default": "",
+              "description": "The reference to the component instance."
+            },
+            {
+              "name": "pIf",
+              "type": "boolean",
+              "default": "true",
+              "description": "Whether the component should be rendered."
+            },
+            {
+              "name": "style",
+              "type": "CSSProperties | ((instance?: LabelInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: LabelInstance) => string)",
+              "default": "",
+              "description": "The class name to apply to the component."
+            },
+            {
+              "name": "as",
+              "type": "string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode>",
+              "default": "",
+              "description": "The component type to render."
+            },
+            {
+              "name": "asChild",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether the component should be rendered as a child component."
+            },
+            {
+              "name": "instance",
+              "type": "LabelInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<LabelPassThrough>",
+              "default": "",
+              "description": "The pass-through props to pass to the component."
+            },
+            {
+              "name": "ptOptions",
+              "type": "PassThroughOptions",
+              "default": "",
+              "description": "The pass-through options to pass to the component."
+            },
+            {
+              "name": "unstyled",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the component should be rendered without classes."
+            },
+            {
+              "name": "dt",
+              "type": "unknown",
+              "default": "",
+              "description": "The design token to use for the component."
+            },
+            {
+              "name": "styles",
+              "type": "StylesOptions<ComponentInstance>",
+              "default": "",
+              "description": "The styles to use for the component."
+            },
+            {
+              "name": "render",
+              "type": "(instance: LabelInstance) => ReactNode",
+              "default": "",
+              "description": "The render function to render the component with instance access."
+            },
+            {
+              "name": "children",
+              "type": "any",
+              "default": "",
+              "description": "The children to render.\n\nAccepts  `React.ReactNode`  for static content or a render function  `(instance: I) => React.ReactNode`  for instance access.\nTyped as  `any`  to avoid JSX type errors when used directly in templates."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "LabelState": {
+          "description": "Defines valid state in Label component.",
+          "relatedProp": "",
+          "extendedTypes": "UseLabelState",
+          "props": [],
+          "methods": []
+        },
+        "LabelExposes": {
+          "description": "Defines the methods and properties exposed by Label component.",
+          "relatedProp": "",
+          "extendedTypes": "UseLabelExposes",
+          "props": [
+            {
+              "name": "rootProps",
+              "type": "UseLabelRootProps",
+              "default": "",
+              "description": "Pre-built data attribute props for the root element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "LabelPassThroughType": {
+          "description": "Defines passthrough(pt) options type in Label component.",
+          "values": "PassThroughType<LabelInstance, E>"
+        },
+        "LabelClassNamesType": {
+          "description": "Type representing the CSS class names used in the Label component.",
+          "values": "typeof LabelClassNames[keyof typeof LabelClassNames]"
+        },
+        "LabelInstance": {
+          "description": "Instance of Label component.",
+          "values": "ComponentInstance<LabelProps, LabelState, LabelExposes>"
+        }
+      },
+      "variables": {
+        "LabelClassNames": {
+          "description": "Defines the CSS class names used in the Label component.",
+          "variables": [
+            {
+              "name": "root",
+              "value": "p-label",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the root element"
+            }
+          ]
+        }
+      }
+    }
+  },
+  {
+    "name": "useLabel",
+    "source": "apps/showcase/assets/apidoc/uselabel.json",
+    "data": {
+      "description": "The useLabel manages the state and functionality of a label component.",
+      "interfaces": {
+        "UseLabelProps": {
+          "description": "Defines valid properties in useLabel.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseLabelState": {
+          "description": "Defines valid state in useLabel.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseLabelRootProps": {
+          "description": "Data attribute props for the Label 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": []
+        },
+        "UseLabelExposes": {
+          "description": "Defines the methods and properties exposed by useLabel.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "rootProps",
+              "type": "UseLabelRootProps",
+              "default": "",
+              "description": "Pre-built data attribute props for the root element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseLabelInstance": {
+          "description": "Instance of useLabel headless.",
+          "values": "HeadlessInstance<UseLabelProps, UseLabelState, UseLabelExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]