@mittwald/flow-react-components 0.2.0-alpha.782 → 0.2.0-alpha.784

package/dist/js/packages/components/src/components/TextArea/TextArea.mjs

@@ -1,108 +1,140 @@
 "use client"
 /* */
-import PropsContextProvider from "../../lib/propsContext/components/PropsContextProvider.mjs";
-import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
-import "../../lib/propsContext/index.mjs";
-import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
-import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
-import FieldDescription from "../FieldDescription/FieldDescription.mjs";
-import "../FieldDescription/index.mjs";
-import TextArea_module_default from "./TextArea.module.mjs";
-import __locale_default from "../../../../../_virtual/_18.locale.mjs";
-import clsx from "clsx";
-import { useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useObjectRef } from "@react-aria/utils";
-import * as Aria from "react-aria-components";
-import { useLocalizedStringFormatter } from "react-aria";
-//#region src/components/TextArea/TextArea.tsx
-/** @flr-generate all */
-var TextArea = flowComponent("TextArea", (props) => {
-	const { children, placeholder, rows = 5, autoResizeMaxRows = rows, ref, allowVerticalResize, allowHorizontalResize, showCharacterCount, className, onChange, ...rest } = useControlledHostValueProps(props);
-	const [charactersCount, setCharactersCount] = useState(props.defaultValue?.length ?? props.value?.length ?? 0);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props);
-	let { allowResize } = props;
-	if (allowVerticalResize) allowResize = "vertical";
-	else if (allowHorizontalResize) allowResize = "horizontal";
-	const rootClassName = clsx(fieldProps.className, className);
-	const inputClassName = clsx(TextArea_module_default.input, typeof allowResize === "boolean" && allowResize ? TextArea_module_default.resize : null, allowResize === "horizontal" ? TextArea_module_default.horizontalResize : allowResize === "vertical" ? TextArea_module_default.verticalResize : null);
-	const handleChange = (v) => {
-		if (showCharacterCount) setCharactersCount(v.length);
-		if (onChange) onChange(v);
-	};
-	const charactersCountDescription = useLocalizedStringFormatter(__locale_default).format("textArea.characters", {
-		count: charactersCount,
-		maxCount: props.maxLength ?? 0
-	});
-	const localRef = useObjectRef(ref);
-	const getHeight = (rows) => {
-		return `calc(var(--line-height--m) * ${rows} + (var(--form-control--padding-y) * 2))`;
-	};
-	const [resized, setResized] = useState(false);
-	const autoResizable = rows !== autoResizeMaxRows;
-	const verticallyResizable = allowResize && (!autoResizable || autoResizable && resized);
-	useEffect(() => {
-		const textarea = localRef.current;
-		if (!textarea) return;
-		const startHeight = textarea.offsetHeight;
-		let tracking = false;
-		const handleMouseDown = () => {
-			tracking = true;
-		};
-		const handleMouseMove = () => {
-			if (!tracking || resized) return;
-			if (textarea.offsetHeight !== startHeight) {
-				setResized(true);
-				tracking = false;
-			}
-		};
-		const handleMouseUp = () => {
-			tracking = false;
-		};
-		window.addEventListener("mousedown", handleMouseDown);
-		window.addEventListener("mousemove", handleMouseMove);
-		window.addEventListener("mouseup", handleMouseUp);
-		return () => {
-			window.removeEventListener("mousedown", handleMouseDown);
-			window.removeEventListener("mousemove", handleMouseMove);
-			window.removeEventListener("mouseup", handleMouseUp);
-		};
-	}, [resized]);
-	const updateHeight = () => {
-		if (localRef.current && autoResizable && !verticallyResizable) {
-			localRef.current.style.height = "0px";
-			const scrollHeight = localRef.current.scrollHeight;
-			localRef.current.style.height = scrollHeight + 2 + "px";
-		}
-	};
-	return /* @__PURE__ */ jsx(Aria.TextField, {
-		...rest,
-		...fieldProps,
-		className: rootClassName,
-		onChange: handleChange,
-		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
-			props: fieldPropsContext,
-			children: [
-				/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }),
-				/* @__PURE__ */ jsx(Aria.TextArea, {
-					rows,
-					"aria-hidden": props["aria-hidden"],
-					placeholder,
-					className: inputClassName,
-					ref: localRef,
-					onChange: updateHeight,
-					style: {
-						minHeight: getHeight(rows),
-						maxHeight: verticallyResizable ? void 0 : getHeight(autoResizeMaxRows)
-					}
-				}),
-				showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription }),
-				/* @__PURE__ */ jsx(FieldErrorView, {})
-			]
-		})
-	});
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as Aria from 'react-aria-components';
+import styles from './TextArea.module.scss.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { useObjectRef } from '@react-aria/utils';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import clsx from 'clsx';
+import { useState, useEffect } from 'react';
+import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import locales from '../../../../../_virtual/_.locale.json@6922640321d6c379322b09cbcf0dcdb3.mjs';
+import { FieldDescription } from '../FieldDescription/FieldDescription.mjs';
+
+const TextArea = flowComponent("TextArea", (props) => {
+  const {
+    children,
+    placeholder,
+    rows = 5,
+    autoResizeMaxRows = rows,
+    ref,
+    allowVerticalResize,
+    allowHorizontalResize,
+    showCharacterCount,
+    className,
+    onChange,
+    ...rest
+  } = useControlledHostValueProps(props);
+  const [charactersCount, setCharactersCount] = useState(
+    props.defaultValue?.length ?? props.value?.length ?? 0
+  );
+  const {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldPropsContext,
+    fieldProps
+  } = useFieldComponent(props);
+  let { allowResize } = props;
+  if (allowVerticalResize) {
+    allowResize = "vertical";
+  } else if (allowHorizontalResize) {
+    allowResize = "horizontal";
+  }
+  const rootClassName = clsx(fieldProps.className, className);
+  const inputClassName = clsx(
+    styles.input,
+    typeof allowResize === "boolean" && allowResize ? styles.resize : null,
+    allowResize === "horizontal" ? styles.horizontalResize : allowResize === "vertical" ? styles.verticalResize : null
+  );
+  const handleChange = (v) => {
+    if (showCharacterCount) {
+      setCharactersCount(v.length);
+    }
+    if (onChange) {
+      onChange(v);
+    }
+  };
+  const translation = useLocalizedStringFormatter(locales);
+  const charactersCountDescription = translation.format("textArea.characters", {
+    count: charactersCount,
+    maxCount: props.maxLength ?? 0
+  });
+  const localRef = useObjectRef(ref);
+  const getHeight = (rows2) => {
+    return `calc(var(--line-height--m) * ${rows2} + (var(--form-control--padding-y) * 2))`;
+  };
+  const [resized, setResized] = useState(false);
+  const autoResizable = rows !== autoResizeMaxRows;
+  const verticallyResizable = allowResize && (!autoResizable || autoResizable && resized);
+  useEffect(() => {
+    const textarea = localRef.current;
+    if (!textarea) return;
+    const startHeight = textarea.offsetHeight;
+    let tracking = false;
+    const handleMouseDown = () => {
+      tracking = true;
+    };
+    const handleMouseMove = () => {
+      if (!tracking || resized) return;
+      const currentHeight = textarea.offsetHeight;
+      if (currentHeight !== startHeight) {
+        setResized(true);
+        tracking = false;
+      }
+    };
+    const handleMouseUp = () => {
+      tracking = false;
+    };
+    window.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousedown", handleMouseDown);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resized]);
+  const updateHeight = () => {
+    if (localRef.current && autoResizable && !verticallyResizable) {
+      localRef.current.style.height = "0px";
+      const scrollHeight = localRef.current.scrollHeight;
+      localRef.current.style.height = scrollHeight + 2 + "px";
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Aria.TextField,
+    {
+      ...rest,
+      ...fieldProps,
+      className: rootClassName,
+      onChange: handleChange,
+      children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: fieldPropsContext, children: [
+        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }),
+        /* @__PURE__ */ jsx(
+          Aria.TextArea,
+          {
+            rows,
+            "aria-hidden": props["aria-hidden"],
+            placeholder,
+            className: inputClassName,
+            ref: localRef,
+            onChange: updateHeight,
+            style: {
+              minHeight: getHeight(rows),
+              maxHeight: verticallyResizable ? void 0 : getHeight(autoResizeMaxRows)
+            }
+          }
+        ),
+        showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription }),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ] })
+    }
+  );
 });
-//#endregion
-export { TextArea as default };
 
-//# sourceMappingURL=TextArea.mjs.map
+export { TextArea };
+//# sourceMappingURL=TextArea.mjs.map

package/dist/js/packages/components/src/components/TextArea/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { type PropsWithChildren, useEffect, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\n\nexport interface TextAreaProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n    FlowComponentProps<HTMLTextAreaElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n  /**\n   * Whether the text area should grow if its content gets longer than its\n   * initial height.\n   */\n  autoResizeMaxRows?: number;\n  /** Allows the user to manually resize the textArea horizontally. */\n  allowResize?: boolean | \"horizontal\" | \"vertical\";\n  /** @deprecated Use `allowResize` instead. */\n  allowHorizontalResize?: boolean;\n  /** @deprecated Use `allowResize` instead. */\n  allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n  const {\n    children,\n    placeholder,\n    rows = 5,\n    autoResizeMaxRows = rows,\n    ref,\n    allowVerticalResize,\n    allowHorizontalResize,\n    showCharacterCount,\n    className,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  let { allowResize } = props;\n  if (allowVerticalResize) {\n    allowResize = \"vertical\";\n  } else if (allowHorizontalResize) {\n    allowResize = \"horizontal\";\n  }\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const inputClassName = clsx(\n    styles.input,\n    typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n    allowResize === \"horizontal\"\n      ? styles.horizontalResize\n      : allowResize === \"vertical\"\n        ? styles.verticalResize\n        : null,\n  );\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales);\n\n  const charactersCountDescription = translation.format(\"textArea.characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  const localRef = useObjectRef(ref);\n\n  const getHeight = (rows: number) => {\n    return `calc(var(--line-height--m) * ${rows} + (var(--form-control--padding-y) * 2))`;\n  };\n\n  const [resized, setResized] = useState(false);\n\n  const autoResizable = rows !== autoResizeMaxRows;\n\n  const verticallyResizable =\n    allowResize && (!autoResizable || (autoResizable && resized));\n\n  useEffect(() => {\n    const textarea = localRef.current;\n    if (!textarea) return;\n\n    const startHeight = textarea.offsetHeight;\n    let tracking = false;\n\n    const handleMouseDown = () => {\n      tracking = true;\n    };\n\n    const handleMouseMove = () => {\n      if (!tracking || resized) return;\n\n      const currentHeight = textarea.offsetHeight;\n\n      if (currentHeight !== startHeight) {\n        setResized(true);\n        tracking = false;\n      }\n    };\n\n    const handleMouseUp = () => {\n      tracking = false;\n    };\n\n    window.addEventListener(\"mousedown\", handleMouseDown);\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    window.addEventListener(\"mouseup\", handleMouseUp);\n\n    return () => {\n      window.removeEventListener(\"mousedown\", handleMouseDown);\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      window.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, [resized]);\n\n  const updateHeight = () => {\n    if (localRef.current && autoResizable && !verticallyResizable) {\n      // https://stackoverflow.com/a/60795884\n      localRef.current.style.height = \"0px\";\n      const scrollHeight = localRef.current.scrollHeight;\n      // + 2 to add border height\n      localRef.current.style.height = scrollHeight + 2 + \"px\";\n    }\n  };\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...fieldProps}\n      className={rootClassName}\n      onChange={handleChange}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <Aria.TextArea\n          rows={rows}\n          aria-hidden={props[\"aria-hidden\"]}\n          placeholder={placeholder}\n          className={inputClassName}\n          ref={localRef}\n          onChange={updateHeight}\n          style={{\n            minHeight: getHeight(rows),\n            maxHeight: verticallyResizable\n              ? undefined\n              : getHeight(autoResizeMaxRows),\n          }}\n        />\n        {showCharacterCount && (\n          <FieldDescription>{charactersCountDescription}</FieldDescription>\n        )}\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,aACA,OAAO,GACP,oBAAoB,MACpB,KACA,qBACA,uBACA,oBACA,WACA,UACA,GAAG,SACD,4BAA4B,MAAM;CAEtC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,EACtD;CAED,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,MAAM;CAE5B,IAAI,EAAE,gBAAgB;AACtB,KAAI,oBACF,eAAc;UACL,sBACT,eAAc;CAGhB,MAAM,gBAAgB,KAAK,WAAW,WAAW,UAAU;CAE3D,MAAM,iBAAiB,KACrB,wBAAO,OACP,OAAO,gBAAgB,aAAa,cAAc,wBAAO,SAAS,MAClE,gBAAgB,eACZ,wBAAO,mBACP,gBAAgB,aACd,wBAAO,iBACP,KACP;CAED,MAAM,gBAAgB,MAAc;AAClC,MAAI,mBACF,oBAAmB,EAAE,OAAO;AAE9B,MAAI,SACF,UAAS,EAAE;;CAMf,MAAM,6BAFc,4BAA4B,iBAAQ,CAET,OAAO,uBAAuB;EAC3E,OAAO;EACP,UAAU,MAAM,aAAa;EAC9B,CAAC;CAEF,MAAM,WAAW,aAAa,IAAI;CAElC,MAAM,aAAa,SAAiB;AAClC,SAAO,gCAAgC,KAAK;;CAG9C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,gBAAgB,SAAS;CAE/B,MAAM,sBACJ,gBAAgB,CAAC,iBAAkB,iBAAiB;AAEtD,iBAAgB;EACd,MAAM,WAAW,SAAS;AAC1B,MAAI,CAAC,SAAU;EAEf,MAAM,cAAc,SAAS;EAC7B,IAAI,WAAW;EAEf,MAAM,wBAAwB;AAC5B,cAAW;;EAGb,MAAM,wBAAwB;AAC5B,OAAI,CAAC,YAAY,QAAS;AAI1B,OAFsB,SAAS,iBAET,aAAa;AACjC,eAAW,KAAK;AAChB,eAAW;;;EAIf,MAAM,sBAAsB;AAC1B,cAAW;;AAGb,SAAO,iBAAiB,aAAa,gBAAgB;AACrD,SAAO,iBAAiB,aAAa,gBAAgB;AACrD,SAAO,iBAAiB,WAAW,cAAc;AAEjD,eAAa;AACX,UAAO,oBAAoB,aAAa,gBAAgB;AACxD,UAAO,oBAAoB,aAAa,gBAAgB;AACxD,UAAO,oBAAoB,WAAW,cAAc;;IAErD,CAAC,QAAQ,CAAC;CAEb,MAAM,qBAAqB;AACzB,MAAI,SAAS,WAAW,iBAAiB,CAAC,qBAAqB;AAE7D,YAAS,QAAQ,MAAM,SAAS;GAChC,MAAM,eAAe,SAAS,QAAQ;AAEtC,YAAS,QAAQ,MAAM,SAAS,eAAe,IAAI;;;AAIvD,QACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;YAEV,qBAAC,sBAAD;GAAsB,OAAO;aAA7B;IACE,oBAAC,0BAAD,EAA2B,UAAoC,CAAA;IAC/D,oBAAC,KAAK,UAAN;KACQ;KACN,eAAa,MAAM;KACN;KACb,WAAW;KACX,KAAK;KACL,UAAU;KACV,OAAO;MACL,WAAW,UAAU,KAAK;MAC1B,WAAW,sBACP,KAAA,IACA,UAAU,kBAAkB;MACjC;KACD,CAAA;IACD,sBACC,oBAAC,kBAAD,EAAA,UAAmB,4BAA8C,CAAA;IAEnE,oBAAC,gBAAD,EAAkB,CAAA;IACG;;EACR,CAAA;EAEnB"}
+{"version":3,"file":"TextArea.mjs","sources":["../../../../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport styles from \"./TextArea.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { type PropsWithChildren, useEffect, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\n\nexport interface TextAreaProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.TextAreaProps, \"placeholder\" | \"rows\" | \"aria-hidden\">,\n    FlowComponentProps<HTMLTextAreaElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n  /**\n   * Whether the text area should grow if its content gets longer than its\n   * initial height.\n   */\n  autoResizeMaxRows?: number;\n  /** Allows the user to manually resize the textArea horizontally. */\n  allowResize?: boolean | \"horizontal\" | \"vertical\";\n  /** @deprecated Use `allowResize` instead. */\n  allowHorizontalResize?: boolean;\n  /** @deprecated Use `allowResize` instead. */\n  allowVerticalResize?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextArea = flowComponent(\"TextArea\", (props) => {\n  const {\n    children,\n    placeholder,\n    rows = 5,\n    autoResizeMaxRows = rows,\n    ref,\n    allowVerticalResize,\n    allowHorizontalResize,\n    showCharacterCount,\n    className,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  let { allowResize } = props;\n  if (allowVerticalResize) {\n    allowResize = \"vertical\";\n  } else if (allowHorizontalResize) {\n    allowResize = \"horizontal\";\n  }\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const inputClassName = clsx(\n    styles.input,\n    typeof allowResize === \"boolean\" && allowResize ? styles.resize : null,\n    allowResize === \"horizontal\"\n      ? styles.horizontalResize\n      : allowResize === \"vertical\"\n        ? styles.verticalResize\n        : null,\n  );\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales);\n\n  const charactersCountDescription = translation.format(\"textArea.characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  const localRef = useObjectRef(ref);\n\n  const getHeight = (rows: number) => {\n    return `calc(var(--line-height--m) * ${rows} + (var(--form-control--padding-y) * 2))`;\n  };\n\n  const [resized, setResized] = useState(false);\n\n  const autoResizable = rows !== autoResizeMaxRows;\n\n  const verticallyResizable =\n    allowResize && (!autoResizable || (autoResizable && resized));\n\n  useEffect(() => {\n    const textarea = localRef.current;\n    if (!textarea) return;\n\n    const startHeight = textarea.offsetHeight;\n    let tracking = false;\n\n    const handleMouseDown = () => {\n      tracking = true;\n    };\n\n    const handleMouseMove = () => {\n      if (!tracking || resized) return;\n\n      const currentHeight = textarea.offsetHeight;\n\n      if (currentHeight !== startHeight) {\n        setResized(true);\n        tracking = false;\n      }\n    };\n\n    const handleMouseUp = () => {\n      tracking = false;\n    };\n\n    window.addEventListener(\"mousedown\", handleMouseDown);\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    window.addEventListener(\"mouseup\", handleMouseUp);\n\n    return () => {\n      window.removeEventListener(\"mousedown\", handleMouseDown);\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      window.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, [resized]);\n\n  const updateHeight = () => {\n    if (localRef.current && autoResizable && !verticallyResizable) {\n      // https://stackoverflow.com/a/60795884\n      localRef.current.style.height = \"0px\";\n      const scrollHeight = localRef.current.scrollHeight;\n      // + 2 to add border height\n      localRef.current.style.height = scrollHeight + 2 + \"px\";\n    }\n  };\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...fieldProps}\n      className={rootClassName}\n      onChange={handleChange}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <Aria.TextArea\n          rows={rows}\n          aria-hidden={props[\"aria-hidden\"]}\n          placeholder={placeholder}\n          className={inputClassName}\n          ref={localRef}\n          onChange={updateHeight}\n          style={{\n            minHeight: getHeight(rows),\n            maxHeight: verticallyResizable\n              ? undefined\n              : getHeight(autoResizeMaxRows),\n          }}\n        />\n        {showCharacterCount && (\n          <FieldDescription>{charactersCountDescription}</FieldDescription>\n        )}\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextArea;\n"],"names":["rows"],"mappings":";;;;;;;;;;;;;;;AAmCO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA,GAAO,CAAA;AAAA,IACP,iBAAA,GAAoB,IAAA;AAAA,IACpB,GAAA;AAAA,IACA,mBAAA;AAAA,IACA,qBAAA;AAAA,IACA,kBAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,4BAA4B,KAAK,CAAA;AAErC,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA;AAAA,IAC5C,KAAA,CAAM,YAAA,EAAc,MAAA,IAAU,KAAA,CAAM,OAAO,MAAA,IAAU;AAAA,GACvD;AAEA,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,IAAI,EAAE,aAAY,GAAI,KAAA;AACtB,EAAA,IAAI,mBAAA,EAAqB;AACvB,IAAA,WAAA,GAAc,UAAA;AAAA,EAChB,WAAW,qBAAA,EAAuB;AAChC,IAAA,WAAA,GAAc,YAAA;AAAA,EAChB;AAEA,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,SAAS,CAAA;AAE1D,EAAA,MAAM,cAAA,GAAiB,IAAA;AAAA,IACrB,MAAA,CAAO,KAAA;AAAA,IACP,OAAO,WAAA,KAAgB,SAAA,IAAa,WAAA,GAAc,OAAO,MAAA,GAAS,IAAA;AAAA,IAClE,gBAAgB,YAAA,GACZ,MAAA,CAAO,mBACP,WAAA,KAAgB,UAAA,GACd,OAAO,cAAA,GACP;AAAA,GACR;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAAc;AAClC,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,kBAAA,CAAmB,EAAE,MAAM,CAAA;AAAA,IAC7B;AACA,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,QAAA,CAAS,CAAC,CAAA;AAAA,IACZ;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,4BAA4B,OAAO,CAAA;AAEvD,EAAA,MAAM,0BAAA,GAA6B,WAAA,CAAY,MAAA,CAAO,qBAAA,EAAuB;AAAA,IAC3E,KAAA,EAAO,eAAA;AAAA,IACP,QAAA,EAAU,MAAM,SAAA,IAAa;AAAA,GAC9B,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,SAAA,GAAY,CAACA,KAAAA,KAAiB;AAClC,IAAA,OAAO,gCAAgCA,KAAI,CAAA,wCAAA,CAAA;AAAA,EAC7C,CAAA;AAEA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,gBAAgB,IAAA,KAAS,iBAAA;AAE/B,EAAA,MAAM,mBAAA,GACJ,WAAA,KAAgB,CAAC,aAAA,IAAkB,aAAA,IAAiB,OAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,WAAW,QAAA,CAAS,OAAA;AAC1B,IAAA,IAAI,CAAC,QAAA,EAAU;AAEf,IAAA,MAAM,cAAc,QAAA,CAAS,YAAA;AAC7B,IAAA,IAAI,QAAA,GAAW,KAAA;AAEf,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,QAAA,GAAW,IAAA;AAAA,IACb,CAAA;AAEA,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,IAAI,CAAC,YAAY,OAAA,EAAS;AAE1B,MAAA,MAAM,gBAAgB,QAAA,CAAS,YAAA;AAE/B,MAAA,IAAI,kBAAkB,WAAA,EAAa;AACjC,QAAA,UAAA,CAAW,IAAI,CAAA;AACf,QAAA,QAAA,GAAW,KAAA;AAAA,MACb;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,gBAAgB,MAAM;AAC1B,MAAA,QAAA,GAAW,KAAA;AAAA,IACb,CAAA;AAEA,IAAA,MAAA,CAAO,gBAAA,CAAiB,aAAa,eAAe,CAAA;AACpD,IAAA,MAAA,CAAO,gBAAA,CAAiB,aAAa,eAAe,CAAA;AACpD,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAEhD,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,aAAa,eAAe,CAAA;AACvD,MAAA,MAAA,CAAO,mBAAA,CAAoB,aAAa,eAAe,CAAA;AACvD,MAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,aAAa,CAAA;AAAA,IACrD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,IAAI,QAAA,CAAS,OAAA,IAAW,aAAA,IAAiB,CAAC,mBAAA,EAAqB;AAE7D,MAAA,QAAA,CAAS,OAAA,CAAQ,MAAM,MAAA,GAAS,KAAA;AAChC,MAAA,MAAM,YAAA,GAAe,SAAS,OAAA,CAAQ,YAAA;AAEtC,MAAA,QAAA,CAAS,OAAA,CAAQ,KAAA,CAAM,MAAA,GAAS,YAAA,GAAe,CAAA,GAAI,IAAA;AAAA,IACrD;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,SAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,QAAA,EAAU,YAAA;AAAA,MAEV,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,4BAA0B,QAAA,EAAS,CAAA;AAAA,wBACpC,GAAA;AAAA,UAAC,IAAA,CAAK,QAAA;AAAA,UAAL;AAAA,YACC,IAAA;AAAA,YACA,aAAA,EAAa,MAAM,aAAa,CAAA;AAAA,YAChC,WAAA;AAAA,YACA,SAAA,EAAW,cAAA;AAAA,YACX,GAAA,EAAK,QAAA;AAAA,YACL,QAAA,EAAU,YAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,SAAA,EAAW,UAAU,IAAI,CAAA;AAAA,cACzB,SAAA,EAAW,mBAAA,GACP,MAAA,GACA,SAAA,CAAU,iBAAiB;AAAA;AACjC;AAAA,SACF;AAAA,QACC,kBAAA,oBACC,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAA,0BAAA,EAA2B,CAAA;AAAA,4BAE/C,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/packages/components/src/components/TextArea/TextArea.module.scss.mjs

@@ -0,0 +1,15 @@
+"use client"
+/* */
+const input = "flow--text-area--input";
+const horizontalResize = "flow--text-area--horizontal-resize";
+const verticalResize = "flow--text-area--vertical-resize";
+const resize = "flow--text-area--resize";
+const styles = {
+	input: input,
+	horizontalResize: horizontalResize,
+	verticalResize: verticalResize,
+	resize: resize
+};
+
+export { styles as default, horizontalResize, input, resize, verticalResize };
+//# sourceMappingURL=TextArea.module.scss.mjs.map

package/dist/js/packages/components/src/components/TextArea/TextArea.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/js/packages/components/src/components/TextField/TextField.mjs

@@ -1,91 +1,119 @@
 "use client"
 /* */
-import PropsContextProvider from "../../lib/propsContext/components/PropsContextProvider.mjs";
-import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
-import "../../lib/propsContext/index.mjs";
-import IconHide from "../Icon/components/icons/IconHide.mjs";
-import IconShow from "../Icon/components/icons/IconShow.mjs";
-import "../Icon/components/icons/index.mjs";
-import Button from "../Button/Button.mjs";
-import "../Button/index.mjs";
-import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
-import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
-import FieldDescription from "../FieldDescription/FieldDescription.mjs";
-import "../FieldDescription/index.mjs";
-import TextField_module_default from "./TextField.module.mjs";
-import __locale_default from "../../../../../_virtual/_23.locale.mjs";
-import clsx from "clsx";
-import { useState } from "react";
-import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as Aria from "react-aria-components";
-import { useLocalizedStringFormatter } from "react-aria";
-//#region src/components/TextField/TextField.tsx
-/** @flr-generate all */
-var TextField = flowComponent("TextField", (props) => {
-	const { className, showCharacterCount, form, placeholder, ref, type: typeFromProps, children, onChange, ...rest } = useControlledHostValueProps(props);
-	const [charactersCount, setCharactersCount] = useState(props.defaultValue?.length ?? props.value?.length ?? 0);
-	const [type, setType] = useState(typeFromProps);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props);
-	const rootClassName = clsx(fieldProps.className, className);
-	const propsContext = {
-		Button: {
-			className: TextField_module_default.button,
-			variant: "plain",
-			color: "secondary",
-			tunnelId: "button"
-		},
-		CopyButton: {
-			className: TextField_module_default.button,
-			tunnelId: "button"
-		},
-		...fieldPropsContext
-	};
-	const handleChange = (v) => {
-		if (showCharacterCount) setCharactersCount(v.length);
-		if (onChange) onChange(v);
-	};
-	const translation = useLocalizedStringFormatter(__locale_default);
-	const charactersCountDescription = translation.format("textField.characters", {
-		count: charactersCount,
-		maxCount: props.maxLength ?? 0
-	});
-	return /* @__PURE__ */ jsx(Aria.TextField, {
-		...rest,
-		...fieldProps,
-		className: rootClassName,
-		onChange: handleChange,
-		type,
-		children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
-			props: propsContext,
-			children: [/* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
-				children,
-				/* @__PURE__ */ jsxs("div", {
-					className: TextField_module_default.inputContainer,
-					children: [
-						/* @__PURE__ */ jsx(Aria.Input, {
-							form,
-							placeholder,
-							className: TextField_module_default.input,
-							ref
-						}),
-						/* @__PURE__ */ jsx(TunnelExit, { id: "button" }),
-						typeFromProps === "password" && /* @__PURE__ */ jsx(Button, {
-							color: "secondary",
-							variant: "plain",
-							className: TextField_module_default.button,
-							onPress: () => setType(type === "password" ? "text" : "password"),
-							"aria-label": translation.format(`textField.password.${type === "password" ? "show" : "hide"}`),
-							children: type === "password" ? /* @__PURE__ */ jsx(IconShow, {}) : /* @__PURE__ */ jsx(IconHide, {})
-						})
-					]
-				}),
-				showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription })
-			] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
-		}) })
-	});
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import * as Aria from 'react-aria-components';
+import { useState } from 'react';
+import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+import styles from './TextField.module.scss.mjs';
+import { FieldDescription } from '../FieldDescription/FieldDescription.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import locales from '../../../../../_virtual/_.locale.json@16189d7d260d7331b0e0a1936d5c7c52.mjs';
+import { Button } from '../Button/Button.mjs';
+import '@mittwald/flow-icons';
+import '../Icon/components/IconSetProvider.mjs';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { IconHide } from '../Icon/components/icons/IconHide.mjs';
+import { IconShow } from '../Icon/components/icons/IconShow.mjs';
+import clsx from 'clsx';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+
+const TextField = flowComponent("TextField", (props) => {
+  const {
+    className,
+    showCharacterCount,
+    form,
+    placeholder,
+    ref,
+    type: typeFromProps,
+    children,
+    onChange,
+    ...rest
+  } = useControlledHostValueProps(props);
+  const [charactersCount, setCharactersCount] = useState(
+    props.defaultValue?.length ?? props.value?.length ?? 0
+  );
+  const [type, setType] = useState(typeFromProps);
+  const {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldPropsContext,
+    fieldProps
+  } = useFieldComponent(props);
+  const rootClassName = clsx(fieldProps.className, className);
+  const propsContext = {
+    Button: {
+      className: styles.button,
+      variant: "plain",
+      color: "secondary",
+      tunnelId: "button"
+    },
+    CopyButton: { className: styles.button, tunnelId: "button" },
+    ...fieldPropsContext
+  };
+  const handleChange = (v) => {
+    if (showCharacterCount) {
+      setCharactersCount(v.length);
+    }
+    if (onChange) {
+      onChange(v);
+    }
+  };
+  const translation = useLocalizedStringFormatter(locales);
+  const charactersCountDescription = translation.format(
+    "textField.characters",
+    {
+      count: charactersCount,
+      maxCount: props.maxLength ?? 0
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Aria.TextField,
+    {
+      ...rest,
+      ...fieldProps,
+      className: rootClassName,
+      onChange: handleChange,
+      type,
+      children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
+        /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
+          children,
+          /* @__PURE__ */ jsxs("div", { className: styles.inputContainer, children: [
+            /* @__PURE__ */ jsx(
+              Aria.Input,
+              {
+                form,
+                placeholder,
+                className: styles.input,
+                ref
+              }
+            ),
+            /* @__PURE__ */ jsx(TunnelExit, { id: "button" }),
+            typeFromProps === "password" && /* @__PURE__ */ jsx(
+              Button,
+              {
+                color: "secondary",
+                variant: "plain",
+                className: styles.button,
+                onPress: () => setType(type === "password" ? "text" : "password"),
+                "aria-label": translation.format(
+                  `textField.password.${type === "password" ? "show" : "hide"}`
+                ),
+                children: type === "password" ? /* @__PURE__ */ jsx(IconShow, {}) : /* @__PURE__ */ jsx(IconHide, {})
+              }
+            )
+          ] }),
+          showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription })
+        ] }),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ] }) })
+    }
+  );
 });
-//#endregion
-export { TextField as default };
 
-//# sourceMappingURL=TextField.mjs.map
+export { TextField };
+//# sourceMappingURL=TextField.mjs.map

package/dist/js/packages/components/src/components/TextField/TextField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.mjs","names":[],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnelId: \"button\",\n    },\n    CopyButton: { className: styles.button, tunnelId: \"button\" },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales);\n\n  const charactersCountDescription = translation.format(\n    \"textField.characters\",\n    {\n      count: charactersCount,\n      maxCount: props.maxLength ?? 0,\n    },\n  );\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...fieldProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <TunnelProvider>\n        <PropsContextProvider props={propsContext}>\n          <FieldErrorCaptureContext>\n            {children}\n            <div className={styles.inputContainer}>\n              <Aria.Input\n                form={form}\n                placeholder={placeholder}\n                className={styles.input}\n                ref={ref}\n              />\n              <TunnelExit id=\"button\" />\n              {typeFromProps === \"password\" && (\n                <Button\n                  color=\"secondary\"\n                  variant=\"plain\"\n                  className={styles.button}\n                  onPress={() =>\n                    setType(type === \"password\" ? \"text\" : \"password\")\n                  }\n                  aria-label={translation.format(\n                    `textField.password.${type === \"password\" ? \"show\" : \"hide\"}`,\n                  )}\n                >\n                  {type === \"password\" ? <IconShow /> : <IconHide />}\n                </Button>\n              )}\n            </div>\n            {showCharacterCount && (\n              <FieldDescription>{charactersCountDescription}</FieldDescription>\n            )}\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </PropsContextProvider>\n      </TunnelProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,MAAM;CAEtC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,EACtD;CAED,MAAM,CAAC,MAAM,WAAW,SAAS,cAAc;CAE/C,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,MAAM;CAE5B,MAAM,gBAAgB,KAAK,WAAW,WAAW,UAAU;CAE3D,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAW,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,YAAY;GAAE,WAAW,yBAAO;GAAQ,UAAU;GAAU;EAC5D,GAAG;EACJ;CAED,MAAM,gBAAgB,MAAc;AAClC,MAAI,mBACF,oBAAmB,EAAE,OAAO;AAE9B,MAAI,SACF,UAAS,EAAE;;CAIf,MAAM,cAAc,4BAA4B,iBAAQ;CAExD,MAAM,6BAA6B,YAAY,OAC7C,wBACA;EACE,OAAO;EACP,UAAU,MAAM,aAAa;EAC9B,CACF;AAED,QACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;YAEN,oBAAC,gBAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;aAA7B,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAW,yBAAO;eAAvB;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAW,yBAAO;OACb;OACL,CAAA;MACF,oBAAC,YAAD,EAAY,IAAG,UAAW,CAAA;MACzB,kBAAkB,cACjB,oBAAC,QAAD;OACE,OAAM;OACN,SAAQ;OACR,WAAW,yBAAO;OAClB,eACE,QAAQ,SAAS,aAAa,SAAS,WAAW;OAEpD,cAAY,YAAY,OACtB,sBAAsB,SAAS,aAAa,SAAS,SACtD;iBAEA,SAAS,aAAa,oBAAC,UAAD,EAAY,CAAA,GAAG,oBAAC,UAAD,EAAY,CAAA;OAC3C,CAAA;MAEP;;IACL,sBACC,oBAAC,kBAAD,EAAA,UAAmB,4BAA8C,CAAA;IAE1C,EAAA,CAAA,EAC3B,oBAAC,gBAAD,EAAkB,CAAA,CACG;MACR,CAAA;EACF,CAAA;EAEnB"}
+{"version":3,"file":"TextField.mjs","sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnelId: \"button\",\n    },\n    CopyButton: { className: styles.button, tunnelId: \"button\" },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales);\n\n  const charactersCountDescription = translation.format(\n    \"textField.characters\",\n    {\n      count: charactersCount,\n      maxCount: props.maxLength ?? 0,\n    },\n  );\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...fieldProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <TunnelProvider>\n        <PropsContextProvider props={propsContext}>\n          <FieldErrorCaptureContext>\n            {children}\n            <div className={styles.inputContainer}>\n              <Aria.Input\n                form={form}\n                placeholder={placeholder}\n                className={styles.input}\n                ref={ref}\n              />\n              <TunnelExit id=\"button\" />\n              {typeFromProps === \"password\" && (\n                <Button\n                  color=\"secondary\"\n                  variant=\"plain\"\n                  className={styles.button}\n                  onPress={() =>\n                    setType(type === \"password\" ? \"text\" : \"password\")\n                  }\n                  aria-label={translation.format(\n                    `textField.password.${type === \"password\" ? \"show\" : \"hide\"}`,\n                  )}\n                >\n                  {type === \"password\" ? <IconShow /> : <IconHide />}\n                </Button>\n              )}\n            </div>\n            {showCharacterCount && (\n              <FieldDescription>{charactersCountDescription}</FieldDescription>\n            )}\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </PropsContextProvider>\n      </TunnelProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"names":[],"mappings":"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"}

package/dist/js/packages/components/src/components/TextField/TextField.module.scss.mjs

@@ -0,0 +1,13 @@
+"use client"
+/* */
+const inputContainer = "flow--text-field--input-container";
+const input = "flow--text-field--input";
+const button = "flow--text-field--button";
+const styles = {
+	inputContainer: inputContainer,
+	input: input,
+	button: button
+};
+
+export { button, styles as default, input, inputContainer };
+//# sourceMappingURL=TextField.module.scss.mjs.map

package/dist/js/packages/components/src/components/TextField/TextField.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}