@infinityfx/fluid 1.4.21 → 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 e,jsxs as r}from"react/jsx-runtime";import{useState as o,useId as a}from"react";import{Morph as
|
|
2
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as o,useId as a}from"react";import{Morph as i}from"@infinityfx/lively/layout";import{combineClasses as t,classes as n}from"../../core/utils.js";import l from"../feedback/halo.js";import{createStyles as d}from"../../core/style.js";import s from"../display/tooltip.js";const c=d("segmented",{".segmented":{position:"relative",display:"flex"},".v__default, .v__neutral":{borderRadius:"calc(var(--f-radius-sml) + .3em)",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",padding:".3em"},".s__sml":{fontSize:"var(--f-font-size-xxs)"},".s__med":{fontSize:"var(--f-font-size-xsm)"},".s__lrg":{fontSize:"var(--f-font-size-sml)"},".segmented.uniform":{display:"grid",gridAutoColumns:"1fr",gridAutoFlow:"column"},".segmented.vertical":{flexDirection:"column",gridAutoFlow:"row"},".segmented.round":{borderRadius:"calc(1.6em + 1px)"},".option":{position:"relative",border:"none",outline:"none",backgroundColor:"transparent",padding:".675em .8em",fontWeight:700,color:"var(--f-clr-text-100)",borderRadius:"var(--f-radius-sml)",flexGrow:1,transition:"color .4s",WebkitTapHighlightColor:"transparent"},".segmented.round .option":{borderRadius:"999px"},".option:enabled":{cursor:"pointer"},".option:disabled":{color:"var(--f-clr-grey-500)"},".content":{position:"relative",zIndex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:"var(--f-spacing-xsm)"},".selection":{position:"absolute",inset:"0",backgroundColor:"var(--f-clr-primary-200)",borderRadius:"var(--f-radius-sml)",boxShadow:"var(--f-shadow-sml)"},".v__neutral .selection":{backgroundColor:"var(--f-clr-text-100)"},'.v__neutral .option[aria-checked="true"]:enabled':{color:"var(--f-clr-text-200)"},".v__minimal .selection":{backgroundColor:"var(--f-clr-primary-400)"},".segmented.round .selection":{borderRadius:"999px"},'.segmented[data-error="true"]':{border:"solid 1px var(--f-clr-error-100)"},".segmented .halo":{zIndex:"0"},'.option[aria-checked="true"] .halo':{inset:"-.3em",borderRadius:"calc(var(--f-radius-sml) + .3em)"},'.segmented[data-error="true"] .ripple':{backgroundColor:"var(--f-clr-error-300)"},".segmented .container":{isolation:"unset"}});function m({cc:d={},variant:m="default",size:u="med",round:f=!1,uniform:p,vertical:v,options:g,name:b,value:h,defaultValue:x,onChange:_,error:y,...k}){const C=t(c,d),[z,R]=void 0!==h?[h]:o(x||g[0]?.value),j=a();return e("div",{...k,role:"radiogroup",className:n(C.segmented,C[`s__${u}`],C[`v__${m}`],f&&C.round,p&&C.uniform,v&&C.vertical,k.className),"data-error":!!y,"data-fb":"minimal"!==m?"true":void 0,children:g.map((({label:o,value:a,disabled:t=!1,tooltip:n},c)=>e(s,{content:n,visibility:n?"interact":"never",children:e(l,{hover:!1,disabled:t,cc:{...d,container:C.container,halo:C.halo,ring:C.ring},children:r("button",{className:C.option,type:"button",role:"radio","aria-checked":z===a,disabled:t,onClick:()=>{R?.(a),_?.(a)},children:[e("input",{type:"radio",value:a,checked:z===a,hidden:!0,readOnly:!0,name:b}),e("span",{className:C.content,children:o}),z===a&&e(i,{group:`segmented-selection-${j}`,cachable:v?["y","sy"]:["x","sx"],deform:!1,transition:{duration:.4},children:e("div",{className:C.selection})})]})})},c)))})}export{m as default};
|
|
3
3
|
//# sourceMappingURL=segmented.js.map
|
|
@@ -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
|