@infinityfx/fluid 1.4.4 → 1.4.6

package/dist/components/input/color-picker.js

@@ -1,3 +1,3 @@
 "use client";
-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 n,hexToRgb as t,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 2px 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"},".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)"},".hue__handle::after":{boxSizing:"border-box",border:"solid 2px 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=n(b,f),j=a(!1),N=a(null),R=void 0===x?null:"string"==typeof x?t(x):x,D=void 0===w?[255,0,0]:"string"==typeof w?t(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:n,height:t}=N.current.getBoundingClientRect();S.current[1]=100*Math.min(Math.max(r-o+.5,0)/n,1),S.current[2]=100*(1-Math.min(Math.max(a-i+.5,0)/t,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=>{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:{swatch:C.swatch,...f}}),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(t(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:{progress:C.hue__progress,track:C.hue__track,handle:C.hue__handle,...f}})]})}export{v as default};
+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 n,hexToRgb as t,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 2px 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"},".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 2px 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 w({cc:f={},format:w,defaultValue:v,value:x,onChange:_,disabled:y,...k}){const C=n(b,f),j=a(!1),N=a(null),R=void 0===x?null:"string"==typeof x?t(x):x,D=void 0===v?[255,0,0]:"string"==typeof v?t(v):v,[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"===w?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:n,height:t}=N.current.getBoundingClientRect();S.current[1]=100*Math.min(Math.max(r-o+.5,0)/n,1),S.current[2]=100*(1-Math.min(Math.max(a-i+.5,0)/t,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=>{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:{swatch:C.swatch,...f}}),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(t(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:{progress:C.hue__progress,track:C.hue__track,handle:C.hue__handle,...f}})]})}export{w as default};
 //# sourceMappingURL=color-picker.js.map

package/dist/components/input/date-field.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o}from"react";import t from"./field.js";import{Animatable as i}from"@infinityfx/lively";import a from"./calendar.js";import n from"../layout/popover/index.js";import{createStyles as l}from"../../core/style.js";import{combineClasses as d}from"../../core/utils.js";import s from"./button.js";import{Icon as c}from"../../core/icons.js";const m=l("date-field",(e=>({[`@media(min-width: ${e.breakpoints.mob+1}px)`]:{".calendar":{boxShadow:"var(--f-shadow-med)",border:"solid 1px var(--f-clr-fg-200)"}}})));function u({cc:l={},value:u,defaultValue:p,onChange:f,disabled:g,clearable:b,...h}){const v=d(m,l),[x,y]=void 0!==u?[u,f]:o(p||null),[j,C]=o(null);return e(n.Root,{position:"center",mobileContainer:"modal",children:[r(n.Trigger,{disabled:!0===g||h.readOnly,children:r(t,{...h,cc:l,inputMode:"none",role:"combobox","aria-haspopup":"listbox","aria-disabled":h.readOnly||!0===g||!1,type:"text",disabled:!0===g,value:null!==j?j:(S=x,S?`${S.getFullYear()}-${(S.getMonth()+1).toString().padStart(2,"0")}-${S.getDate().toString().padStart(2,"0")}`:""),onChange:e=>{C(function(e){const r=e.replace(/\D/g,"");return[r.slice(0,4),r.slice(4,6),r.slice(6,8)].filter((e=>e.length)).join("-")}(e.target.value))},onBlur:()=>{if(j){const e=new Date(j);isNaN(e.getTime())||y?.(e)}C(null)},right:b&&r(s,{compact:!0,"aria-label":"Clear date",round:h.round,size:h.size,disabled:!0===g||h.readOnly,variant:"minimal",style:{marginRight:".2em"},onClick:()=>y?.(null),children:r(c,{type:"close"})})})}),r(n.Content,{role:"listbox",children:r(i,{id:"date-field-calendar",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r(a,{className:v.calendar,round:h.round,size:h.size,disabled:g,value:x,onChange:e=>y?.(e)})})})]});var S}export{u as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as a}from"react";import o from"./field.js";import{Animatable as t}from"@infinityfx/lively";import i from"./calendar.js";import n from"../layout/popover/index.js";import{createStyles as l}from"../../core/style.js";import{combineClasses as d}from"../../core/utils.js";import c from"./button.js";import{Icon as s}from"../../core/icons.js";const m=l("date-field",(e=>({[`@media(min-width: ${e.breakpoints.mob+1}px)`]:{".calendar":{boxShadow:"var(--f-shadow-med)",border:"solid 1px var(--f-clr-fg-200)"}},[`@media(max-width: ${e.breakpoints.mob}px)`]:{".calendar":{background:"none !important",padding:"0 !important"},".years":{background:"var(--f-clr-bg-100) !important"}}})));function p({cc:l={},value:p,defaultValue:u,onChange:f,disabled:g,clearable:b,...h}){const y=d(m,l),[v,x]=void 0!==p?[p,f]:a(u||null),[j,C]=a(null);return e(n.Root,{position:"center",mobileContainer:"modal",children:[r(n.Trigger,{disabled:!0===g||h.readOnly,children:r(o,{...h,cc:l,inputMode:"none",role:"combobox","aria-haspopup":"listbox","aria-disabled":h.readOnly||!0===g||!1,type:"text",disabled:!0===g,value:null!==j?j:(k=v,k?`${k.getFullYear()}-${(k.getMonth()+1).toString().padStart(2,"0")}-${k.getDate().toString().padStart(2,"0")}`:""),onChange:e=>{C(function(e){const r=e.replace(/\D/g,"");return[r.slice(0,4),r.slice(4,6),r.slice(6,8)].filter((e=>e.length)).join("-")}(e.target.value))},onBlur:()=>{if(j){const e=new Date(j);isNaN(e.getTime())||x?.(e)}C(null)},right:b&&r(c,{compact:!0,"aria-label":"Clear date",round:h.round,size:h.size,disabled:!0===g||h.readOnly,variant:"minimal",style:{marginRight:".2em"},onClick:()=>x?.(null),children:r(s,{type:"close"})})})}),r(n.Content,{role:"listbox",children:r(t,{id:"date-field-calendar",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r(i,{cc:{calendar:y.calendar,years:y.years},round:h.round,size:h.size,disabled:g,value:v,onChange:e=>x?.(e)})})})]});var k}export{p as default};
 //# sourceMappingURL=date-field.js.map

package/dist/components/input/textarea.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import{combineClasses as e,classes as o}from"../../core/utils.js";import a from"../../hooks/use-input-props.js";import{useState as t}from"react";import i from"../layout/scrollarea.js";import{createStyles as s}from"../../core/style.js";const l=s("textarea",{".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)"},".textarea":{outline:"solid 3px transparent",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-sml)",transition:"border-color .2s, outline-color .2s",minWidth:"min(var(--width, 100vw), 12em)"},".textarea:focus-within":{borderColor:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)"},".input":{width:"100%",minHeight:"calc(100% - 2px)",resize:"none",outline:"none",border:"none",background:"none",overflow:"visible",padding:".6em",color:"var(--f-clr-text-100)"},'.textarea[data-error="true"]':{borderColor:"var(--f-clr-error-100)"},'.textarea[data-error="true"]:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.textarea[data-error="true"] .input':{color:"var(--f-clr-error-200)"},'.textarea[data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.textarea[data-disabled="true"] .input':{color:"var(--f-clr-grey-500)"}});function n({cc:s={},size:n="med",error:d,resize:c="both",...f}){const m=e(l,s),[u,p]=a(f),[v,x]=t(1);return r(i,{...p,className:o(m.textarea,m[`s__${n}`],f.className),"data-error":!!d,"data-disabled":f.disabled,style:{resize:c,height:2*(f.rows||2)+"em"},children:r("textarea",{...u,rows:v,className:m.input,"aria-invalid":!!d,onChange:r=>{u.onChange?.(r),x(r.target.value.split(/\n/g).length)}})})}export{n as default};
+import{jsx as r}from"react/jsx-runtime";import{combineClasses as e,classes as o}from"../../core/utils.js";import a from"../../hooks/use-input-props.js";import{useState as t}from"react";import i from"../layout/scrollarea.js";import{createStyles as l}from"../../core/style.js";const s=l("textarea",{".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)"},".textarea":{display:"flex",flexDirection:"column",outline:"solid 3px transparent",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-sml)",transition:"border-color .2s, outline-color .2s",minWidth:"min(var(--width, 100vw), 12em)"},".textarea:focus-within":{borderColor:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)"},".input":{flexShrink:0,flexGrow:1,width:"100%",resize:"none",outline:"none",border:"none",background:"none",overflow:"visible",padding:".6em",color:"var(--f-clr-text-100)"},'.textarea[data-error="true"]':{borderColor:"var(--f-clr-error-100)"},'.textarea[data-error="true"]:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.textarea[data-error="true"] .input':{color:"var(--f-clr-error-200)"},'.textarea[data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.textarea[data-disabled="true"] .input':{color:"var(--f-clr-grey-500)"}});function n({cc:l={},size:n="med",error:d,resize:f="both",...c}){const m=e(s,l),[u,x]=a(c),[p,v]=t(1);return r(i,{...x,className:o(m.textarea,m[`s__${n}`],c.className),"data-error":!!d,"data-disabled":c.disabled,style:{...c.style,resize:f,height:`calc(${c.rows||2}lh + 1.2em)`},children:r("textarea",{...u,rows:p,className:m.input,"aria-invalid":!!d,onChange:r=>{u.onChange?.(r),v(r.target.value.split(/\n/g).length)}})})}export{n as default};
 //# sourceMappingURL=textarea.js.map

package/dist/components/layout/scrollarea.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{combineClasses as r,classes as n,combineRefs as o}from"../../core/utils.js";import{useRef as a,useState as i,useLayoutEffect as l,useId as c}from"react";import{createStyles as s}from"../../core/style.js";const d=s("scrollarea",{".area":{position:"relative",overflow:"hidden"},".track":{position:"absolute",userSelect:"none",zIndex:99,transition:"opacity .2s"},".v__hover > .track":{opacity:0},".v__hover:hover > .track":{opacity:1},".handle":{width:".5rem",height:".5rem",backgroundColor:"var(--f-clr-grey-500)",opacity:.35,borderRadius:"99px",transition:"opacity .2s"},".track:hover .handle":{opacity:.8},'.area[data-horizontal="false"] > .track':{top:0,right:0,height:"100%"},'.area[data-horizontal="true"] > .track':{bottom:0,left:0,width:"100%"},'.v__permanent[data-horizontal="false"] > .track':{backgroundColor:"var(--f-clr-fg-100)",paddingInline:"2px"},'.v__permanent[data-horizontal="true"] > .track':{backgroundColor:"var(--f-clr-fg-100)",paddingBlock:"2px"},'.v__permanent[data-horizontal="false"]':{paddingRight:"calc(.5rem + 4px)"},'.v__permanent[data-horizontal="true"]':{paddingBottom:"calc(.5rem + 4px)"},'.area[data-scrollable="false"] > .track, .area[data-disabled="true"] > .track':{display:"none"},"@media (pointer: coarse)":{".track":{display:"none"},".area":{overflow:"auto"}}});function u({children:s,cc:u={},horizontal:h=!1,variant:p="hover",behavior:f="normal",disabled:m=!1,ref:v,...g}){const x=r(d,u),y=a(!1),w=a(0),b=a(null),k=a(null),_=a(null),H=a(null),[W,z]=i(!1);function L(t){const e=b.current;if(!e||!t.shiftKey&&"shift"===f)return;const r=100*Math.sign(t.deltaY),n=e[h?"scrollLeft":"scrollTop"],o=e[h?"scrollWidth":"scrollHeight"]-e[h?"offsetWidth":"offsetHeight"];((r>0?n<o:n>0)||t.timeStamp-w.current<350)&&(t.stopPropagation(),t.preventDefault(),w.current=t.timeStamp),M(r)}function E(t){if("mouseup"===t.type)return H.current=null;if("mousedown"===t.type)return t.stopPropagation(),H.current=t;const e=b.current;if(!e||!H.current)return;M(h?(t.x-H.current.x)/((1-e.clientWidth/e.scrollWidth)*e.clientWidth)*(e.scrollWidth-e.clientWidth):(t.y-H.current.y)/((1-e.clientHeight/e.scrollHeight)*e.clientHeight)*(e.scrollHeight-e.clientHeight)),H.current=t}function M(t){const e=b.current;if(!e||!_.current||!k.current||matchMedia("(pointer: coarse)").matches||m)return;const r=h?"offsetWidth":"offsetHeight",n=h?"scrollLeft":"scrollTop",o=Math.max(e[h?"scrollWidth":"scrollHeight"]-e[r],1),a=Math.max(Math.min(e[n]+Math.round(t),o),0);e[n]!==a&&(e[n]=a,y.current=!0);const i=a/o*(e[r]-_.current[r]);_.current.style.translate=h?`${i}px 0px`:`0px ${i}px`,_.current.setAttribute("aria-valuenow",(a/o*100).toString()),k.current.style.translate=`${h?a:e.scrollLeft}px ${h?e.scrollTop:a}px`}function S(){const t=b.current;if(!t||!_.current||!k.current)return;const e=h?t.offsetWidth/t.scrollWidth:t.offsetHeight/t.scrollHeight;_.current.style[h?"width":"height"]=100*e+"%",_.current.style[h?"height":"width"]="",k.current.style.translate="0px 0px",_.current.style.translate="0px 0px",z(e<1),M(0)}l((()=>{S();const t=new ResizeObserver(S),e=b.current;if(e)return t.observe(e),e.children.length&&t.observe(e.children[0]),e.addEventListener("wheel",L),window.addEventListener("mousemove",E),window.addEventListener("mouseup",E),()=>{t.disconnect(),window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",E),e.removeEventListener("wheel",L)}}),[m,h,f]);const $=c();return t("div",{...g,ref:o(v,b),id:$,className:n(x.area,x[`v__${p}`],g.className),onScroll:t=>{if(g.onScroll?.(t),y.current)return y.current=!1;M(0)},"data-horizontal":h,"data-scrollable":W,"data-disabled":m,children:[s,e("div",{ref:k,className:x.track,children:e("div",{ref:_,className:x.handle,onMouseDown:t=>E(t.nativeEvent),role:"scrollbar","aria-controls":$})})]})}export{u as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{combineClasses as r,classes as n,combineRefs as o}from"../../core/utils.js";import{useRef as a,useState as i,useLayoutEffect as l,useId as c}from"react";import{createStyles as s}from"../../core/style.js";const d=s("scrollarea",{".area":{position:"relative",overflow:"hidden"},".track":{position:"absolute",userSelect:"none",zIndex:99,transition:"opacity .2s"},".v__hover > .track":{opacity:0},".v__hover:hover > .track":{opacity:1},".handle":{width:".5rem",height:".5rem",backgroundColor:"var(--f-clr-grey-500)",opacity:.35,borderRadius:"99px",transition:"opacity .2s"},".track:hover .handle":{opacity:.8},'.area[data-horizontal="false"] > .track':{top:0,right:0,height:"100%"},'.area[data-horizontal="true"] > .track':{bottom:0,left:0,width:"100%"},'.v__permanent[data-horizontal="false"] > .track':{backgroundColor:"var(--f-clr-fg-100)",paddingInline:"2px"},'.v__permanent[data-horizontal="true"] > .track':{backgroundColor:"var(--f-clr-fg-100)",paddingBlock:"2px"},'.v__permanent[data-horizontal="false"]':{paddingRight:"calc(.5rem + 4px)"},'.v__permanent[data-horizontal="true"]':{paddingBottom:"calc(.5rem + 4px)"},'.area[data-scrollable="false"] > .track, .area[data-disabled="true"] > .track':{display:"none"},"@media (pointer: coarse)":{".track":{display:"none"},".area":{overflow:"auto"}}});function u({children:s,cc:u={},horizontal:h=!1,variant:p="hover",behavior:f="normal",disabled:m=!1,ref:v,...g}){const x=r(d,u),y=a(!1),w=a(0),b=a(null),k=a(null),_=a(null),H=a(null),[W,z]=i(!1);function L(t){const e=b.current;if(!e||!t.shiftKey&&"shift"===f)return;const r=100*Math.sign(t.deltaY),n=e[h?"scrollLeft":"scrollTop"],o=e[h?"scrollWidth":"scrollHeight"]-e[h?"offsetWidth":"offsetHeight"];((r>0?n<o:n>0)||t.timeStamp-w.current<350)&&(t.stopPropagation(),t.preventDefault(),w.current=t.timeStamp),M(r)}function E(t){if("mouseup"===t.type)return H.current=null;if("mousedown"===t.type)return t.stopPropagation(),H.current=t;const e=b.current;if(!e||!H.current)return;M(h?(t.x-H.current.x)/((1-e.clientWidth/e.scrollWidth)*e.clientWidth)*(e.scrollWidth-e.clientWidth):(t.y-H.current.y)/((1-e.clientHeight/e.scrollHeight)*e.clientHeight)*(e.scrollHeight-e.clientHeight)),H.current=t}function M(t){const e=b.current;if(!e||!_.current||!k.current||matchMedia("(pointer: coarse)").matches||m)return;const r=h?"offsetWidth":"offsetHeight",n=h?"scrollLeft":"scrollTop",o=Math.max(e[h?"scrollWidth":"scrollHeight"]-e[r],1),a=Math.max(Math.min(e[n]+Math.round(t),o),0);e[n]!==a&&(e[n]=a,y.current=!0);const i=a/o*(e[r]-_.current[r]);_.current.style.translate=h?`${i}px 0px`:`0px ${i}px`,_.current.setAttribute("aria-valuenow",(a/o*100).toString()),k.current.style.translate=`${h?a:e.scrollLeft}px ${h?e.scrollTop:a}px`}function S(){const t=b.current;if(!t||!_.current||!k.current)return;k.current.style.translate="0px 0px",_.current.style.translate="0px 0px";const e=h?t.offsetWidth/t.scrollWidth:t.offsetHeight/t.scrollHeight;_.current.style[h?"width":"height"]=100*e+"%",_.current.style[h?"height":"width"]="",z(e<1),M(0)}l((()=>{S();const t=new ResizeObserver(S),e=b.current;if(e)return t.observe(e),e.children.length&&t.observe(e.children[0]),e.addEventListener("wheel",L),window.addEventListener("mousemove",E),window.addEventListener("mouseup",E),()=>{t.disconnect(),window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",E),e.removeEventListener("wheel",L)}}),[m,h,f]);const $=c();return t("div",{...g,ref:o(v,b),id:$,className:n(x.area,x[`v__${p}`],g.className),onScroll:t=>{if(g.onScroll?.(t),y.current)return y.current=!1;M(0)},"data-horizontal":h,"data-scrollable":W,"data-disabled":m,children:[s,e("div",{ref:k,className:x.track,children:e("div",{ref:_,className:x.handle,onMouseDown:t=>E(t.nativeEvent),role:"scrollbar","aria-controls":$})})]})}export{u as default};
 //# sourceMappingURL=scrollarea.js.map

package/dist/types/src/components/input/drop-zone.d.ts

@@ -15,4 +15,5 @@ export default function DropZone({ cc, loading, error, text, annotation, icon, p
     icon?: React.ReactNode;
     previewImages?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
-} & Omit<React.InputHTMLAttributes<HTMLDivElement>, 'defaultValue' | 'children'>): import("react/jsx-runtime").JSX.Element;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+} & Omit<React.InputHTMLAttributes<HTMLDivElement>, 'defaultValue' | 'children' | 'onChange'>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@infinityfx/fluid",
-	"version": "1.4.4",
+	"version": "1.4.6",
 	"type": "module",
 	"description": "React UI library, using zero-runtime CSS-in-JS.",
 	"main": "dist/index.js",