@ably/ui 16.2.8 → 17.0.0-dev.3dbbd263

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.
Files changed (115) hide show
  1. package/core/.DS_Store +0 -0
  2. package/core/Accordion/.DS_Store +0 -0
  3. package/core/Accordion.js +1 -1
  4. package/core/Accordion.js.map +1 -1
  5. package/core/Badge.js +1 -1
  6. package/core/Badge.js.map +1 -1
  7. package/core/Code/.DS_Store +0 -0
  8. package/core/Code.js +1 -1
  9. package/core/Code.js.map +1 -1
  10. package/core/CodeSnippet/ApiKeySelector.js +1 -1
  11. package/core/CodeSnippet/ApiKeySelector.js.map +1 -1
  12. package/core/CodeSnippet/CopyButton.js +1 -1
  13. package/core/CodeSnippet/CopyButton.js.map +1 -1
  14. package/core/CodeSnippet/LanguageSelector.js +1 -1
  15. package/core/CodeSnippet/LanguageSelector.js.map +1 -1
  16. package/core/CodeSnippet/ShellCommandView.js +1 -1
  17. package/core/CodeSnippet/ShellCommandView.js.map +1 -1
  18. package/core/CodeSnippet/TooltipButton.js +1 -1
  19. package/core/CodeSnippet/TooltipButton.js.map +1 -1
  20. package/core/CodeSnippet.js +1 -1
  21. package/core/CodeSnippet.js.map +1 -1
  22. package/core/ContactFooter/.DS_Store +0 -0
  23. package/core/CookieMessage/.DS_Store +0 -0
  24. package/core/CookieMessage/component.css +1 -1
  25. package/core/CookieMessage.js +1 -1
  26. package/core/CookieMessage.js.map +1 -1
  27. package/core/CustomerLogos/.DS_Store +0 -0
  28. package/core/CustomerLogos.js +1 -1
  29. package/core/CustomerLogos.js.map +1 -1
  30. package/core/DropdownMenu/.DS_Store +0 -0
  31. package/core/DropdownMenu.js +1 -1
  32. package/core/DropdownMenu.js.map +1 -1
  33. package/core/Expander.js +1 -1
  34. package/core/Expander.js.map +1 -1
  35. package/core/FeaturedLink/.DS_Store +0 -0
  36. package/core/FeaturedLink.js +1 -1
  37. package/core/FeaturedLink.js.map +1 -1
  38. package/core/Flash/.DS_Store +0 -0
  39. package/core/Flash/component.css +1 -1
  40. package/core/Flash.js +1 -1
  41. package/core/Flash.js.map +1 -1
  42. package/core/Flyout.js +1 -1
  43. package/core/Flyout.js.map +1 -1
  44. package/core/Footer/.DS_Store +0 -0
  45. package/core/Footer.js +1 -1
  46. package/core/Footer.js.map +1 -1
  47. package/core/Header/HeaderLinks.js +1 -1
  48. package/core/Header/HeaderLinks.js.map +1 -1
  49. package/core/Header.js +1 -1
  50. package/core/Header.js.map +1 -1
  51. package/core/Icon/.DS_Store +0 -0
  52. package/core/Loader/.DS_Store +0 -0
  53. package/core/Logo/.DS_Store +0 -0
  54. package/core/Meganav/.DS_Store +0 -0
  55. package/core/Meganav/MeganavMobile.js +1 -1
  56. package/core/Meganav/MeganavMobile.js.map +1 -1
  57. package/core/Meganav/MeganavPanel.js +1 -1
  58. package/core/Meganav/MeganavPanel.js.map +1 -1
  59. package/core/Meganav/MeganavProductTile.js +1 -1
  60. package/core/Meganav/MeganavProductTile.js.map +1 -1
  61. package/core/Meganav/data.js +1 -1
  62. package/core/Meganav/data.js.map +1 -1
  63. package/core/Meganav.js +1 -1
  64. package/core/Meganav.js.map +1 -1
  65. package/core/Notice/.DS_Store +0 -0
  66. package/core/Notice.js +1 -1
  67. package/core/Notice.js.map +1 -1
  68. package/core/Pricing/PricingCards.js +1 -1
  69. package/core/Pricing/PricingCards.js.map +1 -1
  70. package/core/Pricing/data.js +1 -1
  71. package/core/Pricing/data.js.map +1 -1
  72. package/core/ProductTile/ProductIcon.js +1 -1
  73. package/core/ProductTile/ProductIcon.js.map +1 -1
  74. package/core/ProductTile/ProductLabel.js +1 -1
  75. package/core/ProductTile/ProductLabel.js.map +1 -1
  76. package/core/ProductTile.js +1 -1
  77. package/core/ProductTile.js.map +1 -1
  78. package/core/SegmentedControl.js +1 -1
  79. package/core/SegmentedControl.js.map +1 -1
  80. package/core/Slider/.DS_Store +0 -0
  81. package/core/Slider/component.css +1 -1
  82. package/core/Slider.js +1 -1
  83. package/core/Slider.js.map +1 -1
  84. package/core/Status.js +1 -1
  85. package/core/Status.js.map +1 -1
  86. package/core/TabMenu.js +1 -1
  87. package/core/TabMenu.js.map +1 -1
  88. package/core/Table/.DS_Store +0 -0
  89. package/core/Table/Table.js +1 -1
  90. package/core/Table/Table.js.map +1 -1
  91. package/core/Table/TableCell.js +4 -4
  92. package/core/Table/TableCell.js.map +1 -1
  93. package/core/Table/data.js +1 -1
  94. package/core/Table/data.js.map +1 -1
  95. package/core/Toggle.js +1 -1
  96. package/core/Toggle.js.map +1 -1
  97. package/core/Tooltip/.DS_Store +0 -0
  98. package/core/Tooltip.js +1 -1
  99. package/core/Tooltip.js.map +1 -1
  100. package/core/icons/.DS_Store +0 -0
  101. package/core/icons/gui/.DS_Store +0 -0
  102. package/core/icons/product/.DS_Store +0 -0
  103. package/core/images/.DS_Store +0 -0
  104. package/core/images/logo/.DS_Store +0 -0
  105. package/core/styles/buttons.css +11 -11
  106. package/core/styles/dropdowns.css +3 -3
  107. package/core/styles/forms/story-components.js +1 -1
  108. package/core/styles/forms/story-components.js.map +1 -1
  109. package/core/styles/forms.css +10 -10
  110. package/core/styles/layout.css +6 -6
  111. package/core/styles/legacy-buttons.css +3 -3
  112. package/core/styles/text.css +18 -18
  113. package/core/styles.components.css +4 -4
  114. package/package.json +1 -1
  115. package/tailwind.config.js +3 -91
package/core/Pricing/PricingCards.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import LinkButton from"../LinkButton";import Tooltip from"../Tooltip";import cn from"../utils/cn";const PricingCards=({data,delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const delimiterColumn=index=>delimiter&&index%2===1?React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-20",{"m-8":delimiter!=="blank"})},delimiter!=="blank"?React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:"text-neutral-800 dark:text-neutral-500"}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-600 dark:border-neutral-700",bg:"bg-neutral-600 dark:bg-neutral-700"},blue:{border:"border-blue-400 dark:border-blue-600",bg:"bg-blue-400 dark:bg-blue-600"},orange:{border:"border-orange-600 dark:border-orange-600",bg:"bg-orange-600 dark:bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},React.createElement("div",{className:cn("gap-8",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border},index)=>React.createElement(Fragment,{key:title.content},delimiterColumn(index),React.createElement("div",{className:cn("relative border flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] backdrop-blur",borderClasses(border?.color)?.border??"border-neutral-200 dark:border-neutral-1100",border?.style,{"@[520px]:flex-row @[920px]:flex-col":delimiter}),"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?React.createElement("div",{className:cn("flex items-center absolute z-10 -top-12 self-center font-semibold uppercase text-neutral-000 font-sans h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,React.createElement("div",{className:cn("absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25",{"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":!delimiter})}),React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-24`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},React.createElement("div",null,React.createElement("div",{className:"flex items-center mb-12"},React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string"},title.tooltip):null),React.createElement("p",{className:cn("ui-text-p1 min-h-[20px]",description.className,description.color),style:{height:descriptionHeight}},React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),React.createElement("div",{className:cn("flex items-end gap-8",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},React.createElement("p",{className:"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?React.createElement("div",{className:"group"},React.createElement(LinkButton,{className:cn("w-full",cta.className),variant:cta.url==="/contact"?"priority":"primary",href:cta.url,onClick:cta.onClick,disabled:cta.disabled,rightIcon:"icon-gui-arrow-long-right-outline",iconColor:cta.iconColor},cta.text)):delimiter?null:React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-64"}))),React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>React.createElement("div",{key:title,className:"flex flex-col gap-12"},React.createElement("p",{className:"text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]"},title),React.createElement("div",{className:cn({"flex flex-col gap-4":!delimiter})},items.map((item,index)=>Array.isArray(item)?React.createElement("div",{key:item[0],className:cn("flex justify-between gap-16 px-8 -mx-8",index===0?"py-8":"py-4",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark:text-neutral-300",subIndex%2===1?"text-right":"")},subItem))):React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-2"}):null,React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,listItemColors?"ui-text-p3":"ui-text-p2")},item)))),cta?React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"absolute translate-x-24 sm:-translate-x-[120px] sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer",onClick:cta.onClick,iconColor:listItemColors?.foreground},cta.text),React.createElement("div",{className:"absolute hidden sm:block sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-[120px] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 text-neutral-500 dark:text-neutral-800"},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;
1
+ import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import LinkButton from"../LinkButton";import Tooltip from"../Tooltip";import cn from"../utils/cn";const PricingCards=({data,delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const delimiterColumn=index=>delimiter&&index%2===1?React.createElement("div",{className:cn("flex items-center justify-center w-full @[920px]:w-5",{"m-2":delimiter!=="blank"})},delimiter!=="blank"?React.createElement(Icon,{name:delimiter,size:"20px",additionalCSS:"text-neutral-800 dark:text-neutral-500"}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-600 dark:border-neutral-700",bg:"bg-neutral-600 dark:bg-neutral-700"},blue:{border:"border-blue-400 dark:border-blue-600",bg:"bg-blue-400 dark:bg-blue-600"},orange:{border:"border-orange-600 dark:border-orange-600",bg:"bg-orange-600 dark:bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},React.createElement("div",{className:cn("gap-2",delimiter?gridRules.delimited:gridRules.nonDelimited)},data.map(({title,description,price,cta,sections,border},index)=>React.createElement(Fragment,{key:title.content},delimiterColumn(index),React.createElement("div",{className:cn("relative border flex-1 px-6 py-8 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur",borderClasses(border?.color)?.border??"border-neutral-200 dark:border-neutral-1100",border?.style,{"@[520px]:flex-row @[920px]:flex-col":delimiter}),"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?React.createElement("div",{className:cn("flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest",borderClasses(border?.color)?.border,borderClasses(border?.color)?.bg)},border.text):null,React.createElement("div",{className:cn("absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25",{"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":!delimiter})}),React.createElement("div",{className:cn(`relative z-10 flex flex-col gap-6`,{"@[520px]:flex-1 @[920px]:flex-none":delimiter})},React.createElement("div",null,React.createElement("div",{className:"flex items-center mb-3"},React.createElement("p",{className:cn(title.className,title.color)},title.content),title.tooltip?React.createElement(Tooltip,{interactive:typeof title.tooltip!=="string"},title.tooltip):null),React.createElement("p",{className:cn("ui-text-p1 min-h-5",description.className,description.color),style:{height:descriptionHeight}},React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),React.createElement("div",{className:cn("flex items-end gap-2",{"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":delimiter})},React.createElement("p",{className:"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000"},price.amount),React.createElement("div",{className:"ui-text-p3 text-neutral-1300 dark:text-neutral-000"},price.content)),cta?React.createElement("div",{className:"group"},React.createElement(LinkButton,{className:cn("w-full",cta.className),variant:cta.url==="/contact"?"priority":"primary",href:cta.url,onClick:cta.onClick,disabled:cta.disabled,rightIcon:"icon-gui-arrow-long-right-outline",iconColor:cta.iconColor},cta.text)):delimiter?null:React.createElement("div",{className:"flex items-center justify-center h-12 w-full"},React.createElement("hr",{className:"border-neutral-500 dark:border-neutral-800 w-16"}))),React.createElement("div",{className:"flex-1 flex flex-col gap-6 relative z-10"},sections.map(({title,items,listItemColors,cta})=>React.createElement("div",{key:title,className:"flex flex-col gap-3"},React.createElement("p",{className:"text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]"},title),React.createElement("div",{className:cn({"flex flex-col gap-1":!delimiter})},items.map((item,index)=>Array.isArray(item)?React.createElement("div",{key:item[0],className:cn("flex justify-between gap-4 px-2 -mx-2",index===0?"py-2":"py-1",index>0&&index%2===0?"bg-blue-100 dark:bg-blue-900 rounded-md":"")},item.map((subItem,subIndex)=>React.createElement("span",{key:subItem,className:cn("ui-text-p3",index===0?"font-bold":"font-medium","text-neutral-1000 dark:text-neutral-300",subIndex%2===1?"text-right":"")},subItem))):React.createElement("div",{key:item,className:"flex gap-2 items-start"},listItemColors?React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:listItemColors.background,secondaryColor:listItemColors.foreground,size:"16px",additionalCSS:"mt-0.5"}):null,React.createElement("div",{className:cn(`flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,listItemColors?"ui-text-p3":"ui-text-p2")},item)))),cta?React.createElement("div",{className:"relative -mx-6 flex items-center h-10 overflow-x-hidden"},React.createElement(FeaturedLink,{url:cta.url,additionalCSS:"absolute translate-x-6 sm:-translate-x-[7.5rem] sm:opacity-0 sm:group-hover:translate-x-6 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer",onClick:cta.onClick,iconColor:listItemColors?.foreground},cta.text),React.createElement("div",{className:"absolute hidden sm:block sm:translate-x-6 sm:opacity-100 sm:group-hover:translate-x-[7.5rem] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-[0.15em] font-light text-p3 text-neutral-500 dark:text-neutral-800"},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;
2
2
  //# sourceMappingURL=PricingCards.js.map
package/core/Pricing/PricingCards.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/Pricing/PricingCards.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport throttle from \"lodash.throttle\";\nimport type { PricingDataFeature } from \"./types\";\nimport Icon from \"../Icon\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport LinkButton from \"../LinkButton\";\nimport { IconName } from \"../Icon/types\";\nimport Tooltip from \"../Tooltip\";\nimport cn from \"../utils/cn\";\n\nexport type PricingCardsProps = {\n data: PricingDataFeature[];\n delimiter?: IconName | \"blank\";\n};\n\nconst PricingCards = ({ data, delimiter }: PricingCardsProps) => {\n const descriptionsRef = useRef<(HTMLSpanElement | null)[]>([]);\n const [descriptionHeight, setDescriptionHeight] = useState<number>(0);\n\n const determineMaxDescriptionHeight = throttle(() => {\n if (descriptionsRef.current.length) {\n setDescriptionHeight(\n Math.max(\n ...descriptionsRef.current.map(\n (description) => description?.getBoundingClientRect().height ?? 0,\n ),\n ),\n );\n }\n }, 100);\n\n useEffect(() => {\n determineMaxDescriptionHeight();\n\n window.addEventListener(\"resize\", determineMaxDescriptionHeight);\n\n return () => {\n window.removeEventListener(\"resize\", determineMaxDescriptionHeight);\n determineMaxDescriptionHeight.cancel();\n };\n }, []);\n\n const delimiterColumn = (index: number) =>\n delimiter && index % 2 === 1 ? (\n <div\n className={cn(\"flex items-center justify-center w-full @[920px]:w-20\", {\n \"m-8\": delimiter !== \"blank\",\n })}\n >\n {delimiter !== \"blank\" ? (\n <Icon\n name={delimiter}\n size=\"20px\"\n additionalCSS={\"text-neutral-800 dark:text-neutral-500\"}\n />\n ) : null}\n </div>\n ) : null;\n\n const gridRules = {\n nonDelimited: \"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4\",\n delimited: \"flex flex-col items-center @[920px]:flex-row\",\n };\n\n const borderClasses = (color?: \"neutral\" | \"blue\" | \"orange\") => {\n const classes: Record<\n string,\n {\n border: string;\n bg: string;\n }\n > = {\n neutral: {\n border: \"border-neutral-600 dark:border-neutral-700\",\n bg: \"bg-neutral-600 dark:bg-neutral-700\",\n },\n blue: {\n border: \"border-blue-400 dark:border-blue-600\",\n bg: \"bg-blue-400 dark:bg-blue-600\",\n },\n orange: {\n border: \"border-orange-600 dark:border-orange-600\",\n bg: \"bg-orange-600 dark:bg-orange-600\",\n },\n };\n\n if (color && classes[color]) {\n return classes[color];\n }\n };\n\n return (\n <div\n className=\"@container flex justify-center\"\n data-testid={\n delimiter ? \"delimited-pricing-card-group\" : \"pricing-card-group\"\n }\n >\n <div\n className={cn(\n \"gap-8\",\n delimiter ? gridRules.delimited : gridRules.nonDelimited,\n )}\n >\n {data.map(\n ({ title, description, price, cta, sections, border }, index) => (\n <Fragment key={title.content}>\n {delimiterColumn(index)}\n <div\n className={cn(\n \"relative border flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] backdrop-blur\",\n borderClasses(border?.color)?.border ??\n \"border-neutral-200 dark:border-neutral-1100\",\n border?.style,\n { \"@[520px]:flex-row @[920px]:flex-col\": delimiter },\n )}\n data-testid={\n delimiter ? \"delimited-pricing-card\" : \"pricing-card\"\n }\n >\n {border ? (\n <div\n className={cn(\n \"flex items-center absolute z-10 -top-12 self-center font-semibold uppercase text-neutral-000 font-sans h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1\",\n borderClasses(border?.color)?.border,\n borderClasses(border?.color)?.bg,\n )}\n >\n {border.text}\n </div>\n ) : null}\n <div\n className={cn(\n \"absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25\",\n {\n \"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100\":\n !delimiter,\n },\n )}\n ></div>\n <div\n className={cn(`relative z-10 flex flex-col gap-24`, {\n \"@[520px]:flex-1 @[920px]:flex-none\": delimiter,\n })}\n >\n <div>\n <div className=\"flex items-center mb-12\">\n <p className={cn(title.className, title.color)}>\n {title.content}\n </p>\n {title.tooltip ? (\n <Tooltip\n interactive={typeof title.tooltip !== \"string\"}\n >\n {title.tooltip}\n </Tooltip>\n ) : null}\n </div>\n <p\n className={cn(\n \"ui-text-p1 min-h-[20px]\",\n description.className,\n description.color,\n )}\n style={{ height: descriptionHeight }}\n >\n <span ref={(el) => (descriptionsRef.current[index] = el)}>\n {description.content}\n </span>\n </p>\n </div>\n <div\n className={cn(\"flex items-end gap-8\", {\n \"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end\":\n delimiter,\n })}\n >\n <p className=\"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000\">\n {price.amount}\n </p>\n <div className=\"ui-text-p3 text-neutral-1300 dark:text-neutral-000\">\n {price.content}\n </div>\n </div>\n {cta ? (\n <div className=\"group\">\n <LinkButton\n className={cn(\"w-full\", cta.className)}\n variant={\n cta.url === \"/contact\" ? \"priority\" : \"primary\"\n }\n href={cta.url}\n onClick={cta.onClick}\n disabled={cta.disabled}\n rightIcon=\"icon-gui-arrow-long-right-outline\"\n iconColor={cta.iconColor}\n >\n {cta.text}\n </LinkButton>\n </div>\n ) : delimiter ? null : (\n <div className=\"flex items-center justify-center h-48 w-full\">\n <hr className=\"border-neutral-500 dark:border-neutral-800 w-64\" />\n </div>\n )}\n </div>\n <div className=\"flex-1 flex flex-col gap-24 relative z-10\">\n {sections.map(({ title, items, listItemColors, cta }) => (\n <div key={title} className=\"flex flex-col gap-12\">\n <p className=\"text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]\">\n {title}\n </p>\n <div\n className={cn({ \"flex flex-col gap-4\": !delimiter })}\n >\n {items.map((item, index) =>\n Array.isArray(item) ? (\n <div\n key={item[0]}\n className={cn(\n \"flex justify-between gap-16 px-8 -mx-8\",\n index === 0 ? \"py-8\" : \"py-4\",\n index > 0 && index % 2 === 0\n ? \"bg-blue-100 dark:bg-blue-900 rounded-md\"\n : \"\",\n )}\n >\n {item.map((subItem, subIndex) => (\n <span\n key={subItem}\n className={cn(\n \"ui-text-p3\",\n index === 0 ? \"font-bold\" : \"font-medium\",\n \"text-neutral-1000 dark:text-neutral-300\",\n subIndex % 2 === 1 ? \"text-right\" : \"\",\n )}\n >\n {subItem}\n </span>\n ))}\n </div>\n ) : (\n <div key={item} className=\"flex gap-8 items-start\">\n {listItemColors ? (\n <Icon\n name=\"icon-gui-check-circled-fill\"\n color={listItemColors.background}\n secondaryColor={listItemColors.foreground}\n size=\"16px\"\n additionalCSS=\"mt-2\"\n />\n ) : null}\n <div\n className={cn(\n `flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,\n listItemColors ? \"ui-text-p3\" : \"ui-text-p2\",\n )}\n >\n {item}\n </div>\n </div>\n ),\n )}\n </div>\n {cta ? (\n <div className=\"relative -mx-24 flex items-center h-40 overflow-x-hidden\">\n <FeaturedLink\n url={cta.url}\n additionalCSS=\"absolute translate-x-24 sm:-translate-x-[120px] sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer\"\n onClick={cta.onClick}\n iconColor={listItemColors?.foreground}\n >\n {cta.text}\n </FeaturedLink>\n <div className=\"absolute hidden sm:block sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-[120px] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 text-neutral-500 dark:text-neutral-800\">\n •••\n </div>\n </div>\n ) : null}\n </div>\n ))}\n </div>\n </div>\n {delimiterColumn(index)}\n </Fragment>\n ),\n )}\n </div>\n </div>\n );\n};\n\nexport default PricingCards;\n"],"names":["React","Fragment","useEffect","useRef","useState","throttle","Icon","FeaturedLink","LinkButton","Tooltip","cn","PricingCards","data","delimiter","descriptionsRef","descriptionHeight","setDescriptionHeight","determineMaxDescriptionHeight","current","length","Math","max","map","description","getBoundingClientRect","height","window","addEventListener","removeEventListener","cancel","delimiterColumn","index","div","className","name","size","additionalCSS","gridRules","nonDelimited","delimited","borderClasses","color","classes","neutral","border","bg","blue","orange","data-testid","title","price","cta","sections","key","content","style","text","p","tooltip","interactive","span","ref","el","amount","variant","url","href","onClick","disabled","rightIcon","iconColor","hr","items","listItemColors","item","Array","isArray","subItem","subIndex","background","secondaryColor","foreground"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/core/Pricing/PricingCards.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport throttle from \"lodash.throttle\";\nimport type { PricingDataFeature } from \"./types\";\nimport Icon from \"../Icon\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport LinkButton from \"../LinkButton\";\nimport { IconName } from \"../Icon/types\";\nimport Tooltip from \"../Tooltip\";\nimport cn from \"../utils/cn\";\n\nexport type PricingCardsProps = {\n data: PricingDataFeature[];\n delimiter?: IconName | \"blank\";\n};\n\nconst PricingCards = ({ data, delimiter }: PricingCardsProps) => {\n const descriptionsRef = useRef<(HTMLSpanElement | null)[]>([]);\n const [descriptionHeight, setDescriptionHeight] = useState<number>(0);\n\n const determineMaxDescriptionHeight = throttle(() => {\n if (descriptionsRef.current.length) {\n setDescriptionHeight(\n Math.max(\n ...descriptionsRef.current.map(\n (description) => description?.getBoundingClientRect().height ?? 0,\n ),\n ),\n );\n }\n }, 100);\n\n useEffect(() => {\n determineMaxDescriptionHeight();\n\n window.addEventListener(\"resize\", determineMaxDescriptionHeight);\n\n return () => {\n window.removeEventListener(\"resize\", determineMaxDescriptionHeight);\n determineMaxDescriptionHeight.cancel();\n };\n }, []);\n\n const delimiterColumn = (index: number) =>\n delimiter && index % 2 === 1 ? (\n <div\n className={cn(\"flex items-center justify-center w-full @[920px]:w-5\", {\n \"m-2\": delimiter !== \"blank\",\n })}\n >\n {delimiter !== \"blank\" ? (\n <Icon\n name={delimiter}\n size=\"20px\"\n additionalCSS={\"text-neutral-800 dark:text-neutral-500\"}\n />\n ) : null}\n </div>\n ) : null;\n\n const gridRules = {\n nonDelimited: \"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4\",\n delimited: \"flex flex-col items-center @[920px]:flex-row\",\n };\n\n const borderClasses = (color?: \"neutral\" | \"blue\" | \"orange\") => {\n const classes: Record<\n string,\n {\n border: string;\n bg: string;\n }\n > = {\n neutral: {\n border: \"border-neutral-600 dark:border-neutral-700\",\n bg: \"bg-neutral-600 dark:bg-neutral-700\",\n },\n blue: {\n border: \"border-blue-400 dark:border-blue-600\",\n bg: \"bg-blue-400 dark:bg-blue-600\",\n },\n orange: {\n border: \"border-orange-600 dark:border-orange-600\",\n bg: \"bg-orange-600 dark:bg-orange-600\",\n },\n };\n\n if (color && classes[color]) {\n return classes[color];\n }\n };\n\n return (\n <div\n className=\"@container flex justify-center\"\n data-testid={\n delimiter ? \"delimited-pricing-card-group\" : \"pricing-card-group\"\n }\n >\n <div\n className={cn(\n \"gap-2\",\n delimiter ? gridRules.delimited : gridRules.nonDelimited,\n )}\n >\n {data.map(\n ({ title, description, price, cta, sections, border }, index) => (\n <Fragment key={title.content}>\n {delimiterColumn(index)}\n <div\n className={cn(\n \"relative border flex-1 px-6 py-8 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur\",\n borderClasses(border?.color)?.border ??\n \"border-neutral-200 dark:border-neutral-1100\",\n border?.style,\n { \"@[520px]:flex-row @[920px]:flex-col\": delimiter },\n )}\n data-testid={\n delimiter ? \"delimited-pricing-card\" : \"pricing-card\"\n }\n >\n {border ? (\n <div\n className={cn(\n \"flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest\",\n borderClasses(border?.color)?.border,\n borderClasses(border?.color)?.bg,\n )}\n >\n {border.text}\n </div>\n ) : null}\n <div\n className={cn(\n \"absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25\",\n {\n \"group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100\":\n !delimiter,\n },\n )}\n ></div>\n <div\n className={cn(`relative z-10 flex flex-col gap-6`, {\n \"@[520px]:flex-1 @[920px]:flex-none\": delimiter,\n })}\n >\n <div>\n <div className=\"flex items-center mb-3\">\n <p className={cn(title.className, title.color)}>\n {title.content}\n </p>\n {title.tooltip ? (\n <Tooltip\n interactive={typeof title.tooltip !== \"string\"}\n >\n {title.tooltip}\n </Tooltip>\n ) : null}\n </div>\n <p\n className={cn(\n \"ui-text-p1 min-h-5\",\n description.className,\n description.color,\n )}\n style={{ height: descriptionHeight }}\n >\n <span ref={(el) => (descriptionsRef.current[index] = el)}>\n {description.content}\n </span>\n </p>\n </div>\n <div\n className={cn(\"flex items-end gap-2\", {\n \"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end\":\n delimiter,\n })}\n >\n <p className=\"ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000\">\n {price.amount}\n </p>\n <div className=\"ui-text-p3 text-neutral-1300 dark:text-neutral-000\">\n {price.content}\n </div>\n </div>\n {cta ? (\n <div className=\"group\">\n <LinkButton\n className={cn(\"w-full\", cta.className)}\n variant={\n cta.url === \"/contact\" ? \"priority\" : \"primary\"\n }\n href={cta.url}\n onClick={cta.onClick}\n disabled={cta.disabled}\n rightIcon=\"icon-gui-arrow-long-right-outline\"\n iconColor={cta.iconColor}\n >\n {cta.text}\n </LinkButton>\n </div>\n ) : delimiter ? null : (\n <div className=\"flex items-center justify-center h-12 w-full\">\n <hr className=\"border-neutral-500 dark:border-neutral-800 w-16\" />\n </div>\n )}\n </div>\n <div className=\"flex-1 flex flex-col gap-6 relative z-10\">\n {sections.map(({ title, items, listItemColors, cta }) => (\n <div key={title} className=\"flex flex-col gap-3\">\n <p className=\"text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]\">\n {title}\n </p>\n <div\n className={cn({ \"flex flex-col gap-1\": !delimiter })}\n >\n {items.map((item, index) =>\n Array.isArray(item) ? (\n <div\n key={item[0]}\n className={cn(\n \"flex justify-between gap-4 px-2 -mx-2\",\n index === 0 ? \"py-2\" : \"py-1\",\n index > 0 && index % 2 === 0\n ? \"bg-blue-100 dark:bg-blue-900 rounded-md\"\n : \"\",\n )}\n >\n {item.map((subItem, subIndex) => (\n <span\n key={subItem}\n className={cn(\n \"ui-text-p3\",\n index === 0 ? \"font-bold\" : \"font-medium\",\n \"text-neutral-1000 dark:text-neutral-300\",\n subIndex % 2 === 1 ? \"text-right\" : \"\",\n )}\n >\n {subItem}\n </span>\n ))}\n </div>\n ) : (\n <div key={item} className=\"flex gap-2 items-start\">\n {listItemColors ? (\n <Icon\n name=\"icon-gui-check-circled-fill\"\n color={listItemColors.background}\n secondaryColor={listItemColors.foreground}\n size=\"16px\"\n additionalCSS=\"mt-0.5\"\n />\n ) : null}\n <div\n className={cn(\n `flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,\n listItemColors ? \"ui-text-p3\" : \"ui-text-p2\",\n )}\n >\n {item}\n </div>\n </div>\n ),\n )}\n </div>\n {cta ? (\n <div className=\"relative -mx-6 flex items-center h-10 overflow-x-hidden\">\n <FeaturedLink\n url={cta.url}\n additionalCSS=\"absolute translate-x-6 sm:-translate-x-[7.5rem] sm:opacity-0 sm:group-hover:translate-x-6 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer\"\n onClick={cta.onClick}\n iconColor={listItemColors?.foreground}\n >\n {cta.text}\n </FeaturedLink>\n <div className=\"absolute hidden sm:block sm:translate-x-6 sm:opacity-100 sm:group-hover:translate-x-[7.5rem] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-[0.15em] font-light text-p3 text-neutral-500 dark:text-neutral-800\">\n •••\n </div>\n </div>\n ) : null}\n </div>\n ))}\n </div>\n </div>\n {delimiterColumn(index)}\n </Fragment>\n ),\n )}\n </div>\n </div>\n );\n};\n\nexport default PricingCards;\n"],"names":["React","Fragment","useEffect","useRef","useState","throttle","Icon","FeaturedLink","LinkButton","Tooltip","cn","PricingCards","data","delimiter","descriptionsRef","descriptionHeight","setDescriptionHeight","determineMaxDescriptionHeight","current","length","Math","max","map","description","getBoundingClientRect","height","window","addEventListener","removeEventListener","cancel","delimiterColumn","index","div","className","name","size","additionalCSS","gridRules","nonDelimited","delimited","borderClasses","color","classes","neutral","border","bg","blue","orange","data-testid","title","price","cta","sections","key","content","style","text","p","tooltip","interactive","span","ref","el","amount","variant","url","href","onClick","disabled","rightIcon","iconColor","hr","items","listItemColors","item","Array","isArray","subItem","subIndex","background","secondaryColor","foreground"],"mappings":"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"}
package/core/Pricing/data.js CHANGED
@@ -1,2 +1,2 @@
1
- import React from"react";export const planData=[{title:{content:"Free",className:"font-mono text-p3 uppercase font-bold tracking-[0.16em]",color:"text-neutral-600 dark:text-neutral-700"},description:{content:"Build a proof of concept.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$0"},cta:{text:"Start for free",url:"/sign-up",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Limits",items:["200 concurrent channels","200 concurrent connections","500 messages / second","6M messages / month"]},{title:"Includes",items:["Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-300 dark:text-neutral-1000"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Standard",className:"font-mono text-p3 uppercase font-bold tracking-[0.16em]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$29",content:React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"/users/paid_sign_up?package=standard",iconColor:"text-gui-blue-default-dark dark:text-gui-blue-default-light"},sections:[{title:"Limits",items:["10k concurrent channels","10k concurrent connections","2.5k messages / second"]},{title:"Includes",items:["1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-blue-600 dark:text-blue-400",background:"text-blue-200 dark:text-blue-800"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Pro",className:"font-mono text-p3 uppercase font-bold tracking-[0.16em]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Scale with confidence.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$399",content:React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"/users/paid_sign_up?package=pro",iconColor:"text-gui-blue-default-dark dark:text-gui-blue-default-light"},sections:[{title:"Limits",items:["50k concurrent channels","50k concurrent connections","10k messages / second"]},{title:"Includes",items:["2 hour support SLA","Datadog (lite)","Uptime SLO"],listItemColors:{foreground:"text-blue-600 dark:text-blue-400",background:"text-blue-200 dark:text-blue-800"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Enterprise",className:"font-mono text-p3 uppercase font-bold tracking-[0.16em]",color:"text-orange-600"},description:{content:"Deliver without limits.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"Custom"},cta:{text:"Contact us",url:"/contact"},sections:[{title:"Unlimited",items:["Concurrent channels","Concurrent connections","Messages / second"]},{title:"Includes",items:["24/7 mission critical support","99.999% uptime SLAs","Committed use discounts","Datadog","CNAME, SSO, & more"],listItemColors:{foreground:"text-orange-600 dark:text-orange-600",background:"text-orange-200 dark:text-orange-1000"},cta:{text:"See all features",url:"#pricing-table"}}]}];export const consumptionData=[{title:{content:"Messages",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Messages contain the data that a client is communicating, such as the contents of a chat message.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$2.50",content:"/ million"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million msgs"],["First 50 million msgs","$2.50"],["Next 450 million msgs","$2.25"],["Next 4.5 billion msgs","$1.95"],["Next 15 billion msgs","$1.65"],["Next 30 billion msgs","$1.40"],["Over 50 billion msgs","$1.25"]]}]},{title:{content:"Channels",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:React.createElement("p",null,"We charge you for the amount of time a channel is active in our network by the minute. For example, if ten channels are in use for 45 minutes, you will be charged a total of 450 channel minutes.")},description:{content:"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}]},{title:{content:"Connections",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:React.createElement("p",null,"We charge you for the amount of time devices are connected to our network by the minute. For example, if ten devices are each connected for 45 minutes, you will be charged a total of 450 connection minutes.")},description:{content:"Clients establish and maintain a connection to the Ably service, typically over WebSockets.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}]}];
1
+ import React from"react";export const planData=[{title:{content:"Free",className:"font-mono text-p3 uppercase font-bold tracking-[0.16em]",color:"text-neutral-600 dark:text-neutral-700"},description:{content:"Build a proof of concept.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$0"},cta:{text:"Start for free",url:"/sign-up",iconColor:"text-neutral-600 dark:text-neutral-700"},sections:[{title:"Limits",items:["200 concurrent channels","200 concurrent connections","500 messages / second","6M messages / month"]},{title:"Includes",items:["Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-700 dark:text-neutral-600",background:"text-neutral-300 dark:text-neutral-1000"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Standard",className:"font-mono text-p3 uppercase font-bold tracking-[0.16em]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$29",content:React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-1.5"},"+ consumption"))},cta:{text:"Get started",url:"/users/paid_sign_up?package=standard",iconColor:"text-gui-blue-default-dark dark:text-gui-blue-default-light"},sections:[{title:"Limits",items:["10k concurrent channels","10k concurrent connections","2.5k messages / second"]},{title:"Includes",items:["1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-blue-600 dark:text-blue-400",background:"text-blue-200 dark:text-blue-800"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Pro",className:"font-mono text-p3 uppercase font-bold tracking-[0.16em]",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Scale with confidence.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"$399",content:React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-1.5"},"+ consumption"))},cta:{text:"Get started",url:"/users/paid_sign_up?package=pro",iconColor:"text-gui-blue-default-dark dark:text-gui-blue-default-light"},sections:[{title:"Limits",items:["50k concurrent channels","50k concurrent connections","10k messages / second"]},{title:"Includes",items:["2 hour support SLA","Datadog (lite)","Uptime SLO"],listItemColors:{foreground:"text-blue-600 dark:text-blue-400",background:"text-blue-200 dark:text-blue-800"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Enterprise",className:"font-mono text-p3 uppercase font-bold tracking-[0.16em]",color:"text-orange-600"},description:{content:"Deliver without limits.",className:"ui-text-p1",color:"text-neutral-800 dark:text-neutral-500"},price:{amount:"Custom"},cta:{text:"Contact us",url:"/contact"},sections:[{title:"Unlimited",items:["Concurrent channels","Concurrent connections","Messages / second"]},{title:"Includes",items:["24/7 mission critical support","99.999% uptime SLAs","Committed use discounts","Datadog","CNAME, SSO, & more"],listItemColors:{foreground:"text-orange-600 dark:text-orange-600",background:"text-orange-200 dark:text-orange-1000"},cta:{text:"See all features",url:"#pricing-table"}}]}];export const consumptionData=[{title:{content:"Messages",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000"},description:{content:"Messages contain the data that a client is communicating, such as the contents of a chat message.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$2.50",content:"/ million"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million msgs"],["First 50 million msgs","$2.50"],["Next 450 million msgs","$2.25"],["Next 4.5 billion msgs","$1.95"],["Next 15 billion msgs","$1.65"],["Next 30 billion msgs","$1.40"],["Over 50 billion msgs","$1.25"]]}]},{title:{content:"Channels and Chat rooms",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:React.createElement("p",null,"We charge you for the amount of time a channel is active in our network by the minute. For example, if ten channels are in use for 45 minutes, you will be charged a total of 450 channel minutes.")},description:{content:"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}]},{title:{content:"Connections",className:"ui-text-h3",color:"text-neutral-1300 dark:text-neutral-000",tooltip:React.createElement("p",null,"We charge you for the amount of time devices are connected to our network by the minute. For example, if ten devices are each connected for 45 minutes, you will be charged a total of 450 connection minutes.")},description:{content:"Clients establish and maintain a connection to the Ably service, typically over WebSockets.",className:"ui-text-p3",color:"text-neutral-700 dark:text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}]}];
2
2
  //# sourceMappingURL=data.js.map
package/core/Pricing/data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/Pricing/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { PricingDataFeature } from \"./types\";\n\nexport const planData: PricingDataFeature[] = [\n {\n title: {\n content: \"Free\",\n className: \"font-mono text-p3 uppercase font-bold tracking-[0.16em]\",\n color: \"text-neutral-600 dark:text-neutral-700\",\n },\n description: {\n content: \"Build a proof of concept.\",\n className: \"ui-text-p1\",\n color: \"text-neutral-800 dark:text-neutral-500\",\n },\n price: { amount: \"$0\" },\n cta: {\n text: \"Start for free\",\n url: \"/sign-up\",\n iconColor: \"text-neutral-600 dark:text-neutral-700\",\n },\n sections: [\n {\n title: \"Limits\",\n items: [\n \"200 concurrent channels\",\n \"200 concurrent connections\",\n \"500 messages / second\",\n \"6M messages / month\",\n ],\n },\n {\n title: \"Includes\",\n items: [\"Community & email support (best effort)\", \"No commitment\"],\n listItemColors: {\n foreground: \"text-neutral-700 dark:text-neutral-600\",\n background: \"text-neutral-300 dark:text-neutral-1000\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n {\n title: {\n content: \"Standard\",\n className: \"font-mono text-p3 uppercase font-bold tracking-[0.16em]\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content: \"Roll-out into production.\",\n className: \"ui-text-p1\",\n color: \"text-neutral-800 dark:text-neutral-500\",\n },\n price: {\n amount: \"$29\",\n content: (\n <>\n <p\n className=\"ui-text-p3 font-medium\"\n style={{ color: \"currentColor\" }}\n >\n / month\n </p>\n <p className=\"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6\">\n + consumption\n </p>\n </>\n ),\n },\n cta: {\n text: \"Get started\",\n url: \"/users/paid_sign_up?package=standard\",\n iconColor: \"text-gui-blue-default-dark dark:text-gui-blue-default-light\",\n },\n sections: [\n {\n title: \"Limits\",\n items: [\n \"10k concurrent channels\",\n \"10k concurrent connections\",\n \"2.5k messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\"1 day email support SLA\", \"Uptime SLO\"],\n listItemColors: {\n foreground: \"text-blue-600 dark:text-blue-400\",\n background: \"text-blue-200 dark:text-blue-800\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n {\n title: {\n content: \"Pro\",\n className: \"font-mono text-p3 uppercase font-bold tracking-[0.16em]\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content: \"Scale with confidence.\",\n className: \"ui-text-p1\",\n color: \"text-neutral-800 dark:text-neutral-500\",\n },\n price: {\n amount: \"$399\",\n content: (\n <>\n <p\n className=\"ui-text-p3 font-medium\"\n style={{ color: \"currentColor\" }}\n >\n / month\n </p>\n <p className=\"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6\">\n + consumption\n </p>\n </>\n ),\n },\n cta: {\n text: \"Get started\",\n url: \"/users/paid_sign_up?package=pro\",\n iconColor: \"text-gui-blue-default-dark dark:text-gui-blue-default-light\",\n },\n sections: [\n {\n title: \"Limits\",\n items: [\n \"50k concurrent channels\",\n \"50k concurrent connections\",\n \"10k messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\"2 hour support SLA\", \"Datadog (lite)\", \"Uptime SLO\"],\n listItemColors: {\n foreground: \"text-blue-600 dark:text-blue-400\",\n background: \"text-blue-200 dark:text-blue-800\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n\n {\n title: {\n content: \"Enterprise\",\n className: \"font-mono text-p3 uppercase font-bold tracking-[0.16em]\",\n color: \"text-orange-600\",\n },\n description: {\n content: \"Deliver without limits.\",\n className: \"ui-text-p1\",\n color: \"text-neutral-800 dark:text-neutral-500\",\n },\n price: { amount: \"Custom\" },\n cta: {\n text: \"Contact us\",\n url: \"/contact\",\n },\n sections: [\n {\n title: \"Unlimited\",\n items: [\n \"Concurrent channels\",\n \"Concurrent connections\",\n \"Messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\n \"24/7 mission critical support\",\n \"99.999% uptime SLAs\",\n \"Committed use discounts\",\n \"Datadog\",\n \"CNAME, SSO, & more\",\n ],\n listItemColors: {\n foreground: \"text-orange-600 dark:text-orange-600\",\n background: \"text-orange-200 dark:text-orange-1000\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n];\n\nexport const consumptionData: PricingDataFeature[] = [\n {\n title: {\n content: \"Messages\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content:\n \"Messages contain the data that a client is communicating, such as the contents of a chat message.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$2.50\", content: \"/ million\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million msgs\"],\n [\"First 50 million msgs\", \"$2.50\"],\n [\"Next 450 million msgs\", \"$2.25\"],\n [\"Next 4.5 billion msgs\", \"$1.95\"],\n [\"Next 15 billion msgs\", \"$1.65\"],\n [\"Next 30 billion msgs\", \"$1.40\"],\n [\"Over 50 billion msgs\", \"$1.25\"],\n ],\n },\n ],\n },\n {\n title: {\n content: \"Channels\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n tooltip: (\n <p>\n We charge you for the amount of time a channel is active in our\n network by the minute. For example, if ten channels are in use for 45\n minutes, you will be charged a total of 450 channel minutes.\n </p>\n ),\n },\n description: {\n content:\n \"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$1.00\", content: \"/ million mins\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million mins\"],\n [\"First 10 million mins\", \"$1.00\"],\n [\"Next 90 million mins\", \"$0.95\"],\n [\"Next 900 million mins\", \"$0.85\"],\n [\"Next 4 billion mins\", \"$0.75\"],\n [\"Next 10 billion mins\", \"$0.65\"],\n [\"Over 15 billion mins\", \"$0.60\"],\n ],\n },\n ],\n },\n {\n title: {\n content: \"Connections\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n tooltip: (\n <p>\n We charge you for the amount of time devices are connected to our\n network by the minute. For example, if ten devices are each connected\n for 45 minutes, you will be charged a total of 450 connection minutes.\n </p>\n ),\n },\n description: {\n content:\n \"Clients establish and maintain a connection to the Ably service, typically over WebSockets.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$1.00\", content: \"/ million mins\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million mins\"],\n [\"First 10 million mins\", \"$1.00\"],\n [\"Next 90 million mins\", \"$0.95\"],\n [\"Next 900 million mins\", \"$0.85\"],\n [\"Next 4 billion mins\", \"$0.75\"],\n [\"Next 10 billion mins\", \"$0.65\"],\n [\"Over 15 billion mins\", \"$0.60\"],\n ],\n },\n ],\n },\n];\n"],"names":["React","planData","title","content","className","color","description","price","amount","cta","text","url","iconColor","sections","items","listItemColors","foreground","background","p","style","consumptionData","tooltip"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/core/Pricing/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { PricingDataFeature } from \"./types\";\n\nexport const planData: PricingDataFeature[] = [\n {\n title: {\n content: \"Free\",\n className: \"font-mono text-p3 uppercase font-bold tracking-[0.16em]\",\n color: \"text-neutral-600 dark:text-neutral-700\",\n },\n description: {\n content: \"Build a proof of concept.\",\n className: \"ui-text-p1\",\n color: \"text-neutral-800 dark:text-neutral-500\",\n },\n price: { amount: \"$0\" },\n cta: {\n text: \"Start for free\",\n url: \"/sign-up\",\n iconColor: \"text-neutral-600 dark:text-neutral-700\",\n },\n sections: [\n {\n title: \"Limits\",\n items: [\n \"200 concurrent channels\",\n \"200 concurrent connections\",\n \"500 messages / second\",\n \"6M messages / month\",\n ],\n },\n {\n title: \"Includes\",\n items: [\"Community & email support (best effort)\", \"No commitment\"],\n listItemColors: {\n foreground: \"text-neutral-700 dark:text-neutral-600\",\n background: \"text-neutral-300 dark:text-neutral-1000\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n {\n title: {\n content: \"Standard\",\n className: \"font-mono text-p3 uppercase font-bold tracking-[0.16em]\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content: \"Roll-out into production.\",\n className: \"ui-text-p1\",\n color: \"text-neutral-800 dark:text-neutral-500\",\n },\n price: {\n amount: \"$29\",\n content: (\n <>\n <p\n className=\"ui-text-p3 font-medium\"\n style={{ color: \"currentColor\" }}\n >\n / month\n </p>\n <p className=\"ui-text-p2 font-bold text-gui-blue-default-dark -mt-1.5\">\n + consumption\n </p>\n </>\n ),\n },\n cta: {\n text: \"Get started\",\n url: \"/users/paid_sign_up?package=standard\",\n iconColor: \"text-gui-blue-default-dark dark:text-gui-blue-default-light\",\n },\n sections: [\n {\n title: \"Limits\",\n items: [\n \"10k concurrent channels\",\n \"10k concurrent connections\",\n \"2.5k messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\"1 day email support SLA\", \"Uptime SLO\"],\n listItemColors: {\n foreground: \"text-blue-600 dark:text-blue-400\",\n background: \"text-blue-200 dark:text-blue-800\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n {\n title: {\n content: \"Pro\",\n className: \"font-mono text-p3 uppercase font-bold tracking-[0.16em]\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content: \"Scale with confidence.\",\n className: \"ui-text-p1\",\n color: \"text-neutral-800 dark:text-neutral-500\",\n },\n price: {\n amount: \"$399\",\n content: (\n <>\n <p\n className=\"ui-text-p3 font-medium\"\n style={{ color: \"currentColor\" }}\n >\n / month\n </p>\n <p className=\"ui-text-p2 font-bold text-gui-blue-default-dark -mt-1.5\">\n + consumption\n </p>\n </>\n ),\n },\n cta: {\n text: \"Get started\",\n url: \"/users/paid_sign_up?package=pro\",\n iconColor: \"text-gui-blue-default-dark dark:text-gui-blue-default-light\",\n },\n sections: [\n {\n title: \"Limits\",\n items: [\n \"50k concurrent channels\",\n \"50k concurrent connections\",\n \"10k messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\"2 hour support SLA\", \"Datadog (lite)\", \"Uptime SLO\"],\n listItemColors: {\n foreground: \"text-blue-600 dark:text-blue-400\",\n background: \"text-blue-200 dark:text-blue-800\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n\n {\n title: {\n content: \"Enterprise\",\n className: \"font-mono text-p3 uppercase font-bold tracking-[0.16em]\",\n color: \"text-orange-600\",\n },\n description: {\n content: \"Deliver without limits.\",\n className: \"ui-text-p1\",\n color: \"text-neutral-800 dark:text-neutral-500\",\n },\n price: { amount: \"Custom\" },\n cta: {\n text: \"Contact us\",\n url: \"/contact\",\n },\n sections: [\n {\n title: \"Unlimited\",\n items: [\n \"Concurrent channels\",\n \"Concurrent connections\",\n \"Messages / second\",\n ],\n },\n {\n title: \"Includes\",\n items: [\n \"24/7 mission critical support\",\n \"99.999% uptime SLAs\",\n \"Committed use discounts\",\n \"Datadog\",\n \"CNAME, SSO, & more\",\n ],\n listItemColors: {\n foreground: \"text-orange-600 dark:text-orange-600\",\n background: \"text-orange-200 dark:text-orange-1000\",\n },\n cta: {\n text: \"See all features\",\n url: \"#pricing-table\",\n },\n },\n ],\n },\n];\n\nexport const consumptionData: PricingDataFeature[] = [\n {\n title: {\n content: \"Messages\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n },\n description: {\n content:\n \"Messages contain the data that a client is communicating, such as the contents of a chat message.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$2.50\", content: \"/ million\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million msgs\"],\n [\"First 50 million msgs\", \"$2.50\"],\n [\"Next 450 million msgs\", \"$2.25\"],\n [\"Next 4.5 billion msgs\", \"$1.95\"],\n [\"Next 15 billion msgs\", \"$1.65\"],\n [\"Next 30 billion msgs\", \"$1.40\"],\n [\"Over 50 billion msgs\", \"$1.25\"],\n ],\n },\n ],\n },\n {\n title: {\n content: \"Channels and Chat rooms\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n tooltip: (\n <p>\n We charge you for the amount of time a channel is active in our\n network by the minute. For example, if ten channels are in use for 45\n minutes, you will be charged a total of 450 channel minutes.\n </p>\n ),\n },\n description: {\n content:\n \"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$1.00\", content: \"/ million mins\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million mins\"],\n [\"First 10 million mins\", \"$1.00\"],\n [\"Next 90 million mins\", \"$0.95\"],\n [\"Next 900 million mins\", \"$0.85\"],\n [\"Next 4 billion mins\", \"$0.75\"],\n [\"Next 10 billion mins\", \"$0.65\"],\n [\"Over 15 billion mins\", \"$0.60\"],\n ],\n },\n ],\n },\n {\n title: {\n content: \"Connections\",\n className: \"ui-text-h3\",\n color: \"text-neutral-1300 dark:text-neutral-000\",\n tooltip: (\n <p>\n We charge you for the amount of time devices are connected to our\n network by the minute. For example, if ten devices are each connected\n for 45 minutes, you will be charged a total of 450 connection minutes.\n </p>\n ),\n },\n description: {\n content:\n \"Clients establish and maintain a connection to the Ably service, typically over WebSockets.\",\n className: \"ui-text-p3\",\n color: \"text-neutral-700 dark:text-neutral-600\",\n },\n price: { amount: \"$1.00\", content: \"/ million mins\" },\n sections: [\n {\n title: \"Volume discounts\",\n items: [\n [\"Consumption\", \"$ / million mins\"],\n [\"First 10 million mins\", \"$1.00\"],\n [\"Next 90 million mins\", \"$0.95\"],\n [\"Next 900 million mins\", \"$0.85\"],\n [\"Next 4 billion mins\", \"$0.75\"],\n [\"Next 10 billion mins\", \"$0.65\"],\n [\"Over 15 billion mins\", \"$0.60\"],\n ],\n },\n ],\n },\n];\n"],"names":["React","planData","title","content","className","color","description","price","amount","cta","text","url","iconColor","sections","items","listItemColors","foreground","background","p","style","consumptionData","tooltip"],"mappings":"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"}
package/core/ProductTile/ProductIcon.js CHANGED
@@ -1,2 +1,2 @@
1
- import React from"react";import Icon from"../Icon";import cn from"../utils/cn";const ProductIcon=({name,hoverName,selected,size,unavailable})=>{if(!name){return null}const innerSize=size-2;const iconSize=size/6*4;return React.createElement("span",{className:cn("block p-1 bg-gradient-to-b",{"from-neutral-1000 to-neutral-1300 dark:from-neutral-000 dark:to-neutral-300":selected,"from-neutral-000 to-neutral-300 dark:from-neutral-1000 dark:to-neutral-1300":!selected}),style:{width:size,height:size,borderRadius:size/4}},React.createElement("span",{className:cn("flex items-center justify-center",{"bg-neutral-1200 dark:bg-neutral-100":selected,"bg-neutral-100 dark:bg-neutral-1200":!selected,"group-hover/product-tile:bg-neutral-000 dark:group-hover/product-tile:bg-neutral-1300":selected===false&&!unavailable}),style:{height:innerSize,borderRadius:size/4}},hoverName?React.createElement(Icon,{name:hoverName,size:`${iconSize}px`,additionalCSS:cn({"hidden group-hover/product-tile:flex":!selected,flex:selected})}):null,React.createElement(Icon,{name:name,size:`${iconSize}px`,additionalCSS:cn({"text-neutral-000 dark:text-neutral-1300":selected&&!unavailable,"text-neutral-1300 dark:text-neutral-000":!selected&&!unavailable,"text-neutral-700 dark:text-neutral-600":selected&&unavailable,"text-neutral-600 dark:text-neutral-700":!selected&&unavailable,"flex group-hover/product-tile:hidden":hoverName&&!selected,hidden:hoverName&&selected})})))};export default ProductIcon;
1
+ import React from"react";import Icon from"../Icon";import cn from"../utils/cn";const ProductIcon=({name,hoverName,selected,size,unavailable})=>{if(!name){return null}const innerSize=size-2;const iconSize=size/6*4;return React.createElement("span",{className:cn("block p-px bg-gradient-to-b",{"from-neutral-1000 to-neutral-1300 dark:from-neutral-000 dark:to-neutral-300":selected,"from-neutral-000 to-neutral-300 dark:from-neutral-1000 dark:to-neutral-1300":!selected}),style:{width:size,height:size,borderRadius:size/4}},React.createElement("span",{className:cn("flex items-center justify-center",{"bg-neutral-1200 dark:bg-neutral-100":selected,"bg-neutral-100 dark:bg-neutral-1200":!selected,"group-hover/product-tile:bg-neutral-000 dark:group-hover/product-tile:bg-neutral-1300":selected===false&&!unavailable}),style:{height:innerSize,borderRadius:size/4}},hoverName?React.createElement(Icon,{name:hoverName,size:`${iconSize}px`,additionalCSS:cn({"hidden group-hover/product-tile:flex":!selected,flex:selected})}):null,React.createElement(Icon,{name:name,size:`${iconSize}px`,additionalCSS:cn({"text-neutral-000 dark:text-neutral-1300":selected&&!unavailable,"text-neutral-1300 dark:text-neutral-000":!selected&&!unavailable,"text-neutral-700 dark:text-neutral-600":selected&&unavailable,"text-neutral-600 dark:text-neutral-700":!selected&&unavailable,"flex group-hover/product-tile:hidden":hoverName&&!selected,hidden:hoverName&&selected})})))};export default ProductIcon;
2
2
  //# sourceMappingURL=ProductIcon.js.map
package/core/ProductTile/ProductIcon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/ProductTile/ProductIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport cn from \"../utils/cn\";\n\ntype ProductIconProps = {\n name?: IconName;\n hoverName?: IconName;\n selected?: boolean;\n size: number;\n unavailable: boolean;\n};\n\nconst ProductIcon = ({\n name,\n hoverName,\n selected,\n size,\n unavailable,\n}: ProductIconProps) => {\n if (!name) {\n return null;\n }\n\n // Inner container is 2px smaller to account for 1px padding on each side\n const innerSize = size - 2;\n\n // Padding around the icon is 1/4 the icon's size, so the icon is 4 of 6 parts\n const iconSize = (size / 6) * 4;\n\n return (\n // Outer container, contains the gradient stroke (since we can't natively have CSS gradient strokes)\n <span\n className={cn(\"block p-1 bg-gradient-to-b\", {\n \"from-neutral-1000 to-neutral-1300 dark:from-neutral-000 dark:to-neutral-300\":\n selected,\n \"from-neutral-000 to-neutral-300 dark:from-neutral-1000 dark:to-neutral-1300\":\n !selected,\n })}\n style={{ width: size, height: size, borderRadius: size / 4 }}\n >\n {/* Inner container, contains the foreground container element */}\n <span\n className={cn(\"flex items-center justify-center\", {\n \"bg-neutral-1200 dark:bg-neutral-100\": selected,\n \"bg-neutral-100 dark:bg-neutral-1200\": !selected,\n \"group-hover/product-tile:bg-neutral-000 dark:group-hover/product-tile:bg-neutral-1300\":\n selected === false && !unavailable,\n })}\n style={{ height: innerSize, borderRadius: size / 4 }}\n >\n {/* The product icons themselves */}\n {hoverName ? (\n <Icon\n name={hoverName}\n size={`${iconSize}px`}\n additionalCSS={cn({\n \"hidden group-hover/product-tile:flex\": !selected,\n flex: selected,\n })}\n />\n ) : null}\n <Icon\n name={name}\n size={`${iconSize}px`}\n additionalCSS={cn({\n \"text-neutral-000 dark:text-neutral-1300\": selected && !unavailable,\n \"text-neutral-1300 dark:text-neutral-000\":\n !selected && !unavailable,\n \"text-neutral-700 dark:text-neutral-600\": selected && unavailable,\n \"text-neutral-600 dark:text-neutral-700\": !selected && unavailable,\n \"flex group-hover/product-tile:hidden\": hoverName && !selected,\n hidden: hoverName && selected,\n })}\n />\n </span>\n </span>\n );\n};\n\nexport default ProductIcon;\n"],"names":["React","Icon","cn","ProductIcon","name","hoverName","selected","size","unavailable","innerSize","iconSize","span","className","style","width","height","borderRadius","additionalCSS","flex","hidden"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,SAAU,AAE3B,QAAOC,OAAQ,aAAc,CAU7B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACJC,WAAW,CACM,IACjB,GAAI,CAACJ,KAAM,CACT,OAAO,IACT,CAGA,MAAMK,UAAYF,KAAO,EAGzB,MAAMG,SAAW,AAACH,KAAO,EAAK,EAE9B,OAEE,oBAACI,QACCC,UAAWV,GAAG,6BAA8B,CAC1C,8EACEI,SACF,8EACE,CAACA,QACL,GACAO,MAAO,CAAEC,MAAOP,KAAMQ,OAAQR,KAAMS,aAAcT,KAAO,CAAE,GAG3D,oBAACI,QACCC,UAAWV,GAAG,mCAAoC,CAChD,sCAAuCI,SACvC,sCAAuC,CAACA,SACxC,wFACEA,WAAa,OAAS,CAACE,WAC3B,GACAK,MAAO,CAAEE,OAAQN,UAAWO,aAAcT,KAAO,CAAE,GAGlDF,UACC,oBAACJ,MACCG,KAAMC,UACNE,KAAM,CAAC,EAAEG,SAAS,EAAE,CAAC,CACrBO,cAAef,GAAG,CAChB,uCAAwC,CAACI,SACzCY,KAAMZ,QACR,KAEA,KACJ,oBAACL,MACCG,KAAMA,KACNG,KAAM,CAAC,EAAEG,SAAS,EAAE,CAAC,CACrBO,cAAef,GAAG,CAChB,0CAA2CI,UAAY,CAACE,YACxD,0CACE,CAACF,UAAY,CAACE,YAChB,yCAA0CF,UAAYE,YACtD,yCAA0C,CAACF,UAAYE,YACvD,uCAAwCH,WAAa,CAACC,SACtDa,OAAQd,WAAaC,QACvB,MAKV,CAEA,gBAAeH,WAAY"}
1
+ {"version":3,"sources":["../../../src/core/ProductTile/ProductIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport cn from \"../utils/cn\";\n\ntype ProductIconProps = {\n name?: IconName;\n hoverName?: IconName;\n selected?: boolean;\n size: number;\n unavailable: boolean;\n};\n\nconst ProductIcon = ({\n name,\n hoverName,\n selected,\n size,\n unavailable,\n}: ProductIconProps) => {\n if (!name) {\n return null;\n }\n\n // Inner container is 2px smaller to account for 1px padding on each side\n const innerSize = size - 2;\n\n // Padding around the icon is 1/4 the icon's size, so the icon is 4 of 6 parts\n const iconSize = (size / 6) * 4;\n\n return (\n // Outer container, contains the gradient stroke (since we can't natively have CSS gradient strokes)\n <span\n className={cn(\"block p-px bg-gradient-to-b\", {\n \"from-neutral-1000 to-neutral-1300 dark:from-neutral-000 dark:to-neutral-300\":\n selected,\n \"from-neutral-000 to-neutral-300 dark:from-neutral-1000 dark:to-neutral-1300\":\n !selected,\n })}\n style={{ width: size, height: size, borderRadius: size / 4 }}\n >\n {/* Inner container, contains the foreground container element */}\n <span\n className={cn(\"flex items-center justify-center\", {\n \"bg-neutral-1200 dark:bg-neutral-100\": selected,\n \"bg-neutral-100 dark:bg-neutral-1200\": !selected,\n \"group-hover/product-tile:bg-neutral-000 dark:group-hover/product-tile:bg-neutral-1300\":\n selected === false && !unavailable,\n })}\n style={{ height: innerSize, borderRadius: size / 4 }}\n >\n {/* The product icons themselves */}\n {hoverName ? (\n <Icon\n name={hoverName}\n size={`${iconSize}px`}\n additionalCSS={cn({\n \"hidden group-hover/product-tile:flex\": !selected,\n flex: selected,\n })}\n />\n ) : null}\n <Icon\n name={name}\n size={`${iconSize}px`}\n additionalCSS={cn({\n \"text-neutral-000 dark:text-neutral-1300\": selected && !unavailable,\n \"text-neutral-1300 dark:text-neutral-000\":\n !selected && !unavailable,\n \"text-neutral-700 dark:text-neutral-600\": selected && unavailable,\n \"text-neutral-600 dark:text-neutral-700\": !selected && unavailable,\n \"flex group-hover/product-tile:hidden\": hoverName && !selected,\n hidden: hoverName && selected,\n })}\n />\n </span>\n </span>\n );\n};\n\nexport default ProductIcon;\n"],"names":["React","Icon","cn","ProductIcon","name","hoverName","selected","size","unavailable","innerSize","iconSize","span","className","style","width","height","borderRadius","additionalCSS","flex","hidden"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,SAAU,AAE3B,QAAOC,OAAQ,aAAc,CAU7B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACJC,WAAW,CACM,IACjB,GAAI,CAACJ,KAAM,CACT,OAAO,IACT,CAGA,MAAMK,UAAYF,KAAO,EAGzB,MAAMG,SAAW,AAACH,KAAO,EAAK,EAE9B,OAEE,oBAACI,QACCC,UAAWV,GAAG,8BAA+B,CAC3C,8EACEI,SACF,8EACE,CAACA,QACL,GACAO,MAAO,CAAEC,MAAOP,KAAMQ,OAAQR,KAAMS,aAAcT,KAAO,CAAE,GAG3D,oBAACI,QACCC,UAAWV,GAAG,mCAAoC,CAChD,sCAAuCI,SACvC,sCAAuC,CAACA,SACxC,wFACEA,WAAa,OAAS,CAACE,WAC3B,GACAK,MAAO,CAAEE,OAAQN,UAAWO,aAAcT,KAAO,CAAE,GAGlDF,UACC,oBAACJ,MACCG,KAAMC,UACNE,KAAM,CAAC,EAAEG,SAAS,EAAE,CAAC,CACrBO,cAAef,GAAG,CAChB,uCAAwC,CAACI,SACzCY,KAAMZ,QACR,KAEA,KACJ,oBAACL,MACCG,KAAMA,KACNG,KAAM,CAAC,EAAEG,SAAS,EAAE,CAAC,CACrBO,cAAef,GAAG,CAChB,0CAA2CI,UAAY,CAACE,YACxD,0CACE,CAACF,UAAY,CAACE,YAChB,yCAA0CF,UAAYE,YACtD,yCAA0C,CAACF,UAAYE,YACvD,uCAAwCH,WAAa,CAACC,SACtDa,OAAQd,WAAaC,QACvB,MAKV,CAEA,gBAAeH,WAAY"}
package/core/ProductTile/ProductLabel.js CHANGED
@@ -1,2 +1,2 @@
1
- import React from"react";import cn from"../utils/cn";const LABEL_FONT_SIZE_RATIO=4;const DESCRIPTION_FONT_SIZE_RATIO=2.6;const ProductLabel=({label,unavailable,selected,numericalSize,showLabel,className})=>{if(!label||!showLabel){return null}const dynamicFontSize=numericalSize/LABEL_FONT_SIZE_RATIO;return React.createElement("span",{className:"flex flex-col justify-center"},unavailable?React.createElement("span",{className:"block"},React.createElement("span",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-widen-0.04 font-bold leading-snug",style:{fontSize:dynamicFontSize*.6,padding:`${dynamicFontSize*.25}px ${dynamicFontSize*.5}px`}},"COMING SOON")):React.createElement("span",{className:cn("block font-bold uppercase ui-text-p2 leading-snug",{"text-neutral-500 dark:text-neutral-700":selected},{"text-neutral-700 dark:text-neutral-500":!selected}),style:{fontSize:dynamicFontSize,letterSpacing:"0.06em"}},"Ably"),React.createElement("span",{className:cn("block ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected===true&&!unavailable},{"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000":selected===false&&!unavailable},{"text-neutral-1300 dark:text-neutral-000":selected===undefined&&!unavailable},{"text-neutral-700 dark:text-neutral-600":unavailable},{"mt-[-3px]":!unavailable},className),style:{fontSize:numericalSize/DESCRIPTION_FONT_SIZE_RATIO}},label))};export default ProductLabel;
1
+ import React from"react";import cn from"../utils/cn";const LABEL_FONT_SIZE_RATIO=4;const DESCRIPTION_FONT_SIZE_RATIO=2.6;const ProductLabel=({label,unavailable,selected,numericalSize,showLabel,className})=>{if(!label||!showLabel){return null}const dynamicFontSize=numericalSize/LABEL_FONT_SIZE_RATIO;return React.createElement("span",{className:"flex flex-col justify-center"},unavailable?React.createElement("span",{className:"block"},React.createElement("span",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-[0.04em] font-bold leading-snug",style:{fontSize:dynamicFontSize*.6,padding:`${dynamicFontSize*.25}px ${dynamicFontSize*.5}px`}},"COMING SOON")):React.createElement("span",{className:cn("block font-bold uppercase ui-text-p2 leading-snug",{"text-neutral-500 dark:text-neutral-700":selected},{"text-neutral-700 dark:text-neutral-500":!selected}),style:{fontSize:dynamicFontSize,letterSpacing:"0.06em"}},"Ably"),React.createElement("span",{className:cn("block ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected===true&&!unavailable},{"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000":selected===false&&!unavailable},{"text-neutral-1300 dark:text-neutral-000":selected===undefined&&!unavailable},{"text-neutral-700 dark:text-neutral-600":unavailable},{"mt-[-3px]":!unavailable},className),style:{fontSize:numericalSize/DESCRIPTION_FONT_SIZE_RATIO}},label))};export default ProductLabel;
2
2
  //# sourceMappingURL=ProductLabel.js.map
package/core/ProductTile/ProductLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/ProductTile/ProductLabel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductLabelProps = {\n label: string;\n unavailable: boolean;\n selected?: boolean;\n numericalSize: number;\n showLabel?: boolean;\n className?: string;\n};\n\nconst LABEL_FONT_SIZE_RATIO = 4;\nconst DESCRIPTION_FONT_SIZE_RATIO = 2.6;\n\nconst ProductLabel = ({\n label,\n unavailable,\n selected,\n numericalSize,\n showLabel,\n className,\n}: ProductLabelProps) => {\n if (!label || !showLabel) {\n return null;\n }\n\n const dynamicFontSize = numericalSize / LABEL_FONT_SIZE_RATIO;\n\n return (\n <span className=\"flex flex-col justify-center\">\n {unavailable ? (\n <span className=\"block\">\n <span\n className=\"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-widen-0.04 font-bold leading-snug\"\n style={{\n fontSize: dynamicFontSize * 0.6,\n padding: `${dynamicFontSize * 0.25}px ${dynamicFontSize * 0.5}px`,\n }}\n >\n COMING SOON\n </span>\n </span>\n ) : (\n <span\n className={cn(\n \"block font-bold uppercase ui-text-p2 leading-snug\",\n { \"text-neutral-500 dark:text-neutral-700\": selected },\n { \"text-neutral-700 dark:text-neutral-500\": !selected },\n )}\n style={{\n fontSize: dynamicFontSize,\n letterSpacing: \"0.06em\",\n }}\n >\n Ably\n </span>\n )}\n <span\n className={cn(\n \"block ui-text-p2 font-bold\",\n {\n \"text-neutral-000 dark:text-neutral-1300\":\n selected === true && !unavailable,\n },\n {\n \"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000\":\n selected === false && !unavailable,\n },\n {\n \"text-neutral-1300 dark:text-neutral-000\":\n selected === undefined && !unavailable,\n },\n {\n \"text-neutral-700 dark:text-neutral-600\": unavailable,\n },\n { \"mt-[-3px]\": !unavailable },\n className,\n )}\n style={{ fontSize: numericalSize / DESCRIPTION_FONT_SIZE_RATIO }}\n >\n {label}\n </span>\n </span>\n );\n};\n\nexport default ProductLabel;\n"],"names":["React","cn","LABEL_FONT_SIZE_RATIO","DESCRIPTION_FONT_SIZE_RATIO","ProductLabel","label","unavailable","selected","numericalSize","showLabel","className","dynamicFontSize","span","style","fontSize","padding","letterSpacing","undefined"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAW7B,MAAMC,sBAAwB,EAC9B,MAAMC,4BAA8B,IAEpC,MAAMC,aAAe,CAAC,CACpBC,KAAK,CACLC,WAAW,CACXC,QAAQ,CACRC,aAAa,CACbC,SAAS,CACTC,SAAS,CACS,IAClB,GAAI,CAACL,OAAS,CAACI,UAAW,CACxB,OAAO,IACT,CAEA,MAAME,gBAAkBH,cAAgBN,sBAExC,OACE,oBAACU,QAAKF,UAAU,gCACbJ,YACC,oBAACM,QAAKF,UAAU,SACd,oBAACE,QACCF,UAAU,wIACVG,MAAO,CACLC,SAAUH,gBAAkB,GAC5BI,QAAS,CAAC,EAAEJ,gBAAkB,IAAK,GAAG,EAAEA,gBAAkB,GAAI,EAAE,CAAC,AACnE,GACD,gBAKH,oBAACC,QACCF,UAAWT,GACT,oDACA,CAAE,yCAA0CM,QAAS,EACrD,CAAE,yCAA0C,CAACA,QAAS,GAExDM,MAAO,CACLC,SAAUH,gBACVK,cAAe,QACjB,GACD,QAIH,oBAACJ,QACCF,UAAWT,GACT,6BACA,CACE,0CACEM,WAAa,MAAQ,CAACD,WAC1B,EACA,CACE,oIACEC,WAAa,OAAS,CAACD,WAC3B,EACA,CACE,0CACEC,WAAaU,WAAa,CAACX,WAC/B,EACA,CACE,yCAA0CA,WAC5C,EACA,CAAE,YAAa,CAACA,WAAY,EAC5BI,WAEFG,MAAO,CAAEC,SAAUN,cAAgBL,2BAA4B,GAE9DE,OAIT,CAEA,gBAAeD,YAAa"}
1
+ {"version":3,"sources":["../../../src/core/ProductTile/ProductLabel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductLabelProps = {\n label: string;\n unavailable: boolean;\n selected?: boolean;\n numericalSize: number;\n showLabel?: boolean;\n className?: string;\n};\n\nconst LABEL_FONT_SIZE_RATIO = 4;\nconst DESCRIPTION_FONT_SIZE_RATIO = 2.6;\n\nconst ProductLabel = ({\n label,\n unavailable,\n selected,\n numericalSize,\n showLabel,\n className,\n}: ProductLabelProps) => {\n if (!label || !showLabel) {\n return null;\n }\n\n const dynamicFontSize = numericalSize / LABEL_FONT_SIZE_RATIO;\n\n return (\n <span className=\"flex flex-col justify-center\">\n {unavailable ? (\n <span className=\"block\">\n <span\n className=\"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-[0.04em] font-bold leading-snug\"\n style={{\n fontSize: dynamicFontSize * 0.6,\n padding: `${dynamicFontSize * 0.25}px ${dynamicFontSize * 0.5}px`,\n }}\n >\n COMING SOON\n </span>\n </span>\n ) : (\n <span\n className={cn(\n \"block font-bold uppercase ui-text-p2 leading-snug\",\n { \"text-neutral-500 dark:text-neutral-700\": selected },\n { \"text-neutral-700 dark:text-neutral-500\": !selected },\n )}\n style={{\n fontSize: dynamicFontSize,\n letterSpacing: \"0.06em\",\n }}\n >\n Ably\n </span>\n )}\n <span\n className={cn(\n \"block ui-text-p2 font-bold\",\n {\n \"text-neutral-000 dark:text-neutral-1300\":\n selected === true && !unavailable,\n },\n {\n \"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000\":\n selected === false && !unavailable,\n },\n {\n \"text-neutral-1300 dark:text-neutral-000\":\n selected === undefined && !unavailable,\n },\n {\n \"text-neutral-700 dark:text-neutral-600\": unavailable,\n },\n { \"mt-[-3px]\": !unavailable },\n className,\n )}\n style={{ fontSize: numericalSize / DESCRIPTION_FONT_SIZE_RATIO }}\n >\n {label}\n </span>\n </span>\n );\n};\n\nexport default ProductLabel;\n"],"names":["React","cn","LABEL_FONT_SIZE_RATIO","DESCRIPTION_FONT_SIZE_RATIO","ProductLabel","label","unavailable","selected","numericalSize","showLabel","className","dynamicFontSize","span","style","fontSize","padding","letterSpacing","undefined"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAW7B,MAAMC,sBAAwB,EAC9B,MAAMC,4BAA8B,IAEpC,MAAMC,aAAe,CAAC,CACpBC,KAAK,CACLC,WAAW,CACXC,QAAQ,CACRC,aAAa,CACbC,SAAS,CACTC,SAAS,CACS,IAClB,GAAI,CAACL,OAAS,CAACI,UAAW,CACxB,OAAO,IACT,CAEA,MAAME,gBAAkBH,cAAgBN,sBAExC,OACE,oBAACU,QAAKF,UAAU,gCACbJ,YACC,oBAACM,QAAKF,UAAU,SACd,oBAACE,QACCF,UAAU,sIACVG,MAAO,CACLC,SAAUH,gBAAkB,GAC5BI,QAAS,CAAC,EAAEJ,gBAAkB,IAAK,GAAG,EAAEA,gBAAkB,GAAI,EAAE,CAAC,AACnE,GACD,gBAKH,oBAACC,QACCF,UAAWT,GACT,oDACA,CAAE,yCAA0CM,QAAS,EACrD,CAAE,yCAA0C,CAACA,QAAS,GAExDM,MAAO,CACLC,SAAUH,gBACVK,cAAe,QACjB,GACD,QAIH,oBAACJ,QACCF,UAAWT,GACT,6BACA,CACE,0CACEM,WAAa,MAAQ,CAACD,WAC1B,EACA,CACE,oIACEC,WAAa,OAAS,CAACD,WAC3B,EACA,CACE,0CACEC,WAAaU,WAAa,CAACX,WAC/B,EACA,CACE,yCAA0CA,WAC5C,EACA,CAAE,YAAa,CAACA,WAAY,EAC5BI,WAEFG,MAAO,CAAEC,SAAUN,cAAgBL,2BAA4B,GAE9DE,OAIT,CAEA,gBAAeD,YAAa"}
package/core/ProductTile.js CHANGED
@@ -1,2 +1,2 @@
1
- import React from"react";import cn from"./utils/cn";import LinkButton from"./LinkButton";import{products}from"./ProductTile/data";import ProductIcon from"./ProductTile/ProductIcon";import ProductLabel from"./ProductTile/ProductLabel";import ProductDescription from"./ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const ProductTile=({name,selected,currentPage,className,onClick,showDescription=true,showLabel=true,size="40px",animateIcons=false,descriptionClassName,labelClassName})=>{const{icon,hoverIcon,label,description,link,unavailable}=products[name]??{};const numericalSize=parseInt(size,10);const containerPresent=showDescription||showLabel;return React.createElement("div",{className:cn("transition-colors group/product-tile",{"flex flex-col p-12 rounded-lg gap-8":containerPresent},{"bg-neutral-1300 dark:bg-neutral-000":selected},{"bg-neutral-000 dark:bg-neutral-1300":!selected},{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":selected===false&&!unavailable},{"cursor-pointer":selected!==undefined&&!unavailable},{"pointer-events-none":unavailable},{[`${className}`]:className}),"aria-hidden":unavailable,onClick:onClick},React.createElement("div",{className:cn("items-center",{flex:containerPresent},{"inline-flex":!containerPresent}),style:{gap:containerPresent?numericalSize/CONTAINER_GAP_RATIO:0}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,selected:selected,unavailable:!!unavailable}),React.createElement(ProductLabel,{label:label,selected:selected,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel,className:labelClassName})),React.createElement(ProductDescription,{description:description,selected:selected,unavailable:!!unavailable,showDescription:showDescription,className:descriptionClassName}),selected&&link?React.createElement(LinkButton,{variant:"secondary",size:"xs",className:"mt-8 !text-neutral-000 dark:!text-neutral-1300",rightIcon:"icon-gui-arrow-right-micro",iconColor:"text-orange-600",href:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
1
+ import React from"react";import cn from"./utils/cn";import LinkButton from"./LinkButton";import{products}from"./ProductTile/data";import ProductIcon from"./ProductTile/ProductIcon";import ProductLabel from"./ProductTile/ProductLabel";import ProductDescription from"./ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const ProductTile=({name,selected,currentPage,className,onClick,showDescription=true,showLabel=true,size="40px",animateIcons=false,descriptionClassName,labelClassName})=>{const{icon,hoverIcon,label,description,link,unavailable}=products[name]??{};const numericalSize=parseInt(size,10);const containerPresent=showDescription||showLabel;return React.createElement("div",{className:cn("transition-colors group/product-tile",{"flex flex-col p-3 rounded-lg gap-2":containerPresent},{"bg-neutral-1300 dark:bg-neutral-000":selected},{"bg-neutral-000 dark:bg-neutral-1300":!selected},{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":selected===false&&!unavailable},{"cursor-pointer":selected!==undefined&&!unavailable},{"pointer-events-none":unavailable},{[`${className}`]:className}),"aria-hidden":unavailable,onClick:onClick},React.createElement("div",{className:cn("items-center",{flex:containerPresent},{"inline-flex":!containerPresent}),style:{gap:containerPresent?numericalSize/CONTAINER_GAP_RATIO:0}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,selected:selected,unavailable:!!unavailable}),React.createElement(ProductLabel,{label:label,selected:selected,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel,className:labelClassName})),React.createElement(ProductDescription,{description:description,selected:selected,unavailable:!!unavailable,showDescription:showDescription,className:descriptionClassName}),selected&&link?React.createElement(LinkButton,{variant:"secondary",size:"xs",className:"mt-2 !text-neutral-000 dark:!text-neutral-1300",rightIcon:"icon-gui-arrow-right-micro",iconColor:"text-orange-600",href:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
2
2
  //# sourceMappingURL=ProductTile.js.map
package/core/ProductTile.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/ProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\nimport LinkButton from \"./LinkButton\";\nimport { ProductName, products } from \"./ProductTile/data\";\nimport ProductIcon from \"./ProductTile/ProductIcon\";\nimport ProductLabel from \"./ProductTile/ProductLabel\";\nimport ProductDescription from \"./ProductTile/ProductDescription\";\n\n/**\n * Props for the ProductTile component.\n */\nexport type ProductTileProps = {\n /**\n * The name of the product.\n */\n name: ProductName;\n\n /**\n * Indicates if the product tile is selected. If `undefined`, the product tile is not selectable.\n * @default false\n */\n selected?: boolean;\n\n /**\n * Indicates if the product tile is on the \"current\" page. Changes CTA copy.\n * @default false\n */\n currentPage?: boolean;\n\n /**\n * Additional CSS class names to apply to the product tile outer container.\n */\n className?: string;\n\n /**\n * Additional CSS class names to apply to the product description container.\n */\n descriptionClassName?: string;\n\n /**\n * Additional CSS class names to apply to the product name / label container.\n */\n labelClassName?: string;\n\n /**\n * Callback function to handle click events on the product tile.\n */\n onClick?: () => void;\n\n /**\n * Indicates if the product description should be shown.\n * @default true\n */\n showDescription?: boolean;\n\n /**\n * Indicates if the product label should be shown.\n * @default true\n */\n showLabel?: boolean;\n\n /**\n * The size of the product icon.\n * @default \"40px\"\n */\n size?: IconSize;\n\n /**\n * Indicates if the product icons should be animated.\n * @default false\n */\n animateIcons?: boolean;\n};\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst ProductTile = ({\n name,\n selected,\n currentPage,\n className,\n onClick,\n showDescription = true,\n showLabel = true,\n size = \"40px\",\n animateIcons = false,\n descriptionClassName,\n labelClassName,\n}: ProductTileProps) => {\n const { icon, hoverIcon, label, description, link, unavailable } =\n products[name] ?? {};\n const numericalSize = parseInt(size, 10);\n const containerPresent = showDescription || showLabel;\n\n return (\n <div\n className={cn(\n \"transition-colors group/product-tile\",\n { \"flex flex-col p-12 rounded-lg gap-8\": containerPresent },\n { \"bg-neutral-1300 dark:bg-neutral-000\": selected },\n {\n \"bg-neutral-000 dark:bg-neutral-1300\": !selected,\n },\n {\n \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\":\n selected === false && !unavailable,\n },\n { \"cursor-pointer\": selected !== undefined && !unavailable },\n { \"pointer-events-none\": unavailable },\n { [`${className}`]: className },\n )}\n aria-hidden={unavailable}\n onClick={onClick}\n >\n <div\n className={cn(\n \"items-center\",\n { flex: containerPresent },\n { \"inline-flex\": !containerPresent },\n )}\n style={{\n gap: containerPresent ? numericalSize / CONTAINER_GAP_RATIO : 0,\n }}\n >\n <ProductIcon\n size={numericalSize}\n name={icon}\n hoverName={animateIcons ? hoverIcon : undefined}\n selected={selected}\n unavailable={!!unavailable}\n />\n <ProductLabel\n label={label}\n selected={selected}\n unavailable={!!unavailable}\n numericalSize={numericalSize}\n showLabel={showLabel}\n className={labelClassName}\n />\n </div>\n <ProductDescription\n description={description}\n selected={selected}\n unavailable={!!unavailable}\n showDescription={showDescription}\n className={descriptionClassName}\n />\n {selected && link ? (\n <LinkButton\n variant=\"secondary\"\n size=\"xs\"\n className=\"mt-8 !text-neutral-000 dark:!text-neutral-1300\"\n rightIcon=\"icon-gui-arrow-right-micro\"\n iconColor=\"text-orange-600\"\n href={link}\n >\n {currentPage ? \"View docs\" : \"Explore\"}\n </LinkButton>\n ) : null}\n </div>\n );\n};\n\nexport default ProductTile;\n"],"names":["React","cn","LinkButton","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","ProductTile","name","selected","currentPage","className","onClick","showDescription","showLabel","size","animateIcons","descriptionClassName","labelClassName","icon","hoverIcon","label","description","link","unavailable","numericalSize","parseInt","containerPresent","div","undefined","aria-hidden","flex","style","gap","hoverName","variant","rightIcon","iconColor","href"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAE5B,QAAOC,eAAgB,cAAe,AACtC,QAAsBC,QAAQ,KAAQ,oBAAqB,AAC3D,QAAOC,gBAAiB,2BAA4B,AACpD,QAAOC,iBAAkB,4BAA6B,AACtD,QAAOC,uBAAwB,kCAAmC,CAoElE,MAAMC,oBAAsB,EAE5B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,QAAQ,CACRC,WAAW,CACXC,SAAS,CACTC,OAAO,CACPC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACpBC,oBAAoB,CACpBC,cAAc,CACG,IACjB,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,IAAI,CAAEC,WAAW,CAAE,CAC9DtB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMiB,cAAgBC,SAASX,KAAM,IACrC,MAAMY,iBAAmBd,iBAAmBC,UAE5C,OACE,oBAACc,OACCjB,UAAWX,GACT,uCACA,CAAE,sCAAuC2B,gBAAiB,EAC1D,CAAE,sCAAuClB,QAAS,EAClD,CACE,sCAAuC,CAACA,QAC1C,EACA,CACE,kDACEA,WAAa,OAAS,CAACe,WAC3B,EACA,CAAE,iBAAkBf,WAAaoB,WAAa,CAACL,WAAY,EAC3D,CAAE,sBAAuBA,WAAY,EACrC,CAAE,CAAC,CAAC,EAAEb,UAAU,CAAC,CAAC,CAAEA,SAAU,GAEhCmB,cAAaN,YACbZ,QAASA,SAET,oBAACgB,OACCjB,UAAWX,GACT,eACA,CAAE+B,KAAMJ,gBAAiB,EACzB,CAAE,cAAe,CAACA,gBAAiB,GAErCK,MAAO,CACLC,IAAKN,iBAAmBF,cAAgBnB,oBAAsB,CAChE,GAEA,oBAACH,aACCY,KAAMU,cACNjB,KAAMW,KACNe,UAAWlB,aAAeI,UAAYS,UACtCpB,SAAUA,SACVe,YAAa,CAAC,CAACA,cAEjB,oBAACpB,cACCiB,MAAOA,MACPZ,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfC,cAAeA,cACfX,UAAWA,UACXH,UAAWO,kBAGf,oBAACb,oBACCiB,YAAaA,YACbb,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfX,gBAAiBA,gBACjBF,UAAWM,uBAEZR,UAAYc,KACX,oBAACtB,YACCkC,QAAQ,YACRpB,KAAK,KACLJ,UAAU,iDACVyB,UAAU,6BACVC,UAAU,kBACVC,KAAMf,MAELb,YAAc,YAAc,WAE7B,KAGV,CAEA,gBAAeH,WAAY"}
1
+ {"version":3,"sources":["../../src/core/ProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\nimport LinkButton from \"./LinkButton\";\nimport { ProductName, products } from \"./ProductTile/data\";\nimport ProductIcon from \"./ProductTile/ProductIcon\";\nimport ProductLabel from \"./ProductTile/ProductLabel\";\nimport ProductDescription from \"./ProductTile/ProductDescription\";\n\n/**\n * Props for the ProductTile component.\n */\nexport type ProductTileProps = {\n /**\n * The name of the product.\n */\n name: ProductName;\n\n /**\n * Indicates if the product tile is selected. If `undefined`, the product tile is not selectable.\n * @default false\n */\n selected?: boolean;\n\n /**\n * Indicates if the product tile is on the \"current\" page. Changes CTA copy.\n * @default false\n */\n currentPage?: boolean;\n\n /**\n * Additional CSS class names to apply to the product tile outer container.\n */\n className?: string;\n\n /**\n * Additional CSS class names to apply to the product description container.\n */\n descriptionClassName?: string;\n\n /**\n * Additional CSS class names to apply to the product name / label container.\n */\n labelClassName?: string;\n\n /**\n * Callback function to handle click events on the product tile.\n */\n onClick?: () => void;\n\n /**\n * Indicates if the product description should be shown.\n * @default true\n */\n showDescription?: boolean;\n\n /**\n * Indicates if the product label should be shown.\n * @default true\n */\n showLabel?: boolean;\n\n /**\n * The size of the product icon.\n * @default \"40px\"\n */\n size?: IconSize;\n\n /**\n * Indicates if the product icons should be animated.\n * @default false\n */\n animateIcons?: boolean;\n};\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst ProductTile = ({\n name,\n selected,\n currentPage,\n className,\n onClick,\n showDescription = true,\n showLabel = true,\n size = \"40px\",\n animateIcons = false,\n descriptionClassName,\n labelClassName,\n}: ProductTileProps) => {\n const { icon, hoverIcon, label, description, link, unavailable } =\n products[name] ?? {};\n const numericalSize = parseInt(size, 10);\n const containerPresent = showDescription || showLabel;\n\n return (\n <div\n className={cn(\n \"transition-colors group/product-tile\",\n { \"flex flex-col p-3 rounded-lg gap-2\": containerPresent },\n { \"bg-neutral-1300 dark:bg-neutral-000\": selected },\n {\n \"bg-neutral-000 dark:bg-neutral-1300\": !selected,\n },\n {\n \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\":\n selected === false && !unavailable,\n },\n { \"cursor-pointer\": selected !== undefined && !unavailable },\n { \"pointer-events-none\": unavailable },\n { [`${className}`]: className },\n )}\n aria-hidden={unavailable}\n onClick={onClick}\n >\n <div\n className={cn(\n \"items-center\",\n { flex: containerPresent },\n { \"inline-flex\": !containerPresent },\n )}\n style={{\n gap: containerPresent ? numericalSize / CONTAINER_GAP_RATIO : 0,\n }}\n >\n <ProductIcon\n size={numericalSize}\n name={icon}\n hoverName={animateIcons ? hoverIcon : undefined}\n selected={selected}\n unavailable={!!unavailable}\n />\n <ProductLabel\n label={label}\n selected={selected}\n unavailable={!!unavailable}\n numericalSize={numericalSize}\n showLabel={showLabel}\n className={labelClassName}\n />\n </div>\n <ProductDescription\n description={description}\n selected={selected}\n unavailable={!!unavailable}\n showDescription={showDescription}\n className={descriptionClassName}\n />\n {selected && link ? (\n <LinkButton\n variant=\"secondary\"\n size=\"xs\"\n className=\"mt-2 !text-neutral-000 dark:!text-neutral-1300\"\n rightIcon=\"icon-gui-arrow-right-micro\"\n iconColor=\"text-orange-600\"\n href={link}\n >\n {currentPage ? \"View docs\" : \"Explore\"}\n </LinkButton>\n ) : null}\n </div>\n );\n};\n\nexport default ProductTile;\n"],"names":["React","cn","LinkButton","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","ProductTile","name","selected","currentPage","className","onClick","showDescription","showLabel","size","animateIcons","descriptionClassName","labelClassName","icon","hoverIcon","label","description","link","unavailable","numericalSize","parseInt","containerPresent","div","undefined","aria-hidden","flex","style","gap","hoverName","variant","rightIcon","iconColor","href"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAE5B,QAAOC,eAAgB,cAAe,AACtC,QAAsBC,QAAQ,KAAQ,oBAAqB,AAC3D,QAAOC,gBAAiB,2BAA4B,AACpD,QAAOC,iBAAkB,4BAA6B,AACtD,QAAOC,uBAAwB,kCAAmC,CAoElE,MAAMC,oBAAsB,EAE5B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,QAAQ,CACRC,WAAW,CACXC,SAAS,CACTC,OAAO,CACPC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACpBC,oBAAoB,CACpBC,cAAc,CACG,IACjB,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,IAAI,CAAEC,WAAW,CAAE,CAC9DtB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMiB,cAAgBC,SAASX,KAAM,IACrC,MAAMY,iBAAmBd,iBAAmBC,UAE5C,OACE,oBAACc,OACCjB,UAAWX,GACT,uCACA,CAAE,qCAAsC2B,gBAAiB,EACzD,CAAE,sCAAuClB,QAAS,EAClD,CACE,sCAAuC,CAACA,QAC1C,EACA,CACE,kDACEA,WAAa,OAAS,CAACe,WAC3B,EACA,CAAE,iBAAkBf,WAAaoB,WAAa,CAACL,WAAY,EAC3D,CAAE,sBAAuBA,WAAY,EACrC,CAAE,CAAC,CAAC,EAAEb,UAAU,CAAC,CAAC,CAAEA,SAAU,GAEhCmB,cAAaN,YACbZ,QAASA,SAET,oBAACgB,OACCjB,UAAWX,GACT,eACA,CAAE+B,KAAMJ,gBAAiB,EACzB,CAAE,cAAe,CAACA,gBAAiB,GAErCK,MAAO,CACLC,IAAKN,iBAAmBF,cAAgBnB,oBAAsB,CAChE,GAEA,oBAACH,aACCY,KAAMU,cACNjB,KAAMW,KACNe,UAAWlB,aAAeI,UAAYS,UACtCpB,SAAUA,SACVe,YAAa,CAAC,CAACA,cAEjB,oBAACpB,cACCiB,MAAOA,MACPZ,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfC,cAAeA,cACfX,UAAWA,UACXH,UAAWO,kBAGf,oBAACb,oBACCiB,YAAaA,YACbb,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfX,gBAAiBA,gBACjBF,UAAWM,uBAEZR,UAAYc,KACX,oBAACtB,YACCkC,QAAQ,YACRpB,KAAK,KACLJ,UAAU,iDACVyB,UAAU,6BACVC,UAAU,kBACVC,KAAMf,MAELb,YAAc,YAAc,WAE7B,KAGV,CAEA,gBAAeH,WAAY"}
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-48 p-12 gap-[10px]",rounded&&"px-[18px]"),sm:cn("h-40 p-[9px] gap-[9px]",rounded&&"px-[14px]"),xs:cn("h-36 p-8 gap-8",rounded&&"px-12")};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 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&&React.createElement(Icon,{name:leftIcon,size:iconSizes[size],"aria-hidden":"true"}),children&&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&&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 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&&React.createElement(Icon,{name:leftIcon,size:iconSizes[size],"aria-hidden":"true"}),children&&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&&React.createElement(Icon,{name:rightIcon,size:iconSizes[size],"aria-hidden":"true"}))};export default SegmentedControl;
2
2
  //# sourceMappingURL=SegmentedControl.js.map
package/core/SegmentedControl.js.map CHANGED
@@ -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-48 p-12 gap-[10px]\", rounded && \"px-[18px]\"),\n sm: cn(\"h-40 p-[9px] gap-[9px]\", rounded && \"px-[14px]\"),\n xs: cn(\"h-36 p-8 gap-8\", rounded && \"px-12\"),\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,CAiB1B,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,uBAAwBI,SAAW,aAC1CiB,GAAIrB,GAAG,yBAA0BI,SAAW,aAC5CkB,GAAItB,GAAG,iBAAkBI,SAAW,QACtC,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,OACE,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,UACC,oBAACJ,MAAKmC,KAAM/B,SAAUI,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAE1D3B,UACC,oBAAC4B,QACCnC,UAAWH,GACT,kCACAkB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCb,UACE,wHAGHF,UAGJJ,WACC,oBAACL,MAAKmC,KAAM9B,UAAWG,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAIlE,CAEA,gBAAenC,gBAAiB"}
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,CAiB1B,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,OACE,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,UACC,oBAACJ,MAAKmC,KAAM/B,SAAUI,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAE1D3B,UACC,oBAAC4B,QACCnC,UAAWH,GACT,kCACAkB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCb,UACE,wHAGHF,UAGJJ,WACC,oBAACL,MAAKmC,KAAM9B,UAAWG,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAIlE,CAEA,gBAAenC,gBAAiB"}
package/core/Slider/.DS_Store ADDED
Binary file
package/core/Slider/component.css CHANGED
@@ -3,7 +3,7 @@
3
3
  font-size: 0.5rem;
4
4
  top: -1px;
5
5
 
6
- @apply leading-none px-4 relative;
6
+ @apply leading-none px-1 relative;
7
7
  }
8
8
 
9
9
  @keyframes fillAnimation {
package/core/Slider.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=options?.controlPosition==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);timerRef.current=setInterval(next,options?.interval??1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options?.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24 -mt-16":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:options?.interval??1e4,intervalIndicator:options?.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex w-48"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"}))))))};export default Slider;
1
+ import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-1 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-10 h-1 mx-px rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=options?.controlPosition==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);timerRef.current=setInterval(next,options?.interval??1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options?.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-10"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-6 -mt-4":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-8 h-8":"hidden sm:flex w-12 h-12"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex w-12"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:options?.interval??1e4,intervalIndicator:options?.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-8 h-8":"hidden sm:flex w-12 h-12"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex w-12"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"}))))))};export default Slider;
2
2
  //# sourceMappingURL=Slider.js.map
package/core/Slider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/Slider.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n useRef,\n ReactNode,\n TouchEvent,\n} from \"react\";\nimport Icon from \"./Icon\";\n\ninterface SliderProps {\n children: ReactNode[];\n options?: {\n interval?: number;\n controlPosition?: \"inline\" | \"floating\";\n intervalIndicator?: boolean;\n };\n}\n\ninterface SliderIndicatorProps {\n numSlides: number;\n activeIndex: number;\n interval: number;\n intervalIndicator?: boolean;\n isInline?: boolean;\n}\n\nconst SLIDE_TRANSITION_LENGTH = 300;\n\nconst SlideIndicator = ({\n numSlides,\n activeIndex,\n interval,\n intervalIndicator,\n isInline,\n}: SliderIndicatorProps) => {\n return (\n <ul\n className={`flex gap-4 left-1/2 ${\n isInline ? \"bottom-0\" : \"absolute bottom-0 transform -translate-x-1/2\"\n }`}\n >\n {Array.from({ length: numSlides }, (_, i) =>\n intervalIndicator ? (\n <li\n key={i}\n className=\"relative w-40 h-4 mx-1 rounded-full bg-neutral-500\"\n >\n {i === activeIndex && (\n <span\n className=\"absolute inset-0 rounded-full bg-active-orange\"\n style={{\n animation: `fillAnimation ${interval}ms linear`,\n }}\n ></span>\n )}\n </li>\n ) : (\n <li key={i}>\n <span\n className={`ui-slider-marker ${\n i === activeIndex ? \"text-active-orange\" : \"text-cool-black\"\n }`}\n data-id=\"slider-marker\"\n >\n &#x2b24;\n </span>\n </li>\n ),\n )}\n </ul>\n );\n};\n\nconst setupSlides = (children: ReactNode[], activeIndex: number) => [\n children[activeIndex === 0 ? children.length - 1 : activeIndex - 1],\n children[activeIndex],\n children[activeIndex === children.length - 1 ? 0 : activeIndex + 1],\n];\n\nconst Slider = ({ children, options }: SliderProps) => {\n const [activeIndex, setActiveIndex] = useState(0);\n const [touchStartX, setTouchStartX] = useState(0);\n const [touchEndX, setTouchEndX] = useState(0);\n const [slides, setSlides] = useState<ReactNode[]>(\n setupSlides(children, activeIndex),\n );\n const [translationCoefficient, setTranslationCoefficient] = useState(0);\n const timerRef = useRef<NodeJS.Timeout | null>(null);\n const [slideLock, setSlideLock] = useState(false);\n\n const isInline = options?.controlPosition === \"inline\";\n\n const next = () => {\n if (!slideLock) {\n setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);\n setTranslationCoefficient(1);\n resetInterval();\n setSlideLock(true);\n }\n };\n\n const prev = () => {\n if (!slideLock) {\n setActiveIndex((prevIndex) =>\n prevIndex > 0 ? prevIndex - 1 : children.length - 1,\n );\n setTranslationCoefficient(-1);\n resetInterval();\n setSlideLock(true);\n }\n };\n\n const resetInterval = () => {\n if (timerRef.current) clearInterval(timerRef.current);\n timerRef.current = setInterval(next, options?.interval ?? 10000);\n };\n\n const handleTouchStart = (e: TouchEvent) => {\n setTouchStartX(e.touches[0].clientX);\n };\n\n const handleTouchMove = (e: TouchEvent) => {\n setTouchEndX(e.touches[0].clientX);\n };\n\n const handleTouchEnd = () => {\n if (touchStartX - touchEndX > 50) {\n next();\n }\n if (touchStartX - touchEndX < -50) {\n prev();\n }\n };\n\n useEffect(() => {\n resetInterval();\n return () => {\n if (timerRef.current) clearInterval(timerRef.current);\n };\n }, [children.length, options?.interval]);\n\n useEffect(() => {\n setTimeout(() => {\n setSlides(setupSlides(children, activeIndex));\n setTranslationCoefficient(0);\n setSlideLock(false);\n }, SLIDE_TRANSITION_LENGTH);\n }, [activeIndex]);\n\n return (\n <div\n className=\"relative\"\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n >\n <div className=\"overflow-y-visible overflow-x-clip w-full py-40\">\n <div\n className={`flex items-center ${\n translationCoefficient !== 0\n ? `transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`\n : \"\"\n } `}\n style={{\n transform: `translateX(-${(translationCoefficient + 1) * 100}%)`,\n }}\n >\n {slides.map((child, index) => (\n <div\n key={index}\n className=\"w-full flex-shrink-0 flex justify-center sm:px-60\"\n >\n {child}\n </div>\n ))}\n </div>\n </div>\n\n <div\n className={`flex items-center pointer-events-none ${\n isInline\n ? \"ui-standard-container justify-center gap-24 -mt-16\"\n : \"sm:flex sm:absolute inset-0 justify-between\"\n }`}\n >\n <button\n className={`${\n isInline ? \"w-32 h-32\" : \"hidden sm:flex w-48 h-48\"\n } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}\n onClick={prev}\n >\n <div className=\"ui-icon-cta-holder flex w-48\">\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n </div>\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n </div>\n </div>\n </button>\n\n <SlideIndicator\n numSlides={children.length}\n activeIndex={activeIndex}\n interval={options?.interval ?? 10000}\n intervalIndicator={options?.intervalIndicator}\n isInline={isInline}\n />\n\n <button\n className={`${\n isInline ? \"w-32 h-32\" : \"hidden sm:flex w-48 h-48\"\n } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}\n onClick={next}\n >\n <div className=\"ui-icon-cta-holder flex w-48\">\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n </div>\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n </div>\n </div>\n </button>\n </div>\n </div>\n );\n};\n\nexport default Slider;\n"],"names":["React","useState","useEffect","useRef","Icon","SLIDE_TRANSITION_LENGTH","SlideIndicator","numSlides","activeIndex","interval","intervalIndicator","isInline","ul","className","Array","from","length","_","i","li","key","span","style","animation","data-id","setupSlides","children","Slider","options","setActiveIndex","touchStartX","setTouchStartX","touchEndX","setTouchEndX","slides","setSlides","translationCoefficient","setTranslationCoefficient","timerRef","slideLock","setSlideLock","controlPosition","next","prevIndex","resetInterval","prev","current","clearInterval","setInterval","handleTouchStart","e","touches","clientX","handleTouchMove","handleTouchEnd","setTimeout","div","onTouchStart","onTouchMove","onTouchEnd","transform","map","child","index","button","onClick","name","size"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/core/Slider.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n useRef,\n ReactNode,\n TouchEvent,\n} from \"react\";\nimport Icon from \"./Icon\";\n\ninterface SliderProps {\n children: ReactNode[];\n options?: {\n interval?: number;\n controlPosition?: \"inline\" | \"floating\";\n intervalIndicator?: boolean;\n };\n}\n\ninterface SliderIndicatorProps {\n numSlides: number;\n activeIndex: number;\n interval: number;\n intervalIndicator?: boolean;\n isInline?: boolean;\n}\n\nconst SLIDE_TRANSITION_LENGTH = 300;\n\nconst SlideIndicator = ({\n numSlides,\n activeIndex,\n interval,\n intervalIndicator,\n isInline,\n}: SliderIndicatorProps) => {\n return (\n <ul\n className={`flex gap-1 left-1/2 ${\n isInline ? \"bottom-0\" : \"absolute bottom-0 transform -translate-x-1/2\"\n }`}\n >\n {Array.from({ length: numSlides }, (_, i) =>\n intervalIndicator ? (\n <li\n key={i}\n className=\"relative w-10 h-1 mx-px rounded-full bg-neutral-500\"\n >\n {i === activeIndex && (\n <span\n className=\"absolute inset-0 rounded-full bg-active-orange\"\n style={{\n animation: `fillAnimation ${interval}ms linear`,\n }}\n ></span>\n )}\n </li>\n ) : (\n <li key={i}>\n <span\n className={`ui-slider-marker ${\n i === activeIndex ? \"text-active-orange\" : \"text-cool-black\"\n }`}\n data-id=\"slider-marker\"\n >\n &#x2b24;\n </span>\n </li>\n ),\n )}\n </ul>\n );\n};\n\nconst setupSlides = (children: ReactNode[], activeIndex: number) => [\n children[activeIndex === 0 ? children.length - 1 : activeIndex - 1],\n children[activeIndex],\n children[activeIndex === children.length - 1 ? 0 : activeIndex + 1],\n];\n\nconst Slider = ({ children, options }: SliderProps) => {\n const [activeIndex, setActiveIndex] = useState(0);\n const [touchStartX, setTouchStartX] = useState(0);\n const [touchEndX, setTouchEndX] = useState(0);\n const [slides, setSlides] = useState<ReactNode[]>(\n setupSlides(children, activeIndex),\n );\n const [translationCoefficient, setTranslationCoefficient] = useState(0);\n const timerRef = useRef<NodeJS.Timeout | null>(null);\n const [slideLock, setSlideLock] = useState(false);\n\n const isInline = options?.controlPosition === \"inline\";\n\n const next = () => {\n if (!slideLock) {\n setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);\n setTranslationCoefficient(1);\n resetInterval();\n setSlideLock(true);\n }\n };\n\n const prev = () => {\n if (!slideLock) {\n setActiveIndex((prevIndex) =>\n prevIndex > 0 ? prevIndex - 1 : children.length - 1,\n );\n setTranslationCoefficient(-1);\n resetInterval();\n setSlideLock(true);\n }\n };\n\n const resetInterval = () => {\n if (timerRef.current) clearInterval(timerRef.current);\n timerRef.current = setInterval(next, options?.interval ?? 10000);\n };\n\n const handleTouchStart = (e: TouchEvent) => {\n setTouchStartX(e.touches[0].clientX);\n };\n\n const handleTouchMove = (e: TouchEvent) => {\n setTouchEndX(e.touches[0].clientX);\n };\n\n const handleTouchEnd = () => {\n if (touchStartX - touchEndX > 50) {\n next();\n }\n if (touchStartX - touchEndX < -50) {\n prev();\n }\n };\n\n useEffect(() => {\n resetInterval();\n return () => {\n if (timerRef.current) clearInterval(timerRef.current);\n };\n }, [children.length, options?.interval]);\n\n useEffect(() => {\n setTimeout(() => {\n setSlides(setupSlides(children, activeIndex));\n setTranslationCoefficient(0);\n setSlideLock(false);\n }, SLIDE_TRANSITION_LENGTH);\n }, [activeIndex]);\n\n return (\n <div\n className=\"relative\"\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n >\n <div className=\"overflow-y-visible overflow-x-clip w-full py-10\">\n <div\n className={`flex items-center ${\n translationCoefficient !== 0\n ? `transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`\n : \"\"\n } `}\n style={{\n transform: `translateX(-${(translationCoefficient + 1) * 100}%)`,\n }}\n >\n {slides.map((child, index) => (\n <div\n key={index}\n className=\"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]\"\n >\n {child}\n </div>\n ))}\n </div>\n </div>\n\n <div\n className={`flex items-center pointer-events-none ${\n isInline\n ? \"ui-standard-container justify-center gap-6 -mt-4\"\n : \"sm:flex sm:absolute inset-0 justify-between\"\n }`}\n >\n <button\n className={`${\n isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}\n onClick={prev}\n >\n <div className=\"ui-icon-cta-holder flex w-12\">\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n </div>\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n </div>\n </div>\n </button>\n\n <SlideIndicator\n numSlides={children.length}\n activeIndex={activeIndex}\n interval={options?.interval ?? 10000}\n intervalIndicator={options?.intervalIndicator}\n isInline={isInline}\n />\n\n <button\n className={`${\n isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}\n onClick={next}\n >\n <div className=\"ui-icon-cta-holder flex w-12\">\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n </div>\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n </div>\n </div>\n </button>\n </div>\n </div>\n );\n};\n\nexport default Slider;\n"],"names":["React","useState","useEffect","useRef","Icon","SLIDE_TRANSITION_LENGTH","SlideIndicator","numSlides","activeIndex","interval","intervalIndicator","isInline","ul","className","Array","from","length","_","i","li","key","span","style","animation","data-id","setupSlides","children","Slider","options","setActiveIndex","touchStartX","setTouchStartX","touchEndX","setTouchEndX","slides","setSlides","translationCoefficient","setTranslationCoefficient","timerRef","slideLock","setSlideLock","controlPosition","next","prevIndex","resetInterval","prev","current","clearInterval","setInterval","handleTouchStart","e","touches","clientX","handleTouchMove","handleTouchEnd","setTimeout","div","onTouchStart","onTouchMove","onTouchEnd","transform","map","child","index","button","onClick","name","size"],"mappings":"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"}
package/core/Status.js CHANGED
@@ -1,2 +1,2 @@
1
- import React from"react";import useSWR from"swr";import cn from"./utils/cn";import Icon from"./Icon";export const statusTypes=["none","operational","minor","major","critical","unknown"];export const StatusUrl="https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":case"operational":return"bg-gui-success-green";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-gui-error-red";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("span",{className:cn("inline-flex h-8 aspect-square rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl=StatusUrl,additionalCSS,refreshInterval=1e3*60,showDescription=false})=>{const{data}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("a",{href:"https://status.ably.com",className:cn("inline-flex group/status items-center gap-8",additionalCSS),target:"_blank",rel:"noreferrer"},React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}),showDescription&&data?.status?.description&&React.createElement("div",{className:"flex gap-8 ui-text-label4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors"},React.createElement("span",null,data.status.description.charAt(0).toUpperCase()+data.status.description.slice(1).toLowerCase()),React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline",size:"16px"})))};export default Status;
1
+ import React from"react";import useSWR from"swr";import cn from"./utils/cn";import Icon from"./Icon";export const statusTypes=["none","operational","minor","major","critical","unknown"];export const StatusUrl="https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":case"operational":return"bg-gui-success-green";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-gui-error-red";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("span",{className:cn("inline-flex h-2 aspect-square rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl=StatusUrl,additionalCSS,refreshInterval=1e3*60,showDescription=false})=>{const{data}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("a",{href:"https://status.ably.com",className:cn("inline-flex group/status items-center gap-2",additionalCSS),target:"_blank",rel:"noreferrer"},React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}),showDescription&&data?.status?.description&&React.createElement("div",{className:"flex gap-2 ui-text-label4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors"},React.createElement("span",null,data.status.description.charAt(0).toUpperCase()+data.status.description.slice(1).toLowerCase()),React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline",size:"16px"})))};export default Status;
2
2
  //# sourceMappingURL=Status.js.map
package/core/Status.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/Status.tsx"],"sourcesContent":["import React from \"react\";\nimport useSWR from \"swr\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\n\ntype StatusProps = {\n statusUrl: string;\n additionalCSS?: string;\n refreshInterval?: number;\n showDescription?: boolean;\n};\n\nexport const statusTypes = [\n \"none\",\n \"operational\",\n \"minor\",\n \"major\",\n \"critical\",\n \"unknown\",\n] as const;\n\nexport type StatusType = (typeof statusTypes)[number];\n\nexport const StatusUrl =\n \"https://ntqy1wz94gjv.statuspage.io/api/v2/status.json\";\n\n// Our SWR fetcher function\nconst fetcher = (url: string) => fetch(url).then((res) => res.json());\n\nconst indicatorClass = (indicator?: StatusType) => {\n switch (indicator) {\n case \"none\":\n case \"operational\":\n return \"bg-gui-success-green\";\n case \"minor\":\n return \"bg-yellow-500\";\n case \"major\":\n return \"bg-orange-500\";\n case \"critical\":\n return \"bg-gui-error-red\";\n default:\n return \"bg-neutral-500\";\n }\n};\n\nexport const StatusIcon = ({\n statusUrl,\n refreshInterval = 1000 * 60,\n}: StatusProps) => {\n const { data, error, isLoading } = useSWR(statusUrl, fetcher, {\n refreshInterval,\n });\n\n return (\n <span\n className={cn(\n \"inline-flex h-8 aspect-square rounded-full\",\n indicatorClass(data?.status?.indicator),\n { \"animate-pulse\": isLoading || error },\n )}\n ></span>\n );\n};\n\nconst Status = ({\n statusUrl = StatusUrl,\n additionalCSS,\n refreshInterval = 1000 * 60,\n showDescription = false,\n}: StatusProps) => {\n const { data } = useSWR(statusUrl, fetcher, {\n refreshInterval,\n });\n\n return (\n <a\n href=\"https://status.ably.com\"\n className={cn(\n \"inline-flex group/status items-center gap-8\",\n additionalCSS,\n )}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <StatusIcon\n statusUrl={statusUrl}\n refreshInterval={refreshInterval ?? 1000 * 60}\n />\n {showDescription && data?.status?.description && (\n <div className=\"flex gap-8 ui-text-label4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors\">\n <span>\n {data.status.description.charAt(0).toUpperCase() +\n data.status.description.slice(1).toLowerCase()}\n </span>\n <Icon name=\"icon-gui-arrow-top-right-on-square-outline\" size=\"16px\" />\n </div>\n )}\n </a>\n );\n};\n\nexport default Status;\n"],"names":["React","useSWR","cn","Icon","statusTypes","StatusUrl","fetcher","url","fetch","then","res","json","indicatorClass","indicator","StatusIcon","statusUrl","refreshInterval","data","error","isLoading","span","className","status","Status","additionalCSS","showDescription","a","href","target","rel","description","div","charAt","toUpperCase","slice","toLowerCase","name","size"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,WAAY,KAAM,AACzB,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAS1B,QAAO,MAAMC,YAAc,CACzB,OACA,cACA,QACA,QACA,WACA,UACD,AAAU,AAIX,QAAO,MAAMC,UACX,uDAAwD,CAG1D,MAAMC,QAAU,AAACC,KAAgBC,MAAMD,KAAKE,IAAI,CAAC,AAACC,KAAQA,IAAIC,IAAI,IAElE,MAAMC,eAAiB,AAACC,YACtB,OAAQA,WACN,IAAK,OACL,IAAK,cACH,MAAO,sBACT,KAAK,QACH,MAAO,eACT,KAAK,QACH,MAAO,eACT,KAAK,WACH,MAAO,kBACT,SACE,MAAO,gBACX,CACF,CAEA,QAAO,MAAMC,WAAa,CAAC,CACzBC,SAAS,CACTC,gBAAkB,IAAO,EAAE,CACf,IACZ,KAAM,CAAEC,IAAI,CAAEC,KAAK,CAAEC,SAAS,CAAE,CAAGlB,OAAOc,UAAWT,QAAS,CAC5DU,eACF,GAEA,OACE,oBAACI,QACCC,UAAWnB,GACT,6CACAU,eAAeK,MAAMK,QAAQT,WAC7B,CAAE,gBAAiBM,WAAaD,KAAM,IAI9C,CAAE,CAEF,MAAMK,OAAS,CAAC,CACdR,UAAYV,SAAS,CACrBmB,aAAa,CACbR,gBAAkB,IAAO,EAAE,CAC3BS,gBAAkB,KAAK,CACX,IACZ,KAAM,CAAER,IAAI,CAAE,CAAGhB,OAAOc,UAAWT,QAAS,CAC1CU,eACF,GAEA,OACE,oBAACU,KACCC,KAAK,0BACLN,UAAWnB,GACT,8CACAsB,eAEFI,OAAO,SACPC,IAAI,cAEJ,oBAACf,YACCC,UAAWA,UACXC,gBAAiBA,iBAAmB,IAAO,KAE5CS,iBAAmBR,MAAMK,QAAQQ,aAChC,oBAACC,OAAIV,UAAU,gLACb,oBAACD,YACEH,KAAKK,MAAM,CAACQ,WAAW,CAACE,MAAM,CAAC,GAAGC,WAAW,GAC5ChB,KAAKK,MAAM,CAACQ,WAAW,CAACI,KAAK,CAAC,GAAGC,WAAW,IAEhD,oBAAChC,MAAKiC,KAAK,6CAA6CC,KAAK,UAKvE,CAEA,gBAAed,MAAO"}
1
+ {"version":3,"sources":["../../src/core/Status.tsx"],"sourcesContent":["import React from \"react\";\nimport useSWR from \"swr\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\n\ntype StatusProps = {\n statusUrl: string;\n additionalCSS?: string;\n refreshInterval?: number;\n showDescription?: boolean;\n};\n\nexport const statusTypes = [\n \"none\",\n \"operational\",\n \"minor\",\n \"major\",\n \"critical\",\n \"unknown\",\n] as const;\n\nexport type StatusType = (typeof statusTypes)[number];\n\nexport const StatusUrl =\n \"https://ntqy1wz94gjv.statuspage.io/api/v2/status.json\";\n\n// Our SWR fetcher function\nconst fetcher = (url: string) => fetch(url).then((res) => res.json());\n\nconst indicatorClass = (indicator?: StatusType) => {\n switch (indicator) {\n case \"none\":\n case \"operational\":\n return \"bg-gui-success-green\";\n case \"minor\":\n return \"bg-yellow-500\";\n case \"major\":\n return \"bg-orange-500\";\n case \"critical\":\n return \"bg-gui-error-red\";\n default:\n return \"bg-neutral-500\";\n }\n};\n\nexport const StatusIcon = ({\n statusUrl,\n refreshInterval = 1000 * 60,\n}: StatusProps) => {\n const { data, error, isLoading } = useSWR(statusUrl, fetcher, {\n refreshInterval,\n });\n\n return (\n <span\n className={cn(\n \"inline-flex h-2 aspect-square rounded-full\",\n indicatorClass(data?.status?.indicator),\n { \"animate-pulse\": isLoading || error },\n )}\n ></span>\n );\n};\n\nconst Status = ({\n statusUrl = StatusUrl,\n additionalCSS,\n refreshInterval = 1000 * 60,\n showDescription = false,\n}: StatusProps) => {\n const { data } = useSWR(statusUrl, fetcher, {\n refreshInterval,\n });\n\n return (\n <a\n href=\"https://status.ably.com\"\n className={cn(\n \"inline-flex group/status items-center gap-2\",\n additionalCSS,\n )}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <StatusIcon\n statusUrl={statusUrl}\n refreshInterval={refreshInterval ?? 1000 * 60}\n />\n {showDescription && data?.status?.description && (\n <div className=\"flex gap-2 ui-text-label4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors\">\n <span>\n {data.status.description.charAt(0).toUpperCase() +\n data.status.description.slice(1).toLowerCase()}\n </span>\n <Icon name=\"icon-gui-arrow-top-right-on-square-outline\" size=\"16px\" />\n </div>\n )}\n </a>\n );\n};\n\nexport default Status;\n"],"names":["React","useSWR","cn","Icon","statusTypes","StatusUrl","fetcher","url","fetch","then","res","json","indicatorClass","indicator","StatusIcon","statusUrl","refreshInterval","data","error","isLoading","span","className","status","Status","additionalCSS","showDescription","a","href","target","rel","description","div","charAt","toUpperCase","slice","toLowerCase","name","size"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,WAAY,KAAM,AACzB,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAS1B,QAAO,MAAMC,YAAc,CACzB,OACA,cACA,QACA,QACA,WACA,UACD,AAAU,AAIX,QAAO,MAAMC,UACX,uDAAwD,CAG1D,MAAMC,QAAU,AAACC,KAAgBC,MAAMD,KAAKE,IAAI,CAAC,AAACC,KAAQA,IAAIC,IAAI,IAElE,MAAMC,eAAiB,AAACC,YACtB,OAAQA,WACN,IAAK,OACL,IAAK,cACH,MAAO,sBACT,KAAK,QACH,MAAO,eACT,KAAK,QACH,MAAO,eACT,KAAK,WACH,MAAO,kBACT,SACE,MAAO,gBACX,CACF,CAEA,QAAO,MAAMC,WAAa,CAAC,CACzBC,SAAS,CACTC,gBAAkB,IAAO,EAAE,CACf,IACZ,KAAM,CAAEC,IAAI,CAAEC,KAAK,CAAEC,SAAS,CAAE,CAAGlB,OAAOc,UAAWT,QAAS,CAC5DU,eACF,GAEA,OACE,oBAACI,QACCC,UAAWnB,GACT,6CACAU,eAAeK,MAAMK,QAAQT,WAC7B,CAAE,gBAAiBM,WAAaD,KAAM,IAI9C,CAAE,CAEF,MAAMK,OAAS,CAAC,CACdR,UAAYV,SAAS,CACrBmB,aAAa,CACbR,gBAAkB,IAAO,EAAE,CAC3BS,gBAAkB,KAAK,CACX,IACZ,KAAM,CAAER,IAAI,CAAE,CAAGhB,OAAOc,UAAWT,QAAS,CAC1CU,eACF,GAEA,OACE,oBAACU,KACCC,KAAK,0BACLN,UAAWnB,GACT,8CACAsB,eAEFI,OAAO,SACPC,IAAI,cAEJ,oBAACf,YACCC,UAAWA,UACXC,gBAAiBA,iBAAmB,IAAO,KAE5CS,iBAAmBR,MAAMK,QAAQQ,aAChC,oBAACC,OAAIV,UAAU,gLACb,oBAACD,YACEH,KAAKK,MAAM,CAACQ,WAAW,CAACE,MAAM,CAAC,GAAGC,WAAW,GAC5ChB,KAAKK,MAAM,CAACQ,WAAW,CAACI,KAAK,CAAC,GAAGC,WAAW,IAEhD,oBAAChC,MAAKiC,KAAK,6CAA6CC,KAAK,UAKvE,CAEA,gBAAed,MAAO"}