@ztwoint/z-ui 0.1.46 → 0.1.47

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 (59) hide show
  1. package/dist/components/assets/icons/check.d.ts +8 -0
  2. package/dist/components/assets/icons/check.js +17 -0
  3. package/dist/components/assets/icons/x-mark.d.ts +8 -0
  4. package/dist/components/assets/icons/x-mark.js +17 -0
  5. package/dist/components/table/components/cell/avatar-cell.d.ts +15 -0
  6. package/dist/components/table/components/cell/avatar-cell.js +74 -0
  7. package/dist/components/table/components/cell/boolean-cell.d.ts +1 -2
  8. package/dist/components/table/components/cell/boolean-cell.js +5 -5
  9. package/dist/components/table/components/cell/description-cell.d.ts +7 -0
  10. package/dist/components/table/components/cell/description-cell.js +16 -0
  11. package/dist/components/table/components/cell/index.d.ts +10 -1
  12. package/dist/components/table/components/cell/label-cell.d.ts +10 -0
  13. package/dist/components/table/components/cell/label-cell.js +47 -0
  14. package/dist/components/table/components/cell/link-cell.d.ts +10 -0
  15. package/dist/components/table/components/cell/link-cell.js +35 -0
  16. package/dist/components/table/components/cell/number-cell.d.ts +5 -3
  17. package/dist/components/table/components/cell/number-cell.js +40 -3
  18. package/dist/components/table/components/index.d.ts +1 -1
  19. package/dist/components/table/components/table-cell.d.ts +1 -1
  20. package/dist/components/table/components/table-cell.js +41 -32
  21. package/dist/components/table/components/table-filter/filters/boolean.js +52 -44
  22. package/dist/components/table/components/table-filter/selected-filters-display/selected-filters-display.utils.js +16 -16
  23. package/dist/components/table/components/table-filter/table-filter-button.js +59 -49
  24. package/dist/components/table/components/table-filter/table-filter-column-button.js +42 -41
  25. package/dist/components/table/components/table-header/stories/basic-header.d.ts +1 -1
  26. package/dist/components/table/components/table-header/table-header.js +10 -10
  27. package/dist/components/table/index.d.ts +1 -1
  28. package/dist/components/table/table-provider.js +37 -8
  29. package/dist/components/table/table.const.d.ts +10 -8
  30. package/dist/components/table/table.const.js +10 -8
  31. package/dist/components/table/table.js +1 -7
  32. package/dist/components/table/table.type.d.ts +36 -5
  33. package/dist/components/table/table.utils.d.ts +1 -1
  34. package/dist/components/table/table.utils.js +5 -3
  35. package/dist/components/table-card/table-card.js +116 -89
  36. package/dist/css/styles/tailwind.css +1 -1
  37. package/dist/index.js +62 -64
  38. package/dist/types/components/assets/icons/check.d.ts +8 -0
  39. package/dist/types/components/assets/icons/x-mark.d.ts +8 -0
  40. package/dist/types/components/table/components/cell/avatar-cell.d.ts +15 -0
  41. package/dist/types/components/table/components/cell/boolean-cell.d.ts +1 -2
  42. package/dist/types/components/table/components/cell/description-cell.d.ts +7 -0
  43. package/dist/types/components/table/components/cell/index.d.ts +10 -1
  44. package/dist/types/components/table/components/cell/label-cell.d.ts +10 -0
  45. package/dist/types/components/table/components/cell/link-cell.d.ts +10 -0
  46. package/dist/types/components/table/components/cell/number-cell.d.ts +5 -3
  47. package/dist/types/components/table/components/index.d.ts +1 -1
  48. package/dist/types/components/table/components/table-cell.d.ts +1 -1
  49. package/dist/types/components/table/components/table-header/stories/basic-header.d.ts +1 -1
  50. package/dist/types/components/table/index.d.ts +1 -1
  51. package/dist/types/components/table/table.const.d.ts +10 -8
  52. package/dist/types/components/table/table.type.d.ts +36 -5
  53. package/dist/types/components/table/table.utils.d.ts +1 -1
  54. package/package.json +1 -1
  55. package/dist/components/table/components/cell/text-cell.d.ts +0 -7
  56. package/dist/components/table/components/cell/text-cell.js +0 -5
  57. package/dist/node_modules/@heroicons/react/24/solid/esm/CheckCircleIcon.js +0 -26
  58. package/dist/node_modules/@heroicons/react/24/solid/esm/XCircleIcon.js +0 -26
  59. package/dist/types/components/table/components/cell/text-cell.d.ts +0 -7
package/dist/index.js CHANGED
@@ -3,8 +3,8 @@ import { Alert as p, AlertDescription as n, AlertTitle as m } from "./components
3
3
  import { AlertCirclesIcon as f } from "./components/alert/icons/circles-icon.js";
4
4
  import { Button as i, buttonVariants as Z } from "./components/button/button.js";
5
5
  import { Z2SideNavBarProvider as S } from "./components/collapsible-side-nav-bar/side-nav-bar-provider.js";
6
- import { Z2SideNavBar as D, Z2SidebarVariants as T } from "./components/collapsible-side-nav-bar/side-nav-bar.js";
7
- import { Z2SideNavBarHeader as C } from "./components/collapsible-side-nav-bar/side-nav-bar-header.js";
6
+ import { Z2SideNavBar as D, Z2SidebarVariants as b } from "./components/collapsible-side-nav-bar/side-nav-bar.js";
7
+ import { Z2SideNavBarHeader as g } from "./components/collapsible-side-nav-bar/side-nav-bar-header.js";
8
8
  import { Z2SideNavBarContent as w } from "./components/collapsible-side-nav-bar/side-nav-bar-content.js";
9
9
  import { Z2SideNavBarFooter as s } from "./components/collapsible-side-nav-bar/side-nav-bar-footer.js";
10
10
  import { Z2SideNavBarGroup as v } from "./components/collapsible-side-nav-bar/side-nav-bar-group.js";
@@ -21,8 +21,8 @@ import { default as J } from "./components/assets/icons/sidebar-left-show-copy.j
21
21
  import { SIDEBAR_WIDTH as Y, SIDEBAR_WIDTH_COLLAPSED as j } from "./components/collapsible-side-nav-bar/constants.js";
22
22
  import { CountryFlags as z } from "./components/country-flags/country-flags.js";
23
23
  import { Z2Dialog as X, Z2DialogClose as $, Z2DialogContent as oo, Z2DialogDescription as ro, Z2DialogFooter as eo, Z2DialogHeader as to, Z2DialogOverlay as ao, Z2DialogPortal as po, Z2DialogTitle as no, Z2DialogTrigger as mo } from "./components/dialog/dialog.js";
24
- import { DropdownContext as fo, Z2Dropdown as xo, Z2DropdownContent as io, Z2DropdownInput as Zo, Z2DropdownItem as So, Z2DropdownSub as uo, Z2DropdownSubContent as Do, Z2DropdownSubItem as To, Z2DropdownSubTrigger as bo } from "./components/dropdown/z2-dropdown.js";
25
- import { Z2DropdownMenu as go, Z2DropdownMenuCheckboxItem as wo, Z2DropdownMenuContent as co, Z2DropdownMenuGroup as so, Z2DropdownMenuItem as Io, Z2DropdownMenuLabel as vo, Z2DropdownMenuPortal as Bo, Z2DropdownMenuRadioGroup as Mo, Z2DropdownMenuRadioItem as Ao, Z2DropdownMenuSeparator as Po, Z2DropdownMenuShortcut as Lo, Z2DropdownMenuSub as No, Z2DropdownMenuSubContent as Eo, Z2DropdownMenuSubTrigger as Fo, Z2DropdownMenuTrigger as Ho } from "./components/dropdown-menu/z2-dropdown-menu.js";
24
+ import { DropdownContext as fo, Z2Dropdown as xo, Z2DropdownContent as io, Z2DropdownInput as Zo, Z2DropdownItem as So, Z2DropdownSub as uo, Z2DropdownSubContent as Do, Z2DropdownSubItem as bo, Z2DropdownSubTrigger as To } from "./components/dropdown/z2-dropdown.js";
25
+ import { Z2DropdownMenu as Co, Z2DropdownMenuCheckboxItem as wo, Z2DropdownMenuContent as co, Z2DropdownMenuGroup as so, Z2DropdownMenuItem as Io, Z2DropdownMenuLabel as vo, Z2DropdownMenuPortal as Bo, Z2DropdownMenuRadioGroup as Mo, Z2DropdownMenuRadioItem as Ao, Z2DropdownMenuSeparator as Po, Z2DropdownMenuShortcut as Lo, Z2DropdownMenuSub as No, Z2DropdownMenuSubContent as Eo, Z2DropdownMenuSubTrigger as Fo, Z2DropdownMenuTrigger as Ho } from "./components/dropdown-menu/z2-dropdown-menu.js";
26
26
  import { FileUploadArea as yo } from "./components/file-upload-area/file-upload-area.js";
27
27
  import { DEFAULT_ACCEPT as Go } from "./components/file-upload-area/file-upload-area.const.js";
28
28
  import { Input as Uo } from "./components/input/input.js";
@@ -34,83 +34,81 @@ import { Z2StepperItem as pr } from "./components/stepper-item/stepper-item.js";
34
34
  import { Z2Tabs as mr, Z2TabsContent as lr, Z2TabsList as fr, Z2TabsTrigger as xr } from "./components/tab/tab.js";
35
35
  import { Table as Zr, TableProvider as dr } from "./components/table/table-provider.js";
36
36
  import { TableBody as ur } from "./components/table/table.js";
37
- import { extractCellValue as Tr } from "./components/table/table.utils.js";
38
- import { DEFAULT_EMPTY_MESSAGE as Cr, TABLE_CSS_CLASSES as gr } from "./components/table/table.const.js";
37
+ import { extractCellValue as br } from "./components/table/table.utils.js";
38
+ import { DEFAULT_EMPTY_MESSAGE as gr, TABLE_CSS_CLASSES as Cr } from "./components/table/table.const.js";
39
39
  import { TableContext as cr, useTableContext as sr } from "./components/table/table.context.js";
40
40
  import { TableCell as vr } from "./components/table/components/table-cell.js";
41
- import { TextCell as Mr } from "./components/table/components/cell/text-cell.js";
42
- import { NumberCell as Pr } from "./components/table/components/cell/number-cell.js";
43
- import { BooleanCell as Nr } from "./components/table/components/cell/boolean-cell.js";
44
- import { TableHeader as Fr } from "./components/table/components/table-header/table-header.js";
41
+ import { NumberCell as Mr } from "./components/table/components/cell/number-cell.js";
42
+ import { BooleanCell as Pr } from "./components/table/components/cell/boolean-cell.js";
45
43
  import "react/jsx-runtime";
46
- import { TableRow as _r } from "./components/table/components/table-row.js";
47
- import { TableEmptyState as hr } from "./components/table/components/table-empty-state.js";
48
- import { TableLoadingState as Rr } from "./components/table/components/table-loading-state.js";
49
- import { Pagination as Vr } from "./components/table/components/pagination/pagination.js";
50
- import { TableHeaderWrapper as kr } from "./components/table/components/table-header-wrapper.js";
51
- import { TableHeaderContent as Jr } from "./components/table/components/table-header-content.js";
52
- import { TableFooter as Yr } from "./components/table/components/table-footer.js";
53
- import { TableFooterContent as qr } from "./components/table/components/table-footer-content.js";
54
- import { MagnifierIcon as Kr } from "./components/assets/icons/magnifier-icon.js";
55
- import { PaginationInfo as $r } from "./components/table/components/pagination/components/pagination-info.js";
56
- import { PaginationQuickJumper as re } from "./components/table/components/pagination/components/pagination-quick-jumper.js";
44
+ import { useTheme as Nr } from "./lib/theme.hook.js";
45
+ import { cn as Fr } from "./lib/utils.js";
46
+ import { Z2Tooltip as _r } from "./components/tooltip/tooltip.js";
47
+ import { default as hr } from "./components/table-card/table-card.js";
48
+ import { Badge as Rr, badgeVariants as Ur } from "./components/badge/badge.js";
49
+ import { Avatar as Wr, AvatarWithLabel as kr } from "./components/avatar/avatar.js";
50
+ import { InfoIcon as Jr } from "./components/assets/icons/info-icon.js";
51
+ import { MagnifierIcon as Yr } from "./components/assets/icons/magnifier-icon.js";
52
+ import { TableHeader as qr } from "./components/table/components/table-header/table-header.js";
53
+ import { TableRow as Kr } from "./components/table/components/table-row.js";
54
+ import { TableEmptyState as $r } from "./components/table/components/table-empty-state.js";
55
+ import { TableLoadingState as re } from "./components/table/components/table-loading-state.js";
56
+ import { Pagination as te } from "./components/table/components/pagination/pagination.js";
57
+ import { TableHeaderWrapper as pe } from "./components/table/components/table-header-wrapper.js";
58
+ import { TableHeaderContent as me } from "./components/table/components/table-header-content.js";
59
+ import { TableFooter as fe } from "./components/table/components/table-footer.js";
60
+ import { TableFooterContent as ie } from "./components/table/components/table-footer-content.js";
61
+ import { PaginationInfo as de } from "./components/table/components/pagination/components/pagination-info.js";
62
+ import { PaginationQuickJumper as ue } from "./components/table/components/pagination/components/pagination-quick-jumper.js";
57
63
  import "react";
58
- import { Z2Tooltip as te } from "./components/tooltip/tooltip.js";
59
- import { default as pe } from "./components/table-card/table-card.js";
60
- import { Badge as me, badgeVariants as le } from "./components/badge/badge.js";
61
- import { Avatar as xe, AvatarWithLabel as ie } from "./components/avatar/avatar.js";
62
- import { InfoIcon as de } from "./components/assets/icons/info-icon.js";
63
- import { useTheme as ue } from "./lib/theme.hook.js";
64
- import { cn as Te } from "./lib/utils.js";
65
- import { Z2PopoverTrigger as Ce } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
66
- import { Z2PopoverContent as we } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
64
+ import { Z2PopoverTrigger as be } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
65
+ import { Z2PopoverContent as ge } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
67
66
  export {
68
67
  p as Alert,
69
68
  f as AlertCirclesIcon,
70
69
  n as AlertDescription,
71
70
  m as AlertTitle,
72
- xe as Avatar,
73
- ie as AvatarWithLabel,
74
- me as Badge,
75
- Nr as BooleanCell,
71
+ Wr as Avatar,
72
+ kr as AvatarWithLabel,
73
+ Rr as Badge,
74
+ Pr as BooleanCell,
76
75
  i as Button,
77
76
  _ as ChevronUpIcon,
78
77
  R as CirclesIcon,
79
78
  z as CountryFlags,
80
79
  Go as DEFAULT_ACCEPT,
81
- Cr as DEFAULT_EMPTY_MESSAGE,
80
+ gr as DEFAULT_EMPTY_MESSAGE,
82
81
  V as DatabaseCopy,
83
82
  fo as DropdownContext,
84
83
  yo as FileUploadArea,
85
- de as InfoIcon,
84
+ Jr as InfoIcon,
86
85
  Uo as Input,
87
- Kr as MagnifierIcon,
86
+ Yr as MagnifierIcon,
88
87
  Wo as NavHeader,
89
88
  Oo as NavItem,
90
- Pr as NumberCell,
91
- $r as PaginationInfo,
92
- re as PaginationQuickJumper,
89
+ Mr as NumberCell,
90
+ de as PaginationInfo,
91
+ ue as PaginationQuickJumper,
93
92
  Y as SIDEBAR_WIDTH,
94
93
  j as SIDEBAR_WIDTH_COLLAPSED,
95
94
  J as SidebarLeftShowCopy,
96
95
  h as SubNavIndicator,
97
- gr as TABLE_CSS_CLASSES,
96
+ Cr as TABLE_CSS_CLASSES,
98
97
  Zr as Table,
99
98
  ur as TableBody,
100
- pe as TableCard,
99
+ hr as TableCard,
101
100
  vr as TableCell,
102
101
  cr as TableContext,
103
- hr as TableEmptyState,
104
- Yr as TableFooter,
105
- qr as TableFooterContent,
106
- Fr as TableHeader,
107
- Jr as TableHeaderContent,
108
- kr as TableHeaderWrapper,
109
- Rr as TableLoadingState,
110
- Vr as TablePagination,
102
+ $r as TableEmptyState,
103
+ fe as TableFooter,
104
+ ie as TableFooterContent,
105
+ qr as TableHeader,
106
+ me as TableHeaderContent,
107
+ pe as TableHeaderWrapper,
108
+ re as TableLoadingState,
109
+ te as TablePagination,
111
110
  dr as TableProvider,
112
- _r as TableRow,
113
- Mr as TextCell,
111
+ Kr as TableRow,
114
112
  k as WindowLeftCopy,
115
113
  X as Z2Dialog,
116
114
  $ as Z2DialogClose,
@@ -126,7 +124,7 @@ export {
126
124
  io as Z2DropdownContent,
127
125
  Zo as Z2DropdownInput,
128
126
  So as Z2DropdownItem,
129
- go as Z2DropdownMenu,
127
+ Co as Z2DropdownMenu,
130
128
  wo as Z2DropdownMenuCheckboxItem,
131
129
  co as Z2DropdownMenuContent,
132
130
  so as Z2DropdownMenuGroup,
@@ -143,11 +141,11 @@ export {
143
141
  Ho as Z2DropdownMenuTrigger,
144
142
  uo as Z2DropdownSub,
145
143
  Do as Z2DropdownSubContent,
146
- To as Z2DropdownSubItem,
147
- bo as Z2DropdownSubTrigger,
144
+ bo as Z2DropdownSubItem,
145
+ To as Z2DropdownSubTrigger,
148
146
  F as Z2Popover,
149
- we as Z2PopoverContent,
150
- Ce as Z2PopoverTrigger,
147
+ ge as Z2PopoverContent,
148
+ be as Z2PopoverTrigger,
151
149
  Qo as Z2Select,
152
150
  Yo as Z2SelectContent,
153
151
  jo as Z2SelectGroup,
@@ -162,23 +160,23 @@ export {
162
160
  w as Z2SideNavBarContent,
163
161
  s as Z2SideNavBarFooter,
164
162
  v as Z2SideNavBarGroup,
165
- C as Z2SideNavBarHeader,
163
+ g as Z2SideNavBarHeader,
166
164
  M as Z2SideNavBarItem,
167
165
  S as Z2SideNavBarProvider,
168
166
  P as Z2SideNavBarSeparator,
169
- T as Z2SidebarVariants,
167
+ b as Z2SidebarVariants,
170
168
  tr as Z2Stepper,
171
169
  pr as Z2StepperItem,
172
170
  mr as Z2Tabs,
173
171
  lr as Z2TabsContent,
174
172
  fr as Z2TabsList,
175
173
  xr as Z2TabsTrigger,
176
- te as Z2Tooltip,
177
- le as badgeVariants,
174
+ _r as Z2Tooltip,
175
+ Ur as badgeVariants,
178
176
  Z as buttonVariants,
179
- Te as cn,
180
- Tr as extractCellValue,
177
+ Fr as cn,
178
+ br as extractCellValue,
181
179
  sr as useTableContext,
182
- ue as useTheme,
180
+ Nr as useTheme,
183
181
  N as useZ2SideNavBar
184
182
  };
@@ -0,0 +1,8 @@
1
+ import { SVGProps } from 'react';
2
+ type IconProps = SVGProps<SVGSVGElement> & {
3
+ secondaryfill?: string;
4
+ strokewidth?: number;
5
+ title?: string;
6
+ };
7
+ export declare function Check({ title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
8
+ export default Check;
@@ -0,0 +1,8 @@
1
+ import { SVGProps } from 'react';
2
+ type IconProps = SVGProps<SVGSVGElement> & {
3
+ secondaryfill?: string;
4
+ strokewidth?: number;
5
+ title?: string;
6
+ };
7
+ export declare function XMark({ title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
8
+ export default XMark;
@@ -0,0 +1,15 @@
1
+ import { FC } from 'react';
2
+ import { RootProps, LabelProps } from '../../../avatar/avatar';
3
+ import { CellValue } from '../../table.type';
4
+ export interface AvatarCellProps {
5
+ avatar: {
6
+ label: LabelProps['label'];
7
+ color: RootProps['color'];
8
+ };
9
+ value: CellValue;
10
+ rightIcon?: React.ReactNode;
11
+ className?: string;
12
+ helperText?: string;
13
+ description?: string;
14
+ }
15
+ export declare const AvatarCell: FC<AvatarCellProps>;
@@ -1,7 +1,6 @@
1
1
  import { FC } from 'react';
2
2
  import { CellValue } from '../../table.type';
3
- interface BooleanCellProps {
3
+ export interface BooleanCellProps {
4
4
  value: CellValue;
5
5
  }
6
6
  export declare const BooleanCell: FC<BooleanCellProps>;
7
- export {};
@@ -0,0 +1,7 @@
1
+ import { FC } from 'react';
2
+ import { CellValue } from '../../table.type';
3
+ export interface DescriptionCellProps {
4
+ value: CellValue;
5
+ className?: string;
6
+ }
7
+ export declare const DescriptionCell: FC<DescriptionCellProps>;
@@ -1,3 +1,12 @@
1
- export { TextCell } from './text-cell';
2
1
  export { NumberCell } from './number-cell';
3
2
  export { BooleanCell } from './boolean-cell';
3
+ export { LinkCell } from './link-cell';
4
+ export { DescriptionCell } from './description-cell';
5
+ export { AvatarCell } from './avatar-cell';
6
+ export { LabelCell } from './label-cell';
7
+ export type { NumberCellProps } from './number-cell';
8
+ export type { BooleanCellProps } from './boolean-cell';
9
+ export type { LinkCellProps } from './link-cell';
10
+ export type { AvatarCellProps } from './avatar-cell';
11
+ export type { LabelCellProps } from './label-cell';
12
+ export type { DescriptionCellProps } from './description-cell';
@@ -0,0 +1,10 @@
1
+ import { CellValue } from '../../table.type';
2
+ export interface LabelCellProps {
3
+ value: CellValue;
4
+ rightIcon?: React.ReactNode;
5
+ leftIcon?: React.ReactNode;
6
+ className?: string;
7
+ helperText?: string;
8
+ description?: string;
9
+ }
10
+ export declare const LabelCell: React.FC<LabelCellProps>;
@@ -0,0 +1,10 @@
1
+ import { CellValue } from '../../table.type';
2
+ export interface LinkCellProps {
3
+ value: CellValue;
4
+ href: string;
5
+ target?: '_blank' | '_self' | '_parent' | '_top';
6
+ rightIcon?: React.ReactNode;
7
+ leftIcon?: React.ReactNode;
8
+ className?: string;
9
+ }
10
+ export declare const LinkCell: React.FC<LinkCellProps>;
@@ -1,7 +1,9 @@
1
- import * as React from 'react';
2
1
  import { CellValue } from '../../table.type';
3
- interface NumberCellProps {
2
+ export interface NumberCellProps {
4
3
  value: CellValue;
4
+ rightIcon?: React.ReactNode;
5
+ leftIcon?: React.ReactNode;
6
+ className?: string;
7
+ helperText?: string;
5
8
  }
6
9
  export declare const NumberCell: React.FC<NumberCellProps>;
7
- export {};
@@ -1,5 +1,5 @@
1
1
  export { TableCell } from './table-cell';
2
- export { TextCell, NumberCell, BooleanCell } from './cell';
2
+ export { NumberCell, BooleanCell, AvatarCell, DescriptionCell, LabelCell, LinkCell } from './cell';
3
3
  export { TableHeader } from './table-header';
4
4
  export { TableRow } from './table-row';
5
5
  export { TableEmptyState } from './table-empty-state';
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { CellValue, CellType, CellRenderer, TableProps } from '../table.type';
3
3
  interface TableCellProps {
4
- value: CellValue;
4
+ value: CellValue | Record<string, unknown>;
5
5
  cellType: CellType;
6
6
  cellRenderer?: CellRenderer;
7
7
  customCells?: Record<string, CellRenderer>;
@@ -1,3 +1,3 @@
1
1
  import type { StoryObj } from '@storybook/react';
2
- export declare const basicHeaderUsageCode = "import { Table, TableHeader } from '@/components/table';\n\nconst schema = [\n {\n key: 'id',\n title: 'ID',\n cellType: 'number',\n sortable: true,\n },\n {\n key: 'name',\n title: 'Name',\n cellType: 'text',\n sortable: true,\n },\n];\n\nconst data = [\n { id: 1, name: 'John Doe' },\n { id: 2, name: 'Jane Smith' },\n];\n\nfunction MyTable() {\n return (\n <Table dataSource={data} schema={schema}>\n <table className=\"w-full\">\n <TableHeader \n schema={schema}\n cell={{ cellHeight: 'small', hasBorder: true }}\n />\n {/* Table body goes here */}\n </table>\n </Table>\n );\n}";
2
+ export declare const basicHeaderUsageCode = "import { Table, TableHeader } from '@/components/table';\n\nconst schema = [\n {\n key: 'id',\n title: 'ID',\n cellType: 'number',\n sortable: true,\n },\n {\n key: 'name',\n title: 'Name',\n cellType: 'label',\n sortable: true,\n },\n];\n\nconst data = [\n { id: 1, name: 'John Doe' },\n { id: 2, name: 'Jane Smith' },\n];\n\nfunction MyTable() {\n return (\n <Table dataSource={data} schema={schema}>\n <table className=\"w-full\">\n <TableHeader \n schema={schema}\n cell={{ hasBorder: true }}\n />\n {/* Table body goes here */}\n </table>\n </Table>\n );\n}";
3
3
  export declare const BasicHeader: StoryObj;
@@ -4,5 +4,5 @@ export type { TableProps, TableSchema, TableSchemaColumn, CellType, CellValue, C
4
4
  export { extractCellValue } from './table.utils';
5
5
  export { DEFAULT_EMPTY_MESSAGE, TABLE_CSS_CLASSES } from './table.const';
6
6
  export { TableContext, useTableContext } from './table.context';
7
- export { TableCell, TableHeader, TableRow, TableEmptyState, TableLoadingState, TablePagination, TextCell, NumberCell, BooleanCell, TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent, } from './components';
7
+ export { TableCell, TableHeader, TableRow, TableEmptyState, TableLoadingState, TablePagination, NumberCell, BooleanCell, TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent, } from './components';
8
8
  export { PaginationInfo, PaginationQuickJumper } from './components/pagination/components';
@@ -3,22 +3,24 @@ export declare const TABLE_CSS_CLASSES: {
3
3
  readonly table: "w-full";
4
4
  readonly header: "bg-background-neutral-medium text-text-neutral-secondary";
5
5
  readonly cell: {
6
- readonly default: "px-4 py-3 text-sm";
7
- readonly cellHeight: {
8
- readonly small: "p-3";
9
- readonly large: "p-4";
10
- };
6
+ readonly default: "p-0 align-middle relative h-4";
11
7
  readonly hasBorder: {
12
- readonly true: "border border-stroke-solid-light";
8
+ readonly true: "border-r border-b border-stroke-solid-light";
13
9
  readonly false: "border-b border-stroke-solid-light";
14
10
  };
15
11
  };
16
- readonly headerCell: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider";
12
+ readonly headerCell: {
13
+ readonly default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider";
14
+ readonly hasBorder: {
15
+ readonly true: "border-none [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)]";
16
+ readonly false: "border-none [box-shadow:inset_0_-1px_0_0_var(--color-stroke-solid-light)]";
17
+ };
18
+ };
17
19
  readonly sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200";
18
20
  readonly headerCellContent: "flex items-center justify-between";
19
21
  readonly sortIcon: "ml-2 w-4 h-4 text-gray-400";
20
22
  readonly sortIconActive: "ml-2 w-4 h-4 text-gray-600";
21
- readonly row: "hover:bg-surface-neutral-hover transition-colors duration-200 text-text-neutral-primary";
23
+ readonly row: " transition-colors duration-200 text-text-neutral-primary";
22
24
  readonly emptyState: "px-4 py-8 text-center text-gray-500";
23
25
  readonly loading: "px-4 py-8 text-center text-gray-500";
24
26
  };
@@ -1,6 +1,6 @@
1
1
  import { FC } from 'react';
2
2
  import { FilterComponentType } from './components/table-filter/table-filter.type';
3
- export type CellType = 'text' | 'number' | 'boolean' | 'checkbox';
3
+ export type CellType = 'number' | 'boolean' | 'checkbox' | 'link' | 'avatar' | 'label' | 'description' | 'text';
4
4
  export type CellValue = string | number | boolean | null | undefined;
5
5
  export type CellRendererProps = {
6
6
  value: CellValue;
@@ -46,22 +46,52 @@ export type TableSort = {
46
46
  sortedColumns: SortColumn[];
47
47
  onSort: (field: string, direction: SortDirection) => void;
48
48
  };
49
- export type TableSchemaColumn = {
49
+ import type { NumberCellProps } from './components/cell/number-cell';
50
+ import type { BooleanCellProps } from './components/cell/boolean-cell';
51
+ import type { LinkCellProps } from './components/cell/link-cell';
52
+ import type { AvatarCellProps } from './components/cell/avatar-cell';
53
+ import type { LabelCellProps } from './components/cell/label-cell';
54
+ import type { DescriptionCellProps } from './components/cell/description-cell';
55
+ type CellPropsByType = {
56
+ number: Omit<NumberCellProps, 'value'>;
57
+ boolean: Omit<BooleanCellProps, 'value'>;
58
+ checkbox: Omit<BooleanCellProps, 'value'>;
59
+ link: Omit<LinkCellProps, 'value' | 'href'> & {
60
+ href: string;
61
+ };
62
+ avatar: Omit<AvatarCellProps, 'value'>;
63
+ label: Omit<LabelCellProps, 'value'>;
64
+ description: Omit<DescriptionCellProps, 'value'>;
65
+ };
66
+ type ColumnBase<T extends CellType> = {
50
67
  key: string;
51
- valueGetter?: (record: Record<string, any>) => string | number | boolean | null | undefined;
52
68
  title: string;
53
- cellType: CellType;
69
+ cellType: T;
54
70
  cellRenderer?: CellRenderer;
55
71
  filterable?: boolean;
56
72
  hideable?: boolean;
57
73
  sortable?: boolean;
58
74
  filterOptions?: FilterOption[];
59
75
  };
76
+ export type TableSchemaColumn = (ColumnBase<'number'> & {
77
+ valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['number'];
78
+ }) | (ColumnBase<'boolean'> & {
79
+ valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['boolean'];
80
+ }) | (ColumnBase<'checkbox'> & {
81
+ valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['checkbox'];
82
+ }) | (ColumnBase<'link'> & {
83
+ valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['link'];
84
+ }) | (ColumnBase<'avatar'> & {
85
+ valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['avatar'];
86
+ }) | (ColumnBase<'label'> & {
87
+ valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['label'];
88
+ }) | (ColumnBase<'description'> & {
89
+ valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['description'];
90
+ });
60
91
  export type TableSchema = TableSchemaColumn[];
61
92
  export type TableProps = {
62
93
  cell?: {
63
94
  hasBorder?: boolean;
64
- cellHeight?: 'small' | 'large';
65
95
  };
66
96
  dataSource: Record<string, unknown>[];
67
97
  schema: TableSchema;
@@ -73,3 +103,4 @@ export type TableProps = {
73
103
  sort?: TableSort;
74
104
  customCells?: Record<string, CellRenderer>;
75
105
  };
106
+ export {};
@@ -1,2 +1,2 @@
1
1
  import { CellValue, TableSchemaColumn } from './table.type';
2
- export declare const extractCellValue: (record: Record<string, unknown>, column: TableSchemaColumn) => CellValue;
2
+ export declare const extractCellValue: (record: Record<string, unknown>, column: TableSchemaColumn) => CellValue | Record<string, unknown>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ztwoint/z-ui",
3
- "version": "0.1.46",
3
+ "version": "0.1.47",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -1,7 +0,0 @@
1
- import { CellValue } from '../../table.type';
2
- import * as React from 'react';
3
- interface TextCellProps {
4
- value: CellValue;
5
- }
6
- export declare const TextCell: React.FC<TextCellProps>;
7
- export {};
@@ -1,5 +0,0 @@
1
- import { jsx as e, Fragment as n } from "react/jsx-runtime";
2
- const i = ({ value: t }) => /* @__PURE__ */ e(n, { children: ((r) => r == null ? "" : String(r))(t) });
3
- export {
4
- i as TextCell
5
- };
@@ -1,26 +0,0 @@
1
- import * as e from "react";
2
- function n({
3
- title: l,
4
- titleId: a,
5
- ...r
6
- }, t) {
7
- return /* @__PURE__ */ e.createElement("svg", Object.assign({
8
- xmlns: "http://www.w3.org/2000/svg",
9
- viewBox: "0 0 24 24",
10
- fill: "currentColor",
11
- "aria-hidden": "true",
12
- "data-slot": "icon",
13
- ref: t,
14
- "aria-labelledby": a
15
- }, r), l ? /* @__PURE__ */ e.createElement("title", {
16
- id: a
17
- }, l) : null, /* @__PURE__ */ e.createElement("path", {
18
- fillRule: "evenodd",
19
- d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z",
20
- clipRule: "evenodd"
21
- }));
22
- }
23
- const o = /* @__PURE__ */ e.forwardRef(n);
24
- export {
25
- o as default
26
- };
@@ -1,26 +0,0 @@
1
- import * as e from "react";
2
- function n({
3
- title: l,
4
- titleId: a,
5
- ...r
6
- }, t) {
7
- return /* @__PURE__ */ e.createElement("svg", Object.assign({
8
- xmlns: "http://www.w3.org/2000/svg",
9
- viewBox: "0 0 24 24",
10
- fill: "currentColor",
11
- "aria-hidden": "true",
12
- "data-slot": "icon",
13
- ref: t,
14
- "aria-labelledby": a
15
- }, r), l ? /* @__PURE__ */ e.createElement("title", {
16
- id: a
17
- }, l) : null, /* @__PURE__ */ e.createElement("path", {
18
- fillRule: "evenodd",
19
- d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z",
20
- clipRule: "evenodd"
21
- }));
22
- }
23
- const o = /* @__PURE__ */ e.forwardRef(n);
24
- export {
25
- o as default
26
- };
@@ -1,7 +0,0 @@
1
- import * as React from 'react';
2
- import { CellValue } from '../../table.type';
3
- interface TextCellProps {
4
- value: CellValue;
5
- }
6
- export declare const TextCell: React.FC<TextCellProps>;
7
- export {};