@ably/ui 16.2.0-dev.fccd868b → 16.2.0

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 (39) hide show
  1. package/core/CodeSnippet/ShellCommandView.js +1 -1
  2. package/core/CodeSnippet/ShellCommandView.js.map +1 -1
  3. package/core/CodeSnippet/languages.js +1 -1
  4. package/core/CodeSnippet/languages.js.map +1 -1
  5. package/core/CodeSnippet.js +1 -1
  6. package/core/CodeSnippet.js.map +1 -1
  7. package/core/ProductTile/ProductDescription.js +1 -1
  8. package/core/ProductTile/ProductDescription.js.map +1 -1
  9. package/core/ProductTile/ProductLabel.js +1 -1
  10. package/core/ProductTile/ProductLabel.js.map +1 -1
  11. package/core/ProductTile/data.js +1 -1
  12. package/core/ProductTile/data.js.map +1 -1
  13. package/core/ProductTile.js +1 -1
  14. package/core/ProductTile.js.map +1 -1
  15. package/core/remote-session-data.js.map +1 -1
  16. package/index.d.ts +19 -4
  17. package/package.json +2 -2
  18. package/core/.DS_Store +0 -0
  19. package/core/Accordion/.DS_Store +0 -0
  20. package/core/Code/.DS_Store +0 -0
  21. package/core/ContactFooter/.DS_Store +0 -0
  22. package/core/CookieMessage/.DS_Store +0 -0
  23. package/core/CustomerLogos/.DS_Store +0 -0
  24. package/core/DropdownMenu/.DS_Store +0 -0
  25. package/core/FeaturedLink/.DS_Store +0 -0
  26. package/core/Flash/.DS_Store +0 -0
  27. package/core/Footer/.DS_Store +0 -0
  28. package/core/Icon/.DS_Store +0 -0
  29. package/core/Loader/.DS_Store +0 -0
  30. package/core/Logo/.DS_Store +0 -0
  31. package/core/Meganav/.DS_Store +0 -0
  32. package/core/Notice/.DS_Store +0 -0
  33. package/core/Slider/.DS_Store +0 -0
  34. package/core/Table/.DS_Store +0 -0
  35. package/core/Tooltip/.DS_Store +0 -0
  36. package/core/icons/.DS_Store +0 -0
  37. package/core/icons/gui/.DS_Store +0 -0
  38. package/core/images/.DS_Store +0 -0
  39. package/core/images/logo/.DS_Store +0 -0
package/core/CodeSnippet/ShellCommandView.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useRef,useCallback}from"react";import Icon from"../Icon";import Code from"../Code";import cn from"../utils/cn";import useCopyToClipboard from"../utils/useCopyToClipboard";import CopyButton from"./CopyButton";const ShellCommandView=({content,className})=>{const{isCopied,copy}=useCopyToClipboard();const codeRef=useRef(null);const[isHovering,setIsHovering]=React.useState(false);const handleCopy=useCallback(()=>{if(!codeRef.current)return;copy(content)},[copy,content]);return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative",className),onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,ref:codeRef},React.createElement("div",{className:"absolute top-8 left-8 z-10"},React.createElement("div",{className:"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100"},React.createElement(Icon,{name:"icon-gui-command-line-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"}))),React.createElement("div",{className:"pl-56"},React.createElement(Code,{language:"shell",snippet:content,additionalCSS:"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12",showLines:false})),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};export default ShellCommandView;
1
+ import React,{useRef,useCallback}from"react";import Icon from"../Icon";import Code from"../Code";import cn from"../utils/cn";import useCopyToClipboard from"../utils/useCopyToClipboard";import CopyButton from"./CopyButton";const ShellCommandView=({content,className})=>{const{isCopied,copy}=useCopyToClipboard();const codeRef=useRef(null);const[isHovering,setIsHovering]=React.useState(false);const handleCopy=useCallback(()=>{if(!codeRef.current)return;copy(content)},[copy,content]);return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[54px]",className),onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,ref:codeRef},React.createElement("div",{className:"absolute top-8 left-8 z-10"},React.createElement("div",{className:"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100"},React.createElement(Icon,{name:"icon-gui-command-line-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"}))),React.createElement("div",{className:"pl-56"},React.createElement(Code,{language:"shell",snippet:content,additionalCSS:"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12",showLines:false})),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};export default ShellCommandView;
2
2
  //# sourceMappingURL=ShellCommandView.js.map
package/core/CodeSnippet/ShellCommandView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/ShellCommandView.tsx"],"sourcesContent":["import React, { useRef, useCallback } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\n\ninterface ShellCommandViewProps {\n content: string;\n className?: string;\n}\n\n/**\n * A specialized component for displaying shell commands with copy functionality\n */\nconst ShellCommandView: React.FC<ShellCommandViewProps> = ({\n content,\n className,\n}) => {\n const { isCopied, copy } = useCopyToClipboard();\n const codeRef = useRef<HTMLDivElement>(null);\n const [isHovering, setIsHovering] = React.useState(false);\n\n const handleCopy = useCallback(() => {\n if (!codeRef.current) return;\n copy(content);\n }, [copy, content]);\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative\",\n className,\n )}\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n ref={codeRef}\n >\n {/* Shell Icon */}\n <div className=\"absolute top-8 left-8 z-10\">\n <div className=\"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n <Icon\n name=\"icon-gui-command-line-outline\"\n size=\"20px\"\n color=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </div>\n </div>\n\n {/* Code Content */}\n <div className=\"pl-56\">\n <Code\n language=\"shell\"\n snippet={content}\n additionalCSS=\"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12\"\n showLines={false}\n />\n </div>\n\n {/* Copy Button - only shown on hover */}\n {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n </div>\n );\n};\n\nexport default ShellCommandView;\n"],"names":["React","useRef","useCallback","Icon","Code","cn","useCopyToClipboard","CopyButton","ShellCommandView","content","className","isCopied","copy","codeRef","isHovering","setIsHovering","useState","handleCopy","current","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","name","size","color","language","snippet","additionalCSS","showLines","onCopy"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,WAAW,KAAQ,OAAQ,AACnD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAUtC,MAAMC,iBAAoD,CAAC,CACzDC,OAAO,CACPC,SAAS,CACV,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGN,qBAC3B,MAAMO,QAAUZ,OAAuB,MACvC,KAAM,CAACa,WAAYC,cAAc,CAAGf,MAAMgB,QAAQ,CAAC,OAEnD,MAAMC,WAAaf,YAAY,KAC7B,GAAI,CAACW,QAAQK,OAAO,CAAE,OACtBN,KAAKH,QACP,EAAG,CAACG,KAAMH,QAAQ,EAElB,OACE,oBAACU,OACCT,UAAWL,GACT,6HACAK,WAEFU,aAAc,IAAML,cAAc,MAClCM,aAAc,IAAMN,cAAc,OAClCO,QAAS,IAAMP,cAAc,MAC7BQ,OAAQ,IAAMR,cAAc,OAC5BS,SAAU,EACVC,IAAKZ,SAGL,oBAACM,OAAIT,UAAU,8BACb,oBAACS,OAAIT,UAAU,6FACb,oBAACP,MACCuB,KAAK,gCACLC,KAAK,OACLC,MAAM,8CAMZ,oBAACT,OAAIT,UAAU,SACb,oBAACN,MACCyB,SAAS,QACTC,QAASrB,QACTsB,cAAc,8FACdC,UAAW,SAKdlB,YAAc,oBAACP,YAAW0B,OAAQhB,WAAYN,SAAUA,WAG/D,CAEA,gBAAeH,gBAAiB"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/ShellCommandView.tsx"],"sourcesContent":["import React, { useRef, useCallback } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\n\ninterface ShellCommandViewProps {\n content: string;\n className?: string;\n}\n\n/**\n * A specialized component for displaying shell commands with copy functionality\n */\nconst ShellCommandView: React.FC<ShellCommandViewProps> = ({\n content,\n className,\n}) => {\n const { isCopied, copy } = useCopyToClipboard();\n const codeRef = useRef<HTMLDivElement>(null);\n const [isHovering, setIsHovering] = React.useState(false);\n\n const handleCopy = useCallback(() => {\n if (!codeRef.current) return;\n copy(content);\n }, [copy, content]);\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative min-h-[54px]\",\n className,\n )}\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n ref={codeRef}\n >\n {/* Shell Icon */}\n <div className=\"absolute top-8 left-8 z-10\">\n <div className=\"w-36 h-36 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n <Icon\n name=\"icon-gui-command-line-outline\"\n size=\"20px\"\n color=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </div>\n </div>\n\n {/* Code Content */}\n <div className=\"pl-56\">\n <Code\n language=\"shell\"\n snippet={content}\n additionalCSS=\"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 pl-[56px] py-12\"\n showLines={false}\n />\n </div>\n\n {/* Copy Button - only shown on hover */}\n {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n </div>\n );\n};\n\nexport default ShellCommandView;\n"],"names":["React","useRef","useCallback","Icon","Code","cn","useCopyToClipboard","CopyButton","ShellCommandView","content","className","isCopied","copy","codeRef","isHovering","setIsHovering","useState","handleCopy","current","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","name","size","color","language","snippet","additionalCSS","showLines","onCopy"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,WAAW,KAAQ,OAAQ,AACnD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAUtC,MAAMC,iBAAoD,CAAC,CACzDC,OAAO,CACPC,SAAS,CACV,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGN,qBAC3B,MAAMO,QAAUZ,OAAuB,MACvC,KAAM,CAACa,WAAYC,cAAc,CAAGf,MAAMgB,QAAQ,CAAC,OAEnD,MAAMC,WAAaf,YAAY,KAC7B,GAAI,CAACW,QAAQK,OAAO,CAAE,OACtBN,KAAKH,QACP,EAAG,CAACG,KAAMH,QAAQ,EAElB,OACE,oBAACU,OACCT,UAAWL,GACT,0IACAK,WAEFU,aAAc,IAAML,cAAc,MAClCM,aAAc,IAAMN,cAAc,OAClCO,QAAS,IAAMP,cAAc,MAC7BQ,OAAQ,IAAMR,cAAc,OAC5BS,SAAU,EACVC,IAAKZ,SAGL,oBAACM,OAAIT,UAAU,8BACb,oBAACS,OAAIT,UAAU,6FACb,oBAACP,MACCuB,KAAK,gCACLC,KAAK,OACLC,MAAM,8CAMZ,oBAACT,OAAIT,UAAU,SACb,oBAACN,MACCyB,SAAS,QACTC,QAASrB,QACTsB,cAAc,8FACdC,UAAW,SAKdlB,YAAc,oBAACP,YAAW0B,OAAQhB,WAAYN,SAAUA,WAG/D,CAEA,gBAAeH,gBAAiB"}
package/core/CodeSnippet/languages.js CHANGED
@@ -1,2 +1,2 @@
1
- const languages={javascript:{label:"JavaScript",icon:"icon-tech-javascript",syntaxHighlighterKey:"javascript"},typescript:{label:"TypeScript",icon:"icon-tech-typescript",syntaxHighlighterKey:"typescript"},swift:{label:"Swift",icon:"icon-tech-swift",syntaxHighlighterKey:"swift"},java:{label:"Java",icon:"icon-tech-java",syntaxHighlighterKey:"java"},kotlin:{label:"Kotlin",icon:"icon-tech-kotlin",syntaxHighlighterKey:"kotlin"},python:{label:"Python",icon:"icon-tech-python",syntaxHighlighterKey:"python"},csharp:{label:"C#",icon:"icon-tech-csharp",syntaxHighlighterKey:"csharp"},go:{label:"Go",icon:"icon-tech-go",syntaxHighlighterKey:"go"},ruby:{label:"Ruby",icon:"icon-tech-ruby",syntaxHighlighterKey:"ruby"},php:{label:"PHP",icon:"icon-tech-php",syntaxHighlighterKey:"php"},nodejs:{label:"Node.js",icon:"icon-tech-nodejs",syntaxHighlighterKey:"javascript"},react:{label:"React",icon:"icon-tech-react",syntaxHighlighterKey:"javascript"},rust:{label:"Rust",icon:"icon-tech-web",syntaxHighlighterKey:"rust"},html:{label:"HTML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},css:{label:"CSS",icon:"icon-tech-web",syntaxHighlighterKey:"css"},shell:{label:"Shell",icon:"icon-tech-web",syntaxHighlighterKey:"bash"},bash:{label:"Bash",icon:"icon-tech-web",syntaxHighlighterKey:"bash"},json:{label:"JSON",icon:"icon-tech-web",syntaxHighlighterKey:"json"},xml:{label:"XML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},yaml:{label:"YAML",icon:"icon-tech-web",syntaxHighlighterKey:"yaml"},sql:{label:"SQL",icon:"icon-tech-postgres",syntaxHighlighterKey:"sql"}};export const getLanguageInfo=langKey=>{const key=langKey.toLowerCase();if(languages[key]){return languages[key]}return{label:langKey,icon:"icon-tech-web",syntaxHighlighterKey:langKey}};export default languages;
1
+ const languages={javascript:{label:"JavaScript",icon:"icon-tech-javascript",syntaxHighlighterKey:"javascript"},typescript:{label:"TypeScript",icon:"icon-tech-typescript",syntaxHighlighterKey:"typescript"},java:{label:"Java",icon:"icon-tech-java",syntaxHighlighterKey:"java"},kotlin:{label:"Kotlin",icon:"icon-tech-kotlin",syntaxHighlighterKey:"kotlin"},python:{label:"Python",icon:"icon-tech-python",syntaxHighlighterKey:"python"},csharp:{label:"C#",icon:"icon-tech-csharp",syntaxHighlighterKey:"csharp"},go:{label:"Go",icon:"icon-tech-go",syntaxHighlighterKey:"go"},ruby:{label:"Ruby",icon:"icon-tech-ruby",syntaxHighlighterKey:"ruby"},php:{label:"PHP",icon:"icon-tech-php",syntaxHighlighterKey:"php"},nodejs:{label:"Node.js",icon:"icon-tech-nodejs",syntaxHighlighterKey:"javascript"},react:{label:"React",icon:"icon-tech-react",syntaxHighlighterKey:"javascript"},html:{label:"HTML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},shell:{label:"Shell",icon:"icon-tech-web",syntaxHighlighterKey:"bash"},json:{label:"JSON",icon:"icon-tech-web",syntaxHighlighterKey:"json"},xml:{label:"XML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},sql:{label:"SQL",icon:"icon-tech-postgres",syntaxHighlighterKey:"sql"},swift:{label:"Swift",icon:"icon-tech-swift",syntaxHighlighterKey:"swift"},cpp:{label:"C++",icon:"icon-tech-web",syntaxHighlighterKey:"cpp"},dart:{label:"Dart",icon:"icon-tech-web",syntaxHighlighterKey:"dart"},objc:{label:"Objective-C",icon:"icon-tech-objectivec",syntaxHighlighterKey:"objc"},android:{label:"Android",icon:"icon-tech-android-head",syntaxHighlighterKey:"java"},flutter:{label:"Flutter",icon:"icon-tech-flutter",syntaxHighlighterKey:"dart"}};export const getLanguageInfo=langKey=>{const key=langKey.toLowerCase();if(languages[key]){return languages[key]}return{label:langKey,icon:"icon-tech-web",syntaxHighlighterKey:langKey}};export default languages;
2
2
  //# sourceMappingURL=languages.js.map
package/core/CodeSnippet/languages.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/languages.tsx"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport interface LanguageInfo {\n label: string;\n icon: IconName;\n syntaxHighlighterKey?: string;\n}\n\nexport type LanguageMap = Record<string, LanguageInfo>;\n\nconst languages: LanguageMap = {\n javascript: {\n label: \"JavaScript\",\n icon: \"icon-tech-javascript\",\n syntaxHighlighterKey: \"javascript\",\n },\n typescript: {\n label: \"TypeScript\",\n icon: \"icon-tech-typescript\",\n syntaxHighlighterKey: \"typescript\",\n },\n swift: {\n label: \"Swift\",\n icon: \"icon-tech-swift\",\n syntaxHighlighterKey: \"swift\",\n },\n java: {\n label: \"Java\",\n icon: \"icon-tech-java\",\n syntaxHighlighterKey: \"java\",\n },\n kotlin: {\n label: \"Kotlin\",\n icon: \"icon-tech-kotlin\",\n syntaxHighlighterKey: \"kotlin\",\n },\n python: {\n label: \"Python\",\n icon: \"icon-tech-python\",\n syntaxHighlighterKey: \"python\",\n },\n csharp: {\n label: \"C#\",\n icon: \"icon-tech-csharp\",\n syntaxHighlighterKey: \"csharp\",\n },\n go: {\n label: \"Go\",\n icon: \"icon-tech-go\",\n syntaxHighlighterKey: \"go\",\n },\n ruby: {\n label: \"Ruby\",\n icon: \"icon-tech-ruby\",\n syntaxHighlighterKey: \"ruby\",\n },\n php: {\n label: \"PHP\",\n icon: \"icon-tech-php\",\n syntaxHighlighterKey: \"php\",\n },\n nodejs: {\n label: \"Node.js\",\n icon: \"icon-tech-nodejs\",\n syntaxHighlighterKey: \"javascript\",\n },\n react: {\n label: \"React\",\n icon: \"icon-tech-react\",\n syntaxHighlighterKey: \"javascript\",\n },\n // Languages without specific tech icons use web as fallback\n rust: {\n label: \"Rust\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"rust\",\n },\n html: {\n label: \"HTML\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"xml\",\n },\n css: {\n label: \"CSS\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"css\",\n },\n shell: {\n label: \"Shell\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"bash\",\n },\n bash: {\n label: \"Bash\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"bash\",\n },\n json: {\n label: \"JSON\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"json\",\n },\n xml: {\n label: \"XML\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"xml\",\n },\n yaml: {\n label: \"YAML\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"yaml\",\n },\n sql: {\n label: \"SQL\",\n icon: \"icon-tech-postgres\",\n syntaxHighlighterKey: \"sql\",\n },\n};\n\n// Fallback function to handle languages not in the map\nexport const getLanguageInfo = (langKey: string): LanguageInfo => {\n const key = langKey.toLowerCase();\n\n if (languages[key]) {\n return languages[key];\n }\n\n // Fallback for unknown languages\n return {\n label: langKey,\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: langKey,\n };\n};\n\nexport default languages;\n"],"names":["languages","javascript","label","icon","syntaxHighlighterKey","typescript","swift","java","kotlin","python","csharp","go","ruby","php","nodejs","react","rust","html","css","shell","bash","json","xml","yaml","sql","getLanguageInfo","langKey","key","toLowerCase"],"mappings":"AAUA,MAAMA,UAAyB,CAC7BC,WAAY,CACVC,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAC,WAAY,CACVH,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAE,MAAO,CACLJ,MAAO,QACPC,KAAM,kBACNC,qBAAsB,OACxB,EACAG,KAAM,CACJL,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAI,OAAQ,CACNN,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAK,OAAQ,CACNP,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAM,OAAQ,CACNR,MAAO,KACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAO,GAAI,CACFT,MAAO,KACPC,KAAM,eACNC,qBAAsB,IACxB,EACAQ,KAAM,CACJV,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAS,IAAK,CACHX,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAU,OAAQ,CACNZ,MAAO,UACPC,KAAM,mBACNC,qBAAsB,YACxB,EACAW,MAAO,CACLb,MAAO,QACPC,KAAM,kBACNC,qBAAsB,YACxB,EAEAY,KAAM,CACJd,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAa,KAAM,CACJf,MAAO,OACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAc,IAAK,CACHhB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAe,MAAO,CACLjB,MAAO,QACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAgB,KAAM,CACJlB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAiB,KAAM,CACJnB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAkB,IAAK,CACHpB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAmB,KAAM,CACJrB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAoB,IAAK,CACHtB,MAAO,MACPC,KAAM,qBACNC,qBAAsB,KACxB,CACF,CAGA,QAAO,MAAMqB,gBAAkB,AAACC,UAC9B,MAAMC,IAAMD,QAAQE,WAAW,GAE/B,GAAI5B,SAAS,CAAC2B,IAAI,CAAE,CAClB,OAAO3B,SAAS,CAAC2B,IAAI,AACvB,CAGA,MAAO,CACLzB,MAAOwB,QACPvB,KAAM,gBACNC,qBAAsBsB,OACxB,CACF,CAAE,AAEF,gBAAe1B,SAAU"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/languages.tsx"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport interface LanguageInfo {\n label: string;\n icon: IconName;\n syntaxHighlighterKey?: string;\n}\n\nexport type LanguageMap = Record<string, LanguageInfo>;\n\nconst languages: LanguageMap = {\n javascript: {\n label: \"JavaScript\",\n icon: \"icon-tech-javascript\",\n syntaxHighlighterKey: \"javascript\",\n },\n typescript: {\n label: \"TypeScript\",\n icon: \"icon-tech-typescript\",\n syntaxHighlighterKey: \"typescript\",\n },\n java: {\n label: \"Java\",\n icon: \"icon-tech-java\",\n syntaxHighlighterKey: \"java\",\n },\n kotlin: {\n label: \"Kotlin\",\n icon: \"icon-tech-kotlin\",\n syntaxHighlighterKey: \"kotlin\",\n },\n python: {\n label: \"Python\",\n icon: \"icon-tech-python\",\n syntaxHighlighterKey: \"python\",\n },\n csharp: {\n label: \"C#\",\n icon: \"icon-tech-csharp\",\n syntaxHighlighterKey: \"csharp\",\n },\n go: {\n label: \"Go\",\n icon: \"icon-tech-go\",\n syntaxHighlighterKey: \"go\",\n },\n ruby: {\n label: \"Ruby\",\n icon: \"icon-tech-ruby\",\n syntaxHighlighterKey: \"ruby\",\n },\n php: {\n label: \"PHP\",\n icon: \"icon-tech-php\",\n syntaxHighlighterKey: \"php\",\n },\n nodejs: {\n label: \"Node.js\",\n icon: \"icon-tech-nodejs\",\n syntaxHighlighterKey: \"javascript\",\n },\n react: {\n label: \"React\",\n icon: \"icon-tech-react\",\n syntaxHighlighterKey: \"javascript\",\n },\n html: {\n label: \"HTML\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"xml\",\n },\n shell: {\n label: \"Shell\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"bash\",\n },\n json: {\n label: \"JSON\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"json\",\n },\n xml: {\n label: \"XML\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"xml\",\n },\n sql: {\n label: \"SQL\",\n icon: \"icon-tech-postgres\",\n syntaxHighlighterKey: \"sql\",\n },\n swift: {\n label: \"Swift\",\n icon: \"icon-tech-swift\",\n syntaxHighlighterKey: \"swift\",\n },\n // New entries from languageInfo.ts\n cpp: {\n label: \"C++\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"cpp\",\n },\n dart: {\n label: \"Dart\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"dart\",\n },\n objc: {\n label: \"Objective-C\",\n icon: \"icon-tech-objectivec\",\n syntaxHighlighterKey: \"objc\",\n },\n android: {\n label: \"Android\",\n icon: \"icon-tech-android-head\",\n syntaxHighlighterKey: \"java\",\n },\n flutter: {\n label: \"Flutter\",\n icon: \"icon-tech-flutter\",\n syntaxHighlighterKey: \"dart\",\n },\n};\n\n// Fallback function to handle languages not in the map\nexport const getLanguageInfo = (langKey: string): LanguageInfo => {\n const key = langKey.toLowerCase();\n\n if (languages[key]) {\n return languages[key];\n }\n\n // Fallback for unknown languages\n return {\n label: langKey,\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: langKey,\n };\n};\n\nexport default languages;\n"],"names":["languages","javascript","label","icon","syntaxHighlighterKey","typescript","java","kotlin","python","csharp","go","ruby","php","nodejs","react","html","shell","json","xml","sql","swift","cpp","dart","objc","android","flutter","getLanguageInfo","langKey","key","toLowerCase"],"mappings":"AAUA,MAAMA,UAAyB,CAC7BC,WAAY,CACVC,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAC,WAAY,CACVH,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAE,KAAM,CACJJ,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAG,OAAQ,CACNL,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAI,OAAQ,CACNN,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAK,OAAQ,CACNP,MAAO,KACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAM,GAAI,CACFR,MAAO,KACPC,KAAM,eACNC,qBAAsB,IACxB,EACAO,KAAM,CACJT,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAQ,IAAK,CACHV,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAS,OAAQ,CACNX,MAAO,UACPC,KAAM,mBACNC,qBAAsB,YACxB,EACAU,MAAO,CACLZ,MAAO,QACPC,KAAM,kBACNC,qBAAsB,YACxB,EACAW,KAAM,CACJb,MAAO,OACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAY,MAAO,CACLd,MAAO,QACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAa,KAAM,CACJf,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAc,IAAK,CACHhB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAe,IAAK,CACHjB,MAAO,MACPC,KAAM,qBACNC,qBAAsB,KACxB,EACAgB,MAAO,CACLlB,MAAO,QACPC,KAAM,kBACNC,qBAAsB,OACxB,EAEAiB,IAAK,CACHnB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAkB,KAAM,CACJpB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAmB,KAAM,CACJrB,MAAO,cACPC,KAAM,uBACNC,qBAAsB,MACxB,EACAoB,QAAS,CACPtB,MAAO,UACPC,KAAM,yBACNC,qBAAsB,MACxB,EACAqB,QAAS,CACPvB,MAAO,UACPC,KAAM,oBACNC,qBAAsB,MACxB,CACF,CAGA,QAAO,MAAMsB,gBAAkB,AAACC,UAC9B,MAAMC,IAAMD,QAAQE,WAAW,GAE/B,GAAI7B,SAAS,CAAC4B,IAAI,CAAE,CAClB,OAAO5B,SAAS,CAAC4B,IAAI,AACvB,CAGA,MAAO,CACL1B,MAAOyB,QACPxB,KAAM,gBACNC,qBAAsBuB,OACxB,CACF,CAAE,AAEF,gBAAe3B,SAAU"}
package/core/CodeSnippet.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{getLanguageInfo}from"./CodeSnippet/languages";import Icon from"./Icon";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import ShellCommandView from"./CodeSnippet/ShellCommandView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys})=>{const{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSingleShellCommand=childrenArray.length===1&&isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes("language-shell");childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return;let langName=langClass.substring(9);if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}},[children]);const showSDKSelector=sdkTypes.size>0;const hasOnlyJsonSnippet=useMemo(()=>{return languages.length===1&&languages[0]==="json"},[languages]);const[state,setState]=useState(()=>({activeSDKType:sdkTypes.size>0?sdkTypes.has("realtime")?"realtime":"rest":null,activeLanguage:null,selectedApiKey:apiKeys&&apiKeys.length>0?apiKeys[0]:"",ui:{isHovering:false}}));const{isCopied,copy}=useCopyToClipboard();const filteredLanguages=useMemo(()=>{if(!state.activeSDKType||!showSDKSelector){return languages}return languages.filter(lang=>lang.startsWith(`${state.activeSDKType}_`))},[state.activeSDKType,showSDKSelector,languages]);const initialActiveLanguage=useMemo(()=>{if(!lang){return filteredLanguages.length>0?filteredLanguages[0]:null}if(state.activeSDKType){const prefixedLang=`${state.activeSDKType}_${lang}`;if(languages.includes(prefixedLang)){return prefixedLang}}if(languages.includes(lang)){return lang}if(getLanguageInfo(lang).label!==lang){return lang}return filteredLanguages.length>0?filteredLanguages[0]:null},[lang,state.activeSDKType,languages,filteredLanguages]);useEffect(()=>{setState(prevState=>({...prevState,activeLanguage:initialActiveLanguage}))},[initialActiveLanguage]);const codeRef=useRef(null);const processedChildren=useMemo(()=>{if(!state.activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":state.activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return false;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return false;const langName=langClass.substring(9);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return child;const langName=langClass.substring(9);const cleanLang=hasOnlyJsonSnippet?"json":originalLangMap.get(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:String(codeContent),additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16",showLines:true})}return child})},[state.activeLanguage,childrenArray,originalLangMap,hasOnlyJsonSnippet]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!state.activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return false;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return false;const langName=langClass.substring(9);return langName===state.activeLanguage})},[state.activeLanguage,childrenArray,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!state.activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===state.activeLanguage){return codeElement.textContent||""}}return null},[state.activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);useEffect(()=>{if(apiKeys&&apiKeys.length>0&&!apiKeys.includes(state.selectedApiKey)){setState(prev=>({...prev,selectedApiKey:apiKeys[0]}))}},[apiKeys,state.selectedApiKey]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setState(prev=>({...prev,activeSDKType:type,activeLanguage:nextLang}))},[languages]);const handleLanguageChange=useCallback(language=>{setState(prev=>({...prev,activeLanguage:language}));if(onChange){const cleanLang=originalLangMap.get(language)||language;onChange(cleanLang)}},[onChange,originalLangMap]);const handleMouseEnter=useCallback(()=>{setState(prev=>({...prev,ui:{...prev.ui,isHovering:true}}))},[]);const handleMouseLeave=useCallback(()=>{setState(prev=>({...prev,ui:{...prev.ui,isHovering:false}}))},[]);const handleApiKeyChange=useCallback(apiKey=>{setState(prev=>({...prev,selectedApiKey:apiKey}))},[]);const getDisplayLanguageInfo=useCallback(lang=>{if(!lang)return null;const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang)},[originalLangMap]);const activeLanguageInfo=useMemo(()=>getDisplayLanguageInfo(state.activeLanguage),[getDisplayLanguageInfo,state.activeLanguage]);const getLanguageDisplayName=useCallback(lang=>{const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang).label},[originalLangMap]);const getLanguageIcon=useCallback(lang=>{const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang).icon},[originalLangMap]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguageInfo)return()=>null;return()=>React.createElement("div",{className:"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguageInfo]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=()=>{if(!state.activeLanguage){return null}if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguageInfo){return React.createElement(NoSnippetMessage,null)}return null};if(isSingleShellCommand){const shellChild=childrenArray[0];if(isValidElement(shellChild)&&isValidElement(shellChild.props.children)){const codeElement=shellChild.props.children;const codeContent=codeElement.props.children;return React.createElement(ShellCommandView,{content:String(codeContent),className:className})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[54px]",className)},headerRow&&React.createElement("div",{className:"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg"},React.createElement("div",{className:"flex space-x-6"},React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-orange-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-[48px]"})),showSDKSelector&&React.createElement("div",{className:cn("p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-12 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:state.activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:state.activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:state.activeLanguage,onLanguageChange:handleLanguageChange,getLanguageDisplayName:getLanguageDisplayName,getLanguageIcon:getLanguageIcon,activeLanguageInfo:activeLanguageInfo}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12",headerRow?"":"rounded-t-lg")},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageIcon(filteredLanguages[0]),size:"16px",additionalCSS:"mr-8"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500"},getLanguageDisplayName(filteredLanguages[0]))))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,onFocus:handleMouseEnter,onBlur:handleMouseLeave,tabIndex:0},renderContent(),state.ui.isHovering&&state.activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:state.selectedApiKey,onApiKeyChange:handleApiKeyChange}))};export default CodeSnippet;
1
+ import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{getLanguageInfo}from"./CodeSnippet/languages";import Icon from"./Icon";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import ShellCommandView from"./CodeSnippet/ShellCommandView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk})=>{const{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSingleShellCommand=childrenArray.length===1&&isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes("language-shell");childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return;const langName=langClass.substring(9);if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}},[children]);const showSDKSelector=sdkTypes.size>0;const hasOnlyJsonSnippet=useMemo(()=>{return languages.length===1&&languages[0]==="json"},[languages]);const initialSDKType=useMemo(()=>{if(sdkTypes.size===0){return null}if(sdk&&sdkTypes.has(sdk))return sdk;if(sdkTypes.has("realtime"))return"realtime";if(sdkTypes.has("rest"))return"rest";return null},[sdk,sdkTypes]);const[state,setState]=useState(()=>({activeSDKType:initialSDKType,activeLanguage:null,selectedApiKey:apiKeys&&apiKeys.length>0?apiKeys[0]:"",ui:{isHovering:false}}));const{isCopied,copy}=useCopyToClipboard();const filteredLanguages=useMemo(()=>{if(!state.activeSDKType||!showSDKSelector){return languages}return languages.filter(lang=>lang.startsWith(`${state.activeSDKType}_`))},[state.activeSDKType,showSDKSelector,languages]);const initialActiveLanguage=useMemo(()=>{if(!lang){return filteredLanguages.length>0?filteredLanguages[0]:null}if(state.activeSDKType){const prefixedLang=`${state.activeSDKType}_${lang}`;if(languages.includes(prefixedLang)){return prefixedLang}}if(languages.includes(lang)){return lang}if(getLanguageInfo(lang).label!==lang){return lang}return filteredLanguages.length>0?filteredLanguages[0]:null},[lang,state.activeSDKType,languages,filteredLanguages]);useEffect(()=>{setState(prevState=>({...prevState,activeLanguage:initialActiveLanguage}))},[initialActiveLanguage]);const codeRef=useRef(null);const processedChildren=useMemo(()=>{if(!state.activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":state.activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return false;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return false;const langName=langClass.substring(9);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return child;const langName=langClass.substring(9);const cleanLang=hasOnlyJsonSnippet?"json":originalLangMap.get(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:String(codeContent),additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16",showLines:true})}return child})},[state.activeLanguage,childrenArray,originalLangMap,hasOnlyJsonSnippet]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!state.activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement||!codeElement.props.className)return false;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return false;const langName=langClass.substring(9);return langName===state.activeLanguage})},[state.activeLanguage,childrenArray,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!state.activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===state.activeLanguage){return codeElement.textContent||""}}return null},[state.activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);useEffect(()=>{if(apiKeys&&apiKeys.length>0&&!apiKeys.includes(state.selectedApiKey)){setState(prev=>({...prev,selectedApiKey:apiKeys[0]}))}},[apiKeys,state.selectedApiKey]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setState(prev=>({...prev,activeSDKType:type,activeLanguage:nextLang}))},[languages]);const handleLanguageChange=useCallback(language=>{setState(prev=>({...prev,activeLanguage:language}));if(onChange){const cleanLang=originalLangMap.get(language)||language;onChange(cleanLang,state.activeSDKType)}},[onChange,originalLangMap,state.activeSDKType]);const handleMouseEnter=useCallback(()=>{setState(prev=>({...prev,ui:{...prev.ui,isHovering:true}}))},[]);const handleMouseLeave=useCallback(()=>{setState(prev=>({...prev,ui:{...prev.ui,isHovering:false}}))},[]);const handleApiKeyChange=useCallback(apiKey=>{setState(prev=>({...prev,selectedApiKey:apiKey}))},[]);const getDisplayLanguageInfo=useCallback(lang=>{if(!lang)return null;const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang)},[originalLangMap]);const activeLanguageInfo=useMemo(()=>getDisplayLanguageInfo(state.activeLanguage),[getDisplayLanguageInfo,state.activeLanguage]);const getLanguageDisplayName=useCallback(lang=>{const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang).label},[originalLangMap]);const getLanguageIcon=useCallback(lang=>{const cleanLang=originalLangMap.get(lang)||lang;return getLanguageInfo(cleanLang).icon},[originalLangMap]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguageInfo)return()=>null;return()=>React.createElement("div",{className:"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguageInfo]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=()=>{if(!state.activeLanguage){return null}if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguageInfo){return React.createElement(NoSnippetMessage,null)}return null};if(isSingleShellCommand){const shellChild=childrenArray[0];if(isValidElement(shellChild)&&isValidElement(shellChild.props.children)){const codeElement=shellChild.props.children;const codeContent=codeElement.props.children;return React.createElement(ShellCommandView,{content:String(codeContent),className:className})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[54px]",className)},headerRow&&React.createElement("div",{className:"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg"},React.createElement("div",{className:"flex space-x-6"},React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-orange-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-[12px] h-[12px] rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-[48px]"})),showSDKSelector&&React.createElement("div",{className:cn("p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-12 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:state.activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:state.activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:state.activeLanguage,onLanguageChange:handleLanguageChange,getLanguageDisplayName:getLanguageDisplayName,getLanguageIcon:getLanguageIcon,activeLanguageInfo:activeLanguageInfo}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12",headerRow?"":"rounded-t-lg")},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageIcon(filteredLanguages[0]),size:"16px",additionalCSS:"mr-8"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500"},getLanguageDisplayName(filteredLanguages[0]))))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,onFocus:handleMouseEnter,onBlur:handleMouseLeave,tabIndex:0},renderContent(),state.ui.isHovering&&state.activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:state.selectedApiKey,onApiKeyChange:handleApiKeyChange}))};export default CodeSnippet;
2
2
  //# sourceMappingURL=CodeSnippet.js.map
package/core/CodeSnippet.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n Children,\n isValidElement,\n useRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport { getLanguageInfo } from \"./CodeSnippet/languages\";\nimport Icon from \"./Icon\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport { IconName } from \"./Icon/types\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport ShellCommandView from \"./CodeSnippet/ShellCommandView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\ntype SDKType = \"realtime\" | \"rest\" | null;\n\n// Interface for component state management\ninterface CodeSnippetState {\n activeSDKType: SDKType;\n activeLanguage: string | null;\n selectedApiKey: string;\n ui: {\n isHovering: boolean;\n };\n}\n\nexport interface CodeSnippetProps {\n /**\n * If true, hides the language selector row completely\n */\n fixed?: boolean;\n /**\n * If true, renders a macOS-style window header with buttons and title\n */\n headerRow?: boolean;\n /**\n * Title to display in the header row (when headerRow is true)\n */\n title?: string;\n /**\n * Children elements with lang attribute\n */\n children: React.ReactNode;\n /**\n * Additional CSS classes\n */\n className?: string;\n /**\n * Default language to display. If not found in available languages, first available is used.\n * If found in languages but no matching snippet exists, a message is displayed.\n */\n lang?: string;\n /**\n * Callback fired when the active language changes\n */\n onChange?: (language: string) => void;\n /**\n * List of API keys to display in a dropdown\n */\n apiKeys?: string[];\n}\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n fixed = false,\n headerRow = false,\n title = \"Code\",\n children,\n className,\n lang,\n onChange,\n apiKeys,\n}) => {\n // Extract languages and SDK types from children\n const {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n } = useMemo(() => {\n const childrenArray = Children.toArray(children);\n const languages: string[] = [];\n const sdkTypes = new Set<SDKType>();\n const originalLangMap = new Map<string, string>();\n\n // Check if we have a single shell command\n const isSingleShellCommand =\n childrenArray.length === 1 &&\n isValidElement(childrenArray[0]) &&\n isValidElement(childrenArray[0].props.children) &&\n childrenArray[0].props.children.props.className?.includes(\n \"language-shell\",\n );\n\n // Extract all available languages from children and identify SDK types\n childrenArray.forEach((child) => {\n if (!isValidElement(child)) return;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return;\n\n // Extract language from className (format: \"language-javascript\", \"language-typescript\", etc.)\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n let langName = langClass.substring(9);\n\n // Look for SDK prefixes in the language name itself (e.g., \"language-realtime_javascript\")\n if (langName.startsWith(\"realtime_\")) {\n const baseLanguage = langName.substring(9);\n sdkTypes.add(\"realtime\");\n // Store original language value for later use\n originalLangMap.set(langName, baseLanguage);\n } else if (langName.startsWith(\"rest_\")) {\n const baseLanguage = langName.substring(5);\n sdkTypes.add(\"rest\");\n // Store original language value for later use\n originalLangMap.set(langName, baseLanguage);\n } else {\n // Regular language without SDK prefix\n originalLangMap.set(langName, langName);\n }\n\n // Add to languages list if not already included\n if (!languages.includes(langName)) {\n languages.push(langName);\n }\n });\n\n return {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n };\n }, [children]);\n\n // Check if we need to show SDK type selector\n const showSDKSelector = sdkTypes.size > 0;\n\n // Check if there is only a JSON snippet\n const hasOnlyJsonSnippet = useMemo(() => {\n return languages.length === 1 && languages[0] === \"json\";\n }, [languages]);\n\n // Consolidated state management\n const [state, setState] = useState<CodeSnippetState>(() => ({\n activeSDKType:\n sdkTypes.size > 0\n ? sdkTypes.has(\"realtime\")\n ? \"realtime\"\n : \"rest\"\n : null,\n activeLanguage: null, // Will be set after filteredLanguages are calculated\n selectedApiKey: apiKeys && apiKeys.length > 0 ? apiKeys[0] : \"\",\n ui: {\n isHovering: false,\n },\n }));\n\n // Use the copyToClipboard hook\n const { isCopied, copy } = useCopyToClipboard();\n\n // Get languages filtered by active SDK type - optimized with primitive dependencies\n const filteredLanguages = useMemo(() => {\n if (!state.activeSDKType || !showSDKSelector) {\n return languages;\n }\n return languages.filter((lang) =>\n lang.startsWith(`${state.activeSDKType}_`),\n );\n }, [state.activeSDKType, showSDKSelector, languages]);\n\n // Determine the initial active language - simplified dependencies\n const initialActiveLanguage = useMemo((): string | null => {\n // If no lang prop specified, default to first available filtered language\n if (!lang) {\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }\n\n // Try to find the language with SDK type prefix if applicable\n if (state.activeSDKType) {\n const prefixedLang = `${state.activeSDKType}_${lang}`;\n if (languages.includes(prefixedLang)) {\n return prefixedLang;\n }\n }\n\n // Try to find the language directly\n if (languages.includes(lang)) {\n return lang;\n }\n\n // Check if it's a known language but not available in snippets\n if (getLanguageInfo(lang).label !== lang) {\n return lang;\n }\n\n // Fallback to first available language\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }, [lang, state.activeSDKType, languages, filteredLanguages]);\n\n // Initialize activeLanguage after filteredLanguages are calculated\n useEffect(() => {\n setState((prevState) => ({\n ...prevState,\n activeLanguage: initialActiveLanguage,\n }));\n }, [initialActiveLanguage]);\n\n const codeRef = useRef<HTMLDivElement>(null);\n\n // Filter and process children for the active language - optimized with specific dependencies\n const processedChildren = useMemo(() => {\n if (!state.activeLanguage) return [];\n\n // Special case for JSON-only snippets\n const targetLanguage = hasOnlyJsonSnippet ? \"json\" : state.activeLanguage;\n\n return childrenArray\n .filter((child) => {\n if (!isValidElement(child)) return false;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return false;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return false;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // In JSON-only mode, only show JSON\n // Otherwise, match exactly with active language\n return langName === targetLanguage;\n })\n .map((child) => {\n if (!isValidElement(child)) return child;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement) return child;\n\n const codeContent = codeElement.props.children;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return child;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n const cleanLang = hasOnlyJsonSnippet\n ? \"json\"\n : originalLangMap.get(langName) || langName;\n const langInfo = getLanguageInfo(cleanLang);\n\n // If child content is a string or can be converted to a string\n if (\n typeof codeContent === \"string\" ||\n typeof codeContent === \"number\" ||\n typeof codeContent === \"boolean\"\n ) {\n return (\n <Code\n key={langName}\n language={langInfo.syntaxHighlighterKey || cleanLang}\n snippet={String(codeContent)}\n additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16\"\n showLines\n />\n );\n }\n\n // Otherwise, return the original content\n return child;\n });\n }, [\n state.activeLanguage,\n childrenArray,\n originalLangMap,\n hasOnlyJsonSnippet,\n ]);\n\n // Check if there's a snippet available for the active language\n const hasSnippetForActiveLanguage = useMemo(() => {\n if (!state.activeLanguage) return false;\n\n // If we have only JSON snippet, consider it available for any language\n if (hasOnlyJsonSnippet) return true;\n\n return childrenArray.some((child) => {\n if (!isValidElement(child)) return false;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return false;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return false;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // Match exactly with active language\n return langName === state.activeLanguage;\n });\n }, [state.activeLanguage, childrenArray, hasOnlyJsonSnippet]);\n\n // Function to get the current code text content\n const getCodeText = useCallback((): string | null => {\n if (\n !state.activeLanguage ||\n !hasSnippetForActiveLanguage ||\n !codeRef.current\n )\n return null;\n\n // Get the text content from the matching code element\n const allPreElements = codeRef.current.querySelectorAll(\"pre\");\n\n for (const preElement of Array.from(allPreElements)) {\n const codeElement = preElement.querySelector(\"code\");\n if (!codeElement || !codeElement.className) continue;\n\n const classNames = codeElement.className.split(\" \");\n const langClass = classNames.find((cls) => cls.startsWith(\"language-\"));\n if (!langClass) continue;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // In JSON-only mode, look for JSON, otherwise match active language\n if (\n (hasOnlyJsonSnippet && langName === \"json\") ||\n (!hasOnlyJsonSnippet && langName === state.activeLanguage)\n ) {\n return codeElement.textContent || \"\";\n }\n }\n\n return null;\n }, [state.activeLanguage, hasSnippetForActiveLanguage, hasOnlyJsonSnippet]);\n\n // Update selected API key if apiKeys changes\n useEffect(() => {\n if (\n apiKeys &&\n apiKeys.length > 0 &&\n !apiKeys.includes(state.selectedApiKey)\n ) {\n setState((prev) => ({\n ...prev,\n selectedApiKey: apiKeys[0],\n }));\n }\n }, [apiKeys, state.selectedApiKey]);\n\n // Event handlers - memoized with empty dependencies as they only use setState\n const handleSDKTypeChange = useCallback(\n (type: SDKType) => {\n // pick the first language that matches the new SDK prefix\n const nextLang = languages.find((l) => l.startsWith(`${type}_`)) ?? null;\n\n setState((prev) => ({\n ...prev,\n activeSDKType: type,\n activeLanguage: nextLang,\n }));\n\n // Don't call onChange when only the SDK type changes\n // The initialActiveLanguage useEffect will handle calling onChange\n // if needed when the active language changes as a result\n },\n [languages],\n );\n\n const handleLanguageChange = useCallback(\n (language: string) => {\n setState((prev) => ({\n ...prev,\n activeLanguage: language,\n }));\n\n // Always call onChange for explicit user changes\n // But pass the clean language name without SDK prefix\n if (onChange) {\n const cleanLang = originalLangMap.get(language) || language;\n onChange(cleanLang);\n }\n },\n [onChange, originalLangMap],\n );\n\n const handleMouseEnter = useCallback(() => {\n setState((prev) => ({\n ...prev,\n ui: { ...prev.ui, isHovering: true },\n }));\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setState((prev) => ({\n ...prev,\n ui: { ...prev.ui, isHovering: false },\n }));\n }, []);\n\n const handleApiKeyChange = useCallback((apiKey: string) => {\n setState((prev) => ({\n ...prev,\n selectedApiKey: apiKey,\n }));\n }, []);\n\n // Get language info for the active language - optimized to only depend on map and activeLanguage\n const getDisplayLanguageInfo = useCallback(\n (lang: string | null) => {\n if (!lang) return null;\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang);\n },\n [originalLangMap],\n );\n\n const activeLanguageInfo = useMemo(\n () => getDisplayLanguageInfo(state.activeLanguage),\n [getDisplayLanguageInfo, state.activeLanguage],\n );\n\n // Memoize language related function to avoid recreation on every render\n const getLanguageDisplayName = useCallback(\n (lang: string) => {\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang).label;\n },\n [originalLangMap],\n );\n\n // Memoize icon function to avoid recreation on every render\n const getLanguageIcon = useCallback(\n (lang: string): IconName => {\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang).icon;\n },\n [originalLangMap],\n );\n\n // Optimize no-snippet message by memoizing it\n const NoSnippetMessage = useMemo(() => {\n if (!activeLanguageInfo) return () => null;\n\n return () => (\n <div className=\"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center\">\n <Icon\n name=\"icon-gui-exclamation-triangle-outline\"\n color=\"text-yellow-600 dark:text-yellow-400\"\n size=\"24px\"\n />\n <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n There either isn&apos;t a {activeLanguageInfo.label} code sample for\n this example, or this feature isn&apos;t supported in{\" \"}\n {activeLanguageInfo.label}. Switch language to view this example in a\n different language, or check which SDKs support this feature.\n </p>\n </div>\n );\n }, [activeLanguageInfo]);\n\n // Determine if we should show the language selector\n const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n\n // Determine if we should show the full selector or simplified view\n const showFullSelector = filteredLanguages.length > 1;\n\n // Simplified content render logic\n const renderContent = () => {\n // No active language case\n if (!state.activeLanguage) {\n return null;\n }\n\n // Has snippet for active language (including JSON-only case)\n if (hasSnippetForActiveLanguage) {\n return processedChildren;\n }\n\n // No snippet but language info available\n if (activeLanguageInfo) {\n return <NoSnippetMessage />;\n }\n\n return null;\n };\n\n // Render special case for shell commands\n if (isSingleShellCommand) {\n const shellChild = childrenArray[0];\n if (\n isValidElement(shellChild) &&\n isValidElement(shellChild.props.children)\n ) {\n const codeElement = shellChild.props.children;\n const codeContent = codeElement.props.children;\n return (\n <ShellCommandView content={String(codeContent)} className={className} />\n );\n }\n }\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[54px]\",\n className,\n )}\n >\n {headerRow && (\n <div className=\"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg\">\n {/* macOS window buttons */}\n <div className=\"flex space-x-6\">\n <div className=\"w-[12px] h-[12px] rounded-full bg-orange-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-yellow-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-green-500\"></div>\n </div>\n\n {/* Title */}\n <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n {title}\n </div>\n\n {/* Empty div for balance */}\n <div className=\"w-[48px]\"></div>\n </div>\n )}\n\n {/* SDK Type Selector Row */}\n {showSDKSelector && (\n <div\n className={cn(\n \"p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n <div className=\"flex gap-12 justify-start\">\n {sdkTypes.has(\"realtime\") && (\n <TooltipButton\n tooltip=\"Realtime SDK\"\n active={state.activeSDKType === \"realtime\"}\n onClick={() => handleSDKTypeChange(\"realtime\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n Realtime\n </TooltipButton>\n )}\n\n {sdkTypes.has(\"rest\") && (\n <TooltipButton\n tooltip=\"REST SDK\"\n active={state.activeSDKType === \"rest\"}\n onClick={() => handleSDKTypeChange(\"rest\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n REST\n </TooltipButton>\n )}\n </div>\n </div>\n )}\n\n {/* Language Selector Row */}\n {showLanguageSelector &&\n (showFullSelector ? (\n <LanguageSelector\n languages={filteredLanguages}\n activeLanguage={state.activeLanguage}\n onLanguageChange={handleLanguageChange}\n getLanguageDisplayName={getLanguageDisplayName}\n getLanguageIcon={getLanguageIcon}\n activeLanguageInfo={activeLanguageInfo}\n />\n ) : (\n <div\n className={cn(\n \"border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n {filteredLanguages.length > 0 && (\n <>\n <Icon\n name={getLanguageIcon(filteredLanguages[0])}\n size=\"16px\"\n additionalCSS=\"mr-8\"\n />\n <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500\">\n {getLanguageDisplayName(filteredLanguages[0])}\n </span>\n </>\n )}\n </div>\n ))}\n\n <div\n ref={codeRef}\n className=\"relative\"\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleMouseEnter}\n onBlur={handleMouseLeave}\n tabIndex={0}\n >\n {renderContent()}\n\n {/* Copy button - simplified conditional */}\n {state.ui.isHovering &&\n state.activeLanguage &&\n hasSnippetForActiveLanguage && (\n <CopyButton\n onCopy={() => {\n const text = getCodeText();\n if (text) copy(text);\n }}\n isCopied={isCopied}\n />\n )}\n </div>\n\n {/* API Key Selector */}\n {apiKeys && (\n <ApiKeySelector\n apiKeys={apiKeys}\n selectedApiKey={state.selectedApiKey}\n onApiKeyChange={handleApiKeyChange}\n />\n )}\n </div>\n );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","getLanguageInfo","Icon","LanguageSelector","ApiKeySelector","useCopyToClipboard","ShellCommandView","CopyButton","TooltipButton","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","childrenArray","languages","sdkTypes","originalLangMap","isSingleShellCommand","toArray","Set","Map","length","props","includes","forEach","child","preElement","codeElement","classNames","split","langClass","find","cls","startsWith","langName","substring","baseLanguage","add","set","push","showSDKSelector","size","hasOnlyJsonSnippet","state","setState","activeSDKType","has","activeLanguage","selectedApiKey","ui","isHovering","isCopied","copy","filteredLanguages","filter","initialActiveLanguage","prefixedLang","label","prevState","codeRef","processedChildren","targetLanguage","map","codeContent","cleanLang","get","langInfo","key","language","syntaxHighlighterKey","snippet","String","additionalCSS","showLines","hasSnippetForActiveLanguage","some","getCodeText","current","allPreElements","querySelectorAll","Array","from","querySelector","textContent","prev","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","handleMouseEnter","handleMouseLeave","handleApiKeyChange","apiKey","getDisplayLanguageInfo","activeLanguageInfo","getLanguageDisplayName","getLanguageIcon","icon","NoSnippetMessage","div","name","color","p","showLanguageSelector","showFullSelector","renderContent","shellChild","content","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n Children,\n isValidElement,\n useRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport { getLanguageInfo } from \"./CodeSnippet/languages\";\nimport Icon from \"./Icon\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport { IconName } from \"./Icon/types\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport ShellCommandView from \"./CodeSnippet/ShellCommandView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\ntype SDKType = \"realtime\" | \"rest\" | null;\n\n// Interface for component state management\ninterface CodeSnippetState {\n activeSDKType: SDKType;\n activeLanguage: string | null;\n selectedApiKey: string;\n ui: {\n isHovering: boolean;\n };\n}\n\nexport interface CodeSnippetProps {\n /**\n * If true, hides the language selector row completely\n */\n fixed?: boolean;\n /**\n * If true, renders a macOS-style window header with buttons and title\n */\n headerRow?: boolean;\n /**\n * Title to display in the header row (when headerRow is true)\n */\n title?: string;\n /**\n * Children elements with lang attribute\n */\n children: React.ReactNode;\n /**\n * Additional CSS classes\n */\n className?: string;\n /**\n * Default language to display. If not found in available languages, first available is used.\n * If found in languages but no matching snippet exists, a message is displayed.\n */\n lang?: string;\n /**\n * Callback fired when the active language changes\n */\n onChange?: (language: string, sdk?: SDKType) => void;\n /**\n * List of API keys to display in a dropdown\n */\n apiKeys?: string[];\n /**\n * Default SDK type to use for the code snippet\n */\n sdk?: SDKType;\n}\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n fixed = false,\n headerRow = false,\n title = \"Code\",\n children,\n className,\n lang,\n onChange,\n apiKeys,\n sdk,\n}) => {\n // Extract languages and SDK types from children\n const {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n } = useMemo(() => {\n const childrenArray = Children.toArray(children);\n const languages: string[] = [];\n const sdkTypes = new Set<SDKType>();\n const originalLangMap = new Map<string, string>();\n\n // Check if we have a single shell command\n const isSingleShellCommand =\n childrenArray.length === 1 &&\n isValidElement(childrenArray[0]) &&\n isValidElement(childrenArray[0].props.children) &&\n childrenArray[0].props.children.props.className?.includes(\n \"language-shell\",\n );\n\n // Extract all available languages from children and identify SDK types\n childrenArray.forEach((child) => {\n if (!isValidElement(child)) return;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return;\n\n // Extract language from className (format: \"language-javascript\", \"language-typescript\", etc.)\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // Look for SDK prefixes in the language name itself (e.g., \"language-realtime_javascript\")\n if (langName.startsWith(\"realtime_\")) {\n const baseLanguage = langName.substring(9);\n sdkTypes.add(\"realtime\");\n // Store original language value for later use\n originalLangMap.set(langName, baseLanguage);\n } else if (langName.startsWith(\"rest_\")) {\n const baseLanguage = langName.substring(5);\n sdkTypes.add(\"rest\");\n // Store original language value for later use\n originalLangMap.set(langName, baseLanguage);\n } else {\n // Regular language without SDK prefix\n originalLangMap.set(langName, langName);\n }\n\n // Add to languages list if not already included\n if (!languages.includes(langName)) {\n languages.push(langName);\n }\n });\n\n return {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSingleShellCommand,\n };\n }, [children]);\n\n // Check if we need to show SDK type selector\n const showSDKSelector = sdkTypes.size > 0;\n\n // Check if there is only a JSON snippet\n const hasOnlyJsonSnippet = useMemo(() => {\n return languages.length === 1 && languages[0] === \"json\";\n }, [languages]);\n\n const initialSDKType = useMemo(() => {\n if (sdkTypes.size === 0) {\n return null;\n }\n\n if (sdk && sdkTypes.has(sdk)) return sdk;\n\n if (sdkTypes.has(\"realtime\")) return \"realtime\";\n\n if (sdkTypes.has(\"rest\")) return \"rest\";\n\n return null;\n }, [sdk, sdkTypes]);\n\n // Consolidated state management\n const [state, setState] = useState<CodeSnippetState>(() => ({\n activeSDKType: initialSDKType,\n activeLanguage: null, // Will be set after filteredLanguages are calculated\n selectedApiKey: apiKeys && apiKeys.length > 0 ? apiKeys[0] : \"\",\n ui: {\n isHovering: false,\n },\n }));\n\n // Use the copyToClipboard hook\n const { isCopied, copy } = useCopyToClipboard();\n\n // Get languages filtered by active SDK type - optimized with primitive dependencies\n const filteredLanguages = useMemo(() => {\n if (!state.activeSDKType || !showSDKSelector) {\n return languages;\n }\n return languages.filter((lang) =>\n lang.startsWith(`${state.activeSDKType}_`),\n );\n }, [state.activeSDKType, showSDKSelector, languages]);\n\n // Determine the initial active language - simplified dependencies\n const initialActiveLanguage = useMemo((): string | null => {\n // If no lang prop specified, default to first available filtered language\n if (!lang) {\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }\n\n // Try to find the language with SDK type prefix if applicable\n if (state.activeSDKType) {\n const prefixedLang = `${state.activeSDKType}_${lang}`;\n if (languages.includes(prefixedLang)) {\n return prefixedLang;\n }\n }\n\n // Try to find the language directly\n if (languages.includes(lang)) {\n return lang;\n }\n\n // Check if it's a known language but not available in snippets\n if (getLanguageInfo(lang).label !== lang) {\n return lang;\n }\n\n // Fallback to first available language\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }, [lang, state.activeSDKType, languages, filteredLanguages]);\n\n // Initialize activeLanguage after filteredLanguages are calculated\n useEffect(() => {\n setState((prevState) => ({\n ...prevState,\n activeLanguage: initialActiveLanguage,\n }));\n }, [initialActiveLanguage]);\n\n const codeRef = useRef<HTMLDivElement>(null);\n\n // Filter and process children for the active language - optimized with specific dependencies\n const processedChildren = useMemo(() => {\n if (!state.activeLanguage) return [];\n\n // Special case for JSON-only snippets\n const targetLanguage = hasOnlyJsonSnippet ? \"json\" : state.activeLanguage;\n\n return childrenArray\n .filter((child) => {\n if (!isValidElement(child)) return false;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return false;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return false;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // In JSON-only mode, only show JSON\n // Otherwise, match exactly with active language\n return langName === targetLanguage;\n })\n .map((child) => {\n if (!isValidElement(child)) return child;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement) return child;\n\n const codeContent = codeElement.props.children;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return child;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n const cleanLang = hasOnlyJsonSnippet\n ? \"json\"\n : originalLangMap.get(langName) || langName;\n const langInfo = getLanguageInfo(cleanLang);\n\n // If child content is a string or can be converted to a string\n if (\n typeof codeContent === \"string\" ||\n typeof codeContent === \"number\" ||\n typeof codeContent === \"boolean\"\n ) {\n return (\n <Code\n key={langName}\n language={langInfo.syntaxHighlighterKey || cleanLang}\n snippet={String(codeContent)}\n additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-24 py-16\"\n showLines\n />\n );\n }\n\n // Otherwise, return the original content\n return child;\n });\n }, [\n state.activeLanguage,\n childrenArray,\n originalLangMap,\n hasOnlyJsonSnippet,\n ]);\n\n // Check if there's a snippet available for the active language\n const hasSnippetForActiveLanguage = useMemo(() => {\n if (!state.activeLanguage) return false;\n\n // If we have only JSON snippet, consider it available for any language\n if (hasOnlyJsonSnippet) return true;\n\n return childrenArray.some((child) => {\n if (!isValidElement(child)) return false;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement || !codeElement.props.className) return false;\n\n // Extract language from className\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return false;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // Match exactly with active language\n return langName === state.activeLanguage;\n });\n }, [state.activeLanguage, childrenArray, hasOnlyJsonSnippet]);\n\n // Function to get the current code text content\n const getCodeText = useCallback((): string | null => {\n if (\n !state.activeLanguage ||\n !hasSnippetForActiveLanguage ||\n !codeRef.current\n )\n return null;\n\n // Get the text content from the matching code element\n const allPreElements = codeRef.current.querySelectorAll(\"pre\");\n\n for (const preElement of Array.from(allPreElements)) {\n const codeElement = preElement.querySelector(\"code\");\n if (!codeElement || !codeElement.className) continue;\n\n const classNames = codeElement.className.split(\" \");\n const langClass = classNames.find((cls) => cls.startsWith(\"language-\"));\n if (!langClass) continue;\n\n // Extract the language name from the class (remove \"language-\" prefix)\n const langName = langClass.substring(9);\n\n // In JSON-only mode, look for JSON, otherwise match active language\n if (\n (hasOnlyJsonSnippet && langName === \"json\") ||\n (!hasOnlyJsonSnippet && langName === state.activeLanguage)\n ) {\n return codeElement.textContent || \"\";\n }\n }\n\n return null;\n }, [state.activeLanguage, hasSnippetForActiveLanguage, hasOnlyJsonSnippet]);\n\n // Update selected API key if apiKeys changes\n useEffect(() => {\n if (\n apiKeys &&\n apiKeys.length > 0 &&\n !apiKeys.includes(state.selectedApiKey)\n ) {\n setState((prev) => ({\n ...prev,\n selectedApiKey: apiKeys[0],\n }));\n }\n }, [apiKeys, state.selectedApiKey]);\n\n // Event handlers - memoized with empty dependencies as they only use setState\n const handleSDKTypeChange = useCallback(\n (type: SDKType) => {\n // pick the first language that matches the new SDK prefix\n const nextLang = languages.find((l) => l.startsWith(`${type}_`)) ?? null;\n\n setState((prev) => ({\n ...prev,\n activeSDKType: type,\n activeLanguage: nextLang,\n }));\n\n // Don't call onChange when only the SDK type changes\n // The initialActiveLanguage useEffect will handle calling onChange\n // if needed when the active language changes as a result\n },\n [languages],\n );\n\n const handleLanguageChange = useCallback(\n (language: string) => {\n setState((prev) => ({\n ...prev,\n activeLanguage: language,\n }));\n\n // Always call onChange for explicit user changes\n // But pass the clean language name without SDK prefix\n if (onChange) {\n const cleanLang = originalLangMap.get(language) || language;\n onChange(cleanLang, state.activeSDKType);\n }\n },\n [onChange, originalLangMap, state.activeSDKType],\n );\n\n const handleMouseEnter = useCallback(() => {\n setState((prev) => ({\n ...prev,\n ui: { ...prev.ui, isHovering: true },\n }));\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setState((prev) => ({\n ...prev,\n ui: { ...prev.ui, isHovering: false },\n }));\n }, []);\n\n const handleApiKeyChange = useCallback((apiKey: string) => {\n setState((prev) => ({\n ...prev,\n selectedApiKey: apiKey,\n }));\n }, []);\n\n // Get language info for the active language - optimized to only depend on map and activeLanguage\n const getDisplayLanguageInfo = useCallback(\n (lang: string | null) => {\n if (!lang) return null;\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang);\n },\n [originalLangMap],\n );\n\n const activeLanguageInfo = useMemo(\n () => getDisplayLanguageInfo(state.activeLanguage),\n [getDisplayLanguageInfo, state.activeLanguage],\n );\n\n // Memoize language related function to avoid recreation on every render\n const getLanguageDisplayName = useCallback(\n (lang: string) => {\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang).label;\n },\n [originalLangMap],\n );\n\n // Memoize icon function to avoid recreation on every render\n const getLanguageIcon = useCallback(\n (lang: string): IconName => {\n const cleanLang = originalLangMap.get(lang) || lang;\n return getLanguageInfo(cleanLang).icon;\n },\n [originalLangMap],\n );\n\n // Optimize no-snippet message by memoizing it\n const NoSnippetMessage = useMemo(() => {\n if (!activeLanguageInfo) return () => null;\n\n return () => (\n <div className=\"px-64 py-24 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-12 items-center\">\n <Icon\n name=\"icon-gui-exclamation-triangle-outline\"\n color=\"text-yellow-600 dark:text-yellow-400\"\n size=\"24px\"\n />\n <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n There either isn&apos;t a {activeLanguageInfo.label} code sample for\n this example, or this feature isn&apos;t supported in{\" \"}\n {activeLanguageInfo.label}. Switch language to view this example in a\n different language, or check which SDKs support this feature.\n </p>\n </div>\n );\n }, [activeLanguageInfo]);\n\n // Determine if we should show the language selector\n const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n\n // Determine if we should show the full selector or simplified view\n const showFullSelector = filteredLanguages.length > 1;\n\n // Simplified content render logic\n const renderContent = () => {\n // No active language case\n if (!state.activeLanguage) {\n return null;\n }\n\n // Has snippet for active language (including JSON-only case)\n if (hasSnippetForActiveLanguage) {\n return processedChildren;\n }\n\n // No snippet but language info available\n if (activeLanguageInfo) {\n return <NoSnippetMessage />;\n }\n\n return null;\n };\n\n // Render special case for shell commands\n if (isSingleShellCommand) {\n const shellChild = childrenArray[0];\n if (\n isValidElement(shellChild) &&\n isValidElement(shellChild.props.children)\n ) {\n const codeElement = shellChild.props.children;\n const codeContent = codeElement.props.children;\n return (\n <ShellCommandView content={String(codeContent)} className={className} />\n );\n }\n }\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[54px]\",\n className,\n )}\n >\n {headerRow && (\n <div className=\"h-[38px] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-4 px-12 rounded-t-lg\">\n {/* macOS window buttons */}\n <div className=\"flex space-x-6\">\n <div className=\"w-[12px] h-[12px] rounded-full bg-orange-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-yellow-500\"></div>\n <div className=\"w-[12px] h-[12px] rounded-full bg-green-500\"></div>\n </div>\n\n {/* Title */}\n <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n {title}\n </div>\n\n {/* Empty div for balance */}\n <div className=\"w-[48px]\"></div>\n </div>\n )}\n\n {/* SDK Type Selector Row */}\n {showSDKSelector && (\n <div\n className={cn(\n \"p-8 border-b border-neutral-200 dark:border-neutral-1100 h-[56px]\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n <div className=\"flex gap-12 justify-start\">\n {sdkTypes.has(\"realtime\") && (\n <TooltipButton\n tooltip=\"Realtime SDK\"\n active={state.activeSDKType === \"realtime\"}\n onClick={() => handleSDKTypeChange(\"realtime\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n Realtime\n </TooltipButton>\n )}\n\n {sdkTypes.has(\"rest\") && (\n <TooltipButton\n tooltip=\"REST SDK\"\n active={state.activeSDKType === \"rest\"}\n onClick={() => handleSDKTypeChange(\"rest\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n REST\n </TooltipButton>\n )}\n </div>\n </div>\n )}\n\n {/* Language Selector Row */}\n {showLanguageSelector &&\n (showFullSelector ? (\n <LanguageSelector\n languages={filteredLanguages}\n activeLanguage={state.activeLanguage}\n onLanguageChange={handleLanguageChange}\n getLanguageDisplayName={getLanguageDisplayName}\n getLanguageIcon={getLanguageIcon}\n activeLanguageInfo={activeLanguageInfo}\n />\n ) : (\n <div\n className={cn(\n \"border-b border-neutral-200 dark:border-neutral-1100 h-[34px] flex items-center px-12\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n {filteredLanguages.length > 0 && (\n <>\n <Icon\n name={getLanguageIcon(filteredLanguages[0])}\n size=\"16px\"\n additionalCSS=\"mr-8\"\n />\n <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500\">\n {getLanguageDisplayName(filteredLanguages[0])}\n </span>\n </>\n )}\n </div>\n ))}\n\n <div\n ref={codeRef}\n className=\"relative\"\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleMouseEnter}\n onBlur={handleMouseLeave}\n tabIndex={0}\n >\n {renderContent()}\n\n {/* Copy button - simplified conditional */}\n {state.ui.isHovering &&\n state.activeLanguage &&\n hasSnippetForActiveLanguage && (\n <CopyButton\n onCopy={() => {\n const text = getCodeText();\n if (text) copy(text);\n }}\n isCopied={isCopied}\n />\n )}\n </div>\n\n {/* API Key Selector */}\n {apiKeys && (\n <ApiKeySelector\n apiKeys={apiKeys}\n selectedApiKey={state.selectedApiKey}\n onApiKeyChange={handleApiKeyChange}\n />\n )}\n </div>\n );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","getLanguageInfo","Icon","LanguageSelector","ApiKeySelector","useCopyToClipboard","ShellCommandView","CopyButton","TooltipButton","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","childrenArray","languages","sdkTypes","originalLangMap","isSingleShellCommand","toArray","Set","Map","length","props","includes","forEach","child","preElement","codeElement","classNames","split","langClass","find","cls","startsWith","langName","substring","baseLanguage","add","set","push","showSDKSelector","size","hasOnlyJsonSnippet","initialSDKType","has","state","setState","activeSDKType","activeLanguage","selectedApiKey","ui","isHovering","isCopied","copy","filteredLanguages","filter","initialActiveLanguage","prefixedLang","label","prevState","codeRef","processedChildren","targetLanguage","map","codeContent","cleanLang","get","langInfo","key","language","syntaxHighlighterKey","snippet","String","additionalCSS","showLines","hasSnippetForActiveLanguage","some","getCodeText","current","allPreElements","querySelectorAll","Array","from","querySelector","textContent","prev","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","handleMouseEnter","handleMouseLeave","handleApiKeyChange","apiKey","getDisplayLanguageInfo","activeLanguageInfo","getLanguageDisplayName","getLanguageIcon","icon","NoSnippetMessage","div","name","color","p","showLanguageSelector","showFullSelector","renderContent","shellChild","content","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"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"}
package/core/ProductTile/ProductDescription.js CHANGED
@@ -1,2 +1,2 @@
1
- import React from"react";import cn from"../utils/cn";const ProductDescription=({description,selected,unavailable,showDescription=true})=>{if(!description||!showDescription){return null}return React.createElement("span",{className:cn("block ui-text-p3 font-medium leading-snug",{"text-neutral-300 dark:text-neutral-1000":selected&&!unavailable},{"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300":!selected})},description)};export default ProductDescription;
1
+ import React from"react";import cn from"../utils/cn";const ProductDescription=({description,selected,unavailable,showDescription=true,className})=>{if(!description||!showDescription){return null}return React.createElement("span",{className:cn("block ui-text-p3 font-medium leading-snug",{"text-neutral-300 dark:text-neutral-1000":selected&&!unavailable},{"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300":!selected},className)},description)};export default ProductDescription;
2
2
  //# sourceMappingURL=ProductDescription.js.map
package/core/ProductTile/ProductDescription.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/ProductTile/ProductDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductDescriptionProps = {\n description: string;\n selected?: boolean;\n unavailable: boolean;\n showDescription?: boolean;\n};\n\nconst ProductDescription = ({\n description,\n selected,\n unavailable,\n showDescription = true,\n}: ProductDescriptionProps) => {\n if (!description || !showDescription) {\n return null;\n }\n\n return (\n <span\n className={cn(\n \"block ui-text-p3 font-medium leading-snug\",\n {\n \"text-neutral-300 dark:text-neutral-1000\": selected && !unavailable,\n },\n {\n \"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300\":\n !selected,\n },\n )}\n >\n {description}\n </span>\n );\n};\n\nexport default ProductDescription;\n"],"names":["React","cn","ProductDescription","description","selected","unavailable","showDescription","span","className"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAS7B,MAAMC,mBAAqB,CAAC,CAC1BC,WAAW,CACXC,QAAQ,CACRC,WAAW,CACXC,gBAAkB,IAAI,CACE,IACxB,GAAI,CAACH,aAAe,CAACG,gBAAiB,CACpC,OAAO,IACT,CAEA,OACE,oBAACC,QACCC,UAAWP,GACT,4CACA,CACE,0CAA2CG,UAAY,CAACC,WAC1D,EACA,CACE,mIACE,CAACD,QACL,IAGDD,YAGP,CAEA,gBAAeD,kBAAmB"}
1
+ {"version":3,"sources":["../../../src/core/ProductTile/ProductDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductDescriptionProps = {\n description: string;\n selected?: boolean;\n unavailable: boolean;\n showDescription?: boolean;\n className?: string;\n};\n\nconst ProductDescription = ({\n description,\n selected,\n unavailable,\n showDescription = true,\n className,\n}: ProductDescriptionProps) => {\n if (!description || !showDescription) {\n return null;\n }\n\n return (\n <span\n className={cn(\n \"block ui-text-p3 font-medium leading-snug\",\n {\n \"text-neutral-300 dark:text-neutral-1000\": selected && !unavailable,\n },\n {\n \"text-neutral-700 dark:text-neutral-600 group-hover/product-tile:text-neutral-1000 dark:group-hover/product-tile:text-neutral-300\":\n !selected,\n },\n className,\n )}\n >\n {description}\n </span>\n );\n};\n\nexport default ProductDescription;\n"],"names":["React","cn","ProductDescription","description","selected","unavailable","showDescription","className","span"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAU7B,MAAMC,mBAAqB,CAAC,CAC1BC,WAAW,CACXC,QAAQ,CACRC,WAAW,CACXC,gBAAkB,IAAI,CACtBC,SAAS,CACe,IACxB,GAAI,CAACJ,aAAe,CAACG,gBAAiB,CACpC,OAAO,IACT,CAEA,OACE,oBAACE,QACCD,UAAWN,GACT,4CACA,CACE,0CAA2CG,UAAY,CAACC,WAC1D,EACA,CACE,mIACE,CAACD,QACL,EACAG,YAGDJ,YAGP,CAEA,gBAAeD,kBAAmB"}
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})=>{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}),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-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;
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};\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}: 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 )}\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","dynamicFontSize","span","className","style","fontSize","padding","letterSpacing","undefined"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAU7B,MAAMC,sBAAwB,EAC9B,MAAMC,4BAA8B,IAEpC,MAAMC,aAAe,CAAC,CACpBC,KAAK,CACLC,WAAW,CACXC,QAAQ,CACRC,aAAa,CACbC,SAAS,CACS,IAClB,GAAI,CAACJ,OAAS,CAACI,UAAW,CACxB,OAAO,IACT,CAEA,MAAMC,gBAAkBF,cAAgBN,sBAExC,OACE,oBAACS,QAAKC,UAAU,gCACbN,YACC,oBAACK,QAAKC,UAAU,SACd,oBAACD,QACCC,UAAU,wIACVC,MAAO,CACLC,SAAUJ,gBAAkB,GAC5BK,QAAS,CAAC,EAAEL,gBAAkB,IAAK,GAAG,EAAEA,gBAAkB,GAAI,EAAE,CAAC,AACnE,GACD,gBAKH,oBAACC,QACCC,UAAWX,GACT,oDACA,CAAE,yCAA0CM,QAAS,EACrD,CAAE,yCAA0C,CAACA,QAAS,GAExDM,MAAO,CACLC,SAAUJ,gBACVM,cAAe,QACjB,GACD,QAIH,oBAACL,QACCC,UAAWX,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,GAE9BO,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-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"}
package/core/ProductTile/data.js CHANGED
@@ -1,2 +1,2 @@
1
- export const productNames=["pubsub","chat","spaces","liveSync","assetTracking","liveObjects"];export const products={pubsub:{label:"Pub/Sub",description:"Low-level APIs to build any realtime experience",icon:"icon-product-pubsub-mono",hoverIcon:"icon-product-pubsub",link:"/docs/products/channels"},chat:{label:"Chat",description:"Rapidly build chat features and roll-out at scale",icon:"icon-product-chat-mono",hoverIcon:"icon-product-chat",link:"/docs/products/chat"},spaces:{label:"Spaces",description:"Create collaborative environments in a few lines of code",icon:"icon-product-spaces-mono",hoverIcon:"icon-product-spaces",link:"/docs/products/spaces"},liveSync:{label:"LiveSync",description:"Sync database changes with frontend clients",icon:"icon-product-livesync-mono",hoverIcon:"icon-product-livesync",link:"/docs/products/livesync"},assetTracking:{label:"Asset Tracking",description:"Simple APIs to build realtime tracking applications",icon:"icon-product-asset-tracking-mono",hoverIcon:"icon-product-asset-tracking",link:"/docs/products/asset-tracking"},liveObjects:{label:"LiveObjects",description:"Sync application state across multiple devices",icon:"icon-product-liveobjects-mono",hoverIcon:"icon-product-liveobjects",link:"/docs/products/asset-tracking",unavailable:true}};
1
+ export const productNames=["pubsub","chat","spaces","liveSync","assetTracking","liveObjects"];export const products={pubsub:{label:"Pub/Sub",description:"Low-level APIs for building realtime applications.",icon:"icon-product-pubsub-mono",hoverIcon:"icon-product-pubsub",link:"/docs/channels"},chat:{label:"Chat",description:"Build feature-rich live chat experiences.",icon:"icon-product-chat-mono",hoverIcon:"icon-product-chat",link:"/docs/chat"},spaces:{label:"Spaces",description:"Enhance your application with collaborative features.",icon:"icon-product-spaces-mono",hoverIcon:"icon-product-spaces",link:"/docs/spaces"},liveSync:{label:"LiveSync",description:"Fan-out database changes to client applications.",icon:"icon-product-livesync-mono",hoverIcon:"icon-product-livesync",link:"/docs/livesync"},assetTracking:{label:"Asset Tracking",description:"Track the geographic location of assets and fleets.",icon:"icon-product-asset-tracking-mono",hoverIcon:"icon-product-asset-tracking",link:"/docs/asset-tracking"},liveObjects:{label:"LiveObjects",description:"Sync application state across client devices.",icon:"icon-product-liveobjects-mono",hoverIcon:"icon-product-liveobjects",link:"/docs/liveobjects",unavailable:true}};
2
2
  //# sourceMappingURL=data.js.map
package/core/ProductTile/data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/ProductTile/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport const productNames = [\n \"pubsub\",\n \"chat\",\n \"spaces\",\n \"liveSync\",\n \"assetTracking\",\n \"liveObjects\",\n] as const;\n\nexport type ProductName = (typeof productNames)[number];\n\ntype Products = Record<\n ProductName,\n {\n label: string;\n description: string;\n link?: string;\n icon?: IconName;\n hoverIcon?: IconName;\n unavailable?: boolean;\n }\n>;\n\nexport const products: Products = {\n pubsub: {\n label: \"Pub/Sub\",\n description: \"Low-level APIs to build any realtime experience\",\n icon: \"icon-product-pubsub-mono\",\n hoverIcon: \"icon-product-pubsub\",\n link: \"/docs/products/channels\",\n },\n chat: {\n label: \"Chat\",\n description: \"Rapidly build chat features and roll-out at scale\",\n icon: \"icon-product-chat-mono\",\n hoverIcon: \"icon-product-chat\",\n link: \"/docs/products/chat\",\n },\n spaces: {\n label: \"Spaces\",\n description: \"Create collaborative environments in a few lines of code\",\n icon: \"icon-product-spaces-mono\",\n hoverIcon: \"icon-product-spaces\",\n link: \"/docs/products/spaces\",\n },\n liveSync: {\n label: \"LiveSync\",\n description: \"Sync database changes with frontend clients\",\n icon: \"icon-product-livesync-mono\",\n hoverIcon: \"icon-product-livesync\",\n link: \"/docs/products/livesync\",\n },\n assetTracking: {\n label: \"Asset Tracking\",\n description: \"Simple APIs to build realtime tracking applications\",\n icon: \"icon-product-asset-tracking-mono\",\n hoverIcon: \"icon-product-asset-tracking\",\n link: \"/docs/products/asset-tracking\",\n },\n liveObjects: {\n label: \"LiveObjects\",\n description: \"Sync application state across multiple devices\",\n icon: \"icon-product-liveobjects-mono\",\n hoverIcon: \"icon-product-liveobjects\",\n link: \"/docs/products/asset-tracking\",\n unavailable: true,\n },\n};\n"],"names":["productNames","products","pubsub","label","description","icon","hoverIcon","link","chat","spaces","liveSync","assetTracking","liveObjects","unavailable"],"mappings":"AAEA,OAAO,MAAMA,aAAe,CAC1B,SACA,OACA,SACA,WACA,gBACA,cACD,AAAU,AAgBX,QAAO,MAAMC,SAAqB,CAChCC,OAAQ,CACNC,MAAO,UACPC,YAAa,kDACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,yBACR,EACAC,KAAM,CACJL,MAAO,OACPC,YAAa,oDACbC,KAAM,yBACNC,UAAW,oBACXC,KAAM,qBACR,EACAE,OAAQ,CACNN,MAAO,SACPC,YAAa,2DACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,uBACR,EACAG,SAAU,CACRP,MAAO,WACPC,YAAa,8CACbC,KAAM,6BACNC,UAAW,wBACXC,KAAM,yBACR,EACAI,cAAe,CACbR,MAAO,iBACPC,YAAa,sDACbC,KAAM,mCACNC,UAAW,8BACXC,KAAM,+BACR,EACAK,YAAa,CACXT,MAAO,cACPC,YAAa,iDACbC,KAAM,gCACNC,UAAW,2BACXC,KAAM,gCACNM,YAAa,IACf,CACF,CAAE"}
1
+ {"version":3,"sources":["../../../src/core/ProductTile/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport const productNames = [\n \"pubsub\",\n \"chat\",\n \"spaces\",\n \"liveSync\",\n \"assetTracking\",\n \"liveObjects\",\n] as const;\n\nexport type ProductName = (typeof productNames)[number];\n\ntype Products = Record<\n ProductName,\n {\n label: string;\n description: string;\n link?: string;\n icon?: IconName;\n hoverIcon?: IconName;\n unavailable?: boolean;\n }\n>;\n\nexport const products: Products = {\n pubsub: {\n label: \"Pub/Sub\",\n description: \"Low-level APIs for building realtime applications.\",\n icon: \"icon-product-pubsub-mono\",\n hoverIcon: \"icon-product-pubsub\",\n link: \"/docs/channels\",\n },\n chat: {\n label: \"Chat\",\n description: \"Build feature-rich live chat experiences.\",\n icon: \"icon-product-chat-mono\",\n hoverIcon: \"icon-product-chat\",\n link: \"/docs/chat\",\n },\n spaces: {\n label: \"Spaces\",\n description: \"Enhance your application with collaborative features.\",\n icon: \"icon-product-spaces-mono\",\n hoverIcon: \"icon-product-spaces\",\n link: \"/docs/spaces\",\n },\n liveSync: {\n label: \"LiveSync\",\n description: \"Fan-out database changes to client applications.\",\n icon: \"icon-product-livesync-mono\",\n hoverIcon: \"icon-product-livesync\",\n link: \"/docs/livesync\",\n },\n assetTracking: {\n label: \"Asset Tracking\",\n description: \"Track the geographic location of assets and fleets.\",\n icon: \"icon-product-asset-tracking-mono\",\n hoverIcon: \"icon-product-asset-tracking\",\n link: \"/docs/asset-tracking\",\n },\n liveObjects: {\n label: \"LiveObjects\",\n description: \"Sync application state across client devices.\",\n icon: \"icon-product-liveobjects-mono\",\n hoverIcon: \"icon-product-liveobjects\",\n link: \"/docs/liveobjects\",\n unavailable: true,\n },\n};\n"],"names":["productNames","products","pubsub","label","description","icon","hoverIcon","link","chat","spaces","liveSync","assetTracking","liveObjects","unavailable"],"mappings":"AAEA,OAAO,MAAMA,aAAe,CAC1B,SACA,OACA,SACA,WACA,gBACA,cACD,AAAU,AAgBX,QAAO,MAAMC,SAAqB,CAChCC,OAAQ,CACNC,MAAO,UACPC,YAAa,qDACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,gBACR,EACAC,KAAM,CACJL,MAAO,OACPC,YAAa,4CACbC,KAAM,yBACNC,UAAW,oBACXC,KAAM,YACR,EACAE,OAAQ,CACNN,MAAO,SACPC,YAAa,wDACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,cACR,EACAG,SAAU,CACRP,MAAO,WACPC,YAAa,mDACbC,KAAM,6BACNC,UAAW,wBACXC,KAAM,gBACR,EACAI,cAAe,CACbR,MAAO,iBACPC,YAAa,sDACbC,KAAM,mCACNC,UAAW,8BACXC,KAAM,sBACR,EACAK,YAAa,CACXT,MAAO,cACPC,YAAa,gDACbC,KAAM,gCACNC,UAAW,2BACXC,KAAM,oBACNM,YAAa,IACf,CACF,CAAE"}
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})=>{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})),React.createElement(ProductDescription,{description:description,selected:selected,unavailable:!!unavailable,showDescription:showDescription}),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-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;
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 * 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}: 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 />\n </div>\n <ProductDescription\n description={description}\n selected={selected}\n unavailable={!!unavailable}\n showDescription={showDescription}\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","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,CA0DlE,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,CACH,IACjB,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,IAAI,CAAEC,WAAW,CAAE,CAC9DpB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMe,cAAgBC,SAAST,KAAM,IACrC,MAAMU,iBAAmBZ,iBAAmBC,UAE5C,OACE,oBAACY,OACCf,UAAWX,GACT,uCACA,CAAE,sCAAuCyB,gBAAiB,EAC1D,CAAE,sCAAuChB,QAAS,EAClD,CACE,sCAAuC,CAACA,QAC1C,EACA,CACE,kDACEA,WAAa,OAAS,CAACa,WAC3B,EACA,CAAE,iBAAkBb,WAAakB,WAAa,CAACL,WAAY,EAC3D,CAAE,sBAAuBA,WAAY,EACrC,CAAE,CAAC,CAAC,EAAEX,UAAU,CAAC,CAAC,CAAEA,SAAU,GAEhCiB,cAAaN,YACbV,QAASA,SAET,oBAACc,OACCf,UAAWX,GACT,eACA,CAAE6B,KAAMJ,gBAAiB,EACzB,CAAE,cAAe,CAACA,gBAAiB,GAErCK,MAAO,CACLC,IAAKN,iBAAmBF,cAAgBjB,oBAAsB,CAChE,GAEA,oBAACH,aACCY,KAAMQ,cACNf,KAAMS,KACNe,UAAWhB,aAAeE,UAAYS,UACtClB,SAAUA,SACVa,YAAa,CAAC,CAACA,cAEjB,oBAAClB,cACCe,MAAOA,MACPV,SAAUA,SACVa,YAAa,CAAC,CAACA,YACfC,cAAeA,cACfT,UAAWA,aAGf,oBAACT,oBACCe,YAAaA,YACbX,SAAUA,SACVa,YAAa,CAAC,CAACA,YACfT,gBAAiBA,kBAElBJ,UAAYY,KACX,oBAACpB,YACCgC,QAAQ,YACRlB,KAAK,KACLJ,UAAU,iDACVuB,UAAU,6BACVC,UAAU,kBACVC,KAAMf,MAELX,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-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"}
package/core/remote-session-data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GAuCa,MAvC0B,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
1
+ {"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,SAAuC,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
package/index.d.ts CHANGED
@@ -404,6 +404,7 @@ export default languages;
404
404
 
405
405
  declare module '@ably/ui/core/CodeSnippet' {
406
406
  import React from "react";
407
+ type SDKType = "realtime" | "rest" | null;
407
408
  export interface CodeSnippetProps {
408
409
  /**
409
410
  * If true, hides the language selector row completely
@@ -433,11 +434,15 @@ export interface CodeSnippetProps {
433
434
  /**
434
435
  * Callback fired when the active language changes
435
436
  */
436
- onChange?: (language: string) => void;
437
+ onChange?: (language: string, sdk?: SDKType) => void;
437
438
  /**
438
439
  * List of API keys to display in a dropdown
439
440
  */
440
441
  apiKeys?: string[];
442
+ /**
443
+ * Default SDK type to use for the code snippet
444
+ */
445
+ sdk?: SDKType;
441
446
  }
442
447
  /**
443
448
  * CodeSnippet component that displays code with language switching capability
@@ -1150,8 +1155,9 @@ type ProductDescriptionProps = {
1150
1155
  selected?: boolean;
1151
1156
  unavailable: boolean;
1152
1157
  showDescription?: boolean;
1158
+ className?: string;
1153
1159
  };
1154
- const ProductDescription: ({ description, selected, unavailable, showDescription, }: ProductDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;
1160
+ const ProductDescription: ({ description, selected, unavailable, showDescription, className, }: ProductDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;
1155
1161
  export default ProductDescription;
1156
1162
  //# sourceMappingURL=ProductDescription.d.ts.map
1157
1163
  }
@@ -1177,8 +1183,9 @@ type ProductLabelProps = {
1177
1183
  selected?: boolean;
1178
1184
  numericalSize: number;
1179
1185
  showLabel?: boolean;
1186
+ className?: string;
1180
1187
  };
1181
- const ProductLabel: ({ label, unavailable, selected, numericalSize, showLabel, }: ProductLabelProps) => import("react/jsx-runtime").JSX.Element | null;
1188
+ const ProductLabel: ({ label, unavailable, selected, numericalSize, showLabel, className, }: ProductLabelProps) => import("react/jsx-runtime").JSX.Element | null;
1182
1189
  export default ProductLabel;
1183
1190
  //# sourceMappingURL=ProductLabel.d.ts.map
1184
1191
  }
@@ -1225,6 +1232,14 @@ export type ProductTileProps = {
1225
1232
  * Additional CSS class names to apply to the product tile outer container.
1226
1233
  */
1227
1234
  className?: string;
1235
+ /**
1236
+ * Additional CSS class names to apply to the product description container.
1237
+ */
1238
+ descriptionClassName?: string;
1239
+ /**
1240
+ * Additional CSS class names to apply to the product name / label container.
1241
+ */
1242
+ labelClassName?: string;
1228
1243
  /**
1229
1244
  * Callback function to handle click events on the product tile.
1230
1245
  */
@@ -1250,7 +1265,7 @@ export type ProductTileProps = {
1250
1265
  */
1251
1266
  animateIcons?: boolean;
1252
1267
  };
1253
- const ProductTile: ({ name, selected, currentPage, className, onClick, showDescription, showLabel, size, animateIcons, }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
1268
+ const ProductTile: ({ name, selected, currentPage, className, onClick, showDescription, showLabel, size, animateIcons, descriptionClassName, labelClassName, }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
1254
1269
  export default ProductTile;
1255
1270
  //# sourceMappingURL=ProductTile.d.ts.map
1256
1271
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "16.2.0-dev.fccd868b",
3
+ "version": "16.2.0",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -41,7 +41,7 @@
41
41
  "eslint": "^8.57.0",
42
42
  "eslint-config-prettier": "^10.0.1",
43
43
  "eslint-plugin-react": "^7.34.3",
44
- "eslint-plugin-storybook": "^0.11.4",
44
+ "eslint-plugin-storybook": "^0.12.0",
45
45
  "heroicons": "^2.2.0",
46
46
  "http-server": "14.1.1",
47
47
  "jsdom": "^26.0.0",
package/core/.DS_Store DELETED
Binary file
package/core/Accordion/.DS_Store DELETED
Binary file
package/core/Code/.DS_Store DELETED
Binary file
package/core/ContactFooter/.DS_Store DELETED
Binary file
package/core/CookieMessage/.DS_Store DELETED
Binary file
package/core/CustomerLogos/.DS_Store DELETED
Binary file
package/core/DropdownMenu/.DS_Store DELETED
Binary file
package/core/FeaturedLink/.DS_Store DELETED
Binary file
package/core/Flash/.DS_Store DELETED
Binary file
package/core/Footer/.DS_Store DELETED
Binary file
package/core/Icon/.DS_Store DELETED
Binary file
package/core/Loader/.DS_Store DELETED
Binary file
package/core/Logo/.DS_Store DELETED
Binary file
package/core/Meganav/.DS_Store DELETED
Binary file
package/core/Notice/.DS_Store DELETED
Binary file
package/core/Slider/.DS_Store DELETED
Binary file
package/core/Table/.DS_Store DELETED
Binary file
package/core/Tooltip/.DS_Store DELETED
Binary file
package/core/icons/.DS_Store DELETED
Binary file
package/core/icons/gui/.DS_Store DELETED
Binary file
package/core/images/.DS_Store DELETED
Binary file
package/core/images/logo/.DS_Store DELETED
Binary file