@ably/ui 16.1.4 → 16.2.0-dev.4aca114e

package/core/CodeSnippet/ApiKeySelector.js

@@ -0,0 +1,2 @@
+import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Badge from"../Badge";import Icon from"../Icon";import Tooltip from"../Tooltip";const SPECIAL_API_KEYS={DEMO:"demo"};const ApiKeySelector=memo(({apiKeys,selectedApiKey,onApiKeyChange})=>{const isDemoMode=apiKeys?.length===1&&apiKeys[0]===SPECIAL_API_KEYS.DEMO;const apiKeyItems=useMemo(()=>{if(!apiKeys?.length||isDemoMode)return null;return apiKeys.map(key=>React.createElement(Select.Item,{key:key,value:key,className:"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,null,key),React.createElement(Select.ItemIndicator,{className:"absolute right-8"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"}))))},[apiKeys,isDemoMode]);const apiKeyDropdown=useMemo(()=>{if(isDemoMode){return React.createElement("div",{className:"flex items-center"},React.createElement(Badge,{className:"ml-4 bg-neutral-200 dark:bg-neutral-1100"},"DEMO ONLY"),React.createElement(Tooltip,{className:"ml-0",triggerElement:React.createElement(Icon,{name:"icon-gui-information-circle-outline",size:"16px",color:"text-neutral-700 dark:text-neutral-600"})},"This code example uses a temporary key that is rate limited and expires in 4 hrs. Sign in to Ably to use your API keys instead."))}if(!apiKeys?.length){return null}return React.createElement(Select.Root,{value:selectedApiKey,onValueChange:onApiKeyChange},React.createElement(Select.Trigger,{className:"inline-flex items-center justify-between rounded px-8 py-4 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 focus-base","aria-label":"API Key"},React.createElement(Select.Value,null),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-4"},apiKeyItems),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))},[apiKeys,isDemoMode,selectedApiKey,onApiKeyChange]);return React.createElement("div",{className:"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12"},React.createElement("span",{className:"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4"},"API key:"),apiKeyDropdown)});ApiKeySelector.displayName="ApiKeySelector";export default ApiKeySelector;
+//# sourceMappingURL=ApiKeySelector.js.map

package/core/CodeSnippet/ApiKeySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/CodeSnippet/ApiKeySelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Badge from \"../Badge\";\nimport Icon from \"../Icon\";\nimport Tooltip from \"../Tooltip\";\n\ninterface ApiKeySelectorProps {\n  apiKeys?: string[];\n  selectedApiKey: string;\n  onApiKeyChange: (apiKey: string) => void;\n}\n\nconst SPECIAL_API_KEYS = { DEMO: \"demo\" };\n\nconst ApiKeySelector = memo<ApiKeySelectorProps>(\n  ({ apiKeys, selectedApiKey, onApiKeyChange }: ApiKeySelectorProps) => {\n    // Check if we're in demo mode\n    const isDemoMode =\n      apiKeys?.length === 1 && apiKeys[0] === SPECIAL_API_KEYS.DEMO;\n\n    // Memoize API key items to prevent recreating them on each render\n    const apiKeyItems = useMemo(() => {\n      if (!apiKeys?.length || isDemoMode) return null;\n\n      return apiKeys.map((key) => (\n        <Select.Item\n          key={key}\n          value={key}\n          className=\"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n        >\n          <Select.ItemText>{key}</Select.ItemText>\n          <Select.ItemIndicator className=\"absolute right-8\">\n            <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n          </Select.ItemIndicator>\n        </Select.Item>\n      ));\n    }, [apiKeys, isDemoMode]);\n\n    // Render the dropdown only if we have API keys\n    const apiKeyDropdown = useMemo(() => {\n      if (isDemoMode) {\n        return (\n          <div className=\"flex items-center\">\n            <Badge className=\"ml-4 bg-neutral-200 dark:bg-neutral-1100\">\n              DEMO ONLY\n            </Badge>\n            <Tooltip\n              className=\"ml-0\"\n              triggerElement={\n                <Icon\n                  name=\"icon-gui-information-circle-outline\"\n                  size=\"16px\"\n                  color=\"text-neutral-700 dark:text-neutral-600\"\n                />\n              }\n            >\n              This code example uses a temporary key that is rate limited and\n              expires in 4 hrs. Sign in to Ably to use your API keys instead.\n            </Tooltip>\n          </div>\n        );\n      }\n\n      if (!apiKeys?.length) {\n        return null;\n      }\n\n      return (\n        <Select.Root value={selectedApiKey} onValueChange={onApiKeyChange}>\n          <Select.Trigger\n            className=\"inline-flex items-center justify-between rounded px-8 py-4 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 focus-base\"\n            aria-label=\"API Key\"\n          >\n            <Select.Value />\n            <Select.Icon>\n              <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n            </Select.Icon>\n          </Select.Trigger>\n\n          <Select.Portal>\n            <Select.Content className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50\">\n              <Select.ScrollUpButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                <Icon\n                  name=\"icon-gui-chevron-down-outline\"\n                  size=\"16px\"\n                  additionalCSS=\"rotate-180\"\n                />\n              </Select.ScrollUpButton>\n\n              <Select.Viewport className=\"p-4\">{apiKeyItems}</Select.Viewport>\n\n              <Select.ScrollDownButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n              </Select.ScrollDownButton>\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      );\n    }, [apiKeys, isDemoMode, selectedApiKey, onApiKeyChange]);\n\n    return (\n      <div className=\"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-12 py-12\">\n        <span className=\"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-4\">\n          API key:\n        </span>\n        {apiKeyDropdown}\n      </div>\n    );\n  },\n);\n\n// Define a display name to improve debugging\nApiKeySelector.displayName = \"ApiKeySelector\";\n\nexport default ApiKeySelector;\n"],"names":["React","memo","useMemo","Select","Badge","Icon","Tooltip","SPECIAL_API_KEYS","DEMO","ApiKeySelector","apiKeys","selectedApiKey","onApiKeyChange","isDemoMode","length","apiKeyItems","map","key","Item","value","className","ItemText","ItemIndicator","name","size","apiKeyDropdown","div","triggerElement","color","Root","onValueChange","Trigger","aria-label","Value","Portal","Content","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton","span","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,YAAa,YAAa,CAQjC,MAAMC,iBAAmB,CAAEC,KAAM,MAAO,EAExC,MAAMC,eAAiBR,KACrB,CAAC,CAAES,OAAO,CAAEC,cAAc,CAAEC,cAAc,CAAuB,IAE/D,MAAMC,WACJH,SAASI,SAAW,GAAKJ,OAAO,CAAC,EAAE,GAAKH,iBAAiBC,IAAI,CAG/D,MAAMO,YAAcb,QAAQ,KAC1B,GAAI,CAACQ,SAASI,QAAUD,WAAY,OAAO,KAE3C,OAAOH,QAAQM,GAAG,CAAC,AAACC,KAClB,oBAACd,OAAOe,IAAI,EACVD,IAAKA,IACLE,MAAOF,IACPG,UAAU,iRAEV,oBAACjB,OAAOkB,QAAQ,MAAEJ,KAClB,oBAACd,OAAOmB,aAAa,EAACF,UAAU,oBAC9B,oBAACf,MAAKkB,KAAK,yBAAyBC,KAAK,WAIjD,EAAG,CAACd,QAASG,WAAW,EAGxB,MAAMY,eAAiBvB,QAAQ,KAC7B,GAAIW,WAAY,CACd,OACE,oBAACa,OAAIN,UAAU,qBACb,oBAAChB,OAAMgB,UAAU,4CAA2C,aAG5D,oBAACd,SACCc,UAAU,OACVO,eACE,oBAACtB,MACCkB,KAAK,sCACLC,KAAK,OACLI,MAAM,4CAGX,mIAMP,CAEA,GAAI,CAAClB,SAASI,OAAQ,CACpB,OAAO,IACT,CAEA,OACE,oBAACX,OAAO0B,IAAI,EAACV,MAAOR,eAAgBmB,cAAelB,gBACjD,oBAACT,OAAO4B,OAAO,EACbX,UAAU,kNACVY,aAAW,WAEX,oBAAC7B,OAAO8B,KAAK,OACb,oBAAC9B,OAAOE,IAAI,MACV,oBAACA,MAAKkB,KAAK,gCAAgCC,KAAK,WAIpD,oBAACrB,OAAO+B,MAAM,MACZ,oBAAC/B,OAAOgC,OAAO,EAACf,UAAU,oIACxB,oBAACjB,OAAOiC,cAAc,EAAChB,UAAU,+IAC/B,oBAACf,MACCkB,KAAK,gCACLC,KAAK,OACLa,cAAc,gBAIlB,oBAAClC,OAAOmC,QAAQ,EAAClB,UAAU,OAAOL,aAElC,oBAACZ,OAAOoC,gBAAgB,EAACnB,UAAU,+IACjC,oBAACf,MAAKkB,KAAK,gCAAgCC,KAAK,YAM5D,EAAG,CAACd,QAASG,WAAYF,eAAgBC,eAAe,EAExD,OACE,oBAACc,OAAIN,UAAU,sFACb,oBAACoB,QAAKpB,UAAU,8DAA6D,YAG5EK,eAGP,EAIFhB,CAAAA,eAAegC,WAAW,CAAG,gBAE7B,gBAAehC,cAAe"}

package/core/CodeSnippet/CopyButton.js

@@ -0,0 +1,2 @@
+import React from"react";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const CopyButton=({onCopy,isCopied,tooltip="Copy"})=>{return React.createElement("div",{className:"absolute top-8 right-8 z-10"},React.createElement(TooltipButton,{tooltip:tooltip,onClick:onCopy,variant:"icon-button"},React.createElement(Icon,{name:"icon-gui-document-duplicate-outline",size:"20px",color:"text-neutral-1300 dark:text-neutral-000"})),isCopied&&React.createElement("div",{className:"absolute right-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 rounded ui-text-label4 whitespace-nowrap"},"Copied!"))};export default CopyButton;
+//# sourceMappingURL=CopyButton.js.map

package/core/CodeSnippet/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/CodeSnippet/CopyButton.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\n\ninterface CopyButtonProps {\n  onCopy: () => void;\n  isCopied: boolean;\n  tooltip?: string;\n}\n\n/**\n * A reusable copy button component with tooltip and copied indicator\n */\nconst CopyButton: React.FC<CopyButtonProps> = ({\n  onCopy,\n  isCopied,\n  tooltip = \"Copy\",\n}) => {\n  return (\n    <div className=\"absolute top-8 right-8 z-10\">\n      <TooltipButton tooltip={tooltip} onClick={onCopy} variant=\"icon-button\">\n        <Icon\n          name=\"icon-gui-document-duplicate-outline\"\n          size=\"20px\"\n          color=\"text-neutral-1300 dark:text-neutral-000\"\n        />\n      </TooltipButton>\n\n      {isCopied && (\n        <div className=\"absolute right-[40px] top-0 bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 py-6 px-12 rounded ui-text-label4 whitespace-nowrap\">\n          Copied!\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default CopyButton;\n"],"names":["React","Icon","TooltipButton","CopyButton","onCopy","isCopied","tooltip","div","className","onClick","variant","name","size","color"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,kBAAmB,iBAAkB,CAW5C,MAAMC,WAAwC,CAAC,CAC7CC,MAAM,CACNC,QAAQ,CACRC,QAAU,MAAM,CACjB,IACC,OACE,oBAACC,OAAIC,UAAU,+BACb,oBAACN,eAAcI,QAASA,QAASG,QAASL,OAAQM,QAAQ,eACxD,oBAACT,MACCU,KAAK,sCACLC,KAAK,OACLC,MAAM,6CAITR,UACC,oBAACE,OAAIC,UAAU,+JAA8J,WAMrL,CAEA,gBAAeL,UAAW"}

package/core/CodeSnippet/LanguageSelector.js

@@ -0,0 +1,2 @@
+import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const LanguageSelector=memo(({languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon,activeLanguageInfo})=>{const desktopLanguageElements=useMemo(()=>{return languages.map(lang=>{const active=activeLanguage===lang;const displayName=getLanguageDisplayName(lang);return React.createElement(TooltipButton,{key:lang,tooltip:displayName,active:active,onClick:()=>onLanguageChange(lang),icon:getLanguageIcon(lang),variant:"segmented",size:"sm"},displayName)})},[languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon]);const mobileLanguageElements=useMemo(()=>{return languages.map(lang=>React.createElement(Select.Item,{key:lang,value:lang,className:"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,{asChild:true},React.createElement("div",{className:"flex items-center gap-8"},React.createElement(Icon,{name:getLanguageIcon(lang),size:"20px"}),React.createElement("span",null,getLanguageDisplayName(lang)))),React.createElement(Select.ItemIndicator,{className:"absolute right-8"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"}))))},[languages,getLanguageDisplayName,getLanguageIcon]);return React.createElement("div",{className:"p-8 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[58px]"},React.createElement("div",{className:"hidden sm:flex gap-8"},desktopLanguageElements),React.createElement("div",{className:"sm:hidden w-full"},React.createElement(Select.Root,{value:activeLanguage||undefined,onValueChange:onLanguageChange},React.createElement(Select.Trigger,{className:"w-full inline-flex items-center justify-between rounded-lg px-12 py-8 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 border border-neutral-300 dark:border-neutral-900 focus-base","aria-label":"Select language"},React.createElement(Select.Value,{asChild:true},activeLanguage&&activeLanguageInfo&&React.createElement("div",{className:"flex items-center gap-8"},React.createElement(Icon,{name:activeLanguageInfo.icon,size:"20px"}),React.createElement("span",null,activeLanguageInfo.label))),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]",position:"popper"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-4"},mobileLanguageElements),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))))});LanguageSelector.displayName="LanguageSelector";export default LanguageSelector;
+//# sourceMappingURL=LanguageSelector.js.map

package/core/CodeSnippet/LanguageSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/CodeSnippet/LanguageSelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport TooltipButton from \"./TooltipButton\";\n\ninterface LanguageSelectorProps {\n  languages: string[];\n  activeLanguage: string | null;\n  onLanguageChange: (language: string) => void;\n  getLanguageDisplayName: (lang: string) => string;\n  getLanguageIcon: (lang: string) => IconName;\n  activeLanguageInfo: { label: string; icon: IconName } | null;\n}\n\nconst LanguageSelector = memo<LanguageSelectorProps>(\n  ({\n    languages,\n    activeLanguage,\n    onLanguageChange,\n    getLanguageDisplayName,\n    getLanguageIcon,\n    activeLanguageInfo,\n  }: LanguageSelectorProps) => {\n    // Memoize the desktop language elements to avoid recreating on each render\n    const desktopLanguageElements = useMemo(() => {\n      return languages.map((lang) => {\n        const active = activeLanguage === lang;\n        const displayName = getLanguageDisplayName(lang);\n\n        return (\n          <TooltipButton\n            key={lang}\n            tooltip={displayName}\n            active={active}\n            onClick={() => onLanguageChange(lang)}\n            icon={getLanguageIcon(lang)}\n            variant=\"segmented\"\n            size=\"sm\"\n          >\n            {displayName}\n          </TooltipButton>\n        );\n      });\n    }, [\n      languages,\n      activeLanguage,\n      onLanguageChange,\n      getLanguageDisplayName,\n      getLanguageIcon,\n    ]);\n\n    // Memoize the mobile language elements\n    const mobileLanguageElements = useMemo(() => {\n      return languages.map((lang) => (\n        <Select.Item\n          key={lang}\n          value={lang}\n          className=\"relative flex items-center rounded px-8 py-6 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n        >\n          <Select.ItemText asChild>\n            <div className=\"flex items-center gap-8\">\n              <Icon name={getLanguageIcon(lang)} size=\"20px\" />\n              <span>{getLanguageDisplayName(lang)}</span>\n            </div>\n          </Select.ItemText>\n          <Select.ItemIndicator className=\"absolute right-8\">\n            <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n          </Select.ItemIndicator>\n        </Select.Item>\n      ));\n    }, [languages, getLanguageDisplayName, getLanguageIcon]);\n\n    return (\n      <div className=\"p-8 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[58px]\">\n        {/* Desktop language selector - SegmentedControls */}\n        <div className=\"hidden sm:flex gap-8\">{desktopLanguageElements}</div>\n\n        {/* Mobile language selector - Select dropdown */}\n        <div className=\"sm:hidden w-full\">\n          <Select.Root\n            value={activeLanguage || undefined}\n            onValueChange={onLanguageChange}\n          >\n            <Select.Trigger\n              className=\"w-full inline-flex items-center justify-between rounded-lg px-12 py-8 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-4 border border-neutral-300 dark:border-neutral-900 focus-base\"\n              aria-label=\"Select language\"\n            >\n              <Select.Value asChild>\n                {activeLanguage && activeLanguageInfo && (\n                  <div className=\"flex items-center gap-8\">\n                    <Icon name={activeLanguageInfo.icon} size=\"20px\" />\n                    <span>{activeLanguageInfo.label}</span>\n                  </div>\n                )}\n              </Select.Value>\n              <Select.Icon>\n                <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n              </Select.Icon>\n            </Select.Trigger>\n\n            <Select.Portal>\n              <Select.Content\n                className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]\"\n                position=\"popper\"\n              >\n                <Select.ScrollUpButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                  <Icon\n                    name=\"icon-gui-chevron-down-outline\"\n                    size=\"16px\"\n                    additionalCSS=\"rotate-180\"\n                  />\n                </Select.ScrollUpButton>\n\n                <Select.Viewport className=\"p-4\">\n                  {mobileLanguageElements}\n                </Select.Viewport>\n\n                <Select.ScrollDownButton className=\"flex items-center justify-center h-24 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n                  <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n                </Select.ScrollDownButton>\n              </Select.Content>\n            </Select.Portal>\n          </Select.Root>\n        </div>\n      </div>\n    );\n  },\n);\n\n// Define a display name to improve debugging\nLanguageSelector.displayName = \"LanguageSelector\";\n\nexport default LanguageSelector;\n"],"names":["React","memo","useMemo","Select","Icon","TooltipButton","LanguageSelector","languages","activeLanguage","onLanguageChange","getLanguageDisplayName","getLanguageIcon","activeLanguageInfo","desktopLanguageElements","map","lang","active","displayName","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","Root","undefined","onValueChange","Trigger","aria-label","Value","label","Portal","Content","position","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,SAAU,SAAU,AAE3B,QAAOC,kBAAmB,iBAAkB,CAW5C,MAAMC,iBAAmBL,KACvB,CAAC,CACCM,SAAS,CACTC,cAAc,CACdC,gBAAgB,CAChBC,sBAAsB,CACtBC,eAAe,CACfC,kBAAkB,CACI,IAEtB,MAAMC,wBAA0BX,QAAQ,KACtC,OAAOK,UAAUO,GAAG,CAAC,AAACC,OACpB,MAAMC,OAASR,iBAAmBO,KAClC,MAAME,YAAcP,uBAAuBK,MAE3C,OACE,oBAACV,eACCa,IAAKH,KACLI,QAASF,YACTD,OAAQA,OACRI,QAAS,IAAMX,iBAAiBM,MAChCM,KAAMV,gBAAgBI,MACtBO,QAAQ,YACRC,KAAK,MAEJN,YAGP,EACF,EAAG,CACDV,UACAC,eACAC,iBACAC,uBACAC,gBACD,EAGD,MAAMa,uBAAyBtB,QAAQ,KACrC,OAAOK,UAAUO,GAAG,CAAC,AAACC,MACpB,oBAACZ,OAAOsB,IAAI,EACVP,IAAKH,KACLW,MAAOX,KACPY,UAAU,iRAEV,oBAACxB,OAAOyB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMpB,gBAAgBI,MAAOQ,KAAK,SACxC,oBAACS,YAAMtB,uBAAuBK,SAGlC,oBAACZ,OAAO8B,aAAa,EAACN,UAAU,oBAC9B,oBAACvB,MAAK2B,KAAK,yBAAyBR,KAAK,WAIjD,EAAG,CAAChB,UAAWG,uBAAwBC,gBAAgB,EAEvD,OACE,oBAACmB,OAAIH,UAAU,qFAEb,oBAACG,OAAIH,UAAU,wBAAwBd,yBAGvC,oBAACiB,OAAIH,UAAU,oBACb,oBAACxB,OAAO+B,IAAI,EACVR,MAAOlB,gBAAkB2B,UACzBC,cAAe3B,kBAEf,oBAACN,OAAOkC,OAAO,EACbV,UAAU,+QACVW,aAAW,mBAEX,oBAACnC,OAAOoC,KAAK,EAACV,QAAAA,MACXrB,gBAAkBI,oBACjB,oBAACkB,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMnB,mBAAmBS,IAAI,CAAEE,KAAK,SAC1C,oBAACS,YAAMpB,mBAAmB4B,KAAK,IAIrC,oBAACrC,OAAOC,IAAI,MACV,oBAACA,MAAK2B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACpB,OAAOsC,MAAM,MACZ,oBAACtC,OAAOuC,OAAO,EACbf,UAAU,yKACVgB,SAAS,UAET,oBAACxC,OAAOyC,cAAc,EAACjB,UAAU,+IAC/B,oBAACvB,MACC2B,KAAK,gCACLR,KAAK,OACLsB,cAAc,gBAIlB,oBAAC1C,OAAO2C,QAAQ,EAACnB,UAAU,OACxBH,wBAGH,oBAACrB,OAAO4C,gBAAgB,EAACpB,UAAU,+IACjC,oBAACvB,MAAK2B,KAAK,gCAAgCR,KAAK,cAQhE,EAIFjB,CAAAA,iBAAiBW,WAAW,CAAG,kBAE/B,gBAAeX,gBAAiB"}

package/core/CodeSnippet/ShellCommandView.js

@@ -0,0 +1,2 @@
+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;
+//# sourceMappingURL=ShellCommandView.js.map

package/core/CodeSnippet/ShellCommandView.js.map

@@ -0,0 +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"}

package/core/CodeSnippet/TooltipButton.js

@@ -0,0 +1,2 @@
+import React from"react";import Tooltip from"../Tooltip";import SegmentedControl from"../SegmentedControl";import cn from"../utils/cn";const TooltipButton=({tooltip,active=false,onClick,icon,className,children,variant="segmented",size="sm",alwaysShowLabel=false})=>{const showTooltip=variant==="segmented"&&!active||variant==="icon-button";let buttonElement;if(variant==="segmented"){buttonElement=React.createElement(SegmentedControl,{size:size,active:active,onClick:onClick,leftIcon:icon,className:cn("focus-base",active?"bg-neutral-000 dark:bg-neutral-1300":"bg-neutral-100 dark:bg-neutral-1200",className)},active||alwaysShowLabel?children:null)}else{buttonElement=React.createElement("div",{role:"button",className:cn("w-32 h-32 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 transition-colors focus-base",className),onClick:onClick,"aria-label":tooltip},children)}if(showTooltip){return React.createElement(Tooltip,{triggerElement:buttonElement,className:"ml-0"},tooltip)}return buttonElement};export default TooltipButton;
+//# sourceMappingURL=TooltipButton.js.map

package/core/CodeSnippet/TooltipButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/CodeSnippet/TooltipButton.tsx"],"sourcesContent":["import React from \"react\";\nimport Tooltip from \"../Tooltip\";\nimport SegmentedControl from \"../SegmentedControl\";\nimport cn from \"../utils/cn\";\nimport { IconName } from \"../Icon/types\";\n\ninterface TooltipButtonProps {\n  tooltip: string;\n  active?: boolean;\n  onClick: () => void;\n  icon?: IconName;\n  className?: string;\n  children?: React.ReactNode;\n  variant?: \"segmented\" | \"icon-button\";\n  size?: \"sm\" | \"md\";\n  alwaysShowLabel?: boolean;\n}\n\n/**\n * A unified tooltip button component that can render either a segmented control or an icon button\n */\nconst TooltipButton: React.FC<TooltipButtonProps> = ({\n  tooltip,\n  active = false,\n  onClick,\n  icon,\n  className,\n  children,\n  variant = \"segmented\",\n  size = \"sm\",\n  alwaysShowLabel = false,\n}) => {\n  // Only show tooltip for inactive segmented controls or all icon buttons\n  const showTooltip =\n    (variant === \"segmented\" && !active) || variant === \"icon-button\";\n\n  // The button element\n  let buttonElement;\n\n  if (variant === \"segmented\") {\n    buttonElement = (\n      <SegmentedControl\n        size={size}\n        active={active}\n        onClick={onClick}\n        leftIcon={icon}\n        className={cn(\n          \"focus-base\",\n          active\n            ? \"bg-neutral-000 dark:bg-neutral-1300\"\n            : \"bg-neutral-100 dark:bg-neutral-1200\",\n          className,\n        )}\n      >\n        {active || alwaysShowLabel ? children : null}\n      </SegmentedControl>\n    );\n  } else {\n    buttonElement = (\n      <div\n        role=\"button\"\n        className={cn(\n          \"w-32 h-32 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 transition-colors focus-base\",\n          className,\n        )}\n        onClick={onClick}\n        aria-label={tooltip}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (showTooltip) {\n    return (\n      <Tooltip triggerElement={buttonElement} className=\"ml-0\">\n        {tooltip}\n      </Tooltip>\n    );\n  }\n\n  return buttonElement;\n};\n\nexport default TooltipButton;\n"],"names":["React","Tooltip","SegmentedControl","cn","TooltipButton","tooltip","active","onClick","icon","className","children","variant","size","alwaysShowLabel","showTooltip","buttonElement","leftIcon","div","role","aria-label","triggerElement"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,YAAa,YAAa,AACjC,QAAOC,qBAAsB,qBAAsB,AACnD,QAAOC,OAAQ,aAAc,CAkB7B,MAAMC,cAA8C,CAAC,CACnDC,OAAO,CACPC,OAAS,KAAK,CACdC,OAAO,CACPC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,QAAU,WAAW,CACrBC,KAAO,IAAI,CACXC,gBAAkB,KAAK,CACxB,IAEC,MAAMC,YACJ,AAACH,UAAY,aAAe,CAACL,QAAWK,UAAY,cAGtD,IAAII,cAEJ,GAAIJ,UAAY,YAAa,CAC3BI,cACE,oBAACb,kBACCU,KAAMA,KACNN,OAAQA,OACRC,QAASA,QACTS,SAAUR,KACVC,UAAWN,GACT,aACAG,OACI,sCACA,sCACJG,YAGDH,QAAUO,gBAAkBH,SAAW,KAG9C,KAAO,CACLK,cACE,oBAACE,OACCC,KAAK,SACLT,UAAWN,GACT,yKACAM,WAEFF,QAASA,QACTY,aAAYd,SAEXK,SAGP,CAEA,GAAII,YAAa,CACf,OACE,oBAACb,SAAQmB,eAAgBL,cAAeN,UAAU,QAC/CJ,QAGP,CAEA,OAAOU,aACT,CAEA,gBAAeX,aAAc"}

package/core/CodeSnippet/languages.js

@@ -0,0 +1,2 @@
+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;
+//# sourceMappingURL=languages.js.map

package/core/CodeSnippet/languages.js.map

@@ -0,0 +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"}

package/core/CodeSnippet.js

@@ -0,0 +1,2 @@
+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 isFirstRender=useRef(true);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])&&childrenArray[0].props.lang==="shell";childrenArray.forEach(child=>{if(isValidElement(child)&&child.props.lang){const langAttr=child.props.lang;let cleanLang=langAttr;if(langAttr.startsWith("realtime_")){cleanLang=langAttr.substring(9);sdkTypes.add("realtime")}else if(langAttr.startsWith("rest_")){cleanLang=langAttr.substring(5);sdkTypes.add("rest")}originalLangMap.set(langAttr,cleanLang);if(!languages.includes(langAttr)){languages.push(langAttr)}}});return{childrenArray,languages,sdkTypes,originalLangMap,isSingleShellCommand}},[children]);const showSDKSelector=sdkTypes.size>0;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}));if(onChange&&initialActiveLanguage&&!isFirstRender.current){onChange(initialActiveLanguage)}isFirstRender.current=false},[initialActiveLanguage,onChange]);const codeRef=useRef(null);const hasSnippetForActiveLanguage=useMemo(()=>{if(!state.activeLanguage)return false;return childrenArray.some(child=>isValidElement(child)&&child.props.lang===state.activeLanguage)},[state.activeLanguage,childrenArray]);const getCodeText=useCallback(()=>{if(!state.activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const codeElement=codeRef.current.querySelector("pre");return codeElement?codeElement.textContent||"":null},[state.activeLanguage,hasSnippetForActiveLanguage]);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}));if(nextLang&&onChange)onChange(nextLang)},[languages,onChange]);const handleLanguageChange=useCallback(language=>{setState(prev=>({...prev,activeLanguage:language}));if(onChange){onChange(language)}},[onChange]);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 processedChildren=useMemo(()=>{if(!state.activeLanguage)return[];return childrenArray.filter(child=>isValidElement(child)&&child.props.lang===state.activeLanguage).map(child=>{if(!isValidElement(child))return child;const{lang,children:codeContent}=child.props;const cleanLang=originalLangMap.get(lang)||lang;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){return React.createElement(Code,{key:lang,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]);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)){const{children:codeContent}=shellChild.props;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",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 pt-12")},React.createElement("div",{className:"flex gap-12 justify-start"},React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:state.activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),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;
+//# sourceMappingURL=CodeSnippet.js.map

package/core/CodeSnippet.js.map

@@ -0,0 +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  // Track initial render to prevent onChange from firing on mount\n  const isFirstRender = useRef(true);\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      childrenArray[0].props.lang === \"shell\";\n\n    // Extract all available languages from children and identify SDK types\n    childrenArray.forEach((child) => {\n      if (isValidElement(child) && child.props.lang) {\n        const langAttr = child.props.lang;\n\n        // Check if lang has SDK type prefix\n        let cleanLang = langAttr;\n\n        if (langAttr.startsWith(\"realtime_\")) {\n          cleanLang = langAttr.substring(9); // Remove 'realtime_' prefix\n          sdkTypes.add(\"realtime\");\n        } else if (langAttr.startsWith(\"rest_\")) {\n          cleanLang = langAttr.substring(5); // Remove 'rest_' prefix\n          sdkTypes.add(\"rest\");\n        }\n\n        // Store original language value for later use\n        originalLangMap.set(langAttr, cleanLang);\n\n        // Add to languages list if not already included\n        if (!languages.includes(langAttr)) {\n          languages.push(langAttr);\n        }\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  // 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\n    // Call onChange if necessary, but not on the first render\n    if (onChange && initialActiveLanguage && !isFirstRender.current) {\n      onChange(initialActiveLanguage);\n    }\n\n    // Set isFirstRender to false after the first render\n    isFirstRender.current = false;\n  }, [initialActiveLanguage, onChange]);\n\n  const codeRef = useRef<HTMLDivElement>(null);\n\n  // Check if there's a snippet available for the active language - optimized with specific dependencies\n  const hasSnippetForActiveLanguage = useMemo(() => {\n    if (!state.activeLanguage) return false;\n    return childrenArray.some(\n      (child) =>\n        isValidElement(child) && child.props.lang === state.activeLanguage,\n    );\n  }, [state.activeLanguage, childrenArray]);\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 code element\n    const codeElement = codeRef.current.querySelector(\"pre\");\n    return codeElement ? codeElement.textContent || \"\" : null;\n  }, [state.activeLanguage, hasSnippetForActiveLanguage]);\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      if (nextLang && onChange) onChange(nextLang);\n    },\n    [languages, onChange],\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      if (onChange) {\n        onChange(language);\n      }\n    },\n    [onChange],\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  // Filter and process children for the active language - optimized with specific dependencies\n  const processedChildren = useMemo(() => {\n    if (!state.activeLanguage) return [];\n\n    return childrenArray\n      .filter(\n        (child) =>\n          isValidElement(child) && child.props.lang === state.activeLanguage,\n      )\n      .map((child) => {\n        if (!isValidElement(child)) return child;\n\n        const { lang, children: codeContent } = child.props;\n        const cleanLang = originalLangMap.get(lang) || lang;\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={lang}\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  }, [state.activeLanguage, childrenArray, originalLangMap]);\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\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 (isValidElement(shellChild)) {\n      const { children: codeContent } = shellChild.props;\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\",\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 pt-12\",\n          )}\n        >\n          <div className=\"flex gap-12 justify-start\">\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            <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          </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","isFirstRender","childrenArray","languages","sdkTypes","originalLangMap","isSingleShellCommand","toArray","Set","Map","length","props","forEach","child","langAttr","cleanLang","startsWith","substring","add","set","includes","push","showSDKSelector","size","state","setState","activeSDKType","has","activeLanguage","selectedApiKey","ui","isHovering","isCopied","copy","filteredLanguages","filter","initialActiveLanguage","prefixedLang","label","prevState","current","codeRef","hasSnippetForActiveLanguage","some","getCodeText","codeElement","querySelector","textContent","prev","handleSDKTypeChange","type","nextLang","find","l","handleLanguageChange","language","handleMouseEnter","handleMouseLeave","handleApiKeyChange","apiKey","getDisplayLanguageInfo","get","activeLanguageInfo","getLanguageDisplayName","getLanguageIcon","icon","processedChildren","map","codeContent","langInfo","key","syntaxHighlighterKey","snippet","String","additionalCSS","showLines","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/SegmentedControl.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"./utils/cn";import Icon from"./Icon";const SegmentedControl=({className,rounded=false,leftIcon,rightIcon,active=false,variant="default",size="md",children,onClick,disabled})=>{const colorStyles={default:{active:"bg-neutral-200 dark:bg-neutral-1100",inactive:"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200"},subtle:{active:"bg-neutral-000 dark:bg-neutral-1000",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"},strong:{active:"bg-neutral-1000 dark:bg-neutral-300",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"}};const contentColorStyles={default:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},subtle:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},strong:{active:"text-neutral-000 dark:text-neutral-1300",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"}};const sizeStyles={md:cn("h-48 p-12 gap-[10px]",rounded&&"px-[18px]"),sm:cn("h-40 p-[9px] gap-[9px]",rounded&&"px-[14px]"),xs:cn("h-36 p-8 gap-8",rounded&&"px-12")};const textStyles={md:"ui-text-label2",sm:"ui-text-label3",xs:"ui-text-label4"};const iconSizes={md:"23px",sm:"22px",xs:"20px"};const activeKey=active?"active":"inactive";return React.createElement("div",{onClick:!disabled?onClick:undefined,onKeyDown:e=>{if((e.key==="Enter"||e.key===" ")&&!disabled&&onClick){e.preventDefault();onClick()}},className:cn("focus-base flex items-center justify-center cursor-pointer select-none transition-colors",colorStyles[variant][activeKey],contentColorStyles[variant][activeKey],sizeStyles[size],textStyles[size],disabled&&"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit",rounded?"rounded-full":"rounded-lg",className),tabIndex:disabled?-1:0,role:"button","aria-pressed":active,"aria-disabled":disabled},leftIcon&&React.createElement(Icon,{name:leftIcon,size:iconSizes[size],"aria-hidden":"true"}),React.createElement("span",{className:cn("font-semibold transition-colors",contentColorStyles[variant][activeKey],disabled&&"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark")},children),rightIcon&&React.createElement(Icon,{name:rightIcon,size:iconSizes[size],"aria-hidden":"true"}))};export default SegmentedControl;
+import React from"react";import cn from"./utils/cn";import Icon from"./Icon";const SegmentedControl=({className,rounded=false,leftIcon,rightIcon,active=false,variant="default",size="md",children,onClick,disabled})=>{const colorStyles={default:{active:"bg-neutral-200 dark:bg-neutral-1100",inactive:"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200"},subtle:{active:"bg-neutral-000 dark:bg-neutral-1000",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"},strong:{active:"bg-neutral-1000 dark:bg-neutral-300",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"}};const contentColorStyles={default:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},subtle:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},strong:{active:"text-neutral-000 dark:text-neutral-1300",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"}};const sizeStyles={md:cn("h-48 p-12 gap-[10px]",rounded&&"px-[18px]"),sm:cn("h-40 p-[9px] gap-[9px]",rounded&&"px-[14px]"),xs:cn("h-36 p-8 gap-8",rounded&&"px-12")};const textStyles={md:"ui-text-label2",sm:"ui-text-label3",xs:"ui-text-label4"};const iconSizes={md:"23px",sm:"22px",xs:"20px"};const activeKey=active?"active":"inactive";return React.createElement("div",{onClick:!disabled?onClick:undefined,onKeyDown:e=>{if((e.key==="Enter"||e.key===" ")&&!disabled&&onClick){e.preventDefault();onClick()}},className:cn("focus-base flex items-center justify-center cursor-pointer select-none transition-colors",colorStyles[variant][activeKey],contentColorStyles[variant][activeKey],sizeStyles[size],textStyles[size],disabled&&"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit",rounded?"rounded-full":"rounded-lg",className),tabIndex:disabled?-1:0,role:"button","aria-pressed":active,"aria-disabled":disabled},leftIcon&&React.createElement(Icon,{name:leftIcon,size:iconSizes[size],"aria-hidden":"true"}),children&&React.createElement("span",{className:cn("font-semibold transition-colors",contentColorStyles[variant][activeKey],disabled&&"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark")},children),rightIcon&&React.createElement(Icon,{name:rightIcon,size:iconSizes[size],"aria-hidden":"true"}))};export default SegmentedControl;
 //# sourceMappingURL=SegmentedControl.js.map

package/core/SegmentedControl.js.map

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

package/core/utils/useCopyToClipboard.js

@@ -0,0 +1,2 @@
+import{useState,useCallback}from"react";function useCopyToClipboard(copiedTimeout=2e3){const[state,setState]=useState({isCopied:false,error:null});const copy=useCallback(async text=>{try{await navigator.clipboard.writeText(text);setState({isCopied:true,error:null});setTimeout(()=>{setState(prev=>({...prev,isCopied:false}))},copiedTimeout);return true}catch(error){setState({isCopied:false,error:error instanceof Error?error:new Error(String(error))});return false}},[copiedTimeout]);return{...state,copy}}export default useCopyToClipboard;
+//# sourceMappingURL=useCopyToClipboard.js.map

package/core/utils/useCopyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/utils/useCopyToClipboard.ts"],"sourcesContent":["import { useState, useCallback } from \"react\";\n\ninterface CopyToClipboardState {\n  isCopied: boolean;\n  error: Error | null;\n}\n\ninterface CopyToClipboardReturn extends CopyToClipboardState {\n  copy: (text: string) => Promise<boolean>;\n}\n\n/**\n * A hook that provides copy-to-clipboard functionality with state management\n * @param copiedTimeout - How long to show the copied state in ms before resetting\n * @returns Object with isCopied state, any error, and copy function\n */\nfunction useCopyToClipboard(copiedTimeout = 2000): CopyToClipboardReturn {\n  const [state, setState] = useState<CopyToClipboardState>({\n    isCopied: false,\n    error: null,\n  });\n\n  const copy = useCallback(\n    async (text: string): Promise<boolean> => {\n      try {\n        await navigator.clipboard.writeText(text);\n        setState({ isCopied: true, error: null });\n\n        // Reset the copied state after timeout\n        setTimeout(() => {\n          setState((prev) => ({ ...prev, isCopied: false }));\n        }, copiedTimeout);\n\n        return true;\n      } catch (error) {\n        setState({\n          isCopied: false,\n          error: error instanceof Error ? error : new Error(String(error)),\n        });\n        return false;\n      }\n    },\n    [copiedTimeout],\n  );\n\n  return { ...state, copy };\n}\n\nexport default useCopyToClipboard;\n"],"names":["useState","useCallback","useCopyToClipboard","copiedTimeout","state","setState","isCopied","error","copy","text","navigator","clipboard","writeText","setTimeout","prev","Error","String"],"mappings":"AAAA,OAASA,QAAQ,CAAEC,WAAW,KAAQ,OAAQ,CAgB9C,SAASC,mBAAmBC,cAAgB,GAAI,EAC9C,KAAM,CAACC,MAAOC,SAAS,CAAGL,SAA+B,CACvDM,SAAU,MACVC,MAAO,IACT,GAEA,MAAMC,KAAOP,YACX,MAAOQ,OACL,GAAI,CACF,MAAMC,UAAUC,SAAS,CAACC,SAAS,CAACH,MACpCJ,SAAS,CAAEC,SAAU,KAAMC,MAAO,IAAK,GAGvCM,WAAW,KACTR,SAAS,AAACS,MAAU,CAAA,CAAE,GAAGA,IAAI,CAAER,SAAU,KAAM,CAAA,EACjD,EAAGH,eAEH,OAAO,IACT,CAAE,MAAOI,MAAO,CACdF,SAAS,CACPC,SAAU,MACVC,MAAOA,iBAAiBQ,MAAQR,MAAQ,IAAIQ,MAAMC,OAAOT,OAC3D,GACA,OAAO,KACT,CACF,EACA,CAACJ,cAAc,EAGjB,MAAO,CAAE,GAAGC,KAAK,CAAEI,IAAK,CAC1B,CAEA,eAAeN,kBAAmB"}

package/index.d.ts

@@ -306,6 +306,147 @@ export default Code;
 //# sourceMappingURL=Code.d.ts.map
 }
 
+declare module '@ably/ui/core/CodeSnippet/ApiKeySelector' {
+import React from "react";
+interface ApiKeySelectorProps {
+    apiKeys?: string[];
+    selectedApiKey: string;
+    onApiKeyChange: (apiKey: string) => void;
+}
+const ApiKeySelector: React.NamedExoticComponent<ApiKeySelectorProps>;
+export default ApiKeySelector;
+//# sourceMappingURL=ApiKeySelector.d.ts.map
+}
+
+declare module '@ably/ui/core/CodeSnippet/CopyButton' {
+import React from "react";
+interface CopyButtonProps {
+    onCopy: () => void;
+    isCopied: boolean;
+    tooltip?: string;
+}
+/**
+ * A reusable copy button component with tooltip and copied indicator
+ */
+const CopyButton: React.FC<CopyButtonProps>;
+export default CopyButton;
+//# sourceMappingURL=CopyButton.d.ts.map
+}
+
+declare module '@ably/ui/core/CodeSnippet/LanguageSelector' {
+import React from "react";
+import { IconName } from ".@ably/ui/core/Icon/types";
+interface LanguageSelectorProps {
+    languages: string[];
+    activeLanguage: string | null;
+    onLanguageChange: (language: string) => void;
+    getLanguageDisplayName: (lang: string) => string;
+    getLanguageIcon: (lang: string) => IconName;
+    activeLanguageInfo: {
+        label: string;
+        icon: IconName;
+    } | null;
+}
+const LanguageSelector: React.NamedExoticComponent<LanguageSelectorProps>;
+export default LanguageSelector;
+//# sourceMappingURL=LanguageSelector.d.ts.map
+}
+
+declare module '@ably/ui/core/CodeSnippet/ShellCommandView' {
+import React from "react";
+interface ShellCommandViewProps {
+    content: string;
+    className?: string;
+}
+/**
+ * A specialized component for displaying shell commands with copy functionality
+ */
+const ShellCommandView: React.FC<ShellCommandViewProps>;
+export default ShellCommandView;
+//# sourceMappingURL=ShellCommandView.d.ts.map
+}
+
+declare module '@ably/ui/core/CodeSnippet/TooltipButton' {
+import React from "react";
+import { IconName } from ".@ably/ui/core/Icon/types";
+interface TooltipButtonProps {
+    tooltip: string;
+    active?: boolean;
+    onClick: () => void;
+    icon?: IconName;
+    className?: string;
+    children?: React.ReactNode;
+    variant?: "segmented" | "icon-button";
+    size?: "sm" | "md";
+    alwaysShowLabel?: boolean;
+}
+/**
+ * A unified tooltip button component that can render either a segmented control or an icon button
+ */
+const TooltipButton: React.FC<TooltipButtonProps>;
+export default TooltipButton;
+//# sourceMappingURL=TooltipButton.d.ts.map
+}
+
+declare module '@ably/ui/core/CodeSnippet/languages' {
+import { IconName } from ".@ably/ui/core/Icon/types";
+export interface LanguageInfo {
+    label: string;
+    icon: IconName;
+    syntaxHighlighterKey?: string;
+}
+export type LanguageMap = Record<string, LanguageInfo>;
+const languages: LanguageMap;
+export const getLanguageInfo: (langKey: string) => LanguageInfo;
+export default languages;
+//# sourceMappingURL=languages.d.ts.map
+}
+
+declare module '@ably/ui/core/CodeSnippet' {
+import React from "react";
+export interface CodeSnippetProps {
+    /**
+     * If true, hides the language selector row completely
+     */
+    fixed?: boolean;
+    /**
+     * If true, renders a macOS-style window header with buttons and title
+     */
+    headerRow?: boolean;
+    /**
+     * Title to display in the header row (when headerRow is true)
+     */
+    title?: string;
+    /**
+     * Children elements with lang attribute
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Default language to display. If not found in available languages, first available is used.
+     * If found in languages but no matching snippet exists, a message is displayed.
+     */
+    lang?: string;
+    /**
+     * Callback fired when the active language changes
+     */
+    onChange?: (language: string) => void;
+    /**
+     * List of API keys to display in a dropdown
+     */
+    apiKeys?: string[];
+}
+/**
+ * CodeSnippet component that displays code with language switching capability
+ */
+const CodeSnippet: React.FC<CodeSnippetProps>;
+export default CodeSnippet;
+//# sourceMappingURL=CodeSnippet.d.ts.map
+}
+
 declare module '@ably/ui/core/ConnectStateWrapper' {
 const ConnectStateWrapper: (Component: any, selectors: any) => (props: any) => import("react/jsx-runtime").JSX.Element;
 export default ConnectStateWrapper;
@@ -1442,5 +1583,23 @@ export function registerDefaultLanguages(register: any): void;
 //# sourceMappingURL=syntax-highlighter.d.ts.map
 }
 
+declare module '@ably/ui/core/utils/useCopyToClipboard' {
+interface CopyToClipboardState {
+    isCopied: boolean;
+    error: Error | null;
+}
+interface CopyToClipboardReturn extends CopyToClipboardState {
+    copy: (text: string) => Promise<boolean>;
+}
+/**
+ * A hook that provides copy-to-clipboard functionality with state management
+ * @param copiedTimeout - How long to show the copied state in ms before resetting
+ * @returns Object with isCopied state, any error, and copy function
+ */
+function useCopyToClipboard(copiedTimeout?: number): CopyToClipboardReturn;
+export default useCopyToClipboard;
+//# sourceMappingURL=useCopyToClipboard.d.ts.map
+}
+
 declare module '@ably/ui/core/scripts';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "16.1.4",
+  "version": "16.2.0-dev.4aca114e",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "http-server": "14.1.1",
     "jsdom": "^26.0.0",
     "mixpanel-browser": "^2.60.0",
-    "msw": "2.7.3",
+    "msw": "2.7.5",
     "msw-storybook-addon": "^2.0.2",
     "playwright": "^1.49.1",
     "posthog-js": "^1.217.4",
@@ -86,6 +86,7 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-navigation-menu": "^1.2.4",
+    "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "addsearch-js-client": "^1.0.2",