@infinityfx/fluid 1.4.12 → 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.
- package/dist/components/display/combobox/content.js +1 -1
- package/dist/components/input/color-picker.js +1 -1
- package/dist/components/input/field.js +1 -1
- package/dist/components/input/file-field.js +1 -1
- package/dist/components/input/select.js +1 -1
- package/dist/components/input/slider.js +1 -1
- package/dist/components/layout/modal.js +1 -1
- package/dist/components/layout/panel.js +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as o,useState as t,useLayoutEffect as n,useMemo as i,Children as a,isValidElement as s,cloneElement as c}from"react";import l from"../../layout/popover/index.js";import d from"../../layout/scrollarea.js";import m from"../../input/field.js";import{Animatable as u}from"@infinityfx/lively";import{combineClasses as f,combineRefs as p,classes as h,getFocusable as g}from"../../../core/utils.js";import{createStyles as x}from"../../../core/style.js";import{usePopover as v}from"../../layout/popover/root.js";import{Icon as y}from"../../../core/icons.js";import"../../../context/fluid.js";import b from"../../../hooks/use-debounce.js";const _=x("combobox.content",{".container:not(.modal)":{background:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"calc(.25em + var(--f-radius-sml))",boxShadow:"var(--f-shadow-med)",minWidth:"min(100vw, 10em)",width:"100%"},".container.round":{borderRadius:"1.4em"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".content":{maxHeight:"9.5em"},".modal .content":{maxHeight:"50vh"},".message":{position:"relative",padding:".5em",width:"100%",textAlign:"center",color:"var(--f-clr-grey-500)",lineHeight:1.25},".container .field":{margin:".25em",marginBottom:0},".container .field__content":{paddingBlock:".5em"}});function w({children:x,cc:w={},round:j,size:z="med",autoFocus:k=!0,searchable:M=!1,placeholder:S="Search..",emptyMessage:C="Nothing found",virtualItemHeight:F=0,...H}){const N=f(_,w),{opened:A,trigger:
|
|
2
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as o,useState as t,useLayoutEffect as n,useMemo as i,Children as a,isValidElement as s,cloneElement as c}from"react";import l from"../../layout/popover/index.js";import d from"../../layout/scrollarea.js";import m from"../../input/field.js";import{Animatable as u}from"@infinityfx/lively";import{combineClasses as f,combineRefs as p,classes as h,getFocusable as g}from"../../../core/utils.js";import{createStyles as x}from"../../../core/style.js";import{usePopover as v}from"../../layout/popover/root.js";import{Icon as y}from"../../../core/icons.js";import"../../../context/fluid.js";import b from"../../../hooks/use-debounce.js";const _=x("combobox.content",{".container:not(.modal)":{background:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"calc(.25em + var(--f-radius-sml))",boxShadow:"var(--f-shadow-med)",minWidth:"min(100vw, 10em)",width:"100%"},".container.round":{borderRadius:"1.4em"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".content":{maxHeight:"9.5em"},".modal .content":{maxHeight:"50vh"},".message":{position:"relative",padding:".5em",width:"100%",textAlign:"center",color:"var(--f-clr-grey-500)",lineHeight:1.25},".container .field":{margin:".25em",marginBottom:0},".container .field__content":{paddingBlock:".5em"}});function w({children:x,cc:w={},round:j,size:z="med",autoFocus:k=!0,searchable:M=!1,placeholder:S="Search..",emptyMessage:C="Nothing found",virtualItemHeight:F=0,...H}){const N=f(_,w),{opened:A,trigger:B,content:D,isModal:T}=v(),K=o(0),L=o({list:[],index:k?0:-1}),[R,U]=t(""),[I,V]=t({start:0,end:1/0}),W=b((e=>{$(0),U(e)}),200);function $(e){if(!F||!D.current)return V({start:0,end:1/0});const r=Math.ceil(D.current.offsetHeight/F),o=Math.floor(r/2),t=o+Math.floor(e/(F*o))*o,n=Math.max(0,t-r),i=n+2*r;I.end!==i&&V({start:n,end:i})}n((()=>{A&&$(0)}),[A]);const q=i((()=>(K.current=0,a.map(x,(e=>{const r=s(e)&&("value"in e.props?e:e.props.children);if(!s(r)||!("value"in r.props))return e;if(!((""+r.props.value).toLowerCase()||"").includes(R))return null;const o=K.current++,t=o+(M?1:0);return o<I.start||o>I.end?null:c(e,{round:j,ref:p((e=>{L.current.list[t]=e}),e.props.ref),onFocus:e=>{L.current.index=t,H.onFocus?.(e)},autoFocus:t==L.current.index})})))),[x,I,R]);return e(l.Content,{children:e(u,{id:"combobox-options-outer",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r("div",{...H,role:"listbox",className:h(N.container,N[`s__${z}`],j&&N.round,T&&N.modal,H.className),onBlur:e=>{H.onBlur?.(e),L.current.index=-1},onKeyDown:e=>{if(H.onKeyDown?.(e),"Tab"!==e.key&&"ArrowDown"!==e.key&&"ArrowUp"!==e.key)return;const{index:r,list:o}=L.current,t="ArrowUp"===e.key||e.shiftKey?Math.max(r-1,-1):Math.min(r+1,o.length-1),n=t<0?g(B.current,!1):o[L.current.index=t];n?n.focus():L.current.index=0,(n||"Tab"!==e.key)&&e.preventDefault()},children:[M&&e(m,{round:j,size:z,variant:"minimal",placeholder:S,icon:e(y,{type:"search"}),inputRef:e=>L.current.list[0]=e,autoFocus:0==L.current.index,onFocus:()=>L.current.index=0,defaultValue:R,onChange:e=>W(e.target.value.toLowerCase()),cc:{...w,field:N.field,content:N.field__content}}),e(d,{className:N.content,onScroll:e=>$(e.currentTarget.scrollTop),children:r("div",{style:{padding:".25em",minHeight:F?F*K.current:void 0},children:[e("div",{style:{height:F*I.start}}),e(u,{id:"combobox-options-inner",inherit:!0,cachable:[],animate:{opacity:[0,1],scale:[.95,1],duration:.2},staggerLimit:4,stagger:.05,children:(!F||I.end!==1/0)&&q}),!K.current&&e("div",{className:N.message,children:C})]})})]})})})}w.displayName="Combobox.Content";export{w as default};
|
|
3
3
|
//# sourceMappingURL=content.js.map
|
|
@@ -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 r,jsx as e}from"react/jsx-runtime";import{useState as o,useMemo as a}from"react";import{combineClasses as l,classes as t}from"../../core/utils.js";import i from"../../hooks/use-input-props.js";import{createStyles as n}from"../../core/style.js";const d=n("field",{".input":{border:"none",background:"none",outline:"none",color:"var(--f-clr-text-100)",width:0,flexGrow:1},".input::placeholder":{color:"var(--f-clr-grey-300)"},".field":{
|
|
2
|
+
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useState as o,useMemo as a}from"react";import{combineClasses as l,classes as t}from"../../core/utils.js";import i from"../../hooks/use-input-props.js";import{createStyles as n}from"../../core/style.js";const d=n("field",{".input":{border:"none",background:"none",outline:"none",color:"var(--f-clr-text-100)",width:0,flexGrow:1},".input::placeholder":{color:"var(--f-clr-grey-300)"},".field":{borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-grey-200)",transition:"background-color .2s, border-color .2s, color .2s, outline-color .2s",display:"flex",alignItems:"center",overflow:"hidden",outline:"solid 3px transparent",minWidth:"min(var(--width, 100vw), 12em)"},".v__default":{backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)"},".v__minimal":{backgroundColor:"var(--f-clr-fg-100)"},".content":{display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",padding:".675em",flexGrow:1},".v__default:focus-within":{borderColor:"var(--f-clr-primary-100)",color:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)"},".v__minimal:focus-within":{backgroundColor:"var(--f-clr-fg-200)"},'.field[data-error="true"]':{borderColor:"var(--f-clr-error-100)"},'.field[data-error="true"]:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.field[data-error="true"] .content':{color:"var(--f-clr-error-200)"},'.field[data-error="true"] .input':{color:"var(--f-clr-error-200)"},'.field[data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.field[data-disabled="true"] .input':{color:"var(--f-clr-grey-500)"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".field.round":{borderRadius:"calc(1.4em + 1px)"}});function f({cc:n={},round:f=!1,size:s="med",variant:c="default",error:u,icon:v,left:m,right:p,onEnter:g,inputRef:b,shape:_,defaultValue:h,...x}){const y=l(d,n),[w,C]=i(x),[k,z]=void 0!==x.value?[x.value]:o(h||""),j=a((()=>_?.split("").map((r=>/0/.test(r)?/[0-9]/:/\*/.test(r)?/\w/:r))||[]),[_]);return r("div",{...C,className:t(y.field,y[`s__${s}`],y[`v__${c}`],f&&y.round,x.className),"data-error":!!u,"data-disabled":x.disabled,"data-fb":"default"===c?"true":void 0,children:[m,r("label",{className:y.content,children:[v,e("input",{...w,ref:b,value:k,onChange:r=>{let e=r.target.value.split(""),o="",a=0;for(let l=0,t=0;l<e.length;l++){const i=e[l],n=j[t];if(!n){0===t&&(o=r.target.value,a=o.length);break}if("string"==typeof n)o+=n,n===i&&l===t||l--;else{if(!n.test(i))break;o+=i,a=o.length}t++}r.target.value=o.slice(0,a),z?.(r.target.value),x.onChange?.(r)},className:y.input,"aria-invalid":!!u,onKeyDown:r=>{"Enter"===r.key&&g?.()}})]}),p]})}export{f as default};
|
|
3
3
|
//# sourceMappingURL=field.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useState as o,useRef as a}from"react";import l from"./button.js";import i from"../../hooks/use-input-props.js";import{combineClasses as t,classes as n,combineRefs as d}from"../../core/utils.js";import{createStyles as c}from"../../core/style.js";import{Icon as s}from"../../core/icons.js";const f=c("file-field",{".input":{position:"absolute",opacity:0},".placeholder":{color:"var(--f-clr-text-100)",userSelect:"none",flexGrow:1,background:"none",border:"none",width:0,pointerEvents:"none"},".field":{
|
|
2
|
+
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useState as o,useRef as a}from"react";import l from"./button.js";import i from"../../hooks/use-input-props.js";import{combineClasses as t,classes as n,combineRefs as d}from"../../core/utils.js";import{createStyles as c}from"../../core/style.js";import{Icon as s}from"../../core/icons.js";const f=c("file-field",{".input":{position:"absolute",opacity:0},".placeholder":{color:"var(--f-clr-text-100)",userSelect:"none",flexGrow:1,background:"none",border:"none",width:0,pointerEvents:"none"},".field":{borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-grey-200)",transition:"background-color .2s, border-color .2s, color .2s, outline-color .2s",display:"flex",alignItems:"center",overflow:"hidden",outline:"solid 3px transparent",minWidth:"min(var(--width, 100vw), 12em)"},".v__default":{backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)"},".v__minimal":{backgroundColor:"var(--f-clr-fg-100)"},".content":{display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",padding:".675em",flexGrow:1},".v__default:focus-within":{borderColor:"var(--f-clr-primary-100)",color:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)"},".v__minimal:focus-within":{backgroundColor:"var(--f-clr-fg-200)"},'.field[data-error="true"]':{borderColor:"var(--f-clr-error-100)"},'.field[data-error="true"]:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.field[data-error="true"] .content':{color:"var(--f-clr-error-200)"},'.field[data-error="true"] .placeholder':{color:"var(--f-clr-error-200)"},'.field[data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.field[data-disabled="true"] .placeholder':{color:"var(--f-clr-grey-500)"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".field.round":{borderRadius:"calc(1.4em + 1px)"},".button":{marginRight:".25em"}});function u({cc:c={},size:u="med",variant:m="default",round:p,icon:b,error:v,loading:g=!1,inputRef:h,..._}){const y=t(f,c),[x,C]=o([]),z=a(null),[k,w]=i(_);return r("label",{...w,className:n(y.field,y[`s__${u}`],y[`v__${m}`],p&&y.round,_.className),"data-error":!!v,"data-disabled":_.disabled,"data-fb":"default"===m?"true":void 0,children:[r("div",{className:y.content,children:[b,e("input",{...k,ref:d(z,h),type:"file",className:y.input,disabled:_.disabled||g,"aria-invalid":!!v,onChange:r=>{C?.(Array.from(r.target.files||[])),_.onChange?.(r)}}),e("input",{readOnly:!0,role:"none",tabIndex:-1,className:y.placeholder,placeholder:k.placeholder,value:x.map((r=>r.name))})]}),e(l,{compact:!0,"aria-label":k["aria-label"],"aria-labelledby":k["aria-labelledby"],disabled:_.disabled,round:p,size:u,loading:g,cc:{...c,button:y.button},onClick:()=>z.current?.click(),children:e(s,{type:"upload"})})]})}export{u as default};
|
|
3
3
|
//# sourceMappingURL=file-field.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as r,jsx as e,Fragment as a}from"react/jsx-runtime";import{useId as l,useRef as o,useState as i,useEffect as t}from"react";import n from"./button.js";import{combineClasses as d,classes as c,combineRefs as s}from"../../core/utils.js";import f from"../display/badge.js";import u from"../display/combobox/index.js";import m from"../../hooks/use-input-props.js";import{createStyles as p}from"../../core/style.js";import{Icon as b}from"../../core/icons.js";const g=p("select",{".field":{
|
|
2
|
+
import{jsxs as r,jsx as e,Fragment as a}from"react/jsx-runtime";import{useId as l,useRef as o,useState as i,useEffect as t}from"react";import n from"./button.js";import{combineClasses as d,classes as c,combineRefs as s}from"../../core/utils.js";import f from"../display/badge.js";import u from"../display/combobox/index.js";import m from"../../hooks/use-input-props.js";import{createStyles as p}from"../../core/style.js";import{Icon as b}from"../../core/icons.js";const g=p("select",{".field":{borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-grey-200)",transition:"background-color .2s, border-color .2s, color .2s, outline-color .2s",display:"flex",alignItems:"center",minWidth:"min(var(--width, 100vw), 12em)",outline:"solid 3px transparent"},".v__default":{backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)"},".v__minimal":{backgroundColor:"var(--f-clr-fg-100)"},".v__default:focus-within":{borderColor:"var(--f-clr-primary-100)",color:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)"},".v__minimal:focus-within":{backgroundColor:"var(--f-clr-fg-200)"},'.field[data-error="true"]':{borderColor:"var(--f-clr-error-100)",color:"var(--f-clr-error-200)"},'.field[data-error="true"]:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.field[data-error="true"] .content':{color:"var(--f-clr-error-200)"},'.field[data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.field[data-disabled="true"] .content':{color:"var(--f-clr-grey-500)"},".content__wrapper":{padding:".675em",display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",overflow:"hidden",flexGrow:1},".content__wrapper > *:not(.content)":{flexShrink:0},".content":{position:"relative",display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",flexGrow:1,overflow:"hidden",color:"var(--f-clr-text-100)",minHeight:"1.375em"},".content > *":{flexShrink:0},".placeholder":{color:"var(--f-clr-grey-300)"},".input":{position:"absolute",opacity:0,width:0},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".field.round":{borderRadius:"calc(1.4em + 1px)"},".field .badge":{backgroundColor:"var(--f-clr-fg-200)"},'.field[data-error="true"] .badge':{backgroundColor:"var(--f-clr-error-400)"},'.field[data-disabled="true"] .badge':{backgroundColor:"var(--f-clr-grey-200)"},".icon":{display:"flex",marginLeft:"auto"}});function v({cc:p={},options:v,multiple:h=!1,searchable:y,limit:_,emptyMessage:x="Nothing found",placeholder:C,value:k,defaultValue:w,onChange:z,readOnly:S,error:j,icon:N,size:I="med",variant:R="default",contentSize:O,round:H,inputRef:A,mobileContainer:G,virtualItemHeight:M,...$}){const L=d(g,p),T=l(),V=o(null),W=o(null),[q,B]=m($),[D,E]=void 0!==k?[k,z]:i(w||(h?[]:"")),F=Array.isArray(D);return t((()=>{h!==F&&E?.(h?D?[D]:[]:D[0])}),[h,F]),r(u.Root,{ref:W,stretch:!0,mobileContainer:G,children:[e(u.Trigger,{disabled:$.disabled||S,children:r("div",{...B,"aria-haspopup":"listbox",className:c(L.field,L[`s__${I}`],L[`v__${R}`],H&&L.round,$.className),"data-error":!!j,"data-disabled":$.disabled,"data-fb":"default"===R?"true":void 0,children:[r("div",{className:L.content__wrapper,children:[N,r("div",{className:L.content,children:[(F?!D.length:null==D||""===D)&&e("div",{className:L.placeholder,id:T,children:C}),F?D.length<3?D.map(((r,a)=>e(f,{round:H,cc:{badge:L.badge},children:r},a))):r(a,{children:[e(f,{round:H,cc:{badge:L.badge},children:D[0]}),r(f,{round:H,cc:{badge:L.badge},children:["+",D.length-1," more"]})]}):v.find((r=>r.value===D))?.label]}),e("input",{"aria-labelledby":C?T:void 0,...q,ref:s(A,V),readOnly:!0,className:L.input,value:D?.toString(),"aria-invalid":!!j})]}),e(n,{compact:!0,"aria-label":q["aria-label"],"aria-labelledby":q["aria-labelledby"],round:H,size:I,disabled:$.disabled||S,variant:"minimal",style:{marginRight:".2em"},children:e(b,{type:"expand"})})]})}),e(u.Content,{round:H,size:O,"aria-multiselectable":h,searchable:y,emptyMessage:x,virtualItemHeight:M,children:v.map((({label:a,value:l,key:o,disabled:i})=>{const t=F?D.includes(l):D===l;return r(u.Option,{value:o||""+a,disabled:i,"aria-selected":t,onSelect:()=>{if(F){const r=D.slice(),e=r.indexOf(l);e<0?(!_||r.length<_)&&r.push(l):r.splice(e,1),E?.(r)}else W.current?.close(),V.current?.focus(),E?.(l)},children:[a,t&&e("div",{className:L.icon,children:e(b,{type:"check"})})]},""+l)}))})]})}export{v as default};
|
|
3
3
|
//# sourceMappingURL=select.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
|