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

package/_internal/components/skeleton/SkeletonRectangle.js

@@ -0,0 +1,29 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { SkeletonRectangle as SkeletonRectangle$1 } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonRectangle.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/skeleton/SkeletonRectangle.tsx
+/**
+* SkeletonRectangle component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var SkeletonRectangle = /* @__PURE__ */ defineComponent((props) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	return () => {
+		return createVNode(SkeletonRectangle$1, mergeProps(props, attrs, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value
+		}), null);
+	};
+}, {
+	name: "SkeletonRectangle",
+	inheritAttrs: false,
+	props: keysOf()("class", "aspectRatio", "height", "variant", "width", "color", "theme")
+});
+//#endregion
+export { SkeletonRectangle as default };

package/_internal/components/skeleton/SkeletonTypography.d.ts

@@ -0,0 +1,15 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { SkeletonTypographyProps as SkeletonTypographyProps$1 } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonTypography.js";
+//#region src/components/skeleton/SkeletonTypography.d.ts
+type SkeletonTypographyProps = VueToJSXProps<SkeletonTypographyProps$1>;
+/**
+ * SkeletonTypography component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const SkeletonTypography: import("vue").DefineSetupFnComponent<SkeletonTypographyProps, {}, {}, Omit<SkeletonTypographyProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { SkeletonTypography, SkeletonTypographyProps };

package/_internal/components/skeleton/SkeletonTypography.js

@@ -0,0 +1,29 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { SkeletonTypography as SkeletonTypography$1 } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonTypography.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/skeleton/SkeletonTypography.tsx
+/**
+* SkeletonTypography component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var SkeletonTypography = /* @__PURE__ */ defineComponent((props) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	return () => {
+		return createVNode(SkeletonTypography$1, mergeProps(props, attrs, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value
+		}), null);
+	};
+}, {
+	name: "LumxSkeletonTypography",
+	inheritAttrs: false,
+	props: keysOf()("class", "typography", "width", "color", "theme", "style")
+});
+//#endregion
+export { SkeletonTypography as default };

package/_internal/components/skeleton/index.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonRectangleVariant } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonRectangle.js";
+import { SkeletonCircle, SkeletonCircleProps } from "./SkeletonCircle.js";
+import { SkeletonRectangle, SkeletonRectangleProps } from "./SkeletonRectangle.js";
+import { SkeletonTypography, SkeletonTypographyProps } from "./SkeletonTypography.js";

package/_internal/components/switch/Switch.d.ts

@@ -0,0 +1,20 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { SwitchProps as SwitchProps$1 } from "../../packages/lumx-core/src/js/components/Switch/index.js";
+
+//#region src/components/switch/Switch.d.ts
+type SwitchProps = VueToJSXProps<SwitchProps$1, 'inputId' | 'inputRef'>;
+/**
+ * Switch component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Switch: import("vue").DefineSetupFnComponent<SwitchProps, {
+  change: (isChecked: boolean, value?: string, name?: string, event?: Event) => boolean;
+}, {}, Omit<SwitchProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "inputRef" | "inputId"> & {
+  class?: ClassValue;
+} & {
+  onChange?: ((isChecked: boolean, value?: string | undefined, name?: string | undefined, event?: Event | undefined) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Switch, SwitchProps };

package/_internal/components/switch/Switch.js

@@ -0,0 +1,50 @@
+import { useId } from "../../composables/useId.js";
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { Switch as Switch$1 } from "../../packages/lumx-core/src/js/components/Switch/index.js";
+import { computed, createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+/**
+* Switch component.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var Switch = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const generatedInputId = useId();
+	const inputId = computed(() => props.id || generatedInputId);
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const handleChange = (isChecked, value, name, event) => {
+		if (isAnyDisabled.value) return;
+		emit("change", isChecked, value, name, event);
+	};
+	return () => {
+		return createVNode(Switch$1, mergeProps(otherProps.value, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"inputId": inputId.value,
+			"isDisabled": isAnyDisabled.value,
+			"handleChange": handleChange,
+			"label": props.label || slots.default?.(),
+			"inputProps": {
+				...props.inputProps,
+				...disabledStateProps.value,
+				readOnly: isAnyDisabled.value
+			}
+		}), null);
+	};
+}, {
+	name: "LumxSwitch",
+	inheritAttrs: false,
+	props: keysOf()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "position", "theme", "value", "aria-disabled"),
+	emits: { change: (isChecked, value, name, event) => typeof isChecked === "boolean" && event instanceof Event }
+});
+//#endregion
+export { Switch as default };

package/_internal/components/switch/index.d.ts

@@ -0,0 +1 @@
+import { Switch, SwitchProps } from "./Switch.js";

package/_internal/components/table/Table.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { TableProps as TableProps$1 } from "../../packages/lumx-core/src/js/components/Table/index.js";
+
+//#region src/components/table/Table.d.ts
+type TableProps = VueToJSXProps<TableProps$1>;
+declare const Table: import("vue").DefineSetupFnComponent<TableProps, {}, {}, Omit<TableProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { Table, TableProps };

package/_internal/components/table/Table.js

@@ -0,0 +1,24 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { Table as Table$1 } from "../../packages/lumx-core/src/js/components/Table/index.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/table/Table.tsx
+var Table = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	return () => {
+		return createVNode(Table$1, mergeProps(props, attrs, {
+			"className": className.value,
+			"theme": props.theme || defaultTheme.value,
+			"children": slots.default?.()
+		}), null);
+	};
+}, {
+	name: "LumxTable",
+	inheritAttrs: false,
+	props: keysOf()("class", "hasBefore", "hasDividers", "theme")
+});
+//#endregion
+export { Table as default };

package/_internal/components/table/TableBody.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { TableBodyProps as TableBodyProps$1 } from "../../packages/lumx-core/src/js/components/Table/TableBody.js";
+
+//#region src/components/table/TableBody.d.ts
+type TableBodyProps = VueToJSXProps<TableBodyProps$1>;
+declare const TableBody: import("vue").DefineSetupFnComponent<TableBodyProps, {}, {}, Omit<TableBodyProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { TableBody, TableBodyProps };

package/_internal/components/table/TableBody.js

@@ -0,0 +1,21 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { TableBody as TableBody$1 } from "../../packages/lumx-core/src/js/components/Table/TableBody.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/table/TableBody.tsx
+var TableBody = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	return () => {
+		return createVNode(TableBody$1, mergeProps(props, attrs, {
+			"className": className.value,
+			"children": slots.default?.()
+		}), null);
+	};
+}, {
+	name: "LumxTableBody",
+	inheritAttrs: false,
+	props: keysOf()("class")
+});
+//#endregion
+export { TableBody as default };

package/_internal/components/table/TableCell.d.ts

@@ -0,0 +1,17 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { TableCellProps as TableCellProps$1, TableCellVariant, ThOrder } from "../../packages/lumx-core/src/js/components/Table/TableCell.js";
+
+//#region src/components/table/TableCell.d.ts
+type TableCellProps = VueToJSXProps<TableCellProps$1>;
+declare const emitSchema: {
+  headerClick: () => boolean;
+};
+declare const TableCell: import("vue").DefineSetupFnComponent<TableCellProps, {
+  headerClick: () => boolean;
+}, {}, Omit<TableCellProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {
+  onHeaderClick?: (() => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { TableCell, TableCellProps, emitSchema };

package/_internal/components/table/TableCell.js

@@ -0,0 +1,28 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useHasEventListener } from "../../composables/useHasEventListener.js";
+import { TableCell as TableCell$1 } from "../../packages/lumx-core/src/js/components/Table/TableCell.js";
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/components/table/TableCell.tsx
+var emitSchema = { headerClick: () => true };
+var TableCell = /* @__PURE__ */ defineComponent((props, { emit, slots, attrs }) => {
+	const className = useClassName(() => props.class);
+	const handleHeaderClick = () => {
+		emit("headerClick");
+	};
+	const hasClickListener = useHasEventListener("onHeaderClick");
+	return () => {
+		return createVNode(TableCell$1, mergeProps(props, attrs, {
+			"className": className.value,
+			"handleClick": hasClickListener ? handleHeaderClick : void 0,
+			"children": slots.default?.()
+		}), null);
+	};
+}, {
+	name: "LumxTableCell",
+	inheritAttrs: false,
+	props: keysOf()("class", "icon", "isSortable", "sortOrder", "variant"),
+	emits: emitSchema
+});
+//#endregion
+export { TableCell as default, emitSchema };

package/_internal/components/table/TableHeader.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { TableHeaderProps as TableHeaderProps$1 } from "../../packages/lumx-core/src/js/components/Table/TableHeader.js";
+
+//#region src/components/table/TableHeader.d.ts
+type TableHeaderProps = VueToJSXProps<TableHeaderProps$1>;
+declare const TableHeader: import("vue").DefineSetupFnComponent<TableHeaderProps, {}, {}, Omit<TableHeaderProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { TableHeader, TableHeaderProps };

package/_internal/components/table/TableHeader.js

@@ -0,0 +1,21 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { TableHeader as TableHeader$1 } from "../../packages/lumx-core/src/js/components/Table/TableHeader.js";
+import { createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/table/TableHeader.tsx
+var TableHeader = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	return () => {
+		return createVNode(TableHeader$1, mergeProps(props, attrs, {
+			"className": className.value,
+			"children": slots.default?.()
+		}), null);
+	};
+}, {
+	name: "LumxTableHeader",
+	inheritAttrs: false,
+	props: keysOf()("class")
+});
+//#endregion
+export { TableHeader as default };

package/_internal/components/table/TableRow.d.ts

@@ -0,0 +1,14 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { TableRowProps as TableRowProps$1 } from "../../packages/lumx-core/src/js/components/Table/TableRow.js";
+
+//#region src/components/table/TableRow.d.ts
+type TableRowProps = VueToJSXProps<TableRowProps$1, 'tabIndex' | 'aria-disabled'> & {
+  /** Whether the component is disabled or not. */isDisabled?: boolean;
+};
+declare const TableRow: import("vue").DefineSetupFnComponent<TableRowProps, {}, {}, Omit<TableRowProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "aria-disabled" | "tabIndex"> & {
+  class?: ClassValue;
+} & {
+  /** Whether the component is disabled or not. */isDisabled?: boolean;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { TableRow, TableRowProps };

package/_internal/components/table/TableRow.js

@@ -0,0 +1,28 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import { TableRow as TableRow$1 } from "../../packages/lumx-core/src/js/components/Table/TableRow.js";
+import { computed, createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+//#region src/components/table/TableRow.tsx
+var TableRow = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	const { isAnyDisabled, otherProps } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	return () => {
+		return createVNode(TableRow$1, mergeProps(otherProps.value, {
+			"className": className.value,
+			"tabIndex": props.isClickable && !isAnyDisabled.value ? 0 : -1,
+			"aria-disabled": isAnyDisabled.value,
+			"children": slots.default?.()
+		}), null);
+	};
+}, {
+	name: "LumxTableRow",
+	inheritAttrs: false,
+	props: keysOf()("class", "isClickable", "isDisabled", "isSelected")
+});
+//#endregion
+export { TableRow as default };

package/_internal/components/table/index.d.ts

@@ -0,0 +1,6 @@
+import { Table, TableProps } from "./Table.js";
+import { TableBody, TableBodyProps } from "./TableBody.js";
+import { TableCellVariant, ThOrder } from "../../packages/lumx-core/src/js/components/Table/TableCell.js";
+import { TableCell, TableCellProps, emitSchema } from "./TableCell.js";
+import { TableHeader, TableHeaderProps } from "./TableHeader.js";
+import { TableRow, TableRowProps } from "./TableRow.js";

package/_internal/components/tabs/Tab.d.ts

@@ -0,0 +1,16 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { TabProps as TabProps$1, TabPropsToOverride } from "../../packages/lumx-core/src/js/components/Tabs/Tab.js";
+
+//#region src/components/tabs/Tab.d.ts
+type TabProps = VueToJSXProps<TabProps$1, TabPropsToOverride>;
+declare const Tab: import("vue").DefineSetupFnComponent<TabProps, {
+  focus: (_event?: FocusEvent) => boolean;
+  keypress: (_event?: KeyboardEvent) => boolean;
+}, {}, Omit<TabProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | TabPropsToOverride> & {
+  class?: ClassValue;
+} & {
+  onFocus?: ((_event?: FocusEvent | undefined) => any) | undefined;
+  onKeypress?: ((_event?: KeyboardEvent | undefined) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { Tab, TabProps };

package/_internal/components/tabs/Tab.js

@@ -0,0 +1,52 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useDisableStateProps } from "../../composables/useDisableStateProps.js";
+import Icon from "../icon/Icon.js";
+import Text$1 from "../text/Text.js";
+import { Tab as Tab$1 } from "../../packages/lumx-core/src/js/components/Tabs/Tab.js";
+import { useTabProviderContext } from "./state.js";
+import { computed, createVNode, defineComponent, mergeProps, useAttrs } from "vue";
+var Tab = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const attrs = useAttrs();
+	const className = useClassName(() => props.class);
+	const { isAnyDisabled } = useDisableStateProps(computed(() => ({
+		...props,
+		...attrs
+	})));
+	const tabState = useTabProviderContext("tab", props.id);
+	const isActive = computed(() => props.isActive || tabState.value?.isActive);
+	const handleFocus = (event) => emit("focus", event);
+	const handleKeyPress = (event) => emit("keypress", event);
+	return () => {
+		return createVNode(Tab$1, mergeProps(attrs, {
+			"id": props.id,
+			"className": className.value,
+			"icon": props.icon,
+			"iconProps": props.iconProps,
+			"label": props.label,
+			"isActive": isActive.value,
+			"isAnyDisabled": isAnyDisabled.value,
+			"isDisabled": props.isDisabled,
+			"shouldActivateOnFocus": tabState.value?.shouldActivateOnFocus,
+			"changeToTab": tabState.value?.changeToTab,
+			"tabId": tabState.value?.tabId,
+			"tabPanelId": tabState.value?.tabPanelId,
+			"handleFocus": handleFocus,
+			"handleKeyPress": handleKeyPress,
+			"keyPressProp": "onKeypress",
+			"tabIndexProp": "tabindex",
+			"Icon": Icon,
+			"Text": Text$1
+		}), null);
+	};
+}, {
+	name: "LumxTab",
+	inheritAttrs: false,
+	props: keysOf()("icon", "iconProps", "id", "isActive", "isDisabled", "label", "class"),
+	emits: {
+		focus: (_event) => true,
+		keypress: (_event) => true
+	}
+});
+//#endregion
+export { Tab as default };

package/_internal/components/tabs/TabList.d.ts

@@ -0,0 +1,22 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { TabListLayout, TabListProps as TabListProps$1 } from "../../packages/lumx-core/src/js/components/Tabs/TabList.js";
+
+//#region src/components/tabs/TabList.d.ts
+type InternalProps = VueToJSXProps<TabListProps$1, 'aria-label'>;
+/** Public props type (includes aria-label for TypeScript consumers). */
+type TabListProps = InternalProps & {
+  'aria-label': string;
+};
+/**
+ * TabList component.
+ *
+ * Implements WAI-ARIA `tablist` role.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const TabList: import("vue").DefineSetupFnComponent<InternalProps, {}, {}, Omit<TabListProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | "aria-label"> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { TabList, TabListProps };

package/_internal/components/tabs/TabList.js

@@ -0,0 +1,42 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTheme } from "../../utils/theme/useTheme.js";
+import { useRovingTabIndexContainer } from "../../composables/useRovingTabIndexContainer.js";
+import "../../packages/lumx-core/src/js/components/Tabs/constants.js";
+import { TabList as TabList$1 } from "../../packages/lumx-core/src/js/components/Tabs/TabList.js";
+import { createVNode, defineComponent, mergeProps, ref, useAttrs, useSlots } from "vue";
+//#region src/components/tabs/TabList.tsx
+/**
+* TabList component.
+*
+* Implements WAI-ARIA `tablist` role.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var TabList = /* @__PURE__ */ defineComponent((props) => {
+	const attrs = useAttrs();
+	const slots = useSlots();
+	const defaultTheme = useTheme();
+	const className = useClassName(() => props.class);
+	const containerRef = ref(null);
+	useRovingTabIndexContainer({
+		containerRef,
+		itemSelector: "[role=\"tab\"]"
+	});
+	return () => createVNode(TabList$1, mergeProps(attrs, {
+		"ref": containerRef,
+		"aria-label": attrs["aria-label"],
+		"className": className.value,
+		"theme": props.theme || defaultTheme.value,
+		"layout": props.layout,
+		"position": props.position,
+		"children": slots.default?.()
+	}), null);
+}, {
+	name: "LumxTabList",
+	inheritAttrs: false,
+	props: keysOf()("layout", "position", "theme", "class")
+});
+//#endregion
+export { TabList as default };

package/_internal/components/tabs/TabPanel.d.ts

@@ -0,0 +1,18 @@
+import { ClassValue, VueToJSXProps } from "../../utils/VueToJSX.js";
+import { TabPanelProps as TabPanelProps$1, TabPanelPropsToOverride } from "../../packages/lumx-core/src/js/components/Tabs/TabPanel.js";
+
+//#region src/components/tabs/TabPanel.d.ts
+type TabPanelProps = VueToJSXProps<TabPanelProps$1, TabPanelPropsToOverride>;
+/**
+ * TabPanel component.
+ *
+ * Implements WAI-ARIA `tabpanel` role.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const TabPanel: import("vue").DefineSetupFnComponent<TabPanelProps, {}, {}, Omit<TabPanelProps$1, import("@lumx/core/js/types").PropsToOverride | "children" | "className" | TabPanelPropsToOverride> & {
+  class?: ClassValue;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { TabPanel, TabPanelProps };

package/_internal/components/tabs/TabPanel.js

@@ -0,0 +1,36 @@
+import { useClassName } from "../../composables/useClassName.js";
+import { keysOf } from "../../utils/VueToJSX.js";
+import { useTabProviderContext } from "./state.js";
+import { TabPanel as TabPanel$1 } from "../../packages/lumx-core/src/js/components/Tabs/TabPanel.js";
+import { computed, createVNode, defineComponent, mergeProps, useAttrs, useSlots } from "vue";
+//#region src/components/tabs/TabPanel.tsx
+/**
+* TabPanel component.
+*
+* Implements WAI-ARIA `tabpanel` role.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var TabPanel = /* @__PURE__ */ defineComponent((props) => {
+	const attrs = useAttrs();
+	const slots = useSlots();
+	const className = useClassName(() => props.class);
+	const tabState = useTabProviderContext("tabPanel", props.id);
+	const isActive = computed(() => props.isActive || tabState.value?.isActive);
+	return () => createVNode(TabPanel$1, mergeProps(attrs, {
+		"className": className.value,
+		"isActive": isActive.value,
+		"id": tabState.value?.tabPanelId,
+		"isLazy": tabState.value?.isLazy,
+		"tabId": tabState.value?.tabId,
+		"tabIndexProp": "tabindex",
+		"children": slots.default?.()
+	}), null);
+}, {
+	name: "LumxTabPanel",
+	inheritAttrs: false,
+	props: keysOf()("isActive", "id", "class")
+});
+//#endregion
+export { TabPanel as default };

package/_internal/components/tabs/TabProvider.d.ts

@@ -0,0 +1,25 @@
+//#region src/components/tabs/TabProvider.d.ts
+interface TabProviderProps {
+  /** Active tab index (controlled mode). */
+  activeTabIndex?: number;
+  /** Tab panel children should not render if the tab panel is hidden. */
+  isLazy?: boolean;
+  /** Activate tabs on focus. */
+  shouldActivateOnFocus?: boolean;
+}
+/**
+ * This component provides a context in which tabs can be defined and linked to their tab panel.
+ *
+ * It does not produce any markup so you can wrap it around any Vue elements and then split
+ * the TabList and TabPanel components in the component tree.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const TabProvider: import("vue").DefineSetupFnComponent<TabProviderProps, {
+  change: (index: number) => boolean;
+}, {}, TabProviderProps & {
+  onChange?: ((index: number) => any) | undefined;
+}, import("vue").PublicProps>;
+//#endregion
+export { TabProvider, TabProviderProps };

package/_internal/components/tabs/TabProvider.js

@@ -0,0 +1,60 @@
+import { INIT_STATE, reducer } from "../../packages/lumx-core/src/js/components/Tabs/state.js";
+import { TAB_PROVIDER_INJECT_KEY } from "./state.js";
+import { defineComponent, provide, ref, watch } from "vue";
+//#region src/components/tabs/TabProvider.tsx
+var DEFAULT_PROPS = {
+	isLazy: INIT_STATE.isLazy,
+	shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
+};
+/**
+* This component provides a context in which tabs can be defined and linked to their tab panel.
+*
+* It does not produce any markup so you can wrap it around any Vue elements and then split
+* the TabList and TabPanel components in the component tree.
+*
+* @param  props Component props.
+* @return Vue element.
+*/
+var TabProvider = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const state = ref({
+		...INIT_STATE,
+		isLazy: props.isLazy ?? INIT_STATE.isLazy,
+		shouldActivateOnFocus: props.shouldActivateOnFocus ?? INIT_STATE.shouldActivateOnFocus,
+		...props.activeTabIndex !== void 0 ? { activeTabIndex: props.activeTabIndex } : {}
+	});
+	const dispatch = (action) => {
+		state.value = reducer(state.value, action);
+	};
+	provide(TAB_PROVIDER_INJECT_KEY, {
+		state,
+		dispatch
+	});
+	watch([
+		() => props.activeTabIndex,
+		() => props.isLazy,
+		() => props.shouldActivateOnFocus
+	], () => {
+		dispatch({
+			type: "update",
+			payload: {
+				isLazy: props.isLazy ?? DEFAULT_PROPS.isLazy,
+				shouldActivateOnFocus: props.shouldActivateOnFocus ?? DEFAULT_PROPS.shouldActivateOnFocus,
+				...props.activeTabIndex !== void 0 ? { activeTabIndex: props.activeTabIndex } : {}
+			}
+		});
+	});
+	watch(() => state.value.activeTabIndex, (newIndex) => {
+		if (props.activeTabIndex !== newIndex) emit("change", newIndex);
+	});
+	return () => slots.default?.();
+}, {
+	name: "LumxTabProvider",
+	props: {
+		activeTabIndex: { required: false },
+		isLazy: { required: false },
+		shouldActivateOnFocus: { required: false }
+	},
+	emits: { change: (index) => typeof index === "number" }
+});
+//#endregion
+export { TabProvider as default };