@purple/phoenix-components 5.27.0 → 5.28.0

package/dist/bundle.cjs.js

@@ -360,7 +360,7 @@
 	height: ${e=>e.$height};
 	visibility: ${e=>e.$visibility};
 	overflow: ${e=>e.$overflow};
-`,dt=e=>{const t=b.useRef(!1),l=b.useRef(),n=b.useRef(null),[i,r]=((e,t)=>{const l={visibility:e?"hidden":"visible",height:e?"0px":"auto",overflow:e?"hidden":"visible"};return b.useReducer(((l,n)=>{switch(n.type){case"start":return{...l,overflow:"hidden",visibility:"visible",height:`${t.current?.scrollHeight}px`};case"collapsing":return{...l,height:"0px"};case"end":return{...l,visibility:e?"hidden":"visible",height:e?"0px":"auto",overflow:e?"hidden":"visible"}}}),l)})(e,n);b.useLayoutEffect((()=>{if(null!=n.current){if(t.current)return l.current=requestAnimationFrame((()=>{r({type:"start"}),e&&(l.current=requestAnimationFrame((()=>{r({type:"collapsing"})})))})),()=>{null!=l.current&&cancelAnimationFrame(l.current)};t.current=!0}}),[e,r]);const o=b.useCallback((()=>{r({type:"end"})}),[r]);return{ref:n,height:i.height,onTransitionEnd:o,visibility:i.visibility,overflow:i.overflow}},st=({testId:e="Collapsible",collapsed:t,children:l})=>{const{ref:n,height:i,visibility:r,onTransitionEnd:o,overflow:a}=dt(t);return b.default.createElement(Ct,{ref:n,$height:i,$visibility:r,$overflow:a,onTransitionEnd:o,"data-testid":e},l)},ct=e=>b.default.createElement(ne,{display:"flex",...e}),pt={h4:"xs",h3:"sm",h2:"md",h1:"lg"},ut=w.default.h1`
+`,dt=e=>{const t=b.useRef(!1),l=b.useRef(0),n=b.useRef(null),[i,r]=((e,t)=>{const l={visibility:e?"hidden":"visible",height:e?"0px":"auto",overflow:e?"hidden":"visible"};return b.useReducer(((l,n)=>{switch(n.type){case"start":return{...l,overflow:"hidden",visibility:"visible",height:`${t.current?.scrollHeight}px`};case"collapsing":return{...l,height:"0px"};case"end":return{...l,visibility:e?"hidden":"visible",height:e?"0px":"auto",overflow:e?"hidden":"visible"}}}),l)})(e,n);b.useLayoutEffect((()=>{if(null!=n.current){if(t.current)return l.current=requestAnimationFrame((()=>{r({type:"start"}),e&&(l.current=requestAnimationFrame((()=>{r({type:"collapsing"})})))})),()=>{null!=l.current&&cancelAnimationFrame(l.current)};t.current=!0}}),[e,r]);const o=b.useCallback((()=>{r({type:"end"})}),[r]);return{ref:n,height:i.height,onTransitionEnd:o,visibility:i.visibility,overflow:i.overflow}},st=({testId:e="Collapsible",collapsed:t,children:l})=>{const{ref:n,height:i,visibility:r,onTransitionEnd:o,overflow:a}=dt(t);return b.default.createElement(Ct,{ref:n,$height:i,$visibility:r,$overflow:a,onTransitionEnd:o,"data-testid":e},l)},ct=e=>b.default.createElement(ne,{display:"flex",...e}),pt={h4:"xs",h3:"sm",h2:"md",h1:"lg"},ut=w.default.h1`
 	font-size: ${({size:e,theme:t,as:l})=>e?"number"==typeof e?`${e}px`:Q(e)?t.tokens.heading.fontSize[e]:e:t.tokens.heading.fontSize[pt[l]]};
 	font-weight: ${({as:e,bold:t,theme:l})=>!1===t||void 0===t&&"h1"===e?l.tokens.ref.fontWeight.regular:l.tokens.ref.fontWeight.bold};
 	line-height: ${({theme:e})=>G(e.tokens.heading.lineHeight)};
@@ -1055,7 +1055,7 @@
 	.noUi-connect {
 		background: ${({theme:e})=>e.tokens.color.text.secondary};
 	}
-`,un=({testId:t,px:l,className:n,sliderRef:i,sliderApi:r,disabled:o})=>(e.useEffect((()=>{r&&(o?r.disable():r.enable())}),[r,o]),b.default.createElement(cn,{"data-testid":t,className:n,px:l},b.default.createElement(pn,{ref:i})));function gn(t,l,n){const i=e.useRef(null),r=e.useRef();return e.useEffect((()=>{if(!i||!i.current||r.current)return;const e=l.connect??(["number","string"].includes(typeof t)?"lower":Array.isArray(t)&&2===t.length?[!1,!0,!1]:void 0);r.current=Z.default.create(i.current,{start:t,range:l.range,step:l.step,connect:e,animate:!1,snap:l.snap,pips:l.pips})}),[i]),e.useEffect((()=>{$.default(t,n)||r.current?.set(t)}),[t]),[r,i]}const hn=w.default.section`
+`,un=({testId:t,px:l,className:n,sliderRef:i,sliderApi:r,disabled:o})=>(e.useEffect((()=>{r&&(o?r.disable():r.enable())}),[r,o]),b.default.createElement(cn,{"data-testid":t,className:n,px:l},b.default.createElement(pn,{ref:i})));function gn(t,l,n){const i=e.useRef(null),r=e.useRef(null);return e.useEffect((()=>{if(!i||!r||!i.current||r.current)return;const e=l.connect??(["number","string"].includes(typeof t)?"lower":Array.isArray(t)&&2===t.length?[!1,!0,!1]:void 0);r.current=Z.default.create(i.current,{start:t,range:l.range,step:l.step,connect:e,animate:!1,snap:l.snap,pips:l.pips})}),[i]),e.useEffect((()=>{$.default(t,n)||r.current?.set(t)}),[t]),[r,i]}const hn=w.default.section`
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
@@ -1239,7 +1239,7 @@
 					background: ${e.tokens.color.text.brand.primary};
 				}
 			`}}
-`,Pn=e.forwardRef((function({disabledClassName:e,selectedClassName:t,tabIndex:l,id:n,testId:i="Tab",...r},o){return b.default.createElement(D.Tab,{disabled:r.disabled,disabledClassName:e,selectedClassName:t,tabIndex:l,selected:r.selected,id:n},b.default.createElement(Tn,{ref:o,"data-testid":i,...r}))}));Pn.tabsRole="Tab";const Rn=w.default.div`
+`,Pn=({disabledClassName:e,selectedClassName:t,tabIndex:l,id:n,testId:i="Tab",ref:r,...o})=>b.default.createElement(D.Tab,{disabled:o.disabled,disabledClassName:e,selectedClassName:t,tabIndex:l,selected:o.selected,id:n},b.default.createElement(Tn,{ref:r,"data-testid":i,...o}));Pn.tabsRole="Tab";const Rn=w.default.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 @@
 					transition: transform ${e.tokens.duration.transition.base},
 						width ${e.tokens.duration.transition.base};
 			  `:void 0}
-`,Un=({tabs:t,tabRefs:l,selectedIndex:n,size:i})=>{const[r,o]=e.useState(0),[a,C]=e.useState(0);return e.useEffect((()=>{let e=0;b.default.Children.forEach(t,(t=>{if(b.default.isValidElement(t)&&"Tab"===t.type?.tabsRole){const i=l.current[e];if(i&&(t.props.selected||n===e)){const e=getComputedStyle(i),t=i.clientWidth-parseFloat(e.paddingLeft)-parseFloat(e.paddingRight);C(t),o(i?.offsetLeft??0)}e++}}))}),[n]),b.default.createElement(Rn,{style:{transform:`translateX(${r}px)`,width:`${a}px`},animate:void 0!==n,size:i})},On=({animate:t=!0,testId:l="TabList",size:n="sm",children:i,...r})=>{const o=e.useRef([]),[a,C]=e.useState();let d=0;return b.default.createElement(In,{"data-testid":l,...r},t&&b.default.createElement(Un,{tabs:i,tabRefs:o,selectedIndex:a,size:n}),b.default.Children.map(i,(e=>{if(b.default.isValidElement(e)&&"Tab"===e.type?.tabsRole){const l=d++;return e.props.selected&&a!==l&&C(l),b.default.cloneElement(e,{...e.props,ref:e=>{o.current[l]=e},size:n,animate:t})}return e})))};On.tabsRole="TabList";const Wn=w.default.div`
+`,Un=({tabs:t,tabRefs:l,selectedIndex:n,size:i})=>{const[r,o]=e.useState(0),[a,C]=e.useState(0);return e.useEffect((()=>{let e=0;b.default.Children.forEach(t,(t=>{if(b.default.isValidElement(t)&&"Tab"===t.type.tabsRole){const i=l.current[e];if(i&&(t.props.selected||n===e)){const e=getComputedStyle(i),t=i.clientWidth-parseFloat(e.paddingLeft)-parseFloat(e.paddingRight);C(t),o(i?.offsetLeft??0)}e++}}))}),[n]),b.default.createElement(Rn,{style:{transform:`translateX(${r}px)`,width:`${a}px`},animate:void 0!==n,size:i})},On=({animate:t=!0,testId:l="TabList",size:n="sm",children:i,...r})=>{const o=e.useRef([]),[a,C]=e.useState();let d=0;return b.default.createElement(In,{"data-testid":l,...r},t&&b.default.createElement(Un,{tabs:i,tabRefs:o,selectedIndex:a,size:n}),b.default.Children.map(i,(e=>{const l=e;if(b.default.isValidElement(e)&&"Tab"===e.type?.tabsRole){const e=d++;return l.props.selected&&a!==e&&C(e),b.default.cloneElement(l,{...l.props,ref:t=>{o.current[e]=t},size:n,animate:t})}return e})))};On.tabsRole="TabList";const Wn=w.default.div`
 	border-radius: ${({theme:e})=>e.tokens.tag.borderRadius};
 
 	${({secondary:e,outline:l,colorTheme:n,theme:{tokens:i}})=>l?t.css`