@primereact/mcp 11.0.0-rc.2 → 11.0.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.md +10 -9
  2. package/data/llms/headless/components/carousel/api.json +1 -1
  3. package/data/llms/headless/components/contextmenu/api.json +2 -2
  4. package/data/llms/headless/components/inputcolor/api.json +1 -1
  5. package/data/llms/headless/components/menu/api.json +2 -2
  6. package/data/llms/headless/components/textarea/api.json +6 -0
  7. package/data/llms/headless/guides/ai/mcp.md +113 -0
  8. package/data/llms/headless/guides/ai/plugin.md +139 -0
  9. package/data/llms/headless/guides/installation.md +1 -1
  10. package/data/llms/hooks/use-filter.md +2 -5
  11. package/data/llms/llms-full.txt +1199 -266
  12. package/data/llms/llms.txt +8 -0
  13. package/data/llms/primitive/components/carousel/api.json +1 -1
  14. package/data/llms/primitive/components/contextmenu/api.json +2 -2
  15. package/data/llms/primitive/components/inputcolor/api.json +1 -1
  16. package/data/llms/primitive/components/menu/api.json +8 -8
  17. package/data/llms/primitive/components/textarea/api.json +6 -6
  18. package/data/llms/primitive/guides/ai/mcp.md +113 -0
  19. package/data/llms/primitive/guides/ai/plugin.md +139 -0
  20. package/data/llms/primitive/guides/icons/primeicons.md +3 -3
  21. package/data/llms/primitive/guides/installation.md +1 -1
  22. package/data/llms/styled/components/datatable.md +20 -40
  23. package/data/llms/styled/components/dataview.md +12 -17
  24. package/data/llms/styled/components/dialog.md +11 -17
  25. package/data/llms/styled/components/fileupload.md +3 -3
  26. package/data/llms/styled/components/inputgroup.md +0 -65
  27. package/data/llms/styled/components/select.md +3 -5
  28. package/data/llms/styled/components/slider.md +1 -2
  29. package/data/llms/styled/components/stepper.md +1 -2
  30. package/data/llms/styled/components/toolbar.md +10 -10
  31. package/data/llms/styled/components/tooltip.md +46 -0
  32. package/data/llms/styled/guides/ai/mcp.md +113 -0
  33. package/data/llms/styled/guides/ai/plugin.md +139 -0
  34. package/data/llms/styled/guides/icons/primeicons.md +3 -3
  35. package/data/llms/styled/guides/installation/astro.md +1 -1
  36. package/data/llms/styled/guides/installation/configuration.md +135 -0
  37. package/data/llms/styled/guides/installation/nextjs.md +1 -1
  38. package/data/llms/styled/guides/installation/react-router.md +1 -1
  39. package/data/llms/styled/guides/installation/tanstack.md +1 -1
  40. package/data/llms/styled/guides/installation/vite.md +1 -1
  41. package/data/llms/tailwind/components/datatable.md +17 -34
  42. package/data/llms/tailwind/components/dataview.md +12 -17
  43. package/data/llms/tailwind/components/dialog.md +12 -17
  44. package/data/llms/tailwind/components/select.md +1 -2
  45. package/data/llms/tailwind/components/slider.md +1 -2
  46. package/data/llms/tailwind/components/toolbar.md +10 -7
  47. package/data/llms/tailwind/guides/ai/mcp.md +113 -0
  48. package/data/llms/tailwind/guides/ai/plugin.md +139 -0
  49. package/data/llms/tailwind/guides/icons/primeicons.md +3 -3
  50. package/data/llms/tailwind/guides/installation/astro.md +1 -1
  51. package/data/llms/tailwind/guides/installation/nextjs.md +1 -1
  52. package/data/llms/tailwind/guides/installation/react-router.md +1 -1
  53. package/data/llms/tailwind/guides/installation/tanstack.md +1 -1
  54. package/data/llms/tailwind/guides/installation/vite.md +1 -1
  55. package/data/manifest.json +2400 -1694
  56. package/data/mcp-data.json +1375 -542
  57. package/dist/index.d.ts +2 -3
  58. package/dist/index.js +1 -1
  59. package/package.json +9 -4
  60. package/data/llms/manifest.json +0 -12409
  61. package/data/llms/mcp-data.json +0 -14481
package/data/llms/styled/components/datatable.md CHANGED
@@ -11,7 +11,6 @@ import { StarFill } from '@primeicons/react/star-fill';
11
11
  import { DataTable } from '@primereact/ui/datatable';
12
12
  import { Rating } from '@primereact/ui/rating';
13
13
  import { Tag } from '@primereact/ui/tag';
14
- import Image from 'next/image';
15
14
  import * as React from 'react';
16
15
 
17
16
  const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -79,7 +78,7 @@ export default function Preview() {
79
78
  <DataTable.Row key={item.id}>
80
79
  <DataTable.Cell>
81
80
  <div className="flex items-center gap-3">
82
- <Image
81
+ <img
83
82
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
84
83
  alt={item.name}
85
84
  width={48}
@@ -618,7 +617,6 @@ One row at a time. Clicking a different row replaces the previous selection.
618
617
 
619
618
  ```tsx
620
619
  'use client';
621
- import Image from 'next/image';
622
620
  import { Database } from '@primeicons/react/database';
623
621
  import { ProductService, type Product } from '@/shared/services/product.service';
624
622
  import type { DataTableSelectionEvent } from '@primereact/ui/datatable';
@@ -681,7 +679,7 @@ export default function SingleSelectionDemo() {
681
679
  <DataTable.Row key={item.id}>
682
680
  <DataTable.Cell>
683
681
  <div className="flex items-center gap-3">
684
- <Image
682
+ <img
685
683
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
686
684
  alt={item.name}
687
685
  width={40}
@@ -741,7 +739,6 @@ Multiple rows without a dedicated column. Pair with `metaKeySelection` so Ctrl/C
741
739
 
742
740
  ```tsx
743
741
  'use client';
744
- import Image from 'next/image';
745
742
  import { ProductService, type Product } from '@/shared/services/product.service';
746
743
  import { ShoppingCart } from '@primeicons/react/shopping-cart';
747
744
  import { Database } from '@primeicons/react/database';
@@ -840,7 +837,7 @@ export default function MultipleSelectionDemo() {
840
837
  <DataTable.Row key={item.id}>
841
838
  <DataTable.Cell>
842
839
  <div className="flex items-center gap-3">
843
- <Image
840
+ <img
844
841
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
845
842
  alt={item.name}
846
843
  width={40}
@@ -1236,7 +1233,6 @@ Arrow Up/Down moves focus between rows, Space or Enter toggles the focused row,
1236
1233
 
1237
1234
  ```tsx
1238
1235
  'use client';
1239
- import Image from 'next/image';
1240
1236
  import { Database } from '@primeicons/react/database';
1241
1237
  import { ProductService, type Product } from '@/shared/services/product.service';
1242
1238
  import type { DataTableSelectionEvent } from '@primereact/ui/datatable';
@@ -1316,7 +1312,7 @@ export default function KeyboardDemo() {
1316
1312
  <DataTable.Row key={item.id}>
1317
1313
  <DataTable.Cell>
1318
1314
  <div className="flex items-center gap-3">
1319
- <Image
1315
+ <img
1320
1316
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
1321
1317
  alt={item.name}
1322
1318
  width={36}
@@ -1391,7 +1387,6 @@ Clicking a column header cycles through ascending, descending, and unsorted.
1391
1387
 
1392
1388
  ```tsx
1393
1389
  'use client';
1394
- import Image from 'next/image';
1395
1390
  import { ProductService, type Product } from '@/shared/services/product.service';
1396
1391
  import type { DataTableSortOrderInstance } from '@primereact/ui/datatable';
1397
1392
  import { SortAlt } from '@primeicons/react/sort-alt';
@@ -1488,7 +1483,7 @@ export default function SortDemo() {
1488
1483
  <DataTable.Row key={item.id}>
1489
1484
  <DataTable.Cell>
1490
1485
  <div className="flex items-center gap-3">
1491
- <Image
1486
+ <img
1492
1487
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
1493
1488
  alt={item.name}
1494
1489
  width={40}
@@ -1548,7 +1543,6 @@ Hold Ctrl/Cmd and click multiple column headers to sort by several fields at onc
1548
1543
 
1549
1544
  ```tsx
1550
1545
  'use client';
1551
- import Image from 'next/image';
1552
1546
  import { ProductService, type Product } from '@/shared/services/product.service';
1553
1547
  import type { DataTableSortOrderInstance } from '@primereact/ui/datatable';
1554
1548
  import { SortAlt } from '@primeicons/react/sort-alt';
@@ -1645,7 +1639,7 @@ export default function MultiSortDemo() {
1645
1639
  <DataTable.Row key={item.id}>
1646
1640
  <DataTable.Cell>
1647
1641
  <div className="flex items-center gap-3">
1648
- <Image
1642
+ <img
1649
1643
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
1650
1644
  alt={item.name}
1651
1645
  width={40}
@@ -1711,7 +1705,6 @@ Apply an initial sort on mount. Use `defaultSortField` + `defaultSortOrder` for
1711
1705
 
1712
1706
  ```tsx
1713
1707
  'use client';
1714
- import Image from 'next/image';
1715
1708
  import { ProductService, type Product } from '@/shared/services/product.service';
1716
1709
  import type { DataTableSortOrderInstance } from '@primereact/ui/datatable';
1717
1710
  import { SortAlt } from '@primeicons/react/sort-alt';
@@ -1808,7 +1801,7 @@ export default function PresortDemo() {
1808
1801
  <DataTable.Row key={item.id}>
1809
1802
  <DataTable.Cell>
1810
1803
  <div className="flex items-center gap-3">
1811
- <Image
1804
+ <img
1812
1805
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
1813
1806
  alt={item.name}
1814
1807
  width={40}
@@ -1890,7 +1883,6 @@ import { Badge } from '@primereact/ui/badge';
1890
1883
  import { DataTable } from '@primereact/ui/datatable';
1891
1884
  import { OverlayBadge } from '@primereact/ui/overlaybadge';
1892
1885
  import { Tag } from '@primereact/ui/tag';
1893
- import Image from 'next/image';
1894
1886
  import * as React from 'react';
1895
1887
 
1896
1888
  const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -1984,7 +1976,7 @@ export default function PresortMultiDemo() {
1984
1976
  <DataTable.Row key={item.id}>
1985
1977
  <DataTable.Cell>
1986
1978
  <div className="flex items-center gap-3">
1987
- <Image
1979
+ <img
1988
1980
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
1989
1981
  alt={item.name}
1990
1982
  width={40}
@@ -2056,7 +2048,6 @@ import type { DataTablePaginationInstance } from '@primereact/ui/datatable';
2056
2048
  import { DataTable } from '@primereact/ui/datatable';
2057
2049
  import { Paginator } from '@primereact/ui/paginator';
2058
2050
  import { Tag } from '@primereact/ui/tag';
2059
- import Image from 'next/image';
2060
2051
  import type { PaginatorPagesInstance } from '@primereact/ui/paginator';
2061
2052
  import * as React from 'react';
2062
2053
 
@@ -2108,7 +2099,7 @@ export default function PaginationDemo() {
2108
2099
  <DataTable.Row key={item.id}>
2109
2100
  <DataTable.Cell>
2110
2101
  <div className="flex items-center gap-3">
2111
- <Image
2102
+ <img
2112
2103
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
2113
2104
  alt={item.name}
2114
2105
  width={40}
@@ -3163,7 +3154,6 @@ Inline cell editing with `CellEditor`, `CellEditorDisplay` and `CellEditorConten
3163
3154
 
3164
3155
  ```tsx
3165
3156
  'use client';
3166
- import Image from 'next/image';
3167
3157
  import { ProductService, type Product } from '@/shared/services/product.service';
3168
3158
  import { ChevronDown } from '@primeicons/react/chevron-down';
3169
3159
  import { Database } from '@primeicons/react/database';
@@ -3251,7 +3241,7 @@ export default function CellEditDemo() {
3251
3241
  {({ item, index }: { item: any; index: number }) => (
3252
3242
  <DataTable.Row key={item.id}>
3253
3243
  <DataTable.Cell>
3254
- <Image
3244
+ <img
3255
3245
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
3256
3246
  alt={item.name}
3257
3247
  width={40}
@@ -3400,7 +3390,6 @@ Cell editing composes with row selection: clicks inside an editable cell start e
3400
3390
 
3401
3391
  ```tsx
3402
3392
  'use client';
3403
- import Image from 'next/image';
3404
3393
  import { ProductService, type Product } from '@/shared/services/product.service';
3405
3394
  import { Check } from '@primeicons/react/check';
3406
3395
  import { Database } from '@primeicons/react/database';
@@ -3553,7 +3542,7 @@ export default function CellEditSelectionDemo() {
3553
3542
  </DataTable.Selection>
3554
3543
  </DataTable.Cell>
3555
3544
  <DataTable.Cell>
3556
- <Image
3545
+ <img
3557
3546
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
3558
3547
  alt={item.name}
3559
3548
  width={36}
@@ -3704,7 +3693,6 @@ Row-level editing with `RowEditor`, `RowEditorInit`, `RowEditorSave` and `RowEdi
3704
3693
 
3705
3694
  ```tsx
3706
3695
  'use client';
3707
- import Image from 'next/image';
3708
3696
  import { ProductService, type Product } from '@/shared/services/product.service';
3709
3697
  import { Check } from '@primeicons/react/check';
3710
3698
  import { Database } from '@primeicons/react/database';
@@ -3813,7 +3801,7 @@ export default function RowEditDemo() {
3813
3801
  <DataTable.CellEditor field="name" rowIndex={index} rowData={item}>
3814
3802
  <DataTable.CellEditorDisplay>
3815
3803
  <div className="flex items-center gap-3">
3816
- <Image
3804
+ <img
3817
3805
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
3818
3806
  alt={item.name}
3819
3807
  width={40}
@@ -4242,7 +4230,6 @@ import { ProductService, type Product } from '@/shared/services/product.service'
4242
4230
  import { Database } from '@primeicons/react/database';
4243
4231
  import { DataTable } from '@primereact/ui/datatable';
4244
4232
  import { Tag } from '@primereact/ui/tag';
4245
- import Image from 'next/image';
4246
4233
  import * as React from 'react';
4247
4234
 
4248
4235
  const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -4295,7 +4282,7 @@ export default function ResizeDemo() {
4295
4282
  <DataTable.Row key={item.id}>
4296
4283
  <DataTable.Cell>
4297
4284
  <div className="flex items-center gap-3">
4298
- <Image
4285
+ <img
4299
4286
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
4300
4287
  alt={item.name}
4301
4288
  width={36}
@@ -4347,7 +4334,6 @@ export default function ResizeDemo() {
4347
4334
 
4348
4335
  ```tsx
4349
4336
  'use client';
4350
- import Image from 'next/image';
4351
4337
  import { Database } from '@primeicons/react/database';
4352
4338
  import { ProductService, type Product } from '@/shared/services/product.service';
4353
4339
  import { DataTable } from '@primereact/ui/datatable';
@@ -4407,7 +4393,7 @@ export default function ResizeExpandDemo() {
4407
4393
  <DataTable.Row key={item.id}>
4408
4394
  <DataTable.Cell>
4409
4395
  <div className="flex items-center gap-3">
4410
- <Image
4396
+ <img
4411
4397
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
4412
4398
  alt={item.name}
4413
4399
  width={36}
@@ -4472,7 +4458,6 @@ import { Database } from '@primeicons/react/database';
4472
4458
  import type { DataTableColumnReorderEvent } from '@primereact/ui/datatable';
4473
4459
  import { DataTable } from '@primereact/ui/datatable';
4474
4460
  import { Tag } from '@primereact/ui/tag';
4475
- import Image from 'next/image';
4476
4461
  import * as React from 'react';
4477
4462
 
4478
4463
  const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -4505,7 +4490,7 @@ function renderCell(field: string, item: Product) {
4505
4490
  case 'name':
4506
4491
  return (
4507
4492
  <div className="flex items-center gap-3">
4508
- <Image
4493
+ <img
4509
4494
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
4510
4495
  alt={item.name}
4511
4496
  width={36}
@@ -4614,7 +4599,6 @@ Drag and drop rows to reorder data.
4614
4599
 
4615
4600
  ```tsx
4616
4601
  'use client';
4617
- import Image from 'next/image';
4618
4602
  import { ProductService, type Product } from '@/shared/services/product.service';
4619
4603
  import { Bars } from '@primeicons/react/bars';
4620
4604
  import { Database } from '@primeicons/react/database';
@@ -4679,7 +4663,7 @@ export default function RowReorderDemo() {
4679
4663
  </DataTable.Cell>
4680
4664
  <DataTable.Cell>
4681
4665
  <div className="flex items-center gap-3">
4682
- <Image
4666
+ <img
4683
4667
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
4684
4668
  alt={item.name}
4685
4669
  width={36}
@@ -4750,7 +4734,6 @@ import { Checkbox } from '@primereact/ui/checkbox';
4750
4734
  import { DataTable } from '@primereact/ui/datatable';
4751
4735
  import { Popover } from '@primereact/ui/popover';
4752
4736
  import { Tag } from '@primereact/ui/tag';
4753
- import Image from 'next/image';
4754
4737
  import * as React from 'react';
4755
4738
 
4756
4739
  interface ColumnDef {
@@ -4786,7 +4769,7 @@ function renderCell(field: string, item: Product) {
4786
4769
  case 'name':
4787
4770
  return (
4788
4771
  <div className="flex items-center gap-3">
4789
- <Image
4772
+ <img
4790
4773
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
4791
4774
  alt={item.name}
4792
4775
  width={36}
@@ -6528,7 +6511,6 @@ Export table data to CSV with customizable fields and headers.
6528
6511
 
6529
6512
  ```tsx
6530
6513
  'use client';
6531
- import Image from 'next/image';
6532
6514
  import { ProductService, type Product } from '@/shared/services/product.service';
6533
6515
  import { FileExport } from '@primeicons/react/file-export';
6534
6516
  import { Database } from '@primeicons/react/database';
@@ -6596,7 +6578,7 @@ export default function ExportDemo() {
6596
6578
  <DataTable.Row key={item.id}>
6597
6579
  <DataTable.Cell>
6598
6580
  <div className="flex items-center gap-3">
6599
- <Image
6581
+ <img
6600
6582
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
6601
6583
  alt={item.name}
6602
6584
  width={36}
@@ -6955,7 +6937,6 @@ import { Spinner } from '@primeicons/react/spinner';
6955
6937
  import { Button } from '@primereact/ui/button';
6956
6938
  import { DataTable } from '@primereact/ui/datatable';
6957
6939
  import { Tag } from '@primereact/ui/tag';
6958
- import Image from 'next/image';
6959
6940
  import * as React from 'react';
6960
6941
 
6961
6942
  const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -7020,7 +7001,7 @@ export default function LoadingOverlayDemo() {
7020
7001
  <DataTable.Row key={item.id}>
7021
7002
  <DataTable.Cell>
7022
7003
  <div className="flex items-center gap-3">
7023
- <Image
7004
+ <img
7024
7005
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
7025
7006
  alt={item.name}
7026
7007
  width={40}
@@ -7072,7 +7053,6 @@ import { Button } from '@primereact/ui/button';
7072
7053
  import { DataTable } from '@primereact/ui/datatable';
7073
7054
  import { Skeleton } from '@primereact/ui/skeleton';
7074
7055
  import { Tag } from '@primereact/ui/tag';
7075
- import Image from 'next/image';
7076
7056
  import * as React from 'react';
7077
7057
 
7078
7058
  const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -7163,7 +7143,7 @@ export default function LoadingSkeletonDemo() {
7163
7143
  <DataTable.Row key={item.id}>
7164
7144
  <DataTable.Cell>
7165
7145
  <div className="flex items-center gap-3">
7166
- <Image
7146
+ <img
7167
7147
  src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
7168
7148
  alt={item.name}
7169
7149
  width={40}
package/data/llms/styled/components/dataview.md CHANGED
@@ -7,7 +7,6 @@ DataView displays data in grid or list layout with pagination and sorting featur
7
7
  import { ProductService } from '@/shared/services/product.service';
8
8
  import { Button } from '@primereact/ui/button';
9
9
  import { Tag } from '@primereact/ui/tag';
10
- import Image from 'next/image';
11
10
  import { DataView } from '@primereact/ui/dataview';
12
11
  import * as React from 'react';
13
12
  import { Heart } from '@primeicons/react/heart';
@@ -61,14 +60,14 @@ export default function Preview() {
61
60
  className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
62
61
  >
63
62
  <div className="md:w-40 relative">
64
- <Image
63
+ <img
65
64
  className="mx-auto rounded w-full"
66
65
  src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
67
66
  alt={product.name}
68
67
  width={160}
69
68
  height={160}
70
69
  />
71
- <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
70
+ <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
72
71
  {product.inventoryStatus}
73
72
  </Tag>
74
73
  </div>
@@ -142,7 +141,6 @@ Displays a list of items with support for layout switching.
142
141
  import { ProductService } from '@/shared/services/product.service';
143
142
  import { Button } from '@primereact/ui/button';
144
143
  import { Tag } from '@primereact/ui/tag';
145
- import Image from 'next/image';
146
144
  import { DataView } from '@primereact/ui/dataview';
147
145
  import * as React from 'react';
148
146
  import { Heart } from '@primeicons/react/heart';
@@ -196,14 +194,14 @@ export default function BasicDemo() {
196
194
  className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
197
195
  >
198
196
  <div className="md:w-40 relative">
199
- <Image
197
+ <img
200
198
  className="mx-auto rounded w-full"
201
199
  src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
202
200
  alt={product.name}
203
201
  width={160}
204
202
  height={160}
205
203
  />
206
- <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
204
+ <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
207
205
  {product.inventoryStatus}
208
206
  </Tag>
209
207
  </div>
@@ -269,7 +267,6 @@ import { StarFill } from '@primeicons/react/star-fill';
269
267
  import { Button } from '@primereact/ui/button';
270
268
  import { Paginator, type PaginatorPagesInstance, type PaginatorRootChangeEvent } from '@primereact/ui/paginator';
271
269
  import { Tag } from '@primereact/ui/tag';
272
- import Image from 'next/image';
273
270
  import { DataView } from '@primereact/ui/dataview';
274
271
  import * as React from 'react';
275
272
 
@@ -322,14 +319,14 @@ export default function PaginationDemo() {
322
319
  className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
323
320
  >
324
321
  <div className="md:w-40 relative">
325
- <Image
322
+ <img
326
323
  className="mx-auto rounded w-full"
327
324
  src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
328
325
  alt={product.name}
329
326
  width={160}
330
327
  height={160}
331
328
  />
332
- <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
329
+ <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
333
330
  {product.inventoryStatus}
334
331
  </Tag>
335
332
  </div>
@@ -425,7 +422,6 @@ import { Button } from '@primereact/ui/button';
425
422
  import { Tag } from '@primereact/ui/tag';
426
423
  import { ToggleButton } from '@primereact/ui/togglebutton';
427
424
  import { ToggleButtonGroup, type ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
428
- import Image from 'next/image';
429
425
  import { DataView } from '@primereact/ui/dataview';
430
426
  import * as React from 'react';
431
427
  import { Heart } from '@primeicons/react/heart';
@@ -503,14 +499,14 @@ export default function SortDemo() {
503
499
  className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
504
500
  >
505
501
  <div className="md:w-40 relative">
506
- <Image
502
+ <img
507
503
  className="mx-auto rounded w-full"
508
504
  src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
509
505
  alt={product.name}
510
506
  width={160}
511
507
  height={160}
512
508
  />
513
- <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
509
+ <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
514
510
  {product.inventoryStatus}
515
511
  </Tag>
516
512
  </div>
@@ -575,7 +571,6 @@ import { Button } from '@primereact/ui/button';
575
571
  import { Tag } from '@primereact/ui/tag';
576
572
  import { ToggleButton } from '@primereact/ui/togglebutton';
577
573
  import { ToggleButtonGroup, type ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
578
- import Image from 'next/image';
579
574
  import { DataView } from '@primereact/ui/dataview';
580
575
  import * as React from 'react';
581
576
 
@@ -625,14 +620,14 @@ export default function LayoutDemo() {
625
620
  className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
626
621
  >
627
622
  <div className="md:w-40 relative">
628
- <Image
623
+ <img
629
624
  className="mx-auto rounded w-full"
630
625
  src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
631
626
  alt={product.name}
632
627
  width={160}
633
628
  height={160}
634
629
  />
635
- <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
630
+ <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
636
631
  {product.inventoryStatus}
637
632
  </Tag>
638
633
  </div>
@@ -686,14 +681,14 @@ export default function LayoutDemo() {
686
681
  <div className="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
687
682
  <div className="flex justify-center">
688
683
  <div className="relative mx-auto">
689
- <Image
684
+ <img
690
685
  src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
691
686
  alt={product.name}
692
687
  width={300}
693
688
  height={200}
694
689
  className="rounded"
695
690
  />
696
- <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
691
+ <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
697
692
  {product.inventoryStatus}
698
693
  </Tag>
699
694
  </div>
package/data/llms/styled/components/dialog.md CHANGED
@@ -43,7 +43,7 @@ export default function Preview() {
43
43
  <Label htmlFor="name" className="text-sm font-semibold">
44
44
  Name
45
45
  </Label>
46
- <InputText id="name" defaultValue="Amanda Miller" />
46
+ <InputText data-autofocus id="name" defaultValue="Amanda Miller" />
47
47
  </div>
48
48
  <div className="flex flex-col gap-1">
49
49
  <Label htmlFor="username" className="text-sm font-semibold">
@@ -137,7 +137,7 @@ export default function BasicDemo() {
137
137
  <div className="flex flex-col gap-4">
138
138
  <div className="flex flex-col gap-1.5">
139
139
  <Label htmlFor="name">Name</Label>
140
- <InputText id="name" defaultValue="Amanda Miller" />
140
+ <InputText id="name" defaultValue="Amanda Miller" data-autofocus />
141
141
  </div>
142
142
  <div className="flex flex-col gap-1.5">
143
143
  <Label htmlFor="email">Email</Label>
@@ -169,6 +169,7 @@ A dialog can be repositioned by dragging its header when the `draggable` prop is
169
169
  import { Times } from '@primeicons/react/times';
170
170
  import { Button } from '@primereact/ui/button';
171
171
  import { Dialog } from '@primereact/ui/dialog';
172
+ import { Textarea } from '@primereact/ui/textarea';
172
173
 
173
174
  export default function DraggableDemo() {
174
175
  return (
@@ -192,8 +193,10 @@ export default function DraggableDemo() {
192
193
  <p className="text-sm text-surface-500 dark:text-surface-400 mt-0 mb-0">
193
194
  Drag this dialog by its header to reposition it anywhere on the screen.
194
195
  </p>
195
- <textarea
196
- className="w-full h-32 p-3 rounded-md border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary-500"
196
+ <Textarea
197
+ data-autofocus
198
+ rows={4}
199
+ className="w-full resize-none"
197
200
  placeholder="Type your note here..."
198
201
  defaultValue="Remember to review the design specs for the new dashboard layout before the meeting tomorrow."
199
202
  />
@@ -220,7 +223,6 @@ The position of the dialog can be customized with the `position` property. The a
220
223
 
221
224
  ```tsx
222
225
  'use client';
223
- import { ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight } from '@primeicons/react';
224
226
  import { Times } from '@primeicons/react/times';
225
227
  import { DialogRootChangeEvent, DialogRootProps } from '@primereact/ui/dialog';
226
228
  import { Button } from '@primereact/ui/button';
@@ -243,39 +245,31 @@ export default function PositionDemo() {
243
245
  <div className="flex flex-wrap justify-center gap-2 mb-2">
244
246
  <Button onClick={() => openPosition('left')} severity="secondary" style={{ minWidth: '10rem' }}>
245
247
  Left
246
- <ArrowLeft />
247
248
  </Button>
248
249
  <Button onClick={() => openPosition('right')} severity="secondary" style={{ minWidth: '10rem' }}>
249
250
  Right
250
- <ArrowRight />
251
251
  </Button>
252
252
  </div>
253
253
  <div className="flex flex-wrap justify-center gap-2 mb-2">
254
254
  <Button onClick={() => openPosition('topleft')} severity="secondary" style={{ minWidth: '10rem' }}>
255
255
  TopLeft
256
- <ArrowUpLeft />
257
256
  </Button>
258
257
  <Button onClick={() => openPosition('top')} severity="secondary" style={{ minWidth: '10rem' }}>
259
258
  Top
260
- <ArrowUp />
261
259
  </Button>
262
260
  <Button onClick={() => openPosition('topright')} severity="secondary" style={{ minWidth: '10rem' }}>
263
261
  TopRight
264
- <ArrowUpRight />
265
262
  </Button>
266
263
  </div>
267
264
  <div className="flex flex-wrap justify-center gap-2">
268
265
  <Button onClick={() => openPosition('bottomleft')} severity="secondary" style={{ minWidth: '10rem' }}>
269
266
  BottomLeft
270
- <ArrowDownLeft />
271
267
  </Button>
272
268
  <Button onClick={() => openPosition('bottom')} severity="secondary" style={{ minWidth: '10rem' }}>
273
269
  Bottom
274
- <ArrowDown />
275
270
  </Button>
276
271
  <Button onClick={() => openPosition('bottomright')} severity="secondary" style={{ minWidth: '10rem' }}>
277
272
  BottomRight
278
- <ArrowDownRight />
279
273
  </Button>
280
274
  </div>
281
275
  <Dialog.Root open={open} onOpenChange={(e: DialogRootChangeEvent) => setOpen(e.value as boolean)} position={position} draggable={false}>
@@ -298,7 +292,7 @@ export default function PositionDemo() {
298
292
  <Label htmlFor="username" className="font-semibold">
299
293
  Username
300
294
  </Label>
301
- <InputText id="username" />
295
+ <InputText data-autofocus id="username" />
302
296
  </div>
303
297
  <div className="flex flex-col gap-1">
304
298
  <Label htmlFor="email" className="font-semibold">
@@ -486,7 +480,7 @@ export default function ModalDemo() {
486
480
  <Label htmlFor="username" className="font-semibold">
487
481
  Username
488
482
  </Label>
489
- <InputText id="username" />
483
+ <InputText data-autofocus id="username" />
490
484
  </div>
491
485
  <div className="flex flex-col gap-1">
492
486
  <Label htmlFor="email" className="font-semibold">
@@ -546,7 +540,7 @@ export default function WithoutModalDemo() {
546
540
  <Label htmlFor="username" className="font-semibold">
547
541
  Username
548
542
  </Label>
549
- <InputText id="username" />
543
+ <InputText data-autofocus id="username" />
550
544
  </div>
551
545
  <div className="flex flex-col gap-1">
552
546
  <Label htmlFor="email" className="font-semibold">
@@ -972,7 +966,7 @@ export default function ResponsiveDemo() {
972
966
  <Label htmlFor="eventName" className="text-sm font-semibold">
973
967
  Event Name
974
968
  </Label>
975
- <InputText id="eventName" placeholder="e.g. Team Standup" />
969
+ <InputText data-autofocus id="eventName" placeholder="e.g. Team Standup" />
976
970
  </div>
977
971
  <div className="flex flex-col md:flex-row gap-4">
978
972
  <div className="flex flex-col gap-1 flex-1">
package/data/llms/styled/components/fileupload.md CHANGED
@@ -475,7 +475,7 @@ export default function InputGroupDemo() {
475
475
  const { state, hasFiles } = instance;
476
476
 
477
477
  return (
478
- <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-none!">
478
+ <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-transparent!">
479
479
  <Upload className="mr-2" />
480
480
  {hasFiles ? state.files.map((file) => file.name).join(', ') : 'Choose file'}
481
481
  </FileUpload.Trigger>
@@ -492,7 +492,7 @@ export default function InputGroupDemo() {
492
492
  const { state, hasFiles } = instance;
493
493
 
494
494
  return (
495
- <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-none!">
495
+ <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-transparent!">
496
496
  <Upload className="mr-2" />
497
497
  {hasFiles ? state.files.map((file) => file.name).join(', ') : 'Choose file'}
498
498
  </FileUpload.Trigger>
@@ -518,7 +518,7 @@ export default function InputGroupDemo() {
518
518
  const { state, hasFiles } = instance;
519
519
 
520
520
  return (
521
- <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-none!">
521
+ <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-transparent!">
522
522
  <Upload className="mr-2" />
523
523
  {hasFiles ? state.files.map((file) => file.name).join(', ') : 'Browse'}
524
524
  </FileUpload.Trigger>