@infinityfx/fluid 1.4.19 → 1.4.20
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 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
|
|
2
|
+
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};
|
|
3
3
|
//# sourceMappingURL=halo.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as r,Fragment as e,jsx as o}from"react/jsx-runtime";import{useId as
|
|
2
|
+
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};
|
|
3
3
|
//# sourceMappingURL=item.js.map
|