@intlayer/design-system 6.1.5 → 6.1.6-canary.0

package/dist/components/Tag/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport enum TagRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  XXL = '2xl',\n  XXXL = '3xl',\n  FULL = 'full',\n}\n\nexport enum TagColor {\n  SUCCESS = 'success',\n  ERROR = 'error',\n  WARNING = 'warning',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n}\n\nexport enum TagSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\nexport enum TagBorder {\n  NONE = 'none',\n  WITH = 'with',\n}\n\nexport enum TagBackground {\n  NONE = 'none',\n  WITH = 'with',\n}\n\nconst containerVariants = cva('backdrop-blur w-fit', {\n  variants: {\n    roundedSize: {\n      [`${TagRoundedSize.NONE}`]: 'rounded-none',\n      [`${TagRoundedSize.SM}`]: 'rounded-sm',\n      [`${TagRoundedSize.MD}`]: 'rounded-md',\n      [`${TagRoundedSize.LG}`]: 'rounded-lg',\n      [`${TagRoundedSize.XL}`]: 'rounded-xl',\n      [`${TagRoundedSize.XXL}`]: 'rounded-2xl',\n      [`${TagRoundedSize.XXXL}`]: 'rounded-3xl',\n      [`${TagRoundedSize.FULL}`]: 'rounded-full',\n    },\n    color: {\n      [`${TagColor.SUCCESS}`]: 'bg-success/10 border-success text-success ',\n      [`${TagColor.ERROR}`]: 'bg-error/10 border-error text-error',\n      [`${TagColor.WARNING}`]: 'bg-warning/10 border-warning text-warning',\n      [`${TagColor.NEUTRAL}`]: 'bg-neutral/10 /10 border-neutral text-neutral ',\n      [`${TagColor.TEXT}`]: 'bg-text/10  border-text  text-text',\n    },\n    size: {\n      [`${TagSize.XS}`]: 'py-0.5 px-2 text-xs border-[1.2px]',\n      [`${TagSize.SM}`]: 'py-0.5 px-2 text-sm border-[1.5px]',\n      [`${TagSize.MD}`]: 'py-1 px-2 text-base border-2',\n      [`${TagSize.LG}`]: 'py-2 px-3 text-lg border-2',\n      [`${TagSize.XL}`]: 'py-4 px-5 text-xl border-2',\n    },\n    border: {\n      [`${TagBorder.NONE}`]: 'border-none',\n      [`${TagBorder.WITH}`]: 'border-text  border-[1.5px]',\n    },\n    background: {\n      [`${TagBackground.NONE}`]: 'bg-none',\n      [`${TagBackground.WITH}`]: '',\n    },\n  },\n\n  defaultVariants: {\n    roundedSize: TagRoundedSize.FULL,\n    border: TagBorder.NONE,\n    color: TagColor.TEXT,\n    size: TagSize.MD,\n  },\n});\n\nexport const Tag: FC<TagProps> = ({\n  children,\n  color,\n  roundedSize,\n  size,\n  border,\n  background,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={containerVariants({\n        color,\n        roundedSize,\n        size,\n        border,\n        background,\n        className,\n      })}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TagRoundedSize","TagColor","TagSize","TagBorder","TagBackground"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/**\n * Properties for the Tag component extending HTML div attributes and variant options\n *\n * @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n *\n * @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property {string} [className] - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n *\n * // Success tag with border\n * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>\n *   Success Status\n * </Tag>\n *\n * // Large warning tag\n * <Tag color={TagColor.WARNING} size={TagSize.LG}>\n *   Important Warning\n * </Tag>\n * ```\n */\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n  HTMLAttributes<HTMLDivElement>;\n\n/**\n * Enumeration for tag border radius sizes\n *\n * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n *\n * @enum {string} TagRoundedSize\n * @property {string} NONE - 'none' - No border radius (sharp corners)\n * @property {string} SM - 'sm' - Small border radius (2px)\n * @property {string} MD - 'md' - Medium border radius (6px)\n * @property {string} LG - 'lg' - Large border radius (8px)\n * @property {string} XL - 'xl' - Extra large border radius (12px)\n * @property {string} XXL - '2xl' - 2x large border radius (16px)\n * @property {string} XXXL - '3xl' - 3x large border radius (24px)\n * @property {string} FULL - 'full' - Fully rounded (50% border radius, pill shape)\n *\n * @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>\n *\n * // Pill-shaped tag\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>\n *\n * // Medium rounded corners\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>\n * ```\n */\nexport enum TagRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  XXL = '2xl',\n  XXXL = '3xl',\n  FULL = 'full',\n}\n\n/**\n * Enumeration for tag color themes\n *\n * Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n *\n * @enum {string} TagColor\n * @property {string} SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property {string} ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property {string} WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property {string} NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property {string} TEXT - 'text' - Default text color theme for general purpose tags\n *\n * @example\n * ```tsx\n * // Status indicators\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>Pending</Tag>\n *\n * // Category tags\n * <Tag color={TagColor.NEUTRAL}>Category</Tag>\n * <Tag color={TagColor.TEXT}>General</Tag>\n * ```\n */\nexport enum TagColor {\n  SUCCESS = 'success',\n  ERROR = 'error',\n  WARNING = 'warning',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n}\n\n/**\n * Enumeration for tag size variants\n *\n * Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n *\n * @enum {string} TagSize\n * @property {string} XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property {string} SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property {string} MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property {string} LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property {string} XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n *\n * @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size={TagSize.XS}>Small detail</Tag>\n * <Tag size={TagSize.SM}>Minor category</Tag>\n * <Tag size={TagSize.MD}>Standard tag</Tag>\n * <Tag size={TagSize.LG}>Important label</Tag>\n * <Tag size={TagSize.XL}>Hero tag</Tag>\n * ```\n */\nexport enum TagSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/**\n * Enumeration for tag border visibility\n *\n * Controls whether a border is displayed around the tag.\n *\n * @enum {string} TagBorder\n * @property {string} NONE - 'none' - No border (default)\n * @property {string} WITH - 'with' - Show border with 1.5px thickness\n *\n * @example\n * ```tsx\n * <Tag border={TagBorder.NONE}>Borderless</Tag>\n * <Tag border={TagBorder.WITH}>With Border</Tag>\n * ```\n */\nexport enum TagBorder {\n  NONE = 'none',\n  WITH = 'with',\n}\n\n/**\n * Enumeration for tag background visibility\n *\n * Controls the background styling of the tag.\n *\n * @enum {string} TagBackground\n * @property {string} NONE - 'none' - No background styling\n * @property {string} WITH - 'with' - Apply background styling\n *\n * @example\n * ```tsx\n * <Tag background={TagBackground.NONE}>No Background</Tag>\n * <Tag background={TagBackground.WITH}>With Background</Tag>\n * ```\n */\nexport enum TagBackground {\n  NONE = 'none',\n  WITH = 'with',\n}\n\nconst containerVariants = cva('backdrop-blur w-fit', {\n  variants: {\n    roundedSize: {\n      [`${TagRoundedSize.NONE}`]: 'rounded-none',\n      [`${TagRoundedSize.SM}`]: 'rounded-sm',\n      [`${TagRoundedSize.MD}`]: 'rounded-md',\n      [`${TagRoundedSize.LG}`]: 'rounded-lg',\n      [`${TagRoundedSize.XL}`]: 'rounded-xl',\n      [`${TagRoundedSize.XXL}`]: 'rounded-2xl',\n      [`${TagRoundedSize.XXXL}`]: 'rounded-3xl',\n      [`${TagRoundedSize.FULL}`]: 'rounded-full',\n    },\n    color: {\n      [`${TagColor.SUCCESS}`]: 'bg-success/10 border-success text-success ',\n      [`${TagColor.ERROR}`]: 'bg-error/10 border-error text-error',\n      [`${TagColor.WARNING}`]: 'bg-warning/10 border-warning text-warning',\n      [`${TagColor.NEUTRAL}`]: 'bg-neutral/10 /10 border-neutral text-neutral ',\n      [`${TagColor.TEXT}`]: 'bg-text/10  border-text  text-text',\n    },\n    size: {\n      [`${TagSize.XS}`]: 'py-0.5 px-2 text-xs border-[1.2px]',\n      [`${TagSize.SM}`]: 'py-0.5 px-2 text-sm border-[1.5px]',\n      [`${TagSize.MD}`]: 'py-1 px-2 text-base border-2',\n      [`${TagSize.LG}`]: 'py-2 px-3 text-lg border-2',\n      [`${TagSize.XL}`]: 'py-4 px-5 text-xl border-2',\n    },\n    border: {\n      [`${TagBorder.NONE}`]: 'border-none',\n      [`${TagBorder.WITH}`]: 'border-text  border-[1.5px]',\n    },\n    background: {\n      [`${TagBackground.NONE}`]: 'bg-none',\n      [`${TagBackground.WITH}`]: '',\n    },\n  },\n\n  defaultVariants: {\n    roundedSize: TagRoundedSize.FULL,\n    border: TagBorder.NONE,\n    color: TagColor.TEXT,\n    size: TagSize.MD,\n  },\n});\n\n/**\n * Tag component for displaying labels, categories, status indicators, and badges\n *\n * The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n *\n * ## Features\n * - **Semantic Colors**: Success, error, warning, neutral, and text color themes\n * - **Flexible Sizing**: Five size variants from extra small to extra large\n * - **Border Radius Options**: Eight rounding options from none to fully rounded\n * - **Border Control**: Optional borders for enhanced visual separation\n * - **Background Control**: Configurable background styling\n * - **Accessibility**: Proper HTML semantics and keyboard navigation support\n *\n * ## Use Cases\n * - **Status Indicators**: Show completion, error, or pending states\n * - **Category Labels**: Organize and categorize content\n * - **Badges**: Display counts, notifications, or achievements\n * - **Keywords**: Tag content with relevant keywords or topics\n * - **Metadata**: Show additional information like dates, authors, or types\n *\n * ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n *\n * @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n *\n * @example\n * ```tsx\n * // Basic status tags\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>In Progress</Tag>\n *\n * // Category tags with borders\n * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>\n *   Technology\n * </Tag>\n * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>\n *   Design\n * </Tag>\n *\n * // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n *   <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>\n *   <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>\n *   <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>\n * </div>\n *\n * // Rounded variations\n * <div className=\"flex gap-2\">\n *   <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>\n *   <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>\n *   <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>\n * </div>\n *\n * // Custom styled tag\n * <Tag\n *   color={TagColor.WARNING}\n *   size={TagSize.LG}\n *   border={TagBorder.WITH}\n *   roundedSize={TagRoundedSize.LG}\n *   className=\"font-bold uppercase tracking-wide\"\n * >\n *   Custom Style\n * </Tag>\n *\n * // Interactive tags with click handlers\n * <Tag\n *   color={TagColor.SUCCESS}\n *   onClick={() => console.log('Tag clicked')}\n *   className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n *   Clickable Tag\n * </Tag>\n * ```\n *\n * @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n  children,\n  color,\n  roundedSize,\n  size,\n  border,\n  background,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={containerVariants({\n        color,\n        roundedSize,\n        size,\n        border,\n        background,\n        className,\n      })}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TagRoundedSize","TagColor","TagSize","TagBorder","TagBackground"],"mappings":"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"}

package/dist/components/TextArea/AutoSizeTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextArea.cjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  autoSize?: boolean;\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\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 =\n      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(\n        'overflow-y-auto',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":["useRef","useImperativeHandle","useEffect","jsx","TextArea","cn"],"mappings":";;;;;;;AAiBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,cAAcA,aAAAA,OAAmC,IAAI;AAE3DC,eAAAA,oBAAoB,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,eAAe,MAAM;AACzB,UAAM,aAAa,YAAY;AAE/B,QAAI,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAChC,UAAM,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGhC,kBAAc,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAC7D;AAEAC,eAAAA,UAAU,MAAM;AACd,iBAAA;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAElD,QAAM,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACZ,iBAAA;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,OAAmC;AACjD,gBAAY,UAAU;AACtB,QAAI,IAAI;AACN,mBAAA;AAAA,IACF;AAAA,EACF;AAEA,SACEC,2BAAAA;AAAAA,IAACC,6BAAAA;AAAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;"}
+{"version":3,"file":"AutoSizeTextArea.cjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } 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 =\n      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(\n        'overflow-y-auto',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":["useRef","useImperativeHandle","useEffect","jsx","TextArea","cn"],"mappings":";;;;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;AA4Dd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,cAAcA,aAAAA,OAAmC,IAAI;AAE3DC,eAAAA,oBAAoB,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,eAAe,MAAM;AACzB,UAAM,aAAa,YAAY;AAE/B,QAAI,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAChC,UAAM,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGhC,kBAAc,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAC7D;AAEAC,eAAAA,UAAU,MAAM;AACd,iBAAA;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAElD,QAAM,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACZ,iBAAA;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,OAAmC;AACjD,gBAAY,UAAU;AACtB,QAAI,IAAI;AACN,mBAAA;AAAA,IACF;AAAA,EACF;AAEA,SACEC,2BAAAA;AAAAA,IAACC,6BAAAA;AAAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;"}

package/dist/components/TextArea/AutoSizeTextArea.d.ts

@@ -1,8 +1,99 @@
 import { FC } from 'react';
 import { TextAreaProps } from './TextArea';
+/**
+ * Props for the AutoSizedTextArea component.
+ *
+ * Extends TextAreaProps with auto-sizing functionality and row limitations.
+ *
+ * @example
+ * ```tsx
+ * // Auto-sizing textarea that grows with content
+ * <AutoSizedTextArea
+ *   placeholder="Start typing and watch it grow..."
+ *   autoSize={true}
+ *   maxRows={10}
+ * />
+ *
+ * // Limited height with scroll when exceeded
+ * <AutoSizedTextArea
+ *   value={longText}
+ *   onChange={handleChange}
+ *   autoSize={true}
+ *   maxRows={5}
+ *   className="max-h-[120px]"
+ * />
+ *
+ * // Disable auto-sizing for fixed height
+ * <AutoSizedTextArea
+ *   autoSize={false}
+ *   rows={3}
+ *   placeholder="Fixed height textarea"
+ * />
+ * ```
+ */
 export type AutoSizedTextAreaProps = TextAreaProps & {
+    /** Whether to automatically adjust height based on content */
     autoSize?: boolean;
+    /** Maximum number of rows before scrolling is enabled */
     maxRows?: number;
 };
+/**
+ * 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}
+ * />
+ * ```
+ */
 export declare const AutoSizedTextArea: FC<AutoSizedTextAreaProps>;
 //# sourceMappingURL=AutoSizeTextArea.d.ts.map

package/dist/components/TextArea/AutoSizeTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,aAAa,EAAY,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,sBAAsB,GAAG,aAAa,GAAG;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA0DxD,CAAC"}
+{"version":3,"file":"AutoSizeTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,aAAa,EAAY,MAAM,YAAY,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,MAAM,sBAAsB,GAAG,aAAa,GAAG;IACnD,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA0DxD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextArea.mjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  autoSize?: boolean;\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\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 =\n      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(\n        'overflow-y-auto',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,cAAc,OAAmC,IAAI;AAE3D,sBAAoB,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,eAAe,MAAM;AACzB,UAAM,aAAa,YAAY;AAE/B,QAAI,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAChC,UAAM,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGhC,kBAAc,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAC7D;AAEA,YAAU,MAAM;AACd,iBAAA;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAElD,QAAM,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACZ,iBAAA;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,OAAmC;AACjD,gBAAY,UAAU;AACtB,QAAI,IAAI;AACN,mBAAA;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"AutoSizeTextArea.mjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } 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 =\n      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(\n        'overflow-y-auto',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;AA4Dd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,cAAc,OAAmC,IAAI;AAE3D,sBAAoB,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,eAAe,MAAM;AACzB,UAAM,aAAa,YAAY;AAE/B,QAAI,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAChC,UAAM,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGhC,kBAAc,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAC7D;AAEA,YAAU,MAAM;AACd,iBAAA;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAElD,QAAM,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACZ,iBAAA;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,OAAmC;AACjD,gBAAY,UAAU;AACtB,QAAI,IAAI;AACN,mBAAA;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/TextArea/AutocompleteTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteTextArea.cjs","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useAutocomplete } from '../../hooks/reactQuery';\nimport {\n  type AutoSizedTextAreaProps,\n  AutoSizedTextArea,\n} from './AutoSizeTextArea';\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\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  isActive?: boolean;\n  suggestion?: string;\n};\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      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=\"text-neutral align-text-top\">{suggestionProp}</span>\n        )}\n      </div>\n      {suggestion && suggestionPosition && (\n        <div\n          className=\"pointer-events-none text-neutral whitespace-pre-wrap break-words text-base 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"],"names":["useState","useEffect","useAutocomplete","useConfiguration","useRef","jsxs","Fragment","jsx","AutoSizedTextArea"],"mappings":"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"}
+{"version":3,"file":"AutocompleteTextArea.cjs","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useAutocomplete } from '../../hooks/reactQuery';\nimport {\n  type AutoSizedTextAreaProps,\n  AutoSizedTextArea,\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      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=\"text-neutral align-text-top\">{suggestionProp}</span>\n        )}\n      </div>\n      {suggestion && suggestionPosition && (\n        <div\n          className=\"pointer-events-none text-neutral whitespace-pre-wrap break-words text-base 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"],"names":["useState","useEffect","useAutocomplete","useConfiguration","useRef","jsxs","Fragment","jsx","AutoSizedTextArea"],"mappings":";;;;;;;;AAiCO,MAAM,cAAc,CAAK,OAAU,UAAqB;AAC7D,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,aAAAA,SAAY,KAAK;AAE7DC,eAAAA,UAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM;AAC7B,wBAAkB,KAAK;AAAA,IACzB,GAAG,KAAK;AAGR,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,SAAO;AACT;AAkIO,MAAM,uBAAsD,CAAC;AAAA,EAClE,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,QAAM,eAAe,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACnE,QAAM,EAAE,QAAQ,aAAA,IAAiBC,iCAAA;AACjC,QAAM,gBAAgBC,YAAAA,iBAAA;AACtB,QAAM,CAAC,SAAS,UAAU,IAAIH,aAAAA,SAAS,KAAK;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAIA,aAAAA,SAAS,YAAY;AAC7C,QAAM,CAAC,YAAY,aAAa,IAAIA,aAAAA,SAAS,EAAE;AAC/C,QAAM,cAAcI,aAAAA,OAA4B,IAAI;AACpD,QAAM,iBAAiBA,aAAAA,OAAwB,IAAI;AACnD,QAAM,gBAAgBA,aAAAA,OAAuB,IAAI;AACjD,QAAM,CAAC,oBAAoB,qBAAqB,IAAIJ,aAAAA,SAG1C,IAAI;AACd,QAAM,CAAC,eAAe,gBAAgB,IAAIA,aAAAA,SAAS,EAAE;AAGrD,QAAM,gBAAgB,YAAY,MAAM,GAAG;AAE3CC,eAAAA,UAAU,MAAM;AACd,QAAI,OAAO,MAAM,UAAU,YAAa;AACxC,YAAQ,YAAY;AAAA,EACtB,GAAG,CAAC,MAAM,OAAO,MAAM,YAAY,CAAC;AAEpCA,eAAAA,UAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,QAAI,CAAC,QAAS;AAEd,UAAM,kBAAkB,YAAY;AAClC,UAAI;AACF,cAAM,SACJ,YAAY,SAAS,kBAAkB,cAAc;AACvD,cAAM,SAAS,cAAc,MAAM,GAAG,MAAM;AAC5C,cAAM,QAAQ,cAAc,MAAM,MAAM;AACxC,cAAM,WAAW;AACjB,cAAM,cAAc,OAAO,MAAM,IAAI;AACrC,cAAM,qBAAqB,YAAY;AAAA,UACrC,KAAK,IAAI,GAAG,YAAY,SAAS,WAAW,CAAC;AAAA,UAC7C;AAAA,QAAA;AAEF,cAAM,gBAAgB,mBAAmB,KAAK,IAAI;AAClD,cAAM,cAAc,YAAY,YAAY,SAAS,CAAC,KAAK;AAC3D,cAAM,aAAa,MAAM,MAAM,IAAI;AACnC,cAAM,eAAe,WAAW,MAAM,GAAG,WAAW,CAAC,EAAE,KAAK,IAAI;AAEhE;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,QAAQ,cAAc,IAAI;AAAA,cAC1B,OAAO,cAAc,IAAI;AAAA,cACzB,aAAa,cAAc,IAAI;AAAA,YAAA;AAAA,UACjC;AAAA,UAEF;AAAA,YACE,WAAW,CAAC,SAA+B;AACzC,4BAAc,KAAK,MAAM,kBAAkB,EAAE;AAC7C,+BAAiB,MAAM;AAAA,YACzB;AAAA,UAAA;AAAA,QACF;AAAA,MAEJ,SAAS,KAAK;AACZ,gBAAQ,MAAM,uBAAuB,GAAG;AAAA,MAC1C;AAAA,IACF;AAEA,QAAI,cAAc,SAAS,GAAG;AAE5B,oBAAc,EAAE;AAChB,sBAAA;AAAA,IACF,OAAO;AAEL,oBAAc,EAAE;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,eAAe,UAAU,cAAc,aAAa,CAAC;AAEzDA,eAAAA,UAAU,MAAM;AACd,QACE,CAAC,cACD,kBAAkB,MAClB,CAAC,eAAe,WAChB,CAAC,cAAc,SACf;AACA,4BAAsB,IAAI;AAC1B;AAAA,IACF;AAEA,UAAM,OAAO,eAAe,QAAQ,sBAAA;AACpC,UAAM,aAAa,cAAc,QAAQ,sBAAA;AACzC,0BAAsB;AAAA,MACpB,MAAM,KAAK,OAAO,WAAW;AAAA,MAC7B,KAAK,KAAK,MAAM,WAAW;AAAA,IAAA,CAC5B;AAAA,EACH,GAAG,CAAC,YAAY,eAAe,IAAI,CAAC;AAEpC,QAAM,mBAAmB,MAAM;AAC7B,UAAM,gBAAgB,YAAY,SAAS,kBAAkB;AAC7D,QAAI,kBAAkB,cAAe;AACrC,UAAM,UACJ,KAAK,MAAM,GAAG,aAAa,IAAI,aAAa,KAAK,MAAM,aAAa;AACtE,YAAQ,OAAO;AACf,kBAAc,EAAE;AAChB,qBAAiB,EAAE;AACnB,eAAW,MAAM;AACf,kBAAY,SAAS,MAAA;AACrB,YAAM,eAAe,gBAAgB,WAAW;AAChD,kBAAY,SAAS,kBAAkB,cAAc,YAAY;AAAA,IACnE,GAAG,CAAC;AAAA,EACN;AAEA,SACEI,2BAAAA,KAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,IAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,eAAY;AAAA,QAEX,UAAA;AAAA,UAAA,cAAc,kBAAkB,KAC/BA,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,YAAAC,2BAAAA,IAAC,UAAK,WAAU,mCACb,eAAK,MAAM,GAAG,aAAa,GAC9B;AAAA,YACAA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK;AAAA,gBACL,OAAO,EAAE,YAAY,SAAA;AAAA,gBACrB,eAAY;AAAA,gBAEX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,2CAEF,QAAA,EAAK,WAAU,mCACb,UAAA,KAAK,MAAM,aAAa,EAAA,CAC3B;AAAA,UAAA,GACF,IAEAA,2BAAAA,IAAC,QAAA,EAAK,WAAU,mCAAmC,UAAA,MAAK;AAAA,UAEzD,kBACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,+BAA+B,UAAA,eAAA,CAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGjE,cAAc,sBACbA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAM,mBAAmB;AAAA,UACzB,KAAK,mBAAmB;AAAA,QAAA;AAAA,QAGzB,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGLA,2BAAAA;AAAAA,MAACC,qCAAAA;AAAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,qBAAW,IAAI;AACf,kBAAQ,EAAE,OAAO,KAAK;AACtB,wBAAc,EAAE;AAChB,gBAAM,WAAW,CAAC;AAAA,QACpB;AAAA,QACA,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,SAAS,YAAY;AACjC,cAAE,eAAA;AACF,6BAAA;AAAA,UACF;AACA,gBAAM,YAAY,CAAC;AAAA,QACrB;AAAA,QACA,UAAU,CAAC,MAAM;AACf,cACE,cACC,EAAE,OAA+B,mBAAmB,eACrD;AACA,0BAAc,EAAE;AAChB,6BAAiB,EAAE;AAAA,UACrB;AACA,gBAAM,WAAW,CAAC;AAAA,QACpB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;;;"}

package/dist/components/TextArea/AutocompleteTextArea.d.ts

@@ -1,9 +1,154 @@
 import { FC } from 'react';
 import { AutoSizedTextAreaProps } from './AutoSizeTextArea';
+/**
+ * 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]);
+ * ```
+ */
 export declare const useDebounce: <T>(value: T, delay: number) => T;
+/**
+ * Props for the AutocompleteTextArea component.
+ *
+ * Extends AutoSizedTextAreaProps with AI-powered autocomplete functionality.
+ *
+ * @example
+ * ```tsx
+ * // AI-powered autocomplete textarea
+ * <AutoCompleteTextarea
+ *   placeholder="Start typing for AI suggestions..."
+ *   isActive={true}
+ *   autoSize={true}
+ *   maxRows={10}
+ * />
+ *
+ * // Manual suggestion mode
+ * <AutoCompleteTextarea
+ *   value={content}
+ *   onChange={handleChange}
+ *   suggestion="Consider adding more details about..."
+ *   isActive={false}
+ * />
+ *
+ * // Disabled autocomplete for sensitive content
+ * <AutoCompleteTextarea
+ *   placeholder="Private notes (no AI assistance)"
+ *   isActive={false}
+ *   autoSize={true}
+ * />
+ * ```
+ */
 export type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {
+    /** Whether AI autocomplete is active and should fetch suggestions */
     isActive?: boolean;
+    /** Manual suggestion text to display (overrides AI suggestions) */
     suggestion?: string;
 };
+/**
+ * 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
+ */
 export declare const AutoCompleteTextarea: FC<AutocompleteTextAreaProps>;
 //# sourceMappingURL=AutocompleteTextArea.d.ts.map

package/dist/components/TextArea/AutocompleteTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,EAA+B,MAAM,OAAO,CAAC;AAE7D,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,oBAAoB,CAAC;AAE5B,eAAO,MAAM,WAAW,GAAI,CAAC,EAAG,OAAO,CAAC,EAAE,OAAO,MAAM,KAAG,CAazD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,sBAAsB,GAAG;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA6L9D,CAAC"}
+{"version":3,"file":"AutocompleteTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,EAA+B,MAAM,OAAO,CAAC;AAE7D,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,EAAG,OAAO,CAAC,EAAE,OAAO,MAAM,KAAG,CAazD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,MAAM,yBAAyB,GAAG,sBAAsB,GAAG;IAC/D,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA6L9D,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteTextArea.mjs","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useAutocomplete } from '../../hooks/reactQuery';\nimport {\n  type AutoSizedTextAreaProps,\n  AutoSizedTextArea,\n} from './AutoSizeTextArea';\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\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  isActive?: boolean;\n  suggestion?: string;\n};\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      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=\"text-neutral align-text-top\">{suggestionProp}</span>\n        )}\n      </div>\n      {suggestion && suggestionPosition && (\n        <div\n          className=\"pointer-events-none text-neutral whitespace-pre-wrap break-words text-base 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"],"names":[],"mappings":"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"}
+{"version":3,"file":"AutocompleteTextArea.mjs","sources":["../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useAutocomplete } from '../../hooks/reactQuery';\nimport {\n  type AutoSizedTextAreaProps,\n  AutoSizedTextArea,\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      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=\"text-neutral align-text-top\">{suggestionProp}</span>\n        )}\n      </div>\n      {suggestion && suggestionPosition && (\n        <div\n          className=\"pointer-events-none text-neutral whitespace-pre-wrap break-words text-base 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"],"names":[],"mappings":"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"}

package/dist/components/TextArea/TextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.cjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type TextareaHTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { InputVariant, inputVariants } from '../Input';\n\nexport type TextAreaProps = DetailedHTMLProps<\n  DetailedHTMLProps<\n    TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HTMLTextAreaElement\n  >,\n  HTMLTextAreaElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant'\n  > & {\n    variant?: InputVariant | `${InputVariant}`;\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"],"names":["jsx","cn","inputVariants"],"mappings":";;;;;;;;AAwBO,MAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACAC,qCAAc;AAAA,QACZ;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,IAEF,GAAG;AAAA,EAAA;AACN;;"}
+{"version":3,"file":"TextArea.cjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type TextareaHTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { 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"],"names":["jsx","cn","inputVariants"],"mappings":";;;;;;;;AAkGO,MAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACAC,qCAAc;AAAA,QACZ;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,IAEF,GAAG;AAAA,EAAA;AACN;;"}

package/dist/components/TextArea/TextArea.d.ts

@@ -1,10 +1,84 @@
 import { VariantProps } from 'class-variance-authority';
 import { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';
 import { InputVariant, inputVariants } from '../Input';
+/**
+ * Props for the TextArea component.
+ *
+ * Extends standard HTML textarea attributes with additional design system variants
+ * and validation styling options.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextArea placeholder="Enter your message..." />
+ *
+ * // With error validation styling
+ * <TextArea
+ *   value={message}
+ *   onChange={handleChange}
+ *   variant={InputVariant.ERROR}
+ *   validationStyleEnabled={true}
+ *   placeholder="Message is required"
+ * />
+ *
+ * // Large multiline input
+ * <TextArea
+ *   rows={6}
+ *   cols={50}
+ *   variant={InputVariant.DEFAULT}
+ *   className="min-h-[120px]"
+ *   placeholder="Write a detailed description..."
+ * />
+ * ```
+ */
 export type TextAreaProps = DetailedHTMLProps<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, HTMLTextAreaElement> & {
+    /** Enable validation styling based on the variant prop */
     validationStyleEnabled?: boolean;
 } & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled' | 'variant'> & {
+    /** Visual variant of the textarea (default, success, error, warning, etc.) */
     variant?: InputVariant | `${InputVariant}`;
 };
+/**
+ * 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]"
+ * />
+ * ```
+ */
 export declare const TextArea: FC<TextAreaProps>;
 //# sourceMappingURL=TextArea.d.ts.map

package/dist/components/TextArea/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACP,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEvD,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAC3C,iBAAiB,CACf,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,mBAAmB,CACpB,EACD,mBAAmB,CACpB,GAAG;IACF,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,GAAG,IAAI,CACJ,YAAY,CAAC,OAAO,aAAa,CAAC,EAClC,wBAAwB,GAAG,SAAS,CACrC,GAAG;IACF,OAAO,CAAC,EAAE,YAAY,GAAG,GAAG,YAAY,EAAE,CAAC;CAC5C,CAAC;AAEJ,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiBtC,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACP,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAC3C,iBAAiB,CACf,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,mBAAmB,CACpB,EACD,mBAAmB,CACpB,GAAG;IACF,0DAA0D;IAC1D,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,GAAG,IAAI,CACJ,YAAY,CAAC,OAAO,aAAa,CAAC,EAClC,wBAAwB,GAAG,SAAS,CACrC,GAAG;IACF,8EAA8E;IAC9E,OAAO,CAAC,EAAE,YAAY,GAAG,GAAG,YAAY,EAAE,CAAC;CAC5C,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiBtC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type TextareaHTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { InputVariant, inputVariants } from '../Input';\n\nexport type TextAreaProps = DetailedHTMLProps<\n  DetailedHTMLProps<\n    TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HTMLTextAreaElement\n  >,\n  HTMLTextAreaElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant'\n  > & {\n    variant?: InputVariant | `${InputVariant}`;\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"],"names":[],"mappings":";;;;;;AAwBO,MAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,cAAc;AAAA,QACZ;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,IAEF,GAAG;AAAA,EAAA;AACN;"}
+{"version":3,"file":"TextArea.mjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type TextareaHTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { 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"],"names":[],"mappings":";;;;;;AAkGO,MAAM,WAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,cAAc;AAAA,QACZ;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,IAEF,GAAG;AAAA,EAAA;AACN;"}