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

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

@@ -0,0 +1,33 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/RadioGroup/index.tsx
+/**
+* Defines the props of the component.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "RadioGroup";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-radio-group";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* RadioGroup component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var RadioGroup = (props) => {
+	const { children, className, ref, ...forwardedProps } = props;
+	return createVNode("div", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, CLASSNAME) }), [children]);
+};
+RadioGroup.displayName = COMPONENT_NAME;
+RadioGroup.className = CLASSNAME;
+RadioGroup.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, RadioGroup };

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

@@ -0,0 +1,14 @@
+import { ElementType, JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+//#region ../lumx-core/src/js/components/RawClickable/index.d.ts
+type ClickableElement = 'a' | 'button' | ElementType;
+interface BaseClickableProps extends HasDisabled, HasAriaDisabled {
+  children?: JSXElement;
+  handleClick?: (event?: any) => void;
+  handleKeyPress?: (event?: any) => void;
+  ref?: CommonRef;
+}
+//#endregion
+export { BaseClickableProps, ClickableElement };

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

@@ -0,0 +1,33 @@
+import { createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/RawClickable/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Render clickable element (link, button or custom element)
+* (also does some basic disabled state handling)
+*/
+var RawClickable = (props) => {
+	const { children, handleClick, handleKeyPress, disabled, isDisabled = disabled, "aria-disabled": ariaDisabled, as, ...forwardedProps } = props;
+	const isAnyDisabled = isDisabled || ariaDisabled === "true" || ariaDisabled === true;
+	const Component = as;
+	let clickableProps;
+	if (Component === "button") clickableProps = {
+		type: forwardedProps.type || "button",
+		disabled: isDisabled
+	};
+	else clickableProps = { tabIndex: isDisabled ? "-1" : forwardedProps.tabIndex };
+	return createVNode(Component, mergeProps({ "aria-disabled": isAnyDisabled || void 0 }, forwardedProps, clickableProps, {
+		"onKeyPress": handleKeyPress,
+		"onClick": (event) => {
+			if (isAnyDisabled) {
+				event.stopPropagation();
+				event.preventDefault();
+				return;
+			}
+			handleClick?.(event);
+		}
+	}), _isSlot(children) ? children : { default: () => [children] });
+};
+//#endregion
+export { RawClickable };

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

@@ -0,0 +1,58 @@
+import { ComboboxButtonLabelDisplayMode } from "../Combobox/ComboboxButton.js";
+import { BaseSelectProps, SelectButtonTranslations, SelectListStatus } from "../../utils/select/types.js";
+
+//#region ../lumx-core/src/js/components/SelectButton/index.d.ts
+/**
+ * Defines the props for the core SelectButton template.
+ */
+interface SelectButtonProps<O> extends BaseSelectProps<O> {
+  /**
+   * Selected value (single mode) or selected values (multi mode).
+   * The wrapper layer chooses the shape; the core just renders names.
+   */
+  value?: O | O[];
+  /** Single or multiple selection */
+  selectionType?: 'single' | 'multiple';
+  /** Button label (used for ARIA and when no selection). */
+  label: string;
+  /** Controls how the label/value is displayed in the button. */
+  labelDisplayMode?: ComboboxButtonLabelDisplayMode;
+  /**
+   * Props forwarded to Combobox.Button (button appearance, emphasis, size, etc.).
+   * Pass `renderButton` here to provide a custom button renderer — see
+   * `ComboboxButtonProps.renderButton`. Framework wrappers are responsible for
+   * defaulting any visual affordance (e.g. the dropdown chevron `rightIcon`).
+   */
+  buttonProps?: Record<string, any>;
+  /** Props forwarded to Combobox.Popover. */
+  popoverProps?: Record<string, any>;
+  /** Props forwarded to Combobox.List (e.g. ref). */
+  listProps?: Record<string, any>;
+  /** Callback on option selected (receives option id string). */
+  handleSelect?: (selectedOption: {
+    value: string;
+  }) => void;
+  /**
+   * Status of the dropdown list.
+   * - `'idle'` — Default state, no loading indicators.
+   * - `'loading'` — Full loading: shows skeleton placeholders, hides real options.
+   * - `'loadingMore'` — Paginated loading: appends a skeleton after existing options.
+   * - `'error'` — Error state: shows an error message in the dropdown.
+   * @default 'idle'
+   */
+  listStatus?: SelectListStatus;
+  /** Optional translations for screen-reader announcements (loading/empty/error/option count). */
+  translations?: SelectButtonTranslations;
+  /** Callback fired when the dropdown open state changes. */
+  onOpen?: (isOpen: boolean) => void;
+  /**
+   * Callback fired to load more items (infinite scroll).
+   * When provided together with an injected `InfiniteScroll` component, an invisible
+   * sentinel element is rendered after the options to trigger loading via IntersectionObserver.
+   */
+  onLoadMore?: () => void;
+  /** IntersectionObserver options forwarded to the InfiniteScroll sentinel. */
+  infiniteScrollOptions?: IntersectionObserverInit;
+}
+//#endregion
+export { SelectButtonProps };

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

@@ -0,0 +1,85 @@
+import { __toESM } from "../../../../../../_virtual/_rolldown/runtime.js";
+import { require_castArray } from "../../../../../../node_modules/lodash/castArray.js";
+import { getOptionDisplayName } from "../../utils/select/getOptionDisplayName.js";
+import { renderSelectOptions } from "../../utils/select/renderSelectOptions.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/SelectButton/index.tsx
+var import_castArray = /* @__PURE__ */ __toESM(require_castArray(), 1);
+/**
+* Defines the props for the core SelectButton template.
+*/
+/**
+* Injected framework-specific components for SelectButton rendering.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SelectButton";
+/**
+* Component default class name.
+*/
+var CLASSNAME = "lumx-select-button";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { selectionType: "single" };
+/**
+* SelectButton core template.
+* Renders a Combobox with a button trigger and a dropdown list of options.
+*
+* Framework-specific components are passed as a second argument by the React/Vue wrappers.
+*
+* @param props      Component props.
+* @param components Injected framework-specific components.
+* @return JSX element.
+*/
+var SelectButton = (props, { Combobox, InfiniteScroll }) => {
+	const { options, getOptionId, getOptionName, getOptionDescription, renderOption, getSectionId, renderSectionTitle, value, selectionType = DEFAULT_PROPS.selectionType, label, labelDisplayMode, buttonProps, popoverProps, listProps, handleSelect, listStatus = "idle", translations, onOpen, onLoadMore, infiniteScrollOptions } = props;
+	const isFullLoading = listStatus === "loading";
+	const isLoadingMore = listStatus === "loadingMore";
+	const isError = listStatus === "error";
+	const isMultiselectable = selectionType === "multiple";
+	const displayValue = value != null ? (0, import_castArray.default)(value).map((v) => getOptionDisplayName(v, getOptionName, getOptionId)).filter(Boolean).join(", ") : "";
+	return createVNode(Combobox.Provider, { "onOpen": onOpen }, { default: () => [createVNode(Combobox.Button, mergeProps(buttonProps, {
+		"label": label,
+		"value": displayValue,
+		"onSelect": handleSelect,
+		"labelDisplayMode": labelDisplayMode
+	}), null), createVNode(Combobox.Popover, mergeProps({
+		"fitToAnchorWidth": "minWidth",
+		"fitWithinViewportHeight": true,
+		"placement": "bottom-start"
+	}, popoverProps), { default: () => [createVNode(Combobox.List, mergeProps(listProps, {
+		"aria-label": label,
+		"aria-multiselectable": isMultiselectable || void 0
+	}), { default: () => [
+		isFullLoading ? createVNode(Combobox.OptionSkeleton, { "count": 3 }, null) : renderSelectOptions({
+			options,
+			getOptionId,
+			getOptionName,
+			getOptionDescription,
+			renderOption,
+			getSectionId,
+			renderSectionTitle,
+			selected: value
+		}, { Combobox }),
+		onLoadMore && InfiniteScroll && createVNode(InfiniteScroll, {
+			"callback": () => {
+				if (listStatus && listStatus !== "idle") return;
+				onLoadMore();
+			},
+			"options": infiniteScrollOptions
+		}, null),
+		isLoadingMore && createVNode(Combobox.OptionSkeleton, { "count": 1 }, null)
+	] }), createVNode(Combobox.State, {
+		"loadingMessage": translations?.loadingMessage,
+		"emptyMessage": translations?.emptyMessage,
+		"nbOptionMessage": translations?.nbOptionMessage,
+		"errorMessage": isError ? translations?.errorMessage : void 0,
+		"errorTryReloadMessage": isError ? translations?.errorTryReloadMessage : void 0
+	}, null)] })] });
+};
+SelectButton.displayName = COMPONENT_NAME;
+SelectButton.className = CLASSNAME;
+//#endregion
+export { CLASSNAME, DEFAULT_PROPS, SelectButton };

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

@@ -0,0 +1,70 @@
+import { renderSelectOptions } from "../../utils/select/renderSelectOptions.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/SelectTextField/index.tsx
+/**
+* Defines the props for the core SelectTextField template.
+*/
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SelectTextField";
+/**
+* Component default class name.
+*/
+var CLASSNAME = "lumx-select-text-field";
+/**
+* SelectTextField core template.
+* Renders a Combobox with a text input trigger and a dropdown list of options.
+* Supports search/filter, single selection, and multiple selection with chips.
+*
+* Framework-specific components are passed as a second argument by the React/Vue wrappers.
+*
+* @param props      Component props.
+* @param components Injected framework-specific components.
+* @return JSX element.
+*/
+var SelectTextField = (props, { Combobox, InfiniteScroll }) => {
+	const { options, getOptionId, getOptionName, getOptionDescription, renderOption, getSectionId, renderSectionTitle, selected, label, isMultiselectable, inputProps, popoverProps, listProps, listStatus = "idle", loadingMessage, emptyMessage, nbOptionMessage, errorMessage, errorTryReloadMessage, onOpen, chips, beforeOptions, afterOptions, onLoadMore, infiniteScrollOptions } = props;
+	const isFullLoading = listStatus === "loading";
+	const isLoadingMore = listStatus === "loadingMore";
+	const isError = listStatus === "error";
+	return createVNode(Combobox.Provider, { "onOpen": onOpen }, { default: () => [createVNode(Combobox.Input, mergeProps({ "label": label }, inputProps, { "chips": chips }), null), createVNode(Combobox.Popover, mergeProps({
+		"fitToAnchorWidth": "minWidth",
+		"fitWithinViewportHeight": true,
+		"placement": "bottom-start"
+	}, popoverProps), { default: () => [createVNode(Combobox.List, mergeProps(listProps, {
+		"aria-label": label,
+		"aria-multiselectable": isMultiselectable || void 0
+	}), { default: () => [
+		beforeOptions,
+		isFullLoading ? createVNode(Combobox.OptionSkeleton, { "count": 3 }, null) : renderSelectOptions({
+			options,
+			getOptionId,
+			getOptionName,
+			getOptionDescription,
+			renderOption,
+			getSectionId,
+			renderSectionTitle,
+			selected
+		}, { Combobox }),
+		afterOptions,
+		onLoadMore && InfiniteScroll && createVNode(InfiniteScroll, {
+			"callback": () => {
+				if (listStatus && listStatus !== "idle") return;
+				onLoadMore();
+			},
+			"options": infiniteScrollOptions
+		}, null),
+		isLoadingMore && createVNode(Combobox.OptionSkeleton, { "count": 1 }, null)
+	] }), createVNode(Combobox.State, {
+		"loadingMessage": loadingMessage,
+		"emptyMessage": emptyMessage,
+		"nbOptionMessage": nbOptionMessage,
+		"errorMessage": isError ? errorMessage : void 0,
+		"errorTryReloadMessage": isError ? errorTryReloadMessage : void 0
+	}, null)] })] });
+};
+SelectTextField.displayName = COMPONENT_NAME;
+SelectTextField.className = CLASSNAME;
+//#endregion
+export { SelectTextField };

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

@@ -0,0 +1,18 @@
+import { ColorPalette, GlobalSize } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Skeleton/SkeletonCircle.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonCircleProps extends HasTheme, HasClassName {
+  /** Size variant. */
+  size: GlobalSize;
+  /** The color of the skeleton. */
+  color?: ColorPalette;
+  /** Reference to the root element. */
+  ref?: CommonRef;
+}
+//#endregion
+export { SkeletonCircleProps };

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

@@ -0,0 +1,25 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Skeleton/SkeletonCircle.tsx
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-skeleton-circle";
+var { block } = bem(CLASSNAME);
+/**
+* SkeletonCircle component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var SkeletonCircle = (props) => {
+	const { className, size, color, theme, ref, ...forwardedProps } = props;
+	return createVNode("div", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({
+		[`size-${size}`]: Boolean(size),
+		[`color-${color}`]: Boolean(color),
+		[`theme-${theme}`]: Boolean(theme)
+	})) }), null);
+};
+//#endregion
+export { CLASSNAME, SkeletonCircle };

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

@@ -0,0 +1,34 @@
+import { AspectRatio, ColorPalette, GlobalSize } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { ValueOf } from "../../types/ValueOf.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Skeleton/SkeletonRectangle.d.ts
+/**
+ * Skeleton variants.
+ */
+declare const SkeletonRectangleVariant: {
+  readonly squared: "squared";
+  readonly rounded: "rounded";
+  readonly pill: "pill";
+};
+type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonRectangleProps extends HasTheme, HasClassName {
+  /** Aspect ratio (use with width and not height). */
+  aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;
+  /** Height size. */
+  height?: GlobalSize;
+  /** Border variant. */
+  variant?: SkeletonRectangleVariant;
+  /** Width size. */
+  width?: GlobalSize;
+  /** The color of the skeleton. */
+  color?: ColorPalette;
+  /** Reference to the root element. */
+  ref?: CommonRef;
+}
+//#endregion
+export { SkeletonRectangleProps, SkeletonRectangleVariant };

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

@@ -0,0 +1,40 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Skeleton/SkeletonRectangle.tsx
+/**
+* Skeleton variants.
+*/
+var SkeletonRectangleVariant = {
+	squared: "squared",
+	rounded: "rounded",
+	pill: "pill"
+};
+/**
+* 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 createVNode("div", mergeProps({ "ref": 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)
+	})) }), [createVNode("div", { "className": element("inner") }, null)]);
+};
+//#endregion
+export { CLASSNAME, 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,31 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Skeleton/SkeletonTypography.tsx
+/**
+* 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 createVNode("div", mergeProps({ "ref": ref }, forwardedProps, {
+		"className": import_classnames.default(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			[`typography-${typography}`]: Boolean(typography),
+			[`color-${color}`]: Boolean(color)
+		})),
+		"style": {
+			...forwardedProps.style,
+			width
+		}
+	}), [createVNode("div", { "className": element("inner") }, null)]);
+};
+//#endregion
+export { CLASSNAME, 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,58 @@
+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 { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Switch/index.tsx
+/**
+* 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 createVNode("div", mergeProps({ "ref": 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)
+	})) }), [createVNode("div", { "className": element("input-wrapper") }, [createVNode("input", mergeProps({
+		"ref": inputRef,
+		"type": "checkbox",
+		"role": "switch",
+		"id": inputId,
+		"className": element("input-native"),
+		"name": name,
+		"value": value,
+		"checked": Boolean(isChecked),
+		"onChange": handleOnChange,
+		"aria-describedby": helper ? `${inputId}-helper` : void 0,
+		"aria-checked": Boolean(isChecked)
+	}, inputProps?.readOnly ? { readOnly: inputProps.readOnly } : {}, inputProps), null), createVNode("div", { "className": element("input-placeholder") }, [createVNode("div", { "className": element("input-background") }, null), createVNode("div", { "className": element("input-indicator") }, null)])]), createVNode("div", { "className": element("content") }, [label && InputLabel({
+		htmlFor: inputId,
+		className: element("label"),
+		theme,
+		children: label
+	}), helper && InputHelper({
+		id: `${inputId}-helper`,
+		className: element("helper"),
+		theme,
+		children: helper
+	})])]);
+};
+//#endregion
+export { CLASSNAME, DEFAULT_PROPS, 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,20 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { CLASSNAME as CLASSNAME$1 } from "./constants.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Table/TableBody.tsx
+/**
+* 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 createVNode("tbody", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, CLASSNAME) }), [children]);
+};
+//#endregion
+export { 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 };