@infinityfx/fluid 1.4.22 → 1.4.23
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,jsxs as e}from"react/jsx-runtime";import{combineClasses as o,classes as t}from"../../core/utils.js";import a from"../../hooks/use-input-props.js";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)"},".stretch":{position:"relative",whiteSpace:"pre-wrap",padding:".6em",flexShrink:0,flexGrow:1,color:"transparent"},".input":{position:"absolute",inset:0,width:"100%",height:"100%",resize:"none",outline:"none",border:"none",background:"none",overflow:"hidden",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:c="both",...f}){const m=o(s,l),[u,p]=a(f);return r(i,{...p,className:t(m.textarea,m[`s__${n}`],f.className),"data-error":!!d,"data-disabled":f.disabled,"data-fb":!0,style:{
|
|
2
|
+
import{jsx as r,jsxs as e}from"react/jsx-runtime";import{combineClasses as o,classes as t}from"../../core/utils.js";import a from"../../hooks/use-input-props.js";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)"},".stretch":{position:"relative",whiteSpace:"pre-wrap",padding:".6em",flexShrink:0,flexGrow:1,color:"transparent"},".input":{position:"absolute",inset:0,width:"100%",height:"100%",resize:"none",outline:"none",border:"none",background:"none",overflow:"hidden",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:c="both",...f}){const m=o(s,l),[u,p]=a(f);return r(i,{...p,className:t(m.textarea,m[`s__${n}`],f.className),"data-error":!!d,"data-disabled":f.disabled,"data-fb":!0,style:{resize:c,minHeight:`calc(${f.rows||2}lh + 1.2em)`,...f.style},children:e("div",{className:m.stretch,children:[u.value,r("textarea",{...u,className:m.input,"aria-invalid":!!d})]})})}export{n as default};
|
|
3
3
|
//# sourceMappingURL=textarea.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 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
|
|
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 p}from"../../core/style.js";import u 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=p("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)",paddingRight:"var(--f-spacing-sml)"},[`@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:p,cc:x={},show:b,onClose:w,title:y,mobileClosing:k="handle",ref:j,...R}){const B=l(v,x),N=o(null),C=o(null),E=o(null),L=h(0),I=n(),S=u(),$=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",{...R,ref:s(j,C),className:d(B.modal,R.className),role:"dialog","aria-modal":!0,"aria-labelledby":I,onTouchStart:e=>{"handle"!==k||e.defaultPrevented||N.current?.scrollTop||!C.current?.contains(e.target)||(E.current=e.touches[0])},children:[$&&"handle"===k&&e("div",{className:B.handle}),r("div",{className:B.header,children:[e("span",{id:I,className:B.title,children:y}),("button"===k||!$)&&e(a,{compact:!0,variant:"minimal",onClick:w,children:e(g,{type:"close"})})]}),e(m,{className:B.scrollarea,ref:N,children:p})]})})})}export{x as default};
|
|
3
3
|
//# sourceMappingURL=modal.js.map
|