@purple/phoenix-components 5.27.0 → 5.28.0

package/dist/bundle.umd.js

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