@apple-pie/slice 0.1.39 → 0.1.41

package/dist/styles.css

@@ -148,12 +148,8 @@
 	--core-outline-primary: var(--brand-grey-100);
 	--core-outline-special: var(--brand-sea-100);
 	--core-outline-tertiary: var(--brand-sea-500);
-	--core-surface-coverup-translucent: var(
-		--core-surface-coverup-translucent-light
-	);
-	--core-surface-overlay-translucent: var(
-		--core-surface-overlay-translucent-light
-	);
+	--core-surface-coverup-translucent: var(--core-surface-coverup-translucent-light);
+	--core-surface-overlay-translucent: var(--core-surface-overlay-translucent-light);
 	--core-surface-primary: var(--brand-white-0);
 	--core-surface-primary-tint: var(--surface-primary-tint-light);
 	--core-surface-secondary: var(--brand-grey-50);
@@ -226,12 +222,8 @@
 	--core-outline-primary: var(--brand-grey-700);
 	--core-outline-special: var(--brand-sky-300);
 	--core-outline-tertiary: var(--brand-sky-300);
-	--core-surface-coverup-translucent: var(
-		--core-surface-coverup-translucent-dark
-	);
-	--core-surface-overlay-translucent: var(
-		--core-surface-overlay-translucent-dark
-	);
+	--core-surface-coverup-translucent: var(--core-surface-coverup-translucent-dark);
+	--core-surface-overlay-translucent: var(--core-surface-overlay-translucent-dark);
 	--core-surface-primary: var(--brand-grey-950);
 	--core-surface-primary-tint: var(--surface-primary-tint-dark);
 	--core-surface-secondary: var(--brand-grey-900);
@@ -817,8 +809,8 @@
 	margin: 0;
 	padding: 0;
 	/* base medium body font style */
-	font-family: var(--slice-font-family, "Funnel Sans"), -apple-system,
-		BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	font-family: var(--slice-font-family, "Funnel Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+		Arial, sans-serif;
 	font-weight: 360;
 	font-size: 15px;
 	line-height: 140%;
@@ -2218,8 +2210,7 @@ line {
 	border: 1px solid transparent;
 	border-radius: 100%;
 	opacity: var(--toolbar-button-opacity);
-	transition: background, border var(--motion-water-duration)
-		var(--motion-water) 0s;
+	transition: background, border var(--motion-water-duration) var(--motion-water) 0s;
 }
 
 .Camera-module_buttonIcon__a-VBR:hover {
@@ -4178,6 +4169,48 @@ line {
 	box-sizing: border-box;
 	padding: 0;
 	margin: 0;
+}.scrollBars-module_scrollbars__c-ZPl {
+	/* Consumers override these to theme their own scrollbar (e.g. Modal
+	   binds them to its scrollHandleColor/scrollHandleColorHover props).
+	   Unoverridden, they fall back to the shared page-level scroll tokens. */
+	--scrollbar-size: 6px;
+	--scrollbar-bg: transparent;
+	--scrollbar-thumb: var(--scroll-bar);
+	--scrollbar-thumb-hover: var(--scroll-bar-hover);
+
+	/* firefox does not support -webkit-scrollbar */
+	@supports not selector(::-webkit-scrollbar) {
+		scrollbar-width: thin;
+		scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
+	}
+
+	&::-webkit-scrollbar {
+		background-color: var(--scrollbar-bg);
+		width: var(--scrollbar-size);
+		height: var(--scrollbar-size);
+	}
+
+	&::-webkit-scrollbar-track {
+		background-color: var(--scrollbar-bg);
+		width: var(--scrollbar-size);
+		height: var(--scrollbar-size);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: var(--scrollbar-thumb);
+		border-radius: 20px;
+		border: 1px solid var(--scrollbar-bg);
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: var(--scrollbar-thumb-hover);
+		border-radius: 20px;
+		border: 1px solid var(--scrollbar-bg);
+	}
+
+	&::-webkit-scrollbar-corner {
+		background-color: var(--scrollbar-bg);
+	}
 }.type-module_body-xs-regular__ZAFft {
 	font-family: var(--font-family), sans-serif;
 	font-weight: var(--font-weight-regular);
@@ -4358,8 +4391,7 @@ line {
 	padding: var(--modal-padding) !important;
 	width: 100%;
 	gap: 16px;
-	border-bottom: var(--modal-title-border-width) solid
-		var(--modal-title-border-color);
+	border-bottom: var(--modal-title-border-width) solid var(--modal-title-border-color);
 }
 
 .Modal-module_titleBlock__HUepX {
@@ -4386,30 +4418,12 @@ line {
 	overflow: hidden;
 	overflow-y: auto;
 	margin-right: 4px !important;
+	/* keeps scrollHandleColor/scrollHandleColorHover props working as before */
+	--scrollbar-bg: var(--modal-background-color);
+	--scrollbar-thumb: var(--modal-scroll-handle);
+	--scrollbar-thumb-hover: var(--modal-scroll-handle-hover);
 }
 
-.Modal-module_contentWrapper__Swyjx::-webkit-scrollbar {
-		background-color: var(--modal-background-color);
-		width: 6px;
-	}
-
-.Modal-module_contentWrapper__Swyjx::-webkit-scrollbar-track {
-		background-color: var(--modal-background-color);
-		width: 6px;
-	}
-
-.Modal-module_contentWrapper__Swyjx::-webkit-scrollbar-thumb {
-		background-color: var(--modal-scroll-handle);
-		border-radius: 20px;
-		border: 1px solid var(--modal-background-color);
-	}
-
-.Modal-module_contentWrapper__Swyjx::-webkit-scrollbar-thumb:hover {
-		background-color: var(--modal-scroll-handle-hover);
-		border-radius: 20px;
-		border: 1px solid var(--modal-background-color);
-	}
-
 .Modal-module_content__dWO-B {
 	padding: var(--modal-padding) !important;
 	padding-top: 0 !important;
@@ -4422,8 +4436,7 @@ line {
 	width: 100%;
 	user-select: none;
 	-webkit-user-select: none;
-	border-top: var(--modal-actions-border-width) solid
-		var(--modal-actions-border-color);
+	border-top: var(--modal-actions-border-width) solid var(--modal-actions-border-color);
 }
 
 .Modal-module_leftActions__-M-DM {
@@ -4704,28 +4717,56 @@ line {
 	line-height: 128.57%;
 	text-decoration: none;
 	letter-spacing: 0.2px;
-}
-	.FlexDiv-module_flexDiv__EY5A- {
-}
-	.FlexDiv-module_flexDiv__EY5A-::-webkit-scrollbar {
-		background-color: var(--flex-div-bg);
-		width: 6px;
+}.scrollBars-module_scrollbars__c-ZPl {
+	/* Consumers override these to theme their own scrollbar (e.g. Modal
+	   binds them to its scrollHandleColor/scrollHandleColorHover props).
+	   Unoverridden, they fall back to the shared page-level scroll tokens. */
+	--scrollbar-size: 6px;
+	--scrollbar-bg: transparent;
+	--scrollbar-thumb: var(--scroll-bar);
+	--scrollbar-thumb-hover: var(--scroll-bar-hover);
+
+	/* firefox does not support -webkit-scrollbar */
+	@supports not selector(::-webkit-scrollbar) {
+		scrollbar-width: thin;
+		scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
 	}
-	.FlexDiv-module_flexDiv__EY5A-::-webkit-scrollbar-track {
-		background-color: var(--flex-div-bg);
-		width: 6px;
+
+	&::-webkit-scrollbar {
+		background-color: var(--scrollbar-bg);
+		width: var(--scrollbar-size);
+		height: var(--scrollbar-size);
 	}
-	.FlexDiv-module_flexDiv__EY5A-::-webkit-scrollbar-thumb {
-		background-color: var(--flex-div-scroll-handle);
+
+	&::-webkit-scrollbar-track {
+		background-color: var(--scrollbar-bg);
+		width: var(--scrollbar-size);
+		height: var(--scrollbar-size);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: var(--scrollbar-thumb);
 		border-radius: 20px;
-		border: 1px solid var(--flex-div-bg);
+		border: 1px solid var(--scrollbar-bg);
 	}
-	.FlexDiv-module_flexDiv__EY5A-::-webkit-scrollbar-thumb:hover {
-		background-color: var(--flex-div-scroll-handle-hover);
+
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: var(--scrollbar-thumb-hover);
 		border-radius: 20px;
-		border: 1px solid var(--flex-div-bg);
+		border: 1px solid var(--scrollbar-bg);
 	}
 
+	&::-webkit-scrollbar-corner {
+		background-color: var(--scrollbar-bg);
+	}
+}.FlexDiv-module_flexDiv__EY5A- {
+	/* --flex-div-bg was never actually set anywhere (FlexDiv.tsx sets
+	   --flex-div-scroll-border for this purpose) -- bind to the real one. */
+	--scrollbar-bg: var(--flex-div-scroll-border);
+	--scrollbar-thumb: var(--flex-div-scroll-handle);
+	--scrollbar-thumb-hover: var(--flex-div-scroll-handle-hover);
+}
+
 .flexBox-module_row__z24tF {
 	display: flex;
 	justify-content: center;
@@ -6721,6 +6762,48 @@ line {
 	box-sizing: border-box;
 	padding: 0;
 	margin: 0;
+}.scrollBars-module_scrollbars__c-ZPl {
+	/* Consumers override these to theme their own scrollbar (e.g. Modal
+	   binds them to its scrollHandleColor/scrollHandleColorHover props).
+	   Unoverridden, they fall back to the shared page-level scroll tokens. */
+	--scrollbar-size: 6px;
+	--scrollbar-bg: transparent;
+	--scrollbar-thumb: var(--scroll-bar);
+	--scrollbar-thumb-hover: var(--scroll-bar-hover);
+
+	/* firefox does not support -webkit-scrollbar */
+	@supports not selector(::-webkit-scrollbar) {
+		scrollbar-width: thin;
+		scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
+	}
+
+	&::-webkit-scrollbar {
+		background-color: var(--scrollbar-bg);
+		width: var(--scrollbar-size);
+		height: var(--scrollbar-size);
+	}
+
+	&::-webkit-scrollbar-track {
+		background-color: var(--scrollbar-bg);
+		width: var(--scrollbar-size);
+		height: var(--scrollbar-size);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: var(--scrollbar-thumb);
+		border-radius: 20px;
+		border: 1px solid var(--scrollbar-bg);
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: var(--scrollbar-thumb-hover);
+		border-radius: 20px;
+		border: 1px solid var(--scrollbar-bg);
+	}
+
+	&::-webkit-scrollbar-corner {
+		background-color: var(--scrollbar-bg);
+	}
 }.type-module_body-xs-regular__ZAFft {
 	font-family: var(--font-family), sans-serif;
 	font-weight: var(--font-weight-regular);
@@ -6888,7 +6971,8 @@ line {
 	position: relative;
 	padding: var(--ta-padding) !important;
 	width: var(--ta-width);
-	height: auto;
+	height: var(--ta-height);
+	max-height: var(--ta-max-height);
 	border-radius: var(--ta-border-radius);
 	background-color: var(--ta-bg-color);
 	box-shadow: 0 0 0 1px var(--ta-border-color);
@@ -6920,28 +7004,6 @@ line {
 	overflow-y: auto;
 }
 
-.TextArea-module_textarea__-R2n0::-webkit-scrollbar {
-		background-color: transparent;
-		width: 14px;
-	}
-
-.TextArea-module_textarea__-R2n0::-webkit-scrollbar-track {
-		background-color: transparent;
-	}
-
-.TextArea-module_textarea__-R2n0::-webkit-scrollbar-thumb {
-		background-color: var(--scroll-bar);
-		border-radius: 20px;
-		border: 4px solid var(--core-surface-primary);
-	}
-
-.TextArea-module_textarea__-R2n0::-webkit-scrollbar-thumb:hover {
-		background-color: var(--scroll-bar);
-		border-radius: 20px;
-		border: 4px solid var(--core-surface-primary);
-		cursor: default;
-	}
-
 .TextArea-module_actions__yunQx {
 	width: 100%;
 	min-height: 30px;
@@ -8678,3 +8740,337 @@ line {
 	box-shadow: var(--surface-shadow-soft);
 	border-radius: var(--video-border-radius, 16px);
 }
+
+.type-module_body-xs-regular__ZAFft {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-regular);
+	font-size: var(--font-size-xs);
+	line-height: 133.33%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.type-module_body-xs-medium__s3KvF {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-medium);
+	font-size: var(--font-size-xs);
+	line-height: 133.33%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.type-module_body-xs-bold__Lhqqq {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-bold);
+	font-size: var(--font-size-xs);
+	line-height: 133.33%;
+	text-decoration: none;
+	letter-spacing: 0.25px;
+}.type-module_body-s-regular__vRHSP {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-regular);
+	font-size: var(--font-size-s);
+	line-height: 142.86%;
+	text-decoration: none;
+	letter-spacing: 0.15px;
+}.type-module_body-s-medium__tjdFc {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-medium);
+	font-size: var(--font-size-s);
+	line-height: 142.86%;
+	text-decoration: none;
+	letter-spacing: 0.15px;
+}.type-module_body-s-bold__Iy-VX {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-bold);
+	font-size: var(--font-size-s);
+	line-height: 142.86%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.type-module_body-m-regular__LuQBA {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-regular);
+	font-size: var(--font-size-m);
+	line-height: 140%;
+	text-decoration: none;
+	letter-spacing: 0.15px;
+}.type-module_body-m-medium__uW1on {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-medium);
+	font-size: var(--font-size-m);
+	line-height: 140%;
+	text-decoration: none;
+	letter-spacing: 0.15px;
+}.type-module_body-m-bold__UBcvQ {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-bold);
+	font-size: var(--font-size-m);
+	line-height: 140%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.type-module_body-l-regular__lOYbg {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-regular);
+	font-size: var(--font-size-l);
+	line-height: 162.5%;
+	text-decoration: none;
+	letter-spacing: 0.1px;
+}.type-module_body-l-medium__BqRC7 {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-medium);
+	font-size: var(--font-size-l);
+	line-height: 162.5%;
+	text-decoration: none;
+	letter-spacing: 0.1px;
+}.type-module_body-l-bold__Fh2dt {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-bold);
+	font-size: var(--font-size-l);
+	line-height: 162.5%;
+	text-decoration: none;
+	letter-spacing: 0.15px;
+}.type-module_body-xl-regular__pF2kC {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-regular);
+	font-size: var(--font-size-xl);
+	line-height: 162.5%;
+	text-decoration: none;
+	letter-spacing: 0.1px;
+}.type-module_body-xl-medium__BeyrH {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-medium);
+	font-size: var(--font-size-xl);
+	line-height: 162.5%;
+	text-decoration: none;
+	letter-spacing: 0.1px;
+}.type-module_body-xl-bold__Ruknj {
+	font-family: var(--font-family), sans-serif;
+	font-weight: var(--font-weight-bold);
+	font-size: var(--font-size-xl);
+	line-height: 162.5%;
+	text-decoration: none;
+	letter-spacing: 0.15px;
+}.type-module_heading-s-medium__z8L3G {
+	font-family: var(--font-family), sans-serif;
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 140%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.type-module_heading-s-bold__0O3g6 {
+	font-family: var(--font-family), sans-serif;
+	font-weight: 600;
+	font-size: 20px;
+	line-height: 140%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.type-module_heading-m-bold__KXxEB {
+	font-family: var(--font-family), sans-serif;
+	font-weight: 500;
+	font-size: 24px;
+	line-height: 116.67%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.type-module_heading-m-medium__cJeEA {
+	font-family: var(--font-family), sans-serif;
+	font-weight: 600;
+	font-size: 24px;
+	line-height: 116.67%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.type-module_heading-l-medium__eRe05 {
+	font-family: var(--font-family), sans-serif;
+	font-weight: 500;
+	font-size: 30px;
+	line-height: 128.57%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.type-module_heading-l-bold__Xmwtf {
+	font-family: var(--font-family), sans-serif;
+	font-weight: 600;
+	font-size: 30px;
+	line-height: 128.57%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.type-module_heading-xl-medium__5q1m3 {
+	font-family: var(--font-family), sans-serif;
+	font-weight: 500;
+	font-size: 36px;
+	line-height: 128.57%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.type-module_heading-xl-bold__k9VFV {
+	font-family: var(--font-family), sans-serif;
+	font-weight: 600;
+	font-size: 36px;
+	line-height: 128.57%;
+	text-decoration: none;
+	letter-spacing: 0.2px;
+}.scrollBars-module_scrollbars__c-ZPl {
+	/* Consumers override these to theme their own scrollbar (e.g. Modal
+	   binds them to its scrollHandleColor/scrollHandleColorHover props).
+	   Unoverridden, they fall back to the shared page-level scroll tokens. */
+	--scrollbar-size: 6px;
+	--scrollbar-bg: transparent;
+	--scrollbar-thumb: var(--scroll-bar);
+	--scrollbar-thumb-hover: var(--scroll-bar-hover);
+
+	/* firefox does not support -webkit-scrollbar */
+	@supports not selector(::-webkit-scrollbar) {
+		scrollbar-width: thin;
+		scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
+	}
+
+	&::-webkit-scrollbar {
+		background-color: var(--scrollbar-bg);
+		width: var(--scrollbar-size);
+		height: var(--scrollbar-size);
+	}
+
+	&::-webkit-scrollbar-track {
+		background-color: var(--scrollbar-bg);
+		width: var(--scrollbar-size);
+		height: var(--scrollbar-size);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: var(--scrollbar-thumb);
+		border-radius: 20px;
+		border: 1px solid var(--scrollbar-bg);
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: var(--scrollbar-thumb-hover);
+		border-radius: 20px;
+		border: 1px solid var(--scrollbar-bg);
+	}
+
+	&::-webkit-scrollbar-corner {
+		background-color: var(--scrollbar-bg);
+	}
+}
+
+.DataTable-module_tableWrapper__BzoJE {
+	position: relative;
+	box-sizing: border-box;
+	display: flex;
+	justify-content: flex-start;
+	align-items: flex-start;
+	width: var(--table-width);
+	height: var(--table-height);
+	overflow-x: auto;
+	overflow-y: auto;
+	padding: 0;
+	margin: 0;
+	border: var(--table-border-width) solid var(--table-border-color);
+	border-left-width: var(--table-border-sides);
+	border-right-width: var(--table-border-sides);
+}
+
+.DataTable-module_table__oL4Dz {
+	box-sizing: border-box;
+	border-collapse: collapse;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	color: var(--core-text-primary);
+}
+
+/* hide caption - in code for accessbibility */
+
+.DataTable-module_table__oL4Dz caption {
+	display: none;
+}
+
+/* each table header cell is sticky by default */
+
+.DataTable-module_table__oL4Dz thead tr th {
+	position: var(--table-header-sticky-poition);
+	top: 0;
+	z-index: 1;
+	border-right: var(--table-border-width) solid var(--table-border-color);
+	border-right-width: var(--table-border-sides);
+	border-bottom: var(--table-border-width) solid var(--table-border-color);
+	box-shadow: var(--table-header-box-shadow);
+	background: var(--table-header-background-color);
+}
+
+/* last th of the header row, remove the right border */
+
+.DataTable-module_table__oL4Dz thead tr th:last-child {
+	border-right: 0;
+}
+
+/* border bot and right to all body cells */
+
+.DataTable-module_table__oL4Dz tbody tr td {
+	border-right: var(--table-border-width) solid var(--table-border-color);
+	border-right-width: var(--table-border-sides);
+	border-bottom: var(--table-border-width) solid var(--table-border-color);
+}
+
+/* candy stripe all even body rows */
+
+.DataTable-module_table__oL4Dz tbody tr:nth-child(even) td {
+	background-color: var(--table-candy-stripe-background-color);
+}
+
+/* remove right border from last cell of each body row */
+
+.DataTable-module_table__oL4Dz tbody tr td:last-child {
+	border-right: 0;
+}
+
+/* remove the bottom border from every td in the last tr of the body */
+
+.DataTable-module_table__oL4Dz tbody tr:last-child td {
+	border-bottom: 0;
+}
+
+/* style first cell in each row of the body */
+
+.DataTable-module_table__oL4Dz tbody tr td:nth-child(1) {
+	position: var(--table-freeze-column-position);
+	left: 0;
+	z-index: 2;
+	box-shadow: var(--table-column-box-shadow);
+}
+
+/* style first cell in the header row */
+
+.DataTable-module_table__oL4Dz thead tr th:nth-child(1) {
+	position: var(--table-corner-position);
+	left: var(--table-corner-left);
+	top: 0;
+	z-index: 3;
+	box-shadow: var(--table-corner-box-shadow);
+}
+
+.DataTable-module_baseCell__DQl-z {
+	padding: 0;
+	margin: 0;
+	border: 0;
+	background-color: var(--table-background-color);
+}
+
+.DataTable-module_baseCellWrapper__WMgNm,
+.DataTable-module_headerCellWrapper__ytVYY {
+	box-sizing: border-box;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+.DataTable-module_xs__P-Ize {
+}
+
+.DataTable-module_m__G9QOp {
+}
+
+.DataTable-module_l__RzReg {
+}
+
+.DataTable-module_s__5ENNl {
+}
+
+.DataTable-module_scroll__grEU0 {
+}

package/dist/types/components/DataTable/DataTable.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableProps } from './_types';
+export declare function DataTable<T>(props: Readonly<DataTableProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/_data.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnDefinition, HeaderContext } from './_types';
+export type SampleTableData = {
+    name: string;
+    age: number;
+    pic: string;
+    country: string;
+    compensation: number;
+};
+export declare const sampleTableData: SampleTableData[];
+export declare const sampleTableColumnDefinitions: ColumnDefinition<SampleTableData, any>[];
+export declare const HeaderRenderer: (pros: {
+    ctx: HeaderContext<SampleTableData, any>;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/_types.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+export type CellContext<T, V> = {
+    row: T;
+    value: V;
+    rowIndex: number;
+};
+export type HeaderContext<T, V> = {
+    column: ColumnDefinition<T, V>;
+};
+export type ColumnDefinition<T, V = unknown> = {
+    id: string;
+    title: string;
+    width?: number | string;
+    justify?: 'start' | 'center' | 'end';
+    align?: 'start' | 'center' | 'end';
+    padding?: number | string;
+    nowrap?: boolean;
+    accessor: (row: T) => V;
+    renderHeader?: (ctx: HeaderContext<T, V>) => ReactNode;
+    renderCell?: (ctx: CellContext<T, V>) => ReactNode;
+};
+export interface DataTableProps<T> {
+    height: number | string;
+    width: number | string;
+    headerSticky: boolean;
+    freezeColumn: boolean;
+    backgroundColor?: string;
+    backgroundColorHoverRow?: string;
+    freezeColumnBackgroundColor?: string;
+    headerBackgroundColor?: string;
+    candyStripeBackgroundColor?: string;
+    borderStyle?: 'box' | 'row' | 'none';
+    borderColor?: string;
+    tableData?: T[];
+    columnDefinitions: ColumnDefinition<T, any>[];
+    getRowId?: (row: T, index: number) => string | number;
+    filter?: (row: T, index: number, array: T[]) => boolean;
+    caption?: string;
+    onClick?: (col: ColumnDefinition<T>, colId: number, row: T, rowIndex: number) => void;
+    onDoubleClick?: (col: ColumnDefinition<T>, colId: number, row: T, rowIndex: number) => void;
+    onMouseOver?: (col: ColumnDefinition<T>, colId: number, row: T, rowIndex: number) => void;
+    onMouseOut?: (col: ColumnDefinition<T>, colId: number, row: T, rowIndex: number) => void;
+}