@intlayer/design-system 8.1.2 → 8.1.3

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

@@ -1,114 +1,2 @@
-'use client';
-
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
-import { useUser } from "../../hooks/useUser/index.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 };
+"use client";import{Button as e,ButtonColor as t,ButtonSize as n,ButtonVariant as r}from"../Button/Button.mjs";import{AutoCompleteTextarea as i}from"../TextArea/AutocompleteTextArea.mjs";import{useUser as a}from"../../hooks/useUser/index.mjs";import{Check as o,X as s}from"lucide-react";import{useEffect as c,useState as l}from"react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";const p=({children:p,onContentChange:m,disabled:h,validate:g,additionalButtons:_,...v})=>{let{isAuthenticated:y}=a(),[b,x]=l(p),[S,C]=l(0),w=b!==p,T=()=>{x(p),C(e=>e+1)},E=()=>{m(b)},D=e=>x(e.currentTarget.value??``),O=e=>{e.key===`Enter`&&(e.metaKey||e.ctrlKey)&&!h&&k?(e.preventDefault(),E()):e.key===`Escape`&&(e.preventDefault(),T())};c(()=>{x(p),C(e=>e+1)},[p]);let k=g?.(b)??!0;return f(`div`,{className:`flex size-full flex-col items-center justify-between gap-2`,role:`group`,"aria-label":`Content editor textarea`,children:[d(i,{onChange:D,onKeyDown:O,variant:`invisible`,className:`size-full`,value:p,isActive:y,disabled:h,"aria-label":`Editable textarea content`,"aria-describedby":w||_?`content-editor-textarea-actions`:void 0,"aria-invalid":!k,...v},S),(w||_)&&f(`div`,{id:`content-editor-textarea-actions`,className:`flex w-full items-center justify-end gap-2`,role:`group`,"aria-label":`Edit actions`,children:[w&&f(u,{children:[d(e,{Icon:o,label:`Save changes${k?``:` (invalid content)`}`,variant:r.HOVERABLE,color:t.TEXT,size:n.ICON_SM,className:`cursor-pointer hover:scale-110`,disabled:h||!k,onClick:E,"aria-describedby":k?void 0:`textarea-validation-error`}),d(e,{Icon:s,label:`Cancel changes`,variant:r.HOVERABLE,size:n.ICON_SM,color:t.TEXT,className:`cursor-pointer hover:scale-110`,onClick:T,disabled:h})]}),_]})]},p)};export{p as ContentEditorTextArea};
 //# sourceMappingURL=ContentEditorTextArea.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorTextArea.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useUser } from '@hooks/useUser';\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 { 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,MAAa,yBAAyD,EACpE,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,EAAE,oBAAoB,SAAS;CACrC,MAAM,CAAC,UAAU,eAAe,SAAiB,SAAS;CAC1D,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,EAAE;CACnE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;AACzB,cAAY,SAAS;AACrB,uBAAqB,SAAS,OAAO,EAAE;;CAGzC,MAAM,oBAAoB;AACxB,kBAAgB,SAAS;;CAG3B,MAAM,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"}
+{"version":3,"file":"ContentEditorTextArea.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useUser } from '@hooks/useUser';\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 { 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":"+YAyDA,MAAa,GAAyD,CACpE,WACA,kBACA,WACA,WACA,oBACA,GAAG,KACC,CACJ,GAAM,CAAE,mBAAoB,GAAS,CAC/B,CAAC,EAAU,GAAe,EAAiB,EAAS,CACpD,CAAC,EAAkB,GAAuB,EAAiB,EAAE,CAC7D,EAAoB,IAAa,EAEjC,MAAqB,CACzB,EAAY,EAAS,CACrB,EAAqB,GAAS,EAAO,EAAE,EAGnC,MAAoB,CACxB,EAAgB,EAAS,EAGrB,EAAkE,GACtE,EAAY,EAAE,cAAc,OAAS,GAAG,CAEpC,EAAiB,GAAgD,CACjE,EAAE,MAAQ,UAAY,EAAE,SAAW,EAAE,UAAY,CAAC,GAAY,GAChE,EAAE,gBAAgB,CAClB,GAAa,EACJ,EAAE,MAAQ,WACnB,EAAE,gBAAgB,CAClB,GAAc,GAIlB,MAAgB,CACd,EAAY,EAAS,CAErB,EAAqB,GAAS,EAAO,EAAE,EACtC,CAAC,EAAS,CAAC,CAEd,IAAM,EAAU,IAAW,EAAS,EAAI,GAExC,OACE,EAAC,MAAA,CACC,UAAU,6DAEV,KAAK,QACL,aAAW,oCAEX,EAAC,EAAA,CACC,SAAU,EACV,UAAW,EAEX,QAAQ,YACR,UAAU,YACV,MAAO,EACP,SAAU,EACA,WACV,aAAW,4BACX,mBACE,GAAY,EACR,kCACA,IAAA,GAEN,eAAc,CAAC,EACf,GAAI,GAbC,EAcL,EACA,GAAY,IACZ,EAAC,MAAA,CACC,GAAG,kCACH,UAAU,6CACV,KAAK,QACL,aAAW,yBAEV,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,CACC,KAAM,EACN,MAAO,eAAgB,EAAiC,GAAvB,uBACjC,QAAS,EAAc,UACvB,MAAO,EAAY,KACnB,KAAM,EAAW,QACjB,UAAU,iCACV,SAAU,GAAY,CAAC,EACvB,QAAS,EACT,mBACG,EAAwC,IAAA,GAA9B,6BAEb,CACF,EAAC,EAAA,CACC,KAAM,EACN,MAAM,iBACN,QAAS,EAAc,UACvB,KAAM,EAAW,QACjB,MAAO,EAAY,KACnB,UAAU,iCACV,QAAS,EACC,YACV,CAAA,CAAA,CACD,CAEJ,EAAA,EACG,CAAA,EAzDH,EA2DD"}

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

@@ -1,5 +1 @@
-import { ContentEditorInput } from "./ContentEditorInput.mjs";
-import { ContentEditorTextArea } from "./ContentEditorTextArea.mjs";
-import { ContentEditor } from "./ContentEditor.mjs";
-
-export { ContentEditor, ContentEditorInput, ContentEditorTextArea };
+import{ContentEditorInput as e}from"./ContentEditorInput.mjs";import{ContentEditorTextArea as t}from"./ContentEditorTextArea.mjs";import{ContentEditor as n}from"./ContentEditor.mjs";export{n as ContentEditor,e as ContentEditorInput,t as ContentEditorTextArea};

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

@@ -1,82 +1,2 @@
-'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 };
+"use client";import{PressableSpan as e}from"../PressableSpan/PressableSpan.mjs";import{jsx as t}from"react/jsx-runtime";const n=({children:n,onSelect:r,onUnselect:i,isSelecting:a,pressDuration:o,className:s,"aria-label":c,"aria-describedby":l})=>t(e,{onPress:r,onClickOutside:i,isSelecting:a,pressDuration:o,className:s,"aria-label":c,"aria-describedby":l,children:n});export{n as ContentSelector};
 //# sourceMappingURL=ContentSelector.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentSelector.mjs","names":[],"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,MAAa,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"}
+{"version":3,"file":"ContentSelector.mjs","names":[],"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":"wHA2LA,MAAa,GAA6C,CACxD,WACA,WACA,aACA,cACA,gBACA,YACA,aAAc,EACd,mBAAoB,KAEpB,EAAC,EAAA,CACC,QAAS,EACT,eAAgB,EACH,cACE,gBACJ,YACX,aAAY,EACZ,mBAAkB,EAEjB,YACa"}

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

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

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

@@ -1,33 +1,2 @@
-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",
-		uk: "Копіювати вміст"
-	}) },
-	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"]
-};
-
-//#endregion
-export { copyContentContent, copyContentContent as default };
+import{t as e}from"intlayer";const t={key:`copy-button`,content:{label:e({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`,uk:`Копіювати вміст`})},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`]};export{t as copyContentContent,t as default};
 //# sourceMappingURL=CopyButton.content.mjs.map

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

@@ -1 +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      uk: 'Копіювати вміст',\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;EACJ,IAAI;EACL,CAAC,EACH;CACD,OAAO;CACP,aACE;CACF,MAAM,CAAC,oBAAoB,gBAAgB;CAC5C"}
+{"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      uk: 'Копіювати вміст',\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":"6BAEA,MAAa,EAAqB,CAChC,IAAK,cACL,QAAS,CACP,MAAO,EAAE,CACP,GAAI,eACJ,GAAI,oBACJ,GAAI,mBACJ,QAAS,eACT,GAAI,kBACJ,GAAI,YACJ,GAAI,SACJ,GAAI,OACJ,GAAI,kBACJ,GAAI,kBACJ,GAAI,oBACJ,GAAI,cACJ,GAAI,wBACJ,GAAI,kBACJ,GAAI,mBACJ,GAAI,eACJ,GAAI,oBACJ,GAAI,kBACL,CAAC,CACH,CACD,MAAO,oBACP,YACE,mHACF,KAAM,CAAC,mBAAoB,gBAAgB,CAC5C"}

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

@@ -1,122 +1,2 @@
-'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) {
-			console.error("Failed to copy text: ", error);
-			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 };
+"use client";import{Button as e,ButtonColor as t,ButtonSize as n,ButtonVariant as r}from"../Button/Button.mjs";import{CopyCheckIcon as i,CopyIcon as a}from"lucide-react";import{useEffect as o,useState as s}from"react";import{jsx as c}from"react/jsx-runtime";import{useIntlayer as l}from"react-intlayer";const u=({content:u,...d})=>{let[f,p]=s(!1),[m,h]=s(!1),{label:g}=l(`copy-button`),_=async()=>{try{h(!1),await navigator.clipboard.writeText(u),p(!0)}catch(e){console.error(`Failed to copy text: `,e),h(!0)}};o(()=>{if(f||m){let e=setTimeout(()=>{p(!1),h(!1)},1e3);return()=>clearTimeout(e)}},[f,m]);let v=()=>f?`Content copied to clipboard`:m?`Failed to copy content`:d.label??g.value;return c(e,{Icon:f?i:a,onClick:_,variant:r.HOVERABLE,color:t.TEXT,size:n.ICON_SM,tabIndex:0,title:v(),...d,label:v(),"aria-describedby":f?`copy-success`:m?`copy-error`:void 0})};export{u as CopyButton};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { type FC, useEffect, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n  Button,\n  ButtonColor,\n  type ButtonProps,\n  ButtonSize,\n  ButtonVariant,\n} from '../Button';\n\n/**\n * Props for the CopyButton component\n */\ntype CopyButtonProps = {\n  /**\n   * The text content to copy to the clipboard\n   * @example\n   * ```tsx\n   * <CopyButton content=\"Hello World!\" />\n   * ```\n   */\n  content: string;\n} & Partial<ButtonProps>;\n\n/**\n * CopyButton - A specialized button component for copying text to the clipboard\n *\n * This component provides a user-friendly way to copy text content to the system clipboard\n * with visual feedback and accessibility features. It uses the modern Clipboard API with\n * fallback error handling, and provides clear visual indication of successful copy operations.\n *\n * ## Key Features\n * - **Clipboard Integration**: Uses modern Clipboard API for reliable text copying\n * - **Visual Feedback**: Icon changes from copy to check mark on successful copy\n * - **Auto-Reset**: Automatically reverts to copy icon after 1 second\n * - **Error Handling**: Graceful error handling with console logging\n * - **Accessibility**: Full keyboard navigation and screen reader support\n * - **Internationalization**: Multi-language support via Intlayer\n *\n * ## Use Cases\n * - Code snippet copying in documentation\n * - Sharing URLs or links\n * - Copying configuration values\n * - Form data duplication\n * - API key or token copying\n * - Text content sharing in interfaces\n *\n * ## Accessibility\n * - Uses semantic button element with proper ARIA labeling\n * - Keyboard accessible (Tab, Enter, Space)\n * - Screen reader announces copy actions\n * - Focus management with visible indicators\n * - Proper error state handling for assistive technologies\n *\n * ## Browser Compatibility\n * - Requires modern browsers with Clipboard API support\n * - Falls back gracefully with error logging for unsupported browsers\n * - Works in secure contexts (HTTPS) as required by Clipboard API\n *\n * @example\n * Basic usage:\n * ```tsx\n * <CopyButton content=\"Text to copy\" />\n * ```\n *\n * @example\n * With custom styling and label:\n * ```tsx\n * <CopyButton\n *   content=\"https://example.com/api/endpoint\"\n *   label=\"Copy API endpoint\"\n *   variant={ButtonVariant.OUTLINE}\n *   color={ButtonColor.PRIMARY}\n *   size={ButtonSize.ICON_MD}\n * />\n * ```\n *\n * @example\n * In a code block context:\n * ```tsx\n * <div className=\"relative\">\n *   <pre className=\"bg-gray-100 p-4 rounded\">\n *     <code>npm install @intlayer/design-system</code>\n *   </pre>\n *   <CopyButton\n *     content=\"npm install @intlayer/design-system\"\n *     className=\"absolute top-2 right-2\"\n *     label=\"Copy installation command\"\n *   />\n * </div>\n * ```\n */\n\nexport const CopyButton: FC<CopyButtonProps> = ({ content, ...props }) => {\n  const [copied, setCopied] = useState(false);\n  const [error, setError] = useState(false);\n  const { label } = useIntlayer('copy-button');\n\n  const handleCopy = async () => {\n    try {\n      setError(false);\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n    } catch (error) {\n      console.error('Failed to copy text: ', error);\n      setError(true);\n    }\n  };\n\n  useEffect(() => {\n    if (copied || error) {\n      const timer = setTimeout(() => {\n        setCopied(false);\n        setError(false);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n  }, [copied, error]);\n\n  // Determine the current state for accessibility\n  const getAriaLabel = () => {\n    if (copied) return 'Content copied to clipboard';\n    if (error) return 'Failed to copy content';\n    return props.label ?? label.value;\n  };\n\n  return (\n    <Button\n      Icon={copied ? CopyCheckIcon : CopyIcon}\n      onClick={handleCopy}\n      variant={ButtonVariant.HOVERABLE}\n      color={ButtonColor.TEXT}\n      size={ButtonSize.ICON_SM}\n      tabIndex={0}\n      title={getAriaLabel()}\n      {...props}\n      label={getAriaLabel()}\n      aria-describedby={\n        copied ? 'copy-success' : error ? 'copy-error' : undefined\n      }\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAa,cAAmC,EAAE,SAAS,GAAG,YAAY;CACxE,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,EAAE,UAAU,YAAY,cAAc;CAE5C,MAAM,aAAa,YAAY;AAC7B,MAAI;AACF,YAAS,MAAM;AACf,SAAM,UAAU,UAAU,UAAU,QAAQ;AAC5C,aAAU,KAAK;WACR,OAAO;AACd,WAAQ,MAAM,yBAAyB,MAAM;AAC7C,YAAS,KAAK;;;AAIlB,iBAAgB;AACd,MAAI,UAAU,OAAO;GACnB,MAAM,QAAQ,iBAAiB;AAC7B,cAAU,MAAM;AAChB,aAAS,MAAM;MACd,IAAK;AACR,gBAAa,aAAa,MAAM;;IAEjC,CAAC,QAAQ,MAAM,CAAC;CAGnB,MAAM,qBAAqB;AACzB,MAAI,OAAQ,QAAO;AACnB,MAAI,MAAO,QAAO;AAClB,SAAO,MAAM,SAAS,MAAM;;AAG9B,QACE,oBAAC;EACC,MAAM,SAAS,gBAAgB;EAC/B,SAAS;EACT,SAAS,cAAc;EACvB,OAAO,YAAY;EACnB,MAAM,WAAW;EACjB,UAAU;EACV,OAAO,cAAc;EACrB,GAAI;EACJ,OAAO,cAAc;EACrB,oBACE,SAAS,iBAAiB,QAAQ,eAAe;GAEnD"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { type FC, useEffect, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n  Button,\n  ButtonColor,\n  type ButtonProps,\n  ButtonSize,\n  ButtonVariant,\n} from '../Button';\n\n/**\n * Props for the CopyButton component\n */\ntype CopyButtonProps = {\n  /**\n   * The text content to copy to the clipboard\n   * @example\n   * ```tsx\n   * <CopyButton content=\"Hello World!\" />\n   * ```\n   */\n  content: string;\n} & Partial<ButtonProps>;\n\n/**\n * CopyButton - A specialized button component for copying text to the clipboard\n *\n * This component provides a user-friendly way to copy text content to the system clipboard\n * with visual feedback and accessibility features. It uses the modern Clipboard API with\n * fallback error handling, and provides clear visual indication of successful copy operations.\n *\n * ## Key Features\n * - **Clipboard Integration**: Uses modern Clipboard API for reliable text copying\n * - **Visual Feedback**: Icon changes from copy to check mark on successful copy\n * - **Auto-Reset**: Automatically reverts to copy icon after 1 second\n * - **Error Handling**: Graceful error handling with console logging\n * - **Accessibility**: Full keyboard navigation and screen reader support\n * - **Internationalization**: Multi-language support via Intlayer\n *\n * ## Use Cases\n * - Code snippet copying in documentation\n * - Sharing URLs or links\n * - Copying configuration values\n * - Form data duplication\n * - API key or token copying\n * - Text content sharing in interfaces\n *\n * ## Accessibility\n * - Uses semantic button element with proper ARIA labeling\n * - Keyboard accessible (Tab, Enter, Space)\n * - Screen reader announces copy actions\n * - Focus management with visible indicators\n * - Proper error state handling for assistive technologies\n *\n * ## Browser Compatibility\n * - Requires modern browsers with Clipboard API support\n * - Falls back gracefully with error logging for unsupported browsers\n * - Works in secure contexts (HTTPS) as required by Clipboard API\n *\n * @example\n * Basic usage:\n * ```tsx\n * <CopyButton content=\"Text to copy\" />\n * ```\n *\n * @example\n * With custom styling and label:\n * ```tsx\n * <CopyButton\n *   content=\"https://example.com/api/endpoint\"\n *   label=\"Copy API endpoint\"\n *   variant={ButtonVariant.OUTLINE}\n *   color={ButtonColor.PRIMARY}\n *   size={ButtonSize.ICON_MD}\n * />\n * ```\n *\n * @example\n * In a code block context:\n * ```tsx\n * <div className=\"relative\">\n *   <pre className=\"bg-gray-100 p-4 rounded\">\n *     <code>npm install @intlayer/design-system</code>\n *   </pre>\n *   <CopyButton\n *     content=\"npm install @intlayer/design-system\"\n *     className=\"absolute top-2 right-2\"\n *     label=\"Copy installation command\"\n *   />\n * </div>\n * ```\n */\n\nexport const CopyButton: FC<CopyButtonProps> = ({ content, ...props }) => {\n  const [copied, setCopied] = useState(false);\n  const [error, setError] = useState(false);\n  const { label } = useIntlayer('copy-button');\n\n  const handleCopy = async () => {\n    try {\n      setError(false);\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n    } catch (error) {\n      console.error('Failed to copy text: ', error);\n      setError(true);\n    }\n  };\n\n  useEffect(() => {\n    if (copied || error) {\n      const timer = setTimeout(() => {\n        setCopied(false);\n        setError(false);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n  }, [copied, error]);\n\n  // Determine the current state for accessibility\n  const getAriaLabel = () => {\n    if (copied) return 'Content copied to clipboard';\n    if (error) return 'Failed to copy content';\n    return props.label ?? label.value;\n  };\n\n  return (\n    <Button\n      Icon={copied ? CopyCheckIcon : CopyIcon}\n      onClick={handleCopy}\n      variant={ButtonVariant.HOVERABLE}\n      color={ButtonColor.TEXT}\n      size={ButtonSize.ICON_SM}\n      tabIndex={0}\n      title={getAriaLabel()}\n      {...props}\n      label={getAriaLabel()}\n      aria-describedby={\n        copied ? 'copy-success' : error ? 'copy-error' : undefined\n      }\n    />\n  );\n};\n"],"mappings":"+SAgGA,MAAa,GAAmC,CAAE,UAAS,GAAG,KAAY,CACxE,GAAM,CAAC,EAAQ,GAAa,EAAS,GAAM,CACrC,CAAC,EAAO,GAAY,EAAS,GAAM,CACnC,CAAE,SAAU,EAAY,cAAc,CAEtC,EAAa,SAAY,CAC7B,GAAI,CACF,EAAS,GAAM,CACf,MAAM,UAAU,UAAU,UAAU,EAAQ,CAC5C,EAAU,GAAK,OACR,EAAO,CACd,QAAQ,MAAM,wBAAyB,EAAM,CAC7C,EAAS,GAAK,GAIlB,MAAgB,CACd,GAAI,GAAU,EAAO,CACnB,IAAM,EAAQ,eAAiB,CAC7B,EAAU,GAAM,CAChB,EAAS,GAAM,EACd,IAAK,CACR,UAAa,aAAa,EAAM,GAEjC,CAAC,EAAQ,EAAM,CAAC,CAGnB,IAAM,MACA,EAAe,8BACf,EAAc,yBACX,EAAM,OAAS,EAAM,MAG9B,OACE,EAAC,EAAA,CACC,KAAM,EAAS,EAAgB,EAC/B,QAAS,EACT,QAAS,EAAc,UACvB,MAAO,EAAY,KACnB,KAAM,EAAW,QACjB,SAAU,EACV,MAAO,GAAc,CACrB,GAAI,EACJ,MAAO,GAAc,CACrB,mBACE,EAAS,eAAiB,EAAQ,aAAe,IAAA,IAEnD"}

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

@@ -1,102 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { CopyCheck, CopyIcon } from "lucide-react";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/CopyToClipboard/index.tsx
-const useCopyToClipboard = (text, feedbackDuration = 2e3, onCopySuccess, onCopyError) => {
-	const [isCopied, setIsCopied] = useState(false);
-	const copy = async () => {
-		if (!text) return;
-		try {
-			if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(text);
-			else {
-				onCopyError?.(/* @__PURE__ */ new Error("Clipboard API not supported in this browser"));
-				return;
-			}
-			setIsCopied(true);
-			setTimeout(() => setIsCopied(false), feedbackDuration);
-			onCopySuccess?.();
-		} catch (error) {
-			const errorMessage = error instanceof Error ? error.message : "Failed to copy to clipboard";
-			onCopyError?.(error instanceof Error ? error : new Error(errorMessage));
-		}
-	};
-	return {
-		isCopied,
-		copy
-	};
-};
-/**
-* CopyToClipboard Component
-*
-* A versatile component that allows users to copy text to their clipboard with visual feedback.
-* Provides accessibility features, customizable feedback duration, and error handling.
-*
-* @example
-* ```tsx
-* // Basic usage
-* <CopyToClipboard text="Hello World">
-* <span>Click to copy</span>
-* </CopyToClipboard>
-*
-* // With custom styling, callbacks, and icon size
-* <CopyToClipboard
-* text="npm install @intlayer/design-system"
-* className="bg-gray-100 p-2"
-* feedbackDuration={3000}
-* size={20}
-* onCopySuccess={() => console.log('Copied!')}
-* >
-* <code>npm install @intlayer/design-system</code>
-* </CopyToClipboard>
-* ```
-*
-* @component
-* @accessibility
-* - Uses proper ARIA labels for copy and copied states
-* - Supports keyboard navigation (Enter and Space keys)
-* - Announces state changes to screen readers
-* - Provides visual focus indicators
-*/
-const CopyToClipboard = ({ text, children, className, "aria-label": ariaLabel = "Copy to clipboard", "aria-copied-label": ariaCopiedLabel = "Copied to clipboard", feedbackDuration = 2e3, onCopySuccess, onCopyError, disable, preventDefault = true, stopPropagation = true, size = 14 }) => {
-	const { isCopied, copy } = useCopyToClipboard(text, feedbackDuration, onCopySuccess, onCopyError);
-	if (disable) return /* @__PURE__ */ jsx("span", {
-		className,
-		children
-	});
-	const handleKeyDown = (event) => {
-		if (event.key === "Enter" || event.key === " ") handleCopy(event);
-	};
-	const handleCopy = (event) => {
-		if (preventDefault) event.preventDefault();
-		if (stopPropagation) event.stopPropagation();
-		copy();
-	};
-	const currentAriaLabel = isCopied ? ariaCopiedLabel : ariaLabel;
-	const IconComponent = isCopied ? CopyCheck : CopyIcon;
-	return /* @__PURE__ */ jsxs("span", {
-		className: cn("inline-flex max-w-full cursor-pointer items-center gap-2 rounded-md p-0.5 hover:bg-neutral/10", className),
-		onClick: handleCopy,
-		onKeyDown: handleKeyDown,
-		role: "button",
-		tabIndex: 0,
-		"aria-label": currentAriaLabel,
-		"aria-pressed": isCopied,
-		"data-testid": "copy-to-clipboard",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "min-w-0 break-all",
-			children
-		}), text && /* @__PURE__ */ jsx(IconComponent, {
-			className: "ml-1 ml-auto shrink-0",
-			size,
-			"aria-hidden": "true"
-		})]
-	});
-};
-
-//#endregion
-export { CopyToClipboard, useCopyToClipboard };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{CopyCheck as t,CopyIcon as n}from"lucide-react";import{useState as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=(e,t=2e3,n,i)=>{let[a,o]=r(!1);return{isCopied:a,copy:async()=>{if(e)try{if(navigator.clipboard?.writeText)await navigator.clipboard.writeText(e);else{i?.(Error(`Clipboard API not supported in this browser`));return}o(!0),setTimeout(()=>o(!1),t),n?.()}catch(e){let t=e instanceof Error?e.message:`Failed to copy to clipboard`;i?.(e instanceof Error?e:Error(t))}}}},s=({text:r,children:s,className:c,"aria-label":l=`Copy to clipboard`,"aria-copied-label":u=`Copied to clipboard`,feedbackDuration:d=2e3,onCopySuccess:f,onCopyError:p,disable:m,preventDefault:h=!0,stopPropagation:g=!0,size:_=14})=>{let{isCopied:v,copy:y}=o(r,d,f,p);if(m)return i(`span`,{className:c,children:s});let b=e=>{(e.key===`Enter`||e.key===` `)&&x(e)},x=e=>{h&&e.preventDefault(),g&&e.stopPropagation(),y()},S=v?u:l,C=v?t:n;return a(`span`,{className:e(`inline-flex max-w-full cursor-pointer items-center gap-2 rounded-md p-0.5 hover:bg-neutral/10`,c),onClick:x,onKeyDown:b,role:`button`,tabIndex:0,"aria-label":S,"aria-pressed":v,"data-testid":`copy-to-clipboard`,children:[i(`span`,{className:`min-w-0 break-all`,children:s}),r&&i(C,{className:`ml-1 ml-auto shrink-0`,size:_,"aria-hidden":`true`})]})};export{s as CopyToClipboard,o as useCopyToClipboard};
 //# sourceMappingURL=index.mjs.map