@ably/ui 15.1.6 → 15.1.7

package/core/Button.js

@@ -1 +1 @@
-import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buttonClasses={priority:{lg:"ui-button-priority-lg",md:"ui-button-priority",sm:"ui-button-priority-sm",xs:"ui-button-priority-xs"},primary:{lg:"ui-button-primary-lg",md:"ui-button-primary",sm:"ui-button-primary-sm",xs:"ui-button-primary-xs"},secondary:{lg:"ui-button-secondary-lg",md:"ui-button-secondary",sm:"ui-button-secondary-sm",xs:"ui-button-secondary-xs"}};export const iconModifierClasses={lg:{left:"ui-button-lg-left-icon",right:"ui-button-lg-right-icon"},md:{left:"ui-button-left-icon",right:"ui-button-right-icon"},sm:{left:"ui-button-sm-left-icon",right:"ui-button-sm-right-icon"},xs:{left:"",right:""}};const Button=({variant="primary",size,leftIcon,rightIcon,children,className,...rest})=>{return /*#__PURE__*/React.createElement("button",{className:cn(buttonClasses[variant][size??"md"],{[iconModifierClasses[size??"md"].left]:leftIcon},{[iconModifierClasses[size??"md"].right]:rightIcon},className),...rest},leftIcon?/*#__PURE__*/React.createElement(Icon,{name:leftIcon}):null,children,rightIcon?/*#__PURE__*/React.createElement(Icon,{name:rightIcon}):null)};export default Button;
+import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buttonClasses={priority:{lg:"ui-button-priority-lg",md:"ui-button-priority",sm:"ui-button-priority-sm",xs:"ui-button-priority-xs"},primary:{lg:"ui-button-primary-lg",md:"ui-button-primary",sm:"ui-button-primary-sm",xs:"ui-button-primary-xs"},secondary:{lg:"ui-button-secondary-lg",md:"ui-button-secondary",sm:"ui-button-secondary-sm",xs:"ui-button-secondary-xs"}};export const iconModifierClasses={lg:{left:"ui-button-lg-left-icon",right:"ui-button-lg-right-icon"},md:{left:"ui-button-left-icon",right:"ui-button-right-icon"},sm:{left:"ui-button-sm-left-icon",right:"ui-button-sm-right-icon"},xs:{left:"",right:""}};export const commonButtonProps=props=>{const{variant="primary",size,leftIcon,rightIcon,className}=props;return{className:cn(buttonClasses[variant][size??"md"],{[iconModifierClasses[size??"md"].left]:leftIcon},{[iconModifierClasses[size??"md"].right]:rightIcon},className)}};export const commonButtonInterior=props=>{const{leftIcon,rightIcon,children}=props;return /*#__PURE__*/React.createElement(React.Fragment,null,leftIcon?/*#__PURE__*/React.createElement(Icon,{name:leftIcon}):null,children,rightIcon?/*#__PURE__*/React.createElement(Icon,{name:rightIcon}):null)};const Button=({variant="primary",size,leftIcon,rightIcon,children,className,...rest})=>{return /*#__PURE__*/React.createElement("button",{...commonButtonProps({variant,size,leftIcon,rightIcon,className}),...rest},commonButtonInterior({leftIcon,rightIcon,children}))};export default Button;

package/core/LinkButton.js

@@ -0,0 +1 @@
+import React from"react";import{commonButtonInterior,commonButtonProps}from"./Button";import cn from"./utils/cn";const LinkButton=({variant="primary",size,leftIcon,rightIcon,children,className,disabled,onClick,...rest})=>{const handleClick=e=>{if(disabled){e.preventDefault();return}onClick?.(e)};return /*#__PURE__*/React.createElement("a",{...commonButtonProps({variant,size,leftIcon,rightIcon,className:cn(className,{"ui-button-disabled dark:ui-button-disabled-dark":disabled})}),role:"button","aria-disabled":disabled,onClick:handleClick,...rest},commonButtonInterior({leftIcon,rightIcon,children}))};export default LinkButton;

package/core/Pricing/PricingCards.js

@@ -1 +1 @@
-import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import Tooltip from"../Tooltip";import cn from"../utils/cn";const PricingCards=({data,delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-20",{"m-8":delimiter!=="blank"})},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:"text-neutral-800 dark:text-neutral-500"}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-600 dark:border-neutral-700",bg:"border-neutral-600 dark:bg-neutral-700"},blue:{border:"border-blue-400 dark:border-blue-600",bg:"bg-blue-400 dark:bg-blue-600"},orange:{border:"border-orange-600 dark:border-orange-600",bg:"bg-orange-600 dark:bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},/*#__PURE__*/React.createElement("div",{className:cn("gap-8",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:cn("relative border flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] backdrop-blur",borderClasses(border?.color)?.border??"border-neutral-200 dark:border-neutral-1100",border?.style,{"@[520px]:flex-row @[920px]:flex-col":delimiter}),"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center absolute z-10 -top-12 self-center font-semibold uppercase text-neutral-000 font-sans h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,/*#__PURE__*/React.createElement("div",{className:cn("absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25",{"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":!delimiter})}),/*#__PURE__*/React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-24`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-12"},/*#__PURE__*/React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:cn("ui-text-p1 min-h-[20px]",description.className,description.color),style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:cn("flex items-end gap-8",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},/*#__PURE__*/React.createElement("p",{className:"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),/*#__PURE__*/React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:cn("text-center px-24 !py-12 hover:text-neutral-000 cursor-pointer",cta.className??"ui-btn bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300"),url:cta.url,onClick:cta.onClick,disabled:cta.disabled},cta.text)):delimiter?null:/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},/*#__PURE__*/React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-64"}))),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:"text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]"},title),/*#__PURE__*/React.createElement("div",{className:cn({"flex flex-col gap-4":!delimiter})},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:cn("flex justify-between gap-16 px-8 -mx-8",index===0?"py-8":"py-4",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark:text-neutral-300",subIndex%2===1?"text-right":"")},subItem))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,listItemColors?"ui-text-p3":"ui-text-p2")},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"absolute translate-x-24 sm:-translate-x-[120px] sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer",onClick:cta.onClick,iconColor:listItemColors?.foreground},cta.text),/*#__PURE__*/React.createElement("div",{className:"absolute hidden sm:block sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-[120px] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 text-neutral-500 dark:text-neutral-800"},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;
+import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import LinkButton from"../LinkButton";import Tooltip from"../Tooltip";import cn from"../utils/cn";const PricingCards=({data,delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-20",{"m-8":delimiter!=="blank"})},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:"text-neutral-800 dark:text-neutral-500"}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-600 dark:border-neutral-700",bg:"border-neutral-600 dark:bg-neutral-700"},blue:{border:"border-blue-400 dark:border-blue-600",bg:"bg-blue-400 dark:bg-blue-600"},orange:{border:"border-orange-600 dark:border-orange-600",bg:"bg-orange-600 dark:bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},/*#__PURE__*/React.createElement("div",{className:cn("gap-8",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:cn("relative border flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] backdrop-blur",borderClasses(border?.color)?.border??"border-neutral-200 dark:border-neutral-1100",border?.style,{"@[520px]:flex-row @[920px]:flex-col":delimiter}),"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?/*#__PURE__*/React.createElement("div",{className:cn("flex items-center absolute z-10 -top-12 self-center font-semibold uppercase text-neutral-000 font-sans h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,/*#__PURE__*/React.createElement("div",{className:cn("absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25",{"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":!delimiter})}),/*#__PURE__*/React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-24`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-12"},/*#__PURE__*/React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:cn("ui-text-p1 min-h-[20px]",description.className,description.color),style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:cn("flex items-end gap-8",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},/*#__PURE__*/React.createElement("p",{className:"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),/*#__PURE__*/React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(LinkButton,{className:cn("w-full",cta.className),variant:cta.url==="/contact"?"priority":"primary",href:cta.url,onClick:cta.onClick,disabled:cta.disabled},cta.text)):delimiter?null:/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},/*#__PURE__*/React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-64"}))),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:"text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]"},title),/*#__PURE__*/React.createElement("div",{className:cn({"flex flex-col gap-4":!delimiter})},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:cn("flex justify-between gap-16 px-8 -mx-8",index===0?"py-8":"py-4",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark:text-neutral-300",subIndex%2===1?"text-right":"")},subItem))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,listItemColors?"ui-text-p3":"ui-text-p2")},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"absolute translate-x-24 sm:-translate-x-[120px] sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer",onClick:cta.onClick,iconColor:listItemColors?.foreground},cta.text),/*#__PURE__*/React.createElement("div",{className:"absolute hidden sm:block sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-[120px] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 text-neutral-500 dark:text-neutral-800"},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;

package/core/Pricing/data.js

@@ -1 +1 @@
-import React from"react";export const planData=[{title:{content:"Free",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-600 dark:text-neutral-700"},description:{content:"Build a proof of concept.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$0"},cta:{text:"Start for free",url:"/sign-up"},sections:[{title:"Limits",items:["200 concurrent channels","200 concurrent connections","500 messages / second","6M messages / month"]},{title:"Includes",items:["Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-300 dark:text-neutral-1000"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Standard",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$29",content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"/users/paid_sign_up?package=standard"},sections:[{title:"Limits",items:["10k concurrent channels","10k concurrent connections","2.5k messages / second"]},{title:"Includes",items:["1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-blue-600 dark:text-blue-400",background:"text-blue-200 dark:text-blue-800"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Pro",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Scale with confidence.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$399",content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"/users/paid_sign_up?package=pro"},sections:[{title:"Limits",items:["50k concurrent channels","50k concurrent connections","10k messages / second"]},{title:"Includes",items:["2 hour support SLA","Uptime SLO"],listItemColors:{foreground:"text-blue-600 dark:text-blue-400",background:"text-blue-200 dark:text-blue-800"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Enterprise",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-orange-600"},description:{content:"Deliver without limits.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"Custom"},cta:{text:"Contact us",url:"/contact",className:"ui-btn-alt text-neutral-000"},sections:[{title:"Unlimited",items:["Concurrent channels","Concurrent connections","Messages / second"]},{title:"Includes",items:["24/7 mission critical support","99.999% uptime SLAs","Committed use discounts","Datadog","CNAME, SSO, & more"],listItemColors:{foreground:"text-orange-600 dark:text-orange-600",background:"text-orange-200 dark:text-orange-1000"},cta:{text:"See all features",url:"#pricing-table"}}]}];export const consumptionData=[{title:{content:"Messages",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Messages contain the data that a client is communicating, such as the contents of a chat message.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$2.50",content:"/ million"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million msgs"],["First 50 million msgs","$2.50"],["Next 450 million msgs","$2.25"],["Next 4.5 billion msgs","$1.95"],["Next 15 billion msgs","$1.65"],["Next 30 billion msgs","$1.40"],["Over 50 billion msgs","$1.25"]]}]},{title:{content:"Channels",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:/*#__PURE__*/React.createElement("p",null,"We charge you for the amount of time a channel is active in our network by the minute. For example, if ten channels are in use for 45 minutes, you will be charged a total of 450 channel minutes.")},description:{content:"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}]},{title:{content:"Connections",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:/*#__PURE__*/React.createElement("p",null,"We charge you for the amount of time devices are connected to our network by the minute. For example, if ten devices are each connected for 45 minutes, you will be charged a total of 450 connection minutes.")},description:{content:"Clients establish and maintain a connection to the Ably service, typically over WebSockets.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}]}];
+import React from"react";export const planData=[{title:{content:"Free",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-600 dark:text-neutral-700"},description:{content:"Build a proof of concept.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$0"},cta:{text:"Start for free",url:"/sign-up"},sections:[{title:"Limits",items:["200 concurrent channels","200 concurrent connections","500 messages / second","6M messages / month"]},{title:"Includes",items:["Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-300 dark:text-neutral-1000"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Standard",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$29",content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"/users/paid_sign_up?package=standard"},sections:[{title:"Limits",items:["10k concurrent channels","10k concurrent connections","2.5k messages / second"]},{title:"Includes",items:["1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-blue-600 dark:text-blue-400",background:"text-blue-200 dark:text-blue-800"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Pro",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Scale with confidence.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$399",content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"/users/paid_sign_up?package=pro"},sections:[{title:"Limits",items:["50k concurrent channels","50k concurrent connections","10k messages / second"]},{title:"Includes",items:["2 hour support SLA","Uptime SLO"],listItemColors:{foreground:"text-blue-600 dark:text-blue-400",background:"text-blue-200 dark:text-blue-800"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Enterprise",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-orange-600"},description:{content:"Deliver without limits.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"Custom"},cta:{text:"Contact us",url:"/contact"},sections:[{title:"Unlimited",items:["Concurrent channels","Concurrent connections","Messages / second"]},{title:"Includes",items:["24/7 mission critical support","99.999% uptime SLAs","Committed use discounts","Datadog","CNAME, SSO, & more"],listItemColors:{foreground:"text-orange-600 dark:text-orange-600",background:"text-orange-200 dark:text-orange-1000"},cta:{text:"See all features",url:"#pricing-table"}}]}];export const consumptionData=[{title:{content:"Messages",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Messages contain the data that a client is communicating, such as the contents of a chat message.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$2.50",content:"/ million"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million msgs"],["First 50 million msgs","$2.50"],["Next 450 million msgs","$2.25"],["Next 4.5 billion msgs","$1.95"],["Next 15 billion msgs","$1.65"],["Next 30 billion msgs","$1.40"],["Over 50 billion msgs","$1.25"]]}]},{title:{content:"Channels",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:/*#__PURE__*/React.createElement("p",null,"We charge you for the amount of time a channel is active in our network by the minute. For example, if ten channels are in use for 45 minutes, you will be charged a total of 450 channel minutes.")},description:{content:"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}]},{title:{content:"Connections",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:/*#__PURE__*/React.createElement("p",null,"We charge you for the amount of time devices are connected to our network by the minute. For example, if ten devices are each connected for 45 minutes, you will be charged a total of 450 connection minutes.")},description:{content:"Clients establish and maintain a connection to the Ably service, typically over WebSockets.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}]}];

package/core/styles/buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-button-base {
-    @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus-base disabled:cursor-not-allowed;
+    @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus-base;
   }
 
   .ui-button-lg-base {
@@ -20,19 +20,19 @@
   }
 
   .ui-button-disabled-base {
-    @apply disabled:bg-gui-unavailable disabled:text-gui-unavailable-dark disabled:hover:bg-gui-unavailable;
+    @apply disabled:cursor-not-allowed disabled:bg-gui-unavailable disabled:text-gui-unavailable-dark disabled:hover:bg-gui-unavailable;
   }
 
   .ui-button-disabled-base-dark {
-    @apply disabled:bg-gui-unavailable-dark disabled:text-gui-unavailable disabled:hover:bg-gui-unavailable-dark;
+    @apply disabled:cursor-not-allowed disabled:bg-gui-unavailable-dark disabled:text-gui-unavailable disabled:hover:bg-gui-unavailable-dark;
   }
 
   .ui-button-priority-base {
-    @apply bg-gradient-active-orange hover:bg-gradient-to-r hover:from-orange-800 hover:to-orange-800 active:bg-gradient-to-r active:from-orange-800 active:to-orange-800 disabled:bg-none ui-button-disabled-base;
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right transition-[background-position] disabled:bg-none ui-button-disabled-base;
   }
 
   .ui-theme-dark .ui-button-priority-base {
-    @apply bg-gradient-active-orange hover:bg-gradient-to-r hover:from-orange-800 hover:to-orange-800 active:bg-gradient-to-r active:from-orange-800 active:to-orange-800 disabled:bg-none ui-button-disabled-base-dark;
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right transition-[background-position] disabled:bg-none ui-button-disabled-base-dark;
   }
 
   .ui-button-primary-base {
@@ -122,4 +122,12 @@
   .ui-button-sm-right-icon {
     @apply pr-[18px];
   }
+
+  .ui-button-disabled {
+    @apply select-none pointer-events-none bg-gui-unavailable text-gui-unavailable-dark hover:bg-gui-unavailable;
+  }
+
+  .ui-theme-dark .ui-button-disabled {
+    @apply select-none pointer-events-none bg-gui-unavailable-dark text-gui-unavailable hover:bg-gui-unavailable-dark;
+  }
 }

package/core/styles/properties.css

@@ -155,6 +155,17 @@
       var(--color-red-orange) 92.73%
     );
 
+    --gradient-priority-button: linear-gradient(
+      61.2deg,
+      var(--color-active-orange) 5%,
+      #fe5215 19%,
+      #fc4a13 27%,
+      #f73c10 33%,
+      #f1280a 39%,
+      #e90f04 44%,
+      var(--color-orange-800) 50%
+    );
+
     /* Used for smooth transitions from gradient to non-gradient backgrounds */
     --gradient-transparent: linear-gradient(
       0deg,

package/index.d.ts

@@ -227,7 +227,7 @@ import React, { PropsWithChildren } from "react";
 import { IconName } from "@ably/ui/core/Icon/types";
 export type ButtonType = "priority" | "primary" | "secondary";
 type ButtonSize = "lg" | "md" | "sm" | "xs";
-type ButtonProps = {
+export type ButtonPropsBase = {
     /**
      * The type of button: priority, primary, or secondary.
      */
@@ -248,11 +248,16 @@ type ButtonProps = {
      * Optional classes to add to the button element.
      */
     className?: string;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+};
+type ButtonProps = ButtonPropsBase & React.ButtonHTMLAttributes<HTMLButtonElement>;
 export const iconModifierClasses: Record<ButtonSize, {
     left: string;
     right: string;
 }>;
+export const commonButtonProps: (props: ButtonPropsBase) => {
+    className: string;
+};
+export const commonButtonInterior: (props: PropsWithChildren<ButtonPropsBase>) => import("react/jsx-runtime").JSX.Element;
 const Button: React.FC<PropsWithChildren<ButtonProps>>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map
@@ -491,6 +496,18 @@ export default Icon;
 //# sourceMappingURL=Icon.d.ts.map
 }
 
+declare module '@ably/ui/core/LinkButton' {
+import React from "react";
+import { ButtonPropsBase } from "@ably/ui/core/Button";
+export type LinkButtonProps = ButtonPropsBase & {
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+const LinkButton: React.FC<LinkButtonProps>;
+export default LinkButton;
+//# sourceMappingURL=LinkButton.d.ts.map
+}
+
 declare module '@ably/ui/core/Loader' {
 type LoaderProps = {
     size?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.1.6",
+  "version": "15.1.7",
   "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/tailwind.config.js

@@ -285,6 +285,7 @@ module.exports = {
       backgroundImage: {
         "gradient-active-orange": "var(--gradient-active-orange)",
         "gradient-hot-pink": "var(--gradient-hot-pink)",
+        "gradient-priority-button": "var(--gradient-priority-button)",
       },
       borderRadius: {
         md: "0.1875rem",