@cryptlex/web-components 6.4.5 → 6.5.0-alpha01

package/dist/components/data-table.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,Fragment as C,jsxs as c}from"react/jsx-runtime";import{Button as y}from"./button.js";import{useQuery as te,keepPreviousData as ne}from"@tanstack/react-query";import{createColumnHelper as re,useReactTable as ae,getCoreRowModel as ie,flexRender as M}from"@tanstack/react-table";import{Info as oe,RotateCw as le,Columns3 as se,GripVertical as ce,ChevronFirst as de,ChevronLeft as ue,ChevronRight as me,ChevronLast as pe,ArrowDownNarrowWide as ge,ArrowDownWideNarrow as fe,ArrowUpDown as he,Filter as be,Trash as Se}from"lucide-react";import{createContext as ye,useId as ve,useState as w,useMemo as E,useEffect as j,useContext as Ce,useRef as we}from"react";import{sortableKeyboardCoordinates as xe,SortableContext as Te,verticalListSortingStrategy as Ne,arrayMove as Ae,useSortable as Fe}from"@dnd-kit/sortable";import{useSensors as Pe,useSensor as H,PointerSensor as De,KeyboardSensor as Oe,DndContext as Ie,closestCenter as Re,DragOverlay as Le}from"@dnd-kit/core";import{CSS as ze}from"@dnd-kit/utilities";import{TABLE_CHECK_BOX_COLUMN as Me,TABLE_ID_COLUMN as Ee,TABLE_DEFAULT_DATE_COLUMNS as _e}from"./data-table-commons.js";import{TfDatePicker as Ve}from"./date-picker.js";import{TfIdSearchInput as qe}from"./id-search.js";import{EasyMenu as V,MenuItem as L}from"./menu.js";import{PopoverTrigger as $e,Popover as Ue}from"./popover.js";import{useAppForm as ke}from"../utils/form-hook.js";import{classNames as x}from"../utils/primitives.js";import{useResourceFormatter as W}from"../utils/resource-names.js";import{Loader as je}from"./loader.js";import{SearchField as He}from"./searchfield.js";import{Table as Be,TableHeader as Ke,TableRow as B,TableHead as Qe,TableBody as We,TableCell as Ge}from"./table.js";import{merge as Xe}from"lodash-es";import"class-variance-authority";import"react-aria-components";import"date-fns";import"./checkbox.js";import"./field.js";import"../utils/form-utils.js";import"../utils/form-context.js";import"@tanstack/react-form";import"@internationalized/date";import"./calendar.js";import"./datefield.js";import"./list-box.js";import"./select.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"clsx";const _="tableActions";function jt({columns:t,fetchFn:a,columnsToHideByDefault:l={},allowSelection:o=!1,filterConfig:n}){const f=ve(),[s,u]=w({pagination:{pageIndex:0,pageSize:20},sorting:[]}),[h,d]=w({}),[b,m]=w(""),[i,g]=w([]),[p,N]=w({id:!1,updatedAt:!1,...l}),[P,Y]=w([]),q=E(()=>P.reduce((r,v)=>Xe(r,v),{}),[P]),z=r=>{u(v=>({...v,...r}))},{sorting:I,pagination:R}=s,A=te({queryKey:[f,R,I,b],queryFn:()=>a(R,I,b,q),placeholderData:ne,retry:0,refetchOnWindowFocus:!1});j(()=>{},[p]);const Z=E(()=>re(),[]),$=E(()=>{const r=A.data?.data;if(!r?.length)return[];const v=S=>S!=null&&typeof S=="object"&&"metadata"in S&&Array.isArray(S.metadata),k=r.filter(v);return k.length===0?[]:Array.from(new Set(k.flatMap(S=>S.metadata?.map(F=>F.key)??[]))).map(S=>Z.accessor(F=>v(F)?F?.metadata?.find(O=>O.key===S)?.value??"":"",{id:S,header:S,enableSorting:!1,cell:F=>{const O=F.getValue();return O==null?"":String(O)}}))},[A.data?.data]),J=[...o?Me:[],...Ee,...t.filter(r=>r.id!==_),...$.length?$:[],..._e,...t.filter(r=>r.id===_)];function ee(r){return typeof r=="function"}function D(r,v){return ee(r)?r(v):r}const U=ae({data:A.data?.data??[],columns:J,getCoreRowModel:ie(),rowCount:A.data?.total,manualPagination:!0,onPaginationChange:r=>{z({pagination:D(r,R)})},manualSorting:!0,onSortingChange:r=>{d({}),z({sorting:[...D(r,I)]})},manualFiltering:!0,onColumnVisibilityChange:r=>{N(D(r,p))},onRowSelectionChange:r=>{d(D(r,h))},onColumnOrderChange:r=>{g(D(r,i))},state:{sorting:I,columnVisibility:p,pagination:R,rowSelection:h,columnOrder:i},meta:{refetch:A.refetch}});return j(()=>{g([...U.getAllLeafColumns().map(r=>r.id)])},[]),{tableState:s,updateTableState:z,query:A,setSearchQuery:m,searchQuery:b,tanTable:U,mergedFilters:q,filters:P,setFilters:Y,filterConfig:n}}const G=ye(null),T=()=>{const t=Ce(G);if(!t)throw Error("DataTable should be used within DataTableProvider.");return t};function Ht({children:t,...a}){return e(G.Provider,{value:a,children:t})}function Bt({tableActions:t,className:a,...l}){const{query:o,tanTable:n}=T();return e(C,{children:c("section",{...l,className:x("flex flex-col bg-card",a),children:[e(et,{tableActions:t}),c("div",{className:"w-full overflow-auto border-x grow min-h-table relative",tabIndex:0,children:[o.isLoading&&e(K,{className:"cursor-wait",children:e(je,{})}),!o.isLoading&&n.getRowModel().rows.length===0&&e(K,{className:"cursor-not-allowed",children:!o.isFetching&&(o.isError?c("span",{className:"flex gap-3 justify-center items-center",children:[e(oe,{}),e("span",{children:"You don't have the required permissions. Please contact your admin."})]}):o.data?.data?e(C,{children:"Unknown error. Please contact customer support."}):e(C,{children:"No results found."}))}),!o.isLoading&&n.getRowModel().rows.length!==0&&e(tt,{className:"size-full"})]}),c("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[c("div",{className:"flex gap-icon",children:[e(Ye,{}),e(Je,{})]}),e(Ze,{})]})]})})}function K({children:t,className:a}){return c(C,{children:[e("span",{className:x(a,"absolute top-0 bg-card z-20 size-full body-sm flex items-center justify-center"),children:t}),e("span",{className:"relative h-full w-0 block"})]})}function Ye(){const{tanTable:t}=T(),[a,l]=w(null),o=W(),n=Pe(H(De),H(Oe,{coordinateGetter:xe}));return e(Ie,{sensors:n,collisionDetection:Re,onDragStart:s=>{const{active:u}=s;l(u.id.toString())},onDragEnd:s=>{const{active:u,over:h}=s;if(h&&u.id!==h.id){const d=t.getState().columnOrder,b=d.indexOf(u.id.toString()),m=d.indexOf(h.id.toString());t.setColumnOrder([...Ae(d,b,m)])}l(null)},children:c(Te,{items:t.getState().columnOrder,strategy:Ne,children:[c(V,{label:c(C,{children:[e(se,{}),"Columns"]}),selectionMode:"multiple",items:t.getAllFlatColumns(),selectedKeys:t.getIsAllColumnsVisible()?"all":t.getVisibleFlatColumns().map(s=>s.id),children:[e(L,{onAction:()=>t.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),t.getState().columnOrder.map(s=>{const u=t.getAllFlatColumns().find(h=>h.id===s);return u?e(f,{column:u},u.id):null})]}),e(Le,{children:a?e("div",{className:"opacity-70 border-2 border-primary",children:o(a)}):null})]})});function f({column:s}){const{attributes:u,listeners:h,setNodeRef:d,transform:b,transition:m}=Fe({id:s.id}),i={transform:ze.Transform.toString(b),transition:m,zIndex:"999"};return c(L,{ref:d,style:i,...u,id:s.id,onAction:()=>s.toggleVisibility(),isDisabled:!s.getCanHide(),className:"flex items-center",children:[e(ce,{...h,className:"size-icon cursor-grab"}),o(s.id),s.getIsSorted()&&e(X,{className:"size-icon",direction:s.getIsSorted()})]})}}function Ze(){const{tanTable:t,query:a}=T(),l=a.data?.total??0;return c("div",{className:"flex items-center gap-2",children:[e("span",{className:"whitespace-nowrap body-sm text-muted",children:`${t.getState().pagination.pageIndex*t.getState().pagination.pageSize+1} - ${Math.min((t.getState().pagination.pageIndex+1)*t.getState().pagination.pageSize,l)} of ${l?.toLocaleString()}`}),e(y,{onPress:()=>t.firstPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(de,{})}),e(y,{onPress:()=>t.previousPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(ue,{})}),e(y,{onPress:()=>t.nextPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(me,{})}),e(y,{onClick:()=>t.lastPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(pe,{})})]})}function Je(){const{tanTable:t}=T(),a=[10,20,30,40,50];return e(V,{label:t.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[t.getState().pagination.pageSize.toString()],items:a.map(l=>({id:l.toString(),value:l})),children:l=>e(L,{onAction:()=>t.setPageSize(l.value),children:l.value})})}function et({tableActions:t}){const{query:a,tanTable:l,searchQuery:o,setSearchQuery:n}=T();return c("section",{className:"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto",children:[c("div",{className:"flex gap-icon",children:[e(y,{isPending:a.isFetching,onClick:()=>a.refetch(),variant:"neutral",size:"icon",children:e(le,{})}),t.filter(f=>f.bulk===l.getSelectedRowModel().rows.length>0).map((f,s)=>{const u=f.icon;return e(y,{type:"button",isDisabled:a.isFetching,className:"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform",onPress:h=>{f.onClick(h,l)},size:"icon",children:e(u,{})},`${s}-${f.bulk}`)})]}),c("div",{className:"flex gap-icon",children:[e(rt,{}),e(He,{value:o,onChange:n})]})]})}function X({direction:t,...a}){return t==="asc"?e(ge,{...a}):t==="desc"?e(fe,{...a}):e(he,{...a})}function tt({className:t}){const{tanTable:a}=T(),l=(o,n)=>x("animate-in fade-in slide-in-from-top-10","px-icon py-2 text-left body-sm font-medium whitespace-nowrap",o&&"bg-card sticky right-0 z-50 text-center",n);return c(Be,{className:x(t),children:[e(Ke,{className:"sticky top-0 z-10",children:a.getHeaderGroups().map(o=>e(B,{className:x("h-input"),children:o.headers.map(n=>c(Qe,{className:l(!1,"bg-card"),children:[!n.column.getCanSort()&&!n.isPlaceholder&&e(C,{children:M(n.column.columnDef.header,n.getContext())}),n.column.getCanSort()&&c(y,{variant:"ghost",className:"w-full !justify-start !px-1.5",onPress:n.column.getToggleSortingHandler(),children:[M(n.column.columnDef.header,n.getContext()),e(X,{direction:n.column.getIsSorted()})]})]},n.id))},o.id))}),e(We,{className:"flex-1 overflow-y-auto relative",children:a.getRowModel().rows.map(o=>e(B,{className:x("h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":o.getIsSelected(),children:o.getVisibleCells().map(n=>e(Ge,{className:l(n.column.id===_),children:M(n.column.columnDef.cell,n.getContext())},n.id))},o.id))})]})}const Kt=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],nt={eq:"equal to",ne:"not equal to",cn:"contains",nc:"does not contain",sw:"starts with",ew:"ends with",in:"includes",nin:"does not include",gt:"greater than",gte:"greater than or equal to",lt:"less than",lte:"less than or equal to"},Q={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"]};function rt({className:t,...a}){const{filters:l,query:o,setFilters:n,filterConfig:f}=T(),s=we(null),u=W(),d=ke({defaultValues:{filters:[]},onSubmit:({value:m})=>{n(m.filters.map(i=>({[i.property]:{[i.operator]:[i.value]}})))}}),b=Object.keys(f).sort();return e("section",{...a,className:x("flex gap-icon items-center",t),children:c($e,{onOpenChange:m=>{m?s.current?.focus():d.handleSubmit()},children:[e(y,{active:l.length>0,isDisabled:o.isPending||b.length===0,type:"button",size:"icon",variant:"neutral",children:e(be,{})}),e(Ue,{className:"w-full p-icon",children:e("form",{onSubmit:m=>{m.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:e(d.Field,{mode:"array",name:"filters",children:m=>c(C,{children:[m.state.value.map((i,g)=>c("div",{className:"flex gap-icon items-center justify-normal",children:[e("span",{className:"body-sm",children:u(i.property)}),e(d.AppField,{name:`filters[${g}].operator`,children:p=>e(p.TfSingleSelect,{items:Q[i.type].map(N=>({id:N,label:e(C,{children:nt[N]})}))})},i.id),i.type==="bool"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfCheckbox,{})}),i.type==="date"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(Ve,{})}),i.type==="id"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfTextField,{})}),i.type==="string"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfTextField,{})}),i.type==="enum"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfMultiSelect,{items:f[i.property].options})}),i.type==="id-search"&&e(d.AppField,{name:`filters[${g}].value`,children:p=>e(qe,{multiple:!0,accessor:"id",searchFn:f[i.property].search})}),e(y,{type:"button",variant:"destructive",size:"icon",onPress:()=>m.removeValue(g),children:e(Se,{})})]},i.id)),c("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[e(V,{label:"Add Filter",children:b.map(i=>e(L,{onAction:()=>{const g=f[i].type,p=P=>{switch(P){case"bool":return!0;case"string":return"";case"date":return new Date().toISOString();case"id":return"";case"id-search":return[];case"enum":return[]}},N={id:`${i}-${Date.now()}`,operator:Q[g][0],value:p(g),type:g,property:i};m.pushValue(N)},children:u(i)},i))}),m.state.value.length>0?e(y,{type:"button",variant:"neutral",onPress:()=>{m.setValue([])},children:"Reset filters"}):null]})]})})})})]})})}export{_ as ACTIONS_COLUMN_ID,nt as C,rt as D,Bt as DataTable,G as DataTableContext,Ht as DataTableProvider,Kt as F,T as useDataTable,jt as useDataTableState};
+"use client";import{jsx as e,Fragment as C,jsxs as s}from"react/jsx-runtime";import{Info as ne,RotateCw as re,Columns3 as ae,GripVertical as ie,ChevronFirst as oe,ChevronLeft as le,ChevronRight as se,ChevronLast as ce,ArrowDownNarrowWide as de,ArrowDownWideNarrow as ue,ArrowUpDown as me,Filter as pe,Trash as ge}from"lucide-react";import{createContext as fe,useId as he,useState as D,useMemo as E,useEffect as be,useContext as ye,useRef as Se}from"react";import{Button as y}from"./button.js";import{useQuery as ve,keepPreviousData as Ce}from"@tanstack/react-query";import{createColumnHelper as we,useReactTable as xe,getCoreRowModel as Ne,flexRender as V}from"@tanstack/react-table";import{useLocalStorage as H}from"@uidotdev/usehooks";import{sortableKeyboardCoordinates as Te,SortableContext as Ae,verticalListSortingStrategy as Fe,arrayMove as Pe,useSortable as De}from"@dnd-kit/sortable";import{useSensors as Oe,useSensor as B,PointerSensor as Ie,KeyboardSensor as _e,DndContext as ze,closestCenter as Le,DragOverlay as Re}from"@dnd-kit/core";import{CSS as Me}from"@dnd-kit/utilities";import{merge as Ee}from"lodash-es";import{TABLE_CHECK_BOX_COLUMN as Ve,TABLE_ID_COLUMN as qe,TABLE_DEFAULT_DATE_COLUMNS as $e}from"./data-table-commons.js";import{TfDatePicker as Ue}from"./date-picker.js";import{TfIdSearchInput as je}from"./id-search.js";import{EasyMenu as $,MenuItem as _}from"./menu.js";import{PopoverTrigger as ke,Popover as He}from"./popover.js";import{useAppForm as Be}from"../utils/form-hook.js";import{classNames as x}from"../utils/primitives.js";import{useResourceFormatter as G}from"../utils/resource-names.js";import{Loader as Ke}from"./loader.js";import{SearchField as Qe}from"./searchfield.js";import{Table as We,TableHeader as Ge,TableRow as K,TableHead as Xe,TableBody as Ze,TableCell as Je}from"./table.js";import"class-variance-authority";import"react-aria-components";import"date-fns";import"./checkbox.js";import"./field.js";import"../utils/form-utils.js";import"../utils/form-context.js";import"@tanstack/react-form";import"@internationalized/date";import"./calendar.js";import"./datefield.js";import"./list-box.js";import"./select.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"clsx";const q="tableActions";function Kt({columns:t,callback:a,filterConfig:o,columnsToHideByDefault:i={},allowSelection:r=!1,initialFilters:f=[]}){const c=he(),[u,h]=D({pagination:{pageIndex:0,pageSize:20},sorting:[]}),[m,S]=D({}),[d,l]=D(""),[g,p]=H("ctx_column_order_preference",[]),[w,z]=H("ctx_column_visibility_preference",{id:!1,updatedAt:!1,...i}),[L,J]=D(f),R=E(()=>L.map(n=>Array.isArray(n.value)?{[n.property]:{[n.operator]:n.value.join(",")}}:{[n.property]:{[n.operator]:n.value}}).reduce((n,v)=>Ee(n,v),{}),[L]),M=n=>{h(v=>({...v,...n}))},{sorting:O,pagination:I}=u,T=ve({queryKey:[c,I,O,d,R],queryFn:()=>a(I,O,d,R),placeholderData:Ce,retry:0,refetchOnWindowFocus:!1}),Y=E(()=>we(),[]),U=E(()=>{const n=T.data?.data;if(!n?.length)return[];const v=b=>b!=null&&typeof b=="object"&&"metadata"in b&&Array.isArray(b.metadata),k=n.filter(v);return k.length===0?[]:Array.from(new Set(k.flatMap(b=>b.metadata?.map(A=>A.key)??[]))).map(b=>Y.accessor(A=>v(A)?A?.metadata?.find(P=>P.key===b)?.value??"":"",{id:b,header:b,enableSorting:!1,cell:A=>{const P=A.getValue();return P==null?"":String(P)}}))},[T.data?.data]),ee=[...r?Ve:[],...qe,...t.filter(n=>n.id!==q),...U.length?U:[],...$e,...t.filter(n=>n.id===q)];function te(n){return typeof n=="function"}function F(n,v){return te(n)?n(v):n}const j=xe({data:T.data?.data??[],columns:ee,getCoreRowModel:Ne(),rowCount:T.data?.total,manualPagination:!0,onPaginationChange:n=>{M({pagination:F(n,I)})},manualSorting:!0,onSortingChange:n=>{S({}),M({sorting:[...F(n,O)]})},manualFiltering:!0,onColumnVisibilityChange:n=>{z(F(n,w))},onRowSelectionChange:n=>{S(F(n,m))},onColumnOrderChange:n=>{p(F(n,g))},state:{sorting:O,columnVisibility:w,pagination:I,rowSelection:m,columnOrder:g},meta:{refetch:T.refetch}});return be(()=>{p([...j.getAllLeafColumns().map(n=>n.id)])},[]),{tableState:u,updateTableState:M,query:T,setSearchQuery:l,searchQuery:d,tanTable:j,mergedFilters:R,filters:L,setFilters:J,filterConfig:o}}const X=fe(null),N=()=>{const t=ye(X);if(!t)throw Error("DataTable should be used within DataTableProvider.");return t};function Qt({children:t,...a}){return e(X.Provider,{value:a,children:t})}function Wt({tableActions:t,className:a,...o}){const{query:i,tanTable:r}=N();return e(C,{children:s("section",{...o,className:x("flex flex-col bg-card",a),children:[e(nt,{tableActions:t}),s("div",{className:"w-full overflow-auto border-x grow min-h-table relative",tabIndex:0,children:[i.isLoading&&e(Q,{className:"cursor-wait",children:e(Ke,{})}),!i.isLoading&&r.getRowModel().rows.length===0&&e(Q,{className:"cursor-not-allowed",children:!i.isFetching&&(i.isError?s("span",{className:"flex gap-3 justify-center items-center",children:[e(ne,{}),e("span",{children:i.error.message})]}):i.data?.data?.length===0?e(C,{children:"No results found."}):e(C,{children:"Unknown error. Please contact customer support."}))}),!i.isLoading&&r.getRowModel().rows.length!==0&&e(rt,{className:"size-full"})]}),s("div",{className:"flex w-full justify-between border gap-icon p-icon overflow-x-auto",children:[s("div",{className:"flex gap-icon",children:[e(Ye,{}),e(tt,{})]}),e(et,{})]})]})})}function Q({children:t,className:a}){return s(C,{children:[e("span",{className:x(a,"absolute top-0 bg-card z-20 size-full body-sm flex items-center justify-center"),children:t}),e("span",{className:"relative h-full w-0 block"})]})}function Ye(){const{tanTable:t}=N(),[a,o]=D(null),i=G(),r=Oe(B(Ie),B(_e,{coordinateGetter:Te}));return e(ze,{sensors:r,collisionDetection:Le,onDragStart:c=>{const{active:u}=c;o(u.id.toString())},onDragEnd:c=>{const{active:u,over:h}=c;if(h&&u.id!==h.id){const m=t.getState().columnOrder,S=m.indexOf(u.id.toString()),d=m.indexOf(h.id.toString());t.setColumnOrder([...Pe(m,S,d)])}o(null)},children:s(Ae,{items:t.getState().columnOrder,strategy:Fe,children:[s($,{label:s(C,{children:[e(ae,{}),"Columns"]}),selectionMode:"multiple",items:t.getAllFlatColumns(),selectedKeys:t.getIsAllColumnsVisible()?"all":t.getVisibleFlatColumns().map(c=>c.id),children:[e(_,{onAction:()=>t.toggleAllColumnsVisible(),className:"italic",children:"(select all)"}),t.getState().columnOrder.map(c=>{const u=t.getAllFlatColumns().find(h=>h.id===c);return u?e(f,{column:u},u.id):null})]}),e(Re,{children:a?e("div",{className:"opacity-70 border-2 border-primary",children:i(a)}):null})]})});function f({column:c}){const{attributes:u,listeners:h,setNodeRef:m,transform:S,transition:d}=De({id:c.id}),l={transform:Me.Transform.toString(S),transition:d,zIndex:"999"};return s(_,{ref:m,style:l,...u,id:c.id,onAction:()=>c.toggleVisibility(),isDisabled:!c.getCanHide(),className:"flex items-center",children:[e(ie,{...h,className:"size-icon cursor-grab"}),i(c.id),c.getIsSorted()&&e(Z,{className:"size-icon",direction:c.getIsSorted()})]})}}function et(){const{tanTable:t,query:a}=N(),o=a.data?.total??0;return s("div",{className:"flex items-center gap-2",children:[e("span",{className:"whitespace-nowrap body-sm text-muted",children:`${t.getState().pagination.pageIndex*t.getState().pagination.pageSize+1} - ${Math.min((t.getState().pagination.pageIndex+1)*t.getState().pagination.pageSize,o)} of ${o?.toLocaleString()}`}),e(y,{onPress:()=>t.firstPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(oe,{})}),e(y,{onPress:()=>t.previousPage(),isDisabled:!t.getCanPreviousPage(),variant:"neutral",size:"icon",children:e(le,{})}),e(y,{onPress:()=>t.nextPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(se,{})}),e(y,{onClick:()=>t.lastPage(),isDisabled:!t.getCanNextPage(),variant:"neutral",size:"icon",children:e(ce,{})})]})}function tt(){const{tanTable:t}=N(),a=[10,20,30,40,50];return e($,{label:t.getState().pagination.pageSize.toString(),selectionMode:"single",selectedKeys:[t.getState().pagination.pageSize.toString()],items:a.map(o=>({id:o.toString(),value:o})),children:o=>e(_,{onAction:()=>t.setPageSize(o.value),children:o.value})})}function nt({tableActions:t}){const{query:a,tanTable:o,searchQuery:i,setSearchQuery:r}=N();return s("section",{className:"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto",children:[s("div",{className:"flex gap-icon",children:[e(y,{isPending:a.isFetching,onClick:()=>a.refetch(),variant:"neutral",size:"icon",children:e(re,{})}),t.filter(f=>f.bulk===o.getSelectedRowModel().rows.length>0).map((f,c)=>{const u=f.icon;return e(y,{type:"button",isDisabled:a.isFetching,className:"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform",onPress:h=>{f.onClick(h,o)},size:"icon",children:e(u,{})},`${c}-${f.bulk}`)})]}),s("div",{className:"flex gap-icon",children:[e(it,{}),e(Qe,{value:i,onChange:r})]})]})}function Z({direction:t,...a}){return t==="asc"?e(de,{...a}):t==="desc"?e(ue,{...a}):e(me,{...a})}function rt({className:t}){const{tanTable:a}=N(),o=(i,r)=>x("animate-in fade-in slide-in-from-top-10","px-icon py-2 text-left body-sm font-medium whitespace-nowrap",i&&"bg-card sticky right-0 z-50 text-center",r);return s(We,{className:x(t),children:[e(Ge,{className:"sticky top-0 z-10",children:a.getHeaderGroups().map(i=>e(K,{className:x("h-input"),children:i.headers.map(r=>s(Xe,{className:o(!1,"bg-card"),children:[!r.column.getCanSort()&&!r.isPlaceholder&&e(C,{children:V(r.column.columnDef.header,r.getContext())}),r.column.getCanSort()&&s(y,{variant:"ghost",className:"w-full !justify-start !px-1.5",onPress:r.column.getToggleSortingHandler(),children:[V(r.column.columnDef.header,r.getContext()),e(Z,{direction:r.column.getIsSorted()})]})]},r.id))},i.id))}),e(Ze,{className:"flex-1 overflow-y-auto relative",children:a.getRowModel().rows.map(i=>e(K,{className:x("h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),"data-selected":i.getIsSelected(),children:i.getVisibleCells().map(r=>e(Je,{className:o(r.column.id===q),children:V(r.column.columnDef.cell,r.getContext())},r.id))},i.id))})]})}const Gt=["eq","ne","cn","nc","sw","ew","in","nin","gt","gte","lt","lte"],at={eq:"equal to",ne:"not equal to",cn:"contains",nc:"does not contain",sw:"starts with",ew:"ends with",in:"includes",nin:"does not include",gt:"greater than",gte:"greater than or equal to",lt:"less than",lte:"less than or equal to"},W={bool:["eq"],enum:["in","nin"],id:["in","nin"],"id-search":["in","nin"],string:["eq","ne","cn","nc","sw","ew","in","nin"],date:["lt","gt"]};function it({className:t,...a}){const{filters:o,query:i,setFilters:r,filterConfig:f}=N(),c=Se(null),u=G(),m=Be({defaultValues:{filters:o},onSubmit:({value:d})=>{r(d.filters)}}),S=Object.keys(f).sort();return e("section",{...a,className:x("flex gap-icon items-center",t),children:s(ke,{onOpenChange:d=>{d?c.current?.focus():m.handleSubmit()},children:[s("div",{className:"relative",children:[o.length>0&&e("div",{className:"size-2 rounded-full absolute bg-destructive z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5"}),e(y,{isDisabled:i.isPending||S.length===0,type:"button",size:"icon",variant:"neutral",children:e(pe,{})})]}),e(He,{className:"w-full p-icon",children:e("form",{onSubmit:d=>{d.preventDefault()},className:"flex flex-col gap-icon max-h-table overflow-auto ",children:e(m.Field,{mode:"array",name:"filters",children:d=>s(C,{children:[d.state.value.map((l,g)=>s("div",{className:"flex gap-icon items-center justify-normal",children:[e("span",{className:"body-sm",children:u(l.property)}),e(m.AppField,{name:`filters[${g}].operator`,children:p=>e(p.TfSingleSelect,{items:W[l.type].map(w=>({id:w,label:e(C,{children:at[w]})}))})},l.id),l.type==="bool"&&e(m.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfCheckbox,{})}),l.type==="date"&&e(m.AppField,{name:`filters[${g}].value`,children:p=>e(Ue,{})}),l.type==="id"&&e(m.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfTextField,{})}),l.type==="string"&&e(m.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfTextField,{})}),l.type==="enum"&&e(m.AppField,{name:`filters[${g}].value`,children:p=>e(p.TfMultiSelect,{items:f[l.property].options})}),l.type==="id-search"&&e(m.AppField,{name:`filters[${g}].value`,children:p=>e(je,{multiple:!0,accessor:"id",searchFn:f[l.property].search})}),e(y,{type:"button",variant:"destructive",size:"icon",onPress:()=>d.removeValue(g),children:e(ge,{})})]},l.id)),s("div",{className:"flex w-full items-center justify-end gap-2 not-first:mt-icon",children:[e($,{label:"Add Filter",children:S.map(l=>e(_,{onAction:()=>{const g=f[l].type,p=z=>{switch(z){case"bool":return!0;case"string":return"";case"date":return new Date().toISOString();case"id":return"";case"id-search":return[];case"enum":return[]}},w={id:`${l}-${Date.now()}`,operator:W[g][0],value:p(g),type:g,property:l};d.pushValue(w)},children:u(l)},l))}),d.state.value.length>0?e(y,{type:"button",variant:"neutral",onPress:()=>{d.setValue([])},children:"Reset filters"}):null]})]})})})})]})})}export{q as ACTIONS_COLUMN_ID,at as C,it as D,Wt as DataTable,X as DataTableContext,Qt as DataTableProvider,Gt as F,N as useDataTable,Kt as useDataTableState};
 //# sourceMappingURL=data-table.js.map

package/dist/components/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sources":["../../lib/components/data-table.tsx","../../lib/components/data-table-filter.tsx"],"sourcesContent":["'use client';\nimport type { components, operations } from '@cryptlex/web-api-types';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n    type AccessorFnColumnDef,\n    type Column,\n    type ColumnDef,\n    type ColumnOrderState,\n    createColumnHelper,\n    getCoreRowModel,\n    type RowSelectionState,\n    type TableState,\n    type Updater,\n    useReactTable,\n    type VisibilityState,\n} from '@tanstack/react-table';\nimport { ArrowDownNarrowWide, ArrowDownWideNarrow, ArrowUpDown, Columns3, GripVertical, Info } from 'lucide-react';\nimport { createContext, useContext, useEffect, useId, useMemo, useState } from 'react';\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = 'tableActions';\nexport type Schemas = ApiSchema<keyof components['schemas']>;\nexport type OperationKeys = keyof operations;\ntype DataTableFactory<TData extends Schemas> = {\n    fetchFn: TableFetchFn<TData, OperationKeys>;\n    columns: ColumnDef<TData, any>[];\n    allowSelection?: boolean;\n    columnsToHideByDefault?: VisibilityState; // Columns that are hidden by default\n    filterConfig: FiltersConfig<OperationKeys>;\n};\n\ntype DataTableState = Pick<TableState, 'sorting' | 'pagination'> & {};\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<TData extends Schemas>({\n    columns,\n    fetchFn,\n    columnsToHideByDefault = {},\n    allowSelection = false,\n    filterConfig,\n}: DataTableFactory<TData>) {\n    const id = useId();\n\n    const [tableState, _setTableState] = useState<DataTableState>({\n        /** TODO Reflect in URL  */\n        pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n        sorting: [], // Sorting state\n    });\n\n    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n    /** TODO Reflect in URL  */\n    const [searchQuery, setSearchQuery] = useState('');\n\n    /** TODO Store on browser as preference */\n    const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([]);\n    // TODO Store on browser\n    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({\n        id: false,\n        updatedAt: false,\n        ...columnsToHideByDefault,\n    });\n\n    const [filters, setFilters] = useState<ApiFilters<OperationKeys>[]>([]);\n\n    const mergedFilters = useMemo(() => {\n        return filters.reduce((acc, current) => {\n            return merge(acc, current);\n        }, {});\n    }, [filters]);\n\n    // Update table state with new values\n    const updateTableState = (updates: Partial<DataTableState>) => {\n        _setTableState(prev => ({ ...prev, ...updates }));\n    };\n\n    const { sorting, pagination } = tableState;\n\n    const query = useQuery({\n        queryKey: [id, pagination, sorting, searchQuery],\n        queryFn: () => fetchFn(pagination, sorting, searchQuery, mergedFilters),\n        placeholderData: keepPreviousData, // Keep previous data while loading new data\n        retry: 0,\n        refetchOnWindowFocus: false,\n    });\n\n    useEffect(() => {\n        // TODO, store in localStorage\n    }, [columnVisibility]);\n\n    const columnHelper = useMemo(() => createColumnHelper<TData>(), []);\n\n    const metadataColumns = useMemo<AccessorFnColumnDef<TData, string>[]>(() => {\n        const data = query.data?.data;\n        if (!data?.length) return [];\n\n        type WithMeta = TData & { metadata: ApiSchema<'MetadataDto'>[] };\n        const rowHasMetadata = (row: TData): row is WithMeta =>\n            row != null && typeof row === 'object' && 'metadata' in row && Array.isArray(row.metadata);\n\n        const rowsWithMeta = data.filter(rowHasMetadata);\n        if (rowsWithMeta.length === 0) return [];\n        const keys: string[] = Array.from(new Set(rowsWithMeta.flatMap(r => r.metadata?.map(m => m.key) ?? [])));\n\n        return keys.map(key =>\n            columnHelper.accessor(\n                row => {\n                    if (rowHasMetadata(row)) {\n                        return row?.metadata?.find(m => m.key === key)?.value ?? '';\n                    }\n                    return '';\n                },\n                {\n                    id: key,\n                    header: key, // tooltip header\n                    enableSorting: false,\n                    cell: info => {\n                        const value = info.getValue();\n                        // Handle null/undefined values\n                        if (value === null || value === undefined) return '';\n                        // For primitive types, return the string representation\n                        return String(value);\n                    },\n                }\n            )\n        );\n    }, [query.data?.data]);\n\n    /**\n     * ID,createdAt and updatedAt will be added by default for all tables\n     * If selection is allowed, checkbox will be added\n     * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n     * If there are actions for the table, they will be placed fixed at the right side of table.\n     */\n    const cols: ColumnDef<any, any>[] = [\n        ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n        ...TABLE_ID_COLUMN,\n        ...columns.filter(col => col.id !== ACTIONS_COLUMN_ID),\n        ...(metadataColumns.length ? metadataColumns : []),\n        ...TABLE_DEFAULT_DATE_COLUMNS,\n        // Actions column\n        ...columns.filter(col => col.id === ACTIONS_COLUMN_ID),\n    ];\n\n    // Type-guard for updater\n    function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n        return typeof updater === 'function';\n    }\n    // Utility function to resolve updater\n    function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n        if (isUpdaterFunction(updater)) {\n            return updater(currentValue);\n        }\n        return updater;\n    }\n\n    // Use react-table's hook to create the table instance\n    const tanTable = useReactTable({\n        data: query.data?.data ?? [],\n        columns: cols,\n        getCoreRowModel: getCoreRowModel(),\n        rowCount: query.data?.total,\n        manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n        onPaginationChange: updater => {\n            updateTableState({ pagination: resolveUpdater(updater, pagination) });\n        },\n        manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n        onSortingChange: updater => {\n            setRowSelection({});\n            updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n        },\n        manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n        onColumnVisibilityChange: updater => {\n            setColumnVisibility(resolveUpdater(updater, columnVisibility));\n        },\n        onRowSelectionChange: updater => {\n            setRowSelection(resolveUpdater(updater, rowSelection));\n        },\n        onColumnOrderChange: updater => {\n            setColumnOrder(resolveUpdater(updater, columnOrder));\n        },\n        state: {\n            sorting: sorting,\n            columnVisibility: columnVisibility,\n            pagination: pagination,\n            rowSelection: rowSelection,\n            columnOrder: columnOrder,\n        },\n        meta: {\n            refetch: query.refetch,\n        },\n    });\n\n    // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n    // This populates the columnIds in the columnOrder state\n    // TODO, add localStorage access layer for this.\n    useEffect(() => {\n        setColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);\n    }, []);\n\n    return {\n        tableState,\n        updateTableState,\n        query,\n        setSearchQuery,\n        searchQuery,\n        tanTable,\n        mergedFilters,\n        filters,\n        setFilters,\n        filterConfig,\n    };\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n\nexport const useDataTable = () => {\n    const ctx = useContext(DataTableContext);\n    if (!ctx) {\n        throw Error('DataTable should be used within DataTableProvider.');\n    }\n    return ctx;\n};\n\nexport function DataTableProvider({\n    children,\n    ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState>) {\n    return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'> & {\n    tableActions: TableActions;\n\n    // filterConfig: {\n    // \tfilters: Record<keyof ApiFilters<TOperation>, 'date' | 'string' | 'known-string' | 'number'>,\n    // }\n};\nexport function DataTable({\n    tableActions,\n    className,\n    ...props\n    // filterableFields,\n}: DataTableProps) {\n    // State for managing table data and filters\n    const { query, tanTable } = useDataTable();\n\n    return (\n        <>\n            {/* Table Actions Section */}\n            <section {...props} className={classNames('flex flex-col bg-card', className)}>\n                <Actions tableActions={tableActions} />\n                {/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n                <div className=\"w-full overflow-auto border-x grow min-h-table relative\" tabIndex={0}>\n                    {/* Table overlay with loader */}\n                    {query.isLoading && (\n                        <TableOverlay className=\"cursor-wait\">\n                            <Loader />\n                        </TableOverlay>\n                    )}\n                    {/* Table overlay for empty table */}\n                    {!query.isLoading && tanTable.getRowModel().rows.length === 0 && (\n                        // Empty table\n                        <TableOverlay className=\"cursor-not-allowed\">\n                            {!query.isFetching &&\n                                (query.isError ? (\n                                    <span className=\"flex gap-3 justify-center items-center\">\n                                        {/* TODO (mudasir-pandith) Check for 403 explicitly!! */}\n                                        {/* <span>{query.error}</span> */}\n                                        <Info />\n                                        <span>You don't have the required permissions. Please contact your admin.</span>\n                                    </span>\n                                ) : !query.data?.data ? (\n                                    <>No results found.</>\n                                ) : (\n                                    <>Unknown error. Please contact customer support.</>\n                                ))}\n                        </TableOverlay>\n                    )}\n                    {!query.isLoading && tanTable.getRowModel().rows.length !== 0 && (\n                        <TableContent className=\"size-full\" />\n                    )}\n                </div>\n\n                {/* Table Footer Section with Pagination and Column Picker */}\n                <div className=\"flex w-full justify-between border gap-icon p-icon overflow-x-auto\">\n                    <div className=\"flex gap-icon\">\n                        <ColumnPicker />\n                        <PageSize />\n                    </div>\n                    <Paginator />\n                </div>\n            </section>\n        </>\n    );\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({ children, className }: { children: React.ReactNode; className?: string }) {\n    return (\n        <>\n            <span\n                className={classNames(\n                    className,\n                    'absolute top-0 bg-card z-20 size-full body-sm flex items-center justify-center'\n                )}\n            >\n                {children}\n            </span>\n            {/* Keep something in document flow with the correct height */}\n            <span className=\"relative h-full w-0 block\" />\n        </>\n    );\n}\n\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    useSortable,\n    verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\nfunction ColumnPicker() {\n    const { tanTable } = useDataTable();\n    const [activeId, setActiveId] = useState<string | null>(null);\n\n    const resourceFormatter = useResourceFormatter();\n\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n    return (\n        <DndContext\n            sensors={sensors}\n            collisionDetection={closestCenter}\n            onDragStart={event => {\n                const { active } = event;\n                setActiveId(active.id.toString());\n            }}\n            onDragEnd={event => {\n                const { active, over } = event;\n\n                if (over && active.id !== over.id) {\n                    const columnOrder = tanTable.getState().columnOrder;\n                    const oldIndex = columnOrder.indexOf(active.id.toString());\n                    const newIndex = columnOrder.indexOf(over.id.toString());\n                    tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n                }\n\n                setActiveId(null);\n            }}\n        >\n            <SortableContext items={tanTable.getState().columnOrder} strategy={verticalListSortingStrategy}>\n                <EasyMenu\n                    label={\n                        <>\n                            <Columns3 />\n                            Columns\n                        </>\n                    }\n                    selectionMode=\"multiple\"\n                    items={tanTable.getAllFlatColumns()}\n                    selectedKeys={\n                        tanTable.getIsAllColumnsVisible() ? 'all' : tanTable.getVisibleFlatColumns().map(c => c.id)\n                    }\n                >\n                    <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n                        (select all)\n                    </MenuItem>\n                    {tanTable.getState().columnOrder.map(colId => {\n                        const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n                        if (!col) return null;\n                        return <SortableItem key={col.id} column={col} />;\n                    })}\n                </EasyMenu>\n                <DragOverlay>\n                    {activeId ? (\n                        <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n                    ) : null}\n                </DragOverlay>\n            </SortableContext>\n        </DndContext>\n    );\n\n    function SortableItem({ column }: { column: Column<any, unknown> }) {\n        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n        const style = {\n            transform: CSS.Transform.toString(transform),\n            transition,\n            zIndex: '999',\n        };\n        return (\n            <MenuItem\n                ref={setNodeRef}\n                style={style}\n                {...attributes}\n                id={column.id}\n                onAction={() => column.toggleVisibility()}\n                isDisabled={!column.getCanHide()}\n                className=\"flex items-center\"\n            >\n                <GripVertical {...listeners} className=\"size-icon cursor-grab\" />\n                {resourceFormatter(column.id)}\n                {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n            </MenuItem>\n        );\n    }\n}\n\nimport { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from 'lucide-react';\n\nfunction Paginator() {\n    const { tanTable, query } = useDataTable();\n    const rowCount = query.data?.total ?? 0;\n    return (\n        <div className=\"flex items-center gap-2\">\n            <span className=\"whitespace-nowrap body-sm text-muted\">\n                {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n                    (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n                    rowCount\n                )} of ${rowCount?.toLocaleString()}`}\n            </span>\n\n            <Button\n                onPress={() => tanTable.firstPage()}\n                isDisabled={!tanTable.getCanPreviousPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <ChevronFirst />\n            </Button>\n            <Button\n                onPress={() => tanTable.previousPage()}\n                isDisabled={!tanTable.getCanPreviousPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <ChevronLeft />\n            </Button>\n            <Button\n                onPress={() => tanTable.nextPage()}\n                isDisabled={!tanTable.getCanNextPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <ChevronRight />\n            </Button>\n            <Button\n                onClick={() => tanTable.lastPage()}\n                isDisabled={!tanTable.getCanNextPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <ChevronLast />\n            </Button>\n        </div>\n    );\n}\n\nfunction PageSize() {\n    const { tanTable } = useDataTable();\n    const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n    return (\n        <EasyMenu\n            label={tanTable.getState().pagination.pageSize.toString()}\n            selectionMode=\"single\"\n            selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n            items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n        >\n            {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n        </EasyMenu>\n    );\n}\n\nimport { RotateCw } from 'lucide-react';\n\nfunction Actions({ tableActions }: { tableActions: TableActions }) {\n    const { query, tanTable, searchQuery, setSearchQuery } = useDataTable();\n\n    return (\n        <section className=\"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto\">\n            <div className=\"flex gap-icon\">\n                <Button isPending={query.isFetching} onClick={() => query.refetch()} variant={'neutral'} size={'icon'}>\n                    <RotateCw />\n                </Button>\n\n                {tableActions\n                    .filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)\n                    .map((ta, i) => {\n                        const Icon = ta.icon;\n                        return (\n                            <Button\n                                key={`${i}-${ta.bulk}`}\n                                type=\"button\"\n                                isDisabled={query.isFetching}\n                                className=\"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform\"\n                                onPress={e => {\n                                    ta.onClick(e, tanTable);\n                                }}\n                                size={'icon'}\n                            >\n                                <Icon />\n                            </Button>\n                        );\n                    })}\n            </div>\n            <div className=\"flex gap-icon\">\n                <DataTableFilter />\n                {<SearchField value={searchQuery} onChange={setSearchQuery} />}\n            </div>\n        </section>\n    );\n}\n\nimport {\n    closestCenter,\n    DndContext,\n    DragOverlay,\n    KeyboardSensor,\n    PointerSensor,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport { flexRender } from '@tanstack/react-table';\nimport { Button } from 'lib/components/button';\nimport {\n    type ApiFilters,\n    type ApiSchema,\n    TABLE_CHECK_BOX_COLUMN,\n    TABLE_DEFAULT_DATE_COLUMNS,\n    TABLE_ID_COLUMN,\n    type TableActions,\n    type TableFetchFn,\n} from 'lib/components/data-table-commons';\nimport { DataTableFilter, type FiltersConfig } from 'lib/components/data-table-filter';\nimport { Loader } from 'lib/components/loader';\nimport { EasyMenu, MenuItem } from 'lib/components/menu';\nimport { SearchField } from 'lib/components/searchfield';\nimport { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow } from 'lib/components/table';\nimport { classNames } from 'lib/utils/primitives';\nimport { useResourceFormatter } from 'lib/utils/resource-names';\nimport { merge } from 'lodash-es';\n\nfunction SortIcon({\n    direction,\n    ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n    if (direction === 'asc') return <ArrowDownNarrowWide {...props} />;\n    else if (direction === 'desc') return <ArrowDownWideNarrow {...props} />;\n    else return <ArrowUpDown {...props} />;\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n    const { tanTable } = useDataTable();\n    const tableCellStyle = (isSticky: boolean, className?: string) =>\n        classNames(\n            'animate-in fade-in slide-in-from-top-10',\n            'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n            isSticky && 'bg-card sticky right-0 z-50 text-center',\n            className\n        );\n    return (\n        <TableComponent className={classNames(className)}>\n            <TableHeader className=\"sticky top-0 z-10\">\n                {tanTable.getHeaderGroups().map(headerGroup => (\n                    <TableRow className={classNames('h-input')} key={headerGroup.id}>\n                        {headerGroup.headers.map(header => (\n                            <TableHead key={header.id} className={tableCellStyle(false, 'bg-card')}>\n                                {!header.column.getCanSort() && !header.isPlaceholder && (\n                                    <>{flexRender(header.column.columnDef.header, header.getContext())}</>\n                                )}\n                                {/* TODO Align header text with table text */}\n                                {header.column.getCanSort() && (\n                                    <Button\n                                        variant=\"ghost\"\n                                        className=\"w-full !justify-start !px-1.5\"\n                                        onPress={header.column.getToggleSortingHandler()}\n                                    >\n                                        {flexRender(header.column.columnDef.header, header.getContext())}\n                                        <SortIcon direction={header.column.getIsSorted()} />\n                                    </Button>\n                                )}\n                            </TableHead>\n                        ))}\n                    </TableRow>\n                ))}\n            </TableHeader>\n            <TableBody className=\"flex-1 overflow-y-auto relative\">\n                {tanTable.getRowModel().rows.map(row => (\n                    <TableRow\n                        className={classNames(\n                            'h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20'\n                        )}\n                        key={row.id}\n                        data-selected={row.getIsSelected()}\n                    >\n                        {row.getVisibleCells().map(cell => (\n                            <TableCell key={cell.id} className={tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID)}>\n                                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                            </TableCell>\n                        ))}\n                    </TableRow>\n                ))}\n            </TableBody>\n        </TableComponent>\n    );\n}\n","'use client';\nimport type { CalendarDateTime } from '@internationalized/date';\nimport { Button } from 'lib/components/button';\nimport { useDataTable, type OperationKeys } from 'lib/components/data-table';\nimport { type ApiFilters } from 'lib/components/data-table-commons';\nimport { TfDatePicker } from 'lib/components/date-picker';\nimport { TfIdSearchInput } from 'lib/components/id-search';\nimport { EasyMenu, MenuItem } from 'lib/components/menu';\nimport type { MultiSelectProps } from 'lib/components/multi-select';\nimport { Popover, PopoverTrigger } from 'lib/components/popover';\nimport { useAppForm } from 'lib/utils/form-hook';\nimport { classNames } from 'lib/utils/primitives';\nimport { useResourceFormatter } from 'lib/utils/resource-names';\nimport { Filter, Trash } from 'lucide-react';\nimport { useRef } from 'react';\n\nexport const FILTER_COMPARISON_OPERATORS = [\n    'eq',\n    'ne',\n    'cn',\n    'nc',\n    'sw',\n    'ew',\n    'in',\n    'nin',\n    'gt',\n    'gte',\n    'lt',\n    'lte',\n] as const;\nexport type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string> = {\n    eq: 'equal to',\n    ne: 'not equal to',\n    cn: 'contains',\n    nc: 'does not contain',\n    sw: 'starts with',\n    ew: 'ends with',\n    in: 'includes',\n    nin: 'does not include',\n    gt: 'greater than',\n    gte: 'greater than or equal to',\n    lt: 'less than',\n    lte: 'less than or equal to',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n    id: string;\n    type: T;\n    property: string;\n    operator: FilterComparisonOperator;\n    value: V | undefined;\n    displayValue?: string;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype DateLocalFilter = BaseLocalFilter<'date', CalendarDateTime>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', Set<string | number>>;\n\ntype LocalFilter =\n    | EnumLocalFilter\n    | IdLocalFilter\n    | BoolLocalFilter\n    | StringLocalFilter\n    | DateLocalFilter\n    | IdSearchLocalFilter;\n\nexport type FilterConfig =\n    | { type: 'enum'; options: MultiSelectProps['items'] }\n    | { type: 'id-search'; search: () => Promise<{ id: string; name: string }[]> }\n    | { type: 'id' }\n    | { type: 'bool' }\n    | { type: 'string' }\n    | { type: 'date' };\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n    bool: ['eq'],\n    enum: ['in', 'nin'],\n    id: ['in', 'nin'],\n    'id-search': ['in', 'nin'],\n    string: ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n    date: ['lt', 'gt'],\n};\n\nexport type FiltersConfig<TOperation extends OperationKeys> = Required<\n    Record<keyof ApiFilters<TOperation>, FilterConfig>\n>;\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n    const { filters, query, setFilters, filterConfig } = useDataTable();\n    // TODO @mudasirpandith add focus\n    // const localFilterRefs = useRef([]);\n    const addFilterButtonRef = useRef<HTMLButtonElement>(null);\n\n    const resourceFormatter = useResourceFormatter();\n\n    const DEFAULT_VALUES: { filters: LocalFilter[] } = {\n        // TODO, initialize with filters from tableState\n        filters: [],\n    };\n    const form = useAppForm({\n        defaultValues: DEFAULT_VALUES,\n        onSubmit: ({ value }) => {\n            // TODO, instead of generic transformation, use type based tranform()\n            setFilters(\n                value.filters.map(lf => {\n                    return { [lf.property]: { [lf.operator]: [lf.value] } };\n                })\n            );\n        },\n    });\n\n    // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870\n    const filterKeys = Object.keys(filterConfig).sort();\n\n    return (\n        <section {...props} className={classNames('flex gap-icon items-center', className)}>\n            <PopoverTrigger\n                onOpenChange={o => {\n                    // Set filters when the popover closes\n                    if (!o) {\n                        form.handleSubmit();\n                    } else {\n                        addFilterButtonRef.current?.focus();\n                    }\n                }}\n            >\n                <Button\n                    active={filters.length > 0}\n                    isDisabled={query.isPending || filterKeys.length === 0}\n                    type=\"button\"\n                    size={'icon'}\n                    variant={'neutral'}\n                >\n                    <Filter />\n                </Button>\n                {/* TODO, icon maps with dynamic imports? */}\n                {/* TODO open popover with form for property specific filter */}\n                {/* TODO, icons here??? */}\n                <Popover className=\"w-full p-icon\">\n                    <form\n                        onSubmit={e => {\n                            e.preventDefault();\n                        }}\n                        className=\"flex flex-col gap-icon max-h-table overflow-auto \"\n                    >\n                        <form.Field mode=\"array\" name={'filters'}>\n                            {field => {\n                                return (\n                                    <>\n                                        {field.state.value.map((lf, i) => {\n                                            return (\n                                                <div key={lf.id} className=\"flex gap-icon items-center justify-normal\">\n                                                    <span className=\"body-sm\">{resourceFormatter(lf.property)}</span>\n                                                    <form.AppField key={lf.id} name={`filters[${i}].operator`}>\n                                                        {sf => (\n                                                            <sf.TfSingleSelect\n                                                                items={FilterOperations[lf.type].map(op => ({\n                                                                    id: op,\n                                                                    label: <>{COMPARISON_OPERATOR_LABELS[op]}</>,\n                                                                }))}\n                                                            />\n                                                        )}\n                                                    </form.AppField>\n\n                                                    {lf.type === 'bool' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfCheckbox />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'date' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {_ => <TfDatePicker />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'id' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfTextField />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'string' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfTextField />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {/* TODO fix @mudasirpandith */}\n                                                    {/* @ts-ignore */}\n                                                    {lf.type === 'enum' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => (\n                                                                <sf.TfMultiSelect\n                                                                    // @ts-ignore\n                                                                    items={filterConfig[lf.property].options}\n                                                                />\n                                                            )}\n                                                        </form.AppField>\n                                                    )}\n                                                    {/* TODO fix @mudasirpandith */}\n                                                    {/* @ts-ignore */}\n                                                    {lf.type === 'id-search' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {_ => (\n                                                                <TfIdSearchInput\n                                                                    multiple\n                                                                    accessor=\"id\"\n                                                                    // @ts-ignore\n                                                                    searchFn={filterConfig[lf.property].search}\n                                                                />\n                                                            )}\n                                                        </form.AppField>\n                                                    )}\n\n                                                    <Button\n                                                        type=\"button\"\n                                                        variant=\"destructive\"\n                                                        size=\"icon\"\n                                                        onPress={() => field.removeValue(i)}\n                                                    >\n                                                        <Trash />\n                                                    </Button>\n                                                </div>\n                                            );\n                                        })}\n                                        <div className=\"flex w-full items-center justify-end gap-2 not-first:mt-icon\">\n                                            <EasyMenu label=\"Add Filter\">\n                                                {filterKeys.map(k => (\n                                                    <MenuItem\n                                                        key={k}\n                                                        onAction={() => {\n                                                            // TODO @mudasirpandith\n                                                            //@ts-ignore\n                                                            const type = filterConfig[k].type as FilterType;\n\n                                                            const defaultValue = (t: FilterType) => {\n                                                                // TODO, ensure exhaustive???\n                                                                // @mudasirpandith\n                                                                switch (t) {\n                                                                    case 'bool':\n                                                                        return true;\n                                                                    case 'string':\n                                                                        return '';\n                                                                    case 'date':\n                                                                        return new Date().toISOString();\n                                                                    case 'id':\n                                                                        return '';\n                                                                    case 'id-search':\n                                                                        return [] as string[];\n                                                                    case 'enum':\n                                                                        return [] as string[];\n                                                                }\n                                                            };\n\n                                                            const newFilter: LocalFilter = {\n                                                                id: `${k}-${Date.now()}`,\n                                                                operator: FilterOperations[type][0],\n                                                                //@ts-ignore\n                                                                value: defaultValue(type),\n                                                                type: type,\n                                                                property: k,\n                                                            };\n\n                                                            field.pushValue(newFilter);\n                                                            // TODO Focus to ref\n                                                        }}\n                                                    >\n                                                        {resourceFormatter(k)}\n                                                    </MenuItem>\n                                                ))}\n                                            </EasyMenu>\n                                            {field.state.value.length > 0 ? (\n                                                <Button\n                                                    type=\"button\"\n                                                    variant=\"neutral\"\n                                                    onPress={() => {\n                                                        field.setValue([]);\n                                                    }}\n                                                >\n                                                    Reset filters\n                                                </Button>\n                                            ) : null}\n                                        </div>\n                                    </>\n                                );\n                            }}\n                        </form.Field>\n                    </form>\n                </Popover>\n            </PopoverTrigger>\n        </section>\n    );\n}\n"],"names":["ACTIONS_COLUMN_ID","useDataTableState","columns","fetchFn","columnsToHideByDefault","allowSelection","filterConfig","id","useId","tableState","_setTableState","useState","rowSelection","setRowSelection","searchQuery","setSearchQuery","columnOrder","setColumnOrder","columnVisibility","setColumnVisibility","filters","setFilters","mergedFilters","useMemo","acc","current","merge","updateTableState","updates","prev","sorting","pagination","query","useQuery","keepPreviousData","useEffect","columnHelper","createColumnHelper","metadataColumns","data","rowHasMetadata","row","rowsWithMeta","r","m","key","info","value","cols","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","tableActions","className","jsx","Fragment","classNames","Actions","jsxs","TableOverlay","Loader","Info","TableContent","ColumnPicker","PageSize","Paginator","activeId","setActiveId","resourceFormatter","useResourceFormatter","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","arrayMove","SortableContext","verticalListSortingStrategy","EasyMenu","Columns3","MenuItem","colId","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","GripVertical","SortIcon","rowCount","Button","ChevronFirst","ChevronLeft","ChevronRight","ChevronLast","PAGE_SIZES","s","items","RotateCw","ta","i","Icon","e","DataTableFilter","SearchField","direction","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","tableCellStyle","isSticky","TableComponent","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","cell","TableCell","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","lf","filterKeys","PopoverTrigger","o","Filter","Popover","field","sf","op","_","TfDatePicker","TfIdSearchInput","Trash","k","type","defaultValue","t","newFilter"],"mappings":"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"}
+{"version":3,"file":"data-table.js","sources":["../../lib/components/data-table.tsx","../../lib/components/data-table-filter.tsx"],"sourcesContent":["'use client';\nimport type { operations } from '@cryptlex/web-api-types';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n    type AccessorFnColumnDef,\n    type Column,\n    type ColumnDef,\n    type ColumnOrderState,\n    createColumnHelper,\n    getCoreRowModel,\n    type RowSelectionState,\n    type TableState,\n    type Updater,\n    useReactTable,\n    type VisibilityState,\n} from '@tanstack/react-table';\nimport { useLocalStorage } from '@uidotdev/usehooks';\nimport { ArrowDownNarrowWide, ArrowDownWideNarrow, ArrowUpDown, Columns3, GripVertical, Info } from 'lucide-react';\nimport { createContext, useContext, useEffect, useId, useMemo, useState } from 'react';\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = 'tableActions';\n\ntype DataTableFactory<T extends object, TOperation extends keyof operations> = {\n    callback: TableFetchFn<T>;\n    columns: ColumnDef<T, any>[];\n    allowSelection?: boolean;\n    columnsToHideByDefault?: Partial<Record<keyof T, boolean>>; // Columns that are hidden by default\n    filterConfig: FiltersConfig<TOperation>;\n    initialFilters: TableFilter[];\n};\n\ntype DataTableState = Pick<TableState, 'sorting' | 'pagination'> & {};\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<T extends object, TOperation extends keyof operations>({\n    columns,\n    callback,\n    filterConfig,\n    columnsToHideByDefault = {},\n    allowSelection = false,\n    initialFilters = [],\n}: DataTableFactory<T, TOperation>) {\n    const id = useId();\n\n    const [tableState, _setTableState] = useState<DataTableState>({\n        /** TODO Reflect in URL  */\n        pagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n        sorting: [], // Sorting state\n    });\n    //\n    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n    /** TODO Reflect in URL  */\n    const [searchQuery, setSearchQuery] = useState('');\n\n    const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>('ctx_column_order_preference', []);\n    const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>(\n        'ctx_column_visibility_preference',\n        {\n            id: false,\n            updatedAt: false,\n            ...columnsToHideByDefault,\n        }\n    );\n\n    const [filters, setFilters] = useState(initialFilters);\n\n    const mergedFilters = useMemo(() => {\n        // TODO, generic transform fn\n        return filters\n            .map(tf => {\n                if (Array.isArray(tf.value)) {\n                    return {\n                        [tf.property]: {\n                            [tf.operator]: tf.value.join(','),\n                        },\n                    };\n                }\n                return {\n                    [tf.property]: {\n                        [tf.operator]: tf.value,\n                    },\n                };\n            })\n            .reduce((acc, current) => {\n                return merge(acc, current);\n            }, {});\n    }, [filters]);\n\n    // Update table state with new values\n    const updateTableState = (updates: Partial<DataTableState>) => {\n        _setTableState(prev => ({ ...prev, ...updates }));\n    };\n\n    const { sorting, pagination } = tableState;\n\n    const query = useQuery({\n        queryKey: [id, pagination, sorting, searchQuery, mergedFilters],\n        queryFn: () => callback(pagination, sorting, searchQuery, mergedFilters),\n        placeholderData: keepPreviousData, // Keep previous data while loading new data\n        retry: 0,\n        refetchOnWindowFocus: false,\n    });\n\n    const columnHelper = useMemo(() => createColumnHelper<any>(), []);\n\n    const metadataColumns = useMemo<AccessorFnColumnDef<any, string>[]>(() => {\n        const data = query.data?.data;\n        if (!data?.length) return [];\n\n        type WithMeta = T & { metadata: ApiSchema<'MetadataDto'>[] };\n        const rowHasMetadata = (row: Record<string, any>): row is WithMeta =>\n            row != null && typeof row === 'object' && 'metadata' in row && Array.isArray(row.metadata);\n\n        const rowsWithMeta = data.filter(rowHasMetadata);\n        if (rowsWithMeta.length === 0) return [];\n        const keys: string[] = Array.from(new Set(rowsWithMeta.flatMap(r => r.metadata?.map(m => m.key) ?? [])));\n\n        return keys.map(key =>\n            columnHelper.accessor(\n                row => {\n                    if (rowHasMetadata(row)) {\n                        return row?.metadata?.find(m => m.key === key)?.value ?? '';\n                    }\n                    return '';\n                },\n                {\n                    id: key,\n                    header: key, // tooltip header\n                    enableSorting: false,\n                    cell: info => {\n                        const value = info.getValue();\n                        // Handle null/undefined values\n                        if (value === null || value === undefined) return '';\n                        // For primitive types, return the string representation\n                        return String(value);\n                    },\n                }\n            )\n        );\n    }, [query.data?.data]);\n\n    /**\n     * ID,createdAt and updatedAt will be added by default for all tables\n     * If selection is allowed, checkbox will be added\n     * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n     * If there are actions for the table, they will be placed fixed at the right side of table.\n     */\n    const cols: ColumnDef<any, any>[] = [\n        ...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n        ...TABLE_ID_COLUMN,\n        ...columns.filter(col => col.id !== ACTIONS_COLUMN_ID),\n        ...(metadataColumns.length ? metadataColumns : []),\n        ...TABLE_DEFAULT_DATE_COLUMNS,\n        // Actions column\n        ...columns.filter(col => col.id === ACTIONS_COLUMN_ID),\n    ];\n\n    // Type-guard for updater\n    function isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n        return typeof updater === 'function';\n    }\n    // Utility function to resolve updater\n    function resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n        if (isUpdaterFunction(updater)) {\n            return updater(currentValue);\n        }\n        return updater;\n    }\n\n    // Use react-table's hook to create the table instance\n    const tanTable = useReactTable({\n        data: query.data?.data ?? [],\n        columns: cols,\n        getCoreRowModel: getCoreRowModel(),\n        rowCount: query.data?.total,\n        manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n        onPaginationChange: updater => {\n            updateTableState({ pagination: resolveUpdater(updater, pagination) });\n        },\n        manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n        onSortingChange: updater => {\n            setRowSelection({});\n            updateTableState({ sorting: [...resolveUpdater(updater, sorting)] }); // Reset selection when sorting.\n        },\n        manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n        onColumnVisibilityChange: updater => {\n            setColumnVisibility(resolveUpdater(updater, columnVisibility));\n        },\n        onRowSelectionChange: updater => {\n            setRowSelection(resolveUpdater(updater, rowSelection));\n        },\n        onColumnOrderChange: updater => {\n            setColumnOrder(resolveUpdater(updater, columnOrder));\n        },\n        state: {\n            sorting: sorting,\n            columnVisibility: columnVisibility,\n            pagination: pagination,\n            rowSelection: rowSelection,\n            columnOrder: columnOrder,\n        },\n        meta: {\n            refetch: query.refetch,\n        },\n    });\n\n    // By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n    // This populates the columnIds in the columnOrder state\n    useEffect(() => {\n        setColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);\n    }, []);\n\n    return {\n        tableState,\n        updateTableState,\n        query,\n        setSearchQuery,\n        searchQuery,\n        tanTable,\n        mergedFilters,\n        filters,\n        setFilters,\n        filterConfig,\n    };\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n\nexport const useDataTable = () => {\n    const ctx = useContext(DataTableContext);\n    if (!ctx) {\n        throw Error('DataTable should be used within DataTableProvider.');\n    }\n    return ctx;\n};\n\nexport function DataTableProvider({\n    children,\n    ...props\n}: { children: React.ReactNode } & ReturnType<typeof useDataTableState>) {\n    return <DataTableContext.Provider value={props}>{children}</DataTableContext.Provider>;\n}\n\nexport type DataTableProps = React.ComponentProps<'section'> & {\n    tableActions: TableAction[];\n};\nexport function DataTable({ tableActions, className, ...props }: DataTableProps) {\n    const { query, tanTable } = useDataTable();\n\n    return (\n        <>\n            {/* Table Actions Section */}\n            <section {...props} className={classNames('flex flex-col bg-card', className)}>\n                <Actions tableActions={tableActions} />\n                {/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n                <div className=\"w-full overflow-auto border-x grow min-h-table relative\" tabIndex={0}>\n                    {/* Table overlay with loader */}\n                    {query.isLoading && (\n                        <TableOverlay className=\"cursor-wait\">\n                            <Loader />\n                        </TableOverlay>\n                    )}\n                    {/* Table overlay for empty table */}\n                    {!query.isLoading && tanTable.getRowModel().rows.length === 0 && (\n                        // Empty table\n                        <TableOverlay className=\"cursor-not-allowed\">\n                            {!query.isFetching &&\n                                (query.isError ? (\n                                    <span className=\"flex gap-3 justify-center items-center\">\n                                        {/* TODO (mudasir-pandith) Check for 403 explicitly!! */}\n                                        {/* <span>{query.error}</span> */}\n                                        <Info />\n                                        <span>{query.error.message}</span>\n                                    </span>\n                                ) : query.data?.data?.length === 0 ? (\n                                    <>No results found.</>\n                                ) : (\n                                    <>Unknown error. Please contact customer support.</>\n                                ))}\n                        </TableOverlay>\n                    )}\n                    {!query.isLoading && tanTable.getRowModel().rows.length !== 0 && (\n                        <TableContent className=\"size-full\" />\n                    )}\n                </div>\n\n                {/* Table Footer Section with Pagination and Column Picker */}\n                <div className=\"flex w-full justify-between border gap-icon p-icon overflow-x-auto\">\n                    <div className=\"flex gap-icon\">\n                        <ColumnPicker />\n                        <PageSize />\n                    </div>\n                    <Paginator />\n                </div>\n            </section>\n        </>\n    );\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({ children, className }: { children: React.ReactNode; className?: string }) {\n    return (\n        <>\n            <span\n                className={classNames(\n                    className,\n                    'absolute top-0 bg-card z-20 size-full body-sm flex items-center justify-center'\n                )}\n            >\n                {children}\n            </span>\n            {/* Keep something in document flow with the correct height */}\n            <span className=\"relative h-full w-0 block\" />\n        </>\n    );\n}\n\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    useSortable,\n    verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\nfunction ColumnPicker() {\n    const { tanTable } = useDataTable();\n    const [activeId, setActiveId] = useState<string | null>(null);\n\n    const resourceFormatter = useResourceFormatter();\n\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n    return (\n        <DndContext\n            sensors={sensors}\n            collisionDetection={closestCenter}\n            onDragStart={event => {\n                const { active } = event;\n                setActiveId(active.id.toString());\n            }}\n            onDragEnd={event => {\n                const { active, over } = event;\n\n                if (over && active.id !== over.id) {\n                    const columnOrder = tanTable.getState().columnOrder;\n                    const oldIndex = columnOrder.indexOf(active.id.toString());\n                    const newIndex = columnOrder.indexOf(over.id.toString());\n                    tanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n                }\n\n                setActiveId(null);\n            }}\n        >\n            <SortableContext items={tanTable.getState().columnOrder} strategy={verticalListSortingStrategy}>\n                <EasyMenu\n                    label={\n                        <>\n                            <Columns3 />\n                            Columns\n                        </>\n                    }\n                    selectionMode=\"multiple\"\n                    items={tanTable.getAllFlatColumns()}\n                    selectedKeys={\n                        tanTable.getIsAllColumnsVisible() ? 'all' : tanTable.getVisibleFlatColumns().map(c => c.id)\n                    }\n                >\n                    <MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>\n                        (select all)\n                    </MenuItem>\n                    {tanTable.getState().columnOrder.map(colId => {\n                        const col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n                        if (!col) return null;\n                        return <SortableItem key={col.id} column={col} />;\n                    })}\n                </EasyMenu>\n                <DragOverlay>\n                    {activeId ? (\n                        <div className=\"opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div>\n                    ) : null}\n                </DragOverlay>\n            </SortableContext>\n        </DndContext>\n    );\n\n    function SortableItem({ column }: { column: Column<any, unknown> }) {\n        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });\n        const style = {\n            transform: CSS.Transform.toString(transform),\n            transition,\n            zIndex: '999',\n        };\n        return (\n            <MenuItem\n                ref={setNodeRef}\n                style={style}\n                {...attributes}\n                id={column.id}\n                onAction={() => column.toggleVisibility()}\n                isDisabled={!column.getCanHide()}\n                className=\"flex items-center\"\n            >\n                <GripVertical {...listeners} className=\"size-icon cursor-grab\" />\n                {resourceFormatter(column.id)}\n                {column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n            </MenuItem>\n        );\n    }\n}\n\nimport { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from 'lucide-react';\n\nfunction Paginator() {\n    const { tanTable, query } = useDataTable();\n    const rowCount = query.data?.total ?? 0;\n    return (\n        <div className=\"flex items-center gap-2\">\n            <span className=\"whitespace-nowrap body-sm text-muted\">\n                {`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n                    (tanTable.getState().pagination.pageIndex + 1) * tanTable.getState().pagination.pageSize,\n                    rowCount\n                )} of ${rowCount?.toLocaleString()}`}\n            </span>\n\n            <Button\n                onPress={() => tanTable.firstPage()}\n                isDisabled={!tanTable.getCanPreviousPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <ChevronFirst />\n            </Button>\n            <Button\n                onPress={() => tanTable.previousPage()}\n                isDisabled={!tanTable.getCanPreviousPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <ChevronLeft />\n            </Button>\n            <Button\n                onPress={() => tanTable.nextPage()}\n                isDisabled={!tanTable.getCanNextPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <ChevronRight />\n            </Button>\n            <Button\n                onClick={() => tanTable.lastPage()}\n                isDisabled={!tanTable.getCanNextPage()}\n                variant=\"neutral\"\n                size={'icon'}\n            >\n                <ChevronLast />\n            </Button>\n        </div>\n    );\n}\n\nfunction PageSize() {\n    const { tanTable } = useDataTable();\n    const PAGE_SIZES = [10, 20, 30, 40, 50];\n\n    return (\n        <EasyMenu\n            label={tanTable.getState().pagination.pageSize.toString()}\n            selectionMode=\"single\"\n            selectedKeys={[tanTable.getState().pagination.pageSize.toString()]}\n            items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}\n        >\n            {items => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>}\n        </EasyMenu>\n    );\n}\n\nimport { RotateCw } from 'lucide-react';\n\nfunction Actions({ tableActions }: { tableActions: TableAction[] }) {\n    const { query, tanTable, searchQuery, setSearchQuery } = useDataTable();\n\n    return (\n        <section className=\"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto\">\n            <div className=\"flex gap-icon\">\n                <Button isPending={query.isFetching} onClick={() => query.refetch()} variant={'neutral'} size={'icon'}>\n                    <RotateCw />\n                </Button>\n\n                {tableActions\n                    .filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)\n                    .map((ta, i) => {\n                        const Icon = ta.icon;\n                        return (\n                            <Button\n                                key={`${i}-${ta.bulk}`}\n                                type=\"button\"\n                                isDisabled={query.isFetching}\n                                className=\"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform\"\n                                onPress={e => {\n                                    ta.onClick(e, tanTable);\n                                }}\n                                size={'icon'}\n                            >\n                                <Icon />\n                            </Button>\n                        );\n                    })}\n            </div>\n            <div className=\"flex gap-icon\">\n                <DataTableFilter />\n                {<SearchField value={searchQuery} onChange={setSearchQuery} />}\n            </div>\n        </section>\n    );\n}\n\nimport {\n    closestCenter,\n    DndContext,\n    DragOverlay,\n    KeyboardSensor,\n    PointerSensor,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport { flexRender } from '@tanstack/react-table';\nimport { merge } from 'lodash-es';\nimport { Button } from '../components/button';\nimport {\n    type ApiSchema,\n    TABLE_CHECK_BOX_COLUMN,\n    TABLE_DEFAULT_DATE_COLUMNS,\n    TABLE_ID_COLUMN,\n    type TableAction,\n    type TableFetchFn,\n} from '../components/data-table-commons';\nimport { DataTableFilter, type FiltersConfig, type TableFilter } from '../components/data-table-filter';\nimport { Loader } from '../components/loader';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport { SearchField } from '../components/searchfield';\nimport { TableBody, TableCell, Table as TableComponent, TableHead, TableHeader, TableRow } from '../components/table';\nimport { classNames } from '../utils/primitives';\nimport { useResourceFormatter } from '../utils/resource-names';\n\nfunction SortIcon({\n    direction,\n    ...props\n}: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n    if (direction === 'asc') return <ArrowDownNarrowWide {...props} />;\n    else if (direction === 'desc') return <ArrowDownWideNarrow {...props} />;\n    else return <ArrowUpDown {...props} />;\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n    const { tanTable } = useDataTable();\n    const tableCellStyle = (isSticky: boolean, className?: string) =>\n        classNames(\n            'animate-in fade-in slide-in-from-top-10',\n            'px-icon py-2 text-left body-sm font-medium whitespace-nowrap',\n            isSticky && 'bg-card sticky right-0 z-50 text-center',\n            className\n        );\n    return (\n        <TableComponent className={classNames(className)}>\n            <TableHeader className=\"sticky top-0 z-10\">\n                {tanTable.getHeaderGroups().map(headerGroup => (\n                    <TableRow className={classNames('h-input')} key={headerGroup.id}>\n                        {headerGroup.headers.map(header => (\n                            <TableHead key={header.id} className={tableCellStyle(false, 'bg-card')}>\n                                {!header.column.getCanSort() && !header.isPlaceholder && (\n                                    <>{flexRender(header.column.columnDef.header, header.getContext())}</>\n                                )}\n                                {/* TODO Align header text with table text */}\n                                {header.column.getCanSort() && (\n                                    <Button\n                                        variant=\"ghost\"\n                                        className=\"w-full !justify-start !px-1.5\"\n                                        onPress={header.column.getToggleSortingHandler()}\n                                    >\n                                        {flexRender(header.column.columnDef.header, header.getContext())}\n                                        <SortIcon direction={header.column.getIsSorted()} />\n                                    </Button>\n                                )}\n                            </TableHead>\n                        ))}\n                    </TableRow>\n                ))}\n            </TableHeader>\n            <TableBody className=\"flex-1 overflow-y-auto relative\">\n                {tanTable.getRowModel().rows.map(row => (\n                    <TableRow\n                        className={classNames(\n                            'h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20'\n                        )}\n                        key={row.id}\n                        data-selected={row.getIsSelected()}\n                    >\n                        {row.getVisibleCells().map(cell => (\n                            <TableCell key={cell.id} className={tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID)}>\n                                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                            </TableCell>\n                        ))}\n                    </TableRow>\n                ))}\n            </TableBody>\n        </TableComponent>\n    );\n}\n","'use client';\nimport type { operations } from '@cryptlex/web-api-types';\nimport type { CalendarDateTime } from '@internationalized/date';\nimport { Filter, Trash } from 'lucide-react';\nimport { useRef } from 'react';\nimport { Button } from '../components/button';\nimport { useDataTable } from '../components/data-table';\nimport { type ApiFilters } from '../components/data-table-commons';\nimport { TfDatePicker } from '../components/date-picker';\nimport { TfIdSearchInput } from '../components/id-search';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { MultiSelectProps } from '../components/multi-select';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { useAppForm } from '../utils/form-hook';\nimport { classNames } from '../utils/primitives';\nimport { useResourceFormatter } from '../utils/resource-names';\n\nexport const FILTER_COMPARISON_OPERATORS = [\n    'eq',\n    'ne',\n    'cn',\n    'nc',\n    'sw',\n    'ew',\n    'in',\n    'nin',\n    'gt',\n    'gte',\n    'lt',\n    'lte',\n] as const;\nexport type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string> = {\n    eq: 'equal to',\n    ne: 'not equal to',\n    cn: 'contains',\n    nc: 'does not contain',\n    sw: 'starts with',\n    ew: 'ends with',\n    in: 'includes',\n    nin: 'does not include',\n    gt: 'greater than',\n    gte: 'greater than or equal to',\n    lt: 'less than',\n    lte: 'less than or equal to',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n    id: string;\n    type: T;\n    property: string;\n    operator: FilterComparisonOperator;\n    value: V | undefined;\n    displayValue?: string;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string | number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype DateLocalFilter = BaseLocalFilter<'date', CalendarDateTime>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', Set<string | number>>;\n\nexport type TableFilter =\n    | EnumLocalFilter\n    | IdLocalFilter\n    | BoolLocalFilter\n    | StringLocalFilter\n    | DateLocalFilter\n    | IdSearchLocalFilter;\n\nexport type FilterConfig =\n    | { type: 'enum'; options: MultiSelectProps['items'] }\n    | { type: 'id-search'; search: () => Promise<{ id: string; name: string }[]> }\n    | { type: 'id' }\n    | { type: 'bool' }\n    | { type: 'string' }\n    | { type: 'date' };\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n    bool: ['eq'],\n    enum: ['in', 'nin'],\n    id: ['in', 'nin'],\n    'id-search': ['in', 'nin'],\n    string: ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n    date: ['lt', 'gt'],\n};\n\nexport type FiltersConfig<TOperation extends keyof operations> = Required<\n    Record<keyof ApiFilters<TOperation>, FilterConfig>\n>;\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n    const { filters, query, setFilters, filterConfig } = useDataTable();\n    // TODO @mudasirpandith add focus\n    // const localFilterRefs = useRef([]);\n    const addFilterButtonRef = useRef<HTMLButtonElement>(null);\n\n    const resourceFormatter = useResourceFormatter();\n\n    const DEFAULT_VALUES: { filters: TableFilter[] } = {\n        filters,\n    };\n    const form = useAppForm({\n        defaultValues: DEFAULT_VALUES,\n        onSubmit: ({ value }) => {\n            setFilters(value.filters);\n        },\n    });\n\n    // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870\n    const filterKeys = Object.keys(filterConfig).sort();\n\n    return (\n        <section {...props} className={classNames('flex gap-icon items-center', className)}>\n            <PopoverTrigger\n                onOpenChange={o => {\n                    // Set filters when the popover closes\n                    if (!o) {\n                        form.handleSubmit();\n                    } else {\n                        addFilterButtonRef.current?.focus();\n                    }\n                }}\n            >\n                <div className=\"relative\">\n                    {filters.length > 0 && (\n                        <div className=\"size-2 rounded-full absolute bg-destructive z-20 top-0 right-0 translate-x-0.5 -translate-y-0.5\"></div>\n                    )}\n                    <Button\n                        isDisabled={query.isPending || filterKeys.length === 0}\n                        type=\"button\"\n                        size={'icon'}\n                        variant={'neutral'}\n                    >\n                        <Filter />\n                    </Button>\n                </div>\n                {/* TODO, icon maps with dynamic imports? */}\n                {/* TODO open popover with form for property specific filter */}\n                {/* TODO, icons here??? */}\n                <Popover className=\"w-full p-icon\">\n                    <form\n                        onSubmit={e => {\n                            e.preventDefault();\n                        }}\n                        className=\"flex flex-col gap-icon max-h-table overflow-auto \"\n                    >\n                        <form.Field mode=\"array\" name={'filters'}>\n                            {field => {\n                                return (\n                                    <>\n                                        {field.state.value.map((lf, i) => {\n                                            return (\n                                                <div key={lf.id} className=\"flex gap-icon items-center justify-normal\">\n                                                    <span className=\"body-sm\">{resourceFormatter(lf.property)}</span>\n                                                    <form.AppField key={lf.id} name={`filters[${i}].operator`}>\n                                                        {sf => (\n                                                            <sf.TfSingleSelect\n                                                                items={FilterOperations[lf.type].map(op => ({\n                                                                    id: op,\n                                                                    label: <>{COMPARISON_OPERATOR_LABELS[op]}</>,\n                                                                }))}\n                                                            />\n                                                        )}\n                                                    </form.AppField>\n\n                                                    {lf.type === 'bool' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfCheckbox />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'date' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {_ => <TfDatePicker />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'id' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfTextField />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {lf.type === 'string' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => <sf.TfTextField />}\n                                                        </form.AppField>\n                                                    )}\n                                                    {/* TODO fix @mudasirpandith */}\n                                                    {/* @ts-ignore */}\n                                                    {lf.type === 'enum' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {sf => (\n                                                                <sf.TfMultiSelect\n                                                                    // @ts-ignore\n                                                                    items={filterConfig[lf.property].options}\n                                                                />\n                                                            )}\n                                                        </form.AppField>\n                                                    )}\n                                                    {/* TODO fix @mudasirpandith */}\n                                                    {/* @ts-ignore */}\n                                                    {lf.type === 'id-search' && (\n                                                        <form.AppField name={`filters[${i}].value`}>\n                                                            {_ => (\n                                                                <TfIdSearchInput\n                                                                    multiple\n                                                                    accessor=\"id\"\n                                                                    // @ts-ignore\n                                                                    searchFn={filterConfig[lf.property].search}\n                                                                />\n                                                            )}\n                                                        </form.AppField>\n                                                    )}\n\n                                                    <Button\n                                                        type=\"button\"\n                                                        variant=\"destructive\"\n                                                        size=\"icon\"\n                                                        onPress={() => field.removeValue(i)}\n                                                    >\n                                                        <Trash />\n                                                    </Button>\n                                                </div>\n                                            );\n                                        })}\n                                        <div className=\"flex w-full items-center justify-end gap-2 not-first:mt-icon\">\n                                            <EasyMenu label=\"Add Filter\">\n                                                {filterKeys.map(k => (\n                                                    <MenuItem\n                                                        key={k}\n                                                        onAction={() => {\n                                                            // TODO @mudasirpandith\n                                                            //@ts-ignore\n                                                            const type = filterConfig[k].type as FilterType;\n\n                                                            const defaultValue = (t: FilterType) => {\n                                                                // TODO, ensure exhaustive???\n                                                                // @mudasirpandith\n                                                                switch (t) {\n                                                                    case 'bool':\n                                                                        return true;\n                                                                    case 'string':\n                                                                        return '';\n                                                                    case 'date':\n                                                                        return new Date().toISOString();\n                                                                    case 'id':\n                                                                        return '';\n                                                                    case 'id-search':\n                                                                        return [] as string[];\n                                                                    case 'enum':\n                                                                        return [] as string[];\n                                                                }\n                                                            };\n\n                                                            const newFilter: TableFilter = {\n                                                                id: `${k}-${Date.now()}`,\n                                                                operator: FilterOperations[type][0],\n                                                                // TODO\n                                                                //@ts-ignore\n                                                                value: defaultValue(type),\n                                                                type: type,\n                                                                property: k,\n                                                            };\n\n                                                            field.pushValue(newFilter);\n                                                            // TODO Focus to ref\n                                                        }}\n                                                    >\n                                                        {resourceFormatter(k)}\n                                                    </MenuItem>\n                                                ))}\n                                            </EasyMenu>\n                                            {field.state.value.length > 0 ? (\n                                                <Button\n                                                    type=\"button\"\n                                                    variant=\"neutral\"\n                                                    onPress={() => {\n                                                        field.setValue([]);\n                                                    }}\n                                                >\n                                                    Reset filters\n                                                </Button>\n                                            ) : null}\n                                        </div>\n                                    </>\n                                );\n                            }}\n                        </form.Field>\n                    </form>\n                </Popover>\n            </PopoverTrigger>\n        </section>\n    );\n}\n"],"names":["ACTIONS_COLUMN_ID","useDataTableState","columns","callback","filterConfig","columnsToHideByDefault","allowSelection","initialFilters","id","useId","tableState","_setTableState","useState","rowSelection","setRowSelection","searchQuery","setSearchQuery","columnOrder","setColumnOrder","useLocalStorage","columnVisibility","setColumnVisibility","filters","setFilters","mergedFilters","useMemo","tf","acc","current","merge","updateTableState","updates","prev","sorting","pagination","query","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","data","rowHasMetadata","row","rowsWithMeta","r","m","key","info","value","cols","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","isUpdaterFunction","updater","resolveUpdater","currentValue","tanTable","useReactTable","getCoreRowModel","useEffect","c","DataTableContext","createContext","useDataTable","ctx","useContext","DataTableProvider","children","props","DataTable","tableActions","className","jsx","Fragment","classNames","Actions","jsxs","TableOverlay","Loader","Info","TableContent","ColumnPicker","PageSize","Paginator","activeId","setActiveId","resourceFormatter","useResourceFormatter","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","arrayMove","SortableContext","verticalListSortingStrategy","EasyMenu","Columns3","MenuItem","colId","SortableItem","DragOverlay","column","attributes","listeners","setNodeRef","transform","transition","useSortable","style","CSS","GripVertical","SortIcon","rowCount","Button","ChevronFirst","ChevronLeft","ChevronRight","ChevronLast","PAGE_SIZES","s","items","RotateCw","ta","i","Icon","e","DataTableFilter","SearchField","direction","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","tableCellStyle","isSticky","TableComponent","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","cell","TableCell","FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","FilterOperations","addFilterButtonRef","useRef","form","useAppForm","filterKeys","PopoverTrigger","o","Filter","Popover","field","lf","sf","op","_","TfDatePicker","TfIdSearchInput","Trash","k","type","defaultValue","t","newFilter"],"mappings":"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"}

package/dist/components/date-picker.d.ts

@@ -1,6 +1,6 @@
 import { DatePickerProps as AriaDatePickerProps, DateRangePickerProps as AriaDateRangePickerProps, DateValue as AriaDateValue } from 'react-aria-components';
 import { ZonedDateTime } from '@internationalized/date';
-import { FormFieldProps } from 'lib/components/field';
+import { FormFieldProps } from '../components/field';
 interface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {
 }
 export declare function DatePicker<T extends AriaDateValue>({ label, description, errorMessage, className, ...props }: DatePickerProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker.js

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as e}from"react/jsx-runtime";import{CalendarIcon as p}from"lucide-react";import{DatePicker as x,composeRenderProps as c,DateRangePicker as v,Popover as D,Dialog as N}from"react-aria-components";import{parseAbsolute as P,getLocalTimeZone as k}from"@internationalized/date";import{Button as u}from"./button.js";import{Calendar as C,RangeCalendar as F}from"./calendar.js";import{DateInput as m}from"./datefield.js";import{FormField as f,FieldGroup as g}from"./field.js";import{useFieldContext as R}from"../utils/form-context.js";import{classNames as n,getFieldErrorMessage as d}from"../utils/primitives.js";import"class-variance-authority";import"./loader.js";import"react";import"@tanstack/react-form";import"clsx";const h=({className:a,popoverClassName:r,...o})=>e(D,{className:c(r,t=>n("w-auto p-3",t)),children:e(N,{className:n("flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",a),...o})});function b({label:a,description:r,errorMessage:o,className:t,...l}){return i(x,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(f,{label:a,description:r,errorMessage:o,children:i(g,{"aria-label":a,children:[e(m,{className:"flex-1",variant:"ghost"}),e(u,{variant:"ghost",size:"icon",className:"-me-2 ms-2",children:e(p,{"aria-hidden":!0})})]})}),e(h,{children:e(C,{})})]})}function q({...a}){const r=R();return e(b,{hideTimeZone:!0,value:r.state.value?P(r.state.value,k()):null,onChange:o=>o?r.handleChange(o.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function H({label:a,description:r,errorMessage:o,className:t,...l}){return i(v,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(f,{label:a,errorMessage:o,description:r,children:i(g,{children:[e(m,{variant:"ghost",slot:"start"}),e("span",{"aria-hidden":!0,className:"px-2 body-sm text-muted-foreground",children:"-"}),e(m,{className:"flex-1",variant:"ghost",slot:"end"}),e(u,{variant:"ghost",size:"icon",className:"mr-1 data-[focus-visible]:ring-offset-0",children:e(p,{"aria-hidden":!0})})]})}),e(h,{children:e(F,{})})]})}export{b as DatePicker,H as DateRangePicker,q as TfDatePicker};
+import{jsxs as i,jsx as e}from"react/jsx-runtime";import{CalendarIcon as p}from"lucide-react";import{DatePicker as x,composeRenderProps as c,DateRangePicker as v,Popover as D,Dialog as N}from"react-aria-components";import{parseAbsolute as P,getLocalTimeZone as k}from"@internationalized/date";import{Button as u}from"./button.js";import{Calendar as C,RangeCalendar as F}from"./calendar.js";import{DateInput as m}from"./datefield.js";import{FormField as f,FieldGroup as g}from"./field.js";import{useFieldContext as R}from"../utils/form-context.js";import{classNames as n,getFieldErrorMessage as d}from"../utils/primitives.js";import"class-variance-authority";import"./loader.js";import"react";import"@tanstack/react-form";import"clsx";import"lodash-es";const h=({className:a,popoverClassName:r,...o})=>e(D,{className:c(r,t=>n("w-auto p-3",t)),children:e(N,{className:n("flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",a),...o})});function b({label:a,description:r,errorMessage:o,className:t,...l}){return i(x,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(f,{label:a,description:r,errorMessage:o,children:i(g,{"aria-label":a,children:[e(m,{className:"flex-1",variant:"ghost"}),e(u,{variant:"ghost",size:"icon",className:"-me-2 ms-2",children:e(p,{"aria-hidden":!0})})]})}),e(h,{children:e(C,{})})]})}function H({...a}){const r=R();return e(b,{hideTimeZone:!0,value:r.state.value?P(r.state.value,k()):null,onChange:o=>o?r.handleChange(o.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function J({label:a,description:r,errorMessage:o,className:t,...l}){return i(v,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(f,{label:a,errorMessage:o,description:r,children:i(g,{children:[e(m,{variant:"ghost",slot:"start"}),e("span",{"aria-hidden":!0,className:"px-2 body-sm text-muted-foreground",children:"-"}),e(m,{className:"flex-1",variant:"ghost",slot:"end"}),e(u,{variant:"ghost",size:"icon",className:"mr-1 data-[focus-visible]:ring-offset-0",children:e(p,{"aria-hidden":!0})})]})}),e(h,{children:e(F,{})})]})}export{b as DatePicker,J as DateRangePicker,H as TfDatePicker};
 //# sourceMappingURL=date-picker.js.map

package/dist/components/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["import { CalendarIcon } from 'lucide-react';\nimport {\n    DatePicker as AriaDatePicker,\n    DatePickerProps as AriaDatePickerProps,\n    DateRangePicker as AriaDateRangePicker,\n    DateRangePickerProps as AriaDateRangePickerProps,\n    DateValue as AriaDateValue,\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    PopoverProps as AriaPopoverProps,\n    composeRenderProps,\n    Popover,\n} from 'react-aria-components';\n\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { Button } from 'lib/components/button';\nimport { Calendar, RangeCalendar } from 'lib/components/calendar';\nimport { DateInput } from 'lib/components/datefield';\nimport { FieldGroup, FormField, type FormFieldProps } from 'lib/components/field';\nimport { useFieldContext } from 'lib/utils/form-context';\nimport { classNames, getFieldErrorMessage } from 'lib/utils/primitives';\n\nconst DatePickerContent = ({\n    className,\n    popoverClassName,\n    ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps['className'] }) => (\n    <Popover className={composeRenderProps(popoverClassName, className => classNames('w-auto p-3', className))}>\n        <AriaDialog\n            className={classNames(\n                'flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0',\n                className\n            )}\n            {...props}\n        />\n    </Popover>\n);\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps { }\n\nexport function DatePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: DatePickerProps<T>) {\n    return (\n        <AriaDatePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <FieldGroup aria-label={label}>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" />\n                    <Button variant=\"ghost\" size=\"icon\" className={'-me-2 ms-2'}>\n                        <CalendarIcon aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <Calendar />\n            </DatePickerContent>\n        </AriaDatePicker>\n    );\n}\n\nexport function TfDatePicker({\n    ...props\n}: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n    const field = useFieldContext<string | null>();\n    return (\n        <DatePicker\n            hideTimeZone\n            value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n            onChange={v => (v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null))}\n            onBlur={field.handleBlur}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps { }\nexport function DateRangePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: DateRangePickerProps<T>) {\n    return (\n        <AriaDateRangePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField label={label} errorMessage={errorMessage} description={description}>\n                <FieldGroup>\n                    <DateInput variant=\"ghost\" slot={'start'} />\n                    <span aria-hidden className=\"px-2 body-sm text-muted-foreground\">\n                        -\n                    </span>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" slot={'end'} />\n                    <Button variant=\"ghost\" size=\"icon\" className=\"mr-1 data-[focus-visible]:ring-offset-0\">\n                        <CalendarIcon aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <RangeCalendar />\n            </DatePickerContent>\n        </AriaDateRangePicker>\n    );\n}\n"],"names":["DatePickerContent","className","popoverClassName","props","jsx","Popover","composeRenderProps","classNames","AriaDialog","DatePicker","label","description","errorMessage","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","CalendarIcon","Calendar","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"8tBAsBA,MAAMA,EAAoB,CAAC,CACvB,UAAAC,EACA,iBAAAC,EACA,GAAGC,CACP,IACIC,EAACC,EAAA,CAAQ,UAAWC,EAAmBJ,EAAkBD,GAAaM,EAAW,aAAcN,CAAS,CAAC,EACrG,SAAAG,EAACI,EAAA,CACG,UAAWD,EACP,iFACAN,CAAA,EAEH,GAAGE,CAAA,CACR,EACJ,EAKG,SAASM,EAAoC,CAChD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAAuB,CACnB,OACIU,EAACC,EAAA,CACG,UAAWR,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,GAAU,MAAAL,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAC,EAACG,EAAA,CAAW,aAAYN,EACpB,SAAA,CAAAN,EAACa,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,EAC9Cb,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAAd,EAACe,EAAA,CAAa,cAAW,EAAA,CAAC,CAAA,CAC9B,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAACgB,EAAA,CAAA,CAAS,CAAA,CACd,CAAA,CAAA,CAAA,CAGZ,CAEO,SAASC,EAAa,CACzB,GAAGlB,CACP,EAAyG,CACrG,MAAMmB,EAAQC,EAAA,EACd,OACInB,EAACK,EAAA,CACG,aAAY,GACZ,MAAOa,EAAM,MAAM,MAAQE,EAAcF,EAAM,MAAM,MAAOG,EAAA,CAAkB,EAAI,KAClF,SAAUC,GAAMA,EAAIJ,EAAM,aAAaI,EAAE,kBAAkB,EAAIJ,EAAM,aAAa,IAAI,EACtF,OAAQA,EAAM,WACd,UAAW,CAAC,CAACK,EAAqBL,CAAK,EACvC,aAAcK,EAAqBL,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGhB,CAGO,SAASyB,EAAyC,CACrD,MAAAlB,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAA4B,CACxB,OACIU,EAACgB,EAAA,CACG,UAAWvB,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,EAAA,CAAU,MAAAL,EAAc,aAAAE,EAA4B,YAAAD,EACjD,WAACK,EAAA,CACG,SAAA,CAAAZ,EAACa,EAAA,CAAU,QAAQ,QAAQ,KAAM,QAAS,IACzC,OAAA,CAAK,cAAW,GAAC,UAAU,qCAAqC,SAAA,IAEjE,IACCA,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,KAAM,MAAO,EAC3Db,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAAd,EAACe,EAAA,CAAa,cAAW,EAAA,CAAC,CAAA,CAC9B,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAAC0B,EAAA,CAAA,CAAc,CAAA,CACnB,CAAA,CAAA,CAAA,CAGZ"}
+{"version":3,"file":"date-picker.js","sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["import { CalendarIcon } from 'lucide-react';\nimport {\n    DatePicker as AriaDatePicker,\n    DatePickerProps as AriaDatePickerProps,\n    DateRangePicker as AriaDateRangePicker,\n    DateRangePickerProps as AriaDateRangePickerProps,\n    DateValue as AriaDateValue,\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    PopoverProps as AriaPopoverProps,\n    composeRenderProps,\n    Popover,\n} from 'react-aria-components';\n\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { Button } from '../components/button';\nimport { Calendar, RangeCalendar } from '../components/calendar';\nimport { DateInput } from '../components/datefield';\nimport { FieldGroup, FormField, type FormFieldProps } from '../components/field';\nimport { useFieldContext } from '../utils/form-context';\nimport { classNames, getFieldErrorMessage } from '../utils/primitives';\n\nconst DatePickerContent = ({\n    className,\n    popoverClassName,\n    ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps['className'] }) => (\n    <Popover className={composeRenderProps(popoverClassName, className => classNames('w-auto p-3', className))}>\n        <AriaDialog\n            className={classNames(\n                'flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0',\n                className\n            )}\n            {...props}\n        />\n    </Popover>\n);\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {}\n\nexport function DatePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: DatePickerProps<T>) {\n    return (\n        <AriaDatePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <FieldGroup aria-label={label}>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" />\n                    <Button variant=\"ghost\" size=\"icon\" className={'-me-2 ms-2'}>\n                        <CalendarIcon aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <Calendar />\n            </DatePickerContent>\n        </AriaDatePicker>\n    );\n}\n\nexport function TfDatePicker({\n    ...props\n}: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n    const field = useFieldContext<string | null>();\n    return (\n        <DatePicker\n            hideTimeZone\n            value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n            onChange={v => (v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null))}\n            onBlur={field.handleBlur}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {}\nexport function DateRangePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: DateRangePickerProps<T>) {\n    return (\n        <AriaDateRangePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField label={label} errorMessage={errorMessage} description={description}>\n                <FieldGroup>\n                    <DateInput variant=\"ghost\" slot={'start'} />\n                    <span aria-hidden className=\"px-2 body-sm text-muted-foreground\">\n                        -\n                    </span>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" slot={'end'} />\n                    <Button variant=\"ghost\" size=\"icon\" className=\"mr-1 data-[focus-visible]:ring-offset-0\">\n                        <CalendarIcon aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <RangeCalendar />\n            </DatePickerContent>\n        </AriaDateRangePicker>\n    );\n}\n"],"names":["DatePickerContent","className","popoverClassName","props","jsx","Popover","composeRenderProps","classNames","AriaDialog","DatePicker","label","description","errorMessage","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","CalendarIcon","Calendar","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"gvBAsBA,MAAMA,EAAoB,CAAC,CACvB,UAAAC,EACA,iBAAAC,EACA,GAAGC,CACP,IACIC,EAACC,EAAA,CAAQ,UAAWC,EAAmBJ,EAAkBD,GAAaM,EAAW,aAAcN,CAAS,CAAC,EACrG,SAAAG,EAACI,EAAA,CACG,UAAWD,EACP,iFACAN,CAAA,EAEH,GAAGE,CAAA,CACR,EACJ,EAKG,SAASM,EAAoC,CAChD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAAuB,CACnB,OACIU,EAACC,EAAA,CACG,UAAWR,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,GAAU,MAAAL,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAC,EAACG,EAAA,CAAW,aAAYN,EACpB,SAAA,CAAAN,EAACa,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,EAC9Cb,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAAd,EAACe,EAAA,CAAa,cAAW,EAAA,CAAC,CAAA,CAC9B,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAACgB,EAAA,CAAA,CAAS,CAAA,CACd,CAAA,CAAA,CAAA,CAGZ,CAEO,SAASC,EAAa,CACzB,GAAGlB,CACP,EAAyG,CACrG,MAAMmB,EAAQC,EAAA,EACd,OACInB,EAACK,EAAA,CACG,aAAY,GACZ,MAAOa,EAAM,MAAM,MAAQE,EAAcF,EAAM,MAAM,MAAOG,EAAA,CAAkB,EAAI,KAClF,SAAUC,GAAMA,EAAIJ,EAAM,aAAaI,EAAE,kBAAkB,EAAIJ,EAAM,aAAa,IAAI,EACtF,OAAQA,EAAM,WACd,UAAW,CAAC,CAACK,EAAqBL,CAAK,EACvC,aAAcK,EAAqBL,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGhB,CAGO,SAASyB,EAAyC,CACrD,MAAAlB,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAA4B,CACxB,OACIU,EAACgB,EAAA,CACG,UAAWvB,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,EAAA,CAAU,MAAAL,EAAc,aAAAE,EAA4B,YAAAD,EACjD,WAACK,EAAA,CACG,SAAA,CAAAZ,EAACa,EAAA,CAAU,QAAQ,QAAQ,KAAM,QAAS,IACzC,OAAA,CAAK,cAAW,GAAC,UAAU,qCAAqC,SAAA,IAEjE,IACCA,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,KAAM,MAAO,EAC3Db,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAAd,EAACe,EAAA,CAAa,cAAW,EAAA,CAAC,CAAA,CAC9B,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAAC0B,EAAA,CAAA,CAAc,CAAA,CACnB,CAAA,CAAA,CAAA,CAGZ"}

package/dist/components/datefield.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{DateSegment as u,composeRenderProps as i,DateInput as m,DateField as f,TimeField as p}from"react-aria-components";import{classNames as o}from"../utils/primitives.js";import{fieldGroupVariants as g,FormField as c}from"./field.js";import"clsx";import"class-variance-authority";import"lucide-react";function v({className:t,...a}){return e(u,{className:i(t,d=>o("inline caret-transparent outline-0","data-[placeholder]:text-muted-foreground","disabled-muted","data-[focused]:bg-accent data-[focused]:text-accent-foreground","data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive",d)),...a})}function s({className:t,variant:a,...d}){return e(m,{className:i(t,r=>o(g({variant:a}),"body-sm",r)),...d,children:r=>e(v,{segment:r})})}function I({label:t,description:a,className:d,errorMessage:r,...n}){return e(f,{className:i(d,l=>o("group form-field",l)),...n,children:e(c,{label:t,description:a,errorMessage:r,children:e(s,{})})})}function S({label:t,description:a,errorMessage:d,className:r,...n}){return e(p,{className:i(r,l=>o("group form-field",l)),...n,children:e(c,{label:t,description:a,errorMessage:d,children:e(s,{})})})}export{I as DateField,s as DateInput,v as DateSegment,S as TimeField};
+"use client";import{jsx as e}from"react/jsx-runtime";import{DateSegment as u,composeRenderProps as i,DateInput as m,DateField as f,TimeField as p}from"react-aria-components";import{classNames as o}from"../utils/primitives.js";import{fieldGroupVariants as g,FormField as c}from"./field.js";import"clsx";import"lodash-es";import"class-variance-authority";import"lucide-react";function v({className:t,...a}){return e(u,{className:i(t,d=>o("inline caret-transparent outline-0","data-[placeholder]:text-muted-foreground","disabled-muted","data-[focused]:bg-accent data-[focused]:text-accent-foreground","data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive",d)),...a})}function s({className:t,variant:a,...d}){return e(m,{className:i(t,r=>o(g({variant:a}),"body-sm",r)),...d,children:r=>e(v,{segment:r})})}function S({label:t,description:a,className:d,errorMessage:r,...n}){return e(f,{className:i(d,l=>o("group form-field",l)),...n,children:e(c,{label:t,description:a,errorMessage:r,children:e(s,{})})})}function T({label:t,description:a,errorMessage:d,className:r,...n}){return e(p,{className:i(r,l=>o("group form-field",l)),...n,children:e(c,{label:t,description:a,errorMessage:d,children:e(s,{})})})}export{S as DateField,s as DateInput,v as DateSegment,T as TimeField};
 //# sourceMappingURL=datefield.js.map

package/dist/components/datefield.js.map

@@ -1 +1 @@
-{"version":3,"file":"datefield.js","sources":["../../lib/components/datefield.tsx"],"sourcesContent":["'use client';\n\nimport { VariantProps } from 'class-variance-authority';\nimport {\n    DateField as AriaDateField,\n    DateFieldProps as AriaDateFieldProps,\n    DateInput as AriaDateInput,\n    DateInputProps as AriaDateInputProps,\n    DateSegment as AriaDateSegment,\n    DateSegmentProps as AriaDateSegmentProps,\n    DateValue as AriaDateValue,\n    TimeField as AriaTimeField,\n    TimeFieldProps as AriaTimeFieldProps,\n    TimeValue as AriaTimeValue,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from 'lib/utils/primitives';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './field';\n\nexport function DateSegment({ className, ...props }: AriaDateSegmentProps) {\n    return (\n        <AriaDateSegment\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'inline caret-transparent outline-0',\n                    /* Placeholder */\n                    'data-[placeholder]:text-muted-foreground',\n                    /* Disabled */\n                    'disabled-muted',\n                    /* Focused */\n                    'data-[focused]:bg-accent data-[focused]:text-accent-foreground',\n                    /* Invalid */\n                    'data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\ninterface DateInputProps extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> { }\n\nexport function DateInput({ className, variant, ...props }: Omit<DateInputProps, 'children'>) {\n    return (\n        <AriaDateInput\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), 'body-sm', className)\n            )}\n            {...props}\n        >\n            {segment => <DateSegment segment={segment} />}\n        </AriaDateInput>\n    );\n}\n\ninterface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps { }\n\nexport function DateField<T extends AriaDateValue>({\n    label,\n    description,\n    className,\n    errorMessage,\n    ...props\n}: DateFieldProps<T>) {\n    return (\n        <AriaDateField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <DateInput />\n            </FormField>\n        </AriaDateField>\n    );\n}\n\ninterface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps { }\n\nexport function TimeField<T extends AriaTimeValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: TimeFieldProps<T>) {\n    return (\n        <AriaTimeField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <DateInput />\n            </FormField>\n        </AriaTimeField>\n    );\n}\n"],"names":["DateSegment","className","props","jsx","AriaDateSegment","composeRenderProps","classNames","DateInput","variant","AriaDateInput","fieldGroupVariants","segment","DateField","label","description","errorMessage","AriaDateField","FormField","TimeField","AriaTimeField"],"mappings":"oWAoBO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACvE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,qCAEA,2CAEA,iBAEA,iEAEA,yQACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAIO,SAASK,EAAU,CAAE,UAAAN,EAAW,QAAAO,EAAS,GAAGN,GAA2C,CAC1F,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWI,EAAmB,CAAE,QAAAF,CAAA,CAAS,EAAG,UAAWP,CAAS,CAAA,EAEnE,GAAGC,EAEH,SAAAS,GAAWR,EAACH,EAAA,CAAY,QAAAW,CAAA,CAAkB,CAAA,CAAA,CAGvD,CAIO,SAASC,EAAmC,CAC/C,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,GAAGb,CACP,EAAsB,CAClB,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ,CAIO,SAASW,EAAmC,CAC/C,MAAAL,EACA,YAAAC,EACA,aAAAC,EACA,UAAAd,EACA,GAAGC,CACP,EAAsB,CAClB,OACIC,EAACgB,EAAA,CACG,UAAWd,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ"}
+{"version":3,"file":"datefield.js","sources":["../../lib/components/datefield.tsx"],"sourcesContent":["'use client';\n\nimport { VariantProps } from 'class-variance-authority';\nimport {\n    DateField as AriaDateField,\n    DateFieldProps as AriaDateFieldProps,\n    DateInput as AriaDateInput,\n    DateInputProps as AriaDateInputProps,\n    DateSegment as AriaDateSegment,\n    DateSegmentProps as AriaDateSegmentProps,\n    DateValue as AriaDateValue,\n    TimeField as AriaTimeField,\n    TimeFieldProps as AriaTimeFieldProps,\n    TimeValue as AriaTimeValue,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utils/primitives';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './field';\n\nexport function DateSegment({ className, ...props }: AriaDateSegmentProps) {\n    return (\n        <AriaDateSegment\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'inline caret-transparent outline-0',\n                    /* Placeholder */\n                    'data-[placeholder]:text-muted-foreground',\n                    /* Disabled */\n                    'disabled-muted',\n                    /* Focused */\n                    'data-[focused]:bg-accent data-[focused]:text-accent-foreground',\n                    /* Invalid */\n                    'data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\ninterface DateInputProps extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {}\n\nexport function DateInput({ className, variant, ...props }: Omit<DateInputProps, 'children'>) {\n    return (\n        <AriaDateInput\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), 'body-sm', className)\n            )}\n            {...props}\n        >\n            {segment => <DateSegment segment={segment} />}\n        </AriaDateInput>\n    );\n}\n\ninterface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps {}\n\nexport function DateField<T extends AriaDateValue>({\n    label,\n    description,\n    className,\n    errorMessage,\n    ...props\n}: DateFieldProps<T>) {\n    return (\n        <AriaDateField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <DateInput />\n            </FormField>\n        </AriaDateField>\n    );\n}\n\ninterface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {}\n\nexport function TimeField<T extends AriaTimeValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: TimeFieldProps<T>) {\n    return (\n        <AriaTimeField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <DateInput />\n            </FormField>\n        </AriaTimeField>\n    );\n}\n"],"names":["DateSegment","className","props","jsx","AriaDateSegment","composeRenderProps","classNames","DateInput","variant","AriaDateInput","fieldGroupVariants","segment","DateField","label","description","errorMessage","AriaDateField","FormField","TimeField","AriaTimeField"],"mappings":"sXAoBO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACvE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,qCAEA,2CAEA,iBAEA,iEAEA,yQACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAIO,SAASK,EAAU,CAAE,UAAAN,EAAW,QAAAO,EAAS,GAAGN,GAA2C,CAC1F,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWI,EAAmB,CAAE,QAAAF,CAAA,CAAS,EAAG,UAAWP,CAAS,CAAA,EAEnE,GAAGC,EAEH,SAAAS,GAAWR,EAACH,EAAA,CAAY,QAAAW,CAAA,CAAkB,CAAA,CAAA,CAGvD,CAIO,SAASC,EAAmC,CAC/C,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,GAAGb,CACP,EAAsB,CAClB,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ,CAIO,SAASW,EAAmC,CAC/C,MAAAL,EACA,YAAAC,EACA,aAAAC,EACA,UAAAd,EACA,GAAGC,CACP,EAAsB,CAClB,OACIC,EAACgB,EAAA,CACG,UAAWd,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ"}

package/dist/components/dialog.js

@@ -1,2 +1,2 @@
-import{jsx as a,jsxs as s,Fragment as f}from"react/jsx-runtime";import{cva as c}from"class-variance-authority";import{DialogTrigger as u,ModalOverlay as x,composeRenderProps as l,Modal as p,Dialog as h,Heading as b}from"react-aria-components";import{Button as v}from"./button.js";import{classNames as i}from"../utils/primitives.js";import{X as y}from"lucide-react";import"./loader.js";import"clsx";const N=c(["fixed z-50 gap-4 bg-popover transition ease-in-out","data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:"inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4  border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),M=u,O=({className:t,isDismissable:e=!0,...n})=>a(x,{isDismissable:e,className:l(t,o=>i("fixed inset-0 z-50 bg-popover/20","data-[exiting]:duration-100 data-[exiting]:animate-out","data-[entering]:animate-in",o)),...n});function P({className:t,children:e,side:n,role:o,closeButton:d=!0,...g}){return a(p,{className:l(t,r=>i(n?N({side:n,className:"h-full p-6"}):["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-popover p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full"],r)),...g,children:a(h,{role:o,className:i(!n&&"grid h-full gap-4 relative","h-full outline-none"),children:l(e,(r,m)=>s(f,{children:[r,d&&a("div",{className:"absolute right-1 top-1",children:s(v,{size:"icon",variant:"destructive",onPress:m.close,className:"opacity-70 transition-opacity data-[hovered]:opacity-100",children:[a(y,{}),a("span",{className:"sr-only",children:"Close"})]})})]}))})})}function k({className:t,...e}){return a("div",{className:i("flex flex-col gap-y-2 text-center sm:text-left",t),...e})}function B({className:t,...e}){return a("div",{className:i("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",t),...e})}function R({className:t,...e}){return a(b,{slot:"title",className:i("heading-3 font-semibold leading-none tracking-tight",t),...e})}function V({className:t,...e}){return a("p",{className:i("flex flex-col gap-y-1 text-center sm:text-left",t),...e})}export{P as DialogContent,V as DialogDescription,B as DialogFooter,k as DialogHeader,O as DialogOverlay,R as DialogTitle,M as DialogTrigger};
+import{jsx as a,jsxs as s,Fragment as f}from"react/jsx-runtime";import{cva as c}from"class-variance-authority";import{DialogTrigger as u,ModalOverlay as x,composeRenderProps as l,Modal as p,Dialog as h,Heading as b}from"react-aria-components";import{X as v}from"lucide-react";import{Button as y}from"./button.js";import{classNames as i}from"../utils/primitives.js";import"./loader.js";import"clsx";import"lodash-es";const N=c(["fixed z-50 gap-icon bg-popover transition ease-in-out","data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:"inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4  border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),O=u,P=({className:t,isDismissable:e=!0,...o})=>a(x,{isDismissable:e,className:l(t,n=>i("fixed inset-0 z-50 bg-popover/20","data-[exiting]:duration-100 data-[exiting]:animate-out","data-[entering]:animate-in",n)),...o});function k({className:t,children:e,side:o,role:n,closeButton:d=!0,...g}){return a(p,{className:l(t,r=>i(o?N({side:o,className:"h-full p-6"}):["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-popover p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full"],r)),...g,children:a(h,{role:n,className:i(!o&&"grid h-full gap-icon relative","h-full outline-none"),children:l(e,(r,m)=>s(f,{children:[r,d&&a("div",{className:"absolute right-1 top-1",children:s(y,{size:"icon",variant:"destructive",onPress:m.close,className:"opacity-70 transition-opacity data-[hovered]:opacity-100",children:[a(v,{}),a("span",{className:"sr-only",children:"Close"})]})})]}))})})}function B({className:t,...e}){return a("div",{className:i("flex flex-col gap-y-2 text-center sm:text-left",t),...e})}function R({className:t,...e}){return a("div",{className:i("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",t),...e})}function V({className:t,...e}){return a(b,{slot:"title",className:i("heading-3 font-semibold leading-none tracking-tight",t),...e})}function X({className:t,...e}){return a("p",{className:i("flex flex-col gap-y-1 text-center sm:text-left",t),...e})}export{k as DialogContent,X as DialogDescription,R as DialogFooter,B as DialogHeader,P as DialogOverlay,V as DialogTitle,O as DialogTrigger};
 //# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Heading as AriaHeading,\n    HeadingProps as AriaHeadingProps,\n    Modal as AriaModal,\n    ModalOverlay as AriaModalOverlay,\n    ModalOverlayProps as AriaModalOverlayProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from 'lib/components/button';\nimport { classNames } from 'lib/utils/primitives';\nimport { X } from 'lucide-react';\n\nconst sheetVariants = cva(\n    [\n        'fixed z-50 gap-4 bg-popover transition ease-in-out',\n        'data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0',\n    ],\n    {\n        variants: {\n            side: {\n                top: 'inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n                bottom: 'inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table',\n                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm',\n                right: 'inset-y-0 right-0 h-full w-3/4  border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm',\n            },\n        },\n    }\n);\n\nexport const DialogTrigger = AriaDialogTrigger;\n\nexport const DialogOverlay = ({ className, isDismissable = true, ...props }: AriaModalOverlayProps) => (\n    <AriaModalOverlay\n        isDismissable={isDismissable}\n        className={composeRenderProps(className, className =>\n            classNames(\n                'fixed inset-0 z-50 bg-popover/20',\n                /* Exiting */\n                'data-[exiting]:duration-100 data-[exiting]:animate-out',\n                /* Entering */\n                'data-[entering]:animate-in',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\nexport interface DialogContentProps\n    extends Omit<React.ComponentProps<typeof AriaModal>, 'children'>,\n    VariantProps<typeof sheetVariants> {\n    children?: AriaDialogProps['children'];\n    role?: AriaDialogProps['role'];\n    closeButton?: boolean;\n}\n\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n    return (\n        <AriaModal\n            className={composeRenderProps(className, className =>\n                classNames(\n                    side\n                        ? sheetVariants({ side, className: 'h-full p-6' })\n                        : [\n                            'fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-popover p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full',\n                        ],\n                    className\n                )\n            )}\n            {...props}\n        >\n            <AriaDialog\n                role={role}\n                className={classNames(!side && 'grid h-full gap-4 relative', 'h-full outline-none')}\n            >\n                {composeRenderProps(children, (children, renderProps) => (\n                    <>\n                        {children}\n                        {closeButton && (\n                            <div className=\"absolute right-1 top-1\">\n                                <Button\n                                    size={'icon'}\n                                    variant={'destructive'}\n                                    onPress={renderProps.close}\n                                    className=\"opacity-70 transition-opacity data-[hovered]:opacity-100\"\n                                >\n                                    <X />\n                                    <span className=\"sr-only\">Close</span>\n                                </Button>\n                            </div>\n                        )}\n                    </>\n                ))}\n            </AriaDialog>\n        </AriaModal>\n    );\n}\n\nexport function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return <div className={classNames('flex flex-col gap-y-2 text-center sm:text-left', className)} {...props} />;\n}\n\nexport function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return (\n        <div\n            className={classNames('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', className)}\n            {...props}\n        />\n    );\n}\n\nexport function DialogTitle({ className, ...props }: AriaHeadingProps) {\n    return (\n        <AriaHeading\n            slot=\"title\"\n            className={classNames('heading-3 font-semibold leading-none tracking-tight', className)}\n            {...props}\n        />\n    );\n}\n\nexport function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {\n    return <p className={classNames('flex flex-col gap-y-1 text-center sm:text-left', className)} {...props} />;\n}\n"],"names":["sheetVariants","cva","DialogTrigger","AriaDialogTrigger","DialogOverlay","className","isDismissable","props","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogContent","children","side","role","closeButton","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","X","DialogHeader","DialogFooter","DialogTitle","AriaHeading","DialogDescription"],"mappings":"8YAiBA,MAAMA,EAAgBC,EAClB,CACI,qDACA,qKAAA,EAEJ,CACI,SAAU,CACN,KAAM,CACF,IAAK,yGACL,OAAQ,kHACR,KAAM,yHACN,MAAO,4HAAA,CACX,CACJ,CAER,EAEaC,EAAgBC,EAEhBC,EAAgB,CAAC,CAAE,UAAAC,EAAW,cAAAC,EAAgB,GAAM,GAAGC,KAChEC,EAACC,EAAA,CACG,cAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,mCAEA,yDAEA,6BACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR,EAWG,SAASK,EAAc,CAAE,UAAAP,EAAW,SAAAQ,EAAU,KAAAC,EAAM,KAAAC,EAAM,YAAAC,EAAc,GAAM,GAAGT,GAA6B,CACjH,OACIC,EAACS,EAAA,CACG,UAAWP,EAAmBL,EAAWA,GACrCM,EACIG,EACMd,EAAc,CAAE,KAAAc,EAAM,UAAW,YAAA,CAAc,EAC/C,CACE,8TAAA,EAERT,CAAA,CACJ,EAEH,GAAGE,EAEJ,SAAAC,EAACU,EAAA,CACG,KAAAH,EACA,UAAWJ,EAAW,CAACG,GAAQ,6BAA8B,qBAAqB,EAEjF,SAAAJ,EAAmBG,EAAU,CAACA,EAAUM,IACrCC,EAAAC,EAAA,CACK,SAAA,CAAAR,EACAG,GACGR,EAAC,MAAA,CAAI,UAAU,yBACX,SAAAY,EAACE,EAAA,CACG,KAAM,OACN,QAAS,cACT,QAASH,EAAY,MACrB,UAAU,2DAEV,SAAA,CAAAX,EAACe,EAAA,EAAE,EACHf,EAAC,OAAA,CAAK,UAAU,UAAU,SAAA,OAAA,CAAK,CAAA,CAAA,CAAA,CACnC,CACJ,CAAA,EAER,CACH,CAAA,CAAA,CACL,CAAA,CAGZ,CAEO,SAASgB,EAAa,CAAE,UAAAnB,EAAW,GAAGE,GAA+C,CACxF,OAAOC,EAAC,OAAI,UAAWG,EAAW,iDAAkDN,CAAS,EAAI,GAAGE,EAAO,CAC/G,CAEO,SAASkB,EAAa,CAAE,UAAApB,EAAW,GAAGE,GAA+C,CACxF,OACIC,EAAC,MAAA,CACG,UAAWG,EAAW,8DAA+DN,CAAS,EAC7F,GAAGE,CAAA,CAAA,CAGhB,CAEO,SAASmB,EAAY,CAAE,UAAArB,EAAW,GAAGE,GAA2B,CACnE,OACIC,EAACmB,EAAA,CACG,KAAK,QACL,UAAWhB,EAAW,sDAAuDN,CAAS,EACrF,GAAGE,CAAA,CAAA,CAGhB,CAEO,SAASqB,EAAkB,CAAE,UAAAvB,EAAW,GAAGE,GAAqD,CACnG,OAAOC,EAAC,KAAE,UAAWG,EAAW,iDAAkDN,CAAS,EAAI,GAAGE,EAAO,CAC7G"}
+{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Heading as AriaHeading,\n    HeadingProps as AriaHeadingProps,\n    Modal as AriaModal,\n    ModalOverlay as AriaModalOverlay,\n    ModalOverlayProps as AriaModalOverlayProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { X } from 'lucide-react';\nimport { Button } from '../components/button';\nimport { classNames } from '../utils/primitives';\n\nconst sheetVariants = cva(\n    [\n        'fixed z-50 gap-icon bg-popover transition ease-in-out',\n        'data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0',\n    ],\n    {\n        variants: {\n            side: {\n                top: 'inset-x-0 top-0 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n                bottom: 'inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table',\n                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm',\n                right: 'inset-y-0 right-0 h-full w-3/4  border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm',\n            },\n        },\n    }\n);\n\nexport const DialogTrigger = AriaDialogTrigger;\n\nexport const DialogOverlay = ({ className, isDismissable = true, ...props }: AriaModalOverlayProps) => (\n    <AriaModalOverlay\n        isDismissable={isDismissable}\n        className={composeRenderProps(className, className =>\n            classNames(\n                'fixed inset-0 z-50 bg-popover/20',\n                /* Exiting */\n                'data-[exiting]:duration-100 data-[exiting]:animate-out',\n                /* Entering */\n                'data-[entering]:animate-in',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\nexport interface DialogContentProps\n    extends Omit<React.ComponentProps<typeof AriaModal>, 'children'>,\n        VariantProps<typeof sheetVariants> {\n    children?: AriaDialogProps['children'];\n    role?: AriaDialogProps['role'];\n    closeButton?: boolean;\n}\n\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n    return (\n        <AriaModal\n            className={composeRenderProps(className, className =>\n                classNames(\n                    side\n                        ? sheetVariants({ side, className: 'h-full p-6' })\n                        : [\n                              'fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-popover p-icon duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full',\n                          ],\n                    className\n                )\n            )}\n            {...props}\n        >\n            <AriaDialog\n                role={role}\n                className={classNames(!side && 'grid h-full gap-icon relative', 'h-full outline-none')}\n            >\n                {composeRenderProps(children, (children, renderProps) => (\n                    <>\n                        {children}\n                        {closeButton && (\n                            <div className=\"absolute right-1 top-1\">\n                                <Button\n                                    size={'icon'}\n                                    variant={'destructive'}\n                                    onPress={renderProps.close}\n                                    className=\"opacity-70 transition-opacity data-[hovered]:opacity-100\"\n                                >\n                                    <X />\n                                    <span className=\"sr-only\">Close</span>\n                                </Button>\n                            </div>\n                        )}\n                    </>\n                ))}\n            </AriaDialog>\n        </AriaModal>\n    );\n}\n\nexport function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return <div className={classNames('flex flex-col gap-y-2 text-center sm:text-left', className)} {...props} />;\n}\n\nexport function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    return (\n        <div\n            className={classNames('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', className)}\n            {...props}\n        />\n    );\n}\n\nexport function DialogTitle({ className, ...props }: AriaHeadingProps) {\n    return (\n        <AriaHeading\n            slot=\"title\"\n            className={classNames('heading-3 font-semibold leading-none tracking-tight', className)}\n            {...props}\n        />\n    );\n}\n\nexport function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {\n    return <p className={classNames('flex flex-col gap-y-1 text-center sm:text-left', className)} {...props} />;\n}\n"],"names":["sheetVariants","cva","DialogTrigger","AriaDialogTrigger","DialogOverlay","className","isDismissable","props","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogContent","children","side","role","closeButton","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","X","DialogHeader","DialogFooter","DialogTitle","AriaHeading","DialogDescription"],"mappings":"gaAiBA,MAAMA,EAAgBC,EAClB,CACI,wDACA,qKAAA,EAEJ,CACI,SAAU,CACN,KAAM,CACF,IAAK,yGACL,OAAQ,kHACR,KAAM,yHACN,MAAO,4HAAA,CACX,CACJ,CAER,EAEaC,EAAgBC,EAEhBC,EAAgB,CAAC,CAAE,UAAAC,EAAW,cAAAC,EAAgB,GAAM,GAAGC,KAChEC,EAACC,EAAA,CACG,cAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,mCAEA,yDAEA,6BACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR,EAWG,SAASK,EAAc,CAAE,UAAAP,EAAW,SAAAQ,EAAU,KAAAC,EAAM,KAAAC,EAAM,YAAAC,EAAc,GAAM,GAAGT,GAA6B,CACjH,OACIC,EAACS,EAAA,CACG,UAAWP,EAAmBL,EAAWA,GACrCM,EACIG,EACMd,EAAc,CAAE,KAAAc,EAAM,UAAW,YAAA,CAAc,EAC/C,CACI,8TAAA,EAEVT,CAAA,CACJ,EAEH,GAAGE,EAEJ,SAAAC,EAACU,EAAA,CACG,KAAAH,EACA,UAAWJ,EAAW,CAACG,GAAQ,gCAAiC,qBAAqB,EAEpF,SAAAJ,EAAmBG,EAAU,CAACA,EAAUM,IACrCC,EAAAC,EAAA,CACK,SAAA,CAAAR,EACAG,GACGR,EAAC,MAAA,CAAI,UAAU,yBACX,SAAAY,EAACE,EAAA,CACG,KAAM,OACN,QAAS,cACT,QAASH,EAAY,MACrB,UAAU,2DAEV,SAAA,CAAAX,EAACe,EAAA,EAAE,EACHf,EAAC,OAAA,CAAK,UAAU,UAAU,SAAA,OAAA,CAAK,CAAA,CAAA,CAAA,CACnC,CACJ,CAAA,EAER,CACH,CAAA,CAAA,CACL,CAAA,CAGZ,CAEO,SAASgB,EAAa,CAAE,UAAAnB,EAAW,GAAGE,GAA+C,CACxF,OAAOC,EAAC,OAAI,UAAWG,EAAW,iDAAkDN,CAAS,EAAI,GAAGE,EAAO,CAC/G,CAEO,SAASkB,EAAa,CAAE,UAAApB,EAAW,GAAGE,GAA+C,CACxF,OACIC,EAAC,MAAA,CACG,UAAWG,EAAW,8DAA+DN,CAAS,EAC7F,GAAGE,CAAA,CAAA,CAGhB,CAEO,SAASmB,EAAY,CAAE,UAAArB,EAAW,GAAGE,GAA2B,CACnE,OACIC,EAACmB,EAAA,CACG,KAAK,QACL,UAAWhB,EAAW,sDAAuDN,CAAS,EACrF,GAAGE,CAAA,CAAA,CAGhB,CAEO,SAASqB,EAAkB,CAAE,UAAAvB,EAAW,GAAGE,GAAqD,CACnG,OAAOC,EAAC,KAAE,UAAWG,EAAW,iDAAkDN,CAAS,EAAI,GAAGE,EAAO,CAC7G"}

package/dist/components/disclosure.d.ts

@@ -1,5 +1,5 @@
 import { DisclosureGroupProps as AriaDisclosureGroupProps, DisclosurePanelProps as AriaDisclosurePanelProps, DisclosureProps as AriaDisclosureProps } from 'react-aria-components';
-import { Button } from 'lib/components/button';
+import { Button } from '../components/button';
 export interface DisclosureProps extends AriaDisclosureProps {
     children: React.ReactNode;
 }

package/dist/components/disclosure.js

@@ -1,2 +1,2 @@
-import{jsx as s,jsxs as l,Fragment as u}from"react/jsx-runtime";import{ChevronDownIcon as c}from"lucide-react";import{useContext as m}from"react";import{DisclosureGroupStateContext as p,Disclosure as d,composeRenderProps as i,DisclosurePanel as f,DisclosureGroup as D}from"react-aria-components";import{Button as b}from"./button.js";import{classNames as n}from"../utils/primitives.js";import"class-variance-authority";import"./loader.js";import"clsx";function C({children:r,className:o,...e}){let t=m(p)!==null;return s(d,{...e,className:i(o,(a,h)=>n("group",t&&"border-0 border-b last:border-b-0",a)),children:r})}function $({children:r,className:o,...e}){return s(b,{slot:"trigger",type:"button",variant:"ghost",className:n("font-light w-full justify-between",o),...e,children:i(r,t=>l(u,{children:[s("span",{children:t}),s(c,{"aria-hidden":!0,className:n("transition-transform duration-200","group-data-[expanded]:rotate-180")})]}))})}function I({children:r,className:o,...e}){return s(f,{...e,className:"overflow-hidden body-sm transition-all",children:s("div",{className:n("pb-icon pt-2",o),children:r})})}function _({children:r,className:o,...e}){return s(D,{...e,className:i(o,(t,a)=>n("",t)),children:r})}export{C as Disclosure,_ as DisclosureGroup,$ as DisclosureHeader,I as DisclosurePanel};
+import{jsx as s,jsxs as l,Fragment as u}from"react/jsx-runtime";import{ChevronDownIcon as c}from"lucide-react";import{useContext as m}from"react";import{DisclosureGroupStateContext as p,Disclosure as d,composeRenderProps as n,DisclosurePanel as f,DisclosureGroup as D}from"react-aria-components";import{Button as b}from"./button.js";import{classNames as i}from"../utils/primitives.js";import"class-variance-authority";import"./loader.js";import"clsx";import"lodash-es";function $({children:r,className:o,...e}){let t=m(p)!==null;return s(d,{...e,className:n(o,(a,h)=>i("group",t&&"border-0 border-b last:border-b-0",a)),children:r})}function I({children:r,className:o,...e}){return s(b,{slot:"trigger",type:"button",variant:"ghost",className:i("font-light w-full justify-between",o),...e,children:n(r,t=>l(u,{children:[s("span",{children:t}),s(c,{"aria-hidden":!0,className:i("transition-transform duration-200","group-data-[expanded]:rotate-180")})]}))})}function _({children:r,className:o,...e}){return s(f,{...e,className:"overflow-hidden body-sm transition-all",children:s("div",{className:i("pb-icon pt-2",o),children:r})})}function B({children:r,className:o,...e}){return s(D,{...e,className:n(o,(t,a)=>i("",t)),children:r})}export{$ as Disclosure,B as DisclosureGroup,I as DisclosureHeader,_ as DisclosurePanel};
 //# sourceMappingURL=disclosure.js.map

package/dist/components/disclosure.js.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure.js","sources":["../../lib/components/disclosure.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-react';\nimport { useContext } from 'react';\nimport {\n    Disclosure as AriaDisclosure,\n    DisclosureGroup as AriaDisclosureGroup,\n    DisclosureGroupProps as AriaDisclosureGroupProps,\n    DisclosurePanel as AriaDisclosurePanel,\n    DisclosurePanelProps as AriaDisclosurePanelProps,\n    DisclosureProps as AriaDisclosureProps,\n    composeRenderProps,\n    DisclosureGroupStateContext,\n} from 'react-aria-components';\n\nimport { Button } from 'lib/components/button';\nimport { classNames } from 'lib/utils/primitives';\n\nexport interface DisclosureProps extends AriaDisclosureProps {\n    children: React.ReactNode;\n}\n\nexport function Disclosure({ children, className, ...props }: DisclosureProps) {\n    let isInGroup = useContext(DisclosureGroupStateContext) !== null;\n    return (\n        <AriaDisclosure\n            {...props}\n            className={composeRenderProps(className, (className, _) =>\n                classNames('group', isInGroup && 'border-0 border-b last:border-b-0', className)\n            )}\n        >\n            {children}\n        </AriaDisclosure>\n    );\n}\n\nexport function DisclosureHeader({ children, className, ...props }: React.ComponentProps<typeof Button>) {\n    return (\n        <Button\n            slot=\"trigger\"\n            type=\"button\"\n            variant={'ghost'}\n            className={classNames('font-light w-full justify-between', className)}\n            {...props}\n        >\n            {composeRenderProps(children, children => (\n                <>\n                    <span>{children}</span>\n                    <ChevronDownIcon\n                        aria-hidden\n                        className={classNames('transition-transform duration-200', 'group-data-[expanded]:rotate-180')}\n                    />\n                </>\n            ))}\n        </Button>\n    );\n}\n\nexport interface DisclosurePanelProps extends AriaDisclosurePanelProps {\n    children: React.ReactNode;\n}\n\nexport function DisclosurePanel({ children, className, ...props }: DisclosurePanelProps) {\n    return (\n        <AriaDisclosurePanel {...props} className={'overflow-hidden body-sm transition-all'}>\n            <div className={classNames('pb-icon pt-2', className)}>{children}</div>\n        </AriaDisclosurePanel>\n    );\n}\n\nexport interface DisclosureGroupProps extends AriaDisclosureGroupProps {\n    children: React.ReactNode;\n}\n\nexport function DisclosureGroup({ children, className, ...props }: DisclosureGroupProps) {\n    return (\n        <AriaDisclosureGroup\n            {...props}\n            className={composeRenderProps(className, (className, _) => classNames('', className))}\n        >\n            {children}\n        </AriaDisclosureGroup>\n    );\n}\n"],"names":["Disclosure","children","className","props","isInGroup","useContext","DisclosureGroupStateContext","jsx","AriaDisclosure","composeRenderProps","_","classNames","DisclosureHeader","Button","jsxs","Fragment","ChevronDownIcon","DisclosurePanel","AriaDisclosurePanel","DisclosureGroup","AriaDisclosureGroup"],"mappings":"mcAoBO,SAASA,EAAW,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,GAA0B,CAC3E,IAAIC,EAAYC,EAAWC,CAA2B,IAAM,KAC5D,OACIC,EAACC,EAAA,CACI,GAAGL,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IACjDC,EAAW,QAASP,GAAa,oCAAqCF,CAAS,CAAA,EAGlF,SAAAD,CAAA,CAAA,CAGb,CAEO,SAASW,EAAiB,CAAE,SAAAX,EAAU,UAAAC,EAAW,GAAGC,GAA8C,CACrG,OACII,EAACM,EAAA,CACG,KAAK,UACL,KAAK,SACL,QAAS,QACT,UAAWF,EAAW,oCAAqCT,CAAS,EACnE,GAAGC,EAEH,SAAAM,EAAmBR,EAAUA,GAC1Ba,EAAAC,EAAA,CACI,SAAA,CAAAR,EAAC,OAAA,CAAM,SAAAN,CAAAA,CAAS,EAChBM,EAACS,EAAA,CACG,cAAW,GACX,UAAWL,EAAW,oCAAqC,kCAAkC,CAAA,CAAA,CACjG,EACJ,CACH,CAAA,CAAA,CAGb,CAMO,SAASM,EAAgB,CAAE,SAAAhB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACW,EAAA,CAAqB,GAAGf,EAAO,UAAW,yCACvC,SAAAI,EAAC,MAAA,CAAI,UAAWI,EAAW,eAAgBT,CAAS,EAAI,SAAAD,EAAS,EACrE,CAER,CAMO,SAASkB,EAAgB,CAAE,SAAAlB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACa,EAAA,CACI,GAAGjB,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IAAMC,EAAW,GAAIT,CAAS,CAAC,EAEnF,SAAAD,CAAA,CAAA,CAGb"}
+{"version":3,"file":"disclosure.js","sources":["../../lib/components/disclosure.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-react';\nimport { useContext } from 'react';\nimport {\n    Disclosure as AriaDisclosure,\n    DisclosureGroup as AriaDisclosureGroup,\n    DisclosureGroupProps as AriaDisclosureGroupProps,\n    DisclosurePanel as AriaDisclosurePanel,\n    DisclosurePanelProps as AriaDisclosurePanelProps,\n    DisclosureProps as AriaDisclosureProps,\n    composeRenderProps,\n    DisclosureGroupStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utils/primitives';\n\nexport interface DisclosureProps extends AriaDisclosureProps {\n    children: React.ReactNode;\n}\n\nexport function Disclosure({ children, className, ...props }: DisclosureProps) {\n    let isInGroup = useContext(DisclosureGroupStateContext) !== null;\n    return (\n        <AriaDisclosure\n            {...props}\n            className={composeRenderProps(className, (className, _) =>\n                classNames('group', isInGroup && 'border-0 border-b last:border-b-0', className)\n            )}\n        >\n            {children}\n        </AriaDisclosure>\n    );\n}\n\nexport function DisclosureHeader({ children, className, ...props }: React.ComponentProps<typeof Button>) {\n    return (\n        <Button\n            slot=\"trigger\"\n            type=\"button\"\n            variant={'ghost'}\n            className={classNames('font-light w-full justify-between', className)}\n            {...props}\n        >\n            {composeRenderProps(children, children => (\n                <>\n                    <span>{children}</span>\n                    <ChevronDownIcon\n                        aria-hidden\n                        className={classNames('transition-transform duration-200', 'group-data-[expanded]:rotate-180')}\n                    />\n                </>\n            ))}\n        </Button>\n    );\n}\n\nexport interface DisclosurePanelProps extends AriaDisclosurePanelProps {\n    children: React.ReactNode;\n}\n\nexport function DisclosurePanel({ children, className, ...props }: DisclosurePanelProps) {\n    return (\n        <AriaDisclosurePanel {...props} className={'overflow-hidden body-sm transition-all'}>\n            <div className={classNames('pb-icon pt-2', className)}>{children}</div>\n        </AriaDisclosurePanel>\n    );\n}\n\nexport interface DisclosureGroupProps extends AriaDisclosureGroupProps {\n    children: React.ReactNode;\n}\n\nexport function DisclosureGroup({ children, className, ...props }: DisclosureGroupProps) {\n    return (\n        <AriaDisclosureGroup\n            {...props}\n            className={composeRenderProps(className, (className, _) => classNames('', className))}\n        >\n            {children}\n        </AriaDisclosureGroup>\n    );\n}\n"],"names":["Disclosure","children","className","props","isInGroup","useContext","DisclosureGroupStateContext","jsx","AriaDisclosure","composeRenderProps","_","classNames","DisclosureHeader","Button","jsxs","Fragment","ChevronDownIcon","DisclosurePanel","AriaDisclosurePanel","DisclosureGroup","AriaDisclosureGroup"],"mappings":"qdAoBO,SAASA,EAAW,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,GAA0B,CAC3E,IAAIC,EAAYC,EAAWC,CAA2B,IAAM,KAC5D,OACIC,EAACC,EAAA,CACI,GAAGL,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IACjDC,EAAW,QAASP,GAAa,oCAAqCF,CAAS,CAAA,EAGlF,SAAAD,CAAA,CAAA,CAGb,CAEO,SAASW,EAAiB,CAAE,SAAAX,EAAU,UAAAC,EAAW,GAAGC,GAA8C,CACrG,OACII,EAACM,EAAA,CACG,KAAK,UACL,KAAK,SACL,QAAS,QACT,UAAWF,EAAW,oCAAqCT,CAAS,EACnE,GAAGC,EAEH,SAAAM,EAAmBR,EAAUA,GAC1Ba,EAAAC,EAAA,CACI,SAAA,CAAAR,EAAC,OAAA,CAAM,SAAAN,CAAAA,CAAS,EAChBM,EAACS,EAAA,CACG,cAAW,GACX,UAAWL,EAAW,oCAAqC,kCAAkC,CAAA,CAAA,CACjG,EACJ,CACH,CAAA,CAAA,CAGb,CAMO,SAASM,EAAgB,CAAE,SAAAhB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACW,EAAA,CAAqB,GAAGf,EAAO,UAAW,yCACvC,SAAAI,EAAC,MAAA,CAAI,UAAWI,EAAW,eAAgBT,CAAS,EAAI,SAAAD,EAAS,EACrE,CAER,CAMO,SAASkB,EAAgB,CAAE,SAAAlB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACa,EAAA,CACI,GAAGjB,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IAAMC,EAAW,GAAIT,CAAS,CAAC,EAEnF,SAAAD,CAAA,CAAA,CAGb"}