@ably/ui 15.1.4-dev.0746ac8 → 15.1.4

package/core/Accordion.js

@@ -1 +1 @@
-import React,{useMemo,useState}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return /*#__PURE__*/React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},/*#__PURE__*/React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-blue-focus":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),/*#__PURE__*/React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options,...props})=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const innerAccordion=data.map((item,index)=>/*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues},item.content));return /*#__PURE__*/React.createElement("div",props,options?.autoClose?/*#__PURE__*/React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):/*#__PURE__*/React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))};export default Accordion;
+import React,{useMemo,useState}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return /*#__PURE__*/React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},/*#__PURE__*/React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),/*#__PURE__*/React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options,...props})=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const innerAccordion=data.map((item,index)=>/*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues},item.content));return /*#__PURE__*/React.createElement("div",props,options?.autoClose?/*#__PURE__*/React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):/*#__PURE__*/React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))};export default Accordion;

package/core/Badge.js

@@ -0,0 +1 @@
+import React,{useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";const Badge=({size="md",color="neutral",iconBefore,iconAfter,className,children,disabled=false,focusable=false,hoverable=false,iconSize="12px",ariaLabel})=>{const sizeClass=useMemo(()=>{switch(size){case"xs":return"px-8 py-0 text-[10px] leading-tight";case"sm":return"px-8 py-2 text-[10px] leading-tight";case"md":return"px-[10px] py-2 text-[11px] leading-normal";case"lg":return"px-12 py-[3px] text-[12px] leading-normal"}},[size]);const childClass=useMemo(()=>{switch(size){case"xs":case"sm":return"leading-[18px]";case"md":case"lg":return"leading-[20px]"}},[size]);const colorClass=useMemo(()=>{switch(color){case"neutral":return"text-neutral-900 dark:text-neutral-400";case"violet":return"text-violet-400";case"orange":return"text-orange-600";case"yellow":return"text-yellow-600";case"green":return"text-green-600";case"blue":return"text-blue-600";case"pink":return"text-pink-600";case"red":return"text-orange-700"}},[color]);return /*#__PURE__*/React.createElement("div",{className:cn("inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-4 items-center focus-base transition-colors select-none font-semibold",sizeClass,colorClass,{"focus-base":focusable},{"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000":hoverable},{"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark":disabled},className),tabIndex:focusable?0:undefined,"aria-label":focusable||hoverable?ariaLabel:undefined},iconBefore?/*#__PURE__*/React.createElement(Icon,{name:iconBefore,size:iconSize,color:colorClass}):null,/*#__PURE__*/React.createElement("span",{className:cn("whitespace-nowrap tracking-widen-0.04",childClass)},children),iconAfter?/*#__PURE__*/React.createElement(Icon,{name:iconAfter,size:iconSize,color:colorClass}):null)};export default Badge;

package/core/Toggle.js

@@ -1 +1 @@
-import*as Switch from"@radix-ui/react-switch";import React from"react";import cn from"./utils/cn";const Toggle=({id,size,label,className,...props})=>{const rootSize=size==="small"?"w-[42px] h-[24px]":"w-[56px] h-32";const thumbSize=size==="small"?"w-[21px] h-[21px] translate-x-1 data-[state=checked]:translate-x-[20px]":"h-[28px] w-[28px] translate-x-2  data-[state=checked]:translate-x-[26px]";return /*#__PURE__*/React.createElement("div",{className:"flex items-center"},/*#__PURE__*/React.createElement(Switch.Root,{className:cn("p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus",className,rootSize),id:id,...props},/*#__PURE__*/React.createElement(Switch.Thumb,{className:`block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform ${thumbSize}`})),label?/*#__PURE__*/React.createElement("label",{className:"ml-16",htmlFor:id},label):null)};export default Toggle;
+import*as Switch from"@radix-ui/react-switch";import React from"react";import cn from"./utils/cn";const Toggle=({id,size="lg",label,className,...props})=>{const rootSize=size==="sm"?"w-[42px] h-24":"w-[56px] h-32";const thumbSize=size==="sm"?"w-[21px] h-[21px] translate-x-1 data-[state=checked]:translate-x-[20px]":"h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]";return /*#__PURE__*/React.createElement("div",{className:"flex items-center"},/*#__PURE__*/React.createElement(Switch.Root,{className:cn("p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus-base",className,rootSize),id:id,...props},/*#__PURE__*/React.createElement(Switch.Thumb,{className:cn(`block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform`,thumbSize)})),label?/*#__PURE__*/React.createElement("label",{className:"ml-16",htmlFor:id},label):null)};export default Toggle;

package/core/styles/buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-button-base {
-    @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-blue-focus disabled:cursor-not-allowed;
+    @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus-base disabled:cursor-not-allowed;
   }
 
   .ui-button-lg-base {

package/core/styles/dropdowns.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-dropdown-base {
-    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-none focus-visible:outline-gui-focus focus-visible:outline-4 focus-visible:outline-offset-0;
+    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus-base;
     @apply bg-no-repeat text-p2 flex font-medium bg-neutral-100 transition-colors;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
     background-position: center right 16px;

package/core/styles/forms.css

@@ -123,7 +123,7 @@
 
   .ui-input {
     @apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600;
-    @apply hover:border-neutral-700 focus:bg-white focus:outline-none focus-visible:outline-gui-focus focus-visible:outline-offset-0 focus-visible:outline-4;
+    @apply hover:border-neutral-700 focus:bg-white focus-base;
     @apply max-w-screen-sm invalid:border-gui-error-red;
   }
 
@@ -140,7 +140,7 @@
   }
 
   .ui-radio {
-    @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus-visible:outline-4 focus-visible:outline-gui-blue-focus;
+    @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus-base;
   }
 
   .ui-radio:checked {

package/core/styles/legacy-buttons.css

@@ -3,7 +3,7 @@
     @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-neutral-1100;
     @apply active:text-white active:bg-neutral-1200;
-    @apply focus:text-white focus:bg-cool-black focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
+    @apply focus:text-white focus:bg-cool-black focus-base;
     @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
@@ -25,7 +25,7 @@
     background-position: 0% 0%;
 
     @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
+    @apply focus-base;
     @apply inline-flex items-center justify-center;
   }
 
@@ -43,7 +43,7 @@
     @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
-    @apply focus:text-white focus:bg-cool-black focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
+    @apply focus:text-white focus:bg-cool-black focus-base;
     @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
@@ -53,7 +53,7 @@
     @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
-    @apply focus:border-cool-black focus:bg-white focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
+    @apply focus:border-cool-black focus:bg-white focus-base;
     @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
@@ -63,7 +63,7 @@
     @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
-    @apply focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
+    @apply focus-base;
     @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;

package/core/styles/properties.css

@@ -223,6 +223,7 @@
     --ls-widen-0_1: 0.1em;
     --ls-widen-0_16: 0.16em;
     --ls-widen-0_15: 0.15em;
+    --ls-widen-0_04: 0.04em;
 
     --spacing-0: 0px;
     --spacing-1: 1px;

package/core/styles/text.css

@@ -176,13 +176,13 @@
   .ui-link {
     @apply text-gui-default;
     @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-    @apply focus:text-gui-default focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
+    @apply focus:text-gui-default focus-base;
     @apply no-underline;
   }
 
   .ui-link-neutral {
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-charcoal-grey focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
+    @apply focus:text-charcoal-grey focus-base;
     @apply underline;
   }
 

package/core/styles/utils.css

@@ -0,0 +1,3 @@
+.focus-base {
+  @apply focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
+}

package/core/styles.components.css

@@ -1,3 +1,4 @@
+@import "./styles/utils.css";
 @import "./styles/buttons.css";
 @import "./styles/legacy-buttons.css";
 @import "./styles/dropdowns.css";

package/index.d.ts

@@ -168,6 +168,60 @@ export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map
 }
 
+declare module '@ably/ui/core/Badge' {
+import React, { PropsWithChildren } from "react";
+import { IconName, IconSize } from "@ably/ui/core/Icon/types";
+import { ColorClassColorGroups } from "@ably/ui/core/styles/colors/types";
+/**
+ * Props for the Badge component.
+ */
+interface BadgeProps {
+    /**
+     * The size of the badge. Can be one of "xs", "sm", "md", or "lg".
+     */
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * The color of the badge. Can be a value from ColorClassColorGroups or "red".
+     */
+    color?: ColorClassColorGroups | "red";
+    /**
+     * The name of the icon to be displayed before the children in the badge.
+     */
+    iconBefore?: IconName;
+    /**
+     * The name of the icon to be displayed after the children in the badge.
+     */
+    iconAfter?: IconName;
+    /**
+     * Additional CSS class names to apply to the badge.
+     */
+    className?: string;
+    /**
+     * Whether the badge is disabled. Defaults to false.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the badge is focusable. Defaults to false.
+     */
+    focusable?: boolean;
+    /**
+     * Whether the badge is hoverable. Defaults to false.
+     */
+    hoverable?: boolean;
+    /**
+     * The size of the icons in the badge. Defaults to 12px.
+     */
+    iconSize?: IconSize;
+    /**
+     * Accessible label for the badge when interactive
+     */
+    ariaLabel?: string;
+}
+const Badge: React.FC<PropsWithChildren<BadgeProps>>;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map
+}
+
 declare module '@ably/ui/core/Button' {
 import React, { PropsWithChildren } from "react";
 import { IconName } from "@ably/ui/core/Icon/types";
@@ -1094,9 +1148,10 @@ declare module '@ably/ui/core/Toggle' {
 import React from "react";
 type ToggleProps = {
     id: string;
-    size?: string;
+    size?: "sm" | "lg";
     label?: string;
     className?: string;
+    onCheckedChange?: (checked: boolean) => void;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 const Toggle: React.FC<ToggleProps>;
 export default Toggle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.1.4-dev.0746ac8",
+  "version": "15.1.4",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

package/tailwind.config.js

@@ -279,6 +279,7 @@ module.exports = {
       "widen-0.1": "var(--ls-widen-0_1)",
       "widen-0.15": "var(--ls-widen-0_15)",
       "widen-0.16": "var(--ls-widen-0_16)",
+      "widen-0.04": "var(--ls-widen-0_04)",
     },
     extend: {
       backgroundImage: {