@primereact/mcp 11.1.0 → 11.2.0

package/data/llms/styled/guides/configuration.md

@@ -97,6 +97,31 @@ import { Select } from '@primereact/ui/select'; // themed, opt out with `unstyle
 import { Select } from 'primereact/select'; // unstyled by construction
 ```
 
+## Preflight
+
+Preflight resets the browser defaults on the native elements PrimeReact renders, such as `button`, `input`, `ul`, `table`, `img` and the heading tags. It removes the margins, borders, font inheritance and list styling browsers apply by default, so a component's own styles are the only ones in effect. It is on by default.
+
+The reset only applies to elements PrimeReact renders itself, scoped through the `data-scope` attribute each component sets. A `<button>` or `<ul>` outside a PrimeReact component keeps its normal browser defaults.
+
+Turn it off with the `preflight` property on the provider:
+
+```tsx showLineNumbers {6}
+import { PrimeReactProvider } from '@primereact/core';
+...
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <PrimeReactProvider preflight={false}>
+            <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);
+```
+
+Turn it off in a project that already resets these elements, for example with Tailwind's own preflight, normalize.css or Bootstrap's reboot.
+
+An application that loads Tailwind through a cascade layer needs the `primeui` layer declared before the `tailwindcss` import. The reset lives in `primeui.base`, a layer nested inside `primeui`, so declaring `primeui` alone is enough to position both the reset and the theme; a separate `primeui-base` declaration does not reach it and the reset ends up overriding the theme instead. This is also the layer name `theme.options.cssLayer` wraps component styles in when enabled (`primeui` by default, or the name passed to it), so an application already using that option has already declared the layer it needs. See the [Tailwind guide](/docs/styled/guides/theming/tailwind) for the declaration and why the order matters.
+
 ## PassThrough
 
 Defines the shared pass through properties per component type. Visit the [Pass Through Props](/docs/passthrough) documentation for more information.

package/data/llms/styled/guides/migration/updating-to-v11.md

@@ -171,7 +171,7 @@ Tokens follow the [Design Tokens Format Module](https://www.designtokens.org/tr/
 
 ### Moving existing customizations
 
-| v10                     | Where it goes in v11                                                                                                                                     |
+| v10                                      | Where it goes in v11                                                                                                                                     |
 | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | A SASS theme built from `theme.scss`     | Variable overrides become token overrides in a preset. A rewrite, but usually a much shorter file, since a preset only lists what differs from the base. |
 | CSS overrides against `p-*` classes      | Still work. The class names survived. Keep them as the fallback, since a token reaches every component that uses it while a selector reaches one.        |
@@ -190,7 +190,7 @@ v10 had one way to get unstyled components: the `unstyled` flag, set globally or
 | `<PrimeReactProvider unstyled>`    | The whole application is styled by something else                             |
 | `unstyled` on a component          | Most of the app is themed, one screen is not                                  |
 | Import from `primereact`           | Building a design system on the primitives, with no theme layer in the bundle |
-| Import from `@primereact/headless` | Hand-written markup as well as hand-written styling                          |
+| Import from `@primereact/headless` | Hand-written markup as well as hand-written styling                           |
 
 The last two are the difference from v10. There, unstyled mode meant the styled component with its class generation switched off, so the theming layer still shipped. In v11 the layers are separate packages, so importing from `primereact` means the styles never enter the bundle at all.
 

package/data/llms/styled/guides/theming/tailwind.md

@@ -48,6 +48,31 @@ In the CSS file that contains the tailwindcss import, add the `tailwindcss-prime
 @import 'tailwindcss-primeui';
 ```
 
+### Cascade layer
+
+PrimeReact resets the browser defaults on the native elements it renders (preflight, see the [configuration guide](/docs/styled/guides/configuration)), and those rules live in `primeui.base`, a cascade layer nested under `primeui`. A CSS layer is ordered where its name is first declared, not where its rules are written, so when `tailwindcss` declares its layers first, `primeui` ends up after them and the reset wins over utility classes.
+
+This only shows up in server-rendered apps, and only before hydration: PrimeReact injects the layer declaration at runtime, which lands after the application's own CSS on the first server-rendered response. Utility classes meant to override the reset lose until the client takes over, so the first paint is visibly wrong and corrects itself once React hydrates.
+
+Fix the order by declaring the layer above the `tailwindcss` import:
+
+```css
+@layer primeui;
+
+@import 'tailwindcss';
+@import 'tailwindcss-primeui';
+```
+
+Declaring `primeui` is enough on its own: `primeui.base`, where the reset lives, is nested inside it, and a nested layer's order is fixed by its parent's. Declaring it after the `tailwindcss` import does nothing, since the order is already fixed by then. This applies to any framework that declares its own layers, not just Tailwind.
+
+An application with `theme.options.cssLayer` enabled has already declared this layer: that option wraps PrimeReact's component styles, variables and global style in a layer named `primeui` by default, or in whatever name is passed to it (`{ name: 'myui' }` produces `myui`), and `@layer primeui;` covers the reset and that layer with the same line.
+
+Where Tailwind's own preflight is already in use, or another reset such as normalize.css or Bootstrap's reboot, turn off PrimeReact's instead of maintaining two resets:
+
+```tsx
+<PrimeReactProvider preflight={false}>
+```
+
 ### Tailwind v3
 
 Use the plugins option in your Tailwind config file to configure the plugin.

package/data/llms/tailwind/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/tailwind/components/datatable.md

@@ -63,7 +63,7 @@ export default function Preview() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -247,7 +247,7 @@ export default function BasicDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -337,7 +337,7 @@ function ProductTable({ stripedRows, showGridlines, size }: { stripedRows?: bool
                         </DataTableTHeadRow>
                     </DataTableTHead>
                     <DataTableTBody>
-                        {({ item }: { item: any }) => (
+                        {({ item }: { item: Product }) => (
                             <DataTableRow key={item.id}>
                                 <DataTableCell>
                                     <span className="font-medium">{item.name}</span>
@@ -464,7 +464,7 @@ export default function SingleSelectionDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -634,7 +634,7 @@ export default function MultipleSelectionDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -783,7 +783,7 @@ export default function CheckboxSelectionDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <PRDataTable.Selection>
@@ -909,7 +909,7 @@ export default function KeyboardDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -1081,7 +1081,7 @@ export default function SortDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -1252,7 +1252,7 @@ export default function MultiSortDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -1423,7 +1423,7 @@ export default function PresortDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -1599,7 +1599,7 @@ export default function PresortMultiDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -1724,7 +1724,7 @@ export default function PaginationDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <span className="font-medium">{item.name}</span>
@@ -1846,7 +1846,7 @@ export default function ScrollHorizontalDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>{item.id}</DataTableCell>
                                     <DataTableCell>
@@ -1971,7 +1971,7 @@ export default function ScrollFrozenColumnsMultiDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTableRow key={String(item.id)}>
                                     <DataTableCell frozen>
                                         <span className="text-xs text-surface-500 dark:text-surface-400 tabular-nums">#{String(item.id)}</span>
@@ -2089,6 +2089,7 @@ export default function ScrollFrozenRowsDemo() {
     const toggleLock = React.useCallback((id: number) => {
         setLockedIds((prev) => {
             if (prev.includes(id)) return prev.filter((x) => x !== id);
+
             if (prev.length >= 2) return prev;
 
             return [...prev, id];
@@ -2145,7 +2146,7 @@ export default function ScrollFrozenRowsDemo() {
         );
     }, []);
 
-    const tbodyRender = React.useCallback(({ item }: { item: any }) => renderRow(item as Customer), [renderRow]);
+    const tbodyRender = React.useCallback(({ item }: { item: Customer }) => renderRow(item as Customer), [renderRow]);
 
     return (
         <div className="w-full">
@@ -2313,7 +2314,7 @@ export default function ExpansionDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <React.Fragment key={item.id}>
                                     <DataTableRow>
                                         <DataTableCell>
@@ -2438,18 +2439,6 @@ import {
 import { Tag } from '@/components/ui/tag';
 import * as React from 'react';
 
-const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
-    INSTOCK: 'success',
-    LOWSTOCK: 'warn',
-    OUTOFSTOCK: 'danger'
-};
-
-const statusLabel: Record<string, string> = {
-    INSTOCK: 'In Stock',
-    LOWSTOCK: 'Low Stock',
-    OUTOFSTOCK: 'Out of Stock'
-};
-
 export default function ResizeDemo() {
     const [products, setProducts] = React.useState<Product[]>([]);
 
@@ -2484,7 +2473,7 @@ export default function ResizeDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -2611,7 +2600,7 @@ export default function ResizeExpandDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -2789,7 +2778,7 @@ export default function ReorderDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody key={columns.map((c) => c.field).join(',')}>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     {columns.map((col) => (
                                         <DataTableCell key={col.field}>{renderCell(col.field, item)}</DataTableCell>
@@ -2905,7 +2894,7 @@ export default function RowReorderDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Product; index: number }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <DataTableRowReorder rowIndex={index} className="cursor-grab text-surface-400 hover:text-surface-600">
@@ -3067,7 +3056,7 @@ export default function ColumnGroupDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Sale }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <span className="font-medium">{item.product}</span>
@@ -3252,7 +3241,7 @@ export default function ColumnGroupFilterSortDemo() {
                                         {({ value, onChange }: DataTableFilterInstance) => (
                                             <InputText
                                                 value={(value as string) ?? ''}
-                                                onChange={(e: any) => onChange(e, e.target.value)}
+                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e, e.target.value)}
                                                 placeholder="Search"
                                                 size="small"
                                                 fluid
@@ -3266,7 +3255,9 @@ export default function ColumnGroupFilterSortDemo() {
                                         {({ value, onChange }: DataTableFilterInstance) => (
                                             <InputText
                                                 value={(value as string) ?? ''}
-                                                onChange={(e: any) => onChange(e, e.target.value ? Number(e.target.value) : null, 'gte')}
+                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                                    onChange(e, e.target.value ? Number(e.target.value) : null, 'gte')
+                                                }
                                                 placeholder="≥"
                                                 size="small"
                                                 fluid
@@ -3279,7 +3270,7 @@ export default function ColumnGroupFilterSortDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Sale }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <span className="font-medium">{item.product}</span>
@@ -3402,7 +3393,7 @@ export default function FilterDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <span className="font-medium">{item.name}</span>
@@ -3489,7 +3480,7 @@ export default function TemplateDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -3611,7 +3602,7 @@ export default function ExportDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -3755,7 +3746,7 @@ export default function LoadingOverlayDemo() {
                                 </DataTableTHeadRow>
                             </DataTableTHead>
                             <DataTableTBody>
-                                {({ item }: { item: any }) => (
+                                {({ item }: { item: Product }) => (
                                     <DataTableRow key={item.id}>
                                         <DataTableCell>
                                             <div className="flex items-center gap-3">
@@ -3886,7 +3877,7 @@ export default function LoadingSkeletonDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) =>
+                            {({ item }: { item: Product }) =>
                                 isLoading ? (
                                     <DataTableRow key={item.id}>
                                         <DataTableCell>
@@ -3992,7 +3983,7 @@ export default function EmptyDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Record<string, unknown> }) => (
                                 <DataTableRow key={String(item.id)}>
                                     <DataTableCell>{String(item.name)}</DataTableCell>
                                     <DataTableCell>{String(item.category)}</DataTableCell>

package/data/llms/tailwind/components/inputgroup.md

@@ -246,7 +246,6 @@ Checkbox and RadioButton components can be combined with an input element under
 
 ```tsx
 'use client';
-import { Check } from '@primeicons/react';
 import { Checkbox } from '@/components/ui/checkbox';
 import { InputGroup, InputGroupAddon } from '@/components/ui/inputgroup';
 import { InputText } from '@/components/ui/inputtext';

package/data/llms/tailwind/components/select.md

@@ -7,6 +7,7 @@ Select is used to choose an item from a collection of options.
 import { Select, SelectList, SelectOption, SelectPopup, SelectPortal, SelectPositioner, SelectTrigger, SelectValue } from '@/components/ui/select';
 import type { SelectValueChangeEvent } from 'primereact/select';
 import * as React from 'react';
+
 const languages = [
     { label: 'Select your language', value: '' },
     { label: 'English', value: 'en' },
@@ -112,6 +113,7 @@ Choose a single value from a dropdown list of options.
 import { Select, SelectList, SelectOption, SelectPopup, SelectPortal, SelectPositioner, SelectTrigger, SelectValue } from '@/components/ui/select';
 import type { SelectValueChangeEvent } from 'primereact/select';
 import * as React from 'react';
+
 const languages = [
     { label: 'Select your language', value: '' },
     { label: 'English', value: 'en' },
@@ -635,6 +637,7 @@ export default function GroupDemo() {
                             <SelectList>
                                 {(() => {
                                     let index = 0;
+
                                     return jobCategories.flatMap((category) => [
                                         <SelectOption key={`group-${category.code}`} index={index++} group>
                                             {category.label}

package/data/llms/tailwind/components/sidebar.md

@@ -49,9 +49,10 @@ import {
     Users
 } from '@primeicons/react';
 import * as React from 'react';
+import type { IconProps } from '@primeicons/react/core';
 
 type NavItem = {
-    icon: React.FC<any>;
+    icon: React.FC<IconProps>;
     label: string;
     isActive?: boolean;
     badge?: string;
@@ -331,9 +332,12 @@ import { ChevronDown } from '@primeicons/react/chevron-down';
 import { SelectValueChangeEvent } from 'primereact/select';
 import { ToggleButtonGroupValueChangeEvent } from 'primereact/togglebuttongroup';
 import * as React from 'react';
+import type { CheckboxRootChangeEvent } from 'primereact/checkbox';
+import type { IconProps } from '@primeicons/react/core';
+import type { SidebarCollapsible, SidebarSide, SidebarVariant } from '@primereact/ui/sidebar';
 
 type NavItem = {
-    icon: React.FC<any>;
+    icon: React.FC<IconProps>;
     label: string;
     isActive?: boolean;
     badge?: string;
@@ -382,9 +386,9 @@ const collapsibleOptions = [
 ];
 
 export default function VariantsDemo() {
-    const [variant, setVariant] = React.useState<'sidebar' | 'floating' | 'inset'>('sidebar');
-    const [collapsible, setCollapsible] = React.useState<'icon' | 'offcanvas' | 'none'>('icon');
-    const [side, setSide] = React.useState<'left' | 'right'>('left');
+    const [variant, setVariant] = React.useState<SidebarVariant>('sidebar');
+    const [collapsible, setCollapsible] = React.useState<SidebarCollapsible>('icon');
+    const [side, setSide] = React.useState<SidebarSide>('left');
     const [overlay, setOverlay] = React.useState(false);
     const [openOnHover, setOpenOnHover] = React.useState(false);
     const [backdrop, setBackdrop] = React.useState(false);
@@ -394,7 +398,7 @@ export default function VariantsDemo() {
             <div className="flex flex-wrap items-center gap-4 mb-4">
                 <Select
                     value={variant}
-                    onValueChange={(e: SelectValueChangeEvent) => setVariant(e.value as any)}
+                    onValueChange={(e: SelectValueChangeEvent) => setVariant(e.value as SidebarVariant)}
                     options={variantOptions}
                     optionLabel="label"
                     optionValue="value"
@@ -413,7 +417,7 @@ export default function VariantsDemo() {
                 </Select>
                 <Select
                     value={collapsible}
-                    onValueChange={(e: SelectValueChangeEvent) => setCollapsible(e.value as any)}
+                    onValueChange={(e: SelectValueChangeEvent) => setCollapsible(e.value as SidebarCollapsible)}
                     options={collapsibleOptions}
                     optionLabel="label"
                     optionValue="value"
@@ -440,19 +444,19 @@ export default function VariantsDemo() {
                     <ToggleButton value="right">Right</ToggleButton>
                 </ToggleButtonGroup>
                 <div className="flex items-center gap-2">
-                    <Checkbox inputId="overlay-cb" checked={overlay} onCheckedChange={(e: any) => setOverlay(e.checked)} />
+                    <Checkbox inputId="overlay-cb" checked={overlay} onCheckedChange={(e: CheckboxRootChangeEvent) => setOverlay(e.checked)} />
                     <label htmlFor="overlay-cb" className="text-sm font-medium cursor-pointer">
                         Overlay
                     </label>
                 </div>
                 <div className="flex items-center gap-2">
-                    <Checkbox inputId="hover-cb" checked={openOnHover} onCheckedChange={(e: any) => setOpenOnHover(e.checked)} />
+                    <Checkbox inputId="hover-cb" checked={openOnHover} onCheckedChange={(e: CheckboxRootChangeEvent) => setOpenOnHover(e.checked)} />
                     <label htmlFor="hover-cb" className="text-sm font-medium cursor-pointer">
                         Open on Hover
                     </label>
                 </div>
                 <div className="flex items-center gap-2">
-                    <Checkbox inputId="backdrop-cb" checked={backdrop} onCheckedChange={(e: any) => setBackdrop(e.checked)} />
+                    <Checkbox inputId="backdrop-cb" checked={backdrop} onCheckedChange={(e: CheckboxRootChangeEvent) => setBackdrop(e.checked)} />
                     <label htmlFor="backdrop-cb" className="text-sm font-medium cursor-pointer">
                         Backdrop
                     </label>
@@ -1181,10 +1185,11 @@ import {
     SidebarTrigger
 } from '@/components/ui/sidebar';
 import { ChevronDown, Folder, Globe, Image, Sidebar as SidebarIcon, Video } from '@primeicons/react';
+import type { IconProps } from '@primeicons/react/core';
 
 type MenuItem = {
     label: string;
-    icon?: React.FC<any>;
+    icon?: React.FC<IconProps>;
     isActive?: boolean;
     children?: MenuItem[];
 };