@primereact/mcp 11.1.0 → 11.2.0

package/data/llms/styled/add-ons/uikit/guide/v3.md

@@ -74,6 +74,7 @@ Theme Designer offers an API that can be utilized to implement continuous integr
     In our own workflow, we prefer to update the variables manually, as the export feature can be unstable with large files like PrimeOne. We recommend this manual approach for reliability. However, if you choose to use the export feature, make sure the settings match the screenshot provided. Specifically, ensure the "**Themes (Pro)**" tab is selected during the second step. Don't worry, even though it says "Pro," you don't need a Pro license to access this feature in Tokens Studio. If you notice missing or incomplete exports on your first attempt, try running the export again from the beginning. This is a known issue with Tokens Studio and often resolves on the second attempt. For more detailed guidance, see the [official documentation](https://docs.tokens.studio/figma/export).
 
     ![Design changes export settings](https://primefaces.org/cdn/uikit/designchanges-1.png)
+
 - **Get Updates on Consumer Files** - We do not recommend making design changes directly in consumer files, as this goes against best practices. Instead, apply all design updates in the main UI Kit file, then publish the library and accept the updates in any consumer files that rely on it.
 
 ## Token Sets

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

@@ -37,19 +37,19 @@
             },
             {
               "name": "style",
-              "type": "CSSProperties | ((instance?: ButtonInstance) => CSSProperties)",
+              "type": "CSSProperties | ((instance?: ButtonInstance) => undefined | CSSProperties)",
               "default": "",
               "description": "The style to apply to the component."
             },
             {
               "name": "className",
-              "type": "string | ((instance?: ButtonInstance) => string)",
+              "type": "string | ((instance?: ButtonInstance) => undefined | 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>",
+              "type": "null | 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."
             },
@@ -128,31 +128,31 @@
             {
               "name": "plain",
               "type": "boolean",
-              "default": "",
+              "default": "false",
               "description": "Whether to show the Button with a plain style."
             },
             {
               "name": "rounded",
               "type": "boolean",
-              "default": "",
+              "default": "false",
               "description": "Whether to show the Button with a rounded style."
             },
             {
               "name": "raised",
               "type": "boolean",
-              "default": "",
+              "default": "false",
               "description": "Whether to show the Button with a raised style."
             },
             {
               "name": "iconOnly",
               "type": "boolean",
-              "default": "",
+              "default": "false",
               "description": "Whether to show the Button with a borderless style."
             },
             {
               "name": "fluid",
               "type": "boolean",
-              "default": "",
+              "default": "false",
               "description": "Whether to show the Button with a fluid width."
             },
             {

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

@@ -353,6 +353,71 @@ function GalleryDemo() {
 export default GalleryDemo;
 ```
 
+### Dynamic
+
+Items can be added or removed at runtime. The carousel observes its content and recalculates the snap points, keeping the indicators and navigation in sync.
+
+```tsx
+'use client';
+import { ChevronLeft } from '@primeicons/react/chevron-left';
+import { ChevronRight } from '@primeicons/react/chevron-right';
+import { Minus } from '@primeicons/react/minus';
+import { Plus } from '@primeicons/react/plus';
+import { Button } from '@primereact/ui/button';
+import { Carousel } from '@primereact/ui/carousel';
+import * as React from 'react';
+
+function DynamicDemo() {
+    const [items, setItems] = React.useState(() => [1, 2, 3]);
+
+    const addItem = () => {
+        setItems((prev) => [...prev, (prev[prev.length - 1] ?? 0) + 1]);
+    };
+
+    const removeItem = () => {
+        setItems((prev) => prev.slice(0, -1));
+    };
+
+    return (
+        <div className="mt-8 mb-16">
+            <div className="flex items-center justify-center gap-2 mb-6">
+                <Button size="small" severity="secondary" onClick={removeItem} disabled={items.length === 0} aria-label="Remove last item">
+                    <Minus />
+                </Button>
+                <span className="w-24 text-center text-sm text-muted-color">{items.length} items</span>
+                <Button size="small" severity="secondary" onClick={addItem} aria-label="Add item">
+                    <Plus />
+                </Button>
+            </div>
+            <Carousel.Root className="max-w-xl mx-auto" align="center" slidesPerPage={2.25} spacing={16}>
+                <Carousel.Content className="h-50">
+                    {items.map((item) => (
+                        <Carousel.Item key={item}>
+                            <div className="h-full text-4xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex items-center justify-center rounded-xl border border-surface">
+                                <span>{item}</span>
+                            </div>
+                        </Carousel.Item>
+                    ))}
+                </Carousel.Content>
+                <div className="flex mt-4 gap-4">
+                    <Carousel.Indicators />
+                    <div className="flex items-center justify-end gap-2 flex-1">
+                        <Carousel.Prev as={Button} size="small" severity="secondary" iconOnly>
+                            <ChevronLeft />
+                        </Carousel.Prev>
+                        <Carousel.Next as={Button} size="small" severity="secondary" iconOnly>
+                            <ChevronRight />
+                        </Carousel.Next>
+                    </div>
+                </div>
+            </Carousel.Root>
+        </div>
+    );
+}
+
+export default DynamicDemo;
+```
+
 ## Related
 
 ### Sub-Components