@infinityfx/fluid 1.4.5 → 1.4.6
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{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
|
|
2
|
+
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};
|
|
3
3
|
//# sourceMappingURL=textarea.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
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"]="",
|
|
2
|
+
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};
|
|
3
3
|
//# sourceMappingURL=scrollarea.js.map
|