@customafk/lunas-ui 0.0.73 → 0.0.74

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 (148) hide show
  1. package/dist/{button-DikL7zwS.d.ts → button-BSbpgPcU.d.ts} +6 -6
  2. package/dist/{button-DoAx4aaD.d.cts → button-CP7eGMBD.d.cts} +6 -6
  3. package/dist/cards/simple-card.d.cts +2 -2
  4. package/dist/{command-BUBPlGK4.d.ts → command-B573Pd57.d.ts} +12 -12
  5. package/dist/{command-rxs0v832.d.cts → command-Be5dDVBo.d.cts} +12 -12
  6. package/dist/data-display/empty.d.ts +2 -2
  7. package/dist/data-display/statistic.d.cts +2 -2
  8. package/dist/{dialog-BBDmpwtY.d.cts → dialog-CDS4oetv.d.cts} +12 -12
  9. package/dist/{dialog-DUEQa9I5.d.ts → dialog-CbwE12Bt.d.ts} +12 -12
  10. package/dist/dialogs/detail-dialog/component/sidebar.d.cts +4 -4
  11. package/dist/dialogs/detail-dialog/component/sidebar.d.ts +4 -4
  12. package/dist/dialogs/form-dialog.d.cts +2 -2
  13. package/dist/dialogs/form-dialog.d.ts +2 -2
  14. package/dist/forms/combobox-field.d.cts +2 -2
  15. package/dist/forms/combobox-field.d.ts +2 -2
  16. package/dist/forms/date-field.d.cts +2 -2
  17. package/dist/forms/date-field.d.ts +2 -2
  18. package/dist/forms/form-wrapper.d.cts +2 -2
  19. package/dist/forms/form-wrapper.d.ts +2 -2
  20. package/dist/forms/multi-select-field.d.cts +2 -2
  21. package/dist/forms/multi-select-field.d.ts +2 -2
  22. package/dist/forms/number-field.d.cts +2 -2
  23. package/dist/forms/number-field.d.ts +2 -2
  24. package/dist/forms/password-field.d.cts +2 -2
  25. package/dist/forms/password-field.d.ts +2 -2
  26. package/dist/forms/select-field.d.cts +2 -2
  27. package/dist/forms/select-field.d.ts +2 -2
  28. package/dist/forms/switch-field.d.cts +2 -2
  29. package/dist/forms/switch-field.d.ts +2 -2
  30. package/dist/forms/text-field.d.cts +2 -2
  31. package/dist/forms/text-field.d.ts +2 -2
  32. package/dist/forms/textarea-field.d.cts +2 -2
  33. package/dist/forms/textarea-field.d.ts +2 -2
  34. package/dist/{input-DvX75CSu.d.cts → input-B29k_HFS.d.cts} +3 -3
  35. package/dist/{input-DomGaN2h.d.ts → input-DNUBzDBp.d.ts} +3 -3
  36. package/dist/layouts/app-layout/index.d.cts +5 -5
  37. package/dist/layouts/app-layout/index.d.ts +28 -28
  38. package/dist/layouts/flex.d.cts +2 -2
  39. package/dist/layouts/flex.d.ts +2 -2
  40. package/dist/layouts/service-layout/index.d.cts +3 -3
  41. package/dist/layouts/service-layout/index.d.ts +15 -15
  42. package/dist/{separator-CkPhyUEI.d.ts → separator-9Tfop9BA.d.ts} +3 -3
  43. package/dist/{separator-B0ekl2cm.d.cts → separator-CM1kQQxq.d.cts} +3 -3
  44. package/dist/table/index.cjs +1 -1
  45. package/dist/table/index.cjs.map +1 -1
  46. package/dist/table/index.d.cts +4 -2
  47. package/dist/table/index.d.ts +4 -2
  48. package/dist/table/index.js +1 -1
  49. package/dist/table/index.js.map +1 -1
  50. package/dist/{toggle-vH-BH18X.d.ts → toggle-CpmkuACW.d.ts} +5 -5
  51. package/dist/{toggle-C2H0HKpd.d.cts → toggle-DK6k1TbN.d.cts} +5 -5
  52. package/dist/{tooltip-BhypOt39.d.cts → tooltip-2nMDXmIC.d.cts} +6 -6
  53. package/dist/{tooltip-Dibm3gcf.d.ts → tooltip-D3LmNLDU.d.ts} +6 -6
  54. package/dist/typography/paragraph.d.cts +2 -2
  55. package/dist/typography/paragraph.d.ts +2 -2
  56. package/dist/typography/title.d.cts +2 -2
  57. package/dist/typography/title.d.ts +2 -2
  58. package/dist/ui/alert-dialog.d.cts +12 -12
  59. package/dist/ui/alert-dialog.d.ts +12 -12
  60. package/dist/ui/alert.d.cts +7 -7
  61. package/dist/ui/alert.d.ts +5 -5
  62. package/dist/ui/aspect-ratio.d.cts +2 -2
  63. package/dist/ui/aspect-ratio.d.ts +2 -2
  64. package/dist/ui/avatar.d.cts +4 -4
  65. package/dist/ui/avatar.d.ts +4 -4
  66. package/dist/ui/badge.d.cts +2 -2
  67. package/dist/ui/badge.d.ts +2 -2
  68. package/dist/ui/breadcrumb.d.cts +8 -8
  69. package/dist/ui/breadcrumb.d.ts +8 -8
  70. package/dist/ui/button.d.cts +1 -1
  71. package/dist/ui/button.d.ts +1 -1
  72. package/dist/ui/calendar.d.cts +4 -4
  73. package/dist/ui/calendar.d.ts +4 -4
  74. package/dist/ui/card.d.cts +8 -8
  75. package/dist/ui/card.d.ts +8 -8
  76. package/dist/ui/carousel.d.cts +7 -7
  77. package/dist/ui/carousel.d.ts +7 -7
  78. package/dist/ui/collapsible.d.cts +4 -4
  79. package/dist/ui/collapsible.d.ts +4 -4
  80. package/dist/ui/command.d.cts +2 -2
  81. package/dist/ui/command.d.ts +2 -2
  82. package/dist/ui/context-menu.d.cts +16 -16
  83. package/dist/ui/context-menu.d.ts +16 -16
  84. package/dist/ui/dialog.d.cts +1 -1
  85. package/dist/ui/dialog.d.ts +1 -1
  86. package/dist/ui/dropdown-menu.d.cts +16 -16
  87. package/dist/ui/dropdown-menu.d.ts +16 -16
  88. package/dist/ui/file-uploader.d.cts +2 -2
  89. package/dist/ui/file-uploader.d.ts +2 -2
  90. package/dist/ui/form.d.cts +7 -7
  91. package/dist/ui/form.d.ts +7 -7
  92. package/dist/ui/hover-card.d.cts +4 -4
  93. package/dist/ui/hover-card.d.ts +4 -4
  94. package/dist/ui/input-otp.d.cts +5 -5
  95. package/dist/ui/input-otp.d.ts +5 -5
  96. package/dist/ui/input.d.cts +1 -1
  97. package/dist/ui/input.d.ts +1 -1
  98. package/dist/ui/inputs/search-input.d.cts +3 -3
  99. package/dist/ui/inputs/search-input.d.ts +3 -3
  100. package/dist/ui/label.d.cts +2 -2
  101. package/dist/ui/label.d.ts +2 -2
  102. package/dist/ui/menubar.d.cts +17 -17
  103. package/dist/ui/menubar.d.ts +17 -17
  104. package/dist/ui/multi-select.d.cts +2 -2
  105. package/dist/ui/multi-select.d.ts +2 -2
  106. package/dist/ui/navigation-menu.d.cts +9 -9
  107. package/dist/ui/navigation-menu.d.ts +9 -9
  108. package/dist/ui/pagination.d.cts +9 -9
  109. package/dist/ui/pagination.d.ts +9 -9
  110. package/dist/ui/popover.d.cts +5 -5
  111. package/dist/ui/popover.d.ts +5 -5
  112. package/dist/ui/progress.d.cts +2 -2
  113. package/dist/ui/progress.d.ts +2 -2
  114. package/dist/ui/radio-group.d.cts +3 -3
  115. package/dist/ui/radio-group.d.ts +3 -3
  116. package/dist/ui/resizable.d.cts +4 -4
  117. package/dist/ui/resizable.d.ts +4 -4
  118. package/dist/ui/scroll-area.d.cts +3 -3
  119. package/dist/ui/scroll-area.d.ts +3 -3
  120. package/dist/ui/select.d.cts +11 -11
  121. package/dist/ui/select.d.ts +11 -11
  122. package/dist/ui/separator.d.cts +1 -1
  123. package/dist/ui/separator.d.ts +1 -1
  124. package/dist/ui/sheet.d.cts +9 -9
  125. package/dist/ui/sheet.d.ts +9 -9
  126. package/dist/ui/sidebar.d.cts +30 -30
  127. package/dist/ui/sidebar.d.ts +30 -30
  128. package/dist/ui/skeleton.d.cts +2 -2
  129. package/dist/ui/skeleton.d.ts +2 -2
  130. package/dist/ui/slider.d.cts +2 -2
  131. package/dist/ui/slider.d.ts +2 -2
  132. package/dist/ui/sonner.d.cts +2 -2
  133. package/dist/ui/sonner.d.ts +2 -2
  134. package/dist/ui/switch.d.cts +2 -2
  135. package/dist/ui/switch.d.ts +2 -2
  136. package/dist/ui/table.d.cts +9 -9
  137. package/dist/ui/table.d.ts +9 -9
  138. package/dist/ui/tabs.d.cts +5 -5
  139. package/dist/ui/tabs.d.ts +5 -5
  140. package/dist/ui/textarea.d.cts +2 -2
  141. package/dist/ui/textarea.d.ts +2 -2
  142. package/dist/ui/toggle-group.d.cts +4 -4
  143. package/dist/ui/toggle-group.d.ts +4 -4
  144. package/dist/ui/toggle.d.cts +1 -1
  145. package/dist/ui/toggle.d.ts +1 -1
  146. package/dist/ui/tooltip.d.cts +1 -1
  147. package/dist/ui/tooltip.d.ts +1 -1
  148. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime23 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime18 from "react/jsx-runtime";
2
2
  import { ColumnDef } from "@tanstack/react-table";
3
3
 
4
4
  //#region packages/components/table/index.d.ts
@@ -7,6 +7,7 @@ type Props<T> = {
7
7
  totalCount?: number;
8
8
  isLoading?: boolean;
9
9
  isFetching?: boolean;
10
+ allowLoadMore?: boolean;
10
11
  columns: ColumnDef<T>[];
11
12
  onAdd?: () => void;
12
13
  onRefresh?: () => void;
@@ -18,12 +19,13 @@ declare function Table<T extends Record<string, unknown>>({
18
19
  totalCount,
19
20
  isLoading,
20
21
  isFetching,
22
+ allowLoadMore,
21
23
  columns,
22
24
  onAdd,
23
25
  onRefresh,
24
26
  onClickRow,
25
27
  onFetchNextPage
26
- }: Props<T>): react_jsx_runtime23.JSX.Element;
28
+ }: Props<T>): react_jsx_runtime18.JSX.Element;
27
29
  //#endregion
28
30
  export { Table };
29
31
  //# sourceMappingURL=index.d.cts.map
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime14 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime189 from "react/jsx-runtime";
2
2
  import { ColumnDef } from "@tanstack/react-table";
3
3
 
4
4
  //#region packages/components/table/index.d.ts
@@ -7,6 +7,7 @@ type Props<T> = {
7
7
  totalCount?: number;
8
8
  isLoading?: boolean;
9
9
  isFetching?: boolean;
10
+ allowLoadMore?: boolean;
10
11
  columns: ColumnDef<T>[];
11
12
  onAdd?: () => void;
12
13
  onRefresh?: () => void;
@@ -18,12 +19,13 @@ declare function Table<T extends Record<string, unknown>>({
18
19
  totalCount,
19
20
  isLoading,
20
21
  isFetching,
22
+ allowLoadMore,
21
23
  columns,
22
24
  onAdd,
23
25
  onRefresh,
24
26
  onClickRow,
25
27
  onFetchNextPage
26
- }: Props<T>): react_jsx_runtime14.JSX.Element;
28
+ }: Props<T>): react_jsx_runtime189.JSX.Element;
27
29
  //#endregion
28
30
  export { Table };
29
31
  //# sourceMappingURL=index.d.ts.map
@@ -1,2 +1,2 @@
1
- import"../dist-CkzytVha.js";import"../button-variants-Y1GTBayz.js";import{Button as e}from"../button-DhQJ9Ey8.js";import{Flex as t}from"../flex-D6XrXRQW.js";import"../paragraph-B9fp9JaI.js";import"../input-ZyZ1HKHN.js";import{DropdownMenu as n,DropdownMenuContent as r,DropdownMenuItem as i,DropdownMenuTrigger as a}from"../dropdown-menu-DS1A05D0.js";import{ScrollArea as o,ScrollBar as s}from"../scroll-area-BKJYk4zH.js";import{Table as c,TableBody as l,TableCell as u,TableFooter as d,TableHead as f,TableHeader as p,TableRow as m}from"../table-B7a9Rpsg.js";import{AddNewBtn as h}from"../add-new-_5opEbrI.js";import{RefreshBtn as g}from"../refresh-BHjc0ETv.js";import{SearchInput as _}from"../search-input-DM9ePMxA.js";import{ArrowLeftToLineIcon as v,ArrowRightToLineIcon as y,ChevronDown as b,ChevronUp as x,EllipsisIcon as S,LoaderIcon as C,PinOffIcon as w}from"lucide-react";import{cn as T}from"@customafk/react-toolkit/utils";import{memo as E,useCallback as D,useEffect as O,useMemo as k,useRef as A,useState as j}from"react";import{Fragment as M,jsx as N,jsxs as P}from"react/jsx-runtime";import{flexRender as F,getCoreRowModel as I,getFacetedRowModel as L,getFacetedUniqueValues as R,getFilteredRowModel as z,getSortedRowModel as B,useReactTable as V}from"@tanstack/react-table";import{useVirtualizer as H}from"@tanstack/react-virtual";const U=e=>{let t=e.getIsPinned();return{left:t===`left`?`${e.getStart(`left`)}px`:void 0,right:t===`right`?`${e.getAfter(`right`)}px`:void 0,position:t?`sticky`:`relative`,width:e.getSize(),zIndex:t?1:0}},W=E(({column:e})=>{let t=e.getIsSorted(),n=k(()=>({asc:N(x,{className:`shrink-0 opacity-60`,size:16,strokeWidth:2,"aria-hidden":`true`}),desc:N(b,{className:`shrink-0 opacity-60`,size:16,strokeWidth:2,"aria-hidden":`true`})}),[]);return t?n[t]:null});W.displayName=`SortingIndicator`;const G=E(({column:t})=>{let o=typeof t.columnDef.header==`string`?t.columnDef.header:`Column`,s=D(()=>t.pin(!1),[t]),c=D(()=>t.pin(`left`),[t]),l=D(()=>t.pin(`right`),[t]);return t.getCanPin()?t.getIsPinned()?N(e,{size:`icon`,variant:`ghost`,color:`secondary`,className:`hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none`,"aria-label":`Unpin ${o} column`,title:`Unpin ${o} column`,onClick:s,children:N(w,{className:`opacity-60`,size:16,"aria-hidden":`true`})}):P(n,{children:[N(a,{asChild:!0,children:N(e,{size:`icon`,variant:`ghost`,color:`secondary`,className:`size-7 shadow-none`,"aria-label":`Pin options for ${o} column`,title:`Pin options for ${o} column`,children:N(S,{className:`opacity-60`,size:16,"aria-hidden":`true`})})}),P(r,{align:`end`,children:[P(i,{onClick:c,children:[N(v,{size:16,className:`opacity-60`,"aria-hidden":`true`}),`Stick to left`]}),P(i,{onClick:l,children:[N(y,{size:16,className:`opacity-60`,"aria-hidden":`true`}),`Stick to right`]})]})]}):null});G.displayName=`PinControls`;const K=E(({header:e})=>{let{column:t}=e,n=D(e=>{t.getCanSort()&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),t.getToggleSortingHandler()?.(e))},[t]),r=t.getToggleSortingHandler();return e.isPlaceholder?N(`div`,{className:`flex items-center justify-between gap-2 truncate`}):P(`div`,{className:`flex items-center justify-between gap-2 truncate`,children:[P(`div`,{className:T(t.getCanSort()&&`flex h-full cursor-pointer items-center justify-between gap-2 select-none`),onClick:r,onKeyDown:n,tabIndex:t.getCanSort()?0:void 0,role:t.getCanSort()?`button`:void 0,children:[N(`span`,{className:`truncate`,children:F(t.columnDef.header,e.getContext())}),N(W,{column:t})]}),N(G,{column:t})]})});K.displayName=`HeaderContent`;const q=E(({row:e,measureElement:t,virtualRow:n,onClickRow:r})=>{let i=D(()=>{r&&r(e.id)},[e.id,r]);return N(m,{"data-index":n.index,ref:e=>t(e),className:`absolute flex w-full cursor-pointer focus:outline-none`,style:{transform:`translateY(${n.start}px)`},onClick:i,tabIndex:r?0:void 0,role:r?`button`:void 0,children:e.getVisibleCells().map(e=>{let t=e.column.getIsPinned(),n=t===`left`&&e.column.getIsLastColumn(`left`),r=t===`right`&&e.column.getIsFirstColumn(`right`);return N(u,{"data-pinned":t||void 0,"data-last-col":n?`left`:r?`right`:void 0,style:{...U(e.column),width:e.column.getSize()},className:T(`flex overflow-hidden py-2.5`,`data-pinned:bg-background/90`,`[&[data-pinned][data-last-col]]:border-border-weak`,`[&[data-pinned=left][data-last-col=left]]:border-r`,`[&[data-pinned=right][data-last-col=right]]:border-l`),children:F(e.column.columnDef.cell,e.getContext())},e.id)})})});q.displayName=`DataTableRow`;const J=({table:e,isLoading:t,isFetching:n,allowFetchMore:r=!0,onClickRow:i,onFetchNextPage:a})=>{let h=A(null),{rows:g}=e.getRowModel(),_=H({count:g.length,getScrollElement:()=>h.current,estimateSize:()=>37,measureElement:e=>e?.getBoundingClientRect().height??void 0,overscan:5}),v=D(e=>{if(!e)return;let{scrollHeight:t,scrollTop:i,clientHeight:o}=e;t-i-o<500&&!n&&r&&a&&a()},[r,n,a]),y=D(e=>{v(e.currentTarget)},[v]);return O(()=>{let e=setTimeout(()=>{v(h.current)},100);return()=>clearTimeout(e)},[v]),P(o,{ref:h,className:`border-border-weak bg-background relative w-full overflow-auto rounded-lg border`,onScroll:y,children:[P(c,{className:T(`!w-full`,`grid`,`border-separate border-spacing-0`,`[&_td]:border-border-weak`,`[&_th]:border-border-weak`,`[&_th]:border-b`,`[&_th]:border-b-border-weak`,`[&_tfoot_td]:border-t`),children:[N(p,{className:`sticky top-0 z-10 backdrop-blur-xs`,children:e.getHeaderGroups().map(e=>N(m,{className:`flex w-full border-none`,children:e.headers.map(e=>{let{column:t}=e,n=t.getIsPinned(),r=n===`left`&&t.getIsLastColumn(`left`),i=n===`right`&&t.getIsFirstColumn(`right`),a=n||void 0,o=r?`left`:i?`right`:void 0,s={width:e.getSize(),...U(e.column)};return N(f,{"data-pinned":a,"data-last-col":o,className:T(`relative flex h-9 font-semibold select-none`,`data-pinned:backdrop-blur-xs`,`data-pinned:bg-muted-weak`,`[&>.cursor-col-resize]:last:opacity-0`,`[&[data-pinned][data-last-col]]:border-border-weak`,`[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-pinned=left][data-last-col=left]]:border-r`,`[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-pinned=right][data-last-col=right]]:border-l`),colSpan:e.colSpan,style:s,children:N(K,{header:e})},e.id)})},e.id))}),N(l,{style:{height:`${_.getTotalSize()}px`},className:T(`relative grid w-full`,t&&`h-36`,g?.length===0&&`h-48`),children:t?N(m,{className:`absolute top-9 flex h-36 w-full items-center justify-center`,children:N(u,{children:`loading...`})}):N(M,{children:_.getVirtualItems().map(e=>{let t=g[e.index],n=t?.id||(t.original&&`id`in t.original?String(t.original.id):null)||(t.original&&`uuid`in t.original?String(t.original.uuid):null);return N(q,{id:n??String(e.index),row:t,measureElement:_.measureElement,virtualRow:e,onClickRow:i},n??e.index)})})}),n&&N(d,{children:N(`div`,{className:`flex w-full justify-center py-2`,children:N(C,{size:16,className:`animate-spin`,"aria-label":`Loading more data`})})})]}),N(s,{orientation:`horizontal`})]})},Y=({onAdd:e,onRefresh:n})=>P(t,{justify:`between`,padding:`none`,width:`full`,className:`flex-0`,children:[N(`div`,{className:`max-sm:flex-1`,children:N(_,{placeholder:`Search...`})}),P(t,{wrap:!1,className:`flex-0 px-0`,children:[!!e&&N(h,{onClick:e}),N(g,{onClick:n})]})]});function X({data:e,totalCount:n,isLoading:r,isFetching:i,columns:a,onAdd:o,onRefresh:s,onClickRow:c,onFetchNextPage:l}){"use no memo";let[u,d]=j({}),[f,p]=j([]),[m,h]=j([]),[g,_]=j({}),v=k(()=>({columnPinning:{right:[`actions`,`update`,`delete`]}}),[]),y=V({initialState:v,data:e,columns:a,rowCount:n,columnResizeMode:`onChange`,enableColumnResizing:!1,enableMultiRowSelection:!1,getCoreRowModel:I(),getSortedRowModel:B(),getFilteredRowModel:z(),getFacetedRowModel:L(),getFacetedUniqueValues:R(),getRowId:e=>e.id||e.uuid,state:{rowSelection:u,sorting:f,columnVisibility:g,columnFilters:m},onRowSelectionChange:d,onSortingChange:p,onColumnVisibilityChange:_,onColumnFiltersChange:h});return P(t,{vertical:!0,wrap:!1,gap:`sm`,align:`start`,className:`size-full overflow-y-auto pt-1`,children:[N(Y,{onAdd:o,onRefresh:s}),N(t,{padding:`none`,vertical:!0,wrap:!1,width:`full`,className:`flex-1 overflow-auto pb-4`,children:N(J,{table:y,isLoading:r,isFetching:i,onClickRow:c,onFetchNextPage:l})})]})}export{X as Table};
1
+ import"../dist-CkzytVha.js";import"../button-variants-Y1GTBayz.js";import{Button as e}from"../button-DhQJ9Ey8.js";import{Flex as t}from"../flex-D6XrXRQW.js";import"../paragraph-B9fp9JaI.js";import"../input-ZyZ1HKHN.js";import{DropdownMenu as n,DropdownMenuContent as r,DropdownMenuItem as i,DropdownMenuTrigger as a}from"../dropdown-menu-DS1A05D0.js";import{ScrollArea as o,ScrollBar as s}from"../scroll-area-BKJYk4zH.js";import{Table as c,TableBody as l,TableCell as u,TableFooter as d,TableHead as f,TableHeader as p,TableRow as m}from"../table-B7a9Rpsg.js";import{AddNewBtn as h}from"../add-new-_5opEbrI.js";import{RefreshBtn as g}from"../refresh-BHjc0ETv.js";import{SearchInput as _}from"../search-input-DM9ePMxA.js";import{ArrowLeftToLineIcon as v,ArrowRightToLineIcon as y,ChevronDown as b,ChevronUp as x,EllipsisIcon as S,LoaderIcon as C,PinOffIcon as w}from"lucide-react";import{cn as T}from"@customafk/react-toolkit/utils";import{memo as E,useCallback as D,useEffect as O,useMemo as k,useRef as A,useState as j}from"react";import{Fragment as M,jsx as N,jsxs as P}from"react/jsx-runtime";import{flexRender as F,getCoreRowModel as I,getFacetedRowModel as L,getFacetedUniqueValues as R,getFilteredRowModel as z,getSortedRowModel as B,useReactTable as V}from"@tanstack/react-table";import{useVirtualizer as H}from"@tanstack/react-virtual";const U=e=>{let t=e.getIsPinned();return{left:t===`left`?`${e.getStart(`left`)}px`:void 0,right:t===`right`?`${e.getAfter(`right`)}px`:void 0,position:t?`sticky`:`relative`,width:e.getSize(),zIndex:t?1:0}},W=E(({column:e})=>{let t=e.getIsSorted(),n=k(()=>({asc:N(x,{className:`shrink-0 opacity-60`,size:16,strokeWidth:2,"aria-hidden":`true`}),desc:N(b,{className:`shrink-0 opacity-60`,size:16,strokeWidth:2,"aria-hidden":`true`})}),[]);return t?n[t]:null});W.displayName=`SortingIndicator`;const G=E(({column:t})=>{let o=typeof t.columnDef.header==`string`?t.columnDef.header:`Column`,s=D(()=>t.pin(!1),[t]),c=D(()=>t.pin(`left`),[t]),l=D(()=>t.pin(`right`),[t]);return t.getCanPin()?t.getIsPinned()?N(e,{size:`icon`,variant:`ghost`,color:`secondary`,className:`hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none`,"aria-label":`Unpin ${o} column`,title:`Unpin ${o} column`,onClick:s,children:N(w,{className:`opacity-60`,size:16,"aria-hidden":`true`})}):P(n,{children:[N(a,{asChild:!0,children:N(e,{size:`icon`,variant:`ghost`,color:`secondary`,className:`size-7 shadow-none`,"aria-label":`Pin options for ${o} column`,title:`Pin options for ${o} column`,children:N(S,{className:`opacity-60`,size:16,"aria-hidden":`true`})})}),P(r,{align:`end`,children:[P(i,{onClick:c,children:[N(v,{size:16,className:`opacity-60`,"aria-hidden":`true`}),`Stick to left`]}),P(i,{onClick:l,children:[N(y,{size:16,className:`opacity-60`,"aria-hidden":`true`}),`Stick to right`]})]})]}):null});G.displayName=`PinControls`;const K=E(({header:e})=>{let{column:t}=e,n=D(e=>{t.getCanSort()&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),t.getToggleSortingHandler()?.(e))},[t]),r=t.getToggleSortingHandler();return e.isPlaceholder?N(`div`,{className:`flex items-center justify-between gap-2 truncate`}):P(`div`,{className:`flex items-center justify-between gap-2 truncate`,children:[P(`div`,{className:T(t.getCanSort()&&`flex h-full cursor-pointer items-center justify-between gap-2 select-none`),onClick:r,onKeyDown:n,tabIndex:t.getCanSort()?0:void 0,role:t.getCanSort()?`button`:void 0,children:[N(`span`,{className:`truncate`,children:F(t.columnDef.header,e.getContext())}),N(W,{column:t})]}),N(G,{column:t})]})});K.displayName=`HeaderContent`;const q=E(({row:e,measureElement:t,virtualRow:n,onClickRow:r})=>{let i=D(()=>{r&&r(e.id)},[e.id,r]);return N(m,{"data-index":n.index,ref:e=>t(e),className:`absolute flex w-full cursor-pointer focus:outline-none`,style:{transform:`translateY(${n.start}px)`},onClick:i,tabIndex:r?0:void 0,role:r?`button`:void 0,children:e.getVisibleCells().map(e=>{let t=e.column.getIsPinned(),n=t===`left`&&e.column.getIsLastColumn(`left`),r=t===`right`&&e.column.getIsFirstColumn(`right`);return N(u,{"data-pinned":t||void 0,"data-last-col":n?`left`:r?`right`:void 0,style:{...U(e.column),width:e.column.getSize()},className:T(`flex overflow-hidden py-2.5`,`data-pinned:bg-background/90`,`[&[data-pinned][data-last-col]]:border-border-weak`,`[&[data-pinned=left][data-last-col=left]]:border-r`,`[&[data-pinned=right][data-last-col=right]]:border-l`),children:F(e.column.columnDef.cell,e.getContext())},e.id)})})});q.displayName=`DataTableRow`;const J=({table:e,isLoading:t,isFetching:n,allowFetchMore:r=!0,onClickRow:i,onFetchNextPage:a})=>{let h=A(null),{rows:g}=e.getRowModel(),_=H({count:g.length,getScrollElement:()=>h.current,estimateSize:()=>37,measureElement:e=>e?.getBoundingClientRect().height??void 0,overscan:5}),v=D(e=>{if(!e)return;let{scrollHeight:t,scrollTop:i,clientHeight:o}=e;t-i-o<500&&!n&&r&&a?.()},[r,n,a]),y=D(e=>{v(e.currentTarget)},[v]);return O(()=>{let e=setTimeout(()=>{v(h.current)},100);return()=>clearTimeout(e)},[v]),P(o,{ref:h,className:`border-border-weak bg-background relative w-full overflow-auto rounded-lg border`,onScroll:y,children:[P(c,{className:T(`!w-full`,`grid`,`border-separate border-spacing-0`,`[&_td]:border-border-weak`,`[&_th]:border-border-weak`,`[&_th]:border-b`,`[&_th]:border-b-border-weak`,`[&_tfoot_td]:border-t`),children:[N(p,{className:`sticky top-0 z-10 backdrop-blur-xs`,children:e.getHeaderGroups().map(e=>N(m,{className:`flex w-full border-none`,children:e.headers.map(e=>{let{column:t}=e,n=t.getIsPinned(),r=n===`left`&&t.getIsLastColumn(`left`),i=n===`right`&&t.getIsFirstColumn(`right`),a=n||void 0,o=r?`left`:i?`right`:void 0,s={width:e.getSize(),...U(e.column)};return N(f,{"data-pinned":a,"data-last-col":o,className:T(`relative flex h-9 font-semibold select-none`,`data-pinned:backdrop-blur-xs`,`data-pinned:bg-muted-weak`,`[&>.cursor-col-resize]:last:opacity-0`,`[&[data-pinned][data-last-col]]:border-border-weak`,`[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-pinned=left][data-last-col=left]]:border-r`,`[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-pinned=right][data-last-col=right]]:border-l`),colSpan:e.colSpan,style:s,children:N(K,{header:e})},e.id)})},e.id))}),N(l,{style:{height:`${_.getTotalSize()}px`},className:T(`relative grid w-full`,t&&`h-36`,g?.length===0&&`h-48`),children:t?N(m,{className:`absolute top-9 flex h-36 w-full items-center justify-center`,children:N(u,{children:`loading...`})}):N(M,{children:_.getVirtualItems().map(e=>{let t=g[e.index],n=t?.id||(t.original&&`id`in t.original?String(t.original.id):null)||(t.original&&`uuid`in t.original?String(t.original.uuid):null);return N(q,{id:n??String(e.index),row:t,measureElement:_.measureElement,virtualRow:e,onClickRow:i},n??e.index)})})}),n&&N(d,{children:N(`div`,{className:`flex w-full justify-center py-2`,children:N(C,{size:16,className:`animate-spin`,"aria-label":`Loading more data`})})})]}),N(s,{orientation:`horizontal`})]})},Y=({onAdd:e,onRefresh:n})=>P(t,{justify:`between`,padding:`none`,width:`full`,className:`flex-0`,children:[N(`div`,{className:`max-sm:flex-1`,children:N(_,{placeholder:`Search...`})}),P(t,{wrap:!1,className:`flex-0 px-0`,children:[!!e&&N(h,{onClick:e}),N(g,{onClick:n})]})]});function X({data:e,totalCount:n,isLoading:r,isFetching:i,allowLoadMore:a,columns:o,onAdd:s,onRefresh:c,onClickRow:l,onFetchNextPage:u}){"use no memo";let[d,f]=j({}),[p,m]=j([]),[h,g]=j([]),[_,v]=j({}),y=k(()=>({columnPinning:{right:[`actions`,`update`,`delete`]}}),[]),b=V({initialState:y,data:e,columns:o,rowCount:n,columnResizeMode:`onChange`,enableColumnResizing:!1,enableMultiRowSelection:!1,getCoreRowModel:I(),getSortedRowModel:B(),getFilteredRowModel:z(),getFacetedRowModel:L(),getFacetedUniqueValues:R(),getRowId:e=>e.id||e.uuid,state:{rowSelection:d,sorting:p,columnVisibility:_,columnFilters:h},onRowSelectionChange:f,onSortingChange:m,onColumnVisibilityChange:v,onColumnFiltersChange:g});return P(t,{vertical:!0,wrap:!1,gap:`sm`,align:`start`,className:`size-full overflow-y-auto pt-1`,children:[N(Y,{onAdd:s,onRefresh:c}),N(t,{padding:`none`,vertical:!0,wrap:!1,width:`full`,className:`flex-1 overflow-auto pb-4`,children:N(J,{table:b,isLoading:r,isFetching:i,allowFetchMore:a,onClickRow:l,onFetchNextPage:u})})]})}export{X as Table};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["Table","DataTableHeader: React.FC<Props>"],"sources":["../../packages/components/table/data-table.tsx","../../packages/components/table/data-table-header.tsx","../../packages/components/table/index.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { type Column, flexRender, type Header, type Row, type Table as ReactTable } from '@tanstack/react-table'\nimport { ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronDown, ChevronUp, EllipsisIcon, LoaderIcon, PinOffIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'\nimport { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { AnyEntity } from '@/types'\nimport { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual'\n\n/**\n * Computes styles for pinned columns\n * @param column Table column\n * @returns CSS styles for pinned columns\n */\nconst getPinningStyles = (column: Column<AnyEntity>): React.CSSProperties => {\n const isPinned = column.getIsPinned()\n return {\n left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n position: isPinned ? 'sticky' : 'relative',\n width: column.getSize(),\n zIndex: isPinned ? 1 : 0,\n }\n}\n\nconst SortingIndicator = memo(({ column }: { column: Column<AnyEntity> }) => {\n const sortDirection = column.getIsSorted()\n\n const icons = useMemo(\n () => ({\n asc: <ChevronUp className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n desc: <ChevronDown className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n }),\n [],\n )\n\n return sortDirection ? icons[sortDirection] : null\n})\n\nSortingIndicator.displayName = 'SortingIndicator'\n\nconst PinControls = memo(({ column }: { column: Column<AnyEntity> }) => {\n const columnHeader = typeof column.columnDef.header === 'string' ? column.columnDef.header : 'Column'\n\n const handleUnpin = useCallback(() => column.pin(false), [column])\n const handlePinLeft = useCallback(() => column.pin('left'), [column])\n const handlePinRight = useCallback(() => column.pin('right'), [column])\n\n if (!column.getCanPin()) return null\n\n if (column.getIsPinned()) {\n return (\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none\"\n aria-label={`Unpin ${columnHeader} column`}\n title={`Unpin ${columnHeader} column`}\n onClick={handleUnpin}\n >\n <PinOffIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n )\n }\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"size-7 shadow-none\"\n aria-label={`Pin options for ${columnHeader} column`}\n title={`Pin options for ${columnHeader} column`}\n >\n <EllipsisIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={handlePinLeft}>\n <ArrowLeftToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to left\n </DropdownMenuItem>\n <DropdownMenuItem onClick={handlePinRight}>\n <ArrowRightToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to right\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n\nPinControls.displayName = 'PinControls'\n\nconst HeaderContent = memo(({ header }: { header: Header<AnyEntity, unknown> }) => {\n const { column } = header\n\n const handleSort = useCallback(\n (e: React.KeyboardEvent) => {\n if (column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault()\n column.getToggleSortingHandler()?.(e)\n }\n },\n [column],\n )\n\n const toggleSortHandler = column.getToggleSortingHandler()\n\n if (header.isPlaceholder) {\n return <div className=\"flex items-center justify-between gap-2 truncate\" />\n }\n\n return (\n <div className=\"flex items-center justify-between gap-2 truncate\">\n <div\n className={cn(column.getCanSort() && 'flex h-full cursor-pointer items-center justify-between gap-2 select-none')}\n onClick={toggleSortHandler}\n onKeyDown={handleSort}\n tabIndex={column.getCanSort() ? 0 : undefined}\n role={column.getCanSort() ? 'button' : undefined}\n >\n <span className=\"truncate\">{flexRender(column.columnDef.header, header.getContext())}</span>\n <SortingIndicator column={column} />\n </div>\n <PinControls column={column} />\n </div>\n )\n})\n\nHeaderContent.displayName = 'HeaderContent'\n\ntype DataTableRowProps = {\n id: string\n row: Row<AnyEntity>\n measureElement: (element?: HTMLTableRowElement | null | undefined) => void\n virtualRow: VirtualItem\n onClickRow?: (id: string) => void\n}\nconst DataTableRow = memo(({ row, measureElement, virtualRow, onClickRow }: DataTableRowProps) => {\n const handleClick = useCallback(() => {\n if (!onClickRow) return\n onClickRow(row.id)\n }, [row.id, onClickRow])\n return (\n <TableRow\n data-index={virtualRow.index}\n ref={(node) => measureElement(node)}\n className=\"absolute flex w-full cursor-pointer focus:outline-none\"\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n onClick={handleClick}\n tabIndex={onClickRow ? 0 : undefined}\n role={onClickRow ? 'button' : undefined}\n >\n {row.getVisibleCells().map((cell) => {\n const isPinned = cell.column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && cell.column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && cell.column.getIsFirstColumn('right')\n\n return (\n <TableCell\n key={cell.id}\n data-pinned={isPinned || undefined}\n data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}\n style={{\n ...getPinningStyles(cell.column),\n width: cell.column.getSize(),\n }}\n className={cn(\n 'flex overflow-hidden py-2.5',\n 'data-pinned:bg-background/90',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n </TableRow>\n )\n})\nDataTableRow.displayName = 'DataTableRow'\n\ninterface DataTableProps {\n table: ReactTable<AnyEntity>\n columnsLength?: number\n isLoading?: boolean\n isFetching?: boolean\n allowFetchMore?: boolean\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\n\nexport const DataTable = ({ table, isLoading, isFetching, allowFetchMore = true, onClickRow, onFetchNextPage }: DataTableProps) => {\n // 'use no memo'\n\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const { rows } = table.getRowModel()\n\n // Configure virtualization for performance with large datasets\n const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n count: rows.length,\n getScrollElement: () => tableContainerRef.current,\n estimateSize: () => 37, // estimated row height\n measureElement: (element) => element?.getBoundingClientRect().height ?? undefined,\n overscan: 5, // Render additional rows beyond viewport for smoother scrolling\n })\n\n // Fetch more data when user approaches bottom of table\n const fetchMoreOnBottomReached = useCallback(\n (refEl: HTMLDivElement | null) => {\n if (!refEl) return\n const { scrollHeight, scrollTop, clientHeight } = refEl\n // Threshold of 120px from bottom to trigger load more\n if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && allowFetchMore && onFetchNextPage) {\n onFetchNextPage()\n }\n },\n [allowFetchMore, isFetching, onFetchNextPage],\n )\n\n // Handle scroll events to check if more data should be loaded\n const handleScroll = useCallback(\n (ev: React.UIEvent<HTMLDivElement>) => {\n fetchMoreOnBottomReached(ev.currentTarget)\n },\n [fetchMoreOnBottomReached],\n )\n\n // Check for more data on mount and when dependencies change\n useEffect(() => {\n const timer = setTimeout(() => {\n fetchMoreOnBottomReached(tableContainerRef.current)\n }, 100)\n return () => clearTimeout(timer)\n }, [fetchMoreOnBottomReached])\n\n return (\n <ScrollArea ref={tableContainerRef} className=\"border-border-weak bg-background relative w-full overflow-auto rounded-lg border\" onScroll={handleScroll}>\n <Table\n className={cn(\n '!w-full',\n 'grid',\n 'border-separate border-spacing-0',\n '[&_td]:border-border-weak',\n '[&_th]:border-border-weak',\n '[&_th]:border-b',\n '[&_th]:border-b-border-weak',\n '[&_tfoot_td]:border-t',\n )}\n >\n <TableHeader className=\"sticky top-0 z-10 backdrop-blur-xs\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id} className=\"flex w-full border-none\">\n {headerGroup.headers.map((header) => {\n const { column } = header\n const isPinned = column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')\n const pinningState = isPinned || undefined\n const lastColState = isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined\n\n const headerStyles = {\n width: header.getSize(),\n ...getPinningStyles(header.column),\n }\n\n return (\n <TableHead\n key={header.id}\n data-pinned={pinningState}\n data-last-col={lastColState}\n className={cn(\n 'relative flex h-9 font-semibold select-none',\n 'data-pinned:backdrop-blur-xs',\n 'data-pinned:bg-muted-weak',\n '[&>.cursor-col-resize]:last:opacity-0',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n colSpan={header.colSpan}\n style={headerStyles}\n >\n <HeaderContent header={header} />\n </TableHead>\n )\n })}\n </TableRow>\n ))}\n </TableHeader>\n\n <TableBody\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n }}\n className={cn('relative grid w-full', isLoading && 'h-36', rows?.length === 0 && 'h-48')}\n >\n {isLoading ? (\n <TableRow className=\"absolute top-9 flex h-36 w-full items-center justify-center\">\n <TableCell>loading...</TableCell>\n </TableRow>\n ) : (\n <>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n const rowId =\n row?.id ||\n (row.original && 'id' in row.original ? String(row.original.id) : null) ||\n (row.original && 'uuid' in row.original ? String(row.original.uuid) : null)\n return (\n <DataTableRow\n key={rowId ?? virtualRow.index}\n id={rowId ?? String(virtualRow.index)}\n row={row}\n measureElement={rowVirtualizer.measureElement}\n virtualRow={virtualRow}\n onClickRow={onClickRow}\n />\n )\n })}\n </>\n )}\n </TableBody>\n {isFetching && (\n <TableFooter>\n <div className=\"flex w-full justify-center py-2\">\n <LoaderIcon size={16} className=\"animate-spin\" aria-label=\"Loading more data\" />\n </div>\n </TableFooter>\n )}\n </Table>\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n )\n}\n","import { Flex } from '@/components/layouts/flex'\nimport { AddNewBtn } from '@/components/ui/buttons/add-new'\nimport { RefreshBtn } from '@/components/ui/buttons/refresh'\nimport { SearchInput } from '@/components/ui/inputs/search-input'\n\ntype Props = {\n onAdd?: () => void\n onRefresh?: () => void\n}\n\nexport const DataTableHeader: React.FC<Props> = ({ onAdd, onRefresh }) => {\n return (\n <Flex justify=\"between\" padding=\"none\" width=\"full\" className=\"flex-0\">\n <div className=\"max-sm:flex-1\">\n <SearchInput placeholder=\"Search...\" />\n </div>\n <Flex wrap={false} className=\"flex-0 px-0\">\n {!!onAdd && <AddNewBtn onClick={onAdd} />}\n <RefreshBtn onClick={onRefresh} />\n </Flex>\n </Flex>\n )\n}\n","import { useMemo, useState } from 'react'\n\nimport type { ColumnDef, ColumnFiltersState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table'\nimport { getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'\n\nimport { DataTable } from './data-table'\nimport { DataTableHeader } from './data-table-header'\nimport { Flex } from '../layouts/flex'\n\ntype Props<T> = {\n data: T[]\n totalCount?: number\n isLoading?: boolean\n isFetching?: boolean\n columns: ColumnDef<T>[]\n onAdd?: () => void\n onRefresh?: () => void\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\nexport function Table<T extends Record<string, unknown>>({\n data,\n totalCount,\n isLoading,\n isFetching,\n columns,\n onAdd,\n onRefresh,\n onClickRow,\n onFetchNextPage,\n}: Props<T>) {\n 'use no memo'\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n const [sorting, setSorting] = useState<SortingState>([])\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n\n const initialState = useMemo(\n () => ({\n columnPinning: { right: ['actions', 'update', 'delete'] },\n }),\n [],\n )\n\n const table = useReactTable<T>({\n initialState,\n data,\n columns,\n rowCount: totalCount,\n columnResizeMode: 'onChange',\n enableColumnResizing: false,\n enableMultiRowSelection: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n getRowId: (row) => (row.id as string) || (row.uuid as string),\n state: {\n rowSelection,\n sorting,\n columnVisibility,\n columnFilters,\n },\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnVisibilityChange: setColumnVisibility,\n onColumnFiltersChange: setColumnFilters,\n })\n\n return (\n <Flex vertical wrap={false} gap=\"sm\" align=\"start\" className=\"size-full overflow-y-auto pt-1\">\n <DataTableHeader onAdd={onAdd} onRefresh={onRefresh} />\n <Flex padding=\"none\" vertical wrap={false} width=\"full\" className=\"flex-1 overflow-auto pb-4\">\n <DataTable table={table} isLoading={isLoading} isFetching={isFetching} onClickRow={onClickRow} onFetchNextPage={onFetchNextPage} />\n </Flex>\n </Flex>\n )\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["Table","DataTableHeader: React.FC<Props>"],"sources":["../../packages/components/table/data-table.tsx","../../packages/components/table/data-table-header.tsx","../../packages/components/table/index.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { type Column, flexRender, type Header, type Row, type Table as ReactTable } from '@tanstack/react-table'\nimport { ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronDown, ChevronUp, EllipsisIcon, LoaderIcon, PinOffIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'\nimport { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { AnyEntity } from '@/types'\nimport { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual'\n\n/**\n * Computes styles for pinned columns\n * @param column Table column\n * @returns CSS styles for pinned columns\n */\nconst getPinningStyles = (column: Column<AnyEntity>): React.CSSProperties => {\n const isPinned = column.getIsPinned()\n return {\n left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n position: isPinned ? 'sticky' : 'relative',\n width: column.getSize(),\n zIndex: isPinned ? 1 : 0,\n }\n}\n\nconst SortingIndicator = memo(({ column }: { column: Column<AnyEntity> }) => {\n const sortDirection = column.getIsSorted()\n\n const icons = useMemo(\n () => ({\n asc: <ChevronUp className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n desc: <ChevronDown className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n }),\n [],\n )\n\n return sortDirection ? icons[sortDirection] : null\n})\n\nSortingIndicator.displayName = 'SortingIndicator'\n\nconst PinControls = memo(({ column }: { column: Column<AnyEntity> }) => {\n const columnHeader = typeof column.columnDef.header === 'string' ? column.columnDef.header : 'Column'\n\n const handleUnpin = useCallback(() => column.pin(false), [column])\n const handlePinLeft = useCallback(() => column.pin('left'), [column])\n const handlePinRight = useCallback(() => column.pin('right'), [column])\n\n if (!column.getCanPin()) return null\n\n if (column.getIsPinned()) {\n return (\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none\"\n aria-label={`Unpin ${columnHeader} column`}\n title={`Unpin ${columnHeader} column`}\n onClick={handleUnpin}\n >\n <PinOffIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n )\n }\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"size-7 shadow-none\"\n aria-label={`Pin options for ${columnHeader} column`}\n title={`Pin options for ${columnHeader} column`}\n >\n <EllipsisIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={handlePinLeft}>\n <ArrowLeftToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to left\n </DropdownMenuItem>\n <DropdownMenuItem onClick={handlePinRight}>\n <ArrowRightToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to right\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n\nPinControls.displayName = 'PinControls'\n\nconst HeaderContent = memo(({ header }: { header: Header<AnyEntity, unknown> }) => {\n const { column } = header\n\n const handleSort = useCallback(\n (e: React.KeyboardEvent) => {\n if (column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault()\n column.getToggleSortingHandler()?.(e)\n }\n },\n [column],\n )\n\n const toggleSortHandler = column.getToggleSortingHandler()\n\n if (header.isPlaceholder) {\n return <div className=\"flex items-center justify-between gap-2 truncate\" />\n }\n\n return (\n <div className=\"flex items-center justify-between gap-2 truncate\">\n <div\n className={cn(column.getCanSort() && 'flex h-full cursor-pointer items-center justify-between gap-2 select-none')}\n onClick={toggleSortHandler}\n onKeyDown={handleSort}\n tabIndex={column.getCanSort() ? 0 : undefined}\n role={column.getCanSort() ? 'button' : undefined}\n >\n <span className=\"truncate\">{flexRender(column.columnDef.header, header.getContext())}</span>\n <SortingIndicator column={column} />\n </div>\n <PinControls column={column} />\n </div>\n )\n})\n\nHeaderContent.displayName = 'HeaderContent'\n\ntype DataTableRowProps = {\n id: string\n row: Row<AnyEntity>\n measureElement: (element?: HTMLTableRowElement | null | undefined) => void\n virtualRow: VirtualItem\n onClickRow?: (id: string) => void\n}\nconst DataTableRow = memo(({ row, measureElement, virtualRow, onClickRow }: DataTableRowProps) => {\n const handleClick = useCallback(() => {\n if (!onClickRow) return\n onClickRow(row.id)\n }, [row.id, onClickRow])\n return (\n <TableRow\n data-index={virtualRow.index}\n ref={(node) => measureElement(node)}\n className=\"absolute flex w-full cursor-pointer focus:outline-none\"\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n onClick={handleClick}\n tabIndex={onClickRow ? 0 : undefined}\n role={onClickRow ? 'button' : undefined}\n >\n {row.getVisibleCells().map((cell) => {\n const isPinned = cell.column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && cell.column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && cell.column.getIsFirstColumn('right')\n\n return (\n <TableCell\n key={cell.id}\n data-pinned={isPinned || undefined}\n data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}\n style={{\n ...getPinningStyles(cell.column),\n width: cell.column.getSize(),\n }}\n className={cn(\n 'flex overflow-hidden py-2.5',\n 'data-pinned:bg-background/90',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n </TableRow>\n )\n})\nDataTableRow.displayName = 'DataTableRow'\n\ninterface DataTableProps {\n table: ReactTable<AnyEntity>\n columnsLength?: number\n isLoading?: boolean\n isFetching?: boolean\n allowFetchMore?: boolean\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\n\nexport const DataTable = ({ table, isLoading, isFetching, allowFetchMore = true, onClickRow, onFetchNextPage }: DataTableProps) => {\n // 'use no memo'\n\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const { rows } = table.getRowModel()\n\n // Configure virtualization for performance with large datasets\n const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n count: rows.length,\n getScrollElement: () => tableContainerRef.current,\n estimateSize: () => 37, // estimated row height\n measureElement: (element) => element?.getBoundingClientRect().height ?? undefined,\n overscan: 5, // Render additional rows beyond viewport for smoother scrolling\n })\n\n // Fetch more data when user approaches bottom of table\n const fetchMoreOnBottomReached = useCallback(\n (refEl: HTMLDivElement | null) => {\n if (!refEl) return\n const { scrollHeight, scrollTop, clientHeight } = refEl\n // Threshold of 120px from bottom to trigger load more\n if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && allowFetchMore) {\n onFetchNextPage?.()\n }\n },\n [allowFetchMore, isFetching, onFetchNextPage],\n )\n\n // Handle scroll events to check if more data should be loaded\n const handleScroll = useCallback(\n (ev: React.UIEvent<HTMLDivElement>) => {\n fetchMoreOnBottomReached(ev.currentTarget)\n },\n [fetchMoreOnBottomReached],\n )\n\n // Check for more data on mount and when dependencies change\n useEffect(() => {\n const timer = setTimeout(() => {\n fetchMoreOnBottomReached(tableContainerRef.current)\n }, 100)\n return () => clearTimeout(timer)\n }, [fetchMoreOnBottomReached])\n\n return (\n <ScrollArea ref={tableContainerRef} className=\"border-border-weak bg-background relative w-full overflow-auto rounded-lg border\" onScroll={handleScroll}>\n <Table\n className={cn(\n '!w-full',\n 'grid',\n 'border-separate border-spacing-0',\n '[&_td]:border-border-weak',\n '[&_th]:border-border-weak',\n '[&_th]:border-b',\n '[&_th]:border-b-border-weak',\n '[&_tfoot_td]:border-t',\n )}\n >\n <TableHeader className=\"sticky top-0 z-10 backdrop-blur-xs\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id} className=\"flex w-full border-none\">\n {headerGroup.headers.map((header) => {\n const { column } = header\n const isPinned = column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')\n const pinningState = isPinned || undefined\n const lastColState = isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined\n\n const headerStyles = {\n width: header.getSize(),\n ...getPinningStyles(header.column),\n }\n\n return (\n <TableHead\n key={header.id}\n data-pinned={pinningState}\n data-last-col={lastColState}\n className={cn(\n 'relative flex h-9 font-semibold select-none',\n 'data-pinned:backdrop-blur-xs',\n 'data-pinned:bg-muted-weak',\n '[&>.cursor-col-resize]:last:opacity-0',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n colSpan={header.colSpan}\n style={headerStyles}\n >\n <HeaderContent header={header} />\n </TableHead>\n )\n })}\n </TableRow>\n ))}\n </TableHeader>\n\n <TableBody\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n }}\n className={cn('relative grid w-full', isLoading && 'h-36', rows?.length === 0 && 'h-48')}\n >\n {isLoading ? (\n <TableRow className=\"absolute top-9 flex h-36 w-full items-center justify-center\">\n <TableCell>loading...</TableCell>\n </TableRow>\n ) : (\n <>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n const rowId =\n row?.id ||\n (row.original && 'id' in row.original ? String(row.original.id) : null) ||\n (row.original && 'uuid' in row.original ? String(row.original.uuid) : null)\n return (\n <DataTableRow\n key={rowId ?? virtualRow.index}\n id={rowId ?? String(virtualRow.index)}\n row={row}\n measureElement={rowVirtualizer.measureElement}\n virtualRow={virtualRow}\n onClickRow={onClickRow}\n />\n )\n })}\n </>\n )}\n </TableBody>\n {isFetching && (\n <TableFooter>\n <div className=\"flex w-full justify-center py-2\">\n <LoaderIcon size={16} className=\"animate-spin\" aria-label=\"Loading more data\" />\n </div>\n </TableFooter>\n )}\n </Table>\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n )\n}\n","import { Flex } from '@/components/layouts/flex'\nimport { AddNewBtn } from '@/components/ui/buttons/add-new'\nimport { RefreshBtn } from '@/components/ui/buttons/refresh'\nimport { SearchInput } from '@/components/ui/inputs/search-input'\n\ntype Props = {\n onAdd?: () => void\n onRefresh?: () => void\n}\n\nexport const DataTableHeader: React.FC<Props> = ({ onAdd, onRefresh }) => {\n return (\n <Flex justify=\"between\" padding=\"none\" width=\"full\" className=\"flex-0\">\n <div className=\"max-sm:flex-1\">\n <SearchInput placeholder=\"Search...\" />\n </div>\n <Flex wrap={false} className=\"flex-0 px-0\">\n {!!onAdd && <AddNewBtn onClick={onAdd} />}\n <RefreshBtn onClick={onRefresh} />\n </Flex>\n </Flex>\n )\n}\n","import { useMemo, useState } from 'react'\n\nimport type { ColumnDef, ColumnFiltersState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table'\nimport { getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'\n\nimport { DataTable } from './data-table'\nimport { DataTableHeader } from './data-table-header'\nimport { Flex } from '../layouts/flex'\n\ntype Props<T> = {\n data: T[]\n totalCount?: number\n isLoading?: boolean\n isFetching?: boolean\n allowLoadMore?: boolean\n columns: ColumnDef<T>[]\n onAdd?: () => void\n onRefresh?: () => void\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\nexport function Table<T extends Record<string, unknown>>({\n data,\n totalCount,\n isLoading,\n isFetching,\n allowLoadMore,\n columns,\n onAdd,\n onRefresh,\n onClickRow,\n onFetchNextPage,\n}: Props<T>) {\n 'use no memo'\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n const [sorting, setSorting] = useState<SortingState>([])\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n\n const initialState = useMemo(\n () => ({\n columnPinning: { right: ['actions', 'update', 'delete'] },\n }),\n [],\n )\n\n const table = useReactTable<T>({\n initialState,\n data,\n columns,\n rowCount: totalCount,\n columnResizeMode: 'onChange',\n enableColumnResizing: false,\n enableMultiRowSelection: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n getRowId: (row) => (row.id as string) || (row.uuid as string),\n state: {\n rowSelection,\n sorting,\n columnVisibility,\n columnFilters,\n },\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnVisibilityChange: setColumnVisibility,\n onColumnFiltersChange: setColumnFilters,\n })\n\n return (\n <Flex vertical wrap={false} gap=\"sm\" align=\"start\" className=\"size-full overflow-y-auto pt-1\">\n <DataTableHeader onAdd={onAdd} onRefresh={onRefresh} />\n <Flex padding=\"none\" vertical wrap={false} width=\"full\" className=\"flex-1 overflow-auto pb-4\">\n <DataTable\n table={table}\n isLoading={isLoading}\n isFetching={isFetching}\n allowFetchMore={allowLoadMore}\n onClickRow={onClickRow}\n onFetchNextPage={onFetchNextPage}\n />\n </Flex>\n </Flex>\n )\n}\n"],"mappings":"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"}
@@ -1,19 +1,19 @@
1
- import * as react_jsx_runtime234 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime190 from "react/jsx-runtime";
2
2
  import { VariantProps } from "class-variance-authority";
3
3
  import { Toggle } from "radix-ui";
4
- import * as class_variance_authority_types3 from "class-variance-authority/types";
4
+ import * as class_variance_authority_types2 from "class-variance-authority/types";
5
5
 
6
6
  //#region packages/components/ui/toggle.d.ts
7
7
  declare const toggleVariants: (props?: ({
8
8
  variant?: "default" | "outline" | null | undefined;
9
9
  size?: "sm" | "lg" | "default" | null | undefined;
10
- } & class_variance_authority_types3.ClassProp) | undefined) => string;
10
+ } & class_variance_authority_types2.ClassProp) | undefined) => string;
11
11
  declare function Toggle$1({
12
12
  className,
13
13
  variant,
14
14
  size,
15
15
  ...props
16
- }: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime234.JSX.Element;
16
+ }: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime190.JSX.Element;
17
17
  //#endregion
18
18
  export { Toggle$1 as Toggle, toggleVariants };
19
- //# sourceMappingURL=toggle-vH-BH18X.d.ts.map
19
+ //# sourceMappingURL=toggle-CpmkuACW.d.ts.map
@@ -1,5 +1,5 @@
1
- import * as react_jsx_runtime217 from "react/jsx-runtime";
2
- import * as class_variance_authority_types3 from "class-variance-authority/types";
1
+ import * as react_jsx_runtime192 from "react/jsx-runtime";
2
+ import * as class_variance_authority_types2 from "class-variance-authority/types";
3
3
  import { VariantProps } from "class-variance-authority";
4
4
  import { Toggle } from "radix-ui";
5
5
 
@@ -7,13 +7,13 @@ import { Toggle } from "radix-ui";
7
7
  declare const toggleVariants: (props?: ({
8
8
  variant?: "default" | "outline" | null | undefined;
9
9
  size?: "sm" | "lg" | "default" | null | undefined;
10
- } & class_variance_authority_types3.ClassProp) | undefined) => string;
10
+ } & class_variance_authority_types2.ClassProp) | undefined) => string;
11
11
  declare function Toggle$1({
12
12
  className,
13
13
  variant,
14
14
  size,
15
15
  ...props
16
- }: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime217.JSX.Element;
16
+ }: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime192.JSX.Element;
17
17
  //#endregion
18
18
  export { Toggle$1 as Toggle, toggleVariants };
19
- //# sourceMappingURL=toggle-C2H0HKpd.d.cts.map
19
+ //# sourceMappingURL=toggle-DK6k1TbN.d.cts.map
@@ -1,23 +1,23 @@
1
- import * as react_jsx_runtime204 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime232 from "react/jsx-runtime";
2
2
  import { Tooltip } from "radix-ui";
3
3
 
4
4
  //#region packages/components/ui/tooltip.d.ts
5
5
  declare function TooltipProvider({
6
6
  delayDuration,
7
7
  ...props
8
- }: React.ComponentProps<typeof Tooltip.Provider>): react_jsx_runtime204.JSX.Element;
8
+ }: React.ComponentProps<typeof Tooltip.Provider>): react_jsx_runtime232.JSX.Element;
9
9
  declare function Tooltip$1({
10
10
  ...props
11
- }: React.ComponentProps<typeof Tooltip.Root>): react_jsx_runtime204.JSX.Element;
11
+ }: React.ComponentProps<typeof Tooltip.Root>): react_jsx_runtime232.JSX.Element;
12
12
  declare function TooltipTrigger({
13
13
  ...props
14
- }: React.ComponentProps<typeof Tooltip.Trigger>): react_jsx_runtime204.JSX.Element;
14
+ }: React.ComponentProps<typeof Tooltip.Trigger>): react_jsx_runtime232.JSX.Element;
15
15
  declare function TooltipContent({
16
16
  className,
17
17
  sideOffset,
18
18
  children,
19
19
  ...props
20
- }: React.ComponentProps<typeof Tooltip.Content>): react_jsx_runtime204.JSX.Element;
20
+ }: React.ComponentProps<typeof Tooltip.Content>): react_jsx_runtime232.JSX.Element;
21
21
  //#endregion
22
22
  export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
23
- //# sourceMappingURL=tooltip-BhypOt39.d.cts.map
23
+ //# sourceMappingURL=tooltip-2nMDXmIC.d.cts.map
@@ -1,23 +1,23 @@
1
- import * as react_jsx_runtime230 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime223 from "react/jsx-runtime";
2
2
  import { Tooltip } from "radix-ui";
3
3
 
4
4
  //#region packages/components/ui/tooltip.d.ts
5
5
  declare function TooltipProvider({
6
6
  delayDuration,
7
7
  ...props
8
- }: React.ComponentProps<typeof Tooltip.Provider>): react_jsx_runtime230.JSX.Element;
8
+ }: React.ComponentProps<typeof Tooltip.Provider>): react_jsx_runtime223.JSX.Element;
9
9
  declare function Tooltip$1({
10
10
  ...props
11
- }: React.ComponentProps<typeof Tooltip.Root>): react_jsx_runtime230.JSX.Element;
11
+ }: React.ComponentProps<typeof Tooltip.Root>): react_jsx_runtime223.JSX.Element;
12
12
  declare function TooltipTrigger({
13
13
  ...props
14
- }: React.ComponentProps<typeof Tooltip.Trigger>): react_jsx_runtime230.JSX.Element;
14
+ }: React.ComponentProps<typeof Tooltip.Trigger>): react_jsx_runtime223.JSX.Element;
15
15
  declare function TooltipContent({
16
16
  className,
17
17
  sideOffset,
18
18
  children,
19
19
  ...props
20
- }: React.ComponentProps<typeof Tooltip.Content>): react_jsx_runtime230.JSX.Element;
20
+ }: React.ComponentProps<typeof Tooltip.Content>): react_jsx_runtime223.JSX.Element;
21
21
  //#endregion
22
22
  export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
23
- //# sourceMappingURL=tooltip-Dibm3gcf.d.ts.map
23
+ //# sourceMappingURL=tooltip-D3LmNLDU.d.ts.map
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime16 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime28 from "react/jsx-runtime";
2
2
 
3
3
  //#region packages/components/typography/paragraph.d.ts
4
4
  type Props = {
@@ -10,7 +10,7 @@ declare const Paragraph: ({
10
10
  variant,
11
11
  className,
12
12
  children
13
- }: Props) => react_jsx_runtime16.JSX.Element;
13
+ }: Props) => react_jsx_runtime28.JSX.Element;
14
14
  //#endregion
15
15
  export { Paragraph };
16
16
  //# sourceMappingURL=paragraph.d.cts.map
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime12 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime10 from "react/jsx-runtime";
2
2
 
3
3
  //#region packages/components/typography/paragraph.d.ts
4
4
  type Props = {
@@ -10,7 +10,7 @@ declare const Paragraph: ({
10
10
  variant,
11
11
  className,
12
12
  children
13
- }: Props) => react_jsx_runtime12.JSX.Element;
13
+ }: Props) => react_jsx_runtime10.JSX.Element;
14
14
  //#endregion
15
15
  export { Paragraph };
16
16
  //# sourceMappingURL=paragraph.d.ts.map
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime18 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime133 from "react/jsx-runtime";
2
2
 
3
3
  //#region packages/components/typography/title.d.ts
4
4
  type Props = {
@@ -10,7 +10,7 @@ declare const Title: ({
10
10
  level,
11
11
  className,
12
12
  children
13
- }: Props) => react_jsx_runtime18.JSX.Element;
13
+ }: Props) => react_jsx_runtime133.JSX.Element;
14
14
  //#endregion
15
15
  export { Title };
16
16
  //# sourceMappingURL=title.d.cts.map
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime15 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime63 from "react/jsx-runtime";
2
2
 
3
3
  //#region packages/components/typography/title.d.ts
4
4
  type Props = {
@@ -10,7 +10,7 @@ declare const Title: ({
10
10
  level,
11
11
  className,
12
12
  children
13
- }: Props) => react_jsx_runtime15.JSX.Element;
13
+ }: Props) => react_jsx_runtime63.JSX.Element;
14
14
  //#endregion
15
15
  export { Title };
16
16
  //# sourceMappingURL=title.d.ts.map
@@ -1,48 +1,48 @@
1
- import * as react_jsx_runtime3 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime121 from "react/jsx-runtime";
2
2
  import { AlertDialog as AlertDialog$1 } from "radix-ui";
3
3
 
4
4
  //#region packages/components/ui/alert-dialog.d.ts
5
5
  declare function AlertDialog({
6
6
  ...props
7
- }: React.ComponentProps<typeof AlertDialog$1.Root>): react_jsx_runtime3.JSX.Element;
7
+ }: React.ComponentProps<typeof AlertDialog$1.Root>): react_jsx_runtime121.JSX.Element;
8
8
  declare function AlertDialogTrigger({
9
9
  ...props
10
- }: React.ComponentProps<typeof AlertDialog$1.Trigger>): react_jsx_runtime3.JSX.Element;
10
+ }: React.ComponentProps<typeof AlertDialog$1.Trigger>): react_jsx_runtime121.JSX.Element;
11
11
  declare function AlertDialogPortal({
12
12
  ...props
13
- }: React.ComponentProps<typeof AlertDialog$1.Portal>): react_jsx_runtime3.JSX.Element;
13
+ }: React.ComponentProps<typeof AlertDialog$1.Portal>): react_jsx_runtime121.JSX.Element;
14
14
  declare function AlertDialogOverlay({
15
15
  className,
16
16
  ...props
17
- }: React.ComponentProps<typeof AlertDialog$1.Overlay>): react_jsx_runtime3.JSX.Element;
17
+ }: React.ComponentProps<typeof AlertDialog$1.Overlay>): react_jsx_runtime121.JSX.Element;
18
18
  declare function AlertDialogContent({
19
19
  className,
20
20
  ...props
21
- }: React.ComponentProps<typeof AlertDialog$1.Content>): react_jsx_runtime3.JSX.Element;
21
+ }: React.ComponentProps<typeof AlertDialog$1.Content>): react_jsx_runtime121.JSX.Element;
22
22
  declare function AlertDialogHeader({
23
23
  className,
24
24
  ...props
25
- }: React.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
25
+ }: React.ComponentProps<'div'>): react_jsx_runtime121.JSX.Element;
26
26
  declare function AlertDialogFooter({
27
27
  className,
28
28
  ...props
29
- }: React.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
29
+ }: React.ComponentProps<'div'>): react_jsx_runtime121.JSX.Element;
30
30
  declare function AlertDialogTitle({
31
31
  className,
32
32
  ...props
33
- }: React.ComponentProps<typeof AlertDialog$1.Title>): react_jsx_runtime3.JSX.Element;
33
+ }: React.ComponentProps<typeof AlertDialog$1.Title>): react_jsx_runtime121.JSX.Element;
34
34
  declare function AlertDialogDescription({
35
35
  className,
36
36
  ...props
37
- }: React.ComponentProps<typeof AlertDialog$1.Description>): react_jsx_runtime3.JSX.Element;
37
+ }: React.ComponentProps<typeof AlertDialog$1.Description>): react_jsx_runtime121.JSX.Element;
38
38
  declare function AlertDialogAction({
39
39
  className,
40
40
  ...props
41
- }: React.ComponentProps<typeof AlertDialog$1.Action>): react_jsx_runtime3.JSX.Element;
41
+ }: React.ComponentProps<typeof AlertDialog$1.Action>): react_jsx_runtime121.JSX.Element;
42
42
  declare function AlertDialogCancel({
43
43
  className,
44
44
  ...props
45
- }: React.ComponentProps<typeof AlertDialog$1.Cancel>): react_jsx_runtime3.JSX.Element;
45
+ }: React.ComponentProps<typeof AlertDialog$1.Cancel>): react_jsx_runtime121.JSX.Element;
46
46
  //#endregion
47
47
  export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
48
48
  //# sourceMappingURL=alert-dialog.d.cts.map
@@ -1,48 +1,48 @@
1
- import * as react_jsx_runtime16 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime19 from "react/jsx-runtime";
2
2
  import { AlertDialog as AlertDialog$1 } from "radix-ui";
3
3
 
4
4
  //#region packages/components/ui/alert-dialog.d.ts
5
5
  declare function AlertDialog({
6
6
  ...props
7
- }: React.ComponentProps<typeof AlertDialog$1.Root>): react_jsx_runtime16.JSX.Element;
7
+ }: React.ComponentProps<typeof AlertDialog$1.Root>): react_jsx_runtime19.JSX.Element;
8
8
  declare function AlertDialogTrigger({
9
9
  ...props
10
- }: React.ComponentProps<typeof AlertDialog$1.Trigger>): react_jsx_runtime16.JSX.Element;
10
+ }: React.ComponentProps<typeof AlertDialog$1.Trigger>): react_jsx_runtime19.JSX.Element;
11
11
  declare function AlertDialogPortal({
12
12
  ...props
13
- }: React.ComponentProps<typeof AlertDialog$1.Portal>): react_jsx_runtime16.JSX.Element;
13
+ }: React.ComponentProps<typeof AlertDialog$1.Portal>): react_jsx_runtime19.JSX.Element;
14
14
  declare function AlertDialogOverlay({
15
15
  className,
16
16
  ...props
17
- }: React.ComponentProps<typeof AlertDialog$1.Overlay>): react_jsx_runtime16.JSX.Element;
17
+ }: React.ComponentProps<typeof AlertDialog$1.Overlay>): react_jsx_runtime19.JSX.Element;
18
18
  declare function AlertDialogContent({
19
19
  className,
20
20
  ...props
21
- }: React.ComponentProps<typeof AlertDialog$1.Content>): react_jsx_runtime16.JSX.Element;
21
+ }: React.ComponentProps<typeof AlertDialog$1.Content>): react_jsx_runtime19.JSX.Element;
22
22
  declare function AlertDialogHeader({
23
23
  className,
24
24
  ...props
25
- }: React.ComponentProps<'div'>): react_jsx_runtime16.JSX.Element;
25
+ }: React.ComponentProps<'div'>): react_jsx_runtime19.JSX.Element;
26
26
  declare function AlertDialogFooter({
27
27
  className,
28
28
  ...props
29
- }: React.ComponentProps<'div'>): react_jsx_runtime16.JSX.Element;
29
+ }: React.ComponentProps<'div'>): react_jsx_runtime19.JSX.Element;
30
30
  declare function AlertDialogTitle({
31
31
  className,
32
32
  ...props
33
- }: React.ComponentProps<typeof AlertDialog$1.Title>): react_jsx_runtime16.JSX.Element;
33
+ }: React.ComponentProps<typeof AlertDialog$1.Title>): react_jsx_runtime19.JSX.Element;
34
34
  declare function AlertDialogDescription({
35
35
  className,
36
36
  ...props
37
- }: React.ComponentProps<typeof AlertDialog$1.Description>): react_jsx_runtime16.JSX.Element;
37
+ }: React.ComponentProps<typeof AlertDialog$1.Description>): react_jsx_runtime19.JSX.Element;
38
38
  declare function AlertDialogAction({
39
39
  className,
40
40
  ...props
41
- }: React.ComponentProps<typeof AlertDialog$1.Action>): react_jsx_runtime16.JSX.Element;
41
+ }: React.ComponentProps<typeof AlertDialog$1.Action>): react_jsx_runtime19.JSX.Element;
42
42
  declare function AlertDialogCancel({
43
43
  className,
44
44
  ...props
45
- }: React.ComponentProps<typeof AlertDialog$1.Cancel>): react_jsx_runtime16.JSX.Element;
45
+ }: React.ComponentProps<typeof AlertDialog$1.Cancel>): react_jsx_runtime19.JSX.Element;
46
46
  //#endregion
47
47
  export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
48
48
  //# sourceMappingURL=alert-dialog.d.ts.map
@@ -1,5 +1,5 @@
1
- import * as react_jsx_runtime25 from "react/jsx-runtime";
2
- import * as class_variance_authority_types6 from "class-variance-authority/types";
1
+ import * as react_jsx_runtime31 from "react/jsx-runtime";
2
+ import * as class_variance_authority_types5 from "class-variance-authority/types";
3
3
  import { VariantProps } from "class-variance-authority";
4
4
 
5
5
  //#region packages/components/ui/alert-variants.d.ts
@@ -7,8 +7,8 @@ import { VariantProps } from "class-variance-authority";
7
7
  * Alert component variants for styling using class-variance-authority
8
8
  */
9
9
  declare const alertVariants: (props?: ({
10
- variant?: "default" | "success" | "info" | "warning" | "destructive" | null | undefined;
11
- } & class_variance_authority_types6.ClassProp) | undefined) => string;
10
+ variant?: "default" | "destructive" | "warning" | "success" | "info" | null | undefined;
11
+ } & class_variance_authority_types5.ClassProp) | undefined) => string;
12
12
  type AlertVariantProps = VariantProps<typeof alertVariants>;
13
13
  //#endregion
14
14
  //#region packages/components/ui/alert.d.ts
@@ -37,7 +37,7 @@ declare function Alert({
37
37
  dismissible,
38
38
  onDismiss,
39
39
  ...props
40
- }: AlertProps): react_jsx_runtime25.JSX.Element;
40
+ }: AlertProps): react_jsx_runtime31.JSX.Element;
41
41
  interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
42
42
  /**
43
43
  * Title text or elements
@@ -50,7 +50,7 @@ interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
50
50
  declare function AlertTitle({
51
51
  className,
52
52
  ...props
53
- }: AlertTitleProps): react_jsx_runtime25.JSX.Element;
53
+ }: AlertTitleProps): react_jsx_runtime31.JSX.Element;
54
54
  interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
55
55
  /**
56
56
  * Description text or elements
@@ -63,7 +63,7 @@ interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
63
63
  declare function AlertDescription({
64
64
  className,
65
65
  ...props
66
- }: AlertDescriptionProps): react_jsx_runtime25.JSX.Element;
66
+ }: AlertDescriptionProps): react_jsx_runtime31.JSX.Element;
67
67
  //#endregion
68
68
  export { Alert, AlertDescription, AlertDescriptionProps, AlertProps, AlertTitle, AlertTitleProps };
69
69
  //# sourceMappingURL=alert.d.cts.map
@@ -1,4 +1,4 @@
1
- import * as react_jsx_runtime39 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime15 from "react/jsx-runtime";
2
2
  import { VariantProps } from "class-variance-authority";
3
3
  import * as class_variance_authority_types6 from "class-variance-authority/types";
4
4
 
@@ -7,7 +7,7 @@ import * as class_variance_authority_types6 from "class-variance-authority/types
7
7
  * Alert component variants for styling using class-variance-authority
8
8
  */
9
9
  declare const alertVariants: (props?: ({
10
- variant?: "default" | "success" | "info" | "warning" | "destructive" | null | undefined;
10
+ variant?: "default" | "destructive" | "warning" | "success" | "info" | null | undefined;
11
11
  } & class_variance_authority_types6.ClassProp) | undefined) => string;
12
12
  type AlertVariantProps = VariantProps<typeof alertVariants>;
13
13
  //#endregion
@@ -37,7 +37,7 @@ declare function Alert({
37
37
  dismissible,
38
38
  onDismiss,
39
39
  ...props
40
- }: AlertProps): react_jsx_runtime39.JSX.Element;
40
+ }: AlertProps): react_jsx_runtime15.JSX.Element;
41
41
  interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
42
42
  /**
43
43
  * Title text or elements
@@ -50,7 +50,7 @@ interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
50
50
  declare function AlertTitle({
51
51
  className,
52
52
  ...props
53
- }: AlertTitleProps): react_jsx_runtime39.JSX.Element;
53
+ }: AlertTitleProps): react_jsx_runtime15.JSX.Element;
54
54
  interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
55
55
  /**
56
56
  * Description text or elements
@@ -63,7 +63,7 @@ interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
63
63
  declare function AlertDescription({
64
64
  className,
65
65
  ...props
66
- }: AlertDescriptionProps): react_jsx_runtime39.JSX.Element;
66
+ }: AlertDescriptionProps): react_jsx_runtime15.JSX.Element;
67
67
  //#endregion
68
68
  export { Alert, AlertDescription, AlertDescriptionProps, AlertProps, AlertTitle, AlertTitleProps };
69
69
  //# sourceMappingURL=alert.d.ts.map
@@ -1,11 +1,11 @@
1
- import * as react_jsx_runtime33 from "react/jsx-runtime";
1
+ import * as react_jsx_runtime9 from "react/jsx-runtime";
2
2
  import { AspectRatio as AspectRatio$1 } from "radix-ui";
3
3
 
4
4
  //#region packages/components/ui/aspect-ratio.d.ts
5
5
  declare function AspectRatio({
6
6
  className,
7
7
  ...props
8
- }: React.ComponentProps<typeof AspectRatio$1.Root>): react_jsx_runtime33.JSX.Element;
8
+ }: React.ComponentProps<typeof AspectRatio$1.Root>): react_jsx_runtime9.JSX.Element;
9
9
  //#endregion
10
10
  export { AspectRatio };
11
11
  //# sourceMappingURL=aspect-ratio.d.cts.map