@infinityfx/fluid/dist/components/layout/panel.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsx as e,jsxs as i,Fragment as r}from"react/jsx-runtime";import{Children as t,useState as n,useRef as o,useEffect as d,isValidElement as a,cloneElement as l}from"react";import{combineClasses as c,classes as s,combineRefs as u}from"../../core/utils.js";import{createStyles as h}from"../../core/style.js";import"../feedback/progress-bar.js";import"../feedback/circular-progress.js";import"@infinityfx/lively";import p from"../feedback/halo.js";import"../feedback/indicator.js";import"../feedback/skeleton.js";const v=h("panel",{".panel":{position:"relative",display:"flex",flexShrink:0},".d__vertical":{flexDirection:"column"},".divider":{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",touchAction:"none"},".d__horizontal > .divider":{minHeight:"100%",height:"auto",cursor:"ew-resize"},".d__horizontal.v__default > .divider":{background:"var(--f-clr-fg-200)",width:"1px"},".d__horizontal.v__minimal > .divider":{paddingInline:"3px"},".d__vertical > .divider":{minWidth:"100%",width:"auto",cursor:"ns-resize"},".d__vertical.v__default > .divider":{background:"var(--f-clr-fg-200)",height:"1px"},".d__vertical.v__minimal > .divider":{paddingBlock:"3px"},".focus":{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",zIndex:1},".d__horizontal.v__default > .divider .focus":{width:"3px",height:"100%"},".d__vertical.v__default > .divider .focus":{height:"3px",width:"100%"},".handle":{position:"relative",borderRadius:"3px",backgroundColor:"var(--f-clr-fg-200)",display:"grid",gap:"1px",zIndex:1,outline:"none"},".d__horizontal.v__minimal > .divider .handle":{width:"6px",height:"30px",backgroundColor:"var(--f-clr-grey-200)"},".d__vertical.v__minimal > .divider .handle":{height:"6px",width:"30px",backgroundColor:"var(--f-clr-grey-200)"},".d__horizontal > .divider .handle":{gridTemplateColumns:"1fr 1fr",padding:"5px 3px"},".d__vertical > .divider .handle":{gridTemplateColumns:"1fr 1fr 1fr",padding:"3px 5px"},".dot":{backgroundColor:"var(--f-clr-grey-200)",borderRadius:"99px",width:"2px",height:"2px"},".divider .halo":{inset:"-.5em"},".v__minimal .divider .halo":{borderRadius:"99px"}});function f({cc:h={},children:f,variant:m="default",direction:_="horizontal",handles:g,defaultSizes:x,ref:w,...y}){const b=c(v,h),k=t.count(f),[z,j]=n(new Array(Math.max(k-1,0)).fill(0).map(((e,i)=>void 0!==x?.[i]?x[i]:(i+1)/k))),C=o(null),A=o(0);function I(e,i){const r=z[e-1]||0,t=z[e+1]||1,n=z.slice();n[e]=Math.min(Math.max(i,r),t),j(n)}return d((()=>{const e=new AbortController,i=e.signal;function r(e){if(!A.current||!C.current)return;const{x:i,y:r,width:t,height:n}=C.current.getBoundingClientRect(),{clientX:o,clientY:d}="touches"in e?e.touches[0]:e,a=(o-i)/t,l=(d-r)/n;I(A.current-1,"vertical"===_?l:a)}const t=()=>A.current=0;return window.addEventListener("mousemove",r,{signal:i}),window.addEventListener("mouseup",t,{signal:i}),window.addEventListener("touchmove",r,{signal:i}),window.addEventListener("touchend",t,{signal:i}),()=>e.abort()}),[z,_]),e("div",{...y,ref:u(C,w),className:s(b.panel,b[`v__${m}`],b[`d__${_}`],y.className),children:t.map(f,((t,n)=>{if(!a(t))return t;const o=(z[n]??1)-(z[n-1]??0);return i(r,{children:[0!==n&&i("div",{className:b.divider,onTouchStart:()=>A.current=n,onMouseDown:()=>A.current=n,children:[e("div",{className:b.focus}),g&&e(p,{hover:!1,color:"var(--f-clr-primary-400)",cc:{halo:b.halo,...h},children:e("div",{tabIndex:0,className:b.handle,onKeyDown:e=>{const i="ArrowRight"===e.key||"ArrowDown"===e.key;(i||"ArrowLeft"===e.key||"ArrowUp"===e.key)&&(I(n-1,z[n-1]+(i?.05:-.05)),e.preventDefault())},children:"default"===m&&[0,1,2,3,4,5].map((i=>e("div",{className:b.dot},i)))})})]}),l(t,{style:{...t.props.style,flexGrow:100*o,flexBasis:0}})]})}))})}export{f as default};
//# sourceMappingURL=panel.js.map