@primereact/mcp 11.1.0 → 11.2.0

package/data/llms/llms-full.txt

@@ -4975,7 +4975,6 @@ function ChannelSlider({
     const { style, ...sliderOptions } = getSliderProps({ channel });
     const slider = useSlider(sliderOptions);
     const values = slider.range() ? (slider.state.value as number[]) : [slider.state.value as number];
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { style: _trackStyle, ...trackRest } = slider.trackProps;
     const { style: rootStyle, ...rootRest } = slider.rootProps;
 
@@ -5620,16 +5619,16 @@ const { rootProps, toggleMask, state } = useInputPassword();
 
 ## Styling with data attributes
 
-The root input includes `data-scope="password"` and `data-part="root"` for styling.
+The root input includes `data-scope="inputpassword"` and `data-part="root"` for styling.
 
 ```css
-[data-scope='password'][data-part='root'] {
+[data-scope='inputpassword'][data-part='root'] {
     padding: 0.5rem;
     border: 1px solid #ccc;
     border-radius: 0.25rem;
 }
 
-[data-scope='password'][data-part='root']:focus {
+[data-scope='inputpassword'][data-part='root']:focus {
     border-color: var(--p-primary-color);
     outline: none;
 }
@@ -10115,8 +10114,10 @@ Headless hooks for managing sidebar state, collapse behavior, layout coordinatio
 'use client';
 import { Bell, ChartBar, ChevronDown, Folder, Home, Inbox, Search, Users } from '@primeicons/react';
 import { useSidebar, useSidebarLayout, useSidebarMenuItem } from '@primereact/headless/sidebar';
+import type { UseSidebarLayoutExposes } from '@primereact/headless/sidebar';
 import * as React from 'react';
 import styles from './basic-demo.module.css';
+import type { IconProps } from '@primeicons/react/core';
 
 const navItems = [
     { icon: Home, label: 'Home', isActive: true },
@@ -10137,7 +10138,7 @@ function CollapsibleMenuItem({
     subItems,
     isOpen
 }: {
-    icon: React.FC<any>;
+    icon: React.FC<IconProps>;
     label: string;
     subItems: { label: string; isActive?: boolean }[];
     isOpen: boolean;
@@ -10166,7 +10167,7 @@ function CollapsibleMenuItem({
     );
 }
 
-function SidebarContent({ layout }: { layout: any }) {
+function SidebarContent({ layout }: { layout: UseSidebarLayoutExposes }) {
     const { rootProps, state, toggle } = useSidebar({ id: 'main', layout, defaultOpen: true, collapsible: 'icon' });
 
     return (
@@ -12994,6 +12995,7 @@ export default function BasicDemo() {
             <ul {...getNodesProps()} className="m-0 p-0 list-none">
                 {visibleKeys.map((key) => {
                     const node = findNodeByKey(key);
+
                     if (!node) return null;
 
                     const info = findNodeInfo(key);
@@ -24169,9 +24171,10 @@ An unstyled layout component for building application navigation with collapsibl
 'use client';
 import { Bell, Calendar, ChartBar, CreditCard, EllipsisV, Folder, Home, Inbox, Search, ShoppingCart, Star, Users } from '@primeicons/react';
 import { Sidebar } from 'primereact/sidebar';
+import type { IconProps } from '@primeicons/react/core';
 
 type NavItem = {
-    icon: React.FC<any>;
+    icon: React.FC<IconProps>;
     label: string;
     isActive?: boolean;
     badge?: string;
@@ -33632,6 +33635,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
@@ -35544,7 +35612,7 @@ export default function Preview() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -35678,7 +35746,7 @@ export default function BasicDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>{item.code}</DataTable.Cell>
                                     <DataTable.Cell>{item.name}</DataTable.Cell>
@@ -35778,7 +35846,7 @@ export default function SizeDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.name}</span>
@@ -35895,7 +35963,7 @@ export default function GridlinesDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.name}</span>
@@ -36012,7 +36080,7 @@ export default function StripedRowsDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.name}</span>
@@ -36145,7 +36213,7 @@ export default function SingleSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -36303,7 +36371,7 @@ export default function MultipleSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -36462,7 +36530,7 @@ export default function CheckboxSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <DataTable.Selection>
@@ -36624,7 +36692,7 @@ export default function RadioSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <DataTable.Selection mode="radio">
@@ -36778,7 +36846,7 @@ export default function KeyboardDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -36949,7 +37017,7 @@ export default function SortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -37105,7 +37173,7 @@ export default function MultiSortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -37267,7 +37335,7 @@ export default function PresortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -37442,7 +37510,7 @@ export default function PresortMultiDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -37565,7 +37633,7 @@ export default function PaginationDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -37722,7 +37790,7 @@ export default function ScrollVerticalDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.name}</span>
@@ -37846,7 +37914,7 @@ export default function ScrollHorizontalDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>{item.id}</DataTable.Cell>
                                     <DataTable.Cell>
@@ -37962,7 +38030,7 @@ export default function ScrollFlexDemo() {
                                                 </DataTable.THeadRow>
                                             </DataTable.THead>
                                             <DataTable.TBody>
-                                                {({ item }: { item: any }) => (
+                                                {({ item }: { item: Customer }) => (
                                                     <DataTable.Row key={item.id}>
                                                         <DataTable.Cell>
                                                             <span className="font-medium">{item.name}</span>
@@ -38089,7 +38157,7 @@ export default function ScrollFrozenColumnsDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell frozen>
                                         <span className="font-semibold">{String(item.name)}</span>
@@ -38205,7 +38273,7 @@ export default function ScrollFrozenColumnsMultiDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell frozen>
                                         <span className="text-xs text-surface-500 dark:text-surface-400 tabular-nums">#{String(item.id)}</span>
@@ -38310,6 +38378,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];
@@ -38366,7 +38435,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">
@@ -38519,7 +38588,7 @@ export default function ExpansionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <React.Fragment key={item.id}>
                                     <DataTable.Row>
                                         <DataTable.Cell>
@@ -38633,6 +38702,7 @@ import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
+import type { InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
 
 const statusOptions = [
     { label: 'In Stock', value: 'INSTOCK' },
@@ -38708,7 +38778,7 @@ export default function CellEditDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Product; index: number }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <img
@@ -38727,7 +38797,7 @@ export default function CellEditDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={item.name}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${index}-name`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -38744,7 +38814,7 @@ export default function CellEditDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={item.category}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${index}-category`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -38759,7 +38829,7 @@ export default function CellEditDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputNumber.Root
                                                     defaultValue={item.quantity}
-                                                    onValueChange={(e: any) => {
+                                                    onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                         pendingValueRef.current[`${index}-quantity`] = e.value;
                                                     }}
                                                     size="small"
@@ -38780,7 +38850,7 @@ export default function CellEditDemo() {
                                                     defaultValue={item.price}
                                                     mode="currency"
                                                     currency="USD"
-                                                    onValueChange={(e: any) => {
+                                                    onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                         pendingValueRef.current[`${index}-price`] = e.value;
                                                     }}
                                                     size="small"
@@ -38876,6 +38946,7 @@ import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
+import type { InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
 
 const statusOptions = [
     { label: 'In Stock', value: 'INSTOCK' },
@@ -38993,7 +39064,7 @@ export default function CellEditSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Product; index: number }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <DataTable.Selection>
@@ -39028,7 +39099,7 @@ export default function CellEditSelectionDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={item.name}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${index}-name`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -39045,7 +39116,7 @@ export default function CellEditSelectionDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={item.category}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${index}-category`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -39060,7 +39131,7 @@ export default function CellEditSelectionDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputNumber.Root
                                                     defaultValue={item.quantity}
-                                                    onValueChange={(e: any) => {
+                                                    onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                         pendingValueRef.current[`${index}-quantity`] = e.value;
                                                     }}
                                                     size="small"
@@ -39081,7 +39152,7 @@ export default function CellEditSelectionDemo() {
                                                     defaultValue={item.price}
                                                     mode="currency"
                                                     currency="USD"
-                                                    onValueChange={(e: any) => {
+                                                    onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                         pendingValueRef.current[`${index}-price`] = e.value;
                                                     }}
                                                     size="small"
@@ -39177,6 +39248,8 @@ import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
+import type { DataTableEditingEvent } from '@primereact/ui/datatable';
+import type { InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
 
 const statusOptions = [
     { label: 'In Stock', value: 'INSTOCK' },
@@ -39232,7 +39305,7 @@ export default function RowEditDemo() {
                 dataKey="id"
                 editMode="row"
                 editingKeys={editingKeys}
-                onEditingKeysChange={(e: any) => setEditingKeys(e.value)}
+                onEditingKeysChange={(e: DataTableEditingEvent) => setEditingKeys(e.value)}
                 onRowEditSave={handleSave}
                 onRowEditCancel={handleCancel}
             >
@@ -39261,7 +39334,7 @@ export default function RowEditDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => {
+                            {({ item, index }: { item: Product; index: number }) => {
                                 const id = item.id;
 
                                 return (
@@ -39287,7 +39360,7 @@ export default function RowEditDemo() {
                                                     <DataTable.CellEditorContent>
                                                         <InputText
                                                             defaultValue={item.name}
-                                                            onChange={(e: any) => {
+                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                                 draftRef.current[id] = { ...draftRef.current[id], name: e.target.value };
                                                             }}
                                                             fluid
@@ -39303,7 +39376,7 @@ export default function RowEditDemo() {
                                                     <DataTable.CellEditorContent>
                                                         <InputText
                                                             defaultValue={item.category}
-                                                            onChange={(e: any) => {
+                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                                 draftRef.current[id] = { ...draftRef.current[id], category: e.target.value };
                                                             }}
                                                             fluid
@@ -39317,7 +39390,7 @@ export default function RowEditDemo() {
                                                     <DataTable.CellEditorContent>
                                                         <InputNumber.Root
                                                             defaultValue={item.quantity}
-                                                            onValueChange={(e: any) => {
+                                                            onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                                 draftRef.current[id] = { ...draftRef.current[id], quantity: e.value ?? 0 };
                                                             }}
                                                             fluid
@@ -39337,7 +39410,7 @@ export default function RowEditDemo() {
                                                             defaultValue={item.price}
                                                             mode="currency"
                                                             currency="USD"
-                                                            onValueChange={(e: any) => {
+                                                            onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                                 draftRef.current[id] = { ...draftRef.current[id], price: e.value ?? 0 };
                                                             }}
                                                             fluid
@@ -39440,6 +39513,7 @@ import { Database } from '@primeicons/react/database';
 import { Avatar } from '@primereact/ui/avatar';
 import { Badge } from '@primereact/ui/badge';
 import { DataTable } from '@primereact/ui/datatable';
+import type { RowGroupMeta } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -39481,7 +39555,7 @@ export default function RowGroupDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, groupMeta }: { item: any; groupMeta?: any }) => {
+                            {({ item, groupMeta }: { item: Customer; groupMeta?: RowGroupMeta }) => {
                                 const repName = item.representative.name as string;
                                 const repImage = item.representative.image;
                                 const groupTotal = customers.reduce(
@@ -39572,6 +39646,7 @@ import { CustomerService, type Customer } from '@/shared/services/customer.servi
 import { Database } from '@primeicons/react/database';
 import { Avatar } from '@primereact/ui/avatar';
 import { DataTable } from '@primereact/ui/datatable';
+import type { RowGroupMeta } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -39622,7 +39697,7 @@ export default function RowGroupRowSpanDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, groupMeta }: { item: any; groupMeta?: any }) => (
+                            {({ item, groupMeta }: { item: Customer; groupMeta?: RowGroupMeta }) => (
                                 <DataTable.Row key={item.id}>
                                     {groupMeta?.isGroupStart && (
                                         <DataTable.Cell rowSpan={groupMeta.groupCount}>
@@ -39702,18 +39777,6 @@ import { DataTable } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/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[]>([]);
 
@@ -39748,7 +39811,7 @@ export default function ResizeDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -39859,7 +39922,7 @@ export default function ResizeExpandDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -40021,7 +40084,7 @@ export default function ReorderDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody key={columns.map((c) => c.field).join(',')}>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     {columns.map((col) => (
                                         <DataTable.Cell key={col.field}>{renderCell(col.field, item)}</DataTable.Cell>
@@ -40124,7 +40187,7 @@ export default function RowReorderDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Product; index: number }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <DataTable.RowReorder rowIndex={index} className="cursor-grab text-surface-400 hover:text-surface-600">
@@ -40293,6 +40356,7 @@ function ColumnsPopover({ columns, visibleFields, onColumnsChange, onVisibleFiel
 
         if (set.has(field)) set.delete(field);
         else set.add(field);
+
         onVisibleFieldsChange(Array.from(set));
     };
 
@@ -40394,7 +40458,7 @@ export default function ColumnToggleDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody key={visibleFields.join(',') + '|' + columns.map((c) => c.field).join(',')}>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     {visibleColumns.map((col) => (
                                         <DataTable.Cell key={col.field}>{renderCell(col.field, item)}</DataTable.Cell>
@@ -40515,7 +40579,7 @@ export default function ColumnGroupDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Sale }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.product}</span>
@@ -40684,7 +40748,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
@@ -40698,7 +40762,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
@@ -40711,7 +40777,7 @@ export default function ColumnGroupFilterSortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Sale }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.product}</span>
@@ -40863,7 +40929,7 @@ export default function FilterBasicDemo() {
                         type="search"
                         placeholder="Keyword Search"
                         value={globalFilter}
-                        onChange={(e: any) => setGlobalFilter(e.target.value)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
                     />
                 </IconField.Root>
             </div>
@@ -40900,7 +40966,7 @@ export default function FilterBasicDemo() {
                                         {({ value, onChange, isActive }: 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 name..."
                                                 invalid={isActive && !value}
                                                 size="small"
@@ -40914,7 +40980,7 @@ export default function FilterBasicDemo() {
                                         {({ 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 country..."
                                                 size="small"
                                                 fluid
@@ -40939,7 +41005,7 @@ export default function FilterBasicDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: (typeof customers)[number] }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{String(item.name)}</span>
@@ -41205,7 +41271,7 @@ export default function FilterAdvancedDemo() {
                         type="search"
                         placeholder="Keyword Search"
                         value={globalFilter}
-                        onChange={(e: any) => setGlobalFilter(e.target.value)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
                     />
                 </IconField.Root>
             </div>
@@ -41297,7 +41363,9 @@ export default function FilterAdvancedDemo() {
                                                             </div>
                                                             <InputText
                                                                 value={(constraint.value as string) ?? ''}
-                                                                onChange={(e: any) => onConstraintChange(e, idx, e.target.value)}
+                                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                                                    onConstraintChange(e, idx, e.target.value)
+                                                                }
                                                                 placeholder="Search by name..."
                                                                 size="small"
                                                                 fluid
@@ -41364,7 +41432,9 @@ export default function FilterAdvancedDemo() {
                                                             />
                                                             <InputText
                                                                 value={(constraint.value as string) ?? ''}
-                                                                onChange={(e: any) => onConstraintChange(e, idx, e.target.value)}
+                                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                                                    onConstraintChange(e, idx, e.target.value)
+                                                                }
                                                                 placeholder="Search by country..."
                                                                 size="small"
                                                                 fluid
@@ -41852,7 +41922,7 @@ export default function FilterAdvancedDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{String(item.name)}</span>
@@ -42044,7 +42114,7 @@ export default function ExportDemo() {
                         </DataTable.THeadRow>
                     </DataTable.THead>
                     <DataTable.TBody>
-                        {({ item }: { item: any }) => (
+                        {({ item }: { item: Product }) => (
                             <DataTable.Row key={item.id}>
                                 <DataTable.Cell>
                                     <div className="flex items-center gap-3">
@@ -42170,6 +42240,7 @@ function mockFetch(params: {
                     const vb = b[field];
 
                     if (va < vb) return -1 * dir;
+
                     if (va > vb) return 1 * dir;
 
                     return 0;
@@ -42223,7 +42294,7 @@ export default function LazyDemo() {
                     type="search"
                     placeholder="Search code / name / category..."
                     value={search}
-                    onChange={(e: any) => setSearch(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
                     style={{ minWidth: '20rem' }}
                 />
                 <span className="text-xs text-surface-500 dark:text-surface-400">Last lazy event: {lastEvent || '—'}</span>
@@ -42309,7 +42380,7 @@ export default function LazyDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell>
                                         <span className="font-mono text-xs text-surface-500 dark:text-surface-400">{String(item.code)}</span>
@@ -42467,7 +42538,7 @@ export default function LoadingOverlayDemo() {
                                 </DataTable.THeadRow>
                             </DataTable.THead>
                             <DataTable.TBody>
-                                {({ item }: { item: any }) => (
+                                {({ item }: { item: Product }) => (
                                     <DataTable.Row key={item.id}>
                                         <DataTable.Cell>
                                             <div className="flex items-center gap-3">
@@ -42587,7 +42658,7 @@ export default function LoadingSkeletonDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) =>
+                            {({ item }: { item: Product }) =>
                                 isLoading ? (
                                     <DataTable.Row key={item.id}>
                                         <DataTable.Cell>
@@ -42681,7 +42752,7 @@ export default function EmptyDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Record<string, unknown> }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell>{String(item.name)}</DataTable.Cell>
                                     <DataTable.Cell>{String(item.category)}</DataTable.Cell>
@@ -42740,6 +42811,7 @@ import { InputNumber } from '@primereact/ui/inputnumber';
 import { InputText } from '@primereact/ui/inputtext';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
+import type { InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
     INSTOCK: 'success',
@@ -42808,7 +42880,7 @@ export default function AdvancedDemo() {
                         type="search"
                         placeholder="Keyword search"
                         value={globalFilter}
-                        onChange={(e: any) => setGlobalFilter(e.target.value)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
                         className="w-full"
                     />
                 </IconField.Root>
@@ -42860,7 +42932,7 @@ export default function AdvancedDemo() {
                                         {({ 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
@@ -42873,7 +42945,7 @@ export default function AdvancedDemo() {
                                         {({ 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
@@ -42887,7 +42959,7 @@ export default function AdvancedDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Product; index: number }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <DataTable.CellEditor field="name" rowIndex={index} rowData={item}>
@@ -42897,7 +42969,7 @@ export default function AdvancedDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={String(item.name)}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${item.id}-name`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -42914,7 +42986,7 @@ export default function AdvancedDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={String(item.category)}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${item.id}-category`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -42931,7 +43003,7 @@ export default function AdvancedDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputNumber.Root
                                                     defaultValue={Number(item.price)}
-                                                    onValueChange={(e: any) => {
+                                                    onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                         pendingValueRef.current[`${item.id}-price`] = e.value;
                                                     }}
                                                     mode="currency"
@@ -43002,7 +43074,13 @@ import { Times } from '@primeicons/react/times';
 import { Trash } from '@primeicons/react/trash';
 import { Button } from '@primereact/ui/button';
 import { Checkbox, type CheckboxRootChangeEvent } from '@primereact/ui/checkbox';
-import type { DataTableColumnReorderEvent, DataTablePaginationInstance, DataTableSelectionInstance, DataTableSortEvent, SortOrder } from '@primereact/ui/datatable';
+import type {
+    DataTableColumnReorderEvent,
+    DataTablePaginationInstance,
+    DataTableSelectionInstance,
+    DataTableSortEvent,
+    SortOrder
+} from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
 import { Drawer, type DrawerRootChangeEvent } from '@primereact/ui/drawer';
 import { IconField } from '@primereact/ui/iconfield';
@@ -43456,7 +43534,7 @@ export default function DatabaseEditorDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody key={columns.map((c) => c.field).join(',')}>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Row; index: number }) => (
                                 <DataTable.Row key={String(item.__rid)}>
                                     <DataTable.Cell frozen>
                                         <DataTable.Selection>
@@ -52267,6 +52345,7 @@ import { InputGroup } from '@primereact/ui/inputgroup';
 import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
 import * as React from 'react';
+
 const options = [
     { label: 'HEX', value: 'hex' },
     { label: 'RGBA', value: 'rgba' },
@@ -52412,6 +52491,7 @@ import { InputGroup } from '@primereact/ui/inputgroup';
 import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
 import * as React from 'react';
+
 const options = [
     { label: 'HEX', value: 'hex' },
     { label: 'RGBA', value: 'rgba' },
@@ -52624,6 +52704,7 @@ import { Button } from '@primereact/ui/button';
 import { InputColor, type InputColorRootChangeEvent } from '@primereact/ui/inputcolor';
 import { InputText } from '@primereact/ui/inputtext';
 import * as React from 'react';
+
 export default function ControlledDemo() {
     const [value, setValue] = React.useState<ColorInstance>(parseColor('#000000'));
     const [endValue, setEndValue] = React.useState<ColorInstance>(parseColor('#000000'));
@@ -69277,11 +69358,14 @@ const nodes: TreeNodeData[] = [
 function findPath(list: TreeNodeData[], key: string, trail: string[] = []): { path: string[]; label: string } | undefined {
     for (const node of list) {
         if (node.key === key) return { path: trail, label: node.label as string };
+
         if (node.children) {
             const found = findPath(node.children, key, [...trail, node.key as string]);
+
             if (found) return found;
         }
     }
+
     return undefined;
 }
 
@@ -69296,9 +69380,12 @@ export default function TreeDemo() {
     // Expand the path to the selected node when the popup opens.
     const onOpenChange = (e: SelectOpenChangeEvent) => {
         const isOpen = !!e.value;
+
         setOpen(isOpen);
+
         if (isOpen && selectedInfo) {
             const next: TreeExpandedKeys = {};
+
             for (const key of selectedInfo.path) next[key] = true;
             setExpandedKeys(next);
         }
@@ -69416,9 +69503,10 @@ import { Avatar } from '@primereact/ui/avatar';
 import { Button } from '@primereact/ui/button';
 import { Sidebar } from '@primereact/ui/sidebar';
 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;
@@ -69640,9 +69728,11 @@ import { ToggleButton } from '@primereact/ui/togglebutton';
 import { ToggleSwitch, type ToggleSwitchRootChangeEvent } from '@primereact/ui/toggleswitch';
 import { ToggleButtonGroup, ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
 import * as React from 'react';
+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;
@@ -69691,9 +69781,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);
@@ -69705,7 +69795,7 @@ export default function VariantsDemo() {
                     <Label>Variant</Label>
                     <Select.Root
                         value={variant}
-                        onValueChange={(e: SelectValueChangeEvent) => setVariant(e.value as any)}
+                        onValueChange={(e: SelectValueChangeEvent) => setVariant(e.value as SidebarVariant)}
                         options={variantOptions}
                         optionLabel="label"
                         optionValue="value"
@@ -69730,7 +69820,7 @@ export default function VariantsDemo() {
                     <Label>Collapsible</Label>
                     <Select.Root
                         value={collapsible}
-                        onValueChange={(e: SelectValueChangeEvent) => setCollapsible(e.value as any)}
+                        onValueChange={(e: SelectValueChangeEvent) => setCollapsible(e.value as SidebarCollapsible)}
                         options={collapsibleOptions}
                         optionLabel="label"
                         optionValue="value"
@@ -70666,10 +70756,11 @@ import { useIsMobile } from '@primereact/hooks';
 import { Avatar } from '@primereact/ui/avatar';
 import { Button } from '@primereact/ui/button';
 import { Sidebar } from '@primereact/ui/sidebar';
+import type { IconProps } from '@primeicons/react/core';
 
 type MenuItem = {
     label: string;
-    icon?: React.FC<any>;
+    icon?: React.FC<IconProps>;
     isActive?: boolean;
     children?: MenuItem[];
 };
@@ -79194,6 +79285,7 @@ function fetchChildren(parent: TreeNodeData): Promise<TreeNodeData[]> {
 function setChildren(list: TreeNodeData[], key: string, children: TreeNodeData[]): TreeNodeData[] {
     return list.map((n) => {
         if (n.key === key) return { ...n, children, loading: false };
+
         if (n.children?.length) return { ...n, children: setChildren(n.children, key, children) };
 
         return n;
@@ -79203,6 +79295,7 @@ function setChildren(list: TreeNodeData[], key: string, children: TreeNodeData[]
 function setLoading(list: TreeNodeData[], key: string, loading: boolean): TreeNodeData[] {
     return list.map((n) => {
         if (n.key === key) return { ...n, loading };
+
         if (n.children?.length) return { ...n, children: setLoading(n.children, key, loading) };
 
         return n;
@@ -79295,6 +79388,7 @@ export default function LoadingOverlayDemo() {
         setLoading(true);
         setTimeout(async () => {
             const data = await NodeService.getTreeNodes();
+
             setNodes(data);
             setLoading(false);
         }, 1500);
@@ -79365,6 +79459,7 @@ export default function LoadingSkeletonDemo() {
         setLoading(true);
         setTimeout(async () => {
             const data = await NodeService.getTreeNodes();
+
             setNodes(data);
             setLoading(false);
         }, 1500);
@@ -79433,6 +79528,7 @@ export default function EmptyDemo() {
 
     const addNode = () => {
         const next: TreeNodeData = { key: `root-${nodes.length}`, label: `New Folder ${nodes.length + 1}` };
+
         setNodes((prev) => [...prev, next]);
     };
 
@@ -79723,6 +79819,7 @@ import { Image as ImageIcon } from '@primeicons/react/image';
 import { Video } from '@primeicons/react/video';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -79736,7 +79833,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -79833,7 +79932,7 @@ export default function Preview() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -79944,6 +80043,7 @@ import { ChevronDown } from '@primeicons/react/chevron-down';
 import { ChevronRight } from '@primeicons/react/chevron-right';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import * as React from 'react';
 
 interface TreeNode {
@@ -80007,7 +80107,7 @@ export default function BasicDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -80050,6 +80150,7 @@ import { Image as ImageIcon } from '@primeicons/react/image';
 import { Video } from '@primeicons/react/video';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import { ToggleButton } from '@primereact/ui/togglebutton';
 import { ToggleButtonGroup } from '@primereact/ui/togglebuttongroup';
@@ -80065,7 +80166,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -80172,7 +80275,7 @@ export default function TreeTableSizeDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -80238,6 +80341,7 @@ import { Image as ImageIcon } from '@primeicons/react/image';
 import { Video } from '@primeicons/react/video';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -80251,7 +80355,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -80335,7 +80441,7 @@ export default function TreeTableGridlinesDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -80401,6 +80507,7 @@ import { Image as ImageIcon } from '@primeicons/react/image';
 import { Video } from '@primeicons/react/video';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -80414,7 +80521,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -80498,7 +80607,7 @@ export default function TreeTableStripedRowsDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -80563,6 +80672,7 @@ import { ChevronRight } from '@primeicons/react/chevron-right';
 import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
 import type { DataTableExpansionEvent, DataTableSelectionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -80585,7 +80695,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -80628,7 +80740,7 @@ export default function SingleSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -80691,6 +80803,7 @@ import { ChevronRight } from '@primeicons/react/chevron-right';
 import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
 import type { DataTableExpansionEvent, DataTableSelectionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -80713,7 +80826,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -80757,7 +80872,7 @@ export default function MultipleSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -80828,6 +80943,7 @@ import type { CheckboxRootChangeEvent } from '@primereact/ui/checkbox';
 import type { DataTableSelectionInstance } from '@primereact/ui/datatable';
 import { Checkbox } from '@primereact/ui/checkbox';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -80841,7 +80957,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -80968,7 +81086,7 @@ export default function TreeTableSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody key={JSON.stringify(selectionKeys)}>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -81049,6 +81167,7 @@ import type { DataTableExpansionEvent, DataTableSelectionEvent } from '@primerea
 import type { DataTableSelectionInstance } from '@primereact/ui/datatable';
 import type { RadioButtonRootChangeEvent } from '@primereact/ui/radiobutton';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { RadioButton } from '@primereact/ui/radiobutton';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
@@ -81072,7 +81191,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -81116,7 +81237,7 @@ export default function RadioSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <DataTable.Selection mode="radio">
@@ -81194,6 +81315,7 @@ import { NodeService, type TreeTableNode } from '@/shared/services/node.service'
 import type { DataTableExpansionEvent, DataTableSelectionEvent } from '@primereact/ui/datatable';
 import { Badge } from '@primereact/ui/badge';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -81216,7 +81338,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -81275,7 +81399,7 @@ export default function KeyboardDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -81345,6 +81469,7 @@ import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import type { DataTableSortOrderInstance } from '@primereact/ui/datatable';
 import { Badge } from '@primereact/ui/badge';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { OverlayBadge } from '@primereact/ui/overlaybadge';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
@@ -81368,7 +81493,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -81440,7 +81567,7 @@ export default function SortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -81506,6 +81633,7 @@ import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import type { DataTableSortOrderInstance } from '@primereact/ui/datatable';
 import { Badge } from '@primereact/ui/badge';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { OverlayBadge } from '@primereact/ui/overlaybadge';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
@@ -81529,7 +81657,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -81601,7 +81731,7 @@ export default function MultiSortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -81665,6 +81795,7 @@ import { SortAmountUpAlt } from '@primeicons/react/sort-amount-up-alt';
 import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -81687,7 +81818,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -81762,7 +81895,7 @@ export default function PresortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -81826,6 +81959,7 @@ import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import type { DataTableSortOrderInstance } from '@primereact/ui/datatable';
 import { Badge } from '@primereact/ui/badge';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { OverlayBadge } from '@primereact/ui/overlaybadge';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
@@ -81849,7 +81983,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -81953,7 +82089,7 @@ export default function PresortMultiDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -82023,6 +82159,7 @@ import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import type { PaginatorRootChangeEvent } from '@primereact/ui/paginator';
 import type { DataTablePaginationInstance } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Paginator } from '@primereact/ui/paginator';
 import { Tag } from '@primereact/ui/tag';
 import type { PaginatorPagesInstance } from '@primereact/ui/paginator';
@@ -82047,7 +82184,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -82088,7 +82227,7 @@ export default function PaginationDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -82197,6 +82336,7 @@ import { Image as ImageIcon } from '@primeicons/react/image';
 import { Video } from '@primeicons/react/video';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -82220,7 +82360,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -82276,7 +82418,7 @@ export default function TreeTableScrollDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -82337,6 +82479,7 @@ import { ChevronRight } from '@primeicons/react/chevron-right';
 import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -82359,7 +82502,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -82409,7 +82554,7 @@ export default function ScrollHorizontalDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -82475,6 +82620,7 @@ import { ChevronRight } from '@primeicons/react/chevron-right';
 import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -82497,7 +82643,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -82538,7 +82686,7 @@ export default function ScrollFlexDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -82604,6 +82752,7 @@ import { Image as ImageIcon } from '@primeicons/react/image';
 import { Video } from '@primeicons/react/video';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -82623,7 +82772,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -82697,7 +82848,7 @@ export default function TreeTableFrozenColumnsDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell frozen>
                                         <div className="flex items-center gap-2">
@@ -82763,6 +82914,7 @@ import { ChevronRight } from '@primeicons/react/chevron-right';
 import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -82785,7 +82937,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -82835,7 +82989,7 @@ export default function ScrollFrozenColumnsMultiDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell frozen>
                                         <div className="flex items-center gap-2">
@@ -82906,6 +83060,7 @@ import { LockOpen } from '@primeicons/react/lock-open';
 import { Video } from '@primeicons/react/video';
 import { Button } from '@primereact/ui/button';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -82925,7 +83080,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -82989,7 +83146,7 @@ export default function TreeTableFrozenRowsDemo() {
         </DataTable.Row>
     );
 
-    const renderBodyRow = (item: any) => (
+    const renderBodyRow = (item: DataTableTreeRow<TreeNode>) => (
         <DataTable.Row key={String(item.key)}>
             <DataTable.Cell>
                 <div className="flex items-center gap-2">
@@ -83043,7 +83200,7 @@ export default function TreeTableFrozenRowsDemo() {
                         <DataTable.FrozenTBody>
                             {lockedFolders.flatMap((folder) => flattenBranch(folder).map((node) => renderFrozenRow(node)))}
                         </DataTable.FrozenTBody>
-                        <DataTable.TBody>{({ item }: { item: any }) => renderBodyRow(item)}</DataTable.TBody>
+                        <DataTable.TBody>{({ item }: { item: DataTableTreeRow<TreeNode> }) => renderBodyRow(item)}</DataTable.TBody>
                         <DataTable.EmptyTBody>
                             <DataTable.Row>
                                 <DataTable.Cell colSpan={4}>
@@ -83087,6 +83244,7 @@ import { Image as ImageIcon } from '@primeicons/react/image';
 import { Video } from '@primeicons/react/video';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { InputText } from '@primereact/ui/inputtext';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
@@ -83101,7 +83259,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -83208,7 +83368,7 @@ export default function TreeTableCellEditDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: DataTableTreeRow<TreeNode>; index: number }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -83226,7 +83386,7 @@ export default function TreeTableCellEditDemo() {
                                                 <DataTable.CellEditorContent>
                                                     <InputText
                                                         defaultValue={String(item.name)}
-                                                        onChange={(e: any) => {
+                                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                             pendingValueRef.current[`${item.key}-name`] = e.target.value;
                                                         }}
                                                         size="small"
@@ -83242,7 +83402,7 @@ export default function TreeTableCellEditDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={String(item.size)}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${item.key}-size`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -83259,7 +83419,7 @@ export default function TreeTableCellEditDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={String(item.type)}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${item.key}-type`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -83313,6 +83473,7 @@ import type { DataTableSelectionInstance } from '@primereact/ui/datatable';
 import { Badge } from '@primereact/ui/badge';
 import { Checkbox } from '@primereact/ui/checkbox';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { InputText } from '@primereact/ui/inputtext';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
@@ -83336,7 +83497,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -83432,7 +83595,7 @@ export default function CellEditSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: DataTableTreeRow<TreeTableNode>; index: number }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <DataTable.Selection>
@@ -83470,7 +83633,7 @@ export default function CellEditSelectionDemo() {
                                                 <DataTable.CellEditorContent>
                                                     <InputText
                                                         defaultValue={String(item.name)}
-                                                        onChange={(e: any) => {
+                                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                             pendingValueRef.current[`${item.key}-name`] = e.target.value;
                                                         }}
                                                         size="small"
@@ -83488,7 +83651,7 @@ export default function CellEditSelectionDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={String(item.size)}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${item.key}-size`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -83546,9 +83709,11 @@ import { Times } from '@primeicons/react/times';
 import type { DataTableExpansionEvent, DataTableRowEditEvent } from '@primereact/ui/datatable';
 import { Button } from '@primereact/ui/button';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { InputText } from '@primereact/ui/inputtext';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
+import type { DataTableEditingEvent } from '@primereact/ui/datatable';
 
 const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> = {
     Folder: 'warn',
@@ -83559,7 +83724,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -83655,7 +83822,7 @@ export default function TreeTableRowEditDemo() {
                 onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
                 editMode="row"
                 editingKeys={editingKeys}
-                onEditingKeysChange={(e: any) => setEditingKeys(e.value)}
+                onEditingKeysChange={(e: DataTableEditingEvent) => setEditingKeys(e.value)}
                 onRowEditSave={handleSave}
                 onRowEditCancel={handleCancel}
             >
@@ -83678,7 +83845,7 @@ export default function TreeTableRowEditDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => {
+                            {({ item, index }: { item: DataTableTreeRow<TreeNode>; index: number }) => {
                                 const key = String(item.key);
 
                                 return (
@@ -83700,7 +83867,7 @@ export default function TreeTableRowEditDemo() {
                                                         <DataTable.CellEditorContent>
                                                             <InputText
                                                                 defaultValue={String(item.name)}
-                                                                onChange={(e: any) => {
+                                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                                     draftRef.current[key] = { ...draftRef.current[key], name: e.target.value };
                                                                 }}
                                                                 size="small"
@@ -83716,7 +83883,7 @@ export default function TreeTableRowEditDemo() {
                                                     <DataTable.CellEditorContent>
                                                         <InputText
                                                             defaultValue={String(item.size)}
-                                                            onChange={(e: any) => {
+                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                                 draftRef.current[key] = { ...draftRef.current[key], size: e.target.value };
                                                             }}
                                                             size="small"
@@ -83733,7 +83900,7 @@ export default function TreeTableRowEditDemo() {
                                                     <DataTable.CellEditorContent>
                                                         <InputText
                                                             defaultValue={String(item.type)}
-                                                            onChange={(e: any) => {
+                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                                 draftRef.current[key] = { ...draftRef.current[key], type: e.target.value };
                                                             }}
                                                             size="small"
@@ -83800,6 +83967,7 @@ import { ChevronRight } from '@primeicons/react/chevron-right';
 import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -83822,7 +83990,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -83868,7 +84038,7 @@ export default function ResizeDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -83929,6 +84099,7 @@ import { ChevronRight } from '@primeicons/react/chevron-right';
 import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -83951,7 +84122,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -83998,7 +84171,7 @@ export default function ResizeExpandDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -84068,6 +84241,7 @@ import { Image as ImageIcon } from '@primeicons/react/image';
 import { Video } from '@primeicons/react/video';
 import type { DataTableColumnReorderEvent, DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -84086,7 +84260,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -84103,7 +84279,7 @@ const initialColumns: Column[] = [
     { field: 'type', header: 'Type' }
 ];
 
-function renderCell(field: Column['field'], item: any) {
+function renderCell(field: Column['field'], item: DataTableTreeRow<TreeTableNode>) {
     if (field === 'name') {
         return (
             <div className="flex items-center gap-2">
@@ -84171,7 +84347,7 @@ export default function ReorderDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody key={columns.map((c) => c.field).join(',')}>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     {columns.map((col) => (
                                         <DataTable.Cell key={col.field}>{renderCell(col.field, item)}</DataTable.Cell>
@@ -84224,6 +84400,7 @@ import { ChevronRight } from '@primeicons/react/chevron-right';
 import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
 import type { DataTableExpansionEvent, DataTableRowReorderEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -84246,7 +84423,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -84266,6 +84445,7 @@ export default function RowReorderDemo() {
         const toNode = flat[e.dropIndex];
 
         if (!fromNode || !toNode) return;
+
         if ((fromNode._treeLevel ?? 0) !== 0 || (toNode._treeLevel ?? 0) !== 0) return;
 
         setNodes((prev) => {
@@ -84314,7 +84494,7 @@ export default function RowReorderDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: DataTableTreeRow<TreeTableNode>; index: number }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         {Number(item._treeLevel ?? 0) === 0 ? (
@@ -84391,6 +84571,7 @@ import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { Button } from '@primereact/ui/button';
 import { Checkbox } from '@primereact/ui/checkbox';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Popover } from '@primereact/ui/popover';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
@@ -84414,7 +84595,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -84436,7 +84619,7 @@ const initialColumns: ColumnDef[] = [
 
 const defaultVisibleFields: ColumnDef['field'][] = ['name', 'size', 'type'];
 
-function renderCell(field: ColumnDef['field'], item: any) {
+function renderCell(field: ColumnDef['field'], item: DataTableTreeRow<TreeTableNode>) {
     if (field === 'name') {
         return (
             <div className="flex items-center gap-2">
@@ -84497,6 +84680,7 @@ function ColumnsPopover({
 
         if (set.has(field)) set.delete(field);
         else set.add(field);
+
         onVisibleFieldsChange(Array.from(set));
     };
 
@@ -84605,7 +84789,7 @@ export default function ColumnToggleDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody key={visibleFields.join(',') + '|' + columns.map((c) => c.field).join(',')}>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     {visibleColumns.map((col) => (
                                         <DataTable.Cell key={col.field}>{renderCell(col.field, item)}</DataTable.Cell>
@@ -84652,6 +84836,7 @@ import { ChevronDown } from '@primeicons/react/chevron-down';
 import { ChevronRight } from '@primeicons/react/chevron-right';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -84751,7 +84936,7 @@ export default function ColumnGroupDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<SalesNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -84830,7 +85015,7 @@ import { Database } from '@primeicons/react/database';
 import { SortAlt } from '@primeicons/react/sort-alt';
 import { SortAmountDown } from '@primeicons/react/sort-amount-down';
 import { SortAmountUpAlt } from '@primeicons/react/sort-amount-up-alt';
-import type { DataTableExpansionEvent, DataTableFilterInstance } from '@primereact/ui/datatable';
+import type { DataTableExpansionEvent, DataTableFilterInstance, DataTableTreeRow } from '@primereact/ui/datatable';
 import { DataTable, FilterMatchMode } from '@primereact/ui/datatable';
 import { InputText } from '@primereact/ui/inputtext';
 import { Tag } from '@primereact/ui/tag';
@@ -84950,7 +85135,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
@@ -84964,7 +85149,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
@@ -84977,7 +85164,7 @@ export default function ColumnGroupFilterSortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<SalesNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -85054,6 +85241,7 @@ import { FilterMatchMode } from '@primereact/ui/datatable';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import type { DataTableFilterInstance } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { IconField } from '@primereact/ui/iconfield';
 import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
@@ -85075,7 +85263,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -85114,7 +85304,7 @@ export default function FilterBasicDemo() {
                         type="search"
                         placeholder="Keyword search"
                         value={globalFilter}
-                        onChange={(e: any) => setGlobalFilter(e.target.value)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
                         className="w-full"
                     />
                 </IconField.Root>
@@ -85150,7 +85340,7 @@ export default function FilterBasicDemo() {
                                         {({ 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 name..."
                                                 size="small"
                                                 fluid
@@ -85191,7 +85381,7 @@ export default function FilterBasicDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -85266,6 +85456,7 @@ import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import type { DataTableFilterInstance } from '@primereact/ui/datatable';
 import { Button } from '@primereact/ui/button';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { IconField } from '@primereact/ui/iconfield';
 import { InputText } from '@primereact/ui/inputtext';
 import { Popover, type PopoverRootOpenChangeEvent } from '@primereact/ui/popover';
@@ -85288,7 +85479,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -85427,7 +85620,7 @@ export default function FilterAdvancedDemo() {
                         type="search"
                         placeholder="Keyword search"
                         value={globalFilter}
-                        onChange={(e: any) => setGlobalFilter(e.target.value)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
                         className="w-full"
                     />
                 </IconField.Root>
@@ -85521,7 +85714,9 @@ export default function FilterAdvancedDemo() {
                                                             </div>
                                                             <InputText
                                                                 value={(constraint.value as string) ?? ''}
-                                                                onChange={(e: any) => onConstraintChange(e, idx, e.target.value)}
+                                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                                                    onConstraintChange(e, idx, e.target.value)
+                                                                }
                                                                 placeholder="Search by name..."
                                                                 size="small"
                                                                 fluid
@@ -85607,7 +85802,7 @@ export default function FilterAdvancedDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -85672,6 +85867,7 @@ import { NodeService, type TreeTableNode } from '@/shared/services/node.service'
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { Button } from '@primereact/ui/button';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -85694,7 +85890,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -85740,7 +85938,7 @@ export default function ExportDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -85802,6 +86000,7 @@ import { Database } from '@primeicons/react/database';
 import { ChevronRight } from '@primeicons/react/chevron-right';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Skeleton } from '@primereact/ui/skeleton';
 import * as React from 'react';
 
@@ -85919,7 +86118,7 @@ export default function LazyDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => {
+                            {({ item }: { item: DataTableTreeRow<LazyNode> }) => {
                                 const isLoading = loadingKeys[item.key] && expandedKeys[item.key];
 
                                 return (
@@ -85986,6 +86185,7 @@ import { NodeService, type TreeTableNode } from '@/shared/services/node.service'
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import { Button } from '@primereact/ui/button';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 import { File } from '@primeicons/react/file';
@@ -86008,7 +86208,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -86065,7 +86267,7 @@ export default function LoadingOverlayDemo() {
                                 </DataTable.THeadRow>
                             </DataTable.THead>
                             <DataTable.TBody>
-                                {({ item }: { item: any }) => (
+                                {({ item }: { item: DataTableTreeRow<TreeTableNode> }) => (
                                     <DataTable.Row key={String(item.key)}>
                                         <DataTable.Cell>
                                             <div className="flex items-center gap-2">
@@ -86135,7 +86337,7 @@ export default function LoadingSkeletonDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: (typeof placeholders)[number] }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <Skeleton className="h-5 w-3/4" />
@@ -86188,7 +86390,7 @@ export default function EmptyDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Record<string, unknown> }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>{String(item.name)}</DataTable.Cell>
                                     <DataTable.Cell>{String(item.size)}</DataTable.Cell>
@@ -86247,6 +86449,7 @@ import { FilterMatchMode } from '@primereact/ui/datatable';
 import type { DataTableExpansionEvent } from '@primereact/ui/datatable';
 import type { DataTableFilterInstance } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
+import type { DataTableTreeRow } from '@primereact/ui/datatable';
 import { IconField } from '@primereact/ui/iconfield';
 import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
@@ -86268,7 +86471,9 @@ const typeSeverity: Record<string, 'info' | 'warn' | 'success' | 'secondary'> =
 
 function TypeIcon({ type }: { type: string }) {
     if (type === 'Picture') return <ImageIcon size={16} />;
+
     if (type === 'Video') return <Video size={16} />;
+
     if (type === 'Folder') return <Folder size={16} />;
 
     return <File size={16} />;
@@ -86349,7 +86554,7 @@ export default function AdvancedDemo() {
                         type="search"
                         placeholder="Keyword search"
                         value={globalFilter}
-                        onChange={(e: any) => setGlobalFilter(e.target.value)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
                         className="w-full"
                     />
                 </IconField.Root>
@@ -86394,7 +86599,7 @@ export default function AdvancedDemo() {
                                         {({ 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
@@ -86435,7 +86640,7 @@ export default function AdvancedDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: DataTableTreeRow<TreeTableNode>; index: number }) => (
                                 <DataTable.Row key={String(item.key)}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-2">
@@ -86455,7 +86660,7 @@ export default function AdvancedDemo() {
                                                 <DataTable.CellEditorContent>
                                                     <InputText
                                                         defaultValue={String(item.name)}
-                                                        onChange={(e: any) => {
+                                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                             pendingValueRef.current[`${item.key}-name`] = e.target.value;
                                                         }}
                                                         size="small"
@@ -86473,7 +86678,7 @@ export default function AdvancedDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={String(item.size)}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${item.key}-size`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -92499,7 +92704,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">
@@ -92683,7 +92888,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">
@@ -92773,7 +92978,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>
@@ -92900,7 +93105,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">
@@ -93070,7 +93275,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">
@@ -93219,7 +93424,7 @@ export default function CheckboxSelectionDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <PRDataTable.Selection>
@@ -93345,7 +93550,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">
@@ -93517,7 +93722,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">
@@ -93688,7 +93893,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">
@@ -93859,7 +94064,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">
@@ -94035,7 +94240,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">
@@ -94160,7 +94365,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>
@@ -94282,7 +94487,7 @@ export default function ScrollHorizontalDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>{item.id}</DataTableCell>
                                     <DataTableCell>
@@ -94407,7 +94612,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>
@@ -94525,6 +94730,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];
@@ -94581,7 +94787,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">
@@ -94749,7 +94955,7 @@ export default function ExpansionDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <React.Fragment key={item.id}>
                                     <DataTableRow>
                                         <DataTableCell>
@@ -94874,18 +95080,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[]>([]);
 
@@ -94920,7 +95114,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">
@@ -95047,7 +95241,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">
@@ -95225,7 +95419,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>
@@ -95341,7 +95535,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">
@@ -95503,7 +95697,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>
@@ -95688,7 +95882,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
@@ -95702,7 +95896,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
@@ -95715,7 +95911,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>
@@ -95838,7 +96034,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>
@@ -95925,7 +96121,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">
@@ -96047,7 +96243,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">
@@ -96191,7 +96387,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">
@@ -96322,7 +96518,7 @@ export default function LoadingSkeletonDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) =>
+                            {({ item }: { item: Product }) =>
                                 isLoading ? (
                                     <DataTableRow key={item.id}>
                                         <DataTableCell>
@@ -96428,7 +96624,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>
@@ -101793,7 +101989,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';
@@ -110307,6 +110502,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' },
@@ -110412,6 +110608,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' },
@@ -110935,6 +111132,7 @@ export default function GroupDemo() {
                             <SelectList>
                                 {(() => {
                                     let index = 0;
+
                                     return jobCategories.flatMap((category) => [
                                         <SelectOption key={`group-${category.code}`} index={index++} group>
                                             {category.label}
@@ -111569,9 +111767,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;
@@ -111851,9 +112050,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;
@@ -111902,9 +112104,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);
@@ -111914,7 +112116,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"
@@ -111933,7 +112135,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"
@@ -111960,19 +112162,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>
@@ -112701,10 +112903,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[];
 };
@@ -117461,7 +117664,7 @@ export default function BasicDemo() {
                     type="search"
                     placeholder="Search name, category, code..."
                     value={search}
-                    onChange={(e: any) => setSearch(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
                     className="w-full"
                 />
             </IconField.Root>
@@ -117555,7 +117758,7 @@ export default function AdvancedDemo() {
                         placeholder="Name contains..."
                         size="small"
                         value={(nameRule?.value as string) ?? ''}
-                        onChange={(e: any) => nameRule?.setValue(e.target.value)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => nameRule?.setValue(e.target.value)}
                         className="w-full"
                     />
                 </IconField.Root>
@@ -118750,7 +118953,9 @@ export default function TreeDemo() {
                         type="search"
                         placeholder="Search nodes..."
                         value={search}
-                        onChange={(e: any) => setRules([{ field: 'name', value: e.target.value, matchMode: 'contains' }])}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                            setRules([{ field: 'name', value: e.target.value, matchMode: 'contains' }])
+                        }
                     />
                 </IconField.Root>
 
@@ -120818,7 +121023,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.        |
@@ -120837,7 +121042,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.
 
@@ -123578,13 +123783,13 @@ Define an _Authorization: Bearer_ request header to configure your secret key.
 
 The request type must be _POST_.
 
-| Name | Type | Required | Description |
-| --- | --- | --- | --- |
-| `name` | string | yes | Name of the theme to be generated. |
-| `tokens` | json | yes | Content of the json file exported from Figma. |
-| `project` | string | yes | Name of the project, possible values are "primereact", "primeng" or "primevue". |
-| `config.font_size` | string | no | Font size for theme preview in visual editor at website, defaults to "14px". |
-| `config.font_family` | string | no | Font family for theme preview in visual editor at website, defaults to "Inter Var". |
+| Name                 | Type   | Required | Description                                                                         |
+| -------------------- | ------ | -------- | ----------------------------------------------------------------------------------- |
+| `name`               | string | yes      | Name of the theme to be generated.                                                  |
+| `tokens`             | json   | yes      | Content of the json file exported from Figma.                                       |
+| `project`            | string | yes      | Name of the project, possible values are "primereact", "primeng" or "primevue".     |
+| `config.font_size`   | string | no       | Font size for theme preview in visual editor at website, defaults to "14px".        |
+| `config.font_family` | string | no       | Font family for theme preview in visual editor at website, defaults to "Inter Var". |
 
 ### Example
 
@@ -124197,6 +124402,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
@@ -125323,6 +125529,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.
@@ -127934,7 +128165,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.        |
@@ -127953,7 +128184,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.
 
@@ -131917,6 +132148,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.