@intlayer/design-system 6.1.5 → 6.1.6

package/dist/components/ContentEditor/ContentEditorInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorInput.cjs","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { type InputProps, Input, InputVariant } from '../Input';\n\nexport type ContentEditorInputProps = {\n  children: InputProps['value'];\n  onContentChange: (content: InputProps['value']) => void;\n  disabled?: boolean;\n  validate?: (content: InputProps['value']) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<InputProps['value']>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={String(children)}\n    >\n      <Input\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        aria-label=\"value\"\n        variant={InputVariant.INVISIBLE}\n        className=\"size-full\"\n        defaultValue={children}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","useEffect","jsxs","jsx","Input","InputVariant","Fragment","Button","Check","ButtonVariant","ButtonColor","ButtonSize","X"],"mappings":";;;;;;;;;AAqBO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAA8B,QAAQ;AACtE,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAA8D,CAAC,MAAM;AACzE,gBAAY,EAAE,cAAc,KAAK;AAAA,EACnC;AAEAC,eAAAA,UAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EACtB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,uBAAAA;AAAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,cAAW;AAAA,YACX,SAASC,uBAAAA,aAAa;AAAA,YACtB,WAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,SAOL,YAAY,sBACZH,2BAAAA,KAAC,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YACCA,2BAAAA,KAAAI,qBAAA,EACE,UAAA;AAAA,YAAAH,2BAAAA;AAAAA,cAACI,yBAAAA;AAAAA,cAAA;AAAA,gBACC,MAAMC,YAAAA;AAAAA,gBACN,OAAM;AAAA,gBACN,SAASC,yBAAAA,cAAc;AAAA,gBACvB,OAAOC,yBAAAA,YAAY;AAAA,gBACnB,MAAMC,yBAAAA,WAAW;AAAA,gBACjB,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAEXR,2BAAAA;AAAAA,cAACI,yBAAAA;AAAAA,cAAA;AAAA,gBACC,MAAMK,YAAAA;AAAAA,gBACN,OAAM;AAAA,gBACN,SAASH,yBAAAA,cAAc;AAAA,gBACvB,MAAME,yBAAAA,WAAW;AAAA,gBACjB,OAAOD,yBAAAA,YAAY;AAAA,gBACnB,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IArCG,OAAO,QAAQ;AAAA,EAAA;AAyC1B;;"}
+{"version":3,"file":"ContentEditorInput.cjs","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { type InputProps, Input, InputVariant } from '../Input';\n\n/** Props for the ContentEditorInput component */\nexport type ContentEditorInputProps = {\n  /** The current content to display and edit */\n  children: InputProps['value'];\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: InputProps['value']) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: InputProps['value']) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\n/**\n * ContentEditorInput Component\n *\n * An inline editing component for single-line text input with validation,\n * cancel/save functionality, and support for additional action buttons.\n *\n * ## Features\n * - **Inline Input Editing**: Edit single-line content with immediate feedback\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **Accessibility**: Full ARIA support and keyboard navigation\n * - **State Management**: Handles editing states and validation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states\n * - Focus management and visual indicators\n *\n * @param children - Current input value\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional Input component props\n */\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<InputProps['value']>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter' && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force input to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={String(children)}\n      role=\"group\"\n      aria-label=\"Content editor input\"\n    >\n      <Input\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        aria-label=\"Editable input value\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-input-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        variant={InputVariant.INVISIBLE}\n        className=\"size-full\"\n        defaultValue={children}\n        disabled={disabled}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-input-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={!isValid ? 'validation-error' : undefined}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","useEffect","jsxs","jsx","Input","InputVariant","Fragment","Button","Check","ButtonVariant","ButtonColor","ButtonSize","X"],"mappings":";;;;;;;;;AAsDO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAA8B,QAAQ;AACtE,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AAEA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAA8D,CAAC,MAAM;AACzE,gBAAY,EAAE,cAAc,KAAK;AAAA,EACnC;AAEA,QAAM,gBAAgB,CAAC,MAA6C;AAClE,QAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;AAC7C,QAAE,eAAA;AACF,kBAAA;AAAA,IACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,QAAE,eAAA;AACF,mBAAA;AAAA,IACF;AAAA,EACF;AAEAC,eAAAA,UAAU,MAAM;AACd,gBAAY,QAAQ;AAEpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAEV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,uBAAAA;AAAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV,WAAW;AAAA,YAEX,cAAW;AAAA,YACX,oBACE,YAAY,oBACR,iCACA;AAAA,YAEN,gBAAc,CAAC;AAAA,YACf,SAASC,uBAAAA,aAAa;AAAA,YACtB,WAAU;AAAA,YACV,cAAc;AAAA,YACd;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,UAZC;AAAA,QAAA;AAAA,SAcL,YAAY,sBACZH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAW;AAAA,YAEV,UAAA;AAAA,cAAA,YACCA,2BAAAA,KAAAI,qBAAA,EACE,UAAA;AAAA,gBAAAH,2BAAAA;AAAAA,kBAACI,yBAAAA;AAAAA,kBAAA;AAAA,oBACC,MAAMC,YAAAA;AAAAA,oBACN,OAAO,eAAe,CAAC,UAAU,uBAAuB,EAAE;AAAA,oBAC1D,SAASC,yBAAAA,cAAc;AAAA,oBACvB,OAAOC,yBAAAA,YAAY;AAAA,oBACnB,MAAMC,yBAAAA,WAAW;AAAA,oBACjB,WAAU;AAAA,oBACV,UAAU,YAAY,CAAC;AAAA,oBACvB,SAAS;AAAA,oBACT,oBAAkB,CAAC,UAAU,qBAAqB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEpDR,2BAAAA;AAAAA,kBAACI,yBAAAA;AAAAA,kBAAA;AAAA,oBACC,MAAMK,YAAAA;AAAAA,oBACN,OAAM;AAAA,oBACN,SAASH,yBAAAA,cAAc;AAAA,oBACvB,MAAME,yBAAAA,WAAW;AAAA,oBACjB,OAAOD,yBAAAA,YAAY;AAAA,oBACnB,WAAU;AAAA,oBACV,SAAS;AAAA,oBACT;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAED;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAtDG,OAAO,QAAQ;AAAA,EAAA;AA0D1B;;"}

package/dist/components/ContentEditor/ContentEditorInput.d.ts

@@ -1,11 +1,44 @@
 import { FC, ReactNode } from 'react';
 import { InputProps } from '../Input';
+/** Props for the ContentEditorInput component */
 export type ContentEditorInputProps = {
+    /** The current content to display and edit */
     children: InputProps['value'];
+    /** Callback function called when content is saved/validated */
     onContentChange: (content: InputProps['value']) => void;
+    /** Whether the editor is disabled */
     disabled?: boolean;
+    /** Optional validation function to check content validity */
     validate?: (content: InputProps['value']) => boolean;
+    /** Additional buttons to display alongside edit actions */
     additionalButtons?: ReactNode;
 } & Omit<InputProps, 'children'>;
+/**
+ * ContentEditorInput Component
+ *
+ * An inline editing component for single-line text input with validation,
+ * cancel/save functionality, and support for additional action buttons.
+ *
+ * ## Features
+ * - **Inline Input Editing**: Edit single-line content with immediate feedback
+ * - **Validation Support**: Optional content validation with visual feedback
+ * - **Action Buttons**: Built-in save/cancel with support for additional buttons
+ * - **Keyboard Shortcuts**: Enter to save, Escape to cancel
+ * - **Accessibility**: Full ARIA support and keyboard navigation
+ * - **State Management**: Handles editing states and validation
+ *
+ * ## Accessibility
+ * - Proper ARIA labels and descriptions for all controls
+ * - Keyboard navigation (Tab, Enter, Escape)
+ * - Screen reader support for validation states
+ * - Focus management and visual indicators
+ *
+ * @param children - Current input value
+ * @param onContentChange - Callback when content is saved
+ * @param disabled - Whether the editor is disabled
+ * @param validate - Optional validation function
+ * @param additionalButtons - Extra buttons to display
+ * @param props - Additional Input component props
+ */
 export declare const ContentEditorInput: FC<ContentEditorInputProps>;
 //# sourceMappingURL=ContentEditorInput.d.ts.map

package/dist/components/ContentEditor/ContentEditorInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorInput.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,EAAE,EACP,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,UAAU,CAAC;AAEhE,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC9B,eAAe,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC;IACrD,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAEjC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA0E1D,CAAC"}
+{"version":3,"file":"ContentEditorInput.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,EAAE,EACP,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,UAAU,CAAC;AAEhE,iDAAiD;AACjD,MAAM,MAAM,uBAAuB,GAAG;IACpC,8CAA8C;IAC9C,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC9B,+DAA+D;IAC/D,eAAe,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACxD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC;IACrD,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAwG1D,CAAC"}

package/dist/components/ContentEditor/ContentEditorInput.mjs

@@ -26,57 +26,84 @@ const ContentEditorInput = ({
   const handleOnContentChange = (e) => {
     setNewValue(e.currentTarget.value);
   };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !disabled && isValid) {
+      e.preventDefault();
+      handleValid();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancel();
+    }
+  };
   useEffect(() => {
     setNewValue(children);
+    setResetIncrementor((prev) => prev + 1);
   }, [children]);
   const isValid = validate?.(newValue) ?? true;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "flex size-full flex-col items-center justify-between gap-2",
+      role: "group",
+      "aria-label": "Content editor input",
       children: [
         /* @__PURE__ */ jsx(
           Input,
           {
             onChange: handleOnContentChange,
-            "aria-label": "value",
+            onKeyDown: handleKeyDown,
+            "aria-label": "Editable input value",
+            "aria-describedby": isEdited || additionalButtons ? "content-editor-input-actions" : void 0,
+            "aria-invalid": !isValid,
             variant: InputVariant.INVISIBLE,
             className: "size-full",
             defaultValue: children,
+            disabled,
             ...props
           },
           resetIncrementor
         ),
-        (isEdited || additionalButtons) && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-end gap-2", children: [
-          isEdited && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                Icon: Check,
-                label: "Validate",
-                variant: ButtonVariant.HOVERABLE,
-                color: ButtonColor.TEXT,
-                size: ButtonSize.ICON_SM,
-                className: "cursor-pointer hover:scale-110",
-                disabled: disabled || !isValid,
-                onClick: handleValid
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                Icon: X,
-                label: "Cancel",
-                variant: ButtonVariant.HOVERABLE,
-                size: ButtonSize.ICON_SM,
-                color: ButtonColor.TEXT,
-                className: "cursor-pointer hover:scale-110",
-                onClick: handleCancel
-              }
-            )
-          ] }),
-          additionalButtons
-        ] })
+        (isEdited || additionalButtons) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: "content-editor-input-actions",
+            className: "flex w-full items-center justify-end gap-2",
+            role: "group",
+            "aria-label": "Edit actions",
+            children: [
+              isEdited && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    Icon: Check,
+                    label: `Save changes${!isValid ? " (invalid content)" : ""}`,
+                    variant: ButtonVariant.HOVERABLE,
+                    color: ButtonColor.TEXT,
+                    size: ButtonSize.ICON_SM,
+                    className: "cursor-pointer hover:scale-110",
+                    disabled: disabled || !isValid,
+                    onClick: handleValid,
+                    "aria-describedby": !isValid ? "validation-error" : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    Icon: X,
+                    label: "Cancel changes",
+                    variant: ButtonVariant.HOVERABLE,
+                    size: ButtonSize.ICON_SM,
+                    color: ButtonColor.TEXT,
+                    className: "cursor-pointer hover:scale-110",
+                    onClick: handleCancel,
+                    disabled
+                  }
+                )
+              ] }),
+              additionalButtons
+            ]
+          }
+        )
       ]
     },
     String(children)

package/dist/components/ContentEditor/ContentEditorInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorInput.mjs","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { type InputProps, Input, InputVariant } from '../Input';\n\nexport type ContentEditorInputProps = {\n  children: InputProps['value'];\n  onContentChange: (content: InputProps['value']) => void;\n  disabled?: boolean;\n  validate?: (content: InputProps['value']) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<InputProps['value']>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={String(children)}\n    >\n      <Input\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        aria-label=\"value\"\n        variant={InputVariant.INVISIBLE}\n        className=\"size-full\"\n        defaultValue={children}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAqBO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAA8B,QAAQ;AACtE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAA8D,CAAC,MAAM;AACzE,gBAAY,EAAE,cAAc,KAAK;AAAA,EACnC;AAEA,YAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EACtB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,cAAW;AAAA,YACX,SAAS,aAAa;AAAA,YACtB,WAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,SAOL,YAAY,sBACZ,qBAAC,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YACC,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAS,cAAc;AAAA,gBACvB,OAAO,YAAY;AAAA,gBACnB,MAAM,WAAW;AAAA,gBACjB,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAEX;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAS,cAAc;AAAA,gBACvB,MAAM,WAAW;AAAA,gBACjB,OAAO,YAAY;AAAA,gBACnB,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IArCG,OAAO,QAAQ;AAAA,EAAA;AAyC1B;"}
+{"version":3,"file":"ContentEditorInput.mjs","sources":["../../../src/components/ContentEditor/ContentEditorInput.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { type InputProps, Input, InputVariant } from '../Input';\n\n/** Props for the ContentEditorInput component */\nexport type ContentEditorInputProps = {\n  /** The current content to display and edit */\n  children: InputProps['value'];\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: InputProps['value']) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: InputProps['value']) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<InputProps, 'children'>;\n\n/**\n * ContentEditorInput Component\n *\n * An inline editing component for single-line text input with validation,\n * cancel/save functionality, and support for additional action buttons.\n *\n * ## Features\n * - **Inline Input Editing**: Edit single-line content with immediate feedback\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **Accessibility**: Full ARIA support and keyboard navigation\n * - **State Management**: Handles editing states and validation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states\n * - Focus management and visual indicators\n *\n * @param children - Current input value\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional Input component props\n */\nexport const ContentEditorInput: FC<ContentEditorInputProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<InputProps['value']>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setNewValue(e.currentTarget.value);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter' && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force input to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={String(children)}\n      role=\"group\"\n      aria-label=\"Content editor input\"\n    >\n      <Input\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        aria-label=\"Editable input value\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-input-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        variant={InputVariant.INVISIBLE}\n        className=\"size-full\"\n        defaultValue={children}\n        disabled={disabled}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-input-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={!isValid ? 'validation-error' : undefined}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsDO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAA8B,QAAQ;AACtE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AAEA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAA8D,CAAC,MAAM;AACzE,gBAAY,EAAE,cAAc,KAAK;AAAA,EACnC;AAEA,QAAM,gBAAgB,CAAC,MAA6C;AAClE,QAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;AAC7C,QAAE,eAAA;AACF,kBAAA;AAAA,IACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,QAAE,eAAA;AACF,mBAAA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,MAAM;AACd,gBAAY,QAAQ;AAEpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAEV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV,WAAW;AAAA,YAEX,cAAW;AAAA,YACX,oBACE,YAAY,oBACR,iCACA;AAAA,YAEN,gBAAc,CAAC;AAAA,YACf,SAAS,aAAa;AAAA,YACtB,WAAU;AAAA,YACV,cAAc;AAAA,YACd;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,UAZC;AAAA,QAAA;AAAA,SAcL,YAAY,sBACZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAW;AAAA,YAEV,UAAA;AAAA,cAAA,YACC,qBAAA,UAAA,EACE,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAM;AAAA,oBACN,OAAO,eAAe,CAAC,UAAU,uBAAuB,EAAE;AAAA,oBAC1D,SAAS,cAAc;AAAA,oBACvB,OAAO,YAAY;AAAA,oBACnB,MAAM,WAAW;AAAA,oBACjB,WAAU;AAAA,oBACV,UAAU,YAAY,CAAC;AAAA,oBACvB,SAAS;AAAA,oBACT,oBAAkB,CAAC,UAAU,qBAAqB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEpD;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAM;AAAA,oBACN,OAAM;AAAA,oBACN,SAAS,cAAc;AAAA,oBACvB,MAAM,WAAW;AAAA,oBACjB,OAAO,YAAY;AAAA,oBACnB,WAAU;AAAA,oBACV,SAAS;AAAA,oBACT;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAED;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAtDG,OAAO,QAAQ;AAAA,EAAA;AA0D1B;"}

package/dist/components/ContentEditor/ContentEditorTextArea.cjs

@@ -31,57 +31,85 @@ const ContentEditorTextArea = ({
     onContentChange(newValue);
   };
   const handleOnContentChange = (e) => setNewValue(e.currentTarget.value ?? "");
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !disabled && isValid) {
+      e.preventDefault();
+      handleValid();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancel();
+    }
+  };
   ReactExports.useEffect(() => {
     setNewValue(children);
+    setResetIncrementor((prev) => prev + 1);
   }, [children]);
   const isValid = validate?.(newValue) ?? true;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "flex size-full flex-col items-center justify-between gap-2",
+      role: "group",
+      "aria-label": "Content editor textarea",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           components_TextArea_AutocompleteTextArea.AutoCompleteTextarea,
           {
             onChange: handleOnContentChange,
+            onKeyDown: handleKeyDown,
             variant: "invisible",
             className: "size-full",
             defaultValue: children,
             isActive: isAuthenticated,
+            disabled,
+            "aria-label": "Editable textarea content",
+            "aria-describedby": isEdited || additionalButtons ? "content-editor-textarea-actions" : void 0,
+            "aria-invalid": !isValid,
             ...props
           },
           resetIncrementor
         ),
-        (isEdited || additionalButtons) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-end gap-2", children: [
-          isEdited && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              components_Button_Button.Button,
-              {
-                Icon: lucideReact.Check,
-                label: "Validate",
-                variant: "hoverable",
-                color: "text",
-                size: "icon-sm",
-                className: "cursor-pointer hover:scale-110",
-                disabled: disabled || !isValid,
-                onClick: handleValid
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              components_Button_Button.Button,
-              {
-                Icon: lucideReact.X,
-                label: "Cancel",
-                variant: "hoverable",
-                size: "icon-sm",
-                color: "text",
-                className: "cursor-pointer hover:scale-110",
-                onClick: handleCancel
-              }
-            )
-          ] }),
-          additionalButtons
-        ] })
+        (isEdited || additionalButtons) && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            id: "content-editor-textarea-actions",
+            className: "flex w-full items-center justify-end gap-2",
+            role: "group",
+            "aria-label": "Edit actions",
+            children: [
+              isEdited && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  components_Button_Button.Button,
+                  {
+                    Icon: lucideReact.Check,
+                    label: `Save changes${!isValid ? " (invalid content)" : ""}`,
+                    variant: components_Button_Button.ButtonVariant.HOVERABLE,
+                    color: components_Button_Button.ButtonColor.TEXT,
+                    size: components_Button_Button.ButtonSize.ICON_SM,
+                    className: "cursor-pointer hover:scale-110",
+                    disabled: disabled || !isValid,
+                    onClick: handleValid,
+                    "aria-describedby": !isValid ? "textarea-validation-error" : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  components_Button_Button.Button,
+                  {
+                    Icon: lucideReact.X,
+                    label: "Cancel changes",
+                    variant: components_Button_Button.ButtonVariant.HOVERABLE,
+                    size: components_Button_Button.ButtonSize.ICON_SM,
+                    color: components_Button_Button.ButtonColor.TEXT,
+                    className: "cursor-pointer hover:scale-110",
+                    onClick: handleCancel,
+                    disabled
+                  }
+                )
+              ] }),
+              additionalButtons
+            ]
+          }
+        )
       ]
     },
     children

package/dist/components/ContentEditor/ContentEditorTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorTextArea.cjs","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { useUser } from '../../hooks/useUser';\nimport { Button } from '../Button';\nimport { type AutoSizedTextAreaProps, AutoCompleteTextarea } from '../TextArea';\n\nexport type ContentEditorTextAreaProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  disabled?: boolean;\n  validate?: (content: string) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const { isAuthenticated } = useUser();\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        defaultValue={children}\n        isActive={isAuthenticated}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant=\"hoverable\"\n                color=\"text\"\n                size=\"icon-sm\"\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant=\"hoverable\"\n                size=\"icon-sm\"\n                color=\"text\"\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useUser","useState","useEffect","jsxs","jsx","AutoCompleteTextarea","Fragment","Button","Check","X"],"mappings":";;;;;;;;;;;;;AAsBO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,gBAAA,IAAoBA,4BAAA;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAIC,aAAAA,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;AAEzCC,eAAAA,UAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EACtB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,yCAAAA;AAAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YACT,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,SAOL,YAAY,sBACZF,2BAAAA,KAAC,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YACCA,2BAAAA,KAAAG,qBAAA,EACE,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAACG,yBAAAA;AAAAA,cAAA;AAAA,gBACC,MAAMC,YAAAA;AAAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAEXJ,2BAAAA;AAAAA,cAACG,yBAAAA;AAAAA,cAAA;AAAA,gBACC,MAAME,YAAAA;AAAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IArCG;AAAA,EAAA;AAyCX;;"}
+{"version":3,"file":"ContentEditorTextArea.cjs","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { useUser } from '../../hooks/useUser';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { type AutoSizedTextAreaProps, AutoCompleteTextarea } from '../TextArea';\n\n/** Props for the ContentEditorTextArea component */\nexport type ContentEditorTextAreaProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: string) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\n/**\n * ContentEditorTextArea Component\n *\n * An inline editing component for multi-line text with autocomplete functionality,\n * user authentication integration, and validation support. This component combines\n * the auto-sizing textarea with smart autocomplete features.\n *\n * ## Features\n * - **Auto-sizing Textarea**: Automatically adjusts height to content\n * - **Autocomplete Integration**: Smart text completion when user is authenticated\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **User Authentication**: Autocomplete features activate based on auth status\n * - **Accessibility**: Full ARIA support and keyboard navigation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states and user auth status\n * - Focus management and visual indicators\n *\n * @param children - Current textarea content\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional AutoSizedTextArea component props\n */\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const { isAuthenticated } = useUser();\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the textarea on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force textarea to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n      role=\"group\"\n      aria-label=\"Content editor textarea\"\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        defaultValue={children}\n        isActive={isAuthenticated}\n        disabled={disabled}\n        aria-label=\"Editable textarea content\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-textarea-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-textarea-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={\n                  !isValid ? 'textarea-validation-error' : undefined\n                }\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useUser","useState","useEffect","jsxs","jsx","AutoCompleteTextarea","Fragment","Button","Check","ButtonVariant","ButtonColor","ButtonSize","X"],"mappings":";;;;;;;;;;;;;AAyDO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,gBAAA,IAAoBA,4BAAA;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAIC,aAAAA,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AAEA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;AAEzC,QAAM,gBAAgB,CAAC,MAAgD;AACrE,QAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,YAAY,SAAS;AACzE,QAAE,eAAA;AACF,kBAAA;AAAA,IACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,QAAE,eAAA;AACF,mBAAA;AAAA,IACF;AAAA,EACF;AAEAC,eAAAA,UAAU,MAAM;AACd,gBAAY,QAAQ;AAEpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAEV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,yCAAAA;AAAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV,WAAW;AAAA,YAEX,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YACV;AAAA,YACA,cAAW;AAAA,YACX,oBACE,YAAY,oBACR,oCACA;AAAA,YAEN,gBAAc,CAAC;AAAA,YACd,GAAG;AAAA,UAAA;AAAA,UAbC;AAAA,QAAA;AAAA,SAeL,YAAY,sBACZF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAW;AAAA,YAEV,UAAA;AAAA,cAAA,YACCA,2BAAAA,KAAAG,qBAAA,EACE,UAAA;AAAA,gBAAAF,2BAAAA;AAAAA,kBAACG,yBAAAA;AAAAA,kBAAA;AAAA,oBACC,MAAMC,YAAAA;AAAAA,oBACN,OAAO,eAAe,CAAC,UAAU,uBAAuB,EAAE;AAAA,oBAC1D,SAASC,yBAAAA,cAAc;AAAA,oBACvB,OAAOC,yBAAAA,YAAY;AAAA,oBACnB,MAAMC,yBAAAA,WAAW;AAAA,oBACjB,WAAU;AAAA,oBACV,UAAU,YAAY,CAAC;AAAA,oBACvB,SAAS;AAAA,oBACT,oBACE,CAAC,UAAU,8BAA8B;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAG7CP,2BAAAA;AAAAA,kBAACG,yBAAAA;AAAAA,kBAAA;AAAA,oBACC,MAAMK,YAAAA;AAAAA,oBACN,OAAM;AAAA,oBACN,SAASH,yBAAAA,cAAc;AAAA,oBACvB,MAAME,yBAAAA,WAAW;AAAA,oBACjB,OAAOD,yBAAAA,YAAY;AAAA,oBACnB,WAAU;AAAA,oBACV,SAAS;AAAA,oBACT;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAED;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAzDG;AAAA,EAAA;AA6DX;;"}

package/dist/components/ContentEditor/ContentEditorTextArea.d.ts

@@ -1,11 +1,46 @@
 import { FC, ReactNode } from 'react';
 import { AutoSizedTextAreaProps } from '../TextArea';
+/** Props for the ContentEditorTextArea component */
 export type ContentEditorTextAreaProps = {
+    /** The current content to display and edit */
     children: string;
+    /** Callback function called when content is saved/validated */
     onContentChange: (content: string) => void;
+    /** Whether the editor is disabled */
     disabled?: boolean;
+    /** Optional validation function to check content validity */
     validate?: (content: string) => boolean;
+    /** Additional buttons to display alongside edit actions */
     additionalButtons?: ReactNode;
 } & Omit<AutoSizedTextAreaProps, 'children'>;
+/**
+ * ContentEditorTextArea Component
+ *
+ * An inline editing component for multi-line text with autocomplete functionality,
+ * user authentication integration, and validation support. This component combines
+ * the auto-sizing textarea with smart autocomplete features.
+ *
+ * ## Features
+ * - **Auto-sizing Textarea**: Automatically adjusts height to content
+ * - **Autocomplete Integration**: Smart text completion when user is authenticated
+ * - **Validation Support**: Optional content validation with visual feedback
+ * - **Action Buttons**: Built-in save/cancel with support for additional buttons
+ * - **Keyboard Shortcuts**: Enter to save, Escape to cancel
+ * - **User Authentication**: Autocomplete features activate based on auth status
+ * - **Accessibility**: Full ARIA support and keyboard navigation
+ *
+ * ## Accessibility
+ * - Proper ARIA labels and descriptions for all controls
+ * - Keyboard navigation (Tab, Enter, Escape)
+ * - Screen reader support for validation states and user auth status
+ * - Focus management and visual indicators
+ *
+ * @param children - Current textarea content
+ * @param onContentChange - Callback when content is saved
+ * @param disabled - Whether the editor is disabled
+ * @param validate - Optional validation function
+ * @param additionalButtons - Extra buttons to display
+ * @param props - Additional AutoSizedTextArea component props
+ */
 export declare const ContentEditorTextArea: FC<ContentEditorTextAreaProps>;
 //# sourceMappingURL=ContentEditorTextArea.d.ts.map

package/dist/components/ContentEditor/ContentEditorTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,EAAE,EACP,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,sBAAsB,EAAwB,MAAM,aAAa,CAAC;AAEhF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,CAAC;AAE7C,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CA0EhE,CAAC"}
+{"version":3,"file":"ContentEditorTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,EAAE,EACP,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,sBAAsB,EAAwB,MAAM,aAAa,CAAC;AAEhF,oDAAoD;AACpD,MAAM,MAAM,0BAA0B,GAAG;IACvC,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CA2GhE,CAAC"}

package/dist/components/ContentEditor/ContentEditorTextArea.mjs

@@ -3,7 +3,7 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Check, X } from "lucide-react";
 import { useState, useEffect } from "react";
 import { useUser } from "../../hooks/useUser/index.mjs";
-import { Button } from "../Button/Button.mjs";
+import { Button, ButtonSize, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
 import "clsx";
 import "tailwind-merge";
 import "../Input/Input.mjs";
@@ -29,57 +29,85 @@ const ContentEditorTextArea = ({
     onContentChange(newValue);
   };
   const handleOnContentChange = (e) => setNewValue(e.currentTarget.value ?? "");
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !disabled && isValid) {
+      e.preventDefault();
+      handleValid();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancel();
+    }
+  };
   useEffect(() => {
     setNewValue(children);
+    setResetIncrementor((prev) => prev + 1);
   }, [children]);
   const isValid = validate?.(newValue) ?? true;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "flex size-full flex-col items-center justify-between gap-2",
+      role: "group",
+      "aria-label": "Content editor textarea",
       children: [
         /* @__PURE__ */ jsx(
           AutoCompleteTextarea,
           {
             onChange: handleOnContentChange,
+            onKeyDown: handleKeyDown,
             variant: "invisible",
             className: "size-full",
             defaultValue: children,
             isActive: isAuthenticated,
+            disabled,
+            "aria-label": "Editable textarea content",
+            "aria-describedby": isEdited || additionalButtons ? "content-editor-textarea-actions" : void 0,
+            "aria-invalid": !isValid,
             ...props
           },
           resetIncrementor
         ),
-        (isEdited || additionalButtons) && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-end gap-2", children: [
-          isEdited && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                Icon: Check,
-                label: "Validate",
-                variant: "hoverable",
-                color: "text",
-                size: "icon-sm",
-                className: "cursor-pointer hover:scale-110",
-                disabled: disabled || !isValid,
-                onClick: handleValid
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                Icon: X,
-                label: "Cancel",
-                variant: "hoverable",
-                size: "icon-sm",
-                color: "text",
-                className: "cursor-pointer hover:scale-110",
-                onClick: handleCancel
-              }
-            )
-          ] }),
-          additionalButtons
-        ] })
+        (isEdited || additionalButtons) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: "content-editor-textarea-actions",
+            className: "flex w-full items-center justify-end gap-2",
+            role: "group",
+            "aria-label": "Edit actions",
+            children: [
+              isEdited && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    Icon: Check,
+                    label: `Save changes${!isValid ? " (invalid content)" : ""}`,
+                    variant: ButtonVariant.HOVERABLE,
+                    color: ButtonColor.TEXT,
+                    size: ButtonSize.ICON_SM,
+                    className: "cursor-pointer hover:scale-110",
+                    disabled: disabled || !isValid,
+                    onClick: handleValid,
+                    "aria-describedby": !isValid ? "textarea-validation-error" : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    Icon: X,
+                    label: "Cancel changes",
+                    variant: ButtonVariant.HOVERABLE,
+                    size: ButtonSize.ICON_SM,
+                    color: ButtonColor.TEXT,
+                    className: "cursor-pointer hover:scale-110",
+                    onClick: handleCancel,
+                    disabled
+                  }
+                )
+              ] }),
+              additionalButtons
+            ]
+          }
+        )
       ]
     },
     children

package/dist/components/ContentEditor/ContentEditorTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorTextArea.mjs","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { useUser } from '../../hooks/useUser';\nimport { Button } from '../Button';\nimport { type AutoSizedTextAreaProps, AutoCompleteTextarea } from '../TextArea';\n\nexport type ContentEditorTextAreaProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  disabled?: boolean;\n  validate?: (content: string) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const { isAuthenticated } = useUser();\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        defaultValue={children}\n        isActive={isAuthenticated}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant=\"hoverable\"\n                color=\"text\"\n                size=\"icon-sm\"\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant=\"hoverable\"\n                size=\"icon-sm\"\n                color=\"text\"\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAsBO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,gBAAA,IAAoB,QAAA;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;AAEzC,YAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EACtB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YACT,GAAG;AAAA,UAAA;AAAA,UALC;AAAA,QAAA;AAAA,SAOL,YAAY,sBACZ,qBAAC,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YACC,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAEX;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IArCG;AAAA,EAAA;AAyCX;"}
+{"version":3,"file":"ContentEditorTextArea.mjs","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { useUser } from '../../hooks/useUser';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { type AutoSizedTextAreaProps, AutoCompleteTextarea } from '../TextArea';\n\n/** Props for the ContentEditorTextArea component */\nexport type ContentEditorTextAreaProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: string) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\n/**\n * ContentEditorTextArea Component\n *\n * An inline editing component for multi-line text with autocomplete functionality,\n * user authentication integration, and validation support. This component combines\n * the auto-sizing textarea with smart autocomplete features.\n *\n * ## Features\n * - **Auto-sizing Textarea**: Automatically adjusts height to content\n * - **Autocomplete Integration**: Smart text completion when user is authenticated\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **User Authentication**: Autocomplete features activate based on auth status\n * - **Accessibility**: Full ARIA support and keyboard navigation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states and user auth status\n * - Focus management and visual indicators\n *\n * @param children - Current textarea content\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional AutoSizedTextArea component props\n */\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const { isAuthenticated } = useUser();\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the textarea on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force textarea to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n      role=\"group\"\n      aria-label=\"Content editor textarea\"\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        defaultValue={children}\n        isActive={isAuthenticated}\n        disabled={disabled}\n        aria-label=\"Editable textarea content\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-textarea-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-textarea-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={\n                  !isValid ? 'textarea-validation-error' : undefined\n                }\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAyDO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,gBAAA,IAAoB,QAAA;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AAEA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;AAEzC,QAAM,gBAAgB,CAAC,MAAgD;AACrE,QAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,YAAY,SAAS;AACzE,QAAE,eAAA;AACF,kBAAA;AAAA,IACF,WAAW,EAAE,QAAQ,UAAU;AAC7B,QAAE,eAAA;AACF,mBAAA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,MAAM;AACd,gBAAY,QAAQ;AAEpB,wBAAoB,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,WAAW,QAAQ,KAAK;AAExC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAEV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV,WAAW;AAAA,YAEX,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YACV;AAAA,YACA,cAAW;AAAA,YACX,oBACE,YAAY,oBACR,oCACA;AAAA,YAEN,gBAAc,CAAC;AAAA,YACd,GAAG;AAAA,UAAA;AAAA,UAbC;AAAA,QAAA;AAAA,SAeL,YAAY,sBACZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAW;AAAA,YAEV,UAAA;AAAA,cAAA,YACC,qBAAA,UAAA,EACE,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAM;AAAA,oBACN,OAAO,eAAe,CAAC,UAAU,uBAAuB,EAAE;AAAA,oBAC1D,SAAS,cAAc;AAAA,oBACvB,OAAO,YAAY;AAAA,oBACnB,MAAM,WAAW;AAAA,oBACjB,WAAU;AAAA,oBACV,UAAU,YAAY,CAAC;AAAA,oBACvB,SAAS;AAAA,oBACT,oBACE,CAAC,UAAU,8BAA8B;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAG7C;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAM;AAAA,oBACN,OAAM;AAAA,oBACN,SAAS,cAAc;AAAA,oBACvB,MAAM,WAAW;AAAA,oBACjB,OAAO,YAAY;AAAA,oBACnB,WAAU;AAAA,oBACV,SAAS;AAAA,oBACT;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAED;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAzDG;AAAA,EAAA;AA6DX;"}

package/dist/components/ContentEditor/index.cjs

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_ContentEditor_ContentEditor = require("./ContentEditor.cjs");
+const components_ContentEditor_ContentEditorInput = require("./ContentEditorInput.cjs");
+const components_ContentEditor_ContentEditorTextArea = require("./ContentEditorTextArea.cjs");
 exports.ContentEditor = components_ContentEditor_ContentEditor.ContentEditor;
+exports.ContentEditorInput = components_ContentEditor_ContentEditorInput.ContentEditorInput;
+exports.ContentEditorTextArea = components_ContentEditor_ContentEditorTextArea.ContentEditorTextArea;
 //# sourceMappingURL=index.cjs.map

package/dist/components/ContentEditor/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}