@ably/ui 15.3.6 → 15.4.1-dev.a5e2f45d

package/core/Flyout.js

@@ -0,0 +1 @@
+import React,{useState}from"react";import{NavigationMenu,NavigationMenuItem,NavigationMenuList,NavigationMenuTrigger,NavigationMenuContent,NavigationMenuViewport,NavigationMenuLink}from"@radix-ui/react-navigation-menu";import cn from"./utils/cn";import{componentMaxHeight,HEADER_HEIGHT}from"./utils/heights";const DEFAULT_MENU_LINK_STYLING="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between";const DEFAULT_VIEWPORT_STYLING="relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]";const PANEL_ANIMATION="data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";const FlyOverlay=({className,fadingOut})=>React.createElement("div",{className:cn("absolute left-0 right-0 h-screen w-full opacity-0",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut},className),style:{height:componentMaxHeight(HEADER_HEIGHT)}});const Flyout=({menuItems,className,flyOutClassName,menuLinkClassName,viewPortClassName,hasAnimation})=>{const[isOpen,setIsOpen]=useState(false);const[fadingOut,setFadingOut]=useState(false);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setIsOpen(false);setFadingOut(false)},150)};return React.createElement(React.Fragment,null,React.createElement(NavigationMenu,{className:cn(className,"flex w-full"),onValueChange:val=>val?setIsOpen(true):closeMenu(),delayDuration:0},React.createElement(NavigationMenuList,{className:"flex list-none center"},menuItems.map(({label,content,link,panelClassName})=>content?React.createElement(NavigationMenuItem,{key:label},React.createElement(NavigationMenuTrigger,{className:cn("group outline-none focus:outline-none select-none cursor-pointer relative",DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},label),React.createElement(NavigationMenuContent,{className:cn("absolute inset-x-0 top-0 p-24 z-10",hasAnimation&&PANEL_ANIMATION,panelClassName)},content)):React.createElement(NavigationMenuLink,{key:label},React.createElement("a",{href:link,className:cn(DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},label)))),React.createElement("div",{className:cn("absolute left-0 top-full",flyOutClassName)},React.createElement(NavigationMenuViewport,{className:cn(DEFAULT_VIEWPORT_STYLING,viewPortClassName)}))),isOpen?React.createElement(FlyOverlay,{className:"bg-neutral-1300 dark:bg-neutral-000 opacity-10 z-20 h-screen",fadingOut:fadingOut}):null)};export default Flyout;

package/core/Header/HeaderLinks.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";const testSessionState={signedIn:false,account:{links:{dashboard:{href:"/dashboard"}}}};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton})=>{const signedIn=sessionState.signedIn;const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";return React.createElement("div",{className:"flex md:items-center flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 p-12 gap-12"},headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-4 mt-8 md:mt-0"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn&&sessionState.account?React.createElement(LinkButton,{href:sessionState.account.links?.dashboard.href,variant:"secondary",className:"md:ui-button-secondary-xs","aria-label":"Access your dashboard"},"Dashboard"):React.createElement("div",{className:"flex gap-12"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs"},"Start free")))};
+import React from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";const testSessionState={signedIn:false,account:{links:{dashboard:{href:"/dashboard"}}}};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const signedIn=sessionState.signedIn;const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 p-12 md:p-0 gap-12",className)},headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-4 mt-8 md:mt-0"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn&&sessionState.account?React.createElement(LinkButton,{href:sessionState.account.links?.dashboard.href,variant:"secondary",className:"md:ui-button-secondary-xs","aria-label":"Access your dashboard"},"Dashboard"):React.createElement("div",{className:"flex gap-12"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs"},"Start free")))};

package/core/Header.js

@@ -1 +1 @@
-import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";const Header=({searchBar,searchButton,logoHref,headerLinks,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all"})=>{const[showMenu,setShowMenu]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const menuRef=useRef(null);useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{const handleScroll=()=>{for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center p-6"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed top-0 left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 transition-colors px-24 md:px-64",scrollpointClasses),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:"flex items-center h-full"},React.createElement(Logo,{href:logoHref,theme:"light",additionalLinkAttrs:{className:"flex dark:hidden h-full focus-base rounded mr-32"}}),React.createElement(Logo,{href:logoHref,theme:"dark",additionalLinkAttrs:{className:"hidden dark:flex h-full focus-base rounded mr-32"}}),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),React.createElement("div",{className:"hidden md:flex flex-1 items-center h-full"},nav,React.createElement("div",{className:"flex-1 flex justify-center px-16"},searchBar),React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility})))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 animate-[fadeInTenPercent_150ms_ease-in-out_forwards]",onClick:()=>setShowMenu(!showMenu),onKeyDown:e=>e.key==="Escape"&&setShowMenu(false),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden left-0 right-0 mx-12 bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20",style:{maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
+import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const Header=({searchBar,searchButton,logoHref,headerLinks,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all"})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const menuRef=useRef(null);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{const handleScroll=()=>{for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center p-6"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed top-0 left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 transition-colors px-24 md:px-64",scrollpointClasses),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:"flex items-center h-full"},React.createElement("nav",{className:"flex flex-1 h-full items-center"},React.createElement(Logo,{href:logoHref,theme:"light",additionalLinkAttrs:{className:"flex dark:hidden h-full focus-base rounded mr-32"}}),React.createElement(Logo,{href:logoHref,theme:"dark",additionalLinkAttrs:{className:"hidden dark:flex h-full focus-base rounded mr-32"}}),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center")},searchBar):null,React.createElement(HeaderLinks,{className:FLEXIBLE_DESKTOP_CLASSES,headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden left-0 right-0 mx-12 bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20",style:{maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;

package/core/Table/data.js

@@ -1 +1 @@
-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-x-circle-solid",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"))))))};
+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-circle-solid",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-x-circle-solid",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/index.d.ts

@@ -441,6 +441,59 @@ export default BackendFlashes;
 //# sourceMappingURL=Flash.d.ts.map
 }
 
+declare module '@ably/ui/core/Flyout' {
+import React from "react";
+/**
+ * Props for the Flyout component.
+ */
+type FlyoutProps = {
+    /**
+     * Array of menu items to be displayed in the flyout.
+     */
+    menuItems: {
+        /**
+         * Label for the menu item.
+         */
+        label: string;
+        /**
+         * Optional content to be displayed in the flyout panel.
+         */
+        content?: React.ReactNode;
+        /**
+         * Optional link for the menu item.
+         */
+        link?: string;
+        /**
+         * Optional styling for the flyout panel.
+         */
+        panelClassName?: string;
+    }[];
+    /**
+     * Optional class name for the flyout container.
+     */
+    className?: string;
+    /**
+     * Optional class name for the flyout element.
+     */
+    flyOutClassName?: string;
+    /**
+     * Optional class name for the menu link.
+     */
+    menuLinkClassName?: string;
+    /**
+     * Optional class name for the viewport.
+     */
+    viewPortClassName?: string;
+    /**
+     * Flag to indicate if animation should be applied.
+     */
+    hasAnimation: boolean;
+};
+const Flyout: ({ menuItems, className, flyOutClassName, menuLinkClassName, viewPortClassName, hasAnimation, }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
+export default Flyout;
+//# sourceMappingURL=Flyout.d.ts.map
+}
+
 declare module '@ably/ui/core/Footer' {
 type FooterProps = {
     paths: {
@@ -461,7 +514,9 @@ export default Footer;
 declare module '@ably/ui/core/Header/HeaderLinks' {
 import React from "react";
 import { HeaderProps } from ".@ably/ui/core/Header";
-export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton">>;
+export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton"> & {
+    className?: string;
+}>;
 //# sourceMappingURL=HeaderLinks.d.ts.map
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.3.6",
+  "version": "15.4.1-dev.a5e2f45d",
   "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",
@@ -81,9 +81,10 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-navigation-menu": "^1.2.4",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
-    "addsearch-js-client": "^0.8.11",
+    "addsearch-js-client": "^1.0.2",
     "array-flat-polyfill": "^1.0.1",
     "clsx": "^2.1.1",
     "dompurify": "^3.1.4",

package/tailwind.config.js

@@ -328,14 +328,48 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
-        fadeInTenPercent: {
+        "fade-in-ten-percent": {
           from: { opacity: 0 },
           to: { opacity: 0.1 },
         },
+        "fade-out-ten-percent": {
+          from: { opacity: 0.1 },
+          to: { opacity: 0 },
+        },
+        "scale-in": {
+          from: { opacity: "0", transform: "rotateX(-10deg) scale(0.9)" },
+          to: { opacity: "1", transform: "rotateX(0deg) scale(1)" },
+        },
+        "scale-out": {
+          from: { opacity: "1", transform: "rotateX(0deg) scale(1)" },
+          to: { opacity: "0", transform: "rotateX(-10deg) scale(0.95)" },
+        },
+        "enter-from-right": {
+          from: { opacity: "0", transform: "translateX(200px)" },
+          to: { opacity: "1", transform: "translateX(0)" },
+        },
+        "enter-from-left": {
+          from: { opacity: "0", transform: "translateX(-200px)" },
+          to: { opacity: "1", transform: "translateX(0)" },
+        },
+        "exit-to-right": {
+          from: { opacity: "1", transform: "translateX(0)" },
+          to: { opacity: "0", transform: "translateX(200px)" },
+        },
+        "exit-to-left": {
+          from: { opacity: "1", transform: "translateX(0)" },
+          to: { opacity: "0", transform: "translateX(-200px)" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "scale-in": "scale-in 200ms ease",
+        "scale-out": "scale-out 200ms ease",
+        "enter-from-left": "enter-from-left 250ms ease",
+        "enter-from-right": "enter-from-right 250ms ease",
+        "exit-to-left": "exit-to-left 250ms ease",
+        "exit-to-right": "exit-to-right 250ms ease",
       },
     },
     listStyleType: {