@intlayer/design-system 3.0.3 → 3.2.0

package/dist/hooks/useItemSelector.d.ts

@@ -1,11 +1,11 @@
 import { MutableRefObject } from 'react';
-
-type PositionState = {
+type StyleState = {
     left: number;
     width: number;
+    opacity: number;
 };
 export declare const useItemSelector: (optionsRefs: MutableRefObject<HTMLElement[]>, selector?: (option: HTMLElement, index: number) => boolean, isHoverable?: boolean) => {
-    choiceIndicatorPosition: PositionState | null;
+    choiceIndicatorPosition: StyleState | null;
 };
 export {};
 //# sourceMappingURL=useItemSelector.d.ts.map

package/dist/hooks/useItemSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useItemSelector.d.ts","sourceRoot":"","sources":["../../src/hooks/useItemSelector.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEnE,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAKF,eAAO,MAAM,eAAe,gBACb,gBAAgB,CAAC,WAAW,EAAE,CAAC,aAClC,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO;;CA2H1D,CAAC"}
+{"version":3,"file":"useItemSelector.d.ts","sourceRoot":"","sources":["../../src/hooks/useItemSelector.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEnE,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAKF,eAAO,MAAM,eAAe,gBACb,gBAAgB,CAAC,WAAW,EAAE,CAAC,aAClC,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO;;CAoI1D,CAAC"}

package/dist/hooks/useItemSelector.mjs

@@ -13,12 +13,21 @@ const useItemSelector = (optionsRefs, selector = selectorDefault, isHoverable =
       } else {
         targetElement = optionsRefs.current.find(selector) ?? null;
       }
-      if (!targetElement) return;
+      if (!targetElement) {
+        setChoiceIndicatorPosition((prev) => ({
+          left: 0,
+          width: 0,
+          ...prev,
+          opacity: 0
+        }));
+        return;
+      }
       const left = targetElement.offsetLeft;
       const width = targetElement.offsetWidth;
       setChoiceIndicatorPosition({
         left,
-        width
+        width,
+        opacity: 1
       });
     };
     calculatePosition();

package/dist/hooks/useItemSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useItemSelector.mjs","sources":["../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, type MutableRefObject } from 'react';\n\ntype PositionState = {\n  left: number;\n  width: number;\n};\n\nconst selectorDefault = (option: HTMLElement) =>\n  option?.getAttribute('aria-selected') === 'true';\n\nexport const useItemSelector = (\n  optionsRefs: MutableRefObject<HTMLElement[]>,\n  selector: (option: HTMLElement, index: number) => boolean = selectorDefault,\n  isHoverable = false\n) => {\n  const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n    useState<PositionState | null>(null);\n\n  const [hoveredItem, setHoveredItem] = useState<HTMLElement | null>(null);\n\n  const itemsLength = optionsRefs.current.length;\n\n  useEffect(() => {\n    const calculatePosition = () => {\n      let targetElement: HTMLElement | null = null;\n\n      if (hoveredItem) {\n        targetElement = hoveredItem;\n      } else {\n        targetElement = optionsRefs.current.find(selector) ?? null;\n      }\n\n      if (!targetElement) return;\n\n      const left = targetElement.offsetLeft;\n      const width = targetElement.offsetWidth;\n\n      setChoiceIndicatorPosition({\n        left,\n        width,\n      });\n    };\n\n    calculatePosition();\n\n    // Event listeners for window events\n    window.addEventListener('resize', calculatePosition);\n    window.addEventListener('DOMContentLoaded', calculatePosition);\n\n    // MutationObserver to watch for 'aria-selected' changes\n    const mutationObservers: MutationObserver[] = [];\n\n    optionsRefs.current.forEach((option) => {\n      if (option) {\n        const observer = new MutationObserver((mutations) => {\n          for (const mutation of mutations) {\n            if (\n              mutation.type === 'attributes' &&\n              mutation.attributeName === 'aria-selected'\n            ) {\n              calculatePosition();\n              break;\n            }\n          }\n        });\n\n        observer.observe(option, {\n          attributes: true,\n          attributeFilter: ['aria-selected'],\n        });\n\n        mutationObservers.push(observer);\n      }\n    });\n\n    // ResizeObserver to watch for size changes\n    const resizeObservers: ResizeObserver[] = [];\n\n    const observeSize = (element: HTMLElement) => {\n      if (!element) return;\n      const resizeObserver = new ResizeObserver(() => {\n        calculatePosition();\n      });\n      resizeObserver.observe(element);\n      resizeObservers.push(resizeObserver);\n    };\n\n    // Observe the selected item\n    const selectedItem = optionsRefs.current.find(selector) ?? null;\n\n    if (selectedItem) {\n      observeSize(selectedItem);\n    }\n\n    // Observe the hovered item\n    if (hoveredItem) {\n      observeSize(hoveredItem);\n    }\n\n    // Add hover event listeners\n    const handleMouseEnter = (event: Event) => {\n      setHoveredItem(event.currentTarget as HTMLElement);\n    };\n\n    const handleMouseLeave = () => {\n      setHoveredItem(null);\n    };\n\n    if (isHoverable) {\n      optionsRefs.current.forEach((option) => {\n        option?.addEventListener('mouseenter', handleMouseEnter);\n        option?.addEventListener('mouseleave', handleMouseLeave);\n      });\n    }\n\n    return () => {\n      // Cleanup window event listeners\n      window.removeEventListener('resize', calculatePosition);\n      window.removeEventListener('DOMContentLoaded', calculatePosition);\n\n      // Disconnect MutationObservers\n      mutationObservers.forEach((observer) => observer.disconnect());\n\n      // Disconnect ResizeObservers\n      resizeObservers.forEach((observer) => observer.disconnect());\n\n      // Remove hover event listeners\n      optionsRefs.current.forEach((option) => {\n        option?.removeEventListener('mouseenter', handleMouseEnter);\n        option?.removeEventListener('mouseleave', handleMouseLeave);\n      });\n    };\n  }, [optionsRefs, selector, hoveredItem, itemsLength]);\n\n  return { choiceIndicatorPosition };\n};\n"],"names":[],"mappings":";;AASA,MAAM,kBAAkB,CAAC,WACvB,QAAQ,aAAa,eAAe,MAAM;AAErC,MAAM,kBAAkB,CAC7B,aACA,WAA4D,iBAC5D,cAAc,UACX;AACH,QAAM,CAAC,yBAAyB,0BAA0B,IACxD,SAA+B,IAAI;AAErC,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B,IAAI;AAEjE,QAAA,cAAc,YAAY,QAAQ;AAExC,YAAU,MAAM;AACd,UAAM,oBAAoB,MAAM;AAC9B,UAAI,gBAAoC;AAExC,UAAI,aAAa;AACC,wBAAA;AAAA,MAAA,OACX;AACL,wBAAgB,YAAY,QAAQ,KAAK,QAAQ,KAAK;AAAA,MACxD;AAEA,UAAI,CAAC,cAAe;AAEpB,YAAM,OAAO,cAAc;AAC3B,YAAM,QAAQ,cAAc;AAED,iCAAA;AAAA,QACzB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAGe;AAGX,WAAA,iBAAiB,UAAU,iBAAiB;AAC5C,WAAA,iBAAiB,oBAAoB,iBAAiB;AAG7D,UAAM,oBAAwC,CAAA;AAElC,gBAAA,QAAQ,QAAQ,CAAC,WAAW;AACtC,UAAI,QAAQ;AACV,cAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACnD,qBAAW,YAAY,WAAW;AAChC,gBACE,SAAS,SAAS,gBAClB,SAAS,kBAAkB,iBAC3B;AACkB;AAClB;AAAA,YACF;AAAA,UACF;AAAA,QAAA,CACD;AAED,iBAAS,QAAQ,QAAQ;AAAA,UACvB,YAAY;AAAA,UACZ,iBAAiB,CAAC,eAAe;AAAA,QAAA,CAClC;AAED,0BAAkB,KAAK,QAAQ;AAAA,MACjC;AAAA,IAAA,CACD;AAGD,UAAM,kBAAoC,CAAA;AAEpC,UAAA,cAAc,CAAC,YAAyB;AAC5C,UAAI,CAAC,QAAS;AACR,YAAA,iBAAiB,IAAI,eAAe,MAAM;AAC5B;MAAA,CACnB;AACD,qBAAe,QAAQ,OAAO;AAC9B,sBAAgB,KAAK,cAAc;AAAA,IAAA;AAIrC,UAAM,eAAe,YAAY,QAAQ,KAAK,QAAQ,KAAK;AAE3D,QAAI,cAAc;AAChB,kBAAY,YAAY;AAAA,IAC1B;AAGA,QAAI,aAAa;AACf,kBAAY,WAAW;AAAA,IACzB;AAGM,UAAA,mBAAmB,CAAC,UAAiB;AACzC,qBAAe,MAAM,aAA4B;AAAA,IAAA;AAGnD,UAAM,mBAAmB,MAAM;AAC7B,qBAAe,IAAI;AAAA,IAAA;AAGrB,QAAI,aAAa;AACH,kBAAA,QAAQ,QAAQ,CAAC,WAAW;AAC9B,gBAAA,iBAAiB,cAAc,gBAAgB;AAC/C,gBAAA,iBAAiB,cAAc,gBAAgB;AAAA,MAAA,CACxD;AAAA,IACH;AAEA,WAAO,MAAM;AAEJ,aAAA,oBAAoB,UAAU,iBAAiB;AAC/C,aAAA,oBAAoB,oBAAoB,iBAAiB;AAGhE,wBAAkB,QAAQ,CAAC,aAAa,SAAS,WAAY,CAAA;AAG7D,sBAAgB,QAAQ,CAAC,aAAa,SAAS,WAAY,CAAA;AAG/C,kBAAA,QAAQ,QAAQ,CAAC,WAAW;AAC9B,gBAAA,oBAAoB,cAAc,gBAAgB;AAClD,gBAAA,oBAAoB,cAAc,gBAAgB;AAAA,MAAA,CAC3D;AAAA,IAAA;AAAA,KAEF,CAAC,aAAa,UAAU,aAAa,WAAW,CAAC;AAEpD,SAAO,EAAE,wBAAwB;AACnC;"}
+{"version":3,"file":"useItemSelector.mjs","sources":["../../src/hooks/useItemSelector.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, type MutableRefObject } from 'react';\n\ntype StyleState = {\n  left: number;\n  width: number;\n  opacity: number;\n};\n\nconst selectorDefault = (option: HTMLElement) =>\n  option?.getAttribute('aria-selected') === 'true';\n\nexport const useItemSelector = (\n  optionsRefs: MutableRefObject<HTMLElement[]>,\n  selector: (option: HTMLElement, index: number) => boolean = selectorDefault,\n  isHoverable = false\n) => {\n  const [choiceIndicatorPosition, setChoiceIndicatorPosition] =\n    useState<StyleState | null>(null);\n\n  const [hoveredItem, setHoveredItem] = useState<HTMLElement | null>(null);\n\n  const itemsLength = optionsRefs.current.length;\n\n  useEffect(() => {\n    const calculatePosition = () => {\n      let targetElement: HTMLElement | null = null;\n\n      if (hoveredItem) {\n        targetElement = hoveredItem;\n      } else {\n        targetElement = optionsRefs.current.find(selector) ?? null;\n      }\n\n      if (!targetElement) {\n        setChoiceIndicatorPosition((prev) => ({\n          left: 0,\n          width: 0,\n          ...prev,\n          opacity: 0,\n        }));\n        return;\n      }\n\n      const left = targetElement.offsetLeft;\n      const width = targetElement.offsetWidth;\n\n      setChoiceIndicatorPosition({\n        left,\n        width,\n        opacity: 1,\n      });\n    };\n\n    calculatePosition();\n\n    // Event listeners for window events\n    window.addEventListener('resize', calculatePosition);\n    window.addEventListener('DOMContentLoaded', calculatePosition);\n\n    // MutationObserver to watch for 'aria-selected' changes\n    const mutationObservers: MutationObserver[] = [];\n\n    optionsRefs.current.forEach((option) => {\n      if (option) {\n        const observer = new MutationObserver((mutations) => {\n          for (const mutation of mutations) {\n            if (\n              mutation.type === 'attributes' &&\n              mutation.attributeName === 'aria-selected'\n            ) {\n              calculatePosition();\n              break;\n            }\n          }\n        });\n\n        observer.observe(option, {\n          attributes: true,\n          attributeFilter: ['aria-selected'],\n        });\n\n        mutationObservers.push(observer);\n      }\n    });\n\n    // ResizeObserver to watch for size changes\n    const resizeObservers: ResizeObserver[] = [];\n\n    const observeSize = (element: HTMLElement) => {\n      if (!element) return;\n      const resizeObserver = new ResizeObserver(() => {\n        calculatePosition();\n      });\n      resizeObserver.observe(element);\n      resizeObservers.push(resizeObserver);\n    };\n\n    // Observe the selected item\n    const selectedItem = optionsRefs.current.find(selector) ?? null;\n\n    if (selectedItem) {\n      observeSize(selectedItem);\n    }\n\n    // Observe the hovered item\n    if (hoveredItem) {\n      observeSize(hoveredItem);\n    }\n\n    // Add hover event listeners\n    const handleMouseEnter = (event: Event) => {\n      setHoveredItem(event.currentTarget as HTMLElement);\n    };\n\n    const handleMouseLeave = () => {\n      setHoveredItem(null);\n    };\n\n    if (isHoverable) {\n      optionsRefs.current.forEach((option) => {\n        option?.addEventListener('mouseenter', handleMouseEnter);\n        option?.addEventListener('mouseleave', handleMouseLeave);\n      });\n    }\n\n    return () => {\n      // Cleanup window event listeners\n      window.removeEventListener('resize', calculatePosition);\n      window.removeEventListener('DOMContentLoaded', calculatePosition);\n\n      // Disconnect MutationObservers\n      mutationObservers.forEach((observer) => observer.disconnect());\n\n      // Disconnect ResizeObservers\n      resizeObservers.forEach((observer) => observer.disconnect());\n\n      // Remove hover event listeners\n      optionsRefs.current.forEach((option) => {\n        option?.removeEventListener('mouseenter', handleMouseEnter);\n        option?.removeEventListener('mouseleave', handleMouseLeave);\n      });\n    };\n  }, [optionsRefs, selector, hoveredItem, itemsLength]);\n\n  return { choiceIndicatorPosition };\n};\n"],"names":[],"mappings":";;AAUA,MAAM,kBAAkB,CAAC,WACvB,QAAQ,aAAa,eAAe,MAAM;AAErC,MAAM,kBAAkB,CAC7B,aACA,WAA4D,iBAC5D,cAAc,UACX;AACH,QAAM,CAAC,yBAAyB,0BAA0B,IACxD,SAA4B,IAAI;AAElC,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B,IAAI;AAEjE,QAAA,cAAc,YAAY,QAAQ;AAExC,YAAU,MAAM;AACd,UAAM,oBAAoB,MAAM;AAC9B,UAAI,gBAAoC;AAExC,UAAI,aAAa;AACC,wBAAA;AAAA,MAAA,OACX;AACL,wBAAgB,YAAY,QAAQ,KAAK,QAAQ,KAAK;AAAA,MACxD;AAEA,UAAI,CAAC,eAAe;AAClB,mCAA2B,CAAC,UAAU;AAAA,UACpC,MAAM;AAAA,UACN,OAAO;AAAA,UACP,GAAG;AAAA,UACH,SAAS;AAAA,QACT,EAAA;AACF;AAAA,MACF;AAEA,YAAM,OAAO,cAAc;AAC3B,YAAM,QAAQ,cAAc;AAED,iCAAA;AAAA,QACzB;AAAA,QACA;AAAA,QACA,SAAS;AAAA,MAAA,CACV;AAAA,IAAA;AAGe;AAGX,WAAA,iBAAiB,UAAU,iBAAiB;AAC5C,WAAA,iBAAiB,oBAAoB,iBAAiB;AAG7D,UAAM,oBAAwC,CAAA;AAElC,gBAAA,QAAQ,QAAQ,CAAC,WAAW;AACtC,UAAI,QAAQ;AACV,cAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACnD,qBAAW,YAAY,WAAW;AAChC,gBACE,SAAS,SAAS,gBAClB,SAAS,kBAAkB,iBAC3B;AACkB;AAClB;AAAA,YACF;AAAA,UACF;AAAA,QAAA,CACD;AAED,iBAAS,QAAQ,QAAQ;AAAA,UACvB,YAAY;AAAA,UACZ,iBAAiB,CAAC,eAAe;AAAA,QAAA,CAClC;AAED,0BAAkB,KAAK,QAAQ;AAAA,MACjC;AAAA,IAAA,CACD;AAGD,UAAM,kBAAoC,CAAA;AAEpC,UAAA,cAAc,CAAC,YAAyB;AAC5C,UAAI,CAAC,QAAS;AACR,YAAA,iBAAiB,IAAI,eAAe,MAAM;AAC5B;MAAA,CACnB;AACD,qBAAe,QAAQ,OAAO;AAC9B,sBAAgB,KAAK,cAAc;AAAA,IAAA;AAIrC,UAAM,eAAe,YAAY,QAAQ,KAAK,QAAQ,KAAK;AAE3D,QAAI,cAAc;AAChB,kBAAY,YAAY;AAAA,IAC1B;AAGA,QAAI,aAAa;AACf,kBAAY,WAAW;AAAA,IACzB;AAGM,UAAA,mBAAmB,CAAC,UAAiB;AACzC,qBAAe,MAAM,aAA4B;AAAA,IAAA;AAGnD,UAAM,mBAAmB,MAAM;AAC7B,qBAAe,IAAI;AAAA,IAAA;AAGrB,QAAI,aAAa;AACH,kBAAA,QAAQ,QAAQ,CAAC,WAAW;AAC9B,gBAAA,iBAAiB,cAAc,gBAAgB;AAC/C,gBAAA,iBAAiB,cAAc,gBAAgB;AAAA,MAAA,CACxD;AAAA,IACH;AAEA,WAAO,MAAM;AAEJ,aAAA,oBAAoB,UAAU,iBAAiB;AAC/C,aAAA,oBAAoB,oBAAoB,iBAAiB;AAGhE,wBAAkB,QAAQ,CAAC,aAAa,SAAS,WAAY,CAAA;AAG7D,sBAAgB,QAAQ,CAAC,aAAa,SAAS,WAAY,CAAA;AAG/C,kBAAA,QAAQ,QAAQ,CAAC,WAAW;AAC9B,gBAAA,oBAAoB,cAAc,gBAAgB;AAClD,gBAAA,oBAAoB,cAAc,gBAAgB;AAAA,MAAA,CAC3D;AAAA,IAAA;AAAA,KAEF,CAAC,aAAa,UAAU,aAAa,WAAW,CAAC;AAEpD,SAAO,EAAE,wBAAwB;AACnC;"}

package/dist/hooks/usePersistedStore.cjs

@@ -0,0 +1,22 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require$$0 = require("react");
+const usePersistedStore = (key, initialValue) => {
+  const [state, setState] = require$$0.useState(() => {
+    const persistedState = sessionStorage.getItem(key);
+    if (persistedState) {
+      return JSON.parse(persistedState);
+    }
+    return initialValue;
+  });
+  require$$0.useEffect(() => {
+    const persistedState = sessionStorage.getItem(key);
+    if (persistedState) {
+      setState(JSON.parse(persistedState));
+    }
+  }, [key, initialValue]);
+  return [state, setState];
+};
+exports.usePersistedStore = usePersistedStore;
+//# sourceMappingURL=usePersistedStore.cjs.map

package/dist/hooks/usePersistedStore.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersistedStore.cjs","sources":["../../src/hooks/usePersistedStore.ts"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from 'react';\n\nexport const usePersistedStore = <T>(key: string, initialValue?: T) => {\n  const [state, setState] = useState<T>(() => {\n    const persistedState = sessionStorage.getItem(key);\n\n    if (persistedState) {\n      return JSON.parse(persistedState);\n    }\n\n    return initialValue as T;\n  });\n\n  useEffect(() => {\n    const persistedState = sessionStorage.getItem(key);\n\n    if (persistedState) {\n      setState(JSON.parse(persistedState));\n    }\n  }, [key, initialValue]);\n\n  return [state, setState] as const;\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AAIa,MAAA,oBAAoB,CAAI,KAAa,iBAAqB;AACrE,QAAM,CAAC,OAAO,QAAQ,IAAIA,oBAAY,MAAM;AACpC,UAAA,iBAAiB,eAAe,QAAQ,GAAG;AAEjD,QAAI,gBAAgB;AACX,aAAA,KAAK,MAAM,cAAc;AAAA,IAClC;AAEO,WAAA;AAAA,EAAA,CACR;AAEDC,aAAAA,UAAU,MAAM;AACR,UAAA,iBAAiB,eAAe,QAAQ,GAAG;AAEjD,QAAI,gBAAgB;AACT,eAAA,KAAK,MAAM,cAAc,CAAC;AAAA,IACrC;AAAA,EAAA,GACC,CAAC,KAAK,YAAY,CAAC;AAEf,SAAA,CAAC,OAAO,QAAQ;AACzB;;"}

package/dist/hooks/usePersistedStore.d.ts

@@ -0,0 +1,2 @@
+export declare const usePersistedStore: <T>(key: string, initialValue?: T) => readonly [T, import('react').Dispatch<import('react').SetStateAction<T>>];
+//# sourceMappingURL=usePersistedStore.d.ts.map

package/dist/hooks/usePersistedStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersistedStore.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersistedStore.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,GAAI,CAAC,OAAO,MAAM,iBAAiB,CAAC,8EAoBjE,CAAC"}

package/dist/hooks/usePersistedStore.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { useState, useEffect } from "react";
+const usePersistedStore = (key, initialValue) => {
+  const [state, setState] = useState(() => {
+    const persistedState = sessionStorage.getItem(key);
+    if (persistedState) {
+      return JSON.parse(persistedState);
+    }
+    return initialValue;
+  });
+  useEffect(() => {
+    const persistedState = sessionStorage.getItem(key);
+    if (persistedState) {
+      setState(JSON.parse(persistedState));
+    }
+  }, [key, initialValue]);
+  return [state, setState];
+};
+export {
+  usePersistedStore
+};
+//# sourceMappingURL=usePersistedStore.mjs.map

package/dist/hooks/usePersistedStore.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersistedStore.mjs","sources":["../../src/hooks/usePersistedStore.ts"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from 'react';\n\nexport const usePersistedStore = <T>(key: string, initialValue?: T) => {\n  const [state, setState] = useState<T>(() => {\n    const persistedState = sessionStorage.getItem(key);\n\n    if (persistedState) {\n      return JSON.parse(persistedState);\n    }\n\n    return initialValue as T;\n  });\n\n  useEffect(() => {\n    const persistedState = sessionStorage.getItem(key);\n\n    if (persistedState) {\n      setState(JSON.parse(persistedState));\n    }\n  }, [key, initialValue]);\n\n  return [state, setState] as const;\n};\n"],"names":[],"mappings":";;AAIa,MAAA,oBAAoB,CAAI,KAAa,iBAAqB;AACrE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAY,MAAM;AACpC,UAAA,iBAAiB,eAAe,QAAQ,GAAG;AAEjD,QAAI,gBAAgB;AACX,aAAA,KAAK,MAAM,cAAc;AAAA,IAClC;AAEO,WAAA;AAAA,EAAA,CACR;AAED,YAAU,MAAM;AACR,UAAA,iBAAiB,eAAe,QAAQ,GAAG;AAEjD,QAAI,gBAAgB;AACT,eAAA,KAAK,MAAM,cAAc,CAAC;AAAA,IACrC;AAAA,EAAA,GACC,CAAC,KAAK,YAAY,CAAC;AAEf,SAAA,CAAC,OAAO,QAAQ;AACzB;"}

package/dist/hooks/usePersistenceStore.cjs

@@ -0,0 +1,22 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require$$0 = require("react");
+const usePersistenceStore = (key, initialValue) => {
+  const [state, setState] = require$$0.useState(() => {
+    const persistedState = sessionStorage.getItem(key);
+    if (persistedState) {
+      return JSON.parse(persistedState);
+    }
+    return initialValue;
+  });
+  require$$0.useEffect(() => {
+    const persistedState = sessionStorage.getItem(key);
+    if (persistedState) {
+      setState(JSON.parse(persistedState));
+    }
+  }, [key, initialValue]);
+  return [state, setState];
+};
+exports.usePersistenceStore = usePersistenceStore;
+//# sourceMappingURL=usePersistenceStore.cjs.map

package/dist/hooks/usePersistenceStore.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersistenceStore.cjs","sources":["../../src/hooks/usePersistenceStore.ts"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from 'react';\n\nexport const usePersistenceStore = <T>(key: string, initialValue?: T) => {\n  const [state, setState] = useState<T>(() => {\n    const persistedState = sessionStorage.getItem(key);\n\n    if (persistedState) {\n      return JSON.parse(persistedState);\n    }\n\n    return initialValue as T;\n  });\n\n  useEffect(() => {\n    const persistedState = sessionStorage.getItem(key);\n\n    if (persistedState) {\n      setState(JSON.parse(persistedState));\n    }\n  }, [key, initialValue]);\n\n  return [state, setState] as const;\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AAIa,MAAA,sBAAsB,CAAI,KAAa,iBAAqB;AACvE,QAAM,CAAC,OAAO,QAAQ,IAAIA,oBAAY,MAAM;AACpC,UAAA,iBAAiB,eAAe,QAAQ,GAAG;AAEjD,QAAI,gBAAgB;AACX,aAAA,KAAK,MAAM,cAAc;AAAA,IAClC;AAEO,WAAA;AAAA,EAAA,CACR;AAEDC,aAAAA,UAAU,MAAM;AACR,UAAA,iBAAiB,eAAe,QAAQ,GAAG;AAEjD,QAAI,gBAAgB;AACT,eAAA,KAAK,MAAM,cAAc,CAAC;AAAA,IACrC;AAAA,EAAA,GACC,CAAC,KAAK,YAAY,CAAC;AAEf,SAAA,CAAC,OAAO,QAAQ;AACzB;;"}

package/dist/hooks/usePersistenceStore.d.ts

@@ -0,0 +1,2 @@
+export declare const usePersistenceStore: <T>(key: string, initialValue?: T) => readonly [T, import('react').Dispatch<import('react').SetStateAction<T>>];
+//# sourceMappingURL=usePersistenceStore.d.ts.map

package/dist/hooks/usePersistenceStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersistenceStore.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersistenceStore.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,GAAI,CAAC,OAAO,MAAM,iBAAiB,CAAC,8EAoBnE,CAAC"}

package/dist/hooks/usePersistenceStore.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { useState, useEffect } from "react";
+const usePersistenceStore = (key, initialValue) => {
+  const [state, setState] = useState(() => {
+    const persistedState = sessionStorage.getItem(key);
+    if (persistedState) {
+      return JSON.parse(persistedState);
+    }
+    return initialValue;
+  });
+  useEffect(() => {
+    const persistedState = sessionStorage.getItem(key);
+    if (persistedState) {
+      setState(JSON.parse(persistedState));
+    }
+  }, [key, initialValue]);
+  return [state, setState];
+};
+export {
+  usePersistenceStore
+};
+//# sourceMappingURL=usePersistenceStore.mjs.map

package/dist/hooks/usePersistenceStore.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersistenceStore.mjs","sources":["../../src/hooks/usePersistenceStore.ts"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from 'react';\n\nexport const usePersistenceStore = <T>(key: string, initialValue?: T) => {\n  const [state, setState] = useState<T>(() => {\n    const persistedState = sessionStorage.getItem(key);\n\n    if (persistedState) {\n      return JSON.parse(persistedState);\n    }\n\n    return initialValue as T;\n  });\n\n  useEffect(() => {\n    const persistedState = sessionStorage.getItem(key);\n\n    if (persistedState) {\n      setState(JSON.parse(persistedState));\n    }\n  }, [key, initialValue]);\n\n  return [state, setState] as const;\n};\n"],"names":[],"mappings":";;AAIa,MAAA,sBAAsB,CAAI,KAAa,iBAAqB;AACvE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAY,MAAM;AACpC,UAAA,iBAAiB,eAAe,QAAQ,GAAG;AAEjD,QAAI,gBAAgB;AACX,aAAA,KAAK,MAAM,cAAc;AAAA,IAClC;AAEO,WAAA;AAAA,EAAA,CACR;AAED,YAAU,MAAM;AACR,UAAA,iBAAiB,eAAe,QAAQ,GAAG;AAEjD,QAAI,gBAAgB;AACT,eAAA,KAAK,MAAM,cAAc,CAAC;AAAA,IACrC;AAAA,EAAA,GACC,CAAC,KAAK,YAAY,CAAC;AAEf,SAAA,CAAC,OAAO,QAAQ;AACzB;"}

package/dist/index-BUDsCMdX.cjs

@@ -0,0 +1,204 @@
+"use client";
+"use strict";
+const jsxRuntime = require("./jsx-runtime-DvCoRj5u.cjs");
+const core = require("@intlayer/core");
+const require$$0 = require("react");
+const lucideReact = require("lucide-react");
+const components_DictionaryEditor_ItemLayout = require("./components/DictionaryEditor/ItemLayout.cjs");
+const components_DictionaryEditor_NodeWrapper_StringWrapper = require("./components/DictionaryEditor/NodeWrapper/StringWrapper.cjs");
+const components_DictionaryEditor_useEditedContentStore = require("./components/DictionaryEditor/useEditedContentStore.cjs");
+const ArrayWrapper = (props) => {
+  const {
+    keyPath,
+    section,
+    onFocusKeyPath,
+    onClickEdit,
+    focusedKeyPath = []
+  } = props;
+  return section.map((subSection, key) => {
+    const newKeyPathEl = {
+      key,
+      type: core.NodeType.Array
+    };
+    const newKeyPath = [...keyPath, newKeyPathEl];
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      components_DictionaryEditor_ItemLayout.ItemLayout,
+      {
+        level: keyPath.length,
+        title: `${key}`,
+        description: "",
+        isSelected: core.isSameKeyPath(newKeyPath, focusedKeyPath),
+        onClick: (e) => {
+          e.stopPropagation();
+          onFocusKeyPath(newKeyPath);
+        },
+        rightParam: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          lucideReact.Edit,
+          {
+            size: 16,
+            role: "button",
+            "aria-label": "Open the editor",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClickEdit?.(newKeyPath);
+            }
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(NodeWrapper, { ...props, keyPath: newKeyPath, section: subSection })
+      },
+      JSON.stringify(subSection)
+    );
+  });
+};
+const EnumerationWrapper = (props) => {
+  const { keyPath, section } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "ml-2 grid grid-cols-[auto,1fr] gap-2", children: Object.keys(section).filter((key) => !traceKeys.includes(key)).map((key) => {
+    const newKeyPathEl = {
+      type: core.NodeType.Enumeration,
+      key
+    };
+    const newKeyPath = [...keyPath, newKeyPathEl];
+    const subSection = section.enumeration[key];
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "flex items-center font-bold", children: key }),
+      /* @__PURE__ */ require$$0.createElement(
+        NodeWrapper,
+        {
+          ...props,
+          key,
+          keyPath: newKeyPath,
+          section: subSection
+        }
+      )
+    ] });
+  }) });
+};
+const NestedObjectWrapper = (props) => {
+  const {
+    keyPath,
+    section,
+    focusedKeyPath = [],
+    onClickEdit,
+    onFocusKeyPath
+  } = props;
+  return Object.keys(section).filter((key) => !traceKeys.includes(key)).map((key) => {
+    const newKeyPathEl = { key, type: core.NodeType.Object };
+    const newKeyPath = [...keyPath, newKeyPathEl];
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      components_DictionaryEditor_ItemLayout.ItemLayout,
+      {
+        level: keyPath.length,
+        title: key,
+        description: "",
+        isSelected: core.isSameKeyPath(newKeyPath, focusedKeyPath),
+        onClick: (e) => {
+          e.stopPropagation();
+          onFocusKeyPath(newKeyPath);
+        },
+        rightParam: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          lucideReact.Edit,
+          {
+            size: 16,
+            role: "button",
+            "aria-label": "Open the editor",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClickEdit?.(newKeyPath);
+            }
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(NodeWrapper, { ...props, keyPath: newKeyPath, section: section[key] })
+      },
+      key
+    );
+  });
+};
+const TranslationWrapper = (props) => {
+  const { keyPath, section, locale } = props;
+  const newKeyPathEl = {
+    type: core.NodeType.Translation,
+    key: locale
+  };
+  const newKeyPath = [...keyPath, newKeyPathEl];
+  const subSection = section.translation[locale];
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(NodeWrapper, { ...props, keyPath: newKeyPath, section: subSection });
+};
+const traceKeys = ["filePath", "id", "nodeType"];
+const isReactNode = (node) => typeof node?.key !== "undefined" && typeof node?.props !== "undefined";
+const createReactElement = (element) => {
+  if (typeof element === "string") {
+    return element;
+  }
+  const convertChildrenAsArray = (element2) => {
+    if (element2?.props && typeof element2.props.children === "object") {
+      const childrenResult = [];
+      const { children } = element2.props;
+      Object.keys(children).forEach((key) => {
+        childrenResult.push(createReactElement(children[key]));
+      });
+      return {
+        ...element2,
+        props: { ...element2.props, children: childrenResult }
+      };
+    }
+    return {
+      ...element2,
+      props: { ...element2.props, children: element2.props.children }
+    };
+  };
+  const fixedElement = convertChildrenAsArray(element);
+  const { type, props } = fixedElement;
+  return require$$0.createElement(type ?? "div", props, ...props.children);
+};
+const NodeWrapper = (props) => {
+  const { section } = props;
+  components_DictionaryEditor_useEditedContentStore.useEditedContentStore((s) => ({
+    addEditedContent: s.addEditedContent
+  }));
+  if (typeof section === "object") {
+    if (isReactNode(section)) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+        createReactElement(section),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "text-neutral dark:text-neutral-dark text-xs", children: "React node not editable" })
+      ] });
+    }
+    if (section.nodeType === core.NodeType.Translation) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        TranslationWrapper,
+        {
+          ...props,
+          section
+        }
+      );
+    }
+    if (section.nodeType === core.NodeType.Enumeration) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        EnumerationWrapper,
+        {
+          ...props,
+          section
+        }
+      );
+    }
+    if (Array.isArray(section)) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ArrayWrapper, { ...props, section });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      NestedObjectWrapper,
+      {
+        ...props,
+        section
+      }
+    );
+  }
+  if (typeof section === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_DictionaryEditor_NodeWrapper_StringWrapper.StringWrapper, { ...props, section });
+  }
+};
+exports.ArrayWrapper = ArrayWrapper;
+exports.EnumerationWrapper = EnumerationWrapper;
+exports.NestedObjectWrapper = NestedObjectWrapper;
+exports.NodeWrapper = NodeWrapper;
+exports.TranslationWrapper = TranslationWrapper;
+exports.traceKeys = traceKeys;
+//# sourceMappingURL=index-BUDsCMdX.cjs.map

package/dist/index-BUDsCMdX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BUDsCMdX.cjs","sources":["../src/components/DictionaryEditor/NodeWrapper/ArrayWrapper.tsx","../src/components/DictionaryEditor/NodeWrapper/EnumerationWrapper.tsx","../src/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.tsx","../src/components/DictionaryEditor/NodeWrapper/TranslationWrapper.tsx","../src/components/DictionaryEditor/NodeWrapper/index.tsx"],"sourcesContent":["/* eslint-disable import/no-cycle */\nimport {\n  isSameKeyPath,\n  NodeType,\n  type DictionaryValue,\n  type KeyPath,\n} from '@intlayer/core';\nimport { Edit } from 'lucide-react';\nimport type { FC } from 'react';\nimport { ItemLayout } from '../ItemLayout';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype ArrayWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: DictionaryValue[];\n};\n\nexport const ArrayWrapper: FC<ArrayWrapperProps> = (props) => {\n  const {\n    keyPath,\n    section,\n    onFocusKeyPath,\n    onClickEdit,\n    focusedKeyPath = [],\n  } = props;\n\n  return section.map((subSection, key) => {\n    const newKeyPathEl: KeyPath = {\n      key,\n      type: NodeType.Array,\n    };\n    const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n    return (\n      <ItemLayout\n        level={keyPath.length}\n        key={JSON.stringify(subSection)}\n        title={`${key}`}\n        description=\"\"\n        isSelected={isSameKeyPath(newKeyPath, focusedKeyPath)}\n        onClick={(e) => {\n          e.stopPropagation();\n          onFocusKeyPath(newKeyPath);\n        }}\n        rightParam={\n          <Edit\n            size={16}\n            role=\"button\"\n            aria-label=\"Open the editor\"\n            onClick={(e) => {\n              e.stopPropagation();\n\n              onClickEdit?.(newKeyPath);\n            }}\n          />\n        }\n      >\n        <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />\n      </ItemLayout>\n    );\n  });\n};\n","/* eslint-disable import/no-cycle */\nimport {\n  type KeyPath,\n  NodeType,\n  type EnumerationContent,\n  type DictionaryValue,\n} from '@intlayer/core';\nimport type { FC } from 'react';\nimport { NodeWrapper, traceKeys, type NodeWrapperProps } from './index';\n\ntype EnumerationWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: EnumerationContent<DictionaryValue>;\n};\n\nexport const EnumerationWrapper: FC<EnumerationWrapperProps> = (props) => {\n  const { keyPath, section } = props;\n\n  return (\n    <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n      {Object.keys(section)\n        .filter((key) => !traceKeys.includes(key))\n        .map((key) => {\n          const newKeyPathEl: KeyPath = {\n            type: NodeType.Enumeration,\n            key,\n          };\n          const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n          const subSection =\n            section.enumeration[key as keyof (typeof section)['enumeration']]!;\n\n          return (\n            <>\n              <span className=\"flex items-center font-bold\">{key}</span>\n              <NodeWrapper\n                {...props}\n                key={key}\n                keyPath={newKeyPath}\n                section={subSection}\n              />\n            </>\n          );\n        })}\n    </div>\n  );\n};\n","/* eslint-disable import/no-cycle */\n\nimport {\n  type KeyPath,\n  isSameKeyPath,\n  type DictionaryValue,\n  NodeType,\n} from '@intlayer/core';\nimport { Edit } from 'lucide-react';\nimport type { FC } from 'react';\nimport { ItemLayout } from '../ItemLayout';\nimport { NodeWrapper, traceKeys, type NodeWrapperProps } from './index';\n\ntype NestedObjectWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: Record<string, DictionaryValue>;\n};\n\nexport const NestedObjectWrapper: FC<NestedObjectWrapperProps> = (props) => {\n  const {\n    keyPath,\n    section,\n    focusedKeyPath = [],\n    onClickEdit,\n    onFocusKeyPath,\n  } = props;\n\n  return Object.keys(section)\n    .filter((key) => !traceKeys.includes(key))\n    .map((key) => {\n      const newKeyPathEl: KeyPath = { key, type: NodeType.Object };\n      const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n      return (\n        <ItemLayout\n          level={keyPath.length}\n          key={key}\n          title={key}\n          description=\"\"\n          isSelected={isSameKeyPath(newKeyPath, focusedKeyPath)}\n          onClick={(e) => {\n            e.stopPropagation();\n\n            onFocusKeyPath(newKeyPath);\n          }}\n          rightParam={\n            <Edit\n              size={16}\n              role=\"button\"\n              aria-label=\"Open the editor\"\n              onClick={(e) => {\n                e.stopPropagation();\n\n                onClickEdit?.(newKeyPath);\n              }}\n            />\n          }\n        >\n          <NodeWrapper {...props} keyPath={newKeyPath} section={section[key]} />\n        </ItemLayout>\n      );\n    });\n};\n","/* eslint-disable import/no-cycle */\n\nimport {\n  type KeyPath,\n  NodeType,\n  type TranslationContent,\n  type DictionaryValue,\n} from '@intlayer/core';\nimport type { FC } from 'react';\nimport { NodeWrapper, type NodeWrapperProps } from './index';\n\ntype TranslationWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: TranslationContent<DictionaryValue>;\n};\n\nexport const TranslationWrapper: FC<TranslationWrapperProps> = (props) => {\n  const { keyPath, section, locale } = props;\n\n  const newKeyPathEl: KeyPath = {\n    type: NodeType.Translation,\n    key: locale,\n  };\n\n  const newKeyPath: KeyPath[] = [...keyPath, newKeyPathEl];\n\n  const subSection =\n    section.translation[\n      locale as unknown as keyof (typeof section)['translation']\n    ]!;\n\n  return <NodeWrapper {...props} keyPath={newKeyPath} section={subSection} />;\n};\n","/* eslint-disable import/no-cycle */\n'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  type TranslationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  type Dictionary,\n} from '@intlayer/core';\nimport {\n  createElement,\n  type ReactElement,\n  type ReactNode,\n  type FC,\n} from 'react';\nimport { ArrayWrapper } from './ArrayWrapper';\nimport { EnumerationWrapper } from './EnumerationWrapper';\nimport { NestedObjectWrapper } from './NestedObjectWrapper';\nimport { StringWrapper } from './StringWrapper';\nimport { TranslationWrapper } from './TranslationWrapper';\nimport { useEditedContentStore } from '../useEditedContentStore';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nconst isReactNode = (node: Record<string, unknown>): boolean =>\n  typeof node?.key !== 'undefined' && typeof node?.props !== 'undefined';\n\nexport type NodeWrapperProps = {\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n  onContentChange: (content: { keyPath: KeyPath[]; newValue: string }) => void;\n  locale: Locales;\n  editedContent: Dictionary;\n  focusedKeyPath: KeyPath[] | undefined;\n  onFocusKeyPath: (keyPath: KeyPath[]) => void;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n};\n\nconst createReactElement = (element: ReactElement) => {\n  if (typeof element === 'string') {\n    // If it's a string, simply return it (used for text content)\n    return element;\n  }\n\n  const convertChildrenAsArray = (element: ReactElement): ReactElement => {\n    if (element?.props && typeof element.props.children === 'object') {\n      const childrenResult: ReactNode[] = [];\n      const { children } = element.props;\n\n      // Create the children elements recursively, if any\n      Object.keys(children).forEach((key) => {\n        childrenResult.push(createReactElement(children[key]));\n      });\n\n      return {\n        ...element,\n        props: { ...element.props, children: childrenResult },\n      };\n    }\n\n    return {\n      ...element,\n      props: { ...element.props, children: element.props.children },\n    };\n  };\n\n  const fixedElement = convertChildrenAsArray(element);\n\n  const { type, props } = fixedElement;\n\n  // Create and return the React element\n  return createElement(type ?? 'div', props, ...props.children);\n};\n\nexport const NodeWrapper: FC<NodeWrapperProps> = (props) => {\n  const { section } = props;\n\n  const { addEditedContent } = useEditedContentStore((s) => ({\n    addEditedContent: s.addEditedContent,\n  }));\n\n  if (typeof section === 'object') {\n    if (isReactNode(section as Record<string, unknown>)) {\n      return (\n        <>\n          {createReactElement(section as unknown as ReactElement)}\n          <span className=\"text-neutral dark:text-neutral-dark text-xs\">\n            React node not editable\n          </span>\n        </>\n      );\n    }\n\n    if (\n      (section as TranslationContent<DictionaryValue>).nodeType ===\n      NodeType.Translation\n    ) {\n      return (\n        <TranslationWrapper\n          {...props}\n          section={section as TranslationContent<DictionaryValue>}\n        />\n      );\n    }\n\n    if (\n      (section as EnumerationContent<DictionaryValue>).nodeType ===\n      NodeType.Enumeration\n    ) {\n      return (\n        <EnumerationWrapper\n          {...props}\n          section={section as EnumerationContent<DictionaryValue>}\n        />\n      );\n    }\n\n    if (Array.isArray(section)) {\n      return <ArrayWrapper {...props} section={section as DictionaryValue[]} />;\n    }\n\n    return (\n      <NestedObjectWrapper\n        {...props}\n        section={section as Record<string, DictionaryValue>}\n      />\n    );\n  }\n\n  if (typeof section === 'string') {\n    return <StringWrapper {...props} section={section} />;\n  }\n};\n"],"names":["NodeType","jsx","ItemLayout","isSameKeyPath","Edit","jsxs","Fragment","createElement","element","useEditedContentStore","StringWrapper"],"mappings":"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"}

package/dist/index-C09rI9kw.js

@@ -0,0 +1,205 @@
+"use client";
+import { j as jsxRuntimeExports } from "./jsx-runtime-BgSF1HG2.js";
+import { NodeType, isSameKeyPath } from "@intlayer/core";
+import { createElement } from "react";
+import { Edit } from "lucide-react";
+import { ItemLayout } from "./components/DictionaryEditor/ItemLayout.mjs";
+import { StringWrapper } from "./components/DictionaryEditor/NodeWrapper/StringWrapper.mjs";
+import { useEditedContentStore } from "./components/DictionaryEditor/useEditedContentStore.mjs";
+const ArrayWrapper = (props) => {
+  const {
+    keyPath,
+    section,
+    onFocusKeyPath,
+    onClickEdit,
+    focusedKeyPath = []
+  } = props;
+  return section.map((subSection, key) => {
+    const newKeyPathEl = {
+      key,
+      type: NodeType.Array
+    };
+    const newKeyPath = [...keyPath, newKeyPathEl];
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ItemLayout,
+      {
+        level: keyPath.length,
+        title: `${key}`,
+        description: "",
+        isSelected: isSameKeyPath(newKeyPath, focusedKeyPath),
+        onClick: (e) => {
+          e.stopPropagation();
+          onFocusKeyPath(newKeyPath);
+        },
+        rightParam: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Edit,
+          {
+            size: 16,
+            role: "button",
+            "aria-label": "Open the editor",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClickEdit?.(newKeyPath);
+            }
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(NodeWrapper, { ...props, keyPath: newKeyPath, section: subSection })
+      },
+      JSON.stringify(subSection)
+    );
+  });
+};
+const EnumerationWrapper = (props) => {
+  const { keyPath, section } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-2 grid grid-cols-[auto,1fr] gap-2", children: Object.keys(section).filter((key) => !traceKeys.includes(key)).map((key) => {
+    const newKeyPathEl = {
+      type: NodeType.Enumeration,
+      key
+    };
+    const newKeyPath = [...keyPath, newKeyPathEl];
+    const subSection = section.enumeration[key];
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center font-bold", children: key }),
+      /* @__PURE__ */ createElement(
+        NodeWrapper,
+        {
+          ...props,
+          key,
+          keyPath: newKeyPath,
+          section: subSection
+        }
+      )
+    ] });
+  }) });
+};
+const NestedObjectWrapper = (props) => {
+  const {
+    keyPath,
+    section,
+    focusedKeyPath = [],
+    onClickEdit,
+    onFocusKeyPath
+  } = props;
+  return Object.keys(section).filter((key) => !traceKeys.includes(key)).map((key) => {
+    const newKeyPathEl = { key, type: NodeType.Object };
+    const newKeyPath = [...keyPath, newKeyPathEl];
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ItemLayout,
+      {
+        level: keyPath.length,
+        title: key,
+        description: "",
+        isSelected: isSameKeyPath(newKeyPath, focusedKeyPath),
+        onClick: (e) => {
+          e.stopPropagation();
+          onFocusKeyPath(newKeyPath);
+        },
+        rightParam: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Edit,
+          {
+            size: 16,
+            role: "button",
+            "aria-label": "Open the editor",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClickEdit?.(newKeyPath);
+            }
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(NodeWrapper, { ...props, keyPath: newKeyPath, section: section[key] })
+      },
+      key
+    );
+  });
+};
+const TranslationWrapper = (props) => {
+  const { keyPath, section, locale } = props;
+  const newKeyPathEl = {
+    type: NodeType.Translation,
+    key: locale
+  };
+  const newKeyPath = [...keyPath, newKeyPathEl];
+  const subSection = section.translation[locale];
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(NodeWrapper, { ...props, keyPath: newKeyPath, section: subSection });
+};
+const traceKeys = ["filePath", "id", "nodeType"];
+const isReactNode = (node) => typeof node?.key !== "undefined" && typeof node?.props !== "undefined";
+const createReactElement = (element) => {
+  if (typeof element === "string") {
+    return element;
+  }
+  const convertChildrenAsArray = (element2) => {
+    if (element2?.props && typeof element2.props.children === "object") {
+      const childrenResult = [];
+      const { children } = element2.props;
+      Object.keys(children).forEach((key) => {
+        childrenResult.push(createReactElement(children[key]));
+      });
+      return {
+        ...element2,
+        props: { ...element2.props, children: childrenResult }
+      };
+    }
+    return {
+      ...element2,
+      props: { ...element2.props, children: element2.props.children }
+    };
+  };
+  const fixedElement = convertChildrenAsArray(element);
+  const { type, props } = fixedElement;
+  return createElement(type ?? "div", props, ...props.children);
+};
+const NodeWrapper = (props) => {
+  const { section } = props;
+  useEditedContentStore((s) => ({
+    addEditedContent: s.addEditedContent
+  }));
+  if (typeof section === "object") {
+    if (isReactNode(section)) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        createReactElement(section),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-neutral dark:text-neutral-dark text-xs", children: "React node not editable" })
+      ] });
+    }
+    if (section.nodeType === NodeType.Translation) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TranslationWrapper,
+        {
+          ...props,
+          section
+        }
+      );
+    }
+    if (section.nodeType === NodeType.Enumeration) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        EnumerationWrapper,
+        {
+          ...props,
+          section
+        }
+      );
+    }
+    if (Array.isArray(section)) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrayWrapper, { ...props, section });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      NestedObjectWrapper,
+      {
+        ...props,
+        section
+      }
+    );
+  }
+  if (typeof section === "string") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(StringWrapper, { ...props, section });
+  }
+};
+export {
+  ArrayWrapper as A,
+  EnumerationWrapper as E,
+  NodeWrapper as N,
+  TranslationWrapper as T,
+  NestedObjectWrapper as a,
+  traceKeys as t
+};
+//# sourceMappingURL=index-C09rI9kw.js.map