@intlayer/design-system 8.1.2 → 8.1.3

package/dist/esm/components/Terminal/terminal.content.mjs

@@ -1,61 +1,2 @@
-import { t } from "intlayer";
-
-//#region src/components/Terminal/terminal.content.ts
-const terminalContent = {
-	key: "terminal",
-	content: {
-		closeTab: t({
-			en: "Close tab",
-			fr: "Fermer l'onglet",
-			es: "Cerrar pestaña",
-			"en-GB": "Close tab",
-			de: "Tab schließen",
-			ja: "タブを閉じる",
-			ko: "탭 닫기",
-			zh: "关闭标签",
-			it: "Chiudi tab",
-			pt: "Fechar aba",
-			hi: "टैब बंद करें",
-			ar: "إغلاق التاب",
-			ru: "Закрыть вкладку",
-			tr: "Sekmeyi kapat",
-			pl: "Zamknij kartę",
-			id: "Tutup tab",
-			vi: "Đóng tab",
-			uk: "Закрити вкладку"
-		}),
-		terminalInput: t({
-			en: "Terminal input",
-			fr: "Entrée du terminal",
-			es: "Entrada del terminal",
-			"en-GB": "Terminal input",
-			de: "Terminaleingabe",
-			ja: "ターミナル入力",
-			ko: "터미널 입력",
-			zh: "终端输入",
-			it: "Input del terminale",
-			pt: "Entrada do terminal",
-			hi: "टर्मिनल इनपुट",
-			ar: "إدخال الترميز",
-			ru: "Ввод терминала",
-			tr: "Terminal girişi",
-			pl: "Wejście terminala",
-			id: "Masukan terminal",
-			vi: "Đầu vào terminal",
-			uk: "Ввід терміналу"
-		})
-	},
-	title: "Terminal component content",
-	description: "Localized content for the Terminal component, providing labels such as 'Close tab' and 'Terminal input'.",
-	tags: [
-		"component",
-		"terminal",
-		"ui",
-		"localization",
-		"labels"
-	]
-};
-
-//#endregion
-export { terminalContent as default };
+import{t as e}from"intlayer";const t={key:`terminal`,content:{closeTab:e({en:`Close tab`,fr:`Fermer l'onglet`,es:`Cerrar pestaña`,"en-GB":`Close tab`,de:`Tab schließen`,ja:`タブを閉じる`,ko:`탭 닫기`,zh:`关闭标签`,it:`Chiudi tab`,pt:`Fechar aba`,hi:`टैब बंद करें`,ar:`إغلاق التاب`,ru:`Закрыть вкладку`,tr:`Sekmeyi kapat`,pl:`Zamknij kartę`,id:`Tutup tab`,vi:`Đóng tab`,uk:`Закрити вкладку`}),terminalInput:e({en:`Terminal input`,fr:`Entrée du terminal`,es:`Entrada del terminal`,"en-GB":`Terminal input`,de:`Terminaleingabe`,ja:`ターミナル入力`,ko:`터미널 입력`,zh:`终端输入`,it:`Input del terminale`,pt:`Entrada do terminal`,hi:`टर्मिनल इनपुट`,ar:`إدخال الترميز`,ru:`Ввод терминала`,tr:`Terminal girişi`,pl:`Wejście terminala`,id:`Masukan terminal`,vi:`Đầu vào terminal`,uk:`Ввід терміналу`})},title:`Terminal component content`,description:`Localized content for the Terminal component, providing labels such as 'Close tab' and 'Terminal input'.`,tags:[`component`,`terminal`,`ui`,`localization`,`labels`]};export{t as default};
 //# sourceMappingURL=terminal.content.mjs.map

package/dist/esm/components/Terminal/terminal.content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"terminal.content.mjs","names":[],"sources":["../../../../src/components/Terminal/terminal.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst terminalContent = {\n  key: 'terminal',\n  content: {\n    closeTab: t({\n      en: 'Close tab',\n      fr: \"Fermer l'onglet\",\n      es: 'Cerrar pestaña',\n      'en-GB': 'Close tab',\n      de: 'Tab schließen',\n      ja: 'タブを閉じる',\n      ko: '탭 닫기',\n      zh: '关闭标签',\n      it: 'Chiudi tab',\n      pt: 'Fechar aba',\n      hi: 'टैब बंद करें',\n      ar: 'إغلاق التاب',\n      ru: 'Закрыть вкладку',\n      tr: 'Sekmeyi kapat',\n      pl: 'Zamknij kartę',\n      id: 'Tutup tab',\n      vi: 'Đóng tab',\n      uk: 'Закрити вкладку',\n    }),\n    terminalInput: t({\n      en: 'Terminal input',\n      fr: 'Entrée du terminal',\n      es: 'Entrada del terminal',\n      'en-GB': 'Terminal input',\n      de: 'Terminaleingabe',\n      ja: 'ターミナル入力',\n      ko: '터미널 입력',\n      zh: '终端输入',\n      it: 'Input del terminale',\n      pt: 'Entrada do terminal',\n      hi: 'टर्मिनल इनपुट',\n      ar: 'إدخال الترميز',\n      ru: 'Ввод терминала',\n      tr: 'Terminal girişi',\n      pl: 'Wejście terminala',\n      id: 'Masukan terminal',\n      vi: 'Đầu vào terminal',\n      uk: 'Ввід терміналу',\n    }),\n  },\n  title: 'Terminal component content',\n  description:\n    \"Localized content for the Terminal component, providing labels such as 'Close tab' and 'Terminal input'.\",\n  tags: ['component', 'terminal', 'ui', 'localization', 'labels'],\n} satisfies Dictionary;\n\nexport default terminalContent;\n"],"mappings":";;;AAEA,MAAM,kBAAkB;CACtB,KAAK;CACL,SAAS;EACP,UAAU,EAAE;GACV,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,eAAe,EAAE;GACf,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAa;EAAY;EAAM;EAAgB;EAAS;CAChE"}
+{"version":3,"file":"terminal.content.mjs","names":[],"sources":["../../../../src/components/Terminal/terminal.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst terminalContent = {\n  key: 'terminal',\n  content: {\n    closeTab: t({\n      en: 'Close tab',\n      fr: \"Fermer l'onglet\",\n      es: 'Cerrar pestaña',\n      'en-GB': 'Close tab',\n      de: 'Tab schließen',\n      ja: 'タブを閉じる',\n      ko: '탭 닫기',\n      zh: '关闭标签',\n      it: 'Chiudi tab',\n      pt: 'Fechar aba',\n      hi: 'टैब बंद करें',\n      ar: 'إغلاق التاب',\n      ru: 'Закрыть вкладку',\n      tr: 'Sekmeyi kapat',\n      pl: 'Zamknij kartę',\n      id: 'Tutup tab',\n      vi: 'Đóng tab',\n      uk: 'Закрити вкладку',\n    }),\n    terminalInput: t({\n      en: 'Terminal input',\n      fr: 'Entrée du terminal',\n      es: 'Entrada del terminal',\n      'en-GB': 'Terminal input',\n      de: 'Terminaleingabe',\n      ja: 'ターミナル入力',\n      ko: '터미널 입력',\n      zh: '终端输入',\n      it: 'Input del terminale',\n      pt: 'Entrada do terminal',\n      hi: 'टर्मिनल इनपुट',\n      ar: 'إدخال الترميز',\n      ru: 'Ввод терминала',\n      tr: 'Terminal girişi',\n      pl: 'Wejście terminala',\n      id: 'Masukan terminal',\n      vi: 'Đầu vào terminal',\n      uk: 'Ввід терміналу',\n    }),\n  },\n  title: 'Terminal component content',\n  description:\n    \"Localized content for the Terminal component, providing labels such as 'Close tab' and 'Terminal input'.\",\n  tags: ['component', 'terminal', 'ui', 'localization', 'labels'],\n} satisfies Dictionary;\n\nexport default terminalContent;\n"],"mappings":"6BAEA,MAAM,EAAkB,CACtB,IAAK,WACL,QAAS,CACP,SAAU,EAAE,CACV,GAAI,YACJ,GAAI,kBACJ,GAAI,iBACJ,QAAS,YACT,GAAI,gBACJ,GAAI,SACJ,GAAI,OACJ,GAAI,OACJ,GAAI,aACJ,GAAI,aACJ,GAAI,eACJ,GAAI,cACJ,GAAI,kBACJ,GAAI,gBACJ,GAAI,gBACJ,GAAI,YACJ,GAAI,WACJ,GAAI,kBACL,CAAC,CACF,cAAe,EAAE,CACf,GAAI,iBACJ,GAAI,qBACJ,GAAI,uBACJ,QAAS,iBACT,GAAI,kBACJ,GAAI,UACJ,GAAI,SACJ,GAAI,OACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,gBACJ,GAAI,gBACJ,GAAI,iBACJ,GAAI,kBACJ,GAAI,oBACJ,GAAI,mBACJ,GAAI,mBACJ,GAAI,iBACL,CAAC,CACH,CACD,MAAO,6BACP,YACE,2GACF,KAAM,CAAC,YAAa,WAAY,KAAM,eAAgB,SAAS,CAChE"}

package/dist/esm/components/TextArea/AutoSizeTextArea.mjs

@@ -1,107 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { TextArea } from "./TextArea.mjs";
-import { useEffect, useImperativeHandle, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/TextArea/AutoSizeTextArea.tsx
-const LINE_HEIGHT = 24;
-const LINE_PADDING = 12;
-/**
-* AutoSizedTextArea Component
-*
-* An enhanced textarea that automatically adjusts its height based on content,
-* providing a smooth user experience for variable-length text input.
-*
-* ## Features
-* - **Auto-Sizing**: Dynamically grows and shrinks based on content
-* - **Row Limits**: Configurable maximum rows before scrolling
-* - **Smooth Transitions**: Seamless height adjustments as user types
-* - **Scroll Management**: Automatic overflow handling when max height reached
-* - **Performance Optimized**: Efficient height calculations and updates
-*
-* ## Technical Details
-* - Line height: 24px with 12px padding
-* - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`
-* - Resize: Disabled when auto-sizing is active for smooth experience
-* - Ref forwarding: Supports imperative access to textarea element
-*
-* ## Use Cases
-* - Chat message composition with dynamic sizing
-* - Comment forms that expand with content
-* - Note-taking interfaces with variable length
-* - Social media post creation
-* - Code snippet input with growth limits
-*
-* @example
-* ```tsx
-* // Chat-style auto-expanding textarea
-* const [message, setMessage] = useState('');
-*
-* <AutoSizedTextArea
-*   value={message}
-*   onChange={(e) => setMessage(e.target.value)}
-*   placeholder="Type your message..."
-*   autoSize={true}
-*   maxRows={8}
-*   className="min-h-[40px]"
-*   onKeyDown={(e) => {
-*     if (e.key === 'Enter' && !e.shiftKey) {
-*       e.preventDefault();
-*       sendMessage(message);
-*       setMessage('');
-*     }
-*   }}
-* />
-*
-* // Note-taking with generous height limits
-* <AutoSizedTextArea
-*   defaultValue={note.content}
-*   onChange={handleNoteChange}
-*   placeholder="Write your notes here..."
-*   autoSize={true}
-*   maxRows={20}
-*   variant={InputVariant.DEFAULT}
-* />
-* ```
-*/
-const AutoSizedTextArea = ({ className, autoSize = true, onChange, maxRows = 999, ref, ...props }) => {
-	const textAreaRef = useRef(null);
-	useImperativeHandle(ref, () => textAreaRef.current);
-	const adjustHeight = () => {
-		const textAreaEl = textAreaRef.current;
-		if (!textAreaEl || !autoSize) return;
-		const textAreaStyle = textAreaEl.style;
-		textAreaStyle.height = "auto";
-		const scrollHeight = textAreaEl.scrollHeight;
-		const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;
-		const minHeight = LINE_HEIGHT + LINE_PADDING;
-		textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;
-	};
-	useEffect(() => {
-		adjustHeight();
-	}, [
-		props.value,
-		props.defaultValue,
-		adjustHeight
-	]);
-	const handleChange = (e) => {
-		onChange?.(e);
-		adjustHeight();
-	};
-	const setRef = (el) => {
-		textAreaRef.current = el;
-		if (el) adjustHeight();
-	};
-	return /* @__PURE__ */ jsx(TextArea, {
-		ref: setRef,
-		onChange: handleChange,
-		className: cn("overflow-y-auto", autoSize && "resize-none", className),
-		...props
-	});
-};
-
-//#endregion
-export { AutoSizedTextArea };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{TextArea as t}from"./TextArea.mjs";import{useEffect as n,useImperativeHandle as r,useRef as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=({className:o,autoSize:s=!0,onChange:c,maxRows:l=999,ref:u,...d})=>{let f=i(null);r(u,()=>f.current);let p=()=>{let e=f.current;if(!e||!s)return;let t=e.style;t.height=`auto`;let n=e.scrollHeight,r=24*l+12;t.height=`${Math.max(Math.min(n,r),36)}px`};return n(()=>{p()},[d.value,d.defaultValue,p]),a(t,{ref:e=>{f.current=e,e&&p()},onChange:e=>{c?.(e),p()},className:e(`overflow-y-auto`,s&&`resize-none`,o),...d})};export{o as AutoSizedTextArea};
 //# sourceMappingURL=AutoSizeTextArea.mjs.map

package/dist/esm/components/TextArea/AutoSizeTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { TextArea, type TextAreaProps } from './TextArea';\n\n/**\n * Props for the AutoSizedTextArea component.\n *\n * Extends TextAreaProps with auto-sizing functionality and row limitations.\n *\n * @example\n * ```tsx\n * // Auto-sizing textarea that grows with content\n * <AutoSizedTextArea\n *   placeholder=\"Start typing and watch it grow...\"\n *   autoSize={true}\n *   maxRows={10}\n * />\n *\n * // Limited height with scroll when exceeded\n * <AutoSizedTextArea\n *   value={longText}\n *   onChange={handleChange}\n *   autoSize={true}\n *   maxRows={5}\n *   className=\"max-h-[120px]\"\n * />\n *\n * // Disable auto-sizing for fixed height\n * <AutoSizedTextArea\n *   autoSize={false}\n *   rows={3}\n *   placeholder=\"Fixed height textarea\"\n * />\n * ```\n */\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  /** Whether to automatically adjust height based on content */\n  autoSize?: boolean;\n  /** Maximum number of rows before scrolling is enabled */\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\n/**\n * AutoSizedTextArea Component\n *\n * An enhanced textarea that automatically adjusts its height based on content,\n * providing a smooth user experience for variable-length text input.\n *\n * ## Features\n * - **Auto-Sizing**: Dynamically grows and shrinks based on content\n * - **Row Limits**: Configurable maximum rows before scrolling\n * - **Smooth Transitions**: Seamless height adjustments as user types\n * - **Scroll Management**: Automatic overflow handling when max height reached\n * - **Performance Optimized**: Efficient height calculations and updates\n *\n * ## Technical Details\n * - Line height: 24px with 12px padding\n * - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`\n * - Resize: Disabled when auto-sizing is active for smooth experience\n * - Ref forwarding: Supports imperative access to textarea element\n *\n * ## Use Cases\n * - Chat message composition with dynamic sizing\n * - Comment forms that expand with content\n * - Note-taking interfaces with variable length\n * - Social media post creation\n * - Code snippet input with growth limits\n *\n * @example\n * ```tsx\n * // Chat-style auto-expanding textarea\n * const [message, setMessage] = useState('');\n *\n * <AutoSizedTextArea\n *   value={message}\n *   onChange={(e) => setMessage(e.target.value)}\n *   placeholder=\"Type your message...\"\n *   autoSize={true}\n *   maxRows={8}\n *   className=\"min-h-[40px]\"\n *   onKeyDown={(e) => {\n *     if (e.key === 'Enter' && !e.shiftKey) {\n *       e.preventDefault();\n *       sendMessage(message);\n *       setMessage('');\n *     }\n *   }}\n * />\n *\n * // Note-taking with generous height limits\n * <AutoSizedTextArea\n *   defaultValue={note.content}\n *   onChange={handleNoteChange}\n *   placeholder=\"Write your notes here...\"\n *   autoSize={true}\n *   maxRows={20}\n *   variant={InputVariant.DEFAULT}\n * />\n * ```\n */\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = () => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;\n  };\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = (el: HTMLTextAreaElement | null) => {\n    textAreaRef.current = el;\n    if (el) {\n      adjustHeight();\n    }\n  };\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn('overflow-y-auto', autoSize && 'resize-none', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DrB,MAAa,qBAAiD,EAC5D,WACA,WAAW,MACX,UACA,UAAU,KACV,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAAmC,KAAK;AAE5D,qBAAoB,WAAW,YAAY,QAAS;CAEpD,MAAM,qBAAqB;EACzB,MAAM,aAAa,YAAY;AAE/B,MAAI,CAAC,cAAc,CAAC,SAAU;EAE9B,MAAM,gBAAgB,WAAW;AAGjC,gBAAc,SAAS;EACvB,MAAM,eAAe,WAAW;EAChC,MAAM,YAAY,cAAc,UAAU;EAC1C,MAAM,YAAY,cAAc;AAGhC,gBAAc,SAAS,GAAG,KAAK,IAAI,KAAK,IAAI,cAAc,UAAU,EAAE,UAAU,CAAC;;AAGnF,iBAAgB;AACd,gBAAc;IACb;EAAC,MAAM;EAAO,MAAM;EAAc;EAAa,CAAC;CAEnD,MAAM,gBAAyD,MAAM;AACnE,aAAW,EAAE;AACb,gBAAc;;CAGhB,MAAM,UAAU,OAAmC;AACjD,cAAY,UAAU;AACtB,MAAI,GACF,eAAc;;AAIlB,QACE,oBAAC;EACC,KAAK;EACL,UAAU;EACV,WAAW,GAAG,mBAAmB,YAAY,eAAe,UAAU;EACtE,GAAI;GACJ"}
+{"version":3,"file":"AutoSizeTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { TextArea, type TextAreaProps } from './TextArea';\n\n/**\n * Props for the AutoSizedTextArea component.\n *\n * Extends TextAreaProps with auto-sizing functionality and row limitations.\n *\n * @example\n * ```tsx\n * // Auto-sizing textarea that grows with content\n * <AutoSizedTextArea\n *   placeholder=\"Start typing and watch it grow...\"\n *   autoSize={true}\n *   maxRows={10}\n * />\n *\n * // Limited height with scroll when exceeded\n * <AutoSizedTextArea\n *   value={longText}\n *   onChange={handleChange}\n *   autoSize={true}\n *   maxRows={5}\n *   className=\"max-h-[120px]\"\n * />\n *\n * // Disable auto-sizing for fixed height\n * <AutoSizedTextArea\n *   autoSize={false}\n *   rows={3}\n *   placeholder=\"Fixed height textarea\"\n * />\n * ```\n */\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  /** Whether to automatically adjust height based on content */\n  autoSize?: boolean;\n  /** Maximum number of rows before scrolling is enabled */\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\n/**\n * AutoSizedTextArea Component\n *\n * An enhanced textarea that automatically adjusts its height based on content,\n * providing a smooth user experience for variable-length text input.\n *\n * ## Features\n * - **Auto-Sizing**: Dynamically grows and shrinks based on content\n * - **Row Limits**: Configurable maximum rows before scrolling\n * - **Smooth Transitions**: Seamless height adjustments as user types\n * - **Scroll Management**: Automatic overflow handling when max height reached\n * - **Performance Optimized**: Efficient height calculations and updates\n *\n * ## Technical Details\n * - Line height: 24px with 12px padding\n * - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`\n * - Resize: Disabled when auto-sizing is active for smooth experience\n * - Ref forwarding: Supports imperative access to textarea element\n *\n * ## Use Cases\n * - Chat message composition with dynamic sizing\n * - Comment forms that expand with content\n * - Note-taking interfaces with variable length\n * - Social media post creation\n * - Code snippet input with growth limits\n *\n * @example\n * ```tsx\n * // Chat-style auto-expanding textarea\n * const [message, setMessage] = useState('');\n *\n * <AutoSizedTextArea\n *   value={message}\n *   onChange={(e) => setMessage(e.target.value)}\n *   placeholder=\"Type your message...\"\n *   autoSize={true}\n *   maxRows={8}\n *   className=\"min-h-[40px]\"\n *   onKeyDown={(e) => {\n *     if (e.key === 'Enter' && !e.shiftKey) {\n *       e.preventDefault();\n *       sendMessage(message);\n *       setMessage('');\n *     }\n *   }}\n * />\n *\n * // Note-taking with generous height limits\n * <AutoSizedTextArea\n *   defaultValue={note.content}\n *   onChange={handleNoteChange}\n *   placeholder=\"Write your notes here...\"\n *   autoSize={true}\n *   maxRows={20}\n *   variant={InputVariant.DEFAULT}\n * />\n * ```\n */\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = () => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;\n  };\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = (el: HTMLTextAreaElement | null) => {\n    textAreaRef.current = el;\n    if (el) {\n      adjustHeight();\n    }\n  };\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn('overflow-y-auto', autoSize && 'resize-none', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":"8MAkDA,MA6Da,GAAiD,CAC5D,YACA,WAAW,GACX,WACA,UAAU,IACV,MACA,GAAG,KACC,CACJ,IAAM,EAAc,EAAmC,KAAK,CAE5D,EAAoB,MAAW,EAAY,QAAS,CAEpD,IAAM,MAAqB,CACzB,IAAM,EAAa,EAAY,QAE/B,GAAI,CAAC,GAAc,CAAC,EAAU,OAE9B,IAAM,EAAgB,EAAW,MAGjC,EAAc,OAAS,OACvB,IAAM,EAAe,EAAW,aAC1B,EAAY,GAAc,EAAU,GAI1C,EAAc,OAAS,GAAG,KAAK,IAAI,KAAK,IAAI,EAAc,EAAU,CAAE,GAAU,CAAC,KAmBnF,OAhBA,MAAgB,CACd,GAAc,EACb,CAAC,EAAM,MAAO,EAAM,aAAc,EAAa,CAAC,CAejD,EAAC,EAAA,CACC,IATY,GAAmC,CACjD,EAAY,QAAU,EAClB,GACF,GAAc,EAOd,SAf2D,GAAM,CACnE,IAAW,EAAE,CACb,GAAc,EAcZ,UAAW,EAAG,kBAAmB,GAAY,cAAe,EAAU,CACtE,GAAI,GACJ"}

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs

@@ -1,258 +1,2 @@
-'use client';
-
-import { useAutocomplete } from "../../hooks/reactQuery.mjs";
-import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
-import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useConfiguration } from "@intlayer/editor-react";
-
-//#region src/components/TextArea/AutocompleteTextArea.tsx
-/**
-* Custom hook for debouncing values to prevent excessive API calls.
-*
-* Delays updating the returned value until the input value has stopped changing
-* for the specified delay period.
-*
-* @param value - The value to debounce
-* @param delay - Delay in milliseconds before updating the debounced value
-* @returns The debounced value that only updates after the delay period
-*
-* @example
-* ```tsx
-* const [searchTerm, setSearchTerm] = useState('');
-* const debouncedSearchTerm = useDebounce(searchTerm, 300);
-*
-* useEffect(() => {
-*   if (debouncedSearchTerm) {
-*     performSearch(debouncedSearchTerm);
-*   }
-* }, [debouncedSearchTerm]);
-* ```
-*/
-const useDebounce = (value, delay) => {
-	const [debouncedValue, setDebouncedValue] = useState(value);
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			setDebouncedValue(value);
-		}, delay);
-		return () => clearTimeout(timer);
-	}, [value, delay]);
-	return debouncedValue;
-};
-/**
-* AutoCompleteTextarea Component
-*
-* An intelligent textarea that provides AI-powered autocomplete suggestions as users type,
-* combining auto-sizing functionality with contextual text completion.
-*
-* ## Features
-* - **AI-Powered Suggestions**: Context-aware autocomplete using configured AI models
-* - **Debounced API Calls**: Efficient suggestion fetching with 200ms debounce
-* - **Visual Suggestions**: Inline preview of suggested completions
-* - **Keyboard Navigation**: Tab key to accept suggestions
-* - **Context Analysis**: Uses surrounding text for better suggestions
-* - **Auto-Sizing**: Inherits all AutoSizedTextArea capabilities
-* - **Performance Optimized**: Smart caching and minimal re-renders
-*
-* ## Technical Implementation
-* - **Debounce Strategy**: 200ms delay before fetching suggestions
-* - **Context Window**: 5 lines before/after cursor for context
-* - **Minimum Trigger**: Requires 3+ characters before suggesting
-* - **Position Tracking**: Ghost layer for accurate suggestion positioning
-* - **Cursor Management**: Tracks cursor position during suggestion fetch
-*
-* ## AI Integration
-* - Uses configured AI model (OpenAI, Anthropic, etc.)
-* - Sends context-aware prompts for relevant suggestions
-* - Respects temperature and model settings from configuration
-* - Handles API errors gracefully without interrupting user flow
-*
-* ## Use Cases
-* - **Content Creation**: Blog posts, articles, documentation
-* - **Code Comments**: Intelligent code documentation assistance
-* - **Email Composition**: Professional email writing assistance
-* - **Creative Writing**: Story and narrative completion
-* - **Technical Documentation**: API docs, README files
-* - **Social Media**: Post creation with engagement optimization
-*
-* @example
-* ```tsx
-* // Blog writing assistant
-* const [blogPost, setBlogPost] = useState('');
-* const [isAiEnabled, setIsAiEnabled] = useState(true);
-*
-* <div className="space-y-4">
-*   <div className="flex items-center gap-2">
-*     <Switch
-*       checked={isAiEnabled}
-*       onChange={setIsAiEnabled}
-*     />
-*     <label>AI Writing Assistant</label>
-*   </div>
-*
-*   <AutoCompleteTextarea
-*     value={blogPost}
-*     onChange={(e) => setBlogPost(e.target.value)}
-*     placeholder="Start writing your blog post..."
-*     isActive={isAiEnabled}
-*     autoSize={true}
-*     maxRows={15}
-*     className="min-h-[200px] font-serif text-lg leading-relaxed"
-*   />
-* </div>
-*
-* // Code documentation assistant
-* <AutoCompleteTextarea
-*   value={docComment}
-*   onChange={handleDocChange}
-*   placeholder="/** Describe this function... *\/"
-*   isActive={true}
-*   autoSize={true}
-*   maxRows={8}
-*   className="font-mono text-sm"
-* />
-*
-* // Email composition with templates
-* <AutoCompleteTextarea
-*   defaultValue="Dear "
-*   placeholder="AI will help complete your email..."
-*   isActive={true}
-*   autoSize={true}
-*   maxRows={12}
-*   variant={InputVariant.DEFAULT}
-* />
-* ```
-*
-* ## Accessibility
-* - Ghost layer is properly hidden from screen readers
-* - Maintains focus management during suggestion acceptance
-* - Preserves keyboard navigation patterns
-* - Respects reduced motion preferences
-*/
-const AutoCompleteTextarea = ({ isActive = true, suggestion: suggestionProp, ...props }) => {
-	const defaultValue = String(props.value ?? props.defaultValue ?? "");
-	const { mutate: autocomplete } = useAutocomplete();
-	const configuration = useConfiguration();
-	const [isTyped, setIsTyped] = useState(false);
-	const [text, setText] = useState(defaultValue);
-	const [suggestion, setSuggestion] = useState("");
-	const textareaRef = useRef(null);
-	const placeholderRef = useRef(null);
-	const ghostLayerRef = useRef(null);
-	const [suggestionPosition, setSuggestionPosition] = useState(null);
-	const [cursorAtFetch, setCursorAtFetch] = useState(-1);
-	const debouncedText = useDebounce(text, 200);
-	useEffect(() => {
-		if (typeof props.value === "undefined") return;
-		setText(defaultValue);
-	}, [props.value, props.defaultValue]);
-	useEffect(() => {
-		if (!isActive) return;
-		if (!isTyped) return;
-		if (debouncedText.length > 3) setSuggestion("");
-		else setSuggestion("");
-	}, [
-		debouncedText,
-		isActive,
-		autocomplete,
-		configuration
-	]);
-	useEffect(() => {
-		if (!suggestion || cursorAtFetch === -1 || !placeholderRef.current || !ghostLayerRef.current) {
-			setSuggestionPosition(null);
-			return;
-		}
-		const rect = placeholderRef.current.getBoundingClientRect();
-		const parentRect = ghostLayerRef.current.getBoundingClientRect();
-		setSuggestionPosition({
-			left: rect.left - parentRect.left,
-			top: rect.top - parentRect.top
-		});
-	}, [
-		suggestion,
-		cursorAtFetch,
-		text
-	]);
-	const acceptSuggestion = () => {
-		const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;
-		if (currentCursor !== cursorAtFetch) return;
-		setText(text.slice(0, currentCursor) + suggestion + text.slice(currentCursor));
-		setSuggestion("");
-		setCursorAtFetch(-1);
-		setTimeout(() => {
-			textareaRef.current?.focus();
-			const newCursorPos = currentCursor + suggestion.length;
-			textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
-		}, 0);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative w-full",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				ref: ghostLayerRef,
-				className: "pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]",
-				"aria-hidden": "true",
-				children: [suggestion && cursorAtFetch !== -1 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "align-text-top text-transparent",
-						children: text.slice(0, cursorAtFetch)
-					}),
-					/* @__PURE__ */ jsx("span", {
-						ref: placeholderRef,
-						style: { visibility: "hidden" },
-						"aria-hidden": "true",
-						children: suggestion
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "align-text-top text-transparent",
-						children: text.slice(cursorAtFetch)
-					})
-				] }) : /* @__PURE__ */ jsx("span", {
-					className: "align-text-top text-transparent",
-					children: text
-				}), suggestionProp && /* @__PURE__ */ jsx("span", {
-					className: "align-text-top text-neutral",
-					children: suggestionProp
-				})]
-			}),
-			suggestion && suggestionPosition && /* @__PURE__ */ jsx("div", {
-				className: "pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]",
-				style: {
-					position: "absolute",
-					left: suggestionPosition.left,
-					top: suggestionPosition.top
-				},
-				children: suggestion
-			}),
-			/* @__PURE__ */ jsx(AutoSizedTextArea, {
-				...props,
-				ref: textareaRef,
-				value: text,
-				onChange: (e) => {
-					setIsTyped(true);
-					setText(e.target.value);
-					setSuggestion("");
-					props.onChange?.(e);
-				},
-				onKeyDown: (e) => {
-					if (e.key === "Tab" && suggestion) {
-						e.preventDefault();
-						acceptSuggestion();
-					}
-					props.onKeyDown?.(e);
-				},
-				onSelect: (e) => {
-					if (suggestion && e.target.selectionStart !== cursorAtFetch) {
-						setSuggestion("");
-						setCursorAtFetch(-1);
-					}
-					props.onSelect?.(e);
-				}
-			})
-		]
-	});
-};
-
-//#endregion
-export { AutoCompleteTextarea, useDebounce };
+"use client";import{useAutocomplete as e}from"../../hooks/reactQuery.mjs";import{AutoSizedTextArea as t}from"./AutoSizeTextArea.mjs";import{useEffect as n,useRef as r,useState as i}from"react";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";import{useConfiguration as c}from"@intlayer/editor-react";const l=(e,t)=>{let[r,a]=i(e);return n(()=>{let n=setTimeout(()=>{a(e)},t);return()=>clearTimeout(n)},[e,t]),r},u=({isActive:u=!0,suggestion:d,...f})=>{let p=String(f.value??f.defaultValue??``),{mutate:m}=e(),h=c(),[g,_]=i(!1),[v,y]=i(p),[b,x]=i(``),S=r(null),C=r(null),w=r(null),[T,E]=i(null),[D,O]=i(-1),k=l(v,200);n(()=>{f.value!==void 0&&y(p)},[f.value,f.defaultValue]),n(()=>{u&&g&&(k.length,x(``))},[k,u,m,h]),n(()=>{if(!b||D===-1||!C.current||!w.current){E(null);return}let e=C.current.getBoundingClientRect(),t=w.current.getBoundingClientRect();E({left:e.left-t.left,top:e.top-t.top})},[b,D,v]);let A=()=>{let e=S.current?.selectionStart??D;e===D&&(y(v.slice(0,e)+b+v.slice(e)),x(``),O(-1),setTimeout(()=>{S.current?.focus();let t=e+b.length;S.current?.setSelectionRange(t,t)},0))};return s(`div`,{className:`relative w-full`,children:[s(`div`,{ref:w,className:`pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]`,"aria-hidden":`true`,children:[b&&D!==-1?s(a,{children:[o(`span`,{className:`align-text-top text-transparent`,children:v.slice(0,D)}),o(`span`,{ref:C,style:{visibility:`hidden`},"aria-hidden":`true`,children:b}),o(`span`,{className:`align-text-top text-transparent`,children:v.slice(D)})]}):o(`span`,{className:`align-text-top text-transparent`,children:v}),d&&o(`span`,{className:`align-text-top text-neutral`,children:d})]}),b&&T&&o(`div`,{className:`pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]`,style:{position:`absolute`,left:T.left,top:T.top},children:b}),o(t,{...f,ref:S,value:v,onChange:e=>{_(!0),y(e.target.value),x(``),f.onChange?.(e)},onKeyDown:e=>{e.key===`Tab`&&b&&(e.preventDefault(),A()),f.onKeyDown?.(e)},onSelect:e=>{b&&e.target.selectionStart!==D&&(x(``),O(-1)),f.onSelect?.(e)}})]})};export{u as AutoCompleteTextarea,l as useDebounce};
 //# sourceMappingURL=AutocompleteTextArea.mjs.map

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useAutocomplete } from '@hooks/reactQuery';\nimport type { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport {\n  AutoSizedTextArea,\n  type AutoSizedTextAreaProps,\n} from './AutoSizeTextArea';\n\n/**\n * Custom hook for debouncing values to prevent excessive API calls.\n *\n * Delays updating the returned value until the input value has stopped changing\n * for the specified delay period.\n *\n * @param value - The value to debounce\n * @param delay - Delay in milliseconds before updating the debounced value\n * @returns The debounced value that only updates after the delay period\n *\n * @example\n * ```tsx\n * const [searchTerm, setSearchTerm] = useState('');\n * const debouncedSearchTerm = useDebounce(searchTerm, 300);\n *\n * useEffect(() => {\n *   if (debouncedSearchTerm) {\n *     performSearch(debouncedSearchTerm);\n *   }\n * }, [debouncedSearchTerm]);\n * ```\n */\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Cleanup the timer if value changes before 'delay' ms\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\n/**\n * Props for the AutocompleteTextArea component.\n *\n * Extends AutoSizedTextAreaProps with AI-powered autocomplete functionality.\n *\n * @example\n * ```tsx\n * // AI-powered autocomplete textarea\n * <AutoCompleteTextarea\n *   placeholder=\"Start typing for AI suggestions...\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={10}\n * />\n *\n * // Manual suggestion mode\n * <AutoCompleteTextarea\n *   value={content}\n *   onChange={handleChange}\n *   suggestion=\"Consider adding more details about...\"\n *   isActive={false}\n * />\n *\n * // Disabled autocomplete for sensitive content\n * <AutoCompleteTextarea\n *   placeholder=\"Private notes (no AI assistance)\"\n *   isActive={false}\n *   autoSize={true}\n * />\n * ```\n */\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  /** Whether AI autocomplete is active and should fetch suggestions */\n  isActive?: boolean;\n  /** Manual suggestion text to display (overrides AI suggestions) */\n  suggestion?: string;\n};\n\n/**\n * AutoCompleteTextarea Component\n *\n * An intelligent textarea that provides AI-powered autocomplete suggestions as users type,\n * combining auto-sizing functionality with contextual text completion.\n *\n * ## Features\n * - **AI-Powered Suggestions**: Context-aware autocomplete using configured AI models\n * - **Debounced API Calls**: Efficient suggestion fetching with 200ms debounce\n * - **Visual Suggestions**: Inline preview of suggested completions\n * - **Keyboard Navigation**: Tab key to accept suggestions\n * - **Context Analysis**: Uses surrounding text for better suggestions\n * - **Auto-Sizing**: Inherits all AutoSizedTextArea capabilities\n * - **Performance Optimized**: Smart caching and minimal re-renders\n *\n * ## Technical Implementation\n * - **Debounce Strategy**: 200ms delay before fetching suggestions\n * - **Context Window**: 5 lines before/after cursor for context\n * - **Minimum Trigger**: Requires 3+ characters before suggesting\n * - **Position Tracking**: Ghost layer for accurate suggestion positioning\n * - **Cursor Management**: Tracks cursor position during suggestion fetch\n *\n * ## AI Integration\n * - Uses configured AI model (OpenAI, Anthropic, etc.)\n * - Sends context-aware prompts for relevant suggestions\n * - Respects temperature and model settings from configuration\n * - Handles API errors gracefully without interrupting user flow\n *\n * ## Use Cases\n * - **Content Creation**: Blog posts, articles, documentation\n * - **Code Comments**: Intelligent code documentation assistance\n * - **Email Composition**: Professional email writing assistance\n * - **Creative Writing**: Story and narrative completion\n * - **Technical Documentation**: API docs, README files\n * - **Social Media**: Post creation with engagement optimization\n *\n * @example\n * ```tsx\n * // Blog writing assistant\n * const [blogPost, setBlogPost] = useState('');\n * const [isAiEnabled, setIsAiEnabled] = useState(true);\n *\n * <div className=\"space-y-4\">\n *   <div className=\"flex items-center gap-2\">\n *     <Switch\n *       checked={isAiEnabled}\n *       onChange={setIsAiEnabled}\n *     />\n *     <label>AI Writing Assistant</label>\n *   </div>\n *\n *   <AutoCompleteTextarea\n *     value={blogPost}\n *     onChange={(e) => setBlogPost(e.target.value)}\n *     placeholder=\"Start writing your blog post...\"\n *     isActive={isAiEnabled}\n *     autoSize={true}\n *     maxRows={15}\n *     className=\"min-h-[200px] font-serif text-lg leading-relaxed\"\n *   />\n * </div>\n *\n * // Code documentation assistant\n * <AutoCompleteTextarea\n *   value={docComment}\n *   onChange={handleDocChange}\n *   placeholder=\"/** Describe this function... *\\/\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={8}\n *   className=\"font-mono text-sm\"\n * />\n *\n * // Email composition with templates\n * <AutoCompleteTextarea\n *   defaultValue=\"Dear \"\n *   placeholder=\"AI will help complete your email...\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={12}\n *   variant={InputVariant.DEFAULT}\n * />\n * ```\n *\n * ## Accessibility\n * - Ghost layer is properly hidden from screen readers\n * - Maintains focus management during suggestion acceptance\n * - Preserves keyboard navigation patterns\n * - Respects reduced motion preferences\n */\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const { mutate: autocomplete } = useAutocomplete();\n  const configuration = useConfiguration();\n  const [isTyped, setIsTyped] = useState(false);\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const placeholderRef = useRef<HTMLSpanElement>(null);\n  const ghostLayerRef = useRef<HTMLDivElement>(null);\n  const [suggestionPosition, setSuggestionPosition] = useState<{\n    left: number;\n    top: number;\n  } | null>(null);\n  const [cursorAtFetch, setCursorAtFetch] = useState(-1);\n\n  // Only update this “debouncedText” after the user stops typing for 200ms\n  const debouncedText = useDebounce(text, 200);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(defaultValue);\n  }, [props.value, props.defaultValue]);\n\n  useEffect(() => {\n    if (!isActive) return;\n    if (!isTyped) return;\n\n    const fetchSuggestion = async () => {\n      try {\n        const cursor =\n          textareaRef.current?.selectionStart ?? debouncedText.length;\n        const before = debouncedText.slice(0, cursor);\n        const after = debouncedText.slice(cursor);\n        const numLines = 5;\n        const beforeLines = before.split('\\n');\n        const contextBeforeLines = beforeLines.slice(\n          Math.max(0, beforeLines.length - numLines - 1),\n          -1\n        );\n        const contextBefore = contextBeforeLines.join('\\n');\n        const currentLine = beforeLines[beforeLines.length - 1] ?? '';\n        const afterLines = after.split('\\n');\n        const contextAfter = afterLines.slice(1, numLines + 1).join('\\n');\n\n        autocomplete(\n          {\n            text: before,\n            contextBefore,\n            currentLine,\n            contextAfter,\n            aiOptions: {\n              apiKey: configuration.ai?.apiKey,\n              model: configuration.ai?.model,\n              temperature: configuration.ai?.temperature,\n            },\n          },\n          {\n            onSuccess: (data: AutocompleteResponse) => {\n              setSuggestion(data.data?.autocompletion ?? '');\n              setCursorAtFetch(cursor);\n            },\n          }\n        );\n      } catch (err) {\n        console.error('Autocomplete error:', err);\n      }\n    };\n\n    if (debouncedText.length > 3) {\n      // Only fetch if user typed more than 3 chars and has paused\n      setSuggestion('');\n      // TODO: Uncomment this when the autocomplete works well enough\n      // fetchSuggestion();\n    } else {\n      // If typed less than threshold, clear the suggestion\n      setSuggestion('');\n    }\n  }, [debouncedText, isActive, autocomplete, configuration]);\n\n  useEffect(() => {\n    if (\n      !suggestion ||\n      cursorAtFetch === -1 ||\n      !placeholderRef.current ||\n      !ghostLayerRef.current\n    ) {\n      setSuggestionPosition(null);\n      return;\n    }\n\n    const rect = placeholderRef.current.getBoundingClientRect();\n    const parentRect = ghostLayerRef.current.getBoundingClientRect();\n    setSuggestionPosition({\n      left: rect.left - parentRect.left,\n      top: rect.top - parentRect.top,\n    });\n  }, [suggestion, cursorAtFetch, text]);\n\n  const acceptSuggestion = () => {\n    const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;\n    if (currentCursor !== cursorAtFetch) return;\n    const newText =\n      text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);\n    setText(newText);\n    setSuggestion('');\n    setCursorAtFetch(-1);\n    setTimeout(() => {\n      textareaRef.current?.focus();\n      const newCursorPos = currentCursor + suggestion.length;\n      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n    }, 0);\n  };\n\n  return (\n    <div className=\"relative w-full\">\n      <div\n        ref={ghostLayerRef}\n        className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n        aria-hidden=\"true\"\n      >\n        {suggestion && cursorAtFetch !== -1 ? (\n          <>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(0, cursorAtFetch)}\n            </span>\n            <span\n              ref={placeholderRef}\n              style={{ visibility: 'hidden' }}\n              aria-hidden=\"true\"\n            >\n              {suggestion}\n            </span>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(cursorAtFetch)}\n            </span>\n          </>\n        ) : (\n          <span className=\"align-text-top text-transparent\">{text}</span>\n        )}\n        {suggestionProp && (\n          <span className=\"align-text-top text-neutral\">{suggestionProp}</span>\n        )}\n      </div>\n      {suggestion && suggestionPosition && (\n        <div\n          className=\"pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]\"\n          style={{\n            position: 'absolute',\n            left: suggestionPosition.left,\n            top: suggestionPosition.top,\n          }}\n        >\n          {suggestion}\n        </div>\n      )}\n      <AutoSizedTextArea\n        {...props}\n        ref={textareaRef}\n        value={text}\n        onChange={(e) => {\n          setIsTyped(true);\n          setText(e.target.value);\n          setSuggestion('');\n          props.onChange?.(e);\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Tab' && suggestion) {\n            e.preventDefault();\n            acceptSuggestion();\n          }\n          props.onKeyDown?.(e);\n        }}\n        onSelect={(e) => {\n          if (\n            suggestion &&\n            (e.target as HTMLTextAreaElement).selectionStart !== cursorAtFetch\n          ) {\n            setSuggestion('');\n            setCursorAtFetch(-1);\n          }\n          props.onSelect?.(e);\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AutocompleteTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useAutocomplete } from '@hooks/reactQuery';\nimport type { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport {\n  AutoSizedTextArea,\n  type AutoSizedTextAreaProps,\n} from './AutoSizeTextArea';\n\n/**\n * Custom hook for debouncing values to prevent excessive API calls.\n *\n * Delays updating the returned value until the input value has stopped changing\n * for the specified delay period.\n *\n * @param value - The value to debounce\n * @param delay - Delay in milliseconds before updating the debounced value\n * @returns The debounced value that only updates after the delay period\n *\n * @example\n * ```tsx\n * const [searchTerm, setSearchTerm] = useState('');\n * const debouncedSearchTerm = useDebounce(searchTerm, 300);\n *\n * useEffect(() => {\n *   if (debouncedSearchTerm) {\n *     performSearch(debouncedSearchTerm);\n *   }\n * }, [debouncedSearchTerm]);\n * ```\n */\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Cleanup the timer if value changes before 'delay' ms\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\n/**\n * Props for the AutocompleteTextArea component.\n *\n * Extends AutoSizedTextAreaProps with AI-powered autocomplete functionality.\n *\n * @example\n * ```tsx\n * // AI-powered autocomplete textarea\n * <AutoCompleteTextarea\n *   placeholder=\"Start typing for AI suggestions...\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={10}\n * />\n *\n * // Manual suggestion mode\n * <AutoCompleteTextarea\n *   value={content}\n *   onChange={handleChange}\n *   suggestion=\"Consider adding more details about...\"\n *   isActive={false}\n * />\n *\n * // Disabled autocomplete for sensitive content\n * <AutoCompleteTextarea\n *   placeholder=\"Private notes (no AI assistance)\"\n *   isActive={false}\n *   autoSize={true}\n * />\n * ```\n */\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  /** Whether AI autocomplete is active and should fetch suggestions */\n  isActive?: boolean;\n  /** Manual suggestion text to display (overrides AI suggestions) */\n  suggestion?: string;\n};\n\n/**\n * AutoCompleteTextarea Component\n *\n * An intelligent textarea that provides AI-powered autocomplete suggestions as users type,\n * combining auto-sizing functionality with contextual text completion.\n *\n * ## Features\n * - **AI-Powered Suggestions**: Context-aware autocomplete using configured AI models\n * - **Debounced API Calls**: Efficient suggestion fetching with 200ms debounce\n * - **Visual Suggestions**: Inline preview of suggested completions\n * - **Keyboard Navigation**: Tab key to accept suggestions\n * - **Context Analysis**: Uses surrounding text for better suggestions\n * - **Auto-Sizing**: Inherits all AutoSizedTextArea capabilities\n * - **Performance Optimized**: Smart caching and minimal re-renders\n *\n * ## Technical Implementation\n * - **Debounce Strategy**: 200ms delay before fetching suggestions\n * - **Context Window**: 5 lines before/after cursor for context\n * - **Minimum Trigger**: Requires 3+ characters before suggesting\n * - **Position Tracking**: Ghost layer for accurate suggestion positioning\n * - **Cursor Management**: Tracks cursor position during suggestion fetch\n *\n * ## AI Integration\n * - Uses configured AI model (OpenAI, Anthropic, etc.)\n * - Sends context-aware prompts for relevant suggestions\n * - Respects temperature and model settings from configuration\n * - Handles API errors gracefully without interrupting user flow\n *\n * ## Use Cases\n * - **Content Creation**: Blog posts, articles, documentation\n * - **Code Comments**: Intelligent code documentation assistance\n * - **Email Composition**: Professional email writing assistance\n * - **Creative Writing**: Story and narrative completion\n * - **Technical Documentation**: API docs, README files\n * - **Social Media**: Post creation with engagement optimization\n *\n * @example\n * ```tsx\n * // Blog writing assistant\n * const [blogPost, setBlogPost] = useState('');\n * const [isAiEnabled, setIsAiEnabled] = useState(true);\n *\n * <div className=\"space-y-4\">\n *   <div className=\"flex items-center gap-2\">\n *     <Switch\n *       checked={isAiEnabled}\n *       onChange={setIsAiEnabled}\n *     />\n *     <label>AI Writing Assistant</label>\n *   </div>\n *\n *   <AutoCompleteTextarea\n *     value={blogPost}\n *     onChange={(e) => setBlogPost(e.target.value)}\n *     placeholder=\"Start writing your blog post...\"\n *     isActive={isAiEnabled}\n *     autoSize={true}\n *     maxRows={15}\n *     className=\"min-h-[200px] font-serif text-lg leading-relaxed\"\n *   />\n * </div>\n *\n * // Code documentation assistant\n * <AutoCompleteTextarea\n *   value={docComment}\n *   onChange={handleDocChange}\n *   placeholder=\"/** Describe this function... *\\/\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={8}\n *   className=\"font-mono text-sm\"\n * />\n *\n * // Email composition with templates\n * <AutoCompleteTextarea\n *   defaultValue=\"Dear \"\n *   placeholder=\"AI will help complete your email...\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={12}\n *   variant={InputVariant.DEFAULT}\n * />\n * ```\n *\n * ## Accessibility\n * - Ghost layer is properly hidden from screen readers\n * - Maintains focus management during suggestion acceptance\n * - Preserves keyboard navigation patterns\n * - Respects reduced motion preferences\n */\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const { mutate: autocomplete } = useAutocomplete();\n  const configuration = useConfiguration();\n  const [isTyped, setIsTyped] = useState(false);\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const placeholderRef = useRef<HTMLSpanElement>(null);\n  const ghostLayerRef = useRef<HTMLDivElement>(null);\n  const [suggestionPosition, setSuggestionPosition] = useState<{\n    left: number;\n    top: number;\n  } | null>(null);\n  const [cursorAtFetch, setCursorAtFetch] = useState(-1);\n\n  // Only update this “debouncedText” after the user stops typing for 200ms\n  const debouncedText = useDebounce(text, 200);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(defaultValue);\n  }, [props.value, props.defaultValue]);\n\n  useEffect(() => {\n    if (!isActive) return;\n    if (!isTyped) return;\n\n    const fetchSuggestion = async () => {\n      try {\n        const cursor =\n          textareaRef.current?.selectionStart ?? debouncedText.length;\n        const before = debouncedText.slice(0, cursor);\n        const after = debouncedText.slice(cursor);\n        const numLines = 5;\n        const beforeLines = before.split('\\n');\n        const contextBeforeLines = beforeLines.slice(\n          Math.max(0, beforeLines.length - numLines - 1),\n          -1\n        );\n        const contextBefore = contextBeforeLines.join('\\n');\n        const currentLine = beforeLines[beforeLines.length - 1] ?? '';\n        const afterLines = after.split('\\n');\n        const contextAfter = afterLines.slice(1, numLines + 1).join('\\n');\n\n        autocomplete(\n          {\n            text: before,\n            contextBefore,\n            currentLine,\n            contextAfter,\n            aiOptions: {\n              apiKey: configuration.ai?.apiKey,\n              model: configuration.ai?.model,\n              temperature: configuration.ai?.temperature,\n            },\n          },\n          {\n            onSuccess: (data: AutocompleteResponse) => {\n              setSuggestion(data.data?.autocompletion ?? '');\n              setCursorAtFetch(cursor);\n            },\n          }\n        );\n      } catch (err) {\n        console.error('Autocomplete error:', err);\n      }\n    };\n\n    if (debouncedText.length > 3) {\n      // Only fetch if user typed more than 3 chars and has paused\n      setSuggestion('');\n      // TODO: Uncomment this when the autocomplete works well enough\n      // fetchSuggestion();\n    } else {\n      // If typed less than threshold, clear the suggestion\n      setSuggestion('');\n    }\n  }, [debouncedText, isActive, autocomplete, configuration]);\n\n  useEffect(() => {\n    if (\n      !suggestion ||\n      cursorAtFetch === -1 ||\n      !placeholderRef.current ||\n      !ghostLayerRef.current\n    ) {\n      setSuggestionPosition(null);\n      return;\n    }\n\n    const rect = placeholderRef.current.getBoundingClientRect();\n    const parentRect = ghostLayerRef.current.getBoundingClientRect();\n    setSuggestionPosition({\n      left: rect.left - parentRect.left,\n      top: rect.top - parentRect.top,\n    });\n  }, [suggestion, cursorAtFetch, text]);\n\n  const acceptSuggestion = () => {\n    const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;\n    if (currentCursor !== cursorAtFetch) return;\n    const newText =\n      text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);\n    setText(newText);\n    setSuggestion('');\n    setCursorAtFetch(-1);\n    setTimeout(() => {\n      textareaRef.current?.focus();\n      const newCursorPos = currentCursor + suggestion.length;\n      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n    }, 0);\n  };\n\n  return (\n    <div className=\"relative w-full\">\n      <div\n        ref={ghostLayerRef}\n        className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n        aria-hidden=\"true\"\n      >\n        {suggestion && cursorAtFetch !== -1 ? (\n          <>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(0, cursorAtFetch)}\n            </span>\n            <span\n              ref={placeholderRef}\n              style={{ visibility: 'hidden' }}\n              aria-hidden=\"true\"\n            >\n              {suggestion}\n            </span>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(cursorAtFetch)}\n            </span>\n          </>\n        ) : (\n          <span className=\"align-text-top text-transparent\">{text}</span>\n        )}\n        {suggestionProp && (\n          <span className=\"align-text-top text-neutral\">{suggestionProp}</span>\n        )}\n      </div>\n      {suggestion && suggestionPosition && (\n        <div\n          className=\"pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]\"\n          style={{\n            position: 'absolute',\n            left: suggestionPosition.left,\n            top: suggestionPosition.top,\n          }}\n        >\n          {suggestion}\n        </div>\n      )}\n      <AutoSizedTextArea\n        {...props}\n        ref={textareaRef}\n        value={text}\n        onChange={(e) => {\n          setIsTyped(true);\n          setText(e.target.value);\n          setSuggestion('');\n          props.onChange?.(e);\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Tab' && suggestion) {\n            e.preventDefault();\n            acceptSuggestion();\n          }\n          props.onKeyDown?.(e);\n        }}\n        onSelect={(e) => {\n          if (\n            suggestion &&\n            (e.target as HTMLTextAreaElement).selectionStart !== cursorAtFetch\n          ) {\n            setSuggestion('');\n            setCursorAtFetch(-1);\n          }\n          props.onSelect?.(e);\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/TextArea/TextArea.mjs

@@ -1,59 +1,2 @@
-import { cn } from "../../utils/cn.mjs";
-import { inputVariants } from "../Input/Input.mjs";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/TextArea/TextArea.tsx
-/**
-* TextArea Component
-*
-* A flexible textarea component that extends the standard HTML textarea with
-* design system styling variants, validation states, and consistent visual appearance.
-*
-* ## Features
-* - **Variant Support**: Multiple visual states (default, error, success, warning)
-* - **Validation Styling**: Optional validation feedback styling
-* - **Resize Control**: Disabled by default for consistent layout
-* - **Design System Integration**: Uses shared input variants for consistency
-* - **Accessibility**: Maintains all standard textarea accessibility features
-*
-* ## Use Cases
-* - Multi-line text input forms
-* - Comment and message composition
-* - Description and content fields
-* - Feedback and review forms
-* - Code snippet input (when combined with monospace styling)
-*
-* @example
-* ```tsx
-* // Basic textarea
-* <TextArea
-*   placeholder="Enter your thoughts..."
-*   rows={4}
-* />
-*
-* // Controlled with validation
-* const [content, setContent] = useState('');
-* const hasError = content.length < 10;
-*
-* <TextArea
-*   value={content}
-*   onChange={(e) => setContent(e.target.value)}
-*   variant={hasError ? InputVariant.ERROR : InputVariant.SUCCESS}
-*   validationStyleEnabled={true}
-*   placeholder="Minimum 10 characters required"
-*   className="min-h-[100px]"
-* />
-* ```
-*/
-const TextArea = ({ className, variant, validationStyleEnabled = false, ...props }) => /* @__PURE__ */ jsx("textarea", {
-	className: cn("resize-none", inputVariants({
-		variant,
-		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled",
-		className
-	})),
-	...props
-});
-
-//#endregion
-export { TextArea };
+import{cn as e}from"../../utils/cn.mjs";import{inputVariants as t}from"../Input/Input.mjs";import{jsx as n}from"react/jsx-runtime";const r=({className:r,variant:i,validationStyleEnabled:a=!1,...o})=>n(`textarea`,{className:e(`resize-none`,t({variant:i,validationStyleEnabled:a?`enabled`:`disabled`,className:r})),...o});export{r as TextArea};
 //# sourceMappingURL=TextArea.mjs.map

package/dist/esm/components/TextArea/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';\nimport { type InputVariant, inputVariants } from '../Input';\n\n/**\n * Props for the TextArea component.\n *\n * Extends standard HTML textarea attributes with additional design system variants\n * and validation styling options.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextArea placeholder=\"Enter your message...\" />\n *\n * // With error validation styling\n * <TextArea\n *   value={message}\n *   onChange={handleChange}\n *   variant={InputVariant.ERROR}\n *   validationStyleEnabled={true}\n *   placeholder=\"Message is required\"\n * />\n *\n * // Large multiline input\n * <TextArea\n *   rows={6}\n *   cols={50}\n *   variant={InputVariant.DEFAULT}\n *   className=\"min-h-[120px]\"\n *   placeholder=\"Write a detailed description...\"\n * />\n * ```\n */\nexport type TextAreaProps = DetailedHTMLProps<\n  DetailedHTMLProps<\n    TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HTMLTextAreaElement\n  >,\n  HTMLTextAreaElement\n> & {\n  /** Enable validation styling based on the variant prop */\n  validationStyleEnabled?: boolean;\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant'\n  > & {\n    /** Visual variant of the textarea (default, success, error, warning, etc.) */\n    variant?: InputVariant | `${InputVariant}`;\n  };\n\n/**\n * TextArea Component\n *\n * A flexible textarea component that extends the standard HTML textarea with\n * design system styling variants, validation states, and consistent visual appearance.\n *\n * ## Features\n * - **Variant Support**: Multiple visual states (default, error, success, warning)\n * - **Validation Styling**: Optional validation feedback styling\n * - **Resize Control**: Disabled by default for consistent layout\n * - **Design System Integration**: Uses shared input variants for consistency\n * - **Accessibility**: Maintains all standard textarea accessibility features\n *\n * ## Use Cases\n * - Multi-line text input forms\n * - Comment and message composition\n * - Description and content fields\n * - Feedback and review forms\n * - Code snippet input (when combined with monospace styling)\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea\n *   placeholder=\"Enter your thoughts...\"\n *   rows={4}\n * />\n *\n * // Controlled with validation\n * const [content, setContent] = useState('');\n * const hasError = content.length < 10;\n *\n * <TextArea\n *   value={content}\n *   onChange={(e) => setContent(e.target.value)}\n *   variant={hasError ? InputVariant.ERROR : InputVariant.SUCCESS}\n *   validationStyleEnabled={true}\n *   placeholder=\"Minimum 10 characters required\"\n *   className=\"min-h-[100px]\"\n * />\n * ```\n */\nexport const TextArea: FC<TextAreaProps> = ({\n  className,\n  variant,\n  validationStyleEnabled = false,\n  ...props\n}) => (\n  <textarea\n    className={cn(\n      'resize-none',\n      inputVariants({\n        variant,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })\n    )}\n    {...props}\n  />\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAa,YAA+B,EAC1C,WACA,SACA,yBAAyB,OACzB,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,eACA,cAAc;EACZ;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;EACD,CAAC,CACH;CACD,GAAI;EACJ"}
+{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';\nimport { type InputVariant, inputVariants } from '../Input';\n\n/**\n * Props for the TextArea component.\n *\n * Extends standard HTML textarea attributes with additional design system variants\n * and validation styling options.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextArea placeholder=\"Enter your message...\" />\n *\n * // With error validation styling\n * <TextArea\n *   value={message}\n *   onChange={handleChange}\n *   variant={InputVariant.ERROR}\n *   validationStyleEnabled={true}\n *   placeholder=\"Message is required\"\n * />\n *\n * // Large multiline input\n * <TextArea\n *   rows={6}\n *   cols={50}\n *   variant={InputVariant.DEFAULT}\n *   className=\"min-h-[120px]\"\n *   placeholder=\"Write a detailed description...\"\n * />\n * ```\n */\nexport type TextAreaProps = DetailedHTMLProps<\n  DetailedHTMLProps<\n    TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HTMLTextAreaElement\n  >,\n  HTMLTextAreaElement\n> & {\n  /** Enable validation styling based on the variant prop */\n  validationStyleEnabled?: boolean;\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant'\n  > & {\n    /** Visual variant of the textarea (default, success, error, warning, etc.) */\n    variant?: InputVariant | `${InputVariant}`;\n  };\n\n/**\n * TextArea Component\n *\n * A flexible textarea component that extends the standard HTML textarea with\n * design system styling variants, validation states, and consistent visual appearance.\n *\n * ## Features\n * - **Variant Support**: Multiple visual states (default, error, success, warning)\n * - **Validation Styling**: Optional validation feedback styling\n * - **Resize Control**: Disabled by default for consistent layout\n * - **Design System Integration**: Uses shared input variants for consistency\n * - **Accessibility**: Maintains all standard textarea accessibility features\n *\n * ## Use Cases\n * - Multi-line text input forms\n * - Comment and message composition\n * - Description and content fields\n * - Feedback and review forms\n * - Code snippet input (when combined with monospace styling)\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea\n *   placeholder=\"Enter your thoughts...\"\n *   rows={4}\n * />\n *\n * // Controlled with validation\n * const [content, setContent] = useState('');\n * const hasError = content.length < 10;\n *\n * <TextArea\n *   value={content}\n *   onChange={(e) => setContent(e.target.value)}\n *   variant={hasError ? InputVariant.ERROR : InputVariant.SUCCESS}\n *   validationStyleEnabled={true}\n *   placeholder=\"Minimum 10 characters required\"\n *   className=\"min-h-[100px]\"\n * />\n * ```\n */\nexport const TextArea: FC<TextAreaProps> = ({\n  className,\n  variant,\n  validationStyleEnabled = false,\n  ...props\n}) => (\n  <textarea\n    className={cn(\n      'resize-none',\n      inputVariants({\n        variant,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })\n    )}\n    {...props}\n  />\n);\n"],"mappings":"mIA8FA,MAAa,GAA+B,CAC1C,YACA,UACA,yBAAyB,GACzB,GAAG,KAEH,EAAC,WAAA,CACC,UAAW,EACT,cACA,EAAc,CACZ,UACA,uBAAwB,EAAyB,UAAY,WAC7D,YACD,CAAC,CACH,CACD,GAAI,GACJ"}

package/dist/esm/components/TextArea/index.mjs

@@ -1,5 +1 @@
-import { TextArea } from "./TextArea.mjs";
-import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
-import { AutoCompleteTextarea, useDebounce } from "./AutocompleteTextArea.mjs";
-
-export { AutoCompleteTextarea, AutoSizedTextArea, TextArea, useDebounce };
+import{TextArea as e}from"./TextArea.mjs";import{AutoSizedTextArea as t}from"./AutoSizeTextArea.mjs";import{AutoCompleteTextarea as n,useDebounce as r}from"./AutocompleteTextArea.mjs";export{n as AutoCompleteTextarea,t as AutoSizedTextArea,e as TextArea,r as useDebounce};