@ably/ui 17.5.7-dev.a9e50464 → 17.5.7-dev.ef5becde
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/SegmentedControl.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import cn from"./utils/cn";import Icon from"./Icon";const SegmentedControl=({className,rounded=false,leftIcon,rightIcon,active=false,variant="default",size="md",children,onClick,disabled})=>{const colorStyles={default:{active:"bg-neutral-200 dark:bg-neutral-1100",inactive:"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200"},subtle:{active:"bg-neutral-000 dark:bg-neutral-1000",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"},strong:{active:"bg-neutral-1000 dark:bg-neutral-300",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"}};const contentColorStyles={default:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},subtle:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},strong:{active:"text-neutral-000 dark:text-neutral-1300",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"}};const sizeStyles={md:cn("h-12 p-3 gap-2.5",rounded&&"px-[1.125rem]"),sm:cn("h-10 p-[0.5625rem] gap-[0.5625rem]",rounded&&"px-3.5"),xs:cn("h-9 p-2 gap-2",rounded&&"px-3")};const textStyles={md:"ui-text-label2",sm:"ui-text-label3",xs:"ui-text-label4"};const iconSizes={md:"23px",sm:"22px",xs:"20px"};const activeKey=active?"active":"inactive";return /*#__PURE__*/React.createElement("div",{onClick:!disabled?onClick:undefined,onKeyDown:e=>{if((e.key==="Enter"||e.key===" ")&&!disabled&&onClick){e.preventDefault();onClick()}},className:cn("focus-base flex items-center justify-center cursor-pointer select-none transition-colors",colorStyles[variant][activeKey],contentColorStyles[variant][activeKey],sizeStyles[size],textStyles[size],disabled&&"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit",rounded?"rounded-full":"rounded-lg",className),tabIndex:disabled?-1:0,role:"button","aria-pressed":active,"aria-disabled":disabled},leftIcon&&/*#__PURE__*/React.createElement(Icon,{name:leftIcon,size:iconSizes[size],"aria-hidden":"true"}),children&&/*#__PURE__*/React.createElement("span",{className:cn("font-semibold transition-colors",contentColorStyles[variant][activeKey],disabled&&"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark")},children),rightIcon&&/*#__PURE__*/React.createElement(Icon,{name:rightIcon,size:iconSizes[size],"aria-hidden":"true"}))};export default SegmentedControl;
|
|
1
|
+
import React from"react";import cn from"./utils/cn";import Icon from"./Icon";const SegmentedControl=({className,rounded=false,leftIcon,rightIcon,active=false,variant="default",size="md",children,onClick,disabled})=>{const colorStyles={default:{active:"bg-neutral-200 dark:bg-neutral-1100",inactive:"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200"},subtle:{active:"bg-neutral-000 dark:bg-neutral-1000",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"},strong:{active:"bg-neutral-1000 dark:bg-neutral-300",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"}};const contentColorStyles={default:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},subtle:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},strong:{active:"text-neutral-000 dark:text-neutral-1300",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"}};const sizeStyles={md:cn("h-12 p-3 gap-2.5",rounded&&"px-[1.125rem]"),sm:cn("h-10 p-[0.5625rem] gap-[0.5625rem]",rounded&&"px-3.5"),xs:cn("h-9 p-2 gap-2",rounded&&"px-3")};const textStyles={md:"ui-text-label2",sm:"ui-text-label3",xs:"ui-text-label4"};const iconSizes={md:"23px",sm:"22px",xs:"20px"};const activeKey=active?"active":"inactive";return /*#__PURE__*/React.createElement("div",{onClick:!disabled?onClick:undefined,onKeyDown:e=>{if((e.key==="Enter"||e.key===" ")&&!disabled&&onClick){e.preventDefault();onClick()}},className:cn("focus-base flex items-center justify-center cursor-pointer select-none transition-colors",colorStyles[variant][activeKey],contentColorStyles[variant][activeKey],sizeStyles[size],textStyles[size],disabled&&"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit",rounded?"rounded-full":"rounded-lg",className),tabIndex:disabled?-1:0,role:"button","aria-pressed":active,"aria-disabled":disabled},leftIcon&&/*#__PURE__*/React.createElement(Icon,{name:leftIcon,size:iconSizes[size],"aria-hidden":"true",color:contentColorStyles[variant][activeKey]}),children&&/*#__PURE__*/React.createElement("span",{className:cn("font-semibold transition-colors",contentColorStyles[variant][activeKey],disabled&&"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark")},children),rightIcon&&/*#__PURE__*/React.createElement(Icon,{name:rightIcon,size:iconSizes[size],"aria-hidden":"true",color:contentColorStyles[variant][activeKey]}))};export default SegmentedControl;
|
|
2
2
|
//# sourceMappingURL=SegmentedControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/SegmentedControl.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport type { IconName, IconSize } from \"./Icon/types\";\n\nexport type SegmentedControlSize = \"md\" | \"sm\" | \"xs\";\n\nexport type SegmentedControlProps = {\n className?: string;\n rounded?: boolean;\n leftIcon?: IconName;\n rightIcon?: IconName;\n active?: boolean;\n variant?: \"default\" | \"subtle\" | \"strong\";\n size?: SegmentedControlSize;\n onClick?: () => void;\n disabled?: boolean;\n};\n\nconst SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>> = ({\n className,\n rounded = false,\n leftIcon,\n rightIcon,\n active = false,\n variant = \"default\",\n size = \"md\",\n children,\n onClick,\n disabled,\n}) => {\n const colorStyles = {\n default: {\n active: \"bg-neutral-200 dark:bg-neutral-1100\",\n inactive:\n \"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200\",\n },\n subtle: {\n active: \"bg-neutral-000 dark:bg-neutral-1000\",\n inactive:\n \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n },\n strong: {\n active: \"bg-neutral-1000 dark:bg-neutral-300\",\n inactive:\n \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n },\n };\n\n const contentColorStyles = {\n default: {\n active: \"text-neutral-1300 dark:text-neutral-000\",\n inactive:\n \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n },\n subtle: {\n active: \"text-neutral-1300 dark:text-neutral-000\",\n inactive:\n \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n },\n strong: {\n active: \"text-neutral-000 dark:text-neutral-1300\",\n inactive:\n \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n },\n };\n\n const sizeStyles = {\n md: cn(\"h-12 p-3 gap-2.5\", rounded && \"px-[1.125rem]\"),\n sm: cn(\"h-10 p-[0.5625rem] gap-[0.5625rem]\", rounded && \"px-3.5\"),\n xs: cn(\"h-9 p-2 gap-2\", rounded && \"px-3\"),\n };\n\n const textStyles = {\n md: \"ui-text-label2\",\n sm: \"ui-text-label3\",\n xs: \"ui-text-label4\",\n };\n\n const iconSizes: Record<SegmentedControlSize, IconSize> = {\n md: \"23px\",\n sm: \"22px\",\n xs: \"20px\",\n };\n\n const activeKey = active ? \"active\" : \"inactive\";\n\n return (\n <div\n onClick={!disabled ? onClick : undefined}\n onKeyDown={(e) => {\n if ((e.key === \"Enter\" || e.key === \" \") && !disabled && onClick) {\n e.preventDefault();\n onClick();\n }\n }}\n className={cn(\n \"focus-base flex items-center justify-center cursor-pointer select-none transition-colors\",\n colorStyles[variant][activeKey],\n contentColorStyles[variant][activeKey],\n sizeStyles[size],\n textStyles[size],\n disabled &&\n \"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit\",\n rounded ? \"rounded-full\" : \"rounded-lg\",\n className,\n )}\n tabIndex={disabled ? -1 : 0}\n role=\"button\"\n aria-pressed={active}\n aria-disabled={disabled}\n >\n {leftIcon && (\n <Icon name={leftIcon} size={iconSizes[size]} aria-hidden=\"true\" />\n )}\n {children && (\n <span\n className={cn(\n \"font-semibold transition-colors\",\n contentColorStyles[variant][activeKey],\n disabled &&\n \"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark\",\n )}\n >\n {children}\n </span>\n )}\n {rightIcon && (\n <Icon name={rightIcon} size={iconSizes[size]} aria-hidden=\"true\" />\n )}\n </div>\n );\n};\n\nexport default SegmentedControl;\n"],"names":["React","cn","Icon","SegmentedControl","className","rounded","leftIcon","rightIcon","active","variant","size","children","onClick","disabled","colorStyles","default","inactive","subtle","strong","contentColorStyles","sizeStyles","md","sm","xs","textStyles","iconSizes","activeKey","div","undefined","onKeyDown","e","key","preventDefault","tabIndex","role","aria-pressed","aria-disabled","name","aria-hidden","span"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,AACjD,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,
|
|
1
|
+
{"version":3,"sources":["../../src/core/SegmentedControl.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport type { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass } from \"./styles/colors/types\";\n\nexport type SegmentedControlSize = \"md\" | \"sm\" | \"xs\";\n\nexport type SegmentedControlProps = {\n className?: string;\n rounded?: boolean;\n leftIcon?: IconName;\n rightIcon?: IconName;\n active?: boolean;\n variant?: \"default\" | \"subtle\" | \"strong\";\n size?: SegmentedControlSize;\n onClick?: () => void;\n disabled?: boolean;\n};\n\nconst SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>> = ({\n className,\n rounded = false,\n leftIcon,\n rightIcon,\n active = false,\n variant = \"default\",\n size = \"md\",\n children,\n onClick,\n disabled,\n}) => {\n const colorStyles = {\n default: {\n active: \"bg-neutral-200 dark:bg-neutral-1100\",\n inactive:\n \"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200\",\n },\n subtle: {\n active: \"bg-neutral-000 dark:bg-neutral-1000\",\n inactive:\n \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n },\n strong: {\n active: \"bg-neutral-1000 dark:bg-neutral-300\",\n inactive:\n \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n },\n };\n\n const contentColorStyles = {\n default: {\n active: \"text-neutral-1300 dark:text-neutral-000\",\n inactive:\n \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n },\n subtle: {\n active: \"text-neutral-1300 dark:text-neutral-000\",\n inactive:\n \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n },\n strong: {\n active: \"text-neutral-000 dark:text-neutral-1300\",\n inactive:\n \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n },\n };\n\n const sizeStyles = {\n md: cn(\"h-12 p-3 gap-2.5\", rounded && \"px-[1.125rem]\"),\n sm: cn(\"h-10 p-[0.5625rem] gap-[0.5625rem]\", rounded && \"px-3.5\"),\n xs: cn(\"h-9 p-2 gap-2\", rounded && \"px-3\"),\n };\n\n const textStyles = {\n md: \"ui-text-label2\",\n sm: \"ui-text-label3\",\n xs: \"ui-text-label4\",\n };\n\n const iconSizes: Record<SegmentedControlSize, IconSize> = {\n md: \"23px\",\n sm: \"22px\",\n xs: \"20px\",\n };\n\n const activeKey = active ? \"active\" : \"inactive\";\n\n return (\n <div\n onClick={!disabled ? onClick : undefined}\n onKeyDown={(e) => {\n if ((e.key === \"Enter\" || e.key === \" \") && !disabled && onClick) {\n e.preventDefault();\n onClick();\n }\n }}\n className={cn(\n \"focus-base flex items-center justify-center cursor-pointer select-none transition-colors\",\n colorStyles[variant][activeKey],\n contentColorStyles[variant][activeKey],\n sizeStyles[size],\n textStyles[size],\n disabled &&\n \"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit\",\n rounded ? \"rounded-full\" : \"rounded-lg\",\n className,\n )}\n tabIndex={disabled ? -1 : 0}\n role=\"button\"\n aria-pressed={active}\n aria-disabled={disabled}\n >\n {leftIcon && (\n <Icon name={leftIcon} size={iconSizes[size]} aria-hidden=\"true\" color={contentColorStyles[variant][activeKey] as ColorClass} />\n )}\n {children && (\n <span\n className={cn(\n \"font-semibold transition-colors\",\n contentColorStyles[variant][activeKey],\n disabled &&\n \"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark\",\n )}\n >\n {children}\n </span>\n )}\n {rightIcon && (\n <Icon name={rightIcon} size={iconSizes[size]} aria-hidden=\"true\" color={contentColorStyles[variant][activeKey] as ColorClass} />\n )}\n </div>\n );\n};\n\nexport default SegmentedControl;\n"],"names":["React","cn","Icon","SegmentedControl","className","rounded","leftIcon","rightIcon","active","variant","size","children","onClick","disabled","colorStyles","default","inactive","subtle","strong","contentColorStyles","sizeStyles","md","sm","xs","textStyles","iconSizes","activeKey","div","undefined","onKeyDown","e","key","preventDefault","tabIndex","role","aria-pressed","aria-disabled","name","aria-hidden","color","span"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,AACjD,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,CAkB1B,MAAMC,iBAAuE,CAAC,CAC5EC,SAAS,CACTC,QAAU,KAAK,CACfC,QAAQ,CACRC,SAAS,CACTC,OAAS,KAAK,CACdC,QAAU,SAAS,CACnBC,KAAO,IAAI,CACXC,QAAQ,CACRC,OAAO,CACPC,QAAQ,CACT,IACC,MAAMC,YAAc,CAClBC,QAAS,CACPP,OAAQ,sCACRQ,SACE,uIACJ,EACAC,OAAQ,CACNT,OAAQ,sCACRQ,SACE,uIACJ,EACAE,OAAQ,CACNV,OAAQ,sCACRQ,SACE,uIACJ,CACF,EAEA,MAAMG,mBAAqB,CACzBJ,QAAS,CACPP,OAAQ,0CACRQ,SACE,6FACJ,EACAC,OAAQ,CACNT,OAAQ,0CACRQ,SACE,6FACJ,EACAE,OAAQ,CACNV,OAAQ,0CACRQ,SACE,6FACJ,CACF,EAEA,MAAMI,WAAa,CACjBC,GAAIpB,GAAG,mBAAoBI,SAAW,iBACtCiB,GAAIrB,GAAG,qCAAsCI,SAAW,UACxDkB,GAAItB,GAAG,gBAAiBI,SAAW,OACrC,EAEA,MAAMmB,WAAa,CACjBH,GAAI,iBACJC,GAAI,iBACJC,GAAI,gBACN,EAEA,MAAME,UAAoD,CACxDJ,GAAI,OACJC,GAAI,OACJC,GAAI,MACN,EAEA,MAAMG,UAAYlB,OAAS,SAAW,WAEtC,oBACE,oBAACmB,OACCf,QAAS,CAACC,SAAWD,QAAUgB,UAC/BC,UAAW,AAACC,IACV,GAAI,AAACA,CAAAA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,GAAE,GAAM,CAAClB,UAAYD,QAAS,CAChEkB,EAAEE,cAAc,GAChBpB,SACF,CACF,EACAR,UAAWH,GACT,2FACAa,WAAW,CAACL,QAAQ,CAACiB,UAAU,CAC/BP,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCN,UAAU,CAACV,KAAK,CAChBc,UAAU,CAACd,KAAK,CAChBG,UACE,qGACFR,QAAU,eAAiB,aAC3BD,WAEF6B,SAAUpB,SAAW,CAAC,EAAI,EAC1BqB,KAAK,SACLC,eAAc3B,OACd4B,gBAAevB,UAEdP,uBACC,oBAACJ,MAAKmC,KAAM/B,SAAUI,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,OAAOC,MAAOpB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,GAE9Gf,uBACC,oBAAC6B,QACCpC,UAAWH,GACT,kCACAkB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCb,UACE,wHAGHF,UAGJJ,wBACC,oBAACL,MAAKmC,KAAM9B,UAAWG,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,OAAOC,MAAOpB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,GAItH,CAEA,gBAAevB,gBAAiB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "17.5.7-dev.
|
|
3
|
+
"version": "17.5.7-dev.ef5becde",
|
|
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",
|