@intlayer/design-system 6.1.5 → 6.1.6

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

@@ -1,2 +1,4 @@
 export * from './ContentEditor';
+export * from './ContentEditorInput';
+export * from './ContentEditorTextArea';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC"}

package/dist/components/ContentEditor/index.mjs

@@ -1,5 +1,9 @@
 import { ContentEditor } from "./ContentEditor.mjs";
+import { ContentEditorInput } from "./ContentEditorInput.mjs";
+import { ContentEditorTextArea } from "./ContentEditorTextArea.mjs";
 export {
-  ContentEditor
+  ContentEditor,
+  ContentEditorInput,
+  ContentEditorTextArea
 };
 //# sourceMappingURL=index.mjs.map

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

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

package/dist/components/ContentSelector/ContentSelector.cjs

@@ -7,13 +7,21 @@ const ContentSelector = ({
   children,
   onSelect,
   onUnselect,
-  isSelecting
+  isSelecting,
+  pressDuration,
+  className,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   components_PressableSpan_PressableSpan.PressableSpan,
   {
     onPress: onSelect,
     onClickOutside: onUnselect,
     isSelecting,
+    pressDuration,
+    className,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
     children
   }
 );

package/dist/components/ContentSelector/ContentSelector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentSelector.cjs","sources":["../../../src/components/ContentSelector/ContentSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ReactNode } from 'react';\nimport { PressableSpan } from '../PressableSpan';\n\ntype ContentSelectorProps = {\n  children: ReactNode;\n  onSelect: () => void;\n  onUnselect?: () => void;\n  isSelecting?: boolean;\n};\n\nexport const ContentSelector: FC<ContentSelectorProps> = ({\n  children,\n  onSelect,\n  onUnselect,\n  isSelecting,\n}) => (\n  <PressableSpan\n    onPress={onSelect}\n    onClickOutside={onUnselect}\n    isSelecting={isSelecting}\n  >\n    {children}\n  </PressableSpan>\n);\n"],"names":["jsx","PressableSpan"],"mappings":";;;;;AAYO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACEA,2BAAAA;AAAAA,EAACC,uCAAAA;AAAAA,EAAA;AAAA,IACC,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB;AAAA,IAEC;AAAA,EAAA;AACH;;"}
+{"version":3,"file":"ContentSelector.cjs","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"],"names":["jsx","PressableSpan"],"mappings":";;;;;AA2LO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,oBAAoB;AACtB,MACEA,2BAAAA;AAAAA,EAACC,uCAAAA;AAAAA,EAAA;AAAA,IACC,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAY;AAAA,IACZ,oBAAkB;AAAA,IAEjB;AAAA,EAAA;AACH;;"}

package/dist/components/ContentSelector/ContentSelector.d.ts

@@ -1,10 +1,177 @@
 import { FC, ReactNode } from 'react';
+/**
+ * Props for the ContentSelector component
+ */
 type ContentSelectorProps = {
+    /**
+     * The content to be displayed and made selectable
+     * @example
+     * ```tsx
+     * <ContentSelector onSelect={() => startEditing()}>
+     *   <h1>Selectable Heading</h1>
+     * </ContentSelector>
+     * ```
+     */
     children: ReactNode;
+    /**
+     * Callback function triggered when content is selected via long press or keyboard
+     * @example
+     * ```tsx
+     * <ContentSelector
+     *   onSelect={() => setEditMode(true)}
+     *   onUnselect={() => setEditMode(false)}
+     * >
+     *   Click content to edit
+     * </ContentSelector>
+     * ```
+     */
     onSelect: () => void;
+    /**
+     * Optional callback function triggered when clicking outside the selected content
+     * Used to deselect the content and exit edit/selection mode
+     * @example
+     * ```tsx
+     * <ContentSelector
+     *   onSelect={() => enterEditMode()}
+     *   onUnselect={() => exitEditMode()}
+     * >
+     *   Editable content with auto-deselect
+     * </ContentSelector>
+     * ```
+     */
     onUnselect?: () => void;
+    /**
+     * External control for the selection state
+     * When provided, overrides the internal selection state
+     * @example
+     * ```tsx
+     * <ContentSelector
+     *   isSelecting={isInEditMode}
+     *   onSelect={() => {}}
+     * >
+     *   Externally controlled content
+     * </ContentSelector>
+     * ```
+     */
     isSelecting?: boolean;
+    /**
+     * Duration in milliseconds for long press detection
+     * @default 400
+     * @example
+     * ```tsx
+     * <ContentSelector
+     *   pressDuration={600}
+     *   onSelect={() => activateSlowSelection()}
+     * >
+     *   Requires longer press
+     * </ContentSelector>
+     * ```
+     */
+    pressDuration?: number;
+    /**
+     * Additional CSS classes for styling the selectable content
+     * @example
+     * ```tsx
+     * <ContentSelector
+     *   className="border-2 border-dashed border-blue-300"
+     *   onSelect={() => {}}
+     * >
+     *   Styled selectable content
+     * </ContentSelector>
+     * ```
+     */
+    className?: string;
+    /**
+     * ARIA label for accessibility
+     * Provides context about what happens when the content is selected
+     * @example
+     * ```tsx
+     * <ContentSelector
+     *   aria-label="Select to edit this content"
+     *   onSelect={() => {}}
+     * >
+     *   Content with accessibility context
+     * </ContentSelector>
+     * ```
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element providing additional description
+     * @example
+     * ```tsx
+     * <ContentSelector
+     *   aria-describedby="help-text"
+     *   onSelect={() => {}}
+     * >
+     *   Content with help
+     * </ContentSelector>
+     * <div id="help-text">Long press to edit</div>
+     * ```
+     */
+    'aria-describedby'?: string;
 };
+/**
+ * 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>
+ * ```
+ */
 export declare const ContentSelector: FC<ContentSelectorProps>;
 export {};
 //# sourceMappingURL=ContentSelector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentSelector.d.ts","sourceRoot":"","sources":["../../../src/components/ContentSelector/ContentSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3C,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAapD,CAAC"}
+{"version":3,"file":"ContentSelector.d.ts","sourceRoot":"","sources":["../../../src/components/ContentSelector/ContentSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3C;;GAEG;AACH,KAAK,oBAAoB,GAAG;IAC1B;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;;;;;;;OAYG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;;;;;OAYG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AAEH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAqBpD,CAAC"}

package/dist/components/ContentSelector/ContentSelector.mjs

@@ -5,13 +5,21 @@ const ContentSelector = ({
   children,
   onSelect,
   onUnselect,
-  isSelecting
+  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
   }
 );

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

@@ -1 +1 @@
-{"version":3,"file":"ContentSelector.mjs","sources":["../../../src/components/ContentSelector/ContentSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ReactNode } from 'react';\nimport { PressableSpan } from '../PressableSpan';\n\ntype ContentSelectorProps = {\n  children: ReactNode;\n  onSelect: () => void;\n  onUnselect?: () => void;\n  isSelecting?: boolean;\n};\n\nexport const ContentSelector: FC<ContentSelectorProps> = ({\n  children,\n  onSelect,\n  onUnselect,\n  isSelecting,\n}) => (\n  <PressableSpan\n    onPress={onSelect}\n    onClickOutside={onUnselect}\n    isSelecting={isSelecting}\n  >\n    {children}\n  </PressableSpan>\n);\n"],"names":[],"mappings":";;;AAYO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB;AAAA,IAEC;AAAA,EAAA;AACH;"}
+{"version":3,"file":"ContentSelector.mjs","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"],"names":[],"mappings":";;;AA2LO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,oBAAoB;AACtB,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAY;AAAA,IACZ,oBAAkB;AAAA,IAEjB;AAAA,EAAA;AACH;"}

package/dist/components/CopyButton/index.cjs

@@ -8,21 +8,32 @@ const reactIntlayer = require("react-intlayer");
 const components_Button_Button = require("../Button/Button.cjs");
 const CopyButton = ({ content, ...props }) => {
   const [copied, setCopied] = ReactExports.useState(false);
+  const [error, setError] = ReactExports.useState(false);
   const { label } = reactIntlayer.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);
+    } catch (error2) {
+      console.error("Failed to copy text: ", error2);
+      setError(true);
     }
   };
   ReactExports.useEffect(() => {
-    const timer = setTimeout(() => {
-      setCopied(false);
-    }, 1e3);
-    return () => clearTimeout(timer);
-  }, [copied]);
+    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__ */ jsxRuntime.jsx(
     components_Button_Button.Button,
     {
@@ -31,8 +42,12 @@ const CopyButton = ({ content, ...props }) => {
       variant: components_Button_Button.ButtonVariant.HOVERABLE,
       color: components_Button_Button.ButtonColor.TEXT,
       size: components_Button_Button.ButtonSize.ICON_SM,
+      tabIndex: 0,
+      title: getAriaLabel(),
       ...props,
-      label: props.label ?? label.value
+      label: getAriaLabel(),
+      "aria-describedby": copied ? "copy-success" : error ? "copy-error" : void 0,
+      className: `${props.className || ""} ${error ? "text-red-500" : copied ? "text-green-500" : ""}`
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n  Button,\n  ButtonColor,\n  ButtonProps,\n  ButtonSize,\n  ButtonVariant,\n} from '../Button';\n\ntype CopyButtonProps = {\n  content: string;\n} & Partial<ButtonProps>;\n\nexport const CopyButton: FC<CopyButtonProps> = ({ content, ...props }) => {\n  const [copied, setCopied] = useState(false);\n  const { label } = useIntlayer('copy-button');\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n    } catch (error) {\n      console.error('Failed to copy text: ', error);\n    }\n  };\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setCopied(false);\n    }, 1000);\n    return () => clearTimeout(timer);\n  }, [copied]);\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      {...props}\n      label={props.label ?? label.value}\n    />\n  );\n};\n"],"names":["useState","useIntlayer","useEffect","jsx","Button","CopyCheckIcon","CopyIcon","ButtonVariant","ButtonColor","ButtonSize"],"mappings":";;;;;;;;AAiBO,MAAM,aAAkC,CAAC,EAAE,SAAS,GAAG,YAAY;AACxE,QAAM,CAAC,QAAQ,SAAS,IAAIA,aAAAA,SAAS,KAAK;AAC1C,QAAM,EAAE,MAAA,IAAUC,cAAAA,YAAY,aAAa;AAE3C,QAAM,aAAa,YAAY;AAC7B,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,OAAO;AAC3C,gBAAU,IAAI;AAAA,IAChB,SAAS,OAAO;AACd,cAAQ,MAAM,yBAAyB,KAAK;AAAA,IAC9C;AAAA,EACF;AAEAC,eAAAA,UAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM;AAC7B,gBAAU,KAAK;AAAA,IACjB,GAAG,GAAI;AACP,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,MAAM,CAAC;AAEX,SACEC,2BAAAA;AAAAA,IAACC,yBAAAA;AAAAA,IAAA;AAAA,MACC,MAAM,SAASC,YAAAA,gBAAgBC,YAAAA;AAAAA,MAC/B,SAAS;AAAA,MACT,SAASC,yBAAAA,cAAc;AAAA,MACvB,OAAOC,yBAAAA,YAAY;AAAA,MACnB,MAAMC,yBAAAA,WAAW;AAAA,MAChB,GAAG;AAAA,MACJ,OAAO,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAAA;AAGlC;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n  Button,\n  ButtonColor,\n  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      className={`${props.className || ''} ${error ? 'text-red-500' : copied ? 'text-green-500' : ''}`}\n    />\n  );\n};\n"],"names":["useState","useIntlayer","error","useEffect","jsx","Button","CopyCheckIcon","CopyIcon","ButtonVariant","ButtonColor","ButtonSize"],"mappings":";;;;;;;;AAgGO,MAAM,aAAkC,CAAC,EAAE,SAAS,GAAG,YAAY;AACxE,QAAM,CAAC,QAAQ,SAAS,IAAIA,aAAAA,SAAS,KAAK;AAC1C,QAAM,CAAC,OAAO,QAAQ,IAAIA,aAAAA,SAAS,KAAK;AACxC,QAAM,EAAE,MAAA,IAAUC,cAAAA,YAAY,aAAa;AAE3C,QAAM,aAAa,YAAY;AAC7B,QAAI;AACF,eAAS,KAAK;AACd,YAAM,UAAU,UAAU,UAAU,OAAO;AAC3C,gBAAU,IAAI;AAAA,IAChB,SAASC,QAAO;AACd,cAAQ,MAAM,yBAAyBA,MAAK;AAC5C,eAAS,IAAI;AAAA,IACf;AAAA,EACF;AAEAC,eAAAA,UAAU,MAAM;AACd,QAAI,UAAU,OAAO;AACnB,YAAM,QAAQ,WAAW,MAAM;AAC7B,kBAAU,KAAK;AACf,iBAAS,KAAK;AAAA,MAChB,GAAG,GAAI;AACP,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAGlB,QAAM,eAAe,MAAM;AACzB,QAAI,OAAQ,QAAO;AACnB,QAAI,MAAO,QAAO;AAClB,WAAO,MAAM,SAAS,MAAM;AAAA,EAC9B;AAEA,SACEC,2BAAAA;AAAAA,IAACC,yBAAAA;AAAAA,IAAA;AAAA,MACC,MAAM,SAASC,YAAAA,gBAAgBC,YAAAA;AAAAA,MAC/B,SAAS;AAAA,MACT,SAASC,yBAAAA,cAAc;AAAA,MACvB,OAAOC,yBAAAA,YAAY;AAAA,MACnB,MAAMC,yBAAAA,WAAW;AAAA,MACjB,UAAU;AAAA,MACV,OAAO,aAAA;AAAA,MACN,GAAG;AAAA,MACJ,OAAO,aAAA;AAAA,MACP,oBACE,SAAS,iBAAiB,QAAQ,eAAe;AAAA,MAEnD,WAAW,GAAG,MAAM,aAAa,EAAE,IAAI,QAAQ,iBAAiB,SAAS,mBAAmB,EAAE;AAAA,IAAA;AAAA,EAAA;AAGpG;;"}

package/dist/components/CopyButton/index.d.ts

@@ -1,8 +1,86 @@
 import { FC } from 'react';
 import { ButtonProps } from '../Button';
+/**
+ * Props for the CopyButton component
+ */
 type CopyButtonProps = {
+    /**
+     * The text content to copy to the clipboard
+     * @example
+     * ```tsx
+     * <CopyButton content="Hello World!" />
+     * ```
+     */
     content: string;
 } & Partial<ButtonProps>;
+/**
+ * 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>
+ * ```
+ */
 export declare const CopyButton: FC<CopyButtonProps>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/CopyButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CopyButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAGL,WAAW,EAGZ,MAAM,WAAW,CAAC;AAEnB,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAEzB,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA+B1C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CopyButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAGL,WAAW,EAGZ,MAAM,WAAW,CAAC;AAEnB;;GAEG;AACH,KAAK,eAAe,GAAG;IACrB;;;;;;OAMG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AAEH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAkD1C,CAAC"}

package/dist/components/CopyButton/index.mjs

@@ -6,21 +6,32 @@ import { useIntlayer } from "react-intlayer";
 import { Button, ButtonSize, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
 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);
+    } catch (error2) {
+      console.error("Failed to copy text: ", error2);
+      setError(true);
     }
   };
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setCopied(false);
-    }, 1e3);
-    return () => clearTimeout(timer);
-  }, [copied]);
+    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,
     {
@@ -29,8 +40,12 @@ const CopyButton = ({ content, ...props }) => {
       variant: ButtonVariant.HOVERABLE,
       color: ButtonColor.TEXT,
       size: ButtonSize.ICON_SM,
+      tabIndex: 0,
+      title: getAriaLabel(),
       ...props,
-      label: props.label ?? label.value
+      label: getAriaLabel(),
+      "aria-describedby": copied ? "copy-success" : error ? "copy-error" : void 0,
+      className: `${props.className || ""} ${error ? "text-red-500" : copied ? "text-green-500" : ""}`
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n  Button,\n  ButtonColor,\n  ButtonProps,\n  ButtonSize,\n  ButtonVariant,\n} from '../Button';\n\ntype CopyButtonProps = {\n  content: string;\n} & Partial<ButtonProps>;\n\nexport const CopyButton: FC<CopyButtonProps> = ({ content, ...props }) => {\n  const [copied, setCopied] = useState(false);\n  const { label } = useIntlayer('copy-button');\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(content);\n      setCopied(true);\n    } catch (error) {\n      console.error('Failed to copy text: ', error);\n    }\n  };\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setCopied(false);\n    }, 1000);\n    return () => clearTimeout(timer);\n  }, [copied]);\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      {...props}\n      label={props.label ?? label.value}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAiBO,MAAM,aAAkC,CAAC,EAAE,SAAS,GAAG,YAAY;AACxE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,EAAE,MAAA,IAAU,YAAY,aAAa;AAE3C,QAAM,aAAa,YAAY;AAC7B,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,OAAO;AAC3C,gBAAU,IAAI;AAAA,IAChB,SAAS,OAAO;AACd,cAAQ,MAAM,yBAAyB,KAAK;AAAA,IAC9C;AAAA,EACF;AAEA,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM;AAC7B,gBAAU,KAAK;AAAA,IACjB,GAAG,GAAI;AACP,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,MAAM,CAAC;AAEX,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,SAAS,gBAAgB;AAAA,MAC/B,SAAS;AAAA,MACT,SAAS,cAAc;AAAA,MACvB,OAAO,YAAY;AAAA,MACnB,MAAM,WAAW;AAAA,MAChB,GAAG;AAAA,MACJ,OAAO,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EAAA;AAGlC;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/CopyButton/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheckIcon, CopyIcon } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n  Button,\n  ButtonColor,\n  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      className={`${props.className || ''} ${error ? 'text-red-500' : copied ? 'text-green-500' : ''}`}\n    />\n  );\n};\n"],"names":["error"],"mappings":";;;;;;AAgGO,MAAM,aAAkC,CAAC,EAAE,SAAS,GAAG,YAAY;AACxE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,EAAE,MAAA,IAAU,YAAY,aAAa;AAE3C,QAAM,aAAa,YAAY;AAC7B,QAAI;AACF,eAAS,KAAK;AACd,YAAM,UAAU,UAAU,UAAU,OAAO;AAC3C,gBAAU,IAAI;AAAA,IAChB,SAASA,QAAO;AACd,cAAQ,MAAM,yBAAyBA,MAAK;AAC5C,eAAS,IAAI;AAAA,IACf;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,UAAU,OAAO;AACnB,YAAM,QAAQ,WAAW,MAAM;AAC7B,kBAAU,KAAK;AACf,iBAAS,KAAK;AAAA,MAChB,GAAG,GAAI;AACP,aAAO,MAAM,aAAa,KAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAGlB,QAAM,eAAe,MAAM;AACzB,QAAI,OAAQ,QAAO;AACnB,QAAI,MAAO,QAAO;AAClB,WAAO,MAAM,SAAS,MAAM;AAAA,EAC9B;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,SAAS,gBAAgB;AAAA,MAC/B,SAAS;AAAA,MACT,SAAS,cAAc;AAAA,MACvB,OAAO,YAAY;AAAA,MACnB,MAAM,WAAW;AAAA,MACjB,UAAU;AAAA,MACV,OAAO,aAAA;AAAA,MACN,GAAG;AAAA,MACJ,OAAO,aAAA;AAAA,MACP,oBACE,SAAS,iBAAiB,QAAQ,eAAe;AAAA,MAEnD,WAAW,GAAG,MAAM,aAAa,EAAE,IAAI,QAAQ,iBAAiB,SAAS,mBAAmB,EAAE;AAAA,IAAA;AAAA,EAAA;AAGpG;"}

package/dist/components/CopyToClipboard/index.cjs

@@ -8,44 +8,80 @@ const utils_cn = require("../../utils/cn.cjs");
 const CopyToClipboard = ({
   text,
   children,
-  className
+  className,
+  "aria-label": ariaLabel = "Copy to clipboard",
+  "aria-copied-label": ariaCopiedLabel = "Copied to clipboard",
+  feedbackDuration = 2e3,
+  onCopySuccess,
+  onCopyError
 }) => {
   const [isCopied, setIsCopied] = ReactExports.useState(false);
-  const handleCopy = () => {
-    navigator.clipboard.writeText(text).then(() => {
+  const [copyError, setCopyError] = ReactExports.useState(null);
+  const handleCopy = async () => {
+    if (!text) return;
+    try {
+      setCopyError(null);
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        textArea.style.position = "fixed";
+        textArea.style.left = "-999999px";
+        textArea.style.top = "-999999px";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textArea);
+      }
       setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 1e3);
-    });
+      setTimeout(() => setIsCopied(false), feedbackDuration);
+      onCopySuccess?.();
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to copy to clipboard";
+      setCopyError(errorMessage);
+      onCopyError?.(error instanceof Error ? error : new Error(errorMessage));
+      setTimeout(() => setCopyError(null), feedbackDuration);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleCopy();
+    }
   };
+  const currentAriaLabel = copyError ? `Error copying to clipboard: ${copyError}` : isCopied ? ariaCopiedLabel : ariaLabel;
+  const IconComponent = copyError ? lucideReact.CopyIcon : isCopied ? lucideReact.CopyCheck : lucideReact.CopyIcon;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       className: utils_cn.cn(
-        "inline-block gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5",
+        "inline-flex gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5",
         className
       ),
       onClick: handleCopy,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": currentAriaLabel,
+      "aria-pressed": isCopied,
+      "data-testid": "copy-to-clipboard",
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: text && (isCopied ? /* @__PURE__ */ jsxRuntime.jsx(
-          lucideReact.CopyCheck,
-          {
-            size: 12,
-            "aria-label": "copied",
-            role: "button",
-            "data-testid": "copy-to-clipboard",
-            className: "ml-1 mt-1"
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          lucideReact.CopyIcon,
+        text && /* @__PURE__ */ jsxRuntime.jsx(
+          IconComponent,
           {
             size: 12,
-            "aria-label": "copy",
-            role: "button",
-            "data-testid": "copy-to-clipboard",
-            className: "ml-1 mt-1 cursor-pointer"
+            className: utils_cn.cn(
+              "ml-1 transition-colors duration-200",
+              copyError && "text-destructive",
+              isCopied && "text-success",
+              !copyError && !isCopied && "text-muted-foreground hover:text-foreground"
+            ),
+            "aria-hidden": "true"
           }
-        )) })
+        )
       ]
     }
   );