@ably/ui - npm Package Compare versions

Comparing version 14.6.1 to 14.6.2-dev.7b98b73

core/Accordion.js

@@ -1,1 +0,1 @@
-import React,{useState,useRef,useEffect}from"react";import Icon from"./Icon";import throttle from"lodash.throttle";const themeClasses={dark:{bg:"bg-neutral-1200",hoverBg:"hover:bg-neutral-1100",text:"text-white",toggleIconColor:"text-orange-600",selectableBg:"bg-neutral-300",selectableText:"text-neutral-1300"},light:{bg:"bg-neutral-200",hoverBg:"hover:bg-neutral-300",text:"text-neutral-1300",toggleIconColor:"text-neutral-1000",selectableBg:"bg-neutral-1200",selectableText:"text-white"},transparent:{bg:"bg-white",hoverBg:"hover:bg-white",text:"text-neutral-1000",toggleIconColor:"text-dark-grey"}};const isNonTransparentTheme=theme=>theme!=="transparent";const AccordionRow=({name,children,onClick,open,rowIcon,options,toggleIcons,theme})=>{const rowRef=useRef(null);const[contentHeight,setContentHeight]=useState(0);useEffect(()=>{const handleHeight=throttle(()=>{if(rowRef.current){setContentHeight(rowRef.current.scrollHeight+16)}},250);handleHeight();window.addEventListener("resize",handleHeight);return()=>window.removeEventListener("resize",handleHeight)},[]);const{selectable,sticky}=options||{};const{text,bg,hoverBg,toggleIconColor,selectableBg,selectableText}=themeClasses[theme];const bgClasses=selectable&&open&&selectableBg||`${bg} ${hoverBg}`;const textClass=selectable&&open&&selectableText||text;return /*#__PURE__*/React.createElement("div",{className:`border-mid-grey border-b last:border-none ${isNonTransparentTheme(theme)?"border-none":""}`},/*#__PURE__*/React.createElement("button",{type:"button",onClick:onClick,className:`flex w-full ${sticky?"sticky top-0":""} focus:outline-none py-16 rounded-lg ui-text-p1 font-bold text-left items-center gap-12 ${isNonTransparentTheme(theme)?"px-16":""} transition-colors ${bgClasses} ${textClass}`},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:"32"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:open?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:"16"})," "):null),/*#__PURE__*/React.createElement("div",{className:`ui-text-p2 transition-[max-height] duration-500 overflow-hidden ${isNonTransparentTheme(theme)?"pt-16 px-16":"px-0"}`,style:{maxHeight:open?contentHeight:0},ref:rowRef},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",id="id-accordion",className="",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options})=>{const{defaultOpenIndexes,autoClose}=options||{};const[openIndexes,setOpenIndexes]=useState(defaultOpenIndexes??[]);const handleSetIndex=index=>{const currentIndexIsOpen=openIndexes.includes(index);if(autoClose){setOpenIndexes(currentIndexIsOpen?[]:[index])}else{setOpenIndexes(currentIndexIsOpen?openIndexes.filter(i=>i!==index):[...openIndexes,index])}};return /*#__PURE__*/React.createElement("div",{className:className,id:id},data.map((item,currentIndex)=>{return /*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,open:openIndexes.includes(currentIndex),onClick:()=>handleSetIndex(currentIndex),toggleIcons:icons,theme:theme,options:options},item.content)}))};export default Accordion;
+import React,{useState,useRef,useEffect}from"react";import Icon from"./Icon";const themeClasses={dark:{bg:"bg-neutral-1200",hoverBg:"hover:bg-neutral-1100",text:"text-white",toggleIconColor:"text-orange-600",selectableBg:"bg-neutral-300",selectableText:"text-neutral-1300"},light:{bg:"bg-neutral-200",hoverBg:"hover:bg-neutral-300",text:"text-neutral-1300",toggleIconColor:"text-neutral-1000",selectableBg:"bg-neutral-1200",selectableText:"text-white"},transparent:{bg:"bg-transparent",hoverBg:"hover:bg-transparent",text:"text-neutral-1000",toggleIconColor:"text-dark-grey",border:"border-neutral-500 border-b last:border-none"},darkTransparent:{bg:"bg-transparent",hoverBg:"hover:bg-transparent",text:"text-neutral-000",toggleIconColor:"text-orange-600",border:"border-neutral-900 border-b last:border-none"}};const isNonTransparentTheme=theme=>!["transparent","darkTransparent"].includes(theme);const AccordionRow=({name,children,onClick,open,rowIcon,options,toggleIcons,theme})=>{const rowRef=useRef(null);const[contentHeight,setContentHeight]=useState(0);useEffect(()=>{const resizeObserver=new ResizeObserver(()=>{if(rowRef.current){setContentHeight(rowRef.current.scrollHeight+16)}});if(rowRef.current){resizeObserver.observe(rowRef.current)}return()=>{if(rowRef.current){resizeObserver.unobserve(rowRef.current)}}},[]);const{selectable,sticky}=options||{};const{text,bg,hoverBg,toggleIconColor,selectableBg,selectableText,border}=themeClasses[theme];const bgClasses=selectable&&open&&selectableBg||`${bg} ${hoverBg}`;const textClass=selectable&&open&&selectableText||text;return /*#__PURE__*/React.createElement("div",{className:`${border}`},/*#__PURE__*/React.createElement("button",{type:"button",onClick:onClick,className:`flex w-full ${sticky?"sticky top-0":""} focus:outline-none py-16 rounded-lg ui-text-p1 font-bold text-left items-center gap-12 ${isNonTransparentTheme(theme)?"px-16":""} transition-colors ${bgClasses} ${textClass}`},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:"32"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:open?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:"16"})," "):null),/*#__PURE__*/React.createElement("div",{className:`ui-text-p2 transition-[max-height] duration-500 overflow-y-hidden ${isNonTransparentTheme(theme)?"pt-16":""}`,style:{maxHeight:open?contentHeight:0},ref:rowRef},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",id="id-accordion",className="",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options})=>{const{defaultOpenIndexes,autoClose}=options||{};const[openIndexes,setOpenIndexes]=useState(defaultOpenIndexes??[]);const handleSetIndex=index=>{const currentIndexIsOpen=openIndexes.includes(index);if(autoClose){setOpenIndexes(currentIndexIsOpen?[]:[index])}else{setOpenIndexes(currentIndexIsOpen?openIndexes.filter(i=>i!==index):[...openIndexes,index])}};return /*#__PURE__*/React.createElement("div",{className:className,id:id},data.map((item,currentIndex)=>{return /*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,open:openIndexes.includes(currentIndex),onClick:()=>handleSetIndex(currentIndex),toggleIcons:icons,theme:theme,options:options},item.content)}))};export default Accordion;

core/Accordion/types.js

@@ -1,1 +0,1 @@
-export const accordionThemes=["dark","light","transparent"];
+export const accordionThemes=["dark","light","transparent","darkTransparent"];

core/Pricing/PricingCards.js

@@ -1,1 +0,1 @@
-import React,{Fragment}from"react";import{determineThemeColor}from"../styles/colors/utils";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";const PricingCards=({data,theme="dark",delimiter})=>{const t=color=>determineThemeColor("dark",theme,color);const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center w-full m-8 @[920px]:w-20"},/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20",additionalCSS:t("text-neutral-500")})):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center"},/*#__PURE__*/React.createElement("div",{className:`${delimiter?gridRules.delimited:gridRules.nonDelimited} gap-8`},data.map(({title,description,price,cta,sections},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:`flex flex-1 p-1 bg-gradient-to-b ${t("from-neutral-1100")} ${t("to-neutral-1100")} rounded-2xl min-w-[272px]`},/*#__PURE__*/React.createElement("div",{className:`flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl ${t("bg-neutral-1300")} bg-opacity-25 ${cta?`${t("hover:bg-neutral-1200")} hover:bg-opacity-100`:""} transition-colors group ${delimiter?"@[520px]:flex-row @[920px]:flex-col":""}`},/*#__PURE__*/React.createElement("div",{className:`flex flex-col gap-24 ${delimiter?"@[520px]:flex-1 @[920px}:flex-none":""}`},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:`mb-12 ${title.className??""} ${t(title.color??"text-neutral-000")}`},title.content),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 ${description.className??""} ${t(description.color??"text-neutral-000")}`},description.content)),/*#__PURE__*/React.createElement("div",{className:`flex items-end gap-8 ${delimiter?"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":""}`},/*#__PURE__*/React.createElement("p",{className:`ui-text-title font-medium tracking-tight leading-none ${t("text-neutral-000")}`},Number.isNaN(Number(price.amount))?"":"$",price.amount),/*#__PURE__*/React.createElement("div",{className:t("text-neutral-000")},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`text-center ui-btn ${t("bg-neutral-000")} ${t("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className??""}`,url:cta.url},cta.text)):null),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:`${t("text-neutral-500")} font-mono uppercase text-overline2 tracking-[0.16em]`},title),/*#__PURE__*/React.createElement("div",{className:delimiter?"":"flex flex-col gap-4"},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:`flex justify-between gap-16 px-8 -mx-8 ${index===0?"py-8":"py-4"} ${index>0&&index%2===0?`${t("bg-blue-900")} rounded-md`:""}`},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:`ui-text-p3 ${index===0?"font-bold":"font-medium"} ${t("text-neutral-300")} ${subIndex%2===1?"text-right":""}`},subItem))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:t(listItemColors.background),secondaryColor:t(listItemColors.foreground),size:"16",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:`flex-1 ${listItemColors?"ui-text-p3":"ui-text-p2"} font-medium ${t("text-neutral-300")}`},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"flex items-center h-40"},/*#__PURE__*/React.createElement("div",{className:`hidden sm:group-hover:hidden leading-6 font-extralight text-p3 ${t("text-neutral-800")}`},"•••"),/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url??"#",additionalCSS:`sm:hidden group-hover:block font-medium ui-text-p3 ${t("text-neutral-500")} hover:${t("text-neutral-000")} transition-colors`},cta.text)):null))))),delimiterColumn(index)))))};export default PricingCards;
+import React,{Fragment}from"react";import{determineThemeColor}from"../styles/colors/utils";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";const PricingCards=({data,theme="dark",delimiter})=>{const t=color=>determineThemeColor("dark",theme,color);const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center w-full m-8 @[920px]:w-20"},/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20",additionalCSS:t("text-neutral-500")})):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center"},/*#__PURE__*/React.createElement("div",{className:`${delimiter?gridRules.delimited:gridRules.nonDelimited} gap-8`},data.map(({title,description,price,cta,sections},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:`relative border ${t("border-neutral-1100")} flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group ${delimiter?"@[520px]:flex-row @[920px]:flex-col":""} min-w-[272px] overflow-hidden`},/*#__PURE__*/React.createElement("div",{className:`absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl ${t("bg-neutral-1300")} ${cta?`${t("group-hover:bg-neutral-1200")} group-hover:opacity-100`:""} transition-[colors,opacity] opacity-25 blur-md`}),/*#__PURE__*/React.createElement("div",{className:`relative z-10 flex flex-col gap-24 ${delimiter?"@[520px]:flex-1 @[920px}:flex-none":""}`},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("p",{className:`mb-12 ${title.className??""} ${t(title.color??"text-neutral-000")}`},title.content),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 ${description.className??""} ${t(description.color??"text-neutral-000")}`},description.content)),/*#__PURE__*/React.createElement("div",{className:`flex items-end gap-8 ${delimiter?"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":""}`},/*#__PURE__*/React.createElement("p",{className:`ui-text-title font-medium tracking-tight leading-none ${t("text-neutral-000")}`},Number.isNaN(Number(price.amount))?"":"$",price.amount),/*#__PURE__*/React.createElement("div",{className:t("text-neutral-000")},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`text-center ui-btn ${t("bg-neutral-000")} ${t("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className??""}`,url:cta.url},cta.text)):null),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:`${t("text-neutral-500")} font-mono uppercase text-overline2 tracking-[0.16em]`},title),/*#__PURE__*/React.createElement("div",{className:delimiter?"":"flex flex-col gap-4"},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:`flex justify-between gap-16 px-8 -mx-8 ${index===0?"py-8":"py-4"} ${index>0&&index%2===0?`${t("bg-blue-900")} rounded-md`:""}`},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:`ui-text-p3 ${index===0?"font-bold":"font-medium"} ${t("text-neutral-300")} ${subIndex%2===1?"text-right":""}`},subItem))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:t(listItemColors.background),secondaryColor:t(listItemColors.foreground),size:"16",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:`flex-1 ${listItemColors?"ui-text-p3":"ui-text-p2"} font-medium ${t("text-neutral-300")}`},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"flex items-center h-40"},/*#__PURE__*/React.createElement("div",{className:`hidden sm:block sm:group-hover:hidden leading-6 font-extralight text-p3 ${t("text-neutral-800")}`},"•••"),/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url??"#",additionalCSS:`sm:hidden group-hover:block font-medium ui-text-p3 ${t("text-neutral-500")} hover:${t("text-neutral-000")} transition-colors`},cta.text)):null)))),delimiterColumn(index)))))};export default PricingCards;

core/styles/colors/utils.js

@@ -1,1 +0,1 @@
-import{colorNames}from"./types";export const convertTailwindClassToVar=className=>className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi,"var(--color-$2)");const calculatePaletteRange=(acc,color)=>{const splitColor=color.split("-");const numericalColor=Number(splitColor[splitColor.length-1]);return{min:acc.min===-1||numericalColor<acc.min?numericalColor:acc.min,max:acc.max===-1||numericalColor>acc.max?numericalColor:acc.max}};export const determineThemeColor=(baseTheme,currentTheme,color)=>{if(baseTheme===currentTheme){return color}else{const splitColor=color.split("-");if(splitColor.length===3){const[property,palette,variant]=splitColor;const paletteColors=Object.keys(colorNames).includes(palette)?colorNames[palette]:colorNames.secondary;const{min,max}=paletteColors.reduce((acc,color)=>calculatePaletteRange(acc,color),{min:-1,max:-1});return`${property}-${palette}-${(max+min-Number(variant)).toString().padStart(3,"0")}`}else{return color}}};
+import{colorNames}from"./types";export const convertTailwindClassToVar=className=>className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi,"var(--color-$2)");const calculatePaletteRange=(acc,color)=>{const splitColor=color.split("-");const numericalColor=Number(splitColor[splitColor.length-1]);return{min:acc.min===-1||numericalColor<acc.min?numericalColor:acc.min,max:acc.max===-1||numericalColor>acc.max?numericalColor:acc.max}};export const determineThemeColor=(baseTheme,currentTheme,color)=>{if(baseTheme===currentTheme){return color}else{const splitColor=color.split("-");if(splitColor.length>=3){const property=splitColor.slice(0,splitColor.length-2).join("-");const palette=splitColor[splitColor.length-2];const variant=splitColor[splitColor.length-1];const paletteColors=Object.keys(colorNames).includes(palette)?colorNames[palette]:colorNames.secondary;const{min,max}=paletteColors.reduce((acc,color)=>calculatePaletteRange(acc,color),{min:-1,max:-1});return`${property}-${palette}-${(max+min-Number(variant)).toString().padStart(3,"0")}`}else{return color}}};

core/Tooltip.js

@@ -1,1 +0,1 @@
-import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";const Tooltip=({children,triggerProps,tooltipProps,...rest})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);return /*#__PURE__*/React.createElement("div",{...rest,className:`relative inline-block align-top h-16 ${rest?.className??""}`},/*#__PURE__*/React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>setOpen(false),type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`ml-8 p-0 relative top-1 focus:outline-none ${triggerProps?.className??""}`},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-info",size:"1rem"})),open?/*#__PURE__*/React.createElement("div",{role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:`bg-light-grey p-12 rounded pointer-events-none absolute z-20 ${tooltipProps?.className??""}`},/*#__PURE__*/React.createElement("div",{className:"w-256"},children)):null)};export default Tooltip;
+import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";import{determineThemeColor}from"./styles/colors/utils";const Tooltip=({children,triggerProps,tooltipProps,theme="dark",...rest})=>{const[open,setOpen]=useState(false);const[fadeOut,setFadeOut]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);const t=color=>determineThemeColor("light",theme,color);useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);return /*#__PURE__*/React.createElement("div",{...rest,className:`relative inline-block align-top h-16 ${rest?.className??""}`},/*#__PURE__*/React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>{setFadeOut(true);setTimeout(()=>{setOpen(false);setFadeOut(false)},250)},type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`ml-8 p-0 relative top-1 focus:outline-none ${triggerProps?.className??""}`},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-info",color:`${t("text-neutral-800")}`,size:"1rem"})),open?/*#__PURE__*/React.createElement("div",{role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:`${t("bg-neutral-1000")} ${t("text-neutral-200")} ui-text-p3 font-medium p-16 rounded-lg pointer-events-none absolute z-50 ${tooltipProps?.className??""} ${fadeOut?"animate-[tooltipExit_0.25s_ease-in-out]":"animate-[tooltipEntry_0.25s_ease-in-out]"}`},/*#__PURE__*/React.createElement("div",{className:"w-[240px]"},children)):null)};export default Tooltip;

package.json

 {
   "name": "@ably/ui",
-  "version": "14.6.1",
+  "version": "14.6.2-dev.7b98b73",
   "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.",
@@ -5,0 +5,0 @@ "repository": {

tailwind.config.js

@@ -14,3 +14,3 @@ module.exports = {
         /^(text|bg|from|to)-(neutral|orange|yellow|green|blue|violet|pink)-[\d]{1,2}00.*/,
-      variants: ["hover", "focus"],
+      variants: ["hover", "focus", "group-hover"],
     },
@@ -323,2 +323,12 @@ ],
       },
+      keyframes: {
+        tooltipEntry: {
+          "0%": { transform: "translateY(8px)", opacity: 0 },
+          "100%": { transform: "translateY(0)", opacity: 1 },
+        },
+        tooltipExit: {
+          "0%": { opacity: 1 },
+          "100%": { opacity: 0 },
+        },
+      },
     },
@@ -325,0 +335,0 @@ listStyleType: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 26 instances in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3632531

increased by5.73%

Number of package files

358

increased by7.83%

Lines of code

3429

increased by3.91%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

46

increased by130%

No dependency changes