@omniviewdev/ui 0.1.0

package/dist/table/ColumnFilter.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { Column } from '@tanstack/react-table';
+type Props = {
+    anchorEl: HTMLElement | undefined;
+    columns: Array<Column<any>>;
+    onClose: () => void;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+};
+declare const ColumnFilter: React.FC<Props>;
+export default ColumnFilter;

package/dist/table/DataTable.d.ts

@@ -0,0 +1,23 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { SxProps, Theme } from '@mui/material/styles';
+import { Density } from '../types';
+export interface DataTableProps<T = any> {
+    columns: ColumnDef<T, any>[];
+    data: T[];
+    density?: Density;
+    loading?: boolean;
+    error?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    onRowClick?: (row: T) => void;
+    selection?: 'none' | 'single' | 'multi';
+    stickyHeader?: boolean;
+    rowActions?: (row: T) => React.ReactNode;
+    expandable?: boolean;
+    renderDetail?: (row: T) => React.ReactNode;
+    sx?: SxProps<Theme>;
+}
+declare function DataTable<T = any>({ columns, data, density, loading, error, emptyState, onRowClick, selection, stickyHeader, rowActions, expandable, renderDetail, sx, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+export default DataTable;

package/dist/table/IDETable.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { ColumnDef, RowSelectionState } from '@tanstack/react-table';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface IDETableProps<T = any> {
+    /** TanStack column definitions */
+    columns: ColumnDef<T, any>[];
+    /** Row data */
+    data: T[];
+    /** Row height in pixels */
+    rowHeight?: number;
+    /** Whether to show checkboxes for row selection */
+    selection?: boolean;
+    /** Selected row IDs (controlled) */
+    selectedRows?: RowSelectionState;
+    /** Selection change handler */
+    onSelectionChange?: (selection: RowSelectionState) => void;
+    /** Called when a row is clicked */
+    onRowClick?: (row: T) => void;
+    /** Render actions column cell (e.g. "..." menu) */
+    rowActions?: (row: T) => React.ReactNode;
+    /** Whether to show the built-in search bar */
+    searchable?: boolean;
+    /** Placeholder for the search input */
+    searchPlaceholder?: string;
+    /** Controlled search value */
+    searchValue?: string;
+    /** Search change callback */
+    onSearchChange?: (value: string) => void;
+    /** Toolbar content rendered to the right of the search bar */
+    toolbar?: React.ReactNode;
+    /** Count label: e.g. "11 Pods" */
+    countLabel?: string;
+    /** Whether the table is loading */
+    loading?: boolean;
+    /** Number of skeleton rows to show */
+    skeletonRows?: number;
+    /** Empty state content */
+    emptyState?: React.ReactNode;
+    /** Sticky header */
+    stickyHeader?: boolean;
+    /** Style overrides */
+    sx?: SxProps<Theme>;
+}
+declare function IDETable<T = any>({ columns, data, rowHeight, selection, selectedRows: controlledSelection, onSelectionChange, onRowClick, rowActions, searchable, searchPlaceholder, searchValue: controlledSearchValue, onSearchChange, toolbar, countLabel, loading, skeletonRows, emptyState, stickyHeader, sx, }: IDETableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace IDETable {
+    var displayName: string;
+}
+export default IDETable;

package/dist/table/TableEmptyState.d.ts

@@ -0,0 +1,12 @@
+export interface TableEmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+    colSpan: number;
+}
+declare function TableEmptyState({ icon, title, description, action, colSpan, }: TableEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TableEmptyState {
+    var displayName: string;
+}
+export default TableEmptyState;

package/dist/table/TableSkeleton.d.ts

@@ -0,0 +1,11 @@
+import { Density } from '../types';
+export interface TableSkeletonProps {
+    columns: number;
+    rows?: number;
+    density?: Density;
+}
+declare function TableSkeleton({ columns, rows, density, }: TableSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TableSkeleton {
+    var displayName: string;
+}
+export default TableSkeleton;

package/dist/table/TableToolbar.d.ts

@@ -0,0 +1,15 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface TableToolbarProps {
+    title?: string;
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    filters?: React.ReactNode;
+    actions?: React.ReactNode;
+    selectedCount?: number;
+    sx?: SxProps<Theme>;
+}
+declare function TableToolbar({ title, searchValue, onSearch, filters, actions, selectedCount, sx, }: TableToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TableToolbar {
+    var displayName: string;
+}
+export default TableToolbar;

package/dist/table/index.d.ts

@@ -0,0 +1,12 @@
+export { default as ColumnFilter } from './ColumnFilter';
+export type { Memoizer, IdAccessor } from './types';
+export { default as DataTable } from './DataTable';
+export type { DataTableProps } from './DataTable';
+export { default as TableToolbar } from './TableToolbar';
+export type { TableToolbarProps } from './TableToolbar';
+export { default as TableSkeleton } from './TableSkeleton';
+export type { TableSkeletonProps } from './TableSkeleton';
+export { default as TableEmptyState } from './TableEmptyState';
+export type { TableEmptyStateProps } from './TableEmptyState';
+export { default as IDETable } from './IDETable';
+export type { IDETableProps } from './IDETable';

package/dist/table/types.d.ts

@@ -0,0 +1,4 @@
+/** Function or path to derive a memoization key from row data */
+export type Memoizer = string | string[] | ((data: any) => string);
+/** Function or path to derive a unique ID from row data */
+export type IdAccessor = string | ((data: any) => string);

package/dist/table.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),se=require("@mui/material/Card"),ae=require("@mui/material/CardContent"),ce=require("@mui/material/ClickAwayListener"),de=require("@mui/material/Divider"),ge=require("@mui/material/IconButton"),xe=require("@mui/material/Popper"),L=require("@mui/material/Stack"),ue=require("@mui/material/Switch"),v=require("@mui/material/Typography"),he=require("@mui/material/styles"),O=require("react-icons/lu"),c=require("@tanstack/react-table"),J=require("@mui/material/Table"),K=require("@mui/material/TableHead"),Q=require("@mui/material/TableBody"),f=require("@mui/material/TableRow"),m=require("@mui/material/TableCell"),q=require("@mui/material/Checkbox"),d=require("@mui/material/Box"),U=require("@mui/material/TableSortLabel"),A=require("./Skeleton-CfdQWLQM.cjs"),pe=require("./SearchInput-CFBBNdI2.cjs"),fe=require("@mui/material/InputBase"),me=require("@mui/icons-material/Search"),ve=he.styled("div")(({theme:r})=>({width:"max-content",borderRadius:"8px",border:`1px solid ${r.palette.divider}`,backgroundColor:r.palette.background.paper,boxShadow:r.palette.mode==="dark"?"0px 4px 8px rgb(0 0 0 / 0.7)":"0px 4px 8px rgb(0 0 0 / 0.1)",fontFamily:"var(--ov-font-ui)",fontSize:"0.875rem",zIndex:1})),X=({anchorEl:r,columns:u,onClose:a,onClick:s})=>{const g=!!r;return e.jsxs(p.Fragment,{children:[e.jsx(ge,{size:"small",onClick:s,sx:{border:"1px solid",borderColor:"divider"},children:e.jsx(O.LuSettings2,{size:20})}),e.jsx(xe,{style:{zIndex:1e3},id:"table-filter-menu",open:g,anchorEl:r,placement:"bottom-end",children:e.jsx(ce,{onClickAway:()=>{a()},children:e.jsx(ve,{children:e.jsxs(se,{variant:"outlined",sx:{maxHeight:"max-content",maxWidth:"100%",minWidth:"300px",p:1.25,gap:1.25},children:[e.jsxs(L,{direction:"row",spacing:.5,alignItems:"center",px:1,pt:.5,children:[e.jsx(O.LuColumns2,{size:14}),e.jsx(v,{variant:"subtitle2",children:"Columns"})]}),e.jsx(de,{}),e.jsx(ae,{sx:{display:"flex",flexDirection:"column",gap:1.5},children:u.filter(i=>i.getCanHide()).map(i=>e.jsxs(L,{direction:"row",spacing:1,alignItems:"center",component:"label",sx:{cursor:"pointer"},children:[e.jsx(ue,{size:"small",checked:i.getIsVisible(),onChange:i.getToggleVisibilityHandler()}),e.jsx(v,{variant:"caption",children:i.columnDef.header?.toString()})]},i.columnDef.id))})]})})})})]})};X.displayName="ColumnFilter";const G={compact:{rowHeight:28,cellPy:.25,cellPx:.75},comfortable:{rowHeight:40,cellPy:1,cellPx:1.5},spacious:{rowHeight:56,cellPy:2,cellPx:2}};function Y({columns:r,data:u,density:a="comfortable",loading:s=!1,error:g,emptyState:i,onRowClick:h,selection:x="none",stickyHeader:b=!1,rowActions:w,expandable:j=!1,renderDetail:k,sx:y}){const[S,P]=p.useState([]),[D,H]=p.useState({}),[_,R]=p.useState({}),T=G[a]||G.comfortable,C=p.useMemo(()=>{const n=[];return x==="multi"&&n.push({id:"__select",header:({table:o})=>e.jsx(q,{size:"small",checked:o.getIsAllRowsSelected(),indeterminate:o.getIsSomeRowsSelected(),onChange:o.getToggleAllRowsSelectedHandler(),sx:{p:0}}),cell:({row:o})=>e.jsx(q,{size:"small",checked:o.getIsSelected(),onChange:o.getToggleSelectedHandler(),sx:{p:0}}),size:40}),n.push(...r),w&&n.push({id:"__actions",header:"",cell:({row:o})=>w(o.original),size:60}),n},[r,x,w]),I=c.useReactTable({data:u,columns:C,state:{sorting:S,rowSelection:D,expanded:_},onSortingChange:P,onRowSelectionChange:H,onExpandedChange:R,getCoreRowModel:c.getCoreRowModel(),getSortedRowModel:c.getSortedRowModel(),getFilteredRowModel:c.getFilteredRowModel(),getExpandedRowModel:j?c.getExpandedRowModel():void 0,enableRowSelection:x!=="none",enableMultiRowSelection:x==="multi"});return g?e.jsx(d,{sx:{p:3},children:g}):e.jsx(d,{sx:{overflow:"auto",...typeof y=="object"&&!Array.isArray(y)?y:{}},children:e.jsxs(J,{size:"small",stickyHeader:b,sx:{"& td, & th":{py:T.cellPy,px:T.cellPx}},children:[e.jsx(K,{children:I.getHeaderGroups().map(n=>e.jsx(f,{children:n.headers.map(o=>e.jsx(m,{sx:{fontWeight:600,fontSize:"0.75rem",color:"var(--ov-fg-muted)",bgcolor:b?"var(--ov-bg-surface)":void 0,whiteSpace:"nowrap",width:o.getSize()},children:o.isPlaceholder?null:o.column.getCanSort()?e.jsx(U,{active:!!o.column.getIsSorted(),direction:o.column.getIsSorted()==="desc"?"desc":"asc",onClick:o.column.getToggleSortingHandler(),children:c.flexRender(o.column.columnDef.header,o.getContext())}):c.flexRender(o.column.columnDef.header,o.getContext())},o.id))},n.id))}),e.jsx(Q,{children:s?Array.from({length:5}).map((n,o)=>e.jsx(f,{children:C.map((B,F)=>e.jsx(m,{children:e.jsx(A.Skeleton,{variant:"text",width:"80%"})},F))},`skeleton-${o}`)):I.getRowModel().rows.length===0?i?e.jsx(f,{children:e.jsx(m,{colSpan:C.length,sx:{textAlign:"center",py:4},children:i})}):null:I.getRowModel().rows.map(n=>e.jsxs(e.Fragment,{children:[e.jsx(f,{hover:!0,selected:n.getIsSelected(),onClick:()=>{x==="single"&&n.toggleSelected(!n.getIsSelected()),j&&n.toggleExpanded(),h?.(n.original)},sx:{cursor:h||j||x==="single"?"pointer":void 0,height:T.rowHeight},children:n.getVisibleCells().map(o=>e.jsx(m,{sx:{fontSize:"0.8125rem",color:"var(--ov-fg-default)"},children:c.flexRender(o.column.columnDef.cell,o.getContext())},o.id))},n.id),j&&n.getIsExpanded()&&k&&e.jsx(f,{children:e.jsx(m,{colSpan:C.length,sx:{bgcolor:"var(--ov-bg-surface-inset)"},children:k(n.original)})},`${n.id}-detail`)]}))})]})})}Y.displayName="DataTable";function Z({title:r,searchValue:u,onSearch:a,filters:s,actions:g,selectedCount:i,sx:h}){return e.jsxs(d,{sx:{display:"flex",alignItems:"center",gap:1.5,px:1.5,py:1,borderBottom:"1px solid var(--ov-border-default)",...typeof h=="object"&&!Array.isArray(h)?h:{}},children:[r&&e.jsx(v,{variant:"subtitle2",sx:{fontWeight:600,color:"var(--ov-fg-base)",mr:1},children:r}),i!=null&&i>0&&e.jsxs(v,{variant:"body2",sx:{color:"var(--ov-accent-fg)",fontWeight:500},children:[i," selected"]}),a&&e.jsx(pe.SearchInput,{value:u??"",onChange:a,placeholder:"Search..."}),s&&e.jsx(d,{sx:{display:"flex",gap:.5,alignItems:"center"},children:s}),e.jsx(d,{sx:{flex:1}}),g&&e.jsx(d,{sx:{display:"flex",gap:.5,alignItems:"center"},children:g})]})}Z.displayName="TableToolbar";const Se={compact:.25,comfortable:1,spacious:2};function ee({columns:r,rows:u=5,density:a="comfortable"}){const s=Se[a]??1;return e.jsxs(J,{size:"small",children:[e.jsx(K,{children:e.jsx(f,{children:Array.from({length:r}).map((g,i)=>e.jsx(m,{sx:{py:s,fontWeight:600},children:e.jsx(A.Skeleton,{variant:"text",width:"60%"})},i))})}),e.jsx(Q,{children:Array.from({length:u}).map((g,i)=>e.jsx(f,{children:Array.from({length:r}).map((h,x)=>e.jsx(m,{sx:{py:s},children:e.jsx(A.Skeleton,{variant:"text",width:`${50+Math.random()*40}%`})},x))},i))})]})}ee.displayName="TableSkeleton";function te({icon:r,title:u,description:a,action:s,colSpan:g}){return e.jsx(f,{children:e.jsx(m,{colSpan:g,sx:{textAlign:"center",py:6,border:0},children:e.jsxs(d,{sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:1.5},children:[r&&e.jsx(d,{sx:{color:"var(--ov-fg-faint)",fontSize:40},children:r}),e.jsx(v,{variant:"subtitle1",sx:{fontWeight:600,color:"var(--ov-fg-base)"},children:u}),a&&e.jsx(v,{variant:"body2",sx:{color:"var(--ov-fg-muted)",maxWidth:360},children:a}),s&&e.jsx(d,{sx:{mt:1},children:s})]})})})}te.displayName="TableEmptyState";function oe({columns:r,data:u,rowHeight:a=30,selection:s=!1,selectedRows:g,onSelectionChange:i,onRowClick:h,rowActions:x,searchable:b=!1,searchPlaceholder:w="Search...",searchValue:j,onSearchChange:k,toolbar:y,countLabel:S,loading:P=!1,skeletonRows:D=8,emptyState:H,stickyHeader:_=!0,sx:R}){const[T,C]=p.useState([]),[I,n]=p.useState({}),[o,B]=p.useState(""),F=g??I,le=i??n,N=j??o,V=k??B,$=p.useMemo(()=>{const l=[];return s&&l.push({id:"__select",header:({table:t})=>e.jsx(q,{size:"small",checked:t.getIsAllRowsSelected(),indeterminate:t.getIsSomeRowsSelected(),onChange:t.getToggleAllRowsSelectedHandler(),sx:{p:0,color:"var(--ov-fg-faint)","&.Mui-checked, &.MuiCheckbox-indeterminate":{color:"var(--ov-accent-fg)"}}}),cell:({row:t})=>e.jsx(q,{size:"small",checked:t.getIsSelected(),onChange:t.getToggleSelectedHandler(),onClick:M=>M.stopPropagation(),sx:{p:0,color:"var(--ov-fg-faint)","&.Mui-checked":{color:"var(--ov-accent-fg)"}}}),size:32,enableSorting:!1}),l.push(...r),x&&l.push({id:"__actions",header:"",cell:({row:t})=>e.jsx(d,{onClick:M=>M.stopPropagation(),children:x(t.original)}),size:36,enableSorting:!1}),l},[r,s,x]),z=c.useReactTable({data:u,columns:$,state:{sorting:T,rowSelection:F,globalFilter:N},onSortingChange:C,onRowSelectionChange:le,onGlobalFilterChange:V,getCoreRowModel:c.getCoreRowModel(),getSortedRowModel:c.getSortedRowModel(),getFilteredRowModel:c.getFilteredRowModel(),enableRowSelection:s,enableMultiRowSelection:s}),re=p.useCallback(l=>{h?.(l)},[h]),ne=a+2,E="8px",W="0px";return e.jsxs(d,{sx:{display:"flex",flexDirection:"column",flex:1,minHeight:0,bgcolor:"var(--ov-bg-base)",...typeof R=="object"&&!Array.isArray(R)?R:{}},children:[(b||y||S)&&e.jsxs(d,{sx:{display:"flex",alignItems:"center",gap:1,px:1,py:.5,borderBottom:"1px solid var(--ov-border-default)",bgcolor:"var(--ov-bg-surface)",flexShrink:0},children:[b&&e.jsxs(d,{sx:{display:"flex",alignItems:"center",flex:1,maxWidth:360,height:28,border:"1px solid var(--ov-border-default)",borderRadius:"4px",bgcolor:"var(--ov-bg-base)",px:.75,"&:focus-within":{borderColor:"var(--ov-accent)"}},children:[e.jsx(me,{sx:{fontSize:14,color:"var(--ov-fg-faint)",mr:.5}}),e.jsx(fe,{value:N,onChange:l=>V(l.target.value),placeholder:S?`Search ${S}...`:w,sx:{flex:1,fontSize:"0.75rem",color:"var(--ov-fg-default)","& input":{py:0,px:0},"& input::placeholder":{color:"var(--ov-fg-faint)",opacity:1}}})]}),!b&&S&&e.jsx(v,{sx:{fontSize:"0.75rem",color:"var(--ov-fg-muted)",fontWeight:500},children:S}),e.jsx(d,{sx:{flex:1}}),y]}),e.jsx(d,{sx:{flex:1,overflow:"auto",minHeight:0},children:e.jsxs("table",{style:{width:"100%",borderCollapse:"collapse",fontFamily:"var(--ov-font-ui)",fontSize:"0.75rem",tableLayout:"fixed"},children:[e.jsx("colgroup",{children:z.getAllColumns().map(l=>e.jsx("col",{style:{width:l.getSize()!==150?l.getSize():void 0}},l.id))}),e.jsx("thead",{children:z.getHeaderGroups().map(l=>e.jsx("tr",{style:{height:ne,..._?{position:"sticky",top:0,zIndex:2}:{}},children:l.headers.map(t=>e.jsx("th",{style:{padding:`${W} ${E}`,textAlign:"left",fontWeight:600,fontSize:"0.6875rem",color:"var(--ov-fg-muted)",backgroundColor:"var(--ov-bg-surface)",borderBottom:"1px solid var(--ov-border-default)",whiteSpace:"nowrap",overflow:"hidden",userSelect:"none",letterSpacing:"0.01em"},children:t.isPlaceholder?null:t.column.getCanSort()?e.jsx(U,{active:!!t.column.getIsSorted(),direction:t.column.getIsSorted()==="desc"?"desc":"asc",onClick:t.column.getToggleSortingHandler(),sx:{fontSize:"inherit",fontWeight:"inherit",color:"inherit !important","& .MuiTableSortLabel-icon":{fontSize:12,opacity:.5}},children:c.flexRender(t.column.columnDef.header,t.getContext())}):c.flexRender(t.column.columnDef.header,t.getContext())},t.id))},l.id))}),e.jsx("tbody",{children:P?Array.from({length:D}).map((l,t)=>e.jsx("tr",{style:{height:a},children:$.map((M,ie)=>e.jsx("td",{style:{padding:`${W} ${E}`,borderBottom:"1px solid var(--ov-border-muted)"},children:e.jsx(A.Skeleton,{variant:"text",width:"70%",sx:{fontSize:"0.75rem"}})},ie))},`skel-${t}`)):z.getRowModel().rows.length===0?e.jsx("tr",{children:e.jsx("td",{colSpan:$.length,style:{textAlign:"center",padding:"32px 8px",color:"var(--ov-fg-faint)"},children:H??e.jsx(v,{sx:{fontSize:"0.75rem",color:"var(--ov-fg-faint)"},children:"No items to display"})})}):z.getRowModel().rows.map(l=>e.jsx("tr",{onClick:()=>re(l.original),style:{height:a,cursor:h?"pointer":void 0,backgroundColor:l.getIsSelected()?"var(--ov-accent-subtle)":void 0},onMouseEnter:t=>{l.getIsSelected()||(t.currentTarget.style.backgroundColor="var(--ov-state-hover)")},onMouseLeave:t=>{t.currentTarget.style.backgroundColor=l.getIsSelected()?"var(--ov-accent-subtle)":""},children:l.getVisibleCells().map(t=>e.jsx("td",{style:{padding:`${W} ${E}`,fontSize:"0.75rem",color:"var(--ov-fg-default)",borderBottom:"1px solid var(--ov-border-muted)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",lineHeight:`${a}px`},children:c.flexRender(t.column.columnDef.cell,t.getContext())},t.id))},l.id))})]})})]})}oe.displayName="IDETable";exports.ColumnFilter=X;exports.DataTable=Y;exports.IDETable=oe;exports.TableEmptyState=te;exports.TableSkeleton=ee;exports.TableToolbar=Z;