@sesamehr/react-design-system 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 (154) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +89 -0
  3. package/dist/Button/Button.d.ts +12 -0
  4. package/dist/Button/index.d.ts +7 -0
  5. package/dist/Data/Table/Table.d.ts +43 -0
  6. package/dist/Data/Table/TableAvatar/TableAvatar.d.ts +13 -0
  7. package/dist/Data/Table/TableBody/TableBody.d.ts +21 -0
  8. package/dist/Data/Table/TableBulkHeader/TableBulkHeader.d.ts +13 -0
  9. package/dist/Data/Table/TableCell/TableCell.d.ts +8 -0
  10. package/dist/Data/Table/TableColumnVisibility/TableColumnVisibility.d.ts +10 -0
  11. package/dist/Data/Table/TableDragCell/TableDragCell.d.ts +6 -0
  12. package/dist/Data/Table/TableEmpty/TableEmpty.d.ts +3 -0
  13. package/dist/Data/Table/TableExpandCell/TableExpandCell.d.ts +6 -0
  14. package/dist/Data/Table/TableFixed/TableFixed.d.ts +27 -0
  15. package/dist/Data/Table/TableFixed/index.d.ts +1 -0
  16. package/dist/Data/Table/TableHead/TableHead.d.ts +3 -0
  17. package/dist/Data/Table/TableHeaderCell/TableHeaderCell.d.ts +18 -0
  18. package/dist/Data/Table/TablePagination/TablePagination.d.ts +10 -0
  19. package/dist/Data/Table/TableRow/TableRow.d.ts +11 -0
  20. package/dist/Data/Table/TableRow/rowDrag.d.ts +17 -0
  21. package/dist/Data/Table/TableRowExpanded/TableRowExpanded.d.ts +5 -0
  22. package/dist/Data/Table/TableSelectCell/TableSelectCell.d.ts +9 -0
  23. package/dist/Data/Table/hooks/index.d.ts +20 -0
  24. package/dist/Data/Table/hooks/useDragToScroll/useDragToScroll.d.ts +19 -0
  25. package/dist/Data/Table/hooks/useFixedColumns.d.ts +8 -0
  26. package/dist/Data/Table/hooks/useScrollShadow/useScrollShadow.d.ts +14 -0
  27. package/dist/Data/Table/hooks/useTable/useTable.d.ts +3 -0
  28. package/dist/Data/Table/hooks/useTable/useTable.types.d.ts +55 -0
  29. package/dist/Data/Table/hooks/useTableColumns/useTableColumns.d.ts +2 -0
  30. package/dist/Data/Table/hooks/useTableColumns/useTableColumns.types.d.ts +31 -0
  31. package/dist/Data/Table/hooks/useTableDetailRow/useTableDetailRow.d.ts +2 -0
  32. package/dist/Data/Table/hooks/useTableDetailRow/useTableDetailRow.types.d.ts +29 -0
  33. package/dist/Data/Table/hooks/useTablePagination/useTablePagination.d.ts +44 -0
  34. package/dist/Data/Table/hooks/useTablePinning/index.d.ts +2 -0
  35. package/dist/Data/Table/hooks/useTablePinning/useTablePinning.d.ts +2 -0
  36. package/dist/Data/Table/hooks/useTablePinning/useTablePinning.types.d.ts +50 -0
  37. package/dist/Data/Table/hooks/useTableSelection/useTableSelection.d.ts +2 -0
  38. package/dist/Data/Table/hooks/useTableSelection/useTableSelection.types.d.ts +31 -0
  39. package/dist/Data/Table/hooks/useTableSorting/useTableSorting.d.ts +2 -0
  40. package/dist/Data/Table/hooks/useTableSorting/useTableSorting.types.d.ts +24 -0
  41. package/dist/Data/Table/index.d.ts +17 -0
  42. package/dist/Data/Table/types.d.ts +90 -0
  43. package/dist/Display/Avatar/Avatar.d.ts +23 -0
  44. package/dist/Display/Avatar/hooks/useAvatarBullet.d.ts +16 -0
  45. package/dist/Display/Avatar/index.d.ts +9 -0
  46. package/dist/Display/AvatarGroup/AvatarGroup.d.ts +16 -0
  47. package/dist/Display/AvatarGroup/index.d.ts +1 -0
  48. package/dist/Display/Badge/Badge.d.ts +6 -0
  49. package/dist/Display/Badge/index.d.ts +6 -0
  50. package/dist/Display/PaymentCard/PaymentCard.d.ts +13 -0
  51. package/dist/Display/PaymentCard/index.d.ts +20 -0
  52. package/dist/Feedback/Alert/Alert.d.ts +18 -0
  53. package/dist/Feedback/Alert/AlertClose.d.ts +3 -0
  54. package/dist/Feedback/Alert/AlertDescription.d.ts +3 -0
  55. package/dist/Feedback/Alert/AlertIcon.d.ts +3 -0
  56. package/dist/Feedback/Alert/AlertTitle.d.ts +3 -0
  57. package/dist/Feedback/Alert/AlertToggle.d.ts +3 -0
  58. package/dist/Feedback/Alert/alert-context.d.ts +12 -0
  59. package/dist/Feedback/Alert/index.d.ts +7 -0
  60. package/dist/Feedback/Bullet/Bullet.d.ts +7 -0
  61. package/dist/Feedback/Bullet/index.d.ts +7 -0
  62. package/dist/Feedback/Dialog/Dialog.d.ts +12 -0
  63. package/dist/Feedback/Dialog/DialogContent.d.ts +6 -0
  64. package/dist/Feedback/Dialog/DialogDescription.d.ts +3 -0
  65. package/dist/Feedback/Dialog/DialogOverlay.d.ts +4 -0
  66. package/dist/Feedback/Dialog/DialogTitle.d.ts +3 -0
  67. package/dist/Feedback/Dialog/DialogTwoPanelContent.d.ts +8 -0
  68. package/dist/Feedback/Dialog/index.d.ts +7 -0
  69. package/dist/Feedback/Popover/Popover.d.ts +14 -0
  70. package/dist/Feedback/Popover/PopoverContent.d.ts +6 -0
  71. package/dist/Feedback/Popover/index.d.ts +3 -0
  72. package/dist/Feedback/StatusBadge/StatusBadge.d.ts +6 -0
  73. package/dist/Feedback/StatusBadge/index.d.ts +9 -0
  74. package/dist/Feedback/Tooltip/Tooltip.d.ts +16 -0
  75. package/dist/Feedback/Tooltip/TooltipContent.d.ts +6 -0
  76. package/dist/Feedback/Tooltip/index.d.ts +2 -0
  77. package/dist/Forms/Field/FieldGroup/FieldGroup.d.ts +4 -0
  78. package/dist/Forms/Field/FieldLabel/FieldLabel.d.ts +2 -0
  79. package/dist/Forms/Field/FieldMessage/FieldMessage.d.ts +5 -0
  80. package/dist/Forms/Field/index.d.ts +3 -0
  81. package/dist/Forms/Inputs/Combobox/Combobox.d.ts +27 -0
  82. package/dist/Forms/Inputs/Combobox/ComboboxChipsInput.d.ts +12 -0
  83. package/dist/Forms/Inputs/Combobox/ComboboxContent.d.ts +13 -0
  84. package/dist/Forms/Inputs/Combobox/ComboboxEmpty.d.ts +10 -0
  85. package/dist/Forms/Inputs/Combobox/ComboboxGroup.d.ts +7 -0
  86. package/dist/Forms/Inputs/Combobox/ComboboxInput.d.ts +14 -0
  87. package/dist/Forms/Inputs/Combobox/ComboboxItem.d.ts +10 -0
  88. package/dist/Forms/Inputs/Combobox/ComboboxSeparator.d.ts +10 -0
  89. package/dist/Forms/Inputs/Combobox/context.d.ts +26 -0
  90. package/dist/Forms/Inputs/Combobox/index.d.ts +8 -0
  91. package/dist/Forms/Inputs/Combobox/types.d.ts +8 -0
  92. package/dist/Forms/Inputs/InputGroup/InputGroup.d.ts +2 -0
  93. package/dist/Forms/Inputs/InputNumber/InputNumber.d.ts +18 -0
  94. package/dist/Forms/Inputs/InputNumber/InputNumberContent.d.ts +2 -0
  95. package/dist/Forms/Inputs/InputNumber/InputNumberContext.d.ts +20 -0
  96. package/dist/Forms/Inputs/InputNumber/InputNumberDecrement.d.ts +3 -0
  97. package/dist/Forms/Inputs/InputNumber/InputNumberIncrement.d.ts +3 -0
  98. package/dist/Forms/Inputs/InputNumber/InputNumberInput.d.ts +3 -0
  99. package/dist/Forms/Inputs/InputNumber/index.d.ts +5 -0
  100. package/dist/Forms/Inputs/InputText/InputText.d.ts +14 -0
  101. package/dist/Forms/Inputs/Toggle/Checkbox/Checkbox.d.ts +11 -0
  102. package/dist/Forms/Inputs/Toggle/RadioButton/RadioButton.d.ts +7 -0
  103. package/dist/Forms/Inputs/Toggle/RadioButton/RadioGroup.d.ts +9 -0
  104. package/dist/Forms/Inputs/Toggle/Switch/Switch.d.ts +13 -0
  105. package/dist/Forms/Inputs/Toggle/Switch/constants.d.ts +1 -0
  106. package/dist/Forms/Inputs/Toggle/ToggleDescription/ToggleDescription.d.ts +5 -0
  107. package/dist/Forms/Inputs/Toggle/ToggleGroup/ToggleGroup.d.ts +7 -0
  108. package/dist/Forms/Inputs/Toggle/ToggleLabel/ToggleLabel.d.ts +5 -0
  109. package/dist/Forms/Inputs/Toggle/index.d.ts +8 -0
  110. package/dist/Forms/Inputs/index.d.ts +5 -0
  111. package/dist/Layout/Resizable/Resizable.d.ts +13 -0
  112. package/dist/Layout/Resizable/ResizableHandle.d.ts +21 -0
  113. package/dist/Layout/Resizable/ResizablePanel.d.ts +20 -0
  114. package/dist/Layout/Resizable/index.d.ts +3 -0
  115. package/dist/Navigation/Accordion/Accordion.d.ts +4 -0
  116. package/dist/Navigation/Accordion/AccordionContent.d.ts +3 -0
  117. package/dist/Navigation/Accordion/AccordionItem.d.ts +3 -0
  118. package/dist/Navigation/Accordion/AccordionTrigger.d.ts +3 -0
  119. package/dist/Navigation/Accordion/index.d.ts +4 -0
  120. package/dist/Navigation/Breadcrumb/Breadcrumb.d.ts +2 -0
  121. package/dist/Navigation/Breadcrumb/BreadcrumbEllipsis.d.ts +2 -0
  122. package/dist/Navigation/Breadcrumb/BreadcrumbItem.d.ts +2 -0
  123. package/dist/Navigation/Breadcrumb/BreadcrumbLink.d.ts +7 -0
  124. package/dist/Navigation/Breadcrumb/BreadcrumbList.d.ts +2 -0
  125. package/dist/Navigation/Breadcrumb/BreadcrumbPage.d.ts +2 -0
  126. package/dist/Navigation/Breadcrumb/BreadcrumbSeparator.d.ts +2 -0
  127. package/dist/Navigation/Breadcrumb/index.d.ts +7 -0
  128. package/dist/Navigation/Tabs/Tabs.d.ts +4 -0
  129. package/dist/Navigation/Tabs/TabsContent.d.ts +3 -0
  130. package/dist/Navigation/Tabs/TabsList.d.ts +3 -0
  131. package/dist/Navigation/Tabs/TabsTrigger.d.ts +3 -0
  132. package/dist/Navigation/Tabs/index.d.ts +4 -0
  133. package/dist/Transitions/TransitionBase.d.ts +30 -0
  134. package/dist/Transitions/TransitionBounce/TransitionBounce.d.ts +7 -0
  135. package/dist/Transitions/TransitionBounce/index.d.ts +1 -0
  136. package/dist/Transitions/TransitionExpand/TransitionExpand.d.ts +7 -0
  137. package/dist/Transitions/TransitionExpand/index.d.ts +1 -0
  138. package/dist/Transitions/TransitionFade/TransitionFade.d.ts +7 -0
  139. package/dist/Transitions/TransitionFade/index.d.ts +1 -0
  140. package/dist/Transitions/TransitionFlip/TransitionFlip.d.ts +13 -0
  141. package/dist/Transitions/TransitionFlip/index.d.ts +1 -0
  142. package/dist/Transitions/TransitionSlideX/TransitionSlideX.d.ts +10 -0
  143. package/dist/Transitions/TransitionSlideX/index.d.ts +1 -0
  144. package/dist/Transitions/TransitionSlideY/TransitionSlideY.d.ts +10 -0
  145. package/dist/Transitions/TransitionSlideY/index.d.ts +1 -0
  146. package/dist/lib/utils.d.ts +2 -0
  147. package/dist/main.d.ts +25 -0
  148. package/dist/react-design-system.css +1 -0
  149. package/dist/react-design-system.js +19498 -0
  150. package/dist/react-design-system.umd.cjs +165 -0
  151. package/package.json +94 -0
  152. package/src/assets/styles/mainTheme.css +1 -0
  153. package/src/assets/styles/primitives.css +98 -0
  154. package/src/assets/styles/theme-v2.css +298 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Sesame HR
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,89 @@
1
+ # @sesamehr/react-design-system
2
+
3
+ React component library and design tokens for the Sesame HR design system.
4
+
5
+ Accessible, composable components built on [Radix UI](https://www.radix-ui.com/) and styled with [Tailwind CSS v4](https://tailwindcss.com/), shipped as an ESM + UMD bundle with full TypeScript types.
6
+
7
+ ## Installation
8
+
9
+ ```bash
10
+ npm install @sesamehr/react-design-system
11
+ ```
12
+
13
+ This package has peer dependencies you must install alongside it:
14
+
15
+ ```bash
16
+ npm install react react-dom tailwindcss
17
+ ```
18
+
19
+ | Peer | Supported range |
20
+ | ------------- | -------------------- |
21
+ | `react` | `^18.3.0 \|\| ^19.0.0` |
22
+ | `react-dom` | `^18.3.0 \|\| ^19.0.0` |
23
+ | `tailwindcss` | `^4.1.7` |
24
+
25
+ ## Usage
26
+
27
+ Import the stylesheet once at your app root, then use the components:
28
+
29
+ ```tsx
30
+ // main.tsx / App entry — import the compiled styles once
31
+ import '@sesamehr/react-design-system/style.css';
32
+ ```
33
+
34
+ ```tsx
35
+ import { Button, Avatar, Alert } from '@sesamehr/react-design-system';
36
+
37
+ export function Example() {
38
+ return (
39
+ <div>
40
+ <Avatar initials="SH" size="lg" />
41
+ <Button variant="default">Save</Button>
42
+ <Alert>Saved successfully.</Alert>
43
+ </div>
44
+ );
45
+ }
46
+ ```
47
+
48
+ ### Design tokens
49
+
50
+ The compiled stylesheet already includes the tokens. If you want the raw token
51
+ layers (e.g. to `@reference` them from your own Tailwind setup), they are
52
+ exported separately:
53
+
54
+ ```css
55
+ @import '@sesamehr/react-design-system/assets/styles/mainTheme.css';
56
+ ```
57
+
58
+ ### `cn` utility
59
+
60
+ The class-merging helper used internally is also exported:
61
+
62
+ ```ts
63
+ import { cn } from '@sesamehr/react-design-system/lib/utils';
64
+ ```
65
+
66
+ ## Components
67
+
68
+ - **Buttons** — Button
69
+ - **Forms** — Input, InputNumber, InputGroup, Combobox, Checkbox, Switch, RadioButton, Toggle, Field
70
+ - **Data** — Table (sorting, selection, pinning, row drag & drop, pagination), TablePagination, Avatar cells
71
+ - **Display** — Avatar, AvatarGroup, Badge, PaymentCard
72
+ - **Feedback** — Alert, Dialog, Popover, Tooltip, StatusBadge, Bullet
73
+ - **Navigation** — Tabs, Accordion, Breadcrumb
74
+ - **Layout** — Resizable
75
+ - **Transitions** — Fade, Expand, Flip, Bounce, SlideX, SlideY
76
+
77
+ All components ship with TypeScript definitions and support `ref` forwarding.
78
+
79
+ ## Dark mode
80
+
81
+ Components react to the `dark` class on a parent element (typically `<html>`):
82
+
83
+ ```ts
84
+ document.documentElement.classList.toggle('dark', isDark);
85
+ ```
86
+
87
+ ## License
88
+
89
+ [MIT](./LICENSE) © Sesame HR
@@ -0,0 +1,12 @@
1
+ import { ButtonVariants } from '.';
2
+ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
3
+ variant?: ButtonVariants['variant'];
4
+ size?: ButtonVariants['size'];
5
+ /** Render as the child element instead of a `<button>` (Radix Slot). */
6
+ asChild?: boolean;
7
+ }
8
+ /**
9
+ * Button — mirrors `@orxata/core` Button.
10
+ * `asChild` replaces reka-ui's `<Primitive as-child>` via `@radix-ui/react-slot`.
11
+ */
12
+ export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,7 @@
1
+ import { VariantProps } from 'class-variance-authority';
2
+ export { Button, type ButtonProps } from './Button';
3
+ export declare const buttonVariants: (props?: ({
4
+ variant?: "link" | "default" | "success" | "secondary" | "outline" | "destructive" | "ghost" | null | undefined;
5
+ size?: "default" | "icon" | "sm" | "lg" | null | undefined;
6
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
7
+ export type ButtonVariants = VariantProps<typeof buttonVariants>;
@@ -0,0 +1,43 @@
1
+ import { ReactNode } from 'react';
2
+ import { UseTableReturn } from './hooks/useTable/useTable';
3
+ import { CellContext, ColumnDef } from './types';
4
+ export interface TableComponentProps<TData = unknown> {
5
+ loading?: boolean;
6
+ enableDragToScroll?: boolean;
7
+ table?: UseTableReturn<TData>;
8
+ /**
9
+ * Cell render prop (replaces the `cell-${field}` scoped slots). Return
10
+ * `undefined` to fall back to the column's `cellSlot`.
11
+ */
12
+ renderCell?: (field: string, ctx: CellContext<TData> & {
13
+ rowIndex: number;
14
+ }) => ReactNode;
15
+ /**
16
+ * Header render prop (replaces the `header-${field}` scoped slots). Return
17
+ * `undefined` to fall back to `column.header ?? column.field`.
18
+ */
19
+ renderHeader?: (field: string, column: ColumnDef<TData>) => ReactNode;
20
+ /** Detail-row render prop (`detail-row` scoped slot). */
21
+ detailRow?: (ctx: {
22
+ row: TData;
23
+ rowIndex: number;
24
+ }) => ReactNode;
25
+ /** Custom bulk header (`bulk-header` slot). Overrides the auto bulk header. */
26
+ bulkHeader?: ReactNode;
27
+ /** Bulk action controls (`bulk-actions` slot). */
28
+ bulkActions?: ReactNode;
29
+ /** Pagination content (`pagination` slot). */
30
+ pagination?: ReactNode;
31
+ /** Empty state content (`empty` slot). */
32
+ empty?: ReactNode;
33
+ /** Left fixed section content (`fixed-left` slot) — custom mode only. */
34
+ fixedLeft?: ReactNode;
35
+ /** Right fixed section content (`fixed-right` slot) — custom mode only. */
36
+ fixedRight?: ReactNode;
37
+ /** Center table content (default slot) — custom mode only. */
38
+ children?: ReactNode;
39
+ }
40
+ export declare function Table<TData = unknown>({ enableDragToScroll, table, renderCell, renderHeader, detailRow: detailRowSlot, bulkHeader, bulkActions, pagination, empty, fixedLeft, fixedRight, children, }: TableComponentProps<TData>): import("react/jsx-runtime").JSX.Element;
41
+ export declare namespace Table {
42
+ var displayName: string;
43
+ }
@@ -0,0 +1,13 @@
1
+ export interface TableAvatarProps extends React.ComponentPropsWithoutRef<'div'> {
2
+ /** Image source URL */
3
+ src?: string;
4
+ /** Fallback initials (max 2 characters) */
5
+ initials?: string;
6
+ /** Disabled state */
7
+ disabled?: boolean;
8
+ /** Full name to display */
9
+ name: string;
10
+ /** Subtitle (department, role, etc.) */
11
+ subtitle?: string;
12
+ }
13
+ export declare const TableAvatar: import('react').ForwardRefExoticComponent<TableAvatarProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,21 @@
1
+ export interface TableBodyProps extends React.ComponentPropsWithoutRef<'tbody'> {
2
+ /** Enable row drag & drop reordering */
3
+ draggable?: boolean;
4
+ /** Items array for drag reordering (required when draggable=true) */
5
+ items?: unknown[];
6
+ /** Called when items are reordered */
7
+ onReorder?: (items: unknown[]) => void;
8
+ /**
9
+ * Derives the sortable id for each item. MUST match the `dragId` passed to
10
+ * each child `TableRow`. Defaults to the array index — pass a stable key
11
+ * (e.g. `(row) => row.id`) whenever rows are keyed by something other than
12
+ * their position, or reordering across renders will misbehave.
13
+ */
14
+ getItemId?: (item: unknown, index: number) => string | number;
15
+ }
16
+ /**
17
+ * Styled `<tbody>`. When `draggable`, wraps rows in a dnd-kit sortable
18
+ * context — replacing the Vue `vue-draggable-plus` (Sortable.js) integration.
19
+ * Sortable item ids are derived from the index of each `items` entry.
20
+ */
21
+ export declare const TableBody: import('react').ForwardRefExoticComponent<TableBodyProps & import('react').RefAttributes<HTMLTableSectionElement>>;
@@ -0,0 +1,13 @@
1
+ import { ReactNode } from 'react';
2
+ export interface TableBulkHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
3
+ selectedCount?: number;
4
+ total?: number;
5
+ /** Custom feedback content (replaces the default text). */
6
+ feedback?: (props: {
7
+ selectedCount: number;
8
+ total: number;
9
+ }) => ReactNode;
10
+ /** Action controls rendered on the right. */
11
+ actions?: ReactNode;
12
+ }
13
+ export declare const TableBulkHeader: import('react').ForwardRefExoticComponent<TableBulkHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,8 @@
1
+ import { ColumnAlign } from '../types';
2
+ export interface TableCellProps extends React.ComponentPropsWithoutRef<'td'> {
3
+ align?: ColumnAlign;
4
+ fixed?: 'left' | 'right';
5
+ /** CSS value for multiple fixed columns, e.g. '48px' */
6
+ fixedOffset?: string;
7
+ }
8
+ export declare const TableCell: import('react').ForwardRefExoticComponent<TableCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
@@ -0,0 +1,10 @@
1
+ import { ReactNode } from 'react';
2
+ import { ColumnDef } from '../types';
3
+ export interface TableColumnVisibilityProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onToggle'> {
4
+ columns: ColumnDef[];
5
+ visibility?: Record<string, boolean>;
6
+ /** Custom header content (replaces the default "Columns" label). */
7
+ header?: ReactNode;
8
+ onToggle?: (field: string) => void;
9
+ }
10
+ export declare const TableColumnVisibility: import('react').ForwardRefExoticComponent<TableColumnVisibilityProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,6 @@
1
+ export interface TableDragCellProps extends React.ComponentPropsWithoutRef<'td'> {
2
+ header?: boolean;
3
+ fixed?: boolean;
4
+ fixedOffset?: string;
5
+ }
6
+ export declare const TableDragCell: import('react').ForwardRefExoticComponent<TableDragCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
@@ -0,0 +1,3 @@
1
+ export type TableEmptyProps = React.ComponentPropsWithoutRef<'div'>;
2
+ /** Empty state display. Renders `children`, or a default message. */
3
+ export declare const TableEmpty: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,6 @@
1
+ export interface TableExpandCellProps extends React.ComponentPropsWithoutRef<'td'> {
2
+ expanded?: boolean;
3
+ header?: boolean;
4
+ onToggle?: () => void;
5
+ }
6
+ export declare const TableExpandCell: import('react').ForwardRefExoticComponent<TableExpandCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
@@ -0,0 +1,27 @@
1
+ import { ReactNode } from 'react';
2
+ export interface TableFixedContextValue {
3
+ hasLeftFixed: boolean;
4
+ hasRightFixed: boolean;
5
+ }
6
+ export declare const TableFixedContext: import('react').Context<TableFixedContextValue>;
7
+ export interface TableFixedProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
8
+ loading?: boolean;
9
+ enableDragToScroll?: boolean;
10
+ /** e.g., '48px' for checkbox column */
11
+ leftWidth?: string;
12
+ /** e.g., '48px' for actions column */
13
+ rightWidth?: string;
14
+ /** Content of the left fixed section (`fixed-left` slot). */
15
+ fixedLeft?: ReactNode;
16
+ /** Content of the right fixed section (`fixed-right` slot). */
17
+ fixedRight?: ReactNode;
18
+ /** Bulk header content (`bulk-header` slot). */
19
+ bulkHeader?: ReactNode;
20
+ /** Pagination content (`pagination` slot). */
21
+ pagination?: ReactNode;
22
+ /** Empty state content (`empty` slot). */
23
+ empty?: ReactNode;
24
+ /** Center scrollable table content (default slot). */
25
+ children?: ReactNode;
26
+ }
27
+ export declare const TableFixed: import('react').ForwardRefExoticComponent<TableFixedProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -0,0 +1 @@
1
+ export { TableFixed, TableFixedContext, type TableFixedProps, type TableFixedContextValue, } from './TableFixed';
@@ -0,0 +1,3 @@
1
+ export type TableHeadProps = React.ComponentPropsWithoutRef<'thead'>;
2
+ /** Styled `<thead>` wrapping its children in a header row. */
3
+ export declare const TableHead: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import('react').RefAttributes<HTMLTableSectionElement>>;
@@ -0,0 +1,18 @@
1
+ import { ColumnAlign } from '../types';
2
+ export interface TableHeaderCellProps extends Omit<React.ComponentPropsWithoutRef<'th'>, 'onDrop'> {
3
+ sortable?: boolean;
4
+ sorted?: boolean;
5
+ sortDirection?: 'asc' | 'desc' | null;
6
+ resizable?: boolean;
7
+ resizing?: boolean;
8
+ draggable?: boolean;
9
+ align?: ColumnAlign;
10
+ width?: string;
11
+ fixed?: 'left' | 'right';
12
+ /** CSS value for multiple fixed columns */
13
+ fixedOffset?: string;
14
+ onSort?: () => void;
15
+ onResizeStart?: (event: React.MouseEvent | React.TouchEvent) => void;
16
+ onColumnDrop?: (sourceField: string) => void;
17
+ }
18
+ export declare const TableHeaderCell: import('react').ForwardRefExoticComponent<TableHeaderCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
@@ -0,0 +1,10 @@
1
+ export interface TablePaginationProps extends React.ComponentPropsWithoutRef<'div'> {
2
+ page?: number;
3
+ pageSize?: number;
4
+ pageCount?: number;
5
+ total?: number;
6
+ pageSizes?: number[];
7
+ onPageChange?: (page: number) => void;
8
+ onPageSizeChange?: (pageSize: number) => void;
9
+ }
10
+ export declare const TablePagination: import('react').ForwardRefExoticComponent<TablePaginationProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,11 @@
1
+ export interface TableRowProps extends React.ComponentPropsWithoutRef<'tr'> {
2
+ selected?: boolean;
3
+ expanded?: boolean;
4
+ /**
5
+ * Sortable id for row drag & drop. When set, the row becomes draggable and
6
+ * MUST live inside a `<TableBody draggable>` (which provides the dnd-kit
7
+ * context). The value has to match the id produced by TableBody's `getItemId`.
8
+ */
9
+ dragId?: string | number;
10
+ }
11
+ export declare const TableRow: import('react').ForwardRefExoticComponent<TableRowProps & import('react').RefAttributes<HTMLTableRowElement>>;
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Bridges a sortable `TableRow` to its drag handle (`TableDragCell`).
3
+ *
4
+ * `useSortable` puts the node ref + transform on the `<tr>`, but the drag
5
+ * *activator* (the grip icon) lives in a child cell. This context passes the
6
+ * activator ref + attributes/listeners down so the grip — and only the grip —
7
+ * starts a drag, instead of the whole row.
8
+ *
9
+ * Typed loosely on purpose: dnd-kit's attribute/listener maps don't line up
10
+ * cleanly with intrinsic element props, and they are only ever spread.
11
+ */
12
+ export interface RowDragHandle {
13
+ attributes: Record<string, unknown>;
14
+ listeners: Record<string, unknown> | undefined;
15
+ setActivatorNodeRef: (element: HTMLElement | null) => void;
16
+ }
17
+ export declare const RowDragContext: import('react').Context<RowDragHandle | null>;
@@ -0,0 +1,5 @@
1
+ export interface TableRowExpandedProps extends React.ComponentPropsWithoutRef<'tr'> {
2
+ expanded?: boolean;
3
+ colspan?: number;
4
+ }
5
+ export declare const TableRowExpanded: import('react').ForwardRefExoticComponent<TableRowExpandedProps & import('react').RefAttributes<HTMLTableRowElement>>;
@@ -0,0 +1,9 @@
1
+ export interface TableSelectCellProps extends Omit<React.ComponentPropsWithoutRef<'td'>, 'onChange'> {
2
+ checked?: boolean | 'indeterminate';
3
+ header?: boolean;
4
+ /** Usually fixed to left */
5
+ fixed?: boolean;
6
+ fixedOffset?: string;
7
+ onChange?: (checked: boolean) => void;
8
+ }
9
+ export declare const TableSelectCell: import('react').ForwardRefExoticComponent<TableSelectCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
@@ -0,0 +1,20 @@
1
+ export { useTable } from './useTable/useTable';
2
+ export type { UseTableOptions, UseTableReturn, } from './useTable/useTable.types';
3
+ export { useTableSelection } from './useTableSelection/useTableSelection';
4
+ export type { SelectionOptions, SelectionInstance, SelectionPluginDef, } from './useTableSelection/useTableSelection.types';
5
+ export { useTableSorting } from './useTableSorting/useTableSorting';
6
+ export type { SortingOptions, SortingInstance, SortingPluginDef, } from './useTableSorting/useTableSorting.types';
7
+ export { useTablePagination } from './useTablePagination/useTablePagination';
8
+ export type { UseTablePaginationOptions, UseTablePaginationReturn, } from './useTablePagination/useTablePagination';
9
+ export { useTableDetailRow } from './useTableDetailRow/useTableDetailRow';
10
+ export type { DetailRowOptions, DetailRowInstance, DetailRowPluginDef, } from './useTableDetailRow/useTableDetailRow.types';
11
+ export { useTablePinning } from './useTablePinning/useTablePinning';
12
+ export type { PinningOptions, PinningInstance, PinningPluginDef, CellInfo, HeaderInfo, } from './useTablePinning/useTablePinning.types';
13
+ export { useTableColumns } from './useTableColumns/useTableColumns';
14
+ export type { ColumnsOptions, ColumnsInstance, ColumnsPluginDef, } from './useTableColumns/useTableColumns.types';
15
+ export { useScrollShadow } from './useScrollShadow/useScrollShadow';
16
+ export type { UseScrollShadowOptions, UseScrollShadowReturn, } from './useScrollShadow/useScrollShadow';
17
+ export { useDragToScroll } from './useDragToScroll/useDragToScroll';
18
+ export type { UseDragToScrollOptions, UseDragToScrollReturn, } from './useDragToScroll/useDragToScroll';
19
+ export { useFixedColumns } from './useFixedColumns';
20
+ export type { UseFixedColumnsOptions } from './useFixedColumns';
@@ -0,0 +1,19 @@
1
+ import { RefObject } from 'react';
2
+ export interface UseDragToScrollOptions {
3
+ /** Whether drag-to-scroll is enabled */
4
+ enabled?: boolean | (() => boolean);
5
+ /** Cursor to show while dragging */
6
+ cursor?: string;
7
+ }
8
+ export interface UseDragToScrollReturn {
9
+ /** Whether the user is currently dragging to scroll */
10
+ isDragging: boolean;
11
+ }
12
+ /**
13
+ * Hook for drag-to-scroll functionality.
14
+ * Allows horizontal scrolling by dragging with the mouse.
15
+ *
16
+ * Note: If using row drag & drop, set enabled=false to avoid conflicts.
17
+ * Use @dnd-kit for row reordering instead.
18
+ */
19
+ export declare function useDragToScroll(elementRef: RefObject<HTMLElement | null>, options?: UseDragToScrollOptions): UseDragToScrollReturn;
@@ -0,0 +1,8 @@
1
+ import { RefObject } from 'react';
2
+ export interface UseFixedColumnsOptions {
3
+ leftWidth?: number;
4
+ rightWidth?: number;
5
+ }
6
+ export declare function useFixedColumns(scrollContainerRef: RefObject<HTMLElement | null>, leftContainerRef: RefObject<HTMLElement | null>, rightContainerRef: RefObject<HTMLElement | null>): {
7
+ syncRowHeights: () => void;
8
+ };
@@ -0,0 +1,14 @@
1
+ import { RefObject } from 'react';
2
+ export interface UseScrollShadowOptions {
3
+ /** Threshold in pixels to consider content as scrollable */
4
+ threshold?: number;
5
+ }
6
+ export interface UseScrollShadowReturn {
7
+ /** Whether to show left shadow (content hidden on left) */
8
+ showLeftShadow: boolean;
9
+ /** Whether to show right shadow (content hidden on right) */
10
+ showRightShadow: boolean;
11
+ /** Manually update shadow state */
12
+ updateShadows: () => void;
13
+ }
14
+ export declare function useScrollShadow(elementRef: RefObject<HTMLElement | null>, options?: UseScrollShadowOptions): UseScrollShadowReturn;
@@ -0,0 +1,3 @@
1
+ import { UseTableOptions, UseTableReturn } from './useTable.types';
2
+ export declare function useTable<TData>(options: UseTableOptions<TData>): UseTableReturn<TData>;
3
+ export type { UseTableOptions, UseTableReturn } from './useTable.types';
@@ -0,0 +1,55 @@
1
+ import { Table as TanstackTable } from '@tanstack/react-table';
2
+ import { ColumnDef, TableMode } from '../../types';
3
+ import { ColumnsInstance, ColumnsPluginDef } from '../useTableColumns/useTableColumns.types';
4
+ import { DetailRowInstance, DetailRowPluginDef } from '../useTableDetailRow/useTableDetailRow.types';
5
+ import { PinningInstance, PinningPluginDef } from '../useTablePinning/useTablePinning.types';
6
+ import { SelectionInstance, SelectionPluginDef } from '../useTableSelection/useTableSelection.types';
7
+ import { SortingInstance, SortingPluginDef } from '../useTableSorting/useTableSorting.types';
8
+ /** A value that may be provided directly or via a getter function. */
9
+ export type MaybeGetter<T> = T | (() => T);
10
+ export interface UseTableOptions<TData> {
11
+ /** Table data */
12
+ data: MaybeGetter<TData[]>;
13
+ /** Column definitions */
14
+ columns?: MaybeGetter<ColumnDef<TData>[]>;
15
+ /** Table mode: 'client' for local data, 'server' for remote data */
16
+ mode?: TableMode;
17
+ /** Whether the table data is currently loading */
18
+ loading?: MaybeGetter<boolean>;
19
+ /** Row key field or getter function */
20
+ rowKey?: string | ((row: TData) => string | number);
21
+ /** Selection plugin (created with useTableSelection) */
22
+ selection?: SelectionPluginDef<TData>;
23
+ /** Detail row plugin (created with useTableDetailRow) */
24
+ detailRow?: DetailRowPluginDef<TData>;
25
+ /** Sorting plugin (created with useTableSorting) */
26
+ sorting?: SortingPluginDef;
27
+ /** Columns plugin (created with useTableColumns) */
28
+ columnManager?: ColumnsPluginDef;
29
+ /** Pinning plugin (created with useTablePinning) */
30
+ pinning?: PinningPluginDef<TData>;
31
+ }
32
+ export interface UseTableReturn<TData> {
33
+ /** TanStack table instance */
34
+ instance: TanstackTable<TData>;
35
+ /** Rows from the row model */
36
+ rows: TData[];
37
+ /** Column definitions */
38
+ columns: ColumnDef<TData>[];
39
+ /** Get unique key for a row */
40
+ getRowKey: (row: TData, index: number) => string | number;
41
+ /** Table mode (client/server) */
42
+ mode: TableMode;
43
+ /** Whether the table data is currently loading */
44
+ loading: boolean;
45
+ /** Selection plugin instance (if provided) */
46
+ selection?: SelectionInstance;
47
+ /** Detail row plugin instance (if provided) */
48
+ detailRow?: DetailRowInstance;
49
+ /** Sorting plugin instance (if provided) */
50
+ sorting?: SortingInstance;
51
+ /** Columns plugin instance (if provided) */
52
+ columnManager?: ColumnsInstance;
53
+ /** Pinning plugin instance (if provided) */
54
+ pinning?: PinningInstance<TData>;
55
+ }
@@ -0,0 +1,2 @@
1
+ import { ColumnsOptions, ColumnsPluginDef } from './useTableColumns.types';
2
+ export declare function useTableColumns(options?: ColumnsOptions): ColumnsPluginDef;
@@ -0,0 +1,31 @@
1
+ import { ColumnOrderState, ColumnResizeMode, ColumnVisibilityState } from '../../types';
2
+ export interface ColumnsOptions {
3
+ /** Enable column resizing */
4
+ enableResizing?: boolean;
5
+ /** Resize mode: 'onChange' or 'onEnd' */
6
+ resizeMode?: ColumnResizeMode;
7
+ /** Initial visibility state */
8
+ initialVisibility?: ColumnVisibilityState;
9
+ /** Initial column order */
10
+ initialOrder?: ColumnOrderState;
11
+ }
12
+ export interface ColumnsInstance {
13
+ visibility: ColumnVisibilityState;
14
+ isVisible: (field: string) => boolean;
15
+ toggleVisibility: (field: string) => void;
16
+ setVisibility: (visibility: ColumnVisibilityState) => void;
17
+ showColumn: (field: string) => void;
18
+ hideColumn: (field: string) => void;
19
+ order: ColumnOrderState;
20
+ setOrder: (order: ColumnOrderState) => void;
21
+ resetOrder: () => void;
22
+ moveColumn: (field: string, toIndex: number) => void;
23
+ sizing: Record<string, number>;
24
+ getSize: (field: string) => number;
25
+ setSize: (field: string, size: number) => void;
26
+ }
27
+ export interface ColumnsPluginDef {
28
+ type: 'columns';
29
+ options: ColumnsOptions;
30
+ create: (tableInstance: unknown, defaultOrder: () => string[]) => ColumnsInstance;
31
+ }
@@ -0,0 +1,2 @@
1
+ import { DetailRowOptions, DetailRowPluginDef } from './useTableDetailRow.types';
2
+ export declare function useTableDetailRow<TData = unknown>(options?: DetailRowOptions): DetailRowPluginDef<TData>;
@@ -0,0 +1,29 @@
1
+ export interface DetailRowOptions {
2
+ /** Initially expanded row keys */
3
+ initial?: (string | number)[];
4
+ /** Allow multiple rows to be expanded at once (default: true) */
5
+ allowMultiple?: boolean;
6
+ }
7
+ export interface DetailRowInstance {
8
+ /** Expansion state: Record<rowKey, boolean> or true for all */
9
+ expanded: Record<string, boolean> | boolean;
10
+ /** Check if a specific row is expanded */
11
+ isExpanded: (key: string | number) => boolean;
12
+ /** Whether all rows are expanded */
13
+ isAllExpanded: boolean;
14
+ /** Toggle expansion for a specific row */
15
+ toggle: (key: string | number) => void;
16
+ /** Toggle expansion for all rows */
17
+ toggleAll: () => void;
18
+ /** Expand specific rows */
19
+ expand: (keys: (string | number)[]) => void;
20
+ /** Collapse specific rows */
21
+ collapse: (keys: (string | number)[]) => void;
22
+ /** Collapse all rows */
23
+ collapseAll: () => void;
24
+ }
25
+ export interface DetailRowPluginDef<TData = unknown> {
26
+ type: 'detailRow';
27
+ options: DetailRowOptions;
28
+ create: (rows: TData[], getRowKey: (row: TData, index: number) => string | number) => DetailRowInstance;
29
+ }
@@ -0,0 +1,44 @@
1
+ import { UseTableReturn } from '../useTable/useTable';
2
+ import { MaybeGetter } from '../useTable/useTable.types';
3
+ export interface UseTablePaginationOptions {
4
+ initialPageSize?: number;
5
+ /** Total item count for server-side pagination (overrides rows.length) */
6
+ totalCount?: MaybeGetter<number>;
7
+ }
8
+ export interface UseTablePaginationReturn {
9
+ /** Current page number (1-based) */
10
+ page: number;
11
+ /** Items per page */
12
+ pageSize: number;
13
+ /** Total number of pages */
14
+ pageCount: number;
15
+ /** Total number of items */
16
+ total: number;
17
+ /** Go to specific page (1-based) */
18
+ setPage: (page: number) => void;
19
+ /** Set page size */
20
+ setPageSize: (size: number) => void;
21
+ /** Go to next page */
22
+ nextPage: () => void;
23
+ /** Go to previous page */
24
+ prevPage: () => void;
25
+ /** Go to first page */
26
+ firstPage: () => void;
27
+ /** Go to last page */
28
+ lastPage: () => void;
29
+ /** Can go to next page */
30
+ canNextPage: boolean;
31
+ /** Can go to previous page */
32
+ canPrevPage: boolean;
33
+ }
34
+ /**
35
+ * Pagination is left *uncontrolled* — owned by the TanStack instance — on
36
+ * purpose. The previous version held page state in a local `useState` and pushed
37
+ * it onto the instance via an `onPaginationChange` + `setOptions` effect, which
38
+ * applied the change one render too late, so the visible rows never moved (the
39
+ * "pagination doesn't work" bug). Driving the instance directly
40
+ * (`nextPage()`, `setPageIndex()`, ...) updates its internal state synchronously
41
+ * and re-renders the consumer, and `useTable` now reads the row model fresh each
42
+ * render, so the page actually changes.
43
+ */
44
+ export declare function useTablePagination<TData>(table: UseTableReturn<TData>, options?: UseTablePaginationOptions): UseTablePaginationReturn;
@@ -0,0 +1,2 @@
1
+ export { useTablePinning } from './useTablePinning';
2
+ export type { PinningOptions, PinningInstance, PinningPluginDef, CellInfo, HeaderInfo, } from './useTablePinning.types';
@@ -0,0 +1,2 @@
1
+ import { PinningOptions, PinningPluginDef } from './useTablePinning.types';
2
+ export declare function useTablePinning<TData = unknown>(options: PinningOptions<TData>): PinningPluginDef<TData>;