admin-ui-starter-kit 0.4.4 → 0.5.0

package/dist/showcase/assets/layout-primitives-BnIgANs6.js

@@ -0,0 +1,34 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,t as a}from"./example-CbMg22fx.js";import{n as o,s}from"./index-DNH0y0r-.js";var c=s();function l({ratio:e,className:t,...n}){return(0,c.jsx)(`div`,{"data-slot":`aspect-ratio`,style:{"--ratio":e},className:o(`relative aspect-(--ratio)`,t),...n})}var u=t(n(),1);function d(e,t){let n=getComputedStyle(e);return t*parseFloat(n.fontSize)}function f(e,t){let n=getComputedStyle(e.ownerDocument.documentElement);return t*parseFloat(n.fontSize)}function p(e){return e/100*window.innerHeight}function m(e){return e/100*window.innerWidth}function h(e){switch(typeof e){case`number`:return[e,`px`];case`string`:{let t=parseFloat(e);return e.endsWith(`%`)?[t,`%`]:e.endsWith(`px`)?[t,`px`]:e.endsWith(`rem`)?[t,`rem`]:e.endsWith(`em`)?[t,`em`]:e.endsWith(`vh`)?[t,`vh`]:e.endsWith(`vw`)?[t,`vw`]:[t,`%`]}}}function g({groupSize:e,panelElement:t,styleProp:n}){let r,[i,a]=h(n);switch(a){case`%`:r=i/100*e;break;case`px`:r=i;break;case`rem`:r=f(t,i);break;case`em`:r=d(t,i);break;case`vh`:r=p(i);break;case`vw`:r=m(i);break}return r}function _(e){return parseFloat(e.toFixed(3))}function v({group:e}){let{orientation:t,panels:n}=e;return n.reduce((e,n)=>(e+=t===`horizontal`?n.element.offsetWidth:n.element.offsetHeight,e),0)}function y(e){let{panels:t}=e,n=v({group:e});return n===0?t.map(e=>({groupResizeBehavior:e.panelConstraints.groupResizeBehavior,collapsedSize:0,collapsible:e.panelConstraints.collapsible===!0,defaultSize:void 0,disabled:e.panelConstraints.disabled,minSize:0,maxSize:100,panelId:e.id})):t.map(e=>{let{element:t,panelConstraints:r}=e,i=0;r.collapsedSize!==void 0&&(i=_(g({groupSize:n,panelElement:t,styleProp:r.collapsedSize})/n*100));let a;r.defaultSize!==void 0&&(a=_(g({groupSize:n,panelElement:t,styleProp:r.defaultSize})/n*100));let o=0;r.minSize!==void 0&&(o=_(g({groupSize:n,panelElement:t,styleProp:r.minSize})/n*100));let s=100;return r.maxSize!==void 0&&(s=_(g({groupSize:n,panelElement:t,styleProp:r.maxSize})/n*100)),{groupResizeBehavior:r.groupResizeBehavior,collapsedSize:i,collapsible:r.collapsible===!0,defaultSize:a,disabled:r.disabled,minSize:o,maxSize:s,panelId:e.id}})}function b(e,t=`Assertion error`){if(!e)throw Error(t)}function x(e,t){return Array.from(t).sort(e===`horizontal`?S:C)}function S(e,t){let n=e.element.offsetLeft-t.element.offsetLeft;return n===0?e.element.offsetWidth-t.element.offsetWidth:n}function C(e,t){let n=e.element.offsetTop-t.element.offsetTop;return n===0?e.element.offsetHeight-t.element.offsetHeight:n}function w(e){return typeof e==`object`&&!!e&&`nodeType`in e&&e.nodeType===Node.ELEMENT_NODE}function T(e,t){return{x:e.x>=t.left&&e.x<=t.right?0:Math.min(Math.abs(e.x-t.left),Math.abs(e.x-t.right)),y:e.y>=t.top&&e.y<=t.bottom?0:Math.min(Math.abs(e.y-t.top),Math.abs(e.y-t.bottom))}}function E({orientation:e,rects:t,targetRect:n}){let r={x:n.x+n.width/2,y:n.y+n.height/2},i,a=Number.MAX_VALUE;for(let n of t){let{x:t,y:o}=T(r,n),s=e===`horizontal`?t:o;s<a&&(a=s,i=n)}return b(i,`No rect found`),i}var D;function O(){return D===void 0&&(D=typeof matchMedia==`function`?!!matchMedia(`(pointer:coarse)`).matches:!1),D}function k(e){let{element:t,orientation:n,panels:r,separators:i}=e,a=x(n,Array.from(t.children).filter(w).map(e=>({element:e}))).map(({element:e})=>e),o=[],s=!1,c=!1,l=-1,u=-1,d=0,f,p=[];{let e=-1;for(let t of a)t.hasAttribute(`data-panel`)&&(e++,t.hasAttribute(`data-disabled`)||(d++,l===-1&&(l=e),u=e))}if(d>1){let t=-1;for(let d of a)if(d.hasAttribute(`data-panel`)){t++;let i=r.find(e=>e.element===d);if(i){if(f){let r=f.element.getBoundingClientRect(),a=d.getBoundingClientRect(),m;if(c){let e=n===`horizontal`?new DOMRect(r.right,r.top,0,r.height):new DOMRect(r.left,r.bottom,r.width,0),t=n===`horizontal`?new DOMRect(a.left,a.top,0,a.height):new DOMRect(a.left,a.top,a.width,0);switch(p.length){case 0:m=[e,t];break;case 1:{let i=p[0];m=[i,E({orientation:n,rects:[r,a],targetRect:i.element.getBoundingClientRect()})===r?t:e];break}default:m=p;break}}else m=p.length?p:[n===`horizontal`?new DOMRect(r.right,a.top,a.left-r.right,a.height):new DOMRect(a.left,r.bottom,a.width,a.top-r.bottom)];for(let n of m){let r=`width`in n?n:n.element.getBoundingClientRect(),a=O()?e.resizeTargetMinimumSize.coarse:e.resizeTargetMinimumSize.fine;if(r.width<a){let e=a-r.width;r=new DOMRect(r.x-e/2,r.y,r.width+e,r.height)}if(r.height<a){let e=a-r.height;r=new DOMRect(r.x,r.y-e/2,r.width,r.height+e)}!s&&!(t<=l||t>u)&&o.push({group:e,groupSize:v({group:e}),panels:[f,i],separator:`width`in n?void 0:n,rect:r}),s=!1}}c=!1,f=i,p=[]}}else if(d.hasAttribute(`data-separator`)){d.ariaDisabled!==null&&(s=!0);let e=i.find(e=>e.element===d);e?p.push(e):(f=void 0,p=[])}else c=!0}return o}var A=class{#e={};addListener(e,t){let n=this.#e[e];return n===void 0?this.#e[e]=[t]:n.includes(t)||n.push(t),()=>{this.removeListener(e,t)}}emit(e,t){let n=this.#e[e];if(n!==void 0)if(n.length===1)n[0].call(null,t);else{let e=!1,r=null,i=Array.from(n);for(let n=0;n<i.length;n++){let a=i[n];try{a.call(null,t)}catch(t){r===null&&(e=!0,r=t)}}if(e)throw r}}removeAllListeners(){this.#e={}}removeListener(e,t){let n=this.#e[e];if(n!==void 0){let e=n.indexOf(t);e>=0&&n.splice(e,1)}}},j=new Map,ee=new A;function te(e){j=new Map(j),j.delete(e)}function ne(e,t){for(let[t]of j)if(t.id===e)return t}function M(e,t){for(let[t,n]of j)if(t.id===e)return n;if(t)throw Error(`Could not find data for Group with id ${e}`)}function N(){return j}function P(e,t){return ee.addListener(`groupChange`,n=>{n.group.id===e&&t(n)})}function F(e,t){let n=j.get(e);j=new Map(j),j.set(e,t),ee.emit(`groupChange`,{group:e,prev:n,next:t})}function re(e,t,n){let r,i={x:1/0,y:1/0};for(let a of t){let t=T(n,a.rect);switch(e){case`horizontal`:t.x<=i.x&&(r=a,i=t);break;case`vertical`:t.y<=i.y&&(r=a,i=t);break}}return r?{distance:i,hitRegion:r}:void 0}function ie(e){return typeof e==`object`&&!!e&&`nodeType`in e&&e.nodeType===Node.DOCUMENT_FRAGMENT_NODE}function ae(e,t){if(e===t)throw Error(`Cannot compare node with itself`);let n={a:de(e),b:de(t)},r;for(;n.a.at(-1)===n.b.at(-1);)r=n.a.pop(),n.b.pop();b(r,`Stacking order can only be calculated for elements with a common ancestor`);let i={a:ue(le(n.a)),b:ue(le(n.b))};if(i.a===i.b){let e=r.childNodes,t={a:n.a.at(-1),b:n.b.at(-1)},i=e.length;for(;i--;){let n=e[i];if(n===t.a)return 1;if(n===t.b)return-1}}return Math.sign(i.a-i.b)}var oe=/\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;function se(e){let t=getComputedStyle(fe(e)??e).display;return t===`flex`||t===`inline-flex`}function ce(e){let t=getComputedStyle(e);return!!(t.position===`fixed`||t.zIndex!==`auto`&&(t.position!==`static`||se(e))||+t.opacity<1||`transform`in t&&t.transform!==`none`||`webkitTransform`in t&&t.webkitTransform!==`none`||`mixBlendMode`in t&&t.mixBlendMode!==`normal`||`filter`in t&&t.filter!==`none`||`webkitFilter`in t&&t.webkitFilter!==`none`||`isolation`in t&&t.isolation===`isolate`||oe.test(t.willChange)||t.webkitOverflowScrolling===`touch`)}function le(e){let t=e.length;for(;t--;){let n=e[t];if(b(n,`Missing node`),ce(n))return n}return null}function ue(e){return e&&Number(getComputedStyle(e).zIndex)||0}function de(e){let t=[];for(;e;)t.push(e),e=fe(e);return t}function fe(e){let{parentNode:t}=e;return ie(t)?t.host:t}function pe(e,t){return e.x<t.x+t.width&&e.x+e.width>t.x&&e.y<t.y+t.height&&e.y+e.height>t.y}function me({groupElement:e,hitRegion:t,pointerEventTarget:n}){if(!w(n)||n.contains(e)||e.contains(n))return!0;if(ae(n,e)>0){let r=n;for(;r;){if(r.contains(e))return!0;if(pe(r.getBoundingClientRect(),t))return!1;r=r.parentElement}}return!0}function he(e,t){let n=[];return t.forEach((t,r)=>{if(r.disabled)return;let i=k(r),a=re(r.orientation,i,{x:e.clientX,y:e.clientY});a&&a.distance.x<=0&&a.distance.y<=0&&me({groupElement:r.element,hitRegion:a.hitRegion.rect,pointerEventTarget:e.target})&&n.push(a.hitRegion)}),n}function ge(e,t){if(e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(e[n]!=t[n])return!1;return!0}function I(e,t,n=0){return Math.abs(_(e)-_(t))<=n}function L(e,t){return I(e,t)?0:e>t?1:-1}function R({overrideDisabledPanels:e,panelConstraints:t,prevSize:n,size:r}){let{collapsedSize:i=0,collapsible:a,disabled:o,maxSize:s=100,minSize:c=0}=t;if(o&&!e)return n;if(L(r,c)<0)if(a){let e=(i+c)/2;r=L(r,e)<0?i:c}else r=c;return r=Math.min(s,r),r=_(r),r}function z({delta:e,initialLayout:t,panelConstraints:n,pivotIndices:r,prevLayout:i,trigger:a}){if(I(e,0))return t;let o=a===`imperative-api`,s=Object.values(t),c=Object.values(i),l=[...s],[u,d]=r;b(u!=null,`Invalid first pivot index`),b(d!=null,`Invalid second pivot index`);let f=0;switch(a){case`keyboard`:{let t=e<0?d:u,r=n[t];b(r,`Panel constraints not found for index ${t}`);let{collapsedSize:i=0,collapsible:a,minSize:o=0}=r;if(a){let n=s[t];if(b(n!=null,`Previous layout not found for panel index ${t}`),I(n,i)){let t=o-n;L(t,Math.abs(e))>0&&(e=e<0?0-t:t)}}}{let t=e<0?u:d,r=n[t];b(r,`No panel constraints found for index ${t}`);let{collapsedSize:i=0,collapsible:a,minSize:o=0}=r;if(a){let n=s[t];if(b(n!=null,`Previous layout not found for panel index ${t}`),I(n,o)){let t=n-i;L(t,Math.abs(e))>0&&(e=e<0?0-t:t)}}}break;default:{let t=e<0?d:u,r=n[t];b(r,`Panel constraints not found for index ${t}`);let i=s[t],{collapsible:a,collapsedSize:o,minSize:c}=r;if(a&&L(i,c)<0)if(e>0){let t=c-o,n=t/2;L(i+e,c)<0&&(e=L(e,n)<=0?0:t)}else{let t=c-o,n=100-t/2;L(i-e,c)<0&&(e=L(100+e,n)>0?0:-t)}break}}{let t=e<0?1:-1,r=e<0?d:u,i=0;for(;;){let e=s[r];b(e!=null,`Previous layout not found for panel index ${r}`);let a=R({overrideDisabledPanels:o,panelConstraints:n[r],prevSize:e,size:100})-e;if(i+=a,r+=t,r<0||r>=n.length)break}let a=Math.min(Math.abs(e),Math.abs(i));e=e<0?0-a:a}{let t=e<0?u:d;for(;t>=0&&t<n.length;){let r=Math.abs(e)-Math.abs(f),i=s[t];b(i!=null,`Previous layout not found for panel index ${t}`);let a=i-r,c=R({overrideDisabledPanels:o,panelConstraints:n[t],prevSize:i,size:a});if(!I(i,c)&&(f+=i-c,l[t]=c,f.toFixed(3).localeCompare(Math.abs(e).toFixed(3),void 0,{numeric:!0})>=0))break;e<0?t--:t++}}if(ge(c,l))return i;{let t=e<0?d:u,r=s[t];b(r!=null,`Previous layout not found for panel index ${t}`);let i=r+f,a=R({overrideDisabledPanels:o,panelConstraints:n[t],prevSize:r,size:i});if(l[t]=a,!I(a,i)){let t=i-a,r=e<0?d:u;for(;r>=0&&r<n.length;){let i=l[r];b(i!=null,`Previous layout not found for panel index ${r}`);let a=i+t,s=R({overrideDisabledPanels:o,panelConstraints:n[r],prevSize:i,size:a});if(I(i,s)||(t-=s-i,l[r]=s),I(t,0))break;e>0?r--:r++}}}if(!I(Object.values(l).reduce((e,t)=>t+e,0),100,.1))return i;let p=Object.keys(i);return l.reduce((e,t,n)=>(e[p[n]]=t,e),{})}function B(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(let n in e)if(t[n]===void 0||L(e[n],t[n])!==0)return!1;return!0}function V({layout:e,panelConstraints:t}){let n=Object.values(e),r=[...n],i=r.reduce((e,t)=>e+t,0);if(r.length!==t.length)throw Error(`Invalid ${t.length} panel layout: ${r.map(e=>`${e}%`).join(`, `)}`);if(!I(i,100)&&r.length>0)for(let e=0;e<t.length;e++){let t=r[e];b(t!=null,`No layout data found for index ${e}`),r[e]=100/i*t}let a=0;for(let e=0;e<t.length;e++){let i=n[e];b(i!=null,`No layout data found for index ${e}`);let o=r[e];b(o!=null,`No layout data found for index ${e}`);let s=R({overrideDisabledPanels:!0,panelConstraints:t[e],prevSize:i,size:o});o!=s&&(a+=o-s,r[e]=s)}if(!I(a,0))for(let e=0;e<t.length;e++){let n=r[e];b(n!=null,`No layout data found for index ${e}`);let i=n+a,o=R({overrideDisabledPanels:!0,panelConstraints:t[e],prevSize:n,size:i});if(n!==o&&(a-=o-n,r[e]=o,I(a,0)))break}let o=Object.keys(e);return r.reduce((e,t,n)=>(e[o[n]]=t,e),{})}function _e({groupId:e,panelId:t}){let n=()=>{let t=N();for(let[n,{defaultLayoutDeferred:r,derivedPanelConstraints:i,layout:a,groupSize:o,separatorToPanels:s}]of t)if(n.id===e)return{defaultLayoutDeferred:r,derivedPanelConstraints:i,group:n,groupSize:o,layout:a,separatorToPanels:s};throw Error(`Group ${e} not found`)},r=()=>{let e=n().derivedPanelConstraints.find(e=>e.panelId===t);if(e!==void 0)return e;throw Error(`Panel constraints not found for Panel ${t}`)},i=()=>{let e=n().group.panels.find(e=>e.id===t);if(e!==void 0)return e;throw Error(`Layout not found for Panel ${t}`)},a=()=>{let e=n().layout[t];if(e!==void 0)return e;throw Error(`Layout not found for Panel ${t}`)},o=({nextSize:e,panels:n,prevLayout:r,derivedPanelConstraints:i})=>{let o=a(),s=n.findIndex(e=>e.id===t),c=s===0,l=s===n.length-1;if(l&&e<o&&(c||n.slice(0,s).every((e,t)=>{let n=i[t];return n?.collapsible&&I(n.collapsedSize,r[n.panelId])}))){let e=n.slice(0,s).reduce((e,t)=>e+r[t.id],0);return{...r,[t]:_(100-e)}}return z({delta:l?o-e:e-o,initialLayout:r,panelConstraints:i,pivotIndices:l?[s-1,s]:[s,s+1],prevLayout:r,trigger:`imperative-api`})},s=e=>{if(e===a())return;let{defaultLayoutDeferred:t,derivedPanelConstraints:r,group:i,groupSize:s,layout:c,separatorToPanels:l}=n(),u=V({layout:o({nextSize:e,panels:i.panels,prevLayout:c,derivedPanelConstraints:r}),panelConstraints:r});B(c,u)||F(i,{defaultLayoutDeferred:t,derivedPanelConstraints:r,groupSize:s,layout:u,separatorToPanels:l})};return{collapse:()=>{let{collapsible:e,collapsedSize:t}=r(),{mutableValues:n}=i(),o=a();e&&o!==t&&(n.expandToSize=o,s(t))},expand:()=>{let{collapsible:e,collapsedSize:t,minSize:n}=r(),{mutableValues:o}=i(),c=a();if(e&&c===t){let e=o.expandToSize??n;e===0&&(e=1),s(e)}},getSize:()=>{let{group:e}=n(),t=a(),{element:r}=i();return{asPercentage:t,inPixels:e.orientation===`horizontal`?r.offsetWidth:r.offsetHeight}},isCollapsed:()=>{let{collapsible:e,collapsedSize:t}=r(),n=a();return e&&I(t,n)},resize:e=>{let{group:t}=n(),{element:r}=i(),a=v({group:t});s(_(g({groupSize:a,panelElement:r,styleProp:e})/a*100))}}}function ve(e){e.defaultPrevented||he(e,N()).forEach(t=>{if(t.separator&&!t.separator.disableDoubleClick){let n=t.panels.find(e=>e.panelConstraints.defaultSize!==void 0);if(n){let r=n.panelConstraints.defaultSize,i=_e({groupId:t.group.id,panelId:n.id});i&&r!==void 0&&(i.resize(r),e.preventDefault())}}})}function H(e){let t=N();for(let[n]of t)if(n.separators.some(t=>t.element===e))return n;throw Error(`Could not find parent Group for separator element`)}function ye({groupId:e}){let t=()=>{let t=N();for(let[n,r]of t)if(n.id===e)return{group:n,...r};throw Error(`Could not find Group with id "${e}"`)};return{getLayout(){let{defaultLayoutDeferred:e,layout:n}=t();return e?{}:n},setLayout(e){let{defaultLayoutDeferred:n,derivedPanelConstraints:r,group:i,groupSize:a,layout:o,separatorToPanels:s}=t(),c=V({layout:e,panelConstraints:r});return n?o:(B(o,c)||F(i,{defaultLayoutDeferred:n,derivedPanelConstraints:r,groupSize:a,layout:c,separatorToPanels:s}),c)}}}function U(e,t){let n=H(e),r=M(n.id,!0),i=n.separators.find(t=>t.element===e);b(i,`Matching separator not found`);let a=r.separatorToPanels.get(i);b(a,`Matching panels not found`);let o=a.map(e=>n.panels.indexOf(e)),s=ye({groupId:n.id}).getLayout(),c=V({layout:z({delta:t,initialLayout:s,panelConstraints:r.derivedPanelConstraints,pivotIndices:o,prevLayout:s,trigger:`keyboard`}),panelConstraints:r.derivedPanelConstraints});B(s,c)||F(n,{defaultLayoutDeferred:r.defaultLayoutDeferred,derivedPanelConstraints:r.derivedPanelConstraints,groupSize:r.groupSize,layout:c,separatorToPanels:r.separatorToPanels})}function be(e){if(e.defaultPrevented)return;let t=e.currentTarget,n=H(t);if(!n.disabled)switch(e.key){case`ArrowDown`:e.preventDefault(),n.orientation===`vertical`&&U(t,5);break;case`ArrowLeft`:e.preventDefault(),n.orientation===`horizontal`&&U(t,-5);break;case`ArrowRight`:e.preventDefault(),n.orientation===`horizontal`&&U(t,5);break;case`ArrowUp`:e.preventDefault(),n.orientation===`vertical`&&U(t,-5);break;case`End`:e.preventDefault(),U(t,100);break;case`Enter`:{e.preventDefault();let n=H(t),{derivedPanelConstraints:r,layout:i,separatorToPanels:a}=M(n.id,!0),o=n.separators.find(e=>e.element===t);b(o,`Matching separator not found`);let s=a.get(o);b(s,`Matching panels not found`);let c=s[0],l=r.find(e=>e.panelId===c.id);if(b(l,`Panel metadata not found`),l.collapsible){let e=i[c.id];U(t,(l.collapsedSize===e?n.mutableState.expandedPanelSizes[c.id]??l.minSize:l.collapsedSize)-e)}break}case`F6`:{e.preventDefault();let n=H(t).separators.map(e=>e.element),r=Array.from(n).findIndex(t=>t===e.currentTarget);b(r!==null,`Index not found`),n[e.shiftKey?r>0?r-1:n.length-1:r+1<n.length?r+1:0].focus({preventScroll:!0});break}case`Home`:e.preventDefault(),U(t,-100);break}}var W={cursorFlags:0,state:`inactive`},G=new A;function K(){return W}function xe(e){return G.addListener(`change`,e)}function Se(e){let t=W,n={...W};n.cursorFlags=e,W=n,G.emit(`change`,{prev:t,next:n})}function q(e){let t=W;W=e,G.emit(`change`,{prev:t,next:e})}function Ce(e){if(e.defaultPrevented||e.pointerType===`mouse`&&e.button>0)return;let t=N(),n=he(e,t),r=new Map,i=!1;n.forEach(e=>{e.separator&&(i||(i=!0,e.separator.element.focus({focusVisible:!1,preventScroll:!0})));let n=t.get(e.group);n&&r.set(e.group,n.layout)}),q({cursorFlags:0,hitRegions:n,initialLayoutMap:r,pointerDownAtPoint:{x:e.clientX,y:e.clientY},state:`active`}),n.length&&e.preventDefault()}var we=e=>e,J=()=>{},Te=1,Ee=2,De=4,Oe=8,ke=3,Ae=12,Y;function je(){return Y===void 0&&(Y=!1,typeof window<`u`&&(window.navigator.userAgent.includes(`Chrome`)||window.navigator.userAgent.includes(`Firefox`))&&(Y=!0)),Y}function Me({cursorFlags:e,groups:t,state:n}){let r=0,i=0;switch(n){case`active`:case`hover`:t.forEach(e=>{if(!e.mutableState.disableCursor)switch(e.orientation){case`horizontal`:r++;break;case`vertical`:i++;break}})}if(!(r===0&&i===0)){switch(n){case`active`:if(e&&je()){let t=(e&Te)!==0,n=(e&Ee)!==0,r=(e&De)!==0,i=(e&Oe)!==0;if(t)return r?`se-resize`:i?`ne-resize`:`e-resize`;if(n)return r?`sw-resize`:i?`nw-resize`:`w-resize`;if(r)return`s-resize`;if(i)return`n-resize`}break}return je()?r>0&&i>0?`move`:r>0?`ew-resize`:`ns-resize`:r>0&&i>0?`grab`:r>0?`col-resize`:`row-resize`}}var Ne=new WeakMap;function X(e){if(e.defaultView===null||e.defaultView===void 0)return;let{prevStyle:t,styleSheet:n}=Ne.get(e)??{};n===void 0&&(n=new e.defaultView.CSSStyleSheet,e.adoptedStyleSheets&&(Object.isExtensible(e.adoptedStyleSheets)?e.adoptedStyleSheets.push(n):e.adoptedStyleSheets=[...e.adoptedStyleSheets,n]));let r=K();switch(r.state){case`active`:case`hover`:{let e=Me({cursorFlags:r.cursorFlags,groups:r.hitRegions.map(e=>e.group),state:r.state}),i=`*, *:hover {cursor: ${e} !important; }`;if(t===i)return;t=i,e?n.cssRules.length===0?n.insertRule(i):n.replaceSync(i):n.cssRules.length===1&&n.deleteRule(0);break}case`inactive`:t=void 0,n.cssRules.length===1&&n.deleteRule(0);break}Ne.set(e,{prevStyle:t,styleSheet:n})}function Pe({document:e,event:t,hitRegions:n,initialLayoutMap:r,mountedGroups:i,pointerDownAtPoint:a,prevCursorFlags:o}){let s=0;n.forEach(e=>{let{group:n,groupSize:o}=e,{orientation:c,panels:l}=n,{disableCursor:u}=n.mutableState,d=0;d=a?c===`horizontal`?(t.clientX-a.x)/o*100:(t.clientY-a.y)/o*100:c===`horizontal`?t.clientX<0?-100:100:t.clientY<0?-100:100;let f=r.get(n),p=i.get(n);if(!f||!p)return;let{defaultLayoutDeferred:m,derivedPanelConstraints:h,groupSize:g,layout:_,separatorToPanels:v}=p;if(h&&_&&v){let t=z({delta:d,initialLayout:f,panelConstraints:h,pivotIndices:e.panels.map(e=>l.indexOf(e)),prevLayout:_,trigger:`mouse-or-touch`});if(B(t,_)){if(d!==0&&!u)switch(c){case`horizontal`:s|=d<0?Te:Ee;break;case`vertical`:s|=d<0?De:Oe;break}}else F(e.group,{defaultLayoutDeferred:m,derivedPanelConstraints:h,groupSize:g,layout:t,separatorToPanels:v})}});let c=0;t.movementX===0?c|=o&ke:c|=s&ke,t.movementY===0?c|=o&Ae:c|=s&Ae,Se(c),X(e)}function Fe(e){let t=N(),n=K();switch(n.state){case`active`:Pe({document:e.currentTarget,event:e,hitRegions:n.hitRegions,initialLayoutMap:n.initialLayoutMap,mountedGroups:t,prevCursorFlags:n.cursorFlags})}}function Ie(e){if(e.defaultPrevented)return;let t=K(),n=N();switch(t.state){case`active`:if(e.buttons===0){q({cursorFlags:0,state:`inactive`}),t.hitRegions.forEach(e=>{let t=M(e.group.id,!0);F(e.group,t)});return}for(let n of t.hitRegions)if(n.separator){let{element:t}=n.separator;t.hasPointerCapture?.(e.pointerId)||t.setPointerCapture?.(e.pointerId)}Pe({document:e.currentTarget,event:e,hitRegions:t.hitRegions,initialLayoutMap:t.initialLayoutMap,mountedGroups:n,pointerDownAtPoint:t.pointerDownAtPoint,prevCursorFlags:t.cursorFlags});break;default:{let r=he(e,n);r.length===0?t.state!==`inactive`&&q({cursorFlags:0,state:`inactive`}):q({cursorFlags:0,hitRegions:r,state:`hover`}),X(e.currentTarget);break}}}function Le(e){if(e.relatedTarget instanceof HTMLIFrameElement)switch(K().state){case`hover`:q({cursorFlags:0,state:`inactive`})}}function Re(e){if(e.defaultPrevented||e.pointerType===`mouse`&&e.button>0)return;let t=K();switch(t.state){case`active`:q({cursorFlags:0,state:`inactive`}),t.hitRegions.length>0&&(X(e.currentTarget),t.hitRegions.forEach(e=>{let t=M(e.group.id,!0);F(e.group,t)}),e.preventDefault())}}function ze(e){let t=0,n=0,r={};for(let i of e)if(i.defaultSize!==void 0){t++;let e=_(i.defaultSize);n+=e,r[i.panelId]=e}else r[i.panelId]=void 0;let i=e.length-t;if(i!==0){let t=_((100-n)/i);for(let n of e)n.defaultSize===void 0&&(r[n.panelId]=t)}return r}function Be(e,t,n){if(!n[0])return;let r=e.panels.find(e=>e.element===t);if(!r||!r.onResize)return;let i=v({group:e}),a=e.orientation===`horizontal`?r.element.offsetWidth:r.element.offsetHeight,o=r.mutableValues.prevSize,s={asPercentage:_(a/i*100),inPixels:a};r.mutableValues.prevSize=s,r.onResize(s,r.id,o)}function Ve(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(let n in e)if(e[n]!==t[n])return!1;return!0}function He({group:e,nextGroupSize:t,prevGroupSize:n,prevLayout:r}){if(n<=0||t<=0||n===t)return r;let i=0,a=0,o=!1,s=new Map,c=[];for(let l of e.panels){let e=r[l.id]??0;switch(l.panelConstraints.groupResizeBehavior){case`preserve-pixel-size`:{o=!0;let r=_(e/100*n/t*100);s.set(l.id,r),i+=r;break}default:c.push(l.id),a+=e;break}}if(!o||c.length===0)return r;let l=100-i,u={...r};if(s.forEach((e,t)=>{u[t]=e}),a>0)for(let e of c)u[e]=_((r[e]??0)/a*l);else{let e=_(l/c.length);for(let t of c)u[t]=e}return u}function Ue(e,t){let n=e.map(e=>e.id),r=Object.keys(t);if(n.length!==r.length)return!1;for(let e of n)if(!r.includes(e))return!1;return!0}var Z=new Map;function We(e){let t=!0;b(e.element.ownerDocument.defaultView,`Cannot register an unmounted Group`);let n=e.element.ownerDocument.defaultView.ResizeObserver,r=new Set,i=new Set,a=new n(n=>{for(let r of n){let{borderBoxSize:n,target:i}=r;if(i===e.element){if(t){let t=v({group:e});if(t===0)return;let n=M(e.id);if(!n)return;let r=y(e),i=n.defaultLayoutDeferred?ze(r):n.layout,a=V({layout:He({group:e,nextGroupSize:t,prevGroupSize:n.groupSize,prevLayout:i}),panelConstraints:r});if(!n.defaultLayoutDeferred&&B(n.layout,a)&&Ve(n.derivedPanelConstraints,r)&&n.groupSize===t)return;F(e,{defaultLayoutDeferred:!1,derivedPanelConstraints:r,groupSize:t,layout:a,separatorToPanels:n.separatorToPanels})}}else Be(e,i,n)}});a.observe(e.element),e.panels.forEach(e=>{b(!r.has(e.id),`Panel ids must be unique; id "${e.id}" was used more than once`),r.add(e.id),e.onResize&&a.observe(e.element)});let o=v({group:e}),s=y(e),c=e.panels.map(({id:e})=>e).join(`,`),l=e.mutableState.defaultLayout;l&&(Ue(e.panels,l)||(l=void 0));let u=V({layout:e.mutableState.layouts[c]??l??ze(s),panelConstraints:s}),d=e.element.ownerDocument;Z.set(d,(Z.get(d)??0)+1);let f=new Map;return k(e).forEach(e=>{e.separator&&f.set(e.separator,e.panels)}),F(e,{defaultLayoutDeferred:o===0,derivedPanelConstraints:s,groupSize:o,layout:u,separatorToPanels:f}),e.separators.forEach(e=>{b(!i.has(e.id),`Separator ids must be unique; id "${e.id}" was used more than once`),i.add(e.id),e.element.addEventListener(`keydown`,be)}),Z.get(d)===1&&(d.addEventListener(`dblclick`,ve,!0),d.addEventListener(`pointerdown`,Ce,!0),d.addEventListener(`pointerleave`,Fe),d.addEventListener(`pointermove`,Ie),d.addEventListener(`pointerout`,Le),d.addEventListener(`pointerup`,Re,!0)),function(){t=!1,Z.set(d,Math.max(0,(Z.get(d)??0)-1)),te(e),e.separators.forEach(e=>{e.element.removeEventListener(`keydown`,be)}),Z.get(d)||(d.removeEventListener(`dblclick`,ve,!0),d.removeEventListener(`pointerdown`,Ce,!0),d.removeEventListener(`pointerleave`,Fe),d.removeEventListener(`pointermove`,Ie),d.removeEventListener(`pointerout`,Le),d.removeEventListener(`pointerup`,Re,!0)),a.disconnect()}}function Ge(){let[e,t]=(0,u.useState)({});return[e,(0,u.useCallback)(()=>t({}),[])]}function Ke(e){let t=(0,u.useId)();return`${e??t}`}var Q=typeof window<`u`?u.useLayoutEffect:u.useEffect;function $(e){let t=(0,u.useRef)(e);return Q(()=>{t.current=e},[e]),(0,u.useCallback)((...e)=>t.current?.(...e),[t])}function qe(...e){return $(t=>{e.forEach(e=>{if(e)switch(typeof e){case`function`:e(t);break;case`object`:e.current=t;break}})})}function Je(e){let t=(0,u.useRef)({...e});return Q(()=>{for(let n in e)t.current[n]=e[n]},[e]),t.current}var Ye=(0,u.createContext)(null);function Xe(e,t){let n=(0,u.useRef)({getLayout:()=>({}),setLayout:we});(0,u.useImperativeHandle)(t,()=>n.current,[]),Q(()=>{Object.assign(n.current,ye({groupId:e}))})}function Ze({children:e,className:t,defaultLayout:n,disableCursor:r,disabled:i,elementRef:a,groupRef:o,id:s,onLayoutChange:l,onLayoutChanged:d,orientation:f=`horizontal`,resizeTargetMinimumSize:p={coarse:20,fine:10},style:m,...h}){let g=(0,u.useRef)({onLayoutChange:{},onLayoutChanged:{}}),_=$(e=>{B(g.current.onLayoutChange,e)||(g.current.onLayoutChange=e,l?.(e))}),v=$(e=>{B(g.current.onLayoutChanged,e)||(g.current.onLayoutChanged=e,d?.(e))}),b=Ke(s),S=(0,u.useRef)(null),[C,w]=Ge(),T=(0,u.useRef)({lastExpandedPanelSizes:{},layouts:{},panels:[],resizeTargetMinimumSize:p,separators:[]}),E=qe(S,a);Xe(b,o);let D=$((e,t)=>{let r=K(),i=ne(e),a=M(e);if(a){let e=!1;switch(r.state){case`active`:e=r.hitRegions.some(e=>e.group===i);break}return{flexGrow:a.layout[t]??1,pointerEvents:e?`none`:void 0}}if(n?.[t])return{flexGrow:n?.[t]}}),O=Je({defaultLayout:n,disableCursor:r}),k=(0,u.useMemo)(()=>({get disableCursor(){return!!O.disableCursor},getPanelStyles:D,id:b,orientation:f,registerPanel:e=>{let t=T.current;return t.panels=x(f,[...t.panels,e]),w(),()=>{t.panels=t.panels.filter(t=>t!==e),w()}},registerSeparator:e=>{let t=T.current;return t.separators=x(f,[...t.separators,e]),w(),()=>{t.separators=t.separators.filter(t=>t!==e),w()}},updatePanelProps:(e,{disabled:t})=>{let n=T.current.panels.find(t=>t.id===e);n&&(n.panelConstraints.disabled=t);let r=ne(b),i=M(b);r&&i&&F(r,{...i,derivedPanelConstraints:y(r)})},updateSeparatorProps:(e,{disabled:t,disableDoubleClick:n})=>{let r=T.current.separators.find(t=>t.id===e);r&&(r.disabled=t,r.disableDoubleClick=n)}}),[D,b,w,f,O]),A=(0,u.useRef)(null);return Q(()=>{let e=S.current;if(e===null)return;let t=T.current,n;if(O.defaultLayout!==void 0&&Object.keys(O.defaultLayout).length===t.panels.length){n={};for(let e of t.panels){let t=O.defaultLayout[e.id];t!==void 0&&(n[e.id]=t)}}let r={disabled:!!i,element:e,id:b,mutableState:{defaultLayout:n,disableCursor:!!O.disableCursor,expandedPanelSizes:T.current.lastExpandedPanelSizes,layouts:T.current.layouts},orientation:f,panels:t.panels,resizeTargetMinimumSize:t.resizeTargetMinimumSize,separators:t.separators};A.current=r;let a=We(r),{defaultLayoutDeferred:o,derivedPanelConstraints:s,layout:c}=M(r.id,!0);!o&&s.length>0&&(_(c),v(c));let l=P(b,e=>{let{defaultLayoutDeferred:t,derivedPanelConstraints:n,layout:i}=e.next;if(t||n.length===0)return;let a=r.panels.map(({id:e})=>e).join(`,`);r.mutableState.layouts[a]=i,n.forEach(t=>{if(t.collapsible){let{layout:n}=e.prev??{};if(n){let e=I(t.collapsedSize,i[t.panelId]),a=I(t.collapsedSize,n[t.panelId]);e&&!a&&(r.mutableState.expandedPanelSizes[t.panelId]=n[t.panelId])}}});let o=K().state!==`active`;_(i),o&&v(i)});return()=>{A.current=null,a(),l()}},[i,b,v,_,f,C,O]),(0,u.useEffect)(()=>{let e=A.current;e&&(e.mutableState.defaultLayout=n,e.mutableState.disableCursor=!!r)}),(0,c.jsx)(Ye.Provider,{value:k,children:(0,c.jsx)(`div`,{...h,className:t,"data-group":!0,"data-testid":b,id:b,ref:E,style:{height:`100%`,width:`100%`,overflow:`hidden`,...m,display:`flex`,flexDirection:f===`horizontal`?`row`:`column`,flexWrap:`nowrap`,touchAction:f===`horizontal`?`pan-y`:`pan-x`},children:e})})}Ze.displayName=`Group`;function Qe(){let e=(0,u.useContext)(Ye);return b(e,`Group Context not found; did you render a Panel or Separator outside of a Group?`),e}function $e(e,t){let{id:n}=Qe(),r=(0,u.useRef)({collapse:J,expand:J,getSize:()=>({asPercentage:0,inPixels:0}),isCollapsed:()=>!1,resize:J});(0,u.useImperativeHandle)(t,()=>r.current,[]),Q(()=>{Object.assign(r.current,_e({groupId:n,panelId:e}))})}function et({children:e,className:t,collapsedSize:n=`0%`,collapsible:r=!1,defaultSize:i,disabled:a,elementRef:o,groupResizeBehavior:s=`preserve-relative-size`,id:l,maxSize:d=`100%`,minSize:f=`0%`,onResize:p,panelRef:m,style:h,...g}){let _=!!l,v=Ke(l),y=Je({disabled:a}),b=(0,u.useRef)(null),x=qe(b,o),{getPanelStyles:S,id:C,orientation:w,registerPanel:T,updatePanelProps:E}=Qe(),D=p!==null,O=$((e,t,n)=>{p?.(e,l,n)});Q(()=>{let e=b.current;if(e!==null)return T({element:e,id:v,idIsStable:_,mutableValues:{expandToSize:void 0,prevSize:void 0},onResize:D?O:void 0,panelConstraints:{groupResizeBehavior:s,collapsedSize:n,collapsible:r,defaultSize:i,disabled:y.disabled,maxSize:d,minSize:f}})},[s,n,r,i,D,v,_,d,f,O,T,y]),(0,u.useEffect)(()=>{E(v,{disabled:a})},[a,v,E]),$e(v,m);let k=()=>{let e=S(C,v);if(e)return JSON.stringify(e)},A=(0,u.useSyncExternalStore)(e=>P(C,e),k,k),j;return j=A?JSON.parse(A):i===void 0?{flexGrow:1}:{flexGrow:void 0,flexShrink:void 0,flexBasis:i},(0,c.jsx)(`div`,{...g,"data-disabled":a||void 0,"data-panel":!0,"data-testid":v,id:v,ref:x,style:{...tt,display:`flex`,flexBasis:0,flexShrink:1,overflow:`visible`,...j},children:(0,c.jsx)(`div`,{className:t,style:{maxHeight:`100%`,maxWidth:`100%`,flexGrow:1,overflow:`auto`,...h,touchAction:w===`horizontal`?`pan-y`:`pan-x`},children:e})})}et.displayName=`Panel`;var tt={minHeight:0,maxHeight:`100%`,height:`auto`,minWidth:0,maxWidth:`100%`,width:`auto`,border:`none`,borderWidth:0,padding:0,margin:0};function nt({layout:e,panelConstraints:t,panelId:n,panelIndex:r}){let i,a,o=e[n],s=t.find(e=>e.panelId===n);if(s){let c=s.maxSize,l=s.collapsible?s.collapsedSize:s.minSize,u=[r,r+1];a=V({layout:z({delta:l-o,initialLayout:e,panelConstraints:t,pivotIndices:u,prevLayout:e}),panelConstraints:t})[n],i=V({layout:z({delta:c-o,initialLayout:e,panelConstraints:t,pivotIndices:u,prevLayout:e}),panelConstraints:t})[n]}return{valueControls:n,valueMax:i,valueMin:a,valueNow:o}}function rt({children:e,className:t,disabled:n,disableDoubleClick:r,elementRef:i,id:a,style:o,...s}){let l=Ke(a),d=Je({disabled:n,disableDoubleClick:r}),[f,p]=(0,u.useState)({}),[m,h]=(0,u.useState)(`inactive`),[g,_]=(0,u.useState)(!1),v=(0,u.useRef)(null),y=qe(v,i),{disableCursor:b,id:x,orientation:S,registerSeparator:C,updateSeparatorProps:w}=Qe(),T=S===`horizontal`?`vertical`:`horizontal`;Q(()=>{let e=v.current;if(e!==null){let t={disabled:d.disabled,disableDoubleClick:d.disableDoubleClick,element:e,id:l},n=C(t),r=xe(e=>{h(e.next.state!==`inactive`&&e.next.hitRegions.some(e=>e.separator===t)?e.next.state:`inactive`)}),i=P(x,e=>{let{derivedPanelConstraints:n,layout:r,separatorToPanels:i}=e.next,a=i.get(t);if(a){let e=a[0],t=a.indexOf(e);p(nt({layout:r,panelConstraints:n,panelId:e.id,panelIndex:t}))}});return()=>{r(),i(),n()}}},[x,l,C,d]),(0,u.useEffect)(()=>{w(l,{disabled:n,disableDoubleClick:r})},[n,r,l,w]);let E;n&&!b&&(E=`not-allowed`);let D;if(n)D=`disabled`;else switch(m){case`active`:D=`active`;break;default:D=g?`focus`:m}return(0,c.jsx)(`div`,{...s,"aria-controls":f.valueControls,"aria-disabled":n||void 0,"aria-orientation":T,"aria-valuemax":f.valueMax,"aria-valuemin":f.valueMin,"aria-valuenow":f.valueNow,children:e,className:t,"data-separator":D,"data-testid":l,id:l,onBlur:()=>_(!1),onFocus:()=>_(!0),ref:y,role:`separator`,style:{flexBasis:`auto`,cursor:E,...o,flexGrow:0,flexShrink:0,touchAction:`none`},tabIndex:n?void 0:0})}rt.displayName=`Separator`;function it({className:e,...t}){return(0,c.jsx)(Ze,{"data-slot":`resizable-panel-group`,className:o(`flex h-full w-full aria-[orientation=vertical]:flex-col`,e),...t})}function at({...e}){return(0,c.jsx)(et,{"data-slot":`resizable-panel`,...e})}function ot({withHandle:e,className:t,...n}){return(0,c.jsx)(rt,{"data-slot":`resizable-handle`,className:o(`relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90`,t),...n,children:e&&(0,c.jsx)(`div`,{className:`z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border`})})}var st=e({AspectRatioExample:()=>ct,ResizableExample:()=>lt});function ct(){return(0,c.jsx)(l,{ratio:16/9,className:`overflow-hidden rounded-md border border-border bg-muted/40`,children:(0,c.jsx)(`div`,{className:`flex size-full items-center justify-center text-sm text-muted-foreground`,children:`16:9 content well`})})}function lt(){return(0,c.jsxs)(it,{orientation:`horizontal`,className:`min-h-40 max-w-2xl rounded-md border border-border`,children:[(0,c.jsx)(at,{defaultSize:35,children:(0,c.jsx)(`div`,{className:`flex h-full items-center justify-center p-4 text-sm text-muted-foreground`,children:`Navigation`})}),(0,c.jsx)(ot,{withHandle:!0}),(0,c.jsx)(at,{defaultSize:65,children:(0,c.jsx)(`div`,{className:`flex h-full items-center justify-center p-4 text-sm text-muted-foreground`,children:`Workspace`})})]})}var ut=`import { AspectRatio } from '@/components/ui/aspect-ratio';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+
+export function AspectRatioExample() {
+	return (
+		<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md border border-border bg-muted/40">
+			<div className="flex size-full items-center justify-center text-sm text-muted-foreground">
+				16:9 content well
+			</div>
+		</AspectRatio>
+	);
+}
+
+export function ResizableExample() {
+	return (
+		<ResizablePanelGroup
+			orientation="horizontal"
+			className="min-h-40 max-w-2xl rounded-md border border-border"
+		>
+			<ResizablePanel defaultSize={35}>
+				<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
+					Navigation
+				</div>
+			</ResizablePanel>
+			<ResizableHandle withHandle />
+			<ResizablePanel defaultSize={65}>
+				<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
+					Workspace
+				</div>
+			</ResizablePanel>
+		</ResizablePanelGroup>
+	);
+}
+`;function dt(e){return st||pt(`Examples`,!1),ct||pt(`Examples.AspectRatioExample`,!0),lt||pt(`Examples.ResizableExample`,!0),(0,c.jsx)(r,{title:`UI · Layout primitives`,description:`AspectRatio and Resizable primitives.`,layer:`ui`,status:`ready`,children:(0,c.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,c.jsx)(a,{name:`AspectRatioExample`,source:ut,children:(0,c.jsx)(ct,{})}),(0,c.jsx)(a,{name:`ResizableExample`,source:ut,children:(0,c.jsx)(lt,{})})]})})}function ft(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(dt,{...e})}):dt(e)}function pt(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{ft as default};

package/dist/showcase/assets/layout-sidebar-BUOjQm9-.js

@@ -0,0 +1,224 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Rr as a,jr as o,t as s}from"./example-CbMg22fx.js";import{t as c}from"./brain-D_5EG0Lz.js";import{t as l}from"./chart-column-BAuLvocu.js";import{n as u,t as d}from"./header-notifications-fOFoqfCR.js";import{t as f}from"./credit-card-CoIW8_5L.js";import{t as p}from"./external-link-C4QW5KPr.js";import{t as ee}from"./house-CnsMNKdQ.js";import{t as m}from"./inbox-BcbV9uGN.js";import{c as h,f as te,m as g,r as ne,t as _,u as v}from"./sidebar.context-BhexAjPM.js";import{t as y}from"./package-C9EnWNEP.js";import{t as b}from"./settings-Mbnp6hDe.js";import{t as x}from"./shield-D084AWSl.js";import{t as re}from"./sliders-horizontal-C6SHwI9f.js";import{t as ie}from"./users-DOGJZmUN.js";import{a as S,n as C,s as ae}from"./index-DNH0y0r-.js";import{t as oe}from"./smart-card-DpvRHqI9.js";import{t as se}from"./separator-kwh2KDqD.js";import{t as ce}from"./sidebar-BWDrvFY1.js";import{t as le}from"./use-layout-link-DR4Apqbc.js";import{a as ue,c as w,d as de,f as T,i as E,l as D,n as O,o as k,p as A,r as j,s as M,t as N,u as P}from"./app-sidebar-C9tjHr7T.js";import{t as F}from"./header-CMjgUhtM.js";import{t as I}from"./page-header-DoZnb9z9.js";var L=S(`life-buoy`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`m4.93 4.93 4.24 4.24`,key:`1ymg45`}],[`path`,{d:`m14.83 9.17 4.24-4.24`,key:`1cb5xl`}],[`path`,{d:`m14.83 14.83 4.24 4.24`,key:`q42g0n`}],[`path`,{d:`m9.17 14.83-4.24 4.24`,key:`bqpfvv`}],[`circle`,{cx:`12`,cy:`12`,r:`4`,key:`4exip2`}]]),R=S(`store`,[[`path`,{d:`M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5`,key:`slp6dd`}],[`path`,{d:`M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244`,key:`o0xfot`}],[`path`,{d:`M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05`,key:`wn3emo`}]]),z=t(n(),1),B=ae();function fe({item:e}){return(0,B.jsx)(a,{tag:`span`,className:`truncate text-inherit`,children:D(e)})}function V({items:e,label:t=`Platform`,currentUrl:n=`/`,iconMap:r={},liveBadges:i,renderLink:a,LinkComponent:o,renderItem:s,className:c}){let l=le({renderLink:a,LinkComponent:o});return(0,B.jsxs)(h,{className:C(`px-2 py-0`,c),children:[!!t&&(0,B.jsx)(v,{children:t}),(0,B.jsx)(te,{className:`gap-0.5`,children:e.map((e,t)=>{let a=!!e.href&&P(n,A(e.href)),o=T(e.handle,e.badge,i),c={depth:0,active:a,expanded:!1,badge:o,renderLink:l},u=D(e);if(s)return(0,B.jsx)(z.Fragment,{children:s(e,c)},w(e,t));let d=(0,B.jsxs)(B.Fragment,{children:[!!e.icon&&(0,B.jsx)(k,{icon:e.icon,iconMap:r,className:`size-4`,"aria-hidden":`true`}),(0,B.jsx)(fe,{item:e}),!!o&&(0,B.jsx)(M,{value:o})]});return(0,B.jsx)(g,{children:(0,B.jsx)(ce,{isActive:a,render:e.href&&!e.disabled?de(l,e,d,void 0,a):void 0,tooltip:{children:u},disabled:e.disabled,className:C(`h-8 font-medium`,a&&`bg-sidebar-accent text-sidebar-accent-foreground`,e.disabled&&`cursor-not-allowed opacity-50`),children:d})},w(e,t))})})]})}var pe=e({AppSidebarShell:()=>J,CustomRowRenderer:()=>X,NavigationPartials:()=>Y}),H={Platform:[{label:`Dashboard`,href:`#/layout/sidebar`,icon:ee,handle:`dashboard`},{label:`Customers`,href:`#/customers`,icon:ie,handle:`customers`,badge:24},{label:`Orders`,href:`#/orders`,icon:y,handle:`orders`,children:[{label:`Pending`,href:`#/orders/pending`,handle:`orders-pending`,badge:8},{label:`Fulfilled`,href:`#/orders/fulfilled`,handle:`orders-fulfilled`}]}],Finance:[{label:`Invoices`,href:`#/invoices`,icon:f,handle:`invoices`,badge:12},{label:`Reports`,href:`#/reports`,icon:l,handle:`reports`}]},U=[{label:`Support`,href:`#/support`,icon:L,handle:`support`},{label:`Security`,href:`#/security`,icon:x,handle:`security`},{label:`External docs`,href:`https://example.com`,icon:p,handle:`docs`,external:!0}],W=[{label:`Settings`,href:`#/settings`,icon:re,handle:`settings`},{label:`AI`,href:`#/ai`,icon:c,handle:`ai`}],G={name:`Nicolas Vlachos`,email:`nicolas@example.com`,avatar:`https://i.pravatar.cc/96?img=11`};function K({href:e,children:t,className:n,target:r,rel:i}){return(0,B.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function q(){return(0,B.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,B.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm`,children:(0,B.jsx)(R,{className:`size-4`,"aria-hidden":`true`})}),(0,B.jsxs)(`div`,{className:`min-w-0`,children:[(0,B.jsx)(a,{weight:`semibold`,className:`truncate text-inherit`,children:`Atlas Admin`}),(0,B.jsx)(a,{size:`xxs`,type:`secondary`,className:`truncate`,children:`Production`})]})]})}function me(){return(0,B.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm`,children:(0,B.jsx)(R,{className:`size-4`,"aria-hidden":`true`})})}function J(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(_,{defaultOpen:!0,className:`min-h-0`,children:(0,B.jsx)(`div`,{className:`flex h-[42rem] w-full min-w-[56rem] overflow-hidden rounded-lg border border-border bg-background p-3`,children:(0,B.jsxs)(`div`,{className:`flex min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-background shadow-sm`,children:[(0,B.jsx)(N,{className:`h-full p-0`,surfaceClassName:`bg-background`,headerClassName:`px-4 pb-3 pt-4`,logoClassName:`px-0`,logo:(0,B.jsx)(q,{}),collapsedLogo:(0,B.jsx)(me,{}),workspaceLinks:[{label:`Production store`,url:`#/workspaces/production`,icon:R,external:!1},{label:`Sandbox`,url:`#/workspaces/sandbox`,icon:R,external:!1}],workspaceStrings:{label:`Workspace`,select:`Switch workspace`},navigationGroups:H,footerNavItems:W,currentUrl:`#/orders/pending`,liveBadges:{customers:31,invoices:14},renderLink:K,slots:{afterNavigation:(0,B.jsx)(j,{items:U,label:`Help`,currentUrl:`#/orders/pending`,renderLink:K})}}),(0,B.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,B.jsx)(F,{renderLink:K,breadcrumbs:[{label:`Operations`,href:`#/features/activities`},{label:`Orders`}],centerClassName:`justify-start`,slots:{center:(0,B.jsx)(u,{className:`w-full max-w-sm`}),right:(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(d,{unreadCount:2,notifications:[]}),(0,B.jsx)(se,{orientation:`vertical`,className:`h-7`}),(0,B.jsx)(ne,{user:G,showEmail:!1,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})}}),(0,B.jsxs)(`main`,{className:`min-w-0 flex-1 space-y-4 p-5`,children:[(0,B.jsx)(I,{title:`Pending orders`,description:`The sidebar controls navigation only; the app owns routing and page content.`,headingTag:`h3`,titleBadges:[{label:`8 pending`,variant:`warning`}]}),(0,B.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[`Manual review`,`Awaiting stock`,`Ready to fulfill`].map((e,t)=>(0,B.jsxs)(oe,{padding:`sm`,className:`shadow-sm`,children:[(0,B.jsx)(a,{size:`xs`,type:`secondary`,children:e}),(0,B.jsx)(a,{weight:`semibold`,children:[8,12,36][t]})]},e))})]})]})]})})})})}function Y(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(_,{defaultOpen:!0,className:`min-h-0`,children:(0,B.jsxs)(`div`,{className:`grid w-full gap-5 md:grid-cols-2`,children:[(0,B.jsx)(`div`,{className:`h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar text-sidebar-foreground shadow-sm`,children:(0,B.jsxs)(ue,{collapsible:`none`,className:`w-full`,surfaceClassName:`bg-background`,children:[(0,B.jsx)(O,{logo:(0,B.jsx)(q,{}),workspaceLinks:[{label:`Production store`,url:`#/workspaces/production`,icon:R,external:!1},{label:`Sandbox`,url:`#/workspaces/sandbox`,icon:R,external:!1}],renderLink:K}),(0,B.jsx)(E,{navigationByGroups:H,currentUrl:`#/customers`,liveBadges:{customers:9},renderLink:K})]})}),(0,B.jsxs)(`div`,{className:`h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground shadow-sm`,children:[(0,B.jsx)(V,{label:`Flat navigation`,items:[{label:`Inbox`,href:`#/inbox`,icon:m,badge:6},{label:`Settings`,href:`#/settings`,icon:b},{label:`Disabled item`,href:`#/disabled`,icon:x,disabled:!0}],currentUrl:`#/inbox`,renderLink:K}),(0,B.jsxs)(`div`,{className:`mt-4 border-t border-sidebar-border pt-3`,children:[(0,B.jsx)(j,{items:U,label:`Help`,currentUrl:`#/orders/pending`,renderLink:K}),(0,B.jsx)(j,{items:W,currentUrl:`#/orders/pending`,renderLink:K})]})]})]})})})}function X(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(_,{defaultOpen:!0,className:`min-h-0`,children:(0,B.jsx)(`div`,{className:`rounded-xl border border-border bg-sidebar p-3 text-sidebar-foreground shadow-sm`,children:(0,B.jsx)(V,{label:`Custom renderItem`,items:[{label:`Priority inbox`,href:`#/priority`,icon:m,badge:3},{label:`Billing review`,href:`#/billing`,icon:f,badge:11}],renderLink:K,renderItem:(e,t)=>(0,B.jsx)(g,{children:(0,B.jsxs)(`div`,{className:`flex items-center justify-between rounded-lg px-3 py-2 hover:bg-sidebar-accent`,children:[(0,B.jsxs)(`div`,{children:[(0,B.jsx)(a,{weight:`medium`,className:`text-inherit`,children:e.label}),(0,B.jsxs)(a,{size:`xxs`,type:`secondary`,children:[`active: `,String(t.active)]})]}),!!t.badge&&(0,B.jsx)(o,{variant:`primary`,children:t.badge})]})})})})})})}var Z=`import { BarChart3, Brain, CreditCard, ExternalLink, Home, Inbox, LifeBuoy, Package, Settings, Shield, SlidersHorizontal, Store, Users } from 'lucide-react';
+import { Badge } from '@/components/base/badge';
+import { SmartCard } from '@/components/base/cards';
+import { Separator } from '@/components/base/display/separator';
+import { Text } from '@/components/typography';
+import type { LayoutLinkRenderProps, LayoutUser } from '@/components/layout';
+import { Header, HeaderSearch, HeaderNotifications, HeaderUserMenu } from '@/components/layout/header';
+import { PageHeader } from '@/components/layout/page';
+import {
+	AppSidebar,
+	Sidebar,
+	SidebarGroupedNavigation,
+	SidebarNavigation,
+	SidebarNavigationFooter,
+	SidebarProvider,
+	SidebarWorkspaceDropdown,
+	type SidebarNavItem,
+} from '@/components/layout/sidebar';
+import { SidebarMenuItem } from '@/components/base/sidebar';
+
+const groups: Record<string, SidebarNavItem[]> = {
+	Platform: [
+		{ label: 'Dashboard', href: '#/layout/sidebar', icon: Home, handle: 'dashboard' },
+		{ label: 'Customers', href: '#/customers', icon: Users, handle: 'customers', badge: 24 },
+		{ label: 'Orders', href: '#/orders', icon: Package, handle: 'orders', children: [
+			{ label: 'Pending', href: '#/orders/pending', handle: 'orders-pending', badge: 8 },
+			{ label: 'Fulfilled', href: '#/orders/fulfilled', handle: 'orders-fulfilled' },
+		] },
+	],
+	Finance: [
+		{ label: 'Invoices', href: '#/invoices', icon: CreditCard, handle: 'invoices', badge: 12 },
+		{ label: 'Reports', href: '#/reports', icon: BarChart3, handle: 'reports' },
+	],
+};
+
+const footerItems = [
+	{ label: 'Support', href: '#/support', icon: LifeBuoy, handle: 'support' },
+	{ label: 'Security', href: '#/security', icon: Shield, handle: 'security' },
+	{ label: 'External docs', href: 'https://example.com', icon: ExternalLink, handle: 'docs', external: true },
+];
+
+const utilityItems = [
+	{ label: 'Settings', href: '#/settings', icon: SlidersHorizontal, handle: 'settings' },
+	{ label: 'AI', href: '#/ai', icon: Brain, handle: 'ai' },
+];
+
+const user: LayoutUser = {
+	name: 'Nicolas Vlachos',
+	email: 'nicolas@example.com',
+	avatar: 'https://i.pravatar.cc/96?img=11',
+};
+
+function renderPreviewLink({ href, children, className, target, rel }: LayoutLinkRenderProps) {
+	return <a href={href ?? '#'} className={className} target={target} rel={rel}>{children}</a>;
+}
+
+function Brand() {
+	return (
+		<div className="flex min-w-0 items-center gap-2">
+			<div className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
+				<Store className="size-4" aria-hidden="true" />
+			</div>
+			<div className="min-w-0">
+				<Text weight="semibold" className="truncate text-inherit">Atlas Admin</Text>
+				<Text size="xxs" type="secondary" className="truncate">Production</Text>
+			</div>
+		</div>
+	);
+}
+
+function CollapsedBrand() {
+	return (
+		<div className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
+			<Store className="size-4" aria-hidden="true" />
+		</div>
+	);
+}
+
+export function AppSidebarShell() {
+	return (
+		<>
+			<SidebarProvider defaultOpen className="min-h-0">
+								<div className="flex h-[42rem] w-full min-w-[56rem] overflow-hidden rounded-lg border border-border bg-background p-3">
+									<div className="flex min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-background shadow-sm">
+										<AppSidebar
+											className="h-full p-0"
+											surfaceClassName="bg-background"
+											headerClassName="px-4 pb-3 pt-4"
+											logoClassName="px-0"
+											logo={<Brand />}
+											collapsedLogo={<CollapsedBrand />}
+											workspaceLinks={[
+												{ label: 'Production store', url: '#/workspaces/production', icon: Store, external: false },
+												{ label: 'Sandbox', url: '#/workspaces/sandbox', icon: Store, external: false },
+											]}
+											workspaceStrings={{ label: 'Workspace', select: 'Switch workspace' }}
+											navigationGroups={groups}
+											footerNavItems={utilityItems}
+											currentUrl="#/orders/pending"
+											liveBadges={{ customers: 31, invoices: 14 }}
+											renderLink={renderPreviewLink}
+											slots={{
+												afterNavigation: (
+													<SidebarNavigationFooter items={footerItems} label="Help" currentUrl="#/orders/pending" renderLink={renderPreviewLink} />
+												),
+											}}
+										/>
+										<div className="flex min-w-0 flex-1 flex-col">
+											<Header
+												renderLink={renderPreviewLink}
+												breadcrumbs={[{ label: 'Operations', href: '#/features/activities' }, { label: 'Orders' }]}
+												centerClassName="justify-start"
+												slots={{
+													center: <HeaderSearch className="w-full max-w-sm" />,
+													right: (
+														<>
+															<HeaderNotifications unreadCount={2} notifications={[]} />
+															<Separator orientation="vertical" className="h-7" />
+															<HeaderUserMenu
+																user={user}
+																showEmail={false}
+																onProfile={() => {}}
+																onSettings={() => {}}
+																onLogout={() => {}}
+															/>
+														</>
+													),
+												}}
+											/>
+											<main className="min-w-0 flex-1 space-y-4 p-5">
+												<PageHeader
+													title="Pending orders"
+													description="The sidebar controls navigation only; the app owns routing and page content."
+													headingTag="h3"
+													titleBadges={[{ label: '8 pending', variant: 'warning' }]}
+												/>
+												<div className="grid gap-3 md:grid-cols-3">
+													{['Manual review', 'Awaiting stock', 'Ready to fulfill'].map((label, index) => (
+														<SmartCard key={label} padding="sm" className="shadow-sm">
+															<Text size="xs" type="secondary">{label}</Text>
+															<Text weight="semibold">{[8, 12, 36][index]}</Text>
+														</SmartCard>
+													))}
+												</div>
+											</main>
+										</div>
+									</div>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function NavigationPartials() {
+	return (
+		<>
+			<SidebarProvider defaultOpen className="min-h-0">
+								<div className="grid w-full gap-5 md:grid-cols-2">
+									<div className="h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar text-sidebar-foreground shadow-sm">
+										<Sidebar collapsible="none" className="w-full" surfaceClassName="bg-background">
+											<SidebarWorkspaceDropdown
+												logo={<Brand />}
+												workspaceLinks={[
+													{ label: 'Production store', url: '#/workspaces/production', icon: Store, external: false },
+													{ label: 'Sandbox', url: '#/workspaces/sandbox', icon: Store, external: false },
+												]}
+												renderLink={renderPreviewLink}
+											/>
+											<SidebarGroupedNavigation navigationByGroups={groups} currentUrl="#/customers" liveBadges={{ customers: 9 }} renderLink={renderPreviewLink} />
+										</Sidebar>
+									</div>
+
+									<div className="h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground shadow-sm">
+										<SidebarNavigation
+											label="Flat navigation"
+											items={[
+												{ label: 'Inbox', href: '#/inbox', icon: Inbox, badge: 6 },
+												{ label: 'Settings', href: '#/settings', icon: Settings },
+												{ label: 'Disabled item', href: '#/disabled', icon: Shield, disabled: true },
+											]}
+											currentUrl="#/inbox"
+											renderLink={renderPreviewLink}
+										/>
+										<div className="mt-4 border-t border-sidebar-border pt-3">
+											<SidebarNavigationFooter items={footerItems} label="Help" currentUrl="#/orders/pending" renderLink={renderPreviewLink} />
+											<SidebarNavigationFooter items={utilityItems} currentUrl="#/orders/pending" renderLink={renderPreviewLink} />
+										</div>
+									</div>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function CustomRowRenderer() {
+	return (
+		<>
+			<SidebarProvider defaultOpen className="min-h-0">
+								<div className="rounded-xl border border-border bg-sidebar p-3 text-sidebar-foreground shadow-sm">
+									<SidebarNavigation
+										label="Custom renderItem"
+										items={[
+											{ label: 'Priority inbox', href: '#/priority', icon: Inbox, badge: 3 },
+											{ label: 'Billing review', href: '#/billing', icon: CreditCard, badge: 11 },
+										]}
+										renderLink={renderPreviewLink}
+										renderItem={(item, context) => (
+											<SidebarMenuItem>
+												<div className="flex items-center justify-between rounded-lg px-3 py-2 hover:bg-sidebar-accent">
+													<div>
+														<Text weight="medium" className="text-inherit">{item.label}</Text>
+														<Text size="xxs" type="secondary">active: {String(context.active)}</Text>
+													</div>
+													{!!context.badge && <Badge variant="primary">{context.badge}</Badge>}
+												</div>
+											</SidebarMenuItem>
+										)}
+									/>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+`;function Q(e){return pe||$(`Examples`,!1),J||$(`Examples.AppSidebarShell`,!0),X||$(`Examples.CustomRowRenderer`,!0),Y||$(`Examples.NavigationPartials`,!0),(0,B.jsx)(r,{title:`Layout · Sidebar`,description:`Full app sidebar assembly plus reusable navigation, workspace, and footer item partials.`,layer:`layout`,status:`ready`,children:(0,B.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,B.jsx)(s,{name:`AppSidebarShell`,source:Z,children:(0,B.jsx)(J,{})}),(0,B.jsx)(s,{name:`NavigationPartials`,source:Z,children:(0,B.jsx)(Y,{})}),(0,B.jsx)(s,{name:`CustomRowRenderer`,source:Z,children:(0,B.jsx)(X,{})})]})})}function he(e={}){let{wrapper:t}=e.components||{};return t?(0,B.jsx)(t,{...e,children:(0,B.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{he as default};

package/dist/showcase/assets/layout-users-DFlJQAuB.js

@@ -0,0 +1,117 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Dr as t,Er as n,Rr as r,jr as i,r as a,t as o}from"./example-CbMg22fx.js";import{t as s}from"./chevrons-up-down-lvrM2T-O.js";import{b as c,f as l,m as u,n as d,r as f,t as p}from"./sidebar.context-BhexAjPM.js";import{t as m}from"./settings-Mbnp6hDe.js";import{t as h}from"./user-plus-CUbfQtkK.js";import{t as g}from"./user-BCzeUL5p.js";import{k as _,n as v,s as y}from"./index-DNH0y0r-.js";import{a as b,c as x,l as S,r as C,t as w}from"./dropdown-menu-CrcweCup.js";import{a as T,i as E,n as D,o as O,r as k,t as A}from"./avatar-Dk78XyHT.js";import{n as j}from"./PreviewLayout-DQIZaXaO.js";import{t as M}from"./sidebar-BWDrvFY1.js";var N=y(),P={sm:{avatar:`size-7`,gap:`gap-2`,nameSize:`sm`,subtitleSize:`xs`},base:{avatar:`size-9`,gap:`gap-3`,nameSize:`sm`,subtitleSize:`xs`},lg:{avatar:`size-11`,gap:`gap-3`,nameSize:`base`,subtitleSize:`sm`}};function F({name:e,subtitle:t,avatarUrl:n,avatarAlt:i,initials:a,avatar:o,trailing:s,size:c=`base`,className:l}){let u=P[c],d=o??(0,N.jsxs)(A,{className:u.avatar,children:[!!n&&(0,N.jsx)(O,{src:n,alt:i??(typeof e==`string`?e:void 0)}),!!a&&(0,N.jsx)(k,{children:a})]});return(0,N.jsxs)(`div`,{className:v(`user-cell--component`,`flex items-center`,u.gap,l),children:[d,(0,N.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,N.jsx)(r,{size:u.nameSize,weight:`semibold`,className:`truncate`,children:e}),!!t&&(0,N.jsx)(r,{size:u.subtitleSize,type:`secondary`,className:`truncate`,children:t})]}),!!s&&(0,N.jsx)(`div`,{className:`shrink-0`,children:s})]})}F.displayName=`UserCell`;var I={profile:`Profile`,settings:`Settings`,logout:`Log out`};function L(e){return e.split(` `).map(e=>e[0]).filter(Boolean).slice(0,2).join(``).toUpperCase()}function R({user:e,customContent:t,onProfile:n,onSettings:i,onLogout:a,strings:o,renderTrigger:f}){let p=_(I,o),{state:h,isMobile:v}=d(),y=v||h!==`collapsed`?`bottom`:`right`,T=L(e.name),E=(0,N.jsxs)(N.Fragment,{children:[!!n&&(0,N.jsxs)(b,{onClick:n,children:[(0,N.jsx)(g,{className:`mr-2 size-4`,"aria-hidden":`true`}),(0,N.jsx)(r,{tag:`span`,size:`xs`,className:`text-inherit`,children:p.profile})]}),!!i&&(0,N.jsxs)(b,{onClick:i,children:[(0,N.jsx)(m,{className:`mr-2 size-4`,"aria-hidden":`true`}),(0,N.jsx)(r,{tag:`span`,size:`xs`,className:`text-inherit`,children:p.settings})]}),!!(n||i)&&!!a&&(0,N.jsx)(x,{}),!!a&&(0,N.jsxs)(b,{onClick:a,children:[(0,N.jsx)(c,{className:`mr-2 size-4`,"aria-hidden":`true`}),(0,N.jsx)(r,{tag:`span`,size:`xs`,className:`text-inherit`,children:p.logout})]})]});return(0,N.jsx)(l,{children:(0,N.jsx)(u,{children:(0,N.jsxs)(w,{children:[(0,N.jsx)(S,{render:(0,N.jsx)(M,{size:`lg`,className:`group text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent`}),children:f?.(e)??(0,N.jsxs)(N.Fragment,{children:[(0,N.jsxs)(`div`,{className:`flex min-w-0 flex-1 items-center gap-2`,children:[(0,N.jsxs)(A,{className:`size-8 rounded-full`,children:[!!e.avatar&&(0,N.jsx)(O,{src:e.avatar,alt:e.name}),(0,N.jsx)(k,{className:`bg-sidebar-accent text-xs text-sidebar-accent-foreground`,children:T})]}),(0,N.jsxs)(`div`,{className:`flex flex-1 flex-col items-start justify-center overflow-hidden`,children:[(0,N.jsx)(r,{weight:`medium`,className:`w-full truncate`,children:e.name}),!!e.email&&(0,N.jsx)(r,{size:`xs`,type:`secondary`,className:`w-full truncate`,children:e.email})]})]}),(0,N.jsx)(s,{className:`ml-auto size-4 shrink-0`,"aria-hidden":`true`})]})}),(0,N.jsx)(C,{className:`w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg`,align:`end`,side:y,sideOffset:4,children:t??E})]})})})}var z=e({AvatarStates:()=>H,CustomTriggerCustomContent:()=>G,HeaderUserMenuExample:()=>U,SidebarUserMenu:()=>W}),B=[{name:`Sarah Smitha`,email:`maria@example.com`,avatar:`https://i.pravatar.cc/96?img=5`},{name:`Daniel Kowalski`,email:`stefan@example.com`,avatar:`https://i.pravatar.cc/96?img=12`},{name:`Emma Markova`,email:`elena@example.com`}];function V(e){return e.split(` `).map(e=>e[0]).join(``).slice(0,2).toUpperCase()}function H(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsxs)(j,{children:[B.map((e,t)=>(0,N.jsxs)(A,{size:t===0?`lg`:`default`,children:[!!e.avatar&&(0,N.jsx)(O,{src:e.avatar,alt:e.name}),(0,N.jsx)(k,{children:V(e.name)}),(0,N.jsx)(D,{className:t===1?`bg-warning`:`bg-success`})]},e.name)),(0,N.jsxs)(E,{children:[B.map(e=>(0,N.jsxs)(A,{children:[!!e.avatar&&(0,N.jsx)(O,{src:e.avatar,alt:e.name}),(0,N.jsx)(k,{children:V(e.name)})]},e.name)),(0,N.jsx)(T,{children:`+8`})]})]})})}function U(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsxs)(`div`,{className:`flex flex-col gap-4 rounded-xl border border-border p-4 sm:flex-row sm:items-center sm:justify-between`,children:[(0,N.jsxs)(`div`,{className:`min-w-0`,children:[(0,N.jsx)(r,{weight:`semibold`,children:`Account switcher surface`}),(0,N.jsx)(r,{size:`xs`,type:`secondary`,children:`Default trigger renders avatar, name, email, and dropdown actions.`})]}),(0,N.jsx)(f,{user:B[0],onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})})}function W(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(p,{className:`min-h-0`,children:(0,N.jsx)(`div`,{className:`max-w-sm rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground`,children:(0,N.jsx)(R,{user:B[1],onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})})})})}function G(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(14rem,0.85fr)] md:items-start`,children:[(0,N.jsx)(`div`,{className:`rounded-lg border border-border bg-card p-3`,children:(0,N.jsx)(f,{user:B[2],renderTrigger:e=>(0,N.jsx)(a,{type:`button`,variant:`secondary`,buttonStyle:`outline`,className:`h-auto w-full justify-start rounded-md px-2.5 py-2`,children:(0,N.jsx)(F,{size:`sm`,name:e.name,initials:V(e.name),trailing:(0,N.jsx)(i,{variant:`info`,children:`Admin`})})}),customContent:(0,N.jsxs)(`div`,{className:`space-y-1`,children:[(0,N.jsx)(a,{variant:`secondary`,buttonStyle:`ghost`,icon:g,className:`w-full justify-start`,children:`Profile`}),(0,N.jsx)(a,{variant:`secondary`,buttonStyle:`ghost`,icon:m,className:`w-full justify-start`,children:`Preferences`}),(0,N.jsx)(a,{variant:`secondary`,buttonStyle:`ghost`,icon:c,className:`w-full justify-start`,children:`Sign out`})]})})}),(0,N.jsx)(`div`,{className:`rounded-lg border border-border bg-card p-3`,children:(0,N.jsxs)(`div`,{className:`space-y-2`,children:[(0,N.jsx)(a,{variant:`primary`,icon:h,children:`Invite user`}),(0,N.jsx)(r,{size:`xs`,type:`secondary`,children:`Pair user menus with base buttons and badges for app-specific account controls.`})]})})]})})}var K=`import { LogOut, Settings, User, UserPlus } from 'lucide-react';
+import { Button } from '@/components/base/buttons';
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '@/components/base/display/avatar';
+import { UserCell } from '@/components/base/display/user-cell';
+import { Text } from '@/components/typography';
+import { Badge } from '@/components/base/badge';
+import { HeaderUserMenu } from '@/components/layout/header';
+import { SidebarNavigationUser, SidebarProvider } from '@/components/layout/sidebar';
+import type { LayoutUser } from '@/components/layout';
+import { Row } from '../../PreviewLayout';
+
+const users: LayoutUser[] = [
+	{ name: 'Sarah Smitha', email: 'maria@example.com', avatar: 'https://i.pravatar.cc/96?img=5' },
+	{ name: 'Daniel Kowalski', email: 'stefan@example.com', avatar: 'https://i.pravatar.cc/96?img=12' },
+	{ name: 'Emma Markova', email: 'elena@example.com' },
+];
+
+function initials(name: string) {
+	return name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
+}
+
+export function AvatarStates() {
+	return (
+		<>
+			<Row>
+								{users.map((user, index) => (
+									<Avatar key={user.name} size={index === 0 ? 'lg' : 'default'}>
+										{!!user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
+										<AvatarFallback>{initials(user.name)}</AvatarFallback>
+										<AvatarBadge className={index === 1 ? 'bg-warning' : 'bg-success'} />
+									</Avatar>
+								))}
+								<AvatarGroup>
+									{users.map((user) => (
+										<Avatar key={user.name}>
+											{!!user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
+											<AvatarFallback>{initials(user.name)}</AvatarFallback>
+										</Avatar>
+									))}
+									<AvatarGroupCount>+8</AvatarGroupCount>
+								</AvatarGroup>
+							</Row>
+		</>
+	);
+}
+
+export function HeaderUserMenuExample() {
+	return (
+		<>
+			<div className="flex flex-col gap-4 rounded-xl border border-border p-4 sm:flex-row sm:items-center sm:justify-between">
+				<div className="min-w-0">
+					<Text weight="semibold">Account switcher surface</Text>
+					<Text size="xs" type="secondary">Default trigger renders avatar, name, email, and dropdown actions.</Text>
+				</div>
+				<HeaderUserMenu user={users[0]} onProfile={() => {}} onSettings={() => {}} onLogout={() => {}} />
+			</div>
+		</>
+	);
+}
+
+export function SidebarUserMenu() {
+	return (
+		<>
+			<SidebarProvider className="min-h-0">
+				<div className="max-w-sm rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground">
+					<SidebarNavigationUser user={users[1]} onProfile={() => {}} onSettings={() => {}} onLogout={() => {}} />
+				</div>
+			</SidebarProvider>
+		</>
+	);
+}
+
+export function CustomTriggerCustomContent() {
+	return (
+		<>
+			<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(14rem,0.85fr)] md:items-start">
+				<div className="rounded-lg border border-border bg-card p-3">
+					<HeaderUserMenu
+						user={users[2]}
+						renderTrigger={(user) => (
+							<Button
+								type="button"
+								variant="secondary"
+								buttonStyle="outline"
+								className="h-auto w-full justify-start rounded-md px-2.5 py-2"
+							>
+								<UserCell
+									size="sm"
+									name={user.name}
+									initials={initials(user.name)}
+									trailing={<Badge variant="info">Admin</Badge>}
+								/>
+							</Button>
+						)}
+						customContent={(
+							<div className="space-y-1">
+								<Button variant="secondary" buttonStyle="ghost" icon={User} className="w-full justify-start">Profile</Button>
+								<Button variant="secondary" buttonStyle="ghost" icon={Settings} className="w-full justify-start">Preferences</Button>
+								<Button variant="secondary" buttonStyle="ghost" icon={LogOut} className="w-full justify-start">Sign out</Button>
+							</div>
+						)}
+					/>
+				</div>
+
+				<div className="rounded-lg border border-border bg-card p-3">
+					<div className="space-y-2">
+						<Button variant="primary" icon={UserPlus}>Invite user</Button>
+						<Text size="xs" type="secondary">
+							Pair user menus with base buttons and badges for app-specific account controls.
+						</Text>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}
+`;function q(e){return z||Y(`Examples`,!1),H||Y(`Examples.AvatarStates`,!0),G||Y(`Examples.CustomTriggerCustomContent`,!0),U||Y(`Examples.HeaderUserMenuExample`,!0),W||Y(`Examples.SidebarUserMenu`,!0),(0,N.jsx)(t,{title:`Layout · Users & avatars`,description:`User identity surfaces used by layout headers, sidebars, menus, avatar groups, and status badges.`,layer:`layout`,status:`ready`,children:(0,N.jsxs)(n,{title:`Examples`,id:`examples`,children:[(0,N.jsx)(o,{name:`AvatarStates`,source:K,children:(0,N.jsx)(H,{})}),(0,N.jsx)(o,{name:`HeaderUserMenuExample`,source:K,children:(0,N.jsx)(U,{})}),(0,N.jsx)(o,{name:`SidebarUserMenu`,source:K,children:(0,N.jsx)(W,{})}),(0,N.jsx)(o,{name:`CustomTriggerCustomContent`,source:K,children:(0,N.jsx)(G,{})})]})})}function J(e={}){let{wrapper:t}=e.components||{};return t?(0,N.jsx)(t,{...e,children:(0,N.jsx)(q,{...e})}):q(e)}function Y(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{J as default};