@ably/ui 14.0.0-dev.2944826 → 14.0.0-dev.450e302

package/core/Accordion.js

@@ -1 +1 @@
-import React,{useState}from"react";import Icon from"./Icon";const AccordionRow=({name,children,index,setActiveIndex,active,topBorder,bottomBorder,last,arrowIcon})=>{let iconActive,iconInactive;const handleSetIndex=()=>{setActiveIndex(index)};if(arrowIcon){iconActive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"-rotate-90"});iconInactive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"rotate-90"})}else{iconActive=React.createElement(Icon,{name:"icon-gui-minus",color:"text-dark-grey",size:"1.5rem"});iconInactive=React.createElement(Icon,{name:"icon-gui-plus",color:"text-dark-grey",size:"1.5rem"})}return React.createElement("div",{className:`border-mid-grey ${last&&!bottomBorder?"":"border-b"} ${topBorder?"border-t":""}`},React.createElement("button",{type:"button",onClick:handleSetIndex,className:`flex w-full px-0 focus:outline-none py-20`},React.createElement("span",{className:"ui-text-p1 font-bold text-left mr-8"},name),React.createElement("span",{className:"ml-auto"},active?iconActive:iconInactive)),React.createElement("section",{className:"ui-text-p2 transition-all overflow-hidden",style:{maxHeight:active?"500px":"0",paddingBottom:active?"1.5rem":"0"}},children))};const Accordion=({data,id="id-accordion",topBorder,bottomBorder,arrowIcon,autoClose})=>{const[activeIndexes,setActiveIndexes]=useState([]);const handleSetIndex=index=>{const currentIndexIsActive=activeIndexes.includes(index);if(autoClose){setActiveIndexes(currentIndexIsActive?[]:[index])}else{setActiveIndexes(currentIndexIsActive?activeIndexes.filter(i=>i!==index):[...activeIndexes,index])}};return React.createElement("div",{className:"ui-grid-mx max-w-screen-sm sm:mx-auto",id:id},data.map((item,currentIndex)=>{return React.createElement(AccordionRow,{key:item.name,name:item.name,arrowIcon:arrowIcon,index:currentIndex,last:data.length===currentIndex+1,topBorder:topBorder&&currentIndex===0,bottomBorder:bottomBorder&&data.length===currentIndex+1,active:activeIndexes.includes(currentIndex),setActiveIndex:handleSetIndex},item.content)}))};export default Accordion;
+import React,{useState}from"react";import Icon from"./Icon";const AccordionRow=({name,children,index,setActiveIndex,active,topBorder,bottomBorder,last,arrowIcon})=>{let iconActive,iconInactive;const handleSetIndex=()=>{setActiveIndex(index)};if(arrowIcon){iconActive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"-rotate-90"});iconInactive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"rotate-90"})}else{iconActive=React.createElement(Icon,{name:"icon-gui-minus",color:"text-dark-grey",size:"1.5rem"});iconInactive=React.createElement(Icon,{name:"icon-gui-plus",color:"text-dark-grey",size:"1.5rem"})}return React.createElement("div",{className:`border-mid-grey ${last&&!bottomBorder?"":"border-b"} ${topBorder?"border-t":""}`},React.createElement("button",{type:"button",onClick:handleSetIndex,className:`flex w-full px-0 focus:outline-none py-20`},React.createElement("span",{className:"ui-text-p1 font-bold text-left mr-8"},name),React.createElement("span",{className:"ml-auto"},active?iconActive:iconInactive)),React.createElement("section",{className:"ui-text-p2 transition-all overflow-hidden",style:{maxHeight:active?"500px":"0",paddingBottom:active?"1.5rem":"0"}},children))};const Accordion=({data,id="id-accordion",topBorder,bottomBorder,arrowIcon,autoClose,className})=>{const[activeIndexes,setActiveIndexes]=useState([]);const handleSetIndex=index=>{const currentIndexIsActive=activeIndexes.includes(index);if(autoClose){setActiveIndexes(currentIndexIsActive?[]:[index])}else{setActiveIndexes(currentIndexIsActive?activeIndexes.filter(i=>i!==index):[...activeIndexes,index])}};return React.createElement("div",{className:className,id:id},data.map((item,currentIndex)=>{return React.createElement(AccordionRow,{key:item.name,name:item.name,arrowIcon:arrowIcon,index:currentIndex,last:data.length===currentIndex+1,topBorder:topBorder&&currentIndex===0,bottomBorder:bottomBorder&&data.length===currentIndex+1,active:activeIndexes.includes(currentIndex),setActiveIndex:handleSetIndex},item.content)}))};export default Accordion;

package/core/Expander.js

@@ -1 +1 @@
-import React,{useEffect,useRef,useState}from"react";const Expander=({heightThreshold=200,className,fadeClassName,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[height,setHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{var _innerRef_current;var _innerRef_current_clientHeight;const contentHeight=(_innerRef_current_clientHeight=(_innerRef_current=innerRef.current)===null||_innerRef_current===void 0?void 0:_innerRef_current.clientHeight)!==null&&_innerRef_current_clientHeight!==void 0?_innerRef_current_clientHeight:heightThreshold;if(contentHeight<heightThreshold){setHeight("auto")}else if(expanded){setHeight(contentHeight)}else{setHeight(heightThreshold)}setShowControls(contentHeight>=heightThreshold)},[heightThreshold,expanded]);return React.createElement(React.Fragment,null,React.createElement("div",{style:{height},className:`overflow-hidden transition-all relative ${className!==null&&className!==void 0?className:""}`},showControls&&!expanded&&React.createElement("div",{className:`h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName!==null&&fadeClassName!==void 0?fadeClassName:""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement("div",{onClick:()=>setExpanded(!expanded),onKeyDown:e=>e.key==="Enter"&&setExpanded(!expanded),tabIndex:0,className:"mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light active:text-gui-blue-active-light focus:text-gui-blue-focus"},expanded?"View less -":"View all +"))};export default Expander;
+import React,{useEffect,useRef,useState}from"react";const Expander=({heightThreshold=200,className,fadeClassName,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[height,setHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{var _innerRef_current;var _innerRef_current_clientHeight;const contentHeight=(_innerRef_current_clientHeight=(_innerRef_current=innerRef.current)===null||_innerRef_current===void 0?void 0:_innerRef_current.clientHeight)!==null&&_innerRef_current_clientHeight!==void 0?_innerRef_current_clientHeight:heightThreshold;if(contentHeight<heightThreshold){setHeight("auto")}else if(expanded){setHeight(contentHeight)}else{setHeight(heightThreshold)}setShowControls(contentHeight>=heightThreshold)},[heightThreshold,expanded]);return React.createElement(React.Fragment,null,React.createElement("div",{style:{height},className:`overflow-hidden transition-all relative ${className!==null&&className!==void 0?className:""}`},showControls&&!expanded&&React.createElement("div",{className:`h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName!==null&&fadeClassName!==void 0?fadeClassName:""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement("div",{onClick:()=>setExpanded(!expanded),onKeyDown:e=>e.key==="Enter"&&setExpanded(!expanded),tabIndex:0,className:"mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light"},expanded?"View less -":"View all +"))};export default Expander;

package/core/Slider.js

@@ -1 +1 @@
-import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute -bottom-40 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const timerRef=useRef(null);const isInline=(options===null||options===void 0?void 0:options.controlPosition)==="inline";const next=()=>{setActiveIndex(prevIndex=>(prevIndex+1)%children.length);resetInterval()};const prev=()=>{setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);resetInterval()};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);var _options_interval;timerRef.current=setInterval(next,(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options===null||options===void 0?void 0:options.interval]);var _options_interval;return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:"flex items-center transition-transform ease-in-out duration-500",style:{transform:`translateX(-${activeIndex*100}%)`}},children.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60 transition-opacity ease-in delay-500 duration-500",style:{opacity:activeIndex===index?1:.1}},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4,intervalIndicator:options===null||options===void 0?void 0:options.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;
+import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=(options===null||options===void 0?void 0:options.controlPosition)==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);var _options_interval;timerRef.current=setInterval(next,(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options===null||options===void 0?void 0:options.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);var _options_interval;return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24 -mt-16":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4,intervalIndicator:options===null||options===void 0?void 0:options.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;

package/core/Table/Table.js

@@ -1 +1 @@
-import React,{cloneElement}from"react";export const Table=({id,children,...rest})=>{var _rest_className;return React.createElement("table",{id:id,...rest,className:`ui-standard-container mb-4 sm:table-fixed ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export const TableBody=({children,...rest})=>React.createElement("tbody",rest,children);export const TableHeader=({children,...rest})=>{var _rest_className;return React.createElement("thead",{...rest,className:`sticky bg-white z-10 top-0 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},cloneElement(children,{isHeader:true}))};export const TableRowHeader=({children,...rest})=>{var _rest_className;return React.createElement("tr",{className:`-ml-24 mt-8 sm:ml-0 sm:mt-0 bg-light-grey sm:sticky z-10 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`,style:{top:"4rem"}},cloneElement(children,{isRowHeader:true}))};
+import React,{cloneElement}from"react";export const Table=({id,children,...rest})=>{var _rest_className;return React.createElement("table",{id:id,...rest,className:`ui-standard-container mb-4 sm:table-fixed ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export const TableBody=({children,...rest})=>React.createElement("tbody",rest,children);export const TableHeader=({children,...rest})=>{var _rest_className;return React.createElement("thead",{...rest,className:`sticky bg-white z-10 top-0 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},cloneElement(children,{isHeader:true}))};export const TableRowHeader=({children,...rest})=>{var _rest_className;return React.createElement("tr",{className:`-ml-24 mt-8 sm:ml-0 sm:mt-0 sm:sticky z-10 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},cloneElement(children,{isRowHeader:true}))};

package/core/Table/TableCell.js

@@ -1,7 +1,7 @@
-import React from"react";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circled-fill",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-cross-circled-fill",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const Partial=()=>React.createElement(Icon,{name:"icon-gui-partial",size:"1.5rem",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"partial-icon"});const LabelCell=({children,...rest})=>{var _rest_className;const classes=`
+import React from"react";const LabelCell=({children,...rest})=>{var _rest_className;const classes=`
     ui-text-p1 font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
   `;return React.createElement("td",{...rest,className:classes},children)};const TableCell=({children,isRowHeader,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`
         border-light-grey sm:p-24 leading-none flex sm:table-cell
         ${isRowHeader?"rounded-l-none rounded-r sm:rounded-lg py-20 px-24":"py-6"}
         ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
-      `},children)};const HeaderCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`ui-text-h3 px-24 py-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};const CtaCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`pt-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported,Partial};
+      `},children)};const HeaderCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`ui-text-h3 px-24 py-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};const CtaCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`pt-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export{TableCell,LabelCell,HeaderCell,CtaCell};

package/core/Table/data.js

@@ -1 +1 @@
-import React,{Fragment}from"react";import Tooltip from"../Tooltip";import{Supported,Unsupported}from"./TableCell";import Table from"../Table";const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center  sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-32"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-32"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{className:"ui-link",href:"#"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-16 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn"},"Contact sales"))))))};
+import React,{Fragment}from"react";import Tooltip from"../Tooltip";import Table from"../Table";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circled-fill",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-cross-circled-fill",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center  sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-32"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-32"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{className:"ui-link",href:"#"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-16 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn"},"Contact sales"))))))};

package/core/Table.js

@@ -1 +1 @@
-import{Table,TableRowHeader,TableHeader,TableBody}from"./Table/Table";import{TableRow}from"./Table/TableRow";import{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported,Partial}from"./Table/TableCell";export default{Root:Table,Row:TableRow,Cell:TableCell,LabelCell,HeaderCell,CtaCell,RowHeader:TableRowHeader,Body:TableBody,Header:TableHeader,Supported,Unsupported,Partial};
+import{Table,TableRowHeader,TableHeader,TableBody}from"./Table/Table";import{TableRow}from"./Table/TableRow";import{TableCell,LabelCell,HeaderCell,CtaCell}from"./Table/TableCell";export default{Root:Table,Row:TableRow,Cell:TableCell,LabelCell,HeaderCell,CtaCell,RowHeader:TableRowHeader,Body:TableBody,Header:TableHeader};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.0-dev.2944826",
+  "version": "14.0.0-dev.450e302",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

package/src/core/Accordion.tsx

@@ -25,6 +25,7 @@ export type AccordionProps = {
   bottomBorder?: boolean;
   id?: string;
   autoClose?: boolean;
+  className?: string;
 };
 
 const AccordionRow = ({
@@ -104,6 +105,7 @@ const Accordion = ({
   bottomBorder,
   arrowIcon,
   autoClose,
+  className,
 }: AccordionProps) => {
   const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
 
@@ -122,7 +124,7 @@ const Accordion = ({
   };
 
   return (
-    <div className="ui-grid-mx max-w-screen-sm sm:mx-auto" id={id}>
+    <div className={className} id={id}>
       {data.map((item, currentIndex) => {
         return (
           <AccordionRow

package/src/core/Expander.tsx

@@ -51,7 +51,7 @@ const Expander = ({
           onClick={() => setExpanded(!expanded)}
           onKeyDown={(e) => e.key === "Enter" && setExpanded(!expanded)}
           tabIndex={0}
-          className="mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light active:text-gui-blue-active-light focus:text-gui-blue-focus"
+          className="mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light"
         >
           {expanded ? "View less -" : "View all +"}
         </div>

package/src/core/Slider.tsx

@@ -18,6 +18,8 @@ interface SliderIndicatorProps {
   isInline?: boolean;
 }
 
+const SLIDE_TRANSITION_LENGTH = 300;
+
 const SlideIndicator = ({
   numSlides,
   activeIndex,
@@ -28,7 +30,7 @@ const SlideIndicator = ({
   return (
     <ul
       className={`flex gap-4 left-1/2 ${
-        isInline ? "bottom-0" : "absolute -bottom-40 transform -translate-x-1/2"
+        isInline ? "bottom-0" : "absolute bottom-0 transform -translate-x-1/2"
       }`}
     >
       {Array.from({ length: numSlides }, (_, i) =>
@@ -63,24 +65,43 @@ const SlideIndicator = ({
   );
 };
 
+const setupSlides = (children: ReactNode[], activeIndex: number) => [
+  children[activeIndex === 0 ? children.length - 1 : activeIndex - 1],
+  children[activeIndex],
+  children[activeIndex === children.length - 1 ? 0 : activeIndex + 1],
+];
+
 const Slider = ({ children, options }: SliderProps) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const [touchStartX, setTouchStartX] = useState(0);
   const [touchEndX, setTouchEndX] = useState(0);
+  const [slides, setSlides] = useState<ReactNode[]>(
+    setupSlides(children, activeIndex)
+  );
+  const [translationCoefficient, setTranslationCoefficient] = useState(0);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const [slideLock, setSlideLock] = useState(false);
 
   const isInline = options?.controlPosition === "inline";
 
   const next = () => {
-    setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);
-    resetInterval();
+    if (!slideLock) {
+      setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);
+      setTranslationCoefficient(1);
+      resetInterval();
+      setSlideLock(true);
+    }
   };
 
   const prev = () => {
-    setActiveIndex((prevIndex) =>
-      prevIndex > 0 ? prevIndex - 1 : children.length - 1
-    );
-    resetInterval();
+    if (!slideLock) {
+      setActiveIndex((prevIndex) =>
+        prevIndex > 0 ? prevIndex - 1 : children.length - 1
+      );
+      setTranslationCoefficient(-1);
+      resetInterval();
+      setSlideLock(true);
+    }
   };
 
   const resetInterval = () => {
@@ -112,6 +133,14 @@ const Slider = ({ children, options }: SliderProps) => {
     };
   }, [children.length, options?.interval]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      setSlides(setupSlides(children, activeIndex));
+      setTranslationCoefficient(0);
+      setSlideLock(false);
+    }, SLIDE_TRANSITION_LENGTH);
+  }, [activeIndex]);
+
   return (
     <div
       className="relative"
@@ -121,16 +150,19 @@ const Slider = ({ children, options }: SliderProps) => {
     >
       <div className="overflow-y-visible overflow-x-clip w-full py-40">
         <div
-          className="flex items-center transition-transform ease-in-out duration-500"
-          style={{ transform: `translateX(-${activeIndex * 100}%)` }}
+          className={`flex items-center ${
+            translationCoefficient !== 0
+              ? `transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`
+              : ""
+          } `}
+          style={{
+            transform: `translateX(-${(translationCoefficient + 1) * 100}%)`,
+          }}
         >
-          {children.map((child, index) => (
+          {slides.map((child, index) => (
             <div
               key={index}
-              className="w-full flex-shrink-0 flex justify-center sm:px-60 transition-opacity ease-in delay-500 duration-500"
-              style={{
-                opacity: activeIndex === index ? 1 : 0.1,
-              }}
+              className="w-full flex-shrink-0 flex justify-center sm:px-60"
             >
               {child}
             </div>
@@ -141,7 +173,7 @@ const Slider = ({ children, options }: SliderProps) => {
       <div
         className={`flex items-center pointer-events-none ${
           isInline
-            ? "ui-standard-container justify-center gap-24"
+            ? "ui-standard-container justify-center gap-24 -mt-16"
             : "sm:flex sm:absolute inset-0 justify-between"
         }`}
       >

package/src/core/Table/Table.tsx

@@ -49,10 +49,9 @@ export const TableRowHeader = ({
   ...rest
 }: PropsWithChildren<TableHTMLAttributes<HTMLTableRowElement>>) => (
   <tr
-    className={`-ml-24 mt-8 sm:ml-0 sm:mt-0 bg-light-grey sm:sticky z-10 ${
+    className={`-ml-24 mt-8 sm:ml-0 sm:mt-0 sm:sticky z-10 ${
       rest?.className ?? ""
     }`}
-    style={{ top: "4rem" }}
   >
     {cloneElement(children as ReactElement, { isRowHeader: true })}
   </tr>

package/src/core/Table/TableCell.tsx

@@ -1,39 +1,9 @@
 import React, { PropsWithChildren } from "react";
-import Icon from "../Icon";
 
 type TableCellProps = {
   isRowHeader?: boolean;
 } & React.TdHTMLAttributes<HTMLTableCellElement>;
 
-const Supported = () => (
-  <Icon
-    name="icon-gui-check-circled-fill"
-    size="1.5rem"
-    color="text-gui-success"
-    additionalCSS="flex-grow-0 flex-shrink-0"
-    data-testid="supported-icon"
-  />
-);
-
-const Unsupported = () => (
-  <Icon
-    name="icon-gui-cross-circled-fill"
-    size="1.5rem"
-    color="text-gui-error"
-    additionalCSS="flex-grow-0 flex-shrink-0"
-    data-testid="unsupported-icon"
-  />
-);
-
-const Partial = () => (
-  <Icon
-    name="icon-gui-partial"
-    size="1.5rem"
-    additionalCSS="flex-grow-0 flex-shrink-0"
-    data-testid="partial-icon"
-  />
-);
-
 const LabelCell = ({
   children,
   ...rest
@@ -98,12 +68,4 @@ const CtaCell = ({
   </td>
 );
 
-export {
-  TableCell,
-  LabelCell,
-  HeaderCell,
-  CtaCell,
-  Supported,
-  Unsupported,
-  Partial,
-};
+export { TableCell, LabelCell, HeaderCell, CtaCell };

package/src/core/Table/data.tsx

@@ -1,8 +1,28 @@
 import React, { Fragment } from "react";
 
 import Tooltip from "../Tooltip";
-import { Supported, Unsupported } from "./TableCell";
 import Table from "../Table";
+import Icon from "../Icon";
+
+const Supported = () => (
+  <Icon
+    name="icon-gui-check-circled-fill"
+    size="1.5rem"
+    color="text-gui-success"
+    additionalCSS="flex-grow-0 flex-shrink-0"
+    data-testid="supported-icon"
+  />
+);
+
+const Unsupported = () => (
+  <Icon
+    name="icon-gui-cross-circled-fill"
+    size="1.5rem"
+    color="text-gui-error"
+    additionalCSS="flex-grow-0 flex-shrink-0"
+    data-testid="unsupported-icon"
+  />
+);
 
 const testRow = (index) => ({
   label: `Label ${index + 1}`,

package/src/core/Table.tsx

@@ -1,14 +1,6 @@
 import { Table, TableRowHeader, TableHeader, TableBody } from "./Table/Table";
 import { TableRow } from "./Table/TableRow";
-import {
-  TableCell,
-  LabelCell,
-  HeaderCell,
-  CtaCell,
-  Supported,
-  Unsupported,
-  Partial,
-} from "./Table/TableCell";
+import { TableCell, LabelCell, HeaderCell, CtaCell } from "./Table/TableCell";
 
 export default {
   Root: Table,
@@ -20,7 +12,4 @@ export default {
   RowHeader: TableRowHeader,
   Body: TableBody,
   Header: TableHeader,
-  Supported,
-  Unsupported,
-  Partial,
 };