@ably/ui 17.8.0 → 17.9.1-dev.f8cf1684

package/core/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Slider.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  TouchEvent,\n  useCallback,\n} from \"react\";\nimport Icon from \"./Icon\";\n\ninterface SliderProps {\n  children: ReactNode[];\n  options?: {\n    interval?: number;\n    controlPosition?: \"inline\" | \"floating\";\n    intervalIndicator?: boolean;\n  };\n}\n\ninterface SliderIndicatorProps {\n  numSlides: number;\n  activeIndex: number;\n  interval: number;\n  intervalIndicator?: boolean;\n  isInline?: boolean;\n}\n\nconst SLIDE_TRANSITION_LENGTH = 300;\n\nconst SlideIndicator = ({\n  numSlides,\n  activeIndex,\n  interval,\n  intervalIndicator,\n  isInline,\n}: SliderIndicatorProps) => {\n  return (\n    <ul\n      className={`flex gap-1 left-1/2 ${\n        isInline ? \"bottom-0\" : \"absolute bottom-0 transform -translate-x-1/2\"\n      }`}\n    >\n      {Array.from({ length: numSlides }, (_, i) =>\n        intervalIndicator ? (\n          <li\n            key={i}\n            className=\"relative w-10 h-1 mx-px rounded-full bg-neutral-500\"\n          >\n            {i === activeIndex && (\n              <span\n                className=\"absolute inset-0 rounded-full bg-active-orange\"\n                style={{\n                  animation: `fillAnimation ${interval}ms linear`,\n                }}\n              ></span>\n            )}\n          </li>\n        ) : (\n          <li key={i}>\n            <span\n              className={`ui-slider-marker ${\n                i === activeIndex ? \"text-active-orange\" : \"text-cool-black\"\n              }`}\n              data-id=\"slider-marker\"\n            >\n              &#x2b24;\n            </span>\n          </li>\n        ),\n      )}\n    </ul>\n  );\n};\n\nconst setupSlides = (children: ReactNode[], activeIndex: number) => [\n  children[activeIndex === 0 ? children.length - 1 : activeIndex - 1],\n  children[activeIndex],\n  children[activeIndex === children.length - 1 ? 0 : activeIndex + 1],\n];\n\nconst Slider = ({ children, options }: SliderProps) => {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [slides, setSlides] = useState<ReactNode[]>(\n    setupSlides(children, activeIndex),\n  );\n  const [translationCoefficient, setTranslationCoefficient] = useState(0);\n  const timerRef = useRef<NodeJS.Timeout | null>(null);\n  const [slideLock, setSlideLock] = useState(false);\n\n  const isInline = options?.controlPosition === \"inline\";\n\n  const nextRef = useRef<() => void>();\n\n  const next = useCallback(() => {\n    if (!slideLock) {\n      setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);\n      setTranslationCoefficient(1);\n      setSlideLock(true);\n    }\n  }, [children.length, slideLock]);\n\n  const prev = useCallback(() => {\n    if (!slideLock) {\n      setActiveIndex((prevIndex) =>\n        prevIndex > 0 ? prevIndex - 1 : children.length - 1,\n      );\n      setTranslationCoefficient(-1);\n      setSlideLock(true);\n    }\n  }, [children.length, slideLock]);\n\n  // Update the ref whenever next changes\n  nextRef.current = next;\n\n  const resetInterval = useCallback(() => {\n    if (timerRef.current) clearInterval(timerRef.current);\n    timerRef.current = setInterval(() => {\n      if (nextRef.current) {\n        nextRef.current();\n      }\n    }, options?.interval ?? 10000);\n  }, [options?.interval]);\n\n  const handleTouchStart = (e: TouchEvent) => {\n    setTouchStartX(e.touches[0].clientX);\n  };\n\n  const handleTouchMove = (e: TouchEvent) => {\n    setTouchEndX(e.touches[0].clientX);\n  };\n\n  const handleTouchEnd = () => {\n    if (touchStartX - touchEndX > 50) {\n      next();\n      resetInterval();\n    }\n    if (touchStartX - touchEndX < -50) {\n      prev();\n      resetInterval();\n    }\n  };\n\n  useEffect(() => {\n    resetInterval();\n    return () => {\n      if (timerRef.current) clearInterval(timerRef.current);\n    };\n  }, [children.length, options?.interval, resetInterval]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setSlides(setupSlides(children, activeIndex));\n      setTranslationCoefficient(0);\n      setSlideLock(false);\n    }, SLIDE_TRANSITION_LENGTH);\n  }, [activeIndex, children]);\n\n  return (\n    <div\n      className=\"relative\"\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n    >\n      <div className=\"overflow-y-visible overflow-x-clip w-full py-10\">\n        <div\n          className={`flex items-center ${\n            translationCoefficient !== 0\n              ? `transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`\n              : \"\"\n          } `}\n          style={{\n            transform: `translateX(-${(translationCoefficient + 1) * 100}%)`,\n          }}\n        >\n          {slides.map((child, index) => (\n            <div\n              key={index}\n              className=\"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]\"\n            >\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div\n        className={`flex items-center pointer-events-none ${\n          isInline\n            ? \"ui-standard-container justify-center gap-6 -mt-4\"\n            : \"sm:flex sm:absolute inset-0 justify-between\"\n        }`}\n      >\n        <button\n          className={`${\n            isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}\n          onClick={() => {\n            prev();\n            resetInterval();\n          }}\n        >\n          <div className=\"ui-icon-cta-holder flex w-12\">\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n            </div>\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n            </div>\n          </div>\n        </button>\n\n        <SlideIndicator\n          numSlides={children.length}\n          activeIndex={activeIndex}\n          interval={options?.interval ?? 10000}\n          intervalIndicator={options?.intervalIndicator}\n          isInline={isInline}\n        />\n\n        <button\n          className={`${\n            isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}\n          onClick={() => {\n            next();\n            resetInterval();\n          }}\n        >\n          <div className=\"ui-icon-cta-holder flex w-12\">\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n            </div>\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n            </div>\n          </div>\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["React","useState","useEffect","useRef","useCallback","Icon","SLIDE_TRANSITION_LENGTH","SlideIndicator","numSlides","activeIndex","interval","intervalIndicator","isInline","ul","className","Array","from","length","_","i","li","key","span","style","animation","data-id","setupSlides","children","Slider","options","setActiveIndex","touchStartX","setTouchStartX","touchEndX","setTouchEndX","slides","setSlides","translationCoefficient","setTranslationCoefficient","timerRef","slideLock","setSlideLock","controlPosition","nextRef","next","prevIndex","prev","current","resetInterval","clearInterval","setInterval","handleTouchStart","e","touches","clientX","handleTouchMove","handleTouchEnd","setTimeout","div","onTouchStart","onTouchMove","onTouchEnd","transform","map","child","index","button","onClick","name","size"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Slider.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useEffect, useState } from \"react\";\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport Autoplay from \"embla-carousel-autoplay\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\n\ninterface SliderProps {\n  children: ReactNode[];\n  options?: {\n    interval?: number;\n    controlPosition?: \"inline\" | \"floating\";\n    intervalIndicator?: boolean;\n  };\n}\n\ninterface SliderIndicatorProps {\n  numSlides: number;\n  activeIndex: number;\n  interval: number;\n  intervalIndicator?: boolean;\n  isInline?: boolean;\n}\n\nconst SlideIndicator = ({\n  numSlides,\n  activeIndex,\n  interval,\n  intervalIndicator,\n  isInline,\n}: SliderIndicatorProps) => {\n  return (\n    <ul\n      className={cn(\n        \"flex gap-1 left-1/2\",\n        isInline ? \"bottom-0\" : \"absolute bottom-0 transform -translate-x-1/2\",\n      )}\n    >\n      {Array.from({ length: numSlides }, (_, i) =>\n        intervalIndicator ? (\n          <li\n            key={i}\n            className=\"relative w-10 h-1 mx-px rounded-full bg-neutral-500\"\n          >\n            {i === activeIndex && (\n              <span\n                className=\"absolute inset-0 rounded-full bg-active-orange\"\n                style={{\n                  animation: `fillAnimation ${interval}ms linear`,\n                }}\n              ></span>\n            )}\n          </li>\n        ) : (\n          <li key={i}>\n            <span\n              className={cn(\n                \"ui-slider-marker\",\n                i === activeIndex ? \"text-active-orange\" : \"text-cool-black\",\n              )}\n              data-id=\"slider-marker\"\n            >\n              &#x2b24;\n            </span>\n          </li>\n        ),\n      )}\n    </ul>\n  );\n};\n\nconst Slider = ({ children, options }: SliderProps) => {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const interval = options?.interval ?? 10000;\n  const isInline = options?.controlPosition === \"inline\";\n\n  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, duration: 30 }, [\n    Autoplay({ delay: interval, stopOnInteraction: false }),\n  ]);\n\n  const scrollPrev = useCallback(() => {\n    if (emblaApi) emblaApi.scrollPrev();\n  }, [emblaApi]);\n\n  const scrollNext = useCallback(() => {\n    if (emblaApi) emblaApi.scrollNext();\n  }, [emblaApi]);\n\n  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {\n    setActiveIndex(emblaApi.selectedScrollSnap());\n  }, []);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n\n    onSelect(emblaApi);\n    emblaApi.on(\"select\", onSelect).on(\"reInit\", onSelect);\n\n    return () => {\n      emblaApi.off(\"select\", onSelect).off(\"reInit\", onSelect);\n    };\n  }, [emblaApi, onSelect]);\n\n  return (\n    <div className=\"relative\">\n      <div className=\"overflow-hidden w-full py-10\" ref={emblaRef}>\n        <div className=\"flex\">\n          {children.map((child, index) => (\n            <div\n              key={index}\n              className=\"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]\"\n            >\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          \"flex items-center pointer-events-none\",\n          isInline\n            ? \"ui-standard-container justify-center gap-6 -mt-4\"\n            : \"sm:flex sm:absolute inset-0 justify-between\",\n        )}\n      >\n        <button\n          className={cn(\n            isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\",\n            \"pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left\",\n          )}\n          onClick={scrollPrev}\n        >\n          <div className=\"ui-icon-cta-holder flex w-12\">\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n            </div>\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n            </div>\n          </div>\n        </button>\n\n        <SlideIndicator\n          numSlides={children.length}\n          activeIndex={activeIndex}\n          interval={interval}\n          intervalIndicator={options?.intervalIndicator}\n          isInline={isInline}\n        />\n\n        <button\n          className={cn(\n            isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\",\n            \"pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right\",\n          )}\n          onClick={scrollNext}\n        >\n          <div\n            className={cn(\n              \"ui-icon-cta-holder flex w-12\",\n              isInline ? \"-ml-3.5\" : \"\",\n            )}\n          >\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n            </div>\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n            </div>\n          </div>\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["React","useCallback","useEffect","useState","useEmblaCarousel","Autoplay","Icon","cn","SlideIndicator","numSlides","activeIndex","interval","intervalIndicator","isInline","ul","className","Array","from","length","_","i","li","key","span","style","animation","data-id","Slider","children","options","setActiveIndex","controlPosition","emblaRef","emblaApi","loop","duration","delay","stopOnInteraction","scrollPrev","scrollNext","onSelect","selectedScrollSnap","on","off","div","ref","map","child","index","button","onClick","name","size"],"mappings":"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"}

package/core/TabMenu.js

@@ -1,2 +1,2 @@
-import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import{throttle}from"es-toolkit/compat";import cn from"./utils/cn";const DEFAULT_TAILWIND_ANIMATION_DURATION=150;const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,rootClassName,contentClassName,options})=>{const{defaultTabIndex=0,underline=true,animated:animatedOption=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[animated,setAnimated]=React.useState(false);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{if(animatedOption&&highlight.width>0){setTimeout(()=>{setAnimated(true)},DEFAULT_TAILWIND_ANIMATION_DURATION)}},[animatedOption,highlight.width]);useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};const tabTriggerContent=tab=>{if(!tab){return null}if(React.isValidElement(tab)||typeof tab==="string"){return tab}if(typeof tab==="object"&&"label"in tab){return tab.label}return null};return React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight},rootClassName)},React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>tab&&React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-6 md:px-5 px-4 py-4 ui-text-label1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"&&"disabled"in tab?tab.disabled:false},tabTriggerContent(tab))),React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[0.1875rem] w-6",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`,className:contentClassName},content)))};export default TabMenu;
+import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import{throttle}from"es-toolkit/compat";import cn from"./utils/cn";const DEFAULT_TAILWIND_ANIMATION_DURATION=150;const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,rootClassName,contentClassName,options})=>{const{defaultTabIndex=0,underline=true,animated:animatedOption=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[animated,setAnimated]=React.useState(false);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{if(animatedOption&&highlight.width>0){setTimeout(()=>{setAnimated(true)},DEFAULT_TAILWIND_ANIMATION_DURATION)}},[animatedOption,highlight.width]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};const tabTriggerContent=tab=>{if(!tab){return null}if(React.isValidElement(tab)||typeof tab==="string"){return tab}if(typeof tab==="object"&&"label"in tab){return tab.label}return null};return React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight},rootClassName)},React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>tab&&React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-6 md:px-5 px-4 py-4 ui-text-label1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"&&"disabled"in tab?tab.disabled:false},tabTriggerContent(tab))),React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[0.1875rem] w-6",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`,className:contentClassName},content)))};export default TabMenu;
 //# sourceMappingURL=TabMenu.js.map

package/core/TabMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/TabMenu.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport { throttle } from \"es-toolkit/compat\";\nimport cn from \"./utils/cn\";\n\ntype TabTriggerContent =\n  | string\n  | { label: string; disabled?: boolean }\n  | ReactNode;\n\n/**\n * Props for the TabMenu component.\n */\n\nexport type TabMenuProps = {\n  /**\n   * An array of tabs, which can be either a string or an object with a label and an optional disabled state.\n   */\n  tabs: TabTriggerContent[];\n\n  /**\n   * An optional array of React nodes representing the content for each tab.\n   */\n  contents?: ReactNode[];\n\n  /**\n   * An optional callback function that is called when a tab is clicked, receiving the index of the clicked tab.\n   */\n  tabOnClick?: (index: number) => void;\n\n  /**\n   * An optional class name to apply to each tab.\n   */\n  tabClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Root element.\n   */\n  rootClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Content element.\n   */\n  contentClassName?: string;\n\n  /**\n   * Optional configuration options for the TabMenu.\n   */\n  options?: {\n    /**\n     * The index of the tab that should be selected by default.\n     */\n    defaultTabIndex?: number;\n\n    /**\n     * Whether to show an underline below the selected tab.\n     */\n    underline?: boolean;\n\n    /**\n     * Whether to animate the transition between tabs.\n     */\n    animated?: boolean;\n\n    /**\n     * Whether the tab width should be flexible.\n     */\n    flexibleTabWidth?: boolean;\n\n    /**\n     * Whether the tab height should be flexible.\n     */\n    flexibleTabHeight?: boolean;\n  };\n};\n\nconst DEFAULT_TAILWIND_ANIMATION_DURATION = 150;\n\nconst TabMenu: React.FC<TabMenuProps> = ({\n  tabs = [],\n  contents = [],\n  tabOnClick,\n  tabClassName,\n  rootClassName,\n  contentClassName,\n  options,\n}) => {\n  const {\n    defaultTabIndex = 0,\n    underline = true,\n    animated: animatedOption = true,\n    flexibleTabWidth = false,\n    flexibleTabHeight = false,\n  } = options ?? {};\n\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [animated, setAnimated] = React.useState(false);\n  const [highlight, setHighlight] = React.useState({ offset: 0, width: 0 });\n\n  useEffect(() => {\n    if (animatedOption && highlight.width > 0) {\n      setTimeout(() => {\n        setAnimated(true);\n      }, DEFAULT_TAILWIND_ANIMATION_DURATION);\n    }\n  }, [animatedOption, highlight.width]);\n\n  useEffect(() => {\n    const handleResize = throttle(() => {\n      const activeTabElement =\n        listRef.current?.querySelector<HTMLButtonElement>(\n          `[data-state=\"active\"]`,\n        );\n\n      if (activeTabElement) {\n        updateHighlightDimensions(activeTabElement);\n      }\n    }, 100);\n\n    handleResize();\n\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  const updateHighlightDimensions = (element: HTMLButtonElement) => {\n    const { left: parentLeft } = listRef.current?.getBoundingClientRect() ?? {};\n    const { left, width } = element.getBoundingClientRect() ?? {};\n\n    setHighlight({\n      offset: (left ?? 0) - (parentLeft ?? 0),\n      width: width ?? 0,\n    });\n  };\n\n  const handleTabClick = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    tabOnClick?.(index);\n    updateHighlightDimensions(event.currentTarget as HTMLButtonElement);\n  };\n\n  const tabTriggerContent = (tab: TabTriggerContent) => {\n    if (!tab) {\n      return null;\n    }\n\n    if (React.isValidElement(tab) || typeof tab === \"string\") {\n      return tab;\n    }\n\n    if (typeof tab === \"object\" && \"label\" in tab) {\n      return tab.label;\n    }\n\n    return null;\n  };\n\n  return (\n    <Tabs.Root\n      defaultValue={`tab-${defaultTabIndex}`}\n      className={cn({ \"h-full\": flexibleTabHeight }, rootClassName)}\n    >\n      <Tabs.List\n        ref={listRef}\n        className={cn(\n          \"relative\",\n          {\n            \"flex border-b border-neutral-300 dark:border-neutral-1000\":\n              underline,\n          },\n          { \"h-full\": flexibleTabHeight },\n        )}\n      >\n        {tabs.map(\n          (tab, index) =>\n            tab && (\n              <Tabs.Trigger\n                key={`tab-${index}`}\n                className={cn(\n                  \"lg:px-6 md:px-5 px-4 py-4 ui-text-label1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed\",\n                  { \"flex-1\": flexibleTabWidth },\n                  { \"h-full\": flexibleTabHeight },\n                  tabClassName,\n                )}\n                value={`tab-${index}`}\n                onClick={(event) => handleTabClick(event, index)}\n                disabled={\n                  typeof tab === \"object\" && \"disabled\" in tab\n                    ? tab.disabled\n                    : false\n                }\n              >\n                {tabTriggerContent(tab)}\n              </Tabs.Trigger>\n            ),\n        )}\n        <div\n          className={cn(\n            \"absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[0.1875rem] w-6\",\n            { \"transition-[transform,width]\": animated },\n          )}\n          style={{\n            transform: `translateX(${highlight.offset}px)`,\n            width: `${highlight.width}px`,\n          }}\n        ></div>\n      </Tabs.List>\n      {contents.map((content, index) => (\n        <Tabs.Content\n          key={`tab-${index}`}\n          value={`tab-${index}`}\n          className={contentClassName}\n        >\n          {content}\n        </Tabs.Content>\n      ))}\n    </Tabs.Root>\n  );\n};\n\nexport default TabMenu;\n"],"names":["React","useEffect","Tabs","throttle","cn","DEFAULT_TAILWIND_ANIMATION_DURATION","TabMenu","tabs","contents","tabOnClick","tabClassName","rootClassName","contentClassName","options","defaultTabIndex","underline","animated","animatedOption","flexibleTabWidth","flexibleTabHeight","listRef","useRef","setAnimated","useState","highlight","setHighlight","offset","width","setTimeout","handleResize","activeTabElement","current","querySelector","updateHighlightDimensions","window","addEventListener","removeEventListener","element","left","parentLeft","getBoundingClientRect","handleTabClick","event","index","currentTarget","tabTriggerContent","tab","isValidElement","label","Root","defaultValue","className","List","ref","map","Trigger","key","value","onClick","disabled","div","style","transform","content","Content"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/TabMenu.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport { throttle } from \"es-toolkit/compat\";\nimport cn from \"./utils/cn\";\n\ntype TabTriggerContent =\n  | string\n  | { label: string; disabled?: boolean }\n  | ReactNode;\n\n/**\n * Props for the TabMenu component.\n */\n\nexport type TabMenuProps = {\n  /**\n   * An array of tabs, which can be either a string or an object with a label and an optional disabled state.\n   */\n  tabs: TabTriggerContent[];\n\n  /**\n   * An optional array of React nodes representing the content for each tab.\n   */\n  contents?: ReactNode[];\n\n  /**\n   * An optional callback function that is called when a tab is clicked, receiving the index of the clicked tab.\n   */\n  tabOnClick?: (index: number) => void;\n\n  /**\n   * An optional class name to apply to each tab.\n   */\n  tabClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Root element.\n   */\n  rootClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Content element.\n   */\n  contentClassName?: string;\n\n  /**\n   * Optional configuration options for the TabMenu.\n   */\n  options?: {\n    /**\n     * The index of the tab that should be selected by default.\n     */\n    defaultTabIndex?: number;\n\n    /**\n     * Whether to show an underline below the selected tab.\n     */\n    underline?: boolean;\n\n    /**\n     * Whether to animate the transition between tabs.\n     */\n    animated?: boolean;\n\n    /**\n     * Whether the tab width should be flexible.\n     */\n    flexibleTabWidth?: boolean;\n\n    /**\n     * Whether the tab height should be flexible.\n     */\n    flexibleTabHeight?: boolean;\n  };\n};\n\nconst DEFAULT_TAILWIND_ANIMATION_DURATION = 150;\n\nconst TabMenu: React.FC<TabMenuProps> = ({\n  tabs = [],\n  contents = [],\n  tabOnClick,\n  tabClassName,\n  rootClassName,\n  contentClassName,\n  options,\n}) => {\n  const {\n    defaultTabIndex = 0,\n    underline = true,\n    animated: animatedOption = true,\n    flexibleTabWidth = false,\n    flexibleTabHeight = false,\n  } = options ?? {};\n\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [animated, setAnimated] = React.useState(false);\n  const [highlight, setHighlight] = React.useState({ offset: 0, width: 0 });\n\n  useEffect(() => {\n    if (animatedOption && highlight.width > 0) {\n      setTimeout(() => {\n        setAnimated(true);\n      }, DEFAULT_TAILWIND_ANIMATION_DURATION);\n    }\n  }, [animatedOption, highlight.width]);\n\n  const updateHighlightDimensions = (element: HTMLButtonElement) => {\n    const { left: parentLeft } = listRef.current?.getBoundingClientRect() ?? {};\n    const { left, width } = element.getBoundingClientRect() ?? {};\n\n    setHighlight({\n      offset: (left ?? 0) - (parentLeft ?? 0),\n      width: width ?? 0,\n    });\n  };\n\n  useEffect(() => {\n    const handleResize = throttle(() => {\n      const activeTabElement =\n        listRef.current?.querySelector<HTMLButtonElement>(\n          `[data-state=\"active\"]`,\n        );\n\n      if (activeTabElement) {\n        updateHighlightDimensions(activeTabElement);\n      }\n    }, 100);\n\n    handleResize();\n\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  const handleTabClick = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    tabOnClick?.(index);\n    updateHighlightDimensions(event.currentTarget as HTMLButtonElement);\n  };\n\n  const tabTriggerContent = (tab: TabTriggerContent) => {\n    if (!tab) {\n      return null;\n    }\n\n    if (React.isValidElement(tab) || typeof tab === \"string\") {\n      return tab;\n    }\n\n    if (typeof tab === \"object\" && \"label\" in tab) {\n      return tab.label;\n    }\n\n    return null;\n  };\n\n  return (\n    <Tabs.Root\n      defaultValue={`tab-${defaultTabIndex}`}\n      className={cn({ \"h-full\": flexibleTabHeight }, rootClassName)}\n    >\n      <Tabs.List\n        ref={listRef}\n        className={cn(\n          \"relative\",\n          {\n            \"flex border-b border-neutral-300 dark:border-neutral-1000\":\n              underline,\n          },\n          { \"h-full\": flexibleTabHeight },\n        )}\n      >\n        {tabs.map(\n          (tab, index) =>\n            tab && (\n              <Tabs.Trigger\n                key={`tab-${index}`}\n                className={cn(\n                  \"lg:px-6 md:px-5 px-4 py-4 ui-text-label1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed\",\n                  { \"flex-1\": flexibleTabWidth },\n                  { \"h-full\": flexibleTabHeight },\n                  tabClassName,\n                )}\n                value={`tab-${index}`}\n                onClick={(event) => handleTabClick(event, index)}\n                disabled={\n                  typeof tab === \"object\" && \"disabled\" in tab\n                    ? tab.disabled\n                    : false\n                }\n              >\n                {tabTriggerContent(tab)}\n              </Tabs.Trigger>\n            ),\n        )}\n        <div\n          className={cn(\n            \"absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[0.1875rem] w-6\",\n            { \"transition-[transform,width]\": animated },\n          )}\n          style={{\n            transform: `translateX(${highlight.offset}px)`,\n            width: `${highlight.width}px`,\n          }}\n        ></div>\n      </Tabs.List>\n      {contents.map((content, index) => (\n        <Tabs.Content\n          key={`tab-${index}`}\n          value={`tab-${index}`}\n          className={contentClassName}\n        >\n          {content}\n        </Tabs.Content>\n      ))}\n    </Tabs.Root>\n  );\n};\n\nexport default TabMenu;\n"],"names":["React","useEffect","Tabs","throttle","cn","DEFAULT_TAILWIND_ANIMATION_DURATION","TabMenu","tabs","contents","tabOnClick","tabClassName","rootClassName","contentClassName","options","defaultTabIndex","underline","animated","animatedOption","flexibleTabWidth","flexibleTabHeight","listRef","useRef","setAnimated","useState","highlight","setHighlight","offset","width","setTimeout","updateHighlightDimensions","element","left","parentLeft","current","getBoundingClientRect","handleResize","activeTabElement","querySelector","window","addEventListener","removeEventListener","handleTabClick","event","index","currentTarget","tabTriggerContent","tab","isValidElement","label","Root","defaultValue","className","List","ref","map","Trigger","key","value","onClick","disabled","div","style","transform","content","Content"],"mappings":"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"}

package/core/Tooltip.js

@@ -1,2 +1,2 @@
-import React,{useRef,useState,useEffect}from"react";import{createPortal}from"react-dom";import Icon from"./Icon";import cn from"./utils/cn";const Tooltip=({children,triggerElement,triggerProps,tooltipProps,interactive=false,iconSize="1rem",...rest})=>{const[open,setOpen]=useState(false);const[fadeOut,setFadeOut]=useState(false);const[position,setPosition]=useState({x:0,y:0,orientation:"top"});const offset=8;const reference=useRef(null);const floating=useRef(null);const fadeOutTimeoutRef=useRef(null);useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();const viewportWidth=window.innerWidth;const viewportHeight=window.innerHeight;let orientation="top";if(floatingRect&&referenceRect){let x=referenceRect.left+referenceRect.width/2-floatingRect.width/2+window.scrollX;let y=referenceRect.top-floatingRect.height-offset+window.scrollY;if(x+floatingRect.width>viewportWidth+window.scrollX){x=viewportWidth+window.scrollX-floatingRect.width-offset;orientation="left"}if(x<window.scrollX){x=window.scrollX+offset;orientation="right"}if(y<window.scrollY){y=referenceRect.bottom+offset+window.scrollY;orientation="bottom"}if(y+floatingRect.height>viewportHeight+window.scrollY){y=referenceRect.top-floatingRect.height-offset+window.scrollY}setPosition({x,y,orientation})}}else{setPosition({x:0,y:0,orientation:"top"})}return()=>{if(fadeOutTimeoutRef.current!==null){clearTimeout(fadeOutTimeoutRef.current)}}},[open]);const initiateFadeOut=()=>{setFadeOut(true);fadeOutTimeoutRef.current=setTimeout(()=>{setOpen(false);setFadeOut(false)},250)};const cursorTowardsTooltip=(event,ref)=>{if(!ref.current){return false}const{clientX,clientY}=event;const{x,y,width,height}=ref.current.getBoundingClientRect();const{orientation}=position;switch(orientation){case"top":return clientX>=x&&clientX<=x+width&&clientY<y;case"left":return clientY>=y&&clientY<=y+height&&clientX<x;case"right":return clientY>=y&&clientY<=y+height&&clientX>x+width;case"bottom":return clientX>=x&&clientX<=x+width&&clientY>y+height;default:return false}};const fadeOutIfNotWithinTrigger=event=>{if(!reference.current)return;const{clientX,clientY}=event;const{x,y,width,height}=reference.current.getBoundingClientRect();const withinBounds=clientX>=x&&clientX<=x+width&&clientY>=y&&clientY<=y+height;if(!withinBounds){initiateFadeOut()}};return React.createElement("div",{...rest,className:cn("inline-flex ml-2",rest?.className)},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:event=>{if(!interactive||!cursorTowardsTooltip(event,reference)){initiateFadeOut()}},type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:cn("p-0 relative focus:outline-none h-[1rem]",triggerProps?.className)},triggerElement??React.createElement(Icon,{name:"icon-gui-information-circle-outline",color:"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1000 dark:hover:text-neutral-300",size:iconSize})),open?createPortal(React.createElement("div",{role:"tooltip",ref:floating,onMouseLeave:event=>setTimeout(()=>fadeOutIfNotWithinTrigger(event),250),style:{top:position.y,left:position.x,zIndex:1e3,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:cn("bg-neutral-300 dark:bg-neutral-1000 text-neutral-1100 dark:text-neutral-200 ui-text-p3 font-medium p-4",{"pointer-events-none":!interactive},"rounded-lg absolute",tooltipProps?.className,{"animate-[tooltipExit_0.25s_ease-in-out]":fadeOut},{"animate-[tooltipEntry_0.25s_ease-in-out]":!fadeOut})},React.createElement("div",{className:"max-w-60 w-auto"},children)),document.body):null)};export default Tooltip;
+import React from"react";import*as RadixTooltip from"@radix-ui/react-tooltip";import Icon from"./Icon";import cn from"./utils/cn";const Tooltip=({children,triggerElement,triggerProps,contentProps,rootProps,interactive=false,iconSize="1rem",...rest})=>{return React.createElement("div",{...rest,className:cn("inline-flex ml-2",rest?.className)},React.createElement(RadixTooltip.Provider,{delayDuration:0},React.createElement(RadixTooltip.Root,{...!interactive?{disableHoverableContent:true}:{},...rootProps},React.createElement(RadixTooltip.Trigger,{asChild:true},React.createElement("button",{type:"button",...triggerProps,className:cn("p-0 relative focus:outline-none h-[1rem]",triggerProps?.className)},triggerElement??React.createElement(Icon,{name:"icon-gui-information-circle-outline",color:"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1000 dark:hover:text-neutral-300",size:iconSize}))),React.createElement(RadixTooltip.Portal,null,React.createElement(RadixTooltip.Content,{sideOffset:8,...contentProps,className:cn("bg-neutral-300 dark:bg-neutral-1000 text-neutral-1100 dark:text-neutral-200 ui-text-p3 font-medium p-4",{"pointer-events-auto":interactive},"rounded-lg shadow-[4px_4px_15px_rgba(0,0,0,0.2)] z-[1000]","data-[state=closed]:animate-[tooltipExit_0.25s_ease-in-out]","data-[state=delayed-open]:animate-[tooltipEntry_0.25s_ease-in-out]",contentProps?.className)},React.createElement("div",{className:"max-w-60 w-auto"},children))))))};export default Tooltip;
 //# sourceMappingURL=Tooltip.js.map

package/core/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Tooltip.tsx"],"sourcesContent":["import React, {\n  ButtonHTMLAttributes,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactNode,\n  useRef,\n  useState,\n  MouseEvent,\n  RefObject,\n  useEffect,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\n\ntype TooltipProps = {\n  triggerElement?: ReactNode;\n  triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n  tooltipProps?: HTMLAttributes<HTMLDivElement>;\n  interactive?: boolean;\n  iconSize?: IconSize;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Tooltip = ({\n  children,\n  triggerElement,\n  triggerProps,\n  tooltipProps,\n  interactive = false,\n  iconSize = \"1rem\",\n  ...rest\n}: PropsWithChildren<TooltipProps>) => {\n  const [open, setOpen] = useState(false);\n  const [fadeOut, setFadeOut] = useState(false);\n  const [position, setPosition] = useState({ x: 0, y: 0, orientation: \"top\" });\n  const offset = 8;\n  const reference = useRef<HTMLButtonElement>(null);\n  const floating = useRef<HTMLDivElement>(null);\n  const fadeOutTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    if (open) {\n      const floatingRect = floating.current?.getBoundingClientRect();\n      const referenceRect = reference.current?.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n      let orientation = \"top\";\n\n      if (floatingRect && referenceRect) {\n        let x =\n          referenceRect.left +\n          referenceRect.width / 2 -\n          floatingRect.width / 2 +\n          window.scrollX;\n        let y =\n          referenceRect.top - floatingRect.height - offset + window.scrollY;\n\n        // Adjust if tooltip goes off the right edge\n        if (x + floatingRect.width > viewportWidth + window.scrollX) {\n          x = viewportWidth + window.scrollX - floatingRect.width - offset;\n          orientation = \"left\";\n        }\n\n        // Adjust if tooltip goes off the left edge\n        if (x < window.scrollX) {\n          x = window.scrollX + offset;\n          orientation = \"right\";\n        }\n\n        // Adjust if tooltip goes off the top edge\n        if (y < window.scrollY) {\n          y = referenceRect.bottom + offset + window.scrollY;\n          orientation = \"bottom\";\n        }\n\n        // Adjust if tooltip goes off the bottom edge\n        if (y + floatingRect.height > viewportHeight + window.scrollY) {\n          y = referenceRect.top - floatingRect.height - offset + window.scrollY;\n        }\n\n        setPosition({ x, y, orientation });\n      }\n    } else {\n      setPosition({ x: 0, y: 0, orientation: \"top\" });\n    }\n\n    return () => {\n      if (fadeOutTimeoutRef.current !== null) {\n        clearTimeout(fadeOutTimeoutRef.current);\n      }\n    };\n  }, [open]);\n\n  const initiateFadeOut = () => {\n    setFadeOut(true);\n    fadeOutTimeoutRef.current = setTimeout(() => {\n      setOpen(false);\n      setFadeOut(false);\n    }, 250);\n  };\n\n  const cursorTowardsTooltip = (\n    event: MouseEvent,\n    ref: RefObject<HTMLButtonElement>,\n  ) => {\n    if (!ref.current) {\n      return false;\n    }\n\n    const { clientX, clientY } = event;\n    const { x, y, width, height } = ref.current.getBoundingClientRect();\n    const { orientation } = position;\n\n    switch (orientation) {\n      case \"top\":\n        return clientX >= x && clientX <= x + width && clientY < y;\n      case \"left\":\n        return clientY >= y && clientY <= y + height && clientX < x;\n      case \"right\":\n        return clientY >= y && clientY <= y + height && clientX > x + width;\n      case \"bottom\":\n        return clientX >= x && clientX <= x + width && clientY > y + height;\n      default:\n        return false;\n    }\n  };\n\n  const fadeOutIfNotWithinTrigger = (event: MouseEvent) => {\n    if (!reference.current) return;\n\n    const { clientX, clientY } = event;\n    const { x, y, width, height } = reference.current.getBoundingClientRect();\n    const withinBounds =\n      clientX >= x &&\n      clientX <= x + width &&\n      clientY >= y &&\n      clientY <= y + height;\n\n    if (!withinBounds) {\n      initiateFadeOut();\n    }\n  };\n\n  return (\n    <div {...rest} className={cn(\"inline-flex ml-2\", rest?.className)}>\n      <button\n        onMouseEnter={() => setOpen(true)}\n        onMouseLeave={(event) => {\n          if (!interactive || !cursorTowardsTooltip(event, reference)) {\n            initiateFadeOut();\n          }\n        }}\n        type=\"button\"\n        ref={reference}\n        aria-describedby=\"tooltip\"\n        {...triggerProps}\n        className={cn(\n          \"p-0 relative focus:outline-none h-[1rem]\",\n          triggerProps?.className,\n        )}\n      >\n        {triggerElement ?? (\n          <Icon\n            name=\"icon-gui-information-circle-outline\"\n            color=\"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1000 dark:hover:text-neutral-300\"\n            size={iconSize}\n          />\n        )}\n      </button>\n\n      {open\n        ? createPortal(\n            <div\n              role=\"tooltip\"\n              ref={floating}\n              onMouseLeave={(event) =>\n                setTimeout(() => fadeOutIfNotWithinTrigger(event), 250)\n              }\n              style={{\n                top: position.y,\n                left: position.x,\n                zIndex: 1000,\n                boxShadow: \"4px 4px 15px rgba(0, 0, 0, 0.2)\",\n              }}\n              {...tooltipProps}\n              className={cn(\n                \"bg-neutral-300 dark:bg-neutral-1000 text-neutral-1100 dark:text-neutral-200 ui-text-p3 font-medium p-4\",\n                { \"pointer-events-none\": !interactive },\n                \"rounded-lg absolute\",\n                tooltipProps?.className,\n                { \"animate-[tooltipExit_0.25s_ease-in-out]\": fadeOut },\n                { \"animate-[tooltipEntry_0.25s_ease-in-out]\": !fadeOut },\n              )}\n            >\n              <div className=\"max-w-60 w-auto\">{children}</div>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n\nexport default Tooltip;\n"],"names":["React","useRef","useState","useEffect","createPortal","Icon","cn","Tooltip","children","triggerElement","triggerProps","tooltipProps","interactive","iconSize","rest","open","setOpen","fadeOut","setFadeOut","position","setPosition","x","y","orientation","offset","reference","floating","fadeOutTimeoutRef","floatingRect","current","getBoundingClientRect","referenceRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","left","width","scrollX","top","height","scrollY","bottom","clearTimeout","initiateFadeOut","setTimeout","cursorTowardsTooltip","event","ref","clientX","clientY","fadeOutIfNotWithinTrigger","withinBounds","div","className","button","onMouseEnter","onMouseLeave","type","aria-describedby","name","color","size","role","style","zIndex","boxShadow","document","body"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Tooltip.tsx"],"sourcesContent":["import React, {\n  ButtonHTMLAttributes,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactNode,\n} from \"react\";\nimport * as RadixTooltip from \"@radix-ui/react-tooltip\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\n\ntype TooltipProps = {\n  triggerElement?: ReactNode;\n  triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n  contentProps?: RadixTooltip.TooltipContentProps &\n    HTMLAttributes<HTMLDivElement>;\n  rootProps?: RadixTooltip.TooltipProps;\n  interactive?: boolean;\n  iconSize?: IconSize;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Tooltip = ({\n  children,\n  triggerElement,\n  triggerProps,\n  contentProps,\n  rootProps,\n  interactive = false,\n  iconSize = \"1rem\",\n  ...rest\n}: PropsWithChildren<TooltipProps>) => {\n  return (\n    <div {...rest} className={cn(\"inline-flex ml-2\", rest?.className)}>\n      <RadixTooltip.Provider delayDuration={0}>\n        <RadixTooltip.Root\n          {...(!interactive ? { disableHoverableContent: true } : {})}\n          {...rootProps}\n        >\n          <RadixTooltip.Trigger asChild>\n            <button\n              type=\"button\"\n              {...triggerProps}\n              className={cn(\n                \"p-0 relative focus:outline-none h-[1rem]\",\n                triggerProps?.className,\n              )}\n            >\n              {triggerElement ?? (\n                <Icon\n                  name=\"icon-gui-information-circle-outline\"\n                  color=\"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1000 dark:hover:text-neutral-300\"\n                  size={iconSize}\n                />\n              )}\n            </button>\n          </RadixTooltip.Trigger>\n          <RadixTooltip.Portal>\n            <RadixTooltip.Content\n              sideOffset={8}\n              {...contentProps}\n              className={cn(\n                \"bg-neutral-300 dark:bg-neutral-1000 text-neutral-1100 dark:text-neutral-200 ui-text-p3 font-medium p-4\",\n                { \"pointer-events-auto\": interactive },\n                \"rounded-lg shadow-[4px_4px_15px_rgba(0,0,0,0.2)] z-[1000]\",\n                \"data-[state=closed]:animate-[tooltipExit_0.25s_ease-in-out]\",\n                \"data-[state=delayed-open]:animate-[tooltipEntry_0.25s_ease-in-out]\",\n                contentProps?.className,\n              )}\n            >\n              <div className=\"max-w-60 w-auto\">{children}</div>\n            </RadixTooltip.Content>\n          </RadixTooltip.Portal>\n        </RadixTooltip.Root>\n      </RadixTooltip.Provider>\n    </div>\n  );\n};\n\nexport default Tooltip;\n"],"names":["React","RadixTooltip","Icon","cn","Tooltip","children","triggerElement","triggerProps","contentProps","rootProps","interactive","iconSize","rest","div","className","Provider","delayDuration","Root","disableHoverableContent","Trigger","asChild","button","type","name","color","size","Portal","Content","sideOffset"],"mappings":"AAAA,OAAOA,UAKA,OAAQ,AACf,WAAYC,iBAAkB,yBAA0B,AACxD,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CAa5B,MAAMC,QAAU,CAAC,CACfC,QAAQ,CACRC,cAAc,CACdC,YAAY,CACZC,YAAY,CACZC,SAAS,CACTC,YAAc,KAAK,CACnBC,SAAW,MAAM,CACjB,GAAGC,KAC6B,IAChC,OACE,oBAACC,OAAK,GAAGD,IAAI,CAAEE,UAAWX,GAAG,mBAAoBS,MAAME,YACrD,oBAACb,aAAac,QAAQ,EAACC,cAAe,GACpC,oBAACf,aAAagB,IAAI,EACf,GAAI,CAACP,YAAc,CAAEQ,wBAAyB,IAAK,EAAI,CAAC,CAAC,CACzD,GAAGT,SAAS,EAEb,oBAACR,aAAakB,OAAO,EAACC,QAAAA,MACpB,oBAACC,UACCC,KAAK,SACJ,GAAGf,YAAY,CAChBO,UAAWX,GACT,2CACAI,cAAcO,YAGfR,gBACC,oBAACJ,MACCqB,KAAK,sCACLC,MAAM,6FACNC,KAAMd,aAKd,oBAACV,aAAayB,MAAM,MAClB,oBAACzB,aAAa0B,OAAO,EACnBC,WAAY,EACX,GAAGpB,YAAY,CAChBM,UAAWX,GACT,yGACA,CAAE,sBAAuBO,WAAY,EACrC,4DACA,8DACA,qEACAF,cAAcM,YAGhB,oBAACD,OAAIC,UAAU,mBAAmBT,cAOhD,CAEA,gBAAeD,OAAQ"}

package/index.d.ts

@@ -321,37 +321,28 @@ type ApiKeySelectorProps = {
     selectedApiKey: string;
     onApiKeyChange: (apiKey: string) => void;
 };
-const ApiKeySelector: {
-    ({ apiKeys, selectedApiKey, onApiKeyChange, }: ApiKeySelectorProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+const ApiKeySelector: ({ apiKeys, selectedApiKey, onApiKeyChange, }: ApiKeySelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default ApiKeySelector;
 //# sourceMappingURL=ApiKeySelector.d.ts.map
 }
 
 declare module '@ably/ui/core/CodeSnippet/CopyButton' {
-import React from "react";
 type CopyButtonProps = {
     onCopy: () => void;
-    isCopied: boolean;
     tooltip?: string;
 };
-/**
- * A reusable copy button component with tooltip and copied indicator
- */
-const CopyButton: React.MemoExoticComponent<({ onCopy, isCopied, tooltip }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element>;
+const CopyButton: ({ onCopy, tooltip }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default CopyButton;
 //# sourceMappingURL=CopyButton.d.ts.map
 }
 
 declare module '@ably/ui/core/CodeSnippet/LanguageSelector' {
-import React from "react";
 type LanguageSelectorProps = {
     languages: string[];
     activeLanguage: string;
     onLanguageChange: (language: string) => void;
 };
-const LanguageSelector: React.MemoExoticComponent<({ languages, activeLanguage, onLanguageChange }: LanguageSelectorProps) => import("react/jsx-runtime").JSX.Element>;
+const LanguageSelector: ({ languages, activeLanguage, onLanguageChange, }: LanguageSelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default LanguageSelector;
 //# sourceMappingURL=LanguageSelector.d.ts.map
 }
@@ -365,29 +356,29 @@ type PlainCodeViewProps = {
     icon: IconName | null;
     className?: string;
 };
-const _default: React.NamedExoticComponent<PlainCodeViewProps>;
-export default _default;
+const PlainCodeView: React.FC<PlainCodeViewProps>;
+export default PlainCodeView;
 //# sourceMappingURL=PlainCodeView.d.ts.map
 }
 
 declare module '@ably/ui/core/CodeSnippet/TooltipButton' {
 import React from "react";
+import { SegmentedControlSize } from ".@ably/ui/core/SegmentedControl";
 import { IconName } from ".@ably/ui/core/Icon/types";
+import type { TooltipProps } from "@radix-ui/react-tooltip";
 type TooltipButtonProps = {
-    tooltip: string;
+    tooltip: string | React.ReactNode;
     active?: boolean;
     onClick: () => void;
     icon?: IconName;
     className?: string;
     children?: React.ReactNode;
     variant?: "segmented" | "icon-button";
-    size?: "sm" | "md";
+    size?: SegmentedControlSize;
     alwaysShowLabel?: boolean;
+    tooltipRootProps?: TooltipProps;
 };
-/**
- * A unified tooltip button component that can render either a segmented control or an icon button
- */
-const TooltipButton: React.MemoExoticComponent<({ tooltip, active, onClick, icon, className, children, variant, size, alwaysShowLabel, }: TooltipButtonProps) => import("react/jsx-runtime").JSX.Element>;
+const TooltipButton: ({ tooltip, active, onClick, icon, className, children, variant, size, alwaysShowLabel, tooltipRootProps, }: TooltipButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default TooltipButton;
 //# sourceMappingURL=TooltipButton.d.ts.map
 }
@@ -5902,15 +5893,17 @@ export default Toggle;
 
 declare module '@ably/ui/core/Tooltip' {
 import { ButtonHTMLAttributes, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
 import { IconSize } from "@ably/ui/core/Icon/types";
 type TooltipProps = {
     triggerElement?: ReactNode;
     triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;
-    tooltipProps?: HTMLAttributes<HTMLDivElement>;
+    contentProps?: RadixTooltip.TooltipContentProps & HTMLAttributes<HTMLDivElement>;
+    rootProps?: RadixTooltip.TooltipProps;
     interactive?: boolean;
     iconSize?: IconSize;
 } & HTMLAttributes<HTMLDivElement>;
-const Tooltip: ({ children, triggerElement, triggerProps, tooltipProps, interactive, iconSize, ...rest }: PropsWithChildren<TooltipProps>) => import("react/jsx-runtime").JSX.Element;
+const Tooltip: ({ children, triggerElement, triggerProps, contentProps, rootProps, interactive, iconSize, ...rest }: PropsWithChildren<TooltipProps>) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;
 //# sourceMappingURL=Tooltip.d.ts.map
 }
@@ -6242,24 +6235,6 @@ export function registerDefaultLanguages(register: any): void;
 //# sourceMappingURL=syntax-highlighter.d.ts.map
 }
 
-declare module '@ably/ui/core/utils/useCopyToClipboard' {
-interface CopyToClipboardState {
-    isCopied: boolean;
-    error: Error | null;
-}
-interface CopyToClipboardReturn extends CopyToClipboardState {
-    copy: (text: string) => Promise<boolean>;
-}
-/**
- * A hook that provides copy-to-clipboard functionality with state management
- * @param copiedTimeout - How long to show the copied state in ms before resetting
- * @returns Object with isCopied state, any error, and copy function
- */
-function useCopyToClipboard(copiedTimeout?: number): CopyToClipboardReturn;
-export default useCopyToClipboard;
-//# sourceMappingURL=useCopyToClipboard.d.ts.map
-}
-
 declare module '@ably/ui/reset/scripts' {
 export {};
 //# sourceMappingURL=scripts.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.8.0",
+  "version": "17.9.1-dev.f8cf1684",
   "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",
@@ -44,7 +44,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^6.1.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-perf": "^3.3.3",
     "eslint-plugin-storybook": "^9.1.4",
     "heroicons": "^2.2.0",
@@ -67,13 +67,18 @@
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-navigation-menu": "^1.2.4",
     "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "array-flat-polyfill": "^1.0.1",
     "clsx": "^2.1.1",
     "dompurify": "^3.2.4",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "es-toolkit": "^1.39.10",
     "highlight.js": "^11.11.1",
     "highlightjs-curl": "^1.3.0",

package/core/utils/useCopyToClipboard.js

@@ -1,2 +0,0 @@
-import{useState,useCallback}from"react";function useCopyToClipboard(copiedTimeout=2e3){const[state,setState]=useState({isCopied:false,error:null});const copy=useCallback(async text=>{try{await navigator.clipboard.writeText(text);setState({isCopied:true,error:null});setTimeout(()=>{setState(prev=>({...prev,isCopied:false}))},copiedTimeout);return true}catch(error){setState({isCopied:false,error:error instanceof Error?error:new Error(String(error))});return false}},[copiedTimeout]);return{...state,copy}}export default useCopyToClipboard;
-//# sourceMappingURL=useCopyToClipboard.js.map

package/core/utils/useCopyToClipboard.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/utils/useCopyToClipboard.ts"],"sourcesContent":["import { useState, useCallback } from \"react\";\n\ninterface CopyToClipboardState {\n  isCopied: boolean;\n  error: Error | null;\n}\n\ninterface CopyToClipboardReturn extends CopyToClipboardState {\n  copy: (text: string) => Promise<boolean>;\n}\n\n/**\n * A hook that provides copy-to-clipboard functionality with state management\n * @param copiedTimeout - How long to show the copied state in ms before resetting\n * @returns Object with isCopied state, any error, and copy function\n */\nfunction useCopyToClipboard(copiedTimeout = 2000): CopyToClipboardReturn {\n  const [state, setState] = useState<CopyToClipboardState>({\n    isCopied: false,\n    error: null,\n  });\n\n  const copy = useCallback(\n    async (text: string): Promise<boolean> => {\n      try {\n        await navigator.clipboard.writeText(text);\n        setState({ isCopied: true, error: null });\n\n        // Reset the copied state after timeout\n        setTimeout(() => {\n          setState((prev) => ({ ...prev, isCopied: false }));\n        }, copiedTimeout);\n\n        return true;\n      } catch (error) {\n        setState({\n          isCopied: false,\n          error: error instanceof Error ? error : new Error(String(error)),\n        });\n        return false;\n      }\n    },\n    [copiedTimeout],\n  );\n\n  return { ...state, copy };\n}\n\nexport default useCopyToClipboard;\n"],"names":["useState","useCallback","useCopyToClipboard","copiedTimeout","state","setState","isCopied","error","copy","text","navigator","clipboard","writeText","setTimeout","prev","Error","String"],"mappings":"AAAA,OAASA,QAAQ,CAAEC,WAAW,KAAQ,OAAQ,CAgB9C,SAASC,mBAAmBC,cAAgB,GAAI,EAC9C,KAAM,CAACC,MAAOC,SAAS,CAAGL,SAA+B,CACvDM,SAAU,MACVC,MAAO,IACT,GAEA,MAAMC,KAAOP,YACX,MAAOQ,OACL,GAAI,CACF,MAAMC,UAAUC,SAAS,CAACC,SAAS,CAACH,MACpCJ,SAAS,CAAEC,SAAU,KAAMC,MAAO,IAAK,GAGvCM,WAAW,KACTR,SAAS,AAACS,MAAU,CAAA,CAAE,GAAGA,IAAI,CAAER,SAAU,KAAM,CAAA,EACjD,EAAGH,eAEH,OAAO,IACT,CAAE,MAAOI,MAAO,CACdF,SAAS,CACPC,SAAU,MACVC,MAAOA,iBAAiBQ,MAAQR,MAAQ,IAAIQ,MAAMC,OAAOT,OAC3D,GACA,OAAO,KACT,CACF,EACA,CAACJ,cAAc,EAGjB,MAAO,CAAE,GAAGC,KAAK,CAAEI,IAAK,CAC1B,CAEA,eAAeN,kBAAmB"}