@infinityfx/fluid 1.4.13 → 1.4.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as a,useState as o,useEffect as i}from"react";import{combineClasses as t,hexToRgb as n,rgbToHsv as l,classes as s,rgbToHex as c,hsvToRgb as d}from"../../core/utils.js";import u from"../display/swatch.js";import{createStyles as f}from"../../core/style.js";import m from"./slider.js";import h from"./field.js";import p from"./number-field.js";import g from"../layout/group.js";const b=f("color-picker",(e=>({".wrapper":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".row":{display:"flex",gap:"var(--f-spacing-sml)"},".column, .fields":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".column":{flexGrow:1},".space":{position:"relative",minWidth:"12em",height:"12em",borderRadius:"var(--f-radius-sml)",backgroundBlendMode:"multiply",border:"solid 1px var(--f-clr-fg-200)",flexGrow:1,userSelect:"none",cursor:"pointer",touchAction:"none"},".selection":{position:"absolute",width:"1.2em",height:"1.2em",borderRadius:"var(--f-radius-sml)",backgroundColor:"var(--color)",border:"solid 1px white",boxShadow:"var(--f-shadow-sml)",translate:"-50% -50%",cursor:"pointer",WebkitBackfaceVisibility:"hidden"},'.selection[aria-disabled="true"]':{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-300)"},".wrapper .swatch":{width:"auto",height:"auto",flexGrow:1},".wrapper .hex":{minWidth:"4.2em"},".wrapper .rgb > * ":{minWidth:"4.2em",flexGrow:1},".wrapper .hue__progress":{backgroundColor:"transparent !important"},".hue__track":{background:"linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",height:"100%",borderRadius:"var(--f-radius-sml)"},".wrapper .hue__handle":{borderRadius:"var(--f-radius-med)"},".wrapper .hue__handle::after":{boxSizing:"border-box",border:"solid 1px white",borderRadius:"var(--f-radius-sml)"},'.hue__handle[aria-disabled="true"]::after':{borderColor:"var(--f-clr-grey-300)"},'.wrapper .hue__handle[aria-disabled="false"]::after':{backgroundColor:"var(--hue)"},[`@media (max-width: ${e.breakpoints.mob}px)`]:{".row":{flexDirection:"column"},".column":{flexDirection:"row-reverse"},".fields":{flexDirection:"column",flexGrow:1},".wrapper .swatch":{aspectRatio:1,maxHeight:"5.3em"}}})));function
|
|
2
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as a,useState as o,useEffect as i}from"react";import{combineClasses as t,hexToRgb as n,rgbToHsv as l,classes as s,rgbToHex as c,hsvToRgb as d}from"../../core/utils.js";import u from"../display/swatch.js";import{createStyles as f}from"../../core/style.js";import m from"./slider.js";import h from"./field.js";import p from"./number-field.js";import g from"../layout/group.js";const b=f("color-picker",(e=>({".wrapper":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".row":{display:"flex",gap:"var(--f-spacing-sml)"},".column, .fields":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".column":{flexGrow:1},".space":{position:"relative",minWidth:"12em",height:"12em",borderRadius:"var(--f-radius-sml)",backgroundBlendMode:"multiply",border:"solid 1px var(--f-clr-fg-200)",flexGrow:1,userSelect:"none",cursor:"pointer",touchAction:"none"},".selection":{position:"absolute",width:"1.2em",height:"1.2em",borderRadius:"var(--f-radius-sml)",backgroundColor:"var(--color)",border:"solid 1px white",boxShadow:"var(--f-shadow-sml)",translate:"-50% -50%",cursor:"pointer",WebkitBackfaceVisibility:"hidden"},'.selection[aria-disabled="true"]':{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-300)"},".wrapper .swatch":{width:"auto",height:"auto",flexGrow:1},".wrapper .hex":{minWidth:"4.2em"},".wrapper .rgb > * ":{minWidth:"4.2em",flexGrow:1},".wrapper .hue__progress":{backgroundColor:"transparent !important"},".hue__track":{background:"linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",height:"100%",borderRadius:"var(--f-radius-sml)"},".wrapper .hue__handle":{borderRadius:"var(--f-radius-med)"},".wrapper .hue__handle::after":{boxSizing:"border-box",border:"solid 1px white",borderRadius:"var(--f-radius-sml)"},'.hue__handle[aria-disabled="true"]::after':{borderColor:"var(--f-clr-grey-300)"},'.wrapper .hue__handle[aria-disabled="false"]::after':{backgroundColor:"var(--hue)"},[`@media (max-width: ${e.breakpoints.mob}px)`]:{".row":{flexDirection:"column"},".column":{flexDirection:"row-reverse"},".fields":{flexDirection:"column",flexGrow:1},".wrapper .swatch":{aspectRatio:1,maxHeight:"5.3em"}}})));function v({cc:f={},format:v,defaultValue:w,value:x,onChange:_,disabled:y,...k}){const C=t(b,f),j=a(!1),N=a(null),R=void 0===x?null:"string"==typeof x?n(x):x,D=void 0===w?[255,0,0]:"string"==typeof w?n(w):w,[E,G]=o(l(D)),[M,$]=o(null),[B,A]=R?[R]:o(D),L=function(e,r){const[a,o,i]=d(r);return a==e[0]&&o==e[1]&&i==e[2]}(B,E)?E:l(B),S=a(L);function W(e,r=!1){A?.(e),_?.("rgb"===v?e:c(e)),r&&(S.current=l(e)),G(S.current)}function z(e){if(!j.current||!N.current||y)return;const{clientX:r,clientY:a}="touches"in e?e.changedTouches[0]:e;let{x:o,y:i,width:t,height:n}=N.current.getBoundingClientRect();S.current[1]=100*Math.min(Math.max(r-o+.5,0)/t,1),S.current[2]=100*(1-Math.min(Math.max(a-i+.5,0)/n,1)),W(d(S.current))}return i((()=>{const e=new AbortController,r=e.signal,a=e=>{z(e),j.current=!1};return window.addEventListener("mouseup",a,{signal:r}),window.addEventListener("touchend",a,{signal:r}),window.addEventListener("mousemove",z,{signal:r}),window.addEventListener("touchmove",z,{signal:r}),()=>e.abort()}),[y]),e("div",{...k,style:{"--hue":`hsl(${L[0]}, 100%, 50%)`,"--color":`rgb(${B.join(",")})`},className:s(C.wrapper,k.className),children:[e("div",{className:C.row,children:[r("div",{ref:N,onMouseDown:e=>{j.current=!0,z(e.nativeEvent)},onTouchStart:e=>{e.preventDefault(),j.current=!0,z(e.nativeEvent)},className:C.space,style:{background:`linear-gradient(90deg, transparent, hsl(${L[0]}, 100%, 50%)), linear-gradient(white, black)`},children:r("div",{"aria-disabled":y,className:C.selection,style:{left:`${L[1]}%`,top:100-L[2]+"%"}})}),e("div",{className:C.column,children:[r(u,{color:`rgb(${B.join(",")})`,cc:{...f,swatch:C.swatch}}),e("div",{className:C.fields,children:[r(h,{disabled:y,size:"sml",icon:"#",className:C.hex,value:null!==M?M:c(B),onChange:e=>{const r=e.target.value.replace(/[^\da-fA-F]/g,"").slice(0,6);$(r),W(n(r),!0)},onBlur:()=>$(null)}),r(g,{className:C.rgb,children:B.map(((e,a)=>r(p,{cc:f,disabled:y,max:255,precision:0,controls:!1,size:"sml",icon:"RGB".charAt(a),value:e,onChange:e=>{const r=B.slice();r[a]=parseInt(e.target.value)||0,W(r,!0)}},a)))})]})]})]}),r(m,{max:360,step:.25,tooltips:"never",disabled:y,value:[L[0]],onChange:e=>{S.current[0]=e[0],W(d(S.current))},cc:{...f,progress:C.hue__progress,track:C.hue__track,handle:C.hue__handle}})]})}export{v as default};
|
|
3
3
|
//# sourceMappingURL=color-picker.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useId as t,useRef as a,useState as n,useEffect as o}from"react";import i from"../feedback/halo.js";import{combineClasses as l,toNumber as s,classes as d,round as c}from"../../core/utils.js";import u from"../display/tooltip.js";import h from"../../hooks/use-input-props.js";import{createStyles as m}from"../../core/style.js";const p=m("slider",{".wrapper":{display:"flex",flexDirection:"column"},".wrapper:not(.vertical)":{minWidth:"min(100vw, 12em)",gap:"var(--f-spacing-xsm)"},".wrapper.vertical":{minHeight:"min(100vh, 12em)",gap:"var(--f-spacing-med)"},".label":{fontSize:".8em",fontWeight:500,color:"var(--f-clr-text-100)"},".slider":{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",margin:"auto",width:"calc(100% - 1.1em)",height:"1.1em",userSelect:"none",flexGrow:1},".wrapper.vertical .slider":{order:-1,flexDirection:"column",height:"calc(100% - 1.1em)",width:"1.1em"},".track":{position:"relative",height:".4em",borderRadius:"999px",backgroundColor:"var(--f-clr-fg-200)",overflow:"hidden",touchAction:"none",flexGrow:1},".wrapper.vertical .track":{width:".4em"},".progress":{backgroundColor:"var(--f-clr-primary-100)",width:"100%",height:"100%",transformOrigin:"bottom left",willChange:"transform"},".handle":{position:"absolute",translate:"-50% 0%",width:"1.1em",height:"1.1em",outline:"none",borderRadius:"99px",touchAction:"none"},".wrapper.vertical .handle":{translate:"0% 50%"},".handle::after":{content:'""',display:"block",width:"100%",height:"100%",borderRadius:"99px",backgroundColor:"white",boxShadow:"var(--f-shadow-med)"},'.slider[data-disabled="false"]':{cursor:"pointer"},'.handle[aria-disabled="false"]':{cursor:"pointer"},'.handle[aria-disabled="true"]':{width:".8em",height:".8em"},'.handle[aria-disabled="true"]::after':{backgroundColor:"var(--f-clr-grey-200)"},'.slider[data-disabled="true"] .progress':{backgroundColor:"var(--f-clr-grey-300)"},".handle .halo":{inset:"-.5em"}});function v({cc:m={},handles:v=1,vertical:f=!1,tooltips:w="interact",formatTooltip:b,label:g,value:x,defaultValue:y,onChange:E,...k}){const A=l(p,m),M=t(),C=a(null),j=a(null),L=s(k.max,1),N=s(k.min,0),D=s(k.step,.1),R=e=>(e-N)/(L-N),S=e=>N+e*(L-N);function T(){const e=new Array(v).fill(1).map(((e,r)=>S(r/Math.max(v-1,1))));return y&&y.forEach(((r,t)=>{e[t]=r,t<e.length-2&&(e[t+1]=(e[t+2]+r)/2)})),e}const[$,z]=void 0!==x?[x]:n(T);function G(e){if(!C.current||k.disabled)return;e.stopPropagation();const r=("touches"in e?e.touches[0]:e)?.[f?"clientY":"clientX"];if(void 0===r)return;const{y:t,height:a,x:n,width:o}=C.current.getBoundingClientRect(),i=S(f?1-(r-t)/a:(r-n)/o);H(null===j.current||j.current<0?$.reduce(((e,r,t)=>{const a=Math.abs(r-i);return a<e[0]?[a,t]:e}),[Number.MAX_VALUE,0])[1]:j.current,i)}function H(e,r){if(e>0&&(r=Math.max(r,$[e-1]+D)),e<v-1&&(r=Math.min(r,$[e+1]-D)),(r=Math.min(Math.max(Math.round(r/D)*D,N),L))===$[e])return;const t=$.slice();t[e]=r,z?.(t),E?.(t)}o((()=>z?.(T())),[v]),o((()=>{const e=()=>j.current=null,r=e=>null!==j.current&&G(e);return window.addEventListener("mousemove",r),window.addEventListener("touchmove",r),window.addEventListener("mouseup",e),()=>{window.removeEventListener("mousemove",r),window.removeEventListener("touchmove",r),window.removeEventListener("mouseup",e)}}),[$,k.disabled]);const[I,U]=h(k);let V=R($[0]);const W=v<2?0:V;return v>1&&(V=R($[v-1])-V),e("div",{...U,className:d(A.wrapper,f&&A.vertical,k.className),children:[r("input",{...I,type:"hidden",value:$.join(",")}),g&&r("div",{id:M,className:A.label,children:g}),e("div",{className:A.slider,"data-disabled":!!k.disabled,onTouchEnd:()=>j.current=null,onMouseDown:e=>{j.current=-1,G(e.nativeEvent)},onTouchStart:e=>{j.current=-1,G(e.nativeEvent)},children:[r("div",{ref:C,className:A.track,children:r("div",{className:A.progress,style:{scale:f?`1 ${V}`:`${V} 1`,translate:f?`0% ${-100*W}%`:100*W+"% 0%"}})}),new Array(v).fill(0).map(((e,t)=>{const a=$[t];return r(u,{delay:0,content:b?b(c(a,2)):c(a,2),visibility:w,position:f?"right":"bottom",children:r(i,{disabled:k.disabled,cc:{halo:A.halo},children:r("div",{className:A.handle,role:"slider",tabIndex:k.disabled?-1:0,"aria-disabled":!!k.disabled,onMouseDown:()=>j.current=t,onTouchStart:()=>j.current=t,onTouchEnd:()=>j.current=null,onKeyDown:e=>{switch(e.key){case"ArrowUp":case"ArrowRight":return H(t,a+D);case"ArrowDown":case"ArrowLeft":return H(t,a-D);case"Home":return H(t,N);case"End":return H(t,L)}},"aria-valuenow":a,"aria-valuemin":$[t-1]||0,"aria-valuemax":$[t+1]||1,"aria-orientation":f?"vertical":"horizontal","aria-label":I["aria-label"],"aria-labelledby":g?M:void 0,style:{[f?"bottom":"left"]:100*R(a)+"%"}})})},t)}))]})]})}export{v as default};
|
|
2
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useId as t,useRef as a,useState as n,useEffect as o}from"react";import i from"../feedback/halo.js";import{combineClasses as l,toNumber as s,classes as d,round as c}from"../../core/utils.js";import u from"../display/tooltip.js";import h from"../../hooks/use-input-props.js";import{createStyles as m}from"../../core/style.js";const p=m("slider",{".wrapper":{display:"flex",flexDirection:"column"},".wrapper:not(.vertical)":{minWidth:"min(100vw, 12em)",gap:"var(--f-spacing-xsm)"},".wrapper.vertical":{minHeight:"min(100vh, 12em)",gap:"var(--f-spacing-med)"},".label":{fontSize:".8em",fontWeight:500,color:"var(--f-clr-text-100)"},".slider":{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",margin:"auto",width:"calc(100% - 1.1em)",height:"1.1em",userSelect:"none",flexGrow:1},".wrapper.vertical .slider":{order:-1,flexDirection:"column",height:"calc(100% - 1.1em)",width:"1.1em"},".track":{position:"relative",height:".4em",borderRadius:"999px",backgroundColor:"var(--f-clr-fg-200)",overflow:"hidden",touchAction:"none",flexGrow:1},".wrapper.vertical .track":{width:".4em"},".progress":{backgroundColor:"var(--f-clr-primary-100)",width:"100%",height:"100%",transformOrigin:"bottom left",willChange:"transform"},".handle":{position:"absolute",translate:"-50% 0%",width:"1.1em",height:"1.1em",outline:"none",borderRadius:"99px",touchAction:"none"},".wrapper.vertical .handle":{translate:"0% 50%"},".handle::after":{content:'""',display:"block",width:"100%",height:"100%",borderRadius:"99px",backgroundColor:"white",boxShadow:"var(--f-shadow-med)"},'.slider[data-disabled="false"]':{cursor:"pointer"},'.handle[aria-disabled="false"]':{cursor:"pointer"},'.handle[aria-disabled="true"]':{width:".8em",height:".8em"},'.handle[aria-disabled="true"]::after':{backgroundColor:"var(--f-clr-grey-200)"},'.slider[data-disabled="true"] .progress':{backgroundColor:"var(--f-clr-grey-300)"},".handle .halo":{inset:"-.5em"}});function v({cc:m={},handles:v=1,vertical:f=!1,tooltips:w="interact",formatTooltip:b,label:g,value:x,defaultValue:y,onChange:E,...k}){const A=l(p,m),M=t(),C=a(null),j=a(null),L=s(k.max,1),N=s(k.min,0),D=s(k.step,.1),R=e=>(e-N)/(L-N),S=e=>N+e*(L-N);function T(){const e=new Array(v).fill(1).map(((e,r)=>S(r/Math.max(v-1,1))));return y&&y.forEach(((r,t)=>{e[t]=r,t<e.length-2&&(e[t+1]=(e[t+2]+r)/2)})),e}const[$,z]=void 0!==x?[x]:n(T);function G(e){if(!C.current||k.disabled)return;e.stopPropagation();const r=("touches"in e?e.touches[0]:e)?.[f?"clientY":"clientX"];if(void 0===r)return;const{y:t,height:a,x:n,width:o}=C.current.getBoundingClientRect(),i=S(f?1-(r-t)/a:(r-n)/o);H(null===j.current||j.current<0?$.reduce(((e,r,t)=>{const a=Math.abs(r-i);return a<e[0]?[a,t]:e}),[Number.MAX_VALUE,0])[1]:j.current,i)}function H(e,r){if(e>0&&(r=Math.max(r,$[e-1]+D)),e<v-1&&(r=Math.min(r,$[e+1]-D)),(r=Math.min(Math.max(Math.round(r/D)*D,N),L))===$[e])return;const t=$.slice();t[e]=r,z?.(t),E?.(t)}o((()=>z?.(T())),[v]),o((()=>{const e=()=>j.current=null,r=e=>null!==j.current&&G(e);return window.addEventListener("mousemove",r),window.addEventListener("touchmove",r),window.addEventListener("mouseup",e),()=>{window.removeEventListener("mousemove",r),window.removeEventListener("touchmove",r),window.removeEventListener("mouseup",e)}}),[$,k.disabled]);const[I,U]=h(k);let V=R($[0]);const W=v<2?0:V;return v>1&&(V=R($[v-1])-V),e("div",{...U,className:d(A.wrapper,f&&A.vertical,k.className),children:[r("input",{...I,type:"hidden",value:$.join(",")}),g&&r("div",{id:M,className:A.label,children:g}),e("div",{className:A.slider,"data-disabled":!!k.disabled,onTouchEnd:()=>j.current=null,onMouseDown:e=>{j.current=-1,G(e.nativeEvent)},onTouchStart:e=>{e.preventDefault(),j.current=-1,G(e.nativeEvent)},children:[r("div",{ref:C,className:A.track,children:r("div",{className:A.progress,style:{scale:f?`1 ${V}`:`${V} 1`,translate:f?`0% ${-100*W}%`:100*W+"% 0%"}})}),new Array(v).fill(0).map(((e,t)=>{const a=$[t];return r(u,{delay:0,content:b?b(c(a,2)):c(a,2),visibility:w,position:f?"right":"bottom",children:r(i,{disabled:k.disabled,cc:{halo:A.halo},children:r("div",{className:A.handle,role:"slider",tabIndex:k.disabled?-1:0,"aria-disabled":!!k.disabled,onMouseDown:()=>j.current=t,onTouchStart:()=>j.current=t,onTouchEnd:()=>j.current=null,onKeyDown:e=>{switch(e.key){case"ArrowUp":case"ArrowRight":return H(t,a+D);case"ArrowDown":case"ArrowLeft":return H(t,a-D);case"Home":return H(t,N);case"End":return H(t,L)}},"aria-valuenow":a,"aria-valuemin":$[t-1]||0,"aria-valuemax":$[t+1]||1,"aria-orientation":f?"vertical":"horizontal","aria-label":I["aria-label"],"aria-labelledby":g?M:void 0,style:{[f?"bottom":"left"]:100*R(a)+"%"}})})},t)}))]})]})}export{v as default};
|
|
3
3
|
//# sourceMappingURL=slider.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as o,useId as
|
|
2
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as o,useId as n,useEffect as i}from"react";import t from"./overlay.js";import a from"../input/button.js";import{combineClasses as l,classes as d,combineRefs as s}from"../../core/utils.js";import{Animatable as c}from"@infinityfx/lively";import m from"./scrollarea.js";import{createStyles as u}from"../../core/style.js";import p from"../../hooks/use-fluid.js";import f from"../../hooks/use-media-query.js";import{useLink as h}from"@infinityfx/lively/hooks";import{Icon as g}from"../../core/icons.js";const v=u("modal",(e=>({".modal":{background:"var(--f-clr-bg-100)",borderRadius:"var(--f-radius-med)",display:"flex",flexDirection:"column",paddingBlock:"var(--f-spacing-med)",minWidth:"min(100vw, 16em)",border:"solid 1px var(--f-clr-fg-200)",margin:"var(--f-spacing-lrg)",maxHeight:"calc(100% - var(--f-spacing-lrg) * 2)",touchAction:"none"},".scrollarea":{paddingInline:"var(--f-spacing-med)"},".header":{display:"flex",alignItems:"center",fontWeight:700,paddingInline:"var(--f-spacing-med)",paddingBottom:"var(--f-spacing-med)",color:"var(--f-clr-text-100)"},".handle":{position:"relative",height:"5px",width:"48px",backgroundColor:"var(--f-clr-grey-200)",borderRadius:"99px",alignSelf:"center",display:"none"},".title":{flexGrow:1,color:"var(--f-clr-heading-100)"},[`@media (max-width: ${e.breakpoints.mob}px)`]:{".modal":{width:"100vw",alignSelf:"flex-end",margin:0,borderRadius:"var(--f-radius-lrg)",borderBottomRightRadius:0,borderBottomLeftRadius:0,paddingBottom:"calc(var(--f-spacing-med) + 32px)",marginBottom:"-32px"},".handle":{display:"block"}}})));function x({children:u,cc:x={},show:b,onClose:w,title:y,mobileClosing:k="handle",ref:j,...B}){const N=l(v,x),R=o(null),C=o(null),E=o(null),L=h(0),I=n(),S=p(),$=f(`(max-width: ${S.breakpoints.mob}px)`);return i((()=>{function e(e){if(!E.current||!C.current)return;if(!e.touches.length){return L()/C.current.clientHeight>.35?w():L.set(0,{duration:.25}),E.current=null}const{clientY:r}=e.touches[0],o=Math.max(r-E.current.clientY,-32);L.set(o)}return window.addEventListener("touchmove",e),window.addEventListener("touchend",e),()=>{window.removeEventListener("touchmove",e),window.removeEventListener("touchend",e)}}),[]),e(t,{show:b,onClose:w,children:e(c,{id:"modal",onAnimationEnd:()=>L.set(0),initial:$?{translate:"0% 100%"}:{translate:"0px 20px",opacity:0},animate:{translate:L((e=>`0px ${e}px`))},animations:{mob:{translate:["0% 100%","0% 0%"],duration:.25,composite:"combine"},dsk:{opacity:[0,.2,1],scale:[.9,1],duration:.25}},triggers:[{on:"mount",name:$?"mob":"dsk"},{on:"unmount",reverse:!0,name:$?"mob":"dsk"}],children:r("div",{...B,ref:s(j,C),className:d(N.modal,B.className),role:"dialog","aria-modal":!0,"aria-labelledby":I,onTouchStart:e=>{"handle"!==k||e.defaultPrevented||R.current?.scrollTop||!C.current?.contains(e.target)||(E.current=e.touches[0])},children:[$&&"handle"===k&&e("div",{className:N.handle}),r("div",{className:N.header,children:[e("span",{id:I,className:N.title,children:y}),("button"===k||!$)&&e(a,{compact:!0,variant:"minimal",onClick:w,children:e(g,{type:"close"})})]}),e(m,{className:N.scrollarea,ref:R,children:u})]})})})}export{x as default};
|
|
3
3
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
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=!0,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
|
|
2
|
+
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=!0,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 D(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;D(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:e=>{e.preventDefault(),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:{...h,halo:b.halo},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)&&(D(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};
|
|
3
3
|
//# sourceMappingURL=panel.js.map
|