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

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

@@ -0,0 +1,79 @@
+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, createVNode, mergeProps } from "vue";
+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 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 createVNode(Fragment, null, [variant === TableCellVariant.head && createVNode("th", mergeProps({ "ref": ref }, forwardedProps, {
+		"className": import_classnames.default(className, block({
+			"is-sortable": isSortable,
+			"is-sorted": isSortable && !!sortOrder,
+			head: true
+		})),
+		"aria-sort": ariaSort
+	}), [createVNode(Wrapper, mergeProps({ "className": `${CLASSNAME}-wrapper` }, wrapperProps), { default: () => [
+		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
+		}),
+		createVNode("div", { "className": `${CLASSNAME}-content` }, [children])
+	] })]), variant === TableCellVariant.body && createVNode("td", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({ body: true })) }), [createVNode("div", { "className": `${CLASSNAME}-content` }, [children])])]);
+};
+//#endregion
+export { 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,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/TableHeader.tsx
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = `${CLASSNAME$1}__header`;
+/**
+* TableHeader component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var TableHeader = (props) => {
+	const { children, className, ref, ...forwardedProps } = props;
+	return createVNode("thead", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, CLASSNAME) }), [children]);
+};
+//#endregion
+export { 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,25 @@
+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 { createVNode, mergeProps } from "vue";
+var { block } = bem(`${CLASSNAME$1}__row`);
+/**
+* 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 createVNode("tr", mergeProps({
+		"ref": 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 { 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,7 @@
+//#region ../lumx-core/src/js/components/Table/constants.ts
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-table";
+//#endregion
+export { CLASSNAME };

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,22 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { CLASSNAME } from "./constants.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Table/index.tsx
+var { block } = bem(CLASSNAME);
+/**
+* Table component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var Table = (props) => {
+	const { children, className, hasBefore, hasDividers, ref, theme, ...forwardedProps } = props;
+	return createVNode("table", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({
+		"has-before": hasBefore,
+		"has-dividers": hasDividers,
+		[`theme-${theme}`]: Boolean(theme)
+	})) }), [children]);
+};
+//#endregion
+export { 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 };

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

@@ -0,0 +1,66 @@
+import { Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { TABS_CLASSNAME } from "./constants.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Tabs/Tab.tsx
+/**
+* Defines the props of the component.
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = `${TABS_CLASSNAME}__link`;
+var { block } = bem(CLASSNAME);
+/**
+* Tab component.
+*
+* Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Tab = (props) => {
+	const { className, icon, iconProps = {}, isAnyDisabled, isDisabled, id, isActive, label, handleFocus, handleKeyPress, tabIndex = -1, tabIndexProp = "tabIndex", keyPressProp = "onKeyPress", changeToTab, tabPanelId, shouldActivateOnFocus, tabId, Icon, Text, ref, ...forwardedProps } = props;
+	const changeToCurrentTab = () => {
+		if (isAnyDisabled) return;
+		changeToTab?.();
+	};
+	const onFocus = (event) => {
+		handleFocus?.(event);
+		if (shouldActivateOnFocus) changeToCurrentTab();
+	};
+	const onKeyPress = (event) => {
+		handleKeyPress?.(event);
+		if (event.key !== "Enter" || isAnyDisabled) return;
+		changeToCurrentTab();
+	};
+	return createVNode("button", mergeProps({ "ref": ref }, forwardedProps, {
+		"type": "button",
+		"id": tabId,
+		"className": import_classnames.default(className, block({
+			"is-active": isActive,
+			"is-disabled": isAnyDisabled
+		})),
+		"onClick": changeToCurrentTab
+	}, { [keyPressProp]: onKeyPress }, {
+		"onFocus": onFocus,
+		"role": "tab"
+	}, { [tabIndexProp]: isActive ? 0 : tabIndex }, {
+		"aria-disabled": isAnyDisabled,
+		"aria-selected": isActive,
+		"aria-controls": tabPanelId
+	}), [icon && createVNode(Icon, mergeProps({
+		"icon": icon,
+		"size": Size.xs
+	}, iconProps), null), label && createVNode(Text, {
+		"as": "span",
+		"truncate": true
+	}, _isSlot(label) ? label : { default: () => [label] })]);
+};
+//#endregion
+export { CLASSNAME, Tab };

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

@@ -0,0 +1,27 @@
+import { Alignment } from "../../constants/enums/index.js";
+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/Tabs/TabList.d.ts
+declare enum TabListLayout {
+  clustered = "clustered",
+  fixed = "fixed"
+}
+/**
+ * Defines the props of the component.
+ */
+interface TabListProps extends HasClassName, HasTheme {
+  /** ARIA label (purpose of the set of tabs). */
+  ['aria-label']: string;
+  /** Tab list. */
+  children: JSXElement;
+  /** Layout of the tabs in the list. */
+  layout?: TabListLayout;
+  /** Position of the tabs in the list (requires 'clustered' layout). */
+  position?: Alignment;
+  /** ref to the wrapper element */
+  ref?: CommonRef;
+}
+//#endregion
+export { TabListLayout, TabListProps };

package/_internal/packages/lumx-core/src/js/components/Tabs/TabList.js

@@ -0,0 +1,42 @@
+import { Alignment } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { TABS_CLASSNAME } from "./constants.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Tabs/TabList.tsx
+var { block, element } = bem(TABS_CLASSNAME);
+var TabListLayout = /*#__PURE__*/ function(TabListLayout) {
+	TabListLayout["clustered"] = "clustered";
+	TabListLayout["fixed"] = "fixed";
+	return TabListLayout;
+}({});
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	layout: TabListLayout.fixed,
+	position: Alignment.left
+};
+/**
+* TabList component.
+*
+* Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var TabList = (props) => {
+	const { "aria-label": ariaLabel, children, className, layout = DEFAULT_PROPS.layout, position = DEFAULT_PROPS.position, theme, ref, ...forwardedProps } = props;
+	return createVNode("div", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({
+		[`layout-${layout}`]: Boolean(layout),
+		[`position-${position}`]: Boolean(position),
+		[`theme-${theme}`]: Boolean(theme)
+	})) }), [createVNode("div", {
+		"className": element("links"),
+		"role": "tablist",
+		"aria-label": ariaLabel
+	}, [children])]);
+};
+//#endregion
+export { DEFAULT_PROPS, TabList, TabListLayout };

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

@@ -0,0 +1,26 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Tabs/TabPanel.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TabPanelProps extends HasClassName {
+  /** Whether the tab is active or not. */
+  isActive?: boolean;
+  /** Whether the tab is lazy loaded or not */
+  isLazy?: boolean;
+  /** Children */
+  children?: JSXElement;
+  /** ID applied to the tab button element (for aria-labelledby on the panel). */
+  tabId?: string;
+  /** ID of the associated tab panel (for aria-controls). */
+  id?: string;
+  /** Name of the prop used to set tab index (framework-dependent). */
+  tabIndexProp?: string;
+  /** Forward ref to the underlying button element. */
+  ref?: CommonRef;
+}
+type TabPanelPropsToOverride = 'tabId' | 'isLazy' | 'tabIndexProp';
+//#endregion
+export { TabPanelProps, TabPanelPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Tabs/TabPanel.js

@@ -0,0 +1,28 @@
+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/Tabs/TabPanel.tsx
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = `lumx-tab-panel`;
+var { block } = bem(CLASSNAME);
+/**
+* TabPanel component.
+*
+* Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var TabPanel = (props) => {
+	const { children, className, isActive, id, tabId, isLazy, tabIndexProp = "tabIndex", ref, ...forwardedProps } = props;
+	return createVNode("div", mergeProps({ "ref": ref }, forwardedProps, {
+		"id": id,
+		"className": import_classnames.default(className, block({ "is-active": isActive })),
+		"role": "tabpanel"
+	}, { [tabIndexProp]: isActive ? 0 : -1 }, { "aria-labelledby": tabId }), [(!isLazy || isActive) && children]);
+};
+//#endregion
+export { CLASSNAME, TabPanel };

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

@@ -0,0 +1,7 @@
+//#region ../lumx-core/src/js/components/Tabs/constants.ts
+/**
+* Component default class name and class prefix.
+*/
+var TABS_CLASSNAME = `lumx-tabs`;
+//#endregion
+export { TABS_CLASSNAME };

package/_internal/packages/lumx-core/src/js/components/Tabs/state.js

@@ -0,0 +1,53 @@
+//#region ../lumx-core/src/js/components/Tabs/state.ts
+var INIT_STATE = {
+	isLazy: true,
+	shouldActivateOnFocus: false,
+	activeTabIndex: 0,
+	ids: {
+		tab: [],
+		tabPanel: []
+	}
+};
+var reducer = (state, action) => {
+	switch (action.type) {
+		case "update": return {
+			...state,
+			...action.payload
+		};
+		case "setActiveTabIndex":
+			if (state.activeTabIndex === action.payload) return state;
+			return {
+				...state,
+				activeTabIndex: action.payload
+			};
+		case "register": {
+			const { type, id } = action.payload;
+			return {
+				...state,
+				ids: {
+					...state.ids,
+					[type]: [...state.ids[type], id]
+				}
+			};
+		}
+		case "unregister": {
+			const { type, id } = action.payload;
+			const index = state.ids[type].indexOf(id);
+			if (index === -1) return state;
+			const tabIds = [...state.ids.tab];
+			tabIds.splice(index, 1);
+			const tabPanelIds = [...state.ids.tabPanel];
+			tabPanelIds.splice(index, 1);
+			return {
+				...state,
+				ids: {
+					tab: tabIds,
+					tabPanel: tabPanelIds
+				}
+			};
+		}
+		default: return state;
+	}
+};
+//#endregion
+export { INIT_STATE, reducer };

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

@@ -0,0 +1,55 @@
+import { ColorVariant, ColorWithVariants, Typography, WhiteSpace } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { TextElement } from "../../types/TextElement.js";
+import { CSSProperties } from "react";
+
+//#region ../lumx-core/src/js/components/Text/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TextProps extends HasClassName {
+  /**
+   * Color variant.
+   */
+  color?: ColorWithVariants;
+  /**
+   * Lightened or darkened variant of the selected color.
+   */
+  colorVariant?: ColorVariant;
+  /**
+   * Typography variant.
+   */
+  typography?: Typography;
+  /**
+   * Custom component to render the text.
+   */
+  as: TextElement;
+  /**
+   * Control whether the text should truncate or not.
+   * Setting as `true` will make the text truncate on a single line.
+   * Setting as `{ lines: number }` will make the text truncate on a multiple lines.
+   */
+  truncate?: boolean | {
+    lines: number;
+  };
+  /**
+   * Prevents text to wrap on multiple lines
+   * (automatically activated when single line text truncate is activated).
+   */
+  noWrap?: boolean;
+  /**
+   * WhiteSpace variant
+   * Ignored when `noWrap` is set to true
+   * Ignored when `truncate` is set to true or lines: 1
+   * */
+  whiteSpace?: WhiteSpace;
+  /**
+   * Children
+   */
+  children?: JSXElement;
+  /** list of styles to apply */
+  style?: CSSProperties;
+}
+//#endregion
+export { TextProps };

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

@@ -0,0 +1,37 @@
+import { font } from "../../utils/classNames/color/index.js";
+import { typography } from "../../utils/classNames/typography/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+var { block } = bem("lumx-text");
+/**
+* Text component common props
+*
+* @param  props Component props.
+* @return Common Props
+*/
+var getTextProps = (props) => {
+	const { className, color, colorVariant, noWrap, typography: typography$1, truncate, whiteSpace, style } = props;
+	const truncateLinesStyle = typeof truncate === "object" && truncate.lines > 1 && { "--lumx-text-truncate-lines": truncate.lines };
+	const isTruncatedMultiline = !!truncateLinesStyle;
+	const isTruncated = !!truncate;
+	/**
+	* Add custom white-space style if specified
+	* Disabled if noWrap is specified
+	* Disabled if truncated on one-line
+	* */
+	const whiteSpaceStyle = !noWrap && !(isTruncated && !isTruncatedMultiline) && whiteSpace && { "--lumx-text-white-space": whiteSpace };
+	return {
+		className: import_classnames.default(className, block({
+			"is-truncated": isTruncated && !isTruncatedMultiline,
+			"is-truncated-multiline": isTruncatedMultiline,
+			"no-wrap": noWrap
+		}), typography$1 && typography(typography$1), color && font(color, colorVariant)),
+		style: {
+			...truncateLinesStyle,
+			...whiteSpaceStyle,
+			...style
+		}
+	};
+};
+//#endregion
+export { getTextProps };

package/_internal/packages/lumx-core/src/js/components/TextField/RawInputText.d.ts

@@ -0,0 +1,21 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HTMLInputTypeAttribute } from "react";
+
+//#region ../lumx-core/src/js/components/TextField/RawInputText.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface RawInputTextProps extends HasTheme, HasClassName {
+  value?: string;
+  type?: HTMLInputTypeAttribute;
+  name?: string | undefined;
+  ref?: CommonRef;
+  handleChange?: (value: string, name?: string, event?: any) => void;
+  handleInput?: (value: string, name?: string, event?: any) => void;
+  handleFocus?: (event?: any) => void;
+  handleBlur?: (event?: any) => void;
+}
+//#endregion
+export { RawInputTextProps };