@cryptlex/web-components 5.2.0 → 5.3.0-alpha

package/dist/components/data-table/data-table-filter.d.ts

@@ -0,0 +1,27 @@
+import { OperationKeys } from 'lib/components/data-table/data-table';
+import { ApiFilters } from 'lib/components/data-table/table-commons';
+import { MultiSelectProps } from 'lib/components/inputs/multi-select';
+export declare const FILTER_COMPARISON_OPERATORS: readonly ["eq", "ne", "cn", "nc", "sw", "ew", "in", "nin", "gt", "gte", "lt", "lte"];
+export type FilterComparisonOperator = (typeof FILTER_COMPARISON_OPERATORS)[number];
+export declare const COMPARISON_OPERATOR_LABELS: Record<FilterComparisonOperator, string>;
+export type FilterConfig = {
+    type: 'enum';
+    options: MultiSelectProps['items'];
+} | {
+    type: 'id-search';
+    search: () => Promise<{
+        id: string;
+        name: string;
+    }[]>;
+} | {
+    type: 'id';
+} | {
+    type: 'bool';
+} | {
+    type: 'string';
+} | {
+    type: 'date';
+};
+export type FilterType = FilterConfig['type'];
+export type FiltersConfig<TOperation extends OperationKeys> = Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>;
+export declare function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import"react/jsx-runtime";import{C as w,D as y,F as z}from"./data-table.js";import"../inputs/date-picker.js";import"../inputs/id-search.js";import"../ui/button.js";import"../ui/menu.js";import"../ui/popover.js";import"../../utils/form-hook.js";import"../../utils/primitives.js";import"../../utils/resource-names.js";import"lucide-react";import"react";import"@tanstack/react-query";import"@tanstack/react-table";import"@dnd-kit/sortable";import"@dnd-kit/core";import"@dnd-kit/utilities";import"./table-commons.js";import"date-fns";import"../inputs/checkbox.js";import"react-aria-components";import"../inputs/field.js";import"class-variance-authority";import"clsx";import"../../utils/form-context.js";import"@tanstack/react-form";import"../inputs/searchfield.js";import"../ui/loader.js";import"../ui/table.js";import"lodash-es";import"@internationalized/date";import"../inputs/datefield.js";import"../ui/calendar.js";import"../inputs/select.js";import"../ui/list-box.js";import"../inputs/multi-select.js";import"../inputs/numberfield.js";import"../inputs/textfield.js";export{w as COMPARISON_OPERATOR_LABELS,y as DataTableFilter,z as FILTER_COMPARISON_OPERATORS};
+//# sourceMappingURL=data-table-filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-filter.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/data-table/data-table.d.ts

@@ -0,0 +1,72 @@
+import { components, operations } from '@cryptlex/web-api-types';
+import { ColumnDef, TableState, VisibilityState } from '@tanstack/react-table';
+import { FiltersConfig } from 'lib/components/data-table/data-table-filter';
+import { ApiFilters, ApiSchema, TableActions, TableFetchFn } from 'lib/components/data-table/table-commons';
+/** Reserved name for actions column */
+export declare const ACTIONS_COLUMN_ID = "tableActions";
+export type Schemas = ApiSchema<keyof components['schemas']>;
+export type OperationKeys = keyof operations;
+type DataTableFactory<TData extends Schemas> = {
+    fetchFn: TableFetchFn<TData, OperationKeys>;
+    columns: ColumnDef<TData, any>[];
+    allowSelection?: boolean;
+    columnsToHideByDefault?: VisibilityState;
+    filterConfig: FiltersConfig<OperationKeys>;
+};
+type DataTableState = Pick<TableState, 'sorting' | 'rowSelection' | 'pagination'> & {};
+/**
+ * Hook for handling all data-table state. Used in DataTableContext
+ */
+export declare function useDataTableState<TData extends Schemas>({ columns, fetchFn, columnsToHideByDefault, allowSelection, filterConfig }: DataTableFactory<TData>): {
+    tableState: Pick<TableState, "sorting" | "rowSelection" | "pagination">;
+    updateTableState: (updates: Partial<DataTableState>) => void;
+    query: import('@tanstack/react-query').UseQueryResult<{
+        total: number;
+        data: TData[] | undefined;
+    }, Error>;
+    setSearchQuery: import('react').Dispatch<import('react').SetStateAction<string>>;
+    searchQuery: string;
+    tanTable: import('@tanstack/react-table').Table<any>;
+    mergedFilters: ApiFilters<keyof operations>;
+    filters: ApiFilters<keyof operations>[];
+    setFilters: import('react').Dispatch<import('react').SetStateAction<ApiFilters<keyof operations>[]>>;
+    filterConfig: Required<Record<never, import('lib/components/data-table/data-table-filter').FilterConfig>>;
+};
+export declare const DataTableContext: import('react').Context<{
+    tableState: Pick<TableState, "sorting" | "rowSelection" | "pagination">;
+    updateTableState: (updates: Partial<DataTableState>) => void;
+    query: import('@tanstack/react-query').UseQueryResult<{
+        total: number;
+        data: Schemas[] | undefined;
+    }, Error>;
+    setSearchQuery: import('react').Dispatch<import('react').SetStateAction<string>>;
+    searchQuery: string;
+    tanTable: import('@tanstack/react-table').Table<any>;
+    mergedFilters: ApiFilters<keyof operations>;
+    filters: ApiFilters<keyof operations>[];
+    setFilters: import('react').Dispatch<import('react').SetStateAction<ApiFilters<keyof operations>[]>>;
+    filterConfig: Required<Record<never, import('lib/components/data-table/data-table-filter').FilterConfig>>;
+} | null>;
+export declare const useDataTable: () => {
+    tableState: Pick<TableState, "sorting" | "rowSelection" | "pagination">;
+    updateTableState: (updates: Partial<DataTableState>) => void;
+    query: import('@tanstack/react-query').UseQueryResult<{
+        total: number;
+        data: Schemas[] | undefined;
+    }, Error>;
+    setSearchQuery: import('react').Dispatch<import('react').SetStateAction<string>>;
+    searchQuery: string;
+    tanTable: import('@tanstack/react-table').Table<any>;
+    mergedFilters: ApiFilters<keyof operations>;
+    filters: ApiFilters<keyof operations>[];
+    setFilters: import('react').Dispatch<import('react').SetStateAction<ApiFilters<keyof operations>[]>>;
+    filterConfig: Required<Record<never, import('lib/components/data-table/data-table-filter').FilterConfig>>;
+};
+export declare function DataTableProvider({ children, ...props }: {
+    children: React.ReactNode;
+} & ReturnType<typeof useDataTableState>): import("react/jsx-runtime").JSX.Element;
+export type DataTableProps = React.ComponentProps<'section'> & {
+    tableActions: TableActions;
+};
+export declare function DataTable({ tableActions, className, ...props }: DataTableProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sources":["../../../lib/components/data-table/data-table.tsx","../../../lib/components/data-table/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\ttype AccessorFnColumnDef,\n\ttype Column,\n\ttype ColumnDef,\n\ttype ColumnOrderState,\n\tcreateColumnHelper,\n\tgetCoreRowModel,\n\ttype TableState,\n\ttype Updater,\n\tuseReactTable,\n\ttype 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\";\n\nexport type Schemas = ApiSchema<keyof components['schemas']>;\nexport type OperationKeys = keyof operations;\n\ntype DataTableFactory<TData extends Schemas> = {\n\tfetchFn: TableFetchFn<TData, OperationKeys>;\n\tcolumns: ColumnDef<TData, any>[]\n\tallowSelection?: boolean;\n\tcolumnsToHideByDefault?: VisibilityState; // Columns that are hidden by default\n\tfilterConfig: FiltersConfig<OperationKeys>\n}\n\n\ntype DataTableState = Pick<TableState, 'sorting' | 'rowSelection' | 'pagination'> & {};\n/**\n * Hook for handling all data-table state. Used in DataTableContext\n */\nexport function useDataTableState<TData extends Schemas>({ columns, fetchFn, columnsToHideByDefault = {}, allowSelection = false, filterConfig }: DataTableFactory<TData>) {\n\tconst id = useId();\n\n\t// TODO: Would it be better for this state to be more granular?\n\tconst [tableState, _setTableState] = useState<DataTableState>({\n\t\t/** TODO Reflect in URL  */\n\t\tpagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n\t\tsorting: [], // Sorting state\n\n\t\t/** Ephemeral */\n\t\trowSelection: {}, // Row selection state\n\t});\n\n\t/** TODO Reflect in URL  */\n\tconst [searchQuery, setSearchQuery] = useState('');\n\n\t/** TODO Store on browser as preference */\n\tconst [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])\n\t// TODO Store on browser\n\tconst [columnVisibility, setColumnVisibility] = useState<VisibilityState>({\n\t\tid: false,\n\t\tupdatedAt: false,\n\t\t...columnsToHideByDefault,\n\t});\n\n\tconst [filters, setFilters] = useState<ApiFilters<OperationKeys>[]>([]);\n\n\tconst mergedFilters = useMemo(() => {\n\t\treturn filters.reduce((acc, current) => {\n\t\t\treturn merge(acc, current);\n\t\t}, {});\n\t}, [filters])\n\n\t// Update table state with new values\n\tconst updateTableState = (updates: Partial<DataTableState>) => {\n\t\t_setTableState((prev) => ({ ...prev, ...updates }));\n\t};\n\n\tconst {\n\t\tsorting,\n\t\trowSelection,\n\t\tpagination,\n\t} = tableState;\n\n\tconst query = useQuery({\n\t\tqueryKey: [id, pagination, sorting, searchQuery],\n\t\tqueryFn: () => fetchFn(pagination, sorting, searchQuery, mergedFilters),\n\t\tplaceholderData: keepPreviousData, // Keep previous data while loading new data\n\t\tretry: 0,\n\t\trefetchOnWindowFocus: false,\n\t});\n\n\tuseEffect(() => {\n\t\t// TODO, store in localStorage\n\t}, [columnVisibility])\n\n\tconst columnHelper = useMemo(() => createColumnHelper<TData>(), []);\n\n\tconst metadataColumns = useMemo<AccessorFnColumnDef<TData, string>[]>(() => {\n\t\tconst data = query.data?.data;\n\t\tif (!data?.length) return [];\n\n\t\ttype WithMeta = TData & { metadata: ApiSchema<'MetadataDto'>[] };\n\t\tconst rowHasMetadata = (row: TData): row is WithMeta => row != null &&\n\t\t\ttypeof row === 'object' &&\n\t\t\t'metadata' in row &&\n\t\t\tArray.isArray((row).metadata);\n\n\t\tconst rowsWithMeta = data.filter(\n\t\t\trowHasMetadata\n\t\t);\n\t\tif (rowsWithMeta.length === 0) return [];\n\t\tconst keys = Array.from(new Set(rowsWithMeta.flatMap(r => r.metadata?.map(m => m.key) ?? [])));\n\n\t\treturn keys.map(key =>\n\t\t\tcolumnHelper.accessor(\n\t\t\t\t(row) => {\n\t\t\t\t\tif (rowHasMetadata(row)) {\n\t\t\t\t\t\treturn row?.metadata?.find(m => m.key === key)?.value ?? '';\n\t\t\t\t\t}\n\t\t\t\t\treturn '';\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: key,\n\t\t\t\t\theader: key, // tooltip header\n\t\t\t\t\tenableSorting: false,\n\t\t\t\t\tcell: (info) => {\n\t\t\t\t\t\tconst value = info.getValue();\n\t\t\t\t\t\t// Handle null/undefined values\n\t\t\t\t\t\tif (value === null || value === undefined) return \"\";\n\t\t\t\t\t\t// For primitive types, return the string representation\n\t\t\t\t\t\treturn String(value);\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t));\n\t}, [query.data?.data]);\n\n\t/**\n\t * ID,createdAt and updatedAt will be added by default for all tables\n\t * If selection is allowed, checkbox will be added\n\t * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n\t * If there are actions for the table, they will be placed fixed at the right side of table.\n\t */\n\tconst cols: ColumnDef<any, any>[] = [\n\t\t...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n\t\t...TABLE_ID_COLUMN,\n\t\t...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n\t\t...(metadataColumns.length ? metadataColumns : []),\n\t\t...TABLE_DEFAULT_DATE_COLUMNS,\n\t\t// Actions column\n\t\t...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n\t];\n\n\t// Type-guard for updater\n\tfunction isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n\t\treturn typeof updater === \"function\";\n\t}\n\t// Utility function to resolve updater\n\tfunction resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n\t\tif (isUpdaterFunction(updater)) {\n\t\t\treturn updater(currentValue);\n\t\t}\n\t\treturn updater;\n\t}\n\n\t// Use react-table's hook to create the table instance\n\tconst tanTable = useReactTable({\n\t\tdata: query.data?.data ?? [],\n\t\tcolumns: cols,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\trowCount: query.data?.total,\n\t\tmanualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n\t\tonPaginationChange: (updater) => {\n\t\t\tupdateTableState({ pagination: resolveUpdater(updater, pagination) });\n\t\t},\n\t\tmanualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n\t\tonSortingChange: (updater) => {\n\t\t\tupdateTableState({ sorting: [...resolveUpdater(updater, sorting)], rowSelection: {} }); // Reset selection when sorting.\n\t\t},\n\t\tmanualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n\t\tonColumnVisibilityChange: (updater) => {\n\t\t\tsetColumnVisibility(resolveUpdater(updater, columnVisibility));\n\t\t},\n\t\tonRowSelectionChange: (updater) => {\n\t\t\tupdateTableState({ rowSelection: resolveUpdater(updater, rowSelection) });\n\t\t},\n\t\tonColumnOrderChange: (updater) => {\n\t\t\tsetColumnOrder(resolveUpdater(updater, columnOrder));\n\t\t},\n\t\tstate: {\n\t\t\tsorting: sorting,\n\t\t\tcolumnVisibility: columnVisibility,\n\t\t\tpagination: pagination,\n\t\t\trowSelection: rowSelection,\n\t\t\tcolumnOrder: columnOrder\n\t\t},\n\t\tmeta: {\n\t\t\trefetch: query.refetch,\n\t\t},\n\t});\n\n\t// By default, ColumnDef does not give guarantees of column.id existing. Once useReactTable is called, all columns are assigned IDs.\n\t// This populates the columnIds in the columnOrder state\n\t// TODO, add localStorage access layer for this. \n\tuseEffect(() => {\n\t\tsetColumnOrder([...tanTable.getAllLeafColumns().map(c => c.id)]);\n\t}, [])\n\n\treturn { tableState, updateTableState, query, setSearchQuery, searchQuery, tanTable, mergedFilters, filters, setFilters, filterConfig }\n}\n\nexport const DataTableContext = createContext<ReturnType<typeof useDataTableState> | null>(null);\n\nexport const useDataTable = () => {\n\tconst ctx = useContext(DataTableContext);\n\tif (!ctx) {\n\t\tthrow Error(\"DataTable should be used within DataTableProvider.\")\n\t}\n\treturn ctx;\n}\n\nexport function DataTableProvider({ children, ...props }: { children: React.ReactNode; } & ReturnType<typeof useDataTableState>) {\n\treturn (\n\t\t<DataTableContext.Provider value={props}>\n\t\t\t{children}\n\t\t</DataTableContext.Provider>\n\t)\n}\n\n\nexport type DataTableProps = React.ComponentProps<'section'> & {\n\ttableActions: TableActions;\n\n\t// filterConfig: {\n\t// \tfilters: Record<keyof ApiFilters<TOperation>, 'date' | 'string' | 'known-string' | 'number'>,\n\t// }\n}\nexport function DataTable({\n\ttableActions,\n\tclassName,\n\t...props\n\t// filterableFields,\n}: DataTableProps) {\n\t// State for managing table data and filters\n\tconst { query, tanTable } = useDataTable();\n\n\treturn (\n\t\t<>\n\t\t\t{/* Table Actions Section */}\n\t\t\t<section {...props} className={classNames(\"flex flex-col bg-card\", className)}>\n\t\t\t\t<Actions tableActions={tableActions} />\n\t\t\t\t{/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n\t\t\t\t<div className=\"w-full overflow-auto border-x grow min-h-table relative\" tabIndex={0}>\n\t\t\t\t\t{/* Table overlay with loader */}\n\t\t\t\t\t{query.isLoading && (\n\t\t\t\t\t\t<TableOverlay className=\"cursor-wait\">\n\t\t\t\t\t\t\t<Loader />\n\t\t\t\t\t\t</TableOverlay>\n\t\t\t\t\t)}\n\t\t\t\t\t{/* Table overlay for empty table */}\n\t\t\t\t\t{!query.isLoading && tanTable.getRowModel().rows.length === 0 && (\n\t\t\t\t\t\t// Empty table\n\t\t\t\t\t\t<TableOverlay className=\"cursor-not-allowed\">\n\t\t\t\t\t\t\t{!query.isFetching &&\n\t\t\t\t\t\t\t\t(query.isError ? (\n\t\t\t\t\t\t\t\t\t<span className=\"flex gap-3 justify-center items-center\">\n\t\t\t\t\t\t\t\t\t\t{/* TODO (mudasir-pandith) Check for 403 explicitly!! */}\n\t\t\t\t\t\t\t\t\t\t{/* <span>{query.error}</span> */}\n\t\t\t\t\t\t\t\t\t\t<Info />\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\tYou don't have the required permissions. Please contact your\n\t\t\t\t\t\t\t\t\t\t\tadmin.\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : !query.data?.data ? (\n\t\t\t\t\t\t\t\t\t<>No results found.</>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<>Unknown error. Please contact customer support.</>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TableOverlay>\n\t\t\t\t\t)}\n\t\t\t\t\t{!query.isLoading && tanTable.getRowModel().rows.length !== 0 &&\n\t\t\t\t\t\t<TableContent className=\"size-full\" />}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Table Footer Section with Pagination and Column Picker */}\n\t\t\t\t<div className=\"flex w-full justify-between border gap-icon p-icon overflow-x-auto\">\n\t\t\t\t\t<div className=\"flex gap-icon\">\n\t\t\t\t\t\t<ColumnPicker />\n\t\t\t\t\t\t<PageSize />\n\t\t\t\t\t</div>\n\t\t\t\t\t<Paginator />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n/** Table overlay to be shown for loaders or other messages */\nfunction TableOverlay({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) {\n\treturn (\n\t\t<>\n\t\t\t<span\n\t\t\t\tclassName={classNames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t\"absolute top-0 bg-card z-20 size-full text-sm flex items-center justify-center\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t{/* Keep something in document flow with the correct height */}\n\t\t\t<span className=\"relative h-full w-0 block\" />\n\t\t</>\n\t);\n}\n\nimport {\n\tarrayMove,\n\tSortableContext,\n\tsortableKeyboardCoordinates,\n\tuseSortable,\n\tverticalListSortingStrategy\n} from '@dnd-kit/sortable';\n\nfunction ColumnPicker() {\n\tconst { tanTable } = useDataTable();\n\tconst [activeId, setActiveId] = useState<string | null>(null);\n\n\tconst resourceFormatter = useResourceFormatter();\n\n\tconst sensors = useSensors(\n\t\tuseSensor(PointerSensor),\n\t\tuseSensor(KeyboardSensor, {\n\t\t\tcoordinateGetter: sortableKeyboardCoordinates,\n\t\t})\n\t);\n\treturn (\n\t\t<DndContext\n\t\t\tsensors={sensors}\n\t\t\tcollisionDetection={closestCenter}\n\t\t\tonDragStart={(event) => {\n\t\t\t\tconst { active } = event;\n\t\t\t\tsetActiveId(active.id.toString());\n\t\t\t}}\n\t\t\tonDragEnd={(event) => {\n\t\t\t\tconst { active, over } = event;\n\n\t\t\t\tif (over && active.id !== over.id) {\n\t\t\t\t\tconst columnOrder = tanTable.getState().columnOrder;\n\t\t\t\t\tconst oldIndex = columnOrder.indexOf(active.id.toString());\n\t\t\t\t\tconst newIndex = columnOrder.indexOf(over.id.toString());\n\t\t\t\t\ttanTable.setColumnOrder([...arrayMove(columnOrder, oldIndex, newIndex)]);\n\t\t\t\t}\n\n\t\t\t\tsetActiveId(null);\n\t\t\t}}\n\t\t>\n\t\t\t<SortableContext\n\t\t\t\titems={tanTable.getState().columnOrder}\n\t\t\t\tstrategy={verticalListSortingStrategy}\n\t\t\t>\n\t\t\t\t<EasyMenu label={<><Columns3 />Columns</>} selectionMode=\"multiple\" items={tanTable.getAllFlatColumns()} selectedKeys={tanTable.getIsAllColumnsVisible() ? 'all' : tanTable.getVisibleFlatColumns().map(c => c.id)}>\n\t\t\t\t\t<MenuItem onAction={() => tanTable.toggleAllColumnsVisible()} className={'italic'}>(select all)</MenuItem>\n\t\t\t\t\t{tanTable.getState().columnOrder.map(colId => {\n\t\t\t\t\t\tconst col = tanTable.getAllFlatColumns().find(c => c.id === colId);\n\t\t\t\t\t\tif (!col) return null;\n\t\t\t\t\t\treturn <SortableItem key={col.id} column={col} />\n\t\t\t\t\t})}\n\t\t\t\t</EasyMenu>\n\t\t\t\t<DragOverlay>\n\t\t\t\t\t{activeId ? <div className=\"dropdown-item opacity-70 border-2 border-primary\">{resourceFormatter(activeId)}</div> : null}\n\t\t\t\t</DragOverlay>\n\t\t\t</SortableContext>\n\t\t</DndContext>\n\t);\n\n\n\tfunction SortableItem({ column }: { column: Column<any, unknown> }) {\n\t\tconst {\n\t\t\tattributes,\n\t\t\tlisteners,\n\t\t\tsetNodeRef,\n\t\t\ttransform,\n\t\t\ttransition,\n\t\t} = useSortable({ id: column.id });\n\t\tconst style = {\n\t\t\ttransform: CSS.Transform.toString(transform),\n\t\t\ttransition,\n\t\t\tzIndex: '999'\n\t\t};\n\t\treturn <MenuItem\n\t\t\tref={setNodeRef}\n\t\t\tstyle={style}\n\t\t\t{...attributes}\n\t\t\tid={column.id}\n\t\t\tonAction={() => column.toggleVisibility()}\n\t\t\tisDisabled={!column.getCanHide()} className=\"flex items-center\">\n\t\t\t<GripVertical {...listeners} className=\"size-icon cursor-grab\" />\n\t\t\t{resourceFormatter(column.id)}\n\t\t\t{column.getIsSorted() && <SortIcon className=\"size-icon\" direction={column.getIsSorted()} />}\n\t\t</MenuItem>;\n\t}\n}\n\n\n\nimport {\n\tChevronFirst,\n\tChevronLast,\n\tChevronLeft,\n\tChevronRight,\n} from \"lucide-react\";\n\nfunction Paginator() {\n\tconst { tanTable, query } = useDataTable();\n\tconst rowCount = query.data?.total ?? 0\n\treturn (\n\t\t<div className=\"flex items-center gap-2\">\n\t\t\t<span className=\"whitespace-nowrap caption text-muted\">\n\t\t\t\t{`${tanTable.getState().pagination.pageIndex * tanTable.getState().pagination.pageSize + 1} - ${Math.min(\n\t\t\t\t\t(tanTable.getState().pagination.pageIndex + 1) *\n\t\t\t\t\ttanTable.getState().pagination.pageSize,\n\t\t\t\t\trowCount,\n\t\t\t\t)} of ${rowCount?.toLocaleString()}`}\n\t\t\t</span>\n\n\t\t\t<Button\n\t\t\t\tonPress={() => tanTable.firstPage()}\n\t\t\t\tisDisabled={!tanTable.getCanPreviousPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronFirst /></Button>\n\t\t\t<Button\n\t\t\t\tonPress={() => tanTable.previousPage()}\n\t\t\t\tisDisabled={!tanTable.getCanPreviousPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronLeft /></Button>\n\t\t\t<Button\n\t\t\t\tonPress={() => tanTable.nextPage()}\n\t\t\t\tisDisabled={!tanTable.getCanNextPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronRight /></Button>\n\t\t\t<Button\n\t\t\t\tonClick={() => tanTable.lastPage()}\n\t\t\t\tisDisabled={!tanTable.getCanNextPage()}\n\t\t\t\tvariant=\"neutral\"\n\t\t\t\tsize={\"icon\"}\n\t\t\t><ChevronLast /></Button>\n\t\t</div>\n\t);\n}\n\n\nfunction PageSize() {\n\tconst { tanTable } = useDataTable();\n\tconst PAGE_SIZES = [10, 20, 30, 40, 50];\n\n\treturn (\n\t\t<EasyMenu label={tanTable.getState().pagination.pageSize.toString()} selectionMode=\"single\" selectedKeys={[tanTable.getState().pagination.pageSize.toString()]} items={PAGE_SIZES.map(s => ({ id: s.toString(), value: s }))}>\n\t\t\t{\n\t\t\t\t(items) => <MenuItem onAction={() => tanTable.setPageSize(items.value)}>{items.value}</MenuItem>\n\t\t\t}\n\t\t</EasyMenu>\n\t);\n}\n\n\nimport { RotateCw } from \"lucide-react\";\n\nfunction Actions({ tableActions }: { tableActions: TableActions }) {\n\tconst { query, tanTable, searchQuery, setSearchQuery } = useDataTable();\n\n\treturn (\n\t\t<section className=\"flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto\">\n\t\t\t<div className=\"flex gap-icon\">\n\t\t\t\t<Button\n\t\t\t\t\tisPending={query.isFetching}\n\t\t\t\t\tonClick={() => query.refetch()}\n\t\t\t\t\tvariant={\"neutral\"}\n\t\t\t\t\tsize={\"icon\"}\n\t\t\t\t><RotateCw /></Button>\n\n\t\t\t\t{tableActions\n\t\t\t\t\t.filter(ta => ta.bulk === tanTable.getSelectedRowModel().rows.length > 0)\n\t\t\t\t\t.map((ta, i) => {\n\t\t\t\t\t\tconst Icon = ta.icon;\n\t\t\t\t\t\treturn (<Button key={`${i}-${ta.bulk}`} type=\"button\" isDisabled={query.isFetching} className=\"animate-in fade-in slide-in-from-left-15 duration-300 transition-transform\" onPress={(e) => { ta.onClick(e, tanTable) }} size={'icon'}><Icon /></Button>)\n\t\t\t\t\t}\n\t\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"flex gap-icon\">\n\t\t\t\t<DataTableFilter />\n\t\t\t\t{(\n\t\t\t\t\t<SearchField value={searchQuery} onChange={setSearchQuery} />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\n\nimport { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors } from \"@dnd-kit/core\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n\tflexRender\n} from \"@tanstack/react-table\";\nimport { DataTableFilter, type FiltersConfig } from \"lib/components/data-table/data-table-filter\";\nimport { type ApiFilters, type ApiSchema, TABLE_CHECK_BOX_COLUMN, TABLE_DEFAULT_DATE_COLUMNS, TABLE_ID_COLUMN, type TableActions, type TableFetchFn } from \"lib/components/data-table/table-commons\";\nimport { SearchField } from \"lib/components/inputs/searchfield\";\nimport { Button } from \"lib/components/ui/button\";\nimport { Loader } from \"lib/components/ui/loader\";\nimport { EasyMenu, MenuItem } from \"lib/components/ui/menu\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"lib/components/ui/table\";\nimport { classNames } from \"lib/utils/primitives\";\nimport { useResourceFormatter } from \"lib/utils/resource-names\";\nimport { merge } from \"lodash-es\";\n\nfunction SortIcon({ direction, ...props }: { direction: 'asc' | 'desc' | false } & Omit<React.ComponentProps<'svg'>, 'direction'>) {\n\tif (direction === 'asc') return <ArrowDownNarrowWide {...props} />\n\telse if (direction === 'desc') return <ArrowDownWideNarrow {...props} />\n\telse return <ArrowUpDown {...props} />\n}\n\n// TODO, automate checking valid HTML\nfunction TableContent({ className }: React.ComponentProps<typeof TableComponent>) {\n\tconst { tanTable } = useDataTable();\n\tconst tableCellStyle = (isSticky: boolean, className?: string) => classNames(\"animate-in fade-in slide-in-from-top-10\", \"px-icon py-2 text-left text-sm font-medium whitespace-nowrap\", isSticky && \"bg-card sticky right-0 z-50 text-center\", className)\n\treturn (\n\t\t<TableComponent className={classNames(className)}>\n\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t{tanTable.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t<TableRow className={classNames(\"h-input\")} key={headerGroup.id}>\n\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\tclassName={tableCellStyle(false, \"bg-card\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{!header.column.getCanSort() && !header.isPlaceholder\n\t\t\t\t\t\t\t\t\t&& <>{flexRender(\n\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t)}</>}\n\t\t\t\t\t\t\t\t{/* TODO Align header text with table text */}\n\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full !justify-start !px-1.5\"\n\t\t\t\t\t\t\t\t\t\tonPress={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t<SortIcon direction={header.column.getIsSorted()} />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableHeader>\n\t\t\t<TableBody className=\"flex-1 overflow-y-auto relative\">\n\t\t\t\t{tanTable.getRowModel().rows.map((row) => (\n\t\t\t\t\t<TableRow\n\t\t\t\t\t\tclassName={classNames(\"h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20\")}\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\tdata-selected={row.getIsSelected()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\tclassName={tableCellStyle(cell.column.id === ACTIONS_COLUMN_ID)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableBody>\n\t\t</TableComponent>\n\t);\n}\n","\"use client\"\nimport type { CalendarDateTime } from \"@internationalized/date\";\nimport { useDataTable, type OperationKeys } from \"lib/components/data-table/data-table\";\nimport { type ApiFilters } from \"lib/components/data-table/table-commons\";\nimport { TfDatePicker } from \"lib/components/inputs/date-picker\";\nimport { TfIdSearchInput } from \"lib/components/inputs/id-search\";\nimport type { MultiSelectProps } from \"lib/components/inputs/multi-select\";\nimport { Button } from \"lib/components/ui/button\";\nimport { EasyMenu, MenuItem } from \"lib/components/ui/menu\";\nimport { Popover, PopoverTrigger } from \"lib/components/ui/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 =\n    (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<\n    FilterComparisonOperator,\n    string\n> = {\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 = 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<Record<keyof ApiFilters<TOperation>, FilterConfig>>\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n    const { filters, query, setFilters, filterConfig } = useDataTable();\n    // TODO 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(value.filters.map(lf => { return { [lf.property]: { [lf.operator]: [lf.value] } } }))\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 onOpenChange={(o) => {\n                // Set filters when the popover closes\n                if (!o) {\n                    form.handleSubmit();\n                } else {\n                    addFilterButtonRef.current?.focus();\n                }\n            }}>\n                <Button active={filters.length > 0} isDisabled={query.isPending || filterKeys.length === 0} type=\"button\" size={'icon'} variant={'neutral'}><Filter /></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                    {/* const h3Styles = \"body mb-icon text-muted-foreground\"; */}\n                    {/* <h3 className={h3Styles}>{isFiltersActive ? \"Active filters\" : \"Add filters\"}</h3> */}\n                    <form onSubmit={(e) => { e.preventDefault(); }} className=\"flex flex-col gap-icon max-h-table overflow-auto \">\n                        <form.Field mode=\"array\" name={\"filters\"}>\n                            {\n                                (field) => {\n                                    return <>\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=\"text-sm\">{resourceFormatter(lf.property)}</span>\n                                                    <form.AppField\n                                                        key={lf.id}\n                                                        name={`filters[${i}].operator`}\n                                                    >\n                                                        {(sf) => (<sf.TfSingleSelect items={FilterOperations[lf.type].map(op => ({ id: op, label: <>{COMPARISON_OPERATOR_LABELS[op]}</> }))} />)}\n                                                    </form.AppField>\n\n                                                    {lf.type === 'bool' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfCheckbox />)}</form.AppField>}\n                                                    {lf.type === 'date' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfDatePicker />)}</form.AppField>}\n                                                    {lf.type === 'id' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n                                                    {lf.type === 'string' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n                                                    {/* @ts-ignore */}\n                                                    {lf.type === 'enum' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfMultiSelect items={filterConfig[lf.property].options} />)}</form.AppField>}\n                                                    {/* @ts-ignore */}\n                                                    {lf.type === 'id-search' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfIdSearchInput multiple accessor=\"id\" searchFn={filterConfig[lf.property].search} />)}</form.AppField>}\n\n                                                    <Button type=\"button\" variant=\"destructive\" size=\"icon\" onPress={() => field.removeValue(i)}><Trash /></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 => <MenuItem key={k} onAction={() => {\n                                                    //@ts-ignore\n                                                    const type = filterConfig[k].type as FilterType;\n\n                                                    const defaultValue = (t: FilterType) => {\n                                                        // TODO, ensure exhaustive???\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                                                }} className=\"dropdown-item\">{resourceFormatter(k)}</MenuItem>)}\n                                            </EasyMenu>\n                                            {field.state.value.length > 0 ? (\n                                                <Button\n                                                    type=\"button\"\n                                                    variant=\"neutral\"\n                                                    onPress={() => { field.setValue([]) }}\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};"],"names":["ACTIONS_COLUMN_ID","useDataTableState","columns","fetchFn","columnsToHideByDefault","allowSelection","filterConfig","id","useId","tableState","_setTableState","useState","searchQuery","setSearchQuery","columnOrder","setColumnOrder","columnVisibility","setColumnVisibility","filters","setFilters","mergedFilters","useMemo","acc","current","merge","updateTableState","updates","prev","sorting","rowSelection","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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"}

package/dist/components/data-table/table-commons.d.ts

@@ -0,0 +1,56 @@
+import { components, operations, paths } from '@cryptlex/web-api-types';
+import { PaginationState, SortingState, Table } from '@tanstack/react-table';
+import { LucideIcon } from 'lucide-react';
+import { default as createClient } from 'openapi-fetch';
+import { PressEvent } from 'react-aria-components';
+export declare const TABLE_CHECK_BOX_COLUMN: import('@tanstack/react-table').AccessorKeyColumnDef<any, any>[];
+export declare const TABLE_ID_COLUMN: import('@tanstack/react-table').AccessorKeyColumnDef<any, any>[];
+export declare const TABLE_DEFAULT_DATE_COLUMNS: import('@tanstack/react-table').AccessorKeyColumnDef<any, any>[];
+export declare function formatDate(date: string | null | undefined): string | null;
+/**
+ * Format multiple license parameters (expired, suspended, revoked) into a single status
+ */
+export declare function getLicenseStatus(license: any): string;
+export declare function getValidityDisplay(validity: number | undefined): string;
+export declare function secondsToDuration(seconds: number): string;
+export declare function getValueFromData(data: any, accessor: string | number | symbol): any;
+export declare const ALL_OS: {
+    [key: string]: string;
+};
+export type VisibilityState<T> = {
+    [K in keyof T]?: boolean;
+};
+export type TableActions = ({
+    onClick: (e: PressEvent, t: Table<any>) => void;
+    bulk: boolean;
+    icon: LucideIcon;
+    tooltip?: string;
+})[];
+export type TableFetchFn<TData, TOperation extends keyof operations> = (p: PaginationState, s: SortingState, q: string, f: ApiFilters<TOperation>) => Promise<{
+    total: number;
+    data: TData[] | undefined;
+}>;
+/*** Type for hide some of the columns based on the dto of the particular page
+ ** `id`, `updatedAt` are by default hidden
+ */
+export type DefaultVisibilityState<T> = {
+    [K in keyof T]?: boolean;
+};
+type Client = ReturnType<typeof createClient<paths>>;
+type GetPaths = {
+    [P in keyof paths]: paths[P] extends {
+        get: any;
+    } ? P : never;
+}[keyof paths];
+export type ApiSchema<T extends keyof components['schemas']> = components['schemas'][T];
+export type ApiQuery<T extends keyof operations> = NonNullable<operations[T]['parameters']['query']>;
+export type ApiGetAllParameters = {
+    page: number;
+    limit: number;
+    search?: string;
+    sort?: string;
+};
+export type ApiFilter<T extends keyof operations> = Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>;
+export type ApiFilters<T extends keyof operations> = NonNullable<Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>>;
+export declare function createTableFetchFn<Return, Operation extends keyof operations>(ctxclient: Client, path: GetPaths): TableFetchFn<Return, Operation>;
+export {};

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

@@ -0,0 +1,2 @@
+import{jsx as d}from"react/jsx-runtime";import{createColumnHelper as p}from"@tanstack/react-table";import{intervalToDuration as m}from"date-fns";import{Checkbox as i}from"../inputs/checkbox.js";import"react-aria-components";import"../inputs/field.js";import"class-variance-authority";import"../../utils/primitives.js";import"clsx";import"lucide-react";import"../../utils/form-context.js";import"@tanstack/react-form";const n=p(),v=[n.accessor("checkbox",{header:({table:e})=>d(i,{isIndeterminate:e.getIsSomeRowsSelected()&&!e.getIsAllPageRowsSelected(),isSelected:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected(),onChange:()=>e.toggleAllPageRowsSelected(),"aria-label":"Select all"}),cell:({row:e})=>d(i,{isSelected:e.getIsSelected(),onChange:()=>e.toggleSelected(),"aria-label":"Select row"}),enableSorting:!1,enableHiding:!1})],y=[n.accessor("id",{header:()=>"ID"})],R=[n.accessor("createdAt",{header:()=>"Creation Date",cell:({row:e})=>{const t=e.getValue("createdAt");return c(t)},enableHiding:!1}),n.accessor("updatedAt",{header:()=>"Last Updated",cell:({row:e})=>{const t=e.getValue("updatedAt");return c(t)},enableHiding:!1})];function c(e){if(!e)return null;const t=new Date(e);return new Intl.DateTimeFormat(void 0,{dateStyle:"medium",timeStyle:"short"}).format(t)}function O(e){const t=e.expiresAt&&new Date(e.expiresAt)<new Date;switch(!0){case(e.revoked&&e.suspended&&t):return"Revoked, Suspended, Expired";case(e.revoked&&e.suspended):return"Revoked, Suspended";case(e.revoked&&t):return"Revoked, Expired";case(e.suspended&&t):return"Suspended, Expired";case e.suspended:return"Suspended";case e.revoked:return"Revoked";case t:return"Expired";default:return"Active"}}function b(e){return e===0||!e?"Lifetime":g(e)}function g(e){const t=m({start:0,end:e*1e3});return[t.years&&`${t.years}y`,t.months&&`${t.months}m`,t.days&&`${t.days}d`,t.hours&&`${t.hours}h`].filter(Boolean).join(" ").trim()}function H(e,t){const r=t.toString().split(".");let o=e;for(const a of r)o=o?.[a];return o}const P={windows:"Windows",macos:"macOS",linux:"Linux",ios:"iOS",android:"Android"};function $(e,t){return async(r,o,a,u)=>{const l={...u,page:r.pageIndex+1,limit:r.pageSize,sort:S(o[0]),search:a};return e.GET(t,{query:l}).then(s=>({total:Number.parseInt(s.response.headers.get("Pagination-Count")||"0"),data:s.data}))}}function S(e){return e?e.desc?`-${e.id}`:`+${e.id}`:"-createdAt"}export{P as ALL_OS,v as TABLE_CHECK_BOX_COLUMN,R as TABLE_DEFAULT_DATE_COLUMNS,y as TABLE_ID_COLUMN,$ as createTableFetchFn,c as formatDate,O as getLicenseStatus,b as getValidityDisplay,H as getValueFromData,g as secondsToDuration};
+//# sourceMappingURL=table-commons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-commons.js","sources":["../../../lib/components/data-table/table-commons.tsx"],"sourcesContent":["\nimport type { components, operations, paths } from \"@cryptlex/web-api-types\";\nimport type { PaginationState, SortingState, Table } from \"@tanstack/react-table\";\nimport { createColumnHelper } from \"@tanstack/react-table\";\nimport { intervalToDuration } from \"date-fns\";\nimport { Checkbox } from \"lib/components/inputs/checkbox\";\nimport type { LucideIcon } from \"lucide-react\";\nimport type createClient from \"openapi-fetch\";\nimport type { PressEvent } from \"react-aria-components\";\n\nconst cH = createColumnHelper<any>();\nexport const TABLE_CHECK_BOX_COLUMN = [\n\tcH.accessor(\"checkbox\", {\n\t\theader: ({ table }) => (\n\t\t\t<Checkbox\n\t\t\t\tisIndeterminate={table.getIsSomeRowsSelected() && !table.getIsAllPageRowsSelected()}\n\t\t\t\tisSelected={\n\t\t\t\t\ttable.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()\n\t\t\t\t}\n\t\t\t\tonChange={() => table.toggleAllPageRowsSelected()}\n\t\t\t\taria-label=\"Select all\"\n\t\t\t/>\n\t\t),\n\n\t\tcell: ({ row }) => (\n\t\t\t<Checkbox\n\t\t\t\tisSelected={row.getIsSelected()}\n\t\t\t\tonChange={() => row.toggleSelected()}\n\t\t\t\taria-label=\"Select row\"\n\t\t\t/>\n\t\t),\n\t\tenableSorting: false,\n\t\tenableHiding: false,\n\t}),\n];\n\nexport const TABLE_ID_COLUMN = [\n\tcH.accessor(\"id\", {\n\t\theader: () => \"ID\",\n\t}),\n];\nexport const TABLE_DEFAULT_DATE_COLUMNS = [\n\tcH.accessor(\"createdAt\", {\n\t\theader: () => \"Creation Date\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"createdAt\") satisfies\n\t\t\t\t| string\n\t\t\t\t| null\n\t\t\t\t| undefined;\n\t\t\treturn formatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n\tcH.accessor(\"updatedAt\", {\n\t\theader: () => \"Last Updated\",\n\t\tcell: ({ row }) => {\n\t\t\tconst date = row.getValue(\"updatedAt\") satisfies\n\t\t\t\t| string\n\t\t\t\t| null\n\t\t\t\t| undefined;\n\t\t\treturn formatDate(date);\n\t\t},\n\t\tenableHiding: false,\n\t}),\n];\n\n// TODO, i18n\nexport function formatDate(date: string | null | undefined) {\n\tif (!date) return null;\n\tconst _date = new Date(date);\n\treturn new Intl.DateTimeFormat(undefined, {\n\t\tdateStyle: \"medium\",\n\t\ttimeStyle: \"short\",\n\t}).format(_date);\n}\n/**\n * Format multiple license parameters (expired, suspended, revoked) into a single status\n */\nexport function getLicenseStatus(license: any): string {\n\tconst licenseExpired =\n\t\tlicense.expiresAt && new Date(license.expiresAt) < new Date();\n\t// Status Column\n\tswitch (true) {\n\t\tcase license.revoked && license.suspended && licenseExpired:\n\t\t\treturn \"Revoked, Suspended, Expired\";\n\t\tcase license.revoked && license.suspended:\n\t\t\treturn \"Revoked, Suspended\";\n\t\tcase license.revoked && licenseExpired:\n\t\t\treturn \"Revoked, Expired\";\n\t\tcase license.suspended && licenseExpired:\n\t\t\treturn \"Suspended, Expired\";\n\t\tcase license.suspended:\n\t\t\treturn \"Suspended\";\n\t\tcase license.revoked:\n\t\t\treturn \"Revoked\";\n\t\tcase licenseExpired:\n\t\t\treturn \"Expired\";\n\t\tdefault:\n\t\t\treturn \"Active\";\n\t}\n}\n\nexport function getValidityDisplay(validity: number | undefined) {\n\tif (validity === 0 || !validity) {\n\t\treturn \"Lifetime\";\n\t} else {\n\t\treturn secondsToDuration(validity);\n\t}\n}\nexport function secondsToDuration(seconds: number): string {\n\t//@ts-ignore\n\tconst duration = intervalToDuration({\n\t\tstart: 0,\n\t\tend: seconds * 1000,\n\t});\n\n\tconst parts = [\n\t\tduration.years && `${duration.years}y`,\n\t\tduration.months && `${duration.months}m`,\n\t\tduration.days && `${duration.days}d`,\n\t\tduration.hours && `${duration.hours}h`,\n\t];\n\n\t// Filter out undefined values and join\n\treturn parts.filter(Boolean).join(\" \").trim();\n}\n\nexport function getValueFromData(\n\tdata: any,\n\taccessor: string | number | symbol,\n) {\n\tconst accessors = accessor.toString().split(\".\");\n\tlet value = data;\n\tfor (const acc of accessors) {\n\t\tvalue = value?.[acc];\n\t}\n\treturn value;\n}\nexport const ALL_OS: { [key: string]: string } = {\n\twindows: \"Windows\",\n\tmacos: \"macOS\",\n\tlinux: \"Linux\",\n\tios: \"iOS\",\n\tandroid: \"Android\",\n};\n\nexport type VisibilityState<T> = {\n\t[K in keyof T]?: boolean;\n};\n\nexport type TableActions = ({\n\tonClick: (e: PressEvent, t: Table<any>) => void\n\tbulk: boolean;\n\ticon: LucideIcon\n\ttooltip?: string;\n})[]\n\nexport type TableFetchFn<TData, TOperation extends keyof operations> = (\n\tp: PaginationState,\n\ts: SortingState,\n\tq: string,\n\tf: ApiFilters<TOperation>\n) => Promise<{\n\ttotal: number;\n\tdata: TData[] | undefined;\n}>;\n/*** Type for hide some of the columns based on the dto of the particular page\n ** `id`, `updatedAt` are by default hidden\n */\nexport type DefaultVisibilityState<T> = {\n\t[K in keyof T]?: boolean;\n};\n\n\ntype Client = ReturnType<typeof createClient<paths>>;\n\n// Helper type to extract valid GET paths\ntype GetPaths = {\n\t[P in keyof paths]: paths[P] extends { get: any } ? P : never;\n}[keyof paths];\n\nexport type ApiSchema<T extends keyof components['schemas']> = components['schemas'][T];\nexport type ApiQuery<T extends keyof operations> = NonNullable<operations[T]['parameters']['query']>;\nexport type ApiGetAllParameters = {\n\tpage: number;\n\tlimit: number;\n\tsearch?: string;\n\tsort?: string;\n}\n\n\nexport type ApiFilter<T extends keyof operations> = Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>\nexport type ApiFilters<T extends keyof operations> = NonNullable<Omit<ApiQuery<T>, 'page' | 'limit' | 'sort' | 'search'>>\n\nexport function createTableFetchFn<Return, Operation extends keyof operations>(\n\tctxclient: Client,\n\tpath: GetPaths,\n): TableFetchFn<Return, Operation> {\n\treturn async (pagination, sorting, searching, filters) => {\n\t\tconst query: ApiQuery<Operation> = {\n\t\t\t...filters,\n\t\t\tpage: pagination.pageIndex + 1,\n\t\t\tlimit: pagination.pageSize,\n\t\t\tsort: generateSortParam(sorting[0]),\n\t\t\tsearch: searching,\n\t\t};\n\n\t\t// const pathParams = merge(_baseQueryObject, params);\n\n\t\treturn ctxclient.GET(path, { query }).then((value) => {\n\t\t\tconst rowCount = Number.parseInt(\n\t\t\t\tvalue.response.headers.get(\"Pagination-Count\") || \"0\",\n\t\t\t);\n\t\t\treturn { total: rowCount, data: value.data };\n\t\t});\n\t};\n}\n\nfunction generateSortParam(\n\tsort: { id: string; desc: boolean } | undefined,\n): string {\n\tif (sort) {\n\t\tif (sort.desc) {\n\t\t\treturn `-${sort.id}`;\n\t\t} else {\n\t\t\treturn `+${sort.id}`;\n\t\t}\n\t} else {\n\t\treturn \"-createdAt\";\n\t}\n}\n\n\n"],"names":["cH","createColumnHelper","TABLE_CHECK_BOX_COLUMN","table","jsx","Checkbox","row","TABLE_ID_COLUMN","TABLE_DEFAULT_DATE_COLUMNS","date","formatDate","_date","getLicenseStatus","license","licenseExpired","getValidityDisplay","validity","secondsToDuration","seconds","duration","intervalToDuration","getValueFromData","data","accessor","accessors","value","acc","ALL_OS","createTableFetchFn","ctxclient","path","pagination","sorting","searching","filters","query","generateSortParam","sort"],"mappings":"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"}

package/dist/components/inputs/checkbox.d.ts

@@ -0,0 +1,8 @@
+import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+import { FormFieldProps } from 'lib/components/inputs/field';
+export declare const CheckboxGroup: (props: import('react-aria-components').CheckboxGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+type CheckboxProps = AriaCheckboxProps & FormFieldProps;
+export declare function Checkbox({ className, label, description, errorMessage, ...props }: Omit<CheckboxProps, 'children'>): import("react/jsx-runtime").JSX.Element;
+export type TfCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, "onChange" | "onBlur" | "isChecked">;
+export declare function TfCheckbox({ ...props }: TfCheckboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/checkbox.js

@@ -0,0 +1,2 @@
+import{jsx as e,Fragment as c}from"react/jsx-runtime";import{Checkbox as l,composeRenderProps as a,CheckboxGroup as m}from"react-aria-components";import{FormField as b,labelVariants as p}from"./field.js";import{useFieldContext as h}from"../../utils/form-context.js";import{classNames as d}from"../../utils/primitives.js";import{Minus as x,Check as g}from"lucide-react";import"class-variance-authority";import"@tanstack/react-form";import"clsx";const j=m;function f({className:r,label:o,description:n,errorMessage:s,...u}){return e("div",{className:"group form-field",children:e(b,{label:o,description:n,errorMessage:s,children:e(l,{className:a(r,t=>d("group/checkbox cursor-pointer focus-ring flex items-center gap-x-2","disabled-muted",p,t)),...u,children:a(e(c,{}),(t,i)=>e(c,{children:e("div",{className:d("flex size-input shrink-0 items-center bg-card justify-center border border-input text-current ring-offset-background","group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground  group-data-[selected]/checkbox:text-primary-foreground","group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50","group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground","focus:outline-none focus-visible:outline-none"),children:i.isIndeterminate?e(x,{className:"size-icon"}):i.isSelected?e(g,{className:"size-icon"}):null})}))})})})}function B({...r}){const o=h();return e(f,{isSelected:o.state.value,isDisabled:o.form.state.isSubmitting||r.isDisabled,onChange:()=>o.handleChange(!o.state.value),onBlur:o.handleBlur,...r})}export{f as Checkbox,j as CheckboxGroup,B as TfCheckbox};
+//# sourceMappingURL=checkbox.js.map

package/dist/components/inputs/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../../lib/components/inputs/checkbox.tsx"],"sourcesContent":["import {\n  Checkbox as AriaCheckbox,\n  CheckboxGroup as AriaCheckboxGroup,\n  composeRenderProps,\n  type CheckboxProps as AriaCheckboxProps\n} from \"react-aria-components\";\n\nimport { FormField, labelVariants, type FormFieldProps } from \"lib/components/inputs/field\";\nimport { useFieldContext } from \"lib/utils/form-context\";\nimport { classNames } from \"lib/utils/primitives\";\nimport { Check, Minus } from \"lucide-react\";\n\nexport const CheckboxGroup = AriaCheckboxGroup\ntype CheckboxProps = AriaCheckboxProps & FormFieldProps;\nexport function Checkbox({ className, label, description, errorMessage, ...props }: Omit<CheckboxProps, 'children'>) {\n  return (\n    <div className=\"group form-field\">\n      <FormField label={label} description={description} errorMessage={errorMessage}>\n        <AriaCheckbox\n          className={composeRenderProps(className, (className) =>\n            classNames(\n              \"group/checkbox cursor-pointer focus-ring flex items-center gap-x-2\",\n              /* Disabled */\n              \"disabled-muted\",\n              labelVariants,\n              className\n            )\n          )}\n          {...props}\n        >\n          {composeRenderProps(<></>, (_, renderProps) => (\n            <>\n              <div\n                className={classNames(\n                  \"flex size-input shrink-0 items-center bg-card justify-center border border-input text-current ring-offset-background\",\n                  /* Selected */\n                  \"group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground  group-data-[selected]/checkbox:text-primary-foreground\",\n                  /* Disabled */\n                  \"group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50\",\n                  /* Invalid */\n                  \"group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground\",\n                  /* Resets */\n                  \"focus:outline-none focus-visible:outline-none\"\n                )}\n              >\n                {renderProps.isIndeterminate ? (\n                  <Minus className=\"size-icon\" />\n                ) : renderProps.isSelected ? (\n                  <Check className=\"size-icon\" />\n                ) : null}\n              </div>\n            </>\n          ))}\n        </AriaCheckbox>\n      </FormField>\n    </div>\n  )\n}\n\nexport type TfCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, \"onChange\" | \"onBlur\" | \"isChecked\">\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n  const field = useFieldContext<boolean>();\n  return (\n    <Checkbox\n      isSelected={field.state.value}\n      isDisabled={field.form.state.isSubmitting || props.isDisabled}\n      onChange={() => field.handleChange(!field.state.value)}\n      onBlur={field.handleBlur}\n      {...props}\n    />\n  );\n};"],"names":["CheckboxGroup","AriaCheckboxGroup","Checkbox","className","label","description","errorMessage","props","jsx","FormField","AriaCheckbox","composeRenderProps","classNames","labelVariants","Fragment","_","renderProps","Minus","Check","TfCheckbox","field","useFieldContext"],"mappings":"4bAYO,MAAMA,EAAgBC,EAEtB,SAASC,EAAS,CAAE,UAAAC,EAAW,MAAAC,EAAO,YAAAC,EAAa,aAAAC,EAAc,GAAGC,GAA0C,CACnH,OACEC,EAAC,OAAI,UAAU,mBACb,WAACC,EAAA,CAAU,MAAAL,EAAc,YAAAC,EAA0B,aAAAC,EACjD,SAAAE,EAACE,EAAA,CACC,UAAWC,EAAmBR,EAAYA,GACxCS,EACE,qEAEA,iBACAC,EACAV,CAAA,CACF,EAED,GAAGI,EAEH,WAAmBC,EAAAM,EAAA,CAAA,CAAE,EAAK,CAACC,EAAGC,IAC7BR,EAAAM,EAAA,CACE,SAAAN,EAAC,MAAA,CACC,UAAWI,EACT,uHAEA,+MAEA,8FAEA,wNAEA,+CAAA,EAGD,SAAAI,EAAY,gBACXR,EAACS,EAAA,CAAM,UAAU,WAAA,CAAY,EAC3BD,EAAY,WACdR,EAACU,EAAA,CAAM,UAAU,YAAY,EAC3B,IAAA,CAAA,EAER,CACD,CAAA,CAAA,EAEL,CAAA,CACF,CAEJ,CAGO,SAASC,EAAW,CAAE,GAAGZ,GAA0B,CACxD,MAAMa,EAAQC,EAAA,EACd,OACEb,EAACN,EAAA,CACC,WAAYkB,EAAM,MAAM,MACxB,WAAYA,EAAM,KAAK,MAAM,cAAgBb,EAAM,WACnD,SAAU,IAAMa,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK,EACrD,OAAQA,EAAM,WACb,GAAGb,CAAA,CAAA,CAGV"}

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

@@ -0,0 +1,11 @@
+import { DatePickerProps as AriaDatePickerProps, DateRangePickerProps as AriaDateRangePickerProps, DateValue as AriaDateValue } from 'react-aria-components';
+import { ZonedDateTime } from '@internationalized/date';
+import { FormFieldProps } from 'lib/components/inputs/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;
+export declare function TfDatePicker({ ...props }: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>): import("react/jsx-runtime").JSX.Element;
+interface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {
+}
+export declare function DateRangePicker<T extends AriaDateValue>({ label, description, errorMessage, className, ...props }: DateRangePickerProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +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{DateInput as m}from"./datefield.js";import{FormField as u,FieldGroup as f}from"./field.js";import{Button as g}from"../ui/button.js";import{Calendar as C,RangeCalendar as F}from"../ui/calendar.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"clsx";import"../ui/loader.js";import"react";import"@tanstack/react-form";const h=({className:a,popoverClassName:r,...t})=>e(D,{className:c(r,o=>n("w-auto p-3",o)),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),...t})});function b({label:a,description:r,errorMessage:t,className:o,...l}){return i(x,{className:c(o,s=>n("group flex flex-col gap-2",s)),...l,children:[e(u,{label:a,description:r,errorMessage:t,children:i(f,{"aria-label":a,children:[e(m,{className:"flex-1",variant:"ghost"}),e(g,{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:t=>t?r.handleChange(t.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function H({label:a,description:r,errorMessage:t,className:o,...l}){return i(v,{className:c(o,s=>n("group flex flex-col gap-2",s)),...l,children:[e(u,{label:a,errorMessage:t,description:r,children:i(f,{children:[e(m,{variant:"ghost",slot:"start"}),e("span",{"aria-hidden":!0,className:"px-2 text-sm text-muted-foreground",children:"-"}),e(m,{className:"flex-1",variant:"ghost",slot:"end"}),e(g,{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};
+//# sourceMappingURL=date-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sources":["../../../lib/components/inputs/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 { DateInput } from \"lib/components/inputs/datefield\"\nimport { FieldGroup, FormField, type FormFieldProps } from \"lib/components/inputs/field\"\nimport { Button } from \"lib/components/ui/button\"\nimport { Calendar, RangeCalendar } from \"lib/components/ui/calendar\"\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\n    className={composeRenderProps(popoverClassName, (className) =>\n      classNames(\"w-auto p-3\", className)\n    )}\n  >\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) =>\n        classNames(\"group flex flex-col gap-2\", className)\n      )}\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\n            variant=\"ghost\"\n            size=\"icon\"\n            className={'-me-2 ms-2'}\n          >\n            <CalendarIcon aria-hidden />\n          </Button>\n        </FieldGroup>\n      </FormField>\n      <DatePickerContent>\n        <Calendar />\n      </DatePickerContent>\n    </AriaDatePicker>\n  )\n}\n\nexport function TfDatePicker({ ...props }: 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\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) =>\n        classNames(\"group flex flex-col gap-2\", className)\n      )}\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 text-sm text-muted-foreground\">\n            -\n          </span>\n          <DateInput className=\"flex-1\" variant=\"ghost\" slot={\"end\"} />\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"mr-1 data-[focus-visible]:ring-offset-0\"\n          >\n            <CalendarIcon aria-hidden />\n          </Button>\n        </FieldGroup>\n      </FormField>\n      <DatePickerContent>\n        <RangeCalendar />\n      </DatePickerContent>\n    </AriaDateRangePicker>\n  )\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,CACzB,UAAAC,EACA,iBAAAC,EACA,GAAGC,CACL,IACEC,EAACC,EAAA,CACC,UAAWC,EAAmBJ,EAAmBD,GAC/CM,EAAW,aAAcN,CAAS,CAAA,EAGpC,SAAAG,EAACI,EAAA,CACC,UAAWD,EACT,iFACAN,CAAA,EAED,GAAGE,CAAA,CAAA,CACN,CACF,EAKK,SAASM,EAAoC,CAClD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACL,EAAuB,CACrB,OACEU,EAACC,EAAA,CACC,UAAWR,EAAmBL,EAAYA,GACxCM,EAAW,4BAA6BN,CAAS,CAAA,EAElD,GAAGE,EAEJ,SAAA,CAAAC,EAACW,GAAU,MAAAL,EAAc,YAAAC,EAA0B,aAAAC,EACjD,SAAAC,EAACG,EAAA,CAAW,aAAYN,EACtB,SAAA,CAAAN,EAACa,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,EAC9Cb,EAACc,EAAA,CACC,QAAQ,QACR,KAAK,OACL,UAAW,aAEX,SAAAd,EAACe,EAAA,CAAa,cAAW,EAAA,CAAC,CAAA,CAAA,CAC5B,CAAA,CACF,CAAA,CACF,EACAf,EAACJ,EAAA,CACC,SAAAI,EAACgB,EAAA,CAAA,CAAS,CAAA,CACZ,CAAA,CAAA,CAAA,CAGN,CAEO,SAASC,EAAa,CAAE,GAAGlB,GAA+G,CAC/I,MAAMmB,EAAQC,EAAA,EACd,OACEnB,EAACK,EAAA,CACC,aAAY,GACZ,MAAOa,EAAM,MAAM,MAAQE,EAAcF,EAAM,MAAM,MAAOG,EAAA,CAAkB,EAAI,KAClF,SAAWC,GAAMA,EAAIJ,EAAM,aAAaI,EAAE,kBAAkB,EAAIJ,EAAM,aAAa,IAAI,EACvF,OAAQA,EAAM,WACd,UAAW,CAAC,CAACK,EAAqBL,CAAK,EACvC,aAAcK,EAAqBL,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAEV,CAGO,SAASyB,EAAyC,CACvD,MAAAlB,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACL,EAA4B,CAC1B,OACEU,EAACgB,EAAA,CACC,UAAWvB,EAAmBL,EAAYA,GACxCM,EAAW,4BAA6BN,CAAS,CAAA,EAElD,GAAGE,EAEJ,SAAA,CAAAC,EAACW,EAAA,CAAU,MAAAL,EAAc,aAAAE,EAA4B,YAAAD,EACnD,WAACK,EAAA,CACC,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,CACC,QAAQ,QACR,KAAK,OACL,UAAU,0CAEV,SAAAd,EAACe,EAAA,CAAa,cAAW,EAAA,CAAC,CAAA,CAAA,CAC5B,CAAA,CACF,CAAA,CACF,EACAf,EAACJ,EAAA,CACC,SAAAI,EAAC0B,EAAA,CAAA,CAAc,CAAA,CACjB,CAAA,CAAA,CAAA,CAGN"}

package/dist/components/inputs/datefield.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+import { DateFieldProps as AriaDateFieldProps, DateInputProps as AriaDateInputProps, DateSegmentProps as AriaDateSegmentProps, DateValue as AriaDateValue, TimeFieldProps as AriaTimeFieldProps, TimeValue as AriaTimeValue } from 'react-aria-components';
+import { fieldGroupVariants, FormFieldProps } from './field';
+export declare function DateSegment({ className, ...props }: AriaDateSegmentProps): import("react/jsx-runtime").JSX.Element;
+interface DateInputProps extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {
+}
+export declare function DateInput({ className, variant, ...props }: Omit<DateInputProps, "children">): import("react/jsx-runtime").JSX.Element;
+interface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps {
+}
+export declare function DateField<T extends AriaDateValue>({ label, description, className, errorMessage, ...props }: DateFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+interface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {
+}
+export declare function TimeField<T extends AriaTimeValue>({ label, description, errorMessage, className, ...props }: TimeFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/datefield.js

@@ -0,0 +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 n}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=>n("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=>n(g({variant:a}),"text-sm",r)),...d,children:r=>e(v,{segment:r})})}function I({label:t,description:a,className:d,errorMessage:r,...o}){return e(f,{className:i(d,l=>n("group form-field",l)),...o,children:e(c,{label:t,description:a,errorMessage:r,children:e(s,{})})})}function S({label:t,description:a,errorMessage:d,className:r,...o}){return e(p,{className:i(r,l=>n("group form-field",l)),...o,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};
+//# sourceMappingURL=datefield.js.map

package/dist/components/inputs/datefield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datefield.js","sources":["../../../lib/components/inputs/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\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\n  extends AriaDateInputProps,\n  VariantProps<typeof fieldGroupVariants> { }\n\nexport function DateInput({\n  className,\n  variant,\n  ...props\n}: Omit<DateInputProps, \"children\">) {\n  return (\n    <AriaDateInput\n      className={composeRenderProps(className, (className) =>\n        classNames(fieldGroupVariants({ variant }), \"text-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) =>\n        classNames(\"group form-field\", className)\n      )}\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) =>\n        classNames(\"group form-field\", className)\n      )}\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":"uWAqBO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACzE,OACEC,EAACC,EAAA,CACC,UAAWC,EAAmBJ,EAAYA,GACxCK,EACE,qCAEA,2CAEA,iBAEA,iEAEA,yQACAL,CAAA,CACF,EAED,GAAGC,CAAA,CAAA,CAGV,CAMO,SAASK,EAAU,CACxB,UAAAN,EACA,QAAAO,EACA,GAAGN,CACL,EAAqC,CACnC,OACEC,EAACM,EAAA,CACC,UAAWJ,EAAmBJ,EAAYA,GACxCK,EAAWI,EAAmB,CAAE,QAAAF,CAAA,CAAS,EAAG,UAAWP,CAAS,CAAA,EAEjE,GAAGC,EAEH,SAACS,GAAYR,EAACH,EAAA,CAAY,QAAAW,CAAA,CAAkB,CAAA,CAAA,CAGnD,CAIO,SAASC,EAAmC,CACjD,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,GAAGb,CACL,EAAsB,CACpB,OACEC,EAACa,EAAA,CACC,UAAWX,EAAmBJ,EAAYA,GACxCK,EAAW,mBAAoBL,CAAS,CAAA,EAEzC,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EACjD,SAAAZ,EAACI,IAAU,CAAA,CACb,CAAA,CAAA,CAGN,CAIO,SAASW,EAAmC,CACjD,MAAAL,EACA,YAAAC,EACA,aAAAC,EACA,UAAAd,EACA,GAAGC,CACL,EAAsB,CACpB,OACEC,EAACgB,EAAA,CACC,UAAWd,EAAmBJ,EAAYA,GACxCK,EAAW,mBAAoBL,CAAS,CAAA,EAEzC,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EACjD,SAAAZ,EAACI,IAAU,CAAA,CACb,CAAA,CAAA,CAGN"}

package/dist/components/inputs/field.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from 'class-variance-authority';
+import { GroupProps as AriaGroupProps, LabelProps as AriaLabelProps, TextProps as AriaTextProps } from 'react-aria-components';
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare function FieldLabel({ className, ...props }: AriaLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldDescription({ className, children, ...props }: AriaTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldError({ className, children, ...props }: React.ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare const fieldGroupVariants: (props?: ({
+    variant?: "default" | "ghost" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {
+}
+export declare function FieldGroup({ className, variant, ...props }: GroupProps): import("react/jsx-runtime").JSX.Element;
+export type FormFieldProps = {
+    label?: string;
+    description?: React.ReactNode;
+    errorMessage?: string;
+};
+export declare function FormField({ label, description, errorMessage, children }: FormFieldProps & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/field.js

@@ -0,0 +1,2 @@
+"use client";import{jsxs as o,Fragment as l,jsx as n}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{Group as d,composeRenderProps as m,Label as c,Text as u}from"react-aria-components";import{classNames as r}from"../../utils/primitives.js";import{Info as f,CircleX as p}from"lucide-react";import"clsx";const x=s(["select-none text-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function g({className:e,...t}){return n(c,{className:r(x(),e),...t})}function h({className:e,children:t,...i}){return o(u,{className:r("text-sm text-muted leading-tight",e),...i,slot:"description",children:[t,n(f,{className:"inline size-2 align-text-top ms-0.5"})]})}function v({className:e,children:t,...i}){return o("div",{className:r("text-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in",e),...i,children:[t,n(p,{className:"inline size-2 align-text-top ms-0.5"})]})}const b=s("",{variants:{variant:{default:["relative flex h-input w-full items-center overflow-hidden border border-input bg-card px-2 py-2 text-sm ring-offset-background","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function z({className:e,variant:t,...i}){return n(d,{className:m(e,a=>r(b({variant:t}),a)),...i})}function L({label:e,description:t,errorMessage:i,children:a}){return o(l,{children:[e&&n(g,{children:e}),a,t&&n(h,{children:t}),i&&n(v,{children:i})]})}export{h as FieldDescription,v as FieldError,z as FieldGroup,g as FieldLabel,L as FormField,b as fieldGroupVariants,x as labelVariants};
+//# sourceMappingURL=field.js.map

package/dist/components/inputs/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sources":["../../../lib/components/inputs/field.tsx"],"sourcesContent":["\"use client\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n  Group as AriaGroup,\n  GroupProps as AriaGroupProps,\n  Label as AriaLabel,\n  LabelProps as AriaLabelProps,\n  Text as AriaText,\n  TextProps as AriaTextProps,\n  composeRenderProps\n} from \"react-aria-components\"\n\nimport { classNames } from \"lib/utils/primitives\"\nimport { CircleX, Info } from \"lucide-react\"\n\nexport const labelVariants = cva([\n  \"select-none text-sm font-medium leading-none\",\n  /* Disabled */\n  \"disabled-muted\",\n  /* Invalid */\n  \"group-data-[invalid]:text-destructive\",\n])\n\nexport function FieldLabel({ className, ...props }: AriaLabelProps) {\n  return (\n    <AriaLabel className={classNames(labelVariants(), className)} {...props} />\n  )\n}\n\nexport function FieldDescription({ className, children, ...props }: AriaTextProps) {\n  return (\n    <AriaText\n      className={classNames(\"text-sm text-muted leading-tight\", className)}\n      {...props}\n      slot=\"description\"\n    >\n      {children}<Info className=\"inline size-2 align-text-top ms-0.5\" />\n    </AriaText>\n  )\n}\n// TODO, if we were to use AriaFieldError, it would use the internal ValidationState Context object, which might be useful for composing inputs but\n// this would have significant overlap with what Tanstack Form is already doing for us. It has pros and cons, needs to be discussed and explored.\nexport function FieldError({ className, children, ...props }: React.ComponentPropsWithRef<'div'>) {\n  return (\n    <div\n      className={classNames(\"text-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in\", className)}\n      {...props}\n    >\n      {children}<CircleX className=\"inline size-2 align-text-top ms-0.5\" />\n    </div>\n  )\n}\n\nexport const fieldGroupVariants = cva(\"\", {\n  variants: {\n    variant: {\n      default: [\n        // TODO standardize the padding here\n        \"relative flex h-input w-full items-center overflow-hidden border border-input bg-card px-2 py-2 text-sm ring-offset-background\",\n        /* Focus Within */\n        \"focus-ring\",\n        /* Disabled */\n        \"disabled-muted\",\n      ],\n      ghost: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nexport interface GroupProps\n  extends AriaGroupProps,\n  VariantProps<typeof fieldGroupVariants> { }\n\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n  return (\n    <AriaGroup\n      className={composeRenderProps(className, (className) =>\n        classNames(fieldGroupVariants({ variant }), className)\n      )}\n      {...props}\n    />\n  )\n}\n\nexport type FormFieldProps = {\n  label?: string\n  description?: React.ReactNode\n  errorMessage?: string\n  // | ((validation: AriaValidationResult) => string)\n}\n\nexport function FormField({ label, description, errorMessage, children }: FormFieldProps & {\n  children: React.ReactNode\n}) {\n  return <>\n    {label && <FieldLabel>{label}</FieldLabel>}\n    {children}\n    {description && (<FieldDescription>{description}</FieldDescription>)}\n    {errorMessage && <FieldError>{errorMessage}</FieldError>}\n  </>\n}\n"],"names":["labelVariants","cva","FieldLabel","className","props","jsx","AriaLabel","classNames","FieldDescription","children","jsxs","AriaText","Info","FieldError","CircleX","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","Fragment"],"mappings":"4UAgBO,MAAMA,EAAgBC,EAAI,CAC/B,+CAEA,iBAEA,uCACF,CAAC,EAEM,SAASC,EAAW,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CAClE,OACEC,EAACC,GAAU,UAAWC,EAAWP,IAAiBG,CAAS,EAAI,GAAGC,EAAO,CAE7E,CAEO,SAASI,EAAiB,CAAE,UAAAL,EAAW,SAAAM,EAAU,GAAGL,GAAwB,CACjF,OACEM,EAACC,EAAA,CACC,UAAWJ,EAAW,mCAAoCJ,CAAS,EAClE,GAAGC,EACJ,KAAK,cAEJ,SAAA,CAAAK,EAASJ,EAACO,EAAA,CAAK,UAAU,qCAAA,CAAsC,CAAA,CAAA,CAAA,CAGtE,CAGO,SAASC,EAAW,CAAE,UAAAV,EAAW,SAAAM,EAAU,GAAGL,GAA6C,CAChG,OACEM,EAAC,MAAA,CACC,UAAWH,EAAW,mHAAoHJ,CAAS,EAClJ,GAAGC,EAEH,SAAA,CAAAK,EAASJ,EAACS,EAAA,CAAQ,UAAU,qCAAA,CAAsC,CAAA,CAAA,CAAA,CAGzE,CAEO,MAAMC,EAAqBd,EAAI,GAAI,CACxC,SAAU,CACR,QAAS,CACP,QAAS,CAEP,iIAEA,aAEA,gBAAA,EAEF,MAAO,EAAA,CACT,EAEF,gBAAiB,CACf,QAAS,SAAA,CAEb,CAAC,EAMM,SAASe,EAAW,CAAE,UAAAb,EAAW,QAAAc,EAAS,GAAGb,GAAqB,CACvE,OACEC,EAACa,EAAA,CACC,UAAWC,EAAmBhB,EAAYA,GACxCI,EAAWQ,EAAmB,CAAE,QAAAE,CAAA,CAAS,EAAGd,CAAS,CAAA,EAEtD,GAAGC,CAAA,CAAA,CAGV,CASO,SAASgB,EAAU,CAAE,MAAAC,EAAO,YAAAC,EAAa,aAAAC,EAAc,SAAAd,GAE3D,CACD,OAAOC,EAAAc,EAAA,CACJ,SAAA,CAAAH,GAAShB,EAACH,GAAY,SAAAmB,CAAA,CAAM,EAC5BZ,EACAa,GAAgBjB,EAACG,EAAA,CAAkB,SAAAc,CAAA,CAAY,EAC/CC,GAAgBlB,EAACQ,EAAA,CAAY,SAAAU,CAAA,CAAa,CAAA,EAC7C,CACF"}

package/dist/components/inputs/id-search.d.ts

@@ -0,0 +1,20 @@
+export type SelectState = Set<number | string>;
+type SearchInputProps<T> = {
+    value: SelectState;
+    onChange: (v: SelectState) => void;
+    onBlur?: (v: SelectState) => void;
+    multiple: boolean;
+    disabled?: boolean;
+    idLookup?: (ids: string[]) => Promise<string[] | undefined>;
+    searchFn: (q: string) => Promise<T[] | undefined>;
+    accessor: 'id' | 'name';
+};
+export declare function IdSearchInput<T extends {
+    id: string;
+    name: string;
+}>({ value, disabled, searchFn, multiple, onChange, onBlur, accessor, idLookup }: SearchInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TfIdSearchInput<T extends {
+    id: string;
+    name: string;
+}>({ disabled, ...props }: Omit<SearchInputProps<T>, 'value' | 'onChange'>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/id-search.js

@@ -0,0 +1,2 @@
+import{jsx as r,Fragment as x,jsxs as d}from"react/jsx-runtime";import{useQuery as l}from"@tanstack/react-query";import{SearchField as F}from"./searchfield.js";import{Button as I}from"../ui/button.js";import{Loader as N}from"../ui/loader.js";import{Menu as C,MenuItem as B}from"../ui/menu.js";import{PopoverTrigger as q,Popover as j}from"../ui/popover.js";import{useFieldContext as K}from"../../utils/form-context.js";import{useId as M,useState as v}from"react";import{Autocomplete as A}from"react-aria-components";import"lucide-react";import"../../utils/primitives.js";import"clsx";import"./field.js";import"class-variance-authority";import"./select.js";import"../ui/list-box.js";import"@tanstack/react-form";function E({value:t,disabled:i=!1,searchFn:n,multiple:o,onChange:p,onBlur:f,accessor:h="id",idLookup:m}){const a=M(),[s,g]=v(""),{data:y,isError:c,isFetching:u,error:S}=l({queryKey:[a,s],queryFn:()=>n(s)}),b=l({queryKey:[a,t],queryFn:()=>m(Array.from(t.keys()).map(e=>e.toString())),enabled:m&&t.size>0});return r(x,{children:d(q,{onOpenChange:e=>{e||f?.(t)},children:[r(I,{className:"min-w-3xs",isDisabled:i,children:b.data?.join(",")}),r(j,{className:"p-2",children:d(A,{inputValue:s,onInputChange:g,children:[r(F,{className:"mb-icon",autoFocus:!0}),u&&r(N,{className:"p-input"}),!u&&!c&&r(C,{selectedKeys:t,selectionMode:o?"multiple":"single",onSelectionChange:e=>{typeof e!="string"&&p(e)},className:"text-sm",items:y,renderEmptyState:()=>"No results found.",children:e=>r(B,{id:e[h],children:e.name},e.id)}),c&&r("div",{className:"text-destructive p-icon",children:S.message})]})})]})})}function Z({disabled:t,...i}){const n=K();return r(E,{...i,disabled:t||n.form.state.isSubmitting,value:n.state.value,onBlur:o=>n.handleBlur(),onChange:o=>n.handleChange(o)})}export{E as IdSearchInput,Z as TfIdSearchInput};
+//# sourceMappingURL=id-search.js.map

package/dist/components/inputs/id-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-search.js","sources":["../../../lib/components/inputs/id-search.tsx"],"sourcesContent":["import { useQuery } from \"@tanstack/react-query\";\nimport { SearchField } from \"lib/components/inputs/searchfield\";\nimport { Button } from \"lib/components/ui/button\";\nimport { Loader } from \"lib/components/ui/loader\";\nimport { Menu, MenuItem } from \"lib/components/ui/menu\";\nimport { Popover, PopoverTrigger } from \"lib/components/ui/popover\";\nimport { useFieldContext } from \"lib/utils/form-context\";\nimport { useId, useState } from \"react\";\nimport { Autocomplete } from 'react-aria-components';\n\nexport type SelectState = Set<number | string>;\n\ntype SearchInputProps<T> = {\n    value: SelectState;\n    onChange: (v: SelectState) => void\n    onBlur?: (v: SelectState) => void\n    multiple: boolean\n    disabled?: boolean\n    idLookup?: (ids: string[]) => Promise<string[] | undefined>\n    searchFn: (q: string) => Promise<T[] | undefined>\n    accessor: 'id' | 'name';\n}\nexport function IdSearchInput<T extends { id: string; name: string }>({ value, disabled = false, searchFn, multiple, onChange, onBlur, accessor = 'id', idLookup }: SearchInputProps<T>) {\n    const id = useId();\n    const [search, _setSearch] = useState('');\n    const { data, isError, isFetching, error } = useQuery({\n        queryKey: [id, search],\n        queryFn: () => searchFn(search)\n    })\n\n    const namesQuery = useQuery({\n        queryKey: [id, value],\n        queryFn: () => idLookup!(Array.from(value.keys()).map(id => id.toString())),\n        enabled: idLookup && value.size > 0\n    })\n\n    const renderButtonLabel = () => {\n        return namesQuery.data?.join(',');\n    };\n\n    return <>\n        <PopoverTrigger onOpenChange={(o) => {\n            if (!o) {\n                // searchInputRef.current?.focus();\n                onBlur?.(value);\n            }\n        }}>\n            <Button className={'min-w-3xs'} isDisabled={disabled}>{renderButtonLabel()}</Button>\n            <Popover className={'p-2'}>\n                <Autocomplete\n                    inputValue={search}\n                    onInputChange={_setSearch}\n                >\n                    <SearchField className={'mb-icon'} autoFocus />\n                    {isFetching && <Loader className=\"p-input\" />}\n                    {!isFetching && !isError && <Menu selectedKeys={value} selectionMode={multiple ? \"multiple\" : 'single'} onSelectionChange={(s) => {\n                        if (typeof (s) === 'string') return;\n                        onChange(s)\n                    }} className={'text-sm'} items={data} renderEmptyState={() => 'No results found.'}>\n                        {(item) => (<MenuItem key={item['id']} id={item[accessor]}>{item.name}</MenuItem>)}\n                    </Menu>}\n                    {\n                        isError && <div className=\"text-destructive p-icon\">{error.message}</div>\n                    }\n                </Autocomplete>\n            </Popover>\n        </PopoverTrigger >\n    </>\n\n}\n\nexport function TfIdSearchInput<T extends { id: string; name: string }>({ disabled, ...props }: Omit<SearchInputProps<T>, 'value' | 'onChange'>) {\n    const field = useFieldContext<SelectState>();\n    return (\n        <IdSearchInput\n            {...props}\n            disabled={disabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            onBlur={_ => field.handleBlur()}\n            onChange={(e) => field.handleChange(e)}\n        />\n    );\n}"],"names":["IdSearchInput","value","disabled","searchFn","multiple","onChange","onBlur","accessor","idLookup","id","useId","search","_setSearch","useState","data","isError","isFetching","error","useQuery","namesQuery","jsx","Fragment","jsxs","PopoverTrigger","o","Button","Popover","Autocomplete","SearchField","Loader","Menu","s","item","MenuItem","TfIdSearchInput","props","field","useFieldContext","_","e"],"mappings":"ssBAsBO,SAASA,EAAsD,CAAE,MAAAC,EAAO,SAAAC,EAAW,GAAO,SAAAC,EAAU,SAAAC,EAAU,SAAAC,EAAU,OAAAC,EAAQ,SAAAC,EAAW,KAAM,SAAAC,CAAA,EAAiC,CACrL,MAAMC,EAAKC,EAAA,EACL,CAACC,EAAQC,CAAU,EAAIC,EAAS,EAAE,EAClC,CAAE,KAAAC,EAAM,QAAAC,EAAS,WAAAC,EAAY,MAAAC,CAAA,EAAUC,EAAS,CAClD,SAAU,CAACT,EAAIE,CAAM,EACrB,QAAS,IAAMR,EAASQ,CAAM,CAAA,CACjC,EAEKQ,EAAaD,EAAS,CACxB,SAAU,CAACT,EAAIR,CAAK,EACpB,QAAS,IAAMO,EAAU,MAAM,KAAKP,EAAM,MAAM,EAAE,IAAIQ,GAAMA,EAAG,SAAA,CAAU,CAAC,EAC1E,QAASD,GAAYP,EAAM,KAAO,CAAA,CACrC,EAMD,OAAOmB,EAAAC,EAAA,CACH,SAAAC,EAACC,EAAA,CAAe,aAAeC,GAAM,CAC5BA,GAEDlB,IAASL,CAAK,CAEtB,EACI,SAAA,CAAAmB,EAACK,GAAO,UAAW,YAAa,WAAYvB,EAAW,SAVpDiB,EAAW,MAAM,KAAK,GAAG,EAU+C,EAC3EC,EAACM,EAAA,CAAQ,UAAW,MAChB,SAAAJ,EAACK,EAAA,CACG,WAAYhB,EACZ,cAAeC,EAEf,SAAA,CAAAQ,EAACQ,EAAA,CAAY,UAAW,UAAW,UAAS,GAAC,EAC5CZ,GAAcI,EAACS,EAAA,CAAO,UAAU,SAAA,CAAU,EAC1C,CAACb,GAAc,CAACD,KAAYe,EAAA,CAAK,aAAc7B,EAAO,cAAeG,EAAW,WAAa,SAAU,kBAAoB2B,GAAM,CAC1H,OAAQA,GAAO,UACnB1B,EAAS0B,CAAC,CACd,EAAG,UAAW,UAAW,MAAOjB,EAAM,iBAAkB,IAAM,oBACzD,SAACkB,KAAWC,EAAA,CAA0B,GAAID,EAAKzB,CAAQ,EAAI,WAAK,MAAtCyB,EAAK,EAAsC,CAAA,CAC1E,EAEIjB,GAAWK,EAAC,MAAA,CAAI,UAAU,0BAA2B,WAAM,OAAA,CAAQ,CAAA,CAAA,CAAA,CAE3E,CACJ,CAAA,CAAA,CACJ,CAAA,CACJ,CAEJ,CAEO,SAASc,EAAwD,CAAE,SAAAhC,EAAU,GAAGiC,GAA0D,CAC7I,MAAMC,EAAQC,EAAA,EACd,OACIjB,EAACpB,EAAA,CACI,GAAGmC,EACJ,SAAUjC,GAAYkC,EAAM,KAAK,MAAM,aACvC,MAAOA,EAAM,MAAM,MACnB,OAAQE,GAAKF,EAAM,WAAA,EACnB,SAAWG,GAAMH,EAAM,aAAaG,CAAC,CAAA,CAAA,CAGjD"}

package/dist/components/inputs/input-otp.d.ts

@@ -0,0 +1,7 @@
+import { OTPInput } from 'input-otp';
+export declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput>): import("react/jsx-runtime").JSX.Element;
+export declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
+    index: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InputOTPSeparator({ ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;