@undevy-org/tablewright 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (170) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +262 -0
  3. package/dist/es/components/dashboard/ReportSummaryCard.js +67 -0
  4. package/dist/es/components/data-table/AppliedStateChips.js +113 -0
  5. package/dist/es/components/data-table/ColumnFilterPopover.js +548 -0
  6. package/dist/es/components/data-table/ColumnHeaderMenu.js +144 -0
  7. package/dist/es/components/data-table/CompoundFilterPopover.js +508 -0
  8. package/dist/es/components/data-table/CopyButton.js +35 -0
  9. package/dist/es/components/data-table/CopyableText.js +26 -0
  10. package/dist/es/components/data-table/DataTableShell.js +145 -0
  11. package/dist/es/components/data-table/DrawerActionGroup.js +59 -0
  12. package/dist/es/components/data-table/DrawerEntityCard.js +21 -0
  13. package/dist/es/components/data-table/DrawerField.js +10 -0
  14. package/dist/es/components/data-table/DrawerFlagItem.js +20 -0
  15. package/dist/es/components/data-table/DrawerSection.js +26 -0
  16. package/dist/es/components/data-table/DrawerShell.js +141 -0
  17. package/dist/es/components/data-table/DrawerSummaryCard.js +11 -0
  18. package/dist/es/components/data-table/EmptyState.js +14 -0
  19. package/dist/es/components/data-table/ExpiryTimestampCell.js +43 -0
  20. package/dist/es/components/data-table/FilterChip.js +47 -0
  21. package/dist/es/components/data-table/FilterFormPanel.js +357 -0
  22. package/dist/es/components/data-table/FilterFormToggle.js +77 -0
  23. package/dist/es/components/data-table/FilterPopoverFooter.js +19 -0
  24. package/dist/es/components/data-table/FilterToolbar.js +131 -0
  25. package/dist/es/components/data-table/FlatColumnToggle.js +46 -0
  26. package/dist/es/components/data-table/GapIndicator.js +29 -0
  27. package/dist/es/components/data-table/GroupedColumnToggle.js +112 -0
  28. package/dist/es/components/data-table/RowActionsMenu.js +74 -0
  29. package/dist/es/components/data-table/RowControlCell.js +104 -0
  30. package/dist/es/components/data-table/SortableHeader.js +102 -0
  31. package/dist/es/components/data-table/TableFooter.js +132 -0
  32. package/dist/es/components/data-table/TableLayout.js +14 -0
  33. package/dist/es/components/data-table/TimestampCell.js +16 -0
  34. package/dist/es/components/data-table/TwoPanelMenu.js +64 -0
  35. package/dist/es/components/data-table/ViewChip.js +25 -0
  36. package/dist/es/components/data-table/cells/AmountCell.js +127 -0
  37. package/dist/es/components/data-table/cells/ConfirmedAmountCell.js +115 -0
  38. package/dist/es/components/data-table/cells/CurrencyAmountCell.js +26 -0
  39. package/dist/es/components/data-table/cells/DualLineCell.js +59 -0
  40. package/dist/es/components/data-table/cells/EnumBadgeCell.js +9 -0
  41. package/dist/es/components/data-table/cells/MonoIdCell.js +31 -0
  42. package/dist/es/components/data-table/hooks/use-column-resize.js +39 -0
  43. package/dist/es/components/data-table/hooks/use-row-drag.js +40 -0
  44. package/dist/es/components/data-table/hooks/use-table-pagination.js +14 -0
  45. package/dist/es/components/data-table/hooks/use-table-sort.js +35 -0
  46. package/dist/es/components/data-table/managed-filters.js +34 -0
  47. package/dist/es/components/data-table/sticky-utils.js +25 -0
  48. package/dist/es/components/layout/AppShell.js +113 -0
  49. package/dist/es/components/layout/Sidebar.js +128 -0
  50. package/dist/es/components/layout/SidebarAccountMenu.js +129 -0
  51. package/dist/es/components/layout/SidebarUser.js +38 -0
  52. package/dist/es/components/layout/TopBar.js +25 -0
  53. package/dist/es/components/layout/app-shell-context.js +9 -0
  54. package/dist/es/components/ui/badge.js +31 -0
  55. package/dist/es/components/ui/button-footer.js +25 -0
  56. package/dist/es/components/ui/button.js +44 -0
  57. package/dist/es/components/ui/checkbox.js +24 -0
  58. package/dist/es/components/ui/combobox.js +179 -0
  59. package/dist/es/components/ui/dialog.js +80 -0
  60. package/dist/es/components/ui/dropdown-menu.js +66 -0
  61. package/dist/es/components/ui/input.js +24 -0
  62. package/dist/es/components/ui/popover.js +33 -0
  63. package/dist/es/components/ui/segmented-control.js +60 -0
  64. package/dist/es/components/ui/select.js +66 -0
  65. package/dist/es/components/ui/tabs.js +41 -0
  66. package/dist/es/components/ui/theme-switch.js +47 -0
  67. package/dist/es/constants/drawer.js +4 -0
  68. package/dist/es/context/drawer-expand-context.js +10 -0
  69. package/dist/es/context/portal-container-context.js +10 -0
  70. package/dist/es/hooks/table-orchestration-store.js +165 -0
  71. package/dist/es/hooks/use-scroll-activity.js +33 -0
  72. package/dist/es/hooks/useRowDragOverride.js +18 -0
  73. package/dist/es/hooks/useTableOrchestration.js +452 -0
  74. package/dist/es/index.js +199 -0
  75. package/dist/es/lib/column-gaps.js +23 -0
  76. package/dist/es/lib/filter-stats.js +67 -0
  77. package/dist/es/lib/format-enum.js +6 -0
  78. package/dist/es/lib/format-timestamp.js +37 -0
  79. package/dist/es/lib/style-scope.js +4 -0
  80. package/dist/es/lib/utils.js +8 -0
  81. package/dist/fonts.css +5 -0
  82. package/dist/preflight.css +502 -0
  83. package/dist/styles.css +1731 -0
  84. package/dist/tablewright.cjs +5473 -0
  85. package/dist/tablewright.css +1579 -0
  86. package/dist/tokens.css +150 -0
  87. package/dist/types/components/dashboard/ReportSummaryCard.d.ts +15 -0
  88. package/dist/types/components/data-table/AppliedStateChips.d.ts +28 -0
  89. package/dist/types/components/data-table/ColumnFilterPopover.d.ts +14 -0
  90. package/dist/types/components/data-table/ColumnHeaderMenu.d.ts +27 -0
  91. package/dist/types/components/data-table/CompoundFilterPopover.d.ts +14 -0
  92. package/dist/types/components/data-table/CopyButton.d.ts +8 -0
  93. package/dist/types/components/data-table/CopyableText.d.ts +10 -0
  94. package/dist/types/components/data-table/DataTableShell.d.ts +30 -0
  95. package/dist/types/components/data-table/DrawerActionGroup.d.ts +8 -0
  96. package/dist/types/components/data-table/DrawerEntityCard.d.ts +13 -0
  97. package/dist/types/components/data-table/DrawerField.d.ts +7 -0
  98. package/dist/types/components/data-table/DrawerFlagItem.d.ts +10 -0
  99. package/dist/types/components/data-table/DrawerSection.d.ts +8 -0
  100. package/dist/types/components/data-table/DrawerShell.d.ts +33 -0
  101. package/dist/types/components/data-table/DrawerSummaryCard.d.ts +7 -0
  102. package/dist/types/components/data-table/EmptyState.d.ts +6 -0
  103. package/dist/types/components/data-table/ExpiryTimestampCell.d.ts +6 -0
  104. package/dist/types/components/data-table/FilterChip.d.ts +8 -0
  105. package/dist/types/components/data-table/FilterFormPanel.d.ts +34 -0
  106. package/dist/types/components/data-table/FilterFormToggle.d.ts +18 -0
  107. package/dist/types/components/data-table/FilterPopoverFooter.d.ts +9 -0
  108. package/dist/types/components/data-table/FilterToolbar.d.ts +29 -0
  109. package/dist/types/components/data-table/FlatColumnToggle.d.ts +10 -0
  110. package/dist/types/components/data-table/GapIndicator.d.ts +11 -0
  111. package/dist/types/components/data-table/GroupedColumnToggle.d.ts +12 -0
  112. package/dist/types/components/data-table/RowActionsMenu.d.ts +10 -0
  113. package/dist/types/components/data-table/RowControlCell.d.ts +16 -0
  114. package/dist/types/components/data-table/SortableHeader.d.ts +16 -0
  115. package/dist/types/components/data-table/TableFooter.d.ts +31 -0
  116. package/dist/types/components/data-table/TableLayout.d.ts +12 -0
  117. package/dist/types/components/data-table/TimestampCell.d.ts +3 -0
  118. package/dist/types/components/data-table/TwoPanelMenu.d.ts +22 -0
  119. package/dist/types/components/data-table/ViewChip.d.ts +6 -0
  120. package/dist/types/components/data-table/cells/AmountCell.d.ts +11 -0
  121. package/dist/types/components/data-table/cells/ConfirmedAmountCell.d.ts +10 -0
  122. package/dist/types/components/data-table/cells/CurrencyAmountCell.d.ts +8 -0
  123. package/dist/types/components/data-table/cells/DualLineCell.d.ts +44 -0
  124. package/dist/types/components/data-table/cells/EnumBadgeCell.d.ts +9 -0
  125. package/dist/types/components/data-table/cells/MonoIdCell.d.ts +19 -0
  126. package/dist/types/components/data-table/filter-types.d.ts +79 -0
  127. package/dist/types/components/data-table/hooks/use-column-resize.d.ts +7 -0
  128. package/dist/types/components/data-table/hooks/use-row-drag.d.ts +14 -0
  129. package/dist/types/components/data-table/hooks/use-table-pagination.d.ts +10 -0
  130. package/dist/types/components/data-table/hooks/use-table-sort.d.ts +6 -0
  131. package/dist/types/components/data-table/managed-filters.d.ts +18 -0
  132. package/dist/types/components/data-table/sticky-utils.d.ts +4 -0
  133. package/dist/types/components/data-table/types.d.ts +35 -0
  134. package/dist/types/components/layout/AppShell.d.ts +23 -0
  135. package/dist/types/components/layout/Sidebar.d.ts +16 -0
  136. package/dist/types/components/layout/SidebarAccountMenu.d.ts +20 -0
  137. package/dist/types/components/layout/SidebarUser.d.ts +8 -0
  138. package/dist/types/components/layout/TopBar.d.ts +7 -0
  139. package/dist/types/components/layout/app-shell-context.d.ts +8 -0
  140. package/dist/types/components/layout/index.d.ts +10 -0
  141. package/dist/types/components/layout/types.d.ts +11 -0
  142. package/dist/types/components/ui/badge.d.ts +9 -0
  143. package/dist/types/components/ui/button-footer.d.ts +7 -0
  144. package/dist/types/components/ui/button.d.ts +11 -0
  145. package/dist/types/components/ui/checkbox.d.ts +4 -0
  146. package/dist/types/components/ui/combobox.d.ts +92 -0
  147. package/dist/types/components/ui/dialog.d.ts +15 -0
  148. package/dist/types/components/ui/dropdown-menu.d.ts +10 -0
  149. package/dist/types/components/ui/input.d.ts +6 -0
  150. package/dist/types/components/ui/popover.d.ts +7 -0
  151. package/dist/types/components/ui/segmented-control.d.ts +17 -0
  152. package/dist/types/components/ui/select.d.ts +8 -0
  153. package/dist/types/components/ui/tabs.d.ts +10 -0
  154. package/dist/types/components/ui/theme-switch.d.ts +12 -0
  155. package/dist/types/constants/drawer.d.ts +1 -0
  156. package/dist/types/context/drawer-expand-context.d.ts +7 -0
  157. package/dist/types/context/portal-container-context.d.ts +14 -0
  158. package/dist/types/hooks/table-orchestration-store.d.ts +75 -0
  159. package/dist/types/hooks/use-scroll-activity.d.ts +1 -0
  160. package/dist/types/hooks/useDemoTheme.d.ts +8 -0
  161. package/dist/types/hooks/useRowDragOverride.d.ts +6 -0
  162. package/dist/types/hooks/useTableOrchestration.d.ts +115 -0
  163. package/dist/types/index.d.ts +107 -0
  164. package/dist/types/lib/column-gaps.d.ts +3 -0
  165. package/dist/types/lib/filter-stats.d.ts +2 -0
  166. package/dist/types/lib/format-enum.d.ts +1 -0
  167. package/dist/types/lib/format-timestamp.d.ts +4 -0
  168. package/dist/types/lib/style-scope.d.ts +19 -0
  169. package/dist/types/lib/utils.d.ts +2 -0
  170. package/package.json +114 -0
@@ -0,0 +1,8 @@
1
+ import * as React from "react";
2
+ import * as SelectPrimitive from "@radix-ui/react-select";
3
+ declare const Select: React.FC<SelectPrimitive.SelectProps>;
4
+ declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
5
+ declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
6
+ declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
7
+ declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
8
+ export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue };
@@ -0,0 +1,10 @@
1
+ import * as React from "react";
2
+ import * as TabsPrimitive from "@radix-ui/react-tabs";
3
+ declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
4
+ declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
5
+ interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
6
+ count?: React.ReactNode;
7
+ }
8
+ declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
9
+ declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
10
+ export { Tabs, TabsList, TabsTrigger, TabsContent };
@@ -0,0 +1,12 @@
1
+ import * as React from "react";
2
+ type ThemeSwitchValue = "light" | "dark";
3
+ export interface ThemeSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
4
+ value: ThemeSwitchValue;
5
+ variant?: "toolbar" | "icon";
6
+ label?: string;
7
+ onValueChange?: (value: ThemeSwitchValue) => void;
8
+ lightHref?: string;
9
+ darkHref?: string;
10
+ }
11
+ export declare function ThemeSwitch({ value, variant, label, onValueChange, lightHref, darkHref, className, ...props }: ThemeSwitchProps): React.JSX.Element;
12
+ export {};
@@ -0,0 +1 @@
1
+ export declare const DRAWER_SIZE: "540px";
@@ -0,0 +1,7 @@
1
+ declare const DrawerExpandContext: import("react").Context<boolean>;
2
+ /**
3
+ * Returns true when rendered inside an expanded DrawerShell modal.
4
+ * Safe to call outside DrawerShell — returns false.
5
+ */
6
+ export declare function useDrawerExpanded(): boolean;
7
+ export { DrawerExpandContext };
@@ -0,0 +1,14 @@
1
+ declare const PortalContainerContext: import("react").Context<HTMLElement | null>;
2
+ /**
3
+ * Container element that Radix-based portals (dropdown, popover, dialog,
4
+ * select) should render into, so their content resolves CSS custom
5
+ * properties from the same DOM subtree as the rest of the page instead of
6
+ * defaulting to `document.body`, which sits outside any `data-theme`
7
+ * wrapper. Returns null when no provider is present, in which case each
8
+ * primitive's own Radix `Portal` falls back to its default (`document.body`)
9
+ * — verified by reading `@radix-ui/react-portal`'s compiled source directly:
10
+ * `const container = containerProp || mounted && globalThis?.document?.body;`, so `null`
11
+ * and `undefined` both take the same fallback path.
12
+ */
13
+ export declare function usePortalContainer(): HTMLElement | null;
14
+ export { PortalContainerContext };
@@ -0,0 +1,75 @@
1
+ import type { VisibilityState } from "@tanstack/react-table";
2
+ import type { ActiveFilter, ActiveFilterValue, ColumnFilterConfig } from "../components/data-table/filter-types.js";
3
+ export interface TableOrchestrationState<TViewKey extends string = string> {
4
+ searchInput: string;
5
+ searchQuery: string;
6
+ columnFilters: ActiveFilter[];
7
+ newestFilterColumnId: string | null;
8
+ requestOpenFilterId: string | null;
9
+ currentSort: {
10
+ columnId: string;
11
+ direction: "asc" | "desc";
12
+ } | null;
13
+ columnVisibility: VisibilityState;
14
+ page: number;
15
+ rowsPerPage: number;
16
+ density: "normal" | "dense";
17
+ isRefreshing: boolean;
18
+ selectedIds: Set<string>;
19
+ activeView: TViewKey;
20
+ columnsMenuOpen: boolean;
21
+ selectedRowId: string | null;
22
+ }
23
+ export interface TableOrchestrationActions<TViewKey extends string = string> {
24
+ setSearchInput: (v: string) => void;
25
+ submitSearch: () => void;
26
+ setColumnFilters: (filters: ActiveFilter[]) => void;
27
+ addColumnFilter: (columnId: string, defaultValue: ActiveFilterValue) => void;
28
+ removeColumnFilter: (columnId: string) => void;
29
+ changeColumnFilter: (columnId: string, value: ActiveFilterValue) => void;
30
+ setColumnFilter: (columnId: string, value: ActiveFilterValue) => void;
31
+ setNewestFilterColumnId: (v: string | null) => void;
32
+ setRequestOpenFilterId: (v: string | null) => void;
33
+ setCurrentSort: (next: {
34
+ columnId: string;
35
+ direction: "asc" | "desc";
36
+ } | null) => void;
37
+ toggleSort: (columnId: string, direction: "asc" | "desc") => void;
38
+ removeSort: () => void;
39
+ setColumnVisibility: (next: VisibilityState | ((prev: VisibilityState) => VisibilityState)) => void;
40
+ hideColumn: (columnId: string) => void;
41
+ showColumns: (columnIds: string[]) => void;
42
+ resetColumns: () => void;
43
+ setPage: (p: number) => void;
44
+ setRowsPerPage: (n: number) => void;
45
+ setDensity: (v: "normal" | "dense") => void;
46
+ startRefresh: (durationMs?: number) => void;
47
+ setSelectedIds: (next: Set<string> | ((prev: Set<string>) => Set<string>)) => void;
48
+ toggleRowSelection: (id: string) => void;
49
+ toggleHeaderCheck: (pageIds: string[], allOnPageSelected: boolean) => void;
50
+ setActiveView: (v: TViewKey) => void;
51
+ applyPreset: (preset: {
52
+ key: TViewKey;
53
+ filters: ActiveFilter[];
54
+ sort: {
55
+ columnId: string;
56
+ direction: "asc" | "desc";
57
+ } | null;
58
+ columnVisibility?: VisibilityState;
59
+ }) => void;
60
+ goCustom: () => void;
61
+ clearAll: (defaultViewKey: TViewKey) => void;
62
+ setColumnsMenuOpen: (v: boolean) => void;
63
+ setSelectedRowId: (v: string | null) => void;
64
+ toggleSelectedRowId: (id: string) => void;
65
+ }
66
+ export type TableOrchestrationStore<TViewKey extends string = string> = TableOrchestrationState<TViewKey> & TableOrchestrationActions<TViewKey>;
67
+ export interface CreateTableStoreInput<TViewKey extends string> {
68
+ defaultViewKey: TViewKey;
69
+ initialColumnVisibility?: VisibilityState;
70
+ initialRowsPerPage: number;
71
+ }
72
+ declare const defaultValueForFilter: (cfg: ColumnFilterConfig) => ActiveFilterValue;
73
+ export declare function createTableOrchestrationStore<TViewKey extends string>({ defaultViewKey, initialColumnVisibility, initialRowsPerPage, }: CreateTableStoreInput<TViewKey>): import("zustand").StoreApi<TableOrchestrationStore<TViewKey>>;
74
+ export type TableOrchestrationStoreApi<TViewKey extends string = string> = ReturnType<typeof createTableOrchestrationStore<TViewKey>>;
75
+ export { defaultValueForFilter };
@@ -0,0 +1 @@
1
+ export declare function useScrollActivity<T extends HTMLElement>(idleMs?: number): (nextNode: T | null) => void;
@@ -0,0 +1,8 @@
1
+ export type DemoTheme = "light" | "dark";
2
+ /**
3
+ * Theme state for story demos that render a live theme switch (e.g.
4
+ * SidebarAccountMenu). Callers apply the returned theme to a `data-theme`
5
+ * attribute on a wrapper element around their own content — this hook only
6
+ * owns the state and its localStorage persistence, not the DOM write.
7
+ */
8
+ export declare function useDemoTheme(): [DemoTheme, (theme: DemoTheme) => void];
@@ -0,0 +1,6 @@
1
+ import type { UseRowDragResult } from "../components/data-table/hooks/use-row-drag.js";
2
+ export interface UseRowDragOverrideResult<TRow> {
3
+ displayRows: TRow[];
4
+ rowDrag: UseRowDragResult;
5
+ }
6
+ export declare function useRowDragOverride<TRow extends object>(paginatedRows: TRow[]): UseRowDragOverrideResult<TRow>;
@@ -0,0 +1,115 @@
1
+ import type { VisibilityState } from "@tanstack/react-table";
2
+ import type { ColumnMetaDef, SortDirection } from "../components/data-table/types.js";
3
+ import type { ActiveFilter, ActiveFilterValue, ColumnFilterConfig, ColumnGap, ColumnGroup, FilterStatsSlice, ViewPreset } from "../components/data-table/filter-types.js";
4
+ import { type TableOrchestrationStoreApi } from "./table-orchestration-store.js";
5
+ export interface TableOrchestrationConfig<TRow extends object, TViewKey extends string> {
6
+ rows: TRow[];
7
+ getRowId: (row: TRow) => string;
8
+ filterRow: (row: TRow, filter: ActiveFilter) => boolean;
9
+ getSortValue: (row: TRow, columnId: string) => string | number;
10
+ getSearchText: (row: TRow) => string;
11
+ filterConfigs: Record<string, ColumnFilterConfig>;
12
+ columnMeta: Record<string, ColumnMetaDef>;
13
+ toggleableColumnIds: readonly string[];
14
+ rowsPerPageOptions: readonly number[];
15
+ viewPresets: ViewPreset<TRow, TViewKey>[];
16
+ defaultViewKey: TViewKey;
17
+ columnGroups?: ColumnGroup[];
18
+ initialColumnVisibility?: Record<string, boolean>;
19
+ /** Restore previously-persisted column widths (px), keyed by column id. */
20
+ initialColumnWidths?: Record<string, number>;
21
+ /**
22
+ * Responsive column priorities: columns mapped to `3` (детали) collapse
23
+ * below `wideBreakpoint`. `2` (второстепенные) is NOT auto-hidden — without a
24
+ * Compact card layout it would strand data on tables without a row drawer;
25
+ * react to `isCompact` to build one. Unmapped columns are P1 and always
26
+ * render. The result is surfaced as `responsiveHiddenColumnIds` for the
27
+ * shell — it never mutates the table's own columnVisibility, so manual
28
+ * hiding stays independent.
29
+ */
30
+ columnPriorities?: Record<string, 2 | 3>;
31
+ /** Width (px) at/above which every column shows. @default 1280 */
32
+ wideBreakpoint?: number;
33
+ /**
34
+ * Width (px) below which `isCompact` flips true (the Compact tier) so consumers can switch to a card layout. It does NOT auto-hide P2
35
+ * columns. @default 768
36
+ */
37
+ compactBreakpoint?: number;
38
+ }
39
+ export interface TableOrchestrationReturn<TRow extends object, TViewKey extends string> {
40
+ searchInput: string;
41
+ setSearchInput: (v: string) => void;
42
+ searchQuery: string;
43
+ columnFilters: ActiveFilter[];
44
+ newestFilterColumnId: string | null;
45
+ requestOpenFilterId: string | null;
46
+ currentSort: {
47
+ columnId: string;
48
+ direction: "asc" | "desc";
49
+ } | null;
50
+ columnVisibility: VisibilityState;
51
+ setColumnVisibility: React.Dispatch<React.SetStateAction<VisibilityState>>;
52
+ page: number;
53
+ rowsPerPage: number;
54
+ density: "normal" | "dense";
55
+ setDensity: (v: "normal" | "dense") => void;
56
+ isRefreshing: boolean;
57
+ selectedIds: Set<string>;
58
+ setSelectedIds: React.Dispatch<React.SetStateAction<Set<string>>>;
59
+ activeView: TViewKey;
60
+ columnsMenuOpen: boolean;
61
+ setColumnsMenuOpen: (v: boolean) => void;
62
+ selectedRowId: string | null;
63
+ setSelectedRowId: (v: string | null) => void;
64
+ sortState: Record<string, SortDirection>;
65
+ activePreset: ViewPreset<TRow, TViewKey>;
66
+ filteredRows: TRow[];
67
+ paginatedRows: TRow[];
68
+ totalPages: number;
69
+ safePage: number;
70
+ pageNumbers: number[];
71
+ columnFilterStats: Record<string, FilterStatsSlice>;
72
+ columnGaps: ColumnGap[];
73
+ extendedColumnMeta: Record<string, ColumnMetaDef>;
74
+ extendedWidths: Record<string, number>;
75
+ activeCustomFilterChip: {
76
+ label: string;
77
+ value: string;
78
+ } | null;
79
+ hiddenColumnsCount: number;
80
+ /** Columns collapsed by the responsive priority rule at the current width. */
81
+ responsiveHiddenColumnIds: ReadonlySet<string>;
82
+ /** True when viewport width is below `compactBreakpoint` (Compact tier). */
83
+ isCompact: boolean;
84
+ pageIds: Set<string>;
85
+ allOnPageSelected: boolean;
86
+ headerCheckState: boolean | "indeterminate";
87
+ getSelectedIds: () => Set<string>;
88
+ getHeaderCheckState: () => boolean | "indeterminate";
89
+ handleSearchSubmit: (e: React.FormEvent) => void;
90
+ handleHeaderSort: (columnId: string, direction: "asc" | "desc") => void;
91
+ handleViewChange: (key: TViewKey) => void;
92
+ handleAddColumnFilter: (columnId: string) => void;
93
+ handleOpenExistingFilter: (columnId: string) => void;
94
+ handleRequestOpenHandled: () => void;
95
+ handleRemoveColumnFilter: (columnId: string) => void;
96
+ handleChangeColumnFilter: (columnId: string, value: ActiveFilterValue) => void;
97
+ handleSetColumnFilter: (columnId: string, value: ActiveFilterValue) => void;
98
+ handleHeaderFilterClick: (columnId: string) => void;
99
+ handleHideColumn: (columnId: string) => void;
100
+ handleResetColumns: () => void;
101
+ handleRemoveSort: () => void;
102
+ handleRemoveCustomFilter: () => void;
103
+ handleClearAll: () => void;
104
+ handleRefresh: () => void;
105
+ handleToggleRowSelection: (id: string) => void;
106
+ handleToggleHeaderCheck: () => void;
107
+ handleExpandRow: (row: TRow, e: React.MouseEvent) => void;
108
+ handleExpandGap: (hiddenIds: string[]) => void;
109
+ handlePageChange: (p: number) => void;
110
+ handleRowsPerPageChange: (value: number) => void;
111
+ widths: Record<string, number>;
112
+ onPointerDown: (columnId: string, e: React.PointerEvent) => void;
113
+ store: TableOrchestrationStoreApi<TViewKey>;
114
+ }
115
+ export declare function useTableOrchestration<TRow extends object, TViewKey extends string>(config: TableOrchestrationConfig<TRow, TViewKey>): TableOrchestrationReturn<TRow, TViewKey>;
@@ -0,0 +1,107 @@
1
+ export { Badge, badgeVariants } from "./components/ui/badge.js";
2
+ export type { BadgeProps } from "./components/ui/badge.js";
3
+ export { Button, buttonVariants } from "./components/ui/button.js";
4
+ export type { ButtonProps } from "./components/ui/button.js";
5
+ export * from "./components/ui/checkbox.js";
6
+ export * from "./components/ui/dialog.js";
7
+ export * from "./components/ui/dropdown-menu.js";
8
+ export * from "./components/ui/input.js";
9
+ export * from "./components/ui/popover.js";
10
+ export * from "./components/ui/select.js";
11
+ export * from "./components/ui/tabs.js";
12
+ export { Combobox, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, } from "./components/ui/combobox.js";
13
+ export type { ComboboxProps, ComboboxOption } from "./components/ui/combobox.js";
14
+ export { ButtonFooter } from "./components/ui/button-footer.js";
15
+ export type { ButtonFooterProps } from "./components/ui/button-footer.js";
16
+ export { ThemeSwitch } from "./components/ui/theme-switch.js";
17
+ export type { ThemeSwitchProps } from "./components/ui/theme-switch.js";
18
+ export { SegmentedControl } from "./components/ui/segmented-control.js";
19
+ export type { SegmentedControlProps, SegmentedControlOption } from "./components/ui/segmented-control.js";
20
+ export { CopyButton } from "./components/data-table/CopyButton.js";
21
+ export { CopyableText } from "./components/data-table/CopyableText.js";
22
+ export { DataTableShell } from "./components/data-table/DataTableShell.js";
23
+ export type { DataTableDrawer, DataTableShellProps, } from "./components/data-table/DataTableShell.js";
24
+ export { DrawerActionGroup } from "./components/data-table/DrawerActionGroup.js";
25
+ export { DrawerEntityCard } from "./components/data-table/DrawerEntityCard.js";
26
+ export { DrawerField } from "./components/data-table/DrawerField.js";
27
+ export { DrawerFlagItem, DrawerFlagGrid } from "./components/data-table/DrawerFlagItem.js";
28
+ export { DrawerSection } from "./components/data-table/DrawerSection.js";
29
+ export { DrawerShell } from "./components/data-table/DrawerShell.js";
30
+ export type { DrawerMode } from "./components/data-table/DrawerShell.js";
31
+ export { DrawerSummaryCard } from "./components/data-table/DrawerSummaryCard.js";
32
+ export { useDrawerExpanded } from "./context/drawer-expand-context.js";
33
+ export { DRAWER_SIZE } from "./constants/drawer.js";
34
+ export { EmptyState } from "./components/data-table/EmptyState.js";
35
+ export { FilterChip } from "./components/data-table/FilterChip.js";
36
+ export type { FilterChipProps } from "./components/data-table/FilterChip.js";
37
+ export { ViewChip } from "./components/data-table/ViewChip.js";
38
+ export type { ViewChipProps } from "./components/data-table/ViewChip.js";
39
+ export { FilterPopoverFooter } from "./components/data-table/FilterPopoverFooter.js";
40
+ export * as FilterToolbar from "./components/data-table/FilterToolbar.js";
41
+ export { RowActionsMenu } from "./components/data-table/RowActionsMenu.js";
42
+ export { RowControlCell } from "./components/data-table/RowControlCell.js";
43
+ export type { RowControlCellProps } from "./components/data-table/RowControlCell.js";
44
+ export { RowControlHeader } from "./components/data-table/RowControlCell.js";
45
+ export type { RowControlHeaderProps } from "./components/data-table/RowControlCell.js";
46
+ export { SortableHeader } from "./components/data-table/SortableHeader.js";
47
+ export { TableFooter } from "./components/data-table/TableFooter.js";
48
+ export { TableLayout } from "./components/data-table/TableLayout.js";
49
+ export { useColumnResize } from "./components/data-table/hooks/use-column-resize.js";
50
+ export { getVisiblePageNumbers } from "./components/data-table/hooks/use-table-pagination.js";
51
+ export { useRowDrag } from "./components/data-table/hooks/use-row-drag.js";
52
+ export type { RowDragProps, UseRowDragResult } from "./components/data-table/hooks/use-row-drag.js";
53
+ export { useTableSort } from "./components/data-table/hooks/use-table-sort.js";
54
+ export type { BadgeVariant, BulkAction, ColumnMetaDef, RowActionItem, RowActionSection, RowActionVariant, SortDirection, StatusConfigEntry, StickyStyleResult, ViewMode, } from "./components/data-table/types.js";
55
+ export { AppShell } from "./components/layout/AppShell.js";
56
+ export type { AppShellProps } from "./components/layout/AppShell.js";
57
+ export { Sidebar } from "./components/layout/Sidebar.js";
58
+ export type { SidebarProps } from "./components/layout/Sidebar.js";
59
+ export { TopBar } from "./components/layout/TopBar.js";
60
+ export type { TopBarProps } from "./components/layout/TopBar.js";
61
+ export { SidebarUser } from "./components/layout/SidebarUser.js";
62
+ export type { SidebarUserProps } from "./components/layout/SidebarUser.js";
63
+ export { SidebarAccountMenu } from "./components/layout/SidebarAccountMenu.js";
64
+ export type { SidebarAccountMenuProps, AccountMenuItem } from "./components/layout/SidebarAccountMenu.js";
65
+ export { useAppShell } from "./components/layout/app-shell-context.js";
66
+ export type { NavItem, NavGroup } from "./components/layout/types.js";
67
+ export { ReportSummaryCard } from "./components/dashboard/ReportSummaryCard.js";
68
+ export type { ReportSummaryCardProps } from "./components/dashboard/ReportSummaryCard.js";
69
+ export { useScrollActivity } from "./hooks/use-scroll-activity.js";
70
+ export { cn } from "./lib/utils.js";
71
+ export { STYLE_SCOPE } from "./lib/style-scope.js";
72
+ export { PortalContainerContext, usePortalContainer, } from "./context/portal-container-context.js";
73
+ export type { ColumnFilterType, CompoundSubFilter, ColumnFilterConfig, ActiveFilterValue, ActiveFilter, FilterColumnStats, FilterStatsSlice, ColumnGroup, ColumnGap, ViewPreset, } from "./components/data-table/filter-types.js";
74
+ export { GapIndicator, GapCell, GAP_HEADER_ATTR, GAP_CELL_ATTR, } from "./components/data-table/GapIndicator.js";
75
+ export { TimestampCell } from "./components/data-table/TimestampCell.js";
76
+ export { ExpiryTimestampCell } from "./components/data-table/ExpiryTimestampCell.js";
77
+ export { ColumnHeaderMenu } from "./components/data-table/ColumnHeaderMenu.js";
78
+ export type { ColumnHeaderMenuLabels } from "./components/data-table/ColumnHeaderMenu.js";
79
+ export { TwoPanelMenuBase } from "./components/data-table/TwoPanelMenu.js";
80
+ export type { TwoPanelMenuItem, TwoPanelMenuGroup } from "./components/data-table/TwoPanelMenu.js";
81
+ export { FlatColumnToggle } from "./components/data-table/FlatColumnToggle.js";
82
+ export { GroupedColumnToggle } from "./components/data-table/GroupedColumnToggle.js";
83
+ export { ColumnFilterPopover } from "./components/data-table/ColumnFilterPopover.js";
84
+ export { CompoundFilterPopover } from "./components/data-table/CompoundFilterPopover.js";
85
+ export { AppliedStateChips } from "./components/data-table/AppliedStateChips.js";
86
+ export { FilterFormPanel } from "./components/data-table/FilterFormPanel.js";
87
+ export type { FilterFormPanelProps } from "./components/data-table/FilterFormPanel.js";
88
+ export { FilterFormToggle, useFilterFormOpen } from "./components/data-table/FilterFormToggle.js";
89
+ export type { FilterFormToggleProps } from "./components/data-table/FilterFormToggle.js";
90
+ export { applyManagedChanges, clearManagedFilters, hasActiveManagedFilters, } from "./components/data-table/managed-filters.js";
91
+ export type { ManagedFilterChange } from "./components/data-table/managed-filters.js";
92
+ export { useTableOrchestration } from "./hooks/useTableOrchestration.js";
93
+ export type { TableOrchestrationConfig, TableOrchestrationReturn, } from "./hooks/useTableOrchestration.js";
94
+ export { createTableOrchestrationStore, defaultValueForFilter, } from "./hooks/table-orchestration-store.js";
95
+ export type { TableOrchestrationState, TableOrchestrationActions, TableOrchestrationStore, TableOrchestrationStoreApi, } from "./hooks/table-orchestration-store.js";
96
+ export { useRowDragOverride } from "./hooks/useRowDragOverride.js";
97
+ export type { UseRowDragOverrideResult } from "./hooks/useRowDragOverride.js";
98
+ export { computeColumnGaps } from "./lib/column-gaps.js";
99
+ export { computeColumnStats } from "./lib/filter-stats.js";
100
+ export { formatEnumLabel } from "./lib/format-enum.js";
101
+ export { formatDateParts, parsePossibleTimestamp, formatLiveTimestamp, displayTimeZone, } from "./lib/format-timestamp.js";
102
+ export { MonoIdCell } from "./components/data-table/cells/MonoIdCell.js";
103
+ export { CurrencyAmountCell } from "./components/data-table/cells/CurrencyAmountCell.js";
104
+ export { DualLineCell } from "./components/data-table/cells/DualLineCell.js";
105
+ export { AmountCell } from "./components/data-table/cells/AmountCell.js";
106
+ export { ConfirmedAmountCell } from "./components/data-table/cells/ConfirmedAmountCell.js";
107
+ export { EnumBadgeCell } from "./components/data-table/cells/EnumBadgeCell.js";
@@ -0,0 +1,3 @@
1
+ import type { VisibilityState } from "@tanstack/react-table";
2
+ import type { ColumnGap } from "../components/data-table/filter-types.js";
3
+ export declare function computeColumnGaps(orderedColumnIds: readonly string[], columnVisibility: VisibilityState): ColumnGap[];
@@ -0,0 +1,2 @@
1
+ import type { ColumnFilterConfig, FilterColumnStats } from "../components/data-table/filter-types.js";
2
+ export declare function computeColumnStats(rows: object[], fieldName: string, config: Pick<ColumnFilterConfig, "type" | "label" | "options">): FilterColumnStats | null;
@@ -0,0 +1 @@
1
+ export declare function formatEnumLabel(value: string): string;
@@ -0,0 +1,4 @@
1
+ export declare const displayTimeZone = "UTC";
2
+ export declare function formatDateParts(date: Date): string;
3
+ export declare function parsePossibleTimestamp(value: string | null | undefined): Date | null;
4
+ export declare function formatLiveTimestamp(value: string | null | undefined): string | null;
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Class name that scopes the package's element reset.
3
+ *
4
+ * `@undevy-org/tablewright/tablewright.css` confines its reset — border style,
5
+ * form-control appearance, typographic base — to this class instead of applying
6
+ * it globally the way Tailwind's preflight does, so the stylesheet cannot
7
+ * restyle a host application that has a reset of its own.
8
+ *
9
+ * Put it on the element that wraps your use of the kit. Components that render
10
+ * through a Radix portal (dropdown, popover, dialog, select) carry it
11
+ * themselves, because a portal mounts outside the React tree and would
12
+ * otherwise land on document.body with no scope around it.
13
+ *
14
+ * Note that this covers the reset only. Theme selection is separate: tokens
15
+ * resolve from wherever `data-theme` sits, so portalled content still needs a
16
+ * `PortalContainerContext` value inside the themed subtree to follow a theme
17
+ * that is not set on :root.
18
+ */
19
+ export declare const STYLE_SCOPE = "tablewright";
@@ -0,0 +1,2 @@
1
+ import { type ClassValue } from "clsx";
2
+ export declare function cn(...inputs: ClassValue[]): string;
package/package.json ADDED
@@ -0,0 +1,114 @@
1
+ {
2
+ "name": "@undevy-org/tablewright",
3
+ "version": "0.1.0",
4
+ "description": "React data-table and application-shell components: filters, drawers, row controls, sortable and resizable columns, built on Radix UI and TanStack Table.",
5
+ "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/undevy-org/tablewright.git"
9
+ },
10
+ "homepage": "https://github.com/undevy-org/tablewright#readme",
11
+ "bugs": {
12
+ "url": "https://github.com/undevy-org/tablewright/issues"
13
+ },
14
+ "publishConfig": {
15
+ "access": "public",
16
+ "provenance": true
17
+ },
18
+ "type": "module",
19
+ "packageManager": "pnpm@10.28.2",
20
+ "sideEffects": [
21
+ "**/*.css"
22
+ ],
23
+ "main": "./dist/tablewright.cjs",
24
+ "module": "./dist/es/index.js",
25
+ "types": "./dist/types/index.d.ts",
26
+ "exports": {
27
+ ".": {
28
+ "types": "./dist/types/index.d.ts",
29
+ "import": "./dist/es/index.js",
30
+ "require": "./dist/tablewright.cjs",
31
+ "default": "./dist/es/index.js"
32
+ },
33
+ "./styles.css": "./dist/styles.css",
34
+ "./tokens.css": "./dist/tokens.css",
35
+ "./tablewright.css": "./dist/tablewright.css",
36
+ "./preflight.css": "./dist/preflight.css",
37
+ "./fonts.css": "./dist/fonts.css",
38
+ "./package.json": "./package.json"
39
+ },
40
+ "files": [
41
+ "dist"
42
+ ],
43
+ "scripts": {
44
+ "build": "node scripts/build.mjs",
45
+ "build:js": "vite build --config vite.lib.config.ts",
46
+ "build:css": "node scripts/build-css.mjs",
47
+ "build:types": "tsc -p tsconfig.build.json",
48
+ "check:render": "node scripts/render-check/run.mjs",
49
+ "lint": "eslint src .storybook --max-warnings=0",
50
+ "typecheck": "tsc --project tsconfig.json --noEmit",
51
+ "storybook": "storybook dev -p 6006",
52
+ "build-storybook": "storybook build",
53
+ "changeset": "changeset",
54
+ "release": "changeset publish"
55
+ },
56
+ "peerDependencies": {
57
+ "@tanstack/react-table": "^8.21.3",
58
+ "@types/react": "*",
59
+ "@types/react-dom": "*",
60
+ "react": ">=18.0.0 <20.0.0",
61
+ "react-dom": ">=18.0.0 <20.0.0"
62
+ },
63
+ "peerDependenciesMeta": {
64
+ "@types/react": {
65
+ "optional": true
66
+ },
67
+ "@types/react-dom": {
68
+ "optional": true
69
+ }
70
+ },
71
+ "dependencies": {
72
+ "@radix-ui/react-checkbox": "^1.3.3",
73
+ "@radix-ui/react-dialog": "^1.1.15",
74
+ "@radix-ui/react-dropdown-menu": "^2.1.16",
75
+ "@radix-ui/react-popover": "^1.1.15",
76
+ "@radix-ui/react-select": "^2.2.6",
77
+ "@radix-ui/react-slot": "^1.2.4",
78
+ "@radix-ui/react-tabs": "^1.1.13",
79
+ "class-variance-authority": "^0.7.1",
80
+ "clsx": "^2.1.1",
81
+ "cmdk": "^1.1.1",
82
+ "lucide-react": "^0.577.0",
83
+ "tailwind-merge": "^3.5.0",
84
+ "zustand": "^5.0.15"
85
+ },
86
+ "devDependencies": {
87
+ "@changesets/changelog-github": "^0.5.1",
88
+ "@changesets/cli": "^2.29.7",
89
+ "@eslint/js": "^9.39.1",
90
+ "@storybook/addon-a11y": "^10.5.8",
91
+ "@storybook/addon-docs": "^10.5.8",
92
+ "@storybook/addon-themes": "^10.5.8",
93
+ "@storybook/react-vite": "^10.5.8",
94
+ "@tanstack/react-table": "^8.21.3",
95
+ "@types/node": "^24.10.1",
96
+ "@types/react": "^19.2.7",
97
+ "@types/react-dom": "^19.2.3",
98
+ "@vitejs/plugin-react": "^5.1.1",
99
+ "autoprefixer": "^10.4.27",
100
+ "eslint": "^9.39.1",
101
+ "eslint-plugin-react-hooks": "7.0.1",
102
+ "eslint-plugin-react-refresh": "^0.4.24",
103
+ "eslint-plugin-storybook": "^10.5.8",
104
+ "globals": "^16.5.0",
105
+ "postcss": "^8.5.8",
106
+ "react": "^19.2.0",
107
+ "react-dom": "^19.2.0",
108
+ "storybook": "^10.5.8",
109
+ "tailwindcss": "^3.4.18",
110
+ "typescript": "~5.9.3",
111
+ "typescript-eslint": "^8.48.0",
112
+ "vite": "^7.3.1"
113
+ }
114
+ }