@ultraviolet/ui 3.21.0 → 3.21.2

package/dist/components/Table/index.d.ts

@@ -1,4 +1,9 @@
 import type { CSSProperties } from 'react';
+import { Body } from './Body';
+import { Cell } from './Cell';
+import { Row } from './Row';
+import { SelectBar } from './SelectBar';
+import { useTableContext } from './TableContext';
 import type { TableProviderProps } from './TableContext';
 import type { ColumnProps } from './types';
 export declare const BaseTable: import("react").ForwardRefExoticComponent<Omit<TableProviderProps, "autoCollapse" | "bordered" | "columns" | "expandButton" | "loading" | "selectable" | "stripped"> & {
@@ -16,6 +21,7 @@ export declare const BaseTable: import("react").ForwardRefExoticComponent<Omit<T
     autoCollapse?: boolean;
     expandButton?: boolean;
     columns: ColumnProps[];
+    size?: 'small' | 'medium' | 'large';
     highlightHeader?: boolean;
     style?: CSSProperties;
 } & import("react").RefAttributes<HTMLTableElement>>;
@@ -37,56 +43,14 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<Table
     autoCollapse?: boolean;
     expandButton?: boolean;
     columns: ColumnProps[];
+    size?: 'small' | 'medium' | 'large';
     highlightHeader?: boolean;
     style?: CSSProperties;
 } & import("react").RefAttributes<HTMLTableElement>> & {
-    Body: {
-        ({ children }: {
-            children: import("react").ReactNode;
-        }): import("react").JSX.Element;
-        displayName: string;
-    };
-    Cell: {
-        ({ children, className, colSpan, rowSpan, sentiment, align, style }: {
-            children?: import("react").ReactNode;
-            className?: string;
-            colSpan?: number;
-            rowSpan?: number;
-            sentiment?: import("../../theme").Color;
-            align?: "center" | "left" | "right";
-            style?: CSSProperties;
-        }): import("react").JSX.Element;
-        displayName: string;
-    };
-    Row: {
-        ({ children, className, id, selectDisabled, highlightAnimation, expandable, expanded, style, 'data-testid': dataTestid, }: {
-            children: import("react").ReactNode;
-            expandable?: import("react").ReactNode;
-            className?: string;
-            id: string;
-            'data-testid'?: string;
-            selectDisabled?: boolean | string;
-            highlightAnimation?: boolean;
-            expanded?: boolean;
-            style?: CSSProperties;
-        }): import("react").JSX.Element;
-        displayName: string;
-    };
-    SelectBar: {
-        <T>({ children, data, idKey, className }: {
-            className?: string;
-            children: (p: {
-                selectedItems: T[];
-                unselectAll: () => void;
-            }) => import("react").ReactNode;
-            data: T[];
-            idKey: keyof T;
-        }): import("react").JSX.Element | null;
-        displayName: string;
-    };
-    useTableContext: () => Omit<import("../List/ListContext").ListContextValue, "columns"> & {
-        stripped: boolean;
-        columns: ColumnProps[];
-    };
+    Body: typeof Body;
+    Cell: typeof Cell;
+    Row: typeof Row;
+    SelectBar: typeof SelectBar;
+    useTableContext: typeof useTableContext;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAW1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAgC1C,eAAO,MAAM,SAAS;iBAlBP,OAAO;IACpB;;OAEG;cACO,OAAO;eACN,OAAO;eACP,OAAO;iBACL,OAAO;IACpB;;OAEG;mBACY,OAAO;mBACP,OAAO;aACb,WAAW,EAAE;sBACJ,OAAO;YACjB,aAAa;oDAiEtB,CAAA;AAID;;GAEG;AACH,eAAO,MAAM,KAAK;iBAvFH,OAAO;IACpB;;OAEG;cACO,OAAO;eACN,OAAO;eACP,OAAO;iBACL,OAAO;IACpB;;OAEG;mBACY,OAAO;mBACP,OAAO;aACb,WAAW,EAAE;sBACJ,OAAO;YACjB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ErB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAI7B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAGvC,OAAO,EAAiB,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAiC1C,eAAO,MAAM,SAAS;iBAnBP,OAAO;IACpB;;OAEG;cACO,OAAO;eACN,OAAO;eACP,OAAO;iBACL,OAAO;IACpB;;OAEG;mBACY,OAAO;mBACP,OAAO;aACb,WAAW,EAAE;WACf,OAAO,GAAG,QAAQ,GAAG,OAAO;sBACjB,OAAO;YACjB,aAAa;oDAmEtB,CAAA;AAID;;GAEG;AACH,eAAO,MAAM,KAAK;iBA1FH,OAAO;IACpB;;OAEG;cACO,OAAO;eACN,OAAO;eACP,OAAO;iBACL,OAAO;IACpB;;OAEG;mBACY,OAAO;mBACP,OAAO;aACb,WAAW,EAAE;WACf,OAAO,GAAG,QAAQ,GAAG,OAAO;sBACjB,OAAO;YACjB,aAAa;;;;;;;CAgFrB,CAAA"}

package/dist/components/Table/index.js

@@ -2,10 +2,10 @@
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import { init_styles_css, tableStyle } from "./styles.css.js";
 import { Body, init_Body } from "./Body.js";
+import { TableProvider, init_TableContext, useTableContext } from "./TableContext.js";
 import { Cell, init_Cell } from "./Cell.js";
 import { Header, init_Header } from "./Header.js";
 import { HeaderCell, init_HeaderCell } from "./HeaderCell.js";
-import { TableProvider, init_TableContext, useTableContext } from "./TableContext.js";
 import { HeaderRow, init_HeaderRow } from "./HeaderRow.js";
 import { Row, init_Row } from "./Row.js";
 import { SelectBar, init_SelectBar } from "./SelectBar.js";
@@ -17,62 +17,65 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Table/index.tsx
 var BaseTable, Table;
-var init_Table = __esmMin(() => {
-	init_Body();
-	init_Cell();
-	init_Header();
-	init_HeaderCell();
-	init_HeaderRow();
-	init_Row();
-	init_SelectBar();
-	init_SkeletonRows();
-	init_TableContainer();
-	init_TableContext();
-	init_styles_css();
-	BaseTable = forwardRef(({ selectable = false, expandable = false, children, columns, loading, bordered = false, stripped = false, autoCollapse = false, onSelectedChange, style, highlightHeader }, ref) => /* @__PURE__ */ jsx(TableProvider, {
-		autoCollapse,
-		bordered,
-		columns,
-		expandButton: expandable,
-		onSelectedChange,
-		selectable,
-		stripped,
-		children: /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs("table", {
-			className: cn(tableStyle.table, stripped ? tableStyle.stripped : "", bordered ? tableStyle.bordered : ""),
-			ref,
-			style,
-			children: [/* @__PURE__ */ jsx(Header, {
-				highlighted: highlightHeader,
-				children: /* @__PURE__ */ jsx(HeaderRow, {
-					hasSelectAllColumn: selectable,
-					children: columns.map((column, index) => /* @__PURE__ */ jsx(HeaderCell, {
-						align: column.align,
-						info: column.info,
-						isOrdered: column.isOrdered,
-						maxWidth: column.maxWidth,
-						minWidth: column.minWidth,
-						onOrder: column.onOrder,
-						orderDirection: column.orderDirection,
-						width: column.width,
-						children: column.label
-					}, `header-column-${index}`))
-				})
-			}), loading ? /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(SkeletonRows, {
-				cols: columns.length,
-				rows: 5,
-				selectable
-			}) }) : children]
-		}) })
-	}));
-	BaseTable.displayName = "Table";
-	Table = Object.assign(BaseTable, {
-		Body,
-		Cell,
-		Row,
-		SelectBar,
-		useTableContext
-	});
-});
+function init_Table() {
+	return (init_Table = __esmMin(() => {
+		init_Body();
+		init_Cell();
+		init_Header();
+		init_HeaderCell();
+		init_HeaderRow();
+		init_Row();
+		init_SelectBar();
+		init_SkeletonRows();
+		init_TableContainer();
+		init_TableContext();
+		init_styles_css();
+		BaseTable = forwardRef(({ selectable = false, expandable = false, children, columns, loading, bordered = false, stripped = false, autoCollapse = false, onSelectedChange, style, highlightHeader, size = "medium" }, ref) => /* @__PURE__ */ jsx(TableProvider, {
+			autoCollapse,
+			bordered,
+			columns,
+			expandButton: expandable,
+			onSelectedChange,
+			selectable,
+			stripped,
+			size,
+			children: /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs("table", {
+				className: cn(tableStyle.table, stripped ? tableStyle.stripped : "", bordered ? tableStyle.bordered : ""),
+				ref,
+				style,
+				children: [/* @__PURE__ */ jsx(Header, {
+					highlighted: highlightHeader,
+					children: /* @__PURE__ */ jsx(HeaderRow, {
+						hasSelectAllColumn: selectable,
+						children: columns.map((column, index) => /* @__PURE__ */ jsx(HeaderCell, {
+							align: column.align,
+							info: column.info,
+							isOrdered: column.isOrdered,
+							maxWidth: column.maxWidth,
+							minWidth: column.minWidth,
+							onOrder: column.onOrder,
+							orderDirection: column.orderDirection,
+							width: column.width,
+							children: column.label
+						}, `header-column-${index}`))
+					})
+				}), loading ? /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(SkeletonRows, {
+					cols: columns.length,
+					rows: 5,
+					selectable
+				}) }) : children]
+			}) })
+		}));
+		BaseTable.displayName = "Table";
+		Table = Object.assign(BaseTable, {
+			Body,
+			Cell,
+			Row,
+			SelectBar,
+			useTableContext
+		});
+	}))();
+}
 
 //#endregion
 init_Table();

package/dist/components/Table/styles.css.d.ts

@@ -37,6 +37,17 @@ export declare const tableStyle: {
                 backgroundColor: `var(--${string})`;
             };
         };
+        size: {
+            small: {
+                padding: `var(--${string})`;
+            };
+            medium: {
+                padding: `var(--${string})`;
+            };
+            large: {
+                padding: `var(--${string})`;
+            };
+        };
     }>;
     header: import("@vanilla-extract/recipes").RuntimeFn<{
         highlighted: {
@@ -58,12 +69,17 @@ export declare const tableStyle: {
             };
         };
         checked: {
-            true: {
-                selectors: {
-                    '&:first-of-type': {
-                        paddingLeft: `var(--${string})`;
-                    };
-                };
+            true: {};
+        };
+        size: {
+            small: {
+                padding: `var(--${string})`;
+            };
+            medium: {
+                padding: `var(--${string})`;
+            };
+            large: {
+                padding: `var(--${string})`;
             };
         };
     }>;

package/dist/components/Table/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.css.ts"],"names":[],"mappings":"AAsJA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;YAtGjB,MAAM;gBAAI,eAAe;;YACzB,IAAI;gBAAI,eAAe;;YACvB,OAAO;gBAAI,eAAe;;YAC1B,OAAO;gBACL,eAAe;;YAEjB,SAAS;gBAAI,eAAe;;YAC5B,OAAO;gBAAI,eAAe;;YAC1B,OAAO;gBAAI,eAAe;;;;;;YAW1B,IAAI;gBACF,UAAU;;;;;;;;;;;;;;;;;YA+BZ,IAAI;gBACF,SAAS;oBACP,iBAAiB;wBACf,WAAW;;;;;;;;;;;;;CA8DtB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.css.ts"],"names":[],"mappings":"AA8JA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;YAhHjB,MAAM;gBAAI,eAAe;;YACzB,IAAI;gBAAI,eAAe;;YACvB,OAAO;gBAAI,eAAe;;YAC1B,OAAO;gBACL,eAAe;;YAEjB,SAAS;gBAAI,eAAe;;YAC5B,OAAO;gBAAI,eAAe;;YAC1B,OAAO;gBAAI,eAAe;;;;YAG1B,KAAK;gBACH,OAAO;;YAET,MAAM;gBACJ,OAAO;;YAET,KAAK;gBAAI,OAAO;;;;;;YAWhB,IAAI;gBACF,UAAU;;;;;;;;;;;;;;;;;YA8BZ,IAAI;;;YAGJ,KAAK;gBACH,OAAO;;YAET,MAAM;gBACJ,OAAO;;YAET,KAAK;gBAAI,OAAO;;;;;;;;;;;CA0DrB,CAAA"}

package/dist/components/Table/styles.css.js

@@ -4,61 +4,73 @@ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/Table/styles.css.ts
 var tableStyle;
-var init_styles_css = __esmMin(() => {
-	init_styles_css_ts_vanilla();
-	tableStyle = {
-		stripped: "uv_1cpcscz2",
-		table: "uv_1cpcscz1",
-		bordered: "uv_1cpcscz3",
-		cell: createRuntimeFn({
-			defaultClassName: "uv_1cpcscz4",
-			variantClassNames: {
-				align: {
-					center: "uv_1cpcscz5",
-					left: "uv_1cpcscz6",
-					right: "uv_1cpcscz7"
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		tableStyle = {
+			stripped: "uv_1cpcscz2",
+			table: "uv_1cpcscz1",
+			bordered: "uv_1cpcscz3",
+			cell: createRuntimeFn({
+				defaultClassName: "uv_1cpcscz4",
+				variantClassNames: {
+					align: {
+						center: "uv_1cpcscz5",
+						left: "uv_1cpcscz6",
+						right: "uv_1cpcscz7"
+					},
+					sentiment: {
+						danger: "uv_1cpcscz8",
+						info: "uv_1cpcscz9",
+						neutral: "uv_1cpcscza",
+						primary: "uv_1cpcsczb",
+						secondary: "uv_1cpcsczc",
+						success: "uv_1cpcsczd",
+						warning: "uv_1cpcscze"
+					},
+					size: {
+						small: "uv_1cpcsczf",
+						medium: "uv_1cpcsczg",
+						large: "uv_1cpcsczh"
+					}
 				},
-				sentiment: {
-					danger: "uv_1cpcscz8",
-					info: "uv_1cpcscz9",
-					neutral: "uv_1cpcscza",
-					primary: "uv_1cpcsczb",
-					secondary: "uv_1cpcsczc",
-					success: "uv_1cpcsczd",
-					warning: "uv_1cpcscze"
-				}
-			},
-			defaultVariants: {},
-			compoundVariants: []
-		}),
-		header: createRuntimeFn({
-			defaultClassName: "uv_1cpcsczf",
-			variantClassNames: { highlighted: { true: "uv_1cpcsczg" } },
-			defaultVariants: { highlighted: false },
-			compoundVariants: []
-		}),
-		headerCell: createRuntimeFn({
-			defaultClassName: "uv_1cpcsczh",
-			variantClassNames: {
-				align: {
-					center: "uv_1cpcsczi",
-					left: "uv_1cpcsczj",
-					right: "uv_1cpcsczk"
+				defaultVariants: {},
+				compoundVariants: []
+			}),
+			header: createRuntimeFn({
+				defaultClassName: "uv_1cpcsczi",
+				variantClassNames: { highlighted: { true: "uv_1cpcsczj" } },
+				defaultVariants: { highlighted: false },
+				compoundVariants: []
+			}),
+			headerCell: createRuntimeFn({
+				defaultClassName: "uv_1cpcsczk",
+				variantClassNames: {
+					align: {
+						center: "uv_1cpcsczl",
+						left: "uv_1cpcsczm",
+						right: "uv_1cpcsczn"
+					},
+					checked: { true: "uv_1cpcsczo" },
+					size: {
+						small: "uv_1cpcsczp",
+						medium: "uv_1cpcsczq",
+						large: "uv_1cpcsczr"
+					}
 				},
-				checked: { true: "uv_1cpcsczl" }
-			},
-			defaultVariants: {},
-			compoundVariants: []
-		}),
-		headerCellText: "uv_1cpcsczm",
-		expandableWrapper: "uv_1cpcsczn",
-		checkboxContainer: "uv_1cpcsczo",
-		trAnimation: "uv_1cpcsczp",
-		skeletonRow: "uv_1cpcsczq",
-		skeleton: "uv_1cpcsczr",
-		row: "uv_1cpcsczs"
-	};
-});
+				defaultVariants: {},
+				compoundVariants: []
+			}),
+			headerCellText: "uv_1cpcsczs",
+			expandableWrapper: "uv_1cpcsczt",
+			checkboxContainer: "uv_1cpcsczu",
+			trAnimation: "uv_1cpcsczv",
+			skeletonRow: "uv_1cpcsczw",
+			skeleton: "uv_1cpcsczx",
+			row: "uv_1cpcsczy"
+		};
+	}))();
+}
 
 //#endregion
 init_styles_css();

package/dist/components/Table/styles.css.ts.vanilla.js

@@ -1,7 +1,9 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/Table/styles.css.ts.vanilla.css
-var init_styles_css_ts_vanilla = __esmMin(() => {});
+function init_styles_css_ts_vanilla() {
+	return (init_styles_css_ts_vanilla = __esmMin(() => {}))();
+}
 
 //#endregion
 init_styles_css_ts_vanilla();

package/dist/components/Table/variables.css.js

@@ -2,14 +2,16 @@ import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/Table/variables.css.ts
 var headerCellWidth, headerCellMinWidth, headerCellMaxWidth, widthCell, maxWidthCell, minWidthCell;
-var init_variables_css = __esmMin(() => {
-	headerCellWidth = "var(--uv_z5q4ow0)";
-	headerCellMinWidth = "var(--uv_z5q4ow1)";
-	headerCellMaxWidth = "var(--uv_z5q4ow2)";
-	widthCell = "var(--uv_z5q4ow3)";
-	maxWidthCell = "var(--uv_z5q4ow4)";
-	minWidthCell = "var(--uv_z5q4ow5)";
-});
+function init_variables_css() {
+	return (init_variables_css = __esmMin(() => {
+		headerCellWidth = "var(--uv_z5q4ow0)";
+		headerCellMinWidth = "var(--uv_z5q4ow1)";
+		headerCellMaxWidth = "var(--uv_z5q4ow2)";
+		widthCell = "var(--uv_z5q4ow3)";
+		maxWidthCell = "var(--uv_z5q4ow4)";
+		minWidthCell = "var(--uv_z5q4ow5)";
+	}))();
+}
 
 //#endregion
 init_variables_css();

package/dist/components/Tabs/Tab.js

@@ -1,7 +1,7 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
-import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
-import _objectWithoutProperties, { init_objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectWithoutProperties.js";
+import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import _objectWithoutProperties, { init_objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectWithoutProperties.js";
 import { Stack, init_Stack } from "../Stack/index.js";
 import { Tooltip, init_Tooltip } from "../Tooltip/index.js";
 import { Text, init_Text } from "../Text/index.js";
@@ -14,89 +14,91 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Tabs/Tab.tsx
 var _excluded, Tab;
-var init_Tab = __esmMin(() => {
-	init_Badge();
-	init_Stack();
-	init_Text();
-	init_Tooltip();
-	init_TabsContext();
-	init_styles_css();
-	init_objectWithoutProperties();
-	init_objectSpread2();
-	_excluded = [
-		"as",
-		"badge",
-		"children",
-		"className",
-		"counter",
-		"disabled",
-		"onClick",
-		"onKeyDown",
-		"subtitle",
-		"tooltip",
-		"value"
-	];
-	Tab = forwardRef((_ref, ref) => {
-		let { as, badge, children, className, counter, disabled = false, onClick, onKeyDown, subtitle, tooltip, value } = _ref, props = _objectWithoutProperties(_ref, _excluded);
-		const { selected, onChange } = useTabsContext();
-		const computedAs = as !== null && as !== void 0 ? as : "button";
-		const ComputedComponent = as !== null && as !== void 0 ? as : "button";
-		const isSelected = useMemo(() => value !== void 0 && selected === value, [value, selected]);
-		return /* @__PURE__ */ jsx(Tooltip, {
-			text: tooltip,
-			children: /* @__PURE__ */ jsx(ComputedComponent, _objectSpread2(_objectSpread2({
-				"aria-disabled": disabled,
-				"aria-label": value ? `${value}` : void 0,
-				"aria-selected": isSelected,
-				className: cn(className, tabsStyle.button),
-				"data-is-selected": isSelected,
-				disabled: computedAs === "button" ? disabled : void 0,
-				onClick: (event) => {
-					if (value !== void 0) onChange(value);
-					onClick === null || onClick === void 0 || onClick(event);
-				},
-				onKeyDown: (event) => {
-					onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-					if (!(event.defaultPrevented || disabled) && value) onChange(value);
-				},
-				ref,
-				role: "tab",
-				type: computedAs === "button" ? "button" : void 0
-			}, props), {}, { children: /* @__PURE__ */ jsxs(Stack, {
-				direction: "column",
-				gap: .5,
-				children: [/* @__PURE__ */ jsxs(Stack, {
-					alignItems: "center",
-					direction: "row",
-					children: [
-						children,
-						typeof counter === "number" || typeof counter === "string" ? /* @__PURE__ */ jsx(Badge, {
-							className: tabsStyle.badge,
-							prominence: isSelected ? "strong" : "default",
-							sentiment: isSelected ? "primary" : "neutral",
-							size: "medium",
-							children: counter
-						}) : null,
-						badge ? /* @__PURE__ */ jsx("span", {
-							className: tabsStyle.badgeContainer,
-							children: badge
-						}) : null
-					]
-				}), subtitle ? /* @__PURE__ */ jsx(Stack, {
-					direction: "row",
-					children: /* @__PURE__ */ jsx(Text, {
-						as: "span",
-						className: tabsStyle.textSelected[isSelected ? "selected" : "default"],
-						prominence: "weak",
-						sentiment: "neutral",
-						variant: "bodySmall",
-						children: subtitle
-					})
-				}) : null]
-			}) }))
+function init_Tab() {
+	return (init_Tab = __esmMin(() => {
+		init_Badge();
+		init_Stack();
+		init_Text();
+		init_Tooltip();
+		init_TabsContext();
+		init_styles_css();
+		init_objectWithoutProperties();
+		init_objectSpread2();
+		_excluded = [
+			"as",
+			"badge",
+			"children",
+			"className",
+			"counter",
+			"disabled",
+			"onClick",
+			"onKeyDown",
+			"subtitle",
+			"tooltip",
+			"value"
+		];
+		Tab = forwardRef((_ref, ref) => {
+			let { as, badge, children, className, counter, disabled = false, onClick, onKeyDown, subtitle, tooltip, value } = _ref, props = _objectWithoutProperties(_ref, _excluded);
+			const { selected, onChange } = useTabsContext();
+			const computedAs = as !== null && as !== void 0 ? as : "button";
+			const ComputedComponent = as !== null && as !== void 0 ? as : "button";
+			const isSelected = useMemo(() => value !== void 0 && selected === value, [value, selected]);
+			return /* @__PURE__ */ jsx(Tooltip, {
+				text: tooltip,
+				children: /* @__PURE__ */ jsx(ComputedComponent, _objectSpread2(_objectSpread2({
+					"aria-disabled": disabled,
+					"aria-label": value ? `${value}` : void 0,
+					"aria-selected": isSelected,
+					className: cn(className, tabsStyle.button),
+					"data-is-selected": isSelected,
+					disabled: computedAs === "button" ? disabled : void 0,
+					onClick: (event) => {
+						if (value !== void 0) onChange(value);
+						onClick === null || onClick === void 0 || onClick(event);
+					},
+					onKeyDown: (event) => {
+						onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+						if (!(event.defaultPrevented || disabled) && value) onChange(value);
+					},
+					ref,
+					role: "tab",
+					type: computedAs === "button" ? "button" : void 0
+				}, props), {}, { children: /* @__PURE__ */ jsxs(Stack, {
+					direction: "column",
+					gap: .5,
+					children: [/* @__PURE__ */ jsxs(Stack, {
+						alignItems: "center",
+						direction: "row",
+						children: [
+							children,
+							typeof counter === "number" || typeof counter === "string" ? /* @__PURE__ */ jsx(Badge, {
+								className: tabsStyle.badge,
+								prominence: isSelected ? "strong" : "default",
+								sentiment: isSelected ? "primary" : "neutral",
+								size: "medium",
+								children: counter
+							}) : null,
+							badge ? /* @__PURE__ */ jsx("span", {
+								className: tabsStyle.badgeContainer,
+								children: badge
+							}) : null
+						]
+					}), subtitle ? /* @__PURE__ */ jsx(Stack, {
+						direction: "row",
+						children: /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							className: tabsStyle.textSelected[isSelected ? "selected" : "default"],
+							prominence: "weak",
+							sentiment: "neutral",
+							variant: "bodySmall",
+							children: subtitle
+						})
+					}) : null]
+				}) }))
+			});
 		});
-	});
-});
+	}))();
+}
 
 //#endregion
 init_Tab();