@intlayer/design-system 5.5.11 → 5.6.0

package/dist/components/IDE/MonacoCode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MonacoCode.mjs","sources":["../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport { type OnChange, type OnMount, Editor } from '@monaco-editor/react';\nimport { type FC, useState, useRef, useMemo } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\nimport { CopyButton } from './CopyButton';\n\ntype CodeCompProps = {\n  children: string;\n  language: string;\n  isDarkMode?: boolean;\n  showLineNumbers?: boolean;\n  showCopyButton?: boolean;\n  isReadOnly?: boolean;\n  onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showLineNumbers,\n  showCopyButton = true,\n  isReadOnly = false,\n  onChange,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const ideRef = useRef(null);\n  const [editorSize, setEditorSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n\n  const theme = useMemo(\n    () => (isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme'),\n    [isDarkMode]\n  );\n\n  const handleMountIde: OnMount = (editor, monaco) => {\n    // first time you set the height based on content Height\n\n    ideRef.current = editor as any;\n    const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n    monaco.editor.defineTheme('vs-dark-transparent', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n    monaco.editor.defineTheme('hc-light-theme', {\n      base: 'vs',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n\n    monaco.editor.setTheme(theme);\n\n    // Disable TypeScript diagnostics\n    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true, // Disables type checking\n      noSyntaxValidation: true, // Disables syntax errors\n    });\n\n    // Disable JavaScript diagnostics\n    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true,\n      noSyntaxValidation: true,\n    });\n\n    // Disable unnecessary language features (e.g., suggestions, quick fixes)\n    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    setEditorSize({\n      height: contentHeight,\n      width: containerRef.current?.clientWidth ?? 0,\n    });\n  };\n\n  const isShowLineNumbers = showLineNumbers ?? children.split('\\n').length > 1;\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full text-sm',\n        showLineNumbers && 'ml-0'\n      )}\n    >\n      {showCopyButton && (\n        <div className=\"sticky top-5 z-10\">\n          <div\n            className={cn('absolute bottom-0 right-2 flex h-7 items-center')}\n          >\n            <CopyButton content={children} />\n          </div>\n        </div>\n      )}\n      <div\n        className=\"z-0 grid size-full grid-cols-[0px] overflow-auto\"\n        ref={containerRef}\n      >\n        <Editor\n          {...editorSize}\n          defaultLanguage=\"typescript\"\n          language={language}\n          loading={<Loader />}\n          defaultValue={String(children).replace(/\\n$/, '')}\n          onMount={handleMountIde}\n          onChange={onChange}\n          options={{\n            readOnly: isReadOnly,\n            cursorStyle: 'line',\n            minimap: { enabled: false },\n            scrollbar: {\n              vertical: 'hidden',\n              verticalScrollbarSize: 0,\n              alwaysConsumeMouseWheel: false,\n            },\n            folding: false, // Disable code folding\n            renderValidationDecorations: 'off', // Disable error/warning decorations\n            quickSuggestions: false, // Disable IntelliSense\n            parameterHints: { enabled: false }, // Disable parameter hints\n            suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n            mouseWheelScrollSensitivity: 0,\n            fastScrollSensitivity: 0,\n            scrollBeyondLastLine: false,\n            lineNumbers: isShowLineNumbers ? 'on' : 'off',\n          }}\n          theme={theme}\n          className=\"my-2 rounded-md\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MonacoCode.mjs","sources":["../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport { type OnChange, type OnMount, Editor } from '@monaco-editor/react';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { CopyButton } from '../CopyButton';\nimport { Loader } from '../Loader';\n\ntype CodeCompProps = {\n  children: string;\n  language: string;\n  isDarkMode?: boolean;\n  showLineNumbers?: boolean;\n  showCopyButton?: boolean;\n  isReadOnly?: boolean;\n  onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showLineNumbers,\n  showCopyButton = true,\n  isReadOnly = false,\n  onChange,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const ideRef = useRef(null);\n  const [editorSize, setEditorSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n\n  const theme = useMemo(\n    () => (isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme'),\n    [isDarkMode]\n  );\n\n  const handleMountIde: OnMount = (editor, monaco) => {\n    // first time you set the height based on content Height\n\n    ideRef.current = editor as any;\n    const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n    monaco.editor.defineTheme('vs-dark-transparent', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n    monaco.editor.defineTheme('hc-light-theme', {\n      base: 'vs',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n\n    monaco.editor.setTheme(theme);\n\n    // Disable TypeScript diagnostics\n    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true, // Disables type checking\n      noSyntaxValidation: true, // Disables syntax errors\n    });\n\n    // Disable JavaScript diagnostics\n    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true,\n      noSyntaxValidation: true,\n    });\n\n    // Disable unnecessary language features (e.g., suggestions, quick fixes)\n    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    setEditorSize({\n      height: contentHeight,\n      width: containerRef.current?.clientWidth ?? 0,\n    });\n  };\n\n  const isShowLineNumbers = showLineNumbers ?? children.split('\\n').length > 1;\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full text-sm',\n        showLineNumbers && 'ml-0'\n      )}\n    >\n      {showCopyButton && (\n        <div className=\"sticky top-5 z-10\">\n          <div\n            className={cn('absolute bottom-0 right-2 flex h-7 items-center')}\n          >\n            <CopyButton content={children} />\n          </div>\n        </div>\n      )}\n      <div\n        className=\"z-0 grid size-full grid-cols-[0px] overflow-auto\"\n        ref={containerRef}\n      >\n        <Editor\n          {...editorSize}\n          defaultLanguage=\"typescript\"\n          language={language}\n          loading={<Loader />}\n          defaultValue={String(children).replace(/\\n$/, '')}\n          onMount={handleMountIde}\n          onChange={onChange}\n          options={{\n            readOnly: isReadOnly,\n            cursorStyle: 'line',\n            minimap: { enabled: false },\n            scrollbar: {\n              vertical: 'hidden',\n              verticalScrollbarSize: 0,\n              alwaysConsumeMouseWheel: false,\n            },\n            folding: false, // Disable code folding\n            renderValidationDecorations: 'off', // Disable error/warning decorations\n            quickSuggestions: false, // Disable IntelliSense\n            parameterHints: { enabled: false }, // Disable parameter hints\n            suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n            mouseWheelScrollSensitivity: 0,\n            fastScrollSensitivity: 0,\n            scrollBeyondLastLine: false,\n            lineNumbers: isShowLineNumbers ? 'on' : 'off',\n          }}\n          theme={theme}\n          className=\"my-2 rounded-md\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/IDE/code.content.cjs

@@ -0,0 +1,39 @@
+"use strict";
+const intlayer = require("intlayer");
+const codeContent = {
+  key: "code",
+  content: {
+    title: intlayer.t({
+      en: "Copy code",
+      es: "Copiar código",
+      pt: "Copiar código",
+      fr: "Copier le code",
+      de: "Code kopieren",
+      it: "Copiare il codice",
+      ja: "コードをコピー",
+      ko: "코드 복사",
+      zh: "复制代码",
+      hi: "कोड कॉपी करें",
+      "en-GB": "Copy code",
+      ru: "Копировать код",
+      ar: "نسخ الكود"
+    }),
+    description: intlayer.t({
+      en: "Copy the code to the clipboard",
+      es: "Copiar el código al portapapeles",
+      pt: "Copiar o código para a área de transferência",
+      fr: "Copier le code dans le presse-papiers",
+      de: "Kopieren Sie den Code in die Zwischenablage",
+      it: "Copiare il codice nella clipboard",
+      ja: "コードをクリップボードにコピー",
+      ko: "코드를 클립보드에 복사",
+      zh: "复制代码到剪贴板",
+      hi: "कोड को क्लिपबोर्ड पर कॉपी करें",
+      "en-GB": "Copy the code to the clipboard",
+      ru: "Копировать код в буфер обмена",
+      ar: "نسخ الكود إلى الحافظة"
+    })
+  }
+};
+module.exports = codeContent;
+//# sourceMappingURL=code.content.cjs.map

package/dist/components/IDE/code.content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.content.cjs","sources":["../../../src/components/IDE/code.content.ts"],"sourcesContent":["import { t, type Dictionary } from 'intlayer';\n\nconst codeContent = {\n  key: 'code',\n  content: {\n    title: t({\n      en: 'Copy code',\n      es: 'Copiar código',\n      pt: 'Copiar código',\n      fr: 'Copier le code',\n      de: 'Code kopieren',\n      it: 'Copiare il codice',\n      ja: 'コードをコピー',\n      ko: '코드 복사',\n      zh: '复制代码',\n      hi: 'कोड कॉपी करें',\n      'en-GB': 'Copy code',\n      ru: 'Копировать код',\n      ar: 'نسخ الكود',\n    }),\n    description: t({\n      en: 'Copy the code to the clipboard',\n      es: 'Copiar el código al portapapeles',\n      pt: 'Copiar o código para a área de transferência',\n      fr: 'Copier le code dans le presse-papiers',\n      de: 'Kopieren Sie den Code in die Zwischenablage',\n      it: 'Copiare il codice nella clipboard',\n      ja: 'コードをクリップボードにコピー',\n      ko: '코드를 클립보드에 복사',\n      zh: '复制代码到剪贴板',\n      hi: 'कोड को क्लिपबोर्ड पर कॉपी करें',\n      'en-GB': 'Copy the code to the clipboard',\n      ru: 'Копировать код в буфер обмена',\n      ar: 'نسخ الكود إلى الحافظة',\n    }),\n  },\n} satisfies Dictionary;\n\nexport default codeContent;\n"],"names":["t"],"mappings":";;AAEA,MAAM,cAAc;AAAA,EAClB,KAAK;AAAA,EACL,SAAS;AAAA,IACP,OAAOA,SAAAA,EAAE;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,IACD,aAAaA,SAAAA,EAAE;AAAA,MACb,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IACL,CAAA;AAAA,EAAA;AAEL;;"}

package/dist/components/IDE/code.content.d.ts

@@ -0,0 +1,73 @@
+declare const codeContent: {
+    key: string;
+    content: {
+        title: import('@intlayer/core').TypedNodeModel<import("@intlayer/core").NodeType.Translation, {
+            en: string;
+            es: string;
+            pt: string;
+            fr: string;
+            de: string;
+            it: string;
+            ja: string;
+            ko: string;
+            zh: string;
+            hi: string;
+            'en-GB': string;
+            ru: string;
+            ar: string;
+        }, {
+            nodeType: import("@intlayer/core").NodeType.Translation | "translation";
+        } & {
+            translation: {
+                en: string;
+                es: string;
+                pt: string;
+                fr: string;
+                de: string;
+                it: string;
+                ja: string;
+                ko: string;
+                zh: string;
+                hi: string;
+                'en-GB': string;
+                ru: string;
+                ar: string;
+            };
+        }>;
+        description: import('@intlayer/core').TypedNodeModel<import("@intlayer/core").NodeType.Translation, {
+            en: string;
+            es: string;
+            pt: string;
+            fr: string;
+            de: string;
+            it: string;
+            ja: string;
+            ko: string;
+            zh: string;
+            hi: string;
+            'en-GB': string;
+            ru: string;
+            ar: string;
+        }, {
+            nodeType: import("@intlayer/core").NodeType.Translation | "translation";
+        } & {
+            translation: {
+                en: string;
+                es: string;
+                pt: string;
+                fr: string;
+                de: string;
+                it: string;
+                ja: string;
+                ko: string;
+                zh: string;
+                hi: string;
+                'en-GB': string;
+                ru: string;
+                ar: string;
+            };
+        }>;
+    };
+};
+export default codeContent;
+//# sourceMappingURL=code.content.d.ts.map

package/dist/components/IDE/code.content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.content.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/code.content.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCK,CAAC;AAEvB,eAAe,WAAW,CAAC"}

package/dist/components/IDE/code.content.mjs

@@ -0,0 +1,40 @@
+import { t } from "intlayer";
+const codeContent = {
+  key: "code",
+  content: {
+    title: t({
+      en: "Copy code",
+      es: "Copiar código",
+      pt: "Copiar código",
+      fr: "Copier le code",
+      de: "Code kopieren",
+      it: "Copiare il codice",
+      ja: "コードをコピー",
+      ko: "코드 복사",
+      zh: "复制代码",
+      hi: "कोड कॉपी करें",
+      "en-GB": "Copy code",
+      ru: "Копировать код",
+      ar: "نسخ الكود"
+    }),
+    description: t({
+      en: "Copy the code to the clipboard",
+      es: "Copiar el código al portapapeles",
+      pt: "Copiar o código para a área de transferência",
+      fr: "Copier le code dans le presse-papiers",
+      de: "Kopieren Sie den Code in die Zwischenablage",
+      it: "Copiare il codice nella clipboard",
+      ja: "コードをクリップボードにコピー",
+      ko: "코드를 클립보드에 복사",
+      zh: "复制代码到剪贴板",
+      hi: "कोड को क्लिपबोर्ड पर कॉपी करें",
+      "en-GB": "Copy the code to the clipboard",
+      ru: "Копировать код в буфер обмена",
+      ar: "نسخ الكود إلى الحافظة"
+    })
+  }
+};
+export {
+  codeContent as default
+};
+//# sourceMappingURL=code.content.mjs.map

package/dist/components/IDE/code.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.content.mjs","sources":["../../../src/components/IDE/code.content.ts"],"sourcesContent":["import { t, type Dictionary } from 'intlayer';\n\nconst codeContent = {\n  key: 'code',\n  content: {\n    title: t({\n      en: 'Copy code',\n      es: 'Copiar código',\n      pt: 'Copiar código',\n      fr: 'Copier le code',\n      de: 'Code kopieren',\n      it: 'Copiare il codice',\n      ja: 'コードをコピー',\n      ko: '코드 복사',\n      zh: '复制代码',\n      hi: 'कोड कॉपी करें',\n      'en-GB': 'Copy code',\n      ru: 'Копировать код',\n      ar: 'نسخ الكود',\n    }),\n    description: t({\n      en: 'Copy the code to the clipboard',\n      es: 'Copiar el código al portapapeles',\n      pt: 'Copiar o código para a área de transferência',\n      fr: 'Copier le code dans le presse-papiers',\n      de: 'Kopieren Sie den Code in die Zwischenablage',\n      it: 'Copiare il codice nella clipboard',\n      ja: 'コードをクリップボードにコピー',\n      ko: '코드를 클립보드에 복사',\n      zh: '复制代码到剪贴板',\n      hi: 'कोड को क्लिपबोर्ड पर कॉपी करें',\n      'en-GB': 'Copy the code to the clipboard',\n      ru: 'Копировать код в буфер обмена',\n      ar: 'نسخ الكود إلى الحافظة',\n    }),\n  },\n} satisfies Dictionary;\n\nexport default codeContent;\n"],"names":[],"mappings":";AAEA,MAAM,cAAc;AAAA,EAClB,KAAK;AAAA,EACL,SAAS;AAAA,IACP,OAAO,EAAE;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,IACD,aAAa,EAAE;AAAA,MACb,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IACL,CAAA;AAAA,EAAA;AAEL;"}

package/dist/components/IDE/copyCode.content.cjs

@@ -0,0 +1,39 @@
+"use strict";
+const intlayer = require("intlayer");
+const copyContentContent = {
+  key: "code",
+  content: {
+    title: intlayer.t({
+      en: "Copy code",
+      es: "Copiar código",
+      pt: "Copiar código",
+      fr: "Copier le code",
+      de: "Code kopieren",
+      it: "Copiare il codice",
+      ja: "コードをコピー",
+      ko: "코드 복사",
+      zh: "复制代码",
+      hi: "कोड कॉपी करें",
+      "en-GB": "Copy code",
+      ru: "Копировать код",
+      ar: "نسخ الكود"
+    }),
+    description: intlayer.t({
+      en: "Copy the code to the clipboard",
+      es: "Copiar el código al portapapeles",
+      pt: "Copiar o código para a área de transferência",
+      fr: "Copier le code dans le presse-papiers",
+      de: "Kopieren Sie den Code in die Zwischenablage",
+      it: "Copiare il codice nella clipboard",
+      ja: "コードをクリップボードにコピー",
+      ko: "코드를 클립보드에 복사",
+      zh: "复制代码到剪贴板",
+      hi: "कोड को क्लिपबोर्ड पर कॉपी करें",
+      "en-GB": "Copy the code to the clipboard",
+      ru: "Копировать код в буфер обмена",
+      ar: "نسخ الكود إلى الحافظة"
+    })
+  }
+};
+module.exports = copyContentContent;
+//# sourceMappingURL=copyCode.content.cjs.map

package/dist/components/IDE/copyCode.content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyCode.content.cjs","sources":["../../../src/components/IDE/copyCode.content.ts"],"sourcesContent":["import { t, type Dictionary } from 'intlayer';\n\nconst copyContentContent = {\n  key: 'code',\n  content: {\n    title: t({\n      en: 'Copy code',\n      es: 'Copiar código',\n      pt: 'Copiar código',\n      fr: 'Copier le code',\n      de: 'Code kopieren',\n      it: 'Copiare il codice',\n      ja: 'コードをコピー',\n      ko: '코드 복사',\n      zh: '复制代码',\n      hi: 'कोड कॉपी करें',\n      'en-GB': 'Copy code',\n      ru: 'Копировать код',\n      ar: 'نسخ الكود',\n    }),\n    description: t({\n      en: 'Copy the code to the clipboard',\n      es: 'Copiar el código al portapapeles',\n      pt: 'Copiar o código para a área de transferência',\n      fr: 'Copier le code dans le presse-papiers',\n      de: 'Kopieren Sie den Code in die Zwischenablage',\n      it: 'Copiare il codice nella clipboard',\n      ja: 'コードをクリップボードにコピー',\n      ko: '코드를 클립보드에 복사',\n      zh: '复制代码到剪贴板',\n      hi: 'कोड को क्लिपबोर्ड पर कॉपी करें',\n      'en-GB': 'Copy the code to the clipboard',\n      ru: 'Копировать код в буфер обмена',\n      ar: 'نسخ الكود إلى الحافظة',\n    }),\n  },\n} satisfies Dictionary;\n\nexport default copyContentContent;\n"],"names":["t"],"mappings":";;AAEA,MAAM,qBAAqB;AAAA,EACzB,KAAK;AAAA,EACL,SAAS;AAAA,IACP,OAAOA,SAAAA,EAAE;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,IACD,aAAaA,SAAAA,EAAE;AAAA,MACb,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IACL,CAAA;AAAA,EAAA;AAEL;;"}

package/dist/components/IDE/copyCode.content.d.ts

@@ -0,0 +1,73 @@
+declare const copyContentContent: {
+    key: string;
+    content: {
+        title: import('@intlayer/core').TypedNodeModel<import("@intlayer/core").NodeType.Translation, {
+            en: string;
+            es: string;
+            pt: string;
+            fr: string;
+            de: string;
+            it: string;
+            ja: string;
+            ko: string;
+            zh: string;
+            hi: string;
+            'en-GB': string;
+            ru: string;
+            ar: string;
+        }, {
+            nodeType: import("@intlayer/core").NodeType.Translation | "translation";
+        } & {
+            translation: {
+                en: string;
+                es: string;
+                pt: string;
+                fr: string;
+                de: string;
+                it: string;
+                ja: string;
+                ko: string;
+                zh: string;
+                hi: string;
+                'en-GB': string;
+                ru: string;
+                ar: string;
+            };
+        }>;
+        description: import('@intlayer/core').TypedNodeModel<import("@intlayer/core").NodeType.Translation, {
+            en: string;
+            es: string;
+            pt: string;
+            fr: string;
+            de: string;
+            it: string;
+            ja: string;
+            ko: string;
+            zh: string;
+            hi: string;
+            'en-GB': string;
+            ru: string;
+            ar: string;
+        }, {
+            nodeType: import("@intlayer/core").NodeType.Translation | "translation";
+        } & {
+            translation: {
+                en: string;
+                es: string;
+                pt: string;
+                fr: string;
+                de: string;
+                it: string;
+                ja: string;
+                ko: string;
+                zh: string;
+                hi: string;
+                'en-GB': string;
+                ru: string;
+                ar: string;
+            };
+        }>;
+    };
+};
+export default copyContentContent;
+//# sourceMappingURL=copyCode.content.d.ts.map

package/dist/components/IDE/copyCode.content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyCode.content.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/copyCode.content.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCF,CAAC;AAEvB,eAAe,kBAAkB,CAAC"}

package/dist/components/IDE/copyCode.content.mjs

@@ -0,0 +1,40 @@
+import { t } from "intlayer";
+const copyContentContent = {
+  key: "code",
+  content: {
+    title: t({
+      en: "Copy code",
+      es: "Copiar código",
+      pt: "Copiar código",
+      fr: "Copier le code",
+      de: "Code kopieren",
+      it: "Copiare il codice",
+      ja: "コードをコピー",
+      ko: "코드 복사",
+      zh: "复制代码",
+      hi: "कोड कॉपी करें",
+      "en-GB": "Copy code",
+      ru: "Копировать код",
+      ar: "نسخ الكود"
+    }),
+    description: t({
+      en: "Copy the code to the clipboard",
+      es: "Copiar el código al portapapeles",
+      pt: "Copiar o código para a área de transferência",
+      fr: "Copier le code dans le presse-papiers",
+      de: "Kopieren Sie den Code in die Zwischenablage",
+      it: "Copiare il codice nella clipboard",
+      ja: "コードをクリップボードにコピー",
+      ko: "코드를 클립보드에 복사",
+      zh: "复制代码到剪贴板",
+      hi: "कोड को क्लिपबोर्ड पर कॉपी करें",
+      "en-GB": "Copy the code to the clipboard",
+      ru: "Копировать код в буфер обмена",
+      ar: "نسخ الكود إلى الحافظة"
+    })
+  }
+};
+export {
+  copyContentContent as default
+};
+//# sourceMappingURL=copyCode.content.mjs.map

package/dist/components/IDE/copyCode.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyCode.content.mjs","sources":["../../../src/components/IDE/copyCode.content.ts"],"sourcesContent":["import { t, type Dictionary } from 'intlayer';\n\nconst copyContentContent = {\n  key: 'code',\n  content: {\n    title: t({\n      en: 'Copy code',\n      es: 'Copiar código',\n      pt: 'Copiar código',\n      fr: 'Copier le code',\n      de: 'Code kopieren',\n      it: 'Copiare il codice',\n      ja: 'コードをコピー',\n      ko: '코드 복사',\n      zh: '复制代码',\n      hi: 'कोड कॉपी करें',\n      'en-GB': 'Copy code',\n      ru: 'Копировать код',\n      ar: 'نسخ الكود',\n    }),\n    description: t({\n      en: 'Copy the code to the clipboard',\n      es: 'Copiar el código al portapapeles',\n      pt: 'Copiar o código para a área de transferência',\n      fr: 'Copier le code dans le presse-papiers',\n      de: 'Kopieren Sie den Code in die Zwischenablage',\n      it: 'Copiare il codice nella clipboard',\n      ja: 'コードをクリップボードにコピー',\n      ko: '코드를 클립보드에 복사',\n      zh: '复制代码到剪贴板',\n      hi: 'कोड को क्लिपबोर्ड पर कॉपी करें',\n      'en-GB': 'Copy the code to the clipboard',\n      ru: 'Копировать код в буфер обмена',\n      ar: 'نسخ الكود إلى الحافظة',\n    }),\n  },\n} satisfies Dictionary;\n\nexport default copyContentContent;\n"],"names":[],"mappings":";AAEA,MAAM,qBAAqB;AAAA,EACzB,KAAK;AAAA,EACL,SAAS;AAAA,IACP,OAAO,EAAE;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,IACD,aAAa,EAAE;AAAA,MACb,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IACL,CAAA;AAAA,EAAA;AAEL;"}

package/dist/components/Popover/index.cjs

@@ -1,25 +1,69 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const Popover = ({ children, content }) => /* @__PURE__ */ jsxRuntime.jsxs(
+const utils_cn = require("../../utils/cn.cjs");
+const components_Container_index = require("../Container/index.cjs");
+const Popover = ({
+  children,
+  className,
+  identifier,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
-    className: "group relative",
+    className: utils_cn.cn("group/popover relative flex cursor-pointer", className),
+    "aria-label": `Popover ${identifier}`,
+    id: `unrollable-panel-button-${identifier}`,
     "aria-haspopup": true,
-    "aria-expanded": false,
-    "aria-label": "Display the popup by hovering this element",
-    children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "bg-card absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100",
-          "aria-hidden": true,
-          children: content
-        }
-      )
-    ]
+    ...props,
+    children
   }
 );
+const Detail = ({
+  children,
+  isHidden = void 0,
+  isOverable = true,
+  isFocusable = false,
+  xAlign = "start",
+  yAlign = "bellow",
+  identifier,
+  className,
+  displayArrow = true,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  components_Container_index.Container,
+  {
+    transparency: "sm",
+    "aria-hidden": isHidden,
+    "aria-labelledby": `unrollable-panel-button-${identifier}`,
+    id: `unrollable-panel-${identifier}`,
+    className: utils_cn.cn(
+      "absolute z-[1000] min-w-full ring-neutral ring-1 rounded-md",
+      /* Positioning */
+      xAlign === "start" && "left-0",
+      xAlign === "end" && "right-0",
+      yAlign === "bellow" && "top-[calc(100%+1rem)]",
+      yAlign === "above" && "bottom-[calc(100%+1rem)]",
+      /* Arrow indicator */
+      displayArrow && 'before:absolute before:z-[999] before:content-[""] before:w-0 before:h-0',
+      /* Horizontal positioning */
+      displayArrow && xAlign === "start" && "before:left-2",
+      displayArrow && xAlign === "end" && "before:right-2",
+      /* Arrow pointing up (when popover is below trigger) */
+      displayArrow && yAlign === "bellow" && "before:-top-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral",
+      /* Arrow pointing down (when popover is above trigger) */
+      displayArrow && yAlign === "above" && "before:-bottom-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-neutral",
+      /* Visibility management */
+      "overflow-x-visible transition-all duration-400 ease-in-out opacity-0",
+      isHidden !== false ? "invisible" : "delay-800 visible opacity-100",
+      isOverable && "group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800",
+      isFocusable && "group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+Popover.Detail = Detail;
 exports.Popover = Popover;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\ntype PopoverProps = {\n  content: ReactNode | string;\n  children: ReactNode;\n};\n\nexport const Popover: FC<PopoverProps> = ({ children, content }) => (\n  <div\n    className=\"group relative\"\n    aria-haspopup={true}\n    aria-expanded={false}\n    aria-label=\"Display the popup by hovering this element\"\n  >\n    {children}\n    <div\n      className=\"bg-card absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100\"\n      aria-hidden={true}\n    >\n      {content}\n    </div>\n  </div>\n);\n"],"names":["jsxs","jsx"],"mappings":";;;AAOO,MAAM,UAA4B,CAAC,EAAE,UAAU,QACpD,MAAAA,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,cAAW;AAAA,IAEV,UAAA;AAAA,MAAA;AAAA,MACDC,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAa;AAAA,UAEZ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\n\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  identifier: string;\n};\n\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Trigger allowing to open a popover menu.\n *\n * Example:\n * ```jsx\n * <Popover identifier=\"popover\">\n *   Open popover\n *\n *   <Popover.Detail identifier=\"popover\">\n *     <div>Content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * > Note Popover.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const Popover: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn('group/popover relative flex cursor-pointer', className)}\n    aria-label={`Popover ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  xAlign?: 'start' | 'end';\n  yAlign?: 'bellow' | 'above';\n  displayArrow?: boolean;\n};\n\n/**\n * Component that opens a popover menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <Popover.Detail identifier=\"popover\">\n *   <div>Content</div>\n * </Popover.Detail>\n * ```\n */\nconst Detail: FC<DetailProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = true,\n  isFocusable = false,\n  xAlign = 'start',\n  yAlign = 'bellow',\n  identifier,\n  className,\n  displayArrow = true,\n  ...props\n}) => (\n  <Container\n    transparency=\"sm\"\n    aria-hidden={isHidden}\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n    className={cn(\n      'absolute z-[1000] min-w-full ring-neutral ring-1 rounded-md',\n\n      /* Positioning */\n      xAlign === 'start' && 'left-0',\n      xAlign === 'end' && 'right-0',\n      yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n      yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n      /* Arrow indicator */\n      displayArrow &&\n        'before:absolute before:z-[999] before:content-[\"\"] before:w-0 before:h-0',\n\n      /* Horizontal positioning */\n      displayArrow && xAlign === 'start' && 'before:left-2',\n      displayArrow && xAlign === 'end' && 'before:right-2',\n\n      /* Arrow pointing up (when popover is below trigger) */\n      displayArrow &&\n        yAlign === 'bellow' &&\n        'before:-top-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-neutral',\n\n      /* Visibility management */\n      'overflow-x-visible transition-all duration-400 ease-in-out opacity-0',\n      isHidden !== false ? 'invisible' : 'delay-800 visible opacity-100',\n      isOverable &&\n        'group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800',\n      isFocusable &&\n        'group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800',\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </Container>\n);\n\nPopover.Detail = Detail;\n"],"names":["jsx","cn","Container"],"mappings":";;;;;AA+BO,MAAM,UAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,8CAA8C,SAAS;AAAA,IACrE,cAAY,WAAW,UAAU;AAAA,IACjC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAuBF,MAAM,SAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MACED,2BAAA;AAAA,EAACE,2BAAA;AAAA,EAAA;AAAA,IACC,cAAa;AAAA,IACb,eAAa;AAAA,IACb,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAClC,WAAWD,SAAA;AAAA,MACT;AAAA;AAAA,MAGA,WAAW,WAAW;AAAA,MACtB,WAAW,SAAS;AAAA,MACpB,WAAW,YAAY;AAAA,MACvB,WAAW,WAAW;AAAA;AAAA,MAGtB,gBACE;AAAA;AAAA,MAGF,gBAAgB,WAAW,WAAW;AAAA,MACtC,gBAAgB,WAAW,SAAS;AAAA;AAAA,MAGpC,gBACE,WAAW,YACX;AAAA;AAAA,MAGF,gBACE,WAAW,WACX;AAAA;AAAA,MAGF;AAAA,MACA,aAAa,QAAQ,cAAc;AAAA,MACnC,cACE;AAAA,MACF,eACE;AAAA,MACF;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,QAAQ,SAAS;;"}

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

@@ -1,8 +1,34 @@
-import { FC, ReactNode } from 'react';
-type PopoverProps = {
-    content: ReactNode | string;
-    children: ReactNode;
+import { DetailedHTMLProps, FC, HTMLAttributes } from 'react';
+export type PopoverProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    identifier: string;
+};
+export type PopoverType = FC<PopoverProps> & {
+    Detail: FC<DetailProps>;
+};
+/**
+ * Trigger allowing to open a popover menu.
+ *
+ * Example:
+ * ```jsx
+ * <Popover identifier="popover">
+ *   Open popover
+ *
+ *   <Popover.Detail identifier="popover">
+ *     <div>Content</div>
+ *   </Popover.Detail>
+ * </Popover>
+ * ```
+ *
+ * > Note Popover.Trigger can be replaced by a button. Don't add a button inside the trigger.
+ */
+export declare const Popover: PopoverType;
+export type DetailProps = HTMLAttributes<HTMLDivElement> & {
+    isFocusable?: boolean;
+    isHidden?: boolean;
+    isOverable?: boolean;
+    identifier: string;
+    xAlign?: 'start' | 'end';
+    yAlign?: 'bellow' | 'above';
+    displayArrow?: boolean;
 };
-export declare const Popover: FC<PopoverProps>;
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAepC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAInE,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,cAAc,CACf,GAAG;IACF,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG;IAC3C,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,OAAO,EAAE,WAerB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACzD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC"}

package/dist/components/Popover/index.mjs

@@ -1,24 +1,68 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-const Popover = ({ children, content }) => /* @__PURE__ */ jsxs(
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.mjs";
+import { Container } from "../Container/index.mjs";
+const Popover = ({
+  children,
+  className,
+  identifier,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: "group relative",
+    className: cn("group/popover relative flex cursor-pointer", className),
+    "aria-label": `Popover ${identifier}`,
+    id: `unrollable-panel-button-${identifier}`,
     "aria-haspopup": true,
-    "aria-expanded": false,
-    "aria-label": "Display the popup by hovering this element",
-    children: [
-      children,
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "bg-card absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100",
-          "aria-hidden": true,
-          children: content
-        }
-      )
-    ]
+    ...props,
+    children
   }
 );
+const Detail = ({
+  children,
+  isHidden = void 0,
+  isOverable = true,
+  isFocusable = false,
+  xAlign = "start",
+  yAlign = "bellow",
+  identifier,
+  className,
+  displayArrow = true,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Container,
+  {
+    transparency: "sm",
+    "aria-hidden": isHidden,
+    "aria-labelledby": `unrollable-panel-button-${identifier}`,
+    id: `unrollable-panel-${identifier}`,
+    className: cn(
+      "absolute z-[1000] min-w-full ring-neutral ring-1 rounded-md",
+      /* Positioning */
+      xAlign === "start" && "left-0",
+      xAlign === "end" && "right-0",
+      yAlign === "bellow" && "top-[calc(100%+1rem)]",
+      yAlign === "above" && "bottom-[calc(100%+1rem)]",
+      /* Arrow indicator */
+      displayArrow && 'before:absolute before:z-[999] before:content-[""] before:w-0 before:h-0',
+      /* Horizontal positioning */
+      displayArrow && xAlign === "start" && "before:left-2",
+      displayArrow && xAlign === "end" && "before:right-2",
+      /* Arrow pointing up (when popover is below trigger) */
+      displayArrow && yAlign === "bellow" && "before:-top-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral",
+      /* Arrow pointing down (when popover is above trigger) */
+      displayArrow && yAlign === "above" && "before:-bottom-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-neutral",
+      /* Visibility management */
+      "overflow-x-visible transition-all duration-400 ease-in-out opacity-0",
+      isHidden !== false ? "invisible" : "delay-800 visible opacity-100",
+      isOverable && "group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800",
+      isFocusable && "group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+Popover.Detail = Detail;
 export {
   Popover
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\ntype PopoverProps = {\n  content: ReactNode | string;\n  children: ReactNode;\n};\n\nexport const Popover: FC<PopoverProps> = ({ children, content }) => (\n  <div\n    className=\"group relative\"\n    aria-haspopup={true}\n    aria-expanded={false}\n    aria-label=\"Display the popup by hovering this element\"\n  >\n    {children}\n    <div\n      className=\"bg-card absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100\"\n      aria-hidden={true}\n    >\n      {content}\n    </div>\n  </div>\n);\n"],"names":[],"mappings":";AAOO,MAAM,UAA4B,CAAC,EAAE,UAAU,QACpD,MAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,cAAW;AAAA,IAEV,UAAA;AAAA,MAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAa;AAAA,UAEZ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\n\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  identifier: string;\n};\n\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Trigger allowing to open a popover menu.\n *\n * Example:\n * ```jsx\n * <Popover identifier=\"popover\">\n *   Open popover\n *\n *   <Popover.Detail identifier=\"popover\">\n *     <div>Content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * > Note Popover.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const Popover: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn('group/popover relative flex cursor-pointer', className)}\n    aria-label={`Popover ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  xAlign?: 'start' | 'end';\n  yAlign?: 'bellow' | 'above';\n  displayArrow?: boolean;\n};\n\n/**\n * Component that opens a popover menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <Popover.Detail identifier=\"popover\">\n *   <div>Content</div>\n * </Popover.Detail>\n * ```\n */\nconst Detail: FC<DetailProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = true,\n  isFocusable = false,\n  xAlign = 'start',\n  yAlign = 'bellow',\n  identifier,\n  className,\n  displayArrow = true,\n  ...props\n}) => (\n  <Container\n    transparency=\"sm\"\n    aria-hidden={isHidden}\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n    className={cn(\n      'absolute z-[1000] min-w-full ring-neutral ring-1 rounded-md',\n\n      /* Positioning */\n      xAlign === 'start' && 'left-0',\n      xAlign === 'end' && 'right-0',\n      yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n      yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n      /* Arrow indicator */\n      displayArrow &&\n        'before:absolute before:z-[999] before:content-[\"\"] before:w-0 before:h-0',\n\n      /* Horizontal positioning */\n      displayArrow && xAlign === 'start' && 'before:left-2',\n      displayArrow && xAlign === 'end' && 'before:right-2',\n\n      /* Arrow pointing up (when popover is below trigger) */\n      displayArrow &&\n        yAlign === 'bellow' &&\n        'before:-top-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-neutral',\n\n      /* Visibility management */\n      'overflow-x-visible transition-all duration-400 ease-in-out opacity-0',\n      isHidden !== false ? 'invisible' : 'delay-800 visible opacity-100',\n      isOverable &&\n        'group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800',\n      isFocusable &&\n        'group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800',\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </Container>\n);\n\nPopover.Detail = Detail;\n"],"names":[],"mappings":";;;AA+BO,MAAM,UAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,8CAA8C,SAAS;AAAA,IACrE,cAAY,WAAW,UAAU;AAAA,IACjC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAuBF,MAAM,SAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,cAAa;AAAA,IACb,eAAa;AAAA,IACb,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAClC,WAAW;AAAA,MACT;AAAA;AAAA,MAGA,WAAW,WAAW;AAAA,MACtB,WAAW,SAAS;AAAA,MACpB,WAAW,YAAY;AAAA,MACvB,WAAW,WAAW;AAAA;AAAA,MAGtB,gBACE;AAAA;AAAA,MAGF,gBAAgB,WAAW,WAAW;AAAA,MACtC,gBAAgB,WAAW,SAAS;AAAA;AAAA,MAGpC,gBACE,WAAW,YACX;AAAA;AAAA,MAGF,gBACE,WAAW,WACX;AAAA;AAAA,MAGF;AAAA,MACA,aAAa,QAAQ,cAAc;AAAA,MACnC,cACE;AAAA,MACF,eACE;AAAA,MACF;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,QAAQ,SAAS;"}