@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/packages/lumx-core/src/js/components/Skeleton/SkeletonRectangle.js

@@ -0,0 +1,49 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Skeleton/SkeletonRectangle.tsx
+/**
+* Skeleton variants.
+*/
+var SkeletonRectangleVariant = {
+	squared: "squared",
+	rounded: "rounded",
+	pill: "pill"
+};
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SkeletonRectangle";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-skeleton-rectangle";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { variant: SkeletonRectangleVariant.squared };
+/**
+* SkeletonRectangle component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var SkeletonRectangle = (props) => {
+	const { aspectRatio, className, height, theme, variant = DEFAULT_PROPS.variant, width, color, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
+			[`height-${height}`]: Boolean(aspectRatio ? void 0 : height),
+			[`theme-${theme}`]: Boolean(theme),
+			[`variant-${variant}`]: Boolean(variant),
+			[`width-${width}`]: Boolean(width),
+			[`color-${color}`]: Boolean(color)
+		})),
+		children: /* @__PURE__ */ jsx("div", { className: element("inner") })
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, SkeletonRectangle, SkeletonRectangleVariant };

package/_internal/packages/lumx-core/src/js/components/Skeleton/SkeletonTypography.d.ts

@@ -0,0 +1,24 @@
+import { ColorPalette, TypographyInterface } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { CSSProperties } from "react";
+
+//#region ../lumx-core/src/js/components/Skeleton/SkeletonTypography.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonTypographyProps extends HasTheme, HasClassName {
+  /** Typography variant. */
+  typography: TypographyInterface;
+  /** Width CSS property. */
+  width?: CSSProperties['width'];
+  /** The color of the skeleton. */
+  color?: ColorPalette;
+  /** Reference to the root element. */
+  ref?: CommonRef;
+  /** Style object. */
+  style?: CSSProperties;
+}
+//#endregion
+export { SkeletonTypographyProps };

package/_internal/packages/lumx-core/src/js/components/Skeleton/SkeletonTypography.js

@@ -0,0 +1,38 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Skeleton/SkeletonTypography.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SkeletonTypography";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-skeleton-typography";
+var { block, element } = bem(CLASSNAME);
+/**
+* SkeletonTypography component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var SkeletonTypography = (props) => {
+	const { className, theme, typography, width, color, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			[`typography-${typography}`]: Boolean(typography),
+			[`color-${color}`]: Boolean(color)
+		})),
+		style: {
+			...forwardedProps.style,
+			width
+		},
+		children: /* @__PURE__ */ jsx("div", { className: element("inner") })
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, SkeletonTypography };

package/_internal/packages/lumx-core/src/js/components/Skeleton/index.d.ts

@@ -0,0 +1,3 @@
+import { SkeletonCircleProps } from "./SkeletonCircle.js";
+import { SkeletonRectangleProps, SkeletonRectangleVariant } from "./SkeletonRectangle.js";
+import { SkeletonTypographyProps } from "./SkeletonTypography.js";

package/_internal/packages/lumx-core/src/js/components/Switch/index.d.ts

@@ -0,0 +1,37 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasChecked } from "../../types/HasChecked.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+//#region ../lumx-core/src/js/components/Switch/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SwitchProps extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked {
+  /** Helper text. */
+  helper?: string;
+  /** Native input id property. */
+  id?: string;
+  /** Label text. */
+  label?: JSXElement;
+  /** Native input name property. */
+  name?: string;
+  /** Native input value property. */
+  value?: string;
+  /** optional props for input */
+  inputProps?: Record<string, any>;
+  /** Native input ref. */
+  inputRef?: CommonRef;
+  /** Native input id. */
+  inputId: string;
+  /** On change callback. */
+  handleChange?(isChecked: boolean, value?: string, name?: string, event?: any): void;
+  /** Position of the switch relative to the label. */
+  position?: 'left' | 'right';
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { SwitchProps };

package/_internal/packages/lumx-core/src/js/components/Switch/index.js

@@ -0,0 +1,78 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { InputLabel } from "../InputLabel/index.js";
+import { InputHelper } from "../InputHelper/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Switch/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Switch";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-switch";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { position: "left" };
+/**
+* Switch component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Switch = (props) => {
+	const { checked, className, helper, id, inputRef, isChecked = checked, label, name, ref, handleChange, theme, value, inputProps = {}, isDisabled, inputId, position = DEFAULT_PROPS.position, ...forwardedProps } = props;
+	const handleOnChange = (event) => {
+		if (handleChange) handleChange(!isChecked, value, name, event);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			"is-checked": isChecked,
+			"is-disabled": isDisabled,
+			"is-unchecked": !isChecked,
+			[`position-${position}`]: Boolean(position),
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: element("input-wrapper"),
+			children: [/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "checkbox",
+				role: "switch",
+				id: inputId,
+				className: element("input-native"),
+				name,
+				value,
+				checked: Boolean(isChecked),
+				onChange: handleOnChange,
+				"aria-describedby": helper ? `${inputId}-helper` : void 0,
+				"aria-checked": Boolean(isChecked),
+				...inputProps?.readOnly ? { readOnly: inputProps.readOnly } : {},
+				...inputProps
+			}), /* @__PURE__ */ jsxs("div", {
+				className: element("input-placeholder"),
+				children: [/* @__PURE__ */ jsx("div", { className: element("input-background") }), /* @__PURE__ */ jsx("div", { className: element("input-indicator") })]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: element("content"),
+			children: [label && InputLabel({
+				htmlFor: inputId,
+				className: element("label"),
+				theme,
+				children: label
+			}), helper && InputHelper({
+				id: `${inputId}-helper`,
+				className: element("helper"),
+				theme,
+				children: helper
+			})]
+		})]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, Switch };

package/_internal/packages/lumx-core/src/js/components/Table/TableBody.d.ts

@@ -0,0 +1,15 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Table/TableBody.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TableBodyProps extends HasClassName {
+  /** Children */
+  children?: JSXElement;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { TableBodyProps };

package/_internal/packages/lumx-core/src/js/components/Table/TableBody.js

@@ -0,0 +1,29 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { CLASSNAME as CLASSNAME$1 } from "./constants.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Table/TableBody.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "TableBody";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = `${CLASSNAME$1}__body`;
+/**
+* TableBody component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var TableBody = (props) => {
+	const { children, className, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("tbody", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, CLASSNAME),
+		children
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, TableBody };

package/_internal/packages/lumx-core/src/js/components/Table/TableCell.d.ts

@@ -0,0 +1,42 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { ValueOf } from "../../types/ValueOf.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Table/TableCell.d.ts
+/**
+ * Table head cell sort order.
+ */
+declare const ThOrder: {
+  readonly asc: "asc";
+  readonly desc: "desc";
+};
+type ThOrder = ValueOf<typeof ThOrder>;
+/**
+ * Table cell variants.
+ */
+declare const TableCellVariant: {
+  readonly body: "body";
+  readonly head: "head";
+};
+type TableCellVariant = ValueOf<typeof TableCellVariant>;
+/**
+ * Defines the props of the component.
+ */
+interface TableCellProps extends HasClassName {
+  /** Icon (SVG path).(thead only). */
+  icon?: string;
+  /** Whether the column is sortable or not (thead only). */
+  isSortable?: boolean;
+  /** Sort order displayed as icon (sortable thead only). */
+  sortOrder?: ThOrder;
+  /** Variant. */
+  variant?: TableCellVariant;
+  /** On header cell click callback. */
+  handleClick?(): void;
+  /** Children */
+  children?: JSXElement;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { TableCellProps, TableCellVariant, ThOrder };

package/_internal/packages/lumx-core/src/js/components/Table/TableCell.js

@@ -0,0 +1,101 @@
+import { Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { Icon } from "../Icon/index.js";
+import { CLASSNAME as CLASSNAME$1 } from "./constants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mdiArrowDown } from "@lumx/icons/esm/arrow-down.js";
+import { mdiArrowUp } from "@lumx/icons/esm/arrow-up.js";
+//#region ../lumx-core/src/js/components/Table/TableCell.tsx
+/**
+* Table head cell sort order.
+*/
+var ThOrder = {
+	asc: "asc",
+	desc: "desc"
+};
+/**
+* Table cell variants.
+*/
+var TableCellVariant = {
+	body: "body",
+	head: "head"
+};
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "TableCell";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = `${CLASSNAME$1}__cell`;
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { variant: TableCellVariant.body };
+/**
+* TableCell component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var TableCell = (props) => {
+	const { children, className, icon, isSortable, handleClick, ref, sortOrder, variant = DEFAULT_PROPS.variant, ...forwardedProps } = props;
+	const Wrapper = handleClick ? "button" : "div";
+	const wrapperProps = Wrapper === "button" ? {
+		type: "button",
+		onClick: handleClick
+	} : void 0;
+	let ariaSort;
+	if (isSortable) {
+		ariaSort = "none";
+		if (sortOrder === ThOrder.asc) ariaSort = "ascending";
+		if (sortOrder === ThOrder.desc) ariaSort = "descending";
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [variant === TableCellVariant.head && /* @__PURE__ */ jsx("th", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			"is-sortable": isSortable,
+			"is-sorted": isSortable && !!sortOrder,
+			head: true
+		})),
+		"aria-sort": ariaSort,
+		children: /* @__PURE__ */ jsxs(Wrapper, {
+			className: `${CLASSNAME}-wrapper`,
+			...wrapperProps,
+			children: [
+				icon && !isSortable && Icon({
+					className: `${CLASSNAME}-icon`,
+					icon,
+					size: Size.xxs
+				}),
+				isSortable && sortOrder === ThOrder.asc && Icon({
+					className: `${CLASSNAME}-icon`,
+					icon: mdiArrowUp,
+					size: Size.xxs
+				}),
+				isSortable && sortOrder === ThOrder.desc && Icon({
+					className: `${CLASSNAME}-icon`,
+					icon: mdiArrowDown,
+					size: Size.xxs
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: `${CLASSNAME}-content`,
+					children
+				})
+			]
+		})
+	}), variant === TableCellVariant.body && /* @__PURE__ */ jsx("td", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({ body: true })),
+		children: /* @__PURE__ */ jsx("div", {
+			className: `${CLASSNAME}-content`,
+			children
+		})
+	})] });
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, TableCell, TableCellVariant, ThOrder };

package/_internal/packages/lumx-core/src/js/components/Table/TableHeader.d.ts

@@ -0,0 +1,15 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Table/TableHeader.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TableHeaderProps extends HasClassName {
+  /** Children */
+  children?: JSXElement;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { TableHeaderProps };

package/_internal/packages/lumx-core/src/js/components/Table/TableHeader.js

@@ -0,0 +1,33 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { CLASSNAME as CLASSNAME$1 } from "./constants.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Table/TableHeader.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "TableHeader";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = `${CLASSNAME$1}__header`;
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* TableHeader component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var TableHeader = (props) => {
+	const { children, className, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("thead", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, CLASSNAME),
+		children
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, TableHeader };

package/_internal/packages/lumx-core/src/js/components/Table/TableRow.d.ts

@@ -0,0 +1,22 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+//#region ../lumx-core/src/js/components/Table/TableRow.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TableRowProps extends HasClassName, HasAriaDisabled {
+  /** Whether the component is clickable or not. */
+  isClickable?: boolean;
+  /** Whether the component is selected or not. */
+  isSelected?: boolean;
+  /** Tab index */
+  tabIndex?: number;
+  /** Children */
+  children?: JSXElement;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { TableRowProps };

package/_internal/packages/lumx-core/src/js/components/Table/TableRow.js

@@ -0,0 +1,42 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { CLASSNAME as CLASSNAME$1 } from "./constants.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Table/TableRow.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "TableRow";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = `${CLASSNAME$1}__row`;
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* TableRow component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var TableRow = (props) => {
+	const { children, className, isClickable, isSelected, ref, tabIndex, "aria-disabled": ariaDisabled, ...forwardedProps } = props;
+	const isDisabled = Boolean(ariaDisabled);
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		"aria-disabled": ariaDisabled,
+		...tabIndex !== void 0 ? { tabIndex } : {},
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			"is-clickable": isClickable && !isDisabled,
+			"is-disabled": isDisabled,
+			"is-selected": isSelected && !isDisabled
+		})),
+		children
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, TableRow };

package/_internal/packages/lumx-core/src/js/components/Table/constants.d.ts

@@ -0,0 +1 @@
+export { };

package/_internal/packages/lumx-core/src/js/components/Table/constants.js

@@ -0,0 +1,11 @@
+//#region ../lumx-core/src/js/components/Table/constants.ts
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Table";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-table";
+//#endregion
+export { CLASSNAME, COMPONENT_NAME };

package/_internal/packages/lumx-core/src/js/components/Table/index.d.ts

@@ -0,0 +1,20 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Table/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TableProps extends HasTheme, HasClassName {
+  /** Whether the table has checkbox or thumbnail on first cell or not. */
+  hasBefore?: boolean;
+  /** Whether the table has dividers or not. */
+  hasDividers?: boolean;
+  /** Children */
+  children?: JSXElement;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { TableProps };

package/_internal/packages/lumx-core/src/js/components/Table/index.js

@@ -0,0 +1,31 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { CLASSNAME } from "./constants.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Table/index.tsx
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* Table component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var Table = (props) => {
+	const { children, className, hasBefore, hasDividers, ref, theme, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("table", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			"has-before": hasBefore,
+			"has-dividers": hasDividers,
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		children
+	});
+};
+//#endregion
+export { DEFAULT_PROPS, Table };

package/_internal/packages/lumx-core/src/js/components/Tabs/Tab.d.ts

@@ -0,0 +1,54 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { IconProps } from "../Icon/index.js";
+
+//#region ../lumx-core/src/js/components/Tabs/Tab.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TabProps extends HasClassName {
+  /** Children are not supported. */
+  children?: never;
+  /** Icon (SVG path). */
+  icon?: IconProps['icon'];
+  /** Icon component properties. */
+  iconProps?: Omit<IconProps, 'icon'>;
+  /** Native id property. */
+  id?: string;
+  /** Whether the tab is active or not. */
+  isActive?: boolean;
+  /** Whether the component is disabled or not. */
+  isDisabled?: boolean;
+  /** Label content. */
+  label: string | JSXElement;
+  /** Whether any tab in the list is disabled (used to block interaction). */
+  isAnyDisabled?: boolean;
+  /** Whether the tab should become active when it receives focus (automatic activation pattern). */
+  shouldActivateOnFocus?: boolean;
+  /** Focus event handler injected by TabList. */
+  handleFocus?: (event: any) => void;
+  /** Keypress event handler injected by TabList. */
+  handleKeyPress?: (event: any) => void;
+  /** Callback to activate this tab, injected by TabList. */
+  changeToTab?: () => void;
+  /** Tab index for roving tabindex management. */
+  tabIndex?: number;
+  /** Name of the prop used to set tab index (framework-dependent). */
+  tabIndexProp?: string;
+  /** Name of the prop used to attach the keypress event (framework-dependent). */
+  keyPressProp?: string;
+  /** ID applied to the tab button element (for aria-labelledby on the panel). */
+  tabId?: string;
+  /** ID of the associated tab panel (for aria-controls). */
+  tabPanelId?: string;
+  /** Icon component injected by the framework wrapper. */
+  Icon: any;
+  /** Text component injected by the framework wrapper. */
+  Text: any;
+  /** Forward ref to the underlying button element. */
+  ref?: CommonRef;
+}
+type TabPropsToOverride = 'isAnyDisabled' | 'shouldActivateOnFocus' | 'changeToTab' | 'tabIndex' | 'tabIndexProp' | 'keyPressProp' | 'tabId' | 'tabPanelId' | 'Icon' | 'Text';
+//#endregion
+export { TabProps, TabPropsToOverride };