@intlayer/design-system 8.3.1 → 8.3.3

package/dist/esm/components/DictionaryEditor/NodeWrapper/NestedObjectWrapper.mjs

@@ -1,2 +1,2 @@
-import{ItemLayout as e}from"../ItemLayout.mjs";import{NodeWrapper as t,traceKeys as n}from"./index.mjs";import{memo as r,useMemo as i}from"react";import{jsx as a}from"react/jsx-runtime";import{camelCaseToSentence as o}from"@intlayer/config/client";import{NodeType as s}from"@intlayer/types/nodeType";import{isSameKeyPath as c}from"@intlayer/core/utils";const l=r(r=>{let{keyPath:l,section:u,focusedKeyPath:d=[],onFocusKeyPath:f}=r;return i(()=>Object.keys(u??{}).filter(e=>!n.includes(e)),[u]).map(n=>{let i={key:n,type:s.Object},p=[...l,i],m=c(p,d);return a(e,{level:l.length,title:o(n),description:``,isSelected:m,onClick:e=>{e.stopPropagation(),f(m?[]:p)},children:a(t,{...r,keyPath:p,section:u[n]})},n)})});export{l as NestedObjectWrapper};
+import{ItemLayout as e}from"../ItemLayout.mjs";import{NodeWrapper as t,traceKeys as n}from"./index.mjs";import{camelCaseToSentence as r}from"@intlayer/config/client";import{memo as i,useMemo as a}from"react";import{jsx as o}from"react/jsx-runtime";import{NodeType as s}from"@intlayer/types/nodeType";import{isSameKeyPath as c}from"@intlayer/core/utils";const l=i(i=>{let{keyPath:l,section:u,focusedKeyPath:d=[],onFocusKeyPath:f}=i;return a(()=>Object.keys(u??{}).filter(e=>!n.includes(e)),[u]).map(n=>{let a={key:n,type:s.Object},p=[...l,a],m=c(p,d);return o(e,{level:l.length,title:r(n),description:``,isSelected:m,onClick:e=>{e.stopPropagation(),f(m?[]:p)},children:o(t,{...i,keyPath:p,section:u[n]})},n)})});export{l as NestedObjectWrapper};
 //# sourceMappingURL=NestedObjectWrapper.mjs.map

package/dist/esm/components/DictionaryFieldEditor/KeyPathBreadcrumb.mjs

@@ -1,2 +1,2 @@
-import{Breadcrumb as e}from"../Breadcrumb/index.mjs";import{jsx as t}from"react/jsx-runtime";import{camelCaseToSentence as n}from"@intlayer/config/client";const r=({keyPath:r,dictionaryKey:i,onClickKeyPath:a,locale:o,color:s,showDictionaryKey:c=!0})=>t(e,{links:[...c?[{text:n(i),onClick:a?()=>a([]):void 0}]:[],...r.map((e,t)=>({onClick:a?()=>a?.(r.slice(0,t+1)):void 0,text:e.key?.toString()??``}))],locale:o,elementType:`location`,color:s});export{r as KeyPathBreadcrumb};
+import{Breadcrumb as e}from"../Breadcrumb/index.mjs";import{camelCaseToSentence as t}from"@intlayer/config/client";import{jsx as n}from"react/jsx-runtime";const r=({keyPath:r,dictionaryKey:i,onClickKeyPath:a,locale:o,color:s,showDictionaryKey:c=!0})=>n(e,{links:[...c?[{text:t(i),onClick:a?()=>a([]):void 0}]:[],...r.map((e,t)=>({onClick:a?()=>a?.(r.slice(0,t+1)):void 0,text:e.key?.toString()??``}))],locale:o,elementType:`location`,color:s});export{r as KeyPathBreadcrumb};
 //# sourceMappingURL=KeyPathBreadcrumb.mjs.map

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

@@ -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{ChevronRight as o,Plus as s}from"lucide-react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import d from"@intlayer/config/built";import{camelCaseToSentence as f}from"@intlayer/config/client";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}=d.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?l(e,{label:M.label.value,variant:r.HOVERABLE,color:t.TEXT,className:`w-full`,onClick:()=>k(w),IconRight:o,children:f(w[w.length-1].key)}):typeof D==`object`?N===b.ReactNode?l(c,{children:`React Node`}):N===b.Translation?l(`div`,{className:`flex flex-col justify-between gap-2`,children:E.map(e=>l(C,{keyPath:[...w,{type:b.Translation,key:e}],section:S,dictionary:T},e))}):N===b.Enumeration||N===b.Condition?l(`div`,{className:`flex flex-col justify-between gap-2`,children:Object.keys(D[N]).map(e=>l(C,{keyPath:[...w,{type:N,key:e}],section:S,dictionary:T},e))}):N===b.Array?u(`div`,{className:`flex flex-col justify-between gap-2`,children:[D.map((n,s)=>{let c=[...w,{type:b.Array,key:s}];return a(n)?u(e,{label:`${M.label.value} ${s}`,variant:r.HOVERABLE,color:t.TEXT,className:`w-full`,onClick:()=>k(c),IconRight:o,isActive:P(c),children:[`Item `,s]},JSON.stringify(c)):l(i,{label:`${M.label.value} ${s}`,header:`Item ${s}`,isActive:P(c),onClick:()=>k(c),children:l(`div`,{className:`mt-2 flex w-full max-w-full`,children:l(`div`,{className:`flex-1 pl-10`,children:l(C,{keyPath:c,section:S,dictionary:T})})})},JSON.stringify(c))}),l(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:s,children:j.text})]}):typeof D.nodeType==`string`?l(C,{keyPath:[...w,{type:D.nodeType}],section:S,dictionary:T}):l(`div`,{className:`flex w-full max-w-full flex-col justify-between gap-2`,children:Object.keys(D).map(n=>{let s=[...w,{type:b.Object,key:n}];return a(_(S,s))?l(e,{label:`${M.label.value} ${n}`,isActive:P(s),variant:r.HOVERABLE,color:t.TEXT,className:`w-full`,onClick:()=>k(s),IconRight:o,children:f(n)},n):l(i,{label:`${M.label.value} ${n}`,isActive:P(s),onClick:()=>k(s),header:f(n),children:l(`div`,{className:`mt-2 flex w-full max-w-full`,children:l(`div`,{className:`flex-1 pl-10`,children:l(C,{keyPath:s,section:S,dictionary:T})})})},n)})}):u(c,{children:[`Error loading section --`,N,`--`,JSON.stringify(D),`--`,JSON.stringify(w)]}):l(c,{})};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/StructureView/StructureView.mjs

@@ -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{Plus as c,Trash as l}from"lucide-react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import{camelCaseToSentence as p}from"@intlayer/config/client";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 f(`div`,{className:`flex w-full flex-col gap-1`,children:[d(s,{section:e,onValueChange:e=>r(v(e,i))}),d(C,{section:o,keyPath:u,dictionaryLocalId:t,onNodeTypeChange:c})]})}if(a===x.Array){let l=[...n,{type:a,key:0}];return f(`div`,{className:`flex w-full flex-col gap-1`,children:[d(s,{section:e,onValueChange:e=>r(v(e,i))}),d(C,{section:o,keyPath:l,dictionaryLocalId:t,onNodeTypeChange:c})]})}return a===x.Object?f(u,{children:[d(s,{section:e,onValueChange:e=>r(v(e,i))}),d(`div`,{className:`mt-6 ml-10`,children:d(E,{keyPath:n,section:e,dictionaryLocalId:t})})]}):d(s,{section:e,onValueChange:e=>r(v(e,i))})},w=({sectionKey:s,section:c,keyPath:u,dictionaryLocalId:h})=>{let{focusedContent:v,setFocusedContentKeyPath:y}=_(),{renameEditedContent:b,addEditedContent:x}=g(),{titleInput:w,deleteButton:T}=m(`structure-view`),E=e=>{b(h,e,u);let t=u.slice(0,-1),n=u[u.length-1];y([...t,{...n,key:e}])};return d(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(u,v?.keyPath??[]),onClick:()=>y(u),children:f(`div`,{className:`flex w-full flex-col items-start justify-between gap-3`,children:[typeof s==`string`&&f(`div`,{className:`w-full`,children:[f(`div`,{className:`flex w-full items-center justify-between gap-10`,children:[d(o,{name:`key`,"aria-label":`Key`,placeholder:w.placeholder.value,defaultValue:s,onSave:e=>E(e),variant:a.INVISIBLE}),d(t,{label:T.label.value,variant:i.HOVERABLE,size:r.ICON_SM,color:n.TEXT,className:`translate-x-2`,Icon:l,onClick:()=>{x(h,void 0,u),y(u.slice(0,-1))}})]}),f(`span`,{className:`ml-3 text-neutral text-sm`,children:[`( `,p(s),` )`]})]}),d(C,{keyPath:u,dictionaryLocalId:h,section:c,onNodeTypeChange:e=>{x(h,e,u)}})]})})},T=({section:e,keyPath:a,dictionaryLocalId:o})=>{let{addNodeButton:s}=m(`structure-view`),{setFocusedContentKeyPath:l}=_(),{addEditedContent:u}=g();return!e||typeof e!=`object`?d(`div`,{children:`Not an object`}):f(`div`,{className:`flex flex-col gap-2 overflow-y-auto`,children:[d(`ul`,{className:`mr-auto flex flex-col gap-4`,children:Object.keys(e).map(t=>d(`li`,{className:`flex w-full`,children:d(w,{sectionKey:t,section:e?.[t],keyPath:[...a,{type:x.Object,key:t}],dictionaryLocalId:o})},`${JSON.stringify(a)}-object-${t}`))}),d(t,{label:s.label.value,variant:i.HOVERABLE,size:r.MD,color:n.TEXT,Icon:c,className:`flex-1`,onClick:()=>{let e=[...a,{type:x.Object,key:`newKey`}];u(o,``,e),l(e)},children:s.text})]})},E=({section:e,keyPath:t,dictionaryLocalId:n})=>!e||typeof e!=`object`||typeof e.nodeType==`string`?d(w,{sectionKey:`content`,section:e,keyPath:t,dictionaryLocalId:n}):d(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/ExpandCollapse/ExpandCollapse.mjs

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{MaxHeightSmoother as t}from"../MaxHeightSmoother/index.mjs";import{useEffect as n,useRef as r,useState as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{useIntlayer as s}from"react-intlayer";const c=({isRollable:c=!0,minHeight:l=700,children:u,className:d})=>{let[f,p]=i(0),[m,h]=i(!0),g=r(null),{expandCollapseContent:_}=s(`expand-collapse`),v=f>l;return n(()=>{let e=()=>{g.current&&p(g.current.scrollHeight)};return e(),window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[u]),c?v?o(`div`,{className:`w-full`,children:[a(t,{isHidden:m,minHeight:l,className:`w-full overflow-x-auto overflow-y-hidden`,children:a(`div`,{className:e(`grid min-h-0 w-full`,d),ref:g,children:u})}),v&&a(`button`,{className:e(`flex w-full cursor-pointer items-center justify-center`,`bg-gradient-to-t from-card/80 to-transparent px-3 py-2`,`text-md text-neutral-700 backdrop-blur`,`transition-all duration-300 hover:py-3`,`dark:text-neutral-400`),type:`button`,onClick:()=>h(e=>!e),children:_(m)})]}):a(`div`,{className:e(`grid min-h-0 w-full`,d),ref:g,children:u}):u};export{c as ExpandCollapse};
+"use client";import{cn as e}from"../../utils/cn.mjs";import{MaxHeightSmoother as t}from"../MaxHeightSmoother/index.mjs";import{useEffect as n,useRef as r,useState as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{useIntlayer as s}from"react-intlayer";const c=({isRollable:c=!0,minHeight:l=700,children:u,className:d})=>{let[f,p]=i(0),[m,h]=i(!0),g=r(null),{expandCollapseContent:_}=s(`expand-collapse`),v=f>l;return n(()=>{let e=()=>{g.current&&p(g.current.clientHeight)};return e(),window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[u]),c?v?o(t,{isHidden:m,minHeight:l,className:`w-full overflow-x-auto overflow-y-hidden`,children:[a(`div`,{className:e(`grid w-full`,d),ref:g,children:u}),a(`button`,{className:e(`absolute right-0 bottom-0 flex w-full cursor-pointer items-center justify-center rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent px-3 py-0.5 text-md text-neutral-700 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all duration-300 hover:py-1 dark:text-neutral-400`,m?`w-full`:`w-32`),type:`button`,onClick:()=>h(e=>!e),children:_(m)})]}):a(`div`,{className:e(`grid w-full`,d),ref:g,children:u}):u};export{c as ExpandCollapse};
 //# sourceMappingURL=ExpandCollapse.mjs.map

package/dist/esm/components/ExpandCollapse/ExpandCollapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.mjs","names":[],"sources":["../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/**\n * Props for the ExpandCollapse component\n */\nexport type ExpandCollapseProps = {\n  /** Whether the component should provide expand/collapse functionality. If false, renders children directly */\n  isRollable?: boolean;\n  /** Minimum height in pixels before showing the expand/collapse toggle */\n  minHeight?: number;\n  /** Content that may overflow and trigger the expand/collapse behavior */\n  children: ReactNode;\n  /** Additional CSS classes for styling customization */\n  className?: string;\n};\n\n/** Default minimum height threshold for triggering expand/collapse behavior */\nconst DEFAULT_MIN_HEIGHT = 700;\n\n/**\n * ExpandCollapse Component\n *\n * A smart content container that automatically provides expand/collapse functionality\n * when content exceeds a specified height threshold. Features smooth animations,\n * internationalized toggle text, and intelligent height detection.\n *\n * @example\n * ```tsx\n * <ExpandCollapse minHeight={300}>\n *   <div>Very long content that will be collapsed...</div>\n * </ExpandCollapse>\n * ```\n *\n * ## Key Features\n * - **Smart Detection**: Automatically detects when content exceeds height threshold\n * - **Smooth Animations**: Uses CSS transitions for smooth expand/collapse effects\n * - **Internationalization**: Toggle text supports multiple languages via Intlayer\n * - **Customizable Height**: Configurable minimum height threshold\n * - **Performance Optimized**: Only applies collapse behavior when necessary\n * - **Accessibility**: Proper ARIA attributes and keyboard support\n *\n * ## Behavior Logic\n * 1. **Measurement Phase**: Measures actual content height on mount\n * 2. **Comparison**: Compares content height against minHeight threshold\n * 3. **Conditional Rendering**:\n *    - If content ≤ minHeight: Renders normally without collapse functionality\n *    - If content > minHeight: Enables expand/collapse with toggle button\n * 4. **State Management**: Manages collapsed/expanded state with smooth transitions\n *\n * ## When to Use\n * - Long-form content (articles, documentation, code blocks)\n * - Lists or tables that may grow beyond comfortable viewing height\n * - User-generated content with unpredictable length\n * - FAQ sections or expandable content cards\n * - Code examples or JSON data display\n *\n * ## Accessibility Features\n * - **Keyboard Navigation**: Toggle button is focusable and keyboard accessible\n * - **Screen Reader Support**: Proper ARIA labels and state announcements\n * - **Visual Indicators**: Clear visual cues for collapsed/expanded states\n * - **Smooth Animations**: Respects user preferences for reduced motion\n *\n * ## Internationalization\n * - Supports multiple languages through Intlayer integration\n * - Toggle text automatically adapts to current locale\n * - Includes translations for \"Show all\" and \"Show less\" states\n *\n * @param props - ExpandCollapseProps\n * @returns React functional component\n */\nexport const ExpandCollapse: FC<ExpandCollapseProps> = ({\n  isRollable = true,\n  minHeight = DEFAULT_MIN_HEIGHT,\n  children,\n  className,\n}) => {\n  const [codeContainerHeight, setCodeContainerHeight] = useState(0);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const codeContainerRef = useRef<HTMLDivElement>(null);\n  const { expandCollapseContent } = useIntlayer('expand-collapse');\n\n  const isTooBig = codeContainerHeight > minHeight;\n\n  useEffect(() => {\n    const measure = () => {\n      if (codeContainerRef.current) {\n        setCodeContainerHeight(codeContainerRef.current.scrollHeight);\n      }\n    };\n\n    measure();\n\n    window.addEventListener('resize', measure);\n    return () => window.removeEventListener('resize', measure);\n  }, [children]);\n\n  if (!isRollable) {\n    return children;\n  }\n\n  if (!isTooBig) {\n    return (\n      <div\n        className={cn('grid min-h-0 w-full', className)}\n        ref={codeContainerRef}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"w-full\">\n      <MaxHeightSmoother\n        isHidden={isCollapsed}\n        minHeight={minHeight}\n        className=\"w-full overflow-x-auto overflow-y-hidden\"\n      >\n        <div\n          className={cn('grid min-h-0 w-full', className)}\n          ref={codeContainerRef}\n        >\n          {children}\n        </div>\n      </MaxHeightSmoother>\n\n      {isTooBig && (\n        <button\n          className={cn(\n            'flex w-full cursor-pointer items-center justify-center',\n            'bg-gradient-to-t from-card/80 to-transparent px-3 py-2',\n            'text-md text-neutral-700 backdrop-blur',\n            'transition-all duration-300 hover:py-3',\n            'dark:text-neutral-400'\n          )}\n          type=\"button\"\n          onClick={() => setIsCollapsed((prev) => !prev)}\n        >\n          {expandCollapseContent(isCollapsed)}\n        </button>\n      )}\n    </div>\n  );\n};\n"],"mappings":"mRAsBA,MAqDa,GAA2C,CACtD,aAAa,GACb,YAAY,IACZ,WACA,eACI,CACJ,GAAM,CAAC,EAAqB,GAA0B,EAAS,EAAE,CAC3D,CAAC,EAAa,GAAkB,EAAS,GAAK,CAC9C,EAAmB,EAAuB,KAAK,CAC/C,CAAE,yBAA0B,EAAY,kBAAkB,CAE1D,EAAW,EAAsB,EA8BvC,OA5BA,MAAgB,CACd,IAAM,MAAgB,CAChB,EAAiB,SACnB,EAAuB,EAAiB,QAAQ,aAAa,EAOjE,OAHA,GAAS,CAET,OAAO,iBAAiB,SAAU,EAAQ,KAC7B,OAAO,oBAAoB,SAAU,EAAQ,EACzD,CAAC,EAAS,CAAC,CAET,EAIA,EAYH,EAAC,MAAD,CAAK,UAAU,kBAAf,CACE,EAAC,EAAD,CACE,SAAU,EACC,YACX,UAAU,oDAEV,EAAC,MAAD,CACE,UAAW,EAAG,sBAAuB,EAAU,CAC/C,IAAK,EAEJ,WACG,CAAA,CACY,CAAA,CAEnB,GACC,EAAC,SAAD,CACE,UAAW,EACT,yDACA,yDACA,yCACA,yCACA,wBACD,CACD,KAAK,SACL,YAAe,EAAgB,GAAS,CAAC,EAAK,UAE7C,EAAsB,EAAY,CAC5B,CAAA,CAEP,GAvCJ,EAAC,MAAD,CACE,UAAW,EAAG,sBAAuB,EAAU,CAC/C,IAAK,EAEJ,WACG,CAAA,CAVD"}
+{"version":3,"file":"ExpandCollapse.mjs","names":[],"sources":["../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/**\n * Props for the ExpandCollapse component\n */\nexport type ExpandCollapseProps = {\n  /** Whether the component should provide expand/collapse functionality. If false, renders children directly */\n  isRollable?: boolean;\n  /** Minimum height in pixels before showing the expand/collapse toggle */\n  minHeight?: number;\n  /** Content that may overflow and trigger the expand/collapse behavior */\n  children: ReactNode;\n  /** Additional CSS classes for styling customization */\n  className?: string;\n};\n\n/** Default minimum height threshold for triggering expand/collapse behavior */\nconst DEFAULT_MIN_HEIGHT = 700;\n\n/**\n * ExpandCollapse Component\n *\n * A smart content container that automatically provides expand/collapse functionality\n * when content exceeds a specified height threshold. Features smooth animations,\n * internationalized toggle text, and intelligent height detection.\n *\n * @example\n * ```tsx\n * <ExpandCollapse minHeight={300}>\n *   <div>Very long content that will be collapsed...</div>\n * </ExpandCollapse>\n * ```\n *\n * ## Key Features\n * - **Smart Detection**: Automatically detects when content exceeds height threshold\n * - **Smooth Animations**: Uses CSS transitions for smooth expand/collapse effects\n * - **Internationalization**: Toggle text supports multiple languages via Intlayer\n * - **Customizable Height**: Configurable minimum height threshold\n * - **Performance Optimized**: Only applies collapse behavior when necessary\n * - **Accessibility**: Proper ARIA attributes and keyboard support\n *\n * ## Behavior Logic\n * 1. **Measurement Phase**: Measures actual content height on mount\n * 2. **Comparison**: Compares content height against minHeight threshold\n * 3. **Conditional Rendering**:\n *    - If content ≤ minHeight: Renders normally without collapse functionality\n *    - If content > minHeight: Enables expand/collapse with toggle button\n * 4. **State Management**: Manages collapsed/expanded state with smooth transitions\n *\n * ## When to Use\n * - Long-form content (articles, documentation, code blocks)\n * - Lists or tables that may grow beyond comfortable viewing height\n * - User-generated content with unpredictable length\n * - FAQ sections or expandable content cards\n * - Code examples or JSON data display\n *\n * ## Accessibility Features\n * - **Keyboard Navigation**: Toggle button is focusable and keyboard accessible\n * - **Screen Reader Support**: Proper ARIA labels and state announcements\n * - **Visual Indicators**: Clear visual cues for collapsed/expanded states\n * - **Smooth Animations**: Respects user preferences for reduced motion\n *\n * ## Internationalization\n * - Supports multiple languages through Intlayer integration\n * - Toggle text automatically adapts to current locale\n * - Includes translations for \"Show all\" and \"Show less\" states\n *\n * @param props - ExpandCollapseProps\n * @returns React functional component\n */\nexport const ExpandCollapse: FC<ExpandCollapseProps> = ({\n  isRollable = true,\n  minHeight = DEFAULT_MIN_HEIGHT,\n  children,\n  className,\n}) => {\n  const [codeContainerHeight, setCodeContainerHeight] = useState(0);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const codeContainerRef = useRef<HTMLDivElement>(null);\n  const { expandCollapseContent } = useIntlayer('expand-collapse');\n\n  const isTooBig = codeContainerHeight > minHeight;\n\n  useEffect(() => {\n    const measure = () => {\n      if (codeContainerRef.current) {\n        setCodeContainerHeight(codeContainerRef.current.clientHeight);\n      }\n    };\n\n    measure();\n\n    window.addEventListener('resize', measure);\n    return () => window.removeEventListener('resize', measure);\n  }, [children]);\n\n  if (!isRollable) {\n    return children;\n  }\n\n  if (!isTooBig) {\n    return (\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MaxHeightSmoother\n      isHidden={isCollapsed}\n      minHeight={minHeight}\n      className=\"w-full overflow-x-auto overflow-y-hidden\"\n    >\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n      <button\n        className={cn(\n          'absolute right-0 bottom-0 flex w-full cursor-pointer items-center justify-center rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent px-3 py-0.5 text-md text-neutral-700 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all duration-300 hover:py-1 dark:text-neutral-400',\n          isCollapsed ? 'w-full' : 'w-32'\n        )}\n        type=\"button\"\n        onClick={() => setIsCollapsed((prev) => !prev)}\n      >\n        {expandCollapseContent(isCollapsed)}\n      </button>\n    </MaxHeightSmoother>\n  );\n};\n"],"mappings":"mRAsBA,MAqDa,GAA2C,CACtD,aAAa,GACb,YAAY,IACZ,WACA,eACI,CACJ,GAAM,CAAC,EAAqB,GAA0B,EAAS,EAAE,CAC3D,CAAC,EAAa,GAAkB,EAAS,GAAK,CAC9C,EAAmB,EAAuB,KAAK,CAC/C,CAAE,yBAA0B,EAAY,kBAAkB,CAE1D,EAAW,EAAsB,EA2BvC,OAzBA,MAAgB,CACd,IAAM,MAAgB,CAChB,EAAiB,SACnB,EAAuB,EAAiB,QAAQ,aAAa,EAOjE,OAHA,GAAS,CAET,OAAO,iBAAiB,SAAU,EAAQ,KAC7B,OAAO,oBAAoB,SAAU,EAAQ,EACzD,CAAC,EAAS,CAAC,CAET,EAIA,EASH,EAAC,EAAD,CACE,SAAU,EACC,YACX,UAAU,oDAHZ,CAKE,EAAC,MAAD,CAAK,UAAW,EAAG,cAAe,EAAU,CAAE,IAAK,EAChD,WACG,CAAA,CACN,EAAC,SAAD,CACE,UAAW,EACT,sSACA,EAAc,SAAW,OAC1B,CACD,KAAK,SACL,YAAe,EAAgB,GAAS,CAAC,EAAK,UAE7C,EAAsB,EAAY,CAC5B,CAAA,CACS,GAzBlB,EAAC,MAAD,CAAK,UAAW,EAAG,cAAe,EAAU,CAAE,IAAK,EAChD,WACG,CAAA,CAPD"}

package/dist/esm/components/IDE/CodeBlockShiki.mjs

@@ -1,2 +1,2 @@
-"use client";import{CodeDefault as e}from"./CodeBlockClient.mjs";import{useEffect as t,useState as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=new Map,a=new Map,o=async e=>{if(i.has(e))return i.get(e);let t;switch(e){case`typescript`:case`ts`:t=await import(`shiki/langs/typescript.mjs`);break;case`javascript`:case`js`:t=await import(`shiki/langs/javascript.mjs`);break;case`bash`:case`sh`:case`shell`:t=await import(`shiki/langs/bash.mjs`);break;case`json`:t=await import(`shiki/langs/json.mjs`);break;case`tsx`:t=await import(`shiki/langs/tsx.mjs`);break;case`vue`:t=await import(`shiki/langs/vue.mjs`);break;case`html`:t=await import(`shiki/langs/html.mjs`);break;case`xml`:t=await import(`shiki/langs/xml.mjs`);break;case`yaml`:t=await import(`shiki/langs/yaml.mjs`);break;default:t=await import(`shiki/langs/typescript.mjs`);break}let n=t.default;return i.set(e,n),n},s=async e=>{if(a.has(e))return a.get(e);let t;switch(e){case`github-dark`:t=await import(`shiki/themes/github-dark.mjs`);break;default:t=await import(`shiki/themes/github-light.mjs`);break}let n=t.default;return a.set(e,n),n};let c=null;const l=async()=>(c||=import(`shiki/bundle/web`).then(({createHighlighter:e})=>e({langs:[],themes:[]})),c),u=async(e,t,n)=>{let r=n?`github-dark`:`github-light`,[i,a,c]=await Promise.all([l(),o(t),s(r)]);return i.getLoadedLanguages().includes(t)||await i.loadLanguage(a),i.getLoadedThemes().includes(r)||await i.loadTheme(c),i.codeToHtml(e,{lang:t,theme:r})},d=({children:i,lang:a,isDarkMode:o})=>{let[s,c]=n(null);return t(()=>{let e=!1;return u(i,a,o).then(t=>{e||c(t)}).catch(t=>{console.error(`Failed to highlight code:`,t),!e&&s===null&&c(``)}),()=>{e=!0}},[i,a,o]),r(`div`,{className:`min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]`,children:s?r(`div`,{dangerouslySetInnerHTML:{__html:s}}):r(e,{children:i})})};export{d as CodeBlockShiki};
+"use client";import{CodeDefault as e}from"./CodeBlockClient.mjs";import{useEffect as t,useState as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=new Map,a=new Map,o=async e=>{if(i.has(e))return i.get(e);let t;switch(e){case`typescript`:case`ts`:t=await import(`shiki/langs/typescript.mjs`);break;case`javascript`:case`js`:t=await import(`shiki/langs/javascript.mjs`);break;case`bash`:case`sh`:case`shell`:t=await import(`shiki/langs/bash.mjs`);break;case`json`:t=await import(`shiki/langs/json.mjs`);break;case`jsonc`:case`json5`:t=await import(`shiki/langs/json5.mjs`);break;case`tsx`:t=await import(`shiki/langs/tsx.mjs`);break;case`vue`:t=await import(`shiki/langs/vue.mjs`);break;case`html`:t=await import(`shiki/langs/html.mjs`);break;case`xml`:t=await import(`shiki/langs/xml.mjs`);break;case`yaml`:t=await import(`shiki/langs/yaml.mjs`);break;default:t=await import(`shiki/langs/typescript.mjs`);break}let n=t.default;return i.set(e,n),n},s=async e=>{if(a.has(e))return a.get(e);let t;switch(e){case`github-dark`:t=await import(`shiki/themes/github-dark.mjs`);break;default:t=await import(`shiki/themes/github-light.mjs`);break}let n=t.default;return a.set(e,n),n};let c=null;const l=async()=>(c||=import(`shiki/bundle/web`).then(({createHighlighter:e})=>e({langs:[],themes:[]})),c),u=async(e,t,n)=>{let r=n?`github-dark`:`github-light`,[i,a,c]=await Promise.all([l(),o(t),s(r)]);return i.getLoadedLanguages().includes(t)||await i.loadLanguage(a),i.getLoadedThemes().includes(r)||await i.loadTheme(c),i.codeToHtml(e,{lang:t,theme:r})},d=({children:i,lang:a,isDarkMode:o})=>{let[s,c]=n(null);return t(()=>{let e=!1;return u(i,a,o).then(t=>{e||c(t)}).catch(t=>{console.error(`Failed to highlight code:`,t),!e&&s===null&&c(``)}),()=>{e=!0}},[i,a,o]),r(`div`,{className:`min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]`,children:s?r(`div`,{dangerouslySetInnerHTML:{__html:s}}):r(e,{children:i})})};export{d as CodeBlockShiki};
 //# sourceMappingURL=CodeBlockShiki.mjs.map

package/dist/esm/components/IDE/CodeBlockShiki.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n  BundledLanguage,\n  BundledTheme,\n  HighlighterGeneric,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n  if (languageCache.has(lang)) return languageCache.get(lang);\n\n  let languageModule: any;\n  switch (lang) {\n    case 'typescript':\n    case 'ts':\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n    case 'javascript':\n    case 'js':\n      languageModule = await import('shiki/langs/javascript.mjs');\n      break;\n    case 'bash':\n    case 'sh':\n    case 'shell':\n      languageModule = await import('shiki/langs/bash.mjs');\n      break;\n    case 'json':\n      languageModule = await import('shiki/langs/json.mjs');\n      break;\n    case 'tsx':\n      languageModule = await import('shiki/langs/tsx.mjs');\n      break;\n    case 'vue':\n      languageModule = await import('shiki/langs/vue.mjs');\n      break;\n    case 'html':\n      languageModule = await import('shiki/langs/html.mjs');\n      break;\n    case 'xml':\n      languageModule = await import('shiki/langs/xml.mjs');\n      break;\n    case 'yaml':\n      languageModule = await import('shiki/langs/yaml.mjs');\n      break;\n    default:\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n  }\n\n  const language = languageModule.default;\n  languageCache.set(lang, language);\n  return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n  if (themeCache.has(themeName)) return themeCache.get(themeName);\n\n  let themeModule: any;\n  switch (themeName) {\n    case 'github-dark':\n      themeModule = await import('shiki/themes/github-dark.mjs');\n      break;\n    case 'github-light':\n    default:\n      themeModule = await import('shiki/themes/github-light.mjs');\n      break;\n  }\n\n  const theme = themeModule.default;\n  themeCache.set(themeName, theme);\n  return theme;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null;\n\nconst getHighlighterInstance = async () => {\n  if (!highlighterPromise) {\n    highlighterPromise = import('shiki/bundle/web').then(\n      ({ createHighlighter }) =>\n        createHighlighter({\n          langs: [],\n          themes: [],\n        })\n    );\n  }\n  return highlighterPromise;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n  code: string,\n  lang: BundledLanguage,\n  isDarkMode?: boolean\n): Promise<string> => {\n  const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n  // Load highlighter, language, and theme in parallel\n  const [highlighter, languageModule, themeModule] = await Promise.all([\n    getHighlighterInstance(),\n    loadLanguage(lang),\n    loadTheme(themeName),\n  ]);\n\n  // Load into the singleton instance if not already loaded\n  if (!highlighter.getLoadedLanguages().includes(lang)) {\n    await highlighter.loadLanguage(languageModule);\n  }\n  if (!highlighter.getLoadedThemes().includes(themeName)) {\n    await highlighter.loadTheme(themeModule);\n  }\n\n  return highlighter.codeToHtml(code, {\n    lang,\n    theme: themeName,\n  });\n};\n\nexport type CodeBlockShikiProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n  children,\n  lang,\n  isDarkMode,\n}) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    highlightCode(children, lang, isDarkMode)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch((error) => {\n        console.error('Failed to highlight code:', error);\n        if (!isCancelled && html === null) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang, isDarkMode]);\n\n  return (\n    <div className=\"min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\">\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":"yJAWA,MAAM,EAAgB,IAAI,IACpB,EAAa,IAAI,IAGjB,EAAe,KAAO,IAAwC,CAClE,GAAI,EAAc,IAAI,EAAK,CAAE,OAAO,EAAc,IAAI,EAAK,CAE3D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,OACL,IAAK,KACL,IAAK,QACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,QACE,EAAiB,MAAM,OAAO,8BAC9B,MAGJ,IAAM,EAAW,EAAe,QAEhC,OADA,EAAc,IAAI,EAAM,EAAS,CAC1B,GAIH,EAAY,KAAO,IAA0C,CACjE,GAAI,EAAW,IAAI,EAAU,CAAE,OAAO,EAAW,IAAI,EAAU,CAE/D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,cACH,EAAc,MAAM,OAAO,gCAC3B,MAEF,QACE,EAAc,MAAM,OAAO,iCAC3B,MAGJ,IAAM,EAAQ,EAAY,QAE1B,OADA,EAAW,IAAI,EAAW,EAAM,CACzB,GAIT,IAAI,EAAmE,KAEvE,MAAM,EAAyB,UAC7B,AACE,IAAqB,OAAO,oBAAoB,MAC7C,CAAE,uBACD,EAAkB,CAChB,MAAO,EAAE,CACT,OAAQ,EAAE,CACX,CAAC,CACL,CAEI,GAIH,EAAgB,MACpB,EACA,EACA,IACoB,CACpB,IAAM,EAA0B,EAAa,cAAgB,eAGvD,CAAC,EAAa,EAAgB,GAAe,MAAM,QAAQ,IAAI,CACnE,GAAwB,CACxB,EAAa,EAAK,CAClB,EAAU,EAAU,CACrB,CAAC,CAUF,OAPK,EAAY,oBAAoB,CAAC,SAAS,EAAK,EAClD,MAAM,EAAY,aAAa,EAAe,CAE3C,EAAY,iBAAiB,CAAC,SAAS,EAAU,EACpD,MAAM,EAAY,UAAU,EAAY,CAGnC,EAAY,WAAW,EAAM,CAClC,OACA,MAAO,EACR,CAAC,EASS,GAA2C,CACtD,WACA,OACA,gBACI,CACJ,GAAM,CAAC,EAAM,GAAW,EAAwB,KAAK,CAmBrD,OAjBA,MAAgB,CACd,IAAI,EAAc,GAWlB,OATA,EAAc,EAAU,EAAM,EAAW,CACtC,KAAM,GAAW,CACX,GAAa,EAAQ,EAAO,EACjC,CACD,MAAO,GAAU,CAChB,QAAQ,MAAM,4BAA6B,EAAM,CAC7C,CAAC,GAAe,IAAS,MAAM,EAAQ,GAAG,EAC9C,KAES,CACX,EAAc,KAEf,CAAC,EAAU,EAAM,EAAW,CAAC,CAG9B,EAAC,MAAD,CAAK,UAAU,6OACZ,EAEC,EAAC,MAAD,CAAK,wBAAyB,CAAE,OAAQ,EAAM,CAAI,CAAA,CAElD,EAAC,EAAD,CAAc,WAAuB,CAAA,CAEnC,CAAA"}
+{"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n  BundledLanguage,\n  BundledTheme,\n  HighlighterGeneric,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n  if (languageCache.has(lang)) return languageCache.get(lang);\n\n  let languageModule: any;\n  switch (lang) {\n    case 'typescript':\n    case 'ts':\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n    case 'javascript':\n    case 'js':\n      languageModule = await import('shiki/langs/javascript.mjs');\n      break;\n    case 'bash':\n    case 'sh':\n    case 'shell':\n      languageModule = await import('shiki/langs/bash.mjs');\n      break;\n    case 'json':\n      languageModule = await import('shiki/langs/json.mjs');\n      break;\n    case 'jsonc':\n    case 'json5':\n      languageModule = await import('shiki/langs/json5.mjs');\n      break;\n    case 'tsx':\n      languageModule = await import('shiki/langs/tsx.mjs');\n      break;\n    case 'vue':\n      languageModule = await import('shiki/langs/vue.mjs');\n      break;\n    case 'html':\n      languageModule = await import('shiki/langs/html.mjs');\n      break;\n    case 'xml':\n      languageModule = await import('shiki/langs/xml.mjs');\n      break;\n    case 'yaml':\n      languageModule = await import('shiki/langs/yaml.mjs');\n      break;\n    default:\n      languageModule = await import('shiki/langs/typescript.mjs');\n      break;\n  }\n\n  const language = languageModule.default;\n  languageCache.set(lang, language);\n  return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n  if (themeCache.has(themeName)) return themeCache.get(themeName);\n\n  let themeModule: any;\n  switch (themeName) {\n    case 'github-dark':\n      themeModule = await import('shiki/themes/github-dark.mjs');\n      break;\n    case 'github-light':\n    default:\n      themeModule = await import('shiki/themes/github-light.mjs');\n      break;\n  }\n\n  const theme = themeModule.default;\n  themeCache.set(themeName, theme);\n  return theme;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null;\n\nconst getHighlighterInstance = async () => {\n  if (!highlighterPromise) {\n    highlighterPromise = import('shiki/bundle/web').then(\n      ({ createHighlighter }) =>\n        createHighlighter({\n          langs: [],\n          themes: [],\n        })\n    );\n  }\n  return highlighterPromise;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n  code: string,\n  lang: BundledLanguage,\n  isDarkMode?: boolean\n): Promise<string> => {\n  const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n  // Load highlighter, language, and theme in parallel\n  const [highlighter, languageModule, themeModule] = await Promise.all([\n    getHighlighterInstance(),\n    loadLanguage(lang),\n    loadTheme(themeName),\n  ]);\n\n  // Load into the singleton instance if not already loaded\n  if (!highlighter.getLoadedLanguages().includes(lang)) {\n    await highlighter.loadLanguage(languageModule);\n  }\n  if (!highlighter.getLoadedThemes().includes(themeName)) {\n    await highlighter.loadTheme(themeModule);\n  }\n\n  return highlighter.codeToHtml(code, {\n    lang,\n    theme: themeName,\n  });\n};\n\nexport type CodeBlockShikiProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n  children,\n  lang,\n  isDarkMode,\n}) => {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let isCancelled = false;\n\n    highlightCode(children, lang, isDarkMode)\n      .then((result) => {\n        if (!isCancelled) setHtml(result);\n      })\n      .catch((error) => {\n        console.error('Failed to highlight code:', error);\n        if (!isCancelled && html === null) setHtml('');\n      });\n\n    return () => {\n      isCancelled = true;\n    };\n  }, [children, lang, isDarkMode]);\n\n  return (\n    <div className=\"min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\">\n      {html ? (\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        <CodeDefault>{children}</CodeDefault>\n      )}\n    </div>\n  );\n};\n"],"mappings":"yJAWA,MAAM,EAAgB,IAAI,IACpB,EAAa,IAAI,IAGjB,EAAe,KAAO,IAAwC,CAClE,GAAI,EAAc,IAAI,EAAK,CAAE,OAAO,EAAc,IAAI,EAAK,CAE3D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,aACL,IAAK,KACH,EAAiB,MAAM,OAAO,8BAC9B,MACF,IAAK,OACL,IAAK,KACL,IAAK,QACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,QACL,IAAK,QACH,EAAiB,MAAM,OAAO,yBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,IAAK,MACH,EAAiB,MAAM,OAAO,uBAC9B,MACF,IAAK,OACH,EAAiB,MAAM,OAAO,wBAC9B,MACF,QACE,EAAiB,MAAM,OAAO,8BAC9B,MAGJ,IAAM,EAAW,EAAe,QAEhC,OADA,EAAc,IAAI,EAAM,EAAS,CAC1B,GAIH,EAAY,KAAO,IAA0C,CACjE,GAAI,EAAW,IAAI,EAAU,CAAE,OAAO,EAAW,IAAI,EAAU,CAE/D,IAAI,EACJ,OAAQ,EAAR,CACE,IAAK,cACH,EAAc,MAAM,OAAO,gCAC3B,MAEF,QACE,EAAc,MAAM,OAAO,iCAC3B,MAGJ,IAAM,EAAQ,EAAY,QAE1B,OADA,EAAW,IAAI,EAAW,EAAM,CACzB,GAIT,IAAI,EAAmE,KAEvE,MAAM,EAAyB,UAC7B,AACE,IAAqB,OAAO,oBAAoB,MAC7C,CAAE,uBACD,EAAkB,CAChB,MAAO,EAAE,CACT,OAAQ,EAAE,CACX,CAAC,CACL,CAEI,GAIH,EAAgB,MACpB,EACA,EACA,IACoB,CACpB,IAAM,EAA0B,EAAa,cAAgB,eAGvD,CAAC,EAAa,EAAgB,GAAe,MAAM,QAAQ,IAAI,CACnE,GAAwB,CACxB,EAAa,EAAK,CAClB,EAAU,EAAU,CACrB,CAAC,CAUF,OAPK,EAAY,oBAAoB,CAAC,SAAS,EAAK,EAClD,MAAM,EAAY,aAAa,EAAe,CAE3C,EAAY,iBAAiB,CAAC,SAAS,EAAU,EACpD,MAAM,EAAY,UAAU,EAAY,CAGnC,EAAY,WAAW,EAAM,CAClC,OACA,MAAO,EACR,CAAC,EASS,GAA2C,CACtD,WACA,OACA,gBACI,CACJ,GAAM,CAAC,EAAM,GAAW,EAAwB,KAAK,CAmBrD,OAjBA,MAAgB,CACd,IAAI,EAAc,GAWlB,OATA,EAAc,EAAU,EAAM,EAAW,CACtC,KAAM,GAAW,CACX,GAAa,EAAQ,EAAO,EACjC,CACD,MAAO,GAAU,CAChB,QAAQ,MAAM,4BAA6B,EAAM,CAC7C,CAAC,GAAe,IAAS,MAAM,EAAQ,GAAG,EAC9C,KAES,CACX,EAAc,KAEf,CAAC,EAAU,EAAM,EAAW,CAAC,CAG9B,EAAC,MAAD,CAAK,UAAU,6OACZ,EAEC,EAAC,MAAD,CAAK,wBAAyB,CAAE,OAAQ,EAAM,CAAI,CAAA,CAElD,EAAC,EAAD,CAAc,WAAuB,CAAA,CAEnC,CAAA"}

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

@@ -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

@@ -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"}
+{"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/MarkDownRender/MarkDownRender.mjs

@@ -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{createContext as p,useContext as m}from"react";import{Fragment as h,jsx as g}from"react/jsx-runtime";import{renderMarkdown as _}from"react-intlayer";const v=p({}),y={h1:e=>g(n,{isClickable:!0,className:`text-text`,...e}),h2:e=>g(r,{isClickable:!0,className:`mt-16 text-text`,...e}),h3:e=>g(i,{isClickable:!0,className:`mt-5 text-text`,...e}),h4:e=>g(a,{isClickable:!0,className:`mt-3 text-text`,...e}),h5:e=>g(o,{isClickable:!0,className:`mt-3 text-text`,...e}),h6:e=>g(s,{isClickable:!0,className:`mt-3 text-text`,...e}),strong:e=>g(`strong`,{className:`text-text`,...e}),code:({className:e,children:t,...n})=>{let{isDarkMode:r}=m(v),i=String(t??``).replace(/\n$/,``);if(!e)return g(`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=e?.replace(/lang(?:uage)?-/,``)||`plaintext`;return g(l,{...n,language:a,showHeader:!0,isDarkMode:r,children:i})},blockquote:({className:t,...n})=>g(`blockquote`,{className:e(`mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral`,t),...n}),ul:({className:t,...n})=>g(`ul`,{className:e(`mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80`,t),...n}),ol:({className:t,...n})=>g(`ol`,{className:e(`mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80`,t),...n}),img:({className:t,alt:n,src:r,...i})=>g(`img`,{...i,alt:n??``,loading:`lazy`,className:e(`max-h-[80vh] max-w-full rounded-md`,t),src:`${r}?raw=true`}),a:e=>{let{locale:n}=m(v);return g(t,{isExternalLink:e.href?.startsWith(`http`),underlined:!0,locale:n,label:``,color:`text`,...e})},pre:e=>g(h,{children:e.children}),table:e=>g(f,{isRollable:!0,...e}),th:({className:t,...n})=>g(`th`,{className:e(`border-neutral border-b bg-neutral/10 p-4`,t),...n}),tr:({className:t,...n})=>g(`tr`,{className:e(`hover:/10 hover:bg-neutral/10`,t),...n}),td:({className:t,...n})=>g(`td`,{className:e(`border-neutral-500/50 border-b p-4`,t),...n}),hr:({className:t,...n})=>g(`hr`,{className:e(`mx-6 mt-16 text-neutral`,t),...n}),Tabs:e=>g(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})=>g(`div`,{className:e(`flex gap-4 max-md:flex-col`,t),...n}),Column:({className:t,...n})=>g(`div`,{className:e(`flex-1`,t),...n})},b=e=>({components:y}),x=({children:e,isDarkMode:t=!1,locale:n,forceBlock:r,preserveFrontmatter:i,tagfilter:a,components:o,wrapper:s})=>{let l=_(e,{components:{...y,...o},wrapper:s,forceBlock:r,preserveFrontmatter:i,tagfilter:a});return g(v.Provider,{value:{isDarkMode:t,locale:n},children:g(c,{children:g(u,{children:l})})})};export{x as MarkdownRenderer,y as baseMarkdownComponents,b 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

@@ -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 {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  createContext,\n  type FC,\n  useContext,\n} 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// Context to pass dynamic variables to static components without re-creating them\ninterface MarkdownContextType {\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n}\nconst MarkdownContext = createContext<MarkdownContextType>({});\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 CodeRenderer = ({\n  className,\n  children,\n  ...rest\n}: ComponentProps<'code'>) => {\n  const { isDarkMode } = useContext(MarkdownContext);\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\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 LinkRenderer = (props: ComponentProps<'a'>) => {\n  const { locale } = useContext(MarkdownContext);\n  return (\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\nexport const baseMarkdownComponents = {\n  h1: H1Renderer,\n  h2: H2Renderer,\n  h3: H3Renderer,\n  h4: H4Renderer,\n  h5: H5Renderer,\n  h6: H6Renderer,\n  strong: StrongRenderer,\n  code: CodeRenderer,\n  blockquote: BlockquoteRenderer,\n  ul: UlRenderer,\n  ol: OlRenderer,\n  img: ImgRenderer,\n  a: LinkRenderer,\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\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  // `renderMarkdown` now receives stable object references.\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...baseMarkdownComponents,\n      ...componentsProp,\n    },\n    wrapper,\n    forceBlock,\n    preserveFrontmatter,\n    tagfilter,\n  });\n\n  return (\n    <MarkdownContext.Provider value={{ isDarkMode, locale }}>\n      <CodeProvider>\n        <TabProvider>{markdownContent}</TabProvider>\n      </CodeProvider>\n    </MarkdownContext.Provider>\n  );\n};\n"],"mappings":"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"}
+{"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":"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"}

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

@@ -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-[grid-template-rows] duration-500 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:`min-h-0 overflow-hidden`,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

@@ -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-[grid-template-rows] duration-500 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=\"min-h-0 overflow-hidden\"\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,sIACO,IAAa,QAClB,CAAC,GACD,kCACF,GAAc,8CACd,GACE,wGACF,EACD,CACD,GAAI,WAEJ,EAAC,MAAD,CACE,MAAO,CACL,UAAW,GAAG,EAAU,IACzB,CACD,UAAU,0BAET,WACG,CAAA,CACF,CAAA"}
+{"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/SwitchSelector/index.mjs

@@ -1,2 +1,2 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{useItemSelector as t}from"../../hooks/useItemSelector.mjs";import{createElement as n,useEffect as r,useRef as i,useState as a}from"react";import{cva as o}from"class-variance-authority";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=[{content:`Off`,value:!1},{content:`On`,value:!0}];let u=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.DARK=`dark`,e.TEXT=`text`,e}({});const d=o(`flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]`,{variants:{color:{[`${u.PRIMARY}`]:`border-primary text-primary`,[`${u.SECONDARY}`]:`border-secondary text-secondary`,[`${u.DESTRUCTIVE}`]:`border-destructive bg-destructive text-destructive`,[`${u.NEUTRAL}`]:`border-neutral text-neutral`,[`${u.LIGHT}`]:`border-white text-white`,[`${u.DARK}`]:`border-neutral-800 text-neutral-800`,[`${u.TEXT}`]:`border-text text-text`},disabled:{true:`cursor-not-allowed opacity-50`,false:``}},defaultVariants:{color:`${u.PRIMARY}`,disabled:!1}});let f=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e}({});const p=o(`z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none`,{variants:{size:{[`${f.SM}`]:`px-2 py-1 text-xs`,[`${f.MD}`]:`p-2 text-sm`,[`${f.LG}`]:`p-4 text-base`}},defaultVariants:{size:`${f.MD}`}}),m=o(`absolute top-0 z-0 h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none`,{variants:{color:{[`${u.PRIMARY}`]:`bg-primary data-[indicator=true]:text-text`,[`${u.SECONDARY}`]:`bg-secondary data-[indicator=true]:text-text`,[`${u.DESTRUCTIVE}`]:`bg-destructive data-[indicator=true]:text-text`,[`${u.NEUTRAL}`]:`bg-neutral data-[indicator=true]:text-white`,[`${u.LIGHT}`]:`bg-white data-[indicator=true]:text-black`,[`${u.DARK}`]:`bg-neutral-800 data-[indicator=true]:text-white`,[`${u.TEXT}`]:`bg-text data-[indicator=true]:text-text-opposite`}}}),h=({choices:o=l,value:h,defaultValue:g,onChange:_,color:v=u.PRIMARY,size:y=f.MD,className:b,hoverable:x=!0,disabled:S=!1})=>{let[C,w]=a(h??g??o[0].value),[T,E]=a(null),D=i([]),O=i(null),{choiceIndicatorPosition:k}=t(D,{isHoverable:x}),A=o.findIndex(e=>e.value===C),j=x&&T!==null?T:A,M=e=>{w(e),_?.(e)};return r(()=>{h!==void 0&&w(h)},[h]),s(`div`,{className:d({color:v,disabled:S,className:b}),role:`tablist`,"aria-disabled":S?`true`:void 0,children:c(`div`,{className:`relative flex size-full flex-row items-center justify-center`,children:[o.map((t,r)=>{let{content:i,value:a,...o}=t,s=typeof a==`string`||typeof a==`number`,c=r===A,l=r===j;return n(`button`,{...o,className:e(p({size:y}),S&&`cursor-not-allowed`),key:s?a:r,role:`tab`,onClick:()=>M(a),"aria-selected":c?`true`:void 0,"data-indicator":l?`true`:void 0,disabled:S||c,tabIndex:c?0:-1,ref:e=>{D.current[r]=e},onMouseEnter:()=>!S&&E(r),onMouseLeave:()=>!S&&E(null)},i)}),k&&s(`div`,{className:e(m({color:v})),style:k,ref:O})]})})};export{h as SwitchSelector,u as SwitchSelectorColor,f as SwitchSelectorSize};
+"use client";import{cn as e}from"../../utils/cn.mjs";import{useItemSelector as t}from"../../hooks/useItemSelector.mjs";import{createElement as n,useEffect as r,useRef as i,useState as a}from"react";import{cva as o}from"class-variance-authority";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=[{content:`Off`,value:!1},{content:`On`,value:!0}];let u=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.DARK=`dark`,e.TEXT=`text`,e}({});const d=o(`flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]`,{variants:{color:{[`${u.PRIMARY}`]:`border-primary text-primary`,[`${u.SECONDARY}`]:`border-secondary text-secondary`,[`${u.DESTRUCTIVE}`]:`border-destructive bg-destructive text-destructive`,[`${u.NEUTRAL}`]:`border-neutral text-neutral`,[`${u.LIGHT}`]:`border-white text-white`,[`${u.DARK}`]:`border-neutral-800 text-neutral-800`,[`${u.TEXT}`]:`border-text text-text`},disabled:{true:`cursor-not-allowed opacity-50`,false:``}},defaultVariants:{color:`${u.PRIMARY}`,disabled:!1}});let f=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e}({});const p=o(`z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none`,{variants:{size:{[`${f.SM}`]:`px-2 py-1 text-xs`,[`${f.MD}`]:`p-2 text-sm`,[`${f.LG}`]:`p-4 text-base`}},defaultVariants:{size:`${f.MD}`}}),m=o(`absolute top-0 z-0 h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none`,{variants:{color:{[`${u.PRIMARY}`]:`bg-primary data-[indicator=true]:text-text`,[`${u.SECONDARY}`]:`bg-secondary data-[indicator=true]:text-text`,[`${u.DESTRUCTIVE}`]:`bg-destructive data-[indicator=true]:text-text`,[`${u.NEUTRAL}`]:`bg-neutral data-[indicator=true]:text-white`,[`${u.LIGHT}`]:`bg-white data-[indicator=true]:text-black`,[`${u.DARK}`]:`bg-neutral-800 data-[indicator=true]:text-white`,[`${u.TEXT}`]:`bg-text data-[indicator=true]:text-text-opposite`}}}),h=({choices:o=l,value:h,defaultValue:g,onChange:_,color:v=u.PRIMARY,size:y=f.MD,className:b,itemClassName:x,hoverable:S=!0,disabled:C=!1})=>{let[w,T]=a(h??g??o[0].value),[E,D]=a(null),O=i([]),k=i(null),{choiceIndicatorPosition:A}=t(O,{isHoverable:S}),j=o.findIndex(e=>e.value===w),M=S&&E!==null?E:j,N=e=>{T(e),_?.(e)};return r(()=>{h!==void 0&&T(h)},[h]),s(`div`,{className:d({color:v,disabled:C,className:b}),role:`tablist`,"aria-disabled":C?`true`:void 0,children:c(`div`,{className:`relative flex size-full flex-row items-center justify-center`,children:[o.map((t,r)=>{let{content:i,value:a,...o}=t,s=typeof a==`string`||typeof a==`number`,c=r===j,l=r===M;return n(`button`,{...o,className:e(p({size:y}),C&&`cursor-not-allowed`,x),key:s?a:r,role:`tab`,onClick:()=>N(a),"aria-selected":c?`true`:void 0,"data-indicator":l?`true`:void 0,disabled:C||c,tabIndex:c?0:-1,ref:e=>{O.current[r]=e},onMouseEnter:()=>!C&&D(r),onMouseLeave:()=>!C&&D(null)},i)}),A&&s(`div`,{className:e(m({color:v})),style:A,ref:k})]})})};export{h as SwitchSelector,u as SwitchSelectorColor,f as SwitchSelectorSize};
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/SwitchSelector/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\nexport type SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n  hoverable?: boolean;\n  disabled?: boolean;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nexport enum SwitchSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n  'flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n        [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'border-destructive bg-destructive text-destructive',\n        [`${SwitchSelectorColor.NEUTRAL}`]: 'border-neutral text-neutral',\n        [`${SwitchSelectorColor.LIGHT}`]: 'border-white text-white',\n        [`${SwitchSelectorColor.DARK}`]: 'border-neutral-800 text-neutral-800',\n        [`${SwitchSelectorColor.TEXT}`]: 'border-text text-text',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      color: `${SwitchSelectorColor.PRIMARY}`,\n      disabled: false,\n    },\n  }\n);\n\nexport enum SwitchSelectorSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nconst choiceVariant = cva(\n  'z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n  {\n    variants: {\n      size: {\n        [`${SwitchSelectorSize.SM}`]: 'px-2 py-1 text-xs',\n        [`${SwitchSelectorSize.MD}`]: 'p-2 text-sm',\n        [`${SwitchSelectorSize.LG}`]: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: `${SwitchSelectorSize.MD}`,\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-0 h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]:\n          'bg-primary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.SECONDARY}`]:\n          'bg-secondary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'bg-destructive data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.NEUTRAL}`]:\n          'bg-neutral data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.LIGHT}`]:\n          'bg-white data-[indicator=true]:text-black',\n        [`${SwitchSelectorColor.DARK}`]:\n          'bg-neutral-800 data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.TEXT}`]:\n          'bg-text data-[indicator=true]:text-text-opposite',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = SwitchSelectorColor.PRIMARY,\n  size = SwitchSelectorSize.MD,\n  className,\n  hoverable = true,\n  disabled = false,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs, {\n    isHoverable: hoverable,\n  });\n\n  const selectedIndex = choices.findIndex(\n    (choice) => choice.value === valueState\n  );\n\n  // The indicator follows hover if hoverable, otherwise the selected option\n  const indicatorIndex =\n    hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        disabled,\n        className,\n      })}\n      role=\"tablist\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = index === selectedIndex;\n          const isIndicatorOwner = index === indicatorIndex;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                }),\n                disabled && 'cursor-not-allowed'\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected ? 'true' : undefined}\n              data-indicator={isIndicatorOwner ? 'true' : undefined}\n              disabled={disabled || isSelected}\n              tabIndex={isSelected ? 0 : -1}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n              onMouseEnter={() => !disabled && setHoveredIndex(index)}\n              onMouseLeave={() => !disabled && setHoveredIndex(null)}\n            >\n              {content}\n            </button>\n          );\n        })}\n\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n  content: ReactNode;\n  value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n  { content: 'Off', value: false },\n  { content: 'On', value: true },\n];\n\nexport type SwitchSelectorProps<T = boolean> = {\n  choices?: SwitchSelectorChoices<T>;\n  value?: T;\n  defaultValue?: T;\n  onChange?: (choice: T) => void;\n  className?: string;\n  itemClassName?: string;\n  hoverable?: boolean;\n  disabled?: boolean;\n} & VariantProps<typeof switchSelectorVariant> &\n  VariantProps<typeof choiceVariant>;\n\nexport enum SwitchSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n  'flex w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]: 'border-primary text-primary',\n        [`${SwitchSelectorColor.SECONDARY}`]: 'border-secondary text-secondary',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'border-destructive bg-destructive text-destructive',\n        [`${SwitchSelectorColor.NEUTRAL}`]: 'border-neutral text-neutral',\n        [`${SwitchSelectorColor.LIGHT}`]: 'border-white text-white',\n        [`${SwitchSelectorColor.DARK}`]: 'border-neutral-800 text-neutral-800',\n        [`${SwitchSelectorColor.TEXT}`]: 'border-text text-text',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      color: `${SwitchSelectorColor.PRIMARY}`,\n      disabled: false,\n    },\n  }\n);\n\nexport enum SwitchSelectorSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nconst choiceVariant = cva(\n  'z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',\n  {\n    variants: {\n      size: {\n        [`${SwitchSelectorSize.SM}`]: 'px-2 py-1 text-xs',\n        [`${SwitchSelectorSize.MD}`]: 'p-2 text-sm',\n        [`${SwitchSelectorSize.LG}`]: 'p-4 text-base',\n      },\n    },\n    defaultVariants: {\n      size: `${SwitchSelectorSize.MD}`,\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-0 h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        [`${SwitchSelectorColor.PRIMARY}`]:\n          'bg-primary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.SECONDARY}`]:\n          'bg-secondary data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.DESTRUCTIVE}`]:\n          'bg-destructive data-[indicator=true]:text-text',\n        [`${SwitchSelectorColor.NEUTRAL}`]:\n          'bg-neutral data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.LIGHT}`]:\n          'bg-white data-[indicator=true]:text-black',\n        [`${SwitchSelectorColor.DARK}`]:\n          'bg-neutral-800 data-[indicator=true]:text-white',\n        [`${SwitchSelectorColor.TEXT}`]:\n          'bg-text data-[indicator=true]:text-text-opposite',\n      },\n    },\n  }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n *   choices={[\n *     { content: 'Option 1', value: 'option1' },\n *     { content: 'Option 2', value: 'option2' },\n *     { content: 'Option 3', value: 'option3' },\n *   ]}\n *   value=\"option1\"\n *   onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n  choices = defaultChoices as SwitchSelectorChoices<T>,\n  value,\n  defaultValue,\n  onChange,\n  color = SwitchSelectorColor.PRIMARY,\n  size = SwitchSelectorSize.MD,\n  className,\n  itemClassName,\n  hoverable = true,\n  disabled = false,\n}: SwitchSelectorProps<T>) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0].value\n  );\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs, {\n    isHoverable: hoverable,\n  });\n\n  const selectedIndex = choices.findIndex(\n    (choice) => choice.value === valueState\n  );\n\n  // The indicator follows hover if hoverable, otherwise the selected option\n  const indicatorIndex =\n    hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return (\n    <div\n      className={switchSelectorVariant({\n        color,\n        disabled,\n        className,\n      })}\n      role=\"tablist\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      <div className=\"relative flex size-full flex-row items-center justify-center\">\n        {choices.map((choice, index) => {\n          const { content, value, ...buttonProps } = choice;\n\n          const isKeyOfKey =\n            typeof value === 'string' || typeof value === 'number';\n\n          const isSelected = index === selectedIndex;\n          const isIndicatorOwner = index === indicatorIndex;\n\n          return (\n            <button\n              {...buttonProps}\n              className={cn(\n                choiceVariant({\n                  size,\n                }),\n                disabled && 'cursor-not-allowed',\n                itemClassName\n              )}\n              key={isKeyOfKey ? value : index}\n              role=\"tab\"\n              onClick={() => handleChange(value)}\n              aria-selected={isSelected ? 'true' : undefined}\n              data-indicator={isIndicatorOwner ? 'true' : undefined}\n              disabled={disabled || isSelected}\n              tabIndex={isSelected ? 0 : -1}\n              ref={(el) => {\n                optionsRefs.current[index] = el!;\n              }}\n              onMouseEnter={() => !disabled && setHoveredIndex(index)}\n              onMouseLeave={() => !disabled && setHoveredIndex(null)}\n            >\n              {content}\n            </button>\n          );\n        })}\n\n        {choiceIndicatorPosition && (\n          <div\n            className={cn(\n              indicatorVariant({\n                color,\n              })\n            )}\n            style={choiceIndicatorPosition}\n            ref={indicatorRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/hooks/useAuth/useOAuth2.mjs

@@ -1,2 +1,2 @@
-"use client";import{useQuery as e}from"@tanstack/react-query";import t from"@intlayer/config/built";import{useConfiguration as n}from"@intlayer/editor-react";import{getOAuthAPI as r}from"@intlayer/api";const i=i=>{let a=n(),o=i??a??t,{data:s}=e({queryKey:[`oAuth2AccessToken`],queryFn:r(o).getOAuth2AccessToken,enabled:!!(o.editor.clientId&&o.editor.clientSecret),staleTime:0,gcTime:0,refetchOnWindowFocus:!1,refetchOnMount:!1,refetchOnReconnect:!1,refetchInterval:!1,refetchIntervalInBackground:!1});return{oAuth2AccessToken:s?.data}};export{i as useOAuth2};
+"use client";import e from"@intlayer/config/built";import{useQuery as t}from"@tanstack/react-query";import{useConfiguration as n}from"@intlayer/editor-react";import{getOAuthAPI as r}from"@intlayer/api";const i=i=>{let a=n(),o=i??a??e,{data:s}=t({queryKey:[`oAuth2AccessToken`],queryFn:r(o).getOAuth2AccessToken,enabled:!!(o.editor.clientId&&o.editor.clientSecret),staleTime:0,gcTime:0,refetchOnWindowFocus:!1,refetchOnMount:!1,refetchOnReconnect:!1,refetchInterval:!1,refetchIntervalInBackground:!1});return{oAuth2AccessToken:s?.data}};export{i as useOAuth2};
 //# sourceMappingURL=useOAuth2.mjs.map

package/dist/esm/hooks/useAuth/useSession.mjs

@@ -1,2 +1,2 @@
-"use client";import{getAuthAPI as e}from"../../libs/auth.mjs";import{useQueryClient as t}from"../reactQuery.mjs";import{useQuery as n}from"@tanstack/react-query";import r from"@intlayer/config/built";import{useConfiguration as i}from"@intlayer/editor-react";const a=(a,o)=>{let s=i(),c=o??s??r,l=t(),{data:u,isFetched:d,refetch:f}=n({queryKey:[`session`],queryFn:async()=>(await e(c).getSession()).data,staleTime:60*1e3,gcTime:300*1e3,refetchOnMount:!0,refetchOnWindowFocus:!1,refetchOnReconnect:!1,enabled:!a}),p=u??(d?null:void 0),m=e=>{l.setQueryData([`session`],e)},h=async()=>(await f()).data;return{session:p,fetchSession:h,revalidateSession:h,setSession:m}};export{a as useSession};
+"use client";import{getAuthAPI as e}from"../../libs/auth.mjs";import{useQueryClient as t}from"../reactQuery.mjs";import n from"@intlayer/config/built";import{useQuery as r}from"@tanstack/react-query";import{useConfiguration as i}from"@intlayer/editor-react";const a=(a,o)=>{let s=i(),c=o??s??n,l=t(),{data:u,isFetched:d,refetch:f}=r({queryKey:[`session`],queryFn:async()=>(await e(c).getSession()).data,staleTime:60*1e3,gcTime:300*1e3,refetchOnMount:!0,refetchOnWindowFocus:!1,refetchOnReconnect:!1,enabled:!a}),p=u??(d?null:void 0),m=e=>{l.setQueryData([`session`],e)},h=async()=>(await f()).data;return{session:p,fetchSession:h,revalidateSession:h,setSession:m}};export{a as useSession};
 //# sourceMappingURL=useSession.mjs.map

package/dist/types/components/Badge/index.d.ts

@@ -44,8 +44,8 @@ declare enum BadgeSize {
  */
 declare const badgeVariants: (props?: {
   color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "error" | "success" | "custom";
-  variant?: "default" | "none" | "outline" | "hoverable";
-  size?: "md" | "sm" | "lg";
+  variant?: "none" | "default" | "hoverable" | "outline";
+  size?: "sm" | "md" | "lg";
 } & class_variance_authority_types0.ClassProp) => string;
 /**
  * Badge component props interface

package/dist/types/components/Breadcrumb/breadcrumb.content.d.ts

@@ -24,7 +24,7 @@ declare const breadCrumbContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;

package/dist/types/components/Browser/Browser.content.d.ts

@@ -24,7 +24,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -67,7 +67,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -111,7 +111,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -154,7 +154,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -197,7 +197,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -240,7 +240,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -283,7 +283,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -326,7 +326,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;

package/dist/types/components/Button/Button.d.ts

@@ -60,10 +60,10 @@ declare enum ButtonTextAlign {
  * Enhanced button variants with improved accessibility and focus states
  */
 declare const buttonVariants: (props?: {
-  size?: "md" | "sm" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "text" | "current" | "text-inverse" | "error" | "success" | "custom";
-  roundedSize?: "md" | "sm" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
-  variant?: "input" | "default" | "none" | "outline" | "link" | "invisible-link" | "hoverable" | "fade";
+  size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
+  color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "text-inverse" | "error" | "success" | "custom" | "card" | "current";
+  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "4xl" | "5xl";
+  variant?: "input" | "none" | "default" | "invisible-link" | "hoverable" | "outline" | "link" | "fade";
   textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
 } & class_variance_authority_types0.ClassProp) => string;