@ably/ui 17.11.0 → 17.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/Badge.js +1 -1
- package/core/Badge.js.map +1 -1
- package/core/Meganav/MeganavCustomerStories.js +1 -1
- package/core/Meganav/MeganavCustomerStories.js.map +1 -1
- package/core/styles/buttons.css +2 -2
- package/core/styles/properties.css +4 -4
- package/index.d.ts +1 -1
- package/package.json +8 -8
package/core/Badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";const Badge=({size="md",color="neutral",iconBefore,iconAfter,className,childClassName,children,disabled=false,focusable=false,hoverable=false,iconSize
|
|
1
|
+
import React,{useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";const defaultIconSizeByBadgeSize={lg:"16px",md:"15px",sm:"14px",xs:"13px"};const Badge=({size="md",color="neutral",iconBefore,iconAfter,className,childClassName,children,disabled=false,focusable=false,hoverable=false,iconSize,ariaLabel})=>{const sizeClass=useMemo(()=>{switch(size){case"xs":return"px-2 py-0 text-[10px] leading-tight";case"sm":return"px-2 py-0.5 text-[10px] leading-tight";case"md":return"px-2.5 py-0.5 text-[11px] leading-normal";case"lg":return"px-3 py-[0.1875rem] 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]);const computedIconSize=iconSize??defaultIconSizeByBadgeSize[size];return React.createElement("div",{className:cn("inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 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,role:focusable?"button":undefined,"aria-label":focusable||hoverable?ariaLabel:undefined},iconBefore?React.createElement(Icon,{name:iconBefore,size:computedIconSize,color:colorClass}):null,React.createElement("span",{className:cn("whitespace-nowrap tracking-[0.04em]",childClass,childClassName)},children),iconAfter?React.createElement(Icon,{name:iconAfter,size:computedIconSize,color:colorClass}):null)};export default Badge;
|
|
2
2
|
//# sourceMappingURL=Badge.js.map
|
package/core/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Badge.tsx"],"sourcesContent":["import React, { PropsWithChildren, useMemo } from \"react\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { ColorClassColorGroups } from \"./styles/colors/types\";\n\n/**\n * Props for the Badge component.\n */\nexport interface BadgeProps {\n /**\n * The size of the badge. Can be one of \"xs\", \"sm\", \"md\", or \"lg\".\n */\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n /**\n * The color of the badge. Can be a value from ColorClassColorGroups or \"red\".\n */\n color?: ColorClassColorGroups | \"red\";\n\n /**\n * The name of the icon to be displayed before the children in the badge.\n */\n iconBefore?: IconName;\n\n /**\n * The name of the icon to be displayed after the children in the badge.\n */\n iconAfter?: IconName;\n\n /**\n * Additional CSS class names to apply to the badge.\n */\n className?: string;\n\n /**\n * Whether the badge is disabled. Defaults to false.\n */\n disabled?: boolean;\n\n /**\n * Whether the badge is focusable. Defaults to false.\n */\n focusable?: boolean;\n\n /**\n * Whether the badge is hoverable. Defaults to false.\n */\n hoverable?: boolean;\n\n /**\n * The size of the icons in the badge.
|
|
1
|
+
{"version":3,"sources":["../../src/core/Badge.tsx"],"sourcesContent":["import React, { PropsWithChildren, useMemo } from \"react\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { ColorClassColorGroups } from \"./styles/colors/types\";\n\n/**\n * Props for the Badge component.\n */\nexport interface BadgeProps {\n /**\n * The size of the badge. Can be one of \"xs\", \"sm\", \"md\", or \"lg\".\n */\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n /**\n * The color of the badge. Can be a value from ColorClassColorGroups or \"red\".\n */\n color?: ColorClassColorGroups | \"red\";\n\n /**\n * The name of the icon to be displayed before the children in the badge.\n */\n iconBefore?: IconName;\n\n /**\n * The name of the icon to be displayed after the children in the badge.\n */\n iconAfter?: IconName;\n\n /**\n * Additional CSS class names to apply to the badge.\n */\n className?: string;\n\n /**\n * Whether the badge is disabled. Defaults to false.\n */\n disabled?: boolean;\n\n /**\n * Whether the badge is focusable. Defaults to false.\n */\n focusable?: boolean;\n\n /**\n * Whether the badge is hoverable. Defaults to false.\n */\n hoverable?: boolean;\n\n /**\n * The size of the icons in the badge. If not provided, it will be derived from the badge size.\n */\n iconSize?: IconSize;\n\n /**\n * Accessible label for the badge when interactive\n */\n ariaLabel?: string;\n\n /**\n * Additional CSS class names to apply to the children of the badge.\n */\n childClassName?: string;\n}\n\nconst defaultIconSizeByBadgeSize: Record<\n NonNullable<BadgeProps[\"size\"]>,\n IconSize\n> = {\n lg: \"16px\",\n md: \"15px\",\n sm: \"14px\",\n xs: \"13px\",\n};\n\nconst Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n size = \"md\",\n color = \"neutral\",\n iconBefore,\n iconAfter,\n className,\n childClassName,\n children,\n disabled = false,\n focusable = false,\n hoverable = false,\n iconSize,\n ariaLabel,\n}) => {\n const sizeClass = useMemo(() => {\n switch (size) {\n case \"xs\":\n return \"px-2 py-0 text-[10px] leading-tight\";\n case \"sm\":\n return \"px-2 py-0.5 text-[10px] leading-tight\";\n case \"md\":\n return \"px-2.5 py-0.5 text-[11px] leading-normal\";\n case \"lg\":\n return \"px-3 py-[0.1875rem] text-[12px] leading-normal\";\n }\n }, [size]);\n\n const childClass = useMemo(() => {\n switch (size) {\n case \"xs\":\n case \"sm\":\n return \"leading-[18px]\";\n case \"md\":\n case \"lg\":\n return \"leading-[20px]\";\n }\n }, [size]);\n\n const colorClass = useMemo(() => {\n switch (color) {\n case \"neutral\":\n return \"text-neutral-900 dark:text-neutral-400\";\n case \"violet\":\n return \"text-violet-400\";\n case \"orange\":\n return \"text-orange-600\";\n case \"yellow\":\n return \"text-yellow-600\";\n case \"green\":\n return \"text-green-600\";\n case \"blue\":\n return \"text-blue-600\";\n case \"pink\":\n return \"text-pink-600\";\n case \"red\":\n return \"text-orange-700\";\n }\n }, [color]);\n\n const computedIconSize = iconSize ?? defaultIconSizeByBadgeSize[size];\n\n return (\n <div\n className={cn(\n \"inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold\",\n sizeClass,\n colorClass,\n { \"focus-base\": focusable },\n {\n \"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000\":\n hoverable,\n },\n {\n \"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark\":\n disabled,\n },\n className,\n )}\n tabIndex={focusable ? 0 : undefined}\n role={focusable ? \"button\" : undefined}\n aria-label={focusable || hoverable ? ariaLabel : undefined}\n >\n {iconBefore ? (\n <Icon name={iconBefore} size={computedIconSize} color={colorClass} />\n ) : null}\n\n <span\n className={cn(\n \"whitespace-nowrap tracking-[0.04em]\",\n childClass,\n childClassName,\n )}\n >\n {children}\n </span>\n\n {iconAfter ? (\n <Icon name={iconAfter} size={computedIconSize} color={colorClass} />\n ) : null}\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["React","useMemo","Icon","cn","defaultIconSizeByBadgeSize","lg","md","sm","xs","Badge","size","color","iconBefore","iconAfter","className","childClassName","children","disabled","focusable","hoverable","iconSize","ariaLabel","sizeClass","childClass","colorClass","computedIconSize","div","tabIndex","undefined","role","aria-label","name","span"],"mappings":"AAAA,OAAOA,OAA4BC,OAAO,KAAQ,OAAQ,AAE1D,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CA+D5B,MAAMC,2BAGF,CACFC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,MACN,EAEA,MAAMC,MAAiD,CAAC,CACtDC,KAAO,IAAI,CACXC,MAAQ,SAAS,CACjBC,UAAU,CACVC,SAAS,CACTC,SAAS,CACTC,cAAc,CACdC,QAAQ,CACRC,SAAW,KAAK,CAChBC,UAAY,KAAK,CACjBC,UAAY,KAAK,CACjBC,QAAQ,CACRC,SAAS,CACV,IACC,MAAMC,UAAYrB,QAAQ,KACxB,OAAQS,MACN,IAAK,KACH,MAAO,qCACT,KAAK,KACH,MAAO,uCACT,KAAK,KACH,MAAO,0CACT,KAAK,KACH,MAAO,gDACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMa,WAAatB,QAAQ,KACzB,OAAQS,MACN,IAAK,KACL,IAAK,KACH,MAAO,gBACT,KAAK,KACL,IAAK,KACH,MAAO,gBACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMc,WAAavB,QAAQ,KACzB,OAAQU,OACN,IAAK,UACH,MAAO,wCACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,QACH,MAAO,gBACT,KAAK,OACH,MAAO,eACT,KAAK,OACH,MAAO,eACT,KAAK,MACH,MAAO,iBACX,CACF,EAAG,CAACA,MAAM,EAEV,MAAMc,iBAAmBL,UAAYhB,0BAA0B,CAACM,KAAK,CAErE,OACE,oBAACgB,OACCZ,UAAWX,GACT,wIACAmB,UACAE,WACA,CAAE,aAAcN,SAAU,EAC1B,CACE,oGACEC,SACJ,EACA,CACE,2FACEF,QACJ,EACAH,WAEFa,SAAUT,UAAY,EAAIU,UAC1BC,KAAMX,UAAY,SAAWU,UAC7BE,aAAYZ,WAAaC,UAAYE,UAAYO,WAEhDhB,WACC,oBAACV,MAAK6B,KAAMnB,WAAYF,KAAMe,iBAAkBd,MAAOa,aACrD,KAEJ,oBAACQ,QACClB,UAAWX,GACT,sCACAoB,WACAR,iBAGDC,UAGFH,UACC,oBAACX,MAAK6B,KAAMlB,UAAWH,KAAMe,iBAAkBd,MAAOa,aACpD,KAGV,CAEA,gBAAef,KAAM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import{PanelTitle}from"./PanelTitle";import MeganavPanelItemLinks from"./MeganavPanelItemLinks";const MeganavCustomerStories=({customerStoriesHighlight,title,link,icon})=>{const{companyName,companyDesc,companyLink,companyLogo,companyLogoDark}=customerStoriesHighlight;return React.createElement(React.Fragment,null,React.createElement("div",{className:"mt-3 hidden md:block"},React.createElement(PanelTitle,{title:title,link:link}),React.createElement("a",{href:companyLink,className:"flex flex-col gap-y-2.5 p-3 pointer-events-auto rounded-lg transition-colors group/customer-story-highlight hover:bg-neutral-100 dark:hover:bg-neutral-1200 focus-base active:bg-neutral-200 dark:active:bg-neutral-1100"},React.createElement("figure",{className:"rounded bg-neutral-100 dark:bg-neutral-1200 group-hover/customer-story-highlight:bg-neutral-000 dark:group-hover/customer-story-highlight:bg-neutral-1300 flex justify-center items-center gap-4 h-[
|
|
1
|
+
import React from"react";import{PanelTitle}from"./PanelTitle";import MeganavPanelItemLinks from"./MeganavPanelItemLinks";const MeganavCustomerStories=({customerStoriesHighlight,title,link,icon})=>{const{companyName,companyDesc,companyLink,companyLogo,companyLogoDark}=customerStoriesHighlight;return React.createElement(React.Fragment,null,React.createElement("div",{className:"mt-3 hidden md:block"},React.createElement(PanelTitle,{title:title,link:link}),React.createElement("a",{href:companyLink,className:"flex flex-col gap-y-2.5 p-3 pointer-events-auto rounded-lg transition-colors group/customer-story-highlight hover:bg-neutral-100 dark:hover:bg-neutral-1200 focus-base active:bg-neutral-200 dark:active:bg-neutral-1100"},React.createElement("figure",{className:"rounded bg-neutral-100 dark:bg-neutral-1200 group-hover/customer-story-highlight:bg-neutral-000 dark:group-hover/customer-story-highlight:bg-neutral-1300 flex justify-center items-center gap-4 h-[120px]"},React.createElement("img",{src:companyLogo,alt:companyName,className:"max-h-[90px] max-w-[180px] dark:hidden"}),companyLogoDark&&React.createElement("img",{src:companyLogoDark,alt:companyName,className:"max-h-[90px] max-w-[180px] hidden dark:block"})),React.createElement("span",{className:"flex flex-col gap-2"},React.createElement("span",{className:"ui-text-p4 text-neutral-1000 dark:text-neutral-300"},React.createElement("strong",{className:"font-semibold text-neutral-1300 dark:text-neutral-000"},companyName)," ",companyDesc)))),React.createElement("div",{className:"block md:hidden"},React.createElement(MeganavPanelItemLinks,{listItems:[{label:title,link:link,icon:icon}]})))};export default MeganavCustomerStories;
|
|
2
2
|
//# sourceMappingURL=MeganavCustomerStories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Meganav/MeganavCustomerStories.tsx"],"sourcesContent":["import React from \"react\";\nimport { PanelTitle } from \"./PanelTitle\";\nimport MeganavPanelItemLinks from \"./MeganavPanelItemLinks\";\nimport { IconName } from \"../Icon/types\";\n\nexport type CustomerStoryHighlight = {\n companyName: string;\n companyDesc: string;\n companyLink: string;\n companyLogo: string;\n companyLogoDark?: string;\n};\n\nconst MeganavCustomerStories = ({\n customerStoriesHighlight,\n title,\n link,\n icon,\n}: {\n customerStoriesHighlight: CustomerStoryHighlight;\n title: string;\n link: string;\n icon?: IconName;\n}) => {\n const {\n companyName,\n companyDesc,\n companyLink,\n companyLogo,\n companyLogoDark,\n } = customerStoriesHighlight;\n return (\n <>\n <div className=\"mt-3 hidden md:block\">\n <PanelTitle title={title} link={link} />\n <a\n href={companyLink}\n className=\"flex flex-col gap-y-2.5 p-3 pointer-events-auto rounded-lg\n transition-colors group/customer-story-highlight \n hover:bg-neutral-100 dark:hover:bg-neutral-1200 focus-base\n active:bg-neutral-200 dark:active:bg-neutral-1100\"\n >\n <figure\n className=\"rounded bg-neutral-100 dark:bg-neutral-1200 \n group-hover/customer-story-highlight:bg-neutral-000 \n dark:group-hover/customer-story-highlight:bg-neutral-1300\n flex justify-center items-center gap-4 h-[
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Meganav/MeganavCustomerStories.tsx"],"sourcesContent":["import React from \"react\";\nimport { PanelTitle } from \"./PanelTitle\";\nimport MeganavPanelItemLinks from \"./MeganavPanelItemLinks\";\nimport { IconName } from \"../Icon/types\";\n\nexport type CustomerStoryHighlight = {\n companyName: string;\n companyDesc: string;\n companyLink: string;\n companyLogo: string;\n companyLogoDark?: string;\n};\n\nconst MeganavCustomerStories = ({\n customerStoriesHighlight,\n title,\n link,\n icon,\n}: {\n customerStoriesHighlight: CustomerStoryHighlight;\n title: string;\n link: string;\n icon?: IconName;\n}) => {\n const {\n companyName,\n companyDesc,\n companyLink,\n companyLogo,\n companyLogoDark,\n } = customerStoriesHighlight;\n return (\n <>\n <div className=\"mt-3 hidden md:block\">\n <PanelTitle title={title} link={link} />\n <a\n href={companyLink}\n className=\"flex flex-col gap-y-2.5 p-3 pointer-events-auto rounded-lg\n transition-colors group/customer-story-highlight \n hover:bg-neutral-100 dark:hover:bg-neutral-1200 focus-base\n active:bg-neutral-200 dark:active:bg-neutral-1100\"\n >\n <figure\n className=\"rounded bg-neutral-100 dark:bg-neutral-1200 \n group-hover/customer-story-highlight:bg-neutral-000 \n dark:group-hover/customer-story-highlight:bg-neutral-1300\n flex justify-center items-center gap-4 h-[120px]\"\n >\n <img\n src={companyLogo}\n alt={companyName}\n className=\"max-h-[90px] max-w-[180px] dark:hidden\"\n />\n {companyLogoDark && (\n <img\n src={companyLogoDark}\n alt={companyName}\n className=\"max-h-[90px] max-w-[180px] hidden dark:block\"\n />\n )}\n </figure>\n <span className=\"flex flex-col gap-2\">\n <span className=\"ui-text-p4 text-neutral-1000 dark:text-neutral-300\">\n <strong className=\"font-semibold text-neutral-1300 dark:text-neutral-000\">\n {companyName}\n </strong>{\" \"}\n {companyDesc}\n </span>\n </span>\n </a>\n </div>\n <div className=\"block md:hidden\">\n <MeganavPanelItemLinks\n listItems={[\n {\n label: title,\n link: link,\n icon: icon,\n },\n ]}\n />\n </div>\n </>\n );\n};\n\nexport default MeganavCustomerStories;\n"],"names":["React","PanelTitle","MeganavPanelItemLinks","MeganavCustomerStories","customerStoriesHighlight","title","link","icon","companyName","companyDesc","companyLink","companyLogo","companyLogoDark","div","className","a","href","figure","img","src","alt","span","strong","listItems","label"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAASC,UAAU,KAAQ,cAAe,AAC1C,QAAOC,0BAA2B,yBAA0B,CAW5D,MAAMC,uBAAyB,CAAC,CAC9BC,wBAAwB,CACxBC,KAAK,CACLC,IAAI,CACJC,IAAI,CAML,IACC,KAAM,CACJC,WAAW,CACXC,WAAW,CACXC,WAAW,CACXC,WAAW,CACXC,eAAe,CAChB,CAAGR,yBACJ,OACE,wCACE,oBAACS,OAAIC,UAAU,wBACb,oBAACb,YAAWI,MAAOA,MAAOC,KAAMA,OAChC,oBAACS,KACCC,KAAMN,YACNI,UAAU,6NAKV,oBAACG,UACCH,UAAU,gNAKV,oBAACI,OACCC,IAAKR,YACLS,IAAKZ,YACLM,UAAU,2CAEXF,iBACC,oBAACM,OACCC,IAAKP,gBACLQ,IAAKZ,YACLM,UAAU,kDAIhB,oBAACO,QAAKP,UAAU,uBACd,oBAACO,QAAKP,UAAU,sDACd,oBAACQ,UAAOR,UAAU,yDACfN,aACO,IACTC,gBAKT,oBAACI,OAAIC,UAAU,mBACb,oBAACZ,uBACCqB,UAAW,CACT,CACEC,MAAOnB,MACPC,KAAMA,KACNC,KAAMA,IACR,EACD,IAKX,CAEA,gBAAeJ,sBAAuB"}
|
package/core/styles/buttons.css
CHANGED
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
.ui-button-secondary-base {
|
|
47
|
-
@apply text-neutral-1300 active:text-neutral-1000 border border-neutral-
|
|
47
|
+
@apply text-neutral-1300 active:text-neutral-1000 border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 disabled:border-gui-unavailable disabled:text-gui-unavailable;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.ui-theme-dark .ui-button-secondary-base {
|
|
51
|
-
@apply text-neutral-000 active:text-neutral-300 border-neutral-
|
|
51
|
+
@apply text-neutral-000 active:text-neutral-300 border-neutral-900 hover:border-neutral-700 active:border-neutral-800 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.ui-button-priority-lg {
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
--color-neutral-600: #a7b1be;
|
|
11
11
|
--color-neutral-700: #8992a4;
|
|
12
12
|
--color-neutral-800: #687288;
|
|
13
|
-
--color-neutral-900: #
|
|
14
|
-
--color-neutral-1000: #
|
|
13
|
+
--color-neutral-900: #575d71;
|
|
14
|
+
--color-neutral-1000: #3f4555;
|
|
15
15
|
--color-neutral-1100: #2c3344;
|
|
16
16
|
--color-neutral-1200: #141924;
|
|
17
17
|
--color-neutral-1300: #03020d;
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
--color-gui-blue-hover-dark: #2894ff;
|
|
86
86
|
--color-gui-blue-active-dark: #0080ff;
|
|
87
87
|
--color-gui-blue-focus: #80b9f2;
|
|
88
|
-
--color-gui-unavailable: #
|
|
89
|
-
--color-gui-unavailable-dark: #
|
|
88
|
+
--color-gui-unavailable: #AFB9C5;
|
|
89
|
+
--color-gui-unavailable-dark: #676B7A;
|
|
90
90
|
--color-gui-success-green: #11cb24;
|
|
91
91
|
--color-gui-error-red: #fb0c0c;
|
|
92
92
|
--color-gui-focus: #80b9f2;
|
package/index.d.ts
CHANGED
|
@@ -230,7 +230,7 @@ export interface BadgeProps {
|
|
|
230
230
|
*/
|
|
231
231
|
hoverable?: boolean;
|
|
232
232
|
/**
|
|
233
|
-
* The size of the icons in the badge.
|
|
233
|
+
* The size of the icons in the badge. If not provided, it will be derived from the badge size.
|
|
234
234
|
*/
|
|
235
235
|
iconSize?: IconSize;
|
|
236
236
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "17.11.
|
|
3
|
+
"version": "17.11.2",
|
|
4
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.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
"workerDirectory": "./public"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@storybook/addon-docs": "^10.
|
|
25
|
-
"@storybook/addon-themes": "^10.1.
|
|
26
|
-
"@storybook/addon-vitest": "^10.
|
|
27
|
-
"@storybook/react-vite": "^10.
|
|
24
|
+
"@storybook/addon-docs": "^10.1.10",
|
|
25
|
+
"@storybook/addon-themes": "^10.1.10",
|
|
26
|
+
"@storybook/addon-vitest": "^10.1.10",
|
|
27
|
+
"@storybook/react-vite": "^10.1.10",
|
|
28
28
|
"@svgr/core": "^8.1.0",
|
|
29
29
|
"@svgr/plugin-jsx": "^8.1.0",
|
|
30
30
|
"@svgr/plugin-svgo": "^8.1.0",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"eslint-plugin-react": "^7.35.0",
|
|
49
49
|
"eslint-plugin-react-hooks": "^7.0.0",
|
|
50
50
|
"eslint-plugin-react-perf": "^3.3.3",
|
|
51
|
-
"eslint-plugin-storybook": "^10.
|
|
51
|
+
"eslint-plugin-storybook": "^10.1.10",
|
|
52
52
|
"heroicons": "^2.2.0",
|
|
53
53
|
"http-server": "14.1.1",
|
|
54
54
|
"jsdom": "^27.3.0",
|
|
@@ -56,9 +56,9 @@
|
|
|
56
56
|
"msw": "2.12.0",
|
|
57
57
|
"msw-storybook-addon": "^2.0.5",
|
|
58
58
|
"playwright": "^1.49.1",
|
|
59
|
-
"posthog-js": "^1.
|
|
59
|
+
"posthog-js": "^1.304.0",
|
|
60
60
|
"prettier": "^3.2.5",
|
|
61
|
-
"storybook": "^10.
|
|
61
|
+
"storybook": "^10.1.10",
|
|
62
62
|
"svg-sprite": "^2.0.4",
|
|
63
63
|
"tailwindcss": "^3.3.6",
|
|
64
64
|
"ts-node": "^10.9.2",
|