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

package/dist/esm/components/ContentEditor/ContentEditor.mjs

@@ -0,0 +1,109 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { InputVariant } from "../Input/Input.mjs";
+import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
+import { Check, X } from "lucide-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ContentEditor/ContentEditor.tsx
+/**
+* ContentEditor Component
+*
+* An inline editing component that allows users to edit text content with
+* validation and cancellation options. Built on top of AutoSizedTextArea
+* for flexible text editing experiences.
+*
+* ## Features
+* - **Inline Editing**: Edit content directly in place with visual feedback
+* - **Auto-sizing**: Textarea automatically adjusts to content size
+* - **Validation Controls**: Check and X buttons appear when content is modified
+* - **Keyboard Support**: Full keyboard navigation and accessibility
+* - **State Management**: Handles editing states and content validation
+*
+* ## Accessibility
+* - Proper ARIA labels for all interactive elements
+* - Keyboard navigation support (Tab, Enter, Escape)
+* - Screen reader announcements for state changes
+* - Focus management between edit and display modes
+*
+* @param children - The current content to display and edit
+* @param onContentChange - Callback when content is saved
+* @param isEditing - Whether editor is in editing mode
+* @param props - Additional AutoSizedTextArea props
+*/
+const ContentEditor = ({ children, onContentChange, isEditing,...props }) => {
+	const [newValue, setNewValue] = useState(children);
+	const [resetIncrementor, setResetIncrementor] = useState(0);
+	const isEdited = newValue !== children;
+	const handleCancel = () => {
+		setNewValue(children);
+		setResetIncrementor((prev) => prev + 1);
+	};
+	const handleValid = () => {
+		onContentChange(newValue);
+	};
+	const handleOnContentChange = (e) => setNewValue(e.target.value ?? "");
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			handleValid();
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			handleCancel();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-row items-center justify-between gap-2",
+		role: "group",
+		"aria-label": "Content editor",
+		children: [/* @__PURE__ */ jsx(AutoSizedTextArea, {
+			className: cn("break-word m-3 inline w-full bg-transparent outline-hidden", isEditing ? "cursor-text" : "cursor-pointer"),
+			onChange: handleOnContentChange,
+			onKeyDown: handleKeyDown,
+			variant: InputVariant.INVISIBLE,
+			defaultValue: children,
+			"aria-label": "Editable content",
+			"aria-describedby": isEdited ? "content-editor-actions" : void 0,
+			...props
+		}, resetIncrementor), isEdited && /* @__PURE__ */ jsxs("div", {
+			id: "content-editor-actions",
+			className: "flex flex-row items-center justify-between gap-2",
+			role: "group",
+			"aria-label": "Edit actions",
+			children: [/* @__PURE__ */ jsx(Check, {
+				className: "cursor-pointer text-green-600 hover:scale-110",
+				size: 16,
+				onClick: handleValid,
+				role: "button",
+				tabIndex: 0,
+				"aria-label": "Save changes (Ctrl+Enter)",
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						handleValid();
+					}
+				}
+			}), /* @__PURE__ */ jsx(X, {
+				className: "cursor-pointer text-red-600 hover:scale-110",
+				size: 16,
+				onClick: handleCancel,
+				role: "button",
+				tabIndex: 0,
+				"aria-label": "Cancel changes (Escape)",
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						handleCancel();
+					}
+				}
+			})]
+		})]
+	});
+};
+
+//#endregion
+export { ContentEditor };
+//# sourceMappingURL=ContentEditor.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentEditor.mjs","names":["ContentEditor: FC<ContentEditorProps>","isEdited: boolean","handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement>"],"sources":["../../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport { type ChangeEventHandler, type FC, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { InputVariant } from '../Input';\nimport {\n  AutoSizedTextArea,\n  type AutoSizedTextAreaProps,\n} from '../TextArea/AutoSizeTextArea';\n\n/** Props for the ContentEditor component */\nexport type ContentEditorProps = {\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 currently in editing mode */\n  isEditing?: boolean;\n} & AutoSizedTextAreaProps;\n\n/**\n * ContentEditor Component\n *\n * An inline editing component that allows users to edit text content with\n * validation and cancellation options. Built on top of AutoSizedTextArea\n * for flexible text editing experiences.\n *\n * ## Features\n * - **Inline Editing**: Edit content directly in place with visual feedback\n * - **Auto-sizing**: Textarea automatically adjusts to content size\n * - **Validation Controls**: Check and X buttons appear when content is modified\n * - **Keyboard Support**: Full keyboard navigation and accessibility\n * - **State Management**: Handles editing states and content validation\n *\n * ## Accessibility\n * - Proper ARIA labels for all interactive elements\n * - Keyboard navigation support (Tab, Enter, Escape)\n * - Screen reader announcements for state changes\n * - Focus management between edit and display modes\n *\n * @param children - The current content to display and edit\n * @param onContentChange - Callback when content is saved\n * @param isEditing - Whether editor is in editing mode\n * @param props - Additional AutoSizedTextArea props\n */\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\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\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  return (\n    <div\n      className=\"flex flex-row items-center justify-between gap-2\"\n      role=\"group\"\n      aria-label=\"Content editor\"\n    >\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-hidden',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant={InputVariant.INVISIBLE}\n        defaultValue={children}\n        aria-label=\"Editable content\"\n        aria-describedby={isEdited ? 'content-editor-actions' : undefined}\n        {...props}\n      />\n      {isEdited && (\n        <div\n          id=\"content-editor-actions\"\n          className=\"flex flex-row items-center justify-between gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          <Check\n            className=\"cursor-pointer text-green-600 hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Save changes (Ctrl+Enter)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleValid();\n              }\n            }}\n          />\n          <X\n            className=\"cursor-pointer text-red-600 hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"Cancel changes (Escape)\"\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleCancel();\n              }\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAaA,iBAAyC,EACpD,UACA,iBACA,UACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAAiB,SAAS;CAC1D,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAMC,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAMC,yBAAkE,MACtE,YAAY,EAAE,OAAO,SAAS,GAAG;CAEnC,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;AACjD,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,QACE,qBAAC;EACC,WAAU;EACV,MAAK;EACL,cAAW;aAEX,oBAAC;GACC,WAAW,GACT,8DACA,YAAY,gBAAgB,iBAC7B;GACD,UAAU;GACV,WAAW;GAEX,SAAS,aAAa;GACtB,cAAc;GACd,cAAW;GACX,oBAAkB,WAAW,2BAA2B;GACxD,GAAI;KALC,iBAML,EACD,YACC,qBAAC;GACC,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;cAEX,oBAAC;IACC,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,gBAAgB;AAClB,mBAAa;;;KAGjB,EACF,oBAAC;IACC,WAAU;IACV,MAAM;IACN,SAAS;IACT,MAAK;IACL,UAAU;IACV,cAAW;IACX,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,gBAAgB;AAClB,oBAAc;;;KAGlB;IACE;GAEJ"}

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

@@ -0,0 +1,112 @@
+'use client';
+
+
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { Input, InputVariant } from "../Input/Input.mjs";
+import { Check, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ContentEditor/ContentEditorInput.tsx
+/**
+* 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
+*/
+const ContentEditorInput = ({ children, onContentChange, disabled, validate, additionalButtons,...props }) => {
+	const [newValue, setNewValue] = useState(children);
+	const [resetIncrementor, setResetIncrementor] = useState(0);
+	const isEdited = newValue !== children;
+	const handleCancel = () => {
+		setNewValue(children);
+		setResetIncrementor((prev) => prev + 1);
+	};
+	const handleValid = () => {
+		onContentChange(newValue);
+	};
+	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,
+			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", {
+			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$1, { 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));
+};
+
+//#endregion
+export { ContentEditorInput };
+//# sourceMappingURL=ContentEditorInput.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentEditorInput.mjs","names":["ContentEditorInput: FC<ContentEditorInputProps>","isEdited: boolean","handleOnContentChange: ChangeEventHandler<HTMLInputElement>"],"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 { Input, type InputProps, 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAaA,sBAAmD,EAC9D,UACA,iBACA,UACA,UACA,kBACA,GAAG,YACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAA8B,SAAS;CACvE,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAMC,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAMC,yBAA+D,MAAM;AACzE,cAAY,EAAE,cAAc,MAAM;;CAGpC,MAAM,iBAAiB,MAA6C;AAClE,MAAI,EAAE,QAAQ,WAAW,CAAC,YAAY,SAAS;AAC7C,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,iBAAgB;AACd,cAAY,SAAS;AAErB,uBAAqB,SAAS,OAAO,EAAE;IACtC,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,WAAW,SAAS,IAAI;AAExC,QACE,qBAAC;EACC,WAAU;EAEV,MAAK;EACL,cAAW;aAEX,oBAAC;GACC,UAAU;GACV,WAAW;GAEX,cAAW;GACX,oBACE,YAAY,oBACR,iCACA;GAEN,gBAAc,CAAC;GACf,SAAS,aAAa;GACtB,WAAU;GACV,cAAc;GACJ;GACV,GAAI;KAZC,iBAaL,GACA,YAAY,sBACZ,qBAAC;GACC,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;cAEV,YACC,8CACE,oBAAC;IACC,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBAAkB,CAAC,UAAU,qBAAqB;KAClD,EACF,oBAAC;IACC,MAAM;IACN,OAAM;IACN,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAU;IACV,SAAS;IACC;KACV,IACD,EAEJ;IACG;IAtDH,OAAO,SAAS,CAwDjB"}

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

@@ -0,0 +1,115 @@
+'use client';
+
+
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { useUser } from "../../hooks/useUser/index.mjs";
+import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
+import { Check, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ContentEditor/ContentEditorTextArea.tsx
+/**
+* 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
+*/
+const ContentEditorTextArea = ({ children, onContentChange, disabled, validate, additionalButtons,...props }) => {
+	const { isAuthenticated } = useUser();
+	const [newValue, setNewValue] = useState(children);
+	const [resetIncrementor, setResetIncrementor] = useState(0);
+	const isEdited = newValue !== children;
+	const handleCancel = () => {
+		setNewValue(children);
+		setResetIncrementor((prev) => prev + 1);
+	};
+	const handleValid = () => {
+		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",
+			value: 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", {
+			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$1, { 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);
+};
+
+//#endregion
+export { ContentEditorTextArea };
+//# sourceMappingURL=ContentEditorTextArea.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentEditorTextArea.mjs","names":["ContentEditorTextArea: FC<ContentEditorTextAreaProps>","isEdited: boolean","handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement>"],"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 { AutoCompleteTextarea, type AutoSizedTextAreaProps } 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        value={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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAaA,yBAAyD,EACpE,UACA,iBACA,UACA,UACA,kBACA,GAAG,YACC;CACJ,MAAM,EAAE,oBAAoB,SAAS;CACrC,MAAM,CAAC,UAAU,eAAe,SAAiB,SAAS;CAC1D,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAMC,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAMC,yBAAkE,MACtE,YAAY,EAAE,cAAc,SAAS,GAAG;CAE1C,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,YAAY,SAAS;AACzE,KAAE,gBAAgB;AAClB,gBAAa;aACJ,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,iBAAc;;;AAIlB,iBAAgB;AACd,cAAY,SAAS;AAErB,uBAAqB,SAAS,OAAO,EAAE;IACtC,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,WAAW,SAAS,IAAI;AAExC,QACE,qBAAC;EACC,WAAU;EAEV,MAAK;EACL,cAAW;aAEX,oBAAC;GACC,UAAU;GACV,WAAW;GAEX,SAAQ;GACR,WAAU;GACV,OAAO;GACP,UAAU;GACA;GACV,cAAW;GACX,oBACE,YAAY,oBACR,oCACA;GAEN,gBAAc,CAAC;GACf,GAAI;KAbC,iBAcL,GACA,YAAY,sBACZ,qBAAC;GACC,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;cAEV,YACC,8CACE,oBAAC;IACC,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBACE,CAAC,UAAU,8BAA8B;KAE3C,EACF,oBAAC;IACC,MAAM;IACN,OAAM;IACN,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAU;IACV,SAAS;IACC;KACV,IACD,EAEJ;IACG;IAzDH,SA2DD"}

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

@@ -0,0 +1,5 @@
+import { ContentEditorInput } from "./ContentEditorInput.mjs";
+import { ContentEditorTextArea } from "./ContentEditorTextArea.mjs";
+import { ContentEditor } from "./ContentEditor.mjs";
+
+export { ContentEditor, ContentEditorInput, ContentEditorTextArea };

package/dist/esm/components/ContentSelector/ContentSelector.mjs

@@ -0,0 +1,83 @@
+'use client';
+
+
+import { PressableSpan } from "../PressableSpan/PressableSpan.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ContentSelector/ContentSelector.tsx
+/**
+* ContentSelector - A higher-level wrapper around PressableSpan for content selection
+*
+* This component provides a semantic interface for making any content selectable through
+* long press gestures. It's specifically designed for content management interfaces
+* where users need to select text, images, or other elements to perform actions like
+* editing, moving, or applying operations.
+*
+* ## Key Features
+* - **Content Selection**: Makes any React content selectable via long press
+* - **Visual Feedback**: Inherits outline-based selection indicators from PressableSpan
+* - **Accessibility**: Full keyboard navigation and screen reader support
+* - **Click Outside**: Automatic deselection when clicking elsewhere
+* - **External Control**: Can be controlled externally for complex selection states
+*
+* ## Use Cases
+* - Content management systems with inline editing
+* - Text and media selection interfaces
+* - Interactive documentation with selectable sections
+* - Dashboard widgets with configurable content
+* - Form builders with selectable form elements
+*
+* ## Accessibility
+* - Inherits all accessibility features from PressableSpan
+* - Keyboard navigation with Tab, Enter, Space, and Escape
+* - Screen reader announcements for selection states
+* - Focus management and proper ARIA attributes
+*
+* @example
+* Basic content selection:
+* ```tsx
+* <ContentSelector onSelect={() => setIsEditing(true)}>
+*   <p>This paragraph becomes selectable</p>
+* </ContentSelector>
+* ```
+*
+* @example
+* With deselection handling:
+* ```tsx
+* <ContentSelector
+*   onSelect={() => setSelectedContent(contentId)}
+*   onUnselect={() => setSelectedContent(null)}
+* >
+*   <div className="content-block">
+*     <h2>Selectable Content Block</h2>
+*     <p>Long press to select this entire block</p>
+*   </div>
+* </ContentSelector>
+* ```
+*
+* @example
+* Controlled selection state:
+* ```tsx
+* <ContentSelector
+*   isSelecting={selectedItems.includes(itemId)}
+*   onSelect={() => selectItem(itemId)}
+*   onUnselect={() => deselectItem(itemId)}
+* >
+*   <ContentCard data={cardData} />
+* </ContentSelector>
+* ```
+*/
+const ContentSelector = ({ children, onSelect, onUnselect, isSelecting, pressDuration, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }) => /* @__PURE__ */ jsx(PressableSpan, {
+	onPress: onSelect,
+	onClickOutside: onUnselect,
+	isSelecting,
+	pressDuration,
+	className,
+	"aria-label": ariaLabel,
+	"aria-describedby": ariaDescribedBy,
+	children
+});
+
+//#endregion
+export { ContentSelector };
+//# sourceMappingURL=ContentSelector.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentSelector.mjs","names":["ContentSelector: FC<ContentSelectorProps>"],"sources":["../../../../src/components/ContentSelector/ContentSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ReactNode } from 'react';\nimport { PressableSpan } from '../PressableSpan';\n\n/**\n * Props for the ContentSelector component\n */\ntype ContentSelectorProps = {\n  /**\n   * The content to be displayed and made selectable\n   * @example\n   * ```tsx\n   * <ContentSelector onSelect={() => startEditing()}>\n   *   <h1>Selectable Heading</h1>\n   * </ContentSelector>\n   * ```\n   */\n  children: ReactNode;\n\n  /**\n   * Callback function triggered when content is selected via long press or keyboard\n   * @example\n   * ```tsx\n   * <ContentSelector\n   *   onSelect={() => setEditMode(true)}\n   *   onUnselect={() => setEditMode(false)}\n   * >\n   *   Click content to edit\n   * </ContentSelector>\n   * ```\n   */\n  onSelect: () => void;\n\n  /**\n   * Optional callback function triggered when clicking outside the selected content\n   * Used to deselect the content and exit edit/selection mode\n   * @example\n   * ```tsx\n   * <ContentSelector\n   *   onSelect={() => enterEditMode()}\n   *   onUnselect={() => exitEditMode()}\n   * >\n   *   Editable content with auto-deselect\n   * </ContentSelector>\n   * ```\n   */\n  onUnselect?: () => void;\n\n  /**\n   * External control for the selection state\n   * When provided, overrides the internal selection state\n   * @example\n   * ```tsx\n   * <ContentSelector\n   *   isSelecting={isInEditMode}\n   *   onSelect={() => {}}\n   * >\n   *   Externally controlled content\n   * </ContentSelector>\n   * ```\n   */\n  isSelecting?: boolean;\n\n  /**\n   * Duration in milliseconds for long press detection\n   * @default 400\n   * @example\n   * ```tsx\n   * <ContentSelector\n   *   pressDuration={600}\n   *   onSelect={() => activateSlowSelection()}\n   * >\n   *   Requires longer press\n   * </ContentSelector>\n   * ```\n   */\n  pressDuration?: number;\n\n  /**\n   * Additional CSS classes for styling the selectable content\n   * @example\n   * ```tsx\n   * <ContentSelector\n   *   className=\"border-2 border-dashed border-blue-300\"\n   *   onSelect={() => {}}\n   * >\n   *   Styled selectable content\n   * </ContentSelector>\n   * ```\n   */\n  className?: string;\n\n  /**\n   * ARIA label for accessibility\n   * Provides context about what happens when the content is selected\n   * @example\n   * ```tsx\n   * <ContentSelector\n   *   aria-label=\"Select to edit this content\"\n   *   onSelect={() => {}}\n   * >\n   *   Content with accessibility context\n   * </ContentSelector>\n   * ```\n   */\n  'aria-label'?: string;\n\n  /**\n   * ID of element providing additional description\n   * @example\n   * ```tsx\n   * <ContentSelector\n   *   aria-describedby=\"help-text\"\n   *   onSelect={() => {}}\n   * >\n   *   Content with help\n   * </ContentSelector>\n   * <div id=\"help-text\">Long press to edit</div>\n   * ```\n   */\n  'aria-describedby'?: string;\n};\n\n/**\n * ContentSelector - A higher-level wrapper around PressableSpan for content selection\n *\n * This component provides a semantic interface for making any content selectable through\n * long press gestures. It's specifically designed for content management interfaces\n * where users need to select text, images, or other elements to perform actions like\n * editing, moving, or applying operations.\n *\n * ## Key Features\n * - **Content Selection**: Makes any React content selectable via long press\n * - **Visual Feedback**: Inherits outline-based selection indicators from PressableSpan\n * - **Accessibility**: Full keyboard navigation and screen reader support\n * - **Click Outside**: Automatic deselection when clicking elsewhere\n * - **External Control**: Can be controlled externally for complex selection states\n *\n * ## Use Cases\n * - Content management systems with inline editing\n * - Text and media selection interfaces\n * - Interactive documentation with selectable sections\n * - Dashboard widgets with configurable content\n * - Form builders with selectable form elements\n *\n * ## Accessibility\n * - Inherits all accessibility features from PressableSpan\n * - Keyboard navigation with Tab, Enter, Space, and Escape\n * - Screen reader announcements for selection states\n * - Focus management and proper ARIA attributes\n *\n * @example\n * Basic content selection:\n * ```tsx\n * <ContentSelector onSelect={() => setIsEditing(true)}>\n *   <p>This paragraph becomes selectable</p>\n * </ContentSelector>\n * ```\n *\n * @example\n * With deselection handling:\n * ```tsx\n * <ContentSelector\n *   onSelect={() => setSelectedContent(contentId)}\n *   onUnselect={() => setSelectedContent(null)}\n * >\n *   <div className=\"content-block\">\n *     <h2>Selectable Content Block</h2>\n *     <p>Long press to select this entire block</p>\n *   </div>\n * </ContentSelector>\n * ```\n *\n * @example\n * Controlled selection state:\n * ```tsx\n * <ContentSelector\n *   isSelecting={selectedItems.includes(itemId)}\n *   onSelect={() => selectItem(itemId)}\n *   onUnselect={() => deselectItem(itemId)}\n * >\n *   <ContentCard data={cardData} />\n * </ContentSelector>\n * ```\n */\n\nexport const ContentSelector: FC<ContentSelectorProps> = ({\n  children,\n  onSelect,\n  onUnselect,\n  isSelecting,\n  pressDuration,\n  className,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n}) => (\n  <PressableSpan\n    onPress={onSelect}\n    onClickOutside={onUnselect}\n    isSelecting={isSelecting}\n    pressDuration={pressDuration}\n    className={className}\n    aria-label={ariaLabel}\n    aria-describedby={ariaDescribedBy}\n  >\n    {children}\n  </PressableSpan>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2LA,MAAaA,mBAA6C,EACxD,UACA,UACA,YACA,aACA,eACA,WACA,cAAc,WACd,oBAAoB,sBAEpB,oBAAC;CACC,SAAS;CACT,gBAAgB;CACH;CACE;CACJ;CACX,cAAY;CACZ,oBAAkB;CAEjB;EACa"}

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

@@ -0,0 +1,3 @@
+import { ContentSelector } from "./ContentSelector.mjs";
+
+export { ContentSelector };

package/dist/esm/components/CopyButton/CopyButton.content.mjs

@@ -0,0 +1,33 @@
+import { t } from "intlayer";
+
+//#region src/components/CopyButton/CopyButton.content.ts
+const copyContentContent = {
+	key: "copy-button",
+	content: { label: t({
+		en: "Copy content",
+		fr: "Copier le contenu",
+		es: "Copiar contenido",
+		"en-GB": "Copy content",
+		de: "Inhalt kopieren",
+		ja: "コンテンツをコピー",
+		ko: "콘텐츠 복사",
+		zh: "复制内容",
+		it: "Copia contenuto",
+		pt: "Copiar conteúdo",
+		hi: "सामग्री कॉपी करें",
+		ar: "نسخ المحتوى",
+		ru: "Копировать содержимое",
+		tr: "İçeriği kopyala",
+		pl: "Kopiuj zawartość",
+		id: "Salin konten",
+		vi: "Sao chép nội dung"
+	}) },
+	title: "Copy button label",
+	description: "Content declaration for the copy button label used to trigger the copy to clipboard action in the design system.",
+	tags: ["button component", "design system"]
+};
+var CopyButton_content_default = copyContentContent;
+
+//#endregion
+export { copyContentContent, CopyButton_content_default as default };
+//# sourceMappingURL=CopyButton.content.mjs.map

package/dist/esm/components/CopyButton/CopyButton.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.content.mjs","names":[],"sources":["../../../../src/components/CopyButton/CopyButton.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const copyContentContent = {\n  key: 'copy-button',\n  content: {\n    label: t({\n      en: 'Copy content',\n      fr: 'Copier le contenu',\n      es: 'Copiar contenido',\n      'en-GB': 'Copy content',\n      de: 'Inhalt kopieren',\n      ja: 'コンテンツをコピー',\n      ko: '콘텐츠 복사',\n      zh: '复制内容',\n      it: 'Copia contenuto',\n      pt: 'Copiar conteúdo',\n      hi: 'सामग्री कॉपी करें',\n      ar: 'نسخ المحتوى',\n      ru: 'Копировать содержимое',\n      tr: 'İçeriği kopyala',\n      pl: 'Kopiuj zawartość',\n      id: 'Salin konten',\n      vi: 'Sao chép nội dung',\n    }),\n  },\n  title: 'Copy button label',\n  description:\n    'Content declaration for the copy button label used to trigger the copy to clipboard action in the design system.',\n  tags: ['button component', 'design system'],\n} satisfies Dictionary;\n\nexport default copyContentContent;\n"],"mappings":";;;AAEA,MAAa,qBAAqB;CAChC,KAAK;CACL,SAAS,EACP,OAAO,EAAE;EACP,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,EACH;CACD,OAAO;CACP,aACE;CACF,MAAM,CAAC,oBAAoB,gBAAgB;CAC5C;AAED,iCAAe"}

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

@@ -0,0 +1,123 @@
+'use client';
+
+
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { CopyCheckIcon, CopyIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/CopyButton/index.tsx
+/**
+* CopyButton - A specialized button component for copying text to the clipboard
+*
+* This component provides a user-friendly way to copy text content to the system clipboard
+* with visual feedback and accessibility features. It uses the modern Clipboard API with
+* fallback error handling, and provides clear visual indication of successful copy operations.
+*
+* ## Key Features
+* - **Clipboard Integration**: Uses modern Clipboard API for reliable text copying
+* - **Visual Feedback**: Icon changes from copy to check mark on successful copy
+* - **Auto-Reset**: Automatically reverts to copy icon after 1 second
+* - **Error Handling**: Graceful error handling with console logging
+* - **Accessibility**: Full keyboard navigation and screen reader support
+* - **Internationalization**: Multi-language support via Intlayer
+*
+* ## Use Cases
+* - Code snippet copying in documentation
+* - Sharing URLs or links
+* - Copying configuration values
+* - Form data duplication
+* - API key or token copying
+* - Text content sharing in interfaces
+*
+* ## Accessibility
+* - Uses semantic button element with proper ARIA labeling
+* - Keyboard accessible (Tab, Enter, Space)
+* - Screen reader announces copy actions
+* - Focus management with visible indicators
+* - Proper error state handling for assistive technologies
+*
+* ## Browser Compatibility
+* - Requires modern browsers with Clipboard API support
+* - Falls back gracefully with error logging for unsupported browsers
+* - Works in secure contexts (HTTPS) as required by Clipboard API
+*
+* @example
+* Basic usage:
+* ```tsx
+* <CopyButton content="Text to copy" />
+* ```
+*
+* @example
+* With custom styling and label:
+* ```tsx
+* <CopyButton
+*   content="https://example.com/api/endpoint"
+*   label="Copy API endpoint"
+*   variant={ButtonVariant.OUTLINE}
+*   color={ButtonColor.PRIMARY}
+*   size={ButtonSize.ICON_MD}
+* />
+* ```
+*
+* @example
+* In a code block context:
+* ```tsx
+* <div className="relative">
+*   <pre className="bg-gray-100 p-4 rounded">
+*     <code>npm install @intlayer/design-system</code>
+*   </pre>
+*   <CopyButton
+*     content="npm install @intlayer/design-system"
+*     className="absolute top-2 right-2"
+*     label="Copy installation command"
+*   />
+* </div>
+* ```
+*/
+const CopyButton = ({ content,...props }) => {
+	const [copied, setCopied] = useState(false);
+	const [error, setError] = useState(false);
+	const { label } = useIntlayer("copy-button");
+	const handleCopy = async () => {
+		try {
+			setError(false);
+			await navigator.clipboard.writeText(content);
+			setCopied(true);
+		} catch (error$1) {
+			console.error("Failed to copy text: ", error$1);
+			setError(true);
+		}
+	};
+	useEffect(() => {
+		if (copied || error) {
+			const timer = setTimeout(() => {
+				setCopied(false);
+				setError(false);
+			}, 1e3);
+			return () => clearTimeout(timer);
+		}
+	}, [copied, error]);
+	const getAriaLabel = () => {
+		if (copied) return "Content copied to clipboard";
+		if (error) return "Failed to copy content";
+		return props.label ?? label.value;
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		Icon: copied ? CopyCheckIcon : CopyIcon,
+		onClick: handleCopy,
+		variant: ButtonVariant.HOVERABLE,
+		color: ButtonColor.TEXT,
+		size: ButtonSize.ICON_SM,
+		tabIndex: 0,
+		title: getAriaLabel(),
+		...props,
+		label: getAriaLabel(),
+		"aria-describedby": copied ? "copy-success" : error ? "copy-error" : void 0
+	});
+};
+
+//#endregion
+export { CopyButton };
+//# sourceMappingURL=index.mjs.map