@purple/phoenix-components 5.27.0 → 5.28.0

package/dist/bundle.esm.js

@@ -360,7 +360,7 @@ import*as e from"react";import t,{forwardRef as n,useRef as i,useState as r,useE
 	height: ${e=>e.$height};
 	visibility: ${e=>e.$visibility};
 	overflow: ${e=>e.$overflow};
-`,Mt=t=>{const n=e.useRef(!1),i=e.useRef(),r=e.useRef(null),[l,o]=((t,n)=>{const i={visibility:t?"hidden":"visible",height:t?"0px":"auto",overflow:t?"hidden":"visible"};return e.useReducer(((e,i)=>{switch(i.type){case"start":return{...e,overflow:"hidden",visibility:"visible",height:`${n.current?.scrollHeight}px`};case"collapsing":return{...e,height:"0px"};case"end":return{...e,visibility:t?"hidden":"visible",height:t?"0px":"auto",overflow:t?"hidden":"visible"}}}),i)})(t,r);e.useLayoutEffect((()=>{if(null!=r.current){if(n.current)return i.current=requestAnimationFrame((()=>{o({type:"start"}),t&&(i.current=requestAnimationFrame((()=>{o({type:"collapsing"})})))})),()=>{null!=i.current&&cancelAnimationFrame(i.current)};n.current=!0}}),[t,o]);const C=e.useCallback((()=>{o({type:"end"})}),[o]);return{ref:r,height:l.height,onTransitionEnd:C,visibility:l.visibility,overflow:l.overflow}},Vt=({testId:e="Collapsible",collapsed:n,children:i})=>{const{ref:r,height:l,visibility:o,onTransitionEnd:C,overflow:a}=Mt(n);return t.createElement(Ht,{ref:r,$height:l,$visibility:o,$overflow:a,onTransitionEnd:C,"data-testid":e},i)},$t=e=>t.createElement(xe,{display:"flex",...e}),Zt={h4:"xs",h3:"sm",h2:"md",h1:"lg"},Bt=d.h1`
+`,Mt=t=>{const n=e.useRef(!1),i=e.useRef(0),r=e.useRef(null),[l,o]=((t,n)=>{const i={visibility:t?"hidden":"visible",height:t?"0px":"auto",overflow:t?"hidden":"visible"};return e.useReducer(((e,i)=>{switch(i.type){case"start":return{...e,overflow:"hidden",visibility:"visible",height:`${n.current?.scrollHeight}px`};case"collapsing":return{...e,height:"0px"};case"end":return{...e,visibility:t?"hidden":"visible",height:t?"0px":"auto",overflow:t?"hidden":"visible"}}}),i)})(t,r);e.useLayoutEffect((()=>{if(null!=r.current){if(n.current)return i.current=requestAnimationFrame((()=>{o({type:"start"}),t&&(i.current=requestAnimationFrame((()=>{o({type:"collapsing"})})))})),()=>{null!=i.current&&cancelAnimationFrame(i.current)};n.current=!0}}),[t,o]);const C=e.useCallback((()=>{o({type:"end"})}),[o]);return{ref:r,height:l.height,onTransitionEnd:C,visibility:l.visibility,overflow:l.overflow}},Vt=({testId:e="Collapsible",collapsed:n,children:i})=>{const{ref:r,height:l,visibility:o,onTransitionEnd:C,overflow:a}=Mt(n);return t.createElement(Ht,{ref:r,$height:l,$visibility:o,$overflow:a,onTransitionEnd:C,"data-testid":e},i)},$t=e=>t.createElement(xe,{display:"flex",...e}),Zt={h4:"xs",h3:"sm",h2:"md",h1:"lg"},Bt=d.h1`
 	font-size: ${({size:e,theme:t,as:n})=>e?"number"==typeof e?`${e}px`:pe(e)?t.tokens.heading.fontSize[e]:e:t.tokens.heading.fontSize[Zt[n]]};
 	font-weight: ${({as:e,bold:t,theme:n})=>!1===t||void 0===t&&"h1"===e?n.tokens.ref.fontWeight.regular:n.tokens.ref.fontWeight.bold};
 	line-height: ${({theme:e})=>de(e.tokens.heading.lineHeight)};
@@ -1055,7 +1055,7 @@ import*as e from"react";import t,{forwardRef as n,useRef as i,useState as r,useE
 	.noUi-connect {
 		background: ${({theme:e})=>e.tokens.color.text.secondary};
 	}
-`,Yi=({testId:e,px:n,className:i,sliderRef:r,sliderApi:o,disabled:C})=>(l((()=>{o&&(C?o.disable():o.enable())}),[o,C]),t.createElement(ji,{"data-testid":e,className:i,px:n},t.createElement(qi,{ref:r})));function Gi(e,t,n){const r=i(null),o=i();return l((()=>{if(!r||!r.current||o.current)return;const n=t.connect??(["number","string"].includes(typeof e)?"lower":Array.isArray(e)&&2===e.length?[!1,!0,!1]:void 0);o.current=O.create(r.current,{start:e,range:t.range,step:t.step,connect:n,animate:!1,snap:t.snap,pips:t.pips})}),[r]),l((()=>{U(e,n)||o.current?.set(e)}),[e]),[o,r]}const Xi=({testId:e="MultiSlider",px:n,disabled:i,...r})=>{const o=R(r.value),[C,a]=Gi(r.value,r,o);return l((()=>{C&&C.current&&(C.current.on("update",(()=>{const e=C.current?.get();Array.isArray(e)&&r.onChange(e)})),C.current.on("change",(()=>{const e=C.current?.get();r.onRelease&&Array.isArray(e)&&r.onRelease(e)})))}),[C]),t.createElement(Yi,{className:r.className,testId:e,sliderRef:a,sliderApi:C.current,disabled:i,px:n})},Qi=d.section`
+`,Yi=({testId:e,px:n,className:i,sliderRef:r,sliderApi:o,disabled:C})=>(l((()=>{o&&(C?o.disable():o.enable())}),[o,C]),t.createElement(ji,{"data-testid":e,className:i,px:n},t.createElement(qi,{ref:r})));function Gi(e,t,n){const r=i(null),o=i(null);return l((()=>{if(!r||!o||!r.current||o.current)return;const n=t.connect??(["number","string"].includes(typeof e)?"lower":Array.isArray(e)&&2===e.length?[!1,!0,!1]:void 0);o.current=O.create(r.current,{start:e,range:t.range,step:t.step,connect:n,animate:!1,snap:t.snap,pips:t.pips})}),[r]),l((()=>{U(e,n)||o.current?.set(e)}),[e]),[o,r]}const Xi=({testId:e="MultiSlider",px:n,disabled:i,...r})=>{const o=R(r.value),[C,a]=Gi(r.value,r,o);return l((()=>{C&&C.current&&(C.current.on("update",(()=>{const e=C.current?.get();Array.isArray(e)&&r.onChange(e)})),C.current.on("change",(()=>{const e=C.current?.get();r.onRelease&&Array.isArray(e)&&r.onRelease(e)})))}),[C]),t.createElement(Yi,{className:r.className,testId:e,sliderRef:a,sliderApi:C.current,disabled:i,px:n})},Qi=d.section`
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
@@ -1239,7 +1239,7 @@ import*as e from"react";import t,{forwardRef as n,useRef as i,useState as r,useE
 					background: ${e.tokens.color.text.brand.primary};
 				}
 			`}}
-`,Hr=n((function({disabledClassName:e,selectedClassName:n,tabIndex:i,id:r,testId:l="Tab",...o},C){return t.createElement(j,{disabled:o.disabled,disabledClassName:e,selectedClassName:n,tabIndex:i,selected:o.selected,id:r},t.createElement(kr,{ref:C,"data-testid":l,...o}))}));Hr.tabsRole="Tab";const Mr=d.div`
+`,Hr=({disabledClassName:e,selectedClassName:n,tabIndex:i,id:r,testId:l="Tab",ref:o,...C})=>t.createElement(j,{disabled:C.disabled,disabledClassName:e,selectedClassName:n,tabIndex:i,selected:C.selected,id:r},t.createElement(kr,{ref:o,"data-testid":l,...C}));Hr.tabsRole="Tab";const Mr=d.div`
 	height: ${({theme:e})=>e.tokens.tabs.borderWidth.tab.bottom};
 	background: ${({theme:e})=>e.tokens.color.text.brand.primary};
 	position: absolute;
@@ -1250,7 +1250,7 @@ import*as e from"react";import t,{forwardRef as n,useRef as i,useState as r,useE
 					transition: transform ${e.tokens.duration.transition.base},
 						width ${e.tokens.duration.transition.base};
 			  `:void 0}
-`,Vr=({tabs:e,tabRefs:n,selectedIndex:i,size:o})=>{const[C,a]=r(0),[d,s]=r(0);return l((()=>{let r=0;t.Children.forEach(e,(e=>{if(t.isValidElement(e)&&"Tab"===e.type?.tabsRole){const t=n.current[r];if(t&&(e.props.selected||i===r)){const e=getComputedStyle(t),n=t.clientWidth-parseFloat(e.paddingLeft)-parseFloat(e.paddingRight);s(n),a(t?.offsetLeft??0)}r++}}))}),[i]),t.createElement(Mr,{style:{transform:`translateX(${C}px)`,width:`${d}px`},animate:void 0!==i,size:o})},$r=({animate:e=!0,testId:n="TabList",size:l="sm",children:o,...C})=>{const a=i([]),[d,s]=r();let c=0;return t.createElement(yr,{"data-testid":n,...C},e&&t.createElement(Vr,{tabs:o,tabRefs:a,selectedIndex:d,size:l}),t.Children.map(o,(n=>{if(t.isValidElement(n)&&"Tab"===n.type?.tabsRole){const i=c++;return n.props.selected&&d!==i&&s(i),t.cloneElement(n,{...n.props,ref:e=>{a.current[i]=e},size:l,animate:e})}return n})))};$r.tabsRole="TabList";const Zr=d.div`
+`,Vr=({tabs:e,tabRefs:n,selectedIndex:i,size:o})=>{const[C,a]=r(0),[d,s]=r(0);return l((()=>{let r=0;t.Children.forEach(e,(e=>{if(t.isValidElement(e)&&"Tab"===e.type.tabsRole){const t=n.current[r];if(t&&(e.props.selected||i===r)){const e=getComputedStyle(t),n=t.clientWidth-parseFloat(e.paddingLeft)-parseFloat(e.paddingRight);s(n),a(t?.offsetLeft??0)}r++}}))}),[i]),t.createElement(Mr,{style:{transform:`translateX(${C}px)`,width:`${d}px`},animate:void 0!==i,size:o})},$r=({animate:e=!0,testId:n="TabList",size:l="sm",children:o,...C})=>{const a=i([]),[d,s]=r();let c=0;return t.createElement(yr,{"data-testid":n,...C},e&&t.createElement(Vr,{tabs:o,tabRefs:a,selectedIndex:d,size:l}),t.Children.map(o,(n=>{const i=n;if(t.isValidElement(n)&&"Tab"===n.type?.tabsRole){const n=c++;return i.props.selected&&d!==n&&s(n),t.cloneElement(i,{...i.props,ref:e=>{a.current[n]=e},size:l,animate:e})}return n})))};$r.tabsRole="TabList";const Zr=d.div`
 	border-radius: ${({theme:e})=>e.tokens.tag.borderRadius};
 
 	${({secondary:e,outline:t,colorTheme:n,theme:{tokens:i}})=>t?s`