@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.
- package/dist/{button-DikL7zwS.d.ts → button-BSbpgPcU.d.ts} +6 -6
- package/dist/{button-DoAx4aaD.d.cts → button-CP7eGMBD.d.cts} +6 -6
- package/dist/cards/simple-card.d.cts +2 -2
- package/dist/{command-BUBPlGK4.d.ts → command-B573Pd57.d.ts} +12 -12
- package/dist/{command-rxs0v832.d.cts → command-Be5dDVBo.d.cts} +12 -12
- package/dist/data-display/empty.d.ts +2 -2
- package/dist/data-display/statistic.d.cts +2 -2
- package/dist/{dialog-BBDmpwtY.d.cts → dialog-CDS4oetv.d.cts} +12 -12
- package/dist/{dialog-DUEQa9I5.d.ts → dialog-CbwE12Bt.d.ts} +12 -12
- package/dist/dialogs/detail-dialog/component/sidebar.d.cts +4 -4
- package/dist/dialogs/detail-dialog/component/sidebar.d.ts +4 -4
- package/dist/dialogs/form-dialog.d.cts +2 -2
- package/dist/dialogs/form-dialog.d.ts +2 -2
- package/dist/forms/combobox-field.d.cts +2 -2
- package/dist/forms/combobox-field.d.ts +2 -2
- package/dist/forms/date-field.d.cts +2 -2
- package/dist/forms/date-field.d.ts +2 -2
- package/dist/forms/form-wrapper.d.cts +2 -2
- package/dist/forms/form-wrapper.d.ts +2 -2
- package/dist/forms/multi-select-field.d.cts +2 -2
- package/dist/forms/multi-select-field.d.ts +2 -2
- package/dist/forms/number-field.d.cts +2 -2
- package/dist/forms/number-field.d.ts +2 -2
- package/dist/forms/password-field.d.cts +2 -2
- package/dist/forms/password-field.d.ts +2 -2
- package/dist/forms/select-field.d.cts +2 -2
- package/dist/forms/select-field.d.ts +2 -2
- package/dist/forms/switch-field.d.cts +2 -2
- package/dist/forms/switch-field.d.ts +2 -2
- package/dist/forms/text-field.d.cts +2 -2
- package/dist/forms/text-field.d.ts +2 -2
- package/dist/forms/textarea-field.d.cts +2 -2
- package/dist/forms/textarea-field.d.ts +2 -2
- package/dist/{input-DvX75CSu.d.cts → input-B29k_HFS.d.cts} +3 -3
- package/dist/{input-DomGaN2h.d.ts → input-DNUBzDBp.d.ts} +3 -3
- package/dist/layouts/app-layout/index.d.cts +5 -5
- package/dist/layouts/app-layout/index.d.ts +28 -28
- package/dist/layouts/flex.d.cts +2 -2
- package/dist/layouts/flex.d.ts +2 -2
- package/dist/layouts/service-layout/index.d.cts +3 -3
- package/dist/layouts/service-layout/index.d.ts +15 -15
- package/dist/{separator-CkPhyUEI.d.ts → separator-9Tfop9BA.d.ts} +3 -3
- package/dist/{separator-B0ekl2cm.d.cts → separator-CM1kQQxq.d.cts} +3 -3
- package/dist/table/index.cjs +1 -1
- package/dist/table/index.cjs.map +1 -1
- package/dist/table/index.d.cts +4 -2
- package/dist/table/index.d.ts +4 -2
- package/dist/table/index.js +1 -1
- package/dist/table/index.js.map +1 -1
- package/dist/{toggle-vH-BH18X.d.ts → toggle-CpmkuACW.d.ts} +5 -5
- package/dist/{toggle-C2H0HKpd.d.cts → toggle-DK6k1TbN.d.cts} +5 -5
- package/dist/{tooltip-BhypOt39.d.cts → tooltip-2nMDXmIC.d.cts} +6 -6
- package/dist/{tooltip-Dibm3gcf.d.ts → tooltip-D3LmNLDU.d.ts} +6 -6
- package/dist/typography/paragraph.d.cts +2 -2
- package/dist/typography/paragraph.d.ts +2 -2
- package/dist/typography/title.d.cts +2 -2
- package/dist/typography/title.d.ts +2 -2
- package/dist/ui/alert-dialog.d.cts +12 -12
- package/dist/ui/alert-dialog.d.ts +12 -12
- package/dist/ui/alert.d.cts +7 -7
- package/dist/ui/alert.d.ts +5 -5
- package/dist/ui/aspect-ratio.d.cts +2 -2
- package/dist/ui/aspect-ratio.d.ts +2 -2
- package/dist/ui/avatar.d.cts +4 -4
- package/dist/ui/avatar.d.ts +4 -4
- package/dist/ui/badge.d.cts +2 -2
- package/dist/ui/badge.d.ts +2 -2
- package/dist/ui/breadcrumb.d.cts +8 -8
- package/dist/ui/breadcrumb.d.ts +8 -8
- package/dist/ui/button.d.cts +1 -1
- package/dist/ui/button.d.ts +1 -1
- package/dist/ui/calendar.d.cts +4 -4
- package/dist/ui/calendar.d.ts +4 -4
- package/dist/ui/card.d.cts +8 -8
- package/dist/ui/card.d.ts +8 -8
- package/dist/ui/carousel.d.cts +7 -7
- package/dist/ui/carousel.d.ts +7 -7
- package/dist/ui/collapsible.d.cts +4 -4
- package/dist/ui/collapsible.d.ts +4 -4
- package/dist/ui/command.d.cts +2 -2
- package/dist/ui/command.d.ts +2 -2
- package/dist/ui/context-menu.d.cts +16 -16
- package/dist/ui/context-menu.d.ts +16 -16
- package/dist/ui/dialog.d.cts +1 -1
- package/dist/ui/dialog.d.ts +1 -1
- package/dist/ui/dropdown-menu.d.cts +16 -16
- package/dist/ui/dropdown-menu.d.ts +16 -16
- package/dist/ui/file-uploader.d.cts +2 -2
- package/dist/ui/file-uploader.d.ts +2 -2
- package/dist/ui/form.d.cts +7 -7
- package/dist/ui/form.d.ts +7 -7
- package/dist/ui/hover-card.d.cts +4 -4
- package/dist/ui/hover-card.d.ts +4 -4
- package/dist/ui/input-otp.d.cts +5 -5
- package/dist/ui/input-otp.d.ts +5 -5
- package/dist/ui/input.d.cts +1 -1
- package/dist/ui/input.d.ts +1 -1
- package/dist/ui/inputs/search-input.d.cts +3 -3
- package/dist/ui/inputs/search-input.d.ts +3 -3
- package/dist/ui/label.d.cts +2 -2
- package/dist/ui/label.d.ts +2 -2
- package/dist/ui/menubar.d.cts +17 -17
- package/dist/ui/menubar.d.ts +17 -17
- package/dist/ui/multi-select.d.cts +2 -2
- package/dist/ui/multi-select.d.ts +2 -2
- package/dist/ui/navigation-menu.d.cts +9 -9
- package/dist/ui/navigation-menu.d.ts +9 -9
- package/dist/ui/pagination.d.cts +9 -9
- package/dist/ui/pagination.d.ts +9 -9
- package/dist/ui/popover.d.cts +5 -5
- package/dist/ui/popover.d.ts +5 -5
- package/dist/ui/progress.d.cts +2 -2
- package/dist/ui/progress.d.ts +2 -2
- package/dist/ui/radio-group.d.cts +3 -3
- package/dist/ui/radio-group.d.ts +3 -3
- package/dist/ui/resizable.d.cts +4 -4
- package/dist/ui/resizable.d.ts +4 -4
- package/dist/ui/scroll-area.d.cts +3 -3
- package/dist/ui/scroll-area.d.ts +3 -3
- package/dist/ui/select.d.cts +11 -11
- package/dist/ui/select.d.ts +11 -11
- package/dist/ui/separator.d.cts +1 -1
- package/dist/ui/separator.d.ts +1 -1
- package/dist/ui/sheet.d.cts +9 -9
- package/dist/ui/sheet.d.ts +9 -9
- package/dist/ui/sidebar.d.cts +30 -30
- package/dist/ui/sidebar.d.ts +30 -30
- package/dist/ui/skeleton.d.cts +2 -2
- package/dist/ui/skeleton.d.ts +2 -2
- package/dist/ui/slider.d.cts +2 -2
- package/dist/ui/slider.d.ts +2 -2
- package/dist/ui/sonner.d.cts +2 -2
- package/dist/ui/sonner.d.ts +2 -2
- package/dist/ui/switch.d.cts +2 -2
- package/dist/ui/switch.d.ts +2 -2
- package/dist/ui/table.d.cts +9 -9
- package/dist/ui/table.d.ts +9 -9
- package/dist/ui/tabs.d.cts +5 -5
- package/dist/ui/tabs.d.ts +5 -5
- package/dist/ui/textarea.d.cts +2 -2
- package/dist/ui/textarea.d.ts +2 -2
- package/dist/ui/toggle-group.d.cts +4 -4
- package/dist/ui/toggle-group.d.ts +4 -4
- package/dist/ui/toggle.d.cts +1 -1
- package/dist/ui/toggle.d.ts +1 -1
- package/dist/ui/tooltip.d.cts +1 -1
- package/dist/ui/tooltip.d.ts +1 -1
- package/package.json +1 -1
package/dist/table/index.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
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>):
|
|
28
|
+
}: Props<T>): react_jsx_runtime18.JSX.Element;
|
|
27
29
|
//#endregion
|
|
28
30
|
export { Table };
|
|
29
31
|
//# sourceMappingURL=index.d.cts.map
|
package/dist/table/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
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>):
|
|
28
|
+
}: Props<T>): react_jsx_runtime189.JSX.Element;
|
|
27
29
|
//#endregion
|
|
28
30
|
export { Table };
|
|
29
31
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/table/index.js
CHANGED
|
@@ -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
|
|
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
|
package/dist/table/index.js.map
CHANGED
|
@@ -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
|
|
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
|
|
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
|
-
} &
|
|
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>):
|
|
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-
|
|
19
|
+
//# sourceMappingURL=toggle-CpmkuACW.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
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
|
-
} &
|
|
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>):
|
|
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-
|
|
19
|
+
//# sourceMappingURL=toggle-DK6k1TbN.d.cts.map
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import * as
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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-
|
|
23
|
+
//# sourceMappingURL=tooltip-2nMDXmIC.d.cts.map
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import * as
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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-
|
|
23
|
+
//# sourceMappingURL=tooltip-D3LmNLDU.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
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) =>
|
|
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
|
|
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) =>
|
|
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
|
|
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) =>
|
|
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
|
|
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) =>
|
|
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
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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'>):
|
|
25
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime121.JSX.Element;
|
|
26
26
|
declare function AlertDialogFooter({
|
|
27
27
|
className,
|
|
28
28
|
...props
|
|
29
|
-
}: React.ComponentProps<'div'>):
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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'>):
|
|
25
|
+
}: React.ComponentProps<'div'>): react_jsx_runtime19.JSX.Element;
|
|
26
26
|
declare function AlertDialogFooter({
|
|
27
27
|
className,
|
|
28
28
|
...props
|
|
29
|
-
}: React.ComponentProps<'div'>):
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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>):
|
|
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
|
package/dist/ui/alert.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
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" | "
|
|
11
|
-
} &
|
|
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):
|
|
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):
|
|
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):
|
|
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
|
package/dist/ui/alert.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
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" | "
|
|
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):
|
|
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):
|
|
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):
|
|
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
|
|
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>):
|
|
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
|