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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { type FC, type PropsWithChildren, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type CopyToClipboardProps = PropsWithChildren<{\n  text: string;\n  className?: string;\n}>;\n\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(text).then(() => {\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 1000);\n    });\n  };\n\n  return (\n    <span\n      className={cn(\n        'inline-block gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5',\n        className\n      )}\n      onClick={handleCopy}\n    >\n      {children}\n\n      <span className=\"inline-flex\">\n        {text &&\n          (isCopied ? (\n            <CopyCheck\n              size={12}\n              aria-label=\"copied\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1\"\n            />\n          ) : (\n            <CopyIcon\n              size={12}\n              aria-label=\"copy\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1 cursor-pointer\"\n            />\n          ))}\n      </span>\n    </span>\n  );\n};\n"],"names":["useState","jsxs","cn","jsx","CopyCheck","CopyIcon"],"mappings":";;;;;;;AAWO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAS,KAAK;AAE9C,QAAM,aAAa,MAAM;AACvB,cAAU,UAAU,UAAU,IAAI,EAAE,KAAK,MAAM;AAC7C,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,GAAI;AAAA,IAC3C,CAAC;AAAA,EACH;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MAER,UAAA;AAAA,QAAA;AAAA,QAEDC,2BAAAA,IAAC,QAAA,EAAK,WAAU,eACb,mBACE,WACCA,2BAAAA;AAAAA,UAACC,YAAAA;AAAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,cAAW;AAAA,YACX,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA,IAGZD,2BAAAA;AAAAA,UAACE,YAAAA;AAAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,cAAW;AAAA,YACX,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA,GACZ,CAEN;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { type FC, type PropsWithChildren, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the CopyToClipboard component\n */\nexport interface CopyToClipboardProps extends PropsWithChildren {\n  /**\n   * The text to copy to the clipboard when clicked\n   * @example \"Hello World\"\n   * @example \"npm install @intlayer/design-system\"\n   */\n  text: string;\n\n  /**\n   * Additional CSS classes for the wrapper element\n   * @example \"bg-blue-100 text-blue-800\"\n   */\n  className?: string;\n\n  /**\n   * Accessible label for screen readers when copy operation is available\n   * @default \"Copy to clipboard\"\n   */\n  'aria-label'?: string;\n\n  /**\n   * Accessible label for screen readers when content has been copied\n   * @default \"Copied to clipboard\"\n   */\n  'aria-copied-label'?: string;\n\n  /**\n   * Duration in milliseconds to show the \"copied\" state\n   * @default 2000\n   */\n  feedbackDuration?: number;\n\n  /**\n   * Callback function called when copy operation succeeds\n   */\n  onCopySuccess?: () => void;\n\n  /**\n   * Callback function called when copy operation fails\n   */\n  onCopyError?: (error: Error) => void;\n}\n\n/**\n * CopyToClipboard Component\n *\n * A versatile component that allows users to copy text to their clipboard with visual feedback.\n * Provides accessibility features, customizable feedback duration, and error handling.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <CopyToClipboard text=\"Hello World\">\n *   <span>Click to copy</span>\n * </CopyToClipboard>\n *\n * // With custom styling and callbacks\n * <CopyToClipboard\n *   text=\"npm install @intlayer/design-system\"\n *   className=\"bg-gray-100 p-2\"\n *   feedbackDuration={3000}\n *   onCopySuccess={() => console.log('Copied!')}\n * >\n *   <code>npm install @intlayer/design-system</code>\n * </CopyToClipboard>\n * ```\n *\n * @component\n * @accessibility\n * - Uses proper ARIA labels for copy and copied states\n * - Supports keyboard navigation (Enter and Space keys)\n * - Announces state changes to screen readers\n * - Provides visual focus indicators\n */\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n  'aria-label': ariaLabel = 'Copy to clipboard',\n  'aria-copied-label': ariaCopiedLabel = 'Copied to clipboard',\n  feedbackDuration = 2000,\n  onCopySuccess,\n  onCopyError,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const [copyError, setCopyError] = useState<string | null>(null);\n\n  const handleCopy = async () => {\n    if (!text) return;\n\n    try {\n      setCopyError(null);\n\n      if (navigator.clipboard && navigator.clipboard.writeText) {\n        await navigator.clipboard.writeText(text);\n      } else {\n        // Fallback for older browsers\n        const textArea = document.createElement('textarea');\n        textArea.value = text;\n        textArea.style.position = 'fixed';\n        textArea.style.left = '-999999px';\n        textArea.style.top = '-999999px';\n        document.body.appendChild(textArea);\n        textArea.focus();\n        textArea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textArea);\n      }\n\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), feedbackDuration);\n      onCopySuccess?.();\n    } catch (error) {\n      const errorMessage =\n        error instanceof Error ? error.message : 'Failed to copy to clipboard';\n      setCopyError(errorMessage);\n      onCopyError?.(error instanceof Error ? error : new Error(errorMessage));\n\n      // Clear error after feedback duration\n      setTimeout(() => setCopyError(null), feedbackDuration);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      handleCopy();\n    }\n  };\n\n  const currentAriaLabel = copyError\n    ? `Error copying to clipboard: ${copyError}`\n    : isCopied\n      ? ariaCopiedLabel\n      : ariaLabel;\n\n  const IconComponent = copyError ? CopyIcon : isCopied ? CopyCheck : CopyIcon;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5',\n        className\n      )}\n      onClick={handleCopy}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={currentAriaLabel}\n      aria-pressed={isCopied}\n      data-testid=\"copy-to-clipboard\"\n    >\n      {children}\n\n      {text && (\n        <IconComponent\n          size={12}\n          className={cn(\n            'ml-1 transition-colors duration-200',\n            copyError && 'text-destructive',\n            isCopied && 'text-success',\n            !copyError &&\n              !isCopied &&\n              'text-muted-foreground hover:text-foreground'\n          )}\n          aria-hidden=\"true\"\n        />\n      )}\n    </span>\n  );\n};\n"],"names":["useState","CopyIcon","CopyCheck","jsxs","cn","jsx"],"mappings":";;;;;;;AAmFO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,qBAAqB,kBAAkB;AAAA,EACvC,mBAAmB;AAAA,EACnB;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAIA,aAAAA,SAAwB,IAAI;AAE9D,QAAM,aAAa,YAAY;AAC7B,QAAI,CAAC,KAAM;AAEX,QAAI;AACF,mBAAa,IAAI;AAEjB,UAAI,UAAU,aAAa,UAAU,UAAU,WAAW;AACxD,cAAM,UAAU,UAAU,UAAU,IAAI;AAAA,MAC1C,OAAO;AAEL,cAAM,WAAW,SAAS,cAAc,UAAU;AAClD,iBAAS,QAAQ;AACjB,iBAAS,MAAM,WAAW;AAC1B,iBAAS,MAAM,OAAO;AACtB,iBAAS,MAAM,MAAM;AACrB,iBAAS,KAAK,YAAY,QAAQ;AAClC,iBAAS,MAAA;AACT,iBAAS,OAAA;AACT,iBAAS,YAAY,MAAM;AAC3B,iBAAS,KAAK,YAAY,QAAQ;AAAA,MACpC;AAEA,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,gBAAgB;AACrD,sBAAA;AAAA,IACF,SAAS,OAAO;AACd,YAAM,eACJ,iBAAiB,QAAQ,MAAM,UAAU;AAC3C,mBAAa,YAAY;AACzB,oBAAc,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,YAAY,CAAC;AAGtE,iBAAW,MAAM,aAAa,IAAI,GAAG,gBAAgB;AAAA,IACvD;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,YAAM,eAAA;AACN,iBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAAmB,YACrB,+BAA+B,SAAS,KACxC,WACE,kBACA;AAEN,QAAM,gBAAgB,YAAYC,YAAAA,WAAW,WAAWC,YAAAA,YAAYD,YAAAA;AAEpE,SACEE,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MACT,WAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd,eAAY;AAAA,MAEX,UAAA;AAAA,QAAA;AAAA,QAEA,QACCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA,aAAa;AAAA,cACb,YAAY;AAAA,cACZ,CAAC,aACC,CAAC,YACD;AAAA,YAAA;AAAA,YAEJ,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

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

@@ -1,7 +1,73 @@
 import { FC, PropsWithChildren } from 'react';
-export type CopyToClipboardProps = PropsWithChildren<{
+/**
+ * Props for the CopyToClipboard component
+ */
+export interface CopyToClipboardProps extends PropsWithChildren {
+    /**
+     * The text to copy to the clipboard when clicked
+     * @example "Hello World"
+     * @example "npm install @intlayer/design-system"
+     */
     text: string;
+    /**
+     * Additional CSS classes for the wrapper element
+     * @example "bg-blue-100 text-blue-800"
+     */
     className?: string;
-}>;
+    /**
+     * Accessible label for screen readers when copy operation is available
+     * @default "Copy to clipboard"
+     */
+    'aria-label'?: string;
+    /**
+     * Accessible label for screen readers when content has been copied
+     * @default "Copied to clipboard"
+     */
+    'aria-copied-label'?: string;
+    /**
+     * Duration in milliseconds to show the "copied" state
+     * @default 2000
+     */
+    feedbackDuration?: number;
+    /**
+     * Callback function called when copy operation succeeds
+     */
+    onCopySuccess?: () => void;
+    /**
+     * Callback function called when copy operation fails
+     */
+    onCopyError?: (error: Error) => void;
+}
+/**
+ * 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 and callbacks
+ * <CopyToClipboard
+ *   text="npm install @intlayer/design-system"
+ *   className="bg-gray-100 p-2"
+ *   feedbackDuration={3000}
+ *   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
+ */
 export declare const CopyToClipboard: FC<CopyToClipboardProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CopyToClipboard/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGlE,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA8CpD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CopyToClipboard/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGlE;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAgGpD,CAAC"}

package/dist/components/CopyToClipboard/index.mjs

@@ -1,49 +1,85 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { CopyCheck, CopyIcon } from "lucide-react";
+import { CopyIcon, CopyCheck } from "lucide-react";
 import { useState } from "react";
 import { cn } from "../../utils/cn.mjs";
 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] = useState(false);
-  const handleCopy = () => {
-    navigator.clipboard.writeText(text).then(() => {
+  const [copyError, setCopyError] = 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 ? CopyIcon : isCopied ? CopyCheck : CopyIcon;
   return /* @__PURE__ */ jsxs(
     "span",
     {
       className: 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__ */ jsx("span", { className: "inline-flex", children: text && (isCopied ? /* @__PURE__ */ jsx(
-          CopyCheck,
-          {
-            size: 12,
-            "aria-label": "copied",
-            role: "button",
-            "data-testid": "copy-to-clipboard",
-            className: "ml-1 mt-1"
-          }
-        ) : /* @__PURE__ */ jsx(
-          CopyIcon,
+        text && /* @__PURE__ */ jsx(
+          IconComponent,
           {
             size: 12,
-            "aria-label": "copy",
-            role: "button",
-            "data-testid": "copy-to-clipboard",
-            className: "ml-1 mt-1 cursor-pointer"
+            className: cn(
+              "ml-1 transition-colors duration-200",
+              copyError && "text-destructive",
+              isCopied && "text-success",
+              !copyError && !isCopied && "text-muted-foreground hover:text-foreground"
+            ),
+            "aria-hidden": "true"
           }
-        )) })
+        )
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { type FC, type PropsWithChildren, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type CopyToClipboardProps = PropsWithChildren<{\n  text: string;\n  className?: string;\n}>;\n\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(text).then(() => {\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 1000);\n    });\n  };\n\n  return (\n    <span\n      className={cn(\n        'inline-block gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5',\n        className\n      )}\n      onClick={handleCopy}\n    >\n      {children}\n\n      <span className=\"inline-flex\">\n        {text &&\n          (isCopied ? (\n            <CopyCheck\n              size={12}\n              aria-label=\"copied\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1\"\n            />\n          ) : (\n            <CopyIcon\n              size={12}\n              aria-label=\"copy\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1 cursor-pointer\"\n            />\n          ))}\n      </span>\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;AAWO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,aAAa,MAAM;AACvB,cAAU,UAAU,UAAU,IAAI,EAAE,KAAK,MAAM;AAC7C,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,GAAI;AAAA,IAC3C,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MAER,UAAA;AAAA,QAAA;AAAA,QAED,oBAAC,QAAA,EAAK,WAAU,eACb,mBACE,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,cAAW;AAAA,YACX,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA,IAGZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,cAAW;AAAA,YACX,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA,GACZ,CAEN;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { type FC, type PropsWithChildren, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the CopyToClipboard component\n */\nexport interface CopyToClipboardProps extends PropsWithChildren {\n  /**\n   * The text to copy to the clipboard when clicked\n   * @example \"Hello World\"\n   * @example \"npm install @intlayer/design-system\"\n   */\n  text: string;\n\n  /**\n   * Additional CSS classes for the wrapper element\n   * @example \"bg-blue-100 text-blue-800\"\n   */\n  className?: string;\n\n  /**\n   * Accessible label for screen readers when copy operation is available\n   * @default \"Copy to clipboard\"\n   */\n  'aria-label'?: string;\n\n  /**\n   * Accessible label for screen readers when content has been copied\n   * @default \"Copied to clipboard\"\n   */\n  'aria-copied-label'?: string;\n\n  /**\n   * Duration in milliseconds to show the \"copied\" state\n   * @default 2000\n   */\n  feedbackDuration?: number;\n\n  /**\n   * Callback function called when copy operation succeeds\n   */\n  onCopySuccess?: () => void;\n\n  /**\n   * Callback function called when copy operation fails\n   */\n  onCopyError?: (error: Error) => void;\n}\n\n/**\n * CopyToClipboard Component\n *\n * A versatile component that allows users to copy text to their clipboard with visual feedback.\n * Provides accessibility features, customizable feedback duration, and error handling.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <CopyToClipboard text=\"Hello World\">\n *   <span>Click to copy</span>\n * </CopyToClipboard>\n *\n * // With custom styling and callbacks\n * <CopyToClipboard\n *   text=\"npm install @intlayer/design-system\"\n *   className=\"bg-gray-100 p-2\"\n *   feedbackDuration={3000}\n *   onCopySuccess={() => console.log('Copied!')}\n * >\n *   <code>npm install @intlayer/design-system</code>\n * </CopyToClipboard>\n * ```\n *\n * @component\n * @accessibility\n * - Uses proper ARIA labels for copy and copied states\n * - Supports keyboard navigation (Enter and Space keys)\n * - Announces state changes to screen readers\n * - Provides visual focus indicators\n */\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n  'aria-label': ariaLabel = 'Copy to clipboard',\n  'aria-copied-label': ariaCopiedLabel = 'Copied to clipboard',\n  feedbackDuration = 2000,\n  onCopySuccess,\n  onCopyError,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n  const [copyError, setCopyError] = useState<string | null>(null);\n\n  const handleCopy = async () => {\n    if (!text) return;\n\n    try {\n      setCopyError(null);\n\n      if (navigator.clipboard && navigator.clipboard.writeText) {\n        await navigator.clipboard.writeText(text);\n      } else {\n        // Fallback for older browsers\n        const textArea = document.createElement('textarea');\n        textArea.value = text;\n        textArea.style.position = 'fixed';\n        textArea.style.left = '-999999px';\n        textArea.style.top = '-999999px';\n        document.body.appendChild(textArea);\n        textArea.focus();\n        textArea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textArea);\n      }\n\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), feedbackDuration);\n      onCopySuccess?.();\n    } catch (error) {\n      const errorMessage =\n        error instanceof Error ? error.message : 'Failed to copy to clipboard';\n      setCopyError(errorMessage);\n      onCopyError?.(error instanceof Error ? error : new Error(errorMessage));\n\n      // Clear error after feedback duration\n      setTimeout(() => setCopyError(null), feedbackDuration);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      handleCopy();\n    }\n  };\n\n  const currentAriaLabel = copyError\n    ? `Error copying to clipboard: ${copyError}`\n    : isCopied\n      ? ariaCopiedLabel\n      : ariaLabel;\n\n  const IconComponent = copyError ? CopyIcon : isCopied ? CopyCheck : CopyIcon;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex gap-2 hover:cursor-pointer hover:bg-neutral/10 rounded-md p-0.5',\n        className\n      )}\n      onClick={handleCopy}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={currentAriaLabel}\n      aria-pressed={isCopied}\n      data-testid=\"copy-to-clipboard\"\n    >\n      {children}\n\n      {text && (\n        <IconComponent\n          size={12}\n          className={cn(\n            'ml-1 transition-colors duration-200',\n            copyError && 'text-destructive',\n            isCopied && 'text-success',\n            !copyError &&\n              !isCopied &&\n              'text-muted-foreground hover:text-foreground'\n          )}\n          aria-hidden=\"true\"\n        />\n      )}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;AAmFO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,qBAAqB,kBAAkB;AAAA,EACvC,mBAAmB;AAAA,EACnB;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAE9D,QAAM,aAAa,YAAY;AAC7B,QAAI,CAAC,KAAM;AAEX,QAAI;AACF,mBAAa,IAAI;AAEjB,UAAI,UAAU,aAAa,UAAU,UAAU,WAAW;AACxD,cAAM,UAAU,UAAU,UAAU,IAAI;AAAA,MAC1C,OAAO;AAEL,cAAM,WAAW,SAAS,cAAc,UAAU;AAClD,iBAAS,QAAQ;AACjB,iBAAS,MAAM,WAAW;AAC1B,iBAAS,MAAM,OAAO;AACtB,iBAAS,MAAM,MAAM;AACrB,iBAAS,KAAK,YAAY,QAAQ;AAClC,iBAAS,MAAA;AACT,iBAAS,OAAA;AACT,iBAAS,YAAY,MAAM;AAC3B,iBAAS,KAAK,YAAY,QAAQ;AAAA,MACpC;AAEA,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,gBAAgB;AACrD,sBAAA;AAAA,IACF,SAAS,OAAO;AACd,YAAM,eACJ,iBAAiB,QAAQ,MAAM,UAAU;AAC3C,mBAAa,YAAY;AACzB,oBAAc,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,YAAY,CAAC;AAGtE,iBAAW,MAAM,aAAa,IAAI,GAAG,gBAAgB;AAAA,IACvD;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,YAAM,eAAA;AACN,iBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAAmB,YACrB,+BAA+B,SAAS,KACxC,WACE,kBACA;AAEN,QAAM,gBAAgB,YAAY,WAAW,WAAW,YAAY;AAEpE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MACT,WAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd,eAAY;AAAA,MAEX,UAAA;AAAA,QAAA;AAAA,QAEA,QACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAW;AAAA,cACT;AAAA,cACA,aAAa;AAAA,cACb,YAAY;AAAA,cACZ,CAAC,aACC,CAAC,YACD;AAAA,YAAA;AAAA,YAEJ,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/DropDown/index.cjs

@@ -14,8 +14,7 @@ const DropDown = ({
   {
     className: utils_cn.cn(`group/dropdown relative flex`, className),
     "aria-label": `DropDown ${identifier}`,
-    id: `unrollable-panel-button-${identifier}`,
-    "aria-haspopup": true,
+    id: `dropdown-container-${identifier}`,
     ...props,
     children
   }
@@ -31,6 +30,9 @@ const Trigger = ({
   {
     className: utils_cn.cn("w-full cursor-pointer", className),
     label: label ?? `Open panel ${identifier}`,
+    "aria-haspopup": "true",
+    "aria-controls": `dropdown-panel-${identifier}`,
+    id: `dropdown-trigger-${identifier}`,
     onClick: (e) => {
       e.currentTarget.focus();
     },
@@ -64,8 +66,8 @@ const Panel = ({
     ),
     "aria-hidden": isHidden,
     role: "region",
-    "aria-labelledby": `unrollable-panel-button-${identifier}`,
-    id: `unrollable-panel-${identifier}`,
+    "aria-labelledby": `dropdown-trigger-${identifier}`,
+    id: `dropdown-panel-${identifier}`,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       components_MaxHeightSmoother_index.MaxHeightSmoother,
       {

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type DropDownProps = HTMLAttributes<HTMLDivElement> & {\n  identifier: string;\n};\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type TriggerProps = Partial<ButtonProps> & {\n  identifier: string;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  label,\n  ...props\n}) => (\n  <Button\n    className={cn('w-full cursor-pointer', className)}\n    label={label ?? `Open panel ${identifier}`}\n    onClick={(e) => {\n      // Ensure focus behavior is consistent across all mobile browsers\n      (e.currentTarget as HTMLButtonElement).focus();\n    }}\n    // onBlur={(e) => {\n    //   // Default behavior: ensure the trigger is unfocused when leaving the dropdown\n    //   e.currentTarget.blur();\n    // }}\n    variant=\"none\"\n    {...props}\n  >\n    {children}\n  </Button>\n);\n\nexport enum DropDownAlign {\n  START = 'start',\n  END = 'end',\n}\n\nexport type PanelProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  align?: DropDownAlign | `${DropDownAlign}`;\n};\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = DropDownAlign.START,\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === DropDownAlign.START && 'left-0',\n      align === DropDownAlign.END && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden === false && 'invisible',\n        isHidden === true && 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":["jsx","cn","Button","DropDownAlign","MaxHeightSmoother"],"mappings":";;;;;;AAgCO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAmBF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACED,2BAAAA;AAAAA,EAACE,yBAAAA;AAAAA,EAAA;AAAA,IACC,WAAWD,SAAAA,GAAG,yBAAyB,SAAS;AAAA,IAChD,OAAO,SAAS,cAAc,UAAU;AAAA,IACxC,SAAS,CAAC,MAAM;AAEb,QAAE,cAAoC,MAAA;AAAA,IACzC;AAAA,IAKA,SAAQ;AAAA,IACP,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGK,IAAK,kCAAAE,mBAAL;AACLA,iBAAA,OAAA,IAAQ;AACRA,iBAAA,KAAA,IAAM;AAFI,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAuBZ,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEH,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA,UAAU,WAAuB;AAAA,MACjC,UAAU,SAAqB;AAAA,MAC/B;AAAA,IAAA;AAAA,IAEF,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAAD,2BAAAA;AAAAA,MAACI,mCAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWH,SAAAA;AAAAA,UACT;AAAA,UACA,aAAa,SAAS;AAAA,UACtB,aAAa,QAAQ;AAAA,UACrB,cACE;AAAA,UACF,eACE;AAAA,QAAA;AAAA,QAEH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/**\n * Props for the DropDown component\n */\nexport interface DropDownProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Unique identifier that links the trigger and panel for accessibility.\n   * This is used to generate proper ARIA attributes.\n   * @example \"user-menu\"\n   * @example \"language-selector\"\n   */\n  identifier: string;\n}\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * DropDown Component\n *\n * A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.\n * Supports hover, focus, and controlled visibility states with proper accessibility features.\n *\n * @example\n * ```tsx\n * // Basic hover dropdown\n * <DropDown identifier=\"menu\">\n *   <DropDown.Trigger identifier=\"menu\">\n *     Open Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"menu\" isOverable>\n *     <div>Menu content</div>\n *   </DropDown.Panel>\n * </DropDown>\n *\n * // Focus-based dropdown for accessibility\n * <DropDown identifier=\"accessible-menu\">\n *   <DropDown.Trigger identifier=\"accessible-menu\">\n *     Keyboard Accessible Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"accessible-menu\" isFocusable>\n *     <div>Accessible content</div>\n *   </DropDown.Panel>\n * </DropDown>\n *\n * // Controlled dropdown\n * <DropDown identifier=\"controlled\">\n *   <DropDown.Trigger identifier=\"controlled\">\n *     Controlled Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"controlled\" isHidden={!isOpen}>\n *     <div>Controlled content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * @component\n * @accessibility\n * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)\n * - Supports keyboard navigation with focus management\n * - Screen reader compatible with proper role and labeling\n * - Maintains focus trap within dropdown when needed\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`dropdown-container-${identifier}`}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the DropDown.Trigger component\n */\nexport interface TriggerProps extends Partial<ButtonProps> {\n  /**\n   * Unique identifier that matches the parent DropDown identifier\n   * @example \"user-menu\"\n   */\n  identifier: string;\n}\n\n/**\n * DropDown.Trigger Component\n *\n * The clickable/focusable element that controls the dropdown panel visibility.\n * Built on top of the Button component with enhanced dropdown-specific behaviors.\n *\n * @example\n * ```tsx\n * <DropDown.Trigger identifier=\"menu\">\n *   <div>Click to open</div>\n * </DropDown.Trigger>\n * ```\n *\n * @component\n * @accessibility\n * - Automatically generates appropriate ARIA attributes\n * - Maintains proper focus management across browsers\n * - Works with keyboard navigation (Tab, Enter, Space)\n * - Announces dropdown state to screen readers\n *\n * @note Don't nest Button components inside the Trigger - it's already a button\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  label,\n  ...props\n}) => (\n  <Button\n    className={cn('w-full cursor-pointer', className)}\n    label={label ?? `Open panel ${identifier}`}\n    aria-haspopup=\"true\"\n    aria-controls={`dropdown-panel-${identifier}`}\n    id={`dropdown-trigger-${identifier}`}\n    onClick={(e) => {\n      // Ensure focus behavior is consistent across all mobile browsers\n      (e.currentTarget as HTMLButtonElement).focus();\n    }}\n    // onBlur={(e) => {\n    //   // Default behavior: ensure the trigger is unfocused when leaving the dropdown\n    //   e.currentTarget.blur();\n    // }}\n    variant=\"none\"\n    {...props}\n  >\n    {children}\n  </Button>\n);\n\n/**\n * Alignment options for the dropdown panel relative to the trigger\n */\nexport enum DropDownAlign {\n  /** Align panel to the start (left in LTR, right in RTL) of the trigger */\n  START = 'start',\n  /** Align panel to the end (right in LTR, left in RTL) of the trigger */\n  END = 'end',\n}\n\n/**\n * Props for the DropDown.Panel component\n */\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Whether the panel should be visible when the trigger is focused.\n   * Enables keyboard accessibility for the dropdown.\n   * @default false\n   */\n  isFocusable?: boolean;\n\n  /**\n   * Controls panel visibility explicitly.\n   * - `true`: Panel is hidden\n   * - `false`: Panel is visible\n   * - `undefined`: Panel visibility controlled by hover/focus states\n   * @default undefined\n   */\n  isHidden?: boolean;\n\n  /**\n   * Whether the panel should be visible when hovering over the trigger.\n   * Provides quick access via mouse interaction.\n   * @default false\n   */\n  isOverable?: boolean;\n\n  /**\n   * Unique identifier that matches the parent DropDown identifier\n   * @example \"user-menu\"\n   */\n  identifier: string;\n\n  /**\n   * Horizontal alignment of the panel relative to the trigger\n   * @default DropDownAlign.START\n   */\n  align?: DropDownAlign | `${DropDownAlign}`;\n}\n\n/**\n * DropDown.Panel Component\n *\n * The content area that appears when the dropdown is triggered.\n * Supports multiple trigger methods (hover, focus, controlled) with smooth animations.\n *\n * @example\n * ```tsx\n * // Hover-triggered panel\n * <DropDown.Panel identifier=\"menu\" isOverable>\n *   <div>Content appears on hover</div>\n * </DropDown.Panel>\n *\n * // Focus-triggered panel (accessible)\n * <DropDown.Panel identifier=\"menu\" isFocusable>\n *   <div>Content appears on focus</div>\n * </DropDown.Panel>\n *\n * // Controlled panel\n * <DropDown.Panel identifier=\"menu\" isHidden={!isOpen}>\n *   <div>Content visibility controlled externally</div>\n * </DropDown.Panel>\n *\n * // Right-aligned panel\n * <DropDown.Panel identifier=\"menu\" align={DropDownAlign.END} isOverable>\n *   <div>Right-aligned content</div>\n * </DropDown.Panel>\n * ```\n *\n * @component\n * @accessibility\n * - Proper ARIA attributes (role, aria-labelledby, aria-hidden)\n * - Smooth height transitions with MaxHeightSmoother\n * - Keyboard navigation support when isFocusable is enabled\n * - Screen reader announcements for state changes\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = DropDownAlign.START,\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === DropDownAlign.START && 'left-0',\n      align === DropDownAlign.END && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`dropdown-trigger-${identifier}`}\n    id={`dropdown-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden === false && 'invisible',\n        isHidden === true && 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":["jsx","cn","Button","DropDownAlign","MaxHeightSmoother"],"mappings":";;;;;;AAqEO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,sBAAsB,UAAU;AAAA,IACnC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAoCF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACED,2BAAAA;AAAAA,EAACE,yBAAAA;AAAAA,EAAA;AAAA,IACC,WAAWD,SAAAA,GAAG,yBAAyB,SAAS;AAAA,IAChD,OAAO,SAAS,cAAc,UAAU;AAAA,IACxC,iBAAc;AAAA,IACd,iBAAe,kBAAkB,UAAU;AAAA,IAC3C,IAAI,oBAAoB,UAAU;AAAA,IAClC,SAAS,CAAC,MAAM;AAEb,QAAE,cAAoC,MAAA;AAAA,IACzC;AAAA,IAKA,SAAQ;AAAA,IACP,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAMK,IAAK,kCAAAE,mBAAL;AAELA,iBAAA,OAAA,IAAQ;AAERA,iBAAA,KAAA,IAAM;AAJI,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAmFZ,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEH,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA,UAAU,WAAuB;AAAA,MACjC,UAAU,SAAqB;AAAA,MAC/B;AAAA,IAAA;AAAA,IAEF,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,oBAAoB,UAAU;AAAA,IAC/C,IAAI,kBAAkB,UAAU;AAAA,IAEhC,UAAAD,2BAAAA;AAAAA,MAACI,mCAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWH,SAAAA;AAAAA,UACT;AAAA,UACA,aAAa,SAAS;AAAA,UACtB,aAAa,QAAQ;AAAA,UACrB,cACE;AAAA,UACF,eACE;AAAA,QAAA;AAAA,QAEH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;;;"}

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

@@ -1,43 +1,120 @@
 import { FC, HTMLAttributes } from 'react';
 import { ButtonProps } from '../Button';
-export type DropDownProps = HTMLAttributes<HTMLDivElement> & {
+/**
+ * Props for the DropDown component
+ */
+export interface DropDownProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Unique identifier that links the trigger and panel for accessibility.
+     * This is used to generate proper ARIA attributes.
+     * @example "user-menu"
+     * @example "language-selector"
+     */
     identifier: string;
-};
+}
 export type DropDownType = FC<DropDownProps> & {
     Trigger: FC<TriggerProps>;
     Panel: FC<PanelProps>;
 };
 /**
- * Trigger allowing to open a dropdown menu.
+ * DropDown Component
+ *
+ * A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.
+ * Supports hover, focus, and controlled visibility states with proper accessibility features.
  *
- * Example:
- * ```jsx
- * <DropDown identifier="dropdown">
- *   <DropDown.Trigger>
- *     Open dropdown
+ * @example
+ * ```tsx
+ * // Basic hover dropdown
+ * <DropDown identifier="menu">
+ *   <DropDown.Trigger identifier="menu">
+ *     Open Menu
  *   </DropDown.Trigger>
+ *   <DropDown.Panel identifier="menu" isOverable>
+ *     <div>Menu content</div>
+ *   </DropDown.Panel>
+ * </DropDown>
+ *
+ * // Focus-based dropdown for accessibility
+ * <DropDown identifier="accessible-menu">
+ *   <DropDown.Trigger identifier="accessible-menu">
+ *     Keyboard Accessible Menu
+ *   </DropDown.Trigger>
+ *   <DropDown.Panel identifier="accessible-menu" isFocusable>
+ *     <div>Accessible content</div>
+ *   </DropDown.Panel>
+ * </DropDown>
  *
- *   <DropDown.Panel identifier="dropdown">
- *     <div>Content</div>
+ * // Controlled dropdown
+ * <DropDown identifier="controlled">
+ *   <DropDown.Trigger identifier="controlled">
+ *     Controlled Menu
+ *   </DropDown.Trigger>
+ *   <DropDown.Panel identifier="controlled" isHidden={!isOpen}>
+ *     <div>Controlled content</div>
  *   </DropDown.Panel>
  * </DropDown>
  * ```
  *
- * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.
+ * @component
+ * @accessibility
+ * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)
+ * - Supports keyboard navigation with focus management
+ * - Screen reader compatible with proper role and labeling
+ * - Maintains focus trap within dropdown when needed
  */
 export declare const DropDown: DropDownType;
-export type TriggerProps = Partial<ButtonProps> & {
+/**
+ * Props for the DropDown.Trigger component
+ */
+export interface TriggerProps extends Partial<ButtonProps> {
+    /**
+     * Unique identifier that matches the parent DropDown identifier
+     * @example "user-menu"
+     */
     identifier: string;
-};
+}
+/**
+ * Alignment options for the dropdown panel relative to the trigger
+ */
 export declare enum DropDownAlign {
+    /** Align panel to the start (left in LTR, right in RTL) of the trigger */
     START = "start",
+    /** Align panel to the end (right in LTR, left in RTL) of the trigger */
     END = "end"
 }
-export type PanelProps = HTMLAttributes<HTMLDivElement> & {
+/**
+ * Props for the DropDown.Panel component
+ */
+export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the panel should be visible when the trigger is focused.
+     * Enables keyboard accessibility for the dropdown.
+     * @default false
+     */
     isFocusable?: boolean;
+    /**
+     * Controls panel visibility explicitly.
+     * - `true`: Panel is hidden
+     * - `false`: Panel is visible
+     * - `undefined`: Panel visibility controlled by hover/focus states
+     * @default undefined
+     */
     isHidden?: boolean;
+    /**
+     * Whether the panel should be visible when hovering over the trigger.
+     * Provides quick access via mouse interaction.
+     * @default false
+     */
     isOverable?: boolean;
+    /**
+     * Unique identifier that matches the parent DropDown identifier
+     * @example "user-menu"
+     */
     identifier: string;
+    /**
+     * Horizontal alignment of the panel relative to the trigger
+     * @default DropDownAlign.START
+     */
     align?: DropDownAlign | `${DropDownAlign}`;
-};
+}
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropDown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3D,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC,aAAa,CAAC,GAAG;IAC7C,OAAO,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC;IAC1B,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,EAAE,YAetB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG;IAChD,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAuCF,oBAAY,aAAa;IACvB,KAAK,UAAU;IACf,GAAG,QAAQ;CACZ;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,GAAG,GAAG,aAAa,EAAE,CAAC;CAC5C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropDown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE;;;;;OAKG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC,aAAa,CAAC,GAAG;IAC7C,OAAO,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC;IAC1B,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,QAAQ,EAAE,YActB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,OAAO,CAAC,WAAW,CAAC;IACxD;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAoDD;;GAEG;AACH,oBAAY,aAAa;IACvB,0EAA0E;IAC1E,KAAK,UAAU;IACf,wEAAwE;IACxE,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,GAAG,aAAa,EAAE,CAAC;CAC5C"}

package/dist/components/DropDown/index.mjs

@@ -12,8 +12,7 @@ const DropDown = ({
   {
     className: cn(`group/dropdown relative flex`, className),
     "aria-label": `DropDown ${identifier}`,
-    id: `unrollable-panel-button-${identifier}`,
-    "aria-haspopup": true,
+    id: `dropdown-container-${identifier}`,
     ...props,
     children
   }
@@ -29,6 +28,9 @@ const Trigger = ({
   {
     className: cn("w-full cursor-pointer", className),
     label: label ?? `Open panel ${identifier}`,
+    "aria-haspopup": "true",
+    "aria-controls": `dropdown-panel-${identifier}`,
+    id: `dropdown-trigger-${identifier}`,
     onClick: (e) => {
       e.currentTarget.focus();
     },
@@ -62,8 +64,8 @@ const Panel = ({
     ),
     "aria-hidden": isHidden,
     role: "region",
-    "aria-labelledby": `unrollable-panel-button-${identifier}`,
-    id: `unrollable-panel-${identifier}`,
+    "aria-labelledby": `dropdown-trigger-${identifier}`,
+    id: `dropdown-panel-${identifier}`,
     children: /* @__PURE__ */ jsx(
       MaxHeightSmoother,
       {

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type DropDownProps = HTMLAttributes<HTMLDivElement> & {\n  identifier: string;\n};\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type TriggerProps = Partial<ButtonProps> & {\n  identifier: string;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  label,\n  ...props\n}) => (\n  <Button\n    className={cn('w-full cursor-pointer', className)}\n    label={label ?? `Open panel ${identifier}`}\n    onClick={(e) => {\n      // Ensure focus behavior is consistent across all mobile browsers\n      (e.currentTarget as HTMLButtonElement).focus();\n    }}\n    // onBlur={(e) => {\n    //   // Default behavior: ensure the trigger is unfocused when leaving the dropdown\n    //   e.currentTarget.blur();\n    // }}\n    variant=\"none\"\n    {...props}\n  >\n    {children}\n  </Button>\n);\n\nexport enum DropDownAlign {\n  START = 'start',\n  END = 'end',\n}\n\nexport type PanelProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  align?: DropDownAlign | `${DropDownAlign}`;\n};\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = DropDownAlign.START,\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === DropDownAlign.START && 'left-0',\n      align === DropDownAlign.END && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden === false && 'invisible',\n        isHidden === true && 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":["DropDownAlign"],"mappings":";;;;AAgCO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAmBF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAChD,OAAO,SAAS,cAAc,UAAU;AAAA,IACxC,SAAS,CAAC,MAAM;AAEb,QAAE,cAAoC,MAAA;AAAA,IACzC;AAAA,IAKA,SAAQ;AAAA,IACP,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGK,IAAK,kCAAAA,mBAAL;AACLA,iBAAA,OAAA,IAAQ;AACRA,iBAAA,KAAA,IAAM;AAFI,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAuBZ,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,UAAU,WAAuB;AAAA,MACjC,UAAU,SAAqB;AAAA,MAC/B;AAAA,IAAA;AAAA,IAEF,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aAAa,SAAS;AAAA,UACtB,aAAa,QAAQ;AAAA,UACrB,cACE;AAAA,UACF,eACE;AAAA,QAAA;AAAA,QAEH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/**\n * Props for the DropDown component\n */\nexport interface DropDownProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Unique identifier that links the trigger and panel for accessibility.\n   * This is used to generate proper ARIA attributes.\n   * @example \"user-menu\"\n   * @example \"language-selector\"\n   */\n  identifier: string;\n}\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * DropDown Component\n *\n * A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.\n * Supports hover, focus, and controlled visibility states with proper accessibility features.\n *\n * @example\n * ```tsx\n * // Basic hover dropdown\n * <DropDown identifier=\"menu\">\n *   <DropDown.Trigger identifier=\"menu\">\n *     Open Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"menu\" isOverable>\n *     <div>Menu content</div>\n *   </DropDown.Panel>\n * </DropDown>\n *\n * // Focus-based dropdown for accessibility\n * <DropDown identifier=\"accessible-menu\">\n *   <DropDown.Trigger identifier=\"accessible-menu\">\n *     Keyboard Accessible Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"accessible-menu\" isFocusable>\n *     <div>Accessible content</div>\n *   </DropDown.Panel>\n * </DropDown>\n *\n * // Controlled dropdown\n * <DropDown identifier=\"controlled\">\n *   <DropDown.Trigger identifier=\"controlled\">\n *     Controlled Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"controlled\" isHidden={!isOpen}>\n *     <div>Controlled content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * @component\n * @accessibility\n * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)\n * - Supports keyboard navigation with focus management\n * - Screen reader compatible with proper role and labeling\n * - Maintains focus trap within dropdown when needed\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`dropdown-container-${identifier}`}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the DropDown.Trigger component\n */\nexport interface TriggerProps extends Partial<ButtonProps> {\n  /**\n   * Unique identifier that matches the parent DropDown identifier\n   * @example \"user-menu\"\n   */\n  identifier: string;\n}\n\n/**\n * DropDown.Trigger Component\n *\n * The clickable/focusable element that controls the dropdown panel visibility.\n * Built on top of the Button component with enhanced dropdown-specific behaviors.\n *\n * @example\n * ```tsx\n * <DropDown.Trigger identifier=\"menu\">\n *   <div>Click to open</div>\n * </DropDown.Trigger>\n * ```\n *\n * @component\n * @accessibility\n * - Automatically generates appropriate ARIA attributes\n * - Maintains proper focus management across browsers\n * - Works with keyboard navigation (Tab, Enter, Space)\n * - Announces dropdown state to screen readers\n *\n * @note Don't nest Button components inside the Trigger - it's already a button\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  label,\n  ...props\n}) => (\n  <Button\n    className={cn('w-full cursor-pointer', className)}\n    label={label ?? `Open panel ${identifier}`}\n    aria-haspopup=\"true\"\n    aria-controls={`dropdown-panel-${identifier}`}\n    id={`dropdown-trigger-${identifier}`}\n    onClick={(e) => {\n      // Ensure focus behavior is consistent across all mobile browsers\n      (e.currentTarget as HTMLButtonElement).focus();\n    }}\n    // onBlur={(e) => {\n    //   // Default behavior: ensure the trigger is unfocused when leaving the dropdown\n    //   e.currentTarget.blur();\n    // }}\n    variant=\"none\"\n    {...props}\n  >\n    {children}\n  </Button>\n);\n\n/**\n * Alignment options for the dropdown panel relative to the trigger\n */\nexport enum DropDownAlign {\n  /** Align panel to the start (left in LTR, right in RTL) of the trigger */\n  START = 'start',\n  /** Align panel to the end (right in LTR, left in RTL) of the trigger */\n  END = 'end',\n}\n\n/**\n * Props for the DropDown.Panel component\n */\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Whether the panel should be visible when the trigger is focused.\n   * Enables keyboard accessibility for the dropdown.\n   * @default false\n   */\n  isFocusable?: boolean;\n\n  /**\n   * Controls panel visibility explicitly.\n   * - `true`: Panel is hidden\n   * - `false`: Panel is visible\n   * - `undefined`: Panel visibility controlled by hover/focus states\n   * @default undefined\n   */\n  isHidden?: boolean;\n\n  /**\n   * Whether the panel should be visible when hovering over the trigger.\n   * Provides quick access via mouse interaction.\n   * @default false\n   */\n  isOverable?: boolean;\n\n  /**\n   * Unique identifier that matches the parent DropDown identifier\n   * @example \"user-menu\"\n   */\n  identifier: string;\n\n  /**\n   * Horizontal alignment of the panel relative to the trigger\n   * @default DropDownAlign.START\n   */\n  align?: DropDownAlign | `${DropDownAlign}`;\n}\n\n/**\n * DropDown.Panel Component\n *\n * The content area that appears when the dropdown is triggered.\n * Supports multiple trigger methods (hover, focus, controlled) with smooth animations.\n *\n * @example\n * ```tsx\n * // Hover-triggered panel\n * <DropDown.Panel identifier=\"menu\" isOverable>\n *   <div>Content appears on hover</div>\n * </DropDown.Panel>\n *\n * // Focus-triggered panel (accessible)\n * <DropDown.Panel identifier=\"menu\" isFocusable>\n *   <div>Content appears on focus</div>\n * </DropDown.Panel>\n *\n * // Controlled panel\n * <DropDown.Panel identifier=\"menu\" isHidden={!isOpen}>\n *   <div>Content visibility controlled externally</div>\n * </DropDown.Panel>\n *\n * // Right-aligned panel\n * <DropDown.Panel identifier=\"menu\" align={DropDownAlign.END} isOverable>\n *   <div>Right-aligned content</div>\n * </DropDown.Panel>\n * ```\n *\n * @component\n * @accessibility\n * - Proper ARIA attributes (role, aria-labelledby, aria-hidden)\n * - Smooth height transitions with MaxHeightSmoother\n * - Keyboard navigation support when isFocusable is enabled\n * - Screen reader announcements for state changes\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = DropDownAlign.START,\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === DropDownAlign.START && 'left-0',\n      align === DropDownAlign.END && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`dropdown-trigger-${identifier}`}\n    id={`dropdown-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden === false && 'invisible',\n        isHidden === true && 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":["DropDownAlign"],"mappings":";;;;AAqEO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,sBAAsB,UAAU;AAAA,IACnC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAoCF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAChD,OAAO,SAAS,cAAc,UAAU;AAAA,IACxC,iBAAc;AAAA,IACd,iBAAe,kBAAkB,UAAU;AAAA,IAC3C,IAAI,oBAAoB,UAAU;AAAA,IAClC,SAAS,CAAC,MAAM;AAEb,QAAE,cAAoC,MAAA;AAAA,IACzC;AAAA,IAKA,SAAQ;AAAA,IACP,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAMK,IAAK,kCAAAA,mBAAL;AAELA,iBAAA,OAAA,IAAQ;AAERA,iBAAA,KAAA,IAAM;AAJI,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAmFZ,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,UAAU,WAAuB;AAAA,MACjC,UAAU,SAAqB;AAAA,MAC/B;AAAA,IAAA;AAAA,IAEF,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,oBAAoB,UAAU;AAAA,IAC/C,IAAI,kBAAkB,UAAU;AAAA,IAEhC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aAAa,SAAS;AAAA,UACtB,aAAa,QAAQ;AAAA,UACrB,cACE;AAAA,UACF,eACE;AAAA,QAAA;AAAA,QAEH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;"}

package/dist/components/EditableField/EditableFieldInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.cjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldInputProps = InputProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldInput: FC<EditableFieldInputProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n\n    [props.value, props.defaultValue, inputRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n};\n"],"names":["useRef","useImperativeHandle","useMemo","jsx","EditableFieldLayout","Input"],"mappings":";;;;;;;;;AAWO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAWA,aAAAA,OAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEvB,aAAS,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAC5D;AACA,eAAA;AAAA,EACF;AAGAC,eAAAA,oBAAoB,KAAyB,MAAM,SAAS,OAAQ;AAEpE,QAAM,QAAQC,aAAAA;AAAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAAA;AAG3D,SACEC,2BAAAA;AAAAA,IAACC,6CAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAAAD,2BAAAA,IAACE,uBAAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGvC;;"}
+{"version":3,"file":"EditableFieldInput.cjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/**\n * Props for the EditableFieldInput component, extending standard Input props\n */\ntype EditableFieldInputProps = InputProps & {\n  /** Callback function called when the user saves the edited value */\n  onSave?: (value: string) => void;\n  /** Callback function called when the user cancels the edit operation */\n  onCancel?: () => void;\n};\n\n/**\n * EditableFieldInput Component\n *\n * An inline editable input field that displays as read-only text until clicked.\n * When activated, it shows an input field with save and cancel buttons.\n *\n * @example\n * ```tsx\n * <EditableFieldInput\n *   defaultValue=\"Edit me\"\n *   placeholder=\"Click to edit...\"\n *   onSave={(value) => console.log('Saved:', value)}\n *   onCancel={() => console.log('Cancelled')}\n * />\n * ```\n *\n * ## Features\n * - **Inline Editing**: Click to edit, displays as text when not editing\n * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks\n * - **Keyboard Support**: Accessible keyboard navigation\n * - **Input Variants**: Supports all Input component variants and sizes\n * - **Auto-save on Click Away**: Saves automatically when clicking outside\n * - **Ref Forwarding**: Exposes the underlying input element reference\n *\n * ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n *\n * @param props - EditableFieldInputProps extending InputProps\n * @returns React functional component\n */\nexport const EditableFieldInput: FC<EditableFieldInputProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n\n    [props.value, props.defaultValue, inputRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n};\n"],"names":["useRef","useImperativeHandle","useMemo","jsx","EditableFieldLayout","Input"],"mappings":";;;;;;;;;AAiDO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAWA,aAAAA,OAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEvB,aAAS,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAC5D;AACA,eAAA;AAAA,EACF;AAGAC,eAAAA,oBAAoB,KAAyB,MAAM,SAAS,OAAQ;AAEpE,QAAM,QAAQC,aAAAA;AAAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAAA;AAG3D,SACEC,2BAAAA;AAAAA,IAACC,6CAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAAAD,2BAAAA,IAACE,uBAAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGvC;;"}

package/dist/components/EditableField/EditableFieldInput.d.ts

@@ -1,9 +1,47 @@
 import { FC } from 'react';
 import { InputProps } from '../Input';
+/**
+ * Props for the EditableFieldInput component, extending standard Input props
+ */
 type EditableFieldInputProps = InputProps & {
+    /** Callback function called when the user saves the edited value */
     onSave?: (value: string) => void;
+    /** Callback function called when the user cancels the edit operation */
     onCancel?: () => void;
 };
+/**
+ * EditableFieldInput Component
+ *
+ * An inline editable input field that displays as read-only text until clicked.
+ * When activated, it shows an input field with save and cancel buttons.
+ *
+ * @example
+ * ```tsx
+ * <EditableFieldInput
+ *   defaultValue="Edit me"
+ *   placeholder="Click to edit..."
+ *   onSave={(value) => console.log('Saved:', value)}
+ *   onCancel={() => console.log('Cancelled')}
+ * />
+ * ```
+ *
+ * ## Features
+ * - **Inline Editing**: Click to edit, displays as text when not editing
+ * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks
+ * - **Keyboard Support**: Accessible keyboard navigation
+ * - **Input Variants**: Supports all Input component variants and sizes
+ * - **Auto-save on Click Away**: Saves automatically when clicking outside
+ * - **Ref Forwarding**: Exposes the underlying input element reference
+ *
+ * ## Accessibility
+ * - Uses semantic HTML with proper ARIA attributes
+ * - Keyboard accessible with tab navigation
+ * - Screen reader friendly with descriptive labels
+ * - Focus management for edit mode transitions
+ *
+ * @param props - EditableFieldInputProps extending InputProps
+ * @returns React functional component
+ */
 export declare const EditableFieldInput: FC<EditableFieldInputProps>;
 export {};
 //# sourceMappingURL=EditableFieldInput.d.ts.map

package/dist/components/EditableField/EditableFieldInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAkD,MAAM,OAAO,CAAC;AAChF,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAyC1D,CAAC"}
+{"version":3,"file":"EditableFieldInput.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAkD,MAAM,OAAO,CAAC;AAChF,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD;;GAEG;AACH,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAC1C,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAyC1D,CAAC"}