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

package/_internal/components/table/TableCell.js

@@ -0,0 +1,23 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, TableCell as TableCell$1 } from "../../packages/lumx-core/src/js/components/Table/TableCell.js";
+//#region src/components/table/TableCell.tsx
+/**
+* TableCell component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var TableCell = forwardRef((props, ref) => {
+	const { onHeaderClick, ...otherProps } = props;
+	return TableCell$1({
+		ref,
+		...otherProps,
+		handleClick: onHeaderClick
+	});
+});
+TableCell.displayName = COMPONENT_NAME;
+TableCell.className = CLASSNAME;
+TableCell.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { TableCell };

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

@@ -0,0 +1,20 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { TableHeaderProps as TableHeaderProps$1 } from "../../packages/lumx-core/src/js/components/Table/TableHeader.js";
+
+//#region src/components/table/TableHeader.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TableHeaderProps extends index_d_exports.GenericProps, ReactToJSX<TableHeaderProps$1, 'ref'> {}
+/**
+ * TableHeader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const TableHeader: Comp<TableHeaderProps, HTMLTableSectionElement>;
+//#endregion
+export { TableHeader, TableHeaderProps };

package/_internal/components/table/TableHeader.js

@@ -0,0 +1,23 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, TableHeader as TableHeader$1 } from "../../packages/lumx-core/src/js/components/Table/TableHeader.js";
+//#region src/components/table/TableHeader.tsx
+/**
+* TableHeader component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var TableHeader = forwardRef((props, ref) => {
+	const { children, ...otherProps } = props;
+	return TableHeader$1({
+		ref,
+		children,
+		...otherProps
+	});
+});
+TableHeader.displayName = COMPONENT_NAME;
+TableHeader.className = CLASSNAME;
+TableHeader.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { TableHeader };

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

@@ -0,0 +1,23 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { TableRowProps as TableRowProps$1 } from "../../packages/lumx-core/src/js/components/Table/TableRow.js";
+
+//#region src/components/table/TableRow.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TableRowProps extends index_d_exports.GenericProps, ReactToJSX<TableRowProps$1, 'tabIndex' | 'aria-disabled'> {
+  /** Whether the component is disabled or not. */
+  isDisabled?: boolean;
+}
+/**
+ * TableRow component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const TableRow: Comp<TableRowProps, HTMLTableRowElement>;
+//#endregion
+export { TableRow, TableRowProps };

package/_internal/components/table/TableRow.js

@@ -0,0 +1,28 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, TableRow as TableRow$1 } from "../../packages/lumx-core/src/js/components/Table/TableRow.js";
+//#region src/components/table/TableRow.tsx
+/**
+* TableRow component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var TableRow = forwardRef((props, ref) => {
+	const { isAnyDisabled, otherProps } = useDisableStateProps(props);
+	const { children, isClickable, "aria-disabled": _ariaDisabled, ...forwardedProps } = otherProps;
+	return TableRow$1({
+		ref,
+		children,
+		isClickable,
+		tabIndex: isClickable && !isAnyDisabled ? 0 : -1,
+		"aria-disabled": isAnyDisabled,
+		...forwardedProps
+	});
+});
+TableRow.displayName = COMPONENT_NAME;
+TableRow.className = CLASSNAME;
+TableRow.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { TableRow };

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 } 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,39 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { IconProps } from "../icon/Icon.js";
+import { TabProps as TabProps$1, TabPropsToOverride } from "../../packages/lumx-core/src/js/components/Tabs/Tab.js";
+import { ReactNode } from "react";
+
+//#region src/components/tabs/Tab.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TabProps extends index_d_exports.GenericProps, ReactToJSX<TabProps$1, TabPropsToOverride> {
+  /** 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 | ReactNode;
+}
+/**
+ * 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.
+ */
+declare const Tab: Comp<TabProps, HTMLButtonElement>;
+//#endregion
+export { Tab, TabProps };

package/_internal/components/tabs/Tab.js

@@ -0,0 +1,39 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
+import { useTabProviderContext } from "./state.js";
+import { CLASSNAME, DEFAULT_PROPS, Tab as Tab$1 } from "../../packages/lumx-core/src/js/components/Tabs/Tab.js";
+//#region src/components/tabs/Tab.tsx
+/**
+* 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 = forwardRef((props, ref) => {
+	const { isAnyDisabled, otherProps } = useDisableStateProps(props);
+	const { isActive: propIsActive, id, onFocus, onKeyPress, ...forwardedProps } = otherProps;
+	const { isLazy: _isLazy, ...state } = useTabProviderContext("tab", id) ?? {};
+	const isActive = propIsActive || state?.isActive;
+	return Tab$1({
+		id,
+		...state,
+		Icon,
+		Text,
+		ref,
+		isActive,
+		isAnyDisabled,
+		handleFocus: onFocus,
+		handleKeyPress: onKeyPress,
+		...forwardedProps
+	});
+});
+Tab.displayName = "Tab";
+Tab.className = CLASSNAME;
+Tab.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Tab };

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

@@ -0,0 +1,22 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { TabListLayout, TabListProps as TabListProps$1 } from "../../packages/lumx-core/src/js/components/Tabs/TabList.js";
+
+//#region src/components/tabs/TabList.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TabListProps extends index_d_exports.GenericProps, ReactToJSX<TabListProps$1> {}
+/**
+ * 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.
+ */
+declare const TabList: Comp<TabListProps, HTMLDivElement>;
+//#endregion
+export { TabList, TabListProps };

package/_internal/components/tabs/TabList.js

@@ -0,0 +1,37 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { mergeRefs } from "../../utils/react/mergeRefs.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { useRovingTabIndexContainer } from "../../hooks/useRovingTabIndexContainer.js";
+import { TABS_CLASSNAME } from "../../packages/lumx-core/src/js/components/Tabs/constants.js";
+import { COMPONENT_NAME, DEFAULT_PROPS, TabList as TabList$1 } from "../../packages/lumx-core/src/js/components/Tabs/TabList.js";
+import { src_exports } from "../../../index.js";
+import React from "react";
+//#region src/components/tabs/TabList.tsx
+/**
+* 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 = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { theme = defaultTheme, ...forwardedProps } = props;
+	const tabListRef = React.useRef(null);
+	useRovingTabIndexContainer({
+		containerRef: tabListRef,
+		itemSelector: "[role=\"tab\"]"
+	});
+	return TabList$1({
+		theme,
+		ref: mergeRefs(ref, tabListRef),
+		...forwardedProps
+	});
+});
+TabList.displayName = COMPONENT_NAME;
+TabList.className = TABS_CLASSNAME;
+TabList.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { TabList };

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

@@ -0,0 +1,25 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { TabPanelProps as TabPanelProps$1, TabPanelPropsToOverride } from "../../packages/lumx-core/src/js/components/Tabs/TabPanel.js";
+
+//#region src/components/tabs/TabPanel.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TabPanelProps extends index_d_exports.GenericProps, ReactToJSX<TabPanelProps$1, TabPanelPropsToOverride> {
+  /** Native id property */
+  id?: string;
+}
+/**
+ * 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.
+ */
+declare const TabPanel: Comp<TabPanelProps, HTMLDivElement>;
+//#endregion
+export { TabPanel, TabPanelProps };

package/_internal/components/tabs/TabPanel.js

@@ -0,0 +1,30 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTabProviderContext } from "./state.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, TabPanel as TabPanel$1 } from "../../packages/lumx-core/src/js/components/Tabs/TabPanel.js";
+//#region src/components/tabs/TabPanel.tsx
+/**
+* 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 = forwardRef((props, ref) => {
+	const { id, isActive: propIsActive, ...forwardedProps } = props;
+	const state = useTabProviderContext("tabPanel", id);
+	return TabPanel$1({
+		ref,
+		isActive: propIsActive || state?.isActive,
+		id: state?.tabPanelId,
+		isLazy: state?.isLazy,
+		tabId: state?.tabId,
+		...forwardedProps
+	});
+});
+TabPanel.displayName = COMPONENT_NAME;
+TabPanel.className = CLASSNAME;
+TabPanel.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { TabPanel };

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

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+//#region src/components/tabs/TabProvider.d.ts
+interface TabProviderProps {
+  /** Active tab index. */
+  activeTabIndex?: number;
+  /** Tab provider children. */
+  children: ReactNode;
+  /** Tab panel children should not render if the tab panel is hidden. */
+  isLazy?: boolean;
+  /** Activate tabs on focus. */
+  shouldActivateOnFocus?: boolean;
+  /** Tab change callback. */
+  onChange?(index: number): void;
+}
+/**
+ * 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 React elements and then split the TabList and TabPanel
+ * components in the react tree.
+ *
+ * @param  props React component props.
+ * @return React element.
+ */
+declare const TabProvider: React.FC<TabProviderProps>;
+//#endregion
+export { TabProvider, TabProviderProps };

package/_internal/components/tabs/TabProvider.js

@@ -0,0 +1,51 @@
+import { INIT_STATE, reducer } from "../../packages/lumx-core/src/js/components/Tabs/state.js";
+import { TabProviderContext } from "./state.js";
+import { useEffect, useReducer } from "react";
+import { jsx } from "react/jsx-runtime";
+import ReactDOM from "react-dom";
+//#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 React elements and then split the TabList and TabPanel
+* components in the react tree.
+*
+* @param  props React component props.
+* @return React element.
+*/
+var TabProvider = (props) => {
+	const { children, onChange, ...propState } = props;
+	const [state, dispatch] = useReducer(reducer, {
+		...INIT_STATE,
+		...DEFAULT_PROPS,
+		...propState
+	});
+	useEffect(() => {
+		dispatch({
+			type: "update",
+			payload: {
+				...DEFAULT_PROPS,
+				...propState
+			}
+		});
+	}, [dispatch, ...Object.values(propState)]);
+	useEffect(() => {
+		if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) return;
+		queueMicrotask(() => {
+			ReactDOM.flushSync(() => {
+				onChange(state.activeTabIndex);
+			});
+		});
+	}, [onChange, state.activeTabIndex]);
+	return /* @__PURE__ */ jsx(TabProviderContext.Provider, {
+		value: [state, dispatch],
+		children
+	});
+};
+TabProvider.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { TabProvider };

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

@@ -0,0 +1,5 @@
+import { TabProvider, TabProviderProps } from "./TabProvider.js";
+import { TabListLayout } from "../../packages/lumx-core/src/js/components/Tabs/TabList.js";
+import { TabList, TabListProps } from "./TabList.js";
+import { Tab, TabProps } from "./Tab.js";
+import { TabPanel, TabPanelProps } from "./TabPanel.js";

package/_internal/components/tabs/state.js

@@ -0,0 +1,55 @@
+import { useId } from "../../hooks/useId.js";
+import "../../packages/lumx-core/src/js/components/Tabs/state.js";
+import { createContext, useCallback, useContext, useEffect, useMemo } from "react";
+//#region src/components/tabs/state.ts
+var TabProviderContext = createContext(null);
+var useTabProviderContext = (type, originalId) => {
+	const context = useContext(TabProviderContext);
+	if (!context) return;
+	const [state, dispatch] = context;
+	const generatedId = useId();
+	const id = originalId || generatedId;
+	useEffect(() => {
+		dispatch({
+			type: "register",
+			payload: {
+				type,
+				id
+			}
+		});
+		return () => {
+			dispatch({
+				type: "unregister",
+				payload: {
+					type,
+					id
+				}
+			});
+		};
+	}, []);
+	const index = useMemo(() => state.ids[type].indexOf(id), [
+		state.ids,
+		type,
+		id
+	]);
+	const tabId = useMemo(() => state.ids.tab[index] || "", [state, index]);
+	const tabPanelId = useMemo(() => state.ids.tabPanel[index] || "", [state, index]);
+	const isActive = useMemo(() => state.activeTabIndex === index, [state, index]);
+	const changeToTab = useCallback(() => dispatch({
+		type: "setActiveTabIndex",
+		payload: index
+	}), [dispatch, index]);
+	return {
+		isLazy: state.isLazy,
+		shouldActivateOnFocus: state.shouldActivateOnFocus,
+		tabId,
+		tabPanelId,
+		isActive,
+		changeToTab
+	};
+};
+var useTabProviderContextState = () => {
+	return useContext(TabProviderContext)?.[0];
+};
+//#endregion
+export { TabProviderContext, useTabProviderContext, useTabProviderContextState };

package/_internal/components/text/Text.d.ts

@@ -0,0 +1,17 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { TextProps as TextProps$1 } from "../../packages/lumx-core/src/js/components/Text/index.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/text/Text.d.ts
+interface TextProps extends ReactToJSX<TextProps$1>, GenericProps {}
+/**
+ * Text component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Text: Comp<TextProps, HTMLElement>;
+//#endregion
+export { Text, TextProps };

package/_internal/components/text/Text.js

@@ -0,0 +1,33 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { useOverflowTooltipLabel } from "../../hooks/useOverflowTooltipLabel.js";
+import { wrapChildrenIconWithSpaces } from "../../utils/react/wrapChildrenIconWithSpaces.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, getTextProps } from "../../packages/lumx-core/src/js/components/Text/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text/Text.tsx
+/**
+* Text component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Text = forwardRef((props, ref) => {
+	const { as: Component, children, color, colorVariant, noWrap, typography, truncate, whiteSpace, ...forwardedProps } = props;
+	const { tooltipLabel, labelRef } = useOverflowTooltipLabel(children);
+	const { className, style } = React.useMemo(() => getTextProps(props), [props]);
+	return /* @__PURE__ */ jsx(Component, {
+		ref: useMergeRefs(ref, labelRef),
+		title: tooltipLabel,
+		...forwardedProps,
+		className,
+		style,
+		children: wrapChildrenIconWithSpaces(children)
+	});
+});
+Text.displayName = COMPONENT_NAME;
+Text.className = CLASSNAME;
+Text.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Text };

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

@@ -0,0 +1 @@
+import { Text, TextProps } from "./Text.js";

package/_internal/components/text-field/RawInputText.d.ts

@@ -0,0 +1,20 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { RawInputTextProps as RawInputTextProps$1 } from "../../packages/lumx-core/src/js/components/TextField/RawInputText.js";
+import { ComponentProps, SyntheticEvent } from "react";
+
+//#region src/components/text-field/RawInputText.d.ts
+type NativeInputProps = Omit<ComponentProps<'input'>, 'value' | 'onChange'>;
+/**
+ * Defines the props of the component.
+ */
+interface RawInputTextProps extends NativeInputProps, ReactToJSX<RawInputTextProps$1> {
+  onChange?: (value: string, name?: string, event?: SyntheticEvent) => void;
+}
+/**
+ * Raw input text component
+ * (input element without any decoration)
+ */
+declare const RawInputText: Comp<RawInputTextProps, HTMLInputElement>;
+//#endregion
+export { RawInputText, RawInputTextProps };

package/_internal/components/text-field/RawInputText.js

@@ -0,0 +1,23 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { RawInputText as RawInputText$1 } from "../../packages/lumx-core/src/js/components/TextField/RawInputText.js";
+import { src_exports } from "../../../index.js";
+//#region src/components/text-field/RawInputText.tsx
+/**
+* Raw input text component
+* (input element without any decoration)
+*/
+var RawInputText = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { theme = defaultTheme, onChange, onFocus, onBlur, ...restOfProps } = props;
+	return RawInputText$1({
+		...restOfProps,
+		ref,
+		theme,
+		handleChange: onChange,
+		handleFocus: onFocus,
+		handleBlur: onBlur
+	});
+});
+//#endregion
+export { RawInputText };

package/_internal/components/text-field/RawInputTextarea.d.ts

@@ -0,0 +1,21 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { RawInputTextareaProps as RawInputTextareaProps$1 } from "../../packages/lumx-core/src/js/components/TextField/RawInputTextarea.js";
+import { ComponentProps, SyntheticEvent } from "react";
+
+//#region src/components/text-field/RawInputTextarea.d.ts
+type NativeTextareaProps = Omit<ComponentProps<'textarea'>, 'value' | 'onChange'>;
+/**
+ * Defines the props of the component.
+ */
+interface RawInputTextareaProps extends NativeTextareaProps, ReactToJSX<RawInputTextareaProps$1, 'rows'> {
+  minimumRows?: number;
+  onChange?: (value: string, name?: string, event?: SyntheticEvent) => void;
+}
+/**
+ * Raw input text area component
+ * (textarea element without any decoration)
+ */
+declare const RawInputTextarea: Comp<Omit<RawInputTextareaProps, "type">, HTMLTextAreaElement>;
+//#endregion
+export { RawInputTextarea, RawInputTextareaProps };

package/_internal/components/text-field/RawInputTextarea.js

@@ -0,0 +1,34 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { DEFAULT_PROPS as DEFAULT_PROPS$1, RawInputTextarea as RawInputTextarea$1 } from "../../packages/lumx-core/src/js/components/TextField/RawInputTextarea.js";
+import { useFitRowsToContent } from "./useFitRowsToContent.js";
+import { src_exports } from "../../../index.js";
+import { useRef } from "react";
+//#region src/components/text-field/RawInputTextarea.tsx
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { minimumRows: DEFAULT_PROPS$1.rows };
+/**
+* Raw input text area component
+* (textarea element without any decoration)
+*/
+var RawInputTextarea = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { theme = defaultTheme, minimumRows = DEFAULT_PROPS.minimumRows, value, onChange, onFocus, onBlur, ...restOfProps } = props;
+	const textareaRef = useRef(null);
+	const rows = useFitRowsToContent(minimumRows, textareaRef, value);
+	return RawInputTextarea$1({
+		...restOfProps,
+		ref: useMergeRefs(ref, textareaRef),
+		theme,
+		value,
+		rows,
+		handleChange: onChange,
+		handleFocus: onFocus,
+		handleBlur: onBlur
+	});
+});
+//#endregion
+export { RawInputTextarea };