@infinityfx/fluid 1.4.18 → 1.4.20

package/dist/components/feedback/halo.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as t}from"react/jsx-runtime";import{combineClasses as e,classes as r,combineRefs as n}from"../../core/utils.js";import{Animatable as i}from"@infinityfx/lively";import{useTrigger as o,useLink as a}from"@infinityfx/lively/hooks";import{useRef as s,useEffect as c,isValidElement as l,Children as d,cloneElement as u}from"react";import{createStyles as p}from"../../core/style.js";const f=p("halo",{".container":{isolation:"isolate"},".halo":{position:"absolute",overflow:"hidden",borderRadius:"inherit",inset:0,minWidth:"100%",minHeight:"100%",transition:"opacity .25s",display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none",opacity:0,zIndex:-1},'.halo[data-disabled="true"]':{display:"none"},'.halo[data-focused="true"]':{opacity:.25},"@media (pointer: fine)":{'.container:hover > .halo[data-hover="true"]':{opacity:.25}},".ripple":{minWidth:"280%",minHeight:"280%",aspectRatio:1,backgroundColor:"var(--f-clr-grey-500)",borderRadius:"9999px",zIndex:-1}});function m({children:p,cc:m={},color:h,hover:y=!0,disabled:g=!1,target:v,ref:b,...x}){const w=e(f,m),E=s(0),L=s(void 0),C=s(null),j=s(null),k=o(),A=a(1),N=a("0% 0%");if(c((()=>{const t=v?.current||C.current,e=new AbortController,r=e.signal;if(t)return t.addEventListener("mousedown",(()=>{A.set(.5,{duration:.1})}),{signal:r}),t.addEventListener("click",(t=>{if(A.set(1),k(),!j.current)return;const{x:e,y:r,width:n,height:i}=j.current.getBoundingClientRect();j.current.style.transition="none",j.current.offsetHeight,j.current.style.transition="";const o=2.8*Math.max(n,i),a=((t.clientX-e)/n-.5)*(n/o),s=((t.clientY-r)/i-.5)*(i/o);N.set(`${t.clientX?100*a:0}% ${t.clientY?100*s:0}%`)}),{signal:r}),t.addEventListener("touchstart",(()=>{clearTimeout(L.current),E.current=Date.now(),j.current&&(j.current.style.opacity="0.25")}),{signal:r}),window.addEventListener("touchend",(()=>{const t=Math.max(450-Date.now()+E.current,0);L.current=setTimeout((()=>{j.current&&(j.current.style.opacity="")}),t)}),{signal:r}),t.addEventListener("focusin",(()=>n()),{signal:r}),t.addEventListener("focusout",(()=>n()),{signal:r}),n(":focus"),()=>e.abort();function n(e=":focus-visible"){j.current&&t&&(j.current.dataset.focused=""+t.matches(e))}}),[]),p=Array.isArray(p)?p[0]:p,!l(p))return p;const R=d.toArray(p.props.children);return R.unshift(t("div",{ref:j,className:w.halo,"data-hover":y,"data-disabled":g,children:t(i,{animate:{translate:N,opacity:A},animations:{ripple:{opacity:[0,1],scale:[0,1],duration:.5,easing:"ease-in"}},triggers:[{on:k,name:"ripple",immediate:!0}],children:t("div",{className:w.ripple,style:{backgroundColor:h}})})},"halo")),u(p,{...x,ref:n(C,b,p.props.ref),className:r(p.props.className,w.container)},R)}export{m as default};
+import{jsx as t}from"react/jsx-runtime";import{combineClasses as e,classes as r,combineRefs as n}from"../../core/utils.js";import{Animatable as i}from"@infinityfx/lively";import{useTrigger as o,useLink as a}from"@infinityfx/lively/hooks";import{useRef as s,useEffect as c,isValidElement as l,Children as d,cloneElement as u}from"react";import{createStyles as m}from"../../core/style.js";const p=m("halo",{".container":{isolation:"isolate"},".halo":{position:"absolute",overflow:"hidden",borderRadius:"inherit",inset:0,minWidth:"100%",minHeight:"100%",transition:"opacity .25s",display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none",opacity:0,zIndex:-1},'.halo[data-disabled="true"]':{display:"none"},'.halo[data-focused="true"]':{opacity:.25},"@media (pointer: fine)":{'.container:hover > .halo[data-hover="true"]':{opacity:.25}},".ripple":{minWidth:"280%",minHeight:"280%",aspectRatio:1,backgroundColor:"var(--f-clr-grey-500)",borderRadius:"9999px",zIndex:-1}});function f({children:m,cc:f={},color:h,hover:y=!0,disabled:g=!1,target:v,ref:x,...b}){const w=e(p,f),E=s(0),L=s(void 0),C=s(null),j=s(null),k=o(),A=a(1),M=a("0% 0%");if(c((()=>{const t=v?.current||C.current,e=new AbortController,r=e.signal;if(t)return t.addEventListener("mousedown",(()=>{A.set(.5,{duration:.1})}),{signal:r}),t.addEventListener("click",(t=>{if(A.set(1),k(),!j.current)return;const{x:e,y:r,width:n,height:i}=j.current.getBoundingClientRect();j.current.style.transition="none",j.current.offsetHeight,j.current.style.transition="";const o=2.8*Math.max(n,i),a=t=>Math.min(Math.max(t,0),1),s=(a((t.clientX-e)/n)-.5)*(n/o),c=(a((t.clientY-r)/i)-.5)*(i/o);M.set(`${t.clientX?100*s:0}% ${t.clientY?100*c:0}%`)}),{signal:r}),t.addEventListener("touchstart",(()=>{clearTimeout(L.current),E.current=Date.now(),j.current&&(j.current.style.opacity="0.25")}),{signal:r}),window.addEventListener("touchend",(()=>{const t=Math.max(450-Date.now()+E.current,0);L.current=setTimeout((()=>{j.current&&(j.current.style.opacity="")}),t)}),{signal:r}),t.addEventListener("focusin",(()=>n()),{signal:r}),t.addEventListener("focusout",(()=>n()),{signal:r}),n(":focus"),()=>e.abort();function n(e=":focus-visible"){j.current&&t&&(j.current.dataset.focused=""+t.matches(e))}}),[]),m=Array.isArray(m)?m[0]:m,!l(m))return m;const N=d.toArray(m.props.children);return N.unshift(t("div",{ref:j,className:w.halo,"data-hover":y,"data-disabled":g,children:t(i,{animate:{translate:M,opacity:A},animations:{ripple:{opacity:[0,1],scale:[0,1],duration:.5,easing:"ease-in"}},triggers:[{on:k,name:"ripple",immediate:!0}],children:t("div",{className:w.ripple,style:{backgroundColor:h}})})},"halo")),u(m,{...b,ref:n(C,x,m.props.ref),className:r(m.props.className,w.container)},N)}export{f as default};
 //# sourceMappingURL=halo.js.map

package/dist/components/layout/accordion/item.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as r,Fragment as e,jsx as o}from"react/jsx-runtime";import{useId as n,useRef as i,useEffect as a}from"react";import t from"../../feedback/halo.js";import l from"../collapsible.js";import{Animatable as c}from"@infinityfx/lively";import{useAccordion as d}from"./root.js";import{combineClasses as s,classes as m}from"../../../core/utils.js";import{createStyles as p}from"../../../core/style.js";import{Icon as f}from"../../../core/icons.js";const u=p("accordion.item",{".button":{position:"relative",borderRadius:"var(--f-radius-sml)",padding:".6em",display:"flex",alignItems:"center",justifyContent:"space-between",gap:"var(--f-spacing-sml)",outline:"none",border:"none",background:"none",color:"var(--f-clr-text-100)",transition:"background-color .5s",WebkitTapHighlightColor:"transparent"},'.v__minimal[aria-expanded="true"]':{backgroundColor:"var(--f-clr-fg-100)"},".button:enabled":{cursor:"pointer"},".button:disabled":{color:"var(--f-clr-grey-500)"},'.v__minimal:disabled[aria-expanded="true"]':{backgroundColor:"var(--f-clr-fg-200)"},".content":{padding:".6em",color:"var(--f-clr-text-100)"},".icon":{height:"1em",overflow:"hidden",flexShrink:0},".arrows":{display:"flex",flexDirection:"column"}});function b({children:p,cc:b={},label:g,defaultOpen:v=!1,disabled:h,...x}){const y=s(u,b),j=n(),{variant:k,open:w,toggle:N}=d(),_=i(!1),C=_.current?w.indexOf(j)>=0:v;return a((()=>{v&&N(j,!0),_.current=!0}),[]),r(e,{children:[o(t,{disabled:h,color:"var(--f-clr-primary-400)",children:r("button",{type:"button",disabled:h,"aria-expanded":C,"aria-controls":j,className:m(y.button,y[`v__${k}`]),onClick:()=>N(j,!C),children:[g,o("div",{className:y.icon,children:o(c,{animate:{translate:["0% 0%","0% -50%"],duration:.35},triggers:[{on:C},{on:!C,reverse:!0}],children:r("div",{className:y.arrows,children:[o(f,{type:"expandDown"}),o(f,{type:"collapseUp"})]})})})]})}),o(l,{shown:C,id:j,children:o("div",{...x,className:m(y.content,x.className),children:p})})]})}b.displayName="Accordion.Item";export{b as default};
+import{jsxs as r,Fragment as e,jsx as o}from"react/jsx-runtime";import{useId as a,useRef as i,useEffect as n}from"react";import t from"../../feedback/halo.js";import l from"../collapsible.js";import{Animatable as c}from"@infinityfx/lively";import{useAccordion as d}from"./root.js";import{combineClasses as s,classes as m}from"../../../core/utils.js";import{createStyles as p}from"../../../core/style.js";import{Icon as f}from"../../../core/icons.js";const u=p("accordion.item",{".button":{position:"relative",borderRadius:"var(--f-radius-sml)",padding:".6em",display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",outline:"none",border:"none",background:"none",color:"var(--f-clr-text-100)",transition:"background-color .5s",WebkitTapHighlightColor:"transparent"},'.v__minimal[aria-expanded="true"]':{backgroundColor:"var(--f-clr-fg-100)"},".button:enabled":{cursor:"pointer"},".button:disabled":{color:"var(--f-clr-grey-500)"},'.v__minimal:disabled[aria-expanded="true"]':{backgroundColor:"var(--f-clr-fg-200)"},".content":{padding:".6em",color:"var(--f-clr-text-100)"},".icon":{height:"1em",overflow:"hidden",flexShrink:0,marginLeft:"auto"},".arrows":{display:"flex",flexDirection:"column"}});function b({children:p,cc:b={},label:g,defaultOpen:v=!1,disabled:h,...x}){const y=s(u,b),k=a(),{variant:j,open:N,toggle:_}=d(),w=i(!1),C=w.current?N.indexOf(k)>=0:v;return n((()=>{v&&_(k,!0),w.current=!0}),[]),r(e,{children:[o(t,{disabled:h,color:"var(--f-clr-primary-400)",children:r("button",{type:"button",disabled:h,"aria-expanded":C,"aria-controls":k,className:m(y.button,y[`v__${j}`]),onClick:()=>_(k,!C),children:[g,o("div",{className:y.icon,children:o(c,{animate:{translate:["0% 0%","0% -50%"],duration:.35},triggers:[{on:C},{on:!C,reverse:!0}],children:r("div",{className:y.arrows,children:[o(f,{type:"expandDown"}),o(f,{type:"collapseUp"})]})})})]})}),o(l,{shown:C,id:k,children:o("div",{...x,className:m(y.content,x.className),children:p})})]})}b.displayName="Accordion.Item";export{b as default};
 //# sourceMappingURL=item.js.map

package/dist/hooks/use-input-props.js

@@ -1,2 +1,2 @@
-import{useMemo as e}from"react";const t={name:0,type:1,checked:2,defaultChecked:3,value:4,defaultValue:5,disabled:6,required:7,placeholder:8,readOnly:9,onChange:10,onFocus:11,onBlur:12,step:13,min:14,minLength:15,max:16,maxLength:17,pattern:18,accept:19,autoComplete:20,autoFocus:21,multiple:22,enterKeyHint:23,inputMode:24,"aria-label":25,"aria-labelledby":26};function a(a){return e((()=>{const e={},n={};for(const l in a)l in t?e[l]=a[l]:n[l]=a[l];return[e,n]}),[a])}export{a as default};
+import{useMemo as e}from"react";const t={name:0,type:1,capture:2,checked:3,defaultChecked:4,value:5,defaultValue:6,disabled:7,required:8,placeholder:9,readOnly:10,onChange:11,onFocus:12,onBlur:13,step:14,min:15,minLength:16,max:17,maxLength:18,pattern:19,accept:20,autoComplete:21,autoFocus:22,multiple:23,enterKeyHint:24,inputMode:25,"aria-label":26,"aria-labelledby":27};function a(a){return e((()=>{const e={},n={};for(const r in a)r in t?e[r]=a[r]:n[r]=a[r];return[e,n]}),[a])}export{a as default};
 //# sourceMappingURL=use-input-props.js.map

package/dist/hooks/use-input-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-input-props.js","sources":["../../../src/hooks/use-input-props.ts"],"sourcesContent":[null],"names":["InputProps","name","type","checked","defaultChecked","value","defaultValue","disabled","required","placeholder","readOnly","onChange","onFocus","onBlur","step","min","minLength","max","maxLength","pattern","accept","autoComplete","autoFocus","multiple","enterKeyHint","inputMode","useInputProps","props","useMemo","split","rest","prop"],"mappings":"gCAEA,MAAMA,EAAa,CACfC,KAAM,EACNC,KAAM,EACNC,QAAS,EACTC,eAAgB,EAChBC,MAAO,EACPC,aAAc,EACdC,SAAU,EACVC,SAAU,EACVC,YAAa,EACbC,SAAU,EACVC,SAAU,GACVC,QAAS,GACTC,OAAQ,GACRC,KAAM,GACNC,IAAK,GACLC,UAAW,GACXC,IAAK,GACLC,UAAW,GACXC,QAAS,GACTC,OAAQ,GACRC,aAAc,GACdC,UAAW,GACXC,SAAU,GACVC,aAAc,GACdC,UAAW,GACX,aAAc,GACd,kBAAmB,IAGT,SAAUC,EAAuBC,GAC3C,OAAOC,GAAQ,KACX,MAAMC,EAAqE,CAAA,EACrEC,EAAkC,CAAA,EAExC,IAAK,MAAMC,KAAQJ,EACXI,KAAQ/B,EAER6B,EAAME,GAAmCJ,EAAMI,GAE/CD,EAAKC,GAA2CJ,EAAMI,GAI9D,MAAO,CAACF,EAAOC,EAAK,GACrB,CAACH,GACR"}
+{"version":3,"file":"use-input-props.js","sources":["../../../src/hooks/use-input-props.ts"],"sourcesContent":[null],"names":["InputProps","name","type","capture","checked","defaultChecked","value","defaultValue","disabled","required","placeholder","readOnly","onChange","onFocus","onBlur","step","min","minLength","max","maxLength","pattern","accept","autoComplete","autoFocus","multiple","enterKeyHint","inputMode","useInputProps","props","useMemo","split","rest","prop"],"mappings":"gCAEA,MAAMA,EAAa,CACfC,KAAM,EACNC,KAAM,EACNC,QAAS,EACTC,QAAS,EACTC,eAAgB,EAChBC,MAAO,EACPC,aAAc,EACdC,SAAU,EACVC,SAAU,EACVC,YAAa,EACbC,SAAU,GACVC,SAAU,GACVC,QAAS,GACTC,OAAQ,GACRC,KAAM,GACNC,IAAK,GACLC,UAAW,GACXC,IAAK,GACLC,UAAW,GACXC,QAAS,GACTC,OAAQ,GACRC,aAAc,GACdC,UAAW,GACXC,SAAU,GACVC,aAAc,GACdC,UAAW,GACX,aAAc,GACd,kBAAmB,IAGT,SAAUC,EAAuBC,GAC3C,OAAOC,GAAQ,KACX,MAAMC,EAAqE,CAAA,EACrEC,EAAkC,CAAA,EAExC,IAAK,MAAMC,KAAQJ,EACXI,KAAQhC,EAER8B,EAAME,GAAmCJ,EAAMI,GAE/CD,EAAKC,GAA2CJ,EAAMI,GAI9D,MAAO,CAACF,EAAOC,EAAK,GACrB,CAACH,GACR"}

package/dist/types/src/hooks/use-input-props.d.ts

@@ -1,6 +1,7 @@
 declare const InputProps: {
     name: number;
     type: number;
+    capture: number;
     checked: number;
     defaultChecked: number;
     value: number;

package/package.json

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