@ably/ui 14.5.0-dev.c1c587f → 14.5.1

package/core/Code.js

@@ -1 +1 @@
-import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS=""})=>{const HTMLraw=highlightSnippet(language,`${snippet}`.trim())??"";const className=`language-${language} ${textSize}`;return /*#__PURE__*/React.createElement("div",{className:`hljs overflow-auto ${padding} ${additionalCSS}`,"data-id":"code"},/*#__PURE__*/React.createElement("pre",{lang:language},/*#__PURE__*/React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;
+import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS="",showLines,lineCSS})=>{const HTMLraw=highlightSnippet(language,`${snippet}`.trim())??"";const className=`language-${language} ${textSize}`;const lineCount=snippet.split(/\r\n|\r|\n/).length;return /*#__PURE__*/React.createElement("div",{className:`hljs overflow-auto flex ${padding} ${additionalCSS}`,"data-id":"code"},showLines?/*#__PURE__*/React.createElement("div",null,[...Array(lineCount)].map((_,i)=>/*#__PURE__*/React.createElement("p",{className:`mr-24 font-mono text-neutral-800 ${lineCSS??""}`,key:i},i+1))):null,/*#__PURE__*/React.createElement("pre",{lang:language},/*#__PURE__*/React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;

package/core/Icon.js

@@ -1 +1 @@
-import React from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";const Icon=({name,size="0.75rem",color="",secondaryColor=defaultIconSecondaryColor(name),additionalCSS="",...additionalAttributes})=>/*#__PURE__*/React.createElement("svg",{className:`${color} ${additionalCSS}`,style:{width:size,height:size,...secondaryColor&&{"--ui-icon-secondary-color":secondaryColor}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}));export default Icon;
+import React from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";const convertTailwindClassToVar=className=>className.replace(/(text|bg)-([a-z0-9-]+)/gi,"var(--color-$2)");const Icon=({name,size="0.75rem",color="",secondaryColor=defaultIconSecondaryColor(name),additionalCSS="",...additionalAttributes})=>/*#__PURE__*/React.createElement("svg",{className:`${color} ${additionalCSS}`,style:{width:size,height:size,...secondaryColor&&{"--ui-icon-secondary-color":convertTailwindClassToVar(secondaryColor)}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}));export default Icon;

package/core/ProductTile.js

@@ -1 +1 @@
-import React from"react";import Icon from"./Icon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";const ProductTile=({name,selected,currentPage})=>{const{icon,label,description,link,unavailable}=products[name]??{};return /*#__PURE__*/React.createElement("div",{className:`rounded-lg p-12 flex flex-col gap-8 transition-colors ${selected?"bg-neutral-300":"bg-neutral-1200 hover:bg-neutral-1100"}`},/*#__PURE__*/React.createElement("div",{className:"flex gap-12"},icon?/*#__PURE__*/React.createElement(Icon,{name:icon,size:"48"}):null,/*#__PURE__*/React.createElement("div",{className:`flex ${unavailable?"flex-row items-center gap-4":"flex-col justify-center"} `},/*#__PURE__*/React.createElement("p",{className:`${unavailable?"ui-text-p2":"ui-text-p3"} ${selected?"text-neutral-800":"text-neutral-500"} font-medium`},"Ably"," "),/*#__PURE__*/React.createElement("p",{className:`ui-text-p2 ${selected?"text-neutral-1300":"text-neutral-300"} font-bold ${unavailable?"":"mt-[-3px]"}`},label))),unavailable?/*#__PURE__*/React.createElement("div",{className:"-mt-8"},/*#__PURE__*/React.createElement("div",{className:"table-cell bg-neutral-1000 rounded-full px-6 py-2 text-neutral-600 tracking-tighten-0.015 font-bold text-[8px] leading-snug"},"COMING SOON")):null,/*#__PURE__*/React.createElement("p",{className:`ui-text-p3 ${selected?"text-neutral-1000":"text-neutral-700"} font-medium leading-snug`},description),selected&&link?/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`ui-btn-secondary w-full hover:text-neutral-1300 mt-8 text-center inline-block ${selected?"text-neutral-1300":"text-white"}`,iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
+import React from"react";import Icon from"./Icon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";const ProductTile=({name,selected,currentPage,className,onClick})=>{const{icon,label,description,link,unavailable}=products[name]??{};return /*#__PURE__*/React.createElement("div",{className:`rounded-lg p-12 flex flex-col gap-8 transition-colors ${selected?"bg-neutral-300":"bg-neutral-1200 hover:bg-neutral-1100"} ${className??""}`,onClick:onClick},/*#__PURE__*/React.createElement("div",{className:"flex gap-12"},icon?/*#__PURE__*/React.createElement(Icon,{name:icon,size:"48"}):null,/*#__PURE__*/React.createElement("div",{className:`flex ${unavailable?"flex-row items-center gap-4":"flex-col justify-center"} `},/*#__PURE__*/React.createElement("p",{className:`${unavailable?"ui-text-p2":"ui-text-p3"} ${selected?"text-neutral-800":"text-neutral-500"} font-medium`},"Ably"," "),/*#__PURE__*/React.createElement("p",{className:`ui-text-p2 ${selected?"text-neutral-1300":"text-neutral-300"} font-bold ${unavailable?"":"mt-[-3px]"}`},label))),unavailable?/*#__PURE__*/React.createElement("div",{className:"-mt-8"},/*#__PURE__*/React.createElement("div",{className:"table-cell bg-neutral-1000 rounded-full px-6 py-2 text-neutral-600 tracking-tighten-0.015 font-bold text-[8px] leading-snug"},"COMING SOON")):null,/*#__PURE__*/React.createElement("p",{className:`ui-text-p3 ${selected?"text-neutral-1000":"text-neutral-700"} font-medium leading-snug`},description),selected&&link?/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`ui-btn-secondary w-full hover:text-neutral-1300 mt-8 text-center inline-block ${selected?"text-neutral-1300":"text-white"}`,iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;

package/index.d.ts

@@ -27,8 +27,10 @@ type CodeProps = {
     textSize?: string;
     padding?: string;
     additionalCSS?: string;
+    showLines?: boolean;
+    lineCSS?: string;
 };
-const Code: ({ language, snippet, textSize, padding, additionalCSS, }: CodeProps) => import("react/jsx-runtime").JSX.Element;
+const Code: ({ language, snippet, textSize, padding, additionalCSS, showLines, lineCSS, }: CodeProps) => import("react/jsx-runtime").JSX.Element;
 export default Code;
 //# sourceMappingURL=Code.d.ts.map
 }
@@ -613,8 +615,10 @@ type ProductTileProps = {
     name: ProductName;
     selected?: boolean;
     currentPage?: boolean;
+    className?: string;
+    onClick?: () => void;
 };
-const ProductTile: ({ name, selected, currentPage }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
+const ProductTile: ({ name, selected, currentPage, className, onClick, }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductTile;
 //# sourceMappingURL=ProductTile.d.ts.map
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.5.0-dev.c1c587f",
+  "version": "14.5.1",
   "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",