@ably/ui 17.8.0 → 17.9.0-dev.7b4c6aac

package/core/DropdownMenu.js

@@ -1,2 +1,2 @@
-import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";import cn from"./utils/cn";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{if(ref.current?.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>document.removeEventListener("click",clickHandler)},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,triggerClassNames="",description})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger","aria-label":description,onClick:()=>setOpen(!isOpen),className:cn("flex items-center ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 focus:outline-none",triggerClassNames)},children,React.createElement(Icon,{name:isOpen?"icon-gui-chevron-up-mini":"icon-gui-chevron-down-mini",size:"1.25rem",additionalCSS:"text-neutral-1300 dark:text-neutral-000"}))};const Content=({children,anchorPosition="right",contentClassNames})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}return React.createElement("div",{id:"menu-content",role:"menu",className:cn("flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft",anchorPosition==="right"?"right-0":"left-0",contentClassNames)},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000"},React.createElement("p",{className:"mb-1"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",additionalCSS:"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-4"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
+import React from"react";import*as RadixDropdownMenu from"@radix-ui/react-dropdown-menu";import Icon from"./Icon";import cn from"./utils/cn";const DropdownMenu=({children})=>{return React.createElement(RadixDropdownMenu.Root,null,children)};const Trigger=({children,triggerClassNames="",description})=>{return React.createElement(RadixDropdownMenu.Trigger,{asChild:true},React.createElement("button",{id:"menu-trigger","aria-label":description,className:cn("flex items-center ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 focus:outline-none",triggerClassNames)},children,React.createElement(Icon,{name:"icon-gui-chevron-down-mini",size:"1.25rem",additionalCSS:"text-neutral-1300 dark:text-neutral-000 transition-transform data-[state=open]:rotate-180"})))};const Content=({children,anchorPosition="right",contentClassNames})=>{return React.createElement(RadixDropdownMenu.Portal,null,React.createElement(RadixDropdownMenu.Content,{id:"menu-content",align:anchorPosition==="right"?"end":"start",sideOffset:5,className:cn("flex flex-col z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft","data-[state=open]:animate-[fade-in_150ms_ease-out]","data-[state=closed]:animate-[fade-out_150ms_ease-in]",contentClassNames)},children))};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement(RadixDropdownMenu.Item,{asChild:true},React.createElement("a",{href:url,className:"menu-link group block p-2 rounded-lg outline-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 focus:bg-neutral-100 dark:focus:bg-neutral-1200"},React.createElement("p",{className:"mb-1"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",additionalCSS:"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-4"},subtitle):null,children))};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
 //# sourceMappingURL=DropdownMenu.js.map

package/core/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/DropdownMenu.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  Dispatch,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\nconst DropdownMenuContext = createContext<{\n  isOpen: boolean;\n  setOpen: Dispatch<React.SetStateAction<boolean>>;\n}>({\n  isOpen: false,\n  setOpen: () => {},\n});\n\ntype DropdownMenuProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n};\n\ntype TriggerProps = {\n  /**\n   * The content to be displayed within the trigger element.\n   */\n  children: ReactNode;\n  /**\n   * Additional class names to apply to the trigger element.\n   */\n  triggerClassNames?: string;\n  /**\n   * A description for the trigger element, used for accessibility purposes.\n   */\n  description?: string;\n};\n\ntype ContentProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n  /**\n   * The position of the dropdown menu relative to the trigger element.\n   * Defaults to \"right\".\n   */\n  anchorPosition?: string;\n  /**\n   * Additional class names to apply to the content container.\n   */\n  contentClassNames?: string;\n};\n\ntype LinkProps = {\n  url: string;\n  title: string;\n  subtitle?: string;\n  iconName?: IconName;\n  children?: ReactNode;\n};\n\nconst DropdownMenu = ({ children }: DropdownMenuProps) => {\n  const [isOpen, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const clickHandler = (e: MouseEvent) => {\n      if (ref.current?.contains(e.target as Node)) return;\n      setOpen(false);\n    };\n    document.addEventListener(\"click\", clickHandler);\n    return () => document.removeEventListener(\"click\", clickHandler);\n  }, []);\n\n  return (\n    <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>\n      <div id=\"dropdown-menu\" className=\"relative\" ref={ref}>\n        {children}\n      </div>\n    </DropdownMenuContext.Provider>\n  );\n};\n\nconst Trigger = ({\n  children,\n  triggerClassNames = \"\",\n  description,\n}: TriggerProps) => {\n  const { isOpen, setOpen } = useContext(DropdownMenuContext);\n\n  return (\n    <button\n      id=\"menu-trigger\"\n      aria-label={description}\n      onClick={() => setOpen(!isOpen)}\n      className={cn(\n        \"flex items-center ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 focus:outline-none\",\n        triggerClassNames,\n      )}\n    >\n      {children}\n      <Icon\n        name={\n          isOpen ? \"icon-gui-chevron-up-mini\" : \"icon-gui-chevron-down-mini\"\n        }\n        size=\"1.25rem\"\n        additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n      />\n    </button>\n  );\n};\n\nconst Content = ({\n  children,\n  anchorPosition = \"right\",\n  contentClassNames,\n}: ContentProps) => {\n  const { isOpen } = useContext(DropdownMenuContext);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      id=\"menu-content\"\n      role=\"menu\"\n      className={cn(\n        \"flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft\",\n        anchorPosition === \"right\" ? \"right-0\" : \"left-0\",\n        contentClassNames,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {\n  return (\n    <a\n      href={url}\n      className=\"menu-link group block p-2 rounded-lg\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000\"\n    >\n      <p className=\"mb-1\">\n        {title}\n        {iconName ? (\n          <Icon\n            name={iconName}\n            size=\"1rem\"\n            additionalCSS=\"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000\"\n          />\n        ) : null}\n      </p>\n      {subtitle ? <p className=\"ui-text-p3 mb-4\">{subtitle}</p> : null}\n      {children}\n    </a>\n  );\n};\n\nDropdownMenu.Trigger = Trigger;\nDropdownMenu.Content = Content;\nDropdownMenu.Link = Link;\n\nexport default DropdownMenu;\n"],"names":["React","createContext","useContext","useState","useEffect","useRef","Icon","cn","DropdownMenuContext","isOpen","setOpen","DropdownMenu","children","ref","clickHandler","e","current","contains","target","document","addEventListener","removeEventListener","Provider","value","div","id","className","Trigger","triggerClassNames","description","button","aria-label","onClick","name","size","additionalCSS","Content","anchorPosition","contentClassNames","role","Link","url","title","subtitle","iconName","a","href","p"],"mappings":"AAAA,OAAOA,OACLC,aAAa,CACbC,UAAU,CACVC,QAAQ,CACRC,SAAS,CACTC,MAAM,KAGD,OAAQ,AACf,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAE5B,MAAMC,oBAAsBP,cAGzB,CACDQ,OAAQ,MACRC,QAAS,KAAO,CAClB,GAgDA,MAAMC,aAAe,CAAC,CAAEC,QAAQ,CAAqB,IACnD,KAAM,CAACH,OAAQC,QAAQ,CAAGP,SAAS,OACnC,MAAMU,IAAMR,OAAuB,MAEnCD,UAAU,KACR,MAAMU,aAAe,AAACC,IACpB,GAAIF,IAAIG,OAAO,EAAEC,SAASF,EAAEG,MAAM,EAAW,OAC7CR,QAAQ,MACV,EACAS,SAASC,gBAAgB,CAAC,QAASN,cACnC,MAAO,IAAMK,SAASE,mBAAmB,CAAC,QAASP,aACrD,EAAG,EAAE,EAEL,OACE,oBAACN,oBAAoBc,QAAQ,EAACC,MAAO,CAAEd,OAAQC,OAAQ,GACrD,oBAACc,OAAIC,GAAG,gBAAgBC,UAAU,WAAWb,IAAKA,KAC/CD,UAIT,EAEA,MAAMe,QAAU,CAAC,CACff,QAAQ,CACRgB,kBAAoB,EAAE,CACtBC,WAAW,CACE,IACb,KAAM,CAAEpB,MAAM,CAAEC,OAAO,CAAE,CAAGR,WAAWM,qBAEvC,OACE,oBAACsB,UACCL,GAAG,eACHM,aAAYF,YACZG,QAAS,IAAMtB,QAAQ,CAACD,QACxBiB,UAAWnB,GACT,wGACAqB,oBAGDhB,SACD,oBAACN,MACC2B,KACExB,OAAS,2BAA6B,6BAExCyB,KAAK,UACLC,cAAc,4CAItB,EAEA,MAAMC,QAAU,CAAC,CACfxB,QAAQ,CACRyB,eAAiB,OAAO,CACxBC,iBAAiB,CACJ,IACb,KAAM,CAAE7B,MAAM,CAAE,CAAGP,WAAWM,qBAE9B,GAAI,CAACC,OAAQ,CACX,OAAO,IACT,CAEA,OACE,oBAACe,OACCC,GAAG,eACHc,KAAK,OACLb,UAAWnB,GACT,iJACA8B,iBAAmB,QAAU,UAAY,SACzCC,oBAGD1B,SAGP,EAEA,MAAM4B,KAAO,CAAC,CAAEC,GAAG,CAAEC,KAAK,CAAEC,QAAQ,CAAEC,QAAQ,CAAEhC,QAAQ,CAAa,IACnE,OACE,oBAACiC,KACCC,KAAML,IACNf,UAAU,sOAGV,oBAACqB,KAAErB,UAAU,QACVgB,MACAE,SACC,oBAACtC,MACC2B,KAAMW,SACNV,KAAK,OACLC,cAAc,uFAEd,MAELQ,SAAW,oBAACI,KAAErB,UAAU,mBAAmBiB,UAAgB,KAC3D/B,SAGP,CAEAD,CAAAA,aAAagB,OAAO,CAAGA,OACvBhB,CAAAA,aAAayB,OAAO,CAAGA,OACvBzB,CAAAA,aAAa6B,IAAI,CAAGA,IAEpB,gBAAe7B,YAAa"}
+{"version":3,"sources":["../../src/core/DropdownMenu.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport * as RadixDropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport Icon from \"./Icon\";\nimport { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\ntype DropdownMenuProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n};\n\ntype TriggerProps = {\n  /**\n   * The content to be displayed within the trigger element.\n   */\n  children: ReactNode;\n  /**\n   * Additional class names to apply to the trigger element.\n   */\n  triggerClassNames?: string;\n  /**\n   * A description for the trigger element, used for accessibility purposes.\n   */\n  description?: string;\n};\n\ntype ContentProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n  /**\n   * The position of the dropdown menu relative to the trigger element.\n   * Defaults to \"right\".\n   */\n  anchorPosition?: string;\n  /**\n   * Additional class names to apply to the content container.\n   */\n  contentClassNames?: string;\n};\n\ntype LinkProps = {\n  url: string;\n  title: string;\n  subtitle?: string;\n  iconName?: IconName;\n  children?: ReactNode;\n};\n\nconst DropdownMenu = ({ children }: DropdownMenuProps) => {\n  return <RadixDropdownMenu.Root>{children}</RadixDropdownMenu.Root>;\n};\n\nconst Trigger = ({\n  children,\n  triggerClassNames = \"\",\n  description,\n}: TriggerProps) => {\n  return (\n    <RadixDropdownMenu.Trigger asChild>\n      <button\n        id=\"menu-trigger\"\n        aria-label={description}\n        className={cn(\n          \"flex items-center ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 focus:outline-none\",\n          triggerClassNames,\n        )}\n      >\n        {children}\n        <Icon\n          name=\"icon-gui-chevron-down-mini\"\n          size=\"1.25rem\"\n          additionalCSS=\"text-neutral-1300 dark:text-neutral-000 transition-transform data-[state=open]:rotate-180\"\n        />\n      </button>\n    </RadixDropdownMenu.Trigger>\n  );\n};\n\nconst Content = ({\n  children,\n  anchorPosition = \"right\",\n  contentClassNames,\n}: ContentProps) => {\n  return (\n    <RadixDropdownMenu.Portal>\n      <RadixDropdownMenu.Content\n        id=\"menu-content\"\n        align={anchorPosition === \"right\" ? \"end\" : \"start\"}\n        sideOffset={5}\n        className={cn(\n          \"flex flex-col z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft\",\n          \"data-[state=open]:animate-[fade-in_150ms_ease-out]\",\n          \"data-[state=closed]:animate-[fade-out_150ms_ease-in]\",\n          contentClassNames,\n        )}\n      >\n        {children}\n      </RadixDropdownMenu.Content>\n    </RadixDropdownMenu.Portal>\n  );\n};\n\nconst Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {\n  return (\n    <RadixDropdownMenu.Item asChild>\n      <a\n        href={url}\n        className=\"menu-link group block p-2 rounded-lg outline-none\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000\n      focus:bg-neutral-100 dark:focus:bg-neutral-1200\"\n      >\n        <p className=\"mb-1\">\n          {title}\n          {iconName ? (\n            <Icon\n              name={iconName}\n              size=\"1rem\"\n              additionalCSS=\"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000\"\n            />\n          ) : null}\n        </p>\n        {subtitle ? <p className=\"ui-text-p3 mb-4\">{subtitle}</p> : null}\n        {children}\n      </a>\n    </RadixDropdownMenu.Item>\n  );\n};\n\nDropdownMenu.Trigger = Trigger;\nDropdownMenu.Content = Content;\nDropdownMenu.Link = Link;\n\nexport default DropdownMenu;\n"],"names":["React","RadixDropdownMenu","Icon","cn","DropdownMenu","children","Root","Trigger","triggerClassNames","description","asChild","button","id","aria-label","className","name","size","additionalCSS","Content","anchorPosition","contentClassNames","Portal","align","sideOffset","Link","url","title","subtitle","iconName","Item","a","href","p"],"mappings":"AAAA,OAAOA,UAA0B,OAAQ,AACzC,WAAYC,sBAAuB,+BAAgC,AACnE,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAgD5B,MAAMC,aAAe,CAAC,CAAEC,QAAQ,CAAqB,IACnD,OAAO,oBAACJ,kBAAkBK,IAAI,MAAED,SAClC,EAEA,MAAME,QAAU,CAAC,CACfF,QAAQ,CACRG,kBAAoB,EAAE,CACtBC,WAAW,CACE,IACb,OACE,oBAACR,kBAAkBM,OAAO,EAACG,QAAAA,MACzB,oBAACC,UACCC,GAAG,eACHC,aAAYJ,YACZK,UAAWX,GACT,wGACAK,oBAGDH,SACD,oBAACH,MACCa,KAAK,6BACLC,KAAK,UACLC,cAAc,+FAKxB,EAEA,MAAMC,QAAU,CAAC,CACfb,QAAQ,CACRc,eAAiB,OAAO,CACxBC,iBAAiB,CACJ,IACb,OACE,oBAACnB,kBAAkBoB,MAAM,MACvB,oBAACpB,kBAAkBiB,OAAO,EACxBN,GAAG,eACHU,MAAOH,iBAAmB,QAAU,MAAQ,QAC5CI,WAAY,EACZT,UAAWX,GACT,wIACA,qDACA,uDACAiB,oBAGDf,UAIT,EAEA,MAAMmB,KAAO,CAAC,CAAEC,GAAG,CAAEC,KAAK,CAAEC,QAAQ,CAAEC,QAAQ,CAAEvB,QAAQ,CAAa,IACnE,OACE,oBAACJ,kBAAkB4B,IAAI,EAACnB,QAAAA,MACtB,oBAACoB,KACCC,KAAMN,IACNX,UAAU,mSAIV,oBAACkB,KAAElB,UAAU,QACVY,MACAE,SACC,oBAAC1B,MACCa,KAAMa,SACNZ,KAAK,OACLC,cAAc,uFAEd,MAELU,SAAW,oBAACK,KAAElB,UAAU,mBAAmBa,UAAgB,KAC3DtB,UAIT,CAEAD,CAAAA,aAAaG,OAAO,CAAGA,OACvBH,CAAAA,aAAac,OAAO,CAAGA,OACvBd,CAAAA,aAAaoB,IAAI,CAAGA,IAEpB,gBAAepB,YAAa"}

package/core/Expander.js

@@ -1,2 +1,2 @@
-import React,{useEffect,useRef,useState}from"react";import{throttle}from"es-toolkit/compat";const Expander=({heightThreshold=200,className,fadeClassName,controlsClassName,controlsOpenedLabel,controlsClosedLabel,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[contentHeight,setContentHeight]=useState(heightThreshold);const[height,setHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}if(contentHeight<heightThreshold){setHeight("auto")}else if(expanded){setHeight(contentHeight)}else{setHeight(heightThreshold)}setShowControls(contentHeight>=heightThreshold)},[contentHeight,heightThreshold,expanded]);useEffect(()=>{const onResize=throttle(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}},250);window.addEventListener("resize",onResize);return()=>{window.removeEventListener("resize",onResize)}},[]);return React.createElement(React.Fragment,null,React.createElement("div",{style:{height},"data-testid":"expander-container",className:`overflow-hidden transition-all relative ${className??""}`},showControls&&!expanded&&React.createElement("div",{className:`h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName??""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement("div",{onClick:()=>setExpanded(!expanded),onKeyDown:e=>e.key==="Enter"&&setExpanded(!expanded),tabIndex:0,role:"button","aria-expanded":expanded,"data-testid":"expander-controls",className:`${heightThreshold===0&&!expanded?"":"mt-4"} cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light ${controlsClassName??""}`},expanded?controlsOpenedLabel??"View less -":controlsClosedLabel??"View all +"))};export default Expander;
+import React,{useEffect,useRef,useState}from"react";import*as RadixCollapsible from"@radix-ui/react-collapsible";import{throttle}from"es-toolkit/compat";const Expander=({heightThreshold=200,className,fadeClassName,controlsClassName,controlsOpenedLabel,controlsClosedLabel,children})=>{const innerRef=useRef(null);const[showControls,setShowControls]=useState(false);const[contentHeight,setContentHeight]=useState(heightThreshold);const[expanded,setExpanded]=useState(false);useEffect(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}setShowControls(contentHeight>=heightThreshold)},[contentHeight,heightThreshold]);useEffect(()=>{const onResize=throttle(()=>{if(innerRef.current){setContentHeight(innerRef.current.clientHeight)}},250);window.addEventListener("resize",onResize);return()=>{window.removeEventListener("resize",onResize)}},[]);const height=contentHeight<heightThreshold?"auto":expanded?contentHeight:heightThreshold;return React.createElement(RadixCollapsible.Root,{open:expanded,onOpenChange:setExpanded},React.createElement("div",{style:{height},"data-testid":"expander-container",className:`overflow-hidden transition-all relative ${className??""}`},showControls&&!expanded&&React.createElement("div",{className:`h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${fadeClassName??""}`}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement(RadixCollapsible.Trigger,{asChild:true},React.createElement("div",{"data-testid":"expander-controls",className:`${heightThreshold===0&&!expanded?"":"mt-4"} cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light ${controlsClassName??""}`},expanded?controlsOpenedLabel??"View less -":controlsClosedLabel??"View all +")))};export default Expander;
 //# sourceMappingURL=Expander.js.map

package/core/Expander.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Expander.tsx"],"sourcesContent":["import React, {\n  PropsWithChildren,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { throttle } from \"es-toolkit/compat\";\n\ntype ExpanderProps = {\n  heightThreshold?: number;\n  className?: string;\n  fadeClassName?: string;\n  controlsClassName?: string;\n  controlsOpenedLabel?: string | ReactNode;\n  controlsClosedLabel?: string | ReactNode;\n};\n\nconst Expander = ({\n  heightThreshold = 200,\n  className,\n  fadeClassName,\n  controlsClassName,\n  controlsOpenedLabel,\n  controlsClosedLabel,\n  children,\n}: PropsWithChildren<ExpanderProps>) => {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const [showControls, setShowControls] = useState(false);\n  const [contentHeight, setContentHeight] = useState<number>(heightThreshold);\n  const [height, setHeight] = useState<number | \"auto\">(heightThreshold);\n  const [expanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    if (innerRef.current) {\n      setContentHeight(innerRef.current.clientHeight);\n    }\n\n    if (contentHeight < heightThreshold) {\n      setHeight(\"auto\");\n    } else if (expanded) {\n      setHeight(contentHeight);\n    } else {\n      setHeight(heightThreshold);\n    }\n\n    setShowControls(contentHeight >= heightThreshold);\n  }, [contentHeight, heightThreshold, expanded]);\n\n  useEffect(() => {\n    const onResize = throttle(() => {\n      if (innerRef.current) {\n        setContentHeight(innerRef.current.clientHeight);\n      }\n    }, 250);\n\n    window.addEventListener(\"resize\", onResize);\n    return () => {\n      window.removeEventListener(\"resize\", onResize);\n    };\n  }, []);\n\n  return (\n    <>\n      <div\n        style={{ height }}\n        data-testid=\"expander-container\"\n        className={`overflow-hidden transition-all relative ${className ?? \"\"}`}\n      >\n        {showControls && !expanded && (\n          <div\n            className={`h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${\n              fadeClassName ?? \"\"\n            }`}\n          ></div>\n        )}\n        <div ref={innerRef}>{children}</div>\n      </div>\n      {showControls && (\n        <div\n          onClick={() => setExpanded(!expanded)}\n          onKeyDown={(e) => e.key === \"Enter\" && setExpanded(!expanded)}\n          tabIndex={0}\n          role=\"button\"\n          aria-expanded={expanded}\n          data-testid=\"expander-controls\"\n          className={`${heightThreshold === 0 && !expanded ? \"\" : \"mt-4\"} cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light ${controlsClassName ?? \"\"}`}\n        >\n          {expanded\n            ? (controlsOpenedLabel ?? \"View less -\")\n            : (controlsClosedLabel ?? \"View all +\")}\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default Expander;\n"],"names":["React","useEffect","useRef","useState","throttle","Expander","heightThreshold","className","fadeClassName","controlsClassName","controlsOpenedLabel","controlsClosedLabel","children","innerRef","showControls","setShowControls","contentHeight","setContentHeight","height","setHeight","expanded","setExpanded","current","clientHeight","onResize","window","addEventListener","removeEventListener","div","style","data-testid","ref","onClick","onKeyDown","e","key","tabIndex","role","aria-expanded"],"mappings":"AAAA,OAAOA,OAGLC,SAAS,CACTC,MAAM,CACNC,QAAQ,KACH,OAAQ,AACf,QAASC,QAAQ,KAAQ,mBAAoB,CAW7C,MAAMC,SAAW,CAAC,CAChBC,gBAAkB,GAAG,CACrBC,SAAS,CACTC,aAAa,CACbC,iBAAiB,CACjBC,mBAAmB,CACnBC,mBAAmB,CACnBC,QAAQ,CACyB,IACjC,MAAMC,SAAWX,OAAuB,MACxC,KAAM,CAACY,aAAcC,gBAAgB,CAAGZ,SAAS,OACjD,KAAM,CAACa,cAAeC,iBAAiB,CAAGd,SAAiBG,iBAC3D,KAAM,CAACY,OAAQC,UAAU,CAAGhB,SAA0BG,iBACtD,KAAM,CAACc,SAAUC,YAAY,CAAGlB,SAAS,OAEzCF,UAAU,KACR,GAAIY,SAASS,OAAO,CAAE,CACpBL,iBAAiBJ,SAASS,OAAO,CAACC,YAAY,CAChD,CAEA,GAAIP,cAAgBV,gBAAiB,CACnCa,UAAU,OACZ,MAAO,GAAIC,SAAU,CACnBD,UAAUH,cACZ,KAAO,CACLG,UAAUb,gBACZ,CAEAS,gBAAgBC,eAAiBV,gBACnC,EAAG,CAACU,cAAeV,gBAAiBc,SAAS,EAE7CnB,UAAU,KACR,MAAMuB,SAAWpB,SAAS,KACxB,GAAIS,SAASS,OAAO,CAAE,CACpBL,iBAAiBJ,SAASS,OAAO,CAACC,YAAY,CAChD,CACF,EAAG,KAEHE,OAAOC,gBAAgB,CAAC,SAAUF,UAClC,MAAO,KACLC,OAAOE,mBAAmB,CAAC,SAAUH,SACvC,CACF,EAAG,EAAE,EAEL,OACE,wCACE,oBAACI,OACCC,MAAO,CAAEX,MAAO,EAChBY,cAAY,qBACZvB,UAAW,CAAC,wCAAwC,EAAEA,WAAa,GAAG,CAAC,EAEtEO,cAAgB,CAACM,UAChB,oBAACQ,OACCrB,UAAW,CAAC,wFAAwF,EAClGC,eAAiB,GAClB,CAAC,GAGN,oBAACoB,OAAIG,IAAKlB,UAAWD,WAEtBE,cACC,oBAACc,OACCI,QAAS,IAAMX,YAAY,CAACD,UAC5Ba,UAAW,AAACC,GAAMA,EAAEC,GAAG,GAAK,SAAWd,YAAY,CAACD,UACpDgB,SAAU,EACVC,KAAK,SACLC,gBAAelB,SACfU,cAAY,oBACZvB,UAAW,CAAC,EAAED,kBAAoB,GAAK,CAACc,SAAW,GAAK,OAAO,sFAAsF,EAAEX,mBAAqB,GAAG,CAAC,EAE/KW,SACIV,qBAAuB,cACvBC,qBAAuB,cAKtC,CAEA,gBAAeN,QAAS"}
+{"version":3,"sources":["../../src/core/Expander.tsx"],"sourcesContent":["import React, {\n  PropsWithChildren,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\nimport { throttle } from \"es-toolkit/compat\";\n\ntype ExpanderProps = {\n  heightThreshold?: number;\n  className?: string;\n  fadeClassName?: string;\n  controlsClassName?: string;\n  controlsOpenedLabel?: string | ReactNode;\n  controlsClosedLabel?: string | ReactNode;\n};\n\nconst Expander = ({\n  heightThreshold = 200,\n  className,\n  fadeClassName,\n  controlsClassName,\n  controlsOpenedLabel,\n  controlsClosedLabel,\n  children,\n}: PropsWithChildren<ExpanderProps>) => {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const [showControls, setShowControls] = useState(false);\n  const [contentHeight, setContentHeight] = useState<number>(heightThreshold);\n  const [expanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    if (innerRef.current) {\n      setContentHeight(innerRef.current.clientHeight);\n    }\n\n    setShowControls(contentHeight >= heightThreshold);\n  }, [contentHeight, heightThreshold]);\n\n  useEffect(() => {\n    const onResize = throttle(() => {\n      if (innerRef.current) {\n        setContentHeight(innerRef.current.clientHeight);\n      }\n    }, 250);\n\n    window.addEventListener(\"resize\", onResize);\n    return () => {\n      window.removeEventListener(\"resize\", onResize);\n    };\n  }, []);\n\n  const height =\n    contentHeight < heightThreshold\n      ? \"auto\"\n      : expanded\n        ? contentHeight\n        : heightThreshold;\n\n  return (\n    <RadixCollapsible.Root open={expanded} onOpenChange={setExpanded}>\n      <div\n        style={{ height }}\n        data-testid=\"expander-container\"\n        className={`overflow-hidden transition-all relative ${className ?? \"\"}`}\n      >\n        {showControls && !expanded && (\n          <div\n            className={`h-16 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${\n              fadeClassName ?? \"\"\n            }`}\n          ></div>\n        )}\n        <div ref={innerRef}>{children}</div>\n      </div>\n      {showControls && (\n        <RadixCollapsible.Trigger asChild>\n          <div\n            data-testid=\"expander-controls\"\n            className={`${heightThreshold === 0 && !expanded ? \"\" : \"mt-4\"} cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light ${controlsClassName ?? \"\"}`}\n          >\n            {expanded\n              ? (controlsOpenedLabel ?? \"View less -\")\n              : (controlsClosedLabel ?? \"View all +\")}\n          </div>\n        </RadixCollapsible.Trigger>\n      )}\n    </RadixCollapsible.Root>\n  );\n};\n\nexport default Expander;\n"],"names":["React","useEffect","useRef","useState","RadixCollapsible","throttle","Expander","heightThreshold","className","fadeClassName","controlsClassName","controlsOpenedLabel","controlsClosedLabel","children","innerRef","showControls","setShowControls","contentHeight","setContentHeight","expanded","setExpanded","current","clientHeight","onResize","window","addEventListener","removeEventListener","height","Root","open","onOpenChange","div","style","data-testid","ref","Trigger","asChild"],"mappings":"AAAA,OAAOA,OAGLC,SAAS,CACTC,MAAM,CACNC,QAAQ,KACH,OAAQ,AACf,WAAYC,qBAAsB,6BAA8B,AAChE,QAASC,QAAQ,KAAQ,mBAAoB,CAW7C,MAAMC,SAAW,CAAC,CAChBC,gBAAkB,GAAG,CACrBC,SAAS,CACTC,aAAa,CACbC,iBAAiB,CACjBC,mBAAmB,CACnBC,mBAAmB,CACnBC,QAAQ,CACyB,IACjC,MAAMC,SAAWZ,OAAuB,MACxC,KAAM,CAACa,aAAcC,gBAAgB,CAAGb,SAAS,OACjD,KAAM,CAACc,cAAeC,iBAAiB,CAAGf,SAAiBI,iBAC3D,KAAM,CAACY,SAAUC,YAAY,CAAGjB,SAAS,OAEzCF,UAAU,KACR,GAAIa,SAASO,OAAO,CAAE,CACpBH,iBAAiBJ,SAASO,OAAO,CAACC,YAAY,CAChD,CAEAN,gBAAgBC,eAAiBV,gBACnC,EAAG,CAACU,cAAeV,gBAAgB,EAEnCN,UAAU,KACR,MAAMsB,SAAWlB,SAAS,KACxB,GAAIS,SAASO,OAAO,CAAE,CACpBH,iBAAiBJ,SAASO,OAAO,CAACC,YAAY,CAChD,CACF,EAAG,KAEHE,OAAOC,gBAAgB,CAAC,SAAUF,UAClC,MAAO,KACLC,OAAOE,mBAAmB,CAAC,SAAUH,SACvC,CACF,EAAG,EAAE,EAEL,MAAMI,OACJV,cAAgBV,gBACZ,OACAY,SACEF,cACAV,gBAER,OACE,oBAACH,iBAAiBwB,IAAI,EAACC,KAAMV,SAAUW,aAAcV,aACnD,oBAACW,OACCC,MAAO,CAAEL,MAAO,EAChBM,cAAY,qBACZzB,UAAW,CAAC,wCAAwC,EAAEA,WAAa,GAAG,CAAC,EAEtEO,cAAgB,CAACI,UAChB,oBAACY,OACCvB,UAAW,CAAC,wFAAwF,EAClGC,eAAiB,GAClB,CAAC,GAGN,oBAACsB,OAAIG,IAAKpB,UAAWD,WAEtBE,cACC,oBAACX,iBAAiB+B,OAAO,EAACC,QAAAA,MACxB,oBAACL,OACCE,cAAY,oBACZzB,UAAW,CAAC,EAAED,kBAAoB,GAAK,CAACY,SAAW,GAAK,OAAO,sFAAsF,EAAET,mBAAqB,GAAG,CAAC,EAE/KS,SACIR,qBAAuB,cACvBC,qBAAuB,eAMxC,CAEA,gBAAeN,QAAS"}

package/core/Slider.js

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

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\";\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={`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 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={`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={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={`${\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={scrollNext}\n        >\n          <div className=\"ui-icon-cta-holder flex w-12 -ml-3.5\">\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","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/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

@@ -601,7 +601,7 @@ type LinkProps = {
 const DropdownMenu: {
     ({ children }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
     Trigger: ({ children, triggerClassNames, description, }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, anchorPosition, contentClassNames, }: ContentProps) => import("react/jsx-runtime").JSX.Element | null;
+    Content: ({ children, anchorPosition, contentClassNames, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
     Link: ({ url, title, subtitle, iconName, children }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default DropdownMenu;
@@ -5902,15 +5902,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
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.8.0",
+  "version": "17.9.0-dev.7b4c6aac",
   "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",
@@ -67,13 +67,19 @@
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@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",