@ably/ui 15.3.3 → 15.3.4

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})=>{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"},headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-4 md:mr-16 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"}))),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"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"mr-12 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})=>{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")))};

package/core/Header.js

@@ -1 +1 @@
-import React,{useState,useEffect,useRef}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=[]})=>{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]);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"},searchButton,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})))),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 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;

package/core/ProductTile/ProductDescription.js

@@ -0,0 +1 @@
+import React from"react";import cn from"../utils/cn";const ProductDescription=({description,selected,unavailable,showDescription=true})=>{if(!description||!showDescription){return null}return React.createElement("p",{className:cn("ui-text-p3 font-medium leading-snug",{"text-neutral-300 dark:text-neutral-1000":selected&&!unavailable},{"text-neutral-700 dark:text-neutral-600":!selected})},description)};export default ProductDescription;

package/core/ProductTile/ProductIcon.js

@@ -0,0 +1 @@
+import React from"react";import Icon from"../Icon";import cn from"../utils/cn";const ProductIcon=({name,hoverName,selected,size,unavailable})=>{if(!name){return null}const innerSize=size-2;const iconSize=size/6*4;return React.createElement("div",{className:cn("p-1 bg-gradient-to-b",{"from-neutral-1000 to-neutral-1300 dark:from-neutral-000 dark:to-neutral-300":selected,"from-neutral-000 to-neutral-300 dark:from-neutral-1000 dark:to-neutral-1300":!selected}),style:{width:size,height:size,borderRadius:size/4}},React.createElement("div",{className:cn("flex items-center justify-center",{"bg-neutral-1200 dark:bg-neutral-100":selected,"bg-neutral-100 dark:bg-neutral-1200":!selected,"group-hover/product-tile:bg-neutral-000 dark:group-hover/product-tile:bg-neutral-1300":selected===false&&!unavailable}),style:{height:innerSize,borderRadius:size/4}},hoverName?React.createElement(Icon,{name:hoverName,size:`${iconSize}px`,additionalCSS:cn({"hidden group-hover/product-tile:flex":!selected,flex:selected})}):null,React.createElement(Icon,{name:name,size:`${iconSize}px`,additionalCSS:cn({"text-neutral-000 dark:text-neutral-1300":selected&&!unavailable,"text-neutral-1300 dark:text-neutral-000":!selected&&!unavailable,"text-neutral-700 dark:text-neutral-600":selected&&unavailable,"text-neutral-600 dark:text-neutral-700":!selected&&unavailable,"flex group-hover/product-tile:hidden":hoverName&&!selected,hidden:hoverName&&selected})})))};export default ProductIcon;

package/core/ProductTile/ProductLabel.js

@@ -0,0 +1 @@
+import React from"react";import cn from"../utils/cn";const LABEL_FONT_SIZE_RATIO=4;const DESCRIPTION_FONT_SIZE_RATIO=2.6;const ProductLabel=({label,unavailable,selected,numericalSize,showLabel})=>{if(!label||!showLabel){return null}return React.createElement("div",{className:"flex flex-col justify-center"},unavailable?React.createElement("div",null,React.createElement("div",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-widen-0.04 font-bold text-[8px] leading-snug"},"COMING SOON")):React.createElement("p",{className:cn("font-bold uppercase ui-text-p2",{"text-neutral-500 dark:text-neutral-700":selected},{"text-neutral-700 dark:text-neutral-500":!selected}),style:{fontSize:numericalSize/LABEL_FONT_SIZE_RATIO,letterSpacing:"0.06em"}},"Ably"),React.createElement("p",{className:cn("ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected!==false&&!unavailable},{"text-neutral-1000 dark:text-neutral-300":selected===false&&!unavailable},{"text-neutral-700 dark:text-neutral-600":selected===false&&unavailable},{"text-neutral-1300 dark:text-neutral-000":selected===undefined},{"mt-[-3px]":!unavailable}),style:{fontSize:numericalSize/DESCRIPTION_FONT_SIZE_RATIO}},label))};export default ProductLabel;

package/core/ProductTile/data.js

@@ -1 +1 @@
-export const products={pubsub:{label:"PubSub",description:"Low-level APIs to build any realtime experience",icon:"icon-product-pubsub",link:"/docs/products/channels"},chat:{label:"Chat",description:"Rapidly build chat features and roll-out at scale",icon:"icon-product-chat",link:"/docs/products/chat"},spaces:{label:"Spaces",description:"Create collaborative environments in a few lines of code",icon:"icon-product-spaces",link:"/docs/products/spaces"},liveSync:{label:"LiveSync",description:"Sync database changes with frontend clients",icon:"icon-product-livesync",link:"/docs/products/livesync"},assetTracking:{label:"Asset Tracking",description:"Simple APIs to build realtime tracking applications",icon:"icon-product-asset-tracking",link:"/docs/products/asset-tracking"},liveObjects:{label:"LiveObjects",description:"Sync application state across multiple devices",link:"/docs/products/asset-tracking",unavailable:true}};
+export const products={pubsub:{label:"Pub/Sub",description:"Low-level APIs to build any realtime experience",icon:"icon-product-pubsub-mono",hoverIcon:"icon-product-pubsub",link:"/docs/products/channels"},chat:{label:"Chat",description:"Rapidly build chat features and roll-out at scale",icon:"icon-product-chat-mono",hoverIcon:"icon-product-chat",link:"/docs/products/chat"},spaces:{label:"Spaces",description:"Create collaborative environments in a few lines of code",icon:"icon-product-spaces-mono",hoverIcon:"icon-product-spaces",link:"/docs/products/spaces"},liveSync:{label:"LiveSync",description:"Sync database changes with frontend clients",icon:"icon-product-livesync-mono",hoverIcon:"icon-product-livesync",link:"/docs/products/livesync"},assetTracking:{label:"Asset Tracking",description:"Simple APIs to build realtime tracking applications",icon:"icon-product-asset-tracking-mono",hoverIcon:"icon-product-asset-tracking",link:"/docs/products/asset-tracking"},liveObjects:{label:"LiveObjects",description:"Sync application state across multiple devices",icon:"icon-product-liveobjects-mono",hoverIcon:"icon-product-liveobjects",link:"/docs/products/asset-tracking",unavailable:true}};

package/core/ProductTile.js

@@ -1 +1 @@
-import React from"react";import EncapsulatedIcon from"./Icon/EncapsulatedIcon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";import cn from"./utils/cn";const ProductTile=({name,selected,currentPage,className,onClick})=>{const{icon,label,description,link,unavailable}=products[name]??{};return React.createElement("div",{className:cn("rounded-lg p-12 flex flex-col gap-8 transition-colors",{"bg-neutral-1200 dark:bg-neutral-100":selected},{"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100":!selected},{[`${className}`]:className}),onClick:onClick},React.createElement("div",{className:"flex gap-12 items-center"},icon?React.createElement(EncapsulatedIcon,{name:icon,className:selected?"from-neutral-900 dark:from-neutral-400":"from-neutral-400 dark:from-neutral-900",innerClassName:selected?"bg-neutral-1100 dark:bg-neutral-200":"bg-neutral-200 dark:bg-neutral-1100"}):null,React.createElement("div",{className:cn("flex",{"flex-row items-center gap-4":unavailable},{"flex-col justify-center":!unavailable})},React.createElement("p",{className:cn("font-medium",{"text-neutral-300 dark:text-neutral-1000":selected},{"text-neutral-1000 dark:text-neutral-300":!selected},{"ui-text-p2":unavailable},{"ui-text-p3":!unavailable})},"Ably"," "),React.createElement("p",{className:cn("ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected},{"text-neutral-1300 dark:text-neutral-000":!selected},{"mt-[-3px]":!unavailable})},label))),unavailable?React.createElement("div",{className:"-mt-8"},React.createElement("div",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-tighten-0.015 font-bold text-[8px] leading-snug"},"COMING SOON")):null,React.createElement("p",{className:cn("ui-text-p3 font-medium leading-snug",{"text-neutral-300 dark:text-neutral-1000":selected},{"text-neutral-800 dark:text-neutral-500":!selected})},description),selected&&link?React.createElement(FeaturedLink,{additionalCSS:"ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300",iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
+import React from"react";import cn from"./utils/cn";import LinkButton from"./LinkButton";import{products}from"./ProductTile/data";import ProductIcon from"./ProductTile/ProductIcon";import ProductLabel from"./ProductTile/ProductLabel";import ProductDescription from"./ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const ProductTile=({name,selected,currentPage,className,onClick,showDescription=true,showLabel=true,size="40px",animateIcons=false})=>{const{icon,hoverIcon,label,description,link,unavailable}=products[name]??{};const numericalSize=parseInt(size,10);const containerPresent=showDescription||showLabel;return React.createElement("div",{className:cn("transition-colors group/product-tile",{"flex flex-col p-12 rounded-lg gap-8":containerPresent},{"bg-neutral-1300 dark:bg-neutral-000":selected},{"bg-neutral-000 dark:bg-neutral-1300":!selected},{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":selected===false&&!unavailable},{"cursor-pointer":selected!==undefined&&!unavailable},{"pointer-events-none":unavailable},{[`${className}`]:className}),"aria-hidden":unavailable,onClick:onClick},React.createElement("div",{className:cn("items-center",{flex:containerPresent},{"inline-flex":!containerPresent}),style:{gap:containerPresent?numericalSize/CONTAINER_GAP_RATIO:0}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,selected:selected,unavailable:!!unavailable}),React.createElement(ProductLabel,{label:label,selected:selected,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel})),React.createElement(ProductDescription,{description:description,selected:selected,unavailable:!!unavailable,showDescription:showDescription}),selected&&link?React.createElement(LinkButton,{variant:"secondary",size:"xs",className:"mt-8 !text-neutral-000 dark:!text-neutral-1300",rightIcon:"icon-gui-arrow-right-micro",iconColor:"text-orange-600",href:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;

package/index.d.ts

@@ -444,7 +444,7 @@ 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">>;
+export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton">>;
 //# sourceMappingURL=HeaderLinks.d.ts.map
 }
 
@@ -454,47 +454,92 @@ export type ThemedScrollpoint = {
     id: string;
     className: string;
 };
+/**
+ * Props for the Header component.
+ */
 export type HeaderProps = {
+    /**
+     * Optional search bar element.
+     */
     searchBar?: ReactNode;
+    /**
+     * Optional search button element.
+     */
     searchButton?: ReactNode;
+    /**
+     * URL for the logo link.
+     */
     logoHref?: string;
+    /**
+     * Array of header links.
+     */
     headerLinks?: {
+        /**
+         * URL for the link.
+         */
         href: string;
+        /**
+         * Label for the link.
+         */
         label: string;
+        /**
+         * Indicates if the link should open in a new tab.
+         */
         external?: boolean;
     }[];
+    /**
+     * Optional desktop navigation element.
+     */
     nav?: ReactNode;
+    /**
+     * Optional mobile navigation element.
+     */
     mobileNav?: ReactNode;
+    /**
+     * State of the user session.
+     */
     sessionState?: {
+        /**
+         * Indicates if the user is signed in.
+         */
         signedIn: boolean;
+        /**
+         * Account information.
+         */
         account: {
+            /**
+             * Links related to the account.
+             */
             links: {
+                /**
+                 * Dashboard link information.
+                 */
                 dashboard: {
+                    /**
+                     * URL for the dashboard link.
+                     */
                     href: string;
                 };
             };
         };
     };
+    /**
+     * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.
+     */
     themedScrollpoints?: ThemedScrollpoint[];
+    /**
+     * Visibility setting for the search button.
+     * - "all": Visible on all devices.
+     * - "desktop": Visible only on desktop devices.
+     * - "mobile": Visible only on mobile devices.
+     */
+    searchButtonVisibility?: "all" | "desktop" | "mobile";
 };
 const Header: React.FC<HeaderProps>;
 export default Header;
 //# sourceMappingURL=Header.d.ts.map
 }
 
-declare module '@ably/ui/core/Icon/EncapsulatedIcon' {
-import { IconProps } from ".@ably/ui/core/Icon";
-import { IconSize } from "@ably/ui/core/types";
-type EncapsulatedIconProps = {
-    className?: string;
-    innerClassName?: string;
-    iconSize?: IconSize;
-} & IconProps;
-const EncapsulatedIcon: ({ size, iconSize, className, innerClassName, ...iconProps }: EncapsulatedIconProps) => import("react/jsx-runtime").JSX.Element;
-export default EncapsulatedIcon;
-//# sourceMappingURL=EncapsulatedIcon.d.ts.map
-}
-
 declare module '@ably/ui/core/Icon/computed-icons' {
 export const computedIcons: {
     display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api", "icon-display-api-keys", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-mono", "icon-display-chat-stack", "icon-display-chat-stack-col", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-recovery", "icon-display-consumer-groups", "icon-display-custom", "icon-display-custom-cname", "icon-display-customers-col", "icon-display-data-broadcast-col", "icon-display-data-broadcast-mono", "icon-display-data-synchronization-col", "icon-display-dedicated-cluster", "icon-display-deltas", "icon-display-docs-col", "icon-display-documentation", "icon-display-dynamic-channel-groups", "icon-display-edge-network", "icon-display-elasticity", "icon-display-equalisers-mono", "icon-display-events-col", "icon-display-exactly-once-delivery", "icon-display-examples-col", "icon-display-fan-out", "icon-display-firehose", "icon-display-gdpr", "icon-display-general-comms", "icon-display-granular-permissions", "icon-display-hipaa", "icon-display-hipaa-mono", "icon-display-history", "icon-display-integrations", "icon-display-integrations-col", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-multi-user-spaces-col", "icon-display-observe-analytics", "icon-display-padlock-closed", "icon-display-platform", "icon-display-play", "icon-display-premium-support", "icon-display-privacy-shield-framework", "icon-display-private-link", "icon-display-push-notifications", "icon-display-push-notifications-col", "icon-display-push-notifications-mono", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2", "icon-display-soc2-type2-mono", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events", "icon-display-virtual-events-col"];
@@ -1016,6 +1061,45 @@ export {};
 //# sourceMappingURL=types.d.ts.map
 }
 
+declare module '@ably/ui/core/ProductTile/ProductDescription' {
+type ProductDescriptionProps = {
+    description: string;
+    selected?: boolean;
+    unavailable: boolean;
+    showDescription?: boolean;
+};
+const ProductDescription: ({ description, selected, unavailable, showDescription, }: ProductDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ProductDescription;
+//# sourceMappingURL=ProductDescription.d.ts.map
+}
+
+declare module '@ably/ui/core/ProductTile/ProductIcon' {
+import { IconName } from ".@ably/ui/core/Icon/types";
+type ProductIconProps = {
+    name?: IconName;
+    hoverName?: IconName;
+    selected?: boolean;
+    size: number;
+    unavailable: boolean;
+};
+const ProductIcon: ({ name, hoverName, selected, size, unavailable, }: ProductIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ProductIcon;
+//# sourceMappingURL=ProductIcon.d.ts.map
+}
+
+declare module '@ably/ui/core/ProductTile/ProductLabel' {
+type ProductLabelProps = {
+    label: string;
+    unavailable: boolean;
+    selected?: boolean;
+    numericalSize: number;
+    showLabel?: boolean;
+};
+const ProductLabel: ({ label, unavailable, selected, numericalSize, showLabel, }: ProductLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ProductLabel;
+//# sourceMappingURL=ProductLabel.d.ts.map
+}
+
 declare module '@ably/ui/core/ProductTile/data' {
 import { IconName } from ".@ably/ui/core/Icon/types";
 export type ProductName = "pubsub" | "chat" | "spaces" | "liveSync" | "assetTracking" | "liveObjects";
@@ -1024,6 +1108,7 @@ type Products = Record<ProductName, {
     description: string;
     link?: string;
     icon?: IconName;
+    hoverIcon?: IconName;
     unavailable?: boolean;
 }>;
 export const products: Products;
@@ -1032,15 +1117,56 @@ export {};
 }
 
 declare module '@ably/ui/core/ProductTile' {
+import { IconSize } from "@ably/ui/core/Icon/types";
 import { ProductName } from "@ably/ui/core/ProductTile/data";
-type ProductTileProps = {
+/**
+ * Props for the ProductTile component.
+ */
+export type ProductTileProps = {
+    /**
+     * The name of the product.
+     */
     name: ProductName;
+    /**
+     * Indicates if the product tile is selected. If `undefined`, the product tile is not selectable.
+     * @default false
+     */
     selected?: boolean;
+    /**
+     * Indicates if the product tile is on the "current" page. Changes CTA copy.
+     * @default false
+     */
     currentPage?: boolean;
+    /**
+     * Additional CSS class names to apply to the product tile outer container.
+     */
     className?: string;
+    /**
+     * Callback function to handle click events on the product tile.
+     */
     onClick?: () => void;
+    /**
+     * Indicates if the product description should be shown.
+     * @default true
+     */
+    showDescription?: boolean;
+    /**
+     * Indicates if the product label should be shown.
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * The size of the product icon.
+     * @default "40px"
+     */
+    size?: IconSize;
+    /**
+     * Indicates if the product icons should be animated.
+     * @default false
+     */
+    animateIcons?: boolean;
 };
-const ProductTile: ({ name, selected, currentPage, className, onClick, }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
+const ProductTile: ({ name, selected, currentPage, className, onClick, showDescription, showLabel, size, animateIcons, }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductTile;
 //# sourceMappingURL=ProductTile.d.ts.map
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.3.3",
+  "version": "15.3.4",
   "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",
@@ -75,9 +75,9 @@
     "release": "./scripts/release.sh",
     "start": "vite --port 5000",
     "storybook": "yarn build && storybook dev -p 6006",
-    "build-storybook": "yarn build && storybook build --quiet -o preview --test",
-    "test": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
-    "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\""
+    "build-storybook": "yarn build && storybook build --quiet -o preview",
+    "test": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --test && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
+    "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --test && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\""
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.1",

package/core/Icon/EncapsulatedIcon.js

@@ -1 +0,0 @@
-import React from"react";import Icon from"../Icon";const ICON_SIZE_REDUCTION=12;const ICON_HEIGHT_REDUCTION=2;const EncapsulatedIcon=({size="40px",iconSize,className,innerClassName,...iconProps})=>{let computedIconSize=size,computedIconHeight=size;if(iconSize){computedIconSize=iconSize}else if(size.toString().endsWith("px")){const numericalSize=parseInt(size,10);computedIconSize=`${numericalSize-ICON_SIZE_REDUCTION}px`;computedIconHeight=`${numericalSize-ICON_HEIGHT_REDUCTION}px`}else{console.warn(`EncapsulatedIcon: Non-pixel units might not behave as expected`)}return React.createElement("div",{className:`p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b ${className??"from-neutral-400 dark:from-neutral-900"}`,style:{width:size,height:size}},React.createElement("div",{className:`flex items-center justify-center rounded-lg ${innerClassName??"bg-neutral-200 dark:bg-neutral-1100"}`,style:{height:computedIconHeight}},React.createElement(Icon,{size:computedIconSize,...iconProps})))};export default EncapsulatedIcon;