@dalexto/lexsys-registry 0.0.6 → 0.1.0

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 (40) hide show
  1. package/dist/index.js +211 -3
  2. package/dist/items/breadcrumb.d.ts +7 -0
  3. package/dist/items/data-table.d.ts +7 -0
  4. package/dist/items/date-picker.d.ts +7 -0
  5. package/dist/items/filter-toolbar.d.ts +7 -0
  6. package/dist/items/index.d.ts +8 -0
  7. package/dist/items/page-header.d.ts +7 -0
  8. package/dist/items/pagination.d.ts +7 -0
  9. package/dist/items/settings-page-layout.d.ts +7 -0
  10. package/dist/items/stats-card.d.ts +7 -0
  11. package/package.json +1 -1
  12. package/templates/blocks/CommandPalette/CommandPalette.tsx +12 -8
  13. package/templates/blocks/CommandPalette/CommandPalette.types.ts +2 -2
  14. package/templates/blocks/DataTable/DataTable.tsx +236 -0
  15. package/templates/blocks/DataTable/DataTable.types.ts +74 -0
  16. package/templates/blocks/DataTable/DataTable.variants.ts +23 -0
  17. package/templates/blocks/FilterToolbar/FilterToolbar.tsx +126 -0
  18. package/templates/blocks/FilterToolbar/FilterToolbar.types.ts +31 -0
  19. package/templates/blocks/FilterToolbar/FilterToolbar.variants.ts +24 -0
  20. package/templates/blocks/PageHeader/PageHeader.tsx +215 -0
  21. package/templates/blocks/PageHeader/PageHeader.types.ts +66 -0
  22. package/templates/blocks/PageHeader/PageHeader.variants.ts +48 -0
  23. package/templates/blocks/StatsCard/StatsCard.tsx +132 -0
  24. package/templates/blocks/StatsCard/StatsCard.types.ts +43 -0
  25. package/templates/blocks/StatsCard/StatsCard.variants.ts +28 -0
  26. package/templates/primitives/Breadcrumb/Breadcrumb.tsx +142 -0
  27. package/templates/primitives/Breadcrumb/Breadcrumb.types.ts +62 -0
  28. package/templates/primitives/Breadcrumb/Breadcrumb.variants.ts +37 -0
  29. package/templates/primitives/DatePicker/DatePicker.tsx +263 -0
  30. package/templates/primitives/DatePicker/DatePicker.types.ts +52 -0
  31. package/templates/primitives/DatePicker/DatePicker.variants.ts +76 -0
  32. package/templates/primitives/Pagination/Pagination.tsx +160 -0
  33. package/templates/primitives/Pagination/Pagination.types.ts +54 -0
  34. package/templates/primitives/Pagination/Pagination.variants.ts +47 -0
  35. package/templates/primitives/Toolbar/Toolbar.variants.ts +15 -15
  36. package/templates/styles/theme.css +1 -1
  37. package/templates/styles/tokens.css +334 -1
  38. package/templates/templates/SettingsPageLayout/SettingsPageLayout.tsx +198 -0
  39. package/templates/templates/SettingsPageLayout/SettingsPageLayout.types.ts +55 -0
  40. package/templates/templates/SettingsPageLayout/SettingsPageLayout.variants.ts +42 -0
package/dist/index.js CHANGED
@@ -182,6 +182,41 @@ var badgeRegistryItem = {
182
182
  target: "src/components/ui/Badge"
183
183
  };
184
184
 
185
+ // src/items/breadcrumb.ts
186
+ var breadcrumbRegistryItem = {
187
+ name: "breadcrumb",
188
+ canonicalName: "Breadcrumb",
189
+ type: "component",
190
+ category: "navigation",
191
+ aliases: [],
192
+ files: [
193
+ "primitives/Breadcrumb/Breadcrumb.tsx",
194
+ "primitives/Breadcrumb/Breadcrumb.types.ts",
195
+ "primitives/Breadcrumb/Breadcrumb.variants.ts"
196
+ ],
197
+ remoteFiles: [
198
+ {
199
+ path: "primitives/Breadcrumb/Breadcrumb.tsx"
200
+ },
201
+ {
202
+ path: "primitives/Breadcrumb/Breadcrumb.types.ts"
203
+ },
204
+ {
205
+ path: "primitives/Breadcrumb/Breadcrumb.variants.ts"
206
+ }
207
+ ],
208
+ dependencies: [
209
+ "class-variance-authority",
210
+ "clsx",
211
+ "lucide-react",
212
+ "tailwind-merge"
213
+ ],
214
+ registryDependencies: [],
215
+ utilities: ["cn"],
216
+ styles: ["theme"],
217
+ target: "src/components/ui/Breadcrumb"
218
+ };
219
+
185
220
  // src/items/button.ts
186
221
  var buttonRegistryItem = {
187
222
  name: "button",
@@ -354,6 +389,41 @@ var contextMenuRegistryItem = {
354
389
  target: "src/components/ui/ContextMenu"
355
390
  };
356
391
 
392
+ // src/items/date-picker.ts
393
+ var datePickerRegistryItem = {
394
+ name: "date-picker",
395
+ canonicalName: "DatePicker",
396
+ type: "component",
397
+ category: "forms",
398
+ aliases: [],
399
+ files: [
400
+ "primitives/DatePicker/DatePicker.tsx",
401
+ "primitives/DatePicker/DatePicker.types.ts",
402
+ "primitives/DatePicker/DatePicker.variants.ts"
403
+ ],
404
+ remoteFiles: [
405
+ {
406
+ path: "primitives/DatePicker/DatePicker.tsx"
407
+ },
408
+ {
409
+ path: "primitives/DatePicker/DatePicker.types.ts"
410
+ },
411
+ {
412
+ path: "primitives/DatePicker/DatePicker.variants.ts"
413
+ }
414
+ ],
415
+ dependencies: [
416
+ "class-variance-authority",
417
+ "clsx",
418
+ "lucide-react",
419
+ "tailwind-merge"
420
+ ],
421
+ registryDependencies: [],
422
+ utilities: ["cn"],
423
+ styles: ["theme"],
424
+ target: "src/components/ui/DatePicker"
425
+ };
426
+
357
427
  // src/items/dialog.ts
358
428
  var dialogRegistryItem = {
359
429
  name: "dialog",
@@ -743,6 +813,41 @@ var navigationMenuRegistryItem = {
743
813
  target: "src/components/ui/NavigationMenu"
744
814
  };
745
815
 
816
+ // src/items/pagination.ts
817
+ var paginationRegistryItem = {
818
+ name: "pagination",
819
+ canonicalName: "Pagination",
820
+ type: "component",
821
+ category: "navigation",
822
+ aliases: [],
823
+ files: [
824
+ "primitives/Pagination/Pagination.tsx",
825
+ "primitives/Pagination/Pagination.types.ts",
826
+ "primitives/Pagination/Pagination.variants.ts"
827
+ ],
828
+ remoteFiles: [
829
+ {
830
+ path: "primitives/Pagination/Pagination.tsx"
831
+ },
832
+ {
833
+ path: "primitives/Pagination/Pagination.types.ts"
834
+ },
835
+ {
836
+ path: "primitives/Pagination/Pagination.variants.ts"
837
+ }
838
+ ],
839
+ dependencies: [
840
+ "class-variance-authority",
841
+ "clsx",
842
+ "lucide-react",
843
+ "tailwind-merge"
844
+ ],
845
+ registryDependencies: [],
846
+ utilities: ["cn"],
847
+ styles: ["theme"],
848
+ target: "src/components/ui/Pagination"
849
+ };
850
+
746
851
  // src/items/popover.ts
747
852
  var popoverRegistryItem = {
748
853
  name: "popover",
@@ -1546,7 +1651,7 @@ var commandPaletteRegistryItem = {
1546
1651
  "blocks/CommandPalette/CommandPalette.variants.ts"
1547
1652
  ],
1548
1653
  dependencies: ["clsx", "tailwind-merge"],
1549
- registryDependencies: ["dialog", "input", "scroll-area", "separator"],
1654
+ registryDependencies: ["combobox", "dialog", "scroll-area", "separator"],
1550
1655
  utilities: ["cn"],
1551
1656
  styles: ["theme"],
1552
1657
  target: "src/components/ui/CommandPalette"
@@ -1606,6 +1711,101 @@ var emptyRegistryItem = {
1606
1711
  target: "src/components/ui/Empty"
1607
1712
  };
1608
1713
 
1714
+ // src/items/page-header.ts
1715
+ var pageHeaderRegistryItem = {
1716
+ name: "page-header",
1717
+ canonicalName: "PageHeader",
1718
+ type: "block",
1719
+ category: "blocks",
1720
+ aliases: ["page-title"],
1721
+ files: [
1722
+ "blocks/PageHeader/PageHeader.tsx",
1723
+ "blocks/PageHeader/PageHeader.types.ts",
1724
+ "blocks/PageHeader/PageHeader.variants.ts"
1725
+ ],
1726
+ dependencies: ["clsx", "tailwind-merge"],
1727
+ registryDependencies: ["breadcrumb", "button"],
1728
+ utilities: ["cn"],
1729
+ styles: ["theme"],
1730
+ target: "src/components/ui/PageHeader"
1731
+ };
1732
+
1733
+ // src/items/stats-card.ts
1734
+ var statsCardRegistryItem = {
1735
+ name: "stats-card",
1736
+ canonicalName: "StatsCard",
1737
+ type: "block",
1738
+ category: "blocks",
1739
+ aliases: ["metric-card", "kpi-card"],
1740
+ files: [
1741
+ "blocks/StatsCard/StatsCard.tsx",
1742
+ "blocks/StatsCard/StatsCard.types.ts",
1743
+ "blocks/StatsCard/StatsCard.variants.ts"
1744
+ ],
1745
+ dependencies: ["clsx", "tailwind-merge"],
1746
+ registryDependencies: ["card"],
1747
+ utilities: ["cn"],
1748
+ styles: ["theme"],
1749
+ target: "src/components/ui/StatsCard"
1750
+ };
1751
+
1752
+ // src/items/filter-toolbar.ts
1753
+ var filterToolbarRegistryItem = {
1754
+ name: "filter-toolbar",
1755
+ canonicalName: "FilterToolbar",
1756
+ type: "block",
1757
+ category: "blocks",
1758
+ aliases: ["table-filters", "list-filters"],
1759
+ files: [
1760
+ "blocks/FilterToolbar/FilterToolbar.tsx",
1761
+ "blocks/FilterToolbar/FilterToolbar.types.ts",
1762
+ "blocks/FilterToolbar/FilterToolbar.variants.ts"
1763
+ ],
1764
+ dependencies: ["clsx", "tailwind-merge"],
1765
+ registryDependencies: ["button", "input", "select", "toolbar"],
1766
+ utilities: ["cn"],
1767
+ styles: ["theme"],
1768
+ target: "src/components/ui/FilterToolbar"
1769
+ };
1770
+
1771
+ // src/items/data-table.ts
1772
+ var dataTableRegistryItem = {
1773
+ name: "data-table",
1774
+ canonicalName: "DataTable",
1775
+ type: "block",
1776
+ category: "blocks",
1777
+ aliases: ["table-view"],
1778
+ files: [
1779
+ "blocks/DataTable/DataTable.tsx",
1780
+ "blocks/DataTable/DataTable.types.ts",
1781
+ "blocks/DataTable/DataTable.variants.ts"
1782
+ ],
1783
+ dependencies: ["clsx", "tailwind-merge"],
1784
+ registryDependencies: ["pagination", "table"],
1785
+ utilities: ["cn"],
1786
+ styles: ["theme"],
1787
+ target: "src/components/ui/DataTable"
1788
+ };
1789
+
1790
+ // src/items/settings-page-layout.ts
1791
+ var settingsPageLayoutRegistryItem = {
1792
+ name: "settings-page-layout",
1793
+ canonicalName: "SettingsPageLayout",
1794
+ type: "block",
1795
+ category: "layout",
1796
+ aliases: ["settings-template", "settings-layout"],
1797
+ files: [
1798
+ "templates/SettingsPageLayout/SettingsPageLayout.tsx",
1799
+ "templates/SettingsPageLayout/SettingsPageLayout.types.ts",
1800
+ "templates/SettingsPageLayout/SettingsPageLayout.variants.ts"
1801
+ ],
1802
+ dependencies: ["clsx", "tailwind-merge"],
1803
+ registryDependencies: ["page-header", "settings-panel"],
1804
+ utilities: ["cn"],
1805
+ styles: ["theme"],
1806
+ target: "src/components/ui/SettingsPageLayout"
1807
+ };
1808
+
1609
1809
  // src/items/index.ts
1610
1810
  var registryItems = [
1611
1811
  accordionRegistryItem,
@@ -1613,11 +1813,13 @@ var registryItems = [
1613
1813
  alertRegistryItem,
1614
1814
  avatarRegistryItem,
1615
1815
  badgeRegistryItem,
1816
+ breadcrumbRegistryItem,
1616
1817
  buttonRegistryItem,
1617
1818
  cardRegistryItem,
1618
1819
  checkboxRegistryItem,
1619
1820
  collapsibleRegistryItem,
1620
1821
  contextMenuRegistryItem,
1822
+ datePickerRegistryItem,
1621
1823
  dialogRegistryItem,
1622
1824
  drawerRegistryItem,
1623
1825
  fieldRegistryItem,
@@ -1629,6 +1831,7 @@ var registryItems = [
1629
1831
  meterRegistryItem,
1630
1832
  numberFieldRegistryItem,
1631
1833
  navigationMenuRegistryItem,
1834
+ paginationRegistryItem,
1632
1835
  popoverRegistryItem,
1633
1836
  previewCardRegistryItem,
1634
1837
  progressRegistryItem,
@@ -1656,7 +1859,12 @@ var registryItems = [
1656
1859
  checkboxGroupRegistryItem,
1657
1860
  comboboxRegistryItem,
1658
1861
  otpFieldRegistryItem,
1659
- emptyRegistryItem
1862
+ emptyRegistryItem,
1863
+ pageHeaderRegistryItem,
1864
+ statsCardRegistryItem,
1865
+ filterToolbarRegistryItem,
1866
+ dataTableRegistryItem,
1867
+ settingsPageLayoutRegistryItem
1660
1868
  ];
1661
1869
 
1662
1870
  // src/styles/theme.ts
@@ -2164,4 +2372,4 @@ var registryManifest = {
2164
2372
  utilities: registryUtilities
2165
2373
  };
2166
2374
 
2167
- export { accordionRegistryItem, alertDialogRegistryItem, alertRegistryItem, authFormRegistryItem, autocompleteRegistryItem, avatarRegistryItem, badgeRegistryItem, buttonRegistryItem, cardRegistryItem, checkboxGroupRegistryItem, checkboxRegistryItem, cnRegistryUtility, collapsibleRegistryItem, comboboxRegistryItem, commandPaletteRegistryItem, contextMenuRegistryItem, dashboardShellRegistryItem, dialogRegistryItem, drawerRegistryItem, emptyRegistryItem, fieldRegistryItem, fieldsetRegistryItem, formFieldRegistryItem, formRegistryItem, getInstallLayer, inputRegistryItem, menuRegistryItem, menubarRegistryItem, meterRegistryItem, navigationMenuRegistryItem, numberFieldRegistryItem, otpFieldRegistryItem, popoverRegistryItem, previewCardRegistryItem, progressRegistryItem, radioGroupRegistryItem, registryItems, registryManifest, registryStyles, registryUtilities, registryVersion, scrollAreaRegistryItem, selectRegistryItem, separatorRegistryItem, settingsPanelRegistryItem, sidebarRegistryItem, sliderRegistryItem, switchRegistryItem, tableRegistryItem, tabsRegistryItem, textareaRegistryItem, themeRegistryStyle, toastRegistryItem, toggleGroupRegistryItem, toggleRegistryItem, toolbarRegistryItem, tooltipRegistryItem, validateRegistry, validateRegistryItem };
2375
+ export { accordionRegistryItem, alertDialogRegistryItem, alertRegistryItem, authFormRegistryItem, autocompleteRegistryItem, avatarRegistryItem, badgeRegistryItem, breadcrumbRegistryItem, buttonRegistryItem, cardRegistryItem, checkboxGroupRegistryItem, checkboxRegistryItem, cnRegistryUtility, collapsibleRegistryItem, comboboxRegistryItem, commandPaletteRegistryItem, contextMenuRegistryItem, dashboardShellRegistryItem, dataTableRegistryItem, datePickerRegistryItem, dialogRegistryItem, drawerRegistryItem, emptyRegistryItem, fieldRegistryItem, fieldsetRegistryItem, filterToolbarRegistryItem, formFieldRegistryItem, formRegistryItem, getInstallLayer, inputRegistryItem, menuRegistryItem, menubarRegistryItem, meterRegistryItem, navigationMenuRegistryItem, numberFieldRegistryItem, otpFieldRegistryItem, pageHeaderRegistryItem, paginationRegistryItem, popoverRegistryItem, previewCardRegistryItem, progressRegistryItem, radioGroupRegistryItem, registryItems, registryManifest, registryStyles, registryUtilities, registryVersion, scrollAreaRegistryItem, selectRegistryItem, separatorRegistryItem, settingsPageLayoutRegistryItem, settingsPanelRegistryItem, sidebarRegistryItem, sliderRegistryItem, statsCardRegistryItem, switchRegistryItem, tableRegistryItem, tabsRegistryItem, textareaRegistryItem, themeRegistryStyle, toastRegistryItem, toggleGroupRegistryItem, toggleRegistryItem, toolbarRegistryItem, tooltipRegistryItem, validateRegistry, validateRegistryItem };
@@ -0,0 +1,7 @@
1
+ /**
2
+ * breadcrumb.ts
3
+ *
4
+ * Registry metadata for the Breadcrumb component.
5
+ */
6
+ import type { RegistryItem } from "../registry.types.js";
7
+ export declare const breadcrumbRegistryItem: RegistryItem;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * data-table.ts
3
+ *
4
+ * Registry metadata for the DataTable block.
5
+ */
6
+ import type { RegistryItem } from "../registry.types.js";
7
+ export declare const dataTableRegistryItem: RegistryItem;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * date-picker.ts
3
+ *
4
+ * Registry metadata for the DatePicker component.
5
+ */
6
+ import type { RegistryItem } from "../registry.types.js";
7
+ export declare const datePickerRegistryItem: RegistryItem;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * filter-toolbar.ts
3
+ *
4
+ * Registry metadata for the FilterToolbar block.
5
+ */
6
+ import type { RegistryItem } from "../registry.types.js";
7
+ export declare const filterToolbarRegistryItem: RegistryItem;
@@ -4,11 +4,13 @@ export { alertDialogRegistryItem } from "./alert-dialog.js";
4
4
  export { alertRegistryItem } from "./alert.js";
5
5
  export { avatarRegistryItem } from "./avatar.js";
6
6
  export { badgeRegistryItem } from "./badge.js";
7
+ export { breadcrumbRegistryItem } from "./breadcrumb.js";
7
8
  export { buttonRegistryItem } from "./button.js";
8
9
  export { cardRegistryItem } from "./card.js";
9
10
  export { checkboxRegistryItem } from "./checkbox.js";
10
11
  export { collapsibleRegistryItem } from "./collapsible.js";
11
12
  export { contextMenuRegistryItem } from "./context-menu.js";
13
+ export { datePickerRegistryItem } from "./date-picker.js";
12
14
  export { dialogRegistryItem } from "./dialog.js";
13
15
  export { drawerRegistryItem } from "./drawer.js";
14
16
  export { fieldRegistryItem } from "./field.js";
@@ -20,6 +22,7 @@ export { menubarRegistryItem } from "./menubar.js";
20
22
  export { meterRegistryItem } from "./meter.js";
21
23
  export { numberFieldRegistryItem } from "./number-field.js";
22
24
  export { navigationMenuRegistryItem } from "./navigation-menu.js";
25
+ export { paginationRegistryItem } from "./pagination.js";
23
26
  export { popoverRegistryItem } from "./popover.js";
24
27
  export { previewCardRegistryItem } from "./preview-card.js";
25
28
  export { progressRegistryItem } from "./progress.js";
@@ -47,5 +50,10 @@ export { authFormRegistryItem } from "./auth-form.js";
47
50
  export { commandPaletteRegistryItem } from "./command-palette.js";
48
51
  export { otpFieldRegistryItem } from "./otp-field.js";
49
52
  export { emptyRegistryItem } from "./empty.js";
53
+ export { pageHeaderRegistryItem } from "./page-header.js";
54
+ export { statsCardRegistryItem } from "./stats-card.js";
55
+ export { filterToolbarRegistryItem } from "./filter-toolbar.js";
56
+ export { dataTableRegistryItem } from "./data-table.js";
57
+ export { settingsPageLayoutRegistryItem } from "./settings-page-layout.js";
50
58
  export { tableRegistryItem } from "./table.js";
51
59
  export declare const registryItems: RegistryItem[];
@@ -0,0 +1,7 @@
1
+ /**
2
+ * page-header.ts
3
+ *
4
+ * Registry metadata for the PageHeader block.
5
+ */
6
+ import type { RegistryItem } from "../registry.types.js";
7
+ export declare const pageHeaderRegistryItem: RegistryItem;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * pagination.ts
3
+ *
4
+ * Registry metadata for the Pagination component.
5
+ */
6
+ import type { RegistryItem } from "../registry.types.js";
7
+ export declare const paginationRegistryItem: RegistryItem;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * settings-page-layout.ts
3
+ *
4
+ * Registry metadata for the SettingsPageLayout block.
5
+ */
6
+ import type { RegistryItem } from "../registry.types.js";
7
+ export declare const settingsPageLayoutRegistryItem: RegistryItem;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * stats-card.ts
3
+ *
4
+ * Registry metadata for the StatsCard block.
5
+ */
6
+ import type { RegistryItem } from "../registry.types.js";
7
+ export declare const statsCardRegistryItem: RegistryItem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dalexto/lexsys-registry",
3
- "version": "0.0.6",
3
+ "version": "0.1.0",
4
4
  "description": "Install metadata and templates for the Lexsys registry-first UI framework",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -13,7 +13,10 @@ import {
13
13
  DialogTitle,
14
14
  DialogViewport,
15
15
  } from "@/components/primitives/Dialog"
16
- import { Input } from "@/components/primitives/Input"
16
+ import {
17
+ ComboboxInput,
18
+ ComboboxInputGroup,
19
+ } from "@/components/primitives/Combobox"
17
20
  import { Separator } from "@/components/primitives/Separator"
18
21
  import {
19
22
  ScrollArea,
@@ -113,13 +116,14 @@ const CommandPaletteInput = ({
113
116
  ...props
114
117
  }: CommandPaletteInputProps) => {
115
118
  return (
116
- <Input
117
- ref={ref}
118
- autoFocus
119
- className={cn(commandPaletteInputClasses, className)}
120
- aria-label="Search commands"
121
- {...props}
122
- />
119
+ <ComboboxInputGroup className={cn(commandPaletteInputClasses, className)}>
120
+ <ComboboxInput
121
+ ref={ref}
122
+ autoFocus
123
+ aria-label="Search commands"
124
+ {...props}
125
+ />
126
+ </ComboboxInputGroup>
123
127
  )
124
128
  }
125
129
 
@@ -11,7 +11,7 @@ import type {
11
11
  Ref,
12
12
  } from "react"
13
13
  import type { DialogProps } from "@/components/primitives/Dialog"
14
- import type { InputProps } from "@/components/primitives/Input"
14
+ import type { ComboboxInputProps } from "@/components/primitives/Combobox"
15
15
 
16
16
  export interface CommandPaletteProps extends DialogProps {
17
17
  children?: ReactNode
@@ -23,7 +23,7 @@ export interface CommandPaletteContentProps extends HTMLAttributes<HTMLDivElemen
23
23
  children?: ReactNode
24
24
  }
25
25
 
26
- export type CommandPaletteInputProps = InputProps
26
+ export type CommandPaletteInputProps = ComboboxInputProps
27
27
 
28
28
  export type CommandPaletteSeparatorProps = Record<string, never>
29
29
 
@@ -0,0 +1,236 @@
1
+ /**
2
+ * DataTable.tsx
3
+ *
4
+ * Reference DataTable block — compound Table with pagination footer.
5
+ */
6
+
7
+ import {
8
+ Pagination,
9
+ PaginationContent,
10
+ PaginationEllipsis,
11
+ PaginationItem,
12
+ PaginationLink,
13
+ PaginationNext,
14
+ PaginationPrevious,
15
+ } from "@/components/primitives/Pagination"
16
+ import {
17
+ Table,
18
+ TableBody,
19
+ TableCaption,
20
+ TableCell,
21
+ TableFooter,
22
+ TableHead,
23
+ TableHeader,
24
+ TableRow,
25
+ } from "@/components/primitives/Table"
26
+ import type {
27
+ DataTableBodyProps,
28
+ DataTableCaptionProps,
29
+ DataTableCellProps,
30
+ DataTableFooterProps,
31
+ DataTableHeadProps,
32
+ DataTableHeaderProps,
33
+ DataTablePaginationBarProps,
34
+ DataTablePaginationContentProps,
35
+ DataTablePaginationEllipsisProps,
36
+ DataTablePaginationItemProps,
37
+ DataTablePaginationLinkProps,
38
+ DataTablePaginationNextProps,
39
+ DataTablePaginationPreviousProps,
40
+ DataTablePaginationProps,
41
+ DataTableProps,
42
+ DataTableRowProps,
43
+ DataTableTableProps,
44
+ DataTableToolbarProps,
45
+ } from "./DataTable.types"
46
+ import {
47
+ dataTableClasses,
48
+ dataTableFooterClasses,
49
+ dataTablePaginationClasses,
50
+ } from "./DataTable.variants"
51
+ import { cn } from "@/lib/utils"
52
+
53
+ const DataTable = ({ ref, className, ...props }: DataTableProps) => {
54
+ return (
55
+ <div ref={ref} className={cn(dataTableClasses(), className)} {...props} />
56
+ )
57
+ }
58
+
59
+ DataTable.displayName = "DataTable"
60
+
61
+ const DataTableToolbar = ({
62
+ ref,
63
+ className,
64
+ ...props
65
+ }: DataTableToolbarProps) => {
66
+ return <div ref={ref} className={className} {...props} />
67
+ }
68
+
69
+ DataTableToolbar.displayName = "DataTableToolbar"
70
+
71
+ const DataTableTable = ({ ref, className, ...props }: DataTableTableProps) => {
72
+ return <Table ref={ref} className={className} {...props} />
73
+ }
74
+
75
+ DataTableTable.displayName = "DataTableTable"
76
+
77
+ const DataTableHeader = ({
78
+ ref,
79
+ className,
80
+ ...props
81
+ }: DataTableHeaderProps) => {
82
+ return <TableHeader ref={ref} className={className} {...props} />
83
+ }
84
+
85
+ DataTableHeader.displayName = "DataTableHeader"
86
+
87
+ const DataTableBody = ({ ref, className, ...props }: DataTableBodyProps) => {
88
+ return <TableBody ref={ref} className={className} {...props} />
89
+ }
90
+
91
+ DataTableBody.displayName = "DataTableBody"
92
+
93
+ const DataTableFooter = ({
94
+ ref,
95
+ className,
96
+ ...props
97
+ }: DataTableFooterProps) => {
98
+ return <TableFooter ref={ref} className={className} {...props} />
99
+ }
100
+
101
+ DataTableFooter.displayName = "DataTableFooter"
102
+
103
+ const DataTableRow = ({ ref, className, ...props }: DataTableRowProps) => {
104
+ return <TableRow ref={ref} className={className} {...props} />
105
+ }
106
+
107
+ DataTableRow.displayName = "DataTableRow"
108
+
109
+ const DataTableHead = ({ ref, className, ...props }: DataTableHeadProps) => {
110
+ return <TableHead ref={ref} className={className} {...props} />
111
+ }
112
+
113
+ DataTableHead.displayName = "DataTableHead"
114
+
115
+ const DataTableCell = ({ ref, className, ...props }: DataTableCellProps) => {
116
+ return <TableCell ref={ref} className={className} {...props} />
117
+ }
118
+
119
+ DataTableCell.displayName = "DataTableCell"
120
+
121
+ const DataTableCaption = ({
122
+ ref,
123
+ className,
124
+ ...props
125
+ }: DataTableCaptionProps) => {
126
+ return <TableCaption ref={ref} className={className} {...props} />
127
+ }
128
+
129
+ DataTableCaption.displayName = "DataTableCaption"
130
+
131
+ const DataTablePaginationBar = ({
132
+ ref,
133
+ className,
134
+ ...props
135
+ }: DataTablePaginationBarProps) => {
136
+ return (
137
+ <div
138
+ ref={ref}
139
+ className={cn(dataTableFooterClasses(), className)}
140
+ {...props}
141
+ />
142
+ )
143
+ }
144
+
145
+ DataTablePaginationBar.displayName = "DataTablePaginationBar"
146
+
147
+ const DataTablePagination = ({
148
+ ref,
149
+ className,
150
+ ...props
151
+ }: DataTablePaginationProps) => {
152
+ return (
153
+ <Pagination
154
+ ref={ref}
155
+ className={cn(dataTablePaginationClasses(), className)}
156
+ {...props}
157
+ />
158
+ )
159
+ }
160
+
161
+ DataTablePagination.displayName = "DataTablePagination"
162
+
163
+ const DataTablePaginationContent = ({
164
+ className,
165
+ ...props
166
+ }: DataTablePaginationContentProps) => {
167
+ return <PaginationContent className={className} {...props} />
168
+ }
169
+
170
+ DataTablePaginationContent.displayName = "DataTablePaginationContent"
171
+
172
+ const DataTablePaginationItem = ({
173
+ className,
174
+ ...props
175
+ }: DataTablePaginationItemProps) => {
176
+ return <PaginationItem className={className} {...props} />
177
+ }
178
+
179
+ DataTablePaginationItem.displayName = "DataTablePaginationItem"
180
+
181
+ const DataTablePaginationLink = ({
182
+ className,
183
+ ...props
184
+ }: DataTablePaginationLinkProps) => {
185
+ return <PaginationLink className={className} {...props} />
186
+ }
187
+
188
+ DataTablePaginationLink.displayName = "DataTablePaginationLink"
189
+
190
+ const DataTablePaginationPrevious = ({
191
+ className,
192
+ ...props
193
+ }: DataTablePaginationPreviousProps) => {
194
+ return <PaginationPrevious className={className} {...props} />
195
+ }
196
+
197
+ DataTablePaginationPrevious.displayName = "DataTablePaginationPrevious"
198
+
199
+ const DataTablePaginationNext = ({
200
+ className,
201
+ ...props
202
+ }: DataTablePaginationNextProps) => {
203
+ return <PaginationNext className={className} {...props} />
204
+ }
205
+
206
+ DataTablePaginationNext.displayName = "DataTablePaginationNext"
207
+
208
+ const DataTablePaginationEllipsis = ({
209
+ className,
210
+ ...props
211
+ }: DataTablePaginationEllipsisProps) => {
212
+ return <PaginationEllipsis className={className} {...props} />
213
+ }
214
+
215
+ DataTablePaginationEllipsis.displayName = "DataTablePaginationEllipsis"
216
+
217
+ export {
218
+ DataTable,
219
+ DataTableToolbar,
220
+ DataTableTable,
221
+ DataTableHeader,
222
+ DataTableBody,
223
+ DataTableFooter,
224
+ DataTableRow,
225
+ DataTableHead,
226
+ DataTableCell,
227
+ DataTableCaption,
228
+ DataTablePaginationBar,
229
+ DataTablePagination,
230
+ DataTablePaginationContent,
231
+ DataTablePaginationItem,
232
+ DataTablePaginationLink,
233
+ DataTablePaginationPrevious,
234
+ DataTablePaginationNext,
235
+ DataTablePaginationEllipsis,
236
+ }