npm - @intlayer/design-system - Versions diffs - 8.3.2 → 8.3.4 - Mend

@intlayer/design-system 8.3.2 → 8.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

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

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

package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{renameKey as e}from"../../../utils/object.mjs";import{useAuditContentDeclarationField as t}from"../../../hooks/reactQuery.mjs";import{Container as n}from"../../Container/index.mjs";import{Button as r,ButtonColor as i,ButtonSize as a,ButtonTextAlign as o,ButtonVariant as s}from"../../Button/Button.mjs";import{InputVariant as c}from"../../Input/Input.mjs";import{SwitchSelector as l,SwitchSelectorColor as u,SwitchSelectorSize as d}from"../../SwitchSelector/index.mjs";import{useLocaleSwitcherContent as f}from"../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";import{ContentEditorInput as p}from"../../ContentEditor/ContentEditorInput.mjs";import{ContentEditorTextArea as m}from"../../ContentEditor/ContentEditorTextArea.mjs";import{Label as h}from"../../Label/index.mjs";import{MarkdownRenderer as g}from"../../MarkDownRender/MarkDownRender.mjs";import{EnumKeyInput as _}from"../EnumKeyInput.mjs";import{Fragment as v,useState as y}from"react";import{Plus as b,Trash as x,WandSparkles as S}from"lucide-react";import{Fragment as C,jsx as w,jsxs as T}from"react/jsx-runtime";import{useConfiguration as E,useEditedContent as D}from"@intlayer/editor-react";import{useIntlayer as O,useLocale as k}from"react-intlayer";import{getLocaleName as A}from"@intlayer/core/localization";import{getEmptyNode as j,getNodeType as M}from"@intlayer/core/dictionaryManipulator";import{NodeType as N}from"@intlayer/types/nodeType";const P=[`filePath`,`id`,`nodeType`],F=({keyPath:e,dictionary:n,...o})=>{let{editedContent:l,addEditedContent:u}=D(),d=E(),{mutate:f,isPending:p}=t();return w(m,{variant:c.DEFAULT,onContentChange:t=>u(n.localId,t,e),additionalButtons:w(r,{Icon:S,label:`Audit`,variant:s.HOVERABLE,size:a.ICON_SM,color:i.TEXT,className:`cursor-pointer hover:scale-110`,isLoading:p,onClick:()=>{f({fileContent:JSON.stringify({...n,...l?.[n.localId]??{}}),keyPath:e,locales:d.internationalization.locales??[],aiOptions:{apiKey:d.ai?.apiKey,model:d.ai?.model,temperature:d.ai?.temperature}},{onSuccess:t=>{if(t?.data)try{let r=t.data.fileContent;u(n.localId,r,e)}catch(e){console.error(e)}}})}}),...o})},I=({keyPath:e,dictionary:t,...n})=>{let{addEditedContent:r}=D();return w(p,{variant:c.DEFAULT,onContentChange:n=>r(t.localId,n,e),...n})},L=[{content:`False`,value:!1},{content:`True`,value:!0}],R=({dictionary:e,keyPath:t,...n})=>{let{addEditedContent:r}=D();return w(l,{choices:L,value:!0,onChange:n=>r(e.localId,n,t),color:u.TEXT,size:d.SM,...n})},z=({section:e,keyPath:t,dictionary:n,renderSection:r})=>{let{locale:i,defaultLocale:a}=k(),{selectedLocales:o,availableLocales:s}=f(),c=e[N.Translation],l=Object.keys(c),u=s.length>o.length?o:[...new Set([...s,...l])],d=e[N.Translation];return w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:u.map(e=>{let o=`${JSON.stringify(t)}-translation-${e}`;return T(v,{children:[w(`tr`,{className:`mt-2 w-full p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:A(e,i)})}),w(`tr`,{className:`flex`,children:w(`td`,{className:`flex w-full`,children:w($,{section:d[e]??j(d[a]),keyPath:[...t,{type:N.Translation,key:e}],dictionary:n,renderSection:r})})})]},o)})})})},B=({section:t,keyPath:n,dictionary:a,renderSection:c})=>{let{addEditedContent:l}=D(),{addNewEnumeration:u,removeEnumeration:d}=O(`navigation-view`),f=t[N.Enumeration],p=Object.keys(f)[0];return T(`div`,{className:`flex flex-col gap-2`,children:[w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:Object.keys(t[N.Enumeration]).map(i=>{let o=[...n,{type:N.Enumeration,key:i}],s=`${JSON.stringify(n)}-enumeration-${i}`;return T(v,{children:[w(`tr`,{className:`mt-2 w-full`,children:w(`td`,{className:`flex w-full`,children:w(`div`,{className:`flex flex-1`,children:w(r,{label:d.label.value,variant:`hoverable`,size:`sm`,color:`error`,className:`ml-auto text-neutral hover:text-error`,Icon:x,onClick:()=>l(a.localId,void 0,o),children:d.text})})})}),w(`tr`,{className:`w-full p-2`,children:w(`td`,{className:`flex w-full`,children:w(_,{value:i,onChange:r=>{let o=t[N.Enumeration],s=e(o,i,r),c={...t,[N.Enumeration]:s};console.log(`newValue`,c),l(a.localId,c,n)}})})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w(Q,{section:f[i]??j(f[p]),keyPath:o,dictionary:a,renderSection:c})})})]},s)})})}),w(r,{label:u.label.value,variant:s.HOVERABLE,color:i.NEUTRAL,textAlign:o.LEFT,isFullWidth:!0,onClick:()=>l(a.localId,j(f[p])??``,[...n,{type:N.Enumeration,key:`unknown`}]),Icon:b,className:`m-2`,children:u.text})]})},V=({section:e,keyPath:t,dictionary:n,renderSection:r})=>{let i=e[N.Condition];return w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:[`true`,`false`,`fallback`].map(e=>{let a=`${JSON.stringify(t)}-condition-${e}`;return T(v,{children:[w(`tr`,{className:`mt-2 block w-full p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:String(e)})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w($,{section:i[e]??j(i.true),keyPath:[...t,{type:N.Condition,key:e}],dictionary:n,renderSection:r})})})]},a)})})})},H=({section:e,keyPath:t,dictionary:n,renderSection:r})=>{let i=e[N.Gender];return w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:[`male`,`female`,`fallback`].map(e=>{let a=`${JSON.stringify(t)}-gender-${e}`;return T(v,{children:[w(`tr`,{className:`mt-2 block w-full p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:String(e)})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w($,{section:i[e]??j(i.male),keyPath:[...t,{type:N.Gender,key:e}],dictionary:n,renderSection:r})})})]},a)})})})},U=({section:e,keyPath:t,dictionary:n,renderSection:a})=>{let{addEditedContent:c}=D(),{addNewElement:l,removeElement:u}=O(`navigation-view`);return T(`div`,{className:`flex flex-col gap-2`,children:[w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:e.map((i,o)=>{let s=`${JSON.stringify(t)}-array-${o}`;return T(v,{children:[w(`tr`,{className:`mt-2 w-full p-2`,children:w(`td`,{className:`flex w-full`,children:T(`div`,{className:`flex w-full items-center justify-between gap-2`,children:[w(`span`,{className:`text-xs`,children:String(o)}),w(r,{label:u.label.value,variant:`hoverable`,size:`sm`,color:`error`,className:`ml-auto text-neutral hover:text-error`,onClick:()=>{let e=[...t,{type:N.Array,key:o}];c(n.localId,void 0,e)},Icon:x,children:u.text})]})})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w($,{section:i??j(e[0]),keyPath:[...t,{type:N.Array,key:o}],dictionary:n,renderSection:a})})})]},s)})})}),w(r,{label:l.label.value,variant:s.HOVERABLE,color:i.NEUTRAL,textAlign:o.LEFT,isFullWidth:!0,onClick:()=>{let r=[...t,{type:N.Array,key:e.length}];c(n.localId,j(e[0])??``,r,!1)},Icon:b,children:l.text})]})},W=({section:e,keyPath:t,dictionary:n,renderSection:r})=>w(C,{children:w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex flex-col gap-2`,children:Object.keys(e).map(i=>{let a=[...t,{type:N.Object,key:i}],o=e,s=Object.keys(o)[0],c=o[i]??j(o[s]),l=`${JSON.stringify(t)}-object-${i}`;return T(v,{children:[w(`tr`,{className:`mt-2 p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:String(i)})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w(Q,{section:c,keyPath:a,dictionary:n,renderSection:r})})})]},l)})})})});var G=function(e){return e[e.Edit=0]=`Edit`,e[e.Preview=1]=`Preview`,e}(G||{}),K=function(e){return e[e.Edit=0]=`Edit`,e[e.Preview=1]=`Preview`,e}(K||{});const q=({section:e,keyPath:t,dictionary:n})=>{let[r,i]=y(K.Edit),a=[{content:`Edit`,value:K.Edit},{content:`Preview`,value:K.Preview}],o=[...t,{type:N.HTML}],s=e[N.HTML];return T(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:[w(l,{choices:a,value:r,onChange:i,color:u.TEXT,size:d.SM,className:`ml-auto`}),w($,{section:s,keyPath:o,dictionary:n,renderSection:r===K.Preview?e=>w(`div`,{dangerouslySetInnerHTML:{__html:e}}):void 0})]})},J=({section:e,keyPath:t,dictionary:n,isDarkMode:r})=>{let[i,a]=y(G.Edit),o=[{content:`Edit`,value:G.Edit},{content:`Preview`,value:G.Preview}],s=[...t,{type:N.Markdown}],c=e[N.Markdown];return T(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:[w(l,{choices:o,value:i,onChange:a,color:u.TEXT,size:d.SM,className:`ml-auto`}),w($,{section:c,keyPath:s,dictionary:n,renderSection:i===G.Preview?e=>w(g,{isDarkMode:r,children:e}):void 0})]})},Y=({section:e,keyPath:t,...n})=>{let r=[...t,{type:N.Insertion}],i=e[N.Insertion];return w(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:w($,{section:i,keyPath:r,...n})})},X=({section:e,keyPath:t,...n})=>{let r=[...t,{type:N.File}],i=e[N.File],{content:a}=e;return T(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:[T(`span`,{className:`text-neutral text-sm`,children:[i,` `]}),w($,{section:a,keyPath:r,...n})]})},Z=({keyPath:e,dictionary:t,renderSection:n,section:r,...i})=>{let{addEditedContent:a}=D(),o=r[N.Nested],s=[...e,{type:N.Nested}];return T(`div`,{className:`flex w-full flex-col gap-4 p-2`,children:[w(h,{children:`Dictionary key`}),w(p,{"aria-label":`Edit field`,type:`text`,variant:c.DEFAULT,...i,onContentChange:e=>{a(t.localId,{...o,dictionaryKey:String(e)},s)},children:o.dictionaryKey??``}),w(h,{children:`Path (optional)`}),w(p,{"aria-label":`Edit field`,type:`text`,variant:c.DEFAULT,...i,onContentChange:e=>{a(t.localId,{...o,path:e===``?void 0:e},s)},children:o.path??``})]})},Q=({section:e,keyPath:t,dictionary:n,renderSection:r,isDarkMode:i})=>{let{tsxNotEditable:a}=O(`navigation-view`),o=M(e);return o===N.ReactNode?T(`div`,{className:`flex w-full flex-col gap-2`,children:[w(`span`,{children:`(React Node)`}),w(`span`,{className:`flex text-neutral text-xs`,children:a})]}):o===N.Nested?w(Z,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Translation?w(z,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Enumeration?w(B,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Condition?w(V,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Gender?w(H,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Insertion?w(Y,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Markdown?w(J,{dictionary:n,keyPath:t,section:e,isDarkMode:i}):o===N.HTML?w(q,{dictionary:n,keyPath:t,section:e}):o===N.File?w(X,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Array?w(U,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Object?w(W,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Number?w(`div`,{className:`w-full p-2`,children:w(I,{dictionary:n,keyPath:t,type:`number`,"aria-label":`Edit field`,children:e})}):o===N.Text?w(`div`,{className:`w-full p-2`,children:typeof r==`function`?r(e):w(F,{variant:c.DEFAULT,"aria-label":`Edit field`,keyPath:t,dictionary:n,children:e})}):o===N.Boolean?w(`div`,{className:`w-full p-2`,children:w(R,{dictionary:n,keyPath:t,value:e})}):T(`div`,{className:`w-full p-2`,children:[`Error. Format not supported.`,JSON.stringify(e,null,2),JSON.stringify(t,null,2),`NodeType : `,o]})},$=e=>w(n,{border:!0,background:`none`,className:`top-6 flex h-full flex-1 flex-col gap-6 overflow-hidden p-2 md:sticky`,roundedSize:`xl`,children:w(Q,{...e})});export{Q as TextEditor,$ as TextEditorContainer,P as traceKeys};
+"use client";import{renameKey as e}from"../../../utils/object.mjs";import{Container as t}from"../../Container/index.mjs";import{Button as n,ButtonColor as r,ButtonSize as i,ButtonTextAlign as a,ButtonVariant as o}from"../../Button/Button.mjs";import{InputVariant as s}from"../../Input/Input.mjs";import{useAuditContentDeclarationField as c}from"../../../hooks/reactQuery.mjs";import{SwitchSelector as l,SwitchSelectorColor as u,SwitchSelectorSize as d}from"../../SwitchSelector/index.mjs";import{useLocaleSwitcherContent as f}from"../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";import{ContentEditorInput as p}from"../../ContentEditor/ContentEditorInput.mjs";import{ContentEditorTextArea as m}from"../../ContentEditor/ContentEditorTextArea.mjs";import{Label as h}from"../../Label/index.mjs";import{MarkdownRenderer as g}from"../../MarkDownRender/MarkDownRender.mjs";import{EnumKeyInput as _}from"../EnumKeyInput.mjs";import{Fragment as v,useState as y}from"react";import{Plus as b,Trash as x,WandSparkles as S}from"lucide-react";import{Fragment as C,jsx as w,jsxs as T}from"react/jsx-runtime";import{useIntlayer as E,useLocale as D}from"react-intlayer";import{getLocaleName as O}from"@intlayer/core/localization";import{useConfiguration as k,useEditedContent as A}from"@intlayer/editor-react";import{getEmptyNode as j,getNodeType as M}from"@intlayer/core/dictionaryManipulator";import{NodeType as N}from"@intlayer/types/nodeType";const P=[`filePath`,`id`,`nodeType`],F=({keyPath:e,dictionary:t,...a})=>{let{editedContent:l,addEditedContent:u}=A(),d=k(),{mutate:f,isPending:p}=c();return w(m,{variant:s.DEFAULT,onContentChange:n=>u(t.localId,n,e),additionalButtons:w(n,{Icon:S,label:`Audit`,variant:o.HOVERABLE,size:i.ICON_SM,color:r.TEXT,className:`cursor-pointer hover:scale-110`,isLoading:p,onClick:()=>{f({fileContent:JSON.stringify({...t,...l?.[t.localId]??{}}),keyPath:e,locales:d.internationalization.locales??[],aiOptions:{apiKey:d.ai?.apiKey,model:d.ai?.model,temperature:d.ai?.temperature}},{onSuccess:n=>{if(n?.data)try{let r=n.data.fileContent;u(t.localId,r,e)}catch(e){console.error(e)}}})}}),...a})},I=({keyPath:e,dictionary:t,...n})=>{let{addEditedContent:r}=A();return w(p,{variant:s.DEFAULT,onContentChange:n=>r(t.localId,n,e),...n})},L=[{content:`False`,value:!1},{content:`True`,value:!0}],R=({dictionary:e,keyPath:t,...n})=>{let{addEditedContent:r}=A();return w(l,{choices:L,value:!0,onChange:n=>r(e.localId,n,t),color:u.TEXT,size:d.SM,...n})},z=({section:e,keyPath:t,dictionary:n,renderSection:r})=>{let{locale:i,defaultLocale:a}=D(),{selectedLocales:o,availableLocales:s}=f(),c=e[N.Translation],l=Object.keys(c),u=s.length>o.length?o:[...new Set([...s,...l])],d=e[N.Translation];return w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:u.map(e=>{let o=`${JSON.stringify(t)}-translation-${e}`;return T(v,{children:[w(`tr`,{className:`mt-2 w-full p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:O(e,i)})}),w(`tr`,{className:`flex`,children:w(`td`,{className:`flex w-full`,children:w($,{section:d[e]??j(d[a]),keyPath:[...t,{type:N.Translation,key:e}],dictionary:n,renderSection:r})})})]},o)})})})},B=({section:t,keyPath:i,dictionary:s,renderSection:c})=>{let{addEditedContent:l}=A(),{addNewEnumeration:u,removeEnumeration:d}=E(`navigation-view`),f=t[N.Enumeration],p=Object.keys(f)[0];return T(`div`,{className:`flex flex-col gap-2`,children:[w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:Object.keys(t[N.Enumeration]).map(r=>{let a=[...i,{type:N.Enumeration,key:r}],o=`${JSON.stringify(i)}-enumeration-${r}`;return T(v,{children:[w(`tr`,{className:`mt-2 w-full`,children:w(`td`,{className:`flex w-full`,children:w(`div`,{className:`flex flex-1`,children:w(n,{label:d.label.value,variant:`hoverable`,size:`sm`,color:`error`,className:`ml-auto text-neutral hover:text-error`,Icon:x,onClick:()=>l(s.localId,void 0,a),children:d.text})})})}),w(`tr`,{className:`w-full p-2`,children:w(`td`,{className:`flex w-full`,children:w(_,{value:r,onChange:n=>{let a=t[N.Enumeration],o=e(a,r,n),c={...t,[N.Enumeration]:o};console.log(`newValue`,c),l(s.localId,c,i)}})})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w(Q,{section:f[r]??j(f[p]),keyPath:a,dictionary:s,renderSection:c})})})]},o)})})}),w(n,{label:u.label.value,variant:o.HOVERABLE,color:r.NEUTRAL,textAlign:a.LEFT,isFullWidth:!0,onClick:()=>l(s.localId,j(f[p])??``,[...i,{type:N.Enumeration,key:`unknown`}]),Icon:b,className:`m-2`,children:u.text})]})},V=({section:e,keyPath:t,dictionary:n,renderSection:r})=>{let i=e[N.Condition];return w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:[`true`,`false`,`fallback`].map(e=>{let a=`${JSON.stringify(t)}-condition-${e}`;return T(v,{children:[w(`tr`,{className:`mt-2 block w-full p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:String(e)})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w($,{section:i[e]??j(i.true),keyPath:[...t,{type:N.Condition,key:e}],dictionary:n,renderSection:r})})})]},a)})})})},H=({section:e,keyPath:t,dictionary:n,renderSection:r})=>{let i=e[N.Gender];return w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:[`male`,`female`,`fallback`].map(e=>{let a=`${JSON.stringify(t)}-gender-${e}`;return T(v,{children:[w(`tr`,{className:`mt-2 block w-full p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:String(e)})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w($,{section:i[e]??j(i.male),keyPath:[...t,{type:N.Gender,key:e}],dictionary:n,renderSection:r})})})]},a)})})})},U=({section:e,keyPath:t,dictionary:i,renderSection:s})=>{let{addEditedContent:c}=A(),{addNewElement:l,removeElement:u}=E(`navigation-view`);return T(`div`,{className:`flex flex-col gap-2`,children:[w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex w-full flex-col gap-2`,children:e.map((r,a)=>{let o=`${JSON.stringify(t)}-array-${a}`;return T(v,{children:[w(`tr`,{className:`mt-2 w-full p-2`,children:w(`td`,{className:`flex w-full`,children:T(`div`,{className:`flex w-full items-center justify-between gap-2`,children:[w(`span`,{className:`text-xs`,children:String(a)}),w(n,{label:u.label.value,variant:`hoverable`,size:`sm`,color:`error`,className:`ml-auto text-neutral hover:text-error`,onClick:()=>{let e=[...t,{type:N.Array,key:a}];c(i.localId,void 0,e)},Icon:x,children:u.text})]})})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w($,{section:r??j(e[0]),keyPath:[...t,{type:N.Array,key:a}],dictionary:i,renderSection:s})})})]},o)})})}),w(n,{label:l.label.value,variant:o.HOVERABLE,color:r.NEUTRAL,textAlign:a.LEFT,isFullWidth:!0,onClick:()=>{let n=[...t,{type:N.Array,key:e.length}];c(i.localId,j(e[0])??``,n,!1)},Icon:b,children:l.text})]})},W=({section:e,keyPath:t,dictionary:n,renderSection:r})=>w(C,{children:w(`table`,{className:`w-full`,children:w(`tbody`,{className:`flex flex-col gap-2`,children:Object.keys(e).map(i=>{let a=[...t,{type:N.Object,key:i}],o=e,s=Object.keys(o)[0],c=o[i]??j(o[s]),l=`${JSON.stringify(t)}-object-${i}`;return T(v,{children:[w(`tr`,{className:`mt-2 p-2 text-xs`,children:w(`td`,{className:`flex w-full`,children:String(i)})}),w(`tr`,{className:`block w-full`,children:w(`td`,{className:`flex w-full`,children:w(Q,{section:c,keyPath:a,dictionary:n,renderSection:r})})})]},l)})})})});var G=function(e){return e[e.Edit=0]=`Edit`,e[e.Preview=1]=`Preview`,e}(G||{}),K=function(e){return e[e.Edit=0]=`Edit`,e[e.Preview=1]=`Preview`,e}(K||{});const q=({section:e,keyPath:t,dictionary:n})=>{let[r,i]=y(K.Edit),a=[{content:`Edit`,value:K.Edit},{content:`Preview`,value:K.Preview}],o=[...t,{type:N.HTML}],s=e[N.HTML];return T(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:[w(l,{choices:a,value:r,onChange:i,color:u.TEXT,size:d.SM,className:`ml-auto`}),w($,{section:s,keyPath:o,dictionary:n,renderSection:r===K.Preview?e=>w(`div`,{dangerouslySetInnerHTML:{__html:e}}):void 0})]})},J=({section:e,keyPath:t,dictionary:n,isDarkMode:r})=>{let[i,a]=y(G.Edit),o=[{content:`Edit`,value:G.Edit},{content:`Preview`,value:G.Preview}],s=[...t,{type:N.Markdown}],c=e[N.Markdown];return T(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:[w(l,{choices:o,value:i,onChange:a,color:u.TEXT,size:d.SM,className:`ml-auto`}),w($,{section:c,keyPath:s,dictionary:n,renderSection:i===G.Preview?e=>w(g,{isDarkMode:r,children:e}):void 0})]})},Y=({section:e,keyPath:t,...n})=>{let r=[...t,{type:N.Insertion}],i=e[N.Insertion];return w(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:w($,{section:i,keyPath:r,...n})})},X=({section:e,keyPath:t,...n})=>{let r=[...t,{type:N.File}],i=e[N.File],{content:a}=e;return T(`div`,{className:`flex w-full flex-col justify-center gap-6 p-2`,children:[T(`span`,{className:`text-neutral text-sm`,children:[i,` `]}),w($,{section:a,keyPath:r,...n})]})},Z=({keyPath:e,dictionary:t,renderSection:n,section:r,...i})=>{let{addEditedContent:a}=A(),o=r[N.Nested],c=[...e,{type:N.Nested}];return T(`div`,{className:`flex w-full flex-col gap-4 p-2`,children:[w(h,{children:`Dictionary key`}),w(p,{"aria-label":`Edit field`,type:`text`,variant:s.DEFAULT,...i,onContentChange:e=>{a(t.localId,{...o,dictionaryKey:String(e)},c)},children:o.dictionaryKey??``}),w(h,{children:`Path (optional)`}),w(p,{"aria-label":`Edit field`,type:`text`,variant:s.DEFAULT,...i,onContentChange:e=>{a(t.localId,{...o,path:e===``?void 0:e},c)},children:o.path??``})]})},Q=({section:e,keyPath:t,dictionary:n,renderSection:r,isDarkMode:i})=>{let{tsxNotEditable:a}=E(`navigation-view`),o=M(e);return o===N.ReactNode?T(`div`,{className:`flex w-full flex-col gap-2`,children:[w(`span`,{children:`(React Node)`}),w(`span`,{className:`flex text-neutral text-xs`,children:a})]}):o===N.Nested?w(Z,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Translation?w(z,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Enumeration?w(B,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Condition?w(V,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Gender?w(H,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Insertion?w(Y,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Markdown?w(J,{dictionary:n,keyPath:t,section:e,isDarkMode:i}):o===N.HTML?w(q,{dictionary:n,keyPath:t,section:e}):o===N.File?w(X,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Array?w(U,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Object?w(W,{dictionary:n,renderSection:r,keyPath:t,section:e}):o===N.Number?w(`div`,{className:`w-full p-2`,children:w(I,{dictionary:n,keyPath:t,type:`number`,"aria-label":`Edit field`,children:e})}):o===N.Text?w(`div`,{className:`w-full p-2`,children:typeof r==`function`?r(e):w(F,{variant:s.DEFAULT,"aria-label":`Edit field`,keyPath:t,dictionary:n,children:e})}):o===N.Boolean?w(`div`,{className:`w-full p-2`,children:w(R,{dictionary:n,keyPath:t,value:e})}):T(`div`,{className:`w-full p-2`,children:[`Error. Format not supported.`,JSON.stringify(e,null,2),JSON.stringify(t,null,2),`NodeType : `,o]})},$=e=>w(t,{border:!0,background:`none`,className:`top-6 flex h-full flex-1 flex-col gap-6 overflow-hidden p-2 md:sticky`,roundedSize:`xl`,children:w(Q,{...e})});export{Q as TextEditor,$ as TextEditorContainer,P as traceKeys};
 //# sourceMappingURL=TextEditor.mjs.map

package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{useSession as e}from"../../../hooks/useAuth/useSession.mjs";import{useAddDictionary as t,useGetProjects as n}from"../../../hooks/reactQuery.mjs";import{ButtonColor as r}from"../../Button/Button.mjs";import{MultiSelect as i}from"../../Select/Multiselect.mjs";import{useForm as a}from"../../Form/FormBase.mjs";import{Form as o}from"../../Form/Form.mjs";import{useDictionarySchema as s}from"./useDictionaryFormSchema.mjs";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{useIntlayer as u}from"react-intlayer";const d=({onDictionaryCreated:d})=>{let{session:f}=e(),{project:p}=f??{},{mutate:m,isPending:h}=t(),{data:g}=n(),_=s(String(p?.id)),{form:v,isSubmitting:y}=a(_),{keyInput:b,createDictionaryButton:x,projectInput:S}=u(`dictionary-form`);return l(o,{schema:_,onSubmitSuccess:e=>{m({dictionary:e},{onSuccess:()=>{d?.()}})},className:`m-auto w-full max-w-[400px]`,...v,children:[c(o.Input,{name:`key`,label:b.label.value,placeholder:b.placeholder.value,isRequired:!0}),l(o.MultiSelect,{name:`projectIds`,label:S.label.value,children:[c(i.Trigger,{getBadgeValue:e=>g?.data?.find(t=>String(t.id)===e)?.name??e,children:c(i.Input,{placeholder:S.placeholder.value})}),c(i.Content,{children:c(i.List,{children:g?.data?.map(e=>c(i.Item,{value:String(e.id),children:e.name},String(e.id)))})})]}),c(o.Button,{className:`mt-12 ml-auto`,type:`submit`,color:r.TEXT,isLoading:y||h,label:x.ariaLabel.value,isFullWidth:!0,children:x.text})]})};export{d as DictionaryCreationForm};
+"use client";import{ButtonColor as e}from"../../Button/Button.mjs";import{useSession as t}from"../../../hooks/useAuth/useSession.mjs";import{useAddDictionary as n,useGetProjects as r}from"../../../hooks/reactQuery.mjs";import{MultiSelect as i}from"../../Select/Multiselect.mjs";import{useForm as a}from"../../Form/FormBase.mjs";import{Form as o}from"../../Form/Form.mjs";import{useDictionarySchema as s}from"./useDictionaryFormSchema.mjs";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{useIntlayer as u}from"react-intlayer";const d=({onDictionaryCreated:d})=>{let{session:f}=t(),{project:p}=f??{},{mutate:m,isPending:h}=n(),{data:g}=r(),_=s(String(p?.id)),{form:v,isSubmitting:y}=a(_),{keyInput:b,createDictionaryButton:x,projectInput:S}=u(`dictionary-form`);return l(o,{schema:_,onSubmitSuccess:e=>{m({dictionary:e},{onSuccess:()=>{d?.()}})},className:`m-auto w-full max-w-[400px]`,...v,children:[c(o.Input,{name:`key`,label:b.label.value,placeholder:b.placeholder.value,isRequired:!0}),l(o.MultiSelect,{name:`projectIds`,label:S.label.value,children:[c(i.Trigger,{getBadgeValue:e=>g?.data?.find(t=>String(t.id)===e)?.name??e,children:c(i.Input,{placeholder:S.placeholder.value})}),c(i.Content,{children:c(i.List,{children:g?.data?.map(e=>c(i.Item,{value:String(e.id),children:e.name},String(e.id)))})})]}),c(o.Button,{className:`mt-12 ml-auto`,type:`submit`,color:e.TEXT,isLoading:y||h,label:x.ariaLabel.value,isFullWidth:!0,children:x.text})]})};export{d as DictionaryCreationForm};
 //# sourceMappingURL=DictionaryCreationForm.mjs.map

package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{useSession as e}from"../../../hooks/useAuth/useSession.mjs";import{useAuditContentDeclarationMetadata as t,useGetProjects as n,useGetTags as r}from"../../../hooks/reactQuery.mjs";import{Loader as i}from"../../Loader/index.mjs";import{ButtonColor as a,ButtonSize as o,ButtonVariant as s}from"../../Button/Button.mjs";import{Checkbox as c}from"../../Input/Checkbox.mjs";import{MultiSelect as l}from"../../Select/Multiselect.mjs";import{Select as u}from"../../Select/Select.mjs";import{useForm as d}from"../../Form/FormBase.mjs";import{Form as f}from"../../Form/Form.mjs";import{useDictionaryDetailsSchema as p}from"./useDictionaryDetailsSchema.mjs";import{useEffect as m}from"react";import{WandSparkles as h}from"lucide-react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{useEditedContent as v}from"@intlayer/editor-react";import{useIntlayer as y}from"react-intlayer";import{AnimatePresence as b,motion as x}from"framer-motion";import{useWatch as S}from"react-hook-form";const C=({dictionary:C,mode:w})=>{let{session:T}=e(),{project:E}=T??{},{data:D,isLoading:O}=n(),{data:k}=r(),A=D?.data??[],j=k?.data??[],M=p(String(E?.id)),{form:N,isSubmitting:P}=d(M,{defaultValues:{...C,location:C.location??`remote`}}),{editedContent:F,setEditedDictionary:I}=v(),{titleInput:L,keyInput:R,descriptionInput:z,projectInput:B,tagsSelect:V,locationSelect:H,importModeSelect:U,filePathInput:W,auditButton:G}=y(`dictionary-details`),{mutate:K,isPending:q}=t(),J=F?.[C.localId];m(()=>{N.reset({...C,location:C.location??`remote`})},[C,N?.reset]),m(()=>{J===void 0&&N.reset({...C,location:C.location??`remote`})},[J]);let Y=()=>{let e={...C,...J};K({fileContent:JSON.stringify(e)},{onSuccess:t=>{if(t?.data)try{let n=t.data.fileContent;I(t=>({...t,...e,...n})),N.reset({...e,...n})}catch(e){console.error(e)}}})},X=S({control:N.control,name:`location`}),Z=X===`local`||X===`hybrid`;return _(f,{className:`flex w-full flex-col gap-8`,...N,schema:M,children:[_(`div`,{className:`grid grid-cols-2 gap-8 max-md:grid-cols-1`,children:[g(f.EditableFieldInput,{name:`key`,label:R.label,placeholder:R.label.value,description:R.description,disabled:P,isRequired:!0,onSave:e=>{N.setValue(`key`,e,{shouldDirty:!0}),I(t=>({...C,...t??{},key:e}))}}),g(f.EditableFieldInput,{name:`title`,label:L.label,placeholder:L.placeholder.value,description:L.description,disabled:P,onSave:e=>{N.setValue(`title`,e,{shouldDirty:!0}),I(t=>({...C,...t??{},title:e}))}})]}),g(f.EditableFieldTextArea,{name:`description`,label:z.label,placeholder:z.placeholder.value,description:z.description,disabled:P,onSave:e=>{N.setValue(`description`,e,{shouldDirty:!0}),I(t=>({...C,...t??{},description:e}))}}),_(`div`,{className:`grid grid-cols-2 gap-8 px-1 max-md:grid-cols-1`,children:[g(f.Field,{control:N.control,name:`location`,render:({field:e})=>{let t=e.value,n=t===`local`||t===`hybrid`,r=t===`remote`||t===`hybrid`,i=t=>{if(!t&&!r)return;let n=t?r?`hybrid`:`local`:`remote`;e.onChange(n);let i=t?N.getValues(`filePath`)??C.filePath:void 0;t||N.setValue(`filePath`,void 0),I(e=>({...C,...e??{},location:n,filePath:i}))},a=t=>{if(!t&&!n)return;let r=t?n?`hybrid`:`remote`:`local`;e.onChange(r),I(e=>({...C,...e??{},location:r}))};return _(f.Item,{className:`flex flex-col gap-2 px-1`,children:[g(f.Label,{className:`ml-1`,children:H.label}),_(`div`,{className:`ml-2 flex items-center gap-4 py-2`,children:[g(c,{id:`location-local`,name:`location-local`,label:H.local.value,checked:n,disabled:!w.includes(`local`)&&!w.includes(`remote`),onChange:e=>i(e.target.checked)}),g(c,{id:`location-remote`,name:`location-remote`,label:H.remote.value,checked:r,disabled:!w.includes(`remote`)&&C.location!==`remote`&&C.location!==`hybrid`,onChange:e=>a(e.target.checked)})]}),g(f.Description,{children:H.testDescription}),g(f.Message,{})]})}}),g(b,{mode:`wait`,children:Z&&g(x.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:`auto`},exit:{opacity:0,height:0},transition:{duration:.3},className:`overflow-hidden`,children:g(f.Input,{name:`filePath`,label:W.label.value,placeholder:W.placeholder.value,description:W.description.value,disabled:P||!Z,onChange:e=>{let t=e.target.value;I(e=>({...C,...e??{},filePath:t}))}})},`filePath-input`)})]}),g(`div`,{className:`grid grid-cols-2 gap-8 max-md:grid-cols-1`,children:_(f.Select,{name:`importMode`,label:U.label.value,description:U.description.value,onValueChange:e=>{N.setValue(`importMode`,e,{shouldDirty:!0}),I(t=>({...C,...t??{},importMode:e}))},children:[g(u.Trigger,{children:g(u.Value,{placeholder:U.label.value})}),_(u.Content,{children:[g(u.Item,{value:`static`,children:U.static.value}),g(u.Item,{value:`dynamic`,children:U.dynamic.value}),g(u.Item,{value:`live`,children:U.live.value})]})]})}),_(`div`,{className:`grid grid-cols-2 gap-8 max-md:grid-cols-1`,children:[_(f.MultiSelect,{name:`projectIds`,label:B.label.value,description:B.description,onValueChange:e=>{let t=[e].flat();N.setValue(`projectIds`,t,{shouldDirty:!0}),I(e=>({...C,...e??{},projectIds:t}))},children:[g(l.Trigger,{getBadgeValue:e=>A?.find(t=>String(t.id)===e)?.name??e,children:g(l.Input,{placeholder:B.placeholder.value})}),g(l.Content,{children:g(i,{isLoading:O,children:g(l.List,{children:A?.map(e=>g(l.Item,{value:String(e.id),children:e.name},String(e.id)))})})})]}),_(f.MultiSelect,{name:`tags`,label:V.label.value,description:V.description,onValueChange:e=>{let t=[e].flat();N.setValue(`tags`,t,{shouldDirty:!0}),I(e=>({...C,...e??{},tags:t}))},children:[g(l.Trigger,{getBadgeValue:e=>j?.find(t=>String(t.key)===e)?.name??e,children:g(l.Input,{placeholder:V.placeholder.value})}),g(l.Content,{children:g(i,{isLoading:O,children:g(l.List,{children:j?.map(e=>g(l.Item,{value:String(e.key),children:e.name??e.key},String(e.key)))})})})]})]}),g(`div`,{className:`flex flex-wrap items-center justify-end gap-2 max-md:flex-col`,children:g(f.Button,{type:`button`,size:o.ICON_MD,label:G.label.value,Icon:h,variant:s.OUTLINE,color:a.TEXT,className:`max-md:w-full`,onClick:Y,disabled:P||q,isLoading:q})})]})};export{C as DictionaryDetailsForm};
+"use client";import{Loader as e}from"../../Loader/index.mjs";import{ButtonColor as t,ButtonSize as n,ButtonVariant as r}from"../../Button/Button.mjs";import{Checkbox as i}from"../../Input/Checkbox.mjs";import{useSession as a}from"../../../hooks/useAuth/useSession.mjs";import{useAuditContentDeclarationMetadata as o,useGetProjects as s,useGetTags as c}from"../../../hooks/reactQuery.mjs";import{MultiSelect as l}from"../../Select/Multiselect.mjs";import{Select as u}from"../../Select/Select.mjs";import{useForm as d}from"../../Form/FormBase.mjs";import{Form as f}from"../../Form/Form.mjs";import{useDictionaryDetailsSchema as p}from"./useDictionaryDetailsSchema.mjs";import{useEffect as m}from"react";import{WandSparkles as h}from"lucide-react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{useIntlayer as v}from"react-intlayer";import{useEditedContent as y}from"@intlayer/editor-react";import{AnimatePresence as b,motion as x}from"framer-motion";import{useWatch as S}from"react-hook-form";const C=({dictionary:C,mode:w})=>{let{session:T}=a(),{project:E}=T??{},{data:D,isLoading:O}=s(),{data:k}=c(),A=D?.data??[],j=k?.data??[],M=p(String(E?.id)),{form:N,isSubmitting:P}=d(M,{defaultValues:{...C,location:C.location??`remote`}}),{editedContent:F,setEditedDictionary:I}=y(),{titleInput:L,keyInput:R,descriptionInput:z,projectInput:B,tagsSelect:V,locationSelect:H,importModeSelect:U,filePathInput:W,auditButton:G}=v(`dictionary-details`),{mutate:K,isPending:q}=o(),J=F?.[C.localId];m(()=>{N.reset({...C,location:C.location??`remote`})},[C,N?.reset]),m(()=>{J===void 0&&N.reset({...C,location:C.location??`remote`})},[J]);let Y=()=>{let e={...C,...J};K({fileContent:JSON.stringify(e)},{onSuccess:t=>{if(t?.data)try{let n=t.data.fileContent;I(t=>({...t,...e,...n})),N.reset({...e,...n})}catch(e){console.error(e)}}})},X=S({control:N.control,name:`location`}),Z=X===`local`||X===`hybrid`;return _(f,{className:`flex w-full flex-col gap-8`,...N,schema:M,children:[_(`div`,{className:`grid grid-cols-2 gap-8 max-md:grid-cols-1`,children:[g(f.EditableFieldInput,{name:`key`,label:R.label,placeholder:R.label.value,description:R.description,disabled:P,isRequired:!0,onSave:e=>{N.setValue(`key`,e,{shouldDirty:!0}),I(t=>({...C,...t??{},key:e}))}}),g(f.EditableFieldInput,{name:`title`,label:L.label,placeholder:L.placeholder.value,description:L.description,disabled:P,onSave:e=>{N.setValue(`title`,e,{shouldDirty:!0}),I(t=>({...C,...t??{},title:e}))}})]}),g(f.EditableFieldTextArea,{name:`description`,label:z.label,placeholder:z.placeholder.value,description:z.description,disabled:P,onSave:e=>{N.setValue(`description`,e,{shouldDirty:!0}),I(t=>({...C,...t??{},description:e}))}}),_(`div`,{className:`grid grid-cols-2 gap-8 px-1 max-md:grid-cols-1`,children:[g(f.Field,{control:N.control,name:`location`,render:({field:e})=>{let t=e.value,n=t===`local`||t===`hybrid`,r=t===`remote`||t===`hybrid`,a=t=>{if(!t&&!r)return;let n=t?r?`hybrid`:`local`:`remote`;e.onChange(n);let i=t?N.getValues(`filePath`)??C.filePath:void 0;t||N.setValue(`filePath`,void 0),I(e=>({...C,...e??{},location:n,filePath:i}))},o=t=>{if(!t&&!n)return;let r=t?n?`hybrid`:`remote`:`local`;e.onChange(r),I(e=>({...C,...e??{},location:r}))};return _(f.Item,{className:`flex flex-col gap-2 px-1`,children:[g(f.Label,{className:`ml-1`,children:H.label}),_(`div`,{className:`ml-2 flex items-center gap-4 py-2`,children:[g(i,{id:`location-local`,name:`location-local`,label:H.local.value,checked:n,disabled:!w.includes(`local`)&&!w.includes(`remote`),onChange:e=>a(e.target.checked)}),g(i,{id:`location-remote`,name:`location-remote`,label:H.remote.value,checked:r,disabled:!w.includes(`remote`)&&C.location!==`remote`&&C.location!==`hybrid`,onChange:e=>o(e.target.checked)})]}),g(f.Description,{children:H.testDescription}),g(f.Message,{})]})}}),g(b,{mode:`wait`,children:Z&&g(x.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:`auto`},exit:{opacity:0,height:0},transition:{duration:.3},className:`overflow-hidden`,children:g(f.Input,{name:`filePath`,label:W.label.value,placeholder:W.placeholder.value,description:W.description.value,disabled:P||!Z,onChange:e=>{let t=e.target.value;I(e=>({...C,...e??{},filePath:t}))}})},`filePath-input`)})]}),g(`div`,{className:`grid grid-cols-2 gap-8 max-md:grid-cols-1`,children:_(f.Select,{name:`importMode`,label:U.label.value,description:U.description.value,onValueChange:e=>{N.setValue(`importMode`,e,{shouldDirty:!0}),I(t=>({...C,...t??{},importMode:e}))},children:[g(u.Trigger,{children:g(u.Value,{placeholder:U.label.value})}),_(u.Content,{children:[g(u.Item,{value:`static`,children:U.static.value}),g(u.Item,{value:`dynamic`,children:U.dynamic.value}),g(u.Item,{value:`live`,children:U.live.value})]})]})}),_(`div`,{className:`grid grid-cols-2 gap-8 max-md:grid-cols-1`,children:[_(f.MultiSelect,{name:`projectIds`,label:B.label.value,description:B.description,onValueChange:e=>{let t=[e].flat();N.setValue(`projectIds`,t,{shouldDirty:!0}),I(e=>({...C,...e??{},projectIds:t}))},children:[g(l.Trigger,{getBadgeValue:e=>A?.find(t=>String(t.id)===e)?.name??e,children:g(l.Input,{placeholder:B.placeholder.value})}),g(l.Content,{children:g(e,{isLoading:O,children:g(l.List,{children:A?.map(e=>g(l.Item,{value:String(e.id),children:e.name},String(e.id)))})})})]}),_(f.MultiSelect,{name:`tags`,label:V.label.value,description:V.description,onValueChange:e=>{let t=[e].flat();N.setValue(`tags`,t,{shouldDirty:!0}),I(e=>({...C,...e??{},tags:t}))},children:[g(l.Trigger,{getBadgeValue:e=>j?.find(t=>String(t.key)===e)?.name??e,children:g(l.Input,{placeholder:V.placeholder.value})}),g(l.Content,{children:g(e,{isLoading:O,children:g(l.List,{children:j?.map(e=>g(l.Item,{value:String(e.key),children:e.name??e.key},String(e.key)))})})})]})]}),g(`div`,{className:`flex flex-wrap items-center justify-end gap-2 max-md:flex-col`,children:g(f.Button,{type:`button`,size:n.ICON_MD,label:G.label.value,Icon:h,variant:r.OUTLINE,color:t.TEXT,className:`max-md:w-full`,onClick:Y,disabled:P||q,isLoading:q})})]})};export{C as DictionaryDetailsForm};
 //# sourceMappingURL=DictionaryDetailsForm.mjs.map

package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Button as e,ButtonColor as t,ButtonVariant as n}from"../Button/Button.mjs";import{CopyToClipboard as r}from"../CopyToClipboard/index.mjs";import{LocaleSwitcherContentProvider as i}from"../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";import{Tab as a}from"../Tab/Tab.mjs";import{ContentEditor as o}from"./ContentEditor.mjs";import{DictionaryDetailsForm as s}from"./DictionaryDetails/DictionaryDetailsForm.mjs";import{JSONEditor as c}from"./JSONEditor.mjs";import{SaveForm as l}from"./SaveForm/SaveForm.mjs";import{StructureEditor as u}from"./StructureEditor.mjs";import{useEffect as d}from"react";import{ArrowLeft as f}from"lucide-react";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useConfiguration as h,useDictionariesRecordActions as g,useFocusUnmergedDictionary as _}from"@intlayer/editor-react";import{useIntlayer as v}from"react-intlayer";const y=({dictionary:y,onClickDictionaryList:b,isDarkMode:x,mode:S,onDelete:C,onSave:w,showReturnButton:T=!0})=>{let E=h(),{returnToDictionaryList:D}=v(`dictionary-field-editor`),{setFocusedContent:O}=_(),{setLocaleDictionaries:k}=g();return d(()=>{O(e=>({...e??{},dictionaryKey:y.key,dictionaryLocalId:y.localId})),k(e=>({...e,[y.localId]:y}))},[]),p(i,{availableLocales:E?.internationalization.locales??[],children:m(`div`,{className:`relative flex h-full min-h-0 w-full flex-1 flex-col md:overflow-hidden`,children:[T&&p(e,{onClick:b,variant:n.HOVERABLE,className:`z-10 mr-auto mb-6 ml-5 shrink-0`,color:t.TEXT,Icon:f,label:D.label.value,children:D.text}),p(`div`,{className:`min-h-0 flex-1`,children:m(a,{defaultTab:`content`,variant:`ghost`,fullHeight:!0,headerClassName:`sticky top-0 z-10 rounded-xl bg-background/20 pb-4`,children:[S.includes(`remote`)&&p(a.Item,{label:`Details`,value:`details`,children:p(s,{dictionary:y,mode:S})}),p(a.Item,{label:`Structure`,value:`structure`,children:p(u,{dictionary:y})}),p(a.Item,{label:`Content`,value:`content`,children:p(o,{dictionary:y,isDarkMode:x})}),p(a.Item,{label:`JSON`,value:`json`,children:p(c,{dictionary:y,isDarkMode:x})})]})}),m(`div`,{className:`sticky bottom-16 z-20 flex shrink-0 flex-wrap items-center justify-end gap-10 border-card border-t p-4 md:bottom-0`,children:[p(r,{text:y.id,className:`text-nowrap text-neutral text-sm`,size:9,children:y.id}),p(l,{dictionary:y,mode:S,onDelete:()=>{O(null),C?.()},onSave:w})]})]})})};export{y as DictionaryFieldEditor};
+"use client";import{Button as e,ButtonColor as t,ButtonVariant as n}from"../Button/Button.mjs";import{CopyToClipboard as r}from"../CopyToClipboard/index.mjs";import{LocaleSwitcherContentProvider as i}from"../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";import{Tab as a}from"../Tab/Tab.mjs";import{ContentEditor as o}from"./ContentEditor.mjs";import{DictionaryDetailsForm as s}from"./DictionaryDetails/DictionaryDetailsForm.mjs";import{JSONEditor as c}from"./JSONEditor.mjs";import{SaveForm as l}from"./SaveForm/SaveForm.mjs";import{StructureEditor as u}from"./StructureEditor.mjs";import{useEffect as d}from"react";import{ArrowLeft as f}from"lucide-react";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useIntlayer as h}from"react-intlayer";import{useConfiguration as g,useDictionariesRecordActions as _,useFocusUnmergedDictionary as v}from"@intlayer/editor-react";const y=({dictionary:y,onClickDictionaryList:b,isDarkMode:x,mode:S,onDelete:C,onSave:w,showReturnButton:T=!0})=>{let E=g(),{returnToDictionaryList:D}=h(`dictionary-field-editor`),{focusedContent:O,setFocusedContent:k}=v(),{setLocaleDictionary:A}=_();return d(()=>{k({...O??{},dictionaryKey:y.key,dictionaryLocalId:y.localId}),A(y)},[]),p(i,{availableLocales:E?.internationalization.locales??[],children:m(`div`,{className:`relative flex h-full min-h-0 w-full flex-1 flex-col md:overflow-hidden`,children:[T&&p(e,{onClick:b,variant:n.HOVERABLE,className:`z-10 mr-auto mb-6 ml-5 shrink-0`,color:t.TEXT,Icon:f,label:D.label.value,children:D.text}),p(`div`,{className:`min-h-0 flex-1`,children:m(a,{defaultTab:`content`,variant:`ghost`,fullHeight:!0,headerClassName:`sticky top-0 z-10 rounded-xl bg-background/20 pb-4`,children:[S.includes(`remote`)&&p(a.Item,{label:`Details`,value:`details`,children:p(s,{dictionary:y,mode:S})}),p(a.Item,{label:`Structure`,value:`structure`,children:p(u,{dictionary:y})}),p(a.Item,{label:`Content`,value:`content`,children:p(o,{dictionary:y,isDarkMode:x})}),p(a.Item,{label:`JSON`,value:`json`,children:p(c,{dictionary:y,isDarkMode:x})})]})}),m(`div`,{className:`sticky bottom-16 z-20 flex shrink-0 flex-wrap items-center justify-end gap-10 border-card border-t p-4 md:bottom-0`,children:[p(r,{text:y.id,className:`text-nowrap text-neutral text-sm`,size:9,children:y.id}),p(l,{dictionary:y,mode:S,onDelete:()=>{k(null),C?.()},onSave:w})]})]})})};export{y as DictionaryFieldEditor};
 //# sourceMappingURL=DictionaryFieldEditor.mjs.map

package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DictionaryFieldEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport { CopyToClipboard } from '@components/CopyToClipboard';\nimport {\n useConfiguration,\n useDictionariesRecordActions,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport { ArrowLeft } from 'lucide-react';\nimport { type FC, useEffect } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport { Tab } from '../Tab';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n dictionary: Dictionary;\n onClickDictionaryList?: () => void;\n onDelete?: () => void;\n onSave?: () => void;\n isDarkMode?: boolean;\n mode: ('local' \| 'remote')[];\n showReturnButton?: boolean;\n};\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n dictionary,\n onClickDictionaryList,\n isDarkMode,\n mode,\n onDelete,\n onSave,\n showReturnButton = true,\n}) => {\n const config = useConfiguration();\n const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n const { setFocusedContent } = useFocusUnmergedDictionary();\n const { ~~setLocaleDictionaries~~ } = useDictionariesRecordActions();\n\n useEffect(() => {\n ~~// Focus the dictionary if not focused\n~~ setFocusedContent(~~(prev) => (~~{\n ...(~~prev~~ ?? {}),\n dictionaryKey: dictionary.key,\n dictionaryLocalId: dictionary.localId,\n }));\n ~~setLocaleDictionaries~~(~~(prev) => ({\n ...prev,\n [~~dictionary~~.localId!]: dictionary,\n }~~));\n }, []);\n\n return (\n <LocaleSwitcherContentProvider\n availableLocales={config?.internationalization.locales ?? []}\n >\n <div className=\"relative flex h-full min-h-0 w-full flex-1 flex-col md:overflow-hidden\">\n {showReturnButton && (\n <Button\n onClick={onClickDictionaryList}\n variant={ButtonVariant.HOVERABLE}\n className=\"z-10 mr-auto mb-6 ml-5 shrink-0\"\n color={ButtonColor.TEXT}\n Icon={ArrowLeft}\n label={returnToDictionaryList.label.value}\n >\n {returnToDictionaryList.text}\n </Button>\n )}\n\n <div className=\"min-h-0 flex-1\">\n <Tab\n defaultTab=\"content\"\n variant=\"ghost\"\n fullHeight\n headerClassName=\"sticky top-0 z-10 rounded-xl bg-background/20 pb-4\"\n >\n {mode.includes('remote') && (\n <Tab.Item label=\"Details\" value=\"details\">\n <DictionaryDetailsForm dictionary={dictionary} mode={mode} />\n </Tab.Item>\n )}\n <Tab.Item label=\"Structure\" value=\"structure\">\n <StructureEditor dictionary={dictionary} />\n </Tab.Item>\n <Tab.Item label=\"Content\" value=\"content\">\n <ContentEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n </Tab.Item>\n <Tab.Item label=\"JSON\" value=\"json\">\n <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n </Tab.Item>\n </Tab>\n </div>\n\n <div className=\"sticky bottom-16 z-20 flex shrink-0 flex-wrap items-center justify-end gap-10 border-card border-t p-4 md:bottom-0\">\n <CopyToClipboard\n text={dictionary.id!}\n className=\"text-nowrap text-neutral text-sm\"\n size={9}\n >\n {dictionary.id}\n </CopyToClipboard>\n <SaveForm\n dictionary={dictionary}\n mode={mode}\n onDelete={() => {\n setFocusedContent(null);\n onDelete?.();\n }}\n onSave={onSave}\n />\n </div>\n </div>\n </LocaleSwitcherContentProvider>\n );\n};\n"],"mappings":"83BA+BA,MAAa,GAAyD,CACpE,aACA,wBACA,aACA,OACA,WACA,SACA,mBAAmB,MACf,CACJ,IAAM,EAAS,GAAkB,CAC3B,CAAE,0BAA2B,EAAY,0BAA0B,CACnE,CAAE,qBAAsB,GAA4B,~~CACpD~~,CAAE,~~yBAA0B~~,GAA8B,~~CAehE~~,~~OAbA~~,MAAgB,~~CAEd~~,~~EAAmB~~,~~IAAU~~,~~CAC3B,~~GAAI,~~GAAQ~~,EAAE,~~CACd~~,cAAe,EAAW,IAC1B,kBAAmB,EAAW,QAC/B,~~EAAE~~,~~CACH~~,~~EAAuB~~,~~IAAU,CAC/B,GAAG,GACF,~~EAAW,~~SAAW~~,~~EACxB,~~EAAE,~~EACF,EAAE,~~CAAC,CAGJ,EAAC,EAAD,CACE,iBAAkB,GAAQ,qBAAqB,SAAW,EAAE,UAE5D,EAAC,MAAD,CAAK,UAAU,kFAAf,CACG,GACC,EAAC,EAAD,CACE,QAAS,EACT,QAAS,EAAc,UACvB,UAAU,kCACV,MAAO,EAAY,KACnB,KAAM,EACN,MAAO,EAAuB,MAAM,eAEnC,EAAuB,KACjB,CAAA,CAGX,EAAC,MAAD,CAAK,UAAU,0BACb,EAAC,EAAD,CACE,WAAW,UACX,QAAQ,QACR,WAAA,GACA,gBAAgB,8DAJlB,CAMG,EAAK,SAAS,SAAS,EACtB,EAAC,EAAI,KAAL,CAAU,MAAM,UAAU,MAAM,mBAC9B,EAAC,EAAD,CAAmC,aAAkB,OAAQ,CAAA,CACpD,CAAA,CAEb,EAAC,EAAI,KAAL,CAAU,MAAM,YAAY,MAAM,qBAChC,EAAC,EAAD,CAA6B,aAAc,CAAA,CAClC,CAAA,CACX,EAAC,EAAI,KAAL,CAAU,MAAM,UAAU,MAAM,mBAC9B,EAAC,EAAD,CAA2B,aAAwB,aAAc,CAAA,CACxD,CAAA,CACX,EAAC,EAAI,KAAL,CAAU,MAAM,OAAO,MAAM,gBAC3B,EAAC,EAAD,CAAwB,aAAwB,aAAc,CAAA,CACrD,CAAA,CACP,GACF,CAAA,CAEN,EAAC,MAAD,CAAK,UAAU,8HAAf,CACE,EAAC,EAAD,CACE,KAAM,EAAW,GACjB,UAAU,mCACV,KAAM,WAEL,EAAW,GACI,CAAA,CAClB,EAAC,EAAD,CACc,aACN,OACN,aAAgB,CACd,EAAkB,KAAK,CACvB,KAAY,EAEN,SACR,CAAA,CACE,GACF,GACwB,CAAA"}
1	+ {"version":3,"file":"DictionaryFieldEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport { CopyToClipboard } from '@components/CopyToClipboard';\nimport {\n useConfiguration,\n useDictionariesRecordActions,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport { ArrowLeft } from 'lucide-react';\nimport { type FC, useEffect } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport { Tab } from '../Tab';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n dictionary: Dictionary;\n onClickDictionaryList?: () => void;\n onDelete?: () => void;\n onSave?: () => void;\n isDarkMode?: boolean;\n mode: ('local' \| 'remote')[];\n showReturnButton?: boolean;\n};\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n dictionary,\n onClickDictionaryList,\n isDarkMode,\n mode,\n onDelete,\n onSave,\n showReturnButton = true,\n}) => {\n const config = useConfiguration();\n const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n const { focusedContent, setFocusedContent } = useFocusUnmergedDictionary();\n const { setLocaleDictionary } = useDictionariesRecordActions();\n\n useEffect(() => {\n setFocusedContent({\n ...(focusedContent ?? {}),\n dictionaryKey: dictionary.key,\n dictionaryLocalId: dictionary.localId,\n });\n setLocaleDictionary(dictionary);\n }, []);\n\n return (\n <LocaleSwitcherContentProvider\n availableLocales={config?.internationalization.locales ?? []}\n >\n <div className=\"relative flex h-full min-h-0 w-full flex-1 flex-col md:overflow-hidden\">\n {showReturnButton && (\n <Button\n onClick={onClickDictionaryList}\n variant={ButtonVariant.HOVERABLE}\n className=\"z-10 mr-auto mb-6 ml-5 shrink-0\"\n color={ButtonColor.TEXT}\n Icon={ArrowLeft}\n label={returnToDictionaryList.label.value}\n >\n {returnToDictionaryList.text}\n </Button>\n )}\n\n <div className=\"min-h-0 flex-1\">\n <Tab\n defaultTab=\"content\"\n variant=\"ghost\"\n fullHeight\n headerClassName=\"sticky top-0 z-10 rounded-xl bg-background/20 pb-4\"\n >\n {mode.includes('remote') && (\n <Tab.Item label=\"Details\" value=\"details\">\n <DictionaryDetailsForm dictionary={dictionary} mode={mode} />\n </Tab.Item>\n )}\n <Tab.Item label=\"Structure\" value=\"structure\">\n <StructureEditor dictionary={dictionary} />\n </Tab.Item>\n <Tab.Item label=\"Content\" value=\"content\">\n <ContentEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n </Tab.Item>\n <Tab.Item label=\"JSON\" value=\"json\">\n <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n </Tab.Item>\n </Tab>\n </div>\n\n <div className=\"sticky bottom-16 z-20 flex shrink-0 flex-wrap items-center justify-end gap-10 border-card border-t p-4 md:bottom-0\">\n <CopyToClipboard\n text={dictionary.id!}\n className=\"text-nowrap text-neutral text-sm\"\n size={9}\n >\n {dictionary.id}\n </CopyToClipboard>\n <SaveForm\n dictionary={dictionary}\n mode={mode}\n onDelete={() => {\n setFocusedContent(null);\n onDelete?.();\n }}\n onSave={onSave}\n />\n </div>\n </div>\n </LocaleSwitcherContentProvider>\n );\n};\n"],"mappings":"83BA+BA,MAAa,GAAyD,CACpE,aACA,wBACA,aACA,OACA,WACA,SACA,mBAAmB,MACf,CACJ,IAAM,EAAS,GAAkB,CAC3B,CAAE,0BAA2B,EAAY,0BAA0B,CACnE,CAAE,iBAAgB,qBAAsB,GAA4B,CACpE,CAAE,uBAAwB,GAA8B,CAW9D,OATA,MAAgB,CACd,EAAkB,CAChB,GAAI,GAAkB,EAAE,CACxB,cAAe,EAAW,IAC1B,kBAAmB,EAAW,QAC/B,CAAC,CACF,EAAoB,EAAW,EAC9B,EAAE,CAAC,CAGJ,EAAC,EAAD,CACE,iBAAkB,GAAQ,qBAAqB,SAAW,EAAE,UAE5D,EAAC,MAAD,CAAK,UAAU,kFAAf,CACG,GACC,EAAC,EAAD,CACE,QAAS,EACT,QAAS,EAAc,UACvB,UAAU,kCACV,MAAO,EAAY,KACnB,KAAM,EACN,MAAO,EAAuB,MAAM,eAEnC,EAAuB,KACjB,CAAA,CAGX,EAAC,MAAD,CAAK,UAAU,0BACb,EAAC,EAAD,CACE,WAAW,UACX,QAAQ,QACR,WAAA,GACA,gBAAgB,8DAJlB,CAMG,EAAK,SAAS,SAAS,EACtB,EAAC,EAAI,KAAL,CAAU,MAAM,UAAU,MAAM,mBAC9B,EAAC,EAAD,CAAmC,aAAkB,OAAQ,CAAA,CACpD,CAAA,CAEb,EAAC,EAAI,KAAL,CAAU,MAAM,YAAY,MAAM,qBAChC,EAAC,EAAD,CAA6B,aAAc,CAAA,CAClC,CAAA,CACX,EAAC,EAAI,KAAL,CAAU,MAAM,UAAU,MAAM,mBAC9B,EAAC,EAAD,CAA2B,aAAwB,aAAc,CAAA,CACxD,CAAA,CACX,EAAC,EAAI,KAAL,CAAU,MAAM,OAAO,MAAM,gBAC3B,EAAC,EAAD,CAAwB,aAAwB,aAAc,CAAA,CACrD,CAAA,CACP,GACF,CAAA,CAEN,EAAC,MAAD,CAAK,UAAU,8HAAf,CACE,EAAC,EAAD,CACE,KAAM,EAAW,GACjB,UAAU,mCACV,KAAM,WAEL,EAAW,GACI,CAAA,CAClB,EAAC,EAAD,CACc,aACN,OACN,aAAgB,CACd,EAAkB,KAAK,CACvB,KAAY,EAEN,SACR,CAAA,CACE,GACF,GACwB,CAAA"}

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Button as e,ButtonColor as t,ButtonTextAlign as n,ButtonVariant as r}from"../../Button/Button.mjs";import{Accordion as i}from"../../Accordion/Accordion.mjs";import{getIsEditableSection as a}from"../getIsEditableSection.mjs";import o from"@intlayer/config/built";import{camelCaseToSentence as s}from"@intlayer/config/client";import{ChevronRight as c,Plus as l}from"lucide-react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import{useEditedContentActions as p,useEditorLocale as m,useFocusUnmergedDictionary as h}from"@intlayer/editor-react";import{useIntlayer as g}from"react-intlayer";import{getContentNodeByKeyPath as _,getEmptyNode as v,getNodeType as y}from"@intlayer/core/dictionaryManipulator";import{NodeType as b}from"@intlayer/types/nodeType";import{isSameKeyPath as x}from"@intlayer/core/utils";const S=[`filePath`,`id`,`nodeType`],C=({section:S,keyPath:w,dictionary:T})=>{let{locales:E}=o.internationalization,D=_(S,w,m()),{addEditedContent:O}=p(),{setFocusedContentKeyPath:k,focusedContent:A}=h(),{addNewElement:j,goToField:M}=g(`navigation-view`),N=y(D),P=e=>(A?.keyPath?.length??0)>0&&x(e,A?.keyPath??[]),F=a(D);return D?F?d(e,{label:M.label.value,variant:r.HOVERABLE,color:t.TEXT,className:`w-full`,onClick:()=>k(w),IconRight:c,children:s(w[w.length-1].key)}):typeof D==`object`?N===b.ReactNode?d(u,{children:`React Node`}):N===b.Translation?d(`div`,{className:`flex flex-col justify-between gap-2`,children:E.map(e=>d(C,{keyPath:[...w,{type:b.Translation,key:e}],section:S,dictionary:T},e))}):N===b.Enumeration||N===b.Condition?d(`div`,{className:`flex flex-col justify-between gap-2`,children:Object.keys(D[N]).map(e=>d(C,{keyPath:[...w,{type:N,key:e}],section:S,dictionary:T},e))}):N===b.Array?f(`div`,{className:`flex flex-col justify-between gap-2`,children:[D.map((n,o)=>{let s=[...w,{type:b.Array,key:o}];return a(n)?f(e,{label:`${M.label.value} ${o}`,variant:r.HOVERABLE,color:t.TEXT,className:`w-full`,onClick:()=>k(s),IconRight:c,isActive:P(s),children:[`Item `,o]},JSON.stringify(s)):d(i,{label:`${M.label.value} ${o}`,header:`Item ${o}`,isActive:P(s),onClick:()=>k(s),children:d(`div`,{className:`mt-2 flex w-full max-w-full`,children:d(`div`,{className:`flex-1 pl-10`,children:d(C,{keyPath:s,section:S,dictionary:T})})})},JSON.stringify(s))}),d(e,{label:j.label.value,variant:r.HOVERABLE,color:t.NEUTRAL,textAlign:n.LEFT,onClick:()=>{let e=[...w,{type:b.Array,key:D.length}],t=D,n=v(t[t.length-1])??``;O(T.localId,n,e,!1),k(e)},Icon:l,children:j.text})]}):typeof D.nodeType==`string`?d(C,{keyPath:[...w,{type:D.nodeType}],section:S,dictionary:T}):d(`div`,{className:`flex w-full max-w-full flex-col justify-between gap-2`,children:Object.keys(D).map(n=>{let o=[...w,{type:b.Object,key:n}];return a(_(S,o))?d(e,{label:`${M.label.value} ${n}`,isActive:P(o),variant:r.HOVERABLE,color:t.TEXT,className:`w-full`,onClick:()=>k(o),IconRight:c,children:s(n)},n):d(i,{label:`${M.label.value} ${n}`,isActive:P(o),onClick:()=>k(o),header:s(n),children:d(`div`,{className:`mt-2 flex w-full max-w-full`,children:d(`div`,{className:`flex-1 pl-10`,children:d(C,{keyPath:o,section:S,dictionary:T})})})},n)})}):f(u,{children:[`Error loading section --`,N,`--`,JSON.stringify(D),`--`,JSON.stringify(w)]}):d(u,{})};export{C as NavigationViewNode,S as traceKeys};
+import{Button as e,ButtonColor as t,ButtonTextAlign as n,ButtonVariant as r}from"../../Button/Button.mjs";import{Accordion as i}from"../../Accordion/Accordion.mjs";import{getIsEditableSection as a}from"../getIsEditableSection.mjs";import o from"@intlayer/config/built";import{camelCaseToSentence as s}from"@intlayer/config/client";import{ChevronRight as c,Plus as l}from"lucide-react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import{useIntlayer as p}from"react-intlayer";import{useEditedContentActions as m,useEditorLocale as h,useFocusUnmergedDictionary as g}from"@intlayer/editor-react";import{getContentNodeByKeyPath as _,getEmptyNode as v,getNodeType as y}from"@intlayer/core/dictionaryManipulator";import{NodeType as b}from"@intlayer/types/nodeType";import{isSameKeyPath as x}from"@intlayer/core/utils";const S=[`filePath`,`id`,`nodeType`],C=({section:S,keyPath:w,dictionary:T})=>{let{locales:E}=o.internationalization,D=_(S,w,h()),{addEditedContent:O}=m(),{setFocusedContentKeyPath:k,focusedContent:A}=g(),{addNewElement:j,goToField:M}=p(`navigation-view`),N=y(D),P=e=>(A?.keyPath?.length??0)>0&&x(e,A?.keyPath??[]),F=a(D);return D?F?d(e,{label:M.label.value,variant:r.HOVERABLE,color:t.TEXT,className:`w-full`,onClick:()=>k(w),IconRight:c,children:s(w[w.length-1].key)}):typeof D==`object`?N===b.ReactNode?d(u,{children:`React Node`}):N===b.Translation?d(`div`,{className:`flex flex-col justify-between gap-2`,children:E.map(e=>d(C,{keyPath:[...w,{type:b.Translation,key:e}],section:S,dictionary:T},e))}):N===b.Enumeration||N===b.Condition?d(`div`,{className:`flex flex-col justify-between gap-2`,children:Object.keys(D[N]).map(e=>d(C,{keyPath:[...w,{type:N,key:e}],section:S,dictionary:T},e))}):N===b.Array?f(`div`,{className:`flex flex-col justify-between gap-2`,children:[D.map((n,o)=>{let s=[...w,{type:b.Array,key:o}];return a(n)?f(e,{label:`${M.label.value} ${o}`,variant:r.HOVERABLE,color:t.TEXT,className:`w-full`,onClick:()=>k(s),IconRight:c,isActive:P(s),children:[`Item `,o]},JSON.stringify(s)):d(i,{label:`${M.label.value} ${o}`,header:`Item ${o}`,isActive:P(s),onClick:()=>k(s),children:d(`div`,{className:`mt-2 flex w-full max-w-full`,children:d(`div`,{className:`flex-1 pl-10`,children:d(C,{keyPath:s,section:S,dictionary:T})})})},JSON.stringify(s))}),d(e,{label:j.label.value,variant:r.HOVERABLE,color:t.NEUTRAL,textAlign:n.LEFT,onClick:()=>{let e=[...w,{type:b.Array,key:D.length}],t=D,n=v(t[t.length-1])??``;O(T.localId,n,e,!1),k(e)},Icon:l,children:j.text})]}):typeof D.nodeType==`string`?d(C,{keyPath:[...w,{type:D.nodeType}],section:S,dictionary:T}):d(`div`,{className:`flex w-full max-w-full flex-col justify-between gap-2`,children:Object.keys(D).map(n=>{let o=[...w,{type:b.Object,key:n}];return a(_(S,o))?d(e,{label:`${M.label.value} ${n}`,isActive:P(o),variant:r.HOVERABLE,color:t.TEXT,className:`w-full`,onClick:()=>k(o),IconRight:c,children:s(n)},n):d(i,{label:`${M.label.value} ${n}`,isActive:P(o),onClick:()=>k(o),header:s(n),children:d(`div`,{className:`mt-2 flex w-full max-w-full`,children:d(`div`,{className:`flex-1 pl-10`,children:d(C,{keyPath:o,section:S,dictionary:T})})})},n)})}):f(u,{children:[`Error loading section --`,N,`--`,JSON.stringify(D),`--`,JSON.stringify(w)]}):d(u,{})};export{C as NavigationViewNode,S as traceKeys};
 //# sourceMappingURL=NavigationViewNode.mjs.map

package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"../../../utils/cn.mjs";import{useAuth as t}from"../../../hooks/useAuth/useAuth.mjs";import{useDeleteDictionary as n,usePushDictionaries as r,useWriteDictionary as i}from"../../../hooks/reactQuery.mjs";import{ButtonColor as a,ButtonVariant as o}from"../../Button/Button.mjs";import{Modal as s,ModalSize as c}from"../../Modal/Modal.mjs";import{Form as l}from"../../Form/Form.mjs";import{useState as u}from"react";import{ArrowUpFromLine as d,Download as f,RotateCcw as p,Save as m,Trash as h}from"lucide-react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{useDictionariesRecordActions as y,useEditedContent as b}from"@intlayer/editor-react";import{useIntlayer as x}from"react-intlayer";const S=({dictionary:S,mode:C,className:w,onDelete:T,onSave:E,...D})=>{let[O,k]=u(!1),{setLocaleDictionary:A}=y(),{mutate:j,isPending:M}=n(),{mutate:N,isPending:P}=i(),{mutate:F,isPending:I}=r(),L=P||I,{editedContent:R,restoreEditedContent:z}=b(),{deleteButton:B,resetButton:V,saveButton:H,publishButton:U,downloadButton:W,confirmation:G}=x(`save-dictionary-details`),{isAuthenticated:K}=t(),q=R?.[S.localId],J=q&&JSON.stringify(q)!==JSON.stringify(S),Y=S?.id!==void 0,X=async()=>{R?.[S.localId]&&N({dictionary:{...S,...R?.[S.localId]}},{onSuccess:()=>{A(R?.[S.localId]),z(S.localId),k(!1),E?.()}})},Z=()=>{let e={...S,...R?.[S.localId]};F({dictionaries:[e]},{onSuccess:t=>{t&&(A(e),z(S.localId),E?.())}})},Q=()=>{S.id&&j({dictionaryId:S.id},{onSuccess:e=>{e&&T?.()}})};return v(g,{children:[_(s,{isOpen:O,title:G.title.value,size:c.MD,onClose:()=>k(!1),padding:`md`,children:v(`form`,{className:`size-full`,children:[_(`p`,{className:`py-4 text-neutral text-sm`,children:G.message}),v(`div`,{className:`mt-12 flex justify-end gap-2 max-md:flex-col`,children:[_(l.Button,{label:G.cancelButton.label.value,disabled:!J||L,color:a.TEXT,className:`max-md:w-full`,variant:o.OUTLINE,onClick:()=>k(!1),children:G.cancelButton.text}),_(l.Button,{label:G.confirmButton.label.value,disabled:!J||L,Icon:m,color:a.TEXT,className:`max-md:w-full`,isLoading:I,onClick:X,children:G.confirmButton.text})]})]})}),v(`form`,{className:e(`flex justify-end gap-2 max-md:flex-col`,w),...D,children:[C.includes(`remote`)&&Y&&T&&K&&_(l.Button,{label:B.label.value,Icon:h,color:a.ERROR,variant:o.OUTLINE,className:`max-md:w-full`,isLoading:M,onClick:Q,children:B.text}),J&&_(l.Button,{label:V.label.value,disabled:!J,Icon:p,variant:o.OUTLINE,color:a.TEXT,className:`max-md:w-full`,onClick:()=>z(S.localId),children:V.text}),C.includes(`local`)&&_(l.Button,{label:W.label.value,disabled:!J||L,Icon:f,color:a.TEXT,variant:K?o.OUTLINE:o.DEFAULT,className:`max-md:w-full`,isLoading:P,onClick:()=>k(!0),children:W.text}),C.includes(`remote`)&&K&&!Y&&_(l.Button,{label:U.label.value,disabled:L,Icon:d,color:a.TEXT,className:`max-md:w-full`,isLoading:I,onClick:Z,children:U.text}),C.includes(`remote`)&&K&&Y&&J&&_(l.Button,{label:H.label.value,disabled:!J||L,Icon:m,color:`text`,className:`max-md:w-full`,isLoading:I,onClick:Z,children:H.text})]})]})};export{S as SaveForm};
+"use client";import{cn as e}from"../../../utils/cn.mjs";import{ButtonColor as t,ButtonVariant as n}from"../../Button/Button.mjs";import{useAuth as r}from"../../../hooks/useAuth/useAuth.mjs";import{useDeleteDictionary as i,usePushDictionaries as a,useWriteDictionary as o}from"../../../hooks/reactQuery.mjs";import{Modal as s,ModalSize as c}from"../../Modal/Modal.mjs";import{Form as l}from"../../Form/Form.mjs";import{useState as u}from"react";import{ArrowUpFromLine as d,Download as f,RotateCcw as p,Save as m,Trash as h}from"lucide-react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{useIntlayer as y}from"react-intlayer";import{useDictionariesRecordActions as b,useEditedContent as x}from"@intlayer/editor-react";const S=({dictionary:S,mode:C,className:w,onDelete:T,onSave:E,...D})=>{let[O,k]=u(!1),{setLocaleDictionary:A}=b(),{mutate:j,isPending:M}=i(),{mutate:N,isPending:P}=o(),{mutate:F,isPending:I}=a(),L=P||I,{editedContent:R,restoreEditedContent:z}=x(),{deleteButton:B,resetButton:V,saveButton:H,publishButton:U,downloadButton:W,confirmation:G}=y(`save-dictionary-details`),{isAuthenticated:K}=r(),q=R?.[S.localId],J=q&&JSON.stringify(q)!==JSON.stringify(S),Y=S?.id!==void 0,X=async()=>{R?.[S.localId]&&N({dictionary:{...S,...R?.[S.localId]}},{onSuccess:()=>{A(R?.[S.localId]),z(S.localId),k(!1),E?.()}})},Z=()=>{let e={...S,...R?.[S.localId]};F({dictionaries:[e]},{onSuccess:t=>{t&&(A(e),z(S.localId),E?.())}})},Q=()=>{S.id&&j({dictionaryId:S.id},{onSuccess:e=>{e&&T?.()}})};return v(g,{children:[_(s,{isOpen:O,title:G.title.value,size:c.MD,onClose:()=>k(!1),padding:`md`,children:v(`form`,{className:`size-full`,children:[_(`p`,{className:`py-4 text-neutral text-sm`,children:G.message}),v(`div`,{className:`mt-12 flex justify-end gap-2 max-md:flex-col`,children:[_(l.Button,{label:G.cancelButton.label.value,disabled:!J||L,color:t.TEXT,className:`max-md:w-full`,variant:n.OUTLINE,onClick:()=>k(!1),children:G.cancelButton.text}),_(l.Button,{label:G.confirmButton.label.value,disabled:!J||L,Icon:m,color:t.TEXT,className:`max-md:w-full`,isLoading:I,onClick:X,children:G.confirmButton.text})]})]})}),v(`form`,{className:e(`flex justify-end gap-2 max-md:flex-col`,w),...D,children:[C.includes(`remote`)&&Y&&T&&K&&_(l.Button,{label:B.label.value,Icon:h,color:t.ERROR,variant:n.OUTLINE,className:`max-md:w-full`,isLoading:M,onClick:Q,children:B.text}),J&&_(l.Button,{label:V.label.value,disabled:!J,Icon:p,variant:n.OUTLINE,color:t.TEXT,className:`max-md:w-full`,onClick:()=>z(S.localId),children:V.text}),C.includes(`local`)&&_(l.Button,{label:W.label.value,disabled:!J||L,Icon:f,color:t.TEXT,variant:K?n.OUTLINE:n.DEFAULT,className:`max-md:w-full`,isLoading:P,onClick:()=>k(!0),children:W.text}),C.includes(`remote`)&&K&&!Y&&_(l.Button,{label:U.label.value,disabled:L,Icon:d,color:t.TEXT,className:`max-md:w-full`,isLoading:I,onClick:Z,children:U.text}),C.includes(`remote`)&&K&&Y&&J&&_(l.Button,{label:H.label.value,disabled:!J||L,Icon:m,color:`text`,className:`max-md:w-full`,isLoading:I,onClick:Z,children:H.text})]})]})};export{S as SaveForm};
 //# sourceMappingURL=SaveForm.mjs.map

package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Container as e}from"../../Container/index.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonVariant as i}from"../../Button/Button.mjs";import{InputVariant as a}from"../../Input/Input.mjs";import{EditableFieldInput as o}from"../../EditableField/EditableFieldInput.mjs";import{NodeTypeSelector as s}from"../NodeTypeSelector.mjs";import{camelCaseToSentence as c}from"@intlayer/config/client";import{Plus as l,Trash as u}from"lucide-react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{useConfiguration as m,useEditedContentActions as h,useFocusUnmergedDictionary as g}from"@intlayer/editor-react";import{useIntlayer as _}from"react-intlayer";import{getDefaultNode as v,getNodeChildren as y,getNodeType as b}from"@intlayer/core/dictionaryManipulator";import{NodeType as x}from"@intlayer/types/nodeType";import{isSameKeyPath as S}from"@intlayer/core/utils";const C=({section:e,dictionaryLocalId:t,keyPath:n,onNodeTypeChange:r})=>{let i=m()?.internationalization.locales??[],a=b(e),o=y(e),c=e=>{r(v(a,i,e))};if(a===x.Translation||a===x.Condition||a===x.Gender||a===x.Enumeration){let l=Object.keys(e[a])[0],u=[...n,{type:a,key:l}];return p(`div`,{className:`flex w-full flex-col gap-1`,children:[f(s,{section:e,onValueChange:e=>r(v(e,i))}),f(C,{section:o,keyPath:u,dictionaryLocalId:t,onNodeTypeChange:c})]})}if(a===x.Array){let l=[...n,{type:a,key:0}];return p(`div`,{className:`flex w-full flex-col gap-1`,children:[f(s,{section:e,onValueChange:e=>r(v(e,i))}),f(C,{section:o,keyPath:l,dictionaryLocalId:t,onNodeTypeChange:c})]})}return a===x.Object?p(d,{children:[f(s,{section:e,onValueChange:e=>r(v(e,i))}),f(`div`,{className:`mt-6 ml-10`,children:f(E,{keyPath:n,section:e,dictionaryLocalId:t})})]}):f(s,{section:e,onValueChange:e=>r(v(e,i))})},w=({sectionKey:s,section:l,keyPath:d,dictionaryLocalId:m})=>{let{focusedContent:v,setFocusedContentKeyPath:y}=g(),{renameEditedContent:b,addEditedContent:x}=h(),{titleInput:w,deleteButton:T}=_(`structure-view`),E=e=>{b(m,e,d);let t=d.slice(0,-1),n=d[d.length-1];y([...t,{...n,key:e}])};return f(e,{transparency:`xl`,roundedSize:`xl`,className:`w-full min-w-80 gap-2 overflow-auto px-5 py-2`,border:!0,borderColor:`text`,background:`none`,"aria-selected":S(d,v?.keyPath??[]),onClick:()=>y(d),children:p(`div`,{className:`flex w-full flex-col items-start justify-between gap-3`,children:[typeof s==`string`&&p(`div`,{className:`w-full`,children:[p(`div`,{className:`flex w-full items-center justify-between gap-10`,children:[f(o,{name:`key`,"aria-label":`Key`,placeholder:w.placeholder.value,defaultValue:s,onSave:e=>E(e),variant:a.INVISIBLE}),f(t,{label:T.label.value,variant:i.HOVERABLE,size:r.ICON_SM,color:n.TEXT,className:`translate-x-2`,Icon:u,onClick:()=>{x(m,void 0,d),y(d.slice(0,-1))}})]}),p(`span`,{className:`ml-3 text-neutral text-sm`,children:[`( `,c(s),` )`]})]}),f(C,{keyPath:d,dictionaryLocalId:m,section:l,onNodeTypeChange:e=>{x(m,e,d)}})]})})},T=({section:e,keyPath:a,dictionaryLocalId:o})=>{let{addNodeButton:s}=_(`structure-view`),{setFocusedContentKeyPath:c}=g(),{addEditedContent:u}=h();return!e||typeof e!=`object`?f(`div`,{children:`Not an object`}):p(`div`,{className:`flex flex-col gap-2 overflow-y-auto`,children:[f(`ul`,{className:`mr-auto flex flex-col gap-4`,children:Object.keys(e).map(t=>f(`li`,{className:`flex w-full`,children:f(w,{sectionKey:t,section:e?.[t],keyPath:[...a,{type:x.Object,key:t}],dictionaryLocalId:o})},`${JSON.stringify(a)}-object-${t}`))}),f(t,{label:s.label.value,variant:i.HOVERABLE,size:r.MD,color:n.TEXT,Icon:l,className:`flex-1`,onClick:()=>{let e=[...a,{type:x.Object,key:`newKey`}];u(o,``,e),c(e)},children:s.text})]})},E=({section:e,keyPath:t,dictionaryLocalId:n})=>!e||typeof e!=`object`||typeof e.nodeType==`string`?f(w,{sectionKey:`content`,section:e,keyPath:t,dictionaryLocalId:n}):f(T,{section:e,keyPath:t,dictionaryLocalId:n});export{w as NodeView,T as ObjectView,E as StructureView};
+"use client";import{Container as e}from"../../Container/index.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonVariant as i}from"../../Button/Button.mjs";import{InputVariant as a}from"../../Input/Input.mjs";import{EditableFieldInput as o}from"../../EditableField/EditableFieldInput.mjs";import{NodeTypeSelector as s}from"../NodeTypeSelector.mjs";import{camelCaseToSentence as c}from"@intlayer/config/client";import{Plus as l,Trash as u}from"lucide-react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{useIntlayer as m}from"react-intlayer";import{useConfiguration as h,useEditedContentActions as g,useFocusUnmergedDictionary as _}from"@intlayer/editor-react";import{getDefaultNode as v,getNodeChildren as y,getNodeType as b}from"@intlayer/core/dictionaryManipulator";import{NodeType as x}from"@intlayer/types/nodeType";import{isSameKeyPath as S}from"@intlayer/core/utils";const C=({section:e,dictionaryLocalId:t,keyPath:n,onNodeTypeChange:r})=>{let i=h()?.internationalization.locales??[],a=b(e),o=y(e),c=e=>{r(v(a,i,e))};if(a===x.Translation||a===x.Condition||a===x.Gender||a===x.Enumeration){let l=Object.keys(e[a])[0],u=[...n,{type:a,key:l}];return p(`div`,{className:`flex w-full flex-col gap-1`,children:[f(s,{section:e,onValueChange:e=>r(v(e,i))}),f(C,{section:o,keyPath:u,dictionaryLocalId:t,onNodeTypeChange:c})]})}if(a===x.Array){let l=[...n,{type:a,key:0}];return p(`div`,{className:`flex w-full flex-col gap-1`,children:[f(s,{section:e,onValueChange:e=>r(v(e,i))}),f(C,{section:o,keyPath:l,dictionaryLocalId:t,onNodeTypeChange:c})]})}return a===x.Object?p(d,{children:[f(s,{section:e,onValueChange:e=>r(v(e,i))}),f(`div`,{className:`mt-6 ml-10`,children:f(E,{keyPath:n,section:e,dictionaryLocalId:t})})]}):f(s,{section:e,onValueChange:e=>r(v(e,i))})},w=({sectionKey:s,section:l,keyPath:d,dictionaryLocalId:h})=>{let{focusedContent:v,setFocusedContentKeyPath:y}=_(),{renameEditedContent:b,addEditedContent:x}=g(),{titleInput:w,deleteButton:T}=m(`structure-view`),E=e=>{b(h,e,d);let t=d.slice(0,-1),n=d[d.length-1];y([...t,{...n,key:e}])};return f(e,{transparency:`xl`,roundedSize:`xl`,className:`w-full min-w-80 gap-2 overflow-auto px-5 py-2`,border:!0,borderColor:`text`,background:`none`,"aria-selected":S(d,v?.keyPath??[]),onClick:()=>y(d),children:p(`div`,{className:`flex w-full flex-col items-start justify-between gap-3`,children:[typeof s==`string`&&p(`div`,{className:`w-full`,children:[p(`div`,{className:`flex w-full items-center justify-between gap-10`,children:[f(o,{name:`key`,"aria-label":`Key`,placeholder:w.placeholder.value,defaultValue:s,onSave:e=>E(e),variant:a.INVISIBLE}),f(t,{label:T.label.value,variant:i.HOVERABLE,size:r.ICON_SM,color:n.TEXT,className:`translate-x-2`,Icon:u,onClick:()=>{x(h,void 0,d),y(d.slice(0,-1))}})]}),p(`span`,{className:`ml-3 text-neutral text-sm`,children:[`( `,c(s),` )`]})]}),f(C,{keyPath:d,dictionaryLocalId:h,section:l,onNodeTypeChange:e=>{x(h,e,d)}})]})})},T=({section:e,keyPath:a,dictionaryLocalId:o})=>{let{addNodeButton:s}=m(`structure-view`),{setFocusedContentKeyPath:c}=_(),{addEditedContent:u}=g();return!e||typeof e!=`object`?f(`div`,{children:`Not an object`}):p(`div`,{className:`flex flex-col gap-2 overflow-y-auto`,children:[f(`ul`,{className:`mr-auto flex flex-col gap-4`,children:Object.keys(e).map(t=>f(`li`,{className:`flex w-full`,children:f(w,{sectionKey:t,section:e?.[t],keyPath:[...a,{type:x.Object,key:t}],dictionaryLocalId:o})},`${JSON.stringify(a)}-object-${t}`))}),f(t,{label:s.label.value,variant:i.HOVERABLE,size:r.MD,color:n.TEXT,Icon:l,className:`flex-1`,onClick:()=>{let e=[...a,{type:x.Object,key:`newKey`}];u(o,``,e),c(e)},children:s.text})]})},E=({section:e,keyPath:t,dictionaryLocalId:n})=>!e||typeof e!=`object`||typeof e.nodeType==`string`?f(w,{sectionKey:`content`,section:e,keyPath:t,dictionaryLocalId:n}):f(T,{section:e,keyPath:t,dictionaryLocalId:n});export{w as NodeView,T as ObjectView,E as StructureView};
 //# sourceMappingURL=StructureView.mjs.map

package/dist/esm/components/Form/elements/OTPElement.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{useItemSelector as e}from"../../../hooks/useItemSelector.mjs";import{InputIndicator as t,InputOTP as n,InputOTPGroup as r,InputOTPSeparator as i,InputOTPSlot as a}from"../../Input/OTPInput.mjs";import{useFormField as o}from"../FormField.mjs";import{FormItemLayout as s}from"../layout/FormItemLayout.mjs";import{Form as c}from"../Form.mjs";import{useEffect as l,useRef as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{useFormContext as m}from"react-hook-form";const h=e=>e?.getAttribute(`aria-selected`)===`true`,g=({field:c,name:m,label:g,description:_,isRequired:v,info:y,showErrorMessage:b,children:x,slots:S=6,maxLength:C=6,...w})=>{let{error:T}=o(),E=u([]),{choiceIndicatorPosition:D,calculatePosition:O}=e(E,{selector:h,isHoverable:!0});return l(()=>{O()},[]),f(s,{htmlFor:m,label:g,description:_,isRequired:v,info:y,showErrorMessage:b,"aria-invalid":!!T,children:f(n,{onChange:c.onChange,defaultValue:c.value,maxLength:C,pattern:`^[0-9]+$`,onActiveSlotChange:O,...w,children:x??p(d,{children:[p(r,{children:[f(a,{index:0,ref:e=>{E.current[0]=e}}),f(a,{index:1,ref:e=>{E.current[1]=e}}),f(a,{index:2,ref:e=>{E.current[2]=e}})]}),f(i,{}),p(r,{children:[f(a,{index:3,ref:e=>{E.current[3]=e}}),f(a,{index:4,ref:e=>{E.current[4]=e}}),f(a,{index:5,ref:e=>{E.current[5]=e}})]}),D&&f(t,{style:D})]})})})},_=({name:e,description:t,label:n,isRequired:r,info:i,showErrorMessage:a,children:o,slots:s=6,maxLength:l=6,...u})=>{let{control:d}=m();return f(c.Field,{control:d,name:e,render:({field:c})=>f(g,{field:c,name:e,label:n,description:t,isRequired:r,info:i,showErrorMessage:a,slots:s,maxLength:l,...u,children:o})})};export{_ as OTPElement};
+"use client";import{InputIndicator as e,InputOTP as t,InputOTPGroup as n,InputOTPSeparator as r,InputOTPSlot as i}from"../../Input/OTPInput.mjs";import{useItemSelector as a}from"../../../hooks/useItemSelector.mjs";import{useFormField as o}from"../FormField.mjs";import{FormItemLayout as s}from"../layout/FormItemLayout.mjs";import{Form as c}from"../Form.mjs";import{useEffect as l,useRef as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{useFormContext as m}from"react-hook-form";const h=e=>e?.getAttribute(`aria-selected`)===`true`,g=({field:c,name:m,label:g,description:_,isRequired:v,info:y,showErrorMessage:b,children:x,slots:S=6,maxLength:C=6,...w})=>{let{error:T}=o(),E=u([]),{choiceIndicatorPosition:D,calculatePosition:O}=a(E,{selector:h,isHoverable:!0});return l(()=>{O()},[]),f(s,{htmlFor:m,label:g,description:_,isRequired:v,info:y,showErrorMessage:b,"aria-invalid":!!T,children:f(t,{onChange:c.onChange,defaultValue:c.value,maxLength:C,pattern:`^[0-9]+$`,onActiveSlotChange:O,...w,children:x??p(d,{children:[p(n,{children:[f(i,{index:0,ref:e=>{E.current[0]=e}}),f(i,{index:1,ref:e=>{E.current[1]=e}}),f(i,{index:2,ref:e=>{E.current[2]=e}})]}),f(r,{}),p(n,{children:[f(i,{index:3,ref:e=>{E.current[3]=e}}),f(i,{index:4,ref:e=>{E.current[4]=e}}),f(i,{index:5,ref:e=>{E.current[5]=e}})]}),D&&f(e,{style:D})]})})})},_=({name:e,description:t,label:n,isRequired:r,info:i,showErrorMessage:a,children:o,slots:s=6,maxLength:l=6,...u})=>{let{control:d}=m();return f(c.Field,{control:d,name:e,render:({field:c})=>f(g,{field:c,name:e,label:n,description:t,isRequired:r,info:i,showErrorMessage:a,slots:s,maxLength:l,...u,children:o})})};export{_ as OTPElement};
 //# sourceMappingURL=OTPElement.mjs.map

package/dist/esm/components/IDE/IDE.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Container as t}from"../Container/index.mjs";import{FileTree as n}from"./FileTree.mjs";import{WithResizer as r}from"../WithResizer/index.mjs";import{MarkdownRenderer as i}from"./MarkDownRender.mjs";import{useEffect as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({pages:l,isDarkMode:u,className:d,activeTab:f,...p})=>{let[m,h]=o(l),g=m.filter(({isOpen:e})=>e),_=g.findIndex(({isOpen:e})=>e),[v,y]=o(f??_);a(()=>{y(f??_)},[l,f]);let{content:b,path:x}=m[v],S=l.map(({path:e})=>e),C=e=>{if(!m.find(({path:t})=>t===e))return;let t=m.map(t=>t.path===e?{...t,isOpen:!0}:t);h(t),y(t.findIndex(({path:t})=>t===e))};return c(t,{className:e(`flex size-full flex-col justify-start overflow-hidden shadow-lg`,d),roundedSize:`3xl`,transparency:`none`,...p,children:[c(`div`,{className:`flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950`,children:[c(`div`,{className:`mx-2 flex items-center justify-start gap-2 p-1`,children:[s(`div`,{className:`size-3 rounded-full bg-red-500`}),s(`div`,{className:`size-3 rounded-full bg-yellow-500`}),s(`div`,{className:`size-3 rounded-full bg-green-500`})]}),s(`div`,{className:`flex size-full overflow-y-auto`,children:g.map(({path:t},n)=>{let r=t.split(`/`),i=r[r.length-1];return s(`button`,{className:e(`flex h-8 min-w-20 items-center justify-start px-3 py-1 transition`,n===v?`bg-card`:`cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950`),onClick:()=>y(n),children:i},i)})})]}),s(`div`,{className:`relative flex size-full flex-1 flex-row justify-start`,children:s(`div`,{className:`absolute top-0 left-0 size-full`,children:c(`div`,{className:`flex size-full`,children:[s(r,{initialWidth:150,children:s(n,{filesPaths:S,activeFile:x,onClickFile:C})}),s(`div`,{className:`size-full flex-1 overflow-auto pt-2 text-xs`,children:s(i,{isDarkMode:u,children:b})})]})})})]})};export{l as IDE};
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Container as t}from"../Container/index.mjs";import{FileTree as n}from"./FileTree.mjs";import{WithResizer as r}from"../WithResizer/index.mjs";import{MarkdownRenderer as i}from"./MarkDownRender.mjs";import{useEffect as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({pages:l,isDarkMode:u,className:d,activeTab:f,...p})=>{let[m,h]=o(l),g=m.filter(({isOpen:e})=>e),_=g.findIndex(({isOpen:e})=>e),[v,y]=o(f??_);a(()=>{y(f??_)},[l,f]);let{content:b,path:x}=m[v],S=l.map(({path:e})=>e),C=e=>{if(!m.find(({path:t})=>t===e))return;let t=m.map(t=>t.path===e?{...t,isOpen:!0}:t);h(t),y(t.findIndex(({path:t})=>t===e))};return c(t,{className:e(`flex size-full flex-col justify-start overflow-hidden shadow-lg`,d),roundedSize:`3xl`,transparency:`none`,...p,children:[c(`div`,{className:`flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950`,children:[c(`div`,{className:`mx-2 flex items-center justify-start gap-2 p-1`,children:[s(`div`,{className:`size-3 rounded-full bg-red-500`}),s(`div`,{className:`size-3 rounded-full bg-yellow-500`}),s(`div`,{className:`size-3 rounded-full bg-green-500`})]}),s(`div`,{className:`flex size-full overflow-y-auto`,children:g.map(({path:t},n)=>{let r=t.split(`/`),i=r[r.length-1];return s(`button`,{className:e(`flex h-8 min-w-20 max-w-30 items-center justify-start truncate text-nowrap px-3 py-1 transition`,n===v?`bg-card`:`cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950`),onClick:()=>y(n),children:i},i)})})]}),s(`div`,{className:`relative flex size-full flex-1 flex-row justify-start`,children:s(`div`,{className:`absolute top-0 left-0 size-full`,children:c(`div`,{className:`flex size-full`,children:[s(r,{initialWidth:150,children:s(`div`,{className:`max-h-full flex-1 overflow-y-auto`,children:s(n,{filesPaths:S,activeFile:x,onClickFile:C})})}),s(`div`,{className:`size-full flex-1 overflow-auto pt-2 text-xs`,children:s(i,{isDarkMode:u,children:b})})]})})})]})};export{l as IDE};
 //# sourceMappingURL=IDE.mjs.map

package/dist/esm/components/IDE/IDE.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IDE.mjs","names":[],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n pages: {\n path: string;\n content: string;\n isOpen?: boolean;\n }[];\n isDarkMode?: boolean;\n activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n pages: initialPages,\n isDarkMode,\n className,\n activeTab: defaultActiveTab,\n ...props\n}) => {\n const [pages, setPages] = useState(initialPages);\n const tabs = pages.filter(({ isOpen }) => isOpen);\n\n const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n useEffect(() => {\n setActiveTab(defaultActiveTab ?? firstTabIndex);\n }, [initialPages, defaultActiveTab]);\n\n const { content, path } = pages[activeTab];\n const filePaths = initialPages.map(({ path: title }) => title);\n\n const handleClickFile = (title: string) => {\n const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n if (!page) return;\n\n const newPages = pages.map((page) => {\n if (page.path === title) {\n return { ...page, isOpen: true };\n }\n return page;\n });\n\n setPages(newPages);\n\n const newPageIndex = newPages.findIndex(\n ({ path: tabTitle }) => tabTitle === title\n );\n\n setActiveTab(newPageIndex);\n };\n\n return (\n <Container\n className={cn(\n 'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n className\n )}\n roundedSize=\"3xl\"\n transparency=\"none\"\n {...props}\n >\n <div className=\"flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n <div className=\"size-3 rounded-full bg-red-500\" />\n <div className=\"size-3 rounded-full bg-yellow-500\" />\n <div className=\"size-3 rounded-full bg-green-500\" />\n </div>\n <div className=\"flex size-full overflow-y-auto\">\n {tabs.map(({ path }, index) => {\n const fullPath = path.split('/');\n const title = fullPath[fullPath.length - 1];\n const isActive = index === activeTab;\n\n return (\n <button\n className={cn(\n 'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n isActive\n ? 'bg-card'\n : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n )}\n key={title}\n onClick={() => setActiveTab(index)}\n >\n {title}\n </button>\n );\n })}\n </div>\n </div>\n <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n <div className=\"absolute top-0 left-0 size-full\">\n <div className=\"flex size-full\">\n <WithResizer initialWidth={150}>\n <FileTree\n filesPaths={filePaths}\n activeFile={path}\n onClickFile={handleClickFile}\n />\n </WithResizer>\n\n <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n <MarkdownRenderer isDarkMode={isDarkMode}>\n {content}\n </MarkdownRenderer>\n </div>\n </div>\n </div>\n </div>\n </Container>\n );\n};\n"],"mappings":"mWAmBA,MAAa,GAAqB,CAChC,MAAO,EACP,aACA,YACA,UAAW,EACX,GAAG,KACC,CACJ,GAAM,CAAC,EAAO,GAAY,EAAS,EAAa,CAC1C,EAAO,EAAM,QAAQ,CAAE,YAAa,EAAO,CAE3C,EAAgB,EAAK,WAAW,CAAE,YAAa,EAAO,CACtD,CAAC,EAAW,GAAgB,EAAS,GAAoB,EAAc,CAE7E,MAAgB,CACd,EAAa,GAAoB,EAAc,EAC9C,CAAC,EAAc,EAAiB,CAAC,CAEpC,GAAM,CAAE,UAAS,QAAS,EAAM,GAC1B,EAAY,EAAa,KAAK,CAAE,KAAM,KAAY,EAAM,CAExD,EAAmB,GAAkB,CAEzC,GAAI,CADS,EAAM,MAAM,CAAE,KAAM,KAAe,IAAa,EAAM,CACxD,OAEX,IAAM,EAAW,EAAM,IAAK,GACtB,EAAK,OAAS,EACT,CAAE,GAAG,EAAM,OAAQ,GAAM,CAE3B,EACP,CAEF,EAAS,EAAS,CAMlB,EAJqB,EAAS,WAC3B,CAAE,KAAM,KAAe,IAAa,EACtC,CAEyB,EAG5B,OACE,EAAC,EAAD,CACE,UAAW,EACT,kEACA,EACD,CACD,YAAY,MACZ,aAAa,OACb,GAAI,WAPN,CASE,EAAC,MAAD,CAAK,UAAU,yHAAf,CACE,EAAC,MAAD,CAAK,UAAU,0DAAf,CACE,EAAC,MAAD,CAAK,UAAU,iCAAmC,CAAA,CAClD,EAAC,MAAD,CAAK,UAAU,oCAAsC,CAAA,CACrD,EAAC,MAAD,CAAK,UAAU,mCAAqC,CAAA,CAChD,GACN,EAAC,MAAD,CAAK,UAAU,0CACZ,EAAK,KAAK,CAAE,QAAQ,IAAU,CAC7B,IAAM,EAAW,EAAK,MAAM,IAAI,CAC1B,EAAQ,EAAS,EAAS,OAAS,GAGzC,OACE,EAAC,SAAD,CACE,UAAW,EACT,~~oEALW~~,IAAU,EAOjB,UACA,yEACL,CAED,YAAe,EAAa,EAAM,UAEjC,EACM,CAJF,EAIE,EAEX,CACE,CAAA,CACF,GACN,EAAC,MAAD,CAAK,UAAU,iEACb,EAAC,MAAD,CAAK,UAAU,2CACb,EAAC,MAAD,CAAK,UAAU,0BAAf,CACE,EAAC,EAAD,CAAa,aAAc,aACzB,EAAC,EAAD,CACE,WAAY,EACZ,WAAY,EACZ,YAAa,EACb,CAAA,~~CACU~~,CAAA,CAEd,EAAC,MAAD,CAAK,UAAU,uDACb,EAAC,EAAD,CAA8B,sBAC3B,EACgB,CAAA,CACf,CAAA,CACF,GACF,CAAA,CACF,CAAA,CACI"}
1	+ {"version":3,"file":"IDE.mjs","names":[],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n pages: {\n path: string;\n content: string;\n isOpen?: boolean;\n }[];\n isDarkMode?: boolean;\n activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n pages: initialPages,\n isDarkMode,\n className,\n activeTab: defaultActiveTab,\n ...props\n}) => {\n const [pages, setPages] = useState(initialPages);\n const tabs = pages.filter(({ isOpen }) => isOpen);\n\n const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n useEffect(() => {\n setActiveTab(defaultActiveTab ?? firstTabIndex);\n }, [initialPages, defaultActiveTab]);\n\n const { content, path } = pages[activeTab];\n const filePaths = initialPages.map(({ path: title }) => title);\n\n const handleClickFile = (title: string) => {\n const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n if (!page) return;\n\n const newPages = pages.map((page) => {\n if (page.path === title) {\n return { ...page, isOpen: true };\n }\n return page;\n });\n\n setPages(newPages);\n\n const newPageIndex = newPages.findIndex(\n ({ path: tabTitle }) => tabTitle === title\n );\n\n setActiveTab(newPageIndex);\n };\n\n return (\n <Container\n className={cn(\n 'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n className\n )}\n roundedSize=\"3xl\"\n transparency=\"none\"\n {...props}\n >\n <div className=\"flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n <div className=\"size-3 rounded-full bg-red-500\" />\n <div className=\"size-3 rounded-full bg-yellow-500\" />\n <div className=\"size-3 rounded-full bg-green-500\" />\n </div>\n <div className=\"flex size-full overflow-y-auto\">\n {tabs.map(({ path }, index) => {\n const fullPath = path.split('/');\n const title = fullPath[fullPath.length - 1];\n const isActive = index === activeTab;\n\n return (\n <button\n className={cn(\n 'flex h-8 min-w-20 max-w-30 items-center justify-start truncate text-nowrap px-3 py-1 transition',\n isActive\n ? 'bg-card'\n : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n )}\n key={title}\n onClick={() => setActiveTab(index)}\n >\n {title}\n </button>\n );\n })}\n </div>\n </div>\n <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n <div className=\"absolute top-0 left-0 size-full\">\n <div className=\"flex size-full\">\n <WithResizer initialWidth={150}>\n <div className=\"max-h-full flex-1 overflow-y-auto\">\n <FileTree\n filesPaths={filePaths}\n activeFile={path}\n onClickFile={handleClickFile}\n />\n </div>\n </WithResizer>\n\n <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n <MarkdownRenderer isDarkMode={isDarkMode}>\n {content}\n </MarkdownRenderer>\n </div>\n </div>\n </div>\n </div>\n </Container>\n );\n};\n"],"mappings":"mWAmBA,MAAa,GAAqB,CAChC,MAAO,EACP,aACA,YACA,UAAW,EACX,GAAG,KACC,CACJ,GAAM,CAAC,EAAO,GAAY,EAAS,EAAa,CAC1C,EAAO,EAAM,QAAQ,CAAE,YAAa,EAAO,CAE3C,EAAgB,EAAK,WAAW,CAAE,YAAa,EAAO,CACtD,CAAC,EAAW,GAAgB,EAAS,GAAoB,EAAc,CAE7E,MAAgB,CACd,EAAa,GAAoB,EAAc,EAC9C,CAAC,EAAc,EAAiB,CAAC,CAEpC,GAAM,CAAE,UAAS,QAAS,EAAM,GAC1B,EAAY,EAAa,KAAK,CAAE,KAAM,KAAY,EAAM,CAExD,EAAmB,GAAkB,CAEzC,GAAI,CADS,EAAM,MAAM,CAAE,KAAM,KAAe,IAAa,EAAM,CACxD,OAEX,IAAM,EAAW,EAAM,IAAK,GACtB,EAAK,OAAS,EACT,CAAE,GAAG,EAAM,OAAQ,GAAM,CAE3B,EACP,CAEF,EAAS,EAAS,CAMlB,EAJqB,EAAS,WAC3B,CAAE,KAAM,KAAe,IAAa,EACtC,CAEyB,EAG5B,OACE,EAAC,EAAD,CACE,UAAW,EACT,kEACA,EACD,CACD,YAAY,MACZ,aAAa,OACb,GAAI,WAPN,CASE,EAAC,MAAD,CAAK,UAAU,yHAAf,CACE,EAAC,MAAD,CAAK,UAAU,0DAAf,CACE,EAAC,MAAD,CAAK,UAAU,iCAAmC,CAAA,CAClD,EAAC,MAAD,CAAK,UAAU,oCAAsC,CAAA,CACrD,EAAC,MAAD,CAAK,UAAU,mCAAqC,CAAA,CAChD,GACN,EAAC,MAAD,CAAK,UAAU,0CACZ,EAAK,KAAK,CAAE,QAAQ,IAAU,CAC7B,IAAM,EAAW,EAAK,MAAM,IAAI,CAC1B,EAAQ,EAAS,EAAS,OAAS,GAGzC,OACE,EAAC,SAAD,CACE,UAAW,EACT,kGALW,IAAU,EAOjB,UACA,yEACL,CAED,YAAe,EAAa,EAAM,UAEjC,EACM,CAJF,EAIE,EAEX,CACE,CAAA,CACF,GACN,EAAC,MAAD,CAAK,UAAU,iEACb,EAAC,MAAD,CAAK,UAAU,2CACb,EAAC,MAAD,CAAK,UAAU,0BAAf,CACE,EAAC,EAAD,CAAa,aAAc,aACzB,EAAC,MAAD,CAAK,UAAU,6CACb,EAAC,EAAD,CACE,WAAY,EACZ,WAAY,EACZ,YAAa,EACb,CAAA,CACE,CAAA,CACM,CAAA,CAEd,EAAC,MAAD,CAAK,UAAU,uDACb,EAAC,EAAD,CAA8B,sBAC3B,EACgB,CAAA,CACf,CAAA,CACF,GACF,CAAA,CACF,CAAA,CACI"}

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{usePersistedStore as e}from"../../hooks/usePersistedStore.mjs";import{Container as t}from"../Container/index.mjs";import{Button as n,ButtonColor as r,ButtonSize as i,ButtonTextAlign as a,ButtonVariant as o}from"../Button/Button.mjs";import{Input as s}from"../Input/Input.mjs";import{DropDown as c}from"../DropDown/index.mjs";import{SwitchSelector as l,SwitchSelectorColor as u,SwitchSelectorSize as d}from"../SwitchSelector/index.mjs";import{useLocaleSwitcherContent as f}from"./LocaleSwitcherContentContext.mjs";import{useMemo as p,useRef as m,useState as h}from"react";import{Check as g,Globe as _,MoveVertical as v}from"lucide-react";import{Fragment as y,jsx as b,jsxs as x}from"react/jsx-runtime";import{useIntlayer as S,useLocale as C}from"react-intlayer";import{getHTMLTextDir as w,getLocaleName as T}from"@intlayer/core/localization";import*as E from"@intlayer/types/locales";import D from"fuse.js";const O=`locale-switcher-content`,k=({panelProps:k,isMultilingual:A=!0})=>{let{switchTo:j,searchInput:M,localeSwitcherLabel:N,languageListLabel:P,seeAllLocalesSwitch:F}=S(`locale-switcher-content`),I=m(null),{locale:L}=C(),{availableLocales:R,selectedLocales:z,setSelectedLocales:B}=f(),V=p(()=>R.map(e=>({locale:e,englishName:T(e,E.ENGLISH),currentLocaleName:T(e,L),ownLocaleName:T(e)})),[R,L]),[H,U]=h(``),[W,G]=e(`locale-content-selector-see-all-locales`,!1),K=p(()=>new D(V,{keys:[{name:`ownLocaleName`,weight:.4},{name:`englishName`,weight:.2},{name:`currentLocaleName`,weight:.2},{name:`locale`,weight:.2}],threshold:.02}),[V]),q=p(()=>H?K.search(H).map(e=>e.item):V,[H,V,K]),J=e=>{A?z.includes(e)?z.length>1&&B(t=>t.filter(t=>t!==e)):B(t=>[...t,e]):B([e])},Y=e=>{G(e),B(e?R:[L])};return b(`div`,{className:`rounded-xl border border-text text-text transition-colors`,children:x(c,{identifier:O,children:[b(c.Trigger,{identifier:O,label:N.value,className:`p-0!`,roundedSize:`3xl`,children:x(`div`,{className:`flex w-full items-center justify-between`,children:[b(`div`,{className:`px-2 py-1`,children:b(_,{size:16})}),b(v,{className:`self-center`,size:16})]})}),b(c.Panel,{identifier:O,isOverable:!0,isFocusable:!0,className:`right-0 left-auto`,...k,children:x(t,{className:`max-h-[60vh] min-w-28`,separator:`y`,role:`listbox`,transparency:`xs`,border:!0,roundedSize:`2xl`,borderColor:`text`,"aria-label":P.value,children:[A&&b(`div`,{className:`m-auto p-2`,children:b(l,{defaultValue:W,onChange:Y,color:u.TEXT,size:d.SM,className:`!w-60`,choices:[{content:F.true.value,value:!0},{content:F.false.value,value:!1}]})}),!(A&&W)&&x(y,{children:[b(`div`,{className:`p-3`,children:b(s,{type:`search`,"aria-label":M.ariaLabel.value,placeholder:M.placeholder.value,onChange:e=>U(e.target.value),ref:I})}),b(`ol`,{className:`divide-y divide-dashed divide-text/20 overflow-y-auto p-1`,children:q.map(({locale:e,currentLocaleName:t,ownLocaleName:s})=>b(`li`,{className:`px-1.5 py-1`,children:b(n,{onClick:()=>J(e),label:`${j} ${t}`,disabled:!(R??R).includes(e),isActive:z.includes(e),variant:o.HOVERABLE,color:r.TEXT,isFullWidth:!0,textAlign:a.LEFT,size:i.SM,children:x(`div`,{className:`flex flex-row items-center justify-between gap-3 px-2 py-1`,children:[A&&b(`div`,{className:`w-4`,children:z.includes(e)&&b(g,{className:`size-full`})}),x(`div`,{className:`flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1`,children:[x(`div`,{className:`flex flex-col text-nowrap`,children:[b(`span`,{dir:w(e),lang:e,children:s}),b(`span`,{className:`text-neutral text-xs`,children:t})]}),b(`span`,{className:`text-neutral text-sm`,children:e.toUpperCase()})]})]})})},e))})]})]})})]})})};export{k as LocaleSwitcherContent};
+"use client";import{Container as e}from"../Container/index.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonTextAlign as i,ButtonVariant as a}from"../Button/Button.mjs";import{Input as o}from"../Input/Input.mjs";import{usePersistedStore as s}from"../../hooks/usePersistedStore.mjs";import{DropDown as c}from"../DropDown/index.mjs";import{SwitchSelector as l,SwitchSelectorColor as u,SwitchSelectorSize as d}from"../SwitchSelector/index.mjs";import{useLocaleSwitcherContent as f}from"./LocaleSwitcherContentContext.mjs";import{useMemo as p,useRef as m,useState as h}from"react";import{Check as g,Globe as _,MoveVertical as v}from"lucide-react";import{Fragment as y,jsx as b,jsxs as x}from"react/jsx-runtime";import{useIntlayer as S,useLocale as C}from"react-intlayer";import{getHTMLTextDir as w,getLocaleName as T}from"@intlayer/core/localization";import*as E from"@intlayer/types/locales";import D from"fuse.js";const O=`locale-switcher-content`,k=({panelProps:k,isMultilingual:A=!0})=>{let{switchTo:j,searchInput:M,localeSwitcherLabel:N,languageListLabel:P,seeAllLocalesSwitch:F}=S(`locale-switcher-content`),I=m(null),{locale:L}=C(),{availableLocales:R,selectedLocales:z,setSelectedLocales:B}=f(),V=p(()=>R.map(e=>({locale:e,englishName:T(e,E.ENGLISH),currentLocaleName:T(e,L),ownLocaleName:T(e)})),[R,L]),[H,U]=h(``),[W,G]=s(`locale-content-selector-see-all-locales`,!1),K=p(()=>new D(V,{keys:[{name:`ownLocaleName`,weight:.4},{name:`englishName`,weight:.2},{name:`currentLocaleName`,weight:.2},{name:`locale`,weight:.2}],threshold:.02}),[V]),q=p(()=>H?K.search(H).map(e=>e.item):V,[H,V,K]),J=e=>{A?z.includes(e)?z.length>1&&B(t=>t.filter(t=>t!==e)):B(t=>[...t,e]):B([e])},Y=e=>{G(e),B(e?R:[L])};return b(`div`,{className:`rounded-xl border border-text text-text transition-colors`,children:x(c,{identifier:O,children:[b(c.Trigger,{identifier:O,label:N.value,className:`p-0!`,roundedSize:`3xl`,children:x(`div`,{className:`flex w-full items-center justify-between`,children:[b(`div`,{className:`px-2 py-1`,children:b(_,{size:16})}),b(v,{className:`self-center`,size:16})]})}),b(c.Panel,{identifier:O,isOverable:!0,isFocusable:!0,className:`right-0 left-auto`,...k,children:x(e,{className:`max-h-[60vh] min-w-28`,separator:`y`,role:`listbox`,transparency:`xs`,border:!0,roundedSize:`2xl`,borderColor:`text`,"aria-label":P.value,children:[A&&b(`div`,{className:`m-auto p-2`,children:b(l,{defaultValue:W,onChange:Y,color:u.TEXT,size:d.SM,className:`!w-60`,choices:[{content:F.true.value,value:!0},{content:F.false.value,value:!1}]})}),!(A&&W)&&x(y,{children:[b(`div`,{className:`p-3`,children:b(o,{type:`search`,"aria-label":M.ariaLabel.value,placeholder:M.placeholder.value,onChange:e=>U(e.target.value),ref:I})}),b(`ol`,{className:`divide-y divide-dashed divide-text/20 overflow-y-auto p-1`,children:q.map(({locale:e,currentLocaleName:o,ownLocaleName:s})=>b(`li`,{className:`px-1.5 py-1`,children:b(t,{onClick:()=>J(e),label:`${j} ${o}`,disabled:!(R??R).includes(e),isActive:z.includes(e),variant:a.HOVERABLE,color:n.TEXT,isFullWidth:!0,textAlign:i.LEFT,size:r.SM,children:x(`div`,{className:`flex flex-row items-center justify-between gap-3 px-2 py-1`,children:[A&&b(`div`,{className:`w-4`,children:z.includes(e)&&b(g,{className:`size-full`})}),x(`div`,{className:`flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1`,children:[x(`div`,{className:`flex flex-col text-nowrap`,children:[b(`span`,{dir:w(e),lang:e,children:s}),b(`span`,{className:`text-neutral text-xs`,children:o})]}),b(`span`,{className:`text-neutral text-sm`,children:e.toUpperCase()})]})]})})},e))})]})]})})]})})};export{k as LocaleSwitcherContent};
 //# sourceMappingURL=LocaleSwitcherContent.mjs.map

package/dist/esm/components/MarkDownRender/MarkDownRender.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{cn as e}from"../../utils/cn.mjs";import{Link as t}from"../Link/Link.mjs";import{H1 as n,H2 as r,H3 as i,H4 as a,H5 as o,H6 as s}from"../Headers/index.mjs";import{CodeProvider as c}from"../IDE/CodeContext.mjs";import{Code as l}from"../IDE/Code.mjs";import{TabProvider as u}from"../Tab/TabContext.mjs";import{Tab as d}from"../Tab/Tab.mjs";import{Table as f}from"../Table/Table.mjs";import{Fragment as p,jsx as m}from"react/jsx-runtime";import{renderMarkdown as h}from"react-intlayer";const g=e=>m(n,{isClickable:!0,className:`text-text`,...e}),_=e=>m(r,{isClickable:!0,className:`mt-16 text-text`,...e}),v=e=>m(i,{isClickable:!0,className:`mt-5 text-text`,...e}),y=e=>m(a,{isClickable:!0,className:`mt-3 text-text`,...e}),b=e=>m(o,{isClickable:!0,className:`mt-3 text-text`,...e}),x=e=>m(s,{isClickable:!0,className:`mt-3 text-text`,...e}),S=e=>m(`strong`,{className:`text-text`,...e}),C=e=>({className:t,children:n,...r})=>{let i=String(n??``).replace(/\n$/,``);if(!t)return m(`code`,{className:`rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm`,children:i});let a=t?.replace(/lang(?:uage)?-/,``)||`plaintext`;return m(l,{...r,language:a,showHeader:!0,isDarkMode:e,children:i})},w=({className:t,...n})=>m(`blockquote`,{className:e(`mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral`,t),...n}),T=({className:t,...n})=>m(`ul`,{className:e(`mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80`,t),...n}),E=({className:t,...n})=>m(`ol`,{className:e(`mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80`,t),...n}),D=({className:t,alt:n,src:r,...i})=>m(`img`,{...i,alt:n??``,loading:`lazy`,className:e(`max-h-[80vh] max-w-full rounded-md`,t),src:`${r}?raw=true`}),O=e=>n=>m(t,{isExternalLink:n.href?.startsWith(`http`),underlined:!0,locale:e,label:``,color:`text`,...n}),k={h1:g,h2:_,h3:v,h4:y,h5:b,h6:x,strong:S,blockquote:w,ul:T,ol:E,img:D,pre:e=>m(p,{children:e.children}),table:e=>m(f,{isRollable:!0,...e}),th:({className:t,...n})=>m(`th`,{className:e(`border-neutral border-b bg-neutral/10 p-4`,t),...n}),tr:({className:t,...n})=>m(`tr`,{className:e(`hover:/10 hover:bg-neutral/10`,t),...n}),td:({className:t,...n})=>m(`td`,{className:e(`border-neutral-500/50 border-b p-4`,t),...n}),hr:({className:t,...n})=>m(`hr`,{className:e(`mx-6 mt-16 text-neutral`,t),...n}),Tabs:e=>m(d,{...e,className:`rounded-xl border border-card`,headerClassName:`sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto`}),Tab:d.Item,Columns:({className:t,...n})=>m(`div`,{className:e(`flex gap-4 max-md:flex-col`,t),...n}),Column:({className:t,...n})=>m(`div`,{className:e(`flex-1`,t),...n})},A=(e,t)=>({...k,code:C(e),a:O(t)}),j=k,M=e=>({components:j}),N=({children:e,isDarkMode:t=!1,locale:n,forceBlock:r,preserveFrontmatter:i,tagfilter:a,components:o,wrapper:s})=>m(c,{children:m(u,{children:h(e,{components:{...A(t,n),...o},wrapper:s,forceBlock:r,preserveFrontmatter:i,tagfilter:a})})});export{N as MarkdownRenderer,j as baseMarkdownComponents,M as getIntlayerMarkdownOptions};
+import{cn as e}from"../../utils/cn.mjs";import{Link as t}from"../Link/Link.mjs";import{H1 as n,H2 as r,H3 as i,H4 as a,H5 as o,H6 as s}from"../Headers/index.mjs";import{CodeProvider as c}from"../IDE/CodeContext.mjs";import{Code as l}from"../IDE/Code.mjs";import{TabProvider as u}from"../Tab/TabContext.mjs";import{Tab as d}from"../Tab/Tab.mjs";import{Table as f}from"../Table/Table.mjs";import{Fragment as p,jsx as m}from"react/jsx-runtime";import{renderMarkdown as h}from"react-intlayer";const g=e=>m(n,{isClickable:!0,className:`text-text`,...e}),_=e=>m(r,{isClickable:!0,className:`mt-16 text-text`,...e}),v=e=>m(i,{isClickable:!0,className:`mt-5 text-text`,...e}),y=e=>m(a,{isClickable:!0,className:`mt-3 text-text`,...e}),b=e=>m(o,{isClickable:!0,className:`mt-3 text-text`,...e}),x=e=>m(s,{isClickable:!0,className:`mt-3 text-text`,...e}),S=e=>m(`strong`,{className:`text-text`,...e}),C=e=>({className:t,children:n,...r})=>{let i=String(n??``).replace(/\n$/,``);if(!t)return m(`code`,{className:`rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm`,children:i});let a=t?.replace(/lang(?:uage)?-/,``)||`plaintext`;return m(l,{...r,language:a,showHeader:!0,isDarkMode:e,children:i})},w=({className:t,...n})=>m(`blockquote`,{className:e(`mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral`,t),...n}),T=({className:t,...n})=>m(`ul`,{className:e(`mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80`,t),...n}),E=({className:t,...n})=>m(`ol`,{className:e(`mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80`,t),...n}),D=({className:t,alt:n,src:r,...i})=>m(`img`,{...i,alt:n??``,loading:`lazy`,className:e(`max-h-[80vh] max-w-full rounded-md`,t),src:r?.includes(`github.com`)?r?.replace(`github.com`,`raw.githubusercontent.com`).replace(`/blob/`,`/`):r}),O=e=>n=>m(t,{isExternalLink:n.href?.startsWith(`http`),underlined:!0,locale:e,label:``,color:`text`,...n}),k={h1:g,h2:_,h3:v,h4:y,h5:b,h6:x,strong:S,blockquote:w,ul:T,ol:E,img:D,pre:e=>m(p,{children:e.children}),table:e=>m(f,{isRollable:!0,...e}),th:({className:t,...n})=>m(`th`,{className:e(`border-neutral border-b bg-neutral/10 p-4`,t),...n}),tr:({className:t,...n})=>m(`tr`,{className:e(`hover:/10 hover:bg-neutral/10`,t),...n}),td:({className:t,...n})=>m(`td`,{className:e(`border-neutral-500/50 border-b p-4`,t),...n}),hr:({className:t,...n})=>m(`hr`,{className:e(`mx-6 mt-16 text-neutral`,t),...n}),Tabs:e=>m(d,{...e,className:`rounded-xl border border-card`,headerClassName:`sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto`}),Tab:d.Item,Columns:({className:t,...n})=>m(`div`,{className:e(`flex gap-4 max-md:flex-col`,t),...n}),Column:({className:t,...n})=>m(`div`,{className:e(`flex-1`,t),...n})},A=(e,t)=>({...k,code:C(e),a:O(t)}),j=k,M=e=>({components:j}),N=({children:e,isDarkMode:t=!1,locale:n,forceBlock:r,preserveFrontmatter:i,tagfilter:a,components:o,wrapper:s})=>m(c,{children:m(u,{children:h(e,{components:{...A(t,n),...o},wrapper:s,forceBlock:r,preserveFrontmatter:i,tagfilter:a})})});export{N as MarkdownRenderer,j as baseMarkdownComponents,M as getIntlayerMarkdownOptions};
 //# sourceMappingURL=MarkDownRender.mjs.map

package/dist/esm/components/MarkDownRender/MarkDownRender.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport {\n type MarkdownRenderer as MarkdownRendererIntlayer,\n renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n <H1 isClickable className=\"text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n <strong className=\"text-text\" {...props} />\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n return ({ className, children, ...rest }: ComponentProps<'code'>) => {\n const content = String(children ?? '').replace(/\\n$/, '');\n const isBlock = !!className;\n\n if (!isBlock) {\n return (\n <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm\">\n {content}\n </code>\n );\n }\n\n const language = (className?.replace(/lang(?:uage)?-/, '') \|\|\n 'plaintext') as BundledLanguage;\n\n return (\n <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n {content}\n </Code>\n );\n };\n};\n\nconst BlockquoteRenderer = ({\n className,\n ...props\n}: ComponentProps<'blockquote'>) => (\n <blockquote\n className={cn(\n 'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n className\n )}\n {...props}\n />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n <ul\n className={cn(\n 'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n <ol\n className={cn(\n 'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst ImgRenderer = ({\n className,\n alt,\n src,\n ...props\n}: ComponentProps<'img'>) => (\n <img\n {...props}\n alt={alt ?? ''}\n loading=\"lazy\"\n className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n src={~~`${~~src}?raw~~=true`~~}\n />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n return (props: ComponentProps<'a'>) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined\n locale={locale}\n label=\"\"\n color=\"text\"\n {...(props as any)}\n />\n );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof Table>) => (\n <Table isRollable {...props} />\n);\nconst ThRenderer = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n {...props}\n />\n);\nconst TrRenderer = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:/10 hover:bg-neutral/10', className)} {...props} />\n);\nconst TdRenderer = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn('border-neutral-500/50 border-b p-4', className)}\n {...props}\n />\n);\nconst HrRenderer = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n <Tab\n {...props}\n className=\"rounded-xl border border-card\"\n headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n />\n);\nconst ColumnsRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex-1', className)} {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n h1: H1Renderer,\n h2: H2Renderer,\n h3: H3Renderer,\n h4: H4Renderer,\n h5: H5Renderer,\n h6: H6Renderer,\n strong: StrongRenderer,\n blockquote: BlockquoteRenderer,\n ul: UlRenderer,\n ol: OlRenderer,\n img: ImgRenderer,\n pre: PreRenderer,\n table: TableRenderer,\n th: ThRenderer,\n tr: TrRenderer,\n td: TdRenderer,\n hr: HrRenderer,\n Tabs: TabsRenderer,\n Tab: Tab.Item,\n Columns: ColumnsRenderer,\n Column: ColumnRenderer,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n isDarkMode?: boolean,\n locale?: LocalesValues\n) => ({\n ...staticMarkdownComponents,\n code: createCodeRenderer(isDarkMode),\n a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n forceBlock?: boolean;\n preserveFrontmatter?: boolean;\n tagfilter?: boolean;\n components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode = false,\n locale,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n components: componentsProp,\n wrapper,\n}) => {\n // Generate components with props bound to them\n const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n const markdownContent = renderMarkdown(children, {\n components: {\n ...markdownComponents,\n ...componentsProp,\n },\n wrapper,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n });\n\n return (\n <CodeProvider>\n <TabProvider>{markdownContent}</TabProvider>\n </CodeProvider>\n );\n};\n"],"mappings":"yeAiBA,MAAM,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,YAAY,GAAI,EAAS,CAAA,CAE/C,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,kBAAkB,GAAI,EAAS,CAAA,CAErD,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,iBAAiB,GAAI,EAAS,CAAA,CAEpD,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,iBAAiB,GAAI,EAAS,CAAA,CAEpD,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,iBAAiB,GAAI,EAAS,CAAA,CAEpD,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,iBAAiB,GAAI,EAAS,CAAA,CAEpD,EAAkB,GACtB,EAAC,SAAD,CAAQ,UAAU,YAAY,GAAI,EAAS,CAAA,CAGvC,EAAsB,IAClB,CAAE,YAAW,WAAU,GAAG,KAAmC,CACnE,IAAM,EAAU,OAAO,GAAY,GAAG,CAAC,QAAQ,MAAO,GAAG,CAGzD,GAAI,CAFc,EAGhB,OACE,EAAC,OAAD,CAAM,UAAU,+GACb,EACI,CAAA,CAIX,IAAM,EAAY,GAAW,QAAQ,iBAAkB,GAAG,EACxD,YAEF,OACE,EAAC,EAAD,CAAM,GAAI,EAAgB,WAAU,WAAA,GAAuB,sBACxD,EACI,CAAA,EAKP,GAAsB,CAC1B,YACA,GAAG,KAEH,EAAC,aAAD,CACE,UAAW,EACT,8EACA,EACD,CACD,GAAI,EACJ,CAAA,CAGE,GAAc,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CACE,UAAW,EACT,iEACA,EACD,CACD,GAAI,EACJ,CAAA,CAGE,GAAc,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CACE,UAAW,EACT,oEACA,EACD,CACD,GAAI,EACJ,CAAA,CAGE,GAAe,CACnB,YACA,MACA,MACA,GAAG,KAEH,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,GAAO,GACZ,QAAQ,OACR,UAAW,EAAG,qCAAsC,EAAU,CAC9D,~~IAAK~~,~~GAAG~~,~~EAAI~~,~~WACZ~~,CAAA,CAGE,EAAsB,GAClB,GACN,EAAC,EAAD,CACE,eAAgB,EAAM,MAAM,WAAW,OAAO,CAC9C,WAAA,GACQ,SACR,MAAM,GACN,MAAM,OACN,GAAK,EACL,CAAA,CAgDA,EAA2B,CAC/B,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,OAAQ,EACR,WAAY,EACZ,GAAI,EACJ,GAAI,EACJ,IAAK,EACL,IAxDmB,GAAiC,EAAA,EAAA,CAAA,SAAG,EAAM,SAAY,CAAA,CAyDzE,MAxDqB,GACrB,EAAC,EAAD,CAAO,WAAA,GAAW,GAAI,EAAS,CAAA,CAwD/B,IAtDkB,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CACE,UAAW,EAAG,4CAA6C,EAAU,CACrE,GAAI,EACJ,CAAA,CAmDF,IAjDkB,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CAAI,UAAW,EAAG,gCAAiC,EAAU,CAAE,GAAI,EAAS,CAAA,CAiD5E,IA/CkB,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CACE,UAAW,EAAG,qCAAsC,EAAU,CAC9D,GAAI,EACJ,CAAA,CA4CF,IA1CkB,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CAAI,UAAW,EAAG,0BAA2B,EAAU,CAAE,GAAI,EAAS,CAAA,CA0CtE,KAvCoB,GACpB,EAAC,EAAD,CACE,GAAI,EACJ,UAAU,gCACV,gBAAgB,8EAChB,CAAA,CAmCF,IAAK,EAAI,KACT,SAlCuB,CACvB,YACA,GAAG,KAEH,EAAC,MAAD,CAAK,UAAW,EAAG,6BAA8B,EAAU,CAAE,GAAI,EAAS,CAAA,CA+B1E,QA7BsB,CACtB,YACA,GAAG,KAEH,EAAC,MAAD,CAAK,UAAW,EAAG,SAAU,EAAU,CAAE,GAAI,EAAS,CAAA,CA0BvD,CAGK,GACJ,EACA,KACI,CACJ,GAAG,EACH,KAAM,EAAmB,EAAW,CACpC,EAAG,EAAmB,EAAO,CAC9B,EAGY,EAAyB,EAazB,EAA8B,IAA2B,CACpE,WAAY,EACb,EAEY,GAA+C,CAC1D,WACA,aAAa,GACb,SACA,aACA,sBACA,YACA,WAAY,EACZ,aAiBE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAboB,EAAe,EAAU,CAC/C,WAAY,CACV,GAJuB,EAAyB,EAAY,EAAO,CAKnE,GAAG,EACJ,CACD,UACA,aACA,sBACA,YACD,CAAC,CAI8C,CAAA,CAC/B,CAAA"}
1	+ {"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport {\n type MarkdownRenderer as MarkdownRendererIntlayer,\n renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n <H1 isClickable className=\"text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n <strong className=\"text-text\" {...props} />\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n return ({ className, children, ...rest }: ComponentProps<'code'>) => {\n const content = String(children ?? '').replace(/\\n$/, '');\n const isBlock = !!className;\n\n if (!isBlock) {\n return (\n <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm\">\n {content}\n </code>\n );\n }\n\n const language = (className?.replace(/lang(?:uage)?-/, '') \|\|\n 'plaintext') as BundledLanguage;\n\n return (\n <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n {content}\n </Code>\n );\n };\n};\n\nconst BlockquoteRenderer = ({\n className,\n ...props\n}: ComponentProps<'blockquote'>) => (\n <blockquote\n className={cn(\n 'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n className\n )}\n {...props}\n />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n <ul\n className={cn(\n 'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n <ol\n className={cn(\n 'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst ImgRenderer = ({\n className,\n alt,\n src,\n ...props\n}: ComponentProps<'img'>) => (\n <img\n {...props}\n alt={alt ?? ''}\n loading=\"lazy\"\n className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n src={\n src?.includes('github.com')\n ? src\n ?.replace('github.com', 'raw.githubusercontent.com')\n .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n : src\n }\n />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n return (props: ComponentProps<'a'>) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined\n locale={locale}\n label=\"\"\n color=\"text\"\n {...(props as any)}\n />\n );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof Table>) => (\n <Table isRollable {...props} />\n);\nconst ThRenderer = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n {...props}\n />\n);\nconst TrRenderer = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:/10 hover:bg-neutral/10', className)} {...props} />\n);\nconst TdRenderer = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn('border-neutral-500/50 border-b p-4', className)}\n {...props}\n />\n);\nconst HrRenderer = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n <Tab\n {...props}\n className=\"rounded-xl border border-card\"\n headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n />\n);\nconst ColumnsRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex-1', className)} {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n h1: H1Renderer,\n h2: H2Renderer,\n h3: H3Renderer,\n h4: H4Renderer,\n h5: H5Renderer,\n h6: H6Renderer,\n strong: StrongRenderer,\n blockquote: BlockquoteRenderer,\n ul: UlRenderer,\n ol: OlRenderer,\n img: ImgRenderer,\n pre: PreRenderer,\n table: TableRenderer,\n th: ThRenderer,\n tr: TrRenderer,\n td: TdRenderer,\n hr: HrRenderer,\n Tabs: TabsRenderer,\n Tab: Tab.Item,\n Columns: ColumnsRenderer,\n Column: ColumnRenderer,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n isDarkMode?: boolean,\n locale?: LocalesValues\n) => ({\n ...staticMarkdownComponents,\n code: createCodeRenderer(isDarkMode),\n a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n forceBlock?: boolean;\n preserveFrontmatter?: boolean;\n tagfilter?: boolean;\n components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode = false,\n locale,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n components: componentsProp,\n wrapper,\n}) => {\n // Generate components with props bound to them\n const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n const markdownContent = renderMarkdown(children, {\n components: {\n ...markdownComponents,\n ...componentsProp,\n },\n wrapper,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n });\n\n return (\n <CodeProvider>\n <TabProvider>{markdownContent}</TabProvider>\n </CodeProvider>\n );\n};\n"],"mappings":"yeAiBA,MAAM,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,YAAY,GAAI,EAAS,CAAA,CAE/C,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,kBAAkB,GAAI,EAAS,CAAA,CAErD,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,iBAAiB,GAAI,EAAS,CAAA,CAEpD,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,iBAAiB,GAAI,EAAS,CAAA,CAEpD,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,iBAAiB,GAAI,EAAS,CAAA,CAEpD,EAAc,GAClB,EAAC,EAAD,CAAI,YAAA,GAAY,UAAU,iBAAiB,GAAI,EAAS,CAAA,CAEpD,EAAkB,GACtB,EAAC,SAAD,CAAQ,UAAU,YAAY,GAAI,EAAS,CAAA,CAGvC,EAAsB,IAClB,CAAE,YAAW,WAAU,GAAG,KAAmC,CACnE,IAAM,EAAU,OAAO,GAAY,GAAG,CAAC,QAAQ,MAAO,GAAG,CAGzD,GAAI,CAFc,EAGhB,OACE,EAAC,OAAD,CAAM,UAAU,+GACb,EACI,CAAA,CAIX,IAAM,EAAY,GAAW,QAAQ,iBAAkB,GAAG,EACxD,YAEF,OACE,EAAC,EAAD,CAAM,GAAI,EAAgB,WAAU,WAAA,GAAuB,sBACxD,EACI,CAAA,EAKP,GAAsB,CAC1B,YACA,GAAG,KAEH,EAAC,aAAD,CACE,UAAW,EACT,8EACA,EACD,CACD,GAAI,EACJ,CAAA,CAGE,GAAc,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CACE,UAAW,EACT,iEACA,EACD,CACD,GAAI,EACJ,CAAA,CAGE,GAAc,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CACE,UAAW,EACT,oEACA,EACD,CACD,GAAI,EACJ,CAAA,CAGE,GAAe,CACnB,YACA,MACA,MACA,GAAG,KAEH,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,GAAO,GACZ,QAAQ,OACR,UAAW,EAAG,qCAAsC,EAAU,CAC9D,IACE,GAAK,SAAS,aAAa,CACvB,GACI,QAAQ,aAAc,4BAA4B,CACnD,QAAQ,SAAU,IAAI,CACzB,EAEN,CAAA,CAGE,EAAsB,GAClB,GACN,EAAC,EAAD,CACE,eAAgB,EAAM,MAAM,WAAW,OAAO,CAC9C,WAAA,GACQ,SACR,MAAM,GACN,MAAM,OACN,GAAK,EACL,CAAA,CAgDA,EAA2B,CAC/B,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,OAAQ,EACR,WAAY,EACZ,GAAI,EACJ,GAAI,EACJ,IAAK,EACL,IAxDmB,GAAiC,EAAA,EAAA,CAAA,SAAG,EAAM,SAAY,CAAA,CAyDzE,MAxDqB,GACrB,EAAC,EAAD,CAAO,WAAA,GAAW,GAAI,EAAS,CAAA,CAwD/B,IAtDkB,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CACE,UAAW,EAAG,4CAA6C,EAAU,CACrE,GAAI,EACJ,CAAA,CAmDF,IAjDkB,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CAAI,UAAW,EAAG,gCAAiC,EAAU,CAAE,GAAI,EAAS,CAAA,CAiD5E,IA/CkB,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CACE,UAAW,EAAG,qCAAsC,EAAU,CAC9D,GAAI,EACJ,CAAA,CA4CF,IA1CkB,CAAE,YAAW,GAAG,KAClC,EAAC,KAAD,CAAI,UAAW,EAAG,0BAA2B,EAAU,CAAE,GAAI,EAAS,CAAA,CA0CtE,KAvCoB,GACpB,EAAC,EAAD,CACE,GAAI,EACJ,UAAU,gCACV,gBAAgB,8EAChB,CAAA,CAmCF,IAAK,EAAI,KACT,SAlCuB,CACvB,YACA,GAAG,KAEH,EAAC,MAAD,CAAK,UAAW,EAAG,6BAA8B,EAAU,CAAE,GAAI,EAAS,CAAA,CA+B1E,QA7BsB,CACtB,YACA,GAAG,KAEH,EAAC,MAAD,CAAK,UAAW,EAAG,SAAU,EAAU,CAAE,GAAI,EAAS,CAAA,CA0BvD,CAGK,GACJ,EACA,KACI,CACJ,GAAG,EACH,KAAM,EAAmB,EAAW,CACpC,EAAG,EAAmB,EAAO,CAC9B,EAGY,EAAyB,EAazB,EAA8B,IAA2B,CACpE,WAAY,EACb,EAEY,GAA+C,CAC1D,WACA,aAAa,GACb,SACA,aACA,sBACA,YACA,WAAY,EACZ,aAiBE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAboB,EAAe,EAAU,CAC/C,WAAY,CACV,GAJuB,EAAyB,EAAY,EAAO,CAKnE,GAAG,EACJ,CACD,UACA,aACA,sBACA,YACD,CAAC,CAI8C,CAAA,CAC/B,CAAA"}

package/dist/esm/components/MaxHeightSmoother/index.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{cn as e}from"../../utils/cn.mjs";import{jsx as t}from"react/jsx-runtime";const n=({children:n,isHidden:r,className:i=``,isOverable:a=!1,isFocusable:o=!1,minHeight:s=0,...c})=>t(`div`,{"aria-hidden":o?r:void 0,tabIndex:o?0:void 0,role:o?`button`:`none`,className:e(`group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out`,r!==void 0&&!r&&`grid-rows-[1fr] overflow-x-auto`,a&&`hover:grid-rows-[1fr] hover:overflow-x-auto`,o&&`focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto`,i),...c,children:t(`div`,{style:{minHeight:`${s}px`},className:e(a&&`group-hover/height-smoother:visible`,o&&`group-focus/height-smoother:visible`,i),children:n})});export{n as MaxHeightSmoother};
+import{cn as e}from"../../utils/cn.mjs";import{jsx as t}from"react/jsx-runtime";const n=({children:n,isHidden:r,className:i=``,isOverable:a=!1,isFocusable:o=!1,minHeight:s=0,style:c,...l})=>{let u=s>0,d=r===!0||r===void 0&&(a||o);return t(`div`,{role:o?`button`:void 0,tabIndex:o?0:void 0,"aria-expanded":o&&r!==void 0?!r:void 0,style:u?{"--mhs-collapsed":`${s}px`,"--mhs-expanded":`3000px`,...c}:c,className:e(`group/mhs relative w-full`,!u&&[`grid transition-[grid-template-rows] duration-500 ease-in-out motion-reduce:transition-none`,d?`grid-rows-[0fr]`:`grid-rows-[1fr]`,a&&`hover:grid-rows-[1fr]`,o&&`focus:grid-rows-[1fr] focus-within:grid-rows-[1fr]`],u&&[`overflow-hidden transition-[max-height] duration-500 ease-in-out motion-reduce:transition-none`,d?`max-h-[var(--mhs-collapsed)]`:`max-h-[var(--mhs-expanded)]`,a&&`hover:max-h-[var(--mhs-expanded)]`,o&&`focus-within:max-h-[var(--mhs-expanded)]`],i),...l,children:t(`div`,{className:e(`overflow-hidden`,!u&&`min-h-0`,u&&`min-h-[var(--mhs-collapsed)]`),children:n})})};export{n as MaxHeightSmoother};
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/MaxHeightSmoother/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, ReactNode } from 'react';\n\n/*\n Props for the MaxHeightSmoother component\n /\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n /* Content to render within the smoother container /\n children: ReactNode;\n /* Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior /\n isHidden?: boolean;\n /* Enable expand-on-hover behavior /\n isOverable?: boolean;\n /* Enable expand-on-focus behavior for accessibility and keyboard navigation /\n isFocusable?: boolean;\n /* Minimum height in pixels for the collapsed state /\n minHeight?: number;\n}\n\n/\n MaxHeightSmoother Component\n \n A sophisticated container component that provides smooth height transitions\n * for collapsible content. ~~Uses~~ ~~CSS~~ ~~Grid's~~ ~~fractional~~ ~~rows~~ to ~~create fluid~~\n * ~~animations~~ ~~without~~ ~~JavaScript~~ ~~height~~ ~~calculations,~~ making it ~~performant~~\n * and ~~smooth~~ ~~across~~ ~~all~~ ~~devices~~ ~~and~~ ~~screen sizes.\~~n \n @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n \n <MaxHeightSmoother isHidden={isCollapsed}>\n * <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable~~={true}~~>\n * <~~div>\n * <~~p>This content expands when you hover over the container.</p>\n * ~~<p>Perfect~~ for preview cards or tooltips.</p>\n * </~~div>\n * </~~MaxHeightSmoother>\n * ```\n \n @example\n * ~~Accessible focus~~-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isFocusable~~={true}~~>\n * <~~div>\n * <h3>Expandable Section</h3>\n * <~~p>Tab to focus this container to expand the content.</p>\n * ~~<p>Great~~ for accessible progressive disclosure.</p>\n * </~~div>\n * </~~MaxHeightSmoother>\n * ```\n \n @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother\n * isOverable~~={true}\n~~ * minHeight={100}\n * className=\"border rounded-lg p-4\"\n * >\n * <~~div>\n * <~~h3>Article Preview</h3>\n * <p>This ~~article~~ preview ~~shows~~ the ~~first~~ ~~few lines...</p>\n * <p>~~Hover to see ~~the full content with smooth expansion~~.</p>\n * ~~<p>The~~ minHeight ensures some content is always visible.</p>\n * </~~div>\n * </~~MaxHeightSmoother>\n * ```\n \n @example\n * Combined hover and focus ~~behavior~~:\n * ```tsx\n * <MaxHeightSmoother\n * isOverable~~={true}\n~~ * isFocusable~~={true}\n~~ * minHeight={80}\n * >\n * <~~div>\n * <~~h4>Interactive Card</h4>\n * <p>Expands on both hover and keyboard focus.</p>\n * ~~<p>Accessible~~ to ~~both~~ ~~mouse~~ ~~and~~ ~~keyboard~~ ~~users.</p>\~~n * </div>\n * ~~</MaxHeightSmoother>\~~n * ~~```\~~n \n ~~Features:\~~n * - ~~Smooth~~ CSS ~~Grid-based~~ ~~height~~ ~~transitions~~ (~~700ms~~ ~~duration~~)\n * - ~~Three~~ ~~interaction~~ ~~modes:~~ ~~controlled,~~ ~~hover~~, ~~and~~ ~~focus~~\n * - ~~Configurable~~ ~~minimum~~ ~~height~~ ~~for~~ ~~collapsed~~ ~~state~~\n * - ~~Accessible~~ ~~keyboard~~ ~~navigation~~ ~~support\~~n * - ~~Overflow~~ ~~handling~~ ~~with~~ ~~smooth~~ ~~scrolling~~\n * - ~~ARIA~~ ~~attributes~~ ~~for~~ ~~screen~~ ~~reader~~ ~~compatibility\~~n * - ~~Performance-optimized~~ ~~with~~ ~~CSS~~-~~only~~ ~~animations~~\n * - ~~Responsive~~ ~~design~~ ~~that~~ ~~works~~ on ~~all~~ ~~screen~~ ~~sizes\~~n \n ~~Animation~~ ~~Technique:\n~~ * ~~Uses~~ ~~CSS~~ ~~Grid~~ `~~grid~~-~~rows-[0fr]~~` to ~~`grid~~-~~rows-[1fr]~~` ~~transitions~~\n * ~~instead~~ of ~~height~~ ~~animations,~~ ~~which~~ ~~provides~~:\n * - ~~Smooth~~ ~~animations~~ ~~without~~ ~~knowing~~ ~~content~~ ~~height~~\n * - ~~Better~~ ~~performance~~ ~~(no~~ ~~layout~~ ~~recalculations)~~\n * - ~~More~~ ~~reliable~~ ~~across~~ ~~different~~ content ~~types~~\n * - ~~Automatic~~ ~~adaptation~~ to ~~dynamic~~ ~~content~~ ~~changes\~~n \n Interaction Modes:\n * 1. Controlled: ~~Use~~ `isHidden` ~~prop~~ for external state control\n * 2. Hover: Set `isOverable~~={true}~~` for mouse hover expansion\n * 3. Focus: Set `isFocusable~~={true}~~` for keyboard focus expansion\n * 4. Combined: Use ~~both~~ `isOverable` and `isFocusable` together\n \n Accessibility ~~Features:\~~n * - `role=\"button\"` ~~when~~ ~~focusable for proper screen reader context\n * -~~ `tabIndex={0}` ~~for~~ ~~keyboard~~ ~~navigation~~ ~~when focusable~~\n * - `aria-~~hidden~~` ~~attribute~~ ~~for~~ ~~screen~~ ~~reader~~ ~~control~~\n * - ~~Semantic~~ ~~focus~~ ~~management~~ ~~with~~ focus-within pseudo-class\n * - High contrast focus indicators\n * - ~~Respects~~ prefers-reduced-motion ~~settings\~~n \n ~~Use~~ ~~Cases:\n~~ * - ~~FAQ~~ ~~accordions~~ ~~and~~ expandable sections\n * - ~~Article~~ ~~previews and read-more functionality\~~n * - ~~Card~~ ~~hover~~ ~~effects~~ ~~and~~ ~~content~~ ~~previews\n~~ * - ~~Progressive~~ ~~disclosure for complex forms\~~n * - ~~Tooltip~~ ~~and~~ ~~popover~~ ~~content~~ ~~containers\n~~ * - ~~Mobile-friendly collapsible navigation~~\n * - ~~Dashboard~~ ~~widget~~ ~~expansion\n~~ * - ~~Email~~ ~~preview~~ ~~in mail clients\~~n \n Performance ~~Considerations:\~~n * - Pure CSS animations (no JavaScript ~~timer~~ ~~overhead)~~\n * - ~~GPU~~ ~~acceleration~~ ~~through~~ ~~transform-based~~ ~~animations~~\n * - ~~Minimal~~ ~~repaints~~ ~~and~~ ~~layout~~ ~~shifts\n~~ * - ~~Efficient~~ ~~event handling with CSS pseudo-classes~~\n * - No ~~DOM measurements or calculations required~~\n \n @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (true=collapsed, false=expanded)\n * @param props.isOverable - Enable hover-to-expand ~~behavior~~\n * @param props.isFocusable - Enable focus-to-expand ~~behavior~~ with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for collapsed state (default: 0)\n * @param props.className - Additional CSS classes ~~for styling~~\n * @param props.style - Inline styles (~~note:~~ ~~minHeight~~ ~~style~~ will be ~~applied~~)\n * @param props.role - ARIA role (automatically set to \"button\" when focusable)\n * @param props.tabIndex - Tab index (automatically set to 0 when focusable)\n * @param props.aria-hidden - ARIA hidden state (controlled by isHidden when focusable)\n * @param props.onClick - Click event handler\n * @param props.onMouseEnter - Mouse enter event handler\n * @param props.onMouseLeave - Mouse leave event handler\n * @param props.onFocus - Focus event handler\n * @param props.onBlur - Blur event handler\n * @param props...rest - All other standard HTML div attributes\n \n @returns A smooth height-transitioning container with configurable interaction modes\n */\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n children,\n isHidden,\n className = '',\n isOverable = false,\n isFocusable = false,\n minHeight = 0,\n ...props\n}) => (\n <div\n ~~aria-hidden~~={isFocusable ? ~~isHidden~~ : undefined}\n tabIndex={isFocusable ? 0 : undefined}\n ~~role~~={isFocusable ? '~~button~~' : '~~none~~'}\n className={cn(\n 'group/~~height-smoother~~ relative ~~grid~~ w-full grid-rows~~-[0fr]~~ overflow-hidden transition-~~all~~ duration-~~700~~ ease-in-out',\n ~~typeof~~ ~~isHidden~~ ~~!==~~ '~~undefined~~' ~~&&\n !isHidden~~ ~~&&\n~~ 'grid-rows-[1fr] ~~overflow-x-auto~~',\n isOverable && 'hover:grid-rows-[1fr] ~~hover:overflow-x-auto~~',\n isFocusable ~~&&\n~~ 'focus-within:grid-rows-[1fr] focus-within:overflow-x-~~auto~~ ~~focus~~:~~grid~~-~~rows~~-[~~1fr~~] focus:~~overflow~~-x-~~auto~~',\n ~~className~~\n )}\n {...props}\n >\n ~~<div\n~~ ~~style=~~{{\n ~~minHeight:~~ ~~`${minHeight~~}~~px`,\~~n }}\n className={cn(\n ~~isOverable~~ && '~~group~~-~~hover/height~~-~~smoother:visible~~',\n ~~isFocusable~~ && '~~group~~-~~focus/height~~-~~smoother:visible~~',\n ~~className\n~~ )}\n >\n {children}\n </div>\n </div>\n);\n"],"mappings":"~~gFAmKA~~,MAAa,GAAiD,CAC5D,WACA,WACA,YAAY,GACZ,aAAa,GACb,cAAc,GACd,YAAY,EACZ,GAAG,~~KAEH~~,EAAC,MAAD,CACE,~~cAAa~~,EAAc,~~EAAW~~,IAAA,~~GACtC~~,SAAU,EAAc,EAAI,IAAA,GAC5B,~~KAAM~~,~~EAAc~~,~~SAAW~~,~~OAC/B~~,UAAW,EACT,~~qHACO~~,~~IAAa~~,~~QAClB~~,~~CAAC~~,~~GACD~~,~~kCACF~~,GAAc,~~8CACd~~,~~GACE~~,~~wGACF~~,~~EACD~~,~~CACD~~,~~GAAI~~,~~WAEJ~~,~~EAAC~~,~~MAAD~~,~~CACE~~,~~MAAO~~,~~CACL~~,~~UAAW~~,~~GAAG~~,~~EAAU~~,~~IACzB,~~CACD,UAAW,EACT,~~GAAc~~,~~sCACd~~,~~GAAe~~,~~sCACf~~,~~EACD~~,CAEA,WACG,CAAA,CACF,CAAA"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { CSSProperties, FC, HTMLAttributes, ReactNode } from 'react';\n\n/*\n Props for the MaxHeightSmoother component\n /\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n /* Content to render within the smoother container /\n children: ReactNode;\n /* Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior /\n isHidden?: boolean;\n /* Enable expand-on-hover behavior /\n isOverable?: boolean;\n /* Enable expand-on-focus behavior for accessibility and keyboard navigation /\n isFocusable?: boolean;\n /* Minimum height in pixels for the collapsed state /\n minHeight?: number;\n}\n\n/\n MaxHeightSmoother Component\n \n A sophisticated container component that provides smooth height transitions\n * for collapsible content. Implemented entirely in CSS — no client-side\n * JavaScript, hooks, or event listeners — making it compatible with React\n * Server Components and Next.js App Router without `'use client'`.\n \n @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n \n <MaxHeightSmoother isHidden={isCollapsed}>\n * <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable>\n * <p>This content expands when you hover over the container.</p>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * Focus-triggered expansion (keyboard accessible):\n * ```tsx\n * <MaxHeightSmoother isFocusable>\n * <p>Tab to focus this container to expand the content.</p>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother isOverable minHeight={100} className=\"border rounded-lg p-4\">\n * <h3>Article Preview</h3>\n * <p>This shows a preview of the content. Hover to see all.</p>\n * </MaxHeightSmoother>\n * ```\n \n @example\n * Combined hover and focus:\n * ```tsx\n * <MaxHeightSmoother isOverable isFocusable minHeight={80}>\n * <h4>Interactive Card</h4>\n * <p>Expands on both hover and keyboard focus.</p>\n * </MaxHeightSmoother>\n * ```\n \n ## Animation Strategies\n \n ### Strategy A — `grid-template-rows` (`minHeight === 0`)\n * Transitions between `grid-rows-[0fr]` and `grid-rows-[1fr]`.\n * Clean and performant; no fixed height ceiling required.\n * Requires `min-h-0` on the inner wrapper so the grid track can fully collapse.\n \n ### Strategy B — `max-height` via CSS custom properties (`minHeight > 0`)\n * When a visible preview floor is required, `grid-template-rows` produces a\n * \"dead time\" artifact: the track silently grows from 0 → minHeight before\n * anything visible happens, resulting in a perceived snap.\n \n `max-height` sidesteps this entirely — the transition starts from the\n * already-visible floor value, producing a single continuous expansion.\n \n The collapsed floor (`--mhs-collapsed`) and expanded ceiling\n * (`--mhs-expanded`) are injected as CSS variables via inline style,\n * NOT as `max-height` directly. This lets Tailwind own `max-height`\n * entirely, so `:hover` and `:focus-within` can override it freely\n * without fighting inline-style specificity.\n \n Both variables are consumer-overridable via CSS:\n * ```css\n * .my-container {\n * --mhs-collapsed: 80px;\n * --mhs-expanded: 1200px;\n * }\n * ```\n \n Trade-off: easing is applied over [minHeight → 3000px], not the real\n * content height. For typical content this is imperceptible. If pixel-perfect\n * easing is critical, use a JS-measured height with a controlled `isHidden`\n * prop and a `style={{ maxHeight }}` override instead.\n \n ## Interaction Modes\n \n 1. Controlled — Pass `isHidden` for external state control (e.g. accordion)\n * 2. Hover — Set `isOverable` for mouse hover expansion\n * 3. Focus — Set `isFocusable` for keyboard focus expansion\n * 4. Combined — Use `isOverable` and `isFocusable` together\n \n ## Accessibility\n \n - `role=\"button\"` and `tabIndex={0}` when `isFocusable` is true\n * - `aria-expanded` reflects the current disclosure state\n * - Focus expansion via `:focus-within` CSS pseudo-class\n * - `motion-reduce:transition-none` respects `prefers-reduced-motion`\n \n Note: because this component relies on CSS pseudo-classes for interaction,\n * keyboard toggle (Enter / Space) is not supported in uncontrolled mode.\n * For full keyboard toggle behaviour, manage `isHidden` externally and\n * wire an `onClick` / `onKeyDown` handler on the parent.\n \n ## Performance\n \n - Pure CSS animations — no JavaScript timers or DOM measurements\n * - No `'use client'` directive required\n * - Compatible with React Server Components and Next.js App Router\n * - GPU-accelerated transitions\n \n @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (`true` = collapsed, `false` = expanded)\n * @param props.isOverable - Enable hover-to-expand behaviour\n * @param props.isFocusable - Enable focus-to-expand behaviour with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for the collapsed state (default: 0)\n * @param props.className - Additional CSS classes\n * @param props.style - Inline styles (CSS variable overrides will be merged)\n \n @returns A smooth height-transitioning container with configurable interaction modes\n /\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n children,\n isHidden,\n className = '',\n isOverable = false,\n isFocusable = false,\n minHeight = 0,\n style,\n ...props\n}) => {\n const hasMinHeight = minHeight > 0;\n\n /\n True when the component should render visually collapsed.\n * In uncontrolled hover/focus mode we always start collapsed\n * so the CSS interaction selectors have something to open.\n /\n const isCollapsed =\n isHidden === true \|\|\n (isHidden === undefined && (isOverable \|\| isFocusable));\n\n return (\n <div\n role={isFocusable ? 'button' : undefined}\n tabIndex={isFocusable ? 0 : undefined}\n aria-expanded={isFocusable && isHidden !== undefined ? !isHidden : undefined}\n style={\n hasMinHeight\n ? ({\n '--mhs-collapsed': `${minHeight}px`,\n '--mhs-expanded': '3000px',\n ...style,\n } as CSSProperties)\n : style\n }\n className={cn(\n 'group/mhs relative w-full',\n\n // ── Strategy A: grid-template-rows (minHeight === 0) ─────────────────\n // overflow-hidden lives on the inner wrapper so box-shadows and outlines\n // on children are not clipped by the outer container.\n !hasMinHeight && [\n 'grid transition-[grid-template-rows] duration-500 ease-in-out motion-reduce:transition-none',\n isCollapsed ? 'grid-rows-[0fr]' : 'grid-rows-[1fr]',\n isOverable && 'hover:grid-rows-[1fr]',\n isFocusable && 'focus:grid-rows-[1fr] focus-within:grid-rows-[1fr]',\n ],\n\n // ── Strategy B: max-height via CSS variables (minHeight > 0) ─────────\n // `--mhs-collapsed` and `--mhs-expanded` are set via inline style above.\n // Tailwind owns `max-height` entirely so :hover/:focus-within override freely.\n hasMinHeight && [\n 'overflow-hidden transition-[max-height] duration-500 ease-in-out motion-reduce:transition-none',\n isCollapsed\n ? 'max-h-[var(--mhs-collapsed)]'\n : 'max-h-[var(--mhs-expanded)]',\n isOverable && 'hover:max-h-[var(--mhs-expanded)]',\n isFocusable && 'focus-within:max-h-[var(--mhs-expanded)]',\n ],\n\n className,\n )}\n {...props}\n >\n {/\n * Inner wrapper:\n * Strategy A — `min-h-0` + `overflow-hidden` lets the grid track\n * collapse to 0 and clips content during animation.\n * Strategy B — `min-h-[var(--mhs-collapsed)]` provides the visible\n * floor via the same CSS variable as the container.\n */}\n <div\n className={cn(\n 'overflow-hidden',\n !hasMinHeight && 'min-h-0',\n hasMinHeight && 'min-h-[var(--mhs-collapsed)]',\n )}\n >\n {children}\n </div>\n </div>\n );\n};"],"mappings":"gFA+IA,MAAa,GAAiD,CAC5D,WACA,WACA,YAAY,GACZ,aAAa,GACb,cAAc,GACd,YAAY,EACZ,QACA,GAAG,KACC,CACJ,IAAM,EAAe,EAAY,EAO3B,EACJ,IAAa,IACZ,IAAa,IAAA,KAAc,GAAc,GAE5C,OACE,EAAC,MAAD,CACE,KAAM,EAAc,SAAW,IAAA,GAC/B,SAAU,EAAc,EAAI,IAAA,GAC5B,gBAAe,GAAe,IAAa,IAAA,GAAY,CAAC,EAAW,IAAA,GACnE,MACE,EACK,CACC,kBAAmB,GAAG,EAAU,IAChC,iBAAkB,SAClB,GAAG,EACJ,CACD,EAEN,UAAW,EACT,4BAKA,CAAC,GAAgB,CACf,8FACA,EAAc,kBAAoB,kBAClC,GAAc,wBACd,GAAe,qDAChB,CAKD,GAAgB,CACd,iGACA,EACI,+BACA,8BACJ,GAAc,oCACd,GAAe,2CAChB,CAED,EACD,CACD,GAAI,WASJ,EAAC,MAAD,CACE,UAAW,EACT,kBACA,CAAC,GAAgB,UACjB,GAAgB,+BACjB,CAEA,WACG,CAAA,CACF,CAAA"}

package/dist/esm/components/Modal/Modal.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{useGetElementOrWindow as t}from"../../hooks/useGetElementOrWindow.mjs";import{useScrollBlockage as n}from"../../hooks/useScrollBlockage/index.mjs";import{Container as r}from"../Container/index.mjs";import{Button as i,ButtonColor as a,ButtonSize as o,ButtonVariant as s}from"../Button/Button.mjs";import{H3 as c}from"../Headers/index.mjs";import{useEffect as l}from"react";import{cva as u}from"class-variance-authority";import{X as d}from"lucide-react";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{motion as h}from"framer-motion";import{createPortal as g}from"react-dom";let _=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.UNSET=`unset`,e}({});const v=u(`flex cursor-default flex-col overflow-hidden shadow-sm`,{variants:{size:{sm:`h-auto max-h-[30vh] w-[95vw] max-w-xl`,md:`h-auto max-h-[50vh] w-[95vw] max-w-xl`,lg:`h-auto max-h-[70vh] w-[95vw] max-w-4xl`,xl:`h-auto max-h-[95vh] w-[95vw] max-w-6xl`,unset:`h-auto max-h-[95vh] w-[95vw]`}},defaultVariants:{size:`unset`}}),y={none:`p-0`,sm:`px-2 py-4`,md:`px-4 py-6`,lg:`px-6 py-8`,xl:`px-8 py-10`,"2xl":`px-10 py-12`},b=h.create(r),x=({children:r,isOpen:u,container:x,onClose:S,hasCloseButton:C=!1,title:w,size:T=_.MD,className:E,isScrollable:D=!1,disableScroll:O=!0,padding:k=`none`,...A})=>{let j=t(x);if(n({key:`modal`,disableScroll:u&&O}),l(()=>{let e=e=>{e.key===`Escape`&&u&&S&&S()};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[u,S]),!j)return p(f,{});let M=!!w,N=y[k||`none`];return g(p(h.div,{className:`invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur`,animate:u?`visible`:`invisible`,variants:{visible:{opacity:1,visibility:`visible`,transition:{duration:.1,when:`beforeChildren`}},invisible:{opacity:0,visibility:`hidden`,transition:{duration:.1,when:`afterChildren`}}},onClick:e=>{e.stopPropagation(),S?.()},"aria-hidden":!u,children:m(b,{onClick:e=>e.stopPropagation(),initial:{scale:u?.5:1},animate:{scale:u?1:.5},transition:{duration:.3},className:v({size:T,className:E}),role:`dialog`,"aria-modal":!0,roundedSize:`4xl`,padding:`none`,...A,children:[m(`div`,{className:e(`relative flex-none px-4 pt-4`,C&&M?`flex items-start`:C?`flex justify-end`:M?`items-center`:`hidden`),children:[M&&p(c,{className:`mb-2 ml-1 flex items-center justify-center font-bold text-lg`,children:w}),C&&p(i,{variant:s.HOVERABLE,color:a.TEXT,label:`Close modal`,className:`ml-auto`,onClick:e=>{e.stopPropagation(),S?.()},Icon:d,size:o.ICON_MD})]}),p(`div`,{className:e(`flex min-h-0 w-full flex-1 flex-col`,D===!0&&`overflow-auto`,D===`y`&&`overflow-y-auto overflow-x-hidden`,D===`x`&&`overflow-x-auto overflow-y-hidden`,!D&&`overflow-visible`),children:p(`div`,{className:e(`flex h-full w-full flex-1 flex-col`,N),children:r})})]})}),j)};export{x as Modal,_ as ModalSize};
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Container as t}from"../Container/index.mjs";import{Button as n,ButtonColor as r,ButtonSize as i,ButtonVariant as a}from"../Button/Button.mjs";import{H3 as o}from"../Headers/index.mjs";import{useGetElementOrWindow as s}from"../../hooks/useGetElementOrWindow.mjs";import{useScrollBlockage as c}from"../../hooks/useScrollBlockage/index.mjs";import{useEffect as l}from"react";import{cva as u}from"class-variance-authority";import{X as d}from"lucide-react";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{motion as h}from"framer-motion";import{createPortal as g}from"react-dom";let _=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.UNSET=`unset`,e}({});const v=u(`flex cursor-default flex-col overflow-hidden shadow-sm`,{variants:{size:{sm:`h-auto max-h-[30vh] w-[95vw] max-w-xl`,md:`h-auto max-h-[50vh] w-[95vw] max-w-xl`,lg:`h-auto max-h-[70vh] w-[95vw] max-w-4xl`,xl:`h-auto max-h-[95vh] w-[95vw] max-w-6xl`,unset:`h-auto max-h-[95vh] w-[95vw]`}},defaultVariants:{size:`unset`}}),y={none:`p-0`,sm:`px-2 py-4`,md:`px-4 py-6`,lg:`px-6 py-8`,xl:`px-8 py-10`,"2xl":`px-10 py-12`},b=h.create(t),x=({children:t,isOpen:u,container:x,onClose:S,hasCloseButton:C=!1,title:w,size:T=_.MD,className:E,isScrollable:D=!1,disableScroll:O=!0,padding:k=`none`,...A})=>{let j=s(x);if(c({key:`modal`,disableScroll:u&&O}),l(()=>{let e=e=>{e.key===`Escape`&&u&&S&&S()};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[u,S]),!j)return p(f,{});let M=!!w,N=y[k||`none`];return g(p(h.div,{className:`invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur`,animate:u?`visible`:`invisible`,variants:{visible:{opacity:1,visibility:`visible`,transition:{duration:.1,when:`beforeChildren`}},invisible:{opacity:0,visibility:`hidden`,transition:{duration:.1,when:`afterChildren`}}},onClick:e=>{e.stopPropagation(),S?.()},"aria-hidden":!u,children:m(b,{onClick:e=>e.stopPropagation(),initial:{scale:u?.5:1},animate:{scale:u?1:.5},transition:{duration:.3},className:v({size:T,className:E}),role:`dialog`,"aria-modal":!0,roundedSize:`4xl`,padding:`none`,...A,children:[m(`div`,{className:e(`relative flex-none px-4 pt-4`,C&&M?`flex items-start`:C?`flex justify-end`:M?`items-center`:`hidden`),children:[M&&p(o,{className:`mb-2 ml-1 flex items-center justify-center font-bold text-lg`,children:w}),C&&p(n,{variant:a.HOVERABLE,color:r.TEXT,label:`Close modal`,className:`ml-auto`,onClick:e=>{e.stopPropagation(),S?.()},Icon:d,size:i.ICON_MD})]}),p(`div`,{className:e(`flex min-h-0 w-full flex-1 flex-col`,D===!0&&`overflow-auto`,D===`y`&&`overflow-y-auto overflow-x-hidden`,D===`x`&&`overflow-x-auto overflow-y-hidden`,!D&&`overflow-visible`),children:p(`div`,{className:e(`flex h-full w-full flex-1 flex-col`,N),children:t})})]})}),j)};export{x as Modal,_ as ModalSize};
 //# sourceMappingURL=Modal.mjs.map

package/dist/esm/components/Navbar/MobileNavbar.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{useScrollBlockage as t}from"../../hooks/useScrollBlockage/index.mjs";import{useScrollDetection as n}from"../../hooks/useScrollDetection.mjs";import{MaxHeightSmoother as r}from"../MaxHeightSmoother/index.mjs";import{Burger as i}from"./Burger.mjs";import{useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{m as l}from"framer-motion";const u={open:{transition:{staggerChildren:.07,delayChildren:.2}},closed:{transition:{staggerChildren:.05,staggerDirection:-1}}},d=`bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur`,f=({logo:f,topChildren:p,topSections:m=[],bottomChildren:h,bottomSections:g=[],rightItems:_,rollable:v=!0})=>{let[y,b]=o(!1),[x,S]=o(!1),C=a(null);t({disableScroll:v,key:`mobile_nav`}),n({onScrollUp:()=>b(!1),onScrollDown:()=>b(!0),isEnabled:!x&&v});let w=y?0:C.current?.clientHeight??0,T=m.length+g.length>0;return c(`nav`,{className:e(d,`sticky top-0 z-50 flex w-screen flex-col transition`,y?`-translate-y-full`:`translate-y-0`),id:`mobile-menu`,children:[c(`div`,{className:`flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]`,ref:C,children:[f,c(`div`,{className:`flex w-full flex-1 items-center justify-end gap-6`,children:[s(`div`,{className:`flex w-full items-center justify-end gap-1`,children:_}),T&&s(i,{isActive:x,onClick:()=>S(e=>!e)})]})]}),s(`div`,{className:e(d,`absolute bottom-0 left-0 w-full translate-y-full`),children:s(r,{isHidden:!x,children:c(l.div,{className:`flex w-full flex-col pt-10 pb-[20%] text-lg text-text tracking-wide`,onClick:()=>S(!1),animate:x?`open`:`closed`,variants:u,style:{height:`calc(100vh - ${w}px)`},children:[p,c(`div`,{className:`flex h-full flex-col justify-center`,children:[m,g]}),s(`div`,{className:`m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3`,children:h})]})})})]})};export{f as MobileNavbar};
+"use client";import{cn as e}from"../../utils/cn.mjs";import{MaxHeightSmoother as t}from"../MaxHeightSmoother/index.mjs";import{useScrollBlockage as n}from"../../hooks/useScrollBlockage/index.mjs";import{useScrollDetection as r}from"../../hooks/useScrollDetection.mjs";import{Burger as i}from"./Burger.mjs";import{useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{m as l}from"framer-motion";const u={open:{transition:{staggerChildren:.07,delayChildren:.2}},closed:{transition:{staggerChildren:.05,staggerDirection:-1}}},d=`bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur`,f=({logo:f,topChildren:p,topSections:m=[],bottomChildren:h,bottomSections:g=[],rightItems:_,rollable:v=!0})=>{let[y,b]=o(!1),[x,S]=o(!1),C=a(null);n({disableScroll:v,key:`mobile_nav`}),r({onScrollUp:()=>b(!1),onScrollDown:()=>b(!0),isEnabled:!x&&v});let w=y?0:C.current?.clientHeight??0,T=m.length+g.length>0;return c(`nav`,{className:e(d,`sticky top-0 z-50 flex w-screen flex-col transition`,y?`-translate-y-full`:`translate-y-0`),id:`mobile-menu`,children:[c(`div`,{className:`flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]`,ref:C,children:[f,c(`div`,{className:`flex w-full flex-1 items-center justify-end gap-6`,children:[s(`div`,{className:`flex w-full items-center justify-end gap-1`,children:_}),T&&s(i,{isActive:x,onClick:()=>S(e=>!e)})]})]}),s(`div`,{className:e(d,`absolute bottom-0 left-0 w-full translate-y-full`),children:s(t,{isHidden:!x,children:c(l.div,{className:`flex w-full flex-col pt-10 pb-[20%] text-lg text-text tracking-wide`,onClick:()=>S(!1),animate:x?`open`:`closed`,variants:u,style:{height:`calc(100vh - ${w}px)`},children:[p,c(`div`,{className:`flex h-full flex-col justify-center`,children:[m,g]}),s(`div`,{className:`m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3`,children:h})]})})})]})};export{f as MobileNavbar};
 //# sourceMappingURL=MobileNavbar.mjs.map

package/dist/esm/components/Pagination/Pagination.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{useItemSelector as t}from"../../hooks/useItemSelector.mjs";import{Button as n,ButtonColor as r,ButtonSize as i,ButtonVariant as a}from"../Button/Button.mjs";import{useEffect as o,useRef as s}from"react";import{cva as c}from"class-variance-authority";import{ChevronLeft as l,ChevronRight as u,MoreHorizontal as d}from"lucide-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=c(`flex items-center justify-center gap-1`,{variants:{size:{sm:`gap-1`,md:`gap-2`,lg:`gap-3`},color:{text:`background-text`,primary:`background-primary`,secondary:`background-secondary`,neutral:`background-neutral`,destructive:`background-destructive`},variant:{default:``,bordered:`rounded-lg border border-border p-2`,ghost:`bg-transparent`}},defaultVariants:{size:`md`,variant:`default`}});let h=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e}({}),g=function(e){return e.DEFAULT=`default`,e.BORDERED=`bordered`,e.GHOST=`ghost`,e}({});const _=(e,t,n)=>{if(t<=n)return Array.from({length:t},(e,t)=>t+1);let r=[],i=Math.floor(n/2);if(r.push(1),e<=i+2){for(let e=2;e<=Math.min(n-1,t-1);e++)r.push(e);t>n&&r.push(`ellipsis`),t>1&&r.push(t)}else if(e>=t-i-1){t>n&&r.push(`ellipsis`);for(let e=Math.max(2,t-n+2);e<=t;e++)r.push(e)}else{r.push(`ellipsis`);let n=e-i,a=e+i;for(let e=n;e<=a;e++)r.push(e);r.push(`ellipsis`),r.push(t)}return r},v=e=>e?.getAttribute(`aria-current`)===`true`,y=e=>e===h.SM?i.ICON_SM:e===h.LG?i.ICON_LG:i.ICON_MD,b=e=>f(`div`,{className:`absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/10 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none`,...e}),x=({currentPage:i,totalPages:c,onPageChange:x,showFirstLast:S=!1,showPrevNext:C=!0,maxVisiblePages:w=5,disabled:T=!1,size:E=h.MD,variant:D=g.DEFAULT,color:O=r.TEXT,className:k,...A})=>{let j=_(i,c,w),M=y(E),N=i===1,P=i===c,F=s([]),I=s(null),{choiceIndicatorPosition:L,calculatePosition:R}=t(F,{selector:v,isHoverable:!0});if(o(()=>{let e=setTimeout(()=>{R()},300);return()=>clearTimeout(e)},[i,R]),c<=1)return null;let z=e=>{!T&&e>=1&&e<=c&&e!==i&&x(e)};return f(`div`,{className:e(m({size:E,variant:D}),k),...A,children:p(`div`,{className:`relative flex items-center gap-1`,children:[L&&f(b,{style:L,ref:I}),C&&f(n,{variant:a.OUTLINE,size:M,color:r.TEXT,onClick:()=>z(i-1),disabled:T||N,label:`Go to previous page`,Icon:l,ref:e=>{e&&(F.current[0]=e)},className:`min-w-0 px-2`}),f(`div`,{className:`flex items-center gap-1 max-md:gap-0.5`,children:j.map((t,o)=>{if(t===`ellipsis`)return f(`div`,{className:`flex h-8 min-w-8 items-center justify-center px-1`,children:f(d,{className:`h-4 w-4 text-muted-foreground`})},`ellipsis-${t}-${o}`);let s=t===i,c=(C?1:0)+j.slice(0,o).filter(e=>e!==`ellipsis`).length;return f(n,{variant:s?a.DEFAULT:a.OUTLINE,size:M,color:r.TEXT,onClick:()=>z(t),disabled:T,label:`Go to page ${t}`,"aria-current":s?`true`:`false`,ref:e=>{e&&(F.current[c]=e)},className:e(`flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm`,E===`sm`&&`h-6 w-6 text-xs`,E===`lg`&&`h-10 w-10 text-base`,s&&`font-semibold`),children:t},t)})}),C&&f(n,{variant:a.OUTLINE,size:M,color:r.TEXT,onClick:()=>z(i+1),disabled:T||P,label:`Go to next page`,Icon:u,ref:e=>{let t=(C?1:0)+j.filter(e=>e!==`ellipsis`).length;e&&(F.current[t]=e)},className:`min-w-0 px-2`})]})})};export{x as Pagination,h as PaginationSize,g as PaginationVariant,m as paginationVariants};
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonVariant as i}from"../Button/Button.mjs";import{useItemSelector as a}from"../../hooks/useItemSelector.mjs";import{useEffect as o,useRef as s}from"react";import{cva as c}from"class-variance-authority";import{ChevronLeft as l,ChevronRight as u,MoreHorizontal as d}from"lucide-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=c(`flex items-center justify-center gap-1`,{variants:{size:{sm:`gap-1`,md:`gap-2`,lg:`gap-3`},color:{text:`background-text`,primary:`background-primary`,secondary:`background-secondary`,neutral:`background-neutral`,destructive:`background-destructive`},variant:{default:``,bordered:`rounded-lg border border-border p-2`,ghost:`bg-transparent`}},defaultVariants:{size:`md`,variant:`default`}});let h=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e}({}),g=function(e){return e.DEFAULT=`default`,e.BORDERED=`bordered`,e.GHOST=`ghost`,e}({});const _=(e,t,n)=>{if(t<=n)return Array.from({length:t},(e,t)=>t+1);let r=[],i=Math.floor(n/2);if(r.push(1),e<=i+2){for(let e=2;e<=Math.min(n-1,t-1);e++)r.push(e);t>n&&r.push(`ellipsis`),t>1&&r.push(t)}else if(e>=t-i-1){t>n&&r.push(`ellipsis`);for(let e=Math.max(2,t-n+2);e<=t;e++)r.push(e)}else{r.push(`ellipsis`);let n=e-i,a=e+i;for(let e=n;e<=a;e++)r.push(e);r.push(`ellipsis`),r.push(t)}return r},v=e=>e?.getAttribute(`aria-current`)===`true`,y=e=>e===h.SM?r.ICON_SM:e===h.LG?r.ICON_LG:r.ICON_MD,b=e=>f(`div`,{className:`absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/10 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none`,...e}),x=({currentPage:r,totalPages:c,onPageChange:x,showFirstLast:S=!1,showPrevNext:C=!0,maxVisiblePages:w=5,disabled:T=!1,size:E=h.MD,variant:D=g.DEFAULT,color:O=n.TEXT,className:k,...A})=>{let j=_(r,c,w),M=y(E),N=r===1,P=r===c,F=s([]),I=s(null),{choiceIndicatorPosition:L,calculatePosition:R}=a(F,{selector:v,isHoverable:!0});if(o(()=>{let e=setTimeout(()=>{R()},300);return()=>clearTimeout(e)},[r,R]),c<=1)return null;let z=e=>{!T&&e>=1&&e<=c&&e!==r&&x(e)};return f(`div`,{className:e(m({size:E,variant:D}),k),...A,children:p(`div`,{className:`relative flex items-center gap-1`,children:[L&&f(b,{style:L,ref:I}),C&&f(t,{variant:i.OUTLINE,size:M,color:n.TEXT,onClick:()=>z(r-1),disabled:T||N,label:`Go to previous page`,Icon:l,ref:e=>{e&&(F.current[0]=e)},className:`min-w-0 px-2`}),f(`div`,{className:`flex items-center gap-1 max-md:gap-0.5`,children:j.map((a,o)=>{if(a===`ellipsis`)return f(`div`,{className:`flex h-8 min-w-8 items-center justify-center px-1`,children:f(d,{className:`h-4 w-4 text-muted-foreground`})},`ellipsis-${a}-${o}`);let s=a===r,c=(C?1:0)+j.slice(0,o).filter(e=>e!==`ellipsis`).length;return f(t,{variant:s?i.DEFAULT:i.OUTLINE,size:M,color:n.TEXT,onClick:()=>z(a),disabled:T,label:`Go to page ${a}`,"aria-current":s?`true`:`false`,ref:e=>{e&&(F.current[c]=e)},className:e(`flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm`,E===`sm`&&`h-6 w-6 text-xs`,E===`lg`&&`h-10 w-10 text-base`,s&&`font-semibold`),children:a},a)})}),C&&f(t,{variant:i.OUTLINE,size:M,color:n.TEXT,onClick:()=>z(r+1),disabled:T||P,label:`Go to next page`,Icon:u,ref:e=>{let t=(C?1:0)+j.filter(e=>e!==`ellipsis`).length;e&&(F.current[t]=e)},className:`min-w-0 px-2`})]})})};export{x as Pagination,h as PaginationSize,g as PaginationVariant,m as paginationVariants};
 //# sourceMappingURL=Pagination.mjs.map

package/dist/esm/components/RightDrawer/RightDrawer.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{useGetElementOrWindow as e}from"../../hooks/useGetElementOrWindow.mjs";import{useDevice as t}from"../../hooks/useDevice.mjs";import{useScrollBlockage as n}from"../../hooks/useScrollBlockage/index.mjs";import{Container as r}from"../Container/index.mjs";import{Button as i,ButtonColor as a,ButtonSize as o,ButtonVariant as s}from"../Button/Button.mjs";import{KeyboardShortcut as c}from"../KeyboardShortcut/KeyboardShortcut.mjs";import{Popover as l}from"../Popover/dynamic.mjs";import{MaxWidthSmoother as u}from"../MaxWidthSmoother/index.mjs";import{isElementAtTopAndNotCovered as d}from"./isElementAtTopAndNotCovered.mjs";import{useRightDrawer as f}from"./useRightDrawer.mjs";import{useEffect as p,useRef as m}from"react";import{ChevronLeft as h,X as g}from"lucide-react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{useIntlayer as b}from"react-intlayer";import{createPortal as x}from"react-dom";const S=({title:S,identifier:C,children:w,header:T,footer:E,closeOnOutsideClick:D=!0,backButton:O,isOpen:k,onClose:A,container:j})=>{let M=b(`right-drawer`),{isMobile:N}=t(`md`),P=m(null),F=m(null),I=e(j),{open:L,close:R,isOpen:z}=f(),B=z(C),V=B;n({disableScroll:V,key:C?`right_drawer_${C}`:`right_drawer`}),p(()=>{let e=e=>{try{if(!P.current)return;let t=V&&D,n=e.target&&!P.current.contains(e.target),r=d(P.current);(t&&n&&r||!e.target)&&(R(C),A?.())}catch{R(C),A?.()}};return window.addEventListener(`mousedown`,e),()=>window.removeEventListener(`mousedown`,e)},[V,R,A,D,C]);let H=m(A);return p(()=>{H.current=A},[A]),p(()=>{k!==void 0&&k!==B&&(k?L(C):(R(C),H.current?.()))},[k,B,C,L,R]),I?x(v(`div`,{className:`fixed top-0 right-0 z-50 flex h-full justify-end`,children:v(u,{isHidden:!V,align:`right`,children:y(r,{className:`relative flex h-screen w-screen flex-col text-text md:w-[400px]`,ref:P,roundedSize:`none`,children:[y(`div`,{className:`flex shrink-0 flex-col gap-3 px-6 pt-6`,children:[y(`div`,{className:`flex justify-between gap-3`,children:[v(`div`,{children:O&&v(i,{variant:s.HOVERABLE,color:a.TEXT,label:O.text??M.goBack.value,onClick:O.onBack,Icon:h,children:O?.text})}),v(`div`,{children:y(l,{identifier:`close-drawer`,children:[v(i,{variant:s.HOVERABLE,color:a.TEXT,label:`Close`,className:`ml-auto`,onClick:()=>{R(C),A?.()},Icon:g,size:o.ICON_MD}),v(l.Detail,{identifier:`close-drawer`,children:y(`div`,{className:`flex items-center gap-2 p-2`,children:[v(`span`,{className:`whitespace-nowrap text-neutral text-xs`,children:M.closeDrawer}),v(c,{shortcut:`Escape`,size:`sm`,onTriggered:()=>{R(C),A?.()}})]})})]})})]}),S&&v(`h2`,{className:`flex items-center justify-center font-bold text-lg`,children:S}),T]}),v(`div`,{className:`flex min-h-0 flex-1 flex-col overflow-y-auto p-2`,children:v(`div`,{className:`flex flex-1 flex-col outline-none`,onClick:e=>{e.target===e.currentTarget&&N&&(R(C),A?.())},onKeyDown:e=>{e.target===e.currentTarget&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),N&&(R(C),A?.()))},ref:F,role:`button`,tabIndex:0,children:w})}),E&&v(`div`,{className:`shrink-0`,children:E})]})})}),I):v(_,{})};export{S as RightDrawer};
+"use client";import{Container as e}from"../Container/index.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonVariant as i}from"../Button/Button.mjs";import{useDevice as a}from"../../hooks/useDevice.mjs";import{KeyboardShortcut as o}from"../KeyboardShortcut/KeyboardShortcut.mjs";import{Popover as s}from"../Popover/dynamic.mjs";import{useGetElementOrWindow as c}from"../../hooks/useGetElementOrWindow.mjs";import{useScrollBlockage as l}from"../../hooks/useScrollBlockage/index.mjs";import{MaxWidthSmoother as u}from"../MaxWidthSmoother/index.mjs";import{isElementAtTopAndNotCovered as d}from"./isElementAtTopAndNotCovered.mjs";import{useRightDrawer as f}from"./useRightDrawer.mjs";import{useEffect as p,useRef as m}from"react";import{ChevronLeft as h,X as g}from"lucide-react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{useIntlayer as b}from"react-intlayer";import{createPortal as x}from"react-dom";const S=({title:S,identifier:C,children:w,header:T,footer:E,closeOnOutsideClick:D=!0,backButton:O,isOpen:k,onClose:A,container:j})=>{let M=b(`right-drawer`),{isMobile:N}=a(`md`),P=m(null),F=m(null),I=c(j),{open:L,close:R,isOpen:z}=f(),B=z(C),V=B;l({disableScroll:V,key:C?`right_drawer_${C}`:`right_drawer`}),p(()=>{let e=e=>{try{if(!P.current)return;let t=V&&D,n=e.target&&!P.current.contains(e.target),r=d(P.current);(t&&n&&r||!e.target)&&(R(C),A?.())}catch{R(C),A?.()}};return window.addEventListener(`mousedown`,e),()=>window.removeEventListener(`mousedown`,e)},[V,R,A,D,C]);let H=m(A);return p(()=>{H.current=A},[A]),p(()=>{k!==void 0&&k!==B&&(k?L(C):(R(C),H.current?.()))},[k,B,C,L,R]),I?x(v(`div`,{className:`fixed top-0 right-0 z-50 flex h-full justify-end`,children:v(u,{isHidden:!V,align:`right`,children:y(e,{className:`relative flex h-screen w-screen flex-col text-text md:w-[400px]`,ref:P,roundedSize:`none`,children:[y(`div`,{className:`flex shrink-0 flex-col gap-3 px-6 pt-6`,children:[y(`div`,{className:`flex justify-between gap-3`,children:[v(`div`,{children:O&&v(t,{variant:i.HOVERABLE,color:n.TEXT,label:O.text??M.goBack.value,onClick:O.onBack,Icon:h,children:O?.text})}),v(`div`,{children:y(s,{identifier:`close-drawer`,children:[v(t,{variant:i.HOVERABLE,color:n.TEXT,label:`Close`,className:`ml-auto`,onClick:()=>{R(C),A?.()},Icon:g,size:r.ICON_MD}),v(s.Detail,{identifier:`close-drawer`,children:y(`div`,{className:`flex items-center gap-2 p-2`,children:[v(`span`,{className:`whitespace-nowrap text-neutral text-xs`,children:M.closeDrawer}),v(o,{shortcut:`Escape`,size:`sm`,onTriggered:()=>{R(C),A?.()}})]})})]})})]}),S&&v(`h2`,{className:`flex items-center justify-center font-bold text-lg`,children:S}),T]}),v(`div`,{className:`flex min-h-0 flex-1 flex-col overflow-y-auto p-2`,children:v(`div`,{className:`flex flex-1 flex-col outline-none`,onClick:e=>{e.target===e.currentTarget&&N&&(R(C),A?.())},onKeyDown:e=>{e.target===e.currentTarget&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),N&&(R(C),A?.()))},ref:F,role:`button`,tabIndex:0,children:w})}),E&&v(`div`,{className:`shrink-0`,children:E})]})})}),I):v(_,{})};export{S as RightDrawer};
 //# sourceMappingURL=RightDrawer.mjs.map